📖 DOCUMENTATION TECHNIQUE COMPLÈTE

Structure des Fichiers

// Structure du projet
📁 okcuisine.pro/
├── 📄 index.html        // Structure SPA (35 pages)
├── 📄 manifest.json     // Configuration PWA
├── 📄 sw.js             // Service Worker (cache offline)
├── 📁 css/
│   └── 📄 style.css     // Styles (~3000 lignes)
└── 📁 js/
    ├── 📄 app.js        // Noyau application
    ├── 📄 storage.js    // Persistance données (124 fonctions)
    ├── 📄 crypto.js     // Chiffrement AES-256-GCM
    ├── 📄 permissions.js// Gestion des 7 rôles
    ├── 📄 ui.js         // Interface utilisateur
    ├── 📄 voice.js      // Reconnaissance vocale (69 fonctions)
    ├── 📄 voice-ai.js   // IA vocale (55 fonctions)
    └── ... // 40+ autres modules
                    

Diagramme d'Architecture

┌─────────────────────────────────────────────────────────────────────┐
│                        COUCHE PRÉSENTATION                         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐  ┌────────────┐  │
│  │ index.html  │  │  style.css  │  │   ui.js     │  │keyboard.js │  │
│  │ (Structure) │  │  (Styles)   │  │ (Modales,   │  │(Raccourcis)│  │
│  │             │  │             │  │  Toasts)    │  │            │  │
│  └─────────────┘  └─────────────┘  └─────────────┘  └────────────┘  │
└─────────────────────────────────────────────────────────────────────┘
                               │
                               ▼
┌─────────────────────────────────────────────────────────────────────┐
│                      COUCHE LOGIQUE MÉTIER                         │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐  │
│  │Températ. │ │Nettoyage │ │Réceptions│ │Inventaire│ │  Agents  │  │
│  └──────────┘ └──────────┘ └──────────┘ └──────────┘ └──────────┘  │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐  │
│  │  Audit   │ │Simulateur│ │Formation │ │Allergènes│ │   PAI    │  │
│  └──────────┘ └──────────┘ └──────────┘ └──────────┘ └──────────┘  │
│                    ... + 30 autres modules                          │
└─────────────────────────────────────────────────────────────────────┘
                               │
                               ▼
┌─────────────────────────────────────────────────────────────────────┐
│                        COUCHE DONNÉES                              │
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐     │
│  │   storage.js    │  │    crypto.js    │  │  permissions.js │     │
│  │  (localStorage) │  │  (AES-256-GCM)  │  │   (7 rôles)     │     │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘     │
└─────────────────────────────────────────────────────────────────────┘
                               │
                               ▼
┌─────────────────────────────────────────────────────────────────────┐
│                        COUCHE VOCALE                               │
│  ┌─────────────────────────┐  ┌─────────────────────────┐          │
│  │       voice.js          │  │      voice-ai.js        │          │
│  │  (Web Speech API)       │  │  (IA conversationnelle) │          │
│  │  - Wake word detection  │  │  - Analyse intentions   │          │
│  │  - Flux conversationnels│  │  - Extraction entités   │          │
│  │  - Synthèse vocale      │  │  - Questions analytiques│          │
│  └─────────────────────────┘  └─────────────────────────┘          │
└─────────────────────────────────────────────────────────────────────┘
                    

Pattern de Communication entre Modules

Objet Principal

const App = {
    // État de l'utilisateur connecté
    currentUser: null,       // Objet utilisateur {id, nom, role, initiales, pin}
    currentPage: 'dashboard', // Page active
    
    // Authentification PIN
    pinBuffer: '',            // Chiffres saisis
    selectedUserId: null,     // Utilisateur en cours de connexion
    pinAttempts: {},          // Compteur tentatives par user
    lockedUntil: {},          // Timestamp de déblocage par user
    
    // Configuration sécurité
    MAX_PIN_ATTEMPTS: 3,      // Tentatives avant blocage
    LOCKOUT_MS: 5 * 60 * 1000, // Durée blocage (5 min)
    IDLE_TIMEOUT_MS: 5 * 60 * 1000, // Déconnexion inactivité (5 min)
    
    // ... méthodes
}
                    

Fonctions Principales

Workflow d'Authentification

Principe de Base

const Storage = {
    PREFIX: 'okc_',  // Préfixe pour éviter les collisions
    
    // Méthode de base pour sauvegarder
    save(name, data) {
        // Si donnée sensible → chiffrement AES-256
        if (Crypto.isSensitive(name)) {
            Crypto.updateAndEncrypt(name, data);
            return;
        }
        // Sinon → JSON simple
        localStorage.setItem('okc_' + name, JSON.stringify(data));
    },
    
    // Méthode de base pour charger
    load(name, defaultValue) {
        if (Crypto.isSensitive(name)) {
            return Crypto.getCached(name, defaultValue);
        }
        const raw = localStorage.getItem('okc_' + name);
        return raw ? JSON.parse(raw) : defaultValue;
    }
}
                    

