Skip to content

Commit e02af65

Browse files
RabbitDaCoderRabbitDaCoder
committed
feat(router): update service route to point to Services component
fix(deliveryStore): enhance shipment data validation with detailed logging refactor(deliveryStore): replace debug logs with console logs for better visibility chore(text): remove unused shipment details component and related interfaces
1 parent b8db976 commit e02af65

File tree

18 files changed

+3407
-1953
lines changed

18 files changed

+3407
-1953
lines changed

‎client/package-lock.json‎

Lines changed: 26 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
"react-dom": "^19.1.0",
5858
"react-i18next": "^15.7.1",
5959
"react-icons": "^5.5.0",
60+
"react-leaflet": "^5.0.0",
6061
"react-router-dom": "^7.8.2",
6162
"react-toastify": "^11.0.3",
6263
"recharts": "^2.15.4",

‎client/src/Admin/pages/TimelineComponent.tsx‎

Lines changed: 38 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -222,10 +222,10 @@ const TimelineComponent: React.FC<TimelineComponentProps> = ({ shipment }) => {
222222

223223
return (
224224
<div>
225-
<h3 className="text-xl font-semibold text-white mb-6">
225+
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">
226226
Shipment Timeline
227227
</h3>
228-
<p className="text-zinc-400 mb-8">
228+
<p className="text-gray-600 dark:text-gray-400 mb-8">
229229
Track the journey of your shipment from origin to destination
230230
</p>
231231

@@ -235,74 +235,75 @@ const TimelineComponent: React.FC<TimelineComponentProps> = ({ shipment }) => {
235235
const statusColors =
236236
event.statusColor || getStatusColor(event.status);
237237
const [, bgColor] = statusColors.split(" ");
238+
const isLastEvent = index === timeline.length - 1;
238239

239240
// Show date/time if they exist and are not empty
240241
const showDateTime = event.date && event.date.trim() !== "";
241242

242243
return (
243-
<div key={event.id} className="flex items-start gap-4">
244+
<div key={event.id} className="relative flex items-start space-x-4">
245+
{/* Timeline Line */}
246+
{!isLastEvent && (
247+
<div className="absolute left-5 top-10 w-0.5 h-8 bg-gray-200 dark:bg-zinc-700"></div>
248+
)}
249+
250+
{/* Status Icon */}
244251
<div className="flex-shrink-0">
245252
<div
246253
className={`w-10 h-10 rounded-full border-2 flex items-center justify-center transition-all duration-300 ${
247254
event.completed
248255
? `${bgColor} border-current shadow-lg`
249-
: "bg-zinc-700 border-zinc-600"
256+
: "bg-gray-200 dark:bg-zinc-700 border-gray-300 dark:border-zinc-600"
250257
} ${
251258
event.isFixed && !event.completed
252-
? "ring-2 ring-zinc-500 ring-opacity-50"
259+
? "ring-2 ring-gray-300 dark:ring-zinc-500 ring-opacity-50"
253260
: ""
254261
}`}
255262
>
256263
<div
257264
className={`transition-colors duration-300 ${
258-
event.completed ? "text-white" : "text-zinc-400"
265+
event.completed
266+
? "text-white"
267+
: "text-gray-400 dark:text-zinc-400"
259268
}`}
260269
>
261270
{statusIcon}
262271
</div>
263272
</div>
264-
265-
{/* Timeline connector line */}
266-
{index < timeline.length - 1 && (
267-
<div
268-
className={`w-0.5 h-8 mx-auto mt-2 transition-colors duration-300 ${
269-
event.completed
270-
? bgColor.replace("bg-", "bg-")
271-
: "bg-zinc-700"
272-
}`}
273-
/>
274-
)}
275273
</div>
276274

275+
{/* Event Content */}
277276
<div className="flex-1 pb-6">
278277
<div className="flex items-start justify-between">
279278
<div className="flex-1">
280279
<h4
281-
className={`font-semibold mb-1 text-lg transition-colors duration-300 ${
282-
event.completed ? "text-white" : "text-zinc-400"
283-
} ${event.isFixed ? "font-bold" : ""}`}
280+
className={`text-lg font-semibold transition-colors duration-300 ${
281+
event.completed
282+
? "text-gray-900 dark:text-white"
283+
: "text-gray-600 dark:text-gray-300"
284+
}`}
284285
>
285286
{event.title}
286287
</h4>
287288

288-
<p className="text-zinc-400 text-sm mb-2 flex items-center gap-1">
289-
<MapPin className="w-3 h-3" />
290-
{event.location}
291-
</p>
289+
{event.location && (
290+
<p className="text-sm text-gray-600 dark:text-gray-300 flex items-center mt-1">
291+
<MapPin className="w-4 h-4 mr-1" />
292+
{event.location}
293+
</p>
294+
)}
292295

293-
{/* Date and time display */}
296+
{/* Show date and time for completed and current events */}
294297
{showDateTime && (
295-
<p className="text-zinc-500 text-sm">
298+
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
296299
{event.date}
297-
{event.time &&
298-
event.time.trim() !== "" &&
299-
` at ${event.time}`}
300+
{event.time && ` at ${event.time}`}
300301
</p>
301302
)}
302303

303304
{/* Show status for pending items without dates */}
304305
{!showDateTime && !event.completed && (
305-
<p className="text-zinc-500 text-sm italic">
306+
<p className="text-gray-500 dark:text-gray-400 text-sm italic mt-1">
306307
{event.status === "delivered"
307308
? "Awaiting delivery..."
308309
: "Processing..."}
@@ -313,10 +314,10 @@ const TimelineComponent: React.FC<TimelineComponentProps> = ({ shipment }) => {
313314
{/* Status indicator for fixed events */}
314315
{event.isFixed && (
315316
<div
316-
className={`px-2 py-1 rounded-full text-xs font-medium ${
317+
className={`px-3 py-1 rounded-full text-xs font-medium ${
317318
event.completed
318-
? "bg-green-900/30 text-green-400 border border-green-800"
319-
: "bg-zinc-700/50 text-zinc-400 border border-zinc-600"
319+
? "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 border border-green-200 dark:border-green-800"
320+
: "bg-gray-100 dark:bg-zinc-700/50 text-gray-600 dark:text-zinc-400 border border-gray-200 dark:border-zinc-600"
320321
}`}
321322
>
322323
{event.completed ? "Completed" : "Pending"}
@@ -330,15 +331,15 @@ const TimelineComponent: React.FC<TimelineComponentProps> = ({ shipment }) => {
330331
</div>
331332

332333
{/* Timeline Summary */}
333-
<div className="mt-8 p-4 bg-zinc-800/30 border border-zinc-700 rounded-lg">
334+
<div className="mt-8 p-4 bg-gray-50 dark:bg-zinc-800/30 border border-gray-200 dark:border-zinc-700 rounded-lg">
334335
<div className="flex justify-between items-center text-sm">
335-
<span className="text-zinc-400">
336+
<span className="text-gray-600 dark:text-zinc-400">
336337
Total Updates: {timeline.length - 2}{" "}
337338
{/* Exclude fixed pending/delivery */}
338339
</span>
339-
<span className="text-zinc-400">
340+
<span className="text-gray-600 dark:text-zinc-400">
340341
Status:{" "}
341-
<span className="text-white font-medium capitalize">
342+
<span className="text-gray-900 dark:text-white font-medium capitalize">
342343
{shipment.status}
343344
</span>
344345
</span>

‎client/src/App.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@ import "./App.css";
22
import { Outlet } from "react-router-dom";
33
import Header from "./components/Header";
44
import Footer from "./components/Footer";
5+
56
function App() {
67
return (
7-
<>
8+
<div className="min-h-screen bg-white dark:bg-zinc-900 transition-colors">
89
<Header />
910
<Outlet />
1011
<Footer />
11-
</>
12+
</div>
1213
);
1314
}
1415

‎client/src/components/Footer.tsx‎

Lines changed: 141 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,146 @@
1+
import React from "react";
2+
import { Link } from "react-router-dom";
3+
import {
4+
Package,
5+
Phone,
6+
Mail,
7+
MapPin,
8+
Facebook,
9+
Twitter,
10+
Instagram,
11+
Linkedin,
12+
} from "lucide-react";
13+
114
const Footer = () => {
215
return (
3-
<footer className="border-t border-black/10">
4-
<div className="container mx-auto px-4 py-10 text-sm text-neutral-600 flex flex-col md:flex-row gap-4 md:items-center md:justify-between">
5-
<p>© {new Date().getFullYear()} Aegis Express Logistics</p>
6-
<p className="opacity-80">Fast. Transparent. Global.</p>
16+
<footer className="bg-gray-900 text-white">
17+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
18+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
19+
{/* Company Info */}
20+
<div>
21+
<Link to="/" className="flex items-center space-x-3 mb-6">
22+
<div className="bg-blue-600 p-2 rounded-lg">
23+
<Package className="h-8 w-8 text-white" />
24+
</div>
25+
<div>
26+
<h1 className="text-xl font-bold">Aegis Express</h1>
27+
<p className="text-sm text-gray-300">Logistics</p>
28+
</div>
29+
</Link>
30+
<p className="text-gray-300 mb-4">
31+
Your trusted partner for fast, reliable, and secure logistics
32+
solutions worldwide.
33+
</p>
34+
<div className="flex space-x-4">
35+
<Facebook className="h-5 w-5 text-gray-400 hover:text-white cursor-pointer transition-colors" />
36+
<Twitter className="h-5 w-5 text-gray-400 hover:text-white cursor-pointer transition-colors" />
37+
<Instagram className="h-5 w-5 text-gray-400 hover:text-white cursor-pointer transition-colors" />
38+
<Linkedin className="h-5 w-5 text-gray-400 hover:text-white cursor-pointer transition-colors" />
39+
</div>
40+
</div>
41+
42+
{/* Quick Links */}
43+
<div>
44+
<h3 className="text-lg font-semibold mb-4">Quick Links</h3>
45+
<ul className="space-y-2">
46+
<li>
47+
<Link
48+
to="/about"
49+
className="text-gray-300 hover:text-white transition-colors"
50+
>
51+
About Us
52+
</Link>
53+
</li>
54+
<li>
55+
<Link
56+
to="/services"
57+
className="text-gray-300 hover:text-white transition-colors"
58+
>
59+
Services
60+
</Link>
61+
</li>
62+
<li>
63+
<Link
64+
to="/track"
65+
className="text-gray-300 hover:text-white transition-colors"
66+
>
67+
Track Package
68+
</Link>
69+
</li>
70+
<li>
71+
<Link
72+
to="/contact"
73+
className="text-gray-300 hover:text-white transition-colors"
74+
>
75+
Contact
76+
</Link>
77+
</li>
78+
</ul>
79+
</div>
80+
81+
{/* Services */}
82+
<div>
83+
<h3 className="text-lg font-semibold mb-4">Services</h3>
84+
<ul className="space-y-2">
85+
<li className="text-gray-300">Domestic Delivery</li>
86+
<li className="text-gray-300">International Shipping</li>
87+
<li className="text-gray-300">Express Delivery</li>
88+
<li className="text-gray-300">Freight Services</li>
89+
<li className="text-gray-300">Warehousing</li>
90+
</ul>
91+
</div>
92+
93+
{/* Contact Info */}
94+
<div>
95+
<h3 className="text-lg font-semibold mb-4">Contact Info</h3>
96+
<div className="space-y-3">
97+
<div className="flex items-center space-x-2">
98+
<Phone className="h-4 w-4 text-blue-400" />
99+
<span className="text-gray-300">+1 (555) 123-4567</span>
100+
</div>
101+
<div className="flex items-center space-x-2">
102+
<Mail className="h-4 w-4 text-blue-400" />
103+
<span className="text-gray-300">info@aegislogistics.com</span>
104+
</div>
105+
<div className="flex items-start space-x-2">
106+
<MapPin className="h-4 w-4 text-blue-400 mt-1" />
107+
<span className="text-gray-300">
108+
123 Logistics Ave
109+
<br />
110+
New York, NY 10001
111+
</span>
112+
</div>
113+
</div>
114+
</div>
115+
</div>
116+
117+
<div className="border-t border-gray-700 mt-8 pt-8">
118+
<div className="flex flex-col md:flex-row justify-between items-center">
119+
<p className="text-gray-300 text-sm">
120+
© 2025 Aegis Express Logistics. All rights reserved.
121+
</p>
122+
<div className="flex space-x-6 mt-4 md:mt-0">
123+
<a
124+
href="#"
125+
className="text-gray-300 hover:text-white text-sm transition-colors"
126+
>
127+
Privacy Policy
128+
</a>
129+
<a
130+
href="#"
131+
className="text-gray-300 hover:text-white text-sm transition-colors"
132+
>
133+
Terms of Service
134+
</a>
135+
<a
136+
href="#"
137+
className="text-gray-300 hover:text-white text-sm transition-colors"
138+
>
139+
Cookie Policy
140+
</a>
141+
</div>
142+
</div>
143+
</div>
7144
</div>
8145
</footer>
9146
);

0 commit comments

Comments
 (0)