Refactor sidebar and add new modules
This commit is contained in:
gpt-engineer-app[bot]
98
src/components/sustainability/CarbonFootprint.tsx
Normal file
98
src/components/sustainability/CarbonFootprint.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
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;
|
||||
83
src/components/sustainability/EnergyManagement.tsx
Normal file
83
src/components/sustainability/EnergyManagement.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import React from 'react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { Zap, Sun, Wind, Battery } from 'lucide-react';
|
||||
|
||||
const EnergyManagement = () => {
|
||||
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 Usage</CardTitle>
|
||||
<Zap className="h-4 w-4 text-yellow-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">45,230 kWh</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">Solar Energy</CardTitle>
|
||||
<Sun className="h-4 w-4 text-orange-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">12,450 kWh</div>
|
||||
<p className="text-xs text-gray-600 mt-1">27% 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">Wind Energy</CardTitle>
|
||||
<Wind className="h-4 w-4 text-blue-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">8,120 kWh</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">Efficiency</CardTitle>
|
||||
<Battery className="h-4 w-4 text-green-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">+12%</div>
|
||||
<p className="text-xs text-gray-600 mt-1">Improvement</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Energy Sources</CardTitle>
|
||||
<CardDescription>Breakdown of energy consumption by source</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium">Renewable</span>
|
||||
<span className="text-sm text-gray-600">20,570 kWh (45%)</span>
|
||||
</div>
|
||||
<Progress value={45} className="h-2" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium">Grid</span>
|
||||
<span className="text-sm text-gray-600">24,660 kWh (55%)</span>
|
||||
</div>
|
||||
<Progress value={55} className="h-2" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EnergyManagement;
|
||||
108
src/components/sustainability/SustainabilityGoals.tsx
Normal file
108
src/components/sustainability/SustainabilityGoals.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
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 { Target, CheckCircle, Clock, TrendingUp } from 'lucide-react';
|
||||
|
||||
const goals = [
|
||||
{ id: 1, title: 'Reduce Carbon Emissions by 25%', progress: 72, status: 'on-track', deadline: '2025-12-31' },
|
||||
{ id: 2, title: 'Achieve 50% Renewable Energy', progress: 45, status: 'on-track', deadline: '2025-12-31' },
|
||||
{ id: 3, title: 'Zero Waste to Landfill', progress: 93, status: 'ahead', deadline: '2026-06-30' },
|
||||
{ id: 4, title: 'Water Consumption -30%', progress: 38, status: 'at-risk', deadline: '2025-12-31' }
|
||||
];
|
||||
|
||||
const SustainabilityGoals = () => {
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'ahead': return 'bg-green-100 text-green-800';
|
||||
case 'on-track': return 'bg-blue-100 text-blue-800';
|
||||
case 'at-risk': return 'bg-yellow-100 text-yellow-800';
|
||||
default: return 'bg-gray-100 text-gray-800';
|
||||
}
|
||||
};
|
||||
|
||||
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">Active Goals</CardTitle>
|
||||
<Target className="h-4 w-4 text-blue-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">4</div>
|
||||
<p className="text-xs text-gray-600 mt-1">In progress</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Completed</CardTitle>
|
||||
<CheckCircle 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">Goals achieved</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">On Track</CardTitle>
|
||||
<TrendingUp className="h-4 w-4 text-blue-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">75%</div>
|
||||
<p className="text-xs text-gray-600 mt-1">Success 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">At Risk</CardTitle>
|
||||
<Clock className="h-4 w-4 text-yellow-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">1</div>
|
||||
<p className="text-xs text-gray-600 mt-1">Needs attention</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Sustainability Goals</CardTitle>
|
||||
<CardDescription>Track progress towards environmental targets</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{goals.map((goal) => (
|
||||
<div key={goal.id} className="border rounded-lg p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="font-semibold text-gray-900">{goal.title}</h3>
|
||||
<Badge className={getStatusColor(goal.status)}>
|
||||
{goal.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<span className="text-sm text-gray-600">
|
||||
Due: {goal.deadline}
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-600">Progress</span>
|
||||
<span className="font-semibold">{goal.progress}%</span>
|
||||
</div>
|
||||
<Progress value={goal.progress} className="h-2" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SustainabilityGoals;
|
||||
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