refactor: /client/[client] #1
3 changed files with 268 additions and 227 deletions
|
|
@ -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>
|
||||
|
|
|
|||
96
src/components/client-card.tsx
Normal file
96
src/components/client-card.tsx
Normal file
|
|
@ -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;
|
||||
168
src/components/device-card.tsx
Normal file
168
src/components/device-card.tsx
Normal file
|
|
@ -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;
|
||||
Loading…
Reference in a new issue