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

DONE: layout letter with letterhead and footer, notification for newly...

Browse Source
This commit is contained in:
ISMAIL MASSERAN
2026-06-28 02:16:49 +00:00
parent 94ecbe5887
commit 034ecf947f
400 changed files with 29802 additions and 5446 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fe/src/modules/user/pages/UserProfileView.vue
+169
View File
@@ -0,0 +1,169 @@
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { AlertRoot, AlertTitle, AlertDescription } from '@/components/ui/alert'
import { Box } from '@/components/ui/box'
import { Button } from '@/components/ui/button'
import { TabsRoot, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
import { AvatarRoot, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Lucide } from '@/components/ui/lucide'
import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage'
import { getUser } from '../services/user.service'
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()
const userId = computed(() => String(route.params.id ?? ''))
const loading = ref(false)
const error = ref<string | null>(null)
const user = ref<UserDetail | null>(null)
const displayValue = (value: string | number | null | undefined) => {
if (value === null || value === undefined || value === '') return '-'
return String(value).trim() || '-'
}
const statusLabel = computed(() => {
const status = user.value?.status
if (!status) return '-'
return status.charAt(0).toUpperCase() + status.slice(1)
})
const roleNames = computed(() =>
user.value?.roles?.map((role) => role.name).join(', ') || '-',
)
const avatarFallback = computed(() => {
const name = user.value?.name?.trim()
if (!name) return '--'
return name.slice(0, 2).toUpperCase()
})
async function fetchUser() {
loading.value = true
error.value = null
try {
const response = await getUser(userId.value)
user.value = response.data
} catch (err) {
error.value = getApiErrorMessage(err, 'Gagal memuatkan profil pengguna.')
} finally {
loading.value = false
}
}
onMounted(() => {
fetchUser()
})
</script>
<template>
<div>
<div class="flex flex-wrap items-center gap-3">
<h2 class="mr-auto text-lg font-medium">Profil {{ user?.name }} - {{ user?.member_number }}</h2>
<Button look="outline" variant="secondary" type="button" @click="router.push({ name: 'list-users' })">
Kembali
</Button>
</div>
<AlertRoot v-if="error" class="mt-5" variant="danger">
<AlertTitle>Ralat</AlertTitle>
<AlertDescription>{{ error }}</AlertDescription>
</AlertRoot>
<div v-if="loading" class="mt-5 opacity-70">Memuatkan profil...</div>
<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">
<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">
{{ displayValue(user.name) }}
</div>
<div class="opacity-70">{{ roleNames }}</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">
<div class="flex items-center truncate sm:whitespace-normal">
<Lucide class="mr-2 size-4" 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" />
{{ displayValue(user.phone_number) }}
</div>
<div class="mt-3 flex items-center truncate sm:whitespace-normal">
<Lucide class="mr-2 size-4" 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>
<div class="opacity-70">Jenis Anggota</div>
</div>
</div>
</div>
</div>
<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">
<Lucide class="mr-2 size-4" icon="User" /> Profil
</TabsTrigger>
<TabsTrigger class="inline-flex w-1/4 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">
<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" /> Pewaris
</TabsTrigger>
</TabsList>
</div>
</Box>
<TabsContent value="1" class="mt-8">
<UserProfileTab :user="user" embedded />
</TabsContent>
<TabsContent value="5" class="mt-8">
<UserEmploymentTab :user="user" embedded />
</TabsContent>
<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>