upd: tampilan

src/frontend/routes/apps.index.tsx

@@ -0,0 +1,59 @@
+import { useQuery } from '@tanstack/react-query'
+import { Container, Stack, Title, Text, SimpleGrid, Group, Button, TextInput, Loader } from '@mantine/core'
+import { createFileRoute } from '@tanstack/react-router'
+import { TbPlus, TbSearch } from 'react-icons/tb'
+import { DashboardLayout } from '@/frontend/components/DashboardLayout'
+import { AppCard } from '@/frontend/components/AppCard'
+
+export const Route = createFileRoute('/apps/')({
+  component: AppsPage,
+})
+
+function AppsPage() {
+  const { data: apps, isLoading } = useQuery({
+    queryKey: ['apps'],
+    queryFn: () => fetch('/api/apps').then((r) => r.json()),
+  })
+
+  return (
+    <DashboardLayout>
+      <Container size="xl" py="lg">
+        <Stack gap="xl">
+          <Group justify="space-between" align="flex-end">
+            <Stack gap={0}>
+              <Title order={2} className="gradient-text">Applications</Title>
+              <Text size="sm" c="dimmed">Manage and monitor all your mobile applications from one place.</Text>
+            </Stack>
+            <Button
+              variant="gradient"
+              gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+              leftSection={<TbPlus size={18} />}
+              radius="md"
+            >
+              Add New Application
+            </Button>
+          </Group>
+
+          <Group>
+            <TextInput
+              placeholder="Search applications..."
+              leftSection={<TbSearch size={16} />}
+              style={{ flex: 1 }}
+              radius="md"
+            />
+          </Group>
+
+          {isLoading ? (
+            <Loader size="xl" type="dots" mx="auto" mt="xl" />
+          ) : (
+            <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="lg">
+              {apps?.map((app: any) => (
+                <AppCard key={app.id} {...app} />
+              ))}
+            </SimpleGrid>
+          )}
+        </Stack>
+      </Container>
+    </DashboardLayout>
+  )
+}