From c6b462a54d23a13a6e484e4da7bf9ab29de737dd Mon Sep 17 00:00:00 2001
From: Marco Pedone <m.pedone98@gmail.com>
Date: Thu, 19 Mar 2026 12:14:11 +0100
Subject: [PATCH] feat: enhance RinnovoLinkCard and ServizioLinkCard components
 with improved styling and status handling

---
 .../src/components/servizio/servizio.tsx      | 114 +++++++++++-------
 1 file changed, 68 insertions(+), 46 deletions(-)

diff --git a/apps/infoalloggi/src/components/servizio/servizio.tsx b/apps/infoalloggi/src/components/servizio/servizio.tsx
index b9b70fb..c397963 100644
--- a/apps/infoalloggi/src/components/servizio/servizio.tsx
+++ b/apps/infoalloggi/src/components/servizio/servizio.tsx
@@ -124,7 +124,7 @@ const RinnovoLinkCard = ({
 				className={cn("transition-shadow hover:bg-muted/15 hover:shadow-md")}
 			>
 				<CardHeader>
-					<CardTitle className="group-hover:underline">
+					<CardTitle className="text-xl group-hover:underline">
 						Rinnovo {data.codice}
 					</CardTitle>
 					<CardDescription className="">
@@ -185,52 +185,74 @@ const ServizioLinkCard = ({
 			}
 			key={servizio.servizio_id}
 		>
-			<Card
-				className={cn(
-					status === "attivo" && "border-green-500",
-					status === "in_attesa" &&
-						"border-yellow-500 bg-yellow-500 text-white hover:bg-yellow-500/90 dark:bg-yellow-900 dark:text-white dark:hover:bg-yellow-900/90",
-					status === "interrotto" && "border-red-500",
-					status === "scaduto" && "border-gray-500",
-					status === "completato" && "border-blue-500",
-					"transition-shadow hover:bg-muted/15 hover:shadow-md",
-				)}
-			>
-				<CardHeader>
-					<CardTitle className="group-hover:underline">
-						{t.servizio.servizio_titolo} {servizio.tipologia}
-					</CardTitle>
-					<CardDescription className="">
-						{t.servizio.servizio_creato_il}{" "}
-						{servizio.created_at.toLocaleDateString("it-IT")}
-					</CardDescription>
-				</CardHeader>
-				<CardContent className="flex flex-col flex-wrap gap-4 sm:flex-row sm:justify-between">
-					<div
-						className={cn(
-							"flex items-center gap-2",
-							status === "attivo" && "text-green-500",
-							status === "in_attesa" && "",
-							status === "interrotto" && "text-red-500",
-							status === "scaduto" && "text-gray-500",
-							status === "completato" && "text-blue-500",
-						)}
-					>
-						<StatusIcon className="size-5" />
+			{status === "in_attesa" ? (
+				<Card className="relative border-yellow-500 bg-yellow-500 text-white hover:bg-yellow-500/90 dark:bg-yellow-900 dark:hover:bg-yellow-900/90">
+					<span className="absolute top-5 right-5 -mt-1 -mr-1 flex size-7 items-center justify-center">
+						<span className="absolute inline-flex size-6 h-full w-full animate-ping rounded-full bg-white opacity-75" />
+						<span className="relative inline-flex size-5 rounded-full bg-white"></span>
+					</span>
 
-						<span>{t.servizio.status[status]}</span>
-					</div>
-					<div
-						className={cn(
-							"flex items-center gap-2 rounded-md text-muted-foreground group-hover:text-foreground",
-							status === "in_attesa" && "animate-bounce text-white",
-						)}
-					>
-						<span>{t.servizio.vai_al_servizio}</span>
-						<MousePointerClick />
-					</div>
-				</CardContent>
-			</Card>
+					<CardHeader>
+						<CardTitle className="text-xl group-hover:underline">
+							{t.servizio.servizio_titolo} {servizio.tipologia}
+						</CardTitle>
+						<CardDescription className="text-white">
+							{t.servizio.servizio_creato_il}{" "}
+							{servizio.created_at.toLocaleDateString("it-IT")}
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="flex flex-col flex-wrap gap-4 sm:flex-row sm:justify-between">
+						<div className="flex items-center gap-2">
+							<StatusIcon className="size-5" />
+
+							<span>{t.servizio.status[status]}</span>
+						</div>
+						<div className="flex items-center gap-2 rounded-md font-semibold text-white underline underline-offset-2">
+							<span>{t.servizio.vai_al_servizio}</span>
+							<MousePointerClick />
+						</div>
+					</CardContent>
+				</Card>
+			) : (
+				<Card
+					className={cn(
+						status === "attivo" && "border-green-500",
+						status === "interrotto" && "border-red-500",
+						status === "scaduto" && "border-gray-500",
+						status === "completato" && "border-blue-500",
+						"transition-shadow hover:bg-muted/15 hover:shadow-md",
+					)}
+				>
+					<CardHeader>
+						<CardTitle className="text-xl group-hover:underline">
+							{t.servizio.servizio_titolo} {servizio.tipologia}
+						</CardTitle>
+						<CardDescription className="">
+							{t.servizio.servizio_creato_il}{" "}
+							{servizio.created_at.toLocaleDateString("it-IT")}
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="flex flex-col flex-wrap gap-4 sm:flex-row sm:justify-between">
+						<div
+							className={cn(
+								"flex items-center gap-2",
+								status === "attivo" && "text-green-500",
+								status === "interrotto" && "text-red-500",
+								status === "scaduto" && "text-gray-500",
+								status === "completato" && "text-blue-500",
+							)}
+						>
+							<StatusIcon className="size-5" />
+
+							<span>{t.servizio.status[status]}</span>
+						</div>
+						<div className="flex items-center gap-2 rounded-md font-semibold text-muted-foreground group-hover:text-foreground">
+							<span>{t.servizio.vai_al_servizio}</span>
+							<MousePointerClick />
+						</div>
+					</CardContent>
+				</Card>
+			)}
 		</Link>
 	);
 };