feat: pagina Offerte redesign Quiet Luxury — grid card tokenizzata + badge categoria

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

design-reference/DESIGN-SYSTEM.md

@@ -220,6 +220,25 @@ righe `py-4 px-6` / `divide-y divide-border` / `hover:bg-muted/40`.
   (singolare/plurale gestiti).
 - Le righe archiviate restano `opacity-60` con pill "Archiviato".
 
+### Offerte (lista) notes
+
+`/admin/offers` migrata a "Quiet Luxury" (replica `design-reference/pagina-offerte`).
+Griglia responsive di card `bg-card rounded-xl border-border p-6 shadow-card`
+(`hover:shadow-card-hover`), `md:grid-cols-2 lg:grid-cols-3`.
+
+- **Header**: `PageHeader` "Offerte" + sottotitolo, azione "+ Nuova Offerta"
+  (`Button` primario) che espande un form inline (`Input` nome + "Crea").
+- **Filtri**: pill categoria rettangolari (`rounded-lg px-4 py-2`) — attiva
+  `bg-primary text-primary-foreground`, inattiva `border-border bg-card
+  text-muted-foreground hover:bg-muted`. "Tutti" + `categoryOptions` dinamiche.
+  A destra checkbox "Mostra offerte archiviate".
+- **Card**: nome interno + descrizione muted + badge categoria colorato per tipo
+  (Retainer→blue, Entry→purple, Signature→amber, tutti con variante dark) via
+  helper `categoryBadgeClass`. Le archiviate sono `opacity-60` con pill "Archiviata".
+- **Tabella tier**: `border-border rounded-lg`, header uppercase muted
+  (Tier · Servizi · Pubblico), righe `font-mono` `divide-y divide-border`; solo i
+  tier con `servicesTotal > 0` o `public_price` valorizzato; "Pubblico" assente → `—`.
+
 ### Client Portal restyle notes
 
 The `/client/[token]` portal was migrated to the same "Quiet Luxury" tokens

src/components/admin/offers/OfferListClient.tsx

@@ -4,16 +4,28 @@ import { useState, useMemo, useTransition } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { createOfferMacro } from "@/app/admin/offers/actions";
-import type { OfferListCard, OfferListTier } from "@/lib/offer-queries";
+import type { OfferListCard } from "@/lib/offer-queries";
 import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import { PageHeader } from "@/components/admin/PageHeader";
