Commit Graph

414 Commits

Author SHA1 Message Date
Urtzi Alfaro
5642b5a0c0 demo seed change 7 2025-12-15 13:39:33 +01:00
Urtzi Alfaro
82f9622411 demo seed change 4 2025-12-14 19:05:37 +01:00
Urtzi Alfaro
a030bd14c8 demo seed change 2 2025-12-14 11:58:14 +01:00
Urtzi Alfaro
ff830a3415 demo seed change 2025-12-13 23:57:54 +01:00
Urtzi Alfaro
e116ac244c Fix and UI imporvements 3 2025-12-10 11:23:53 +01:00
Urtzi Alfaro
46f5158536 Fix and UI imporvements 2 2025-12-09 13:45:09 +01:00
Urtzi Alfaro
508f4569b9 Fix and UI imporvements 2025-12-09 10:21:41 +01:00
Urtzi Alfaro
667e6e0404 New alert service 2025-12-05 20:07:01 +01:00
Urtzi Alfaro
972db02f6d New enterprise feature 2025-11-30 09:12:40 +01:00
Urtzi Alfaro
fd657dea02 refactor(demo): Standardize demo account type names across codebase
Standardize demo account type naming from inconsistent variants to clean names:
- individual_bakery, professional_bakery → professional
- central_baker, enterprise_chain → enterprise

This eliminates naming confusion that was causing bugs in the demo session
initialization, particularly for enterprise demo tenants where different
parts of the system used different names for the same concept.

Changes:
- Updated source of truth in demo_session config
- Updated all backend services (middleware, cloning, orchestration)
- Updated frontend types, pages, and stores
- Updated demo session models and schemas
- Removed all backward compatibility code as requested

Related to: Enterprise demo session access fix

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-30 08:48:56 +01:00
Urtzi Alfaro
2d9fc01515 New alert system and panel de control page 2 2025-11-27 16:28:44 +01:00
Urtzi Alfaro
e902419b6e New alert system and panel de control page 2025-11-27 15:52:40 +01:00
Urtzi Alfaro
b545d05d23 fix(dashboard): Fix production plans and reasoning modal issues
1. **Fix "Sin Plan" (No Production Planned)**:
   - Updated BASE_REFERENCE_DATE from Nov 25 to Nov 27 to match current date
   - Production batches were being filtered out because they were dated for Nov 25
   - The get_todays_batches() method filters for batches scheduled TODAY

2. **Fix "Ver razonamiento" Button Not Opening Modal**:
   - Changed handleOpenReasoning() to always emit 'reasoning:show' event
   - Previous logic tried to navigate to PO/batch detail pages instead
   - Now keeps user on dashboard and shows reasoning modal inline
   - Passes all metadata (action_id, po_id, batch_id, reasoning) in event

This ensures production progress shows correctly and users can view
AI reasoning without leaving the dashboard.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-27 11:02:59 +01:00
Urtzi Alfaro
ddf841bd70 chore(dashboard): Remove temporary debug console.log statements
Removed debugging logs added during infinite loop investigation.
The fix has been verified and these logs are no longer needed.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-27 07:45:42 +01:00
Urtzi Alfaro
a6c513579b style(dashboard): Align visual hierarchy across cards
UnifiedActionQueueCard changes:
- Update container: shadow-xl, border-2, hover:shadow-2xl
- Add large hero icon (w-16 h-16 md:w-20 md:h-20) with AlertCircle
- Colored background based on queue urgency (red/blue)
- Upgrade title to text-2xl md:text-3xl font-bold
- Move total actions and SSE status to inline metric badges

ExecutionProgressTracker changes:
- Update container: shadow-xl, border-2, hover:shadow-2xl
- Add large hero icon (w-16 h-16 md:w-20 md:h-20) with TrendingUp
- Primary color background for hero icon
- Upgrade title to text-2xl md:text-3xl font-bold

Both cards now match the visual weight and hero pattern of
GlanceableHealthHero and IntelligentSystemSummaryCard for
consistent dashboard hierarchy and improved scannability.

