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

Add missing skeletons

Browse Source
This commit is contained in:
Matt
2025-01-04 00:23:42 -05:00
parent e1f12539d3
commit a2eb5bfcd7
2 changed files with 92 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,6 +17,35 @@ import {
SkeletonBarChart,
processBasicData,
} from "./RealtimeAnalytics";
import { Skeleton } from "@/components/ui/skeleton";
const SkeletonCard = ({ colorScheme = "sky" }) => (
<Card className={`w-full 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>
<div className="space-y-2">
<Skeleton className={`h-4 w-24 bg-${colorScheme}-300/20`} />
</div>
</CardTitle>
<div className="relative p-2">
<div className={`absolute inset-0 rounded-full bg-${colorScheme}-300/20`} />
<div className="h-5 w-5 relative rounded-full bg-${colorScheme}-300/20" />
</div>
</CardHeader>
<CardContent className="p-4 pt-0">
<div className="space-y-4">
<div className="space-y-2">
<Skeleton className={`h-8 w-32 bg-${colorScheme}-300/20`} />
<div className="flex justify-between items-center">
<div className="space-y-1">
<Skeleton className={`h-4 w-24 bg-${colorScheme}-300/20`} />
</div>
</div>
</div>
</div>
</CardContent>
</Card>
);
const MiniRealtimeAnalytics = () => {
const [basicData, setBasicData] = useState({
@@ -76,67 +105,46 @@ const MiniRealtimeAnalytics = () => {
};
}, [isPaused]);
if (loading && !basicData) {
const renderContent = () => {
if (error) {
return (
<Alert variant="destructive" className="mb-4">
<AlertTriangle className="h-4 w-4" />
<AlertDescription>{error}</AlertDescription>
</Alert>
);
}
if (loading) {
return (
<div>
<div className="grid grid-cols-2 gap-2 mt-1 mb-2">
<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>
<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>
<SkeletonCard colorScheme="sky" />
<SkeletonCard colorScheme="sky" />
</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">
<div className="h-[216px]">
<div className="h-full w-full relative">
{/* Grid lines */}
{[...Array(5)].map((_, i) => (
<div
key={i}
className="absolute w-full h-px bg-sky-700"
className="absolute w-full h-px bg-sky-300/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">
{[...Array(5)].map((_, i) => (
<Skeleton key={i} className="h-3 w-6 bg-sky-700 rounded-sm" />
<Skeleton key={i} className="h-3 w-6 bg-sky-300/20 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" />
<Skeleton key={i} className="h-3 w-8 bg-sky-300/20 rounded-sm" />
))}
</div>
{/* Bars */}
@@ -144,12 +152,13 @@ const MiniRealtimeAnalytics = () => {
{[...Array(24)].map((_, i) => (
<div
key={i}
className="w-2 bg-sky-700 rounded-sm"
className="w-2 bg-sky-300/20 rounded-sm"
style={{ height: `${Math.random() * 80 + 10}%` }}
/>
))}
</div>
</div>
</div>
</CardContent>
</Card>
</div>
@@ -158,13 +167,6 @@ const MiniRealtimeAnalytics = () => {
return (
<div>
{error && (
<Alert variant="destructive" className="mb-4">
<AlertTriangle className="h-4 w-4" />
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
<div className="grid grid-cols-2 gap-2 mt-1 mb-2">
{summaryCard(
"Last 30 Minutes",
@@ -248,4 +250,7 @@ const MiniRealtimeAnalytics = () => {
);
};
return renderContent();
};
export default MiniRealtimeAnalytics;

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

@@ -309,7 +309,7 @@ const MiniSalesChart = ({ className = "" }) => {
trendValue={`${Math.abs(Math.round(summaryStats.growth.revenue))}%`}
colorClass="text-emerald-300"
titleClass="text-emerald-300 font-bold text-md"
descriptionClass="text-emerald-300 text-md font-semibold"
descriptionClass="text-emerald-300 text-md font-semibold pb-1"
icon={PiggyBank}
iconColor="text-emerald-900"
iconBackground="bg-emerald-300"
@@ -324,7 +324,7 @@ const MiniSalesChart = ({ className = "" }) => {
trendValue={`${Math.abs(Math.round(summaryStats.growth.orders))}%`}
colorClass="text-blue-300"
titleClass="text-blue-300 font-bold text-md"
descriptionClass="text-blue-300 text-md font-semibold"
descriptionClass="text-blue-300 text-md font-semibold pb-1"
icon={Truck}
iconColor="text-blue-900"
iconBackground="bg-blue-300"