From 150a96908641c6103de216a4a309e9eb948a78e1 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sun, 5 Jul 2026 02:38:21 +0700
Subject: [PATCH] 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

---
 resources/js/pages/admin/Analysis.vue | 43 ++++++++++++++-------------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/resources/js/pages/admin/Analysis.vue b/resources/js/pages/admin/Analysis.vue
index 452cfe0..a681333 100644
--- a/resources/js/pages/admin/Analysis.vue
+++ b/resources/js/pages/admin/Analysis.vue
@@ -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>