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

Fix minisaleschart skeletons

Browse Source
This commit is contained in:
Matt
2025-01-04 01:06:35 -05:00
parent 1b797eecaf
commit 5063120731
1 changed files with 15 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,45 +23,38 @@ 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-[230px] w-full bg-gradient-to-br from-slate-700 to-slate-600 backdrop-blur-sm rounded-lg p-4"> <div className="h-[216px]">
<div className="h-full relative"> <div className="h-full w-full relative">
{/* Grid lines */} {/* Grid lines */}
{[...Array(5)].map((_, i) => ( {[...Array(5)].map((_, i) => (
<div <div
key={i} key={i}
className="absolute w-full h-px bg-slate-500" className="absolute w-full h-px bg-slate-600"
style={{ top: `${(i + 1) * 20}%` }} style={{ top: `${(i + 1) * 20}%` }}
/> />
))} ))}
{/* Y-axis labels */} {/* 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-slate-500 rounded-sm" /> <Skeleton key={i} className="h-3 w-6 bg-slate-600 rounded-sm" />
))} ))}
</div> </div>
{/* X-axis labels */} {/* 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-slate-500 rounded-sm" /> <Skeleton key={i} className="h-3 w-8 bg-slate-600 rounded-sm" />
))} ))}
</div> </div>
{/* Chart lines */} {/* 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-slate-500 rounded-sm" className="absolute inset-0 bg-slate-600 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>
@@ -135,28 +128,24 @@ const MiniStatCard = memo(({
MiniStatCard.displayName = "MiniStatCard"; MiniStatCard.displayName = "MiniStatCard";
const SkeletonCard = ({ colorScheme = "emerald" }) => ( const SkeletonCard = ({ colorScheme = "emerald" }) => (
<Card className={`w-full h-[150px] bg-gradient-to-br from-slate-700 to-slate-600 backdrop-blur-sm`}> <Card className="w-full h-[150px] bg-gradient-to-br from-slate-700 to-slate-600 backdrop-blur-sm">
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
<CardTitle> <CardTitle>
<div className="space-y-2"> <div className="space-y-2">
<Skeleton className={`h-4 w-24 bg-${colorScheme}-300/20`} /> <Skeleton className={`h-4 w-24 bg-${colorScheme}-300`} />
</div> </div>
</CardTitle> </CardTitle>
<div className="relative p-2"> <div className="relative p-2">
<div className={`absolute inset-0 rounded-full bg-${colorScheme}-300/20`} /> <div className={`absolute inset-0 rounded-full bg-${colorScheme}-300`} />
<div className="h-5 w-5 relative rounded-full bg-${colorScheme}-300/20" /> <Skeleton className={`h-5 w-5 bg-${colorScheme}-300 relative rounded-full`} />
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="p-4 pt-0"> <CardContent className="p-4 pt-0">
<div className="space-y-4"> <div className="space-y-2">
<div className="space-y-2"> <Skeleton className={`h-8 w-20 bg-${colorScheme}-300`} />
<Skeleton className={`h-8 w-32 bg-${colorScheme}-300/20`} /> <div className="flex justify-between items-center">
<div className="flex justify-between items-center"> <Skeleton className={`h-4 w-24 bg-${colorScheme}-300`} />
<div className="space-y-1"> <Skeleton className={`h-4 w-12 bg-${colorScheme}-300 rounded-full`} />
<Skeleton className={`h-4 w-24 bg-${colorScheme}-300/20`} />
</div>
<Skeleton className={`h-6 w-16 bg-${colorScheme}-300/20 rounded-full`} />
</div>
</div> </div>
</div> </div>
</CardContent> </CardContent>