feat(core): restructure auth, routing, and role-based dashboards

src/assets/js/dashboard_config.js

@@ -0,0 +1,100 @@
+async function loadDashboardMetrics() {
+  // TODO: Replace with actual API call
+  // const response = await fetch('/api/dashboard/metrics');
+  // const data = await response.json();
+
+  // Placeholder for future implementation
+  const metricsData = {
+    totalReports: null,
+    activeIssues: null,
+    resolvedIssues: null,
+    criticalAlerts: null,
+  };
+
+  // Update DOM with API data
+  document.querySelector('[data-value="total-reports"]').textContent =
+    metricsData.totalReports !== null ? metricsData.totalReports : "—";
+  document.querySelector('[data-value="active-issues"]').textContent =
+    metricsData.activeIssues !== null ? metricsData.activeIssues : "—";
+  document.querySelector('[data-value="resolved-issues"]').textContent =
+    metricsData.resolvedIssues !== null ? metricsData.resolvedIssues : "—";
+  document.querySelector('[data-value="critical-alerts"]').textContent =
+    metricsData.criticalAlerts !== null ? metricsData.criticalAlerts : "—";
+}
+
+async function loadRecentActivity() {
+  // TODO: Replace with actual API call
+  // const response = await fetch('/api/activity/recent');
+  // const activities = await response.json();
+
+  const activities = [];
+
+  const listContainer = document.getElementById("activity-list");
+  const skeleton = document.getElementById("activity-skeleton");
+  const empty = document.getElementById("activity-empty");
+  const items = document.getElementById("activity-items");
+
+  skeleton.classList.add("hidden");
+
+  if (activities.length === 0) {
+    listContainer.setAttribute("data-status", "empty");
+    empty.classList.remove("hidden");
+  } else {
+    listContainer.setAttribute("data-status", "loaded");
+    items.classList.remove("hidden");
+
+    // Render activity items
+    activities.forEach((activity) => {
+      const item = createActivityItem(activity);
+      items.appendChild(item);
+    });
+  }
+}
+
+function createActivityItem(activity) {
+  const div = document.createElement("div");
+  div.className = "px-6 py-4 flex items-start space-x-4";
+  div.setAttribute("data-activity-id", activity.id);
+
+  const statusColors = {
+    critical: "bg-red-400",
+    warning: "bg-yellow-400",
+    info: "bg-blue-400",
+    success: "bg-green-400",
+  };
+
+  div.innerHTML = `
+                <div class="w-2 h-2 mt-2 rounded-full ${
+                  statusColors[activity.severity] || "bg-gray-600"
+                }"></div>
+                <div class="flex-1 min-w-0">
+                    <p class="text-sm text-gray-200">${activity.message}</p>
+                    <div class="mt-1 flex items-center space-x-3">
+                        <span class="text-xs text-gray-500">${
+                          activity.timestamp
+                        }</span>
+                        <span class="px-2 py-0.5 text-xs font-medium rounded ${getBadgeClass(
+                          activity.status
+                        )}">${activity.status}</span>
+                    </div>
+                </div>
+            `;
+
+  return div;
+}
+
+function getBadgeClass(status) {
+  const classes = {
+    new: "bg-blue-900/40 text-blue-400",
+    "in-progress": "bg-yellow-900/40 text-yellow-400",
+    resolved: "bg-green-900/40 text-green-400",
+    closed: "bg-gray-800 text-gray-400",
+  };
+  return classes[status] || "bg-gray-800 text-gray-400";
+}
+
+// Initialize dashboard on page load
+document.addEventListener("DOMContentLoaded", () => {
+  loadDashboardMetrics();
+  setTimeout(() => loadRecentActivity(), 500);
+});