Refactor sidebar and add new modules

src/pages/dashboard/Security.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import ThreatDetection from '@/components/security/ThreatDetection';
+import AccessControl from '@/components/security/AccessControl';
+import AuditLogs from '@/components/security/AuditLogs';
+import ComplianceMonitor from '@/components/security/ComplianceMonitor';
+import { Shield } from 'lucide-react';
+
+const Security = () => {
+  const [activeTab, setActiveTab] = useState('threats');
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-6">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex items-center gap-3 mb-6">
+          <Shield className="w-8 h-8 text-orange-600" />
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">Security Center</h1>
+            <p className="text-gray-600">Monitor and manage system security</p>
+          </div>
+        </div>
+
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
+          <TabsList className="grid w-full grid-cols-4 lg:w-auto">
+            <TabsTrigger value="threats">Threat Detection</TabsTrigger>
+            <TabsTrigger value="access">Access Control</TabsTrigger>
+            <TabsTrigger value="audit">Audit Logs</TabsTrigger>
+            <TabsTrigger value="compliance">Compliance</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="threats">
+            <ThreatDetection />
+          </TabsContent>
+
+          <TabsContent value="access">
+            <AccessControl />
+          </TabsContent>
+
+          <TabsContent value="audit">
+            <AuditLogs />
+          </TabsContent>
+
+          <TabsContent value="compliance">
+            <ComplianceMonitor />
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  );
+};
+
+export default Security;

src/pages/dashboard/Sustainability.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import CarbonFootprint from '@/components/sustainability/CarbonFootprint';
+import EnergyManagement from '@/components/sustainability/EnergyManagement';
+import WasteTracking from '@/components/sustainability/WasteTracking';
+import SustainabilityGoals from '@/components/sustainability/SustainabilityGoals';
+import { Leaf } from 'lucide-react';
+
+const Sustainability = () => {
+  const [activeTab, setActiveTab] = useState('carbon');
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-6">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex items-center gap-3 mb-6">
+          <Leaf className="w-8 h-8 text-green-600" />
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">Sustainability Dashboard</h1>
+            <p className="text-gray-600">Track and improve environmental impact</p>
+          </div>
+        </div>
+
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
+          <TabsList className="grid w-full grid-cols-4 lg:w-auto">
+            <TabsTrigger value="carbon">Carbon Footprint</TabsTrigger>
+            <TabsTrigger value="energy">Energy</TabsTrigger>
+            <TabsTrigger value="waste">Waste</TabsTrigger>
+            <TabsTrigger value="goals">Goals</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="carbon">
+            <CarbonFootprint />
+          </TabsContent>
+
+          <TabsContent value="energy">
+            <EnergyManagement />
+          </TabsContent>
+
+          <TabsContent value="waste">
+            <WasteTracking />
+          </TabsContent>
+
+          <TabsContent value="goals">
+            <SustainabilityGoals />
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  );
+};
+
+export default Sustainability;

src/pages/dashboard/VehicleManagement.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import FleetOverview from '@/components/vehicles/FleetOverview';
+import VehicleTracking from '@/components/vehicles/VehicleTracking';
+import MaintenanceSchedule from '@/components/vehicles/MaintenanceSchedule';
+import DriverManagement from '@/components/vehicles/DriverManagement';
+import { Car } from 'lucide-react';
+
+const VehicleManagement = () => {
+  const [activeTab, setActiveTab] = useState('fleet');
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-6">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex items-center gap-3 mb-6">
+          <Car className="w-8 h-8 text-orange-600" />
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">Vehicle Management</h1>
+            <p className="text-gray-600">Monitor and manage your fleet</p>
+          </div>
+        </div>
+
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
+          <TabsList className="grid w-full grid-cols-4 lg:w-auto">
+            <TabsTrigger value="fleet">Fleet Overview</TabsTrigger>
+            <TabsTrigger value="tracking">Tracking</TabsTrigger>
+            <TabsTrigger value="maintenance">Maintenance</TabsTrigger>
+            <TabsTrigger value="drivers">Drivers</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="fleet">
+            <FleetOverview />
+          </TabsContent>
+
+          <TabsContent value="tracking">
+            <VehicleTracking />
+          </TabsContent>
+
+          <TabsContent value="maintenance">
+            <MaintenanceSchedule />
+          </TabsContent>
+
+          <TabsContent value="drivers">
+            <DriverManagement />
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  );
+};
+
+export default VehicleManagement;