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

refactor: improve layout and styling of revenue charts in Analysis.vue
Some checks are pending
linter / quality (push) Waiting to run
Details
tests / ci (8.3) (push) Waiting to run
Details
tests / ci (8.4) (push) Waiting to run
Details
tests / ci (8.5) (push) Waiting to run
Details

Browse Source 
- 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.
This commit is contained in:
Yoga Pangestu 2026-07-29 09:40:12 +07:00
parent 4027363729
commit b9f4d01682
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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