diff --git a/src/composables/useRoleSwitcher.ts b/src/composables/useRoleSwitcher.ts
index 65b6fde..8fe06ed 100644
--- a/src/composables/useRoleSwitcher.ts
+++ b/src/composables/useRoleSwitcher.ts
@@ -86,9 +86,9 @@ export function useRoleSwitcher() {
         toast: true,
         position: 'top-end',
         icon: 'success',
-        title: res.message || 'Peranan telah ditukar.',
+        title: res.message,
         showConfirmButton: false,
-        timer: 3000,
+        timer: 500,
       })
 
       await router.push(resolvePostLoginRoute(res.redirect_path))
diff --git a/src/modules/auth/pages/Login.vue b/src/modules/auth/pages/Login.vue
index 89b6cad..317940c 100644
--- a/src/modules/auth/pages/Login.vue
+++ b/src/modules/auth/pages/Login.vue
@@ -117,7 +117,7 @@ const appVersion = import.meta.env.VITE_APP_VERSION
                 <Input v-model="email" class="box block min-w-full px-5 py-6 xl:min-w-md" type="email"
                   placeholder="Email" autocomplete="email" required />
                 <PasswordInput v-model="password" class="box block min-w-full px-5 py-6 xl:min-w-md"
-                  placeholder="Password" autocomplete="current-password" required />
+                  placeholder="Kata Laluan" autocomplete="current-password" required />
                 <div class="flex text-xs sm:text-sm">
                   <div class="mr-auto flex-row items-center">
                     <CheckboxRoot :checked="remember" @checked-change="({ checked }) => (remember = checked === true)">
@@ -127,7 +127,7 @@ const appVersion = import.meta.env.VITE_APP_VERSION
                   </div>
                   <button type="button" class="opacity-70 hover:opacity-100"
                     @click="router.push({ name: 'forgot-password' })">
-                    Lupa Password?
+                    Lupa Kata Laluan?
                   </button>
                 </div>
                 <div class="mt-5 text-center xl:mt-10 xl:text-left">
diff --git a/src/modules/auth/pages/Register.vue b/src/modules/auth/pages/Register.vue
index 4f40dac..ae5f4ee 100644
--- a/src/modules/auth/pages/Register.vue
+++ b/src/modules/auth/pages/Register.vue
@@ -8,6 +8,7 @@ import { Input } from '@/components/ui/input'
 import { AlertRoot, AlertTitle, AlertDescription } from '@/components/ui/alert'
 import { PasswordInput } from '@/components/ui/password-input'
 import { getRegisterErrorMessage, register } from '@/modules/auth'
+import { sanitizeIcNumberInput, sanitizeNameInput } from '@/utils/form-input.utils'
 import illustrationUrl from '@/assets/images/logo.svg'
 
 const router = useRouter()
@@ -21,6 +22,14 @@ const termsAccepted = ref(false)
 const loading = ref(false)
 const errorMessage = ref('')
 
