ui changes

components/dashboard/dashboard-skeleton.tsx

@@ -0,0 +1,59 @@
+"use client"
+
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+
+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">
+        {[...Array(6)].map((_, i) => (
+          <Card key={i} className="bg-white/60 backdrop-blur-lg border-none shadow-none overflow-hidden py-8 px-6">
+            <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>
+              <Skeleton className="w-16 h-16 rounded-lg shrink-0" />
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* Charts Row Skeleton */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
+        {[...Array(2)].map((_, i) => (
+          <Card key={i} className="rounded-md bg-white/60 backdrop-blur-lg overflow-hidden border-none shadow-none">
+            <CardHeader className="pb-2 border-none">
+              <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>
+        ))}
+      </div>
+
+      {/* Map Skeleton */}
+      <Card className="rounded-md bg-white/60 backdrop-blur-lg overflow-hidden border-none shadow-none">
+        <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>
+              <Skeleton className="h-8 w-32 rounded-full" />
+           </div>
+        </CardHeader>
+        <CardContent className="p-2">
+          <Skeleton className="h-[500px] w-full rounded-md" />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}