refactor: improve users page code quality

- extract shared UserFormFields component to eliminate form duplication between Add and Edit modals
- debounce search input (400ms) to prevent excessive API calls
- fix validation messages to show human-readable labels instead of internal field names
- fix pagination visibility condition (totalPage > 1)
- remove unused TbEdit import

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

@@ -22,16 +22,15 @@ import {
   Title,
   Tooltip,
 } from '@mantine/core'
-import { useDisclosure, useMediaQuery } from '@mantine/hooks'
+import { useDisclosure, useDebouncedValue, useMediaQuery } from '@mantine/hooks'
 import { notifications } from '@mantine/notifications'
 import { createFileRoute, useParams } from '@tanstack/react-router'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import {
   TbAlertCircle,
   TbBriefcase,
   TbCircleCheck,
   TbCircleX,
-  TbEdit,
   TbHome2,
   TbId,
   TbMail,
@@ -68,13 +67,161 @@ interface APIUser {
   idPosition: string
 }
 
+interface BaseUserForm {
+  name: string
+  nik: string
+  phone: string
+  email: string
+  gender: string
+  idUserRole: string
+  idVillage: string
+  idGroup: string
+  idPosition: string
+}
+
+const FIELD_LABELS: Record<string, string> = {
+  name: 'Full Name',
+  nik: 'NIK',
+  phone: 'Phone Number',
+  email: 'Email Address',
+  gender: 'Gender',
+  idUserRole: 'User Role',
+  idVillage: 'Village',
+  idGroup: 'Group',
+}
+
+const REQUIRED_FIELDS = ['name', 'nik', 'phone', 'email', 'gender', 'idUserRole', 'idVillage', 'idGroup']
+
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
+interface UserFormFieldsProps {
+  values: BaseUserForm
+  onChange: (updates: Partial<BaseUserForm>) => void
+  villageSearch: string
+  onVillageSearchChange: (v: string) => void
+  rolesOptions: { value: string; label: string }[]
+  villagesOptions: { value: string; label: string }[]
+  groupsOptions: { value: string; label: string }[]
+  positionsOptions: { value: string; label: string }[]
+}
+
+function UserFormFields({
+  values,
+  onChange,
+  onVillageSearchChange,
+  rolesOptions,
+  villagesOptions,
+  groupsOptions,
+  positionsOptions,
+}: UserFormFieldsProps) {
+  return (
+    <>
+      <Box>
+        <Text size="xs" fw={700} c="dimmed" mb={8} tt="uppercase" style={{ letterSpacing: '0.05em' }}>
+          Personal Information
+        </Text>
+        <SimpleGrid cols={2} spacing="md">
+          <TextInput
+            label="Full Name"
+            placeholder="Enter full name"
+            required
+            value={values.name}
+            onChange={(e) => onChange({ name: e.target.value })}
+          />
+          <TextInput
+            label="NIK"
+            placeholder="16-digit identity number"
+            required
+            value={values.nik}
+            onChange={(e) => onChange({ nik: e.target.value })}
+          />
+        </SimpleGrid>
+
+        <SimpleGrid cols={2} spacing="md" mt="sm">
+          <TextInput
+            label="Email Address"
+            placeholder="email@example.com"
+            required
+            value={values.email}
+            onChange={(e) => onChange({ email: e.target.value })}
+          />
+          <TextInput
+            label="Phone Number"
+            placeholder="628xxxxxxxxxx"
+            required
+            value={values.phone}
+            onChange={(e) => onChange({ phone: e.target.value })}
+          />
+        </SimpleGrid>
+
+        <Select
+          label="Gender"
+          placeholder="Select gender"
+          data={[
+            { value: 'M', label: 'Male' },
+            { value: 'F', label: 'Female' },
+          ]}
+          mt="sm"
+          required
+          value={values.gender}
+          onChange={(v) => onChange({ gender: v || '' })}
+        />
+      </Box>
+
+      <Divider label="Role & Organization" labelPosition="center" my="sm" />
+
+      <Box>
+        <Select
+          label="User Role"
+          placeholder="Select user role"
+          data={rolesOptions}
+          required
+          value={values.idUserRole}
+          onChange={(v) => onChange({ idUserRole: v || '' })}
+        />
+
+        <Select
+          label="Village"
+          placeholder="Type to search village..."
+          searchable
+          onSearchChange={onVillageSearchChange}
+          data={villagesOptions}
+          mt="sm"
+          required
+          value={values.idVillage}
+          onChange={(v) => onChange({ idVillage: v || '', idGroup: '', idPosition: '' })}
+        />
+
+        <SimpleGrid cols={2} spacing="md" mt="sm">
+          <Select
+            label="Group"
+            placeholder={values.idVillage ? 'Select group' : 'Select village first'}
+            data={groupsOptions}
+            disabled={!values.idVillage}
+            required
+            value={values.idGroup}
+            onChange={(v) => onChange({ idGroup: v || '', idPosition: '' })}
+          />
+          <Select
+            label="Position"
+            placeholder={values.idGroup ? 'Select position' : 'Select group first'}
+            data={positionsOptions}
+            disabled={!values.idGroup}
+            value={values.idPosition || ''}
+            onChange={(v) => onChange({ idPosition: v || '' })}
+          />
+        </SimpleGrid>
+      </Box>
+    </>
+  )
+}
+
 function UsersIndexPage() {
   const { appId } = useParams({ from: '/apps/$appId/users/' })
   const [page, setPage] = useState(1)
   const [search, setSearch] = useState('')
   const [searchQuery, setSearchQuery] = useState('')
+  const [debouncedSearch] = useDebouncedValue(search, 400)
 
   const isDesaPlus = appId === 'desa-plus'
   const apiUrl = isDesaPlus ? API_URLS.getUsers(page, searchQuery) : null
@@ -82,19 +229,24 @@ function UsersIndexPage() {
   const { data: response, error, isLoading, mutate } = useSWR(apiUrl, fetcher)
   const users: APIUser[] = response?.data?.user || []
 
-  const handleSearchChange = (val: string) => {
+  useEffect(() => {
-    setSearch(val)
+    if (debouncedSearch.length >= 3 || debouncedSearch.length === 0) {
-    if (val.length >= 3 || val.length === 0) {
+      setSearchQuery(debouncedSearch)
-      setSearchQuery(val)
       setPage(1)
     }
+  }, [debouncedSearch])
+
+  const handleClearSearch = () => {
+    setSearch('')
+    setSearchQuery('')
+    setPage(1)
   }
 
   // --- ADD USER LOGIC ---
   const [opened, { open, close }] = useDisclosure(false)
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [villageSearch, setVillageSearch] = useState('')
-  const [form, setForm] = useState({
+  const [form, setForm] = useState<BaseUserForm>({
     name: '',
     nik: '',
     phone: '',
@@ -103,7 +255,7 @@ function UsersIndexPage() {
     idUserRole: '',
     idVillage: '',
     idGroup: '',
-    idPosition: ''
+    idPosition: '',
   })
 
   const [editOpened, { open: openEdit, close: closeEdit }] = useDisclosure(false)
@@ -120,7 +272,7 @@ function UsersIndexPage() {
     idPosition: '',
     isActive: true,
     isWithoutOTP: false,
-    isApprover: false
+    isApprover: false,
   })
 
   // Options Data (Shared for both Add and Edit modals)
@@ -147,15 +299,16 @@ function UsersIndexPage() {
   const groupsOptions = (groupsResp?.data || []).map((g: any) => ({ value: g.id, label: g.name }))
   const positionsOptions = (positionsResp?.data || []).map((p: any) => ({ value: p.id, label: p.name }))
 
-  const handleCreateUser = async () => {
+  const getMissingFields = (data: BaseUserForm) =>
-    const requiredFields = ['name', 'nik', 'phone', 'email', 'gender', 'idUserRole', 'idVillage', 'idGroup']
+    REQUIRED_FIELDS.filter((f) => !data[f as keyof BaseUserForm]).map((f) => FIELD_LABELS[f] ?? f)
-    const missing = requiredFields.filter(f => !form[f as keyof typeof form])
 
+  const handleCreateUser = async () => {
+    const missing = getMissingFields(form)
     if (missing.length > 0) {
       notifications.show({
         title: 'Validation Error',
-        message: `Please fill in all required fields: ${missing.join(', ')}`,
+        message: `Please fill in: ${missing.join(', ')}`,
-        color: 'red'
+        color: 'red',
       })
       return
     }
@@ -165,7 +318,7 @@ function UsersIndexPage() {
       const res = await fetch(API_URLS.createUser(), {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(form)
+        body: JSON.stringify(form),
       })
 
       const result = await res.json()
@@ -174,14 +327,14 @@ function UsersIndexPage() {
         await fetch(API_URLS.createLog(), {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ type: 'CREATE', message: `New user registered (${appId}): ${form.name} - ${form.nik}` })
+          body: JSON.stringify({ type: 'CREATE', message: `New user registered (${appId}): ${form.name} - ${form.nik}` }),
         }).catch(console.error)
 
         notifications.show({
           title: 'Success',
           message: 'User has been created successfully.',
           color: 'teal',
-          icon: <TbCircleCheck size={18} />
+          icon: <TbCircleCheck size={18} />,
         })
         mutate()
         close()
@@ -191,7 +344,7 @@ function UsersIndexPage() {
           title: 'Error',
           message: result.message || 'Failed to create user.',
           color: 'red',
-          icon: <TbCircleX size={18} />
+          icon: <TbCircleX size={18} />,
         })
       }
     } catch {
@@ -215,21 +368,19 @@ function UsersIndexPage() {
       idPosition: user.idPosition,
       isActive: user.isActive,
       isWithoutOTP: user.isWithoutOTP,
-      isApprover: user.isApprover
+      isApprover: user.isApprover,
     })
     setVillageSearch(user.village)
     openEdit()
   }
 
   const handleUpdateUser = async () => {
-    const requiredFields = ['name', 'nik', 'phone', 'email', 'gender', 'idUserRole', 'idVillage', 'idGroup']
+    const missing = getMissingFields(editForm)
-    const missing = requiredFields.filter(f => !editForm[f as keyof typeof editForm])
-
     if (missing.length > 0) {
       notifications.show({
         title: 'Validation Error',
-        message: `Please fill in all required fields: ${missing.join(', ')}`,
+        message: `Please fill in: ${missing.join(', ')}`,
-        color: 'red'
+        color: 'red',
       })
       return
     }
@@ -239,7 +390,7 @@ function UsersIndexPage() {
       const res = await fetch(API_URLS.editUser(), {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(editForm)
+        body: JSON.stringify(editForm),
       })
 
       const result = await res.json()
@@ -248,14 +399,14 @@ function UsersIndexPage() {
         await fetch(API_URLS.createLog(), {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ type: 'UPDATE', message: `User updated (${appId}): ${editForm.name} - ${editForm.id}` })
+          body: JSON.stringify({ type: 'UPDATE', message: `User updated (${appId}): ${editForm.name} - ${editForm.id}` }),
         }).catch(console.error)
 
         notifications.show({
           title: 'Success',
           message: 'User has been updated successfully.',
           color: 'teal',
-          icon: <TbCircleCheck size={18} />
+          icon: <TbCircleCheck size={18} />,
         })
         mutate()
         closeEdit()
@@ -264,7 +415,7 @@ function UsersIndexPage() {
           title: 'Error',
           message: result.message || 'Failed to update user.',
           color: 'red',
-          icon: <TbCircleX size={18} />
+          icon: <TbCircleX size={18} />,
         })
       }
     } catch {
@@ -274,12 +425,6 @@ function UsersIndexPage() {
     }
   }
 
-  const handleClearSearch = () => {
-    setSearch('')
-    setSearchQuery('')
-    setPage(1)
-  }
-
   const getRoleColor = (role: string) => {
     const r = role.toLowerCase()
     if (r.includes('super')) return 'red'
@@ -290,6 +435,15 @@ function UsersIndexPage() {
 
   const isMobile = useMediaQuery('(max-width: 768px)')
 
+  const sharedFormProps = {
+    villageSearch,
+    onVillageSearchChange: setVillageSearch,
+    rolesOptions,
+    villagesOptions,
+    groupsOptions,
+    positionsOptions,
+  }
+
   if (!isDesaPlus) {
     return (
       <Paper withBorder radius="2xl" className="glass" p="xl">
@@ -314,102 +468,11 @@ function UsersIndexPage() {
         overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
       >
         <Stack gap="md">
-          <Box>
+          <UserFormFields
-            <Text size="xs" fw={700} c="dimmed" mb={8} tt="uppercase" style={{ letterSpacing: '0.05em' }}>
+            values={form}
-              Personal Information
+            onChange={(updates) => setForm((f) => ({ ...f, ...updates }))}
-            </Text>
+            {...sharedFormProps}
-            <SimpleGrid cols={2} spacing="md">
+          />
-              <TextInput
-                label="Full Name"
-                placeholder="Enter full name"
-                required
-                value={form.name}
-                onChange={(e) => setForm(f => ({ ...f, name: e.target.value }))}
-              />
-              <TextInput
-                label="NIK"
-                placeholder="16-digit identity number"
-                required
-                value={form.nik}
-                onChange={(e) => setForm(f => ({ ...f, nik: e.target.value }))}
-              />
-            </SimpleGrid>
-
-            <SimpleGrid cols={2} spacing="md" mt="sm">
-              <TextInput
-                label="Email Address"
-                placeholder="email@example.com"
-                required
-                value={form.email}
-                onChange={(e) => setForm(f => ({ ...f, email: e.target.value }))}
-              />
-              <TextInput
-                label="Phone Number"
-                placeholder="628xxxxxxxxxx"
-                required
-                value={form.phone}
-                onChange={(e) => setForm(f => ({ ...f, phone: e.target.value }))}
-              />
-            </SimpleGrid>
-
-            <Select
-              label="Gender"
-              placeholder="Select gender"
-              data={[
-                { value: 'M', label: 'Male' },
-                { value: 'F', label: 'Female' },
-              ]}
-              mt="sm"
-              required
-              value={form.gender}
-              onChange={(v) => setForm(f => ({ ...f, gender: v || '' }))}
-            />
-          </Box>
-
-          <Divider label="Role & Organization" labelPosition="center" my="sm" />
-
-          <Box>
-            <Select
-              label="User Role"
-              placeholder="Select user role"
-              data={rolesOptions}
-              required
-              value={form.idUserRole}
-              onChange={(v) => setForm(f => ({ ...f, idUserRole: v || '' }))}
-            />
-
-            <Select
-              label="Village"
-              placeholder="Type to search village..."
-              searchable
-              onSearchChange={setVillageSearch}
-              data={villagesOptions}
-              mt="sm"
-              required
-              value={form.idVillage}
-              onChange={(v) => setForm(f => ({ ...f, idVillage: v || '', idGroup: '', idPosition: '' }))}
-            />
-
-            <SimpleGrid cols={2} spacing="md" mt="sm">
-              <Select
-                label="Group"
-                placeholder={form.idVillage ? 'Select group' : 'Select village first'}
-                data={groupsOptions}
-                disabled={!form.idVillage}
-                required
-                value={form.idGroup}
-                onChange={(v) => setForm(f => ({ ...f, idGroup: v || '', idPosition: '' }))}
-              />
-              <Select
-                label="Position"
-                placeholder={form.idGroup ? 'Select position' : 'Select group first'}
-                data={positionsOptions}
-                disabled={!form.idGroup}
-                value={form.idPosition || ''}
-                onChange={(v) => setForm(f => ({ ...f, idPosition: v || '' }))}
-              />
-            </SimpleGrid>
-          </Box>
 
           <Button
             fullWidth
@@ -435,102 +498,11 @@ function UsersIndexPage() {
         overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
       >
         <Stack gap="md">
-          <Box>
+          <UserFormFields
-            <Text size="xs" fw={700} c="dimmed" mb={8} tt="uppercase" style={{ letterSpacing: '0.05em' }}>
+            values={editForm}
-              Personal Information
+            onChange={(updates) => setEditForm((f) => ({ ...f, ...updates }))}
-            </Text>
+            {...sharedFormProps}
-            <SimpleGrid cols={2} spacing="md">
+          />
-              <TextInput
-                label="Full Name"
-                placeholder="Enter full name"
-                required
-                value={editForm.name}
-                onChange={(e) => setEditForm(f => ({ ...f, name: e.target.value }))}
-              />
-              <TextInput
-                label="NIK"
-                placeholder="16-digit identity number"
-                required
-                value={editForm.nik}
-                onChange={(e) => setEditForm(f => ({ ...f, nik: e.target.value }))}
-              />
-            </SimpleGrid>
-
-            <SimpleGrid cols={2} spacing="md" mt="sm">
-              <TextInput
-                label="Email Address"
-                placeholder="email@example.com"
-                required
-                value={editForm.email}
-                onChange={(e) => setEditForm(f => ({ ...f, email: e.target.value }))}
-              />
-              <TextInput
-                label="Phone Number"
-                placeholder="628xxxxxxxxxx"
-                required
-                value={editForm.phone}
-                onChange={(e) => setEditForm(f => ({ ...f, phone: e.target.value }))}
-              />
-            </SimpleGrid>
-
-            <Select
-              label="Gender"
-              placeholder="Select gender"
-              data={[
-                { value: 'M', label: 'Male' },
-                { value: 'F', label: 'Female' },
-              ]}
-              mt="sm"
-              required
-              value={editForm.gender}
-              onChange={(v) => setEditForm(f => ({ ...f, gender: v || '' }))}
-            />
-          </Box>
-
-          <Divider label="Role & Organization" labelPosition="center" my="sm" />
-
-          <Box>
-            <Select
-              label="User Role"
-              placeholder="Select user role"
-              data={rolesOptions}
-              required
-              value={editForm.idUserRole}
-              onChange={(v) => setEditForm(f => ({ ...f, idUserRole: v || '' }))}
-            />
-
-            <Select
-              label="Village"
-              placeholder="Type to search village..."
-              searchable
-              onSearchChange={setVillageSearch}
-              data={villagesOptions}
-              mt="sm"
-              required
-              value={editForm.idVillage}
-              onChange={(v) => setEditForm(f => ({ ...f, idVillage: v || '', idGroup: '', idPosition: '' }))}
-            />
-
-            <SimpleGrid cols={2} spacing="md" mt="sm">
-              <Select
-                label="Group"
-                placeholder={editForm.idVillage ? 'Select group' : 'Select village first'}
-                data={groupsOptions}
-                disabled={!editForm.idVillage}
-                required
-                value={editForm.idGroup}
-                onChange={(v) => setEditForm(f => ({ ...f, idGroup: v || '', idPosition: '' }))}
-              />
-              <Select
-                label="Position"
-                placeholder={editForm.idGroup ? 'Select position' : 'Select group first'}
-                data={positionsOptions}
-                disabled={!editForm.idGroup}
-                value={editForm.idPosition || ''}
-                onChange={(v) => setEditForm(f => ({ ...f, idPosition: v || '' }))}
-              />
-            </SimpleGrid>
-          </Box>
 
           <Divider label="System Access" labelPosition="center" my="sm" />
 
@@ -539,19 +511,19 @@ function UsersIndexPage() {
               label="Account Active"
               description="Enable or disable user access"
               checked={editForm.isActive}
-              onChange={(event) => setEditForm(f => ({ ...f, isActive: event.currentTarget.checked }))}
+              onChange={(event) => setEditForm((f) => ({ ...f, isActive: event.currentTarget.checked }))}
             />
             <Switch
               label="Without OTP"
               description="Bypass login OTP verification"
               checked={editForm.isWithoutOTP}
-              onChange={(event) => setEditForm(f => ({ ...f, isWithoutOTP: event.currentTarget.checked }))}
+              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 }))}
+              onChange={(event) => setEditForm((f) => ({ ...f, isApprover: event.currentTarget.checked }))}
             />
           </SimpleGrid>
 
@@ -604,7 +576,7 @@ function UsersIndexPage() {
             ) : null
           }
           value={search}
-          onChange={(e) => handleSearchChange(e.currentTarget.value)}
+          onChange={(e) => setSearch(e.currentTarget.value)}
           radius="md"
         />
       </Paper>
@@ -754,7 +726,7 @@ function UsersIndexPage() {
         </Paper>
       )}
 
-      {!isLoading && !error && response?.data?.totalPage > 0 && (
+      {!isLoading && !error && response?.data?.totalPage > 1 && (
         <Group justify="center">
           <Pagination
             value={page}