4067ee72e4
This commit fixes React Error #306 (text content mismatch) by ensuring no component ever tries to render undefined values as text content. Changes made across all dashboard components: 1. **Component Entry Guards**: - Added early returns for null/undefined data - Changed `if (loading)` to `if (loading || !data)` pattern - Components now show loading skeleton when data is undefined 2. **Property Access Guards**: - Added `|| fallback` operators for all rendered text - Added optional chaining for nested property access - Added conditional rendering for optional/array fields 3. **Specific Component Fixes**: **HealthStatusCard.tsx**: - Added early return for !healthStatus - Added fallback for status: `healthStatus.status || 'green'` - Added conditional rendering for nextScheduledRun - Added conditional rendering for checklistItems array - Added text fallback: `item.text || ''` **InsightsGrid.tsx**: - Added null check: `if (!insights || !insights.savings || ...)` - Added fallbacks: `insights.savings?.label || 'Savings'` - Added fallbacks for all 4 insight cards **OrchestrationSummaryCard.tsx**: - Added early return for !summary - Added fallback: `summary.message || ''` - Added fallback: `summary.runNumber || 0` - Added array checks: `summary.purchaseOrdersSummary && ...` - Added fallbacks for PO items: `po.supplierName || 'Unknown Supplier'` - Added fallbacks for batch items: `batch.quantity || 0` - Added safe date parsing: `batch.readyByTime ? new Date(...) : 'TBD'` **ProductionTimelineCard.tsx**: - Added early return for !timeline - Added array check: `!timeline.timeline || timeline.timeline.length === 0` - Added fallbacks for all item properties: - `item.statusIcon || '🔵'` - `item.productName || 'Product'` - `item.quantity || 0` - `item.unit || 'units'` - `item.batchNumber || 'N/A'` - `item.priority || 'NORMAL'` - `item.statusText || 'Status'` - `item.progress || 0` **ActionQueueCard.tsx**: - Added early return for !actionQueue - Added safe config lookup with fallback to normal urgency - Added array check: `!actionQueue.actions || ...` - Added property fallbacks: - `action.title || 'Action Required'` - `action.urgency || 'normal'` - `action.subtitle || ''` - `action.estimatedTimeMinutes || 5` - Added array guard: `(action.actions || []).map(...)` - Added fallbacks for counts: `actionQueue.totalActions || 0` **useReasoningTranslation.ts**: - Enhanced formatPOAction with explicit fallbacks - Enhanced formatBatchAction with explicit fallbacks - All translation functions return strings with || operators **DashboardPage.tsx**: - Removed conditional rendering operators (&&) - Components now always render and handle their own null states - Pattern: `<Component data={data} loading={loading} />` 4. **Testing Strategy**: - All components gracefully handle undefined data - Loading states shown when data is undefined - No undefined values can be rendered as text content - Multiple fallback layers ensure strings are always returned This comprehensive fix addresses the root cause of React Error #306 by making all components bulletproof against undefined values.
🍞 Bakery IA - Multi-Service Architecture
Welcome to Bakery IA, an advanced AI-powered platform for bakery management and optimization. This project implements a microservices architecture with multiple interconnected services to provide comprehensive bakery management solutions.
🚀 Quick Start
Prerequisites
- Docker Desktop with Kubernetes enabled
- Docker Compose
- Node.js (for frontend development)
Running the Application
-
Clone the repository:
git clone <repository-url> cd bakery-ia -
Set up environment variables:
cp .env.example .env # Edit .env with your specific configuration -
Run with Docker Compose:
docker-compose up --build -
Or run with Kubernetes (Docker Desktop):
# Enable Kubernetes in Docker Desktop # Run the setup script ./scripts/setup-kubernetes-dev.sh
🏗️ Architecture Overview
The project follows a microservices architecture with the following main components:
- Frontend: React-based dashboard for user interaction
- Gateway: API gateway handling authentication and routing
- Services: Multiple microservices handling different business domains
- Infrastructure: Redis, RabbitMQ, PostgreSQL databases
🐳 Kubernetes Infrastructure
🛠️ Services
The project includes multiple services:
- Auth Service: Authentication and authorization
- Tenant Service: Multi-tenancy management
- Sales Service: Sales processing
- External Service: Integration with external systems
- Training Service: AI model training
- Forecasting Service: Demand forecasting
- Notification Service: Notifications and alerts
- Inventory Service: Inventory management
- Recipes Service: Recipe management
- Suppliers Service: Supplier management
- POS Service: Point of sale
- Orders Service: Order management
- Production Service: Production planning
- Alert Processor: Background alert processing
📊 Monitoring
The system includes comprehensive monitoring with:
- Prometheus for metrics collection
- Grafana for visualization
- ELK stack for logging (planned)
🚀 Production Deployment
For production deployment on clouding.io with Kubernetes:
- Set up your clouding.io Kubernetes cluster
- Update image references to your container registry
- Configure production-specific values
- Deploy using the production kustomization:
kubectl apply -k infrastructure/kubernetes/environments/production/
🤝 Contributing
- Fork the repository
- Create a feature branch
- Make your changes
- Submit a pull request
📄 License
This project is licensed under the MIT License.