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

DONE: fix error on pagination where it cannot redirect to next pages, add onboarding_completed_at for new registered user, move dashboard page design into modules folder

Browse Source
This commit is contained in:
ISMAIL MASSERAN
2026-07-06 11:08:32 +08:00
parent ac8f00175a
commit cc2492c3fc
23 changed files with 421 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fe/src/components/ui/pagination/PaginationRoot.vue
+14 -16
View File
@@ -7,30 +7,28 @@ import { normalizeProps, useMachine } from "@zag-js/vue";
import { computed, provide } from "vue";
import { paginationRoot } from "@mykopkb/core/styles/pagination.styles";
const {
class: className,
asChild = false,
count,
pageSize,
siblingCount,
...props
} = defineProps<Partial<Props> & { class?: string; asChild?: boolean }>();
const props = defineProps<Partial<Props> & { class?: string; asChild?: boolean }>();
const service = useMachine(pagination.machine, {
...props,
count,
pageSize,
siblingCount,
id: crypto.randomUUID(),
const paginationId = crypto.randomUUID();
const machineProps = computed(() => {
const { class: _class, asChild: _asChild, id: _id, ...rest } = props;
return {
...rest,
id: paginationId,
};
});
const service = useMachine(pagination.machine, machineProps);
const api = computed(() => pagination.connect(service, normalizeProps));
provide("paginationApi", api);
</script>
<template>
<Slot :class="cn(paginationRoot, className)" v-bind="{ ...props, ...$attrs, ...api.getRootProps() }">
<slot v-if="asChild" />
<Slot :class="cn(paginationRoot, props.class)" v-bind="{ ...$attrs, ...api.getRootProps() }">
<slot v-if="props.asChild" />
<div v-else>
<slot />
</div>
fe/src/components/ui/styles/pagination.styles.ts
+2 -2
View File
@@ -1,7 +1,7 @@
export const paginationRoot = 'flex gap-1'
export const paginationItem = [
'h-10 px-4 py-2 inline-flex items-center justify-center rounded-xl cursor-pointer hover:bg-foreground/5',
'data-[selected]:border data-[selected]:bg-background data-[selected]:border-foreground/10 data-[selected]:font-medium data-[selected]:shadow-md/5',
'h-10 min-w-10 px-3 py-2 inline-flex items-center justify-center rounded-xl cursor-pointer text-foreground hover:bg-foreground/5',
'data-[selected]:border data-[selected]:bg-primary/10 data-[selected]:border-primary/30 data-[selected]:text-primary data-[selected]:font-semibold data-[selected]:shadow-md/5',
'data-[disabled]:opacity-70',
]
export const paginationPrevTrigger = paginationItem
fe/src/components/ui/usage/DataTable.vue
+8 -25
View File
@@ -94,7 +94,6 @@ const props = withDefaults(defineProps<{
items: TableItem[];
loading?: boolean;
itemsPerPage?: number;
page?: number;
itemKey?: string;
pagination?: PaginationData | null;
showPagination?: boolean;
@@ -106,7 +105,6 @@ const props = withDefaults(defineProps<{
headers: () => [],
loading: false,
itemsPerPage: 10,
page: 1,
itemKey: 'id',
pagination: null,
showPagination: false,
@@ -122,7 +120,6 @@ const itemsPerPageModel = defineModel<number>('items-per-page');
// Emits
const emit = defineEmits<{
'update:sort-by': [value: SortConfig[]];
'update:page': [value: number];
'update:items-per-page': [value: number];
'update:column-widths': [value: Record<string, number>];
'export-error': [error: Error];
@@ -449,7 +446,6 @@ const setItemsPerPageValue = (details: { value: string[] }) => {
const handlePageChange = (details: { page: number }) => {
pageModel.value = details.page;
emit('update:page', details.page);
};
const getItemKey = (item: TableItem, index: number) => {
@@ -461,12 +457,6 @@ const currentPage = computed(
() => pageModel.value ?? props.pagination?.current_page ?? 1,
);
const isFirstPage = computed(() => currentPage.value <= 1);
const isLastPage = computed(
() => currentPage.value >= (props.pagination?.last_page ?? 1),
);
const slots = useSlots();
const showTableToolbar = computed(() => props.exportable || !!slots.toolbar);
@@ -851,28 +841,21 @@ watch(sortBy, (newSort) => {
</template>
</div>
<PaginationRoot class="flex items-center gap-2" :count="pagination.total" :pageSize="pagination.per_page"
:page="currentPage" :siblingCount="1" :onPageChange="handlePageChange">
<PaginationPrevTrigger asChild>
<Button size="sm" look="outline" variant="secondary" :disabled="isFirstPage">
<ArrowLeft class="size-4" />
</Button>
<PaginationRoot class="flex items-center gap-2" :count="pagination.total" :page-size="pagination.per_page"
:page="currentPage" :sibling-count="1" :on-page-change="handlePageChange">
<PaginationPrevTrigger>
<ArrowLeft class="size-4" />
</PaginationPrevTrigger>
<PaginationContext v-slot="{ pagination: paginationApi }">
<template v-for="(pageItem, index) in paginationApi?.pages" :key="index">
<PaginationItem v-if="pageItem.type === 'page'" v-bind="{ ...pageItem }" asChild>
<Button size="sm" :look="pageItem.value === currentPage ? 'filled' : 'outline'"
:variant="pageItem.value === currentPage ? 'primary' : 'secondary'">
{{ pageItem.value }}
</Button>
<PaginationItem v-if="pageItem.type === 'page'" v-bind="{ ...pageItem }">
{{ pageItem.value }}
</PaginationItem>
<PaginationEllipsis v-else :index="index" />
</template>
</PaginationContext>
<PaginationNextTrigger asChild>
<Button size="sm" look="outline" variant="secondary" :disabled="isLastPage">
<ArrowRight class="size-4" />
</Button>
<PaginationNextTrigger>
<ArrowRight class="size-4" />
</PaginationNextTrigger>
</PaginationRoot>
</div>
fe/src/main/side-menu.ts
+2 -5
View File
@@ -3,16 +3,13 @@ import { userMenu } from '@/modules/user'
import { roleMenu } from '@/modules/role'
import { membershipApplicationMenu } from '@/modules/membership-application'
import { activityMenu } from '@/modules/activity'
import { dashboardMenu } from '@/modules/dashboard/menu'
export type { Menu }
const mainMenu: (string | Menu)[] = [
'Dashboard',
{
icon: 'CircleGauge',
title: 'Dashboards',
route_name: 'dashboard-overview-1',
},
...dashboardMenu,
'Umum',
...activityMenu,
'Teknologi Maklumat',
fe/src/modules/auth/types/auth.types.ts
+1
View File
@@ -44,6 +44,7 @@ export interface AuthUser {
join_date: string | null
birth_date: string | null
birth_place: string | null
onboarding_completed_at: string | null
roles?: Array<AuthRole & { permissions?: AuthPermission[] }>
}
fe/src/modules/dashboard/index.ts
+1
View File
@@ -0,0 +1 @@
export { dashboardLayoutRoutes } from './routes'
fe/src/modules/dashboard/menu.ts
+9
View File
@@ -0,0 +1,9 @@
import type { Menu } from '@/core/types/menu'
export const dashboardMenu: Menu[] = [
{
icon: 'CircleGauge',
route_name: 'dashboard-overview',
title: 'Dashboard',
}
]
fe/src/views/DashboardOverview1.vue → fe/src/modules/dashboard/pages/DashboardOverview-backup.vue
+38 -3
View File
@@ -1,8 +1,10 @@
<script lang="ts" setup>
import { ref } from 'vue'
import { onMounted, ref } from 'vue'
import { today, getLocalTimeZone } from '@internationalized/date'
import phoneIllustration from '@/assets/images/phone-illustration.svg'
import womanIllustration from '@/assets/images/woman-illustration.svg'
import { completeOnboarding } from '@/modules/profile/services/profile.service'
import { useAuthStore } from '@/stores/auth'
import { Badge } from '@/components/ui/badge'
import { Box } from '@/components/ui/box'
import {
@@ -55,16 +57,44 @@ import { OfficialStores } from '@/components/official-stores'
import { WeeklyBestSellers } from '@/components/weekly-best-sellers'
import { WeeklyTopProducts } from '@/components/weekly-top-products'
const authStore = useAuthStore()
const pc = ref(false)
const electronic = ref(false)
const smartphone = ref(false)
const photography = ref(false)
const sport = ref(false)
const onboardingDialog = ref(true)
const onboardingDialog = ref(false)
const salesReportDate = ref<any[]>([
today(getLocalTimeZone()).subtract({ days: 7 }),
today(getLocalTimeZone()),
])
onMounted(() => {
onboardingDialog.value = !authStore.user?.onboarding_completed_at
})
async function markOnboardingComplete() {
if (authStore.user?.onboarding_completed_at) {
return
}
try {
const res = await completeOnboarding()
if (res.success) {
authStore.setUserProfile(res.data)
}
} catch {
// Will retry on next visit if the request failed
}
}
function handleOnboardingOpenChange(details: { open: boolean }) {
onboardingDialog.value = details.open
if (!details.open) {
void markOnboardingComplete()
}
}
</script>
<template>
@@ -435,7 +465,7 @@ const salesReportDate = ref<any[]>([
</div>
</div>
<!-- BEGIN: Onboarding Dialog -->
<DialogRoot :open="onboardingDialog" @openChange="(details) => (onboardingDialog = details.open)">
<DialogRoot :open="onboardingDialog" @openChange="handleOnboardingOpenChange">
<DialogContent class="sm:max-w-xl">
<DialogCloseTrigger />
<div class="overflow-hidden">
@@ -503,6 +533,11 @@ const salesReportDate = ref<any[]>([
<CarouselPrevTrigger class="text-primary flex items-center gap-3 font-medium ms-0 px-5">
<Lucide icon="MoveLeft" /> Previous
</CarouselPrevTrigger>
<a class="text-primary flex items-center gap-3 font-medium cursor-pointer me-0 px-5"
@click.prevent="onboardingDialog = false">
Selesai
<Lucide icon="MoveRight" />
</a>
</div>
</div>
</CarouselItem>
fe/src/modules/dashboard/pages/DashboardOverview.vue
+258
View File
@@ -0,0 +1,258 @@
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { RouterLink, useRouter } from 'vue-router'
import phoneIllustration from '@/assets/images/phone-illustration.svg'
import womanIllustration from '@/assets/images/woman-illustration.svg'
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 {
CarouselRoot,
CarouselPrevTrigger,
CarouselNextTrigger,
CarouselItemGroup,
CarouselItem,
} from '@/components/ui/carousel'
import { DialogRoot, DialogContent, DialogCloseTrigger } from '@/components/ui/dialog'
import { Lucide, type Icon } from '@/components/ui/lucide'
import { usePermissions } from '@/composables/usePermissions'
import { completeOnboarding } from '@/modules/profile/services/profile.service'
import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore()
const router = useRouter()
const { hasPermission } = usePermissions()
const onboardingDialog = ref(false)
const appName = import.meta.env.VITE_APP_NAME
const appVersion = import.meta.env.VITE_APP_VERSION
const greeting = computed(() => {
const hour = new Date().getHours()
if (hour < 12) return 'Selamat pagi'
if (hour < 18) return 'Selamat petang'
return 'Selamat malam'
})
const availableModules = computed(() => [
{
title: 'Profil',
description: 'Kemas kini maklumat peribadi, pekerjaan, bank dan waris.',
route: 'profile-overview-2',
icon: 'User' as Icon,
visible: true,
},
{
title: 'Permohonan Keahlian',
description: 'Urus dan semak permohonan keahlian KOPKB.',
route: 'list-membership-applications',
icon: 'ClipboardList' as Icon,
visible: hasPermission('lihat permohonan keahlian'),
},
{
title: 'Aktiviti',
description: 'Lihat dan urus aktiviti serta laporan berkaitan.',
route: 'list-activities',
icon: 'CalendarDays' as Icon,
visible: hasPermission('lihat aktiviti'),
},
{
title: 'Senarai Pengguna',
description: 'Pantau dan urus akaun pengguna sistem.',
route: 'list-users',
icon: 'Users' as Icon,
visible: hasPermission('lihat pengguna'),
},
].filter((module) => module.visible))
const upcomingFeatures = [
'Ringkasan statistik keahlian',
'Carta dan laporan bulanan',
'Notifikasi dan aktiviti terkini',
'Papan pemuka pentadbir',
]
onMounted(() => {
onboardingDialog.value = !authStore.user?.onboarding_completed_at
})
async function markOnboardingComplete() {
if (authStore.user?.onboarding_completed_at) {
return
}
try {
const res = await completeOnboarding()
if (res.success) {
authStore.setUserProfile(res.data)
}
} catch {
// Will retry on next visit if the request failed
}
}
async function finishOnboarding() {
onboardingDialog.value = false
await markOnboardingComplete()
await router.push({ name: 'profile-overview-2' })
}
function handleOnboardingOpenChange(details: { open: boolean }) {
onboardingDialog.value = details.open
if (!details.open) {
void markOnboardingComplete()
}
}
</script>
<template>
<div>
<AlertRoot class="mb-6" look="outline" variant="primary">
<Lucide class="mr-2 size-4 shrink-0" icon="Construction" />
<AlertTitle>Sistem Dalam Pembangunan</AlertTitle>
<AlertDescription>
{{ appName }} {{ appVersion }} masih dalam fasa pembangunan. Beberapa fungsi papan pemuka
belum tersedia. Sila gunakan modul sedia ada melalui menu sisi atau pautan di bawah.
</AlertDescription>
</AlertRoot>
<div class="grid grid-cols-12 gap-6">
<div class="col-span-12">
<Box class="relative overflow-hidden p-6 sm:p-8">
<div class="pointer-events-none absolute -right-10 -top-10 size-40 rounded-full bg-primary/10 blur-2xl" />
<div class="relative">
<Badge variant="pending" class="mb-4">Beta</Badge>
<h2 class="text-2xl font-semibold">
{{ greeting }}{{ authStore.userName ? `, ${authStore.userName}` : '' }}
</h2>
<p class="mt-2 max-w-2xl text-base leading-relaxed opacity-70">
Selamat datang ke {{ appName }}. Papan pemuka utama sedang dibangunkan — buat masa ini,
anda boleh mula dengan mengemas kini profil atau mengurus permohonan keahlian.
</p>
</div>
</Box>
</div>
<div class="col-span-12 lg:col-span-7">
<div class="mb-4 flex h-10 items-center">
<h3 class="text-lg font-medium">Modul Tersedia</h3>
</div>
<div class="grid gap-4 sm:grid-cols-2">
<Box v-for="module in availableModules" :key="module.route"
class="flex h-full flex-col p-5 transition-colors hover:bg-foreground/2">
<div class="mb-4 flex size-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
<Lucide :icon="module.icon" class="size-5" />
</div>
<div class="text-base font-medium">{{ module.title }}</div>
<p class="mt-2 flex-1 text-sm leading-relaxed opacity-70">
{{ module.description }}
</p>
<Button as-child variant="ghost" class="mt-5 w-full border border-foreground/15">
<RouterLink :to="{ name: module.route }">
Pergi ke {{ module.title }}
<Lucide icon="ArrowRight" class="size-4" />
</RouterLink>
</Button>
</Box>
</div>
</div>
<div class="col-span-12 lg:col-span-5">
<div class="mb-4 flex h-10 items-center">
<h3 class="text-lg font-medium">Akan Datang</h3>
</div>
<Box class="p-5">
<p class="text-sm leading-relaxed opacity-70">
Ciri-ciri berikut sedang dirancang untuk papan pemuka ini:
</p>
<ul class="mt-4 space-y-3">
<li v-for="feature in upcomingFeatures" :key="feature" class="flex items-start gap-3 text-sm">
<Lucide icon="CircleDashed" class="mt-0.5 size-4 shrink-0 text-primary/70" />
<span>{{ feature }}</span>
</li>
</ul>
</Box>
<Box class="mt-4 p-5">
<div class="flex items-start gap-3">
<Lucide icon="Lightbulb" class="mt-0.5 size-4 shrink-0 text-warning" />
<div>
<div class="text-sm font-medium">Petua</div>
<p class="mt-1 text-sm leading-relaxed opacity-70">
Pastikan profil anda lengkap dan terkini. Maklumat yang
tepat membantu proses kelulusan berjalan lebih lancar.
</p>
</div>
</div>
</Box>
</div>
</div>
<!-- BEGIN: Onboarding Dialog -->
<DialogRoot :open="onboardingDialog" @openChange="handleOnboardingOpenChange">
<DialogContent class="sm:max-w-xl">
<DialogCloseTrigger />
<div class="overflow-hidden">
<div class="-my-5 -mx-10">
<CarouselRoot :default-page="0" :slide-count="2" class="border-0">
<CarouselItemGroup>
<CarouselItem class="border-transparent bg-none bg-transparent" :index="0">
<div class="relative mx-3 flex flex-col items-center gap-1 px-3.5 pb-20">
<div
class="w-full bg-primary/5 mb-7 border-primary/10 shadow-lg shadow-black/10 relative rounded-3xl border h-52 overflow-hidden before:bg-noise before:absolute before:inset-0 before:opacity-30 after:bg-accent after:absolute after:inset-0 after:opacity-30 after:blur-2xl">
<img class="absolute inset-0 mx-auto mt-10 w-2/5 scale-125" :src="phoneIllustration"
alt="MyKOPKB" />
</div>
<div class="px-8">
<div class="text-center text-xl font-medium">Selamat Datang ke Sistem MyKOPKB</div>
<div class="mt-3 text-center text-base leading-relaxed opacity-70">
Sistem MyKOPKB adalah sistem integrasi bagi ahli Koperasi Permodalan Kelantan Berhad (KOPKB).
</div>
</div>
<div class="absolute inset-x-0 bottom-0 flex justify-end px-5">
<CarouselNextTrigger class="text-primary flex items-center gap-3 font-medium me-0 px-5">
Seterusnya
<Lucide icon="MoveRight" />
</CarouselNextTrigger>
</div>
</div>
</CarouselItem>
<CarouselItem class="border-transparent bg-none bg-transparent" :index="1">
<div class="relative mx-3 flex flex-col items-center gap-1 px-3.5 pb-20">
<div
class="w-full bg-primary/5 mb-7 border-primary/10 shadow-lg shadow-black/10 relative rounded-3xl border h-52 overflow-hidden before:bg-noise before:absolute before:inset-0 before:opacity-30 after:bg-accent after:absolute after:inset-0 after:opacity-30 after:blur-2xl">
<img class="absolute inset-0 mx-auto mt-10 w-2/5 scale-125" :src="womanIllustration"
alt="MyKOPKB" />
</div>
<div class="px-8">
<div class="text-center text-xl font-medium">Mulakan dengan Profil Anda</div>
<div class="mt-3 text-center text-base leading-relaxed opacity-70">
Lengkapkan maklumat peribadi, pekerjaan dan butiran bank.
</div>
</div>
<div class="absolute inset-x-0 bottom-0 flex place-content-between px-5">
<CarouselPrevTrigger class="text-primary flex items-center gap-3 font-medium ms-0 px-5">
<Lucide icon="MoveLeft" /> Kembali
</CarouselPrevTrigger>
<a class="inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-3 font-semibold text-white shadow-md transition-all duration-200 hover:bg-primary/90 hover:shadow-lg active:scale-95 cursor-pointer"
@click.prevent="finishOnboarding">
<span>Selesai</span>
<Lucide icon="Check" class="h-5 w-5" />
</a>
</div>
</div>
</CarouselItem>
</CarouselItemGroup>
</CarouselRoot>
</div>
</div>
</DialogContent>
</DialogRoot>
<!-- END: Onboarding Dialog -->
</div>
</template>
fe/src/modules/dashboard/routes.ts
+10
View File
@@ -0,0 +1,10 @@
import type { RouteRecordRaw } from 'vue-router'
export const dashboardLayoutRoutes: RouteRecordRaw[] = [
{
path: '/',
name: 'dashboard-overview',
component: () => import('./pages/DashboardOverview.vue'),
meta: { title: 'Dashboard Overview', module: 'dashboard' },
},
]
fe/src/modules/profile/services/profile.service.ts
+5
View File
@@ -63,3 +63,8 @@ export async function updatePassword(payload: UpdatePasswordPayload): Promise<Up
const { data } = await api.put<UpdatePasswordResponse>('/v1/profile/password', payload)
return data
}
export async function completeOnboarding(): Promise<UpdateProfileResponse> {
const { data } = await api.post<UpdateProfileResponse>('/v1/profile/onboarding/complete')
return data
}
fe/src/router/index.ts
+2 -5
View File
@@ -11,6 +11,7 @@ import { useAuthStore } from '@/stores/auth'
import { userLayoutRoutes } from '@/modules/user'
import { roleLayoutRoutes } from '@/modules/role'
import { activityLayoutRoutes } from '@/modules/activity'
import { dashboardLayoutRoutes } from '@/modules/dashboard'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@@ -20,11 +21,7 @@ const router = createRouter({
path: '/',
component: Layout,
children: [
{
path: '/',
name: 'dashboard-overview-1',
component: () => import('../views/DashboardOverview1.vue'),
},
...dashboardLayoutRoutes,
{
path: 'categories',
name: 'categories',