Rende il CRM comodo da usare anche da cellulare.

Aggiunge navigazione mobile dedicata e trasforma le principali liste operative in layout più leggibili e facili da toccare.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/views/mailings/dashboard.html.erb

@@ -2,15 +2,15 @@
 <%= tag.div class: "space-y-6", data: (refresh ? { controller: "auto-reload", auto_reload_interval_value: 10_000 } : {}) do %>
   <div class="flex flex-wrap items-end justify-between gap-3">
     <div>
-      <h1 class="text-2xl font-semibold tracking-tight">Invii email</h1>
+      <h1 class="text-xl font-semibold tracking-tight md:text-2xl">Invii email</h1>
       <p class="mt-1 text-sm text-zinc-500">Stato delle campagne, prove e invii di massa scaglionati.</p>
     </div>
-    <div class="flex flex-wrap gap-2">
-      <%= link_to "Template", mail_templates_path, class: btn_secondary %>
+    <div class="flex w-full flex-wrap gap-2 sm:w-auto">
+      <%= link_to "Template", mail_templates_path, class: "#{btn_secondary} flex-1 sm:flex-none" %>
       <% if current_user.admin? %>
-        <%= link_to "Account SMTP", mail_identities_path, class: btn_secondary %>
+        <%= link_to "Account SMTP", mail_identities_path, class: "#{btn_secondary} flex-1 sm:flex-none" %>
       <% end %>
-      <%= link_to "Nuovo invio", new_mailing_path, class: btn_primary %>
+      <%= link_to "Nuovo invio", new_mailing_path, class: "#{btn_primary} flex-1 sm:flex-none" %>
     </div>
   </div>
 
@@ -25,7 +25,7 @@
     </div>
   <% end %>
 
-  <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+  <div class="grid grid-cols-2 gap-3 xl:grid-cols-4">
     <div class="<%= card_class %> p-4">
       <div class="text-xs uppercase tracking-wide text-zinc-500">In corso</div>
       <div class="mt-1 text-2xl font-semibold tabular-nums"><%= @active_mailings.size %></div>
@@ -56,11 +56,33 @@
     </section>
   <% end %>
 
-  <div class="overflow-hidden <%= card_class %>">
+  <div class="<%= card_class %>">
     <% if @mailings.empty? %>
       <p class="p-6 text-sm text-zinc-500">Nessun invio. Crea una bozza, fai una prova con dati manuali e poi autorizza l’invio di massa.</p>
     <% else %>
-      <table class="<%= table_class %>">
+      <div class="divide-y divide-zinc-100 dark:divide-zinc-800 md:hidden">
+        <% @mailings.each do |mailing| %>
+          <%= link_to mailing, class: "block p-4 active:bg-zinc-50 dark:active:bg-zinc-800" do %>
+            <div class="flex items-start justify-between gap-3">
+              <div class="min-w-0">
+                <div class="font-semibold"><%= mailing.name %></div>
+                <div class="mt-0.5 text-xs text-zinc-500 break-anywhere"><%= mailing.mail_identity.from_email %></div>
+              </div>
+              <%= mailing_status_badge(mailing.status) %>
+            </div>
+            <div class="mt-3"><%= progress_bar(mailing.progress_percentage) %></div>
+            <div class="mt-2 text-xs text-zinc-500">
+              <%= mailing.sent_count %> inviate · <%= mailing.pending_count %> in coda
+              <% if mailing.sending? && mailing.next_send_at.present? && mailing.next_send_at > Time.current %>
+                · Riparte <%= l(mailing.next_send_at, format: :short) %>
+              <% end %>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+      <div class="hidden md:block">
+        <div class="<%= table_wrap_class %>">
+          <table class="<%= table_class %>">
         <thead class="border-b border-zinc-100 bg-zinc-50 text-left text-xs font-medium uppercase tracking-wide text-zinc-500 dark:border-zinc-800 dark:bg-zinc-800 dark:text-zinc-400">
           <tr>
             <th class="px-4 py-3">Invio</th>
@@ -107,7 +129,9 @@
             </tr>
           <% end %>
         </tbody>
-      </table>
+          </table>
+        </div>
+      </div>
     <% end %>
   </div>
 <% end %>

app/views/mailings/show.html.erb

@@ -1,7 +1,7 @@
 <%= tag.div class: "space-y-6", data: (@mailing.sending? ? { controller: "auto-reload", auto_reload_interval_value: 10_000 } : {}) do %>
   <div class="flex flex-wrap items-start justify-between gap-3">
-    <div>
-      <h1 class="text-2xl font-semibold tracking-tight"><%= @mailing.name %></h1>
+    <div class="min-w-0">
+      <h1 class="text-xl font-semibold tracking-tight md:text-2xl"><%= @mailing.name %></h1>
       <p class="mt-1 text-sm text-zinc-500">
         <%= mailing_status_badge(@mailing.status) %>
         · <%= @mailing.audience_label %>
