e

frontend/src/components/Dashboard.tsx

@@ -1,4 +1,5 @@
-import { useState, useEffect, useRef } from "react";//React, 
+// src/components/Dashboard.tsx
+import { useState, useEffect, useRef } from "react";
 import {
   Box,
   Grid,
@@ -45,12 +46,14 @@ ChartJS.register(
 
 interface ChartData { labels: string[]; values: number[]; }
 interface Stats { [key: string]: ChartData; }
+
 const FILTER_LABELS: Record<keyof FilterState, string> = {
   status:       "Status",
   organization: "Organization",
   country:      "Country",
   legalBasis:   "Legal Basis",
 };
+
 interface DashboardProps {
   stats: Stats;
   filters: FilterState;
@@ -70,27 +73,16 @@ const Dashboard: React.FC<DashboardProps> = ({
   const [orgInput, setOrgInput] = useState("");
   const [statsData, setStatsData] = useState<Stats>(initialStats);
   const [loadingStats, setLoadingStats] = useState(false);
-
-  // ref to hold our debounce timer
   const fetchTimer = useRef<number | null>(null);
 
+  // Debounced stats fetch
   useEffect(() => {
-    // clear any pending fetch
-    if (fetchTimer.current) {
-      clearTimeout(fetchTimer.current);
-    }
-
-    // schedule new fetch 300ms after last filter change
+    if (fetchTimer.current) clearTimeout(fetchTimer.current);
     fetchTimer.current = window.setTimeout(() => {
       const qs = new URLSearchParams();
-      if (filters.status)       qs.set("status", filters.status);
-      if (filters.organization) qs.set("organization", filters.organization);
-      if (filters.country)      qs.set("country", filters.country);
-      if (filters.legalBasis)   qs.set("legalBasis", filters.legalBasis);
-      qs.set("minYear",    filters.minYear);
-      qs.set("maxYear",    filters.maxYear);
-      qs.set("minFunding", filters.minFunding);
-      qs.set("maxFunding", filters.maxFunding);
+      Object.entries(filters).forEach(([key, val]) => {
+        if (val) qs.set(key, val);
+      });
 
       setLoadingStats(true);
       fetch(`/api/stats?${qs.toString()}`)
@@ -100,29 +92,19 @@ const Dashboard: React.FC<DashboardProps> = ({
         .finally(() => setLoadingStats(false));
     }, 300);
 
-    // cleanup on unmount or next effect-run
     return () => {
-      if (fetchTimer.current) {
-        clearTimeout(fetchTimer.current);
-      }
+      if (fetchTimer.current) clearTimeout(fetchTimer.current);
     };
-  }, [
-    filters.status,
-    filters.organization,
-    filters.country,
-    filters.legalBasis,
-    filters.minYear,
-    filters.maxYear,
-    filters.minFunding,
-    filters.maxFunding,
-  ]);
+  }, [filters]);
 
-  const updateFilter = (key: keyof FilterState) => (opt: { value: string } | null) =>
-    setFilters(prev => ({ ...prev, [key]: opt?.value || "" }));
+  // Select & slider updaters
+  const updateFilter = (key: keyof FilterState) =>
+    (opt: { value: string } | null) =>
+      setFilters(prev => ({ ...prev, [key]: opt?.value || "" }));
 
   const updateSlider = (
-    k1: "minYear" | "minFunding",
-    k2: "maxYear" | "maxFunding"
+    k1: 'minYear' | 'minFunding',
+    k2: 'maxYear' | 'maxFunding'
   ) => ([min, max]: number[]) =>
     setFilters(prev => ({
       ...prev,
@@ -131,13 +113,9 @@ const Dashboard: React.FC<DashboardProps> = ({
     }));
 
   const filterKeys: Array<keyof FilterState> = [
-    "status",
-    "organization",
-    "country",
-    "legalBasis",
+    'status', 'organization', 'country', 'legalBasis'
   ];
 
-  // initial blank-state spinner
   if (loadingStats && !Object.keys(statsData).length) {
     return (
       <Flex justify="center" mt={10}>
@@ -152,26 +130,21 @@ const Dashboard: React.FC<DashboardProps> = ({
       <Box borderWidth="1px" borderRadius="lg" p={4} mb={6} bg="gray.50">
         <Grid
           templateColumns={{
-            base: "repeat(1,1fr)",
-            sm: "repeat(2,1fr)",
-            md: "repeat(3,1fr)",
-            lg: "repeat(6,1fr)",
+            base: '1fr',
+            sm: 'repeat(2,1fr)',
+            md: 'repeat(4,1fr)',
+            lg: 'repeat(6,1fr)',
           }}
           gap={4}
-          columnGap={6}
         >
-          {filterKeys.map((key) => {
-            const isOrg = key === "organization";
-            const opts =
-              availableFilters[
-                key === "status"
-                  ? "statuses"
-                  : key === "organization"
-                  ? "organizations"
-                  : key === "country"
-                  ? "countries"
-                  : "legalBases"
-              ] || [];
+          {filterKeys.map(key => {
+            const opts = availableFilters[
+              key === 'status' ? 'statuses'
+              : key === 'organization' ? 'organizations'
+              : key === 'country' ? 'countries'
+              : 'legalBases'
+            ] || [];
+            const isOrg = key === 'organization';
 
             return (
               <GridItem key={key} colSpan={1}>
@@ -180,17 +153,13 @@ const Dashboard: React.FC<DashboardProps> = ({
                 </Text>
                 <Select
                   options={opts.map(v => ({ label: v, value: v }))}
-                  placeholder={`Select ${key}`}
+                  placeholder={FILTER_LABELS[key]}
                   onChange={updateFilter(key)}
                   isClearable
                   isSearchable
-                  openMenuOnClick
-                  openMenuOnFocus
                   {...(isOrg && {
-                    openMenuOnClick: false,
-                    openMenuOnFocus: false,
                     menuIsOpen: orgInput.length > 0,
-                    onInputChange: (str: string) => setOrgInput(str),
+                    onInputChange: setOrgInput,
                   })}
                 />
               </GridItem>
@@ -198,7 +167,7 @@ const Dashboard: React.FC<DashboardProps> = ({
           })}
 
           {/* Year Range */}
-          <GridItem colSpan={{ base: 1, md: 3 }}>
+          <GridItem colSpan={{ base: 1, md: 2 }}>
             <Box mb={6}>
               <Flex justify="space-between" mb={1}>
                 <Text fontSize="sm" fontWeight="medium">Year Range</Text>
@@ -216,7 +185,7 @@ const Dashboard: React.FC<DashboardProps> = ({
                 size="md"
               >
                 <RangeSliderTrack>
-                  <RangeSliderFilledTrack bg="brand.blue" />
+                  <RangeSliderFilledTrack />
                 </RangeSliderTrack>
                 <RangeSliderThumb index={0} boxSize={4}/>
                 <RangeSliderThumb index={1} boxSize={4}/>
@@ -225,7 +194,7 @@ const Dashboard: React.FC<DashboardProps> = ({
           </GridItem>
 
           {/* Funding Range */}
-          <GridItem colSpan={{ base: 1, md: 3 }}>
+          <GridItem colSpan={{ base: 1, md: 2 }}>
             <Box>
               <Flex justify="space-between" mb={1}>
                 <Text fontSize="sm" fontWeight="medium">Funding (€)</Text>
@@ -236,14 +205,14 @@ const Dashboard: React.FC<DashboardProps> = ({
               <RangeSlider
                 aria-label={["Min Funding","Max Funding"]}
                 min={0}
-                max={10_000_000}
-                step={100_000}
+                max={1e7}
+                step={1e5}
                 defaultValue={[+filters.minFunding, +filters.maxFunding]}
                 onChange={updateSlider("minFunding","maxFunding")}
                 size="md"
               >
                 <RangeSliderTrack>
-                  <RangeSliderFilledTrack bg="brand.blue" />
+                  <RangeSliderFilledTrack />
                 </RangeSliderTrack>
                 <RangeSliderThumb index={0} boxSize={4}/>
                 <RangeSliderThumb index={1} boxSize={4}/>

frontend/src/components/ProjectDetails.tsx

@@ -186,11 +186,11 @@ export default function ProjectDetails({
       </Box>
 
       {/* Right: Model Explanation */}
-      <Box flex={{ base: '1', md: '0.6' }} bg="grey" p={4} borderRadius="md" boxShadow="sm">
+      <Box flex={{ base: '1', md: '0.6' }} bg="gray.50" p={4} borderRadius="md" boxShadow="sm" height="400px">
         <Heading size="sm" mb={4}>Model Prediction & Explanation</Heading>
         {shapData?.length ? (
           <>
-            <Text mb={2}><strong>Predicted Label:</strong> {predicted}</Text>
+            <Text mb={2}><strong>Predicted Label:</strong> {predicted === 1 ? 'Terminated' : 'Closed'}</Text>
             <Text mb={4}><strong>Probability:</strong> {(probability * 100).toFixed(2)}%</Text>
             <ResponsiveContainer width="100%" height={300}>
               <BarChart data={shapData} margin={{ top: 10, right: 30, left: 0, bottom: 5 }}>
@@ -202,7 +202,7 @@ export default function ProjectDetails({
                   {shapData.map((entry, index) => (
                     <Cell
                       key={`cell-${index}`}
-                      fill={entry.shap >= 0 ? "#4caf50" : "#f44336"}
+                      fill={entry.shap >= 0 ? "#003399" : "#FFCC00"}
                     />
                   ))}
                 </Bar>

frontend/src/components/ProjectExplorer.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import {
   Box,
   Button,
@@ -18,11 +18,14 @@ import {
   Text,
   Avatar,
 } from "@chakra-ui/react";
-import type {
-  ProjectExplorerProps,
-  Project,
-  ChatMessage,
-} from "../hooks/types";
+import type { ProjectExplorerProps, Project, ChatMessage } from "../hooks/types";
+
+interface FilterOptions {
+  statuses: string[];
+  legalBases: string[];
+  organizations: string[];
+  countries: string[];
+}
 
 const ProjectExplorer: React.FC<ProjectExplorerProps> = ({
   projects,
@@ -30,6 +33,12 @@ const ProjectExplorer: React.FC<ProjectExplorerProps> = ({
   setSearch,
   statusFilter,
   setStatusFilter,
+  legalFilter,
+  setLegalFilter,
+  orgFilter,
+  setOrgFilter,
+  countryFilter,
+  setCountryFilter,
   page,
   setPage,
   setSelectedProject,
@@ -38,162 +47,165 @@ const ProjectExplorer: React.FC<ProjectExplorerProps> = ({
   chatHistory,
   askChatbot,
   messagesEndRef,
-}) => (
-  <Flex direction={{ base: "column", md: "row" }} gap={6}>
-    {/* Left Pane: Projects */}
-    <Box flex={1}>
-      <Heading size="sm" mb={2}>
-        Projects
-      </Heading>
-      <Flex gap={4} mb={4}>
-        <Input
-          placeholder="Search by title..."
-          value={search}
-          onChange={(e) => {
-            setSearch(e.target.value);
-            setPage(0);
-          }}
-        />
-        <ChakraSelect
-          placeholder="Filter by status"
-          value={statusFilter}
-          onChange={(e) => {
-            setStatusFilter(e.target.value);
-            setPage(0);
-          }}
-        >
-          <option value="Signed">Signed</option>
-          <option value="Closed">Closed</option>
-          <option value="Terminated">Terminated</option>
-        </ChakraSelect>
-      </Flex>
+}) => {
+  const [filterOpts, setFilterOpts] = useState<FilterOptions>({
+    statuses: [],
+    legalBases: [],
+    organizations: [],
+    countries: []
+  });
+  const [loadingFilters, setLoadingFilters] = useState(false);
+
+  // Fetch dynamic filter options whenever any filter changes
+  useEffect(() => {
+    setLoadingFilters(true);
+    const params = new URLSearchParams();
+    if (statusFilter) params.set("status", statusFilter);
+    if (legalFilter)  params.set("legalBasis", legalFilter);
+    if (orgFilter)    params.set("organization", orgFilter);
+    if (countryFilter) params.set("country", countryFilter);
+    if (search)       params.set("search", search);
+
+    fetch(`/api/filters?${params.toString()}`)
+      .then((res) => res.json())
+      .then((data: FilterOptions) => setFilterOpts(data))
+      .catch(console.error)
+      .finally(() => setLoadingFilters(false));
+  }, [statusFilter, legalFilter, orgFilter, countryFilter, search]);
 
-      {/* Table Container with grey background */}
-        <Box
-          bg="gray.50"
-          p={4}
-          borderRadius="md"
-          height="500px"
-          overflowY="auto"
-        >
-        {!projects.length ? (
-          <Flex justify="center" py={10}>
-            <Spinner />
-          </Flex>
-        ) : (
-          <Table
-                variant="simple"
-                size="sm"   
-                width="100%"             
-            >
-            <Thead>
-              <Tr>
-                <Th width="60%" whiteSpace="nowrap">Title</Th>
-                <Th width="10%" whiteSpace="nowrap">Status</Th>
-                <Th width="10%" whiteSpace="nowrap">ID</Th>
-                <Th width="10%" whiteSpace="nowrap">Start Date</Th>
-                <Th width="10%" whiteSpace="nowrap">Funding €</Th>
-              </Tr>
-            </Thead>
-            <Tbody>
-              {projects.map((p: Project) => (
-                <Tr
-                  key={p.id}
-                  onClick={() => setSelectedProject(p)}
-                  cursor="pointer"
-                  _hover={{ bg: "gray.100" }}
-                >
-                  <Td overflow="hidden" textOverflow="ellipsis">{p.title}</Td>
-                  <Td>{p.status}</Td>
-                  <Td>{p.id}</Td>
-                  <Td whiteSpace="nowrap">{p.startDate}</Td>
-                  <Td>{p.ecMaxContribution?.toLocaleString()}</Td>
+  return (
+    <Flex direction={{ base: "column", md: "row" }} gap={6}>
+      {/* Left Pane: Projects & Filters */}
+      <Box flex={1}>
+        <Heading size="sm" mb={2}>Projects</Heading>
+        <Flex gap={4} mb={4} flexWrap="wrap">
+          <Input
+            placeholder="Search by title..."
+            value={search}
+            onChange={(e) => { setSearch(e.target.value); setPage(0); }}
+            width={{ base: "100%", md: "200px" }}
+          />
+          <ChakraSelect
+            placeholder={loadingFilters ? "Loading..." : "Status"}
+            value={statusFilter}
+            onChange={(e) => { setStatusFilter(e.target.value); setPage(0); }}
+            isDisabled={loadingFilters}
+            width="150px"
+          >
+            {filterOpts.statuses.map((s) => <option key={s} value={s}>{s}</option>)}
+          </ChakraSelect>
+          <ChakraSelect
+            placeholder={loadingFilters ? "Loading..." : "Legal Basis"}
+            value={legalFilter}
+            onChange={(e) => { setLegalFilter(e.target.value); setPage(0); }}
+            isDisabled={loadingFilters}
+            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); }}
+            isDisabled={loadingFilters}
+            width="180px"
+          >
+            {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); }}
+            isDisabled={loadingFilters}
+            width="150px"
+          >
+            {filterOpts.countries.map((c) => <option key={c} value={c}>{c}</option>)}
+          </ChakraSelect>
+        </Flex>
+
+        <Box bg="gray.50" p={4} borderRadius="md" height="500px" overflowY="auto">
+          {!projects.length ? (
+            <Flex justify="center" py={10}><Spinner /></Flex>
+          ) : (
+            <Table variant="simple" size="sm" width="100%">
+              <Thead>
+                <Tr>
+                  <Th width="60%">Title</Th>
+                  <Th>Status</Th>
+                  <Th>ID</Th>
+                  <Th>Start Date</Th>
+                  <Th>Funding €</Th>
                 </Tr>
-              ))}
-            </Tbody>
-          </Table>
-        )}
-      </Box>
+              </Thead>
+              <Tbody>
+                {projects.map((p: Project) => (
+                  <Tr
+                    key={p.id}
+                    onClick={() => setSelectedProject(p)}
+                    cursor="pointer"
+                    _hover={{ bg: "gray.100" }}
+                  >
+                    <Td isTruncated>{p.title}</Td>
+                    <Td>{p.status}</Td>
+                    <Td>{p.id}</Td>
+                    <Td whiteSpace="nowrap">{p.startDate}</Td>
+                    <Td>{p.ecMaxContribution.toLocaleString()}</Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          )}
+        </Box>
 
-      <Flex mt={4} gap={2} justify="center">
-        <Button
-          onClick={() => setPage((p) => Math.max(p - 1, 0))}
-          isDisabled={page === 0}
-          aria-label="Previous page"
-        >
-          Previous
-        </Button>
-        <Button onClick={() => setPage((p) => p + 1)} aria-label="Next page">
-          Next
-        </Button>
-      </Flex>
-    </Box>
+        <Flex mt={4} gap={2} justify="center">
+          <Button onClick={() => setPage(p => Math.max(p - 1, 0))} isDisabled={page === 0}>Previous</Button>
+          <Button onClick={() => setPage(p => p + 1)}>Next</Button>
+        </Flex>
+      </Box>
 
-    {/* Right Pane: Assistant */}
-    <Box
-      flex={{ base: 1, md: 0.4 }}
-      bg="gray.50"
-      p={4}
-      borderRadius="md"
-      height="500px"
-      display="flex"
-      flexDirection="column"
-    >
-      <Heading size="sm" mb={2}>
-        Assistant
-      </Heading>
-      <Box flex={1} overflowY="auto" mb={4}>
-        <VStack spacing={3} align="stretch">
-          {chatHistory.map((msg: ChatMessage, i: number) => (
-            <HStack
-              key={i}
-              alignSelf={msg.role === "user" ? "flex-end" : "flex-start"}
-              maxW="90%"
-            >
-              {msg.role === "assistant" && (
-                <Avatar size="sm" name="Bot" />
-              )}
-              <Box>
-                <Text
-                  fontSize="sm"
-                  bg={msg.role === "user" ? "blue.100" : "gray.200"}
-                  px={3}
-                  py={2}
-                  borderRadius="md"
-                >
-                  {msg.content}
-                </Text>
-              </Box>
-              {msg.role === "user" && (
-                <Avatar size="sm" name="You" bg="blue.300" />
-              )}
-            </HStack>
-          ))}
-          <div ref={messagesEndRef} />
-        </VStack>
+      {/* Right Pane: Assistant */}
+      <Box
+        flex={{ base: 1, md: 0.4 }}
+        bg="gray.50"
+        p={4}
+        borderRadius="md"
+        height="500px"
+        display="flex"
+        flexDirection="column"
+      >
+        <Heading size="sm" mb={2}>Assistant</Heading>
+        <Box flex={1} overflowY="auto" mb={4}>
+          <VStack spacing={3} align="stretch">
+            {chatHistory.map((msg: ChatMessage, i: number) => (
+              <HStack
+                key={i}
+                alignSelf={msg.role === "user" ? "flex-end" : "flex-start"}
+                maxW="90%"
+              >
+                {msg.role === "assistant" && <Avatar size="sm" name="Bot" />}
+                <Box>
+                  <Text fontSize="sm" bg={msg.role === "user" ? "blue.100" : "gray.200"} px={3} py={2} borderRadius="md">
+                    {msg.content}
+                  </Text>
+                </Box>
+                {msg.role === "user" && <Avatar size="sm" name="You" bg="blue.300" />}
+              </HStack>
+            ))}
+            <div ref={messagesEndRef} />
+          </VStack>
+        </Box>
+        <HStack>
+          <Input
+            placeholder="Ask something..."
+            value={question}
+            onChange={(e) => setQuestion(e.target.value)}
+            onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); askChatbot(); } }}
+          />
+          <Button onClick={askChatbot} colorScheme="blue" aria-label="Ask the chatbot">Send</Button>
+        </HStack>
       </Box>
-      <HStack>
-        <Input
-          placeholder="Ask something..."
-          value={question}
-          onChange={(e) => setQuestion(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-              e.preventDefault();
-              askChatbot();
-            }
-          }}
-        />
-        <Button
-          onClick={askChatbot}
-          colorScheme="blue"
-          aria-label="Ask the chatbot"
-        >
-          Send
-        </Button>
-      </HStack>
-    </Box>
-  </Flex>
-);
+    </Flex>
+  );
+};
 
-export default ProjectExplorer;
+export default ProjectExplorer;

frontend/src/hooks/types.ts

@@ -74,6 +74,12 @@ export interface ProjectExplorerProps {
   setSearch: (value: string) => void;
   statusFilter: string;
   setStatusFilter: (value: string) => void;
+  legalFilter: string;
+  setLegalFilter: (value: string) => void;
+  orgFilter: string;
+  setOrgFilter: (value: string) => void;
+  countryFilter: string;
+  setCountryFilter: (value: string) => void;
   page: number;
   setPage: React.Dispatch<React.SetStateAction<number>>;
   setSelectedProject: (project: Project) => void;