feat(04-02): admin projects list + client detail project cards

- NavBar: add Progetti (/admin/projects) and Impostazioni links
- ProjectRow: project table row with €/h calc (accepted_total / tracked hours)
- /admin/projects: table listing all projects with value, payments, timer, €/h
- /admin/projects/new: create form with client select + ?client_id pre-selection
- project-actions: createProject, archiveProject, unarchiveProject, updateProjectAcceptedTotal
- /admin/clients/[id]: rewritten to show project cards grid instead of tabbed workspace
- getAllClientsWithPayments: add projectBrands[] and ltv (sum of project accepted_totals)
- ClientRow: show project brand names under client name, LTV column replaces Totale

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/admin/clients/[id]/page.tsx

@@ -1,12 +1,5 @@
 import { notFound } from "next/navigation";
-import { getClientFullDetail } from "@/lib/admin-queries";
+import { getClientWithProjects } from "@/lib/admin-queries";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { PhasesTab } from "@/components/admin/tabs/PhasesTab";
-import { PaymentsTab } from "@/components/admin/tabs/PaymentsTab";
-import { DocumentsTab } from "@/components/admin/tabs/DocumentsTab";
-import { CommentsTab } from "@/components/admin/tabs/CommentsTab";
-import { QuoteTab } from "@/components/admin/tabs/QuoteTab";
-import { PhasesViewToggle } from "@/components/admin/kanban/PhasesViewToggle";
 import { ClientActions } from "@/components/admin/ClientActions";
 import Link from "next/link";
 
