diff --git a/NAVIDOCS_UI_STRATEGY_AND_WEATHER.md b/NAVIDOCS_UI_STRATEGY_AND_WEATHER.md new file mode 100644 index 0000000..f140f6f --- /dev/null +++ b/NAVIDOCS_UI_STRATEGY_AND_WEATHER.md @@ -0,0 +1,1167 @@ +# NaviDocs UI Strategy: Apple Ease-of-Use + Garmin Clarity + Weather Integration + +**Created:** 2025-11-14 +**Goal:** Unified design system across all 6 modules with weather integration + +--- + +## Current Module Analysis + +### 1. **Inventory Module** (Simple/Clean Design) +**Current Style:** Basic forms, category filters, modal overlays +**Strengths:** Simple, functional +**Weaknesses:** No visual hierarchy, plain table layouts, lacks glanceability + +### 2. **Maintenance Module** (Most Polished) +**Current Style:** Glass morphism (`bg-white/5 backdrop-blur-lg`), gradient backgrounds (`from-slate-900 via-slate-800`), calendar view +**Strengths:** Modern aesthetics, dual view modes (calendar/list), visual feedback +**Weaknesses:** Still lacks Garmin-style clarity for critical information + +### 3. **Camera Module** (Basic/Functional) +**Current Style:** Simple forms with RTSP inputs +**Strengths:** Clear input validation, escape key handling +**Weaknesses:** No thumbnail previews, lacks visual status indicators + +### 4. **Contacts Module** (Dashboard-Style) +**Current Style:** Stats cards with color-coded types (Marina=blue, Mechanic=amber, Vendor=green), gradient backgrounds +**Strengths:** Dashboard overview, category breakdown, search functionality +**Weaknesses:** Cards could be more glanceable with larger typography + +### 5. **Expense Module** (Most Complex) +**Current Style:** Glass effects, gradient headers (`from-blue-400 to-cyan-400`), multi-user approval workflow +**Strengths:** Sophisticated forms, OCR integration planned, approval states +**Weaknesses:** Complex UI could overwhelm users without progressive disclosure + +### 6. **Weather Module** (NEW - To Be Built) +**Requirements:** Real-time weather data, marine-specific metrics, iframe integration from Windy/Windfinder + +--- + +## Design Principles: Apple × Garmin Hybrid + +### **Apple HIG Principles We'll Keep:** +1. **Clarity** - Text should be legible at all sizes, icons precise, adornments subtle +2. **Deference** - Content is king; UI helps people understand and interact with content +3. **Depth** - Visual layers and realistic motion convey hierarchy +4. **60×60px Touch Targets** (marine glove-friendly, larger than Apple's 44pt minimum) +5. **Bottom Tab Navigation** - Reachable with thumb while holding device +6. **SF Pro Font** (or system default) - Optimal readability + +### **Garmin Clarity Features We'll Add:** +1. **High-Contrast Data Display** - Critical info readable in direct sunlight +2. **Large Typography for Key Metrics** - 32-48px for important numbers +3. **Color-Coded Status Indicators** - Green=OK, Amber=Warning, Red=Critical +4. **Minimalist Charts** - Clean lines, no unnecessary decoration +5. **Glanceable Dashboard** - See all critical info without scrolling +6. **Dark Mode by Default** - Better for night vision on water + +--- + +## Unified Design System + +### **Color Palette (Marine-Themed)** + +```css +/* Primary Colors */ +--navy-blue: #1E3A8A; /* Headers, primary actions */ +--ocean-teal: #0D9488; /* Accent, success states */ +--sky-blue: #0EA5E9; /* Links, secondary actions */ + +/* Status Colors (Garmin-inspired) */ +--status-ok: #10B981; /* Green - systems normal */ +--status-warning: #F59E0B; /* Amber - attention needed */ +--status-critical: #EF4444; /* Red - urgent action */ +--status-info: #3B82F6; /* Blue - informational */ + +/* Neutral Colors (Dark Mode Base) */ +--slate-950: #020617; /* App background */ +--slate-900: #0F172A; /* Card backgrounds */ +--slate-800: #1E293B; /* Elevated surfaces */ +--white-10: rgba(255,255,255,0.1); /* Borders */ +--white-60: rgba(255,255,255,0.6); /* Secondary text */ +--white-90: rgba(255,255,255,0.9); /* Primary text */ + +/* Glass Effect */ +--glass-bg: rgba(255,255,255,0.05); +--glass-border: rgba(255,255,255,0.1); +--glass-blur: blur(20px); +``` + +### **Typography Scale** + +```css +/* Garmin-inspired large metrics */ +--text-metric-lg: 48px; /* Hero numbers (weather temp, total expenses) */ +--text-metric-md: 32px; /* Dashboard stats */ +--text-metric-sm: 24px; /* Card values */ + +/* Apple HIG text sizes */ +--text-hero: 34px; /* Page titles */ +--text-title1: 28px; /* Section headers */ +--text-title2: 22px; /* Card headers */ +--text-title3: 20px; /* List headers */ +--text-body: 17px; /* Body text (Apple's recommended base) */ +--text-callout: 16px; /* Supporting text */ +--text-caption: 13px; /* Labels, metadata */ + +/* Font families */ +--font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto; +--font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto; +--font-mono: "SF Mono", Monaco, "Cascadia Code", Consolas, monospace; +``` + +### **Spacing System (8pt Grid)** + +```css +--space-1: 4px; /* Micro spacing */ +--space-2: 8px; /* Base unit */ +--space-3: 12px; /* Tight spacing */ +--space-4: 16px; /* Comfortable spacing */ +--space-5: 20px; /* Section spacing */ +--space-6: 24px; /* Large spacing */ +--space-8: 32px; /* XL spacing */ +--space-12: 48px; /* Hero spacing */ +--space-16: 64px; /* Page margins */ +``` + +### **Component Library** + +#### **Glass Card (Standard Module Container)** +```vue + + + +``` + +#### **Metric Display (Garmin-Style Large Number)** +```vue + + + + + +``` + +#### **Bottom Tab Navigation (Apple HIG)** +```vue + + + +``` + +--- + +## Module Redesign Specifications + +### **1. Dashboard (NEW - Home Screen)** + +**Layout:** 3×2 grid of glanceable metrics + quick actions + +```vue + + + +``` + +### **2. Inventory Module Redesign** + +**Changes:** +- Replace table with card grid (better for touch) +- Add depreciation chart per item +- Large item photos with zoom + +```vue + + + +``` + +### **3. Maintenance Module** (Keep Current Glass Style, Add Garmin Clarity) + +**Changes:** +- Add large countdown timers for upcoming services +- Color-code urgency (Green=30+ days, Amber=7-30 days, Red=<7 days) +- Show service history chart + +```vue + +
+ +
+