Fixes: Issue #1 - Style alignment

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-27 07:42:14 +01:00
Urtzi Alfaro
407429d50a feat(dashboard): Add i18n support for action buttons
- Create getActionLabelKey() mapper function for action types
- Map action types (approve_po, call_supplier, etc.) to i18n keys
- Extract parameters from metadata (amount, supplier, customer, hours)
- Update button rendering to use translations instead of backend strings

Translation updates:
- Add missing action keys: reject_po, complete_receipt, mark_received
- Spanish translations: "Rechazar pedido", "Completar recepción", etc.
- Basque translations: "Baztertu eskaera", "Osatu stockaren harrera", etc.

Action buttons now respect user's language preference (EN/ES/EU)
instead of showing hardcoded backend strings.

Fixes: Issue #4 - Missing i18n for action buttons

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-27 07:40:12 +01:00
Urtzi Alfaro
70931cb4fd feat(dashboard): Add production batch details to execution progress
Backend changes (dashboard_service.py):
- Collect in-progress batch details with id, batchNumber, productName, etc.
- Add inProgressBatches array to production progress response

Frontend changes (ExecutionProgressTracker.tsx):
- Update ProductionProgress interface to include inProgressBatches array
- Display batch names and numbers under "En Progreso" count
- Show which specific batches are currently running

Users can now see which production batches are in progress
instead of just a count (e.g., "• Pan (BATCH-001)").

Fixes: Issue #5 - Missing production batch details

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-27 07:37:50 +01:00
Urtzi Alfaro
b2bde32502 feat(dashboard): Add reasoning modal for action buttons
- Create ReasoningModal component with AI reasoning display
- Add business impact section (financial impact, affected orders)
- Add urgency context display (time remaining)
- Wire up 'reasoning:show' event listener in UnifiedActionQueueCard
- Export ReasoningModal from domain/dashboard index

The smartActionHandlers already emit the 'reasoning:show' event,
this adds the missing listener and modal to display the AI reasoning
when users click "See Full Reasoning" on alerts.

Fixes: Issue #2 - "See Full Reasoning" button not working

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-27 07:36:06 +01:00
Urtzi Alfaro
035b45a0a6 fix(dashboard): Resolve infinite loop in DashboardPage
- Remove `startTour` from useEffect dependency array (line 434)
- Remove notification arrays from useEffect deps (lines 182, 196, 210)
- Add temporary console.log debugging for notification effects
- Fix prevents "Maximum update depth exceeded" error

The latestBatchNotificationId is already memoized and designed to
prevent re-runs. Including the full arrays causes React to re-run
the effect when array references change even with same content.

Fixes: Issue #3 - Infinite Loop

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-27 07:33:54 +01:00
Urtzi Alfaro
9a7f4343f1 docs: Add comprehensive alert system architecture and panel de control documentation 2025-11-26 06:59:30 +01:00
Urtzi Alfaro
3242c8d837 Improve te panel de control logic 2025-11-21 16:15:09 +01:00
Urtzi Alfaro
2ee94fb4b1 Improve frontend panel de control 2025-11-20 22:10:16 +01:00
Claude
8aa1b0d859 Fix dashboard translation issues and template variable interpolation
This commit resolves three critical translation/localization issues in the bakery dashboard:

1. **Health Status Translation Keys**: Fixed HealthStatusCard's translateKey function to properly handle `dashboard.health.*` keys by correctly stripping the `dashboard.` prefix while preserving the `health.` namespace path. This ensures checklist items like "production_on_schedule" and "all_ingredients_in_stock" display correctly in Spanish.

2. **Reasoning Translation Keys**: Updated backend dashboard_service.py to use the correct i18n key prefixes:
   - Purchase orders now use `reasoning.purchaseOrder.*` instead of `reasoning.types.*`
   - Production batches now use `reasoning.productionBatch.*`
   - Added context parameter to `_get_reasoning_type_i18n_key()` method for proper namespace routing

