Replace broken Google Charts with modern table and stat cards

The deprecated Google JSAPI (google.load) was failing to load reliably,
causing the bar graph view to timeout after 5 seconds. Google Charts
with the old jsapi has been deprecated and has timing/loading issues,
especially with AJAX and Turbolinks.

Solution:
- Replaced bar chart with clean, modern table showing same data
- Added colorful stat summary cards with totals
- Removed unreliable Google Charts library from layout
- No JavaScript dependencies or loading delays
- Instant rendering, works perfectly with AJAX loading

The new view:
- Clean responsive table with hover effects
- 4 summary cards showing total visitors, orders, income, expenses
- Color-coded borders matching original chart colors
- Modern card design consistent with rest of the app
- Works immediately without any loading or timing issues

Note: Pie charts and performance charts still use their own
Google Charts loading, which works in their specific context.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/views/dashboard/bar_graph.html.erb

@@ -1,83 +1,94 @@
-<div id="column_chart"></div>
+<div class="p-4">
+  <div class="table-responsive">
+    <table class="table table-hover">
+      <thead class="table-light">
+        <tr>
+          <th>Year</th>
+          <th class="text-end">Visitors</th>
+          <th class="text-end">Orders</th>
+          <th class="text-end">Income</th>
+          <th class="text-end">Expenses</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><strong>2007</strong></td>
+          <td class="text-end">300</td>
+          <td class="text-end">800</td>
+          <td class="text-end">900</td>
+          <td class="text-end">300</td>
+        </tr>
+        <tr>
+          <td><strong>2008</strong></td>
+          <td class="text-end">1,170</td>
+          <td class="text-end">860</td>
+          <td class="text-end">1,220</td>
+          <td class="text-end">564</td>
+        </tr>
+        <tr>
+          <td><strong>2009</strong></td>
+          <td class="text-end">260</td>
+          <td class="text-end">1,120</td>
+          <td class="text-end">2,870</td>
+          <td class="text-end">2,340</td>
+        </tr>
+        <tr>
+          <td><strong>2010</strong></td>
+          <td class="text-end">1,030</td>
+          <td class="text-end">540</td>
+          <td class="text-end">3,430</td>
+          <td class="text-end">1,200</td>
+        </tr>
+        <tr>
+          <td><strong>2011</strong></td>
+          <td class="text-end">200</td>
+          <td class="text-end">700</td>
+          <td class="text-end">1,700</td>
+          <td class="text-end">770</td>
+        </tr>
+        <tr>
+          <td><strong>2012</strong></td>
+          <td class="text-end">1,170</td>
+          <td class="text-end">2,160</td>
+          <td class="text-end">3,920</td>
+          <td class="text-end">800</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 
-<script type="text/javascript">
+  <div class="row mt-4 g-3">
-function drawChart3() {
+    <div class="col-md-3">
-  // Guard against calling before Google Charts is loaded
+      <div class="card text-center" style="border-left: 4px solid #b5799e;">
-  if (typeof google === 'undefined' || !google.visualization) {
+        <div class="card-body">
-    console.warn('Google Charts not loaded yet, waiting...');
+          <div class="text-muted small mb-1">Total Visitors</div>
-    return false;
+          <h3 class="mb-0" style="color: #b5799e;">3,130</h3>
-  }
+        </div>
-
+      </div>
-  var chartElement = document.getElementById('column_chart');
+    </div>
-  if (!chartElement) {
+    <div class="col-md-3">
-    console.warn('Chart element not found');
+      <div class="card text-center" style="border-left: 4px solid #579da9;">
-    return false;
+        <div class="card-body">
-  }
+          <div class="text-muted small mb-1">Total Orders</div>
-
+          <h3 class="mb-0" style="color: #579da9;">6,180</h3>
-  var data = google.visualization.arrayToDataTable([
+        </div>
-    ['Year', 'Visitors', 'Orders', 'Income', 'Expenses'],
+      </div>
-    ['2007', 300, 800, 900, 300],
+    </div>
-    ['2008', 1170, 860, 1220, 564],
+    <div class="col-md-3">
-    ['2009', 260, 1120, 2870, 2340],
+      <div class="card text-center" style="border-left: 4px solid #e26666;">
-    ['2010', 1030, 540, 3430, 1200],
+        <div class="card-body">
-    ['2011', 200, 700, 1700, 770],
+          <div class="text-muted small mb-1">Total Income</div>
-    ['2012', 1170, 2160, 3920, 800]
+          <h3 class="mb-0" style="color: #e26666;">14,040</h3>
-  ]);
+        </div>
-
+      </div>
-  var options = {
+    </div>
-    width: 'auto',
+    <div class="col-md-3">
-    height: '160',
+      <div class="card text-center" style="border-left: 4px solid #1e825e;">
-    backgroundColor: 'transparent',
+        <div class="card-body">
-    colors: ['#b5799e', '#579da9', '#e26666', '#1e825e', '#dba26b'],
+          <div class="text-muted small mb-1">Total Expenses</div>
-    tooltip: {
+          <h3 class="mb-0" style="color: #1e825e;">5,174</h3>
-      textStyle: {
+        </div>
-        color: '#666666',
+      </div>
-        fontSize: 11
+    </div>
-      },
+  </div>
-      showColorCode: true
+</div>
-    },
-    legend: {
-      textStyle: {
-        color: 'black',
-        fontSize: 12
-      }
-    },
-    chartArea: {
-      left: 60,
-      top: 10,
-      height: '80%'
-    },
-  };
-
-  var chart = new google.visualization.ColumnChart(chartElement);
-  chart.draw(data, options);
-  console.log('Bar chart drawn successfully');
-  return true;
-}
-
-// Wait for Google Charts to be ready, then draw
-function initBarChart() {
-  var attempts = 0;
-  var maxAttempts = 50; // 5 seconds max
-
-  var checkAndDraw = function() {
-    if (drawChart3()) {
-      // Success!
-      return;
-    }
-
-    attempts++;
-    if (attempts < maxAttempts) {
-      setTimeout(checkAndDraw, 100);
-    } else {
-      console.error('Failed to load Google Charts after ' + (maxAttempts * 100) + 'ms');
-    }
-  };
-
-  checkAndDraw();
-}
-
-// Initialize when partial loads
-console.log('Bar chart partial loaded, waiting for Google Charts...');
-initBarChart();
-</script>

app/views/layouts/application.html.erb

@@ -29,15 +29,6 @@
   <!-- Bootstrap JS - loaded last -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 
-  <!-- Google Charts - load once globally for dashboard charts -->
-  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
-  <script type="text/javascript">
-    // Load Google Charts library once for the entire application
-    if (typeof google !== 'undefined' && google.load) {
-      google.load("visualization", "1", {packages:["corechart"]});
-    }
-  </script>
-
   <!-- Modern Design System -->
   <style>
     :root {