fix(app): correct moderation filters and tabs overflow (#975)

* fix(app): align moderation filters with publisherIds API and adjust UI

Co-Authored-By: Claude <noreply@anthropic.com>

* fix(app): prevent vertical overflow on tabs container

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: theolemague

app/src/components/Select.jsx

@@ -3,7 +3,7 @@ import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headless
 import { Fragment, useEffect, useState } from "react";
 import { RiArrowDownSLine, RiCloseFill } from "react-icons/ri";
 
-const Select = ({ options, value, onChange, className, placeholder = "Sélectionner une option", loading = false }) => {
+const Select = ({ options, value, onChange, className, placeholder = "Sélectionner une option", loading = false, anchor = "bottom start" }) => {
   const [selected, setSelected] = useState(null);
 
   useEffect(() => {
@@ -34,7 +34,7 @@ const Select = ({ options, value, onChange, className, placeholder = "Sélection
         )}
       </div>
 
-      <ListboxOptions anchor="bottom" className={`mt-1 max-h-80 w-(--button-width) overflow-y-auto border border-gray-200 bg-white py-4 shadow-md ${className}`}>
+      <ListboxOptions anchor={anchor} className={`mt-1 max-h-80 w-(--button-width) overflow-y-auto border border-gray-200 bg-white py-4 shadow-md ${className}`}>
         {loading ? (
           <div className="mx-4 flex cursor-default items-center justify-center px-4 py-2">
             <Loader />

app/src/components/Tabs.jsx

@@ -104,7 +104,7 @@ const Tabs = ({ tabs, ariaLabel, panelId, className = "", variant = "primary", t
   };
 
   return (
-    <div role="tablist" aria-label={ariaLabel} className={`flex flex-nowrap overflow-x-auto ${className}`}>
+    <div role="tablist" aria-label={ariaLabel} className={`flex flex-nowrap overflow-x-auto overflow-y-hidden ${className}`}>
       {tabs.map((tab, index) => (
         <Tab
           key={tab.key}

app/src/scenes/my-missions/Moderation.jsx

@@ -53,7 +53,7 @@ const Moderation = () => {
   useEffect(() => {
     const fetchData = async () => {
       const query = {
-        publisherId: publisher.id,
+        publisherIds: [publisher.id],
         status: filters.status,
         comment: filters.comment,
         domain: filters.domain,
@@ -79,7 +79,7 @@ const Moderation = () => {
     };
     const fetchAggs = async () => {
       const query = {
-        publisherId: publisher.id,
+        publisherIds: [publisher.id],
         status: filters.status,
         comment: filters.comment,
         domain: filters.domain,
@@ -149,6 +149,7 @@ const Moderation = () => {
             value={filters.status}
             onChange={(e) => setFilters({ ...filters, status: e.value })}
             placeholder="Statut"
+            className="w-full sm:w-80"
           />
           <Select
             options={options.comments.map((e) => ({
@@ -159,12 +160,14 @@ const Moderation = () => {
             value={filters.comment}
             onChange={(e) => setFilters({ ...filters, comment: e.value })}
             placeholder="Motif de refus"
+            className="w-full sm:w-80"
           />
           <Select
             options={options.domains.map((e) => ({ value: e.key === "" ? "none" : e.key, label: e.key === "" ? "Non renseigné" : DOMAINS_LABELS[e.key], count: e.doc_count }))}
             value={filters.domain}
             onChange={(e) => setFilters({ ...filters, domain: e.value })}
             placeholder="Domaine"
+            className="w-full sm:w-80"
           />
           <Select
             options={options.departments.map((e) => ({
@@ -175,12 +178,15 @@ const Moderation = () => {
             value={filters.department}
             onChange={(e) => setFilters({ ...filters, department: e.value })}
             placeholder="Département"
+            className="w-full sm:w-80"
           />
           <Select
-            options={options.organizations.map((e) => ({ value: e.key === "" ? "none" : e.key, label: e.key === "" ? "Non renseigné" : e.key, count: e.doc_count }))}
+            options={options.organizations.map((e) => ({ value: e.key === "" ? "none" : e.key, label: e.key === "" ? "Non renseigné" : e.label, count: e.doc_count }))}
             value={filters.organization}
             onChange={(e) => setFilters({ ...filters, organization: e.value })}
             placeholder="Organisation"
+            className="w-full sm:w-80"
+            anchor="bottom end"
           />
         </div>
       </div>
@@ -190,7 +196,7 @@ const Moderation = () => {
           {Object.keys(filters)
             .filter((key) => filters[key] && key !== "page")
             .map((key, i) => {
-              let label = filters[key] === "" ? "Non renseigné" : FILTERS[key] || key;
+              let label = filters[key] === "" ? "Non renseigné" : filters[key];
 
               if (key === "comment") {
                 label = JVA_MODERATION_COMMENTS_LABELS[filters[key]] || filters[key];