XPO Fleet Intelligence

A 23-page fleet management platform built from original research — not a template, not a fork.

Next.js 15 (App Router)React 19Tailwind CSS 4shadcn/uiRechartsTypeScript strict

23Pages built

29K+Lines of code

21Entity types

0TypeScript errors

114Source files

10Research documents

10,647Lines of research

16Data exports analyzed

What it is

A full-scale fleet management platform covering analytics, monitoring, risk management, service programs, dispatch, and AI-assisted insights — built for a national transportation operation.

Every screen runs on typed mock data shaped to match real telematics distributions, so the data layer swaps for a live API without touching a component. 32 vehicles, 55 drivers, 4 preventive-maintenance programs, 22 LAX-area zones.

The point of the project was to prove a research-first process: study the real system, model the real domain, then build. The reference platform (EBAI) was analyzed across 84 screenshots and 16 exports before a single component was written.

How it was built

Ten phases, research first.

Phase	Work
Phase 0 Research	Analyzed 84 screenshots of the live EBAI platform and 16 real fleet data exports. Produced 10 research documents (10,647 lines) covering domain analysis, UX patterns, data modeling, technology selection, and competitors.
Phase 1–2 Architecture	Designed 21 TypeScript entity types from scratch against real operational patterns, then generated mock data matching actual telematics distributions rather than random values.
Phase 3–10 Build	23 pages across 7 functional areas, 24 UI components, 6 chart types, the compliance engine, the PM alert system, and a dark-first design system. Zero TypeScript errors across the codebase.

Original features

Designed from the research — these do not exist in the reference platform.

Risk Management Center

6-tier compliance expiration tracking across vehicle, driver, and enterprise documents. Ninety-, sixty-, thirty- and seven-day alert bands, plus critical and expired states.

Service Programs Engine

Vehicle-type-specific PM schedules — 59 service items at mileage and time intervals derived from real maintenance records. Covers E-450 (Gas/CNG/EV) and Freightliner M2-106 Diesel.

Digital Inspections

Pre-Trip (38 items) and CHP 45-Day (48 items with 381 failure-mode dropdowns), digitized from the actual paper forms and CHP 34505 CVC requirements.

The code

Pulled straight from the production codebase — unedited except for trimming.

src/lib/compliance.ts typescript

The compliance engine. Fleet compliance isn't binary — a document expiring in 80 days and one expiring tomorrow need different handling. Six ordered bands, evaluated once, returning everything the UI needs (status, color, icon, label) so no component re-derives severity and drifts from the others.

export function getComplianceStatus(expirationDate: string | Date): ComplianceStatusInfo {
  const expiry = new Date(expirationDate);
  const now = new Date();
  const days = Math.ceil((expiry.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));

  if (days < 0) {
    return { status: "expired", daysRemaining: days, color: "#EF4444", bgColor: "rgba(239,68,68,0.1)", icon: "circle-x", label: "Expired" };
  }
  if (days <= 7) {
    return { status: "critical", daysRemaining: days, color: "#F97316", bgColor: "rgba(249,115,22,0.1)", icon: "alert-triangle", label: "Critical" };
  }
  if (days <= 30) {
    return { status: "warning", daysRemaining: days, color: "#F59E0B", bgColor: "rgba(245,158,11,0.1)", icon: "clock", label: "Warning" };
  }
  if (days <= 60) {
    return { status: "caution", daysRemaining: days, color: "#EAB308", bgColor: "rgba(234,179,8,0.1)", icon: "eye", label: "Caution" };
  }
  if (days <= 90) {
    return { status: "notice", daysRemaining: days, color: "#3B82F6", bgColor: "rgba(59,130,246,0.1)", icon: "info", label: "Notice" };
  }
  return { status: "current", daysRemaining: days, color: "#22C55E", bgColor: "rgba(34,197,94,0.1)", icon: "check-circle", label: "Current" };
}

src/lib/pm-engine.ts typescript

Preventive maintenance on two axes. Service items come due on mileage or time, whichever hits first, and the thresholds are proportional (10% of the interval = due soon, 25% = upcoming) so a 5,000-mile oil change and a 100,000-mile transmission service both warn at a sensible point. Note the guards that stop the time axis from downgrading an already-overdue mileage result.

export function evaluatePMStatus(
  vehicle: Vehicle,
  schedule: PMSchedule
): PMServiceStatus[] {
  const now = new Date();
  const lastServiceDate = new Date(vehicle.lastServiceDate);
  const milesSinceService = vehicle.currentMileage - vehicle.lastServiceMileage;
  const monthsSinceService = Math.round(
    (now.getTime() - lastServiceDate.getTime()) / (1000 * 60 * 60 * 24 * 30.44)
  );

  return schedule.items.map((item) => {
    let milesUntilDue: number | null = null;
    let monthsUntilDue: number | null = null;
    let alertLevel: PMAlertLevel = "current";

    if (item.intervalMiles) {
      milesUntilDue = item.intervalMiles - milesSinceService;
      if (milesUntilDue <= 0) alertLevel = "overdue";
      else if (milesUntilDue <= item.intervalMiles * 0.1) alertLevel = "due-soon";
      else if (milesUntilDue <= item.intervalMiles * 0.25) alertLevel = "upcoming";
    }

    if (item.intervalMonths) {
      monthsUntilDue = item.intervalMonths - monthsSinceService;
      if (monthsUntilDue <= 0 && alertLevel !== "overdue") alertLevel = "overdue";
      else if (monthsUntilDue <= 1 && alertLevel === "current") alertLevel = "due-soon";
      else if (monthsUntilDue <= 2 && alertLevel === "current") alertLevel = "upcoming";
    }

    // Items without intervals (e.g., "as needed") stay current
    if (!item.intervalMiles && !item.intervalMonths) {
      alertLevel = "current";
    }

    return {