dawarich/app/views/stats/_month.html.erb

<!-- Monthly Digest Header -->
<div class="hero bg-gradient-to-r from-primary to-secondary text-primary-content rounded-lg shadow-lg mb-8">
  <div class="hero-content text-center">
    <div class="max-w-md">
      <h1 class="text-5xl font-bold">📍 <%= Date::MONTHNAMES[month] %> <%= year %></h1>
      <p class="py-6">Monthly Digest</p>
    </div>
  </div>
</div>

<div class="stats shadow mx-auto mb-8 w-full">
  <div class="stat place-items-center text-center">
    <div class="stat-title">Distance traveled</div>
    <div class="stat-value"><%= distance_traveled(current_user, stat) %></div>
    <div class="stat-desc"><%= x_than_average_distance(stat, @average_distance) %></div>
  </div>

  <div class="stat place-items-center text-center">
    <div class="stat-title">Active days</div>
    <div class="stat-value text-secondary">
      <%= active_days(stat) %>
    </div>
    <div class="stat-desc text-secondary">
      <%= x_than_previous_active_days(stat, previous_stat) %>
    </div>
  </div>

  <div class="stat place-items-center text-center">
    <div class="stat-title">Countries visited</div>
    <div class="stat-value">
      <%= countries_visited(stat) %>
    </div>
    <div class="stat-desc">
      <%= x_than_prevopis_countries_visited(stat, previous_stat) %>
    </div>
  </div>
</div>

<!-- Map Summary - Full Width -->
<div class="card bg-base-100 shadow-xl mb-8"
     data-controller="stat-page"
     data-api-key="<%= current_user.api_key %>"
     data-year="<%= year %>"
     data-month="<%= month %>">
  <div class="card-body">
    <div class="flex justify-between items-center mb-4">
      <h2 class="card-title">🗺️ Map Summary</h2>
      <div class="flex gap-2">
        <button class="btn btn-sm btn-outline btn-active" data-stat-page-target="heatmapBtn" data-action="click->stat-page#toggleHeatmap">
          🔥 Heatmap
        </button>
        <button class="btn btn-sm btn-outline" data-stat-page-target="pointsBtn" data-action="click->stat-page#togglePoints">
          📍 Points
        </button>
      </div>
    </div>

    <!-- Leaflet Map Container -->
    <div class="w-full h-96 rounded-lg border border-base-300 relative overflow-hidden">
      <div id="monthly-stats-map" data-stat-page-target="map" class="w-full h-full"></div>

      <!-- Loading overlay -->
      <div data-stat-page-target="loading" class="absolute inset-0 bg-base-200 flex items-center justify-center">
        <span class="loading loading-spinner loading-lg text-primary"></span>
      </div>
    </div>

    <!-- Map Stats -->
    <div class="stats grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
      <div class="stat">
        <div class="stat-title text-xs">Most visited</div>
        <div class="stat-value text-sm">Downtown Area</div>
        <div class="stat-desc text-xs">42 visits</div>
      </div>
      <div class="stat">
        <div class="stat-title text-xs">Longest trip</div>
        <div class="stat-value text-sm">156km</div>
        <div class="stat-desc text-xs">Jan 15th</div>
      </div>
      <div class="stat">
        <div class="stat-title text-xs">Total points</div>
        <div class="stat-value text-sm">2,847</div>
        <div class="stat-desc text-xs">tracked locations</div>
      </div>
      <div class="stat">
        <div class="stat-title text-xs">Coverage area</div>
        <div class="stat-value text-sm">45km²</div>
        <div class="stat-desc text-xs">explored</div>
      </div>
    </div>
  </div>
</div>

<!-- Daily Activity Chart -->
<div class="card bg-base-100 shadow-xl mb-8">
  <div class="card-body">
    <h2 class="card-title">📈 Daily Activity</h2>
    <div class="w-full h-48 bg-base-200 rounded-lg p-4 relative">
      <%= column_chart(
          stat.daily_distance.map { |day, distance_meters|
            [day, Stat.convert_distance(distance_meters, current_user.safe_settings.distance_unit).round]
          },
          height: '200px',
          suffix: " #{current_user.safe_settings.distance_unit}",
          xtitle: 'Day',
          ytitle: 'Distance',
          colors: [
            '#570df8', '#f000b8', '#ffea00',
            '#00d084', '#3abff8', '#ff5724',
            '#8e24aa', '#3949ab', '#00897b',
            '#d81b60', '#5e35b1', '#039be5',
            '#43a047', '#f4511e', '#6d4c41',
            '#757575', '#546e7a', '#d32f2f'
          ],
          library: {
            plugins: {
              legend: { display: false }
            },
            scales: {
              x: {
                grid: { color: 'rgba(0,0,0,0.1)' }
              },
              y: {
                grid: { color: 'rgba(0,0,0,0.1)' }
              }
            }
          }
        ) %>
    </div>
    <div class="text-sm opacity-70 text-center mt-2">
      Peak day: <%= peak_day(stat) %> • Quietest week: <%= quietest_week(stat) %>
    </div>
  </div>
</div>

<!-- Top Destinations -->
<div class="card bg-base-100 shadow-xl mb-8">
  <div class="card-body">
    <h2 class="card-title">🏆 Top Destinations</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div class="flex items-center space-x-4 p-4 bg-base-200 rounded-lg">
        <div class="text-2xl">🏢</div>
        <div class="flex-1">
          <div class="font-bold">Downtown Office</div>
          <div class="text-sm opacity-70">42 visits • 8.5 hrs</div>
        </div>
        <div class="badge badge-primary">1st</div>
      </div>
      <div class="flex items-center space-x-4 p-4 bg-base-200 rounded-lg">
        <div class="text-2xl">🏠</div>
        <div class="flex-1">
          <div class="font-bold">Home Area</div>
          <div class="text-sm opacity-70">31 visits • 156 hrs</div>
        </div>
        <div class="badge badge-secondary">2nd</div>
      </div>
      <div class="flex items-center space-x-4 p-4 bg-base-200 rounded-lg">
        <div class="text-2xl">🛒</div>
        <div class="flex-1">
          <div class="font-bold">Shopping District</div>
          <div class="text-sm opacity-70">18 visits • 3.2 hrs</div>
        </div>
        <div class="badge badge-accent">3rd</div>
      </div>
      <div class="flex items-center space-x-4 p-4 bg-base-200 rounded-lg">
        <div class="text-2xl">✈️</div>
        <div class="flex-1">
          <div class="font-bold">Airport</div>
          <div class="text-sm opacity-70">4 visits • 2.1 hrs</div>
        </div>
        <div class="badge badge-neutral">4th</div>
      </div>
    </div>
  </div>
</div>

<!-- Countries & Cities -->
<div class="card bg-base-100 shadow-xl mb-8">
  <div class="card-body">
    <h2 class="card-title">🌍 Countries & Cities</h2>
    <div class="space-y-4">
      <!-- United States -->
      <div class="space-y-2">
        <div class="flex justify-between items-center">
          <span class="font-semibold">🇺🇸 United States</span>
          <span class="text-sm">89% (1,110km)</span>
        </div>
        <progress class="progress progress-primary w-full" value="89" max="100"></progress>
      </div>

      <!-- Canada -->
      <div class="space-y-2">
        <div class="flex justify-between items-center">
          <span class="font-semibold">🇨🇦 Canada</span>
          <span class="text-sm">8% (102km)</span>
        </div>
        <progress class="progress progress-secondary w-full" value="8" max="100"></progress>
      </div>

      <!-- Mexico -->
      <div class="space-y-2">
        <div class="flex justify-between items-center">
          <span class="font-semibold">🇲🇽 Mexico</span>
          <span class="text-sm">3% (35km)</span>
        </div>
        <progress class="progress progress-accent w-full" value="3" max="100"></progress>
      </div>
    </div>

    <div class="divider"></div>

    <div class="flex flex-wrap gap-2">
      <span class="text-sm font-medium">Cities visited:</span>
      <div class="badge badge-outline">San Francisco</div>
      <div class="badge badge-outline">Vancouver</div>
      <div class="badge badge-outline">Oakland</div>
      <div class="badge badge-outline">San Jose</div>
      <div class="badge badge-outline">Berkeley</div>
      <div class="badge badge-outline">Tijuana</div>
      <div class="badge badge-outline">+6 more</div>
    </div>
  </div>
</div>

<!-- Month Highlights -->
<div class="card bg-gradient-to-br from-primary to-secondary text-primary-content shadow-xl">
  <div class="card-body">
    <h2 class="card-title text-white">📸 Month Highlights</h2>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 my-4">
      <div class="stat">
        <div class="stat-title text-white opacity-70">Photos taken</div>
        <div class="stat-value text-white">127</div>
      </div>
      <div class="stat">
        <div class="stat-title text-white opacity-70">Longest trip</div>
        <div class="stat-value text-white">156km</div>
      </div>
      <div class="stat">
        <div class="stat-title text-white opacity-70">New areas</div>
        <div class="stat-value text-white">5</div>
      </div>
      <div class="stat">
        <div class="stat-title text-white opacity-70">Travel time</div>
        <div class="stat-value text-white">28.5h</div>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 my-4">
      <div class="flex items-center space-x-2">
        <span class="text-white">🏃 Walking:</span>
        <span class="font-bold text-white">45km</span>
      </div>
      <div class="flex items-center space-x-2">
        <span class="text-white">🚌 Public transport:</span>
        <span class="font-bold text-white">12km</span>
      </div>
      <div class="flex items-center space-x-2">
        <span class="text-white">🚗 Driving:</span>
        <span class="font-bold text-white">1,190km</span>
      </div>
    </div>

    <div class="alert bg-white bg-opacity-10 border-white border-opacity-20">
      <div>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        <div class="text-white">
          <h3 class="font-bold">💡 Monthly Insights</h3>
          <p class="text-sm">You explored 3 new neighborhoods this month and visited your favorite coffee shop 15 times - that's every other day! ☕</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Action Buttons -->
<div class="flex flex-wrap gap-4 mt-8 justify-center">
  <button class="btn btn-primary">📧 Email This Digest</button>
  <button class="btn btn-secondary">📊 Compare with Previous Month</button>
  <button class="btn btn-accent">📱 Share Stats</button>
  <a href="/stats/<%= year %>" class="btn btn-outline">← Back to <%= year %></a>
</div>