dev to main

client/app/globals.scss

@@ -15,9 +15,7 @@ body {
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: "Arial", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

client/app/hopitaux/[id]/layout.tsx

@@ -0,0 +1,46 @@
+import type { Metadata } from 'next';
+
+type Props = {
+  params: Promise<{ id: string }>;
+};
+
+async function getHospitalName(id: string): Promise<string | null> {
+  const baseUrl = process.env.NEXT_PUBLIC_HOSPITALS_SINGLE_API_URL;
+
+  if (!baseUrl) {
+    console.error('NEXT_PUBLIC_HOSPITALS_SINGLE_API_URL manquant');
+    return null;
+  }
+
+  const apiUrl = `${baseUrl}&rows=1&q=recordid:${id}`;
+  const res = await fetch(apiUrl, { next: { revalidate: 3600 } });
+
+  if (!res.ok) return null;
+
+  const data = await res.json();
+  return data.records?.[0]?.fields?.name ?? null;
+}
+
+export async function generateMetadata(
+  props: Props
+): Promise<Metadata> {
+  const params = await props.params;
+  const hospitalName = await getHospitalName(params.id);
+
+  return {
+    title: hospitalName
+      ? `${hospitalName} – Urgences`
+      : `Détail de l'hôpital`,
+    description: hospitalName
+      ? `Consultez les informations de l'hôpital ${hospitalName}.`
+      : `Consultez les détails de l'hôpital.`,
+  };
+}
+
+export default function HospitalLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <>{children}</>;
+}

client/app/hopitaux/[id]/page.tsx

@@ -168,6 +168,30 @@ export default function HospitalDetailPage({ params }: { params: Promise<{ id: s
     );
   }
 
+  const hospitalCenter: [number, number] | null = (() => {
+    const fields = hospital.fields;
+
+    if (fields.meta_geo_point && Array.isArray(fields.meta_geo_point)) {
+      const [lat, lon] = fields.meta_geo_point;
+      if (typeof lat === 'number' && typeof lon === 'number') {
+        return [lat, lon];
+      }
+    }
+
+    if (fields.geometry?.coordinates && Array.isArray(fields.geometry.coordinates)) {
+      const [lon, lat] = fields.geometry.coordinates;
+      if (typeof lat === 'number' && typeof lon === 'number') {
+        return [lat, lon];
+      }
+    }
+
+    if (fields.lat && fields.lon) {
+      return [fields.lat, fields.lon];
+    }
+
+    return null;
+  })();
+
   return (
     <>
       <Header />
@@ -204,7 +228,11 @@ export default function HospitalDetailPage({ params }: { params: Promise<{ id: s
 
         <section className='py-6 px-4 flex flex-col gap-4 items-center' aria-labelledby="map-heading">
           <h2 id="map-heading" className='text-lg md:text-xl lg:text-2xl font-bold text-left w-full'>Localisation</h2>
-          <MapWrapper />
+          <MapWrapper
+            initialCenter={hospitalCenter ?? undefined}
+            initialZoom={16}
+            focusRecordId={hospital.recordid}
+          />
           <div className="w-full max-w-4xl flex flex-col items-center justify-center gap-2">
             {placeAddress && (
               <div className="flex items-center justify-center gap-2 text-black">
@@ -333,10 +361,8 @@ export default function HospitalDetailPage({ params }: { params: Promise<{ id: s
               })()}
 
               {!mockData && !accessibilityOptions && (
-                <div className="col-span-full text-center py-4">
-                  <p className="text-gray-500 italic">
-                    Les spécifications de cet établissement ne sont pas encore disponibles.
-                  </p>
+                <div className="col-span-full flex items-center justify-center">
+                  <NotFoundData message="Les spécifications de cet établissement ne sont pas encore disponibles." />
                 </div>
               )}
             </div>

client/app/hopitaux/layout.tsx

@@ -0,0 +1,14 @@
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+    title: 'Liste des hôpitaux',
+    description: 'Consultez la liste des hôpitaux avec services d\'urgence les plus proches de votre position.',
+}
+
+export default function HopitauxLayout({
+    children,
+  }: {
+    children: React.ReactNode
+  }) {
+    return <>{children}</>;
+}

client/app/hopitaux/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useMemo } from 'react';
 import Header from '@/components/Header';
-import HospitalList from './components/HospitalList';
+import HospitalList from '@/components/hopitaux/HospitalList';
 import SearchBar from '@/components/SearchBar';
 import MultiSelectFilter from '@/components/MultiSelectFilter';
 import Loading from '@/components/Loading';
@@ -128,26 +128,22 @@ export default function HopitauxPage() {
     if (selectedSpecifications.length > 0) {
       filtered = filtered.filter(hospital => {
         return selectedSpecifications.every(spec => {
-          if (spec === 'fire_fighter') {
-            return hospital.mockData?.fire_fighter;
+          switch (spec) {
+            case 'fire_fighter':
+              return hospital.mockData?.fire_fighter;
+            case 'social_worker':
+              return hospital.mockData?.social_worker;
+            case 'wheelchairAccessibleEntrance':
+              return hospital.accessibilityOptions?.wheelchairAccessibleEntrance;
+            case 'wheelchairAccessibleParking':
+              return hospital.accessibilityOptions?.wheelchairAccessibleParking;
+            case 'wheelchairAccessibleRestroom':
+              return hospital.accessibilityOptions?.wheelchairAccessibleRestroom;
+            case 'wheelchairAccessibleSeating':
+              return hospital.accessibilityOptions?.wheelchairAccessibleSeating;
+            default:
+              return false;
           }
-          if (spec === 'social_worker') {
-            return hospital.mockData?.social_worker;
-          }
-          if (spec === 'wheelchairAccessibleEntrance') {
-            return hospital.accessibilityOptions?.wheelchairAccessibleEntrance;
-          }
-          if (spec === 'wheelchairAccessibleParking') {
-            return hospital.accessibilityOptions?.wheelchairAccessibleParking;
-          }
-          if (spec === 'wheelchairAccessibleRestroom') {
-            return hospital.accessibilityOptions?.wheelchairAccessibleRestroom;
-          }
-          if (spec === 'wheelchairAccessibleSeating') {
-            return hospital.accessibilityOptions?.wheelchairAccessibleSeating;
-          }
-
-          return false;
         });
       });
     }

client/app/layout.tsx

@@ -1,8 +1,11 @@
-import type { Metadata } from 'next'
 import './globals.scss'
+import { Metadata } from 'next';
 
 export const metadata: Metadata = {
-  title: 'Quelles Urgences',
+  title: {
+    default: 'Quelles Urgences',
+    template: '%s | Quelles Urgences',
+  },
   description: 'Application de gestion des urgences',
   icons: {
     icon: '/images/logo/logo-red.svg',

client/app/map/layout.tsx

@@ -0,0 +1,14 @@
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+    title: 'Carte des urgences',
+    description: 'Visualisez les hôpitaux avec services d\'urgence les plus proches de votre position.',
+}
+
+export default function MapLayout({
+    children,
+  }: {
+    children: React.ReactNode
+  }) {
+    return <>{children}</>;
+}

client/app/page.tsx

@@ -1,8 +1,7 @@
 import Image from 'next/image'
 import Link from 'next/link';
 import Header from '@/components/Header'
-import MapWrapper from '@/components/MapWrapper'
-import FAQSection from '@/app/components/FAQSection'
+import FAQSection from '@/components/home/FAQSection'
 
 export default function Home() {
   return (