feat: add ServizioPacksInfos component for displaying pricing information

This commit is contained in:
Marco Pedone 2026-01-07 16:18:21 +01:00
parent f9cacce912
commit 7763aac01c
2 changed files with 71 additions and 73 deletions

View file

@ -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,6 +490,7 @@ const MotivazioneSection = () => {
<span className="text-red-500 italic">Non inserita</span>
)}
</p>
{!servizio.skipDocMotivazione && (
<p>
<span className="font-semibold">Documento caricato: </span>
{servizio.doc_motivazione_ref ? (
@ -497,6 +499,7 @@ const MotivazioneSection = () => {
<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,7 +714,8 @@ const GeneralSection = () => {
return (
<>
<div className="flex flex-col gap-2">
<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">
@ -734,15 +738,17 @@ const GeneralSection = () => {
/>
</div>
</div>
<p>
<span className="font-semibold">Persone in annuncio: </span>
{personeAnnuncio}
</p>
</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="w-full space-y-2">
<p className="font-medium">Persone in annuncio:</p>
<p>{personeAnnuncio}</p>
</div>
</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">
<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>
);
};

View file

@ -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 ? (