@@ -18,10 +11,12 @@ export default async function ClientDetailPage({
   params: Promise<{ id: string }>;
 }) {
   const { id } = await params;
-  const detail = await getClientFullDetail(id);
+  const data = await getClientWithProjects(id);
-  if (!detail) notFound();
+  if (!data) notFound();
 
-  const { client, phases, payments, documents, comments, quoteItems, activeServices } = detail;
+  const { projects, ...client } = data;
+  const activeProjects = projects.filter((p) => !p.archived);
+  const archivedProjects = projects.filter((p) => p.archived);
 
   return (
     <div>
@@ -41,7 +36,13 @@ export default async function ClientDetailPage({
             </span>
           )}
         </div>
-        <div className="flex flex-col items-end gap-2">
+        <div className="flex items-center gap-2 flex-wrap">
+          <Link
+            href={`/admin/projects/new?client_id=${id}`}
+            className="text-sm bg-[#1A463C] text-white px-4 py-2 rounded-lg hover:bg-[#1A463C]/90 transition-colors"
+          >
+            + Nuovo Progetto
+          </Link>
           <a
             href={`/client/${client.token}`}
             target="_blank"
@@ -54,44 +55,56 @@ export default async function ClientDetailPage({
         </div>
       </div>
 
-      <Tabs defaultValue="phases" className="w-full">
+      {activeProjects.length === 0 && (
-        <TabsList className="mb-6">
+        <div className="bg-white rounded-xl border border-[#e5e7eb] p-12 text-center">
-          <TabsTrigger value="phases">Fasi &amp; Task</TabsTrigger>
+          <p className="text-[#71717a] mb-4">Nessun progetto ancora per questo cliente.</p>
-          <TabsTrigger value="payments">Pagamenti</TabsTrigger>
+          <Link
-          <TabsTrigger value="documents">Documenti</TabsTrigger>
+            href={`/admin/projects/new?client_id=${id}`}
-          <TabsTrigger value="comments">Commenti</TabsTrigger>
+            className="text-sm text-[#1A463C] hover:underline"
-          <TabsTrigger value="quote">Preventivo</TabsTrigger>
+          >
-        </TabsList>
+            + Crea il primo progetto
+          </Link>
+        </div>
+      )}
 
-        <TabsContent value="phases">
+      {activeProjects.length > 0 && (
-          <PhasesViewToggle
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            listView={<PhasesTab phases={phases} clientId={client.id} />}
+          {activeProjects.map((project) => (
-            phases={phases}
+            <Link
-            clientId={client.id}
+              key={project.id}
-          />
+              href={`/admin/projects/${project.id}`}
-        </TabsContent>
+              className="bg-white border border-[#e5e7eb] rounded-xl p-5 hover:shadow-md hover:border-[#1A463C]/20 transition-all"
-        <TabsContent value="payments">
+            >
-          <PaymentsTab
+              <h3 className="font-bold text-[#1a1a1a] mb-1">{project.name}</h3>
-            payments={payments}
+              <p className="text-sm text-[#71717a]">
-            acceptedTotal={client.accepted_total ?? "0"}
+                {project.accepted_total && parseFloat(project.accepted_total) > 0
-            clientId={client.id}
+                  ? `€${parseFloat(project.accepted_total).toLocaleString("it-IT", { minimumFractionDigits: 2 })}`
-          />
+                  : "Preventivo non impostato"}
-        </TabsContent>
+              </p>
-        <TabsContent value="documents">
+            </Link>
-          <DocumentsTab documents={documents} clientId={client.id} />
+          ))}
-        </TabsContent>
+        </div>
-        <TabsContent value="comments">
+      )}
-          <CommentsTab comments={comments} phases={phases} clientId={client.id} />
+
-        </TabsContent>
+      {archivedProjects.length > 0 && (
-        <TabsContent value="quote">
+        <div className="mt-8">
-          <QuoteTab
+          <p className="text-xs text-[#71717a] font-semibold uppercase tracking-wider mb-3">
-            clientId={client.id}
+            Archiviati ({archivedProjects.length})
-            items={quoteItems}
+          </p>
-            activeServices={activeServices}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 opacity-60">
-            acceptedTotal={client.accepted_total ?? "0"}
+            {archivedProjects.map((project) => (
-          />
+              <Link
-        </TabsContent>
+                key={project.id}
-      </Tabs>
+                href={`/admin/projects/${project.id}`}
+                className="bg-white border border-[#e5e7eb] rounded-xl p-5 hover:shadow-md transition-all"
+              >
+                <h3 className="font-bold text-[#1a1a1a] mb-1">{project.name}</h3>
+                <p className="text-xs text-[#71717a]">Archiviato</p>
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   );
 }

src/app/admin/page.tsx

@@ -48,7 +48,7 @@ export default async function AdminDashboard({
             <thead className="bg-[#f9f9f9] border-b border-[#e5e7eb]">
               <tr>
                 <th className="text-left py-3 px-4 font-medium text-[#71717a]">Cliente</th>
-                <th className="text-left py-3 px-4 font-medium text-[#71717a]">Totale</th>
+                <th className="text-left py-3 px-4 font-medium text-[#71717a]">LTV</th>
                 <th className="text-left py-3 px-4 font-medium text-[#71717a]">Acconto</th>
                 <th className="text-left py-3 px-4 font-medium text-[#71717a]">Saldo</th>
                 <th className="text-left py-3 px-4 font-medium text-[#71717a]">Timer</th>

src/app/admin/projects/new/page.tsx

@@ -0,0 +1,81 @@
+import { getAllClientsWithPayments } from "@/lib/admin-queries";
+import { createProject } from "@/app/admin/projects/project-actions";
+import { redirect } from "next/navigation";
+
+export const revalidate = 0;
+
+export default async function NewProjectPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ client_id?: string }>;
+}) {
+  const { client_id } = await searchParams;
+  const clients = await getAllClientsWithPayments();
+  const activeClients = clients.filter((c) => !c.archived);
+
+  async function handleCreate(fd: FormData) {
+    "use server";
+    const result = await createProject(fd);
+    redirect(`/admin/projects/${result.projectId}`);
+  }
+
+  return (
+    <div className="max-w-md mx-auto">
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-[#1a1a1a]">Nuovo Progetto</h1>
+        <p className="text-sm text-[#71717a] mt-1">Crea un nuovo progetto per un cliente esistente.</p>
+      </div>
+
+      <div className="bg-white rounded-xl border border-[#e5e7eb] p-6">
+        <form action={handleCreate} className="space-y-4">
+          <div>
+            <label htmlFor="name" className="block text-sm font-medium text-[#1a1a1a] mb-1">
+              Nome Progetto (Brand)
+            </label>
+            <input
+              id="name"
+              name="name"
+              type="text"
+              required
+              placeholder="es. Brand Blu"
+              className="w-full border border-[#e5e7eb] rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#1A463C]/20"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="client_id" className="block text-sm font-medium text-[#1a1a1a] mb-1">
+              Cliente
+            </label>
+            <select
+              id="client_id"
+              name="client_id"
+              required
+              defaultValue={client_id ?? ""}
+              className="w-full border border-[#e5e7eb] rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#1A463C]/20"
+            >
+              <option value="">Seleziona cliente...</option>
+              {activeClients.map((c) => (
+                <option key={c.id} value={c.id}>{c.name}</option>
+              ))}
+            </select>
+          </div>
+
+          <div className="flex gap-3 pt-2">
+            <button
+              type="submit"
+              className="flex-1 bg-[#1A463C] text-white py-2 rounded-lg text-sm font-medium hover:bg-[#1A463C]/90 transition-colors"
+            >
+              Crea Progetto
+            </button>
+            <a
+              href="/admin/projects"
+              className="flex-1 text-center border border-[#e5e7eb] py-2 rounded-lg text-sm text-[#71717a] hover:bg-[#f9f9f9] transition-colors"
+            >
+              Annulla
+            </a>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

src/app/admin/projects/page.tsx

@@ -0,0 +1,49 @@
+import { getAllProjectsWithPayments } from "@/lib/admin-queries";
+import { ProjectRow } from "@/components/admin/ProjectRow";
+import Link from "next/link";
+
+export const revalidate = 0;
+
+export default async function ProjectsPage() {
+  const projects = await getAllProjectsWithPayments();
+
+  return (
+    <div>
+      <div className="mb-6 flex items-center justify-between">
+        <h1 className="text-2xl font-bold text-[#1a1a1a]">Progetti</h1>
+        <Link
+          href="/admin/projects/new"
+          className="text-sm bg-[#1A463C] text-white px-4 py-2 rounded-lg hover:bg-[#1A463C]/90 transition-colors"
+        >
+          + Nuovo Progetto
+        </Link>
+      </div>
+
+      {projects.length === 0 ? (
+        <div className="bg-white rounded-xl border border-[#e5e7eb] p-12 text-center">
+          <p className="text-[#71717a]">Nessun progetto ancora. Creane uno dal dettaglio di un cliente.</p>
+        </div>
+      ) : (
+        <div className="bg-white rounded-xl border border-[#e5e7eb] overflow-hidden">
+          <table className="w-full">
+            <thead className="bg-[#f9f9f9] border-b border-[#e5e7eb]">
+              <tr>
+                <th className="text-left py-3 px-4 text-xs font-semibold text-[#71717a] uppercase tracking-wider">Progetto</th>
+                <th className="text-left py-3 px-4 text-xs font-semibold text-[#71717a] uppercase tracking-wider">Valore</th>
+                <th className="text-left py-3 px-4 text-xs font-semibold text-[#71717a] uppercase tracking-wider">Acconto</th>
+                <th className="text-left py-3 px-4 text-xs font-semibold text-[#71717a] uppercase tracking-wider">Saldo</th>
+                <th className="text-left py-3 px-4 text-xs font-semibold text-[#71717a] uppercase tracking-wider">Timer</th>
+                <th className="text-left py-3 px-4 text-xs font-semibold text-[#71717a] uppercase tracking-wider">€/h</th>
+              </tr>
+            </thead>
+            <tbody>
+              {projects.map((project) => (
+                <ProjectRow key={project.id} project={project} />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}

src/app/admin/projects/project-actions.ts

@@ -0,0 +1,55 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth";
+import { db } from "@/db";
+import { projects, clients } from "@/db/schema";
+import { eq } from "drizzle-orm";
+import { nanoid } from "nanoid";
+
+async function requireAdmin() {
+  const session = await getServerSession(authOptions);
+  if (!session) throw new Error("Non autorizzato");
+}
+
+export async function createProject(fd: FormData): Promise<{ projectId: string }> {
+  await requireAdmin();
+  const name = String(fd.get("name") ?? "").trim();
+  const clientId = String(fd.get("client_id") ?? "").trim();
+
+  if (!name) throw new Error("Nome progetto obbligatorio");
+  if (!clientId) throw new Error("Cliente obbligatorio");
+
+  const clientRows = await db
+    .select({ id: clients.id })
+    .from(clients)
+    .where(eq(clients.id, clientId))
+    .limit(1);
+  if (clientRows.length === 0) throw new Error("Cliente non trovato");
+
+  const id = nanoid();
+  await db.insert(projects).values({ id, client_id: clientId, name });
+
+  revalidatePath("/admin/projects");
+  revalidatePath(`/admin/clients/${clientId}`);
+  return { projectId: id };
+}
+
+export async function archiveProject(projectId: string): Promise<void> {
+  await requireAdmin();
+  await db.update(projects).set({ archived: true }).where(eq(projects.id, projectId));
+  revalidatePath("/admin/projects");
+}
+
+export async function unarchiveProject(projectId: string): Promise<void> {
+  await requireAdmin();
+  await db.update(projects).set({ archived: false }).where(eq(projects.id, projectId));
+  revalidatePath("/admin/projects");
+}
+
+export async function updateProjectAcceptedTotal(projectId: string, acceptedTotal: string): Promise<void> {
+  await requireAdmin();
+  await db.update(projects).set({ accepted_total: acceptedTotal }).where(eq(projects.id, projectId));
+  revalidatePath(`/admin/projects/${projectId}`);
+}

src/components/admin/ClientRow.tsx

@@ -22,7 +22,11 @@ export function ClientRow({ client }: { client: ClientWithPayments }) {
         >
           {client.name}
         </Link>
-        <p className="text-xs text-[#71717a]">{client.brand_name}</p>
+        {client.projectBrands && client.projectBrands.length > 0 ? (
+          <p className="text-xs text-[#71717a] mt-0.5">{client.projectBrands.join(" | ")}</p>
+        ) : (
+          <p className="text-xs text-[#71717a]">{client.brand_name}</p>
+        )}
         {client.archived && (
           <span className="text-[10px] text-[#71717a] bg-[#f4f4f5] px-1.5 py-0.5 rounded-full">
             Archiviato
@@ -30,7 +34,7 @@ export function ClientRow({ client }: { client: ClientWithPayments }) {
         )}
       </td>
       <td className="py-3 px-4 text-sm text-[#1a1a1a]">
-        €{parseFloat(client.accepted_total).toLocaleString("it-IT", { minimumFractionDigits: 2 })}
+        €{parseFloat(client.ltv).toLocaleString("it-IT", { minimumFractionDigits: 2 })}
       </td>
       <td className="py-3 px-4">
         {acconto && (

src/components/admin/NavBar.tsx

@@ -12,12 +12,18 @@ export function NavBar() {
         <Link href="/admin" className="text-sm text-white/70 hover:text-white transition-colors">
           Clienti
         </Link>
+        <Link href="/admin/projects" className="text-sm text-white/70 hover:text-white transition-colors">
+          Progetti
+        </Link>
         <Link href="/admin/analytics" className="text-sm text-white/70 hover:text-white transition-colors">
           Statistiche
         </Link>
         <Link href="/admin/catalog" className="text-sm text-white/70 hover:text-white transition-colors">
           Catalogo
         </Link>
+        <Link href="/admin/impostazioni" className="text-sm text-white/70 hover:text-white transition-colors">
+          Impostazioni
+        </Link>
       </div>
       <Button
         variant="ghost"

src/components/admin/ProjectRow.tsx

@@ -0,0 +1,65 @@
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { TimerCell } from "@/components/admin/TimerCell";
+import type { ProjectWithPayments } from "@/lib/admin-queries";
+
+const statusConfig: Record<string, { label: string; className: string }> = {
+  da_saldare: { label: "Da saldare", className: "bg-red-100 text-red-700 border-transparent" },
+  inviata:    { label: "Inviata",    className: "bg-[#DEF168]/30 text-[#1A463C] border-transparent" },
+  saldato:    { label: "Saldato",    className: "bg-[#1A463C]/10 text-[#1A463C] border-transparent font-medium" },
+};
+
+export function ProjectRow({ project }: { project: ProjectWithPayments }) {
+  const acconto = project.payments.find((p) => p.label.toLowerCase().includes("acconto"));
+  const saldo   = project.payments.find((p) => p.label.toLowerCase().includes("saldo"));
+
+  const hours = project.totalTrackedSeconds / 3600;
+  const eurPerHour = hours > 0 ? parseFloat(project.accepted_total) / hours : null;
+
+  return (
+    <tr className={`border-b border-[#f4f4f5] hover:bg-[#f9f9f9] transition-colors ${project.archived ? "opacity-60" : ""}`}>
+      <td className="py-3 px-4">
+        <Link
+          href={`/admin/projects/${project.id}`}
+          className="font-medium text-[#1a1a1a] hover:text-[#1A463C] hover:underline"
+        >
+          {project.name}
+        </Link>
+        <p className="text-xs text-[#71717a]">{project.client.name}</p>
+        {project.archived && (
+          <span className="text-[10px] text-[#71717a] bg-[#f4f4f5] px-1.5 py-0.5 rounded-full">
+            Archiviato
+          </span>
+        )}
+      </td>
+      <td className="py-3 px-4 text-sm text-[#1a1a1a]">
+        €{parseFloat(project.accepted_total).toLocaleString("it-IT", { minimumFractionDigits: 2 })}
+      </td>
+      <td className="py-3 px-4">
+        {acconto && (
+          <Badge className={statusConfig[acconto.status]?.className ?? "border-transparent bg-[#f4f4f5] text-[#71717a]"}>
+            Acconto: {statusConfig[acconto.status]?.label ?? acconto.status}
+          </Badge>
+        )}
+      </td>
+      <td className="py-3 px-4">
+        {saldo && (
+          <Badge className={statusConfig[saldo.status]?.className ?? "border-transparent bg-[#f4f4f5] text-[#71717a]"}>
+            Saldo: {statusConfig[saldo.status]?.label ?? saldo.status}
+          </Badge>
+        )}
+      </td>
+      <td className="py-3 px-4">
+        <TimerCell
+          clientId={project.id}
+          activeEntryId={project.activeTimerEntryId}
+          activeStartedAt={project.activeTimerStartedAt}
+          totalTrackedSeconds={project.totalTrackedSeconds}
+        />
+      </td>
+      <td className="py-3 px-4 text-sm text-[#71717a] tabular-nums">
+        {eurPerHour !== null ? `€${eurPerHour.toFixed(2)}/h` : "—"}
+      </td>
+    </tr>
+  );
+}

src/lib/admin-queries.ts

@@ -42,6 +42,8 @@ export type ClientWithPayments = {
   activeTimerEntryId: string | null;
   activeTimerStartedAt: Date | null;
   totalTrackedSeconds: number;
+  projectBrands: string[];
+  ltv: string;
 };
 
 export async function getAllClientsWithPayments(
@@ -62,9 +64,16 @@ export async function getAllClientsWithPayments(
 
   // Get all projects for these clients (payments/time_entries now scoped to project)
   const clientProjects = await db
-    .select({ id: projects.id, client_id: projects.client_id })
+    .select({
+      id: projects.id,
+      client_id: projects.client_id,
+      name: projects.name,
+      accepted_total: projects.accepted_total,
+      archived: projects.archived,
+    })
     .from(projects)
-    .where(inArray(projects.client_id, clientIds));
+    .where(inArray(projects.client_id, clientIds))
+    .orderBy(asc(projects.created_at));
 
   const projectIds = clientProjects.map((p) => p.id);
   const projectToClient = new Map(clientProjects.map((p) => [p.id, p.client_id]));
@@ -82,6 +91,8 @@ export async function getAllClientsWithPayments(
       activeTimerEntryId: null,
       activeTimerStartedAt: null,
       totalTrackedSeconds: 0,
+      projectBrands: [],
+      ltv: "0.00",
     }));
   }
 
@@ -133,6 +144,13 @@ export async function getAllClientsWithPayments(
   return visible.map((c) => {
     const active = clientTimerMap.get(c.id);
     const clientPayments = clientPaymentsMap.get(c.id) ?? [];
+    const clientProjectsList = clientProjects.filter((p) => p.client_id === c.id);
+    const projectBrands = clientProjectsList
+      .filter((p) => !p.archived)
+      .map((p) => p.name);
+    const ltv = clientProjectsList
+      .reduce((sum, p) => sum + parseFloat(p.accepted_total ?? "0"), 0)
+      .toFixed(2);
     return {
       id: c.id,
       name: c.name,
@@ -150,6 +168,8 @@ export async function getAllClientsWithPayments(
       activeTimerEntryId: active?.id ?? null,
       activeTimerStartedAt: active?.started_at ?? null,
       totalTrackedSeconds: clientTotalsMap.get(c.id) ?? 0,
+      projectBrands,
+      ltv,
     };
   });
 }