From f12bb1fb9c2f6019e94c90be7a1b49340a1021f7 Mon Sep 17 00:00:00 2001
From: atrincas <atrincas@gmail.com>
Date: Mon, 2 Dec 2024 13:37:40 +0100
Subject: [PATCH] Initial setup AnnualProjectCashFlow

---
 client/package.json                           |   1 +
 client/src/app/globals.css                    |  39 +-
 client/src/app/projects/[id]/store.ts         |   8 +-
 client/src/components/ui/chart.tsx            | 368 ++++++++
 client/src/components/ui/metric.tsx           |   2 +-
 .../annual-project-cash-flow/chart/index.tsx  | 161 ++++
 .../header/tabs/index.tsx                     |   8 +-
 .../annual-project-cash-flow/index.tsx        |   9 +-
 .../table/columns.tsx                         |  56 ++
 .../annual-project-cash-flow/table/index.tsx  | 124 +++
 .../custom-project/cost-details/index.tsx     |  11 +-
 .../cost-details/parameters/index.tsx         |  30 +-
 .../cost-details/table/columns.tsx            |  12 +-
 .../cost-details/table/index.tsx              |  40 +-
 .../projects/custom-project/cost/index.tsx    |  17 +-
 .../projects/custom-project/details/index.tsx |  10 +-
 .../projects/custom-project/index.tsx         |  45 +-
 .../custom-project/left-over/index.tsx        |  18 +-
 .../projects/custom-project/mock-data.ts      | 819 ++++++++++++++----
 .../projects/custom-project/summary/index.tsx |  47 +-
 pnpm-lock.yaml                                |  80 ++
 21 files changed, 1611 insertions(+), 294 deletions(-)
 create mode 100644 client/src/components/ui/chart.tsx
 create mode 100644 client/src/containers/projects/custom-project/annual-project-cash-flow/chart/index.tsx
 create mode 100644 client/src/containers/projects/custom-project/annual-project-cash-flow/table/columns.tsx
 create mode 100644 client/src/containers/projects/custom-project/annual-project-cash-flow/table/index.tsx

diff --git a/client/package.json b/client/package.json
index af4d39cf..377dd005 100644
--- a/client/package.json
+++ b/client/package.json
@@ -49,6 +49,7 @@
     "react-dropzone": "^14.3.5",
     "react-map-gl": "7.1.7",
     "react-resizable-panels": "2.1.6",
+    "recharts": "^2.13.3",
     "rooks": "7.14.1",
     "tailwind-merge": "2.5.3",
     "tailwindcss-animate": "1.0.7",
diff --git a/client/src/app/globals.css b/client/src/app/globals.css
index bae7e2b4..49ff070b 100644
--- a/client/src/app/globals.css
+++ b/client/src/app/globals.css
@@ -4,7 +4,6 @@
 @tailwind components;
 @tailwind utilities;
 
-
 body {
   font-family: Arial, Helvetica, sans-serif;
 }
@@ -50,6 +49,11 @@ body {
     --sidebar-accent-foreground: 192, 86%, 69%;
     --sidebar-border: 220 13% 91%;
     --sidebar-ring: 212, 57%, 24%;
+    --chart-1: 150 43% 61%;
+    --chart-2: 194 88% 43%;
+    --chart-3: 191 87% 82%;
+    --chart-4: 50 80% 58%;
+    --chart-5: 213 73% 97%;
   }
 }
 
@@ -65,31 +69,52 @@ body {
 /* mapbox styles */
 .mapboxgl-popup-anchor-top {
   .mapboxgl-popup-tip {
-    @apply !border-b-popover !z-10 relative;
+    @apply relative !z-10 !border-b-popover;
   }
 }
 
 .mapboxgl-popup-anchor-bottom {
   .mapboxgl-popup-tip {
-    @apply !border-t-popover !z-10 relative;
+    @apply relative !z-10 !border-t-popover;
   }
 }
 
 .mapboxgl-popup-anchor-left {
   .mapboxgl-popup-tip {
-    @apply !border-r-popover !z-10 relative;
+    @apply relative !z-10 !border-r-popover;
   }
 }
 
 .mapboxgl-popup-anchor-right {
   .mapboxgl-popup-tip {
-    @apply !border-l-popover !z-10 relative;
+    @apply relative !z-10 !border-l-popover;
   }
 }
 
 .mapboxgl-popup-content {
-  @apply !bg-popover !rounded-md border border-border text-big-stone-50 shadow-md;
+  @apply !rounded-md border border-border !bg-popover text-big-stone-50 shadow-md;
 }
 .mapboxgl-popup-close-button {
   @apply hidden;
-}
\ No newline at end of file
+}
+
+/* cashflow chart */
+.cashflow-chart {
+  .recharts-cartesian-grid-vertical line {
+    stroke-dasharray: 3, 3;
+
+    &:nth-last-child(1),
+    &:nth-last-child(2) {
+      stroke: transparent;
+    }
+  }
+
+  .recharts-cartesian-grid-horizontal line {
+    stroke-dasharray: 0;
+
+    &:first-of-type,
+    &:last-of-type {
+      stroke: transparent;
+    }
+  }
+}
diff --git a/client/src/app/projects/[id]/store.ts b/client/src/app/projects/[id]/store.ts
index 9eb5bf4e..c174aea4 100644
--- a/client/src/app/projects/[id]/store.ts
+++ b/client/src/app/projects/[id]/store.ts
@@ -1,3 +1,4 @@
+import { COST_TYPE_SELECTOR } from "@shared/entities/projects.entity";
 import { atom } from "jotai";
 import { parseAsStringLiteral, useQueryState } from "nuqs";
 
@@ -9,10 +10,13 @@ export const projectsUIState = atom<{
   projectSummaryOpen: false,
 });
 export const showCostDetailsAtom = atom<boolean>(false);
+export const costDetailsFilterAtom = atom<COST_TYPE_SELECTOR>(
+  COST_TYPE_SELECTOR.TOTAL,
+);
 
