Skip to content

Commit a3869e3

Browse files
RabbitDaCoderRabbitDaCoder
committed
feat: enhance UI components and improve accessibility
- Updated DatePickerDemo component for better styling and accessibility. - Refined SiteHeader for improved layout and responsiveness. - Adjusted Avatar component for consistent sizing. - Enhanced Button component with improved shadow and hover effects. - Modified Checkbox and Input components for better sizing and usability. - Cleaned up Sidebar component for better layout and responsiveness. - Redesigned About and Contact pages for improved user experience. - Refactored Track page to streamline tracking number input and submission. - Added vercel.json for deployment configuration.
1 parent 9ae43ca commit a3869e3

34 files changed

+1046
-825
lines changed

‎NETLIFY_DEPLOY_GUIDE.md‎

Whitespace-only changes.

‎NETLIFY_ENV_VARS.txt‎

Whitespace-only changes.

‎VERCEL_ENV_VARS.txt‎

Whitespace-only changes.

‎api/controllers/invoice.controller_new.js‎

Whitespace-only changes.

‎api/services/emailService_new.js‎

Whitespace-only changes.

‎api/services/pdfService.js‎

Whitespace-only changes.

‎api/services/pdfService_new.js‎

Whitespace-only changes.

‎client/src/Admin/AdminLayout.tsx‎

Lines changed: 52 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,71 @@
1-
import { Outlet } from "react-router-dom";
1+
import { Outlet, useLocation } from "react-router-dom";
22
import {
33
Sidebar,
44
SidebarContent,
55
SidebarFooter,
66
SidebarHeader,
77
SidebarProvider,
88
SidebarSeparator,
9+
useSidebar,
910
} from "@/components/ui/sidebar";
1011
import { NavMain } from "@/components/nav-main";
1112
import { NavDocuments } from "@/components/nav-documents";
1213

1314
import { data } from "./stores/api";
1415
import { SiteHeader } from "@/components/site-header";
16+
import { useEffect } from "react";
17+
18+
const AdminLayoutContent = () => {
19+
const { pathname } = useLocation();
20+
const { setOpenMobile, isMobile } = useSidebar();
21+
22+
useEffect(() => {
23+
window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
24+
// Close mobile sidebar on route change
25+
if (isMobile) {
26+
setOpenMobile(false);
27+
}
28+
}, [pathname, isMobile, setOpenMobile]);
29+
30+
return (
31+
<div className="flex min-h-screen w-full overflow-hidden">
32+
<Sidebar
33+
variant="sidebar"
34+
collapsible="offcanvas"
35+
className="bg-zinc-800 text-zinc-900 dark:text-zinc-100"
36+
>
37+
<SidebarHeader className="py-3 bg-zinc-200 dark:bg-zinc-900">
38+
<h2 className="text-lg sm:text-xl font-bold dark:text-zinc-100">
39+
AegisExpress's Admin
40+
</h2>
41+
</SidebarHeader>
42+
<SidebarSeparator className="mx-1 border border-zinc-300 dark:border-zinc-700" />
43+
44+
<SidebarContent>
45+
<NavMain items={data.navMain} />
46+
<NavDocuments items={data.shipments} />
47+
</SidebarContent>
48+
49+
<SidebarFooter>
50+
<p className="text-xs text-zinc-500 dark:text-zinc-400">
51+
© 2025 AegisExpress
52+
</p>
53+
</SidebarFooter>
54+
</Sidebar>
55+
<div className="flex-1 flex flex-col min-w-0 w-full">
56+
<SiteHeader />
57+
<main className="flex-1 p-3 sm:p-6 overflow-x-hidden">
58+
<Outlet />
59+
</main>
60+
</div>
61+
</div>
62+
);
63+
};
64+
1565
const AdminLayout = () => {
1666
return (
1767
<SidebarProvider defaultOpen={true}>
18-
<div className="flex min-h-screen w-full">
19-
<Sidebar
20-
variant="sidebar"
21-
collapsible="offcanvas"
22-
className="bg-zinc-800 text-zinc-900 dark:text-zinc-100"
23-
>
24-
<SidebarHeader className="py-3 bg-zinc-200 dark:bg-zinc-900">
25-
<h2 className="text-xl font-bold dark:text-zinc-100">
26-
AegisExpress's Admin
27-
</h2>
28-
</SidebarHeader>
29-
<SidebarSeparator className="mx-1 border border-zinc-300 dark:border-zinc-700" />
30-
31-
<SidebarContent>
32-
<NavMain items={data.navMain} />
33-
<NavDocuments items={data.shipments} />
34-
</SidebarContent>
35-
36-
<SidebarFooter>
37-
<p className="text-xs text-zinc-500 dark:text-zinc-400">
38-
© 2025 AegisExpress
39-
</p>
40-
</SidebarFooter>
41-
</Sidebar>
42-
<div className="flex-1 w-full h-full">
43-
<SiteHeader />
44-
<main>
45-
<Outlet />
46-
</main>
47-
</div>
48-
</div>
68+
<AdminLayoutContent />
4969
</SidebarProvider>
5070
);
5171
};

