matt/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix time formatting bug and update skeletons to match

Browse Source
This commit is contained in:
Matt
2025-01-02 16:58:28 -05:00
parent 1698c9a9a4
commit c9df4b5fe1
3 changed files with 321 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
dashboard/src/components/dashboard/MiniRealtimeAnalytics.jsx
View File

@@ -78,24 +78,81 @@ const MiniRealtimeAnalytics = () => {
if (loading && !basicData) { if (loading && !basicData) {
return ( return (
<Card className="w-full bg-gradient-to-br from-sky-900 to-sky-800 backdrop-blur-sm h-full"> <div>
<CardHeader className="p-4 pb-2"> <div className="grid grid-cols-2 gap-2 mt-1 mb-2">
<div className="flex justify-between items-center"> <Card className="h-[150px] bg-gradient-to-br from-sky-900 to-sky-800 backdrop-blur-sm">
<CardTitle className="text-lg font-bold text-sky-100"> <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
Real-Time Analytics <CardTitle className="text-sky-100 font-bold text-md">
<Skeleton className="h-4 w-24 bg-sky-700" />
</CardTitle> </CardTitle>
<Skeleton className="h-4 w-32 bg-sky-700" /> <div className="relative p-2">
<div className="absolute inset-0 rounded-full bg-sky-300" />
<Skeleton className="h-5 w-5 bg-sky-700 relative rounded-full" />
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="p-4 pt-0"> <CardContent className="p-4 pt-0">
<div className="grid grid-cols-2 gap-2 mt-1 mb-3"> <div className="space-y-2">
<SkeletonSummaryCard /> <Skeleton className="h-8 w-20 bg-sky-700" />
<SkeletonSummaryCard /> <Skeleton className="h-4 w-32 bg-sky-700" />
</div> </div>
<SkeletonBarChart />
</CardContent> </CardContent>
</Card> </Card>
<Card className="h-[150px] bg-gradient-to-br from-sky-900 to-sky-800 backdrop-blur-sm">
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
<CardTitle className="text-sky-100 font-bold text-md">
<Skeleton className="h-4 w-24 bg-sky-700" />
</CardTitle>
<div className="relative p-2">
<div className="absolute inset-0 rounded-full bg-sky-300" />
<Skeleton className="h-5 w-5 bg-sky-700 relative rounded-full" />
</div>
</CardHeader>
<CardContent className="p-4 pt-0">
<div className="space-y-2">
<Skeleton className="h-8 w-20 bg-sky-700" />
<Skeleton className="h-4 w-32 bg-sky-700" />
</div>
</CardContent>
</Card>
</div>
<Card className="bg-gradient-to-br from-sky-900 to-sky-800 backdrop-blur-sm">
<CardContent className="p-4">
<div className="h-[230px] relative">
{/* Grid lines */}
{[...Array(5)].map((_, i) => (
<div
key={i}
className="absolute w-full h-px bg-sky-700"
style={{ top: `${(i + 1) * 20}%` }}
/>
))}
{/* Y-axis labels */}
<div className="absolute left-0 top-0 bottom-0 w-8 flex flex-col justify-between py-4">
{[...Array(5)].map((_, i) => (
<Skeleton key={i} className="h-3 w-6 bg-sky-700 rounded-sm" />
))}
</div>
{/* X-axis labels */}
<div className="absolute left-8 right-4 bottom-0 flex justify-between">
{[...Array(6)].map((_, i) => (
<Skeleton key={i} className="h-3 w-8 bg-sky-700 rounded-sm" />
))}
</div>
{/* Bars */}
<div className="absolute inset-x-8 bottom-6 top-4 flex items-end justify-between gap-1">
{[...Array(24)].map((_, i) => (
<div
key={i}
className="w-2 bg-sky-700 rounded-sm"
style={{ height: `${Math.random() * 80 + 10}%` }}
/>
))}
</div>
</div>
</CardContent>
</Card>
</div>
); );
} }
@@ -160,13 +217,11 @@ const MiniRealtimeAnalytics = () => {
<Tooltip <Tooltip
content={({ active, payload }) => { content={({ active, payload }) => {
if (active && payload && payload.length) { if (active && payload && payload.length) {
const timestamp = payload[0].payload.timestamp;
const formattedTime = timestamp ? format(new Date(timestamp), "h:mm a") : "N/A";
return ( return (
<Card className="p-2 shadow-lg bg-sky-800 border-none"> <Card className="p-2 shadow-lg bg-sky-800 border-none">
<CardContent className="p-0 space-y-1"> <CardContent className="p-0 space-y-1">
<p className="font-medium text-sm text-sky-100 border-b border-sky-700 pb-1 mb-1"> <p className="font-medium text-sm text-sky-100 border-b border-sky-700 pb-1 mb-1">
{formattedTime} {payload[0].payload.timestamp}
</p> </p>
<div className="flex justify-between items-center text-sm"> <div className="flex justify-between items-center text-sm">
<span className="text-sky-200"> <span className="text-sky-200">

94
dashboard/src/components/dashboard/MiniSalesChart.jsx
View File

@@ -23,34 +23,45 @@ import { AlertCircle, TrendingUp, DollarSign, ShoppingCart, Truck, PiggyBank, Ar
import { formatCurrency, CustomTooltip, processData, StatCard } from "./SalesChart.jsx"; import { formatCurrency, CustomTooltip, processData, StatCard } from "./SalesChart.jsx";
const SkeletonChart = () => ( const SkeletonChart = () => (
<div className="h-[200px] w-full bg-white dark:bg-gray-900/60 backdrop-blur-sm rounded-lg p-4"> <div className="h-[230px] w-full bg-gradient-to-br from-slate-700 to-slate-600 backdrop-blur-sm rounded-lg p-4">
<div className="h-full relative"> <div className="h-full relative">
{/* Grid lines */}
{[...Array(5)].map((_, i) => ( {[...Array(5)].map((_, i) => (
<div <div
key={i} key={i}
className="absolute w-full h-px bg-muted" className="absolute w-full h-px bg-slate-500"
style={{ top: `${(i + 1) * 20}%` }} style={{ top: `${(i + 1) * 20}%` }}
/> />
))} ))}
{/* Y-axis labels */}
<div className="absolute left-0 top-0 bottom-0 w-8 flex flex-col justify-between py-4"> <div className="absolute left-0 top-0 bottom-0 w-8 flex flex-col justify-between py-4">
{[...Array(5)].map((_, i) => ( {[...Array(5)].map((_, i) => (
<Skeleton key={i} className="h-3 w-6 bg-muted rounded-sm" /> <Skeleton key={i} className="h-3 w-6 bg-slate-500 rounded-sm" />
))} ))}
</div> </div>
{/* X-axis labels */}
<div className="absolute left-8 right-4 bottom-0 flex justify-between"> <div className="absolute left-8 right-4 bottom-0 flex justify-between">
{[...Array(6)].map((_, i) => ( {[...Array(6)].map((_, i) => (
<Skeleton key={i} className="h-3 w-8 bg-muted rounded-sm" /> <Skeleton key={i} className="h-3 w-8 bg-slate-500 rounded-sm" />
))} ))}
</div> </div>
{/* Chart lines */}
<div className="absolute inset-x-8 bottom-6 top-4"> <div className="absolute inset-x-8 bottom-6 top-4">
<div className="h-full w-full relative"> <div className="h-full w-full relative">
<div <div
className="absolute inset-0 bg-muted rounded-sm" className="absolute inset-0 bg-slate-500 rounded-sm"
style={{ style={{
opacity: 0.5, opacity: 0.5,
clipPath: "polygon(0 50%, 100% 20%, 100% 100%, 0 100%)", clipPath: "polygon(0 50%, 100% 20%, 100% 100%, 0 100%)",
}} }}
/> />
<div
className="absolute inset-0 bg-slate-500 rounded-sm"
style={{
opacity: 0.3,
clipPath: "polygon(0 70%, 100% 40%, 100% 100%, 0 100%)",
}}
/>
</div> </div>
</div> </div>
</div> </div>
@@ -231,6 +242,64 @@ const MiniSalesChart = ({ className = "" }) => {
); );
} }
if (loading && !data) {
return (
<div className="space-y-2">
{/* Stat Cards */}
<div className="grid grid-cols-2 gap-2">
<Card className="h-[150px] bg-gradient-to-br from-rose-900 to-rose-800 backdrop-blur-sm">
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
<CardTitle className="text-rose-100 font-bold text-md">
<Skeleton className="h-4 w-24 bg-rose-700" />
</CardTitle>
<div className="relative p-2">
<div className="absolute inset-0 rounded-full bg-rose-300" />
<Skeleton className="h-5 w-5 bg-rose-700 relative rounded-full" />
</div>
</CardHeader>
<CardContent className="p-4 pt-0">
<div className="space-y-2">
<Skeleton className="h-8 w-20 bg-rose-700" />
<div className="flex justify-between items-center">
<Skeleton className="h-4 w-24 bg-rose-700" />
<Skeleton className="h-4 w-12 bg-rose-700 rounded-full" />
</div>
</div>
</CardContent>
</Card>
<Card className="h-[150px] bg-gradient-to-br from-indigo-900 to-indigo-800 backdrop-blur-sm">
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
<CardTitle className="text-indigo-100 font-bold text-md">
<Skeleton className="h-4 w-24 bg-indigo-700" />
</CardTitle>
<div className="relative p-2">
<div className="absolute inset-0 rounded-full bg-indigo-300" />
<Skeleton className="h-5 w-5 bg-indigo-700 relative rounded-full" />
</div>
</CardHeader>
<CardContent className="p-4 pt-0">
<div className="space-y-2">
<Skeleton className="h-8 w-20 bg-indigo-700" />
<div className="flex justify-between items-center">
<Skeleton className="h-4 w-24 bg-indigo-700" />
<Skeleton className="h-4 w-12 bg-indigo-700 rounded-full" />
</div>
</div>
</CardContent>
</Card>
</div>
{/* Chart Card */}
<Card className="bg-gradient-to-br from-slate-700 to-slate-600 backdrop-blur-sm">
<CardContent className="p-4">
<SkeletonChart />
</CardContent>
</Card>
</div>
);
}
return ( return (
<div className="space-y-2"> <div className="space-y-2">
{/* Stat Cards */} {/* Stat Cards */}
@@ -271,20 +340,6 @@ const MiniSalesChart = ({ className = "" }) => {
{/* Chart Card */} {/* Chart Card */}
<Card className="bg-gradient-to-br from-slate-700 to-slate-600 backdrop-blur-sm"> <Card className="bg-gradient-to-br from-slate-700 to-slate-600 backdrop-blur-sm">
{loading ? (
<CardContent className="p-4">
<SkeletonChart />
</CardContent>
) : !data.length ? (
<CardContent className="p-4">
<div className="flex items-center justify-center h-[200px] text-stone-200">
<div className="text-center">
<TrendingUp className="h-8 w-8 mx-auto mb-2" />
<div className="text-sm">No sales data available</div>
</div>
</div>
</CardContent>
) : (
<CardContent className="p-4"> <CardContent className="p-4">
<div className="h-[230px]"> <div className="h-[230px]">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
@@ -376,7 +431,6 @@ const MiniSalesChart = ({ className = "" }) => {
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>
</CardContent> </CardContent>
)}
</Card> </Card>
</div> </div>
); );

86
dashboard/src/components/dashboard/MiniStatCards.jsx
View File

@@ -350,15 +350,91 @@ const MiniStatCards = ({
if (loading && !stats) { if (loading && !stats) {
return ( return (
<Card className="w-full bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<CardContent className="pb-2">
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-4 gap-2">
{[...Array(4)].map((_, i) => ( <Card className="h-[150px] bg-gradient-to-br from-emerald-900 to-emerald-800 backdrop-blur-sm">
<SkeletonCard key={i} /> <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
))} <CardTitle className="text-emerald-100 font-bold text-md">
<Skeleton className="h-4 w-24 bg-emerald-700" />
</CardTitle>
<div className="relative p-2">
<div className="absolute inset-0 rounded-full bg-emerald-300" />
<Skeleton className="h-5 w-5 bg-emerald-700 relative rounded-full" />
</div>
</CardHeader>
<CardContent className="p-4 pt-0">
<div className="space-y-2">
<Skeleton className="h-8 w-20 bg-emerald-700" />
<div className="flex justify-between items-center">
<Skeleton className="h-4 w-24 bg-emerald-700" />
<Skeleton className="h-4 w-12 bg-emerald-700 rounded-full" />
</div>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
<Card className="h-[150px] bg-gradient-to-br from-blue-900 to-blue-800 backdrop-blur-sm">
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
<CardTitle className="text-blue-100 font-bold text-md">
<Skeleton className="h-4 w-24 bg-blue-700" />
</CardTitle>
<div className="relative p-2">
<div className="absolute inset-0 rounded-full bg-blue-300" />
<Skeleton className="h-5 w-5 bg-blue-700 relative rounded-full" />
</div>
</CardHeader>
<CardContent className="p-4 pt-0">
<div className="space-y-2">
<Skeleton className="h-8 w-20 bg-blue-700" />
<div className="flex justify-between items-center">
<Skeleton className="h-4 w-24 bg-blue-700" />
<Skeleton className="h-4 w-12 bg-blue-700 rounded-full" />
</div>
</div>
</CardContent>
</Card>
<Card className="h-[150px] bg-gradient-to-br from-violet-900 to-violet-800 backdrop-blur-sm">
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
<CardTitle className="text-violet-100 font-bold text-md">
<Skeleton className="h-4 w-24 bg-violet-700" />
</CardTitle>
<div className="relative p-2">
<div className="absolute inset-0 rounded-full bg-violet-300" />
<Skeleton className="h-5 w-5 bg-violet-700 relative rounded-full" />
</div>
</CardHeader>
<CardContent className="p-4 pt-0">
<div className="space-y-2">
<Skeleton className="h-8 w-20 bg-violet-700" />
<div className="flex justify-between items-center">
<Skeleton className="h-4 w-24 bg-violet-700" />
<Skeleton className="h-4 w-12 bg-violet-700 rounded-full" />
</div>
</div>
</CardContent>
</Card>
<Card className="h-[150px] bg-gradient-to-br from-orange-900 to-orange-800 backdrop-blur-sm">
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
<CardTitle className="text-orange-100 font-bold text-md">
<Skeleton className="h-4 w-24 bg-orange-700" />
</CardTitle>
<div className="relative p-2">
<div className="absolute inset-0 rounded-full bg-orange-300" />
<Skeleton className="h-5 w-5 bg-orange-700 relative rounded-full" />
</div>
</CardHeader>
<CardContent className="p-4 pt-0">
<div className="space-y-2">
<Skeleton className="h-8 w-20 bg-orange-700" />
<div className="flex justify-between items-center">
<Skeleton className="h-4 w-24 bg-orange-700" />
<Skeleton className="h-4 w-12 bg-orange-700 rounded-full" />
</div>
</div>
</CardContent>
</Card>
</div>
); );
} }