268 lines
6.2 KiB
Markdown
268 lines
6.2 KiB
Markdown
# UI Guide
|
|
|
|
## Purpose
|
|
|
|
This file documents the current frontend UI direction for `Plast Track MVP`.
|
|
|
|
The product surface is now organized as module tabs instead of one long dashboard page. The goal is to keep the operator focused on one task area at a time while preserving fast access to workshop status, selected machine context, and actions.
|
|
|
|
## UI Direction
|
|
|
|
The current UI aims for:
|
|
|
|
- modern industrial dashboard
|
|
- simple and readable operator flows
|
|
- elegant but restrained visual language
|
|
- fast status scanning
|
|
- clear separation between monitoring modules and operator actions
|
|
|
|
Design principles:
|
|
|
|
- show machine state first
|
|
- reduce visual noise
|
|
- separate workflows into tabs
|
|
- keep passive acquisition and machine safety explicit
|
|
- avoid sending any command back to machines
|
|
|
|
## Layout
|
|
|
|
The application uses a tabbed module workspace:
|
|
|
|
```text
|
|
Hero Header
|
|
Summary Ribbon
|
|
Module Tabs
|
|
Current Module Panel
|
|
```
|
|
|
|
Current module tabs:
|
|
|
|
- `Atelier`: machine cards, filtering, sorting, quick actions, fullscreen workshop mode
|
|
- `Machine`: selected machine detail, cycles, events, downtime history
|
|
- `TRS`: daily OEE/TRS and per-machine OEE
|
|
- `OF`: production order creation and status management
|
|
- `Arrets`: open downtime qualification and timeline
|
|
- `Rebuts`: scrap declaration and recent scrap log
|
|
- `Config`: selected machine signal and timing configuration
|
|
|
|
Desktop, tablet, and mobile all use the same module model. On smaller screens, tab buttons and module content stack naturally without horizontal page scroll.
|
|
|
|
## Main UI Blocks
|
|
|
|
### 1. Hero Header
|
|
|
|
Purpose:
|
|
|
|
- establish product identity
|
|
- show realtime connection status
|
|
- provide top-level hierarchy
|
|
|
|
Content:
|
|
|
|
- product title
|
|
- realtime status
|
|
- error feedback if data loading fails
|
|
|
|
### 2. Summary Ribbon
|
|
|
|
Purpose:
|
|
|
|
- provide workshop-level scanning before entering a module
|
|
|
|
Current metrics:
|
|
|
|
- global OEE
|
|
- machines in production
|
|
- open downtimes
|
|
- produced quantity vs scrap quantity
|
|
|
|
### 3. Module Tabs
|
|
|
|
Purpose:
|
|
|
|
- separate supervision, production order, downtime, scrap, TRS, and configuration workflows
|
|
- avoid crowding all operator forms on one page
|
|
- keep each module readable on tablets and production displays
|
|
|
|
### 4. Atelier Module
|
|
|
|
Purpose:
|
|
|
|
- show every machine at a glance
|
|
- support quick triage and routing to the right workflow
|
|
|
|
Features:
|
|
|
|
- machine card grid
|
|
- status filter
|
|
- sort by code, OEE, or stops first
|
|
- fullscreen workshop mode
|
|
- state duration badge
|
|
- no-active-OF empty state
|
|
- quick actions to OF, Rebuts, and Arrets modules
|
|
|
|
### 5. Machine Module
|
|
|
|
Purpose:
|
|
|
|
- turn the selected machine into the focal point
|
|
|
|
Contains:
|
|
|
|
- status KPIs
|
|
- current order
|
|
- average cycle
|
|
- daily OEE
|
|
- machine context
|
|
- recent cycle SVG bars
|
|
- recent events
|
|
- downtime history
|
|
|
|
### 6. TRS Module
|
|
|
|
Purpose:
|
|
|
|
- keep daily performance visible without mixing it with operator forms
|
|
|
|
Contains:
|
|
|
|
- global OEE
|
|
- availability
|
|
- performance
|
|
- quality
|
|
- per-machine OEE list
|
|
|
|
### 7. Operator Action Modules
|
|
|
|
Purpose:
|
|
|
|
- keep write workflows focused and auditable
|
|
|
|
Modules:
|
|
|
|
- `OF`: create, start, pause, and close production orders
|
|
- `Arrets`: qualify open downtimes
|
|
- `Rebuts`: declare scrap
|
|
- `Config`: update passive signal configuration
|
|
|
|
All forms use inline validation, inline API error feedback, and success toasts.
|
|
|
|
## Visual Language
|
|
|
|
### Typography
|
|
|
|
Fonts:
|
|
|
|
- `Instrument Sans` for interface text
|
|
- `Space Grotesk` for headings and numeric emphasis
|
|
|
|
### Color
|
|
|
|
Base direction:
|
|
|
|
- light industrial gray background
|
|
- industrial blue primary structure
|
|
- anthracite text and secondary structure
|
|
- technical orange active accent
|
|
- white panels for contrast
|
|
|
|
Final palette:
|
|
|
|
| Usage | Color | Code |
|
|
|-------|-------|------|
|
|
| Couleur principale | Bleu industriel | `#0A2F5A` |
|
|
| Couleur secondaire | Gris anthracite | `#2B2B2B` |
|
|
| Couleur accent | Orange technique | `#F28C28` |
|
|
| Fond clair | Gris tres clair | `#F5F7FA` |
|
|
| Fond / contraste | Blanc | `#FFFFFF` |
|
|
|
|
Status colors:
|
|
|
|
- `production`: industrial blue
|
|
- `arret_non_qualifie`: technical orange
|
|
- `arret_qualifie`: anthracite
|
|
- `reglage`: mixed industrial blue / orange
|
|
- `hors_planning`: neutral anthracite tint
|
|
|
|
### Surfaces
|
|
|
|
Surfaces use:
|
|
|
|
- rounded panels
|
|
- soft shadows
|
|
- token-driven borders
|
|
- high contrast status text
|
|
|
|
## Responsive Behavior
|
|
|
|
Desktop:
|
|
|
|
- centered workspace
|
|
- full tab row
|
|
- wide machine grid
|
|
- split layouts inside form/list modules
|
|
|
|
Tablet:
|
|
|
|
- tab row wraps to fewer columns
|
|
- form/list modules stack
|
|
|
|
Mobile:
|
|
|
|
- single-column flow
|
|
- summary cards stack
|
|
- tabs stack
|
|
- tables scroll horizontally only inside their wrapper
|
|
- touch targets remain at least 44px high
|
|
|
|
## Operator Experience
|
|
|
|
The UI is designed so an operator or supervisor can quickly:
|
|
|
|
1. see which machines are running or stopped
|
|
2. filter or sort machines by operational need
|
|
3. open a selected machine detail view
|
|
4. create or manage production orders
|
|
5. qualify downtime
|
|
6. declare scrap
|
|
7. review daily TRS/OEE
|
|
8. configure passive signal timing per machine
|
|
|
|
## Current Frontend Files
|
|
|
|
Core files:
|
|
|
|
- [frontend/src/App.tsx](/d:/@@@DEV/apps/plast%20track/frontend/src/App.tsx:1)
|
|
- [frontend/src/styles.css](/d:/@@@DEV/apps/plast%20track/frontend/src/styles.css:1)
|
|
- [frontend/src/components/MachineCard.tsx](/d:/@@@DEV/apps/plast%20track/frontend/src/components/MachineCard.tsx:1)
|
|
- [frontend/src/components/Panel.tsx](/d:/@@@DEV/apps/plast%20track/frontend/src/components/Panel.tsx:1)
|
|
- [frontend/src/components/CycleBarChart.tsx](/d:/@@@DEV/apps/plast%20track/frontend/src/components/CycleBarChart.tsx:1)
|
|
|
|
## Suggested Next UI Improvements
|
|
|
|
Near-term:
|
|
|
|
- improve table empty states for OF and machine event history
|
|
- add optimistic row updates for order and downtime actions
|
|
- add tablet-first operator shortcuts for common reason codes
|
|
|
|
Medium-term:
|
|
|
|
- create separate operator and supervisor views
|
|
- add richer downtime timeline with duration buckets
|
|
- add historical trend charts for OEE and scrap
|
|
- add saved workshop display presets
|
|
|
|
High-value UX additions:
|
|
|
|
- keyboard-friendly action flow for industrial tablets
|
|
- larger gloved-use mode
|
|
- alarm emphasis rules without overusing red
|
|
- quick action drawer for the selected machine
|
|
|
|
## UI Goal
|
|
|
|
The target is not a generic admin panel.
|
|
|
|
The target is a calm, production-oriented interface that helps people notice problems fast, act with minimal friction, and understand machine performance in context.
|