Fix some code

README.md

@@ -1,54 +1,50 @@
-# React + TypeScript + Vite
+# Application [4NK] - Interface Web
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Cette application React fournit une interface pour interagir avec la plateforme [4NK]. Elle permet l'authentification des utilisateurs, la création de profils et de dossiers, ainsi que la visualisation des processus.
 
-Currently, two official plugins are available:
+## Fonctionnalités principales
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- Authentification utilisateur via OAuth
+- Création et gestion de profils utilisateur
+- Création et gestion de dossiers
+- Visualisation des processus
+- Console de messages pour le suivi des événements
 
-## Expanding the ESLint configuration
+## Prérequis
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+- Node.js (version 18 ou supérieure)
+- npm ou yarn
 
-```js
-export default tseslint.config({
-  extends: [
-    // Remove ...tseslint.configs.recommended and replace with this
-    ...tseslint.configs.recommendedTypeChecked,
-    // Alternatively, use this for stricter rules
-    ...tseslint.configs.strictTypeChecked,
-    // Optionally, add this for stylistic rules
-    ...tseslint.configs.stylisticTypeChecked,
-  ],
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
+## Installation
+
+Pour installer les dépendances du projet, exécutez :
+
+```bash
+npm install
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+## Commandes disponibles
 
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
+### Démarrage de l'application
 
-export default tseslint.config({
-  plugins: {
-    // Add the react-x and react-dom plugins
-    'react-x': reactX,
-    'react-dom': reactDom,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended typescript rules
-    ...reactX.configs['recommended-typescript'].rules,
-    ...reactDom.configs.recommended.rules,
-  },
-})
+**Commande principale** pour lancer l'application en mode développement :
+
+```bash
+npm run dev
 ```
+
+L'application sera accessible à l'adresse : http://localhost:5173
+
+## Communication avec la plateforme [4NK]
+
+L'application communique avec la plateforme [4NK] via une iframe et un bus de messages. La communication est gérée par les classes `MessageBus` et `EventBus` dans le dossier `/src/sdk`.
+
+## Configuration
+
+L'URL de l'iframe est définie dans `App.tsx` :
+
+```typescript
+const iframeUrl = 'https://dev3.4nkweb.com'
+```
+
+Pour modifier l'environnement cible, vous devez changer cette URL.

src/App.tsx

@@ -147,6 +147,7 @@ function App() {
             onLogout={handleLogout}
             onCreateProfile={handleOpenProfileModal}
             onCreateFolder={handleOpenFolderModal}
+            iframeUrl={iframeUrl}
           />
 
           {/* Structure flexible avec console à gauche et contenu à droite */}

src/components/ControlPanel.tsx

@@ -9,20 +9,14 @@ interface ControlPanelProps {
   iframeUrl?: string;
 }
 
-/**
- * Composant de panel de contrôle pour gérer les actions principales
- * 
- * Fournit des boutons pour la connexion, la création de profil et le contrôle de visibilité
- */
 function ControlPanel({
   onLogin = () => console.log('Connexion demandée'),
   onLogout = () => console.log('Déconnexion demandée'),
   onCreateProfile = () => console.log('Création de profil demandée'),
   onCreateFolder = () => console.log('Création de dossier demandée'),
   isConnected = false,
-  iframeUrl = 'https://dev1.4nkweb.com'
+  iframeUrl = ''
 }: ControlPanelProps) {
-  // État pour gérer l'affichage du tooltip
   const [showTooltip, setShowTooltip] = useState(false);
 
   return (

src/components/FolderModal.css

@@ -264,6 +264,7 @@
   0% {
     box-shadow: 0 0 0 2px rgba(103, 58, 183, 0.8);
   }
+
   100% {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }
@@ -284,11 +285,8 @@
     flex-direction: column;
   }
 
-  .btn-cancel, .btn-submit {
+  .btn-cancel,
+  .btn-submit {
     width: 100%;
   }
 }
-
-/* Styles spécifiques pour le composant FolderModal */
-/* Les styles génériques de modal sont fournis par Modal.css */
-

src/components/MessageConsole.tsx

@@ -31,7 +31,7 @@ const formatTimestamp = (isoString: string): string => {
 };
 
 interface MessageConsoleProps {
-  messages: {timestamp: string; data: any}[];
+  messages: { timestamp: string; data: any }[];
   onClearMessages?: () => void;
 }
 
@@ -46,7 +46,7 @@ function MessageConsole({
   onClearMessages = () => console.log('Vidage des messages demandé')
 }: MessageConsoleProps) {
   // État local pour stocker les messages reçus via l'EventBus
-  const [localMessages, setLocalMessages] = useState<{timestamp: string; data: any}[]>([]);
+  const [localMessages, setLocalMessages] = useState<{ timestamp: string; data: any }[]>([]);
 
   // Tous les messages à afficher (externes + locaux), triés par timestamp
   const allMessages = [...externalMessages, ...localMessages].sort((a, b) => {

src/sdk/EventBus.ts

@@ -2,7 +2,7 @@ export default class EventBus {
   private static instance: EventBus;
   private listeners: Record<string, Array<(...args: any[]) => void>> = {};
 
-  private constructor() {}
+  private constructor() { }
 
   public static getInstance(): EventBus {
     if (!EventBus.instance) {