ente_nazionale_frontend/components/associations/associate-table.tsx
2026-08-17 11:34:06 +03:00

103 lines
3.3 KiB
TypeScript

import { Pencil, Trash2 } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ConfirmDialog } from "@/components/ui/confirm-dialog";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import type { Associate } from "@/lib/models";
const ROLE_LABELS: Record<Associate["role"], string> = {
PRESIDENT: "Presidente",
VICE_PRESIDENT: "Vicepresidente",
SECRETARY: "Segretario",
ASSOCIATE: "Socio",
};
export function AssociateTable({
associates,
onEdit,
onDelete,
}: {
associates: Associate[];
onEdit?: (index: number) => void;
onDelete?: (index: number) => Promise<void> | void;
}) {
const editable = Boolean(onEdit || onDelete);
if (associates.length === 0) {
return (
<p className="py-8 text-center text-sm text-muted-foreground">
Nessun socio registrato
</p>
);
}
return (
<Table>
<TableHeader>
<TableRow>
<TableHead>Nome</TableHead>
<TableHead>Ruolo</TableHead>
<TableHead className="hidden md:table-cell">Codice fiscale</TableHead>
<TableHead className="hidden lg:table-cell">Indirizzo</TableHead>
<TableHead>Cittadinanza</TableHead>
{editable && <TableHead className="w-20" />}
</TableRow>
</TableHeader>
<TableBody>
{associates.map((associate, index) => (
<TableRow key={index}>
<TableCell className="font-medium">
{associate.name} {associate.surname}
</TableCell>
<TableCell className="text-muted-foreground">
{ROLE_LABELS[associate.role] ?? associate.role}
</TableCell>
<TableCell className="hidden text-muted-foreground md:table-cell">
{associate.fiscalCode || "—"}
</TableCell>
<TableCell className="hidden text-muted-foreground lg:table-cell">
{associate.address || "—"}
</TableCell>
<TableCell>
<Badge variant={associate.italianCitizen ? "secondary" : "outline"}>
{associate.italianCitizen ? "Italiana" : "Straniera"}
</Badge>
</TableCell>
{editable && (
<TableCell>
<div className="flex items-center gap-1">
{onEdit && (
<Button variant="ghost" size="icon-sm" onClick={() => onEdit(index)}>
<Pencil className="size-4" />
</Button>
)}
{onDelete && (
<ConfirmDialog
trigger={
<Button variant="ghost" size="icon-sm">
<Trash2 className="size-4 text-destructive" />
</Button>
}
title="Rimuovere il socio?"
description={`${associate.name} ${associate.surname} verrà rimosso dall'associazione.`}
confirmLabel="Rimuovi"
onConfirm={() => onDelete(index)}
/>
)}
</div>
</TableCell>
)}
</TableRow>
))}
</TableBody>
</Table>
);
}