refactor: enhance EditUser component layout with Card and CardContent for improved styling

This commit is contained in:
Marco Pedone 2025-11-17 18:13:13 +01:00
parent c6f7a51c50
commit f94312dcaa

View file

@ -27,6 +27,7 @@ import {
AlertDialogTrigger,
} from "~/components/ui/alert-dialog";
import { Button } from "~/components/ui/button";
import { Card, CardContent } from "~/components/ui/card";
import { Separator } from "~/components/ui/separator";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
import { OverridePasswordForm } from "~/forms/FormOverridePassword";
@ -124,94 +125,98 @@ const EditUser: NextPageWithLayout<EditUserProps> = ({
</div>
</div>
<TabsContent
className="space-y-6 rounded-md bg-card p-4 px-2"
value="account"
>
<ProfileFormAccount
cognome={userData.cognome}
email={userData.email}
id={userData.id}
isAdmin={userData.isAdmin}
nome={userData.nome}
telefono={userData.telefono}
/>
<Separator />
<div className="flex flex-wrap items-end gap-2">
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant={userData.isBlocked ? "success" : "orange"}>
{userData.isBlocked ? (
<>
<Unlock className="size-4" />
<span>Sblocca accesso al sito</span>
</>
) : (
<>
<Lock className="size-4" />
<span>Blocca accesso al sito</span>
</>
)}
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Sei sicuro?</AlertDialogTitle>
<AlertDialogDescription>
Vuoi procedere a bloccare/sbloccare l&apos;utente?
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Annulla</AlertDialogCancel>
<AlertDialogAction
onClick={() => ban_mutate({ id: userData.id })}
>
Continua
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="destructive">
<Trash2 className="size-4" /> Elimina utente permanentemente
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Sei sicuro?</AlertDialogTitle>
<AlertDialogDescription>
Questa azione non può essere annullata.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Annulla</AlertDialogCancel>
<AlertDialogAction
onClick={() => delete_mutate({ id: userData.id })}
>
Continua
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
<TabsContent value="account">
<Card>
<CardContent className="space-y-6">
<ProfileFormAccount
cognome={userData.cognome}
email={userData.email}
id={userData.id}
isAdmin={userData.isAdmin}
nome={userData.nome}
telefono={userData.telefono}
/>
<Separator />
<div className="flex flex-wrap items-end gap-2">
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant={userData.isBlocked ? "success" : "orange"}>
{userData.isBlocked ? (
<>
<Unlock className="size-4" />
<span>Sblocca accesso al sito</span>
</>
) : (
<>
<Lock className="size-4" />
<span>Blocca accesso al sito</span>
</>
)}
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Sei sicuro?</AlertDialogTitle>
<AlertDialogDescription>
Vuoi procedere a bloccare/sbloccare l&apos;utente?
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Annulla</AlertDialogCancel>
<AlertDialogAction
onClick={() => ban_mutate({ id: userData.id })}
>
Continua
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="destructive">
<Trash2 className="size-4" /> Elimina utente
permanentemente
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Sei sicuro?</AlertDialogTitle>
<AlertDialogDescription>
Questa azione non può essere annullata.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Annulla</AlertDialogCancel>
<AlertDialogAction
onClick={() => delete_mutate({ id: userData.id })}
>
Continua
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent
className="h-full space-y-6 rounded-md bg-card p-4 px-2"
value="anagrafica"
>
<TabsContent value="anagrafica">
<CatastoProvider>
<ProfileFormAnagrafica userData={userData} />
<Card>
<CardContent>
<ProfileFormAnagrafica userData={userData} />
</CardContent>
</Card>
</CatastoProvider>
</TabsContent>
<TabsContent className="h-full space-y-6" value="documenti">
<TabsContent value="documenti">
<DocumentiPersonali userData={userData} />
</TabsContent>
<TabsContent
className="h-full space-y-6 rounded-md bg-card p-4 px-2"
value="password"
>
<OverridePasswordForm id={userData.id} />
<TabsContent value="password">
<Card>
<CardContent>
<OverridePasswordForm id={userData.id} />
</CardContent>
</Card>
</TabsContent>
<TabsContent className="space-y-6" value="fatture">
{userData.codice_fiscale ? (