-export function useProjectCashFlowView() {
+export function useProjectCashFlowTab() {
   return useQueryState(
-    "cashflow",
+    "cashflowTab",
     parseAsStringLiteral(CASH_FLOW_VIEWS).withDefault("chart"),
   );
 }
diff --git a/client/src/components/ui/chart.tsx b/client/src/components/ui/chart.tsx
new file mode 100644
index 00000000..f0f6dd73
--- /dev/null
+++ b/client/src/components/ui/chart.tsx
@@ -0,0 +1,368 @@
+"use client";
+
+import * as React from "react";
+
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "@/lib/utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+
+  return context;
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"];
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});
+ChartContainer.displayName = "Chart";
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color,
+  );
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`,
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean;
+      hideIndicator?: boolean;
+      hideIcon?: boolean;
+      indicator?: "line" | "dot" | "dashed";
+      nameKey?: string;
+      labelKey?: string;
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      hideIcon = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+
+      const [item] = payload;
+      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label;
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        );
+      }
+
+      if (!value) {
+        return null;
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ]);
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className,
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center",
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon && !hideIcon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            },
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center",
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  },
+);
+ChartTooltipContent.displayName = "ChartTooltip";
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    if (!payload?.length) {
+      return null;
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className,
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          );
+        })}
+      </div>
+    );
+  },
+);
+ChartLegendContent.displayName = "ChartLegend";
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};
diff --git a/client/src/components/ui/metric.tsx b/client/src/components/ui/metric.tsx
index 1ce02697..d03b95a7 100644
--- a/client/src/components/ui/metric.tsx
+++ b/client/src/components/ui/metric.tsx
@@ -8,7 +8,7 @@ interface MetricProps {
   /** The numeric value to display
    * undefined -> renders "-"
    */
-  value?: number;
+  value?: number | null;
   /** Unit to display (e.g. "kg", "%", "m²") */
   unit: string;
   /** Optional CSS classes to apply to the wrapper */
diff --git a/client/src/containers/projects/custom-project/annual-project-cash-flow/chart/index.tsx b/client/src/containers/projects/custom-project/annual-project-cash-flow/chart/index.tsx
new file mode 100644
index 00000000..f19d327e
--- /dev/null
+++ b/client/src/containers/projects/custom-project/annual-project-cash-flow/chart/index.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import { FC } from "react";
+
+import {
+  Bar,
+  CartesianGrid,
+  ComposedChart,
+  Line,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { formatCurrency } from "@/lib/format";
+
+import { chartData } from "@/containers/projects/custom-project/annual-project-cash-flow/table/columns";
+
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+
+const CHART_COLORS = {
+  estimatedRevenue: "hsl(var(--chart-1))",
+  totalOpEx: "hsl(var(--chart-2))",
+  annualNetCashFlow: "hsl(var(--chart-3))",
+  revenueOpEx: "hsl(var(--chart-4))",
+} as const;
+
+const CashflowChart: FC = () => {
+  return (
+    <ChartContainer
+      config={{
+        estimatedRevenue: {
+          label: "Est revenue",
+          color: "hsl(var(--chart-1))",
+        },
+        totalOpEx: {
+          label: "Total OpEx",
+          color: "hsl(var(--chart-2))",
+        },
+        annualNetCashFlow: {
+          label: "Annual net cash flow",
+          color: "hsl(var(--chart-3))",
+          icon: () => <div className="h-[3px] w-[24px] bg-chart-3" />,
+        },
+        revenueOpEx: {
+          label: "Revenue OpEx",
+          color: "hsl(var(--chart-4))",
+          icon: () => <div className="h-[3px] w-[24px] bg-chart-4" />,
+        },
+      }}
+      className="cashflow-chart min-h-[200px] w-full"
+    >
+      <ComposedChart data={chartData} stackOffset="sign" accessibilityLayer>
+        <CartesianGrid
+          stroke="#194760"
+          strokeDasharray="0 0"
+          horizontal={true}
+          vertical={true}
+        />
+        <YAxis
+          axisLine={false}
+          tickLine={false}
+          tickFormatter={(value) => `${(value / 1000000).toFixed(1)}M`}
+        />
+
+        <ChartLegend
+          content={
+            <ChartLegendContent className="bg-big-stone-950/60 py-2 backdrop-blur-[2px]" />
+          }
+        />
+        <Bar
+          stackId="a"
+          dataKey="estimatedRevenue"
+          fill={CHART_COLORS.estimatedRevenue}
+          radius={[6, 6, 0, 0]}
+        />
+        <Bar
+          stackId="a"
+          dataKey="totalOpEx"
+          fill={CHART_COLORS.totalOpEx}
+          radius={[6, 6, 0, 0]}
+        />
+        <Line
+          type="linear"
+          dataKey="annualNetCashFlow"
+          stroke={CHART_COLORS.annualNetCashFlow}
+          dot={false}
+          strokeWidth={2}
+        />
+        <Line
+          type="linear"
+          dataKey="revenueOpEx"
+          stroke={CHART_COLORS.revenueOpEx}
+          dot={false}
+          strokeWidth={2}
+        />
+        <XAxis
+          dataKey="year"
+          tickLine={false}
+          axisLine={false}
+          className="-translate-y-[100%]"
+          tick={(props) => {
+            const { x, y, payload } = props;
+
+            // Not sure if needed, and from which number to count?
+            if (payload.value < 0) return <g></g>;
+
+            return (
+              <g transform={`translate(${x + 10},${y + 60})`}>
+                <foreignObject
+                  x="0"
+                  y="4"
+                  width="1"
+                  height="1"
+                  style={{
+                    overflow: "visible",
+                  }}
+                >
+                  <p className="inline-flex items-center justify-center gap-0.5 rounded-sm bg-big-stone-950/60 px-2 py-1 text-white backdrop-blur-[2px]">
+                    <span>{payload.value}</span>
+                  </p>
+                </foreignObject>
+              </g>
+            );
+          }}
+        />
+        <ChartTooltip
+          cursor={false}
+          content={
+            <ChartTooltipContent
+              indicator="dot"
+              className="border-border"
+              formatter={(v, n) => {
+                return (
+                  <p className="inline-flex w-full justify-between gap-2">
+                    <span className="text-muted-foreground">{n}</span>
+                    <span className="font-normal">
+                      {formatCurrency(v as number, {
+                        maximumFractionDigits: 0,
+                      })}
+                    </span>
+                  </p>
+                );
+              }}
+              hideIndicator
+              hideIcon
+              hideLabel
+            />
+          }
+        />
+      </ComposedChart>
+    </ChartContainer>
+  );
+};
+
+export default CashflowChart;
diff --git a/client/src/containers/projects/custom-project/annual-project-cash-flow/header/tabs/index.tsx b/client/src/containers/projects/custom-project/annual-project-cash-flow/header/tabs/index.tsx
index e7cbfb97..05acaf9d 100644
--- a/client/src/containers/projects/custom-project/annual-project-cash-flow/header/tabs/index.tsx
+++ b/client/src/containers/projects/custom-project/annual-project-cash-flow/header/tabs/index.tsx
@@ -1,6 +1,6 @@
 import { ChartNoAxesColumnIcon, Table2Icon } from "lucide-react";
 
-import { useProjectCashFlowView } from "@/app/projects/[id]/store";
+import { useProjectCashFlowTab } from "@/app/projects/[id]/store";
 
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
@@ -18,13 +18,13 @@ export const CASH_FLOW_TABS = [
 ] as const;
 
 export default function CashFlowTabs() {
-  const [view, setView] = useProjectCashFlowView();
+  const [tab, setTab] = useProjectCashFlowTab();
 
   return (
     <Tabs
-      defaultValue={view}
+      defaultValue={tab}
       onValueChange={async (v) => {
-        await setView(v as typeof view);
+        await setTab(v as typeof tab);
       }}
     >
       <TabsList>
diff --git a/client/src/containers/projects/custom-project/annual-project-cash-flow/index.tsx b/client/src/containers/projects/custom-project/annual-project-cash-flow/index.tsx
index 62645ffd..6d687291 100644
--- a/client/src/containers/projects/custom-project/annual-project-cash-flow/index.tsx
+++ b/client/src/containers/projects/custom-project/annual-project-cash-flow/index.tsx
@@ -1,13 +1,20 @@
 import { FC } from "react";
 
+import { useProjectCashFlowTab } from "@/app/projects/[id]/store";
+
+import CashflowChart from "@/containers/projects/custom-project/annual-project-cash-flow/chart";
 import Header from "@/containers/projects/custom-project/annual-project-cash-flow/header";
+import CashFlowTable from "@/containers/projects/custom-project/annual-project-cash-flow/table";
 
 import { Card } from "@/components/ui/card";
 
 const AnnualProjectCashFlow: FC = () => {
+  const [tab] = useProjectCashFlowTab();
+
   return (
-    <Card variant="secondary" className="p-0">
+    <Card variant="secondary" className="flex flex-col p-0">
       <Header />
+      {tab === "table" ? <CashFlowTable /> : <CashflowChart />}
     </Card>
   );
 };
diff --git a/client/src/containers/projects/custom-project/annual-project-cash-flow/table/columns.tsx b/client/src/containers/projects/custom-project/annual-project-cash-flow/table/columns.tsx
new file mode 100644
index 00000000..922e5f24
--- /dev/null
+++ b/client/src/containers/projects/custom-project/annual-project-cash-flow/table/columns.tsx
@@ -0,0 +1,56 @@
+import { createColumnHelper } from "@tanstack/react-table";
+
+import { formatCurrency } from "@/lib/format";
+
+import mockData from "@/containers/projects/custom-project/mock-data";
+
+const YEARS = [
+  -4, -3, -2, -1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,
+] as const;
+
+interface CostValues {
+  [key: string]: number;
+}
+
+interface TableRow {
+  costName: string;
+  totalCost: number;
+  totalNPV: number;
+  costValues: CostValues;
+}
+
+const getRandomNumber = (type?: "negative" | "positive"): number => {
+  if (!type)
+    return Math.sign(Math.random() - 0.5) * Math.round(Math.random() * 5000000);
+
+  if (type === "negative") return Math.round(Math.random() * -5000000);
+
+  return Math.round(Math.random() * 5000000);
+};
+
+const columnHelper = createColumnHelper<TableRow>();
+
+export const chartData = YEARS.map((y) => ({
+  year: y,
+  estimatedRevenue: getRandomNumber("negative"),
+  totalOpEx: getRandomNumber("positive"),
+  annualNetCashFlow: getRandomNumber(),
+  revenueOpEx: getRandomNumber(),
+}));
+export const tableData = mockData.data.yearlyBreakdown;
+
+export const columns = [
+  columnHelper.accessor("costName", {
+    header: () => <span>Project</span>,
+  }),
+  ...YEARS.map((year) =>
+    columnHelper.accessor(`costValues.${year}`, {
+      header: () => <span>{year}</span>,
+      cell: (info) => (
+        <span className="text-center">
+          {formatCurrency(info.getValue(), { maximumFractionDigits: 0 })}
+        </span>
+      ),
+    }),
+  ),
+];
diff --git a/client/src/containers/projects/custom-project/annual-project-cash-flow/table/index.tsx b/client/src/containers/projects/custom-project/annual-project-cash-flow/table/index.tsx
new file mode 100644
index 00000000..bda917a8
--- /dev/null
+++ b/client/src/containers/projects/custom-project/annual-project-cash-flow/table/index.tsx
@@ -0,0 +1,124 @@
+import { FC, useState } from "react";
+
+import {
+  flexRender,
+  getCoreRowModel,
+  PaginationState,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import { cn } from "@/lib/utils";
+
+import {
+  tableData,
+  columns,
+} from "@/containers/projects/custom-project/annual-project-cash-flow/table/columns";
+
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import {
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination, {
+  PAGINATION_SIZE_OPTIONS,
+} from "@/components/ui/table-pagination";
+
+const CashFlowTable: FC = () => {
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: Number.parseInt(PAGINATION_SIZE_OPTIONS[0]),
+  });
+  const table = useReactTable({
+    data: tableData,
+    columns: columns,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    state: {
+      pagination,
+    },
+    onPaginationChange: setPagination,
+  });
+
+  return (
+    <div className="relative flex h-full flex-1 flex-col overflow-hidden">
+      <ScrollArea className="scroll-x-auto w-full">
+        <div className="table h-full w-full table-fixed">
+          <table className="w-full caption-bottom text-sm">
+            <TableHeader className="sticky top-0">
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id} className="divide-background">
+                  {headerGroup.headers.map((header) => {
+                    return (
+                      <TableHead
+                        key={header.id}
+                        className={cn({
+                          "text-xs font-normal": true,
+                          "text-center": header.id !== "label",
+                        })}
+                      >
+                        {flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                      </TableHead>
+                    );
+                  })}
+                </TableRow>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow key={row.id} className="divide-x-0">
+                    {row.getVisibleCells().map((cell, index) => (
+                      <TableCell
+                        key={cell.id}
+                        className="px-2 py-2.5"
+                        style={
+                          index > 0
+                            ? {
+                                minWidth: cell.column.columnDef.size,
+                                maxWidth: cell.column.columnDef.size,
+                              }
+                            : undefined
+                        }
+                      >
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext(),
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell
+                    colSpan={columns.length}
+                    className="h-24 text-center"
+                  >
+                    No results.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </table>
+          <ScrollBar orientation="horizontal" className="" />
+        </div>
+      </ScrollArea>
+      <TablePagination
+        onChangePagination={setPagination}
+        pagination={{
+          ...pagination,
+          totalPages: 0,
+          totalItems: tableData.length,
+        }}
+      />
+    </div>
+  );
+};
+
+export default CashFlowTable;
diff --git a/client/src/containers/projects/custom-project/cost-details/index.tsx b/client/src/containers/projects/custom-project/cost-details/index.tsx
index 5a4f2cc0..07c1a194 100644
--- a/client/src/containers/projects/custom-project/cost-details/index.tsx
+++ b/client/src/containers/projects/custom-project/cost-details/index.tsx
@@ -15,7 +15,14 @@ import {
   SheetTitle,
 } from "@/components/ui/sheet";
 
-const CostDetails: FC = () => {
+interface CostDetailsProps {
+  data: {
+    costName: string;
+    label: string;
+    value: string;
+  }[];
+}
+const CostDetails: FC<CostDetailsProps> = ({ data }) => {
   const [isVisible, setIsVisible] = useAtom(showCostDetailsAtom);
 
   return (
@@ -28,7 +35,7 @@ const CostDetails: FC = () => {
           </SheetTitle>
         </SheetHeader>
         <CostDetailsParameters />
-        <CostDetailTable />
+        <CostDetailTable data={data} />
       </SheetContent>
     </Sheet>
   );
diff --git a/client/src/containers/projects/custom-project/cost-details/parameters/index.tsx b/client/src/containers/projects/custom-project/cost-details/parameters/index.tsx
index 14efdaa6..0a995a26 100644
--- a/client/src/containers/projects/custom-project/cost-details/parameters/index.tsx
+++ b/client/src/containers/projects/custom-project/cost-details/parameters/index.tsx
@@ -1,6 +1,8 @@
 import { COST_TYPE_SELECTOR } from "@shared/entities/projects.entity";
+import { useAtom } from "jotai";
 
 import { FILTER_KEYS } from "@/app/(overview)/constants";
+import { costDetailsFilterAtom } from "@/app/projects/[id]/store";
 
 import { Label } from "@/components/ui/label";
 import {
@@ -15,7 +17,7 @@ const PARAMETERS = [
   {
     key: FILTER_KEYS[3],
     label: "Cost type",
-    className: "w-full",
+    className: "",
     options: [
       {
         label: COST_TYPE_SELECTOR.TOTAL,
@@ -27,38 +29,20 @@ const PARAMETERS = [
       },
     ],
   },
-  {
-    key: "carbon-price-type",
-    label: "Carbon pricing type",
-    className: "w-full",
-    options: [
-      {
-        label: "Initial carbon price assumption",
-        value: "mock",
-      },
-    ],
-  },
 ] as const;
 
 export default function CostDetailsParameters() {
-  // const handleParameters = async (
-  //   v: string,
-  //   // parameter: keyof Omit<z.infer<typeof filtersSchema>, "keyword">,
-  // ) => {
-  //   // TODO
-  // };
+  const [filter, setFilter] = useAtom(costDetailsFilterAtom);
 
   return (
     <div className="flex items-center space-x-4">
       {PARAMETERS.map((parameter) => (
-        <div key={parameter.label} className="flex items-center space-x-2">
+        <div key={parameter.label} className="flex items-center gap-2">
           <Label htmlFor={parameter.label}>{parameter.label}</Label>
           <Select
             name={parameter.label}
-            // defaultValue={filters[parameter.key]}
-            // onValueChange={(v) => {
-            // handleParameters(v, parameter.key);
-            // }}
+            value={filter}
+            onValueChange={(v) => setFilter(v as COST_TYPE_SELECTOR)}
           >
             <SelectTrigger className={parameter.className}>
               <SelectValue />
diff --git a/client/src/containers/projects/custom-project/cost-details/table/columns.tsx b/client/src/containers/projects/custom-project/cost-details/table/columns.tsx
index 6ef7cc89..8796e822 100644
--- a/client/src/containers/projects/custom-project/cost-details/table/columns.tsx
+++ b/client/src/containers/projects/custom-project/cost-details/table/columns.tsx
@@ -1,8 +1,10 @@
 import { createColumnHelper } from "@tanstack/react-table";
 
-import { CostItem } from "@/containers/projects/custom-project/cost-details/table";
-
-const columnHelper = createColumnHelper<CostItem>();
+const columnHelper = createColumnHelper<{
+  costName: string;
+  label: string;
+  value: string;
+}>();
 
 export const columns = [
   columnHelper.accessor("label", {
@@ -13,8 +15,4 @@ export const columns = [
     enableSorting: true,
     header: () => <span>Cost $/tCo2</span>,
   }),
-  columnHelper.accessor("value", {
-    enableSorting: true,
-    header: () => <span>Sensitive analysis</span>,
-  }),
 ];
diff --git a/client/src/containers/projects/custom-project/cost-details/table/index.tsx b/client/src/containers/projects/custom-project/cost-details/table/index.tsx
index 1b3d938a..f8cdb06c 100644
--- a/client/src/containers/projects/custom-project/cost-details/table/index.tsx
+++ b/client/src/containers/projects/custom-project/cost-details/table/index.tsx
@@ -13,7 +13,6 @@ import { ChevronsUpDownIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 import { columns } from "@/containers/projects/custom-project/cost-details/table/columns";
-import mockData from "@/containers/projects/custom-project/mock-data";
 
 import {
   Table,
@@ -30,10 +29,17 @@ export interface CostItem {
   value: number;
 }
 
-const CostDetailTable: FC = () => {
+interface CostDetailTableProps {
+  data: {
+    costName: string;
+    label: string;
+    value: string;
+  }[];
+}
+const CostDetailTable: FC<CostDetailTableProps> = ({ data }) => {
   const [sorting, setSorting] = useState<SortingState>([]);
   const table = useReactTable({
-    data: mockData.costDetails,
+    data,
     columns,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
@@ -99,16 +105,28 @@ const CostDetailTable: FC = () => {
                 className={cn({
                   "divide-background border-b-background": true,
                   "bg-big-stone-950 hover:bg-big-stone-950":
-                    row.original.name === "capitalExpenditure" ||
-                    row.original.name === "operatingExpenditure" ||
-                    row.original.name === "totalCost",
+                    row.original.costName === "capitalExpenditure" ||
+                    row.original.costName === "operatingExpenditure" ||
+                    row.original.costName === "totalCost",
                 })}
               >
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TableCell>
-                ))}
+                {row.getVisibleCells().map((cell) => {
+                  console.log(cell);
+                  return (
+                    <TableCell
+                      key={cell.id}
+                      className={cn({
+                        "px-4": cell.column.id === "value",
+                        "text-big-stone-200": cell.column.id === "label",
+                      })}
+                    >
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  );
+                })}
               </TableRow>
             ))
           ) : (
diff --git a/client/src/containers/projects/custom-project/cost/index.tsx b/client/src/containers/projects/custom-project/cost/index.tsx
index 27323722..8be1c996 100644
--- a/client/src/containers/projects/custom-project/cost/index.tsx
+++ b/client/src/containers/projects/custom-project/cost/index.tsx
@@ -6,14 +6,17 @@ import { renderCurrency } from "@/lib/format";
 
 import { showCostDetailsAtom } from "@/app/projects/[id]/store";
 
-import mockData from "@/containers/projects/custom-project/mock-data";
-
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Graph, GraphLegend } from "@/components/ui/graph";
 import { Label } from "@/components/ui/label";
 
-const ProjectCost: FC = () => {
+interface ProjectCostProps {
+  total: number;
+  capex: number;
+  opex: number;
+}
+const ProjectCost: FC<ProjectCostProps> = ({ total, capex, opex }) => {
   const setShowCostDetails = useSetAtom(showCostDetailsAtom);
 
   return (
@@ -53,7 +56,7 @@ const ProjectCost: FC = () => {
           <div className="flex max-w-[148px] flex-1 flex-col justify-between">
             <div>
               <span className="text-xl font-normal">
-                {renderCurrency(mockData.totalCost)}
+                {renderCurrency(total)}
               </span>
             </div>
             <GraphLegend
@@ -72,14 +75,14 @@ const ProjectCost: FC = () => {
             />
           </div>
           <Graph
-            total={mockData.totalCost}
+            total={total}
             segments={[
               {
-                value: mockData.capEx,
+                value: capex,
                 colorClass: "bg-sky-blue-500",
               },
               {
-                value: mockData.opExRevenue,
+                value: opex,
                 colorClass: "bg-sky-blue-200",
               },
             ]}
diff --git a/client/src/containers/projects/custom-project/details/index.tsx b/client/src/containers/projects/custom-project/details/index.tsx
index 2bfbd5e6..73c1de40 100644
--- a/client/src/containers/projects/custom-project/details/index.tsx
+++ b/client/src/containers/projects/custom-project/details/index.tsx
@@ -20,9 +20,9 @@ interface ProjectDetailsProps {
   carbonRevenuesToCover: CARBON_REVENUES_TO_COVER;
   initialCarbonPrice: number;
   emissionFactors: {
-    emissionFactor: number;
-    emissionFactorAGB: number;
-    emissionFactorSOC: number;
+    emissionFactor: number | null;
+    emissionFactorAgb: number;
+    emissionFactorSoc: number;
   };
 }
 
@@ -94,12 +94,12 @@ const ProjectDetails: FC<ProjectDetailsProps> = ({
             subValues={[
               {
                 label: "AGB",
-                value: emissionFactors.emissionFactorAGB,
+                value: emissionFactors.emissionFactorAgb,
                 unit: "tCO2e/ha/yr",
               },
               {
                 label: "SOC",
-                value: emissionFactors.emissionFactorSOC,
+                value: emissionFactors.emissionFactorSoc,
                 unit: "tCO2e/ha/yr",
               },
             ]}
diff --git a/client/src/containers/projects/custom-project/index.tsx b/client/src/containers/projects/custom-project/index.tsx
index 6bd9f827..97cb8fa7 100644
--- a/client/src/containers/projects/custom-project/index.tsx
+++ b/client/src/containers/projects/custom-project/index.tsx
@@ -5,7 +5,10 @@ import { motion } from "framer-motion";
 import { useAtomValue } from "jotai";
 
 import { LAYOUT_TRANSITIONS } from "@/app/(overview)/constants";
-import { projectsUIState } from "@/app/projects/[id]/store";
+import {
+  costDetailsFilterAtom,
+  projectsUIState,
+} from "@/app/projects/[id]/store";
 
 import AnnualProjectCashFlow from "@/containers/projects/custom-project/annual-project-cash-flow";
 import ProjectCost from "@/containers/projects/custom-project/cost";
@@ -15,8 +18,10 @@ import CustomProjectHeader from "@/containers/projects/custom-project/header";
 import LeftOver from "@/containers/projects/custom-project/left-over";
 import mockData from "@/containers/projects/custom-project/mock-data";
 import ProjectSummary from "@/containers/projects/custom-project/summary";
+import { useCustomProjectFilters } from "@/containers/projects/url-store";
 
 import { useSidebar } from "@/components/ui/sidebar";
+import { formatCurrency } from "@/lib/format";
 
 const {
   country,
@@ -28,11 +33,37 @@ const {
   carbonRevenuesToCover,
   initialCarbonPrice,
   emissionFactors,
-} = mockData;
-export const SUMMARY_SIDEBAR_WIDTH = 400;
+  totalProjectCost,
+  summary,
+  costDetails,
+  leftover,
+} = mockData.data;
+const costDetailsData = {
+  total: Object.keys(costDetails.total).map((k) => ({
+    costName: k,
+    label: k,
+    value: formatCurrency(
+      costDetails.total[k as keyof typeof costDetails.total],
+      { maximumFractionDigits: 0 },
+    ),
+  })),
+  npv: Object.keys(costDetails.npv).map((k) => ({
+    costName: k,
+    label: k,
+    value: formatCurrency(costDetails.npv[k as keyof typeof costDetails.npv], {
+      maximumFractionDigits: 0,
+    }),
+  })),
+};
+export const SUMMARY_SIDEBAR_WIDTH = 460;
 const CustomProject: FC = () => {
+  const [{ costRangeSelector }] = useCustomProjectFilters();
+  const costDetailsRangeSelector = useAtomValue(costDetailsFilterAtom);
   const { projectSummaryOpen } = useAtomValue(projectsUIState);
   const { open: navOpen } = useSidebar();
+  const projectCostProps = totalProjectCost[costRangeSelector];
+  const costDetailsProps = costDetailsData[costDetailsRangeSelector];
+  const leftOverProps = leftover[costRangeSelector];
 
   return (
     <motion.div
@@ -56,7 +87,7 @@ const CustomProject: FC = () => {
         transition={LAYOUT_TRANSITIONS}
         className="overflow-hidden"
       >
-        <ProjectSummary />
+        <ProjectSummary data={summary} />
       </motion.aside>
       <div className="mx-3 flex flex-1 flex-col">
         <CustomProjectHeader />
@@ -72,9 +103,9 @@ const CustomProject: FC = () => {
             initialCarbonPrice={initialCarbonPrice}
             emissionFactors={emissionFactors}
           />
-          <ProjectCost />
-          <LeftOver />
-          <CostDetails />
+          <ProjectCost {...projectCostProps} />
+          <LeftOver {...leftOverProps} />
+          <CostDetails data={costDetailsProps} />
         </div>
         <AnnualProjectCashFlow />
       </div>
diff --git a/client/src/containers/projects/custom-project/left-over/index.tsx b/client/src/containers/projects/custom-project/left-over/index.tsx
index 9385996e..2a3d8229 100644
--- a/client/src/containers/projects/custom-project/left-over/index.tsx
+++ b/client/src/containers/projects/custom-project/left-over/index.tsx
@@ -2,13 +2,17 @@ import { FC } from "react";
 
 import { renderCurrency } from "@/lib/format";
 
-import mockData from "@/containers/projects/custom-project/mock-data";
-
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Graph, GraphLegend } from "@/components/ui/graph";
 import { Label } from "@/components/ui/label";
 
-const LeftOver: FC = () => {
+interface LeftoverProps {
+  total: number;
+  leftover: number;
+  opex: number;
+}
+
+const LeftOver: FC<LeftoverProps> = ({ total, leftover, opex }) => {
   return (
     <Card variant="secondary" className="flex-1 p-0">
       <CardHeader className="p-4">
@@ -38,7 +42,7 @@ const LeftOver: FC = () => {
           <div className="flex max-w-[148px] flex-1 flex-col justify-between">
             <div>
               <span className="text-xl font-normal">
-                {renderCurrency(mockData.leftover)}
+                {renderCurrency(leftover)}
               </span>
             </div>
             <GraphLegend
@@ -57,14 +61,14 @@ const LeftOver: FC = () => {
             />
           </div>
           <Graph
-            total={mockData.totalRevenue}
+            total={total}
             segments={[
               {
-                value: mockData.opExRevenue,
+                value: opex,
                 colorClass: "bg-sky-blue-200",
               },
             ]}
-            leftover={mockData.leftover}
+            leftover={leftover}
           />
         </div>
       </CardContent>
diff --git a/client/src/containers/projects/custom-project/mock-data.ts b/client/src/containers/projects/custom-project/mock-data.ts
index 4031ac51..4d97248b 100644
--- a/client/src/containers/projects/custom-project/mock-data.ts
+++ b/client/src/containers/projects/custom-project/mock-data.ts
@@ -1,216 +1,655 @@
-import {
-  ACTIVITY,
-  RESTORATION_ACTIVITY_SUBTYPE,
-} from "@shared/entities/activity.enum";
+import { ACTIVITY } from "@shared/entities/activity.enum";
 import { CARBON_REVENUES_TO_COVER } from "@shared/entities/custom-project.entity";
 import { ECOSYSTEM } from "@shared/entities/ecosystem.enum";
 
-// TODO: tooltip info will go to constants/tooltip-info.ts
-const tooltip = {
-  title: "Info",
-  content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-};
-
 const mockData = {
-  country: { code: "ID", name: "Indonesia" },
-  projectSize: 20,
-  projectLength: 20,
-  ecosystem: ECOSYSTEM.SEAGRASS,
-  activity: ACTIVITY.CONSERVATION,
-  subActivity: RESTORATION_ACTIVITY_SUBTYPE.HYBRID,
-  lossRate: -0.1,
-  carbonRevenuesToCover: CARBON_REVENUES_TO_COVER.OPEX,
-  initialCarbonPrice: 30,
-  totalCost: 38023789,
-  capEx: 1500000,
-  opEx: 36500000,
-  leftover: 4106132,
-  totalRevenue: 40600000,
-  opExRevenue: 36500000,
-  emissionFactors: {
-    emissionFactor: 355,
-    emissionFactorAGB: 355,
-    emissionFactorSOC: 72,
-  },
-  details: [
-    [
+  data: {
+    projectName: "My custom project",
+    country: { code: "IND", name: "India" },
+    projectSize: 1000,
+    projectLength: 20,
+    ecosystem: "Mangrove" as ECOSYSTEM,
+    activity: "Conservation" as ACTIVITY,
+    lossRate: -0.0016,
+    carbonRevenuesToCover: "Opex" as CARBON_REVENUES_TO_COVER,
+    initialCarbonPrice: 1000,
+    emissionFactors: {
+      emissionFactor: null,
+      emissionFactorAgb: 67.7,
+      emissionFactorSoc: 85.5,
+    },
+    totalProjectCost: {
+      total: {
+        total: 3332201.598883546,
+        capex: 1600616.6666666667,
+        opex: 1731584.9322168794,
+      },
+      npv: {
+        total: 2503854.27918858,
+        capex: 1505525.2721514185,
+        opex: 998329.0070371614,
+      },
+    },
+    leftover: {
+      total: {
+        total: 30600000,
+        leftover: 4100000,
+        opex: 26500000,
+      },
+      npv: {
+        total: 40600000,
+        leftover: 4106132,
+        opex: 36500000,
+      },
+    },
+    summary: {
+      "$/tCO2e (total cost, NPV": 61.470410294099835,
+      "$/ha": 2503.8542791885798,
+      "NPV covering cost": -493830.3621939037,
+      "Leftover after OpEx / total cost": null,
+      "IRR when priced to cover OpEx": 0.0560813585617166,
+      "IRR when priced to cover total cost": 85683156958.8259,
+      "Total cost (NPV)": 2503854.27918858,
+      "Capital expenditure (NPV)": 1505525.2721514185,
+      "Operating expenditure (NPV)": 998329.0070371614,
+      "Credits issued": 26038.815407423757,
+      "Total revenue (NPV)": 504498.6448432577,
+      "Total revenue (non-discounted)": 956754.3382707891,
+      "Financing cost": 80030.83333333334,
+      "Funding gap": 493830.3621939037,
+      "Funding gap (NPV)": 493830.3621939037,
+      "Funding gap per tCO2e (NPV)": 18.965162372675024,
+      "Community benefit sharing fund": 0.5,
+    },
+    costDetails: {
+      total: {
+        capitalExpenditure: 1600616.6666666667,
+        totalCost: 3201233.3333333335,
+        operationExpenditure: 1731584.9322168794,
+        feasibilityAnalysis: 50000,
+        conservationPlanningAndAdmin: 667066.6666666666,
+        dataCollectionAndFieldCost: 80000,
+        communityRepresentation: 213550,
+        blueCarbonProjectPlanning: 300000,
+        establishingCarbonRights: 140000,
+        validation: 50000,
+        implementationLabor: 100000,
+        monitoring: 300000,
+        maintenance: 0,
+        communityBenefitSharingFund: 478377.16913539456,
+        carbonStandardFees: 5207.763081484753,
+        baselineReassessment: 120000,
+        mrv: 300000,
+        longTermProjectOperatingCost: 528000,
+      },
+      npv: {
+        capitalExpenditure: 1505525.2721514185,
+        operationalExpenditure: 998329.0070371614,
+        totalCost: 2503854.27918858,
+        feasibilityAnalysis: 50000,
+        conservationPlanningAndAdmin: 629559.3479745106,
+        dataCollectionAndFieldCost: 76962.52465483235,
+        communityRepresentation: 197540.230048551,
+        blueCarbonProjectPlanning: 288609.4674556213,
+        establishingCarbonRights: 129504.24821726595,
+        validation: 44449.81793354574,
+        implementationLabor: 88899.63586709148,
+        monitoring: 181226.25950738514,
+        maintenance: 0,
+        communityBenefitSharingFund: 252249.32242162884,
+        carbonStandardFees: 2786.931340270489,
+        baselineReassessment: 75811.8711249392,
+        mrv: 167296.40590994002,
+        longTermProjectOperatingCost: 318958.2167329978,
+      },
+    },
+    yearlyBreakdown: [
       {
-        label: "Country",
-        value: "Indonesia",
-        countryCode: "ID",
+        costName: "feasibilityAnalysis",
+        totalCost: -50000,
+        totalNPV: -50000,
+        costValues: {
+          "0": 0,
+          "1": 0,
+          "2": 0,
+          "3": 0,
+          "4": 0,
+          "5": 0,
+          "6": 0,
+          "7": 0,
+          "8": 0,
+          "9": 0,
+          "10": 0,
+          "11": 0,
+          "12": 0,
+          "13": 0,
+          "14": 0,
+          "15": 0,
+          "16": 0,
+          "17": 0,
+          "18": 0,
+          "19": 0,
+          "20": 0,
+          "-4": -50000,
+          "-3": 0,
+          "-2": 0,
+          "-1": 0,
+        },
       },
       {
-        label: "Ecosystem",
-        value: "Seagrass",
+        costName: "conservationPlanningAndAdmin",
+        totalCost: -667066.6666666666,
+        totalNPV: -629559.3479745106,
+        costValues: {
+          "0": 0,
+          "1": 0,
+          "2": 0,
+          "3": 0,
+          "4": 0,
+          "5": 0,
+          "6": 0,
+          "7": 0,
+          "8": 0,
+          "9": 0,
+          "10": 0,
+          "11": 0,
+          "12": 0,
+          "13": 0,
+          "14": 0,
+          "15": 0,
+          "16": 0,
+          "17": 0,
+          "18": 0,
+          "19": 0,
+          "20": 0,
+          "-4": -166766.66666666666,
+          "-3": -166766.66666666666,
+          "-2": -166766.66666666666,
+          "-1": -166766.66666666666,
+        },
       },
       {
-        label: "Carbon revenues to cover",
-        value: "Only Opex",
+        costName: "dataCollectionAndFieldCost",
+        totalCost: -80000,
+        totalNPV: -76962.52465483235,
+        costValues: {
+          "0": 0,
+          "1": 0,
+          "2": 0,
+          "3": 0,
+          "4": 0,
+          "5": 0,
+          "6": 0,
+          "7": 0,
+          "8": 0,
+          "9": 0,
+          "10": 0,
+          "11": 0,
+          "12": 0,
+          "13": 0,
+          "14": 0,
+          "15": 0,
+          "16": 0,
+          "17": 0,
+          "18": 0,
+          "19": 0,
+          "20": 0,
+          "-4": -26666.666666666668,
+          "-3": -26666.666666666668,
+          "-2": -26666.666666666668,
+          "-1": 0,
+        },
       },
-    ],
-    [
       {
-        label: "Project size",
-        value: 20,
-        unit: "hectares",
+        costName: "blueCarbonProjectPlanning",
+        totalCost: -300000,
+        totalNPV: -288609.4674556213,
+        costValues: {
+          "0": 0,
+          "1": 0,
+          "2": 0,
+          "3": 0,
+          "4": 0,
+          "5": 0,
+          "6": 0,
+          "7": 0,
+          "8": 0,
+          "9": 0,
+          "10": 0,
+          "11": 0,
+          "12": 0,
+          "13": 0,
+          "14": 0,
+          "15": 0,
+          "16": 0,
+          "17": 0,
+          "18": 0,
+          "19": 0,
+          "20": 0,
+          "-4": -100000,
+          "-3": -100000,
+          "-2": -100000,
+          "-1": 0,
+        },
       },
       {
-        label: "Activity type",
-        value: "Conservation",
+        costName: "communityRepresentation",
+        totalCost: -213550,
+        totalNPV: -197540.230048551,
+        costValues: {
+          "0": 0,
+          "1": 0,
+          "2": 0,
+          "3": 0,
+          "4": 0,
+          "5": 0,
+          "6": 0,
+          "7": 0,
+          "8": 0,
+          "9": 0,
+          "10": 0,
+          "11": 0,
+          "12": 0,
+          "13": 0,
+          "14": 0,
+          "15": 0,
+          "16": 0,
+          "17": 0,
+          "18": 0,
+          "19": 0,
+          "20": 0,
+          "-4": 0,
+          "-3": -71183.33333333333,
+          "-2": -71183.33333333333,
+          "-1": -71183.33333333333,
+        },
       },
       {
-        label: "Initial carbon price",
-        value: 30,
-        unit: "$",
+        costName: "establishingCarbonRights",
+        totalCost: -140000,
+        totalNPV: -129504.24821726595,
+        costValues: {
+          "0": 0,
+          "1": 0,
+          "2": 0,
+          "3": 0,
+          "4": 0,
+          "5": 0,
+          "6": 0,
+          "7": 0,
+          "8": 0,
+          "9": 0,
+          "10": 0,
+          "11": 0,
+          "12": 0,
+          "13": 0,
+          "14": 0,
+          "15": 0,
+          "16": 0,
+          "17": 0,
+          "18": 0,
+          "19": 0,
+          "20": 0,
+          "-4": 0,
+          "-3": -46666.666666666664,
+          "-2": -46666.666666666664,
+          "-1": -46666.666666666664,
+        },
+      },
+      {
+        costName: "validation",
+        totalCost: -50000,
+        totalNPV: -44449.81793354574,
+        costValues: {
+          "0": 0,
+          "1": 0,
+          "2": 0,
+          "3": 0,
+          "4": 0,
+          "5": 0,
+          "6": 0,
+          "7": 0,
+          "8": 0,
+          "9": 0,
+          "10": 0,
+          "11": 0,
+          "12": 0,
+          "13": 0,
+          "14": 0,
+          "15": 0,
+          "16": 0,
+          "17": 0,
+          "18": 0,
+          "19": 0,
+          "20": 0,
+          "-4": 0,
+          "-3": 0,
+          "-2": 0,
+          "-1": -50000,
+        },
+      },
+      {
+        costName: "implementationLabor",
+        totalCost: -100000,
+        totalNPV: -88899.63586709148,
+        costValues: {
+          "0": 0,
+          "1": 0,
+          "2": 0,
+          "3": 0,
+          "4": 0,
+          "5": 0,
+          "6": 0,
+          "7": 0,
+          "8": 0,
+          "9": 0,
+          "10": 0,
+          "11": 0,
+          "12": 0,
+          "13": 0,
+          "14": 0,
+          "15": 0,
+          "16": 0,
+          "17": 0,
+          "18": 0,
+          "19": 0,
+          "20": 0,
+          "-4": 0,
+          "-3": 0,
+          "-2": 0,
+          "-1": -100000,
+        },
+      },
+      {
+        costName: "monitoring",
+        totalCost: -300000,
+        totalNPV: -181226.25950738514,
+        costValues: {
+          "0": 0,
+          "1": -15000,
+          "2": -15000,
+          "3": -15000,
+          "4": -15000,
+          "5": -15000,
+          "6": -15000,
+          "7": -15000,
+          "8": -15000,
+          "9": -15000,
+          "10": -15000,
+          "11": -15000,
+          "12": -15000,
+          "13": -15000,
+          "14": -15000,
+          "15": -15000,
+          "16": -15000,
+          "17": -15000,
+          "18": -15000,
+          "19": -15000,
+          "20": -15000,
+          "-4": 0,
+          "-3": 0,
+          "-2": 0,
+          "-1": 0,
+        },
+      },
+      {
+        costName: "maintenance",
+        totalCost: 0,
+        totalNPV: 0,
+        costValues: {
+          "0": 0,
+          "1": 0,
+          "2": 0,
+          "3": 0,
+          "4": 0,
+          "5": 0,
+          "6": 0,
+          "7": 0,
+          "8": 0,
+          "9": 0,
+          "10": 0,
+          "11": 0,
+          "12": 0,
+          "13": 0,
+          "14": 0,
+          "15": 0,
+          "16": 0,
+          "17": 0,
+          "18": 0,
+          "19": 0,
+          "20": 0,
+          "-4": 0,
+          "-3": 0,
+          "-2": 0,
+          "-1": 0,
+        },
+      },
+      {
+        costName: "communityBenefitSharingFund",
+        totalCost: -478377.16913539456,
+        totalNPV: -252249.32242162884,
+        costValues: {
+          "0": 0,
+          "1": -3101.320320000044,
+          "2": -4951.5160414005795,
+          "3": -6853.590667682226,
+          "4": -8808.645091381013,
+          "5": -10817.801034974973,
+          "6": -12882.20142107311,
+          "7": -15003.01074892755,
+          "8": -17181.41547737641,
+          "9": -19418.624414322498,
+          "10": -21715.869112862427,
+          "11": -24074.40427416561,
+          "12": -26495.508157226817,
+          "13": -28980.482995600523,
+          "14": -31530.655421230902,
+          "15": -34147.37689550309,
+          "16": -36832.024147625285,
+          "17": -39585.99962047368,
+          "18": -42410.73192401404,
+          "19": -45307.67629643649,
+          "20": -48278.31507311732,
+          "-4": 0,
+          "-3": 0,
+          "-2": 0,
+          "-1": 0,
+        },
+      },
+      {
+        costName: "carbonStandardFees",
+        totalCost: -5207.763081484753,
+        totalNPV: -2786.931340270489,
+        costValues: {
+          "0": 0,
+          "1": -40.739840000000584,
+          "2": -64.08329625600338,
+          "3": -87.38940298199216,
+          "4": -110.65821993722336,
+          "5": -133.88980678532448,
+          "6": -157.08422309446732,
+          "7": -180.24152833751594,
+          "8": -203.3617818921798,
+          "9": -226.44504304114957,
+          "10": -249.49137097228606,
+          "11": -272.5008247787324,
+          "12": -295.473463459085,
+          "13": -318.4093459175526,
+          "14": -341.3085309640828,
+          "15": -364.17107731454234,
+          "16": -386.9970435908389,
+          "17": -409.7864883210964,
+          "18": -432.53946993977934,
+          "19": -455.25604678787926,
+          "20": -477.93627711301974,
+          "-4": 0,
+          "-3": 0,
+          "-2": 0,
+          "-1": 0,
+        },
       },
-    ],
-    [
       {
-        label: "Project length",
-        value: 20,
-        unit: "years",
+        costName: "baselineReassessment",
+        totalCost: -120000,
+        totalNPV: -75811.8711249392,
+        costValues: {
+          "0": 0,
+          "1": 0,
+          "2": 0,
+          "3": 0,
+          "4": 0,
+          "5": 0,
+          "6": 0,
+          "7": 0,
+          "8": 0,
+          "9": 0,
+          "10": -40000,
+          "11": 0,
+          "12": 0,
+          "13": 0,
+          "14": 0,
+          "15": 0,
+          "16": 0,
+          "17": 0,
+          "18": 0,
+          "19": 0,
+          "20": -40000,
+          "-4": 0,
+          "-3": 0,
+          "-2": 0,
+          "-1": -40000,
+        },
       },
       {
-        label: "Loss rate",
-        value: "-0.10",
-        unit: "%",
+        costName: "mrv",
+        totalCost: -300000,
+        totalNPV: -167296.40590994002,
+        costValues: {
+          "0": 0,
+          "1": 0,
+          "2": 0,
+          "3": 0,
+          "4": 0,
+          "5": -75000,
+          "6": 0,
+          "7": 0,
+          "8": 0,
+          "9": 0,
+          "10": -75000,
+          "11": 0,
+          "12": 0,
+          "13": 0,
+          "14": 0,
+          "15": -75000,
+          "16": 0,
+          "17": 0,
+          "18": 0,
+          "19": 0,
+          "20": -75000,
+          "-4": 0,
+          "-3": 0,
+          "-2": 0,
+          "-1": 0,
+        },
       },
       {
-        label: "Emission factor",
-        subValues: [
-          {
-            label: "AGB",
-            value: 355,
-            unit: "tCO2e/ha/yr",
-          },
-          {
-            label: "SOC",
-            value: 72,
-            unit: "tCO2e/ha/yr",
-          },
-        ],
+        costName: "longTermProjectOperatingCost",
+        totalCost: -528000,
+        totalNPV: -318958.2167329978,
+        costValues: {
+          "0": 0,
+          "1": -26400,
+          "2": -26400,
+          "3": -26400,
+          "4": -26400,
+          "5": -26400,
+          "6": -26400,
+          "7": -26400,
+          "8": -26400,
+          "9": -26400,
+          "10": -26400,
+          "11": -26400,
+          "12": -26400,
+          "13": -26400,
+          "14": -26400,
+          "15": -26400,
+          "16": -26400,
+          "17": -26400,
+          "18": -26400,
+          "19": -26400,
+          "20": -26400,
+          "-4": 0,
+          "-3": 0,
+          "-2": 0,
+          "-1": 0,
+        },
+      },
+      {
+        costName: "opexTotalCostPlan",
+        totalCost: -1731584.9322168794,
+        totalNPV: -998329.0070371614,
+        costValues: {
+          "0": 0,
+          "1": -44542.060160000045,
+          "2": -46415.59933765658,
+          "3": -48340.98007066422,
+          "4": -50319.30331131823,
+          "5": -127351.6908417603,
+          "6": -54439.28564416758,
+          "7": -56583.25227726507,
+          "8": -58784.777259268594,
+          "9": -61045.06945736365,
+          "10": -178365.36048383472,
+          "11": -65746.90509894435,
+          "12": -68190.9816206859,
+          "13": -70698.89234151808,
+          "14": -73271.96395219499,
+          "15": -150911.5479728176,
+          "16": -78619.02119121613,
+          "17": -81395.78610879477,
+          "18": -84243.27139395382,
+          "19": -87162.93234322437,
+          "20": -205156.25135023033,
+          "-4": 0,
+          "-3": 0,
+          "-2": 0,
+          "-1": -40000,
+        },
+      },
+      {
+        costName: "capexTotalCostPlan",
+        totalCost: -1600616.6666666667,
+        totalNPV: -1505525.2721514185,
+        costValues: {
+          "0": 0,
+          "1": 0,
+          "2": 0,
+          "3": 0,
+          "4": 0,
+          "5": 0,
+          "6": 0,
+          "7": 0,
+          "8": 0,
+          "9": 0,
+          "10": 0,
+          "11": 0,
+          "12": 0,
+          "13": 0,
+          "14": 0,
+          "15": 0,
+          "16": 0,
+          "17": 0,
+          "18": 0,
+          "19": 0,
+          "20": 0,
+          "-4": -343433.3333333333,
+          "-3": -411283.3333333333,
+          "-2": -411283.3333333333,
+          "-1": -434616.6666666667,
+        },
       },
     ],
-  ],
-  summary: [
-    {
-      name: "$/tCO2e (total cost, NPV)",
-      value: 16,
-      unit: "$",
-      tooltip,
-    },
-    {
-      name: "$/ha",
-      value: 358,
-      unit: "$",
-      tooltip,
-    },
-    {
-      name: "Leftover after OpEx / total cost",
-      value: 392807,
-      unit: "$",
-      tooltip,
-    },
-    {
-      name: "IRR when priced to cover opex",
-      value: 18.5,
-      unit: "%",
-      tooltip,
-    },
-    {
-      name: "IRR when priced to cover total costs",
-      value: -1.1,
-      unit: "%",
-      tooltip,
-    },
-    {
-      name: "Funding gap (NPV)",
-      unit: "%",
-      tooltip,
-    },
-  ],
-  costDetails: [
-    {
-      name: "capitalExpenditure",
-      value: 1514218,
-      label: "Capital expenditure",
-    },
-    {
-      name: "feasibilityAnalysis",
-      value: 70000,
-      label: "Feasibility analysis",
-    },
-    {
-      name: "conservationPlanningAndAdmin",
-      value: 629559,
-      label: "Conservation planning and admin",
-    },
-    {
-      name: "dataCollectionAndFieldCosts",
-      value: 76963,
-      label: "Data collection and field costs",
-    },
-    {
-      name: "communityRepresentation",
-      value: 286112,
-      label: "Community representation",
-    },
-    {
-      name: "blueCarbonProjectPlanning",
-      value: 111125,
-      label: "Blue carbon project planning",
-    },
-    {
-      name: "establishingCarbonRights",
-      value: 296010,
-      label: "Establishing carbon rights",
-    },
-    {
-      name: "validation",
-      value: 44450,
-      label: "Validation",
-    },
-    {
-      name: "implementationLabor",
-      value: 0,
-      label: "Implementation labor",
-    },
-    {
-      name: "operatingExpenditure",
-      value: 36509571,
-      label: "Operating expenditure",
-    },
-    {
-      name: "monitoringAndMaintenance",
-      value: 402322,
-      label: "Monitoring and Maintenance",
-    },
-    {
-      name: "communityBenefitSharingFund",
-      value: 34523347,
-      label: "Community benefit sharing fund",
-    },
-    {
-      name: "carbonStandardFees",
-      value: 227875,
-      label: "Carbon standard fees",
-    },
-    {
-      name: "baselineReassessment",
-      value: 75812,
-      label: "Baseline reassessment",
-    },
-    {
-      name: "mrv",
-      value: 223062,
-      label: "MRV",
-    },
-    {
-      name: "totalCost",
-      value: 38023789,
-      label: "Total cost",
-    },
-  ],
+  },
 };
 
 export default mockData;
diff --git a/client/src/containers/projects/custom-project/summary/index.tsx b/client/src/containers/projects/custom-project/summary/index.tsx
index 35727be3..2b4da3e2 100644
--- a/client/src/containers/projects/custom-project/summary/index.tsx
+++ b/client/src/containers/projects/custom-project/summary/index.tsx
@@ -6,19 +6,24 @@ import { XIcon } from "lucide-react";
 import { projectsUIState } from "@/app/projects/[id]/store";
 
 import { SUMMARY_SIDEBAR_WIDTH } from "@/containers/projects/custom-project";
-import mockData from "@/containers/projects/custom-project/mock-data";
 
 import FileEdit from "@/components/icons/file-edit";
 import { Button } from "@/components/ui/button";
 import InfoButton from "@/components/ui/info-button";
 import Metric from "@/components/ui/metric";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
-const ProjectSummary: FC = () => {
+interface ProjectSummaryProps {
+  data: {
+    [key: string]: number | null;
+  };
+}
+const ProjectSummary: FC<ProjectSummaryProps> = ({ data }) => {
   const setProjectSummaryOpen = useSetAtom(projectsUIState);
 
   return (
     <div
-      className={"relative flex h-full flex-col gap-8 bg-big-stone-950 p-6"}
+      className={"relative flex h-full flex-col gap-8 bg-big-stone-950 py-6"}
       style={{ width: SUMMARY_SIDEBAR_WIDTH }}
     >
       <Button
@@ -34,26 +39,28 @@ const ProjectSummary: FC = () => {
       >
         <XIcon className="h-4 w-4 text-foreground hover:text-muted-foreground" />
       </Button>
-      <header>
+      <header className="px-6">
         <h2 className="text-xl font-semibold">Summary</h2>
       </header>
-      <ul className="flex-1 space-y-1">
-        {mockData.summary.map(({ name, tooltip, unit, value }) => (
-          <div
-            key={name}
-            className="flex justify-between border-b border-dashed py-1.5"
-          >
-            <div className="flex items-center gap-2">
-              <div className="text-sm font-normal">{name}</div>
-              <InfoButton title={tooltip.title}>{tooltip.content}</InfoButton>
+      <ScrollArea className="flex-1 px-6">
+        <ul className="space-y-1">
+          {Object.keys(data).map((key) => (
+            <div
+              key={key}
+              className="flex justify-between border-b border-dashed py-1.5"
+            >
+              <div className="flex items-center gap-2">
+                <div className="text-sm font-normal">{key}</div>
+                <InfoButton title="{tooltip.title}">tooltip.content</InfoButton>
+              </div>
+              <div className="text-base font-medium">
+                <Metric value={data[key]} unit="$" unitBeforeValue />
+              </div>
             </div>
-            <div className="text-base font-medium">
-              <Metric value={value} unit={unit} unitBeforeValue />
-            </div>
-          </div>
-        ))}
-      </ul>
-      <div className="flex">
+          ))}
+        </ul>
+      </ScrollArea>
+      <div className="flex px-6">
         <p className="flex-1 text-xs text-muted-foreground">
           Calculations based on project setup parameters. For new calculations,
           edit project details.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 526eb81e..9ff40dbf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -396,6 +396,9 @@ importers:
       react-resizable-panels:
         specifier: 2.1.6
         version: 2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      recharts:
+        specifier: ^2.13.3
+        version: 2.13.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       rooks:
         specifier: 7.14.1
         version: 7.14.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -4424,6 +4427,9 @@ packages:
       supports-color:
         optional: true
 
+  decimal.js-light@2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+
   dedent@1.5.3:
     resolution: {integrity: sha512-NHQtfOOW68WD8lgypbLA5oT+Bt0xXJhiYvoR6SmmNXZfpzOGXwdKWmcwG8N7PwVVWV3eF/68nmD9BaJSsTBhyQ==}
     peerDependencies:
@@ -4784,6 +4790,9 @@ packages:
     resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
     engines: {node: '>= 0.6'}
 
+  eventemitter3@4.0.7:
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+
   events@3.3.0:
     resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
     engines: {node: '>=0.8.x'}
@@ -4838,6 +4847,10 @@ packages:
   fast-diff@1.3.0:
     resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
 
+  fast-equals@5.0.1:
+    resolution: {integrity: sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==}
+    engines: {node: '>=6.0.0'}
+
   fast-glob@3.3.2:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
     engines: {node: '>=8.6.0'}
@@ -6880,6 +6893,12 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
 
+  react-smooth@4.0.1:
+    resolution: {integrity: sha512-OE4hm7XqR0jNOq3Qmk9mFLyd6p2+j6bvbPJ7qlB7+oo0eNcL2l7WQzG6MBnT3EXY6xzkLMUBec3AfewJdA0J8w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+
   react-style-singleton@2.2.1:
     resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
     engines: {node: '>=10'}
@@ -6919,6 +6938,16 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
+  recharts-scale@0.4.5:
+    resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}
+
+  recharts@2.13.3:
+    resolution: {integrity: sha512-YDZ9dOfK9t3ycwxgKbrnDlRC4BHdjlY73fet3a0C1+qGMjXVZe6+VXmpOIIhzkje5MMEL8AN4hLIe4AMskBzlA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
+
   redux@4.2.1:
     resolution: {integrity: sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==}
 
@@ -7826,6 +7855,9 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  victory-vendor@36.9.2:
+    resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
+
   void-elements@3.1.0:
     resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
     engines: {node: '>=0.10.0'}
@@ -12851,6 +12883,8 @@ snapshots:
     optionalDependencies:
       supports-color: 5.5.0
 
+  decimal.js-light@2.5.1: {}
+
   dedent@1.5.3(babel-plugin-macros@3.1.0):
     optionalDependencies:
       babel-plugin-macros: 3.1.0
@@ -13356,6 +13390,8 @@ snapshots:
 
   etag@1.8.1: {}
 
+  eventemitter3@4.0.7: {}
+
   events@3.3.0: {}
 
   execa@5.1.1:
@@ -13524,6 +13560,8 @@ snapshots:
 
   fast-diff@1.3.0: {}
 
+  fast-equals@5.0.1: {}
+
   fast-glob@3.3.2:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -15757,6 +15795,14 @@ snapshots:
       - '@types/react'
       - supports-color
 
+  react-smooth@4.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      fast-equals: 5.0.1
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+
   react-style-singleton@2.2.1(@types/react@18.3.5)(react@18.3.1):
     dependencies:
       get-nonce: 1.0.1
@@ -15808,6 +15854,23 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
+  recharts-scale@0.4.5:
+    dependencies:
+      decimal.js-light: 2.5.1
+
+  recharts@2.13.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      clsx: 2.1.1
+      eventemitter3: 4.0.7
+      lodash: 4.17.21
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-is: 18.3.1
+      react-smooth: 4.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      recharts-scale: 0.4.5
+      tiny-invariant: 1.3.3
+      victory-vendor: 36.9.2
+
   redux@4.2.1:
     dependencies:
       '@babel/runtime': 7.25.7
@@ -16811,6 +16874,23 @@ snapshots:
 
   vary@1.1.2: {}
 
+  victory-vendor@36.9.2:
+    dependencies:
+      '@types/d3-array': 3.2.1
+      '@types/d3-ease': 3.0.2
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-scale': 4.0.8
+      '@types/d3-shape': 3.1.6
+      '@types/d3-time': 3.0.3
+      '@types/d3-timer': 3.0.2
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+
   void-elements@3.1.0: {}
 
   vt-pbf@3.1.3: