e

backend/main.py

@@ -151,6 +151,8 @@ def get_filters(request: Request):
         "legalBases": normalize(df["legalBasis"].to_list()),
         "organizations": normalize(df["list_name"].explode().to_list()),
         "countries": normalize(df["list_country"].explode().to_list()),
+        "fundingSchemes": normalize(df["fundingScheme"].explode().to_list()),
+        "ids": normalize(df["id"].to_list()),
     }
 
 

frontend/src/components/ProjectExplorer.tsx

@@ -95,64 +95,66 @@ const ProjectExplorer: React.FC<ProjectExplorerProps> = ({
       {/* Left Pane: Projects & Filters */}
       <Box w={{ base: "100%", md: "70%" }} p={4}>
         <Flex gap={4} mb={4} flexWrap="wrap">
-          {/* Title search */}
           <Input
             placeholder="Search by title..."
             value={search}
             onChange={(e) => { setSearch(e.target.value); setPage(0); }}
-            w={{ base: "100%", md: "200px" }}
+            width={{ base: "100%", md: "200px" }}
           />
-          <Input
-            placeholder="Search ID…"
+          <ChakraSelect
+            placeholder={loadingFilters ? "Loading..." : "ID"}
             value={idFilter}
             onChange={(e) => { setIdFilter(e.target.value); setPage(0); }}
-            w="100px"
             isDisabled={loadingFilters}
-          />
-
-          {/* Status dropdown remains */}
+            width="100px"
+          >
+            {filterOpts.fundingSchemes.map((c) => <option key={c} value={c}>{c}</option>)}
+          </ChakraSelect>
           <ChakraSelect
-            placeholder={loadingFilters ? "Loading…" : "Status"}
+            placeholder={loadingFilters ? "Loading..." : "Status"}
             value={statusFilter}
             onChange={(e) => { setStatusFilter(e.target.value); setPage(0); }}
             isDisabled={loadingFilters}
-            w="120px"
+            width="120px"
           >
             {filterOpts.statuses.map((s) => <option key={s} value={s}>{s}</option>)}
           </ChakraSelect>
-
-          {/* Free-text filters */}
-          <Input
-            placeholder="Search Legal Basis…"
+          <ChakraSelect
+            placeholder={loadingFilters ? "Loading..." : "Legal Basis"}
             value={legalFilter}
             onChange={(e) => { setLegalFilter(e.target.value); setPage(0); }}
-            w="150px"
             isDisabled={loadingFilters}
-          />
-
-          <Input
-            placeholder="Search Organization…"
+            width="150px"
+          >
+            {filterOpts.legalBases.map((lb) => <option key={lb} value={lb}>{lb}</option>)}
+          </ChakraSelect>
+          <ChakraSelect
+            placeholder={loadingFilters ? "Loading..." : "Organization"}
             value={orgFilter}
             onChange={(e) => { setOrgFilter(e.target.value); setPage(0); }}
-            w="150px"
             isDisabled={loadingFilters}
-          />
-
-          <Input
-            placeholder="Search Country…"
+            width="150px"
+          >
+            {filterOpts.organizations.map((o) => <option key={o} value={o}>{o}</option>)}
+          </ChakraSelect>
+          <ChakraSelect
+            placeholder={loadingFilters ? "Loading..." : "Country"}
             value={countryFilter}
             onChange={(e) => { setCountryFilter(e.target.value); setPage(0); }}
-            w="120px"
             isDisabled={loadingFilters}
-          />
-
-          <Input
-            placeholder="Search Funding Scheme…"
+            width="120px"
+          >
+            {filterOpts.countries.map((c) => <option key={c} value={c}>{c}</option>)}
+          </ChakraSelect>
+          <ChakraSelect
+            placeholder={loadingFilters ? "Loading..." : "Funding Scheme"}
             value={fundingSchemeFilter}
             onChange={(e) => { setFundingSchemeFilter(e.target.value); setPage(0); }}
-            w="150px"
             isDisabled={loadingFilters}
-          />
+            width="120px"
+          >
+            {filterOpts.fundingSchemes.map((c) => <option key={c} value={c}>{c}</option>)}
+          </ChakraSelect>
         </Flex>
 
         <Box

frontend/src/hooks/useAppState.ts

@@ -68,7 +68,9 @@ export const useAppState = () => {
           statuses: ["SIGNED", "CLOSED", "TERMINATED", "UNKNOWN"],
           organizations: data.organizations,
           countries: data.countries,
-          legalBases: data.legalBases
+          legalBases: data.legalBases,
+          fundingSchemes: data.fundingSchemes,
+          ids: data.ids
         });
       });
   };