Untitled
import React from 'react'; import { Pie, PieChart } from 'recharts'; import { Leaf, TreePine, Factory, Car, Plane } from 'lucide-react'; import { useMetrics } from '@/hooks/useMetrics'; import { AppSidebar } from "@/components/app-sidebar"; import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; import { Separator } from "@/components/ui/separator"; import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbLink } from "@/components/ui/breadcrumb"; import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "@/components/ui/chart"; const chartConfig = { paper: { label: "Paper", color: "hsl(var(--chart-1))", }, plastic: { label: "Plastic", color: "hsl(var(--chart-2))", }, organic: { label: "Organic", color: "hsl(var(--chart-3))", }, }; export default function EnvironmentalImpactPage() { const { metrics, loading, error } = useMetrics(); if (loading) return <div>Loading...</div>; if (error) return <div>Error: {error}</div>; if (!metrics) return null; const { environmental_impact } = metrics; // Transform data for recycling by type pie chart const recyclingData = [ { name: "Paper", value: environmental_impact.paper_weight_recycled }, { name: "Plastic", value: environmental_impact.plastic_weight_recycled }, { name: "Organic", value: environmental_impact.organic_weight_processed } ]; // Calculate equivalents (example calculations - adjust as needed) const carKmSaved = environmental_impact.co2_saved * 6; // ~6km per kg CO2 const flightKmSaved = environmental_impact.co2_saved * 3; // ~3km per kg CO2 return ( <SidebarProvider> <AppSidebar /> <SidebarInset> <header className="flex shrink-0 items-center gap-2 border-b px-4 py-6"> <SidebarTrigger className="-ml-1" /> <Separator orientation="vertical" className="mr-2 h-4" /> <Breadcrumb> <BreadcrumbList> <BreadcrumbItem> <BreadcrumbLink href="/">Home</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbItem> <BreadcrumbLink href="/impact">Environmental Impact</BreadcrumbLink> </BreadcrumbItem> </BreadcrumbList> </Breadcrumb> </header> <main className="p-4 space-y-4"> <div className="grid gap-4 md:grid-cols-2"> {/* CO2 Impact Card */} <Card className="relative overflow-hidden"> <CardHeader className="flex flex-row items-center justify-between pb-2"> <CardTitle className="text-sm font-medium"> CO2 Impact </CardTitle> <Factory className="h-4 w-4 text-muted-foreground" /> </CardHeader> <CardContent> <div className="text-2xl font-bold">{environmental_impact.co2_saved.toFixed(2)} kg</div> <p className="text-xs text-muted-foreground">CO2 emissions saved</p> <div className="mt-4 space-y-2"> <div className="flex items-center text-sm"> <Car className="h-4 w-4 mr-2 text-muted-foreground" /> <span>Equivalent to {carKmSaved.toFixed(0)} km not driven by car</span> </div> <div className="flex items-center text-sm"> <Plane className="h-4 w-4 mr-2 text-muted-foreground" /> <span>Equivalent to {flightKmSaved.toFixed(0)} km not flown</span> </div> </div> </CardContent> </Card> {/* Trees Saved Card */} <Card className="relative overflow-hidden"> <CardHeader className="flex flex-row items-center justify-between pb-2"> <CardTitle className="text-sm font-medium"> Trees Saved </CardTitle> <TreePine className="h-4 w-4 text-muted-foreground" /> </CardHeader> <CardContent> <div className="text-2xl font-bold">{environmental_impact.trees_saved.toFixed(3)}</div> <p className="text-xs text-muted-foreground">Trees preserved through recycling</p> <div className="mt-4 space-y-2"> <div className="flex items-center text-sm"> <Leaf className="h-4 w-4 mr-2 text-muted-foreground" /> <span>Each tree absorbs ~22kg of CO2 per year</span> </div> <div className="flex items-center text-sm"> <TreePine className="h-4 w-4 mr-2 text-muted-foreground" /> <span>Provides oxygen for 2 people per year</span> </div> </div> </CardContent> </Card> {/* Materials Recycled by Type */} <Card className="md:col-span-2"> <CardHeader> <CardTitle className="flex items-center gap-2 text-sm font-medium"> <Leaf className="h-4 w-4" /> Materials Recycled by Type </CardTitle> <CardDescription> Breakdown of recycled materials by weight (kg) </CardDescription> </CardHeader> <CardContent className="flex justify-between items-center"> <ChartContainer config={chartConfig} className="h-[200px] w-[200px]"> <PieChart> <Pie data={recyclingData} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80} label > </Pie> <ChartTooltip content={<ChartTooltipContent />} /> </PieChart> </ChartContainer> <div className="space-y-4"> <div className="space-y-2"> <div className="flex items-center"> <div className="w-3 h-3 rounded-full mr-2" style={{ backgroundColor: 'hsl(var(--chart-1))' }}></div> <span className="text-sm font-medium">Paper: {environmental_impact.paper_weight_recycled.toFixed(2)} kg</span> </div> <div className="flex items-center"> <div className="w-3 h-3 rounded-full mr-2" style={{ backgroundColor: 'hsl(var(--chart-2))' }}></div> <span className="text-sm font-medium">Plastic: {environmental_impact.plastic_weight_recycled.toFixed(2)} kg</span> </div> <div className="flex items-center"> <div className="w-3 h-3 rounded-full mr-2" style={{ backgroundColor: 'hsl(var(--chart-3))' }}></div> <span className="text-sm font-medium">Organic: {environmental_impact.organic_weight_processed.toFixed(2)} kg</span> </div> </div> </div> </CardContent> </Card> </div> </main> </SidebarInset> </SidebarProvider> ); }
Leave a Comment