santasri.pachhal/road-monitoring-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add culvert type in model method and fix dashboard skeleton issue

Browse Source
This commit is contained in:
santasri.pachhal
2026-03-19 09:26:19 +05:30
parent 3ffa57dd06
commit 762503cedf
3 changed files with 136 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/dashboard/dashboard-skeleton.tsx
View File

@@ -7,16 +7,18 @@ export function DashboardSkeleton() {
return (
<div className="space-y-6">
{/* Stats Cards Skeleton */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
{[...Array(6)].map((_, i) => (
<Card key={i} className="py-8 px-6">
<Card key={i} className="py-6 px-4">
<CardContent className="p-0 flex items-center justify-between gap-6">
<div className="flex flex-col gap-2 flex-1">
<Skeleton className="h-4 w-32" />
<Skeleton className="h-10 w-20" />
<Skeleton className="h-3 w-40" />
<div className="flex flex-col gap-1 min-w-0 flex-1">
<Skeleton className="h-4 w-24 mb-1" />
<div className="flex flex-col gap-1">
<Skeleton className="h-9 w-20" />
<Skeleton className="h-3 w-32" />
</div>
</div>
<Skeleton className="w-16 h-16 rounded-lg shrink-0" />
<Skeleton className="w-12 h-12 rounded-xl shrink-0" />
</CardContent>
</Card>
))}
@@ -24,30 +26,59 @@ export function DashboardSkeleton() {
{/* Charts Row Skeleton */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
{[...Array(2)].map((_, i) => (
<Card key={i}>
<CardHeader className="pb-2">
<div className="flex items-center gap-2">
<Skeleton className="w-10 h-10 rounded-md" />
<Skeleton className="h-6 w-48" />
</div>
</CardHeader>
<CardContent className="pt-4 h-[350px] flex items-center justify-center">
<Skeleton className="h-[300px] w-full max-w-[300px] rounded-full" />
</CardContent>
</Card>
))}
{/* Donut Chart Skeleton */}
<Card className="h-full">
<CardHeader className="items-center pb-2">
<Skeleton className="h-6 w-48 mb-2" />
<Skeleton className="h-4 w-64" />
</CardHeader>
<CardContent className="h-[300px] flex items-center justify-center">
<Skeleton className="h-56 w-56 rounded-full border-20 border-muted" />
</CardContent>
</Card>
{/* Bar Chart Skeleton */}
<Card className="h-full">
<CardHeader className="items-center pb-2">
<Skeleton className="h-6 w-40 mb-2" />
<Skeleton className="h-4 w-52" />
</CardHeader>
<CardContent className="h-[300px] flex items-end justify-between gap-2 px-6 pb-8 pt-4">
{[...Array(8)].map((_, i) => {
const heights = ['60%', '40%', '75%', '50%', '65%', '35%', '80%', '45%'];
return (
<div key={i} className="flex flex-col gap-1 items-center flex-1">
<Skeleton
className="w-full rounded-t-sm"
style={{ height: heights[i % heights.length] }}
/>
<Skeleton className="h-2 w-full mt-2" />
</div>
);
})}
</CardContent>
</Card>
</div>
{/* Map Skeleton */}
<Card>
<Card className="overflow-hidden">
<CardHeader className="pb-2">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Skeleton className="w-10 h-10 rounded-md" />
<Skeleton className="h-6 w-48" />
<div className="flex items-center gap-3">
<Skeleton className="w-9 h-9 rounded-md" />
<div className="flex flex-col gap-1">
<Skeleton className="h-5 w-32" />
<Skeleton className="h-3 w-48" />
</div>
</div>
<div className="flex gap-2">
{[...Array(3)].map((_, i) => (
<div key={i} className="flex items-center gap-1">
<Skeleton className="w-2.5 h-2.5 rounded-full" />
<Skeleton className="h-3 w-16" />
</div>
))}
</div>
<Skeleton className="h-8 w-32 rounded-full" />
</div>
</CardHeader>
<CardContent className="p-2">

4
src/components/ui/sidebar.tsx
View File

@@ -583,9 +583,7 @@ function SidebarMenuSkeleton({
showIcon?: boolean;
}) {
// Random width between 50 to 90%.
const width = React.useMemo(() => {
return `${Math.floor(Math.random() * 40) + 50}%`;
}, []);
const width = '70%';
return (
<div