FormulaConfigurationList

FormulaConfigurationList

Type: Component Domain: Frontend — Configuration Route: /configuration/formulas Access: ADMIN role, configuration-enabled feature flag Last updated: 2026-09-10 Status: Current

Overview

The FormulaConfigurationList page is the entry point for managing formula configuration sets. It displays a paginated table of all formula sets with their lifecycle status, area, date ranges, and formula counts. From here, administrators can create new formula sets, edit existing future open-ended sets, or soft-delete future open-ended sets (which reopens the predecessor).

Public Interface

Route

Property	Value
Path	/configuration/formulas
Method	GET (page load)
Access Control	roles: [{ role: Role.ADMIN, clients: [] }]
Feature Flag	configuration-enabled
Redirect	Non-admin users → /unauthorized

Component Props

None — this is a page component mounted by the router.

Exported Symbols

Symbol	Type	Description
FormulaConfigurationListPage	FC	Default export — the page component
formatDate	(dateString: string) => string	Formats ISO date to yyyy-MM-dd
formatDateTime	(dateString: string) => string	Formats ISO date to yyyy-MM-dd HH:mm
StatusBadge	FC<{ label: string; color: string }>	Inline badge for status display
AreaBadge	FC<{ area: string }>	Inline badge for area (Interior/Coastal)

Internal Structure

State

State	Type	Purpose
page	number	Current page index (0-based)
pageSize	number	Fixed at 20 items per page

Data Fetching

Uses useFormulaSetList hook from @/hooks/useFormulaConfiguration with:

• page: current page index
• size: 20
• sort: ['startDate,DESC'] (newest first)

Returns FormulaSetListResponse with:

• content: FormulaSetResponse[] — array of formula sets
• page: { number, size, totalElements, totalPages } — pagination metadata

Helper Functions

getStatusBadge(set)

Returns a StatusBadge based on the formula set's lifecycle:

• Deleted (red #DA1E28) — set.deleted === true
• Open-ended (green #198038) — set.endDate === null and not deleted
• Closed (blue #0062FF) — set.endDate !== null

isFutureOpenEnded(set)

Returns true if the set is editable (future open-ended):

• Not deleted
• No end date (endDate === null)
• Start date is strictly after today (midnight comparison)

Rendering

Section	Description
Header	PageTitle with "Formula Configuration" title, subtitle, breadcrumbs, and "Create formula set" primary button
Loading	Skeleton table with 5 placeholder rows
Error	Alert with error message and "Retry" button
Empty	Message with "Create formula set" button
Table	Carbon Table with columns: Area, Start Date, End Date, Status, Formulas, Created, Updated, Actions
Pagination	Previous/Next buttons with page info (only when totalPages > 1)

Table Columns

Column	Rendering
Area	AreaBadge — "Interior" (teal #0097A7) or "Coastal" (purple #8A3FFC)
Start Date	formatDate(set.startDate)
End Date	formatDate(set.endDate) or — for open-ended
Status	getStatusBadge(set)
Formulas	set.formulas.length
Created	formatDateTime(set.createdAt)
Updated	formatDateTime(set.updatedAt)
Actions	OverflowMenu with Edit (always) and Delete (only future open-ended)

Dependencies

Inward (Imports)

Module	Purpose
@carbon/icons-react	Icons: Add, Edit, Delete, ChevronLeft, ChevronRight
@carbon/react	Button, Column, Table, TableContainer, TableHeader, TableRow, TableCell, TableBody, OverflowMenu, OverflowMenuItem
@tanstack/react-router	useNavigate — typed navigate({ to: '/configuration/formulas/new' })
react	useState, FC
@/components/core/PageTitle	Page header with breadcrumbs and actions
@/hooks/useFormulaConfiguration	useFormulaSetList hook

Outward (Consumed By)

Consumer	Context
Router	File route src/routes/_authenticated/_admin/configuration/formulas/index.tsx
ConfigurationPage	Links via "Formula sets" card

Known Constraints

• Page size fixed at 20 — not configurable by user
• Sort fixed to startDate,DESC — no column sorting UI
• Delete mutation not wired — handleDelete shows confirmation but has TODO comment; mutation hook exists but not connected
• No search/filter — all formula sets shown, no filtering by area or status
• Carry-forward logic — triggered from detail page when creating new set, not from list

Usage Example

// File route: src/routes/_authenticated/_admin/configuration/formulas/index.tsx
// ADMIN role + configuration-enabled flag are inherited from the _admin tier
// and the configuration.tsx section layout — the route declares neither.
export const Route = createFileRoute('/_authenticated/_admin/configuration/formulas/')({
  component: FormulaConfigurationListPage,
  staticData: { title: 'Formula Configuration' },
});

Edge Cases & Failure Behavior

Scenario	Behavior
API returns 401/403	Redirected to /unauthorized by auth interceptor
API returns 500	Error state shows "Failed to load formula sets" with Retry button
No formula sets exist	Empty state with "Create formula set" button
Network timeout	isError true, error message shown
User lacks ADMIN role	Redirected to /unauthorized before component mounts
Feature flag disabled	Route not registered, 404

Related Pages

• FormulaConfigurationDetail — Edit/view individual formula set
• FormulaConfigurationService — API client and hooks
• FormulaEditorPattern — Pattern page for FormulaInput integration
• ConfigurationPage — Parent configuration landing page