KoPKB/My-KOPKB
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

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

Browse Source
This commit is contained in:
ISMAIL MASSERAN
2026-07-09 12:48:26 +08:00
parent ebd3caecc6
commit af7f47bf71
30 changed files with 562 additions and 578 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fe/src/modules/user/composables/useUserList.ts
+35 -1
View File
@@ -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,
}
}
fe/src/modules/user/pages/UserCreate.vue
+14 -1
View File
@@ -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>
fe/src/modules/user/pages/UserEdit.vue
+12 -3
View File
@@ -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>
fe/src/modules/user/pages/UserHeirTab.vue
-38
View File
@@ -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>
fe/src/modules/user/pages/UserList.vue
+194 -47
View File
@@ -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>
fe/src/modules/user/pages/UserProfileTab.vue
+27
View File
@@ -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>
fe/src/modules/user/pages/UserProfileView.vue
+75 -42
View File
@@ -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>
fe/src/modules/user/services/user.service.ts
+23
View File
@@ -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>> {
fe/src/modules/user/types/user.types.ts
+2
View File
@@ -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