Refactor sidebar and add new modules
This commit is contained in:
90
src/components/sustainability/WasteTracking.tsx
Normal file
90
src/components/sustainability/WasteTracking.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
import React from 'react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { Trash2, Recycle, TrendingUp, Package } from 'lucide-react';
|
||||
|
||||
const WasteTracking = () => {
|
||||
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 Waste</CardTitle>
|
||||
<Trash2 className="h-4 w-4 text-gray-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">2,340 kg</div>
|
||||
<p className="text-xs text-gray-600 mt-1">This month</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Recycled</CardTitle>
|
||||
<Recycle className="h-4 w-4 text-green-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">1,755 kg</div>
|
||||
<p className="text-xs text-gray-600 mt-1">75% recycling rate</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Composted</CardTitle>
|
||||
<Package className="h-4 w-4 text-brown-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">420 kg</div>
|
||||
<p className="text-xs text-gray-600 mt-1">18% of total</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Improvement</CardTitle>
|
||||
<TrendingUp className="h-4 w-4 text-green-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">+8%</div>
|
||||
<p className="text-xs text-gray-600 mt-1">From last month</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Waste Management</CardTitle>
|
||||
<CardDescription>Distribution of waste by type</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium">Recyclable</span>
|
||||
<span className="text-sm text-gray-600">1,755 kg (75%)</span>
|
||||
</div>
|
||||
<Progress value={75} className="h-2" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium">Organic</span>
|
||||
<span className="text-sm text-gray-600">420 kg (18%)</span>
|
||||
</div>
|
||||
<Progress value={18} className="h-2" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium">Landfill</span>
|
||||
<span className="text-sm text-gray-600">165 kg (7%)</span>
|
||||
</div>
|
||||
<Progress value={7} className="h-2" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WasteTracking;
|
||||
Reference in New Issue
Block a user