refactor: enhance EditUser component layout with Card and CardContent for improved styling
This commit is contained in:
parent
c6f7a51c50
commit
f94312dcaa
1 changed files with 87 additions and 82 deletions
|
|
@ -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'utente?
|
||||||
Vuoi procedere a bloccare/sbloccare l'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 ? (
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue