From 35461992f598497515a05f96feb4d40750c3fbbb Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Tue, 28 Feb 2023 12:13:27 +0100
Subject: [PATCH 01/69] feat: funding request design implementation

---
 src/app/components/Table/Simple/index.tsx     |   1 +
 .../sub-modules/overview/index.tsx            |   2 +-
 .../components/dataset-grid/index.tsx         |  22 +++
 src/app/modules/viz-module/index.tsx          |   5 +
 .../table/data-wrappers/generic.tsx           | 186 ++++++++++++++++++
 .../table/data-wrappers/location.tsx          | 140 +++++++++++++
 .../fundingRequests/table/index.tsx           |  37 ++++
 7 files changed, 392 insertions(+), 1 deletion(-)
 create mode 100644 src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
 create mode 100644 src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/location.tsx
 create mode 100644 src/app/modules/viz-module/sub-modules/fundingRequests/table/index.tsx

diff --git a/src/app/components/Table/Simple/index.tsx b/src/app/components/Table/Simple/index.tsx
index f99388463..94178a1f6 100644
--- a/src/app/components/Table/Simple/index.tsx
+++ b/src/app/components/Table/Simple/index.tsx
@@ -133,6 +133,7 @@ function Row(props: {
           </TableCell>
         ))}
       </TableRow>
+
       <TableRow
         css={`
           border-bottom: unset;
diff --git a/src/app/modules/country-detail-module/sub-modules/overview/index.tsx b/src/app/modules/country-detail-module/sub-modules/overview/index.tsx
index 9dc7d8c6c..88c9b9ac0 100644
--- a/src/app/modules/country-detail-module/sub-modules/overview/index.tsx
+++ b/src/app/modules/country-detail-module/sub-modules/overview/index.tsx
@@ -131,7 +131,7 @@ export function LocationDetailOverviewModule(props: Props) {
             margin-bottom: 8px;
           `}
         >
-          {locationInfoData.coordinatingMechanismContacts.length > 0 && (
+          {locationInfoData.coordinatingMechanismContacts?.length > 0 && (
             <React.Fragment>
               <button
                 onClick={() => setContactsExpanded(!contactsExpanded)}
diff --git a/src/app/modules/landing-module/components/dataset-grid/index.tsx b/src/app/modules/landing-module/components/dataset-grid/index.tsx
index ddd244d1b..00174ee9e 100644
--- a/src/app/modules/landing-module/components/dataset-grid/index.tsx
+++ b/src/app/modules/landing-module/components/dataset-grid/index.tsx
@@ -127,6 +127,9 @@ export function LandingDatasetGrid() {
   const aaText = {
     __html: get(cmsData, "componentsDatasetCarousel.accessAllocations", ""),
   };
+  const frText = {
+    __html: "Access to Funding · Funding Requests",
+  };
   const grText = {
     __html: get(cmsData, "componentsDatasetCarousel.grants", ""),
   };
@@ -137,6 +140,10 @@ export function LandingDatasetGrid() {
     __html: get(cmsData, "componentsDatasetCarousel.documents", ""),
   };
 
+  const frDescription = {
+    __html: "Funding requests applications by countries",
+  };
+
   const fpDescription = {
     __html: get(
       cmsData,
@@ -196,6 +203,7 @@ export function LandingDatasetGrid() {
     __html: get(cmsData, "componentsDatasetCarousel.documentsDescription", ""),
   };
 
+  console.log(cmsData, "cmsData");
   return (
     <Grid container spacing={2}>
       <Grid item xs={12} sm={6} md={6} lg={3}>
@@ -257,6 +265,20 @@ export function LandingDatasetGrid() {
           ]}
         />
       </Grid>
+
+      <Grid item xs={12} sm={6} md={6} lg={3}>
+        <GridItem
+          title={frText}
+          link="/viz/funding-request/table"
+          description={frDescription}
+          iconLinks={[
+            {
+              icon: <TableIcon />,
+              link: "/viz/funding-request/table",
+            },
+          ]}
+        />
+      </Grid>
       <Grid item xs={12} sm={6} md={6} lg={3}>
         <GridItem title={grText} link="/grants" description={grDescription} />
       </Grid>
diff --git a/src/app/modules/viz-module/index.tsx b/src/app/modules/viz-module/index.tsx
index 5ce5d7fa1..43c5677d1 100644
--- a/src/app/modules/viz-module/index.tsx
+++ b/src/app/modules/viz-module/index.tsx
@@ -34,6 +34,7 @@ import BreadCrumbs from "app/components/Charts/common/breadcrumbs";
 import { v4 } from "uuid";
 import { useRecoilState } from "recoil";
 import { breadCrumbItems } from "app/state/recoil/atoms";
+import { GenericFundingRequestWrapper } from "./sub-modules/fundingRequests/table/data-wrappers/generic";
 
 export default function VizModule() {
   const location = useLocation();
@@ -308,6 +309,10 @@ export default function VizModule() {
           <Route path="/viz/eligibility">
             <EligibilityModule />
           </Route>
+          {/* Funding Request */}
+          <Route path="/viz/funding-request/table">
+            <GenericFundingRequestWrapper />
+          </Route>
         </Switch>
       </div>
       <div
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
new file mode 100644
index 000000000..82dc1c1f3
--- /dev/null
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
@@ -0,0 +1,186 @@
+/* third-party */
+import React from "react";
+import get from "lodash/get";
+import TablePagination from "@material-ui/core/TablePagination";
+import { useDebounce, useTitle, useUpdateEffect } from "react-use";
+import { useStoreActions, useStoreState } from "app/state/store/hooks";
+/* project */
+import { InfoIcon } from "app/assets/icons/Info";
+import { PageLoader } from "app/modules/common/page-loader";
+import { SimpleTableRow } from "app/components/Table/Simple/data";
+import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
+import { DotChartModel } from "app/components/Charts/Eligibility/DotChart/data";
+import { EligibilityTable } from "app/modules/viz-module/sub-modules/eligibility/table";
+import { FundingRequestTable } from "..";
+
+function getTableData(data: DotChartModel[]): SimpleTableRow[] {
+  const updatedTableData: SimpleTableRow[] = [];
+  data.forEach((item: DotChartModel) => {
+    updatedTableData.push({
+      name: item.name,
+      status: "",
+      children: item.items.map((subItem: any) => ({
+        name: subItem.name,
+        status: subItem.status,
+      })),
+    });
+  });
+  return updatedTableData;
+}
+
+export function GenericFundingRequestWrapper() {
+  useTitle("The Data Explorer - Funding Request");
+
+  const [search, setSearch] = React.useState("");
+  const [sortBy, setSortBy] = React.useState("");
+
+  const selectedYear = useStoreState(
+    (state) => state.ToolBoxPanelEligibilityYearState.value
+  );
+
+  const fetchYearOptionsData = useStoreActions(
+    (store) => store.EligibilityYears.fetch
+  );
+
+  const data = useStoreState(
+    (state) => get(state.Eligibility.data, "data", []) as DotChartModel[]
+  );
+
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(10);
+  const [tableData, setTableData] = React.useState<SimpleTableRow[]>(
+    getTableData(data)
+  );
+
+  // aggregateBy control const
+  const aggregateBy = useStoreState(
+    (state) =>
+      (state.ToolBoxPanelAggregateByState.value.length > 0
+        ? state.ToolBoxPanelAggregateByState.value
+        : "componentName") as "componentName" | "geographicAreaName"
+  );
+
+  const fetchData = useStoreActions((store) => store.Eligibility.fetch);
+
+  const isLoading = useStoreState((state) => state.Eligibility.loading);
+
+  const appliedFilters = useStoreState((state) => state.AppliedFiltersState);
+
+  React.useEffect(() => {
+    fetchYearOptionsData({});
+  }, []);
+
+  function reloadData() {
+    const filterString = getAPIFormattedFilters(appliedFilters, {
+      search,
+      sortBy,
+    });
+    fetchData({
+      filterString: `aggregateBy=${aggregateBy}&periods=${selectedYear}${
+        filterString.length > 0 ? `&${filterString}` : ""
+      }`,
+    });
+  }
+
+  React.useEffect(
+    () => reloadData(),
+    [aggregateBy, appliedFilters, selectedYear, sortBy]
+  );
+
+  useUpdateEffect(() => setTableData(getTableData(data)), [data]);
+
+  const [,] = useDebounce(() => reloadData(), 500, [search]);
+
+  const handleChangePage = (
+    _event: React.MouseEvent<HTMLButtonElement> | null,
+    newPage: number
+  ) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  if (isLoading) {
+    return <PageLoader />;
+  }
+
+  return (
+    <React.Fragment>
+      <div
+        css={`
+          gap: 6px;
+          display: flex;
+          align-items: center;
+
+          > * {
+            @supports (-webkit-touch-callout: none) and (not (translate: none)) {
+              &:not(:last-child) {
+                margin-right: 6px;
+              }
+            }
+          }
+        `}
+      >
+        <div
+          css={`
+            font-weight: bold;
+            margin-right: 10px;
+            font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
+          `}
+        >
+          Year {selectedYear}
+        </div>
+        <div
+          css={`
+            display: flex;
+            margin-left: 10px;
+          `}
+        >
+          <InfoIcon />
+        </div>
+      </div>
+      <div css="width: 100%;height: 25px;" />
+      <FundingRequestTable
+        search={search}
+        sortBy={sortBy}
+        data={tableData.slice(page * rowsPerPage, (page + 1) * rowsPerPage)}
+        isLoading={isLoading}
+        setSearch={setSearch}
+        setSortBy={setSortBy}
+        columns={[
+          {
+            name:
+              aggregateBy === "componentName"
+                ? "Component/Location"
+                : "Location/Component",
+            key: "name",
+          },
+          { name: "Status", key: "status" },
+        ]}
+      />
+      <TablePagination
+        page={page}
+        component="div"
+        count={data.length}
+        rowsPerPage={rowsPerPage}
+        onPageChange={handleChangePage}
+        onRowsPerPageChange={handleChangeRowsPerPage}
+        css={`
+          @media (min-width: 768px) {
+            .MuiTablePagination-toolbar {
+              padding-left: 40px;
+            }
+            .MuiTablePagination-spacer {
+              display: none;
+            }
+          }
+        `}
+      />
+    </React.Fragment>
+  );
+}
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/location.tsx b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/location.tsx
new file mode 100644
index 000000000..d4ff4e7e3
--- /dev/null
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/location.tsx
@@ -0,0 +1,140 @@
+/* third-party */
+import React from "react";
+import get from "lodash/get";
+import TablePagination from "@material-ui/core/TablePagination";
+import { useDebounce, useTitle, useUpdateEffect } from "react-use";
+import { useStoreActions, useStoreState } from "app/state/store/hooks";
+/* project */
+import { PageLoader } from "app/modules/common/page-loader";
+import { SimpleTableRow } from "app/components/Table/Simple/data";
+import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
+import { EligibilityTable } from "app/modules/viz-module/sub-modules/eligibility/table";
+import {
+  diseaseBurdens,
+  EligibilityScatterplotDataItemModel,
+  incomeLevels,
+} from "app/components/Charts/Eligibility/Scatterplot/data";
+
+function getTableData(
+  data: EligibilityScatterplotDataItemModel[]
+): SimpleTableRow[] {
+  return data.map((item: EligibilityScatterplotDataItemModel) => ({
+    year: item.x,
+    component: item.y,
+    incomeLevel: get(incomeLevels, `[${item.incomeLevel}]`, item.incomeLevel),
+    diseaseBurden: get(diseaseBurdens, `[${item.diseaseBurden}]`, ""),
+    status: item.eligibility,
+  }));
+}
+
+interface Props {
+  code: string;
+}
+
+export function LocationEligibilityTableWrapper(props: Props) {
+  useTitle("The Data Explorer - Location Eligibility");
+
+  const [search, setSearch] = React.useState("");
+  const [sortBy, setSortBy] = React.useState("");
+
+  const data = useStoreState(
+    (state) =>
+      get(
+        state.EligibilityCountry.data,
+        "data",
+        []
+      ) as EligibilityScatterplotDataItemModel[]
+  );
+
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(10);
+  const [tableData, setTableData] = React.useState<SimpleTableRow[]>(
+    getTableData(data)
+  );
+
+  const fetchData = useStoreActions((store) => store.EligibilityCountry.fetch);
+
+  const isLoading = useStoreState((state) => state.EligibilityCountry.loading);
+
+  const appliedFilters = useStoreState((state) => state.AppliedFiltersState);
+
+  function reloadData() {
+    const filterString = getAPIFormattedFilters(
+      props.code
+        ? {
+            ...appliedFilters,
+            locations: [...appliedFilters.locations, props.code],
+          }
+        : appliedFilters,
+      { search, sortBy }
+    );
+    fetchData({
+      filterString: `${filterString}${
+        filterString.length > 0 ? "&" : ""
+      }view=table`,
+    });
+  }
+
+  React.useEffect(() => reloadData(), [props.code, appliedFilters, sortBy]);
+
+  useUpdateEffect(() => setTableData(getTableData(data)), [data]);
+
+  const [,] = useDebounce(() => reloadData(), 500, [search]);
+
+  const handleChangePage = (
+    _event: React.MouseEvent<HTMLButtonElement> | null,
+    newPage: number
+  ) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  if (isLoading) {
+    return <PageLoader />;
+  }
+
+  return (
+    <>
+      <EligibilityTable
+        search={search}
+        sortBy={sortBy}
+        data={tableData.slice(page * rowsPerPage, (page + 1) * rowsPerPage)}
+        isLoading={isLoading}
+        setSearch={setSearch}
+        setSortBy={setSortBy}
+        columns={[
+          { name: "Year", key: "year" },
+          { name: "Component", key: "component" },
+          { name: "Income Level", key: "incomeLevel" },
+          { name: "Disease Burden", key: "diseaseBurden" },
+          { name: "Status", key: "status" },
+        ]}
+      />
+
+      <TablePagination
+        page={page}
+        component="div"
+        count={data.length}
+        rowsPerPage={rowsPerPage}
+        onPageChange={handleChangePage}
+        onRowsPerPageChange={handleChangeRowsPerPage}
+        css={`
+          @media (min-width: 768px) {
+            .MuiTablePagination-toolbar {
+              padding-left: 40px;
+            }
+            .MuiTablePagination-spacer {
+              display: none;
+            }
+          }
+        `}
+      />
+    </>
+  );
+}
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/index.tsx b/src/app/modules/viz-module/sub-modules/fundingRequests/table/index.tsx
new file mode 100644
index 000000000..04a0ebf3b
--- /dev/null
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/index.tsx
@@ -0,0 +1,37 @@
+/* third-party */
+import React from "react";
+/* project */
+import { SimpleTable } from "app/components/Table/Simple";
+import { PageLoader } from "app/modules/common/page-loader";
+import {
+  SimpleTableRow,
+  SimpleTableColumn,
+} from "app/components/Table/Simple/data";
+
+interface FundingRequestTableProps {
+  search: string;
+  sortBy: string;
+  isLoading: boolean;
+  data: SimpleTableRow[];
+  columns: SimpleTableColumn[];
+  setSearch: (value: string) => void;
+  setSortBy: (value: string) => void;
+}
+
+export function FundingRequestTable(props: FundingRequestTableProps) {
+  if (props.isLoading) {
+    return <PageLoader />;
+  }
+
+  return (
+    <SimpleTable
+      search={props.search}
+      sortBy={props.sortBy}
+      rows={props.data}
+      title="Funding Request"
+      columns={props.columns}
+      onSearchChange={props.setSearch}
+      onSortByChange={props.setSortBy}
+    />
+  );
+}

From defb34a2991c288e714023da1c026f1ca22eb1c3 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Wed, 1 Mar 2023 07:29:55 +0100
Subject: [PATCH 02/69] feat: created funding request table

---
 .../components/Table/Expandable/Toolbar.tsx   |   3 +-
 src/app/components/Table/Simple/data.ts       |   1 +
 src/app/components/Table/Simple/index.tsx     |   1 +
 src/app/components/Table/funding/index.tsx    | 386 ++++++++++++++++++
 src/app/components/Table/funding/styles.ts    |   8 +
 .../table/data-wrappers/data.ts               | 183 +++++++++
 .../table/data-wrappers/generic.tsx           |  24 +-
 .../fundingRequests/table/index.tsx           |   7 +-
 8 files changed, 590 insertions(+), 23 deletions(-)
 create mode 100644 src/app/components/Table/funding/index.tsx
 create mode 100644 src/app/components/Table/funding/styles.ts
 create mode 100644 src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts

diff --git a/src/app/components/Table/Expandable/Toolbar.tsx b/src/app/components/Table/Expandable/Toolbar.tsx
index 02878cd35..9411b8ccc 100644
--- a/src/app/components/Table/Expandable/Toolbar.tsx
+++ b/src/app/components/Table/Expandable/Toolbar.tsx
@@ -18,6 +18,7 @@ import { Checkbox, FormControlLabel, FormGroup } from "@material-ui/core";
 import { locationsToNotShowExport } from "app/components/ToolBoxPanel/components/iconbuttons";
 
 interface TableToolbarProps {
+  light?: boolean;
   title: string;
   search: string;
   columns: TableToolbarCols[];
@@ -66,7 +67,7 @@ export function TableToolbar(props: TableToolbarProps) {
       css={`
         display: flex;
         padding: 0 40px;
-        background: #dfe3e5;
+        background: ${props.light ? "#F5F5F7" : "#dfe3e5"};
         flex-direction: row;
         justify-content: space-between;
         border-radius: 20px 20px 0px 0px;
diff --git a/src/app/components/Table/Simple/data.ts b/src/app/components/Table/Simple/data.ts
index 3cc7f7033..5e0b18ad1 100644
--- a/src/app/components/Table/Simple/data.ts
+++ b/src/app/components/Table/Simple/data.ts
@@ -10,6 +10,7 @@ export interface SimpleTableColumn {
 
 export interface SimpleTableProps {
   title: string;
+  light?: boolean;
   search: string;
   sortBy: string;
   rows: SimpleTableRow[];
diff --git a/src/app/components/Table/Simple/index.tsx b/src/app/components/Table/Simple/index.tsx
index 94178a1f6..2a9713e6d 100644
--- a/src/app/components/Table/Simple/index.tsx
+++ b/src/app/components/Table/Simple/index.tsx
@@ -212,6 +212,7 @@ export function SimpleTable(props: SimpleTableProps) {
     <React.Fragment>
       <TableToolbar
         title={props.title}
+        light={props.light}
         search={props.search}
         columns={toolbarCols}
         onSearchChange={props.onSearchChange}
diff --git a/src/app/components/Table/funding/index.tsx b/src/app/components/Table/funding/index.tsx
new file mode 100644
index 000000000..48536796b
--- /dev/null
+++ b/src/app/components/Table/funding/index.tsx
@@ -0,0 +1,386 @@
+import React, { Children } from "react";
+import get from "lodash/get";
+import filter from "lodash/filter";
+import Table from "@material-ui/core/Table";
+import Button from "@material-ui/core/Button";
+import Collapse from "@material-ui/core/Collapse";
+import TableRow from "@material-ui/core/TableRow";
+import TableHead from "@material-ui/core/TableHead";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import { makeStyles } from "@material-ui/core/styles";
+import ArrowUpward from "@material-ui/icons/ArrowUpward";
+import ArrowDownward from "@material-ui/icons/ArrowDownward";
+import { TriangleXSIcon } from "app/assets/icons/TriangleXS";
+import TableContainer from "@material-ui/core/TableContainer";
+import { tablecell } from "app/components/Table/Simple/styles";
+import CloudDownloadIcon from "@material-ui/icons/CloudDownload";
+
+import { TableToolbar } from "app/components/Table/Expandable/Toolbar";
+import { TableToolbarCols } from "app/components/Table/Expandable/data";
+import {
+  SimpleTableColumn,
+  SimpleTableProps,
+  // FundingTableRow,
+} from "app/components/Table/Simple/data";
+import { cellData } from "app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data";
+import { v4 } from "uuid";
+import IconButton from "@material-ui/core/IconButton";
+
+export interface FundingTableRow {
+  [key: string]: any;
+  children?: FundingTableRow[];
+}
+export interface FundingTableColumn {
+  key: string;
+  name: string;
+  col?: FundingTableColumn[];
+}
+export interface FundingTableProps {
+  title: string;
+  light?: boolean;
+  search: string;
+  sortBy: string;
+  paddingLeft: number;
+
+  rows: FundingTableRow[];
+  columns: FundingTableColumn[];
+  onSearchChange: (value: string) => void;
+  onSortByChange: (value: string) => void;
+}
+
+const useRowStyles = makeStyles({
+  root: {
+    "& > *": {
+      userSelect: "none",
+      borderBottom: "1px solid #DFE3E6",
+    },
+  },
+});
+
+function Row(props: {
+  row: FundingTableRow;
+  columns: FundingTableColumn[];
+  paddingLeft: number;
+  visibleColumnsIndexes: number[];
+}) {
+  const classes = useRowStyles();
+  const [open, setOpen] = React.useState(false);
+
+  const firstColumnWidth = props.columns?.length > 3 ? "30%" : "";
+  const firstColumnPadding = props.paddingLeft ? props.paddingLeft : 40;
+  const columnWidthCalc = `${props.columns?.length > 3 ? "70%" : "100%"} / ${
+    props.columns?.length
+  }`;
+
+  const [rowSelected, setRowSelected] = React.useState("parent");
+  console.log(props.paddingLeft, "row");
+  return (
+    <React.Fragment>
+      <TableRow
+        className={classes.root}
+        onClick={() => {
+          // padVal = padVal + 4;
+          if (props.row.children) {
+            setOpen(!open);
+          }
+          if (
+            props.row.children &&
+            props.row.children.findIndex((children) => children.children) > -1
+          ) {
+            setRowSelected("child");
+          }
+        }}
+        css={`
+          transition: background 0.2s ease-in-out;
+          background: ${props.row.children ? "#f5f5f7" : "#fff"};
+
+          ${props.row.children
+            ? `
+          :hover {
+            cursor: pointer;
+            background: #262C34;
+
+            > td {
+              color: #fff;
+            }
+            
+            path {
+              fill: #fff;
+            }
+          }
+          `
+            : ""};
+        `}
+      >
+        {props.columns.map((column: FundingTableColumn, index: number) => (
+          <TableCell
+            key={v4()}
+            css={`
+              text-align: center;
+              ${tablecell} /* width: calc(${columnWidthCalc}); */
+              ${index === 0 ? `padding-left: ${props.paddingLeft}rem;` : ""}
+            `}
+          >
+            <div
+              css={`
+                width: 100%;
+                display: flex;
+                align-items: center;
+                flex-direction: row;
+                justify-content: space-between;
+              `}
+            >
+              <div
+                css={`
+                  gap: 12px;
+                  width: 100%;
+                  display: flex;
+                  align-items: center;
+                  flex-direction: row;
+                  font-weight: ${props.row.children ? "bold" : "normal"};
+                  font-family: "GothamNarrow-${props.row.children
+                      ? "Bold"
+                      : "Book"}",
+                    "Helvetica Neue", sans-serif;
+
+                  > * {
+                    @supports (-webkit-touch-callout: none) and
+                      (not (translate: none)) {
+                      &:not(:last-child) {
+                        margin-right: 12px;
+                      }
+                    }
+                  }
+
+                  > svg {
+                    transition: transform 0.1s ease-in-out;
+                    transform: rotate(${open ? "0deg" : "-180deg"});
+                  }
+                `}
+              >
+                {index === 0 && props.row.children && <TriangleXSIcon />}
+                {column.key === "link" ? (
+                  <IconButton>
+                    <CloudDownloadIcon htmlColor="#252C34" />
+                  </IconButton>
+                ) : (
+                  get(props.row, column.key, "")
+                )}
+              </div>
+            </div>
+          </TableCell>
+        ))}
+      </TableRow>
+
+      <TableRow
+        css={`
+          border-bottom: unset;
+        `}
+      >
+        <TableCell
+          css={`
+            padding: 0;
+            border-bottom: unset;
+          `}
+          colSpan={props.columns.length}
+        >
+          <Collapse in={open} timeout="auto" unmountOnExit>
+            <Table>
+              <TableBody>
+                {rowSelected == "child" && (
+                  <TableRow>
+                    {cellData.map((name, index) => (
+                      <TableCell
+                        key={index}
+                        css={`
+                          text-align: center;
+                          ${tablecell}
+                          padding-left: ${index === 0 ? "4rem" : "auto"};
+                          /* width: calc(${columnWidthCalc});
+
+                          width: ${firstColumnWidth}; */
+                        `}
+                      >
+                        <div
+                          css={`
+                            width: 100%;
+                            display: flex;
+                            align-items: center;
+                            flex-direction: row;
+                            justify-content: space-between;
+                          `}
+                        >
+                          <div
+                            css={`
+                              gap: 12px;
+                              width: 100%;
+                              display: flex;
+                              align-items: center;
+                              flex-direction: row;
+                              font-weight: bold;
+                              font-family: "GothamNarrow-Bold", "Helvetica Neue",
+                                sans-serif;
+
+                              > * {
+                                @supports (-webkit-touch-callout: none) and
+                                  (not (translate: none)) {
+                                  &:not(:last-child) {
+                                    margin-right: 12px;
+                                  }
+                                }
+                              }
+
+                              > svg {
+                                transition: transform 0.1s ease-in-out;
+                                transform: rotate(${open ? "0deg" : "-180deg"});
+                              }
+                            `}
+                          >
+                            {name}
+                          </div>
+                        </div>
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                )}
+                {props.row.children &&
+                  props.row.children.map((child: FundingTableRow) =>
+                    props.columns.map((childCol) => {
+                      return (
+                        <Row
+                          row={child}
+                          key={child.name}
+                          paddingLeft={props.paddingLeft + 2}
+                          columns={childCol.col as FundingTableColumn[]}
+                          visibleColumnsIndexes={props.visibleColumnsIndexes}
+                        />
+                      );
+                    })
+                  )}
+              </TableBody>
+            </Table>
+          </Collapse>
+        </TableCell>
+      </TableRow>
+    </React.Fragment>
+  );
+}
+
+export function FundingTable(props: FundingTableProps) {
+  const sortBySplits = props.sortBy.split(" ");
+
+  const [toolbarCols, setToolbarCols] = React.useState<TableToolbarCols[]>([]);
+
+  function onColumnViewSelectionChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const updatedToolbarCols = [...toolbarCols];
+    if (updatedToolbarCols[parseInt(e.target.value, 10)]) {
+      updatedToolbarCols[parseInt(e.target.value, 10)].checked =
+        e.target.checked;
+      setToolbarCols(updatedToolbarCols);
+    }
+  }
+
+  function onSortByChange(value: string) {
+    if (sortBySplits.length > 1) {
+      if (sortBySplits[0] === value) {
+        if (sortBySplits[1] === "ASC") {
+          props.onSortByChange(`${value} DESC`);
+        } else {
+          props.onSortByChange(`${value} ASC`);
+        }
+      } else {
+        props.onSortByChange(`${value} ASC`);
+      }
+    } else {
+      props.onSortByChange(`${value} ASC`);
+    }
+  }
+
+  React.useEffect(() => {
+    setToolbarCols(
+      props.columns.map((c, index) => ({ name: c.name, checked: true, index }))
+    );
+  }, [props.columns]);
+
+  const visibleColumnsIndexes = filter(toolbarCols, { checked: true }).map(
+    (c) => c.index
+  );
+
+  return (
+    <React.Fragment>
+      <TableToolbar
+        title={props.title}
+        light={props.light}
+        search={props.search}
+        columns={toolbarCols}
+        onSearchChange={props.onSearchChange}
+        onColumnViewSelectionChange={onColumnViewSelectionChange}
+      />
+      <TableContainer>
+        <Table aria-label="Simple table">
+          <TableHead>
+            <TableRow>
+              {props.columns.map(
+                (column: FundingTableColumn, index: number) => {
+                  let icon = undefined;
+                  if (
+                    sortBySplits.length > 1 &&
+                    sortBySplits[0] === column.key
+                  ) {
+                    if (sortBySplits[1] === "DESC") {
+                      icon = <ArrowDownward />;
+                    } else {
+                      icon = <ArrowUpward />;
+                    }
+                  }
+                  return (
+                    <TableCell
+                      key={column.key}
+                      css={`
+                        ${index === 0 ? "padding-left: 40px;" : ""}
+
+                        > button {
+                          ${tablecell}
+                          padding-left: 0;
+                          text-transform: none;
+
+                          > span {
+                            font-size: 16px;
+                            font-weight: bold;
+                            justify-content: flex-start;
+                            font-family: "GothamNarrow-Bold", "Helvetica Neue",
+                              sans-serif;
+                          }
+                        }
+                      `}
+                    >
+                      <Button
+                        onClick={() => onSortByChange(column.key)}
+                        endIcon={icon}
+                      >
+                        {column.name}
+                      </Button>
+                    </TableCell>
+                  );
+                }
+              )}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {props.rows.map((row: FundingTableRow) => (
+              <Row
+                key={row.name}
+                row={row}
+                columns={props.columns}
+                visibleColumnsIndexes={visibleColumnsIndexes}
+                paddingLeft={props.paddingLeft}
+              />
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <div css="width: 100%;height: 25px;" />
+    </React.Fragment>
+  );
+}
diff --git a/src/app/components/Table/funding/styles.ts b/src/app/components/Table/funding/styles.ts
new file mode 100644
index 000000000..f09cd09d1
--- /dev/null
+++ b/src/app/components/Table/funding/styles.ts
@@ -0,0 +1,8 @@
+import { css } from "styled-components/macro";
+
+export const tablecell = css`
+  color: #262c34;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+`;
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts
new file mode 100644
index 000000000..c9d48ddd0
--- /dev/null
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts
@@ -0,0 +1,183 @@
+export const fundingRequestData = [
+  {
+    children: [
+      {
+        id: "743843-R",
+        date: "23 March 2023",
+        component: "HIV",
+        approach: "Program Continuation",
+        window: "b2",
+        outcome: "Grant Making",
+        gac: "OCT 20",
+        board: "Nov 20",
+        link: "link",
+
+        children: [
+          {
+            grant1: "AFG-H-MOH (2021/09/15 - 2021-12-31)",
+          },
+        ],
+      },
+    ],
+    name: "Algeria",
+    status: "",
+  },
+  {
+    children: [
+      {
+        id: "743843-R",
+        date: "23 March 2023",
+        component: "HIV",
+        approach: "Program Continuation",
+        window: "b2",
+        outcome: "Grant Making",
+        gac: "OCT 20",
+        board: "Nov 20",
+        link: "link",
+
+        children: [
+          {
+            grant1: "AFG-H-MOH (2021/09/15 - 2021-12-31)",
+          },
+        ],
+      },
+    ],
+    name: "Kenya",
+    status: "",
+  },
+  {
+    children: [
+      {
+        id: "743843-R",
+        date: "23 March 2023",
+        component: "HIV",
+        approach: "Program Continuation",
+        window: "b2",
+        outcome: "Grant Making",
+        gac: "OCT 20",
+        board: "Nov 20",
+        link: "link",
+
+        children: [
+          {
+            grant1: "AFG-H-MOH (2021/09/15 - 2021-12-31)",
+          },
+        ],
+      },
+    ],
+    name: "Zambia",
+    status: "",
+  },
+];
+
+export const fundingRequestColumns = [
+  {
+    key: "name",
+    name: "Location",
+    col: [
+      {
+        key: "id",
+        name: "",
+        col: [
+          {
+            key: "grant1",
+            name: "",
+          },
+        ],
+      },
+      {
+        key: "date",
+        name: "",
+        col: [
+          {
+            key: "grant1",
+            name: "",
+          },
+        ],
+      },
+      {
+        key: "component",
+        name: "",
+        col: [
+          {
+            key: "grant1",
+            name: "",
+          },
+        ],
+      },
+      {
+        key: "approach",
+        name: "",
+        col: [
+          {
+            key: "grant1",
+            name: "",
+          },
+        ],
+      },
+      {
+        key: "window",
+        name: "",
+        col: [
+          {
+            key: "grant1",
+            name: "",
+          },
+        ],
+      },
+      {
+        key: "outcome",
+        name: "",
+        col: [
+          {
+            key: "grant1",
+            name: "",
+          },
+        ],
+      },
+      {
+        key: "gac",
+        name: "",
+        col: [
+          {
+            key: "grant1",
+            name: "",
+          },
+        ],
+      },
+      {
+        key: "board",
+        name: "",
+        col: [
+          {
+            key: "grant1",
+            name: "",
+          },
+        ],
+      },
+
+      {
+        key: "link",
+        name: "",
+        col: [
+          {
+            key: "grant1",
+            name: "",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export const cellData = [
+  "Application ID",
+  "Submission date",
+  "Component",
+  "Approach",
+  "TRP Window ",
+  "TRP Outcome",
+  "GAC Meeting",
+  "Board Approval",
+  "",
+];
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
index 82dc1c1f3..5884baac2 100644
--- a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
@@ -11,7 +11,9 @@ import { SimpleTableRow } from "app/components/Table/Simple/data";
 import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
 import { DotChartModel } from "app/components/Charts/Eligibility/DotChart/data";
 import { EligibilityTable } from "app/modules/viz-module/sub-modules/eligibility/table";
+import { tab } from "app/components/Search/components/results/styles";
 import { FundingRequestTable } from "..";
+import { fundingRequestColumns, fundingRequestData } from "./data";
 
 function getTableData(data: DotChartModel[]): SimpleTableRow[] {
   const updatedTableData: SimpleTableRow[] = [];
@@ -126,15 +128,6 @@ export function GenericFundingRequestWrapper() {
           }
         `}
       >
-        <div
-          css={`
-            font-weight: bold;
-            margin-right: 10px;
-            font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
-          `}
-        >
-          Year {selectedYear}
-        </div>
         <div
           css={`
             display: flex;
@@ -148,20 +141,11 @@ export function GenericFundingRequestWrapper() {
       <FundingRequestTable
         search={search}
         sortBy={sortBy}
-        data={tableData.slice(page * rowsPerPage, (page + 1) * rowsPerPage)}
+        data={fundingRequestData}
         isLoading={isLoading}
         setSearch={setSearch}
         setSortBy={setSortBy}
-        columns={[
-          {
-            name:
-              aggregateBy === "componentName"
-                ? "Component/Location"
-                : "Location/Component",
-            key: "name",
-          },
-          { name: "Status", key: "status" },
-        ]}
+        columns={fundingRequestColumns}
       />
       <TablePagination
         page={page}
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/index.tsx b/src/app/modules/viz-module/sub-modules/fundingRequests/table/index.tsx
index 04a0ebf3b..45c1b59c1 100644
--- a/src/app/modules/viz-module/sub-modules/fundingRequests/table/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/index.tsx
@@ -7,13 +7,14 @@ import {
   SimpleTableRow,
   SimpleTableColumn,
 } from "app/components/Table/Simple/data";
+import { FundingTable, FundingTableColumn } from "app/components/Table/funding";
 
 interface FundingRequestTableProps {
   search: string;
   sortBy: string;
   isLoading: boolean;
   data: SimpleTableRow[];
-  columns: SimpleTableColumn[];
+  columns: FundingTableColumn[];
   setSearch: (value: string) => void;
   setSortBy: (value: string) => void;
 }
@@ -24,14 +25,16 @@ export function FundingRequestTable(props: FundingRequestTableProps) {
   }
 
   return (
-    <SimpleTable
+    <FundingTable
       search={props.search}
       sortBy={props.sortBy}
+      light
       rows={props.data}
       title="Funding Request"
       columns={props.columns}
       onSearchChange={props.setSearch}
       onSortByChange={props.setSortBy}
+      paddingLeft={2}
     />
   );
 }

From 53a0afeda5228b8a1fe98ebff6d9a176d6e50858 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Thu, 2 Mar 2023 23:40:58 +0100
Subject: [PATCH 03/69] feat: created  access to funding path

---
 src/app/components/PageHeader/components/tabs/data.ts | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/app/components/PageHeader/components/tabs/data.ts b/src/app/components/PageHeader/components/tabs/data.ts
index 9c6941b48..b827cec2e 100644
--- a/src/app/components/PageHeader/components/tabs/data.ts
+++ b/src/app/components/PageHeader/components/tabs/data.ts
@@ -21,16 +21,7 @@ export const countryDetailTabs: TabProps[] = [
   },
   {
     name: "Access to Funding",
-    tabs: [
-      {
-        name: "Eligibility",
-        url: "/location/<code>/eligibility",
-      },
-      {
-        name: "Allocation",
-        url: "/location/<code>/allocations",
-      },
-    ],
+    url: "/location/<code>/access-to-funding",
   },
   {
     name: "Grant Implementation",

From b7cb01ae57ead4d7e5dc0da86fea9d7f96b67427 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Thu, 2 Mar 2023 23:44:16 +0100
Subject: [PATCH 04/69] feat: created funding request table

---
 src/app/components/Table/funding/index.tsx    |   7 +-
 .../ToolBoxPanel/components/filters/data.ts   |  38 +++
 .../sub-modules/accessToFunding/location.tsx  | 141 +++++++++++
 .../sub-modules/accessToFunding/style.ts      |  43 ++++
 .../fundingRequest/fundingRequestTable.tsx    |  48 ++++
 .../table/fundingRequest/tableWrapper.tsx     | 236 ++++++++++++++++++
 .../table/data-wrappers/location.tsx          |  16 +-
 7 files changed, 518 insertions(+), 11 deletions(-)
 create mode 100644 src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
 create mode 100644 src/app/modules/viz-module/sub-modules/accessToFunding/style.ts
 create mode 100644 src/app/modules/viz-module/sub-modules/accessToFunding/table/fundingRequest/fundingRequestTable.tsx
 create mode 100644 src/app/modules/viz-module/sub-modules/accessToFunding/table/fundingRequest/tableWrapper.tsx

diff --git a/src/app/components/Table/funding/index.tsx b/src/app/components/Table/funding/index.tsx
index 48536796b..6c749ddc1 100644
--- a/src/app/components/Table/funding/index.tsx
+++ b/src/app/components/Table/funding/index.tsx
@@ -308,7 +308,11 @@ export function FundingTable(props: FundingTableProps) {
   );
 
   return (
-    <React.Fragment>
+    <React.Fragment
+      css={`
+        display: relative;
+      `}
+    >
       <TableToolbar
         title={props.title}
         light={props.light}
@@ -380,6 +384,7 @@ export function FundingTable(props: FundingTableProps) {
           </TableBody>
         </Table>
       </TableContainer>
+
       <div css="width: 100%;height: 25px;" />
     </React.Fragment>
   );
diff --git a/src/app/components/ToolBoxPanel/components/filters/data.ts b/src/app/components/ToolBoxPanel/components/filters/data.ts
index 80816f4a7..5ac06e4d8 100644
--- a/src/app/components/ToolBoxPanel/components/filters/data.ts
+++ b/src/app/components/ToolBoxPanel/components/filters/data.ts
@@ -154,6 +154,43 @@ export const filtergroups: FilterGroupProps[] = [
     addSubOptionFilters: false,
   },
 ];
+export const fundingRequestFilterGroups: FilterGroupProps[] = [
+  {
+    name: "Components",
+    addSubOptionFilters: false,
+  },
+  {
+    name: "Locations",
+    addSubOptionFilters: true,
+  },
+  {
+    name: "Portfolio categorization",
+    addSubOptionFilters: false,
+  },
+  {
+    name: "TRP Window",
+    addSubOptionFilters: true,
+  },
+];
+export const accessToFundingEligibilityFilterGroups: FilterGroupProps[] = [
+  {
+    name: "Year",
+    addSubOptionFilters: true,
+  },
+  {
+    name: "Components",
+    addSubOptionFilters: false,
+  },
+
+  {
+    name: "Eligibility Status",
+    addSubOptionFilters: false,
+  },
+  {
+    name: "TRP Window",
+    addSubOptionFilters: true,
+  },
+];
 
 export const pathnameToFilterGroups = {
   // independent data pages
@@ -402,6 +439,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods"
   ),
+
   "/location/<code>/allocations": filter(
     filtergroups,
     (fg: FilterGroupProps) => fg.name === "Components"
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
new file mode 100644
index 000000000..6b102c6e9
--- /dev/null
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
@@ -0,0 +1,141 @@
+import { Box } from "@material-ui/core";
+import { FilterGroupProps } from "app/components/ToolBoxPanel/components/filters/data";
+import React from "react";
+import { AllocationsModule } from "../allocations";
+
+import { chipcss, descriptioncss } from "./style";
+import { AccessToFundingEligibilityTableWrapper } from "./table/eligibility/tableWrapper";
+import { AccessToFundingRequestTableWrapper } from "./table/fundingRequest/tableWrapper";
+
+interface Props {
+  code: string;
+  codeParam: string;
+  filterGroups: FilterGroupProps[];
+}
+
+export default function LocationAccessToFundingWrapper(props: Props) {
+  const [openToolboxPanel, setOpenToolboxPanel] = React.useState(false);
+  return (
+    <>
+      <div css={descriptioncss}>
+        <h1>
+          <b>Access to Funding</b>
+        </h1>
+        <h3>
+          <b>Eligibility, Allocation & Funding Requests</b>
+        </h3>
+        <p>
+          Description of Access to Funding / eligibility / FR: We unite the
+          world to find solutions that have the most impact, and we take them to
+          scale worldwide. It’s working. We won’t stop until the job is
+          finished.
+        </p>
+      </div>
+      <Box height={26} />
+
+      <div>
+        <p
+          css={`
+            text-align: center;
+          `}
+        >
+          <b>Period / Cycle</b>
+        </p>
+        <div
+          css={`
+            display: flex;
+            justify-content: center;
+            gap: 0.7rem;
+            margin-top: 1rem;
+          `}
+        >
+          <div css={chipcss}>All</div>
+          <div css={chipcss}>2011/2013</div>
+          <div css={chipcss}>2014/2016</div>
+          <div css={chipcss}>2017/2019</div>
+          <div css={chipcss}>2020/2022</div>
+          <div css={chipcss}>2023/2025</div>
+        </div>
+      </div>
+
+      <div>
+        <h4
+          css={`
+            font-size: 18px;
+            color: #252c34;
+            margin-bottom: 0;
+            font-family: "Gotham Narrow";
+          `}
+        >
+          <b>Eligibility </b>
+        </h4>
+        <hr
+          css={`
+            border: 0.5px solid #000000;
+            width: 100%;
+            height: 0px;
+            margin-bottom: 3rem;
+          `}
+        />
+        <AccessToFundingEligibilityTableWrapper
+          code={props.code}
+          codeParam={props.codeParam}
+        />
+      </div>
+
+      <div>
+        <h4
+          css={`
+            font-size: 18px;
+            color: #252c34;
+            margin-bottom: 0;
+            font-family: "Gotham Narrow";
+          `}
+        >
+          <b> Allocation</b>
+        </h4>
+        <hr
+          css={`
+            border: 0.5px solid #000000;
+            width: 100%;
+            height: 0px;
+            margin-bottom: 3rem;
+          `}
+        />
+        <AllocationsModule
+          code={props.code}
+          toolboxOpen={openToolboxPanel}
+          setOpenToolboxPanel={setOpenToolboxPanel}
+        />
+      </div>
+
+      <div>
+        <h4
+          css={`
+            font-size: 18px;
+            color: #252c34;
+            margin-bottom: 0;
+            font-family: "Gotham Narrow";
+          `}
+        >
+          <b>Funding Requests</b>
+        </h4>
+        <hr
+          css={`
+            border: 0.5px solid #000000;
+            width: 100%;
+            height: 0px;
+            margin-bottom: 3rem;
+          `}
+        />
+        <AccessToFundingRequestTableWrapper
+          code={props.code}
+          codeParam={props.codeParam}
+          filterGroups={props.filterGroups}
+        />
+      </div>
+
+      <Box height={26} />
+    </>
+  );
+}
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts b/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts
new file mode 100644
index 000000000..a40bda4fa
--- /dev/null
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts
@@ -0,0 +1,43 @@
+import { css } from "styled-components/macro";
+
+export const chipcss = css`
+  padding: 7px 24px;
+  width: max-content;
+  height: 32px;
+  background: #c7cdd1;
+  border-radius: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #ffffff;
+  font-weight: 700;
+  cursor: pointer;
+  &:hover {
+    background-color: #252c34;
+  }
+`;
+
+export const descriptioncss = css`
+  text-align: center;
+  font-family: "Gotham Narrow";
+  p {
+    font-weight: 325;
+    font-size: 14px;
+    color: #000000;
+    width: 60%;
+    margin: auto;
+    line-height: 17px;
+  }
+  h1 {
+    font-weight: 700;
+    font-size: 24px;
+    color: #252c34;
+    margin-bottom: 0px;
+  }
+  h3 {
+    font-weight: 400;
+    font-size: 18px;
+    color: #252c34;
+    margin-top: 3px;
+  }
+`;
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/table/fundingRequest/fundingRequestTable.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/table/fundingRequest/fundingRequestTable.tsx
new file mode 100644
index 000000000..fe4614e3a
--- /dev/null
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/table/fundingRequest/fundingRequestTable.tsx
@@ -0,0 +1,48 @@
+/* third-party */
+import React from "react";
+/* project */
+import { SimpleTable } from "app/components/Table/Simple";
+import { PageLoader } from "app/modules/common/page-loader";
+import {
+  SimpleTableRow,
+  SimpleTableColumn,
+} from "app/components/Table/Simple/data";
+import { FundingTable, FundingTableColumn } from "app/components/Table/funding";
+import { TriangleXSIcon } from "app/assets/icons/TriangleXS";
+import { ClickAwayListener, Slide } from "@material-ui/core";
+import { SubToolBoxPanel } from "app/components/ToolBoxPanel/components/subtoolboxpanel";
+import { get } from "lodash";
+import { FilterGroupProps } from "app/components/ToolBoxPanel/components/filters/data";
+
+interface FundingRequestTableProps {
+  search: string;
+  sortBy: string;
+  isLoading: boolean;
+  data: SimpleTableRow[];
+  columns: FundingTableColumn[];
+  setSearch: (value: string) => void;
+  setSortBy: (value: string) => void;
+  title: string;
+}
+
+export function FundingRequestTable(props: FundingRequestTableProps) {
+  if (props.isLoading) {
+    return <PageLoader />;
+  }
+
+  return (
+    <div>
+      <FundingTable
+        search={props.search}
+        sortBy={props.sortBy}
+        light
+        rows={props.data}
+        title={props.title}
+        columns={props.columns}
+        onSearchChange={props.setSearch}
+        onSortByChange={props.setSortBy}
+        paddingLeft={2}
+      />
+    </div>
+  );
+}
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/table/fundingRequest/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/table/fundingRequest/tableWrapper.tsx
new file mode 100644
index 000000000..15bdf988e
--- /dev/null
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/table/fundingRequest/tableWrapper.tsx
@@ -0,0 +1,236 @@
+/* third-party */
+import React from "react";
+import get from "lodash/get";
+import TablePagination from "@material-ui/core/TablePagination";
+import { useDebounce, useTitle, useUpdateEffect } from "react-use";
+import { useStoreActions, useStoreState } from "app/state/store/hooks";
+/* project */
+import { PageLoader } from "app/modules/common/page-loader";
+import { SimpleTableRow } from "app/components/Table/Simple/data";
+import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
+import { EligibilityTable } from "app/modules/viz-module/sub-modules/eligibility/table";
+import {
+  diseaseBurdens,
+  EligibilityScatterplotDataItemModel,
+  incomeLevels,
+} from "app/components/Charts/Eligibility/Scatterplot/data";
+import {
+  fundingRequestData,
+  fundingRequestColumns,
+} from "../../../fundingRequests/table/data-wrappers/data";
+import { FundingRequestTable } from "./fundingRequestTable";
+import {
+  FilterGroupProps,
+  filtergroups,
+  fundingRequestFilterGroups,
+  pathnameToFilterGroups,
+} from "app/components/ToolBoxPanel/components/filters/data";
+import { ClickAwayListener, Slide } from "@material-ui/core";
+import { TriangleXSIcon } from "app/assets/icons/TriangleXS";
+import { ToolBoxPanelBudgetFlowLevelSelectors } from "app/components/ToolBoxPanel/components/budgetflowlevelselectors";
+import { ToolBoxPanelControlRow } from "app/components/ToolBoxPanel/components/controlrow";
+import {
+  ViewModel,
+  getControlItems,
+} from "app/components/ToolBoxPanel/utils/getControlItems";
+import { useHistory, useParams } from "react-router-dom";
+import { ToolBoxPanelDonorMapTypes } from "app/components/ToolBoxPanel/components/donormaptypes";
+import { ToolBoxPanelFilters } from "app/components/ToolBoxPanel/components/filters";
+
+function getTableData(
+  data: EligibilityScatterplotDataItemModel[]
+): SimpleTableRow[] {
+  return data.map((item: EligibilityScatterplotDataItemModel) => ({
+    year: item.x,
+    component: item.y,
+    incomeLevel: get(incomeLevels, `[${item.incomeLevel}]`, item.incomeLevel),
+    diseaseBurden: get(diseaseBurdens, `[${item.diseaseBurden}]`, ""),
+    status: item.eligibility,
+  }));
+}
+
+interface Props {
+  code: string;
+  codeParam: string;
+  filterGroups: FilterGroupProps[];
+}
+
+export function AccessToFundingRequestTableWrapper(props: Props) {
+  useTitle("The Data Explorer - Location Eligibility");
+  const [openToolboxPanel, setOpenToolboxPanel] = React.useState(false);
+  const [search, setSearch] = React.useState("");
+  const [sortBy, setSortBy] = React.useState("");
+
+  const data = useStoreState(
+    (state) =>
+      get(
+        state.EligibilityCountry.data,
+        "data",
+        []
+      ) as EligibilityScatterplotDataItemModel[]
+  );
+
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(10);
+  const [tableData, setTableData] = React.useState<SimpleTableRow[]>(
+    getTableData(data)
+  );
+
+  const fetchData = useStoreActions((store) => store.EligibilityCountry.fetch);
+
+  const isLoading = useStoreState((state) => state.EligibilityCountry.loading);
+
+  const appliedFilters = useStoreState((state) => state.AppliedFiltersState);
+
+  function reloadData() {
+    const filterString = getAPIFormattedFilters(
+      props.code
+        ? {
+            ...appliedFilters,
+            locations: [...appliedFilters.locations, props.code],
+          }
+        : appliedFilters,
+      { search, sortBy }
+    );
+    fetchData({
+      filterString: `${filterString}${
+        filterString.length > 0 ? "&" : ""
+      }view=table`,
+    });
+  }
+
+  React.useEffect(() => reloadData(), [props.code, appliedFilters, sortBy]);
+
+  useUpdateEffect(() => setTableData(getTableData(data)), [data]);
+
+  const [,] = useDebounce(() => reloadData(), 500, [search]);
+
+  const [selectedView, setSelectedView] = React.useState("Table");
+
+  const [controlItems, setControlItems] = React.useState<{
+    views: ViewModel[];
+    aggregates: ViewModel[];
+  }>({
+    views: [{ label: "Table", value: "Table", link: location.pathname }],
+    aggregates: [{} as ViewModel],
+  });
+
+  if (isLoading) {
+    return <PageLoader />;
+  }
+
+  return (
+    <>
+      <div
+        css={`
+          position: relative;
+        `}
+      >
+        <div
+          role="button"
+          tabIndex={-1}
+          css={`
+            top: 32%;
+            color: #fff;
+            width: 16px;
+            height: 133px;
+            z-index: 1;
+            display: flex;
+            cursor: pointer;
+            position: absolute;
+            background: #262c34;
+            align-items: center;
+            flex-direction: column;
+            justify-content: center;
+            border-radius: 10px 0px 0px 10px;
+            transition: all 0.2s ease-in-out;
+
+            right: ${openToolboxPanel ? "48%" : 0};
+
+            &:hover {
+              background: #13183f;
+            }
+
+            > svg {
+              transform: rotate(${!openToolboxPanel ? "-" : ""}90deg);
+              > path {
+                fill: #fff;
+              }
+            }
+          `}
+          onClick={() => setOpenToolboxPanel(!openToolboxPanel)}
+        >
+          <TriangleXSIcon />
+        </div>
+        <ClickAwayListener
+          onClickAway={(event: React.MouseEvent<Document, MouseEvent>) => {
+            if (openToolboxPanel) {
+              setOpenToolboxPanel(!openToolboxPanel);
+            }
+          }}
+        >
+          <>
+            <Slide direction="left" in={openToolboxPanel}>
+              <div
+                css={`
+                  right: -8px;
+                  z-index: 4;
+                  width: 600px;
+                  /* top: ${top}px; */
+                  position: absolute;
+                  background: #f5f5f7;
+                  height: 93%;
+                  visibility: visible !important;
+                  overflow-y: auto;
+
+                  box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.6);
+                  border-radius: 20px;
+
+                  @media (max-width: 767px) {
+                    width: 100vw;
+                    box-shadow: none;
+                    overflow-y: auto;
+                    /* height: 100%; */
+                  }
+                `}
+              >
+                <div
+                  css={`
+                    width: 100%;
+                    /* height: 100%; */
+                    display: flex;
+                    /* position: relative; */
+                    flex-direction: column;
+                  `}
+                >
+                  {}
+                  <React.Fragment>
+                    <ToolBoxPanelControlRow
+                      title="Views"
+                      selected={selectedView}
+                      options={controlItems.views}
+                      setSelected={setSelectedView}
+                    />
+
+                    <ToolBoxPanelFilters groups={fundingRequestFilterGroups} />
+                  </React.Fragment>
+                </div>
+              </div>
+            </Slide>
+          </>
+        </ClickAwayListener>
+
+        <FundingRequestTable
+          search={search}
+          sortBy={sortBy}
+          data={fundingRequestData}
+          isLoading={isLoading}
+          setSearch={setSearch}
+          setSortBy={setSortBy}
+          columns={fundingRequestColumns}
+          title="2023-2025"
+        />
+      </div>
+    </>
+  );
+}
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/location.tsx b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/location.tsx
index d4ff4e7e3..f32dafb99 100644
--- a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/location.tsx
@@ -14,6 +14,8 @@ import {
   EligibilityScatterplotDataItemModel,
   incomeLevels,
 } from "app/components/Charts/Eligibility/Scatterplot/data";
+import { FundingRequestTable } from "..";
+import { fundingRequestColumns, fundingRequestData } from "./data";
 
 function getTableData(
   data: EligibilityScatterplotDataItemModel[]
@@ -31,7 +33,7 @@ interface Props {
   code: string;
 }
 
-export function LocationEligibilityTableWrapper(props: Props) {
+export function LocationFundingRequestTableWrapper(props: Props) {
   useTitle("The Data Explorer - Location Eligibility");
 
   const [search, setSearch] = React.useState("");
@@ -101,20 +103,14 @@ export function LocationEligibilityTableWrapper(props: Props) {
 
   return (
     <>
-      <EligibilityTable
+      <FundingRequestTable
         search={search}
         sortBy={sortBy}
-        data={tableData.slice(page * rowsPerPage, (page + 1) * rowsPerPage)}
+        data={fundingRequestData}
         isLoading={isLoading}
         setSearch={setSearch}
         setSortBy={setSortBy}
-        columns={[
-          { name: "Year", key: "year" },
-          { name: "Component", key: "component" },
-          { name: "Income Level", key: "incomeLevel" },
-          { name: "Disease Burden", key: "diseaseBurden" },
-          { name: "Status", key: "status" },
-        ]}
+        columns={fundingRequestColumns}
       />
 
       <TablePagination

From 68645190223c70a13b02f2ad6048ad7aa4787e24 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Thu, 2 Mar 2023 23:45:07 +0100
Subject: [PATCH 05/69] feat:created access to funding eligibility table

---
 .../modules/country-detail-module/index.tsx   |  57 +++--
 .../table/eligibility/eligibilityTable.tsx    |  38 +++
 .../table/eligibility/tableWrapper.tsx        | 240 ++++++++++++++++++
 3 files changed, 316 insertions(+), 19 deletions(-)
 create mode 100644 src/app/modules/viz-module/sub-modules/accessToFunding/table/eligibility/eligibilityTable.tsx
 create mode 100644 src/app/modules/viz-module/sub-modules/accessToFunding/table/eligibility/tableWrapper.tsx

diff --git a/src/app/modules/country-detail-module/index.tsx b/src/app/modules/country-detail-module/index.tsx
index 1f10ab06d..3c74a9689 100644
--- a/src/app/modules/country-detail-module/index.tsx
+++ b/src/app/modules/country-detail-module/index.tsx
@@ -38,8 +38,10 @@ import { LocationDetailGenericBudgetsTimeCycleWrapper } from "app/modules/viz-mo
 import { LocationDetailInvestmentsDisbursedWrapper } from "app/modules/viz-module/sub-modules/investments/disbursed/data-wrappers/locationDetail";
 import {
   filtergroups,
+  fundingRequestFilterGroups,
   pathnameToFilterGroups,
 } from "app/components/ToolBoxPanel/components/filters/data";
+import LocationAccessToFundingWrapper from "../viz-module/sub-modules/accessToFunding/location";
 
 export default function CountryDetail() {
   useTitle("The Data Explorer - Location");
@@ -120,8 +122,15 @@ export default function CountryDetail() {
   }, [paramCode]);
 
   React.useEffect(() => {
-    if (!isMobile && !openToolboxPanel && params.vizType !== "overview") {
+    if (
+      !isMobile &&
+      !openToolboxPanel &&
+      params.vizType !== "overview" &&
+      !(location.pathname.indexOf("access-to-funding") > -1)
+    ) {
       setOpenToolboxPanel(true);
+    } else {
+      setOpenToolboxPanel(false);
     }
   }, [params.vizType]);
 
@@ -391,6 +400,14 @@ export default function CountryDetail() {
               setOpenToolboxPanel={setOpenToolboxPanel}
             />
           </Route>
+          {/*Access to Funding*/}
+          <Route path={`/location/:code/access-to-funding`}>
+            <LocationAccessToFundingWrapper
+              code={paramCode}
+              codeParam={params.code}
+              filterGroups={fundingRequestFilterGroups}
+            />
+          </Route>
           {/* Eligibility */}
           <Route path={`/location/:code/eligibility/table`}>
             <LocationEligibilityTableWrapper code={paramCode} />
@@ -432,24 +449,26 @@ export default function CountryDetail() {
           }
         `}
       />
-      <ToolBoxPanel
-        isLocationDetail
-        open={openToolboxPanel}
-        vizWrapperRef={vizWrapperRef}
-        filterGroups={get(
-          pathnameToFilterGroups,
-          location.pathname.replace(params.code, "<code>"),
-          filtergroups
-        )}
-        onCloseBtnClick={(value?: boolean) =>
-          setOpenToolboxPanel(value !== undefined ? value : !openToolboxPanel)
-        }
-        getAllAvailableGrants={
-          params.vizType === "grants" && params.subType === "list"
-            ? getAllAvailableGrants
-            : undefined
-        }
-      />
+      {!(location.pathname.indexOf("access-to-funding") > -1) && (
+        <ToolBoxPanel
+          isLocationDetail
+          open={openToolboxPanel}
+          vizWrapperRef={vizWrapperRef}
+          filterGroups={get(
+            pathnameToFilterGroups,
+            location.pathname.replace(params.code, "<code>"),
+            filtergroups
+          )}
+          onCloseBtnClick={(value?: boolean) =>
+            setOpenToolboxPanel(value !== undefined ? value : !openToolboxPanel)
+          }
+          getAllAvailableGrants={
+            params.vizType === "grants" && params.subType === "list"
+              ? getAllAvailableGrants
+              : undefined
+          }
+        />
+      )}
       <div
         css={`
           left: 0;
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/table/eligibility/eligibilityTable.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/table/eligibility/eligibilityTable.tsx
new file mode 100644
index 000000000..159936e82
--- /dev/null
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/table/eligibility/eligibilityTable.tsx
@@ -0,0 +1,38 @@
+/* third-party */
+import React from "react";
+/* project */
+import { SimpleTable } from "app/components/Table/Simple";
+import { PageLoader } from "app/modules/common/page-loader";
+import {
+  SimpleTableRow,
+  SimpleTableColumn,
+} from "app/components/Table/Simple/data";
+
+interface EligibilityTableProps {
+  search: string;
+  sortBy: string;
+  isLoading: boolean;
+  data: SimpleTableRow[];
+  columns: SimpleTableColumn[];
+  setSearch: (value: string) => void;
+  setSortBy: (value: string) => void;
+  title: string;
+}
+
+export function EligibilityTable(props: EligibilityTableProps) {
+  if (props.isLoading) {
+    return <PageLoader />;
+  }
+
+  return (
+    <SimpleTable
+      search={props.search}
+      sortBy={props.sortBy}
+      rows={props.data}
+      title={props.title}
+      columns={props.columns}
+      onSearchChange={props.setSearch}
+      onSortByChange={props.setSortBy}
+    />
+  );
+}
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/table/eligibility/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/table/eligibility/tableWrapper.tsx
new file mode 100644
index 000000000..cef798155
--- /dev/null
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/table/eligibility/tableWrapper.tsx
@@ -0,0 +1,240 @@
+/* third-party */
+import React from "react";
+import get from "lodash/get";
+import TablePagination from "@material-ui/core/TablePagination";
+import { useDebounce, useTitle, useUpdateEffect } from "react-use";
+import { useStoreActions, useStoreState } from "app/state/store/hooks";
+/* project */
+import { PageLoader } from "app/modules/common/page-loader";
+import { SimpleTableRow } from "app/components/Table/Simple/data";
+import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
+import {
+  diseaseBurdens,
+  EligibilityScatterplotDataItemModel,
+  incomeLevels,
+} from "app/components/Charts/Eligibility/Scatterplot/data";
+import { EligibilityTable } from "./eligibilityTable";
+import { ClickAwayListener, Slide } from "@material-ui/core";
+import { TriangleXSIcon } from "app/assets/icons/TriangleXS";
+import { ToolBoxPanelControlRow } from "app/components/ToolBoxPanel/components/controlrow";
+import { ToolBoxPanelFilters } from "app/components/ToolBoxPanel/components/filters";
+import {
+  accessToFundingEligibilityFilterGroups,
+  FilterGroupProps,
+} from "app/components/ToolBoxPanel/components/filters/data";
+import { ViewModel } from "app/components/ToolBoxPanel/utils/getControlItems";
+import { ToolBoxPanelAggregateBy } from "app/components/ToolBoxPanel/components/aggregateby";
+
+function getTableData(
+  data: EligibilityScatterplotDataItemModel[]
+): SimpleTableRow[] {
+  return data.map((item: EligibilityScatterplotDataItemModel) => ({
+    year: item.x,
+    component: item.y,
+    incomeLevel: get(incomeLevels, `[${item.incomeLevel}]`, item.incomeLevel),
+    diseaseBurden: get(diseaseBurdens, `[${item.diseaseBurden}]`, ""),
+    status: item.eligibility,
+  }));
+}
+
+interface Props {
+  code: string;
+  codeParam: string;
+}
+
+export function AccessToFundingEligibilityTableWrapper(props: Props) {
+  useTitle("The Data Explorer - Location Eligibility");
+
+  const [search, setSearch] = React.useState("");
+  const [sortBy, setSortBy] = React.useState("");
+  const [openToolboxPanel, setOpenToolboxPanel] = React.useState(false);
+
+  const data = useStoreState(
+    (state) =>
+      get(
+        state.EligibilityCountry.data,
+        "data",
+        []
+      ) as EligibilityScatterplotDataItemModel[]
+  );
+
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(10);
+  const [tableData, setTableData] = React.useState<SimpleTableRow[]>(
+    getTableData(data)
+  );
+
+  const fetchData = useStoreActions((store) => store.EligibilityCountry.fetch);
+
+  const isLoading = useStoreState((state) => state.EligibilityCountry.loading);
+
+  const appliedFilters = useStoreState((state) => state.AppliedFiltersState);
+
+  function reloadData() {
+    const filterString = getAPIFormattedFilters(
+      props.code
+        ? {
+            ...appliedFilters,
+            locations: [...appliedFilters.locations, props.code],
+          }
+        : appliedFilters,
+      { search, sortBy }
+    );
+    fetchData({
+      filterString: `${filterString}${
+        filterString.length > 0 ? "&" : ""
+      }view=table`,
+    });
+  }
+
+  React.useEffect(() => reloadData(), [props.code, appliedFilters, sortBy]);
+
+  useUpdateEffect(() => setTableData(getTableData(data)), [data]);
+
+  const [,] = useDebounce(() => reloadData(), 500, [search]);
+
+  const [selectedView, setSelectedView] = React.useState("Table");
+  const [selectedAggregates, setSelectedAggregates] = React.useState("Year");
+
+  const [controlItems, setControlItems] = React.useState<{
+    views: ViewModel[];
+    aggregates: ViewModel[];
+  }>({
+    views: [{ label: "Table", value: "Table", link: location.pathname }],
+    aggregates: [
+      { label: "Year", value: "yearName" },
+      { label: "Components", value: "componentName" },
+    ],
+  });
+
+  if (isLoading) {
+    return <PageLoader />;
+  }
+
+  return (
+    <>
+      <div
+        css={`
+          position: relative;
+        `}
+      >
+        <div
+          role="button"
+          tabIndex={-1}
+          css={`
+            top: 32%;
+            color: #fff;
+            width: 16px;
+            height: 133px;
+            z-index: 1;
+            display: flex;
+            cursor: pointer;
+            position: absolute;
+            background: #262c34;
+            align-items: center;
+            flex-direction: column;
+            justify-content: center;
+            border-radius: 10px 0px 0px 10px;
+            transition: all 0.2s ease-in-out;
+
+            right: ${openToolboxPanel ? "48%" : 0};
+
+            &:hover {
+              background: #13183f;
+            }
+
+            > svg {
+              transform: rotate(${!openToolboxPanel ? "-" : ""}90deg);
+              > path {
+                fill: #fff;
+              }
+            }
+          `}
+          onClick={() => setOpenToolboxPanel(!openToolboxPanel)}
+        >
+          <TriangleXSIcon />
+        </div>
+        <ClickAwayListener
+          onClickAway={(event: React.MouseEvent<Document, MouseEvent>) => {
+            if (openToolboxPanel) {
+              setOpenToolboxPanel(!openToolboxPanel);
+            }
+          }}
+        >
+          <>
+            <Slide direction="left" in={openToolboxPanel}>
+              <div
+                css={`
+                  right: -8px;
+                  z-index: 4;
+                  width: 600px;
+                  /* top: ${top}px; */
+                  position: absolute;
+                  background: #f5f5f7;
+                  height: 93%;
+                  visibility: visible !important;
+                  overflow-y: auto;
+
+                  box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.6);
+                  border-radius: 20px;
+
+                  @media (max-width: 767px) {
+                    width: 100vw;
+                    box-shadow: none;
+                    overflow-y: auto;
+                    /* height: 100%; */
+                  }
+                `}
+              >
+                <div
+                  css={`
+                    width: 100%;
+                    /* height: 100%; */
+                    display: flex;
+                    /* position: relative; */
+                    flex-direction: column;
+                  `}
+                >
+                  {}
+                  <React.Fragment>
+                    <ToolBoxPanelControlRow
+                      title="Views"
+                      selected={selectedView}
+                      options={controlItems.views}
+                      setSelected={setSelectedView}
+                    />
+                    <ToolBoxPanelAggregateBy
+                      title="Aggregate by"
+                      selected={selectedAggregates}
+                      options={controlItems.aggregates}
+                      setSelected={setSelectedAggregates}
+                    />
+                    <ToolBoxPanelFilters
+                      groups={accessToFundingEligibilityFilterGroups}
+                    />
+                  </React.Fragment>
+                </div>
+              </div>
+            </Slide>
+          </>
+        </ClickAwayListener>
+        <EligibilityTable
+          search={search}
+          sortBy={sortBy}
+          data={tableData.slice(page * rowsPerPage, (page + 1) * rowsPerPage)}
+          isLoading={isLoading}
+          setSearch={setSearch}
+          setSortBy={setSortBy}
+          columns={[
+            { name: "Year", key: "year" },
+            { name: "Component", key: "component" },
+            { name: "Income Level", key: "incomeLevel" },
+            { name: "Disease Burden", key: "diseaseBurden" },
+            { name: "Status", key: "status" },
+          ]}
+          title="2023-2025"
+        />
+      </div>
+    </>
+  );
+}

From 4ba386b5b89cf7c34c241e38257dc862050ca73b Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Sat, 4 Mar 2023 23:23:57 +0100
Subject: [PATCH 06/69] feat:  access to funding design implementation

---
 src/app/components/Table/funding/index.tsx    |   6 +-
 .../components/dataset-grid/index.tsx         |   1 -
 .../allocations/radialChart.tsx               | 180 ++++++++++++++
 .../eligibility/eligibilityTable.tsx          |   0
 .../{table => }/eligibility/tableWrapper.tsx  |   8 +-
 .../table.tsx}                                |  22 +-
 .../fundingRequest/tableWrapper.tsx           |  31 +--
 .../sub-modules/accessToFunding/location.tsx  | 223 ++++++++++++------
 .../sub-modules/accessToFunding/style.ts      |  15 ++
 .../sub-modules/allocations/index.tsx         |   1 +
 .../table/data-wrappers/generic.tsx           |   7 +-
 .../table/data-wrappers/location.tsx          |   5 +-
 .../fundingRequests/table/index.tsx           |   9 +-
 13 files changed, 380 insertions(+), 128 deletions(-)
 create mode 100644 src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx
 rename src/app/modules/viz-module/sub-modules/accessToFunding/{table => }/eligibility/eligibilityTable.tsx (100%)
 rename src/app/modules/viz-module/sub-modules/accessToFunding/{table => }/eligibility/tableWrapper.tsx (98%)
 rename src/app/modules/viz-module/sub-modules/accessToFunding/{table/fundingRequest/fundingRequestTable.tsx => fundingRequest/table.tsx} (51%)
 rename src/app/modules/viz-module/sub-modules/accessToFunding/{table => }/fundingRequest/tableWrapper.tsx (86%)

diff --git a/src/app/components/Table/funding/index.tsx b/src/app/components/Table/funding/index.tsx
index 6c749ddc1..f6853f274 100644
--- a/src/app/components/Table/funding/index.tsx
+++ b/src/app/components/Table/funding/index.tsx
@@ -267,7 +267,7 @@ function Row(props: {
   );
 }
 
-export function FundingTable(props: FundingTableProps) {
+export function FundingRequestTable(props: FundingTableProps) {
   const sortBySplits = props.sortBy.split(" ");
 
   const [toolbarCols, setToolbarCols] = React.useState<TableToolbarCols[]>([]);
@@ -308,7 +308,7 @@ export function FundingTable(props: FundingTableProps) {
   );
 
   return (
-    <React.Fragment
+    <div
       css={`
         display: relative;
       `}
@@ -386,6 +386,6 @@ export function FundingTable(props: FundingTableProps) {
       </TableContainer>
 
       <div css="width: 100%;height: 25px;" />
-    </React.Fragment>
+    </div>
   );
 }
diff --git a/src/app/modules/landing-module/components/dataset-grid/index.tsx b/src/app/modules/landing-module/components/dataset-grid/index.tsx
index 00174ee9e..15743884b 100644
--- a/src/app/modules/landing-module/components/dataset-grid/index.tsx
+++ b/src/app/modules/landing-module/components/dataset-grid/index.tsx
@@ -203,7 +203,6 @@ export function LandingDatasetGrid() {
     __html: get(cmsData, "componentsDatasetCarousel.documentsDescription", ""),
   };
 
-  console.log(cmsData, "cmsData");
   return (
     <Grid container spacing={2}>
       <Grid item xs={12} sm={6} md={6} lg={3}>
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx
new file mode 100644
index 000000000..aa705c79a
--- /dev/null
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx
@@ -0,0 +1,180 @@
+import { ApexOptions } from "apexcharts";
+import ReactApexCharts from "react-apexcharts";
+
+import { NoDataLabel } from "app/components/Charts/common/nodatalabel";
+import { formatFinancialValue } from "app/utils/formatFinancialValue";
+
+import { findIndex, values, keys, get } from "lodash";
+
+import React from "react";
+import { NoDataAllocations } from "../../allocations/components/nodata";
+import useMediaQuery from "@material-ui/core/useMediaQuery";
+import { getKeysPercentages } from "app/modules/viz-module/sub-modules/allocations/data";
+import { useMeasure } from "react-use";
+interface Props {
+  total: number;
+  keys: string[];
+  values: number[];
+}
+
+export default function RadialChart(props: Props) {
+  const isMobile = useMediaQuery("(max-width: 767px)");
+
+  const [ref, { width }] = useMeasure<HTMLDivElement>();
+
+  const [keysPercentagesColors, setKeysPercentagesColors] = React.useState<{
+    percentages: number[];
+    colors: string[];
+  }>(getKeysPercentages(props.total, props.values));
+
+  React.useEffect(() => {
+    setKeysPercentagesColors(getKeysPercentages(props.total, props.values));
+  }, [props.total, values]);
+
+  const options: ApexOptions = {
+    plotOptions: {
+      radialBar: {
+        offsetY: 0,
+        startAngle: 0,
+        endAngle: 300,
+        hollow: {
+          margin: 5,
+          size: "50%",
+          background: "transparent",
+          image: undefined,
+        },
+        track: {
+          show: true,
+          strokeWidth: "1px",
+          background: "#262C34",
+        },
+        dataLabels: {
+          name: {
+            show: true,
+            color: "#262c34",
+            fontFamily: "GothamNarrow-Book",
+          },
+          value: {
+            show: true,
+            fontFamily: "GothamNarrow-Book",
+            formatter: (value: number) => {
+              const fkeyIndex = findIndex(
+                keysPercentagesColors.percentages,
+                (p: number) => p.toString() === value.toString()
+              );
+              if (fkeyIndex > -1) {
+                return formatFinancialValue(props.values[fkeyIndex]);
+              }
+              return "";
+            },
+          },
+          total: {
+            show: true,
+            fontFamily: "GothamNarrow-Bold",
+            formatter: () => formatFinancialValue(props.total),
+          },
+        },
+      },
+    },
+    colors: ["#E4EBF8", "#C9CAD4", "#F1ECEC"],
+    labels: props.keys,
+    legend: {
+      show: true,
+      floating: true,
+      fontSize: !isMobile ? "14px" : "10px",
+      fontFamily: "GothamNarrow-Book",
+      horizontalAlign: "left",
+      fontWeight: "bold",
+      position: "right",
+      offsetX: width / 2,
+      offsetY: !isMobile ? 25 : 15,
+      markers: {
+        width: 0,
+      },
+      formatter: (seriesName: string, opts: any) => {
+        if (isMobile) {
+          return seriesName;
+        }
+        console.log(keysPercentagesColors.percentages, "values");
+        return `${seriesName}: ${Math.floor(
+          keysPercentagesColors.percentages[opts.seriesIndex]
+        )}%`;
+      },
+      itemMargin: {
+        vertical: !isMobile ? 8 : 2,
+      },
+      onItemClick: {
+        toggleDataSeries: false,
+      },
+      onItemHover: {
+        highlightDataSeries: false,
+      },
+    },
+    responsive: [
+      {
+        breakpoint: 480,
+        options: {
+          legend: {
+            show: true,
+          },
+        },
+      },
+    ],
+  };
+
+  return (
+    <>
+      <div
+        css={`
+          @media (max-width: 767px) {
+            z-index: 2;
+            width: 100%;
+            position: relative;
+            padding-bottom: 100px;
+
+            #mobile-tooltip-container {
+              top: 30vh;
+              left: 16px;
+              width: calc(100% - 32px);
+            }
+          }
+        `}
+      >
+        <div ref={ref} id="allocations-radial-bar">
+          {props.total === 0 ? (
+            <div css="display: flex;justify-content: center;">
+              <NoDataLabel />
+              <NoDataAllocations />
+            </div>
+          ) : (
+            <ReactApexCharts
+              type="radialBar"
+              options={options}
+              height={isMobile ? 400 : 580}
+              series={keysPercentagesColors.percentages}
+              width={500}
+            />
+          )}
+        </div>
+        {/* {(isMobile || isTouchDevice()) && xsTooltipData && (
+            <XsContainer id="mobile-tooltip-container">
+              <div
+                css={`
+                  width: 95%;
+                `}
+              >
+                <AllocationsRadialMobileTooltip
+                  {...xsTooltipData}
+                  close={() => setXsTooltipData(null)}
+                  drilldown={() => {
+                    setVizLevel(1);
+                    setVizSelected(xsTooltipData.label);
+                  }}
+                />
+              </div>
+            </XsContainer>
+          )} */}
+      </div>
+    </>
+  );
+}
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/table/eligibility/eligibilityTable.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/eligibilityTable.tsx
similarity index 100%
rename from src/app/modules/viz-module/sub-modules/accessToFunding/table/eligibility/eligibilityTable.tsx
rename to src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/eligibilityTable.tsx
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/table/eligibility/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
similarity index 98%
rename from src/app/modules/viz-module/sub-modules/accessToFunding/table/eligibility/tableWrapper.tsx
rename to src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
index cef798155..807d43ec2 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/table/eligibility/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
@@ -174,6 +174,9 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
                   height: 93%;
                   visibility: visible !important;
                   overflow-y: auto;
+                  ::-webkit-scrollbar {
+                    display: none;
+                  }
 
                   box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.6);
                   border-radius: 20px;
@@ -182,16 +185,15 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
                     width: 100vw;
                     box-shadow: none;
                     overflow-y: auto;
-                    /* height: 100%; */
                   }
                 `}
               >
                 <div
                   css={`
                     width: 100%;
-                    /* height: 100%; */
+
                     display: flex;
-                    /* position: relative; */
+
                     flex-direction: column;
                   `}
                 >
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/table/fundingRequest/fundingRequestTable.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/table.tsx
similarity index 51%
rename from src/app/modules/viz-module/sub-modules/accessToFunding/table/fundingRequest/fundingRequestTable.tsx
rename to src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/table.tsx
index fe4614e3a..e67b48cc3 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/table/fundingRequest/fundingRequestTable.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/table.tsx
@@ -1,38 +1,34 @@
 /* third-party */
 import React from "react";
 /* project */
-import { SimpleTable } from "app/components/Table/Simple";
+
 import { PageLoader } from "app/modules/common/page-loader";
+
 import {
-  SimpleTableRow,
-  SimpleTableColumn,
-} from "app/components/Table/Simple/data";
-import { FundingTable, FundingTableColumn } from "app/components/Table/funding";
-import { TriangleXSIcon } from "app/assets/icons/TriangleXS";
-import { ClickAwayListener, Slide } from "@material-ui/core";
-import { SubToolBoxPanel } from "app/components/ToolBoxPanel/components/subtoolboxpanel";
-import { get } from "lodash";
-import { FilterGroupProps } from "app/components/ToolBoxPanel/components/filters/data";
+  FundingRequestTable,
+  FundingTableColumn,
+  FundingTableRow,
+} from "app/components/Table/funding";
 
 interface FundingRequestTableProps {
   search: string;
   sortBy: string;
   isLoading: boolean;
-  data: SimpleTableRow[];
+  data: FundingTableRow[];
   columns: FundingTableColumn[];
   setSearch: (value: string) => void;
   setSortBy: (value: string) => void;
   title: string;
 }
 
-export function FundingRequestTable(props: FundingRequestTableProps) {
+export function Table(props: FundingRequestTableProps) {
   if (props.isLoading) {
     return <PageLoader />;
   }
 
   return (
     <div>
-      <FundingTable
+      <FundingRequestTable
         search={props.search}
         sortBy={props.sortBy}
         light
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/table/fundingRequest/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
similarity index 86%
rename from src/app/modules/viz-module/sub-modules/accessToFunding/table/fundingRequest/tableWrapper.tsx
rename to src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
index 15bdf988e..db5ae79c5 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/table/fundingRequest/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
@@ -1,14 +1,12 @@
 /* third-party */
 import React from "react";
 import get from "lodash/get";
-import TablePagination from "@material-ui/core/TablePagination";
 import { useDebounce, useTitle, useUpdateEffect } from "react-use";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 /* project */
 import { PageLoader } from "app/modules/common/page-loader";
 import { SimpleTableRow } from "app/components/Table/Simple/data";
 import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
-import { EligibilityTable } from "app/modules/viz-module/sub-modules/eligibility/table";
 import {
   diseaseBurdens,
   EligibilityScatterplotDataItemModel,
@@ -17,25 +15,17 @@ import {
 import {
   fundingRequestData,
   fundingRequestColumns,
-} from "../../../fundingRequests/table/data-wrappers/data";
-import { FundingRequestTable } from "./fundingRequestTable";
+} from "../../fundingRequests/table/data-wrappers/data";
 import {
   FilterGroupProps,
-  filtergroups,
   fundingRequestFilterGroups,
-  pathnameToFilterGroups,
 } from "app/components/ToolBoxPanel/components/filters/data";
 import { ClickAwayListener, Slide } from "@material-ui/core";
 import { TriangleXSIcon } from "app/assets/icons/TriangleXS";
-import { ToolBoxPanelBudgetFlowLevelSelectors } from "app/components/ToolBoxPanel/components/budgetflowlevelselectors";
 import { ToolBoxPanelControlRow } from "app/components/ToolBoxPanel/components/controlrow";
-import {
-  ViewModel,
-  getControlItems,
-} from "app/components/ToolBoxPanel/utils/getControlItems";
-import { useHistory, useParams } from "react-router-dom";
-import { ToolBoxPanelDonorMapTypes } from "app/components/ToolBoxPanel/components/donormaptypes";
+import { ViewModel } from "app/components/ToolBoxPanel/utils/getControlItems";
 import { ToolBoxPanelFilters } from "app/components/ToolBoxPanel/components/filters";
+import { Table } from "./table";
 
 function getTableData(
   data: EligibilityScatterplotDataItemModel[]
@@ -70,8 +60,6 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
       ) as EligibilityScatterplotDataItemModel[]
   );
 
-  const [page, setPage] = React.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React.useState(10);
   const [tableData, setTableData] = React.useState<SimpleTableRow[]>(
     getTableData(data)
   );
@@ -176,7 +164,7 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
                   right: -8px;
                   z-index: 4;
                   width: 600px;
-                  /* top: ${top}px; */
+
                   position: absolute;
                   background: #f5f5f7;
                   height: 93%;
@@ -185,21 +173,22 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
 
                   box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.6);
                   border-radius: 20px;
-
+                  ::-webkit-scrollbar {
+                    display: none;
+                  }
                   @media (max-width: 767px) {
                     width: 100vw;
                     box-shadow: none;
                     overflow-y: auto;
-                    /* height: 100%; */
                   }
                 `}
               >
                 <div
                   css={`
                     width: 100%;
-                    /* height: 100%; */
+
                     display: flex;
-                    /* position: relative; */
+
                     flex-direction: column;
                   `}
                 >
@@ -220,7 +209,7 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
           </>
         </ClickAwayListener>
 
-        <FundingRequestTable
+        <Table
           search={search}
           sortBy={sortBy}
           data={fundingRequestData}
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
index 6b102c6e9..c755db79e 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
@@ -1,11 +1,15 @@
 import { Box } from "@material-ui/core";
 import { FilterGroupProps } from "app/components/ToolBoxPanel/components/filters/data";
-import React from "react";
+import React, { useState } from "react";
 import { AllocationsModule } from "../allocations";
 
-import { chipcss, descriptioncss } from "./style";
-import { AccessToFundingEligibilityTableWrapper } from "./table/eligibility/tableWrapper";
-import { AccessToFundingRequestTableWrapper } from "./table/fundingRequest/tableWrapper";
+import { chipcss, descriptioncss, vizcss } from "./style";
+import { AccessToFundingEligibilityTableWrapper } from "./eligibility/tableWrapper";
+import { AccessToFundingRequestTableWrapper } from "./fundingRequest/tableWrapper";
+import RadialChart from "./allocations/radialChart";
+import { useStoreActions, useStoreState } from "app/state/store/hooks";
+import { get } from "lodash";
+import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
 
 interface Props {
   code: string;
@@ -14,7 +18,43 @@ interface Props {
 }
 
 export default function LocationAccessToFundingWrapper(props: Props) {
-  const [openToolboxPanel, setOpenToolboxPanel] = React.useState(false);
+  const fetchData = useStoreActions((store) => store.Allocations.fetch);
+  const appliedFilters = useStoreState((state) => state.AppliedFiltersState);
+
+  const selectedPeriod = useStoreState(
+    (state) => state.ToolBoxPanelAllocationsPeriodState.value
+  );
+  console.log(selectedPeriod, "period");
+
+  const total = useStoreState(
+    (state) => get(state.Allocations.data, "total", []) as number
+  );
+  const keys = useStoreState(
+    (state) => get(state.Allocations.data, "keys", []) as string[]
+  );
+
+  const values = useStoreState(
+    (state) => get(state.Allocations.data, "values", []) as number[]
+  );
+  console.log(values, "val");
+
+  const colors = ["#E4EBF8", "#C9CAD4", "#F1ECEC"];
+
+  React.useEffect(() => {
+    const filterString = getAPIFormattedFilters(
+      props.code
+        ? {
+            ...appliedFilters,
+            locations: [...appliedFilters.locations, props.code],
+          }
+        : appliedFilters
+    );
+    fetchData({
+      filterString: `periods=${selectedPeriod}${
+        filterString.length > 0 ? `&${filterString}` : ""
+      }`,
+    });
+  }, [props.code, appliedFilters, selectedPeriod]);
   return (
     <>
       <div css={descriptioncss}>
@@ -57,82 +97,109 @@ export default function LocationAccessToFundingWrapper(props: Props) {
           <div css={chipcss}>2023/2025</div>
         </div>
       </div>
+      <div css={vizcss}>
+        <div>
+          <h4>
+            <b>Eligibility </b>
+          </h4>
+          <hr />
+          <AccessToFundingEligibilityTableWrapper
+            code={props.code}
+            codeParam={props.codeParam}
+          />
+        </div>
 
-      <div>
-        <h4
-          css={`
-            font-size: 18px;
-            color: #252c34;
-            margin-bottom: 0;
-            font-family: "Gotham Narrow";
-          `}
-        >
-          <b>Eligibility </b>
-        </h4>
-        <hr
-          css={`
-            border: 0.5px solid #000000;
-            width: 100%;
-            height: 0px;
-            margin-bottom: 3rem;
-          `}
-        />
-        <AccessToFundingEligibilityTableWrapper
-          code={props.code}
-          codeParam={props.codeParam}
-        />
-      </div>
+        <div>
+          <h4>
+            <b> Allocation</b>
+          </h4>
+          <hr />
+          <div
+            css={`
+              display: flex;
+              justify-content: space-around;
+              align-items: center;
+            `}
+          >
+            <RadialChart total={total} values={values} keys={keys} />
+            <div>
+              <div>
+                <p
+                  css={`
+                    font-size: 24px;
+                    color: #252c34;
+                    text-align: center;
+                    margin-bottom: 0px;
+                  `}
+                >
+                  <b>{total} USD</b>
+                </p>
+                <p
+                  css={`
+                    font-size: 14px;
+                    color: #252c34;
+                    text-align: center;
+                    margin-top: 5px;
+                  `}
+                >
+                  Total funds allocated in Kenya for<b>2023/2025</b>{" "}
+                </p>
+              </div>
+              <div
+                css={`
+                  display: flex;
+                  justify-content: center;
+                  margin-top: 3rem;
+                  align-items: center;
+                  text-align: center;
+                `}
+              >
+                {values.map((val, index) => (
+                  <div
+                    css={`
+                      display: flex;
+                      align-items: center;
 
-      <div>
-        <h4
-          css={`
-            font-size: 18px;
-            color: #252c34;
-            margin-bottom: 0;
-            font-family: "Gotham Narrow";
-          `}
-        >
-          <b> Allocation</b>
-        </h4>
-        <hr
-          css={`
-            border: 0.5px solid #000000;
-            width: 100%;
-            height: 0px;
-            margin-bottom: 3rem;
-          `}
-        />
-        <AllocationsModule
-          code={props.code}
-          toolboxOpen={openToolboxPanel}
-          setOpenToolboxPanel={setOpenToolboxPanel}
-        />
-      </div>
+                      flex-direction: column;
+                      justify-content: center;
+                    `}
+                  >
+                    <div
+                      css={`
+                        width: 31px;
+                        height: 31px;
+                        border-radius: 50%;
+                        background: ${colors[index]};
+                      `}
+                    />
+                    <p
+                      css={`
+                        width: 63%;
+                        font-size: 18px;
+                      `}
+                    >
+                      <b>
+                        {val} million {keys[index]} funds
+                      </b>
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
 
-      <div>
-        <h4
-          css={`
-            font-size: 18px;
-            color: #252c34;
-            margin-bottom: 0;
-            font-family: "Gotham Narrow";
-          `}
-        >
-          <b>Funding Requests</b>
-        </h4>
-        <hr
-          css={`
-            border: 0.5px solid #000000;
-            width: 100%;
-            height: 0px;
-            margin-bottom: 3rem;
-          `}
-        />
-        <AccessToFundingRequestTableWrapper
-          code={props.code}
-          codeParam={props.codeParam}
-          filterGroups={props.filterGroups}
-        />
+        <div>
+          <h4>
+            <b>Funding Requests</b>
+          </h4>
+          <hr />
+          <AccessToFundingRequestTableWrapper
+            code={props.code}
+            codeParam={props.codeParam}
+            filterGroups={props.filterGroups}
+          />
+        </div>
       </div>
 
       <Box height={26} />
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts b/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts
index a40bda4fa..4bd6c419b 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts
@@ -41,3 +41,18 @@ export const descriptioncss = css`
     margin-top: 3px;
   }
 `;
+
+export const vizcss = css`
+  h4 {
+    font-size: 18px;
+    color: #252c34;
+    margin-bottom: 0;
+    font-family: "Gotham Narrow";
+  }
+  hr {
+    border: 0.5px solid #000000;
+    width: 100%;
+    height: 0px;
+    margin-bottom: 3rem;
+  }
+`;
diff --git a/src/app/modules/viz-module/sub-modules/allocations/index.tsx b/src/app/modules/viz-module/sub-modules/allocations/index.tsx
index 1f8be917f..c15362bfe 100644
--- a/src/app/modules/viz-module/sub-modules/allocations/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/allocations/index.tsx
@@ -45,6 +45,7 @@ export function AllocationsModule(props: AllocationsModuleProps) {
   const selectedPeriod = useStoreState(
     (state) => state.ToolBoxPanelAllocationsPeriodState.value
   );
+
   const dataPathSteps = useStoreState((state) => state.DataPathSteps.steps);
   const addDataPathSteps = useStoreActions(
     (actions) => actions.DataPathSteps.addSteps
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
index 5884baac2..00acc1dc2 100644
--- a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
@@ -10,10 +10,9 @@ import { PageLoader } from "app/modules/common/page-loader";
 import { SimpleTableRow } from "app/components/Table/Simple/data";
 import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
 import { DotChartModel } from "app/components/Charts/Eligibility/DotChart/data";
-import { EligibilityTable } from "app/modules/viz-module/sub-modules/eligibility/table";
-import { tab } from "app/components/Search/components/results/styles";
-import { FundingRequestTable } from "..";
+
 import { fundingRequestColumns, fundingRequestData } from "./data";
+import { Table } from "..";
 
 function getTableData(data: DotChartModel[]): SimpleTableRow[] {
   const updatedTableData: SimpleTableRow[] = [];
@@ -138,7 +137,7 @@ export function GenericFundingRequestWrapper() {
         </div>
       </div>
       <div css="width: 100%;height: 25px;" />
-      <FundingRequestTable
+      <Table
         search={search}
         sortBy={sortBy}
         data={fundingRequestData}
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/location.tsx b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/location.tsx
index f32dafb99..4ff25f619 100644
--- a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/location.tsx
@@ -14,8 +14,9 @@ import {
   EligibilityScatterplotDataItemModel,
   incomeLevels,
 } from "app/components/Charts/Eligibility/Scatterplot/data";
-import { FundingRequestTable } from "..";
+
 import { fundingRequestColumns, fundingRequestData } from "./data";
+import { Table } from "..";
 
 function getTableData(
   data: EligibilityScatterplotDataItemModel[]
@@ -103,7 +104,7 @@ export function LocationFundingRequestTableWrapper(props: Props) {
 
   return (
     <>
-      <FundingRequestTable
+      <Table
         search={search}
         sortBy={sortBy}
         data={fundingRequestData}
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/index.tsx b/src/app/modules/viz-module/sub-modules/fundingRequests/table/index.tsx
index 45c1b59c1..e3bee88e7 100644
--- a/src/app/modules/viz-module/sub-modules/fundingRequests/table/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/index.tsx
@@ -7,7 +7,10 @@ import {
   SimpleTableRow,
   SimpleTableColumn,
 } from "app/components/Table/Simple/data";
-import { FundingTable, FundingTableColumn } from "app/components/Table/funding";
+import {
+  FundingRequestTable,
+  FundingTableColumn,
+} from "app/components/Table/funding";
 
 interface FundingRequestTableProps {
   search: string;
@@ -19,13 +22,13 @@ interface FundingRequestTableProps {
   setSortBy: (value: string) => void;
 }
 
-export function FundingRequestTable(props: FundingRequestTableProps) {
+export function Table(props: FundingRequestTableProps) {
   if (props.isLoading) {
     return <PageLoader />;
   }
 
   return (
-    <FundingTable
+    <FundingRequestTable
       search={props.search}
       sortBy={props.sortBy}
       light

From c5d64f4237cfa8dfd76a5c951a55365676df1b99 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Tue, 7 Mar 2023 04:37:07 +0100
Subject: [PATCH 07/69] feat: elligibilty table update

---
 .../Charts/Eligibility/Scatterplot/data.ts         |  1 +
 src/app/components/Table/Simple/index.tsx          |  9 +++++++++
 .../eligibility/table/data-wrappers/location.tsx   | 14 +++++---------
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/app/components/Charts/Eligibility/Scatterplot/data.ts b/src/app/components/Charts/Eligibility/Scatterplot/data.ts
index 2b08ad16f..305c01370 100644
--- a/src/app/components/Charts/Eligibility/Scatterplot/data.ts
+++ b/src/app/components/Charts/Eligibility/Scatterplot/data.ts
@@ -20,6 +20,7 @@ export interface EligibilityScatterplotDataItemModel {
 }
 
 export interface EligibilityScatterplotDataModel extends Serie {
+  id: string;
   data: EligibilityScatterplotDataItemModel[];
 }
 
diff --git a/src/app/components/Table/Simple/index.tsx b/src/app/components/Table/Simple/index.tsx
index 2a9713e6d..23a3b0c74 100644
--- a/src/app/components/Table/Simple/index.tsx
+++ b/src/app/components/Table/Simple/index.tsx
@@ -46,6 +46,15 @@ function Row(props: {
     props.columns.length
   }`;
 
+  console.log(
+    filter(
+      props.columns,
+      (_c, index) => props.visibleColumnsIndexes.indexOf(index) > -1
+    ).map((column: SimpleTableColumn, index: number) =>
+      get(props.row, column.key, "")
+    ),
+    "tabledata"
+  );
   return (
     <React.Fragment>
       <TableRow
diff --git a/src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/location.tsx b/src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/location.tsx
index d4ff4e7e3..a31720d5e 100644
--- a/src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/location.tsx
@@ -12,19 +12,14 @@ import { EligibilityTable } from "app/modules/viz-module/sub-modules/eligibility
 import {
   diseaseBurdens,
   EligibilityScatterplotDataItemModel,
+  EligibilityScatterplotDataModel,
   incomeLevels,
 } from "app/components/Charts/Eligibility/Scatterplot/data";
 
 function getTableData(
-  data: EligibilityScatterplotDataItemModel[]
+  data: EligibilityScatterplotDataModel[]
 ): SimpleTableRow[] {
-  return data.map((item: EligibilityScatterplotDataItemModel) => ({
-    year: item.x,
-    component: item.y,
-    incomeLevel: get(incomeLevels, `[${item.incomeLevel}]`, item.incomeLevel),
-    diseaseBurden: get(diseaseBurdens, `[${item.diseaseBurden}]`, ""),
-    status: item.eligibility,
-  }));
+  return data.map((item: EligibilityScatterplotDataModel) => item.data);
 }
 
 interface Props {
@@ -43,7 +38,7 @@ export function LocationEligibilityTableWrapper(props: Props) {
         state.EligibilityCountry.data,
         "data",
         []
-      ) as EligibilityScatterplotDataItemModel[]
+      ) as EligibilityScatterplotDataModel[]
   );
 
   const [page, setPage] = React.useState(0);
@@ -74,6 +69,7 @@ export function LocationEligibilityTableWrapper(props: Props) {
       }view=table`,
     });
   }
+  console.log(data, "data");
 
   React.useEffect(() => reloadData(), [props.code, appliedFilters, sortBy]);
 

From f43309f046c9bb4f7051419e235dc2c58323a2d4 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Wed, 8 Mar 2023 12:52:28 +0100
Subject: [PATCH 08/69] feat: access to funding design implementation

---
 src/app/components/Table/Simple/index.tsx     | 11 +------
 src/app/components/Table/funding/index.tsx    |  2 +-
 .../allocations/radialChart.tsx               | 22 ++-----------
 .../eligibility/tableWrapper.tsx              | 33 ++++++++++++-------
 .../sub-modules/accessToFunding/location.tsx  | 14 +-------
 .../sub-modules/allocations/index.tsx         |  1 +
 .../table/data-wrappers/location.tsx          |  1 -
 7 files changed, 27 insertions(+), 57 deletions(-)

diff --git a/src/app/components/Table/Simple/index.tsx b/src/app/components/Table/Simple/index.tsx
index 23a3b0c74..9e08206d4 100644
--- a/src/app/components/Table/Simple/index.tsx
+++ b/src/app/components/Table/Simple/index.tsx
@@ -46,15 +46,6 @@ function Row(props: {
     props.columns.length
   }`;
 
-  console.log(
-    filter(
-      props.columns,
-      (_c, index) => props.visibleColumnsIndexes.indexOf(index) > -1
-    ).map((column: SimpleTableColumn, index: number) =>
-      get(props.row, column.key, "")
-    ),
-    "tabledata"
-  );
   return (
     <React.Fragment>
       <TableRow
@@ -276,7 +267,7 @@ export function SimpleTable(props: SimpleTableProps) {
             </TableRow>
           </TableHead>
           <TableBody>
-            {props.rows.map((row: SimpleTableRow) => (
+            {props.rows?.map((row: SimpleTableRow) => (
               <Row
                 key={row.name}
                 row={row}
diff --git a/src/app/components/Table/funding/index.tsx b/src/app/components/Table/funding/index.tsx
index f6853f274..649c382b4 100644
--- a/src/app/components/Table/funding/index.tsx
+++ b/src/app/components/Table/funding/index.tsx
@@ -74,7 +74,7 @@ function Row(props: {
   }`;
 
   const [rowSelected, setRowSelected] = React.useState("parent");
-  console.log(props.paddingLeft, "row");
+
   return (
     <React.Fragment>
       <TableRow
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx
index aa705c79a..8ebef5839 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx
@@ -69,7 +69,7 @@ export default function RadialChart(props: Props) {
             },
           },
           total: {
-            show: true,
+            show: false,
             fontFamily: "GothamNarrow-Bold",
             formatter: () => formatFinancialValue(props.total),
           },
@@ -95,7 +95,7 @@ export default function RadialChart(props: Props) {
         if (isMobile) {
           return seriesName;
         }
-        console.log(keysPercentagesColors.percentages, "values");
+
         return `${seriesName}: ${Math.floor(
           keysPercentagesColors.percentages[opts.seriesIndex]
         )}%`;
@@ -156,24 +156,6 @@ export default function RadialChart(props: Props) {
             />
           )}
         </div>
-        {/* {(isMobile || isTouchDevice()) && xsTooltipData && (
-            <XsContainer id="mobile-tooltip-container">
-              <div
-                css={`
-                  width: 95%;
-                `}
-              >
-                <AllocationsRadialMobileTooltip
-                  {...xsTooltipData}
-                  close={() => setXsTooltipData(null)}
-                  drilldown={() => {
-                    setVizLevel(1);
-                    setVizSelected(xsTooltipData.label);
-                  }}
-                />
-              </div>
-            </XsContainer>
-          )} */}
       </div>
     </>
   );
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
index 807d43ec2..61937e1be 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
@@ -11,6 +11,7 @@ import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
 import {
   diseaseBurdens,
   EligibilityScatterplotDataItemModel,
+  EligibilityScatterplotDataModel,
   incomeLevels,
 } from "app/components/Charts/Eligibility/Scatterplot/data";
 import { EligibilityTable } from "./eligibilityTable";
@@ -26,15 +27,21 @@ import { ViewModel } from "app/components/ToolBoxPanel/utils/getControlItems";
 import { ToolBoxPanelAggregateBy } from "app/components/ToolBoxPanel/components/aggregateby";
 
 function getTableData(
-  data: EligibilityScatterplotDataItemModel[]
+  data: EligibilityScatterplotDataModel[]
 ): SimpleTableRow[] {
-  return data.map((item: EligibilityScatterplotDataItemModel) => ({
-    year: item.x,
-    component: item.y,
-    incomeLevel: get(incomeLevels, `[${item.incomeLevel}]`, item.incomeLevel),
-    diseaseBurden: get(diseaseBurdens, `[${item.diseaseBurden}]`, ""),
-    status: item.eligibility,
-  }));
+  return data.map((item: EligibilityScatterplotDataModel) =>
+    item.data.map((itemData) => ({
+      year: itemData.x,
+      component: itemData.y,
+      incomeLevel: get(
+        incomeLevels,
+        `[${itemData.incomeLevel}]`,
+        itemData.incomeLevel
+      ),
+      diseaseBurden: get(diseaseBurdens, `[${itemData.diseaseBurden}]`, ""),
+      status: itemData.eligibility,
+    }))
+  );
 }
 
 interface Props {
@@ -55,7 +62,7 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
         state.EligibilityCountry.data,
         "data",
         []
-      ) as EligibilityScatterplotDataItemModel[]
+      ) as EligibilityScatterplotDataModel[]
   );
 
   const [page, setPage] = React.useState(0);
@@ -63,7 +70,6 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
   const [tableData, setTableData] = React.useState<SimpleTableRow[]>(
     getTableData(data)
   );
-
   const fetchData = useStoreActions((store) => store.EligibilityCountry.fetch);
 
   const isLoading = useStoreState((state) => state.EligibilityCountry.loading);
@@ -171,7 +177,7 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
                   /* top: ${top}px; */
                   position: absolute;
                   background: #f5f5f7;
-                  height: 93%;
+                  height: 98%;
                   visibility: visible !important;
                   overflow-y: auto;
                   ::-webkit-scrollbar {
@@ -223,7 +229,10 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
         <EligibilityTable
           search={search}
           sortBy={sortBy}
-          data={tableData.slice(page * rowsPerPage, (page + 1) * rowsPerPage)}
+          data={tableData[2]?.slice(
+            page * rowsPerPage,
+            (page + 1) * rowsPerPage
+          )}
           isLoading={isLoading}
           setSearch={setSearch}
           setSortBy={setSortBy}
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
index c755db79e..cf89b8c67 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
@@ -24,7 +24,6 @@ export default function LocationAccessToFundingWrapper(props: Props) {
   const selectedPeriod = useStoreState(
     (state) => state.ToolBoxPanelAllocationsPeriodState.value
   );
-  console.log(selectedPeriod, "period");
 
   const total = useStoreState(
     (state) => get(state.Allocations.data, "total", []) as number
@@ -36,23 +35,12 @@ export default function LocationAccessToFundingWrapper(props: Props) {
   const values = useStoreState(
     (state) => get(state.Allocations.data, "values", []) as number[]
   );
-  console.log(values, "val");
 
   const colors = ["#E4EBF8", "#C9CAD4", "#F1ECEC"];
 
   React.useEffect(() => {
-    const filterString = getAPIFormattedFilters(
-      props.code
-        ? {
-            ...appliedFilters,
-            locations: [...appliedFilters.locations, props.code],
-          }
-        : appliedFilters
-    );
     fetchData({
-      filterString: `periods=${selectedPeriod}${
-        filterString.length > 0 ? `&${filterString}` : ""
-      }`,
+      filterString: "periods=2023 - 2025",
     });
   }, [props.code, appliedFilters, selectedPeriod]);
   return (
diff --git a/src/app/modules/viz-module/sub-modules/allocations/index.tsx b/src/app/modules/viz-module/sub-modules/allocations/index.tsx
index c15362bfe..d5fbb5213 100644
--- a/src/app/modules/viz-module/sub-modules/allocations/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/allocations/index.tsx
@@ -263,6 +263,7 @@ export function AllocationsModule(props: AllocationsModuleProps) {
           }
         : appliedFilters
     );
+
     fetchData({
       filterString: `periods=${selectedPeriod}${
         filterString.length > 0 ? `&${filterString}` : ""
diff --git a/src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/location.tsx b/src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/location.tsx
index a31720d5e..f71f59eab 100644
--- a/src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/location.tsx
@@ -69,7 +69,6 @@ export function LocationEligibilityTableWrapper(props: Props) {
       }view=table`,
     });
   }
-  console.log(data, "data");
 
   React.useEffect(() => reloadData(), [props.code, appliedFilters, sortBy]);
 

From e92deead6823d1c081f785ca24b6483983da82d5 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Wed, 8 Mar 2023 13:03:07 +0100
Subject: [PATCH 09/69] feat: access to funding design implementation

---
 .../accessToFunding/allocations/radialChart.tsx    |  2 +-
 .../sub-modules/accessToFunding/location.tsx       | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx
index 8ebef5839..e4d4b49f3 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx
@@ -152,7 +152,7 @@ export default function RadialChart(props: Props) {
               options={options}
               height={isMobile ? 400 : 580}
               series={keysPercentagesColors.percentages}
-              width={500}
+              width={480}
             />
           )}
         </div>
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
index cf89b8c67..94785192b 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
@@ -105,12 +105,17 @@ export default function LocationAccessToFundingWrapper(props: Props) {
           <div
             css={`
               display: flex;
-              justify-content: space-around;
+              justify-content: space-between;
               align-items: center;
+              gap: 3rem;
             `}
           >
             <RadialChart total={total} values={values} keys={keys} />
-            <div>
+            <div
+              css={`
+                /* background: pink; */
+              `}
+            >
               <div>
                 <p
                   css={`
@@ -137,9 +142,12 @@ export default function LocationAccessToFundingWrapper(props: Props) {
                 css={`
                   display: flex;
                   justify-content: center;
-                  margin-top: 3rem;
                   align-items: center;
                   text-align: center;
+                  width: 90%;
+                  /* background: yellow; */
+                  margin: auto;
+                  margin-top: 3rem;
                 `}
               >
                 {values.map((val, index) => (

From 361ca6d587bc7655d5c9e7d4a3e1a9b1d7192668 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Fri, 31 Mar 2023 12:53:37 +0300
Subject: [PATCH 10/69] feat: data implementation for access to funding

---
 src/app/Routes.tsx                            |   4 +-
 .../components/Table/Expandable/Toolbar.tsx   |  23 +-
 src/app/components/Table/Simple/data.ts       |   3 +-
 src/app/components/Table/Simple/index.tsx     |  15 +-
 src/app/components/Table/funding/index.tsx    |  58 ++-
 .../filters/common/expandedgroup/index.tsx    |  31 +-
 .../components/filters/common/group/index.tsx |  14 +-
 .../ToolBoxPanel/components/filters/data.ts   | 232 ++++++++---
 .../ToolBoxPanel/components/filters/index.tsx | 121 +++++-
 src/app/hooks/useAppliedFilters.tsx           |   6 +
 src/app/hooks/useDatasetMenuItems.tsx         |   3 +
 src/app/hooks/useFilterOptions.tsx            |  85 +++-
 src/app/hooks/useGetAllVizData.tsx            |  22 +
 src/app/hooks/useUrlFilters.tsx               |  15 +
 src/app/modules/common/page-loader/index.tsx  |   8 +-
 .../components/dataset-grid/index.tsx         |   4 +-
 src/app/modules/viz-module/index.tsx          |   4 +-
 .../allocations/radialChart.tsx               |  24 +-
 .../eligibility/eligibilityTable.tsx          |   6 +-
 .../eligibility/tableWrapper.tsx              | 377 ++++++++++--------
 .../accessToFunding/fundingRequest/table.tsx  |   7 +-
 .../fundingRequest/tableWrapper.tsx           | 252 ++++++------
 .../sub-modules/accessToFunding/location.tsx  | 154 ++++---
 .../sub-modules/accessToFunding/style.ts      |   5 +-
 .../sub-modules/allocations/index.tsx         |   1 -
 .../table/data-wrappers/location.tsx          |  15 +-
 .../table/data-wrappers/data.ts               | 123 +-----
 .../table/data-wrappers/generic.tsx           |  73 +---
 .../table/data-wrappers/location.tsx          | 137 -------
 .../fundingRequests/table/index.tsx           |  17 +-
 .../locationDetail/accessToFunding.ts         |  20 +
 .../locationDetail/grantCycles.ts             |   8 +
 .../api/action-reducers/sync/filters/index.ts |  14 +-
 .../api/action-reducers/viz/eligibility.ts    |  10 +
 .../action-reducers/viz/fundingRequests.ts    |   6 +
 src/app/state/api/interfaces/index.ts         |   9 +
 src/app/state/recoil/atoms/index.ts           |   6 +
 src/app/state/store/index.ts                  |  18 +
 src/app/theme/index.ts                        |   2 +-
 src/app/utils/exportCSV.ts                    |  68 +++-
 src/app/utils/getAPIFormattedFilters.ts       |   3 +
 41 files changed, 1162 insertions(+), 841 deletions(-)
 delete mode 100644 src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/location.tsx
 create mode 100644 src/app/state/api/action-reducers/locationDetail/accessToFunding.ts
 create mode 100644 src/app/state/api/action-reducers/locationDetail/grantCycles.ts
 create mode 100644 src/app/state/api/action-reducers/viz/fundingRequests.ts

diff --git a/src/app/Routes.tsx b/src/app/Routes.tsx
index 0ffa28e21..eefee6417 100755
--- a/src/app/Routes.tsx
+++ b/src/app/Routes.tsx
@@ -71,7 +71,9 @@ function GrantPeriodRedirect(props: RouteComponentProps<any>) {
 
 export function MainRoutes() {
   useClearDataPathStepsOnDatasetChange();
-  useFilterOptions({});
+  useFilterOptions({
+    loadFilterOptions: true,
+  });
   useScrollToTop();
   useUrlFilters();
   useGA();
diff --git a/src/app/components/Table/Expandable/Toolbar.tsx b/src/app/components/Table/Expandable/Toolbar.tsx
index a0235845c..86d9ed959 100644
--- a/src/app/components/Table/Expandable/Toolbar.tsx
+++ b/src/app/components/Table/Expandable/Toolbar.tsx
@@ -18,10 +18,10 @@ import { TableToolbarCols } from "app/components/Table/Expandable/data";
 import { Checkbox, FormControlLabel, FormGroup } from "@material-ui/core";
 
 interface TableToolbarProps {
-  light?: boolean;
   title: string;
   search: string;
   columns: TableToolbarCols[];
+  multiVizPageDataKey?: string;
   onSearchChange: (value: string) => void;
   onColumnViewSelectionChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
@@ -67,9 +67,7 @@ export function TableToolbar(props: TableToolbarProps) {
       css={`
         display: flex;
         padding: 0 40px;
-        background: ${props.light
-          ? appColors.COMMON.SECONDARY_COLOR_10
-          : appColors.TABLE.TOOLBAR_BACKGROUND_COLOR};
+        background: ${appColors.TABLE.TOOLBAR_BACKGROUND_COLOR};
         flex-direction: row;
         justify-content: space-between;
         border-radius: 20px 20px 0px 0px;
@@ -178,24 +176,29 @@ export function TableToolbar(props: TableToolbarProps) {
               asyncOnClick
               onClick={(_, done) => {
                 new Promise((resolve) => {
+                  let data = get(
+                    vizData,
+                    location.pathname.replace(`/${params.code}`, "/<code>"),
+                    []
+                  );
+                  if (props.multiVizPageDataKey) {
+                    data = get(data, props.multiVizPageDataKey, []);
+                  }
                   setCSVLinkData(
                     exportCSV(
                       location.pathname
                         .replace("/location/", "/viz/")
                         .replace("/grant/", "/viz/")
                         .replace(`/${params.code}`, ""),
-                      get(
-                        vizData,
-                        location.pathname.replace(`/${params.code}`, "/<code>"),
-                        []
-                      ),
+                      data,
                       {
                         selectedAggregation,
                         donorMapView,
                         investmentsMapView,
                         isDetail: params.code !== undefined,
                         resultsSelectedYear,
-                      }
+                      },
+                      props.multiVizPageDataKey
                     )
                   );
                   resolve({});
diff --git a/src/app/components/Table/Simple/data.ts b/src/app/components/Table/Simple/data.ts
index fc35074b8..4fff3e218 100644
--- a/src/app/components/Table/Simple/data.ts
+++ b/src/app/components/Table/Simple/data.ts
@@ -6,16 +6,17 @@ export interface SimpleTableRow {
 export interface SimpleTableColumn {
   name: string;
   key: string;
+  valueToColorMap?: { [key: string]: string };
 }
 
 export interface SimpleTableProps {
   title: string;
-  light?: boolean;
   search: string;
   sortBy: string;
   forceExpand?: boolean;
   rows: SimpleTableRow[];
   formatNumbers?: boolean;
+  multiVizPageDataKey?: string;
   columns: SimpleTableColumn[];
   onSearchChange: (value: string) => void;
   onSortByChange: (value: string) => void;
diff --git a/src/app/components/Table/Simple/index.tsx b/src/app/components/Table/Simple/index.tsx
index 6f1a92534..53c2c6142 100644
--- a/src/app/components/Table/Simple/index.tsx
+++ b/src/app/components/Table/Simple/index.tsx
@@ -44,9 +44,12 @@ function Row(props: {
   const classes = useRowStyles();
   const [open, setOpen] = React.useState(Boolean(props.forceExpand));
 
-  const firstColumnWidth = props.columns.length > 3 ? "30%" : "";
+  const firstColBig =
+    props.columns[0].key !== "year" ? props.columns.length > 3 : false;
+
+  const firstColumnWidth = firstColBig ? "30%" : "";
   const firstColumnPadding = props.paddingLeft ? props.paddingLeft : 40;
-  const columnWidthCalc = `${props.columns.length > 3 ? "70%" : "100%"} / ${
+  const columnWidthCalc = `${firstColBig ? "70%" : "100%"} / ${
     props.columns.length
   }`;
 
@@ -126,6 +129,9 @@ function Row(props: {
                     font-weight: ${index === 0 ? "bold" : "normal"};
                     font-family: "GothamNarrow-${index === 0 ? "Bold" : "Book"}",
                       "Helvetica Neue", sans-serif;
+                    color: ${column.valueToColorMap
+                      ? column.valueToColorMap[value]
+                      : "inherit"};
 
                     > * {
                       @supports (-webkit-touch-callout: none) and
@@ -150,7 +156,6 @@ function Row(props: {
           );
         })}
       </TableRow>
-
       <TableRow
         css={`
           border-bottom: unset;
@@ -231,10 +236,10 @@ export function SimpleTable(props: SimpleTableProps) {
     <React.Fragment>
       <TableToolbar
         title={props.title}
-        light={props.light}
         search={props.search}
         columns={toolbarCols}
         onSearchChange={props.onSearchChange}
+        multiVizPageDataKey={props.multiVizPageDataKey}
         onColumnViewSelectionChange={onColumnViewSelectionChange}
       />
       <TableContainer>
@@ -288,7 +293,7 @@ export function SimpleTable(props: SimpleTableProps) {
             </TableRow>
           </TableHead>
           <TableBody>
-            {props.rows?.map((row: SimpleTableRow) => (
+            {props.rows.map((row: SimpleTableRow) => (
               <Row
                 key={row.name}
                 row={row}
diff --git a/src/app/components/Table/funding/index.tsx b/src/app/components/Table/funding/index.tsx
index 649c382b4..848385c02 100644
--- a/src/app/components/Table/funding/index.tsx
+++ b/src/app/components/Table/funding/index.tsx
@@ -1,5 +1,7 @@
-import React, { Children } from "react";
+import React from "react";
+import { v4 } from "uuid";
 import get from "lodash/get";
+import find from "lodash/find";
 import filter from "lodash/filter";
 import Table from "@material-ui/core/Table";
 import Button from "@material-ui/core/Button";
@@ -9,23 +11,17 @@ import TableHead from "@material-ui/core/TableHead";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import { makeStyles } from "@material-ui/core/styles";
+import IconButton from "@material-ui/core/IconButton";
 import ArrowUpward from "@material-ui/icons/ArrowUpward";
 import ArrowDownward from "@material-ui/icons/ArrowDownward";
 import { TriangleXSIcon } from "app/assets/icons/TriangleXS";
 import TableContainer from "@material-ui/core/TableContainer";
 import { tablecell } from "app/components/Table/Simple/styles";
 import CloudDownloadIcon from "@material-ui/icons/CloudDownload";
-
 import { TableToolbar } from "app/components/Table/Expandable/Toolbar";
 import { TableToolbarCols } from "app/components/Table/Expandable/data";
-import {
-  SimpleTableColumn,
-  SimpleTableProps,
-  // FundingTableRow,
-} from "app/components/Table/Simple/data";
 import { cellData } from "app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data";
-import { v4 } from "uuid";
-import IconButton from "@material-ui/core/IconButton";
+import { useUpdateEffect } from "react-use";
 
 export interface FundingTableRow {
   [key: string]: any;
@@ -42,7 +38,7 @@ export interface FundingTableProps {
   search: string;
   sortBy: string;
   paddingLeft: number;
-
+  forceExpand?: boolean;
   rows: FundingTableRow[];
   columns: FundingTableColumn[];
   onSearchChange: (value: string) => void;
@@ -63,22 +59,25 @@ function Row(props: {
   columns: FundingTableColumn[];
   paddingLeft: number;
   visibleColumnsIndexes: number[];
+  forceExpand?: boolean;
 }) {
   const classes = useRowStyles();
   const [open, setOpen] = React.useState(false);
 
   const firstColumnWidth = props.columns?.length > 3 ? "30%" : "";
-  const firstColumnPadding = props.paddingLeft ? props.paddingLeft : 40;
   const columnWidthCalc = `${props.columns?.length > 3 ? "70%" : "100%"} / ${
     props.columns?.length
   }`;
 
   const [rowSelected, setRowSelected] = React.useState("parent");
 
+  const secondLevelRow = find(props.columns, { key: "id" });
+
   return (
     <React.Fragment>
       <TableRow
         className={classes.root}
+        id="funding-requests-table-row"
         onClick={() => {
           // padVal = padVal + 4;
           if (props.row.children) {
@@ -118,6 +117,7 @@ function Row(props: {
             key={v4()}
             css={`
               text-align: center;
+              padding: 16px 10px;
               ${tablecell} /* width: calc(${columnWidthCalc}); */
               ${index === 0 ? `padding-left: ${props.paddingLeft}rem;` : ""}
             `}
@@ -139,6 +139,7 @@ function Row(props: {
                   align-items: center;
                   flex-direction: row;
                   font-weight: ${props.row.children ? "bold" : "normal"};
+                  justify-content: ${secondLevelRow ? "center" : "initial"};
                   font-family: "GothamNarrow-${props.row.children
                       ? "Bold"
                       : "Book"}",
@@ -172,7 +173,6 @@ function Row(props: {
           </TableCell>
         ))}
       </TableRow>
-
       <TableRow
         css={`
           border-bottom: unset;
@@ -192,9 +192,10 @@ function Row(props: {
                   <TableRow>
                     {cellData.map((name, index) => (
                       <TableCell
-                        key={index}
+                        key={v4()}
                         css={`
                           text-align: center;
+                          padding: 16px 10px;
                           ${tablecell}
                           padding-left: ${index === 0 ? "4rem" : "auto"};
                           /* width: calc(${columnWidthCalc});
@@ -208,13 +209,12 @@ function Row(props: {
                             display: flex;
                             align-items: center;
                             flex-direction: row;
-                            justify-content: space-between;
+                            justify-content: center;
                           `}
                         >
                           <div
                             css={`
                               gap: 12px;
-                              width: 100%;
                               display: flex;
                               align-items: center;
                               flex-direction: row;
@@ -246,7 +246,12 @@ function Row(props: {
                 )}
                 {props.row.children &&
                   props.row.children.map((child: FundingTableRow) =>
-                    props.columns.map((childCol) => {
+                    (
+                      filter(
+                        props.columns,
+                        (c) => c.col
+                      ) as FundingTableColumn[]
+                    ).map((childCol) => {
                       return (
                         <Row
                           row={child}
@@ -303,6 +308,18 @@ export function FundingRequestTable(props: FundingTableProps) {
     );
   }, [props.columns]);
 
+  useUpdateEffect(() => {
+    setTimeout(() => {
+      if (props.forceExpand) {
+        const rows = document.querySelectorAll("#funding-requests-table-row");
+        if (rows.length > 0) {
+          // @ts-ignore
+          rows[0].click();
+        }
+      }
+    }, 500);
+  }, [props.rows]);
+
   const visibleColumnsIndexes = filter(toolbarCols, { checked: true }).map(
     (c) => c.index
   );
@@ -315,14 +332,14 @@ export function FundingRequestTable(props: FundingTableProps) {
     >
       <TableToolbar
         title={props.title}
-        light={props.light}
         search={props.search}
         columns={toolbarCols}
+        multiVizPageDataKey="fundingRequest"
         onSearchChange={props.onSearchChange}
         onColumnViewSelectionChange={onColumnViewSelectionChange}
       />
       <TableContainer>
-        <Table aria-label="Simple table">
+        <Table>
           <TableHead>
             <TableRow>
               {props.columns.map(
@@ -342,6 +359,7 @@ export function FundingRequestTable(props: FundingTableProps) {
                     <TableCell
                       key={column.key}
                       css={`
+                        padding: 16px 10px;
                         ${index === 0 ? "padding-left: 40px;" : ""}
 
                         > button {
@@ -372,19 +390,19 @@ export function FundingRequestTable(props: FundingTableProps) {
             </TableRow>
           </TableHead>
           <TableBody>
-            {props.rows.map((row: FundingTableRow) => (
+            {props.rows.map((row: FundingTableRow, index: number) => (
               <Row
                 key={row.name}
                 row={row}
                 columns={props.columns}
                 visibleColumnsIndexes={visibleColumnsIndexes}
                 paddingLeft={props.paddingLeft}
+                forceExpand={props.forceExpand && index === 0}
               />
             ))}
           </TableBody>
         </Table>
       </TableContainer>
-
       <div css="width: 100%;height: 25px;" />
     </div>
   );
diff --git a/src/app/components/ToolBoxPanel/components/filters/common/expandedgroup/index.tsx b/src/app/components/ToolBoxPanel/components/filters/common/expandedgroup/index.tsx
index 2715af402..0a809dcde 100644
--- a/src/app/components/ToolBoxPanel/components/filters/common/expandedgroup/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/filters/common/expandedgroup/index.tsx
@@ -24,6 +24,9 @@ import { appColors } from "app/theme";
 
 interface ExpandedFilterGroupProps extends FilterGroupModel, FilterGroupProps {
   goBack: () => void;
+  appliedFilters?: string[];
+  expandedGroup?: FilterGroupProps | null;
+  setAppliedFilters?: (filters: string[]) => void;
 }
 
 export function ExpandedFilterGroup(props: ExpandedFilterGroupProps) {
@@ -43,7 +46,7 @@ export function ExpandedFilterGroup(props: ExpandedFilterGroupProps) {
     type: props.name,
   });
   const [tmpAppliedFilters, setTmpAppliedFilters] = React.useState([
-    ...appliedFilters,
+    ...(props.appliedFilters || appliedFilters),
   ]);
   const [tmpAppliedFiltersChildren, setTmpAppliedFiltersChildren] =
     React.useState([...(appliedFiltersChildren || [])]);
@@ -197,8 +200,12 @@ export function ExpandedFilterGroup(props: ExpandedFilterGroupProps) {
   }
 
   function handleApply() {
-    if (!isEqual(appliedFilters, tmpAppliedFilters)) {
-      setAppliedFilters(tmpAppliedFilters);
+    if (!isEqual(props.appliedFilters || appliedFilters, tmpAppliedFilters)) {
+      if (props.setAppliedFilters) {
+        props.setAppliedFilters(tmpAppliedFilters);
+      } else {
+        setAppliedFilters(tmpAppliedFilters);
+      }
     }
     if (
       setAppliedFiltersChildren &&
@@ -278,8 +285,12 @@ export function ExpandedFilterGroup(props: ExpandedFilterGroupProps) {
   }
 
   function resetFilters() {
-    if (appliedFilters.length > 0) {
-      setAppliedFilters([]);
+    if ((props.appliedFilters || appliedFilters).length > 0) {
+      if (props.setAppliedFilters) {
+        props.setAppliedFilters([]);
+      } else {
+        setAppliedFilters([]);
+      }
       setTmpAppliedFilters([]);
     }
     if (
@@ -300,9 +311,16 @@ export function ExpandedFilterGroup(props: ExpandedFilterGroupProps) {
     }
   }
 
+  const expandedGroupValue =
+    props.expandedGroup !== undefined
+      ? props.expandedGroup
+      : expandedGroup
+      ? expandedGroup
+      : null;
+
   return (
     <>
-      {expandedGroup && (
+      {expandedGroupValue && (
         <>
           <div
             css={`
@@ -391,7 +409,6 @@ export function ExpandedFilterGroup(props: ExpandedFilterGroupProps) {
                 ${appColors.TOOLBOX.SECTION_BORDER_BOTTOM_COLOR};
             `}
           />
-
           <div
             css={`
               overflow-y: auto;
diff --git a/src/app/components/ToolBoxPanel/components/filters/common/group/index.tsx b/src/app/components/ToolBoxPanel/components/filters/common/group/index.tsx
index 4a17e826f..649fe66fa 100644
--- a/src/app/components/ToolBoxPanel/components/filters/common/group/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/filters/common/group/index.tsx
@@ -13,6 +13,8 @@ import { appColors } from "app/theme";
 
 interface FilterGroupCompProps extends FilterGroupModel {
   expandGroup: () => void;
+  appliedFilters?: string[];
+  setAppliedFilters?: (filters: string[]) => void;
 }
 
 export function FilterGroup(props: FilterGroupCompProps) {
@@ -68,7 +70,7 @@ export function FilterGroup(props: FilterGroupCompProps) {
       });
     }
     let newAppliedFilters = filter(
-      appliedFilters,
+      props.appliedFilters || appliedFilters,
       (af: string) => af !== option
     );
     if (allOptionSubOptions.length > 0) {
@@ -77,7 +79,11 @@ export function FilterGroup(props: FilterGroupCompProps) {
         (af: string) => !find(allOptionSubOptions, (so) => so.value === af)
       );
     }
-    setAppliedFilters(newAppliedFilters);
+    if (props.setAppliedFilters) {
+      props.setAppliedFilters(newAppliedFilters);
+    } else {
+      setAppliedFilters(newAppliedFilters);
+    }
     if (setAppliedFiltersChildren && appliedFiltersChildren) {
       let newAppliedFiltersChildren = [...appliedFiltersChildren];
       newAppliedFiltersChildren = filter(
@@ -172,7 +178,7 @@ export function FilterGroup(props: FilterGroupCompProps) {
         </IconButton>
       </div>
       {[
-        ...appliedFilters,
+        ...(props.appliedFilters || appliedFilters),
         ...(appliedFiltersChildren || []),
         ...(appliedFiltersGrandChildren || []),
       ].length > 0 && (
@@ -213,7 +219,7 @@ export function FilterGroup(props: FilterGroupCompProps) {
           `}
         >
           {[
-            ...appliedFilters,
+            ...(props.appliedFilters || appliedFilters),
             ...(appliedFiltersChildren || []),
             ...(appliedFiltersGrandChildren || []),
           ].map((option: string) => {
diff --git a/src/app/components/ToolBoxPanel/components/filters/data.ts b/src/app/components/ToolBoxPanel/components/filters/data.ts
index b00ba87cf..501cde24a 100644
--- a/src/app/components/ToolBoxPanel/components/filters/data.ts
+++ b/src/app/components/ToolBoxPanel/components/filters/data.ts
@@ -157,7 +157,16 @@ export const filtergroups: FilterGroupProps[] = [
     name: "Document Types",
     addSubOptionFilters: false,
   },
+  // {
+  //   name: "Portfolio categorization",
+  //   addSubOptionFilters: false,
+  // },
+  {
+    name: "TRP Window",
+    addSubOptionFilters: true,
+  },
 ];
+
 export const fundingRequestFilterGroups: FilterGroupProps[] = [
   {
     name: "Components",
@@ -167,15 +176,16 @@ export const fundingRequestFilterGroups: FilterGroupProps[] = [
     name: "Locations",
     addSubOptionFilters: true,
   },
-  {
-    name: "Portfolio categorization",
-    addSubOptionFilters: false,
-  },
+  // {
+  //   name: "Portfolio categorization",
+  //   addSubOptionFilters: false,
+  // },
   {
     name: "TRP Window",
     addSubOptionFilters: true,
   },
 ];
+
 export const accessToFundingEligibilityFilterGroups: FilterGroupProps[] = [
   {
     name: "Year",
@@ -185,7 +195,6 @@ export const accessToFundingEligibilityFilterGroups: FilterGroupProps[] = [
     name: "Components",
     addSubOptionFilters: false,
   },
-
   {
     name: "Eligibility Status",
     addSubOptionFilters: false,
@@ -203,7 +212,9 @@ export const pathnameToFilterGroups = {
     (fg: FilterGroupProps) =>
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   documents: filter(
     filtergroups,
@@ -223,105 +234,135 @@ export const pathnameToFilterGroups = {
     (fg: FilterGroupProps) =>
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/viz/disbursements/time-cycle": filter(
     filtergroups,
     (fg: FilterGroupProps) =>
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/viz/disbursements/map": filter(
     filtergroups,
     (fg: FilterGroupProps) =>
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/viz/disbursements/table": filter(
     filtergroups,
     (fg: FilterGroupProps) =>
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/viz/signed/treemap": filter(
     filtergroups,
     (fg: FilterGroupProps) =>
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/viz/signed/time-cycle": filter(
     filtergroups,
     (fg: FilterGroupProps) =>
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/viz/signed/map": filter(
     filtergroups,
     (fg: FilterGroupProps) =>
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/viz/signed/table": filter(
     filtergroups,
     (fg: FilterGroupProps) =>
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/viz/commitment/treemap": filter(
     filtergroups,
     (fg: FilterGroupProps) =>
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/viz/commitment/time-cycle": filter(
     filtergroups,
     (fg: FilterGroupProps) =>
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/viz/commitment/map": filter(
     filtergroups,
     (fg: FilterGroupProps) =>
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/viz/commitment/table": filter(
     filtergroups,
     (fg: FilterGroupProps) =>
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/viz/budgets/flow": filter(
     filtergroups,
     (fg: FilterGroupProps) =>
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/viz/budgets/time-cycle": filter(
     filtergroups,
     (fg: FilterGroupProps) =>
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/viz/budgets/map": filter(
     filtergroups,
     (fg: FilterGroupProps) =>
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/viz/allocations": filter(
     filtergroups,
@@ -368,6 +409,15 @@ export const pathnameToFilterGroups = {
     (fg: FilterGroupProps) =>
       fg.name === "Donors" || fg.name === "Replenishment Periods"
   ),
+  "/viz/funding-requests/table": filter(
+    filtergroups,
+    (fg: FilterGroupProps) =>
+      fg.name !== "Donors" &&
+      fg.name !== "Replenishment Periods" &&
+      fg.name !== "Document Types" &&
+      fg.name !== "Grant Status" &&
+      fg.name !== "Partner Types"
+  ),
   // location detail page
   "/location/<code>/overview": filter(
     filtergroups,
@@ -375,7 +425,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   // "/location/<code>/overview": [],
   "/location/<code>/disbursements/treemap": filter(
@@ -384,7 +436,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/location/<code>/disbursements/table": filter(
     filtergroups,
@@ -392,7 +446,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/location/<code>/disbursements/time-cycle": filter(
     filtergroups,
@@ -400,7 +456,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/location/<code>/disbursements/map": filter(
     filtergroups,
@@ -408,7 +466,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/location/<code>/signed/treemap": filter(
     filtergroups,
@@ -416,7 +476,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/location/<code>/signed/table": filter(
     filtergroups,
@@ -424,7 +486,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/location/<code>/signed/time-cycle": filter(
     filtergroups,
@@ -432,7 +496,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/location/<code>/signed/map": filter(
     filtergroups,
@@ -440,7 +506,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/location/<code>/commitment/treemap": filter(
     filtergroups,
@@ -448,7 +516,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/location/<code>/commitment/table": filter(
     filtergroups,
@@ -456,7 +526,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/location/<code>/commitment/time-cycle": filter(
     filtergroups,
@@ -464,7 +536,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/location/<code>/commitment/map": filter(
     filtergroups,
@@ -472,7 +546,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/location/<code>/budgets/flow": filter(
     filtergroups,
@@ -480,7 +556,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/location/<code>/budgets/time-cycle": filter(
     filtergroups,
@@ -488,7 +566,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/location/<code>/budgets/map": filter(
     filtergroups,
@@ -496,7 +576,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
 
   "/location/<code>/allocations": filter(
@@ -526,7 +608,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/location/<code>/grants/list": filter(
     filtergroups,
@@ -534,7 +618,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/location/<code>/results": filter(
     filtergroups,
@@ -547,7 +633,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/partner/<code>/disbursements/table": filter(
     filtergroups,
@@ -555,7 +643,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/partner/<code>/disbursements/time-cycle": filter(
     filtergroups,
@@ -563,7 +653,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/partner/<code>/disbursements/map": filter(
     filtergroups,
@@ -571,7 +663,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/partner/<code>/signed/treemap": filter(
     filtergroups,
@@ -579,7 +673,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/partner/<code>/signed/table": filter(
     filtergroups,
@@ -587,7 +683,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/partner/<code>/signed/time-cycle": filter(
     filtergroups,
@@ -595,7 +693,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/partner/<code>/signed/map": filter(
     filtergroups,
@@ -603,7 +703,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/partner/<code>/commitment/treemap": filter(
     filtergroups,
@@ -611,7 +713,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/partner/<code>/commitment/table": filter(
     filtergroups,
@@ -619,7 +723,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/partner/<code>/commitment/time-cycle": filter(
     filtergroups,
@@ -627,7 +733,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/partner/<code>/commitment/map": filter(
     filtergroups,
@@ -635,14 +743,18 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/partner/<code>/budgets/flow": filter(
     filtergroups,
     (fg: FilterGroupProps) =>
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
-      fg.name !== "Replenishment Periods"
+      fg.name !== "Replenishment Periods" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/partner/<code>/budgets/time-cycle": filter(
     filtergroups,
@@ -650,7 +762,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/partner/<code>/budgets/map": filter(
     filtergroups,
@@ -658,7 +772,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/partner/<code>/grants": filter(
     filtergroups,
@@ -666,7 +782,9 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
   "/partner/<code>/grants/list": filter(
     filtergroups,
@@ -674,6 +792,8 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Document Types"
+      fg.name !== "Document Types" &&
+      fg.name !== "Portfolio categorization" &&
+      fg.name !== "TRP Window"
   ),
 };
diff --git a/src/app/components/ToolBoxPanel/components/filters/index.tsx b/src/app/components/ToolBoxPanel/components/filters/index.tsx
index 029834e93..bc568c3eb 100644
--- a/src/app/components/ToolBoxPanel/components/filters/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/filters/index.tsx
@@ -15,6 +15,12 @@ import { ExpandedFilterGroup } from "app/components/ToolBoxPanel/components/filt
 
 interface ToolBoxPanelFiltersProps {
   groups: FilterGroupProps[];
+  expandedGroup?: FilterGroupProps | null;
+  appliedFilters?: { [key: string]: string[] };
+  defaultAppliedFilters?: { [key: string]: string[] };
+  groupAppliedFiltersPathKey?: { [key: string]: string };
+  setExpandedGroup?: (group: FilterGroupProps | null) => void;
+  setAppliedFilters?: (filters: { [key: string]: string[] }) => void;
 }
 
 export function ToolBoxPanelFilters(props: ToolBoxPanelFiltersProps) {
@@ -25,22 +31,64 @@ export function ToolBoxPanelFilters(props: ToolBoxPanelFiltersProps) {
   const data = useStoreState((state) => state.AppliedFiltersState);
 
   function resetAllFilters() {
-    if (!isEqual(data, defaultAppliedFilters)) {
-      actions.setAll(defaultAppliedFilters);
+    if (
+      props.setAppliedFilters &&
+      props.defaultAppliedFilters &&
+      props.appliedFilters
+    ) {
+      if (!isEqual(data, props.defaultAppliedFilters)) {
+        props.setAppliedFilters(props.defaultAppliedFilters);
+      }
+    } else {
+      if (!isEqual(data, defaultAppliedFilters)) {
+        actions.setAll(defaultAppliedFilters);
+      }
+    }
+  }
+
+  function setGroupAppliedFilters(group: string, filters: string[]) {
+    const appliedFilterPathKey = get(
+      props.groupAppliedFiltersPathKey,
+      group,
+      null
+    );
+    if (
+      appliedFilterPathKey &&
+      props.setAppliedFilters &&
+      props.appliedFilters
+    ) {
+      props.setAppliedFilters({
+        ...props.appliedFilters,
+        [appliedFilterPathKey]: filters,
+      });
     }
   }
 
   const options = React.useMemo(() => {
-    if (expandedGroup) {
+    if (props.setExpandedGroup && props.expandedGroup) {
+      return get(filterOptions, props.expandedGroup.name, []);
+    } else if (!props.setExpandedGroup && expandedGroup) {
       return get(filterOptions, expandedGroup.name, []);
     }
     return [];
-  }, [filterOptions, expandedGroup]);
+  }, [
+    filterOptions,
+    expandedGroup,
+    props.expandedGroup,
+    props.setExpandedGroup,
+  ]);
 
   if (props.groups.length === 0) {
     return <React.Fragment />;
   }
 
+  const expandedGroupValue =
+    props.expandedGroup !== undefined
+      ? props.expandedGroup
+      : expandedGroup
+      ? expandedGroup
+      : null;
+
   return (
     <div
       css={`
@@ -74,12 +122,12 @@ export function ToolBoxPanelFilters(props: ToolBoxPanelFiltersProps) {
           @supports (-webkit-touch-callout: none) {
             height: unset;
             max-height: unset;
-            padding-bottom: ${expandedGroup ? 100 : 200}px;
+            padding-bottom: ${expandedGroupValue ? 100 : 200}px;
           }
         }
       `}
     >
-      {!expandedGroup && (
+      {!expandedGroupValue && (
         <div>
           <div
             css={`
@@ -111,7 +159,32 @@ export function ToolBoxPanelFilters(props: ToolBoxPanelFiltersProps) {
               {...group}
               key={group.name}
               options={get(filterOptions, group.name, [])}
-              expandGroup={() => setExpandedGroup(group)}
+              expandGroup={() => {
+                if (props.setExpandedGroup) {
+                  props.setExpandedGroup(group);
+                } else {
+                  setExpandedGroup(group);
+                }
+              }}
+              appliedFilters={
+                props.appliedFilters
+                  ? get(
+                      props.appliedFilters,
+                      get(
+                        props.groupAppliedFiltersPathKey,
+                        `["${group.name}"]`,
+                        group.name
+                      ),
+                      []
+                    )
+                  : undefined
+              }
+              setAppliedFilters={
+                props.setAppliedFilters
+                  ? (filters: string[]) =>
+                      setGroupAppliedFilters(group.name, filters)
+                  : undefined
+              }
             />
           ))}
         </div>
@@ -119,14 +192,40 @@ export function ToolBoxPanelFilters(props: ToolBoxPanelFiltersProps) {
       <div
         css={`
           transition: height 2s ease;
-          height: ${expandedGroup ? "calc(100% - 8px)" : "0"};
+          height: ${expandedGroupValue ? "calc(100% - 8px)" : "0"};
         `}
       >
-        {expandedGroup ? (
+        {expandedGroupValue ? (
           <ExpandedFilterGroup
-            {...expandedGroup}
-            goBack={() => setExpandedGroup(null)}
+            {...expandedGroupValue}
+            expandedGroup={expandedGroupValue}
+            goBack={() => {
+              if (props.setExpandedGroup) {
+                props.setExpandedGroup(null);
+              } else {
+                setExpandedGroup(null);
+              }
+            }}
             options={options}
+            appliedFilters={
+              props.appliedFilters
+                ? get(
+                    props.appliedFilters,
+                    get(
+                      props.groupAppliedFiltersPathKey,
+                      `["${expandedGroupValue.name}"]`,
+                      expandedGroupValue.name
+                    ),
+                    []
+                  )
+                : undefined
+            }
+            setAppliedFilters={
+              props.setAppliedFilters
+                ? (filters: string[]) =>
+                    setGroupAppliedFilters(expandedGroupValue.name, filters)
+                : undefined
+            }
           />
         ) : (
           <></>
diff --git a/src/app/hooks/useAppliedFilters.tsx b/src/app/hooks/useAppliedFilters.tsx
index 17f1373b4..4edaf463c 100644
--- a/src/app/hooks/useAppliedFilters.tsx
+++ b/src/app/hooks/useAppliedFilters.tsx
@@ -72,6 +72,11 @@ export function useAppliedFilters(props: UseAppliedFiltersProps): {
         setAppliedFilters: actions.setDonors,
         appliedFilters: data.donors,
       };
+    case "TRP Window":
+      return {
+        setAppliedFilters: actions.setTrpWindows,
+        appliedFilters: data.trpWindows,
+      };
     case "All":
       return {
         setAppliedFilters: actions.setLocations,
@@ -84,6 +89,7 @@ export function useAppliedFilters(props: UseAppliedFiltersProps): {
           ...data.status,
           ...data.donors,
           ...data.replenishmentPeriods,
+          ...data.trpWindows,
         ],
       };
     default:
diff --git a/src/app/hooks/useDatasetMenuItems.tsx b/src/app/hooks/useDatasetMenuItems.tsx
index ca0fa1a56..be2b8cb74 100644
--- a/src/app/hooks/useDatasetMenuItems.tsx
+++ b/src/app/hooks/useDatasetMenuItems.tsx
@@ -101,6 +101,9 @@ export function useDatasetMenuItems(): React.ReactChild[] {
     <Expandable label="Access to Funding">
       <Link to={`/viz/eligibility/table${location.search}`}>Eligibility</Link>
       <Link to={`/viz/allocations${location.search}`}>Allocations</Link>
+      <Link to={`/viz/funding-requests/table${location.search}`}>
+        Funding Requests
+      </Link>
     </Expandable>,
     <Expandable label="Grant Implementation">
       <Link
diff --git a/src/app/hooks/useFilterOptions.tsx b/src/app/hooks/useFilterOptions.tsx
index f534ae48a..9e5846b13 100644
--- a/src/app/hooks/useFilterOptions.tsx
+++ b/src/app/hooks/useFilterOptions.tsx
@@ -6,6 +6,7 @@ import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import { FilterGroupOptionModel } from "app/components/ToolBoxPanel/components/filters/data";
 
 interface UseFilterOptionsProps {
+  loadFilterOptions?: boolean;
   returnFilterOptions?: boolean;
 }
 
@@ -17,6 +18,10 @@ export interface UseFilterOptionsReturn {
   "Replenishment Periods": FilterGroupOptionModel[];
   "Document Types": FilterGroupOptionModel[];
   Donors: FilterGroupOptionModel[];
+  "Eligibility Status": FilterGroupOptionModel[];
+  "Disease Burden": FilterGroupOptionModel[];
+  "Eligibility Years": FilterGroupOptionModel[];
+  "TRP Window": FilterGroupOptionModel[];
 }
 
 export function useFilterOptions(
@@ -76,24 +81,63 @@ export function useFilterOptions(
     },
   ];
 
+  const getGrantCycles = useStoreActions(
+    (store) => store.LocationAccessToFunding.GrantCycles.fetch
+  );
+
+  const getEligibilityStatusCodelist = useStoreActions(
+    (store) => store.EligibilityStatusCodelist.fetch
+  );
+  const eligibilityStatusCodelist = useStoreState((state) =>
+    get(state.EligibilityStatusCodelist, "data.data", [])
+  );
+
+  const getEligibilityDiseaseBurdenCodelist = useStoreActions(
+    (store) => store.EligibilityDiseaseBurdenCodelist.fetch
+  );
+  const EligibilityDiseaseBurdenCodelist = useStoreState((state) =>
+    get(state.EligibilityDiseaseBurdenCodelist, "data.data", [])
+  );
+
+  const getEligibilityYearOptions = useStoreActions(
+    (store) => store.EligibilityYears.fetch
+  );
+  const EligibilityYearOptions = useStoreState((state) =>
+    get(state.EligibilityYears, "data.data", [])
+  );
+
+  const getFundingRequestsTRPWindowCodelist = useStoreActions(
+    (store) => store.FundingRequestsTRPWindowCodelist.fetch
+  );
+  const FundingRequestsTRPWindowCodelist = useStoreState((state) =>
+    get(state.FundingRequestsTRPWindowCodelist, "data.data", [])
+  );
+
   React.useEffect(() => {
-    if (locations.length === 0) {
-      getLocations({});
-    }
-    if (components.length === 0) {
-      getComponents({});
-    }
-    if (partnerTypes.length === 0) {
-      getPartnerTypes({});
-    }
-    if (status.length === 0) {
-      getStatus({});
-    }
-    if (replenishmentPeriods.length === 0) {
-      getReplenishmentPeriods({});
-    }
-    if (donors.length === 0) {
-      getDonors({});
+    if (props.loadFilterOptions) {
+      if (locations.length === 0) {
+        getLocations({});
+      }
+      if (components.length === 0) {
+        getComponents({});
+      }
+      if (partnerTypes.length === 0) {
+        getPartnerTypes({});
+      }
+      if (status.length === 0) {
+        getStatus({});
+      }
+      if (replenishmentPeriods.length === 0) {
+        getReplenishmentPeriods({});
+      }
+      if (donors.length === 0) {
+        getDonors({});
+      }
+      getGrantCycles({});
+      getEligibilityStatusCodelist({});
+      getEligibilityYearOptions({});
+      getEligibilityDiseaseBurdenCodelist({});
+      getFundingRequestsTRPWindowCodelist({});
     }
   }, []);
 
@@ -109,6 +153,13 @@ export function useFilterOptions(
         location.pathname === "/viz/pledges-contributions/map"
           ? get(find(donors, { label: donorsMapView }), "subOptions", donors)
           : donors,
+      "Eligibility Status": eligibilityStatusCodelist,
+      "Disease Burden": EligibilityDiseaseBurdenCodelist,
+      "Eligibility Years": EligibilityYearOptions.map((item: string) => ({
+        label: item,
+        value: item,
+      })),
+      "TRP Window": FundingRequestsTRPWindowCodelist,
     };
   }
 
diff --git a/src/app/hooks/useGetAllVizData.tsx b/src/app/hooks/useGetAllVizData.tsx
index 5b5887239..a4f276af6 100644
--- a/src/app/hooks/useGetAllVizData.tsx
+++ b/src/app/hooks/useGetAllVizData.tsx
@@ -212,6 +212,22 @@ export function useGetAllVizData() {
   const locationDetailDocuments = useStoreState(
     (state) => state.LocationDetailDocuments.data
   );
+  const locationDetailEligibility = useStoreState(
+    (state) =>
+      get(
+        state.LocationAccessToFunding.EligibilityTable.data,
+        "data",
+        []
+      ) as SimpleTableRow[]
+  );
+  const locationDetailFundingRequests = useStoreState(
+    (state) =>
+      get(
+        state.LocationAccessToFunding.FundingRequestsTable.data,
+        "data",
+        []
+      ) as SimpleTableRow[]
+  );
   const pledgesContributionsGeomap = useStoreState((state) => ({
     layers: {
       type: "FeatureCollection",
@@ -406,6 +422,12 @@ export function useGetAllVizData() {
     "/location/<code>/grants/list": grantsList,
     // Location Results
     "/location/<code>/results": resultsList,
+    // Location Access To Funding
+    "/location/<code>/access-to-funding": {
+      eligibility: locationDetailEligibility,
+      allocation: allocations,
+      fundingRequest: locationDetailFundingRequests,
+    },
     // Grants
     "/grants": grantsList,
     // Results
diff --git a/src/app/hooks/useUrlFilters.tsx b/src/app/hooks/useUrlFilters.tsx
index 810f43d56..f4383c758 100644
--- a/src/app/hooks/useUrlFilters.tsx
+++ b/src/app/hooks/useUrlFilters.tsx
@@ -29,6 +29,7 @@ export function useUrlFilters(): null {
       const donorSubCategories = currentUrlParams.get("donorSubCategories");
       const donorCategories = currentUrlParams.get("donorCategories");
       const replenishmentPeriods = currentUrlParams.get("replenishmentPeriods");
+      const trpWindows = currentUrlParams.get("trpWindows");
 
       if (locations) {
         updatedAppliedFilters.locations = locations.split(",");
@@ -65,6 +66,9 @@ export function useUrlFilters(): null {
         updatedAppliedFilters.replenishmentPeriods =
           replenishmentPeriods.split(",");
       }
+      if (trpWindows) {
+        updatedAppliedFilters.trpWindows = trpWindows.split(",");
+      }
 
       actions.setAll(updatedAppliedFilters);
     },
@@ -138,6 +142,11 @@ export function useUrlFilters(): null {
     } else {
       currentUrlParams.delete("replenishmentPeriods");
     }
+    if (data.trpWindows.length > 0) {
+      currentUrlParams.set("trpWindows", data.trpWindows.join(","));
+    } else {
+      currentUrlParams.delete("trpWindows");
+    }
 
     const queryString = decodeURIComponent(currentUrlParams.toString());
     history.push({
@@ -161,6 +170,7 @@ export function useUrlFilters(): null {
     const donorSubCategories = currentUrlParams.get("donorSubCategories");
     const donorCategories = currentUrlParams.get("donorCategories");
     const replenishmentPeriods = currentUrlParams.get("replenishmentPeriods");
+    const trpWindows = currentUrlParams.get("trpWindows");
 
     if (locations) {
       updatedAppliedFilters.locations = locations.split(",");
@@ -218,6 +228,11 @@ export function useUrlFilters(): null {
     } else if (updatedAppliedFilters.replenishmentPeriods.length > 0) {
       updatedAppliedFilters.replenishmentPeriods = [];
     }
+    if (trpWindows) {
+      updatedAppliedFilters.trpWindows = trpWindows.split(",");
+    } else if (updatedAppliedFilters.trpWindows.length > 0) {
+      updatedAppliedFilters.trpWindows = [];
+    }
 
     if (!isEqual(data, updatedAppliedFilters)) {
       actions.setAll(updatedAppliedFilters);
diff --git a/src/app/modules/common/page-loader/index.tsx b/src/app/modules/common/page-loader/index.tsx
index 3a3bbb41b..2fba2a250 100644
--- a/src/app/modules/common/page-loader/index.tsx
+++ b/src/app/modules/common/page-loader/index.tsx
@@ -21,7 +21,6 @@ const Container = styled.div`
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  height: calc(100vh - 45px);
 `;
 
 export const LoadingComp = styled.div`
@@ -33,8 +32,13 @@ export const LoadingComp = styled.div`
     props.inLoader ? "100%" : "100vh"};
   z-index: 100000;
   position: ${(props: { inLoader?: boolean }) =>
-    props.inLoader ? "static" : "fixed"};
+    props.inLoader ? "absolute" : "fixed"};
   background: rgba(0, 0, 0, 0.2);
+
+  > div {
+    height: ${(props: { inLoader?: boolean }) =>
+      props.inLoader ? "100%" : "calc(100vh - 45px)"};
+  }
 `;
 
 export const PageLoader = (props: { inLoader?: boolean }) => {
diff --git a/src/app/modules/landing-module/components/dataset-grid/index.tsx b/src/app/modules/landing-module/components/dataset-grid/index.tsx
index d21b4c11a..77e07dd0e 100644
--- a/src/app/modules/landing-module/components/dataset-grid/index.tsx
+++ b/src/app/modules/landing-module/components/dataset-grid/index.tsx
@@ -274,12 +274,12 @@ export function LandingDatasetGrid() {
       <Grid item xs={12} sm={6} md={6} lg={3}>
         <GridItem
           title={frText}
-          link="/viz/funding-request/table"
+          link="/viz/funding-requests/table"
           description={frDescription}
           iconLinks={[
             {
               icon: <TableIcon />,
-              link: "/viz/funding-request/table",
+              link: "/viz/funding-requests/table",
             },
           ]}
         />
diff --git a/src/app/modules/viz-module/index.tsx b/src/app/modules/viz-module/index.tsx
index 1582abdb5..69d30eb63 100644
--- a/src/app/modules/viz-module/index.tsx
+++ b/src/app/modules/viz-module/index.tsx
@@ -93,6 +93,8 @@ export default function VizModule() {
         return `Access to funding: ${localVizType}`;
       case "Eligibility":
         return `Access to funding: ${localVizType}`;
+      case "Funding-requests":
+        return `Access to funding: ${localVizType}`;
       case "Documents":
         return "Documents";
       case "Results":
@@ -315,7 +317,7 @@ export default function VizModule() {
             <EligibilityModule />
           </Route>
           {/* Funding Request */}
-          <Route path="/viz/funding-request/table">
+          <Route path="/viz/funding-requests/table">
             <GenericFundingRequestWrapper />
           </Route>
         </Switch>
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx
index e4d4b49f3..ba708c110 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx
@@ -1,20 +1,19 @@
+import React from "react";
+import { useMeasure } from "react-use";
+import findIndex from "lodash/findIndex";
 import { ApexOptions } from "apexcharts";
 import ReactApexCharts from "react-apexcharts";
-
-import { NoDataLabel } from "app/components/Charts/common/nodatalabel";
+import useMediaQuery from "@material-ui/core/useMediaQuery";
+import { PageLoader } from "app/modules/common/page-loader";
 import { formatFinancialValue } from "app/utils/formatFinancialValue";
-
-import { findIndex, values, keys, get } from "lodash";
-
-import React from "react";
+import { NoDataLabel } from "app/components/Charts/common/nodatalabel";
 import { NoDataAllocations } from "../../allocations/components/nodata";
-import useMediaQuery from "@material-ui/core/useMediaQuery";
 import { getKeysPercentages } from "app/modules/viz-module/sub-modules/allocations/data";
-import { useMeasure } from "react-use";
 interface Props {
   total: number;
   keys: string[];
   values: number[];
+  isLoading: boolean;
 }
 
 export default function RadialChart(props: Props) {
@@ -28,8 +27,9 @@ export default function RadialChart(props: Props) {
   }>(getKeysPercentages(props.total, props.values));
 
   React.useEffect(() => {
+    console.log("RadialChart props", props);
     setKeysPercentagesColors(getKeysPercentages(props.total, props.values));
-  }, [props.total, values]);
+  }, [props.total, props.values]);
 
   const options: ApexOptions = {
     plotOptions: {
@@ -95,9 +95,8 @@ export default function RadialChart(props: Props) {
         if (isMobile) {
           return seriesName;
         }
-
         return `${seriesName}: ${Math.floor(
-          keysPercentagesColors.percentages[opts.seriesIndex]
+          opts.w.globals.series[opts.seriesIndex]
         )}%`;
       },
       itemMargin: {
@@ -122,6 +121,8 @@ export default function RadialChart(props: Props) {
     ],
   };
 
+  console.log("RadialChart keysPercentagesColors", keysPercentagesColors);
+
   return (
     <>
       <div
@@ -140,6 +141,7 @@ export default function RadialChart(props: Props) {
           }
         `}
       >
+        {props.isLoading && <PageLoader inLoader />}
         <div ref={ref} id="allocations-radial-bar">
           {props.total === 0 ? (
             <div css="display: flex;justify-content: center;">
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/eligibilityTable.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/eligibilityTable.tsx
index 159936e82..7d351bddc 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/eligibilityTable.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/eligibilityTable.tsx
@@ -11,7 +11,6 @@ import {
 interface EligibilityTableProps {
   search: string;
   sortBy: string;
-  isLoading: boolean;
   data: SimpleTableRow[];
   columns: SimpleTableColumn[];
   setSearch: (value: string) => void;
@@ -20,10 +19,6 @@ interface EligibilityTableProps {
 }
 
 export function EligibilityTable(props: EligibilityTableProps) {
-  if (props.isLoading) {
-    return <PageLoader />;
-  }
-
   return (
     <SimpleTable
       search={props.search}
@@ -33,6 +28,7 @@ export function EligibilityTable(props: EligibilityTableProps) {
       columns={props.columns}
       onSearchChange={props.setSearch}
       onSortByChange={props.setSortBy}
+      multiVizPageDataKey="eligibility"
     />
   );
 }
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
index 61937e1be..56dd901a9 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
@@ -1,48 +1,20 @@
 /* third-party */
 import React from "react";
 import get from "lodash/get";
+import { useDebounce } from "react-use";
+import { useRecoilValue } from "recoil";
+import Slide from "@material-ui/core/Slide";
 import TablePagination from "@material-ui/core/TablePagination";
-import { useDebounce, useTitle, useUpdateEffect } from "react-use";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 /* project */
-import { PageLoader } from "app/modules/common/page-loader";
-import { SimpleTableRow } from "app/components/Table/Simple/data";
-import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
-import {
-  diseaseBurdens,
-  EligibilityScatterplotDataItemModel,
-  EligibilityScatterplotDataModel,
-  incomeLevels,
-} from "app/components/Charts/Eligibility/Scatterplot/data";
 import { EligibilityTable } from "./eligibilityTable";
-import { ClickAwayListener, Slide } from "@material-ui/core";
+import { PageLoader } from "app/modules/common/page-loader";
 import { TriangleXSIcon } from "app/assets/icons/TriangleXS";
-import { ToolBoxPanelControlRow } from "app/components/ToolBoxPanel/components/controlrow";
+import { SimpleTableRow } from "app/components/Table/Simple/data";
+import { locationAccessToFundingCycleAtom } from "app/state/recoil/atoms";
 import { ToolBoxPanelFilters } from "app/components/ToolBoxPanel/components/filters";
-import {
-  accessToFundingEligibilityFilterGroups,
-  FilterGroupProps,
-} from "app/components/ToolBoxPanel/components/filters/data";
-import { ViewModel } from "app/components/ToolBoxPanel/utils/getControlItems";
 import { ToolBoxPanelAggregateBy } from "app/components/ToolBoxPanel/components/aggregateby";
-
-function getTableData(
-  data: EligibilityScatterplotDataModel[]
-): SimpleTableRow[] {
-  return data.map((item: EligibilityScatterplotDataModel) =>
-    item.data.map((itemData) => ({
-      year: itemData.x,
-      component: itemData.y,
-      incomeLevel: get(
-        incomeLevels,
-        `[${itemData.incomeLevel}]`,
-        itemData.incomeLevel
-      ),
-      diseaseBurden: get(diseaseBurdens, `[${itemData.diseaseBurden}]`, ""),
-      status: itemData.eligibility,
-    }))
-  );
-}
+import { FilterGroupProps } from "app/components/ToolBoxPanel/components/filters/data";
 
 interface Props {
   code: string;
@@ -50,71 +22,164 @@ interface Props {
 }
 
 export function AccessToFundingEligibilityTableWrapper(props: Props) {
-  useTitle("The Data Explorer - Location Eligibility");
-
-  const [search, setSearch] = React.useState("");
-  const [sortBy, setSortBy] = React.useState("");
-  const [openToolboxPanel, setOpenToolboxPanel] = React.useState(false);
-
   const data = useStoreState(
     (state) =>
       get(
-        state.EligibilityCountry.data,
+        state.LocationAccessToFunding.EligibilityTable.data,
         "data",
         []
-      ) as EligibilityScatterplotDataModel[]
+      ) as SimpleTableRow[]
   );
 
+  const [search, setSearch] = React.useState("");
+  const [sortBy, setSortBy] = React.useState("year DESC");
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(10);
-  const [tableData, setTableData] = React.useState<SimpleTableRow[]>(
-    getTableData(data)
+  const [openToolboxPanel, setOpenToolboxPanel] = React.useState(false);
+  const [selectedAggregate, setSelectedAggregate] = React.useState("year");
+  const [expandedGroup, setExpandedGroup] =
+    React.useState<FilterGroupProps | null>(null);
+
+  const controlItems = {
+    aggregates: [
+      { label: "Year", value: "year" },
+      { label: "Components", value: "componentName" },
+    ],
+  };
+
+  const fetchData = useStoreActions(
+    (store) => store.LocationAccessToFunding.EligibilityTable.fetch
+  );
+  const isLoading = useStoreState(
+    (state) => state.LocationAccessToFunding.EligibilityTable.loading
   );
-  const fetchData = useStoreActions((store) => store.EligibilityCountry.fetch);
 
-  const isLoading = useStoreState((state) => state.EligibilityCountry.loading);
+  const cycle = useRecoilValue(locationAccessToFundingCycleAtom);
+
+  const [appliedFilters, setAppliedFilters] = React.useState<{
+    [key: string]: string[];
+  }>({
+    year: [],
+    components: [],
+    status: [],
+    diseaseBurden: [],
+  });
+
+  const filterGroups = [
+    {
+      name: "Eligibility Years",
+    },
+    {
+      name: "Components",
+    },
+    {
+      name: "Eligibility Status",
+    },
+    {
+      name: "Disease Burden",
+    },
+  ];
 
-  const appliedFilters = useStoreState((state) => state.AppliedFiltersState);
+  const groupAppliedFiltersPathKey = {
+    "Eligibility Years": "year",
+    Components: "components",
+    "Eligibility Status": "status",
+    "Disease Burden": "diseaseBurden",
+  };
 
   function reloadData() {
-    const filterString = getAPIFormattedFilters(
-      props.code
-        ? {
-            ...appliedFilters,
-            locations: [...appliedFilters.locations, props.code],
-          }
-        : appliedFilters,
-      { search, sortBy }
-    );
+    const filterStr: string[] = [`locations=${props.code}`];
+    if (search.length > 0) {
+      filterStr.push(`q=${search}`);
+    }
+    if (sortBy.length > 0) {
+      filterStr.push(`sortBy=${sortBy}`);
+    }
+    if (appliedFilters.year.length > 0) {
+      filterStr.push(`periods=${appliedFilters.year.join(",")}`);
+    }
+    if (appliedFilters.components.length > 0) {
+      filterStr.push(`components=${appliedFilters.components.join(",")}`);
+    }
+    if (appliedFilters.status.length > 0) {
+      filterStr.push(`status=${appliedFilters.status.join(",")}`);
+    }
+    if (appliedFilters.diseaseBurden.length > 0) {
+      filterStr.push(`diseaseBurden=${appliedFilters.diseaseBurden.join(",")}`);
+    }
+    if (cycle !== "All") {
+      filterStr.push(
+        `cycles=${cycle.replace("-20", "-")}${
+          cycle === "2002-2013" ? ",null" : ""
+        }`
+      );
+    }
     fetchData({
-      filterString: `${filterString}${
-        filterString.length > 0 ? "&" : ""
-      }view=table`,
+      filterString: `aggregateBy=${selectedAggregate}&${filterStr.join("&")}`,
     });
   }
 
-  React.useEffect(() => reloadData(), [props.code, appliedFilters, sortBy]);
+  React.useEffect(
+    () => reloadData(),
+    [props.code, selectedAggregate, appliedFilters, sortBy, cycle]
+  );
 
-  useUpdateEffect(() => setTableData(getTableData(data)), [data]);
+  const [,] = useDebounce(
+    () => {
+      if (search.length > 0) {
+        reloadData();
+      }
+    },
+    500,
+    [search]
+  );
 
-  const [,] = useDebounce(() => reloadData(), 500, [search]);
+  const handleChangePage = (
+    _event: React.MouseEvent<HTMLButtonElement> | null,
+    newPage: number
+  ) => {
+    setPage(newPage);
+  };
 
-  const [selectedView, setSelectedView] = React.useState("Table");
-  const [selectedAggregates, setSelectedAggregates] = React.useState("Year");
+  const handleChangeRowsPerPage = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
 
-  const [controlItems, setControlItems] = React.useState<{
-    views: ViewModel[];
-    aggregates: ViewModel[];
-  }>({
-    views: [{ label: "Table", value: "Table", link: location.pathname }],
-    aggregates: [
-      { label: "Year", value: "yearName" },
-      { label: "Components", value: "componentName" },
-    ],
-  });
+  let columns = [
+    { name: "Year", key: "year" },
+    { name: "Component", key: "component" },
+    {
+      name: "Eligibility Status",
+      key: "eligibilityStatus",
+      valueToColorMap: {
+        Eligible: "#11AD6B",
+        "Not Eligible": "#FA7355",
+        "Transition Funding": "#F7E248",
+      },
+    },
+    { name: "Disease Burden", key: "diseaseBurden" },
+    { name: "Income Level", key: "incomeLevel" },
+  ];
 
-  if (isLoading) {
-    return <PageLoader />;
+  if (selectedAggregate === "componentName") {
+    columns = [
+      { name: "Component", key: "component" },
+      { name: "Year", key: "year" },
+      {
+        name: "Eligibility Status",
+        key: "eligibilityStatus",
+        valueToColorMap: {
+          Eligible: "#11AD6B",
+          "Not Eligible": "#FA7355",
+          "Transition Funding": "#F7E248",
+        },
+      },
+      { name: "Disease Burden", key: "diseaseBurden" },
+      { name: "Income Level", key: "incomeLevel" },
+    ];
   }
 
   return (
@@ -124,6 +189,7 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
           position: relative;
         `}
       >
+        {isLoading && <PageLoader inLoader />}
         <div
           role="button"
           tabIndex={-1}
@@ -160,90 +226,89 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
         >
           <TriangleXSIcon />
         </div>
-        <ClickAwayListener
-          onClickAway={(event: React.MouseEvent<Document, MouseEvent>) => {
-            if (openToolboxPanel) {
-              setOpenToolboxPanel(!openToolboxPanel);
-            }
-          }}
-        >
-          <>
-            <Slide direction="left" in={openToolboxPanel}>
-              <div
-                css={`
-                  right: -8px;
-                  z-index: 4;
-                  width: 600px;
-                  /* top: ${top}px; */
-                  position: absolute;
-                  background: #f5f5f7;
-                  height: 98%;
-                  visibility: visible !important;
-                  overflow-y: auto;
-                  ::-webkit-scrollbar {
-                    display: none;
-                  }
-
-                  box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.6);
-                  border-radius: 20px;
-
-                  @media (max-width: 767px) {
-                    width: 100vw;
-                    box-shadow: none;
-                    overflow-y: auto;
-                  }
-                `}
-              >
-                <div
-                  css={`
-                    width: 100%;
-
-                    display: flex;
-
-                    flex-direction: column;
-                  `}
-                >
-                  {}
-                  <React.Fragment>
-                    <ToolBoxPanelControlRow
-                      title="Views"
-                      selected={selectedView}
-                      options={controlItems.views}
-                      setSelected={setSelectedView}
-                    />
-                    <ToolBoxPanelAggregateBy
-                      title="Aggregate by"
-                      selected={selectedAggregates}
-                      options={controlItems.aggregates}
-                      setSelected={setSelectedAggregates}
-                    />
-                    <ToolBoxPanelFilters
-                      groups={accessToFundingEligibilityFilterGroups}
-                    />
-                  </React.Fragment>
-                </div>
-              </div>
-            </Slide>
-          </>
-        </ClickAwayListener>
+        <Slide direction="left" in={openToolboxPanel}>
+          <div
+            css={`
+              z-index: 4;
+              right: -8px;
+              width: 600px;
+              height: 700px;
+              overflow-y: auto;
+              position: absolute;
+              background: #f5f5f7;
+              border-radius: 20px;
+              visibility: visible !important;
+              box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.6);
+
+              ::-webkit-scrollbar {
+                display: none;
+              }
+
+              @media (max-width: 767px) {
+                width: 100vw;
+                box-shadow: none;
+                overflow-y: auto;
+              }
+            `}
+          >
+            <div
+              css={`
+                width: 100%;
+
+                display: flex;
+
+                flex-direction: column;
+              `}
+            >
+              <ToolBoxPanelAggregateBy
+                title="Aggregate by"
+                selected={selectedAggregate}
+                options={controlItems.aggregates}
+                setSelected={setSelectedAggregate}
+              />
+              <ToolBoxPanelFilters
+                groups={filterGroups}
+                expandedGroup={expandedGroup}
+                appliedFilters={appliedFilters}
+                setExpandedGroup={setExpandedGroup}
+                setAppliedFilters={setAppliedFilters}
+                defaultAppliedFilters={{
+                  year: [],
+                  components: [],
+                  status: [],
+                  diseaseBurden: [],
+                }}
+                groupAppliedFiltersPathKey={groupAppliedFiltersPathKey}
+              />
+            </div>
+          </div>
+        </Slide>
         <EligibilityTable
           search={search}
           sortBy={sortBy}
-          data={tableData[2]?.slice(
-            page * rowsPerPage,
-            (page + 1) * rowsPerPage
-          )}
-          isLoading={isLoading}
+          data={data.slice(page * rowsPerPage, (page + 1) * rowsPerPage)}
           setSearch={setSearch}
           setSortBy={setSortBy}
-          columns={[
-            { name: "Year", key: "year" },
-            { name: "Component", key: "component" },
-            { name: "Income Level", key: "incomeLevel" },
-            { name: "Disease Burden", key: "diseaseBurden" },
-            { name: "Status", key: "status" },
-          ]}
-          title="2023-2025"
+          columns={columns}
+          title={cycle}
+        />
+        <TablePagination
+          page={page}
+          component="div"
+          count={data.length}
+          rowsPerPage={rowsPerPage}
+          onPageChange={handleChangePage}
+          onRowsPerPageChange={handleChangeRowsPerPage}
+          css={`
+            @media (min-width: 768px) {
+              .MuiTablePagination-toolbar {
+                padding-left: 40px;
+              }
+              .MuiTablePagination-spacer {
+                display: none;
+              }
+            }
+          `}
         />
       </div>
     </>
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/table.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/table.tsx
index e67b48cc3..28f6a735f 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/table.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/table.tsx
@@ -13,19 +13,15 @@ import {
 interface FundingRequestTableProps {
   search: string;
   sortBy: string;
-  isLoading: boolean;
   data: FundingTableRow[];
   columns: FundingTableColumn[];
   setSearch: (value: string) => void;
   setSortBy: (value: string) => void;
   title: string;
+  forceExpand?: boolean;
 }
 
 export function Table(props: FundingRequestTableProps) {
-  if (props.isLoading) {
-    return <PageLoader />;
-  }
-
   return (
     <div>
       <FundingRequestTable
@@ -38,6 +34,7 @@ export function Table(props: FundingRequestTableProps) {
         onSearchChange={props.setSearch}
         onSortByChange={props.setSortBy}
         paddingLeft={2}
+        forceExpand={props.forceExpand}
       />
     </div>
   );
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
index db5ae79c5..b7e25da19 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
@@ -1,43 +1,19 @@
 /* third-party */
 import React from "react";
 import get from "lodash/get";
-import { useDebounce, useTitle, useUpdateEffect } from "react-use";
+import { useDebounce } from "react-use";
+import { useRecoilValue } from "recoil";
+import Slide from "@material-ui/core/Slide";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 /* project */
 import { PageLoader } from "app/modules/common/page-loader";
-import { SimpleTableRow } from "app/components/Table/Simple/data";
-import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
-import {
-  diseaseBurdens,
-  EligibilityScatterplotDataItemModel,
-  incomeLevels,
-} from "app/components/Charts/Eligibility/Scatterplot/data";
-import {
-  fundingRequestData,
-  fundingRequestColumns,
-} from "../../fundingRequests/table/data-wrappers/data";
-import {
-  FilterGroupProps,
-  fundingRequestFilterGroups,
-} from "app/components/ToolBoxPanel/components/filters/data";
-import { ClickAwayListener, Slide } from "@material-ui/core";
 import { TriangleXSIcon } from "app/assets/icons/TriangleXS";
-import { ToolBoxPanelControlRow } from "app/components/ToolBoxPanel/components/controlrow";
-import { ViewModel } from "app/components/ToolBoxPanel/utils/getControlItems";
+import { SimpleTableRow } from "app/components/Table/Simple/data";
+import { locationAccessToFundingCycleAtom } from "app/state/recoil/atoms";
 import { ToolBoxPanelFilters } from "app/components/ToolBoxPanel/components/filters";
-import { Table } from "./table";
-
-function getTableData(
-  data: EligibilityScatterplotDataItemModel[]
-): SimpleTableRow[] {
-  return data.map((item: EligibilityScatterplotDataItemModel) => ({
-    year: item.x,
-    component: item.y,
-    incomeLevel: get(incomeLevels, `[${item.incomeLevel}]`, item.incomeLevel),
-    diseaseBurden: get(diseaseBurdens, `[${item.diseaseBurden}]`, ""),
-    status: item.eligibility,
-  }));
-}
+import { FilterGroupProps } from "app/components/ToolBoxPanel/components/filters/data";
+import { Table } from "app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/table";
+import { fundingRequestColumns } from "app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data";
 
 interface Props {
   code: string;
@@ -46,7 +22,6 @@ interface Props {
 }
 
 export function AccessToFundingRequestTableWrapper(props: Props) {
-  useTitle("The Data Explorer - Location Eligibility");
   const [openToolboxPanel, setOpenToolboxPanel] = React.useState(false);
   const [search, setSearch] = React.useState("");
   const [sortBy, setSortBy] = React.useState("");
@@ -54,58 +29,81 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
   const data = useStoreState(
     (state) =>
       get(
-        state.EligibilityCountry.data,
+        state.LocationAccessToFunding.FundingRequestsTable.data,
         "data",
         []
-      ) as EligibilityScatterplotDataItemModel[]
+      ) as SimpleTableRow[]
   );
 
-  const [tableData, setTableData] = React.useState<SimpleTableRow[]>(
-    getTableData(data)
+  const fetchData = useStoreActions(
+    (store) => store.LocationAccessToFunding.FundingRequestsTable.fetch
   );
 
-  const fetchData = useStoreActions((store) => store.EligibilityCountry.fetch);
+  const isLoading = useStoreState(
+    (state) => state.LocationAccessToFunding.FundingRequestsTable.loading
+  );
 
-  const isLoading = useStoreState((state) => state.EligibilityCountry.loading);
+  const cycle = useRecoilValue(locationAccessToFundingCycleAtom);
 
-  const appliedFilters = useStoreState((state) => state.AppliedFiltersState);
+  const [appliedFilters, setAppliedFilters] = React.useState<{
+    [key: string]: string[];
+  }>({
+    components: [],
+    trpWindows: [],
+  });
+  const [expandedGroup, setExpandedGroup] =
+    React.useState<FilterGroupProps | null>(null);
+
+  const filterGroups = [
+    {
+      name: "Components",
+    },
+    {
+      name: "TRP Window",
+    },
+  ];
+
+  const groupAppliedFiltersPathKey = {
+    Components: "components",
+    "TRP Window": "trpWindows",
+  };
 
   function reloadData() {
-    const filterString = getAPIFormattedFilters(
-      props.code
-        ? {
-            ...appliedFilters,
-            locations: [...appliedFilters.locations, props.code],
-          }
-        : appliedFilters,
-      { search, sortBy }
-    );
+    const filterStr: string[] = [`locations=${props.code}`];
+    if (search.length > 0) {
+      filterStr.push(`q=${search}`);
+    }
+    if (sortBy.length > 0) {
+      filterStr.push(`sortBy=${sortBy}`);
+    }
+    if (appliedFilters.components.length > 0) {
+      filterStr.push(`components=${appliedFilters.components.join(",")}`);
+    }
+    if (appliedFilters.trpWindows.length > 0) {
+      filterStr.push(`trpWindows=${appliedFilters.trpWindows.join(",")}`);
+    }
+    if (cycle !== "All") {
+      filterStr.push(`cycles=${cycle}`);
+    }
     fetchData({
-      filterString: `${filterString}${
-        filterString.length > 0 ? "&" : ""
-      }view=table`,
+      filterString: filterStr.join("&"),
     });
   }
 
-  React.useEffect(() => reloadData(), [props.code, appliedFilters, sortBy]);
-
-  useUpdateEffect(() => setTableData(getTableData(data)), [data]);
-
-  const [,] = useDebounce(() => reloadData(), 500, [search]);
-
-  const [selectedView, setSelectedView] = React.useState("Table");
-
-  const [controlItems, setControlItems] = React.useState<{
-    views: ViewModel[];
-    aggregates: ViewModel[];
-  }>({
-    views: [{ label: "Table", value: "Table", link: location.pathname }],
-    aggregates: [{} as ViewModel],
-  });
+  React.useEffect(
+    () => reloadData(),
+    [props.code, appliedFilters, sortBy, cycle]
+  );
 
-  if (isLoading) {
-    return <PageLoader />;
-  }
+  const [,] = useDebounce(
+    () => {
+      if (search.length > 0) {
+        reloadData();
+      }
+    },
+    500,
+    [search]
+  );
 
   return (
     <>
@@ -114,6 +112,7 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
           position: relative;
         `}
       >
+        {isLoading && <PageLoader inLoader />}
         <div
           role="button"
           tabIndex={-1}
@@ -150,74 +149,63 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
         >
           <TriangleXSIcon />
         </div>
-        <ClickAwayListener
-          onClickAway={(event: React.MouseEvent<Document, MouseEvent>) => {
-            if (openToolboxPanel) {
-              setOpenToolboxPanel(!openToolboxPanel);
-            }
-          }}
-        >
-          <>
-            <Slide direction="left" in={openToolboxPanel}>
-              <div
-                css={`
-                  right: -8px;
-                  z-index: 4;
-                  width: 600px;
-
-                  position: absolute;
-                  background: #f5f5f7;
-                  height: 93%;
-                  visibility: visible !important;
-                  overflow-y: auto;
-
-                  box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.6);
-                  border-radius: 20px;
-                  ::-webkit-scrollbar {
-                    display: none;
-                  }
-                  @media (max-width: 767px) {
-                    width: 100vw;
-                    box-shadow: none;
-                    overflow-y: auto;
-                  }
-                `}
-              >
-                <div
-                  css={`
-                    width: 100%;
-
-                    display: flex;
-
-                    flex-direction: column;
-                  `}
-                >
-                  {}
-                  <React.Fragment>
-                    <ToolBoxPanelControlRow
-                      title="Views"
-                      selected={selectedView}
-                      options={controlItems.views}
-                      setSelected={setSelectedView}
-                    />
-
-                    <ToolBoxPanelFilters groups={fundingRequestFilterGroups} />
-                  </React.Fragment>
-                </div>
-              </div>
-            </Slide>
-          </>
-        </ClickAwayListener>
-
+        <Slide direction="left" in={openToolboxPanel}>
+          <div
+            css={`
+              z-index: 4;
+              right: -8px;
+              width: 600px;
+              height: 400px;
+              position: absolute;
+              background: #f5f5f7;
+              visibility: visible !important;
+              overflow-y: auto;
+
+              box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.6);
+              border-radius: 20px;
+              ::-webkit-scrollbar {
+                display: none;
+              }
+              @media (max-width: 767px) {
+                width: 100vw;
+                box-shadow: none;
+                overflow-y: auto;
+              }
+            `}
+          >
+            <div
+              css={`
+                width: 100%;
+
+                display: flex;
+
+                flex-direction: column;
+              `}
+            >
+              <ToolBoxPanelFilters
+                groups={filterGroups}
+                expandedGroup={expandedGroup}
+                appliedFilters={appliedFilters}
+                setExpandedGroup={setExpandedGroup}
+                setAppliedFilters={setAppliedFilters}
+                defaultAppliedFilters={{
+                  components: [],
+                  trpWindows: [],
+                }}
+                groupAppliedFiltersPathKey={groupAppliedFiltersPathKey}
+              />
+            </div>
+          </div>
+        </Slide>
         <Table
+          forceExpand
           search={search}
           sortBy={sortBy}
-          data={fundingRequestData}
-          isLoading={isLoading}
+          data={data}
           setSearch={setSearch}
           setSortBy={setSortBy}
           columns={fundingRequestColumns}
-          title="2023-2025"
+          title={cycle}
         />
       </div>
     </>
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
index 94785192b..b92448b03 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
@@ -1,15 +1,20 @@
-import { Box } from "@material-ui/core";
-import { FilterGroupProps } from "app/components/ToolBoxPanel/components/filters/data";
-import React, { useState } from "react";
-import { AllocationsModule } from "../allocations";
-
-import { chipcss, descriptioncss, vizcss } from "./style";
-import { AccessToFundingEligibilityTableWrapper } from "./eligibility/tableWrapper";
-import { AccessToFundingRequestTableWrapper } from "./fundingRequest/tableWrapper";
-import RadialChart from "./allocations/radialChart";
+import React from "react";
+import get from "lodash/get";
+import Box from "@material-ui/core/Box";
+import { useRecoilState } from "recoil";
+import { formatFinancialValue } from "app/utils/formatFinancialValue";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
-import { get } from "lodash";
-import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
+import { locationAccessToFundingCycleAtom } from "app/state/recoil/atoms";
+import { FilterGroupProps } from "app/components/ToolBoxPanel/components/filters/data";
+import { formatLargeAmountsWithPrefix } from "app/utils/getFinancialValueWithMetricPrefix";
+import RadialChart from "app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart";
+import {
+  vizcss,
+  chipcss,
+  descriptioncss,
+} from "app/modules/viz-module/sub-modules/accessToFunding/style";
+import { AccessToFundingRequestTableWrapper } from "app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper";
+import { AccessToFundingEligibilityTableWrapper } from "app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper";
 
 interface Props {
   code: string;
@@ -18,31 +23,58 @@ interface Props {
 }
 
 export default function LocationAccessToFundingWrapper(props: Props) {
-  const fetchData = useStoreActions((store) => store.Allocations.fetch);
-  const appliedFilters = useStoreState((state) => state.AppliedFiltersState);
+  const [cycle, setCycle] = useRecoilState(locationAccessToFundingCycleAtom);
 
-  const selectedPeriod = useStoreState(
-    (state) => state.ToolBoxPanelAllocationsPeriodState.value
+  const grantCycles = useStoreState(
+    (state) =>
+      get(
+        state.LocationAccessToFunding.GrantCycles,
+        "data.data",
+        []
+      ) as string[]
+  );
+  const locationInfoData = useStoreState((state) =>
+    get(state.LocationDetailInfo.data, "data[0]", {
+      id: "",
+      locationName: "",
+      disbursed: 0,
+      committed: 0,
+      signed: 0,
+      countries: [],
+      multicountries: [],
+      portfolioManager: "",
+      portfolioManagerEmail: "",
+    })
   );
 
+  // Allocation data
   const total = useStoreState(
     (state) => get(state.Allocations.data, "total", []) as number
   );
   const keys = useStoreState(
     (state) => get(state.Allocations.data, "keys", []) as string[]
   );
-
   const values = useStoreState(
     (state) => get(state.Allocations.data, "values", []) as number[]
   );
-
+  const fetchData = useStoreActions((store) => store.Allocations.fetch);
+  const isLoading = useStoreState((state) => state.Allocations.loading);
   const colors = ["#E4EBF8", "#C9CAD4", "#F1ECEC"];
 
+  React.useEffect(() => {
+    return () => {
+      setCycle("All");
+    };
+  }, []);
+
   React.useEffect(() => {
     fetchData({
-      filterString: "periods=2023 - 2025",
+      filterString: `locations=${props.code}&${
+        cycle !== "All" ? `periods=${cycle}` : ""
+      }`,
     });
-  }, [props.code, appliedFilters, selectedPeriod]);
+  }, [props.code, cycle]);
+
   return (
     <>
       <div css={descriptioncss}>
@@ -59,8 +91,7 @@ export default function LocationAccessToFundingWrapper(props: Props) {
           finished.
         </p>
       </div>
-      <Box height={26} />
-
+      <Box height={25} />
       <div>
         <p
           css={`
@@ -77,40 +108,49 @@ export default function LocationAccessToFundingWrapper(props: Props) {
             margin-top: 1rem;
           `}
         >
-          <div css={chipcss}>All</div>
-          <div css={chipcss}>2011/2013</div>
-          <div css={chipcss}>2014/2016</div>
-          <div css={chipcss}>2017/2019</div>
-          <div css={chipcss}>2020/2022</div>
-          <div css={chipcss}>2023/2025</div>
+          <div css={chipcss(cycle === "All")} onClick={() => setCycle("All")}>
+            All
+          </div>
+          {grantCycles.map((c) => (
+            <div key={c} css={chipcss(cycle === c)} onClick={() => setCycle(c)}>
+              {c.replace("-", "/")}
+            </div>
+          ))}
         </div>
       </div>
       <div css={vizcss}>
+        {props.code.length === 3 && (
+          <div>
+            <h4>
+              <b>Eligibility </b>
+            </h4>
+            <hr />
+            <AccessToFundingEligibilityTableWrapper
+              code={props.code}
+              codeParam={props.codeParam}
+            />
+          </div>
+        )}
         <div>
           <h4>
-            <b>Eligibility </b>
-          </h4>
-          <hr />
-          <AccessToFundingEligibilityTableWrapper
-            code={props.code}
-            codeParam={props.codeParam}
-          />
-        </div>
-
-        <div>
-          <h4>
-            <b> Allocation</b>
+            <b>Allocation</b>
           </h4>
           <hr />
           <div
             css={`
+              gap: 1rem;
               display: flex;
-              justify-content: space-between;
+              position: relative;
               align-items: center;
-              gap: 3rem;
+              justify-content: space-evenly;
             `}
           >
-            <RadialChart total={total} values={values} keys={keys} />
+            <RadialChart
+              total={total}
+              values={values}
+              keys={keys}
+              isLoading={isLoading}
+            />
             <div
               css={`
                 /* background: pink; */
@@ -125,7 +165,7 @@ export default function LocationAccessToFundingWrapper(props: Props) {
                     margin-bottom: 0px;
                   `}
                 >
-                  <b>{total} USD</b>
+                  <b>{formatFinancialValue(total)}</b>
                 </p>
                 <p
                   css={`
@@ -135,27 +175,27 @@ export default function LocationAccessToFundingWrapper(props: Props) {
                     margin-top: 5px;
                   `}
                 >
-                  Total funds allocated in Kenya for<b>2023/2025</b>{" "}
+                  Total funds allocated in {locationInfoData.locationName} for{" "}
+                  <b>{cycle}</b>
                 </p>
               </div>
               <div
                 css={`
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                  text-align: center;
-                  width: 90%;
-                  /* background: yellow; */
+                  gap: 2rem;
                   margin: auto;
+                  display: flex;
                   margin-top: 3rem;
+                  text-align: center;
+                  align-items: center;
+                  justify-content: center;
                 `}
               >
                 {values.map((val, index) => (
                   <div
+                    key={keys[index]}
                     css={`
                       display: flex;
                       align-items: center;
-
                       flex-direction: column;
                       justify-content: center;
                     `}
@@ -170,12 +210,16 @@ export default function LocationAccessToFundingWrapper(props: Props) {
                     />
                     <p
                       css={`
-                        width: 63%;
                         font-size: 18px;
                       `}
                     >
                       <b>
-                        {val} million {keys[index]} funds
+                        {formatLargeAmountsWithPrefix(val)
+                          .replace("$", "")
+                          .replace("bln", "billions")
+                          .replace("mln", "millions")}
+                        <br />
+                        {keys[index]} funds
                       </b>
                     </p>
                   </div>
@@ -184,7 +228,6 @@ export default function LocationAccessToFundingWrapper(props: Props) {
             </div>
           </div>
         </div>
-
         <div>
           <h4>
             <b>Funding Requests</b>
@@ -197,8 +240,7 @@ export default function LocationAccessToFundingWrapper(props: Props) {
           />
         </div>
       </div>
-
-      <Box height={26} />
+      <Box height={25} />
     </>
   );
 }
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts b/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts
index 4bd6c419b..2dc1f6eed 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts
@@ -1,16 +1,17 @@
 import { css } from "styled-components/macro";
 
-export const chipcss = css`
+export const chipcss = (active: boolean) => css`
   padding: 7px 24px;
   width: max-content;
   height: 32px;
-  background: #c7cdd1;
+  background: ${active ? "#252c34" : "#c7cdd1"};
   border-radius: 100px;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #ffffff;
   font-weight: 700;
+  font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
   cursor: pointer;
   &:hover {
     background-color: #252c34;
diff --git a/src/app/modules/viz-module/sub-modules/allocations/index.tsx b/src/app/modules/viz-module/sub-modules/allocations/index.tsx
index 86846c533..15ef46f24 100644
--- a/src/app/modules/viz-module/sub-modules/allocations/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/allocations/index.tsx
@@ -536,7 +536,6 @@ export function AllocationsModule(props: AllocationsModuleProps) {
         Allocations | {selectedPeriod}
       </div>
       <div css="font-weight: normal;">{formatFinancialValue(total)}</div>
-
       {vizComponent}
     </div>
   );
diff --git a/src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/location.tsx b/src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/location.tsx
index 9232e9e42..df3c57236 100644
--- a/src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/location.tsx
@@ -10,16 +10,21 @@ import { SimpleTableRow } from "app/components/Table/Simple/data";
 import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
 import { EligibilityTable } from "app/modules/viz-module/sub-modules/eligibility/table";
 import {
+  incomeLevels,
   diseaseBurdens,
   EligibilityScatterplotDataItemModel,
-  EligibilityScatterplotDataModel,
-  incomeLevels,
 } from "app/components/Charts/Eligibility/Scatterplot/data";
 
 function getTableData(
-  data: EligibilityScatterplotDataModel[]
+  data: EligibilityScatterplotDataItemModel[]
 ): SimpleTableRow[] {
-  return data.map((item: EligibilityScatterplotDataModel) => item.data);
+  return data.map((item: EligibilityScatterplotDataItemModel) => ({
+    year: item.x,
+    component: item.y,
+    incomeLevel: get(incomeLevels, `[${item.incomeLevel}]`, item.incomeLevel),
+    diseaseBurden: get(diseaseBurdens, `[${item.diseaseBurden}]`, ""),
+    status: item.eligibility,
+  }));
 }
 
 interface Props {
@@ -38,7 +43,7 @@ export function LocationEligibilityTableWrapper(props: Props) {
         state.EligibilityCountry.data,
         "data",
         []
-      ) as EligibilityScatterplotDataModel[]
+      ) as EligibilityScatterplotDataItemModel[]
   );
 
   const [page, setPage] = React.useState(0);
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts
index c9d48ddd0..1b888fb19 100644
--- a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts
@@ -1,75 +1,3 @@
-export const fundingRequestData = [
-  {
-    children: [
-      {
-        id: "743843-R",
-        date: "23 March 2023",
-        component: "HIV",
-        approach: "Program Continuation",
-        window: "b2",
-        outcome: "Grant Making",
-        gac: "OCT 20",
-        board: "Nov 20",
-        link: "link",
-
-        children: [
-          {
-            grant1: "AFG-H-MOH (2021/09/15 - 2021-12-31)",
-          },
-        ],
-      },
-    ],
-    name: "Algeria",
-    status: "",
-  },
-  {
-    children: [
-      {
-        id: "743843-R",
-        date: "23 March 2023",
-        component: "HIV",
-        approach: "Program Continuation",
-        window: "b2",
-        outcome: "Grant Making",
-        gac: "OCT 20",
-        board: "Nov 20",
-        link: "link",
-
-        children: [
-          {
-            grant1: "AFG-H-MOH (2021/09/15 - 2021-12-31)",
-          },
-        ],
-      },
-    ],
-    name: "Kenya",
-    status: "",
-  },
-  {
-    children: [
-      {
-        id: "743843-R",
-        date: "23 March 2023",
-        component: "HIV",
-        approach: "Program Continuation",
-        window: "b2",
-        outcome: "Grant Making",
-        gac: "OCT 20",
-        board: "Nov 20",
-        link: "link",
-
-        children: [
-          {
-            grant1: "AFG-H-MOH (2021/09/15 - 2021-12-31)",
-          },
-        ],
-      },
-    ],
-    name: "Zambia",
-    status: "",
-  },
-];
-
 export const fundingRequestColumns = [
   {
     key: "name",
@@ -88,83 +16,34 @@ export const fundingRequestColumns = [
       {
         key: "date",
         name: "",
-        col: [
-          {
-            key: "grant1",
-            name: "",
-          },
-        ],
       },
       {
         key: "component",
         name: "",
-        col: [
-          {
-            key: "grant1",
-            name: "",
-          },
-        ],
       },
       {
         key: "approach",
         name: "",
-        col: [
-          {
-            key: "grant1",
-            name: "",
-          },
-        ],
       },
       {
         key: "window",
         name: "",
-        col: [
-          {
-            key: "grant1",
-            name: "",
-          },
-        ],
       },
       {
         key: "outcome",
         name: "",
-        col: [
-          {
-            key: "grant1",
-            name: "",
-          },
-        ],
       },
       {
         key: "gac",
         name: "",
-        col: [
-          {
-            key: "grant1",
-            name: "",
-          },
-        ],
       },
       {
         key: "board",
         name: "",
-        col: [
-          {
-            key: "grant1",
-            name: "",
-          },
-        ],
       },
-
       {
-        key: "link",
+        key: "linkk",
         name: "",
-        col: [
-          {
-            key: "grant1",
-            name: "",
-          },
-        ],
       },
     ],
   },
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
index 00acc1dc2..d894152e7 100644
--- a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
@@ -1,94 +1,52 @@
 /* third-party */
 import React from "react";
 import get from "lodash/get";
+import { useDebounce, useTitle } from "react-use";
 import TablePagination from "@material-ui/core/TablePagination";
-import { useDebounce, useTitle, useUpdateEffect } from "react-use";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 /* project */
 import { InfoIcon } from "app/assets/icons/Info";
 import { PageLoader } from "app/modules/common/page-loader";
 import { SimpleTableRow } from "app/components/Table/Simple/data";
 import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
-import { DotChartModel } from "app/components/Charts/Eligibility/DotChart/data";
-
-import { fundingRequestColumns, fundingRequestData } from "./data";
-import { Table } from "..";
-
-function getTableData(data: DotChartModel[]): SimpleTableRow[] {
-  const updatedTableData: SimpleTableRow[] = [];
-  data.forEach((item: DotChartModel) => {
-    updatedTableData.push({
-      name: item.name,
-      status: "",
-      children: item.items.map((subItem: any) => ({
-        name: subItem.name,
-        status: subItem.status,
-      })),
-    });
-  });
-  return updatedTableData;
-}
+import { Table } from "app/modules/viz-module/sub-modules/fundingRequests/table";
+import { fundingRequestColumns } from "app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data";
 
 export function GenericFundingRequestWrapper() {
-  useTitle("The Data Explorer - Funding Request");
+  useTitle("The Data Explorer - Funding Requests");
 
   const [search, setSearch] = React.useState("");
-  const [sortBy, setSortBy] = React.useState("");
-
-  const selectedYear = useStoreState(
-    (state) => state.ToolBoxPanelEligibilityYearState.value
-  );
-
-  const fetchYearOptionsData = useStoreActions(
-    (store) => store.EligibilityYears.fetch
-  );
+  const [sortBy, setSortBy] = React.useState("name ASC");
 
   const data = useStoreState(
-    (state) => get(state.Eligibility.data, "data", []) as DotChartModel[]
+    (state) =>
+      get(state.FundingRequestsTable.data, "data", []) as SimpleTableRow[]
   );
 
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(10);
-  const [tableData, setTableData] = React.useState<SimpleTableRow[]>(
-    getTableData(data)
-  );
 
-  // aggregateBy control const
-  const aggregateBy = useStoreState(
-    (state) =>
-      (state.ToolBoxPanelAggregateByState.value.length > 0
-        ? state.ToolBoxPanelAggregateByState.value
-        : "componentName") as "componentName" | "geographicAreaName"
+  const fetchData = useStoreActions(
+    (store) => store.FundingRequestsTable.fetch
   );
 
-  const fetchData = useStoreActions((store) => store.Eligibility.fetch);
-
-  const isLoading = useStoreState((state) => state.Eligibility.loading);
+  const isLoading = useStoreState(
+    (state) => state.FundingRequestsTable.loading
+  );
 
   const appliedFilters = useStoreState((state) => state.AppliedFiltersState);
 
-  React.useEffect(() => {
-    fetchYearOptionsData({});
-  }, []);
-
   function reloadData() {
     const filterString = getAPIFormattedFilters(appliedFilters, {
       search,
       sortBy,
     });
     fetchData({
-      filterString: `aggregateBy=${aggregateBy}&periods=${selectedYear}${
-        filterString.length > 0 ? `&${filterString}` : ""
-      }`,
+      filterString: `${filterString.length > 0 ? `&${filterString}` : ""}`,
     });
   }
 
-  React.useEffect(
-    () => reloadData(),
-    [aggregateBy, appliedFilters, selectedYear, sortBy]
-  );
-
-  useUpdateEffect(() => setTableData(getTableData(data)), [data]);
+  React.useEffect(() => reloadData(), [appliedFilters, sortBy]);
 
   const [,] = useDebounce(() => reloadData(), 500, [search]);
 
@@ -131,6 +89,7 @@ export function GenericFundingRequestWrapper() {
           css={`
             display: flex;
             margin-left: 10px;
+            visibility: hidden;
           `}
         >
           <InfoIcon />
@@ -138,9 +97,9 @@ export function GenericFundingRequestWrapper() {
       </div>
       <div css="width: 100%;height: 25px;" />
       <Table
+        data={data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)}
         search={search}
         sortBy={sortBy}
-        data={fundingRequestData}
         isLoading={isLoading}
         setSearch={setSearch}
         setSortBy={setSortBy}
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/location.tsx b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/location.tsx
deleted file mode 100644
index 4ff25f619..000000000
--- a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/location.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-/* third-party */
-import React from "react";
-import get from "lodash/get";
-import TablePagination from "@material-ui/core/TablePagination";
-import { useDebounce, useTitle, useUpdateEffect } from "react-use";
-import { useStoreActions, useStoreState } from "app/state/store/hooks";
-/* project */
-import { PageLoader } from "app/modules/common/page-loader";
-import { SimpleTableRow } from "app/components/Table/Simple/data";
-import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
-import { EligibilityTable } from "app/modules/viz-module/sub-modules/eligibility/table";
-import {
-  diseaseBurdens,
-  EligibilityScatterplotDataItemModel,
-  incomeLevels,
-} from "app/components/Charts/Eligibility/Scatterplot/data";
-
-import { fundingRequestColumns, fundingRequestData } from "./data";
-import { Table } from "..";
-
-function getTableData(
-  data: EligibilityScatterplotDataItemModel[]
-): SimpleTableRow[] {
-  return data.map((item: EligibilityScatterplotDataItemModel) => ({
-    year: item.x,
-    component: item.y,
-    incomeLevel: get(incomeLevels, `[${item.incomeLevel}]`, item.incomeLevel),
-    diseaseBurden: get(diseaseBurdens, `[${item.diseaseBurden}]`, ""),
-    status: item.eligibility,
-  }));
-}
-
-interface Props {
-  code: string;
-}
-
-export function LocationFundingRequestTableWrapper(props: Props) {
-  useTitle("The Data Explorer - Location Eligibility");
-
-  const [search, setSearch] = React.useState("");
-  const [sortBy, setSortBy] = React.useState("");
-
-  const data = useStoreState(
-    (state) =>
-      get(
-        state.EligibilityCountry.data,
-        "data",
-        []
-      ) as EligibilityScatterplotDataItemModel[]
-  );
-
-  const [page, setPage] = React.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React.useState(10);
-  const [tableData, setTableData] = React.useState<SimpleTableRow[]>(
-    getTableData(data)
-  );
-
-  const fetchData = useStoreActions((store) => store.EligibilityCountry.fetch);
-
-  const isLoading = useStoreState((state) => state.EligibilityCountry.loading);
-
-  const appliedFilters = useStoreState((state) => state.AppliedFiltersState);
-
-  function reloadData() {
-    const filterString = getAPIFormattedFilters(
-      props.code
-        ? {
-            ...appliedFilters,
-            locations: [...appliedFilters.locations, props.code],
-          }
-        : appliedFilters,
-      { search, sortBy }
-    );
-    fetchData({
-      filterString: `${filterString}${
-        filterString.length > 0 ? "&" : ""
-      }view=table`,
-    });
-  }
-
-  React.useEffect(() => reloadData(), [props.code, appliedFilters, sortBy]);
-
-  useUpdateEffect(() => setTableData(getTableData(data)), [data]);
-
-  const [,] = useDebounce(() => reloadData(), 500, [search]);
-
-  const handleChangePage = (
-    _event: React.MouseEvent<HTMLButtonElement> | null,
-    newPage: number
-  ) => {
-    setPage(newPage);
-  };
-
-  const handleChangeRowsPerPage = (
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    setRowsPerPage(parseInt(event.target.value, 10));
-    setPage(0);
-  };
-
-  if (isLoading) {
-    return <PageLoader />;
-  }
-
-  return (
-    <>
-      <Table
-        search={search}
-        sortBy={sortBy}
-        data={fundingRequestData}
-        isLoading={isLoading}
-        setSearch={setSearch}
-        setSortBy={setSortBy}
-        columns={fundingRequestColumns}
-      />
-
-      <TablePagination
-        page={page}
-        component="div"
-        count={data.length}
-        rowsPerPage={rowsPerPage}
-        onPageChange={handleChangePage}
-        onRowsPerPageChange={handleChangeRowsPerPage}
-        css={`
-          @media (min-width: 768px) {
-            .MuiTablePagination-toolbar {
-              padding-left: 40px;
-            }
-            .MuiTablePagination-spacer {
-              display: none;
-            }
-          }
-        `}
-      />
-    </>
-  );
-}
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/index.tsx b/src/app/modules/viz-module/sub-modules/fundingRequests/table/index.tsx
index e3bee88e7..3695e7836 100644
--- a/src/app/modules/viz-module/sub-modules/fundingRequests/table/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/index.tsx
@@ -1,15 +1,9 @@
-/* third-party */
 import React from "react";
-/* project */
-import { SimpleTable } from "app/components/Table/Simple";
 import { PageLoader } from "app/modules/common/page-loader";
+import { SimpleTableRow } from "app/components/Table/Simple/data";
 import {
-  SimpleTableRow,
-  SimpleTableColumn,
-} from "app/components/Table/Simple/data";
-import {
-  FundingRequestTable,
   FundingTableColumn,
+  FundingRequestTable,
 } from "app/components/Table/funding";
 
 interface FundingRequestTableProps {
@@ -29,15 +23,14 @@ export function Table(props: FundingRequestTableProps) {
 
   return (
     <FundingRequestTable
+      title=""
+      paddingLeft={2}
+      rows={props.data}
       search={props.search}
       sortBy={props.sortBy}
-      light
-      rows={props.data}
-      title="Funding Request"
       columns={props.columns}
       onSearchChange={props.setSearch}
       onSortByChange={props.setSortBy}
-      paddingLeft={2}
     />
   );
 }
diff --git a/src/app/state/api/action-reducers/locationDetail/accessToFunding.ts b/src/app/state/api/action-reducers/locationDetail/accessToFunding.ts
new file mode 100644
index 000000000..563e7b959
--- /dev/null
+++ b/src/app/state/api/action-reducers/locationDetail/accessToFunding.ts
@@ -0,0 +1,20 @@
+import { APIModel } from "app/state/api";
+import { ApiCallModel } from "app/state/api/interfaces";
+
+export const EligibilityLocation: ApiCallModel = {
+  ...APIModel(`${process.env.REACT_APP_API}/eligibility/location/table`),
+};
+
+export const FundingRequestsTable: ApiCallModel = {
+  ...APIModel(`${process.env.REACT_APP_API}/funding-requests/table`),
+};
+
+export const GrantCycles: ApiCallModel = {
+  ...APIModel(`${process.env.REACT_APP_API}/grant-cycles`),
+};
+
+export const TRPWindowCodelist: ApiCallModel = {
+  ...APIModel(
+    `${process.env.REACT_APP_API}/funding-requests/trp-window/codelist`
+  ),
+};
diff --git a/src/app/state/api/action-reducers/locationDetail/grantCycles.ts b/src/app/state/api/action-reducers/locationDetail/grantCycles.ts
new file mode 100644
index 000000000..f868d9063
--- /dev/null
+++ b/src/app/state/api/action-reducers/locationDetail/grantCycles.ts
@@ -0,0 +1,8 @@
+import { APIModel } from "app/state/api";
+import { ApiCallModel } from "app/state/api/interfaces";
+
+const GrantCycles: ApiCallModel = {
+  ...APIModel(`${process.env.REACT_APP_API}/grant-cycles`),
+};
+
+export default GrantCycles;
diff --git a/src/app/state/api/action-reducers/sync/filters/index.ts b/src/app/state/api/action-reducers/sync/filters/index.ts
index dafecead3..0dad24f4c 100644
--- a/src/app/state/api/action-reducers/sync/filters/index.ts
+++ b/src/app/state/api/action-reducers/sync/filters/index.ts
@@ -13,6 +13,7 @@ export const defaultAppliedFilters: AppliedFiltersModel = {
   donors: [] as string[],
   donorCategories: [] as string[],
   donorSubCategories: [] as string[],
+  trpWindows: [] as string[],
 };
 
 export interface AppliedFiltersModel {
@@ -27,6 +28,7 @@ export interface AppliedFiltersModel {
   donors: string[];
   donorCategories: string[];
   donorSubCategories: string[];
+  trpWindows: string[];
 }
 
 export interface AppliedFiltersStateModel {
@@ -52,6 +54,8 @@ export interface AppliedFiltersStateModel {
   setDonorCategories: Action<AppliedFiltersStateModel, string[]>;
   donorSubCategories: string[];
   setDonorSubCategories: Action<AppliedFiltersStateModel, string[]>;
+  trpWindows: string[];
+  setTrpWindows: Action<AppliedFiltersStateModel, string[]>;
   setAll: Action<AppliedFiltersStateModel, AppliedFiltersModel>;
   actionDefaultNone: Action<AppliedFiltersStateModel, string[]>;
   appliedFiltersCount: number;
@@ -113,6 +117,11 @@ export const AppliedFiltersState: AppliedFiltersStateModel = {
     state.donorSubCategories = payload;
     state.appliedFiltersCount += payload.length;
   }),
+  trpWindows: [],
+  setTrpWindows: action((state, payload: string[]) => {
+    state.trpWindows = payload;
+    state.appliedFiltersCount += payload.length;
+  }),
   setAll: action((state, payload: AppliedFiltersModel) => {
     state.locations = payload.locations;
     state.components = payload.components;
@@ -124,6 +133,7 @@ export const AppliedFiltersState: AppliedFiltersStateModel = {
     state.donors = payload.donors;
     state.donorCategories = payload.donorCategories;
     state.donorSubCategories = payload.donorSubCategories;
+    state.trpWindows = payload.trpWindows;
     state.appliedFiltersCount =
       payload.locations.length +
       payload.components.length +
@@ -133,7 +143,9 @@ export const AppliedFiltersState: AppliedFiltersStateModel = {
       payload.status.length +
       payload.replenishmentPeriods.length +
       payload.donors.length +
-      payload.donorCategories.length;
+      payload.donorCategories.length +
+      payload.donorSubCategories.length +
+      payload.trpWindows.length;
   }),
   actionDefaultNone: action((state, payload: string[]) => {
     console.log("Incorrect filter type");
diff --git a/src/app/state/api/action-reducers/viz/eligibility.ts b/src/app/state/api/action-reducers/viz/eligibility.ts
index 2b71d78c9..a8a13aabe 100644
--- a/src/app/state/api/action-reducers/viz/eligibility.ts
+++ b/src/app/state/api/action-reducers/viz/eligibility.ts
@@ -14,3 +14,13 @@ export const EligibilityYears: ApiCallModel = {
 export const EligibilityTable: ApiCallModel = {
   ...APIModel(`${process.env.REACT_APP_API}/eligibility`),
 };
+
+export const EligibilityStatusCodelist: ApiCallModel = {
+  ...APIModel(`${process.env.REACT_APP_API}/eligibility/status/codelist`),
+};
+
+export const EligibilityDiseaseBurdenCodelist: ApiCallModel = {
+  ...APIModel(
+    `${process.env.REACT_APP_API}/eligibility/disease-burden/codelist`
+  ),
+};
diff --git a/src/app/state/api/action-reducers/viz/fundingRequests.ts b/src/app/state/api/action-reducers/viz/fundingRequests.ts
new file mode 100644
index 000000000..ddcf8a118
--- /dev/null
+++ b/src/app/state/api/action-reducers/viz/fundingRequests.ts
@@ -0,0 +1,6 @@
+import { APIModel } from "app/state/api";
+import { ApiCallModel } from "app/state/api/interfaces";
+
+export const FundingRequestsTableGeneric: ApiCallModel = {
+  ...APIModel(`${process.env.REACT_APP_API}/funding-requests/table`),
+};
diff --git a/src/app/state/api/interfaces/index.ts b/src/app/state/api/interfaces/index.ts
index ad6d7f362..2775740c2 100644
--- a/src/app/state/api/interfaces/index.ts
+++ b/src/app/state/api/interfaces/index.ts
@@ -149,6 +149,8 @@ export interface StoreModel {
   Eligibility: ApiCallModel;
   EligibilityTable: ApiCallModel;
   EligibilityYears: ApiCallModel;
+  EligibilityStatusCodelist: ApiCallModel;
+  EligibilityDiseaseBurdenCodelist: ApiCallModel;
   BudgetsFlow: ApiCallModel;
   BudgetsFlowDrilldownLevel1: ApiCallModel;
   BudgetsFlowDrilldownLevel2: ApiCallModel;
@@ -179,6 +181,7 @@ export interface StoreModel {
   ResultsList: ApiCallModel;
   ResultsStats: ApiCallModel;
   ResultsYears: ApiCallModel;
+  FundingRequestsTable: ApiCallModel;
   // global search
   GlobalSearch: ApiCallModel;
   // grant detail api
@@ -215,6 +218,12 @@ export interface StoreModel {
   LocationDetailBudgetsTimeCycleDrilldownLevel1: ApiCallModel;
   LocationDetailBudgetsTimeCycleDrilldownLevel2: ApiCallModel;
   LocationGrants: ApiCallModel;
+  LocationAccessToFunding: {
+    EligibilityTable: ApiCallModel;
+    FundingRequestsTable: ApiCallModel;
+    GrantCycles: ApiCallModel;
+  };
+  FundingRequestsTRPWindowCodelist: ApiCallModel;
   // partner detail api
   PartnerDetailInfo: ApiCallModel;
   PartnerDetailDisbursementsTreemap: ApiCallModel;
diff --git a/src/app/state/recoil/atoms/index.ts b/src/app/state/recoil/atoms/index.ts
index 7147d0fba..7846c99b8 100644
--- a/src/app/state/recoil/atoms/index.ts
+++ b/src/app/state/recoil/atoms/index.ts
@@ -64,3 +64,9 @@ export const selectedViewAtom = atom<string>({
   default: "",
   effects_UNSTABLE: [persistAtom],
 });
+
+export const locationAccessToFundingCycleAtom = atom<string>({
+  key: "locationAccessToFundingCycleAtom",
+  default: "All",
+  effects_UNSTABLE: [persistAtom],
+});
diff --git a/src/app/state/store/index.ts b/src/app/state/store/index.ts
index 4c298d690..051f4fbea 100644
--- a/src/app/state/store/index.ts
+++ b/src/app/state/store/index.ts
@@ -31,6 +31,8 @@ import BudgetsFlow, {
   BudgetsFlowDrilldownLevel2,
 } from "app/state/api/action-reducers/viz/budgetsFlow";
 import Eligibility, {
+  EligibilityDiseaseBurdenCodelist,
+  EligibilityStatusCodelist,
   EligibilityTable,
   EligibilityYears,
 } from "app/state/api/action-reducers/viz/eligibility";
@@ -168,6 +170,13 @@ import {
   DataPathStepsState,
 } from "../api/action-reducers/sync/dataPath";
 import PledgesContributionsTable from "../api/action-reducers/viz/pledgesContributionsTable";
+import {
+  EligibilityLocation,
+  FundingRequestsTable,
+  GrantCycles,
+  TRPWindowCodelist,
+} from "../api/action-reducers/locationDetail/accessToFunding";
+import { FundingRequestsTableGeneric } from "../api/action-reducers/viz/fundingRequests";
 
 const storeContent: StoreModel = {
   // data viz api
@@ -185,6 +194,8 @@ const storeContent: StoreModel = {
   Eligibility: persist(Eligibility),
   EligibilityTable: persist(EligibilityTable),
   EligibilityYears: persist(EligibilityYears),
+  EligibilityStatusCodelist: persist(EligibilityStatusCodelist),
+  EligibilityDiseaseBurdenCodelist: persist(EligibilityDiseaseBurdenCodelist),
   BudgetsGeomap: persist(BudgetsGeomap),
   BudgetsMCGeomap: persist(BudgetsMCGeomap),
   BudgetsTimeCycle: persist(BudgetsTimeCycle),
@@ -214,6 +225,7 @@ const storeContent: StoreModel = {
   ResultsList: persist(ResultsList),
   ResultsStats: persist(ResultsStats),
   ResultsYears: persist(ResultsYears),
+  FundingRequestsTable: persist(FundingRequestsTableGeneric),
   // global search
   GlobalSearch: persist(GlobalSearch),
   // grant detail api
@@ -270,6 +282,12 @@ const storeContent: StoreModel = {
     LocationDetailBudgetsTimeCycleDrilldownLevel1
   ),
   LocationGrants: persist(LocationGrants),
+  LocationAccessToFunding: {
+    EligibilityTable: persist(EligibilityLocation),
+    FundingRequestsTable: persist(FundingRequestsTable),
+    GrantCycles: persist(GrantCycles),
+  },
+  FundingRequestsTRPWindowCodelist: persist(TRPWindowCodelist),
   // partner detail api
   PartnerDetailInfo: persist(PartnerDetailInfo),
   PartnerDetailDisbursementsTreemap: persist(PartnerDetailDisbursementsTreemap),
diff --git a/src/app/theme/index.ts b/src/app/theme/index.ts
index b3b8242ba..88c708aec 100644
--- a/src/app/theme/index.ts
+++ b/src/app/theme/index.ts
@@ -663,7 +663,7 @@ export const appColors = {
     ROW_TEXT_HOVER_COLOR: WHITE,
     ROW_TEXT_COLOR: PRIMARY_COLOR_1,
     DOWNLOAD_ICON_COLOR: PRIMARY_COLOR_2,
-    TOOLBAR_BACKGROUND_COLOR: "#dfe3e5",
+    TOOLBAR_BACKGROUND_COLOR: SECONDARY_COLOR_10,
     TOOLBAR_ICON_BUTTON_HOVER_BACKGROUND_COLOR: PRIMARY_COLOR_1,
     TOOLBAR_ICON_BUTTON_HOVER_COLOR: WHITE,
     TOOLBAR_SEARCH_TEXT_COLOR: PRIMARY_COLOR_1,
diff --git a/src/app/utils/exportCSV.ts b/src/app/utils/exportCSV.ts
index 70664ab1f..525e245bd 100644
--- a/src/app/utils/exportCSV.ts
+++ b/src/app/utils/exportCSV.ts
@@ -21,7 +21,8 @@ export function exportCSV(
     donorMapView: string;
     isDetail: boolean;
     resultsSelectedYear: string;
-  }
+  },
+  multiVizPageDataKey?: string
 ): CommonPropTypes {
   const csvData: any[] = [];
   const isComponent = options.selectedAggregation === "componentName";
@@ -749,6 +750,71 @@ export function exportCSV(
           { label: "Status", key: "status" },
         ],
       };
+    case "/viz/access-to-funding":
+      if (multiVizPageDataKey === "eligibility") {
+        data.forEach((item: any) => {
+          item.children.forEach((subItem: any) => {
+            csvData.push({
+              year: item.year,
+              component: subItem.component,
+              status: subItem.eligibilityStatus,
+              diseaseBurden: subItem.diseaseBurden,
+              incomeLevel: item.incomeLevel,
+            });
+          });
+        });
+        return {
+          data: csvData,
+          filename: "access-to-funding-eligibility.csv",
+          headers: [
+            { label: "Year", key: "year" },
+            { label: "Component", key: "component" },
+            { label: "Status", key: "status" },
+            { label: "Disease Burden", key: "diseaseBurden" },
+            { label: "Income Level", key: "incomeLevel" },
+          ],
+        };
+      }
+      if (multiVizPageDataKey === "fundingRequest") {
+        data.forEach((item: any) => {
+          item.children.forEach((subItem: any) => {
+            subItem.children.forEach((subSubItem: any) => {
+              csvData.push({
+                location: item.name,
+                component: subItem.component,
+                date: subItem.approach,
+                approach: subItem.approach,
+                window: subItem.window,
+                outcome: subItem.outcome,
+                gac: subItem.gac,
+                board: subItem.board,
+                grant: subSubItem.grant1,
+              });
+            });
+          });
+        });
+        return {
+          data: csvData,
+          filename: "access-to-funding-funding-requests.csv",
+          headers: [
+            { label: "Location", key: "location" },
+            { label: "Application ID", key: "id" },
+            { label: "Submission date", key: "date" },
+            { label: "Component", key: "component" },
+            { label: "Approach", key: "approach" },
+            { label: "TRP Window", key: "window" },
+            { label: "TRP Outcome", key: "outcome" },
+            { label: "GAC Meeting", key: "gac" },
+            { label: "Board approval", key: "board" },
+            { label: "Grant Number (Start date - End date)", key: "grant" },
+          ],
+        };
+      }
+      return {
+        data: [],
+        filename: "empty.csv",
+        headers: [],
+      };
     case "/viz/pledges-contributions/time-cycle":
       data.forEach((item: any) => {
         csvData.push({
diff --git a/src/app/utils/getAPIFormattedFilters.ts b/src/app/utils/getAPIFormattedFilters.ts
index eed3f4376..29921bdc0 100644
--- a/src/app/utils/getAPIFormattedFilters.ts
+++ b/src/app/utils/getAPIFormattedFilters.ts
@@ -71,6 +71,9 @@ export function getAPIFormattedFilters(
       `periods=${appliedFilters.replenishmentPeriods.join(",")}`
     );
   }
+  if (appliedFilters.trpWindows.length > 0) {
+    filterArray.push(`trpWindows=${appliedFilters.trpWindows.join(",")}`);
+  }
 
   return filterArray.join("&");
 }

From 0f0f65a5dce7122e4c1c77a1a45511d046051454 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Fri, 31 Mar 2023 12:59:22 +0300
Subject: [PATCH 11/69] chore: remove logs

---
 .../sub-modules/accessToFunding/allocations/radialChart.tsx    | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx
index ba708c110..26d9ab00d 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx
@@ -27,7 +27,6 @@ export default function RadialChart(props: Props) {
   }>(getKeysPercentages(props.total, props.values));
 
   React.useEffect(() => {
-    console.log("RadialChart props", props);
     setKeysPercentagesColors(getKeysPercentages(props.total, props.values));
   }, [props.total, props.values]);
 
@@ -121,8 +120,6 @@ export default function RadialChart(props: Props) {
     ],
   };
 
-  console.log("RadialChart keysPercentagesColors", keysPercentagesColors);
-
   return (
     <>
       <div

From 22670629bce1166aeb88fecf7bc5e64dc0d82510 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Wed, 19 Apr 2023 14:00:19 +0300
Subject: [PATCH 12/69] feat: location page contact name as a link

---
 .../country-detail-module/sub-modules/overview/index.tsx  | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/app/modules/country-detail-module/sub-modules/overview/index.tsx b/src/app/modules/country-detail-module/sub-modules/overview/index.tsx
index 5139c6c05..79d49309e 100644
--- a/src/app/modules/country-detail-module/sub-modules/overview/index.tsx
+++ b/src/app/modules/country-detail-module/sub-modules/overview/index.tsx
@@ -173,7 +173,13 @@ export function LocationDetailOverviewModule(props: Props) {
                             margin-bottom: 8px;
                           `}
                         >
-                          <b>{c.name}</b>
+                          {c.url ? (
+                            <a href={c.url} target="_blank">
+                              <b>{c.name}</b>
+                            </a>
+                          ) : (
+                            <b>{c.name}</b>
+                          )}
                         </div>
                         <div
                           css={`

From ceeec29897346908b8c70a114f29662c9336adf2 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Tue, 25 Apr 2023 15:27:38 +0300
Subject: [PATCH 13/69] fix: location allocation chart initial render

---
 .../allocations/radialChart.tsx               | 86 ++++++++++++-------
 1 file changed, 53 insertions(+), 33 deletions(-)

diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx
index 26d9ab00d..b82008830 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx
@@ -30,6 +30,29 @@ export default function RadialChart(props: Props) {
     setKeysPercentagesColors(getKeysPercentages(props.total, props.values));
   }, [props.total, props.values]);
 
+  if (props.isLoading) {
+    return (
+      <div
+        css={`
+          @media (max-width: 767px) {
+            z-index: 2;
+            width: 100%;
+            position: relative;
+            padding-bottom: 100px;
+
+            #mobile-tooltip-container {
+              top: 30vh;
+              left: 16px;
+              width: calc(100% - 32px);
+            }
+          }
+        `}
+      >
+        <PageLoader inLoader />
+      </div>
+    );
+  }
+
   const options: ApexOptions = {
     plotOptions: {
       radialBar: {
@@ -121,41 +144,38 @@ export default function RadialChart(props: Props) {
   };
 
   return (
-    <>
-      <div
-        css={`
-          @media (max-width: 767px) {
-            z-index: 2;
-            width: 100%;
-            position: relative;
-            padding-bottom: 100px;
+    <div
+      css={`
+        @media (max-width: 767px) {
+          z-index: 2;
+          width: 100%;
+          position: relative;
+          padding-bottom: 100px;
 
-            #mobile-tooltip-container {
-              top: 30vh;
-              left: 16px;
-              width: calc(100% - 32px);
-            }
+          #mobile-tooltip-container {
+            top: 30vh;
+            left: 16px;
+            width: calc(100% - 32px);
           }
-        `}
-      >
-        {props.isLoading && <PageLoader inLoader />}
-        <div ref={ref} id="allocations-radial-bar">
-          {props.total === 0 ? (
-            <div css="display: flex;justify-content: center;">
-              <NoDataLabel />
-              <NoDataAllocations />
-            </div>
-          ) : (
-            <ReactApexCharts
-              type="radialBar"
-              options={options}
-              height={isMobile ? 400 : 580}
-              series={keysPercentagesColors.percentages}
-              width={480}
-            />
-          )}
-        </div>
+        }
+      `}
+    >
+      <div ref={ref} id="allocations-radial-bar">
+        {props.total === 0 ? (
+          <div css="display: flex;justify-content: center;">
+            <NoDataLabel />
+            <NoDataAllocations />
+          </div>
+        ) : (
+          <ReactApexCharts
+            type="radialBar"
+            options={options}
+            height={isMobile ? 400 : 580}
+            series={keysPercentagesColors.percentages}
+            width={480}
+          />
+        )}
       </div>
-    </>
+    </div>
   );
 }

From 7e02b29c09c372d92a8ff3eae04cecd89e180b12 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Wed, 26 Apr 2023 14:25:38 +0300
Subject: [PATCH 14/69] feat: funding requests table additions

---
 src/app/components/Table/funding/index.tsx    | 125 +++++++++++++++---
 src/app/hooks/useCMSData.tsx                  |  11 ++
 .../table/data-wrappers/data.ts               |  49 ++++---
 .../cms/modulesFundingRequests.ts             |  10 ++
 src/app/state/api/interfaces/cms.ts           |   6 +
 src/app/state/api/interfaces/index.ts         |   3 +
 src/app/state/store/index.ts                  |   2 +
 7 files changed, 166 insertions(+), 40 deletions(-)
 create mode 100644 src/app/state/api/action-reducers/cms/modulesFundingRequests.ts

diff --git a/src/app/components/Table/funding/index.tsx b/src/app/components/Table/funding/index.tsx
index 848385c02..47fd9524c 100644
--- a/src/app/components/Table/funding/index.tsx
+++ b/src/app/components/Table/funding/index.tsx
@@ -3,25 +3,29 @@ import { v4 } from "uuid";
 import get from "lodash/get";
 import find from "lodash/find";
 import filter from "lodash/filter";
+import { appColors } from "app/theme";
+import { Link } from "react-router-dom";
+import { useUpdateEffect } from "react-use";
 import Table from "@material-ui/core/Table";
 import Button from "@material-ui/core/Button";
 import Collapse from "@material-ui/core/Collapse";
 import TableRow from "@material-ui/core/TableRow";
+import { useCMSData } from "app/hooks/useCMSData";
 import TableHead from "@material-ui/core/TableHead";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import { makeStyles } from "@material-ui/core/styles";
-import IconButton from "@material-ui/core/IconButton";
 import ArrowUpward from "@material-ui/icons/ArrowUpward";
 import ArrowDownward from "@material-ui/icons/ArrowDownward";
 import { TriangleXSIcon } from "app/assets/icons/TriangleXS";
 import TableContainer from "@material-ui/core/TableContainer";
 import { tablecell } from "app/components/Table/Simple/styles";
-import CloudDownloadIcon from "@material-ui/icons/CloudDownload";
 import { TableToolbar } from "app/components/Table/Expandable/Toolbar";
 import { TableToolbarCols } from "app/components/Table/Expandable/data";
-import { cellData } from "app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data";
-import { useUpdateEffect } from "react-use";
+import {
+  cellData,
+  cellData2,
+} from "app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data";
 
 export interface FundingTableRow {
   [key: string]: any;
@@ -64,17 +68,68 @@ function Row(props: {
   const classes = useRowStyles();
   const [open, setOpen] = React.useState(false);
 
-  const firstColumnWidth = props.columns?.length > 3 ? "30%" : "";
-  const columnWidthCalc = `${props.columns?.length > 3 ? "70%" : "100%"} / ${
-    props.columns?.length
-  }`;
-
   const [rowSelected, setRowSelected] = React.useState("parent");
 
-  const secondLevelRow = find(props.columns, { key: "id" });
+  const secondLevelRow = !find(props.columns, { key: "name" });
+
+  const thirdLevelRow = secondLevelRow && !find(props.columns, { key: "date" });
 
   return (
     <React.Fragment>
+      {thirdLevelRow && (
+        <TableRow>
+          {cellData2.map((name, index) => (
+            <TableCell
+              key={v4()}
+              css={`
+                text-align: center;
+                padding: 16px 10px;
+                // padding-left: ${index === 0 ? "4rem" : "auto"};
+                ${tablecell}
+              `}
+            >
+              <div
+                css={`
+                  width: 100%;
+                  display: flex;
+                  align-items: center;
+                  flex-direction: row;
+                  justify-content: center;
+                `}
+              >
+                <div
+                  css={`
+                    gap: 12px;
+                    display: flex;
+                    align-items: center;
+                    flex-direction: row;
+                    justify-content: center;
+                    font-weight: bold;
+                    font-family: "GothamNarrow-Bold", "Helvetica Neue",
+                      sans-serif;
+
+                    > * {
+                      @supports (-webkit-touch-callout: none) and
+                        (not (translate: none)) {
+                        &:not(:last-child) {
+                          margin-right: 12px;
+                        }
+                      }
+                    }
+
+                    > svg {
+                      transition: transform 0.1s ease-in-out;
+                      transform: rotate(${open ? "0deg" : "-180deg"});
+                    }
+                  `}
+                >
+                  {name}
+                </div>
+              </div>
+            </TableCell>
+          ))}
+        </TableRow>
+      )}
       <TableRow
         className={classes.root}
         id="funding-requests-table-row"
@@ -118,8 +173,10 @@ function Row(props: {
             css={`
               text-align: center;
               padding: 16px 10px;
-              ${tablecell} /* width: calc(${columnWidthCalc}); */
-              ${index === 0 ? `padding-left: ${props.paddingLeft}rem;` : ""}
+              ${index === 0 && !secondLevelRow
+                ? `padding-left: ${props.paddingLeft}rem;`
+                : ""}
+              ${tablecell}
             `}
           >
             <div
@@ -155,16 +212,28 @@ function Row(props: {
                   }
 
                   > svg {
+                    margin-left: -12px;
                     transition: transform 0.1s ease-in-out;
                     transform: rotate(${open ? "0deg" : "-180deg"});
                   }
                 `}
               >
-                {index === 0 && props.row.children && <TriangleXSIcon />}
-                {column.key === "link" ? (
-                  <IconButton>
-                    <CloudDownloadIcon htmlColor="#252C34" />
-                  </IconButton>
+                {index === 0 &&
+                  props.row.children &&
+                  props.row.children.length > 0 && <TriangleXSIcon />}
+                {column.key === "grant" ? (
+                  <Link
+                    css={`
+                      color: ${appColors.TABLE.ROW_TEXT_COLOR};
+                    `}
+                    to={`/grant/${get(props.row, column.key, "")}/${get(
+                      props.row,
+                      "ip",
+                      ""
+                    )}`}
+                  >
+                    {get(props.row, column.key, "")}
+                  </Link>
                 ) : (
                   get(props.row, column.key, "")
                 )}
@@ -188,7 +257,7 @@ function Row(props: {
           <Collapse in={open} timeout="auto" unmountOnExit>
             <Table>
               <TableBody>
-                {rowSelected == "child" && (
+                {rowSelected === "child" && (
                   <TableRow>
                     {cellData.map((name, index) => (
                       <TableCell
@@ -196,11 +265,8 @@ function Row(props: {
                         css={`
                           text-align: center;
                           padding: 16px 10px;
+                          // padding-left: ${index === 0 ? "4rem" : "auto"};
                           ${tablecell}
-                          padding-left: ${index === 0 ? "4rem" : "auto"};
-                          /* width: calc(${columnWidthCalc});
-
-                          width: ${firstColumnWidth}; */
                         `}
                       >
                         <div
@@ -218,6 +284,7 @@ function Row(props: {
                               display: flex;
                               align-items: center;
                               flex-direction: row;
+                              justify-content: center;
                               font-weight: bold;
                               font-family: "GothamNarrow-Bold", "Helvetica Neue",
                                 sans-serif;
@@ -273,6 +340,8 @@ function Row(props: {
 }
 
 export function FundingRequestTable(props: FundingTableProps) {
+  const cmsData = useCMSData({ returnData: true });
+
   const sortBySplits = props.sortBy.split(" ");
 
   const [toolbarCols, setToolbarCols] = React.useState<TableToolbarCols[]>([]);
@@ -403,6 +472,18 @@ export function FundingRequestTable(props: FundingTableProps) {
           </TableBody>
         </Table>
       </TableContainer>
+      <div css="width: 100%;height: 50px;" />
+      <div
+        css={`
+          width: 90%;
+          margin: 0 auto;
+          font-size: 14px;
+          line-height: 17px;
+          text-align: center;
+        `}
+      >
+        {get(cmsData, "modulesFundingRequests.tableDisclaimer", "")}
+      </div>
       <div css="width: 100%;height: 25px;" />
     </div>
   );
diff --git a/src/app/hooks/useCMSData.tsx b/src/app/hooks/useCMSData.tsx
index 60a126d4a..8e6493ccb 100644
--- a/src/app/hooks/useCMSData.tsx
+++ b/src/app/hooks/useCMSData.tsx
@@ -165,6 +165,12 @@ export function useCMSData(props: UseCMSDataProps) {
   const modulesLandingCMSData = useStoreState(
     (state) => state.cms.modulesLanding.data
   );
+  const modulesFundingRequestsCMSAction = useStoreActions(
+    (actions) => actions.cms.modulesFundingRequests.fetch
+  );
+  const modulesFundingRequestsCMSData = useStoreState(
+    (state) => state.cms.modulesFundingRequests.data
+  );
 
   React.useEffect(() => {
     if (props.loadData) {
@@ -195,6 +201,7 @@ export function useCMSData(props: UseCMSDataProps) {
       modulesGrantDetailCMSAction({ isCMSfetch: true });
       modulesGrantsCMSAction({ isCMSfetch: true });
       modulesLandingCMSAction({ isCMSfetch: true });
+      modulesFundingRequestsCMSAction({ isCMSfetch: true });
     }
   }, []);
 
@@ -304,6 +311,10 @@ export function useCMSData(props: UseCMSDataProps) {
         key: "modulesLanding",
         data: modulesLandingCMSData || {},
       },
+      {
+        key: "modulesFundingRequests",
+        data: modulesFundingRequestsCMSData || {},
+      },
     ];
     items.forEach((item) => {
       let filteredData = {};
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts
index 1b888fb19..0707e03b1 100644
--- a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts
@@ -4,11 +4,31 @@ export const fundingRequestColumns = [
     name: "Location",
     col: [
       {
-        key: "id",
+        key: "component",
         name: "",
         col: [
           {
-            key: "grant1",
+            key: "gac",
+            name: "",
+          },
+          {
+            key: "grant",
+            name: "",
+          },
+          {
+            key: "start",
+            name: "",
+          },
+          {
+            key: "end",
+            name: "",
+          },
+          // {
+          //   key: "recipient",
+          //   name: "",
+          // },
+          {
+            key: "component",
             name: "",
           },
         ],
@@ -17,10 +37,6 @@ export const fundingRequestColumns = [
         key: "date",
         name: "",
       },
-      {
-        key: "component",
-        name: "",
-      },
       {
         key: "approach",
         name: "",
@@ -33,30 +49,27 @@ export const fundingRequestColumns = [
         key: "outcome",
         name: "",
       },
-      {
-        key: "gac",
-        name: "",
-      },
       {
         key: "board",
         name: "",
       },
-      {
-        key: "linkk",
-        name: "",
-      },
     ],
   },
 ];
 
 export const cellData = [
-  "Application ID",
-  "Submission date",
   "Component",
+  "Submission date",
   "Approach",
   "TRP Window ",
   "TRP Outcome",
-  "GAC Meeting",
   "Board Approval",
-  "",
+];
+
+export const cellData2 = [
+  "GAC Meeting",
+  "Grant",
+  "Starting Date",
+  "End Date",
+  "Component",
 ];
diff --git a/src/app/state/api/action-reducers/cms/modulesFundingRequests.ts b/src/app/state/api/action-reducers/cms/modulesFundingRequests.ts
new file mode 100644
index 000000000..5b15cf9c8
--- /dev/null
+++ b/src/app/state/api/action-reducers/cms/modulesFundingRequests.ts
@@ -0,0 +1,10 @@
+import { APIModel } from "app/state/api";
+import { CMSApiCallModel } from "app/state/api/interfaces";
+
+const modulesFundingRequests: CMSApiCallModel = {
+  ...APIModel(
+    `${process.env.REACT_APP_CMS_API}/singletons/get/modulesFundingRequests?token=${process.env.REACT_APP_CMS_TOKEN}`
+  ),
+};
+
+export default modulesFundingRequests;
diff --git a/src/app/state/api/interfaces/cms.ts b/src/app/state/api/interfaces/cms.ts
index 9f11b04c4..37ea963dc 100644
--- a/src/app/state/api/interfaces/cms.ts
+++ b/src/app/state/api/interfaces/cms.ts
@@ -333,6 +333,12 @@ export interface CMSApiModulesGrants {
   };
 }
 
+export interface CMSApiModulesFundingRequests {
+  data: {
+    tableDisclaimer: string;
+  };
+}
+
 // COUNTRY SUMMARY
 export interface CMSApiCountrySummary {
   entries: {
diff --git a/src/app/state/api/interfaces/index.ts b/src/app/state/api/interfaces/index.ts
index 7421940c5..9a3819343 100644
--- a/src/app/state/api/interfaces/index.ts
+++ b/src/app/state/api/interfaces/index.ts
@@ -43,6 +43,7 @@ import {
   CMSApiModulesGrants,
   CMSApiCountrySummary,
   CMSApiNotesAndDisclaimers,
+  CMSApiModulesFundingRequests,
 } from "app/state/api/interfaces/cms";
 import {
   DataPathActiveStepStateModel,
@@ -131,6 +132,7 @@ export type CMSApiCallModel = ApiModel<
   | CMSApiModulesGrants
   | CMSApiCountrySummary
   | CMSApiNotesAndDisclaimers
+  | CMSApiModulesFundingRequests
 >;
 
 export interface CMSApiCallParams {}
@@ -292,6 +294,7 @@ export interface StoreModel {
     modulesDatasets: CMSApiCallModel;
     modulesGrantDetail: CMSApiCallModel;
     modulesGrants: CMSApiCallModel;
+    modulesFundingRequests: CMSApiCallModel;
     countrySummary: CMSApiCallModel;
     notesAndDisclaimers: CMSApiCallModel;
   };
diff --git a/src/app/state/store/index.ts b/src/app/state/store/index.ts
index b5cd14431..3557e107a 100644
--- a/src/app/state/store/index.ts
+++ b/src/app/state/store/index.ts
@@ -179,6 +179,7 @@ import {
   TRPWindowCodelist,
 } from "../api/action-reducers/locationDetail/accessToFunding";
 import { FundingRequestsTableGeneric } from "../api/action-reducers/viz/fundingRequests";
+import modulesFundingRequests from "../api/action-reducers/cms/modulesFundingRequests";
 
 const storeContent: StoreModel = {
   // data viz api
@@ -383,6 +384,7 @@ const storeContent: StoreModel = {
     modulesDatasets: persist(modulesDatasets),
     modulesGrantDetail: persist(modulesGrantDetail),
     modulesGrants: persist(modulesGrants),
+    modulesFundingRequests: persist(modulesFundingRequests),
     countrySummary: persist(countrySummary),
     notesAndDisclaimers: persist(notesAndDisclaimers),
   },

From 88dc3d06bc4ff6065a72a87b05e9126648464b35 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Wed, 26 Apr 2023 15:53:16 +0300
Subject: [PATCH 15/69] chore: incremental

---
 src/app/components/Table/funding/index.tsx    | 15 -----------
 .../accessToFunding/fundingRequest/table.tsx  | 26 ++++++++++++++-----
 .../table/data-wrappers/generic.tsx           | 16 ++++++++++++
 3 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/src/app/components/Table/funding/index.tsx b/src/app/components/Table/funding/index.tsx
index 47fd9524c..0204005a0 100644
--- a/src/app/components/Table/funding/index.tsx
+++ b/src/app/components/Table/funding/index.tsx
@@ -10,7 +10,6 @@ import Table from "@material-ui/core/Table";
 import Button from "@material-ui/core/Button";
 import Collapse from "@material-ui/core/Collapse";
 import TableRow from "@material-ui/core/TableRow";
-import { useCMSData } from "app/hooks/useCMSData";
 import TableHead from "@material-ui/core/TableHead";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -340,8 +339,6 @@ function Row(props: {
 }
 
 export function FundingRequestTable(props: FundingTableProps) {
-  const cmsData = useCMSData({ returnData: true });
-
   const sortBySplits = props.sortBy.split(" ");
 
   const [toolbarCols, setToolbarCols] = React.useState<TableToolbarCols[]>([]);
@@ -472,18 +469,6 @@ export function FundingRequestTable(props: FundingTableProps) {
           </TableBody>
         </Table>
       </TableContainer>
-      <div css="width: 100%;height: 50px;" />
-      <div
-        css={`
-          width: 90%;
-          margin: 0 auto;
-          font-size: 14px;
-          line-height: 17px;
-          text-align: center;
-        `}
-      >
-        {get(cmsData, "modulesFundingRequests.tableDisclaimer", "")}
-      </div>
       <div css="width: 100%;height: 25px;" />
     </div>
   );
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/table.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/table.tsx
index 28f6a735f..04e167820 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/table.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/table.tsx
@@ -1,13 +1,10 @@
-/* third-party */
 import React from "react";
-/* project */
-
-import { PageLoader } from "app/modules/common/page-loader";
-
+import get from "lodash/get";
+import { useCMSData } from "app/hooks/useCMSData";
 import {
-  FundingRequestTable,
-  FundingTableColumn,
   FundingTableRow,
+  FundingTableColumn,
+  FundingRequestTable,
 } from "app/components/Table/funding";
 
 interface FundingRequestTableProps {
@@ -22,6 +19,8 @@ interface FundingRequestTableProps {
 }
 
 export function Table(props: FundingRequestTableProps) {
+  const cmsData = useCMSData({ returnData: true });
+
   return (
     <div>
       <FundingRequestTable
@@ -36,6 +35,19 @@ export function Table(props: FundingRequestTableProps) {
         paddingLeft={2}
         forceExpand={props.forceExpand}
       />
+      <div css="width: 100%;height: 25px;" />
+      <div
+        css={`
+          width: 90%;
+          margin: 0 auto;
+          font-size: 14px;
+          line-height: 17px;
+          text-align: center;
+        `}
+      >
+        {get(cmsData, "modulesFundingRequests.tableDisclaimer", "")}
+      </div>
+      <div css="width: 100%;height: 25px;" />
     </div>
   );
 }
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
index d894152e7..22b4655c2 100644
--- a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
@@ -6,6 +6,7 @@ import TablePagination from "@material-ui/core/TablePagination";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 /* project */
 import { InfoIcon } from "app/assets/icons/Info";
+import { useCMSData } from "app/hooks/useCMSData";
 import { PageLoader } from "app/modules/common/page-loader";
 import { SimpleTableRow } from "app/components/Table/Simple/data";
 import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
@@ -15,6 +16,8 @@ import { fundingRequestColumns } from "app/modules/viz-module/sub-modules/fundin
 export function GenericFundingRequestWrapper() {
   useTitle("The Data Explorer - Funding Requests");
 
+  const cmsData = useCMSData({ returnData: true });
+
   const [search, setSearch] = React.useState("");
   const [sortBy, setSortBy] = React.useState("name ASC");
 
@@ -123,6 +126,19 @@ export function GenericFundingRequestWrapper() {
           }
         `}
       />
+      <div css="width: 100%;height: 25px;" />
+      <div
+        css={`
+          width: 90%;
+          margin: 0 auto;
+          font-size: 14px;
+          line-height: 17px;
+          text-align: center;
+        `}
+      >
+        {get(cmsData, "modulesFundingRequests.tableDisclaimer", "")}
+      </div>
+      <div css="width: 100%;height: 25px;" />
     </React.Fragment>
   );
 }

From ff7b9013172c6c803d3ed386f674fc992e250182 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Wed, 26 Apr 2023 16:01:34 +0300
Subject: [PATCH 16/69] feat: loc access to funding latest cycle selected

---
 .../eligibility/tableWrapper.tsx              |  4 ++--
 .../fundingRequest/tableWrapper.tsx           |  2 +-
 .../sub-modules/accessToFunding/location.tsx  | 20 +++++++++++++------
 src/app/state/recoil/atoms/index.ts           |  4 ++--
 4 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
index 56dd901a9..fae16e754 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
@@ -109,7 +109,7 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
     }
     if (cycle !== "All") {
       filterStr.push(
-        `cycles=${cycle.replace("-20", "-")}${
+        `cycles=${(cycle || "").replace("-20", "-")}${
           cycle === "2002-2013" ? ",null" : ""
         }`
       );
@@ -290,7 +290,7 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
           setSearch={setSearch}
           setSortBy={setSortBy}
           columns={columns}
-          title={cycle}
+          title={cycle || ""}
         />
         <TablePagination
           page={page}
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
index b7e25da19..70c8bdf32 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
@@ -205,7 +205,7 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
           setSearch={setSearch}
           setSortBy={setSortBy}
           columns={fundingRequestColumns}
-          title={cycle}
+          title={cycle || ""}
         />
       </div>
     </>
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
index b92448b03..b16afead8 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
@@ -68,13 +68,21 @@ export default function LocationAccessToFundingWrapper(props: Props) {
   }, []);
 
   React.useEffect(() => {
-    fetchData({
-      filterString: `locations=${props.code}&${
-        cycle !== "All" ? `periods=${cycle}` : ""
-      }`,
-    });
+    if (cycle) {
+      fetchData({
+        filterString: `locations=${props.code}&${
+          cycle !== "All" ? `periods=${cycle}` : ""
+        }`,
+      });
+    }
   }, [props.code, cycle]);
 
+  React.useEffect(() => {
+    if (grantCycles.length > 0) {
+      setCycle(grantCycles[grantCycles.length - 1]);
+    }
+  }, [grantCycles]);
+
   return (
     <>
       <div css={descriptioncss}>
@@ -98,7 +106,7 @@ export default function LocationAccessToFundingWrapper(props: Props) {
             text-align: center;
           `}
         >
-          <b>Period / Cycle</b>
+          <b>Cycle</b>
         </p>
         <div
           css={`
diff --git a/src/app/state/recoil/atoms/index.ts b/src/app/state/recoil/atoms/index.ts
index 7846c99b8..d18e32295 100644
--- a/src/app/state/recoil/atoms/index.ts
+++ b/src/app/state/recoil/atoms/index.ts
@@ -65,8 +65,8 @@ export const selectedViewAtom = atom<string>({
   effects_UNSTABLE: [persistAtom],
 });
 
-export const locationAccessToFundingCycleAtom = atom<string>({
+export const locationAccessToFundingCycleAtom = atom<string | null>({
   key: "locationAccessToFundingCycleAtom",
-  default: "All",
+  default: null,
   effects_UNSTABLE: [persistAtom],
 });

From 8047fd0ad544691e57bf377341b694606d819c02 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Wed, 26 Apr 2023 14:16:42 +0100
Subject: [PATCH 17/69] fix: allocation chart  label adjustments

---
 src/app/components/Charts/common/breadcrumbs/index.tsx    | 2 +-
 .../viz-module/sub-modules/accessToFunding/location.tsx   | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/components/Charts/common/breadcrumbs/index.tsx b/src/app/components/Charts/common/breadcrumbs/index.tsx
index bc92b41ab..7992857a5 100644
--- a/src/app/components/Charts/common/breadcrumbs/index.tsx
+++ b/src/app/components/Charts/common/breadcrumbs/index.tsx
@@ -48,7 +48,7 @@ export default function BreadCrumbs() {
         z-index: 10;
         position: sticky;
         margin-top: 3rem;
-        background: ${document.body.style.background};
+        /* background: ${document.body.style.background}; */
       `}
     >
       <div
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
index b92448b03..ff4369935 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
@@ -175,7 +175,7 @@ export default function LocationAccessToFundingWrapper(props: Props) {
                     margin-top: 5px;
                   `}
                 >
-                  Total funds allocated in {locationInfoData.locationName} for{" "}
+                  Allocated to {locationInfoData.locationName} for{" "}
                   <b>{cycle}</b>
                 </p>
               </div>
@@ -216,10 +216,10 @@ export default function LocationAccessToFundingWrapper(props: Props) {
                       <b>
                         {formatLargeAmountsWithPrefix(val)
                           .replace("$", "")
-                          .replace("bln", "billions")
-                          .replace("mln", "millions")}
+                          .replace("bln", "billion")
+                          .replace("mln", "million")}
                         <br />
-                        {keys[index]} funds
+                        {keys[index]}
                       </b>
                     </p>
                   </div>

From ddf2c91edd63a0aa8ba9d00e10ad4f9a4ef28791 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Wed, 26 Apr 2023 15:53:00 +0100
Subject: [PATCH 18/69] feat: visual additions

---
 .../grants-module/components/List/index.tsx   | 71 +++++++------------
 .../grants-module/components/List/styles.ts   |  8 +--
 src/app/modules/grants-module/index.tsx       |  6 +-
 .../eligibility/tableWrapper.tsx              |  1 +
 .../sub-modules/accessToFunding/location.tsx  | 19 +++++
 5 files changed, 52 insertions(+), 53 deletions(-)

diff --git a/src/app/modules/grants-module/components/List/index.tsx b/src/app/modules/grants-module/components/List/index.tsx
index c6156ef6c..df89a9f94 100644
--- a/src/app/modules/grants-module/components/List/index.tsx
+++ b/src/app/modules/grants-module/components/List/index.tsx
@@ -18,7 +18,6 @@ import { appColors } from "app/theme";
 
 export function GrantsList(props: GrantsListProps) {
   const isMobile = useMediaQuery("(max-width: 767px)");
-
   return (
     <Grid container spacing={2}>
       {props.listitems.map((item: GrantListItemModel) => {
@@ -220,17 +219,33 @@ export function GrantsList(props: GrantsListProps) {
                   </div>
                 </div>
               </div>
-              {/* 2nd row */}
-              <div css={row(18, "bold", 24)}>{item.title}</div>
-              <div css={row(14, "normal")} style={{ margin: "0 0 32px 0" }}>
+
+              <div
+                css={row(12, "normal")}
+                style={{
+                  borderBottom: `1px solid ${appColors.GRANT_LIST.DIVIDER}`,
+                }}
+              >
                 <div>
-                  Principal Recipient:{" "}
-                  <b>
-                    {item.recipientName}
-                    {item.recipientShortName && ` (${item.recipientShortName})`}
-                  </b>
+                  <p>
+                    <b>Principal recipient:</b>
+                  </p>
+                  <p>
+                    <b>Cycle:</b>
+                  </p>
+                  <p>
+                    <b>Start / end date:</b>
+                  </p>
+                </div>
+                <div>
+                  <p>{item.recipientName}</p>
+                  <p>Nil</p>
+                  <p>Nil</p>
                 </div>
               </div>
+              {/* 2nd row */}
+              <div css={row(14, "bold", 24)}>{item.title}</div>
+
               {/* 3rd row */}
               {isMobile ? (
                 <div>
@@ -304,44 +319,6 @@ export function GrantsList(props: GrantsListProps) {
                         `}
                       />
                     </div>
-                    <div
-                      css={`
-                        width: 100%;
-                        display: flex;
-                        flex-direction: row;
-                        justify-content: space-between;
-                      `}
-                    >
-                      <div
-                        css={`
-                          font-weight: bold;
-                          font-family: "GothamNarrow-Bold", "Helvetica Neue",
-                            sans-serif;
-                        `}
-                      >
-                        Committed
-                      </div>
-                      <div>{formatFinancialValue(item.committed)}</div>
-                    </div>
-                    <div
-                      css={`
-                        width: 100%;
-                        display: flex;
-                        flex-direction: row;
-                        justify-content: space-between;
-                      `}
-                    >
-                      <div
-                        css={`
-                          font-weight: bold;
-                          font-family: "GothamNarrow-Bold", "Helvetica Neue",
-                            sans-serif;
-                        `}
-                      >
-                        Signed
-                      </div>
-                      <div>{formatFinancialValue(item.signed)}</div>
-                    </div>
                   </div>
                 </div>
               )}
diff --git a/src/app/modules/grants-module/components/List/styles.ts b/src/app/modules/grants-module/components/List/styles.ts
index 8a2ea7294..8d8c05479 100644
--- a/src/app/modules/grants-module/components/List/styles.ts
+++ b/src/app/modules/grants-module/components/List/styles.ts
@@ -2,10 +2,10 @@ import { appColors } from "app/theme";
 import { css } from "styled-components/macro";
 
 export const listitem = css`
-  height: 100%;
+  height: 300px;
   display: flex;
   color: ${appColors.GRANT_LIST.ITEM_TEXT_COLOR};
-  padding: 12px 20px;
+  padding: 19px 20px;
   background: ${appColors.GRANT_LIST.ITEM_BACKGROUND_COLOR};
   border-radius: 20px;
   text-decoration: none;
@@ -26,11 +26,11 @@ export const listitem = css`
 
 export const row = (size: number, style: string, lineHeight?: number) => css`
   display: flex;
-  margin: 16px 0;
+
   flex-direction: row;
   font-size: ${size}px;
   font-weight: ${style};
-  align-items: flex-end;
+  align-items: flex-start;
   justify-content: space-between;
   line-height: ${lineHeight ?? 16}px;
   font-family: "GothamNarrow-${style === "bold" ? "Bold" : "Book"}",
diff --git a/src/app/modules/grants-module/index.tsx b/src/app/modules/grants-module/index.tsx
index 522279062..21931bbd2 100644
--- a/src/app/modules/grants-module/index.tsx
+++ b/src/app/modules/grants-module/index.tsx
@@ -4,7 +4,7 @@ import get from "lodash/get";
 import find from "lodash/find";
 import { useLocation } from "react-router-dom";
 import { useCMSData } from "app/hooks/useCMSData";
-import { useMediaQuery } from "@material-ui/core";
+import { Box, useMediaQuery } from "@material-ui/core";
 import Pagination from "@material-ui/lab/Pagination";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import {
@@ -161,6 +161,7 @@ export default function GrantsModule(props: GrantsModuleProps) {
   );
 
   let pushValue = 0;
+
   const widthThreshold = (window.innerWidth - 1280) / 2;
 
   if (!props.code && !props.detailFilterType) {
@@ -169,7 +170,7 @@ export default function GrantsModule(props: GrantsModuleProps) {
     } else if (widthThreshold < 0) {
       pushValue = 0;
     } else {
-      pushValue = 450 - widthThreshold;
+      pushValue = 500 - widthThreshold;
     }
   }
 
@@ -220,6 +221,7 @@ export default function GrantsModule(props: GrantsModuleProps) {
         `}
         ref={vizWrapperRef}
       >
+        <Box height="38px" />
         <Search
           value={props.search || search}
           setValue={props.setSearch || setSearch}
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
index 56dd901a9..1aa9436a4 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
@@ -283,6 +283,7 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
             </div>
           </div>
         </Slide>
+
         <EligibilityTable
           search={search}
           sortBy={sortBy}
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
index ff4369935..38b345a45 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
@@ -15,6 +15,7 @@ import {
 } from "app/modules/viz-module/sub-modules/accessToFunding/style";
 import { AccessToFundingRequestTableWrapper } from "app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper";
 import { AccessToFundingEligibilityTableWrapper } from "app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper";
+import { Link } from "react-router-dom";
 
 interface Props {
   code: string;
@@ -125,6 +126,24 @@ export default function LocationAccessToFundingWrapper(props: Props) {
               <b>Eligibility </b>
             </h4>
             <hr />
+            <div css={descriptioncss}>
+              <p>
+                Below are the components which are eligible for an allocation
+                for the selected allocation period, according to the Global Fund
+                Eligibility Policy. Eligibility does not guarantee a funding
+                allocation.
+                <a href="https://www.theglobalfund.org/en/applying-for-funding/understand-and-prepare/eligibility/">
+                  {" "}
+                  Learn more about Eligibility here{" "}
+                </a>{" "}
+                or{" "}
+                <Link to="/viz/eligibility/table">
+                  {" "}
+                  see the full history of eligibility for this country.
+                </Link>
+              </p>
+            </div>
+            <Box height="50px" />
             <AccessToFundingEligibilityTableWrapper
               code={props.code}
               codeParam={props.codeParam}

From ee0ae48f83cb976f6f29b645697fac068eedf1b7 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Wed, 26 Apr 2023 16:06:16 +0100
Subject: [PATCH 19/69] feat: visual additions

---
 .../eligibility/tableWrapper.tsx              |  1 +
 .../sub-modules/accessToFunding/location.tsx  | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
index 56dd901a9..1aa9436a4 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
@@ -283,6 +283,7 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
             </div>
           </div>
         </Slide>
+
         <EligibilityTable
           search={search}
           sortBy={sortBy}
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
index ff4369935..38b345a45 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
@@ -15,6 +15,7 @@ import {
 } from "app/modules/viz-module/sub-modules/accessToFunding/style";
 import { AccessToFundingRequestTableWrapper } from "app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper";
 import { AccessToFundingEligibilityTableWrapper } from "app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper";
+import { Link } from "react-router-dom";
 
 interface Props {
   code: string;
@@ -125,6 +126,24 @@ export default function LocationAccessToFundingWrapper(props: Props) {
               <b>Eligibility </b>
             </h4>
             <hr />
+            <div css={descriptioncss}>
+              <p>
+                Below are the components which are eligible for an allocation
+                for the selected allocation period, according to the Global Fund
+                Eligibility Policy. Eligibility does not guarantee a funding
+                allocation.
+                <a href="https://www.theglobalfund.org/en/applying-for-funding/understand-and-prepare/eligibility/">
+                  {" "}
+                  Learn more about Eligibility here{" "}
+                </a>{" "}
+                or{" "}
+                <Link to="/viz/eligibility/table">
+                  {" "}
+                  see the full history of eligibility for this country.
+                </Link>
+              </p>
+            </div>
+            <Box height="50px" />
             <AccessToFundingEligibilityTableWrapper
               code={props.code}
               codeParam={props.codeParam}

From f2df1903bdc6fa2deb95337fc0e2abfd811f7b2b Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Wed, 26 Apr 2023 16:13:37 +0100
Subject: [PATCH 20/69] feat: visual additions

---
 .../grants-module/components/List/index.tsx   | 71 ++++++++++++-------
 .../grants-module/components/List/styles.ts   |  8 +--
 src/app/modules/grants-module/index.tsx       |  6 +-
 3 files changed, 53 insertions(+), 32 deletions(-)

diff --git a/src/app/modules/grants-module/components/List/index.tsx b/src/app/modules/grants-module/components/List/index.tsx
index df89a9f94..c6156ef6c 100644
--- a/src/app/modules/grants-module/components/List/index.tsx
+++ b/src/app/modules/grants-module/components/List/index.tsx
@@ -18,6 +18,7 @@ import { appColors } from "app/theme";
 
 export function GrantsList(props: GrantsListProps) {
   const isMobile = useMediaQuery("(max-width: 767px)");
+
   return (
     <Grid container spacing={2}>
       {props.listitems.map((item: GrantListItemModel) => {
@@ -219,33 +220,17 @@ export function GrantsList(props: GrantsListProps) {
                   </div>
                 </div>
               </div>
-
-              <div
-                css={row(12, "normal")}
-                style={{
-                  borderBottom: `1px solid ${appColors.GRANT_LIST.DIVIDER}`,
-                }}
-              >
-                <div>
-                  <p>
-                    <b>Principal recipient:</b>
-                  </p>
-                  <p>
-                    <b>Cycle:</b>
-                  </p>
-                  <p>
-                    <b>Start / end date:</b>
-                  </p>
-                </div>
+              {/* 2nd row */}
+              <div css={row(18, "bold", 24)}>{item.title}</div>
+              <div css={row(14, "normal")} style={{ margin: "0 0 32px 0" }}>
                 <div>
-                  <p>{item.recipientName}</p>
-                  <p>Nil</p>
-                  <p>Nil</p>
+                  Principal Recipient:{" "}
+                  <b>
+                    {item.recipientName}
+                    {item.recipientShortName && ` (${item.recipientShortName})`}
+                  </b>
                 </div>
               </div>
-              {/* 2nd row */}
-              <div css={row(14, "bold", 24)}>{item.title}</div>
-
               {/* 3rd row */}
               {isMobile ? (
                 <div>
@@ -319,6 +304,44 @@ export function GrantsList(props: GrantsListProps) {
                         `}
                       />
                     </div>
+                    <div
+                      css={`
+                        width: 100%;
+                        display: flex;
+                        flex-direction: row;
+                        justify-content: space-between;
+                      `}
+                    >
+                      <div
+                        css={`
+                          font-weight: bold;
+                          font-family: "GothamNarrow-Bold", "Helvetica Neue",
+                            sans-serif;
+                        `}
+                      >
+                        Committed
+                      </div>
+                      <div>{formatFinancialValue(item.committed)}</div>
+                    </div>
+                    <div
+                      css={`
+                        width: 100%;
+                        display: flex;
+                        flex-direction: row;
+                        justify-content: space-between;
+                      `}
+                    >
+                      <div
+                        css={`
+                          font-weight: bold;
+                          font-family: "GothamNarrow-Bold", "Helvetica Neue",
+                            sans-serif;
+                        `}
+                      >
+                        Signed
+                      </div>
+                      <div>{formatFinancialValue(item.signed)}</div>
+                    </div>
                   </div>
                 </div>
               )}
diff --git a/src/app/modules/grants-module/components/List/styles.ts b/src/app/modules/grants-module/components/List/styles.ts
index 8d8c05479..8a2ea7294 100644
--- a/src/app/modules/grants-module/components/List/styles.ts
+++ b/src/app/modules/grants-module/components/List/styles.ts
@@ -2,10 +2,10 @@ import { appColors } from "app/theme";
 import { css } from "styled-components/macro";
 
 export const listitem = css`
-  height: 300px;
+  height: 100%;
   display: flex;
   color: ${appColors.GRANT_LIST.ITEM_TEXT_COLOR};
-  padding: 19px 20px;
+  padding: 12px 20px;
   background: ${appColors.GRANT_LIST.ITEM_BACKGROUND_COLOR};
   border-radius: 20px;
   text-decoration: none;
@@ -26,11 +26,11 @@ export const listitem = css`
 
 export const row = (size: number, style: string, lineHeight?: number) => css`
   display: flex;
-
+  margin: 16px 0;
   flex-direction: row;
   font-size: ${size}px;
   font-weight: ${style};
-  align-items: flex-start;
+  align-items: flex-end;
   justify-content: space-between;
   line-height: ${lineHeight ?? 16}px;
   font-family: "GothamNarrow-${style === "bold" ? "Bold" : "Book"}",
diff --git a/src/app/modules/grants-module/index.tsx b/src/app/modules/grants-module/index.tsx
index 21931bbd2..522279062 100644
--- a/src/app/modules/grants-module/index.tsx
+++ b/src/app/modules/grants-module/index.tsx
@@ -4,7 +4,7 @@ import get from "lodash/get";
 import find from "lodash/find";
 import { useLocation } from "react-router-dom";
 import { useCMSData } from "app/hooks/useCMSData";
-import { Box, useMediaQuery } from "@material-ui/core";
+import { useMediaQuery } from "@material-ui/core";
 import Pagination from "@material-ui/lab/Pagination";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import {
@@ -161,7 +161,6 @@ export default function GrantsModule(props: GrantsModuleProps) {
   );
 
   let pushValue = 0;
-
   const widthThreshold = (window.innerWidth - 1280) / 2;
 
   if (!props.code && !props.detailFilterType) {
@@ -170,7 +169,7 @@ export default function GrantsModule(props: GrantsModuleProps) {
     } else if (widthThreshold < 0) {
       pushValue = 0;
     } else {
-      pushValue = 500 - widthThreshold;
+      pushValue = 450 - widthThreshold;
     }
   }
 
@@ -221,7 +220,6 @@ export default function GrantsModule(props: GrantsModuleProps) {
         `}
         ref={vizWrapperRef}
       >
-        <Box height="38px" />
         <Search
           value={props.search || search}
           setValue={props.setSearch || setSearch}

From 03493c4cd4e157e39891328b007cb5fcfbc93d07 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Thu, 27 Apr 2023 13:18:33 +0300
Subject: [PATCH 21/69] feat: eligibility table update

---
 .../Charts/common/breadcrumbs/index.tsx       |   2 +-
 src/app/components/Table/Simple/index.tsx     |   1 +
 .../components/subtoolboxpanel/index.tsx      |   4 -
 .../ToolBoxPanel/utils/getControlItems.ts     |  38 +--
 .../modules/country-detail-module/index.tsx   |  37 ---
 src/app/modules/viz-module/index.tsx          |   4 +-
 .../eligibility/tableWrapper.tsx              | 218 ++++++++++--------
 .../sub-modules/accessToFunding/location.tsx  |  11 +-
 .../locationDetail/accessToFunding.ts         |   2 +-
 9 files changed, 144 insertions(+), 173 deletions(-)

diff --git a/src/app/components/Charts/common/breadcrumbs/index.tsx b/src/app/components/Charts/common/breadcrumbs/index.tsx
index 7992857a5..bc92b41ab 100644
--- a/src/app/components/Charts/common/breadcrumbs/index.tsx
+++ b/src/app/components/Charts/common/breadcrumbs/index.tsx
@@ -48,7 +48,7 @@ export default function BreadCrumbs() {
         z-index: 10;
         position: sticky;
         margin-top: 3rem;
-        /* background: ${document.body.style.background}; */
+        background: ${document.body.style.background};
       `}
     >
       <div
diff --git a/src/app/components/Table/Simple/index.tsx b/src/app/components/Table/Simple/index.tsx
index 2c4c4b99c..ba9b8dead 100644
--- a/src/app/components/Table/Simple/index.tsx
+++ b/src/app/components/Table/Simple/index.tsx
@@ -56,6 +56,7 @@ function Row(props: {
   return (
     <React.Fragment>
       <TableRow
+        id="simple-table-row"
         className={classes.root}
         onClick={() => {
           if (props.row.children) {
diff --git a/src/app/components/ToolBoxPanel/components/subtoolboxpanel/index.tsx b/src/app/components/ToolBoxPanel/components/subtoolboxpanel/index.tsx
index 04b22bb09..687c0e3df 100644
--- a/src/app/components/ToolBoxPanel/components/subtoolboxpanel/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/subtoolboxpanel/index.tsx
@@ -8,7 +8,6 @@ import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import { ResultsYear } from "app/components/ToolBoxPanel/components/resultsyear";
 import { ToolBoxPanelFilters } from "app/components/ToolBoxPanel/components/filters";
 import { FilterGroupProps } from "app/components/ToolBoxPanel/components/filters/data";
-import { EligibilityYear } from "app/components/ToolBoxPanel/components/eligibilityyear";
 import { ToolBoxPanelControlRow } from "app/components/ToolBoxPanel/components/controlrow";
 import { ToolBoxPanelAggregateBy } from "app/components/ToolBoxPanel/components/aggregateby";
 import { ToolBoxPanelDonorViews } from "app/components/ToolBoxPanel/components/donormapviews";
@@ -224,9 +223,6 @@ export function SubToolBoxPanel(props: SubToolBoxPanelProps) {
           {(params.vizType === "allocations" ||
             params.vizType === "allocation") &&
             params.subType !== "table" && <AllocationsPeriods />}
-          {params.vizType === "eligibility" && !isLocationDetail && (
-            <EligibilityYear />
-          )}
           {isResultsPage && <ResultsYear />}
           {(((params.vizType === "commitment" ||
             params.vizType === "disbursements" ||
diff --git a/src/app/components/ToolBoxPanel/utils/getControlItems.ts b/src/app/components/ToolBoxPanel/utils/getControlItems.ts
index 63764b246..6237540e6 100644
--- a/src/app/components/ToolBoxPanel/utils/getControlItems.ts
+++ b/src/app/components/ToolBoxPanel/utils/getControlItems.ts
@@ -157,34 +157,6 @@ const views = {
 };
 
 const aggregates = {
-  // investments: [
-  //   {
-  //     label: "Components",
-  //     value: "Components",
-  //   },
-  //   {
-  //     label: "Partners",
-  //     value: "Partners",
-  //   },
-  //   {
-  //     label: "Locations",
-  //     value: "Locations",
-  //   },
-  //   {
-  //     label: "Grants",
-  //     value: "Grants",
-  //   },
-  // ],
-  // budgets: [
-  //   {
-  //     label: "Components",
-  //     value: "Components",
-  //   },
-  //   {
-  //     label: "Locations",
-  //     value: "Locations",
-  //   },
-  // ],
   "allocations-table": [
     {
       label: "Locations",
@@ -195,6 +167,16 @@ const aggregates = {
       value: "component.componentName",
     },
   ],
+  "eligibility-table": [
+    {
+      label: "Locations",
+      value: "geographicAreaName",
+    },
+    {
+      label: "Components",
+      value: "componentName",
+    },
+  ],
   "pledges-contributions-table": [
     {
       label: "Donor",
diff --git a/src/app/modules/country-detail-module/index.tsx b/src/app/modules/country-detail-module/index.tsx
index 452a7ba42..caf115abd 100644
--- a/src/app/modules/country-detail-module/index.tsx
+++ b/src/app/modules/country-detail-module/index.tsx
@@ -18,17 +18,12 @@ import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
 import { useGetAllAvailableGrants } from "app/hooks/useGetAllAvailableGrants";
 import { BudgetsGeoMap } from "app/modules/viz-module/sub-modules/budgets/geomap";
 import { countryDetailTabs } from "app/components/PageHeader/components/tabs/data";
-import { AllocationsModule } from "app/modules/viz-module/sub-modules/allocations";
 import { LocationGrants } from "app/modules/country-detail-module/sub-modules/grants";
 import { LocationResults } from "app/modules/country-detail-module/sub-modules/results";
-import { AllocationsGeoMap } from "app/modules/viz-module/sub-modules/allocations/geomap";
 import { InvestmentsGeoMap } from "app/modules/viz-module/sub-modules/investments/geomap";
-import { AllocationsTableModule } from "app/modules/viz-module/sub-modules/allocations/table";
 import { LocationDetailOverviewModule } from "app/modules/country-detail-module/sub-modules/overview";
 import { LocationDetailDocumentsModule } from "app/modules/country-detail-module/sub-modules/documents";
-import { LocationDetailEligibilityWrapper } from "app/modules/viz-module/sub-modules/eligibility/data-wrappers/location";
 import { GenericInvestmentsTableWrapper } from "app/modules/viz-module/sub-modules/investments/table/data-wrappers/generic";
-import { LocationEligibilityTableWrapper } from "app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/location";
 import { LocationDetailBudgetsFlowWrapper } from "app/modules/viz-module/sub-modules/budgets/flow/data-wrappers/locationDetail";
 import { GenericInvestmentsTimeCycleWrapper } from "app/modules/viz-module/sub-modules/investments/time-cycle/data-wrappers/generic";
 import { LocationDetailGenericBudgetsTimeCycleWrapper } from "app/modules/viz-module/sub-modules/budgets/time-cycle/data-wrappers/locationDetail";
@@ -289,13 +284,6 @@ export default function CountryDetail() {
           <Route path={`/location/:code/signed/table`}>
             <GenericInvestmentsTableWrapper code={paramCode} />
           </Route>
-          {/* <Route path={`/location/:code/signed/time-cycle`}>
-            <GenericInvestmentsTimeCycleWrapper
-              type="Signed"
-              code={paramCode}
-              toolboxOpen={openToolboxPanel}
-            />
-          </Route> */}
           <Route path={`/location/:code/signed/map`}>
             <InvestmentsGeoMap
               type="Signed"
@@ -328,24 +316,6 @@ export default function CountryDetail() {
               detailFilterType="locations"
             />
           </Route>
-          {/* Allocations */}
-          <Route path={`/location/:code/allocations/map`}>
-            <AllocationsGeoMap code={paramCode} />
-          </Route>
-          <Route path={`/location/:code/allocations/table`}>
-            <AllocationsTableModule
-              code={paramCode}
-              toolboxOpen={openToolboxPanel}
-              setOpenToolboxPanel={setOpenToolboxPanel}
-            />
-          </Route>
-          <Route path={`/location/:code/allocations`}>
-            <AllocationsModule
-              code={paramCode}
-              toolboxOpen={openToolboxPanel}
-              setOpenToolboxPanel={setOpenToolboxPanel}
-            />
-          </Route>
           {/*Access to Funding*/}
           <Route path={`/location/:code/access-to-funding`}>
             <LocationAccessToFundingWrapper
@@ -354,13 +324,6 @@ export default function CountryDetail() {
               filterGroups={fundingRequestFilterGroups}
             />
           </Route>
-          {/* Eligibility */}
-          <Route path={`/location/:code/eligibility/table`}>
-            <LocationEligibilityTableWrapper code={paramCode} />
-          </Route>
-          <Route path={`/location/:code/eligibility`}>
-            <LocationDetailEligibilityWrapper code={paramCode} />
-          </Route>
           {/* Grants */}
           <Route path={`/location/:code/grants/list`}>
             <GrantsModule
diff --git a/src/app/modules/viz-module/index.tsx b/src/app/modules/viz-module/index.tsx
index fbb3fd7ed..832dd249d 100644
--- a/src/app/modules/viz-module/index.tsx
+++ b/src/app/modules/viz-module/index.tsx
@@ -21,12 +21,12 @@ import { PledgesContributionsTable } from "app/modules/viz-module/sub-modules/pl
 import { PledgesContributionsGeoMap } from "app/modules/viz-module/sub-modules/pledgescontributions/geomap";
 import { PledgesContributionsTreemap } from "app/modules/viz-module/sub-modules/pledgescontributions/treemap";
 import { GenericBudgetsFlowWrapper } from "app/modules/viz-module/sub-modules/budgets/flow/data-wrappers/generic";
-import { GenericEligibilityWrapper } from "app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/generic";
 import { PledgesContributionsTimeCycleModule } from "app/modules/viz-module/sub-modules/pledgescontributions/time-cycle";
 import { GenericInvestmentsTableWrapper } from "app/modules/viz-module/sub-modules/investments/table/data-wrappers/generic";
 import { GenericBudgetsTimeCycleWrapper } from "app/modules/viz-module/sub-modules/budgets/time-cycle/data-wrappers/generic";
 import { GenericFundingRequestWrapper } from "app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic";
 import { GenericInvestmentsDisbursedWrapper } from "app/modules/viz-module/sub-modules/investments/disbursed/data-wrappers/generic";
+import { AccessToFundingEligibilityTableWrapper } from "app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper";
 import { GenericInvestmentsTimeCycleWrapper } from "app/modules/viz-module/sub-modules/investments/time-cycle/data-wrappers/generic";
 import {
   filtergroups,
@@ -211,7 +211,7 @@ export default function VizModule() {
           </Route>
           {/* Eligibility */}
           <Route path="/viz/eligibility/table">
-            <GenericEligibilityWrapper />
+            <AccessToFundingEligibilityTableWrapper />
           </Route>
           <Route path="/viz/eligibility">
             <EligibilityModule />
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
index 7f8717643..9e3791e91 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
@@ -13,12 +13,11 @@ import { TriangleXSIcon } from "app/assets/icons/TriangleXS";
 import { SimpleTableRow } from "app/components/Table/Simple/data";
 import { locationAccessToFundingCycleAtom } from "app/state/recoil/atoms";
 import { ToolBoxPanelFilters } from "app/components/ToolBoxPanel/components/filters";
-import { ToolBoxPanelAggregateBy } from "app/components/ToolBoxPanel/components/aggregateby";
 import { FilterGroupProps } from "app/components/ToolBoxPanel/components/filters/data";
+import { ToolBoxPanelAggregateBy } from "app/components/ToolBoxPanel/components/aggregateby";
 
 interface Props {
-  code: string;
-  codeParam: string;
+  code?: string;
 }
 
 export function AccessToFundingEligibilityTableWrapper(props: Props) {
@@ -32,17 +31,18 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
   );
 
   const [search, setSearch] = React.useState("");
-  const [sortBy, setSortBy] = React.useState("year DESC");
+  const [sortBy, setSortBy] = React.useState("level1 ASC");
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(10);
   const [openToolboxPanel, setOpenToolboxPanel] = React.useState(false);
-  const [selectedAggregate, setSelectedAggregate] = React.useState("year");
+  const [selectedAggregate, setSelectedAggregate] =
+    React.useState("geographicAreaName");
   const [expandedGroup, setExpandedGroup] =
     React.useState<FilterGroupProps | null>(null);
 
   const controlItems = {
     aggregates: [
-      { label: "Year", value: "year" },
+      { label: "Locations", value: "geographicAreaName" },
       { label: "Components", value: "componentName" },
     ],
   };
@@ -50,9 +50,13 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
   const fetchData = useStoreActions(
     (store) => store.LocationAccessToFunding.EligibilityTable.fetch
   );
+
   const isLoading = useStoreState(
     (state) => state.LocationAccessToFunding.EligibilityTable.loading
   );
+  const selectedAggregation = useStoreState(
+    (state) => state.ToolBoxPanelAggregateByState.value
+  );
 
   const cycle = useRecoilValue(locationAccessToFundingCycleAtom);
 
@@ -88,7 +92,10 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
   };
 
   function reloadData() {
-    const filterStr: string[] = [`locations=${props.code}`];
+    const filterStr: string[] = [];
+    if (props.code) {
+      filterStr.push(`locations=${props.code}`);
+    }
     if (search.length > 0) {
       filterStr.push(`q=${search}`);
     }
@@ -114,14 +121,22 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
         }`
       );
     }
+    const aggregateBy = props.code ? selectedAggregate : selectedAggregation;
     fetchData({
-      filterString: `aggregateBy=${selectedAggregate}&${filterStr.join("&")}`,
+      filterString: `aggregateBy=${aggregateBy}&${filterStr.join("&")}`,
     });
   }
 
   React.useEffect(
     () => reloadData(),
-    [props.code, selectedAggregate, appliedFilters, sortBy, cycle]
+    [
+      props.code,
+      selectedAggregation,
+      selectedAggregate,
+      appliedFilters,
+      sortBy,
+      cycle,
+    ]
   );
 
   const [,] = useDebounce(
@@ -148,9 +163,23 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
     setPage(0);
   };
 
+  React.useEffect(() => {
+    if (!props.code) {
+      document.title = "The Data Explorer - Eligibility";
+    } else {
+      setTimeout(() => {
+        const rows = document.querySelectorAll("#simple-table-row");
+        if (rows.length > 0) {
+          // @ts-ignore
+          rows[0].click();
+        }
+      }, 500);
+    }
+  }, []);
+
   let columns = [
-    { name: "Year", key: "year" },
-    { name: "Component", key: "component" },
+    { name: "Location", key: "level1" },
+    { name: "Component", key: "level2" },
     {
       name: "Eligibility Status",
       key: "eligibilityStatus",
@@ -164,10 +193,12 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
     { name: "Income Level", key: "incomeLevel" },
   ];
 
-  if (selectedAggregate === "componentName") {
+  if (
+    (props.code ? selectedAggregate : selectedAggregation) === "componentName"
+  ) {
     columns = [
-      { name: "Component", key: "component" },
-      { name: "Year", key: "year" },
+      { name: "Component", key: "level1" },
+      { name: "Location", key: "level2" },
       {
         name: "Eligibility Status",
         key: "eligibilityStatus",
@@ -190,100 +221,103 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
         `}
       >
         {isLoading && <PageLoader inLoader />}
-        <div
-          role="button"
-          tabIndex={-1}
-          css={`
-            top: 32%;
-            color: #fff;
-            width: 16px;
-            height: 133px;
-            z-index: 1;
-            display: flex;
-            cursor: pointer;
-            position: absolute;
-            background: #262c34;
-            align-items: center;
-            flex-direction: column;
-            justify-content: center;
-            border-radius: 10px 0px 0px 10px;
-            transition: all 0.2s ease-in-out;
-
-            right: ${openToolboxPanel ? "48%" : 0};
-
-            &:hover {
-              background: #13183f;
-            }
-
-            > svg {
-              transform: rotate(${!openToolboxPanel ? "-" : ""}90deg);
-              > path {
-                fill: #fff;
-              }
-            }
-          `}
-          onClick={() => setOpenToolboxPanel(!openToolboxPanel)}
-        >
-          <TriangleXSIcon />
-        </div>
-        <Slide direction="left" in={openToolboxPanel}>
+        {props.code && (
           <div
+            role="button"
+            tabIndex={-1}
             css={`
-              z-index: 4;
-              right: -8px;
-              width: 600px;
-              height: 700px;
-              overflow-y: auto;
+              top: 32%;
+              color: #fff;
+              width: 16px;
+              height: 133px;
+              z-index: 1;
+              display: flex;
+              cursor: pointer;
               position: absolute;
-              background: #f5f5f7;
-              border-radius: 20px;
-              visibility: visible !important;
-              box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.6);
+              background: #262c34;
+              align-items: center;
+              flex-direction: column;
+              justify-content: center;
+              border-radius: 10px 0px 0px 10px;
+              transition: all 0.2s ease-in-out;
 
-              ::-webkit-scrollbar {
-                display: none;
+              right: ${openToolboxPanel ? "48%" : 0};
+
+              &:hover {
+                background: #13183f;
               }
 
-              @media (max-width: 767px) {
-                width: 100vw;
-                box-shadow: none;
-                overflow-y: auto;
+              > svg {
+                transform: rotate(${!openToolboxPanel ? "-" : ""}90deg);
+                > path {
+                  fill: #fff;
+                }
               }
             `}
+            onClick={() => setOpenToolboxPanel(!openToolboxPanel)}
           >
+            <TriangleXSIcon />
+          </div>
+        )}
+        {props.code && (
+          <Slide direction="left" in={openToolboxPanel}>
             <div
               css={`
-                width: 100%;
+                z-index: 4;
+                right: -8px;
+                width: 600px;
+                height: 700px;
+                overflow-y: auto;
+                position: absolute;
+                background: #f5f5f7;
+                border-radius: 20px;
+                visibility: visible !important;
+                box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.6);
 
-                display: flex;
+                ::-webkit-scrollbar {
+                  display: none;
+                }
 
-                flex-direction: column;
+                @media (max-width: 767px) {
+                  width: 100vw;
+                  box-shadow: none;
+                  overflow-y: auto;
+                }
               `}
             >
-              <ToolBoxPanelAggregateBy
-                title="Aggregate by"
-                selected={selectedAggregate}
-                options={controlItems.aggregates}
-                setSelected={setSelectedAggregate}
-              />
-              <ToolBoxPanelFilters
-                groups={filterGroups}
-                expandedGroup={expandedGroup}
-                appliedFilters={appliedFilters}
-                setExpandedGroup={setExpandedGroup}
-                setAppliedFilters={setAppliedFilters}
-                defaultAppliedFilters={{
-                  year: [],
-                  components: [],
-                  status: [],
-                  diseaseBurden: [],
-                }}
-                groupAppliedFiltersPathKey={groupAppliedFiltersPathKey}
-              />
-            </div>
-          </div>
-        </Slide>
+              <div
+                css={`
+                  width: 100%;
+
+                  display: flex;
 
+                  flex-direction: column;
+                `}
+              >
+                <ToolBoxPanelAggregateBy
+                  title="Aggregate by"
+                  selected={selectedAggregate}
+                  options={controlItems.aggregates}
+                  setSelected={setSelectedAggregate}
+                />
+                <ToolBoxPanelFilters
+                  groups={filterGroups}
+                  expandedGroup={expandedGroup}
+                  appliedFilters={appliedFilters}
+                  setExpandedGroup={setExpandedGroup}
+                  setAppliedFilters={setAppliedFilters}
+                  defaultAppliedFilters={{
+                    year: [],
+                    components: [],
+                    status: [],
+                    diseaseBurden: [],
+                  }}
+                  groupAppliedFiltersPathKey={groupAppliedFiltersPathKey}
+                />
+              </div>
+            </div>
+          </Slide>
+        )}
         <EligibilityTable
           search={search}
           sortBy={sortBy}
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
index f66b98999..1d804601e 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
@@ -139,23 +139,18 @@ export default function LocationAccessToFundingWrapper(props: Props) {
                 Below are the components which are eligible for an allocation
                 for the selected allocation period, according to the Global Fund
                 Eligibility Policy. Eligibility does not guarantee a funding
-                allocation.
+                allocation.{" "}
                 <a href="https://www.theglobalfund.org/en/applying-for-funding/understand-and-prepare/eligibility/">
-                  {" "}
-                  Learn more about Eligibility here{" "}
+                  Learn more about Eligibility here
                 </a>{" "}
                 or{" "}
                 <Link to="/viz/eligibility/table">
-                  {" "}
                   see the full history of eligibility for this country.
                 </Link>
               </p>
             </div>
             <Box height="50px" />
-            <AccessToFundingEligibilityTableWrapper
-              code={props.code}
-              codeParam={props.codeParam}
-            />
+            <AccessToFundingEligibilityTableWrapper code={props.code} />
           </div>
         )}
         <div>
diff --git a/src/app/state/api/action-reducers/locationDetail/accessToFunding.ts b/src/app/state/api/action-reducers/locationDetail/accessToFunding.ts
index 563e7b959..129891470 100644
--- a/src/app/state/api/action-reducers/locationDetail/accessToFunding.ts
+++ b/src/app/state/api/action-reducers/locationDetail/accessToFunding.ts
@@ -2,7 +2,7 @@ import { APIModel } from "app/state/api";
 import { ApiCallModel } from "app/state/api/interfaces";
 
 export const EligibilityLocation: ApiCallModel = {
-  ...APIModel(`${process.env.REACT_APP_API}/eligibility/location/table`),
+  ...APIModel(`${process.env.REACT_APP_API}/eligibility/table`),
 };
 
 export const FundingRequestsTable: ApiCallModel = {

From 3f0b2bcf667f6cfd22d48ed72c5bbb7a1f75d0fa Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Thu, 27 Apr 2023 15:23:24 +0300
Subject: [PATCH 22/69] chore: access to funding alignments

---
 .../Charts/common/breadcrumbs/index.tsx       |   2 +-
 .../components/Table/Expandable/Toolbar.tsx   |   5 +-
 src/app/hooks/useGetAllVizData.tsx            |   2 +-
 src/app/modules/viz-module/index.tsx          |   4 +-
 .../eligibility/tableWrapper.tsx              |   2 +-
 .../table/data-wrappers/generic.tsx           | 206 ------------------
 .../table/data-wrappers/location.tsx          | 154 -------------
 .../sub-modules/eligibility/table/index.tsx   |  95 +++++---
 .../table/data-wrappers/generic.tsx           |   1 -
 src/app/utils/exportCSV.ts                    | 130 ++++++-----
 10 files changed, 151 insertions(+), 450 deletions(-)
 delete mode 100644 src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/generic.tsx
 delete mode 100644 src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/location.tsx

diff --git a/src/app/components/Charts/common/breadcrumbs/index.tsx b/src/app/components/Charts/common/breadcrumbs/index.tsx
index bc92b41ab..42603708c 100644
--- a/src/app/components/Charts/common/breadcrumbs/index.tsx
+++ b/src/app/components/Charts/common/breadcrumbs/index.tsx
@@ -48,7 +48,7 @@ export default function BreadCrumbs() {
         z-index: 10;
         position: sticky;
         margin-top: 3rem;
-        background: ${document.body.style.background};
+        background: ${appColors.COMMON.WHITE};
       `}
     >
       <div
diff --git a/src/app/components/Table/Expandable/Toolbar.tsx b/src/app/components/Table/Expandable/Toolbar.tsx
index 86d9ed959..a2f6dd5d1 100644
--- a/src/app/components/Table/Expandable/Toolbar.tsx
+++ b/src/app/components/Table/Expandable/Toolbar.tsx
@@ -181,7 +181,10 @@ export function TableToolbar(props: TableToolbarProps) {
                     location.pathname.replace(`/${params.code}`, "/<code>"),
                     []
                   );
-                  if (props.multiVizPageDataKey) {
+                  if (
+                    props.multiVizPageDataKey &&
+                    data[props.multiVizPageDataKey]
+                  ) {
                     data = get(data, props.multiVizPageDataKey, []);
                   }
                   setCSVLinkData(
diff --git a/src/app/hooks/useGetAllVizData.tsx b/src/app/hooks/useGetAllVizData.tsx
index a4f276af6..45509bbd5 100644
--- a/src/app/hooks/useGetAllVizData.tsx
+++ b/src/app/hooks/useGetAllVizData.tsx
@@ -342,7 +342,7 @@ export function useGetAllVizData() {
     "/viz/commitment/table": disbursementsTreemap,
     // Eligibility
     "/viz/eligibility": eligibility,
-    "/viz/eligibility/table": eligibility,
+    "/viz/eligibility/table": locationDetailEligibility,
     // Pledges & Contributions
     "/viz/pledges-contributions/map": pledgesContributionsGeomap,
     "/viz/pledges-contributions/table": pledgesContributionsTable,
diff --git a/src/app/modules/viz-module/index.tsx b/src/app/modules/viz-module/index.tsx
index 832dd249d..53d2ec462 100644
--- a/src/app/modules/viz-module/index.tsx
+++ b/src/app/modules/viz-module/index.tsx
@@ -17,6 +17,7 @@ import { EligibilityModule } from "app/modules/viz-module/sub-modules/eligibilit
 import { InvestmentsGeoMap } from "app/modules/viz-module/sub-modules/investments/geomap";
 import { AllocationsGeoMap } from "app/modules/viz-module/sub-modules/allocations/geomap";
 import { AllocationsTableModule } from "app/modules/viz-module/sub-modules/allocations/table";
+import { EligibilityTableModuleWrapper } from "app/modules/viz-module/sub-modules/eligibility/table";
 import { PledgesContributionsTable } from "app/modules/viz-module/sub-modules/pledgescontributions/table";
 import { PledgesContributionsGeoMap } from "app/modules/viz-module/sub-modules/pledgescontributions/geomap";
 import { PledgesContributionsTreemap } from "app/modules/viz-module/sub-modules/pledgescontributions/treemap";
@@ -26,7 +27,6 @@ import { GenericInvestmentsTableWrapper } from "app/modules/viz-module/sub-modul
 import { GenericBudgetsTimeCycleWrapper } from "app/modules/viz-module/sub-modules/budgets/time-cycle/data-wrappers/generic";
 import { GenericFundingRequestWrapper } from "app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic";
 import { GenericInvestmentsDisbursedWrapper } from "app/modules/viz-module/sub-modules/investments/disbursed/data-wrappers/generic";
-import { AccessToFundingEligibilityTableWrapper } from "app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper";
 import { GenericInvestmentsTimeCycleWrapper } from "app/modules/viz-module/sub-modules/investments/time-cycle/data-wrappers/generic";
 import {
   filtergroups,
@@ -211,7 +211,7 @@ export default function VizModule() {
           </Route>
           {/* Eligibility */}
           <Route path="/viz/eligibility/table">
-            <AccessToFundingEligibilityTableWrapper />
+            <EligibilityTableModuleWrapper />
           </Route>
           <Route path="/viz/eligibility">
             <EligibilityModule />
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
index 9e3791e91..103c5fc4b 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
@@ -325,7 +325,7 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
           setSearch={setSearch}
           setSortBy={setSortBy}
           columns={columns}
-          title={cycle || ""}
+          title={props.code ? cycle || "" : ""}
         />
         <TablePagination
           page={page}
diff --git a/src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/generic.tsx b/src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/generic.tsx
deleted file mode 100644
index 1c0d422a0..000000000
--- a/src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/generic.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-/* third-party */
-import React from "react";
-import get from "lodash/get";
-import find from "lodash/find";
-import filter from "lodash/filter";
-import uniqueId from "lodash/uniqueId";
-import { useHistory } from "react-router-dom";
-import TablePagination from "@material-ui/core/TablePagination";
-import { useDebounce, useTitle, useUpdateEffect } from "react-use";
-import { useStoreActions, useStoreState } from "app/state/store/hooks";
-/* project */
-import { PageLoader } from "app/modules/common/page-loader";
-import { SimpleTableRow } from "app/components/Table/Simple/data";
-import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
-import { DotChartModel } from "app/components/Charts/Eligibility/DotChart/data";
-import { EligibilityTable } from "app/modules/viz-module/sub-modules/eligibility/table";
-
-function getTableData(data: DotChartModel[]): SimpleTableRow[] {
-  const updatedTableData: SimpleTableRow[] = [];
-  data.forEach((item: DotChartModel) => {
-    let instance = {
-      name: item.name,
-    };
-    item.items.forEach((subItem: any) => {
-      instance = {
-        ...instance,
-        [subItem.name]: subItem.status,
-      };
-    });
-    updatedTableData.push(instance);
-  });
-  return updatedTableData;
-}
-
-export function GenericEligibilityWrapper() {
-  useTitle("The Data Explorer - Eligibility");
-
-  const history = useHistory();
-
-  const [search, setSearch] = React.useState("");
-  const [sortBy, setSortBy] = React.useState("name ASC");
-
-  const selectedYear = useStoreState(
-    (state) => state.ToolBoxPanelEligibilityYearState.value
-  );
-
-  const fetchYearOptionsData = useStoreActions(
-    (store) => store.EligibilityYears.fetch
-  );
-
-  const dataPathSteps = useStoreState((state) => state.DataPathSteps.steps);
-  const data = useStoreState(
-    (state) => get(state.EligibilityTable.data, "data", []) as DotChartModel[]
-  );
-
-  const [page, setPage] = React.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React.useState(10);
-  const [tableData, setTableData] = React.useState<SimpleTableRow[]>(
-    getTableData(data)
-  );
-
-  const fetchData = useStoreActions((store) => store.EligibilityTable.fetch);
-
-  const isLoading = useStoreState((state) => state.EligibilityTable.loading);
-
-  const appliedFilters = useStoreState((state) => state.AppliedFiltersState);
-
-  const addDataPathSteps = useStoreActions(
-    (actions) => actions.DataPathSteps.addSteps
-  );
-
-  React.useEffect(() => {
-    fetchYearOptionsData({});
-    if (
-      dataPathSteps.length === 0 ||
-      !find(dataPathSteps, { name: "Access to Funding: Eligibility" })
-    ) {
-      addDataPathSteps([
-        {
-          id: uniqueId(),
-          name: "Access to Funding: Eligibility",
-          path: `${history.location.pathname}${history.location.search}`,
-        },
-      ]);
-    }
-  }, []);
-
-  function reloadData() {
-    const filterString = getAPIFormattedFilters(appliedFilters, {
-      search,
-      sortBy,
-    });
-    fetchData({
-      filterString: `aggregateBy=geographicAreaName&periods=${selectedYear}${
-        filterString.length > 0 ? `&${filterString}` : ""
-      }`,
-    });
-  }
-
-  React.useEffect(() => reloadData(), [appliedFilters, selectedYear, sortBy]);
-
-  useUpdateEffect(() => setTableData(getTableData(data)), [data]);
-
-  useUpdateEffect(() => {
-    if (search.length === 0) {
-      reloadData();
-    }
-  }, [search]);
-
-  const [,] = useDebounce(
-    () => {
-      if (search.length > 0) {
-        reloadData();
-      }
-    },
-    500,
-    [search]
-  );
-
-  const handleChangePage = (
-    _event: React.MouseEvent<HTMLButtonElement> | null,
-    newPage: number
-  ) => {
-    setPage(newPage);
-  };
-
-  const handleChangeRowsPerPage = (
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    setRowsPerPage(parseInt(event.target.value, 10));
-    setPage(0);
-  };
-
-  if (isLoading) {
-    return <PageLoader />;
-  }
-
-  const columns =
-    data.length > 0
-      ? filter(
-          Object.keys(tableData.length > 0 ? tableData[0] : {}),
-          (key) => key !== "children"
-        ).map((key) => ({
-          name: key === "name" ? "Location" : key,
-          key,
-        }))
-      : [];
-
-  return (
-    <React.Fragment>
-      <div
-        css={`
-          gap: 6px;
-          display: flex;
-          align-items: center;
-
-          > * {
-            @supports (-webkit-touch-callout: none) and (not (translate: none)) {
-              &:not(:last-child) {
-                margin-right: 6px;
-              }
-            }
-          }
-        `}
-      >
-        <div
-          css={`
-            font-weight: bold;
-            margin-right: 10px;
-            font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
-          `}
-        >
-          Year {selectedYear}
-        </div>
-      </div>
-      <div css="width: 100%;height: 25px;" />
-      <EligibilityTable
-        search={search}
-        sortBy={sortBy}
-        data={tableData.slice(page * rowsPerPage, (page + 1) * rowsPerPage)}
-        isLoading={isLoading}
-        setSearch={setSearch}
-        setSortBy={setSortBy}
-        columns={columns}
-      />
-      <TablePagination
-        page={page}
-        component="div"
-        count={data.length}
-        rowsPerPage={rowsPerPage}
-        onPageChange={handleChangePage}
-        onRowsPerPageChange={handleChangeRowsPerPage}
-        css={`
-          @media (min-width: 768px) {
-            .MuiTablePagination-toolbar {
-              padding-left: 40px;
-            }
-            .MuiTablePagination-spacer {
-              display: none;
-            }
-          }
-        `}
-      />
-    </React.Fragment>
-  );
-}
diff --git a/src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/location.tsx b/src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/location.tsx
deleted file mode 100644
index df3c57236..000000000
--- a/src/app/modules/viz-module/sub-modules/eligibility/table/data-wrappers/location.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-/* third-party */
-import React from "react";
-import get from "lodash/get";
-import TablePagination from "@material-ui/core/TablePagination";
-import { useDebounce, useTitle, useUpdateEffect } from "react-use";
-import { useStoreActions, useStoreState } from "app/state/store/hooks";
-/* project */
-import { PageLoader } from "app/modules/common/page-loader";
-import { SimpleTableRow } from "app/components/Table/Simple/data";
-import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
-import { EligibilityTable } from "app/modules/viz-module/sub-modules/eligibility/table";
-import {
-  incomeLevels,
-  diseaseBurdens,
-  EligibilityScatterplotDataItemModel,
-} from "app/components/Charts/Eligibility/Scatterplot/data";
-
-function getTableData(
-  data: EligibilityScatterplotDataItemModel[]
-): SimpleTableRow[] {
-  return data.map((item: EligibilityScatterplotDataItemModel) => ({
-    year: item.x,
-    component: item.y,
-    incomeLevel: get(incomeLevels, `[${item.incomeLevel}]`, item.incomeLevel),
-    diseaseBurden: get(diseaseBurdens, `[${item.diseaseBurden}]`, ""),
-    status: item.eligibility,
-  }));
-}
-
-interface Props {
-  code: string;
-}
-
-export function LocationEligibilityTableWrapper(props: Props) {
-  useTitle("The Data Explorer - Location Eligibility");
-
-  const [search, setSearch] = React.useState("");
-  const [sortBy, setSortBy] = React.useState("year ASC");
-
-  const data = useStoreState(
-    (state) =>
-      get(
-        state.EligibilityCountry.data,
-        "data",
-        []
-      ) as EligibilityScatterplotDataItemModel[]
-  );
-
-  const [page, setPage] = React.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React.useState(10);
-  const [tableData, setTableData] = React.useState<SimpleTableRow[]>(
-    getTableData(data)
-  );
-
-  const fetchData = useStoreActions((store) => store.EligibilityCountry.fetch);
-
-  const isLoading = useStoreState((state) => state.EligibilityCountry.loading);
-
-  const appliedFilters = useStoreState((state) => state.AppliedFiltersState);
-
-  function reloadData() {
-    const filterString = getAPIFormattedFilters(
-      props.code
-        ? {
-            ...appliedFilters,
-            locations: [...appliedFilters.locations, props.code],
-          }
-        : appliedFilters,
-      { search, sortBy }
-    );
-    fetchData({
-      filterString: `${filterString}${
-        filterString.length > 0 ? "&" : ""
-      }view=table`,
-    });
-  }
-
-  React.useEffect(() => reloadData(), [props.code, appliedFilters, sortBy]);
-
-  useUpdateEffect(() => setTableData(getTableData(data)), [data]);
-
-  useUpdateEffect(() => {
-    if (search.length === 0) {
-      reloadData();
-    }
-  }, [search]);
-
-  const [,] = useDebounce(
-    () => {
-      if (search.length > 0) {
-        reloadData();
-      }
-    },
-    500,
-    [search]
-  );
-
-  const handleChangePage = (
-    _event: React.MouseEvent<HTMLButtonElement> | null,
-    newPage: number
-  ) => {
-    setPage(newPage);
-  };
-
-  const handleChangeRowsPerPage = (
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    setRowsPerPage(parseInt(event.target.value, 10));
-    setPage(0);
-  };
-
-  if (isLoading) {
-    return <PageLoader />;
-  }
-
-  return (
-    <>
-      <EligibilityTable
-        search={search}
-        sortBy={sortBy}
-        data={tableData.slice(page * rowsPerPage, (page + 1) * rowsPerPage)}
-        isLoading={isLoading}
-        setSearch={setSearch}
-        setSortBy={setSortBy}
-        columns={[
-          { name: "Year", key: "year" },
-          { name: "Component", key: "component" },
-          { name: "Income Level", key: "incomeLevel" },
-          { name: "Disease Burden", key: "diseaseBurden" },
-          { name: "Status", key: "status" },
-        ]}
-      />
-
-      <TablePagination
-        page={page}
-        component="div"
-        count={data.length}
-        rowsPerPage={rowsPerPage}
-        onPageChange={handleChangePage}
-        onRowsPerPageChange={handleChangeRowsPerPage}
-        css={`
-          @media (min-width: 768px) {
-            .MuiTablePagination-toolbar {
-              padding-left: 40px;
-            }
-            .MuiTablePagination-spacer {
-              display: none;
-            }
-          }
-        `}
-      />
-    </>
-  );
-}
diff --git a/src/app/modules/viz-module/sub-modules/eligibility/table/index.tsx b/src/app/modules/viz-module/sub-modules/eligibility/table/index.tsx
index 3f2d7e435..ecefaff21 100644
--- a/src/app/modules/viz-module/sub-modules/eligibility/table/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/eligibility/table/index.tsx
@@ -1,37 +1,68 @@
-/* third-party */
 import React from "react";
-/* project */
-import { SimpleTable } from "app/components/Table/Simple";
-import { PageLoader } from "app/modules/common/page-loader";
-import {
-  SimpleTableRow,
-  SimpleTableColumn,
-} from "app/components/Table/Simple/data";
-
-interface EligibilityTableProps {
-  search: string;
-  sortBy: string;
-  isLoading: boolean;
-  data: SimpleTableRow[];
-  columns: SimpleTableColumn[];
-  setSearch: (value: string) => void;
-  setSortBy: (value: string) => void;
-}
-
-export function EligibilityTable(props: EligibilityTableProps) {
-  if (props.isLoading) {
-    return <PageLoader />;
-  }
+import { appColors } from "app/theme";
+import { AccessToFundingEligibilityTableWrapper } from "app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper";
 
+export function EligibilityTableModuleWrapper() {
   return (
-    <SimpleTable
-      search={props.search}
-      sortBy={props.sortBy}
-      rows={props.data}
-      title="Eligibility"
-      columns={props.columns}
-      onSearchChange={props.setSearch}
-      onSortByChange={props.setSortBy}
-    />
+    <React.Fragment>
+      <div
+        css={`
+          padding: 40px 0;
+          text-align: center;
+        `}
+      >
+        <h1
+          css={`
+            font-size: 24px;
+            font-weight: 700;
+            line-height: 24px;
+            margin: 0 0 10px 0;
+            font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
+          `}
+        >
+          Access to Funding
+        </h1>
+        <h2
+          css={`
+            font-size: 18px;
+            font-weight: 700;
+            line-height: 20px;
+            margin: 0 0 16px 0;
+            font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
+          `}
+        >
+          Eligibility
+        </h2>
+        <div
+          css={`
+            p {
+              width: 50%;
+              margin: 0 auto;
+              font-size: 14px;
+              line-height: 17px;
+              color: ${appColors.COMMON.PRIMARY_COLOR_1};
+
+              @media (max-width: 768px) {
+                width: 90%;
+              }
+            }
+          `}
+        >
+          <p>
+            Below are the components which are eligible for an allocation for
+            the selected allocation period, according to the Global Fund
+            Eligibility Policy. Eligibility does not guarantee a funding
+            allocation. Learn more about Eligibility{" "}
+            <a
+              target="_blank"
+              href="https://www.theglobalfund.org/en/applying-for-funding/understand-and-prepare/eligibility/"
+            >
+              here
+            </a>
+          </p>
+        </div>
+      </div>
+      <AccessToFundingEligibilityTableWrapper />
+    </React.Fragment>
   );
 }
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
index 22b4655c2..f5c8e9ff5 100644
--- a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
@@ -98,7 +98,6 @@ export function GenericFundingRequestWrapper() {
           <InfoIcon />
         </div>
       </div>
-      <div css="width: 100%;height: 25px;" />
       <Table
         data={data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)}
         search={search}
diff --git a/src/app/utils/exportCSV.ts b/src/app/utils/exportCSV.ts
index 525e245bd..d324c7114 100644
--- a/src/app/utils/exportCSV.ts
+++ b/src/app/utils/exportCSV.ts
@@ -704,38 +704,28 @@ export function exportCSV(
         ],
       };
     case "/viz/eligibility/table":
-      if (options.isDetail) {
-        data.forEach((item: any) => {
-          csvData.push({
-            year: item.x,
-            component: item.y,
-            incomeLevel: get(
-              incomeLevels,
-              `[${item.incomeLevel}]`,
-              item.incomeLevel
-            ),
-            diseaseBurden: get(diseaseBurdens, `[${item.diseaseBurden}]`, ""),
-            eligibility: item.eligibility,
-          });
-        });
-        return {
-          data: csvData,
-          filename: "location-eligibility.csv",
-          headers: [
-            { label: "Year", key: "year" },
-            { label: "Component", key: "component" },
-            { label: "Income Level", key: "incomeLevel" },
-            { label: "Disease Burden", key: "diseaseBurden" },
-            { label: "Status", key: "eligibility" },
-          ],
-        };
-      }
       data.forEach((item: any) => {
-        item.items.forEach((subitem: any) => {
-          csvData.push({
-            [isComponent ? "component" : "location"]: item.name,
-            [!isComponent ? "component" : "location"]: subitem.name,
-            status: subitem.status,
+        item.children.forEach((subItem: any) => {
+          subItem.children.forEach((subSubItem: any) => {
+            csvData.push(
+              isComponent
+                ? {
+                    component: item.level1,
+                    year: subItem.level1,
+                    location: subSubItem.level2,
+                    status: subSubItem.eligibilityStatus,
+                    diseaseBurden: subSubItem.diseaseBurden,
+                    incomeLevel: subSubItem.incomeLevel,
+                  }
+                : {
+                    location: item.level1,
+                    year: subItem.level1,
+                    component: subSubItem.level2,
+                    status: subSubItem.eligibilityStatus,
+                    diseaseBurden: subSubItem.diseaseBurden,
+                    incomeLevel: subItem.incomeLevel,
+                  }
+            );
           });
         });
       });
@@ -743,36 +733,74 @@ export function exportCSV(
         data: csvData,
         filename: `eligibility-by-${
           isComponent ? "component" : "location"
-        }-${yearDropdownNode?.getAttribute("value")}.csv`,
-        headers: [
-          { label: "Component", key: "component" },
-          { label: "Location", key: "location" },
-          { label: "Status", key: "status" },
-        ],
+        }.csv`,
+        headers: isComponent
+          ? [
+              { label: "Component", key: "component" },
+              { label: "Year", key: "year" },
+              { label: "Location", key: "location" },
+              { label: "Status", key: "status" },
+              { label: "Disease Burden", key: "diseaseBurden" },
+              { label: "Income Level", key: "incomeLevel" },
+            ]
+          : [
+              { label: "Location", key: "location" },
+              { label: "Year", key: "year" },
+              { label: "Component", key: "component" },
+              { label: "Status", key: "status" },
+              { label: "Disease Burden", key: "diseaseBurden" },
+              { label: "Income Level", key: "incomeLevel" },
+            ],
       };
     case "/viz/access-to-funding":
       if (multiVizPageDataKey === "eligibility") {
         data.forEach((item: any) => {
           item.children.forEach((subItem: any) => {
-            csvData.push({
-              year: item.year,
-              component: subItem.component,
-              status: subItem.eligibilityStatus,
-              diseaseBurden: subItem.diseaseBurden,
-              incomeLevel: item.incomeLevel,
+            subItem.children.forEach((subSubItem: any) => {
+              csvData.push(
+                isComponent
+                  ? {
+                      component: item.level1,
+                      year: subItem.level1,
+                      location: subSubItem.level2,
+                      status: subSubItem.eligibilityStatus,
+                      diseaseBurden: subSubItem.diseaseBurden,
+                      incomeLevel: subSubItem.incomeLevel,
+                    }
+                  : {
+                      location: item.level1,
+                      year: subItem.level1,
+                      component: subSubItem.level2,
+                      status: subSubItem.eligibilityStatus,
+                      diseaseBurden: subSubItem.diseaseBurden,
+                      incomeLevel: subItem.incomeLevel,
+                    }
+              );
             });
           });
         });
         return {
           data: csvData,
-          filename: "access-to-funding-eligibility.csv",
-          headers: [
-            { label: "Year", key: "year" },
-            { label: "Component", key: "component" },
-            { label: "Status", key: "status" },
-            { label: "Disease Burden", key: "diseaseBurden" },
-            { label: "Income Level", key: "incomeLevel" },
-          ],
+          filename: `access-to-funding-eligibility-by-${
+            isComponent ? "component" : "location"
+          }.csv`,
+          headers: isComponent
+            ? [
+                { label: "Component", key: "component" },
+                { label: "Year", key: "year" },
+                { label: "Location", key: "location" },
+                { label: "Status", key: "status" },
+                { label: "Disease Burden", key: "diseaseBurden" },
+                { label: "Income Level", key: "incomeLevel" },
+              ]
+            : [
+                { label: "Location", key: "location" },
+                { label: "Year", key: "year" },
+                { label: "Component", key: "component" },
+                { label: "Status", key: "status" },
+                { label: "Disease Burden", key: "diseaseBurden" },
+                { label: "Income Level", key: "incomeLevel" },
+              ],
         };
       }
       if (multiVizPageDataKey === "fundingRequest") {

From 11c09ee8c709ad2d953d61f0fa1f9a04c43918dd Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Thu, 27 Apr 2023 16:18:44 +0300
Subject: [PATCH 23/69] feat: add breadcrumbs for access to funding

---
 .../eligibility/tableWrapper.tsx              | 18 ++++++++++---
 .../fundingRequest/tableWrapper.tsx           |  9 ++++---
 .../sub-modules/accessToFunding/location.tsx  | 23 +++++++++-------
 .../sub-modules/accessToFunding/style.ts      |  3 +++
 .../sub-modules/eligibility/table/index.tsx   | 26 +++++++++++++++++++
 .../table/data-wrappers/generic.tsx           | 25 ++++++++++++++++++
 6 files changed, 87 insertions(+), 17 deletions(-)

diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
index 103c5fc4b..1aad5cc27 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
@@ -69,6 +69,10 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
     diseaseBurden: [],
   });
 
+  const storedAppliedFilters = useStoreState(
+    (state) => state.AppliedFiltersState
+  );
+
   const filterGroups = [
     {
       name: "Eligibility Years",
@@ -93,8 +97,13 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
 
   function reloadData() {
     const filterStr: string[] = [];
+    const appliedFiltersToUse = props.code
+      ? appliedFilters
+      : storedAppliedFilters;
     if (props.code) {
       filterStr.push(`locations=${props.code}`);
+    } else {
+      filterStr.push(`locations=${appliedFiltersToUse.locations.join(",")}`);
     }
     if (search.length > 0) {
       filterStr.push(`q=${search}`);
@@ -105,11 +114,11 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
     if (appliedFilters.year.length > 0) {
       filterStr.push(`periods=${appliedFilters.year.join(",")}`);
     }
-    if (appliedFilters.components.length > 0) {
-      filterStr.push(`components=${appliedFilters.components.join(",")}`);
+    if (appliedFiltersToUse.components.length > 0) {
+      filterStr.push(`components=${appliedFiltersToUse.components.join(",")}`);
     }
-    if (appliedFilters.status.length > 0) {
-      filterStr.push(`status=${appliedFilters.status.join(",")}`);
+    if (appliedFiltersToUse.status.length > 0) {
+      filterStr.push(`status=${appliedFiltersToUse.status.join(",")}`);
     }
     if (appliedFilters.diseaseBurden.length > 0) {
       filterStr.push(`diseaseBurden=${appliedFilters.diseaseBurden.join(",")}`);
@@ -131,6 +140,7 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
     () => reloadData(),
     [
       props.code,
+      storedAppliedFilters,
       selectedAggregation,
       selectedAggregate,
       appliedFilters,
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
index 70c8bdf32..494d4cc29 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
@@ -90,10 +90,11 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
     });
   }
 
-  React.useEffect(
-    () => reloadData(),
-    [props.code, appliedFilters, sortBy, cycle]
-  );
+  React.useEffect(() => {
+    if ((props.code && cycle) || !props.code) {
+      reloadData();
+    }
+  }, [props.code, appliedFilters, sortBy, cycle]);
 
   const [,] = useDebounce(
     () => {
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
index 1d804601e..2be6caae1 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
@@ -64,7 +64,7 @@ export default function LocationAccessToFundingWrapper(props: Props) {
 
   React.useEffect(() => {
     return () => {
-      setCycle("All");
+      setCycle(null);
     };
   }, []);
 
@@ -94,10 +94,12 @@ export default function LocationAccessToFundingWrapper(props: Props) {
           <b>Eligibility, Allocation & Funding Requests</b>
         </h3>
         <p>
-          Description of Access to Funding / eligibility / FR: We unite the
-          world to find solutions that have the most impact, and we take them to
-          scale worldwide. It’s working. We won’t stop until the job is
-          finished.
+          Eligibility for Global Fund support is determined by the income
+          classification and disease burden of a country or region. Resources
+          are allocated to eligible countries or regions with the highest
+          disease burden, the least economic capacity, and where key and
+          vulnerable populations are disproportionately affected by the three
+          diseases.
         </p>
       </div>
       <Box height={25} />
@@ -139,12 +141,15 @@ export default function LocationAccessToFundingWrapper(props: Props) {
                 Below are the components which are eligible for an allocation
                 for the selected allocation period, according to the Global Fund
                 Eligibility Policy. Eligibility does not guarantee a funding
-                allocation.{" "}
-                <a href="https://www.theglobalfund.org/en/applying-for-funding/understand-and-prepare/eligibility/">
-                  Learn more about Eligibility here
+                allocation. Learn more about Eligibility{" "}
+                <a
+                  target="_blank"
+                  href="https://www.theglobalfund.org/en/applying-for-funding/understand-and-prepare/eligibility/"
+                >
+                  here
                 </a>{" "}
                 or{" "}
-                <Link to="/viz/eligibility/table">
+                <Link to={`/viz/eligibility/table?locations=${props.code}`}>
                   see the full history of eligibility for this country.
                 </Link>
               </p>
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts b/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts
index 2dc1f6eed..1ecbf86d0 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts
@@ -44,6 +44,9 @@ export const descriptioncss = css`
 `;
 
 export const vizcss = css`
+  a {
+    color: #252c34;
+  }
   h4 {
     font-size: 18px;
     color: #252c34;
diff --git a/src/app/modules/viz-module/sub-modules/eligibility/table/index.tsx b/src/app/modules/viz-module/sub-modules/eligibility/table/index.tsx
index ecefaff21..7c2f013b5 100644
--- a/src/app/modules/viz-module/sub-modules/eligibility/table/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/eligibility/table/index.tsx
@@ -1,8 +1,34 @@
 import React from "react";
+import find from "lodash/find";
 import { appColors } from "app/theme";
+import uniqueId from "lodash/uniqueId";
+import { useHistory } from "react-router-dom";
+import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import { AccessToFundingEligibilityTableWrapper } from "app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper";
 
 export function EligibilityTableModuleWrapper() {
+  const history = useHistory();
+
+  const addDataPathSteps = useStoreActions(
+    (actions) => actions.DataPathSteps.addSteps
+  );
+  const dataPathSteps = useStoreState((state) => state.DataPathSteps.steps);
+
+  React.useEffect(() => {
+    if (
+      dataPathSteps.length === 0 ||
+      !find(dataPathSteps, { name: "Access to Funding: Eligibility" })
+    ) {
+      addDataPathSteps([
+        {
+          id: uniqueId(),
+          name: "Access to Funding: Eligibility",
+          path: `${history.location.pathname}${history.location.search}`,
+        },
+      ]);
+    }
+  }, []);
+
   return (
     <React.Fragment>
       <div
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
index f5c8e9ff5..aefbbf04a 100644
--- a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
@@ -1,6 +1,9 @@
 /* third-party */
 import React from "react";
 import get from "lodash/get";
+import find from "lodash/find";
+import uniqueId from "lodash/uniqueId";
+import { useHistory } from "react-router-dom";
 import { useDebounce, useTitle } from "react-use";
 import TablePagination from "@material-ui/core/TablePagination";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
@@ -16,6 +19,8 @@ import { fundingRequestColumns } from "app/modules/viz-module/sub-modules/fundin
 export function GenericFundingRequestWrapper() {
   useTitle("The Data Explorer - Funding Requests");
 
+  const history = useHistory();
+
   const cmsData = useCMSData({ returnData: true });
 
   const [search, setSearch] = React.useState("");
@@ -39,6 +44,26 @@ export function GenericFundingRequestWrapper() {
 
   const appliedFilters = useStoreState((state) => state.AppliedFiltersState);
 
+  const addDataPathSteps = useStoreActions(
+    (actions) => actions.DataPathSteps.addSteps
+  );
+  const dataPathSteps = useStoreState((state) => state.DataPathSteps.steps);
+
+  React.useEffect(() => {
+    if (
+      dataPathSteps.length === 0 ||
+      !find(dataPathSteps, { name: "Access to Funding: Funding Requests" })
+    ) {
+      addDataPathSteps([
+        {
+          id: uniqueId(),
+          name: "Access to Funding: Funding Requests",
+          path: `${history.location.pathname}${history.location.search}`,
+        },
+      ]);
+    }
+  }, []);
+
   function reloadData() {
     const filterString = getAPIFormattedFilters(appliedFilters, {
       search,

From ed91de42e664da1819335980d54acbe060b1721b Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Mon, 1 May 2023 13:32:39 +0100
Subject: [PATCH 24/69] fix: adjusted chart placeholder size

---
 .../sub-modules/allocations/components/nodata/index.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/modules/viz-module/sub-modules/allocations/components/nodata/index.tsx b/src/app/modules/viz-module/sub-modules/allocations/components/nodata/index.tsx
index 02e4856dc..e2c861382 100644
--- a/src/app/modules/viz-module/sub-modules/allocations/components/nodata/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/allocations/components/nodata/index.tsx
@@ -4,8 +4,8 @@ import { appColors } from "app/theme";
 export function NoDataAllocations() {
   return (
     <svg
-      width="617"
-      height="589"
+      width="480"
+      height="580"
       viewBox="0 0 617 589"
       fill="none"
       css={`

From 6fb23e4bf5e3d64080efdcf1462dcfd2242c3f2a Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Thu, 4 May 2023 12:33:59 +0300
Subject: [PATCH 25/69] chore: access to funding review alignments

---
 src/app/components/Table/Simple/index.tsx     |   4 +-
 src/app/components/Table/funding/index.tsx    | 236 ++++++++---------
 .../ToolBoxPanel/components/filters/data.ts   | 122 ++++-----
 src/app/hooks/useAppliedFilters.tsx           |   6 +
 src/app/hooks/useFilterOptions.tsx            |  10 +
 src/app/hooks/useUrlFilters.tsx               |  20 ++
 .../allocations/radialChart.tsx               |  15 +-
 .../eligibility/eligibilityTable.tsx          |   1 +
 .../eligibility/tableWrapper.tsx              | 241 +++++++++---------
 .../fundingRequest/tableWrapper.tsx           | 181 ++++++-------
 .../sub-modules/accessToFunding/location.tsx  |   4 +-
 .../table/data-wrappers/data.ts               |   5 +
 .../locationDetail/accessToFunding.ts         |   6 +
 .../api/action-reducers/sync/filters/index.ts |  11 +
 src/app/state/api/interfaces/index.ts         |   1 +
 src/app/state/store/index.ts                  |   2 +
 src/app/utils/exportCSV.ts                    |  30 ++-
 src/app/utils/getAPIFormattedFilters.ts       |   5 +
 18 files changed, 498 insertions(+), 402 deletions(-)

diff --git a/src/app/components/Table/Simple/index.tsx b/src/app/components/Table/Simple/index.tsx
index ba9b8dead..edbba1818 100644
--- a/src/app/components/Table/Simple/index.tsx
+++ b/src/app/components/Table/Simple/index.tsx
@@ -45,7 +45,9 @@ function Row(props: {
   const [open, setOpen] = React.useState(Boolean(props.forceExpand));
 
   const firstColBig =
-    props.columns[0].key !== "year" ? props.columns.length > 3 : false;
+    props.columns[0].key !== "year" && props.columns[0].key !== "level1"
+      ? props.columns.length > 3
+      : false;
 
   const firstColumnWidth = firstColBig ? "30%" : "";
   const firstColumnPadding = props.paddingLeft ? props.paddingLeft : 40;
diff --git a/src/app/components/Table/funding/index.tsx b/src/app/components/Table/funding/index.tsx
index 0204005a0..076b1fe9a 100644
--- a/src/app/components/Table/funding/index.tsx
+++ b/src/app/components/Table/funding/index.tsx
@@ -5,7 +5,6 @@ import find from "lodash/find";
 import filter from "lodash/filter";
 import { appColors } from "app/theme";
 import { Link } from "react-router-dom";
-import { useUpdateEffect } from "react-use";
 import Table from "@material-ui/core/Table";
 import Button from "@material-ui/core/Button";
 import Collapse from "@material-ui/core/Collapse";
@@ -59,15 +58,18 @@ const useRowStyles = makeStyles({
 
 function Row(props: {
   row: FundingTableRow;
+  index: number;
   columns: FundingTableColumn[];
   paddingLeft: number;
   visibleColumnsIndexes: number[];
   forceExpand?: boolean;
 }) {
   const classes = useRowStyles();
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = React.useState(props.forceExpand);
 
-  const [rowSelected, setRowSelected] = React.useState("parent");
+  const [rowSelected, setRowSelected] = React.useState(
+    props.forceExpand ? "child" : "parent"
+  );
 
   const secondLevelRow = !find(props.columns, { key: "name" });
 
@@ -75,7 +77,7 @@ function Row(props: {
 
   return (
     <React.Fragment>
-      {thirdLevelRow && (
+      {thirdLevelRow && props.index === 0 && (
         <TableRow>
           {cellData2.map((name, index) => (
             <TableCell
@@ -256,78 +258,85 @@ function Row(props: {
           <Collapse in={open} timeout="auto" unmountOnExit>
             <Table>
               <TableBody>
-                {rowSelected === "child" && (
-                  <TableRow>
-                    {cellData.map((name, index) => (
-                      <TableCell
-                        key={v4()}
-                        css={`
-                          text-align: center;
-                          padding: 16px 10px;
-                          // padding-left: ${index === 0 ? "4rem" : "auto"};
-                          ${tablecell}
-                        `}
-                      >
-                        <div
+                {rowSelected === "child" &&
+                  props.index === 0 &&
+                  !secondLevelRow && (
+                    <TableRow>
+                      {cellData.map((name, index) => (
+                        <TableCell
+                          key={v4()}
                           css={`
-                            width: 100%;
-                            display: flex;
-                            align-items: center;
-                            flex-direction: row;
-                            justify-content: center;
+                            text-align: center;
+                            padding: 16px 10px;
+                            // padding-left: ${index === 0 ? "4rem" : "auto"};
+                            ${tablecell}
                           `}
                         >
                           <div
                             css={`
-                              gap: 12px;
+                              width: 100%;
                               display: flex;
                               align-items: center;
                               flex-direction: row;
                               justify-content: center;
-                              font-weight: bold;
-                              font-family: "GothamNarrow-Bold", "Helvetica Neue",
-                                sans-serif;
+                            `}
+                          >
+                            <div
+                              css={`
+                                gap: 12px;
+                                display: flex;
+                                align-items: center;
+                                flex-direction: row;
+                                justify-content: center;
+                                font-weight: bold;
+                                font-family: "GothamNarrow-Bold",
+                                  "Helvetica Neue", sans-serif;
 
-                              > * {
-                                @supports (-webkit-touch-callout: none) and
-                                  (not (translate: none)) {
-                                  &:not(:last-child) {
-                                    margin-right: 12px;
+                                > * {
+                                  @supports (-webkit-touch-callout: none) and
+                                    (not (translate: none)) {
+                                    &:not(:last-child) {
+                                      margin-right: 12px;
+                                    }
                                   }
                                 }
-                              }
 
-                              > svg {
-                                transition: transform 0.1s ease-in-out;
-                                transform: rotate(${open ? "0deg" : "-180deg"});
-                              }
-                            `}
-                          >
-                            {name}
+                                > svg {
+                                  transition: transform 0.1s ease-in-out;
+                                  transform: rotate(
+                                    ${open ? "0deg" : "-180deg"}
+                                  );
+                                }
+                              `}
+                            >
+                              {name}
+                            </div>
                           </div>
-                        </div>
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                )}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  )}
                 {props.row.children &&
-                  props.row.children.map((child: FundingTableRow) =>
-                    (
-                      filter(
-                        props.columns,
-                        (c) => c.col
-                      ) as FundingTableColumn[]
-                    ).map((childCol) => {
-                      return (
-                        <Row
-                          row={child}
-                          key={child.name}
-                          paddingLeft={props.paddingLeft + 2}
-                          columns={childCol.col as FundingTableColumn[]}
-                          visibleColumnsIndexes={props.visibleColumnsIndexes}
-                        />
-                      );
-                    })
+                  props.row.children.map(
+                    (child: FundingTableRow, index: number) =>
+                      (
+                        filter(
+                          props.columns,
+                          (c) => c.col
+                        ) as FundingTableColumn[]
+                      ).map((childCol) => {
+                        return (
+                          <Row
+                            row={child}
+                            index={index}
+                            key={child.name}
+                            forceExpand={props.forceExpand}
+                            paddingLeft={props.paddingLeft + 2}
+                            columns={childCol.col as FundingTableColumn[]}
+                            visibleColumnsIndexes={props.visibleColumnsIndexes}
+                          />
+                        );
+                      })
                   )}
               </TableBody>
             </Table>
@@ -374,18 +383,6 @@ export function FundingRequestTable(props: FundingTableProps) {
     );
   }, [props.columns]);
 
-  useUpdateEffect(() => {
-    setTimeout(() => {
-      if (props.forceExpand) {
-        const rows = document.querySelectorAll("#funding-requests-table-row");
-        if (rows.length > 0) {
-          // @ts-ignore
-          rows[0].click();
-        }
-      }
-    }, 500);
-  }, [props.rows]);
-
   const visibleColumnsIndexes = filter(toolbarCols, { checked: true }).map(
     (c) => c.index
   );
@@ -406,64 +403,67 @@ export function FundingRequestTable(props: FundingTableProps) {
       />
       <TableContainer>
         <Table>
-          <TableHead>
-            <TableRow>
-              {props.columns.map(
-                (column: FundingTableColumn, index: number) => {
-                  let icon = undefined;
-                  if (
-                    sortBySplits.length > 1 &&
-                    sortBySplits[0] === column.key
-                  ) {
-                    if (sortBySplits[1] === "DESC") {
-                      icon = <ArrowDownward />;
-                    } else {
-                      icon = <ArrowUpward />;
+          {!props.forceExpand && (
+            <TableHead>
+              <TableRow>
+                {props.columns.map(
+                  (column: FundingTableColumn, index: number) => {
+                    let icon = undefined;
+                    if (
+                      sortBySplits.length > 1 &&
+                      sortBySplits[0] === column.key
+                    ) {
+                      if (sortBySplits[1] === "DESC") {
+                        icon = <ArrowDownward />;
+                      } else {
+                        icon = <ArrowUpward />;
+                      }
                     }
-                  }
-                  return (
-                    <TableCell
-                      key={column.key}
-                      css={`
-                        padding: 16px 10px;
-                        ${index === 0 ? "padding-left: 40px;" : ""}
+                    return (
+                      <TableCell
+                        key={column.key}
+                        css={`
+                          padding: 16px 10px;
+                          ${index === 0 ? "padding-left: 40px;" : ""}
 
-                        > button {
-                          ${tablecell}
-                          padding-left: 0;
-                          text-transform: none;
+                          > button {
+                            ${tablecell}
+                            padding-left: 0;
+                            text-transform: none;
 
-                          > span {
-                            font-size: 16px;
-                            font-weight: bold;
-                            justify-content: flex-start;
-                            font-family: "GothamNarrow-Bold", "Helvetica Neue",
-                              sans-serif;
+                            > span {
+                              font-size: 16px;
+                              font-weight: bold;
+                              justify-content: flex-start;
+                              font-family: "GothamNarrow-Bold", "Helvetica Neue",
+                                sans-serif;
+                            }
                           }
-                        }
-                      `}
-                    >
-                      <Button
-                        onClick={() => onSortByChange(column.key)}
-                        endIcon={icon}
+                        `}
                       >
-                        {column.name}
-                      </Button>
-                    </TableCell>
-                  );
-                }
-              )}
-            </TableRow>
-          </TableHead>
+                        <Button
+                          onClick={() => onSortByChange(column.key)}
+                          endIcon={icon}
+                        >
+                          {column.name}
+                        </Button>
+                      </TableCell>
+                    );
+                  }
+                )}
+              </TableRow>
+            </TableHead>
+          )}
           <TableBody>
             {props.rows.map((row: FundingTableRow, index: number) => (
               <Row
                 key={row.name}
                 row={row}
+                index={index}
                 columns={props.columns}
                 visibleColumnsIndexes={visibleColumnsIndexes}
                 paddingLeft={props.paddingLeft}
-                forceExpand={props.forceExpand && index === 0}
+                forceExpand={props.forceExpand}
               />
             ))}
           </TableBody>
diff --git a/src/app/components/ToolBoxPanel/components/filters/data.ts b/src/app/components/ToolBoxPanel/components/filters/data.ts
index 501cde24a..122b78254 100644
--- a/src/app/components/ToolBoxPanel/components/filters/data.ts
+++ b/src/app/components/ToolBoxPanel/components/filters/data.ts
@@ -157,10 +157,10 @@ export const filtergroups: FilterGroupProps[] = [
     name: "Document Types",
     addSubOptionFilters: false,
   },
-  // {
-  //   name: "Portfolio categorization",
-  //   addSubOptionFilters: false,
-  // },
+  {
+    name: "Portfolio Categorization",
+    addSubOptionFilters: false,
+  },
   {
     name: "TRP Window",
     addSubOptionFilters: true,
@@ -176,10 +176,10 @@ export const fundingRequestFilterGroups: FilterGroupProps[] = [
     name: "Locations",
     addSubOptionFilters: true,
   },
-  // {
-  //   name: "Portfolio categorization",
-  //   addSubOptionFilters: false,
-  // },
+  {
+    name: "Portfolio Categorization",
+    addSubOptionFilters: false,
+  },
   {
     name: "TRP Window",
     addSubOptionFilters: true,
@@ -199,6 +199,10 @@ export const accessToFundingEligibilityFilterGroups: FilterGroupProps[] = [
     name: "Eligibility Status",
     addSubOptionFilters: false,
   },
+  {
+    name: "Portfolio Categorization",
+    addSubOptionFilters: false,
+  },
   {
     name: "TRP Window",
     addSubOptionFilters: true,
@@ -213,7 +217,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   documents: filter(
@@ -235,7 +239,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/viz/disbursements/time-cycle": filter(
@@ -244,7 +248,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/viz/disbursements/map": filter(
@@ -253,7 +257,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/viz/disbursements/table": filter(
@@ -262,7 +266,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/viz/signed/treemap": filter(
@@ -271,7 +275,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/viz/signed/time-cycle": filter(
@@ -280,7 +284,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/viz/signed/map": filter(
@@ -289,7 +293,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/viz/signed/table": filter(
@@ -298,7 +302,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/viz/commitment/treemap": filter(
@@ -307,7 +311,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/viz/commitment/time-cycle": filter(
@@ -316,7 +320,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/viz/commitment/map": filter(
@@ -325,7 +329,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/viz/commitment/table": filter(
@@ -334,7 +338,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/viz/budgets/flow": filter(
@@ -343,7 +347,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/viz/budgets/time-cycle": filter(
@@ -352,7 +356,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/viz/budgets/map": filter(
@@ -361,7 +365,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/viz/allocations": filter(
@@ -426,7 +430,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   // "/location/<code>/overview": [],
@@ -437,7 +441,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/location/<code>/disbursements/table": filter(
@@ -447,7 +451,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/location/<code>/disbursements/time-cycle": filter(
@@ -457,7 +461,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/location/<code>/disbursements/map": filter(
@@ -467,7 +471,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/location/<code>/signed/treemap": filter(
@@ -477,7 +481,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/location/<code>/signed/table": filter(
@@ -487,7 +491,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/location/<code>/signed/time-cycle": filter(
@@ -497,7 +501,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/location/<code>/signed/map": filter(
@@ -507,7 +511,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/location/<code>/commitment/treemap": filter(
@@ -517,7 +521,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/location/<code>/commitment/table": filter(
@@ -527,7 +531,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/location/<code>/commitment/time-cycle": filter(
@@ -537,7 +541,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/location/<code>/commitment/map": filter(
@@ -547,7 +551,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/location/<code>/budgets/flow": filter(
@@ -557,7 +561,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/location/<code>/budgets/time-cycle": filter(
@@ -567,7 +571,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/location/<code>/budgets/map": filter(
@@ -577,7 +581,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
 
@@ -609,7 +613,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/location/<code>/grants/list": filter(
@@ -619,7 +623,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/location/<code>/results": filter(
@@ -634,7 +638,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/partner/<code>/disbursements/table": filter(
@@ -644,7 +648,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/partner/<code>/disbursements/time-cycle": filter(
@@ -654,7 +658,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/partner/<code>/disbursements/map": filter(
@@ -664,7 +668,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/partner/<code>/signed/treemap": filter(
@@ -674,7 +678,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/partner/<code>/signed/table": filter(
@@ -684,7 +688,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/partner/<code>/signed/time-cycle": filter(
@@ -694,7 +698,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/partner/<code>/signed/map": filter(
@@ -704,7 +708,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/partner/<code>/commitment/treemap": filter(
@@ -714,7 +718,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/partner/<code>/commitment/table": filter(
@@ -724,7 +728,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/partner/<code>/commitment/time-cycle": filter(
@@ -734,7 +738,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/partner/<code>/commitment/map": filter(
@@ -744,7 +748,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/partner/<code>/budgets/flow": filter(
@@ -753,7 +757,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Locations" &&
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/partner/<code>/budgets/time-cycle": filter(
@@ -763,7 +767,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/partner/<code>/budgets/map": filter(
@@ -773,7 +777,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/partner/<code>/grants": filter(
@@ -783,7 +787,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
   "/partner/<code>/grants/list": filter(
@@ -793,7 +797,7 @@ export const pathnameToFilterGroups = {
       fg.name !== "Donors" &&
       fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
-      fg.name !== "Portfolio categorization" &&
+      fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
   ),
 };
diff --git a/src/app/hooks/useAppliedFilters.tsx b/src/app/hooks/useAppliedFilters.tsx
index 4edaf463c..a152f7fd5 100644
--- a/src/app/hooks/useAppliedFilters.tsx
+++ b/src/app/hooks/useAppliedFilters.tsx
@@ -77,6 +77,11 @@ export function useAppliedFilters(props: UseAppliedFiltersProps): {
         setAppliedFilters: actions.setTrpWindows,
         appliedFilters: data.trpWindows,
       };
+    case "Portfolio Categorization":
+      return {
+        setAppliedFilters: actions.setPortfolioCategories,
+        appliedFilters: data.portfolioCategories,
+      };
     case "All":
       return {
         setAppliedFilters: actions.setLocations,
@@ -90,6 +95,7 @@ export function useAppliedFilters(props: UseAppliedFiltersProps): {
           ...data.donors,
           ...data.replenishmentPeriods,
           ...data.trpWindows,
+          ...data.portfolioCategories,
         ],
       };
     default:
diff --git a/src/app/hooks/useFilterOptions.tsx b/src/app/hooks/useFilterOptions.tsx
index 9e5846b13..7727fda1d 100644
--- a/src/app/hooks/useFilterOptions.tsx
+++ b/src/app/hooks/useFilterOptions.tsx
@@ -22,6 +22,7 @@ export interface UseFilterOptionsReturn {
   "Disease Burden": FilterGroupOptionModel[];
   "Eligibility Years": FilterGroupOptionModel[];
   "TRP Window": FilterGroupOptionModel[];
+  "Portfolio Categorization": FilterGroupOptionModel[];
 }
 
 export function useFilterOptions(
@@ -113,6 +114,13 @@ export function useFilterOptions(
     get(state.FundingRequestsTRPWindowCodelist, "data.data", [])
   );
 
+  const getFundingRequestsPortfolioCategoryCodelist = useStoreActions(
+    (store) => store.FundingRequestsPortfolioCategoryCodelist.fetch
+  );
+  const FundingRequestsPortfolioCategoryCodelist = useStoreState((state) =>
+    get(state.FundingRequestsPortfolioCategoryCodelist, "data.data", [])
+  );
+
   React.useEffect(() => {
     if (props.loadFilterOptions) {
       if (locations.length === 0) {
@@ -138,6 +146,7 @@ export function useFilterOptions(
       getEligibilityYearOptions({});
       getEligibilityDiseaseBurdenCodelist({});
       getFundingRequestsTRPWindowCodelist({});
+      getFundingRequestsPortfolioCategoryCodelist({});
     }
   }, []);
 
@@ -160,6 +169,7 @@ export function useFilterOptions(
         value: item,
       })),
       "TRP Window": FundingRequestsTRPWindowCodelist,
+      "Portfolio Categorization": FundingRequestsPortfolioCategoryCodelist,
     };
   }
 
diff --git a/src/app/hooks/useUrlFilters.tsx b/src/app/hooks/useUrlFilters.tsx
index f4383c758..7c0b6d0a8 100644
--- a/src/app/hooks/useUrlFilters.tsx
+++ b/src/app/hooks/useUrlFilters.tsx
@@ -30,6 +30,7 @@ export function useUrlFilters(): null {
       const donorCategories = currentUrlParams.get("donorCategories");
       const replenishmentPeriods = currentUrlParams.get("replenishmentPeriods");
       const trpWindows = currentUrlParams.get("trpWindows");
+      const portfolioCategories = currentUrlParams.get("portfolioCategories");
 
       if (locations) {
         updatedAppliedFilters.locations = locations.split(",");
@@ -69,6 +70,10 @@ export function useUrlFilters(): null {
       if (trpWindows) {
         updatedAppliedFilters.trpWindows = trpWindows.split(",");
       }
+      if (portfolioCategories) {
+        updatedAppliedFilters.portfolioCategories =
+          portfolioCategories.split(",");
+      }
 
       actions.setAll(updatedAppliedFilters);
     },
@@ -147,6 +152,14 @@ export function useUrlFilters(): null {
     } else {
       currentUrlParams.delete("trpWindows");
     }
+    if (data.portfolioCategories.length > 0) {
+      currentUrlParams.set(
+        "portfolioCategories",
+        data.portfolioCategories.join(",")
+      );
+    } else {
+      currentUrlParams.delete("portfolioCategories");
+    }
 
     const queryString = decodeURIComponent(currentUrlParams.toString());
     history.push({
@@ -171,6 +184,7 @@ export function useUrlFilters(): null {
     const donorCategories = currentUrlParams.get("donorCategories");
     const replenishmentPeriods = currentUrlParams.get("replenishmentPeriods");
     const trpWindows = currentUrlParams.get("trpWindows");
+    const portfolioCategories = currentUrlParams.get("portfolioCategories");
 
     if (locations) {
       updatedAppliedFilters.locations = locations.split(",");
@@ -233,6 +247,12 @@ export function useUrlFilters(): null {
     } else if (updatedAppliedFilters.trpWindows.length > 0) {
       updatedAppliedFilters.trpWindows = [];
     }
+    if (portfolioCategories) {
+      updatedAppliedFilters.portfolioCategories =
+        portfolioCategories.split(",");
+    } else if (updatedAppliedFilters.portfolioCategories.length > 0) {
+      updatedAppliedFilters.portfolioCategories = [];
+    }
 
     if (!isEqual(data, updatedAppliedFilters)) {
       actions.setAll(updatedAppliedFilters);
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx
index b82008830..b09804e8d 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import max from "lodash/max";
 import { useMeasure } from "react-use";
 import findIndex from "lodash/findIndex";
 import { ApexOptions } from "apexcharts";
@@ -9,6 +10,7 @@ import { formatFinancialValue } from "app/utils/formatFinancialValue";
 import { NoDataLabel } from "app/components/Charts/common/nodatalabel";
 import { NoDataAllocations } from "../../allocations/components/nodata";
 import { getKeysPercentages } from "app/modules/viz-module/sub-modules/allocations/data";
+
 interface Props {
   total: number;
   keys: string[];
@@ -21,14 +23,17 @@ export default function RadialChart(props: Props) {
 
   const [ref, { width }] = useMeasure<HTMLDivElement>();
 
+  const maxValue = max(props.values);
   const [keysPercentagesColors, setKeysPercentagesColors] = React.useState<{
     percentages: number[];
     colors: string[];
-  }>(getKeysPercentages(props.total, props.values));
+  }>(getKeysPercentages(maxValue ? maxValue * 1.2 : props.total, props.values));
 
   React.useEffect(() => {
-    setKeysPercentagesColors(getKeysPercentages(props.total, props.values));
-  }, [props.total, props.values]);
+    setKeysPercentagesColors(
+      getKeysPercentages(maxValue ? maxValue * 1.2 : props.total, props.values)
+    );
+  }, [props.values]);
 
   if (props.isLoading) {
     return (
@@ -92,13 +97,11 @@ export default function RadialChart(props: Props) {
           },
           total: {
             show: false,
-            fontFamily: "GothamNarrow-Bold",
-            formatter: () => formatFinancialValue(props.total),
           },
         },
       },
     },
-    colors: ["#E4EBF8", "#C9CAD4", "#F1ECEC"],
+    colors: ["#252C34", "#C9CAD4", "#595D70"],
     labels: props.keys,
     legend: {
       show: true,
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/eligibilityTable.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/eligibilityTable.tsx
index 7d351bddc..7ace500d5 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/eligibilityTable.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/eligibilityTable.tsx
@@ -21,6 +21,7 @@ interface EligibilityTableProps {
 export function EligibilityTable(props: EligibilityTableProps) {
   return (
     <SimpleTable
+      forceExpand
       search={props.search}
       sortBy={props.sortBy}
       rows={props.data}
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
index 1aad5cc27..e4182097a 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
@@ -7,7 +7,6 @@ import Slide from "@material-ui/core/Slide";
 import TablePagination from "@material-ui/core/TablePagination";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 /* project */
-import { EligibilityTable } from "./eligibilityTable";
 import { PageLoader } from "app/modules/common/page-loader";
 import { TriangleXSIcon } from "app/assets/icons/TriangleXS";
 import { SimpleTableRow } from "app/components/Table/Simple/data";
@@ -15,6 +14,7 @@ import { locationAccessToFundingCycleAtom } from "app/state/recoil/atoms";
 import { ToolBoxPanelFilters } from "app/components/ToolBoxPanel/components/filters";
 import { FilterGroupProps } from "app/components/ToolBoxPanel/components/filters/data";
 import { ToolBoxPanelAggregateBy } from "app/components/ToolBoxPanel/components/aggregateby";
+import { EligibilityTable } from "app/modules/viz-module/sub-modules/accessToFunding/eligibility/eligibilityTable";
 
 interface Props {
   code?: string;
@@ -176,14 +176,6 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
   React.useEffect(() => {
     if (!props.code) {
       document.title = "The Data Explorer - Eligibility";
-    } else {
-      setTimeout(() => {
-        const rows = document.querySelectorAll("#simple-table-row");
-        if (rows.length > 0) {
-          // @ts-ignore
-          rows[0].click();
-        }
-      }, 500);
     }
   }, []);
 
@@ -224,138 +216,137 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
   }
 
   return (
-    <>
-      <div
-        css={`
-          position: relative;
-        `}
-      >
-        {isLoading && <PageLoader inLoader />}
-        {props.code && (
+    <div
+      css={`
+        position: relative;
+      `}
+    >
+      {isLoading && <PageLoader inLoader />}
+      {props.code && (
+        <div
+          role="button"
+          tabIndex={-1}
+          css={`
+            top: 32%;
+            color: #fff;
+            width: 16px;
+            height: 133px;
+            z-index: 1;
+            display: flex;
+            cursor: pointer;
+            position: absolute;
+            background: #262c34;
+            align-items: center;
+            flex-direction: column;
+            justify-content: center;
+            border-radius: 10px 0px 0px 10px;
+            transition: all 0.2s ease-in-out;
+
+            right: ${openToolboxPanel ? "48%" : 0};
+
+            &:hover {
+              background: #13183f;
+            }
+
+            > svg {
+              transform: rotate(${!openToolboxPanel ? "-" : ""}90deg);
+              > path {
+                fill: #fff;
+              }
+            }
+          `}
+          onClick={() => setOpenToolboxPanel(!openToolboxPanel)}
+        >
+          <TriangleXSIcon />
+        </div>
+      )}
+      {props.code && (
+        <Slide direction="left" in={openToolboxPanel}>
           <div
-            role="button"
-            tabIndex={-1}
             css={`
-              top: 32%;
-              color: #fff;
-              width: 16px;
-              height: 133px;
-              z-index: 1;
-              display: flex;
-              cursor: pointer;
+              z-index: 4;
+              right: -8px;
+              width: 600px;
+              height: 100%;
+              overflow-y: auto;
+              min-height: 700px;
               position: absolute;
-              background: #262c34;
-              align-items: center;
-              flex-direction: column;
-              justify-content: center;
-              border-radius: 10px 0px 0px 10px;
-              transition: all 0.2s ease-in-out;
+              background: #f5f5f7;
+              border-radius: 20px;
+              visibility: visible !important;
+              box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.6);
 
-              right: ${openToolboxPanel ? "48%" : 0};
-
-              &:hover {
-                background: #13183f;
+              ::-webkit-scrollbar {
+                display: none;
               }
 
-              > svg {
-                transform: rotate(${!openToolboxPanel ? "-" : ""}90deg);
-                > path {
-                  fill: #fff;
-                }
+              @media (max-width: 767px) {
+                width: 100vw;
+                box-shadow: none;
+                overflow-y: auto;
               }
             `}
-            onClick={() => setOpenToolboxPanel(!openToolboxPanel)}
           >
-            <TriangleXSIcon />
-          </div>
-        )}
-        {props.code && (
-          <Slide direction="left" in={openToolboxPanel}>
             <div
               css={`
-                z-index: 4;
-                right: -8px;
-                width: 600px;
-                height: 700px;
-                overflow-y: auto;
-                position: absolute;
-                background: #f5f5f7;
-                border-radius: 20px;
-                visibility: visible !important;
-                box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.6);
+                width: 100%;
 
-                ::-webkit-scrollbar {
-                  display: none;
-                }
+                display: flex;
 
-                @media (max-width: 767px) {
-                  width: 100vw;
-                  box-shadow: none;
-                  overflow-y: auto;
-                }
+                flex-direction: column;
               `}
             >
-              <div
-                css={`
-                  width: 100%;
-
-                  display: flex;
-
-                  flex-direction: column;
-                `}
-              >
-                <ToolBoxPanelAggregateBy
-                  title="Aggregate by"
-                  selected={selectedAggregate}
-                  options={controlItems.aggregates}
-                  setSelected={setSelectedAggregate}
-                />
-                <ToolBoxPanelFilters
-                  groups={filterGroups}
-                  expandedGroup={expandedGroup}
-                  appliedFilters={appliedFilters}
-                  setExpandedGroup={setExpandedGroup}
-                  setAppliedFilters={setAppliedFilters}
-                  defaultAppliedFilters={{
-                    year: [],
-                    components: [],
-                    status: [],
-                    diseaseBurden: [],
-                  }}
-                  groupAppliedFiltersPathKey={groupAppliedFiltersPathKey}
-                />
-              </div>
+              <ToolBoxPanelAggregateBy
+                title="Aggregate by"
+                selected={selectedAggregate}
+                options={controlItems.aggregates}
+                setSelected={setSelectedAggregate}
+              />
+              <ToolBoxPanelFilters
+                groups={filterGroups}
+                expandedGroup={expandedGroup}
+                appliedFilters={appliedFilters}
+                setExpandedGroup={setExpandedGroup}
+                setAppliedFilters={setAppliedFilters}
+                defaultAppliedFilters={{
+                  year: [],
+                  components: [],
+                  status: [],
+                  diseaseBurden: [],
+                }}
+                groupAppliedFiltersPathKey={groupAppliedFiltersPathKey}
+              />
             </div>
-          </Slide>
-        )}
-        <EligibilityTable
-          search={search}
-          sortBy={sortBy}
-          data={data.slice(page * rowsPerPage, (page + 1) * rowsPerPage)}
-          setSearch={setSearch}
-          setSortBy={setSortBy}
-          columns={columns}
-          title={props.code ? cycle || "" : ""}
-        />
-        <TablePagination
-          page={page}
-          component="div"
-          count={data.length}
-          rowsPerPage={rowsPerPage}
-          onPageChange={handleChangePage}
-          onRowsPerPageChange={handleChangeRowsPerPage}
-          css={`
-            @media (min-width: 768px) {
-              .MuiTablePagination-toolbar {
-                padding-left: 40px;
-              }
-              .MuiTablePagination-spacer {
-                display: none;
-              }
+          </div>
+        </Slide>
+      )}
+      <EligibilityTable
+        search={search}
+        sortBy={sortBy}
+        data={data.slice(page * rowsPerPage, (page + 1) * rowsPerPage)}
+        setSearch={setSearch}
+        setSortBy={setSortBy}
+        columns={columns}
+        title={props.code ? cycle || "" : ""}
+      />
+      <TablePagination
+        page={page}
+        component="div"
+        count={data.length}
+        rowsPerPage={rowsPerPage}
+        onPageChange={handleChangePage}
+        onRowsPerPageChange={handleChangeRowsPerPage}
+        css={`
+          @media (min-width: 768px) {
+            .MuiTablePagination-toolbar {
+              padding-left: 40px;
             }
-          `}
-        />
-      </div>
-    </>
+            .MuiTablePagination-spacer {
+              display: none;
+            }
+          }
+        `}
+      />
+    </div>
   );
 }
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
index 494d4cc29..6efffbcac 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
@@ -50,6 +50,7 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
   }>({
     components: [],
     trpWindows: [],
+    portfolioCategories: [],
   });
   const [expandedGroup, setExpandedGroup] =
     React.useState<FilterGroupProps | null>(null);
@@ -61,11 +62,15 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
     {
       name: "TRP Window",
     },
+    {
+      name: "Portfolio Categorization",
+    },
   ];
 
   const groupAppliedFiltersPathKey = {
     Components: "components",
     "TRP Window": "trpWindows",
+    "Portfolio Categorization": "portfolioCategories",
   };
 
   function reloadData() {
@@ -82,6 +87,11 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
     if (appliedFilters.trpWindows.length > 0) {
       filterStr.push(`trpWindows=${appliedFilters.trpWindows.join(",")}`);
     }
+    if (appliedFilters.portfolioCategories.length > 0) {
+      filterStr.push(
+        `portfolioCategories=${appliedFilters.portfolioCategories.join(",")}`
+      );
+    }
     if (cycle !== "All") {
       filterStr.push(`cycles=${cycle}`);
     }
@@ -107,108 +117,107 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
   );
 
   return (
-    <>
+    <div
+      css={`
+        position: relative;
+      `}
+    >
+      {isLoading && <PageLoader inLoader />}
       <div
+        role="button"
+        tabIndex={-1}
         css={`
-          position: relative;
+          top: 32%;
+          color: #fff;
+          width: 16px;
+          height: 133px;
+          z-index: 1;
+          display: flex;
+          cursor: pointer;
+          position: absolute;
+          background: #262c34;
+          align-items: center;
+          flex-direction: column;
+          justify-content: center;
+          border-radius: 10px 0px 0px 10px;
+          transition: all 0.2s ease-in-out;
+
+          right: ${openToolboxPanel ? "48%" : 0};
+
+          &:hover {
+            background: #13183f;
+          }
+
+          > svg {
+            transform: rotate(${!openToolboxPanel ? "-" : ""}90deg);
+            > path {
+              fill: #fff;
+            }
+          }
         `}
+        onClick={() => setOpenToolboxPanel(!openToolboxPanel)}
       >
-        {isLoading && <PageLoader inLoader />}
+        <TriangleXSIcon />
+      </div>
+      <Slide direction="left" in={openToolboxPanel}>
         <div
-          role="button"
-          tabIndex={-1}
           css={`
-            top: 32%;
-            color: #fff;
-            width: 16px;
-            height: 133px;
-            z-index: 1;
-            display: flex;
-            cursor: pointer;
+            z-index: 4;
+            right: -8px;
+            width: 600px;
+            height: 100%;
+            min-height: 700px;
             position: absolute;
-            background: #262c34;
-            align-items: center;
-            flex-direction: column;
-            justify-content: center;
-            border-radius: 10px 0px 0px 10px;
-            transition: all 0.2s ease-in-out;
-
-            right: ${openToolboxPanel ? "48%" : 0};
-
-            &:hover {
-              background: #13183f;
+            background: #f5f5f7;
+            visibility: visible !important;
+            overflow-y: auto;
+
+            box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.6);
+            border-radius: 20px;
+            ::-webkit-scrollbar {
+              display: none;
             }
-
-            > svg {
-              transform: rotate(${!openToolboxPanel ? "-" : ""}90deg);
-              > path {
-                fill: #fff;
-              }
+            @media (max-width: 767px) {
+              width: 100vw;
+              box-shadow: none;
+              overflow-y: auto;
             }
           `}
-          onClick={() => setOpenToolboxPanel(!openToolboxPanel)}
         >
-          <TriangleXSIcon />
-        </div>
-        <Slide direction="left" in={openToolboxPanel}>
           <div
             css={`
-              z-index: 4;
-              right: -8px;
-              width: 600px;
-              height: 400px;
-              position: absolute;
-              background: #f5f5f7;
-              visibility: visible !important;
-              overflow-y: auto;
+              width: 100%;
 
-              box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.6);
-              border-radius: 20px;
-              ::-webkit-scrollbar {
-                display: none;
-              }
-              @media (max-width: 767px) {
-                width: 100vw;
-                box-shadow: none;
-                overflow-y: auto;
-              }
+              display: flex;
+
+              flex-direction: column;
             `}
           >
-            <div
-              css={`
-                width: 100%;
-
-                display: flex;
-
-                flex-direction: column;
-              `}
-            >
-              <ToolBoxPanelFilters
-                groups={filterGroups}
-                expandedGroup={expandedGroup}
-                appliedFilters={appliedFilters}
-                setExpandedGroup={setExpandedGroup}
-                setAppliedFilters={setAppliedFilters}
-                defaultAppliedFilters={{
-                  components: [],
-                  trpWindows: [],
-                }}
-                groupAppliedFiltersPathKey={groupAppliedFiltersPathKey}
-              />
-            </div>
+            <ToolBoxPanelFilters
+              groups={filterGroups}
+              expandedGroup={expandedGroup}
+              appliedFilters={appliedFilters}
+              setExpandedGroup={setExpandedGroup}
+              setAppliedFilters={setAppliedFilters}
+              defaultAppliedFilters={{
+                components: [],
+                trpWindows: [],
+              }}
+              groupAppliedFiltersPathKey={groupAppliedFiltersPathKey}
+            />
           </div>
-        </Slide>
-        <Table
-          forceExpand
-          search={search}
-          sortBy={sortBy}
-          data={data}
-          setSearch={setSearch}
-          setSortBy={setSortBy}
-          columns={fundingRequestColumns}
-          title={cycle || ""}
-        />
-      </div>
-    </>
+        </div>
+      </Slide>
+      <Table
+        forceExpand
+        search={search}
+        sortBy={sortBy}
+        data={data}
+        setSearch={setSearch}
+        setSortBy={setSortBy}
+        columns={fundingRequestColumns}
+        title={cycle || ""}
+      />
+    </div>
   );
 }
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
index 2be6caae1..68d080b95 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
@@ -60,7 +60,7 @@ export default function LocationAccessToFundingWrapper(props: Props) {
   );
   const fetchData = useStoreActions((store) => store.Allocations.fetch);
   const isLoading = useStoreState((state) => state.Allocations.loading);
-  const colors = ["#E4EBF8", "#C9CAD4", "#F1ECEC"];
+  const colors = ["#252C34", "#C9CAD4", "#595D70"];
 
   React.useEffect(() => {
     return () => {
@@ -124,7 +124,7 @@ export default function LocationAccessToFundingWrapper(props: Props) {
           </div>
           {grantCycles.map((c) => (
             <div key={c} css={chipcss(cycle === c)} onClick={() => setCycle(c)}>
-              {c.replace("-", "/")}
+              {c}
             </div>
           ))}
         </div>
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts
index 0707e03b1..ffe9c5687 100644
--- a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts
@@ -49,6 +49,10 @@ export const fundingRequestColumns = [
         key: "outcome",
         name: "",
       },
+      {
+        key: "portfolioCategory",
+        name: "",
+      },
       {
         key: "board",
         name: "",
@@ -63,6 +67,7 @@ export const cellData = [
   "Approach",
   "TRP Window ",
   "TRP Outcome",
+  "Portfolio Categorization",
   "Board Approval",
 ];
 
diff --git a/src/app/state/api/action-reducers/locationDetail/accessToFunding.ts b/src/app/state/api/action-reducers/locationDetail/accessToFunding.ts
index 129891470..bcef13f03 100644
--- a/src/app/state/api/action-reducers/locationDetail/accessToFunding.ts
+++ b/src/app/state/api/action-reducers/locationDetail/accessToFunding.ts
@@ -18,3 +18,9 @@ export const TRPWindowCodelist: ApiCallModel = {
     `${process.env.REACT_APP_API}/funding-requests/trp-window/codelist`
   ),
 };
+
+export const PortfolioCategoryCodelist: ApiCallModel = {
+  ...APIModel(
+    `${process.env.REACT_APP_API}/funding-requests/portfolio-categories/codelist`
+  ),
+};
diff --git a/src/app/state/api/action-reducers/sync/filters/index.ts b/src/app/state/api/action-reducers/sync/filters/index.ts
index 0dad24f4c..31c5084c7 100644
--- a/src/app/state/api/action-reducers/sync/filters/index.ts
+++ b/src/app/state/api/action-reducers/sync/filters/index.ts
@@ -14,6 +14,7 @@ export const defaultAppliedFilters: AppliedFiltersModel = {
   donorCategories: [] as string[],
   donorSubCategories: [] as string[],
   trpWindows: [] as string[],
+  portfolioCategories: [] as string[],
 };
 
 export interface AppliedFiltersModel {
@@ -29,6 +30,7 @@ export interface AppliedFiltersModel {
   donorCategories: string[];
   donorSubCategories: string[];
   trpWindows: string[];
+  portfolioCategories: string[];
 }
 
 export interface AppliedFiltersStateModel {
@@ -56,6 +58,8 @@ export interface AppliedFiltersStateModel {
   setDonorSubCategories: Action<AppliedFiltersStateModel, string[]>;
   trpWindows: string[];
   setTrpWindows: Action<AppliedFiltersStateModel, string[]>;
+  setPortfolioCategories: Action<AppliedFiltersStateModel, string[]>;
+  portfolioCategories: string[];
   setAll: Action<AppliedFiltersStateModel, AppliedFiltersModel>;
   actionDefaultNone: Action<AppliedFiltersStateModel, string[]>;
   appliedFiltersCount: number;
@@ -122,6 +126,11 @@ export const AppliedFiltersState: AppliedFiltersStateModel = {
     state.trpWindows = payload;
     state.appliedFiltersCount += payload.length;
   }),
+  portfolioCategories: [],
+  setPortfolioCategories: action((state, payload: string[]) => {
+    state.portfolioCategories = payload;
+    state.appliedFiltersCount += payload.length;
+  }),
   setAll: action((state, payload: AppliedFiltersModel) => {
     state.locations = payload.locations;
     state.components = payload.components;
@@ -134,6 +143,7 @@ export const AppliedFiltersState: AppliedFiltersStateModel = {
     state.donorCategories = payload.donorCategories;
     state.donorSubCategories = payload.donorSubCategories;
     state.trpWindows = payload.trpWindows;
+    state.portfolioCategories = payload.portfolioCategories;
     state.appliedFiltersCount =
       payload.locations.length +
       payload.components.length +
@@ -146,6 +156,7 @@ export const AppliedFiltersState: AppliedFiltersStateModel = {
       payload.donorCategories.length +
       payload.donorSubCategories.length +
       payload.trpWindows.length;
+    payload.portfolioCategories.length;
   }),
   actionDefaultNone: action((state, payload: string[]) => {
     console.log("Incorrect filter type");
diff --git a/src/app/state/api/interfaces/index.ts b/src/app/state/api/interfaces/index.ts
index 9a3819343..b35a63fc5 100644
--- a/src/app/state/api/interfaces/index.ts
+++ b/src/app/state/api/interfaces/index.ts
@@ -228,6 +228,7 @@ export interface StoreModel {
     GrantCycles: ApiCallModel;
   };
   FundingRequestsTRPWindowCodelist: ApiCallModel;
+  FundingRequestsPortfolioCategoryCodelist: ApiCallModel;
   // partner detail api
   PartnerDetailInfo: ApiCallModel;
   PartnerDetailDisbursementsTreemap: ApiCallModel;
diff --git a/src/app/state/store/index.ts b/src/app/state/store/index.ts
index 3557e107a..a4644c8dc 100644
--- a/src/app/state/store/index.ts
+++ b/src/app/state/store/index.ts
@@ -176,6 +176,7 @@ import {
   EligibilityLocation,
   FundingRequestsTable,
   GrantCycles,
+  PortfolioCategoryCodelist,
   TRPWindowCodelist,
 } from "../api/action-reducers/locationDetail/accessToFunding";
 import { FundingRequestsTableGeneric } from "../api/action-reducers/viz/fundingRequests";
@@ -294,6 +295,7 @@ const storeContent: StoreModel = {
     GrantCycles: persist(GrantCycles),
   },
   FundingRequestsTRPWindowCodelist: persist(TRPWindowCodelist),
+  FundingRequestsPortfolioCategoryCodelist: persist(PortfolioCategoryCodelist),
   // partner detail api
   PartnerDetailInfo: persist(PartnerDetailInfo),
   PartnerDetailDisbursementsTreemap: persist(PartnerDetailDisbursementsTreemap),
diff --git a/src/app/utils/exportCSV.ts b/src/app/utils/exportCSV.ts
index d324c7114..7dcbfdeba 100644
--- a/src/app/utils/exportCSV.ts
+++ b/src/app/utils/exportCSV.ts
@@ -806,7 +806,7 @@ export function exportCSV(
       if (multiVizPageDataKey === "fundingRequest") {
         data.forEach((item: any) => {
           item.children.forEach((subItem: any) => {
-            subItem.children.forEach((subSubItem: any) => {
+            if (subItem.children.length === 0) {
               csvData.push({
                 location: item.name,
                 component: subItem.component,
@@ -816,9 +816,26 @@ export function exportCSV(
                 outcome: subItem.outcome,
                 gac: subItem.gac,
                 board: subItem.board,
-                grant: subSubItem.grant1,
+                portfolioCategory: subItem.portfolioCategory,
               });
-            });
+            } else {
+              subItem.children.forEach((subSubItem: any) => {
+                csvData.push({
+                  location: item.name,
+                  component: subSubItem.component,
+                  date: subItem.approach,
+                  approach: subItem.approach,
+                  window: subItem.window,
+                  outcome: subItem.outcome,
+                  board: subItem.board,
+                  portfolioCategory: subItem.portfolioCategory,
+                  grant: subSubItem.grant1,
+                  gac: subSubItem.gac,
+                  start: subSubItem.start,
+                  end: subSubItem.end,
+                });
+              });
+            }
           });
         });
         return {
@@ -826,7 +843,6 @@ export function exportCSV(
           filename: "access-to-funding-funding-requests.csv",
           headers: [
             { label: "Location", key: "location" },
-            { label: "Application ID", key: "id" },
             { label: "Submission date", key: "date" },
             { label: "Component", key: "component" },
             { label: "Approach", key: "approach" },
@@ -834,7 +850,11 @@ export function exportCSV(
             { label: "TRP Outcome", key: "outcome" },
             { label: "GAC Meeting", key: "gac" },
             { label: "Board approval", key: "board" },
-            { label: "Grant Number (Start date - End date)", key: "grant" },
+            { label: "Portfolio Categorization", key: "portfolioCategory" },
+            { label: "GAC Meeting", key: "gac" },
+            { label: "Grant", key: "grant" },
+            { label: "Starting date", key: "start" },
+            { label: "End date", key: "end" },
           ],
         };
       }
diff --git a/src/app/utils/getAPIFormattedFilters.ts b/src/app/utils/getAPIFormattedFilters.ts
index 29921bdc0..07f805025 100644
--- a/src/app/utils/getAPIFormattedFilters.ts
+++ b/src/app/utils/getAPIFormattedFilters.ts
@@ -74,6 +74,11 @@ export function getAPIFormattedFilters(
   if (appliedFilters.trpWindows.length > 0) {
     filterArray.push(`trpWindows=${appliedFilters.trpWindows.join(",")}`);
   }
+  if (appliedFilters.portfolioCategories.length > 0) {
+    filterArray.push(
+      `portfolioCategories=${appliedFilters.portfolioCategories.join(",")}`
+    );
+  }
 
   return filterArray.join("&");
 }

From 3304597b6090ae76fdb23cb613a41e3cd7e124e6 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Thu, 4 May 2023 15:31:05 +0300
Subject: [PATCH 26/69] fix: datasets eligibility table not expanded

---
 .../accessToFunding/eligibility/eligibilityTable.tsx         | 3 ++-
 .../sub-modules/accessToFunding/eligibility/tableWrapper.tsx | 4 +++-
 .../viz-module/sub-modules/accessToFunding/location.tsx      | 5 ++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/eligibilityTable.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/eligibilityTable.tsx
index 7ace500d5..4d0f52633 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/eligibilityTable.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/eligibilityTable.tsx
@@ -16,12 +16,12 @@ interface EligibilityTableProps {
   setSearch: (value: string) => void;
   setSortBy: (value: string) => void;
   title: string;
+  forceExpand?: boolean;
 }
 
 export function EligibilityTable(props: EligibilityTableProps) {
   return (
     <SimpleTable
-      forceExpand
       search={props.search}
       sortBy={props.sortBy}
       rows={props.data}
@@ -29,6 +29,7 @@ export function EligibilityTable(props: EligibilityTableProps) {
       columns={props.columns}
       onSearchChange={props.setSearch}
       onSortByChange={props.setSortBy}
+      forceExpand={props.forceExpand}
       multiVizPageDataKey="eligibility"
     />
   );
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
index e4182097a..a28042318 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
@@ -18,6 +18,7 @@ import { EligibilityTable } from "app/modules/viz-module/sub-modules/accessToFun
 
 interface Props {
   code?: string;
+  forceExpand?: boolean;
 }
 
 export function AccessToFundingEligibilityTableWrapper(props: Props) {
@@ -123,7 +124,7 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
     if (appliedFilters.diseaseBurden.length > 0) {
       filterStr.push(`diseaseBurden=${appliedFilters.diseaseBurden.join(",")}`);
     }
-    if (cycle !== "All") {
+    if (cycle !== "All" && props.code) {
       filterStr.push(
         `cycles=${(cycle || "").replace("-20", "-")}${
           cycle === "2002-2013" ? ",null" : ""
@@ -328,6 +329,7 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
         setSortBy={setSortBy}
         columns={columns}
         title={props.code ? cycle || "" : ""}
+        forceExpand={props.forceExpand}
       />
       <TablePagination
         page={page}
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
index 68d080b95..6d7850011 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
@@ -155,7 +155,10 @@ export default function LocationAccessToFundingWrapper(props: Props) {
               </p>
             </div>
             <Box height="50px" />
-            <AccessToFundingEligibilityTableWrapper code={props.code} />
+            <AccessToFundingEligibilityTableWrapper
+              forceExpand
+              code={props.code}
+            />
           </div>
         )}
         <div>

From 07212a304085ead56b892ac80322733d737450fc Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Fri, 5 May 2023 14:13:05 +0300
Subject: [PATCH 27/69] feat: access to funding tables without location

---
 src/app/components/Table/funding/index.tsx    | 90 +++++++++----------
 .../eligibility/tableWrapper.tsx              | 30 ++++++-
 .../fundingRequest/tableWrapper.tsx           |  6 +-
 .../table/data-wrappers/data.ts               | 16 ++--
 4 files changed, 84 insertions(+), 58 deletions(-)

diff --git a/src/app/components/Table/funding/index.tsx b/src/app/components/Table/funding/index.tsx
index 076b1fe9a..3fef44585 100644
--- a/src/app/components/Table/funding/index.tsx
+++ b/src/app/components/Table/funding/index.tsx
@@ -403,57 +403,55 @@ export function FundingRequestTable(props: FundingTableProps) {
       />
       <TableContainer>
         <Table>
-          {!props.forceExpand && (
-            <TableHead>
-              <TableRow>
-                {props.columns.map(
-                  (column: FundingTableColumn, index: number) => {
-                    let icon = undefined;
-                    if (
-                      sortBySplits.length > 1 &&
-                      sortBySplits[0] === column.key
-                    ) {
-                      if (sortBySplits[1] === "DESC") {
-                        icon = <ArrowDownward />;
-                      } else {
-                        icon = <ArrowUpward />;
-                      }
+          <TableHead>
+            <TableRow>
+              {props.columns.map(
+                (column: FundingTableColumn, index: number) => {
+                  let icon = undefined;
+                  if (
+                    sortBySplits.length > 1 &&
+                    sortBySplits[0] === column.key
+                  ) {
+                    if (sortBySplits[1] === "DESC") {
+                      icon = <ArrowDownward />;
+                    } else {
+                      icon = <ArrowUpward />;
                     }
-                    return (
-                      <TableCell
-                        key={column.key}
-                        css={`
-                          padding: 16px 10px;
-                          ${index === 0 ? "padding-left: 40px;" : ""}
+                  }
+                  return (
+                    <TableCell
+                      key={column.key}
+                      css={`
+                        padding: 16px 10px;
+                        ${index === 0 ? "padding-left: 40px;" : ""}
 
-                          > button {
-                            ${tablecell}
-                            padding-left: 0;
-                            text-transform: none;
+                        > button {
+                          ${tablecell}
+                          padding-left: 0;
+                          text-transform: none;
 
-                            > span {
-                              font-size: 16px;
-                              font-weight: bold;
-                              justify-content: flex-start;
-                              font-family: "GothamNarrow-Bold", "Helvetica Neue",
-                                sans-serif;
-                            }
+                          > span {
+                            font-size: 16px;
+                            font-weight: bold;
+                            justify-content: flex-start;
+                            font-family: "GothamNarrow-Bold", "Helvetica Neue",
+                              sans-serif;
                           }
-                        `}
+                        }
+                      `}
+                    >
+                      <Button
+                        onClick={() => onSortByChange(column.key)}
+                        endIcon={icon}
                       >
-                        <Button
-                          onClick={() => onSortByChange(column.key)}
-                          endIcon={icon}
-                        >
-                          {column.name}
-                        </Button>
-                      </TableCell>
-                    );
-                  }
-                )}
-              </TableRow>
-            </TableHead>
-          )}
+                        {column.name}
+                      </Button>
+                    </TableCell>
+                  );
+                }
+              )}
+            </TableRow>
+          </TableHead>
           <TableBody>
             {props.rows.map((row: FundingTableRow, index: number) => (
               <Row
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
index a28042318..fe7b369ed 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
@@ -32,7 +32,9 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
   );
 
   const [search, setSearch] = React.useState("");
-  const [sortBy, setSortBy] = React.useState("level1 ASC");
+  const [sortBy, setSortBy] = React.useState(
+    `level1 ${props.code ? "DESC" : "ASC"}`
+  );
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(10);
   const [openToolboxPanel, setOpenToolboxPanel] = React.useState(false);
@@ -216,6 +218,30 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
     ];
   }
 
+  let formattedData: SimpleTableRow[] = [];
+  if (props.code && props.forceExpand) {
+    if (selectedAggregate === "componentName") {
+      data.forEach((row) => {
+        formattedData.push({
+          ...row,
+          children: row.children?.map((child) => ({
+            level1: child.level1,
+            ...child.children?.[0],
+          })),
+        });
+      });
+    } else {
+      columns[0] = { name: "Year", key: "level1" };
+      data.forEach((row) => {
+        row.children?.forEach((child) => {
+          formattedData.push(child);
+        });
+      });
+    }
+  } else {
+    formattedData = data;
+  }
+
   return (
     <div
       css={`
@@ -324,7 +350,7 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
       <EligibilityTable
         search={search}
         sortBy={sortBy}
-        data={data.slice(page * rowsPerPage, (page + 1) * rowsPerPage)}
+        data={formattedData.slice(page * rowsPerPage, (page + 1) * rowsPerPage)}
         setSearch={setSearch}
         setSortBy={setSortBy}
         columns={columns}
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
index 6efffbcac..63d73dcf5 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
@@ -212,10 +212,12 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
         forceExpand
         search={search}
         sortBy={sortBy}
-        data={data}
+        data={props.code ? get(data, "[0].children", []) : data}
         setSearch={setSearch}
         setSortBy={setSortBy}
-        columns={fundingRequestColumns}
+        columns={
+          props.code ? fundingRequestColumns[0].col : fundingRequestColumns
+        }
         title={cycle || ""}
       />
     </div>
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts
index ffe9c5687..e31581d27 100644
--- a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts
@@ -5,7 +5,7 @@ export const fundingRequestColumns = [
     col: [
       {
         key: "component",
-        name: "",
+        name: "Component",
         col: [
           {
             key: "gac",
@@ -35,27 +35,27 @@ export const fundingRequestColumns = [
       },
       {
         key: "date",
-        name: "",
+        name: "Submission Date",
       },
       {
         key: "approach",
-        name: "",
+        name: "Approach",
       },
       {
         key: "window",
-        name: "",
+        name: "TRP Window",
       },
       {
         key: "outcome",
-        name: "",
+        name: "TRP Outcome",
       },
       {
         key: "portfolioCategory",
-        name: "",
+        name: "Portfolio Categorization",
       },
       {
         key: "board",
-        name: "",
+        name: "Board Approval",
       },
     ],
   },
@@ -65,7 +65,7 @@ export const cellData = [
   "Component",
   "Submission date",
   "Approach",
-  "TRP Window ",
+  "TRP Window",
   "TRP Outcome",
   "Portfolio Categorization",
   "Board Approval",

From 532150c7e99f0ed19b6c2628aa53078494d4a950 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Thu, 11 May 2023 23:25:25 +0100
Subject: [PATCH 28/69] feat: sort table data by descending order

---
 .../accessToFunding/eligibility/tableWrapper.tsx       | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
index fe7b369ed..e34c8bd0c 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
@@ -1,6 +1,8 @@
 /* third-party */
 import React from "react";
 import get from "lodash/get";
+import lodash from "lodash";
+
 import { useDebounce } from "react-use";
 import { useRecoilValue } from "recoil";
 import Slide from "@material-ui/core/Slide";
@@ -154,7 +156,7 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
 
   const [,] = useDebounce(
     () => {
-      if (search.length > 0) {
+      if (search.length > 0 || search === "") {
         reloadData();
       }
     },
@@ -241,6 +243,10 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
   } else {
     formattedData = data;
   }
+  const sortedData = formattedData.map((data) => {
+    const sort = lodash.orderBy(data.children, ["level1"], ["desc"]);
+    return { ...data, children: sort };
+  });
 
   return (
     <div
@@ -350,7 +356,7 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
       <EligibilityTable
         search={search}
         sortBy={sortBy}
-        data={formattedData.slice(page * rowsPerPage, (page + 1) * rowsPerPage)}
+        data={sortedData.slice(page * rowsPerPage, (page + 1) * rowsPerPage)}
         setSearch={setSearch}
         setSortBy={setSortBy}
         columns={columns}

From f8f4df35b6e56d6d1436fbc87279db2e70e3af70 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Thu, 11 May 2023 23:29:51 +0100
Subject: [PATCH 29/69] feat: reload data when search is empty

---
 .../sub-modules/accessToFunding/eligibility/tableWrapper.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
index e34c8bd0c..5389e57b7 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
@@ -1,7 +1,7 @@
 /* third-party */
 import React from "react";
 import get from "lodash/get";
-import lodash from "lodash";
+import orderBy from "lodash/orderBy";
 
 import { useDebounce } from "react-use";
 import { useRecoilValue } from "recoil";
@@ -244,7 +244,7 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
     formattedData = data;
   }
   const sortedData = formattedData.map((data) => {
-    const sort = lodash.orderBy(data.children, ["level1"], ["desc"]);
+    const sort = orderBy(data.children, ["level1"], ["desc"]);
     return { ...data, children: sort };
   });
 

From ef8a945510f6d8b4b07aea4373fd169f664bd42a Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Mon, 15 May 2023 21:46:38 +0100
Subject: [PATCH 30/69] fix: adjust table minimum height

---
 src/app/components/Table/funding/index.tsx                      | 1 +
 .../sub-modules/accessToFunding/eligibility/tableWrapper.tsx    | 2 +-
 .../sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/components/Table/funding/index.tsx b/src/app/components/Table/funding/index.tsx
index 3fef44585..62d8f7644 100644
--- a/src/app/components/Table/funding/index.tsx
+++ b/src/app/components/Table/funding/index.tsx
@@ -391,6 +391,7 @@ export function FundingRequestTable(props: FundingTableProps) {
     <div
       css={`
         display: relative;
+        min-height: 600px;
       `}
     >
       <TableToolbar
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
index 5389e57b7..9b827c7e3 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
@@ -302,7 +302,7 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
               width: 600px;
               height: 100%;
               overflow-y: auto;
-              min-height: 700px;
+
               position: absolute;
               background: #f5f5f7;
               border-radius: 20px;
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
index 63d73dcf5..46c3b6724 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
@@ -165,8 +165,8 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
             z-index: 4;
             right: -8px;
             width: 600px;
+
             height: 100%;
-            min-height: 700px;
             position: absolute;
             background: #f5f5f7;
             visibility: visible !important;

From a19d1e63a4a93217f9916c1cf3d8e9ba94cab0f1 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Mon, 15 May 2023 21:49:24 +0100
Subject: [PATCH 31/69] feat: add replenishment period to budgets and grants

---
 src/app/components/Table/Simple/index.tsx     | 129 ++++++++++--------
 .../ToolBoxPanel/components/filters/data.ts   |   2 -
 src/app/modules/grant-detail-module/index.tsx |   1 +
 3 files changed, 72 insertions(+), 60 deletions(-)

diff --git a/src/app/components/Table/Simple/index.tsx b/src/app/components/Table/Simple/index.tsx
index edbba1818..187c581db 100644
--- a/src/app/components/Table/Simple/index.tsx
+++ b/src/app/components/Table/Simple/index.tsx
@@ -105,6 +105,11 @@ function Row(props: {
               key={column.key}
               css={`
                 ${tablecell}
+                font-weight: ${props.row.children ? 700 : "normal"};
+                font-family: "GothamNarrow-${props.row.children
+                    ? "Bold"
+                    : "Book"}",
+                  "Helvetica Neue", sans-serif;
                 width: calc(${columnWidthCalc});
                 ${index === 0
                   ? `padding-left: ${firstColumnPadding}px;width: ${firstColumnWidth}`
@@ -130,9 +135,7 @@ function Row(props: {
                     display: flex;
                     align-items: center;
                     flex-direction: row;
-                    font-weight: ${index === 0 ? "bold" : "normal"};
-                    font-family: "GothamNarrow-${index === 0 ? "Bold" : "Book"}",
-                      "Helvetica Neue", sans-serif;
+
                     color: ${column.valueToColorMap
                       ? column.valueToColorMap[value]
                       : "inherit"};
@@ -238,36 +241,45 @@ export function SimpleTable(props: SimpleTableProps) {
 
   return (
     <React.Fragment>
-      <TableToolbar
-        title={props.title}
-        search={props.search}
-        columns={toolbarCols}
-        onSearchChange={props.onSearchChange}
-        multiVizPageDataKey={props.multiVizPageDataKey}
-        onColumnViewSelectionChange={onColumnViewSelectionChange}
-      />
-      <TableContainer>
-        <Table aria-label="Simple table">
-          <TableHead>
-            <TableRow>
-              {filter(
-                props.columns,
-                (_c, index) => visibleColumnsIndexes.indexOf(index) > -1
-              ).map((column: SimpleTableColumn, index: number) => {
-                let icon = undefined;
-                const monetaryColumn =
-                  column.name.indexOf("(USD)") > -1 || column.name === "Grants";
-                if (sortBySplits.length > 1 && sortBySplits[0] === column.key) {
-                  if (sortBySplits[1] === "DESC") {
-                    icon = <ArrowDownward />;
-                  } else {
-                    icon = <ArrowUpward />;
+      <div
+        css={`
+          min-height: 600px;
+        `}
+      >
+        <TableToolbar
+          title={props.title}
+          search={props.search}
+          columns={toolbarCols}
+          onSearchChange={props.onSearchChange}
+          multiVizPageDataKey={props.multiVizPageDataKey}
+          onColumnViewSelectionChange={onColumnViewSelectionChange}
+        />
+        <TableContainer>
+          <Table aria-label="Simple table">
+            <TableHead>
+              <TableRow>
+                {filter(
+                  props.columns,
+                  (_c, index) => visibleColumnsIndexes.indexOf(index) > -1
+                ).map((column: SimpleTableColumn, index: number) => {
+                  let icon = undefined;
+                  const monetaryColumn =
+                    column.name.indexOf("(USD)") > -1 ||
+                    column.name === "Grants";
+                  if (
+                    sortBySplits.length > 1 &&
+                    sortBySplits[0] === column.key
+                  ) {
+                    if (sortBySplits[1] === "DESC") {
+                      icon = <ArrowDownward />;
+                    } else {
+                      icon = <ArrowUpward />;
+                    }
                   }
-                }
-                return (
-                  <TableCell
-                    key={column.key}
-                    css={`
+                  return (
+                    <TableCell
+                      key={column.key}
+                      css={`
                       ${index === 0 ? "padding-left: 40px;" : ""}
                       ${monetaryColumn ? "text-align: right;" : ""}
 
@@ -285,33 +297,34 @@ export function SimpleTable(props: SimpleTableProps) {
                         }
                       }
                     `}
-                  >
-                    <Button
-                      onClick={() => onSortByChange(column.key)}
-                      endIcon={icon}
                     >
-                      {column.name}
-                    </Button>
-                  </TableCell>
-                );
-              })}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {props.rows.map((row: SimpleTableRow) => (
-              <Row
-                key={row.name}
-                row={row}
-                columns={props.columns}
-                forceExpand={props.forceExpand}
-                formatNumbers={props.formatNumbers}
-                visibleColumnsIndexes={visibleColumnsIndexes}
-              />
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-      <div css="width: 100%;height: 25px;" />
+                      <Button
+                        onClick={() => onSortByChange(column.key)}
+                        endIcon={icon}
+                      >
+                        {column.name}
+                      </Button>
+                    </TableCell>
+                  );
+                })}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {props.rows.map((row: SimpleTableRow) => (
+                <Row
+                  key={row.name}
+                  row={row}
+                  columns={props.columns}
+                  forceExpand={props.forceExpand}
+                  formatNumbers={props.formatNumbers}
+                  visibleColumnsIndexes={visibleColumnsIndexes}
+                />
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+        <div css="width: 100%;height: 25px;" />
+      </div>
     </React.Fragment>
   );
 }
diff --git a/src/app/components/ToolBoxPanel/components/filters/data.ts b/src/app/components/ToolBoxPanel/components/filters/data.ts
index 122b78254..bf2384f97 100644
--- a/src/app/components/ToolBoxPanel/components/filters/data.ts
+++ b/src/app/components/ToolBoxPanel/components/filters/data.ts
@@ -215,7 +215,6 @@ export const pathnameToFilterGroups = {
     filtergroups,
     (fg: FilterGroupProps) =>
       fg.name !== "Donors" &&
-      fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
       fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
@@ -363,7 +362,6 @@ export const pathnameToFilterGroups = {
     filtergroups,
     (fg: FilterGroupProps) =>
       fg.name !== "Donors" &&
-      fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
       fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
diff --git a/src/app/modules/grant-detail-module/index.tsx b/src/app/modules/grant-detail-module/index.tsx
index e9bbaed8a..fb77af7be 100644
--- a/src/app/modules/grant-detail-module/index.tsx
+++ b/src/app/modules/grant-detail-module/index.tsx
@@ -210,6 +210,7 @@ export default function GrantDetail() {
           />
         </React.Fragment>
       )}
+
       <div
         id="export-view-div"
         css={`

From 94b851c2b30588c81a5e505ae78ed9d7c0fdbfad Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Fri, 19 May 2023 15:11:35 +0100
Subject: [PATCH 32/69] fix: remove replenishment period from  budgets and
 grants

---
 src/app/components/ToolBoxPanel/components/filters/data.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/components/ToolBoxPanel/components/filters/data.ts b/src/app/components/ToolBoxPanel/components/filters/data.ts
index bf2384f97..122b78254 100644
--- a/src/app/components/ToolBoxPanel/components/filters/data.ts
+++ b/src/app/components/ToolBoxPanel/components/filters/data.ts
@@ -215,6 +215,7 @@ export const pathnameToFilterGroups = {
     filtergroups,
     (fg: FilterGroupProps) =>
       fg.name !== "Donors" &&
+      fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
       fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"
@@ -362,6 +363,7 @@ export const pathnameToFilterGroups = {
     filtergroups,
     (fg: FilterGroupProps) =>
       fg.name !== "Donors" &&
+      fg.name !== "Replenishment Periods" &&
       fg.name !== "Document Types" &&
       fg.name !== "Portfolio Categorization" &&
       fg.name !== "TRP Window"

From 473030d753b0dd91f44fb10e392900af7643e26f Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Mon, 22 May 2023 14:59:20 +0100
Subject: [PATCH 33/69] feat: add All filter to allocation period filter

---
 .../components/allocationsperiods/index.tsx   | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/app/components/ToolBoxPanel/components/allocationsperiods/index.tsx b/src/app/components/ToolBoxPanel/components/allocationsperiods/index.tsx
index 965b6509e..ccd230d5b 100644
--- a/src/app/components/ToolBoxPanel/components/allocationsperiods/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/allocationsperiods/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import get from "lodash/get";
 import { useStoreState, useStoreActions } from "app/state/store/hooks";
 import { ToolBoxPanelAggregateBy } from "app/components/ToolBoxPanel/components/aggregateby";
@@ -8,6 +8,21 @@ export function AllocationsPeriods() {
     (state) => get(state.AllocationsPeriods.data, "data", []) as string[]
   );
 
+  const minMaxPeriod = `${
+    dataPeriodOptions[dataPeriodOptions.length - 1].split("-")[1]
+  } - ${dataPeriodOptions[0].split("-")[0]}`;
+
+  const [periodList, setPeriodList] = React.useState(
+    dataPeriodOptions.map((period: string) => ({
+      label: period,
+      value: period,
+    }))
+  );
+
+  useEffect(() => {
+    setPeriodList([...periodList, { label: "All", value: minMaxPeriod }]);
+  }, []);
+
   const selectedPeriod = useStoreState(
     (state) => state.ToolBoxPanelAllocationsPeriodState.value
   );
@@ -25,10 +40,7 @@ export function AllocationsPeriods() {
       title="Period"
       selected={selectedPeriod}
       setSelected={setSelectedPeriod}
-      options={dataPeriodOptions.map((period: string) => ({
-        label: period,
-        value: period,
-      }))}
+      options={periodList}
     />
   );
 }

From 72874f7dd5e643f59d34ef0e51dc5e48f2c770c5 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Mon, 22 May 2023 17:49:12 +0300
Subject: [PATCH 34/69] fix: allocations all periods filter

---
 .../components/allocationsperiods/index.tsx   | 25 +++++++++++--------
 .../sub-modules/allocations/geomap/index.tsx  |  9 ++++---
 .../sub-modules/allocations/index.tsx         | 19 +++++++++-----
 3 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/app/components/ToolBoxPanel/components/allocationsperiods/index.tsx b/src/app/components/ToolBoxPanel/components/allocationsperiods/index.tsx
index ccd230d5b..7573b362f 100644
--- a/src/app/components/ToolBoxPanel/components/allocationsperiods/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/allocationsperiods/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import get from "lodash/get";
 import { useStoreState, useStoreActions } from "app/state/store/hooks";
 import { ToolBoxPanelAggregateBy } from "app/components/ToolBoxPanel/components/aggregateby";
@@ -8,19 +8,22 @@ export function AllocationsPeriods() {
     (state) => get(state.AllocationsPeriods.data, "data", []) as string[]
   );
 
-  const minMaxPeriod = `${
-    dataPeriodOptions[dataPeriodOptions.length - 1].split("-")[1]
-  } - ${dataPeriodOptions[0].split("-")[0]}`;
-
-  const [periodList, setPeriodList] = React.useState(
-    dataPeriodOptions.map((period: string) => ({
+  const [periodList, setPeriodList] = React.useState([
+    { label: "All", value: "All" },
+    ...dataPeriodOptions.map((period: string) => ({
       label: period,
       value: period,
-    }))
-  );
+    })),
+  ]);
 
-  useEffect(() => {
-    setPeriodList([...periodList, { label: "All", value: minMaxPeriod }]);
+  React.useEffect(() => {
+    setPeriodList([
+      { label: "All", value: "All" },
+      ...dataPeriodOptions.map((period: string) => ({
+        label: period,
+        value: period,
+      })),
+    ]);
   }, []);
 
   const selectedPeriod = useStoreState(
diff --git a/src/app/modules/viz-module/sub-modules/allocations/geomap/index.tsx b/src/app/modules/viz-module/sub-modules/allocations/geomap/index.tsx
index 99c2a5818..e9b6dacea 100644
--- a/src/app/modules/viz-module/sub-modules/allocations/geomap/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/allocations/geomap/index.tsx
@@ -76,9 +76,12 @@ export function AllocationsGeoMap(props: Props) {
     );
     if (geomapView === "countries") {
       fetchData({
-        filterString: `periods=${selectedPeriod}${
-          filterString.length > 0 ? `&${filterString}` : ""
-        }`,
+        filterString:
+          selectedPeriod !== "All"
+            ? `periods=${selectedPeriod}${
+                filterString.length > 0 ? `&${filterString}` : ""
+              }`
+            : "",
       });
     } else if (geomapView === "multicountries") {
       fetchMCData({ filterString });
diff --git a/src/app/modules/viz-module/sub-modules/allocations/index.tsx b/src/app/modules/viz-module/sub-modules/allocations/index.tsx
index 0bf1ba7ec..8098e70b9 100644
--- a/src/app/modules/viz-module/sub-modules/allocations/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/allocations/index.tsx
@@ -269,9 +269,12 @@ export function AllocationsModule(props: AllocationsModuleProps) {
     );
 
     fetchData({
-      filterString: `periods=${selectedPeriod}${
-        filterString.length > 0 ? `&${filterString}` : ""
-      }`,
+      filterString:
+        selectedPeriod !== "All"
+          ? `periods=${selectedPeriod}${
+              filterString.length > 0 ? `&${filterString}` : ""
+            }`
+          : "",
     });
   }, [props.code, appliedFilters, selectedPeriod]);
 
@@ -309,9 +312,13 @@ export function AllocationsModule(props: AllocationsModuleProps) {
         )
           .split(",")
           .map((s: string) => `'${s}'`)
-          .join(",")})&periods=${selectedPeriod}${
-          filterString.length > 0 ? `&${filterString}` : ""
-        }`,
+          .join(",")})${
+          selectedPeriod !== "All"
+            ? `&periods=${selectedPeriod}${
+                filterString.length > 0 ? `&${filterString}` : ""
+              }`
+            : ""
+        }${filterString.length > 0 ? `&${filterString}` : ""}`,
       });
     } else {
       [...items].forEach((item: Element) => {

From e91a67016e9e6c309b0fd8b201aff306752b0be4 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Fri, 26 May 2023 08:23:55 +0100
Subject: [PATCH 35/69] feat: rearrange access to funding content

---
 .../accessToFunding/fundingRequest/table.tsx  | 15 ----
 .../fundingRequest/tableWrapper.tsx           | 47 +++++++++-
 .../sub-modules/accessToFunding/location.tsx  | 85 ++++++++++++-------
 3 files changed, 99 insertions(+), 48 deletions(-)

diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/table.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/table.tsx
index 04e167820..3e93c5847 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/table.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/table.tsx
@@ -19,8 +19,6 @@ interface FundingRequestTableProps {
 }
 
 export function Table(props: FundingRequestTableProps) {
-  const cmsData = useCMSData({ returnData: true });
-
   return (
     <div>
       <FundingRequestTable
@@ -35,19 +33,6 @@ export function Table(props: FundingRequestTableProps) {
         paddingLeft={2}
         forceExpand={props.forceExpand}
       />
-      <div css="width: 100%;height: 25px;" />
-      <div
-        css={`
-          width: 90%;
-          margin: 0 auto;
-          font-size: 14px;
-          line-height: 17px;
-          text-align: center;
-        `}
-      >
-        {get(cmsData, "modulesFundingRequests.tableDisclaimer", "")}
-      </div>
-      <div css="width: 100%;height: 25px;" />
     </div>
   );
 }
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
index 46c3b6724..f7c3d68e7 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
@@ -14,6 +14,7 @@ import { ToolBoxPanelFilters } from "app/components/ToolBoxPanel/components/filt
 import { FilterGroupProps } from "app/components/ToolBoxPanel/components/filters/data";
 import { Table } from "app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/table";
 import { fundingRequestColumns } from "app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data";
+import TablePagination from "@material-ui/core/TablePagination";
 
 interface Props {
   code: string;
@@ -35,6 +36,25 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
       ) as SimpleTableRow[]
   );
 
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(10);
+
+  const handleChangePage = (
+    _event: React.MouseEvent<HTMLButtonElement> | null,
+    newPage: number
+  ) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  console.log(data, "data");
+
   const fetchData = useStoreActions(
     (store) => store.LocationAccessToFunding.FundingRequestsTable.fetch
   );
@@ -212,7 +232,14 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
         forceExpand
         search={search}
         sortBy={sortBy}
-        data={props.code ? get(data, "[0].children", []) : data}
+        data={
+          props.code
+            ? get(data, "[0].children", []).slice(
+                page * rowsPerPage,
+                (page + 1) * rowsPerPage
+              )
+            : data.slice(page * rowsPerPage, (page + 1) * rowsPerPage)
+        }
         setSearch={setSearch}
         setSortBy={setSortBy}
         columns={
@@ -220,6 +247,24 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
         }
         title={cycle || ""}
       />
+      <TablePagination
+        page={page}
+        component="div"
+        count={data.length}
+        rowsPerPage={rowsPerPage}
+        onPageChange={handleChangePage}
+        onRowsPerPageChange={handleChangeRowsPerPage}
+        css={`
+          @media (min-width: 768px) {
+            .MuiTablePagination-toolbar {
+              padding-left: 40px;
+            }
+            .MuiTablePagination-spacer {
+              display: none;
+            }
+          }
+        `}
+      />
     </div>
   );
 }
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
index 6d7850011..d608859d0 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
@@ -16,6 +16,7 @@ import {
 import { AccessToFundingRequestTableWrapper } from "app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper";
 import { AccessToFundingEligibilityTableWrapper } from "app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper";
 import { Link } from "react-router-dom";
+import { useCMSData } from "app/hooks/useCMSData";
 
 interface Props {
   code: string;
@@ -24,6 +25,8 @@ interface Props {
 }
 
 export default function LocationAccessToFundingWrapper(props: Props) {
+  const cmsData = useCMSData({ returnData: true });
+
   const [cycle, setCycle] = useRecoilState(locationAccessToFundingCycleAtom);
 
   const grantCycles = useStoreState(
@@ -87,11 +90,12 @@ export default function LocationAccessToFundingWrapper(props: Props) {
   return (
     <>
       <div css={descriptioncss}>
+        <Box height={30} />
         <h1>
           <b>Access to Funding</b>
         </h1>
         <h3>
-          <b>Eligibility, Allocation & Funding Requests</b>
+          <b>Allocation, Funding Requests & Eligibility</b>
         </h3>
         <p>
           Eligibility for Global Fund support is determined by the income
@@ -130,37 +134,8 @@ export default function LocationAccessToFundingWrapper(props: Props) {
         </div>
       </div>
       <div css={vizcss}>
-        {props.code.length === 3 && (
-          <div>
-            <h4>
-              <b>Eligibility </b>
-            </h4>
-            <hr />
-            <div css={descriptioncss}>
-              <p>
-                Below are the components which are eligible for an allocation
-                for the selected allocation period, according to the Global Fund
-                Eligibility Policy. Eligibility does not guarantee a funding
-                allocation. Learn more about Eligibility{" "}
-                <a
-                  target="_blank"
-                  href="https://www.theglobalfund.org/en/applying-for-funding/understand-and-prepare/eligibility/"
-                >
-                  here
-                </a>{" "}
-                or{" "}
-                <Link to={`/viz/eligibility/table?locations=${props.code}`}>
-                  see the full history of eligibility for this country.
-                </Link>
-              </p>
-            </div>
-            <Box height="50px" />
-            <AccessToFundingEligibilityTableWrapper
-              forceExpand
-              code={props.code}
-            />
-          </div>
-        )}
+        <Box height={35} />
+
         <div>
           <h4>
             <b>Allocation</b>
@@ -263,12 +238,58 @@ export default function LocationAccessToFundingWrapper(props: Props) {
             <b>Funding Requests</b>
           </h4>
           <hr />
+          <div
+            css={`
+              width: 90%;
+              margin: 0 auto;
+              font-size: 14px;
+              line-height: 17px;
+              text-align: center;
+            `}
+          >
+            {get(cmsData, "modulesFundingRequests.tableDisclaimer", "")}
+          </div>
+          <div css="width: 100%;height: 25px;" />
+
           <AccessToFundingRequestTableWrapper
             code={props.code}
             codeParam={props.codeParam}
             filterGroups={props.filterGroups}
           />
         </div>
+        {props.code.length === 3 && (
+          <div>
+            <Box height={35} />
+
+            <h4>
+              <b>Eligibility </b>
+            </h4>
+            <hr />
+            <div css={descriptioncss}>
+              <p>
+                Below are the components which are eligible for an allocation
+                for the selected allocation period, according to the Global Fund
+                Eligibility Policy. Eligibility does not guarantee a funding
+                allocation. Learn more about Eligibility{" "}
+                <a
+                  target="_blank"
+                  href="https://www.theglobalfund.org/en/applying-for-funding/understand-and-prepare/eligibility/"
+                >
+                  here
+                </a>{" "}
+                or{" "}
+                <Link to={`/viz/eligibility/table?locations=${props.code}`}>
+                  see the full history of eligibility for this country.
+                </Link>
+              </p>
+            </div>
+            <Box height="50px" />
+            <AccessToFundingEligibilityTableWrapper
+              forceExpand
+              code={props.code}
+            />
+          </div>
+        )}
       </div>
       <Box height={25} />
     </>

From 4aa44c04ab28ab0c3815364c2073867f3831123d Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Fri, 26 May 2023 08:34:38 +0100
Subject: [PATCH 36/69] feat: rearrange access to funding content

---
 .../modules/viz-module/sub-modules/accessToFunding/location.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
index d608859d0..cefbeb445 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
@@ -249,7 +249,7 @@ export default function LocationAccessToFundingWrapper(props: Props) {
           >
             {get(cmsData, "modulesFundingRequests.tableDisclaimer", "")}
           </div>
-          <div css="width: 100%;height: 25px;" />
+          <div css="width: 100%;height: 40px;" />
 
           <AccessToFundingRequestTableWrapper
             code={props.code}

From 97bfe748ed234f87d59903718c523d1f75dabb1e Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Fri, 26 May 2023 16:09:36 +0300
Subject: [PATCH 37/69] chore: minor alignments

---
 .../useClearDataPathStepsOnDatasetChange.tsx  |   1 -
 .../fundingRequest/tableWrapper.tsx           |   2 -
 .../sub-modules/accessToFunding/location.tsx  | 130 +++++++++---------
 .../sub-modules/allocations/index.tsx         |   2 -
 4 files changed, 64 insertions(+), 71 deletions(-)

diff --git a/src/app/hooks/useClearDataPathStepsOnDatasetChange.tsx b/src/app/hooks/useClearDataPathStepsOnDatasetChange.tsx
index 50cda0f71..16684f35b 100644
--- a/src/app/hooks/useClearDataPathStepsOnDatasetChange.tsx
+++ b/src/app/hooks/useClearDataPathStepsOnDatasetChange.tsx
@@ -92,7 +92,6 @@ export function useClearDataPathStepsOnDatasetChange() {
         if (newDataPathSteps.length > 0) {
           newDataPathSteps[newDataPathSteps.length - 1].path =
             location.pathname;
-          console.log("newDataPathSteps", newDataPathSteps);
           setDataPathSteps(newDataPathSteps);
         }
       }
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
index f7c3d68e7..a2cb1642c 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
@@ -53,8 +53,6 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
     setPage(0);
   };
 
-  console.log(data, "data");
-
   const fetchData = useStoreActions(
     (store) => store.LocationAccessToFunding.FundingRequestsTable.fetch
   );
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
index cefbeb445..8e461caf2 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
@@ -135,7 +135,6 @@ export default function LocationAccessToFundingWrapper(props: Props) {
       </div>
       <div css={vizcss}>
         <Box height={35} />
-
         <div>
           <h4>
             <b>Allocation</b>
@@ -145,6 +144,7 @@ export default function LocationAccessToFundingWrapper(props: Props) {
             css={`
               gap: 1rem;
               display: flex;
+              min-height: 500px;
               position: relative;
               align-items: center;
               justify-content: space-evenly;
@@ -156,81 +156,79 @@ export default function LocationAccessToFundingWrapper(props: Props) {
               keys={keys}
               isLoading={isLoading}
             />
-            <div
-              css={`
-                /* background: pink; */
-              `}
-            >
+            {!isLoading && (
               <div>
-                <p
-                  css={`
-                    font-size: 24px;
-                    color: #252c34;
-                    text-align: center;
-                    margin-bottom: 0px;
-                  `}
-                >
-                  <b>{formatFinancialValue(total)}</b>
-                </p>
-                <p
+                <div>
+                  <p
+                    css={`
+                      font-size: 24px;
+                      color: #252c34;
+                      text-align: center;
+                      margin-bottom: 0px;
+                    `}
+                  >
+                    <b>{formatFinancialValue(total)}</b>
+                  </p>
+                  <p
+                    css={`
+                      font-size: 14px;
+                      color: #252c34;
+                      text-align: center;
+                      margin-top: 5px;
+                    `}
+                  >
+                    Allocated to {locationInfoData.locationName} for{" "}
+                    <b>{cycle}</b>
+                  </p>
+                </div>
+                <div
                   css={`
-                    font-size: 14px;
-                    color: #252c34;
+                    gap: 2rem;
+                    margin: auto;
+                    display: flex;
+                    margin-top: 3rem;
                     text-align: center;
-                    margin-top: 5px;
+                    align-items: center;
+                    justify-content: center;
                   `}
                 >
-                  Allocated to {locationInfoData.locationName} for{" "}
-                  <b>{cycle}</b>
-                </p>
-              </div>
-              <div
-                css={`
-                  gap: 2rem;
-                  margin: auto;
-                  display: flex;
-                  margin-top: 3rem;
-                  text-align: center;
-                  align-items: center;
-                  justify-content: center;
-                `}
-              >
-                {values.map((val, index) => (
-                  <div
-                    key={keys[index]}
-                    css={`
-                      display: flex;
-                      align-items: center;
-                      flex-direction: column;
-                      justify-content: center;
-                    `}
-                  >
+                  {values.map((val, index) => (
                     <div
+                      key={keys[index]}
                       css={`
-                        width: 31px;
-                        height: 31px;
-                        border-radius: 50%;
-                        background: ${colors[index]};
-                      `}
-                    />
-                    <p
-                      css={`
-                        font-size: 18px;
+                        display: flex;
+                        align-items: center;
+                        flex-direction: column;
+                        justify-content: center;
                       `}
                     >
-                      <b>
-                        {formatLargeAmountsWithPrefix(val)
-                          .replace("$", "")
-                          .replace("bln", "billion")
-                          .replace("mln", "million")}
-                        <br />
-                        {keys[index]}
-                      </b>
-                    </p>
-                  </div>
-                ))}
+                      <div
+                        css={`
+                          width: 31px;
+                          height: 31px;
+                          border-radius: 50%;
+                          background: ${colors[index]};
+                        `}
+                      />
+                      <p
+                        css={`
+                          font-size: 18px;
+                        `}
+                      >
+                        <b>
+                          {formatLargeAmountsWithPrefix(val)
+                            .replace("$", "")
+                            .replace("bln", "billion")
+                            .replace("mln", "million")}
+                          <br />
+                          {keys[index]}
+                        </b>
+                      </p>
+                    </div>
+                  ))}
+                </div>
               </div>
-            </div>
+            )}
           </div>
         </div>
         <div>
diff --git a/src/app/modules/viz-module/sub-modules/allocations/index.tsx b/src/app/modules/viz-module/sub-modules/allocations/index.tsx
index 0bf1ba7ec..6abb376ce 100644
--- a/src/app/modules/viz-module/sub-modules/allocations/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/allocations/index.tsx
@@ -457,11 +457,9 @@ export function AllocationsModule(props: AllocationsModuleProps) {
               selected={vizSelected || ""}
               onChange={(value: string) => {
                 const prevValue = vizSelected || "";
-                console.log("prevValue", prevValue);
                 const fItemIndex = findIndex(dataPathSteps, {
                   vizSelected: { id: prevValue, filterStr: prevValue },
                 });
-                console.log("fItemIndex", fItemIndex);
                 setVizSelected(value);
                 let newDataPathSteps = [...dataPathSteps];
                 if (fItemIndex > -1) {

From c878533c583d99262b35affd814a50d103c01ba1 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Mon, 29 May 2023 06:17:20 +0100
Subject: [PATCH 38/69] fix: RHCP slide component change

---
 .../eligibility/tableWrapper.tsx              | 106 +++++++++---------
 .../fundingRequest/tableWrapper.tsx           |  88 ++++++++-------
 2 files changed, 99 insertions(+), 95 deletions(-)

diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
index 9b827c7e3..6ec788323 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
@@ -252,6 +252,8 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
     <div
       css={`
         position: relative;
+        overflow: hidden;
+        padding: 10px;
       `}
     >
       {isLoading && <PageLoader inLoader />}
@@ -275,7 +277,7 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
             border-radius: 10px 0px 0px 10px;
             transition: all 0.2s ease-in-out;
 
-            right: ${openToolboxPanel ? "48%" : 0};
+            right: ${openToolboxPanel ? "49.4%" : 0};
 
             &:hover {
               background: #13183f;
@@ -294,64 +296,64 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
         </div>
       )}
       {props.code && (
-        <Slide direction="left" in={openToolboxPanel}>
+        <div
+          css={`
+            z-index: 4;
+            right: -8px;
+            width: 600px;
+            margin-right: ${openToolboxPanel ? "15px" : "-600px"};
+            margin-top: 0.1%;
+            height: 95%;
+            overflow-y: auto;
+            transition: all 0.2s ease-in-out;
+            position: absolute;
+            background: #f5f5f7;
+            border-radius: 20px;
+            visibility: visible !important;
+            box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.6);
+
+            ::-webkit-scrollbar {
+              display: none;
+            }
+
+            @media (max-width: 767px) {
+              width: 100vw;
+              box-shadow: none;
+              overflow-y: auto;
+            }
+          `}
+        >
           <div
             css={`
-              z-index: 4;
-              right: -8px;
-              width: 600px;
-              height: 100%;
-              overflow-y: auto;
+              width: 100%;
 
-              position: absolute;
-              background: #f5f5f7;
-              border-radius: 20px;
-              visibility: visible !important;
-              box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.6);
-
-              ::-webkit-scrollbar {
-                display: none;
-              }
+              display: flex;
 
-              @media (max-width: 767px) {
-                width: 100vw;
-                box-shadow: none;
-                overflow-y: auto;
-              }
+              flex-direction: column;
             `}
           >
-            <div
-              css={`
-                width: 100%;
-
-                display: flex;
-
-                flex-direction: column;
-              `}
-            >
-              <ToolBoxPanelAggregateBy
-                title="Aggregate by"
-                selected={selectedAggregate}
-                options={controlItems.aggregates}
-                setSelected={setSelectedAggregate}
-              />
-              <ToolBoxPanelFilters
-                groups={filterGroups}
-                expandedGroup={expandedGroup}
-                appliedFilters={appliedFilters}
-                setExpandedGroup={setExpandedGroup}
-                setAppliedFilters={setAppliedFilters}
-                defaultAppliedFilters={{
-                  year: [],
-                  components: [],
-                  status: [],
-                  diseaseBurden: [],
-                }}
-                groupAppliedFiltersPathKey={groupAppliedFiltersPathKey}
-              />
-            </div>
+            <ToolBoxPanelAggregateBy
+              title="Aggregate by"
+              selected={selectedAggregate}
+              options={controlItems.aggregates}
+              setSelected={setSelectedAggregate}
+            />
+            <ToolBoxPanelFilters
+              groups={filterGroups}
+              expandedGroup={expandedGroup}
+              appliedFilters={appliedFilters}
+              setExpandedGroup={setExpandedGroup}
+              setAppliedFilters={setAppliedFilters}
+              defaultAppliedFilters={{
+                year: [],
+                components: [],
+                status: [],
+                diseaseBurden: [],
+              }}
+              groupAppliedFiltersPathKey={groupAppliedFiltersPathKey}
+            />
           </div>
-        </Slide>
+        </div>
       )}
       <EligibilityTable
         search={search}
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
index a2cb1642c..418ccc0d1 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
@@ -138,6 +138,8 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
     <div
       css={`
         position: relative;
+        overflow: hidden;
+        padding: 10px;
       `}
     >
       {isLoading && <PageLoader inLoader />}
@@ -160,7 +162,7 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
           border-radius: 10px 0px 0px 10px;
           transition: all 0.2s ease-in-out;
 
-          right: ${openToolboxPanel ? "48%" : 0};
+          right: ${openToolboxPanel ? "49.4%" : 0};
 
           &:hover {
             background: #13183f;
@@ -177,55 +179,55 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
       >
         <TriangleXSIcon />
       </div>
-      <Slide direction="left" in={openToolboxPanel}>
+      <div
+        css={`
+          z-index: 4;
+          right: -8px;
+          width: 600px;
+          margin-right: ${openToolboxPanel ? "15px" : "-600px"};
+          margin-top: 0.1%;
+          height: 95%;
+          overflow-y: auto;
+          transition: all 0.2s ease-in-out;
+          position: absolute;
+          background: #f5f5f7;
+          border-radius: 20px;
+          visibility: visible !important;
+          box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.6);
+          ::-webkit-scrollbar {
+            display: none;
+          }
+          @media (max-width: 767px) {
+            width: 100vw;
+            box-shadow: none;
+            overflow-y: auto;
+          }
+        `}
+      >
         <div
           css={`
-            z-index: 4;
-            right: -8px;
-            width: 600px;
+            width: 100%;
 
-            height: 100%;
-            position: absolute;
-            background: #f5f5f7;
-            visibility: visible !important;
-            overflow-y: auto;
+            display: flex;
 
-            box-shadow: 0px 0px 10px rgba(152, 161, 170, 0.6);
-            border-radius: 20px;
-            ::-webkit-scrollbar {
-              display: none;
-            }
-            @media (max-width: 767px) {
-              width: 100vw;
-              box-shadow: none;
-              overflow-y: auto;
-            }
+            flex-direction: column;
           `}
         >
-          <div
-            css={`
-              width: 100%;
-
-              display: flex;
-
-              flex-direction: column;
-            `}
-          >
-            <ToolBoxPanelFilters
-              groups={filterGroups}
-              expandedGroup={expandedGroup}
-              appliedFilters={appliedFilters}
-              setExpandedGroup={setExpandedGroup}
-              setAppliedFilters={setAppliedFilters}
-              defaultAppliedFilters={{
-                components: [],
-                trpWindows: [],
-              }}
-              groupAppliedFiltersPathKey={groupAppliedFiltersPathKey}
-            />
-          </div>
+          <ToolBoxPanelFilters
+            groups={filterGroups}
+            expandedGroup={expandedGroup}
+            appliedFilters={appliedFilters}
+            setExpandedGroup={setExpandedGroup}
+            setAppliedFilters={setAppliedFilters}
+            defaultAppliedFilters={{
+              components: [],
+              trpWindows: [],
+            }}
+            groupAppliedFiltersPathKey={groupAppliedFiltersPathKey}
+          />
         </div>
-      </Slide>
+      </div>
+
       <Table
         forceExpand
         search={search}

From 2ca17e7560feabfe2a259996b5772f224c58f12c Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Wed, 31 May 2023 12:56:39 +0300
Subject: [PATCH 39/69] feat: location access to funding changes

---
 src/app/assets/icons/HIV.tsx                  |  37 ++++
 src/app/assets/icons/Malaria.tsx              |  31 +++
 src/app/assets/icons/TB.tsx                   |  28 +++
 src/app/components/Table/funding/index.tsx    |  49 +++--
 .../allocations/radialChart.tsx               | 184 ------------------
 .../eligibility/tableWrapper.tsx              |   2 +-
 .../fundingRequest/tableWrapper.tsx           | 105 +++++-----
 .../sub-modules/accessToFunding/location.tsx  |  72 +++----
 .../sub-modules/accessToFunding/style.ts      |   1 -
 9 files changed, 225 insertions(+), 284 deletions(-)
 create mode 100644 src/app/assets/icons/HIV.tsx
 create mode 100644 src/app/assets/icons/Malaria.tsx
 create mode 100644 src/app/assets/icons/TB.tsx
 delete mode 100644 src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx

diff --git a/src/app/assets/icons/HIV.tsx b/src/app/assets/icons/HIV.tsx
new file mode 100644
index 000000000..3a4e78922
--- /dev/null
+++ b/src/app/assets/icons/HIV.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+
+export const HIV = () => (
+  <svg
+    width="43"
+    height="44"
+    viewBox="0 0 43 44"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      x="0.226562"
+      y="-0.5"
+      width="41.8084"
+      height="43.6364"
+      fill="url(#pattern1)"
+    />
+    <defs>
+      <pattern
+        id="pattern1"
+        patternContentUnits="objectBoundingBox"
+        width="1"
+        height="1"
+      >
+        <use
+          xlinkHref="#image0_10955_12027"
+          transform="matrix(0.012987 0 0 0.012443 0 -0.0163833)"
+        />
+      </pattern>
+      <image
+        id="image0_10955_12027"
+        width="77"
+        height="83"
+        xlinkHref="data:image/png;base64,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"
+      />
+    </defs>
+  </svg>
+);
diff --git a/src/app/assets/icons/Malaria.tsx b/src/app/assets/icons/Malaria.tsx
new file mode 100644
index 000000000..b14d1f818
--- /dev/null
+++ b/src/app/assets/icons/Malaria.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+export const Malaria = () => (
+  <svg
+    width="43"
+    height="42"
+    viewBox="0 0 43 42"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect x="0.25" y="0.5" width="42" height="41" fill="url(#pattern0)" />
+    <defs>
+      <pattern
+        id="pattern0"
+        patternContentUnits="objectBoundingBox"
+        width="1"
+        height="1"
+      >
+        <use
+          xlinkHref="#image0_10955_12046"
+          transform="matrix(0.0113636 0 0 0.0116408 0 -0.000554324)"
+        />
+      </pattern>
+      <image
+        id="image0_10955_12046"
+        width="88"
+        height="86"
+        xlinkHref="data:image/png;base64,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"
+      />
+    </defs>
+  </svg>
+);
diff --git a/src/app/assets/icons/TB.tsx b/src/app/assets/icons/TB.tsx
new file mode 100644
index 000000000..f6c0d5a32
--- /dev/null
+++ b/src/app/assets/icons/TB.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+
+export const Tuberculosis = () => (
+  <svg
+    width="45"
+    height="45"
+    viewBox="0 0 45 45"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect x="0.25" y="0.5" width="45" height="45" fill="url(#pattern2)" />
+    <defs>
+      <pattern
+        id="pattern2"
+        patternContentUnits="objectBoundingBox"
+        width="1"
+        height="1"
+      >
+        <use xlinkHref="#image0_10955_12063" transform="scale(0.011236)" />
+      </pattern>
+      <image
+        id="image0_10955_12063"
+        width="89"
+        height="89"
+        xlinkHref="data:image/png;base64,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"
+      />
+    </defs>
+  </svg>
+);
diff --git a/src/app/components/Table/funding/index.tsx b/src/app/components/Table/funding/index.tsx
index 62d8f7644..4d86b1a21 100644
--- a/src/app/components/Table/funding/index.tsx
+++ b/src/app/components/Table/funding/index.tsx
@@ -24,6 +24,7 @@ import {
   cellData,
   cellData2,
 } from "app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data";
+import IconChevronRight from "app/assets/icons/IconChevronRight";
 
 export interface FundingTableRow {
   [key: string]: any;
@@ -83,10 +84,12 @@ function Row(props: {
             <TableCell
               key={v4()}
               css={`
+                padding: 9px;
                 text-align: center;
-                padding: 16px 10px;
+                background: #f5f5f7;
                 // padding-left: ${index === 0 ? "4rem" : "auto"};
                 ${tablecell}
+                font-size: 10px;
               `}
             >
               <div
@@ -95,7 +98,7 @@ function Row(props: {
                   display: flex;
                   align-items: center;
                   flex-direction: row;
-                  justify-content: center;
+                  // justify-content: center;
                 `}
               >
                 <div
@@ -104,7 +107,7 @@ function Row(props: {
                     display: flex;
                     align-items: center;
                     flex-direction: row;
-                    justify-content: center;
+                    // justify-content: center;
                     font-weight: bold;
                     font-family: "GothamNarrow-Bold", "Helvetica Neue",
                       sans-serif;
@@ -148,7 +151,8 @@ function Row(props: {
         }}
         css={`
           transition: background 0.2s ease-in-out;
-          background: ${props.row.children ? "#f5f5f7" : "#fff"};
+          background: ${props.row.children ? "#fff" : "#f5f5f7"};
+          ${thirdLevelRow ? "background: #fafafa;" : ""}
 
           ${props.row.children
             ? `
@@ -172,12 +176,13 @@ function Row(props: {
           <TableCell
             key={v4()}
             css={`
-              text-align: center;
-              padding: 16px 10px;
+              // text-align: center;
+              padding: ${thirdLevelRow ? "9px" : "16px"};
               ${index === 0 && !secondLevelRow
                 ? `padding-left: ${props.paddingLeft}rem;`
                 : ""}
               ${tablecell}
+              font-size: ${thirdLevelRow ? "10px" : "12px"};
             `}
           >
             <div
@@ -197,7 +202,7 @@ function Row(props: {
                   align-items: center;
                   flex-direction: row;
                   font-weight: ${props.row.children ? "bold" : "normal"};
-                  justify-content: ${secondLevelRow ? "center" : "initial"};
+                  // justify-content: ${secondLevelRow ? "center" : "initial"};
                   font-family: "GothamNarrow-${props.row.children
                       ? "Bold"
                       : "Book"}",
@@ -213,15 +218,18 @@ function Row(props: {
                   }
 
                   > svg {
-                    margin-left: -12px;
                     transition: transform 0.1s ease-in-out;
-                    transform: rotate(${open ? "0deg" : "-180deg"});
+                    transform: rotate(${open ? "-90deg" : "90deg"});
+
+                    > path {
+                      fill: ${appColors.TABLE.ROW_TEXT_COLOR};
+                    }
                   }
                 `}
               >
                 {index === 0 &&
                   props.row.children &&
-                  props.row.children.length > 0 && <TriangleXSIcon />}
+                  props.row.children.length > 0 && <IconChevronRight />}
                 {column.key === "grant" ? (
                   <Link
                     css={`
@@ -278,7 +286,7 @@ function Row(props: {
                               display: flex;
                               align-items: center;
                               flex-direction: row;
-                              justify-content: center;
+                              // justify-content: center;
                             `}
                           >
                             <div
@@ -287,7 +295,7 @@ function Row(props: {
                                 display: flex;
                                 align-items: center;
                                 flex-direction: row;
-                                justify-content: center;
+                                // justify-content: center;
                                 font-weight: bold;
                                 font-family: "GothamNarrow-Bold",
                                   "Helvetica Neue", sans-serif;
@@ -392,6 +400,16 @@ export function FundingRequestTable(props: FundingTableProps) {
       css={`
         display: relative;
         min-height: 600px;
+
+        .MuiToolbar-root {
+          padding: 0 24px;
+          min-height: 48px;
+          max-height: 48px;
+          background: ${appColors.COMMON.SECONDARY_COLOR_7};
+
+          > div:first-of-type {
+            font-size: 14px;
+          }
       `}
     >
       <TableToolbar
@@ -423,8 +441,9 @@ export function FundingRequestTable(props: FundingTableProps) {
                     <TableCell
                       key={column.key}
                       css={`
-                        padding: 16px 10px;
-                        ${index === 0 ? "padding-left: 40px;" : ""}
+                        padding: 16px;
+                        background: #f5f5f7;
+                        // ${index === 0 ? "padding-left: 40px;" : ""}
 
                         > button {
                           ${tablecell}
@@ -432,7 +451,7 @@ export function FundingRequestTable(props: FundingTableProps) {
                           text-transform: none;
 
                           > span {
-                            font-size: 16px;
+                            font-size: 12px;
                             font-weight: bold;
                             justify-content: flex-start;
                             font-family: "GothamNarrow-Bold", "Helvetica Neue",
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx
deleted file mode 100644
index b09804e8d..000000000
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-import React from "react";
-import max from "lodash/max";
-import { useMeasure } from "react-use";
-import findIndex from "lodash/findIndex";
-import { ApexOptions } from "apexcharts";
-import ReactApexCharts from "react-apexcharts";
-import useMediaQuery from "@material-ui/core/useMediaQuery";
-import { PageLoader } from "app/modules/common/page-loader";
-import { formatFinancialValue } from "app/utils/formatFinancialValue";
-import { NoDataLabel } from "app/components/Charts/common/nodatalabel";
-import { NoDataAllocations } from "../../allocations/components/nodata";
-import { getKeysPercentages } from "app/modules/viz-module/sub-modules/allocations/data";
-
-interface Props {
-  total: number;
-  keys: string[];
-  values: number[];
-  isLoading: boolean;
-}
-
-export default function RadialChart(props: Props) {
-  const isMobile = useMediaQuery("(max-width: 767px)");
-
-  const [ref, { width }] = useMeasure<HTMLDivElement>();
-
-  const maxValue = max(props.values);
-  const [keysPercentagesColors, setKeysPercentagesColors] = React.useState<{
-    percentages: number[];
-    colors: string[];
-  }>(getKeysPercentages(maxValue ? maxValue * 1.2 : props.total, props.values));
-
-  React.useEffect(() => {
-    setKeysPercentagesColors(
-      getKeysPercentages(maxValue ? maxValue * 1.2 : props.total, props.values)
-    );
-  }, [props.values]);
-
-  if (props.isLoading) {
-    return (
-      <div
-        css={`
-          @media (max-width: 767px) {
-            z-index: 2;
-            width: 100%;
-            position: relative;
-            padding-bottom: 100px;
-
-            #mobile-tooltip-container {
-              top: 30vh;
-              left: 16px;
-              width: calc(100% - 32px);
-            }
-          }
-        `}
-      >
-        <PageLoader inLoader />
-      </div>
-    );
-  }
-
-  const options: ApexOptions = {
-    plotOptions: {
-      radialBar: {
-        offsetY: 0,
-        startAngle: 0,
-        endAngle: 300,
-        hollow: {
-          margin: 5,
-          size: "50%",
-          background: "transparent",
-          image: undefined,
-        },
-        track: {
-          show: true,
-          strokeWidth: "1px",
-          background: "#262C34",
-        },
-        dataLabels: {
-          name: {
-            show: true,
-            color: "#262c34",
-            fontFamily: "GothamNarrow-Book",
-          },
-          value: {
-            show: true,
-            fontFamily: "GothamNarrow-Book",
-            formatter: (value: number) => {
-              const fkeyIndex = findIndex(
-                keysPercentagesColors.percentages,
-                (p: number) => p.toString() === value.toString()
-              );
-              if (fkeyIndex > -1) {
-                return formatFinancialValue(props.values[fkeyIndex]);
-              }
-              return "";
-            },
-          },
-          total: {
-            show: false,
-          },
-        },
-      },
-    },
-    colors: ["#252C34", "#C9CAD4", "#595D70"],
-    labels: props.keys,
-    legend: {
-      show: true,
-      floating: true,
-      fontSize: !isMobile ? "14px" : "10px",
-      fontFamily: "GothamNarrow-Book",
-      horizontalAlign: "left",
-      fontWeight: "bold",
-      position: "right",
-      offsetX: width / 2,
-      offsetY: !isMobile ? 25 : 15,
-      markers: {
-        width: 0,
-      },
-      formatter: (seriesName: string, opts: any) => {
-        if (isMobile) {
-          return seriesName;
-        }
-        return `${seriesName}: ${Math.floor(
-          opts.w.globals.series[opts.seriesIndex]
-        )}%`;
-      },
-      itemMargin: {
-        vertical: !isMobile ? 8 : 2,
-      },
-      onItemClick: {
-        toggleDataSeries: false,
-      },
-      onItemHover: {
-        highlightDataSeries: false,
-      },
-    },
-    responsive: [
-      {
-        breakpoint: 480,
-        options: {
-          legend: {
-            show: true,
-          },
-        },
-      },
-    ],
-  };
-
-  return (
-    <div
-      css={`
-        @media (max-width: 767px) {
-          z-index: 2;
-          width: 100%;
-          position: relative;
-          padding-bottom: 100px;
-
-          #mobile-tooltip-container {
-            top: 30vh;
-            left: 16px;
-            width: calc(100% - 32px);
-          }
-        }
-      `}
-    >
-      <div ref={ref} id="allocations-radial-bar">
-        {props.total === 0 ? (
-          <div css="display: flex;justify-content: center;">
-            <NoDataLabel />
-            <NoDataAllocations />
-          </div>
-        ) : (
-          <ReactApexCharts
-            type="radialBar"
-            options={options}
-            height={isMobile ? 400 : 580}
-            series={keysPercentagesColors.percentages}
-            width={480}
-          />
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
index 6ec788323..bbbdea115 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
@@ -362,7 +362,7 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
         setSearch={setSearch}
         setSortBy={setSortBy}
         columns={columns}
-        title={props.code ? cycle || "" : ""}
+        title={props.code ? "Eligibility" : ""}
         forceExpand={props.forceExpand}
       />
       <TablePagination
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
index 418ccc0d1..3858bd180 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
@@ -1,6 +1,7 @@
 /* third-party */
 import React from "react";
 import get from "lodash/get";
+import orderBy from "lodash/orderBy";
 import { useDebounce } from "react-use";
 import { useRecoilValue } from "recoil";
 import Slide from "@material-ui/core/Slide";
@@ -8,13 +9,13 @@ import { useStoreActions, useStoreState } from "app/state/store/hooks";
 /* project */
 import { PageLoader } from "app/modules/common/page-loader";
 import { TriangleXSIcon } from "app/assets/icons/TriangleXS";
+import TablePagination from "@material-ui/core/TablePagination";
 import { SimpleTableRow } from "app/components/Table/Simple/data";
 import { locationAccessToFundingCycleAtom } from "app/state/recoil/atoms";
 import { ToolBoxPanelFilters } from "app/components/ToolBoxPanel/components/filters";
 import { FilterGroupProps } from "app/components/ToolBoxPanel/components/filters/data";
 import { Table } from "app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/table";
 import { fundingRequestColumns } from "app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data";
-import TablePagination from "@material-ui/core/TablePagination";
 
 interface Props {
   code: string;
@@ -23,46 +24,13 @@ interface Props {
 }
 
 export function AccessToFundingRequestTableWrapper(props: Props) {
-  const [openToolboxPanel, setOpenToolboxPanel] = React.useState(false);
+  const [page, setPage] = React.useState(0);
   const [search, setSearch] = React.useState("");
   const [sortBy, setSortBy] = React.useState("");
-
-  const data = useStoreState(
-    (state) =>
-      get(
-        state.LocationAccessToFunding.FundingRequestsTable.data,
-        "data",
-        []
-      ) as SimpleTableRow[]
-  );
-
-  const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(10);
-
-  const handleChangePage = (
-    _event: React.MouseEvent<HTMLButtonElement> | null,
-    newPage: number
-  ) => {
-    setPage(newPage);
-  };
-
-  const handleChangeRowsPerPage = (
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    setRowsPerPage(parseInt(event.target.value, 10));
-    setPage(0);
-  };
-
-  const fetchData = useStoreActions(
-    (store) => store.LocationAccessToFunding.FundingRequestsTable.fetch
-  );
-
-  const isLoading = useStoreState(
-    (state) => state.LocationAccessToFunding.FundingRequestsTable.loading
-  );
-
-  const cycle = useRecoilValue(locationAccessToFundingCycleAtom);
-
+  const [openToolboxPanel, setOpenToolboxPanel] = React.useState(false);
+  const [expandedGroup, setExpandedGroup] =
+    React.useState<FilterGroupProps | null>(null);
   const [appliedFilters, setAppliedFilters] = React.useState<{
     [key: string]: string[];
   }>({
@@ -70,8 +38,6 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
     trpWindows: [],
     portfolioCategories: [],
   });
-  const [expandedGroup, setExpandedGroup] =
-    React.useState<FilterGroupProps | null>(null);
 
   const filterGroups = [
     {
@@ -91,6 +57,39 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
     "Portfolio Categorization": "portfolioCategories",
   };
 
+  const cycle = useRecoilValue(locationAccessToFundingCycleAtom);
+
+  const data = useStoreState(
+    (state) =>
+      get(
+        state.LocationAccessToFunding.FundingRequestsTable.data,
+        "data",
+        []
+      ) as SimpleTableRow[]
+  );
+
+  const isLoading = useStoreState(
+    (state) => state.LocationAccessToFunding.FundingRequestsTable.loading
+  );
+
+  const fetchData = useStoreActions(
+    (store) => store.LocationAccessToFunding.FundingRequestsTable.fetch
+  );
+
+  function handleChangePage(
+    _event: React.MouseEvent<HTMLButtonElement> | null,
+    newPage: number
+  ) {
+    setPage(newPage);
+  }
+
+  function handleChangeRowsPerPage(
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  }
+
   function reloadData() {
     const filterStr: string[] = [`locations=${props.code}`];
     if (search.length > 0) {
@@ -118,6 +117,20 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
     });
   }
 
+  const tableData = React.useMemo(() => {
+    if (props.code) {
+      const result = get(data, "[0].children", []).slice(
+        page * rowsPerPage,
+        (page + 1) * rowsPerPage
+      );
+      if (sortBy.length > 0) {
+        return result;
+      }
+      return orderBy(result, "children", "desc");
+    }
+    return data.slice(page * rowsPerPage, (page + 1) * rowsPerPage);
+  }, [data, page, rowsPerPage, sortBy]);
+
   React.useEffect(() => {
     if ((props.code && cycle) || !props.code) {
       reloadData();
@@ -227,25 +240,17 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
           />
         </div>
       </div>
-
       <Table
         forceExpand
         search={search}
         sortBy={sortBy}
-        data={
-          props.code
-            ? get(data, "[0].children", []).slice(
-                page * rowsPerPage,
-                (page + 1) * rowsPerPage
-              )
-            : data.slice(page * rowsPerPage, (page + 1) * rowsPerPage)
-        }
+        data={tableData}
         setSearch={setSearch}
         setSortBy={setSortBy}
         columns={
           props.code ? fundingRequestColumns[0].col : fundingRequestColumns
         }
-        title={cycle || ""}
+        title={cycle ? "Funding Requests" : ""}
       />
       <TablePagination
         page={page}
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
index 8e461caf2..d7d2dcec1 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
@@ -1,22 +1,24 @@
 import React from "react";
 import get from "lodash/get";
+import { Link } from "react-router-dom";
 import Box from "@material-ui/core/Box";
 import { useRecoilState } from "recoil";
+import { HIV } from "app/assets/icons/HIV";
+import { useCMSData } from "app/hooks/useCMSData";
+import { Malaria } from "app/assets/icons/Malaria";
+import { Tuberculosis } from "app/assets/icons/TB";
 import { formatFinancialValue } from "app/utils/formatFinancialValue";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import { locationAccessToFundingCycleAtom } from "app/state/recoil/atoms";
 import { FilterGroupProps } from "app/components/ToolBoxPanel/components/filters/data";
 import { formatLargeAmountsWithPrefix } from "app/utils/getFinancialValueWithMetricPrefix";
-import RadialChart from "app/modules/viz-module/sub-modules/accessToFunding/allocations/radialChart";
+import { AccessToFundingRequestTableWrapper } from "app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper";
+import { AccessToFundingEligibilityTableWrapper } from "app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper";
 import {
   vizcss,
   chipcss,
   descriptioncss,
 } from "app/modules/viz-module/sub-modules/accessToFunding/style";
-import { AccessToFundingRequestTableWrapper } from "app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper";
-import { AccessToFundingEligibilityTableWrapper } from "app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper";
-import { Link } from "react-router-dom";
-import { useCMSData } from "app/hooks/useCMSData";
 
 interface Props {
   code: string;
@@ -63,7 +65,19 @@ export default function LocationAccessToFundingWrapper(props: Props) {
   );
   const fetchData = useStoreActions((store) => store.Allocations.fetch);
   const isLoading = useStoreState((state) => state.Allocations.loading);
-  const colors = ["#252C34", "#C9CAD4", "#595D70"];
+
+  function getAllocationIcon(key: string) {
+    if (key === "HIV") {
+      return <HIV />;
+    }
+    if (key === "Malaria") {
+      return <Malaria />;
+    }
+    if (key === "Tuberculosis") {
+      return <Tuberculosis />;
+    }
+    return null;
+  }
 
   React.useEffect(() => {
     return () => {
@@ -142,20 +156,13 @@ export default function LocationAccessToFundingWrapper(props: Props) {
           <hr />
           <div
             css={`
-              gap: 1rem;
               display: flex;
-              min-height: 500px;
+              min-height: 350px;
               position: relative;
               align-items: center;
-              justify-content: space-evenly;
+              justify-content: center;
             `}
           >
-            <RadialChart
-              total={total}
-              values={values}
-              keys={keys}
-              isLoading={isLoading}
-            />
             {!isLoading && (
               <div>
                 <div>
@@ -183,10 +190,10 @@ export default function LocationAccessToFundingWrapper(props: Props) {
                 </div>
                 <div
                   css={`
-                    gap: 2rem;
+                    gap: 100px;
                     margin: auto;
                     display: flex;
-                    margin-top: 3rem;
+                    margin-top: 40px;
                     text-align: center;
                     align-items: center;
                     justify-content: center;
@@ -202,17 +209,11 @@ export default function LocationAccessToFundingWrapper(props: Props) {
                         justify-content: center;
                       `}
                     >
+                      {getAllocationIcon(keys[index])}
                       <div
                         css={`
-                          width: 31px;
-                          height: 31px;
-                          border-radius: 50%;
-                          background: ${colors[index]};
-                        `}
-                      />
-                      <p
-                        css={`
-                          font-size: 18px;
+                          font-size: 24px;
+                          margin-top: 10px;
                         `}
                       >
                         <b>
@@ -220,10 +221,9 @@ export default function LocationAccessToFundingWrapper(props: Props) {
                             .replace("$", "")
                             .replace("bln", "billion")
                             .replace("mln", "million")}
-                          <br />
-                          {keys[index]}
                         </b>
-                      </p>
+                      </div>
+                      {keys[index]}
                     </div>
                   ))}
                 </div>
@@ -235,7 +235,11 @@ export default function LocationAccessToFundingWrapper(props: Props) {
           <h4>
             <b>Funding Requests</b>
           </h4>
-          <hr />
+          <hr
+            css={`
+              margin-bottom: 48px;
+            `}
+          />
           <div
             css={`
               width: 90%;
@@ -248,7 +252,6 @@ export default function LocationAccessToFundingWrapper(props: Props) {
             {get(cmsData, "modulesFundingRequests.tableDisclaimer", "")}
           </div>
           <div css="width: 100%;height: 40px;" />
-
           <AccessToFundingRequestTableWrapper
             code={props.code}
             codeParam={props.codeParam}
@@ -258,11 +261,14 @@ export default function LocationAccessToFundingWrapper(props: Props) {
         {props.code.length === 3 && (
           <div>
             <Box height={35} />
-
             <h4>
               <b>Eligibility </b>
             </h4>
-            <hr />
+            <hr
+              css={`
+                margin-bottom: 48px;
+              `}
+            />
             <div css={descriptioncss}>
               <p>
                 Below are the components which are eligible for an allocation
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts b/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts
index 1ecbf86d0..a44690ba8 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts
@@ -57,6 +57,5 @@ export const vizcss = css`
     border: 0.5px solid #000000;
     width: 100%;
     height: 0px;
-    margin-bottom: 3rem;
   }
 `;

From c82f60ea0d4f179bd310e3e386959bd7b9a14b9d Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Wed, 31 May 2023 13:43:09 +0300
Subject: [PATCH 40/69] fix: mobile view detail page view controller

---
 .../components/Mobile/ViewsControl/index.tsx  | 41 +++++++++++++++++--
 .../PageHeader/components/tabs/data.ts        |  7 ++++
 .../PageHeader/components/tabs/index.tsx      | 22 +++++++++-
 3 files changed, 64 insertions(+), 6 deletions(-)

diff --git a/src/app/components/Mobile/ViewsControl/index.tsx b/src/app/components/Mobile/ViewsControl/index.tsx
index b66e01581..8b139b6f0 100644
--- a/src/app/components/Mobile/ViewsControl/index.tsx
+++ b/src/app/components/Mobile/ViewsControl/index.tsx
@@ -227,12 +227,45 @@ export function MobileViewControl(props: MobileViewControlProps) {
                 </StyledMenuItem>
               )
             )}
-          {props.tabs &&
-            props.tabs.map((tab: TabProps) => (
+          {(props.tabs ?? []).map((tab: TabProps) => {
+            if (tab.tabs) {
+              const result = tab.tabs.map((subTab: TabProps) => (
+                <StyledMenuItem
+                  disableRipple
+                  key={subTab.name}
+                  disableTouchRipple
+                >
+                  <RouteTab
+                    {...subTab}
+                    onlyLink
+                    search={location.search}
+                    params={{
+                      tab: "",
+                      code: params.code ?? "",
+                      period: params.period ?? "",
+                      vizType: params.vizType ?? "",
+                    }}
+                  />
+                </StyledMenuItem>
+              ));
+              return [...result];
+            }
+            return (
               <StyledMenuItem disableRipple key={tab.name} disableTouchRipple>
-                <RouteTab {...tab} onlyLink />
+                <RouteTab
+                  {...tab}
+                  onlyLink
+                  search={location.search}
+                  params={{
+                    tab: "",
+                    code: params.code ?? "",
+                    period: params.period ?? "",
+                    vizType: params.vizType ?? "",
+                  }}
+                />
               </StyledMenuItem>
-            ))}
+            );
+          })}
         </StyledMenu>
       </div>
       <div
diff --git a/src/app/components/PageHeader/components/tabs/data.ts b/src/app/components/PageHeader/components/tabs/data.ts
index aac6e5172..3c11e5f7f 100644
--- a/src/app/components/PageHeader/components/tabs/data.ts
+++ b/src/app/components/PageHeader/components/tabs/data.ts
@@ -12,6 +12,13 @@ export interface PageHeaderTabProps {
 
 export interface RouteTabProps extends TabProps {
   onlyLink?: boolean;
+  search?: any;
+  params?: {
+    tab: string;
+    code: string;
+    period: string;
+    vizType: string;
+  };
 }
 
 export const countryDetailTabs: TabProps[] = [
diff --git a/src/app/components/PageHeader/components/tabs/index.tsx b/src/app/components/PageHeader/components/tabs/index.tsx
index e9f02d231..ca9893bf2 100644
--- a/src/app/components/PageHeader/components/tabs/index.tsx
+++ b/src/app/components/PageHeader/components/tabs/index.tsx
@@ -130,8 +130,26 @@ const styles = {
 };
 
 export function RouteTab(props: RouteTabProps) {
-  if (props.onlyLink) {
-    return <NavLink to={props.url || ""}>{props.name}</NavLink>;
+  if (props.onlyLink && props.params) {
+    return (
+      <NavLink
+        to={
+          formatTabUrlWithParams(
+            {
+              name: props.name,
+              url: props.url,
+              tabs: props.tabs,
+              index: props.index,
+              isActive: props.isActive,
+            },
+            props.search,
+            props.params
+          ).url ?? ""
+        }
+      >
+        {props.name}
+      </NavLink>
+    );
   }
 
   return (

From f557cf1b73140f2ad5af8c63c9501f5d82007dcd Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Wed, 31 May 2023 13:47:45 +0300
Subject: [PATCH 41/69] style: mobile view select control colors

---
 src/app/components/Mobile/ViewsControl/index.tsx | 10 +++++-----
 src/app/theme/index.ts                           |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/components/Mobile/ViewsControl/index.tsx b/src/app/components/Mobile/ViewsControl/index.tsx
index 8b139b6f0..f885c6231 100644
--- a/src/app/components/Mobile/ViewsControl/index.tsx
+++ b/src/app/components/Mobile/ViewsControl/index.tsx
@@ -291,14 +291,14 @@ export function MobileViewControl(props: MobileViewControlProps) {
                   ? "border-radius: 0 20px 20px 0;"
                   : ""}
                 background: ${selectedView === option.value
-                  ? appColors.MOBILE_VIEWS_CONTROL.LINK_BACKGROUND_COLOR
-                  : appColors.MOBILE_VIEWS_CONTROL
-                      .LINK_BACKGROUND_SELECTED_COLOR};
+                  ? appColors.MOBILE_VIEWS_CONTROL
+                      .LINK_BACKGROUND_SELECTED_COLOR
+                  : appColors.MOBILE_VIEWS_CONTROL.LINK_BACKGROUND_COLOR};
 
                 path {
                   fill: ${selectedView === option.value
-                    ? appColors.MOBILE_VIEWS_CONTROL.LINK_ICON_COLOR
-                    : appColors.MOBILE_VIEWS_CONTROL.LINK_ICON_SELECTED_COLOR};
+                    ? appColors.MOBILE_VIEWS_CONTROL.LINK_ICON_SELECTED_COLOR
+                    : appColors.MOBILE_VIEWS_CONTROL.LINK_ICON_COLOR};
                 }
               `}
             >
diff --git a/src/app/theme/index.ts b/src/app/theme/index.ts
index 88c708aec..225e4d06d 100644
--- a/src/app/theme/index.ts
+++ b/src/app/theme/index.ts
@@ -591,8 +591,8 @@ export const appColors = {
     MENU_ITEM_COLOR: PRIMARY_COLOR_1,
     BUTTON_BACKGROUND_COLOR: SECONDARY_COLOR_7,
     BUTTON_BACKGROUND_HOVER_COLOR: SECONDARY_COLOR_7,
-    LINK_BACKGROUND_COLOR: PRIMARY_COLOR_1,
-    LINK_BACKGROUND_SELECTED_COLOR: SECONDARY_COLOR_7,
+    LINK_BACKGROUND_COLOR: SECONDARY_COLOR_7,
+    LINK_BACKGROUND_SELECTED_COLOR: PRIMARY_COLOR_1,
     LINK_ICON_COLOR: "#868A9D",
     LINK_ICON_SELECTED_COLOR: WHITE,
     BUTTON_COLOR: SECONDARY_COLOR_7,

From 1c26af188ba2e9e078f57893bbf25fd71e88d4de Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Wed, 31 May 2023 15:44:46 +0300
Subject: [PATCH 42/69] style: access to funding visual alignments

---
 src/app/components/Table/Simple/data.ts       |  1 +
 src/app/components/Table/Simple/index.tsx     | 30 ++++++++++++++++---
 src/app/components/Table/funding/index.tsx    |  6 ++--
 .../eligibility/eligibilityTable.tsx          |  2 ++
 .../eligibility/tableWrapper.tsx              |  1 +
 .../fundingRequest/tableWrapper.tsx           |  6 +++-
 .../table/data-wrappers/generic.tsx           | 11 ++++++-
 7 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/src/app/components/Table/Simple/data.ts b/src/app/components/Table/Simple/data.ts
index 4fff3e218..13d7060ae 100644
--- a/src/app/components/Table/Simple/data.ts
+++ b/src/app/components/Table/Simple/data.ts
@@ -13,6 +13,7 @@ export interface SimpleTableProps {
   title: string;
   search: string;
   sortBy: string;
+  condensed?: boolean;
   forceExpand?: boolean;
   rows: SimpleTableRow[];
   formatNumbers?: boolean;
diff --git a/src/app/components/Table/Simple/index.tsx b/src/app/components/Table/Simple/index.tsx
index 187c581db..4c554ef94 100644
--- a/src/app/components/Table/Simple/index.tsx
+++ b/src/app/components/Table/Simple/index.tsx
@@ -40,6 +40,7 @@ function Row(props: {
   visibleColumnsIndexes: number[];
   formatNumbers?: boolean;
   forceExpand?: boolean;
+  condensed?: boolean;
 }) {
   const classes = useRowStyles();
   const [open, setOpen] = React.useState(Boolean(props.forceExpand));
@@ -67,7 +68,7 @@ function Row(props: {
         }}
         css={`
           transition: background 0.2s ease-in-out;
-          background: ${props.paddingLeft
+          background: ${props.paddingLeft || props.condensed
             ? appColors.TABLE.ROW_BACKGROUND_COLOR_1
             : appColors.TABLE.ROW_BACKGROUND_COLOR_2};
 
@@ -112,8 +113,9 @@ function Row(props: {
                   "Helvetica Neue", sans-serif;
                 width: calc(${columnWidthCalc});
                 ${index === 0
-                  ? `padding-left: ${firstColumnPadding}px;width: ${firstColumnWidth}`
+                  ? `padding-left: ${firstColumnPadding}px;width: ${firstColumnWidth};`
                   : ""}
+                ${props.condensed ? "font-size: 12px;" : ""}
               `}
             >
               <div
@@ -185,6 +187,7 @@ function Row(props: {
                       key={child.name}
                       paddingLeft={40}
                       columns={props.columns}
+                      condensed={props.condensed}
                       forceExpand={props.forceExpand}
                       formatNumbers={props.formatNumbers}
                       visibleColumnsIndexes={props.visibleColumnsIndexes}
@@ -244,6 +247,18 @@ export function SimpleTable(props: SimpleTableProps) {
       <div
         css={`
           min-height: 600px;
+
+          ${props.condensed &&
+          `.MuiToolbar-root {
+            padding: 0 24px;
+            min-height: 48px;
+            max-height: 48px;
+            background: ${appColors.COMMON.SECONDARY_COLOR_7};
+
+            > div:first-of-type {
+              font-size: 14px;
+            }
+          }`}
         `}
       >
         <TableToolbar
@@ -257,7 +272,13 @@ export function SimpleTable(props: SimpleTableProps) {
         <TableContainer>
           <Table aria-label="Simple table">
             <TableHead>
-              <TableRow>
+              <TableRow
+                css={
+                  props.condensed
+                    ? `background: ${appColors.TABLE.ROW_BACKGROUND_COLOR_2};`
+                    : ""
+                }
+              >
                 {filter(
                   props.columns,
                   (_c, index) => visibleColumnsIndexes.indexOf(index) > -1
@@ -289,7 +310,7 @@ export function SimpleTable(props: SimpleTableProps) {
                         padding-${monetaryColumn ? "right" : "left"}: 0;
 
                         > span {
-                          font-size: 16px;
+                          ${props.condensed ? "font-size: 12px;" : ""}
                           font-weight: bold;
                           justify-content: flex-start;
                           font-family: "GothamNarrow-Bold", "Helvetica Neue",
@@ -315,6 +336,7 @@ export function SimpleTable(props: SimpleTableProps) {
                   key={row.name}
                   row={row}
                   columns={props.columns}
+                  condensed={props.condensed}
                   forceExpand={props.forceExpand}
                   formatNumbers={props.formatNumbers}
                   visibleColumnsIndexes={visibleColumnsIndexes}
diff --git a/src/app/components/Table/funding/index.tsx b/src/app/components/Table/funding/index.tsx
index 4d86b1a21..216a05dfb 100644
--- a/src/app/components/Table/funding/index.tsx
+++ b/src/app/components/Table/funding/index.tsx
@@ -15,16 +15,15 @@ import TableCell from "@material-ui/core/TableCell";
 import { makeStyles } from "@material-ui/core/styles";
 import ArrowUpward from "@material-ui/icons/ArrowUpward";
 import ArrowDownward from "@material-ui/icons/ArrowDownward";
-import { TriangleXSIcon } from "app/assets/icons/TriangleXS";
 import TableContainer from "@material-ui/core/TableContainer";
 import { tablecell } from "app/components/Table/Simple/styles";
+import IconChevronRight from "app/assets/icons/IconChevronRight";
 import { TableToolbar } from "app/components/Table/Expandable/Toolbar";
 import { TableToolbarCols } from "app/components/Table/Expandable/data";
 import {
   cellData,
   cellData2,
 } from "app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data";
-import IconChevronRight from "app/assets/icons/IconChevronRight";
 
 export interface FundingTableRow {
   [key: string]: any;
@@ -278,6 +277,8 @@ function Row(props: {
                             padding: 16px 10px;
                             // padding-left: ${index === 0 ? "4rem" : "auto"};
                             ${tablecell}
+                            font-size: 12px;
+                            background: #f5f5f7;
                           `}
                         >
                           <div
@@ -410,6 +411,7 @@ export function FundingRequestTable(props: FundingTableProps) {
           > div:first-of-type {
             font-size: 14px;
           }
+        }
       `}
     >
       <TableToolbar
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/eligibilityTable.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/eligibilityTable.tsx
index 4d0f52633..94d876258 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/eligibilityTable.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/eligibilityTable.tsx
@@ -17,6 +17,7 @@ interface EligibilityTableProps {
   setSortBy: (value: string) => void;
   title: string;
   forceExpand?: boolean;
+  isLocation?: boolean;
 }
 
 export function EligibilityTable(props: EligibilityTableProps) {
@@ -31,6 +32,7 @@ export function EligibilityTable(props: EligibilityTableProps) {
       onSortByChange={props.setSortBy}
       forceExpand={props.forceExpand}
       multiVizPageDataKey="eligibility"
+      condensed={props.isLocation}
     />
   );
 }
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
index bbbdea115..3c30836be 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
@@ -361,6 +361,7 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
         data={sortedData.slice(page * rowsPerPage, (page + 1) * rowsPerPage)}
         setSearch={setSearch}
         setSortBy={setSortBy}
+        isLocation={props.code !== undefined}
         columns={columns}
         title={props.code ? "Eligibility" : ""}
         forceExpand={props.forceExpand}
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
index 3858bd180..0e18be90d 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
@@ -128,7 +128,11 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
       }
       return orderBy(result, "children", "desc");
     }
-    return data.slice(page * rowsPerPage, (page + 1) * rowsPerPage);
+    const result = data.map((item) => ({
+      ...item,
+      children: orderBy(item.children, "children", "desc"),
+    }));
+    return result.slice(page * rowsPerPage, (page + 1) * rowsPerPage);
   }, [data, page, rowsPerPage, sortBy]);
 
   React.useEffect(() => {
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
index aefbbf04a..76f1b8f1d 100644
--- a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
@@ -2,6 +2,7 @@
 import React from "react";
 import get from "lodash/get";
 import find from "lodash/find";
+import orderBy from "lodash/orderBy";
 import uniqueId from "lodash/uniqueId";
 import { useHistory } from "react-router-dom";
 import { useDebounce, useTitle } from "react-use";
@@ -92,6 +93,14 @@ export function GenericFundingRequestWrapper() {
     setPage(0);
   };
 
+  const tableData = React.useMemo(() => {
+    const result = data.map((item) => ({
+      ...item,
+      children: orderBy(item.children, "children", "desc"),
+    }));
+    return result.slice(page * rowsPerPage, (page + 1) * rowsPerPage);
+  }, [data, page, rowsPerPage, sortBy]);
+
   if (isLoading) {
     return <PageLoader />;
   }
@@ -124,7 +133,7 @@ export function GenericFundingRequestWrapper() {
         </div>
       </div>
       <Table
-        data={data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)}
+        data={tableData}
         search={search}
         sortBy={sortBy}
         isLoading={isLoading}

From 88c600db215e777d59a89de31c28518cc1c2005b Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Thu, 1 Jun 2023 17:32:41 +0300
Subject: [PATCH 43/69] chore: move board approval date field to ip level

---
 src/app/components/Table/funding/index.tsx    | 88 +++++++++----------
 .../table/data-wrappers/data.ts               | 10 +--
 2 files changed, 47 insertions(+), 51 deletions(-)

diff --git a/src/app/components/Table/funding/index.tsx b/src/app/components/Table/funding/index.tsx
index 216a05dfb..5ae07713d 100644
--- a/src/app/components/Table/funding/index.tsx
+++ b/src/app/components/Table/funding/index.tsx
@@ -265,66 +265,62 @@ function Row(props: {
           <Collapse in={open} timeout="auto" unmountOnExit>
             <Table>
               <TableBody>
-                {rowSelected === "child" &&
-                  props.index === 0 &&
-                  !secondLevelRow && (
-                    <TableRow>
-                      {cellData.map((name, index) => (
-                        <TableCell
-                          key={v4()}
+                {rowSelected === "child" && !secondLevelRow && (
+                  <TableRow>
+                    {cellData.map((name, index) => (
+                      <TableCell
+                        key={v4()}
+                        css={`
+                          text-align: center;
+                          padding: 16px 10px;
+                          // padding-left: ${index === 0 ? "4rem" : "auto"};
+                          ${tablecell}
+                          font-size: 12px;
+                          background: #f5f5f7;
+                        `}
+                      >
+                        <div
                           css={`
-                            text-align: center;
-                            padding: 16px 10px;
-                            // padding-left: ${index === 0 ? "4rem" : "auto"};
-                            ${tablecell}
-                            font-size: 12px;
-                            background: #f5f5f7;
+                            width: 100%;
+                            display: flex;
+                            align-items: center;
+                            flex-direction: row;
+                            // justify-content: center;
                           `}
                         >
                           <div
                             css={`
-                              width: 100%;
+                              gap: 12px;
                               display: flex;
                               align-items: center;
                               flex-direction: row;
                               // justify-content: center;
-                            `}
-                          >
-                            <div
-                              css={`
-                                gap: 12px;
-                                display: flex;
-                                align-items: center;
-                                flex-direction: row;
-                                // justify-content: center;
-                                font-weight: bold;
-                                font-family: "GothamNarrow-Bold",
-                                  "Helvetica Neue", sans-serif;
+                              font-weight: bold;
+                              font-family: "GothamNarrow-Bold", "Helvetica Neue",
+                                sans-serif;
 
-                                > * {
-                                  @supports (-webkit-touch-callout: none) and
-                                    (not (translate: none)) {
-                                    &:not(:last-child) {
-                                      margin-right: 12px;
-                                    }
+                              > * {
+                                @supports (-webkit-touch-callout: none) and
+                                  (not (translate: none)) {
+                                  &:not(:last-child) {
+                                    margin-right: 12px;
                                   }
                                 }
+                              }
 
-                                > svg {
-                                  transition: transform 0.1s ease-in-out;
-                                  transform: rotate(
-                                    ${open ? "0deg" : "-180deg"}
-                                  );
-                                }
-                              `}
-                            >
-                              {name}
-                            </div>
+                              > svg {
+                                transition: transform 0.1s ease-in-out;
+                                transform: rotate(${open ? "0deg" : "-180deg"});
+                              }
+                            `}
+                          >
+                            {name}
                           </div>
-                        </TableCell>
-                      ))}
-                    </TableRow>
-                  )}
+                        </div>
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                )}
                 {props.row.children &&
                   props.row.children.map(
                     (child: FundingTableRow, index: number) =>
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts
index e31581d27..c52c6933a 100644
--- a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts
@@ -11,6 +11,10 @@ export const fundingRequestColumns = [
             key: "gac",
             name: "",
           },
+          {
+            key: "board",
+            name: "",
+          },
           {
             key: "grant",
             name: "",
@@ -53,10 +57,6 @@ export const fundingRequestColumns = [
         key: "portfolioCategory",
         name: "Portfolio Categorization",
       },
-      {
-        key: "board",
-        name: "Board Approval",
-      },
     ],
   },
 ];
@@ -68,11 +68,11 @@ export const cellData = [
   "TRP Window",
   "TRP Outcome",
   "Portfolio Categorization",
-  "Board Approval",
 ];
 
 export const cellData2 = [
   "GAC Meeting",
+  "Board Approval",
   "Grant",
   "Starting Date",
   "End Date",

From 4c88f11b1b716a3ac64eba6c4062295ecf00eaf3 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Tue, 6 Jun 2023 13:22:37 +0300
Subject: [PATCH 44/69] chore: hide board approval date

---
 .../fundingRequests/table/data-wrappers/data.ts        | 10 +++++-----
 src/app/utils/exportCSV.ts                             |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts
index c52c6933a..1176b84e2 100644
--- a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts
@@ -11,10 +11,10 @@ export const fundingRequestColumns = [
             key: "gac",
             name: "",
           },
-          {
-            key: "board",
-            name: "",
-          },
+          // {
+          //   key: "board",
+          //   name: "",
+          // },
           {
             key: "grant",
             name: "",
@@ -72,7 +72,7 @@ export const cellData = [
 
 export const cellData2 = [
   "GAC Meeting",
-  "Board Approval",
+  // "Board Approval",
   "Grant",
   "Starting Date",
   "End Date",
diff --git a/src/app/utils/exportCSV.ts b/src/app/utils/exportCSV.ts
index 7dcbfdeba..a791d4d01 100644
--- a/src/app/utils/exportCSV.ts
+++ b/src/app/utils/exportCSV.ts
@@ -827,7 +827,7 @@ export function exportCSV(
                   approach: subItem.approach,
                   window: subItem.window,
                   outcome: subItem.outcome,
-                  board: subItem.board,
+                  board: subSubItem.board,
                   portfolioCategory: subItem.portfolioCategory,
                   grant: subSubItem.grant1,
                   gac: subSubItem.gac,
@@ -849,9 +849,9 @@ export function exportCSV(
             { label: "TRP Window", key: "window" },
             { label: "TRP Outcome", key: "outcome" },
             { label: "GAC Meeting", key: "gac" },
-            { label: "Board approval", key: "board" },
             { label: "Portfolio Categorization", key: "portfolioCategory" },
             { label: "GAC Meeting", key: "gac" },
+            // { label: "Board approval", key: "board" },
             { label: "Grant", key: "grant" },
             { label: "Starting date", key: "start" },
             { label: "End date", key: "end" },

From bb7fec9ec2e2dc47bbe95bd21e3706d36bfe1df6 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Tue, 6 Jun 2023 13:39:42 +0300
Subject: [PATCH 45/69] chore: access to funding text changes

---
 .../sub-modules/accessToFunding/location.tsx  | 26 +++++++++++--------
 .../sub-modules/accessToFunding/style.ts      | 23 ++++++++++------
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
index d7d2dcec1..080cd2e94 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
@@ -111,13 +111,13 @@ export default function LocationAccessToFundingWrapper(props: Props) {
         <h3>
           <b>Allocation, Funding Requests & Eligibility</b>
         </h3>
-        <p>
-          Eligibility for Global Fund support is determined by the income
-          classification and disease burden of a country or region. Resources
-          are allocated to eligible countries or regions with the highest
-          disease burden, the least economic capacity, and where key and
-          vulnerable populations are disproportionately affected by the three
-          diseases.
+        <p style={{ width: "60%" }}>
+          The Global Fund allocates funding to eligible countries every three
+          years. Countries access these funds by developing Funding Requests
+          which are informed by country dialogues. Information on the current
+          status of Funding Requests is found below. For those interested in
+          participating in country dialogue, the “Overview” tab above includes
+          contact information for the Country Coordinating Mechanism.
         </p>
       </div>
       <Box height={25} />
@@ -271,10 +271,14 @@ export default function LocationAccessToFundingWrapper(props: Props) {
             />
             <div css={descriptioncss}>
               <p>
-                Below are the components which are eligible for an allocation
-                for the selected allocation period, according to the Global Fund
-                Eligibility Policy. Eligibility does not guarantee a funding
-                allocation. Learn more about Eligibility{" "}
+                Eligibility for funding from the Global Fund is determined by
+                country income classification and disease burden for HIV,
+                tuberculosis and malaria. Below are the components which are
+                eligible for an allocation for the selected allocation period,
+                according to the Global Fund Eligibility Policy. Eligibility for
+                the 2023-2025 Allocation Period was determined in 2022 and
+                documented in the 2023 Eligibility List. Eligibility does not
+                guarantee a funding allocation. Learn more about Eligibility{" "}
                 <a
                   target="_blank"
                   href="https://www.theglobalfund.org/en/applying-for-funding/understand-and-prepare/eligibility/"
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts b/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts
index a44690ba8..c85e7f3b5 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts
@@ -21,25 +21,32 @@ export const chipcss = (active: boolean) => css`
 export const descriptioncss = css`
   text-align: center;
   font-family: "Gotham Narrow";
+
   p {
-    font-weight: 325;
-    font-size: 14px;
-    color: #000000;
-    width: 60%;
+    color: #000;
+    width: 100%;
     margin: auto;
+    font-size: 14px;
+    font-weight: 400;
     line-height: 17px;
+
+    a {
+      font-weight: 700;
+    }
   }
+
   h1 {
-    font-weight: 700;
-    font-size: 24px;
     color: #252c34;
+    font-size: 24px;
+    font-weight: 700;
     margin-bottom: 0px;
   }
+
   h3 {
-    font-weight: 400;
-    font-size: 18px;
     color: #252c34;
     margin-top: 3px;
+    font-size: 18px;
+    font-weight: 400;
   }
 `;
 

From c8b45955eddb8e6b57cf9c0bff4386a75ce12973 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Tue, 6 Jun 2023 14:10:50 +0300
Subject: [PATCH 46/69] chore: remove drill down popup notice

---
 src/app/components/Charts/Grants/index.tsx    | 32 +++++++++++++------
 .../sub-modules/allocations/index.tsx         | 13 +++++---
 .../sub-modules/budgets/flow/index.tsx        | 13 +++++---
 .../sub-modules/budgets/time-cycle/index.tsx  | 13 +++++---
 .../investments/disbursed/index.tsx           | 13 +++++---
 .../investments/time-cycle/index.tsx          | 13 +++++---
 6 files changed, 67 insertions(+), 30 deletions(-)

diff --git a/src/app/components/Charts/Grants/index.tsx b/src/app/components/Charts/Grants/index.tsx
index bf973d23c..3ecce3574 100644
--- a/src/app/components/Charts/Grants/index.tsx
+++ b/src/app/components/Charts/Grants/index.tsx
@@ -15,6 +15,7 @@ import Button from "@material-ui/core/Button";
 import CloseIcon from "@material-ui/icons/Close";
 import { useCMSData } from "app/hooks/useCMSData";
 import IconButton from "@material-ui/core/IconButton";
+import { useStoreActions } from "app/state/store/hooks";
 import { isTouchDevice } from "app/utils/isTouchDevice";
 import useMousePosition from "app/hooks/useMousePosition";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
@@ -63,6 +64,9 @@ export function GrantsViz(props: GrantsVizProps) {
     component: string;
     rating: string | null;
   } | null>(null);
+  const clearDataPathSteps = useStoreActions(
+    (actions) => actions.DataPathSteps.clear
+  );
   const components = uniq(data.map((item: any) => item.component));
   const yearItemWidth = (width - 120) / 2 / datayears.length;
   const allValues: number[] = [];
@@ -136,11 +140,15 @@ export function GrantsViz(props: GrantsVizProps) {
           {(isMobile || isTouchDevice()) && (
             <Button
               onTouchStart={() => {
-                setReRouteDialog({
-                  ...reRouteDialog,
-                  code: `${hoveredNode.number}`,
-                  clickthroughPath: `${hoveredNode.name}`,
-                });
+                // setReRouteDialog({
+                //   ...reRouteDialog,
+                //   code: `${hoveredNode.number}`,
+                //   clickthroughPath: `${hoveredNode.name}`,
+                // });
+                clearDataPathSteps();
+                history.push(
+                  `/grant/${hoveredNode.number}/${hoveredNode.name}/overview`
+                );
               }}
               css={`
                 width: 100%;
@@ -252,6 +260,7 @@ export function GrantsViz(props: GrantsVizProps) {
 }
 
 export function ComponentRadarThingies(props: any) {
+  const history = useHistory();
   const isMobile = useMediaQuery("(max-width: 767px)");
 
   /*
@@ -491,11 +500,14 @@ export function ComponentRadarThingies(props: any) {
                             <div
                               onClick={() => {
                                 if (!isMobile && !isTouchDevice()) {
-                                  props.setReRouteDialog({
-                                    display: true,
-                                    code: item.name,
-                                    clickthroughPath: subItem.name,
-                                  });
+                                  // props.setReRouteDialog({
+                                  //   display: true,
+                                  //   code: item.name,
+                                  //   clickthroughPath: subItem.name,
+                                  // });
+                                  history.push(
+                                    `/grant/${item.name}/${subItem.name}/overview`
+                                  );
                                 }
                               }}
                               onMouseLeave={() => {
diff --git a/src/app/modules/viz-module/sub-modules/allocations/index.tsx b/src/app/modules/viz-module/sub-modules/allocations/index.tsx
index 47a9391e9..916597a7d 100644
--- a/src/app/modules/viz-module/sub-modules/allocations/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/allocations/index.tsx
@@ -96,6 +96,9 @@ export function AllocationsModule(props: AllocationsModuleProps) {
   const fetchPeriodOptionsData = useStoreActions(
     (store) => store.AllocationsPeriods.fetch
   );
+  const clearDataPathSteps = useStoreActions(
+    (actions) => actions.DataPathSteps.clear
+  );
 
   const appliedFilters = useStoreState((state) => state.AppliedFiltersState);
 
@@ -491,10 +494,12 @@ export function AllocationsModule(props: AllocationsModuleProps) {
             onNodeClick={(node: string) => {
               const name = node.split("-")[0];
               const code = getIso3FromName(name);
-              setReRouteDialog({
-                display: true,
-                code,
-              });
+              // setReRouteDialog({
+              //     display: true,
+              //     code,
+              //   });
+              clearDataPathSteps();
+              history.push(`/location/${code}/overview`);
             }}
           />
         </React.Fragment>
diff --git a/src/app/modules/viz-module/sub-modules/budgets/flow/index.tsx b/src/app/modules/viz-module/sub-modules/budgets/flow/index.tsx
index 51c94c68b..025f333c8 100644
--- a/src/app/modules/viz-module/sub-modules/budgets/flow/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/budgets/flow/index.tsx
@@ -70,6 +70,9 @@ export function BudgetsFlowModule(props: BudgetsFlowModuleProps) {
   const addDataPathSteps = useStoreActions(
     (actions) => actions.DataPathSteps.addSteps
   );
+  const clearDataPathSteps = useStoreActions(
+    (actions) => actions.DataPathSteps.clear
+  );
 
   const totalBudget: number = React.useMemo(() => {
     return sumBy(filter(props.links, { source: "Budgets" }), "value");
@@ -199,10 +202,12 @@ export function BudgetsFlowModule(props: BudgetsFlowModuleProps) {
                 .replace(idSplits[0], "")
                 .replace(`-${idSplits[1]}`, "");
               code = code.slice(0, code.length - 1);
-              setReRouteDialog({
-                display: true,
-                code,
-              });
+              // setReRouteDialog({
+              //   display: true,
+              //   code,
+              // });
+              clearDataPathSteps();
+              history.push(`/grant/${code}/period/budgets/flow`);
             }
           }}
         />
diff --git a/src/app/modules/viz-module/sub-modules/budgets/time-cycle/index.tsx b/src/app/modules/viz-module/sub-modules/budgets/time-cycle/index.tsx
index b9d7b4579..f5ce2cfb6 100644
--- a/src/app/modules/viz-module/sub-modules/budgets/time-cycle/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/budgets/time-cycle/index.tsx
@@ -56,6 +56,9 @@ export function BudgetsTimeCycleModule(props: BudgetsTimeCycleModuleProps) {
   const addDataPathSteps = useStoreActions(
     (actions) => actions.DataPathSteps.addSteps
   );
+  const clearDataPathSteps = useStoreActions(
+    (actions) => actions.DataPathSteps.clear
+  );
 
   const [reRouteDialog, setReRouteDialog] = React.useState({
     display: false,
@@ -183,10 +186,12 @@ export function BudgetsTimeCycleModule(props: BudgetsTimeCycleModuleProps) {
                 .replace(idSplits[0], "")
                 .replace(`-${idSplits[1]}`, "");
               code = code.slice(0, code.length - 1);
-              setReRouteDialog({
-                display: true,
-                code,
-              });
+              // setReRouteDialog({
+              //   display: true,
+              //   code,
+              // });
+              clearDataPathSteps();
+              history.push(`/grant/${code}/period/budgets/time-cycle`);
             }
           }}
         />
diff --git a/src/app/modules/viz-module/sub-modules/investments/disbursed/index.tsx b/src/app/modules/viz-module/sub-modules/investments/disbursed/index.tsx
index 414fa02ac..428339235 100644
--- a/src/app/modules/viz-module/sub-modules/investments/disbursed/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/investments/disbursed/index.tsx
@@ -86,6 +86,9 @@ export function InvestmentsDisbursedModule(
   const addDataPathSteps = useStoreActions(
     (actions) => actions.DataPathSteps.addSteps
   );
+  const clearDataPathSteps = useStoreActions(
+    (actions) => actions.DataPathSteps.clear
+  );
 
   const totalValue = React.useMemo(
     () => sumBy(props.data, "value"),
@@ -234,10 +237,12 @@ export function InvestmentsDisbursedModule(
               .split("-")
               .slice(0, node.split("-").length - 1)
               .join("-");
-            setReRouteDialog({
-              display: true,
-              code,
-            });
+            // setReRouteDialog({
+            //   display: true,
+            //   code,
+            // });
+            clearDataPathSteps();
+            history.push(`/grant/${code}/period/${clickthroughPath}`);
           }}
         />
       );
diff --git a/src/app/modules/viz-module/sub-modules/investments/time-cycle/index.tsx b/src/app/modules/viz-module/sub-modules/investments/time-cycle/index.tsx
index 79148112a..30c86dc4c 100644
--- a/src/app/modules/viz-module/sub-modules/investments/time-cycle/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/investments/time-cycle/index.tsx
@@ -54,6 +54,9 @@ export function InvestmentsTimeCycleModule(
   const addDataPathSteps = useStoreActions(
     (actions) => actions.DataPathSteps.addSteps
   );
+  const clearDataPathSteps = useStoreActions(
+    (actions) => actions.DataPathSteps.clear
+  );
 
   React.useEffect(() => {
     if (props.vizLevel === 0) {
@@ -183,10 +186,12 @@ export function InvestmentsTimeCycleModule(
           onNodeClick={(node: string, _x: number, _y: number) => {
             const idSplits = node.split("-");
             const code = getIso3FromName(idSplits[0]);
-            setReRouteDialog({
-              display: true,
-              code,
-            });
+            // setReRouteDialog({
+            //   display: true,
+            //   code,
+            // });
+            clearDataPathSteps();
+            history.push(`/grant/${code}/period/${clickthroughPath}`);
           }}
         />
       );

From 1543e0ff7cce9c3a8fae15f7283844619e911878 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Wed, 7 Jun 2023 05:31:41 +0100
Subject: [PATCH 47/69] fix: Grant implementation dropdown menu styling fix

---
 src/app/components/PageHeader/components/tabs/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/components/PageHeader/components/tabs/index.tsx b/src/app/components/PageHeader/components/tabs/index.tsx
index ca9893bf2..dc9666fb8 100644
--- a/src/app/components/PageHeader/components/tabs/index.tsx
+++ b/src/app/components/PageHeader/components/tabs/index.tsx
@@ -283,7 +283,10 @@ function PageHeaderTabWDropdown(props: TabProps) {
               disableTouchRipple
               css={`
                 border-bottom-style: none;
-
+                li {
+                  background: none;
+                  border-radius: none;
+                }
                 > a {
                   background: ${appColors.TABS.ITEM_BACKGROUND_COLOR};
 

From 29af3034091f04f342ad3a3cba80e3dfcc27f5b9 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Wed, 7 Jun 2023 12:22:12 +0300
Subject: [PATCH 48/69] chore: RHCP filters scrollable container

---
 .../components/filters/common/expandedgroup/index.tsx    | 2 ++
 .../components/ToolBoxPanel/components/filters/index.tsx | 4 ++--
 .../accessToFunding/eligibility/tableWrapper.tsx         | 9 +++++++--
 .../accessToFunding/fundingRequest/tableWrapper.tsx      | 5 +++--
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/app/components/ToolBoxPanel/components/filters/common/expandedgroup/index.tsx b/src/app/components/ToolBoxPanel/components/filters/common/expandedgroup/index.tsx
index 0a809dcde..6b7a36c07 100644
--- a/src/app/components/ToolBoxPanel/components/filters/common/expandedgroup/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/filters/common/expandedgroup/index.tsx
@@ -410,8 +410,10 @@ export function ExpandedFilterGroup(props: ExpandedFilterGroupProps) {
             `}
           />
           <div
+            id="scrollable-div"
             css={`
               overflow-y: auto;
+              height: calc(100% - 190px);
               max-height: calc(100% - 190px);
 
               @media (max-width: 767px) {
diff --git a/src/app/components/ToolBoxPanel/components/filters/index.tsx b/src/app/components/ToolBoxPanel/components/filters/index.tsx
index bc568c3eb..9a5910ad0 100644
--- a/src/app/components/ToolBoxPanel/components/filters/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/filters/index.tsx
@@ -95,8 +95,8 @@ export function ToolBoxPanelFilters(props: ToolBoxPanelFiltersProps) {
         width: 100%;
         height: 100%;
         display: flex;
-        max-height: 100%;
-        overflow-y: auto;
+        // max-height: 100%;
+        // overflow-y: auto;
         padding: 15px 25px;
         flex-direction: column;
 
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
index 3c30836be..3347f7e1c 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
@@ -326,10 +326,15 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
           <div
             css={`
               width: 100%;
-
+              height: 100%;
               display: flex;
-
+              max-height: 100%;
               flex-direction: column;
+
+              #scrollable-div {
+                height: calc(100% - 260px);
+                max-height: calc(100% - 260px);
+              }
             `}
           >
             <ToolBoxPanelAggregateBy
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
index 0e18be90d..264c00dec 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
@@ -224,9 +224,9 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
         <div
           css={`
             width: 100%;
-
+            height: 100%;
             display: flex;
-
+            max-height: 100%;
             flex-direction: column;
           `}
         >
@@ -239,6 +239,7 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
             defaultAppliedFilters={{
               components: [],
               trpWindows: [],
+              portfolioCategories: [],
             }}
             groupAppliedFiltersPathKey={groupAppliedFiltersPathKey}
           />

From 4820eecad3a1654f5881ecf08f69563a62e9e8c6 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Wed, 7 Jun 2023 13:57:36 +0300
Subject: [PATCH 49/69] chore: incremental

---
 src/app/components/PageHeader/components/tabs/index.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/components/PageHeader/components/tabs/index.tsx b/src/app/components/PageHeader/components/tabs/index.tsx
index dc9666fb8..0f59f7bce 100644
--- a/src/app/components/PageHeader/components/tabs/index.tsx
+++ b/src/app/components/PageHeader/components/tabs/index.tsx
@@ -283,9 +283,10 @@ function PageHeaderTabWDropdown(props: TabProps) {
               disableTouchRipple
               css={`
                 border-bottom-style: none;
+                background: ${appColors.TABS.ITEM_BACKGROUND_COLOR};
                 li {
-                  background: none;
-                  border-radius: none;
+                  width: 100%;
+                  border-radius: 0 !important;
                 }
                 > a {
                   background: ${appColors.TABS.ITEM_BACKGROUND_COLOR};

From 4c1064910e5c393007aae61dd726344980fb7984 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Wed, 7 Jun 2023 12:50:21 +0100
Subject: [PATCH 50/69] fix: partner breadcrumb fix

---
 src/app/modules/grants-module/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/modules/grants-module/index.tsx b/src/app/modules/grants-module/index.tsx
index 522279062..d9012e60a 100644
--- a/src/app/modules/grants-module/index.tsx
+++ b/src/app/modules/grants-module/index.tsx
@@ -191,7 +191,6 @@ export default function GrantsModule(props: GrantsModuleProps) {
         justify-content: center;
       `}
     >
-      {props.detailFilterType !== "partners" && <BreadCrumbs />}
       {(isLoading || loading) && <PageLoader />}
       {!props.code && (
         <>

From 118a064dc41c0592bb117f8df5835018ef279ac4 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Wed, 7 Jun 2023 16:38:34 +0300
Subject: [PATCH 51/69] chore: code smells

---
 .../components/Charts/Budgets/Flow/index.tsx  |  2 --
 .../components/datapath/index.tsx             |  4 +---
 .../filters/common/expandedgroup/index.tsx    | 11 ++++-----
 .../ToolBoxPanel/components/filters/index.tsx | 11 ++++-----
 .../components/subtoolboxpanel/index.tsx      |  1 -
 src/app/hooks/useGetAllAvailableGrants.tsx    |  2 +-
 .../modules/country-detail-module/index.tsx   |  4 ++--
 src/app/modules/grants-module/index.tsx       |  1 -
 .../eligibility/eligibilityTable.tsx          |  1 -
 .../eligibility/tableWrapper.tsx              |  7 +++---
 .../accessToFunding/fundingRequest/table.tsx  |  2 --
 .../fundingRequest/tableWrapper.tsx           |  6 ++---
 .../sub-modules/allocations/geomap/index.tsx  | 11 +++++----
 .../sub-modules/allocations/index.tsx         | 24 ++++++++++++-------
 .../sub-modules/budgets/time-cycle/index.tsx  |  1 -
 .../table/data-wrappers/generic.tsx           |  9 +++++--
 .../disbursed/data-wrappers/partnerDetail.tsx |  1 -
 .../investments/disbursed/index.tsx           |  2 +-
 .../time-cycle/data-wrappers/generic.tsx      |  2 +-
 .../investments/time-cycle/index.tsx          |  6 ++---
 .../api/action-reducers/sync/filters/index.ts |  4 ++--
 src/app/utils/exportView.ts                   |  2 --
 22 files changed, 55 insertions(+), 59 deletions(-)

diff --git a/src/app/components/Charts/Budgets/Flow/index.tsx b/src/app/components/Charts/Budgets/Flow/index.tsx
index fb7ebc3c6..a7265b9d7 100644
--- a/src/app/components/Charts/Budgets/Flow/index.tsx
+++ b/src/app/components/Charts/Budgets/Flow/index.tsx
@@ -1,8 +1,6 @@
 import React from "react";
 import get from "lodash/get";
-import sumBy from "lodash/sumBy";
 import uniqBy from "lodash/uniqBy";
-import filter from "lodash/filter";
 import { appColors } from "app/theme";
 import Grid from "@material-ui/core/Grid";
 import { css } from "styled-components/macro";
diff --git a/src/app/components/ToolBoxPanel/components/datapath/index.tsx b/src/app/components/ToolBoxPanel/components/datapath/index.tsx
index d90045bfd..80e756ffc 100644
--- a/src/app/components/ToolBoxPanel/components/datapath/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/datapath/index.tsx
@@ -1,17 +1,15 @@
 import React from "react";
+import { appColors } from "app/theme";
 import findIndex from "lodash/findIndex";
 import { useHistory } from "react-router-dom";
 import Timeline from "@material-ui/lab/Timeline";
-import IconButton from "@material-ui/core/IconButton";
 import { DrilldownModelUpdated } from "app/interfaces";
 import TimelineDot from "@material-ui/lab/TimelineDot";
 import TimelineItem from "@material-ui/lab/TimelineItem";
 import TimelineContent from "@material-ui/lab/TimelineContent";
-import CloseOutlinedIcon from "@material-ui/icons/CloseOutlined";
 import TimelineSeparator from "@material-ui/lab/TimelineSeparator";
 import TimelineConnector from "@material-ui/lab/TimelineConnector";
 import { useStoreState, useStoreActions } from "app/state/store/hooks";
-import { appColors } from "app/theme";
 
 export function DataPathPanel() {
   const history = useHistory();
diff --git a/src/app/components/ToolBoxPanel/components/filters/common/expandedgroup/index.tsx b/src/app/components/ToolBoxPanel/components/filters/common/expandedgroup/index.tsx
index 6b7a36c07..1da50ea58 100644
--- a/src/app/components/ToolBoxPanel/components/filters/common/expandedgroup/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/filters/common/expandedgroup/index.tsx
@@ -311,12 +311,11 @@ export function ExpandedFilterGroup(props: ExpandedFilterGroupProps) {
     }
   }
 
-  const expandedGroupValue =
-    props.expandedGroup !== undefined
-      ? props.expandedGroup
-      : expandedGroup
-      ? expandedGroup
-      : null;
+  let expandedGroupValue =
+    props.expandedGroup !== undefined ? props.expandedGroup : null;
+  if (expandedGroupValue === null && expandedGroup) {
+    expandedGroupValue = expandedGroup;
+  }
 
   return (
     <>
diff --git a/src/app/components/ToolBoxPanel/components/filters/index.tsx b/src/app/components/ToolBoxPanel/components/filters/index.tsx
index 9a5910ad0..990d5a424 100644
--- a/src/app/components/ToolBoxPanel/components/filters/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/filters/index.tsx
@@ -82,12 +82,11 @@ export function ToolBoxPanelFilters(props: ToolBoxPanelFiltersProps) {
     return <React.Fragment />;
   }
 
-  const expandedGroupValue =
-    props.expandedGroup !== undefined
-      ? props.expandedGroup
-      : expandedGroup
-      ? expandedGroup
-      : null;
+  let expandedGroupValue =
+    props.expandedGroup !== undefined ? props.expandedGroup : null;
+  if (expandedGroupValue === null && expandedGroup) {
+    expandedGroupValue = expandedGroup;
+  }
 
   return (
     <div
diff --git a/src/app/components/ToolBoxPanel/components/subtoolboxpanel/index.tsx b/src/app/components/ToolBoxPanel/components/subtoolboxpanel/index.tsx
index 687c0e3df..c92c04251 100644
--- a/src/app/components/ToolBoxPanel/components/subtoolboxpanel/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/subtoolboxpanel/index.tsx
@@ -184,7 +184,6 @@ export function SubToolBoxPanel(props: SubToolBoxPanelProps) {
 
   const isGrantDetail = history.location.pathname.indexOf("/grant/") > -1;
   const isResultsPage = history.location.pathname.indexOf("/results") > -1;
-  const isLocationDetail = history.location.pathname.indexOf("/location/") > -1;
 
   return (
     <>
diff --git a/src/app/hooks/useGetAllAvailableGrants.tsx b/src/app/hooks/useGetAllAvailableGrants.tsx
index 772870734..35fa37f85 100644
--- a/src/app/hooks/useGetAllAvailableGrants.tsx
+++ b/src/app/hooks/useGetAllAvailableGrants.tsx
@@ -28,7 +28,7 @@ export function useGetAllAvailableGrants(
         search: search.length > 0 ? search : undefined,
       }
     );
-    return await axios
+    return axios
       .get(
         `${process.env.REACT_APP_API}/grants?${
           `${filterString}&pageSize=0` ?? `pageSize=0`
diff --git a/src/app/modules/country-detail-module/index.tsx b/src/app/modules/country-detail-module/index.tsx
index caf115abd..8cbdeae74 100644
--- a/src/app/modules/country-detail-module/index.tsx
+++ b/src/app/modules/country-detail-module/index.tsx
@@ -121,7 +121,7 @@ export default function CountryDetail() {
       !isMobile &&
       !openToolboxPanel &&
       params.vizType !== "overview" &&
-      !(location.pathname.indexOf("access-to-funding") > -1)
+      location.pathname.indexOf("access-to-funding") <= -1
     ) {
       setOpenToolboxPanel(true);
     } else {
@@ -358,7 +358,7 @@ export default function CountryDetail() {
           }
         `}
       />
-      {!(location.pathname.indexOf("access-to-funding") > -1) && (
+      {location.pathname.indexOf("access-to-funding") <= -1 && (
         <ToolBoxPanel
           isLocationDetail
           open={openToolboxPanel}
diff --git a/src/app/modules/grants-module/index.tsx b/src/app/modules/grants-module/index.tsx
index d9012e60a..9fbec4f0e 100644
--- a/src/app/modules/grants-module/index.tsx
+++ b/src/app/modules/grants-module/index.tsx
@@ -18,7 +18,6 @@ import { appColors } from "app/theme";
 import { PageHeader } from "app/components/PageHeader";
 import { ToolBoxPanel } from "app/components/ToolBoxPanel";
 import { PageLoader } from "app/modules/common/page-loader";
-import BreadCrumbs from "app/components/Charts/common/breadcrumbs";
 import { PageTopSpacer } from "app/modules/common/page-top-spacer";
 import { GrantListItemModel } from "app/modules/grants-module/data";
 import { Search } from "app/modules/grants-module/components/Search";
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/eligibilityTable.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/eligibilityTable.tsx
index 94d876258..f21acde77 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/eligibilityTable.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/eligibilityTable.tsx
@@ -2,7 +2,6 @@
 import React from "react";
 /* project */
 import { SimpleTable } from "app/components/Table/Simple";
-import { PageLoader } from "app/modules/common/page-loader";
 import {
   SimpleTableRow,
   SimpleTableColumn,
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
index 3347f7e1c..ae07725ae 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/eligibility/tableWrapper.tsx
@@ -5,7 +5,6 @@ import orderBy from "lodash/orderBy";
 
 import { useDebounce } from "react-use";
 import { useRecoilValue } from "recoil";
-import Slide from "@material-ui/core/Slide";
 import TablePagination from "@material-ui/core/TablePagination";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 /* project */
@@ -243,9 +242,9 @@ export function AccessToFundingEligibilityTableWrapper(props: Props) {
   } else {
     formattedData = data;
   }
-  const sortedData = formattedData.map((data) => {
-    const sort = orderBy(data.children, ["level1"], ["desc"]);
-    return { ...data, children: sort };
+  const sortedData = formattedData.map((fdata) => {
+    const sort = orderBy(fdata.children, ["level1"], ["desc"]);
+    return { ...fdata, children: sort };
   });
 
   return (
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/table.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/table.tsx
index 3e93c5847..fbe6f1054 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/table.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/table.tsx
@@ -1,6 +1,4 @@
 import React from "react";
-import get from "lodash/get";
-import { useCMSData } from "app/hooks/useCMSData";
 import {
   FundingTableRow,
   FundingTableColumn,
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
index 264c00dec..7bdcb4912 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
@@ -4,7 +4,6 @@ import get from "lodash/get";
 import orderBy from "lodash/orderBy";
 import { useDebounce } from "react-use";
 import { useRecoilValue } from "recoil";
-import Slide from "@material-ui/core/Slide";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 /* project */
 import { PageLoader } from "app/modules/common/page-loader";
@@ -118,8 +117,9 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
   }
 
   const tableData = React.useMemo(() => {
+    let result;
     if (props.code) {
-      const result = get(data, "[0].children", []).slice(
+      result = get(data, "[0].children", []).slice(
         page * rowsPerPage,
         (page + 1) * rowsPerPage
       );
@@ -128,7 +128,7 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
       }
       return orderBy(result, "children", "desc");
     }
-    const result = data.map((item) => ({
+    result = data.map((item) => ({
       ...item,
       children: orderBy(item.children, "children", "desc"),
     }));
diff --git a/src/app/modules/viz-module/sub-modules/allocations/geomap/index.tsx b/src/app/modules/viz-module/sub-modules/allocations/geomap/index.tsx
index e9b6dacea..a57972450 100644
--- a/src/app/modules/viz-module/sub-modules/allocations/geomap/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/allocations/geomap/index.tsx
@@ -66,7 +66,7 @@ export function AllocationsGeoMap(props: Props) {
   }, []);
 
   React.useEffect(() => {
-    const filterString = getAPIFormattedFilters(
+    let filterString = getAPIFormattedFilters(
       props.code
         ? {
             ...appliedFilters,
@@ -74,13 +74,16 @@ export function AllocationsGeoMap(props: Props) {
           }
         : appliedFilters
     );
+    if (filterString.length > 0) {
+      filterString = `&${filterString}`;
+    } else {
+      filterString = "";
+    }
     if (geomapView === "countries") {
       fetchData({
         filterString:
           selectedPeriod !== "All"
-            ? `periods=${selectedPeriod}${
-                filterString.length > 0 ? `&${filterString}` : ""
-              }`
+            ? `periods=${selectedPeriod}${filterString}`
             : "",
       });
     } else if (geomapView === "multicountries") {
diff --git a/src/app/modules/viz-module/sub-modules/allocations/index.tsx b/src/app/modules/viz-module/sub-modules/allocations/index.tsx
index 916597a7d..1d68dc3d1 100644
--- a/src/app/modules/viz-module/sub-modules/allocations/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/allocations/index.tsx
@@ -262,7 +262,7 @@ export function AllocationsModule(props: AllocationsModuleProps) {
   }
 
   React.useEffect(() => {
-    const filterString = getAPIFormattedFilters(
+    let filterString = getAPIFormattedFilters(
       props.code
         ? {
             ...appliedFilters,
@@ -270,13 +270,16 @@ export function AllocationsModule(props: AllocationsModuleProps) {
           }
         : appliedFilters
     );
+    if (filterString.length > 0) {
+      filterString = `&${filterString}`;
+    } else {
+      filterString = "";
+    }
 
     fetchData({
       filterString:
         selectedPeriod !== "All"
-          ? `periods=${selectedPeriod}${
-              filterString.length > 0 ? `&${filterString}` : ""
-            }`
+          ? `periods=${selectedPeriod}${filterString}`
           : "",
     });
   }, [props.code, appliedFilters, selectedPeriod]);
@@ -299,7 +302,7 @@ export function AllocationsModule(props: AllocationsModuleProps) {
           }
         }
       });
-      const filterString = getAPIFormattedFilters(
+      let filterString = getAPIFormattedFilters(
         props.code
           ? {
               ...appliedFilters,
@@ -307,6 +310,11 @@ export function AllocationsModule(props: AllocationsModuleProps) {
             }
           : appliedFilters
       );
+      if (filterString.length > 0) {
+        filterString = `&${filterString}`;
+      } else {
+        filterString = "";
+      }
       fetchDrilldownLevelData({
         filterString: `levelParam=component/componentName in (${(vizSelected ===
         "Total"
@@ -317,11 +325,9 @@ export function AllocationsModule(props: AllocationsModuleProps) {
           .map((s: string) => `'${s}'`)
           .join(",")})${
           selectedPeriod !== "All"
-            ? `&periods=${selectedPeriod}${
-                filterString.length > 0 ? `&${filterString}` : ""
-              }`
+            ? `&periods=${selectedPeriod}${filterString}`
             : ""
-        }${filterString.length > 0 ? `&${filterString}` : ""}`,
+        }${filterString}`,
       });
     } else {
       [...items].forEach((item: Element) => {
diff --git a/src/app/modules/viz-module/sub-modules/budgets/time-cycle/index.tsx b/src/app/modules/viz-module/sub-modules/budgets/time-cycle/index.tsx
index f5ce2cfb6..3518c6e48 100644
--- a/src/app/modules/viz-module/sub-modules/budgets/time-cycle/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/budgets/time-cycle/index.tsx
@@ -11,7 +11,6 @@ import { useCMSData } from "app/hooks/useCMSData";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 /* project */
-import { DrilldownModelUpdated } from "app/interfaces";
 import { PageLoader } from "app/modules/common/page-loader";
 import { getNameFromIso3 } from "app/utils/getIso3FromName";
 import { formatFinancialValue } from "app/utils/formatFinancialValue";
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
index 76f1b8f1d..0f2066bf8 100644
--- a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
@@ -66,12 +66,17 @@ export function GenericFundingRequestWrapper() {
   }, []);
 
   function reloadData() {
-    const filterString = getAPIFormattedFilters(appliedFilters, {
+    let filterString = getAPIFormattedFilters(appliedFilters, {
       search,
       sortBy,
     });
+    if (filterString.length > 0) {
+      filterString = `&${filterString}`;
+    } else {
+      filterString = "";
+    }
     fetchData({
-      filterString: `${filterString.length > 0 ? `&${filterString}` : ""}`,
+      filterString,
     });
   }
 
diff --git a/src/app/modules/viz-module/sub-modules/investments/disbursed/data-wrappers/partnerDetail.tsx b/src/app/modules/viz-module/sub-modules/investments/disbursed/data-wrappers/partnerDetail.tsx
index 1264354b2..ceb774aa2 100644
--- a/src/app/modules/viz-module/sub-modules/investments/disbursed/data-wrappers/partnerDetail.tsx
+++ b/src/app/modules/viz-module/sub-modules/investments/disbursed/data-wrappers/partnerDetail.tsx
@@ -2,7 +2,6 @@
 import React from "react";
 import get from "lodash/get";
 import isEqual from "lodash/isEqual";
-import { useHistory } from "react-router-dom";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 /* project */
 import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
diff --git a/src/app/modules/viz-module/sub-modules/investments/disbursed/index.tsx b/src/app/modules/viz-module/sub-modules/investments/disbursed/index.tsx
index 428339235..54ee4c7bc 100644
--- a/src/app/modules/viz-module/sub-modules/investments/disbursed/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/investments/disbursed/index.tsx
@@ -216,7 +216,7 @@ export function InvestmentsDisbursedModule(
             _x: number,
             _y: number,
             code?: string,
-            name?: string
+            _name?: string
           ) => {
             if (props.allowDrilldown) {
               props.setVizLevel(1);
diff --git a/src/app/modules/viz-module/sub-modules/investments/time-cycle/data-wrappers/generic.tsx b/src/app/modules/viz-module/sub-modules/investments/time-cycle/data-wrappers/generic.tsx
index e19c4f695..aa7a5ad5c 100644
--- a/src/app/modules/viz-module/sub-modules/investments/time-cycle/data-wrappers/generic.tsx
+++ b/src/app/modules/viz-module/sub-modules/investments/time-cycle/data-wrappers/generic.tsx
@@ -64,7 +64,7 @@ export function GenericInvestmentsTimeCycleWrapper(props: Props) {
     }
   });
   const data = useStoreState((state) => {
-    let compData = state.DisbursementsTimeCycle.data;
+    let compData;
     switch (props.type) {
       case "Signed":
         compData = state.SignedTimeCycle.data;
diff --git a/src/app/modules/viz-module/sub-modules/investments/time-cycle/index.tsx b/src/app/modules/viz-module/sub-modules/investments/time-cycle/index.tsx
index 30c86dc4c..ae78b719f 100644
--- a/src/app/modules/viz-module/sub-modules/investments/time-cycle/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/investments/time-cycle/index.tsx
@@ -7,13 +7,11 @@ import { TreeMapNodeDatum } from "@nivo/treemap";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 /* project */
 import { PageLoader } from "app/modules/common/page-loader";
+import ReRouteDialogBox from "app/components/Charts/common/dialogBox";
 import { BudgetsTreemap } from "app/components/Charts/Budgets/Treemap";
 import { getIso3FromName, getNameFromIso3 } from "app/utils/getIso3FromName";
 import { InvestmentsTimeCycle } from "app/components/Charts/Investments/TimeCycle";
 import { BudgetsTreemapDataItem } from "app/components/Charts/Budgets/Treemap/data";
-import { DisbursementsTreemap } from "app/components/Charts/Investments/Disbursements";
-import { DisbursementsTreemapDataItem } from "app/components/Charts/Investments/Disbursements/data";
-import ReRouteDialogBox from "app/components/Charts/common/dialogBox";
 
 interface InvestmentsTimeCycleModuleProps {
   data: Record<string, unknown>[];
@@ -24,7 +22,7 @@ interface InvestmentsTimeCycleModuleProps {
   setVizLevel: (vizLevel: number) => void;
   vizSelected: string | undefined;
   setDrilldownVizSelected?: (vizSelected: string | undefined) => void;
-  drilldownVizSelected?: string | undefined;
+  drilldownVizSelected?: string;
   setVizSelected: (vizSelected: string | undefined) => void;
   type?: string;
   toolboxOpen?: boolean;
diff --git a/src/app/state/api/action-reducers/sync/filters/index.ts b/src/app/state/api/action-reducers/sync/filters/index.ts
index 31c5084c7..3f24c11ab 100644
--- a/src/app/state/api/action-reducers/sync/filters/index.ts
+++ b/src/app/state/api/action-reducers/sync/filters/index.ts
@@ -155,8 +155,8 @@ export const AppliedFiltersState: AppliedFiltersStateModel = {
       payload.donors.length +
       payload.donorCategories.length +
       payload.donorSubCategories.length +
-      payload.trpWindows.length;
-    payload.portfolioCategories.length;
+      payload.trpWindows.length +
+      payload.portfolioCategories.length;
   }),
   actionDefaultNone: action((state, payload: string[]) => {
     console.log("Incorrect filter type");
diff --git a/src/app/utils/exportView.ts b/src/app/utils/exportView.ts
index dcfcfb7fb..69ead43ed 100644
--- a/src/app/utils/exportView.ts
+++ b/src/app/utils/exportView.ts
@@ -29,8 +29,6 @@ function getFileName(
       return "allocations";
     case "/viz/allocations/map":
       return `allocations-${options.investmentsMapView}`;
-    case "/viz/allocations":
-      return "allocations";
     case "/viz/eligibility":
       if (options.isDetail) {
         return "location-eligibility";

From 159afb3e00f31c88ec1c0e5daf1234269ec14aa5 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Wed, 7 Jun 2023 16:45:51 +0300
Subject: [PATCH 52/69] chore: incremental

---
 .../components/ToolBoxPanel/components/filters/index.tsx   | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/app/components/ToolBoxPanel/components/filters/index.tsx b/src/app/components/ToolBoxPanel/components/filters/index.tsx
index 990d5a424..f2d786e8d 100644
--- a/src/app/components/ToolBoxPanel/components/filters/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/filters/index.tsx
@@ -221,8 +221,11 @@ export function ToolBoxPanelFilters(props: ToolBoxPanelFiltersProps) {
             }
             setAppliedFilters={
               props.setAppliedFilters
-                ? (filters: string[]) =>
-                    setGroupAppliedFilters(expandedGroupValue.name, filters)
+                ? (filters: string[]) => {
+                    if (expandedGroupValue) {
+                      setGroupAppliedFilters(expandedGroupValue.name, filters);
+                    }
+                  }
                 : undefined
             }
           />

From 40de350b943f2267687e2adef397efb44a16af06 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Fri, 9 Jun 2023 07:35:03 +0100
Subject: [PATCH 53/69] fix: add missing breadcrumb to grants page

---
 src/app/modules/grants-module/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/modules/grants-module/index.tsx b/src/app/modules/grants-module/index.tsx
index 9fbec4f0e..86d388f27 100644
--- a/src/app/modules/grants-module/index.tsx
+++ b/src/app/modules/grants-module/index.tsx
@@ -26,6 +26,7 @@ import { GrantsList } from "app/modules/grants-module/components/List";
 import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
 import { useGetAllAvailableGrants } from "app/hooks/useGetAllAvailableGrants";
 import { pathnameToFilterGroups } from "app/components/ToolBoxPanel/components/filters/data";
+import BreadCrumbs from "app/components/Charts/common/breadcrumbs";
 
 interface GrantsModuleProps {
   code?: string;
@@ -193,6 +194,7 @@ export default function GrantsModule(props: GrantsModuleProps) {
       {(isLoading || loading) && <PageLoader />}
       {!props.code && (
         <>
+          <BreadCrumbs />
           <PageHeader title={get(cmsData, "modulesGrants.titleShort", "")} />
           <ToolBoxPanel
             open={openToolboxPanel}

From d8298f59ae5dd8fb7805a9d9e2764d40ff27955e Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Fri, 9 Jun 2023 07:36:53 +0100
Subject: [PATCH 54/69]  feat: set default active state for eligibility table

---
 .../components/Table/Expandable/Toolbar.tsx   |  3 +++
 src/app/components/Table/Simple/index.tsx     | 26 ++++++++++++++++---
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/app/components/Table/Expandable/Toolbar.tsx b/src/app/components/Table/Expandable/Toolbar.tsx
index a2f6dd5d1..c1b8eecba 100644
--- a/src/app/components/Table/Expandable/Toolbar.tsx
+++ b/src/app/components/Table/Expandable/Toolbar.tsx
@@ -28,6 +28,8 @@ interface TableToolbarProps {
 
 export function TableToolbar(props: TableToolbarProps) {
   const location = useLocation();
+  const isEligibilityTable = location.pathname.includes("eligibility/table");
+
   const params = useParams<{ code?: string }>();
   const vizData = useGetAllVizData();
 
@@ -119,6 +121,7 @@ export function TableToolbar(props: TableToolbarProps) {
           type="text"
           ref={searchInputRef}
           value={props.search}
+          placeholder={isEligibilityTable ? "e.g Kenya" : ""}
           onChange={(e) => props.onSearchChange(e.target.value)}
           css={`
             height: 32px;
diff --git a/src/app/components/Table/Simple/index.tsx b/src/app/components/Table/Simple/index.tsx
index 4c554ef94..7b6f68297 100644
--- a/src/app/components/Table/Simple/index.tsx
+++ b/src/app/components/Table/Simple/index.tsx
@@ -23,6 +23,7 @@ import {
   SimpleTableProps,
   SimpleTableRow,
 } from "app/components/Table/Simple/data";
+import { useLocation } from "react-router-dom";
 
 const useRowStyles = makeStyles({
   root: {
@@ -41,10 +42,25 @@ function Row(props: {
   formatNumbers?: boolean;
   forceExpand?: boolean;
   condensed?: boolean;
+  rowIndex: number;
+  parentIndex: null | number;
 }) {
   const classes = useRowStyles();
-  const [open, setOpen] = React.useState(Boolean(props.forceExpand));
+  const location = useLocation();
+  const isEligibilityTable = location.pathname.includes("eligibility/table");
+  let rowExpanded = Boolean(props.forceExpand);
+  if (isEligibilityTable) {
+    if (props.parentIndex === 0) {
+      if (
+        (props.rowIndex === 0 || props.rowIndex === 1) &&
+        props.row.children
+      ) {
+        rowExpanded = true;
+      }
+    }
+  }
 
+  const [open, setOpen] = React.useState(rowExpanded);
   const firstColBig =
     props.columns[0].key !== "year" && props.columns[0].key !== "level1"
       ? props.columns.length > 3
@@ -181,9 +197,11 @@ function Row(props: {
             <Table>
               <TableBody>
                 {props.row.children &&
-                  props.row.children.map((child: SimpleTableRow) => (
+                  props.row.children.map((child: SimpleTableRow, index) => (
                     <Row
                       row={child}
+                      rowIndex={index}
+                      parentIndex={props.rowIndex}
                       key={child.name}
                       paddingLeft={40}
                       columns={props.columns}
@@ -331,10 +349,12 @@ export function SimpleTable(props: SimpleTableProps) {
               </TableRow>
             </TableHead>
             <TableBody>
-              {props.rows.map((row: SimpleTableRow) => (
+              {props.rows.map((row: SimpleTableRow, index: number) => (
                 <Row
                   key={row.name}
                   row={row}
+                  rowIndex={index}
+                  parentIndex={index}
                   columns={props.columns}
                   condensed={props.condensed}
                   forceExpand={props.forceExpand}

From c2d04f00242a5a420d0b08106e1e6763de956a35 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Thu, 15 Jun 2023 14:09:39 +0200
Subject: [PATCH 55/69] chore: access to funding page text changes

---
 .../sub-modules/accessToFunding/location.tsx    | 17 ++++++++++++-----
 .../sub-modules/accessToFunding/style.ts        |  1 +
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
index 080cd2e94..ca2680b79 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
@@ -114,10 +114,17 @@ export default function LocationAccessToFundingWrapper(props: Props) {
         <p style={{ width: "60%" }}>
           The Global Fund allocates funding to eligible countries every three
           years. Countries access these funds by developing Funding Requests
-          which are informed by country dialogues. Information on the current
-          status of Funding Requests is found below. For those interested in
-          participating in country dialogue, the “Overview” tab above includes
-          contact information for the Country Coordinating Mechanism.
+          which are informed by{" "}
+          <a
+            target="_blank"
+            href="https://www.theglobalfund.org/en/funding-model/throughout-the-cycle/country-dialogue"
+          >
+            country dialogues
+          </a>
+          . Information on the current status of Funding Requests is found
+          below. For those interested in participating in country dialogue, the
+          “Overview” tab above includes contact information for the Country
+          Coordinating Mechanism.
         </p>
       </div>
       <Box height={25} />
@@ -127,7 +134,7 @@ export default function LocationAccessToFundingWrapper(props: Props) {
             text-align: center;
           `}
         >
-          <b>Cycle</b>
+          <b>Allocation Period</b>
         </p>
         <div
           css={`
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts b/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts
index c85e7f3b5..ad1bd18b7 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/style.ts
@@ -31,6 +31,7 @@ export const descriptioncss = css`
     line-height: 17px;
 
     a {
+      color: #252c34;
       font-weight: 700;
     }
   }

From 60eb4a30df214dc691157bcff7514bdd4b378627 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Thu, 15 Jun 2023 14:21:35 +0200
Subject: [PATCH 56/69] chore: funding requests search fix

---
 .../accessToFunding/fundingRequest/tableWrapper.tsx       | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
index 7bdcb4912..927df4dd4 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/fundingRequest/tableWrapper.tsx
@@ -2,8 +2,8 @@
 import React from "react";
 import get from "lodash/get";
 import orderBy from "lodash/orderBy";
-import { useDebounce } from "react-use";
 import { useRecoilValue } from "recoil";
+import { useDebounce, useUpdateEffect } from "react-use";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 /* project */
 import { PageLoader } from "app/modules/common/page-loader";
@@ -141,6 +141,12 @@ export function AccessToFundingRequestTableWrapper(props: Props) {
     }
   }, [props.code, appliedFilters, sortBy, cycle]);
 
+  useUpdateEffect(() => {
+    if (search.length === 0) {
+      reloadData();
+    }
+  }, [search]);
+
   const [,] = useDebounce(
     () => {
       if (search.length > 0) {

From 77b52c58f108f6c06aadbf7b0c35b20162b5c4ed Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Thu, 15 Jun 2023 15:20:59 +0200
Subject: [PATCH 57/69] feat: open eligibility table search by default

---
 src/app/components/Table/Expandable/Toolbar.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/app/components/Table/Expandable/Toolbar.tsx b/src/app/components/Table/Expandable/Toolbar.tsx
index c1b8eecba..840933fce 100644
--- a/src/app/components/Table/Expandable/Toolbar.tsx
+++ b/src/app/components/Table/Expandable/Toolbar.tsx
@@ -58,6 +58,13 @@ export function TableToolbar(props: TableToolbarProps) {
     (state) => state.ToolBoxPanelResultsYearState.value
   );
 
+  React.useEffect(() => {
+    if (searchInputRef.current && isEligibilityTable) {
+      setOpenSearch(true);
+      searchInputRef.current.focus();
+    }
+  }, [searchInputRef, isEligibilityTable]);
+
   React.useEffect(() => {
     if (props.search.length > 0 && !openSearch) {
       setOpenSearch(true);

From 90e7766be995975b9925677908c4f1b11975a28a Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Fri, 16 Jun 2023 13:07:49 +0200
Subject: [PATCH 58/69] chore: hide popover on scroll

---
 src/app/components/Table/Expandable/Toolbar.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/app/components/Table/Expandable/Toolbar.tsx b/src/app/components/Table/Expandable/Toolbar.tsx
index 840933fce..b9bf749b4 100644
--- a/src/app/components/Table/Expandable/Toolbar.tsx
+++ b/src/app/components/Table/Expandable/Toolbar.tsx
@@ -71,6 +71,15 @@ export function TableToolbar(props: TableToolbarProps) {
     }
   }, [props.search]);
 
+  function handleScroll() {
+    setAnchorEl(null);
+  }
+
+  React.useEffect(() => {
+    document.addEventListener("scroll", handleScroll);
+    return () => document.removeEventListener("scroll", handleScroll);
+  }, []);
+
   return (
     <Toolbar
       css={`
@@ -237,6 +246,7 @@ export function TableToolbar(props: TableToolbarProps) {
         </IconButton>
       </div>
       <Popover
+        disableScrollLock
         anchorEl={anchorEl}
         open={Boolean(anchorEl)}
         onClose={() => setAnchorEl(null)}

From a146f78140f8417a4f841996c1136f4c88847237 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Fri, 16 Jun 2023 13:38:32 +0200
Subject: [PATCH 59/69] style: adjust app bar height as per design

---
 public/gflogo.png                             | Bin 3195 -> 6066 bytes
 src/app/Providers.tsx                         |   2 +-
 src/app/components/AppBar/index.tsx           |   2 +-
 .../Charts/common/breadcrumbs/index.tsx       |   2 +-
 .../modules/country-detail-module/index.tsx   |   2 +-
 src/app/modules/documents-module/index.tsx    |   2 +-
 src/app/modules/grant-detail-module/index.tsx |   2 +-
 src/app/modules/grants-module/index.tsx       |   2 +-
 .../modules/partner-detail-module/index.tsx   |   2 +-
 src/app/modules/results-module/index.tsx      |   2 +-
 src/app/modules/viz-module/index.tsx          |   2 +-
 11 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/public/gflogo.png b/public/gflogo.png
index 8514310c3e0891eeb9a51f5006b7563246ad95c7..d2b31d88cd67a96406d975601ce691381ef5453e 100644
GIT binary patch
literal 6066
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

literal 3195
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
O2P{mjP0BFmLjMgIWT5*1

diff --git a/src/app/Providers.tsx b/src/app/Providers.tsx
index b02fa0248..7b191771a 100644
--- a/src/app/Providers.tsx
+++ b/src/app/Providers.tsx
@@ -30,7 +30,7 @@ function Providers(props: ProviderProps) {
                   maxWidth="lg"
                   css={`
                     padding: 0 24px;
-                    min-height: calc(100vh - 48px);
+                    min-height: calc(100vh - 45px);
 
                     @media (max-width: 767px) {
                       padding: 0 16px;
diff --git a/src/app/components/AppBar/index.tsx b/src/app/components/AppBar/index.tsx
index 8fdec2aba..ffa16b8b1 100644
--- a/src/app/components/AppBar/index.tsx
+++ b/src/app/components/AppBar/index.tsx
@@ -175,7 +175,7 @@ export function AppBar() {
           css={`
             gap: 32px;
             width: 100%;
-            height: 48px;
+            height: 45px;
             display: flex;
             flex-direction: row;
             align-items: center;
diff --git a/src/app/components/Charts/common/breadcrumbs/index.tsx b/src/app/components/Charts/common/breadcrumbs/index.tsx
index 42603708c..0a6bd7b89 100644
--- a/src/app/components/Charts/common/breadcrumbs/index.tsx
+++ b/src/app/components/Charts/common/breadcrumbs/index.tsx
@@ -44,7 +44,7 @@ export default function BreadCrumbs() {
     <div
       css={`
         left: 0;
-        top: 48px;
+        top: 45px;
         z-index: 10;
         position: sticky;
         margin-top: 3rem;
diff --git a/src/app/modules/country-detail-module/index.tsx b/src/app/modules/country-detail-module/index.tsx
index 8cbdeae74..07c133f20 100644
--- a/src/app/modules/country-detail-module/index.tsx
+++ b/src/app/modules/country-detail-module/index.tsx
@@ -381,7 +381,7 @@ export default function CountryDetail() {
       <div
         css={`
           left: 0;
-          top: 48px;
+          top: 45px;
           z-index: 15;
           width: 100%;
           height: 100%;
diff --git a/src/app/modules/documents-module/index.tsx b/src/app/modules/documents-module/index.tsx
index f0be10dc7..a4e7026b7 100644
--- a/src/app/modules/documents-module/index.tsx
+++ b/src/app/modules/documents-module/index.tsx
@@ -189,7 +189,7 @@ export default function DocumentsModule() {
       <div
         css={`
           left: 0;
-          top: 48px;
+          top: 45px;
           z-index: 15;
           width: 100%;
           height: 100%;
diff --git a/src/app/modules/grant-detail-module/index.tsx b/src/app/modules/grant-detail-module/index.tsx
index fb77af7be..559c633ee 100644
--- a/src/app/modules/grant-detail-module/index.tsx
+++ b/src/app/modules/grant-detail-module/index.tsx
@@ -382,7 +382,7 @@ export default function GrantDetail() {
       <div
         css={`
           left: 0;
-          top: 48px;
+          top: 45px;
           z-index: 15;
           width: 100%;
           height: 100%;
diff --git a/src/app/modules/grants-module/index.tsx b/src/app/modules/grants-module/index.tsx
index 86d388f27..6001878b6 100644
--- a/src/app/modules/grants-module/index.tsx
+++ b/src/app/modules/grants-module/index.tsx
@@ -245,7 +245,7 @@ export default function GrantsModule(props: GrantsModuleProps) {
       <div
         css={`
           left: 0;
-          top: 48px;
+          top: 45px;
           z-index: 15;
           width: 100%;
           height: 100%;
diff --git a/src/app/modules/partner-detail-module/index.tsx b/src/app/modules/partner-detail-module/index.tsx
index 91255e323..f0e3714f8 100644
--- a/src/app/modules/partner-detail-module/index.tsx
+++ b/src/app/modules/partner-detail-module/index.tsx
@@ -288,7 +288,7 @@ export default function PartnerDetail() {
       <div
         css={`
           left: 0;
-          top: 48px;
+          top: 45px;
           z-index: 15;
           width: 100%;
           height: 100%;
diff --git a/src/app/modules/results-module/index.tsx b/src/app/modules/results-module/index.tsx
index 99de08412..60e106419 100644
--- a/src/app/modules/results-module/index.tsx
+++ b/src/app/modules/results-module/index.tsx
@@ -188,7 +188,7 @@ export default function ResultsModule() {
       <div
         css={`
           left: 0;
-          top: 48px;
+          top: 45px;
           z-index: 15;
           width: 100%;
           height: 100%;
diff --git a/src/app/modules/viz-module/index.tsx b/src/app/modules/viz-module/index.tsx
index 53d2ec462..bb9cf6679 100644
--- a/src/app/modules/viz-module/index.tsx
+++ b/src/app/modules/viz-module/index.tsx
@@ -248,7 +248,7 @@ export default function VizModule() {
       <div
         css={`
           left: 0;
-          top: 48px;
+          top: 45px;
           z-index: 15;
           width: 100%;
           height: 100%;

From 27f9e71f7b120f5ebdab8a3d75ca35b499225601 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Fri, 16 Jun 2023 13:54:52 +0200
Subject: [PATCH 60/69] chore: remove currency in allocation t headers

---
 src/app/components/Table/Simple/data.ts                |  3 +++
 src/app/components/Table/Simple/index.tsx              | 10 ++++------
 .../viz-module/sub-modules/allocations/table/index.tsx | 10 +++++++---
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/app/components/Table/Simple/data.ts b/src/app/components/Table/Simple/data.ts
index 13d7060ae..5821f64db 100644
--- a/src/app/components/Table/Simple/data.ts
+++ b/src/app/components/Table/Simple/data.ts
@@ -7,6 +7,9 @@ export interface SimpleTableColumn {
   name: string;
   key: string;
   valueToColorMap?: { [key: string]: string };
+  isMonetary?: {
+    currency: string;
+  };
 }
 
 export interface SimpleTableProps {
diff --git a/src/app/components/Table/Simple/index.tsx b/src/app/components/Table/Simple/index.tsx
index 7b6f68297..597a4ad92 100644
--- a/src/app/components/Table/Simple/index.tsx
+++ b/src/app/components/Table/Simple/index.tsx
@@ -114,8 +114,8 @@ function Row(props: {
           let formattedValue =
             props.formatNumbers &&
             !Number.isNaN(parseInt(value)) &&
-            column.name.indexOf("(USD)") > -1
-              ? formatFinancialValue(value, true)
+            column.isMonetary
+              ? formatFinancialValue(value)
               : value;
           return (
             <TableCell
@@ -141,8 +141,7 @@ function Row(props: {
                   align-items: center;
                   flex-direction: row;
                   justify-content: ${!Number.isNaN(parseInt(value)) &&
-                  (column.name.indexOf("(USD)") > -1 ||
-                    column.name === "Grants")
+                  (column.isMonetary || column.name === "Grants")
                     ? "flex-end"
                     : "flex-start"};
                 `}
@@ -303,8 +302,7 @@ export function SimpleTable(props: SimpleTableProps) {
                 ).map((column: SimpleTableColumn, index: number) => {
                   let icon = undefined;
                   const monetaryColumn =
-                    column.name.indexOf("(USD)") > -1 ||
-                    column.name === "Grants";
+                    column.isMonetary || column.name === "Grants";
                   if (
                     sortBySplits.length > 1 &&
                     sortBySplits[0] === column.key
diff --git a/src/app/modules/viz-module/sub-modules/allocations/table/index.tsx b/src/app/modules/viz-module/sub-modules/allocations/table/index.tsx
index e6446f260..c00856059 100644
--- a/src/app/modules/viz-module/sub-modules/allocations/table/index.tsx
+++ b/src/app/modules/viz-module/sub-modules/allocations/table/index.tsx
@@ -6,7 +6,10 @@ import useDebounce from "react-use/lib/useDebounce";
 import { SimpleTable } from "app/components/Table/Simple";
 import { PageLoader } from "app/modules/common/page-loader";
 import useUpdateEffect from "react-use/lib/useUpdateEffect";
-import { SimpleTableRow } from "app/components/Table/Simple/data";
+import {
+  SimpleTableColumn,
+  SimpleTableRow,
+} from "app/components/Table/Simple/data";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import { getAPIFormattedFilters } from "app/utils/getAPIFormattedFilters";
 
@@ -74,12 +77,13 @@ export function AllocationsTableModule(props: AllocationsTableProps) {
     return <PageLoader />;
   }
 
-  const columns =
+  const columns: SimpleTableColumn[] =
     data.length > 0
       ? filter(Object.keys(data[0]), (key) => key !== "children").map(
           (key) => ({
-            name: key === "name" ? "Component/Location" : `${key} (USD)`,
+            name: key === "name" ? "Component/Location" : key,
             key,
+            isMonetary: key === "name" ? undefined : { currency: "USD" },
           })
         )
       : [];

From afcfe16c4aa0cc890bd93a9aff4c3e9707e25685 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Tue, 4 Jul 2023 19:16:49 +0300
Subject: [PATCH 61/69] chore: merge incremental

---
 src/app/components/Table/Simple/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/Table/Simple/index.tsx b/src/app/components/Table/Simple/index.tsx
index 9b3b5c09a..fb575fd64 100644
--- a/src/app/components/Table/Simple/index.tsx
+++ b/src/app/components/Table/Simple/index.tsx
@@ -49,8 +49,6 @@ function Row(props: {
   const history = useHistory();
   const classes = useRowStyles();
 
-  const [open, setOpen] = React.useState(rowExpanded);
-
   const isEligibilityTable = location.pathname.includes("eligibility/table");
 
   let rowExpanded = Boolean(props.forceExpand);
@@ -66,6 +64,8 @@ function Row(props: {
     }
   }
 
+  const [open, setOpen] = React.useState(rowExpanded);
+
   const firstColBig =
     props.columns[0].key !== "year" && props.columns[0].key !== "level1"
       ? props.columns.length > 3

From 657724a832f252d775dd5a29bfc53e7300fa5d43 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Wed, 5 Jul 2023 17:15:53 +0300
Subject: [PATCH 62/69] feat: funding requests documents download

---
 src/app/components/AppBar/index.tsx           |  5 ++
 .../Charts/common/breadcrumbs/index.tsx       |  1 -
 src/app/components/PageHeader/index.tsx       |  2 +-
 src/app/components/Table/funding/index.tsx    | 63 ++++++++++++++++++-
 .../table/data-wrappers/data.ts               |  4 ++
 5 files changed, 70 insertions(+), 5 deletions(-)

diff --git a/src/app/components/AppBar/index.tsx b/src/app/components/AppBar/index.tsx
index ffa16b8b1..d02c1f8b7 100644
--- a/src/app/components/AppBar/index.tsx
+++ b/src/app/components/AppBar/index.tsx
@@ -177,6 +177,7 @@ export function AppBar() {
             width: 100%;
             height: 45px;
             display: flex;
+            min-height: 45px;
             flex-direction: row;
             align-items: center;
             justify-content: space-between;
@@ -299,6 +300,8 @@ export function AppBar() {
                   <IconButton
                     onClick={() => setOpenSearch(!openSearch)}
                     css={`
+                      width: 45px;
+                      height: 45px;
                       margin-right: -12px;
                     `}
                   >
@@ -333,6 +336,8 @@ export function AppBar() {
         href="https://github.com/globalfund/data-explorer-client"
         css={`
           right: 0;
+          width: 45px;
+          height: 45px;
           position: absolute;
 
           path {
diff --git a/src/app/components/Charts/common/breadcrumbs/index.tsx b/src/app/components/Charts/common/breadcrumbs/index.tsx
index 0a6bd7b89..4808de1db 100644
--- a/src/app/components/Charts/common/breadcrumbs/index.tsx
+++ b/src/app/components/Charts/common/breadcrumbs/index.tsx
@@ -47,7 +47,6 @@ export default function BreadCrumbs() {
         top: 45px;
         z-index: 10;
         position: sticky;
-        margin-top: 3rem;
         background: ${appColors.COMMON.WHITE};
       `}
     >
diff --git a/src/app/components/PageHeader/index.tsx b/src/app/components/PageHeader/index.tsx
index 8526d2bf2..6700b6bdf 100644
--- a/src/app/components/PageHeader/index.tsx
+++ b/src/app/components/PageHeader/index.tsx
@@ -93,7 +93,7 @@ export function PageHeader(props: PageHeaderProps) {
   }
 
   return (
-    <div css={styles.container(isAboutPage ? 48 : 104)}>
+    <div css={styles.container(isAboutPage ? 45 : 100)}>
       <Container maxWidth="lg" css={styles.innercontainer}>
         <Grid
           container
diff --git a/src/app/components/Table/funding/index.tsx b/src/app/components/Table/funding/index.tsx
index 5ae07713d..f69224bbe 100644
--- a/src/app/components/Table/funding/index.tsx
+++ b/src/app/components/Table/funding/index.tsx
@@ -5,19 +5,23 @@ import find from "lodash/find";
 import filter from "lodash/filter";
 import { appColors } from "app/theme";
 import { Link } from "react-router-dom";
+import Menu from "@material-ui/core/Menu";
 import Table from "@material-ui/core/Table";
 import Button from "@material-ui/core/Button";
+import MenuItem from "@material-ui/core/MenuItem";
 import Collapse from "@material-ui/core/Collapse";
 import TableRow from "@material-ui/core/TableRow";
 import TableHead from "@material-ui/core/TableHead";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
+import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
 import ArrowUpward from "@material-ui/icons/ArrowUpward";
 import ArrowDownward from "@material-ui/icons/ArrowDownward";
 import TableContainer from "@material-ui/core/TableContainer";
 import { tablecell } from "app/components/Table/Simple/styles";
 import IconChevronRight from "app/assets/icons/IconChevronRight";
+import { CloudDownloadIcon } from "app/assets/icons/CloudDownload";
 import { TableToolbar } from "app/components/Table/Expandable/Toolbar";
 import { TableToolbarCols } from "app/components/Table/Expandable/data";
 import {
@@ -47,6 +51,55 @@ export interface FundingTableProps {
   onSortByChange: (value: string) => void;
 }
 
+const FRIconDownload = (props: {
+  documents: {
+    url: string;
+    name: string;
+  }[];
+}) => {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = (event: React.MouseEvent<any>) => {
+    event.stopPropagation();
+    setAnchorEl(null);
+  };
+
+  if (props.documents.length === 0) {
+    return <React.Fragment />;
+  }
+
+  return (
+    <React.Fragment>
+      <IconButton onClick={handleClick}>
+        <CloudDownloadIcon />
+      </IconButton>
+      <Menu
+        keepMounted
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        open={Boolean(anchorEl)}
+      >
+        {props.documents.map((item) => (
+          <MenuItem
+            key={item.name}
+            component="a"
+            href={item.url}
+            target="_blank"
+            onClick={handleClose}
+          >
+            {item.name}
+          </MenuItem>
+        ))}
+      </Menu>
+    </React.Fragment>
+  );
+};
+
 const useRowStyles = makeStyles({
   root: {
     "& > *": {
@@ -229,7 +282,10 @@ function Row(props: {
                 {index === 0 &&
                   props.row.children &&
                   props.row.children.length > 0 && <IconChevronRight />}
-                {column.key === "grant" ? (
+                {column.key !== "grant" &&
+                  column.key !== "documents" &&
+                  get(props.row, column.key, "")}
+                {column.key === "grant" && (
                   <Link
                     css={`
                       color: ${appColors.TABLE.ROW_TEXT_COLOR};
@@ -242,8 +298,9 @@ function Row(props: {
                   >
                     {get(props.row, column.key, "")}
                   </Link>
-                ) : (
-                  get(props.row, column.key, "")
+                )}
+                {column.key === "documents" && (
+                  <FRIconDownload documents={get(props.row, column.key, [])} />
                 )}
               </div>
             </div>
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts
index 1176b84e2..61c268a00 100644
--- a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/data.ts
@@ -57,6 +57,10 @@ export const fundingRequestColumns = [
         key: "portfolioCategory",
         name: "Portfolio Categorization",
       },
+      {
+        key: "documents",
+        name: "",
+      },
     ],
   },
 ];

From 8c57767a059826ece77b361ea427e53410ea123d Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Fri, 7 Jul 2023 12:36:36 +0300
Subject: [PATCH 63/69] fix: fr documents download dropdown item label

---
 src/app/components/Table/funding/index.tsx    | 20 ++++++++++++++++---
 .../modules/common/page-top-spacer/index.tsx  |  2 +-
 .../sub-modules/accessToFunding/location.tsx  |  1 -
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/app/components/Table/funding/index.tsx b/src/app/components/Table/funding/index.tsx
index f69224bbe..1a68086c1 100644
--- a/src/app/components/Table/funding/index.tsx
+++ b/src/app/components/Table/funding/index.tsx
@@ -54,7 +54,7 @@ export interface FundingTableProps {
 const FRIconDownload = (props: {
   documents: {
     url: string;
-    name: string;
+    lang: string;
   }[];
 }) => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
@@ -69,6 +69,15 @@ const FRIconDownload = (props: {
     setAnchorEl(null);
   };
 
+  const handleScroll = () => {
+    setAnchorEl(null);
+  };
+
+  React.useEffect(() => {
+    document.addEventListener("scroll", handleScroll);
+    return () => document.removeEventListener("scroll", handleScroll);
+  }, []);
+
   if (props.documents.length === 0) {
     return <React.Fragment />;
   }
@@ -80,19 +89,24 @@ const FRIconDownload = (props: {
       </IconButton>
       <Menu
         keepMounted
+        disableScrollLock
         anchorEl={anchorEl}
         onClose={handleClose}
         open={Boolean(anchorEl)}
       >
         {props.documents.map((item) => (
           <MenuItem
-            key={item.name}
+            key={item.lang}
             component="a"
             href={item.url}
             target="_blank"
             onClick={handleClose}
+            css={`
+              font-size: 12px;
+              text-decoration: none;
+            `}
           >
-            {item.name}
+            {item.lang}
           </MenuItem>
         ))}
       </Menu>
diff --git a/src/app/modules/common/page-top-spacer/index.tsx b/src/app/modules/common/page-top-spacer/index.tsx
index dbae0e17a..0289ace4b 100644
--- a/src/app/modules/common/page-top-spacer/index.tsx
+++ b/src/app/modules/common/page-top-spacer/index.tsx
@@ -4,7 +4,7 @@ export const PageTopSpacer = () => (
   <div
     css={`
       width: 100%;
-      height: 20px;
+      height: 70px;
 
       @media (max-width: 767px) {
         height: 14px;
diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
index ca2680b79..02cca1653 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
@@ -104,7 +104,6 @@ export default function LocationAccessToFundingWrapper(props: Props) {
   return (
     <>
       <div css={descriptioncss}>
-        <Box height={30} />
         <h1>
           <b>Access to Funding</b>
         </h1>

From 88a5035cc4539fd207fc03aedc3be3fd9a8f79d9 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Tue, 11 Jul 2023 13:17:20 +0300
Subject: [PATCH 64/69] chore: add funding request table disclaimer

---
 .../modules/viz-module/sub-modules/accessToFunding/location.tsx  | 1 +
 .../sub-modules/fundingRequests/table/data-wrappers/generic.tsx  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
index 02cca1653..b20552be4 100644
--- a/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
+++ b/src/app/modules/viz-module/sub-modules/accessToFunding/location.tsx
@@ -253,6 +253,7 @@ export default function LocationAccessToFundingWrapper(props: Props) {
               font-size: 14px;
               line-height: 17px;
               text-align: center;
+              white-space: pre-line;
             `}
           >
             {get(cmsData, "modulesFundingRequests.tableDisclaimer", "")}
diff --git a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
index 0f2066bf8..9e6fd79bb 100644
--- a/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
+++ b/src/app/modules/viz-module/sub-modules/fundingRequests/table/data-wrappers/generic.tsx
@@ -172,6 +172,7 @@ export function GenericFundingRequestWrapper() {
           font-size: 14px;
           line-height: 17px;
           text-align: center;
+          white-space: pre-line;
         `}
       >
         {get(cmsData, "modulesFundingRequests.tableDisclaimer", "")}

From aab08179f00a96f9d9e7f7100c5ec738a51d7ccd Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Tue, 11 Jul 2023 13:39:49 +0300
Subject: [PATCH 65/69] chore: update github actions config

---
 .github/workflows/main.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 32a387a61..e36518f9c 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -35,7 +35,7 @@ jobs:
             ]
           extra_plugins: |
             "@semantic-release/commit-analyzer"
-            "@semantic-release/release-notes-generator@10.0.3"
+            "@semantic-release/release-notes-generator"
             "@semantic-release/github"
         env:
           GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}

From 4b1d9a98f79ee9019483650a981afd5639b64222 Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Tue, 11 Jul 2023 13:42:09 +0300
Subject: [PATCH 66/69] chore: remove semantic version

---
 .github/workflows/main.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index e36518f9c..997240dad 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -24,7 +24,6 @@ jobs:
       - name: Semantic Release
         uses: cycjimmy/semantic-release-action@v3
         with:
-          semantic_version: 18
           branches: |
             [
               "main",

From 8807e2616f93fdafb23ff9b4a285366ccc1850cd Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Tue, 11 Jul 2023 13:44:13 +0300
Subject: [PATCH 67/69] chore: update semantic version

---
 .github/workflows/main.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 997240dad..edbee2fa5 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -24,6 +24,7 @@ jobs:
       - name: Semantic Release
         uses: cycjimmy/semantic-release-action@v3
         with:
+          semantic_version: 20.1.0
           branches: |
             [
               "main",

From 8ec55081c51694e4cbca5279988f96bf2c1c409b Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Tue, 11 Jul 2023 13:48:52 +0300
Subject: [PATCH 68/69] chore: incremental

---
 .github/workflows/main.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index edbee2fa5..d610fa10f 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -24,7 +24,7 @@ jobs:
       - name: Semantic Release
         uses: cycjimmy/semantic-release-action@v3
         with:
-          semantic_version: 20.1.0
+          semantic_version: 18
           branches: |
             [
               "main",
@@ -34,8 +34,8 @@ jobs:
               }
             ]
           extra_plugins: |
-            "@semantic-release/commit-analyzer"
-            "@semantic-release/release-notes-generator"
+            "@semantic-release/commit-analyzer@9.0.2"
+            "@semantic-release/release-notes-generator@10.0.3"
             "@semantic-release/github"
         env:
           GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}

From c79e350e90f48c6be3bc722f893331509c349efd Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Tue, 11 Jul 2023 13:52:53 +0300
Subject: [PATCH 69/69] chore: incremental

---
 .github/workflows/main.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index d610fa10f..1f5b8ffa6 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -36,7 +36,7 @@ jobs:
           extra_plugins: |
             "@semantic-release/commit-analyzer@9.0.2"
             "@semantic-release/release-notes-generator@10.0.3"
-            "@semantic-release/github"
+            "@semantic-release/github@8.1.0"
         env:
           GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
           RUNNER_DEBUG: 1