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) {
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">
<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="ml-auto font-medium tabular-nums text-foreground">Rp${formatRupiah(item.total)}</span>
</p>
${!isCashier ? `
<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="text-muted-foreground">${revenueChartConfig.net.label}</span>
<span class="ml-auto font-medium tabular-nums text-foreground">Rp${formatRupiah(item.net)}</span>
</p>
` : ''}
<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="text-muted-foreground">${revenueChartConfig.deduction.label}</span>
@ -652,11 +655,9 @@ watch([startDate, endDate], () => {
<CardTitle>Pendapatan</CardTitle>
</div>
<div class="flex">
<div v-for="chart in [
'total',
'net',
'deduction',
] as const" :key="chart"
<div v-for="chart in (
!hasRole('cashier') ? ['total', 'net', 'deduction'] : ['total', '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">
<span class="text-xs text-muted-foreground">
{{ revenueChartConfig[chart].label }}
@ -670,11 +671,9 @@ watch([startDate, endDate], () => {
<CardContent class="px-2 sm:p-6">
<div v-if="monthlyRevenue.length > 0">
<div class="mb-3 flex flex-wrap items-center justify-center gap-4">
<div v-for="chart in [
'total',
'net',
'deduction',
] as const" :key="chart" class="flex items-center gap-1.5">
<div v-for="chart in (
!hasRole('cashier') ? ['total', 'net', 'deduction'] : ['total', 'deduction']
) as const" :key="chart" class="flex items-center gap-1.5">
<span class="size-2.5 rounded-full" :style="{
backgroundColor:
revenueChartConfig[chart].color,
@ -689,11 +688,11 @@ watch([startDate, endDate], () => {
<VisGroupedBar :x="(_d: MonthlyRevenueData, i: number) => i
" :y="[
(d: MonthlyRevenueData) => d.total,
(d: MonthlyRevenueData) => d.net,
...(!hasRole('cashier') ? [(d: MonthlyRevenueData) => d.net] : []),
(d: MonthlyRevenueData) => d.deduction,
]" :color="[
revenueChartConfig.total.color,
revenueChartConfig.net.color,
...(!hasRole('cashier') ? [revenueChartConfig.net.color] : []),
revenueChartConfig.deduction.color,
]" :bar-padding="0.1" :group-padding="0.2" :rounded-corners="4" />
<VisAxis type="x" :x="(_d: MonthlyRevenueData, i: number) => i
@ -848,15 +847,17 @@ watch([startDate, endDate], () => {
label: 'HPP',
value: 'Rp' + formatRupiah(profitMetrics.hpp),
},
{
label: 'Laba Bersih',
value:
'Rp' +
formatRupiah(profitMetrics.net_profit) +
' (' +
profitMetrics.profit_margin +
'%)',
},
...(!hasRole('cashier') ? [
{
label: 'Laba Bersih',
value:
'Rp' +
formatRupiah(profitMetrics.net_profit) +
' (' +
profitMetrics.profit_margin +
'%)',
},
] : []),
]" />
</div>