480 lines
25 KiB
TypeScript
480 lines
25 KiB
TypeScript
import { Head, usePage } from '@inertiajs/react';
|
|
import { useEffect, useState } from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
import { PlaceholderPattern } from '@/components/ui/placeholder-pattern';
|
|
import { dashboard } from '@/routes';
|
|
import { Auth } from '@/types';
|
|
import {
|
|
Sun, Moon, Cloud, Trees, CloudRain, Stars, Bird,
|
|
TrendingUp, TrendingDown, ShoppingBag, DollarSign,
|
|
Wallet, Receipt, Percent, BarChart3, CreditCard,
|
|
ArrowUpRight, ArrowDownRight, Package, Users, ShoppingCart
|
|
} from 'lucide-react';
|
|
import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardFooter, CardContent } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import {
|
|
BarChart, Bar, XAxis, YAxis, CartesianGrid,
|
|
ResponsiveContainer, AreaChart, Area,
|
|
PieChart, Pie, Cell, LabelList, LineChart, Line, Sector, Label
|
|
} from 'recharts';
|
|
import {
|
|
ChartContainer, ChartTooltip, ChartTooltipContent,
|
|
ChartLegend, ChartLegendContent, type ChartConfig
|
|
} from '@/components/ui/chart';
|
|
|
|
interface StatItem {
|
|
value: number;
|
|
yesterday: number;
|
|
change: number;
|
|
}
|
|
|
|
interface DashboardStats {
|
|
total_penjualan: StatItem;
|
|
total_pendapatan: StatItem;
|
|
total_pengeluaran: StatItem;
|
|
hpp: StatItem;
|
|
aov: StatItem;
|
|
profit_margin: StatItem;
|
|
total_diskon: StatItem;
|
|
laba_kotor: StatItem;
|
|
laba_bersih: StatItem;
|
|
total_pembelian: StatItem;
|
|
produk_terjual: StatItem;
|
|
total_pelanggan: StatItem;
|
|
charts: {
|
|
jam_sibuk: Array<{ hour: string; today: number; yesterday: number }>;
|
|
order_by_payment: Array<{ name: string; value: number }>;
|
|
order_by_status: Array<{ name: string; value: number }>;
|
|
order_by_channel: Array<{ name: string; value: number }>;
|
|
top_products: Array<{ name: string; qty: number }>;
|
|
};
|
|
}
|
|
|
|
interface PageProps {
|
|
auth: Auth;
|
|
stats: DashboardStats;
|
|
[key: string]: any;
|
|
}
|
|
|
|
const DynamicScene = ({ hour }: { hour: number }) => {
|
|
if (hour >= 5 && hour < 11) {
|
|
return (
|
|
<div className="relative h-24 w-32 overflow-hidden">
|
|
<Sun className="absolute bottom-0 left-4 h-16 w-16 animate-pulse text-amber-400" fill="currentColor" />
|
|
<Cloud className="absolute top-2 right-2 h-10 w-10 animate-bounce text-white/80" fill="currentColor" />
|
|
<Cloud className="absolute top-8 left-0 h-8 w-8 animate-bounce text-white/60 [animation-delay:1s]" fill="currentColor" />
|
|
</div>
|
|
);
|
|
}
|
|
if (hour >= 11 && hour < 15) {
|
|
return (
|
|
<div className="relative h-24 w-32 overflow-hidden">
|
|
<Sun className="absolute top-0 right-4 h-14 w-14 animate-spin-slow text-yellow-400" fill="currentColor" />
|
|
<Trees className="absolute bottom-0 left-2 h-14 w-14 text-green-600 dark:text-green-500" />
|
|
<Cloud className="absolute top-4 left-4 h-8 w-8 animate-pulse text-white/80" fill="currentColor" />
|
|
</div>
|
|
);
|
|
}
|
|
if (hour >= 15 && hour < 19) {
|
|
return (
|
|
<div className="relative h-24 w-32 overflow-hidden">
|
|
<Sun className="absolute bottom-[-10px] left-8 h-16 w-16 text-orange-500" fill="currentColor" />
|
|
<Bird className="absolute top-4 left-4 h-6 w-6 animate-bounce text-orange-800 dark:text-orange-200" />
|
|
<Bird className="absolute top-8 right-8 h-5 w-5 animate-bounce text-orange-800 dark:text-orange-200 [animation-delay:0.5s]" />
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div className="relative h-24 w-32 overflow-hidden">
|
|
<Moon className="absolute top-2 left-6 h-14 w-14 rotate-12 text-indigo-200" fill="currentColor" />
|
|
<Stars className="absolute top-4 right-4 h-6 w-6 animate-pulse text-yellow-200" />
|
|
<Stars className="absolute bottom-4 left-2 h-4 w-4 animate-pulse text-yellow-100 [animation-delay:1s]" />
|
|
<div className="absolute bottom-2 right-6 h-1 w-1 animate-ping rounded-full bg-white"></div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default function Dashboard() {
|
|
const { auth, stats } = usePage<PageProps>().props;
|
|
const [time, setTime] = useState(new Date());
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => setTime(new Date()), 1000);
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
const getTimeTheme = () => {
|
|
const hour = time.getHours();
|
|
if (hour >= 5 && hour < 11) return {
|
|
greeting: 'Selamat Pagi',
|
|
class: 'bg-gradient-to-br from-amber-50 to-orange-100 dark:from-amber-950/40 dark:to-orange-900/40 border-amber-200 dark:border-amber-800/30 shadow-sm',
|
|
text: 'text-amber-950 dark:text-amber-50',
|
|
subtext: 'text-amber-900/70 dark:text-amber-200/70',
|
|
decoration: 'bg-amber-500/10 dark:bg-amber-500/20',
|
|
pageBackground: 'bg-amber-50/50 dark:bg-amber-950/10',
|
|
card: 'bg-white/80 dark:bg-amber-900/10 backdrop-blur-sm border-amber-200/50 dark:border-amber-800/20',
|
|
placeholder: 'stroke-amber-500/20 dark:stroke-amber-400/20'
|
|
};
|
|
|
|
if (hour >= 11 && hour < 15) return {
|
|
greeting: 'Selamat Siang',
|
|
class: 'bg-gradient-to-br from-sky-50 to-blue-100 dark:from-sky-950/40 dark:to-blue-900/40 border-sky-200 dark:border-sky-800/30 shadow-sm',
|
|
text: 'text-sky-950 dark:text-sky-50',
|
|
subtext: 'text-sky-900/70 dark:text-sky-200/70',
|
|
decoration: 'bg-sky-500/10 dark:bg-sky-500/20',
|
|
pageBackground: 'bg-sky-50/50 dark:bg-sky-950/10',
|
|
card: 'bg-white/80 dark:bg-sky-900/10 backdrop-blur-sm border-sky-200/50 dark:border-sky-800/20',
|
|
placeholder: 'stroke-sky-500/20 dark:stroke-sky-400/20'
|
|
};
|
|
|
|
if (hour >= 15 && hour < 19) return {
|
|
greeting: 'Selamat Sore',
|
|
class: 'bg-gradient-to-br from-orange-50 to-purple-100 dark:from-orange-950/40 dark:to-purple-900/40 border-orange-200 dark:border-orange-800/30 shadow-sm',
|
|
text: 'text-orange-950 dark:text-orange-50',
|
|
subtext: 'text-orange-900/70 dark:text-orange-200/70',
|
|
decoration: 'bg-orange-500/10 dark:bg-orange-500/20',
|
|
pageBackground: 'bg-orange-50/50 dark:bg-orange-950/10',
|
|
card: 'bg-white/80 dark:bg-orange-900/10 backdrop-blur-sm border-orange-200/50 dark:border-orange-800/20',
|
|
placeholder: 'stroke-orange-500/20 dark:stroke-orange-400/20'
|
|
};
|
|
|
|
return {
|
|
greeting: 'Selamat Malam',
|
|
class: 'bg-gradient-to-br from-slate-900 via-indigo-950 to-black text-white border-indigo-500/20 shadow-indigo-950',
|
|
text: 'text-indigo-50 drop-shadow-md',
|
|
subtext: 'text-indigo-200/70 drop-shadow-sm',
|
|
decoration: 'bg-indigo-500/20',
|
|
pageBackground: 'bg-slate-100 dark:bg-slate-950',
|
|
card: 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800',
|
|
placeholder: 'stroke-slate-300 dark:stroke-slate-700'
|
|
};
|
|
};
|
|
|
|
const theme = getTimeTheme();
|
|
const hour = time.getHours();
|
|
|
|
const formattedTime = time.toLocaleTimeString('id-ID', {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit',
|
|
});
|
|
|
|
const formattedDate = time.toLocaleDateString('id-ID', {
|
|
weekday: 'long',
|
|
day: 'numeric',
|
|
month: 'long',
|
|
year: 'numeric',
|
|
});
|
|
|
|
const formatCurrency = (value: number) => {
|
|
return new Intl.NumberFormat('id-ID', {
|
|
style: 'currency',
|
|
currency: 'IDR',
|
|
minimumFractionDigits: 0,
|
|
}).format(value);
|
|
};
|
|
|
|
const formatNumber = (value: number) => {
|
|
return new Intl.NumberFormat('id-ID').format(value);
|
|
};
|
|
|
|
const StatCard = ({
|
|
title,
|
|
stat,
|
|
icon: Icon,
|
|
isCurrency = true,
|
|
isPercentage = false,
|
|
className
|
|
}: {
|
|
title: string;
|
|
stat: StatItem;
|
|
icon: any;
|
|
isCurrency?: boolean;
|
|
isPercentage?: boolean;
|
|
className?: string;
|
|
}) => {
|
|
const isPositive = 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>
|
|
<CardAction>
|
|
<Badge variant={isPositive ? "default" : "destructive"} className="flex gap-1 px-1.5 py-0.5 text-xs font-bold">
|
|
{isPositive ? <TrendingUp className="size-3" /> : <TrendingDown className="size-3" />}
|
|
{Math.abs(stat.change)}%
|
|
</Badge>
|
|
</CardAction>
|
|
</CardHeader>
|
|
<CardFooter className="flex-col items-start gap-1.5 text-xs">
|
|
<div className="flex items-center gap-1.5 font-medium">
|
|
{isPositive ? (
|
|
<span className="flex items-center gap-1 text-emerald-600 dark:text-emerald-400">
|
|
<ArrowUpRight className="size-3" /> Meningkat
|
|
</span>
|
|
) : (
|
|
<span className="flex items-center gap-1 text-rose-600 dark:text-rose-400">
|
|
<ArrowDownRight className="size-3" /> Menurun
|
|
</span>
|
|
)}
|
|
<span className="text-muted-foreground">vs kemarin</span>
|
|
</div>
|
|
<div className="text-muted-foreground">
|
|
Kemarin: <span className="font-semibold">{isPercentage ? `${stat.yesterday}%` : (isCurrency ? formatCurrency(stat.yesterday) : formatNumber(stat.yesterday))}</span>
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Head title="Dashboard" />
|
|
<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`}>
|
|
{/* Welcome Section */}
|
|
<div className={`relative flex flex-col justify-between gap-4 overflow-hidden rounded-xl border p-6 shadow-2xl transition-all duration-1000 md:flex-row md:items-center ${theme.class}`}>
|
|
{/* Decorative Elements */}
|
|
<div className={`absolute -right-10 -top-10 h-40 w-40 rounded-full blur-3xl ${theme.decoration} opacity-60`} />
|
|
<div className={`absolute -bottom-10 left-1/3 h-32 w-32 rounded-full blur-3xl ${theme.decoration} opacity-40`} />
|
|
|
|
<div className="z-10">
|
|
<h1 className={`text-3xl font-extrabold tracking-tight ${theme.text}`}>
|
|
{theme.greeting}, {auth.user.name}!
|
|
</h1>
|
|
<p className={`mt-1 text-lg font-medium ${theme.subtext}`}>
|
|
Senang melihat Anda kembali. Berikut adalah ringkasan bisnis Anda hari ini.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="z-10 flex flex-col items-start gap-4 md:flex-row md:items-center md:gap-8">
|
|
<DynamicScene hour={hour} />
|
|
<div className="flex flex-col items-start gap-1 md:items-end">
|
|
<div className={`text-4xl font-mono font-black tracking-tighter ${theme.text}`}>
|
|
{formattedTime}
|
|
</div>
|
|
<div className={`text-sm font-bold uppercase tracking-wider ${theme.subtext}`}>
|
|
{formattedDate}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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">
|
|
{[
|
|
{ title: "Total Penjualan", stat: stats.total_penjualan, icon: ShoppingBag, isCurrency: false },
|
|
{ title: "Total Pendapatan", stat: stats.total_pendapatan, icon: DollarSign },
|
|
{ title: "Total Pengeluaran", stat: stats.total_pengeluaran, icon: Wallet },
|
|
{ title: "HPP (Modal)", stat: stats.hpp, icon: Receipt },
|
|
{ title: "AOV (Avg Order Value)", stat: stats.aov, icon: CreditCard },
|
|
{ title: "Profit Margin", stat: stats.profit_margin, icon: Percent, isPercentage: true },
|
|
{ title: "Total Diskon", stat: stats.total_diskon, icon: Percent },
|
|
{ title: "Laba Kotor", stat: stats.laba_kotor, icon: BarChart3 },
|
|
{ title: "Laba Bersih", stat: stats.laba_bersih, icon: TrendingUp },
|
|
{ title: "Total Pembelian", stat: stats.total_pembelian, icon: ShoppingCart },
|
|
{ title: "Produk Terjual", stat: stats.produk_terjual, icon: Package, isCurrency: false },
|
|
{ title: "Total Pelanggan", stat: stats.total_pelanggan, icon: Users, isCurrency: false },
|
|
].map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className="animate-in fade-in slide-in-from-bottom-4 fill-mode-both"
|
|
style={{ animationDelay: `${index * 100}ms` }}
|
|
>
|
|
<StatCard
|
|
{...item}
|
|
className="transition-all duration-300 hover:scale-[1.03] hover:shadow-xl hover:-translate-y-1"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Charts Section */}
|
|
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
|
{/* Jam Sibuk - Multiple Line Chart Pattern */}
|
|
<Card className="col-span-full transition-all duration-500 hover:shadow-xl animate-in fade-in slide-in-from-bottom-8 fill-mode-both" style={{ animationDelay: '1200ms' }}>
|
|
<CardHeader>
|
|
<CardTitle>Jam Sibuk (Pesanan per Jam)</CardTitle>
|
|
<CardDescription>Perbandingan aktivitas hari ini vs kemarin</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ChartContainer
|
|
config={{
|
|
today: { label: "Hari Ini", color: "var(--chart-1)" },
|
|
yesterday: { label: "Kemarin", color: "var(--chart-2)" },
|
|
}}
|
|
className="h-[300px] w-full"
|
|
>
|
|
<LineChart
|
|
accessibilityLayer
|
|
data={stats.charts.jam_sibuk}
|
|
margin={{ left: 12, right: 12 }}
|
|
>
|
|
<CartesianGrid vertical={false} strokeDasharray="3 3" />
|
|
<XAxis
|
|
dataKey="hour"
|
|
tickLine={false}
|
|
axisLine={false}
|
|
tickMargin={8}
|
|
/>
|
|
<ChartTooltip cursor={false} content={<ChartTooltipContent />} />
|
|
<Line
|
|
dataKey="today"
|
|
type="monotone"
|
|
stroke="var(--color-today)"
|
|
strokeWidth={3}
|
|
dot={{ r: 4, fill: "var(--color-today)" }}
|
|
activeDot={{ r: 6 }}
|
|
/>
|
|
<Line
|
|
dataKey="yesterday"
|
|
type="monotone"
|
|
stroke="var(--color-yesterday)"
|
|
strokeWidth={2}
|
|
strokeDasharray="5 5"
|
|
dot={false}
|
|
/>
|
|
<ChartLegend content={<ChartLegendContent />} />
|
|
</LineChart>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<div className="flex w-full items-start gap-2 text-sm text-muted-foreground">
|
|
<TrendingUp className="h-4 w-4 text-emerald-500" />
|
|
<span>Menampilkan data pesanan per jam untuk mengidentifikasi waktu operasional tersibuk.</span>
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
{/* Order Distribution - Pie Chart Label List Pattern */}
|
|
<Card className="flex flex-col transition-all duration-500 hover:shadow-xl animate-in fade-in slide-in-from-bottom-8 fill-mode-both" style={{ animationDelay: '1300ms' }}>
|
|
<CardHeader className="items-center pb-0">
|
|
<CardTitle>Metode Pembayaran</CardTitle>
|
|
<CardDescription>Distribusi transaksi hari ini</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex-1 pb-0">
|
|
<ChartContainer
|
|
config={Object.fromEntries(stats.charts.order_by_payment.map((item, i) => [
|
|
item.name.toLowerCase().replace(/[^a-z0-h]/g, ''),
|
|
{ label: item.name, color: `var(--chart-${(i % 5) + 1})` }
|
|
]))}
|
|
className="mx-auto aspect-square max-h-[300px] [&_.recharts-text]:fill-foreground"
|
|
>
|
|
<PieChart>
|
|
<ChartTooltip content={<ChartTooltipContent hideLabel />} />
|
|
<Pie
|
|
data={stats.charts.order_by_payment.map((item, i) => ({
|
|
...item,
|
|
fill: `var(--color-${item.name.toLowerCase().replace(/[^a-z0-h]/g, '')})`
|
|
}))}
|
|
dataKey="value"
|
|
nameKey="name"
|
|
>
|
|
<LabelList
|
|
dataKey="name"
|
|
className="fill-foreground font-bold"
|
|
stroke="none"
|
|
fontSize={12}
|
|
/>
|
|
</Pie>
|
|
</PieChart>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
<CardFooter className="flex-col gap-2 text-sm">
|
|
<div className="flex items-center gap-2 font-medium">
|
|
<TrendingUp className="h-4 w-4" /> Distribusi pembayaran real-time
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
{/* Order Channel - Donut Active Pattern */}
|
|
<Card className="flex flex-col transition-all duration-500 hover:shadow-xl animate-in fade-in slide-in-from-bottom-8 fill-mode-both" style={{ animationDelay: '1400ms' }}>
|
|
<CardHeader className="items-center pb-0">
|
|
<CardTitle>Saluran Pesanan</CardTitle>
|
|
<CardDescription>Sumber pesanan masuk</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex-1 pb-0">
|
|
<ChartContainer
|
|
config={Object.fromEntries(stats.charts.order_by_channel.map((item, i) => [
|
|
item.name.toLowerCase().replace(/[^a-z0-h]/g, ''),
|
|
{ label: item.name, color: `var(--chart-${((i + 2) % 5) + 1})` }
|
|
]))}
|
|
className="mx-auto aspect-square max-h-[300px]"
|
|
>
|
|
<PieChart>
|
|
<ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
|
|
<Pie
|
|
data={stats.charts.order_by_channel.map((item, i) => ({
|
|
...item,
|
|
fill: `var(--color-${item.name.toLowerCase().replace(/[^a-z0-h]/g, '')})`
|
|
}))}
|
|
dataKey="value"
|
|
nameKey="name"
|
|
innerRadius={60}
|
|
strokeWidth={5}
|
|
activeShape={({ outerRadius = 0, ...props }: any) => (
|
|
<Sector {...props} outerRadius={outerRadius + 10} />
|
|
)}
|
|
/>
|
|
</PieChart>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
<CardFooter className="flex-col gap-2 text-sm">
|
|
<div className="flex items-center gap-2 font-medium">
|
|
<TrendingUp className="h-4 w-4" /> Performa saluran penjualan
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
{/* Top Products - Multiple Bar Pattern (Adapted) */}
|
|
<Card className="col-span-full transition-all duration-500 hover:shadow-xl animate-in fade-in slide-in-from-bottom-8 fill-mode-both" style={{ animationDelay: '1500ms' }}>
|
|
<CardHeader>
|
|
<CardTitle>Top 5 Produk Terlaris</CardTitle>
|
|
<CardDescription>Berdasarkan kuantitas yang terjual hari ini</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ChartContainer
|
|
config={{
|
|
qty: { label: "Terjual", color: "var(--chart-1)" },
|
|
}}
|
|
className="h-[350px] w-full"
|
|
>
|
|
<BarChart accessibilityLayer data={stats.charts.top_products}>
|
|
<CartesianGrid vertical={false} strokeDasharray="3 3" />
|
|
<XAxis
|
|
dataKey="name"
|
|
tickLine={false}
|
|
tickMargin={10}
|
|
axisLine={false}
|
|
tickFormatter={(value) => value.length > 15 ? value.slice(0, 15) + '...' : value}
|
|
/>
|
|
<ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dashed" />} />
|
|
<Bar
|
|
dataKey="qty"
|
|
fill="var(--color-qty)"
|
|
radius={8}
|
|
label={{ position: 'top', fill: 'var(--foreground)', fontSize: 12 }}
|
|
/>
|
|
</BarChart>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
Dashboard.layout = {
|
|
breadcrumbs: [
|
|
{
|
|
title: 'Dasbor',
|
|
href: dashboard(),
|
|
},
|
|
],
|
|
};
|