Clés de Stockage Principales

Fonctions de Hash PIN

/**
 * Génère un hash irréversible pour le PIN
 * Utilisé pour stocker les PIN de façon sécurisée
 */
hashPin(pin) {
    const salt = 'okc_2025_v1';  // Salt constant
    const combined = salt + pin;
    let hash = 0;
    
    // Algorithme de hash simple mais suffisant pour des PIN 4 chiffres
    for (let i = 0; i < combined.length; i++) {
        const char = combined.charCodeAt(i);
        hash = ((hash << 5) - hash) + char;
        hash = hash & 0xFFFFFFFF;  // 32-bit integer
    }
    
    return 'h' + Math.abs(hash).toString(16);
}
                    

Pattern d'Utilisation (exemple Températures)

// 1. LECTURE — Récupérer les températures du jour
getTemperatures(date) {
    const key = 'temp_' + (date || this.today());
    return this.load(key, []);  // [] si pas de données
}

// 2. ÉCRITURE — Ajouter un relevé
addTemperature(entry) {
    const key = 'temp_' + this.today();
    const list = this.load(key, []);
    
    // Enrichir l'entrée avec métadonnées
    entry.id = this.uid();           // ID unique
    entry.timestamp = new Date().toISOString();
    entry.date = this.today();
    entry.user = App.currentUser?.nom || 'Inconnu';
    
    list.push(entry);
    this.save(key, list);
    
    // Journaliser l'action
    Journal.log('temperature', `Temperature ${entry.zone}: ${entry.valeur}°C`);
    
    return entry;
}
                    

Architecture Cryptographique

┌─────────────────────────────────────────────────────────────┐
│                  ARCHITECTURE CHIFFREMENT                    │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│   PIN Utilisateur (4 chiffres)                             │
│           │                                                  │
│           ▼                                                  │
│   ┌─────────────────┐                                        │
│   │    PBKDF2       │  100 000 itérations                    │
│   │    SHA-256      │  + Salt (16 bytes, unique)             │
│   └────────┬────────┘                                        │
│            ▼                                                 │
│   ┌─────────────────┐                                        │
│   │      KEK        │  Key Encryption Key (256-bit)         │
│   │  (par user)     │  Dérivée du PIN — en mémoire          │
│   └────────┬────────┘                                        │
│            │                                                 │
│            ▼                                                 │
│   ┌─────────────────┐     ┌─────────────────┐               │
│   │   KEYRING       │────▶│      DEK        │              │
│   │ (localStorage)  │     │ Data Encryption │ 256-bit       │
│   │ DEK chiffrée    │     │ Key (mémoire)   │               │
│   └─────────────────┘     └────────┬────────┘               │
│                                    │                         │
│                                    ▼                         │
│                          ┌─────────────────┐                │
│                          │   AES-256-GCM   │                │
│                          │   IV = 12 bytes │                │
│                          └────────┬────────┘                │
│                                   │                          │
│                                   ▼                          │
│                          ┌─────────────────┐                │
│                          │ Données Chiffrées│                │
│                          │ (localStorage)  │                │
│                          └─────────────────┘                │
│                                                              │
└─────────────────────────────────────────────────────────────┘
                    

Données Chiffrées (8 clés)

Fonctions Principales

Les 7 Rôles

Matrice des Accès aux Pages

const pageRoles = {
    // Opérations quotidiennes
    'dashboard':       'all',  // Tout le monde
    'temperatures':    ['admin','gestionnaire','directeur','chef','remplacant','second'],
    'nettoyage':       'all',
    'receptions':      ['admin','gestionnaire','directeur','chef','remplacant','second'],
    'inventaire':      ['admin','gestionnaire','directeur','chef','remplacant','second'],
    
    // Sécurité alimentaire
    'allergenes':      ['admin','gestionnaire','directeur','chef','remplacant'],
    'pai':             ['admin','gestionnaire','directeur','chef','remplacant'],
    'tiac':            ['admin','gestionnaire','directeur','chef','remplacant'],
    
    // Gestion système
    'rgpd':            ['admin','gestionnaire','directeur'],
    'config':          'all',  // Lecture pour tous, écriture contrôlée
    
    // ... 25+ autres pages
}
                    

Mode Vue Essentielle (Admin)

