Initial Plast Track MVP
This commit is contained in:
masterdev
267
UI.md
Normal file
267
UI.md
Normal file
@@ -0,0 +1,267 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user