{{ service.daysUntil }}

+

days

+
+
+

{{ service.service_type }}

+

{{ service.boat_name }}

+
+ +
+ + +``` + +### **4. Camera Module** (Add Live Thumbnails + Garmin-Style Status Indicators) + +**Changes:** +- Grid of camera thumbnails (not just list) +- Large status dots (Green=Online, Red=Offline) +- Tap to full-screen video + +```vue + + + +``` + +### **5. Contacts Module** (Keep Current Design, Add Garmin Touch Targets) + +**Changes:** +- Increase tap targets to 60×60px +- Add one-tap call/email/WhatsApp buttons +- Show distance to marina/vendor (if geolocation available) + +### **6. Expense Module** (Simplify with Progressive Disclosure) + +**Changes:** +- Hide complex multi-user approval UI behind "Advanced" toggle +- Show simple expense list by default +- Add chart showing expense breakdown by category + +--- + +## Weather Module (NEW) + +### **Primary Goal:** Marine-specific weather data with Garmin clarity + +### **Data Sources:** + +1. **Windy.com Embed** (Wind/Wave/Temperature layers) +2. **Windfinder.com Embed** (Wind forecast specific to location) +3. **Open-Meteo Marine API** (Free, no API key needed) + +### **Implementation Strategy:** + +#### **Option A: Iframe Embed (Simplest)** + +```vue + + + + + +``` + +#### **Option B: Scraping/API Integration (More Complex)** + +If iframe restrictions are an issue, we can: + +1. **Use Open-Meteo Marine API** (free, returns JSON) +2. **Use Windy API** (requires API key, $199/year for commercial) +3. **Scrape Windfinder** (not recommended, violates TOS) + +**Recommended:** Use iframe embeds (Option A) for map visualizations, fetch Open-Meteo API for numerical data to display in Garmin-style metrics. + +### **Marine-Specific Weather Alerts** + +```vue + + + +``` + +--- + +## Implementation Roadmap + +### **Phase 1: Core Design System (1 week)** +- [ ] Create CSS custom properties file (`design-tokens.css`) +- [ ] Build component library: + - [ ] GlassCard.vue + - [ ] MetricDisplay.vue + - [ ] BottomTabNavigation.vue + - [ ] StatusIndicator.vue +- [ ] Test dark mode on actual device in sunlight + +### **Phase 2: Module Redesigns (2 weeks)** +- [ ] Dashboard (new home screen) +- [ ] Inventory (card grid) +- [ ] Maintenance (urgency indicators) +- [ ] Camera (live thumbnails) +- [ ] Contacts (60px touch targets) +- [ ] Expense (progressive disclosure) + +### **Phase 3: Weather Module (1 week)** +- [ ] Integrate Open-Meteo Marine API +- [ ] Embed Windy iframe +- [ ] Embed Windfinder iframe +- [ ] Build 5-day forecast strip +- [ ] Add weather alerts + +### **Phase 4: Polish & Testing (1 week)** +- [ ] Test on iPad in bright sunlight (verify Garmin clarity) +- [ ] Test with sailing gloves (verify 60px touch targets) +- [ ] Performance audit (target: 60fps scrolling) +- [ ] Accessibility audit (WCAG 2.1 AA) + +--- + +## Budget Estimate + +| Phase | Description | Time | Cost | +|-------|-------------|------|------| +| Phase 1 | Design system + components | 40 hours | €3,200 | +| Phase 2 | Module redesigns | 80 hours | €6,400 | +| Phase 3 | Weather module | 40 hours | €3,200 | +| Phase 4 | Polish + testing | 40 hours | €3,200 | +| **Total** | | **200 hours** | **€16,000** | + +*Assumes €80/hour senior frontend developer rate* + +--- + +## Key Decisions Summary + +1. **Design System:** Apple HIG + Garmin clarity hybrid +2. **Navigation:** Bottom tab bar (6 tabs max, iOS-style) +3. **Color Palette:** Dark mode by default, marine blue/teal accent +4. **Touch Targets:** 60×60px minimum (glove-friendly) +5. **Typography:** Large metrics (32-48px) for critical data +6. **Weather Data:** Open-Meteo Marine API (free) + Windy/Windfinder iframes +7. **Dashboard:** Glanceable 3×2 grid of key metrics +8. **Status Indicators:** Color-coded (Green/Amber/Red) Garmin-style dots + +--- + +**Next Steps:** Review this strategy document, approve design direction, then launch Phase 1 agents to build component library.