Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Barangay Information System</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar.collapsed { | |
| width: 70px; | |
| } | |
| .sidebar.collapsed .sidebar-text { | |
| display: none; | |
| } | |
| .sidebar.collapsed .logo-text { | |
| display: none; | |
| } | |
| .sidebar.collapsed .nav-item { | |
| justify-content: center; | |
| } | |
| .main-content { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar.collapsed + .main-content { | |
| margin-left: 70px; | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 300px; | |
| } | |
| .resident-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .dashboard-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 6px 12px rgba(0,0,0,0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-blue-800 text-white w-64 flex flex-col"> | |
| <!-- Logo --> | |
| <div class="p-4 flex items-center space-x-3 border-b border-blue-700"> | |
| <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center text-blue-800 font-bold text-xl"> | |
| BIS | |
| </div> | |
| <span class="logo-text text-xl font-bold">Barangay IS</span> | |
| </div> | |
| <!-- User Profile --> | |
| <div class="p-4 flex items-center space-x-3 border-b border-blue-700"> | |
| <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div class="sidebar-text"> | |
| <div class="font-medium">Admin User</div> | |
| <div class="text-xs text-blue-200">Administrator</div> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="flex-1 overflow-y-auto py-4"> | |
| <div class="space-y-1 px-4"> | |
| <a href="#" class="nav-item flex items-center space-x-3 px-3 py-2 bg-blue-700 rounded-lg"> | |
| <i class="fas fa-tachometer-alt w-6 text-center"></i> | |
| <span class="sidebar-text">Dashboard</span> | |
| </a> | |
| <a href="#" class="nav-item flex items-center space-x-3 px-3 py-2 hover:bg-blue-700 rounded-lg"> | |
| <i class="fas fa-users w-6 text-center"></i> | |
| <span class="sidebar-text">Residents</span> | |
| </a> | |
| <a href="#" class="nav-item flex items-center space-x-3 px-3 py-2 hover:bg-blue-700 rounded-lg"> | |
| <i class="fas fa-home w-6 text-center"></i> | |
| <span class="sidebar-text">Households</span> | |
| </a> | |
| <a href="#" class="nav-item flex items-center space-x-3 px-3 py-2 hover:bg-blue-700 rounded-lg"> | |
| <i class="fas fa-file-alt w-6 text-center"></i> | |
| <span class="sidebar-text">Documents</span> | |
| </a> | |
| <a href="#" class="nav-item flex items-center space-x-3 px-3 py-2 hover:bg-blue-700 rounded-lg"> | |
| <i class="fas fa-calendar-alt w-6 text-center"></i> | |
| <span class="sidebar-text">Events</span> | |
| </a> | |
| <a href="#" class="nav-item flex items-center space-x-3 px-3 py-2 hover:bg-blue-700 rounded-lg"> | |
| <i class="fas fa-chart-bar w-6 text-center"></i> | |
| <span class="sidebar-text">Reports</span> | |
| </a> | |
| <a href="#" class="nav-item flex items-center space-x-3 px-3 py-2 hover:bg-blue-700 rounded-lg"> | |
| <i class="fas fa-cog w-6 text-center"></i> | |
| <span class="sidebar-text">Settings</span> | |
| </a> | |
| </div> | |
| </nav> | |
| <!-- Collapse Button --> | |
| <div class="p-4 border-t border-blue-700"> | |
| <button onclick="toggleSidebar()" class="w-full flex items-center space-x-3 px-3 py-2 hover:bg-blue-700 rounded-lg"> | |
| <i class="fas fa-chevron-left w-6 text-center"></i> | |
| <span class="sidebar-text">Collapse</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="main-content flex-1 overflow-auto"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="flex justify-between items-center p-4"> | |
| <h1 class="text-2xl font-bold text-gray-800">Dashboard</h1> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <div class="relative"> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-bell text-gray-600"></i> | |
| <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-800"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <span class="hidden md:inline">Admin</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Content --> | |
| <main class="p-6"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="dashboard-card bg-white rounded-lg shadow p-6 transition duration-300"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Total Residents</p> | |
| <h3 class="text-2xl font-bold">1,245</h3> | |
| <p class="text-green-500 text-sm mt-1">+12 this month</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600"> | |
| <i class="fas fa-users text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white rounded-lg shadow p-6 transition duration-300"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Total Households</p> | |
| <h3 class="text-2xl font-bold">342</h3> | |
| <p class="text-green-500 text-sm mt-1">+5 this month</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600"> | |
| <i class="fas fa-home text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white rounded-lg shadow p-6 transition duration-300"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Pending Requests</p> | |
| <h3 class="text-2xl font-bold">18</h3> | |
| <p class="text-red-500 text-sm mt-1">+3 today</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center text-orange-600"> | |
| <i class="fas fa-file-alt text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white rounded-lg shadow p-6 transition duration-300"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Upcoming Events</p> | |
| <h3 class="text-2xl font-bold">5</h3> | |
| <p class="text-blue-500 text-sm mt-1">2 this week</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600"> | |
| <i class="fas fa-calendar-alt text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts and Recent Residents --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Population Chart --> | |
| <div class="lg:col-span-2 bg-white rounded-lg shadow p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold">Population Overview</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-sm bg-blue-100 text-blue-600 rounded">Year</button> | |
| <button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded">Month</button> | |
| <button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded">Week</button> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="populationChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Recent Residents --> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold">Recent Residents</h2> | |
| <a href="#" class="text-blue-600 text-sm">View All</a> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Juan Dela Cruz</p> | |
| <p class="text-gray-500 text-sm">Registered: 2 days ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center text-pink-600"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Maria Santos</p> | |
| <p class="text-gray-500 text-sm">Registered: 5 days ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Pedro Reyes</p> | |
| <p class="text-gray-500 text-sm">Registered: 1 week ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Ana Lopez</p> | |
| <p class="text-gray-500 text-sm">Registered: 1 week ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Requests and Upcoming Events --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <!-- Recent Requests --> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold">Recent Requests</h2> | |
| <a href="#" class="text-blue-600 text-sm">View All</a> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Type</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Resident</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Date</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Status</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap">Barangay Clearance</td> | |
| <td class="px-4 py-3 whitespace-nowrap">Juan Dela Cruz</td> | |
| <td class="px-4 py-3 whitespace-nowrap">Today, 10:30 AM</td> | |
| <td class="px-4 py-3 whitespace-nowrap"><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">Pending</span></td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap">Business Permit</td> | |
| <td class="px-4 py-3 whitespace-nowrap">Maria Santos</td> | |
| <td class="px-4 py-3 whitespace-nowrap">Yesterday, 2:15 PM</td> | |
| <td class="px-4 py-3 whitespace-nowrap"><span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">Processing</span></td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap">Certificate of Residency</td> | |
| <td class="px-4 py-3 whitespace-nowrap">Pedro Reyes</td> | |
| <td class="px-4 py-3 whitespace-nowrap">May 15, 9:00 AM</td> | |
| <td class="px-4 py-3 whitespace-nowrap"><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">Completed</span></td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap">Indigency Certificate</td> | |
| <td class="px-4 py-3 whitespace-nowrap">Ana Lopez</td> | |
| <td class="px-4 py-3 whitespace-nowrap">May 14, 3:45 PM</td> | |
| <td class="px-4 py-3 whitespace-nowrap"><span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs">Rejected</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Upcoming Events --> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold">Upcoming Events</h2> | |
| <a href="#" class="text-blue-600 text-sm">View All</a> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start space-x-3 p-3 bg-blue-50 rounded-lg"> | |
| <div class="w-12 h-12 rounded-lg bg-blue-100 flex flex-col items-center justify-center text-blue-800"> | |
| <span class="text-sm font-bold">MAY</span> | |
| <span class="text-lg font-bold">20</span> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Barangay Assembly</h3> | |
| <p class="text-gray-600 text-sm">9:00 AM - 12:00 PM</p> | |
| <p class="text-gray-500 text-sm mt-1">Barangay Hall</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3 p-3 bg-green-50 rounded-lg"> | |
| <div class="w-12 h-12 rounded-lg bg-green-100 flex flex-col items-center justify-center text-green-800"> | |
| <span class="text-sm font-bold">MAY</span> | |
| <span class="text-lg font-bold">25</span> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Medical Mission</h3> | |
| <p class="text-gray-600 text-sm">8:00 AM - 5:00 PM</p> | |
| <p class="text-gray-500 text-sm mt-1">Barangay Health Center</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3 p-3 bg-purple-50 rounded-lg"> | |
| <div class="w-12 h-12 rounded-lg bg-purple-100 flex flex-col items-center justify-center text-purple-800"> | |
| <span class="text-sm font-bold">JUN</span> | |
| <span class="text-lg font-bold">12</span> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Independence Day Celebration</h3> | |
| <p class="text-gray-600 text-sm">7:00 AM - 9:00 PM</p> | |
| <p class="text-gray-500 text-sm mt-1">Barangay Plaza</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| // Toggle sidebar | |
| function toggleSidebar() { | |
| const sidebar = document.querySelector('.sidebar'); | |
| const mainContent = document.querySelector('.main-content'); | |
| sidebar.classList.toggle('collapsed'); | |
| // Change icon based on state | |
| const icon = document.querySelector('.sidebar.collapsed .fa-chevron-left'); | |
| if (icon) { | |
| icon.classList.remove('fa-chevron-left'); | |
| icon.classList.add('fa-chevron-right'); | |
| } else { | |
| const icon = document.querySelector('.sidebar .fa-chevron-right'); | |
| if (icon) { | |
| icon.classList.remove('fa-chevron-right'); | |
| icon.classList.add('fa-chevron-left'); | |
| } | |
| } | |
| } | |
| // Initialize charts | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Population Chart | |
| const populationCtx = document.getElementById('populationChart').getContext('2d'); | |
| const populationChart = new Chart(populationCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], | |
| datasets: [ | |
| { | |
| label: 'New Residents', | |
| data: [15, 22, 18, 25, 30, 28, 35, 32, 28, 25, 20, 18], | |
| borderColor: '#3B82F6', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'Total Population', | |
| data: [1200, 1222, 1240, 1265, 1295, 1323, 1358, 1390, 1418, 1443, 1463, 1481], | |
| borderColor: '#10B981', | |
| backgroundColor: 'rgba(16, 185, 129, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| tooltip: { | |
| mode: 'index', | |
| intersect: false, | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false | |
| } | |
| } | |
| } | |
| }); | |
| }); | |
| // Sample function to show modal (can be expanded) | |
| function showAddResidentModal() { | |
| alert('Add Resident functionality would go here'); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Prenss/bis-dashboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |