76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
import { Pencil, Trash2 } from "lucide-react";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { ConfirmDialog } from "@/components/ui/confirm-dialog";
|
|
import type { User } from "@/lib/models";
|
|
|
|
const ROLE_LABELS: Record<User["role"], string> = {
|
|
ADMIN: "Amministratore",
|
|
MANAGER: "Gestore",
|
|
CLIENT: "Associazione",
|
|
};
|
|
|
|
export function UserAccountsCard({
|
|
users,
|
|
actions,
|
|
onEdit,
|
|
onDelete,
|
|
}: {
|
|
users: User[];
|
|
actions?: React.ReactNode;
|
|
onEdit?: (index: number) => void;
|
|
onDelete?: (index: number) => Promise<void> | void;
|
|
}) {
|
|
const editable = Boolean(onEdit || onDelete);
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
|
<CardTitle>Account di accesso ({users.length})</CardTitle>
|
|
{actions}
|
|
</CardHeader>
|
|
<CardContent>
|
|
{users.length === 0 ? (
|
|
<p className="py-4 text-center text-sm text-muted-foreground">
|
|
Nessun account configurato
|
|
</p>
|
|
) : (
|
|
<ul className="divide-y">
|
|
{users.map((user, index) => (
|
|
<li key={user.id ?? index} className="flex items-center justify-between py-3">
|
|
<div className="flex items-center gap-2.5">
|
|
<span className="text-sm font-medium">{user.email}</span>
|
|
<Badge variant="secondary">{ROLE_LABELS[user.role] ?? user.role}</Badge>
|
|
</div>
|
|
{editable && (
|
|
<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 l'account?"
|
|
description={`${user.email} non potrà più accedere al portale.`}
|
|
confirmLabel="Rimuovi"
|
|
onConfirm={() => onDelete(index)}
|
|
/>
|
|
)}
|
|
</div>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|