From 6f85ae285bfa9aa2a89beb3ba567d52f3d537c2d Mon Sep 17 00:00:00 2001
From: Marco Pedone <m.pedone98@gmail.com>
Date: Tue, 5 May 2026 16:50:00 +0200
Subject: [PATCH] feat: update labels and refactor link components in
 ServizioLinkCard and RinnovoLinkCard

Co-authored-by: Copilot <copilot@github.com>
---
 .../area-riservata/userViewHeader.tsx         |   2 +-
 .../src/components/servizio/servizio.tsx      | 105 ++++++++++--------
 2 files changed, 57 insertions(+), 50 deletions(-)

diff --git a/apps/infoalloggi/src/components/area-riservata/userViewHeader.tsx b/apps/infoalloggi/src/components/area-riservata/userViewHeader.tsx
index 4b012bf..7f4e523 100644
--- a/apps/infoalloggi/src/components/area-riservata/userViewHeader.tsx
+++ b/apps/infoalloggi/src/components/area-riservata/userViewHeader.tsx
@@ -68,7 +68,7 @@ export const UserViewHeader = () => {
 			icon: UserCog,
 		},
 		{
-			label: "Ricerca",
+			label: "Servizi",
 			slug: "ricerca",
 			icon: Search,
 		},
diff --git a/apps/infoalloggi/src/components/servizio/servizio.tsx b/apps/infoalloggi/src/components/servizio/servizio.tsx
index 39bf1fc..2ed3126 100644
--- a/apps/infoalloggi/src/components/servizio/servizio.tsx
+++ b/apps/infoalloggi/src/components/servizio/servizio.tsx
@@ -10,7 +10,6 @@ import {
 	ClockFading,
 	ExternalLink,
 	type LucideIcon,
-	MousePointerClick,
 	PackageCheck,
 	SearchX,
 	Timer,
@@ -115,34 +114,33 @@ const RinnovoLinkCard = ({
 	userId: UsersId;
 }) => {
 	return (
-		<Link
-			className="group"
-			href={
-				isAdmin
-					? `/area-riservata/admin/user-view/rinnovo/${userId}/${data.id}`
-					: `/area-riservata/rinnovo/${data.id}`
-			}
+		<Card
+			className={cn("transition-shadow hover:bg-muted/15 hover:shadow-md")}
 			key={data.id}
 		>
-			<Card
-				className={cn("transition-shadow hover:bg-muted/15 hover:shadow-md")}
-			>
-				<CardHeader>
-					<CardTitle className="text-xl group-hover:underline">
-						Rinnovo {data.codice}
-					</CardTitle>
-					<CardDescription className="">
-						Data rinnovo: {data.decorrenza.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 rounded-md text-muted-foreground group-hover:text-foreground">
+			<CardHeader className="gap-1">
+				<CardTitle className="text-xl group-hover:underline">
+					Rinnovo {data.codice}
+				</CardTitle>
+				<CardDescription className="">
+					Data rinnovo: {data.decorrenza.toLocaleDateString("it-IT")}
+				</CardDescription>
+			</CardHeader>
+			<CardContent className="flex flex-col flex-wrap gap-4 sm:flex-row sm:justify-between">
+				<Link
+					href={
+						isAdmin
+							? `/area-riservata/admin/user-view/rinnovo/${userId}/${data.id}`
+							: `/area-riservata/rinnovo/${data.id}`
+					}
+				>
+					<Button size="lg">
 						<span>Vai al rinnovo</span>
 						<ArrowRight />
-					</div>
-				</CardContent>
-			</Card>
-		</Link>
+					</Button>
+				</Link>
+			</CardContent>
+		</Card>
 	);
 };
 
@@ -183,24 +181,16 @@ const ServizioLinkCard = ({
 	}
 
 	return (
-		<Link
-			className="group"
-			href={
-				isAdmin
-					? `/area-riservata/admin/user-view/servizio/${userId}/${servizio.servizio_id}`
-					: `/area-riservata/servizio/${servizio.servizio_id}`
-			}
-			key={servizio.servizio_id}
-		>
+		<div key={servizio.servizio_id}>
 			{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">
+				<Card className="relative border-yellow-500 bg-yellow-500 text-white 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>
 
-					<CardHeader>
-						<CardTitle className="text-xl group-hover:underline">
+					<CardHeader className="gap-1">
+						<CardTitle className="text-xl">
 							{t.servizio.servizio_titolo} {servizio.tipologia}
 						</CardTitle>
 						<CardDescription className="text-white">
@@ -214,10 +204,18 @@ const ServizioLinkCard = ({
 
 							<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>
+						<Link
+							href={
+								isAdmin
+									? `/area-riservata/admin/user-view/servizio/${userId}/${servizio.servizio_id}`
+									: `/area-riservata/servizio/${servizio.servizio_id}`
+							}
+						>
+							<Button size="lg">
+								<span>{t.servizio.vai_al_servizio}</span>
+								<ArrowRight />
+							</Button>
+						</Link>
 					</CardContent>
 				</Card>
 			) : (
@@ -227,11 +225,11 @@ const ServizioLinkCard = ({
 						status === "interrotto" && "border-red-500",
 						status === "scaduto" && "border-gray-500",
 						status === "completato" && "border-blue-500",
-						"transition-shadow hover:bg-muted/15 hover:shadow-md",
+						"transition-shadow",
 					)}
 				>
-					<CardHeader>
-						<CardTitle className="text-xl group-hover:underline">
+					<CardHeader className="gap-1">
+						<CardTitle className="text-xl">
 							{t.servizio.servizio_titolo} {servizio.tipologia}
 						</CardTitle>
 						<CardDescription className="">
@@ -253,14 +251,23 @@ const ServizioLinkCard = ({
 
 							<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>
+
+						<Link
+							href={
+								isAdmin
+									? `/area-riservata/admin/user-view/servizio/${userId}/${servizio.servizio_id}`
+									: `/area-riservata/servizio/${servizio.servizio_id}`
+							}
+						>
+							<Button size="lg">
+								<span>{t.servizio.vai_al_servizio}</span>
+								<ArrowRight />
+							</Button>
+						</Link>
 					</CardContent>
 				</Card>
 			)}
-		</Link>
+		</div>
 	);
 };