Orama Front

Orama Front est l’interface web principale du système IRCHAD, dédiée à la gestion, la configuration et la visualisation des environnements pour différents profils d’utilisateurs : administrateur, décideur et commercial.

---

Table des matières

• Aperçu du projet
• Fonctionnalités principales
• Vues et rôles utilisateurs
  • Administrateur
  • Décideur
  • Commercial
• Installation et lancement
• Commandes NPM utiles
• Structure du projet
• Technologies utilisées

---

Aperçu du projet

Orama Front permet :

• La configuration et la gestion des environnements intérieurs (plans, zones, obstacles, etc.)
• La gestion des utilisateurs et des dispositifs connectés
• Le monitoring en temps réel via un tableau de bord
• L’accès à des vues personnalisées selon le rôle de l’utilisateur

---

Fonctionnalités principales

• Gestion des environnements : création, modification, import/export de plans, dessin manuel ou upload de plans compatibles.
• Gestion des utilisateurs : ajout, modification, assignation à des environnements, retrait.
• Gestion des dispositifs : visualisation, ajout, suppression, monitoring.
• Monitoring : tableau de bord temps réel (CPU, RAM, température, etc.).
• Vues adaptées : chaque type d’utilisateur dispose d’une interface dédiée à ses besoins.

---

Vues et rôles utilisateurs

Administrateur

• Configuration des environnements : création, édition, import/export de plans (upload ou dessin manuel).
• Gestion des utilisateurs : création, assignation/retrait d’utilisateurs à des environnements.
• Gestion des dispositifs : ajout, suppression, visualisation des dispositifs connectés.
• Monitoring : accès au tableau de bord pour surveiller l’état des dispositifs en temps réel.

Décideur

• Visualisation des statistiques : accès à des tableaux de bord synthétiques (ventes, utilisateurs, dispositifs).
• Consultation des historiques : suivi des activités et des performances.

Commercial

• Gestion des clients : ajout, modification, suivi des clients.
• Suivi des ventes : accès à l’historique des ventes, génération de devis, etc.

---

Installation et lancement

1. Cloner le dépôt :

   git clone <url-du-repo>
   cd orama_web_front

2. Installer les dépendances :

   npm install

3. Lancer le serveur de développement :

   npm run dev

4. Accéder à l’application : Ouvre http://localhost:3000 dans ton navigateur.

---

Commandes NPM utiles

• npm run dev : démarre le serveur de développement Next.js
• npm run build : construit l’application pour la production
• npm run start : lance l’application en mode production (après build)
• npm run lint : vérifie la qualité du code avec ESLint

---

Structure du projet

/app            - Fichiers de l’application Next.js
  /components   - Composants UI réutilisables
  /contexts     - Contextes React
  /hooks        - Hooks personnalisés
  /lib          - Fonctions utilitaires (floorplan, etc.)
  /services     - Fonctions d’appel API
/public         - Assets statiques
/styles         - Styles globaux

---

Technologies utilisées

• Framework : Next.js (React)
• Styling : Tailwind CSS
• UI : Radix UI, Lucide React
• Gestion d’état : React Context API
• Data Fetching : Axios, Socket.IO
• Authentification : JWT custom avec RBAC
• Formulaires : React Hook Form
• Visualisation : Recharts

---

Accessibilité

L’interface respecte les standards WCAG 2.1 AA pour garantir l’accessibilité à tous les utilisateurs.

---

Contribution

Merci de suivre les bonnes pratiques TypeScript, d’assurer la compatibilité multi-navigateurs et de maintenir une interface responsive et accessible.

---