Merge pull request 'amalia/12-mei-26' (#20) from amalia/12-mei-26 into main

Reviewed-on: #20

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bun-react-template",
-  "version": "0.1.4",
+  "version": "0.1.8",
   "private": true,
   "type": "module",
   "scripts": {

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

@@ -37,11 +37,10 @@ import {
   TbCircleX,
   TbDeviceDesktop,
   TbDeviceMobile,
-  TbFilter,
   TbHistory,
   TbPhoto,
   TbPlus,
-  TbSearch,
+  TbSearch
 } from 'react-icons/tb'
 import { API_URLS } from '../config/api'
 
@@ -431,10 +430,9 @@ function AppErrorsPage() {
           />
           <Stack justify="flex-end">
             <Button
-              variant="subtle"
+              variant="filled"
-              color="gray"
+              color="violet"
               size="sm"
-              leftSection={<TbFilter size={16} />}
               onClick={() => { setSearch(''); setStatus('all') }}
             >
               Reset Filters

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

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">
+        <Group gap={6}>
-          {cfg.label}
+          {village.isDummy && (
-        </Badge>
+            <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>

src/frontend/routes/index.tsx

@@ -1,6 +1,7 @@
 import { Button, Box, Center, Stack, Text, Title } from '@mantine/core'
 import { Link, createFileRoute } from '@tanstack/react-router'
 import { TbLogin } from 'react-icons/tb'
+import logoUrl from '../../logo.svg'
 
 export const Route = createFileRoute('/')({
   component: HomePage,
@@ -32,7 +33,7 @@ function HomePage() {
       <Center mih="100vh" style={{ position: 'relative', zIndex: 1 }}>
         <Stack align="center" gap="xl">
           <img
-            src="/src/logo.svg"
+            src={logoUrl}
             width={72}
             height={72}
             alt="logo"

src/frontend/routes/login.tsx

@@ -1,4 +1,5 @@
 import { useLogin } from '@/frontend/hooks/useAuth'
+import logoUrl from '../../logo.svg'
 import {
   Alert,
   Box,
@@ -102,7 +103,7 @@ function LoginPage() {
               {/* header */}
               <Stack gap={8} align="center" mb={4}>
                 <img
-                  src="/src/logo.svg"
+                  src={logoUrl}
                   width={56}
                   height={56}
                   alt="logo"