From 3db798a9058c20fb4fd34fe4688efe4b6c6504c0 Mon Sep 17 00:00:00 2001
From: Mouad Lahlal <lahlalmouad@gmail.com>
Date: Wed, 22 Oct 2025 14:50:03 +0200
Subject: [PATCH] refactor: /client/[client]

---
 src/app/client/[client]/page.tsx | 231 +------------------------------
 src/components/client-card.tsx   |  96 +++++++++++++
 src/components/device-card.tsx   | 168 ++++++++++++++++++++++
 3 files changed, 268 insertions(+), 227 deletions(-)
 create mode 100644 src/components/client-card.tsx
 create mode 100644 src/components/device-card.tsx

diff --git a/src/app/client/[client]/page.tsx b/src/app/client/[client]/page.tsx
index 5d3c307..d01bd4b 100644
--- a/src/app/client/[client]/page.tsx
+++ b/src/app/client/[client]/page.tsx
@@ -1,33 +1,9 @@
 "use client";
 
 import { AppSidebar } from "@/components/app-sidebar";
-import { Button } from "@/components/ui/button";
-import { Edit, Plus } from "lucide-react";
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { cn } from "@/lib/utils";
-import { Checkbox } from "@/components/ui/checkbox";
+import ClientCard from "@/components/client-card";
+import DeviceCard from "@/components/device-card";
 import { useSearchParams, useParams } from "next/navigation";
 
 export default function Page() {
@@ -123,210 +99,11 @@ export default function Page() {
     >
       <AppSidebar />
       <SidebarInset>
-        {/*
-          <header className="bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4">
-            <SidebarTrigger className="-ml-1" />
-            <Separator
-              orientation="vertical"
-              className="mr-2 data-[orientation=vertical]:h-4"
-            />
-            <Breadcrumb>
-              <BreadcrumbList>
-                <BreadcrumbItem className="hidden md:block">
-                  <BreadcrumbLink href="#">All Inboxes</BreadcrumbLink>
-                </BreadcrumbItem>
-                <BreadcrumbSeparator className="hidden md:block" />
-                <BreadcrumbItem>
-                  <BreadcrumbPage>Inbox</BreadcrumbPage>
-                </BreadcrumbItem>
-              </BreadcrumbList>
-              </Breadcrumb>
-          </header>
-        */}
 
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
-            <Card className="@container/card">
-              <CardHeader>
-                <CardTitle className="text-xl font-semibold tabular-nums @[250px]/card:text-2xl">
-                  {client}
-                </CardTitle>
-                <CardAction className="flex items-center gap-4">
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button variant="outline">
-                        <Edit className="size-4" />
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <p>Modifica dettagli</p>
-                    </TooltipContent>
-                  </Tooltip>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button variant="outline">
-                        <Plus className="size-4" />
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <p>Aggiungi registratore</p>
-                    </TooltipContent>
-                  </Tooltip>
-                </CardAction>
-              </CardHeader>
-              <CardFooter className="flex items-start gap-20 text-md">
-                <div className="flex-col items-start gap-1.5 text-md">
-                  <div className="text-muted-foreground">Ragione Sociale</div>
-                  <div className="line-clamp-1 flex gap-2 font-medium">
-                    Acconciature Uomo
-                  </div>
-                </div>
-                <div className="flex-col items-start gap-1.5 text-md">
-                  <div className="text-muted-foreground">Partita IVA</div>
-                  <div className="line-clamp-1 flex gap-2 font-medium">
-                    13407520172
-                  </div>
-                </div>
-                <div className="flex-col items-start gap-1.5 text-md">
-                  <div className="text-muted-foreground">
-                    Numero di Telefono
-                  </div>
-                  <div className="line-clamp-1 flex gap-2 font-medium">
-                    0301547854
-                  </div>
-                </div>
-                <div className="flex-col items-start gap-1.5 text-md">
-                  <div className="text-muted-foreground">Sede</div>
-                  <div className="line-clamp-1 flex gap-2 font-medium">
-                    <a
-                      className="text-blue-700 italic underline"
-                      target="blank"
-                      href="https://maps.app.goo.gl/9uNbw2a62ZCCjkQc7"
-                    >
-                      Via Umberto I 60/T, Flero (BS)
-                    </a>
-                  </div>
-                </div>
-                <div className="flex-col items-start gap-1.5 text-md">
-                  <div className="text-muted-foreground">Contratto</div>
-                  <div className="line-clamp-1 flex gap-2 font-medium">
-                    <a
-                      className="text-blue-700 italic underline"
-                      target="blank"
-                      href="https://google.com"
-                    >
-                      LINK
-                    </a>
-                  </div>
-                </div>
-              </CardFooter>
-            </Card>
-
-            <Card className="@container/card">
-              <CardHeader>
-                <CardTitle className="text-xl font-semibold tabular-nums @[250px]/card:text-2xl">
-                  FORM 100
-                </CardTitle>
-                <CardAction className="flex items-center gap-4">
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button variant="outline">
-                        <Edit className="size-4" />
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <p>Modifica dettagli</p>
-                    </TooltipContent>
-                  </Tooltip>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button variant="outline">
-                        <Plus className="size-4" />
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <p>Aggiungi intervento</p>
-                    </TooltipContent>
-                  </Tooltip>
-                </CardAction>
-              </CardHeader>
-              <CardContent className="flex flex-col gap-5 text-md">
-                <div className="flex items-start gap-20 text-md">
-                  <div className="flex-col items-start gap-1.5 text-md">
-                    <div className="text-muted-foreground">Seriale</div>
-                    <div className="line-clamp-1 flex gap-2 font-medium">
-                      80E100548745
-                    </div>
-                  </div>
-                  <div className="flex-col items-start gap-1.5 text-md">
-                    <div className="text-muted-foreground">Data acquisto</div>
-                    <div className="line-clamp-1 flex gap-2 font-medium">
-                      15/10/2019
-                    </div>
-                  </div>
-                  <div className="flex-col items-start gap-1.5 text-md">
-                    <div className="text-muted-foreground">Ultima verifica</div>
-                    <div className="line-clamp-1 flex gap-2 font-medium">
-                      15/10/2025
-                    </div>
-                  </div>
-                  <div className="flex-col items-start gap-1.5 text-md">
-                    <div className="text-muted-foreground">
-                      Prossima verifica
-                    </div>
-                    <div className="line-clamp-1 flex gap-2 font-medium">
-                      15/10/2026
-                    </div>
-                  </div>
-                </div>
-                <div className="flex flex-col">
-                  <Table className={cn("caption-top")}>
-                    <TableCaption className="text-lg text-start">
-                      Lista interventi
-                    </TableCaption>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead className="w-[100px]">Data</TableHead>
-                        <TableHead>Lavoro</TableHead>
-                        <TableHead className="text-right">Fattura</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {clienti
-                        .find(
-                          (cliente) =>
-                            cliente.name == searchParams.get("cliente"),
-                        )
-                        ?.registratori[0].interventi.map((intervento) => (
-                          <TableRow key={intervento.id}>
-                            <TableCell className="font-medium">
-                              {intervento.data}
-                            </TableCell>
-                            <TableCell>{intervento.lavoro}</TableCell>
-                            <TableCell className="text-right">
-                              <Checkbox checked={intervento.fattura} />
-                            </TableCell>
-                          </TableRow>
-                        ))}
-                    </TableBody>
-                  </Table>
-                </div>
-              </CardContent>
-              <CardFooter className="flex gap-5">
-                <Button
-                  variant="destructive"
-                  className="hover:bg-red-800 transition-colors"
-                >
-                  DISMETTI
-                </Button>
-                <Button
-                  variant="destructive"
-                  className="hover:bg-red-800 transition-colors"
-                >
-                  ROTTAMA
-                </Button>
-              </CardFooter>
-            </Card>
+            <ClientCard client={client} />
+            <DeviceCard clienti={clienti} />
           </div>
         </div>
       </SidebarInset>
diff --git a/src/components/client-card.tsx b/src/components/client-card.tsx
new file mode 100644
index 0000000..6bc560c
--- /dev/null
+++ b/src/components/client-card.tsx
@@ -0,0 +1,96 @@
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Button } from "@/components/ui/button";
+import { Edit, Plus } from "lucide-react";
+
+const ClientCard = ({client}: {client: any}) => {
+    return (
+        <Card className="@container/card">
+            <CardHeader>
+                <CardTitle className="text-xl font-semibold tabular-nums @[250px]/card:text-2xl">
+                    {client}
+                </CardTitle>
+                <CardAction className="flex items-center gap-4">
+                    <Tooltip>
+                    <TooltipTrigger asChild>
+                        <Button variant="outline">
+                        <Edit className="size-4" />
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                        <p>Modifica dettagli</p>
+                    </TooltipContent>
+                    </Tooltip>
+                    <Tooltip>
+                    <TooltipTrigger asChild>
+                        <Button variant="outline">
+                        <Plus className="size-4" />
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                        <p>Aggiungi registratore</p>
+                    </TooltipContent>
+                    </Tooltip>
+                </CardAction>
+            </CardHeader>
+            <CardContent className="flex items-start gap-20 text-md">
+                <div className="flex-col items-start gap-1.5 text-md">
+                    <div className="text-muted-foreground">Ragione Sociale</div>
+                    <div className="line-clamp-1 flex gap-2 font-medium">
+                    Acconciature Uomo
+                    </div>
+                </div>
+                <div className="flex-col items-start gap-1.5 text-md">
+                    <div className="text-muted-foreground">Partita IVA</div>
+                    <div className="line-clamp-1 flex gap-2 font-medium">
+                    13407520172
+                    </div>
+                </div>
+                <div className="flex-col items-start gap-1.5 text-md">
+                    <div className="text-muted-foreground">
+                    Numero di Telefono
+                    </div>
+                    <div className="line-clamp-1 flex gap-2 font-medium">
+                    0301547854
+                    </div>
+                </div>
+                <div className="flex-col items-start gap-1.5 text-md">
+                    <div className="text-muted-foreground">Sede</div>
+                    <div className="line-clamp-1 flex gap-2 font-medium">
+                    <a
+                        className="text-blue-700 italic underline"
+                        target="blank"
+                        href="https://maps.app.goo.gl/9uNbw2a62ZCCjkQc7"
+                    >
+                        Via Umberto I 60/T, Flero (BS)
+                    </a>
+                    </div>
+                </div>
+                <div className="flex-col items-start gap-1.5 text-md">
+                    <div className="text-muted-foreground">Contratto</div>
+                    <div className="line-clamp-1 flex gap-2 font-medium">
+                    <a
+                        className="text-blue-700 italic underline"
+                        target="blank"
+                        href="https://google.com"
+                    >
+                        LINK
+                    </a>
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+    )
+}
+
+export default ClientCard;
\ No newline at end of file
diff --git a/src/components/device-card.tsx b/src/components/device-card.tsx
new file mode 100644
index 0000000..cf0d1cb
--- /dev/null
+++ b/src/components/device-card.tsx
@@ -0,0 +1,168 @@
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { Edit, Plus } from "lucide-react";
+import { Checkbox } from "@/components/ui/checkbox";
+import { cn } from "@/lib/utils";
+import { useParams } from "next/navigation";
+
+type Invervento = {
+    id: string,
+    data: string,
+    lavoro: string,
+    fattura: boolean
+}
+
+type Registratore = {
+    seriale: string,
+    acquisto: string,
+    ultima_verifica: string,
+    prossima_verifica: string,
+    interventi: Array<Invervento>
+}
+
+type Cliente = {
+    name: string,
+    email: string,
+    ragione_sociale: string,
+    p_iva: string,
+    telefono: string,
+    sede: string,
+    sede_url: string,
+    contratto: string,
+    registratori: Array<Registratore>
+}
+
+const DeviceCard = ({clienti}: {clienti:Array<Cliente>}) => {
+    const { client } = useParams();
+
+    return (
+        <Card className="@container/card">
+              <CardHeader>
+                <CardTitle className="text-xl font-semibold tabular-nums @[250px]/card:text-2xl">
+                  FORM 100
+                </CardTitle>
+                <CardAction className="flex items-center gap-4">
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button variant="outline">
+                        <Edit className="size-4" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Modifica dettagli</p>
+                    </TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button variant="outline">
+                        <Plus className="size-4" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Aggiungi intervento</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </CardAction>
+              </CardHeader>
+              <CardContent className="flex flex-col gap-5 text-md">
+                <div className="flex items-start gap-20 text-md">
+                  <div className="flex-col items-start gap-1.5 text-md">
+                    <div className="text-muted-foreground">Seriale</div>
+                    <div className="line-clamp-1 flex gap-2 font-medium">
+                      80E100548745
+                    </div>
+                  </div>
+                  <div className="flex-col items-start gap-1.5 text-md">
+                    <div className="text-muted-foreground">Data acquisto</div>
+                    <div className="line-clamp-1 flex gap-2 font-medium">
+                      15/10/2019
+                    </div>
+                  </div>
+                  <div className="flex-col items-start gap-1.5 text-md">
+                    <div className="text-muted-foreground">Ultima verifica</div>
+                    <div className="line-clamp-1 flex gap-2 font-medium">
+                      15/10/2025
+                    </div>
+                  </div>
+                  <div className="flex-col items-start gap-1.5 text-md">
+                    <div className="text-muted-foreground">
+                      Prossima verifica
+                    </div>
+                    <div className="line-clamp-1 flex gap-2 font-medium">
+                      15/10/2026
+                    </div>
+                  </div>
+                </div>
+                <div className="flex flex-col">
+                  <Table className={cn("caption-top")}>
+                    <TableCaption className="text-lg text-start">
+                      Lista interventi
+                    </TableCaption>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead className="w-[100px]">Data</TableHead>
+                        <TableHead>Lavoro</TableHead>
+                        <TableHead className="text-right">Fattura</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {clienti
+                        .find(
+                          (cliente) =>
+                            cliente.name == decodeURIComponent(client?.toString() || ""),
+                        )
+                        ?.registratori[0].interventi.map((intervento) => (
+                          <TableRow key={intervento.id}>
+                            <TableCell className="font-medium">
+                              {intervento.data}
+                            </TableCell>
+                            <TableCell>{intervento.lavoro}</TableCell>
+                            <TableCell className="text-right">
+                              <Checkbox checked={intervento.fattura} />
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              </CardContent>
+              <CardFooter className="flex gap-5">
+                <Button
+                  variant="destructive"
+                  className="hover:bg-red-800 transition-colors"
+                >
+                  DISMETTI
+                </Button>
+                <Button
+                  variant="destructive"
+                  className="hover:bg-red-800 transition-colors"
+                >
+                  ROTTAMA
+                </Button>
+              </CardFooter>
+            </Card>
+    )
+}
+
+export default DeviceCard;
\ No newline at end of file