simone
d1b1047368
Catalog Database-View UX & Legacy Consolidation (OFFER-07/08/09/10/13) - 11-01: tags table + polymorphic junction + additive legacy migration - 11-02: getAllServices tag join + inline-edit/tag/quick-add server actions - 11-03: EditableCell + TagMultiSelect components - 11-04: database-view ServiceTable + client-side search Verified by gsd-plan-checker (VERIFICATION PASSED). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
27 KiB
27 KiB
phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves
| phase | plan | type | wave | depends_on | files_modified | autonomous | requirements | must_haves | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 11-catalog-database-view-ux-legacy-consolidation | 04 | execute | 4 |
|
|
true |
|
|
Purpose: This is the user-facing payload of Phase 11 — OFFER-07, OFFER-08, OFFER-09, OFFER-10 all manifest here, consuming Plan 02's query/actions and Plan 03's EditableCell/TagMultiSelect.
Output:
src/components/admin/catalog/ServiceTable.tsx— full rewrite (ServiceRow + ServiceTable + quick-add row + active/inactive split)src/app/admin/catalog/page.tsx— adds client-side search bar, passesServiceWithTags[]src/components/admin/catalog/ServiceForm.tsx— removed (quick-add row replaces its functionality);page.tsxno longer imports it
<execution_context> @$HOME/.claude/get-shit-done/workflows/execute-plan.md @$HOME/.claude/get-shit-done/templates/summary.md </execution_context>
@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md @.planning/phases/11-catalog-database-view-ux-legacy-consolidation/11-CONTEXT.md @.planning/DESIGN-SYSTEM.md ```typescript export type ServiceWithTags = Service & { tags: string[] }; export async function getAllServices(): Promise; ```export async function updateServiceField(
serviceId: string,
fieldName: "name" | "description" | "category" | "unit_price" | "active",
value: string | boolean
): Promise<void>;
export async function quickAddService(name: string): Promise<void>;
// addTagToService / removeTagFromService consumed internally by TagMultiSelect — not called directly here
export interface EditableCellProps {
value: string | number | boolean;
type?: "text" | "number" | "textarea" | "toggle";
onSave: (value: string) => void;
required?: boolean;
placeholder?: string;
disabled?: boolean;
formatDisplay?: (value: string) => string;
}
export function EditableCell(props: EditableCellProps): JSX.Element;
export interface TagMultiSelectProps {
tags: string[];
serviceId: string;
onTagsChanged?: () => void;
}
export function TagMultiSelect(props: TagMultiSelectProps): JSX.Element;
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>
);
}
```typescript
"use client";
import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { Input } from "@/components/ui/input";
import { EditableCell } from "@/components/ui/editable-cell";
import { TagMultiSelect } from "@/components/ui/tag-multi-select";
import { updateServiceField, quickAddService } from "@/app/admin/catalog/actions";
import type { ServiceWithTags } from "@/lib/admin-queries";
function formatPrice(raw: string): string {
const num = parseFloat(raw);
return `€${(isNaN(num) ? 0 : num).toLocaleString("it-IT", { minimumFractionDigits: 2 })}`;
}
function ServiceRow({ service }: { service: ServiceWithTags }) {
const router = useRouter();
const [, startTransition] = useTransition();
const [error, setError] = useState<string | null>(null);
function saveField(
field: "name" | "description" | "category" | "unit_price" | "active",
value: string
) {
setError(null);
startTransition(async () => {
try {
await updateServiceField(service.id, field, value);
router.refresh();
} catch (e) {
setError(e instanceof Error ? e.message : "Errore nel salvataggio");
}
});
}
return (
<tr
className={`border-b border-[#e5e7eb] hover:bg-[#f9f9f9] transition-colors duration-150 ${
!service.active ? "opacity-50" : ""
}`}
>
<td className="py-2 px-3 font-medium text-[#1a1a1a] min-w-[160px]">
<EditableCell
value={service.name}
type="text"
required
onSave={(v) => saveField("name", v)}
/>
</td>
<td className="py-2 px-3 text-[#71717a] min-w-[220px]">
<EditableCell
value={service.description ?? ""}
type="textarea"
placeholder="Descrizione..."
onSave={(v) => saveField("description", v)}
/>
</td>
<td className="py-2 px-3 text-[#71717a] min-w-[120px]">
<EditableCell
value={service.category ?? ""}
type="text"
placeholder="Categoria..."
onSave={(v) => saveField("category", v)}
/>
</td>
<td className="py-2 px-3 tabular-nums min-w-[100px]">
<EditableCell
value={service.unit_price}
type="number"
formatDisplay={formatPrice}
onSave={(v) => saveField("unit_price", v)}
/>
</td>
<td className="py-2 px-3 min-w-[180px]">
<TagMultiSelect
tags={service.tags}
serviceId={service.id}
onTagsChanged={() => router.refresh()}
/>
</td>
<td className="py-2 px-3 min-w-[100px]">
<EditableCell
value={service.active ? "true" : "false"}
type="toggle"
onSave={(v) => saveField("active", v)}
/>
</td>
{error && (
<td className="py-1 px-3 text-xs text-red-600" colSpan={6}>
{error}
</td>
)}
</tr>
);
}
function QuickAddRow() {
const [name, setName] = useState("");
const [, startTransition] = useTransition();
const [error, setError] = useState<string | null>(null);
const router = useRouter();
function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
if (e.key !== "Enter") return;
const trimmed = name.trim();
if (!trimmed) return;
e.preventDefault();
setError(null);
startTransition(async () => {
try {
await quickAddService(trimmed);
setName("");
router.refresh();
} catch (err) {
setError(err instanceof Error ? err.message : "Errore nel salvataggio");
}
});
}
return (
<tr className="border-b border-[#e5e7eb] bg-[#f9f9f9]">
<td className="py-2 px-3">
<Input
value={name}
onChange={(e) => setName(e.target.value)}
onKeyDown={handleKeyDown}
placeholder="+ Aggiungi servizio"
className="border-0 bg-transparent shadow-none h-8 text-sm placeholder:text-[#71717a] focus-visible:ring-1 focus-visible:ring-primary"
/>
{error && <p className="text-xs text-red-600 mt-1">{error}</p>}
</td>
<td colSpan={5}></td>
</tr>
);
}
const COLUMN_HEADERS = ["Nome", "Descrizione", "Categoria", "Prezzo", "Tag", "Stato"];
export function ServiceTable({ services }: { services: ServiceWithTags[] }) {
const activeServices = services.filter((s) => s.active);
const inactiveServices = services.filter((s) => !s.active);
return (
<div className="bg-white rounded-xl border border-[#e5e7eb] overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead className="bg-[#f9f9f9] border-b border-[#e5e7eb] sticky top-0 z-[1]">
<tr>
{COLUMN_HEADERS.map((header) => (
<th
key={header}
className="text-left py-2 px-3 font-semibold text-[#71717a]"
>
{header}
</th>
))}
</tr>
</thead>
<tbody>
{activeServices.map((s) => (
<ServiceRow key={s.id} service={s} />
))}
<QuickAddRow />
{inactiveServices.length > 0 && (
<>
<tr className="border-b border-t-2 border-t-[#e5e7eb] border-[#e5e7eb]">
<td colSpan={6} className="py-1.5 px-3 text-xs font-medium text-[#71717a] uppercase tracking-wide">
Servizi disattivati
</td>
</tr>
{inactiveServices.map((s) => (
<ServiceRow key={s.id} service={s} />
))}
</>
)}
</tbody>
</table>
</div>
</div>
);
}
```
Notes:
- Row height target ~40px is achieved via `py-2` (8px top/bottom padding) on `text-sm` cells — close to the 40px spec without being cramped; adjust to `py-1.5` if visual QA in Plan output finds rows too tall.
- The error message row (`colSpan={6}`) only renders when a save fails — does not affect row height in the success path.
- `QuickAddRow` is placed between active and inactive services per D-12/D-13 ordering (new services are active by default, so the add row visually belongs with the active group).
- The "Servizi disattivati" divider uses `border-t-2` for visual separation per D-13, with `uppercase tracking-wide` for a small-caps-like label per DESIGN-SYSTEM.md ("small-caps ok, ALL-CAPS pesante no" — `uppercase` + `text-xs` + `tracking-wide` on a short label is the lightweight interpretation).
2. Since filtering needs client-side state, create the filter UI as a client component co-located in `page.tsx`'s directory. Create `src/app/admin/catalog/CatalogSearch.tsx`:
```typescript
"use client";
import { useState, useMemo } from "react";
import { Input } from "@/components/ui/input";
import { Search } from "lucide-react";
import { ServiceTable } from "@/components/admin/catalog/ServiceTable";
import type { ServiceWithTags } from "@/lib/admin-queries";
export function CatalogSearch({ services }: { services: ServiceWithTags[] }) {
const [query, setQuery] = useState("");
const filtered = useMemo(() => {
const q = query.trim().toLowerCase();
if (!q) return services;
return services.filter((s) => {
if (s.name.toLowerCase().includes(q)) return true;
return s.tags.some((tag) => tag.toLowerCase().includes(q));
});
}, [services, query]);
return (
<div className="space-y-4">
<div className="relative max-w-sm">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#71717a]" />
<Input
type="text"
placeholder="Cerca per nome o tag..."
value={query}
onChange={(e) => setQuery(e.target.value)}
className="pl-9 h-9"
/>
</div>
<ServiceTable services={filtered} />
</div>
);
}
```
3. Replace `src/app/admin/catalog/page.tsx` with:
```typescript
import { getAllServices } from "@/lib/admin-queries";
import { CatalogSearch } from "./CatalogSearch";
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>
{services.length === 0 ? (
<p className="text-sm text-[#71717a]">
Nessun servizio nel catalogo. Scrivi un nome nella riga in fondo alla tabella e premi invio per crearne uno.
</p>
) : (
<CatalogSearch services={services} />
)}
</div>
);
}
```
Note: when `services.length === 0`, `CatalogSearch`/`ServiceTable` is not rendered, so the quick-add row (which lives inside `ServiceTable`) is not visible on a completely empty catalog. This matches the existing "Nessun servizio" UX from before Phase 11, but the message now points the user at the table's quick-add row. If this is undesirable in practice (catalog is currently non-empty per Phase 7 migration, so this is an edge case), it can be revisited — not blocking for Phase 11 success criteria, which describe filtering/quick-add behavior on a populated catalog.
<threat_model>
Trust Boundaries
| Boundary | Description |
|---|---|
| Admin browser -> ServiceTable/CatalogSearch -> Server Actions | All mutations (updateServiceField, quickAddService, tag actions via TagMultiSelect) flow through Plan 02's admin-gated actions |
| Client-side search filter | Pure presentational filter over already-fetched ServiceWithTags[] — no new data fetched based on query input |
STRIDE Threat Register
| Threat ID | Category | Component | Disposition | Mitigation Plan |
|---|---|---|---|---|
| T-11-14 | Information Disclosure | CatalogSearch client-side filter |
accept | All services (including inactive ones) are sent to the client regardless of search query — this is the existing behavior (ServiceTable already received the full list pre-Phase-11) and is required for the active/inactive split + instant client-side search (OFFER-10). No new data is exposed: /admin/catalog is already behind Auth.js session (middleware admin guard). |
| T-11-15 | Tampering | QuickAddRow repeated Enter presses |
mitigate | startTransition + the input is not cleared until the action resolves successfully; a failed quickAddService call surfaces an inline error without creating a partial row, since the DB insert is atomic. |
| T-11-16 | Denial of Service | Large catalog (many services) rendered client-side | accept | Catalog size is bounded by manual admin entry (single-admin app, no bulk import in this phase per CONTEXT.md — CSV import is Phase 12). Acceptable for current and near-future scale. |
No HIGH-severity unmitigated threats. Authorization for all mutating operations is enforced in Plan 02's server actions, inherited transitively by this plan's UI. </threat_model>
1. `npx tsc --noEmit` passes with zero errors 2. `npm run build` (or `npx next build`) completes successfully 3. Manual smoke test (covered by checkpoint below): `/admin/catalog` renders the database-view table with inline edit, tags, quick-add row, search bar, and active/inactive split<success_criteria>
- OFFER-07: every cell (name, description, category, price, status) is click-to-edit via
EditableCell, saving on Enter/blur, no modal/reload - OFFER-08: tags column uses
TagMultiSelect, supports creating new tags on the fly - OFFER-09: quick-add row at the bottom of the active section creates a new service (unit_price=0) on Enter
- OFFER-10: search bar filters by name/tag, client-side, instant, no reload
- D-13/D-14: inactive services sink below a divider with reduced opacity; no "Azioni" column anywhere
- Build passes (
npm run build) </success_criteria>