upd: menu dashboard

Deskripsi:
- connected to database

No Issues

src/frontend/routes/dashboard.tsx

@@ -36,12 +36,6 @@ export const Route = createFileRoute('/dashboard')({
   component: DashboardPage,
 })
 
-const recentErrors = [
-  { id: 1, app: 'Desa+', message: 'NullPointerException at village_sync.dart:45', version: '2.4.1', time: '2 mins ago', severity: 'critical' },
-  { id: 2, app: 'E-Commerce', message: 'Failed to load checkout session', version: '1.8.0', time: '15 mins ago', severity: 'high' },
-  { id: 3, app: 'Fitness App', message: 'SocketException: Connection timed out', version: '0.9.5', time: '1 hour ago', severity: 'medium' },
-]
-
 function DashboardPage() {
   const { data: sessionData } = useSession()
   const user = sessionData?.user
@@ -56,6 +50,20 @@ function DashboardPage() {
     queryFn: () => fetch('/api/apps').then((r) => r.json()),
   })
 
+  const { data: recentErrors = [], isLoading: recentErrorsLoading } = useQuery({
+    queryKey: ['dashboard', 'recent-errors'],
+    queryFn: () => fetch('/api/dashboard/recent-errors').then((r) => r.json()),
+  })
+
+  const formatTimeAgo = (dateStr: string) => {
+    const diff = new Date().getTime() - new Date(dateStr).getTime()
+    const minutes = Math.floor(diff / 60000)
+    if (minutes < 60) return `${minutes || 1} mins ago`
+    const hours = Math.floor(minutes / 60)
+    if (hours < 24) return `${hours} hours ago`
+    return `${Math.floor(hours / 24)} days ago`
+  }
+
   return (
     <DashboardLayout>
       <Container size="xl" py="lg">
@@ -86,21 +94,21 @@ function DashboardPage() {
                 value={stats?.totalApps || 0}
                 icon={TbApps}
                 color="brand-blue"
-                trend={{ value: stats?.trends?.totalApps.toString() || '0', positive: true }}
+              // trend={{ value: stats?.trends?.totalApps.toString() || '0', positive: true }}
               />
               <StatsCard
                 title="New Errors"
                 value={stats?.newErrors || 0}
                 icon={TbMessageReport}
                 color="brand-purple"
-                trend={{ value: stats?.trends?.newErrors.toString() || '0', positive: false }}
+              // trend={{ value: stats?.trends?.newErrors.toString() || '0', positive: false }}
               />
               <StatsCard
-                title="Active Users"
+                title="Users"
                 value={stats?.activeUsers || 0}
                 icon={TbUsers}
                 color="teal"
-                trend={{ value: stats?.trends?.activeUsers.toString() || '0', positive: true }}
+              // trend={{ value: stats?.trends?.activeUsers.toString() || '0', positive: true }}
               />
             </SimpleGrid>
           )}
@@ -124,7 +132,7 @@ function DashboardPage() {
 
           <Group justify="space-between" mt="md">
             <Title order={3}>Recent Error Reports</Title>
-            <Button variant="subtle" color="brand-blue" rightSection={<TbChevronRight size={16} />}>
+            <Button variant="subtle" color="brand-blue" rightSection={<TbChevronRight size={16} />} component={Link} to="/bug-reports">
               View All Errors
             </Button>
           </Group>
@@ -141,23 +149,35 @@ function DashboardPage() {
                 </Table.Tr>
               </Table.Thead>
               <Table.Tbody>
-                {recentErrors.map((error) => (
+                {recentErrorsLoading ? (
+                  <Table.Tr>
+                    <Table.Td colSpan={5} align="center" py="xl">
+                      <Loader size="sm" type="dots" />
+                    </Table.Td>
+                  </Table.Tr>
+                ) : recentErrors.length === 0 ? (
+                  <Table.Tr>
+                    <Table.Td colSpan={5} align="center" py="xl">
+                      <Text c="dimmed" size="sm">No recent errors found.</Text>
+                    </Table.Td>
+                  </Table.Tr>
+                ) : recentErrors.map((error: any) => (
                   <Table.Tr key={error.id}>
                     <Table.Td>
-                      <Text fw={600} size="sm">{error.app}</Text>
+                      <Text fw={600} size="sm" style={{ textTransform: 'uppercase' }}>{error.app}</Text>
                     </Table.Td>
                     <Table.Td>
-                      <Text size="sm" c="dimmed">{error.message}</Text>
+                      <Text size="sm" c="dimmed" lineClamp={1}>{error.message}</Text>
                     </Table.Td>
                     <Table.Td>
                       <Badge variant="light" color="gray">v{error.version}</Badge>
                     </Table.Td>
                     <Table.Td>
-                      <Text size="xs" c="dimmed">{error.time}</Text>
+                      <Text size="xs" c="dimmed">{formatTimeAgo(error.time)}</Text>
                     </Table.Td>
                     <Table.Td>
                       <Badge
-                        color={error.severity === 'critical' ? 'red' : error.severity === 'high' ? 'orange' : 'yellow'}
+                        color={error.severity === 'OPEN' ? 'red' : error.severity === 'IN_PROGRESS' || error.severity === 'ON_HOLD' ? 'orange' : 'yellow'}
                         variant="dot"
                       >
                         {error.severity.toUpperCase()}