From f94312dcaa7c3f970bebba037bf641d877cbc3b4 Mon Sep 17 00:00:00 2001
From: Marco Pedone <m.pedone98@gmail.com>
Date: Mon, 17 Nov 2025 18:13:13 +0100
Subject: [PATCH] refactor: enhance EditUser component layout with Card and
 CardContent for improved styling

---
 .../admin/user-view/edit-user/[userId].tsx    | 169 +++++++++---------
 1 file changed, 87 insertions(+), 82 deletions(-)

diff --git a/apps/infoalloggi/src/pages/area-riservata/admin/user-view/edit-user/[userId].tsx b/apps/infoalloggi/src/pages/area-riservata/admin/user-view/edit-user/[userId].tsx
index d762f69..1ff7f77 100644
--- a/apps/infoalloggi/src/pages/area-riservata/admin/user-view/edit-user/[userId].tsx
+++ b/apps/infoalloggi/src/pages/area-riservata/admin/user-view/edit-user/[userId].tsx
@@ -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 ? (