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/organizations/index.html.erb

@@ -1,10 +1,10 @@
 <div class="space-y-4">
   <div class="flex flex-wrap items-center justify-between gap-3">
-    <h1 class="text-2xl font-semibold">Organizzazioni</h1>
-    <div class="flex gap-2">
-      <%= link_to "Export CSV", organizations_path(request.query_parameters.merge(format: :csv)), class: btn_secondary %>
-      <%= link_to "Import CSV", new_import_path, class: btn_secondary %>
-      <%= link_to "Nuova", new_organization_path, class: btn_primary %>
+    <h1 class="text-xl font-semibold md:text-2xl">Organizzazioni</h1>
+    <div class="flex w-full flex-wrap gap-2 sm:w-auto">
+      <%= link_to "Export CSV", organizations_path(request.query_parameters.merge(format: :csv)), class: "#{btn_secondary} flex-1 sm:flex-none" %>
+      <%= link_to "Import CSV", new_import_path, class: "#{btn_secondary} flex-1 sm:flex-none" %>
+      <%= link_to "Nuova", new_organization_path, class: "#{btn_primary} flex-1 sm:flex-none" %>
     </div>
   </div>
 
@@ -20,7 +20,7 @@
       <%= text_field_tag :country, params[:country], placeholder: "Paese", class: input_class %>
       <%= text_field_tag :region, params[:region], placeholder: "Regione", class: input_class %>
       <%= select_tag :customer, options_for_select([["Cliente/non cliente", ""], ["Solo clienti", "yes"], ["Non clienti", "no"]], params[:customer]), class: input_class %>
-      <label class="flex items-center gap-2 text-sm text-zinc-700 dark:text-zinc-300">
+      <label class="flex min-h-11 items-center gap-2 text-sm text-zinc-700 dark:text-zinc-300">
         <%= check_box_tag :overdue_tasks, "1", params[:overdue_tasks] == "1" %>
         Task scaduti
       </label>
@@ -29,45 +29,70 @@
       <%= select_tag :ab_variant, options_for_catalog(Catalog::AB_VARIANTS, params[:ab_variant]), include_blank: "Test A/B", class: input_class %>
       <%= select_tag :sort, options_for_select([["Lista campagna", "lista"], ["Aggiornate", "updated"], ["Nome", "name"], ["Create", "created"]], params[:sort]), class: input_class %>
     </div>
-    <div class="mt-3 flex gap-2">
-      <%= submit_tag "Filtra", class: btn_primary %>
-      <%= link_to "Reset", organizations_path, class: btn_secondary %>
+    <div class="mt-3 flex flex-wrap gap-2">
+      <%= submit_tag "Filtra", class: "#{btn_primary} flex-1 sm:flex-none" %>
+      <%= link_to "Reset", organizations_path, class: "#{btn_secondary} flex-1 sm:flex-none" %>
     </div>
   <% end %>
 