@@ -25,8 +25,8 @@
         </p>
       <% end %>
     </div>
-    <div class="flex flex-wrap gap-2">
-      <%= link_to "Cruscotto invii", dashboard_mailings_path, class: btn_secondary %>
+    <div class="flex w-full flex-wrap gap-2 sm:w-auto">
+      <%= link_to "Cruscotto invii", dashboard_mailings_path, class: "#{btn_secondary} flex-1 sm:flex-none" %>
       <% if @mailing.editable? %>
         <%= link_to "Modifica contenuto", edit_mailing_path(@mailing), class: btn_secondary %>
         <%= button_to "Aggiorna lista", refresh_recipients_mailing_path(@mailing), method: :post, class: btn_secondary %>
@@ -42,7 +42,7 @@
     <%= render "mailings/progress_card", mailing: @mailing %>
   <% end %>
 
-  <div class="grid gap-4 sm:grid-cols-4">
+  <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
     <div class="<%= card_class %> p-4">
       <div class="text-xs uppercase tracking-wide text-zinc-500">Da inviare</div>
       <div class="mt-1 text-2xl font-semibold"><%= @mailing.pending_count %></div>
@@ -103,68 +103,113 @@
       </div>
 
       <%= form_with url: update_recipients_mailing_path(@mailing), method: :patch do %>
-        <div class="overflow-x-auto" data-controller="check-all">
-          <table class="<%= table_class %>">
-            <thead class="border-b border-zinc-100 bg-zinc-50 text-left text-xs font-medium uppercase tracking-wide text-zinc-500 dark:border-zinc-800 dark:bg-zinc-800 dark:text-zinc-400">
-              <tr>
+        <div data-controller="check-all">
+          <% if @mailing.editable? %>
+            <label class="flex min-h-11 items-center gap-2 border-b border-zinc-100 px-4 py-3 text-sm dark:border-zinc-800">
+              <input type="checkbox" data-check-all-target="source" data-action="check-all#toggle" aria-label="Seleziona tutti">
+              Seleziona tutti
+            </label>
+          <% end %>
+
+          <div class="divide-y divide-zinc-100 dark:divide-zinc-800 md:hidden">
+            <% @recipients.each do |recipient| %>
+              <div class="flex gap-3 p-4 <%= "opacity-60" unless recipient.email_ok? %>">
                 <% if @mailing.editable? %>
-                  <th class="px-4 py-3">
-                    <input type="checkbox" data-check-all-target="source" data-action="check-all#toggle" aria-label="Seleziona tutti">
-                  </th>
+                  <div class="pt-1">
+                    <% if recipient.email_ok? %>
+                      <%= check_box_tag "pending_ids[]", recipient.id, recipient.pending?,
+                            id: "recipient_#{recipient.id}",
+                            class: "size-5",
+                            data: { check_all_target: "checkbox" } %>
+                    <% else %>
+                      <span class="text-zinc-400">—</span>
+                    <% end %>
+                  </div>
                 <% end %>
-                <th class="px-4 py-3">Organizzazione</th>
-                <th class="px-4 py-3">Email</th>
-                <% if @mailing.ab_test? %>
-                  <th class="px-4 py-3">Test</th>
-                <% end %>
-                <th class="px-4 py-3">Stato</th>
-                <th class="px-4 py-3"></th>
-              </tr>
-            </thead>
-            <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
-              <% @recipients.each do |recipient| %>
-                <tr class="<%= "opacity-60" unless recipient.email_ok? %>">
-                  <% if @mailing.editable? %>
-                    <td class="px-4 py-3">
-                      <% if recipient.email_ok? %>
-                        <%= check_box_tag "pending_ids[]", recipient.id, recipient.pending?,
-                              id: "recipient_#{recipient.id}",
-                              data: { check_all_target: "checkbox" } %>
-                      <% else %>
-                        <span class="text-zinc-400">—</span>
-                      <% end %>
-                    </td>
-                  <% end %>
-                  <td class="px-4 py-3">
+                <div class="min-w-0 flex-1">
+                  <div class="flex flex-wrap items-center gap-2">
                     <%= link_to recipient.organization.name, recipient.organization, class: "font-medium hover:underline" %>
-                    <div class="text-xs text-zinc-500"><%= recipient.contact&.full_name.presence || "Nessun contatto" %></div>
-                  </td>
-                  <td class="px-4 py-3 text-sm">
+                    <%= mailing_recipient_status_badge(recipient.status) %>
+                    <% if @mailing.ab_test? %><%= ab_variant_badge(recipient.ab_variant) %><% end %>
+                  </div>
+                  <div class="mt-1 text-sm break-anywhere text-zinc-600 dark:text-zinc-300">
+                    <%= recipient.contact&.full_name.presence || "Nessun contatto" %>
+                    ·
                     <% if recipient.email_ok? %>
                       <%= recipient.email %>
                     <% else %>
                       <span class="text-rose-700"><%= recipient.email.presence || "manca email" %></span>
                     <% end %>
