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