From 1e0b0c28f96cbe751a6ca94981168249c9c5af83 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sat, 25 Jul 2026 13:11:42 +0700
Subject: [PATCH] feat: implement user management module with CRUD
 functionality, including user list, create, and edit pages; update sidebar
 with user menu

---
 app/components/AppSidebar.vue                 |   4 +-
 app/components/ui/phone-input/PhoneInput.vue  |  46 ++++
 app/components/ui/phone-input/index.ts        |   1 +
 app/pages/admin/users/[id]/edit.vue           | 232 ++++++++++++++++++
 app/pages/admin/users/columns.ts              | 125 ++++++++++
 app/pages/admin/users/create.vue              | 214 ++++++++++++++++
 app/pages/admin/users/index.vue               | 176 +++++++++++++
 .../history/2026-07-25-modul-user-pengguna.md |  48 ++++
 ...26-07-25-perbaikan-user-form-dan-filter.md |  70 ++++++
 9 files changed, 915 insertions(+), 1 deletion(-)
 create mode 100644 app/components/ui/phone-input/PhoneInput.vue
 create mode 100644 app/components/ui/phone-input/index.ts
 create mode 100644 app/pages/admin/users/[id]/edit.vue
 create mode 100644 app/pages/admin/users/columns.ts
 create mode 100644 app/pages/admin/users/create.vue
 create mode 100644 app/pages/admin/users/index.vue
 create mode 100644 docs/history/2026-07-25-modul-user-pengguna.md
 create mode 100644 docs/history/2026-07-25-perbaikan-user-form-dan-filter.md

diff --git a/app/components/AppSidebar.vue b/app/components/AppSidebar.vue
index e1a3f56..47bc5f7 100644
--- a/app/components/AppSidebar.vue
+++ b/app/components/AppSidebar.vue
@@ -4,7 +4,8 @@ import {
   CreditCard,
   Database,
   FolderKanban,
-  LayoutDashboard
+  LayoutDashboard,
+  Users
 } from "@lucide/vue"
 import { computed, ref, watch } from 'vue'
 
@@ -35,6 +36,7 @@ const groups = [
       { title: 'Dashboard', url: '/admin/dashboard', icon: LayoutDashboard },
       { title: 'Jenis Bisnis', url: '/admin/business-types', icon: BriefcaseBusiness },
       { title: 'Paket', url: '/admin/plans', icon: CreditCard },
+      { title: 'Pengguna', url: '/admin/users', icon: Users },
     ],
   },
 ]