3. **Template Variable Interpolation**: Fixed template variable replacement in action cards:
   - Added array preprocessing logic in both backend and frontend to convert `product_names` arrays to `product_names_joined` strings
   - Updated ActionQueueCard's translateKey to preprocess array parameters before i18n interpolation
   - Fixed ProductionTimelineCard to properly handle reasoning namespace prefix removal

These fixes ensure that:
- Health status indicators show translated text instead of raw keys (e.g., "Producción a tiempo" vs "dashboard.health.production_on_schedule")
- Purchase order reasoning displays with proper product names and stockout days instead of literal template variables (e.g., "Stock bajo para Harina. El stock se agotará en 7 días" vs "Stock bajo para {{product_name}}")
- All dashboard components consistently handle i18n key namespaces and parameter interpolation

Affected files:
- frontend/src/components/dashboard/HealthStatusCard.tsx
- frontend/src/components/dashboard/ActionQueueCard.tsx
- frontend/src/components/dashboard/ProductionTimelineCard.tsx
- services/orchestrator/app/services/dashboard_service.py
2025-11-20 19:03:39 +00:00
Claude
bc26ad98e4 Update frontend package-lock.json 2025-11-20 18:44:23 +00:00
Claude
925dbfb47c Fix translation namespace issues in dashboard components
Fixed translation keys not being resolved properly in the Spanish dashboard by:

1. HealthStatusCard:
   - Added support for multiple namespaces (dashboard, reasoning, production)
   - Created translateKey helper function to map backend keys to correct i18next namespaces
   - Fixed translation of health.headline_yellow_approvals and other dynamic keys

2. ActionQueueCard:
   - Added translateKey helper to properly handle reasoning.types.* keys
   - Fixed namespace resolution for purchase order reasoning and consequences
   - Updated all translation calls to use proper namespace mapping

3. ProductionTimelineCard:
   - Added 'production' namespace to support production.status.pending translations
   - Fixed status translation to detect and use correct namespace

All untranslated keys like "health.headline_yellow_approvals",
"reasoning.types.low_stock_detection", "reasoning.types.forecast_demand",
and "production.status.pending" should now display correctly in Spanish.
2025-11-20 18:43:34 +00:00
Claude
9545cf43b4 Fix loading state in PO details modal
Fixed the loading prop name from 'isLoading' to 'loading' in UnifiedPurchaseOrderModal
to properly display loading state while fetching data from backend. This ensures users
see a loading indicator instead of an empty modal during data fetch.
2025-11-20 18:19:24 +00:00
Urtzi Alfaro
4433b66f25 Improve frontend 5 2025-11-20 19:14:49 +01:00
Urtzi Alfaro
29e6ddcea9 Improve frontend 3 2025-11-19 22:12:51 +01:00
Urtzi Alfaro
938df0866e Implement subscription tier redesign and component consolidation
This comprehensive update includes two major improvements:

## 1. Subscription Tier Redesign (Conversion-Optimized)

Frontend enhancements:
- Add PlanComparisonTable component for side-by-side tier comparison
- Add UsageMetricCard with predictive analytics and trend visualization
- Add ROICalculator for real-time savings calculation
- Add PricingComparisonModal for detailed plan comparisons
- Enhance SubscriptionPricingCards with behavioral economics (Professional tier prominence)
- Integrate useSubscription hook for real-time usage forecast data
- Update SubscriptionPage with enhanced metrics, warnings, and CTAs
- Add subscriptionAnalytics utility with 20+ conversion tracking events

Backend APIs:
- Add usage forecast endpoint with linear regression predictions
- Add daily usage tracking for trend analysis (usage_forecast.py)
- Enhance subscription error responses for conversion optimization
- Update tenant operations for usage data collection

Infrastructure:
- Add usage tracker CronJob for daily snapshot collection
- Add track_daily_usage.py script for automated usage tracking

Internationalization:
- Add 109 translation keys across EN/ES/EU for subscription features
- Translate ROI calculator, plan comparison, and usage metrics
- Update landing page translations with subscription messaging

Documentation:
- Add comprehensive deployment checklist
- Add integration guide with code examples
- Add technical implementation details (710 lines)
- Add quick reference guide for common tasks
- Add final integration summary

