DriversPage

A complete driver management page with table display and integrated drawer for creating and editing drivers. Includes organization filtering and full CRUD functionality.

Features

• Driver Table: Full-featured table with organization filtering
• Create Driver: "Create Driver" button opens drawer for new driver
• Edit Driver: Click row to edit existing driver in drawer
• Drawer Editor: Integrated DriverDrawer component for CRUD
• Localization: Fully localized in English and Japanese
• Full Height: Table expands to fill available space

Usage

// app/drivers/page.tsx
import { DriversPage } from '@/components/sgerp/pages/drivers-page';

export default function Page() {
  return <DriversPage />;
}

Props

This component does not accept any props. It's a standalone page component.

Screenshots

Drivers Table

Driver Editor

Features in Detail

Header Section

• Title: Localized page title (ptapp.drivers.title)
• Description: Localized description (ptapp.drivers.description)
• Create Button: Opens drawer for creating new driver

Driver Table

• Full Table: Uses DriverTable from predefined tables
• Full Height: Table fills available vertical space
• Row Click: Opens drawer to edit selected driver
• Organization Filter: Filter drivers by organization

Driver Drawer

• Create Mode: Opened with no driver ID selected
• Edit Mode: Opened with driver ID from row click
• Form Fields: Email, password, first/last name, phone, gender, DOB, organization
• Validation: Email and password required for creation
• Success Callback: Refreshes driver collection after save

Table Columns

• ID: Driver ID
• Email: Email address
• First Name: Driver's first name
• Last Name: Driver's last name
• Phone: Contact number
• Gender: Gender (Male/Female/Other)
• Date of Birth: Birth date
• Organization: Organization name
• Active: Active status indicator

Layout Structure

<div className="flex-1 flex flex-col gap-6 min-h-0">
  {/* Header with Create Button */}
  <div className="flex-shrink-0 flex items-start justify-between">
    <div>
      <h1>{getText('ptapp.drivers.title')}</h1>
      <p>{getText('ptapp.drivers.description')}</p>
    </div>
    <Button onClick={() => setDrawerOpen(true)}>
      <Plus /> {getText('driver.create_driver')}
    </Button>
  </div>

  {/* Table */}
  <div className="flex-1 min-h-0 flex flex-col">
    <DriverTable
      collection={api?.collections.driver ?? null}
      fullscreenHeight
      onRowClick={handleRowClick}
    />
  </div>

  {/* Drawer */}
  <DriverDrawer
    open={drawerOpen}
    onOpenChange={setDrawerOpen}
    driverId={selectedDriverId}
    api={api}
    onSuccess={handleDriverCreated}
  />
</div>

State Management

The component manages:

• drawerOpen: Whether drawer is visible
• selectedDriverId: ID of driver being edited (undefined for create)

Interaction Flow

Creating a Driver

1. Click "Create Driver" button
2. Drawer opens with empty form
3. Fill in driver details
4. Click "Create"
5. Drawer closes, collection refreshes
6. New driver appears in table

Editing a Driver

1. Click driver row in table
2. Drawer opens with driver data
3. Modify driver details
4. Click "Update"
5. Drawer closes, collection refreshes
6. Updated driver shown in table

Localization

Uses localization keys:

• ptapp.drivers.title - Page title
• ptapp.drivers.description - Page description
• driver.create_driver - Create button text

Plus all keys from DriverTable and DriverDrawer components.

Related Components

• DriverTable - The table component
• DriverDrawer - The drawer editor
• PassengersPage - Similar page for passengers

Dependencies

• react (for useState)
• lucide-react (for Plus icon)
• sgerp-frontend-lib (collections, hooks, tables, drawer)
• @/components/ui/button (shadcn/ui)

Notes

• SGERP Context: Requires SGERPProvider wrapper
• Collection: Uses driver collection from SGERP client
• API Instance: Passes shared API to drawer for collection access
• Success Callback: Refreshes collection with fetch({}) after create/update