Upload 31 files

Dockerfile

@@ -0,0 +1,39 @@
+# Use Python 3.11 slim image
+FROM python:3.11-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    gcc \
+    g++ \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first for better caching
+COPY Backend/requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy backend code
+COPY Backend/ ./backend/
+
+# Copy frontend assets
+COPY frontend/mobile/assets/ ./frontend/
+
+# Create a simple HTTP server for frontend
+RUN pip install aiofiles
+
+# Create a combined FastAPI app that serves both API and frontend
+COPY app.py .
+
+# Expose port (Hugging Face Spaces will set PORT environment variable)
+EXPOSE 7860
+
+# Set environment variables
+ENV PYTHONPATH=/app
+ENV DATABASE_URL=sqlite:///./chefcode.db
+
+# Run the application
+CMD ["python", "app.py"]

README.md

@@ -1,10 +1,68 @@
----
-title: Chefcode
-emoji: ⚡
-colorFrom: pink
-colorTo: purple
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🍳 ChefCode - AI Restaurant Management
+
+An AI-powered restaurant inventory and recipe management system with voice recognition and web recipe search.
+
+## 🚀 Features
+
+- **AI Assistant**: Voice and text commands for inventory and recipe management
+- **Web Recipe Search**: Find and import recipes from TheMealDB
+- **Inventory Management**: Track ingredients with quantities and prices
+- **Recipe Management**: Create, edit, and manage recipes
+- **Voice Recognition**: Hands-free operation with continuous conversation
+
+## 🎯 Quick Start
+
+1. **Open the app** - The interface will load automatically
+2. **Enable microphone** when prompted for voice commands
+3. **Try these commands**:
+   - 🎤 "Add 5 kg of flour at 2 euros per kg"
+   - 🎤 "Search for pasta recipes"
+   - 🎤 "Add recipe Pizza with flour 500 grams and tomato 200 ml"
+
+## 🤖 AI Assistant Commands
+
+### Inventory Management
+- "Add 5 kg of rice at 2.50 euros per kg"
+- "Update flour to 10 kg"
+- "Remove tomatoes from inventory"
+- "How much rice do we have?"
+
+### Recipe Management
+- "Add recipe Pizza with flour 100 kg and tomato sauce 200 ml"
+- "Search for Italian pasta recipes"
+- "Edit recipe Pizza by adding 2 grams of salt"
+- "Show me all dessert recipes"
+
+## 🌐 Web Recipe Search
+
+1. Go to **Recipes** section
+2. Click **"Search Recipe from Web"**
+3. Search for any recipe (e.g., "Italian pasta", "chicken soup")
+4. View results and import with AI ingredient mapping
+
+## 🎨 Interface
+
+- **Modern Design**: Clean, responsive interface
+- **Voice-First**: Optimized for hands-free operation
+- **Color-Coded Results**: Visual feedback for ingredient matching
+- **Real-Time Updates**: Live data synchronization
+
+## 🔧 Technical Details
+
+- **Backend**: FastAPI with SQLite database
+- **AI Models**: OpenAI GPT-4o-mini and GPT-o3
+- **Frontend**: Modern web interface with voice recognition
+- **External APIs**: TheMealDB for recipe discovery
+
+## 📊 Database
+
+The app uses SQLite for data storage with the following tables:
+- `inventory_items` - Inventory data
+- `recipes` - Recipe data with JSON ingredients
+- `tasks` - Production tasks
+
+## 🎉 Enjoy ChefCode!
+
+Perfect for restaurant managers, chefs, and kitchen staff who want to streamline their operations with AI-powered tools.
+
+**Start by clicking the microphone button and saying your first command!** 🎤✨

app.py

@@ -0,0 +1,102 @@
+"""
+ChefCode - Combined FastAPI app for Hugging Face Spaces
+Serves both backend API and frontend from a single application
+"""
+
+import os
+import sys
+from pathlib import Path
+from fastapi import FastAPI, Request
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse, HTMLResponse
+from fastapi.middleware.cors import CORSMiddleware
+import uvicorn
+
+# Add backend to Python path
+sys.path.append(str(Path(__file__).parent / "backend"))
+
+# Import backend components
+from backend.database import SessionLocal, engine
+import backend.models
+from backend.routes import inventory, recipes, tasks, data, actions, web_recipes, ai_assistant
+
+# Create database tables
+backend.models.Base.metadata.create_all(bind=engine)
+
+# Create FastAPI app
+app = FastAPI(
+    title="ChefCode - AI Restaurant Management",
+    description="AI-powered restaurant inventory and recipe management system",
+    version="1.0.0"
+)
+
+# CORS configuration for Hugging Face Spaces
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Include backend API routes
+app.include_router(inventory.router, prefix="/api", tags=["inventory"])
+app.include_router(recipes.router, prefix="/api", tags=["recipes"]) 
+app.include_router(tasks.router, prefix="/api", tags=["tasks"])
+app.include_router(data.router, prefix="/api", tags=["data"])
+app.include_router(actions.router, prefix="/api", tags=["actions"])
+app.include_router(web_recipes.router, prefix="/api/web-recipes", tags=["web-recipes"])
+app.include_router(ai_assistant.router, prefix="/api/ai-assistant", tags=["ai-assistant"])
+
+# Mount static files (frontend)
+app.mount("/static", StaticFiles(directory="frontend"), name="static")
+
+# Health check endpoint
+@app.get("/health")
+async def health_check():
+    return {"status": "healthy", "message": "ChefCode API is running"}
+
+# Root endpoint - serve the main HTML file
+@app.get("/", response_class=HTMLResponse)
+async def serve_frontend():
+    return FileResponse("frontend/index.html")
+
+# Catch-all route for frontend routing (SPA support)
+@app.get("/{full_path:path}")
+async def serve_frontend_routes(full_path: str):
+    # If it's an API call, let FastAPI handle it
+    if full_path.startswith("api/"):
+        return {"error": "API endpoint not found"}
+    
+    # For all other routes, serve the frontend
+    return FileResponse("frontend/index.html")
+
+# Update frontend config for Hugging Face Spaces
+def update_frontend_config():
+    """Update frontend configuration for Hugging Face Spaces deployment"""
+    config_file = Path("frontend/config.js")
+    if config_file.exists():
+        config_content = config_file.read_text()
+        
+        # Update API URL to use the current domain
+        updated_content = config_content.replace(
+            "API_URL: 'http://localhost:8000'",
+            "API_URL: window.location.origin"
+        )
+        
+        config_file.write_text(updated_content)
+
+# Update config on startup
+update_frontend_config()
+
+if __name__ == "__main__":
+    # Get port from environment (Hugging Face Spaces sets this)
+    port = int(os.getenv("PORT", 7860))
+    
+    # Run the application
+    uvicorn.run(
+        "app:app",
+        host="0.0.0.0",
+        port=port,
+        log_level="info"
+    )

backend/database.py

@@ -0,0 +1,15 @@
+from sqlalchemy import create_engine, Column, Integer, String, Float, Text, DateTime, Boolean
+from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.orm import sessionmaker
+from datetime import datetime
+
+SQLITE_DATABASE_URL = "sqlite:///./chefcode.db"
+
+engine = create_engine(
+    SQLITE_DATABASE_URL, 
+    connect_args={"check_same_thread": False}
+)
+
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+
+Base = declarative_base()

backend/main.py

@@ -0,0 +1,68 @@
+from fastapi import FastAPI, HTTPException, Depends
+from fastapi.middleware.cors import CORSMiddleware
+from sqlalchemy.orm import Session
+import uvicorn
+from dotenv import load_dotenv
+import os
+
+# Load environment variables from .env file
+load_dotenv()
+
+from database import SessionLocal, engine
+import models
+from routes import inventory, recipes, tasks, chat, data, actions, ocr, web_recipes, ai_assistant
+
+# Create database tables
+models.Base.metadata.create_all(bind=engine)
+
+app = FastAPI(
+    title="ChefCode Backend",
+    description="FastAPI backend for ChefCode inventory management system",
+    version="1.0.0"
+)
+
+# CORS configuration to allow frontend connections
+# In production, replace with specific frontend URLs
+# Allow all origins for development (includes file:// protocol and localhost)
+ALLOWED_ORIGINS = os.getenv("ALLOWED_ORIGINS", "*").split(",") if os.getenv("ALLOWED_ORIGINS") != "*" else ["*"]
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=ALLOWED_ORIGINS,
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Dependency to get database session
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()
+
+# Include routers
+app.include_router(inventory.router, prefix="/api", tags=["inventory"])
+app.include_router(recipes.router, prefix="/api", tags=["recipes"]) 
+app.include_router(tasks.router, prefix="/api", tags=["tasks"])
+app.include_router(chat.router, prefix="/api", tags=["chat"])
+app.include_router(data.router, prefix="/api", tags=["data"])
+app.include_router(actions.router, prefix="/api", tags=["actions"])
+app.include_router(ocr.router, prefix="/api", tags=["ocr"])
+app.include_router(web_recipes.router, prefix="/api/web-recipes", tags=["web-recipes"])
+app.include_router(ai_assistant.router, prefix="/api/ai-assistant", tags=["ai-assistant"])
+
+@app.get("/")
+async def root():
+    return {"message": "ChefCode FastAPI Backend", "version": "1.0.0"}
+
+@app.get("/health")
+async def health_check():
+    return {"status": "healthy", "service": "ChefCode Backend"}
+
+if __name__ == "__main__":
+    # Use reload=True only in development
+    # For production, use: uvicorn main:app --host 0.0.0.0 --port 8000 --workers 4
+    is_dev = os.getenv("ENVIRONMENT", "development") == "development"
+    uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=is_dev)

backend/models.py

@@ -0,0 +1,55 @@
+from sqlalchemy import Column, Integer, String, Float, Text, DateTime, Boolean, Date
+from sqlalchemy.sql import func
+from database import Base
+from datetime import datetime, date
+
+class InventoryItem(Base):
+    __tablename__ = "inventory_items"
+    
+    id = Column(Integer, primary_key=True, index=True)
+    name = Column(String, index=True, nullable=False)
+    unit = Column(String, default="pz")
+    quantity = Column(Float, default=0.0)
+    category = Column(String, default="Other")
+    price = Column(Float, default=0.0)
+    # HACCP Traceability fields
+    lot_number = Column(String, nullable=True)  # Batch/Lot number for traceability
+    expiry_date = Column(Date, nullable=True)  # Expiry date for HACCP compliance
+    created_at = Column(DateTime(timezone=True), server_default=func.now())
+    updated_at = Column(DateTime(timezone=True), onupdate=func.now())
+
+class Recipe(Base):
+    __tablename__ = "recipes"
+    
+    id = Column(Integer, primary_key=True, index=True)
+    name = Column(String, index=True, nullable=False, unique=True)
+    items = Column(Text)  # JSON string of recipe items
+    instructions = Column(Text, default="")
+    yield_data = Column(Text, nullable=True)  # JSON string of yield info: {"qty": 10, "unit": "pz"}
+    # Web recipe metadata
+    source_url = Column(String, nullable=True)  # Original recipe URL (e.g., TheMealDB)
+    image_url = Column(String, nullable=True)  # Recipe thumbnail/image URL
+    cuisine = Column(String, nullable=True)  # Cuisine type (Italian, Chinese, etc.)
+    ingredients_raw = Column(Text, nullable=True)  # JSON: Original ingredients from web
+    ingredients_mapped = Column(Text, nullable=True)  # JSON: AI-mapped ingredients to inventory
+    created_at = Column(DateTime(timezone=True), server_default=func.now())
+    updated_at = Column(DateTime(timezone=True), onupdate=func.now())
+
+class Task(Base):
+    __tablename__ = "tasks"
+    
+    id = Column(Integer, primary_key=True, index=True)
+    recipe = Column(String, nullable=False)
+    quantity = Column(Integer, default=1)
+    assigned_to = Column(String, default="")
+    status = Column(String, default="todo")  # todo, inprogress, completed
+    created_at = Column(DateTime(timezone=True), server_default=func.now())
+    updated_at = Column(DateTime(timezone=True), onupdate=func.now())
+
+class SyncData(Base):
+    __tablename__ = "sync_data"
+    
+    id = Column(Integer, primary_key=True, index=True)
+    data_type = Column(String, nullable=False)  # 'full_sync', 'inventory', 'recipes', 'tasks'
+    data_content = Column(Text)  # JSON string of synced data
+    synced_at = Column(DateTime(timezone=True), server_default=func.now())

backend/requirements.txt

@@ -0,0 +1,15 @@
+fastapi==0.104.1
+uvicorn[standard]==0.24.0
+sqlalchemy==2.0.23
+python-multipart==0.0.6
+python-dotenv==1.0.0
+openai>=1.0.0
+pydantic==2.5.0
+databases[sqlite]==0.9.0
+aiosqlite==0.19.0
+google-cloud-documentai>=2.20.0
+google-api-core>=2.11.0
+google-generativeai>=0.8.0
+pillow>=10.0.0
+httpx>=0.25.0
+

backend/routes/__init__.py

@@ -0,0 +1 @@
+# Routes package

backend/routes/actions.py

@@ -0,0 +1,262 @@
+from fastapi import APIRouter, Depends, HTTPException
+from sqlalchemy.orm import Session
+from database import SessionLocal
+from models import InventoryItem, Recipe, Task, SyncData
+from pydantic import BaseModel
+from typing import Dict, Any, List
+import json
+from datetime import datetime, date
+from auth import verify_api_key
+
+router = APIRouter()
+
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()
+
+def parse_date_string(date_str):
+    """Convert date string to date object"""
+    if not date_str:
+        return None
+    if isinstance(date_str, date):
+        return date_str
+    try:
+        return datetime.strptime(date_str, '%Y-%m-%d').date()
+    except (ValueError, TypeError):
+        return None
+
+class ActionRequest(BaseModel):
+    action: str
+    data: Dict[Any, Any]
+
+class SyncDataRequest(BaseModel):
+    inventory: List[Dict[str, Any]]
+    recipes: Dict[str, Dict[str, Any]]
+    tasks: List[Dict[str, Any]]
+
+@router.post("/action")
+async def handle_action(
+    request: ActionRequest, 
+    db: Session = Depends(get_db),
+    api_key: str = Depends(verify_api_key)
+):
+    """Handle various actions from frontend - matches original backend format"""
+    
+    action = request.action
+    data = request.data
+    
+    if action == "add-inventory":
+        # Add inventory item - validate required fields
+        item_data = data
+        
+        if "name" not in item_data:
+            raise HTTPException(status_code=400, detail="Missing required field: name")
+        
+        # Check if item exists and merge if same price
+        existing_item = db.query(InventoryItem).filter(InventoryItem.name == item_data["name"]).first()
+        
+        if existing_item and abs(existing_item.price - item_data.get("price", 0)) < 0.01:
+            # Merge quantities for same item at same price (only if HACCP fields match)
+            existing_lot = existing_item.lot_number or ""
+            existing_expiry = existing_item.expiry_date
+            new_lot = item_data.get("lot_number") or ""
+            new_expiry = parse_date_string(item_data.get("expiry_date"))
+            
+            if existing_lot == new_lot and existing_expiry == new_expiry:
+                existing_item.quantity += item_data.get("quantity", 0)
+                db.commit()
+                return {"success": True, "message": "Item quantity updated"}
+            else:
+                # HACCP fields differ - create separate item for traceability
+                new_item = InventoryItem(
+                    name=item_data["name"],
+                    unit=item_data.get("unit", "pz"),
+                    quantity=item_data.get("quantity", 0),
+                    category=item_data.get("category", "Other"),
+                    price=item_data.get("price", 0),
+                    lot_number=item_data.get("lot_number"),
+                    expiry_date=parse_date_string(item_data.get("expiry_date"))
+                )
+                db.add(new_item)
+                db.commit()
+                return {"success": True, "message": "Item added (separate entry for HACCP traceability)"}
+        else:
+            # Create new item with HACCP fields
+            new_item = InventoryItem(
+                name=item_data["name"],
+                unit=item_data.get("unit", "pz"),
+                quantity=item_data.get("quantity", 0),
+                category=item_data.get("category", "Other"),
+                price=item_data.get("price", 0),
+                lot_number=item_data.get("lot_number"),
+                expiry_date=parse_date_string(item_data.get("expiry_date"))
+            )
+            db.add(new_item)
+            db.commit()
+            return {"success": True, "message": "Item added successfully"}
+    
+    elif action == "save-recipe":
+        # Save recipe - validate required fields
+        recipe_data = data
+        
+        if "name" not in recipe_data:
+            raise HTTPException(status_code=400, detail="Missing required field: name")
+        if "recipe" not in recipe_data:
+            raise HTTPException(status_code=400, detail="Missing required field: recipe")
+        
+        name = recipe_data["name"]
+        recipe_info = recipe_data["recipe"]
+        
+        # Check if recipe exists
+        existing_recipe = db.query(Recipe).filter(Recipe.name == name).first()
+        
+        items_json = json.dumps(recipe_info.get("items", []))
+        
+        if existing_recipe:
+            # Update existing recipe
+            existing_recipe.items = items_json
+            existing_recipe.instructions = recipe_info.get("instructions", "")
+            db.commit()
+            return {"success": True, "message": "Recipe updated successfully"}
+        else:
+            # Create new recipe
+            new_recipe = Recipe(
+                name=name,
+                items=items_json,
+                instructions=recipe_info.get("instructions", "")
+            )
+            db.add(new_recipe)
+            db.commit()
+            return {"success": True, "message": "Recipe saved successfully"}
+    
+    elif action == "add-task":
+        # Add task - validate required fields
+        task_data = data
+        
+        if "recipe" not in task_data:
+            raise HTTPException(status_code=400, detail="Missing required field: recipe")
+        
+        new_task = Task(
+            recipe=task_data["recipe"],
+            quantity=task_data.get("quantity", 1),
+            assigned_to=task_data.get("assignedTo", ""),
+            status=task_data.get("status", "todo")
+        )
+        db.add(new_task)
+        db.commit()
+        return {"success": True, "message": "Task added successfully"}
+    
+    else:
+        raise HTTPException(status_code=400, detail=f"Unknown action: {action}")
+
+@router.post("/sync-data")
+async def sync_data(
+    request: SyncDataRequest, 
+    db: Session = Depends(get_db),
+    api_key: str = Depends(verify_api_key)
+):
+    """Sync all data from frontend - matches original backend format"""
+    
+    try:
+        # Store sync data for backup
+        sync_record = SyncData(
+            data_type="full_sync",
+            data_content=json.dumps(request.dict())
+        )
+        db.add(sync_record)
+        
+        # Sync inventory - Fix N+1 query problem
+        if request.inventory:
+            # Fetch all existing items in one query
+            inventory_names = [item["name"] for item in request.inventory if "name" in item]
+            existing_items = db.query(InventoryItem).filter(InventoryItem.name.in_(inventory_names)).all()
+            existing_items_dict = {item.name: item for item in existing_items}
+            
+            for item_data in request.inventory:
+                if "name" not in item_data:
+                    continue
+                    
+                existing_item = existing_items_dict.get(item_data["name"])
+                if existing_item:
+                    # Update existing
+                    existing_item.unit = item_data.get("unit", "pz")
+                    existing_item.quantity = item_data.get("quantity", 0)
+                    existing_item.category = item_data.get("category", "Other")
+                    existing_item.price = item_data.get("price", 0)
+                    existing_item.lot_number = item_data.get("lot_number")
+                    existing_item.expiry_date = parse_date_string(item_data.get("expiry_date"))
+                else:
+                    # Create new - convert date string to date object
+                    item_data_copy = item_data.copy()
+                    item_data_copy['expiry_date'] = parse_date_string(item_data.get("expiry_date"))
+                    new_item = InventoryItem(**item_data_copy)
+                    db.add(new_item)
+        
+        # Sync recipes - Fix N+1 query problem and handle deletions
+        # Get all existing recipes from database
+        all_existing_recipes = db.query(Recipe).all()
+        existing_recipes_dict = {recipe.name: recipe for recipe in all_existing_recipes}
+        
+        # Get recipe names from frontend
+        frontend_recipe_names = set(request.recipes.keys()) if request.recipes else set()
+        
+        # Delete recipes that exist in DB but not in frontend
+        for db_recipe in all_existing_recipes:
+            if db_recipe.name not in frontend_recipe_names:
+                db.delete(db_recipe)
+        
+        # Add or update recipes from frontend
+        if request.recipes:
+            for recipe_name, recipe_data in request.recipes.items():
+                existing_recipe = existing_recipes_dict.get(recipe_name)
+                items_json = json.dumps(recipe_data.get("items", []))
+                yield_json = json.dumps(recipe_data.get("yield")) if recipe_data.get("yield") else None
+                
+                if existing_recipe:
+                    existing_recipe.items = items_json
+                    existing_recipe.yield_data = yield_json
+                else:
+                    new_recipe = Recipe(
+                        name=recipe_name,
+                        items=items_json,
+                        yield_data=yield_json
+                    )
+                    db.add(new_recipe)
+        
+        # Sync tasks - Fix N+1 query problem
+        if request.tasks:
+            task_ids = [task_data["id"] for task_data in request.tasks if "id" in task_data]
+            existing_tasks = db.query(Task).filter(Task.id.in_(task_ids)).all() if task_ids else []
+            existing_tasks_dict = {task.id: task for task in existing_tasks}
+            
+            for task_data in request.tasks:
+                if "recipe" not in task_data:
+                    continue
+                    
+                if "id" in task_data:
+                    existing_task = existing_tasks_dict.get(task_data["id"])
+                    if existing_task:
+                        existing_task.recipe = task_data["recipe"]
+                        existing_task.quantity = task_data.get("quantity", 1)
+                        existing_task.assigned_to = task_data.get("assignedTo", "")
+                        existing_task.status = task_data.get("status", "todo")
+                        continue
+                
+                # Create new task
+                new_task = Task(
+                    recipe=task_data["recipe"],
+                    quantity=task_data.get("quantity", 1),
+                    assigned_to=task_data.get("assignedTo", ""),
+                    status=task_data.get("status", "todo")
+                )
+                db.add(new_task)
+        
+        db.commit()
+        return {"success": True, "message": "Data synchronized successfully"}
+        
+    except Exception as e:
+        db.rollback()
+        raise HTTPException(status_code=500, detail="Sync failed. Please try again.")

backend/routes/ai_assistant.py

@@ -0,0 +1,830 @@
+"""
+AI Assistant API Routes
+Handles natural language commands for inventory and recipe management
+"""
+
+from fastapi import APIRouter, HTTPException, Depends
+from pydantic import BaseModel, Field
+from typing import Optional, Dict, Any, List
+from sqlalchemy.orm import Session
+from database import SessionLocal
+from models import Recipe, InventoryItem
+from services.ai_assistant_service import AIAssistantService
+from services.ai_service import AIService
+from services.mealdb_service import MealDBService
+import json
+import logging
+
+logger = logging.getLogger(__name__)
+
+router = APIRouter()
+
+# Database dependency
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()
+
+# Initialize services
+ai_assistant = AIAssistantService()
+ai_service = AIService()
+mealdb_service = MealDBService()
+
+
+# ===== REQUEST/RESPONSE MODELS =====
+
+class CommandRequest(BaseModel):
+    """Request model for AI command"""
+    command: str = Field(..., description="Natural language command from user")
+    context: Optional[Dict[str, Any]] = Field(default=None, description="Conversation context")
+
+
+class CommandResponse(BaseModel):
+    """Response model for AI command"""
+    intent: str
+    confidence: float
+    message: str
+    requires_confirmation: bool = False
+    confirmation_data: Optional[Dict[str, Any]] = None
+    action_result: Optional[Dict[str, Any]] = None
+    search_results: Optional[List[Dict]] = None
+
+
+class ConfirmationRequest(BaseModel):
+    """Request model for confirming an action"""
+    confirmation_id: str
+    confirmed: bool
+    data: Dict[str, Any]
+
+
+# ===== MAIN COMMAND ENDPOINT =====
+
+@router.post("/command", response_model=CommandResponse)
+async def process_command(
+    request: CommandRequest,
+    db: Session = Depends(get_db)
+):
+    """
+    Process a natural language command from the user
+    Detects intent and either executes or requests confirmation
+    """
+    try:
+        # Detect intent
+        intent_result = await ai_assistant.detect_intent(
+            request.command,
+            request.context
+        )
+        
+        logger.info(f"Detected intent: {intent_result.intent} (confidence: {intent_result.confidence})")
+        
+        # Route to appropriate handler
+        if intent_result.intent.startswith("add_inventory"):
+            return await handle_add_inventory(intent_result, db)
+        
+        elif intent_result.intent.startswith("update_inventory"):
+            return await handle_update_inventory(intent_result, db)
+        
+        elif intent_result.intent.startswith("delete_inventory"):
+            return await handle_delete_inventory(intent_result, db)
+        
+        elif intent_result.intent == "query_inventory":
+            return await handle_query_inventory(intent_result, db)
+        
+        elif intent_result.intent == "add_recipe":
+            return await handle_add_recipe(intent_result, request.command, db)
+        
+        elif intent_result.intent == "edit_recipe":
+            return await handle_edit_recipe(intent_result, request.command, db)
+        
+        elif intent_result.intent == "delete_recipe":
+            return await handle_delete_recipe(intent_result, db)
+        
+        elif intent_result.intent == "search_recipe_web":
+            return await handle_search_recipe_web(intent_result)
+        
+        elif intent_result.intent == "show_recipe":
+            return await handle_show_recipe(intent_result, db)
+        
+        elif intent_result.intent == "show_catalogue":
+            return handle_show_catalogue(db)
+        
+        elif intent_result.intent == "filter_catalogue":
+            return handle_filter_catalogue(intent_result, db)
+        
+        else:
+            return CommandResponse(
+                intent=intent_result.intent,
+                confidence=intent_result.confidence,
+                message=intent_result.response_message or "I'm not sure how to help with that. Try rephrasing?",
+                requires_confirmation=False
+            )
+            
+    except Exception as e:
+        logger.error(f"Command processing error: {str(e)}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+# ===== CONFIRMATION ENDPOINT =====
+
+@router.post("/confirm")
+async def confirm_action(
+    request: ConfirmationRequest,
+    db: Session = Depends(get_db)
+):
+    """Execute a confirmed action"""
+    try:
+        if not request.confirmed:
+            return {"message": "Action cancelled.", "success": False}
+        
+        # Execute based on intent stored in confirmation_data
+        intent = request.data.get("intent")
+        
+        if intent == "add_recipe":
+            return await execute_add_recipe(request.data, db)
+        
+        elif intent == "delete_recipe":
+            return await execute_delete_recipe(request.data, db)
+        
+        elif intent == "edit_recipe":
+            return await execute_edit_recipe(request.data, db)
+        
+        elif intent == "add_inventory":
+            return await execute_add_inventory(request.data, db)
+        
+        elif intent == "update_inventory":
+            return await execute_update_inventory(request.data, db)
+        
+        elif intent == "delete_inventory":
+            return await execute_delete_inventory(request.data, db)
+        
+        else:
+            return {"message": "Unknown action", "success": False}
+            
+    except Exception as e:
+        logger.error(f"Confirmation execution error: {str(e)}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+# ===== INVENTORY HANDLERS =====
+
+async def handle_add_inventory(intent_result, db: Session) -> CommandResponse:
+    """Handle add inventory intent with validation"""
+    entities = intent_result.entities
+    
+    # Validate mandatory fields
+    missing_fields = []
+    
+    if not entities.get('item_name'):
+        missing_fields.append('item name')
+    if not entities.get('quantity'):
+        missing_fields.append('quantity')
+    if not entities.get('unit'):
+        missing_fields.append('unit')
+    if not entities.get('price'):
+        missing_fields.append('unit price')
+    
+    # If any mandatory fields are missing, ask for them
+    if missing_fields:
+        fields_text = ', '.join(missing_fields)
+        return CommandResponse(
+            intent=intent_result.intent,
+            confidence=intent_result.confidence,
+            message=f"📝 To add inventory, I need the {fields_text}. Please provide the missing information.\n\nExample: 'Add 5 kg of rice at 2.50 euros per kg'",
+            requires_confirmation=False,
+            action_result={
+                "awaiting_fields": missing_fields,
+                "partial_data": entities
+            }
+        )
+    
+    # All fields present, proceed to confirmation
+    return CommandResponse(
+        intent=intent_result.intent,
+        confidence=intent_result.confidence,
+        message=f"Ready to add {entities.get('quantity')} {entities.get('unit')} of {entities.get('item_name')} at {entities.get('price')} per {entities.get('unit')}. Confirm?",
+        requires_confirmation=True,
+        confirmation_data={
+            "intent": "add_inventory",
+            "item_name": entities.get('item_name'),
+            "quantity": entities.get('quantity'),
+            "unit": entities.get('unit'),
+            "category": entities.get('category', 'Other'),
+            "price": entities.get('price')
+        }
+    )
+
+
+async def handle_update_inventory(intent_result, db: Session) -> CommandResponse:
+    """Handle update inventory intent"""
+    entities = intent_result.entities
+    
+    # Check if item exists
+    item = db.query(InventoryItem).filter(
+        InventoryItem.name.ilike(f"%{entities.get('item_name')}%")
+    ).first()
+    
+    if not item:
+        return CommandResponse(
+            intent=intent_result.intent,
+            confidence=intent_result.confidence,
+            message=f"❌ Item '{entities.get('item_name')}' not found in inventory.",
+            requires_confirmation=False
+        )
+    
+    return CommandResponse(
+        intent=intent_result.intent,
+        confidence=intent_result.confidence,
+        message=f"Update {item.name} from {item.quantity} {item.unit} to {entities.get('quantity')} {entities.get('unit')}?",
+        requires_confirmation=True,
+        confirmation_data={
+            "intent": "update_inventory",
+            "item_id": item.id,
+            "quantity": entities.get('quantity'),
+            "unit": entities.get('unit')
+        }
+    )
+
+
+async def handle_delete_inventory(intent_result, db: Session) -> CommandResponse:
+    """Handle delete inventory intent"""
+    entities = intent_result.entities
+    
+    item = db.query(InventoryItem).filter(
+        InventoryItem.name.ilike(f"%{entities.get('item_name')}%")
+    ).first()
+    
+    if not item:
+        return CommandResponse(
+            intent=intent_result.intent,
+            confidence=intent_result.confidence,
+            message=f"❌ Item '{entities.get('item_name')}' not found.",
+            requires_confirmation=False
+        )
+    
+    return CommandResponse(
+        intent=intent_result.intent,
+        confidence=intent_result.confidence,
+        message=f"⚠️ Delete {item.name} from inventory?",
+        requires_confirmation=True,
+        confirmation_data={
+            "intent": "delete_inventory",
+            "item_id": item.id
+        }
+    )
+
+
+async def handle_query_inventory(intent_result, db: Session) -> CommandResponse:
+    """Handle inventory query intent"""
+    entities = intent_result.entities
+    item_name = entities.get('item_name')
+    
+    if item_name:
+        item = db.query(InventoryItem).filter(
+            InventoryItem.name.ilike(f"%{item_name}%")
+        ).first()
+        
+        if item:
+            message = f"📦 {item.name}: {item.quantity} {item.unit}"
+            if item.expiry_date:
+                message += f"\nExpires: {item.expiry_date}"
+        else:
+            message = f"❌ '{item_name}' not found in inventory."
+    else:
+        # Show all inventory count
+        count = db.query(InventoryItem).count()
+        message = f"📦 You have {count} items in inventory."
+    
+    return CommandResponse(
+        intent=intent_result.intent,
+        confidence=intent_result.confidence,
+        message=message,
+        requires_confirmation=False
+    )
+
+
+# ===== RECIPE HANDLERS =====
+
+async def handle_add_recipe(intent_result, full_command: str, db: Session) -> CommandResponse:
+    """Handle add recipe intent - parse and confirm with validation"""
+    try:
+        # Parse recipe from natural language
+        recipe_data = await ai_assistant.parse_recipe_from_text(full_command)
+        
+        # Validate mandatory fields
+        missing_fields = []
+        
+        if not recipe_data.get('recipe_name'):
+            missing_fields.append('recipe name')
+        
+        if not recipe_data.get('ingredients') or len(recipe_data.get('ingredients', [])) == 0:
+            missing_fields.append('ingredients')
+        
+        # If mandatory fields are missing, ask for them
+        if missing_fields:
+            fields_text = ' and '.join(missing_fields)
+            
+            if 'ingredients' in missing_fields:
+                return CommandResponse(
+                    intent=intent_result.intent,
+                    confidence=intent_result.confidence,
+                    message=f"📝 To add a recipe, I need the {fields_text}.\n\nPlease tell me the ingredients for this recipe.\n\nExample: 'flour 500 grams, tomato sauce 200 ml, and cheese 50 grams'",
+                    requires_confirmation=False,
+                    action_result={
+                        "awaiting_ingredients": True,
+                        "recipe_name": recipe_data.get('recipe_name')
+                    }
+                )
+            else:
+                return CommandResponse(
+                    intent=intent_result.intent,
+                    confidence=intent_result.confidence,
+                    message=f"📝 I need the {fields_text} to add the recipe.\n\nExample: 'Add recipe Pizza with flour 500 grams'",
+                    requires_confirmation=False
+                )
+        
+        # Check if recipe already exists
+        existing = db.query(Recipe).filter(Recipe.name == recipe_data['recipe_name']).first()
+        if existing:
+            return CommandResponse(
+                intent=intent_result.intent,
+                confidence=intent_result.confidence,
+                message=f"❌ Recipe '{recipe_data['recipe_name']}' already exists.",
+                requires_confirmation=False
+            )
+        
+        # Validate ingredient quantities and units
+        missing_quantities = []
+        for ing in recipe_data['ingredients']:
+            if ing.get('quantity') is None or ing.get('unit') is None:
+                missing_quantities.append(ing['name'])
+        
+        if missing_quantities:
+            ingredients_text = ', '.join(missing_quantities)
+            return CommandResponse(
+                intent=intent_result.intent,
+                confidence=intent_result.confidence,
+                message=f"📝 Please provide quantities and units for: {ingredients_text}\n\nExample: 'flour 500 grams, salt 10 grams'",
+                requires_confirmation=False,
+                action_result={
+                    "awaiting_quantities": True,
+                    "recipe_name": recipe_data['recipe_name'],
+                    "ingredients": recipe_data['ingredients']
+                }
+            )
+        
+        # Check for yield
+        if recipe_data.get('yield_qty') is None or recipe_data.get('yield_unit') is None:
+            # Build ingredients list
+            ingredients_list = "\n".join([
+                f"  • {ing['name']}: {ing['quantity']} {ing['unit']}"
+                for ing in recipe_data['ingredients']
+            ])
+            
+            return CommandResponse(
+                intent=intent_result.intent,
+                confidence=intent_result.confidence,
+                message=f"📝 Recipe '{recipe_data['recipe_name']}' with:\n\n{ingredients_list}\n\n⚖️ What is the yield?\n\nExample: '10 servings' or '2 pizzas' or '5 liters'",
+                requires_confirmation=False,
+                action_result={
+                    "awaiting_yield": True,
+                    "recipe_data": recipe_data
+                }
+            )
+        
+        # Build confirmation message
+        ingredients_list = "\n".join([
+            f"  • {ing['name']}: {ing['quantity']} {ing['unit']}"
+            for ing in recipe_data['ingredients']
+        ])
+        
+        message = f"📝 Add recipe '{recipe_data['recipe_name']}'?\n\nIngredients:\n{ingredients_list}\n\nYield: {recipe_data['yield_qty']} {recipe_data['yield_unit']}"
+        
+        return CommandResponse(
+            intent=intent_result.intent,
+            confidence=intent_result.confidence,
+            message=message,
+            requires_confirmation=True,
+            confirmation_data={
+                "intent": "add_recipe",
+                "recipe_data": recipe_data
+            }
+        )
+        
+    except Exception as e:
+        logger.error(f"Recipe parsing error: {str(e)}")
+        return CommandResponse(
+            intent=intent_result.intent,
+            confidence=0.0,
+            message=f"❌ Could not parse recipe. Please provide the recipe name and ingredients.\n\nExample: 'Add recipe Pizza with flour 500 grams and tomato sauce 200 ml'",
+            requires_confirmation=False
+        )
+
+
+async def handle_edit_recipe(intent_result, full_command: str, db: Session) -> CommandResponse:
+    """Handle edit recipe intent - parse and execute the edit"""
+    entities = intent_result.entities
+    recipe_name = entities.get('recipe_name')
+    
+    recipe = db.query(Recipe).filter(Recipe.name.ilike(f"%{recipe_name}%")).first()
+    
+    if not recipe:
+        return CommandResponse(
+            intent=intent_result.intent,
+            confidence=intent_result.confidence,
+            message=f"❌ Recipe '{recipe_name}' not found.",
+            requires_confirmation=False
+        )
+    
+    # Parse the edit action from the full command
+    action = entities.get('action', '')  # add, remove, change
+    ingredient_name = entities.get('ingredient_name', '')
+    quantity = entities.get('quantity', '')
+    unit = entities.get('unit', '')
+    
+    # If we have enough info to make the edit
+    if action and ingredient_name:
+        message = f"✏️ Edit recipe '{recipe.name}':\n"
+        
+        if action.lower() in ['add', 'adding']:
+            message += f"  • Add {quantity} {unit} of {ingredient_name}"
+        elif action.lower() in ['remove', 'removing', 'delete']:
+            message += f"  • Remove {ingredient_name}"
+        elif action.lower() in ['change', 'update', 'modify']:
+            message += f"  • Change {ingredient_name} to {quantity} {unit}"
+        else:
+            message += f"  • Modify {ingredient_name}"
+        
+        message += "\n\nConfirm?"
+        
+        return CommandResponse(
+            intent=intent_result.intent,
+            confidence=intent_result.confidence,
+            message=message,
+            requires_confirmation=True,
+            confirmation_data={
+                "intent": "edit_recipe",
+                "recipe_id": recipe.id,
+                "recipe_name": recipe.name,
+                "action": action.lower(),
+                "ingredient_name": ingredient_name,
+                "quantity": quantity,
+                "unit": unit
+            }
+        )
+    else:
+        # Not enough information
+        return CommandResponse(
+            intent=intent_result.intent,
+            confidence=intent_result.confidence,
+            message=f"✏️ To edit '{recipe.name}', please specify:\n\nExamples:\n  • 'Add 2 grams of salt'\n  • 'Remove flour'\n  • 'Change tomatoes to 500 grams'",
+            requires_confirmation=False
+        )
+
+
+async def handle_delete_recipe(intent_result, db: Session) -> CommandResponse:
+    """Handle delete recipe intent"""
+    entities = intent_result.entities
+    recipe_name = entities.get('recipe_name')
+    
+    recipe = db.query(Recipe).filter(Recipe.name.ilike(f"%{recipe_name}%")).first()
+    
+    if not recipe:
+        return CommandResponse(
+            intent=intent_result.intent,
+            confidence=intent_result.confidence,
+            message=f"❌ Recipe '{recipe_name}' not found.",
+            requires_confirmation=False
+        )
+    
+    return CommandResponse(
+        intent=intent_result.intent,
+        confidence=intent_result.confidence,
+        message=f"⚠️ Delete recipe '{recipe.name}'? This cannot be undone.",
+        requires_confirmation=True,
+        confirmation_data={
+            "intent": "delete_recipe",
+            "recipe_id": recipe.id,
+            "recipe_name": recipe.name
+        }
+    )
+
+
+async def handle_search_recipe_web(intent_result) -> CommandResponse:
+    """Handle search recipe web intent - triggers existing web recipe modal"""
+    entities = intent_result.entities
+    query = entities.get('query', '')
+    
+    try:
+        # Just return a success message with the query
+        # The frontend will handle opening the existing web recipe search modal
+        return CommandResponse(
+            intent=intent_result.intent,
+            confidence=intent_result.confidence,
+            message=f"🔍 Opening recipe search for '{query}'...",
+            requires_confirmation=False,
+            search_results=[{"trigger": "web_recipe_search"}],  # Signal to frontend
+            action_result={"search_query": query}
+        )
+        
+    except Exception as e:
+        logger.error(f"Recipe search error: {str(e)}")
+        return CommandResponse(
+            intent=intent_result.intent,
+            confidence=intent_result.confidence,
+            message=f"❌ Search failed: {str(e)}",
+            requires_confirmation=False
+        )
+
+
+async def handle_show_recipe(intent_result, db: Session) -> CommandResponse:
+    """Handle show recipe intent"""
+    entities = intent_result.entities
+    recipe_name = entities.get('recipe_name')
+    
+    recipe = db.query(Recipe).filter(Recipe.name.ilike(f"%{recipe_name}%")).first()
+    
+    if not recipe:
+        return CommandResponse(
+            intent=intent_result.intent,
+            confidence=intent_result.confidence,
+            message=f"❌ Recipe '{recipe_name}' not found.",
+            requires_confirmation=False
+        )
+    
+    # Parse items
+    items = json.loads(recipe.items) if recipe.items else []
+    ingredients_list = "\n".join([
+        f"  • {item['name']}: {item.get('quantity', '?')} {item.get('unit', '')}"
+        for item in items
+    ])
+    
+    message = f"📖 **{recipe.name}**\n\nIngredients:\n{ingredients_list}"
+    if recipe.instructions:
+        message += f"\n\n{recipe.instructions[:200]}..."
+    
+    return CommandResponse(
+        intent=intent_result.intent,
+        confidence=intent_result.confidence,
+        message=message,
+        requires_confirmation=False,
+        action_result={"recipe_id": recipe.id}
+    )
+
+
+def handle_show_catalogue(db: Session) -> CommandResponse:
+    """Handle show catalogue intent"""
+    recipes = db.query(Recipe).all()
+    
+    recipe_list = "\n".join([f"  • {r.name}" for r in recipes[:10]])
+    message = f"📚 Recipe Catalogue ({len(recipes)} total):\n\n{recipe_list}"
+    
+    if len(recipes) > 10:
+        message += f"\n  ... and {len(recipes) - 10} more"
+    
+    return CommandResponse(
+        intent="show_catalogue",
+        confidence=1.0,
+        message=message,
+        requires_confirmation=False,
+        action_result={"total_recipes": len(recipes)}
+    )
+
+
+def handle_filter_catalogue(intent_result, db: Session) -> CommandResponse:
+    """Handle filter catalogue intent"""
+    entities = intent_result.entities
+    category = entities.get('category', '').lower()
+    
+    # Filter recipes (basic text search in name/cuisine)
+    recipes = db.query(Recipe).filter(
+        (Recipe.name.ilike(f"%{category}%")) | 
+        (Recipe.cuisine.ilike(f"%{category}%"))
+    ).all()
+    
+    if not recipes:
+        return CommandResponse(
+            intent=intent_result.intent,
+            confidence=intent_result.confidence,
+            message=f"No recipes found in category '{category}'.",
+            requires_confirmation=False
+        )
+    
+    recipe_list = "\n".join([f"  • {r.name}" for r in recipes])
+    
+    return CommandResponse(
+        intent=intent_result.intent,
+        confidence=intent_result.confidence,
+        message=f"📚 {category.title()} Recipes ({len(recipes)}):\n\n{recipe_list}",
+        requires_confirmation=False
+    )
+
+
+# ===== EXECUTION FUNCTIONS =====
+
+async def execute_add_recipe(data: Dict, db: Session) -> Dict:
+    """Execute confirmed recipe addition"""
+    try:
+        recipe_data = data['recipe_data']
+        
+        # Convert ingredients to items format with defaults (use 'qty' to match frontend)
+        items = [
+            {
+                "name": ing['name'],
+                "qty": ing.get('quantity') if ing.get('quantity') is not None else 1,
+                "unit": ing.get('unit') if ing.get('unit') is not None else 'piece'
+            }
+            for ing in recipe_data['ingredients']
+        ]
+        
+        # Create recipe with proper defaults
+        yield_qty = recipe_data.get('yield_qty')
+        yield_unit = recipe_data.get('yield_unit')
+        
+        # Only set yield_data if values are provided
+        yield_data_dict = {}
+        if yield_qty is not None and yield_unit is not None:
+            yield_data_dict = {"qty": yield_qty, "unit": yield_unit}
+        else:
+            yield_data_dict = {"qty": 1, "unit": "serving"}
+        
+        new_recipe = Recipe(
+            name=recipe_data['recipe_name'],
+            items=json.dumps(items),
+            instructions=recipe_data.get('instructions', ''),
+            yield_data=json.dumps(yield_data_dict)
+        )
+        
+        db.add(new_recipe)
+        db.commit()
+        
+        return {
+            "success": True,
+            "message": f"✅ Recipe '{recipe_data['recipe_name']}' added successfully!"
+        }
+        
+    except Exception as e:
+        db.rollback()
+        logger.error(f"Recipe add execution error: {str(e)}")
+        return {"success": False, "message": f"❌ Failed to add recipe: {str(e)}"}
+
+
+async def execute_delete_recipe(data: Dict, db: Session) -> Dict:
+    """Execute confirmed recipe deletion"""
+    try:
+        recipe = db.query(Recipe).filter(Recipe.id == data['recipe_id']).first()
+        if not recipe:
+            return {"success": False, "message": "Recipe not found"}
+        
+        recipe_name = recipe.name
+        db.delete(recipe)
+        db.commit()
+        
+        return {
+            "success": True,
+            "message": f"✅ Recipe '{recipe_name}' deleted."
+        }
+        
+    except Exception as e:
+        db.rollback()
+        logger.error(f"Recipe delete execution error: {str(e)}")
+        return {"success": False, "message": f"❌ Failed to delete recipe: {str(e)}"}
+
+
+async def execute_edit_recipe(data: Dict, db: Session) -> Dict:
+    """Execute confirmed recipe edit"""
+    try:
+        recipe = db.query(Recipe).filter(Recipe.id == data['recipe_id']).first()
+        if not recipe:
+            return {"success": False, "message": "Recipe not found"}
+        
+        # Parse current items
+        items = json.loads(recipe.items) if recipe.items else []
+        action = data.get('action', '')
+        ingredient_name = data.get('ingredient_name', '').lower()
+        quantity = data.get('quantity')
+        unit = data.get('unit', '')
+        
+        # Find existing ingredient (case-insensitive)
+        existing_idx = None
+        for idx, item in enumerate(items):
+            if item.get('name', '').lower() == ingredient_name:
+                existing_idx = idx
+                break
+        
+        # Perform action
+        if action in ['add', 'adding']:
+            if existing_idx is not None:
+                # Update existing ingredient
+                items[existing_idx]['qty'] = float(quantity) if quantity else items[existing_idx].get('qty', 1)
+                items[existing_idx]['unit'] = unit if unit else items[existing_idx].get('unit', '')
+                message = f"✅ Updated {ingredient_name} in '{recipe.name}'"
+            else:
+                # Add new ingredient
+                items.append({
+                    "name": ingredient_name,
+                    "qty": float(quantity) if quantity else 1,
+                    "unit": unit
+                })
+                message = f"✅ Added {quantity} {unit} of {ingredient_name} to '{recipe.name}'"
+        
+        elif action in ['remove', 'removing', 'delete']:
+            if existing_idx is not None:
+                removed = items.pop(existing_idx)
+                message = f"✅ Removed {removed['name']} from '{recipe.name}'"
+            else:
+                return {"success": False, "message": f"❌ {ingredient_name} not found in recipe"}
+        
+        elif action in ['change', 'update', 'modify']:
+            if existing_idx is not None:
+                items[existing_idx]['qty'] = float(quantity) if quantity else items[existing_idx].get('qty', 1)
+                items[existing_idx]['unit'] = unit if unit else items[existing_idx].get('unit', '')
+                message = f"✅ Updated {ingredient_name} to {quantity} {unit} in '{recipe.name}'"
+            else:
+                return {"success": False, "message": f"❌ {ingredient_name} not found in recipe"}
+        
+        else:
+            return {"success": False, "message": "Unknown action"}
+        
+        # Save updated recipe
+        recipe.items = json.dumps(items)
+        db.commit()
+        
+        return {"success": True, "message": message}
+        
+    except Exception as e:
+        db.rollback()
+        logger.error(f"Recipe edit execution error: {str(e)}")
+        return {"success": False, "message": f"❌ Failed to edit recipe: {str(e)}"}
+
+
+async def execute_add_inventory(data: Dict, db: Session) -> Dict:
+    """Execute confirmed inventory addition"""
+    try:
+        # Check if item exists, update or create
+        existing = db.query(InventoryItem).filter(
+            InventoryItem.name.ilike(f"%{data['item_name']}%")
+        ).first()
+        
+        if existing:
+            existing.quantity += float(data['quantity'])
+            db.commit()
+            message = f"✅ Updated {existing.name}: {existing.quantity} {existing.unit}"
+        else:
+            new_item = InventoryItem(
+                name=data['item_name'],
+                unit=data['unit'],
+                quantity=float(data['quantity']),
+                category=data.get('category', 'Other')
+            )
+            db.add(new_item)
+            db.commit()
+            message = f"✅ Added {data['quantity']} {data['unit']} of {data['item_name']}"
+        
+        return {"success": True, "message": message}
+        
+    except Exception as e:
+        db.rollback()
+        logger.error(f"Inventory add error: {str(e)}")
+        return {"success": False, "message": f"❌ Failed: {str(e)}"}
+
+
+async def execute_update_inventory(data: Dict, db: Session) -> Dict:
+    """Execute confirmed inventory update"""
+    try:
+        item = db.query(InventoryItem).filter(InventoryItem.id == data['item_id']).first()
+        if not item:
+            return {"success": False, "message": "Item not found"}
+        
+        item.quantity = float(data['quantity'])
+        item.unit = data['unit']
+        db.commit()
+        
+        return {
+            "success": True,
+            "message": f"✅ Updated {item.name} to {item.quantity} {item.unit}"
+        }
+        
+    except Exception as e:
+        db.rollback()
+        return {"success": False, "message": f"❌ Failed: {str(e)}"}
+
+
+async def execute_delete_inventory(data: Dict, db: Session) -> Dict:
+    """Execute confirmed inventory deletion"""
+    try:
+        item = db.query(InventoryItem).filter(InventoryItem.id == data['item_id']).first()
+        if not item:
+            return {"success": False, "message": "Item not found"}
+        
+        item_name = item.name
+        db.delete(item)
+        db.commit()
+        
+        return {"success": True, "message": f"✅ Removed {item_name} from inventory"}
+        
+    except Exception as e:
+        db.rollback()
+        return {"success": False, "message": f"❌ Failed: {str(e)}"}
+

backend/routes/chat.py

@@ -0,0 +1,162 @@
+from fastapi import APIRouter, HTTPException
+from fastapi.concurrency import run_in_threadpool
+from pydantic import BaseModel
+from typing import Optional
+import json, os, openai
+import logging
+
+router = APIRouter()
+logger = logging.getLogger(__name__)
+
+class ChatRequest(BaseModel):
+    prompt: str
+    language: Optional[str] = "en"  # Added: language support (en/it)
+
+class ChatResponse(BaseModel):
+    status: str
+    message: Optional[str] = None
+    parsed_data: Optional[dict] = None
+
+OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
+client = openai.OpenAI(api_key=OPENAI_API_KEY) if OPENAI_API_KEY else None
+
+# Multi-language system prompts
+SYSTEM_PROMPTS = {
+    "en": """You are ChefCode's AI Inventory Parser. Parse commands silently and return only JSON.
+
+Extract: item_name, unit, quantity, unit_price, type, lot_number (optional), expiry_date (optional)
+
+Type detection:
+beef/chicken/pork/meat → meat
+lettuce/tomato/onion/vegetable → vegetable
+apple/banana/orange/fruit → fruit
+milk/cheese/yogurt/dairy → dairy
+water/juice/wine/soda/beverage → beverage
+sugar/flour/pasta/rice/bread → grocery
+soap/detergent/cleaner → cleaning
+
+Lot number keywords: "lot", "batch", "lot number", "batch number", "LOT"
+Expiry date keywords: "expires", "expiry", "best before", "use by", "exp date", "expiration"
+Date formats: Parse dates flexibly (e.g., "Dec 25", "12/25/2024", "2024-12-25", "December 25 2024")
+
+If price missing: {"status": "ask_price", "message": "Price?"}
+If complete: {"status": "complete", "parsed_data": {"item_name": "...", "unit": "...", "quantity": ..., "unit_price": ..., "type": "...", "lot_number": "..." or null, "expiry_date": "YYYY-MM-DD" or null}}
+
+Output ONLY valid JSON. No explanations.""",
+    
+    "it": """Sei l'AI parser di ChefCode. Analizza comandi in silenzio e restituisci solo JSON.
+
+Estrai: item_name, unit, quantity, unit_price, type, lot_number (opzionale), expiry_date (opzionale)
+
+Rilevamento tipo:
+manzo/pollo/maiale/carne → meat
+lattuga/pomodoro/cipolla/verdura → vegetable
+mela/banana/arancia/frutta → fruit
+latte/formaggio/yogurt/latticini → dairy
+acqua/succo/vino/bevanda → beverage
+zucchero/farina/pasta/riso/pane → grocery
+sapone/detergente → cleaning
+
+Parole chiave lotto: "lotto", "batch", "numero lotto", "lotto numero"
+Parole chiave scadenza: "scadenza", "scade", "da consumarsi entro", "exp", "data scadenza"
+Formati data: Analizza date flessibilmente (es. "25 dic", "25/12/2024", "2024-12-25", "25 dicembre 2024")
+
+Se manca prezzo: {"status": "ask_price", "message": "Prezzo?"}
+Se completo: {"status": "complete", "parsed_data": {"item_name": "...", "unit": "...", "quantity": ..., "unit_price": ..., "type": "...", "lot_number": "..." o null, "expiry_date": "YYYY-MM-DD" o null}}
+
+Output SOLO JSON valido. Niente spiegazioni."""
+}
+
+# Added: Health check endpoint
+@router.get("/chat/health")
+async def chat_health():
+    """Health check for ChatGPT integration"""
+    return {
+        "status": "available" if client else "unavailable",
+        "message": "ChatGPT integration ready" if client else "OPENAI_API_KEY not set",
+        "supported_languages": ["en", "it"],
+        "default_language": "en"
+    }
+
+@router.post("/chatgpt-smart", response_model=ChatResponse)
+async def parse_inventory_command(request: ChatRequest):
+    if not client:
+        # Mock response when API key is not set
+        lang = request.language or "en"
+        mock_message = {
+            "en": "ChatGPT integration ready. Please set OPENAI_API_KEY environment variable to enable AI functionality.",
+            "it": "Integrazione ChatGPT pronta. Imposta la variabile d'ambiente OPENAI_API_KEY per abilitare la funzionalità AI."
+        }
+        return ChatResponse(
+            status="mock",
+            message=mock_message.get(lang, mock_message["en"])
+        )
+    
+    lang = request.language or "en"
+    
+    try:
+        # Get language-specific system prompt
+        system_prompt = SYSTEM_PROMPTS.get(lang, SYSTEM_PROMPTS["en"])
+        
+        # Run blocking OpenAI call in thread pool to avoid blocking event loop
+        response = await run_in_threadpool(
+            lambda: client.chat.completions.create(
+                model="gpt-4o-mini",
+                messages=[
+                    {"role": "system", "content": system_prompt},
+                    {"role": "user", "content": request.prompt}
+                ],
+                temperature=0
+            )
+        )
+
+        ai_response = response.choices[0].message.content.strip()
+
+        try:
+            parsed = json.loads(ai_response)
+        except json.JSONDecodeError:
+            logger.error(f"Invalid JSON response from OpenAI: {ai_response}")
+            error_msg = {
+                "en": "Unable to parse AI response. Please try again.",
+                "it": "Impossibile analizzare la risposta AI. Riprova."
+            }
+            raise HTTPException(status_code=500, detail=error_msg.get(lang, error_msg["en"]))
+
+        # If missing price → ask user
+        if parsed.get("status") == "ask_price":
+            return ChatResponse(
+                status="ask_price",
+                message=parsed.get("message")
+            )
+
+        # If complete → save to inventory
+        elif parsed.get("status") == "complete":
+            data = parsed.get("parsed_data")
+            success_msg = {
+                "en": f"Item '{data.get('item_name')}' added to inventory.",
+                "it": f"Articolo '{data.get('item_name')}' aggiunto all'inventario."
+            }
+            return ChatResponse(
+                status="success",
+                message=success_msg.get(lang, success_msg["en"]),
+                parsed_data=data
+            )
+
+        else:
+            error_msg = {
+                "en": "Unexpected AI response format",
+                "it": "Formato risposta AI inaspettato"
+            }
+            raise HTTPException(status_code=400, detail=error_msg.get(lang, error_msg["en"]))
+
+    except HTTPException:
+        # Re-raise HTTP exceptions as-is
+        raise
+    except Exception as e:
+        # Log the detailed error internally but return generic message to user
+        logger.error(f"ChatGPT error: {type(e).__name__} - {str(e)}")
+        error_msg = {
+            "en": "An error occurred while processing your request. Please try again.",
+            "it": "Si è verificato un errore durante l'elaborazione della richiesta. Riprova."
+        }
+        raise HTTPException(status_code=500, detail=error_msg.get(lang, error_msg["en"]))

backend/routes/data.py

@@ -0,0 +1,65 @@
+from fastapi import APIRouter, Depends
+from sqlalchemy.orm import Session
+from database import SessionLocal
+from models import InventoryItem, Recipe, Task
+import json
+from typing import Dict, Any
+
+router = APIRouter()
+
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()
+
+@router.get("/data")
+async def get_all_data(db: Session = Depends(get_db)):
+    """Get all data for frontend synchronization - matches original backend format"""
+    
+    # Get inventory
+    inventory_items = db.query(InventoryItem).all()
+    inventory = [
+        {
+            "id": item.id,
+            "name": item.name,
+            "unit": item.unit,
+            "quantity": item.quantity,
+            "category": item.category,
+            "price": item.price,
+            "lot_number": item.lot_number,
+            "expiry_date": item.expiry_date.isoformat() if item.expiry_date else None
+        }
+        for item in inventory_items
+    ]
+    
+    # Get recipes
+    recipe_items = db.query(Recipe).all()
+    recipes = {}
+    for recipe in recipe_items:
+        items_data = json.loads(recipe.items) if recipe.items else []
+        yield_data = json.loads(recipe.yield_data) if recipe.yield_data else None
+        recipes[recipe.name] = {
+            "items": items_data,
+            "yield": yield_data
+        }
+    
+    # Get tasks
+    task_items = db.query(Task).all()
+    tasks = [
+        {
+            "id": task.id,
+            "recipe": task.recipe,
+            "quantity": task.quantity,
+            "assignedTo": task.assigned_to,
+            "status": task.status
+        }
+        for task in task_items
+    ]
+    
+    return {
+        "inventory": inventory,
+        "recipes": recipes,
+        "tasks": tasks
+    }

backend/routes/inventory.py

@@ -0,0 +1,103 @@
+from fastapi import APIRouter, Depends, HTTPException
+from sqlalchemy.orm import Session
+from database import SessionLocal
+from models import InventoryItem
+from schemas import InventoryItemCreate, InventoryItemUpdate, InventoryItemResponse
+from typing import List
+from auth import verify_api_key
+
+router = APIRouter()
+
+# Dependency to get database session
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()
+
+@router.get("/inventory", response_model=List[InventoryItemResponse])
+async def get_inventory(db: Session = Depends(get_db)):
+    """Get all inventory items"""
+    items = db.query(InventoryItem).all()
+    return items
+
+@router.post("/inventory", response_model=InventoryItemResponse)
+async def add_inventory_item(
+    item: InventoryItemCreate, 
+    db: Session = Depends(get_db),
+    api_key: str = Depends(verify_api_key)
+):
+    """Add a new inventory item"""
+    # Check if item with same name already exists
+    existing_item = db.query(InventoryItem).filter(InventoryItem.name == item.name).first()
+    
+    if existing_item:
+        # Update quantity if same price, otherwise create new entry
+        if abs(existing_item.price - item.price) < 0.01:  # Same price
+            existing_item.quantity += item.quantity
+            db.commit()
+            db.refresh(existing_item)
+            return existing_item
+    
+    # Create new item
+    db_item = InventoryItem(**item.dict())
+    db.add(db_item)
+    db.commit()
+    db.refresh(db_item)
+    return db_item
+
+@router.put("/inventory/{item_id}")
+async def update_inventory_item(
+    item_id: int, 
+    item: InventoryItemUpdate, 
+    db: Session = Depends(get_db),
+    api_key: str = Depends(verify_api_key)
+):
+    """Update an inventory item (partial update supported)"""
+    db_item = db.query(InventoryItem).filter(InventoryItem.id == item_id).first()
+    if not db_item:
+        raise HTTPException(status_code=404, detail="Item not found")
+    
+    # Only update fields that were explicitly set (exclude_unset=True)
+    update_data = item.dict(exclude_unset=True)
+    for key, value in update_data.items():
+        setattr(db_item, key, value)
+    
+    db.commit()
+    db.refresh(db_item)
+    return db_item
+
+@router.delete("/inventory/delete")
+async def delete_inventory_item_by_id(
+    request: dict,
+    db: Session = Depends(get_db),
+    api_key: str = Depends(verify_api_key)
+):
+    """Delete an inventory item by ID from request body"""
+    item_id = request.get("id")
+    if not item_id:
+        raise HTTPException(status_code=400, detail="Item ID is required")
+    
+    db_item = db.query(InventoryItem).filter(InventoryItem.id == item_id).first()
+    if not db_item:
+        raise HTTPException(status_code=404, detail="Item not found")
+    
+    db.delete(db_item)
+    db.commit()
+    return {"message": "Item deleted successfully"}
+
+@router.delete("/inventory/{item_id}")
+async def delete_inventory_item(
+    item_id: int, 
+    db: Session = Depends(get_db),
+    api_key: str = Depends(verify_api_key)
+):
+    """Delete an inventory item"""
+    db_item = db.query(InventoryItem).filter(InventoryItem.id == item_id).first()
+    if not db_item:
+        raise HTTPException(status_code=404, detail="Item not found")
+    
+    db.delete(db_item)
+    db.commit()
+    return {"message": "Item deleted successfully"}

backend/routes/ocr.py

@@ -0,0 +1,166 @@
+from fastapi import APIRouter, File, UploadFile, HTTPException, Depends
+from typing import Dict, Any
+import os
+import tempfile
+import asyncio
+from pathlib import Path
+from auth import verify_api_key
+
+router = APIRouter()
+
+# Cached OCR processor instance
+_ocr_processor_cache = {"instance": None, "error": None}
+
+# Lazy import of OCR to avoid import errors if dependencies are missing
+def get_ocr_processor():
+    """Lazy load OCR processor with caching to avoid repeated initialization"""
+    # Return cached instance if available
+    if _ocr_processor_cache["instance"] is not None:
+        return _ocr_processor_cache["instance"], None
+    if _ocr_processor_cache["error"] is not None:
+        return None, _ocr_processor_cache["error"]
+    
+    try:
+        import sys
+        import io
+        
+        # Set UTF-8 encoding for stdout/stderr to handle emojis
+        if sys.stdout.encoding != 'utf-8':
+            sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8', errors='replace')
+            sys.stderr = io.TextIOWrapper(sys.stderr.buffer, encoding='utf-8', errors='replace')
+        
+        from tools.ocr_invoice import InvoiceOCR
+        
+        # Get configuration from environment
+        PROJECT_ID = os.getenv("PROJECT_ID")
+        LOCATION = os.getenv("LOCATION")
+        PROCESSOR_ID = os.getenv("PROCESSOR_ID")
+        GEMINI_API_KEY = os.getenv("GEMINI_API_KEY")
+        
+        if not all([PROJECT_ID, LOCATION, PROCESSOR_ID, GEMINI_API_KEY]):
+            error = "Missing OCR configuration. Set PROJECT_ID, LOCATION, PROCESSOR_ID, and GEMINI_API_KEY in .env"
+            _ocr_processor_cache["error"] = error
+            return None, error
+        
+        ocr = InvoiceOCR(
+            project_id=PROJECT_ID,
+            location=LOCATION,
+            processor_id=PROCESSOR_ID,
+            gemini_api_key=GEMINI_API_KEY
+        )
+        _ocr_processor_cache["instance"] = ocr
+        return ocr, None
+        
+    except ImportError as e:
+        error = f"OCR dependencies not installed: {str(e)}"
+        _ocr_processor_cache["error"] = error
+        return None, error
+    except Exception as e:
+        import logging
+        logging.error(f"OCR initialization error: {str(e)}", exc_info=True)
+        error = f"Failed to initialize OCR: {str(e)}"
+        _ocr_processor_cache["error"] = error
+        return None, error
+
+
+@router.post("/ocr-invoice")
+async def process_invoice(
+    file: UploadFile = File(...),
+    api_key: str = Depends(verify_api_key)
+) -> Dict[str, Any]:
+    """
+    Process an invoice image/PDF and extract structured data using OCR
+    
+    Supports: PDF, JPG, JPEG, PNG, TIFF
+    """
+    # Get OCR processor
+    ocr, error = get_ocr_processor()
+    if error:
+        raise HTTPException(
+            status_code=503, 
+            detail=f"OCR service not available: {error}"
+        )
+    
+    # Validate file type
+    allowed_types = {'application/pdf', 'image/jpeg', 'image/png', 'image/tiff'}
+    if file.content_type not in allowed_types:
+        raise HTTPException(
+            status_code=400,
+            detail=f"Unsupported file type: {file.content_type}. Supported: PDF, JPEG, PNG, TIFF"
+        )
+    
+    # Create temporary file to store upload
+    temp_file = None
+    try:
+        # Determine file extension
+        extension = Path(file.filename).suffix or '.tmp'
+        
+        # Create temporary file
+        with tempfile.NamedTemporaryFile(delete=False, suffix=extension) as temp:
+            # Read and write file content
+            content = await file.read()
+            temp.write(content)
+            temp_file = temp.name
+        
+        # Process the invoice asynchronously (run synchronous OCR in thread pool)
+        invoice_data = await asyncio.to_thread(ocr.process_invoice, temp_file, save_json=False)
+        
+        # Extract line items and convert to frontend format
+        line_items = invoice_data.get("line_items", [])
+        items = []
+        for item in line_items:
+            items.append({
+                "name": item.get("description", "Unknown"),
+                "quantity": item.get("quantity", 0),
+                "unit": item.get("unit", "pz"),
+                "price": item.get("unit_price", 0),
+                "category": item.get("type", "Food"),  # Use OCR extracted type as category
+                "lot_number": item.get("item_code", ""),  # Use item_code as lot_number
+                "expiry_date": item.get("expiry_date", "")  # Extract expiry date from OCR
+            })
+        
+        # Return in format frontend expects
+        return {
+            "status": "success",
+            "items": items,
+            "filename": file.filename,
+            "metadata": invoice_data.get("_processing_metadata", {})
+        }
+        
+    except Exception as e:
+        # Log detailed error internally
+        import logging
+        logging.error(f"OCR processing error: {str(e)}")
+        
+        raise HTTPException(
+            status_code=500,
+            detail="Error processing invoice. Please check the file format and try again."
+        )
+        
+    finally:
+        # Clean up temporary file
+        if temp_file and os.path.exists(temp_file):
+            try:
+                os.unlink(temp_file)
+            except:
+                pass
+
+
+@router.get("/ocr-status")
+async def ocr_status():
+    """Check if OCR service is available"""
+    ocr, error = get_ocr_processor()
+    
+    if error:
+        return {
+            "available": False,
+            "error": error,
+            "message": "OCR service is not configured or dependencies are missing"
+        }
+    
+    return {
+        "available": True,
+        "message": "OCR service is ready",
+        "supported_formats": ["PDF", "JPEG", "PNG", "TIFF"]
+    }
+

backend/routes/recipes.py

@@ -0,0 +1,143 @@
+from fastapi import APIRouter, Depends, HTTPException, Query
+from sqlalchemy.orm import Session
+from database import SessionLocal
+from models import Recipe
+from pydantic import BaseModel
+from typing import List, Optional, Dict, Any
+import json
+from auth import verify_api_key
+
+router = APIRouter()
+
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()
+
+class RecipeItem(BaseModel):
+    name: str
+    qty: float
+    unit: str
+
+class RecipeCreate(BaseModel):
+    name: str
+    items: List[RecipeItem]
+    instructions: Optional[str] = ""
+
+class RecipeResponse(BaseModel):
+    id: int
+    name: str
+    items: List[RecipeItem]
+    instructions: str
+    
+    class Config:
+        from_attributes = True
+
+@router.get("/recipes", response_model=List[RecipeResponse])
+async def get_recipes(
+    skip: int = Query(0, ge=0, description="Number of recipes to skip"),
+    limit: int = Query(100, ge=1, le=1000, description="Number of recipes to return"),
+    db: Session = Depends(get_db)
+):
+    """Get all recipes with pagination"""
+    recipes = db.query(Recipe).offset(skip).limit(limit).all()
+    result = []
+    for recipe in recipes:
+        items_data = json.loads(recipe.items) if recipe.items else []
+        result.append({
+            "id": recipe.id,
+            "name": recipe.name,
+            "items": items_data,
+            "instructions": recipe.instructions or ""
+        })
+    return result
+
+@router.get("/recipes/{recipe_id}", response_model=RecipeResponse)
+async def get_recipe(recipe_id: int, db: Session = Depends(get_db)):
+    """Get a specific recipe"""
+    recipe = db.query(Recipe).filter(Recipe.id == recipe_id).first()
+    if not recipe:
+        raise HTTPException(status_code=404, detail="Recipe not found")
+    
+    items_data = json.loads(recipe.items) if recipe.items else []
+    return {
+        "id": recipe.id,
+        "name": recipe.name,
+        "items": items_data,
+        "instructions": recipe.instructions or ""
+    }
+
+@router.post("/recipes", response_model=RecipeResponse)
+async def create_recipe(
+    recipe: RecipeCreate, 
+    db: Session = Depends(get_db),
+    api_key: str = Depends(verify_api_key)
+):
+    """Create a new recipe"""
+    # Check if recipe name already exists
+    existing_recipe = db.query(Recipe).filter(Recipe.name == recipe.name).first()
+    if existing_recipe:
+        raise HTTPException(status_code=400, detail="Recipe with this name already exists")
+    
+    items_json = json.dumps([item.dict() for item in recipe.items])
+    db_recipe = Recipe(
+        name=recipe.name,
+        items=items_json,
+        instructions=recipe.instructions
+    )
+    
+    db.add(db_recipe)
+    db.commit()
+    db.refresh(db_recipe)
+    
+    # Return consistent structure
+    return {
+        "id": db_recipe.id,
+        "name": db_recipe.name,
+        "items": [item.dict() for item in recipe.items],
+        "instructions": db_recipe.instructions or ""
+    }
+
+@router.put("/recipes/{recipe_id}")
+async def update_recipe(
+    recipe_id: int, 
+    recipe: RecipeCreate, 
+    db: Session = Depends(get_db),
+    api_key: str = Depends(verify_api_key)
+):
+    """Update a recipe"""
+    db_recipe = db.query(Recipe).filter(Recipe.id == recipe_id).first()
+    if not db_recipe:
+        raise HTTPException(status_code=404, detail="Recipe not found")
+    
+    db_recipe.name = recipe.name
+    db_recipe.items = json.dumps([item.dict() for item in recipe.items])
+    db_recipe.instructions = recipe.instructions
+    
+    db.commit()
+    db.refresh(db_recipe)
+    
+    # Return consistent structure
+    return {
+        "id": db_recipe.id,
+        "name": db_recipe.name,
+        "items": [item.dict() for item in recipe.items],
+        "instructions": db_recipe.instructions or ""
+    }
+
+@router.delete("/recipes/{recipe_id}")
+async def delete_recipe(
+    recipe_id: int, 
+    db: Session = Depends(get_db),
+    api_key: str = Depends(verify_api_key)
+):
+    """Delete a recipe"""
+    db_recipe = db.query(Recipe).filter(Recipe.id == recipe_id).first()
+    if not db_recipe:
+        raise HTTPException(status_code=404, detail="Recipe not found")
+    
+    db.delete(db_recipe)
+    db.commit()
+    return {"message": "Recipe deleted successfully"}

backend/routes/tasks.py

@@ -0,0 +1,97 @@
+from fastapi import APIRouter, Depends, HTTPException
+from sqlalchemy.orm import Session
+from database import SessionLocal
+from models import Task
+from schemas import TaskCreate, TaskResponse
+from typing import List
+from auth import verify_api_key
+
+router = APIRouter()
+
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()
+
+@router.get("/tasks", response_model=List[TaskResponse])
+async def get_tasks(db: Session = Depends(get_db)):
+    """Get all tasks"""
+    tasks = db.query(Task).all()
+    return tasks
+
+@router.get("/tasks/{task_id}", response_model=TaskResponse)
+async def get_task(task_id: int, db: Session = Depends(get_db)):
+    """Get a specific task"""
+    task = db.query(Task).filter(Task.id == task_id).first()
+    if not task:
+        raise HTTPException(status_code=404, detail="Task not found")
+    return task
+
+@router.post("/tasks", response_model=TaskResponse)
+async def create_task(
+    task: TaskCreate, 
+    db: Session = Depends(get_db),
+    api_key: str = Depends(verify_api_key)
+):
+    """Create a new task"""
+    db_task = Task(**task.dict())
+    db.add(db_task)
+    db.commit()
+    db.refresh(db_task)
+    return db_task
+
+@router.put("/tasks/{task_id}")
+async def update_task(
+    task_id: int, 
+    task: TaskCreate, 
+    db: Session = Depends(get_db),
+    api_key: str = Depends(verify_api_key)
+):
+    """Update a task"""
+    db_task = db.query(Task).filter(Task.id == task_id).first()
+    if not db_task:
+        raise HTTPException(status_code=404, detail="Task not found")
+    
+    for key, value in task.dict().items():
+        setattr(db_task, key, value)
+    
+    db.commit()
+    db.refresh(db_task)
+    return db_task
+
+@router.put("/tasks/{task_id}/status")
+async def update_task_status(
+    task_id: int, 
+    status: str, 
+    db: Session = Depends(get_db),
+    api_key: str = Depends(verify_api_key)
+):
+    """Update task status"""
+    if status not in ["todo", "inprogress", "completed"]:
+        raise HTTPException(status_code=400, detail="Invalid status")
+    
+    db_task = db.query(Task).filter(Task.id == task_id).first()
+    if not db_task:
+        raise HTTPException(status_code=404, detail="Task not found")
+    
+    db_task.status = status
+    db.commit()
+    db.refresh(db_task)
+    return db_task
+
+@router.delete("/tasks/{task_id}")
+async def delete_task(
+    task_id: int, 
+    db: Session = Depends(get_db),
+    api_key: str = Depends(verify_api_key)
+):
+    """Delete a task"""
+    db_task = db.query(Task).filter(Task.id == task_id).first()
+    if not db_task:
+        raise HTTPException(status_code=404, detail="Task not found")
+    
+    db.delete(db_task)
+    db.commit()
+    return {"message": "Task deleted successfully"}

backend/routes/web_recipes.py

@@ -0,0 +1,400 @@
+"""
+Web Recipe Search Routes
+Handles recipe search from web sources (TheMealDB) and AI-powered ingredient mapping
+"""
+
+from fastapi import APIRouter, Depends, HTTPException, Query
+from sqlalchemy.orm import Session
+from pydantic import BaseModel, Field
+from typing import List, Optional, Dict, Any
+import json
+import logging
+
+from database import SessionLocal
+from models import Recipe, InventoryItem
+from auth import verify_api_key
+from services.ai_service import get_ai_service
+from services.mealdb_service import get_mealdb_service
+
+router = APIRouter()
+logger = logging.getLogger(__name__)
+
+
+def get_db():
+    """Database session dependency"""
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()
+
+
+# ============================================================================
+# REQUEST/RESPONSE MODELS
+# ============================================================================
+
+class InterpretQueryRequest(BaseModel):
+    """Request model for query interpretation"""
+    query: str = Field(..., description="Natural language recipe search query")
+    
+    class Config:
+        json_schema_extra = {
+            "example": {
+                "query": "Find a quick Italian pasta recipe without cheese"
+            }
+        }
+
+
+class InterpretQueryResponse(BaseModel):
+    """Response model for interpreted query"""
+    keywords: List[str] = Field(default_factory=list)
+    cuisine: Optional[str] = None
+    restrictions: List[str] = Field(default_factory=list)
+    max_time: Optional[int] = None
+
+
+class SearchRecipesRequest(BaseModel):
+    """Request model for recipe search"""
+    query: str = Field(..., description="Search query or keywords")
+    cuisine: Optional[str] = None
+    restrictions: List[str] = Field(default_factory=list)
+    
+    class Config:
+        json_schema_extra = {
+            "example": {
+                "query": "pasta",
+                "cuisine": "Italian",
+                "restrictions": ["no cheese"]
+            }
+        }
+
+
+class RecipeIngredient(BaseModel):
+    """Recipe ingredient model"""
+    name: str
+    measure: str
+
+
+class WebRecipeResponse(BaseModel):
+    """Response model for web recipe"""
+    id: str
+    name: str
+    image: Optional[str]
+    category: Optional[str]
+    area: Optional[str]  # Cuisine
+    instructions: str
+    ingredients: List[RecipeIngredient]
+    source_url: str
+
+
+class MapIngredientsRequest(BaseModel):
+    """Request model for ingredient mapping"""
+    recipe_id: str = Field(..., description="TheMealDB recipe ID")
+    recipe_ingredients: List[Dict[str, str]] = Field(
+        ..., 
+        description="List of recipe ingredients with name, quantity, and unit"
+    )
+    
+    class Config:
+        json_schema_extra = {
+            "example": {
+                "recipe_id": "52772",
+                "recipe_ingredients": [
+                    {"name": "Spaghetti", "quantity": "400", "unit": "g"},
+                    {"name": "Tomatoes", "quantity": "500", "unit": "g"}
+                ]
+            }
+        }
+
+
+class IngredientMapping(BaseModel):
+    """Single ingredient mapping result"""
+    recipe_ingredient: str
+    recipe_quantity: str
+    recipe_unit: str
+    mapped_to: Optional[str]
+    match_confidence: float = Field(ge=0.0, le=1.0)
+    match_type: str = Field(..., description="exact, substitute, or missing")
+    note: str
+    
+    # Allow numbers to be automatically converted to strings
+    @classmethod
+    def model_validate(cls, obj):
+        if isinstance(obj, dict):
+            # Convert recipe_quantity to string if it's a number
+            if 'recipe_quantity' in obj and not isinstance(obj['recipe_quantity'], str):
+                obj['recipe_quantity'] = str(obj['recipe_quantity'])
+        return super().model_validate(obj)
+
+
+class MapIngredientsResponse(BaseModel):
+    """Response model for ingredient mapping"""
+    recipe_id: str
+    mappings: List[IngredientMapping]
+
+
+class SaveWebRecipeRequest(BaseModel):
+    """Request model for saving web recipe"""
+    recipe_id: str
+    name: str
+    instructions: str
+    cuisine: Optional[str]
+    image_url: Optional[str]
+    source_url: str
+    ingredients_raw: List[Dict[str, str]]  # Original web ingredients
+    ingredients_mapped: List[Dict[str, Any]]  # AI-mapped ingredients
+    
+    class Config:
+        json_schema_extra = {
+            "example": {
+                "recipe_id": "52772",
+                "name": "Teriyaki Chicken Casserole",
+                "instructions": "Preheat oven to 350°...",
+                "cuisine": "Japanese",
+                "image_url": "https://example.com/image.jpg",
+                "source_url": "https://www.themealdb.com/meal/52772",
+                "ingredients_raw": [
+                    {"name": "soy sauce", "measure": "3/4 cup"}
+                ],
+                "ingredients_mapped": [
+                    {
+                        "recipe_ingredient": "soy sauce",
+                        "mapped_to": "Soy Sauce",
+                        "match_confidence": 1.0,
+                        "match_type": "exact"
+                    }
+                ]
+            }
+        }
+
+
+# ============================================================================
+# ENDPOINTS
+# ============================================================================
+
+@router.post("/interpret_query", response_model=InterpretQueryResponse)
+async def interpret_query(request: InterpretQueryRequest):
+    """
+    Endpoint 1: Interpret natural language query using GPT-4o-mini
+    
+    Converts user's natural text into structured search filters.
+    Example: "quick Italian pasta without cheese" → 
+    {"keywords": ["pasta"], "cuisine": "Italian", "restrictions": ["no cheese"]}
+    """
+    try:
+        ai_service = get_ai_service()
+        result = await ai_service.interpret_query(request.query)
+        return InterpretQueryResponse(**result)
+        
+    except Exception as e:
+        logger.error(f"Error interpreting query: {str(e)}")
+        raise HTTPException(
+            status_code=500, 
+            detail=f"Failed to interpret query: {str(e)}"
+        )
+
+
+@router.post("/search_recipes", response_model=List[WebRecipeResponse])
+async def search_recipes(request: SearchRecipesRequest):
+    """
+    Endpoint 2: Search recipes using TheMealDB API
+    
+    Takes structured filters and searches TheMealDB for matching recipes.
+    Returns array of recipes with full details including ingredients.
+    """
+    try:
+        mealdb_service = get_mealdb_service()
+        
+        # Primary search by query/keywords
+        recipes = await mealdb_service.search_by_name(request.query)
+        
+        # Apply filters
+        if request.cuisine:
+            # Filter by cuisine (case-insensitive)
+            cuisine_lower = request.cuisine.lower()
+            recipes = [
+                r for r in recipes 
+                if r.get("area") and cuisine_lower in r["area"].lower()
+            ]
+        
+        # Note: TheMealDB doesn't have cooking time or dietary restrictions
+        # in the free API, so we can't filter by those directly
+        # Could add AI-based filtering here if needed
+        
+        if not recipes:
+            return []
+        
+        # Convert to response model
+        response_recipes = []
+        for recipe in recipes:
+            response_recipes.append(WebRecipeResponse(
+                id=recipe["id"],
+                name=recipe["name"],
+                image=recipe.get("image"),
+                category=recipe.get("category"),
+                area=recipe.get("area"),
+                instructions=recipe["instructions"],
+                ingredients=[
+                    RecipeIngredient(name=ing["name"], measure=ing["measure"])
+                    for ing in recipe["ingredients"]
+                ],
+                source_url=recipe["source_url"]
+            ))
+        
+        return response_recipes
+        
+    except Exception as e:
+        logger.error(f"Error searching recipes: {str(e)}")
+        raise HTTPException(
+            status_code=500,
+            detail=f"Failed to search recipes: {str(e)}"
+        )
+
+
+@router.post("/map_ingredients", response_model=MapIngredientsResponse)
+async def map_ingredients(
+    request: MapIngredientsRequest,
+    db: Session = Depends(get_db)
+):
+    """
+    Endpoint 3: Map recipe ingredients to inventory using GPT-o3 reasoning
+    
+    Uses AI to semantically match recipe ingredients with restaurant's inventory.
+    Returns confidence scores and suggests substitutes for missing items.
+    """
+    try:
+        # Get all inventory items
+        inventory_items = db.query(InventoryItem).all()
+        inventory_list = [
+            {"name": item.name, "unit": item.unit, "quantity": item.quantity}
+            for item in inventory_items
+        ]
+        
+        if not inventory_list:
+            # No inventory to map against
+            logger.warning("No inventory items found for mapping")
+            return MapIngredientsResponse(
+                recipe_id=request.recipe_id,
+                mappings=[
+                    IngredientMapping(
+                        recipe_ingredient=ing["name"],
+                        recipe_quantity=ing.get("quantity", ""),
+                        recipe_unit=ing.get("unit", ""),
+                        mapped_to=None,
+                        match_confidence=0.0,
+                        match_type="missing",
+                        note="No inventory items available"
+                    )
+                    for ing in request.recipe_ingredients
+                ]
+            )
+        
+        # Use AI service to perform semantic matching
+        ai_service = get_ai_service()
+        mappings = await ai_service.map_ingredients(
+            request.recipe_ingredients,
+            inventory_list
+        )
+        
+        # Convert to response model
+        mapping_objects = [
+            IngredientMapping(**mapping) for mapping in mappings
+        ]
+        
+        return MapIngredientsResponse(
+            recipe_id=request.recipe_id,
+            mappings=mapping_objects
+        )
+        
+    except Exception as e:
+        logger.error(f"Error mapping ingredients: {str(e)}")
+        raise HTTPException(
+            status_code=500,
+            detail=f"Failed to map ingredients: {str(e)}"
+        )
+
+
+@router.post("/save_recipe")
+async def save_web_recipe(
+    request: SaveWebRecipeRequest,
+    db: Session = Depends(get_db),
+    api_key: str = Depends(verify_api_key)
+):
+    """
+    Endpoint 4: Save imported web recipe to database
+    
+    Saves the recipe with both original and mapped ingredients.
+    Links to user/restaurant and stores web metadata (source URL, image, etc.)
+    """
+    try:
+        # Check if recipe name already exists
+        existing_recipe = db.query(Recipe).filter(
+            Recipe.name == request.name
+        ).first()
+        
+        if existing_recipe:
+            raise HTTPException(
+                status_code=400,
+                detail=f"Recipe '{request.name}' already exists in your catalogue"
+            )
+        
+        # Convert mapped ingredients to the format used by existing recipes
+        # Format: [{"name": "...", "qty": ..., "unit": "..."}]
+        items_for_recipe = []
+        for mapping in request.ingredients_mapped:
+            if mapping.get("mapped_to"):  # Only include successfully mapped items
+                items_for_recipe.append({
+                    "name": mapping.get("mapped_to"),
+                    "qty": float(mapping.get("recipe_quantity", 0)) if mapping.get("recipe_quantity") else 0,
+                    "unit": mapping.get("recipe_unit", "pz")
+                })
+        
+        # Create new recipe
+        new_recipe = Recipe(
+            name=request.name,
+            items=json.dumps(items_for_recipe),
+            instructions=request.instructions,
+            source_url=request.source_url,
+            image_url=request.image_url,
+            cuisine=request.cuisine,
+            ingredients_raw=json.dumps(request.ingredients_raw),
+            ingredients_mapped=json.dumps(request.ingredients_mapped)
+        )
+        
+        db.add(new_recipe)
+        db.commit()
+        db.refresh(new_recipe)
+        
+        return {
+            "success": True,
+            "message": f"Recipe '{request.name}' saved successfully",
+            "recipe_id": new_recipe.id,
+            "name": new_recipe.name,
+            "items_count": len(items_for_recipe)
+        }
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        db.rollback()
+        logger.error(f"Error saving recipe: {str(e)}")
+        raise HTTPException(
+            status_code=500,
+            detail=f"Failed to save recipe: {str(e)}"
+        )
+
+
+@router.get("/test")
+async def test_web_recipes():
+    """Test endpoint to verify the router is working"""
+    return {
+        "status": "ok",
+        "message": "Web recipes router is operational",
+        "endpoints": [
+            "/interpret_query",
+            "/search_recipes", 
+            "/map_ingredients",
+            "/save_recipe"
+        ]
+    }
+

backend/schemas.py

@@ -0,0 +1,100 @@
+from pydantic import BaseModel, field_validator
+from typing import List, Optional, Dict, Any
+from datetime import date
+
+# Request/Response models for API
+
+class InventoryItemCreate(BaseModel):
+    name: str
+    unit: str = "pz"
+    quantity: float = 0.0
+    category: str = "Other"
+    price: float = 0.0
+    lot_number: Optional[str] = None
+    expiry_date: Optional[date] = None
+    
+    @field_validator('expiry_date')
+    @classmethod
+    def expiry_date_cannot_be_past(cls, v: Optional[date]) -> Optional[date]:
+        if v is not None and v < date.today():
+            raise ValueError('Expiry date cannot be in the past')
+        return v
+
+class InventoryItemResponse(BaseModel):
+    id: int
+    name: str
+    unit: str
+    quantity: float
+    category: str
+    price: float
+    lot_number: Optional[str] = None
+    expiry_date: Optional[date] = None
+    
+    class Config:
+        from_attributes = True
+
+class RecipeItem(BaseModel):
+    name: str
+    qty: float
+    unit: str
+
+class RecipeCreate(BaseModel):
+    name: str
+    items: List[RecipeItem]
+    instructions: Optional[str] = ""
+
+class RecipeResponse(BaseModel):
+    id: int
+    name: str
+    items: List[RecipeItem]
+    instructions: str
+    
+    class Config:
+        from_attributes = True
+
+class TaskCreate(BaseModel):
+    recipe: str
+    quantity: int = 1
+    assigned_to: Optional[str] = ""
+    status: str = "todo"
+
+class TaskResponse(BaseModel):
+    id: int
+    recipe: str
+    quantity: int
+    assigned_to: str
+    status: str
+    
+    class Config:
+        from_attributes = True
+
+class ChatRequest(BaseModel):
+    prompt: str
+
+class ChatResponse(BaseModel):
+    choices: List[Dict[str, Any]]
+
+class ActionRequest(BaseModel):
+    action: str
+    data: Dict[Any, Any]
+
+class SyncDataRequest(BaseModel):
+    inventory: Optional[List[Dict[str, Any]]] = []
+    recipes: Optional[Dict[str, Dict[str, Any]]] = {}
+    tasks: Optional[List[Dict[str, Any]]] = []
+
+class InventoryItemUpdate(BaseModel):
+    name: Optional[str] = None
+    unit: Optional[str] = None
+    quantity: Optional[float] = None
+    category: Optional[str] = None
+    price: Optional[float] = None
+    lot_number: Optional[str] = None
+    expiry_date: Optional[date] = None
+    
+    @field_validator('expiry_date')
+    @classmethod
+    def expiry_date_cannot_be_past(cls, v: Optional[date]) -> Optional[date]:
+        if v is not None and v < date.today():
+            raise ValueError('Expiry date cannot be in the past')
+        return v

backend/services/__init__.py

@@ -0,0 +1,3 @@
+# Services module for external integrations
+
+

backend/services/ai_assistant_service.py

@@ -0,0 +1,337 @@
+"""
+AI Assistant Service for ChefCode
+Handles intent detection, conversational AI, and action orchestration
+"""
+
+import os
+import json
+import logging
+from typing import Dict, Any, List, Optional
+from openai import OpenAI
+from pydantic import BaseModel
+
+logger = logging.getLogger(__name__)
+
+
+class IntentResult(BaseModel):
+    """Structure for intent detection result"""
+    intent: str
+    confidence: float
+    entities: Dict[str, Any]
+    requires_confirmation: bool = False
+    response_message: str = ""
+
+
+class AIAssistantService:
+    """
+    AI Assistant for natural language command processing
+    Uses GPT-4o-mini for intent detection and conversational responses
+    """
+    
+    # Supported intents
+    INTENTS = {
+        "add_inventory": "Add items to inventory",
+        "update_inventory": "Update inventory quantities",
+        "delete_inventory": "Remove items from inventory",
+        "query_inventory": "Query inventory status",
+        
+        "add_recipe": "Add a new recipe manually",
+        "edit_recipe": "Edit existing recipe",
+        "delete_recipe": "Delete a recipe",
+        "search_recipe_web": "Search recipes online",
+        "show_recipe": "Display specific recipe",
+        "import_recipe": "Import recipe from search results",
+        
+        "show_catalogue": "Show recipe catalogue",
+        "filter_catalogue": "Filter recipes by category",
+        
+        "general_query": "General questions",
+        "unknown": "Cannot determine intent"
+    }
+    
+    def __init__(self):
+        """Initialize OpenAI client"""
+        api_key = os.getenv("OPENAI_API_KEY")
+        if not api_key:
+            raise ValueError("OPENAI_API_KEY environment variable not set")
+        
+        self.client = OpenAI(api_key=api_key)
+        self.model = "gpt-4o-mini"
+        self.conversation_context = []  # Store recent conversation for context
+    
+    async def detect_intent(self, user_input: str, context: Optional[Dict] = None) -> IntentResult:
+        """
+        Detect user intent from natural language input
+        
+        Args:
+            user_input: User's natural language command
+            context: Optional conversation context
+            
+        Returns:
+            IntentResult with detected intent and extracted entities
+        """
+        try:
+            system_prompt = self._build_intent_detection_prompt()
+            
+            # Add context if available
+            context_info = ""
+            if context:
+                context_info = f"\n\nConversation context: {json.dumps(context)}"
+            
+            user_prompt = f"""Analyze this user command and return a structured JSON response:
+            
+User Input: "{user_input}"{context_info}
+
+Return JSON with this structure:
+{{
+    "intent": "intent_name",
+    "confidence": 0.95,
+    "entities": {{
+        // Extracted entities based on intent
+    }},
+    "requires_confirmation": true/false,
+    "response_message": "Conversational response to user"
+}}
+
+IMPORTANT: Return ONLY the JSON, no markdown formatting."""
+
+            response = self.client.chat.completions.create(
+                model=self.model,
+                messages=[
+                    {"role": "system", "content": system_prompt},
+                    {"role": "user", "content": user_prompt}
+                ],
+                temperature=0.3,
+                max_tokens=1000
+            )
+            
+            result_text = response.choices[0].message.content.strip()
+            
+            # Clean markdown if present
+            if result_text.startswith("```"):
+                lines = result_text.split('\n')
+                result_text = '\n'.join([l for l in lines if not l.startswith("```")])
+            
+            result_dict = json.loads(result_text)
+            
+            return IntentResult(**result_dict)
+            
+        except Exception as e:
+            logger.error(f"Intent detection error: {str(e)}")
+            return IntentResult(
+                intent="unknown",
+                confidence=0.0,
+                entities={},
+                response_message=f"I'm not sure what you mean. Could you rephrase that?"
+            )
+    
+    async def parse_recipe_from_text(self, user_input: str) -> Dict[str, Any]:
+        """
+        Parse recipe details from natural language
+        Example: "Add a recipe called Pizza with flour 100 kg and tomato sauce 200 ml"
+        
+        Returns:
+            {
+                "recipe_name": "Pizza",
+                "ingredients": [
+                    {"name": "flour", "quantity": 100, "unit": "kg"},
+                    {"name": "tomato sauce", "quantity": 200, "unit": "ml"}
+                ],
+                "yield_qty": 1,
+                "yield_unit": "piece"
+            }
+        """
+        try:
+            prompt = f"""You are a recipe parsing expert. Extract ALL ingredient information from this command.
+
+User Input: "{user_input}"
+
+CRITICAL RULES:
+1. Extract the recipe name
+2. For EACH ingredient, extract:
+   - name (ingredient name)
+   - quantity (numeric value, if missing use null)
+   - unit (measurement unit like kg, g, ml, liters, pieces, etc. If missing use null)
+3. Extract yield if mentioned (default: null)
+
+EXAMPLES:
+"Add recipe Pizza with flour 500 grams and tomato 200 ml"
+→ {{"recipe_name": "Pizza", "ingredients": [{{"name": "flour", "quantity": 500, "unit": "grams"}}, {{"name": "tomato", "quantity": 200, "unit": "ml"}}], "yield_qty": null, "yield_unit": null}}
+
+"Add recipe spaghetti with flour and salt"
+→ {{"recipe_name": "spaghetti", "ingredients": [{{"name": "flour", "quantity": null, "unit": null}}, {{"name": "salt", "quantity": null, "unit": null}}], "yield_qty": null, "yield_unit": null}}
+
+Return ONLY valid JSON, no markdown, no explanation:
+{{
+    "recipe_name": "string",
+    "ingredients": [
+        {{"name": "string", "quantity": number or null, "unit": "string or null"}},
+        ...
+    ],
+    "yield_qty": number or null,
+    "yield_unit": "string or null",
+    "instructions": "string or empty"
+}}"""
+
+            response = self.client.chat.completions.create(
+                model=self.model,
+                messages=[
+                    {"role": "system", "content": "You are a precise recipe data extractor. Always return valid JSON."},
+                    {"role": "user", "content": prompt}
+                ],
+                temperature=0.1,
+                max_tokens=1000
+            )
+            
+            result = response.choices[0].message.content.strip()
+            
+            # Clean markdown
+            if result.startswith("```"):
+                lines = result.split('\n')
+                result = '\n'.join([l for l in lines if not l.startswith("```")])
+            
+            parsed = json.loads(result)
+            
+            # Convert null to proper values
+            for ing in parsed.get('ingredients', []):
+                if ing.get('quantity') is None:
+                    ing['quantity'] = None
+                if ing.get('unit') is None:
+                    ing['unit'] = None
+            
+            return parsed
+            
+        except Exception as e:
+            logger.error(f"Recipe parsing error: {str(e)}")
+            raise ValueError(f"Could not parse recipe: {str(e)}")
+    
+    async def generate_response(self, intent: str, action_result: Dict[str, Any]) -> str:
+        """
+        Generate a conversational response based on the action result
+        
+        Args:
+            intent: The detected intent
+            action_result: Result from the action handler
+            
+        Returns:
+            Conversational response string
+        """
+        try:
+            prompt = f"""Generate a short, friendly response for this action:
+
+Intent: {intent}
+Action Result: {json.dumps(action_result)}
+
+Rules:
+- Be conversational and concise (max 2 sentences)
+- Use emojis sparingly for emphasis
+- Confirm what was done
+- If error, be helpful and suggest alternatives
+
+Return only the response text, nothing else."""
+
+            response = self.client.chat.completions.create(
+                model=self.model,
+                messages=[
+                    {"role": "system", "content": "You are ChefCode's friendly AI assistant. Be concise and helpful."},
+                    {"role": "user", "content": prompt}
+                ],
+                temperature=0.7,
+                max_tokens=150
+            )
+            
+            return response.choices[0].message.content.strip()
+            
+        except Exception as e:
+            logger.error(f"Response generation error: {str(e)}")
+            return "Action completed." if action_result.get("success") else "Something went wrong."
+    
+    def _build_intent_detection_prompt(self) -> str:
+        """Build the system prompt for intent detection with examples"""
+        return """You are ChefCode's intelligent assistant. Analyze user commands and detect their intent.
+
+SUPPORTED INTENTS:
+
+📦 INVENTORY:
+- add_inventory: Add items to inventory
+  Example: "Add 5 kg of rice at 2.50 euros"
+  Entities: {"item_name": "rice", "quantity": 5, "unit": "kg", "price": 2.50}
+  IMPORTANT: Always extract price if mentioned (at, for, cost, price, euro, dollar, etc.)
+
+- update_inventory: Update quantities
+  Example: "Update flour to 10 kg"
+  Entities: {"item_name": "flour", "quantity": 10, "unit": "kg"}
+
+- delete_inventory: Remove items
+  Example: "Remove tomatoes from inventory"
+  Entities: {"item_name": "tomatoes"}
+
+- query_inventory: Check stock
+  Example: "How much rice do we have?"
+  Entities: {"item_name": "rice"}
+
+🍳 RECIPE MANAGEMENT:
+- add_recipe: Create new recipe manually
+  Example: "Add a recipe called Pizza with flour 100 kg and cheese 50 kg"
+  Entities: {"recipe_name": "Pizza", "raw_text": "...full input..."}
+
+- edit_recipe: Modify existing recipe (add/remove/change ingredient)
+  Example: "Edit recipe Pizza by adding 2 grams of salt"
+  Entities: {"recipe_name": "Pizza", "action": "adding", "ingredient_name": "salt", "quantity": "2", "unit": "grams"}
+  
+  Example: "Remove flour from Pizza recipe"
+  Entities: {"recipe_name": "Pizza", "action": "remove", "ingredient_name": "flour"}
+  
+  Example: "Change tomatoes in Pizza to 500 grams"
+  Entities: {"recipe_name": "Pizza", "action": "change", "ingredient_name": "tomatoes", "quantity": "500", "unit": "grams"}
+
+- delete_recipe: Remove recipe
+  Example: "Delete the recipe Pasta"
+  Entities: {"recipe_name": "Pasta"}
+
+- search_recipe_web: Search recipes online
+  Example: "Search pasta recipes" or "Find Italian recipes"
+  Entities: {"query": "pasta", "filters": {"cuisine": "Italian"}}
+
+- show_recipe: Display specific recipe
+  Example: "Show me the Pizza recipe"
+  Entities: {"recipe_name": "Pizza"}
+
+- import_recipe: Import from search results
+  Example: "Import the second one" or "Import that recipe"
+  Entities: {"index": 2, "recipe_id": "..."}
+
+📚 CATALOGUE:
+- show_catalogue: Show all recipes
+  Example: "Show all recipes" or "Open recipe catalogue"
+  Entities: {}
+
+- filter_catalogue: Filter by category
+  Example: "Show dessert recipes"
+  Entities: {"category": "dessert"}
+
+❓ OTHER:
+- general_query: General questions
+- unknown: Cannot determine
+
+RULES:
+1. Set requires_confirmation=true for destructive actions (add, update, delete)
+2. Extract ALL relevant entities from the input
+3. Be conversational in response_message
+4. If ambiguous, ask clarifying questions
+5. For numbers, always extract both quantity and unit
+6. For recipe commands, capture the full raw text for later parsing
+
+Return JSON only, no markdown."""
+
+    def add_to_context(self, role: str, content: str):
+        """Add message to conversation context"""
+        self.conversation_context.append({"role": role, "content": content})
+        # Keep only last 10 messages
+        if len(self.conversation_context) > 10:
+            self.conversation_context = self.conversation_context[-10:]
+    
+    def clear_context(self):
+        """Clear conversation context"""
+        self.conversation_context = []
+

backend/services/ai_service.py

@@ -0,0 +1,289 @@
+"""
+AI Service Module
+Handles interactions with OpenAI models (GPT-4o-mini and GPT-o3 reasoning)
+"""
+
+import os
+import json
+from typing import Dict, List, Any, Optional
+from openai import OpenAI
+import logging
+
+logger = logging.getLogger(__name__)
+
+class AIService:
+    """Service for AI-powered recipe interpretation and ingredient mapping"""
+    
+    def __init__(self):
+        """Initialize OpenAI client with API key from environment"""
+        api_key = os.getenv("OPENAI_API_KEY")
+        if not api_key:
+            raise ValueError("OPENAI_API_KEY environment variable not set")
+        
+        self.client = OpenAI(api_key=api_key)
+        self.gpt_4o_mini_model = "gpt-4o-mini"
+        # Use o3 reasoning model for ingredient mapping
+        self.gpt_o3_model = "o3"
+    
+    async def interpret_query(self, user_query: str) -> Dict[str, Any]:
+        """
+        Use GPT-4o-mini to interpret natural language recipe search query
+        
+        Args:
+            user_query: Natural language search query (e.g., "quick Italian pasta without cheese")
+        
+        Returns:
+            Structured filters dictionary with:
+            - keywords: List of search keywords
+            - cuisine: Cuisine type (optional)
+            - restrictions: List of dietary restrictions (optional)
+            - max_time: Maximum cooking time in minutes (optional)
+        
+        Example response:
+        {
+            "keywords": ["pasta"],
+            "cuisine": "Italian",
+            "restrictions": ["no cheese"],
+            "max_time": 30
+        }
+        """
+        try:
+            system_prompt = """You are a culinary assistant that interprets recipe search queries.
+Extract structured information from natural language queries.
+
+Return ONLY valid JSON with these fields:
+- keywords: array of strings (main ingredients or dish types to search)
+- cuisine: string or null (e.g., "Italian", "Chinese", "Mexican")
+- restrictions: array of strings (dietary restrictions like "no cheese", "vegetarian", "vegan")
+- max_time: number or null (maximum cooking time in minutes)
+
+Examples:
+Query: "quick Italian pasta without cheese"
+Response: {"keywords": ["pasta"], "cuisine": "Italian", "restrictions": ["no cheese"], "max_time": 30}
+
+Query: "spicy chicken curry"
+Response: {"keywords": ["chicken", "curry"], "cuisine": null, "restrictions": ["spicy"], "max_time": null}
+
+Query: "easy vegetarian soup under 20 minutes"
+Response: {"keywords": ["soup"], "cuisine": null, "restrictions": ["vegetarian"], "max_time": 20}
+"""
+            
+            response = self.client.chat.completions.create(
+                model=self.gpt_4o_mini_model,
+                messages=[
+                    {"role": "system", "content": system_prompt},
+                    {"role": "user", "content": user_query}
+                ],
+                temperature=0.3,
+                max_tokens=500,
+                response_format={"type": "json_object"}
+            )
+            
+            result = json.loads(response.choices[0].message.content)
+            
+            # Ensure all required fields exist with defaults
+            return {
+                "keywords": result.get("keywords", []),
+                "cuisine": result.get("cuisine"),
+                "restrictions": result.get("restrictions", []),
+                "max_time": result.get("max_time")
+            }
+            
+        except Exception as e:
+            logger.error(f"Error interpreting query: {str(e)}")
+            # Fallback: return simple keyword extraction
+            return {
+                "keywords": [user_query],
+                "cuisine": None,
+                "restrictions": [],
+                "max_time": None
+            }
+    
+    async def map_ingredients(
+        self, 
+        recipe_ingredients: List[Dict[str, str]], 
+        inventory_items: List[Dict[str, str]]
+    ) -> List[Dict[str, Any]]:
+        """
+        Use AI reasoning to semantically map recipe ingredients to inventory
+        Tries o3 first, falls back to gpt-4 if needed
+        
+        Args:
+            recipe_ingredients: List of recipe ingredients [{"name": "...", "quantity": "...", "unit": "..."}]
+            inventory_items: List of inventory items [{"name": "...", "unit": "..."}]
+        
+        Returns:
+            List of mapping results:
+            [{
+                "recipe_ingredient": str,
+                "recipe_quantity": str,
+                "recipe_unit": str,
+                "mapped_to": str or null,
+                "match_confidence": float (0.0-1.0),
+                "match_type": "exact" | "substitute" | "missing",
+                "note": str (explanation or suggestion)
+            }]
+        """
+        # Try o3 first, fallback to gpt-4 if it fails
+        models_to_try = ["o3", "gpt-4"]
+        
+        for model_name in models_to_try:
+            try:
+                logger.info(f"Attempting ingredient mapping with model: {model_name}")
+                return await self._map_with_model(model_name, recipe_ingredients, inventory_items)
+            except Exception as e:
+                logger.warning(f"Model {model_name} failed: {str(e)}")
+                if model_name == models_to_try[-1]:  # Last model
+                    raise
+                else:
+                    logger.info(f"Falling back to next model...")
+                    continue
+        
+        # This should never be reached, but just in case
+        raise Exception("All AI models failed")
+    
+    async def _map_with_model(
+        self,
+        model_name: str,
+        recipe_ingredients: List[Dict[str, str]], 
+        inventory_items: List[Dict[str, str]]
+    ) -> List[Dict[str, Any]]:
+        """Internal method to map ingredients using a specific model"""
+        try:
+            # Prepare data for the AI
+            recipe_list = "\n".join([
+                f"- {ing.get('name', 'Unknown')} ({ing.get('quantity', '')} {ing.get('unit', '')})"
+                for ing in recipe_ingredients
+            ])
+            
+            inventory_list = "\n".join([
+                f"- {item.get('name', 'Unknown')} ({item.get('unit', 'pz')})"
+                for item in inventory_items
+            ])
+            
+            system_prompt = """You are an expert AI sous-chef specializing in ingredient matching and substitutions.
+
+Your task: Match recipe ingredients to the restaurant's inventory items semantically.
+
+Rules:
+1. EXACT MATCH: Same ingredient or very similar (e.g., "tomatoes" → "San Marzano tomatoes")
+2. SUBSTITUTE: Compatible replacement (e.g., "butter" → "margarine", "basil" → "dried basil")
+3. MISSING: No suitable match exists in inventory
+
+For each recipe ingredient, analyze and return:
+- recipe_ingredient: exact name from recipe
+- recipe_quantity: amount needed
+- recipe_unit: unit of measurement
+- mapped_to: inventory item name (or null if missing)
+- match_confidence: 0.0 to 1.0 (1.0 = perfect match)
+- match_type: "exact" | "substitute" | "missing"
+- note: Brief explanation or substitution advice
+
+Return ONLY valid JSON array. No markdown, no extra text."""
+            
+            user_prompt = f"""Recipe Ingredients:
+{recipe_list}
+
+Inventory Available:
+{inventory_list}
+
+Match each recipe ingredient to inventory. Return JSON array of mappings."""
+            
+            # Use different parameters based on model
+            if model_name == "o3":
+                response = self.client.chat.completions.create(
+                    model=model_name,
+                    messages=[
+                        {"role": "user", "content": f"{system_prompt}\n\n{user_prompt}"}
+                    ],
+                    max_completion_tokens=4000
+                )
+            else:  # gpt-4 or other models
+                response = self.client.chat.completions.create(
+                    model=model_name,
+                    messages=[
+                        {"role": "system", "content": system_prompt},
+                        {"role": "user", "content": user_prompt}
+                    ],
+                    max_tokens=2000,
+                    temperature=0.2,
+                    response_format={"type": "json_object"}
+                )
+            
+            result = response.choices[0].message.content
+            
+            # Log raw response for debugging
+            logger.debug(f"Raw AI response: {result[:500] if result else 'EMPTY'}")
+            
+            if not result or not result.strip():
+                logger.error("AI returned empty response")
+                raise ValueError("AI returned empty response")
+            
+            # Try to extract JSON if wrapped in markdown code blocks
+            if result.startswith("```"):
+                # Extract JSON from markdown code block
+                lines = result.split('\n')
+                json_lines = []
+                in_code_block = False
+                for line in lines:
+                    if line.startswith("```"):
+                        in_code_block = not in_code_block
+                        continue
+                    if in_code_block or (not line.startswith("```") and json_lines):
+                        json_lines.append(line)
+                result = '\n'.join(json_lines).strip()
+            
+            # Parse response - handle if it's wrapped in a root key
+            parsed = json.loads(result)
+            if isinstance(parsed, dict):
+                # If response has a wrapper key like "mappings", extract it
+                if "mappings" in parsed:
+                    mappings = parsed["mappings"]
+                elif "ingredients" in parsed:
+                    mappings = parsed["ingredients"]
+                else:
+                    # Try to find the first list value
+                    mappings = None
+                    for value in parsed.values():
+                        if isinstance(value, list):
+                            mappings = value
+                            break
+                    if not mappings:
+                        mappings = []
+            else:
+                mappings = parsed if isinstance(parsed, list) else []
+            
+            # Ensure all recipe_quantity values are strings
+            for mapping in mappings:
+                if 'recipe_quantity' in mapping and not isinstance(mapping['recipe_quantity'], str):
+                    mapping['recipe_quantity'] = str(mapping['recipe_quantity'])
+            
+            return mappings
+            
+        except Exception as e:
+            logger.error(f"Error mapping ingredients: {str(e)}", exc_info=True)
+            # Fallback: return basic structure marking all as missing
+            return [
+                {
+                    "recipe_ingredient": ing.get("name", "Unknown"),
+                    "recipe_quantity": ing.get("quantity", ""),
+                    "recipe_unit": ing.get("unit", ""),
+                    "mapped_to": None,
+                    "match_confidence": 0.0,
+                    "match_type": "missing",
+                    "note": f"Unable to perform AI matching: {str(e)}"
+                }
+                for ing in recipe_ingredients
+            ]
+
+
+# Singleton instance
+_ai_service: Optional[AIService] = None
+
+def get_ai_service() -> AIService:
+    """Get or create the AI service singleton"""
+    global _ai_service
+    if _ai_service is None:
+        _ai_service = AIService()
+    return _ai_service
+

backend/services/mealdb_service.py

@@ -0,0 +1,200 @@
+"""
+TheMealDB API Service
+Provides recipe search functionality using TheMealDB public API
+API Documentation: https://www.themealdb.com/api.php
+"""
+
+import httpx
+from typing import List, Dict, Any, Optional
+import logging
+
+logger = logging.getLogger(__name__)
+
+
+class MealDBService:
+    """Service for interacting with TheMealDB API"""
+    
+    BASE_URL = "https://www.themealdb.com/api/json/v1/1"
+    
+    def __init__(self):
+        """Initialize MealDB service"""
+        self.base_url = self.BASE_URL
+    
+    async def search_by_name(self, query: str) -> List[Dict[str, Any]]:
+        """
+        Search recipes by name using TheMealDB API
+        
+        Args:
+            query: Search query string (e.g., "pasta", "chicken")
+        
+        Returns:
+            List of recipe dictionaries with structure:
+            [{
+                "id": str,
+                "name": str,
+                "image": str (URL),
+                "category": str,
+                "area": str (cuisine),
+                "instructions": str,
+                "ingredients": [{"name": str, "measure": str}],
+                "source_url": str
+            }]
+        """
+        try:
+            async with httpx.AsyncClient(timeout=10.0) as client:
+                response = await client.get(
+                    f"{self.base_url}/search.php",
+                    params={"s": query}
+                )
+                response.raise_for_status()
+                data = response.json()
+                
+                if not data.get("meals"):
+                    return []
+                
+                # Parse and structure the recipes
+                recipes = []
+                for meal in data["meals"]:
+                    # Extract ingredients and measures (TheMealDB has 20 ingredient slots)
+                    ingredients = []
+                    for i in range(1, 21):
+                        ingredient_name = meal.get(f"strIngredient{i}", "")
+                        ingredient_measure = meal.get(f"strMeasure{i}", "")
+                        
+                        if ingredient_name and ingredient_name.strip():
+                            ingredients.append({
+                                "name": ingredient_name.strip(),
+                                "measure": ingredient_measure.strip() if ingredient_measure else ""
+                            })
+                    
+                    recipe = {
+                        "id": meal.get("idMeal"),
+                        "name": meal.get("strMeal"),
+                        "image": meal.get("strMealThumb"),
+                        "category": meal.get("strCategory"),
+                        "area": meal.get("strArea"),  # Cuisine type
+                        "instructions": meal.get("strInstructions", ""),
+                        "ingredients": ingredients,
+                        "source_url": meal.get("strSource") or meal.get("strYoutube") or "",
+                        "tags": meal.get("strTags", "").split(",") if meal.get("strTags") else []
+                    }
+                    recipes.append(recipe)
+                
+                return recipes
+                
+        except httpx.HTTPError as e:
+            logger.error(f"HTTP error searching TheMealDB: {str(e)}")
+            return []
+        except Exception as e:
+            logger.error(f"Error searching TheMealDB: {str(e)}")
+            return []
+    
+    async def search_by_ingredient(self, ingredient: str) -> List[Dict[str, Any]]:
+        """
+        Search recipes by main ingredient
+        
+        Args:
+            ingredient: Main ingredient name (e.g., "chicken", "beef")
+        
+        Returns:
+            List of simplified recipe info (less detail than search_by_name)
+        """
+        try:
+            async with httpx.AsyncClient(timeout=10.0) as client:
+                response = await client.get(
+                    f"{self.base_url}/filter.php",
+                    params={"i": ingredient}
+                )
+                response.raise_for_status()
+                data = response.json()
+                
+                if not data.get("meals"):
+                    return []
+                
+                # This endpoint returns limited info, so we'll return basic structure
+                recipes = []
+                for meal in data["meals"]:
+                    recipe = {
+                        "id": meal.get("idMeal"),
+                        "name": meal.get("strMeal"),
+                        "image": meal.get("strMealThumb"),
+                        "category": None,
+                        "area": None,
+                        "instructions": None,
+                        "ingredients": [],
+                        "source_url": ""
+                    }
+                    recipes.append(recipe)
+                
+                return recipes
+                
+        except Exception as e:
+            logger.error(f"Error searching by ingredient: {str(e)}")
+            return []
+    
+    async def get_recipe_by_id(self, meal_id: str) -> Optional[Dict[str, Any]]:
+        """
+        Get full recipe details by ID
+        
+        Args:
+            meal_id: TheMealDB recipe ID
+        
+        Returns:
+            Full recipe dictionary or None if not found
+        """
+        try:
+            async with httpx.AsyncClient(timeout=10.0) as client:
+                response = await client.get(
+                    f"{self.base_url}/lookup.php",
+                    params={"i": meal_id}
+                )
+                response.raise_for_status()
+                data = response.json()
+                
+                if not data.get("meals") or len(data["meals"]) == 0:
+                    return None
+                
+                meal = data["meals"][0]
+                
+                # Extract ingredients
+                ingredients = []
+                for i in range(1, 21):
+                    ingredient_name = meal.get(f"strIngredient{i}", "")
+                    ingredient_measure = meal.get(f"strMeasure{i}", "")
+                    
+                    if ingredient_name and ingredient_name.strip():
+                        ingredients.append({
+                            "name": ingredient_name.strip(),
+                            "measure": ingredient_measure.strip() if ingredient_measure else ""
+                        })
+                
+                recipe = {
+                    "id": meal.get("idMeal"),
+                    "name": meal.get("strMeal"),
+                    "image": meal.get("strMealThumb"),
+                    "category": meal.get("strCategory"),
+                    "area": meal.get("strArea"),
+                    "instructions": meal.get("strInstructions", ""),
+                    "ingredients": ingredients,
+                    "source_url": meal.get("strSource") or meal.get("strYoutube") or "",
+                    "tags": meal.get("strTags", "").split(",") if meal.get("strTags") else []
+                }
+                
+                return recipe
+                
+        except Exception as e:
+            logger.error(f"Error fetching recipe by ID: {str(e)}")
+            return None
+
+
+# Singleton instance
+_mealdb_service: Optional[MealDBService] = None
+
+def get_mealdb_service() -> MealDBService:
+    """Get or create the MealDB service singleton"""
+    global _mealdb_service
+    if _mealdb_service is None:
+        _mealdb_service = MealDBService()
+    return _mealdb_service
+
+

frontend/ai-assistant.js

@@ -0,0 +1,443 @@
+/**
+ * ChefCode AI Assistant
+ * Intelligent voice and text assistant for inventory and recipe management
+ */
+
+const AI_ASSISTANT = (() => {
+    // Configuration
+    const API_BASE = window.CHEFCODE_CONFIG?.API_BASE_URL || 'http://localhost:8000';
+    const API_KEY = window.CHEFCODE_CONFIG?.API_KEY || '';
+    
+    // State
+    let conversationContext = {};
+    let pendingConfirmation = null;
+    let recognition = null;
+    let isListening = false;
+    
+    // DOM Elements
+    let chatOverlay, chatMessages, commandInput, sendBtn, voiceBtn;
+    let confirmationDialog;
+    
+    // Initialize
+    function init() {
+        console.log('🤖 Initializing AI Assistant...');
+        
+        // Get DOM elements
+        commandInput = document.getElementById('ai-command-input');
+        sendBtn = document.getElementById('ai-send-btn');
+        voiceBtn = document.getElementById('ai-voice-btn');
+        
+        // Create chat overlay
+        createChatOverlay();
+        createConfirmationDialog();
+        // Note: We use the existing web recipe search modal, no need to create our own
+        
+        // Setup voice recognition
+        setupVoiceRecognition();
+        
+        // Event listeners
+        if (sendBtn && commandInput) {
+            sendBtn.addEventListener('click', handleSendCommand);
+            commandInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    handleSendCommand();
+                }
+            });
+        }
+        
+        if (voiceBtn) {
+            voiceBtn.addEventListener('click', toggleVoiceInput);
+        }
+        
+        console.log('✅ AI Assistant initialized');
+    }
+    
+    // Create chat overlay UI
+    function createChatOverlay() {
+        chatOverlay = document.createElement('div');
+        chatOverlay.id = 'ai-chat-overlay';
+        chatOverlay.className = 'ai-chat-overlay';
+        chatOverlay.style.display = 'none';
+        
+        chatOverlay.innerHTML = `
+            <div class="ai-chat-container">
+                <div class="ai-chat-header">
+                    <div>
+                        <h3>🤖 ChefCode AI Assistant</h3>
+                        <p>Ask me anything about recipes and inventory</p>
+                    </div>
+                    <button class="ai-chat-close" id="ai-chat-close">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div class="ai-chat-messages" id="ai-chat-messages"></div>
+                <div class="ai-chat-footer">
+                    <button class="ai-chat-voice-btn" id="ai-chat-voice-btn" title="Voice Input">
+                        <i class="fas fa-microphone"></i>
+                    </button>
+                    <p class="ai-chat-hint">💡 Try: "Add recipe Pizza" or "Search pasta recipes"</p>
+                </div>
+            </div>
+        `;
+        
+        document.body.appendChild(chatOverlay);
+        chatMessages = document.getElementById('ai-chat-messages');
+        
+        document.getElementById('ai-chat-close').addEventListener('click', closeChatOverlay);
+        
+        // Add voice button handler in chat panel
+        const chatVoiceBtn = document.getElementById('ai-chat-voice-btn');
+        if (chatVoiceBtn) {
+            chatVoiceBtn.addEventListener('click', toggleVoiceInput);
+        }
+    }
+    
+    // Create confirmation dialog
+    function createConfirmationDialog() {
+        confirmationDialog = document.createElement('div');
+        confirmationDialog.id = 'ai-confirmation-dialog';
+        confirmationDialog.className = 'ai-confirmation-dialog';
+        confirmationDialog.style.display = 'none';
+        
+        confirmationDialog.innerHTML = `
+            <div class="ai-confirmation-content">
+                <div class="ai-confirmation-icon">⚠️</div>
+                <div class="ai-confirmation-message" id="ai-confirmation-message"></div>
+                <div class="ai-confirmation-actions">
+                    <button class="ai-btn ai-btn-secondary" id="ai-confirm-no">Cancel</button>
+                    <button class="ai-btn ai-btn-primary" id="ai-confirm-yes">Confirm</button>
+                </div>
+            </div>
+        `;
+        
+        document.body.appendChild(confirmationDialog);
+        
+        document.getElementById('ai-confirm-yes').addEventListener('click', () => confirmAction(true));
+        document.getElementById('ai-confirm-no').addEventListener('click', () => confirmAction(false));
+    }
+    
+    // Note: Search results use the existing web recipe search modal
+    // No separate overlay needed
+    
+    // Setup voice recognition
+    function setupVoiceRecognition() {
+        if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
+            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+            recognition = new SpeechRecognition();
+            recognition.lang = 'en-US';
+            recognition.continuous = false;
+            recognition.interimResults = false;
+            
+            recognition.onresult = (event) => {
+                const transcript = event.results[0][0].transcript;
+                commandInput.value = transcript;
+                addMessage('user', transcript);
+                processCommand(transcript);
+            };
+            
+            recognition.onerror = (event) => {
+                console.error('Speech recognition error:', event.error);
+                isListening = false;
+                updateVoiceButton();
+            };
+            
+            recognition.onend = () => {
+                isListening = false;
+                updateVoiceButton();
+            };
+        } else {
+            console.warn('Speech recognition not supported');
+            if (voiceBtn) voiceBtn.style.display = 'none';
+        }
+    }
+    
+    // Handle send command
+    async function handleSendCommand() {
+        const command = commandInput.value.trim();
+        if (!command) return;
+        
+        // Show chat overlay
+        showChatOverlay();
+        
+        // Add user message
+        addMessage('user', command);
+        
+        // Clear input
+        commandInput.value = '';
+        
+        // Process command
+        await processCommand(command);
+    }
+    
+    // Process command via AI backend
+    async function processCommand(command) {
+        try {
+            // Show typing indicator
+            const typingId = addTypingIndicator();
+            
+            const response = await fetch(`${API_BASE}/api/ai-assistant/command`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-API-Key': API_KEY
+                },
+                body: JSON.stringify({
+                    command: command,
+                    context: conversationContext
+                })
+            });
+            
+            // Remove typing indicator
+            removeTypingIndicator(typingId);
+            
+            if (!response.ok) {
+                throw new Error(`API error: ${response.status}`);
+            }
+            
+            const result = await response.json();
+            
+            console.log('AI Response:', result);
+            
+            // Handle response based on intent
+            if (result.requires_confirmation) {
+                // Store confirmation data
+                pendingConfirmation = result.confirmation_data;
+                
+                // Show confirmation dialog
+                showConfirmation(result.message);
+                
+            } else if (result.search_results) {
+                // Use existing web recipe search modal
+                addMessage('assistant', result.message);
+                
+                // Close AI chat and open web recipe search
+                const query = result.action_result?.search_query || '';
+                if (window.WEB_RECIPE_SEARCH && query) {
+                    closeChatOverlay();
+                    // Small delay to ensure smooth transition
+                    setTimeout(() => {
+                        window.WEB_RECIPE_SEARCH.searchWithQuery(query);
+                    }, 300);
+                }
+                
+            } else {
+                // Just show message
+                addMessage('assistant', result.message);
+                
+                // Update context
+                conversationContext.last_intent = result.intent;
+                conversationContext.last_result = result.action_result;
+            }
+            
+        } catch (error) {
+            console.error('Command processing error:', error);
+            removeTypingIndicator();
+            addMessage('assistant', '❌ Sorry, something went wrong. Make sure the backend is running.');
+        }
+    }
+    
+    // Show confirmation dialog
+    function showConfirmation(message) {
+        document.getElementById('ai-confirmation-message').innerHTML = message.replace(/\n/g, '<br>');
+        confirmationDialog.style.display = 'flex';
+    }
+    
+    // Handle confirmation response
+    async function confirmAction(confirmed) {
+        confirmationDialog.style.display = 'none';
+        
+        if (!pendingConfirmation) return;
+        
+        try {
+            const typingId = addTypingIndicator();
+            
+            const response = await fetch(`${API_BASE}/api/ai-assistant/confirm`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-API-Key': API_KEY
+                },
+                body: JSON.stringify({
+                    confirmation_id: Date.now().toString(),
+                    confirmed: confirmed,
+                    data: pendingConfirmation
+                })
+            });
+            
+            removeTypingIndicator(typingId);
+            
+            if (!response.ok) {
+                throw new Error(`API error: ${response.status}`);
+            }
+            
+            const result = await response.json();
+            
+            addMessage('assistant', result.message);
+            
+            // Show success toast
+            if (result.success) {
+                showToast('✅ Action completed successfully', 'success');
+            }
+            
+        } catch (error) {
+            console.error('Confirmation error:', error);
+            removeTypingIndicator();
+            addMessage('assistant', '❌ Failed to execute action.');
+        } finally {
+            pendingConfirmation = null;
+        }
+    }
+    
+    // Note: Recipe search now uses the existing web recipe search modal
+    // No need for separate display logic - we just trigger the existing modal
+    
+    // Add message to chat
+    function addMessage(role, content) {
+        if (!chatMessages) return;
+        
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `ai-message ai-message-${role}`;
+        
+        const bubble = document.createElement('div');
+        bubble.className = 'ai-message-bubble';
+        
+        // Convert markdown-style formatting
+        let formattedContent = content
+            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+            .replace(/\n/g, '<br>');
+        
+        bubble.innerHTML = formattedContent;
+        messageDiv.appendChild(bubble);
+        
+        chatMessages.appendChild(messageDiv);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+    }
+    
+    // Add typing indicator
+    function addTypingIndicator() {
+        const id = 'typing-' + Date.now();
+        const messageDiv = document.createElement('div');
+        messageDiv.id = id;
+        messageDiv.className = 'ai-message ai-message-assistant';
+        
+        messageDiv.innerHTML = `
+            <div class="ai-message-bubble">
+                <div class="ai-typing-indicator">
+                    <span></span><span></span><span></span>
+                </div>
+            </div>
+        `;
+        
+        chatMessages.appendChild(messageDiv);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+        
+        return id;
+    }
+    
+    // Remove typing indicator
+    function removeTypingIndicator(id = null) {
+        if (id) {
+            const element = document.getElementById(id);
+            if (element) element.remove();
+        } else {
+            // Remove all typing indicators
+            document.querySelectorAll('.ai-typing-indicator').forEach(el => {
+                el.closest('.ai-message').remove();
+            });
+        }
+    }
+    
+    // Toggle voice input
+    function toggleVoiceInput() {
+        if (!recognition) {
+            alert('Voice recognition not supported in this browser.');
+            return;
+        }
+        
+        if (isListening) {
+            recognition.stop();
+            isListening = false;
+        } else {
+            showChatOverlay();
+            addMessage('assistant', '🎤 Listening... Speak your command.');
+            recognition.start();
+            isListening = true;
+        }
+        
+        updateVoiceButton();
+    }
+    
+    // Update voice button appearance (both toolbar and chat panel)
+    function updateVoiceButton() {
+        const buttons = [voiceBtn, document.getElementById('ai-chat-voice-btn')];
+        
+        buttons.forEach(btn => {
+            if (!btn) return;
+            
+            if (isListening) {
+                btn.classList.add('listening');
+                const icon = btn.querySelector('i');
+                if (icon) icon.className = 'fas fa-microphone-slash';
+            } else {
+                btn.classList.remove('listening');
+                const icon = btn.querySelector('i');
+                if (icon) icon.className = 'fas fa-microphone';
+            }
+        });
+    }
+    
+    // Show chat overlay
+    function showChatOverlay() {
+        if (chatOverlay) {
+            chatOverlay.style.display = 'flex';
+            // Add welcome message if empty
+            if (chatMessages && chatMessages.children.length === 0) {
+                addMessage('assistant', '👋 Hi! I\'m your ChefCode AI assistant. I can help you manage recipes and inventory. What would you like to do?');
+            }
+        }
+    }
+    
+    // Close chat overlay
+    function closeChatOverlay() {
+        if (chatOverlay) {
+            chatOverlay.style.display = 'none';
+        }
+    }
+    
+    // Note: Search results handled by existing web recipe search modal
+    
+    // Show toast notification
+    function showToast(message, type = 'info') {
+        const toast = document.createElement('div');
+        toast.className = `ai-toast ai-toast-${type}`;
+        toast.textContent = message;
+        
+        document.body.appendChild(toast);
+        
+        setTimeout(() => {
+            toast.classList.add('show');
+        }, 100);
+        
+        setTimeout(() => {
+            toast.classList.remove('show');
+            setTimeout(() => toast.remove(), 300);
+        }, 3000);
+    }
+    
+    // Public API
+    return {
+        init,
+        processCommand,
+        showChatOverlay,
+        closeChatOverlay
+    };
+})();
+
+// Initialize when DOM is ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => AI_ASSISTANT.init());
+} else {
+    AI_ASSISTANT.init();
+}
+

frontend/api.js

@@ -0,0 +1,233 @@
+/**
+ * ChefCode API Layer - Connected to FastAPI Backend
+ * Gestisce tutte le chiamate al backend (port 8000)
+ */
+
+class ChefCodeAPI {
+  constructor(baseURL = 'http://localhost:8000') {
+    this.baseURL = baseURL;
+    this.apiKey = null; // MUST be set via setMobileConfig() or setApiKey()
+    console.log('🌐 ChefCode API connected to:', this.baseURL);
+    console.log('⚠️  API Key authentication required - set via setApiKey() or setMobileConfig()');
+  }
+
+  // Set API Key (must be called before making authenticated requests)
+  setApiKey(apiKey) {
+    if (!apiKey) {
+      console.error('❌ API Key cannot be empty');
+      throw new Error('API Key is required');
+    }
+    this.apiKey = apiKey;
+    console.log('✅ API Key configured');
+  }
+
+  // Configurazione per mobile (React Native / Flutter)
+  setMobileConfig(config) {
+    this.baseURL = config.baseURL || this.baseURL;
+    if (config.apiKey) {
+      this.setApiKey(config.apiKey);
+    }
+    this.token = config.token; // Per autenticazione future (deprecated)
+    console.log('📱 API URL updated to:', this.baseURL);
+  }
+
+  // Get headers with authentication
+  getHeaders() {
+    if (!this.apiKey) {
+      console.error('❌ API Key not set. Call setApiKey() first.');
+      throw new Error('API Key not configured. Call setApiKey() before making requests.');
+    }
+    return {
+      'Content-Type': 'application/json',
+      'X-API-Key': this.apiKey
+    };
+  }
+
+  // ===== SYNC DATA =====
+  async syncData(data) {
+    try {
+      const response = await fetch(`${this.baseURL}/api/sync-data`, {
+        method: 'POST',
+        headers: this.getHeaders(),
+        body: JSON.stringify(data)
+      });
+      
+      if (response.status === 401) {
+        throw new Error('Authentication failed. Check API Key configuration.');
+      }
+      
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.detail || 'Sync failed');
+      }
+      
+      return await response.json();
+    } catch (error) {
+      console.error('❌ Sync error:', error);
+      throw error;
+    }
+  }
+
+  // ===== CHATGPT AI =====
+  async sendChatMessage(prompt, language = 'en') {
+    try {
+      const response = await fetch(`${this.baseURL}/api/chatgpt-smart`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' }, // Chat endpoint doesn't require auth for now
+        body: JSON.stringify({ prompt, language })
+      });
+      
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.detail || 'ChatGPT request failed');
+      }
+      
+      return await response.json();
+    } catch (error) {
+      console.error('❌ ChatGPT error:', error);
+      throw error;
+    }
+  }
+
+  // ===== INVENTORY =====
+  async getInventory() {
+    try {
+      const response = await fetch(`${this.baseURL}/api/data`);
+      const data = await response.json();
+      return data.inventory || [];
+    } catch (error) {
+      console.error('❌ Get inventory error:', error);
+      throw error;
+    }
+  }
+
+  async addInventoryItem(item) {
+    try {
+      const response = await fetch(`${this.baseURL}/api/action`, {
+        method: 'POST',
+        headers: this.getHeaders(),
+        body: JSON.stringify({
+          action: 'add-inventory',
+          data: item
+        })
+      });
+      
+      if (response.status === 401) {
+        throw new Error('Authentication failed. Check API Key configuration.');
+      }
+      
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.detail || 'Failed to add inventory item');
+      }
+      
+      return await response.json();
+    } catch (error) {
+      console.error('❌ Add inventory error:', error);
+      throw error;
+    }
+  }
+
+  // ===== RECIPES =====
+  async getRecipes() {
+    try {
+      const response = await fetch(`${this.baseURL}/api/data`);
+      const data = await response.json();
+      return data.recipes || {};
+    } catch (error) {
+      console.error('❌ Get recipes error:', error);
+      throw error;
+    }
+  }
+
+  async saveRecipe(name, recipe) {
+    try {
+      const response = await fetch(`${this.baseURL}/api/action`, {
+        method: 'POST',
+        headers: this.getHeaders(),
+        body: JSON.stringify({
+          action: 'save-recipe',
+          data: { name, recipe }
+        })
+      });
+      
+      if (response.status === 401) {
+        throw new Error('Authentication failed. Check API Key configuration.');
+      }
+      
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.detail || 'Failed to save recipe');
+      }
+      
+      return await response.json();
+    } catch (error) {
+      console.error('❌ Save recipe error:', error);
+      throw error;
+    }
+  }
+
+  // ===== TASKS =====
+  async getTasks() {
+    try {
+      const response = await fetch(`${this.baseURL}/api/data`);
+      const data = await response.json();
+      return data.tasks || [];
+    } catch (error) {
+      console.error('❌ Get tasks error:', error);
+      throw error;
+    }
+  }
+
+  async addTask(task) {
+    try {
+      const response = await fetch(`${this.baseURL}/api/action`, {
+        method: 'POST',
+        headers: this.getHeaders(),
+        body: JSON.stringify({
+          action: 'add-task',
+          data: task
+        })
+      });
+      
+      if (response.status === 401) {
+        throw new Error('Authentication failed. Check API Key configuration.');
+      }
+      
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.detail || 'Failed to add task');
+      }
+      
+      return await response.json();
+    } catch (error) {
+      console.error('❌ Add task error:', error);
+      throw error;
+    }
+  }
+
+  // ===== HEALTH CHECK =====
+  async ping() {
+    try {
+      const response = await fetch(`${this.baseURL}/health`);
+      return response.ok;
+    } catch (error) {
+      return false;
+    }
+  }
+}
+
+// Export per Web (browser)
+if (typeof window !== 'undefined') {
+  window.ChefCodeAPI = ChefCodeAPI;
+}
+
+// Export per Mobile (React Native / Node.js)
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = ChefCodeAPI;
+}
+
+// Export per ES6 modules
+if (typeof exports !== 'undefined') {
+  exports.ChefCodeAPI = ChefCodeAPI;
+}

frontend/config.js

@@ -0,0 +1,27 @@
+/**
+ * ChefCode Frontend Configuration
+ * ⚠️  SECURITY WARNING: This file contains sensitive API credentials
+ * 
+ * For Production:
+ * - DO NOT commit this file to git (add to .gitignore)
+ * - Use environment variables or secure key management
+ * - Implement proper authentication (login/session-based)
+ * - Consider using a backend proxy to hide API keys
+ */
+
+const CHEFCODE_CONFIG = {
+  // Backend API URL
+  API_URL: 'http://localhost:8000',
+  
+  // ⚠️  SECURITY: API Key should NOT be in frontend code in production
+  // This is only for local development/demo
+  // In production, use session-based auth or backend proxy
+  API_KEY: 'chefcode-secret-key-2024'
+};
+
+// Make available globally for non-module scripts
+if (typeof window !== 'undefined') {
+  window.CHEFCODE_CONFIG = CHEFCODE_CONFIG;
+}
+
+

frontend/index.html

@@ -0,0 +1,675 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChefCode - Workflow Simulation</title>
+    <link rel="stylesheet" href="style.css">
+    <!-- ChefCode API Layer -->
+    <script src="config.js"></script>
+    <script src="utils.js"></script>
+    <script src="api.js"></script>
+    <script>
+        // Configure API authentication for web version
+        document.addEventListener('DOMContentLoaded', function() {
+            if (typeof ChefCodeAPI !== 'undefined' && typeof CHEFCODE_CONFIG !== 'undefined') {
+                const api = new ChefCodeAPI(CHEFCODE_CONFIG.API_URL);
+                api.setApiKey(CHEFCODE_CONFIG.API_KEY);
+                window.chefCodeAPI = api; // Make available globally
+                console.log('✅ ChefCode API configured with authentication');
+            }
+        });
+    </script>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+</head>
+<body>
+    <header class="header">
+        <div class="header-left">
+            <button class="home-button" id="chefcode-logo-btn">
+                <i class="fas fa-home"></i>
+            </button>
+        </div>
+        <div class="header-center">
+            <h1 class="logo">ChefCode</h1>
+        </div>
+        <div class="header-right">
+            <div class="account-menu">
+                <button class="account-button">Account <span class="arrow-down">&#9660;</span></button>
+                <div class="dropdown-content">
+                    <a href="#">Profile</a>
+                    <a href="#">Settings</a>
+                    <a href="#">Logout</a>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <main class="main-container">
+        <!-- ...existing code... -->
+        <section id="step-selection-page" class="page-section active">
+            <div class="step-buttons-grid">
+                <button class="big-step-button" data-step="goods-in">
+                    <i class="fas fa-box-open"></i>
+                    <span>GOODS IN</span>
+                </button>
+                <button class="big-step-button" data-step="recipe-selection">
+                    <i class="fas fa-utensils"></i>
+                    <span>RECIPES</span>
+                </button>
+                <button class="big-step-button" data-step="production">
+                    <i class="fas fa-industry"></i>
+                    <span>PRODUCTION</span>
+                </button>
+                <button class="big-step-button" data-step="sales">
+                    <i class="fas fa-cash-register"></i>
+                    <span>SALES</span>
+                </button>
+                <button class="big-step-button" data-step="end-of-day">
+                    <i class="fas fa-shopping-basket"></i>
+                    <span>SHOPPING LIST</span>
+                </button>
+                <button class="big-step-button" data-step="dashboard-selection">
+                    <i class="fas fa-chart-line"></i>
+                    <span>DASHBOARD</span>
+                </button>
+                <button class="big-step-button" data-step="inventory-page">
+                    <i class="fas fa-clipboard-check"></i>
+                    <span>INVENTORY</span>
+                </button>
+                <button class="big-step-button" data-step="add-module">
+                    <i class="fas fa-plus"></i>
+                    <span>ADD MODULE</span>
+                </button>
+            </div>
+        </section>
+
+        <section id="input-detail-page" class="page-section">
+            <div id="input-pages-container">
+                
+                <div id="goods-in-content" class="input-page">
+                    <div class="page-header-with-back"><button class="back-button" data-back-target="step-selection-page"><i class="fas fa-arrow-left"></i> Back</button><h3>GOODS IN</h3></div>
+                    <div class="goods-in-buttons-grid">
+                        <button class="big-step-button" data-action="invoice-photo"><i class="fas fa-camera"></i><span>INVOICE PHOTO (OCR)</span></button>
+                        <button class="big-step-button" data-action="voice-input" style="display:none;"><i class="fas fa-microphone"></i><span>VOICE INPUT</span></button>
+                        <button class="big-step-button" data-action="manual-input"><i class="fas fa-keyboard"></i><span>MANUAL INPUT</span></button>
+                    </div>
+                </div>
+
+                <div id="manual-input-content" class="input-page">
+                    <div class="page-header-with-back"><button class="back-button" data-back-target="goods-in-content"><i class="fas fa-arrow-left"></i> Back</button><h3>MANUAL INPUT</h3></div>
+                    <form id="manual-entry-form" class="manual-form">
+                        <div class="form-group full-width"><label for="item-name">Item Name</label><input type="text" id="item-name" name="item-name" placeholder="e.g., San Marzano Tomatoes" required></div>
+                        <div class="form-group"><label for="item-quantity">Quantity</label><input type="number" id="item-quantity" name="item-quantity" placeholder="e.g., 25" step="0.01" required></div>
+                        <div class="form-group"><label for="item-unit">Unit</label><input type="text" id="item-unit" name="item-unit" placeholder="e.g., kg" required></div>
+                        <div class="form-group"><label for="item-category">Category</label><input type="text" id="item-category" name="item-category" placeholder="e.g., Vegetables" required></div>
+                        <div class="form-group"><label for="item-price">Unit Price (€)</label><input type="number" id="item-price" name="item-price" placeholder="e.g., 2.50" step="0.01" required></div>
+                        <!-- HACCP Traceability Fields -->
+                        <div class="form-group"><label for="item-lot-number">Lot Number <span style="color:#888;">(optional)</span></label><input type="text" id="item-lot-number" name="item-lot-number" placeholder="e.g., LOT2024-001"></div>
+                        <div class="form-group"><label for="item-expiry-date">Expiry Date <span style="color:#888;">(optional)</span></label><input type="date" id="item-expiry-date" name="item-expiry-date"></div>
+                    <div style="text-align:center; margin-top:16px;">
+                        <button type="submit" class="submit-btn"><i class="fas fa-save"></i> Add to Inventory</button>
+                    </div>
+                    </form>
+                </div>
+
+                <div id="dashboard-selection-content" class="input-page">
+                    <div class="page-header-with-back"><button class="back-button" data-back-target="step-selection-page"><i class="fas fa-arrow-left"></i> Back</button><h3>Select Dashboard</h3></div>
+                    <div class="step-buttons-grid">
+                        <button class="big-step-button" data-step="kitchen-dashboard"><i class="fas fa-utensils"></i><span>KITCHEN DASHBOARD</span></button>
+                        <button class="big-step-button" data-step="management-dashboard"><i class="fas fa-chart-bar"></i><span>MANAGEMENT DASHBOARD</span></button>
+                    </div>
+                </div>
+                
+                <div id="kitchen-dashboard-content" class="input-page">
+                    <div class="page-header-with-back"><button class="back-button" data-back-target="dashboard-selection-content"><i class="fas fa-arrow-left"></i> Back</button><h3>Chef's Operational Dashboard</h3></div>
+                    <div class="new-dashboard-grid kitchen-dash"><div class="new-dash-card"><h5 class="new-card-title">Today's Work Plan (Mise en Place)</h5><table class="prep-list-table"><thead><tr><th>Priority</th><th>Task</th><th>Status</th></tr></thead><tbody><tr><td><span class="priority high">High</span></td><td>Prepare Amatriciana Sauce (5L)</td><td><span class="status done">Done</span></td></tr><tr><td><span class="priority high">High</span></td><td>Clean Mussels and Clams</td><td><span class="status done">Done</span></td></tr><tr><td><span class="priority medium">Medium</span></td><td>Cut Vegetables for Soffritto</td><td><span class="status pending">To Do</span></td></tr><tr><td><span class="priority medium">Medium</span></td><td>Fillet Sea Bass (10 pcs)</td><td><span class="status pending">To Do</span></td></tr></tbody></table></div><div class="new-dash-card"><h5 class="new-card-title">Today's "Hot" Items</h5><table class="hot-items-table"><thead><tr><th>Dish</th><th>Qty</th><th>Margin</th></tr></thead><tbody><tr><td>Spaghetti Carbonara</td><td>18</td><td><span class="margin good">€ 10.90</span></td></tr><tr><td>Frittura di Calamari</td><td>12</td><td><span class="margin ok">€ 9.90</span></td></tr><tr><td>Tagliata di Manzo</td><td>9</td><td><span class="margin good">€ 14.30</span></td></tr><tr><td>Tonnarelli Cacio e Pepe</td><td>7</td><td><span class="margin good">€ 9.80</span></td></tr></tbody></table></div><div class="new-dash-card"><h5 class="new-card-title">Critical Stock</h5><ul class="dash-list"><li>Guanciale (under 1 kg)</li><li>Pecorino Romano</li><li>White Wine for cooking</li></ul></div><div class="new-dash-card"><h5 class="new-card-title">Use Soon (Anti-Waste)</h5><ul class="dash-list"><li>Fresh Porcini Mushrooms</li><li>Buffalo Mozzarella</li><li>Fresh Basil</li></ul></div><div class="new-dash-card full-width"><h5 class="new-card-title">Menu Engineering Analysis</h5><div class="menu-engineering-grid"><div class="quadrant puzzle"><h6>PUZZLES ❓</h6><small>High profit, low popularity. Needs promotion.</small><p>Filetto al Pepe Verde</p></div><div class="quadrant star"><h6>STARS ⭐</h6><small>High profit, high popularity. Our champions!</small><p>Tagliata di Manzo</p><p>Spaghetti Carbonara</p></div><div class="quadrant dog"><h6>DOGS 🐶</h6><small>Low profit, low popularity. Consider removing.</small><p>Insalatona "Chef"</p></div><div class="quadrant plow-horse"><h6>PLOW-HORSES 🐴</h6><small>Low profit, high popularity. Optimize cost.</small><p>Frittura di Calamari</p></div></div></div></div>
+                </div>
+
+                <div id="management-dashboard-content" class="input-page">
+                    <div class="page-header-with-back"><button class="back-button" data-back-target="dashboard-selection-content"><i class="fas fa-arrow-left"></i> Back</button><h3>Management Dashboard</h3></div>
+                    <div class="new-dashboard-grid"><div class="new-dash-card kpi-card"><h5 class="kpi-title">REVENUE</h5><p class="kpi-amount">$895,430</p></div><div class="new-dash-card kpi-card"><h5 class="kpi-title">AVERAGE TRANSACTION</h5><p class="kpi-amount">$34.49</p><small class="kpi-change up"><i class="fas fa-caret-up"></i> 3,1%</small></div><div class="new-dash-card kpi-card"><h5 class="kpi-title">ORDERS</h5><p class="kpi-amount">25,959</p><small class="kpi-change down"><i class="fas fa-caret-down"></i> 2,5%</small></div><div class="new-dash-card tall"><h5 class="new-card-title">SALES BY MONTH</h5><div class="bar-chart-v"><div class="bar-wrapper"><div class="bar" style="height: 20%;"></div><span class="bar-label-month">Jan</span></div><div class="bar-wrapper"><div class="bar" style="height: 30%;"></div><span class="bar-label-month">Feb</span></div><div class="bar-wrapper"><div class="bar" style="height: 45%;"></div><span class="bar-label-month">Mar</span></div><div class="bar-wrapper"><div class="bar" style="height: 60%;"></div><span class="bar-label-month">Apr</span></div><div class="bar-wrapper"><div class="bar" style="height: 55%;"></div><span class="bar-label-month">May</span></div><div class="bar-wrapper"><div class="bar" style="height: 70%;"></div><span class="bar-label-month">Jun</span></div><div class="bar-wrapper"><div class="bar" style="height: 85%;"></div><span class="bar-label-month">Jul</span></div><div class="bar-wrapper"><div class="bar" style="height: 95%;"></div><span class="bar-label-month">Aug</span></div></div></div><div class="new-dash-card tall"><h5 class="new-card-title">SALES BY CHANNEL</h5><div class="chart-with-legend"><div class="pie-chart"></div><div class="channel-list"><div class="channel-item"><i class="fas fa-circle channel-icon dine-in"></i><span class="channel-label">Dine-in</span><span class="channel-perc">70%</span></div><div class="channel-item"><i class="fas fa-circle channel-icon takeaway"></i><span class="channel-label">Takeaway</span><span class="channel-perc">15%</span></div><div class="channel-item"><i class="fas fa-circle channel-icon delivery"></i><span class="channel-label">Delivery</span><span class="channel-perc">15%</span></div></div></div></div><div class="new-dash-card tall"><h5 class="new-card-title">SALES BY CATEGORY</h5><div class="bar-chart-h"><div class="bar-item"><span class="bar-label">Food</span><div class="bar-bg"><div class="bar-fg food" style="width: 62%;"></div></div><span class="bar-perc">62%</span></div><div class="bar-item"><span class="bar-label">Beverage</span><div class="bar-bg"><div class="bar-fg beverage" style="width: 21%;"></div></div><span class="bar-perc">21%</span></div><div class="bar-item"><span class="bar-label">Dessert</span><div class="bar-bg"><div class="bar-fg dessert" style="width: 11%;"></div></div><span class="bar-perc">11%</span></div><div class="bar-item"><span class="bar-label">Other</span><div class="bar-bg"><div class="bar-fg other" style="width: 6%;"></div></div><span class="bar-perc">6%</span></div></div></div></div>
+                </div>
+
+                <div id="inventory-page-content" class="input-page">
+                    <div class="page-header-with-back"><button class="back-button" data-back-target="step-selection-page"><i class="fas fa-arrow-left"></i> Back</button><h3>FOOD INVENTORY</h3></div>
+                    <div class="inventory-controls">
+                        <input type="search" id="inventory-search" placeholder="Search by name..."><select id="inventory-category-filter"><option value="all">All Categories</option><option value="Vegetables">Vegetables</option><option value="Dry Goods">Dry Goods</option><option value="Dairy">Dairy</option><option value="Meat">Meat</option><option value="Oils">Oils</option><option value="Herbs">Herbs</option><option value="Pasta">Pasta</option><option value="Fish">Fish</option><option value="Legumes">Legumes</option><option value="Bakery">Bakery</option><option value="Beverages">Beverages</option><option value="Sweets">Sweets</option><option value="Condiments">Condiments</option><option value="Nuts">Nuts</option></select>
+                        <button id="expand-table-btn" class="icon-btn" title="Collapse to Summary"><i class="fas fa-chevron-up"></i></button>
+                    </div>
+                    <div class="inventory-table-container">
+                        <table>
+                            <thead><tr><th>Item</th><th>Unit Price</th><th>Unit</th><th>Quantity</th><th>Category</th><th>Lot #</th><th>Expiry</th><th>Total Value</th><th>Action</th></tr></thead>
+                            <tbody id="inventory-table-body">
+                                <!-- Inventory items will be loaded dynamically -->
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="inventory-summary"><h4>Total Inventory Value: <span id="inventory-total-value">€2,362.90</span></h4></div>
+                </div>
+
+                <div id="camera-simulation-page" class="input-page">
+                    <div class="page-header-with-back"><button class="back-button" data-back-target="goods-in-content"><i class="fas fa-arrow-left"></i> Back</button><h3>TAKE INVOICE PHOTO</h3></div>
+                    <div class="camera-preview-container"><div class="camera-viewfinder"><i class="fas fa-camera-retro"></i><p>Place invoice here</p></div></div>
+                    <div class="camera-controls">
+                        <button id="take-photo-btn" class="input-btn"><i class="fas fa-circle"></i><span>Take Photo</span></button>
+                        <button id="retake-photo-btn" class="input-btn" style="display: none;"><i class="fas fa-redo"></i><span>Retake Photo</span></button>
+                        <button id="confirm-photo-btn" class="input-btn" style="display: none;"><i class="fas fa-check"></i><span>Confirm Photo & OCR</span></button>
+                    </div>
+                    <div class="output-section camera-output" style="display: none;">
+                        <h4>OCR Result Simulation</h4>
+                        <ul><li>Invoice #: INV2025-07-001</li><li>Date: 03/07/2025</li><li>Supplier: Global Foods S.p.A.</li><li>Items detected: 5</li><li>Total Amount: €150.00</li></ul>
+                    </div>
+                </div>
+
+                <div id="voice-input-page-content" class="input-page">
+                    <div class="page-header-with-back"><button class="back-button" data-back-target="goods-in-content"><i class="fas fa-arrow-left"></i> Back</button><h3>VOICE INPUT</h3></div>
+                    <div class="voice-input-container">
+                        <p id="voice-status">Press the microphone to start speaking...</p>
+                        <div class="voice-mic-container"><button id="microphone-btn"><i class="fas fa-microphone"></i></button><span id="mic-label">Start Recording</span></div>
+                        <div id="voice-recognized-text" class="output-section" style="display: none;">
+                            <h4>Recognized Text</h4><p id="recognized-text-content"></p>
+                            <button id="process-voice-btn" class="input-btn"><i class="fas fa-check"></i><span>Process Input</span></button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Recipe Selection Page -->
+                <div id="recipe-selection-content" class="input-page">
+                    <div class="page-header-with-back"><button class="back-button" data-back-target="step-selection-page"><i class="fas fa-arrow-left"></i> Back</button><h3>RECIPE MANAGEMENT</h3></div>
+                    <div class="step-buttons-grid">
+                        <button class="big-step-button" data-step="add-recipe">
+                            <i class="fas fa-plus-circle"></i>
+                            <span>ADD RECIPE</span>
+                        </button>
+                        <button class="big-step-button" id="search-web-recipe-btn">
+                            <i class="fas fa-globe"></i>
+                            <span>SEARCH RECIPE FROM WEB</span>
+                        </button>
+                        <button class="big-step-button" data-step="recipe-catalogue">
+                            <i class="fas fa-book"></i>
+                            <span>RECIPE CATALOGUE</span>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Add Recipe (existing setup) -->
+                <div id="add-recipe-content" class="input-page">
+                    <div class="page-header-with-back"><button class="back-button" data-back-target="recipe-selection-content"><i class="fas fa-arrow-left"></i> Back</button><h3>ADD RECIPE</h3></div>
+                    <form id="recipe-form">
+                        <div class="form-group full-width"><label for="recipe-name">Recipe Name</label><input type="text" id="recipe-name" required placeholder="e.g., Spaghetti alla Carbonara"></div>
+                        <div class="form-group full-width"><label for="recipe-instructions">Instructions</label><textarea id="recipe-instructions" rows="4" placeholder="Describe the preparation steps..."></textarea></div>
+                    </form>
+                    <!-- === RECIPE YIELD (quanto prodotto fa 1 batch) === -->
+<div class="form-group full-width">
+    <label for="recipe-yield-qty">Recipe yield (product obtained per batch)</label>
+  <div class="yield-row">
+        <div style="display:flex; gap:10px; align-items:center;">
+            <input type="number" id="recipe-yield-qty" placeholder="es. 10" step="0.01" style="width:100px;">
+            <select id="recipe-yield-unit" style="width:80px;">
+                <option value="pz">pz</option>
+                <option value="kg">kg</option>
+                <option value="g">g</option>
+                <option value="lt">lt</option>
+                <option value="ml">ml</option>
+            </select>
+        </div>
+  </div>
+</div>
+
+                    <div class="add-ingredient-section">
+                        <div class="form-group"><label for="ingredient-select">Select Ingredient</label><select id="ingredient-select"><option value="" disabled selected>-- Choose an ingredient --</option></select></div>
+                        <div class="form-group"><label for="ingredient-qty">Quantity</label><input type="number" id="ingredient-qty" placeholder="e.g., 150"></div>
+                        <div class="form-group"><label for="ingredient-unit">Unit</label><select id="ingredient-unit"><option>g</option><option>kg</option><option>ml</option><option>l</option><option>pz</option></select></div>
+                        <button id="add-ingredient-btn" class="icon-btn"><i class="fas fa-plus"></i></button>
+                    </div>
+                    <div class="ingredients-list-container">
+                        <ul id="recipe-ingredients-list"></ul>
+                    </div>
+                    <button id="save-recipe-btn" class="submit-btn"><i class="fas fa-save"></i> Save Recipe</button>
+                </div>
+
+                <!-- Recipe Catalogue Page -->
+                <div id="recipe-catalogue-content" class="input-page">
+                    <div class="page-header-with-back">
+                        <button class="back-button" data-back-target="recipe-selection-content"><i class="fas fa-arrow-left"></i> Back</button>
+                        <h3>RECIPE CATALOGUE</h3>
+                    </div>
+                    
+                    <div class="recipe-catalogue-container">
+                        <!-- Modern Search Bar -->
+                        <div class="recipe-search-wrapper">
+                            <i class="fas fa-search search-icon"></i>
+                            <input type="search" id="recipe-search" class="recipe-search-input" placeholder="Search recipes by name...">
+                        </div>
+                        
+                        <!-- Recipe Cards Grid -->
+                        <div id="recipe-catalogue-body" class="recipe-cards-grid">
+                            <!-- Recipe cards will be populated here by JavaScript -->
+                        </div>
+                        
+                        <!-- Empty State -->
+                        <div id="recipe-catalogue-empty" class="recipe-empty-state" style="display:none;">
+                            <i class="fas fa-book-open"></i>
+                            <h3>No Recipes Yet</h3>
+                            <p>Start building your recipe collection!</p>
+                            <button class="empty-state-btn" onclick="document.querySelector('[data-step=add-recipe]')?.click()">
+                                <i class="fas fa-plus"></i> Add Your First Recipe
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                
+                <div id="production-content" class="input-page">
+                    <div class="page-header-with-back"><button class="back-button" data-back-target="step-selection-page"><i class="fas fa-arrow-left"></i> Back</button><h3>PRODUCTION</h3></div>
+<div class="add-production-task-section">
+  <!-- Recipe -->
+  <div class="form-group">
+    <label for="recipe-select-prod">Recipe to Prepare</label>
+    <select id="recipe-select-prod">
+      <option value="" disabled selected>-- Choose a recipe --</option>
+    </select>
+  </div>
+
+  <!-- Quantity -->
+  <div class="form-group">
+    <label for="production-qty">Quantity to Produce</label>
+    <input type="text" id="production-qty" placeholder="Insert Quantity">
+  </div>
+
+  <!-- Unità di misura (resta com’era) -->
+  <div class="form-group">
+    <label for="production-unit">Unit</label>
+    <select id="production-unit">
+      <option value="kg">kg</option>
+      <option value="g">g</option>
+      <option value="lt">lt</option>
+      <option value="ml">ml</option>
+      <option value="pz">pz</option>
+    </select>
+  </div>
+
+  <!-- Assign to -->
+  <div class="form-group">
+    <label for="assign-to">Assign to</label>
+    <select id="assign-to">
+      <option>Luca</option>
+      <option>Sofia</option>
+      <option>Marco</option>
+      <option>Tutti</option>
+    </select>
+  </div>
+
+  <!-- Initial Status (nuovo) -->
+ <div class="form-group">
+  <label for="initial-status">Initial Status</label>
+  <select id="initial-status">
+    <option value="todo" selected>To Do</option>
+    <option value="completed">Completed Task</option>
+  </select>
+</div>
+
+<button id="add-task-btn" class="submit-btn small-btn">
+  <i class="fas fa-plus"></i> Add to List
+    </button>
+
+        <!-- RIMOSSI I TAB BUTTON, SOLO DUE COLONNE VISIBILI -->
+    <div class="production-tasks-tabbed">
+        <div id="todo-tasks" class="task-list prod-tab-panel active"></div>
+        <div id="completed-tasks-list" class="task-list prod-tab-panel"></div>
+    </div>
+
+</div>
+                                </div>
+                </div>
+
+                <div id="sales-content" class="input-page">
+                    <div class="page-header-with-back"><button class="back-button" data-back-target="step-selection-page"><i class="fas fa-arrow-left"></i> Back</button><h3>SALES</h3></div><p>Record sales and update stock.</p>
+                </div>
+                <div id="end-of-day-content" class="input-page">
+                    <div class="page-header-with-back"><button class="back-button" data-back-target="step-selection-page"><i class="fas fa-arrow-left"></i> Back</button><h3>SHOPPING LIST</h3></div><p>Generate and manage your daily shopping list.</p>
+                </div>
+
+                <div id="add-module-content" class="input-page">
+                    <div class="page-header-with-back"><button class="back-button" data-back-target="step-selection-page"><i class="fas fa-arrow-left"></i> Back</button><h3>Add New Module</h3></div>
+                    <p>Module creation/selection interface will be here...</p>
+                </div>
+
+            </div>
+        </section>
+    </main>
+
+    <!-- AI Toolbar Footer -->
+    <footer class="ai-toolbar-footer">
+        <div class="ai-toolbar-container">
+            <input 
+                type="text" 
+                class="ai-command-input" 
+                placeholder="Type or speak a command..."
+                id="ai-command-input"
+            />
+            <button class="ai-toolbar-btn ai-send-btn" id="ai-send-btn" title="Send Command">
+                <i class="fas fa-paper-plane"></i>
+            </button>
+            <button class="ai-toolbar-btn ai-voice-btn" id="ai-voice-btn" title="Voice Input">
+                <i class="fas fa-microphone"></i>
+            </button>
+            <button class="ai-toolbar-btn ai-upload-btn" id="ai-upload-btn" title="Upload">
+                <i class="fas fa-plus"></i>
+            </button>
+        </div>
+    </footer>
+
+    <!-- OCR Modal -->
+    <div id="ocr-modal" class="ocr-modal-overlay" style="display: none;">
+        <div class="ocr-modal-content">
+            <!-- Modal Header -->
+            <div class="ocr-modal-header">
+                <h2 class="ocr-modal-title">Scan or Upload Invoice</h2>
+                <p class="ocr-modal-subtitle">Choose how to import your supplier invoice. ChefCode will extract item details automatically.</p>
+                <button class="ocr-modal-close" id="ocr-modal-close-btn">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+
+            <!-- Modal Body -->
+            <div class="ocr-modal-body">
+                <!-- Initial Selection Screen -->
+                <div id="ocr-selection-screen" class="ocr-screen">
+                    <div class="ocr-option-grid">
+                        <div class="ocr-option-card" id="camera-option">
+                            <div class="ocr-option-icon">
+                                <i class="fas fa-camera"></i>
+                            </div>
+                            <h3>📸 Take Photo</h3>
+                            <p>Capture invoice with your camera</p>
+                        </div>
+                        <div class="ocr-option-card" id="upload-option">
+                            <div class="ocr-option-icon">
+                                <i class="fas fa-upload"></i>
+                            </div>
+                            <h3>🗂️ Upload File</h3>
+                            <p>Select image or PDF file</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Camera Screen -->
+                <div id="ocr-camera-screen" class="ocr-screen" style="display: none;">
+                    <div class="ocr-camera-container">
+                        <video id="ocr-camera-preview" autoplay muted playsinline></video>
+                        <div class="ocr-camera-overlay">
+                            <div class="ocr-camera-guides">
+                                <div class="ocr-guide-line"></div>
+                                <div class="ocr-guide-line"></div>
+                                <div class="ocr-guide-line"></div>
+                                <div class="ocr-guide-line"></div>
+                            </div>
+                        </div>
+                        <div class="ocr-camera-controls">
+                            <button class="ocr-camera-btn secondary" id="ocr-camera-back">
+                                <i class="fas fa-arrow-left"></i>
+                            </button>
+                            <button class="ocr-camera-btn primary" id="ocr-camera-capture">
+                                <i class="fas fa-camera"></i>
+                            </button>
+                            <button class="ocr-camera-btn secondary" id="ocr-camera-switch">
+                                <i class="fas fa-sync-alt"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Preview Screen -->
+                <div id="ocr-preview-screen" class="ocr-screen" style="display: none;">
+                    <div class="ocr-preview-container">
+                        <img id="ocr-preview-image" alt="Invoice Preview" />
+                        <div class="ocr-preview-controls">
+                            <button class="ocr-preview-btn secondary" id="ocr-preview-back">
+                                <i class="fas fa-arrow-left"></i> Back
+                            </button>
+                            <button class="ocr-preview-btn primary" id="ocr-preview-process">
+                                <i class="fas fa-magic"></i> Process Invoice
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Processing Screen -->
+                <div id="ocr-processing-screen" class="ocr-screen" style="display: none;">
+                    <div class="ocr-processing-container">
+                        <div class="ocr-spinner"></div>
+                        <h3>Analyzing invoice...</h3>
+                        <p>ChefCode is extracting item details from your invoice</p>
+                    </div>
+                </div>
+
+                <!-- Results Screen -->
+                <div id="ocr-results-screen" class="ocr-screen" style="display: none;">
+                    <div class="ocr-results-container">
+                        <div class="ocr-results-header">
+                            <h3>Invoice Analysis Complete</h3>
+                            <div class="ocr-results-meta">
+                                <span id="ocr-supplier-name">Supplier: Unknown</span>
+                                <span id="ocr-invoice-date">Date: Unknown</span>
+                            </div>
+                            <p style="font-size: 0.9em; color: #7f8c8d; margin-top: 12px; text-align: center;">
+                                ✏️ <strong>Edit any field</strong> to correct OCR results. Add expiry dates for HACCP compliance.
+                            </p>
+                        </div>
+                        <div class="ocr-results-table-container">
+                            <table class="ocr-results-table">
+                                <thead>
+                                    <tr>
+                                        <th>Item</th>
+                                        <th>Qty</th>
+                                        <th>Unit</th>
+                                        <th>Price</th>
+                                        <th>Lot #</th>
+                                        <th>Expiry</th>
+                                    </tr>
+                                </thead>
+                                <tbody id="ocr-results-tbody">
+                                    <!-- Results will be populated here -->
+                                </tbody>
+                            </table>
+                        </div>
+                        <div class="ocr-results-actions">
+                            <button class="ocr-results-btn secondary" id="ocr-results-back">
+                                <i class="fas fa-arrow-left"></i> Back
+                            </button>
+                            <button class="ocr-results-btn primary" id="ocr-results-confirm">
+                                <i class="fas fa-check"></i> Add to Inventory
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Success Screen -->
+                <div id="ocr-success-screen" class="ocr-screen" style="display: none;">
+                    <div class="ocr-success-container">
+                        <div class="ocr-success-icon">
+                            <i class="fas fa-check-circle"></i>
+                        </div>
+                        <h3>✅ Items Added Successfully</h3>
+                        <p>Your invoice items have been added to the inventory</p>
+                        <button class="ocr-success-btn primary" id="ocr-success-close">
+                            <i class="fas fa-check"></i> Done
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Quick Add Popup -->
+    <div id="quick-add-popup" class="quick-add-popup" style="display: none;">
+        <div class="quick-add-popup-option" id="quick-add-upload">
+            <i class="fas fa-upload"></i>
+            <span>📂 Upload File</span>
+        </div>
+        <div class="quick-add-popup-option" id="quick-add-camera">
+            <i class="fas fa-camera"></i>
+            <span>📸 Take a Picture</span>
+        </div>
+    </div>
+
+    <!-- Web Recipe Search Modal -->
+    <div id="web-recipe-modal" class="web-recipe-modal-overlay" style="display: none;">
+        <div class="web-recipe-modal-content">
+            <!-- Modal Header -->
+            <div class="web-recipe-modal-header">
+                <div>
+                    <h2 class="web-recipe-modal-title">
+                        <span style="display: flex; align-items: center; gap: 8px;">
+                            🔍 Search Recipe from Web
+                        </span>
+                        <span class="web-recipe-modal-subtitle">Discover recipes from the web to add to your collection</span>
+                    </h2>
+                </div>
+                <button class="web-recipe-modal-close" id="web-recipe-close-btn">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <!-- Modal Body -->
+            <div class="web-recipe-modal-body">
+                <!-- Search Screen -->
+                <div id="web-recipe-search-screen" class="web-recipe-screen">
+                    <div class="web-recipe-search-container">
+                        <div class="web-recipe-search-box">
+                            <input 
+                                type="text" 
+                                id="web-recipe-search-input" 
+                                class="web-recipe-search-input" 
+                                placeholder="Find a quick Italian pasta recipe without cheese..."
+                            />
+                            <button id="web-recipe-search-btn" class="web-recipe-search-button">
+                                <i class="fas fa-search"></i> Search
+                            </button>
+                        </div>
+                        <p style="text-align: center; color: #94a3b8; font-size: 0.85em; margin: 8px 0 0 0; font-style: italic;">
+                            Powered by TheMealDB
+                        </p>
+                        <div class="web-recipe-filters" style="display: none;">
+                            <select id="web-recipe-cuisine-filter" class="web-recipe-filter-select">
+                                <option value="">All Cuisines</option>
+                                <option value="Italian">Italian</option>
+                                <option value="Chinese">Chinese</option>
+                                <option value="Mexican">Mexican</option>
+                                <option value="Indian">Indian</option>
+                                <option value="Japanese">Japanese</option>
+                                <option value="French">French</option>
+                                <option value="Thai">Thai</option>
+                                <option value="American">American</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <!-- Loading State -->
+                    <div id="web-recipe-loading" class="web-recipe-loading" style="display: none;">
+                        <div class="web-recipe-spinner"></div>
+                        <p>Searching for recipes...</p>
+                    </div>
+                    
+                    <!-- Results Grid -->
+                    <div id="web-recipe-results-container" class="web-recipe-results-grid" style="display: none;">
+                        <!-- Recipe cards will be populated here -->
+                    </div>
+                    
+                    <!-- Empty State -->
+                    <div id="web-recipe-empty" class="web-recipe-empty-state" style="display: none;">
+                        <i class="fas fa-search"></i>
+                        <h3>No Recipes Found</h3>
+                        <p>Try a different search term or cuisine</p>
+                    </div>
+                </div>
+
+                <!-- Recipe Detail Screen -->
+                <div id="web-recipe-detail-screen" class="web-recipe-screen">
+                    <div class="web-recipe-detail-container">
+                        <button class="web-recipe-back-btn" id="web-recipe-detail-back">
+                            <i class="fas fa-arrow-left"></i> Back to Results
+                        </button>
+                        
+                        <div id="web-recipe-detail-content">
+                            <!-- Recipe details will be populated here -->
+                        </div>
+                        
+                        <div class="web-recipe-detail-actions">
+                            <button class="web-recipe-btn primary" id="web-recipe-import-btn">
+                                <i class="fas fa-download"></i> Import Recipe
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Ingredient Mapping Screen -->
+                <div id="web-recipe-mapping-screen" class="web-recipe-screen">
+                    <div class="web-recipe-mapping-container">
+                        <button class="web-recipe-back-btn" id="web-recipe-mapping-back">
+                            <i class="fas fa-arrow-left"></i> Back
+                        </button>
+                        
+                        <h3>Ingredient Mapping</h3>
+                        <p class="web-recipe-mapping-subtitle">
+                            AI is matching recipe ingredients to your inventory...
+                        </p>
+                        
+                        <!-- Loading State -->
+                        <div id="web-recipe-mapping-loading" class="web-recipe-loading">
+                            <div class="web-recipe-spinner"></div>
+                            <p>Analyzing ingredients...</p>
+                        </div>
+                        
+                        <!-- Mapping Results -->
+                        <div id="web-recipe-mapping-results" class="web-recipe-mapping-results" style="display: none;">
+                            <div class="web-recipe-mapping-legend">
+                                <span class="mapping-legend-item">
+                                    <span class="mapping-badge exact"></span> Exact Match
+                                </span>
+                                <span class="mapping-legend-item">
+                                    <span class="mapping-badge substitute"></span> Substitute
+                                </span>
+                                <span class="mapping-legend-item">
+                                    <span class="mapping-badge missing"></span> Missing
+                                </span>
+                            </div>
+                            
+                            <div id="web-recipe-mapping-list" class="web-recipe-mapping-list">
+                                <!-- Mapping items will be populated here -->
+                            </div>
+                            
+                            <div class="web-recipe-mapping-actions">
+                                <button class="web-recipe-btn secondary" id="web-recipe-mapping-cancel">
+                                    Cancel
+                                </button>
+                                <button class="web-recipe-btn primary" id="web-recipe-mapping-confirm">
+                                    <i class="fas fa-check"></i> Save Recipe
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Success Screen -->
+                <div id="web-recipe-success-screen" class="web-recipe-screen">
+                    <div class="web-recipe-success-container">
+                        <div class="web-recipe-success-icon">
+                            <i class="fas fa-check-circle"></i>
+                        </div>
+                        <h3>✅ Recipe Saved Successfully!</h3>
+                        <p>The recipe has been added to your catalogue</p>
+                        <button class="web-recipe-btn primary" id="web-recipe-success-close">
+                            <i class="fas fa-check"></i> Done
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+    <script src="web-recipe-search.js"></script>
+    <script src="ai-assistant.js"></script>
+</body>
+</html>

frontend/script.js

@@ -0,0 +1,1830 @@
+/* ChefCode – MVP Controller
+   PATCH 1.2.2 — Stable (Inventory deduction + Production fix)
+*/
+
+// Global utility functions
+function normName(s) {
+  return String(s || '')
+    .toLowerCase()
+    .normalize('NFD').replace(/[\u0300-\u036f]/g,'')
+    .replace(/[^a-z0-9\s]/g,' ')
+    .replace(/\s+/g,' ')
+    .trim();
+}
+
+function normUnit(u) {
+  u = String(u || '').trim().toLowerCase();
+  if (u === 'l') u = 'lt';
+  if (u === 'gr') u = 'g';
+  if (u === 'pz.' || u === 'pcs' || u === 'pc') u = 'pz';
+  return u;
+}
+
+function convertFactor(from, to) {
+  from = normUnit(from); to = normUnit(to);
+  if (from === to) return 1;
+  if (from === 'kg' && to === 'g')  return 1000;
+  if (from === 'g'  && to === 'kg') return 1/1000;
+  if (from === 'lt' && to === 'ml') return 1000;
+  if (from === 'ml' && to === 'lt') return 1/1000;
+  // MVP: pz <-> bt 1:1
+  if ((from === 'pz' && to === 'bt') || (from === 'bt' && to === 'pz')) return 1;
+  return null; // non convertibili
+}
+
+// Global function for adding/merging inventory items
+window.addOrMergeInventoryItem = function({ name, unit, quantity, category, price, lot_number, expiry_date }) {
+  const nName = normName(name);
+  const pCents = Math.round((Number(price) || 0) * 100);
+
+  // HACCP: Items with different lot numbers or expiry dates MUST be kept separate for traceability
+  const idx = window.STATE.inventory.findIndex(it =>
+    normName(it.name) === nName &&
+    Math.round((Number(it.price) || 0) * 100) === pCents &&
+    (it.lot_number || '') === (lot_number || '') &&
+    (it.expiry_date || '') === (expiry_date || '')
+  );
+
+  if (idx >= 0) {
+    const row = window.STATE.inventory[idx];
+    const fromU = normUnit(unit || row.unit);
+    const toU   = normUnit(row.unit || fromU);
+    const f = convertFactor(fromU, toU);
+
+    if (f === null) {
+      // unità non compatibili: NON fondere, crea una nuova riga
+      window.STATE.inventory.push({ name, unit, quantity, category: category || row.category || 'Other', price, lot_number, expiry_date });
+    } else {
+      row.quantity = (Number(row.quantity) || 0) + (Number(quantity) || 0) * f;
+      // manteniamo categoria e unit della riga esistente
+    }
+  } else {
+    // nuova riga con HACCP traceability
+    window.STATE.inventory.push({ name, unit, quantity, category, price, lot_number, expiry_date });
+  }
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  // ===== AI TOOLBAR FUNCTIONALITY =====
+  
+  // ===================================================================
+  // AI ASSISTANT TOOLBAR
+  // ===================================================================
+  // All AI functionality (voice, text, commands) is now handled by ai-assistant.js
+  // - Voice button opens the AI chat with voice recognition
+  // - Send button sends commands through AI chat
+  // - No more browser prompt()/alert() - all conversational UI
+  // - See ai-assistant.js for full implementation
+  // ===================================================================
+  
+  // Upload button (connects to OCR)
+  const aiUploadBtn = document.getElementById('ai-upload-btn');
+  if (aiUploadBtn) {
+    aiUploadBtn.addEventListener('click', () => {
+      // Open OCR modal if available
+      if (window.ocrModal) {
+        window.ocrModal.openModal();
+      } else {
+        alert('📤 Upload functionality - Coming soon!');
+      }
+    });
+  }
+  
+  
+
+  // ---------- Helpers ----------
+  const el = (id) => document.getElementById(id);
+  const q  = (sel) => document.querySelector(sel);
+  const qa = (sel) => Array.from(document.querySelectorAll(sel));
+
+  function safe(fn){ try { return fn(); } catch(e){ console.warn(e); return undefined; } }
+
+  // ---------- Storage ----------
+  window.STATE = {
+    inventory: [],            // [{name, unit, quantity, category, price}]
+    recipes: {},              // { "Carbonara": { items:[{name, qty, unit}] } }
+    tasks: [],                // [{id, recipe, quantity, assignedTo, status}]
+    nextTaskId: 1
+  };
+
+  // Remove load/save/localStorage. Always sync with backend.
+  window.updateInventoryToBackend = async function() {
+    try {
+      const apiKey = window.CHEFCODE_CONFIG?.API_KEY || '';
+      console.log('🔄 Syncing to backend...', {
+        recipes: Object.keys(window.STATE.recipes || {}).length,
+        inventory: (window.STATE.inventory || []).length,
+        tasks: (window.STATE.tasks || []).length
+      });
+      
+      const syncData = {
+        inventory: window.STATE.inventory || [],
+        recipes: window.STATE.recipes || {},
+        tasks: window.STATE.tasks || []
+      };
+      
+      const response = await fetch('http://localhost:8000/api/sync-data', {
+        method: 'POST',
+        headers: { 
+          'Content-Type': 'application/json',
+          'X-API-Key': apiKey
+        },
+        body: JSON.stringify(syncData)
+      });
+      
+      if (!response.ok) {
+        const errorText = await response.text();
+        console.error('❌ Sync failed:', response.status, errorText);
+        throw new Error(`Sync failed: ${response.status} - ${errorText}`);
+      }
+      
+      console.log('✅ Sync successful!');
+      // Removed fetchInventoryFromBackend() to prevent race condition
+      // Frontend already has the latest STATE, no need to fetch again
+    } catch (err) {
+      console.error('❌ Backend sync failed:', err.message);
+      alert(`Failed to save to database: ${err.message}\n\nYour changes may not be saved!`);
+      throw err; // Re-throw so callers know sync failed
+    }
+  }
+
+  async function fetchInventoryFromBackend() {
+    try {
+      const dataRes = await fetch('http://localhost:8000/api/data');
+      
+      if (!dataRes.ok) {
+        throw new Error(`Backend returned ${dataRes.status}: ${dataRes.statusText}`);
+      }
+      
+      const latest = await dataRes.json();
+      
+      // Validate response structure
+      if (!latest || typeof latest !== 'object') {
+        throw new Error('Invalid response format from backend');
+      }
+      
+      window.STATE = {
+        inventory: Array.isArray(latest.inventory) ? latest.inventory : [],
+        recipes: latest.recipes || {},
+        tasks: Array.isArray(latest.tasks) ? latest.tasks : [],
+        nextTaskId: window.STATE.nextTaskId || 1
+      };
+      
+      // Debug: Log recipes loaded
+      console.log(`✅ Data loaded from backend: ${Object.keys(window.STATE.recipes).length} recipes`);
+      if (Object.keys(window.STATE.recipes).length > 0) {
+        console.log('Recipes:', Object.keys(window.STATE.recipes));
+      }
+      
+      // Synchronize production tasks with STATE.tasks
+      if (Array.isArray(window.STATE.tasks)) {
+        window.productionTasks = window.STATE.tasks;
+      }
+      
+      window.renderInventory();
+    } catch (err) {
+      console.error('⚠️ Backend fetch failed:', err.message);
+      // Keep existing STATE if fetch fails - don't clear user's data
+    }
+  }
+
+
+  // ---------- Selectors ----------
+  const chefcodeLogoBtn = el('chefcode-logo-btn');
+
+  const stepSelectionPage   = el('step-selection-page');
+  const inputDetailPage     = el('input-detail-page');
+  const inputPagesContainer = el('input-pages-container');
+  const bigStepButtons      = qa('.big-step-button[data-step]');
+  
+  // Production tab panels (for visibility control)
+  const prodPanels = [
+    ...Array.from(qa('#production-content .production-tabs')),
+    ...Array.from(qa('#production-content .production-tasks-tabbed'))
+  ];
+
+  // Account
+  const accountButton         = q('.account-button');
+  const accountDropdownContent= q('.account-menu .dropdown-content');
+
+  // Goods In – Camera/OCR (sim)
+  const cameraViewfinder = q('.camera-viewfinder');
+  const cameraOutput     = q('.camera-output');
+
+  // Goods In – Voice (sim + process)
+  const microphoneBtn         = el('microphone-btn');
+  const micLabel              = el('mic-label');
+  const voiceStatus           = el('voice-status');
+  const voiceRecognizedText   = el('voice-recognized-text');
+  const recognizedTextContent = el('recognized-text-content');
+  const processVoiceBtn       = el('process-voice-btn');
+
+  // Goods In – Manual input
+  const manualEntryForm   = el('manual-entry-form');
+  const inventoryTableBody= el('inventory-table-body');
+  const inventoryTotalVal = el('inventory-total-value');
+
+  // Inventory – search/filter/expand
+  const inventorySearch   = el('inventory-search');
+  const categoryFilter    = el('inventory-category-filter');
+  const expandTableBtn    = el('expand-table-btn');
+  const inventoryTableCtr = q('#inventory-page-content .inventory-table-container');
+
+  // Recipe setup
+  const ingredientSelect        = el('ingredient-select');
+  const ingredientQty           = el('ingredient-qty');
+  const ingredientUnit          = el('ingredient-unit');
+  const addIngredientBtn        = el('add-ingredient-btn');
+  const recipeIngredientsList   = el('recipe-ingredients-list');
+  const saveRecipeBtn           = el('save-recipe-btn');
+  const recipeNameInput         = el('recipe-name');
+
+  // Production
+  const recipeSelectProd  = el('recipe-select-prod');
+  const productionQty     = el('production-qty');
+  const assignTo          = el('assign-to');
+  const initialStatusSelect = el('initial-status');
+  const addTaskBtn        = el('add-task-btn');
+  const todoTasksContainer      = el('todo-tasks');
+  const inprogressTasksContainer= el('inprogress-tasks');
+  const completedTasksList      = el('completed-tasks-list');
+
+// === Production state bootstrap (safe) ===
+// garantisci che l'array esista sempre e che l'id parta da >0
+window.productionTasks = Array.isArray(window.productionTasks) ? window.productionTasks : [];
+window.taskIdCounter   = typeof window.taskIdCounter === 'number' ? window.taskIdCounter : 0;
+
+  // runtime temp for recipe building
+  let currentRecipeIngredients = [];
+  let RECIPES = {};  // mappa: { [recipeName]: { items:[{name, quantity, unit}] } }
+    // --- Helpers per unità/nome e parsing ---
+     const normUnit = (u) => {
+        u = String(u || '').trim().toLowerCase();
+         if (u === 'l') u = 'lt';
+         if (u === 'gr') u = 'g';
+        if (u === 'pz.' || u === 'pcs' || u === 'pc') u = 'pz';
+        return u;
+     };
+     const convertFactor = (from, to) => {
+        from = normUnit(from); to = normUnit(to);
+        if (from === to) return 1;
+         if (from === 'kg' && to === 'g')  return 1000;
+        if (from === 'g'  && to === 'kg') return 1/1000;
+         if (from === 'lt' && to === 'ml') return 1000;
+         if (from === 'ml' && to === 'lt') return 1/1000;
+        // MVP: pz <-> bt 1:1
+         if ((from === 'pz' && to === 'bt') || (from === 'bt' && to === 'pz')) return 1;
+         return null; // non convertibili
+    };
+     const normName = (s) =>
+         String(s || '')
+          .toLowerCase()
+          .normalize('NFD').replace(/[\u0300-\u036f]/g,'')
+          .replace(/[^a-z0-9\s]/g,' ')
+           .replace(/\s+/g,' ')
+           .trim();
+     const parseNumber = (t) => {
+        if (!t) return 0;
+         t = String(t).replace('€','').replace(/\s/g,'');
+         // togli separa-migliaia e usa il punto come decimale
+         t = t.replace(/\./g,'').replace(',', '.');
+         const n = parseFloat(t);
+         return isNaN(n) ? 0 : n;
+     };
+// ==== Merge Inventory: stesso nome + stesso prezzo => somma quantità ====
+// Usa le funzioni già presenti: normName, normUnit, convertFactor
+
+  let isRecording = false;
+  
+  
+
+  // ---------- Routing ----------
+  function normalizeToken(s){ return String(s||'').toLowerCase().replace(/[^a-z0-9]/g,''); }
+
+  function findPageIdForStep(stepToken){
+    const token = normalizeToken(stepToken);
+    // Prova id esatto "<step>-content"
+    const direct = `${stepToken}-content`;
+    if (el(direct)) return direct;
+    // Cerca qualunque .input-page che contenga il token “normalizzato”
+    const pages = qa('.input-page');
+    for (const page of pages){
+      const pid = page.id || '';
+      if (normalizeToken(pid).includes(token)) return pid;
+    }
+    return null;
+  }
+
+  function showPage(pageId){
+    if (!stepSelectionPage || !inputDetailPage || !inputPagesContainer) return;
+    qa('.input-page').forEach(p => p.classList.remove('active'));
+    stepSelectionPage.classList.remove('active');
+    inputDetailPage.classList.remove('active');
+    const target = el(pageId);
+    if (target){ target.classList.add('active'); inputDetailPage.classList.add('active'); }
+    else { stepSelectionPage.classList.add('active'); }
+    // Mostra i tab solo se sei nella pagina production
+    prodPanels.forEach(el => {
+      el.style.display = (pageId === 'production-content') ? '' : 'none';
+    });
+    
+    // Render recipe catalogue when showing that page
+    if (pageId === 'recipe-catalogue-content' && window.renderRecipeCatalogue) {
+      window.renderRecipeCatalogue();
+    }
+  }
+
+  bigStepButtons.forEach(btn => {
+    btn.addEventListener('click', () => {
+      const step = btn.getAttribute('data-step'); // es: goodsin / goods-in
+      const pid  = findPageIdForStep(step || '');
+      if (pid) showPage(pid);
+      else showPage('step-selection-page');
+     /* ==== PATCH LAYOUT-4x2 — pulizia stili inline sul Back (append-only) ==== */
+(function enforceHomeGridOnBack(){
+  const home = document.getElementById('step-selection-page');
+  if (!home) return;
+  const grid = home.querySelector('.step-buttons-grid');
+  if (!grid) return;
+
+  function cleanInline() {
+    // rimuove qualsiasi style inline che possa stringere i riquadri
+    grid.removeAttribute('style');
+    if (grid.style) {
+      grid.style.gridTemplateColumns = '';
+      grid.style.gridTemplateRows = '';
+      grid.style.gap = '';
+    }
+  }
+
+  // Dopo qualunque click su un back-button, quando la home è visibile ripulisci
+  document.addEventListener('click', (e) => {
+    const back = e.target.closest('.back-button');
+    if (!back) return;
+    const targetId = back.dataset.backTarget || '';
+    setTimeout(() => {
+      if (targetId === 'step-selection-page' || home.classList.contains('active')) {
+        cleanInline(); // il CSS sopra fa il resto (4x2 responsive)
+      }
+    }, 0);
+  }, true);
+
+  // Safety net: se la home diventa active per altri motivi
+  const mo = new MutationObserver(() => {
+    if (home.classList.contains('active')) cleanInline();
+  });
+  mo.observe(home, { attributes: true, attributeFilter: ['class'] });
+})();
+ /* === PATCH 1.1.6 — Forza il centro della dashboard al ritorno (append-only) === */
+(function centerHomeGridOnActivate(){
+  const home = document.getElementById('step-selection-page');
+  const grid = home ? home.querySelector('.step-buttons-grid') : null;
+  if (!home || !grid) return;
+
+  function centerNow(){
+    // nessuna misura fissa: centratura a contenuto (resta responsive)
+    grid.style.width = 'fit-content';
+    grid.style.marginLeft = 'auto';
+    grid.style.marginRight = 'auto';
+    grid.style.justifyContent = 'center';
+  }
+
+  // Quando premi "Back" e torni alla home, centra
+  document.addEventListener('click', (e) => {
+    const back = e.target.closest('.back-button');
+    if (!back) return;
+    setTimeout(() => {
+      if (home.classList.contains('active')) centerNow();
+    }, 0);
+  }, true);
+
+  // Safety net: qualsiasi volta la home diventa active, centra
+  const mo = new MutationObserver(() => {
+    if (home.classList.contains('active')) centerNow();
+  });
+  mo.observe(home, { attributes: true, attributeFilter: ['class'] });
+})();
+
+    });
+  });
+
+  if (chefcodeLogoBtn){
+    chefcodeLogoBtn.addEventListener('click', () => showPage('step-selection-page'));
+  }
+
+  // Account menu
+  if (accountButton && accountDropdownContent){
+    accountButton.addEventListener('click', () => {
+      accountDropdownContent.style.display = accountDropdownContent.style.display === 'block' ? 'none' : 'block';
+    });
+    document.addEventListener('click', (e) => {
+      if (!accountButton.contains(e.target) && !accountDropdownContent.contains(e.target)) {
+        accountDropdownContent.style.display = 'none';
+      }
+    /* ============ PATCH 1.1.3 — Goods In click fix + Back grid 2x4 ============ */
+/* SOLO aggiunte, nessuna modifica al tuo codice esistente                     */
+
+// 1) Goods In: cattura in modo robusto i click sui 3 pulsanti interni
+(function rebindGoodsInButtons(){
+  const goodsInContent = document.getElementById('goods-in-content');
+  if (!goodsInContent) return;
+
+  // Usiamo capture=true per intercettare il click anche se ci sono figli (icona/span)
+  goodsInContent.addEventListener('click', (e) => {
+    const btn = e.target.closest('.big-step-button[data-action]');
+    if (!btn) return;
+
+    const action = btn.dataset.action;
+    if (!action) return;
+
+    // Skip invoice-photo action - handled by OCR modal
+    if (action === 'invoice-photo') {
+      return; // Let the OCR modal handle this action
+    }
+
+    // Mappa azione -> id pagina interna (sono gli ID che hai già in index.html)
+    const map = {
+      'voice-input'  : 'voice-input-page-content',
+      'manual-input' : 'manual-input-content'
+    };
+    const targetId = map[action];
+    if (targetId && typeof showPage === 'function') {
+      e.preventDefault();
+      showPage(targetId);
+    }
+  }, true);
+})();
+
+// 2) Back: quando torni alla dashboard, forziamo la griglia 2×4 come all’inizio
+(function fixBackGrid(){
+  // intercettiamo TUTTI i back-button già presenti in pagina
+  document.addEventListener('click', (e) => {
+    const back = e.target.closest('.back-button');
+    if (!back) return;
+
+    // Lasciamo che il tuo handler faccia showPage(...). Poi sistemiamo la griglia.
+    setTimeout(() => {
+      const targetId = back.dataset.backTarget || '';
+      // Se torni alla home, rimetti 4 colonne fisse (2 righe x 4)
+      if (targetId === 'step-selection-page' || document.getElementById('step-selection-page')?.classList.contains('active')) {
+        const grid = document.querySelector('#step-selection-page .step-buttons-grid');
+        if (grid) grid.style.gridTemplateColumns = 'repeat(4, 1fr)'; // 2 file da 4 come da origine
+      }
+    }, 0);
+  }, true);
+})();
+
+    });
+  }
+
+  // ---------- Camera/OCR (sim) ----------
+  function renderCameraIdle(){
+    if (!cameraViewfinder) return;
+    cameraViewfinder.innerHTML = `
+      <div class="camera-overlay">
+        <div class="camera-guides"></div>
+        <div class="camera-guides"></div>
+        <div class="camera-guides"></div>
+      </div>
+      <div class="camera-cta">
+        <button id="take-photo-btn" class="camera-btn"><i class="fas fa-camera"></i></button>
+      </div>`;
+  }
+  if (cameraViewfinder){
+    renderCameraIdle();
+    let capturedFile = null;
+    cameraViewfinder.addEventListener('click', (e) => {
+      if (e.target.closest('#take-photo-btn')) {
+        // Create a real file input for image selection
+        const fileInput = document.createElement('input');
+        fileInput.type = 'file';
+        fileInput.accept = 'image/*';
+        fileInput.style.display = 'none';
+        fileInput.onchange = (ev) => {
+          const file = ev.target.files[0];
+          if (file) {
+            capturedFile = file;
+            const reader = new FileReader();
+            reader.onload = function(evt) {
+              cameraViewfinder.innerHTML = `
+                <div class="camera-shot">
+                  <img src="${evt.target.result}" alt="Invoice" style="max-width:100%;max-height:220px;object-fit:contain;" />
+                </div>
+                <div class="camera-cta">
+                  <button id="retake-photo-btn" class="camera-btn secondary"><i class="fas fa-redo"></i></button>
+                  <button id="confirm-photo-btn" class="camera-btn primary"><i class="fas fa-check"></i></button>
+                </div>`;
+            };
+            reader.readAsDataURL(file);
+          }
+        };
+        document.body.appendChild(fileInput);
+        fileInput.click();
+        document.body.removeChild(fileInput);
+      }
+      if (e.target.closest('#retake-photo-btn')) {
+        capturedFile = null;
+        renderCameraIdle();
+      }
+      if (e.target.closest('#confirm-photo-btn') && cameraOutput) {
+        if (!capturedFile) {
+          alert('No image selected. Please take a photo.');
+          return;
+        }
+        // Show loading
+        cameraOutput.innerHTML = `<div class="ocr-result"><h4>Processing invoice...</h4></div>`;
+        cameraOutput.style.display = '';
+        // Upload to backend
+        const formData = new FormData();
+        formData.append('file', capturedFile);
+        const apiKey = window.CHEFCODE_CONFIG?.API_KEY || '';
+        fetch('http://localhost:8000/api/ocr-invoice', {
+          method: 'POST',
+          headers: {
+            'X-API-Key': apiKey
+          },
+          body: formData
+        })
+        .then(res => res.json())
+        .then(data => {
+          if (data.status === 'success' && Array.isArray(data.items)) {
+            let added = [];
+            data.items.forEach(item => {
+              // OCR may extract HACCP fields; if not, they can be added manually later
+              addOrMergeInventoryItem({
+                name: item.name,
+                unit: item.unit,
+                quantity: item.quantity,
+                category: item.category || 'Other',
+                price: item.price,
+                lot_number: item.lot_number || '',
+                expiry_date: item.expiry_date || ''
+              });
+              added.push(`${item.name} (${item.quantity} ${item.unit} @ €${item.price})`);
+            });
+            updateInventoryToBackend();
+            renderInventory();
+            cameraOutput.innerHTML = `<div class="ocr-result"><h4>OCR Extraction Result</h4><ul>${added.map(x => `<li>${x}</li>`).join('')}</ul><p style="color:#888; margin-top:10px;">💡 Tip: Add lot numbers and expiry dates via Manual Input for HACCP compliance</p></div>`;
+          } else {
+            cameraOutput.innerHTML = `<div class="ocr-result"><h4>OCR failed</h4><div>${data.message || 'Could not extract items.'}</div></div>`;
+          }
+        })
+        .catch(err => {
+          cameraOutput.innerHTML = `<div class="ocr-result"><h4>OCR error</h4><div>${err.message}</div></div>`;
+        });
+      }
+    });
+  }
+
+  // ---------- Voice (sim + process) ----------
+  if (microphoneBtn){
+    microphoneBtn.addEventListener('click', () => {
+      isRecording = !isRecording;
+      if (isRecording){
+        if (voiceStatus) voiceStatus.textContent = 'Listening...';
+        if (micLabel)    micLabel.textContent = 'Stop Recording';
+        setTimeout(() => {
+          if (recognizedTextContent) recognizedTextContent.textContent = '"pomodori 20 chili 2 euro e 50"';
+          if (voiceRecognizedText)   voiceRecognizedText.style.display = 'block';
+        }, 1200);
+      } else {
+        if (micLabel)              micLabel.textContent = 'Start Recording';
+        if (voiceStatus)           voiceStatus.textContent = 'Press the microphone to start speaking...';
+        if (voiceRecognizedText)   voiceRecognizedText.style.display = 'none';
+        if (recognizedTextContent) recognizedTextContent.textContent = '';
+      }
+    });
+  }
+
+  function parseItalianGoods(text){
+    const t = (text||'').toLowerCase().replace(/"/g,' ').replace(/\s+/g,' ').trim();
+    // prezzo: "2 euro e 50" | "€2,50"
+    let price = 0;
+    const pm = t.match(/(\d+[.,]?\d*)\s*(?:€|euro)?(?:\s*e\s*(\d{1,2}))?/);
+    if (pm){
+      const euros = parseFloat(pm[1].replace(',','.'));
+      const cents = pm[2] ? parseInt(pm[2]) : 0;
+      price = (isNaN(euros)?0:euros) + (isNaN(cents)?0:cents)/100;
+    }
+    const unitMap = { chili:'kg', chilo:'kg', chilogrammi:'kg', kg:'kg', grammi:'g', g:'g', litro:'l', litri:'l', lt:'l', l:'l', millilitri:'ml', ml:'ml', pezzi:'pz', pezzo:'pz', uova:'pz', pz:'pz', bt:'bt' };
+    const qm = t.match(/(\d+[.,]?\d*)\s*(kg|g|l|lt|ml|pz|bt|litro|litri|chili|chilo|chilogrammi|grammi|millilitri|pezzi|pezzo|uova)\b/);
+    const qty  = qm ? parseFloat(qm[1].replace(',','.')) : 1;
+    const unit = qm ? (unitMap[qm[2]] || qm[2]) : 'pz';
+    const name = qm ? t.slice(0, t.indexOf(qm[0])).trim() : t;
+    return { name: name || 'item', qty: isNaN(qty)?1:qty, unit, price: isNaN(price)?0:price };
+  }
+
+  if (processVoiceBtn && recognizedTextContent){
+    processVoiceBtn.addEventListener('click', () => {
+      const text = recognizedTextContent.textContent || '';
+      const { name, qty, unit, price } = parseItalianGoods(text);
+      if (!name){ alert('Voice: nessun nome articolo rilevato'); return; }
+    addOrMergeInventoryItem({ name, unit, quantity: qty, category: 'Other', price });
+      renderInventory(); // Update display immediately
+      updateInventoryToBackend();
+      alert(`Voice→Inventory: ${name} — ${qty} ${unit} @ €${price.toFixed(2)}`);
+    });
+  }
+
+  // ---------- Inventory ----------
+  function rowToItem(tr){
+    const tds = tr?.querySelectorAll('td'); if (!tds || tds.length < 6) return null;
+    const name = tds[0].textContent.trim();
+    const priceText = tds[1].textContent.replace('€','').trim();
+    const unit = tds[2].textContent.trim();
+    const quantityText = tds[3].textContent.trim();
+    const category = tds[4].textContent.trim();
+    const price = parseFloat(priceText.replace(',','.')) || 0;
+    const quantity = parseFloat(quantityText.replace(',','.')) || 0;
+    return { name, unit, quantity, category, price };
+  }
+
+  window.renderInventory = function(){
+    if (!inventoryTableBody) return;
+    
+    // Validate STATE and inventory array exist
+    if (!window.STATE || !Array.isArray(window.STATE.inventory)) {
+      console.warn('⚠️ Invalid STATE or inventory array');
+      window.STATE = window.STATE || { inventory: [], recipes: {}, tasks: [], nextTaskId: 1 };
+      window.STATE.inventory = [];
+    }
+    
+    inventoryTableBody.innerHTML = '';
+    let total = 0;
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    
+    window.STATE.inventory.forEach(item => {
+      // Validate item structure
+      if (!item || typeof item !== 'object') return;
+      const rowTotal = (item.price||0) * (item.quantity||0);
+      total += rowTotal;
+      const tr = document.createElement('tr');
+      
+      // Calculate expiry alert level
+      let expiryHTML = '-';
+      let expiryClass = '';
+      if (item.expiry_date) {
+        const expiryDate = new Date(item.expiry_date);
+        const daysUntilExpiry = Math.ceil((expiryDate - today) / (1000 * 60 * 60 * 24));
+        
+        if (daysUntilExpiry < 2) {
+          expiryClass = 'expiry-critical'; // Red
+          expiryHTML = `<span class="${expiryClass}">${window.escapeHtml(item.expiry_date)} (${daysUntilExpiry}d)</span>`;
+        } else if (daysUntilExpiry < 7) {
+          expiryClass = 'expiry-warning'; // Yellow
+          expiryHTML = `<span class="${expiryClass}">${window.escapeHtml(item.expiry_date)} (${daysUntilExpiry}d)</span>`;
+        } else {
+          expiryHTML = window.escapeHtml(item.expiry_date);
+        }
+      }
+      
+      tr.innerHTML = `
+        <td>${window.escapeHtml(item.name || '')}</td>
+        <td>€${(item.price ?? 0).toFixed(2)}</td>
+        <td>${window.escapeHtml(item.unit || '-')}</td>
+        <td>${item.quantity ?? 0}</td>
+        <td>${window.escapeHtml(item.category || '-')}</td>
+        <td>${window.escapeHtml(item.lot_number || '-')}</td>
+        <td>${expiryHTML}</td>
+        <td>€${rowTotal.toFixed(2)}</td>
+        <td><button class="delete-btn" onclick="deleteInventoryItem(${item.id})" title="Delete item"><i class="fas fa-trash"></i></button></td>`;
+      inventoryTableBody.appendChild(tr);
+    });
+    if (inventoryTotalVal) inventoryTotalVal.textContent = `€${total.toFixed(2)}`;
+    populateIngredientSelect(); // tiene il select aggiornato
+  }
+
+  // Bootstrap inventory: always fetch from backend, do not import from DOM or localStorage
+  if (inventoryTableBody){
+    fetchInventoryFromBackend();
+  }
+
+  // Manual Input (sovrascrive submit per evitare doppie append)
+  if (manualEntryForm){
+    manualEntryForm.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const name = (el('item-name')?.value || '').trim();
+      const qty  = parseFloat(el('item-quantity')?.value || '0');
+      const unit = el('item-unit')?.value || 'pz';
+      const price= parseFloat(el('item-price')?.value || '0');
+      const cat  = el('item-category')?.value || 'Other';
+      const lotNumber = el('item-lot-number')?.value || '';
+      const expiryDate = el('item-expiry-date')?.value || '';
+      if (!name || isNaN(qty) || isNaN(price)){ alert('Inserisci nome, quantità e prezzo validi.'); return; }
+      // Validate expiry date is not in the past (if provided)
+      if (expiryDate) {
+        const expiry = new Date(expiryDate);
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        if (expiry < today) {
+          alert('Expiry date cannot be in the past!');
+          return;
+        }
+      }
+      addOrMergeInventoryItem({ 
+        name, 
+        unit, 
+        quantity: qty, 
+        category: cat, 
+        price,
+        lot_number: lotNumber,
+        expiry_date: expiryDate
+      });
+      renderInventory(); // Update display immediately
+      await updateInventoryToBackend();
+      safe(()=>manualEntryForm.reset());
+      safe(()=>el('item-name').focus());
+      alert(`"${name}" aggiunto in inventario`);
+    });
+  }
+
+  // Search / Filter
+  function applyInventoryFilters(){
+    if (!inventoryTableBody) return;
+    const term = (inventorySearch?.value || '').toLowerCase();
+    const cat  = (categoryFilter?.value || 'All');
+    let total = 0;
+    qa('#inventory-table-body tr').forEach(row => {
+      const name = row.children[0]?.textContent.toLowerCase() || '';
+      const rc   = row.children[4]?.textContent || '';
+      const isAll = cat.toLowerCase() === 'all';
+      const ok   = (!term || name.includes(term)) && (isAll || cat === '' || rc === cat);
+      row.style.display = ok ? '' : 'none';
+      if (ok){
+        const tv = row.children[7]?.textContent.replace('€','').trim();
+        const val= parseFloat(tv?.replace('.','').replace(',','.')) || 0;
+        total += val;
+      }
+    });
+    if (inventoryTotalVal) inventoryTotalVal.textContent = `€${total.toFixed(2)}`;
+  }
+
+  // Delete inventory item function - attach to window for global access
+  window.deleteInventoryItem = async function(itemId) {
+    if (!confirm('Are you sure you want to delete this item? This action cannot be undone.')) {
+      return;
+    }
+
+    try {
+      const apiKey = window.CHEFCODE_CONFIG?.API_KEY;
+      if (!apiKey) {
+        alert('API key not configured');
+        return;
+      }
+
+      const response = await fetch('http://localhost:8000/api/inventory/delete', {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-API-Key': apiKey
+        },
+        body: JSON.stringify({ id: itemId })
+      });
+
+      if (response.ok) {
+        // Remove from local state
+        window.STATE.inventory = window.STATE.inventory.filter(item => item.id !== itemId);
+        window.renderInventory();
+        // No need for full sync after successful delete - local state is already updated
+        console.log('Item deleted successfully');
+      } else {
+        let errorMessage = 'Unknown error';
+        try {
+          const error = await response.json();
+          errorMessage = error.detail || error.message || 'Unknown error';
+        } catch (e) {
+          errorMessage = `Server error (${response.status}): ${response.statusText}`;
+        }
+        alert(`Failed to delete item: ${errorMessage}`);
+      }
+    } catch (error) {
+      console.error('Delete error:', error);
+      alert('Failed to delete item. Please try again.');
+    }
+  };
+
+  if (inventorySearch) inventorySearch.addEventListener('input', applyInventoryFilters);
+  if (categoryFilter)  categoryFilter.addEventListener('change', applyInventoryFilters);
+  if (expandTableBtn && inventoryTableCtr){
+    expandTableBtn.addEventListener('click', () => inventoryTableCtr.classList.toggle('expanded'));
+  }
+
+  // ---------- Recipes ----------
+  function renderIngredientsList(){
+    if (!recipeIngredientsList) return;
+    recipeIngredientsList.innerHTML = '';
+    currentRecipeIngredients.forEach((ing, i) => {
+      const li = document.createElement('li');
+      li.innerHTML = `<span>${ing.name} - ${ing.quantity} ${ing.unit}</span>
+                      <button class="remove-ingredient-btn" data-index="${i}">&times;</button>`;
+      recipeIngredientsList.appendChild(li);
+    });
+  }
+
+  function populateIngredientSelect(){
+    if (!ingredientSelect) return;
+    const current = ingredientSelect.value;
+    ingredientSelect.innerHTML = `<option value="" disabled selected>-- choose item --</option>`;
+    const seen = new Set();
+    window.STATE.inventory.forEach(it => {
+      if (seen.has(it.name)) return;
+      seen.add(it.name);
+      const opt = document.createElement('option');
+      opt.value = it.name; opt.textContent = it.name;
+      ingredientSelect.appendChild(opt);
+    });
+    if (current && seen.has(current)) ingredientSelect.value = current;
+    updateRecipeSelects(); // mantiene in sync Produzione
+  }
+
+  if (addIngredientBtn){
+    addIngredientBtn.addEventListener('click', () => {
+      const name = ingredientSelect?.value || '';
+      const qty  = parseFloat(ingredientQty?.value || '0');
+      const unit = ingredientUnit?.value || 'g';
+      if (!name || !qty){ alert('Seleziona ingrediente e quantità.'); return; }
+      currentRecipeIngredients.push({ name, quantity: qty, unit });
+      renderIngredientsList();
+      if (ingredientSelect) ingredientSelect.value = '';
+      if (ingredientQty)    ingredientQty.value = '';
+    });
+  }
+
+  if (recipeIngredientsList){
+    recipeIngredientsList.addEventListener('click', (e) => {
+      const btn = e.target.closest('.remove-ingredient-btn');
+      if (!btn) return;
+      const idx = parseInt(btn.dataset.index, 10);
+      if (!isNaN(idx)) currentRecipeIngredients.splice(idx, 1);
+      renderIngredientsList();
+    });
+  }
+
+  function updateRecipeSelects(){
+    if (!recipeSelectProd) return;
+    const current = recipeSelectProd.value;
+    recipeSelectProd.innerHTML = '<option value="" disabled selected>-- Choose a recipe --</option>';
+    Object.keys(window.STATE.recipes).forEach(name => {
+      const opt = document.createElement('option');
+      opt.value = name; opt.textContent = name;
+      recipeSelectProd.appendChild(opt);
+    });
+    if (window.STATE.recipes[current]) recipeSelectProd.value = current;
+  }
+    if (saveRecipeBtn) {
+  saveRecipeBtn.addEventListener('click', async () => {
+    const recipeName = (document.getElementById('recipe-name')?.value || '').trim();
+    if (!recipeName) { alert('Please enter a name for the recipe.'); return; }
+    if (!currentRecipeIngredients.length) { alert('Please add at least one ingredient.'); return; }
+
+    // Get yield data
+    const yieldQty = parseFloat(el('recipe-yield-qty')?.value || 0);
+    const yieldUnit = el('recipe-yield-unit')?.value || 'pz';
+
+    console.log(`💾 Saving recipe: ${recipeName} with yield:`, yieldQty > 0 ? `${yieldQty} ${yieldUnit}` : 'none');
+
+    // Salva nel motore usato dalla Production: STATE.recipes
+    // e usa il campo "qty" (non "quantity") perché la deduzione legge ing.qty
+    window.STATE.recipes[recipeName] = {
+      items: currentRecipeIngredients.map(i => ({
+        name: i.name,
+        qty:  parseFloat(i.quantity) || 0, // quantità per 1 batch
+        unit: i.unit
+      })),
+      // Save yield information
+      yield: yieldQty > 0 ? { qty: yieldQty, unit: yieldUnit } : null
+    };
+    
+    try {
+      await updateInventoryToBackend();
+    } catch (error) {
+      console.error('Failed to save recipe:', error);
+      return; // Don't continue if save failed
+    }
+
+    // Aggiorna il menu a tendina in Production
+    updateRecipeSelects();
+
+    // Feedback
+    let summary = `Recipe Saved: ${recipeName}\n\nIngredients:\n`;
+    window.STATE.recipes[recipeName].items.forEach(ing => {
+      summary += `- ${ing.name}: ${ing.qty} ${ing.unit}\n`;
+    });
+    alert(summary);
+
+    // Reset form ricetta
+    currentRecipeIngredients = [];
+    renderIngredientsList();
+    const rn = document.getElementById('recipe-name'); if (rn) rn.value = '';
+    const ri = document.getElementById('recipe-instructions'); if (ri) ri.value = '';
+    const yq = el('recipe-yield-qty'); if (yq) yq.value = '';
+    const yu = el('recipe-yield-unit'); if (yu) yu.value = 'pz';
+    if (ingredientSelect) ingredientSelect.value = '';
+    if (ingredientQty) ingredientQty.value = '';
+  });
+}
+   
+  // Primo allineamento selects
+  populateIngredientSelect();
+  updateRecipeSelects();
+
+  // ---------- Recipe Catalogue ----------
+  const recipeCatalogueBody = el('recipe-catalogue-body');
+  const recipeCatalogueEmpty = el('recipe-catalogue-empty');
+  const recipeSearchInput = el('recipe-search');
+
+  // Render recipe catalogue table
+  window.renderRecipeCatalogue = function() {
+    console.log('📖 Rendering recipe catalogue...');
+    if (!recipeCatalogueBody) {
+      console.warn('⚠️ Recipe catalogue body element not found');
+      return;
+    }
+    
+    recipeCatalogueBody.innerHTML = '';
+    const recipes = window.STATE.recipes || {};
+    const recipeNames = Object.keys(recipes);
+    
+    console.log(`Found ${recipeNames.length} recipes in STATE:`, recipeNames);
+    
+    // Show/hide empty state
+    if (recipeCatalogueEmpty) {
+      recipeCatalogueEmpty.style.display = recipeNames.length === 0 ? 'block' : 'none';
+    }
+    
+    if (recipeNames.length === 0) {
+      console.log('No recipes to display');
+      return;
+    }
+    
+    // Get search term
+    const searchTerm = recipeSearchInput?.value.toLowerCase() || '';
+    
+    recipeNames.forEach(recipeName => {
+      // Apply search filter
+      if (searchTerm && !recipeName.toLowerCase().includes(searchTerm)) {
+        return;
+      }
+      
+      const recipe = recipes[recipeName];
+      const ingredients = recipe.items || [];
+      const ingredientCount = ingredients.length;
+      
+      // Build full ingredients list for display
+      const ingredientsList = ingredients.map(ing => {
+        const qty = ing.qty !== undefined && ing.qty !== null ? ing.qty : '?';
+        const unit = ing.unit !== undefined && ing.unit !== null ? ing.unit : '';
+        return `<li><span class="ing-name">${window.escapeHtml(ing.name)}</span> <span class="ing-qty">${qty} ${unit}</span></li>`;
+      }).join('');
+      
+      // Get yield info
+      const yieldInfo = recipe.yield ? `${recipe.yield.qty} ${recipe.yield.unit}` : 'Not specified';
+      
+      // Create card element
+      const card = document.createElement('div');
+      card.className = 'recipe-card';
+      card.innerHTML = `
+        <div class="recipe-card-header">
+          <h4 class="recipe-card-title">${window.escapeHtml(recipeName)}</h4>
+          <span class="recipe-card-badge">${ingredientCount} ingredient${ingredientCount !== 1 ? 's' : ''}</span>
+        </div>
+        
+        <div class="recipe-card-body">
+          <div class="recipe-ingredients-section">
+            <h5><i class="fas fa-list"></i> Ingredients</h5>
+            <ul class="recipe-ingredients-list">
+              ${ingredientsList}
+            </ul>
+          </div>
+          
+          <div class="recipe-yield-section">
+            <i class="fas fa-utensils"></i>
+            <span class="yield-label">Yield:</span>
+            <span class="yield-value">${window.escapeHtml(yieldInfo)}</span>
+          </div>
+        </div>
+        
+        <div class="recipe-card-footer">
+          <button class="recipe-card-btn edit-recipe-btn" data-recipe="${window.escapeHtml(recipeName)}" title="Edit Recipe">
+            <i class="fas fa-pen"></i> Edit
+          </button>
+          <button class="recipe-card-btn delete-recipe-btn" data-recipe="${window.escapeHtml(recipeName)}" title="Delete Recipe">
+            <i class="fas fa-trash"></i> Delete
+          </button>
+        </div>
+      `;
+      recipeCatalogueBody.appendChild(card);
+    });
+  };
+
+  // Delete recipe
+  async function deleteRecipe(recipeName) {
+    if (!confirm(`Are you sure you want to delete the recipe "${recipeName}"?`)) {
+      return;
+    }
+    
+    console.log(`🗑️ Deleting recipe: ${recipeName}`);
+    delete window.STATE.recipes[recipeName];
+    
+    try {
+      await updateInventoryToBackend();
+      renderRecipeCatalogue();
+      updateRecipeSelects(); // Update dropdowns in production
+      alert(`Recipe "${recipeName}" has been deleted and saved to database.`);
+    } catch (error) {
+      console.error('Failed to delete recipe:', error);
+      // Recipe already deleted from STATE, but sync failed
+    }
+  }
+
+  // Edit recipe - navigate to add recipe page and populate form
+  function editRecipe(recipeName) {
+    const recipe = window.STATE.recipes[recipeName];
+    if (!recipe) return;
+    
+    // Store recipe name for editing
+    window.editingRecipeName = recipeName;
+    
+    // Navigate to add recipe page
+    const addRecipePage = el('add-recipe-content');
+    if (addRecipePage) {
+      // Clear current state
+      qa('.input-page').forEach(p => p.classList.remove('active'));
+      el('step-selection-page')?.classList.remove('active');
+      el('input-detail-page')?.classList.add('active');
+      addRecipePage.classList.add('active');
+      
+      // Populate form
+      const recipeNameInput = el('recipe-name');
+      if (recipeNameInput) {
+        recipeNameInput.value = recipeName;
+        recipeNameInput.disabled = true; // Don't allow name change during edit
+      }
+      
+      // Populate yield fields
+      const yieldQtyInput = el('recipe-yield-qty');
+      const yieldUnitInput = el('recipe-yield-unit');
+      if (recipe.yield) {
+        if (yieldQtyInput) yieldQtyInput.value = recipe.yield.qty || '';
+        if (yieldUnitInput) yieldUnitInput.value = recipe.yield.unit || 'pz';
+      } else {
+        if (yieldQtyInput) yieldQtyInput.value = '';
+        if (yieldUnitInput) yieldUnitInput.value = 'pz';
+      }
+      
+      // Populate ingredients
+      currentRecipeIngredients = recipe.items.map(ing => ({
+        name: ing.name,
+        quantity: ing.qty,
+        unit: ing.unit
+      }));
+      renderIngredientsList();
+      
+      // Change button text
+      if (saveRecipeBtn) {
+        saveRecipeBtn.innerHTML = '<i class="fas fa-save"></i> Update Recipe';
+      }
+      
+      alert(`Editing recipe: ${recipeName}\nModify ingredients and click "Update Recipe" to save changes.`);
+    }
+  }
+
+  // Handle edit/delete button clicks
+  if (recipeCatalogueBody) {
+    recipeCatalogueBody.addEventListener('click', (e) => {
+      const editBtn = e.target.closest('.edit-recipe-btn');
+      const deleteBtn = e.target.closest('.delete-recipe-btn');
+      
+      if (editBtn) {
+        const recipeName = editBtn.dataset.recipe;
+        editRecipe(recipeName);
+      } else if (deleteBtn) {
+        const recipeName = deleteBtn.dataset.recipe;
+        deleteRecipe(recipeName);
+      }
+    });
+  }
+
+  // Search recipes
+  if (recipeSearchInput) {
+    recipeSearchInput.addEventListener('input', () => {
+      renderRecipeCatalogue();
+    });
+  }
+
+  // Update save recipe button to handle edit mode
+  if (saveRecipeBtn) {
+    const originalClickHandler = saveRecipeBtn.onclick;
+    saveRecipeBtn.addEventListener('click', () => {
+      // After saving, reset edit mode
+      if (window.editingRecipeName) {
+        const recipeNameInput = el('recipe-name');
+        if (recipeNameInput) {
+          recipeNameInput.disabled = false;
+        }
+        delete window.editingRecipeName;
+        if (saveRecipeBtn) {
+          saveRecipeBtn.innerHTML = '<i class="fas fa-save"></i> Save Recipe';
+        }
+      }
+      
+      // Update catalogue if it's visible
+      setTimeout(() => {
+        renderRecipeCatalogue();
+      }, 100);
+    });
+  }
+
+// ---------- Production ----------
+  const renderProductionTasks = () => {
+    if (!todoTasksContainer || !completedTasksList) return;
+    // Tab To Do
+    todoTasksContainer.innerHTML = '<h4 class="tab-title">To Do</h4>';
+    // Tab Completed
+    completedTasksList.innerHTML = '<h4 class="tab-title">Completed</h4>';
+    window.productionTasks.forEach(task => {
+      const card = document.createElement('div');
+      card.className = 'task-card';
+      card.dataset.id = String(task.id);
+      card.innerHTML = `
+        <h5>${task.recipe} (${task.quantity})</h5>
+        <p>Assegnato a: ${task.assignedTo || '—'}</p>
+        <div class="task-card-footer">
+          ${task.status === 'todo' ? '<button class="task-action-btn" type="button">Convalida</button>' : '<span class="task-completed-label">Completata</span>'}
+        </div>
+      `;
+      if (task.status === 'todo') {
+        todoTasksContainer.appendChild(card);
+      } else if (task.status === 'completed') {
+        completedTasksList.appendChild(card);
+      }
+    });
+  };
+
+
+// ==== Helpers per deduzione inventario (unità + nomi) ====
+function ccNormUnit(u){
+  u = String(u || '').trim().toLowerCase();
+  if (u === 'l') u = 'lt';
+  if (u === 'gr') u = 'g';
+  if (u === 'pcs' || u === 'pc' || u === 'pz.') u = 'pz';
+  return u;
+}
+function ccConvertFactor(from, to){
+  from = ccNormUnit(from); to = ccNormUnit(to);
+  if (from === to) return 1;
+  if (from === 'kg' && to === 'g') return 1000;
+  if (from === 'g'  && to === 'kg') return 1/1000;
+  if (from === 'lt' && to === 'ml') return 1000;
+  if (from === 'ml' && to === 'lt') return 1/1000;
+  // equivalenza “di comodo” se tratti bottle/pezzi come unità contabili
+  if ((from === 'pz' && to === 'bt') || (from === 'bt' && to === 'pz')) return 1;
+  return null; // incompatibili
+}
+function ccNormName(s){ return String(s || '').trim().toLowerCase(); }
+function ccFindInventoryItemByName(name){
+  const wanted = ccNormName(name);
+  return window.STATE.inventory.find(it => ccNormName(it.name) === wanted) || null;
+}
+
+ function consumeInventoryForTask(task){
+  const r = window.STATE.recipes[task.recipe];
+  if (!r){ alert(`Ricetta non trovata: ${task.recipe}`); return; }
+
+  const batches = Number(task.quantity) || 1; // quante “unità ricetta” produci
+  let changed = false;
+  const skipped = [];
+
+  r.items.forEach(ing => {
+    const inv = ccFindInventoryItemByName(ing.name);
+    if (!inv){ skipped.push(`${ing.name} (non in inventario)`); return; }
+
+    const invU = ccNormUnit(inv.unit);
+    const ingU = ccNormUnit(ing.unit || invU);
+    const f = ccConvertFactor(ingU, invU);
+    if (f === null){ skipped.push(`${ing.name} (${ingU}→${invU} incompatibile)`); return; }
+
+    const perBatch = Number(ing.qty) || 0;
+    const toConsume = perBatch * batches * f;
+
+    inv.quantity = Math.max(0, (Number(inv.quantity) || 0) - toConsume);
+    changed = true;
+  });
+
+  if (changed){ updateInventoryToBackend(); renderInventory(); }
+  if (skipped.length){ console.warn('Ingredienti non scalati:', skipped); }
+}
+
+
+  function onTaskActionClick(e){
+    const btn = e.target.closest('.task-action-btn');
+    if (!btn) return;
+    const card = btn.closest('.task-card'); if (!card) return;
+    const id = Number(card.dataset.id);
+    const task = window.STATE.tasks.find(t => t.id === id);
+    if (!task) return;
+    if (task.status === 'todo'){ task.status = 'inprogress'; }
+    else if (task.status === 'inprogress'){ task.status = 'completed'; consumeInventoryForTask(task); }
+    renderInventory(); // Update inventory display after consumption
+    window.updateInventoryToBackend();
+    renderProductionTasks();
+  }
+
+  if (addTaskBtn) {
+  // evita comportamenti da "submit" nel caso in cui il bottone fosse dentro un form
+  addTaskBtn.setAttribute('type','button');
+
+    addTaskBtn.addEventListener('click', (e) => {
+    e.preventDefault();
+
+    const recipe = recipeSelectProd && recipeSelectProd.value;
+    const quantity = productionQty && productionQty.value;
+    const assignedToVal = assignTo && assignTo.value;
+    const initialStatus = (initialStatusSelect && initialStatusSelect.value) || 'todo';
+
+    if (!recipe || !quantity) {
+      alert('Please select a recipe and specify the quantity.');
+      return;
+    }
+
+    window.taskIdCounter += 1;
+    const newTask = {
+      id: window.taskIdCounter,
+      recipe,
+      quantity: Number(quantity),
+      assignedTo: assignedToVal || '',
+      status: (initialStatus === 'completed') ? 'completed' : 'todo'
+      
+    };
+// Se l'utente ha scelto "Completed", scala subito l'inventario
+if (initialStatus === 'completed') {
+  try {
+    consumeInventoryForTask(newTask);
+  } catch (e) {
+    console.warn('consume-on-create failed', e);
+  }
+}
+    window.productionTasks.push(newTask);
+    renderProductionTasks();
+
+    if (productionQty) productionQty.value = '';
+    if (recipeSelectProd) recipeSelectProd.value = '';
+    if (initialStatusSelect) initialStatusSelect.value = 'todo';
+  });
+
+}
+
+
+// Gestione click su To Do: convalida task
+if (todoTasksContainer) {
+  todoTasksContainer.addEventListener('click', function(event) {
+    const btn = event.target.closest('button.task-action-btn');
+    if (!btn) return;
+    const card = btn.closest('.task-card');
+    const taskId = parseInt(card.dataset.id, 10);
+    const task = window.productionTasks.find(t => t.id === taskId);
+    if (!task) return;
+    // Deduzione ingredienti SOLO ora
+    try { consumeInventoryForTask(task); } catch(e){}
+    task.status = 'completed';
+    renderProductionTasks();
+  });
+}
+
+// Tab switching logic
+if (typeof prodTabBtns !== 'undefined' && prodTabBtns.length) {
+  prodTabBtns.forEach(btn => {
+    btn.addEventListener('click', function() {
+      prodTabBtns.forEach(b => b.classList.remove('active'));
+      prodTabPanels.forEach(p => p.classList.remove('active'));
+      btn.classList.add('active');
+      const tab = btn.getAttribute('data-tab');
+      if (tab === 'todo') {
+        todoTasksContainer.classList.add('active');
+      } else if (tab === 'completed') {
+        completedTasksList.classList.add('active');
+      }
+    });
+  });
+}
+
+ // Inizializza tasks view e riallinea contatore
+try {
+  const maxExisting = window.STATE.tasks.reduce((m, t) => {
+    const id = Number(t?.id) || 0;
+    return id > m ? id : m;
+  }, 0);
+  const current = Number(window.STATE.nextTaskId) || 1;
+  window.STATE.nextTaskId = Math.max(current, maxExisting + 1);
+} catch (e) {
+  console.warn('Reindex nextTaskId failed', e);
+  window.STATE.nextTaskId = Number(window.STATE.nextTaskId) || 1;
+}
+
+  renderProductionTasks();
+
+  // ---------- Back buttons ----------
+  qa('.back-button').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const target = btn.dataset.backTarget || 'step-selection-page';
+      showPage(target);
+    });
+  });
+
+  // ---------- Dev reset ----------
+  window.addEventListener('keydown', (e) => {
+    if (e.ctrlKey && e.altKey && String(e.key).toLowerCase() === 'r'){
+      if (confirm('Reset ChefCode data?')){
+        localStorage.removeItem(STORAGE_KEY);
+        location.reload();
+      }
+    }
+  });
+});
+/* ===== CHEFCODE PATCH BACK-RESTORE 1.0 — START ===== */
+(function(){
+  const home = document.getElementById('step-selection-page');
+  const inputDetail = document.getElementById('input-detail-page');
+  const homeGrid = home ? home.querySelector('.step-buttons-grid') : null;
+  if (!home || !inputDetail || !homeGrid) return;
+
+  // Snapshot dello stato iniziale (quello giusto che vedi all'apertura)
+  const ORIGINAL_CLASS = homeGrid.className;
+  const HAD_STYLE = homeGrid.hasAttribute('style');
+  const ORIGINAL_STYLE = homeGrid.getAttribute('style');
+
+  function restoreHome(){
+    // 1) Mostra la home, nascondi area dettagli e qualsiasi sotto-pagina ancora attiva
+    document.querySelectorAll('#input-pages-container .input-page.active')
+      .forEach(p => p.classList.remove('active'));
+    inputDetail.classList.remove('active');
+    home.classList.add('active');
+
+    // 2) Ripristina la griglia ESATTAMENTE come all'avvio
+    homeGrid.className = ORIGINAL_CLASS;
+    if (HAD_STYLE) {
+      homeGrid.setAttribute('style', ORIGINAL_STYLE || '');
+    } else {
+      homeGrid.removeAttribute('style');
+    }
+    // 3) Pulisci eventuali proprietà inline appiccicate da patch vecchie
+    if (homeGrid.style) {
+      [
+        'grid-template-columns','grid-template-rows','width',
+        'margin-left','margin-right','left','right','transform',
+        'justify-content','max-width'
+      ].forEach(prop => homeGrid.style.removeProperty(prop));
+    }
+  }
+
+  // Intercetta TUTTI i "Back" e, dopo che i tuoi handler hanno girato, ripristina la home
+  document.addEventListener('click', (e) => {
+    const back = e.target.closest('.back-button');
+    if (!back) return;
+    setTimeout(() => {
+      const targetId = back.getAttribute('data-back-target') || '';
+      if (targetId === 'step-selection-page') restoreHome();
+    }, 0);
+  }, true);
+  /* ===== CHEFCODE PATCH HOME-RESTORE 1.0 — START ===== */
+(function(){
+  const home = document.getElementById('step-selection-page');
+  const inputDetail = document.getElementById('input-detail-page');
+  const grid = home ? home.querySelector('.step-buttons-grid') : null;
+  const homeBtn = document.getElementById('chefcode-logo-btn');
+  if (!home || !inputDetail || !grid || !homeBtn) return;
+
+  // Prendiamo uno snapshot della griglia com'è all'apertura (stato "buono")
+  const ORIGINAL_CLASS = grid.className;
+  const HAD_STYLE = grid.hasAttribute('style');
+  const ORIGINAL_STYLE = grid.getAttribute('style');
+
+  function cleanGridToInitial(){
+    // Classi originali
+    grid.className = ORIGINAL_CLASS;
+
+    // Stile inline: se all’inizio non c’era, lo togliamo; altrimenti rimettiamo il valore originale
+    if (HAD_STYLE) grid.setAttribute('style', ORIGINAL_STYLE || '');
+    else grid.removeAttribute('style');
+
+    // Rimuovi qualsiasi proprietà inline residua che possa decentrarla o rimpicciolirla
+    if (grid.style){
+      [
+        'grid-template-columns','grid-template-rows','width','max-width',
+        'margin-left','margin-right','left','right','transform','justify-content'
+      ].forEach(p => grid.style.removeProperty(p));
+    }
+  }
+
+  function restoreHome(){
+    // Chiudi eventuali sotto-pagine attive
+    document.querySelectorAll('#input-pages-container .input-page.active')
+      .forEach(p => p.classList.remove('active'));
+    inputDetail.classList.remove('active');
+    home.classList.add('active');
+
+    // Ripristina la griglia allo stato iniziale (come al primo load)
+    cleanGridToInitial();
+  }
+
+  // Quando clicchi la "casetta", lasciamo agire il tuo handler e poi ripristiniamo (come fatto per il Back)
+  homeBtn.addEventListener('click', () => {
+    setTimeout(restoreHome, 0);
+  }, true);
+})();
+
+  // ===== OCR MODAL FUNCTIONALITY =====
+  class OCRModal {
+    constructor() {
+      this.modal = document.getElementById('ocr-modal');
+      this.currentStream = null;
+      this.currentFile = null;
+      this.ocrResults = null;
+      this.currentScreen = 'selection';
+      
+      this.initializeEventListeners();
+    }
+
+    initializeEventListeners() {
+      // Modal open/close
+      document.addEventListener('click', (e) => {
+        if (e.target.closest('[data-action="invoice-photo"]')) {
+          e.preventDefault();
+          this.openModal();
+        }
+      });
+
+      // Close modal
+      document.getElementById('ocr-modal-close-btn').addEventListener('click', () => {
+        this.closeModal();
+      });
+
+      // Close on overlay click
+      this.modal.addEventListener('click', (e) => {
+        if (e.target === this.modal) {
+          this.closeModal();
+        }
+      });
+
+      // Selection screen
+      document.getElementById('camera-option').addEventListener('click', () => {
+        this.showCameraScreen();
+      });
+
+      document.getElementById('upload-option').addEventListener('click', () => {
+        this.showFileUpload();
+      });
+
+      // Camera screen
+      document.getElementById('ocr-camera-back').addEventListener('click', () => {
+        this.showSelectionScreen();
+      });
+
+      document.getElementById('ocr-camera-capture').addEventListener('click', () => {
+        this.capturePhoto();
+      });
+
+      document.getElementById('ocr-camera-switch').addEventListener('click', () => {
+        this.switchCamera();
+      });
+
+      // Preview screen
+      document.getElementById('ocr-preview-back').addEventListener('click', () => {
+        this.showCameraScreen();
+      });
+
+      document.getElementById('ocr-preview-process').addEventListener('click', () => {
+        this.processInvoice();
+      });
+
+      // Results screen
+      document.getElementById('ocr-results-back').addEventListener('click', () => {
+        this.showSelectionScreen();
+      });
+
+      document.getElementById('ocr-results-confirm').addEventListener('click', () => {
+        this.confirmAndAddToInventory();
+      });
+
+      // Success screen
+      document.getElementById('ocr-success-close').addEventListener('click', () => {
+        this.closeModal();
+      });
+    }
+
+    openModal() {
+      this.modal.style.display = 'flex';
+      setTimeout(() => {
+        this.modal.classList.add('show');
+      }, 10);
+      document.body.style.overflow = 'hidden';
+      this.showSelectionScreen();
+    }
+
+    closeModal() {
+      this.modal.classList.remove('show');
+      setTimeout(() => {
+        this.modal.style.display = 'none';
+        document.body.style.overflow = '';
+        this.cleanup();
+      }, 300);
+    }
+
+    showScreen(screenId) {
+      // Hide all screens
+      document.querySelectorAll('.ocr-screen').forEach(screen => {
+        screen.style.display = 'none';
+      });
+      
+      // Show target screen
+      document.getElementById(screenId).style.display = 'flex';
+      this.currentScreen = screenId;
+    }
+
+    showSelectionScreen() {
+      this.showScreen('ocr-selection-screen');
+      this.cleanup();
+    }
+
+    showCameraScreen() {
+      this.showScreen('ocr-camera-screen');
+      this.initializeCamera();
+    }
+
+    showPreviewScreen() {
+      this.showScreen('ocr-preview-screen');
+    }
+
+    showProcessingScreen() {
+      this.showScreen('ocr-processing-screen');
+    }
+
+    showResultsScreen() {
+      this.showScreen('ocr-results-screen');
+    }
+
+    showSuccessScreen() {
+      this.showScreen('ocr-success-screen');
+    }
+
+    async initializeCamera() {
+      try {
+        this.currentStream = await navigator.mediaDevices.getUserMedia({
+          video: { 
+            facingMode: 'environment',
+            width: { ideal: 1280 },
+            height: { ideal: 720 }
+          }
+        });
+        
+        const video = document.getElementById('ocr-camera-preview');
+        video.srcObject = this.currentStream;
+        video.play();
+      } catch (error) {
+        console.error('Camera access denied:', error);
+        alert('Camera access is required to take photos. Please allow camera access and try again.');
+        this.showSelectionScreen();
+      }
+    }
+
+    switchCamera() {
+      // Simple camera switch - in a real implementation, you'd cycle through available cameras
+      if (this.currentStream) {
+        this.currentStream.getTracks().forEach(track => track.stop());
+      }
+      this.initializeCamera();
+    }
+
+    capturePhoto() {
+      const video = document.getElementById('ocr-camera-preview');
+      const canvas = document.createElement('canvas');
+      const context = canvas.getContext('2d');
+      
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      context.drawImage(video, 0, 0);
+      
+      canvas.toBlob((blob) => {
+        this.currentFile = new File([blob], 'captured-photo.jpg', { type: 'image/jpeg' });
+        this.showPreviewScreen();
+        
+        // Display preview
+        const previewImg = document.getElementById('ocr-preview-image');
+        previewImg.src = URL.createObjectURL(blob);
+      }, 'image/jpeg', 0.8);
+    }
+
+    showFileUpload() {
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = 'image/*,.pdf';
+      input.style.display = 'none';
+      
+      input.onchange = (e) => {
+        const file = e.target.files[0];
+        if (file) {
+          this.currentFile = file;
+          this.showPreviewScreen();
+          
+          // Display preview
+          const previewImg = document.getElementById('ocr-preview-image');
+          if (file.type.startsWith('image/')) {
+            previewImg.src = URL.createObjectURL(file);
+          } else {
+            previewImg.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2Y4ZjlmYSIvPjx0ZXh0IHg9IjUwIiB5PSI1MCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0IiBmaWxsPSIjN2Y4YzhkIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkeT0iLjNlbSI+UERGIEZpbGU8L3RleHQ+PC9zdmc+';
+          }
+        }
+      };
+      
+      document.body.appendChild(input);
+      input.click();
+      document.body.removeChild(input);
+    }
+
+    async processInvoice() {
+      if (!this.currentFile) {
+        alert('No file selected');
+        return;
+      }
+
+      this.showProcessingScreen();
+
+      try {
+        const formData = new FormData();
+        formData.append('file', this.currentFile);
+        
+        const apiKey = window.CHEFCODE_CONFIG?.API_KEY || '';
+        const response = await fetch('http://localhost:8000/api/ocr-invoice', {
+          method: 'POST',
+          headers: {
+            'X-API-Key': apiKey
+          },
+          body: formData
+        });
+
+        const data = await response.json();
+        
+        // Handle service unavailable (503) - OCR not configured
+        if (response.status === 503) {
+          alert('⚠️ OCR Service Not Available\n\n' +
+                'The OCR feature requires Google Cloud credentials.\n\n' +
+                'Please use Manual Input instead or contact your administrator to configure:\n' +
+                '• Google Cloud Project ID\n' +
+                '• Document AI Processor\n' +
+                '• Gemini API Key');
+          this.showSelectionScreen();
+          return;
+        }
+        
+        if (!response.ok) {
+          throw new Error(data.detail || `Server error: ${response.status}`);
+        }
+        
+        if (data.status === 'success' && Array.isArray(data.items)) {
+          this.ocrResults = data;
+          this.displayResults(data);
+          this.showResultsScreen();
+        } else {
+          throw new Error(data.message || 'OCR processing failed');
+        }
+      } catch (error) {
+        console.error('OCR processing error:', error);
+        alert(`OCR processing failed: ${error.message}`);
+        this.showSelectionScreen();
+      }
+    }
+
+    displayResults(data) {
+      // Update metadata with null checks
+      const supplierElement = document.getElementById('ocr-supplier-name');
+      if (supplierElement) {
+        supplierElement.textContent = `Supplier: ${data.supplier || 'Unknown'}`;
+      }
+      
+      const dateElement = document.getElementById('ocr-invoice-date');
+      if (dateElement) {
+        dateElement.textContent = `Date: ${data.date || 'Unknown'}`;
+      }
+
+      // Populate results table with EDITABLE cells
+      const tbody = document.getElementById('ocr-results-tbody');
+      if (tbody && Array.isArray(data.items)) {
+        tbody.innerHTML = '';
+
+        data.items.forEach((item, index) => {
+          const row = document.createElement('tr');
+          row.dataset.index = index;
+          row.innerHTML = `
+            <td><input type="text" class="ocr-edit-input" data-field="name" value="${window.escapeHtml(item.name || 'Unknown')}" /></td>
+            <td><input type="number" class="ocr-edit-input ocr-number-input" data-field="quantity" value="${item.quantity || 0}" step="0.01" /></td>
+            <td>
+              <select class="ocr-edit-input ocr-select-input" data-field="unit">
+                <option value="kg" ${item.unit === 'kg' ? 'selected' : ''}>kg</option>
+                <option value="g" ${item.unit === 'g' ? 'selected' : ''}>g</option>
+                <option value="lt" ${item.unit === 'lt' ? 'selected' : ''}>lt</option>
+                <option value="ml" ${item.unit === 'ml' ? 'selected' : ''}>ml</option>
+                <option value="pz" ${item.unit === 'pz' || !item.unit ? 'selected' : ''}>pz</option>
+                <option value="bt" ${item.unit === 'bt' ? 'selected' : ''}>bt</option>
+              </select>
+            </td>
+            <td><input type="number" class="ocr-edit-input ocr-number-input" data-field="price" value="${item.price || 0}" step="0.01" /></td>
+            <td><input type="text" class="ocr-edit-input" data-field="lot_number" value="${window.escapeHtml(item.lot_number || '')}" placeholder="Enter lot #" /></td>
+            <td><input type="date" class="ocr-edit-input ocr-date-input" data-field="expiry_date" value="${item.expiry_date || ''}" placeholder="YYYY-MM-DD" /></td>
+          `;
+          tbody.appendChild(row);
+        });
+
+        // Add event listeners to sync changes back to data
+        tbody.querySelectorAll('.ocr-edit-input').forEach(input => {
+          input.addEventListener('change', (e) => {
+            const row = e.target.closest('tr');
+            const index = parseInt(row.dataset.index);
+            const field = e.target.dataset.field;
+            let value = e.target.value;
+            
+            // Convert numeric fields
+            if (field === 'quantity' || field === 'price') {
+              value = parseFloat(value) || 0;
+            }
+            
+            // Update the data object
+            if (this.ocrResults && this.ocrResults.items[index]) {
+              this.ocrResults.items[index][field] = value;
+            }
+          });
+        });
+      }
+    }
+
+    async confirmAndAddToInventory() {
+      if (!this.ocrResults || !this.ocrResults.items) {
+        alert('No OCR results to add');
+        return;
+      }
+
+      try {
+        // Add items to inventory
+        let addedCount = 0;
+        this.ocrResults.items.forEach(item => {
+          window.addOrMergeInventoryItem({
+            name: item.name,
+            unit: item.unit,
+            quantity: item.quantity,
+            category: item.category || 'Other',
+            price: item.price,
+            lot_number: item.lot_number || '',
+            expiry_date: item.expiry_date || ''
+          });
+          addedCount++;
+        });
+
+        // Sync to backend
+        await window.updateInventoryToBackend();
+        window.renderInventory();
+
+        this.showSuccessScreen();
+      } catch (error) {
+        console.error('Error adding to inventory:', error);
+        alert(`Failed to add items to inventory: ${error.message}`);
+      }
+    }
+
+    cleanup() {
+      // Stop camera stream
+      if (this.currentStream) {
+        this.currentStream.getTracks().forEach(track => track.stop());
+        this.currentStream = null;
+      }
+
+      // Clear file references
+      this.currentFile = null;
+      this.ocrResults = null;
+
+      // Clear preview image
+      const previewImg = document.getElementById('ocr-preview-image');
+      if (previewImg.src && previewImg.src.startsWith('blob:')) {
+        URL.revokeObjectURL(previewImg.src);
+        previewImg.src = '';
+      }
+    }
+
+  }
+
+  // Global utility function for HTML escaping
+  window.escapeHtml = function(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  };
+
+  // Initialize OCR Modal
+  const ocrModal = new OCRModal();
+
+  // QuickAddPopup removed - ready for new AI toolbar implementation
+  
+  // Make OCR modal globally accessible
+  window.ocrModal = ocrModal;
+
+})();
+window.CHEFCODE_RESET = () => { alert('ChefCode storage azzerato'); location.reload(); };

frontend/style.css

@@ -0,0 +1,3251 @@
+.tab-title {
+  margin: 0 0 12px 0;
+  font-size: 1.1em;
+  color: #0078d7;
+  text-align: left;
+  border-bottom: 1px solid #e0e0e0;
+  padding-bottom: 4px;
+}
+/* Mostra i tab Production SOLO nella pagina Production attiva */
+.production-tabs,
+.production-tasks-tabbed {
+  display: none;
+}
+#production-content.active .production-tabs {
+  display: flex;
+}
+#production-content.active .production-tasks-tabbed {
+  display: block;
+}
+/* --- Production Tabs --- */
+.production-tabs {
+  display: flex;
+  gap: 8px;
+  margin: 16px 0 8px 0;
+  justify-content: center;
+}
+.prod-tab-btn {
+  background: #f5f5f5;
+  border: 1px solid #ccc;
+  border-radius: 6px 6px 0 0;
+  padding: 8px 24px;
+  cursor: pointer;
+  font-weight: bold;
+  color: #333;
+  outline: none;
+  transition: background 0.2s, color 0.2s;
+}
+.prod-tab-btn.active {
+  background: #fff;
+  color: #0078d7;
+  border-bottom: 1px solid #fff;
+}
+.production-tasks-tabbed {
+  display: flex;
+  flex-direction: row;
+  gap: 24px;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 0 8px 8px 8px;
+  min-height: 180px;
+  padding: 16px 8px 8px 8px;
+  justify-content: space-between;
+}
+.prod-tab-panel {
+  flex: 1 1 0;
+  display: flex;
+  #voice-footer {
+    padding: 8px 0;
+    font-size: 0.95em;
+  }
+  #voice-btn {
+    background: linear-gradient(145deg, #ffffff, #e8e8e8);
+    border: 2px solid #ffffff;
+    color: #2c3e50;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    transition: all 0.3s ease;
+    cursor: pointer;
+  }
+  
+  #voice-btn:hover {
+    background: linear-gradient(145deg, #f8f9fa, #ffffff);
+    border-color: #a9cce3;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+    color: #1e3a8a;
+  }
+  
+  #voice-btn:active {
+    transform: translateY(0px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  }
+  
+  #voice-btn.recording {
+    background: linear-gradient(145deg, #ff6b6b, #ff5252);
+    border-color: #ff4444;
+    color: #ffffff;
+    animation: pulse 1.5s infinite;
+  }
+  
+  @keyframes pulse {
+    0% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(255, 107, 107, 0.7); }
+    70% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 10px rgba(255, 107, 107, 0); }
+    100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(255, 107, 107, 0); }
+  }
+  #voice-mic-icon {
+    font-size: 1.7em;
+  }
+  flex-direction: column;
+  min-width: 0;
+}
+.task-list .task-card { margin-bottom: 12px; }
+.task-card-footer { margin-top: 8px; }
+.task-completed-label { color: #28a745; font-weight: bold; }
+/* General Styles */
+body {
+    font-family: 'Roboto', sans-serif;
+    margin: 0;
+    background-color: #f0f2f5; 
+    color: #34495e;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+/* Scrollbar personalizzato per una migliore UX */
+.inventory-table-container::-webkit-scrollbar,
+.main-container::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+.inventory-table-container::-webkit-scrollbar-track,
+.main-container::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+}
+
+.inventory-table-container::-webkit-scrollbar-thumb,
+.main-container::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 4px;
+}
+
+.inventory-table-container::-webkit-scrollbar-thumb:hover,
+.main-container::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+}
+
+/* Header */
+.header {
+    background-color: #2E4E6F;
+    color: #ffffff;
+    padding: 15px 30px;
+    align-items: center;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+}
+.header-left { justify-self: start; }
+.header-center { justify-self: center; }
+.header-right {
+    justify-self: end;
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+.logo { font-size: 30px; font-weight: 700; color: #ffffff; letter-spacing: 0.5px; margin: 0; }
+.home-button { background: none; border: none; color: #ffffff; font-size: 26px; cursor: pointer; transition: color 0.3s ease; padding: 0; }
+.home-button:hover { color: #a9cce3; }
+
+/* Account Menu */
+.account-menu { position: relative; display: inline-block; }
+.account-button {
+    background-color: rgba(255,255,255,0.1); color: #ffffff;
+    border: 1px solid rgba(255,255,255,0.2); padding: 10px 20px;
+    border-radius: 25px; cursor: pointer; font-size: 16px;
+    display: flex; align-items: center; transition: background-color 0.3s ease;
+}
+.account-button:hover { background-color: rgba(255,255,255,0.2); }
+.account-button .arrow-down { margin-left: 8px; font-size: 12px; }
+.dropdown-content {
+    display: none; position: absolute; background-color: #ffffff;
+    min-width: 180px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 100; border-radius: 8px; right: 0; top: 100%;
+    margin-top: 10px; overflow: hidden; border: 1px solid #e0e0e0;
+}
+.dropdown-content a { color: #3d3d3d; padding: 12px 16px; text-decoration: none; display: block; transition: all 0.2s ease; }
+.dropdown-content a:hover { background-color: #f0f2f5; color: #2E4E6F; }
+.account-menu .dropdown-content.show { display: block; }
+
+
+/* Page Layout */
+.main-container { 
+    flex: 1; 
+    padding: 30px; 
+    display: flex; 
+    justify-content: center;
+    overflow-y: auto;
+    min-height: calc(100vh - 200px); /* Garantisce spazio sufficiente per lo scroll */
+}
+.page-section {
+    width: 100%;
+    max-width: 1100px;
+    text-align: center;
+    box-sizing: border-box;
+    display: none;
+    opacity: 0;
+    padding-bottom: 40px; /* Spazio extra per il footer */
+    transform: translateY(10px);
+    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+}
+.page-section.active { display: block; opacity: 1; transform: translateY(0); }
+#input-detail-page { text-align: left; }
+#input-pages-container { position: relative; }
+
+.input-page {
+    background-color: #ffffff;
+    border-radius: 12px;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
+    padding: 40px;
+    display: none;
+    flex-direction: column;
+    opacity: 0;
+    transition: opacity 0.4s ease-out;
+}
+.input-page.active { display: flex; opacity: 1; z-index: 10; }
+
+/* Page Headers */
+.page-header-with-back {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+    gap: 15px;
+    margin-bottom: 25px;
+    border-bottom: 2px solid #e0e0e0;
+    padding-bottom: 15px;
+    flex-shrink: 0;
+    width: 100%;
+}
+.page-header-with-back h3 {
+    margin: 0;
+    color: #2E4E6F;
+    font-size: 28px;
+    font-weight: 700;
+    text-align: left;
+}
+.back-button {
+    background-color: #7b8a9b; color: #ffffff; border: none;
+    padding: 10px 18px; border-radius: 25px; cursor: pointer;
+    font-size: 16px; display: flex; align-items: center; gap: 8px;
+    transition: background-color 0.3s ease;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+.back-button:hover { background-color: #5c6a79; }
+
+/* Big Step Buttons */
+.step-buttons-grid, .goods-in-buttons-grid {
+    /* === HOME DASHBOARD 4×2 centrata (solo per la home) === */
+#step-selection-page .step-buttons-grid {
+  /* riempi orizzontalmente ma con un tetto, così si può centrare */
+  width: 100%;
+  max-width: 1100px;             /* uguale alla max-width della .page-section */
+  margin-inline: auto;           /* ⬅️ QUESTA riga la centra */
+
+  /* 4 colonne fisse su desktop (rettangolo 4×2) */
+  display: grid;                 /* non inline-grid qui: meglio grid pieno */
+  grid-template-columns: repeat(4, 1fr);
+  gap: 25px;
+}
+
+/* Tablet: 2 colonne centrate */
+@media (max-width: 1200px) {
+  #step-selection-page .step-buttons-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* Mobile: 1 colonna centrata */
+@media (max-width: 768px) {
+  #step-selection-page .step-buttons-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+    display: inline-grid; 
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 25px;
+    width: 100%;
+}
+.big-step-button {
+    background-color: #ffffff; border: 1px solid #e0e0e0;
+    color: #34495e; padding: 25px 20px; border-radius: 8px;
+    font-size: 18px; font-weight: 700; text-align: center;
+    cursor: pointer; transition: all 0.3s ease; display: flex;
+    flex-direction: column; align-items: center; justify-content: center;
+    min-height: 150px; box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+}
+
+.big-step-button span {
+    display: block;
+    text-align: center;
+    width: 100%;
+    line-height: 1.2;
+}
+.big-step-button i { 
+    font-size: 45px; 
+    margin-bottom: 12px; 
+    margin-top: 5px;
+    color: #2E4E6F; 
+    transition: color 0.3s ease;
+    display: block;
+    text-align: center;
+    width: 100%;
+}
+.big-step-button:hover {
+    transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.1);
+    border-color: #e67e22;
+}
+.big-step-button:hover i { color: #e67e22; }
+
+/* Manual Form Styles */
+.manual-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
+.form-group { display: flex; flex-direction: column; }
+.form-group.full-width { grid-column: 1 / -1; }
+.form-group label { margin-bottom: 8px; font-weight: 600; color: #2E4E6F; font-size: 14px; text-align: left; }
+.form-group input, .form-group select, .form-group textarea {
+    width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 8px;
+    background-color: #f8f9fa; font-size: 16px; box-sizing: border-box;
+    transition: border-color 0.3s, box-shadow 0.3s;
+    font-family: 'Roboto', sans-serif;
+}
+.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
+    outline: none; border-color: #2E4E6F;
+    box-shadow: 0 0 0 3px rgba(46, 78, 111, 0.2);
+}
+.submit-btn {
+    width: 100%; padding: 15px; border: none; border-radius: 8px; background-color: #27ae60;
+    color: white; font-size: 18px; font-weight: 600; cursor: pointer; transition: all 0.3s;
+    display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px;
+}
+.submit-btn:hover { background-color: #219150; transform: translateY(-2px); }
+
+/* --- STILI PAGINE SPECIFICHE --- */
+.inventory-controls { display: flex; gap: 15px; margin-bottom: 20px; align-items: center; }
+.inventory-controls input[type="search"], .inventory-controls select { padding: 10px; border: 1px solid #ccc; border-radius: 8px; font-size: 14px; }
+.inventory-controls input[type="search"] { flex-grow: 1; }
+.icon-btn {
+    background: #f0f2f5; border: 1px solid #ccc; color: #555;
+    padding: 0; width: 40px; height: 40px; border-radius: 8px;
+    cursor: pointer; font-size: 16px; transition: all 0.2s ease;
+}
+.icon-btn:hover { background-color: #e0e0e0; border-color: #aaa; }
+
+.inventory-table-container.collapsed-view {
+    max-height: 250px;
+}
+.inventory-table-container { 
+    max-height: 400px; 
+    overflow-y: auto; 
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    -webkit-overflow-scrolling: touch;
+}
+
+.inventory-table-container table { 
+    width: 100%; 
+    border-collapse: collapse; 
+}
+
+.inventory-table-container th, .inventory-table-container td { 
+    padding: 12px 15px; 
+    text-align: left; 
+    border-bottom: 1px solid #ecf0f1; 
+}
+
+.inventory-table-container thead th { 
+    background-color: #ecf0f1; 
+    color: #34495e; 
+    font-weight: 600; 
+    font-size: 14px;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+.inventory-summary {
+    margin-top: 20px;
+    padding: 15px 20px;
+    background-color: #e9ecef;
+    border-radius: 8px;
+    text-align: right;
+}
+.inventory-summary h4 { margin: 0; font-size: 18px; color: #2c3e50; font-weight: 500; }
+.inventory-summary span { font-weight: 700; margin-left: 15px; }
+
+#camera-simulation-page, #voice-input-page-content { align-items: center; text-align: center; }
+.camera-preview-container {
+    width: 100%; max-width: 400px; margin-bottom: 20px;
+    aspect-ratio: 1 / 1; display: flex; justify-content: center;
+    align-items: center; background-color: #34495e; border-radius: 10px;
+}
+.camera-viewfinder { width: 90%; height: 90%; border: 2px dashed #ffffff; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #ffffff; }
+.camera-viewfinder i { font-size: 80px; margin-bottom: 15px; }
+.camera-controls { display: flex; justify-content: center; gap: 20px; width: 100%; }
+.input-btn {
+    background-color: #e67e22; color: white; border: none;
+    padding: 12px 25px; border-radius: 8px; cursor: pointer;
+    font-size: 16px; font-weight: 600; transition: all 0.3s;
+    display: flex; align-items: center; gap: 8px; white-space: nowrap;
+}
+.input-btn:hover { background-color: #d35400; transform: translateY(-2px); }
+
+.voice-input-container { display: flex; flex-direction: column; align-items: center; gap: 30px; margin-top: 50px; flex-grow: 1; justify-content: center; text-align: center; }
+.voice-mic-container { display: flex; flex-direction: column; align-items: center; gap: 15px; }
+#microphone-btn { background-color: #3498db; color: #ffffff; border-radius: 50%; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.2); border: none; cursor: pointer; }
+#microphone-btn i { font-size: 50px; color: #ffffff; }
+#microphone-btn:hover { background-color: #2980b9; transform: scale(1.05); }
+#microphone-btn.recording { background-color: #c0392b; animation: pulse-red 1.5s infinite; }
+#mic-label { font-size: 16px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: 0.5px; }
+.output-section { background-color: #eaf6ec; border-left: 5px solid #27ae60; padding: 25px; border-radius: 8px; margin-top: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); text-align: left; flex-shrink: 0; }
+.output-section h4 { color: #27ae60; font-size: 20px; margin-top: 0; margin-bottom: 15px; font-weight: 600;}
+@keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.7); } 70% { box-shadow: 0 0 0 20px rgba(192, 57, 43, 0); } 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); } }
+
+/* --- STILI DASHBOARD --- */
+#kitchen-dashboard-content,
+#management-dashboard-content { background-color: transparent; padding: 0; box-shadow: none; }
+#kitchen-dashboard-content .page-header-with-back,
+#management-dashboard-content .page-header-with-back { padding: 0 0 15px 0; margin: 0 0 20px 0; border-color: #dce1e6; }
+.new-dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
+.new-dashboard-grid.kitchen-dash { grid-template-columns: 1fr 1fr; }
+.new-dash-card { background-color: #ffffff; border-radius: 8px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: 1px solid #e0e0e0; text-align: left; display: flex; flex-direction: column; }
+.new-dash-card.full-width { grid-column: 1 / -1; }
+.new-dash-card.tall { grid-row: span 2; }
+.new-card-title { margin: 0 0 20px 0; font-size: 16px; font-weight: 700; color: #2E4E6F; flex-shrink: 0; }
+.kpi-card { text-align: center; justify-content: center; }
+.kpi-title { font-size: 14px; color: #7f8c8d; margin: 0 0 5px 0; font-weight: 700; text-transform: uppercase; }
+.kpi-amount { font-size: 36px; color: #2c3e50; margin: 0; font-weight: 700; }
+.kpi-change { font-size: 14px; }
+.kpi-change.up { color: #27ae60; }
+.kpi-change.down { color: #c0392b; }
+.bar-chart-v { display: flex; justify-content: space-around; align-items: flex-end; width: 100%; flex-grow: 1; }
+.bar-wrapper { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
+.bar-chart-v .bar { width: 25px; background-color: #3498db; border-radius: 4px 4px 0 0; }
+.bar-label-month { font-size: 12px; color: #7f8c8d; margin-top: 6px; }
+.bar-chart-h { display: flex; flex-direction: column; gap: 15px; flex-grow: 1; justify-content: center; }
+.bar-item { display: flex; align-items: center; gap: 10px; font-size: 14px; }
+.bar-label { width: 70px; color: #555; }
+.bar-bg { flex-grow: 1; background-color: #ecf0f1; border-radius: 4px; height: 20px; }
+.bar-fg { height: 100%; border-radius: 4px; }
+.bar-perc { font-weight: 700; width: 35px; text-align: right; }
+.bar-fg.food { background-color: #f39c12; }
+.bar-fg.beverage { background-color: #16a085; }
+.bar-fg.dessert { background-color: #27ae60; }
+.bar-fg.other { background-color: #7f8c8d; }
+.prep-list-table, .hot-items-table { width: 100%; border-collapse: collapse; font-size: 14px; }
+.prep-list-table th, .prep-list-table td, .hot-items-table th, .hot-items-table td { text-align: left; padding: 10px 5px; border-bottom: 1px solid #ecf0f1; }
+.priority.high { color: #c0392b; font-weight: 600; }
+.priority.medium { color: #f39c12; font-weight: 600; }
+.status.done { color: #27ae60; }
+.status.pending { color: #7f8c8d; }
+.inventory-control { display: flex; gap: 20px; }
+.inventory-column { width: 50%; }
+.inventory-column h5 { margin: 0 0 10px 0; font-size: 14px; color: #2c3e50; }
+.dash-list { margin: 0; padding-left: 0; font-size: 14px; color: #555; list-style-type: none;}
+.dash-list li { margin-bottom: 5px; }
+.inventory-column h5:first-of-type { color: #c0392b; }
+.menu-engineering-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
+.quadrant { border: 1px solid #ecf0f1; border-radius: 6px; padding: 15px; text-align: center; }
+.quadrant h6 { margin: 0 0 8px 0; font-size: 14px; font-weight: 700; }
+.quadrant p { font-size: 13px; margin: 5px 0 0 0; }
+.quadrant small { font-size: 12px; font-style: italic; color: #7f8c8d; display: block; margin-bottom: 10px; }
+.quadrant.star { background-color: #fef9e7; border-color: #f39c12; }
+.quadrant.star h6 { color: #f39c12; }
+.quadrant.plow-horse { background-color: #eaf6ec; border-color: #27ae60; }
+.quadrant.plow-horse h6 { color: #27ae60; }
+.quadrant.puzzle { background-color: #ddebf8; border-color: #3498db; }
+.quadrant.puzzle h6 { color: #3498db; }
+.quadrant.dog { background-color: #f9eaea; border-color: #c0392b; }
+.quadrant.dog h6 { color: #c0392b; }
+.hot-items-table .margin.good { color: #27ae60; font-weight: 600; }
+.hot-items-table .margin.ok { color: #f39c12; font-weight: 600; }
+.chart-with-legend { display: flex; flex-direction: column; align-items: center; gap: 20px; flex-grow: 1; justify-content: center; }
+.pie-chart { width: 150px; height: 150px; border-radius: 50%; background-image: conic-gradient( #3498db 0% 70%, #f39c12 70% 85%, #16a085 85% 100% ); flex-shrink: 0; }
+.channel-list { display: flex; flex-direction: column; gap: 15px; width: 100%;}
+.channel-item { display: flex; align-items: center; gap: 10px; }
+.channel-icon { font-size: 10px; }
+.channel-icon.dine-in { color: #3498db; }
+.channel-icon.takeaway { color: #f39c12; }
+.channel-icon.delivery { color: #16a085; }
+.channel-label { flex-grow: 1; font-weight: 600; color: #34495e; font-size: 16px; }
+.channel-perc { font-size: 16px; font-weight: 700; color: #2c3e50; }
+
+.add-ingredient-section {
+    display: grid;
+    grid-template-columns: 3fr 1fr 1fr auto;
+    gap: 15px;
+    align-items: flex-end;
+    background-color: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+}
+.ingredients-list-container {
+    background-color: #fdfdfd;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 20px;
+    min-height: 100px;
+    margin-bottom: 20px;
+}
+#recipe-ingredients-list { list-style: none; padding: 0; margin: 0; }
+#recipe-ingredients-list li {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    border-bottom: 1px solid #ecf0f1;
+}
+#recipe-ingredients-list li:last-child { border-bottom: none; }
+.remove-ingredient-btn {
+    background: none; border: none;
+    color: #c0392b; cursor: pointer;
+    font-size: 20px; padding: 0 5px;
+}
+
+.add-production-task-section {
+    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 15px;
+    align-items: flex-end; background-color: #f8f9fa; padding: 20px;
+    border-radius: 8px; margin-bottom: 30px; border: 1px solid #e0e0e0;
+}
+/* Production: metti "Add to List" sulla riga sotto, sotto "Recipe to Prepare" */
+.add-production-task-section #add-task-btn{
+  grid-column: 1 / -1;  /* occupa tutta la riga sotto */
+  grid-row: 2;
+  width: 100%;
+  margin-top: 4px;
+}
+
+/* === PRODUCTION: mostra i pannelli SOLO nella pagina Production === */
+.add-production-task-section,
+.production-board,
+.completed-tasks-section {
+  display: none !important;         /* nascondi ovunque di default */
+  visibility: hidden !important;
+}
+
+#production-content.input-page.active .add-production-task-section {
+  display: grid !important;         /* mostra SOLO quando #production-content è active */
+  visibility: visible !important;
+}
+#production-content.input-page.active .production-board {
+  display: grid !important;
+  visibility: visible !important;
+}
+#production-content.input-page.active .completed-tasks-section {
+  display: block !important;
+  visibility: visible !important;
+}
+
+.submit-btn.small-btn { padding: 10px 20px; font-size: 16px; height: 46px; }
+.production-board { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
+.production-column h4 { margin-top: 0; padding-bottom: 10px; border-bottom: 2px solid #e0e0e0; color: #2E4E6F; }
+.task-list { background-color: #f8f9fa; border-radius: 8px; padding: 15px; min-height: 200px; display: flex; flex-direction: column; gap: 15px; }
+.task-card { background-color: #ffffff; border-radius: 6px; padding: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); border-left: 5px solid #3498db; }
+.task-card.inprogress { border-left-color: #f39c12; }
+.task-card h5 { margin: 0 0 5px 0; font-size: 16px; }
+.task-card p { margin: 0 0 15px 0; font-size: 14px; color: #7f8c8d; }
+.task-card-footer { display: flex; justify-content: flex-end; }
+.task-action-btn { background-color: #3498db; color: white; border: none; border-radius: 6px; padding: 8px 12px; cursor: pointer; font-size: 12px; font-weight: 600; transition: background-color 0.2s; }
+.task-card.inprogress .task-action-btn { background-color: #27ae60; }
+.task-action-btn:hover { opacity: 0.9; }
+.completed-tasks-section { background-color: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; }
+.completed-tasks-section h4 { margin-top: 0; padding-bottom: 10px; border-bottom: 2px solid #e0e0e0; color: #27ae60; }
+#completed-tasks-list { list-style: none; padding: 0; margin: 0; font-size: 14px; }
+#completed-tasks-list li { padding: 8px 0; border-bottom: 1px dashed #dce1e6; color: #7f8c8d; }
+#completed-tasks-list li:last-child { border-bottom: none; }
+#completed-tasks-list li strong { color: #34495e; }
+
+
+/* MEDIA QUERIES */
+@media (max-width: 768px) {
+    .header-center { display: none; }
+    .page-header-with-back {
+        grid-template-columns: auto 1fr;
+    }
+    .page-header-with-back h3 {
+        text-align: left;
+    }
+    .new-dashboard-grid, .new-dashboard-grid.kitchen-dash, .manual-form, .step-buttons-grid, .goods-in-buttons-grid, .add-production-task-section, .production-board, .add-ingredient-section { grid-template-columns: 1fr; }
+    .main-container { padding: 10px; }
+    .inventory-control { flex-direction: column; }
+    .inventory-column { width: 100%; }
+}
+/* ==== PATCH LAYOUT-4x2 — dashboard sempre 4x2, responsive ==== */
+/* Applica SOLO quando la home è attiva */
+#step-selection-page.active .step-buttons-grid {
+  display: grid !important;
+  /* Desktop: 4 colonne grandi */
+  grid-template-columns: repeat(4, minmax(260px, 1fr)) !important;
+  gap: 32px !important;
+  align-items: stretch !important;
+  justify-items: stretch !important;
+}
+
+/* Tablet: 2 colonne */
+@media (max-width: 1200px) {
+  #step-selection-page.active .step-buttons-grid {
+    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
+  }
+}
+
+/* Mobile: 1 colonna */
+@media (max-width: 640px) {
+  #step-selection-page.active .step-buttons-grid {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+/* Mantiene i tile belli grandi */
+#step-selection-page.active .big-step-button {
+  min-height: 160px;
+}
+/* === PATCH LAYOUT 4x2 — centratura esatta e responsive (append-only) === */
+/* Centro il contenitore della home quando è visibile */
+#step-selection-page.active {
+  text-align: center;                 /* centra gli elementi inline/inline-grid dentro */
+}
+
+/* Rendo la griglia un inline-grid (si centra nella riga) e tolgo il centraggio del testo interno */
+#step-selection-page.active .step-buttons-grid {
+  display: inline-grid !important;    /* si comporta come un "blocco" centrabile */
+  text-align: initial !important;     /* evita testo centrato dentro i tile */
+  gap: 32px !important;
+
+  /* Desktop: 4 colonne */
+  grid-template-columns: repeat(4, minmax(260px, 1fr)) !important;
+}
+
+/* Tablet: 2 colonne */
+@media (max-width: 1200px) {
+  #step-selection-page.active .step-buttons-grid {
+    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
+  }
+}
+
+/* Mobile: 1 colonna */
+@media (max-width: 640px) {
+  #step-selection-page.active .step-buttons-grid {
+    grid-template-columns: minmax(240px, 1fr) !important;
+  }
+}
+
+/* Mantiene i tile belli grandi */
+#step-selection-page.active .big-step-button{
+  min-height: 160px;
+}
+/* === PATCH 1.1.6 — Dashboard 4×2 centrata, responsive (append-only) === */
+#step-selection-page.active .step-buttons-grid{
+  /* lascia la griglia com’è, ma permetti il centraggio “a contenuto” */
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+  /* se qualcuno avesse cambiato l’allineamento dei track, recentra */
+  justify-content: center;
+  gap: 32px; /* non cambia i tuoi tile, solo per sicurezza */
+}
+
+/* Tablet: 2 colonne centrate */
+@media (max-width: 1200px){
+  #step-selection-page.active .step-buttons-grid{
+    grid-template-columns: repeat(2, minmax(260px, 1fr));
+  }
+}
+
+/* Mobile: 1 colonna centrata */
+@media (max-width: 640px){
+  #step-selection-page.active .step-buttons-grid{
+    grid-template-columns: minmax(240px, 1fr);
+  }
+}
+/* ===== CHEFCODE PATCH LAYOUT CENTER v2 — dashboard 4×2 centrata ===== */
+#step-selection-page.active .step-buttons-grid {
+  /* 1) centratura a prova di bomba */
+  width: max-content !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+
+  /* 2) usa la tua griglia, ma centrata */
+  display: grid !important;
+  gap: 32px !important;
+  justify-content: center !important;
+
+  #step-selection-page.active .step-buttons-grid {
+  max-width: 1400px;   /* o quanto serve per le 4 colonne */
+}
+
+width: max-content;
+margin-inline: auto;
+}
+
+/* Desktop: 4 colonne (resti 4×2, responsive) */
+#step-selection-page.active .step-buttons-grid {
+  grid-template-columns: repeat(4, minmax(260px, 1fr)) !important;
+}
+
+/* Tablet: 2 colonne */
+@media (max-width: 1200px) {
+  #step-selection-page.active .step-buttons-grid {
+    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
+  }
+}
+
+/* Mobile: 1 colonna */
+@media (max-width: 640px) {
+  #step-selection-page.active .step-buttons-grid {
+    grid-template-columns: minmax(240px, 1fr) !important;
+  }
+}
+
+/* Mantieni i tile grandi */
+#step-selection-page.active .big-step-button { min-height: 160px; }
+/* ===== CHEFCODE PATCH MOBILE-CENTER 1.0 — SOLO HOME, SOLO MOBILE ===== */
+@media (max-width: 768px){
+  /* Home: griglia centrata anche dopo il Back */
+  #step-selection-page.active .step-buttons-grid{
+    display: inline-grid !important;   /* resta inline per poter essere centrata */
+    grid-template-columns: 1fr !important; /* 1 colonna su mobile */
+    gap: 25px !important;
+
+    width: auto !important;            /* <-- annulla width:100% */
+    margin-inline: auto !important;    /* <-- CENTRA il blocco */
+  }
+}
+/* ===== CHEFCODE MOBILE TILE RECT 1.0 — SOLO HOME ===== */
+@media (max-width: 768px){
+  /* 1) Home: una colonna e tile che riempiono tutta la riga */
+  #step-selection-page.active .step-buttons-grid{
+    grid-template-columns: 1fr !important;
+    justify-items: stretch !important;   /* i tile si allargano a tutta larghezza */
+    gap: 20px !important;                 /* leggermente più compatto su mobile */
+  }
+
+  /* 2) Tile rettangolari (non quadrati), stile “stretched” come nelle funzioni */
+  #step-selection-page.active .big-step-button{
+    width: 100% !important;
+    aspect-ratio: 18 / 7;                 /* << rende il riquadro rettangolare */
+    min-height: 140px;                     /* fallback per browser senza aspect-ratio */
+    border-radius: 12px;
+    padding: 20px 18px;
+  }
+
+  /* 3) Icona e testo un filo più “importanti” su mobile */
+  #step-selection-page.active .big-step-button i{
+    font-size: 48px;
+    margin-bottom: 10px;
+  }
+  #step-selection-page.active .big-step-button span{
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 1.2;
+  }
+}
+/* Logo come sfondo dell'H1 */
+.header-center .logo{
+  background-image: url('logo.svg');  /* <— aggiorna il percorso se serve */
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+
+  /* dimensioni del logo: regola qui */
+  width: clamp(420px, 18vw, 220px);
+  height: clamp(70px, 5vh, 40px);
+
+  /* nascondo il testo mantenendo l'elemento */
+  color: transparent;
+  text-indent: -9999px;
+  overflow: hidden;
+
+  display: inline-block;
+  margin: 0;
+}
+
+/* (Opzionale) mostra il logo anche su mobile se attualmente è nascosto */
+@media (max-width: 768px){
+  .header-center{ display:block; }
+  .header-center .logo{ height: 70px; }  /* puoi aumentare/diminuire */
+  /* LOGO centrato su mobile */
+@media (max-width: 768px){
+  /* 1) la colonna centrale dell’header resta visibile e centrata */
+  .header-center{
+    display: block !important;
+    justify-self: center !important;  /* ⬅️ centra la cella della griglia */
+    text-align: center;                /* fallback: centra il contenuto inline */
+  }
+
+  /* 2A) Se usi l'H1 .logo con background-image (metodo CSS-only) */
+  .header-center .logo{
+    display: inline-block;     /* così text-align:center la centra */
+    margin: 0 auto;            /* doppia sicurezza */
+    height: 70px;              /* <-- regola l’altezza che vuoi */
+    width: 200px;              /* <-- dai anche una larghezza esplicita */
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    color: transparent; text-indent: -9999px; overflow: hidden;
+  }
+
+  /* 2B) Se invece usi <img class="brand-logo"> */
+  .brand-logo{
+    display: block;
+    margin:  auto;            /* centra l’immagine */
+    height: 70px;              /* <-- regola qui */
+    width: auto;
+  }
+}
+
+#production-content .add-production-task-section #add-task-btn{
+  grid-column: 1;
+  grid-row: 2;
+  width: 100%;
+  
+}
+}
+/* ==== CHEFCODE — PRODUCTION VISIBILITY (final, CSS-only) ==== */
+/* Nascondi SEMPRE questi pannelli… */
+.add-production-task-section,
+.production-board,
+.completed-tasks-section {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+/* …tranne quando stai davvero nella pagina Production attiva */
+#production-content.input-page.active .add-production-task-section {
+  display: grid !important;
+  visibility: visible !important;
+}
+#production-content.input-page.active .production-board {
+  display: grid !important;
+  visibility: visible !important;
+}
+#production-content.input-page.active .completed-tasks-section {
+  display: block !important;
+  visibility: visible !important;
+}
+
+/* Assicura che il riquadro bianco di Production si allarghi per contenere tutto */
+#production-content.input-page.active {
+  display: block !important;   /* invece del flex: evita “accorciamenti” strani */
+}
+
+/* Evita che stili generici riaccendano i pannelli fuori da Production */
+.page-section:not(#production-content) .add-production-task-section,
+.page-section:not(#production-content) .production-board,
+.page-section:not(#production-content) .completed-tasks-section {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+
+
+
+/* HACCP Traceability - Expiry Date Alerts */
+.expiry-warning {
+  color: #ff9800;
+  font-weight: 600;
+  background: #fff3cd;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.expiry-critical {
+  color: #dc3545;
+  font-weight: 700;
+  background: #f8d7da;
+  padding: 2px 6px;
+  border-radius: 4px;
+  animation: pulse-critical 2s infinite;
+}
+
+@keyframes pulse-critical {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+/* Delete Button Styling */
+.delete-btn {
+  background: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 6px 8px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+}
+
+.delete-btn:hover {
+  background: #c82333;
+  transform: scale(1.05);
+}
+
+.delete-btn:active {
+  transform: scale(0.95);
+}
+
+.delete-btn i {
+  font-size: 10px;
+}
+
+/* ===== OCR MODAL STYLES ===== */
+.ocr-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.ocr-modal-overlay.show {
+  opacity: 1;
+}
+
+.ocr-modal-content {
+  background: white;
+  border-radius: 24px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+  max-width: 90vw;
+  max-height: 90vh;
+  width: 600px;
+  overflow: hidden;
+  transform: scale(0.9) translateY(20px);
+  transition: transform 0.3s ease;
+}
+
+.ocr-modal-overlay.show .ocr-modal-content {
+  transform: scale(1) translateY(0);
+}
+
+.ocr-modal-header {
+  padding: 24px 24px 16px 24px;
+  border-bottom: 1px solid #f0f0f0;
+  position: relative;
+}
+
+.ocr-modal-title {
+  font-size: 1.5em;
+  font-weight: 600;
+  color: #2c3e50;
+  margin: 0 0 8px 0;
+}
+
+.ocr-modal-subtitle {
+  font-size: 0.9em;
+  color: #7f8c8d;
+  margin: 0;
+  line-height: 1.4;
+}
+
+.ocr-modal-close {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  background: none;
+  border: none;
+  font-size: 1.2em;
+  color: #bdc3c7;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 50%;
+  transition: all 0.2s ease;
+}
+
+.ocr-modal-close:hover {
+  background: #f8f9fa;
+  color: #2c3e50;
+}
+
+.ocr-modal-body {
+  padding: 24px;
+  min-height: 400px;
+}
+
+.ocr-screen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+}
+
+/* Selection Screen */
+.ocr-option-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  width: 100%;
+  max-width: 400px;
+}
+
+.ocr-option-card {
+  background: #f8f9fa;
+  border: 2px solid #e9ecef;
+  border-radius: 16px;
+  padding: 32px 24px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.ocr-option-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+  border-color: #0078d7;
+}
+
+.ocr-option-card:active {
+  transform: translateY(-2px);
+}
+
+.ocr-option-icon {
+  font-size: 2.5em;
+  color: #0078d7;
+  margin-bottom: 16px;
+}
+
+.ocr-option-card h3 {
+  font-size: 1.1em;
+  font-weight: 600;
+  color: #2c3e50;
+  margin: 0 0 8px 0;
+}
+
+.ocr-option-card p {
+  font-size: 0.9em;
+  color: #7f8c8d;
+  margin: 0;
+}
+
+/* Camera Screen */
+.ocr-camera-container {
+  width: 100%;
+  max-width: 500px;
+  position: relative;
+  background: #000;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+#ocr-camera-preview {
+  width: 100%;
+  height: 300px;
+  object-fit: cover;
+}
+
+.ocr-camera-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+
+.ocr-camera-guides {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 200px;
+  height: 120px;
+  border: 2px solid rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
+}
+
+.ocr-guide-line {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.6);
+}
+
+.ocr-guide-line:nth-child(1) {
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+}
+
+.ocr-guide-line:nth-child(2) {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+}
+
+.ocr-guide-line:nth-child(3) {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 1px;
+}
+
+.ocr-guide-line:nth-child(4) {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 1px;
+}
+
+.ocr-camera-controls {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.ocr-camera-btn {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2em;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.ocr-camera-btn.primary {
+  background: #0078d7;
+  color: white;
+  width: 60px;
+  height: 60px;
+  font-size: 1.4em;
+}
+
+.ocr-camera-btn.secondary {
+  background: rgba(255, 255, 255, 0.9);
+  color: #2c3e50;
+}
+
+.ocr-camera-btn:hover {
+  transform: scale(1.1);
+}
+
+/* Preview Screen */
+.ocr-preview-container {
+  width: 100%;
+  max-width: 500px;
+  text-align: center;
+}
+
+#ocr-preview-image {
+  width: 100%;
+  max-height: 300px;
+  object-fit: contain;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+  margin-bottom: 24px;
+}
+
+.ocr-preview-controls {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+}
+
+.ocr-preview-btn {
+  padding: 12px 24px;
+  border-radius: 8px;
+  border: none;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ocr-preview-btn.primary {
+  background: #0078d7;
+  color: white;
+}
+
+.ocr-preview-btn.secondary {
+  background: #f8f9fa;
+  color: #2c3e50;
+  border: 1px solid #e9ecef;
+}
+
+.ocr-preview-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Processing Screen */
+.ocr-processing-container {
+  text-align: center;
+  padding: 40px 20px;
+}
+
+.ocr-spinner {
+  width: 60px;
+  height: 60px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #0078d7;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 24px auto;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.ocr-processing-container h3 {
+  font-size: 1.3em;
+  color: #2c3e50;
+  margin: 0 0 8px 0;
+}
+
+.ocr-processing-container p {
+  color: #7f8c8d;
+  margin: 0;
+}
+
+/* Results Screen */
+.ocr-results-container {
+  width: 100%;
+  max-width: 600px;
+}
+
+.ocr-results-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.ocr-results-header h3 {
+  font-size: 1.3em;
+  color: #2c3e50;
+  margin: 0 0 12px 0;
+}
+
+.ocr-results-meta {
+  display: flex;
+  gap: 24px;
+  justify-content: center;
+  font-size: 0.9em;
+  color: #7f8c8d;
+}
+
+.ocr-results-table-container {
+  max-height: 300px;
+  overflow-y: auto;
+  border: 1px solid #e9ecef;
+  border-radius: 8px;
+  margin-bottom: 24px;
+}
+
+.ocr-results-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9em;
+}
+
+.ocr-results-table th {
+  background: #f8f9fa;
+  padding: 12px 8px;
+  text-align: left;
+  font-weight: 600;
+  color: #2c3e50;
+  border-bottom: 1px solid #e9ecef;
+  position: sticky;
+  top: 0;
+}
+
+.ocr-results-table td {
+  padding: 12px 8px;
+  border-bottom: 1px solid #f0f0f0;
+  color: #2c3e50;
+}
+
+.ocr-results-table tr:hover {
+  background: #f8f9fa;
+}
+
+/* Editable OCR Input Fields */
+.ocr-edit-input {
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid #e9ecef;
+  border-radius: 4px;
+  font-size: 0.9em;
+  font-family: inherit;
+  color: #2c3e50;
+  background: white;
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+}
+
+.ocr-edit-input:focus {
+  outline: none;
+  border-color: #0078d7;
+  background: #f8f9ff;
+  box-shadow: 0 0 0 3px rgba(0, 120, 215, 0.1);
+}
+
+.ocr-edit-input:hover {
+  border-color: #ced4da;
+}
+
+.ocr-number-input {
+  text-align: right;
+}
+
+.ocr-select-input {
+  cursor: pointer;
+  padding-right: 24px;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 4px center;
+  background-size: 16px;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.ocr-date-input {
+  cursor: pointer;
+}
+
+.ocr-results-table td {
+  padding: 8px 6px;
+  border-bottom: 1px solid #f0f0f0;
+  color: #2c3e50;
+  vertical-align: middle;
+}
+
+.ocr-results-actions {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+}
+
+.ocr-results-btn {
+  padding: 12px 24px;
+  border-radius: 8px;
+  border: none;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ocr-results-btn.primary {
+  background: #28a745;
+  color: white;
+}
+
+.ocr-results-btn.secondary {
+  background: #f8f9fa;
+  color: #2c3e50;
+  border: 1px solid #e9ecef;
+}
+
+.ocr-results-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Success Screen */
+.ocr-success-container {
+  text-align: center;
+  padding: 40px 20px;
+}
+
+.ocr-success-icon {
+  font-size: 4em;
+  color: #28a745;
+  margin-bottom: 24px;
+}
+
+.ocr-success-container h3 {
+  font-size: 1.4em;
+  color: #2c3e50;
+  margin: 0 0 12px 0;
+}
+
+.ocr-success-container p {
+  color: #7f8c8d;
+  margin: 0 0 32px 0;
+}
+
+.ocr-success-btn {
+  padding: 16px 32px;
+  border-radius: 8px;
+  border: none;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 auto;
+}
+
+.ocr-success-btn.primary {
+  background: #0078d7;
+  color: white;
+}
+
+.ocr-success-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Quick Add Popup Styles - Minimal Floating Menu */
+.quick-add-popup {
+  position: fixed;
+  bottom: 80px;
+  right: 50%;
+  transform: translateX(50%);
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  z-index: 10000;
+  overflow: hidden;
+  min-width: 200px;
+  opacity: 0;
+  transform: translateX(50%) translateY(10px);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  pointer-events: none;
+}
+
+.quick-add-popup.show {
+  opacity: 1;
+  transform: translateX(50%) translateY(0);
+  pointer-events: all;
+}
+
+.quick-add-popup-option {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 20px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border-bottom: 1px solid #f0f0f0;
+  color: #2c3e50;
+  font-size: 0.95em;
+}
+
+.quick-add-popup-option:last-child {
+  border-bottom: none;
+}
+
+.quick-add-popup-option:hover {
+  background: #f8f9fa;
+  color: #0078d7;
+}
+
+.quick-add-popup-option:active {
+  background: #e9ecef;
+}
+
+.quick-add-popup-option i {
+  font-size: 1.1em;
+  width: 20px;
+  text-align: center;
+  color: #7f8c8d;
+}
+
+.quick-add-popup-option:hover i {
+  color: #0078d7;
+}
+
+.quick-add-popup-option span {
+  font-weight: 500;
+  user-select: none;
+}
+
+/* Mobile Responsive for Quick Add Popup */
+@media (max-width: 768px) {
+  .quick-add-popup {
+    bottom: 70px;
+    min-width: 180px;
+  }
+  
+  .quick-add-popup-option {
+    padding: 12px 16px;
+    font-size: 0.9em;
+  }
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+  .ocr-modal-content {
+    width: 95vw;
+    max-height: 95vh;
+    border-radius: 16px;
+  }
+  
+  .ocr-option-grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+  
+  .ocr-option-card {
+    padding: 24px 20px;
+  }
+  
+  .ocr-results-meta {
+    flex-direction: column;
+    gap: 8px;
+  }
+  
+  .ocr-results-actions {
+    flex-direction: column;
+  }
+  
+  .ocr-camera-controls {
+    bottom: 16px;
+  }
+  
+  .ocr-camera-btn {
+    width: 45px;
+    height: 45px;
+    font-size: 1.1em;
+  }
+  
+  .ocr-camera-btn.primary {
+    width: 55px;
+    height: 55px;
+    font-size: 1.3em;
+  }
+}
+
+/* ============================================
+   AI TOOLBAR FOOTER - Design Only
+   ============================================ */
+
+/* Main container adjustment for footer space */
+.main-container {
+  padding-bottom: 80px; /* Space for fixed footer */
+}
+
+/* AI Toolbar Footer */
+.ai-toolbar-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #2E4E6F;
+  border-top: 1px solid #1f3c5d;
+  padding: 10px 20px;
+  z-index: 1000;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+}
+
+/* Toolbar container - flexbox layout */
+.ai-toolbar-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* Command input field */
+.ai-command-input {
+  flex: 1;
+  max-width: 70%;
+  background: #ffffff;
+  border: none;
+  border-radius: 8px;
+  padding: 12px 16px;
+  font-size: 0.95em;
+  font-family: 'Roboto', sans-serif;
+  color: #2c3e50;
+  outline: none;
+  transition: box-shadow 0.3s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.ai-command-input::placeholder {
+  color: #95a5a6;
+  font-style: italic;
+}
+
+.ai-command-input:focus {
+  box-shadow: 0 2px 8px rgba(31, 60, 93, 0.15);
+}
+
+/* Toolbar buttons - shared styles */
+.ai-toolbar-btn {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border: none;
+  background-color: #1f3c5d;
+  color: #ffffff;
+  font-size: 1.2em;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 6px rgba(31, 60, 93, 0.2);
+}
+
+.ai-toolbar-btn:hover {
+  background-color: #2e4e6f;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(31, 60, 93, 0.3);
+}
+
+.ai-toolbar-btn:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 4px rgba(31, 60, 93, 0.2);
+}
+
+.ai-toolbar-btn i {
+  pointer-events: none;
+}
+
+/* Send button specific */
+.ai-send-btn {
+  /* Uses shared styles */
+}
+
+/* Voice button specific */
+.ai-voice-btn {
+  /* Uses shared styles */
+}
+
+.ai-voice-btn.listening {
+  background-color: #e74c3c !important;
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
+  }
+  50% {
+    box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
+  }
+}
+
+/* ============================================================================
+   AI ASSISTANT CHAT INTERFACE
+   ============================================================================ */
+
+/* Chat Overlay */
+.ai-chat-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 420px;
+  background: linear-gradient(135deg, #1E2A3A 0%, #2d3e52 100%);
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
+  animation: slideInRight 0.3s ease;
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.ai-chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.ai-chat-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 2px solid rgba(0, 119, 182, 0.3);
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.ai-chat-header h3 {
+  margin: 0;
+  color: white;
+  font-size: 1.3em;
+  font-weight: 600;
+}
+
+.ai-chat-header p {
+  margin: 4px 0 0 0;
+  color: #94a3b8;
+  font-size: 0.85em;
+}
+
+.ai-chat-close {
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: 8px;
+  width: 32px;
+  height: 32px;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.ai-chat-close:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/* Chat Messages */
+.ai-chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.ai-message {
+  display: flex;
+  animation: messageSlideIn 0.3s ease;
+}
+
+@keyframes messageSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.ai-message-user {
+  justify-content: flex-end;
+}
+
+.ai-message-assistant {
+  justify-content: flex-start;
+}
+
+.ai-message-bubble {
+  max-width: 80%;
+  padding: 12px 16px;
+  border-radius: 16px;
+  font-size: 0.95em;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+
+.ai-message-user .ai-message-bubble {
+  background: linear-gradient(135deg, #0077B6 0%, #00B4D8 100%);
+  color: white;
+  border-bottom-right-radius: 4px;
+}
+
+.ai-message-assistant .ai-message-bubble {
+  background: rgba(255, 255, 255, 0.95);
+  color: #1E2A3A;
+  border-bottom-left-radius: 4px;
+}
+
+/* Typing Indicator */
+.ai-typing-indicator {
+  display: flex;
+  gap: 4px;
+  padding: 4px 0;
+}
+
+.ai-typing-indicator span {
+  width: 8px;
+  height: 8px;
+  background: #94a3b8;
+  border-radius: 50%;
+  animation: typing 1.4s infinite;
+}
+
+.ai-typing-indicator span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.ai-typing-indicator span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes typing {
+  0%, 60%, 100% {
+    transform: translateY(0);
+  }
+  30% {
+    transform: translateY(-10px);
+  }
+}
+
+/* Chat Footer */
+.ai-chat-footer {
+  padding: 16px 20px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.ai-chat-voice-btn {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: 2px solid rgba(0, 119, 182, 0.5);
+  background: linear-gradient(135deg, #0077B6 0%, #00B4D8 100%);
+  color: white;
+  font-size: 1.4em;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(0, 119, 182, 0.3);
+}
+
+.ai-chat-voice-btn:hover {
+  transform: scale(1.05);
+  box-shadow: 0 6px 20px rgba(0, 119, 182, 0.5);
+}
+
+.ai-chat-voice-btn:active {
+  transform: scale(0.95);
+}
+
+.ai-chat-voice-btn.listening {
+  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
+  border-color: rgba(231, 76, 60, 0.8);
+  animation: voicePulse 1.5s infinite;
+}
+
+@keyframes voicePulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
+  }
+  50% {
+    box-shadow: 0 0 0 15px rgba(231, 76, 60, 0);
+  }
+}
+
+.ai-chat-hint {
+  margin: 0;
+  color: #94a3b8;
+  font-size: 0.85em;
+  text-align: center;
+  font-style: italic;
+}
+
+/* ============================================================================
+   CONFIRMATION DIALOG
+   ============================================================================ */
+
+.ai-confirmation-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10001;
+  backdrop-filter: blur(4px);
+  animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.ai-confirmation-content {
+  background: white;
+  border-radius: 16px;
+  padding: 32px;
+  max-width: 500px;
+  width: 90%;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+  animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes scaleIn {
+  from {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.ai-confirmation-icon {
+  font-size: 3em;
+  text-align: center;
+  margin-bottom: 16px;
+}
+
+.ai-confirmation-message {
+  color: #1E2A3A;
+  font-size: 1.1em;
+  line-height: 1.6;
+  margin-bottom: 24px;
+  text-align: center;
+}
+
+.ai-confirmation-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+}
+
+/* ============================================================================
+   SEARCH RESULTS OVERLAY
+   ============================================================================ */
+
+.ai-search-results-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  backdrop-filter: blur(6px);
+  padding: 20px;
+  animation: fadeIn 0.3s ease;
+}
+
+.ai-search-container {
+  background: white;
+  border-radius: 16px;
+  max-width: 1000px;
+  width: 100%;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+}
+
+.ai-search-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px;
+  border-bottom: 2px solid #e2e8f0;
+}
+
+.ai-search-header h3 {
+  margin: 0;
+  color: #1E2A3A;
+  font-size: 1.5em;
+  font-weight: 600;
+}
+
+.ai-search-close {
+  background: #f8fafc;
+  border: none;
+  border-radius: 8px;
+  width: 36px;
+  height: 36px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.ai-search-close:hover {
+  background: #e2e8f0;
+}
+
+.ai-search-grid {
+  padding: 24px;
+  overflow-y: auto;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 20px;
+}
+
+/* Recipe Cards in Search */
+.ai-recipe-card {
+  background: white;
+  border: 2px solid #e2e8f0;
+  border-radius: 12px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.ai-recipe-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 20px rgba(0, 119, 182, 0.15);
+  border-color: #0077B6;
+}
+
+.ai-recipe-image {
+  width: 100%;
+  height: 150px;
+  object-fit: cover;
+  background: linear-gradient(135deg, #1E2A3A 0%, #0077B6 100%);
+}
+
+.ai-recipe-info {
+  padding: 16px;
+}
+
+.ai-recipe-info h4 {
+  margin: 0 0 8px 0;
+  color: #1E2A3A;
+  font-size: 1.1em;
+  font-weight: 600;
+}
+
+.ai-recipe-cuisine {
+  color: #64748b;
+  font-size: 0.9em;
+  margin: 0 0 12px 0;
+}
+
+/* ============================================================================
+   AI BUTTONS
+   ============================================================================ */
+
+.ai-btn {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 8px;
+  font-size: 1em;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-family: 'Poppins', 'Inter', sans-serif;
+}
+
+.ai-btn-primary {
+  background: linear-gradient(135deg, #0077B6 0%, #00B4D8 100%);
+  color: white;
+  box-shadow: 0 4px 12px rgba(0, 119, 182, 0.2);
+}
+
+.ai-btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0, 119, 182, 0.35);
+}
+
+.ai-btn-secondary {
+  background: white;
+  color: #1E2A3A;
+  border: 2px solid #e2e8f0;
+}
+
+.ai-btn-secondary:hover {
+  background: #f8fafc;
+}
+
+.ai-import-btn {
+  width: 100%;
+  padding: 8px 16px;
+  font-size: 0.9em;
+}
+
+/* ============================================================================
+   TOAST NOTIFICATIONS
+   ============================================================================ */
+
+.ai-toast {
+  position: fixed;
+  bottom: 100px;
+  left: 50%;
+  transform: translateX(-50%) translateY(100px);
+  background: #1E2A3A;
+  color: white;
+  padding: 16px 24px;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  z-index: 10002;
+  opacity: 0;
+  transition: all 0.3s ease;
+  font-weight: 500;
+}
+
+.ai-toast.show {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+.ai-toast-success {
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+}
+
+.ai-toast-error {
+  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+}
+
+/* ============================================================================
+   RESPONSIVE
+   ============================================================================ */
+
+@media (max-width: 768px) {
+  .ai-chat-overlay {
+    width: 100%;
+  }
+  
+  .ai-search-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .ai-confirmation-content {
+    padding: 24px;
+  }
+}
+
+/* Upload button specific */
+.ai-upload-btn {
+  /* Uses shared styles */
+}
+
+/* Mobile responsive adjustments */
+@media (max-width: 768px) {
+  .ai-toolbar-footer {
+    padding: 8px 12px;
+  }
+  
+  .ai-toolbar-container {
+    gap: 8px;
+  }
+  
+  .ai-command-input {
+    max-width: 75%;
+    padding: 10px 14px;
+    font-size: 0.9em;
+  }
+  
+  .ai-toolbar-btn {
+    width: 44px;
+    height: 44px;
+    font-size: 1.1em;
+  }
+}
+
+@media (max-width: 480px) {
+  .ai-command-input {
+    max-width: 65%;
+    font-size: 0.85em;
+  }
+  
+  .ai-toolbar-btn {
+    width: 40px;
+    height: 40px;
+    font-size: 1em;
+  }
+}
+
+/* ============================================
+   RECIPE CATALOGUE - MODERN CARD DESIGN
+   ============================================ */
+
+.recipe-catalogue-container {
+  padding: 30px;
+  max-width: 1400px;
+  margin: 0 auto;
+  background: #f8fafc;
+  min-height: 60vh;
+}
+
+/* Modern Search Bar */
+.recipe-search-wrapper {
+  position: relative;
+  max-width: 600px;
+  margin: 0 auto 30px;
+}
+
+.recipe-search-wrapper .search-icon {
+  position: absolute;
+  left: 18px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #94a3b8;
+  font-size: 1.1em;
+  pointer-events: none;
+}
+
+.recipe-search-input {
+  width: 100%;
+  padding: 14px 20px 14px 50px;
+  border: 2px solid #e2e8f0;
+  border-radius: 12px;
+  font-size: 1em;
+  font-family: 'Roboto', sans-serif;
+  background: white;
+  transition: all 0.3s ease;
+  outline: none;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+}
+
+.recipe-search-input:focus {
+  border-color: #0ea5e9;
+  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
+}
+
+.recipe-search-input::placeholder {
+  color: #94a3b8;
+}
+
+/* Recipe Cards Grid */
+.recipe-cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 24px;
+  margin-top: 20px;
+}
+
+/* Individual Recipe Card */
+.recipe-card {
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  border: 1px solid #e2e8f0;
+  display: flex;
+  flex-direction: column;
+}
+
+.recipe-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  border-color: #0ea5e9;
+}
+
+/* Card Header */
+.recipe-card-header {
+  padding: 20px 24px;
+  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
+  color: white;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.recipe-card-title {
+  margin: 0;
+  font-size: 1.25em;
+  font-weight: 600;
+  color: white;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.recipe-card-badge {
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 0.85em;
+  font-weight: 500;
+  white-space: nowrap;
+  backdrop-filter: blur(10px);
+}
+
+/* Card Body */
+.recipe-card-body {
+  padding: 20px 24px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.recipe-ingredients-section h5 {
+  margin: 0 0 12px 0;
+  font-size: 0.95em;
+  font-weight: 600;
+  color: #475569;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.recipe-ingredients-section h5 i {
+  color: #0ea5e9;
+  font-size: 0.9em;
+}
+
+.recipe-ingredients-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 180px;
+  overflow-y: auto;
+}
+
+.recipe-ingredients-list li {
+  padding: 8px 12px;
+  background: #f8fafc;
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.9em;
+  border-left: 3px solid #0ea5e9;
+}
+
+.ing-name {
+  color: #1e293b;
+  font-weight: 500;
+  flex: 1;
+}
+
+.ing-qty {
+  color: #64748b;
+  font-weight: 600;
+  font-size: 0.95em;
+  margin-left: 12px;
+  white-space: nowrap;
+}
+
+/* Yield Section */
+.recipe-yield-section {
+  padding: 12px 16px;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border: 1px solid #bae6fd;
+}
+
+.recipe-yield-section i {
+  color: #0ea5e9;
+  font-size: 1.1em;
+}
+
+.yield-label {
+  font-weight: 600;
+  color: #0c4a6e;
+  font-size: 0.9em;
+}
+
+.yield-value {
+  color: #0369a1;
+  font-weight: 700;
+  font-size: 1em;
+}
+
+/* Card Footer */
+.recipe-card-footer {
+  padding: 16px 24px;
+  background: #f8fafc;
+  border-top: 1px solid #e2e8f0;
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+}
+
+.recipe-card-btn {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 8px;
+  font-size: 0.9em;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-family: 'Roboto', sans-serif;
+}
+
+.recipe-card-btn i {
+  font-size: 0.9em;
+}
+
+.edit-recipe-btn {
+  background: #0ea5e9;
+  color: white;
+}
+
+.edit-recipe-btn:hover {
+  background: #0284c7;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
+}
+
+.delete-recipe-btn {
+  background: white;
+  color: #dc2626;
+  border: 2px solid #fecaca;
+}
+
+.delete-recipe-btn:hover {
+  background: #fef2f2;
+  border-color: #dc2626;
+  transform: translateY(-1px);
+}
+
+/* Empty State */
+.recipe-empty-state {
+  text-align: center;
+  padding: 80px 20px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  margin: 20px auto;
+  max-width: 500px;
+}
+
+.recipe-empty-state i {
+  font-size: 4em;
+  color: #cbd5e1;
+  margin-bottom: 20px;
+  display: block;
+}
+
+.recipe-empty-state h3 {
+  margin: 0 0 12px 0;
+  color: #1e293b;
+  font-size: 1.5em;
+}
+
+.recipe-empty-state p {
+  color: #64748b;
+  font-size: 1.1em;
+  margin: 0 0 24px 0;
+}
+
+.empty-state-btn {
+  padding: 14px 28px;
+  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
+  color: white;
+  border: none;
+  border-radius: 10px;
+  font-size: 1em;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
+}
+
+.empty-state-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .recipe-cards-grid {
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+  }
+}
+
+@media (max-width: 768px) {
+  .recipe-catalogue-container {
+    padding: 20px 15px;
+  }
+  
+  .recipe-cards-grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+  
+  .recipe-card-header {
+    padding: 16px 20px;
+  }
+  
+  .recipe-card-body {
+    padding: 16px 20px;
+  }
+  
+  .recipe-card-footer {
+    padding: 12px 20px;
+    flex-direction: column;
+  }
+  
+  .recipe-card-btn {
+    width: 100%;
+    justify-content: center;
+  }
+  
+  .recipe-search-input {
+    font-size: 16px; /* Prevents zoom on mobile */
+  }
+  
+  .recipe-ingredients-list {
+    max-height: 150px;
+  }
+}
+
+@media (max-width: 480px) {
+  .recipe-card-title {
+    font-size: 1.1em;
+  }
+  
+  .recipe-search-wrapper {
+    margin-bottom: 20px;
+  }
+  
+  .recipe-empty-state {
+    padding: 60px 20px;
+  }
+  
+  .recipe-empty-state i {
+    font-size: 3em;
+  }
+}
+
+/* ============================================================================
+   WEB RECIPE SEARCH MODAL STYLES - ChefCode Theme
+   ============================================================================ */
+
+/* Modal Overlay */
+.web-recipe-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.75);
+  backdrop-filter: blur(6px);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  animation: fadeInOverlay 0.3s ease;
+}
+
+@keyframes fadeInOverlay {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Modal Content */
+.web-recipe-modal-content {
+  background: white;
+  border-radius: 16px;
+  max-width: 1200px;
+  width: 100%;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1), 0 2px 10px rgba(0, 0, 0, 0.05);
+  animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+@keyframes modalSlideIn {
+  from {
+    transform: scale(0.9) translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Modal Header */
+.web-recipe-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 32px;
+  border-bottom: 1px solid #e5e7eb;
+  background: linear-gradient(135deg, #1E2A3A 0%, #2d3e52 100%);
+  border-radius: 16px 16px 0 0;
+  position: relative;
+}
+
+.web-recipe-modal-header::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #0077B6 0%, #00B4D8 100%);
+}
+
+.web-recipe-modal-title {
+  margin: 0;
+  font-size: 1.5em;
+  color: white;
+  font-weight: 600;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.web-recipe-modal-subtitle {
+  font-size: 0.55em;
+  color: #94a3b8;
+  font-weight: 400;
+  margin-top: 4px;
+  letter-spacing: 0.3px;
+}
+
+.web-recipe-modal-close {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 10px;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: white;
+  font-size: 1.2em;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.web-recipe-modal-close:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: scale(1.05);
+}
+
+/* Modal Body */
+.web-recipe-modal-body {
+  padding: 32px;
+  overflow-y: auto;
+  flex: 1;
+  background: #fafbfc;
+}
+
+/* Screens */
+.web-recipe-screen {
+  display: none;
+}
+
+.web-recipe-screen.active {
+  display: block;
+}
+
+/* Search Container */
+.web-recipe-search-container {
+  margin-bottom: 32px;
+}
+
+.web-recipe-search-box {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.web-recipe-search-input {
+  flex: 1;
+  padding: 16px 20px;
+  border: 2px solid #e2e8f0;
+  border-radius: 12px;
+  font-size: 1.05em;
+  transition: all 0.3s ease;
+  font-family: 'Poppins', 'Inter', sans-serif;
+  font-weight: 400;
+  background: white;
+  color: #1E2A3A;
+}
+
+.web-recipe-search-input::placeholder {
+  color: #94a3b8;
+}
+
+.web-recipe-search-input:focus {
+  outline: none;
+  border-color: #0077B6;
+  box-shadow: 0 0 0 4px rgba(0, 119, 182, 0.1);
+  background: white;
+}
+
+.web-recipe-search-button {
+  padding: 16px 32px;
+  background: linear-gradient(135deg, #0077B6 0%, #00B4D8 100%);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  font-size: 1.05em;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  box-shadow: 0 4px 12px rgba(0, 119, 182, 0.2);
+}
+
+.web-recipe-search-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0, 119, 182, 0.35);
+  background: linear-gradient(135deg, #005f8f 0%, #0099b8 100%);
+}
+
+.web-recipe-search-button:active {
+  transform: translateY(0);
+}
+
+/* Loading Spinner */
+.web-recipe-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  text-align: center;
+}
+
+.web-recipe-spinner {
+  width: 50px;
+  height: 50px;
+  border: 4px solid #e2e8f0;
+  border-top: 4px solid #0077B6;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 20px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Results Grid */
+.web-recipe-results-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 24px;
+  margin-top: 24px;
+}
+
+.web-recipe-card {
+  background: white;
+  border: 2px solid #e2e8f0;
+  border-radius: 16px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.web-recipe-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 12px 32px rgba(0, 119, 182, 0.15);
+  border-color: #0077B6;
+}
+
+.web-recipe-card-image {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  background: linear-gradient(135deg, #1E2A3A 0%, #0077B6 100%);
+}
+
+.web-recipe-card-content {
+  padding: 20px;
+}
+
+.web-recipe-card-title {
+  font-size: 1.3em;
+  font-weight: 600;
+  color: #1E2A3A;
+  margin: 0 0 12px 0;
+  line-height: 1.3;
+}
+
+.web-recipe-card-meta {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.web-recipe-card-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  font-size: 0.9em;
+  color: #666;
+}
+
+.web-recipe-card-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+/* Empty State */
+.web-recipe-empty-state {
+  text-align: center;
+  padding: 80px 20px;
+  color: #999;
+}
+
+.web-recipe-empty-state i {
+  font-size: 4em;
+  color: #ddd;
+  margin-bottom: 20px;
+}
+
+.web-recipe-empty-state h3 {
+  font-size: 1.5em;
+  color: #666;
+  margin: 0 0 12px 0;
+}
+
+/* Detail Screen */
+.web-recipe-detail-container {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.web-recipe-back-btn {
+  background: #f8f9fa;
+  border: 1px solid #e0e0e0;
+  padding: 12px 20px;
+  border-radius: 10px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 1em;
+  color: #666;
+  margin-bottom: 24px;
+  transition: all 0.2s;
+}
+
+.web-recipe-back-btn:hover {
+  background: #e9ecef;
+  color: #333;
+}
+
+#web-recipe-detail-content {
+  background: #f8f9fa;
+  padding: 32px;
+  border-radius: 16px;
+  margin-bottom: 24px;
+}
+
+.web-recipe-detail-image {
+  width: 100%;
+  max-height: 400px;
+  object-fit: cover;
+  border-radius: 12px;
+  margin-bottom: 24px;
+}
+
+.web-recipe-detail-title {
+  font-size: 2.2em;
+  font-weight: 700;
+  color: #2c3e50;
+  margin: 0 0 16px 0;
+}
+
+.web-recipe-detail-meta {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 32px;
+  flex-wrap: wrap;
+}
+
+.web-recipe-detail-section {
+  margin-bottom: 32px;
+}
+
+.web-recipe-detail-section h4 {
+  font-size: 1.4em;
+  color: #0077B6;
+  margin: 0 0 16px 0;
+  font-weight: 600;
+}
+
+.web-recipe-ingredients-list {
+  list-style: none;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 12px;
+}
+
+.web-recipe-ingredients-list li {
+  background: white;
+  padding: 12px 16px;
+  border-radius: 8px;
+  border-left: 4px solid #0077B6;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.web-recipe-ingredients-list li i {
+  color: #0077B6;
+}
+
+.web-recipe-instructions {
+  background: white;
+  padding: 24px;
+  border-radius: 12px;
+  line-height: 1.8;
+  color: #555;
+  white-space: pre-wrap;
+}
+
+.web-recipe-detail-actions {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+}
+
+/* Buttons */
+.web-recipe-btn {
+  padding: 14px 32px;
+  border: none;
+  border-radius: 12px;
+  font-size: 1.05em;
+  font-weight: 600;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  transition: all 0.3s ease;
+  font-family: 'Poppins', 'Inter', sans-serif;
+}
+
+.web-recipe-btn.primary {
+  background: linear-gradient(135deg, #0077B6 0%, #00B4D8 100%);
+  color: white;
+  box-shadow: 0 4px 12px rgba(0, 119, 182, 0.2);
+}
+
+.web-recipe-btn.primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0, 119, 182, 0.35);
+  background: linear-gradient(135deg, #005f8f 0%, #0099b8 100%);
+}
+
+.web-recipe-btn.secondary {
+  background: white;
+  color: #1E2A3A;
+  border: 2px solid #e2e8f0;
+}
+
+.web-recipe-btn.secondary:hover {
+  background: #f8fafc;
+  border-color: #cbd5e1;
+}
+
+/* Ingredient Mapping */
+.web-recipe-mapping-container {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.web-recipe-mapping-subtitle {
+  text-align: center;
+  color: #64748b;
+  font-size: 1.1em;
+  margin-bottom: 32px;
+  line-height: 1.6;
+}
+
+.web-recipe-mapping-legend {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+  margin-bottom: 32px;
+  flex-wrap: wrap;
+  padding: 20px;
+  background: white;
+  border-radius: 12px;
+  border: 2px solid #e2e8f0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.mapping-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.95em;
+  color: #666;
+}
+
+.mapping-badge {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+}
+
+.mapping-badge.exact {
+  background: #10b981;
+}
+
+.mapping-badge.substitute {
+  background: #f59e0b;
+}
+
+.mapping-badge.missing {
+  background: #ef4444;
+}
+
+.web-recipe-mapping-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 32px;
+}
+
+.web-recipe-mapping-item {
+  background: white;
+  border: 2px solid #f0f0f0;
+  border-radius: 12px;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  transition: all 0.3s;
+}
+
+.web-recipe-mapping-item.exact {
+  border-left: 4px solid #10b981;
+  background: linear-gradient(to right, rgba(16, 185, 129, 0.05), white);
+}
+
+.web-recipe-mapping-item.substitute {
+  border-left: 4px solid #f59e0b;
+  background: linear-gradient(to right, rgba(245, 158, 11, 0.05), white);
+}
+
+.web-recipe-mapping-item.missing {
+  border-left: 4px solid #ef4444;
+  background: linear-gradient(to right, rgba(239, 68, 68, 0.05), white);
+}
+
+.mapping-item-badge {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.3em;
+}
+
+.mapping-item-badge.exact {
+  background: #10b981;
+  color: white;
+}
+
+.mapping-item-badge.substitute {
+  background: #f59e0b;
+  color: white;
+}
+
+.mapping-item-badge.missing {
+  background: #ef4444;
+  color: white;
+}
+
+.mapping-item-content {
+  flex: 1;
+}
+
+.mapping-item-recipe {
+  font-weight: 700;
+  color: #2c3e50;
+  font-size: 1.1em;
+  margin-bottom: 4px;
+}
+
+.mapping-item-inventory {
+  color: #666;
+  font-size: 0.95em;
+}
+
+.mapping-item-note {
+  margin-top: 8px;
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.7);
+  border-radius: 6px;
+  font-size: 0.9em;
+  color: #555;
+  font-style: italic;
+}
+
+.web-recipe-mapping-actions {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+}
+
+/* Success Screen */
+.web-recipe-success-container {
+  text-align: center;
+  padding: 60px 20px;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.web-recipe-success-icon {
+  font-size: 5em;
+  color: #10b981;
+  margin-bottom: 24px;
+  animation: successPop 0.5s ease;
+}
+
+@keyframes successPop {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.web-recipe-success-container h3 {
+  font-size: 1.8em;
+  color: #1E2A3A;
+  margin: 0 0 12px 0;
+  font-weight: 600;
+}
+
+.web-recipe-success-container p {
+  font-size: 1.1em;
+  color: #64748b;
+  margin-bottom: 32px;
+  line-height: 1.6;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .web-recipe-modal-content {
+    max-height: 95vh;
+    border-radius: 12px;
+  }
+  
+  .web-recipe-modal-header {
+    padding: 16px 20px;
+  }
+  
+  .web-recipe-modal-title {
+    font-size: 1.2em;
+  }
+  
+  .web-recipe-modal-body {
+    padding: 24px 20px;
+  }
+  
+  .web-recipe-results-grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+  
+  .web-recipe-search-box {
+    flex-direction: column;
+  }
+  
+  .web-recipe-search-button {
+    width: 100%;
+    justify-content: center;
+  }
+  
+  .web-recipe-detail-meta {
+    flex-direction: column;
+    gap: 12px;
+  }
+  
+  .web-recipe-ingredients-list {
+    grid-template-columns: 1fr;
+  }
+  
+  .web-recipe-mapping-legend {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+}

frontend/utils.js

@@ -0,0 +1,242 @@
+/**
+ * ChefCode Utility Functions - Condivise tra Web e Mobile
+ */
+
+// ===== STORAGE UTILS =====
+const storage = {
+  // Chiave principale per localStorage/AsyncStorage
+  key: 'chefcode:v1',
+  
+  // Salva dati (Web: localStorage, Mobile: AsyncStorage)
+  async save(data) {
+    try {
+      const serialized = JSON.stringify(data);
+      if (typeof window !== 'undefined' && window.localStorage) {
+        // Web
+        localStorage.setItem(this.key, serialized);
+      } else if (typeof AsyncStorage !== 'undefined') {
+        // React Native
+        await AsyncStorage.setItem(this.key, serialized);
+      }
+      return true;
+    } catch (error) {
+      console.error('Errore salvataggio:', error);
+      return false;
+    }
+  },
+  
+  // Carica dati
+  async load() {
+    try {
+      let data = null;
+      if (typeof window !== 'undefined' && window.localStorage) {
+        // Web
+        data = localStorage.getItem(this.key);
+      } else if (typeof AsyncStorage !== 'undefined') {
+        // React Native
+        data = await AsyncStorage.getItem(this.key);
+      }
+      
+      return data ? JSON.parse(data) : null;
+    } catch (error) {
+      console.error('Errore caricamento:', error);
+      return null;
+    }
+  },
+  
+  // Reset completo
+  async reset() {
+    try {
+      if (typeof window !== 'undefined' && window.localStorage) {
+        // Web
+        localStorage.removeItem(this.key);
+      } else if (typeof AsyncStorage !== 'undefined') {
+        // React Native
+        await AsyncStorage.removeItem(this.key);
+      }
+      return true;
+    } catch (error) {
+      console.error('Errore reset:', error);
+      return false;
+    }
+  }
+};
+
+// ===== PARSING UTILS =====
+const parser = {
+  // Parse comando vocale italiano (funziona per web e mobile)
+  parseItalianCommand(text) {
+    const lowerPrompt = text.toLowerCase();
+    console.log('🔍 Parsing comando:', lowerPrompt);
+    
+    // Rimuovi "aggiungi" dall'inizio
+    const cleanPrompt = lowerPrompt.replace(/^aggiungi\s+/, '').trim();
+    
+    // Trova prezzo con valute
+    const currencyPattern = /(€|\$|euro|dollaro|usd|eur)\s*(\d+(?:[.,]\d+)?)|(\d+(?:[.,]\d+)?)\s*(€|\$|euro|dollaro|usd|eur)/g;
+    let price = 0;
+    let priceMatch;
+    
+    while ((priceMatch = currencyPattern.exec(cleanPrompt)) !== null) {
+      const priceValue = priceMatch[2] || priceMatch[3];
+      if (priceValue) {
+        price = parseFloat(priceValue.replace(',', '.'));
+        break;
+      }
+    }
+    
+    // Rimuovi prezzo dal prompt
+    let promptWithoutPrice = cleanPrompt.replace(currencyPattern, '').trim();
+    
+    // Trova quantità + unità
+    let quantity = 0;
+    let unit = 'pz';
+    
+    const qtyUnitMatch = promptWithoutPrice.match(/(\d+(?:[.,]\d+)?)\s*(kg|g|grammi|kilogrammi|lt|l|litri|ml|millilitri|pz|pezzi|pcs|confezioni|bottiglie|lattine)/);
+    if (qtyUnitMatch) {
+      quantity = parseFloat(qtyUnitMatch[1].replace(',', '.'));
+      unit = qtyUnitMatch[2];
+      promptWithoutPrice = promptWithoutPrice.replace(qtyUnitMatch[0], '').trim();
+    } else {
+      const qtyMatch = promptWithoutPrice.match(/^(\d+(?:[.,]\d+)?)\s+/);
+      if (qtyMatch) {
+        quantity = parseFloat(qtyMatch[1].replace(',', '.'));
+        promptWithoutPrice = promptWithoutPrice.replace(qtyMatch[0], '').trim();
+      }
+    }
+    
+    // Nome (rimuovi articoli)
+    let name = promptWithoutPrice
+      .replace(/^(di|del|della|dei|degli|delle|il|la|lo|gli|le|un|una|uno)\s+/g, '')
+      .replace(/\s+(di|del|della|dei|degli|delle|il|la|lo|gli|le|un|una|uno)\s+/g, ' ')
+      .trim();
+    
+    return { quantity, unit, name, price };
+  },
+  
+  // Normalizza unità di misura
+  normalizeUnit(unit) {
+    const unitMap = {
+      'chili': 'kg', 'chilo': 'kg', 'chilogrammi': 'kg',
+      'grammi': 'g', 'gr': 'g',
+      'litro': 'l', 'litri': 'l', 'lt': 'l',
+      'millilitri': 'ml', 'ml': 'ml',
+      'pezzi': 'pz', 'pezzo': 'pz', 'pcs': 'pz',
+      'bottiglie': 'bt', 'bottiglia': 'bt'
+    };
+    
+    return unitMap[unit.toLowerCase()] || unit;
+  }
+};
+
+// ===== VALIDATION UTILS =====
+const validator = {
+  // Valida ingrediente
+  validateIngredient(item) {
+    const errors = [];
+    
+    if (!item.name || item.name.trim().length === 0) {
+      errors.push('Nome ingrediente richiesto');
+    }
+    
+    if (!item.quantity || item.quantity <= 0) {
+      errors.push('Quantità deve essere maggiore di 0');
+    }
+    
+    if (!item.unit || item.unit.trim().length === 0) {
+      errors.push('Unità di misura richiesta');
+    }
+    
+    if (item.price < 0) {
+      errors.push('Prezzo non può essere negativo');
+    }
+    
+    return {
+      isValid: errors.length === 0,
+      errors
+    };
+  },
+  
+  // Valida ricetta
+  validateRecipe(recipe) {
+    const errors = [];
+    
+    if (!recipe.name || recipe.name.trim().length === 0) {
+      errors.push('Nome ricetta richiesto');
+    }
+    
+    if (!recipe.items || !Array.isArray(recipe.items) || recipe.items.length === 0) {
+      errors.push('Ricetta deve avere almeno un ingrediente');
+    }
+    
+    recipe.items?.forEach((item, index) => {
+      const itemValidation = this.validateIngredient(item);
+      if (!itemValidation.isValid) {
+        errors.push(`Ingrediente ${index + 1}: ${itemValidation.errors.join(', ')}`);
+      }
+    });
+    
+    return {
+      isValid: errors.length === 0,
+      errors
+    };
+  }
+};
+
+// ===== FORMAT UTILS =====
+const formatter = {
+  // Formatta prezzo
+  currency(amount, currency = '€') {
+    return `${currency}${parseFloat(amount || 0).toFixed(2)}`;
+  },
+  
+  // Formatta data
+  date(date) {
+    return new Intl.DateTimeFormat('it-IT', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    }).format(new Date(date));
+  },
+  
+  // Formatta quantità
+  quantity(qty, unit) {
+    return `${parseFloat(qty || 0)} ${unit || 'pz'}`;
+  }
+};
+
+// ===== DEVICE UTILS =====
+const device = {
+  // Rileva piattaforma
+  isMobile() {
+    return typeof window !== 'undefined' && /Mobi|Android/i.test(navigator.userAgent);
+  },
+  
+  isWeb() {
+    return typeof window !== 'undefined' && typeof document !== 'undefined';
+  },
+  
+  isReactNative() {
+    return typeof navigator !== 'undefined' && navigator.product === 'ReactNative';
+  },
+  
+  // Info piattaforma
+  getPlatform() {
+    if (this.isReactNative()) return 'react-native';
+    if (this.isMobile()) return 'mobile-web';
+    if (this.isWeb()) return 'web';
+    return 'unknown';
+  }
+};
+
+// Export per browser
+if (typeof window !== 'undefined') {
+  window.ChefCodeUtils = { storage, parser, validator, formatter, device };
+  // Export individuali per retrocompatibilità
+  window.storage = storage;
+  window.parser = parser;
+  window.validator = validator;
+  window.formatter = formatter;
+  window.device = device;
+}

frontend/web-recipe-search.js

@@ -0,0 +1,527 @@
+/**
+ * Web Recipe Search Module
+ * Handles recipe search from TheMealDB and AI-powered ingredient mapping
+ */
+
+(function() {
+    'use strict';
+
+    // State management
+    let currentRecipe = null;
+    let searchResults = [];
+    let ingredientMappings = [];
+
+    // API endpoints (use existing ChefCode API)
+    const API_BASE = window.CHEFCODE_CONFIG?.API_URL || 'http://localhost:8000';
+    const API_KEY = window.CHEFCODE_CONFIG?.API_KEY || '';
+
+    // DOM Elements
+    const modal = document.getElementById('web-recipe-modal');
+    const searchBtn = document.getElementById('search-web-recipe-btn');
+    const closeBtn = document.getElementById('web-recipe-close-btn');
+    const searchInput = document.getElementById('web-recipe-search-input');
+    const searchButton = document.getElementById('web-recipe-search-btn');
+    
+    // Screens
+    const searchScreen = document.getElementById('web-recipe-search-screen');
+    const detailScreen = document.getElementById('web-recipe-detail-screen');
+    const mappingScreen = document.getElementById('web-recipe-mapping-screen');
+    const successScreen = document.getElementById('web-recipe-success-screen');
+    
+    // Screen elements
+    const loadingElement = document.getElementById('web-recipe-loading');
+    const resultsContainer = document.getElementById('web-recipe-results-container');
+    const emptyState = document.getElementById('web-recipe-empty');
+    const detailContent = document.getElementById('web-recipe-detail-content');
+    const mappingList = document.getElementById('web-recipe-mapping-list');
+    const mappingLoading = document.getElementById('web-recipe-mapping-loading');
+    const mappingResults = document.getElementById('web-recipe-mapping-results');
+
+    // Initialize
+    function init() {
+        attachEventListeners();
+        console.log('✅ Web Recipe Search module initialized');
+    }
+
+    // Event Listeners
+    function attachEventListeners() {
+        // Open modal
+        if (searchBtn) {
+            searchBtn.addEventListener('click', openModal);
+        }
+
+        // Close modal
+        if (closeBtn) {
+            closeBtn.addEventListener('click', closeModal);
+        }
+
+        // Close on overlay click
+        if (modal) {
+            modal.addEventListener('click', (e) => {
+                if (e.target === modal) {
+                    closeModal();
+                }
+            });
+        }
+
+        // Search functionality
+        if (searchButton) {
+            searchButton.addEventListener('click', performSearch);
+        }
+        
+        if (searchInput) {
+            searchInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    performSearch();
+                }
+            });
+        }
+
+        // Back buttons
+        const detailBackBtn = document.getElementById('web-recipe-detail-back');
+        if (detailBackBtn) {
+            detailBackBtn.addEventListener('click', () => showScreen('search'));
+        }
+
+        const mappingBackBtn = document.getElementById('web-recipe-mapping-back');
+        if (mappingBackBtn) {
+            mappingBackBtn.addEventListener('click', () => showScreen('detail'));
+        }
+
+        // Import button
+        const importBtn = document.getElementById('web-recipe-import-btn');
+        if (importBtn) {
+            importBtn.addEventListener('click', startImportProcess);
+        }
+
+        // Mapping actions
+        const mappingCancelBtn = document.getElementById('web-recipe-mapping-cancel');
+        if (mappingCancelBtn) {
+            mappingCancelBtn.addEventListener('click', () => showScreen('detail'));
+        }
+
+        const mappingConfirmBtn = document.getElementById('web-recipe-mapping-confirm');
+        if (mappingConfirmBtn) {
+            mappingConfirmBtn.addEventListener('click', saveRecipe);
+        }
+
+        // Success close
+        const successCloseBtn = document.getElementById('web-recipe-success-close');
+        if (successCloseBtn) {
+            successCloseBtn.addEventListener('click', closeModal);
+        }
+    }
+
+    // Modal Management
+    function openModal() {
+        if (modal) {
+            modal.style.display = 'flex';
+            showScreen('search');
+            if (searchInput) {
+                searchInput.focus();
+            }
+        }
+    }
+
+    function closeModal() {
+        if (modal) {
+            modal.style.display = 'none';
+            resetModal();
+        }
+    }
+
+    function resetModal() {
+        currentRecipe = null;
+        searchResults = [];
+        ingredientMappings = [];
+        if (searchInput) searchInput.value = '';
+        if (resultsContainer) resultsContainer.innerHTML = '';
+        showScreen('search');
+    }
+
+    function showScreen(screenName) {
+        console.log('Switching to screen:', screenName);
+        
+        // Hide all screens
+        [searchScreen, detailScreen, mappingScreen, successScreen].forEach(screen => {
+            if (screen) screen.classList.remove('active');
+        });
+
+        // Show requested screen
+        switch(screenName) {
+            case 'search':
+                if (searchScreen) {
+                    searchScreen.classList.add('active');
+                    console.log('Search screen activated');
+                }
+                break;
+            case 'detail':
+                if (detailScreen) {
+                    detailScreen.classList.add('active');
+                    console.log('Detail screen activated');
+                } else {
+                    console.error('Detail screen element not found!');
+                }
+                break;
+            case 'mapping':
+                if (mappingScreen) {
+                    mappingScreen.classList.add('active');
+                    console.log('Mapping screen activated');
+                }
+                break;
+            case 'success':
+                if (successScreen) {
+                    successScreen.classList.add('active');
+                    console.log('Success screen activated');
+                }
+                break;
+        }
+    }
+
+    // Search Functionality
+    async function performSearch() {
+        const query = searchInput?.value.trim();
+        if (!query) {
+            alert('Please enter a search term');
+            return;
+        }
+
+        try {
+            // Show loading
+            if (loadingElement) loadingElement.style.display = 'flex';
+            if (resultsContainer) resultsContainer.style.display = 'none';
+            if (emptyState) emptyState.style.display = 'none';
+
+            // Call backend to search recipes
+            const response = await fetch(`${API_BASE}/api/web-recipes/search_recipes`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-API-Key': API_KEY
+                },
+                body: JSON.stringify({
+                    query: query,
+                    cuisine: null,
+                    restrictions: []
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error('Search failed');
+            }
+
+            const recipes = await response.json();
+            searchResults = recipes;
+
+            // Hide loading
+            if (loadingElement) loadingElement.style.display = 'none';
+
+            // Display results or empty state
+            if (recipes && recipes.length > 0) {
+                displaySearchResults(recipes);
+            } else {
+                if (emptyState) emptyState.style.display = 'block';
+            }
+
+        } catch (error) {
+            console.error('Search error:', error);
+            if (loadingElement) loadingElement.style.display = 'none';
+            alert('Failed to search recipes. Please try again.');
+        }
+    }
+
+    function displaySearchResults(recipes) {
+        if (!resultsContainer) return;
+
+        resultsContainer.innerHTML = '';
+        resultsContainer.style.display = 'grid';
+
+        recipes.forEach(recipe => {
+            const card = createRecipeCard(recipe);
+            resultsContainer.appendChild(card);
+        });
+    }
+
+    function createRecipeCard(recipe) {
+        const card = document.createElement('div');
+        card.className = 'web-recipe-card';
+        card.onclick = () => {
+            console.log('Recipe card clicked:', recipe.name);
+            showRecipeDetail(recipe);
+        };
+
+        const imageUrl = recipe.image || '';
+        const category = recipe.category || 'Other';
+        const cuisine = recipe.area || 'International';
+        const ingredientCount = recipe.ingredients?.length || 0;
+
+        card.innerHTML = `
+            <img src="${imageUrl}" alt="${recipe.name}" class="web-recipe-card-image" 
+                 onerror="this.src='data:image/svg+xml,%3Csvg xmlns=\\'http://www.w3.org/2000/svg\\' width=\\'400\\' height=\\'200\\'%3E%3Crect fill=\\'%23667eea\\' width=\\'400\\' height=\\'200\\'/%3E%3Ctext fill=\\'white\\' x=\\'50%25\\' y=\\'50%25\\' text-anchor=\\'middle\\' dominant-baseline=\\'middle\\' font-size=\\'24\\' font-family=\\'Arial\\'%3E${recipe.name}%3C/text%3E%3C/svg%3E'">
+            <div class="web-recipe-card-content">
+                <h3 class="web-recipe-card-title">${recipe.name}</h3>
+                <div class="web-recipe-card-meta">
+                    <span class="web-recipe-card-badge">
+                        <i class="fas fa-utensils"></i> ${category}
+                    </span>
+                    <span class="web-recipe-card-badge">
+                        <i class="fas fa-globe"></i> ${cuisine}
+                    </span>
+                </div>
+                <p style="color: #666; font-size: 0.95em; margin-top: 8px;">
+                    <i class="fas fa-list"></i> ${ingredientCount} ingredients
+                </p>
+            </div>
+        `;
+
+        return card;
+    }
+
+    function showRecipeDetail(recipe) {
+        console.log('showRecipeDetail called for:', recipe.name);
+        currentRecipe = recipe;
+        
+        if (!detailContent) {
+            console.error('detailContent element not found!');
+            return;
+        }
+
+        const imageUrl = recipe.image || '';
+        const category = recipe.category || 'Other';
+        const cuisine = recipe.area || 'International';
+        
+        let ingredientsHTML = '<ul class="web-recipe-ingredients-list">';
+        recipe.ingredients.forEach(ing => {
+            ingredientsHTML += `
+                <li>
+                    <i class="fas fa-check-circle"></i>
+                    <span><strong>${ing.name}</strong> ${ing.measure ? '- ' + ing.measure : ''}</span>
+                </li>
+            `;
+        });
+        ingredientsHTML += '</ul>';
+
+        detailContent.innerHTML = `
+            <img src="${imageUrl}" alt="${recipe.name}" class="web-recipe-detail-image"
+                 onerror="this.style.display='none'">
+            <h2 class="web-recipe-detail-title">${recipe.name}</h2>
+            <div class="web-recipe-detail-meta">
+                <span class="web-recipe-card-badge" style="font-size: 1em;">
+                    <i class="fas fa-utensils"></i> ${category}
+                </span>
+                <span class="web-recipe-card-badge" style="font-size: 1em;">
+                    <i class="fas fa-globe"></i> ${cuisine}
+                </span>
+                <span class="web-recipe-card-badge" style="font-size: 1em;">
+                    <i class="fas fa-list"></i> ${recipe.ingredients.length} ingredients
+                </span>
+            </div>
+            <div class="web-recipe-detail-section">
+                <h4><i class="fas fa-carrot"></i> Ingredients</h4>
+                ${ingredientsHTML}
+            </div>
+            <div class="web-recipe-detail-section">
+                <h4><i class="fas fa-clipboard-list"></i> Instructions</h4>
+                <div class="web-recipe-instructions">${recipe.instructions || 'No instructions available.'}</div>
+            </div>
+        `;
+
+        showScreen('detail');
+    }
+
+    // Import Process
+    async function startImportProcess() {
+        console.log('=== Starting Import Process ===');
+        
+        if (!currentRecipe) {
+            console.error('No current recipe!');
+            return;
+        }
+
+        console.log('Current recipe:', currentRecipe);
+        showScreen('mapping');
+        
+        if (mappingLoading) mappingLoading.style.display = 'flex';
+        if (mappingResults) mappingResults.style.display = 'none';
+
+        try {
+            // Prepare ingredients for mapping
+            const recipeIngredients = currentRecipe.ingredients.map(ing => ({
+                name: ing.name,
+                quantity: ing.measure.split(' ')[0] || '1',
+                unit: ing.measure.split(' ').slice(1).join(' ') || 'pz'
+            }));
+            
+            console.log('Prepared ingredients:', recipeIngredients);
+            console.log('API URL:', `${API_BASE}/api/web-recipes/map_ingredients`);
+            console.log('API Key present:', !!API_KEY);
+
+            // Call backend to map ingredients
+            const response = await fetch(`${API_BASE}/api/web-recipes/map_ingredients`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-API-Key': API_KEY
+                },
+                body: JSON.stringify({
+                    recipe_id: currentRecipe.id,
+                    recipe_ingredients: recipeIngredients
+                })
+            });
+
+            if (!response.ok) {
+                const errorText = await response.text();
+                console.error('API Response Error:', response.status, errorText);
+                throw new Error(`Ingredient mapping failed: ${response.status} - ${errorText}`);
+            }
+
+            const result = await response.json();
+            console.log('Mapping result:', result);
+            
+            if (!result.mappings || !Array.isArray(result.mappings)) {
+                console.error('Invalid mappings format:', result);
+                throw new Error('Invalid response format from server');
+            }
+            
+            ingredientMappings = result.mappings;
+
+            // Display mappings
+            displayIngredientMappings(result.mappings);
+
+            if (mappingLoading) mappingLoading.style.display = 'none';
+            if (mappingResults) mappingResults.style.display = 'block';
+
+        } catch (error) {
+            console.error('Mapping error details:', error);
+            console.error('Error stack:', error.stack);
+            alert(`Failed to map ingredients: ${error.message}\n\nCheck console for details.`);
+            showScreen('detail');
+        }
+    }
+
+    function displayIngredientMappings(mappings) {
+        if (!mappingList) return;
+
+        mappingList.innerHTML = '';
+
+        mappings.forEach(mapping => {
+            const item = createMappingItem(mapping);
+            mappingList.appendChild(item);
+        });
+    }
+
+    function createMappingItem(mapping) {
+        const div = document.createElement('div');
+        const matchType = mapping.match_type || 'missing';
+        
+        div.className = `web-recipe-mapping-item ${matchType}`;
+
+        let badgeIcon = '';
+        let mappedText = '';
+
+        switch(matchType) {
+            case 'exact':
+                badgeIcon = '✅';
+                mappedText = `Matched to: <strong>${mapping.mapped_to}</strong>`;
+                break;
+            case 'substitute':
+                badgeIcon = '🔄';
+                mappedText = `Substitute: <strong>${mapping.mapped_to}</strong>`;
+                break;
+            case 'missing':
+                badgeIcon = '❌';
+                mappedText = '<span style="color: #ef4444;">Not in inventory</span>';
+                break;
+        }
+
+        div.innerHTML = `
+            <div class="mapping-item-badge ${matchType}">${badgeIcon}</div>
+            <div class="mapping-item-content">
+                <div class="mapping-item-recipe">
+                    ${mapping.recipe_ingredient} 
+                    <span style="font-weight: normal; color: #999;">
+                        (${mapping.recipe_quantity} ${mapping.recipe_unit})
+                    </span>
+                </div>
+                <div class="mapping-item-inventory">${mappedText}</div>
+                ${mapping.note ? `<div class="mapping-item-note">${mapping.note}</div>` : ''}
+            </div>
+        `;
+
+        return div;
+    }
+
+    // Save Recipe
+    async function saveRecipe() {
+        if (!currentRecipe || !ingredientMappings) return;
+
+        try {
+            // Prepare data for saving
+            const saveData = {
+                recipe_id: currentRecipe.id,
+                name: currentRecipe.name,
+                instructions: currentRecipe.instructions || '',
+                cuisine: currentRecipe.area || null,
+                image_url: currentRecipe.image || null,
+                source_url: currentRecipe.source_url || `https://www.themealdb.com/meal/${currentRecipe.id}`,
+                ingredients_raw: currentRecipe.ingredients,
+                ingredients_mapped: ingredientMappings
+            };
+
+            // Call backend to save recipe
+            const response = await fetch(`${API_BASE}/api/web-recipes/save_recipe`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-API-Key': API_KEY
+                },
+                body: JSON.stringify(saveData)
+            });
+
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.detail || 'Failed to save recipe');
+            }
+
+            const result = await response.json();
+            console.log('✅ Recipe saved:', result);
+
+            // Show success screen
+            showScreen('success');
+
+            // Refresh recipe catalogue if on that page
+            if (typeof loadRecipeCatalogue === 'function') {
+                setTimeout(() => {
+                    loadRecipeCatalogue();
+                }, 1000);
+            }
+
+        } catch (error) {
+            console.error('Save error:', error);
+            alert(error.message || 'Failed to save recipe. Please try again.');
+        }
+    }
+
+    // Initialize when DOM is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+
+    // Public API for external modules (like AI Assistant)
+    window.WEB_RECIPE_SEARCH = {
+        openModal: openModal,
+        closeModal: closeModal,
+        searchWithQuery: function(query) {
+            openModal();
+            if (searchInput) {
+                searchInput.value = query;
+                // Trigger search automatically
+                setTimeout(() => performSearch(), 300);
+            }
+        }
+    };
+
+})();
+

requirements.txt

@@ -0,0 +1,28 @@
+# FastAPI and server
+fastapi==0.104.1
+uvicorn[standard]==0.24.0
+python-multipart==0.0.6
+
+# Database
+sqlalchemy==2.0.23
+databases[sqlite]==0.9.0
+aiosqlite==0.19.0
+
+# AI and ML
+openai>=1.0.0
+pydantic==2.5.0
+
+# HTTP requests
+httpx>=0.25.0
+
+# File handling
+aiofiles>=23.0.0
+
+# Environment
+python-dotenv==1.0.0
+
+# Optional: Google services (if needed)
+google-cloud-documentai>=2.20.0
+google-api-core>=2.11.0
+google-generativeai>=0.8.0
+pillow>=10.0.0