diff --git a/app/components/ui/phone-input/PhoneInput.vue b/app/components/ui/phone-input/PhoneInput.vue
new file mode 100644
index 0000000..faaf18b
--- /dev/null
+++ b/app/components/ui/phone-input/PhoneInput.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  modelValue?: string
+  disabled?: boolean
+  class?: any
+  id?: string
+  placeholder?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+function formatPhone(val: string): string {
+  const digits = val.replace(/\D/g, '').slice(0, 13)
+  const parts: string[] = []
+  if (digits.length > 0) parts.push(digits.slice(0, 4))
+  if (digits.length > 4) parts.push(digits.slice(4, 8))
+  if (digits.length > 8) parts.push(digits.slice(8, 13))
+  return parts.join(' ')
+}
+
+function onInput(e: Event) {
+  const raw = (e.target as HTMLInputElement).value
+  const formatted = formatPhone(raw)
+  emit('update:modelValue', formatted)
+}
+</script>
+
+<template>
+  <input
+    :id="id"
+    :value="modelValue"
+    :disabled="disabled"
+    :placeholder="placeholder ?? 'Contoh: 0821 1234 5678'"
+    maxlength="14"
+    data-slot="input"
+    :class="cn(
+      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3',
+      props.class,
+    )"
+    @input="onInput"
+  />
+</template>
diff --git a/app/components/ui/phone-input/index.ts b/app/components/ui/phone-input/index.ts
new file mode 100644
index 0000000..21323be
--- /dev/null
+++ b/app/components/ui/phone-input/index.ts
@@ -0,0 +1 @@
+export { default as PhoneInput } from "./PhoneInput.vue"
diff --git a/app/pages/admin/users/[id]/edit.vue b/app/pages/admin/users/[id]/edit.vue
new file mode 100644
index 0000000..f48f569
--- /dev/null
+++ b/app/pages/admin/users/[id]/edit.vue
@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import AppSidebar from '@/components/AppSidebar.vue'
+import SiteHeader from '@/components/SiteHeader.vue'
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from '@/components/ui/alert'
+import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar'
+
+import { CalendarDate } from '@internationalized/date'
+import { AlertCircleIcon, ArrowLeft, CalendarIcon, Loader2 } from '@lucide/vue'
+import { reactive, ref } from 'vue'
+import { toast } from 'vue-sonner'
+
+import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
+import {
+  Card,
+  CardContent,
+} from '@/components/ui/card'
+import {
+  Field,
+  FieldGroup,
+  FieldLabel,
+} from '@/components/ui/field'
+import { Input } from '@/components/ui/input'
+import { PhoneInput } from '@/components/ui/phone-input'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { cn } from '@/lib/utils'
+
+const router = useRouter()
+const route = useRoute()
+const config = useRuntimeConfig()
+
+const { data: user, status } = useFetch<any>(`${config.public.apiBase}/users/${route.params.id}`)
+
+const form = ref({
+  email: '',
+  username: '',
+  full_name: '',
+  phone: '',
+  address: '',
+  pob: '',
+})
+const dob = ref<CalendarDate>()
+
+const errors = reactive<Record<string, string>>({})
+const loading = ref(false)
+
+function validate() {
+  Object.keys(errors).forEach(k => delete errors[k])
+  if (!form.value.email.trim()) errors.email = 'Email wajib diisi'
+  if (!form.value.username.trim()) errors.username = 'Username wajib diisi'
+  if (!form.value.full_name.trim()) errors.full_name = 'Nama lengkap wajib diisi'
+  return Object.keys(errors).length === 0
+}
+
+watch(user, (val) => {
+  if (val) {
+    form.value = {
+      email: val.email ?? '',
+      username: val.username ?? '',
+      full_name: val.profile?.full_name ?? '',
+      phone: val.profile?.phone ?? '',
+      address: val.profile?.address ?? '',
+      pob: val.profile?.pob ?? '',
+    }
+    if (val.profile?.dob) {
+      const [y, m, d] = val.profile.dob.split('-').map(Number)
+      dob.value = new CalendarDate(y, m, d)
+    }
+  }
+})
+
+async function handleSubmit() {
+  if (!validate()) {
+    toast.error('Harap lengkapi form yang wajib diisi')
+    return
+  }
+
+  loading.value = true
+  try {
+    const body: Record<string, any> = {
+      email: form.value.email.trim(),
+      username: form.value.username.trim(),
+      full_name: form.value.full_name.trim(),
+    }
+    if (form.value.phone.trim()) body.phone = form.value.phone.replace(/\s/g, '')
+    if (form.value.address.trim()) body.address = form.value.address.trim()
+    if (form.value.pob.trim()) body.pob = form.value.pob.trim()
+    if (dob.value) body.dob = dob.value.toString()
+
+    await $fetch(`${config.public.apiBase}/users/${route.params.id}`, {
+      method: 'PUT',
+      body,
+    })
+    toast.success('Pengguna berhasil diperbarui')
+    router.push('/admin/users')
+  } catch (e: any) {
+    const detail = e?.data?.detail
+    if (Array.isArray(detail)) {
+      for (const err of detail) {
+        const field = err.loc?.at(-1)
+        if (field && ['email', 'username', 'full_name', 'phone', 'address', 'pob', 'dob'].includes(field)) {
+          errors[field] = err.msg
+        }
+      }
+      if (Object.keys(errors).length) toast.error('Silakan cek kembali data yang Anda masukkan')
+    } else {
+      const msg = detail?.message ?? e?.data?.message ?? ''
+      if (msg.toLowerCase().includes('email')) errors.email = msg
+      if (msg.toLowerCase().includes('username')) errors.username = msg
+      if (!errors.email && !errors.username) toast.error(msg || 'Gagal menyimpan pengguna')
+    }
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <SidebarProvider :style="{
+    '--sidebar-width': 'calc(var(--spacing) * 72)',
+    '--header-height': 'calc(var(--spacing) * 12)',
+  }">
+    <AppSidebar variant="inset" />
+    <SidebarInset>
+      <SiteHeader />
+      <div class="flex flex-1 flex-col">
+        <div class="@container/main flex flex-1 flex-col gap-2">
+          <div class="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+            <div class="px-4 lg:px-6">
+              <div v-if="status === 'pending'" class="flex items-center justify-center py-12">
+                <Loader2 class="h-6 w-6 animate-spin text-muted-foreground" />
+              </div>
+              <template v-else-if="user">
+                <div class="flex items-center justify-between">
+                  <h1 class="text-2xl font-bold">Edit Pengguna</h1>
+                  <Button variant="outline" size="sm" @click="router.push('/admin/users')">
+                    <ArrowLeft class="h-4 w-4 mr-1" />
+                    Kembali
+                  </Button>
+                </div>
+              </template>
+            </div>
+            <div v-if="user" class="px-4 lg:px-6">
+              <form @submit.prevent="handleSubmit">
+                <Card>
+                  <CardContent>
+                    <FieldGroup class="gap-4">
+                      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <Field>
+                          <FieldLabel for="form-email">Email <span class="text-red-500">*</span></FieldLabel>
+                          <Input id="form-email" v-model="form.email" placeholder="Masukkan email" :disabled="loading"
+                            :class="{ 'border-red-500': errors.email }" />
+                          <p v-if="errors.email" class="text-sm text-red-500">{{ errors.email }}</p>
+                        </Field>
+                        <Field>
+                          <FieldLabel for="form-username">Username <span class="text-red-500">*</span></FieldLabel>
+                          <Input id="form-username" v-model="form.username" placeholder="Masukkan username"
+                            :disabled="loading" :class="{ 'border-red-500': errors.username }" />
+                          <p v-if="errors.username" class="text-sm text-red-500">{{ errors.username }}</p>
+                        </Field>
+                      </div>
+                      <Field>
+                        <FieldLabel for="form-full-name">Nama Lengkap <span class="text-red-500">*</span></FieldLabel>
+                        <Input id="form-full-name" v-model="form.full_name" placeholder="Masukkan nama lengkap"
+                          :disabled="loading" :class="{ 'border-red-500': errors.full_name }" />
+                        <p v-if="errors.full_name" class="text-sm text-red-500">{{ errors.full_name }}</p>
+                      </Field>
+                      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <Field>
+                          <FieldLabel for="form-phone">No. Telepon</FieldLabel>
+                          <PhoneInput id="form-phone" v-model="form.phone" :disabled="loading"
+                            :class="{ 'border-red-500': errors.phone }" />
+                        </Field>
+                        <Field>
+                          <FieldLabel for="form-pob">Tempat Lahir</FieldLabel>
+                          <Input id="form-pob" v-model="form.pob" placeholder="Masukkan tempat lahir"
+                            :disabled="loading" />
+                        </Field>
+                        <Field>
+                          <FieldLabel for="form-dob">Tanggal Lahir</FieldLabel>
+                          <Popover>
+                            <PopoverTrigger as-child>
+                              <Button id="form-dob" variant="outline" :disabled="loading" :class="cn(
+                                'w-full justify-start text-left font-normal',
+                                !dob && 'text-muted-foreground',
+                              )">
+                                <CalendarIcon class="mr-2 h-4 w-4" />
+                                {{ dob ? dob.toDate('UTC').toLocaleDateString('id-ID', {
+                                  day: 'numeric', month: 'long',
+                                  year: 'numeric'
+                                }) : 'Pilih tanggal' }}
+                              </Button>
+                            </PopoverTrigger>
+                            <PopoverContent class="w-auto p-0">
+                              <Calendar v-model="dob" :initial-focus="true" layout="month-and-year" />
+                            </PopoverContent>
+                          </Popover>
+                        </Field>
+                      </div>
+                      <Field>
+                        <FieldLabel for="form-address">Alamat</FieldLabel>
+                        <textarea id="form-address" v-model="form.address" placeholder="Masukkan alamat"
+                          :disabled="loading" rows="2"
+                          class="flex w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50" />
+                      </Field>
+                    </FieldGroup>
+                  </CardContent>
+                </Card>
+                <div class="flex items-center justify-end gap-2 mt-4">
+                  <Button type="button" variant="outline" :disabled="loading"
+                    @click="router.push('/admin/users')">Batal</Button>
+                  <Button type="submit" :disabled="loading">
+                    <Loader2 v-if="loading" class="h-4 w-4 mr-1 animate-spin" />
+                    Simpan
+                  </Button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/app/pages/admin/users/columns.ts b/app/pages/admin/users/columns.ts
new file mode 100644
index 0000000..cd03302
--- /dev/null
+++ b/app/pages/admin/users/columns.ts
@@ -0,0 +1,125 @@
+import type { ColumnDef, FilterFn } from '@tanstack/vue-table'
+import { ArrowUpDown, Pencil, Trash2 } from '@lucide/vue'
+import { h } from 'vue'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+
+export interface User {
+  id: string
+  email: string
+  username: string
+  status: string
+  profile: {
+    full_name: string
+    phone: string | null
+    address: string | null
+    pob: string | null
+    dob: string | null
+  } | null
+  created_at: string
+}
+
+const statusConfig: Record<string, { label: string, class: string }> = {
+  ACTIVE: { label: 'Aktif', class: 'border-emerald-500 text-emerald-600 bg-emerald-50' },
+  ONBOARDING: { label: 'Onboarding', class: 'border-blue-500 text-blue-600 bg-blue-50' },
+  INACTIVE: { label: 'Nonaktif', class: 'border-gray-500 text-gray-600 bg-gray-50' },
+  SUSPENDED: { label: 'Ditangguhkan', class: 'border-orange-500 text-orange-600 bg-orange-50' },
+  DISABLED: { label: 'Dinonaktifkan', class: 'border-red-500 text-red-600 bg-red-50' },
+}
+
+const searchFilter: FilterFn<User> = (row, _columnId, filterValue) => {
+  const search = (filterValue as string).toLowerCase()
+  const email = (row.original.email as string).toLowerCase()
+  const username = (row.original.username as string).toLowerCase()
+  const name = (row.original.profile?.full_name ?? '').toLowerCase()
+  return email.includes(search) || username.includes(search) || name.includes(search)
+}
+
+export function getColumns(callbacks: {
+  onEdit: (user: User) => void
+  onDelete: (user: User) => void
+}): ColumnDef<User>[] {
+  return [
+    {
+      id: 'search',
+      accessorFn: row => row.email,
+      header: 'Akun',
+      cell: ({ row }) => h('div', { class: 'flex flex-col' }, [
+        h('span', { class: 'font-medium' }, row.original.email),
+        h('span', { class: 'text-xs text-muted-foreground' }, `@${row.original.username}`),
+      ]),
+      filterFn: searchFilter,
+      enableHiding: false,
+    },
+    {
+      accessorFn: row => row.profile?.full_name ?? '-',
+      id: 'full_name',
+      header: 'Nama Lengkap',
+      cell: ({ row }) => h('div', { class: 'text-muted-foreground' }, row.original.profile?.full_name ?? '-'),
+    },
+    {
+      accessorFn: row => row.profile?.phone ?? '-',
+      id: 'phone',
+      header: 'No. Telepon',
+      cell: ({ row }) => h('div', { class: 'text-muted-foreground' }, row.original.profile?.phone ?? '-'),
+    },
+    {
+      accessorKey: 'status',
+      header: 'Status',
+      cell: ({ row }) => {
+        const cfg = statusConfig[row.original.status] ?? { label: row.original.status, class: '' }
+        return h(Badge, {
+          variant: 'outline',
+          class: cfg.class,
+        }, () => cfg.label)
+      },
+    },
+    {
+      id: 'actions',
+      header: ' ',
+      size: 0,
+      minSize: 0,
+      enableHiding: false,
+      cell: ({ row }) => {
+        const user = row.original
+
+        return h(TooltipProvider, null, () =>
+          h('div', { class: 'flex items-center gap-1' }, [
+            h(Tooltip, null, () => [
+              h(TooltipTrigger, { asChild: true }, () =>
+                h(Button, {
+                  variant: 'ghost',
+                  size: 'icon',
+                  class: 'h-8 w-8 text-yellow-500',
+                  onClick: () => callbacks.onEdit(user),
+                }, () =>
+                  h(Pencil, { class: 'h-4 w-4' })
+                )
+              ),
+              h(TooltipContent, null, () => 'Edit'),
+            ]),
+            h(Tooltip, null, () => [
+              h(TooltipTrigger, { asChild: true }, () =>
+                h(Button, {
+                  variant: 'ghost',
+                  size: 'icon',
+                  class: 'h-8 w-8 text-destructive',
+                  onClick: () => callbacks.onDelete(user),
+                }, () =>
+                  h(Trash2, { class: 'h-4 w-4' })
+                )
+              ),
+              h(TooltipContent, null, () => 'Hapus'),
+            ]),
+          ])
+        )
+      },
+    },
+  ]
+}
diff --git a/app/pages/admin/users/create.vue b/app/pages/admin/users/create.vue
new file mode 100644
index 0000000..40e9c9b
--- /dev/null
+++ b/app/pages/admin/users/create.vue
@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import AppSidebar from '@/components/AppSidebar.vue'
+import SiteHeader from '@/components/SiteHeader.vue'
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from '@/components/ui/alert'
+import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar'
+import { CalendarDate } from '@internationalized/date'
+import { AlertCircleIcon, ArrowLeft, CalendarIcon, Loader2 } from '@lucide/vue'
+import { reactive, ref } from 'vue'
+import { toast } from 'vue-sonner'
+
+import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
+import {
+  Card,
+  CardContent,
+} from '@/components/ui/card'
+import {
+  Field,
+  FieldGroup,
+  FieldLabel,
+} from '@/components/ui/field'
+import { Input } from '@/components/ui/input'
+import { PhoneInput } from '@/components/ui/phone-input'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { cn } from '@/lib/utils'
+
+const router = useRouter()
+const config = useRuntimeConfig()
+
+const form = ref({
+  email: '',
+  username: '',
+  full_name: '',
+  phone: '',
+  address: '',
+  pob: '',
+})
+const dob = ref<CalendarDate>()
+
+const errors = reactive<Record<string, string>>({})
+const loading = ref(false)
+
+function validate() {
+  Object.keys(errors).forEach(k => delete errors[k])
+  if (!form.value.email.trim()) errors.email = 'Email wajib diisi'
+  if (!form.value.username.trim()) errors.username = 'Username wajib diisi'
+  if (!form.value.full_name.trim()) errors.full_name = 'Nama lengkap wajib diisi'
+  return Object.keys(errors).length === 0
+}
+
+async function handleSubmit() {
+  if (!validate()) {
+    toast.error('Silakan cek kembali data yang Anda masukkan')
+    return
+  }
+
+  loading.value = true
+  try {
+    await $fetch(`${config.public.apiBase}/users`, {
+      method: 'POST',
+      body: {
+        email: form.value.email.trim(),
+        username: form.value.username.trim(),
+        password: 'Minimal8@',
+        full_name: form.value.full_name.trim(),
+        phone: form.value.phone.replace(/\s/g, '') || null,
+        address: form.value.address.trim() || null,
+        pob: form.value.pob.trim() || null,
+        dob: dob.value?.toString() || null,
+      },
+    })
+    toast.success('Pengguna berhasil ditambahkan')
+    router.push('/admin/users')
+  } catch (e: any) {
+    const detail = e?.data?.detail
+    if (Array.isArray(detail)) {
+      for (const err of detail) {
+        const field = err.loc?.at(-1)
+        if (field && ['email', 'username', 'full_name', 'phone', 'address', 'pob', 'dob'].includes(field)) {
+          errors[field] = err.msg
+        }
+      }
+      if (Object.keys(errors).length) toast.error('Silakan cek kembali data yang Anda masukkan')
+    } else {
+      const msg = detail?.message ?? e?.data?.message ?? ''
+      if (msg.toLowerCase().includes('email')) errors.email = msg
+      if (msg.toLowerCase().includes('username')) errors.username = msg
+      if (!errors.email && !errors.username) toast.error(msg || 'Gagal menyimpan pengguna')
+    }
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <SidebarProvider :style="{
+    '--sidebar-width': 'calc(var(--spacing) * 72)',
+    '--header-height': 'calc(var(--spacing) * 12)',
+  }">
+    <AppSidebar variant="inset" />
+    <SidebarInset>
+      <SiteHeader />
+      <div class="flex flex-1 flex-col">
+        <div class="@container/main flex flex-1 flex-col gap-2">
+          <div class="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+            <div class="px-4 lg:px-6">
+              <div class="flex items-center justify-between">
+                <h1 class="text-2xl font-bold">Tambah Pengguna</h1>
+                <Button variant="outline" size="sm" @click="router.push('/admin/users')">
+                  <ArrowLeft class="h-4 w-4 mr-1" />
+                  Kembali
+                </Button>
+              </div>
+            </div>
+            <div class="px-4 lg:px-6">
+              <div class="pb-3">
+                <Alert>
+                  <AlertCircleIcon />
+                  <AlertTitle>Informasi</AlertTitle>
+                  <AlertDescription>
+                    <p>Kata sandi bawaan adalah <b>Minimal8@</b></p>
+                  </AlertDescription>
+                </Alert>
+              </div>
+              <form @submit.prevent="handleSubmit">
+                <Card>
+                  <CardContent>
+                    <FieldGroup class="gap-4">
+                      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <Field>
+                          <FieldLabel for="form-email">Email <span class="text-red-500">*</span></FieldLabel>
+                          <Input id="form-email" v-model="form.email" placeholder="Masukkan email" :disabled="loading"
+                            :class="{ 'border-red-500': errors.email }" />
+                          <p v-if="errors.email" class="text-sm text-red-500">{{ errors.email }}</p>
+                        </Field>
+                        <Field>
+                          <FieldLabel for="form-username">Username <span class="text-red-500">*</span></FieldLabel>
+                          <Input id="form-username" v-model="form.username" placeholder="Masukkan username"
+                            :disabled="loading" :class="{ 'border-red-500': errors.username }" />
+                          <p v-if="errors.username" class="text-sm text-red-500">{{ errors.username }}</p>
+                        </Field>
+                      </div>
+                      <Field>
+                        <FieldLabel for="form-full-name">Nama Lengkap <span class="text-red-500">*</span></FieldLabel>
+                        <Input id="form-full-name" v-model="form.full_name" placeholder="Masukkan nama lengkap"
+                          :disabled="loading" :class="{ 'border-red-500': errors.full_name }" />
+                        <p v-if="errors.full_name" class="text-sm text-red-500">{{ errors.full_name }}</p>
+                      </Field>
+                      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <Field>
+                          <FieldLabel for="form-phone">No. Telepon</FieldLabel>
+                          <PhoneInput id="form-phone" v-model="form.phone" :disabled="loading"
+                            :class="{ 'border-red-500': errors.phone }" />
+                        </Field>
+                        <Field>
+                          <FieldLabel for="form-pob">Tempat Lahir</FieldLabel>
+                          <Input id="form-pob" v-model="form.pob" placeholder="Masukkan tempat lahir"
+                            :disabled="loading" />
+                        </Field>
+                        <Field>
+                          <FieldLabel for="form-dob">Tanggal Lahir</FieldLabel>
+                          <Popover>
+                            <PopoverTrigger as-child>
+                              <Button id="form-dob" variant="outline" :disabled="loading" :class="cn(
+                                'w-full justify-start text-left font-normal',
+                                !dob && 'text-muted-foreground',
+                              )">
+                                <CalendarIcon class="mr-2 h-4 w-4" />
+                                {{ dob ? dob.toDate('UTC').toLocaleDateString('id-ID', {
+                                  day: 'numeric', month: 'long',
+                                  year: 'numeric'
+                                }) : 'Pilih tanggal' }}
+                              </Button>
+                            </PopoverTrigger>
+                            <PopoverContent class="w-auto p-0">
+                              <Calendar v-model="dob" :initial-focus="true" layout="month-and-year" />
+                            </PopoverContent>
+                          </Popover>
+                        </Field>
+                      </div>
+                      <Field>
+                        <FieldLabel for="form-address">Alamat</FieldLabel>
+                        <textarea id="form-address" v-model="form.address" placeholder="Masukkan alamat"
+                          :disabled="loading" rows="2"
+                          class="flex w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50" />
+                      </Field>
+                    </FieldGroup>
+                  </CardContent>
+                </Card>
+                <div class="flex items-center justify-end gap-2 mt-4">
+                  <Button type="button" variant="outline" :disabled="loading"
+                    @click="router.push('/admin/users')">Batal</Button>
+                  <Button type="submit" :disabled="loading">
+                    <Loader2 v-if="loading" class="h-4 w-4 mr-1 animate-spin" />
+                    Simpan
+                  </Button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/app/pages/admin/users/index.vue b/app/pages/admin/users/index.vue
new file mode 100644
index 0000000..d564026
--- /dev/null
+++ b/app/pages/admin/users/index.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import AppSidebar from '@/components/AppSidebar.vue'
+import SiteHeader from '@/components/SiteHeader.vue'
+import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar'
+
+import { ChevronDown, Plus, X } from '@lucide/vue'
+import { computed, ref } from 'vue'
+import { toast } from 'vue-sonner'
+
+import DataTable from '@/components/data-table/DataTable.vue'
+import DeleteDialog from '@/components/DeleteDialog.vue'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Input } from '@/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { type User, getColumns } from './columns'
+
+const router = useRouter()
+const config = useRuntimeConfig()
+
+const statusFilter = ref('')
+
+const { data: users, status, refresh } = useFetch<User[]>(
+  () => `${config.public.apiBase}/users${statusFilter.value ? `?status=${statusFilter.value}` : ''}`,
+  { watch: [statusFilter] },
+)
+
+const tableRef = ref<InstanceType<typeof DataTable>>()
+
+const deleteOpen = ref(false)
+const deleteLoading = ref(false)
+const selectedUser = ref<User | null>(null)
+
+function handleEdit(user: User) {
+  router.push(`/admin/users/${user.id}/edit`)
+}
+
+function handleDelete(user: User) {
+  selectedUser.value = user
+  deleteOpen.value = true
+}
+
+const columns = computed(() => getColumns({ onEdit: handleEdit, onDelete: handleDelete }))
+
+async function handleConfirmDelete() {
+  if (!selectedUser.value) return
+
+  deleteLoading.value = true
+  try {
+    await $fetch(`${config.public.apiBase}/users/${selectedUser.value.id}`, {
+      method: 'DELETE',
+    })
+    toast.success('Pengguna berhasil dihapus')
+    deleteOpen.value = false
+    selectedUser.value = null
+    await refresh()
+  } catch (e: any) {
+    toast.error(e?.data?.message ?? 'Gagal menghapus pengguna')
+  } finally {
+    deleteLoading.value = false
+  }
+}
+
+function hasActiveFilter() {
+  return !!statusFilter.value
+}
+
+function resetFilters() {
+  statusFilter.value = ''
+}
+</script>
+
+<template>
+  <SidebarProvider :style="{
+    '--sidebar-width': 'calc(var(--spacing) * 72)',
+    '--header-height': 'calc(var(--spacing) * 12)',
+  }">
+    <AppSidebar variant="inset" />
+    <SidebarInset>
+      <SiteHeader />
+      <div class="flex flex-1 flex-col">
+        <div class="@container/main flex flex-1 flex-col gap-2">
+          <div class="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+            <div class="px-4 lg:px-6">
+              <div class="flex items-center justify-between">
+                <h1 class="text-2xl font-bold">Pengguna</h1>
+                <Button size="sm" @click="router.push('/admin/users/create')">
+                  <Plus class="h-4 w-4 mr-1" />
+                  Tambah
+                </Button>
+              </div>
+            </div>
+            <div class="px-4 lg:px-6">
+              <DataTable ref="tableRef" :columns="columns" :data="users ?? []" :loading="status === 'pending'">
+                <template #filters="{ table }">
+                  <div class="flex items-center gap-2 py-4">
+                    <Input class="max-w-sm" placeholder="Cari email atau nama..."
+                      :model-value="(table.getColumn('search')?.getFilterValue() as string) ?? ''"
+                      @update:model-value="table.getColumn('search')?.setFilterValue($event)" />
+                    <Select :model-value="statusFilter || 'all'"
+                      @update:model-value="statusFilter = $event === 'all' ? '' : $event">
+                      <SelectTrigger class="hidden h-8 w-auto md:flex">
+                        <SelectValue placeholder="Semua Status" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="all">Semua Status</SelectItem>
+                        <SelectItem value="ACTIVE">Aktif</SelectItem>
+                        <SelectItem value="ONBOARDING">Onboarding</SelectItem>
+                        <SelectItem value="INACTIVE">Nonaktif</SelectItem>
+                        <SelectItem value="SUSPENDED">Ditangguhkan</SelectItem>
+                        <SelectItem value="DISABLED">Dinonaktifkan</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <Button v-if="hasActiveFilter()" variant="ghost" size="sm" class="h-8"
+                      @click="resetFilters()">
+                      <X class="h-4 w-4 mr-1" />
+                      Reset
+                    </Button>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger as-child>
+                        <Button variant="outline" class="ml-auto md:hidden">
+                          Filter
+                          <ChevronDown class="ml-2 h-4 w-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuLabel>Status</DropdownMenuLabel>
+                        <div class="px-2 pb-2">
+                          <Select :model-value="statusFilter || 'all'"
+                            @update:model-value="statusFilter = $event === 'all' ? '' : $event">
+                            <SelectTrigger class="h-8 w-37.5">
+                              <SelectValue placeholder="Semua Status" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="all">Semua Status</SelectItem>
+                              <SelectItem value="ACTIVE">Aktif</SelectItem>
+                              <SelectItem value="ONBOARDING">Onboarding</SelectItem>
+                              <SelectItem value="INACTIVE">Nonaktif</SelectItem>
+                              <SelectItem value="SUSPENDED">Ditangguhkan</SelectItem>
+                              <SelectItem value="DISABLED">Dinonaktifkan</SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem :disabled="!hasActiveFilter()" @click="resetFilters()">
+                          Reset Filter
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                </template>
+              </DataTable>
+            </div>
+          </div>
+        </div>
+      </div>
+    </SidebarInset>
+
+    <DeleteDialog v-model:open="deleteOpen" title="Hapus Pengguna"
+      :item-name="selectedUser?.email ?? selectedUser?.username" :loading="deleteLoading"
+      @confirm="handleConfirmDelete" />
+  </SidebarProvider>
+</template>
diff --git a/docs/history/2026-07-25-modul-user-pengguna.md b/docs/history/2026-07-25-modul-user-pengguna.md
new file mode 100644
index 0000000..f657fff
--- /dev/null
+++ b/docs/history/2026-07-25-modul-user-pengguna.md
@@ -0,0 +1,48 @@
+# Modul User / Pengguna
+
+**Tanggal:** 2026-07-25
+**Status:** Selesai
+
+## Tujuan
+Membuat halaman manajemen pengguna (user) dengan CRUD, mengikuti pola halaman jenis bisnis dan paket.
+
+## Yang Dikerjakan
+
+### 1. Halaman List Pengguna
+- `/admin/users` — DataTable dengan columns: Email, Username, Nama Lengkap, Status, Actions
+- Search (email/nama), filter status, reset filter
+- Delete dengan konfirmasi dialog
+
+### 2. Halaman Tambah Pengguna
+- `/admin/users/create` — Form: email, username, password, full_name, phone, address, pob, dob
+- Validasi required fields, submit POST ke API, redirect ke list
+
+### 3. Halaman Edit Pengguna
+- `/admin/users/{id}/edit` — Form pre-filled dari API, sama dengan create
+- Password opsional (kosongkan jika tidak diubah)
+- Submit PUT ke API, redirect ke list
+
+### 4. Sidebar
+- Tambah menu "Pengguna" di grup Master dengan icon Users
+
+## File yang Diubah/Dibuat
+
+| File | Aksi | Detail |
+|------|------|--------|
+| `core/app/pages/admin/users/columns.ts` | Dibuat | Column definitions + interface User |
+| `core/app/pages/admin/users/index.vue` | Dibuat/Ditulis ulang | Halaman list dengan delete dialog |
+| `core/app/pages/admin/users/create.vue` | Dibuat | Halaman tambah pengguna |
+| `core/app/pages/admin/users/[id]/edit.vue` | Dibuat | Halaman edit pengguna |
+| `core/app/components/AppSidebar.vue` | Diubah | Tambah menu "Pengguna" |
+
+## Routing
+
+| Path | File |
+|------|------|
+| `/admin/users` | `pages/admin/users/index.vue` |
+| `/admin/users/create` | `pages/admin/users/create.vue` |
+| `/admin/users/:id/edit` | `pages/admin/users/[id]/edit.vue` |
+
+## Notes
+- Menggunakan field `status` dari API (ACTIVE/INACTIVE) untuk badge status
+- API endpoint: `GET /v1/users`, `POST /v1/users`, `PUT /v1/users/{id}`, `DELETE /v1/users/{id}`
diff --git a/docs/history/2026-07-25-perbaikan-user-form-dan-filter.md b/docs/history/2026-07-25-perbaikan-user-form-dan-filter.md
new file mode 100644
index 0000000..8dcbd3b
--- /dev/null
+++ b/docs/history/2026-07-25-perbaikan-user-form-dan-filter.md
@@ -0,0 +1,70 @@
+# Perbaikan Form User dan Filter Status
+
+**Tanggal:** 2026-07-25
+**Status:** Selesai
+
+## Tujuan
+- Validasi form menggunakan pesan dari server (422 validation)
+- Filter status tabel menggunakan API query param
+- PhoneInput component reusable dengan format otomatis
+- Kalender popover untuk input tanggal lahir
+- Layout form diseragamkan antara create dan edit
+
+## Yang Dikerjakan
+
+### 1. Validasi Form dari Server
+- `errors` diubah dari `Record<string, boolean>` menjadi `Record<string, string>` untuk menyimpan pesan error
+- Template menggunakan `{{ errors.email }}` dinamis, bukan hardcode
+- Catch block parsing response 422 FastAPI: `err.loc.at(-1)` sebagai field name, `err.msg` sebagai pesan
+- Untuk response error lain, tetap parsing `detail.message` dan map ke field berdasarkan keyword
+
+### 2. Filter Status via API
+- Sebelum: filter status client-side (DataTable column filter)
+- Sesudah: `statusFilter` reactive ref dikirim sebagai query param `?status=` ke endpoint API
+- `useFetch` dengan `watch: [statusFilter]` otomatis refetch saat filter berubah
+- Opsi filter: Semua Status, Aktif, Onboarding, Nonaktif, Ditangguhkan, Dinonaktifkan
+
+### 3. PhoneInput Component
+- Dibuat `components/ui/phone-input/PhoneInput.vue`
+- Format otomatis `xxxx xxxx xxxx` (13 digit, spasi tiap 4 digit)
+- Menggunakan native `<input>` dengan `:value` + `@input` untuk menghindari konflik v-model shadcn
+- Menerima prop `class` untuk validasi red border
+- Digunakan di create.vue dan edit.vue, nomor dikirim tanpa spasi ke API
+
+### 4. Kalender Popover untuk Tanggal Lahir
+- Input `type="date"` diganti dengan Popover + Calendar component
+- `dob` dipisah dari form object, menggunakan `ref<CalendarDate>()`
+- Format tampilan: "25 Juli 2026" (locale id-ID)
+- Konversi `CalendarDate.toString()` → YYYY-MM-DD untuk dikirim ke API
+- Parsing string YYYY-MM-DD → `new CalendarDate(y, m, d)` saat load edit
+
+### 5. Layout Form Diseragamkan
+- Edit page sekarang mengikuti layout create page:
+  - Baris 1: email + username (2 kolom)
+  - Baris 2: full_name (1 baris penuh)
+  - Baris 3: phone + pob + dob (3 kolom)
+  - Baris 4: alamat (1 baris penuh)
+- Info alert password default ditambahkan ke edit page
+
+### 6. Badge Status User
+- Badge sekarang menggunakan `statusConfig` untuk 5 status:
+  - ACTIVE → hijau "Aktif"
+  - ONBOARDING → biru "Onboarding"
+  - INACTIVE → abu "Nonaktif"
+  - SUSPENDED → oranye "Ditangguhkan"
+  - DISABLED → merah "Dinonaktifkan"
+
+## File yang Diubah
+
+| File | Aksi | Detail |
+|------|------|--------|
+| `components/ui/phone-input/PhoneInput.vue` | Dibuat | Component input telepon dengan format otomatis |
+| `components/ui/phone-input/index.ts` | Dibuat | Export PhoneInput |
+| `pages/admin/users/create.vue` | Diubah | Calendar popover, PhoneInput, validasi dinamis, status dihapus dari body |
+| `pages/admin/users/[id]/edit.vue` | Diubah | Layout disamakan dengan create, Calendar popover, PhoneInput, validasi dinamis, info alert |
+| `pages/admin/users/index.vue` | Diubah | Filter status via API query param, 5 opsi status |
+| `pages/admin/users/columns.ts` | Diubah | statusConfig untuk badge 5 status, hapus statusFilter |
+
+## Notes
+- Create page tidak lagi mengirim `status` ke API (default ONBOARDING dari schema)
+- Phone component hanya menerima input digit, max 13 digit