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/composables/useRoleSwitcher.ts
+2 -2
View File
@@ -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))
fe/src/modules/auth/pages/Login.vue
+2 -2
View File
@@ -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">
fe/src/modules/auth/pages/Register.vue
+14 -4
View File
@@ -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"
fe/src/modules/membership-application/pages/MembershipApplication.vue
+19 -6
View File
@@ -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>
fe/src/modules/membership-application/utils/membership-application-form.utils.ts
+6 -8
View File
@@ -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: {
fe/src/modules/profile/pages/ProfileOverview2.vue
-11
View File
@@ -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
+16 -2
View File
@@ -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>
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
fe/src/utils/form-input.utils.ts
+7
View File
@@ -0,0 +1,7 @@
export function sanitizeIcNumberInput(value: string): string {
return value.replace(/\D/g, '')
}
export function sanitizeNameInput(value: string): string {
return value.toUpperCase()
}