335 lines
12 KiB
TypeScript
335 lines
12 KiB
TypeScript
"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 { useSearchParams, useParams } from "next/navigation";
|
|
|
|
export default function Page() {
|
|
const searchParams = useSearchParams();
|
|
const { client } = useParams();
|
|
|
|
const clienti = [
|
|
{
|
|
name: "Savoldi Ettore",
|
|
email: "savoldi.ettore@gmail.com",
|
|
ragione_sociale: "Acconciature Uomo",
|
|
p_iva: "13407520172",
|
|
telefono: "0301547854",
|
|
sede: "Via Umberto I 60/T, Flero (BS)",
|
|
sede_url: "https://maps.app.goo.gl/9uNbw2a62ZCCjkQc7",
|
|
contratto: "https://google.com",
|
|
registratori: [
|
|
{
|
|
seriale: "80E100548745",
|
|
acquisto: "15/10/2019",
|
|
ultima_verifica: "15/10/2025",
|
|
prossima_verifica: "15/10/2026",
|
|
interventi: [
|
|
{
|
|
id: "0001",
|
|
data: "15/10/2025",
|
|
lavoro: "VERIFICA FISCALE - AGGIORNAMENTO FIRMWARE",
|
|
fattura: true,
|
|
},
|
|
{
|
|
id: "0002",
|
|
data: "28/05/2025",
|
|
lavoro: "SOSTITUZIONE DGFE",
|
|
fattura: false,
|
|
},
|
|
{
|
|
id: "0003",
|
|
data: "08/10/2024",
|
|
lavoro: "VERIFICA FISCALE",
|
|
fattura: true,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "Forno Tagliaferri",
|
|
email: "info@tagliaferri.it",
|
|
ragione_sociale: "Forno Tagliaferri",
|
|
p_iva: "12901475639",
|
|
telefono: "0309183573",
|
|
sede: "Via Corso dei Martiri 11, Brescia (BS)",
|
|
sede_url: "https://maps.app.goo.gl/9uNbw2a62ZCCjkQc7",
|
|
contratto: "https://google.com",
|
|
registratori: [
|
|
{
|
|
seriale: "80E1002587545",
|
|
acquisto: "24/02/2020",
|
|
ultima_verifica: "24/02/2025",
|
|
prossima_verifica: "24/02/2026",
|
|
interventi: [
|
|
{
|
|
id: "0004",
|
|
data: "24/02/2025",
|
|
lavoro: "VERIFICA FISCALE",
|
|
fattura: true,
|
|
},
|
|
{
|
|
id: "0005",
|
|
data: "06/04/2025",
|
|
lavoro: "SOSTITUZIONE DGFE",
|
|
fattura: false,
|
|
},
|
|
{
|
|
id: "0006",
|
|
data: "24/02/2025",
|
|
lavoro: "VERIFICA FISCALE - AGGIORNAMENTO FIRMWARE",
|
|
fattura: true,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<SidebarProvider
|
|
style={
|
|
{
|
|
"--sidebar-width": "350px",
|
|
} as React.CSSProperties
|
|
}
|
|
>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</SidebarInset>
|
|
</SidebarProvider>
|
|
);
|
|
}
|