integral_react_dashboard.jsx

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>
  );
}