From 7763aac01c3e1ed606bae20d524445b071d83f89 Mon Sep 17 00:00:00 2001
From: Marco Pedone <m.pedone98@gmail.com>
Date: Wed, 7 Jan 2026 16:18:21 +0100
Subject: [PATCH] feat: add ServizioPacksInfos component for displaying pricing
 information

---
 .../components/servizio/admin_conferma.tsx    | 136 +++++++++---------
 .../components/servizio/servizio_actions.tsx  |   8 +-
 2 files changed, 71 insertions(+), 73 deletions(-)

diff --git a/apps/infoalloggi/src/components/servizio/admin_conferma.tsx b/apps/infoalloggi/src/components/servizio/admin_conferma.tsx
index 20c76de..50171f4 100644
--- a/apps/infoalloggi/src/components/servizio/admin_conferma.tsx
+++ b/apps/infoalloggi/src/components/servizio/admin_conferma.tsx
@@ -53,6 +53,7 @@ import { Label } from "../ui/label";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { Switch } from "../ui/switch";
 import { UploadModal } from "../upload_modal";
+import { ServizioPacksInfos } from "./servizio_actions";
 import { DocCombo, DocInfo } from "./shared";
 
 export const AdminLavoraConferma = () => {
@@ -489,14 +490,16 @@ const MotivazioneSection = () => {
 							<span className="text-red-500 italic">Non inserita</span>
 						)}
 					</p>
-					<p>
-						<span className="font-semibold">Documento caricato: </span>
-						{servizio.doc_motivazione_ref ? (
-							<FileLink userStorageId={servizio.doc_motivazione_ref} />
-						) : (
-							<span className="text-red-500 italic">Non caricato</span>
-						)}
-					</p>
+					{!servizio.skipDocMotivazione && (
+						<p>
+							<span className="font-semibold">Documento caricato: </span>
+							{servizio.doc_motivazione_ref ? (
+								<FileLink userStorageId={servizio.doc_motivazione_ref} />
+							) : (
+								<span className="text-red-500 italic">Non caricato</span>
+							)}
+						</p>
+					)}
 				</div>
 			</CardContent>
 		</Card>
@@ -559,8 +562,8 @@ const TransitorioSection = () => {
 			"errore: testo non trovato in descrizione");
 
 	return (
-		<div className="flex flex-col gap-2">
-			<div className="max-w-sm">
+		<div className="flex flex-col items-start gap-4 rounded-md border border-border bg-muted p-2 sm:flex-row">
+			<div className="w-full">
 				<Label className="text-base" htmlFor="permanenza">
 					Permanenza (da parametri servizio):
 				</Label>
@@ -584,10 +587,10 @@ const TransitorioSection = () => {
 					placeholder="Seleziona..."
 				/>
 			</div>
-			<p>
-				<span className="font-semibold">Permanenza in annuncio: </span>
-				{permanenzaAnnuncio}
-			</p>
+			<div className="w-full space-y-2">
+				<p className="font-medium">Permanenza in annuncio:</p>
+				<p>{permanenzaAnnuncio}</p>
+			</div>
 		</div>
 	);
 };
@@ -624,8 +627,8 @@ const StabileSection = () => {
 	);
 
 	return (
-		<div className="flex flex-col gap-2">
-			<div className="flex max-w-sm flex-col gap-2">
+		<div className="flex flex-col gap-2 rounded-md border border-border bg-muted p-2 sm:flex-row">
+			<div className="flex w-full flex-col gap-2">
 				<span className="font-semibold">Budget (da preferenze servizio):</span>
 				<NumberInput
 					allowNegative={false}
@@ -640,10 +643,10 @@ const StabileSection = () => {
 					suffix=" €"
 				/>
 			</div>
-			<p>
-				<span className="font-semibold">Prezzo in descrizione: </span>
-				{formatCurrency(data.prezzo / 100)}
-			</p>
+			<div className="w-full space-y-2">
+				<p className="font-medium">Prezzo in descrizione:</p>
+				<p>{formatCurrency(data.prezzo / 100)}</p>
+			</div>
 		</div>
 	);
 };
