vngrup/dress
vngrup/dress
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: improve StatCard UI responsiveness and clean up component code formatting

Browse Source
This commit is contained in:
Yoga Pangestu 2026-04-30 10:27:55 +07:00
parent 9aeeac00b4
commit b04dd959f6
3 changed files with 245 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
resources/js/components/cards/stat-card.tsx
View File

@ -1,9 +1,16 @@
import { TrendingUp, TrendingDown } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardFooter } from '@/components/ui/card';
import {
Card,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
CardAction,
} from '@/components/ui/card';
import { formatCurrency, formatNumber } from '@/lib/formatters';
import { cn } from '@/lib/utils';
import type { StatItem } from '@/types';
import { TrendingDown, TrendingUp } from 'lucide-react';
export interface StatCardProps {
title: string;
@ -18,35 +25,59 @@ export function StatCard({
stat,
isCurrency = true,
isPercentage = false,
className
className,
}: StatCardProps) {
const hasComparison = stat.yesterday !== null;
const isPositive = stat.change !== null && stat.change >= 0;
return (
<Card className={cn("@container/card", className)}>
<CardHeader>
<div className="flex items-center justify-between">
<CardDescription>{title}</CardDescription>
</div>
<CardTitle className="text-2xl font-bold tabular-nums @[250px]/card:text-3xl">
{isPercentage ? `${stat.value}%` : (isCurrency ? formatCurrency(stat.value) : formatNumber(stat.value))}
</CardTitle>
{hasComparison && (
<CardAction>
<Badge variant="default" className={`flex gap-1 px-1.5 py-0.5 text-xs font-bold ${isPositive ? 'bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300' : 'bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300'}`}>
{isPositive ? <TrendingUp className="size-3" /> : <TrendingDown className="size-3" />}
<Card className={cn('@container/card relative', className)}>
<CardHeader className="gap-3">
<div className="flex w-full items-start justify-between gap-3">
<CardDescription className="min-w-0 flex-1 break-words leading-tight">
{title}
</CardDescription>
{hasComparison && (
<Badge
variant="default"
className={`shrink-0 flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-bold sm:text-xs ${
isPositive
? 'bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300'
: 'bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300'
}`}
>
{isPositive ? (
<TrendingUp className="size-3" />
) : (
<TrendingDown className="size-3" />
)}
{stat.change === null
? '∞'
: `${Math.abs(stat.change)}%`}
</Badge>
</CardAction>
)}
)}
</div>
<CardTitle className="break-words text-xl sm:text-2xl font-bold tabular-nums tracking-tight">
{isPercentage
? `${stat.value}%`
: isCurrency
? formatCurrency(stat.value)
: formatNumber(stat.value)}
</CardTitle>
</CardHeader>
{hasComparison && (
<CardFooter className="flex-col items-start gap-1.5 text-xs">
<div className="text-muted-foreground">
Kemarin: <span className="font-semibold">{isPercentage ? `${stat.yesterday}%` : (isCurrency ? formatCurrency(stat.yesterday) : formatNumber(stat.yesterday))}</span>
<div className="w-full break-words text-muted-foreground leading-relaxed">
Kemarin:{' '}
<span className="font-semibold break-words inline-block">
{isPercentage
? `${stat.yesterday}%`
: isCurrency
? formatCurrency(stat.yesterday)
: formatNumber(stat.yesterday)}
</span>
</div>
</CardFooter>
)}

256
resources/js/pages/analysis.tsx
View File

@ -1,26 +1,48 @@
import { StatCard } from '@/components/cards/stat-card';
import { Button } from '@/components/ui/button';
import { Calendar } from '@/components/ui/calendar';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@/components/ui/popover';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { formatDate } from '@/lib/formatters';
import { analysis } from '@/routes';
import type { AnalysisPageProps } from '@/types';
import { Head, router, usePage } from '@inertiajs/react';
import { CalendarIcon, Filter, FilterX } from 'lucide-react';
import { useState } from 'react';
import { formatDate } from '@/lib/formatters';
import { AovTrendChart } from '../components/charts/aov-trend-chart';
import { CustomBarChart } from '../components/charts/bar-chart';
import { KnobChart } from '../components/charts/knob-chart';
import { CustomPieChart } from '../components/charts/pie-chart';
import { RevenueVsProfitChart } from '../components/charts/revenue-vs-profit-chart';
import { RevenueVsPurchasesChart } from '../components/charts/revenue-vs-purchases-chart';
import { SalesByHourChart } from '../components/charts/sales-by-hour-chart';
import { TransactionVolumeChart } from '../components/charts/transaction-volume-chart';
import { KnobChart } from '../components/charts/knob-chart';
export default function Analisa() {
const { stats, salesByMonth, revenueVsProfit, transactionVolume, salesByHour, paymentMethods, orderStatuses, orderChannels, topProducts, topCustomers, topCategories, filters } =
usePage<AnalysisPageProps>().props;
const {
stats,
salesByMonth,
revenueVsProfit,
transactionVolume,
salesByHour,
paymentMethods,
orderStatuses,
orderChannels,
topProducts,
topCustomers,
topCategories,
filters,
} = usePage<AnalysisPageProps>().props;
const [period, setPeriod] = useState(filters.period || 'all');
const [startDate, setStartDate] = useState(filters.start_date || '');
@ -28,19 +50,28 @@ export default function Analisa() {
const [isStartOpen, setIsStartOpen] = useState(false);
const [isEndOpen, setIsEndOpen] = useState(false);
const formatToYmd = (date: Date) => {
return date.getFullYear() + "-" + String(date.getMonth() + 1).padStart(2, '0') + "-" + String(date.getDate()).padStart(2, '0');
return (
date.getFullYear() +
'-' +
String(date.getMonth() + 1).padStart(2, '0') +
'-' +
String(date.getDate()).padStart(2, '0')
);
};
const applyFilters = (newParams: any) => {
router.get(analysis().url, {
...filters,
...newParams
}, {
preserveState: true,
preserveScroll: true,
});
router.get(
analysis().url,
{
...filters,
...newParams,
},
{
preserveState: true,
preserveScroll: true,
},
);
};
const handlePeriodChange = (value: string) => {
@ -53,7 +84,11 @@ export default function Analisa() {
const handleCustomFilter = () => {
if (startDate && endDate) {
setPeriod('custom');
applyFilters({ period: 'custom', start_date: startDate, end_date: endDate });
applyFilters({
period: 'custom',
start_date: startDate,
end_date: endDate,
});
}
};
@ -69,10 +104,14 @@ export default function Analisa() {
return `${baseDesc} (Periode: ${filters.start_date} s/d ${filters.end_date})`;
}
switch (filters.period) {
case 'week': return `${baseDesc}`;
case 'month': return `${baseDesc}`;
case 'year': return `${baseDesc}`;
default: return `${baseDesc}`;
case 'week':
return `${baseDesc}`;
case 'month':
return `${baseDesc}`;
case 'year':
return `${baseDesc}`;
default:
return `${baseDesc}`;
}
};
@ -80,16 +119,22 @@ export default function Analisa() {
<>
<Head title="Analisa" />
<div className="flex h-full min-h-screen flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-6 @container/main">
<div className="@container/main flex h-full min-h-screen flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-6">
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<h1 className="text-3xl font-bold tracking-tight">Analisa</h1>
<p className="text-muted-foreground text-sm">Lihat performa bisnis Anda secara mendalam.</p>
<h1 className="text-3xl font-bold tracking-tight">
Analisa
</h1>
<p className="text-sm text-muted-foreground">
Lihat performa bisnis Anda secara mendalam.
</p>
</div>
<div className="flex flex-wrap items-center gap-2">
<Select value={period} onValueChange={handlePeriodChange}>
<Select
value={period}
onValueChange={handlePeriodChange}
>
<SelectTrigger className="w-[140px] bg-card">
<SelectValue placeholder="Pilih Periode" />
</SelectTrigger>
@ -102,7 +147,10 @@ export default function Analisa() {
</Select>
<div className="flex items-center gap-2 rounded-md border bg-card p-1">
<Popover open={isStartOpen} onOpenChange={setIsStartOpen}>
<Popover
open={isStartOpen}
onOpenChange={setIsStartOpen}
>
<PopoverTrigger asChild>
<Button
variant="ghost"
@ -111,16 +159,27 @@ export default function Analisa() {
>
<CalendarIcon className="mr-2 h-3 w-3 text-muted-foreground" />
<span className="truncate">
{startDate ? formatDate(startDate) : "Mulai"}
{startDate
? formatDate(startDate)
: 'Mulai'}
</span>
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<PopoverContent
className="w-auto p-0"
align="start"
>
<Calendar
mode="single"
selected={startDate ? new Date(startDate) : undefined}
selected={
startDate
? new Date(startDate)
: undefined
}
onSelect={(date) => {
setStartDate(date ? formatToYmd(date) : '');
setStartDate(
date ? formatToYmd(date) : '',
);
setIsStartOpen(false);
}}
captionLayout="dropdown"
@ -129,9 +188,14 @@ export default function Analisa() {
</PopoverContent>
</Popover>
<span className="text-muted-foreground text-xs">s/d</span>
<span className="text-xs text-muted-foreground">
s/d
</span>
<Popover open={isEndOpen} onOpenChange={setIsEndOpen}>
<Popover
open={isEndOpen}
onOpenChange={setIsEndOpen}
>
<PopoverTrigger asChild>
<Button
variant="ghost"
@ -140,16 +204,27 @@ export default function Analisa() {
>
<CalendarIcon className="mr-2 h-3 w-3 text-muted-foreground" />
<span className="truncate">
{endDate ? formatDate(endDate) : "Selesai"}
{endDate
? formatDate(endDate)
: 'Selesai'}
</span>
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<PopoverContent
className="w-auto p-0"
align="start"
>
<Calendar
mode="single"
selected={endDate ? new Date(endDate) : undefined}
selected={
endDate
? new Date(endDate)
: undefined
}
onSelect={(date) => {
setEndDate(date ? formatToYmd(date) : '');
setEndDate(
date ? formatToYmd(date) : '',
);
setIsEndOpen(false);
}}
captionLayout="dropdown"
@ -185,30 +260,55 @@ export default function Analisa() {
</div>
{/* Stats Grid */}
<div className="grid grid-cols-1 gap-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs @xl/main:grid-cols-2 @4xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card">
<div className="grid grid-cols-1 gap-2 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs @sm/main:grid-cols-2 @3xl/main:grid-cols-3 @5xl/main:grid-cols-4 @7xl/main:grid-cols-6 dark:*:data-[slot=card]:bg-card">
{[
{ title: "Total Penjualan", stat: stats.total_sales, isCurrency: false },
{ title: "Total Pendapatan", stat: stats.total_revenue },
{ title: "Total Pengeluaran", stat: stats.total_expenses },
{ title: "HPP (Modal)", stat: stats.cogs },
{ title: "AOV (Avg Order Value)", stat: stats.aov },
{ title: "Profit Margin", stat: stats.profit_margin, isPercentage: true },
{ title: "Total Diskon", stat: stats.total_discount },
{ title: "Laba Kotor", stat: stats.gross_profit },
{ title: "Laba Bersih", stat: stats.net_profit },
{ title: "Total Gaji", stat: stats.total_payrolls },
{ title: "Total Pembelian", stat: stats.total_purchases },
{ title: "Produk Terjual", stat: stats.products_sold, isCurrency: false },
{ title: "Total Pelanggan", stat: stats.total_customers, isCurrency: false },
{
title: 'Total Penjualan',
stat: stats.total_sales,
isCurrency: false,
},
{
title: 'Total Pendapatan',
stat: stats.total_revenue,
},
{
title: 'Total Pengeluaran',
stat: stats.total_expenses,
},
{ title: 'HPP (Modal)', stat: stats.cogs },
{ title: 'AOV (Avg Order Value)', stat: stats.aov },
{
title: 'Profit Margin',
stat: stats.profit_margin,
isPercentage: true,
},
{ title: 'Total Diskon', stat: stats.total_discount },
{ title: 'Laba Kotor', stat: stats.gross_profit },
{ title: 'Laba Bersih', stat: stats.net_profit },
{ title: 'Total Gaji', stat: stats.total_payrolls },
{
title: 'Total Pembelian',
stat: stats.total_purchases,
},
{
title: 'Produk Terjual',
stat: stats.products_sold,
isCurrency: false,
},
{
title: 'Total Pelanggan',
stat: stats.total_customers,
isCurrency: false,
},
].map((item, index) => (
<div
key={index}
className="animate-in fade-in slide-in-from-bottom-4 fill-mode-both"
className="animate-in fill-mode-both fade-in slide-in-from-bottom-4"
style={{ animationDelay: `${index * 100}ms` }}
>
<StatCard
{...item}
className="transition-all duration-300 hover:scale-[1.03] hover:shadow-xl hover:-translate-y-1"
className="transition-all duration-300 hover:-translate-y-1 hover:scale-[1.03] hover:shadow-xl"
/>
</div>
))}
@ -219,12 +319,16 @@ export default function Analisa() {
<RevenueVsProfitChart
data={revenueVsProfit}
title="Pendapatan vs Laba"
description={getFilterDescription("Analisis pendapatan kotor dibandingkan dengan laba bersih.")}
description={getFilterDescription(
'Analisis pendapatan kotor dibandingkan dengan laba bersih.',
)}
/>
<RevenueVsPurchasesChart
data={salesByMonth}
title="Penjualan vs Belanja"
description={getFilterDescription("Perbandingan total nilai penjualan dan belanja stok barang.")}
description={getFilterDescription(
'Perbandingan total nilai penjualan dan belanja stok barang.',
)}
/>
</div>
@ -233,16 +337,22 @@ export default function Analisa() {
<TransactionVolumeChart
data={transactionVolume}
title="Volume Transaksi"
description={getFilterDescription("Total jumlah pesanan yang diproses per bulan.")}
description={getFilterDescription(
'Total jumlah pesanan yang diproses per bulan.',
)}
/>
<AovTrendChart
data={transactionVolume}
title="Tren AOV"
description={getFilterDescription("Rata-rata nilai belanja per pesanan pelanggan setiap bulannya.")}
description={getFilterDescription(
'Rata-rata nilai belanja per pesanan pelanggan setiap bulannya.',
)}
/>
<KnobChart
title="Repeat Order"
description={getFilterDescription("Persentase pelanggan yang kembali berbelanja.")}
description={getFilterDescription(
'Persentase pelanggan yang kembali berbelanja.',
)}
percentage={stats.repeat_order_percentage.value}
label="Repeat Order"
footerText={`${stats.repeat_customers.value} dari ${stats.total_customers.value} pelanggan melakukan repeat order.`}
@ -252,11 +362,13 @@ export default function Analisa() {
<SalesByHourChart
data={salesByHour}
title="Jam Sibuk"
description={getFilterDescription("Grafik aktivitas transaksi berdasarkan waktu (jam) dalam sehari.")}
description={getFilterDescription(
'Grafik aktivitas transaksi berdasarkan waktu (jam) dalam sehari.',
)}
config={{
total: {
label: "Total Penjualan",
color: "var(--chart-1)",
label: 'Total Penjualan',
color: 'var(--chart-1)',
},
}}
/>
@ -264,25 +376,33 @@ export default function Analisa() {
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2 @4xl/main:grid-cols-4">
<CustomPieChart
title="Metode Pembayaran"
description={getFilterDescription("Distribusi transaksi berdasarkan metode pembayaran yang digunakan.")}
description={getFilterDescription(
'Distribusi transaksi berdasarkan metode pembayaran yang digunakan.',
)}
data={paymentMethods}
colorOffset={0}
/>
<CustomPieChart
title="Status Pesanan"
description={getFilterDescription("Status terkini dari seluruh pesanan yang masuk.")}
description={getFilterDescription(
'Status terkini dari seluruh pesanan yang masuk.',
)}
data={orderStatuses}
colorOffset={120}
/>
<CustomPieChart
title="Channel Pesanan"
description={getFilterDescription("Sumber pesanan berdasarkan platform atau saluran penjualan.")}
description={getFilterDescription(
'Sumber pesanan berdasarkan platform atau saluran penjualan.',
)}
data={orderChannels}
colorOffset={240}
/>
<CustomPieChart
title="Top 5 Kategori"
description={getFilterDescription("Kategori produk yang paling banyak menyumbang penjualan.")}
description={getFilterDescription(
'Kategori produk yang paling banyak menyumbang penjualan.',
)}
data={topCategories}
colorOffset={60}
/>
@ -291,13 +411,17 @@ export default function Analisa() {
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
<CustomBarChart
title="Top 5 Produk"
description={getFilterDescription("Daftar produk dengan volume penjualan tertinggi.")}
description={getFilterDescription(
'Daftar produk dengan volume penjualan tertinggi.',
)}
data={topProducts}
colorOffset={45}
/>
<CustomBarChart
title="Top 5 Pelanggan"
description={getFilterDescription("Pelanggan dengan total nominal belanja tertinggi (setia).")}
description={getFilterDescription(
'Pelanggan dengan total nominal belanja tertinggi (setia).',
)}
data={topCustomers}
colorOffset={180}
isCurrency={true}

10
resources/js/pages/dashboard.tsx
View File

@ -77,12 +77,12 @@ return {
return (
<>
<Head title="Dasbor" />
<div className={`flex h-full min-h-screen flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4 transition-colors duration-1000 @container/main`}>
<div className={`flex h-full min-h-screen flex-1 flex-col gap-2 overflow-x-auto rounded-xl p-3 transition-colors duration-1000 @container/main`}>
{/* Welcome Section */}
<WelcomeCard user={auth.user} time={time} theme={theme} />
{/* Stats Grid */}
<div className="grid grid-cols-1 gap-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs @xl/main:grid-cols-2 @4xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card">
<div className="grid grid-cols-1 gap-2 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs @sm/main:grid-cols-2 @3xl/main:grid-cols-3 @5xl/main:grid-cols-4 @7xl/main:grid-cols-6 dark:*:data-[slot=card]:bg-card">
{[
{ title: "Total Penjualan", stat: stats.total_sales, isCurrency: false },
{ title: "Total Pendapatan", stat: stats.total_revenue },
@ -104,7 +104,7 @@ return {
>
<StatCard
{...item}
className="transition-all duration-300 hover:scale-[1.03] hover:shadow-xl hover:-translate-y-1"
className="!gap-3 !py-4 [&_[data-slot=card-header]]:!px-4 [&_[data-slot=card-footer]]:!px-4 transition-all duration-300 hover:scale-[1.03] hover:shadow-xl hover:-translate-y-1"
/>
</div>
))}
@ -116,7 +116,7 @@ return {
data={salesByHour}
/>
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
<div className="grid grid-cols-1 gap-2 lg:grid-cols-3">
<CustomPieChart
title="Metode Pembayaran"
description="Distribusi transaksi berdasarkan metode pembayaran yang digunakan."
@ -137,7 +137,7 @@ return {
/>
</div>
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
<div className="grid grid-cols-1 gap-2 lg:grid-cols-2">
<CustomBarChart
title="Top 5 Produk"
description="Daftar produk dengan volume penjualan tertinggi."