ellecio2/karibeo_backend_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor sidebar and add new modules

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-10 23:49:26 +00:00
parent d711219171
commit 2f1f19b6f5
17 changed files with 1628 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/components/vehicles/DriverManagement.tsx Normal file
View File

@@ -0,0 +1,116 @@
import React from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Users, Star, AlertTriangle, Award, TrendingUp } from 'lucide-react';
const mockDrivers = [
{ id: 1, name: 'Carlos Martinez', status: 'active', rating: 4.9, trips: 245, vehicle: 'V001' },
{ id: 2, name: 'Maria Rodriguez', status: 'active', rating: 4.8, trips: 198, vehicle: 'V005' },
{ id: 3, name: 'Juan Perez', status: 'off-duty', rating: 4.7, trips: 312, vehicle: '-' },
{ id: 4, name: 'Ana Garcia', status: 'active', rating: 5.0, trips: 156, vehicle: 'V002' }
];
const DriverManagement = () => {
const getStatusColor = (status: string) => {
return status === 'active'
? 'bg-green-100 text-green-800'
: '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">Total Drivers</CardTitle>
<Users className="h-4 w-4 text-blue-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">48</div>
<p className="text-xs text-gray-600 mt-1">Registered drivers</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Active Now</CardTitle>
<TrendingUp className="h-4 w-4 text-green-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">32</div>
<p className="text-xs text-gray-600 mt-1">Currently driving</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Avg Rating</CardTitle>
<Star className="h-4 w-4 text-yellow-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">4.8</div>
<p className="text-xs text-gray-600 mt-1">Out of 5.0</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Top Performer</CardTitle>
<Award className="h-4 w-4 text-purple-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">Ana G.</div>
<p className="text-xs text-gray-600 mt-1">5.0 rating</p>
</CardContent>
</Card>
</div>
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<div>
<CardTitle>Driver List</CardTitle>
<CardDescription>Manage your driver team</CardDescription>
</div>
<Button>Add Driver</Button>
</div>
</CardHeader>
<CardContent>
<div className="space-y-3">
{mockDrivers.map((driver) => (
<div key={driver.id} className="border rounded-lg p-4 hover:bg-gray-50 transition-colors">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4 flex-1">
<div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
<Users className="h-6 w-6 text-blue-600" />
</div>
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<h3 className="font-semibold text-gray-900">{driver.name}</h3>
<Badge className={getStatusColor(driver.status)}>
{driver.status}
</Badge>
</div>
<div className="flex items-center gap-4 text-sm text-gray-600">
<span className="flex items-center gap-1">
<Star className="h-3 w-3 fill-yellow-500 text-yellow-500" />
{driver.rating}
</span>
<span>{driver.trips} trips</span>
<span>Vehicle: {driver.vehicle}</span>
</div>
</div>
</div>
<Button variant="outline" size="sm">View Profile</Button>
</div>
</div>
))}
</div>
</CardContent>
</Card>
</div>
);
};
export default DriverManagement;

120
src/components/vehicles/FleetOverview.tsx Normal file
View File