+const handleNameInput = () => {
+  name.value = sanitizeNameInput(name.value)
+}
+
+const handleIcNumberInput = () => {
+  icNumber.value = sanitizeIcNumberInput(icNumber.value)
+}
+
 const handleRegister = async () => {
   if (!termsAccepted.value) {
     errorMessage.value = 'Sila bersetuju dengan Dasar Privasi dan Terma dan Syarat.'
@@ -90,15 +99,16 @@ const handleRegister = async () => {
 
               <form class="mt-8 flex flex-col gap-5" @submit.prevent="handleRegister">
                 <Input v-model="name" class="box block min-w-full px-5 py-6 xl:min-w-md" type="text"
-                  placeholder="Nama Penuh" autocomplete="name" required />
+                  placeholder="Nama Penuh" autocomplete="name" required @input="handleNameInput" />
                 <Input v-model="email" class="box block min-w-full px-5 py-6 xl:min-w-md" type="email"
                   placeholder="Email" autocomplete="email" required />
                 <Input v-model="icNumber" class="box block min-w-full px-5 py-6 xl:min-w-md" type="text"
-                  placeholder="No. Kad Pengenalan" required />
+                  inputmode="numeric" maxlength="15" placeholder="Contoh: 900101011234" required
+                  @input="handleIcNumberInput" />
                 <PasswordInput v-model="password" class="box block min-w-full px-5 py-6 xl:min-w-md" type="password"
-                  placeholder="Password" autocomplete="new-password" minlength="8" required />
+                  placeholder="Kata Laluan" autocomplete="new-password" minlength="8" required />
                 <PasswordInput v-model="passwordConfirmation" class="box block min-w-full px-5 py-6 xl:min-w-md"
-                  placeholder="Sahkan Password" autocomplete="new-password" minlength="8" required />
+                  placeholder="Sahkan Kata Laluan" autocomplete="new-password" minlength="8" required />
 
                 <div class="flex text-xs sm:text-sm">
                   <CheckboxRoot :checked="termsAccepted"
diff --git a/src/modules/membership-application/pages/MembershipApplication.vue b/src/modules/membership-application/pages/MembershipApplication.vue
index d818540..9e8e7ea 100644
--- a/src/modules/membership-application/pages/MembershipApplication.vue
+++ b/src/modules/membership-application/pages/MembershipApplication.vue
@@ -22,7 +22,7 @@ import { AlertRoot, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import { Lucide } from '@/components/ui/lucide'
 import { getApiErrorMessage, getApiValidationErrors } from '@/core/utils/getApiErrorMessage'
 import { submitMembershipApplication, lookupMemberByIcNumber } from '../services/membership-application.service'
-import { sanitizeIcNumberInput } from '../utils/membership-application-form.utils'
+import { sanitizeIcNumberInput, sanitizeNameInput } from '@/utils/form-input.utils'
 import type {
   MembershipApplicationFormState,
   MembershipApplicationHeirForm,
@@ -80,15 +80,15 @@ const RELATIONSHIP_OPTIONS: SelectOption[] = [
 // TODO: replace with API lookup
 const EMPLOYERS = [
   {
-    name: 'INFRA QUEST SDN BHD',
+    name: 'Infra Quest Sdn. Bhd. (IQSB)',
     address: 'Lot 1045, Jalan Dato’ Lundang, 15200 Kota Bharu, Kelantan',
   },
   {
-    name: 'Permodalan Kelantan Berhad',
+    name: 'Permodalan Kelantan Berhad (PKB)',
     address: 'Permodalan Kelantan Berhad, Tingkat 4, Wisma Permodalan Kelantan Berhad, Jalan Maju, 15000 Kota Bharu Kelantan',
   },
   {
-    name: 'Koperasi Permodalan Kelantan Berhad',
+    name: 'Koperasi Permodalan Kelantan Berhad (KOPKB)',
     address: 'Lot Pt 448, Tingkat 1,Jalan Kuala Krai, Batu 3, Wakaf Che Yeh, 15150 Kota Bharu, Kelantan.',
   },
   {
@@ -226,11 +226,23 @@ function handleReferenceIcInput(role: 'proposer' | 'supporter') {
   clearReference(role)
 }
 
+function handleApplicantNameInput() {
+  form.applicant.name = sanitizeNameInput(form.applicant.name)
+  delete fieldErrors['applicant.name']
+}
+
 function handleApplicantIcInput() {
   form.applicant.ic_number = sanitizeIcNumberInput(form.applicant.ic_number)
   delete fieldErrors['applicant.ic_number']
 }
 
+function handleHeirNameInput(index: number) {
+  const heir = form.heirs[index]
+  if (!heir) return
+  heir.name = sanitizeNameInput(heir.name)
+  delete fieldErrors[`heirs.${index}.name`]
+}
+
 function handleHeirIcInput(index: number) {
   const heir = form.heirs[index]
   if (!heir) return
@@ -622,7 +634,7 @@ function stepLabelClass(stepId: number) {
             <template v-if="currentStep === 1">
               <Field class="col-span-12 sm:col-span-6">
                 <FieldLabel for="name">Nama Penuh</FieldLabel>
-                <Input id="name" v-model="form.applicant.name" type="text" />
+                <Input id="name" v-model="form.applicant.name" type="text" @input="handleApplicantNameInput" />
                 <FieldError v-if="fieldErrors['applicant.name']">{{ fieldErrors['applicant.name'] }}</FieldError>
               </Field>
               <Field class="col-span-12 sm:col-span-6">
@@ -808,7 +820,8 @@ function stepLabelClass(stepId: number) {
                   <div class="grid grid-cols-12 gap-4">
                     <Field class="col-span-12 sm:col-span-6">
                       <FieldLabel :for="`heir-name-${index}`">Nama</FieldLabel>
-                      <Input :id="`heir-name-${index}`" v-model="heir.name" type="text" />
+                      <Input :id="`heir-name-${index}`" v-model="heir.name" type="text"
+                        @input="handleHeirNameInput(index)" />
                       <FieldError v-if="fieldErrors[`heirs.${index}.name`]">
                         {{ fieldErrors[`heirs.${index}.name`] }}
                       </FieldError>
diff --git a/src/modules/membership-application/utils/membership-application-form.utils.ts b/src/modules/membership-application/utils/membership-application-form.utils.ts
index a5fece2..f1ec091 100644
--- a/src/modules/membership-application/utils/membership-application-form.utils.ts
+++ b/src/modules/membership-application/utils/membership-application-form.utils.ts
@@ -61,9 +61,7 @@ export type ApplicantDocumentUploadType = (typeof APPLICANT_DOCUMENT_UPLOAD_TYPE
 export type AdminDocumentUploadType = (typeof ADMIN_DOCUMENT_UPLOAD_TYPES)[number]
 export type DocumentUploadType = ApplicantDocumentUploadType | AdminDocumentUploadType
 
-export function sanitizeIcNumberInput(value: string): string {
-  return value.replace(/\D/g, '')
-}
+export { sanitizeIcNumberInput } from '@/utils/form-input.utils'
 
 export function createSelectCollection(options: SelectOption[]) {
   return select.collection({
@@ -172,11 +170,11 @@ export function detailToFormState(detail: MembershipApplicationDetail): Membersh
     },
     heirs: detail.heirs.length
       ? detail.heirs.map((heir) => ({
-          name: toFormString(heir.name),
-          ic_number: toFormString(heir.ic_number),
-          relationship: toFormString(heir.relationship),
-          phone_number: toFormString(heir.phone_number),
-        }))
+        name: toFormString(heir.name),
+        ic_number: toFormString(heir.ic_number),
+        relationship: toFormString(heir.relationship),
+        phone_number: toFormString(heir.phone_number),
+      }))
       : [createEmptyHeir()],
     references: {
       proposer: {
diff --git a/src/modules/profile/pages/ProfileOverview2.vue b/src/modules/profile/pages/ProfileOverview2.vue
index bcf3d73..1105295 100644
--- a/src/modules/profile/pages/ProfileOverview2.vue
+++ b/src/modules/profile/pages/ProfileOverview2.vue
@@ -15,7 +15,6 @@ import MemberDigitalCard from '../components/MemberDigitalCard.vue'
 import ProfileTab from './ProfileTab.vue'
 import EmploymentTab from './EmploymentTab.vue'
 import BankDetailTab from './BankDetailTab.vue'
-import HeirTab from './HeirTab.vue'
 import ChangePasswordTab from './ChangePasswordTab.vue'
 
 const authStore = useAuthStore()
@@ -263,12 +262,6 @@ onMounted(async () => {
               <Lucide class="size-4 shrink-0 md:mr-2" icon="Banknote" />
               <span class="hidden md:inline">Bank</span>
             </TabsTrigger>
-            <TabsTrigger
-              class="inline-flex min-w-0 flex-1 items-center justify-center whitespace-nowrap px-2 sm:px-3 md:text-sm"
-              value="6" aria-label="Penama">
-              <Lucide class="size-4 shrink-0 md:mr-2" icon="Users" />
-              <span class="hidden md:inline">Penama</span>
-            </TabsTrigger>
             <TabsTrigger
               class="inline-flex min-w-0 flex-1 items-center justify-center whitespace-nowrap px-2 sm:px-3 md:text-sm"
               value="2" aria-label="Kata Laluan">
@@ -294,10 +287,6 @@ onMounted(async () => {
       <TabsContent value="2" class="mt-8">
         <ChangePasswordTab embedded />
       </TabsContent>
-      <!-- Penama -->
-      <TabsContent value="6" class="mt-8">
-        <HeirTab embedded />
-      </TabsContent>
     </TabsRoot>
   </div>
 </template>
diff --git a/src/modules/profile/pages/ProfileTab.vue b/src/modules/profile/pages/ProfileTab.vue
index 89a0841..f4fef6a 100644
--- a/src/modules/profile/pages/ProfileTab.vue
+++ b/src/modules/profile/pages/ProfileTab.vue
@@ -20,6 +20,7 @@ import {
   SelectItemText,
 } from '@/components/ui/select'
 import { getApiErrorMessage, getApiValidationErrors } from '@/core/utils/getApiErrorMessage'
+import { sanitizeIcNumberInput, sanitizeNameInput } from '@/utils/form-input.utils'
 import {
   createAddress,
   deleteAddress,
@@ -29,6 +30,7 @@ import {
 import { updateProfile } from '@/modules/profile/services/profile.service'
 import type { Address, AddressPayload } from '@/modules/profile/types/address.types'
 import { useAuthStore } from '@/stores/auth'
+import HeirTab from './HeirTab.vue'
 
 defineProps<{
   embedded?: boolean
@@ -159,6 +161,14 @@ const stateValue = ref<string[]>([])
 const addressTypeInitial = ref<string[]>([])
 const stateInitial = ref<string[]>([])
 
+function handleNameInput() {
+  form.name = sanitizeNameInput(form.name)
+}
+
+function handleIcNumberInput() {
+  form.ic_number = sanitizeIcNumberInput(form.ic_number)
+}
+
 function clearProfileFieldError(field: ProfileFieldKey) {
   delete profileErrors[field]
 }
@@ -569,7 +579,8 @@ onMounted(async () => {
           <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
             <Field>
               <FieldLabel for="profile-name">Nama</FieldLabel>
-              <Input id="profile-name" v-model="form.name" type="text" placeholder="Nama penuh" required />
+              <Input id="profile-name" v-model="form.name" type="text" placeholder="Nama penuh" required
+                @input="handleNameInput" />
             </Field>
             <Field>
               <FieldLabel for="profile-email">E-mel</FieldLabel>
@@ -577,7 +588,8 @@ onMounted(async () => {
             </Field>
             <Field>
               <FieldLabel for="profile-ic">No. Kad Pengenalan</FieldLabel>
-              <Input id="profile-ic" v-model="form.ic_number" type="text" placeholder="No. kad pengenalan" />
+              <Input id="profile-ic" v-model="form.ic_number" type="text" inputmode="numeric" maxlength="15"
+                placeholder="Contoh: 900101011234" @input="handleIcNumberInput" />
             </Field>
             <Field>
               <FieldLabel for="profile-phone">No. Telefon</FieldLabel>
@@ -817,5 +829,7 @@ onMounted(async () => {
         </form>
       </div>
     </Box>
+
+    <HeirTab embedded />
   </div>
 </template>
diff --git a/src/modules/user/composables/useUserList.ts b/src/modules/user/composables/useUserList.ts
index 2174de9..c7082d9 100644
--- a/src/modules/user/composables/useUserList.ts
+++ b/src/modules/user/composables/useUserList.ts
@@ -3,13 +3,15 @@ import debounce from 'lodash/debounce'
 import type { SortConfig } from '@/components/ui/usage/DataTable.vue'
 import { useApiPagination } from '@/composables/useApiPagination'
 import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage'
-import { listUsers } from '../services/user.service'
+import { getUserStats, listUsers } from '../services/user.service'
 import type { UserListItem } from '../types/user.types'
 
 export function useUserList() {
   const users = ref<UserListItem[]>([])
   const loading = ref(false)
+  const statsLoading = ref(false)
   const error = ref<string | null>(null)
+  const statsError = ref<string | null>(null)
   const search = ref('')
   const statusFilter = ref('')
   const joinDateFrom = ref('')
@@ -19,6 +21,7 @@ export function useUserList() {
   const sortBy = ref<SortConfig[]>([{ key: 'name', order: 'asc' }])
   const page = ref(1)
   const itemsPerPage = ref(10)
+  const stats = ref<{ total: number; joined_this_month: number }>({ total: 0, joined_this_month: 0 })
 
   const { pagination, applyPagination } = useApiPagination({ per_page: 10 })
 
@@ -64,6 +67,29 @@ export function useUserList() {
     }
   }
 
+  async function fetchStats() {
+    statsLoading.value = true
+    statsError.value = null
+
+    try {
+      const res = await getUserStats({
+        search: search.value.trim() || undefined,
+        status: statusFilter.value.trim() || undefined,
+        join_date_from: joinDateFrom.value || undefined,
+        join_date_to: joinDateTo.value || undefined,
+        leave_date_from: leaveDateFrom.value || undefined,
+        leave_date_to: leaveDateTo.value || undefined,
+      })
+
+      stats.value = res.data
+    } catch (err) {
+      statsError.value = getApiErrorMessage(err, 'Gagal memuatkan statistik pengguna.')
+      stats.value = { total: 0, joined_this_month: 0 }
+    } finally {
+      statsLoading.value = false
+    }
+  }
+
   function handleSortUpdate(value: SortConfig[]) {
     sortBy.value = value
     fetchUsers(1)
@@ -71,6 +97,7 @@ export function useUserList() {
 
   const debouncedSearch = debounce(() => {
     fetchUsers(1)
+    fetchStats()
   }, 400)
 
   watch(search, () => {
@@ -79,10 +106,12 @@ export function useUserList() {
 
   watch(statusFilter, () => {
     fetchUsers(1)
+    fetchStats()
   })
 
   watch([joinDateFrom, joinDateTo, leaveDateFrom, leaveDateTo], () => {
     fetchUsers(1)
+    fetchStats()
   })
 
   watch(page, (nextPage, previousPage) => {
@@ -99,11 +128,15 @@ export function useUserList() {
 
   onMounted(() => {
     fetchUsers(1)
+    fetchStats()
   })
 
   return {
     users,
     loading,
+    stats,
+    statsLoading,
+    statsError,
     error,
     search,
     statusFilter,
@@ -121,5 +154,6 @@ export function useUserList() {
     pagination,
     handleSortUpdate,
     fetchUsers,
+    fetchStats,
   }
 }
diff --git a/src/modules/user/pages/UserCreate.vue b/src/modules/user/pages/UserCreate.vue
index f488b72..f8f4c80 100644
--- a/src/modules/user/pages/UserCreate.vue
+++ b/src/modules/user/pages/UserCreate.vue
@@ -19,6 +19,7 @@ import {
   SelectItemText,
 } from '@/components/ui/select'
 import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage'
+import { sanitizeIcNumberInput, sanitizeNameInput } from '@/utils/form-input.utils'
 import { createUser } from '../services/user.service'
 
 type SelectOption = { label: string; value: string }
@@ -105,6 +106,14 @@ const form = reactive({
   birth_place: '',
 })
 
+function handleNameInput() {
+  form.name = sanitizeNameInput(form.name)
+}
+
+function handleIcNumberInput() {
+  form.ic_number = sanitizeIcNumberInput(form.ic_number)
+}
+
 function requireSelectValue(label: string | undefined, fieldName: string): string {
   if (!label) {
     throw new Error(`${fieldName} diperlukan.`)
@@ -201,6 +210,7 @@ const formDisabled = computed(() => saving.value)
               placeholder="Nama penuh"
               :disabled="formDisabled"
               required
+              @input="handleNameInput"
             />
           </Field>
 
@@ -226,9 +236,12 @@ const formDisabled = computed(() => saving.value)
               v-model="form.ic_number"
               class="w-full"
               type="text"
-              placeholder="Nombor kad pengenalan"
+              inputmode="numeric"
+              maxlength="15"
+              placeholder="Contoh: 900101011234"
               :disabled="formDisabled"
               required
+              @input="handleIcNumberInput"
             />
           </Field>
 
diff --git a/src/modules/user/pages/UserEdit.vue b/src/modules/user/pages/UserEdit.vue
index a6e5e6d..fc3d9bc 100644
--- a/src/modules/user/pages/UserEdit.vue
+++ b/src/modules/user/pages/UserEdit.vue
@@ -20,6 +20,7 @@ import {
   SelectItemText,
 } from '@/components/ui/select'
 import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage'
+import { sanitizeIcNumberInput, sanitizeNameInput } from '@/utils/form-input.utils'
 import { getUser, updateUser } from '../services/user.service'
 
 type SelectOption = { label: string; value: string }
@@ -121,6 +122,14 @@ const form = reactive({
   birth_place: '',
 })
 
+function handleNameInput() {
+  form.name = sanitizeNameInput(form.name)
+}
+
+function handleIcNumberInput() {
+  form.ic_number = sanitizeIcNumberInput(form.ic_number)
+}
+
 function toDateInputValue(value: string | null | undefined): string {
   if (!value) return ''
   return value.slice(0, 10)
@@ -239,7 +248,7 @@ onMounted(() => {
           <Field>
             <FieldLabel for="user-name">Nama</FieldLabel>
             <Input id="user-name" v-model="form.name" class="w-full" type="text" placeholder="Nama penuh"
-              :disabled="formDisabled" required />
+              :disabled="formDisabled" required @input="handleNameInput" />
           </Field>
 
           <Field>
@@ -251,8 +260,8 @@ onMounted(() => {
         <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
           <Field>
             <FieldLabel for="user-ic">Nombor Kad Pengenalan</FieldLabel>
-            <Input id="user-ic" v-model="form.ic_number" class="w-full" type="text" placeholder="Nombor kad pengenalan"
-              :disabled="formDisabled" required />
+            <Input id="user-ic" v-model="form.ic_number" class="w-full" type="text" inputmode="numeric" maxlength="15"
+              placeholder="Contoh: 900101011234" :disabled="formDisabled" required @input="handleIcNumberInput" />
           </Field>
 
           <Field>
diff --git a/src/modules/user/pages/UserHeirTab.vue b/src/modules/user/pages/UserHeirTab.vue
deleted file mode 100644
index d764516..0000000
--- a/src/modules/user/pages/UserHeirTab.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts" setup>
-import { Badge } from '@/components/ui/badge'
-import { Box } from '@/components/ui/box'
-import type { UserDetail } from '../types/user.types'
-
-defineProps<{
-  user: UserDetail
-  embedded?: boolean
-}>()
-</script>
-
-<template>
-  <div :class="embedded ? '' : 'mt-5'">
-    <Box raised="single" class="p-6">
-      <div class="mb-6">
-        <h3 class="text-lg font-semibold text-slate-900">Penama</h3>
-        <p class="mt-1 text-sm text-slate-500">Senarai penama pengguna.</p>
-      </div>
-
-      <div v-if="user.heirs?.length" class="space-y-3">
-        <div v-for="heir in user.heirs" :key="heir.id" class="rounded-lg border border-foreground/10 p-4">
-          <div class="flex flex-wrap items-center gap-2">
-            <span class="font-medium text-slate-900">{{ heir.name }}</span>
-            <Badge v-if="heir.is_primary" class="bg-green-500 text-white">Utama</Badge>
-            <Badge look="outline">{{ heir.relationship }}</Badge>
-          </div>
-          <p class="mt-1 text-sm text-slate-500">{{ heir.ic_number }}</p>
-          <p class="mt-1 text-sm text-slate-500">{{ heir.phone_number }}</p>
-          <p class="mt-1 text-sm text-slate-700">{{ heir.address }}</p>
-        </div>
-      </div>
-
-      <div v-else class="rounded-lg border border-dashed border-foreground/15 p-6 text-center text-sm text-slate-500">
-        Tiada penama direkodkan.
-      </div>
-    </Box>
-  </div>
-</template>
diff --git a/src/modules/user/pages/UserList.vue b/src/modules/user/pages/UserList.vue
index a7f6c9d..a00a2f8 100644
--- a/src/modules/user/pages/UserList.vue
+++ b/src/modules/user/pages/UserList.vue
@@ -1,12 +1,19 @@
 <script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import dayjs from 'dayjs'
 import debounce from 'lodash/debounce'
 import { Search, HatGlasses, SquarePen, Trash2, Eye, Shield, RotateCcw } from '@lucide/vue'
 import { Badge } from '@/components/ui/badge'
+import { Box } from '@/components/ui/box'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import {
+  AccordionRoot,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from '@/components/ui/accordion'
 import { CheckboxRoot, CheckboxControl, CheckboxLabel } from '@/components/ui/checkbox'
 import { DialogRoot, DialogContent, DialogCloseTrigger } from '@/components/ui/dialog'
 import { Lucide } from '@/components/ui/lucide'
@@ -78,6 +85,70 @@ function formatUserRoles(roles: UserRole[] | undefined): string {
   return roles?.map((role) => role.name).join(', ') || '-'
 }
 
+type QuickDatePreset = {
+  label: string
+  getRange: () => { from: string; to: string }
+}
+
+function formatDateInput(value: dayjs.Dayjs) {
+  return value.format('YYYY-MM-DD')
+}
+
+const QUICK_DATE_PRESETS: QuickDatePreset[] = [
+  {
+    label: 'Bulan ini',
+    getRange: () => ({
+      from: formatDateInput(dayjs().startOf('month')),
+      to: formatDateInput(dayjs().endOf('month')),
+    }),
+  },
+  {
+    label: 'Bulan lepas',
+    getRange: () => {
+      const prev = dayjs().subtract(1, 'month')
+      return {
+        from: formatDateInput(prev.startOf('month')),
+        to: formatDateInput(prev.endOf('month')),
+      }
+    },
+  },
+  {
+    label: 'Tahun ini',
+    getRange: () => ({
+      from: formatDateInput(dayjs().startOf('year')),
+      to: formatDateInput(dayjs().endOf('year')),
+    }),
+  },
+]
+
+function applyJoinDatePreset(preset: QuickDatePreset) {
+  const { from, to } = preset.getRange()
+  joinDateFrom.value = from
+  joinDateTo.value = to
+}
+
+function applyLeaveDatePreset(preset: QuickDatePreset) {
+  const { from, to } = preset.getRange()
+  leaveDateFrom.value = from
+  leaveDateTo.value = to
+}
+
+function getUserCompanyName(
+  item: Pick<UserListItem, 'company_name' | 'employments'>,
+): string {
+  if (item.company_name) return item.company_name
+  const employments = item.employments ?? []
+  const current = employments.find((employment) => employment.is_current)
+  return (current ?? employments[0])?.company_name ?? '-'
+}
+
+const totalUsersLabel = computed(() => {
+  const value = stats.value.total || pagination.value.total
+  return value.toLocaleString()
+})
+
+const joinedThisMonthCountLabel = computed(() => stats.value.joined_this_month.toLocaleString())
+
 function statusBadgeVariant(status: string) {
   if (status === 'active') return 'success'
   if (status === 'inactive') return 'danger'
@@ -222,6 +293,13 @@ async function confirmRestore() {
 const headers: TableHeader[] = [
   { title: 'Bil.', key: '#', sortable: false },
   { title: 'Name', key: 'name', sortable: true },
+  { title: 'Jenis Anggota', key: 'member_type', sortable: true },
+  {
+    title: 'Unit',
+    key: 'company_name',
+    sortable: false,
+    exportValue: (item) => getUserCompanyName(item),
+  },
   { title: 'Jawatan', key: 'position', sortable: true },
   { title: 'No. Anggota', key: 'member_number', sortable: true, align: 'center' },
   {
@@ -246,10 +324,16 @@ const headers: TableHeader[] = [
   { title: 'Tindakan', key: 'actions', sortable: false },
 ]
 
+// deleted users table headers
 const deletedHeaders: TableHeader[] = [
   { title: 'Bil.', key: '#', sortable: false },
   { title: 'Name', key: 'name', sortable: true },
-  { title: 'Emel', key: 'email', sortable: true },
+  {
+    title: 'Unit',
+    key: 'company_name',
+    sortable: false,
+    exportValue: (item) => getUserCompanyName(item),
+  },
   { title: 'Jawatan', key: 'position', sortable: true },
   { title: 'No. Anggota', key: 'member_number', sortable: true, align: 'center' },
   {
@@ -266,6 +350,9 @@ const deletedHeaders: TableHeader[] = [
 const {
   users,
   loading,
+  stats,
+  statsLoading,
+  statsError,
   error,
   search,
   statusFilter,
@@ -333,11 +420,99 @@ onMounted(() => {
       <h2 class="text-lg font-medium">Senarai Daftar Anggota</h2>
       <p class="mt-1 text-sm opacity-70">Urus dan semak anggota koperasi.</p>
     </div>
+
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+      <Box class="p-5">
+        <div class="flex items-start justify-between gap-4">
+          <div>
+            <div class="text-sm font-medium opacity-70">Jumlah Anggota</div>
+            <div class="mt-2 text-3xl font-semibold tabular-nums">{{ totalUsersLabel }}</div>
+            <div class="mt-1 text-xs opacity-60">Mengikut carian & penapis semasa</div>
+          </div>
+          <div class="flex size-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
+            <Lucide icon="Users" class="size-5" />
+          </div>
+        </div>
+      </Box>
+
+      <Box class="p-5">
+        <div class="flex items-start justify-between gap-4">
+          <div>
+            <div class="text-sm font-medium opacity-70">Baru Sertai</div>
+            <div class="mt-2 text-3xl font-semibold tabular-nums">{{ joinedThisMonthCountLabel }}</div>
+            <div class="mt-1 text-xs opacity-60">Bulan ini (semua rekod)</div>
+            <div v-if="statsError" class="mt-1 text-xs text-danger">{{ statsError }}</div>
+          </div>
+          <div class="flex size-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
+            <Lucide icon="UserPlus" class="size-5" />
+          </div>
+        </div>
+      </Box>
+    </div>
+
     <AlertRoot v-if="error" class="mt-6" variant="danger">
       <AlertTitle>Error</AlertTitle>
       <AlertDescription>{{ error }}</AlertDescription>
     </AlertRoot>
 
+    <AccordionRoot class="w-full" variant="boxed">
+      <AccordionItem raised="single" value="date-filters">
+        <AccordionTrigger>Penapis Tarikh</AccordionTrigger>
+        <AccordionContent>
+          <div class="flex flex-col gap-3">
+            <div class="rounded-lg border border-foreground/10 p-3">
+              <div class="flex flex-wrap items-end gap-3">
+                <div class="flex min-w-[16rem] flex-1 flex-col gap-1.5">
+                  <span class="text-sm font-medium">Tarikh Menjadi Anggota</span>
+                  <div class="flex flex-wrap items-center gap-2">
+                    <span class="text-sm opacity-70">Pantas:</span>
+                    <Badge v-for="preset in QUICK_DATE_PRESETS" :key="`join-${preset.label}`" variant="ghost"
+                      look="outline" role="button" tabindex="0" @click="applyJoinDatePreset(preset)"
+                      @keydown.enter="applyJoinDatePreset(preset)">
+                      {{ preset.label }}
+                    </Badge>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <Input v-model="joinDateFrom" type="date" aria-label="Tarikh menjadi anggota dari" />
+                    <span class="text-sm opacity-50">–</span>
+                    <Input v-model="joinDateTo" type="date" aria-label="Tarikh menjadi anggota hingga" />
+                  </div>
+                </div>
+                <Button v-if="hasJoinDateFilters" type="button" variant="ghost" look="outline"
+                  @click="clearJoinDateFilters">
+                  Reset
+                </Button>
+              </div>
+            </div>
+            <div class="rounded-lg border border-foreground/10 p-3">
+              <div class="flex flex-wrap items-end gap-3">
+                <div class="flex min-w-[16rem] flex-1 flex-col gap-1.5">
+                  <span class="text-sm font-medium">Tarikh Berhenti</span>
+                  <div class="flex flex-wrap items-center gap-2">
+                    <span class="text-sm opacity-70">Pantas:</span>
+                    <Badge v-for="preset in QUICK_DATE_PRESETS" :key="`leave-${preset.label}`" variant="ghost"
+                      look="outline" role="button" tabindex="0" @click="applyLeaveDatePreset(preset)"
+                      @keydown.enter="applyLeaveDatePreset(preset)">
+                      {{ preset.label }}
+                    </Badge>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <Input v-model="leaveDateFrom" type="date" aria-label="Tarikh berhenti dari" />
+                    <span class="text-sm opacity-50">–</span>
+                    <Input v-model="leaveDateTo" type="date" aria-label="Tarikh berhenti hingga" />
+                  </div>
+                </div>
+                <Button v-if="hasLeaveDateFilters" type="button" variant="ghost" look="outline"
+                  @click="clearLeaveDateFilters">
+                  Reset
+                </Button>
+              </div>
+            </div>
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+    </AccordionRoot>
+
     <DataTable :headers="headers" :items="users" :loading="loading" :pagination="pagination" :current-sort="sortBy"
       show-pagination exportable export-file-name="users" export-pdf-title="Senarai Daftar Anggota" v-model:page="page"
       v-model:items-per-page="itemsPerPage" @update:sort-by="handleSortUpdate">
@@ -348,7 +523,7 @@ onMounted(() => {
               <Search
                 class="pointer-events-none absolute top-1/2 left-3 z-10 size-4 -translate-y-1/2 text-foreground/50"
                 aria-hidden="true" />
-              <Input v-model="search" type="search" placeholder="Search name, email, IC, phone, role..."
+              <Input v-model="search" type="search" placeholder="Cari nama, email, no. anggota, jawatan..."
                 class="w-full pl-9" aria-label="Search users" />
             </div>
             <Button v-if="hasPermission('daftar pengguna baru')" type="button" variant="primary" look="outline"
@@ -365,50 +540,6 @@ onMounted(() => {
               {{ chip.label }}
             </Badge>
           </div>
-          <div class="flex flex-col gap-3">
-            <div class="rounded-lg border border-foreground/10 p-3">
-              <div class="flex flex-wrap items-end gap-3">
-                <div class="flex min-w-[16rem] flex-1 flex-col gap-1.5">
-                  <span class="text-sm font-medium">Tarikh Menjadi Anggota</span>
-                  <div class="flex items-center gap-2">
-                    <Input v-model="joinDateFrom" type="date" aria-label="Tarikh menjadi anggota dari" />
-                    <span class="text-sm opacity-50">–</span>
-                    <Input v-model="joinDateTo" type="date" aria-label="Tarikh menjadi anggota hingga" />
-                  </div>
-                </div>
-                <Button
-                  v-if="hasJoinDateFilters"
-                  type="button"
-                  variant="ghost"
-                  look="outline"
-                  @click="clearJoinDateFilters"
-                >
-                  Reset
-                </Button>
-              </div>
-            </div>
-            <div class="rounded-lg border border-foreground/10 p-3">
-              <div class="flex flex-wrap items-end gap-3">
-                <div class="flex min-w-[16rem] flex-1 flex-col gap-1.5">
-                  <span class="text-sm font-medium">Tarikh Berhenti</span>
-                  <div class="flex items-center gap-2">
-                    <Input v-model="leaveDateFrom" type="date" aria-label="Tarikh berhenti dari" />
-                    <span class="text-sm opacity-50">–</span>
-                    <Input v-model="leaveDateTo" type="date" aria-label="Tarikh berhenti hingga" />
-                  </div>
-                </div>
-                <Button
-                  v-if="hasLeaveDateFilters"
-                  type="button"
-                  variant="ghost"
-                  look="outline"
-                  @click="clearLeaveDateFilters"
-                >
-                  Reset
-                </Button>
-              </div>
-            </div>
-          </div>
         </div>
       </template>
 
@@ -429,6 +560,14 @@ onMounted(() => {
         <span class="lowercase">{{ item.email }}</span>
       </template>
 
+      <template #item.member_type="{ item }">
+        <span class="capitalize">{{ item.member_type }}</span>
+      </template>
+
+      <template #item.company_name="{ item }">
+        <span>{{ getUserCompanyName(item) }}</span>
+      </template>
+
       <template #item.roles="{ item }">
         {{ formatUserRoles(item.roles) }}
       </template>
@@ -516,6 +655,14 @@ onMounted(() => {
           <span class="lowercase">{{ item.email }}</span>
         </template>
 
+        <template #item.member_type="{ item }">
+          <span class="uppercase">{{ item.member_type }}</span>
+        </template>
+
+        <template #item.company_name="{ item }">
+          <span>{{ getUserCompanyName(item) }}</span>
+        </template>
+
         <template #item.roles="{ item }">
           {{ formatUserRoles(item.roles) }}
         </template>
diff --git a/src/modules/user/pages/UserProfileTab.vue b/src/modules/user/pages/UserProfileTab.vue
index 09f33a7..a1aa3e8 100644
--- a/src/modules/user/pages/UserProfileTab.vue
+++ b/src/modules/user/pages/UserProfileTab.vue
@@ -153,5 +153,32 @@ function formatAddressLine(address: Address) {
         Tiada alamat direkodkan.
       </div>
     </Box>
+
+    <Box raised="single" class="p-6">
+      <div class="mb-6">
+        <h3 class="text-lg font-semibold text-slate-900">Penama</h3>
+        <p class="mt-1 text-sm text-slate-500">Senarai penama pengguna.</p>
+      </div>
+
+      <div v-if="user.heirs?.length" class="space-y-3">
+        <div v-for="heir in user.heirs" :key="heir.id" class="rounded-lg border border-foreground/10 p-4">
+          <div class="flex flex-wrap items-center gap-2">
+            <span class="font-medium text-slate-900">{{ heir.name }}</span>
+            <Badge v-if="heir.is_primary" class="bg-green-500 text-white">Utama</Badge>
+            <Badge look="outline">{{ heir.relationship }}</Badge>
+          </div>
+          <p class="mt-1 text-sm text-slate-500">{{ heir.ic_number }}</p>
+          <p class="mt-1 text-sm text-slate-500">{{ heir.phone_number }}</p>
+          <p class="mt-1 text-sm text-slate-700">{{ heir.address }}</p>
+        </div>
+      </div>
+
+      <div
+        v-else
+        class="rounded-lg border border-dashed border-foreground/15 p-6 text-center text-sm text-slate-500"
+      >
+        Tiada penama direkodkan.
+      </div>
+    </Box>
   </div>
 </template>
diff --git a/src/modules/user/pages/UserProfileView.vue b/src/modules/user/pages/UserProfileView.vue
index 5532a6c..3187c3d 100644
--- a/src/modules/user/pages/UserProfileView.vue
+++ b/src/modules/user/pages/UserProfileView.vue
@@ -2,6 +2,7 @@
 import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { AlertRoot, AlertTitle, AlertDescription } from '@/components/ui/alert'
+import { Badge } from '@/components/ui/badge'
 import { Box } from '@/components/ui/box'
 import { Button } from '@/components/ui/button'
 import { TabsRoot, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
@@ -13,7 +14,6 @@ import type { UserDetail } from '../types/user.types'
 import UserProfileTab from './UserProfileTab.vue'
 import UserEmploymentTab from './UserEmploymentTab.vue'
 import UserBankDetailTab from './UserBankDetailTab.vue'
-import UserHeirTab from './UserHeirTab.vue'
 
 const router = useRouter()
 const route = useRoute()
@@ -29,15 +29,41 @@ const displayValue = (value: string | number | null | undefined) => {
   return String(value).trim() || '-'
 }
 
+const STATUS_LABELS: Record<string, string> = {
+  active: 'Aktif',
+  pending: 'Menunggu',
+  inactive: 'Tidak Aktif',
+}
+
 const statusLabel = computed(() => {
   const status = user.value?.status
   if (!status) return '-'
-  return status.charAt(0).toUpperCase() + status.slice(1)
+  return STATUS_LABELS[status] ?? status.charAt(0).toUpperCase() + status.slice(1)
 })
 
-const roleNames = computed(() =>
-  user.value?.roles?.map((role) => role.name).join(', ') || '-',
-)
+const statusBadgeVariant = computed(() => {
+  const status = user.value?.status
+  if (status === 'active') return 'success' as const
+  if (status === 'pending') return 'pending' as const
+  return 'secondary' as const
+})
+
+const companyName = computed(() => {
+  const employments = user.value?.employments ?? []
+  const currentEmployment = employments.find((employment) => employment.is_current)
+  return currentEmployment?.company_name ?? employments[0]?.company_name ?? null
+})
+
+function formatDateLabel(value: string | null | undefined): string {
+  if (!value) return '-'
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return value
+  return new Intl.DateTimeFormat('ms-MY', {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  }).format(date)
+}
 
 const avatarFallback = computed(() => {
   const name = user.value?.name?.trim()
@@ -82,53 +108,66 @@ onMounted(() => {
 
     <TabsRoot v-else-if="user" defaultValue="1">
       <Box raised="single" class="mt-5 p-0">
-        <div class="flex flex-col border-b border-foreground/15 p-5 lg:flex-row">
-          <div class="flex flex-1 items-center justify-center px-5 lg:justify-start">
+        <div class="flex flex-col border-b border-foreground/15 lg:flex-row">
+          <!-- Identity -->
+          <div class="flex flex-1 items-center justify-center p-5 lg:justify-start">
             <AvatarRoot class="size-20 border-5 bg-background rounded-full sm:size-24 lg:size-32">
               <AvatarFallback>{{ avatarFallback }}</AvatarFallback>
               <AvatarImage v-if="user.image_url" :src="user.image_url" :alt="user.name" />
             </AvatarRoot>
-            <div class="ml-5">
-              <div class="w-24 truncate text-lg font-medium sm:w-40 sm:whitespace-normal">
+            <div class="ml-5 min-w-0">
+              <div class="truncate text-lg font-medium sm:whitespace-normal">
                 {{ displayValue(user.name) }}
               </div>
-              <div class="opacity-70">{{ roleNames }}</div>
+              <div v-if="user.member_type"
+                class="mt-1 truncate text-sm capitalize opacity-70 sm:whitespace-normal">
+                {{ displayValue(user.member_type) }}
+              </div>
+              <div class="mt-3 flex flex-wrap items-center gap-2">
+                <Badge :variant="statusBadgeVariant">{{ statusLabel }}</Badge>
+                <Badge v-if="user.member_number" look="outline" variant="secondary">
+                  No. {{ user.member_number }}
+                </Badge>
+              </div>
             </div>
           </div>
-          <div
-            class="mt-6 flex-1 border-t border-l border-r border-foreground/15 px-5 pt-5 lg:mt-0 lg:border-t-0 lg:pt-0">
-            <div class="text-center font-medium lg:mt-3 lg:text-left">Maklumat Hubungan</div>
-            <div class="mt-4 flex flex-col items-center justify-center lg:items-start">
+
+          <!-- Contact & membership -->
+          <div class="flex-1 border-t border-foreground/15 p-5 lg:border-t-0 lg:border-l">
+            <div class="text-center font-medium lg:text-left">Maklumat Hubungan</div>
+            <div class="mt-4 flex flex-col items-center lg:items-start">
               <div class="flex items-center truncate sm:whitespace-normal">
-                <Lucide class="mr-2 size-4" icon="Mail" />
+                <Lucide class="mr-2 size-4 shrink-0" icon="Mail" />
                 {{ displayValue(user.email) }}
               </div>
               <div class="mt-3 flex items-center truncate sm:whitespace-normal">
-                <Lucide class="mr-2 size-4" icon="Phone" />
+                <Lucide class="mr-2 size-4 shrink-0" icon="Phone" />
                 {{ displayValue(user.phone_number) }}
               </div>
               <div class="mt-3 flex items-center truncate sm:whitespace-normal">
-                <Lucide class="mr-2 size-4" icon="IdCard" />
+                <Lucide class="mr-2 size-4 shrink-0" icon="IdCard" />
                 {{ displayValue(user.ic_number) }}
               </div>
             </div>
-          </div>
-          <div
-            class="mt-6 flex flex-1 items-center justify-center border-t border-foreground/15 px-5 pt-5 lg:mt-0 lg:border-0 lg:pt-0">
-            <div class="grid grid-cols-3 gap-5">
-              <div class="text-center">
-                <div class="truncate text-xl font-medium">{{ user.roles?.length ?? 0 }}</div>
-                <div class="opacity-70">Peranan</div>
-              </div>
-              <div class="text-center">
-                <div class="text-xl font-medium">{{ statusLabel }}</div>
-                <div class="opacity-70">Status</div>
-              </div>
-              <div class="text-center">
-                <div class="truncate text-xl font-medium capitalize">
-                  {{ displayValue(user.member_type) }}
+
+            <div class="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-3">
+              <div class="text-center lg:text-left">
+                <div class="truncate text-base font-medium">
+                  {{ displayValue(user.position) }}
                 </div>
-                <div class="opacity-70">Jenis Anggota</div>
+                <div class="text-xs opacity-70">Jawatan</div>
+              </div>
+              <div class="text-center lg:text-left">
+                <div class="truncate text-base font-medium">
+                  {{ displayValue(companyName) }}
+                </div>
+                <div class="text-xs opacity-70">Unit</div>
+              </div>
+              <div class="col-span-2 text-center sm:col-span-1 lg:text-left">
+                <div class="truncate text-base font-medium">
+                  {{ formatDateLabel(user.join_date) }}
+                </div>
+                <div class="text-xs opacity-70">Tarikh Sertai</div>
               </div>
             </div>
           </div>
@@ -136,18 +175,15 @@ onMounted(() => {
 
         <div class="px-5 py-4">
           <TabsList class="mb-0 w-full flex justify-between">
-            <TabsTrigger class="inline-flex w-1/4 items-center justify-center" value="1">
+            <TabsTrigger class="inline-flex w-1/3 items-center justify-center" value="1">
               <Lucide class="mr-2 size-4" icon="User" /> Profil
             </TabsTrigger>
-            <TabsTrigger class="inline-flex w-1/4 items-center justify-center" value="5">
+            <TabsTrigger class="inline-flex w-1/3 items-center justify-center" value="5">
               <Lucide class="mr-2 size-4" icon="Briefcase" /> Pekerjaan
             </TabsTrigger>
-            <TabsTrigger class="inline-flex w-1/4 items-center justify-center" value="3">
+            <TabsTrigger class="inline-flex w-1/3 items-center justify-center" value="3">
               <Lucide class="mr-2 size-4" icon="Banknote" /> Bank
             </TabsTrigger>
-            <TabsTrigger class="inline-flex w-1/4 items-center justify-center" value="6">
-              <Lucide class="mr-2 size-4" icon="Users" /> Penama
-            </TabsTrigger>
           </TabsList>
         </div>
       </Box>
@@ -161,9 +197,6 @@ onMounted(() => {
       <TabsContent value="3" class="mt-8">
         <UserBankDetailTab :user="user" embedded />
       </TabsContent>
-      <TabsContent value="6" class="mt-8">
-        <UserHeirTab :user="user" embedded />
-      </TabsContent>
     </TabsRoot>
   </div>
 </template>
diff --git a/src/modules/user/services/user.service.ts b/src/modules/user/services/user.service.ts
index d53ed17..9e87883 100644
--- a/src/modules/user/services/user.service.ts
+++ b/src/modules/user/services/user.service.ts
@@ -15,6 +15,15 @@ type UserApiResponse = {
   message?: string
 }
 
+type UserStatsApiResponse = {
+  success: boolean
+  data: {
+    total: number
+    joined_this_month: number
+  }
+  message?: string
+}
+
 export async function listUsers(
   params: ListUsersParams,
 ): Promise<PaginatedApiResponse<UserListItem>> {
@@ -29,6 +38,20 @@ export async function listUsers(
   return data
 }
 
+export async function getUserStats(
+  params: Omit<ListUsersParams, 'page' | 'per_page' | 'sort_by' | 'sort_order'>,
+): Promise<UserStatsApiResponse> {
+  const { data } = await api.get<UserStatsApiResponse>('/v1/users/stats', {
+    params,
+  })
+
+  if (!data.success) {
+    throw new Error(data.message ?? 'Failed to load user stats')
+  }
+
+  return data
+}
+
 export async function listDeletedUsers(
   params: ListDeletedUsersParams,
 ): Promise<PaginatedApiResponse<UserListItem>> {
diff --git a/src/modules/user/types/user.types.ts b/src/modules/user/types/user.types.ts
index c2138c6..37ae0c1 100644
--- a/src/modules/user/types/user.types.ts
+++ b/src/modules/user/types/user.types.ts
@@ -20,6 +20,8 @@ export interface UserListItem {
   email: string
   ic_number: string
   position: string
+  company_name?: string | null
+  employments?: Employment[]
   phone_number: string
   image_url: string | null
   status: string
diff --git a/src/utils/form-input.utils.ts b/src/utils/form-input.utils.ts
new file mode 100644
index 0000000..6cda602
--- /dev/null
+++ b/src/utils/form-input.utils.ts
@@ -0,0 +1,7 @@
+export function sanitizeIcNumberInput(value: string): string {
+  return value.replace(/\D/g, '')
+}
+
+export function sanitizeNameInput(value: string): string {
+  return value.toUpperCase()
+}