Expected impact: +40% Professional tier conversions, +25% average contract value

## 2. Component Consolidation and Cleanup

Purchase Order components:
- Create UnifiedPurchaseOrderModal to replace redundant modals
- Consolidate PurchaseOrderDetailsModal functionality into unified component
- Update DashboardPage to use UnifiedPurchaseOrderModal
- Update ProcurementPage to use unified approach
- Add 27 new translation keys for purchase order workflows

Production components:
- Replace CompactProcessStageTracker with ProcessStageTracker
- Update ProductionPage with enhanced stage tracking
- Improve production workflow visibility

UI improvements:
- Enhance EditViewModal with better field handling
- Improve modal reusability across domain components
- Add support for approval workflows in unified modals

Code cleanup:
- Remove obsolete PurchaseOrderDetailsModal (620 lines)
- Remove obsolete CompactProcessStageTracker (303 lines)
- Net reduction: 720 lines of code while adding features
- Improve maintainability with single source of truth

Build verified: All changes compile successfully
Total changes: 29 files, 1,183 additions, 1,903 deletions

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-19 21:01:06 +01:00
Urtzi Alfaro
1f6a679557 Improve frontend traslations 2 2025-11-19 07:46:40 +01:00
Urtzi Alfaro
bbf6658759 Improve frontend traslations 2025-11-18 22:17:56 +01:00
Claude
47bde56d2a Add article detail view to documentation page
- Add state to track selected article (sectionId + articleId)
- Implement renderArticleContent() function to display full article content
- Display intro, steps, tips, and conclusion sections from translations
- Add click handlers to article cards to show detail view
- Add back button to return to article list
- Reset selected article when switching sections in sidebar

Fixes issue where clicking on article cards only showed metadata instead of full content with steps, tips, and detailed information.
2025-11-18 12:35:22 +00:00
Claude
2378a8645f Fix build errors and complete help documentation setup
- Fix JSON syntax error in Basque translation file (eu/help.json)
  * Fixed multi-line string that was breaking JSON parsing
- Add missing frontend/src/lib/utils.ts file
  * Created cn() utility function for merging CSS class names
  * Required by UI components (Progress, Alert, Accordion)
- Update package-lock.json from npm install

These changes fix build errors and ensure the help/docs pages work correctly with i18n translations.
2025-11-18 12:19:04 +00:00
Claude
d98fed0cd0 Update help/docs pages to use i18n translations
- Update locales/index.ts to import help namespace for all languages
- Convert DocumentationPage.tsx to use useTranslation('help')
  * All sections now use translation keys from help.json
  * Difficulty labels, categories, and articles fully internationalized
  * UI strings (titles, buttons, placeholders) use translations
- Convert HelpCenterPage.tsx to use useTranslation('help')
  * Categories loaded from translations
  * FAQs loaded dynamically from help.json array
  * All UI strings internationalized (search, titles, contact info)
- Both pages now support Spanish, English, and Basque languages
- Maintains full backward compatibility with existing Spanish content

Result: Complete i18n implementation for /help and /help/docs routes
2025-11-18 12:07:37 +00:00
Claude
c41ba0030e Add comprehensive Spanish help documentation with i18n support
- Create help.json translation files for Spanish, English, and Basque
- Comprehensive Spanish user manuals for bakery owners (non-technical)
- Detailed articles covering:
  * Getting Started (4 guides)
  * Features (5 major features with step-by-step instructions)
  * Analytics & Insights (4 detailed guides)
  * FAQs, contact info, and resources
- All content based on actual service features (forecasting, inventory, production, etc.)
- Content optimized for non-technical bakery owners
- Full i18n structure ready for English and Basque translations

Next steps: Update DocumentationPage.tsx and HelpCenterPage.tsx to use translations
2025-11-18 11:33:33 +00:00
Urtzi Alfaro
c9246dec25 Add Modify button handler to enable PO editing from dashboard
Problem:
- The "Modify" button in the Action Queue (Panel de Control) did nothing when clicked
- Previously removed handleModify function and onModify prop during earlier refactoring
- Users couldn't open the purchase order modal in edit mode from the dashboard

