feat: mejorar UI con Vuetify 3, POS tipo venta real, dashboard
This commit is contained in:
20
openspec/changes/improve-ui-ux-pos/design.md
Normal file
20
openspec/changes/improve-ui-ux-pos/design.md
Normal file
@@ -0,0 +1,20 @@
|
||||
# Design: improve-ui-ux-pos
|
||||
|
||||
## UI Library
|
||||
Use Vuetify 3 with Material Design 3, responsive for tablet.
|
||||
|
||||
## POS Flow
|
||||
- Product grid by category/producer
|
||||
- Cart with quantities
|
||||
- Payment method selection
|
||||
- Quick sale completion
|
||||
|
||||
## UX Improvements
|
||||
- Dashboard with day summary
|
||||
- Guided setup on first run
|
||||
- Data tables for all entities
|
||||
- Better forms with validation
|
||||
- Consistent theming
|
||||
|
||||
## Testing
|
||||
Playwright tests for web UI covering realistic scenarios
|
||||
24
openspec/changes/improve-ui-ux-pos/proposal.md
Normal file
24
openspec/changes/improve-ui-ux-pos/proposal.md
Normal file
@@ -0,0 +1,24 @@
|
||||
# Proposal: improve-ui-ux-pos
|
||||
|
||||
## Why
|
||||
Current UI is too simple/minimalist, lacks styling, and the POS flow (create sale) is not intuitive. Users need a realistic POS experience with:
|
||||
- Proper product catalog by producer
|
||||
- Easy product selection for sales (like buying 3 lbs coffee, 2 condiments)
|
||||
- Clear day closure/cash reconciliation flow
|
||||
- Better UX with a UI component library
|
||||
- Seed data/onboarding to create producers/products easily
|
||||
|
||||
## What Changes
|
||||
- Integrate Vuetify 3 for professional UI, themes, components
|
||||
- Redesign POS/sales screen like real POS systems
|
||||
- Improve product/producer management with better forms
|
||||
- Add quick start wizard (setup producers/products)
|
||||
- Improve cash closure flow with detailed breakdown
|
||||
- Add realistic test scenarios
|
||||
- Enhance all views with proper layouts
|
||||
|
||||
## Impact
|
||||
- apps/toldo-app: UI overhaul with Vuetify
|
||||
- Better UX for tablet use
|
||||
- More realistic workflows
|
||||
- Maintain offline-first, Capacitor compatible
|
||||
29
openspec/changes/improve-ui-ux-pos/tasks.md
Normal file
29
openspec/changes/improve-ui-ux-pos/tasks.md
Normal file
@@ -0,0 +1,29 @@
|
||||
# Tasks
|
||||
|
||||
## 1. Research & Setup
|
||||
- [ ] 1.1 Research POS UI patterns
|
||||
- [ ] 1.2 Install Vuetify 3, mdi icons
|
||||
- [ ] 1.3 Configure Vuetify theme
|
||||
|
||||
## 2. UI Overhaul
|
||||
- [ ] 2.1 Redesign Layout with Vuetify (app bar, navigation)
|
||||
- [ ] 2.2 Redesign Dashboard with day summary
|
||||
- [ ] 2.3 Redesign Inventory/Producers/Products with data tables
|
||||
- [ ] 2.4 Redesign POS Sales screen (product grid + cart)
|
||||
- [ ] 2.5 Redesign Expenses, Adjustments
|
||||
- [ ] 2.6 Redesign Cash Closure with detailed breakdown
|
||||
- [ ] 2.7 Redesign Reports
|
||||
- [ ] 2.8 Redesign Export/Import
|
||||
|
||||
## 3. UX Features
|
||||
- [ ] 3.1 Add setup wizard for first run
|
||||
- [ ] 3.2 Add quick product creation
|
||||
- [ ] 3.3 Improve validation
|
||||
|
||||
## 4. Testing
|
||||
- [ ] 4.1 Setup Playwright
|
||||
- [ ] 4.2 Create realistic test scenarios
|
||||
- [ ] 4.3 Test full day flow
|
||||
|
||||
## 5. Build & Deploy
|
||||
- [ ] 5.1 Build web and APK
|
||||
Reference in New Issue
Block a user