feat: add new page and update

web/src/pages/backoffice/Demos.tsx

@@ -5,12 +5,9 @@ import {
   Button,
   Collapse,
   Flex,
-  FormControl,
-  FormLabel,
   Heading,
   HStack,
   Icon,
-  Input,
   Link,
   Progress,
   SimpleGrid,
@@ -31,6 +28,7 @@ import { useNavigate } from 'react-router-dom'
 import { api, ApiError, type ComponentState, type Demo, type DemoDetails } from '../../lib/api'
 import { podStatusColor, podStatusLabel, statusColor, statusLabel, timeRemaining } from '../../lib/format'
 import { ConfirmDialog } from '../../components/ConfirmDialog'
+import { CreateDemoModal } from '../../components/CreateDemoModal'
 
 // Un provisioning en cours => on rafraîchit régulièrement.
 const POLL_MS = 5000
@@ -51,10 +49,7 @@ export function Demos() {
   const [loading, setLoading] = useState(true)
   const [busy, setBusy] = useState<string | null>(null)
   const [toDelete, setToDelete] = useState<Demo | null>(null)
-
-  // --- Formulaire de création ---
-  const [newUsername, setNewUsername] = useState('')
-  const [newLeadId, setNewLeadId] = useState('')
+  const [createModalOpen, setCreateModalOpen] = useState(false)
 
   // --- Ligne dépliée (état live des pods) ---
   const [expandedId, setExpandedId] = useState<string | null>(null)
@@ -79,26 +74,6 @@ export function Demos() {
     return () => clearInterval(id)
   }, [load])
 
-  const create = async () => {
-    if (!newUsername.trim()) {
-      toast({ status: 'warning', title: 'Username requis' })
-      return
-    }
-    setBusy('new')
-    try {
-      await api.createDemo(newUsername.trim(), newLeadId.trim() || undefined)
-      toast({ status: 'success', title: 'Démo lancée' })
-      setNewUsername('')
-      setNewLeadId('')
-      await load()
-    } catch (err) {
-      const msg = err instanceof ApiError ? err.message : 'Erreur'
-      toast({ status: 'error', title: 'Lancement impossible', description: msg })
-    } finally {
-      setBusy(null)
-    }
-  }
-
   const extend = async (d: Demo) => {
     setBusy(d.id)
     try {
@@ -173,38 +148,22 @@ export function Demos() {
 
   return (
     <>
-      <Flex mb={6} align="flex-end" gap={4} wrap="wrap">
+      <Flex mb={6} align="center" gap={4} wrap="wrap">
         <Heading size="md" mr={4}>
           Démos
         </Heading>
         <Spacer />
-        <FormControl maxW="220px">
-          <FormLabel fontSize="sm" mb={1}>
-            Username
-          </FormLabel>
-          <Input
-            size="sm"
-            placeholder="ex: acme-corp"
-            value={newUsername}
-            onChange={(e) => setNewUsername(e.target.value)}
-          />
-        </FormControl>
-        <FormControl maxW="220px">
-          <FormLabel fontSize="sm" mb={1}>
-            Lead ID (optionnel)
-          </FormLabel>
-          <Input
-            size="sm"
-            placeholder="uuid du lead"
-            value={newLeadId}
-            onChange={(e) => setNewLeadId(e.target.value)}
-          />
-        </FormControl>
-        <Button colorScheme="primary" isLoading={busy === 'new'} onClick={create}>
+        <Button colorScheme="primary" onClick={() => setCreateModalOpen(true)}>
           Nouvelle démo
         </Button>
       </Flex>
 
+      <CreateDemoModal
+        isOpen={createModalOpen}
+        onClose={() => setCreateModalOpen(false)}
+        onCreated={() => void load()}
+      />
+
       {loading ? (
         <Spinner />
       ) : demos.length === 0 ? (