From fced7d4c1c35bc42aec9d209f502312f278f9ded Mon Sep 17 00:00:00 2001
From: amaliadwiy <iam.amaliadwi@gmail.com>
Date: Tue, 12 May 2026 14:10:29 +0800
Subject: [PATCH] feat: show isDummy flag on village detail and list pages

---
 .../apps.$appId.villages.$villageId.tsx       | 32 ++++++++++++++++---
 .../routes/apps.$appId.villages.index.tsx     | 20 ++++++++++--
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/src/frontend/routes/apps.$appId.villages.$villageId.tsx b/src/frontend/routes/apps.$appId.villages.$villageId.tsx
index 7e3e5b9..a34abc4 100644
--- a/src/frontend/routes/apps.$appId.villages.$villageId.tsx
+++ b/src/frontend/routes/apps.$appId.villages.$villageId.tsx
@@ -1,5 +1,6 @@
 import { AreaChart } from '@mantine/charts'
 import {
+  Badge,
   Box,
   Button,
   Card,
@@ -10,6 +11,7 @@ import {
   SegmentedControl,
   SimpleGrid,
   Stack,
+  Switch,
   Text,
   Textarea,
   TextInput,
@@ -31,6 +33,7 @@ import {
   TbLayoutKanban,
   TbMapPin,
   TbPower,
+  TbTestPipe,
   TbUser,
   TbUsers,
   TbUsersGroup,
@@ -153,7 +156,7 @@ function VillageDetailPage() {
   const [editModalOpened, { open: openEditModal, close: closeEditModal }] = useDisclosure(false)
   const [isUpdating, setIsUpdating] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
-  const [editForm, setEditForm] = useState({ name: '', desc: '' })
+  const [editForm, setEditForm] = useState({ name: '', desc: '', isDummy: false })
 
   const village = infoRes?.data
   const stats = gridRes?.data
@@ -161,7 +164,8 @@ function VillageDetailPage() {
   const openEdit = () => {
     setEditForm({
       name: village?.name || '',
-      desc: village?.desc || ''
+      desc: village?.desc || '',
+      isDummy: village?.isDummy ?? false,
     })
     openEditModal()
   }
@@ -188,7 +192,8 @@ function VillageDetailPage() {
         body: JSON.stringify({
           id: village.id,
           name: editForm.name,
-          desc: editForm.desc
+          desc: editForm.desc,
+          isDummy: editForm.isDummy,
         })
       })
 
@@ -361,7 +366,20 @@ function VillageDetailPage() {
             </ThemeIcon>
 
             <Stack gap={6}>
-              <Title order={2} style={{ color: 'white', lineHeight: 1.1 }}>{village.name}</Title>
+              <Group gap="xs" align="center">
+                <Title order={2} style={{ color: 'white', lineHeight: 1.1 }}>{village.name}</Title>
+                {village.isDummy && (
+                  <Badge
+                    size="sm"
+                    variant="light"
+                    color="yellow"
+                    leftSection={<TbTestPipe size={11} />}
+                    style={{ textTransform: 'none' }}
+                  >
+                    Dummy
+                  </Badge>
+                )}
+              </Group>
 
               <Group gap={6}>
                 <TbMapPin size={14} color="rgba(255,255,255,0.8)" />
@@ -526,6 +544,12 @@ function VillageDetailPage() {
             value={editForm.desc}
             onChange={(e) => setEditForm(prev => ({ ...prev, desc: e.currentTarget.value }))}
           />
+          <Switch
+            label="Dummy Village"
+            description="Tandai desa ini sebagai data dummy"
+            checked={editForm.isDummy}
+            onChange={(e) => setEditForm(prev => ({ ...prev, isDummy: e.currentTarget.checked }))}
+          />
           <Group justify="flex-end" gap="sm" mt="md">
             <Button variant="light" color="gray" onClick={closeEditModal} radius="md">
               Cancel
diff --git a/src/frontend/routes/apps.$appId.villages.index.tsx b/src/frontend/routes/apps.$appId.villages.index.tsx
index a5f9c3e..64aded9 100644
--- a/src/frontend/routes/apps.$appId.villages.index.tsx
+++ b/src/frontend/routes/apps.$appId.villages.index.tsx
@@ -36,6 +36,7 @@ import {
   TbMapPin,
   TbPlus,
   TbSearch,
+  TbTestPipe,
   TbUser,
   TbX,
 } from 'react-icons/tb'
@@ -50,6 +51,7 @@ interface APIVillage {
   id: string
   name: string
   isActive: boolean
+  isDummy: boolean
   createdAt: string
   perbekel: string | null
 }
@@ -95,9 +97,16 @@ function VillageGridCard({ village, onClick }: { village: APIVillage; onClick: (
         >
           <TbHome2 size={22} />
         </ThemeIcon>
-        <Badge color={cfg.color} variant="light" radius="sm" size="sm">
-          {cfg.label}
-        </Badge>
+        <Group gap={6}>
+          {village.isDummy && (
+            <Badge color="yellow" variant="light" radius="sm" size="sm" leftSection={<TbTestPipe size={11} />}>
+              Dummy
+            </Badge>
+          )}
+          <Badge color={cfg.color} variant="light" radius="sm" size="sm">
+            {cfg.label}
+          </Badge>
+        </Group>
       </Group>
 
       <Text fw={800} size="lg" mb={2}>
@@ -175,6 +184,11 @@ function VillageListRow({ village, onClick }: { village: APIVillage; onClick: ()
           <Stack gap={2}>
             <Group gap="sm">
               <Text fw={700} size="sm">{village.name}</Text>
+              {village.isDummy && (
+                <Badge color="yellow" variant="light" radius="sm" size="xs" leftSection={<TbTestPipe size={10} />}>
+                  Dummy
+                </Badge>
+              )}
               <Badge color={cfg.color} variant="light" radius="sm" size="xs">
                 {cfg.label}
               </Badge>