feat: update layout and styling in UserDashboard and ServizioPage components

apps/infoalloggi/src/components/area-riservata/dashboard.tsx

@@ -66,7 +66,7 @@ export const UserDashboard = ({ userId }: { userId: UsersId }) => {
 	if (isLoading) return <LoadingPage />;
 
 	return (
-		<div className="mt-2 flex w-full flex-1 flex-col items-start justify-center gap-4 overflow-auto p-2 md:gap-6">
+		<div className="flex w-full flex-1 flex-col items-start justify-center gap-4 overflow-auto p-2 md:gap-6">
 			<h3 className="font-bold text-2xl">Le tue ricerche</h3>
 
 			<div className="flex w-full flex-1 grow flex-col space-y-5">

apps/infoalloggi/src/components/servizio/servizio.tsx

@@ -5,6 +5,7 @@ import {
 	CircleCheck,
 	CircleCheckBig,
 	CircleMinus,
+	Clock,
 	ClockFading,
 	type LucideIcon,
 	PackageCheck,
@@ -58,9 +59,9 @@ export const ServizioList = ({
 			</div>
 		);
 	}
-	if (servizi.length === 1 && servizi[0]) {
+	// if (servizi.length === 1 && servizi[0]) {
-		return <Servizio isAdmin={isAdmin} servizio={servizi[0]} userId={userId} />;
+	// 	return <Servizio isAdmin={isAdmin} servizio={servizi[0]} userId={userId} />;
-	}
+	// }
 	return (
 		<div className="flex flex-col gap-4">
 			{servizi.map((servizio) => (
@@ -198,11 +199,18 @@ const Content = () => {
 	return (
 		<div className="w-full space-y-4">
 			<div className="flex flex-col flex-wrap items-start justify-between gap-4 sm:flex-row">
-				<div>
+				<div className="flex flex-col gap-1">
 					<h3 className="font-semibold text-xl">
 						{t.servizio.servizio_titolo} {servizio.tipologia}
 					</h3>
 
+					<div className="flex items-center gap-2 text-muted-foreground text-sm">
+						<Clock className="size-5" />
+						<span>
+							Creato il: {servizio.created_at.toLocaleDateString("it-IT")}
+						</span>
+					</div>
+
 					<div className="flex flex-wrap items-center gap-2 text-muted-foreground text-sm">
 						<div className="flex items-center gap-2">
 							<CalendarClock className="size-5" />

apps/infoalloggi/src/components/servizio/servizio_actions.tsx

@@ -118,14 +118,15 @@ export const ServizioPacksInfos = () => {
 		<Collapsible className="flex flex-col gap-2">
 			<CollapsibleTrigger asChild>
 				<Button
-					className="h-fit w-fit flex-wrap items-center py-1"
+					className="h-fit w-full flex-wrap items-center justify-start py-1 sm:w-fit sm:justify-center"
+					size="sm"
 					variant="outline"
 				>
 					<Euro className="size-5" />
 
 					<h3 className="font-semibold text-lg">{t.servizio.prezzi.title}</h3>
 
-					<ChevronDown className="size-4" />
+					<ChevronDown className="ml-auto size-4 sm:ml-0" />
 				</Button>
 			</CollapsibleTrigger>
 			<CollapsibleContent className="flex flex-col gap-2">

apps/infoalloggi/src/i18n/it.ts

@@ -696,8 +696,8 @@ export const it: LangDict = {
 		areaRiservataUserNav: [
 			{
 				href: "/area-riservata/dashboard",
-				icon: "dashboard",
+				icon: "search",
-				title: "Dashboard",
+				title: "Servizi di ricerca",
 			},
 			{
 				href: "/area-riservata/comunicazioni",
@@ -760,8 +760,8 @@ export const it: LangDict = {
 		loginMenuUser: [
 			{
 				href: "/area-riservata/dashboard",
-				icon: { className: "", icon: "dashboard" },
+				icon: { className: "", icon: "search" },
-				title: "Dashboard",
+				title: "Servizi di ricerca",
 			},
 			{
 				href: "/area-riservata/comunicazioni",

apps/infoalloggi/src/pages/area-riservata/servizio/[servizioId].tsx

@@ -35,17 +35,17 @@ const ServizioPage: NextPageWithLayout<ServizioPageProps> = ({
 		return <Status500 />;
 	}
 	return (
-		<div className="mt-2 flex w-full flex-1 flex-col items-start justify-center gap-4 overflow-auto p-2 md:gap-6">
+		<div className="flex w-full flex-1 flex-col items-start justify-center gap-3 overflow-auto p-2 md:gap-6">
-			<div className="flex w-full flex-col gap-4">
+			<div className="flex w-full flex-col gap-2">
 				<div className="flex w-full items-center justify-between">
-					<h3 className="font-semibold text-2xl">
+					<h3 className="font-semibold text-xl">
 						{t.servizio.dettaglio_servizio}
 					</h3>
 
 					<Link href="/area-riservata/dashboard">
 						<Button size="sm" variant="outline">
 							<ArrowRight className="size-4" />
-							{t.servizio.torna_alla_dashboard}
+							<span>lista servizi</span>
 						</Button>
 					</Link>
 				</div>