upd: tampilan

src/frontend/routes/apps.$appId.tsx

@@ -0,0 +1,45 @@
+import { DashboardLayout } from '@/frontend/components/DashboardLayout'
+import {
+  Box,
+  Container,
+  Group,
+  Stack,
+  Text,
+  Title
+} from '@mantine/core'
+import { createFileRoute, Outlet, useNavigate, useParams } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/apps/$appId')({
+  component: AppDetailLayout,
+})
+
+function AppDetailLayout() {
+  const { appId } = useParams({ from: '/apps/$appId' })
+  const navigate = useNavigate()
+
+  // Format app ID for display (e.g., desa-plus -> Desa+)
+  const appName = appId
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+    .replace('Plus', '+')
+
+  return (
+    <DashboardLayout>
+      <Container size="xl" py="lg">
+        <Stack gap="xl">
+          <Group justify="space-between" align="flex-end">
+            <Stack gap={4}>
+              <Title order={1} className="gradient-text" style={{ fontSize: '2.5rem' }}>{appName}</Title>
+              <Text c="dimmed" size="sm" fw={500}>Application ID: <span style={{ fontFamily: 'monospace' }}>{appId}</span></Text>
+            </Stack>
+          </Group>
+
+          <Box mt="md">
+            <Outlet />
+          </Box>
+        </Stack>
+      </Container>
+    </DashboardLayout>
+  )
+}