-  <div class="overflow-hidden rounded-xl border border-zinc-200 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100">
-    <table class="min-w-full divide-y divide-zinc-100 dark:divide-zinc-800 text-sm">
-      <thead class="bg-zinc-50 text-left text-xs uppercase tracking-wide text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
-        <tr>
-          <th class="px-4 py-3">N.</th>
-          <th class="px-4 py-3">Organizzazione</th>
-          <th class="px-4 py-3">Regione</th>
-          <th class="px-4 py-3">M/F</th>
-          <th class="px-4 py-3">Streaming</th>
-          <th class="px-4 py-3">Test</th>
-          <th class="px-4 py-3">Stage</th>
-          <th class="px-4 py-3">Invio</th>
-        </tr>
-      </thead>
-      <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
-        <% @organizations.each do |org| %>
-          <tr class="hover:bg-zinc-50 dark:hover:bg-zinc-800/80">
-            <td class="px-4 py-3 tabular-nums text-zinc-500"><%= org.list_position || "—" %></td>
-            <td class="px-4 py-3">
-              <%= link_to org.name, org, class: "font-medium text-zinc-900 hover:underline dark:text-zinc-100" %>
-              <div class="text-xs text-slate-500"><%= org.email.presence || org.organization_type_label %></div>
-            </td>
-            <td class="px-4 py-3"><%= [org.region, org.province].compact_blank.join(" · ").presence || "—" %></td>
-            <td class="px-4 py-3"><%= org.team_gender_label.presence || "—" %></td>
-            <td class="px-4 py-3"><%= streaming_badge(org.streaming_status) || "—" %></td>
-            <% opp = org.campaign_opportunity(current_project) %>
-            <td class="px-4 py-3"><%= opp&.ab_variant.presence || "—" %></td>
-            <td class="px-4 py-3"><%= opp ? stage_badge(opp.pipeline_stage) : "—" %></td>
-            <td class="px-4 py-3"><%= opp&.send_status_label.presence || "—" %></td>
+  <div class="space-y-2 md:hidden">
+    <% @organizations.each do |org| %>
+      <% opp = org.campaign_opportunity(current_project) %>
+      <%= link_to org, class: "#{card_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 break-anywhere"><%= org.name %></div>
+            <div class="mt-0.5 text-xs text-zinc-500"><%= [org.list_position, org.region, org.province].compact_blank.join(" · ").presence || "—" %></div>
+          </div>
+          <%= opp ? stage_badge(opp.pipeline_stage) : nil %>
+        </div>
+        <div class="mt-2 flex flex-wrap items-center gap-2 text-xs text-zinc-500">
+          <%= streaming_badge(org.streaming_status) %>
+          <% if opp&.ab_variant.present? %><%= ab_variant_badge(opp.ab_variant) %><% end %>
+          <span><%= opp&.send_status_label.presence || "Invio n/d" %></span>
+        </div>
+      <% end %>
+    <% end %>
+    <% if @organizations.blank? %>
+      <p class="<%= card_class %> p-6 text-sm text-zinc-500">Nessuna organizzazione.</p>
+    <% end %>
+  </div>
+
+  <div class="hidden <%= card_class %> md:block">
+    <div class="<%= table_wrap_class %>">
+      <table class="min-w-full divide-y divide-zinc-100 dark:divide-zinc-800 text-sm">
+        <thead class="bg-zinc-50 text-left text-xs uppercase tracking-wide text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
+          <tr>
+            <th class="px-4 py-3">N.</th>
+            <th class="px-4 py-3">Organizzazione</th>
+            <th class="px-4 py-3">Regione</th>
+            <th class="px-4 py-3">M/F</th>
+            <th class="px-4 py-3">Streaming</th>
+            <th class="px-4 py-3">Test</th>
+            <th class="px-4 py-3">Stage</th>
+            <th class="px-4 py-3">Invio</th>
           </tr>
-        <% end %>
-      </tbody>
-    </table>
+        </thead>
+        <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
+          <% @organizations.each do |org| %>
+            <tr class="hover:bg-zinc-50 dark:hover:bg-zinc-800/80">
+              <td class="px-4 py-3 tabular-nums text-zinc-500"><%= org.list_position || "—" %></td>
+              <td class="px-4 py-3">
+                <%= link_to org.name, org, class: "font-medium text-zinc-900 hover:underline dark:text-zinc-100" %>
+                <div class="text-xs text-slate-500"><%= org.email.presence || org.organization_type_label %></div>
+              </td>
+              <td class="px-4 py-3"><%= [org.region, org.province].compact_blank.join(" · ").presence || "—" %></td>
+              <td class="px-4 py-3"><%= org.team_gender_label.presence || "—" %></td>
+              <td class="px-4 py-3"><%= streaming_badge(org.streaming_status) || "—" %></td>
+              <% opp = org.campaign_opportunity(current_project) %>
+              <td class="px-4 py-3"><%= opp&.ab_variant.presence || "—" %></td>
+              <td class="px-4 py-3"><%= opp ? stage_badge(opp.pipeline_stage) : "—" %></td>
+              <td class="px-4 py-3"><%= opp&.send_status_label.presence || "—" %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
   </div>
   <%== pagy_nav(@pagy) if @pagy.pages > 1 %>
 </div>