Installation
npm install lucide-reactSource Code
fleet-dashboard.tsx
1"use client";
2
3import {
4 Search,
5 LayoutDashboard,
6 Bell,
7 Truck,
8 Route,
9 Wrench,
10 Users,
11 FileCheck,
12 BarChart3,
13 UserCog,
14 Settings,
15 Headphones,
16 SlidersHorizontal,
17 ChevronDown,
18 ChevronUp,
19 TruckIcon
20} from "lucide-react";
21import { useState } from "react";
22
23export const FleetDashboard = () => {
24 const [fleetExpanded, setFleetExpanded] = useState(true);
25
26 const trips = [
27 { id: "#3066", driver: "(209) 555-0104", date: "Jan 6, 2022" },
28 { id: "#3065", driver: "(319) 555-0115", date: "Jan 6, 2022" },
29 { id: "#3064", driver: "(207) 555-0119", date: "Jan 6, 2022" },
30 { id: "#3063", driver: "(307) 555-0133", date: "Jan 5, 2022" },
31 { id: "#3062", driver: "(229) 555-0109", date: "Jan 5, 2022" },
32 { id: "#3061", driver: "(704) 555-0127", date: "Jan 5, 2022" },
33 { id: "#3060", driver: "(406) 555-0120", date: "Jan 4, 2022" },
34 ];
35
36 return (
37 <div className="flex h-screen bg-gray-50">
38 {/* Sidebar */}
39 <aside className="w-[280px] bg-white border-r border-gray-200 flex flex-col">
40 {/* Logo */}
41 <div className="flex items-center justify-between p-6 border-b border-gray-200">
42 <div className="flex items-center gap-3">
43 <div className="w-10 h-10 bg-gray-900 rounded-xl flex items-center justify-center">
44 <div className="w-5 h-5 bg-white rounded-full" />
45 </div>
46 <span className="text-lg font-semibold text-gray-900">Movana Inc.</span>
47 </div>
48 <button className="w-8 h-8 flex items-center justify-center hover:bg-gray-100 rounded-lg">
49 <div className="w-5 h-5 border-2 border-gray-300 rounded" />
50 </button>
51 </div>
52
53 {/* Search */}
54 <div className="px-4 py-4">
55 <div className="relative">
56 <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
57 <input
58 type="text"
59 placeholder="Search anything"
60 className="w-full pl-10 pr-10 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm text-gray-600 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-200"
61 />
62 <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1 text-xs text-gray-400">
63 <span className="text-lg">⌘</span>
64 <span>K</span>
65 </div>
66 </div>
67 </div>
68
69 {/* Navigation */}
70 <nav className="flex-1 px-4 py-2 overflow-y-auto">
71 <div className="space-y-1">
72 <button className="w-full flex items-center gap-3 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg">
73 <LayoutDashboard className="w-5 h-5" />
74 <span>Dashboard</span>
75 </button>
76
77 <button className="w-full flex items-center gap-3 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg">
78 <Bell className="w-5 h-5" />
79 <span>Notifications</span>
80 </button>
81
82 {/* Fleet Management */}
83 <div>
84 <button
85 onClick={() => setFleetExpanded(!fleetExpanded)}
86 className="w-full flex items-center gap-3 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg"
87 >
88 <Truck className="w-5 h-5" />
89 <span className="flex-1 text-left">Fleet management</span>
90 {fleetExpanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
91 </button>
92 {fleetExpanded && (
93 <div className="ml-8 mt-1 space-y-1">
94 <button className="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-600 hover:text-gray-900">
95 <span className="text-gray-400">↳</span>
96 <span>All Vehicles</span>
97 </button>
98 <button className="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-600 hover:text-gray-900">
99 <span className="text-gray-400">↳</span>
100 <span>Reports</span>
101 </button>
102 <button className="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-600 hover:text-gray-900">
103 <span className="text-gray-400">↳</span>
104 <span>Alerts</span>
105 </button>
106 </div>
107 )}
108 </div>
109
110 <button className="w-full flex items-center gap-3 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg">
111 <Route className="w-5 h-5" />
112 <span className="flex-1 text-left">Trips</span>
113 <ChevronDown className="w-4 h-4" />
114 </button>
115
116 <button className="w-full flex items-center gap-3 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg">
117 <Wrench className="w-5 h-5" />
118 <span className="flex-1 text-left">Maintenance</span>
119 <ChevronDown className="w-4 h-4" />
120 </button>
121
122 <button className="w-full flex items-center gap-3 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg">
123 <Users className="w-5 h-5" />
124 <span>Drivers</span>
125 </button>
126
127 <button className="w-full flex items-center gap-3 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg">
128 <FileCheck className="w-5 h-5" />
129 <span>Compliance & Documents</span>
130 </button>
131
132 <button className="w-full flex items-center gap-3 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg">
133 <BarChart3 className="w-5 h-5" />
134 <span>Reports & Analytics</span>
135 </button>
136
137 <button className="w-full flex items-center gap-3 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg">
138 <UserCog className="w-5 h-5" />
139 <span>Admin</span>
140 </button>
141 </div>
142
143 {/* Bottom Menu */}
144 <div className="mt-8 pt-8 border-t border-gray-200 space-y-1">
145 <button className="w-full flex items-center gap-3 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg">
146 <Settings className="w-5 h-5" />
147 <span>Settings</span>
148 </button>
149
150 <button className="w-full flex items-center gap-3 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg">
151 <Headphones className="w-5 h-5" />
152 <span>Support</span>
153 </button>
154
155 <button className="w-full flex items-center gap-3 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg">
156 <SlidersHorizontal className="w-5 h-5" />
157 <span>Preferences</span>
158 </button>
159 </div>
160 </nav>
161
162 {/* User Profile */}
163 <div className="p-4 border-t border-gray-200">
164 <button className="w-full flex items-center gap-3 p-2 hover:bg-gray-50 rounded-lg">
165 <img
166 src="https://i.pravatar.cc/150?img=12"
167 alt="Robert Fox"
168 className="w-10 h-10 rounded-full"
169 />
170 <div className="flex-1 text-left">
171 <div className="text-sm font-medium text-gray-900">Robert Fox</div>
172 <div className="text-xs text-gray-500">robertfox@gmail.com</div>
173 </div>
174 <ChevronDown className="w-4 h-4 text-gray-400" />
175 </button>
176 </div>
177 </aside>
178
179 {/* Main Content */}
180 <main className="flex-1 overflow-y-auto">
181 <div className="max-w-7xl mx-auto p-8">
182 {/* Breadcrumb */}
183 <div className="text-sm text-gray-500 mb-6">/ Dashboard</div>
184
185 {/* Header */}
186 <div className="mb-8">
187 <h1 className="text-4xl font-bold mb-2">
188 Good Morning, <span className="text-gray-400">Robert</span>
189 </h1>
190 <p className="text-gray-600">
191 Track vehicles, assign drivers, and manage routes all in one place.
192 </p>
193 </div>
194
195 {/* Overview Section */}
196 <div className="mb-8">
197 <h2 className="text-xl font-semibold text-gray-900 mb-4">Overview</h2>
198 <div className="grid grid-cols-2 gap-6">
199 {/* Total Vehicles Card */}
200 <div className="bg-white rounded-2xl border border-gray-200 p-6">
201 <div className="flex items-start justify-between mb-4">
202 <span className="text-gray-700 font-medium">Total vehicles</span>
203 <div className="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center">
204 <TruckIcon className="w-5 h-5 text-gray-600" />
205 </div>
206 </div>
207 <div className="flex items-end gap-2">
208 <span className="text-5xl font-bold text-gray-900">185</span>
209 <div className="mb-2">
210 <span className="text-red-500 font-semibold">-6</span>
211 <span className="text-gray-400 text-sm ml-1">vs last year</span>
212 </div>
213 </div>
214 </div>
215
216 {/* Total Drivers Card */}
217 <div className="bg-white rounded-2xl border border-gray-200 p-6">
218 <div className="flex items-start justify-between mb-4">
219 <span className="text-gray-700 font-medium">Total drivers</span>
220 </div>
221 <div className="flex items-end gap-2">
222 <span className="text-5xl font-bold text-gray-900">225</span>
223 <div className="mb-2">
224 <span className="text-green-500 font-semibold">+2</span>
225 <span className="text-gray-400 text-sm ml-1">vs last year</span>
226 </div>
227 </div>
228 </div>
229 </div>
230 </div>
231
232 {/* Trips Section */}
233 <div>
234 <h2 className="text-xl font-semibold text-gray-900 mb-4">Trips</h2>
235 <div className="bg-white rounded-2xl border border-gray-200 overflow-hidden">
236 {/* Table Header */}
237 <div className="grid grid-cols-[40px,1fr,1fr,1fr] gap-4 px-6 py-4 border-b border-gray-200 bg-gray-50">
238 <div className="flex items-center justify-center">
239 <input
240 type="checkbox"
241 className="w-4 h-4 rounded border-gray-300"
242 />
243 </div>
244 <div className="text-sm font-medium text-gray-600">Trip no</div>
245 <div className="text-sm font-medium text-gray-600">Driver details</div>
246 <div className="text-sm font-medium text-gray-600">Total mileage</div>
247 </div>
248
249 {/* Table Rows */}
250 {trips.map((trip) => (
251 <div
252 key={trip.id}
253 className="grid grid-cols-[40px,1fr,1fr,1fr] gap-4 px-6 py-4 border-b border-gray-200 last:border-0 hover:bg-gray-50"
254 >
255 <div className="flex items-center justify-center">
256 <input
257 type="checkbox"
258 className="w-4 h-4 rounded border-gray-300"
259 />
260 </div>
261 <div className="text-sm font-semibold text-gray-900">{trip.id}</div>
262 <div className="text-sm text-gray-600">{trip.driver}</div>
263 <div className="text-sm text-gray-600">{trip.date}</div>
264 </div>
265 ))}
266 </div>
267 </div>
268 </div>
269 </main>
270 </div>
271 );
272};
273
