eminuxCRM/app/views/reports/index.html.erb

<div class="space-y-6">
  <h1 class="text-xl font-semibold tracking-tight md:text-2xl">Report</h1>

  <section class="rounded-xl border border-zinc-200 bg-white p-5 text-zinc-900 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100">
    <h2 class="text-lg font-semibold">Funnel</h2>
    <div class="mt-4 overflow-x-auto">
      <table class="min-w-full text-sm text-zinc-900 dark:text-zinc-100">
        <thead>
          <tr class="text-left text-xs uppercase tracking-wide text-zinc-500">
            <th class="py-2">Stage</th>
            <th>In questo stage</th>
            <th>Da qui in poi</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
          <% @funnel[:funnel].each do |step| %>
            <tr>
              <td class="py-2"><%= step[:label] %></td>
              <td class="font-semibold"><%= step[:current] %></td>
              <td><%= step[:reached] %></td>
            </tr>
          <% end %>
          <% lost = @funnel[:stages].find { |s| s[:stage] == "lost" } %>
          <% if lost %>
            <tr>
              <td class="py-2"><%= lost[:label] %></td>
              <td class="font-semibold"><%= lost[:count] %></td>
              <td>—</td>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>
    <p class="mt-3 text-xs text-zinc-500">In questo stage = foto attuale. Da qui in poi = stage attuale + successivi, esclusi i persi.</p>
    <div class="mt-4 space-y-1 text-sm text-zinc-600 dark:text-zinc-300">
      <% @funnel[:funnel].each do |step| %>
        <% if step[:conversion_label] %>
          <div><%= step[:conversion_label] %> <strong class="text-zinc-900 dark:text-zinc-50">(<%= step[:rate] %>%)</strong></div>
        <% end %>
      <% end %>
    </div>
  </section>

  <section class="rounded-xl border border-zinc-200 bg-white p-5 text-zinc-900 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100">
    <h2 class="text-lg font-semibold">Lead source</h2>
    <div class="mt-3 <%= table_wrap_class %>">
      <table class="min-w-full text-sm text-zinc-900 dark:text-zinc-100">
        <thead>
          <tr class="text-left text-xs uppercase tracking-wide text-zinc-500">
            <th class="py-2">Fonte</th>
            <th>Lead</th>
            <th>Opp.</th>
            <th>Clienti</th>
            <th>Conv.</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
          <% @lead_sources.each do |row| %>
            <tr>
              <td class="py-2"><%= row[:label] %></td>
              <td><%= row[:leads] %></td>
              <td><%= row[:opportunities] %></td>
              <td><%= row[:customers] %></td>
              <td><%= row[:conversion_rate] %>%</td>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>
  </section>

  <div class="grid gap-6 lg:grid-cols-2">
    <section class="rounded-xl border border-zinc-200 bg-white p-5 text-zinc-900 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100">
      <h2 class="text-lg font-semibold">Won / Lost per mese</h2>
      <div class="mt-3 <%= table_wrap_class %>">
        <table class="min-w-full text-sm text-zinc-900 dark:text-zinc-100">
          <thead>
            <tr class="text-left text-xs uppercase tracking-wide text-zinc-500">
              <th class="py-2">Mese</th>
              <th>Won</th>
              <th>Lost</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
            <% @won_lost.each do |row| %>
              <tr>
                <td class="py-2"><%= l(row[:month], format: "%B %Y") %></td>
                <td><%= row[:won] %></td>
                <td><%= row[:lost] %></td>
              </tr>
            <% end %>
          </tbody>
        </table>
      </div>
    </section>

    <section class="rounded-xl border border-zinc-200 bg-white p-5 text-zinc-900 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100">
      <h2 class="text-lg font-semibold">Lost reasons</h2>
      <ul class="mt-3 space-y-2 text-sm text-zinc-900 dark:text-zinc-100">
        <% @lost_reasons.each do |row| %>
          <li class="flex justify-between gap-3"><span><%= row[:label] %></span><strong><%= row[:count] %></strong></li>
        <% end %>
        <% if @lost_reasons.blank? %><li class="text-zinc-500">Nessun dato</li><% end %>
      </ul>
    </section>
  </div>

  <section class="rounded-xl border border-zinc-200 bg-white p-5 text-zinc-900 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100">
    <h2 class="text-lg font-semibold">Sales owner</h2>
    <div class="mt-3 <%= table_wrap_class %>">
      <table class="min-w-full text-sm text-zinc-900 dark:text-zinc-100">
        <thead>
          <tr class="text-left text-xs uppercase tracking-wide text-zinc-500">
            <th class="py-2">Utente</th>
            <th>Aperte</th>
            <th>Valore aperte</th>
            <th>Vinte</th>
            <th>Valore vinte</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
          <% @sales_owners.each do |row| %>
            <tr>
              <td class="py-2"><%= row[:user].full_name %></td>
              <td><%= row[:open_count] %></td>
              <td><%= format_money(row[:open_value]) %></td>
              <td><%= row[:won_count] %></td>
              <td><%= format_money(row[:won_value]) %></td>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>
  </section>

  <section class="rounded-xl border border-zinc-200 bg-white p-5 text-zinc-900 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100">
    <h2 class="text-lg font-semibold">Revenue (WON per mese)</h2>
    <ul class="mt-3 space-y-2 text-sm text-zinc-900 dark:text-zinc-100">
      <% @revenue.each do |row| %>
        <li class="flex justify-between gap-3"><span><%= l(row[:month], format: "%B %Y") %></span><strong><%= format_money(row[:value]) %></strong></li>
      <% end %>
      <% if @revenue.blank? %><li class="text-zinc-500">Nessun dato</li><% end %>
    </ul>
  </section>
</div>