feat: enhance FormServizio and FormServizioAcquisto with new button styles and functionality

apps/infoalloggi/src/components/custom_ui/credenza.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { createContext, type ReactNode, useContext } from "react";
+import type { DialogContentProps } from "@radix-ui/react-dialog";
+import { createContext, type ReactNode, type RefAttributes, useContext } from "react";
 import type { Drawer as DrawerPrimitive } from "vaul";
 import {
 	Dialog,
@@ -148,7 +149,7 @@ const CredenzaClose = ({ className, children, ...props }: CredenzaProps) => {
 	);
 };
 
-const CredenzaContent = ({ className, children, ...props }: CredenzaProps) => {
+const CredenzaContent = ({ className, children, ...props }: DialogContentProps & RefAttributes<HTMLDivElement> ) => {
 	const { isDesktop } = useCredenzaContext();
 	const CredenzaContent = isDesktop ? DialogContent : DrawerContent;
 
@@ -217,13 +218,13 @@ const CredenzaFooter = ({ className, children, ...props }: CredenzaProps) => {
 
 export {
 	Credenza,
-	//CredenzaNested,
+	CredenzaBody,
-	CredenzaTrigger,
 	CredenzaClose,
 	CredenzaContent,
 	CredenzaDescription,
+	CredenzaFooter,
 	CredenzaHeader,
 	CredenzaTitle,
-	CredenzaBody,
+	//CredenzaNested,
-	CredenzaFooter,
+	CredenzaTrigger,
 };

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

@@ -1,6 +1,6 @@
 import { format } from "date-fns";
 import { it } from "date-fns/locale";
-import { CalendarIcon, SlidersHorizontal } from "lucide-react";
+import { CalendarIcon, Check, SlidersHorizontal } from "lucide-react";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { z } from "zod/v4";
@@ -96,10 +96,12 @@ const FormServizio = ({
 	initialData,
 	onSubmit,
 	isLimited,
+	setOpen,
 }: {
 	initialData: Servizio | undefined;
 	onSubmit: (fields: FormValues) => void;
 	isLimited: boolean;
+	setOpen?: (open: boolean) => void;
 }) => {
 	// This can come from your database or API.
 	let defaultValues: FormValues;
@@ -245,7 +247,7 @@ const FormServizio = ({
 						</FormItem>
 					)}
 				/>
-				<div className="flex w-full items-start justify-between gap-x-4">
+				<div className="grid w-full grid-cols-1 items-start gap-4 sm:grid-cols-2">
 					<FormField
 						control={form.control}
 						name="entromese"
@@ -627,8 +629,9 @@ const FormServizio = ({
 															if (isLimited) return;
 															field.onChange(!field.value);
 														}}
-														variant={field.value ? "default" : "secondary"}
+														variant={field.value ? "default" : "outline"}
 													>
+														{field.value && <Check />}
 														{pair[1]}
 													</Badge>
 												</FormControl>
@@ -724,7 +727,22 @@ const FormServizio = ({
 						/>
 					</div>
 				)} */}
-				{!isLimited && <Button type="submit">Salva</Button>}
+				<div className="flex w-full justify-end gap-2">
+					{!isLimited && (
+						<Button type="submit" variant="success">
+							Salva
+						</Button>
+					)}
+
+					<Button
+						disabled={isLimited || form.formState.isDirty}
+						onClick={() => setOpen?.(false)}
+						type="button"
+						variant="outline"
+					>
+						Chiudi
+					</Button>
+				</div>
 			</form>
 		</Form>
 	);
@@ -822,18 +840,24 @@ export const EditServizioModal = () => {
 					{t.servizio.parametri.btn}
 				</Button>
 			</CredenzaTrigger>
-			<CredenzaContent className="max-h-[90vh] w-full sm:max-w-5xl">
+			<CredenzaContent
+				className="max-h-[90vh] w-full **:data-[slot=dialog-close]:hidden sm:max-w-5xl"
+				onInteractOutside={(e) => {
+					e.preventDefault();
+				}}
+			>
 				<CredenzaHeader>
 					<CredenzaTitle>{t.servizio.parametri.title}</CredenzaTitle>
 					<CredenzaDescription className="sr-only">
 						{t.servizio.parametri.title}
 					</CredenzaDescription>
 				</CredenzaHeader>
-				<CredenzaBody className="max-h-[80vh] w-full max-w-3xl overflow-y-auto pb-5 sm:max-w-5xl">
+				<CredenzaBody className="w-full max-w-3xl overflow-y-auto pb-5 sm:max-w-5xl">
 					<FormServizio
 						initialData={servizio}
 						isLimited={!isAdmin}
 						onSubmit={onSubmit}
+						setOpen={setOpenEditParametri}
 					/>
 				</CredenzaBody>
 			</CredenzaContent>

apps/infoalloggi/src/forms/FormServizioAcquisto.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { format } from "date-fns";
 import { enUS, it } from "date-fns/locale";
-import { CalendarIcon, HelpCircleIcon, Mail } from "lucide-react";
+import { CalendarIcon, Check, HelpCircleIcon, Mail } from "lucide-react";
 import { useRouter } from "next/router";
 import { type Control, useWatch } from "react-hook-form";
 import toast from "react-hot-toast";
@@ -834,8 +834,9 @@ export const FormServizioAcquisto = ({
 																onClick={() => {
 																	field.onChange(!field.value);
 																}}
-																variant={field.value ? "default" : "secondary"}
+																variant={field.value ? "default" : "outline"}
 															>
+																{field.value && <Check />}
 																{pair[1]}
 															</Badge>
 														</FormControl>