fisrt

frontend/src/App.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="h-screen flex flex-col bg-monokai-bg">
+    <!-- Header -->
+    <AppHeader />
+
+    <!-- Layout 3 colonnes selon consigne-design_webui.md -->
+    <div class="flex-1 flex overflow-hidden">
+      <!-- Colonne gauche: Détails IP -->
+      <div class="w-80 flex-shrink-0">
+        <IPDetails />
+      </div>
+
+      <!-- Colonne centrale: Grille d'IP organisée en arbre -->
+      <div class="flex-1">
+        <IPGridTree />
+      </div>
+
+      <!-- Colonne droite: Nouvelles détections -->
+      <div class="w-80 flex-shrink-0">
+        <NewDetections />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+import { useIPStore } from '@/stores/ipStore'
+import AppHeader from '@/components/AppHeader.vue'
+import IPDetails from '@/components/IPDetails.vue'
+import IPGridTree from '@/components/IPGridTree.vue'
+import NewDetections from '@/components/NewDetections.vue'
+
+const ipStore = useIPStore()
+
+onMounted(async () => {
+  // Charger les données initiales
+  await ipStore.fetchIPs()
+
+  // Connecter WebSocket
+  ipStore.connectWebSocket()
+})
+
+onUnmounted(() => {
+  // Déconnecter WebSocket
+  ipStore.disconnectWebSocket()
+})
+</script>