DONE: merge heir tab into profile tab, santize userIcNum and name, rename to malay, add stat card on user list

fe/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>

fe/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>