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

DONE: membership application to generate letter along with member_number and attach to email, change to dropdown for company or job selection, redesign profile ui, change to incremental ids for jobs; WIP: member digital card

Browse Source
This commit is contained in:
ISMAIL MASSERAN
2026-07-06 09:37:08 +08:00
parent e77712105c
commit 61345e9cf0
59 changed files with 1538 additions and 9156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fe/src/modules/profile/pages/ProfileOverview2.vue
+136 -72
View File
@@ -1,28 +1,17 @@
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import Swal from 'sweetalert2'
import fakers from '@/utils/faker'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Box } from '@/components/ui/box'
import { TabsRoot, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
import { MenuRoot, MenuTrigger, MenuPositioner, MenuContent, MenuItem } from '@/components/ui/menu'
import { AvatarRoot, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { SwitchRoot, SwitchControl } from '@/components/ui/switch'
import { ProgressRoot, ProgressTrack, ProgressRange } from '@/components/ui/progress-linear'
import {
CarouselRoot,
CarouselPrevTrigger,
CarouselNextTrigger,
CarouselItemGroup,
CarouselItem,
} from '@/components/ui/carousel'
import { Lucide } from '@/components/ui/lucide'
import { FileIcon } from '@/components/ui/file-icon'
import { Badge } from '@/components/ui/badge'
import logoUrl from '@/assets/images/logo-kopkb.svg'
import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage'
import { listEmployments } from '@/modules/profile/services/employment.service'
import { uploadProfileImage } from '@/modules/profile/services/profile.service'
import type { Employment } from '@/modules/profile/types/employment.types'
import { useAuthStore } from '@/stores/auth'
import MemberDigitalCard from '../components/MemberDigitalCard.vue'
import ProfileTab from './ProfileTab.vue'
import EmploymentTab from './EmploymentTab.vue'
import BankDetailTab from './BankDetailTab.vue'
@@ -34,12 +23,59 @@ const authStore = useAuthStore()
const uploadingImage = ref(false)
const imageInputRef = ref<HTMLInputElement | null>(null)
const imagePreviewUrl = ref<string | null>(null)
const employments = ref<Employment[]>([])
const companyName = computed(() => {
const currentEmployment = employments.value.find((employment) => employment.is_current)
return currentEmployment?.company_name ?? employments.value[0]?.company_name ?? null
})
const profileUrl = computed(() => {
const token = authStore.user?.public_profile_token
if (!token) return null
const baseUrl = (typeof window !== 'undefined'
? window.location.origin
: import.meta.env.VITE_APP_URL || ''
).replace(/\/$/, '')
return `${baseUrl}/v/${token}`
})
const displayValue = (value: string | number | null | undefined) => {
if (value === null || value === undefined || value === '') return '-'
return String(value).trim() || '-'
}
const STATUS_LABELS: Record<string, string> = {
active: 'Aktif',
pending: 'Menunggu',
inactive: 'Tidak Aktif',
}
const statusLabel = computed(() => {
const status = authStore.userStatus
if (!status) return '-'
return STATUS_LABELS[status] ?? status.charAt(0).toUpperCase() + status.slice(1)
})
const statusBadgeVariant = computed(() => {
if (authStore.isAccountActive) return 'success' as const
if (authStore.isAccountPending) return 'pending' as const
return 'secondary' as const
})
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 avatarSrc = computed(
() => imagePreviewUrl.value ?? authStore.userImageUrl ?? undefined,
)
@@ -98,10 +134,21 @@ async function onImageSelected(event: Event) {
}
}
async function fetchEmployments() {
try {
const res = await listEmployments()
employments.value = res.data
} catch {
employments.value = []
}
}
onMounted(async () => {
if (!authStore.user) {
await authStore.fetchSession()
}
await fetchEmployments()
})
</script>
@@ -113,9 +160,10 @@ onMounted(async () => {
<TabsRoot defaultValue="1">
<!-- BEGIN: Profile Info -->
<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="relative" :class="{ 'opacity-60': uploadingImage }">
<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">
<div class="relative shrink-0" :class="{ 'opacity-60': uploadingImage }">
<AvatarRoot class="size-20 border-5 bg-background rounded-full sm:size-24 lg:size-32">
<AvatarFallback>{{ authStore.userName }}</AvatarFallback>
<AvatarImage v-if="avatarSrc" :src="avatarSrc" :alt="authStore.userName" />
@@ -129,87 +177,103 @@ onMounted(async () => {
<input ref="imageInputRef" type="file" accept="image/jpeg,image/png,image/jpg,image/gif" class="hidden"
@change="onImageSelected" />
</div>
<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">
{{ authStore.userName || '-' }}
</div>
<div v-if="authStore.userMemberType"
class="mt-1 truncate text-sm capitalize opacity-70 sm:whitespace-normal">
{{ authStore.userMemberType }}
</div>
<div class="mt-3 flex flex-wrap items-center gap-2">
<Badge :variant="statusBadgeVariant">{{ statusLabel }}</Badge>
<Badge v-if="authStore.userMemberNumber" look="outline" variant="secondary">
No. {{ authStore.userMemberNumber }}
</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(authStore.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(authStore.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(authStore.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="relative aspect-1.75/1 w-full max-w-68 overflow-hidden rounded-2xl bg-linear-to-br from-primary via-primary/95 to-primary/75 p-4 text-primary-foreground shadow-lg ring-1 ring-white/20 sm:max-w-xs sm:p-5"
role="img" aria-label="Kad digital anggota">
<div class="pointer-events-none absolute inset-0 bg-noise opacity-30" />
<div class="pointer-events-none absolute -right-10 -top-10 size-36 rounded-full bg-white/10" />
<div class="pointer-events-none absolute -bottom-12 -left-8 size-40 rounded-full bg-white/5" />
<div
class="pointer-events-none absolute right-4 top-1/2 size-10 -translate-y-1/2 rounded-md border border-white/20 bg-white/10" />
<div class="relative flex h-full flex-col justify-between">
<div class="flex items-start justify-between gap-3">
<img :src="logoUrl" alt="" class="h-7 w-auto brightness-0 invert sm:h-8" />
<div class="text-right text-[10px] font-semibold uppercase tracking-[0.2em] opacity-80">
Kad Digital
</div>
<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(authStore.userPosition) }}
</div>
<div>
<div class="text-[10px] font-medium uppercase tracking-widest opacity-70">No. Anggota</div>
<div class="mt-1 font-mono text-2xl font-semibold tracking-[0.15em] sm:text-3xl">
{{ displayValue(authStore.userMemberNumber) }}
</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="flex items-end justify-between gap-3 border-t border-white/15 pt-3">
<div class="min-w-0 flex-1">
<div class="truncate text-sm font-medium">{{ authStore.userName || '-' }}</div>
<div class="mt-0.5 text-[10px] uppercase tracking-wide opacity-60">Nama</div>
</div>
<div class="shrink-0 text-right">
<div class="text-sm font-semibold">{{ displayValue(authStore.userMemberType) }}</div>
<div class="mt-0.5 text-[10px] uppercase tracking-wide opacity-60">Jenis Anggota</div>
</div>
<div class="text-xs opacity-70">Syarikat</div>
</div>
<div class="col-span-2 text-center sm:col-span-1 lg:text-left">
<div class="truncate text-base font-medium">
{{ formatDateLabel(authStore.userJoinDate) }}
</div>
<div class="text-xs opacity-70">Tarikh Sertai</div>
</div>
</div>
</div>
<!-- Digital card -->
<div
class="flex shrink-0 items-center justify-center border-t border-foreground/15 p-5 lg:border-t-0 lg:border-l">
<MemberDigitalCard large :member-number="authStore.userMemberNumber" :member-name="authStore.userName"
:member-type="authStore.userMemberType" :company-name="companyName" :profile-url="profileUrl"
:image-url="avatarSrc" />
</div>
</div>
<!-- Tabs title -->
<div class="px-5 py-4">
<TabsList class="w-full mb-0 flex justify-between">
<TabsTrigger class="w-1/4 inline-flex items-center justify-center" value="1">
<Lucide class="mr-2 size-4" icon="User" /> Profil
<TabsList class="mb-0 flex w-full">
<TabsTrigger
class="inline-flex min-w-0 flex-1 items-center justify-center whitespace-nowrap px-2 sm:px-3 md:text-sm"
value="1" aria-label="Profil">
<Lucide class="size-4 shrink-0 md:mr-2" icon="User" />
<span class="hidden md:inline">Profil</span>
</TabsTrigger>
<TabsTrigger class="w-1/4 inline-flex items-center justify-center" value="5">
<Lucide class="mr-2 size-4" icon="Briefcase" /> Pekerjaan
<TabsTrigger
class="inline-flex min-w-0 flex-1 items-center justify-center whitespace-nowrap px-2 sm:px-3 md:text-sm"
value="5" aria-label="Pekerjaan">
<Lucide class="size-4 shrink-0 md:mr-2" icon="Briefcase" />
<span class="hidden md:inline">Pekerjaan</span>
</TabsTrigger>
<TabsTrigger class="w-1/4 inline-flex items-center justify-center" value="3">
<Lucide class="mr-2 size-4" icon="Banknote" /> Bank
<TabsTrigger
class="inline-flex min-w-0 flex-1 items-center justify-center whitespace-nowrap px-2 sm:px-3 md:text-sm"
value="3" aria-label="Bank">
<Lucide class="size-4 shrink-0 md:mr-2" icon="Banknote" />
<span class="hidden md:inline">Bank</span>
</TabsTrigger>
<TabsTrigger class="w-1/4 inline-flex items-center justify-center" value="6">
<Lucide class="mr-2 size-4" icon="Users" /> Pewaris
<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="w-1/4 inline-flex items-center justify-center" value="2">
<Lucide class="mr-2 size-4" icon="Lock" /> Kata Laluan
<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">
<Lucide class="size-4 shrink-0 md:mr-2" icon="Lock" />
<span class="hidden md:inline">Kata Laluan</span>
</TabsTrigger>
</TabsList>
</div>
@@ -230,7 +294,7 @@ onMounted(async () => {
<TabsContent value="2" class="mt-8">
<ChangePasswordTab embedded />
</TabsContent>
<!-- Pewaris -->
<!-- Penama -->
<TabsContent value="6" class="mt-8">
<HeirTab embedded />
</TabsContent>