+import { cn } from "@/lib/utils";
 
 function formatEuro(value: number): string {
   return `€${value.toLocaleString("it-IT", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
 }
 
+/** Category → pill colors, light/dark. Falls back to a neutral badge. */
+function categoryBadgeClass(category: string): string {
+  const key = category.toLowerCase();
+  if (key.includes("retainer"))
+    return "bg-blue-50 text-blue-600 border-blue-100 dark:bg-blue-950/40 dark:text-blue-300 dark:border-blue-900";
+  if (key.includes("entry"))
+    return "bg-purple-50 text-purple-600 border-purple-100 dark:bg-purple-950/40 dark:text-purple-300 dark:border-purple-900";
+  if (key.includes("signature"))
+    return "bg-amber-50 text-amber-700 border-amber-100 dark:bg-amber-950/40 dark:text-amber-300 dark:border-amber-900";
+  return "bg-muted text-muted-foreground border-border";
+}
+
 export function OfferListClient({
   cards,
   categoryOptions,
@@ -46,18 +58,14 @@ export function OfferListClient({
   }
 
   const createCta = (
-    <div className="flex flex-col items-end gap-2">
+    <div className="flex flex-col items-end gap-2 self-start sm:self-auto">
-      <Button
+      <Button type="button" onClick={() => setShowCreateForm((v) => !v)}>
-        type="button"
-        className="bg-[#1A463C] text-white hover:bg-[#163a31]"
-        onClick={() => setShowCreateForm((v) => !v)}
-      >
         + Nuova Offerta
       </Button>
       {showCreateForm && (
         <form
           action={handleCreateSubmit}
-          className="flex items-center gap-2 bg-white border border-[#e5e7eb] rounded-lg p-2"
+          className="flex items-center gap-2 rounded-lg border border-border bg-card p-2 shadow-card"
         >
           <Input
             name="internal_name"
@@ -67,12 +75,7 @@ export function OfferListClient({
             onChange={(e) => setNewOfferName(e.target.value)}
             className="h-9 w-48"
           />
-          <Button
+          <Button type="submit" size="sm" disabled={isPending}>
-            type="submit"
-            size="sm"
-            disabled={isPending}
-            className="bg-[#1A463C] text-white hover:bg-[#163a31]"
-          >
             Crea
           </Button>
         </form>
@@ -81,20 +84,25 @@ export function OfferListClient({
   );
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-8">
-      <PageHeader title="Offerte" action={createCta} />
+      <PageHeader
+        title="Offerte"
+        subtitle="Configura e gestisci i pacchetti di offerta commerciali"
+        action={createCta}
+      />
 
       {/* Filter row */}
-      <div className="flex flex-wrap items-center justify-between gap-4">
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-        <div className="flex flex-wrap items-center gap-2">
+        <div className="flex flex-wrap gap-2">
           <button
             type="button"
             onClick={() => setActiveCategory(null)}
-            className={`rounded-full border px-3 py-1 text-sm transition-colors ${
+            className={cn(
+              "rounded-lg px-4 py-2 text-xs font-medium transition-all duration-200",
               activeCategory === null
-                ? "border-[#1A463C] text-[#1A463C]"
+                ? "bg-primary text-primary-foreground"
-                : "border-[#e5e7eb] text-[#71717a]"
+                : "border border-border bg-card text-muted-foreground hover:bg-muted hover:text-foreground"
-            }`}
+            )}
           >
             Tutti
           </button>
@@ -103,76 +111,110 @@ export function OfferListClient({
               key={category}
               type="button"
               onClick={() => setActiveCategory(category)}
-              className={`rounded-full border px-3 py-1 text-sm transition-colors ${
+              className={cn(
+                "rounded-lg px-4 py-2 text-xs font-medium transition-all duration-200",
                 activeCategory === category
-                  ? "border-[#1A463C] text-[#1A463C]"
+                  ? "bg-primary text-primary-foreground"
-                  : "border-[#e5e7eb] text-[#71717a]"
+                  : "border border-border bg-card text-muted-foreground hover:bg-muted hover:text-foreground"
-              }`}
+              )}
             >
               {category}
             </button>
           ))}
         </div>
 
-        <label className="flex items-center gap-2 text-sm text-[#71717a]">
+        <label className="group flex cursor-pointer items-center gap-2.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground">
           <input
             type="checkbox"
             checked={showArchived}
             onChange={(e) => setShowArchived(e.target.checked)}
-            className="h-4 w-4 rounded border-[#e5e7eb]"
+            className="h-4 w-4 rounded border-border text-primary focus:ring-primary/25"
           />
-          Mostra offerte archiviate
+          <span className="select-none">Mostra offerte archiviate</span>
         </label>
       </div>
 
       {/* Card grid / empty state */}
       {filteredCards.length === 0 ? (
-        <div className="flex flex-col items-center justify-center gap-2 rounded-lg border border-[#e5e7eb] bg-white py-16 text-center">
+        <div className="flex flex-col items-center justify-center gap-2 rounded-xl border border-border bg-card py-16 text-center shadow-card">
-          <h3 className="text-[16px] font-semibold text-[#1a1a1a]">Nessuna offerta</h3>
+          <h3 className="text-base font-semibold text-foreground">Nessuna offerta</h3>
-          <p className="text-sm text-[#71717a]">Inizia creando la tua prima offerta</p>
+          <p className="text-sm text-muted-foreground">Inizia creando la tua prima offerta</p>
           <div className="mt-2">{createCta}</div>
         </div>
       ) : (
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-          {filteredCards.map((card) => (
+          {filteredCards.map((card) => {
-            <Link
+            const visibleTiers = card.tiers.filter(
-              key={card.id}
+              (t) => Number(t.servicesTotal) > 0 || t.public_price !== null
-              href={`/admin/offers/${card.id}/edit`}
+            );
-              className="cursor-pointer rounded-lg border border-[#e5e7eb] bg-white p-4 transition-shadow hover:shadow-[0_4px_12px_rgba(0,0,0,0.08)]"
+            return (
-            >
+              <Link
-              <h3 className="text-[16px] font-semibold text-[#1a1a1a]">{card.internal_name}</h3>
+                key={card.id}
-              {card.description && (
+                href={`/admin/offers/${card.id}/edit`}
-                <p className="mt-1 line-clamp-2 text-sm text-[#71717a]">{card.description}</p>
+                className={cn(
-              )}
+                  "flex flex-col rounded-xl border border-border bg-card p-6 shadow-card transition-all duration-200 hover:shadow-card-hover",
-              <div className="mt-3 flex items-center gap-2">
+                  card.is_archived && "opacity-60"
-                {card.category && <Badge variant="secondary">{card.category}</Badge>}
-                {card.is_archived && (
-                  <span className="text-xs font-semibold text-[#dc2626]">Archiviata</span>
                 )}
-              </div>
+              >
-              {card.tiers.filter(
+                {/* Header */}
-                (t) => Number(t.servicesTotal) > 0 || t.public_price !== null
+                <div className="mb-4 flex items-start justify-between gap-4">
-              ).length > 0 && (
+                  <div className="min-w-0">
-                <div className="mt-3 pt-3 border-t border-[#e5e7eb] space-y-1">
+                    <h3 className="text-sm font-semibold text-foreground">{card.internal_name}</h3>
-                  {card.tiers
+                    {card.description && (
-                    .filter((t) => Number(t.servicesTotal) > 0 || t.public_price !== null)
+                      <p className="mt-0.5 line-clamp-2 text-[11px] text-muted-foreground">
-                    .map((t) => (
+                        {card.description}
-                      <div key={t.tier_letter} className="flex items-baseline gap-2 text-xs">
+                      </p>
-                        <span className="font-medium text-[#1a1a1a] w-16 shrink-0 truncate">
+                    )}
-                          {t.public_name || `Tier ${t.tier_letter}`}
+                    {card.is_archived && (
-                        </span>
+                      <span className="mt-1 inline-block rounded-full bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
-                        <span className="tabular-nums text-[#71717a]">
+                        Archiviata
-                          Servizi: {formatEuro(Number(t.servicesTotal))}
+                      </span>
-                        </span>
+                    )}
-                        <span className="tabular-nums text-[#71717a]">
+                  </div>
-                          Pubblico: {t.public_price !== null ? formatEuro(Number(t.public_price)) : "—"}
+                  {card.category && (
-                        </span>
+                    <span
-                      </div>
+                      className={cn(
-                    ))}
+                        "shrink-0 rounded border px-2 py-1 text-[9px] font-semibold uppercase tracking-wider",
+                        categoryBadgeClass(card.category)
+                      )}
+                    >
+                      {card.category}
+                    </span>
+                  )}
                 </div>
-              )}
+
-            </Link>
+                {/* Tier table */}
-          ))}
+                {visibleTiers.length > 0 && (
+                  <div className="my-2 overflow-hidden rounded-lg border border-border">
+                    <table className="w-full text-[11px]">
+                      <thead>
+                        <tr className="border-b border-border bg-muted uppercase text-muted-foreground">
+                          <th className="px-3 py-2 text-left font-semibold">Tier</th>
+                          <th className="px-3 py-2 text-right font-semibold">Servizi</th>
+                          <th className="px-3 py-2 text-right font-semibold">Pubblico</th>
+                        </tr>
+                      </thead>
+                      <tbody className="divide-y divide-border font-mono text-muted-foreground">
+                        {visibleTiers.map((t) => (
+                          <tr key={t.tier_letter ?? t.public_name}>
+                            <td className="px-3 py-2 font-semibold text-foreground">
+                              {t.tier_letter || t.public_name}
+                            </td>
+                            <td className="px-3 py-2 text-right tabular-nums">
+                              {formatEuro(Number(t.servicesTotal))}
+                            </td>
+                            <td className="px-3 py-2 text-right tabular-nums text-muted-foreground/70">
+                              {t.public_price !== null ? formatEuro(Number(t.public_price)) : "—"}
+                            </td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                )}
+              </Link>
+            );
+          })}
         </div>
       )}
     </div>