SECO Tools · internal · EPMS
Component gallery
Every component in the shared inventory, in every state it ships with: default, loading, empty, error and disabled. Presentational only — each one takes props and raises events.
Gate rail
The signature element. A hairline dimension line, a datum tick per stage, stage names only. Advancing a stage animates the tick over 240ms, and that is the only animation in the application. Below 900px it collapses to the current stage plus a count — narrow this window to see it.
Current stage, interactive
First stage
- Request intakeRequestCurrent stage
- Assessment & qualificationAssessNot started
- Route decisionRouteNot started
- Pre-sales & offerOfferNot started
- Present & negotiateNegotiateNot started
- AgreementAgreementNot started
- DeliveryDeliveryNot started
- Feedback & closureClosureNot started
Closure
- Request intakeRequestCompleted
- Assessment & qualificationAssessCompleted
- Route decisionRouteCompleted
- Pre-sales & offerOfferCompleted
- Present & negotiateNegotiateCompleted
- AgreementAgreementCompleted
- DeliveryDeliveryCompleted
- Feedback & closureClosureCurrent stage
Record header
Eyebrow, title, identifier, actions and the rail. Sticky, so the rail never scrolls away.
Project
Sømme Marine — turbine hub roughing cell
PRJ-00184- Request intakeRequestCompleted
- Assessment & qualificationAssessCompleted
- Route decisionRouteCompleted
- Pre-sales & offerOfferCompleted
- Present & negotiateNegotiateCompleted
- AgreementAgreementCompleted
- DeliveryDeliveryCurrent stage
- Feedback & closureClosureNot started
- Customer
- Sømme Marine AS
- Route
- Solution led
- Predicted value
- EUR 412,000
- Cost to date
- EUR 96,480
- Hours booked
- 612.75
- Next gate
- 2026-03-24
Summary strip
Loading
Data table
Sticky header, sticky first column, resizable columns, multi-sort with shift-click, saved views, a density toggle and a visible row count. Below 100 rows it scrolls rather than paginates.
Default, with toolbar and filters
| Status | |||||
|---|---|---|---|---|---|
| PRJ-00184-012 | Confirm insert grade with the application engineer | Marit Solheim | 2026-03-06 | Overdue | 6.50 |
| PRJ-00184-013 | Issue the revised statement of work | Jonas Bergqvist | 2026-03-11 | Due | 3.00 |
| PRJ-00184-014 | Book the trial cell for the second run | Priya Raghunathan | 2026-03-18 | On plan | 12.25 |
| PRJ-00184-015 | Record the customer's feedback score at closure | Marit Solheim | 2026-04-02 | Not started | 1.00 |
Loading
| Reference | Action | Owner | Due | Status | Hours |
|---|
Empty
| Reference | Action | Owner | Due | Status | Hours |
|---|
No actions yet.
Add the first action to start the log.
Error
| Reference | Action | Owner | Due | Status | Hours |
|---|
The action log did not load. Check your connection, then load the rows again.
View switcher and density toggle
Default
Disabled
Filter bar
Disabled
Form controls
Label above the control, help text below, error below that. Errors explain and instruct without apologising.
Pick the account the work is for.
This request needs a customer before it can be submitted. Pick a customer, or mark it as an internal project.
Sets the route options and the approval chain.
The same calendar day everywhere — this is a date, not a moment.
Pick a date on or after the gate it belongs to.
EUR 48,250.00 at the rate held on the record.
Plain text. Keep it to what the delivery team needs.
Lookup — searching, empty result, and failed search
Type in each field to open its list. Nothing is fetched — the caller owns the search.
Badges and provenance
Colour never carries meaning alone: every state ships a glyph and a label.
Status
Status, compact
Sync state
Provenance
Empty states
Instructions, not moods. No illustration and no apology.
No actions yet.
Add the first action to start the log.
No projects match these filters.
Widen the filters, or clear them to see every project you own.
Toasts
A toast repeats the words of the control that caused it: Approve produces Approved.
Approved
The technical approver has been notified.
Request submitted
Sent to the CRM. The sync state is Pending until it lands.
Sync failed
The request did not reach the CRM. Open the integration log to see why, then send it again.
Confirm dialog
Destructive actions say what will happen and how many records it affects.