Initial commit

2025-03-08 21:11:01 +08:00
commit f9b8ae4f35
3 changed files with 375 additions and 0 deletions
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Aging Dashboard</title>
+<!-- Chart.js library -->
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<style>
+    body {
+        font-family: Arial, sans-serif;
+        background-color: #f0f0f0;
+        margin: 0;
+        padding: 20px;
+    }
+
+    .container {
+        max-width: 800px;
+        margin: 0 auto;
+        background-color: #fff;
+        border-radius: 8px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        padding: 20px;
+    }
+
+    h1 {
+        text-align: center;
+        color: #333;
+    }
+
+    .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+        gap: 10px;
+        margin-bottom: 20px;
+    }
+
+    .age-category {
+        background-color: #f2f2f2;
+        padding: 10px;
+        text-align: center;
+        border-radius: 8px;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    }
+
+    .age-category h2 {
+        margin-top: 0;
+        color: #666;
+        font-size: 16px; /* Adjust font size */
+    }
+
+    .age-category p {
+        font-size: 24px; /* Adjust font size */
+        font-weight: bold;
+        color: #333;
+        margin: 5px 0;
+    }
+
+    .chart-container {
+        text-align: center;
+    }
+</style>
+</head>
+<body>
+<div class="container">
+    <h1>Aging Dashboard</h1>
+    <div class="grid">
+        <div class="age-category">
+            <h2>0-30 days</h2>
+            <p id="count0-30">0</p>
+        </div>
+        <div class="age-category">
+            <h2>31-60 days</h2>
+            <p id="count31-60">0</p>
+        </div>
+        <div class="age-category">
+            <h2>61-90 days</h2>
+            <p id="count61-90">0</p>
+        </div>
+        <div class="age-category">
+            <h2>91-120 days</h2>
+            <p id="count91-120">0</p>
+        </div>
+        <div class="age-category">
+            <h2>121+ days</h2>
+            <p id="count121">0</p>
+        </div>
+    </div>
+
+    <!-- Placeholder for chart -->
+    <div class="chart-container">
+        <canvas id="myPieChart"></canvas>
+    </div>
+</div>
+
+<script>
+    // Sample data representing counts for each aging category
+    const data = {
+        "0-30": 25,
+        "31-60": 18,
+        "61-90": 12,
+        "91-120": 8,
+        "121+": 3
+    };
+
+    // Function to update the counts displayed in the dashboard
+    function updateCounts() {
+        Object.keys(data).forEach(key => {
+            const element = document.getElementById(`count${key.replace('+', '')}`);
+            if (element) {
+                element.textContent = data[key];
+            }
+        });
+
+        // Update pie chart data
+        updatePieChart();
+    }
+
+    // Function to update the pie chart
+function updatePieChart() {
+    const labels = Object.keys(data);
+    const counts = Object.values(data);
+
+    const ctx = document.getElementById('myPieChart').getContext('2d');
+    const myPieChart = new Chart(ctx, {
+        type: 'pie',
+        data: {
+            labels: labels,
+            datasets: [{
+                label: 'Aging Categories',
+                data: counts,
+                backgroundColor: [
+                    '#ffcc66',
+                    '#ff6666',
+                    '#66cccc',
+                    '#6699ff',
+                    '#cc66ff'
+                ],
+                borderWidth: 1
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            legend: {
+                position: 'bottom',
+                labels: {
+                    fontSize: 14
+                }
+            },
+            elements: {
+                arc: {
+                    backgroundColor: '#fff', // Ensure background color is set for the shadow to be visible
+                    shadowColor: 'rgba(0, 0, 0, 0.4)',
+                    shadowOffsetX: 0,
+                    shadowOffsetY: 2,
+                    shadowBlur: 5,
+                }
+            }
+        }
+    });
+}
+
+
+    // Call updateCounts initially to display the initial data and chart
+    updateCounts();
+</script>
+
+</body>
+</html>