From 991c9b924e8b18fe647ce69c46a0fe6a95a26216 Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Sun, 26 Oct 2025 16:55:45 +0000
Subject: [PATCH] Auto commit: 2025-10-26T16:55:45.058Z

---
 reports.php          | 60 ++++++++++++++++++++++++++++++--------------
 templates/header.php |  1 +
 2 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/reports.php b/reports.php
index 0b74102..c39e0db 100644
--- a/reports.php
+++ b/reports.php
@@ -71,25 +71,7 @@ $overdue_invoices = $invoice_statuses['Overdue'] ?? 0;
                 <i class="bi bi-journal-text"></i> Invoice Status Distribution
             </div>
             <div class="card-body">
-                <div class="progress" style="height: 30px;">
-                    <div class="progress-bar bg-success" role="progressbar" style="width: <?php echo ($paid_invoices / $total_invoices) * 100; ?>%" aria-valuenow="<?php echo $paid_invoices; ?>" aria-valuemin="0" aria-valuemax="<?php echo $total_invoices; ?>">Paid</div>
-                    <div class="progress-bar bg-warning" role="progressbar" style="width: <?php echo ($pending_invoices / $total_invoices) * 100; ?>%" aria-valuenow="<?php echo $pending_invoices; ?>" aria-valuemin="0" aria-valuemax="<?php echo $total_invoices; ?>">Pending</div>
-                    <div class="progress-bar bg-danger" role="progressbar" style="width: <?php echo ($overdue_invoices / $total_invoices) * 100; ?>%" aria-valuenow="<?php echo $overdue_invoices; ?>" aria-valuemin="0" aria-valuemax="<?php echo $total_invoices; ?>">Overdue</div>
-                </div>
-                <div class="d-flex justify-content-around mt-3 text-center">
-                    <div>
-                        <p class="mb-0 fs-5"><?php echo $paid_invoices; ?></p>
-                        <span class="text-success">Paid</span>
-                    </div>
-                    <div>
-                        <p class="mb-0 fs-5"><?php echo $pending_invoices; ?></p>
-                        <span class="text-warning">Pending</span>
-                    </div>
-                    <div>
-                        <p class="mb-0 fs-5"><?php echo $overdue_invoices; ?></p>
-                        <span class="text-danger">Overdue</span>
-                    </div>
-                </div>
+                <canvas id="invoiceStatusChart"></canvas>
             </div>
         </div>
     </div>
@@ -145,6 +127,46 @@ $overdue_invoices = $invoice_statuses['Overdue'] ?? 0;
     </div>
 </div>
 
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+    const ctx = document.getElementById('invoiceStatusChart').getContext('2d');
+    new Chart(ctx, {
+        type: 'doughnut',
+        data: {
+            labels: ['Paid', 'Pending', 'Overdue'],
+            datasets: [{
+                label: 'Invoice Status',
+                data: [<?php echo $paid_invoices; ?>, <?php echo $pending_invoices; ?>, <?php echo $overdue_invoices; ?>],
+                backgroundColor: [
+                    'rgba(25, 135, 84, 0.7)',
+                    'rgba(255, 193, 7, 0.7)',
+                    'rgba(220, 53, 69, 0.7)'
+                ],
+                borderColor: [
+                    'rgba(25, 135, 84, 1)',
+                    'rgba(255, 193, 7, 1)',
+                    'rgba(220, 53, 69, 1)'
+                ],
+                borderWidth: 1
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    position: 'top',
+                },
+                title: {
+                    display: false,
+                    text: 'Invoice Status Distribution'
+                }
+            }
+        }
+    });
+});
+</script>
+
 <?php
 require_once 'templates/footer.php';
 ?>
diff --git a/templates/header.php b/templates/header.php
index 9a785e2..8b087cd 100644
--- a/templates/header.php
+++ b/templates/header.php
@@ -10,6 +10,7 @@ $page = $page ?? '';
     <title><?php echo htmlspecialchars($title ?? 'Billing'); ?></title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
 </head>
 <body>