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

@@ -1,12 +1,27 @@
 <div class="space-y-4">
-  <div class="flex items-center justify-between">
-    <h1 class="text-2xl font-semibold">Opportunità</h1>
-    <div class="flex gap-2">
-      <%= link_to "Export CSV", opportunities_path(format: :csv), class: btn_secondary %>
-      <%= link_to "Nuova", new_opportunity_path, class: btn_primary %>
+  <div class="flex flex-wrap items-center justify-between gap-3">
+    <h1 class="text-xl font-semibold md:text-2xl">Opportunità</h1>
+    <div class="flex w-full flex-wrap gap-2 sm:w-auto">
+      <%= link_to "Export CSV", opportunities_path(format: :csv), class: "#{btn_secondary} flex-1 sm:flex-none" %>
+      <%= link_to "Nuova", new_opportunity_path, class: "#{btn_primary} flex-1 sm:flex-none" %>
     </div>
   </div>
-  <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">
+  <div class="space-y-2 md:hidden">
+    <% @opportunities.each do |opp| %>
+      <%= link_to opp.organization, 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"><%= opp.organization.name %></div>
+            <div class="mt-0.5 text-sm text-zinc-500"><%= opp.name %></div>
+          </div>
+          <%= stage_badge(opp.pipeline_stage) %>
+        </div>
+        <div class="mt-2 text-sm text-zinc-600 dark:text-zinc-300"><%= format_money(opp.estimated_value) %> · <%= opp.assigned_user&.full_name || "—" %></div>
+      <% end %>
+    <% end %>
+  </div>
+  <div class="hidden <%= card_class %> md:block">
+    <div class="<%= table_wrap_class %>">
     <table class="<%= table_class %>">
       <thead class="bg-zinc-50 text-left text-xs uppercase text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
         <tr><th class="px-4 py-3">Organizzazione</th><th class="px-4 py-3">Nome</th><th class="px-4 py-3">Stage</th><th class="px-4 py-3">Valore</th><th class="px-4 py-3">Owner</th></tr>
@@ -22,7 +37,8 @@
           </tr>
         <% end %>
       </tbody>
-    </table>
+      </table>
+    </div>
   </div>
   <%== pagy_nav(@pagy) if @pagy.pages > 1 %>
 </div>