feat: mejorar UI con Vuetify 3, POS tipo venta real, dashboard

This commit is contained in:
mono
2026-10-24 23:12:47 -05:00
parent 27b084dd52
commit ff98f2d4c1
12 changed files with 484 additions and 132 deletions

View 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

View 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

View 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