feat: implement UserDashboardFaq component and add translation for "Dashboard"

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

@@ -93,7 +93,6 @@ export const AdminDashboard = () => {
 };
 
 export const UserDashboard = ({ userId }: { userId: UsersId }) => {
-	const { t } = useTranslation();
 	const { data, isLoading } = api.servizio.getAllServizioAnnunci.useQuery({
 		userId,
 	});
@@ -108,21 +107,30 @@ export const UserDashboard = ({ userId }: { userId: UsersId }) => {
 				<ServizioList isAdmin={false} servizi={data || []} userId={userId} />
 			</div>
 			<div className="mx-auto">
+				<UserDashboardFaq />
+			</div>
+		</div>
+	);
+};
+
+export const UserDashboardFaq = () => {
+	const { t, locale } = useTranslation();
+	const title =
+		locale === "it" ? "Domande frequenti" : "Frequently Asked Questions";
+	return (
 		<Credenza>
 			<CredenzaTrigger asChild>
 				<Button variant="secondary">
-							<span>Domande frequenti</span>
+					<span>{title}</span>
 					<CircleHelp />
 				</Button>
 			</CredenzaTrigger>
 			<CredenzaContent className="max-h-[90vh] w-full md:max-w-3xl">
 				<CredenzaHeader>
 					<CredenzaTitle className="text-center font-semibold text-2xl">
-								Domande frequenti
+						{title}
 					</CredenzaTitle>
-							<CredenzaDescription className="sr-only">
+					<CredenzaDescription className="sr-only">{title}</CredenzaDescription>
-								Domande frequenti
-							</CredenzaDescription>
 				</CredenzaHeader>
 				<CredenzaBody className="max-h-[80vh] overflow-auto pb-5">
 					<AccordionComp
@@ -132,7 +140,5 @@ export const UserDashboard = ({ userId }: { userId: UsersId }) => {
 				</CredenzaBody>
 			</CredenzaContent>
 		</Credenza>
-			</div>
-		</div>
 	);
 };

apps/infoalloggi/src/i18n/en.ts

@@ -1306,6 +1306,7 @@ The Stable Rent service, ideal for those with demonstrable work references and f
 			scaduto: "Expired",
 			completato: "Completed",
 		},
+		torna_alla_dashboard: "Dashboard",
 		dettaglio_servizio: "Service Details",
 		nessun_servizio: "No service currently available",
 		servizio_titolo: "Rental Service",
@@ -1328,17 +1329,19 @@ The Stable Rent service, ideal for those with demonstrable work references and f
 			title: "Service Prices:",
 			sub: "(based on search parameters)",
 			consulenza: "Consultation",
-			consulenza_desc: "The consultation price varies based on the contract type.",
+			consulenza_desc:
+				"The consultation price varies based on the contract type.",
 			gotoprezzi: "See contract prices",
 		},
-		parametri:{
+		parametri: {
 			title: "Search Parameters",
 			btn: "Parameters",
 		},
 		interruzione: {
 			btn: "Interruption",
 			title: "Are you sure you want to request the interruption?",
-			description: "This action is irreversible and will deactivate the activated services. By confirming the action, you withdraw from the service according to the contractual conditions. You will be notified via email of the confirmation of the interruption.",
+			description:
+				"This action is irreversible and will deactivate the activated services. By confirming the action, you withdraw from the service according to the contractual conditions. You will be notified via email of the confirmation of the interruption.",
 		},
 		conferma: {
 			accetto: "I accept the terms and conditions.",

apps/infoalloggi/src/i18n/it.ts

@@ -1305,6 +1305,7 @@ export const it: LangDict = {
 			scaduto: "Scaduto",
 			completato: "Completato",
 		},
+		torna_alla_dashboard: "Dashboard",
 		dettaglio_servizio: "Dettaglio Servizio",
 		nessun_servizio: "Nessun servizio attualmente inserito",
 		servizio_titolo: "Servizio Affitto",
@@ -1327,17 +1328,19 @@ export const it: LangDict = {
 			title: "Prezzi del servizio:",
 			sub: "(basati sui parametri di ricerca)",
 			consulenza: "Consulenza",
-			consulenza_desc: "Il prezzo della consulenza varia in base alla tipologia contrattuale.",
+			consulenza_desc:
+				"Il prezzo della consulenza varia in base alla tipologia contrattuale.",
 			gotoprezzi: "Vedi prezzi contratti",
 		},
-		parametri:{
+		parametri: {
 			title: "Parametri di ricerca",
 			btn: "Parametri",
 		},
 		interruzione: {
 			btn: "Interruzione",
 			title: "Sei sicuro di voler richiedere l'interruzione?",
-			description: "Questa azione è irreversibile e comporta la disattivazione dei servizi attivati. Confermando l'azione recedi dal servizio secondo le condizioni contrattuali. Verrai notificato via email della conferma dell'avvenuta interruzione.",
+			description:
+				"Questa azione è irreversibile e comporta la disattivazione dei servizi attivati. Confermando l'azione recedi dal servizio secondo le condizioni contrattuali. Verrai notificato via email della conferma dell'avvenuta interruzione.",
 		},
 		conferma: {
 			accetto: "Accetto i termini e condizioni.",

apps/infoalloggi/src/i18n/locales.ts

@@ -776,6 +776,7 @@ export type LangDict = {
 			scaduto: string;
 			completato: string;
 		};
+		torna_alla_dashboard: string;
 		dettaglio_servizio: string;
 		nessun_servizio: string;
 		servizio_titolo: string;

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

@@ -1,8 +1,13 @@
+import { ArrowRight } from "lucide-react";
 import type { GetServerSideProps } from "next";
+import Link from "next/link";
+import { UserDashboardFaq } from "~/components/area-riservata/dashboard";
 import { AreaRiservataLayout } from "~/components/Layout";
 import { LoadingPage } from "~/components/loading";
 import { Servizio } from "~/components/servizio/servizio";
 import { Status500 } from "~/components/status-page";
+import { Button } from "~/components/ui/button";
+import { Separator } from "~/components/ui/separator";
 import type { NextPageWithLayout } from "~/pages/_app";
 import { useTranslation } from "~/providers/I18nProvider";
 import { useEnforcedSession } from "~/providers/SessionProvider";
@@ -30,10 +35,23 @@ const ServizioPage: NextPageWithLayout<ServizioPageProps> = ({
 		return <Status500 />;
 	}
 	return (
-		<div className="mx-auto w-full max-w-8xl grow space-y-4 p-4">
+		<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 justify-between">
+			<div className="flex w-full flex-col gap-4">
-				<h3 className="font-bold text-2xl">{t.servizio.dettaglio_servizio}</h3>
+				<div className="flex w-full items-center justify-between">
+					<h3 className="font-semibold text-2xl">
+						{t.servizio.dettaglio_servizio}
+					</h3>
+
+					<Link href="/area-riservata/dashboard">
+						<Button size="sm" variant="outline">
+							<ArrowRight className="size-4" />
+							{t.servizio.torna_alla_dashboard}
+						</Button>
+					</Link>
 				</div>
+				<Separator />
+			</div>
+			<div className="flex w-full flex-1 grow flex-col space-y-5">
 				<Servizio
 					isAdmin={false}
 					key={data.servizio_id}
@@ -41,6 +59,10 @@ const ServizioPage: NextPageWithLayout<ServizioPageProps> = ({
 					userId={user.id}
 				/>
 			</div>
+			<div className="mx-auto">
+				<UserDashboardFaq />
+			</div>
+		</div>
 	);
 };
 export default ServizioPage;