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

feat: update revenue tooltip and chart display logic in Analysis.vue to conditionally show net revenue and profit metrics based on user role; enhance user experience for cashiers

Browse Source
This commit is contained in:
Yoga Pangestu 2026-07-05 02:38:21 +07:00
parent 352599bf00
commit 150a969086
1 changed files with 22 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
resources/js/pages/admin/Analysis.vue
View File

@ -356,6 +356,7 @@ const barSelector = GroupedBar.selectors.bar;
function revenueTooltip(d: any) { function revenueTooltip(d: any) {
const item = d as MonthlyRevenueData; const item = d as MonthlyRevenueData;
const isCashier = hasRole('cashier');
return `<div class="rounded-lg border bg-background px-3 py-1.5 shadow-xl" style="line-height:1.6"> return `<div class="rounded-lg border bg-background px-3 py-1.5 shadow-xl" style="line-height:1.6">
<p style="margin:0;font-weight:500">${item.month}</p> <p style="margin:0;font-weight:500">${item.month}</p>
@ -364,11 +365,13 @@ function revenueTooltip(d: any) {
<span class="text-muted-foreground">${revenueChartConfig.total.label}</span> <span class="text-muted-foreground">${revenueChartConfig.total.label}</span>
<span class="ml-auto font-medium tabular-nums text-foreground">Rp${formatRupiah(item.total)}</span> <span class="ml-auto font-medium tabular-nums text-foreground">Rp${formatRupiah(item.total)}</span>
</p> </p>
${!isCashier ? `
<p style="margin:0;display:flex;align-items:center;gap:0.5rem"> <p style="margin:0;display:flex;align-items:center;gap:0.5rem">
<span class="size-2.5 rounded-full" style="background-color: ${revenueChartConfig.net.color}"></span> <span class="size-2.5 rounded-full" style="background-color: ${revenueChartConfig.net.color}"></span>
<span class="text-muted-foreground">${revenueChartConfig.net.label}</span> <span class="text-muted-foreground">${revenueChartConfig.net.label}</span>
<span class="ml-auto font-medium tabular-nums text-foreground">Rp${formatRupiah(item.net)}</span> <span class="ml-auto font-medium tabular-nums text-foreground">Rp${formatRupiah(item.net)}</span>
</p> </p>
` : ''}
<p style="margin:0;display:flex;align-items:center;gap:0.5rem"> <p style="margin:0;display:flex;align-items:center;gap:0.5rem">
<span class="size-2.5 rounded-full" style="background-color: ${revenueChartConfig.deduction.color}"></span> <span class="size-2.5 rounded-full" style="background-color: ${revenueChartConfig.deduction.color}"></span>
<span class="text-muted-foreground">${revenueChartConfig.deduction.label}</span> <span class="text-muted-foreground">${revenueChartConfig.deduction.label}</span>
@ -652,11 +655,9 @@ watch([startDate, endDate], () => {
<CardTitle>Pendapatan</CardTitle> <CardTitle>Pendapatan</CardTitle>
</div> </div>
<div class="flex"> <div class="flex">
<div v-for="chart in [ <div v-for="chart in (
'total', !hasRole('cashier') ? ['total', 'net', 'deduction'] : ['total', 'deduction']
'net', ) as const" :key="chart"
'deduction',
] as const" :key="chart"
class="flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6"> class="flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6">
<span class="text-xs text-muted-foreground"> <span class="text-xs text-muted-foreground">
{{ revenueChartConfig[chart].label }} {{ revenueChartConfig[chart].label }}
@ -670,11 +671,9 @@ watch([startDate, endDate], () => {
<CardContent class="px-2 sm:p-6"> <CardContent class="px-2 sm:p-6">
<div v-if="monthlyRevenue.length > 0"> <div v-if="monthlyRevenue.length > 0">
<div class="mb-3 flex flex-wrap items-center justify-center gap-4"> <div class="mb-3 flex flex-wrap items-center justify-center gap-4">
<div v-for="chart in [ <div v-for="chart in (
'total', !hasRole('cashier') ? ['total', 'net', 'deduction'] : ['total', 'deduction']
'net', ) as const" :key="chart" class="flex items-center gap-1.5">
'deduction',
] as const" :key="chart" class="flex items-center gap-1.5">
<span class="size-2.5 rounded-full" :style="{ <span class="size-2.5 rounded-full" :style="{
backgroundColor: backgroundColor:
revenueChartConfig[chart].color, revenueChartConfig[chart].color,
@ -689,11 +688,11 @@ watch([startDate, endDate], () => {
<VisGroupedBar :x="(_d: MonthlyRevenueData, i: number) => i <VisGroupedBar :x="(_d: MonthlyRevenueData, i: number) => i
" :y="[ " :y="[
(d: MonthlyRevenueData) => d.total, (d: MonthlyRevenueData) => d.total,
(d: MonthlyRevenueData) => d.net, ...(!hasRole('cashier') ? [(d: MonthlyRevenueData) => d.net] : []),
(d: MonthlyRevenueData) => d.deduction, (d: MonthlyRevenueData) => d.deduction,
]" :color="[ ]" :color="[
revenueChartConfig.total.color, revenueChartConfig.total.color,
revenueChartConfig.net.color, ...(!hasRole('cashier') ? [revenueChartConfig.net.color] : []),
revenueChartConfig.deduction.color, revenueChartConfig.deduction.color,
]" :bar-padding="0.1" :group-padding="0.2" :rounded-corners="4" /> ]" :bar-padding="0.1" :group-padding="0.2" :rounded-corners="4" />
<VisAxis type="x" :x="(_d: MonthlyRevenueData, i: number) => i <VisAxis type="x" :x="(_d: MonthlyRevenueData, i: number) => i
@ -848,15 +847,17 @@ watch([startDate, endDate], () => {
label: 'HPP', label: 'HPP',
value: 'Rp' + formatRupiah(profitMetrics.hpp), value: 'Rp' + formatRupiah(profitMetrics.hpp),
}, },
{ ...(!hasRole('cashier') ? [
label: 'Laba Bersih', {
value: label: 'Laba Bersih',
'Rp' + value:
formatRupiah(profitMetrics.net_profit) + 'Rp' +
' (' + formatRupiah(profitMetrics.net_profit) +
profitMetrics.profit_margin + ' (' +
'%)', profitMetrics.profit_margin +
}, '%)',
},
] : []),
]" /> ]" />
</div> </div>