import { Head, Link } from '@inertiajs/react'; import { ArrowUpRight, CalendarClock, Mail, Map, UserRound, Users, } from 'lucide-react'; import { home } from '@/routes'; import { Badge } from '@/components/ui/badge'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { dashboard } from '@/routes/admin'; import { index as routesIndex } from '@/routes/admin/routes'; import { index as subscribersIndex } from '@/routes/admin/subscribers'; import type { UserRole } from '@/types'; type Props = { metrics: { customers: number; drivers: number; routes: number; upcomingBookings: number; subscribers: number; }; recentUsers: { id: number; name: string; email: string; role: UserRole; email_verified_at: string | null; created_at: string; }[]; recentSubscribers: { id: number; email: string; created_at: string }[]; }; const formatDate = (value: string) => new Date(value).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', }); export default function AdminDashboard({ metrics, recentUsers, recentSubscribers, }: Props) { const cards = [ { label: 'Customers', value: metrics.customers, icon: Users }, { label: 'Drivers', value: metrics.drivers, icon: UserRound }, { label: 'Upcoming bookings', value: metrics.upcomingBookings, icon: CalendarClock, }, { label: 'Active routes', value: metrics.routes, icon: Map }, { label: 'Newsletter subscribers', value: metrics.subscribers, icon: Mail, }, ]; return ( <>

ZozTrip operations

Admin overview

A clear snapshot of your bookings, routes and community.

View website
{cards.map(({ label, value, icon: Icon }, index) => ( {label}

{value.toLocaleString()}

{index === 2 ? 'Scheduled ahead' : index === 3 ? 'Available to customers' : 'On ZozTrip'}

))}
Newest users

Recent registrations on your platform

{recentUsers.map((user) => ( ))} {recentUsers.length === 0 && ( )}
Name Role Status Joined

{user.name}

{user.email}

 {user.role} {user.email_verified_at ? 'Verified' : 'Unverified'} {formatDate(user.created_at)}
No users have registered yet.
Latest subscribers

People following your updates

{recentSubscribers.length === 0 ? (

No subscribers yet

Newsletter signups from the website will show up here.

) : (
    {recentSubscribers.map((subscriber) => (
  • {subscriber.email} {formatDate(subscriber.created_at)}
    • ))}
)}
Manage subscribers Manage home page routes
); } AdminDashboard.layout = { breadcrumbs: [{ title: 'Admin', href: dashboard() }], };