-                    <% if recipient.skip_reason.present? && !recipient.pending? %>
-                      <div class="text-xs text-zinc-500"><%= recipient.skip_reason %></div>
-                    <% end %>
-                    <% if recipient.error_message.present? %>
-                      <div class="text-xs text-rose-700"><%= recipient.error_message %></div>
-                    <% end %>
-                  </td>
-                  <% if @mailing.ab_test? %>
-                    <td class="px-4 py-3"><%= ab_variant_badge(recipient.ab_variant) || "—" %></td>
+                  </div>
+                  <% if recipient.skip_reason.present? && !recipient.pending? %>
+                    <div class="mt-1 text-xs text-zinc-500"><%= recipient.skip_reason %></div>
                   <% end %>
-                  <td class="px-4 py-3"><%= mailing_recipient_status_badge(recipient.status) %></td>
-                  <td class="px-4 py-3 text-right text-sm">
-                    <% if recipient.email_ok? %>
-                      <%= link_to "Anteprima", mailing_path(@mailing, recipient_id: recipient.id, variant: recipient.ab_variant), class: "text-zinc-700 hover:underline dark:text-zinc-300" %>
+                  <% if recipient.error_message.present? %>
+                    <div class="mt-1 text-xs text-rose-700"><%= recipient.error_message %></div>
+                  <% end %>
+                  <% if recipient.email_ok? %>
+                    <%= link_to "Anteprima", mailing_path(@mailing, recipient_id: recipient.id, variant: recipient.ab_variant), class: "mt-2 inline-block text-sm text-zinc-700 hover:underline dark:text-zinc-300" %>
+                  <% end %>
+                </div>
+              </div>
+            <% end %>
+          </div>
+
+          <div class="hidden md:block">
+            <div class="<%= table_wrap_class %>">
+              <table class="<%= table_class %>">
+                <thead class="border-b border-zinc-100 bg-zinc-50 text-left text-xs font-medium uppercase tracking-wide text-zinc-500 dark:border-zinc-800 dark:bg-zinc-800 dark:text-zinc-400">
+                  <tr>
+                    <th class="px-4 py-3">Organizzazione</th>
+                    <th class="px-4 py-3">Email</th>
+                    <% if @mailing.ab_test? %>
+                      <th class="px-4 py-3">Test</th>
                     <% end %>
-                  </td>
-                </tr>
-              <% end %>
-            </tbody>
-          </table>
+                    <th class="px-4 py-3">Stato</th>
+                    <th class="px-4 py-3"></th>
+                  </tr>
+                </thead>
+                <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
+                  <% @recipients.each do |recipient| %>
+                    <tr class="<%= "opacity-60" unless recipient.email_ok? %>">
+                      <td class="px-4 py-3">
+                        <% if @mailing.editable? && recipient.email_ok? %>
+                          <%= check_box_tag "pending_ids[]", recipient.id, recipient.pending?,
+                                id: "recipient_desktop_#{recipient.id}",
+                                class: "mr-2",
+                                data: { check_all_target: "checkbox" } %>
+                        <% end %>
+                        <%= link_to recipient.organization.name, recipient.organization, class: "font-medium hover:underline" %>
+                        <div class="text-xs text-zinc-500"><%= recipient.contact&.full_name.presence || "Nessun contatto" %></div>
+                      </td>
+                      <td class="px-4 py-3 text-sm">
+                        <% if recipient.email_ok? %>
+                          <%= recipient.email %>
+                        <% else %>
+                          <span class="text-rose-700"><%= recipient.email.presence || "manca email" %></span>
+                        <% end %>
+                        <% if recipient.skip_reason.present? && !recipient.pending? %>
+                          <div class="text-xs text-zinc-500"><%= recipient.skip_reason %></div>
+                        <% end %>
+                        <% if recipient.error_message.present? %>
+                          <div class="text-xs text-rose-700"><%= recipient.error_message %></div>
+                        <% end %>
+                      </td>
+                      <% if @mailing.ab_test? %>
+                        <td class="px-4 py-3"><%= ab_variant_badge(recipient.ab_variant) || "—" %></td>
+                      <% end %>
+                      <td class="px-4 py-3"><%= mailing_recipient_status_badge(recipient.status) %></td>
+                      <td class="px-4 py-3 text-right text-sm">
+                        <% if recipient.email_ok? %>
+                          <%= link_to "Anteprima", mailing_path(@mailing, recipient_id: recipient.id, variant: recipient.ab_variant), class: "text-zinc-700 hover:underline dark:text-zinc-300" %>
+                        <% end %>
+                      </td>
+                    </tr>
+                  <% end %>
+                </tbody>
+              </table>
+            </div>
+          </div>
         </div>
 
         <% if @mailing.editable? %>