fix: multiple error

web/src/lib/api.ts

@@ -104,7 +104,6 @@ export interface DemoState {
 }
 
 export interface DemoDetails {
-  username: string
   namespace: string
   state: DemoState
 }
@@ -150,6 +149,7 @@ export const api = {
     request<Lead>('PATCH', `/leads/${id}/status`, { status }),
 
   listDemos: () => request<{ items: Demo[] }>('GET', '/demos'),
+  listMyDemos: () => request<{ items: Demo[] }>('GET', '/demos/mine'),
   getDemo: (id: string) => request<Demo>('GET', `/demos/${id}`),
   createDemo: (username: string, leadId?: string) =>
     request<Demo>('POST', '/demos', {
@@ -167,8 +167,8 @@ export const api = {
   sendMessage: (username: string, telegram: string, sujet: string, message: string) =>
       request<{ success: string }>('POST', '/send/message', { username, telegram, sujet, message }),
   getMessage: () => request<{ messages: Contact[] }>('GET', '/messages'),
-  getDemoDetails: (username: string) =>
-        request<DemoDetails>('POST', '/demos/details', { username }),
+  getDemoDetails: (namespace: string) =>
+        request<DemoDetails>('POST', '/demos/details', { namespace }),
   updateUsername: (username: string) =>
         request<UpdateUsername>('POST', '/profile/username', { username }),
   updatePassword: (password: string) =>

web/src/pages/backoffice/Demos.tsx

@@ -140,7 +140,7 @@ export function Demos() {
     setDetails(null)
     setDetailsLoading(true)
     try {
-      const res = await api.getDemoDetails(d.username)
+      const res = await api.getDemoDetails(d.namespace)
       setDetails(res)
     } catch (err) {
       const msg = err instanceof ApiError ? err.message : 'Erreur'
@@ -156,10 +156,10 @@ export function Demos() {
   useEffect(() => {
     const current = demos.find((d) => d.id === expandedId)
     if (!current) return
-    const username = current.username
+    const namespace = current.namespace
     const id = setInterval(() => {
       api
-        .getDemoDetails(username)
+        .getDemoDetails(namespace)
         .then(setDetails)
         .catch(() => {
           /* échec silencieux : on garde le dernier état connu affiché */

web/src/pages/backoffice/Subscription.tsx

@@ -9,6 +9,7 @@ import {
   Heading,
   HStack,
   Input,
+  Link,
   Spacer,
   Spinner,
   Stack,
@@ -17,7 +18,8 @@ import {
   useToast,
 } from '@chakra-ui/react'
 import { useNavigate } from 'react-router-dom'
-import { api, ApiError } from '../../lib/api'
+import { api, ApiError, type Demo } from '../../lib/api'
+import { statusColor, statusLabel } from '../../lib/format'
 
 export function Subscription() {
   const toast = useToast()
@@ -28,6 +30,8 @@ export function Subscription() {
   const [busy, setBusy] = useState(false)
   const [code, setCode] = useState('')
   const [showRenewForm, setShowRenewForm] = useState(false)
+  const [demos, setDemos] = useState<Demo[]>([])
+  const [demosLoading, setDemosLoading] = useState(true)
 
   const load = useCallback(async () => {
     try {
@@ -42,9 +46,21 @@ export function Subscription() {
     }
   }, [navigate, toast])
 
+  const loadDemos = useCallback(async () => {
+    try {
+      const res = await api.listMyDemos()
+      setDemos(res.items ?? [])
+    } catch {
+      // Silencieux : l'absence de démo n'est pas une erreur à afficher ici.
+    } finally {
+      setDemosLoading(false)
+    }
+  }, [])
+
   useEffect(() => {
     void load()
-  }, [load])
+    void loadDemos()
+  }, [load, loadDemos])
 
   const submitCode = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -76,6 +92,36 @@ export function Subscription() {
 
   return (
     <>
+      <Flex mb={6} align="center">
+        <Heading size="md">Ma démo</Heading>
+        <Spacer />
+      </Flex>
+
+      <Box mb={8} p={6} borderWidth="1px" borderRadius="lg" bg="bg-surface">
+        {demosLoading ? (
+          <Spinner size="sm" />
+        ) : demos.length === 0 ? (
+          <Text color="gray.500">Aucune démo pour le moment.</Text>
+        ) : (
+          <VStack align="stretch" spacing={3}>
+            {demos.map((d) => (
+              <HStack key={d.id} justify="space-between" flexWrap="wrap" rowGap={2}>
+                {d.status === 'ready' ? (
+                  <Link href={d.url} color="primary.500" isExternal fontFamily="mono">
+                    {d.url}
+                  </Link>
+                ) : (
+                  <Text color="gray.400" fontFamily="mono">
+                    {d.url || '—'}
+                  </Text>
+                )}
+                <Badge colorScheme={statusColor(d.status)}>{statusLabel(d.status)}</Badge>
+              </HStack>
+            ))}
+          </VStack>
+        )}
+      </Box>
+
       <Flex mb={6} align="center">
         <Heading size="md">Mon abonnement</Heading>
         <Spacer />