docs(03): plan Phase 3 — Service Catalog & Quote Builder (4 plans, 2 waves)
Wave 1: schema push (service_id nullable + custom_label). Wave 2 (parallel): catalog CRUD page + quote builder tab. Wave 3: E2E human verification checkpoint. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Simone Cavalli
@@ -68,9 +68,14 @@ Decimal phases appear between their surrounding integers in numeric order.
|
||||
1. L'admin può aggiungere, modificare e disattivare voci nel catalogo servizi (nome, descrizione, prezzo unitario)
|
||||
2. L'admin può comporre un preventivo per un cliente selezionando voci dal catalogo; il sistema calcola il totale
|
||||
3. Dopo la finalizzazione del preventivo, `accepted_total` è scritto sulla riga cliente e la dashboard del cliente mostra il totale corretto; i `quote_items` non sono mai esposti al cliente
|
||||
**Plans**: TBD
|
||||
**Plans**: 4 plans
|
||||
**Plan list**:
|
||||
- [ ] 03-01-PLAN.md — Schema changes (service_id nullable, custom_label) + drizzle-kit push [BLOCKING]
|
||||
- [ ] 03-02-PLAN.md — Service Catalog: /admin/catalog page + CRUD actions + ServiceTable + NavBar link
|
||||
- [ ] 03-03-PLAN.md — Quote Builder: QuoteTab + quote-actions + client detail page wiring
|
||||
- [ ] 03-04-PLAN.md — E2E verification: catalog CRUD, quote round-trip, accepted_total, security check
|
||||
**UI hint**: yes
|
||||
**Status**: Pending planning
|
||||
**Status**: Planned — ready for execution
|
||||
|
||||
### Phase 4: Claude AI Onboarding (v2)
|
||||
**Goal**: L'admin può usare un flusso chat guidato per onboardare un nuovo cliente e generare un piano a fasi e un preventivo assistito da Claude
|
||||
@@ -94,5 +99,5 @@ Phases execute in numeric order: 1 → 2 → 3 → 4
|
||||
|-------|-------|--------|-----------|
|
||||
| 1. Foundation & Client Dashboard | 5/5 | ✅ Done | 2026-05-14 |
|
||||
| 2. Admin Area & Interactive Features | 4/4 | Planned | - |
|
||||
| 3. Service Catalog & Quote Builder | 0/TBD | Pending | - |
|
||||
| 3. Service Catalog & Quote Builder | 4/4 | Planned | - |
|
||||
| 4. Claude AI Onboarding (v2) | 0/TBD | Pending | - |
|
||||
@@ -0,0 +1,216 @@
|
||||
---
|
||||
phase: "03"
|
||||
plan: "01"
|
||||
type: execute
|
||||
wave: 1
|
||||
depends_on: []
|
||||
files_modified:
|
||||
- src/db/schema.ts
|
||||
autonomous: true
|
||||
requirements:
|
||||
- CAT-01
|
||||
- CAT-02
|
||||
- ADMIN-03
|
||||
|
||||
must_haves:
|
||||
truths:
|
||||
- "quote_items.service_id is nullable in the database (free-form items can be inserted without a catalog reference)"
|
||||
- "quote_items.custom_label column exists in the database (free-form label storage)"
|
||||
- "TypeScript QuoteItem type reflects both changes (no compile errors when service_id is null or custom_label is set)"
|
||||
- "drizzle-kit push completes without errors against the live Neon database"
|
||||
artifacts:
|
||||
- path: "src/db/schema.ts"
|
||||
provides: "Updated quote_items table definition with nullable service_id and custom_label column"
|
||||
contains: "custom_label: text(\"custom_label\")"
|
||||
key_links:
|
||||
- from: "src/db/schema.ts quote_items.service_id"
|
||||
to: "Neon Postgres quote_items table"
|
||||
via: "drizzle-kit push"
|
||||
pattern: "service_id.*references.*service_catalog"
|
||||
---
|
||||
|
||||
<objective>
|
||||
Make the two schema changes required for free-form quote items — make `service_id` nullable and add `custom_label text` — then push the changes to the live Neon database.
|
||||
|
||||
Purpose: All subsequent plans (Wave 2) reference `custom_label` and insert rows with `service_id = null`. Without this push, the DB will reject those inserts with a column-not-found or NOT NULL constraint error.
|
||||
Output: Updated `src/db/schema.ts` and a successful `drizzle-kit push` confirmation.
|
||||
</objective>
|
||||
|
||||
<execution_context>
|
||||
@$HOME/.claude/get-shit-done/workflows/execute-plan.md
|
||||
@$HOME/.claude/get-shit-done/templates/summary.md
|
||||
</execution_context>
|
||||
|
||||
<context>
|
||||
@/Users/simonecavalli/IAMCAVALLI/.planning/PROJECT.md
|
||||
@/Users/simonecavalli/IAMCAVALLI/.planning/ROADMAP.md
|
||||
|
||||
<interfaces>
|
||||
<!-- Current quote_items definition in src/db/schema.ts lines 159-172 -->
|
||||
```typescript
|
||||
export const quote_items = pgTable("quote_items", {
|
||||
id: text("id").primaryKey().$defaultFn(() => nanoid()),
|
||||
client_id: text("client_id")
|
||||
.notNull()
|
||||
.references(() => clients.id, { onDelete: "cascade" }),
|
||||
service_id: text("service_id")
|
||||
.notNull() // <-- REMOVE .notNull()
|
||||
.references(() => service_catalog.id, { onDelete: "restrict" }),
|
||||
quantity: numeric("quantity", { precision: 10, scale: 2 }).notNull(),
|
||||
unit_price: numeric("unit_price", { precision: 10, scale: 2 }).notNull(),
|
||||
subtotal: numeric("subtotal", { precision: 10, scale: 2 }).notNull(),
|
||||
// custom_label missing — ADD after subtotal
|
||||
});
|
||||
```
|
||||
|
||||
<!-- After changes, the definition must be: -->
|
||||
```typescript
|
||||
export const quote_items = pgTable("quote_items", {
|
||||
id: text("id").primaryKey().$defaultFn(() => nanoid()),
|
||||
client_id: text("client_id")
|
||||
.notNull()
|
||||
.references(() => clients.id, { onDelete: "cascade" }),
|
||||
service_id: text("service_id")
|
||||
.references(() => service_catalog.id, { onDelete: "restrict" }), // nullable — no .notNull()
|
||||
quantity: numeric("quantity", { precision: 10, scale: 2 }).notNull(),
|
||||
unit_price: numeric("unit_price", { precision: 10, scale: 2 }).notNull(),
|
||||
subtotal: numeric("subtotal", { precision: 10, scale: 2 }).notNull(),
|
||||
custom_label: text("custom_label"), // new field
|
||||
});
|
||||
```
|
||||
|
||||
<!-- quoteItemsRelations also references service_id — the relation stays but the field is now optional: -->
|
||||
```typescript
|
||||
export const quoteItemsRelations = relations(quote_items, ({ one }) => ({
|
||||
client: one(clients, { fields: [quote_items.client_id], references: [clients.id] }),
|
||||
service: one(service_catalog, {
|
||||
fields: [quote_items.service_id],
|
||||
references: [service_catalog.id],
|
||||
}),
|
||||
}));
|
||||
```
|
||||
<!-- The relation definition does NOT need to change — Drizzle handles nullable FK relations correctly. -->
|
||||
|
||||
<!-- Inferred TypeScript type after change (auto-generated by Drizzle): -->
|
||||
```typescript
|
||||
export type QuoteItem = typeof quote_items.$inferSelect;
|
||||
// QuoteItem.service_id will be: string | null
|
||||
// QuoteItem.custom_label will be: string | null
|
||||
```
|
||||
</interfaces>
|
||||
</context>
|
||||
|
||||
<tasks>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 1: Update quote_items schema — make service_id nullable and add custom_label</name>
|
||||
<read_first>
|
||||
- /Users/simonecavalli/IAMCAVALLI/src/db/schema.ts (full file — understand current definition before editing)
|
||||
</read_first>
|
||||
<files>src/db/schema.ts</files>
|
||||
<action>
|
||||
Edit `src/db/schema.ts` — two targeted changes to the `quote_items` table definition (lines 159-172):
|
||||
|
||||
**Change 1 — Remove `.notNull()` from service_id (per D-03 from CONTEXT.md):**
|
||||
Before:
|
||||
```typescript
|
||||
service_id: text("service_id")
|
||||
.notNull()
|
||||
.references(() => service_catalog.id, { onDelete: "restrict" }),
|
||||
```
|
||||
After:
|
||||
```typescript
|
||||
service_id: text("service_id")
|
||||
.references(() => service_catalog.id, { onDelete: "restrict" }),
|
||||
```
|
||||
|
||||
**Change 2 — Add custom_label field after the `subtotal` line:**
|
||||
```typescript
|
||||
custom_label: text("custom_label"),
|
||||
```
|
||||
|
||||
No other changes to the file. The `quoteItemsRelations` block does NOT need to change.
|
||||
After the edit, run `npx tsc --noEmit` to confirm zero TypeScript errors before pushing.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && grep -v '^//' src/db/schema.ts | grep -c 'custom_label: text("custom_label")'</automated>
|
||||
Expected: 1
|
||||
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && grep -A3 'service_id: text("service_id")' src/db/schema.ts | grep -c 'notNull'</automated>
|
||||
Expected: 0 (notNull must be gone from service_id)
|
||||
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && npx tsc --noEmit 2>&1 | head -20</automated>
|
||||
Expected: no output (zero errors)
|
||||
</verify>
|
||||
<done>
|
||||
`src/db/schema.ts` compiles with zero TypeScript errors. `service_id` has no `.notNull()`. `custom_label: text("custom_label")` is present in the quote_items table definition.
|
||||
</done>
|
||||
</task>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 2: [BLOCKING] Push schema changes to Neon database</name>
|
||||
<read_first>
|
||||
- /Users/simonecavalli/IAMCAVALLI/.env.local (verify DATABASE_URL is set before running push)
|
||||
- /Users/simonecavalli/IAMCAVALLI/drizzle.config.ts (verify push config points to correct schema)
|
||||
</read_first>
|
||||
<files>— (no source files modified; runs drizzle-kit against live DB)</files>
|
||||
<action>
|
||||
Run drizzle-kit push with the .env.local DATABASE_URL loaded:
|
||||
|
||||
```bash
|
||||
cd /Users/simonecavalli/IAMCAVALLI
|
||||
set -a && source .env.local && set +a && npx drizzle-kit push
|
||||
```
|
||||
|
||||
When prompted to confirm schema changes, accept all changes. The push will:
|
||||
1. DROP NOT NULL constraint from `quote_items.service_id`
|
||||
2. ADD COLUMN `custom_label text` to `quote_items`
|
||||
|
||||
If the push fails with "column already exists" for `custom_label`, the column was already added in a prior run — this is safe to ignore. Verify the column exists by checking the push output or running a quick query.
|
||||
|
||||
Do NOT skip this task. Wave 2 plans cannot execute correctly without the DB columns existing.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && set -a && source .env.local && set +a && npx drizzle-kit push 2>&1 | tail -5</automated>
|
||||
Expected: Output contains "No changes" or "Changes applied" — either confirms the schema is in sync.
|
||||
</verify>
|
||||
<done>
|
||||
`drizzle-kit push` exits without error. The live Neon DB has `quote_items.service_id` as nullable and `quote_items.custom_label text` column present.
|
||||
</done>
|
||||
</task>
|
||||
|
||||
</tasks>
|
||||
|
||||
<threat_model>
|
||||
## Trust Boundaries
|
||||
|
||||
| Boundary | Description |
|
||||
|----------|-------------|
|
||||
| Schema file → Neon DB | drizzle-kit push executes DDL against the live database; misconfigured DATABASE_URL would push to wrong environment |
|
||||
|
||||
## STRIDE Threat Register
|
||||
|
||||
| Threat ID | Category | Component | Disposition | Mitigation Plan |
|
||||
|-----------|----------|-----------|-------------|-----------------|
|
||||
| T-03-01-01 | Tampering | drizzle-kit push | mitigate | Always load DATABASE_URL from `.env.local` (not hardcoded); verify `.env.local` exists before running push |
|
||||
| T-03-01-02 | Denial of Service | Neon DB DDL | accept | Schema changes are additive (ADD COLUMN, DROP NOT NULL) — no data loss risk; onDelete: "restrict" prevents orphaned quote_items |
|
||||
</threat_model>
|
||||
|
||||
<verification>
|
||||
After both tasks complete:
|
||||
1. `grep 'custom_label' src/db/schema.ts` returns the field definition
|
||||
2. `grep -A3 'service_id: text' src/db/schema.ts` shows no `.notNull()` on service_id
|
||||
3. `npx tsc --noEmit` exits 0
|
||||
4. `npx drizzle-kit push` reports "No changes" (schema is in sync with DB)
|
||||
</verification>
|
||||
|
||||
<success_criteria>
|
||||
- `src/db/schema.ts` has nullable `service_id` and `custom_label: text("custom_label")` in quote_items
|
||||
- TypeScript compiles with zero errors
|
||||
- drizzle-kit push confirms schema is synced to Neon DB
|
||||
- Wave 2 plans can safely reference `custom_label` and insert rows with `service_id = null`
|
||||
</success_criteria>
|
||||
|
||||
<output>
|
||||
After completion, create `.planning/phases/03-service-catalog-quote-builder/03-01-SUMMARY.md`
|
||||
</output>
|
||||
@@ -0,0 +1,647 @@
|
||||
---
|
||||
phase: "03"
|
||||
plan: "02"
|
||||
type: execute
|
||||
wave: 2
|
||||
depends_on:
|
||||
- "03-01"
|
||||
files_modified:
|
||||
- src/app/admin/catalog/page.tsx
|
||||
- src/app/admin/catalog/actions.ts
|
||||
- src/components/admin/catalog/ServiceTable.tsx
|
||||
- src/components/admin/catalog/ServiceForm.tsx
|
||||
- src/components/admin/NavBar.tsx
|
||||
autonomous: true
|
||||
requirements:
|
||||
- CAT-01
|
||||
|
||||
must_haves:
|
||||
truths:
|
||||
- "Admin can navigate to /admin/catalog from the NavBar ('Catalogo' link visible between Statistiche and Esci)"
|
||||
- "Admin can see a table of all services with columns Nome | Descrizione | Prezzo | Stato | Azioni"
|
||||
- "Admin can add a new service via an inline form (name, optional description, unit price) — it appears in the table after save"
|
||||
- "Admin can click 'Modifica' on a row and edit name, description, price inline — changes persist after save"
|
||||
- "Admin can click 'Disattiva' to soft-delete a service (active=false) — row shows 'Disattivato' badge at 50% opacity"
|
||||
- "Admin can click 'Riattiva' on a disabled service to re-enable it"
|
||||
- "Inactive services remain visible in the table (with badge) but are excluded from the quote builder dropdown"
|
||||
artifacts:
|
||||
- path: "src/app/admin/catalog/page.tsx"
|
||||
provides: "Service catalog page — server component, fetches all services, renders table"
|
||||
contains: "getAllServices"
|
||||
- path: "src/app/admin/catalog/actions.ts"
|
||||
provides: "Server Actions: createService, updateService, toggleServiceActive"
|
||||
exports: ["createService", "updateService", "toggleServiceActive"]
|
||||
- path: "src/components/admin/catalog/ServiceTable.tsx"
|
||||
provides: "Table with per-row inline edit and active toggle"
|
||||
contains: "ServiceTable"
|
||||
- path: "src/components/admin/catalog/ServiceForm.tsx"
|
||||
provides: "Add-new-service form rendered above table"
|
||||
contains: "ServiceForm"
|
||||
- path: "src/components/admin/NavBar.tsx"
|
||||
provides: "NavBar with Catalogo link added"
|
||||
contains: "/admin/catalog"
|
||||
key_links:
|
||||
- from: "src/components/admin/catalog/ServiceForm.tsx"
|
||||
to: "src/app/admin/catalog/actions.ts createService"
|
||||
via: "form action"
|
||||
pattern: "createService"
|
||||
- from: "src/components/admin/catalog/ServiceTable.tsx"
|
||||
to: "src/app/admin/catalog/actions.ts updateService / toggleServiceActive"
|
||||
via: "Server Action calls in useTransition"
|
||||
pattern: "updateService|toggleServiceActive"
|
||||
- from: "src/app/admin/catalog/page.tsx"
|
||||
to: "src/lib/admin-queries.ts getAllServices (new function)"
|
||||
via: "await getAllServices()"
|
||||
pattern: "getAllServices"
|
||||
---
|
||||
|
||||
<objective>
|
||||
Deliver the complete `/admin/catalog` page: NavBar link, page layout, table with inline edit, add-service form, and soft-delete toggle. This is a self-contained vertical slice — after this plan executes, the admin can manage the service catalog end-to-end.
|
||||
|
||||
Purpose: Fulfills CAT-01 (service database with prices). Provides the catalog data that Wave 2's Quote Builder (plan 03-03) will query for its dropdown.
|
||||
Output: 5 new/modified files — a fully functional service catalog page.
|
||||
</objective>
|
||||
|
||||
<execution_context>
|
||||
@$HOME/.claude/get-shit-done/workflows/execute-plan.md
|
||||
@$HOME/.claude/get-shit-done/templates/summary.md
|
||||
</execution_context>
|
||||
|
||||
<context>
|
||||
@/Users/simonecavalli/IAMCAVALLI/.planning/ROADMAP.md
|
||||
@/Users/simonecavalli/IAMCAVALLI/.planning/phases/03-service-catalog-quote-builder/03-01-SUMMARY.md
|
||||
|
||||
<interfaces>
|
||||
<!-- Analog: src/app/admin/page.tsx — follow this exact page structure -->
|
||||
```typescript
|
||||
// Server component, fetches data, renders table + header
|
||||
export default async function AdminDashboard() {
|
||||
const clients = await getAllClientsWithPayments();
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h1 className="text-2xl font-bold text-[#1a1a1a]">Clienti</h1>
|
||||
<Button asChild><Link href="/admin/clients/new">+ Nuovo cliente</Link></Button>
|
||||
</div>
|
||||
{/* table */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
<!-- Analog: src/components/admin/DocumentRow.tsx — follow this inline edit pattern exactly -->
|
||||
```typescript
|
||||
"use client";
|
||||
import { useState, useTransition } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export function DocumentRow({ doc, clientId }) {
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [, startTransition] = useTransition();
|
||||
const router = useRouter();
|
||||
|
||||
function handleSave(fd: FormData) {
|
||||
setError(null);
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await updateDocument(doc.id, clientId, fd);
|
||||
setEditing(false);
|
||||
router.refresh();
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Errore nel salvataggio");
|
||||
}
|
||||
});
|
||||
}
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
<!-- Analog: src/app/admin/clients/[id]/actions.ts — Zod validation pattern -->
|
||||
```typescript
|
||||
"use server";
|
||||
import { z } from "zod";
|
||||
import { db } from "@/db";
|
||||
import { revalidatePath } from "next/cache";
|
||||
|
||||
const clientSchema = z.object({
|
||||
name: z.string().min(1, "Nome richiesto"),
|
||||
brand_name: z.string().min(1, "Brand name richiesto"),
|
||||
brief: z.string(),
|
||||
});
|
||||
|
||||
export async function updateClient(clientId: string, formData: FormData) {
|
||||
const parsed = clientSchema.safeParse({
|
||||
name: formData.get("name"),
|
||||
brand_name: formData.get("brand_name"),
|
||||
brief: formData.get("brief") ?? "",
|
||||
});
|
||||
if (!parsed.success) throw new Error(parsed.error.issues[0].message);
|
||||
await db.update(clients).set(parsed.data).where(eq(clients.id, clientId));
|
||||
revalidatePath("/admin");
|
||||
}
|
||||
```
|
||||
|
||||
<!-- NavBar current structure — add Catalogo link after Statistiche -->
|
||||
```typescript
|
||||
// src/components/admin/NavBar.tsx lines 7-29
|
||||
export function NavBar() {
|
||||
return (
|
||||
<nav className="bg-[#1A463C] px-6 py-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-6">
|
||||
<span className="font-bold text-white tracking-tight">iamcavalli</span>
|
||||
<Link href="/admin" className="text-sm text-white/70 hover:text-white transition-colors">Clienti</Link>
|
||||
<Link href="/admin/analytics" className="text-sm text-white/70 hover:text-white transition-colors">Statistiche</Link>
|
||||
{/* ADD HERE: */}
|
||||
{/* <Link href="/admin/catalog" className="text-sm text-white/70 hover:text-white transition-colors">Catalogo</Link> */}
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={() => signOut({ callbackUrl: "/admin/login" })}
|
||||
className="text-sm text-white/70 hover:text-white hover:bg-white/10">Esci</Button>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
<!-- Table + card styling from existing admin UI -->
|
||||
```typescript
|
||||
// Table container
|
||||
<div className="bg-white rounded-xl border border-[#e5e7eb] overflow-hidden">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-[#f9f9f9] border-b border-[#e5e7eb]">
|
||||
<tr>
|
||||
<th className="text-left py-3 px-4 font-medium text-[#71717a]">Colonna</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b border-[#f4f4f5] hover:bg-[#f9f9f9]">
|
||||
<td className="py-3 px-4">...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
// Status badge — active
|
||||
<span className="text-xs font-medium bg-[#1A463C]/10 text-[#1A463C] px-2 py-0.5 rounded-full">Attivo</span>
|
||||
// Status badge — inactive
|
||||
<span className="text-xs font-medium bg-[#f4f4f5] text-[#71717a] px-2 py-0.5 rounded-full">Disattivato</span>
|
||||
|
||||
// Currency display
|
||||
€{parseFloat(amount).toLocaleString("it-IT", { minimumFractionDigits: 2 })}
|
||||
```
|
||||
|
||||
<!-- ServiceCatalog type (auto-generated from schema.ts) -->
|
||||
```typescript
|
||||
export type ServiceCatalog = typeof service_catalog.$inferSelect;
|
||||
// Fields: id: string, name: string, description: string | null, unit_price: string, active: boolean
|
||||
```
|
||||
</interfaces>
|
||||
</context>
|
||||
|
||||
<tasks>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 1: Server Actions + getAllServices query</name>
|
||||
<read_first>
|
||||
- /Users/simonecavalli/IAMCAVALLI/src/app/admin/clients/[id]/actions.ts (Zod + Server Action pattern to replicate)
|
||||
- /Users/simonecavalli/IAMCAVALLI/src/lib/admin-queries.ts (add getAllServices here, following existing function style)
|
||||
- /Users/simonecavalli/IAMCAVALLI/src/db/schema.ts (confirm service_catalog fields after 03-01 changes)
|
||||
</read_first>
|
||||
<files>
|
||||
src/app/admin/catalog/actions.ts
|
||||
src/lib/admin-queries.ts
|
||||
</files>
|
||||
<action>
|
||||
**Create `src/app/admin/catalog/actions.ts`** — three Server Actions following exact Zod+FormData pattern from `clients/[id]/actions.ts`:
|
||||
|
||||
```typescript
|
||||
"use server";
|
||||
|
||||
import { db } from "@/db";
|
||||
import { service_catalog } from "@/db/schema";
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { eq } from "drizzle-orm";
|
||||
import { z } from "zod";
|
||||
import { getServerSession } from "next-auth";
|
||||
import { authOptions } from "@/lib/auth";
|
||||
|
||||
const serviceSchema = z.object({
|
||||
name: z.string().min(1, "Nome richiesto"),
|
||||
description: z.string().optional(),
|
||||
unit_price: z.coerce.number().min(0.01, "Prezzo deve essere maggiore di 0"),
|
||||
});
|
||||
|
||||
async function requireAdmin() {
|
||||
const session = await getServerSession(authOptions);
|
||||
if (!session) throw new Error("Non autorizzato");
|
||||
}
|
||||
|
||||
export async function createService(formData: FormData) {
|
||||
await requireAdmin();
|
||||
const parsed = serviceSchema.safeParse({
|
||||
name: formData.get("name"),
|
||||
description: formData.get("description") ?? "",
|
||||
unit_price: formData.get("unit_price"),
|
||||
});
|
||||
if (!parsed.success) throw new Error(parsed.error.issues[0].message);
|
||||
await db.insert(service_catalog).values({
|
||||
name: parsed.data.name,
|
||||
description: parsed.data.description ?? null,
|
||||
unit_price: parsed.data.unit_price.toFixed(2),
|
||||
});
|
||||
revalidatePath("/admin/catalog");
|
||||
}
|
||||
|
||||
export async function updateService(serviceId: string, formData: FormData) {
|
||||
await requireAdmin();
|
||||
const parsed = serviceSchema.safeParse({
|
||||
name: formData.get("name"),
|
||||
description: formData.get("description") ?? "",
|
||||
unit_price: formData.get("unit_price"),
|
||||
});
|
||||
if (!parsed.success) throw new Error(parsed.error.issues[0].message);
|
||||
await db
|
||||
.update(service_catalog)
|
||||
.set({
|
||||
name: parsed.data.name,
|
||||
description: parsed.data.description ?? null,
|
||||
unit_price: parsed.data.unit_price.toFixed(2),
|
||||
})
|
||||
.where(eq(service_catalog.id, serviceId));
|
||||
revalidatePath("/admin/catalog");
|
||||
}
|
||||
|
||||
export async function toggleServiceActive(serviceId: string, active: boolean) {
|
||||
await requireAdmin();
|
||||
await db
|
||||
.update(service_catalog)
|
||||
.set({ active })
|
||||
.where(eq(service_catalog.id, serviceId));
|
||||
revalidatePath("/admin/catalog");
|
||||
}
|
||||
```
|
||||
|
||||
**Add `getAllServices()` to `src/lib/admin-queries.ts`** — append at end of file before the closing exports:
|
||||
|
||||
```typescript
|
||||
export async function getAllServices(): Promise<ServiceCatalog[]> {
|
||||
return db
|
||||
.select()
|
||||
.from(service_catalog)
|
||||
.orderBy(asc(service_catalog.name));
|
||||
}
|
||||
```
|
||||
|
||||
Also add `service_catalog` to the imports at top of admin-queries.ts, and `ServiceCatalog` to the type imports. Add `asc` if not already imported from `drizzle-orm`.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && grep -c 'export async function createService' src/app/admin/catalog/actions.ts</automated>
|
||||
Expected: 1
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && grep -c 'export async function updateService' src/app/admin/catalog/actions.ts</automated>
|
||||
Expected: 1
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && grep -c 'export async function toggleServiceActive' src/app/admin/catalog/actions.ts</automated>
|
||||
Expected: 1
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && grep -c 'export async function getAllServices' src/lib/admin-queries.ts</automated>
|
||||
Expected: 1
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && npx tsc --noEmit 2>&1 | head -20</automated>
|
||||
Expected: no output (zero errors)
|
||||
</verify>
|
||||
<done>
|
||||
Three Server Actions exported from `catalog/actions.ts`. `getAllServices()` added to `admin-queries.ts`. TypeScript compiles clean.
|
||||
</done>
|
||||
</task>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 2: Service Catalog page + components (ServiceTable, ServiceForm) + NavBar link</name>
|
||||
<read_first>
|
||||
- /Users/simonecavalli/IAMCAVALLI/src/app/admin/page.tsx (page structure to mirror)
|
||||
- /Users/simonecavalli/IAMCAVALLI/src/components/admin/DocumentRow.tsx (inline edit pattern to replicate)
|
||||
- /Users/simonecavalli/IAMCAVALLI/src/components/admin/NavBar.tsx (current NavBar to add Catalogo link)
|
||||
- /Users/simonecavalli/IAMCAVALLI/src/app/admin/catalog/actions.ts (actions just created in Task 1)
|
||||
</read_first>
|
||||
<files>
|
||||
src/app/admin/catalog/page.tsx
|
||||
src/components/admin/catalog/ServiceTable.tsx
|
||||
src/components/admin/catalog/ServiceForm.tsx
|
||||
src/components/admin/NavBar.tsx
|
||||
</files>
|
||||
<action>
|
||||
**Create `src/app/admin/catalog/page.tsx`** — Server Component mirroring `src/app/admin/page.tsx`:
|
||||
|
||||
```typescript
|
||||
import { getAllServices } from "@/lib/admin-queries";
|
||||
import { ServiceTable } from "@/components/admin/catalog/ServiceTable";
|
||||
import { ServiceForm } from "@/components/admin/catalog/ServiceForm";
|
||||
|
||||
export const revalidate = 0;
|
||||
|
||||
export default async function CatalogPage() {
|
||||
const services = await getAllServices();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h1 className="text-2xl font-bold text-[#1a1a1a]">Catalogo Servizi</h1>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<ServiceForm />
|
||||
</div>
|
||||
|
||||
{services.length === 0 ? (
|
||||
<p className="text-sm text-[#71717a]">
|
||||
Nessun servizio nel catalogo. Aggiungi il primo servizio qui sopra.
|
||||
</p>
|
||||
) : (
|
||||
<ServiceTable services={services} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**Create `src/components/admin/catalog/ServiceForm.tsx`** — inline add-new-service form using Server Action:
|
||||
|
||||
```typescript
|
||||
"use client";
|
||||
|
||||
import { useRef, useState, useTransition } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { createService } from "@/app/admin/catalog/actions";
|
||||
|
||||
export function ServiceForm() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [, startTransition] = useTransition();
|
||||
const router = useRouter();
|
||||
const formRef = useRef<HTMLFormElement>(null);
|
||||
|
||||
function handleSubmit(fd: FormData) {
|
||||
setError(null);
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await createService(fd);
|
||||
formRef.current?.reset();
|
||||
setOpen(false);
|
||||
router.refresh();
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Errore nel salvataggio");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (!open) {
|
||||
return (
|
||||
<Button
|
||||
onClick={() => setOpen(true)}
|
||||
className="bg-[#1A463C] text-white hover:bg-[#1A463C]/90"
|
||||
>
|
||||
+ Aggiungi servizio
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white border border-[#e5e7eb] rounded-xl p-4 space-y-4">
|
||||
<h3 className="font-medium text-[#1a1a1a]">Nuovo servizio</h3>
|
||||
<form ref={formRef} action={handleSubmit} className="space-y-3">
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="name">Nome</Label>
|
||||
<Input id="name" name="name" placeholder="es. Strategia di brand" required />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="description">Descrizione (opzionale)</Label>
|
||||
<Input id="description" name="description" placeholder="es. Incluso: analisi competitor, posizionamento" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="unit_price">Prezzo unitario (€)</Label>
|
||||
<Input
|
||||
id="unit_price"
|
||||
name="unit_price"
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0.01"
|
||||
placeholder="0.00"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{error && <p className="text-xs text-red-600">{error}</p>}
|
||||
<div className="flex gap-2">
|
||||
<Button type="submit" size="sm" className="bg-[#1A463C] text-white hover:bg-[#1A463C]/90">
|
||||
Aggiungi
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => { setOpen(false); setError(null); }}
|
||||
>
|
||||
Annulla
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**Create `src/components/admin/catalog/ServiceTable.tsx`** — table with per-row inline edit, following DocumentRow pattern:
|
||||
|
||||
```typescript
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { updateService, toggleServiceActive } from "@/app/admin/catalog/actions";
|
||||
import type { ServiceCatalog } from "@/db/schema";
|
||||
|
||||
function ServiceRow({ service }: { service: ServiceCatalog }) {
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [, startTransition] = useTransition();
|
||||
const router = useRouter();
|
||||
|
||||
function handleSave(fd: FormData) {
|
||||
setError(null);
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await updateService(service.id, fd);
|
||||
setEditing(false);
|
||||
router.refresh();
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Errore nel salvataggio");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleToggle() {
|
||||
startTransition(async () => {
|
||||
await toggleServiceActive(service.id, !service.active);
|
||||
router.refresh();
|
||||
});
|
||||
}
|
||||
|
||||
if (editing) {
|
||||
return (
|
||||
<tr>
|
||||
<td colSpan={5} className="px-4 py-3">
|
||||
<form action={handleSave} className="space-y-2 bg-[#f9f9f9] rounded-lg p-3 border border-[#1A463C]/20">
|
||||
<div className="flex gap-3 flex-wrap">
|
||||
<div className="flex-1 min-w-[140px] space-y-1">
|
||||
<Label htmlFor={`name-${service.id}`}>Nome</Label>
|
||||
<Input id={`name-${service.id}`} name="name" defaultValue={service.name} required />
|
||||
</div>
|
||||
<div className="flex-[2] min-w-[180px] space-y-1">
|
||||
<Label htmlFor={`desc-${service.id}`}>Descrizione</Label>
|
||||
<Input id={`desc-${service.id}`} name="description" defaultValue={service.description ?? ""} />
|
||||
</div>
|
||||
<div className="w-28 space-y-1">
|
||||
<Label htmlFor={`price-${service.id}`}>Prezzo (€)</Label>
|
||||
<Input
|
||||
id={`price-${service.id}`}
|
||||
name="unit_price"
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0.01"
|
||||
defaultValue={parseFloat(service.unit_price).toFixed(2)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{error && <p className="text-xs text-red-600">{error}</p>}
|
||||
<div className="flex gap-2">
|
||||
<Button type="submit" size="sm" className="bg-[#1A463C] text-white hover:bg-[#1A463C]/90">Salva</Button>
|
||||
<Button type="button" variant="ghost" size="sm" onClick={() => { setEditing(false); setError(null); }}>Annulla</Button>
|
||||
</div>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<tr className={`border-b border-[#f4f4f5] hover:bg-[#f9f9f9] transition-colors ${!service.active ? "opacity-50" : ""}`}>
|
||||
<td className="py-3 px-4 font-medium text-[#1a1a1a]">{service.name}</td>
|
||||
<td className="py-3 px-4 text-[#71717a] text-sm max-w-xs truncate">{service.description ?? "—"}</td>
|
||||
<td className="py-3 px-4 tabular-nums font-mono">
|
||||
€{parseFloat(service.unit_price).toLocaleString("it-IT", { minimumFractionDigits: 2 })}
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
{service.active ? (
|
||||
<span className="text-xs font-medium bg-[#1A463C]/10 text-[#1A463C] px-2 py-0.5 rounded-full">Attivo</span>
|
||||
) : (
|
||||
<span className="text-xs font-medium bg-[#f4f4f5] text-[#71717a] px-2 py-0.5 rounded-full">Disattivato</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-right">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<Button variant="ghost" size="sm" onClick={() => setEditing(true)}>Modifica</Button>
|
||||
<Button variant="ghost" size="sm" onClick={handleToggle}>
|
||||
{service.active ? "Disattiva" : "Riattiva"}
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
export function ServiceTable({ services }: { services: ServiceCatalog[] }) {
|
||||
return (
|
||||
<div className="bg-white rounded-xl border border-[#e5e7eb] overflow-hidden">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-[#f9f9f9] border-b border-[#e5e7eb]">
|
||||
<tr>
|
||||
<th className="text-left py-3 px-4 font-medium text-[#71717a]">Nome</th>
|
||||
<th className="text-left py-3 px-4 font-medium text-[#71717a]">Descrizione</th>
|
||||
<th className="text-left py-3 px-4 font-medium text-[#71717a]">Prezzo</th>
|
||||
<th className="text-left py-3 px-4 font-medium text-[#71717a]">Stato</th>
|
||||
<th className="py-3 px-4"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{services.map((s) => (
|
||||
<ServiceRow key={s.id} service={s} />
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**Modify `src/components/admin/NavBar.tsx`** — add Catalogo link after the Statistiche link:
|
||||
|
||||
```typescript
|
||||
<Link href="/admin/catalog" className="text-sm text-white/70 hover:text-white transition-colors">
|
||||
Catalogo
|
||||
</Link>
|
||||
```
|
||||
|
||||
Insert this line immediately after the existing `<Link href="/admin/analytics" ...>Statistiche</Link>` line.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && grep -c '/admin/catalog' src/components/admin/NavBar.tsx</automated>
|
||||
Expected: 1
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && grep -c 'export function ServiceTable' src/components/admin/catalog/ServiceTable.tsx</automated>
|
||||
Expected: 1
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && grep -c 'export function ServiceForm' src/components/admin/catalog/ServiceForm.tsx</automated>
|
||||
Expected: 1
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && grep -c 'getAllServices' src/app/admin/catalog/page.tsx</automated>
|
||||
Expected: 1
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && npx tsc --noEmit 2>&1 | head -20</automated>
|
||||
Expected: no output (zero errors)
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && npm run build 2>&1 | tail -10</automated>
|
||||
Expected: "Compiled successfully" or "Route (app)" output with no errors
|
||||
</verify>
|
||||
<done>
|
||||
NavBar shows "Catalogo" link. `/admin/catalog` page renders. ServiceTable and ServiceForm compile. Full `npm run build` passes. Admin can navigate to `/admin/catalog` and see the table.
|
||||
</done>
|
||||
</task>
|
||||
|
||||
</tasks>
|
||||
|
||||
<threat_model>
|
||||
## Trust Boundaries
|
||||
|
||||
| Boundary | Description |
|
||||
|----------|-------------|
|
||||
| Admin browser → Server Actions (catalog/actions.ts) | FormData from admin form crosses to server; must be validated before DB write |
|
||||
| /admin/catalog route → Auth.js session | All catalog routes inherit the `/admin/*` middleware session check from Phase 2; no additional guard needed at page level |
|
||||
|
||||
## STRIDE Threat Register
|
||||
|
||||
| Threat ID | Category | Component | Disposition | Mitigation Plan |
|
||||
|-----------|----------|-----------|-------------|-----------------|
|
||||
| T-03-02-01 | Spoofing | createService / updateService / toggleServiceActive | mitigate | `requireAdmin()` calls `getServerSession(authOptions)` at the top of every Server Action — rejects if no valid session |
|
||||
| T-03-02-02 | Tampering | serviceSchema Zod validation | mitigate | `unit_price` validated as `z.coerce.number().min(0.01)` — prevents zero/negative prices; `name` requires min length 1 |
|
||||
| T-03-02-03 | Tampering | updateService serviceId parameter | mitigate | serviceId is bound at call site in the Server Action closure — admin can only modify the row ID passed from the server-rendered page |
|
||||
| T-03-02-04 | Information Disclosure | /admin/catalog page | accept | Page is behind Auth.js `/admin/*` middleware (enforced in Phase 2); service prices are admin-internal data, not client-facing |
|
||||
| T-03-02-05 | Tampering | XSS in service name / description | accept | React JSX auto-escapes all string output; no `dangerouslySetInnerHTML` used; UI-SPEC forbids it |
|
||||
</threat_model>
|
||||
|
||||
<verification>
|
||||
After both tasks complete:
|
||||
1. `grep '/admin/catalog' src/components/admin/NavBar.tsx` returns 1 match
|
||||
2. `npx tsc --noEmit` exits clean
|
||||
3. `npm run build` succeeds
|
||||
4. Navigating to `/admin/catalog` (dev server) shows the catalog page with table headers and "Aggiungi servizio" button
|
||||
5. Adding a service via the form makes it appear in the table
|
||||
6. Clicking "Disattiva" changes badge to "Disattivato" and reduces row opacity
|
||||
</verification>
|
||||
|
||||
<success_criteria>
|
||||
- `/admin/catalog` route is accessible from NavBar and renders without error
|
||||
- All three Server Actions (createService, updateService, toggleServiceActive) are exported from `catalog/actions.ts` with Zod validation and `requireAdmin()` guard
|
||||
- ServiceTable renders per-row inline edit using the DocumentRow pattern
|
||||
- Inactive services show "Disattivato" badge; active services show "Attivo" badge
|
||||
- TypeScript and build both pass clean
|
||||
</success_criteria>
|
||||
|
||||
<output>
|
||||
After completion, create `.planning/phases/03-service-catalog-quote-builder/03-02-SUMMARY.md`
|
||||
</output>
|
||||
@@ -0,0 +1,725 @@
|
||||
---
|
||||
phase: "03"
|
||||
plan: "03"
|
||||
type: execute
|
||||
wave: 2
|
||||
depends_on:
|
||||
- "03-01"
|
||||
files_modified:
|
||||
- src/app/admin/clients/[id]/quote-actions.ts
|
||||
- src/components/admin/tabs/QuoteTab.tsx
|
||||
- src/app/admin/clients/[id]/page.tsx
|
||||
- src/lib/admin-queries.ts
|
||||
autonomous: true
|
||||
requirements:
|
||||
- CAT-02
|
||||
- ADMIN-03
|
||||
|
||||
must_haves:
|
||||
truths:
|
||||
- "Admin can see a 'Preventivo' tab in /admin/clients/[id] — the 5th tab after Commenti"
|
||||
- "Admin can select an active catalog service from a dropdown and add it (with qty) to the quote — the item appears in the table with snapshotted unit_price"
|
||||
- "Admin can toggle to 'Voce libera' mode and add a custom label + price + qty item (service_id = null in DB)"
|
||||
- "Admin can click 'Rimuovi' to delete a quote item — it disappears from the table"
|
||||
- "The table footer shows 'Totale calcolato' as the sum of all subtotals"
|
||||
- "Admin can set a separate 'Totale accettato dal cliente' via an editable input + Salva button — this writes to clients.accepted_total"
|
||||
- "quote_items are NEVER returned by any client-facing route — only clients.accepted_total is visible to clients"
|
||||
artifacts:
|
||||
- path: "src/app/admin/clients/[id]/quote-actions.ts"
|
||||
provides: "Server Actions: addQuoteItem, removeQuoteItem, updateAcceptedTotal"
|
||||
exports: ["addQuoteItem", "removeQuoteItem", "updateAcceptedTotal"]
|
||||
- path: "src/components/admin/tabs/QuoteTab.tsx"
|
||||
provides: "Quote builder UI — add items (catalog + freeform), items table, accepted total editor"
|
||||
contains: "QuoteTab"
|
||||
- path: "src/app/admin/clients/[id]/page.tsx"
|
||||
provides: "Client detail page with 5th Preventivo tab wired to QuoteTab"
|
||||
contains: "Preventivo"
|
||||
- path: "src/lib/admin-queries.ts"
|
||||
provides: "getClientFullDetail extended to include quoteItems and activeServices"
|
||||
contains: "quoteItems"
|
||||
key_links:
|
||||
- from: "src/components/admin/tabs/QuoteTab.tsx add-item form"
|
||||
to: "src/app/admin/clients/[id]/quote-actions.ts addQuoteItem"
|
||||
via: "form action (Server Action)"
|
||||
pattern: "addQuoteItem"
|
||||
- from: "src/components/admin/tabs/QuoteTab.tsx remove button"
|
||||
to: "src/app/admin/clients/[id]/quote-actions.ts removeQuoteItem"
|
||||
via: "form action"
|
||||
pattern: "removeQuoteItem"
|
||||
- from: "src/components/admin/tabs/QuoteTab.tsx accepted total form"
|
||||
to: "src/app/admin/clients/[id]/quote-actions.ts updateAcceptedTotal"
|
||||
via: "form action"
|
||||
pattern: "updateAcceptedTotal"
|
||||
- from: "src/app/admin/clients/[id]/page.tsx"
|
||||
to: "src/lib/admin-queries.ts getClientFullDetail"
|
||||
via: "await getClientFullDetail(id)"
|
||||
pattern: "getClientFullDetail"
|
||||
---
|
||||
|
||||
<objective>
|
||||
Deliver the "Preventivo" tab in the admin client detail page. This is the quote builder vertical slice: Server Actions for quote item CRUD + accepted_total write, the QuoteTab component (catalog dropdown + freeform toggle + items table + accepted total editor), and the wiring of both into the existing client detail page.
|
||||
|
||||
Purpose: Fulfills CAT-02 (catalog as quote generation base) and ADMIN-03 (full quote detail visible to admin only). The client sees only `clients.accepted_total` — this constraint is enforced at the query layer.
|
||||
Output: 4 new/modified files — a fully operational quote builder tab.
|
||||
</objective>
|
||||
|
||||
<execution_context>
|
||||
@$HOME/.claude/get-shit-done/workflows/execute-plan.md
|
||||
@$HOME/.claude/get-shit-done/templates/summary.md
|
||||
</execution_context>
|
||||
|
||||
<context>
|
||||
@/Users/simonecavalli/IAMCAVALLI/.planning/ROADMAP.md
|
||||
@/Users/simonecavalli/IAMCAVALLI/.planning/phases/03-service-catalog-quote-builder/03-01-SUMMARY.md
|
||||
|
||||
<interfaces>
|
||||
<!-- Existing client detail page tabs structure — add Preventivo as 5th tab -->
|
||||
```typescript
|
||||
// src/app/admin/clients/[id]/page.tsx (current)
|
||||
<Tabs defaultValue="phases" className="w-full">
|
||||
<TabsList className="mb-6">
|
||||
<TabsTrigger value="phases">Fasi & Task</TabsTrigger>
|
||||
<TabsTrigger value="payments">Pagamenti</TabsTrigger>
|
||||
<TabsTrigger value="documents">Documenti</TabsTrigger>
|
||||
<TabsTrigger value="comments">Commenti</TabsTrigger>
|
||||
{/* ADD: <TabsTrigger value="quote">Preventivo</TabsTrigger> */}
|
||||
</TabsList>
|
||||
{/* ADD: <TabsContent value="quote"><QuoteTab ... /></TabsContent> */}
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
<!-- getClientFullDetail current return type — must be extended with quoteItems and activeServices -->
|
||||
```typescript
|
||||
export type ClientFullDetail = {
|
||||
client: Client;
|
||||
phases: Array<Phase & { tasks: Array<Task & { deliverables: Deliverable[] }> }>;
|
||||
payments: Payment[];
|
||||
documents: Document[];
|
||||
notes: Note[];
|
||||
comments: Comment[];
|
||||
// ADD:
|
||||
// quoteItems: QuoteItemWithLabel[];
|
||||
// activeServices: ServiceCatalog[];
|
||||
};
|
||||
```
|
||||
|
||||
<!-- PaymentsTab — analog structure for QuoteTab (server component with inline Server Action calls) -->
|
||||
```typescript
|
||||
// src/components/admin/tabs/PaymentsTab.tsx pattern
|
||||
export async function PaymentsTab({ payments, acceptedTotal, clientId }: Props) {
|
||||
return (
|
||||
<div className="space-y-6 max-w-md">
|
||||
<div className="bg-white border border-gray-200 rounded-lg p-4">
|
||||
<h3 className="font-medium text-gray-900 mb-3">...</h3>
|
||||
<form action={async (fd) => { "use server"; await updateAcceptedTotal(clientId, fd); }}>
|
||||
...
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
<!-- SECURITY: getClientFullDetail must NOT expose quote_items via client-facing API.
|
||||
The quote data is added only to the admin query result — not to any client route.
|
||||
Comment to add at the top of quote-actions.ts: -->
|
||||
// quote_items NEVER exposed — security constraint from Phase 1 (CLAUDE.md)
|
||||
// Only clients.accepted_total is visible to client-facing routes
|
||||
|
||||
<!-- Drizzle leftJoin + COALESCE pattern for quote items with service name -->
|
||||
```typescript
|
||||
import { sql, eq, asc } from "drizzle-orm";
|
||||
import { quote_items, service_catalog, clients } from "@/db/schema";
|
||||
|
||||
// Get quote items for a client — service name from catalog OR custom_label
|
||||
const items = await db
|
||||
.select({
|
||||
id: quote_items.id,
|
||||
label: sql<string>`COALESCE(${service_catalog.name}, ${quote_items.custom_label})`,
|
||||
custom_label: quote_items.custom_label,
|
||||
service_id: quote_items.service_id,
|
||||
quantity: quote_items.quantity,
|
||||
unit_price: quote_items.unit_price, // snapshotted — NEVER use service_catalog.unit_price
|
||||
subtotal: quote_items.subtotal,
|
||||
})
|
||||
.from(quote_items)
|
||||
.leftJoin(service_catalog, eq(quote_items.service_id, service_catalog.id))
|
||||
.where(eq(quote_items.client_id, clientId))
|
||||
.orderBy(asc(quote_items.id));
|
||||
```
|
||||
|
||||
<!-- addQuoteItem — numeric precision and subtotal calculation -->
|
||||
```typescript
|
||||
const qty = parseFloat(formData.get("quantity") as string);
|
||||
const price = parseFloat(formData.get("unit_price") as string);
|
||||
const subtotal = (qty * price).toFixed(2);
|
||||
// Insert: unit_price stored as string with 2dp (matches numeric(10,2) column)
|
||||
await db.insert(quote_items).values({
|
||||
client_id: clientId,
|
||||
service_id: serviceId ?? null, // null for freeform items
|
||||
custom_label: customLabel ?? null,
|
||||
quantity: qty.toFixed(2),
|
||||
unit_price: price.toFixed(2),
|
||||
subtotal,
|
||||
});
|
||||
```
|
||||
|
||||
<!-- ServiceCatalog type for dropdown -->
|
||||
```typescript
|
||||
export type ServiceCatalog = typeof service_catalog.$inferSelect;
|
||||
// Fields: id: string, name: string, unit_price: string, active: boolean, description: string | null
|
||||
```
|
||||
|
||||
<!-- QuoteItem type (updated after 03-01) -->
|
||||
```typescript
|
||||
export type QuoteItem = typeof quote_items.$inferSelect;
|
||||
// Fields: id, client_id, service_id: string | null, custom_label: string | null,
|
||||
// quantity, unit_price, subtotal (all numeric as string)
|
||||
```
|
||||
</interfaces>
|
||||
</context>
|
||||
|
||||
<tasks>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 1: quote-actions.ts Server Actions + extend getClientFullDetail</name>
|
||||
<read_first>
|
||||
- /Users/simonecavalli/IAMCAVALLI/src/app/admin/clients/[id]/actions.ts (pattern: Zod, requireAdmin, revalidatePath)
|
||||
- /Users/simonecavalli/IAMCAVALLI/src/lib/admin-queries.ts (current getClientFullDetail to extend — add quoteItems and activeServices)
|
||||
- /Users/simonecavalli/IAMCAVALLI/src/db/schema.ts (confirm custom_label and nullable service_id from 03-01)
|
||||
- /Users/simonecavalli/IAMCAVALLI/src/lib/client-view.ts (VERIFY this file does NOT query quote_items — if it does, remove that query)
|
||||
</read_first>
|
||||
<files>
|
||||
src/app/admin/clients/[id]/quote-actions.ts
|
||||
src/lib/admin-queries.ts
|
||||
</files>
|
||||
<action>
|
||||
**Create `src/app/admin/clients/[id]/quote-actions.ts`** — three Server Actions:
|
||||
|
||||
```typescript
|
||||
"use server";
|
||||
|
||||
// quote_items NEVER exposed — security constraint from Phase 1 (CLAUDE.md)
|
||||
// Only clients.accepted_total is visible to client-facing routes
|
||||
|
||||
import { db } from "@/db";
|
||||
import { quote_items, clients, service_catalog } from "@/db/schema";
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { eq } from "drizzle-orm";
|
||||
import { z } from "zod";
|
||||
import { getServerSession } from "next-auth";
|
||||
import { authOptions } from "@/lib/auth";
|
||||
|
||||
async function requireAdmin() {
|
||||
const session = await getServerSession(authOptions);
|
||||
if (!session) throw new Error("Non autorizzato");
|
||||
}
|
||||
|
||||
const quoteItemSchema = z.object({
|
||||
service_id: z.string().nullable(),
|
||||
custom_label: z.string().nullable(),
|
||||
quantity: z.coerce.number().min(0.01, "Quantità deve essere > 0"),
|
||||
unit_price: z.coerce.number().min(0.01, "Prezzo deve essere > 0"),
|
||||
});
|
||||
|
||||
export async function addQuoteItem(clientId: string, formData: FormData) {
|
||||
await requireAdmin();
|
||||
|
||||
const rawServiceId = formData.get("service_id") as string | null;
|
||||
const rawCustomLabel = formData.get("custom_label") as string | null;
|
||||
|
||||
const parsed = quoteItemSchema.safeParse({
|
||||
service_id: rawServiceId && rawServiceId !== "" ? rawServiceId : null,
|
||||
custom_label: rawCustomLabel && rawCustomLabel !== "" ? rawCustomLabel : null,
|
||||
quantity: formData.get("quantity"),
|
||||
unit_price: formData.get("unit_price"),
|
||||
});
|
||||
|
||||
if (!parsed.success) throw new Error(parsed.error.issues[0].message);
|
||||
|
||||
// Validate: either service_id or custom_label must be present
|
||||
if (!parsed.data.service_id && !parsed.data.custom_label) {
|
||||
throw new Error("Seleziona un servizio dal catalogo o inserisci il nome di una voce libera");
|
||||
}
|
||||
|
||||
const { service_id, custom_label, quantity, unit_price } = parsed.data;
|
||||
const subtotal = (quantity * unit_price).toFixed(2);
|
||||
|
||||
await db.insert(quote_items).values({
|
||||
client_id: clientId,
|
||||
service_id: service_id ?? null,
|
||||
custom_label: custom_label ?? null,
|
||||
quantity: quantity.toFixed(2),
|
||||
unit_price: unit_price.toFixed(2),
|
||||
subtotal,
|
||||
});
|
||||
|
||||
revalidatePath(`/admin/clients/${clientId}`);
|
||||
}
|
||||
|
||||
export async function removeQuoteItem(quoteItemId: string, clientId: string) {
|
||||
await requireAdmin();
|
||||
await db.delete(quote_items).where(eq(quote_items.id, quoteItemId));
|
||||
revalidatePath(`/admin/clients/${clientId}`);
|
||||
}
|
||||
|
||||
export async function updateAcceptedTotal(clientId: string, formData: FormData) {
|
||||
await requireAdmin();
|
||||
const raw = (formData.get("accepted_total") as string)?.trim();
|
||||
const val = parseFloat(raw);
|
||||
if (isNaN(val) || val < 0) throw new Error("Importo non valido");
|
||||
await db
|
||||
.update(clients)
|
||||
.set({ accepted_total: val.toFixed(2) })
|
||||
.where(eq(clients.id, clientId));
|
||||
revalidatePath(`/admin/clients/${clientId}`);
|
||||
}
|
||||
```
|
||||
|
||||
**Extend `src/lib/admin-queries.ts`** — add `QuoteItemWithLabel` type and extend `ClientFullDetail` + `getClientFullDetail`:
|
||||
|
||||
1. Add imports at top: `quote_items`, `service_catalog` from `@/db/schema`; `sql` from `drizzle-orm`; `ServiceCatalog` from `@/db/schema`.
|
||||
|
||||
2. Add new type before `ClientFullDetail`:
|
||||
```typescript
|
||||
export type QuoteItemWithLabel = {
|
||||
id: string;
|
||||
label: string; // COALESCE(service_catalog.name, quote_items.custom_label)
|
||||
custom_label: string | null;
|
||||
service_id: string | null;
|
||||
quantity: string;
|
||||
unit_price: string; // snapshotted — never joined back to service_catalog.unit_price
|
||||
subtotal: string;
|
||||
};
|
||||
```
|
||||
|
||||
3. Add `quoteItems: QuoteItemWithLabel[]` and `activeServices: ServiceCatalog[]` to the `ClientFullDetail` type.
|
||||
|
||||
4. Add two queries inside `getClientFullDetail()` before the `return` statement:
|
||||
|
||||
```typescript
|
||||
// quote_items NEVER exposed via client API — admin workspace query only
|
||||
const quoteItemRows: QuoteItemWithLabel[] = await db
|
||||
.select({
|
||||
id: quote_items.id,
|
||||
label: sql<string>`COALESCE(${service_catalog.name}, ${quote_items.custom_label})`,
|
||||
custom_label: quote_items.custom_label,
|
||||
service_id: quote_items.service_id,
|
||||
quantity: quote_items.quantity,
|
||||
unit_price: quote_items.unit_price,
|
||||
subtotal: quote_items.subtotal,
|
||||
})
|
||||
.from(quote_items)
|
||||
.leftJoin(service_catalog, eq(quote_items.service_id, service_catalog.id))
|
||||
.where(eq(quote_items.client_id, id))
|
||||
.orderBy(asc(quote_items.id));
|
||||
|
||||
const activeServiceRows = await db
|
||||
.select()
|
||||
.from(service_catalog)
|
||||
.where(eq(service_catalog.active, true))
|
||||
.orderBy(asc(service_catalog.name));
|
||||
```
|
||||
|
||||
5. Add `quoteItems: quoteItemRows` and `activeServices: activeServiceRows` to the return object.
|
||||
|
||||
IMPORTANT: Also read `src/lib/client-view.ts` to verify it does NOT query `quote_items`. If it does, remove that query entirely — `accepted_total` is the only field the client sees.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && grep -c 'export async function addQuoteItem' src/app/admin/clients/\[id\]/quote-actions.ts</automated>
|
||||
Expected: 1
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && grep -c 'export async function removeQuoteItem' src/app/admin/clients/\[id\]/quote-actions.ts</automated>
|
||||
Expected: 1
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && grep -c 'export async function updateAcceptedTotal' src/app/admin/clients/\[id\]/quote-actions.ts</automated>
|
||||
Expected: 1
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && grep -c 'quoteItems' src/lib/admin-queries.ts</automated>
|
||||
Expected: 3 or more (type definition, query, return)
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && grep -c 'quote_items' src/lib/client-view.ts 2>/dev/null || echo 0</automated>
|
||||
Expected: 0 (quote_items must NOT appear in client-view.ts)
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && npx tsc --noEmit 2>&1 | head -20</automated>
|
||||
Expected: no output (zero errors)
|
||||
</verify>
|
||||
<done>
|
||||
Three Server Actions exported with `requireAdmin()` guard and Zod validation. `getClientFullDetail` returns `quoteItems` and `activeServices`. `client-view.ts` contains zero references to `quote_items`. TypeScript compiles clean.
|
||||
</done>
|
||||
</task>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 2: QuoteTab component + wire into client detail page</name>
|
||||
<read_first>
|
||||
- /Users/simonecavalli/IAMCAVALLI/src/components/admin/tabs/PaymentsTab.tsx (exact analog structure to follow)
|
||||
- /Users/simonecavalli/IAMCAVALLI/src/app/admin/clients/[id]/page.tsx (current tab structure to extend)
|
||||
- /Users/simonecavalli/IAMCAVALLI/src/app/admin/clients/[id]/quote-actions.ts (actions from Task 1)
|
||||
- /Users/simonecavalli/IAMCAVALLI/src/lib/admin-queries.ts (updated ClientFullDetail type from Task 1)
|
||||
</read_first>
|
||||
<files>
|
||||
src/components/admin/tabs/QuoteTab.tsx
|
||||
src/app/admin/clients/[id]/page.tsx
|
||||
</files>
|
||||
<action>
|
||||
**Create `src/components/admin/tabs/QuoteTab.tsx`** — "use client" component with three form sections:
|
||||
|
||||
```typescript
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { addQuoteItem, removeQuoteItem, updateAcceptedTotal } from "@/app/admin/clients/[id]/quote-actions";
|
||||
import type { QuoteItemWithLabel } from "@/lib/admin-queries";
|
||||
import type { ServiceCatalog } from "@/db/schema";
|
||||
|
||||
type Props = {
|
||||
clientId: string;
|
||||
items: QuoteItemWithLabel[];
|
||||
activeServices: ServiceCatalog[];
|
||||
acceptedTotal: string;
|
||||
};
|
||||
|
||||
export function QuoteTab({ clientId, items, activeServices, acceptedTotal }: Props) {
|
||||
const [showCustom, setShowCustom] = useState(false);
|
||||
const [addError, setAddError] = useState<string | null>(null);
|
||||
const [totalError, setTotalError] = useState<string | null>(null);
|
||||
// For catalog mode: pre-fill unit_price when service is selected
|
||||
const [selectedServicePrice, setSelectedServicePrice] = useState<string>("");
|
||||
const [, startTransition] = useTransition();
|
||||
const router = useRouter();
|
||||
|
||||
const calculatedTotal = items.reduce((sum, item) => sum + parseFloat(item.subtotal), 0);
|
||||
|
||||
function handleAddItem(fd: FormData) {
|
||||
setAddError(null);
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await addQuoteItem(clientId, fd);
|
||||
router.refresh();
|
||||
} catch (e) {
|
||||
setAddError(e instanceof Error ? e.message : "Errore nell'aggiunta");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleRemove(quoteItemId: string) {
|
||||
startTransition(async () => {
|
||||
await removeQuoteItem(quoteItemId, clientId);
|
||||
router.refresh();
|
||||
});
|
||||
}
|
||||
|
||||
function handleSaveTotal(fd: FormData) {
|
||||
setTotalError(null);
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await updateAcceptedTotal(clientId, fd);
|
||||
router.refresh();
|
||||
} catch (e) {
|
||||
setTotalError(e instanceof Error ? e.message : "Errore nel salvataggio");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-2xl">
|
||||
|
||||
{/* Section 1: Add items */}
|
||||
<div className="bg-white border border-[#e5e7eb] rounded-xl p-4 space-y-4">
|
||||
<h3 className="text-xs font-bold text-[#71717a] uppercase tracking-wider">Aggiungi voci</h3>
|
||||
|
||||
{!showCustom ? (
|
||||
/* Catalog mode */
|
||||
<form action={handleAddItem} className="space-y-3">
|
||||
<input type="hidden" name="custom_label" value="" />
|
||||
<div className="flex items-end gap-3 flex-wrap">
|
||||
<div className="flex-1 min-w-[180px] space-y-1">
|
||||
<Label htmlFor="service_id">Seleziona dal catalogo</Label>
|
||||
<select
|
||||
name="service_id"
|
||||
id="service_id"
|
||||
className="w-full border border-[#e5e7eb] rounded-md px-3 py-2 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-[#1A463C]/30"
|
||||
onChange={(e) => {
|
||||
const svc = activeServices.find((s) => s.id === e.target.value);
|
||||
setSelectedServicePrice(svc ? parseFloat(svc.unit_price).toFixed(2) : "");
|
||||
}}
|
||||
required
|
||||
>
|
||||
<option value="">— Scegli servizio —</option>
|
||||
{activeServices.map((s) => (
|
||||
<option key={s.id} value={s.id}>
|
||||
{s.name} (€{parseFloat(s.unit_price).toLocaleString("it-IT", { minimumFractionDigits: 2 })})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="w-28 space-y-1">
|
||||
<Label htmlFor="unit_price_catalog">Prezzo unit.</Label>
|
||||
<Input
|
||||
id="unit_price_catalog"
|
||||
name="unit_price"
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0.01"
|
||||
value={selectedServicePrice}
|
||||
onChange={(e) => setSelectedServicePrice(e.target.value)}
|
||||
placeholder="0.00"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="w-20 space-y-1">
|
||||
<Label htmlFor="quantity_catalog">Qty</Label>
|
||||
<Input
|
||||
id="quantity_catalog"
|
||||
name="quantity"
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0.01"
|
||||
defaultValue="1"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" size="sm" className="bg-[#1A463C] text-white hover:bg-[#1A463C]/90">
|
||||
Aggiungi
|
||||
</Button>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setShowCustom(true); setAddError(null); }}
|
||||
className="text-xs text-[#71717a] hover:text-[#1a1a1a] underline"
|
||||
>
|
||||
Oppure aggiungi voce libera →
|
||||
</button>
|
||||
{addError && <p className="text-xs text-red-600">{addError}</p>}
|
||||
</form>
|
||||
) : (
|
||||
/* Freeform mode */
|
||||
<form action={handleAddItem} className="space-y-3">
|
||||
<input type="hidden" name="service_id" value="" />
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="custom_label">Nome voce</Label>
|
||||
<Input
|
||||
id="custom_label"
|
||||
name="custom_label"
|
||||
placeholder="es. Consulenza extra, Spese viaggi"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-3 flex-wrap">
|
||||
<div className="flex-1 min-w-[120px] space-y-1">
|
||||
<Label htmlFor="unit_price_custom">Prezzo unitario (€)</Label>
|
||||
<Input
|
||||
id="unit_price_custom"
|
||||
name="unit_price"
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0.01"
|
||||
placeholder="0.00"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="w-20 space-y-1">
|
||||
<Label htmlFor="quantity_custom">Qty</Label>
|
||||
<Input
|
||||
id="quantity_custom"
|
||||
name="quantity"
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0.01"
|
||||
defaultValue="1"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{addError && <p className="text-xs text-red-600">{addError}</p>}
|
||||
<div className="flex gap-2">
|
||||
<Button type="submit" size="sm" className="bg-[#1A463C] text-white hover:bg-[#1A463C]/90">
|
||||
Aggiungi voce libera
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => { setShowCustom(false); setAddError(null); }}
|
||||
>
|
||||
Torna al catalogo
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Section 2: Quote items table + calculated total */}
|
||||
<div className="bg-white border border-[#e5e7eb] rounded-xl p-4">
|
||||
<h3 className="text-xs font-bold text-[#71717a] uppercase tracking-wider mb-3">Voci preventivo</h3>
|
||||
{items.length === 0 ? (
|
||||
<p className="text-sm text-[#71717a] py-4 text-center">
|
||||
Nessuna voce aggiunta. Seleziona dal catalogo per iniziare.
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="border-b border-[#e5e7eb]">
|
||||
<tr>
|
||||
<th className="text-left py-2 px-2 font-medium text-[#71717a]">Voce</th>
|
||||
<th className="text-right py-2 px-2 font-medium text-[#71717a]">Qty</th>
|
||||
<th className="text-right py-2 px-2 font-medium text-[#71717a]">Prezzo unit.</th>
|
||||
<th className="text-right py-2 px-2 font-medium text-[#71717a]">Subtotale</th>
|
||||
<th className="py-2 px-2"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{items.map((item) => (
|
||||
<tr key={item.id} className="border-b border-[#f4f4f5] hover:bg-[#f9f9f9]">
|
||||
<td className="py-2 px-2 text-[#1a1a1a]">{item.label}</td>
|
||||
<td className="py-2 px-2 text-right tabular-nums">{parseFloat(item.quantity).toLocaleString("it-IT", { minimumFractionDigits: 2 })}</td>
|
||||
<td className="py-2 px-2 text-right tabular-nums font-mono">
|
||||
€{parseFloat(item.unit_price).toLocaleString("it-IT", { minimumFractionDigits: 2 })}
|
||||
</td>
|
||||
<td className="py-2 px-2 text-right tabular-nums font-mono font-medium">
|
||||
€{parseFloat(item.subtotal).toLocaleString("it-IT", { minimumFractionDigits: 2 })}
|
||||
</td>
|
||||
<td className="py-2 px-2 text-right">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemove(item.id)}
|
||||
className="text-xs text-[#71717a] hover:text-red-600 transition-colors"
|
||||
>
|
||||
Rimuovi
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="mt-3 pt-3 border-t border-[#e5e7eb] flex justify-end">
|
||||
<p className="font-bold text-[#1a1a1a] tabular-nums">
|
||||
Totale calcolato: €{calculatedTotal.toLocaleString("it-IT", { minimumFractionDigits: 2 })}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Section 3: Accepted total */}
|
||||
<div className="bg-white border border-[#e5e7eb] rounded-xl p-4 space-y-3">
|
||||
<h3 className="text-xs font-bold text-[#71717a] uppercase tracking-wider">Totale accettato dal cliente</h3>
|
||||
<form action={handleSaveTotal} className="flex items-end gap-3">
|
||||
<div className="flex-1 max-w-[200px] space-y-1">
|
||||
<Label htmlFor="accepted_total">Importo (€)</Label>
|
||||
<Input
|
||||
id="accepted_total"
|
||||
name="accepted_total"
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
defaultValue={parseFloat(acceptedTotal).toFixed(2)}
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" size="sm" className="bg-[#1A463C] text-white hover:bg-[#1A463C]/90">
|
||||
Salva
|
||||
</Button>
|
||||
</form>
|
||||
{totalError && <p className="text-xs text-red-600">{totalError}</p>}
|
||||
<p className="text-xs text-[#71717a]">
|
||||
Il cliente vede solo questo importo, non le singole voci del preventivo.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**Modify `src/app/admin/clients/[id]/page.tsx`** — add QuoteTab as 5th tab:
|
||||
|
||||
1. Add import at top:
|
||||
```typescript
|
||||
import { QuoteTab } from "@/components/admin/tabs/QuoteTab";
|
||||
```
|
||||
|
||||
2. Update destructure from `getClientFullDetail`:
|
||||
```typescript
|
||||
const { client, phases, payments, documents, comments, quoteItems, activeServices } = detail;
|
||||
```
|
||||
|
||||
3. Add 5th TabsTrigger after "Commenti":
|
||||
```typescript
|
||||
<TabsTrigger value="quote">Preventivo</TabsTrigger>
|
||||
```
|
||||
|
||||
4. Add 5th TabsContent after the comments TabsContent:
|
||||
```typescript
|
||||
<TabsContent value="quote">
|
||||
<QuoteTab
|
||||
clientId={client.id}
|
||||
items={quoteItems}
|
||||
activeServices={activeServices}
|
||||
acceptedTotal={client.accepted_total ?? "0"}
|
||||
/>
|
||||
</TabsContent>
|
||||
```
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && grep -c 'export function QuoteTab' src/components/admin/tabs/QuoteTab.tsx</automated>
|
||||
Expected: 1
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && grep -c 'Preventivo' src/app/admin/clients/\[id\]/page.tsx</automated>
|
||||
Expected: 2 (TabsTrigger text + TabsContent value)
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && grep -c 'quoteItems' src/app/admin/clients/\[id\]/page.tsx</automated>
|
||||
Expected: 1 (destructured from detail)
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && npx tsc --noEmit 2>&1 | head -20</automated>
|
||||
Expected: no output (zero errors)
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && npm run build 2>&1 | tail -10</automated>
|
||||
Expected: build succeeds with no errors
|
||||
</verify>
|
||||
<done>
|
||||
QuoteTab component renders with three sections. "Preventivo" tab appears in client detail page. TypeScript and build both pass clean.
|
||||
</done>
|
||||
</task>
|
||||
|
||||
</tasks>
|
||||
|
||||
<threat_model>
|
||||
## Trust Boundaries
|
||||
|
||||
| Boundary | Description |
|
||||
|----------|-------------|
|
||||
| Admin browser → quote-actions.ts Server Actions | FormData (clientId, service_id, unit_price, quantity) crosses to server — must be validated before DB write |
|
||||
| getClientFullDetail → /admin/clients/[id]/page.tsx | quoteItems and activeServices returned ONLY to admin page — never to client-facing routes |
|
||||
| client-view.ts / client API routes | Must NOT include quote_items in any query result — enforced at query layer |
|
||||
|
||||
## STRIDE Threat Register
|
||||
|
||||
| Threat ID | Category | Component | Disposition | Mitigation Plan |
|
||||
|-----------|----------|-----------|-------------|-----------------|
|
||||
| T-03-03-01 | Spoofing | addQuoteItem / removeQuoteItem / updateAcceptedTotal | mitigate | `requireAdmin()` calls `getServerSession(authOptions)` at top of every Server Action — rejects unauthenticated requests |
|
||||
| T-03-03-02 | Tampering | addQuoteItem formData (unit_price, quantity) | mitigate | Zod `quoteItemSchema` validates both as `z.coerce.number().min(0.01)` — prevents zero/negative values or non-numeric injection |
|
||||
| T-03-03-03 | Information Disclosure | quote_items exposed via client-facing route | mitigate | `getClientFullDetail` query adds quoteItems ONLY to admin return type; `client-view.ts` and all `/api/client/*` routes must never query `quote_items`; verified via grep gate in Task 1 verify |
|
||||
| T-03-03-04 | Tampering | IDOR — removeQuoteItem with foreign clientId | mitigate | removeQuoteItem deletes by `quoteItemId` only — the admin must be authenticated (requireAdmin). Phase scope has single admin; if multi-admin added in future, add `AND client_id = clientId` to delete WHERE clause |
|
||||
| T-03-03-05 | Tampering | XSS in custom_label field | accept | React JSX auto-escapes; custom_label rendered via `{item.label}` — no dangerouslySetInnerHTML; UI-SPEC prohibits it |
|
||||
| T-03-03-06 | Tampering | Confusing calculated_total vs accepted_total | accept | Visual design enforces separation: calculated total is read-only bold text; accepted_total is distinct editable input with Save button and helper text "Il cliente vede solo questo importo" |
|
||||
</threat_model>
|
||||
|
||||
<verification>
|
||||
After both tasks complete:
|
||||
1. `grep -c 'quote_items' src/lib/client-view.ts` returns 0
|
||||
2. `npx tsc --noEmit` exits clean
|
||||
3. `npm run build` succeeds
|
||||
4. Client detail page at `/admin/clients/[id]` shows "Preventivo" as 5th tab
|
||||
5. Adding a catalog item: item appears in table with snapshotted unit_price (not pulled from service_catalog)
|
||||
6. Adding a freeform item: row appears with custom_label, service_id is null in DB
|
||||
7. Clicking "Salva" on accepted_total updates `clients.accepted_total` — visible in PaymentsTab "Totale preventivo" field
|
||||
</verification>
|
||||
|
||||
<success_criteria>
|
||||
- `src/app/admin/clients/[id]/quote-actions.ts` exports three Server Actions with requireAdmin + Zod guards
|
||||
- `getClientFullDetail` returns `quoteItems: QuoteItemWithLabel[]` and `activeServices: ServiceCatalog[]`
|
||||
- QuoteTab renders all three sections: add items (catalog + freeform toggle), items table with calculated total, accepted total editor
|
||||
- `client-view.ts` contains zero references to `quote_items`
|
||||
- TypeScript and build both pass clean
|
||||
</success_criteria>
|
||||
|
||||
<output>
|
||||
After completion, create `.planning/phases/03-service-catalog-quote-builder/03-03-SUMMARY.md`
|
||||
</output>
|
||||
@@ -0,0 +1,216 @@
|
||||
---
|
||||
phase: "03"
|
||||
plan: "04"
|
||||
type: execute
|
||||
wave: 3
|
||||
depends_on:
|
||||
- "03-02"
|
||||
- "03-03"
|
||||
files_modified: []
|
||||
autonomous: false
|
||||
requirements:
|
||||
- CAT-01
|
||||
- CAT-02
|
||||
- ADMIN-03
|
||||
|
||||
must_haves:
|
||||
truths:
|
||||
- "Admin navigates to /admin/catalog — table shows all services with correct columns and status badges"
|
||||
- "Admin adds a service, edits it inline, and disattiva/riattiva it — all changes persist on page refresh"
|
||||
- "Admin opens a client's Preventivo tab — adds a catalog item and a freeform item — both appear in the table with correct subtotals and calculated total"
|
||||
- "Admin saves an accepted_total — the client dashboard shows that exact amount, not the calculated sum"
|
||||
- "A curl request to the client API returns NO quote_items field and NO service_id references"
|
||||
artifacts:
|
||||
- path: "src/app/admin/catalog/page.tsx"
|
||||
provides: "Verified: catalog page loads and renders table"
|
||||
- path: "src/components/admin/tabs/QuoteTab.tsx"
|
||||
provides: "Verified: three sections render correctly, catalog and freeform items work"
|
||||
- path: "src/lib/client-view.ts"
|
||||
provides: "Verified: zero quote_items references"
|
||||
key_links:
|
||||
- from: "clients.accepted_total (DB)"
|
||||
to: "client dashboard display"
|
||||
via: "client-view.ts query → /c/[token] page"
|
||||
pattern: "accepted_total"
|
||||
---
|
||||
|
||||
<objective>
|
||||
End-to-end verification of Phase 3. The admin runs the full workflow — create catalog service, add to quote, set accepted_total — and confirms the client dashboard shows the correct total. Also verifies the security constraint: `quote_items` are never returned by the client API.
|
||||
|
||||
Purpose: Confirms Phase 3 is shippable. Catches any integration issue between catalog, quote builder, and client dashboard before the phase is marked complete.
|
||||
Output: Human verification sign-off + SUMMARY.md.
|
||||
</objective>
|
||||
|
||||
<execution_context>
|
||||
@$HOME/.claude/get-shit-done/workflows/execute-plan.md
|
||||
@$HOME/.claude/get-shit-done/templates/summary.md
|
||||
</execution_context>
|
||||
|
||||
<context>
|
||||
@/Users/simonecavalli/IAMCAVALLI/.planning/ROADMAP.md
|
||||
@/Users/simonecavalli/IAMCAVALLI/.planning/phases/03-service-catalog-quote-builder/03-02-SUMMARY.md
|
||||
@/Users/simonecavalli/IAMCAVALLI/.planning/phases/03-service-catalog-quote-builder/03-03-SUMMARY.md
|
||||
</context>
|
||||
|
||||
<tasks>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 1: Automated security and integration checks</name>
|
||||
<read_first>
|
||||
- /Users/simonecavalli/IAMCAVALLI/src/lib/client-view.ts (must contain zero quote_items references)
|
||||
- /Users/simonecavalli/IAMCAVALLI/src/app/api (check all client-facing API route files for quote_items leaks)
|
||||
</read_first>
|
||||
<files></files>
|
||||
<action>
|
||||
Run the following automated checks in sequence. Report results for each.
|
||||
|
||||
**Check 1 — TypeScript compiles clean:**
|
||||
```bash
|
||||
cd /Users/simonecavalli/IAMCAVALLI && npx tsc --noEmit
|
||||
```
|
||||
Expected: zero output (no errors).
|
||||
|
||||
**Check 2 — Build succeeds:**
|
||||
```bash
|
||||
cd /Users/simonecavalli/IAMCAVALLI && npm run build
|
||||
```
|
||||
Expected: "Compiled successfully" with routes listed. No error lines.
|
||||
|
||||
**Check 3 — Security: quote_items not in client-facing code:**
|
||||
```bash
|
||||
cd /Users/simonecavalli/IAMCAVALLI && grep -rn 'quote_items' src/lib/client-view.ts src/app/api/ src/app/c/ 2>/dev/null || echo "CLEAN"
|
||||
```
|
||||
Expected: "CLEAN" or no output. If any match appears, that file must be fixed before the checkpoint.
|
||||
|
||||
**Check 4 — Service catalog page references getAllServices:**
|
||||
```bash
|
||||
cd /Users/simonecavalli/IAMCAVALLI && grep -c 'getAllServices' src/app/admin/catalog/page.tsx
|
||||
```
|
||||
Expected: 1
|
||||
|
||||
**Check 5 — NavBar contains Catalogo link:**
|
||||
```bash
|
||||
cd /Users/simonecavalli/IAMCAVALLI && grep -c '/admin/catalog' src/components/admin/NavBar.tsx
|
||||
```
|
||||
Expected: 1
|
||||
|
||||
**Check 6 — Client detail page has Preventivo tab:**
|
||||
```bash
|
||||
cd /Users/simonecavalli/IAMCAVALLI && grep -c 'Preventivo' src/app/admin/clients/\[id\]/page.tsx
|
||||
```
|
||||
Expected: 2
|
||||
|
||||
**Check 7 — quote-actions has requireAdmin in all three actions:**
|
||||
```bash
|
||||
cd /Users/simonecavalli/IAMCAVALLI && grep -c 'requireAdmin' src/app/admin/clients/\[id\]/quote-actions.ts
|
||||
```
|
||||
Expected: 3 (one per action)
|
||||
|
||||
**Check 8 — accepted_total security check (client view does NOT expose quote detail):**
|
||||
```bash
|
||||
cd /Users/simonecavalli/IAMCAVALLI && grep 'accepted_total\|quote_items\|service_id' src/lib/client-view.ts
|
||||
```
|
||||
Expected: `accepted_total` appears (it's the field clients see), `quote_items` does NOT appear, `service_id` does NOT appear.
|
||||
|
||||
If all 8 checks pass, proceed to the human verification checkpoint.
|
||||
If any check fails, fix the issue before proceeding.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && npx tsc --noEmit && npm run build 2>&1 | tail -5</automated>
|
||||
Expected: build output ends with route list — no "Failed to compile" line.
|
||||
<automated>cd /Users/simonecavalli/IAMCAVALLI && grep -rn 'quote_items' src/lib/client-view.ts src/app/c/ 2>/dev/null | wc -l | tr -d ' '</automated>
|
||||
Expected: 0
|
||||
</verify>
|
||||
<done>
|
||||
All 8 automated checks pass. TypeScript clean, build succeeds, quote_items absent from client-facing code.
|
||||
</done>
|
||||
</task>
|
||||
|
||||
<task type="checkpoint:human-verify" gate="blocking">
|
||||
<name>Task 2: Human end-to-end verification of Phase 3</name>
|
||||
<what-built>
|
||||
Service Catalog CRUD at /admin/catalog, Quote Builder tab in client detail, accepted_total round-trip to client dashboard.
|
||||
</what-built>
|
||||
<how-to-verify>
|
||||
Start the dev server: `npm run dev` (port 3000).
|
||||
|
||||
**Test A — Catalog page:**
|
||||
1. Open http://localhost:3000/admin/catalog
|
||||
2. Confirm the page loads with "Catalogo Servizi" heading and "Aggiungi servizio" button
|
||||
3. Click "Aggiungi servizio" — fill in Nome: "Test Servizio", Prezzo: "500" — click Aggiungi
|
||||
4. Confirm "Test Servizio" appears in the table with "Attivo" badge and €500,00 price
|
||||
5. Click "Modifica" on the row — change price to "750" — click Salva
|
||||
6. Confirm price updates to €750,00 without page reload
|
||||
7. Click "Disattiva" — confirm badge changes to "Disattivato" and row becomes dimmed (50% opacity)
|
||||
8. Click "Riattiva" — confirm badge returns to "Attivo"
|
||||
|
||||
**Test B — NavBar:**
|
||||
1. Confirm "Catalogo" link appears in the admin NavBar between "Statistiche" and "Esci"
|
||||
2. Click it — confirm it navigates to /admin/catalog
|
||||
|
||||
**Test C — Quote Builder tab:**
|
||||
1. Open any existing client at http://localhost:3000/admin/clients/[id]
|
||||
2. Confirm "Preventivo" tab appears as 5th tab (after Commenti)
|
||||
3. Click the Preventivo tab
|
||||
4. Select "Test Servizio" from the dropdown (if inactive, reactivate first) — set qty 1 — click Aggiungi
|
||||
5. Confirm item appears in the table with correct unit price and subtotal
|
||||
6. Click "Oppure aggiungi voce libera →" — enter Nome: "Extra consulenza", Prezzo: "200", Qty: 2 — click Aggiungi voce libera
|
||||
7. Confirm second item appears with "Extra consulenza" label, subtotal €400,00
|
||||
8. Confirm "Totale calcolato" shows the sum (e.g., €1.150,00 if service was €750)
|
||||
9. Click "Rimuovi" on one item — confirm it disappears
|
||||
|
||||
**Test D — Accepted total round-trip (critical):**
|
||||
1. In the Preventivo tab, set "Totale accettato dal cliente" to 1200 — click Salva
|
||||
2. Open the client dashboard at http://localhost:3000/c/[client-token] in a new tab
|
||||
3. Confirm the dashboard shows "€1.200,00" (or equivalent) as the accepted total
|
||||
4. Back in admin, open the Pagamenti tab — confirm "Totale preventivo" input shows 1200
|
||||
|
||||
**Test E — Security check (quote_items never exposed):**
|
||||
1. In the browser DevTools (Network tab), open the client dashboard /c/[token]
|
||||
2. Find any API calls made by that page — inspect their response bodies
|
||||
3. Confirm NO response contains "quote_items", "service_id" (from quote context), or individual line item prices
|
||||
4. Alternative: run `curl http://localhost:3000/api/client/[client-id-or-token]` if a client API route exists — confirm response has only `accepted_total`, not quote item details
|
||||
</how-to-verify>
|
||||
<resume-signal>
|
||||
Type "approved" if all 5 tests pass. Or describe any failures (e.g., "Test C step 5 fails — items not appearing") so they can be fixed.
|
||||
</resume-signal>
|
||||
</task>
|
||||
|
||||
</tasks>
|
||||
|
||||
<threat_model>
|
||||
## Trust Boundaries
|
||||
|
||||
| Boundary | Description |
|
||||
|----------|-------------|
|
||||
| Client browser → /c/[token] route | Client sees only what the route explicitly returns — verified here that quote_items are absent |
|
||||
|
||||
## STRIDE Threat Register
|
||||
|
||||
| Threat ID | Category | Component | Disposition | Mitigation Plan |
|
||||
|-----------|----------|-----------|-------------|-----------------|
|
||||
| T-03-04-01 | Information Disclosure | Client dashboard API response | mitigate | Check 3 + Test E verify that no quote_items appear in any client-facing response; if found, fix before approving |
|
||||
| T-03-04-02 | Tampering | Phase 3 shipped without DB push | mitigate | 03-01 is a hard dependency of this wave; if drizzle-kit push was skipped, custom_label column absent causes runtime crash caught in Test C |
|
||||
</threat_model>
|
||||
|
||||
<verification>
|
||||
Phase 3 complete when:
|
||||
1. All 8 automated checks in Task 1 pass
|
||||
2. Human verifies Tests A–E in Task 2
|
||||
3. Client dashboard shows correct `accepted_total` after update (Test D)
|
||||
4. Zero `quote_items` in any client-facing response (Test E)
|
||||
</verification>
|
||||
|
||||
<success_criteria>
|
||||
- Service catalog is fully operational: add, edit, disable, re-enable services
|
||||
- Quote builder adds catalog items (with snapshotted price) and freeform items (service_id = null)
|
||||
- accepted_total write in admin is reflected in client dashboard
|
||||
- Phase 3 roadmap success criteria 1–3 are all TRUE:
|
||||
1. Admin can add/edit/disable catalog services
|
||||
2. Admin can compose a quote from catalog; system calculates total
|
||||
3. After saving accepted_total, client dashboard shows correct total; quote_items never exposed
|
||||
</success_criteria>
|
||||
|
||||
<output>
|
||||
After completion, create `.planning/phases/03-service-catalog-quote-builder/03-04-SUMMARY.md`
|
||||
</output>
|
||||
Reference in New Issue
Block a user