diff --git a/app/Services/System/AnalysisService.php b/app/Services/System/AnalysisService.php
index a4c38c4..8d8eba3 100644
--- a/app/Services/System/AnalysisService.php
+++ b/app/Services/System/AnalysisService.php
@@ -674,20 +674,29 @@ public function getTopProducts(?Carbon $startDate = null, ?Carbon $endDate = nul
 
     public function getMarketingSales(?Carbon $startDate = null, ?Carbon $endDate = null): array
     {
+        $qtySubquery = DB::table('order_items')
+            ->select('order_id', DB::raw('SUM(quantity) as total_qty'))
+            ->whereNull('deleted_at')
+            ->groupBy('order_id');
+
         return Order::query()
             ->completed()
             ->whereNotNull('marketing_id')
             ->when($startDate && $endDate, fn ($q) => $q->whereBetween('orders.created_at', [$startDate, $endDate]))
             ->join('users', 'orders.marketing_id', '=', 'users.id')
             ->leftJoin('user_profiles', 'users.id', '=', 'user_profiles.user_id')
+            ->leftJoinSub($qtySubquery, 'order_qtys', function ($join) {
+                $join->on('orders.id', '=', 'order_qtys.order_id');
+            })
             ->selectRaw('
                 users.id as marketing_id,
                 COALESCE(user_profiles.full_name, users.username) as marketing_name,
-                COUNT(*) as total_orders,
+                COUNT(orders.id) as total_orders,
                 SUM(orders.total_amount) as total_revenue,
                 SUM(orders.subtotal) as total_subtotal,
                 SUM(orders.discount) as total_discount,
-                AVG(orders.total_amount) as avg_order
+                AVG(orders.total_amount) as avg_order,
+                SUM(COALESCE(order_qtys.total_qty, 0)) as total_products_sold
             ')
             ->groupBy('users.id', 'user_profiles.full_name', 'users.username')
             ->orderByDesc('total_revenue')
@@ -695,6 +704,7 @@ public function getMarketingSales(?Carbon $startDate = null, ?Carbon $endDate =
             ->map(fn ($item) => [
                 'marketing_name' => $item->marketing_name,
                 'total_orders' => (int) $item->total_orders,
+                'total_products_sold' => (int) $item->total_products_sold,
                 'total_revenue' => (int) $item->total_revenue,
                 'total_subtotal' => (int) $item->total_subtotal,
                 'total_discount' => (int) $item->total_discount,
diff --git a/resources/js/pages/admin/Analysis.vue b/resources/js/pages/admin/Analysis.vue
index 1f1e2f9..452cfe0 100644
--- a/resources/js/pages/admin/Analysis.vue
+++ b/resources/js/pages/admin/Analysis.vue
@@ -1,8 +1,19 @@
 <script setup lang="ts">
 import { Head, router } from '@inertiajs/vue3';
-import { Banknote, Package, ShoppingCart, TrendingUp, UserCheck } from '@lucide/vue';
+import {
+    Banknote,
+    Package,
+    ShoppingCart,
+    TrendingUp,
+    UserCheck,
+} from '@lucide/vue';
 import { GroupedBar } from '@unovis/ts';
-import { VisAxis, VisGroupedBar, VisTooltip, VisXYContainer } from '@unovis/vue';
+import {
+    VisAxis,
+    VisGroupedBar,
+    VisTooltip,
+    VisXYContainer,
+} from '@unovis/vue';
 import { computed, ref, watch } from 'vue';
 import StatCard from '@/components/card/StatCard.vue';
 import { Button } from '@/components/ui/button';
@@ -16,7 +27,14 @@ import {
 import type { ChartConfig } from '@/components/ui/chart';
 import { ChartContainer } from '@/components/ui/chart';
 import { DatePicker } from '@/components/ui/date-picker';
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
 import { useCan } from '@/composables/useCan';
 import AdminLayout from '@/layouts/AdminLayout.vue';
 import { formatRupiah, formatRupiahShort } from '@/lib/rupiah';
@@ -126,6 +144,7 @@ const props = defineProps<{
     marketingSales: Array<{
         marketing_name: string;
         total_orders: number;
+        total_products_sold: number;
         total_revenue: number;
         total_subtotal: number;
         total_discount: number;
@@ -175,7 +194,12 @@ function onPresetChange(value: any) {
 }
 
 // Revenue Chart
-type MonthlyRevenueData = { month: string; total: number; net: number; deduction: number };
+type MonthlyRevenueData = {
+    month: string;
+    total: number;
+    net: number;
+    deduction: number;
+};
 
 const revenueChartConfig = {
     total: {
@@ -194,12 +218,21 @@ const revenueChartConfig = {
 
 const revenueTotals = computed(() => ({
     total: props.revenueSummary.total_revenue,
-    net: props.revenueSummary.total_revenue - props.revenueSummary.total_deduction - props.profitMetrics.hpp,
+    net:
+        props.revenueSummary.total_revenue -
+        props.revenueSummary.total_deduction -
+        props.profitMetrics.hpp,
     deduction: props.revenueSummary.total_deduction,
 }));
 
 // Expense Chart
-type MonthlyExpenseData = { month: string; total: number; purchase: number; expense: number; advance: number };
+type MonthlyExpenseData = {
+    month: string;
+    total: number;
+    purchase: number;
+    expense: number;
+    advance: number;
+};
 
 const expenseChartConfig = {
     total: {
@@ -286,7 +319,10 @@ const peakHour = computed(() => {
         return { hour: '-', orders: 0 };
     }
 
-    return props.busyHours.reduce((max, item) => item.orders > max.orders ? item : max, props.busyHours[0]);
+    return props.busyHours.reduce(
+        (max, item) => (item.orders > max.orders ? item : max),
+        props.busyHours[0],
+    );
 });
 
 // Top 5 Chart configs
@@ -344,13 +380,16 @@ function revenueTooltip(d: any) {
 function expenseTooltip(d: any) {
     const item = d as MonthlyExpenseData;
     const charts = visibleExpenseCharts.value;
-    const rows = charts.map((chart) =>
-        `<p style="margin:0;display:flex;align-items:center;gap:0.5rem">
+    const rows = charts
+        .map(
+            (chart) =>
+                `<p style="margin:0;display:flex;align-items:center;gap:0.5rem">
             <span class="size-2.5 rounded-full" style="background-color: ${expenseChartConfig[chart].color}"></span>
             <span class="text-muted-foreground">${expenseChartConfig[chart].label}</span>
             <span class="ml-auto font-medium tabular-nums text-foreground">Rp${formatRupiah(item[chart])}</span>
-        </p>`
-    ).join('');
+        </p>`,
+        )
+        .join('');
 
     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>
@@ -470,7 +509,7 @@ watch([startDate, endDate], () => {
 
                 <div class="flex flex-wrap items-center gap-3">
                     <Select v-model="selectedPreset" @update:model-value="onPresetChange">
-                        <SelectTrigger class="w-[140px] h-9">
+                        <SelectTrigger class="h-9 w-[140px]">
                             <SelectValue placeholder="Filter Cepat" />
                         </SelectTrigger>
                         <SelectContent>
@@ -516,9 +555,10 @@ watch([startDate, endDate], () => {
                         },
                     ]" />
 
-                <StatCard v-if="can('analysis.attendance') && !isManager && myAttendance" title="Kehadiran Saya"
-                    :icon="UserCheck" main-label="Hari Kerja" :main-value="myAttendance.total_days"
-                    :sub-label="myAttendance.percentage + '% hadir'" :items="[
+                <StatCard v-if="
+                    can('analysis.attendance') && !isManager && myAttendance
+                " title="Kehadiran Saya" :icon="UserCheck" main-label="Hari Kerja"
+                    :main-value="myAttendance.total_days" :sub-label="myAttendance.percentage + '% hadir'" :items="[
                         {
                             label: 'Hadir',
                             value: myAttendance.present_days,
@@ -534,50 +574,73 @@ watch([startDate, endDate], () => {
                     ]" />
 
                 <StatCard v-if="can('analysis.cash')" title="Kas Toko" :icon="Banknote" main-label="Total Saldo"
-                    :main-value="'Rp' + formatRupiah(cashOverview.total_balance)" :sub-label="cashOverview.total_transactions + ' transaksi'
-                        " :items="[
-                            {
-                                label: 'Deposit',
-                                value: 'Rp' + formatRupiah(cashOverview.total_deposit),
-                            },
-                            {
-                                label: 'Withdrawal',
-                                value: 'Rp' + formatRupiah(cashOverview.total_withdrawal),
-                            },
-                        ]" :cols="2" />
+                    :main-value="'Rp' + formatRupiah(cashOverview.total_balance)
+                        " :sub-label="cashOverview.total_transactions + ' transaksi'" :items="[
+                        {
+                            label: 'Deposit',
+                            value:
+                                'Rp' + formatRupiah(cashOverview.total_deposit),
+                        },
+                        {
+                            label: 'Withdrawal',
+                            value:
+                                'Rp' +
+                                formatRupiah(cashOverview.total_withdrawal),
+                        },
+                    ]" :cols="2" />
 
                 <StatCard v-if="can('analysis.raw_materials')" title="Bahan Baku" :icon="Package"
-                    main-label="Total Stok" :main-value="rawMaterialStock.total_stock.toLocaleString('id-ID')"
-                    :sub-label="'Rp' + formatRupiah(rawMaterialStock.total_value)" :items="[
+                    main-label="Total Stok" :main-value="rawMaterialStock.total_stock.toLocaleString('id-ID')
+                        " :sub-label="'Rp' + formatRupiah(rawMaterialStock.total_value)
+                        " :items="[
                         {
                             label: 'Yard',
-                            value: rawMaterialStock.by_unit?.yard?.toLocaleString('id-ID') ?? '0',
+                            value:
+                                rawMaterialStock.by_unit?.yard?.toLocaleString(
+                                    'id-ID',
+                                ) ?? '0',
                         },
                         {
                             label: 'Meter',
-                            value: rawMaterialStock.by_unit?.meter?.toLocaleString('id-ID') ?? '0',
+                            value:
+                                rawMaterialStock.by_unit?.meter?.toLocaleString(
+                                    'id-ID',
+                                ) ?? '0',
                         },
                         {
                             label: 'Kg',
-                            value: rawMaterialStock.by_unit?.kilogram?.toLocaleString('id-ID') ?? '0',
+                            value:
+                                rawMaterialStock.by_unit?.kilogram?.toLocaleString(
+                                    'id-ID',
+                                ) ?? '0',
                         },
                     ]" />
 
                 <StatCard v-if="can('analysis.product_stock')" title="Stok Produk" :icon="ShoppingCart"
-                    main-label="Total Stok" :main-value="productStock.total_stock.toLocaleString('id-ID')"
-                    :sub-label="'Rp' + formatRupiah(productStock.total_value) + (productStock.total_reject > 0 ? ' (' + productStock.total_reject + ' reject)' : '')"
-                    :items="[
+                    main-label="Total Stok" :main-value="productStock.total_stock.toLocaleString('id-ID')
+                        " :sub-label="'Rp' +
+                        formatRupiah(productStock.total_value) +
+                        (productStock.total_reject > 0
+                            ? ' (' + productStock.total_reject + ' reject)'
+                            : '')
+                        " :items="[
                         {
                             label: 'Produk',
-                            value: productStock.total_products.toLocaleString('id-ID'),
+                            value: productStock.total_products.toLocaleString(
+                                'id-ID',
+                            ),
                         },
                         {
                             label: 'Varian',
-                            value: productStock.total_variants.toLocaleString('id-ID'),
+                            value: productStock.total_variants.toLocaleString(
+                                'id-ID',
+                            ),
                         },
                         {
                             label: 'Kategori',
-                            value: productStock.total_categories.toLocaleString('id-ID'),
+                            value: productStock.total_categories.toLocaleString(
+                                'id-ID',
+                            ),
                         },
                     ]" />
             </div>
@@ -589,9 +652,13 @@ 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 [
+                            'total',
+                            'net',
+                            '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-muted-foreground text-xs">
+                            <span class="text-xs text-muted-foreground">
                                 {{ revenueChartConfig[chart].label }}
                             </span>
                             <span class="text-sm">
@@ -603,31 +670,43 @@ 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">
-                                <span class="size-2.5 rounded-full"
-                                    :style="{ backgroundColor: revenueChartConfig[chart].color }"></span>
-                                <span class="text-xs text-muted-foreground">{{ revenueChartConfig[chart].label }}</span>
+                            <div v-for="chart in [
+                                'total',
+                                'net',
+                                'deduction',
+                            ] as const" :key="chart" class="flex items-center gap-1.5">
+                                <span class="size-2.5 rounded-full" :style="{
+                                    backgroundColor:
+                                        revenueChartConfig[chart].color,
+                                }"></span>
+                                <span class="text-xs text-muted-foreground">{{
+                                    revenueChartConfig[chart].label
+                                    }}</span>
                             </div>
                         </div>
                         <ChartContainer :config="revenueChartConfig" class="aspect-auto h-[300px] w-full">
                             <VisXYContainer :data="monthlyRevenue" :y-domain="[0, undefined]">
-                                <VisGroupedBar :x="(_d: MonthlyRevenueData, i: number) => i" :y="[
-                                    (d: MonthlyRevenueData) => d.total,
-                                    (d: MonthlyRevenueData) => d.net,
-                                    (d: MonthlyRevenueData) => d.deduction,
-                                ]" :color="[
-                                    revenueChartConfig.total.color,
-                                    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" :tick-line="false"
-                                    :domain-line="false" :grid-line="false"
-                                    :tick-format="(d: number) => monthlyRevenue[d]?.month ?? ''"
-                                    :tick-values="monthlyRevenue.map((_, i) => i)" />
-                                <VisAxis type="y" :num-ticks="4" :tick-line="false" :domain-line="false"
-                                    :tick-format="(d: number) => 'Rp' + formatRupiahShort(d)" />
-                                <VisTooltip :triggers="{ [barSelector]: revenueTooltip }" class-name="custom-tooltip" />
+                                <VisGroupedBar :x="(_d: MonthlyRevenueData, i: number) => i
+                                    " :y="[
+                                        (d: MonthlyRevenueData) => d.total,
+                                        (d: MonthlyRevenueData) => d.net,
+                                        (d: MonthlyRevenueData) => d.deduction,
+                                    ]" :color="[
+                                        revenueChartConfig.total.color,
+                                        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
+                                    " :tick-line="false" :domain-line="false" :grid-line="false" :tick-format="(d: number) =>
+                                            monthlyRevenue[d]?.month ?? ''
+                                        " :tick-values="monthlyRevenue.map((_, i) => i)
+                                        " />
+                                <VisAxis type="y" :num-ticks="4" :tick-line="false" :domain-line="false" :tick-format="(d: number) =>
+                                        'Rp' + formatRupiahShort(d)
+                                    " />
+                                <VisTooltip :triggers="{
+                                    [barSelector]: revenueTooltip,
+                                }" class-name="custom-tooltip" />
                             </VisXYContainer>
                         </ChartContainer>
                     </div>
@@ -646,7 +725,7 @@ watch([startDate, endDate], () => {
                     <div class="flex">
                         <div v-for="chart in visibleExpenseCharts" :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-muted-foreground text-xs">
+                            <span class="text-xs text-muted-foreground">
                                 {{ expenseChartConfig[chart].label }}
                             </span>
                             <span class="text-sm">
@@ -659,23 +738,31 @@ watch([startDate, endDate], () => {
                     <div v-if="monthlyExpense.length > 0">
                         <div class="mb-3 flex flex-wrap items-center justify-center gap-4">
                             <div v-for="chart in visibleExpenseCharts" :key="chart" class="flex items-center gap-1.5">
-                                <span class="size-2.5 rounded-full"
-                                    :style="{ backgroundColor: expenseChartConfig[chart].color }"></span>
-                                <span class="text-xs text-muted-foreground">{{ expenseChartConfig[chart].label }}</span>
+                                <span class="size-2.5 rounded-full" :style="{
+                                    backgroundColor:
+                                        expenseChartConfig[chart].color,
+                                }"></span>
+                                <span class="text-xs text-muted-foreground">{{
+                                    expenseChartConfig[chart].label
+                                    }}</span>
                             </div>
                         </div>
                         <ChartContainer :config="expenseChartConfig" class="aspect-auto h-[300px] w-full">
                             <VisXYContainer :data="monthlyExpense" :y-domain="[0, undefined]">
-                                <VisGroupedBar :x="(_d: MonthlyExpenseData, i: number) => i" :y="expenseYAccessors"
-                                    :color="expenseColors" :bar-padding="0.1" :group-padding="0.2"
-                                    :rounded-corners="4" />
-                                <VisAxis type="x" :x="(_d: MonthlyExpenseData, i: number) => i" :tick-line="false"
-                                    :domain-line="false" :grid-line="false"
-                                    :tick-format="(d: number) => monthlyExpense[d]?.month ?? ''"
-                                    :tick-values="monthlyExpense.map((_, i) => i)" />
-                                <VisAxis type="y" :num-ticks="4" :tick-line="false" :domain-line="false"
-                                    :tick-format="(d: number) => 'Rp' + formatRupiahShort(d)" />
-                                <VisTooltip :triggers="{ [barSelector]: expenseTooltip }" class-name="custom-tooltip" />
+                                <VisGroupedBar :x="(_d: MonthlyExpenseData, i: number) => i
+                                    " :y="expenseYAccessors" :color="expenseColors" :bar-padding="0.1"
+                                    :group-padding="0.2" :rounded-corners="4" />
+                                <VisAxis type="x" :x="(_d: MonthlyExpenseData, i: number) => i
+                                    " :tick-line="false" :domain-line="false" :grid-line="false" :tick-format="(d: number) =>
+                                            monthlyExpense[d]?.month ?? ''
+                                        " :tick-values="monthlyExpense.map((_, i) => i)
+                                        " />
+                                <VisAxis type="y" :num-ticks="4" :tick-line="false" :domain-line="false" :tick-format="(d: number) =>
+                                        'Rp' + formatRupiahShort(d)
+                                    " />
+                                <VisTooltip :triggers="{
+                                    [barSelector]: expenseTooltip,
+                                }" class-name="custom-tooltip" />
                             </VisXYContainer>
                         </ChartContainer>
                     </div>
@@ -693,9 +780,15 @@ watch([startDate, endDate], () => {
                             <CardTitle>Jam Sibuk Toko</CardTitle>
                         </div>
                         <div class="text-right">
-                            <p class="text-sm text-muted-foreground">Jam Tersibuk</p>
-                            <p class="text-2xl font-bold text-primary">{{ peakHour.hour }}</p>
-                            <p class="text-xs text-muted-foreground">{{ peakHour.orders }} pesanan</p>
+                            <p class="text-sm text-muted-foreground">
+                                Jam Tersibuk
+                            </p>
+                            <p class="text-2xl font-bold text-primary">
+                                {{ peakHour.hour }}
+                            </p>
+                            <p class="text-xs text-muted-foreground">
+                                {{ peakHour.orders }} pesanan
+                            </p>
                         </div>
                     </div>
                 </CardHeader>
@@ -706,11 +799,10 @@ watch([startDate, endDate], () => {
                             <VisGroupedBar :x="(_d: BusyHourData, i: number) => i" :y="(d: BusyHourData) => d.orders"
                                 :color="busyHoursChartConfig.orders.color" :bar-padding="0.1" :rounded-corners="4" />
                             <VisAxis type="x" :x="(_d: BusyHourData, i: number) => i" :tick-line="false"
-                                :domain-line="false" :grid-line="false"
-                                :tick-format="(d: number) => busyHours[d]?.hour ?? ''"
-                                :tick-values="busyHours.map((_, i) => i)" />
-                            <VisAxis type="y" :num-ticks="4" :tick-line="false" :domain-line="false"
-                                :tick-format="(d: number) => Math.round(d).toString()" />
+                                :domain-line="false" :grid-line="false" :tick-format="(d: number) => busyHours[d]?.hour ?? ''
+                                    " :tick-values="busyHours.map((_, i) => i)" />
+                            <VisAxis type="y" :num-ticks="4" :tick-line="false" :domain-line="false" :tick-format="(d: number) => Math.round(d).toString()
+                                " />
                             <VisTooltip :triggers="{ [barSelector]: busyHoursTooltip }" class-name="custom-tooltip" />
                         </VisXYContainer>
                     </ChartContainer>
@@ -723,11 +815,13 @@ watch([startDate, endDate], () => {
             <!-- Profit Metrics Cards -->
             <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                 <StatCard v-if="can('analysis.profit_orders')" title="Total Order" :icon="ShoppingCart"
-                    main-label="Pesanan Selesai" :main-value="profitMetrics.total_orders.toLocaleString('id-ID')"
-                    :items="[
+                    main-label="Pesanan Selesai" :main-value="profitMetrics.total_orders.toLocaleString('id-ID')
+                        " :items="[
                         {
                             label: 'Produk Terjual',
-                            value: profitMetrics.total_products_sold.toLocaleString('id-ID'),
+                            value: profitMetrics.total_products_sold.toLocaleString(
+                                'id-ID',
+                            ),
                         },
                         {
                             label: 'Item/Transaksi',
@@ -739,12 +833,16 @@ watch([startDate, endDate], () => {
                         },
                     ]" />
 
-                <StatCard v-if="can('analysis.profit_gross') || can('analysis.profit_hpp')" title="Laba Kotor"
-                    :icon="TrendingUp" main-label="Laba Kotor"
-                    :main-value="'Rp' + formatRupiah(profitMetrics.gross_profit)" :items="[
+                <StatCard v-if="
+                    can('analysis.profit_gross') ||
+                    can('analysis.profit_hpp')
+                " title="Laba Kotor" :icon="TrendingUp" main-label="Laba Kotor" :main-value="'Rp' + formatRupiah(profitMetrics.gross_profit)
+                        " :items="[
                         {
                             label: 'Pendapatan',
-                            value: 'Rp' + formatRupiah(revenueSummary.total_revenue),
+                            value:
+                                'Rp' +
+                                formatRupiah(revenueSummary.total_revenue),
                         },
                         {
                             label: 'HPP',
@@ -752,7 +850,12 @@ watch([startDate, endDate], () => {
                         },
                         {
                             label: 'Laba Bersih',
-                            value: 'Rp' + formatRupiah(profitMetrics.net_profit) + ' (' + profitMetrics.profit_margin + '%)',
+                            value:
+                                'Rp' +
+                                formatRupiah(profitMetrics.net_profit) +
+                                ' (' +
+                                profitMetrics.profit_margin +
+                                '%)',
                         },
                     ]" />
             </div>
@@ -772,13 +875,16 @@ watch([startDate, endDate], () => {
                                     :y="(d: SupplierData) => d.amount" :color="supplierChartConfig.amount.color"
                                     :rounded-corners="4" bar-padding="0.1" />
                                 <VisAxis type="x" :x="(_d: SupplierData, i: number) => i" :tick-line="false"
-                                    :domain-line="false" :grid-line="false"
-                                    :tick-format="(d: number) => supplierBarData[d]?.name ?? ''"
-                                    :tick-values="supplierBarData.map((_, i) => i)" />
-                                <VisAxis type="y" :num-ticks="3" :tick-line="false" :domain-line="false"
-                                    :tick-format="(d: number) => 'Rp' + formatRupiahShort(d)" />
-                                <VisTooltip :triggers="{ [barSelector]: supplierTooltip }"
-                                    class-name="custom-tooltip" />
+                                    :domain-line="false" :grid-line="false" :tick-format="(d: number) =>
+                                            supplierBarData[d]?.name ?? ''
+                                        " :tick-values="supplierBarData.map((_, i) => i)
+                                        " />
+                                <VisAxis type="y" :num-ticks="3" :tick-line="false" :domain-line="false" :tick-format="(d: number) =>
+                                        'Rp' + formatRupiahShort(d)
+                                    " />
+                                <VisTooltip :triggers="{
+                                    [barSelector]: supplierTooltip,
+                                }" class-name="custom-tooltip" />
                             </VisXYContainer>
                         </ChartContainer>
                         <div v-else class="flex h-[250px] items-center justify-center text-muted-foreground">
@@ -800,13 +906,16 @@ watch([startDate, endDate], () => {
                                     :y="(d: CustomerData) => d.amount" :color="customerChartConfig.amount.color"
                                     :rounded-corners="4" bar-padding="0.1" />
                                 <VisAxis type="x" :x="(_d: CustomerData, i: number) => i" :tick-line="false"
-                                    :domain-line="false" :grid-line="false"
-                                    :tick-format="(d: number) => customerBarData[d]?.name ?? ''"
-                                    :tick-values="customerBarData.map((_, i) => i)" />
-                                <VisAxis type="y" :num-ticks="3" :tick-line="false" :domain-line="false"
-                                    :tick-format="(d: number) => 'Rp' + formatRupiahShort(d)" />
-                                <VisTooltip :triggers="{ [barSelector]: customerTooltip }"
-                                    class-name="custom-tooltip" />
+                                    :domain-line="false" :grid-line="false" :tick-format="(d: number) =>
+                                            customerBarData[d]?.name ?? ''
+                                        " :tick-values="customerBarData.map((_, i) => i)
+                                        " />
+                                <VisAxis type="y" :num-ticks="3" :tick-line="false" :domain-line="false" :tick-format="(d: number) =>
+                                        'Rp' + formatRupiahShort(d)
+                                    " />
+                                <VisTooltip :triggers="{
+                                    [barSelector]: customerTooltip,
+                                }" class-name="custom-tooltip" />
                             </VisXYContainer>
                         </ChartContainer>
                         <div v-else class="flex h-[250px] items-center justify-center text-muted-foreground">
@@ -827,11 +936,14 @@ watch([startDate, endDate], () => {
                                 <VisGroupedBar :x="(_d: ProductData, i: number) => i" :y="(d: ProductData) => d.qty"
                                     :color="productChartConfig.qty.color" :rounded-corners="4" bar-padding="0.1" />
                                 <VisAxis type="x" :x="(_d: ProductData, i: number) => i" :tick-line="false"
-                                    :domain-line="false" :grid-line="false"
-                                    :tick-format="(d: number) => productBarData[d]?.name ?? ''"
-                                    :tick-values="productBarData.map((_, i) => i)" />
+                                    :domain-line="false" :grid-line="false" :tick-format="(d: number) =>
+                                            productBarData[d]?.name ?? ''
+                                        " :tick-values="productBarData.map((_, i) => i)
+                                        " />
                                 <VisAxis type="y" :num-ticks="3" :tick-line="false" :domain-line="false" />
-                                <VisTooltip :triggers="{ [barSelector]: productTooltip }" class-name="custom-tooltip" />
+                                <VisTooltip :triggers="{
+                                    [barSelector]: productTooltip,
+                                }" class-name="custom-tooltip" />
                             </VisXYContainer>
                         </ChartContainer>
                         <div v-else class="flex h-[250px] items-center justify-center text-muted-foreground">
@@ -852,22 +964,65 @@ watch([startDate, endDate], () => {
                         <table class="w-full text-sm">
                             <thead>
                                 <tr class="border-b">
-                                    <th class="py-3 px-4 text-left font-medium text-muted-foreground">Marketing</th>
-                                    <th class="py-3 px-4 text-right font-medium text-muted-foreground">Total Order</th>
-                                    <th class="py-3 px-4 text-right font-medium text-muted-foreground">Total Pendapatan</th>
-                                    <th class="py-3 px-4 text-right font-medium text-muted-foreground">Total Subtotal</th>
-                                    <th class="py-3 px-4 text-right font-medium text-muted-foreground">Total Diskon</th>
-                                    <th class="py-3 px-4 text-right font-medium text-muted-foreground">Rata-rata Order</th>
+                                    <th class="px-4 py-3 text-left font-medium text-muted-foreground">
+                                        Marketing
+                                    </th>
+                                    <th class="px-4 py-3 text-right font-medium text-muted-foreground">
+                                        Total Order
+                                    </th>
+                                    <th class="px-4 py-3 text-right font-medium text-muted-foreground">
+                                        Produk Terjual
+                                    </th>
+                                    <th class="px-4 py-3 text-right font-medium text-muted-foreground">
+                                        Total Pendapatan
+                                    </th>
+                                    <th class="px-4 py-3 text-right font-medium text-muted-foreground">
+                                        Total Subtotal
+                                    </th>
+                                    <th class="px-4 py-3 text-right font-medium text-muted-foreground">
+                                        Total Diskon
+                                    </th>
+                                    <th class="px-4 py-3 text-right font-medium text-muted-foreground">
+                                        Rata-rata Order
+                                    </th>
                                 </tr>
                             </thead>
                             <tbody>
                                 <tr v-for="(item, index) in marketingSales" :key="index" class="border-b last:border-0">
-                                    <td class="py-3 px-4 font-medium">{{ item.marketing_name }}</td>
-                                    <td class="py-3 px-4 text-right tabular-nums">{{ item.total_orders.toLocaleString('id-ID') }}</td>
-                                    <td class="py-3 px-4 text-right tabular-nums">Rp{{ formatRupiah(item.total_revenue) }}</td>
-                                    <td class="py-3 px-4 text-right tabular-nums">Rp{{ formatRupiah(item.total_subtotal) }}</td>
-                                    <td class="py-3 px-4 text-right tabular-nums">Rp{{ formatRupiah(item.total_discount) }}</td>
-                                    <td class="py-3 px-4 text-right tabular-nums">Rp{{ formatRupiah(item.avg_order) }}</td>
+                                    <td class="px-4 py-3 font-medium">
+                                        {{ item.marketing_name }}
+                                    </td>
+                                    <td class="px-4 py-3 text-right tabular-nums">
+                                        {{
+                                            item.total_orders.toLocaleString(
+                                                'id-ID',
+                                            )
+                                        }}
+                                    </td>
+                                    <td class="px-4 py-3 text-right tabular-nums">
+                                        {{
+                                            item.total_products_sold.toLocaleString(
+                                                'id-ID',
+                                            )
+                                        }}
+                                        pcs
+                                    </td>
+                                    <td class="px-4 py-3 text-right tabular-nums">
+                                        Rp{{ formatRupiah(item.total_revenue) }}
+                                    </td>
+                                    <td class="px-4 py-3 text-right tabular-nums">
+                                        Rp{{
+                                            formatRupiah(item.total_subtotal)
+                                        }}
+                                    </td>
+                                    <td class="px-4 py-3 text-right tabular-nums">
+                                        Rp{{
+                                            formatRupiah(item.total_discount)
+                                        }}
+                                    </td>
+                                    <td class="px-4 py-3 text-right tabular-nums">
+                                        Rp{{ formatRupiah(item.avg_order) }}
+                                    </td>
                                 </tr>
                             </tbody>
                         </table>