feat: Modern Theme and Dashboard Enhancements

- Implemented Modern Theme (Inter font, Rounded UI, Indigo/White palette) - Updated Login Page with gradient background and modern card - Added Age Demographics to Dashboard (Stats count) - Integrated Chart.js for Population Donut Chart - Made Dashboard Info Boxes clickable with Age Category filtering - Updated Resident Data table to support age filtering
2026-01-18 22:02:48 +08:00
parent 7c71bdc1f9
commit 80951b57a0
6 changed files with 386 additions and 7 deletions
--- a/dist/css/modern.css
+++ b/dist/css/modern.css
@@ -0,0 +1,115 @@
+/* Modern Theme Overrides */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
+
+body {
+    font-family: 'Inter', sans-serif !important;
+    background-color: #f4f6f9;
+}
+
+/* Card Modernization */
+.card {
+    border: none !important;
+    border-radius: 12px !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    transition: transform 0.2s ease-in-out;
+}
+
+.card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+}
+
+.card-header {
+    background-color: transparent !important;
+    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
+    padding-top: 1.25rem !important;
+}
+
+/* Navbar Modernization */
+.main-header {
+    border-bottom: none !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+}
+
+/* Sidebar Modernization */
+.main-sidebar {
+    border-right: none !important;
+}
+
+.nav-sidebar .nav-item .nav-link {
+    border-radius: 8px !important;
+}
+
+.brand-link {
+    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
+}
+
+/* Button Modernization */
+.btn {
+    border-radius: 8px !important;
+    padding: 0.5rem 1rem;
+    font-weight: 500;
+    box-shadow: none !important;
+}
+
+.btn-primary {
+    background-color: #4f46e5 !important;
+    border-color: #4f46e5 !important;
+}
+
+.btn-success {
+    background-color: #10b981 !important;
+    border-color: #10b981 !important;
+}
+
+.btn-danger {
+    background-color: #ef4444 !important;
+    border-color: #ef4444 !important;
+}
+
+.btn-warning {
+    background-color: #f59e0b !important;
+    border-color: #f59e0b !important;
+    color: white !important;
+}
+
+/* Form Controls */
+.form-control {
+    border-radius: 8px !important;
+    padding: 0.6rem 1rem !important;
+    border: 1px solid #e2e8f0;
+}
+
+.form-control:focus {
+    border-color: #4f46e5 !important;
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
+}
+
+/* Login Page Specific */
+.login-page {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+}
+
+.login-box {
+    width: 400px !important;
+}
+
+.login-card-body {
+    border-radius: 20px !important;
+    padding: 40px !important;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+}
+
+.login-logo a {
+    color: white !important;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+/* SweetAlert Overrides */
+.swal2-popup {
+    border-radius: 16px !important;
+}
+
+.swal2-styled {
+    border-radius: 8px !important;
+}