SGERP Frontend

TemplatesPage

Templates list page for managing template simulations

TemplatesPage

A ready-to-use page component for displaying and managing template simulations. Nearly identical to ServicesPage but for templates instead of real operations.

Features

  • Templates Table: Full-featured table with filtering and sorting
  • Localization: Fully localized in English and Japanese
  • Full Height: Table expands to fill available space
  • Activity Filters: Current, Future, Past, Booking Started filters

Usage

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

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

Props

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

Screenshot

Templates Page

Features in Detail

Header Section

  • Title: Localized page title (ptapp.templates.title)
  • Description: Localized description (ptapp.templates.description)

Templates Table

  • Full Table: Uses TemplatesTable from predefined tables
  • Full Height: Table fills available vertical space
  • Activity Filters: Filter by Current, Future, Past, or Booking Started
  • Project Filter: Filter by project using autocomplete
  • Date Filters: Filter by start date, end date
  • Search: Search by simulation name

Table Columns

  • ID: Simulation ID
  • Name: Simulation name
  • Status: Simulation status badge
  • Project: Project name
  • Activity: Activity period
  • Start Date: Start date/time
  • End Date: End date/time
  • Passengers: Passenger count
  • Drivers: Driver count
  • Created: Creation timestamp

Layout Structure

<div className="flex-1 flex flex-col gap-6 min-h-0">
  {/* Header */}
  <div className="flex-shrink-0">
    <h1>{getText('ptapp.templates.title')}</h1>
    <p>{getText('ptapp.templates.description')}</p>
  </div>

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

Localization

Uses localization keys:

  • ptapp.templates.title - Page title
  • ptapp.templates.description - Page description

Plus all keys from TemplatesTable component.

Difference from ServicesPage

The main difference is that TemplatesPage uses TemplatesTable which filters simulations to show only templates, while ServicesPage shows real operations.

Related Components

Dependencies

  • react
  • sgerp-frontend-lib (collections, hooks, tables)

Notes

  • SGERP Context: Requires SGERPProvider wrapper
  • Collection: Uses simulation collection from SGERP client
  • Template Filter: Table automatically filters to show only templates