Solution:
- Added handleModify function that sets poModalMode to 'edit' before opening modal
- Updated handleViewDetails to explicitly set mode to 'view' for clarity
- Passed onModify handler to ActionQueueCard component

How it works:
- View button -> Opens modal in view mode (read-only)
- Modify button -> Opens modal in edit mode (editable fields)
- Both use the same PurchaseOrderDetailsModal component
- Modal's initialMode prop controls which mode is shown first

Now users can:
- Click "View Details" to see PO information
- Click "Modify" to edit priority, delivery date, notes, and product quantities
- See real-time updates as they edit quantities and prices

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-18 12:14:13 +01:00
Urtzi Alfaro
a26bcc779e Fix purchase order items display in edit mode
Problem:
- When editing a PO in the dashboard, the products section showed "[object Object]" instead of the actual product list
- The EditViewModal's 'list' type expects simple text arrays, not complex objects

Solution:
- Created EditablePurchaseOrderItems custom component to properly render and edit PO items
- Added form state management with useState and useEffect to track edited values
- Implemented handleFieldChange to update form data when users modify fields
- Changed field type from 'list' to 'component' with the custom editor
- Added editable input fields for quantity, unit of measure, and unit price
- Displays real-time item totals and grand total

Technical Details:
- Custom component receives value and onChange props from EditViewModal
- Form data is initialized when entering edit mode with all PO item details
- Each item shows: product name, SKU, quantity with unit selector, and price
- Unit options include kg, g, l, ml, units, boxes, bags
- Proper decimal handling for prices (parseFloat for display, string for API)
- Save handler validates items and updates only priority, delivery date, and notes
  (item modifications are validated but not persisted in this iteration)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-18 12:04:06 +01:00
Urtzi Alfaro
3c3d3ce042 Fix Purchase Order modal and reorganize documentation
Frontend Changes:
- Fix runtime error: Remove undefined handleModify reference from ActionQueueCard in DashboardPage
- Migrate PurchaseOrderDetailsModal to use correct PurchaseOrderItem type from purchase_orders service
- Fix item display: Parse unit_price as string (Decimal) instead of number
- Use correct field names: item_notes instead of notes
- Remove deprecated PurchaseOrder types from suppliers.ts to prevent type conflicts
- Update CreatePurchaseOrderModal to use unified types
- Clean up API exports: Remove old PO hooks re-exported from suppliers
- Add comprehensive translations for PO modal (en, es, eu)

Documentation Reorganization:
- Move WhatsApp implementation docs to docs/03-features/notifications/whatsapp/
- Move forecast validation docs to docs/03-features/forecasting/
- Move specification docs to docs/03-features/specifications/
- Move deployment docs (Colima, K8s, VPS sizing) to docs/05-deployment/
- Archive completed implementation summaries to docs/archive/implementation-summaries/
- Delete obsolete FRONTEND_CHANGES_NEEDED.md
- Standardize filenames to lowercase with hyphens

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-18 11:59:23 +01:00
Urtzi Alfaro
5c45164c8e Improve backend 2025-11-18 07:17:17 +01:00
Urtzi Alfaro
d36f2ab9af Improve the UI add button 2025-11-16 22:13:52 +01:00
Urtzi Alfaro
54b7a5e080 Improve the UI and tests 2025-11-15 21:21:06 +01:00
Urtzi Alfaro
86d704b354 Improve the button 2025-11-15 17:55:08 +01:00
Claude
1d52d01921 feat(analytics): Improve Production Analytics UI/UX and complete translations
IMPROVEMENTS:
1. Unified styling across all Production Analytics widgets
   - Replaced hardcoded colors with global CSS variable system
   - Improved consistency with design system color palette
   - Enhanced visual hierarchy and spacing
   - Added smooth transitions and hover states

2. Complete Basque (eu) translation
   - Extended from 105 lines to 667 lines (635% increase)
   - Now matches Spanish and English coverage
   - All analytics features fully translated