‎client/src/Admin/auth/Login.tsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -28,36 +28,36 @@ export default function LoginPage() {
2828

2929
return (
3030
<div className="grid min-h-screen lg:grid-cols-2 bg-zinc-50 dark:bg-zinc-900">
31-
<div className="flex flex-col gap-6 py-8 px-6 md:p-12 bg-white dark:bg-zinc-900">
32-
<div className="flex justify-center gap-3 md:justify-start">
33-
<div className="flex items-center gap-3">
34-
<div className="bg-zinc-700 dark:bg-zinc-600 text-white flex size-8 items-center justify-center rounded-lg">
35-
<GalleryVerticalEnd className="size-5" />
31+
<div className="flex flex-col gap-4 sm:gap-6 py-6 sm:py-8 px-4 sm:px-6 md:p-12 bg-white dark:bg-zinc-900">
32+
<div className="flex justify-center gap-2 sm:gap-3 md:justify-start">
33+
<div className="flex items-center gap-2 sm:gap-3">
34+
<div className="bg-zinc-700 dark:bg-zinc-600 text-white flex size-7 sm:size-8 items-center justify-center rounded-lg">
35+
<GalleryVerticalEnd className="size-4 sm:size-5" />
3636
</div>
37-
<span className="font-bold text-xl text-zinc-900 dark:text-zinc-100">
37+
<span className="font-bold text-lg sm:text-xl text-zinc-900 dark:text-zinc-100">
3838
AegisExpress
3939
</span>
4040
<Badge
4141
variant="secondary"
42-
className="bg-zinc-200 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300"
42+
className="bg-zinc-200 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 text-xs sm:text-sm"
4343
>
4444
Admin
4545
</Badge>
4646
</div>
4747
</div>
4848

49-
<div className="flex flex-1 items-center lg:justify-center lg:flex-row lg:py-4 justify-start flex-col py-20">
49+
<div className="flex flex-1 items-center lg:justify-center lg:flex-row lg:py-4 justify-start flex-col py-12 sm:py-20">
5050
<div className="w-full max-w-md mx-auto">
5151
<Card className="border-zinc-200 dark:border-zinc-800 bg-white/50 dark:bg-zinc-800/50 backdrop-blur-sm shadow-xl">
52-
<CardContent className="p-8">
53-
<div className="text-center mb-8">
54-
<div className="w-16 h-16 bg-zinc-700 dark:bg-zinc-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
55-
<Shield className="w-8 h-8 text-white" />
52+
<CardContent className="p-6 sm:p-8">
53+
<div className="text-center mb-6 sm:mb-8">
54+
<div className="w-12 sm:w-16 h-12 sm:h-16 bg-zinc-700 dark:bg-zinc-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
55+
<Shield className="w-6 sm:w-8 h-6 sm:h-8 text-white" />
5656
</div>
57-
<h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-2">
57+
<h1 className="text-xl sm:text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-2">
5858
Admin Portal
5959
</h1>
60-
<p className="text-zinc-600 dark:text-zinc-400">
60+
<p className="text-zinc-600 dark:text-zinc-400 text-sm sm:text-base">
6161
Secure access to logistics management
6262
</p>
6363
</div>
@@ -84,12 +84,12 @@ export default function LoginPage() {
8484
alt="Logistics Operations"
8585
className="absolute inset-0 h-full w-full object-cover opacity-80 dark:opacity-60"
8686
/>
87-
<div className="absolute bottom-8 left-8 right-8">
88-
<div className="bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-xl p-6 border border-zinc-200/50 dark:border-zinc-700/50">
89-
<h2 className="text-xl font-bold text-zinc-900 dark:text-zinc-100 mb-2">
87+
<div className="absolute bottom-6 sm:bottom-8 left-6 sm:left-8 right-6 sm:right-8">
88+
<div className="bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-xl p-4 sm:p-6 border border-zinc-200/50 dark:border-zinc-700/50">
89+
<h2 className="text-lg sm:text-xl font-bold text-zinc-900 dark:text-zinc-100 mb-2">
9090
Logistics Management Portal
9191
</h2>
92-
<p className="text-zinc-600 dark:text-zinc-400">
92+
<p className="text-zinc-600 dark:text-zinc-400 text-sm sm:text-base">
9393
Comprehensive tools for tracking, managing, and optimizing your
9494
shipping operations.
9595
</p>

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

Lines changed: 47 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -115,41 +115,41 @@ function AllShipments() {
115115

116116
return (
117117
<div className="min-h-full w-full max-w-full bg-white text-zinc-900 dark:bg-zinc-900 dark:text-white">
118-
<div className="container mx-auto px-2 py-6">
118+
<div className="container mx-auto px-2 sm:px-4 py-3 sm:py-6">
119119
{/* Beautiful Custom Header */}
120-
<div className="relative mb-10">
120+
<div className="relative mb-6 sm:mb-10">
121121
{/* Background decoration */}
122122
<div className="absolute inset-0 bg-gradient-to-br from-zinc-100/60 to-zinc-200/60 dark:from-zinc-800/40 dark:to-zinc-700/40 rounded-2xl"></div>
123-
<div className="absolute top-6 right-6 w-20 h-20 bg-zinc-300/20 dark:bg-zinc-600/20 rounded-full blur-2xl"></div>
124-
<div className="absolute bottom-6 left-6 w-16 h-16 bg-zinc-400/15 dark:bg-zinc-500/15 rounded-full blur-xl"></div>
123+
<div className="absolute top-3 sm:top-6 right-3 sm:right-6 w-12 sm:w-20 h-12 sm:h-20 bg-zinc-300/20 dark:bg-zinc-600/20 rounded-full blur-2xl"></div>
124+
<div className="absolute bottom-3 sm:bottom-6 left-3 sm:left-6 w-10 sm:w-16 h-10 sm:h-16 bg-zinc-400/15 dark:bg-zinc-500/15 rounded-full blur-xl"></div>
125125

126126
{/* Main header container */}
127127
<div className="relative bg-white/85 dark:bg-zinc-800/85 backdrop-blur-sm border border-zinc-200/60 dark:border-zinc-700/60 rounded-2xl shadow-xl overflow-hidden">
128-
<div className="px-8 py-8">
129-
<div className="flex items-start justify-between">
130-
<div className="flex items-start gap-6">
131-
<div className="w-16 h-16 bg-gradient-to-br from-zinc-700 via-zinc-800 to-zinc-900 dark:from-zinc-600 dark:via-zinc-700 dark:to-zinc-800 rounded-2xl flex items-center justify-center shadow-2xl">
132-
<Package className="w-8 h-8 text-white" />
128+
<div className="px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
129+
<div className="flex flex-col lg:flex-row items-start justify-between gap-4 lg:gap-0">
130+
<div className="flex flex-col sm:flex-row items-start gap-3 sm:gap-6 w-full lg:w-auto">
131+
<div className="w-12 sm:w-14 lg:w-16 h-12 sm:h-14 lg:h-16 bg-gradient-to-br from-zinc-700 via-zinc-800 to-zinc-900 dark:from-zinc-600 dark:via-zinc-700 dark:to-zinc-800 rounded-2xl flex items-center justify-center shadow-2xl">
132+
<Package className="w-6 sm:w-7 lg:w-8 h-6 sm:h-7 lg:h-8 text-white" />
133133
</div>
134-
<div className="space-y-2">
135-
<h1 className="text-4xl font-bold bg-gradient-to-r from-zinc-900 to-zinc-700 dark:from-zinc-100 dark:to-zinc-300 bg-clip-text text-transparent">
134+
<div className="space-y-2 flex-1 min-w-0">
135+
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold bg-gradient-to-r from-zinc-900 to-zinc-700 dark:from-zinc-100 dark:to-zinc-300 bg-clip-text text-transparent">
136136
All Shipments
137137
</h1>
138-
<p className="text-zinc-600 dark:text-zinc-400 text-lg leading-relaxed max-w-2xl">
138+
<p className="text-zinc-600 dark:text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">
139139
Manage and track all shipments across your logistics
140140
network with real-time updates
141141
</p>
142-
<div className="flex items-center gap-4 mt-4">
142+
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4 mt-4">
143143
<div className="flex items-center gap-2">
144144
<Users className="w-4 h-4 text-zinc-500 dark:text-zinc-400" />
145-
<span className="text-sm text-zinc-600 dark:text-zinc-400 font-medium">
145+
<span className="text-xs sm:text-sm text-zinc-600 dark:text-zinc-400 font-medium">
146146
{filteredShipments.length} Active Shipments
147147
</span>
148148
</div>
149149
<div className="flex items-center gap-2">
150150
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
151-
<span className="text-sm text-zinc-600 dark:text-zinc-400 font-medium">
152-
Live Tracking
151+
<span className="text-xs sm:text-sm text-zinc-500 dark:text-zinc-400 font-medium">
152+
Live Updates
153153
</span>
154154
</div>
155155
</div>
@@ -159,7 +159,7 @@ function AllShipments() {
159159
<div className="flex flex-col gap-3">
160160
<button
161161
onClick={handleRefresh}
162-
className="flex items-center gap-2 px-5 py-3 bg-gradient-to-r from-zinc-700 to-zinc-800 hover:from-zinc-800 hover:to-zinc-900 dark:from-zinc-600 dark:to-zinc-700 dark:hover:from-zinc-700 dark:hover:to-zinc-800 text-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 font-medium"
162+
className="flex items-center gap-2 w-full max-w-60 px-3 py-3 bg-gradient-to-r from-zinc-700 to-zinc-800 hover:from-zinc-800 hover:to-zinc-900 dark:from-zinc-600 dark:to-zinc-700 dark:hover:from-zinc-700 dark:hover:to-zinc-800 text-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 font-medium"
163163
>
164164
<RefreshCw size={18} />
165165
<span>Refresh Data</span>
@@ -176,10 +176,10 @@ function AllShipments() {
176176
</div>
177177

178178
{/* Enhanced Search and Filters */}
179-
<div className="relative mb-8">
179+
<div className="relative mb-6 sm:mb-8">
180180
<div className="absolute inset-0 bg-gradient-to-r from-zinc-50 to-zinc-100 dark:from-zinc-900 dark:to-zinc-800 rounded-xl"></div>
181181
<div className="relative bg-white/70 dark:bg-zinc-800/70 backdrop-blur-sm border border-zinc-200/50 dark:border-zinc-700/50 rounded-xl shadow-md overflow-hidden">
182-
<div className="p-6">
182+
<div className="p-4 sm:p-6">
183183
<SearchAndFilters
184184
searchTerm={searchTerm}
185185
setSearchTerm={setSearchTerm}
@@ -196,36 +196,38 @@ function AllShipments() {
196196
<div className="relative">
197197
{/* Background decoration */}
198198
<div className="absolute inset-0 bg-gradient-to-br from-zinc-50/80 to-zinc-100/80 dark:from-zinc-900/50 dark:to-zinc-800/50 rounded-2xl"></div>
199-
<div className="absolute top-8 left-8 w-24 h-24 bg-zinc-200/30 dark:bg-zinc-700/30 rounded-full blur-2xl"></div>
200-
<div className="absolute bottom-8 right-8 w-20 h-20 bg-zinc-300/20 dark:bg-zinc-600/20 rounded-full blur-xl"></div>
199+
<div className="absolute top-4 sm:top-8 left-4 sm:left-8 w-16 sm:w-24 h-16 sm:h-24 bg-zinc-200/30 dark:bg-zinc-700/30 rounded-full blur-2xl"></div>
200+
<div className="absolute bottom-4 sm:bottom-8 right-4 sm:right-8 w-16 sm:w-20 h-16 sm:h-20 bg-zinc-300/20 dark:bg-zinc-600/20 rounded-full blur-xl"></div>
201201

202202
{/* Main content container */}
203203
<div className="relative bg-white/60 dark:bg-zinc-800/60 backdrop-blur-sm border border-zinc-200/50 dark:border-zinc-700/50 rounded-2xl shadow-lg overflow-hidden">
204204
{/* Section Header */}
205-
<div className="px-8 py-6 bg-gradient-to-r from-zinc-50/80 via-zinc-100/80 to-zinc-50/80 dark:from-zinc-800/80 dark:via-zinc-700/80 dark:to-zinc-800/80 border-b border-zinc-200/50 dark:border-zinc-600/50">
206-
<div className="flex items-center gap-3">
207-
<div className="w-10 h-10 bg-zinc-700 dark:bg-zinc-600 rounded-xl flex items-center justify-center">
208-
<Grid className="w-5 h-5 text-white" />
209-
</div>
210-
<div>
211-
<h2 className="text-xl font-bold text-zinc-900 dark:text-zinc-100">
212-
Shipment Overview
213-
</h2>
214-
<p className="text-zinc-600 dark:text-zinc-400 text-sm">
215-
Interactive card view of all active shipments
216-
</p>
205+
<div className="px-4 sm:px-6 lg:px-8 py-4 sm:py-6 bg-gradient-to-r from-zinc-50/80 via-zinc-100/80 to-zinc-50/80 dark:from-zinc-800/80 dark:via-zinc-700/80 dark:to-zinc-800/80 border-b border-zinc-200/50 dark:border-zinc-600/50">
206+
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-0">
207+
<div className="flex items-center gap-3">
208+
<div className="w-8 sm:w-10 h-8 sm:h-10 bg-zinc-700 dark:bg-zinc-600 rounded-xl flex items-center justify-center">
209+
<Grid className="w-4 sm:w-5 h-4 sm:h-5 text-white" />
210+
</div>
211+
<div>
212+
<h2 className="text-lg sm:text-xl font-bold text-zinc-900 dark:text-zinc-100">
213+
Shipment Overview
214+
</h2>
215+
<p className="text-zinc-600 dark:text-zinc-400 text-xs sm:text-sm">
216+
Interactive card view of all active shipments
217+
</p>
218+
</div>
217219
</div>
218220
<div className="ml-auto flex items-center gap-2">
219-
<div className="px-3 py-1 bg-zinc-700 dark:bg-zinc-600 text-white rounded-full text-xs font-medium">
221+
<div className="px-2 sm:px-3 py-1 bg-zinc-700 dark:bg-zinc-600 text-white rounded-full text-xs font-medium">
220222
{visibleShipments.length} Displayed
221223
</div>
222224
</div>
223225
</div>
224226
</div>
225227

226228
{/* Cards Grid */}
227-
<div className="p-8">
228-
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8">
229+
<div className="p-3 sm:p-4 lg:p-6">
230+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 gap-3 sm:gap-4 lg:gap-6">
229231
<SectionCards />
230232
{visibleShipments.map((shipment) => (
231233
<ShipmentCard
@@ -237,14 +239,14 @@ function AllShipments() {
237239

238240
{/* Enhanced Load More Button */}
239241
{visibleCount < filteredShipments.length && (
240-
<div className="flex justify-center mt-10">
242+
<div className="flex justify-center mt-6 sm:mt-8 lg:mt-10">
241243
<div className="relative">
242244
<div className="absolute inset-0 bg-gradient-to-r from-zinc-700/20 to-zinc-900/20 rounded-xl blur-lg"></div>
243245
<button
244246
onClick={handleLoadMore}
245-
className="relative inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-zinc-700 via-zinc-800 to-zinc-900 dark:from-zinc-600 dark:via-zinc-700 dark:to-zinc-800 text-white rounded-xl shadow-2xl hover:shadow-zinc-500/25 hover:scale-105 transition-all duration-300 font-semibold text-lg"
247+
className="relative inline-flex items-center gap-2 sm:gap-3 px-6 sm:px-8 py-3 sm:py-4 bg-gradient-to-r from-zinc-700 via-zinc-800 to-zinc-900 dark:from-zinc-600 dark:via-zinc-700 dark:to-zinc-800 text-white rounded-xl shadow-2xl hover:shadow-zinc-500/25 hover:scale-105 transition-all duration-300 font-semibold text-base sm:text-lg"
246248
>
247-
<PlusCircle className="w-6 h-6" />
249+
<PlusCircle className="w-5 sm:w-6 h-5 sm:h-6" />
248250
<span>Load More Shipments</span>
249251
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent rounded-xl opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
250252
</button>
@@ -258,15 +260,17 @@ function AllShipments() {
258260

259261
{/* Table View */}
260262
{viewMode === "table" && (
261-
<div className="w-full mt-6">
262-
<div className="inline-block w-[300px] min-w-full align-middle">
263-
<DataTable data={filteredShipments.map(transformToTableData)} />
263+
<div className="w-full mt-4 sm:mt-6">
264+
<div className="inline-block w-full min-w-full align-middle">
265+
<div className="overflow-x-auto">
266+
<DataTable data={filteredShipments.map(transformToTableData)} />
267+
</div>
264268
</div>
265269
</div>
266270
)}
267271

268272
{filteredShipments.length === 0 && (
269-
<div className="py-12">
273+
<div className="py-8 sm:py-12">
270274
<NoDataUI
271275
title="No Shipments Found"
272276
message="We couldn't find any shipments matching your search or filters."

0 commit comments

Comments
 (0)