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

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