feat(mobile-fixes-phase3): Complete US-311 - Actualizare Documentație MOBILE_PATTERNS.md
Implemented by Ralph autonomous loop. Iteration: 9 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude Agent
@@ -1,8 +1,8 @@
|
|||||||
# ROA2WEB Mobile Patterns Library
|
# ROA2WEB Mobile Patterns Library
|
||||||
|
|
||||||
**Version:** 2.0.0
|
**Version:** 3.0.0
|
||||||
**Last Updated:** 2026-01-12
|
**Last Updated:** 2026-01-12
|
||||||
**Status:** ✅ Complete
|
**Status:** ✅ Complete (Phase 3 - Mobile Navigation Overhaul)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -12,15 +12,17 @@
|
|||||||
2. [Mobile Layout Overview](#mobile-layout-overview)
|
2. [Mobile Layout Overview](#mobile-layout-overview)
|
||||||
3. [Navigation Architecture](#navigation-architecture)
|
3. [Navigation Architecture](#navigation-architecture)
|
||||||
4. [MobileTopBar](#mobiletopbar)
|
4. [MobileTopBar](#mobiletopbar)
|
||||||
5. [MobileBottomNav](#mobilebottomnav)
|
5. [MobileBottomNav](#mobilebottomnav) *(UPDATED - Phase 3)*
|
||||||
6. [MobileDrawerMenu](#mobiledrawermenu) *(NEW)*
|
6. [MobileDrawerMenu](#mobiledrawermenu) *(UPDATED - Phase 3)*
|
||||||
7. [MobileActionBar](#mobileactionbar) *(NEW)*
|
7. [Mobile Tab Pattern](#mobile-tab-pattern) *(NEW - Phase 3)*
|
||||||
8. [MobileSelectionFooter](#mobileselectionfooter)
|
8. [FAB Pattern](#fab-pattern) *(NEW - Phase 3)*
|
||||||
9. [BottomSheet](#bottomsheet)
|
9. [MobileActionBar](#mobileactionbar)
|
||||||
10. [SwipeableCards](#swipeablecards)
|
10. [MobileSelectionFooter](#mobileselectionfooter)
|
||||||
11. [Design Tokens for Mobile](#design-tokens-for-mobile)
|
11. [BottomSheet](#bottomsheet)
|
||||||
12. [Best Practices](#best-practices)
|
12. [SwipeableCards](#swipeablecards)
|
||||||
13. [Troubleshooting](#troubleshooting)
|
13. [Design Tokens for Mobile](#design-tokens-for-mobile)
|
||||||
|
14. [Best Practices](#best-practices)
|
||||||
|
15. [Troubleshooting](#troubleshooting)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -104,12 +106,12 @@ import SwipeableCards from '@shared/components/mobile/SwipeableCards.vue'
|
|||||||
|
|
||||||
## Mobile Layout Overview
|
## Mobile Layout Overview
|
||||||
|
|
||||||
### ASCII Diagram: Standard Mobile Layout
|
### ASCII Diagram: Standard Mobile Layout (Phase 3)
|
||||||
|
|
||||||
```
|
```
|
||||||
┌─────────────────────────────────────────┐
|
┌─────────────────────────────────────────┐
|
||||||
│ MobileTopBar (56px) │
|
│ MobileTopBar (56px) │
|
||||||
│ [≡] Page Title [🔍] [⋮] │
|
│ [≡] Page Title [📥] [🔍] │
|
||||||
├─────────────────────────────────────────┤
|
├─────────────────────────────────────────┤
|
||||||
│ │
|
│ │
|
||||||
│ │
|
│ │
|
||||||
@@ -119,16 +121,21 @@ import SwipeableCards from '@shared/components/mobile/SwipeableCards.vue'
|
|||||||
│ │
|
│ │
|
||||||
│ padding-top: 56px │
|
│ padding-top: 56px │
|
||||||
│ padding-bottom: 56px │
|
│ padding-bottom: 56px │
|
||||||
│ │
|
│ [+] │ ← FAB (contextual)
|
||||||
│ │
|
│ │
|
||||||
├─────────────────────────────────────────┤
|
├─────────────────────────────────────────┤
|
||||||
│ MobileBottomNav (56px) │
|
│ MobileBottomNav (56px) │
|
||||||
│ 📋 ☁️ 📊 ⚙️ │
|
│ 🏠 📋 📄 ⚙️ │
|
||||||
│ Bonuri Upload Rapoarte Setări │
|
│ Dashboard Bonuri Facturi Setări │
|
||||||
└─────────────────────────────────────────┘
|
└─────────────────────────────────────────┘
|
||||||
```
|
```
|
||||||
|
|
||||||
### ASCII Diagram: Drawer Menu Open
|
> **Phase 3 Changes:**
|
||||||
|
> - Footer Nav: 4 direct links (Dashboard, Bonuri, Facturi, Setări)
|
||||||
|
> - Upload moved to FAB on Bonuri page
|
||||||
|
> - Rapoarte removed from footer (accessible via Hamburger Menu)
|
||||||
|
|
||||||
|
### ASCII Diagram: Drawer Menu Open (Phase 3 - Grouped Categories)
|
||||||
|
|
||||||
```
|
```
|
||||||
┌──────────────────┬──────────────────────┐
|
┌──────────────────┬──────────────────────┐
|
||||||
@@ -137,11 +144,20 @@ import SwipeableCards from '@shared/components/mobile/SwipeableCards.vue'
|
|||||||
├──────────────────┤ ░░░ OVERLAY ░░░░░░░░ │
|
├──────────────────┤ ░░░ OVERLAY ░░░░░░░░ │
|
||||||
│ 🏢 ROA2WEB │ ░░ (tap to close) ░░ │
|
│ 🏢 ROA2WEB │ ░░ (tap to close) ░░ │
|
||||||
├──────────────────┤ ░░░░░░░░░░░░░░░░░░░░ │
|
├──────────────────┤ ░░░░░░░░░░░░░░░░░░░░ │
|
||||||
|
│ PRINCIPALE │ ░░░░░░░░░░░░░░░░░░░░ │
|
||||||
│ 🏠 Dashboard │ ░░░░░░░░░░░░░░░░░░░░ │
|
│ 🏠 Dashboard │ ░░░░░░░░░░░░░░░░░░░░ │
|
||||||
│ 📋 Bonuri │ ░░░░░░░░░░░░░░░░░░░░ │
|
│ 📋 Bonuri │ ░░░░░░░░░░░░░░░░░░░░ │
|
||||||
|
│ ────────────── │ ░░░░░░░░░░░░░░░░░░░░ │
|
||||||
|
│ RAPOARTE │ ░░░░░░░░░░░░░░░░░░░░ │
|
||||||
│ 📄 Facturi │ ░░░░░░░░░░░░░░░░░░░░ │
|
│ 📄 Facturi │ ░░░░░░░░░░░░░░░░░░░░ │
|
||||||
│ 🔢 Balanță │ ░░░░░░░░░░░░░░░░░░░░ │
|
│ 🔢 Balanță │ ░░░░░░░░░░░░░░░░░░░░ │
|
||||||
│ 💰 Trezorerie │ ░░░░░░░░░░░░░░░░░░░░ │
|
│ 💰 Casa și Banca│ ░░░░░░░░░░░░░░░░░░░░ │
|
||||||
|
│ ────────────── │ ░░░░░░░░░░░░░░░░░░░░ │
|
||||||
|
│ ANALIZE │ ░░░░░░░░░░░░░░░░░░░░ │
|
||||||
|
│ ⏰ Scadențe │ ░░░░░░░░░░░░░░░░░░░░ │
|
||||||
|
│ 📋 Facturi Det. │ ░░░░░░░░░░░░░░░░░░░░ │
|
||||||
|
│ ────────────── │ ░░░░░░░░░░░░░░░░░░░░ │
|
||||||
|
│ ADMINISTRARE │ ░░░░░░░░░░░░░░░░░░░░ │
|
||||||
│ ⚙️ Setări │ ░░░░░░░░░░░░░░░░░░░░ │
|
│ ⚙️ Setări │ ░░░░░░░░░░░░░░░░░░░░ │
|
||||||
├──────────────────┤ ░░░░░░░░░░░░░░░░░░░░ │
|
├──────────────────┤ ░░░░░░░░░░░░░░░░░░░░ │
|
||||||
│ 👤 Username │ ░░░░░░░░░░░░░░░░░░░░ │
|
│ 👤 Username │ ░░░░░░░░░░░░░░░░░░░░ │
|
||||||
@@ -149,6 +165,13 @@ import SwipeableCards from '@shared/components/mobile/SwipeableCards.vue'
|
|||||||
└──────────────────┴──────────────────────┘
|
└──────────────────┴──────────────────────┘
|
||||||
```
|
```
|
||||||
|
|
||||||
|
> **Phase 3 Changes:**
|
||||||
|
> - Navigation organized into 4 category sections with visual separators
|
||||||
|
> - PRINCIPALE: Dashboard, Bonuri
|
||||||
|
> - RAPOARTE: Facturi, Balanță, Casa și Banca
|
||||||
|
> - ANALIZE: Scadențe, Facturi Detaliate
|
||||||
|
> - ADMINISTRARE: Setări
|
||||||
|
|
||||||
### ASCII Diagram: Selection Mode Layout
|
### ASCII Diagram: Selection Mode Layout
|
||||||
|
|
||||||
```
|
```
|
||||||
@@ -241,16 +264,70 @@ import SwipeableCards from '@shared/components/mobile/SwipeableCards.vue'
|
|||||||
└─────────────────────────────────────────┘
|
└─────────────────────────────────────────┘
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### ASCII Diagram: Mobile Tab Pattern (Phase 3)
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────┐
|
||||||
|
│ MobileTopBar (56px) │
|
||||||
|
│ [≡] Facturi [📥] [🔍] │
|
||||||
|
├─────────────────────────────────────────┤
|
||||||
|
│┌──────────────────┬────────────────────┐│
|
||||||
|
││ Clienți │ Furnizori ││ ← Full-width tabs
|
||||||
|
││ ═══════════ │ ││ (Material Design 3)
|
||||||
|
│└──────────────────┴────────────────────┘│
|
||||||
|
├─────────────────────────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ TAB CONTENT │
|
||||||
|
│ (changes based on tab) │
|
||||||
|
│ │
|
||||||
|
│ padding-top: 104px (56+48) │
|
||||||
|
│ │
|
||||||
|
├─────────────────────────────────────────┤
|
||||||
|
│ MobileBottomNav (56px) │
|
||||||
|
│ 🏠 📋 📄 ⚙️ │
|
||||||
|
│ Dashboard Bonuri Facturi Setări │
|
||||||
|
└─────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
> **Used in:** Facturi (`/reports/invoices`), Scadențe (`/reports/maturity-analysis`)
|
||||||
|
|
||||||
|
### ASCII Diagram: FAB Pattern (Phase 3)
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────┐
|
||||||
|
│ MobileTopBar (56px) │
|
||||||
|
│ [≡] Bonuri [📥] [🔍] │
|
||||||
|
├─────────────────────────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ MAIN CONTENT │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────┐ │
|
||||||
|
│ │ Upload │ │ ← FAB Popup Menu
|
||||||
|
│ │ Bulk │ │ (appears on tap)
|
||||||
|
│ ├─────────────┤ │
|
||||||
|
│ │ Bon Nou │ │
|
||||||
|
│ └─────────────┘ │
|
||||||
|
│ [+] │ ← FAB (56x56px)
|
||||||
|
│ │ bottom: 72px
|
||||||
|
├─────────────────────────────────────────┤
|
||||||
|
│ MobileBottomNav (56px) │
|
||||||
|
│ 🏠 📋 📄 ⚙️ │
|
||||||
|
│ Dashboard Bonuri Facturi Setări │
|
||||||
|
└─────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
> **Used in:** Bonuri page (`/data-entry`) - Upload moved from footer to FAB
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Navigation Architecture
|
## Navigation Architecture
|
||||||
|
|
||||||
### Route Map
|
### Route Map (Phase 3 - Updated)
|
||||||
|
|
||||||
```
|
```
|
||||||
┌─────────────────────────────────────┐
|
┌─────────────────────────────────────┐
|
||||||
│ / (root) │
|
│ / (root) │
|
||||||
│ Redirects to /reports/dashboard │
|
│ Redirects to /dashboard │
|
||||||
└───────────────┬─────────────────────┘
|
└───────────────┬─────────────────────┘
|
||||||
│
|
│
|
||||||
┌───────────────────────────┼───────────────────────────┐
|
┌───────────────────────────┼───────────────────────────┐
|
||||||
@@ -259,18 +336,33 @@ import SwipeableCards from '@shared/components/mobile/SwipeableCards.vue'
|
|||||||
┌───────────────────┐ ┌───────────────────────┐ ┌─────────────────┐
|
┌───────────────────┐ ┌───────────────────────┐ ┌─────────────────┐
|
||||||
│ /data-entry │ │ /reports │ │ /settings │
|
│ /data-entry │ │ /reports │ │ /settings │
|
||||||
│ │ │ │ │ │
|
│ │ │ │ │ │
|
||||||
│ 📋 Bonuri List │ │ 📊 dashboard │ │ ⚙️ Settings Hub │
|
│ 📋 Bonuri List │ │ 📄 invoices [TABS] │ │ ⚙️ Settings Hub │
|
||||||
│ 📝 Bon Create │ │ 📄 invoices │ │ (centralized │
|
│ 📝 Bon Create │ │ 💰 bank-cash │ │ (centralized │
|
||||||
│ ✏️ Bon Edit │ │ 💰 bank-cash │ │ settings) │
|
│ ✏️ Bon Edit │ │ 🔢 trial-balance │ │ settings) │
|
||||||
│ 📊 OCR Metrics │ │ 🔢 trial-balance │ │ │
|
│ 📊 OCR Metrics │ │ 📉 maturity [TABS] │ │ │
|
||||||
│ │ │ 📉 maturity-analysis │ │ Links to: │
|
│ ☁️ Bulk Upload │ │ 📋 detailed-invoices │ │ Links to: │
|
||||||
│ │ │ 📋 detailed-invoices │ │ - OCR Settings │
|
│ │ │ 📈 cache-stats │ │ - OCR Settings │
|
||||||
│ │ │ 📈 cache-stats │ │ - Cache Stats │
|
│ [FAB: +] │ │ 📝 server-logs │ │ - Cache Stats │
|
||||||
│ │ │ 📝 server-logs │ │ - Server Logs │
|
│ - Bon Nou │ │ 📱 telegram │ │ - Server Logs │
|
||||||
│ │ │ 📱 telegram │ │ - Telegram │
|
│ - Upload Bulk │ │ │ │ - Telegram │
|
||||||
└───────────────────┘ └───────────────────────┘ └─────────────────┘
|
└───────────────────┘ └───────────────────────┘ └─────────────────┘
|
||||||
|
|
||||||
|
/dashboard
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
┌─────────────────────┐
|
||||||
|
│ 🏠 Dashboard │ ← Primary entry point (Footer Nav)
|
||||||
|
│ SwipeableCards KPIs│
|
||||||
|
│ (No quick-links │
|
||||||
|
│ on mobile) │
|
||||||
|
└─────────────────────┘
|
||||||
```
|
```
|
||||||
|
|
||||||
|
> **Phase 3 Navigation Changes:**
|
||||||
|
> - `/dashboard` is now a direct route in Footer Nav (not under `/reports`)
|
||||||
|
> - Invoices and Maturity Analysis have Clienți/Furnizori tabs
|
||||||
|
> - FAB on Bonuri page provides Bon Nou + Upload Bulk actions
|
||||||
|
|
||||||
### Navigation Flow: Settings Hub Pattern
|
### Navigation Flow: Settings Hub Pattern
|
||||||
|
|
||||||
The Settings Hub (`/settings`) is the centralized entry point for all administrative pages:
|
The Settings Hub (`/settings`) is the centralized entry point for all administrative pages:
|
||||||
@@ -303,58 +395,95 @@ MobileBottomNav "Setări" button
|
|||||||
└───────────────────────────────────┘
|
└───────────────────────────────────┘
|
||||||
```
|
```
|
||||||
|
|
||||||
### MobileBottomNav Default Items (Updated)
|
### MobileBottomNav Default Items (Phase 3 - 4 Direct Links)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// Default navigation items
|
// Default navigation items - Phase 3 (4 links, no action button)
|
||||||
[
|
[
|
||||||
|
{ to: '/dashboard', icon: 'pi pi-home', label: 'Dashboard' },
|
||||||
{ to: '/data-entry', icon: 'pi pi-receipt', label: 'Bonuri' },
|
{ to: '/data-entry', icon: 'pi pi-receipt', label: 'Bonuri' },
|
||||||
{ icon: 'pi pi-cloud-upload', label: 'Upload' }, // Action button
|
{ to: '/reports/invoices', icon: 'pi pi-file-edit', label: 'Facturi' },
|
||||||
{ to: '/reports/dashboard', icon: 'pi pi-chart-bar', label: 'Rapoarte' },
|
|
||||||
{ to: '/settings', icon: 'pi pi-cog', label: 'Setări' } // → Settings Hub
|
|
||||||
]
|
|
||||||
```
|
|
||||||
|
|
||||||
### MobileDrawerMenu Navigation Links
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// Drawer menu navigation items
|
|
||||||
[
|
|
||||||
{ to: '/reports/dashboard', icon: 'pi pi-home', label: 'Dashboard' },
|
|
||||||
{ to: '/data-entry', icon: 'pi pi-receipt', label: 'Bonuri' },
|
|
||||||
{ to: '/reports/invoices', icon: 'pi pi-file', label: 'Facturi' },
|
|
||||||
{ to: '/reports/trial-balance', icon: 'pi pi-calculator', label: 'Balanță' },
|
|
||||||
{ to: '/reports/bank-cash', icon: 'pi pi-money-bill', label: 'Trezorerie' },
|
|
||||||
{ to: '/settings', icon: 'pi pi-cog', label: 'Setări' }
|
{ to: '/settings', icon: 'pi pi-cog', label: 'Setări' }
|
||||||
]
|
]
|
||||||
```
|
```
|
||||||
|
|
||||||
### Dashboard Mobile Quick Links
|
> **Phase 3 Changes:**
|
||||||
|
> - Upload button removed from footer (moved to FAB on Bonuri page)
|
||||||
|
> - Dashboard added as direct link
|
||||||
|
> - Facturi added as direct link (with Clienți/Furnizori tabs)
|
||||||
|
> - All 4 items are now router links (no action buttons)
|
||||||
|
|
||||||
On mobile, Dashboard shows KPI cards plus quick-link cards:
|
### MobileDrawerMenu Navigation Links (Phase 3 - Grouped Categories)
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// PRINCIPALE: Primary navigation
|
||||||
|
const principaleItems = [
|
||||||
|
{ to: '/dashboard', icon: 'pi pi-home', label: 'Dashboard', exactMatch: true },
|
||||||
|
{ to: '/data-entry', icon: 'pi pi-receipt', label: 'Bonuri', exactMatch: false }
|
||||||
|
]
|
||||||
|
|
||||||
|
// RAPOARTE: Reports section
|
||||||
|
const rapoarteItems = [
|
||||||
|
{ to: '/reports/invoices', icon: 'pi pi-file', label: 'Facturi', exactMatch: true },
|
||||||
|
{ to: '/reports/trial-balance', icon: 'pi pi-calculator', label: 'Balanță', exactMatch: true },
|
||||||
|
{ to: '/reports/bank-cash', icon: 'pi pi-money-bill', label: 'Casa și Banca', exactMatch: true }
|
||||||
|
]
|
||||||
|
|
||||||
|
// ANALIZE: Analysis section
|
||||||
|
const analizeItems = [
|
||||||
|
{ to: '/reports/maturity-analysis', icon: 'pi pi-clock', label: 'Scadențe', exactMatch: true },
|
||||||
|
{ to: '/reports/detailed-invoices', icon: 'pi pi-list', label: 'Facturi Detaliate', exactMatch: true }
|
||||||
|
]
|
||||||
|
|
||||||
|
// ADMINISTRARE: Admin section
|
||||||
|
const administrareItems = [
|
||||||
|
{ to: '/settings', icon: 'pi pi-cog', label: 'Setări', exactMatch: false }
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
> **Phase 3 Changes:**
|
||||||
|
> - Navigation items organized into 4 visual sections with headers
|
||||||
|
> - Visual dividers between sections (`.drawer-divider`)
|
||||||
|
> - Section headers styled as uppercase labels (PRINCIPALE, RAPOARTE, ANALIZE, ADMINISTRARE)
|
||||||
|
> - `exactMatch` flag for precise active state highlighting
|
||||||
|
|
||||||
|
### Dashboard Mobile Layout (Phase 3 - KPIs Only)
|
||||||
|
|
||||||
|
On mobile, Dashboard shows ONLY KPI cards (quick-links removed in Phase 3):
|
||||||
|
|
||||||
```
|
```
|
||||||
┌─────────────────────────────────────────┐
|
┌─────────────────────────────────────────┐
|
||||||
│ MobileTopBar: Dashboard │
|
│ MobileTopBar: Dashboard │
|
||||||
|
│ [≡] Dashboard [📥] [🔍] │
|
||||||
├─────────────────────────────────────────┤
|
├─────────────────────────────────────────┤
|
||||||
│ │
|
│ │
|
||||||
│ ┌─────────────────────────────────┐ │
|
│ ┌─────────────────────────────────┐ │
|
||||||
│ │ SwipeableCards (KPIs) │ │
|
│ │ SwipeableCards (KPIs) │ │
|
||||||
│ │ ← Swipe → │ │
|
│ │ ← Swipe → │ │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ Total Facturi: 125,430 RON │ │
|
||||||
|
│ │ Scadențe: 5 restante │ │
|
||||||
|
│ │ ... │ │
|
||||||
|
│ │ │ │
|
||||||
│ └─────────────────────────────────┘ │
|
│ └─────────────────────────────────┘ │
|
||||||
│ │
|
│ │
|
||||||
│ ┌─────────────┐ ┌─────────────┐ │
|
│ ●━━━━●───● │
|
||||||
│ │ 📉 Analiză │ │ 📋 Facturi │ │
|
|
||||||
│ │ Scadențe → │ │ Detaliate → │ │
|
|
||||||
│ └─────────────┘ └─────────────┘ │
|
|
||||||
│ │
|
│ │
|
||||||
│ (Quick links to dedicated pages) │
|
│ (No quick-links on mobile - use │
|
||||||
|
│ Footer Nav or Hamburger Menu) │
|
||||||
│ │
|
│ │
|
||||||
├─────────────────────────────────────────┤
|
├─────────────────────────────────────────┤
|
||||||
│ MobileBottomNav │
|
│ MobileBottomNav (56px) │
|
||||||
|
│ 🏠 📋 📄 ⚙️ │
|
||||||
|
│ Dashboard Bonuri Facturi Setări │
|
||||||
└─────────────────────────────────────────┘
|
└─────────────────────────────────────────┘
|
||||||
```
|
```
|
||||||
|
|
||||||
|
> **Phase 3 Changes:**
|
||||||
|
> - Quick-link cards removed from mobile Dashboard
|
||||||
|
> - Desktop Dashboard keeps quick-links (unchanged)
|
||||||
|
> - Navigation to other pages via Footer Nav or Hamburger Menu
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## MobileTopBar
|
## MobileTopBar
|
||||||
@@ -538,7 +667,9 @@ const handleNavClick = (item) => {
|
|||||||
|
|
||||||
## MobileDrawerMenu
|
## MobileDrawerMenu
|
||||||
|
|
||||||
Material Design 3 inspired navigation drawer that slides in from the left. Replaces the desktop sidebar on mobile devices.
|
*(UPDATED - Phase 3)*
|
||||||
|
|
||||||
|
Material Design 3 inspired navigation drawer that slides in from the left. Replaces the desktop sidebar on mobile devices. **Phase 3** reorganized navigation into grouped categories with visual separators.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
@@ -555,19 +686,61 @@ Material Design 3 inspired navigation drawer that slides in from the left. Repla
|
|||||||
| `update:modelValue` | `boolean` | v-model update when visibility changes |
|
| `update:modelValue` | `boolean` | v-model update when visibility changes |
|
||||||
| `logout` | - | Emitted when logout is clicked (if no `onLogout` prop) |
|
| `logout` | - | Emitted when logout is clicked (if no `onLogout` prop) |
|
||||||
|
|
||||||
### Navigation Items (Built-in)
|
### Navigation Items (Phase 3 - Grouped Categories)
|
||||||
|
|
||||||
The drawer contains the following navigation links:
|
The drawer navigation is organized into 4 sections with visual separators:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
[
|
// PRINCIPALE Section
|
||||||
{ to: '/reports/dashboard', icon: 'pi pi-home', label: 'Dashboard' },
|
const principaleItems = [
|
||||||
{ to: '/data-entry', icon: 'pi pi-receipt', label: 'Bonuri' },
|
{ to: '/dashboard', icon: 'pi pi-home', label: 'Dashboard', exactMatch: true },
|
||||||
{ to: '/reports/invoices', icon: 'pi pi-file', label: 'Facturi' },
|
{ to: '/data-entry', icon: 'pi pi-receipt', label: 'Bonuri', exactMatch: false }
|
||||||
{ to: '/reports/trial-balance', icon: 'pi pi-calculator', label: 'Balanță' },
|
|
||||||
{ to: '/reports/bank-cash', icon: 'pi pi-money-bill', label: 'Trezorerie' },
|
|
||||||
{ to: '/settings', icon: 'pi pi-cog', label: 'Setări' }
|
|
||||||
]
|
]
|
||||||
|
|
||||||
|
// RAPOARTE Section
|
||||||
|
const rapoarteItems = [
|
||||||
|
{ to: '/reports/invoices', icon: 'pi pi-file', label: 'Facturi', exactMatch: true },
|
||||||
|
{ to: '/reports/trial-balance', icon: 'pi pi-calculator', label: 'Balanță', exactMatch: true },
|
||||||
|
{ to: '/reports/bank-cash', icon: 'pi pi-money-bill', label: 'Casa și Banca', exactMatch: true }
|
||||||
|
]
|
||||||
|
|
||||||
|
// ANALIZE Section
|
||||||
|
const analizeItems = [
|
||||||
|
{ to: '/reports/maturity-analysis', icon: 'pi pi-clock', label: 'Scadențe', exactMatch: true },
|
||||||
|
{ to: '/reports/detailed-invoices', icon: 'pi pi-list', label: 'Facturi Detaliate', exactMatch: true }
|
||||||
|
]
|
||||||
|
|
||||||
|
// ADMINISTRARE Section
|
||||||
|
const administrareItems = [
|
||||||
|
{ to: '/settings', icon: 'pi pi-cog', label: 'Setări', exactMatch: false }
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
### Section Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
┌──────────────────┐
|
||||||
|
│ 🏢 ROA2WEB │ ← Header with logo
|
||||||
|
├──────────────────┤
|
||||||
|
│ PRINCIPALE │ ← Section header (uppercase)
|
||||||
|
│ 🏠 Dashboard │
|
||||||
|
│ 📋 Bonuri │
|
||||||
|
│ ────────────── │ ← Divider
|
||||||
|
│ RAPOARTE │
|
||||||
|
│ 📄 Facturi │
|
||||||
|
│ 🔢 Balanță │
|
||||||
|
│ 💰 Casa și Banca│
|
||||||
|
│ ────────────── │
|
||||||
|
│ ANALIZE │
|
||||||
|
│ ⏰ Scadențe │
|
||||||
|
│ 📋 Facturi Det. │
|
||||||
|
│ ────────────── │
|
||||||
|
│ ADMINISTRARE │
|
||||||
|
│ ⚙️ Setări │
|
||||||
|
├──────────────────┤
|
||||||
|
│ 👤 Username │ ← Profile section (footer)
|
||||||
|
│ 🚪 Deconectare │
|
||||||
|
└──────────────────┘
|
||||||
```
|
```
|
||||||
|
|
||||||
### Basic Usage
|
### Basic Usage
|
||||||
@@ -631,15 +804,40 @@ const handleLogout = async () => {
|
|||||||
|
|
||||||
| Class | Description |
|
| Class | Description |
|
||||||
|-------|-------------|
|
|-------|-------------|
|
||||||
| `.drawer-overlay` | Full-screen backdrop (50% black) |
|
| `.drawer-overlay` | Full-screen backdrop (50% black, 70% in dark mode) |
|
||||||
| `.drawer-menu` | Main drawer container (280px, max 85vw) |
|
| `.drawer-menu` | Main drawer container (280px, max 85vw) |
|
||||||
| `.drawer-header` | Header with logo |
|
| `.drawer-header` | Header with logo |
|
||||||
| `.drawer-section` | Navigation links container |
|
| `.drawer-sections` | Scrollable container for all navigation sections |
|
||||||
|
| `.drawer-section` | Individual section container |
|
||||||
|
| `.section-header` | Section header label (PRINCIPALE, RAPOARTE, etc.) - uppercase, small text |
|
||||||
|
| `.drawer-nav` | List container for navigation links |
|
||||||
| `.drawer-link` | Individual navigation link (48px min-height) |
|
| `.drawer-link` | Individual navigation link (48px min-height) |
|
||||||
| `.drawer-link.active` | Active route styling (blue background) |
|
| `.drawer-link.active` | Active route styling (blue background) |
|
||||||
|
| `.drawer-divider` | Visual separator between sections |
|
||||||
| `.drawer-profile` | Profile section at bottom |
|
| `.drawer-profile` | Profile section at bottom |
|
||||||
|
| `.profile-header` | User avatar and name row |
|
||||||
|
| `.profile-avatar` | Circular avatar with user icon |
|
||||||
| `.logout-link` | Red logout button styling |
|
| `.logout-link` | Red logout button styling |
|
||||||
|
|
||||||
|
### Section Header Styling
|
||||||
|
|
||||||
|
```css
|
||||||
|
.section-header {
|
||||||
|
padding: var(--space-sm) var(--space-lg);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
color: var(--text-color-secondary);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-divider {
|
||||||
|
height: 1px;
|
||||||
|
background: var(--surface-border);
|
||||||
|
margin: var(--space-xs) var(--space-md);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
### Animation
|
### Animation
|
||||||
|
|
||||||
Uses Vue `<Transition name="drawer">`:
|
Uses Vue `<Transition name="drawer">`:
|
||||||
@@ -649,6 +847,330 @@ Uses Vue `<Transition name="drawer">`:
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## Mobile Tab Pattern
|
||||||
|
|
||||||
|
*(NEW - Phase 3)*
|
||||||
|
|
||||||
|
Material Design 3 inspired full-width tabs for switching between Clienți and Furnizori views. Used in pages that display partner-related data.
|
||||||
|
|
||||||
|
### When to Use
|
||||||
|
|
||||||
|
Use the Mobile Tab Pattern when:
|
||||||
|
- A page shows data that can be filtered by partner type (Clienți/Furnizori)
|
||||||
|
- The tab switch should be persistent via URL query parameter
|
||||||
|
- Both tabs share the same filters (except type)
|
||||||
|
|
||||||
|
### Implementation
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<!-- US-304/US-305: Mobile Tabs for Clienți/Furnizori -->
|
||||||
|
<div v-if="isMobile" class="mobile-tabs-container">
|
||||||
|
<div class="mobile-tabs">
|
||||||
|
<button
|
||||||
|
class="mobile-tab"
|
||||||
|
:class="{ active: activeTab === 'clients' }"
|
||||||
|
@click="switchTab('clients')"
|
||||||
|
>
|
||||||
|
<span class="tab-label">Clienți</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="mobile-tab"
|
||||||
|
:class="{ active: activeTab === 'suppliers' }"
|
||||||
|
@click="switchTab('suppliers')"
|
||||||
|
>
|
||||||
|
<span class="tab-label">Furnizori</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
// Tab state synced with URL query param
|
||||||
|
const activeTab = ref(route.query.tab === 'suppliers' ? 'suppliers' : 'clients')
|
||||||
|
|
||||||
|
// Switch tab and update URL
|
||||||
|
const switchTab = (tab) => {
|
||||||
|
if (tab === activeTab.value) return
|
||||||
|
activeTab.value = tab
|
||||||
|
|
||||||
|
// Update URL query param without full navigation
|
||||||
|
router.replace({
|
||||||
|
query: { ...route.query, tab: tab === 'clients' ? undefined : tab }
|
||||||
|
})
|
||||||
|
|
||||||
|
// Trigger data reload with new type
|
||||||
|
loadData()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
### CSS Classes
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Tab container - positioned below MobileTopBar */
|
||||||
|
.mobile-tabs-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 56px; /* Below MobileTopBar */
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 999;
|
||||||
|
background: var(--surface-card);
|
||||||
|
border-bottom: 1px solid var(--surface-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-tabs {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-tab {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: var(--space-md) var(--space-sm);
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
color: var(--text-color-secondary);
|
||||||
|
min-height: 48px;
|
||||||
|
font-size: var(--text-base);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-tab:active {
|
||||||
|
background: var(--surface-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-tab.active {
|
||||||
|
color: var(--color-primary);
|
||||||
|
border-bottom-color: var(--color-primary);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Content Padding
|
||||||
|
|
||||||
|
When using tabs, increase top padding to account for both bars:
|
||||||
|
|
||||||
|
```css
|
||||||
|
.mobile-content-with-tabs {
|
||||||
|
padding-top: 104px; /* 56px (TopBar) + 48px (Tabs) */
|
||||||
|
padding-bottom: 56px; /* BottomNav */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Used In
|
||||||
|
|
||||||
|
| Page | Route | Description |
|
||||||
|
|------|-------|-------------|
|
||||||
|
| **Facturi** | `/reports/invoices` | Switch between client/supplier invoices |
|
||||||
|
| **Scadențe** | `/reports/maturity-analysis` | Switch between client/supplier maturity |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## FAB Pattern
|
||||||
|
|
||||||
|
*(NEW - Phase 3)*
|
||||||
|
|
||||||
|
Material Design 3 inspired Floating Action Button (FAB) for contextual actions. Positioned above MobileBottomNav with popup menu support.
|
||||||
|
|
||||||
|
### When to Use
|
||||||
|
|
||||||
|
Use the FAB Pattern when:
|
||||||
|
- A page has primary actions that benefit from prominent placement
|
||||||
|
- Multiple related actions can be grouped (popup menu)
|
||||||
|
- Actions were previously in footer/header but need better mobile UX
|
||||||
|
|
||||||
|
### Design Tokens
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// From PRD cssRules.mobileLayoutTokens
|
||||||
|
{
|
||||||
|
fabSize: '56px', // FAB diameter
|
||||||
|
fabBottomOffset: '72px', // 56px (nav) + 16px spacing
|
||||||
|
touchTargetMin: '48px' // Minimum touch target
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Implementation
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<!-- FAB Button -->
|
||||||
|
<Transition name="fab-slide">
|
||||||
|
<button
|
||||||
|
v-if="isMobile && !selectionMode && fabVisible"
|
||||||
|
class="mobile-fab"
|
||||||
|
:class="{ 'fab-active': fabMenuOpen }"
|
||||||
|
@click="toggleFabMenu"
|
||||||
|
aria-label="Meniu acțiuni"
|
||||||
|
aria-haspopup="true"
|
||||||
|
:aria-expanded="fabMenuOpen"
|
||||||
|
>
|
||||||
|
<i class="pi pi-plus" :class="{ 'fab-icon-rotate': fabMenuOpen }"></i>
|
||||||
|
</button>
|
||||||
|
</Transition>
|
||||||
|
|
||||||
|
<!-- FAB Popup Menu -->
|
||||||
|
<Menu
|
||||||
|
ref="fabMenuRef"
|
||||||
|
:model="fabMenuItems"
|
||||||
|
:popup="true"
|
||||||
|
class="fab-popup-menu"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import Menu from 'primevue/menu'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const fabMenuRef = ref(null)
|
||||||
|
const fabMenuOpen = ref(false)
|
||||||
|
const fabVisible = ref(true)
|
||||||
|
|
||||||
|
// FAB Menu Items
|
||||||
|
const fabMenuItems = [
|
||||||
|
{
|
||||||
|
label: 'Bon Nou',
|
||||||
|
icon: 'pi pi-plus',
|
||||||
|
command: () => router.push('/data-entry/receipts/new')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Upload Bulk',
|
||||||
|
icon: 'pi pi-cloud-upload',
|
||||||
|
command: () => openBulkUpload()
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
// Toggle FAB Menu
|
||||||
|
const toggleFabMenu = (event) => {
|
||||||
|
fabMenuOpen.value = !fabMenuOpen.value
|
||||||
|
fabMenuRef.value?.toggle(event)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide FAB during scroll, show when scroll stops
|
||||||
|
let lastScrollY = 0
|
||||||
|
const handleScroll = () => {
|
||||||
|
const currentScrollY = window.scrollY
|
||||||
|
const scrollDelta = currentScrollY - lastScrollY
|
||||||
|
|
||||||
|
if (scrollDelta > 10) {
|
||||||
|
fabVisible.value = false // Scrolling down - hide
|
||||||
|
} else if (scrollDelta < -10) {
|
||||||
|
fabVisible.value = true // Scrolling up - show
|
||||||
|
}
|
||||||
|
|
||||||
|
lastScrollY = currentScrollY
|
||||||
|
|
||||||
|
// Show after scroll stops (300ms)
|
||||||
|
clearTimeout(scrollTimeout)
|
||||||
|
scrollTimeout = setTimeout(() => {
|
||||||
|
fabVisible.value = true
|
||||||
|
}, 300)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
### CSS Classes
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* FAB Button */
|
||||||
|
.mobile-fab {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 72px; /* 56px nav + 16px spacing */
|
||||||
|
right: var(--space-md);
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
background: var(--color-primary);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 999;
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-fab:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-fab i {
|
||||||
|
font-size: var(--text-2xl);
|
||||||
|
transition: transform var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* FAB active state when menu open */
|
||||||
|
.mobile-fab.fab-active {
|
||||||
|
background: var(--color-primary-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-fab .fab-icon-rotate {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* FAB Popup Menu positioning */
|
||||||
|
.fab-popup-menu {
|
||||||
|
position: fixed !important;
|
||||||
|
bottom: 140px !important; /* 72px + 56px + 12px */
|
||||||
|
right: var(--space-md) !important;
|
||||||
|
left: auto !important;
|
||||||
|
top: auto !important;
|
||||||
|
min-width: 180px;
|
||||||
|
z-index: 1000 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* FAB slide animation */
|
||||||
|
.fab-slide-enter-active,
|
||||||
|
.fab-slide-leave-active {
|
||||||
|
transition: transform var(--transition-normal), opacity var(--transition-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab-slide-enter-from,
|
||||||
|
.fab-slide-leave-to {
|
||||||
|
transform: translateY(100px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Behavior
|
||||||
|
|
||||||
|
| Interaction | Result |
|
||||||
|
|-------------|--------|
|
||||||
|
| **Tap FAB** | Opens popup menu with actions |
|
||||||
|
| **Tap menu item** | Executes action, closes menu |
|
||||||
|
| **Tap outside** | Closes menu |
|
||||||
|
| **Scroll down** | FAB hides (slide down) |
|
||||||
|
| **Scroll up** | FAB shows (slide up) |
|
||||||
|
| **Scroll stops** | FAB reappears after 300ms |
|
||||||
|
| **Selection mode** | FAB hidden (replaced by selection footer) |
|
||||||
|
|
||||||
|
### Used In
|
||||||
|
|
||||||
|
| Page | Route | Actions |
|
||||||
|
|------|-------|---------|
|
||||||
|
| **Bonuri** | `/data-entry` | Bon Nou, Upload Bulk |
|
||||||
|
|
||||||
|
> **Phase 3 Note:** Upload was moved from Footer Nav to FAB to reduce footer clutter and provide better contextual placement.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## MobileActionBar
|
## MobileActionBar
|
||||||
|
|
||||||
Context-aware bottom action bar for forms and edit views. Positions above MobileBottomNav and displays action buttons based on current state.
|
Context-aware bottom action bar for forms and edit views. Positions above MobileBottomNav and displays action buttons based on current state.
|
||||||
@@ -1355,6 +1877,17 @@ Check that `data-theme` attribute is set correctly.
|
|||||||
|
|
||||||
## Changelog
|
## Changelog
|
||||||
|
|
||||||
|
### Version 3.0.0 (2026-01-12) - Phase 3: Mobile Navigation Overhaul
|
||||||
|
|
||||||
|
- **NEW**: Added `Mobile Tab Pattern` section for Clienți/Furnizori switching (US-304, US-305)
|
||||||
|
- **NEW**: Added `FAB Pattern` section for contextual actions (US-303)
|
||||||
|
- **UPDATED**: `MobileBottomNav` - 4 direct links: Dashboard, Bonuri, Facturi, Setări (US-307)
|
||||||
|
- **UPDATED**: `MobileDrawerMenu` - Grouped categories: PRINCIPALE, RAPOARTE, ANALIZE, ADMINISTRARE (US-308)
|
||||||
|
- **UPDATED**: Dashboard mobile layout - KPIs only, quick-links removed (US-309)
|
||||||
|
- **UPDATED**: ASCII diagrams with new navigation structure and FAB/Tab patterns
|
||||||
|
- **UPDATED**: Navigation Architecture with Phase 3 route map
|
||||||
|
- **REMOVED**: Upload button from footer nav (moved to FAB on Bonuri page)
|
||||||
|
|
||||||
### Version 2.0.0 (2026-01-12)
|
### Version 2.0.0 (2026-01-12)
|
||||||
|
|
||||||
- **NEW**: Added `MobileDrawerMenu` component documentation
|
- **NEW**: Added `MobileDrawerMenu` component documentation
|
||||||
@@ -1371,5 +1904,5 @@ Check that `data-theme` attribute is set correctly.
|
|||||||
---
|
---
|
||||||
|
|
||||||
**Last Updated:** 2026-01-12
|
**Last Updated:** 2026-01-12
|
||||||
**Version:** 2.0.0
|
**Version:** 3.0.0
|
||||||
**Maintained By:** Frontend Team
|
**Maintained By:** Frontend Team
|
||||||
|
|||||||
@@ -209,8 +209,8 @@
|
|||||||
"Diagrame ASCII actualizate cu noua structură navigare",
|
"Diagrame ASCII actualizate cu noua structură navigare",
|
||||||
"npm run build passes"
|
"npm run build passes"
|
||||||
],
|
],
|
||||||
"passes": false,
|
"passes": true,
|
||||||
"notes": ""
|
"notes": "Completed in iteration 9"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1068,3 +1068,9 @@ User Stories: 11 (US-301 to US-311)
|
|||||||
[2026-01-12 16:52:33] Working on story: US-310
|
[2026-01-12 16:52:33] Working on story: US-310
|
||||||
[2026-01-12 16:52:33] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_8_US-310.log)
|
[2026-01-12 16:52:33] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_8_US-310.log)
|
||||||
[2026-01-12 16:53:44] SUCCESS: Story US-310 passed!
|
[2026-01-12 16:53:44] SUCCESS: Story US-310 passed!
|
||||||
|
[2026-01-12 16:53:44] Changes committed
|
||||||
|
[2026-01-12 16:53:44] Progress: 10/11 stories completed
|
||||||
|
[2026-01-12 16:53:46] === Iteration 9/100 ===
|
||||||
|
[2026-01-12 16:53:46] Working on story: US-311
|
||||||
|
[2026-01-12 16:53:46] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_9_US-311.log)
|
||||||
|
[2026-01-12 16:59:01] SUCCESS: Story US-311 passed!
|
||||||
|
|||||||
Reference in New Issue
Block a user