Initial commit: Retribusi frontend dengan dashboard, event logs, dan settings

2025-12-18 11:21:40 +07:00
commit b3573ed390
35 changed files with 7368 additions and 0 deletions
--- a/index.php
+++ b/index.php
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - Sistem Monitoring Retribusi</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        outfit: ['Outfit', 'sans-serif'],
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="font-outfit bg-gray-50 min-h-screen flex items-center justify-center p-4">
+    <div class="w-full max-w-md">
+        <div class="bg-white rounded-lg shadow-lg p-8 md:p-10 border border-gray-200">
+            <div class="text-center mb-8">
+                <h1 class="text-2xl font-bold text-gray-900 mb-2">Sistem Monitoring Retribusi</h1>
+                <p class="text-gray-600 text-sm">Silakan login untuk melanjutkan</p>
+            </div>
+            <form id="loginForm" class="space-y-5">
+                <div>
+                    <label for="username" class="block text-sm font-medium text-gray-700 mb-2">Username</label>
+                    <input 
+                        type="text" 
+                        id="username" 
+                        name="username" 
+                        required 
+                        autocomplete="username"
+                        class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent transition-all text-gray-900 placeholder-gray-400"
+                        placeholder="Masukkan username"
+                    >
+                </div>
+                <div>
+                    <label for="password" class="block text-sm font-medium text-gray-700 mb-2">Password</label>
+                    <input 
+                        type="password" 
+                        id="password" 
+                        name="password" 
+                        required 
+                        autocomplete="current-password"
+                        class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent transition-all text-gray-900 placeholder-gray-400"
+                        placeholder="Masukkan password"
+                    >
+                </div>
+                <div id="errorMessage" class="hidden bg-red-50 border border-red-200 text-red-700 p-3 rounded-lg text-sm"></div>
+                <button 
+                    type="submit" 
+                    class="w-full bg-gray-900 text-white font-medium py-2.5 px-6 rounded-lg hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition-all duration-200"
+                >
+                    Login
+                </button>
+            </form>
+        </div>
+    </div>
+
+    <!-- Pakai API & Auth dari public/dashboard/js -->
+    <script type="module">
+        import { Auth } from './public/dashboard/js/auth.js';
+        window.Auth = Auth;
+        
+        // Jika sudah login, langsung arahkan ke dashboard utama (public/dashboard)
+        if (Auth.isAuthenticated()) {
+            window.location.href = 'public/dashboard/dashboard.html';
+        }
+
+        document.getElementById('loginForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const errorDiv = document.getElementById('errorMessage');
+            errorDiv.classList.add('hidden');
+            
+            const username = document.getElementById('username').value.trim();
+            const password = document.getElementById('password').value;
+            
+            const submitBtn = e.target.querySelector('button[type="submit"]');
+            submitBtn.disabled = true;
+            submitBtn.textContent = 'Memproses...';
+            
+            try {
+                const { apiLogin } = await import('./public/dashboard/js/api.js');
+                const response = await apiLogin(username, password);
+                if (response.token) {
+                    Auth.saveToken(response.token);
+                    Auth.saveUser(response.user);
+                    // Arahkan ke dashboard utama (public/dashboard)
+                    window.location.href = 'public/dashboard/dashboard.html';
+                } else {
+                    throw new Error('Response tidak berisi token.');
+                }
+            } catch (error) {
+                errorDiv.textContent = error.message || 'Login gagal. Silakan coba lagi.';
+                errorDiv.classList.remove('hidden');
+                submitBtn.disabled = false;
+                submitBtn.textContent = 'Login';
+            }
+        });
+    </script>
+</body>
+</html>
+
+