99 lines
3.9 KiB
TypeScript
99 lines
3.9 KiB
TypeScript
import React from 'react';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Progress } from '@/components/ui/progress';
|
|
import { TrendingDown, Leaf, Factory, Zap } from 'lucide-react';
|
|
|
|
const CarbonFootprint = () => {
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Total Emissions</CardTitle>
|
|
<Factory className="h-4 w-4 text-gray-600" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">1,247 tons</div>
|
|
<p className="text-xs text-gray-600 mt-1">CO2 this year</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Reduction</CardTitle>
|
|
<TrendingDown className="h-4 w-4 text-green-600" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">-18%</div>
|
|
<p className="text-xs text-gray-600 mt-1">From last year</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Offset</CardTitle>
|
|
<Leaf className="h-4 w-4 text-green-600" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">340 tons</div>
|
|
<p className="text-xs text-gray-600 mt-1">27% offset</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Goal Progress</CardTitle>
|
|
<Zap className="h-4 w-4 text-yellow-600" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">72%</div>
|
|
<p className="text-xs text-gray-600 mt-1">On track</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Emissions by Source</CardTitle>
|
|
<CardDescription>Breakdown of carbon emissions</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-medium">Transportation</span>
|
|
<span className="text-sm text-gray-600">624 tons (50%)</span>
|
|
</div>
|
|
<Progress value={50} className="h-2" />
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-medium">Energy</span>
|
|
<span className="text-sm text-gray-600">374 tons (30%)</span>
|
|
</div>
|
|
<Progress value={30} className="h-2" />
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-medium">Operations</span>
|
|
<span className="text-sm text-gray-600">187 tons (15%)</span>
|
|
</div>
|
|
<Progress value={15} className="h-2" />
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-medium">Other</span>
|
|
<span className="text-sm text-gray-600">62 tons (5%)</span>
|
|
</div>
|
|
<Progress value={5} className="h-2" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CarbonFootprint;
|