feat: Implement admin dashboard and page collection

This commit introduces a new admin dashboard and a page collection feature. The admin dashboard allows for managing KTP data, including viewing details and exporting data. The page collection provides a structure for organizing different pages within the application.

The following files were added:

- `dashboard-admin-ktp/index.html`: HTML structure for the admin dashboard.
- `dashboard-admin-ktp/script.js`: JavaScript logic for the admin dashboard.
- `dashboard-admin-ktp/style.css`: Styling for the admin dashboard.
- `page-collection/index.html`: HTML structure for a sample page collection.
- `page-collection/script.js`: JavaScript logic for the sample page collection.
- `page-collection/style.css`: Styling for the sample page collection.
- `design-styles.json`: JSON file to store design styles.

dashboard-admin-ktp/script.js

@@ -0,0 +1,89 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Placeholder data
+    const totalKtps = 500;
+    const regions = ['Jakarta', 'Surabaya', 'Medan', 'Bandung'];
+    const ktpList = [
+        { nik: '1234567890', name: 'John Doe', email: 'john.doe@example.com', phone: '081234567890' },
+        { nik: '9876543210', name: 'Jane Smith', email: 'jane.smith@example.com', phone: '089876543210' },
+        { nik: '1122334455', name: 'Peter Jones', email: 'peter.jones@example.com', phone: '081122334455' }
+    ];
+
+    // Update summary section
+    document.getElementById('total-ktps').textContent = totalKtps;
+
+    // Chart.js setup
+    const regionsChartCanvas = document.getElementById('regions-chart').getContext('2d');
+    const regionsChart = new Chart(regionsChartCanvas, {
+        type: 'bar',
+        data: {
+            labels: regions,
+            datasets: [{
+                label: 'Number of KTPs',
+                data: [150, 120, 100, 80], // Placeholder data
+                backgroundColor: '#2A64FC'
+            }]
+        },
+        options: {
+            scales: {
+                y: {
+                    beginAtZero: true
+                }
+            }
+        }
+    });
+
+    // Update KTP list table
+    const ktpTableBody = document.getElementById('ktp-table-body');
+    ktpList.forEach(ktp => {
+        const tr = document.createElement('tr');
+        tr.innerHTML = `
+            <td>${ktp.nik}</td>
+            <td>${ktp.name}</td>
+            <td>${ktp.email}</td>
+            <td>${ktp.phone}</td>
+        `;
+        tr.addEventListener('click', function() {
+            showKtpDetails(ktp);
+        });
+        ktpTableBody.appendChild(tr);
+    });
+
+   function showKtpDetails(ktp) {
+        document.getElementById('ktp-nik').textContent = ktp.nik;
+        document.getElementById('ktp-name').textContent = ktp.name;
+        document.getElementById('ktp-email').textContent = ktp.email;
+        document.getElementById('ktp-phone').textContent = ktp.phone;
+
+        // Get the modal
+        var modal = document.getElementById("ktp-modal");
+
+        // Get the <span> element that closes the modal
+        var span = document.getElementsByClassName("close")[0];
+
+        // When the user clicks on the button, open the modal
+        modal.style.display = "block";
+
+        // When the user clicks on <span> (x), close the modal
+        span.onclick = function() {
+            modal.style.display = "none";
+        }
+
+        // When the user clicks anywhere outside of the modal, close it
+        window.onclick = function(event) {
+            if (event.target == modal) {
+                modal.style.display = "none";
+            }
+        }
+    }
+
+    // Logout button functionality
+    document.getElementById('logout-button').addEventListener('click', function() {
+        // Redirect to login page
+        window.location.href = '../page-collection/index.html';
+    });
+
+    // Export to Excel button functionality (placeholder)
+    document.getElementById('export-button').addEventListener('click', function() {
+        alert('Export to Excel functionality will be implemented later.');
+    });
+});