@@ -711,38 +714,41 @@ const GeneralSection = () => {
 
 	return (
 		<>
-			<div className="flex flex-col gap-2">
-				<span className="font-semibold">Persone:</span>
-				<div className="flex w-full gap-4">
-					<div className="flex w-1/2 flex-col gap-2">
-						<Label htmlFor="n_adulti">{t.parametri.nadulti_label}</Label>
-						<Counter
-							name="n_adulti"
-							onlyPositive
-							setValue={(v) => handleAdultiChange(Number(v))}
-							value={servizio.n_adulti || 0}
-						/>
-					</div>
+			<div className="flex flex-col gap-x-4 gap-y-2 rounded-md border border-border bg-muted p-2 sm:flex-row">
+				<div className="w-full space-y-2">
+					<span className="font-semibold">Persone:</span>
+					<div className="flex w-full gap-4">
+						<div className="flex w-1/2 flex-col gap-2">
+							<Label htmlFor="n_adulti">{t.parametri.nadulti_label}</Label>
+							<Counter
+								name="n_adulti"
+								onlyPositive
+								setValue={(v) => handleAdultiChange(Number(v))}
+								value={servizio.n_adulti || 0}
+							/>
+						</div>
 
-					<div className="flex w-1/2 flex-col gap-2">
-						<Label htmlFor="n_minori">{t.parametri.nminori_label}</Label>
-						<Counter
-							name="n_minori"
-							onlyPositive
-							setValue={(v) => handleMinoriChange(Number(v))}
-							value={servizio.n_minori || 0}
-						/>
+						<div className="flex w-1/2 flex-col gap-2">
+							<Label htmlFor="n_minori">{t.parametri.nminori_label}</Label>
+							<Counter
+								name="n_minori"
+								onlyPositive
+								setValue={(v) => handleMinoriChange(Number(v))}
+								value={servizio.n_minori || 0}
+							/>
+						</div>
 					</div>
 				</div>
-				<p>
-					<span className="font-semibold">Persone in annuncio: </span>
-					{personeAnnuncio}
-				</p>
+				<div className="w-full space-y-2">
+					<p className="font-medium">Persone in annuncio:</p>
+					<p>{personeAnnuncio}</p>
+				</div>
 			</div>
-			<div className="flex flex-col gap-2">
-				<span className="font-semibold">Entro mese:</span>
-				<div className="max-w-sm">
-					<Label htmlFor="select-mesi">{t.parametri.dalmese_label}</Label>
+			<div className="flex flex-col gap-x-4 gap-y-2 rounded-md border border-border bg-muted p-2 sm:flex-row">
+				<div className="w-full">
+					<Label className="text-base" htmlFor="select-mesi">
+						Entro mese (da preferenze servizio):
+					</Label>
 					<MultiSelect
 						defaultValue={
 							servizio.entromese !== null
@@ -763,11 +769,10 @@ const GeneralSection = () => {
 						placeholder="Seleziona..."
 					/>
 				</div>
-
-				<p>
-					<span className="font-semibold">Disponibilità in annuncio: </span>
-					{dispAnnuncio}
-				</p>
+				<div className="w-full space-y-2">
+					<p className="font-medium">Disponibilità in annuncio:</p>
+					<p>{dispAnnuncio}</p>
+				</div>
 			</div>
 		</>
 	);
@@ -776,7 +781,6 @@ const GeneralSection = () => {
 const SendConferma = () => {
 	const { servizio } = useServizio();
 	const { data } = useServizioAnnuncio();
-	const [check, setCheck] = useState(data.hasConfermaAdmin);
 	const utils = api.useUtils();
 	const { mutate: handleUpdate } =
 		api.servizio.adminUpdateConfermaStatus.useMutation({
@@ -812,14 +816,19 @@ const SendConferma = () => {
 						<StabileSection />
 					)}
 					<GeneralSection />
+					<ServizioPacksInfos title="Prezzi in base a parametri:" />
 				</div>
 				<div className="flex items-center gap-3">
 					<Switch
 						aria-label="Conferma Lavorata"
-						checked={check}
+						checked={data.hasConfermaAdmin}
 						id="conferma"
 						onCheckedChange={(c) => {
-							setCheck(c);
+							handleUpdate({
+								servizioId: servizio.servizio_id,
+								annuncioId: data.id,
+								status: c,
+							});
 						}}
 					/>
 					<Label className="text-base" htmlFor="conferma">
@@ -827,21 +836,6 @@ const SendConferma = () => {
 					</Label>
 				</div>
 			</CardContent>
-			<CardFooter>
-				<Button
-					aria-label="Save Conferma Status"
-					onClick={() => {
-						handleUpdate({
-							servizioId: servizio.servizio_id,
-							annuncioId: data.id,
-							status: check,
-						});
-					}}
-					variant="success"
-				>
-					Salva
-				</Button>
-			</CardFooter>
 		</Card>
 	);
 };
diff --git a/apps/infoalloggi/src/components/servizio/servizio_actions.tsx b/apps/infoalloggi/src/components/servizio/servizio_actions.tsx
index b3d2c7e..6408207 100644
--- a/apps/infoalloggi/src/components/servizio/servizio_actions.tsx
+++ b/apps/infoalloggi/src/components/servizio/servizio_actions.tsx
@@ -182,7 +182,11 @@ const ServizioBasicActions = ({ className }: { className?: string }) => {
 	return null;
 };
 
-const ServizioPacksInfos = () => {
+export const ServizioPacksInfos = ({
+	title = "Prezzi:",
+}: {
+	title?: string;
+}) => {
 	const { servizio } = useServizio();
 	const { data: packs } = api.servizio.getPacksSolution.useQuery({
 		servizioId: servizio.servizio_id,
@@ -190,7 +194,7 @@ const ServizioPacksInfos = () => {
 	if (!packs) return null;
 	return (
 		<div className="w-full space-y-2">
-			<h3 className="font-semibold text-lg">Prezzi:</h3>
+			<h3 className="font-semibold text-lg">{title}</h3>
 			<div className="flex w-full flex-col gap-4 md:flex-row">
 				<div className="flex flex-1 flex-col gap-2 rounded-md bg-secondary/50 p-2">
 					{packs.acconto.success ? (