From b9f4d016822e275a8749950a106cc26ad9e82347 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Wed, 29 Jul 2026 09:40:12 +0700
Subject: [PATCH] refactor: improve layout and styling of revenue charts in
 Analysis.vue

- Updated CardHeader and layout structure for revenue by channel and payment type charts to enhance responsiveness and visual consistency.
- Adjusted CSS classes for better alignment and spacing in chart components.
---
 resources/js/pages/admin/Analysis.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/resources/js/pages/admin/Analysis.vue b/resources/js/pages/admin/Analysis.vue
index aeeef09..533a003 100644
--- a/resources/js/pages/admin/Analysis.vue
+++ b/resources/js/pages/admin/Analysis.vue
@@ -945,13 +945,13 @@ watch([startDate, endDate], () => {
             <div class="grid gap-4 md:grid-cols-2" :style="{ order: sectionOrder.revenueByChannel ?? 99 }">
                 <!-- Revenue By Channel Chart -->
                 <Card v-if="can('analysis.revenue')" class="py-4 sm:py-0">
-                    <CardHeader class="flex flex-row items-center justify-between border-b p-0!">
-                        <div class="flex flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+                    <CardHeader class="flex flex-col items-stretch border-b p-0! sm:flex-row">
+                        <div class="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
                             <CardTitle>Pendapatan per Channel</CardTitle>
                         </div>
-                        <div class="flex flex-wrap">
+                        <div class="flex flex-col sm:flex-row">
                             <div v-for="item in revenueByChannelData" :key="item.channel"
-                                class="flex flex-col justify-center gap-1 border-l px-4 py-3 text-right sm:px-6 sm:py-4">
+                                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-4">
                                 <span class="text-xs text-muted-foreground">
                                     {{ item.label }}
                                 </span>
@@ -983,13 +983,13 @@ watch([startDate, endDate], () => {
 
                 <!-- Revenue By Payment Type Chart -->
                 <Card v-if="can('analysis.revenue')" class="py-4 sm:py-0">
-                    <CardHeader class="flex flex-row items-center justify-between border-b p-0!">
-                        <div class="flex flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+                    <CardHeader class="flex flex-col items-stretch border-b p-0! sm:flex-row">
+                        <div class="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
                             <CardTitle>Pendapatan per Pembayaran</CardTitle>
                         </div>
-                        <div class="flex flex-wrap">
+                        <div class="flex flex-col sm:flex-row">
                             <div v-for="item in revenueByPaymentType" :key="item.payment_type"
-                                class="flex flex-col justify-center gap-1 border-l px-4 py-3 text-right sm:px-6 sm:py-4">
+                                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-4">
                                 <span class="text-xs text-muted-foreground">
                                     {{ item.label }}
                                 </span>