trackgo-fe/.agents/skills/index-layout/SKILL.md

name, description

name

description

index-layout

Use whenever building or editing a FULL_PAGE index / list table in the ERP project (master-data lists, transaction lists, system users/privileges, any EnterpriseDataTable index). Governs LAYOUT and table contracts ONLY — page chrome, module columnDefs vs shared prefix/postfix columns, action-column width, audit field names, and the search/filter/reload toolbar. Does not govern colors, fonts, border-radius, or other visual styling. Trigger this any time an index page, list table, row-action column, audit columns, or index toolbar is added or restructured — including when the user says "build a list page", "index table", or "add a refresh button".

Index Layout

Layout and data contracts for FULL_PAGE index / list tables. Visual style (color, weight, radius, shadows) belongs to @repo/ui, not this skill.

Walk these rules in order whenever you add or change an index table.

Project chrome (do not rebuild)

Index routes already render inside EnterpriseIndexPageProvider → EnterpriseDataTable. That chrome owns:

• Page header (title, description, breadcrumbs, Create)
• Toolbar: search, filter, reload
• Prefix columns: selection, row actions, status
• Postfix columns: Created by, Created at, Updated by, Updated at
• Pagination / server-side row model

Do not re-implement the toolbar, action column, status column, or audit columns in a module page. This skill governs the columnDefs you pass in and the entity/transformer field names the shared table reads.

1. Page composition

<EnterpriseIndexPageProvider pageHeaderProps={{ title, description, icon, breadcrumbs }}>
  <EnterpriseDataTable columnDefs={columnDefs} filterConfig={filterConfig} />
</EnterpriseIndexPageProvider>

Copy example/full-page. Do not invent a third index layout.

2. Module columnDefs = business fields only

Module index pages declare business columns only (code, name, relations, flags).

Do not redeclare:

• action_column / row actions
• status (the shared status badge column)
• createdBy / createdAt / updatedBy / updatedAt

// GOOD
const columnDefs = [
  { field: 'username', headerName: t('common:fields.username'), minWidth: 160 },
  {
    field: 'privilege',
    headerName: t('common:fields.privilege'),
    valueGetter: ({ data }) => relationLabel(data?.privilege),
  },
];

// BAD — duplicates shared chrome
const columnDefs = [
  { colId: 'action_column', width: 180 },
  { field: 'created_at', headerName: 'Created at' },
];

3. Audit fields are camelCase

API and transformers map:

Entity field	Meaning
createdBy	actor string, { username }, or uuid
createdAt	unix ms
updatedBy	actor string, { username }, or uuid
updatedAt	unix ms

EnterpriseDataTable postfix columns bind those names and fall back to legacy snake_case (creator_name, created_at, editor_name, updated_at) for leftover local/Pouch rows.

Empty values render as -. Nested actors display username || name || id.

Do not alias audit fields to snake_case in TrackGo transformers.

4. Action column width is shared

Row actions stay a single nowrap icon row (RowActions with responsiveView={false}). Width is computed in EnterpriseDataTable from privileges + moduleType (View always, then Edit / Duplicate / Activate-or-Deactivate or transaction flags / Delete). flex: 0 so the column does not shrink.

Do not override action column width / minWidth in module columnDefs or customPrefixColumn unless the module adds extra custom row actions and you widen via customPrefixColumn to fit them.

5. Toolbar always includes reload

The index toolbar is search + filter + reload. Reload must call gridApi.refreshServerSide({ purge: true }) (same as search/filter) — not window.location.reload().

Label: common:actions.reload (“Reload” / “Muat Ulang”). Icon: RefreshCw.

Do not add a second module-level refresh control that duplicates this.

Checklist

• Index page uses EnterpriseIndexPageProvider + EnterpriseDataTable (no custom table chrome)
• columnDefs are business fields only
• Transformer maps createdAt / createdBy / updatedAt / updatedBy
• Action column width left to the shared table
• Reload is the shared toolbar button, not a full browser refresh