refactor: /client/[client]
This commit is contained in:
parent
9a1edc7838
commit
3db798a905
3 changed files with 268 additions and 227 deletions
|
|
@ -1,33 +1,9 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { AppSidebar } from "@/components/app-sidebar";
|
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 { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
|
||||||
import {
|
import ClientCard from "@/components/client-card";
|
||||||
Tooltip,
|
import DeviceCard from "@/components/device-card";
|
||||||
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";
|
import { useSearchParams, useParams } from "next/navigation";
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
|
|
@ -123,210 +99,11 @@ export default function Page() {
|
||||||
>
|
>
|
||||||
<AppSidebar />
|
<AppSidebar />
|
||||||
<SidebarInset>
|
<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="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">
|
<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">
|
<ClientCard client={client} />
|
||||||
<CardHeader>
|
<DeviceCard clienti={clienti} />
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
</SidebarInset>
|
</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