upd: tampilan

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

@@ -7,9 +7,16 @@ import {
   SimpleGrid,
   Stack,
   Text,
-  Title
+  Title,
+  Modal,
+  Button,
+  TextInput,
+  Switch,
+  Badge,
+  Textarea
 } from '@mantine/core'
-import { createFileRoute, useParams } from '@tanstack/react-router'
+import { useDisclosure } from '@mantine/hooks'
+import { createFileRoute, useParams, useNavigate } from '@tanstack/react-router'
 import {
   TbActivity,
   TbAlertTriangle,
@@ -24,10 +31,28 @@ export const Route = createFileRoute('/apps/$appId/')({
 
 function AppOverviewPage() {
   const { appId } = useParams({ from: '/apps/$appId/' })
+  const navigate = useNavigate()
   const isDesaPlus = appId === 'desa-plus'
+  const [versionModalOpened, { open: openVersionModal, close: closeVersionModal }] = useDisclosure(false)
 
   return (
-    <Stack gap="xl">
+    <>
+      <Modal opened={versionModalOpened} onClose={closeVersionModal} title="Update Version Information" radius="md">
+        <Stack gap="md">
+          <TextInput label="Active Version" defaultValue="v1.2.0" />
+          <TextInput label="Minimum Version" defaultValue="v1.0.0" />
+          <Textarea 
+            label="Update Message" 
+            placeholder="Enter release notes or update message..." 
+            minRows={3}
+            autosize
+          />
+          <Switch label="Maintenance Mode" description="Enable to put the app in maintenance mode for users." />
+          <Button fullWidth onClick={closeVersionModal}>Save Changes</Button>
+        </Stack>
+      </Modal>
+
+      <Stack gap="xl">
       {/* 🔝 HEADER SECTION */}
       {/* <Paper withBorder p="lg" radius="2xl" className="glass"> */}
       <Group justify="space-between">
@@ -67,7 +92,19 @@ function AppOverviewPage() {
           value="v1.2.0"
           icon={TbVersions}
           color="brand-blue"
-        />
+          onClick={openVersionModal}
+        >
+          <Group justify="space-between" mt="md">
+            <Stack gap={0}>
+              <Text size="xs" c="dimmed">Min. Version</Text>
+              <Text size="sm" fw={600}>v1.0.0</Text>
+            </Stack>
+            <Stack gap={0} align="flex-end">
+              <Text size="xs" c="dimmed">Maintenance</Text>
+              <Badge size="sm" color="gray" variant="light">False</Badge>
+            </Stack>
+          </Group>
+        </SummaryCard>
         <SummaryCard
           title="Total Activity Today"
           value="3,842"
@@ -80,7 +117,13 @@ function AppOverviewPage() {
           value="138"
           icon={TbBuildingCommunity}
           color="indigo"
-        />
+          onClick={() => navigate({ to: `/apps/${appId}/villages` })}
+        >
+          <Group justify="space-between" mt="md">
+            <Text size="xs" c="dimmed">Nonactive Villages</Text>
+            <Badge size="sm" color="red" variant="light">24</Badge>
+          </Group>
+        </SummaryCard>
         <SummaryCard
           title="Errors Today"
           value="12"
@@ -100,5 +143,6 @@ function AppOverviewPage() {
       {/* 🐞 4. LATEST ERROR REPORTS */}
       <ErrorDataTable />
     </Stack>
+    </>
   )
 }