dst/store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update dashboard permission roles and implement dynamic grid layouts for stats and charts

Browse Source
This commit is contained in:
Yoga Pangestu 2026-06-29 10:25:04 +07:00
parent 368cb66bf4
commit 0ff6b59ca9
2 changed files with 37 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/Enums/Role.php
View File

@ -115,7 +115,6 @@ public function permissions(): array
self::ADMIN_TOKO => [
Permission::DASHBOARD_VIEW,
Permission::DASHBOARD_CASH,
Permission::DASHBOARD_REVENUE,
Permission::DASHBOARD_EXPENSE,
@ -123,8 +122,8 @@ public function permissions(): array
Permission::DASHBOARD_ORDERS_PAYMENT,
Permission::DASHBOARD_ORDERS_MARKETING,
Permission::DASHBOARD_ORDERS_STATUS,
Permission::ANALYSIS_VIEW,
Permission::ANALYSIS_VIEW,
Permission::ANALYSIS_ATTENDANCE,
Permission::ANALYSIS_CASH,
Permission::ANALYSIS_PRODUCT_STOCK,
@ -199,7 +198,6 @@ public function permissions(): array
self::CASHIER => [
Permission::DASHBOARD_VIEW,
Permission::DASHBOARD_ATTENDANCE,
Permission::DASHBOARD_REVENUE,
Permission::DASHBOARD_ORDERS_CHANNEL,
Permission::DASHBOARD_ORDERS_PAYMENT,

38
resources/js/pages/admin/Dashboard.vue
View File

@ -204,6 +204,40 @@ const marketingChartConfig = computed(() => {
return config;
});
const visibleStatsCount = computed(() => {
let count = 0;
if (can('dashboard.attendance')) count++;
if (can('dashboard.cash')) count++;
if (can('dashboard.revenue')) count++;
if (can('dashboard.expense')) count++;
return count;
});
const statsGridClass = computed(() => {
const count = visibleStatsCount.value;
if (count === 1) return 'grid gap-4 grid-cols-1 md:max-w-md';
if (count === 2) return 'grid gap-4 grid-cols-1 md:grid-cols-2';
if (count === 3) return 'grid gap-4 grid-cols-1 md:grid-cols-3';
return 'grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4';
});
const visibleChartsCount = computed(() => {
let count = 0;
if (can('dashboard.orders_channel')) count++;
if (can('dashboard.orders_payment')) count++;
if (can('dashboard.orders_marketing')) count++;
if (can('dashboard.orders_status')) count++;
return count;
});
const chartsGridClass = computed(() => {
const count = visibleChartsCount.value;
if (count === 1) return 'grid gap-4 grid-cols-1 md:max-w-xl';
if (count === 2) return 'grid gap-4 grid-cols-1 md:grid-cols-2';
if (count === 3) return 'grid gap-4 grid-cols-1 md:grid-cols-3';
return 'grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4';
});
</script>
<template>
@ -251,7 +285,7 @@ const marketingChartConfig = computed(() => {
@check-out="openCheckOutModal"
/>
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
<div v-if="visibleStatsCount > 0" :class="statsGridClass">
<StatCard v-if="can('dashboard.attendance')" title="Kehadiran" :icon="UserCheck"
main-label="Total Karyawan" :main-value="attendance.total_employees"
:sub-label="attendance.percentage + '% hadir'" :items="[
@ -319,7 +353,7 @@ const marketingChartConfig = computed(() => {
]" />
</div>
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
<div v-if="visibleChartsCount > 0" :class="chartsGridClass">
<Card v-if="can('dashboard.orders_channel')">
<CardHeader>
<CardTitle class="text-base">Pesanan per Channel</CardTitle>