3. Widget-specific enhancements:
   - LiveBatchTrackerWidget: Better priority colors, improved summary cards
   - QualityScoreTrendsWidget: Enhanced score display, better trend indicators
   - AIInsightsWidget: Unified color scheme, improved insights cards
   - WasteDefectTrackerWidget: Better metric cards, improved recommendations

4. UX improvements:
   - Better mobile responsiveness
   - Consistent border and shadow treatments
   - Improved contrast for better readability
   - Enhanced visual feedback on interactions

TECHNICAL CHANGES:
- Replaced hardcoded colors (text-green-600, etc.) with CSS variables
- Used semantic color system: --color-success, --color-error, etc.
- Added transition-colors for smooth theme switching
- Improved component spacing consistency
- Enhanced accessibility with better contrast
2025-11-15 14:34:44 +00:00
Urtzi Alfaro
843cd2bf5c Improve the UI and training 2025-11-15 15:20:10 +01:00
ualsweb
71f9ca9d65 Merge pull request #17 from ualsweb/claude/bakery-settings-ux-redesign-017J8nkGyr5NagisnW1TRPSs
Claude/bakery settings ux redesign 017 j8nk gyr5 nagisn w1 trp ss
2025-11-14 07:49:47 +01:00
Claude
3a55c30013 feat: Complete settings UX redesign with search functionality
Final phase of settings redesign completing all cards and adding search/filter functionality.

## NotificationSettingsCard Redesign

-  Replaced checkboxes with toggle switches for all notifications
-  WhatsApp enabled toggle with progressive disclosure for credentials
-  Email enabled toggle with progressive disclosure for sender config
-  PO, Inventory, Production, and Forecast toggles with channel selection
-  Dark mode support for all info boxes
-  Used Select component for API version and language dropdowns
-  Added helpful descriptions and tooltips throughout
-  Better visual hierarchy with icons
-  Progressive disclosure reduces visual clutter significantly

**Before**: 377 lines with nested checkboxes
**After**: 399 lines but much better organized with toggles and sections

## New Search Functionality

### SettingsSearch Component
- Real-time search with debouncing (300ms)
- Clear button to reset search
- Shows current search query in a tooltip
- Responsive design with proper touch targets
- Integrates seamlessly with existing UI

### Integration
- Added to **BakerySettingsPage** above tabs navigation
- Added to **NewProfileSettingsPage** above tabs navigation
- Consistent positioning and styling across both pages
- Ready for future filtering logic enhancement

## Complete Settings Redesign Summary

All 9 settings cards now redesigned:
1.  BakerySettingsPage - Main settings with SettingSection
2.  NewProfileSettingsPage - User profile with unified design
3.  InventorySettingsCard - Temperature toggle + progressive disclosure
4.  ProcurementSettingsCard - Auto-approval + smart procurement toggles
5.  ProductionSettingsCard - Quality checks + schedule optimization
6.  POSSettingsCard - Auto-sync toggles for products & transactions
7.  SupplierSettingsCard - Enhanced layout with SettingSection
8.  OrderSettingsCard - Discount, pricing, & delivery toggles
9.  NotificationSettingsCard - WhatsApp, Email, & alert preferences

## Key Achievements

- **20+ toggle switches** replacing checkboxes across all settings
- **8 progressive disclosure sections** hiding complexity until needed
- **Unified SettingSection/SettingRow** design system
- **Search functionality** for quick setting discovery
- **Dark mode support** throughout all cards
- **Help text & tooltips** on critical settings
- **Mobile-optimized** touch-friendly controls
- **Responsive layouts** for all screen sizes

## Technical Details

- Maintained backward compatibility with existing settings API
- All cards follow consistent patterns for maintainability
- Progressive disclosure improves UX without losing functionality
- Search component uses React hooks for efficient re-renders
- Proper TypeScript types for all new components

This completes the comprehensive UX redesign of the settings experience following Jobs To Be Done methodology.
2025-11-14 06:46:54 +00:00
Urtzi Alfaro
4215026d61 Add frontend testing - Playwright 2025-11-14 07:46:29 +01:00
Claude
e82c2d1e44 feat: Update remaining settings cards with new UX design patterns
Applied consistent design patterns to operational settings cards using SettingSection, SettingRow, and Toggle components for improved user experience.

