Business Dashboard

" import React from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Progress } from "@/components/ui/progress"; import { Bar, Line } from "recharts"; import { Gauge } from "@/components/ui/gauge"; const Dashboard = () => { const costData = [ { name: "BAC", value: 165900 }, { name: "EAC", value: 194700 }, { name: "AC", value: 23000 }, { name: "ETC", value: 171700 }, ]; const burndownData = [ { month: "Jan-25", plan: 100, actual: 90 }, { month: "Feb-25", plan: 90, actual: 80 }, { month: "Mar-25", plan: 80, actual: 70 }, { month: "Apr-25", plan: 70, actual: 55 }, { month: "May-25", plan: 60, actual: 50 }, ]; const risks = [ { id: 1, risk: "Component availability", status: "On track", color: "bg-green-500" }, { id: 2, risk: "Integration challenges", status: "On track", color: "bg-green-500" }, { id: 3, risk: "Test resource availability", status: "Delayed", color: "bg-yellow-500" }, { id: 4, risk: "Power requirement", status: "Missed", color: "bg-red-500" }, ]; return ( <div className="p-8 grid gap-8"> <div className="grid grid-cols-4 gap-4"> {costData.map((item) => ( <Card key={item.name} className="p-4 text-center"> <h2 className="text-lg font-bold">{item.name}</h2> <p className="text-xl">${item.value.toLocaleString()}</p> </Card> ))} </div> <div className="grid grid-cols-2 gap-4"> <Card> <CardContent> <h3 className="text-lg font-bold">Requirements Burndown</h3> <Bar width={400} height={200} data={burndownData} xKey="month" yKeys={['plan', 'actual']} colors={["#8884d8", "#82ca9d"]} /> </CardContent> </Card> <div className="grid grid-cols-2 gap-4"> <Gauge value={0.95} label="SPI" color="green" /> <Gauge value={1.1} label="CPI" color="blue" /> </div> </div> <div className="grid grid-cols-4 gap-4"> {risks.map((risk) => ( <Card key={risk.id} className="p-4"> <h4 className="text-md font-bold">{risk.risk}</h4> <div className={`p-2 text-white ${risk.color}`}>{risk.status}</div> </Card> ))} </div> </div> ); }; export default Dashboard; "