Refactor comuni and provincie data structures; add dynamic FormDebug component

- Updated `initializeComuniNames` to accept an optional `provincia` parameter for filtering comuni by province.
- Renamed `getComuniNames` to `getComuni` and modified it to return an array of objects containing both comune names and their respective province siglas.
- Introduced `provincieWithSigla` array to map province names to their siglas, along with a new function `getProvinciaFromSigla` for retrieving province names based on sigla.
- Added a dynamic import for the `FormDebug` component to facilitate debugging in development mode while preventing it from rendering in production.
- Commented out console logs in `checkFiscalCodeValidity` for cleaner production output.

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

@@ -11,7 +11,6 @@ import {
 } from "react-hook-form";
 import { Label } from "src/components/ui/label";
 import { cn } from "src/lib/utils";
-import { env } from "~/env";
 
 const Form = FormProvider;
 
@@ -171,23 +170,6 @@ const FormMessage = React.forwardRef<
 });
 FormMessage.displayName = "FormMessage";
 
-const FormDebug = React.forwardRef<
-	React.ElementType,
-	React.HTMLAttributes<HTMLDivElement>
->(async () => {
-	if (env.NODE_ENV !== "development") {
-		return null;
-	}
-	const { control, formState } = useFormContext();
-	const devtools = await import(/* webpackIgnore: true */ "@hookform/devtools");
-
-	if (Object.keys(formState.errors).length > 0) {
-		console.error("errors", formState.errors);
-	}
-	return <devtools.DevTool control={control} />;
-});
-FormDebug.displayName = "FormDebug";
-
 export {
 	useFormField,
 	Form,
@@ -197,5 +179,4 @@ export {
 	FormDescription,
 	FormMessage,
 	FormField,
-	FormDebug,
 };

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

@@ -1,7 +0,0 @@
-import dynamic from "next/dynamic";
-import type React from "react";
-
-export const DevT: React.ElementType = dynamic(
-	() => import("@hookform/devtools").then((mod) => mod.DevTool),
-	{ ssr: false },
-);

apps/infoalloggi/src/forms/FormNewServizioAcquisto.tsx

@@ -3,6 +3,7 @@ import { format } from "date-fns";
 import { enUS, it } from "date-fns/locale";
 import { CalendarIcon, HelpCircleIcon, Mail } from "lucide-react";
 import { useRouter } from "next/router";
+import { type Control, useWatch } from "react-hook-form";
 import toast from "react-hot-toast";
 import { z } from "zod/v4";
 import { Counter } from "~/components/counter";
@@ -48,9 +49,9 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "~/components/ui/tooltip";
-import { getComuniNames } from "~/i18n/comuni";
+import { getComuni } from "~/i18n/comuni";
 import { GetNazioni } from "~/i18n/nazioni";
-import { provincie } from "~/i18n/provincie";
+import { getProvinciaFromSigla, provincieWithSigla } from "~/i18n/provincie";
 import { checkFiscalCodeValidity, getComuneFieldValue } from "~/lib/form_utils";
 import { cn } from "~/lib/utils";
 import { useZodForm } from "~/lib/zodForm";
@@ -67,18 +68,7 @@ type InitialData = {
 	anagrafica: UsersAnagrafica | undefined;
 };
 
-export const FormNewServizioAcquisto = ({
+const FormNewServizioSchema = z.object({
-	initialData,
-	userId,
-	isAdmin = false,
-}: {
-	initialData: InitialData;
-	userId: UsersId;
-	isAdmin?: boolean;
-}) => {
-	const router = useRouter();
-	const Schema = z
-		.object({
 	animali: z.boolean(),
 	arredato: z.boolean(),
 	ascensore: z.boolean(),
@@ -122,8 +112,20 @@ export const FormNewServizioAcquisto = ({
 	telefono: z.string(),
 	terrazzo: z.boolean(),
 	tipologia: z.custom<TipologiaPosizioneEnum>(),
-		})
+});
-		.superRefine(
+type FormNewServizioValues = z.infer<typeof FormNewServizioSchema>;
+
+export const FormNewServizioAcquisto = ({
+	initialData,
+	userId,
+	isAdmin = false,
+}: {
+	initialData: InitialData;
+	userId: UsersId;
+	isAdmin?: boolean;
+}) => {
+	const router = useRouter();
+	const schema = FormNewServizioSchema.superRefine(
 		(
 			{
 				telefono,
@@ -265,10 +267,8 @@ export const FormNewServizioAcquisto = ({
 		},
 	);
 
-	type FormValues = z.infer<typeof Schema>;
-
 	// This can come from your database or API.
-	const defaultValues: FormValues = {
+	const defaultValues: FormNewServizioValues = {
 		...initialData.userData,
 		azienda: initialData.anagrafica?.azienda || false,
 		cap_recapiti: initialData.anagrafica?.cap_residenza || "",
@@ -298,10 +298,10 @@ export const FormNewServizioAcquisto = ({
 
 	const { locale, t } = useTranslation();
 	const nazioni_options = GetNazioni();
-	const comuni_options = getComuniNames();
+	const comuni_options = getComuni();
 	z.config(z.locales[locale]());
 
-	const form = useZodForm(Schema, {
+	const form = useZodForm(schema, {
 		defaultValues: defaultValues,
 	});
 	const DatePickerLocale = locale === "it" ? it : enUS;
@@ -335,7 +335,7 @@ export const FormNewServizioAcquisto = ({
 		},
 	});
 
-	function onSubmit(fields: FormValues) {
+	function onSubmit(fields: FormNewServizioValues) {
 		mutate({
 			anagrafica: {
 				azienda: fields.azienda,
@@ -399,17 +399,8 @@ export const FormNewServizioAcquisto = ({
 		["pianoterra", string],
 	];
 	const altrePrefMapping = t.altrePrefMapping as altrePrefMappingType;
-	const [
+	const [tipologia, nazione_nascita, nazione_recapiti, budget] = form.watch([
-		tipologia,
-		azienda,
-		fatturazione_aziendale,
-		nazione_nascita,
-		nazione_recapiti,
-		budget,
-	] = form.watch([
 		"tipologia",
-		"azienda",
-		"fatturazione_aziendale",
 		"nazione_nascita",
 		"nazione_recapiti",
 		"budget",
@@ -438,7 +429,10 @@ export const FormNewServizioAcquisto = ({
 
 	return (
 		<Form {...form}>
-			<form className="space-y-8 px-0.5" onSubmit={form.handleSubmit(onSubmit)}>
+			<form
+				className="space-y-8 px-0.5 pb-5"
+				onSubmit={form.handleSubmit(onSubmit)}
+			>
 				<Card>
 					<CardHeader>
 						<CardTitle>{texts.dettagli}</CardTitle>
@@ -882,154 +876,9 @@ export const FormNewServizioAcquisto = ({
 							/>
 						</div>
 
-						{azienda && (
+						<AziendaSection control={form.control} setValue={form.setValue} />
-							<>
+						<FatturazioneSection control={form.control} />
-								<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
-									<FormField
-										control={form.control}
-										name="ragione_sociale"
-										render={({ field }) => (
-											<FormItem className="w-full">
-												<div className="flex flex-wrap items-center gap-x-2">
-													<FormLabel htmlFor="ragione_sociale">
-														{t.anagrafica.ragioneSociale}
-													</FormLabel>
-													<FormMessage />
-												</div>
-												<FormControl>
-													<Input
-														{...field}
-														id="ragione_sociale"
-														type="text"
-														value={field.value || undefined}
-													/>
-												</FormControl>
-											</FormItem>
-										)}
-									/>
-									<FormField
-										control={form.control}
-										name="sede_legale"
-										render={({ field }) => (
-											<FormItem className="w-full">
-												<div className="flex flex-wrap items-center gap-x-2">
-													<FormLabel htmlFor="sede_legale">
-														{t.anagrafica.sedeLegale}
-													</FormLabel>
-													<FormMessage />
-												</div>
-												<FormControl>
-													<Input
-														{...field}
-														id="sede_legale"
-														type="text"
-														value={field.value || undefined}
-													/>
-												</FormControl>
-											</FormItem>
-										)}
-									/>
-								</div>
-								<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
-									<FormField
-										control={form.control}
-										name="p_iva"
-										render={({ field }) => (
-											<FormItem className="w-full">
-												<div className="flex flex-wrap items-center gap-x-2">
-													<FormLabel htmlFor="p_iva">
-														{t.anagrafica.p_iva}
-													</FormLabel>
-													<FormMessage />
-												</div>
-												<FormControl>
-													<Input
-														{...field}
-														id="p_iva"
-														type="text"
-														value={field.value || undefined}
-													/>
-												</FormControl>
-											</FormItem>
-										)}
-									/>
-									<FormField
-										control={form.control}
-										name="legale_rappresentante"
-										render={({ field }) => (
-											<FormItem className="w-full">
-												<div className="flex flex-wrap items-center gap-x-2">
-													<FormLabel htmlFor="legale_rappresentante">
-														{t.anagrafica.legale_rappresentante}
-													</FormLabel>
-													<FormMessage />
-												</div>
-												<FormControl>
-													<Input
-														{...field}
-														id="legale_rappresentante"
-														type="text"
-														value={field.value || undefined}
-													/>
-												</FormControl>
-											</FormItem>
-										)}
-									/>
-								</div>
-								<FormField
-									control={form.control}
-									name="fatturazione_aziendale"
-									render={({ field }) => (
-										<FormItem className="py-2">
-											<div className="flex items-center justify-start gap-x-4">
-												<FormLabel htmlFor="fatturazione_aziendale">
-													{texts.fattura}
-												</FormLabel>
-												<FormControl>
-													<Switch
-														checked={field.value}
-														className="data-[state=checked]:bg-neutral-700"
-														id="fatturazione_aziendale"
-														onCheckedChange={(v) => {
-															field.onChange(v);
-															if (!v) {
-																form.setValue("codice_destinatario", null);
-															}
-														}}
-													/>
-												</FormControl>
-												<FormMessage />
-											</div>
-										</FormItem>
-									)}
-								/>
-								{fatturazione_aziendale && (
-									<FormField
-										control={form.control}
-										name="codice_destinatario"
-										render={({ field }) => (
-											<FormItem className="w-full">
-												<div className="flex flex-wrap items-center gap-x-2">
-													<FormLabel htmlFor="codice_destinatario">
-														{texts.sdi}
-													</FormLabel>
-													<FormMessage />
-												</div>
 
-												<FormControl>
-													<Input
-														{...field}
-														id="codice_destinatario"
-														type="text"
-														value={field.value || undefined}
-													/>
-												</FormControl>
-											</FormItem>
-										)}
-									/>
-								)}
-							</>
-						)}
 						<Separator />
 						<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
 							<FormField
@@ -1110,6 +959,9 @@ export const FormNewServizioAcquisto = ({
 												onValueChange={async (value) => {
 													field.onChange(value.value);
 													await form.trigger("luogo_nascita");
+													if (value.value !== "0") {
+														form.setValue("luogo_nascita", "");
+													}
 												}}
 												options={UnpackOptions({ options: nazioni_options })}
 												placeholder="Seleziona..."
@@ -1124,6 +976,7 @@ export const FormNewServizioAcquisto = ({
 								name="luogo_nascita"
 								render={({ field }) => {
 									if (nazione_nascita === "0") {
+										const options = comuni_options.map((c) => c.nome);
 										return (
 											<FormItem className="w-full">
 												<div className="flex flex-wrap items-center gap-x-2">
@@ -1137,7 +990,7 @@ export const FormNewServizioAcquisto = ({
 													<MultiSelect
 														defaultValue={getComuneFieldValue(
 															field.value,
-															comuni_options,
+															options,
 														)}
 														elementId="select-comune-nascita"
 														elementName="luogoNascita"
@@ -1146,7 +999,7 @@ export const FormNewServizioAcquisto = ({
 															field.onChange(value.value);
 															await form.trigger("luogo_nascita");
 														}}
-														options={UnpackOptions({ options: comuni_options })}
+														options={UnpackOptions({ options })}
 														placeholder="Seleziona..."
 													/>
 												</FormControl>
@@ -1310,7 +1163,9 @@ export const FormNewServizioAcquisto = ({
 												onValueChange={async (value) => {
 													field.onChange(value.value);
 													form.setValue("provincia_recapiti", "");
-													await form.trigger("citta_recapiti");
+													if (value.value !== "0") {
+														form.setValue("citta_recapiti", "");
+													}
 												}}
 												options={UnpackOptions({ options: nazioni_options })}
 												placeholder="Seleziona..."
@@ -1322,7 +1177,10 @@ export const FormNewServizioAcquisto = ({
 							<FormField
 								control={form.control}
 								name="provincia_recapiti"
-								render={({ field }) => (
+								render={({ field }) => {
+									const provinciaName =
+										field.value && getProvinciaFromSigla(field.value);
+									return (
 										<FormItem className="w-full">
 											<div className="flex flex-wrap items-center gap-x-2">
 												<FormLabel htmlFor="provinciaRecapiti">
@@ -1333,26 +1191,38 @@ export const FormNewServizioAcquisto = ({
 
 											{nazione_recapiti === "0" ? (
 												<MultiSelect
-												defaultValue={RepackValues({
+													defaultValue={
-													options: provincie,
+														field.value && provinciaName
-													values: field.value,
+															? {
-												})}
+																	label: provinciaName,
+																	value: field.value,
+																}
+															: undefined
+													}
 													elementId="provinciaRecapiti"
 													elementName="provincia"
 													isMulti={false}
 													onValueChange={(value) => {
 														field.onChange(value.value);
 													}}
-												options={UnpackOptions({ options: provincie })}
+													options={provincieWithSigla.map((prov) => ({
+														label: prov.nome,
+														value: prov.sigla,
+													}))}
 													placeholder="Seleziona"
 												/>
 											) : (
 												<FormControl>
-												<Input {...field} id="provinciaRecapiti" type="text" />
+													<Input
+														{...field}
+														id="provinciaRecapiti"
+														type="text"
+													/>
 												</FormControl>
 											)}
 										</FormItem>
-								)}
+									);
+								}}
 							/>
 						</div>
 						<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
@@ -1361,6 +1231,12 @@ export const FormNewServizioAcquisto = ({
 								name="citta_recapiti"
 								render={({ field }) => {
 									if (nazione_recapiti === "0") {
+										const provincia = form.watch("provincia_recapiti");
+										const options = comuni_options
+											.filter((comune) =>
+												provincia ? comune.provincia === provincia : true,
+											)
+											.map((comune) => comune.nome);
 										return (
 											<FormItem className="w-full">
 												<div className="flex flex-wrap items-center gap-x-2">
@@ -1374,7 +1250,7 @@ export const FormNewServizioAcquisto = ({
 													<MultiSelect
 														defaultValue={getComuneFieldValue(
 															field.value,
-															comuni_options,
+															options,
 														)}
 														elementId="select-comune"
 														elementName="citta_recapiti"
@@ -1383,7 +1259,7 @@ export const FormNewServizioAcquisto = ({
 															field.onChange(value.value);
 															await form.trigger("citta_recapiti");
 														}}
-														options={UnpackOptions({ options: comuni_options })}
+														options={UnpackOptions({ options })}
 														placeholder="Seleziona..."
 													/>
 												</FormControl>
@@ -1484,7 +1360,7 @@ export const FormNewServizioAcquisto = ({
 						</div>
 					</CardContent>
 				</Card>
-				<div className="flex w-full items-center justify-center gap-2 pb-8 sm:justify-end">
+				<div className="flex w-full flex-wrap items-center justify-center gap-2 pb-8 sm:justify-end">
 					{isAdmin && (
 						<FormField
 							control={form.control}
@@ -1520,3 +1396,194 @@ export const FormNewServizioAcquisto = ({
 		</Form>
 	);
 };
+
+const AziendaSection = ({
+	control,
+	setValue,
+}: {
+	control: Control<FormNewServizioValues>;
+	setValue: (
+		name: keyof FormNewServizioValues,
+		// biome-ignore lint/suspicious/noExplicitAny: <fine here>
+		value: any,
+	) => void;
+}) => {
+	const { t, locale } = useTranslation();
+	const azienda = useWatch({
+		control,
+		name: "azienda",
+	});
+	return (
+		<>
+			<div
+				className={cn(
+					"flex w-full flex-col items-start justify-between gap-4 sm:flex-row",
+					!azienda && "hidden",
+				)}
+			>
+				<FormField
+					control={control}
+					name="ragione_sociale"
+					render={({ field }) => (
+						<FormItem className="w-full">
+							<div className="flex flex-wrap items-center gap-x-2">
+								<FormLabel htmlFor="ragione_sociale">
+									{t.anagrafica.ragioneSociale}
+								</FormLabel>
+								<FormMessage />
+							</div>
+							<FormControl>
+								<Input
+									{...field}
+									id="ragione_sociale"
+									type="text"
+									value={field.value || undefined}
+								/>
+							</FormControl>
+						</FormItem>
+					)}
+				/>
+				<FormField
+					control={control}
+					name="sede_legale"
+					render={({ field }) => (
+						<FormItem className="w-full">
+							<div className="flex flex-wrap items-center gap-x-2">
+								<FormLabel htmlFor="sede_legale">
+									{t.anagrafica.sedeLegale}
+								</FormLabel>
+								<FormMessage />
+							</div>
+							<FormControl>
+								<Input
+									{...field}
+									id="sede_legale"
+									type="text"
+									value={field.value || undefined}
+								/>
+							</FormControl>
+						</FormItem>
+					)}
+				/>
+			</div>
+
+			<div
+				className={cn(
+					"flex w-full flex-col items-start justify-between gap-4 sm:flex-row",
+					!azienda && "hidden",
+				)}
+			>
+				<FormField
+					control={control}
+					name="p_iva"
+					render={({ field }) => (
+						<FormItem className="w-full">
+							<div className="flex flex-wrap items-center gap-x-2">
+								<FormLabel htmlFor="p_iva">{t.anagrafica.p_iva}</FormLabel>
+								<FormMessage />
+							</div>
+							<FormControl>
+								<Input
+									{...field}
+									id="p_iva"
+									type="text"
+									value={field.value || undefined}
+								/>
+							</FormControl>
+						</FormItem>
+					)}
+				/>
+				<FormField
+					control={control}
+					name="legale_rappresentante"
+					render={({ field }) => (
+						<FormItem className="w-full">
+							<div className="flex flex-wrap items-center gap-x-2">
+								<FormLabel htmlFor="legale_rappresentante">
+									{t.anagrafica.legale_rappresentante}
+								</FormLabel>
+								<FormMessage />
+							</div>
+							<FormControl>
+								<Input
+									{...field}
+									id="legale_rappresentante"
+									type="text"
+									value={field.value || undefined}
+								/>
+							</FormControl>
+						</FormItem>
+					)}
+				/>
+			</div>
+			<FormField
+				control={control}
+				name="fatturazione_aziendale"
+				render={({ field }) => (
+					<FormItem className={cn("py-2", !azienda && "hidden")}>
+						<div className="flex items-center justify-start gap-x-4">
+							<FormLabel htmlFor="fatturazione_aziendale">
+								{locale === "it"
+									? "Vuoi che la fatturazione sia intestata alla tua azienda?"
+									: "Do you want the invoice to be issued to your company?"}
+							</FormLabel>
+							<FormControl>
+								<Switch
+									checked={field.value}
+									className="data-[state=checked]:bg-neutral-700"
+									id="fatturazione_aziendale"
+									onCheckedChange={(v) => {
+										field.onChange(v);
+										if (!v) {
+											setValue("codice_destinatario", null);
+										}
+									}}
+								/>
+							</FormControl>
+							<FormMessage />
+						</div>
+					</FormItem>
+				)}
+			/>
+		</>
+	);
+};
+
+const FatturazioneSection = ({
+	control,
+}: {
+	control: Control<FormNewServizioValues>;
+}) => {
+	const { locale } = useTranslation();
+	const fatturazione_aziendale = useWatch({
+		control,
+		name: "fatturazione_aziendale",
+	});
+	return (
+		<FormField
+			control={control}
+			name="codice_destinatario"
+			render={({ field }) => (
+				<FormItem className={cn("w-full", !fatturazione_aziendale && "hidden")}>
+					<div className="flex flex-wrap items-center gap-x-2">
+						<FormLabel htmlFor="codice_destinatario">
+							{locale === "it"
+								? "Codice destinatario SDI"
+								: "SDI Recipient Code"}
+						</FormLabel>
+						<FormMessage />
+					</div>
+
+					<FormControl>
+						<Input
+							{...field}
+							id="codice_destinatario"
+							type="text"
+							value={field.value || undefined}
+						/>
+					</FormControl>
+				</FormItem>
+			)}
+		/>
+	);
+};

apps/infoalloggi/src/forms/FormProfilo_Anagrafica.tsx

@@ -1,6 +1,7 @@
 import { differenceInYears, format } from "date-fns";
 import { enUS, it } from "date-fns/locale";
 import { CalendarIcon } from "lucide-react";
+import { type Control, useWatch } from "react-hook-form";
 import toast from "react-hot-toast";
 import { z } from "zod/v4";
 import {
@@ -26,9 +27,9 @@ import {
 } from "~/components/ui/popover";
 import { Separator } from "~/components/ui/separator";
 import { Switch } from "~/components/ui/switch";
-import { getComuniNames } from "~/i18n/comuni";
+import { getComuni } from "~/i18n/comuni";
 import { GetNazioni } from "~/i18n/nazioni";
-import { provincie } from "~/i18n/provincie";
+import { getProvinciaFromSigla, provincieWithSigla } from "~/i18n/provincie";
 import { checkFiscalCodeValidity, getComuneFieldValue } from "~/lib/form_utils";
 import { cn } from "~/lib/utils";
 import { useZodForm } from "~/lib/zodForm";
@@ -36,13 +37,7 @@ import { useTranslation } from "~/providers/I18nProvider";
 import type { UserWithAnagrafica } from "~/server/services/user.service";
 import { api } from "~/utils/api";
 
-export const ProfileFormAnagrafica = ({
+const profileFormSchema = z.object({
-	userData,
-}: {
-	userData: UserWithAnagrafica;
-}) => {
-	const profileFormSchema = z
-		.object({
 	azienda: z.boolean(),
 	cap_residenza: z.string().optional(),
 	civico_residenza: z.string().optional(),
@@ -61,8 +56,15 @@ export const ProfileFormAnagrafica = ({
 	sede_legale: z.string().nullable(),
 	sesso: z.string().optional(),
 	via_residenza: z.string().optional(),
-		})
+});
-		.superRefine(
+
+type ProfileFormValues = z.infer<typeof profileFormSchema>;
+export const ProfileFormAnagrafica = ({
+	userData,
+}: {
+	userData: UserWithAnagrafica;
+}) => {
+	const schema = profileFormSchema.superRefine(
 		(
 			{
 				data_nascita,
@@ -149,6 +151,7 @@ export const ProfileFormAnagrafica = ({
 			}
 			if (
 				codice_fiscale &&
+				codice_fiscale.length > 0 &&
 				data_nascita &&
 				sesso &&
 				luogo_nascita &&
@@ -169,8 +172,6 @@ export const ProfileFormAnagrafica = ({
 		},
 	);
 
-	type ProfileFormValues = z.infer<typeof profileFormSchema>;
-
 	const defaultValues: ProfileFormValues = {
 		azienda: userData.azienda || false,
 		cap_residenza: userData.cap_residenza || "",
@@ -192,9 +193,10 @@ export const ProfileFormAnagrafica = ({
 		via_residenza: userData.via_residenza || "",
 	};
 	const { locale, t } = useTranslation();
+	const DatePickerLocale = locale === "it" ? it : enUS;
 	z.config(z.locales[locale]());
 
-	const form = useZodForm(profileFormSchema, {
+	const form = useZodForm(schema, {
 		defaultValues: defaultValues,
 	});
 
@@ -220,15 +222,12 @@ export const ProfileFormAnagrafica = ({
 		});
 	}
 	const nazioni_options = GetNazioni();
-	const comuni_options = getComuniNames();
+	const comuni_options = getComuni();
-	const azienda = form.watch("azienda");
+
-	const nazione_nascita = form.watch("nazione_nascita");
-	const nazione_residenza = form.watch("nazione_residenza");
-	const fatturazione_aziendale = form.watch("fatturazione_aziendale");
-	const DatePickerLocale = locale === "it" ? it : enUS;
 	return (
 		<>
 			<Form {...form}>
+				{/* <FormDebug control={form.control} /> */}
 				<form
 					className="h-full space-y-8 px-0.5"
 					onSubmit={form.handleSubmit(onSubmit)}
@@ -329,7 +328,8 @@ export const ProfileFormAnagrafica = ({
 							control={form.control}
 							name="luogo_nascita"
 							render={({ field }) => {
-								if (nazione_nascita === "0") {
+								if (form.watch("nazione_nascita") === "0") {
+									const options = comuni_options.map((c) => c.nome);
 									return (
 										<FormItem className="w-full">
 											<div className="flex flex-wrap items-center gap-x-2">
@@ -343,7 +343,7 @@ export const ProfileFormAnagrafica = ({
 												<MultiSelect
 													defaultValue={
 														field.value
-															? getComuneFieldValue(field.value, comuni_options)
+															? getComuneFieldValue(field.value, options)
 															: undefined
 													}
 													elementId="select-comune"
@@ -354,7 +354,7 @@ export const ProfileFormAnagrafica = ({
 														await form.trigger("luogo_nascita");
 														await form.trigger("codice_fiscale");
 													}}
-													options={UnpackOptions({ options: comuni_options })}
+													options={UnpackOptions({ options })}
 													placeholder="Seleziona..."
 												/>
 											</FormControl>
@@ -405,8 +405,9 @@ export const ProfileFormAnagrafica = ({
 										elementId="select-sesso"
 										elementName="sesso"
 										isMulti={false}
-										onValueChange={(value) => {
+										onValueChange={async (value) => {
 											field.onChange(value.value);
+											await form.trigger("codice_fiscale");
 										}}
 										options={t.anagrafica.sesso_options}
 										placeholder=""
@@ -469,11 +470,45 @@ export const ProfileFormAnagrafica = ({
 							)}
 						/>
 					</div>
-					{azienda && (
+
-						<>
+					<AziendaSection control={form.control} setValue={form.setValue} />
-							<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
+					<FatturazioneSection control={form.control} />
-								<FormField
+
+					<Separator />
+
+					<ResidenzaSection
 						control={form.control}
+						setValue={form.setValue}
+						trigger={form.trigger}
+					/>
+
+					<Button type="submit">{t.profile.aggiorna}</Button>
+				</form>
+			</Form>
+		</>
+	);
+};
+
+const AziendaSection = ({
+	control,
+	setValue,
+}: {
+	control: Control<ProfileFormValues>;
+	// biome-ignore lint/suspicious/noExplicitAny: <fine here>
+	setValue: (field: keyof ProfileFormValues, value: any) => void;
+}) => {
+	const { t } = useTranslation();
+	const azienda = useWatch({ control, name: "azienda" });
+	return (
+		<>
+			<div
+				className={cn(
+					"flex w-full flex-col items-start justify-between gap-4 sm:flex-row",
+					!azienda && "hidden",
+				)}
+			>
+				<FormField
+					control={control}
 					name="ragione_sociale"
 					render={({ field }) => (
 						<FormItem className="w-full">
@@ -495,7 +530,7 @@ export const ProfileFormAnagrafica = ({
 					)}
 				/>
 				<FormField
-									control={form.control}
+					control={control}
 					name="sede_legale"
 					render={({ field }) => (
 						<FormItem className="w-full">
@@ -517,16 +552,19 @@ export const ProfileFormAnagrafica = ({
 					)}
 				/>
 			</div>
-							<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
+			<div
+				className={cn(
+					"flex w-full flex-col items-start justify-between gap-4 sm:flex-row",
+					!azienda && "hidden",
+				)}
+			>
 				<FormField
-									control={form.control}
+					control={control}
 					name="p_iva"
 					render={({ field }) => (
 						<FormItem className="w-full">
 							<div className="flex flex-wrap items-center gap-x-2">
-												<FormLabel htmlFor="p_iva">
+								<FormLabel htmlFor="p_iva">{t.anagrafica.p_iva}</FormLabel>
-													{t.anagrafica.p_iva}
-												</FormLabel>
 								<FormMessage />
 							</div>
 							<FormControl>
@@ -541,7 +579,7 @@ export const ProfileFormAnagrafica = ({
 					)}
 				/>
 				<FormField
-									control={form.control}
+					control={control}
 					name="legale_rappresentante"
 					render={({ field }) => (
 						<FormItem className="w-full">
@@ -564,10 +602,10 @@ export const ProfileFormAnagrafica = ({
 				/>
 			</div>
 			<FormField
-								control={form.control}
+				control={control}
 				name="fatturazione_aziendale"
 				render={({ field }) => (
-									<FormItem className="py-2">
+					<FormItem className={cn("py-2", !azienda && "hidden")}>
 						<div className="flex items-center justify-start gap-x-4">
 							<FormLabel htmlFor="fatturazione_aziendale">
 								Vuoi che la fatturazione sia intestata alla tua azienda?
@@ -580,7 +618,7 @@ export const ProfileFormAnagrafica = ({
 									onCheckedChange={(v) => {
 										field.onChange(v);
 										if (!v) {
-															form.setValue("codice_destinatario", null);
+											setValue("codice_destinatario", null);
 										}
 									}}
 								/>
@@ -590,12 +628,28 @@ export const ProfileFormAnagrafica = ({
 					</FormItem>
 				)}
 			/>
-							{fatturazione_aziendale && (
+		</>
+	);
+};
+
+const FatturazioneSection = ({
+	control,
+}: {
+	control: Control<ProfileFormValues>;
+}) => {
+	const fatturazione_aziendale = useWatch({
+		control,
+		name: "fatturazione_aziendale",
+	});
+	return (
+		<>
 			<FormField
-									control={form.control}
+				control={control}
 				name="codice_destinatario"
 				render={({ field }) => (
-										<FormItem className="w-full">
+					<FormItem
+						className={cn("w-full", !fatturazione_aziendale && "hidden")}
+					>
 						<div className="flex flex-wrap items-center gap-x-2">
 							<FormLabel htmlFor="codice_destinatario">
 								Codice destinatario (SDI)
@@ -614,13 +668,37 @@ export const ProfileFormAnagrafica = ({
 					</FormItem>
 				)}
 			/>
-							)}
 		</>
-					)}
+	);
-					<Separator />
+};
+
+const ResidenzaSection = ({
+	control,
+	setValue,
+	trigger,
+}: {
+	control: Control<ProfileFormValues>;
+	// biome-ignore lint/suspicious/noExplicitAny: <fine here>
+	setValue: (field: keyof ProfileFormValues, value: any) => void;
+	trigger: (name?: keyof ProfileFormValues) => Promise<boolean>;
+}) => {
+	const { t } = useTranslation();
+	const nazioni_options = GetNazioni();
+	const comuni_options = getComuni();
+	const nazione_residenza = useWatch({
+		control: control,
+		name: "nazione_residenza",
+	});
+	const provincia_residenza = useWatch({
+		control: control,
+		name: "provincia_residenza",
+	});
+
+	return (
+		<>
 			<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
 				<FormField
-							control={form.control}
+					control={control}
 					name="nazione_residenza"
 					render={({ field }) => (
 						<FormItem className="w-full">
@@ -643,9 +721,9 @@ export const ProfileFormAnagrafica = ({
 								elementName="nazione"
 								isMulti={false}
 								onValueChange={async (value) => {
-											form.setValue("provincia_residenza", "");
+									setValue("provincia_residenza", "");
 									field.onChange(value.value);
-											await form.trigger("comune_residenza");
+									await trigger("comune_residenza");
 								}}
 								options={UnpackOptions({ options: nazioni_options })}
 								placeholder="Seleziona"
@@ -655,9 +733,12 @@ export const ProfileFormAnagrafica = ({
 				/>
 
 				<FormField
-							control={form.control}
+					control={control}
 					name="provincia_residenza"
-							render={({ field }) => (
+					render={({ field }) => {
+						const provinciaName =
+							field.value && getProvinciaFromSigla(field.value);
+						return (
 							<FormItem className="w-full">
 								<div className="flex flex-wrap items-center gap-x-2">
 									<FormLabel htmlFor="provincia_residenza">
@@ -669,11 +750,11 @@ export const ProfileFormAnagrafica = ({
 								{nazione_residenza === "0" ? (
 									<MultiSelect
 										defaultValue={
-												field.value
+											field.value && provinciaName
-													? RepackValues({
+												? {
-															options: provincie,
+														label: provinciaName,
-															values: field.value,
+														value: field.value,
-														})
+													}
 												: undefined
 										}
 										elementId="provincia_residenza"
@@ -682,7 +763,10 @@ export const ProfileFormAnagrafica = ({
 										onValueChange={(value) => {
 											field.onChange(value.value);
 										}}
-											options={UnpackOptions({ options: provincie })}
+										options={provincieWithSigla.map((prov) => ({
+											label: prov.nome,
+											value: prov.sigla,
+										}))}
 										placeholder="Seleziona"
 									/>
 								) : (
@@ -691,15 +775,24 @@ export const ProfileFormAnagrafica = ({
 									</FormControl>
 								)}
 							</FormItem>
-							)}
+						);
+					}}
 				/>
 			</div>
 			<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
 				<FormField
-							control={form.control}
+					control={control}
 					name="comune_residenza"
 					render={({ field }) => {
 						if (nazione_residenza === "0") {
+							const options = comuni_options
+								.filter((comune) =>
+									provincia_residenza
+										? comune.provincia === provincia_residenza
+										: true,
+								)
+								.map((comune) => comune.nome);
+
 							return (
 								<FormItem className="w-full">
 									<div className="flex flex-wrap items-center gap-x-2">
@@ -713,7 +806,7 @@ export const ProfileFormAnagrafica = ({
 										<MultiSelect
 											defaultValue={
 												field.value
-															? getComuneFieldValue(field.value, comuni_options)
+													? getComuneFieldValue(field.value, options)
 													: undefined
 											}
 											elementId="select-comune"
@@ -721,9 +814,11 @@ export const ProfileFormAnagrafica = ({
 											isMulti={false}
 											onValueChange={async (value) => {
 												field.onChange(value.value);
-														await form.trigger("comune_residenza");
+												await trigger("comune_residenza");
 											}}
-													options={UnpackOptions({ options: comuni_options })}
+											options={UnpackOptions({
+												options: options,
+											})}
 											placeholder="Seleziona..."
 										/>
 									</FormControl>
@@ -745,7 +840,7 @@ export const ProfileFormAnagrafica = ({
 										id="comune_residenza"
 										onChange={async (v) => {
 											field.onChange(v.target.value);
-													await form.trigger("comune_residenza");
+											await trigger("comune_residenza");
 										}}
 										type="text"
 									/>
@@ -755,14 +850,12 @@ export const ProfileFormAnagrafica = ({
 					}}
 				/>
 				<FormField
-							control={form.control}
+					control={control}
 					name="cap_residenza"
 					render={({ field }) => (
 						<FormItem className="w-full">
 							<div className="flex flex-wrap items-center gap-x-2">
-										<FormLabel htmlFor="cap_residenza">
+								<FormLabel htmlFor="cap_residenza">{t.recapiti.cap}</FormLabel>
-											{t.recapiti.cap}
-										</FormLabel>
 
 								<FormMessage />
 							</div>
@@ -780,7 +873,7 @@ export const ProfileFormAnagrafica = ({
 			</div>
 			<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
 				<FormField
-							control={form.control}
+					control={control}
 					name="via_residenza"
 					render={({ field }) => (
 						<FormItem className="w-full">
@@ -803,7 +896,7 @@ export const ProfileFormAnagrafica = ({
 				/>
 
 				<FormField
-							control={form.control}
+					control={control}
 					name="civico_residenza"
 					render={({ field }) => (
 						<FormItem className="w-full">
@@ -826,10 +919,6 @@ export const ProfileFormAnagrafica = ({
 					)}
 				/>
 			</div>
-
-					<Button type="submit">{t.profile.aggiorna}</Button>
-				</form>
-			</Form>
 		</>
 	);
 };

apps/infoalloggi/src/i18n/comuni.ts

@@ -24,14 +24,14 @@ const searchComune = (comune: string): Comune | null => {
   return result;
 };
 let comuniNames: string[] | null = null;
-const initializeComuniNames = () => {
+const initializeComuniNames = (provincia?: string) => {
   if (!comuniNames) {
-    comuniNames = comuniArray.map((comune) => comune.NOME);
+    comuniNames = comuniArray.filter((c)=> provincia ? c.SIGLA==provincia:true).map((comune) => comune.NOME);
   }
 };
-export const getComuniNames = () => {
+export const getComuni = () => {
-  initializeComuniNames();
+  
-  return comuniNames!;
+  return comuniArray.map((comune) => ({nome:comune.NOME, provincia:comune.SIGLA}));
 };
 export const getComuneFromIndex = (index: number): Comune | null => {
   initializeComuniNames();

apps/infoalloggi/src/i18n/provincie.ts

@@ -1,112 +1,120 @@
-export const provincie = [
+
-  "AGRIGENTO",
+export const getProvinciaFromSigla = (sigla: string): string | undefined => {
-  "ALESSANDRIA",
+  const provincia = provincieWithSigla.find((prov) => prov.sigla === sigla);
-  "ANCONA",
+  return provincia ? provincia.nome : undefined;
-  "AOSTA",
+}
-  "AREZZO",
+export const provincieWithSigla: {
-  "ASCOLI PICENO",
+  nome: string;
-  "ASTI",
+  sigla: string;
-  "AVELLINO",
+}[] = [
-  "BARI",
+  {nome: "AGRIGENTO",sigla: "AG"},
-  "BARLETTA-ANDRIA-TRANI",
+  {nome: "ALESSANDRIA",sigla: "AL"},
-  "BELLUNO",
+  {nome: "ANCONA",sigla: "AN"},
-  "BENEVENTO",
+  {nome: "AOSTA",sigla: "AO"},
-  "BERGAMO",
+  {nome: "AREZZO",sigla: "AR"},
-  "BIELLA",
+  {nome: "ASCOLI PICENO",sigla: "AP"},
-  "BOLOGNA",
+  {nome: "ASTI",sigla: "AT"},
-  "BOLZANO",
+  {nome: "AVELLINO",sigla: "AV"},
-  "BRESCIA",
+  {nome: "BARI",sigla: "BA"},
-  "BRINDISI",
+  {nome: "BARLETTA-ANDRIA-TRANI",sigla: "BT"},
-  "CAGLIARI",
+  {nome: "BELLUNO",sigla: "BL"},
-  "CALTANISSETTA",
+  {nome: "BENEVENTO",sigla: "BN"},
-  "CAMPOBASSO",
+  {nome: "BERGAMO",sigla: "BG"},
-  "CARBONIA-IGLESIAS",
+  {nome: "BIELLA",sigla: "BI"},
-  "CASERTA",
+  {nome: "BOLOGNA",sigla: "BO"},
-  "CATANIA",
+  {nome: "BOLZANO",sigla: "BZ"},
-  "CATANZARO",
+  {nome: "BRESCIA",sigla: "BS"},
-  "CHIETI",
+  {nome: "BRINDISI",sigla: "BR"},
-  "COMO",
+  {nome: "CAGLIARI",sigla: "CA"},
-  "COSENZA",
+  {nome: "CALTANISSETTA",sigla: "CL"},
-  "CREMONA",
+  {nome: "CAMPOBASSO",sigla: "CB"},
-  "CROTONE",
+  {nome: "CARBONIA-IGLESIAS",sigla: "CI"},
-  "CUNEO",
+  {nome: "CASERTA",sigla: "CE"},
-  "ENNA",
+  {nome: "CATANIA",sigla: "CT"},
-  "FERMO",
+  {nome: "CATANZARO",sigla: "CZ"},
-  "FERRARA",
+  {nome: "CHIETI",sigla: "CH"},
-  "FIRENZE",
+  {nome: "COMO",sigla: "CO"},
-  "FOGGIA",
+  {nome: "COSENZA",sigla: "CS"},
-  "FORLÌ-CESENA",
+  {nome: "CREMONA",sigla: "CR"},
-  "FROSINONE",
+  {nome: "CROTONE",sigla: "KR"},
-  "GENOVA",
+  {nome: "CUNEO",sigla: "CN"},
-  "GORIZIA",
+  {nome: "ENNA",sigla: "EN"},
-  "GROSSETO",
+  {nome: "FERMO",sigla: "FM"},
-  "IMPERIA",
+  {nome: "FERRARA",sigla: "FE"},
-  "ISERNIA",
+  {nome: "FIRENZE",sigla: "FI"},
-  "LA SPEZIA",
+  {nome: "FOGGIA",sigla: "FG"},
-  "L'AQUILA",
+  {nome: "FORLÌ-CESENA",sigla: "FC"},
-  "LATINA",
+  {nome: "FROSINONE",sigla: "FR"},
-  "LECCE",
+  {nome: "GENOVA",sigla: "GE"},
-  "LECCO",
+  {nome: "GORIZIA",sigla: "GO"},
-  "LIVORNO",
+  {nome: "GROSSETO",sigla: "GR"},
-  "LODI",
+  {nome: "IMPERIA",sigla: "IM"},
-  "LUCCA",
+  {nome: "ISERNIA",sigla: "IS"},
-  "MACERATA",
+  {nome: "LA SPEZIA",sigla: "SP"},
-  "MANTOVA",
+  {nome: "L'AQUILA",sigla: "AQ"},
-  "MASSA-CARRARA",
+  {nome: "LATINA",sigla: "LT"},
-  "MATERA",
+  {nome: "LECCE",sigla: "LE"},
-  "MESSINA",
+  {nome: "LECCO",sigla: "LC"},
-  "MILANO",
+  {nome: "LIVORNO",sigla: "LI"},
-  "MODENA",
+  {nome: "LODI",sigla: "LO"},
-  "MONZA E DELLA BRIANZA",
+  {nome: "LUCCA",sigla: "LU"},
-  "NAPOLI",
+  {nome: "MACERATA",sigla: "MC"},
-  "NOVARA",
+  {nome: "MANTOVA",sigla: "MN"},
-  "NUORO",
+  {nome: "MASSA-CARRARA",sigla: "MS"},
-  "OLBIA-TEMPIO",
+  {nome: "MATERA",sigla: "MT"},
-  "ORISTANO",
+  {nome: "MESSINA",sigla: "ME"},
-  "PADOVA",
+  {nome: "MILANO",sigla: "MI"},
-  "PALERMO",
+  {nome: "MODENA",sigla: "MO"},
-  "PARMA",
+  {nome: "MONZA E DELLA BRIANZA",sigla: "MB"},
-  "PAVIA",
+  {nome: "NAPOLI",sigla: "NA"},
-  "PERUGIA",
+  {nome: "NOVARA",sigla: "NO"},
-  "PESARO E URBINO",
+  {nome: "NUORO",sigla: "NU"},
-  "PESCARA",
+  {nome: "OLBIA-TEMPIO",sigla: "OT"},
-  "PIACENZA",
+  {nome: "ORISTANO",sigla: "OR"},
-  "PISA",
+  {nome: "PADOVA",sigla: "PD"},
-  "PISTOIA",
+  {nome: "PALERMO",sigla: "PA"},
-  "PORDENONE",
+  {nome: "PARMA",sigla: "PR"},
-  "POTENZA",
+  {nome: "PAVIA",sigla: "PV"},
-  "PRATO",
+  {nome: "PERUGIA",sigla: "PG"},
-  "RAGUSA",
+  {nome: "PESARO E URBINO",sigla: "PU"},
-  "RAVENNA",
+  {nome: "PESCARA",sigla: "PE"},
-  "REGGIO CALABRIA",
+  {nome: "PIACENZA",sigla: "PC"},
-  "REGGIO EMILIA",
+  {nome: "PISA",sigla: "PI"},
-  "RIETI",
+  {nome: "PISTOIA",sigla: "PT"},
-  "RIMINI",
+  {nome: "PORDENONE",sigla: "PN"},
-  "ROMA",
+  {nome: "POTENZA",sigla: "PZ"},
-  "ROVIGO",
+  {nome: "PRATO",sigla: "PO"},
-  "SALERNO",
+  {nome: "RAGUSA",sigla: "RG"},
-  "MEDIO CAMPIDANO",
+  {nome: "RAVENNA",sigla: "RA"},
-  "SASSARI",
+  {nome: "REGGIO CALABRIA",sigla: "RC"},
-  "SAVONA",
+  {nome: "REGGIO EMILIA",sigla: "RE"},
-  "SIENA",
+  {nome: "RIETI",sigla: "RI"},
-  "SIRACUSA",
+  {nome: "RIMINI",sigla: "RN"},
-  "SONDRIO",
+  {nome: "ROMA",sigla: "RM"},
-  "TARANTO",
+  {nome: "ROVIGO",sigla: "RO"},
-  "TERAMO",
+  {nome: "SALERNO",sigla: "SA"},
-  "TERNI",
+  {nome: "MEDIO CAMPIDANO",sigla: "VS"},
-  "TORINO",
+  {nome: "SASSARI",sigla: "SS"},
-  "OGLIASTRA",
+  {nome: "SAVONA",sigla: "SV"},
-  "TRAPANI",
+  {nome: "SIENA",sigla: "SI"},
-  "TRENTO",
+  {nome: "SIRACUSA",sigla: "SR"},
-  "TREVISO",
+  {nome: "SONDRIO",sigla: "SO"},
-  "TRIESTE",
+  {nome: "TARANTO",sigla: "TA"},
-  "UDINE",
+  {nome: "TERAMO",sigla: "TE"},
-  "VARESE",
+  {nome: "TERNI",sigla: "TR"},
-  "VENEZIA",
+  {nome: "TORINO",sigla: "TO"},
-  "VERBANO-CUSIO-OSSOLA",
+  {nome: "OGLIASTRA",sigla: "OG"},
-  "VERCELLI",
+  {nome: "TRAPANI",sigla: "TP"},
-  "VERONA",
+  {nome: "TRENTO",sigla: "TN"},
-  "VIBO VALENTIA",
+  {nome: "TREVISO",sigla: "TV"},
-  "VICENZA",
+  {nome: "TRIESTE",sigla: "TS"},
-  "VITERBO",
+  {nome: "UDINE",sigla: "UD"},
+  {nome: "VARESE",sigla: "VA"},
+  {nome: "VENEZIA",sigla: "VE"},
+  {nome: "VERBANO-CUSIO-OSSOLA",sigla: "VB"},
+  {nome: "VERCELLI",sigla: "VC"},
+  {nome: "VERONA",sigla: "VR"},
+  {nome: "VIBO VALENTIA",sigla: "VV"},
+  {nome: "VICENZA",sigla: "VI"},
+  {nome: "VITERBO",sigla: "VT"}
 ];

apps/infoalloggi/src/lib/form_utils.ts

@@ -1,8 +1,17 @@
+import dynamic from "next/dynamic";
 import type { z } from "zod/v4";
 import type { ListOption } from "~/components/custom_ui/multiselect";
 import { getComuneFromIndex } from "~/i18n/comuni";
 import { searchNazioneByIndex } from "~/i18n/nazioni";
 
+export const FormDebug: React.ElementType =
+	process.env.NODE_ENV === "development"
+		? dynamic(
+				() => import("@hookform/devtools").then((module) => module.DevTool),
+				{ ssr: false },
+			)
+		: () => null; // Return null component in production
+
 export const getComuneFieldValue = (
 	fieldValue: string,
 	comuni_options: string[],
@@ -183,8 +192,8 @@ export const checkFiscalCodeValidity = ({
 		gen !== codiceFiscale.slice(0, 15) &&
 		!(codiceFiscale in getAlternativeCF(gen))
 	) {
-		console.log("gen", gen);
+		//console.log("gen", gen);
-		console.log("codiceFiscale", codiceFiscale);
+		//console.log("codiceFiscale", codiceFiscale);
 		console.log("alternative", getAlternativeCF(gen));
 		refinementContext.issues.push({
 			code: "custom",