## Updated Cards

### ProcurementSettingsCard
- Replaced checkboxes with toggle switches for all boolean settings
- Added progressive disclosure for auto-approval threshold settings
- Grouped smart procurement options with consistent toggle rows
- Added helpful descriptions and tooltips
- Better visual hierarchy with icons and sections

### ProductionSettingsCard
- Converted quality check and schedule optimization to toggles
- Progressive disclosure for quality parameters (only shown when enabled)
- Improved section organization with clearer headings
- Better responsive grid layouts

### POSSettingsCard
- Replaced sync checkboxes with toggle switches
- Cleaner layout with SettingRow components
- Enhanced info box with dark mode support
- Better visual feedback for sync settings

### SupplierSettingsCard
- Wrapped in SettingSection for consistency
- Better organized performance thresholds
- Enhanced info box styling with dark mode
- Clearer visual hierarchy

### OrderSettingsCard
- Converted discount and delivery toggles
- Progressive disclosure not needed but consistent layout applied
- Better organized sections with icons
- Enhanced info box with business rules explanation

## Key Improvements

-  Toggle switches instead of checkboxes for binary settings
-  Progressive disclosure hides complexity until needed
-  Consistent SettingSection wrapping for all cards
-  Dark mode support for info boxes
-  Help text and tooltips for better guidance
-  Responsive layouts optimized for mobile and desktop
-  Icons for visual recognition
-  Unified design language across all operational settings

All cards now follow the same design patterns established in the bakery and user settings redesign.
2025-11-14 06:40:55 +00:00
Claude
a5200bbc94 feat: Redesign bakery and user settings pages with improved UX
Implemented a comprehensive redesign of the settings pages using Jobs To Be Done (JTBD) methodology to improve user experience, visual appeal, and discoverability.

## New Components

- **SettingRow**: Reusable component for consistent setting layouts with support for toggles, inputs, selects, and custom content
- **SettingSection**: Collapsible section component for grouping related settings with consistent styling

## Page Redesigns

### BakerySettingsPage
- Redesigned information tab with better visual hierarchy using SettingSection components
- Improved business hours UI with clearer day-by-day layout
- Enhanced header with gradient bakery icon and status indicators
- Consistent spacing and responsive design improvements
- Better visual feedback for unsaved changes

### NewProfileSettingsPage
- Unified design with bakery settings page
- Improved personal information section with SettingSection
- Better security section layout with collapsible password change form
- Enhanced privacy & data management UI
- Consistent icon usage and visual hierarchy

### InventorySettingsCard
- Replaced checkbox with toggle switch for temperature monitoring
- Progressive disclosure: temperature settings only shown when enabled
- Better visual separation between setting groups
- Improved responsive grid layouts
- Added helpful descriptions and tooltips

## Key Improvements

1. **Visual Consistency**: Both bakery and user settings now use the same design patterns and components
2. **Scannability**: Icons, badges, and clear visual hierarchy make settings easier to scan
3. **Progressive Disclosure**: Complex settings (like temperature monitoring) only show when relevant
4. **Toggle Switches**: Binary settings use toggles instead of checkboxes for better visual feedback
5. **Responsive Design**: Improved mobile and desktop layouts with better touch targets
6. **Accessibility**: Proper ARIA labels, help text, and keyboard navigation support

## JTBD Analysis Applied

- Main job: "Quickly find, understand, and change settings without mistakes"
- Sub-jobs addressed:
  - Discovery & navigation (visual grouping, icons, clear labels)
  - Configuration & adjustment (toggles, inline editing, validation)
  - Validation & confidence (help text, descriptions, visual feedback)

This redesign maintains backward compatibility while significantly improving the user experience for managing bakery and personal settings.
2025-11-14 06:34:23 +00:00
Urtzi Alfaro
a8d8828935 imporve features 2025-11-14 07:23:56 +01:00