upd: tampilan

2026-04-02 10:30:21 +08:00
parent 39d659acd0
commit 47d26799ad
28 changed files with 2701 additions and 237 deletions
--- a/src/frontend/components/AppCard.tsx
+++ b/src/frontend/components/AppCard.tsx
@@ -0,0 +1,102 @@
+import { Card, Group, Text, ThemeIcon, Badge, Avatar, Stack, Button, Progress, Box } from '@mantine/core'
+import { Link } from '@tanstack/react-router'
+import { TbDeviceMobile, TbActivity, TbAlertTriangle, TbChevronRight } from 'react-icons/tb'
+
+interface AppCardProps {
+  id: string
+  name: string
+  status: 'active' | 'warning' | 'error'
+  users: number
+  errors: number
+  version: string
+}
+
+export function AppCard({ id, name, status, users, errors, version }: AppCardProps) {
+  const statusColor = status === 'active' ? 'teal' : status === 'warning' ? 'orange' : 'red'
+
+  return (
+    <Card
+      withBorder
+      padding="xl"
+      radius="2xl"
+      className="premium-card glass"
+      styles={(theme) => ({
+        root: {
+          backgroundColor: 'rgba(30, 41, 59, 0.4)',
+          borderColor: 'rgba(255,255,255,0.08)',
+          transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+          '&:hover': {
+            transform: 'translateY(-4px)',
+            boxShadow: '0 12px 24px -8px rgba(0, 0, 0, 0.4)',
+            borderColor: 'rgba(37, 99, 235, 0.3)',
+          },
+        },
+      })}
+    >
+      <Group justify="space-between" mb="lg">
+        <Group gap="md">
+          <Avatar
+            variant="gradient"
+            gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+            radius="lg"
+            size="lg"
+          >
+            <TbDeviceMobile size={26} />
+          </Avatar>
+          <Stack gap={0}>
+            <Text fw={700} size="lg" style={{ letterSpacing: '-0.3px' }}>{name}</Text>
+            <Text size="xs" c="dimmed" fw={600}>BUILD v{version}</Text>
+          </Stack>
+        </Group>
+        <Badge color={statusColor} variant="dot" size="sm">
+          {status.toUpperCase()}
+        </Badge>
+      </Group>
+
+      <Stack gap="md" mt="sm">
+        <Box>
+          <Group justify="space-between" mb={6}>
+            <Group gap="xs">
+              <TbActivity size={16} color="#2563EB" />
+              <Text size="xs" fw={700} c="dimmed">USER ADOPTION</Text>
+            </Group>
+            <Text size="sm" fw={700}>{users.toLocaleString()}</Text>
+          </Group>
+          <Progress value={85} size="sm" color="brand-blue" radius="xl" />
+        </Box>
+
+        <Box>
+          <Group justify="space-between" mb={6}>
+            <Group gap="xs">
+              <TbAlertTriangle size={16} color={errors > 0 ? '#ef4444' : '#64748b'} />
+              <Text size="xs" fw={700} c="dimmed">HEALTH INCIDENTS</Text>
+            </Group>
+            <Text size="sm" fw={700} color={errors > 0 ? 'red' : 'dimmed'}>{errors}</Text>
+          </Group>
+          <Progress value={errors > 0 ? 30 : 0} size="sm" color="red" radius="xl" />
+        </Box>
+      </Stack>
+
+      <Button
+        component={Link}
+        to={`/apps/${id}`}
+        variant="light"
+        color="brand-blue"
+        fullWidth
+        mt="xl"
+        radius="md"
+        rightSection={<TbChevronRight size={16} />}
+        styles={{
+          root: {
+            height: '44px',
+            '&:hover': {
+              backgroundColor: 'rgba(37, 99, 235, 0.15)',
+            }
+          }
+        }}
+      >
+        Center Intelligence
+      </Button>
+    </Card>
+  )
+}