Mise à jour interface et styles frontend

src/App.module.css

@@ -14,9 +14,7 @@
 
 .main {
   flex: 1;
-  /* Sans min-width:0 un élément flex garde min-width:auto et déborde de son
+
-     conteneur dès qu'il contient un bloc large (tableau, titre non coupable) :
-     la page entière part alors plus large que l'écran. */
   min-width: 0;
   margin-left: 16rem;
   padding: 2rem;

src/App.tsx

@@ -104,9 +104,7 @@ export default function App() {
     : location.pathname === "/admin"? "admin"
     : "home";
 
-  // Le user de localStorage est un instantané pris au login : un changement de
+
-  // rôle en base n'y apparaît jamais. On le resynchronise depuis /me au montage,
-  // sinon un compte promu admin reste bloqué hors de /admin jusqu'à reconnexion.
   useEffect(() => {
     const token = localStorage.getItem("authToken");
     if (!token) return;
@@ -155,7 +153,7 @@ export default function App() {
     );
   }
 
-  // ← CookieBanner visible même sans connexion
+
   if (!authState.isAuthenticated) {
     return (
       <>

src/components/Pagination.tsx

@@ -10,7 +10,6 @@ type PaginationProps = {
 
 type PageEntry = number | "ellipsis";
 
-/** Fenêtre de numéros affichés : les extrémités restent toujours atteignables. */
 function buildPageList(currentPage: number, totalPages: number): PageEntry[] {
   if (totalPages <= MAX_VISIBLE_PAGES) {
     return Array.from({ length: totalPages }, (_, index) => index + 1);

src/pages/AboutPage.tsx

@@ -10,7 +10,6 @@ export default function AboutPage() {
           <p className={styles.subtitle}>Plateforme de veille réglementaire pour les ingrédients cosmétiques</p>
         </div>
 
-        {/* Mission Section */}
         <div className={styles.section}>
           <div className={styles.sectionHeader}>
             <div className={styles.sectionIcon}>
@@ -26,7 +25,6 @@ export default function AboutPage() {
           </p>
         </div>
 
-        {/* Pour Qui Section */}
         <div className={styles.section}>
           <div className={styles.sectionHeader}>
             <div className={styles.sectionIcon}>
@@ -74,7 +72,6 @@ export default function AboutPage() {
           </div>
         </div>
 
-        {/* Key Features */}
         <div className={styles.section}>
           <div className={styles.sectionHeader}>
             <div className={styles.sectionIcon}>
@@ -110,7 +107,6 @@ export default function AboutPage() {
           </div>
         </div>
 
-        {/* About Platform */}
         <div className={styles.section}>
           <div className={styles.sectionHeader}>
             <div className={styles.sectionIcon}>

src/pages/Admin.tsx

@@ -9,9 +9,7 @@ type Document = { id: string; title: string; source: 'CIR' | 'SCCS'; ingredient?
 type ScraperLog = { id: string; when: string; source: string; status: 'pending' | 'running' | 'success' | 'error' }
 type Stats = { total_documents?: number; cir_documents?: number; sccs_documents?: number; total_users?: number }
 
-// Un jeton absent ou expiré (30 min de validité) renvoie 401. Le message
+
-// générique laissait croire à une panne du serveur alors qu'il suffit de se
-// reconnecter — l'interface, elle, croit toujours la session ouverte.
 function assertOk(res: Response, fallback: string){
   if(res.ok) return
   if(res.status === 401){
@@ -42,7 +40,6 @@ export default function Admin() {
   const [sortKey, setSortKey] = useState<string | null>(null)
   const [sortDir, setSortDir] = useState<'asc'|'desc'>('asc')
 
-  // Jeton posé par App.tsx au login (handleAuthSuccess).
   const token = localStorage.getItem('authToken') ?? ''
 
   useEffect(() => {

src/pages/AuthPage.tsx

@@ -72,7 +72,6 @@ export default function AuthPage({ onAuthSuccess }: { onAuthSuccess: (token: str
 
       const userData = await response.json();
 
-      // Automatiquement connecter après l'inscription
       const loginResponse = await fetch(`${API_URL}/login`, {
         method: "POST",
         headers: {

src/pages/ContactPage.tsx

@@ -35,11 +35,8 @@ export default function ContactPage() {
           <p className={styles.subtitle}>Nous sommes à votre écoute pour toute question ou demande d'information</p>
         </div>
 
-        {/* Main Content */}
         <div className={styles.mainContent}>
-          {/* Contact Info */}
           <div className={styles.contactInfo}>
-            {/* Email */}
             <div className={styles.infoSection}>
               <h3 className={styles.infoSectionTitle}>
                 <Mail size={20} className={styles.infoIcon} />
@@ -55,7 +52,6 @@ export default function ContactPage() {
               </div>
             </div>
 
-            {/* Phone */}
             <div className={styles.infoSection}>
               <h3 className={styles.infoSectionTitle}>
                 <Phone size={20} className={styles.infoIcon} />
@@ -208,7 +204,6 @@ export default function ContactPage() {
           </div>
         </div>
 
-        {/* FAQ Section */}
         <div className={styles.faqSection}>
           <h2 className={styles.faqTitle}>Questions Fréquentes</h2>
           <div className={styles.faqItems}>

src/pages/Documents.tsx

@@ -106,7 +106,6 @@ export default function DocumentsPage() {
     safePage * itemsPerPage
   );
 
-  // adjust items per page based on viewport width
   useEffect(() => {
     const apply = () => {
       const w = window.innerWidth;
@@ -130,7 +129,6 @@ export default function DocumentsPage() {
   return (
     <div className={styles.container}>
       <div className={styles.maxWidth}>
-        {/* HEADER */}
         <div className={styles.header}>
           <h2 className={styles.title}>Document Database</h2>
           <p className={styles.description}>
@@ -138,7 +136,6 @@ export default function DocumentsPage() {
           </p>
         </div>
 
-        {/* FILTERS */}
         <div className={styles.filtersBox}>
           <div className={styles.filterLabel}>
             <Filter size={16} />
@@ -196,7 +193,6 @@ export default function DocumentsPage() {
           </div>
         </div>
 
-        {/* STATS */}
         <div className={styles.statsRow}>
           <p className={styles.statsText}>
             Total Documents:
@@ -207,7 +203,6 @@ export default function DocumentsPage() {
           </p>
         </div>
 
-        {/* TABLE */}
         <div className={styles.table}>
           <div className={styles.tableHeader}>
             <span>Title</span>

src/pages/Home.tsx

@@ -22,7 +22,6 @@ export default function HomePage({ handleNavClick, recentDocuments }: HomePagePr
     <div className={styles.container}>
       <div className={styles.maxWidth}>
 
-        {/* Hero Section */}
         <div className={styles.heroSection}>
           <h1 className={styles.title}>RegWatch MedLabs</h1>
           <p className={styles.subtitle}>Cosmetic Regulatory Monitoring Platform</p>
@@ -31,7 +30,6 @@ export default function HomePage({ handleNavClick, recentDocuments }: HomePagePr
           </p>
         </div>
 
-        {/* Feature Cards */}
         <div className={styles.cardsGrid}>
           <button onClick={() => handleNavClick('ingredient-search')} className={styles.card}>
             <div className={styles.cardIconWrapper}>
@@ -58,7 +56,6 @@ export default function HomePage({ handleNavClick, recentDocuments }: HomePagePr
           </button>
         </div>
 
-        {/* Recent Documents */}
         <div className={styles.recentSection}>
           <div className={styles.sectionHeader}>
             <Clock size={20} className={styles.sectionIcon} />

src/pages/IngredientSearchPage.tsx

@@ -15,7 +15,6 @@ export default function IngredientSearchPage() {
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(8);
 
-  // FETCH API
   useEffect(() => {
     getDocuments()
       .then((data) => setDocuments(Array.isArray(data) ? data : []))
@@ -26,7 +25,6 @@ export default function IngredientSearchPage() {
       .finally(() => setLoading(false));
   }, []);
 
-  // responsive items per page
   useEffect(() => {
     const apply = () => {
       const w = window.innerWidth;
@@ -39,7 +37,6 @@ export default function IngredientSearchPage() {
     return () => window.removeEventListener('resize', apply);
   }, []);
 
-  // FILTER OPTIONS
   const allSources = useMemo(() => [
     "All Sources",
     ...new Set(documents.map((d) => d.source)),
@@ -55,7 +52,6 @@ export default function IngredientSearchPage() {
     ...new Set(documents.map((d) => String(d.date ?? "").slice(0, 4))).values(),
   ], [documents]);
 
-  // FILTERED RESULTS
   const filtered = useMemo(() => {
     return documents
       .filter((d) => {
@@ -82,13 +78,11 @@ export default function IngredientSearchPage() {
     <div className={styles.container}>
       <div className={styles.maxWidth}>
 
-        {/* HEADER */}
         <div className={styles.header}>
           <h1 className={styles.title}>Ingredient Search</h1>
           <p className={styles.subtitle}>Search cosmetic ingredients and regulatory documents</p>
         </div>
 
-        {/* SEARCH */}
         <div className={styles.searchBarWrapper}>
           <div className={styles.searchBar}>
             <input
@@ -102,7 +96,6 @@ export default function IngredientSearchPage() {
           </div>
         </div>
 
-        {/* FILTERS */}
         <div className={styles.filtersBox}>
           <div className={styles.filterHeader}>
             <Filter size={16} className={styles.filterIcon} />
@@ -121,12 +114,10 @@ export default function IngredientSearchPage() {
           </div>
         </div>
 
-        {/* RESULTS */}
         <div className={styles.resultsInfo}>
           <span className={styles.resultsCount}>{filtered.length}</span> results found
         </div>
 
-        {/* DOCUMENTS */}
         <div className={styles.documentsList}>
           {filtered.length === 0 ? (
             <div className={styles.emptyState}>

src/pages/RecentUpdatesPage.tsx

@@ -81,7 +81,6 @@ export default function RecentUpdatesPage() {
   return (
     <div className={styles.container}>
       <div className={styles.maxWidth}>
-        {/* HEADER */}
         <div className={styles.header}>
           <div className={styles.headerFlex}>
             <TrendingUp size={28} className={styles.headerIcon} />
@@ -92,7 +91,6 @@ export default function RecentUpdatesPage() {
           </p>
         </div>
 
-        {/* STATS */}
         <div className={styles.statsGrid}>
           <div className={styles.statCard}>
             <p className={styles.statLabel}>Total Updates</p>
@@ -111,7 +109,6 @@ export default function RecentUpdatesPage() {
           </div>
         </div>
 
-        {/* FILTERS */}
         <div className={styles.filtersBox}>
           <div className={styles.filterLabel}>
             <Filter size={16} />
@@ -143,13 +140,11 @@ export default function RecentUpdatesPage() {
           </select>
         </div>
 
-        {/* RESULTS */}
         <div className={styles.resultsInfo}>
           <span className={styles.resultsCount}>{filtered.length}</span>{" "}
           updates found
         </div>
 
-        {/* TABLE */}
         <div className={styles.table}>
           <div className={styles.tableHeader}>
             <span className={styles.headerCell}>Status</span>

src/services/theapi.ts

@@ -1,5 +1,3 @@
-// Bakée au build par Vite (ARG/ENV VITE_API_URL du Dockerfile).
-// Repli sur l'API locale pour le dev : `pnpm dev` sans .env continue de marcher.
 export const API_URL = import.meta.env.VITE_API_URL ?? "http://127.0.0.1:8000";
 
 export type ApiDocument = {

src/styles/Admin.module.css

@@ -1,12 +1,4 @@
-/* Administration — aligné sur la DA des autres pages :
-   accent violet #7c3aed (celui de la Sidebar), échelle de gris Tailwind,
-   cartes blanches bordées, rayons 0.5/0.75rem, unités rem. */
 
-/* main.tsx ne charge pas styles/global.css — vestige d'une ancienne maquette,
-   jamais importé — donc son `* { box-sizing: border-box }` ne s'applique pas et
-   l'application tourne en content-box : tout width:100% assorti d'un padding
-   déborde de son conteneur. Réinitialisation cantonnée à cette page pour ne rien
-   déplacer sur le reste du site. */
 .page,
 .page *,
 .page *::before,
@@ -22,7 +14,6 @@
   margin: 0 auto;
 }
 
-/* ── En-tête et onglets ─────────────────────────────────────── */
 
 .header {
   display: flex;
@@ -47,8 +38,6 @@
   gap: 0.5rem;
   min-width: 0;
   max-width: 100%;
-  /* Les onglets passent à la ligne quand ils ne tiennent plus, plutôt que de
-     défiler : aucun n'est masqué hors champ. */
   flex-wrap: wrap;
 }
 
@@ -88,7 +77,6 @@
   margin-top: 0.5rem;
 }
 
-/* ── États ──────────────────────────────────────────────────── */
 
 .spinner {
   padding: 0.875rem 1rem;
@@ -114,7 +102,6 @@
   color: rgb(107, 114, 128);
 }
 
-/* ── Barre de panneau ───────────────────────────────────────── */
 
 .panelHeader {
   display: flex;
@@ -137,8 +124,6 @@
   max-width: 22rem;
 }
 
-/* ── Tableaux ───────────────────────────────────────────────── */
-
 .tableWrap {
   background: white;
   border: 1px solid rgb(229, 231, 235);
@@ -161,7 +146,6 @@
   overflow-wrap: anywhere;
 }
 
-/* Sans cette borne, un seul titre long étire la colonne et donc tout le tableau. */
 .table td:nth-child(2) {
   min-width: 12rem;
   max-width: 26rem;
@@ -223,7 +207,6 @@
   color: white;
 }
 
-/* ── Badges ─────────────────────────────────────────────────── */
 
 .badgeAdmin,
 .badgeUser,
@@ -270,7 +253,6 @@
   border: 1px solid rgba(16, 185, 129, 0.3);
 }
 
-/* ── Statistiques ───────────────────────────────────────────── */
 
 .cards {
   display: grid;
@@ -342,8 +324,7 @@
   color: rgb(55, 65, 81);
 }
 
-/* La largeur est posée en style inline par le composant : min-width garde une
+
-   amorce visible quand la valeur est nulle. */
 .barFill {
   height: 0.625rem;
   min-width: 0.625rem;
@@ -363,7 +344,6 @@
   color: rgb(75, 85, 99);
 }
 
-/* ── Scrapers ───────────────────────────────────────────────── */
 
 .scraperControls {
   display: grid;
@@ -432,7 +412,6 @@
   color: rgb(17, 24, 39);
 }
 
-/* ── Modale ─────────────────────────────────────────────────── */
 
 .modalBackdrop {
   position: fixed;
@@ -478,7 +457,6 @@
   color: white;
 }
 
-/* ── Responsive ─────────────────────────────────────────────── */
 
 @media (max-width: 1024px) {
   .scraperControls {
@@ -509,8 +487,6 @@
   .tabs {
     width: 100%;
   }
-
-  /* Chaque ligne devient une carte, avec l'intitulé de colonne en regard. */
   .tableWrap {
     background: transparent;
     border: none;
@@ -548,10 +524,6 @@
     background: white;
   }
 
-  /* Surtout pas display:flex ici : le texte de la cellule deviendrait un élément
-     flex anonyme, avec min-width:auto — un titre long refuserait de se réduire et
-     sortirait de la carte, en entraînant toute la page. En bloc, l'intitulé passe
-     au-dessus de la valeur et la coupure de mots suffit. */
   .table td {
     display: block;
     padding: 0.5rem 1rem;
@@ -572,8 +544,7 @@
     margin-bottom: 0.125rem;
   }
 
-  /* `.table td { display: block }` l'emporte en spécificité sur `.rowActions` :
+  
-     on le rétablit ici pour garder les actions sur une rangée. */
   .table td.rowActions {
     display: flex;
   }
@@ -614,6 +585,4 @@
   }
 }
 
-/* NB : le site n'a pas de mode sombre réel — index.css bascule --bg sur le body
+
-   mais aucune page n'utilise ces variables et toutes gardent des cartes claires.
-   Cette page suit la même convention pour rester cohérente avec ses sœurs. */

src/styles/BackToTop.module.css

@@ -1 +1,12 @@
-.btn{position:fixed;right:20px;bottom:20px;background:#1e293b;color:#fff;border:none;border-radius:999px;width:44px;height:44px;font-size:20px;cursor:pointer;box-shadow:0 8px 20px rgba(2,6,23,0.2);z-index:12000}
+.btn{
+    position:fixed;
+    right:20px;bottom:20px;
+    background:#1e293b;
+    color:#fff;border:none;
+    border-radius:999px;
+    width:44px;
+    height:44px;
+    font-size:20px;
+    cursor:pointer;
+    box-shadow:0 8px 20px rgba(2,6,23,0.2);
+    z-index:12000}

src/styles/Pagination.module.css

@@ -1,6 +1,3 @@
-/* Style unique de pagination, partagé par toutes les pages.
-   Reprend l'accent bleu #2563eb du site (boutons primaires, liens d'action). */
-
 .pagination {
   display: flex;
   align-items: center;

src/styles/Sidebar.module.css

@@ -194,5 +194,4 @@
 
   .open{transform:translateX(0)}
 
-  /* overlay will be handled by a simple full-screen element appended in DOM via JS if needed */
 }

src/styles/Toast.module.css

@@ -1,5 +1,27 @@
-.container{position:fixed;left:16px;bottom:24px;display:flex;flex-direction:column-reverse;gap:8px;z-index:12000}
+.container{
-.toast{padding:10px 14px;border-radius:8px;color:#fff;box-shadow:0 6px 18px rgba(2,6,23,0.12);min-width:200px}
+    position:fixed;
-.info{background:#334155}
+    left:16px;
-.success{background:#059669}
+    bottom:24px;
-.error{background:#ef4444}
+    display:flex;
+    flex-direction:column-reverse;
+    gap:8px;
+    z-index:12000
+}
+.toast{padding:10px 14px;
+    border-radius:8px
+    ;color:#fff;
+    box-shadow:0 6px 18px rgba(2,6,23,0.12);
+    min-width:200px
+}
+
+.info{
+    background:#334155
+}
+
+.success{
+    background:#059669
+}
+
+.error{
+    background:#ef4444
+}

src/styles/global.css

@@ -4,7 +4,6 @@ body {
   background: #f4f6f8;
 }
 
-/* Global required rules */
 * { box-sizing: border-box; }
 img, table { max-width: 100%; }