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

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