mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-29 01:20:55 +00:00
style: clean up on custom portal
This commit is contained in:
ghost2023
@@ -84,13 +84,19 @@ export default function MyPortalPage() {
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Link to="/bookings/new">
|
||||
<Button variant="secondary" className="bg-white text-[#10B981] hover:bg-slate-100">
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="bg-white text-[#10B981] hover:bg-slate-100"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
New Booking
|
||||
</Button>
|
||||
</Link>
|
||||
<Link to="/tracking">
|
||||
<Button variant="outline" className="border-white/40 text-white hover:bg-white/10">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-white/40 text-white hover:bg-white/10"
|
||||
>
|
||||
<Truck className="h-4 w-4" />
|
||||
Track Shipment
|
||||
</Button>
|
||||
@@ -99,83 +105,6 @@ export default function MyPortalPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* My KPIs */}
|
||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
||||
<Card>
|
||||
<CardContent className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">Active Bookings</p>
|
||||
<h3 className="mt-2 text-3xl font-bold text-slate-900">
|
||||
{activeBookings.length}
|
||||
</h3>
|
||||
<p className="mt-1 text-xs text-slate-500">
|
||||
{myBookings.length} total
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
|
||||
<Package />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">In Transit</p>
|
||||
<h3 className="mt-2 text-3xl font-bold text-slate-900">
|
||||
{activeShipments.length}
|
||||
</h3>
|
||||
<p className="mt-1 text-xs text-slate-500">
|
||||
{myShipments.length} shipments
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
|
||||
<Truck />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">Outstanding</p>
|
||||
<h3 className="mt-2 text-3xl font-bold text-slate-900">
|
||||
{formatCurrency(totalOutstanding, "USD")}
|
||||
</h3>
|
||||
<p className="mt-1 text-xs text-slate-500">
|
||||
{outstandingInvoices.length} invoices
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={`flex h-12 w-12 items-center justify-center rounded-2xl ${
|
||||
outstandingInvoices.some((i) => i.status === "Overdue")
|
||||
? "bg-red-100 text-red-600"
|
||||
: "bg-primary/10 text-primary"
|
||||
}`}
|
||||
>
|
||||
<DollarSign />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">Total Spent</p>
|
||||
<h3 className="mt-2 text-3xl font-bold text-slate-900">
|
||||
{formatCurrency(totalSpent, "USD")}
|
||||
</h3>
|
||||
<p className="mt-1 text-xs text-slate-500">
|
||||
All-time, paid invoices
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
|
||||
<CheckCircle2 />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Active Shipments */}
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
@@ -237,119 +166,76 @@ export default function MyPortalPage() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Recent Bookings + Profile */}
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
{/* Recent bookings */}
|
||||
<Card className="lg:col-span-2">
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>Recent Bookings</CardTitle>
|
||||
<CardDescription>
|
||||
Your latest freight requests
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Link
|
||||
to="/bookings"
|
||||
className="inline-flex items-center gap-1 text-sm font-medium text-primary transition hover:underline"
|
||||
>
|
||||
View all
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Link>
|
||||
</CardHeader>
|
||||
{/* Recent bookings */}
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>Recent Bookings</CardTitle>
|
||||
<CardDescription>Your latest freight requests</CardDescription>
|
||||
</div>
|
||||
<Link
|
||||
to="/bookings"
|
||||
className="inline-flex items-center gap-1 text-sm font-medium text-primary transition hover:underline"
|
||||
>
|
||||
View all
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Link>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="px-0">
|
||||
{recentBookings.length === 0 ? (
|
||||
<p className="rounded-2xl border border-dashed border-slate-200 p-8 text-center text-sm text-slate-500">
|
||||
You haven't booked any freight yet.
|
||||
</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[600px] whitespace-nowrap text-left text-sm">
|
||||
<thead className="text-xs text-slate-500">
|
||||
<tr>
|
||||
<th className="px-6 py-2 font-medium">Reference</th>
|
||||
<th className="py-2 font-medium">Route</th>
|
||||
<th className="py-2 font-medium">Cargo</th>
|
||||
<th className="py-2 font-medium">Status</th>
|
||||
<th className="px-6 py-2 text-right font-medium">Action</th>
|
||||
<CardContent className="px-0">
|
||||
{recentBookings.length === 0 ? (
|
||||
<p className="rounded-2xl border border-dashed border-slate-200 p-8 text-center text-sm text-slate-500">
|
||||
You haven't booked any freight yet.
|
||||
</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[600px] whitespace-nowrap text-left text-sm">
|
||||
<thead className="text-xs text-slate-500">
|
||||
<tr>
|
||||
<th className="px-6 py-2 font-medium">Reference</th>
|
||||
<th className="py-2 font-medium">Route</th>
|
||||
<th className="py-2 font-medium">Cargo</th>
|
||||
<th className="py-2 font-medium">Status</th>
|
||||
<th className="px-6 py-2 text-right font-medium">
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{recentBookings.map((booking) => (
|
||||
<tr
|
||||
key={booking.id}
|
||||
className="border-t border-slate-100 transition hover:bg-primary/5"
|
||||
>
|
||||
<td className="px-6 py-3 font-medium text-slate-900">
|
||||
{booking.reference}
|
||||
</td>
|
||||
<td className="py-3 text-slate-700">
|
||||
{booking.originStation} → {booking.destinationStation}
|
||||
</td>
|
||||
<td className="py-3 text-slate-700">
|
||||
{booking.cargoType}
|
||||
</td>
|
||||
<td className="py-3">
|
||||
<BookingBadge status={booking.status} />
|
||||
</td>
|
||||
<td className="px-6 py-3 text-right">
|
||||
<Link
|
||||
to={`/bookings/${booking.id}`}
|
||||
aria-label="View booking"
|
||||
className="inline-flex h-7 w-7 items-center justify-center rounded-lg text-slate-500 transition hover:bg-primary/10 hover:text-primary"
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{recentBookings.map((booking) => (
|
||||
<tr
|
||||
key={booking.id}
|
||||
className="border-t border-slate-100 transition hover:bg-primary/5"
|
||||
>
|
||||
<td className="px-6 py-3 font-medium text-slate-900">
|
||||
{booking.reference}
|
||||
</td>
|
||||
<td className="py-3 text-slate-700">
|
||||
{booking.originStation} → {booking.destinationStation}
|
||||
</td>
|
||||
<td className="py-3 text-slate-700">
|
||||
{booking.cargoType}
|
||||
</td>
|
||||
<td className="py-3">
|
||||
<BookingBadge status={booking.status} />
|
||||
</td>
|
||||
<td className="px-6 py-3 text-right">
|
||||
<Link
|
||||
to={`/bookings/${booking.id}`}
|
||||
aria-label="View booking"
|
||||
className="inline-flex h-7 w-7 items-center justify-center rounded-lg text-slate-500 transition hover:bg-primary/10 hover:text-primary"
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Profile card */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>My Profile</CardTitle>
|
||||
<CardDescription>Account information</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3 text-sm">
|
||||
<ProfileRow
|
||||
icon={<Building2 className="h-4 w-4" />}
|
||||
label="Company"
|
||||
value={me.company}
|
||||
/>
|
||||
<ProfileRow
|
||||
icon={<Mail className="h-4 w-4" />}
|
||||
label="Email"
|
||||
value={me.email}
|
||||
/>
|
||||
<ProfileRow
|
||||
icon={<Phone className="h-4 w-4" />}
|
||||
label="Phone"
|
||||
value={me.phone}
|
||||
/>
|
||||
<ProfileRow
|
||||
icon={<MapPin className="h-4 w-4" />}
|
||||
label="Location"
|
||||
value={`${me.city}, ${me.country}`}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
to={`/customers/${me.id}`}
|
||||
className="mt-4 inline-flex w-full items-center justify-center gap-2 rounded-2xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-primary/30 hover:bg-primary/10 hover:text-primary"
|
||||
>
|
||||
View full profile
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Invoices */}
|
||||
<Card>
|
||||
|
||||
Reference in New Issue
Block a user