Skip to main content

​
pages/fleet.tsx

The main entry point for the Fleet Dashboard. This Next.js page renders at the /fleet route and serves as the container for the entire Fleet Management module.

​
Purpose

  • Serves as the route handler for /fleet
  • Sets up page metadata (title, description) via Next.js Head
  • Provides navigation callback handlers to child components
  • Renders the FleetManagement wrapper component

​
File Location

Hemut-Prod/
└── pages/
    └── fleet.tsx    ← This file

​
FleetManagementPage

The default exported React component that Next.js renders for the /fleet route.

​
Function Signature

export default function FleetManagementPage(): JSX.Element

​
Dependencies

ImportSourcePurpose
React, useCallbackreactReact hooks for memoization
Headnext/headSEO and page metadata
useRouternext/routerProgrammatic navigation
FleetManagement@/components/FleetManagementMain fleet UI component

​
Implementation

export default function FleetManagementPage() {
  const router = useRouter();

  const handleNavigateToTracking = useCallback((loadId: string) => {
    router.push(`/tracking?loadId=${loadId}`);
  }, [router]);

  const handleNavigateToTractor = useCallback((tractorId: string) => {
    router.push(`/tractors?tractorId=${tractorId}`);
  }, [router]);

  return (
    <>
      <Head>
        <title>Fleet Management Overview - Hemut Transportation Management</title>
        <meta name="description" content="Fleet Management Overview Dashboard" />
      </Head>
      <FleetManagement 
        onNavigateToTracking={handleNavigateToTracking} 
        onNavigateToTractor={handleNavigateToTractor}
      />
    </>
  );
}
The page defines two memoized callback functions that are passed to the FleetManagement component:
Purpose: Navigate to the tracking page for a specific load.Signature:
(loadId: string) => void
Behavior:
  • Navigates to /tracking?loadId={loadId}
  • Used when a user clicks on a load/movement to view detailed tracking
Example Usage:
// When user clicks "Track Load" button
handleNavigateToTracking("762965");
// Navigates to: /tracking?loadId=762965
loadId format: Typically a numeric string representing the order/movement ID from the TMS. Examples: "762965", "800123".
Purpose: Navigate to the tractors page with a specific tractor selected.Signature:
(tractorId: string) => void
Behavior:
  • Navigates to /tractors?tractorId={tractorId}
  • Used when a user clicks on a tractor to view detailed information
Example Usage:
// When user clicks on a tractor marker
handleNavigateToTractor("735");
// Navigates to: /tractors?tractorId=735
tractorId format: The tractor unit number as a string. This corresponds to tractor_number in vehicle data. Examples: "735", "1042", "HMT-501".

​
Page Metadata

The Head component sets the following metadata for SEO and browser display:
PropertyValue
<title>”Fleet Management Overview - Hemut Transportation Management”
<meta name="description">”Fleet Management Overview Dashboard”

​
Component Hierarchy

The page component sits at the top of the Dashboard’s component tree: 
FleetManagementPage (pages/fleet.tsx)
└── FleetManagement (components/FleetManagement.tsx)
    └── UnifiedFleetDashboard (components/UnifiedFleetDashboard.tsx)
        ├── ConnectionStatusIndicator
        ├── LiveVehicleMap
        └── LiveTrailerMap
The FleetManagement component handles routing between different fleet modules (Dashboard, Drivers, Tractors, Trailers, PTA) based on the current URL path.
Other Fleet Management routes follow the same pattern:
RoutePage FileRendered Component
/fleetpages/fleet.tsxUnifiedFleetDashboard
/fleet/driverspages/fleet/drivers.tsxDriverManagement
/fleet/tractorspages/fleet/tractors.tsxTractorManagement
/fleet/trailerspages/fleet/trailers.tsxTrailerManagement
/fleet/ptapages/fleet/pta.tsxPredictedTimeAvailable
All fleet routes share the same FleetManagement wrapper component, which provides consistent navigation between modules.