@@ -0,0 +1,120 @@
import React from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Car, TrendingUp, AlertTriangle, Wrench, MapPin, DollarSign } from 'lucide-react';
const mockVehicles = [
{ id: 'V001', model: 'Toyota Camry 2023', status: 'active', location: 'Downtown', fuel: 85, mileage: 45230 },
{ id: 'V002', model: 'Honda Accord 2022', status: 'active', location: 'Airport', fuel: 92, mileage: 38450 },
{ id: 'V003', model: 'Tesla Model 3', status: 'charging', location: 'Station A', fuel: 45, mileage: 22100 },
{ id: 'V004', model: 'Ford Explorer 2023', status: 'maintenance', location: 'Service Center', fuel: 30, mileage: 52780 },
{ id: 'V005', model: 'Chevrolet Suburban', status: 'active', location: 'Hotel Zone', fuel: 78, mileage: 31250 }
];
const FleetOverview = () => {
const getStatusColor = (status: string) => {
switch (status) {
case 'active': return 'bg-green-100 text-green-800';
case 'charging': return 'bg-blue-100 text-blue-800';
case 'maintenance': return 'bg-orange-100 text-orange-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">Total Vehicles</CardTitle>
<Car className="h-4 w-4 text-blue-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">54</div>
<p className="text-xs text-gray-600 mt-1">Active fleet</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">In Service</CardTitle>
<TrendingUp className="h-4 w-4 text-green-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">48</div>
<p className="text-xs text-gray-600 mt-1">89% availability</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Maintenance</CardTitle>
<Wrench className="h-4 w-4 text-orange-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">6</div>
<p className="text-xs text-gray-600 mt-1">Due this week</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Monthly Cost</CardTitle>
<DollarSign className="h-4 w-4 text-purple-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">$8,450</div>
<p className="text-xs text-gray-600 mt-1">-5% from last month</p>
</CardContent>
</Card>
</div>
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<div>
<CardTitle>Active Vehicles</CardTitle>
<CardDescription>Real-time fleet status</CardDescription>
</div>
<Button>Add Vehicle</Button>
</div>
</CardHeader>
<CardContent>
<div className="space-y-3">
{mockVehicles.map((vehicle) => (
<div key={vehicle.id} className="border rounded-lg p-4 hover:bg-gray-50 transition-colors">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4 flex-1">
<div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
<Car className="h-6 w-6 text-blue-600" />
</div>
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<h3 className="font-semibold text-gray-900">{vehicle.model}</h3>
<Badge className={getStatusColor(vehicle.status)}>
{vehicle.status}
</Badge>
</div>
<div className="flex items-center gap-4 text-sm text-gray-600">
<span className="flex items-center gap-1">
<MapPin className="h-3 w-3" />
{vehicle.location}
</span>
<span>Fuel: {vehicle.fuel}%</span>
<span>{vehicle.mileage.toLocaleString()} mi</span>
</div>
</div>
</div>
<Button variant="outline" size="sm">Details</Button>
</div>
</div>
))}
</div>
</CardContent>
</Card>
</div>
);
};
export default FleetOverview;

126
src/components/vehicles/MaintenanceSchedule.tsx Normal file
View File

@@ -0,0 +1,126 @@
import React from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Wrench, Calendar, AlertTriangle, CheckCircle } from 'lucide-react';
const mockMaintenance = [
{ id: 1, vehicle: 'V004 - Ford Explorer', type: 'Oil Change', status: 'scheduled', date: '2025-10-12', priority: 'medium' },
{ id: 2, vehicle: 'V007 - Tesla Model S', type: 'Tire Rotation', status: 'overdue', date: '2025-10-08', priority: 'high' },
{ id: 3, vehicle: 'V012 - Honda CR-V', type: 'Brake Inspection', status: 'scheduled', date: '2025-10-15', priority: 'high' },
{ id: 4, vehicle: 'V003 - Tesla Model 3', type: 'Battery Check', status: 'completed', date: '2025-10-09', priority: 'low' }
];
const MaintenanceSchedule = () => {
const getStatusColor = (status: string) => {
switch (status) {
case 'completed': return 'bg-green-100 text-green-800';
case 'scheduled': return 'bg-blue-100 text-blue-800';
case 'overdue': return 'bg-red-100 text-red-800';
default: return 'bg-gray-100 text-gray-800';
}
};
const getPriorityColor = (priority: string) => {
switch (priority) {
case 'high': return 'bg-red-100 text-red-800';
case 'medium': return 'bg-yellow-100 text-yellow-800';
default: return 'bg-blue-100 text-blue-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">Scheduled</CardTitle>
<Calendar className="h-4 w-4 text-blue-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">12</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">Overdue</CardTitle>
<AlertTriangle className="h-4 w-4 text-red-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">3</div>
<p className="text-xs text-gray-600 mt-1">Requires attention</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">45</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">Total Cost</CardTitle>
<Wrench className="h-4 w-4 text-purple-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">$2,340</div>
<p className="text-xs text-gray-600 mt-1">This month</p>
</CardContent>
</Card>
</div>
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<div>
<CardTitle>Maintenance Schedule</CardTitle>
<CardDescription>Upcoming and recent maintenance activities</CardDescription>
</div>
<Button>Schedule Service</Button>
</div>
</CardHeader>
<CardContent>
<div className="space-y-3">
{mockMaintenance.map((item) => (
<div key={item.id} className="border rounded-lg p-4 hover:bg-gray-50 transition-colors">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4 flex-1">
<div className="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center">
<Wrench className="h-6 w-6 text-orange-600" />
</div>
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<h3 className="font-semibold text-gray-900">{item.type}</h3>
<Badge className={getStatusColor(item.status)}>
{item.status}
</Badge>
<Badge className={getPriorityColor(item.priority)}>
{item.priority}
</Badge>
</div>
<div className="flex items-center gap-4 text-sm text-gray-600">
<span>{item.vehicle}</span>
<span>{item.date}</span>
</div>
</div>
</div>
<Button variant="outline" size="sm">Manage</Button>
</div>
</div>
))}
</div>
</CardContent>
</Card>
</div>
);
};
export default MaintenanceSchedule;

63
src/components/vehicles/VehicleTracking.tsx Normal file
View File

@@ -0,0 +1,63 @@
import React from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { MapPin, Navigation, Clock, Activity } from 'lucide-react';
const VehicleTracking = () => {
return (
<div className="space-y-6">
<Card>
<CardHeader>
<CardTitle>Live Vehicle Tracking</CardTitle>
<CardDescription>Real-time GPS tracking of your fleet</CardDescription>
</CardHeader>
<CardContent>
<div className="bg-gray-100 rounded-lg h-96 flex items-center justify-center">
<div className="text-center">
<MapPin className="h-16 w-16 text-gray-400 mx-auto mb-4" />
<p className="text-gray-600">Map integration would be displayed here</p>
<p className="text-sm text-gray-500 mt-2">Showing real-time location of all vehicles</p>
</div>
</div>
</CardContent>
</Card>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Active Routes</CardTitle>
<Navigation className="h-4 w-4 text-blue-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">32</div>
<p className="text-xs text-gray-600 mt-1">Currently in transit</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Avg Speed</CardTitle>
<Activity className="h-4 w-4 text-green-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">45 mph</div>
<p className="text-xs text-gray-600 mt-1">Fleet average</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">ETA</CardTitle>
<Clock className="h-4 w-4 text-purple-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">18 min</div>
<p className="text-xs text-gray-600 mt-1">Nearest vehicle</p>
</CardContent>
</Card>
</div>
</div>
);
};
export default VehicleTracking;