// Pages affichées en mode essentiel
essentialPages: [
    'dashboard',
    'agents',
    'stock-entretien',
    'calendrier',
    'audit',
    'journal',
    'archivage-dlc',
    'config'
]
                    

Fonctions Principales

Exemple : UI.confirm()

// Utilisation avec async/await
async function deleteItem(id) {
    const confirmed = await UI.confirm(
        'Confirmer la suppression',
        'Êtes-vous sûr de vouloir supprimer cet élément ?'
    );
    
    if (confirmed) {
        Storage.removeItem(id);
        UI.toast('Élément supprimé', 'success');
        render();
    }
}
                    

Températures (temperatures.js)

Gestion des relevés de température de stockage et des Points Critiques de Contrôle (CCP).

Deux types de relevés :

Workflow de relevé :

Nettoyage (nettoyage.js)

Suivi des nettoyages et désinfections avec checklist par zone.

Vues selon le rôle :

Réceptions (receptions.js)

Contrôle des marchandises à réception conforme CE 852/2004.

Champs du formulaire :

Voice.js — Reconnaissance Vocale

Wake Word Detection

// Variantes reconnues pour activer l'assistant
_matchWakeWord(text) {
    const variants = [
        'ok cuisine',
        'okay cuisine',
        'aucune cuisine',  // Erreur fréquente Google
        'oh cuisine',
        'hockey cuisine',  // Autre erreur
        'o cuisine',
        'ok cousine'
    ];
    return variants.some(v => text.includes(v));
}
                    

Flux Conversationnels (18 flux)

VoiceAI.js — Intelligence Conversationnelle

Questions Analytiques

Extraction d'Entités

// Exemples d'extraction automatique

// Dates
"demain"           → { date: '2026-03-11', label: 'demain' }
"mardi prochain"   → { date: '2026-03-17', label: 'mardi' }
"le 15"            → { date: '2026-03-15', label: '15 mars' }

// Températures
"moins 22 virgule 5" → -22.5
"4 degrés"           → 4

// Heures
"14h30"    → '14:30'
"midi"     → '12:00'
                    

Manifest.json

{
    "name": "OK Cuisine — Assistant HACCP Vocal",
    "short_name": "OK Cuisine",
    "description": "Application HACCP vocale pour cuisines professionnelles.",
    "start_url": "/index.html",
    "display": "standalone",        // Sans barre navigateur
    "orientation": "any",          // Portrait ou paysage
    "background_color": "#0f0f1a",
    "theme_color": "#1a1a2e",
    "lang": "fr"
}
                    

Service Worker (sw.js)

const CACHE_NAME = 'ok-cuisine-v34';
const URLS_TO_CACHE = [
    '/',
    '/index.html',
    '/css/style.css',
    '/js/app.js',
    // ... 48 fichiers au total
];

// Stratégie : Network First, Cache Fallback
self.addEventListener('fetch', event => {
    event.respondWith(
        fetch(event.request)
            .then(response => {
                // Succès réseau → mise en cache
                if (response.ok) {
                    const clone = response.clone();
                    caches.open(CACHE_NAME).then(cache => {
                        cache.put(event.request, clone);
                    });
                }
                return response;
            })
            .catch(() => {
                // Échec réseau → cache
                return caches.match(event.request);
            })
    );
});
                    

Inventaire (inventaire.js)

Gestion complète du stock alimentaire avec suivi DLC et alertes automatiques.

Zones de Stockage

const ZONES_STOCKAGE = {
    'frigo':        { label: 'Réfrigérateur', temp: '0-4°C', icon: '❄️' },
    'chambre-froide': { label: 'Chambre froide positive', temp: '0-4°C', icon: '🧊' },
    'congelateur':  { label: 'Congélateur', temp: '-18°C', icon: '⬜' },
    'reserve-seche': { label: 'Réserve sèche', temp: '15-25°C', icon: '📦' },
    'legumerie':    { label: 'Légumerie', temp: '10-15°C', icon: '🥬' }
}
                    

Statuts DLC avec Code Couleur

Fonctions Principales

Agents (agents.js)

Gestion du personnel, des secteurs d'affectation et des comptes utilisateur.

48 Secteurs Prédéfinis

const DEFAULT_SECTORS = [
    // Écoles
    'École A', 'École B', 'École C', ...,
    // Collèges
    'Collège Centre', 'Collège Nord', ...,
    // Autres
    'EHPAD', 'Crèche municipale', 'Centre de loisirs', ...
    // Total : 48 secteurs
]
                    

Groupes Prédéfinis

Workflow Création Utilisateur

Archivage vs Suppression

Stock Entretien (stock-entretien.js)

