Upload integral_react_dashboard.jsx

integral_react_dashboard.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { motion } from "framer-motion";
+
+export default function Dashboard() {
+  return (
+    <div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
+      <motion.h1
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="text-3xl font-bold col-span-full"
+      >
+        Integral Infrastructure Dashboard
+      </motion.h1>
+
+      <Card className="rounded-2xl shadow-md">
+        <CardContent className="p-4">
+          <h2 className="text-xl font-semibold mb-2">Infrastructure Status</h2>
+          <p>Live road condition, pothole detection, and alerts.</p>
+        </CardContent>
+      </Card>
+
+      <Card className="rounded-2xl shadow-md">
+        <CardContent className="p-4">
+          <h2 className="text-xl font-semibold mb-2">AI Verification</h2>
+          <p>Model outputs for pothole validation and cost optimization.</p>
+        </CardContent>
+      </Card>
+
+      <Card className="rounded-2xl shadow-md">
+        <CardContent className="p-4">
+          <h2 className="text-xl font-semibold mb-2">Event Stream</h2>
+          <p>Live subscriptions showing infrastructureFaults and updates.</p>
+        </CardContent>
+      </Card>
+
+      <Card className="rounded-2xl shadow-md">
+        <CardContent className="p-4">
+          <h2 className="text-xl font-semibold mb-2">Trigger Action</h2>
+          <Button>Simulate Repair</Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}