chore: bump version to 0.1.12

- Rename "API Keys" → "Desa Mandiri Keys" (tab + panel title + description)
- Rename "Settings" → "App Config" (tab + panel title)
- Move "Desa Mandiri Keys" to last position with a divider separator
- Import Divider from @mantine/core

package.json

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

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

@@ -57,6 +57,7 @@ interface APIUser {
   gender: string
   isWithoutOTP: boolean
   isActive: boolean
+  isApprover: boolean
   role: string
   village: string
   group: string
@@ -118,7 +119,8 @@ function UsersIndexPage() {
     idGroup: '',
     idPosition: '',
     isActive: true,
-    isWithoutOTP: false
+    isWithoutOTP: false,
+    isApprover: false
   })
 
   // Options Data (Shared for both Add and Edit modals)
@@ -212,7 +214,8 @@ function UsersIndexPage() {
       idGroup: user.idGroup,
       idPosition: user.idPosition,
       isActive: user.isActive,
-      isWithoutOTP: user.isWithoutOTP
+      isWithoutOTP: user.isWithoutOTP,
+      isApprover: user.isApprover
     })
     setVillageSearch(user.village)
     openEdit()
@@ -544,6 +547,12 @@ function UsersIndexPage() {
               checked={editForm.isWithoutOTP}
               onChange={(event) => setEditForm(f => ({ ...f, isWithoutOTP: event.currentTarget.checked }))}
             />
+            <Switch
+              label="Approver"
+              description="Grant approver privileges to this user"
+              checked={editForm.isApprover}
+              onChange={(event) => setEditForm(f => ({ ...f, isApprover: event.currentTarget.checked }))}
+            />
           </SimpleGrid>
 
           <Button

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

@@ -422,7 +422,7 @@ function AppVillagesIndexPage() {
             <Select 
               label="Gender" 
               placeholder="Select gender"
-              data={['Male', 'Female']}
+              data={[{ label: 'Male', value: 'M' }, { label: 'Female', value: 'F' }]}
               mt="sm"
               required
               value={form.gender}

src/frontend/routes/dev.tsx

@@ -9,6 +9,7 @@ import {
   Card,
   Center,
   Container,
+  Divider,
   Group,
   Loader,
   Menu,
@@ -77,7 +78,7 @@ import { notifications } from '@mantine/notifications'
 import { type Role, useLogout, useSession } from '@/frontend/hooks/useAuth'
 import { usePresence } from '@/frontend/hooks/usePresence'
 
-const validTabs = ['overview', 'operators', 'bugs', 'app-logs', 'activity-logs', 'database', 'project', 'api-keys', 'settings'] as const
+const validTabs = ['overview', 'operators', 'bugs', 'app-logs', 'activity-logs', 'database', 'project', 'settings', 'api-keys'] as const
 
 export const Route = createFileRoute('/dev')({
   validateSearch: (search: Record<string, unknown>) => ({
@@ -117,8 +118,9 @@ const navItems = [
   // { label: 'Activity Logs', icon: TbActivity, key: 'activity-logs' },
   { label: 'Database', icon: TbDatabase, key: 'database' },
   { label: 'Project', icon: TbSitemap, key: 'project' },
-  { label: 'API Keys', icon: TbKey, key: 'api-keys' },
-  { label: 'Settings', icon: TbSettings, key: 'settings' },
+  { label: 'App Config', icon: TbSettings, key: 'settings' },
+  { divider: true, key: '__divider-external__' },
+  { label: 'Desa Mandiri Keys', icon: TbKey, key: 'api-keys' },
 ]
 
 function DevPage() {
@@ -201,7 +203,8 @@ function DevPage() {
         <AppShell.Section grow>
           <Stack gap={4}>
             {navItems.map((item) => {
-              const Icon = item.icon
+              if (item.divider) return <Divider key={item.key} my={4} />
+              const Icon = item.icon!
               if (collapsed) {
                 return (
                   <Tooltip key={item.key} label={item.label} position="right">
@@ -1590,7 +1593,7 @@ function SettingsPanel() {
     <Stack>
       <Group justify="space-between">
         <div>
-          <Title order={3}>Application Settings</Title>
+          <Title order={3}>App Config</Title>
           <Text size="sm" c="dimmed">Manage the URL API and API Key for each application.</Text>
         </div>
         <Button leftSection={<TbApps size={16} />} onClick={openAdd}>Add App</Button>
@@ -1798,8 +1801,8 @@ function ApiKeysPanel() {
     <Stack>
       <Group justify="space-between">
         <div>
-          <Title order={3}>API Keys</Title>
-          <Text size="sm" c="dimmed">Kelola API key untuk akses endpoint /api/ai/*</Text>
+          <Title order={3}>Desa Mandiri Keys</Title>
+          <Text size="sm" c="dimmed">Manage access tokens for the Desa Mandiri system</Text>
         </div>
         <Button leftSection={<TbKey size={14} />} onClick={openCreate}>
           Buat Key Baru