Gestion des commandes internes de fournitures/équipements entre agents et managers.

Workflow Commande Interne

Audit (audit.js) — Score /100

Système de scoring automatique basé sur les données saisies dans l'application.

Calcul du Score

function calculateScore() {
    let score = 0;
    const today = Storage.today();
    
    // Températures (25 points max)
    const temps = Storage.getTemperatures(today);
    if (temps.length >= 3) score += 15;  // Complétion
    if (temps.every(t => t.conforme)) score += 10;  // Conformité
    
    // Nettoyages (20 points max)
    const nets = Storage.getNettoyages(today);
    if (nets.length >= 5) score += 20;
    
    // Réceptions (15 points max)
    const recs = Storage.getReceptions(today);
    if (recs.length > 0 && recs.every(r => r.conforme)) score += 15;
    
    // Traçabilité (15 points max)
    if (hasValidDLC()) score += 15;
    
    // Allergènes (15 points max)
    if (hasAllergenDeclarations()) score += 15;
    
    // Formation (10 points max)
    if (hasTrainedStaff()) score += 10;
    
    return score;  // /100
}
                    

Interprétation

Simulateur DDPP (simulateur.js)

Simulation d'inspection officielle avec 87 questions réparties en 14 sections.

Les 14 Sections

Exemple de Question

{
    "section": 7,
    "question": "Les températures des produits sont-elles vérifiées à réception ?",
    "ref_reglementaire": "CE 852/2004 Annexe II Chap. IX",
    "criticite": "majeure",
    "options": [
        { "label": "Oui, systématiquement", "score": 4 },
        { "label": "Parfois", "score": 2 },
        { "label": "Non", "score": 0 }
    ]
}
                    

Notation Finale

Formation de Base (formation.js)

Quiz HACCP interactifs avec suivi de progression.

Caractéristiques

Formation 14h Pro (fp-module-01.js → 07.js)

Formation professionnelle conforme à la réglementation sur l'hygiène alimentaire (14h obligatoires).

Les 7 Modules

Structure d'un Module

const FPModule01 = {
    metadata: {
        id: 'fp-01',
        title: 'Dangers alimentaires',
        duration: 120,  // minutes
        prerequisites: []  // Aucun pour le 1er
    },
    
    sections: [
        {
            title: 'Les dangers microbiologiques',
            content: `...HTML du cours...`,
            quiz: [
                {
                    question: 'Quelle bactérie cause le botulisme ?',
                    options: ['Salmonella', 'Clostridium botulinum', 'E. coli'],
                    correct: 1,
                    explanation: 'Clostridium botulinum produit une toxine mortelle...'
                }
            ]
        }
    ],
    
    render() { /* Affichage du module */ },
    submitQuiz() { /* Validation des réponses */ }
}
                    

Centre de Formation (centre-formation.js)

Tableau de bord administrateur pour suivre les formations de toute l'équipe.

Fonctionnalités

• Vue globale de la progression de chaque agent
• Export PDF des attestations
• Relance automatique des formations expirées (rappel tous les 3 ans)
• Statistiques de complétion par secteur/groupe

Allergènes (allergenes.js)

Déclaration et suivi des 14 allergènes à déclaration obligatoire (Règlement UE 1169/2011).

Les 14 Allergènes Obligatoires

Déclaration par Plat

// Structure d'un plat avec allergènes
{
    "id": "plat_001",
    "nom": "Gratin dauphinois",
    "allergenes": ["lactose", "gluten"],
    "ingredients": ["pommes de terre", "crème", "lait"],
    "traces_possibles": ["oeufs"],  // Cross-contact
    "date_declaration": "2026-03-10",
    "declarant": "Chef Martin"
}
                    

PAI — Projet d'Accueil Individualisé (pai.js)

Gestion des régimes alimentaires spéciaux pour enfants avec allergies/intolérances.

Structure d'un PAI

{
    "id": "pai_001",
    "enfant": {
        "prenom": "Lucas",
        "nom": "D.",  // Nom tronqué
        "classe": "CM1",
        "etablissement": "École Jean Moulin"
    },
    "allergies": ["arachides", "fruits_coque"],
    "protocole": "PAI avec kit d'urgence",
    "contacts_urgence": [...],
    "date_validite": "2026-09-01",
    "medecin": "Dr. Martin"
}
                    

Alertes Menu-PAI

Le module menu-pai-crosscheck.js croise automatiquement les menus du jour avec les PAI actifs et génère des alertes si un plat contient un allergène concerné.

TIAC — Toxi-Infection Alimentaire (tiac.js)

Enregistrement et suivi des incidents de toxi-infection alimentaire collective.

Workflow de Déclaration TIAC