Refactor AnnuncioActions and Interactions components for improved layout and structure

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

@@ -5,7 +5,6 @@ import {
   ChevronsUpDown,
   CircleCheck,
   ClipboardPaste,
-  Cog,
   ExternalLink,
   FolderKanban,
   Pen,
@@ -90,7 +89,7 @@ export const AnnuncioActions = () => {
 
   if ((!isAdmin && data.open_contatti_at == null) || isAdmin) {
     return (
-      <div className="flex w-full flex-wrap justify-start gap-3 sm:justify-end">
+      <div className="flex w-full max-w-fit flex-wrap justify-start gap-3 sm:justify-end">
         {isAdmin && data.user_confirmed_at != null && <AdminLavoraConferma />}
         {isAdmin && data.accettato_conferma_at != null && (
           <>
@@ -102,48 +101,49 @@ export const AnnuncioActions = () => {
                 target="_blank"
               >
                 <Button className="flex items-center gap-2">
-                  <FolderKanban /> Apri in gestionale
+                  <FolderKanban className="size-5" /> Gestionale
                 </Button>
               </Link>
             )}
           </>
         )}
         {isAdmin && (
-          <Link
+          <>
-            href={`/area-riservata/admin/edit-annuncio/${annuncioId}`}
+            <Link
-            target="_blank"
+              href={`/area-riservata/admin/edit-annuncio/${annuncioId}`}
-          >
+              target="_blank"
-            <Button
-              aria-label="Edit Annuncio"
-              variant="secondary"
-              className="flex w-full items-center gap-2"
-              size="sm"
             >
-              <Cog className="size-6" /> Modifica
+              <Button
-            </Button>
+                aria-label="Edit Annuncio"
-          </Link>
+                variant="secondary"
-        )}
+                className="flex w-full items-center gap-2"
+                size="sm"
+              >
+                <Wrench className="size-6" />
+              </Button>
+            </Link>
 
-        <Confirm
+            <Confirm
-          title="Elimina annuncio"
+              title="Elimina annuncio"
-          description="Sei sicuro di voler eliminare l'annuncio?"
+              description="Sei sicuro di voler eliminare l'annuncio?"
-          onConfirm={() => {
+              onConfirm={() => {
-            mutate({
+                mutate({
-              servizioId,
+                  servizioId,
-              annuncioId,
+                  annuncioId,
-            });
+                });
-          }}
+              }}
-        >
+            >
-          <Button
+              <Button
-            aria-label="Delete Annuncio"
+                aria-label="Delete Annuncio"
-            variant="secondary"
+                variant="destructive"
-            className="flex items-center gap-2"
+                className="flex items-center gap-2"
-            size="sm"
+                size="sm"
-          >
+              >
-            <Trash2 className="size-6" />
+                <Trash2 className="size-6" />
-            Elimina
+              </Button>
-          </Button>
+            </Confirm>
-        </Confirm>
+          </>
+        )}
       </div>
     );
   }
@@ -152,8 +152,8 @@ export const AnnuncioActions = () => {
 
 const ContrattoImportSchema = z.object({
   gestionale_id: z.number().nullable(),
-  contratto_decorrenza: z.date().nullable(),
+  contratto_decorrenza: z.string().nullable(),
-  contratto_scadenza: z.date().nullable(),
+  contratto_scadenza: z.string().nullable(),
   contratto_tipo: z
     .enum([
       "Transitorio",
@@ -167,7 +167,14 @@ const ContrattoImportSchema = z.object({
     .nullable(),
 });
 
-type ContrattoImportObj = z.infer<typeof ContrattoImportSchema>;
+interface ContrattoImportObj
+  extends Omit<
+    z.infer<typeof ContrattoImportSchema>,
+    "contratto_decorrenza" | "contratto_scadenza"
+  > {
+  contratto_decorrenza: Date | null;
+  contratto_scadenza: Date | null;
+}
 
 const parseContrattoImport = (ingest: string) => {
   let parsedJson: unknown;
@@ -181,7 +188,15 @@ const parseContrattoImport = (ingest: string) => {
   }
   const parsed = ContrattoImportSchema.safeParse(parsedJson);
   if (parsed.success) {
-    return parsed.data;
+    return {
+      ...parsed.data,
+      contratto_decorrenza: parsed.data.contratto_decorrenza
+        ? new Date(parsed.data.contratto_decorrenza)
+        : null,
+      contratto_scadenza: parsed.data.contratto_scadenza
+        ? new Date(parsed.data.contratto_scadenza)
+        : null,
+    };
   } else {
     console.error("Invalid format:", parsed.error);
     return undefined;
@@ -431,19 +446,19 @@ const AdminContratto = () => {
     <Credenza open={open} onOpenChange={setOpen}>
       <CredenzaTrigger asChild>
         <Button
-          variant="secondary"
+          variant={data.doc_contratto_added ? "success" : "secondary"}
           className="flex w-fit items-center gap-2"
           aria-label="Open Contratto Section"
         >
           {data.doc_contratto_added ? (
-            <CircleCheck className="size-7" />
+            <CircleCheck className="size-6" />
           ) : (
-            <Wrench className="size-7" />
+            <Wrench className="size-6" />
           )}
-          Sezione Contratto
+          Contratto
         </Button>
       </CredenzaTrigger>
-      <CredenzaContent className="max-h-[90vh] max-w-4xl px-3">
+      <CredenzaContent className="max-h-[90vh] max-w-4xl px-3 sm:max-w-5xl">
         <CredenzaHeader>
           <CredenzaTitle>Sezione Contratto</CredenzaTitle>
           <CredenzaDescription className="sr-only">
@@ -535,7 +550,7 @@ const ContrattoSection = ({
                 setSelectedDoc(null);
               }}
             >
-              <Trash2 /> Reset
+              <Trash2 className="size-6" /> Reset
             </Button>
           </div>
         )}
@@ -626,7 +641,7 @@ const RicevutaSection = ({
                 setSelectedDoc(null);
               }}
             >
-              <Trash2 /> Reset
+              <Trash2 className="size-6" /> Reset
             </Button>
           </div>
         )}
@@ -691,16 +706,16 @@ const AdminLavoraConferma = () => {
     <Credenza open={open} onOpenChange={setOpen}>
       <CredenzaTrigger asChild>
         <Button
-          variant="secondary"
+          variant={data.hasConfermaAdmin ? "success" : "secondary"}
           className="flex w-fit items-center gap-2"
           aria-label="Open Lavora Conferma Section"
         >
           {data.hasConfermaAdmin ? (
-            <CircleCheck className="size-7" />
+            <CircleCheck className="size-6" />
           ) : (
-            <Wrench className="size-7" />
+            <Wrench className="size-6" />
           )}
-          Lavora conferma
+          Conferma
         </Button>
       </CredenzaTrigger>
       <CredenzaContent className="max-h-[90vh] w-full px-3 sm:max-w-4xl">

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

@@ -45,7 +45,7 @@ export const Interactions = () => {
   const { data, annuncioId } = useServizioAnnuncio();
 
   return (
-    <>
+    <div className="flex flex-wrap gap-3">
       <ContattiProprietarioModal />
       {data.open_contatti_at !== null && data.user_confirmed_at == null && (
         <AnnuncioConfirm />
@@ -195,7 +195,7 @@ export const Interactions = () => {
             </div>
           </div>
         )}
-    </>
+    </div>
   );
 };