Added abatement potencial and total cost chart columns

client/src/components/ui/bar-chart/single-stacked-bar-chart/index.tsx

@@ -0,0 +1,39 @@
+import { FC } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface SingleStackedBarChartProps {
+  total: Segment;
+  segments: Segment[];
+}
+interface Segment {
+  id: string;
+  value: number;
+  colorClass: string;
+}
+
+const getSize = (value: number, total: number) => {
+  const percentage = (value / total) * 100;
+  return `${Math.max(percentage, 0)}%`;
+};
+
+const SingleStackedBarChart: FC<SingleStackedBarChartProps> = ({
+  total,
+  segments,
+}) => {
+  return (
+    <div className={cn("flex h-2 w-full", total.colorClass)}>
+      {segments.map((s) => (
+        <div
+          key={s.id}
+          className={s.colorClass}
+          style={{
+            width: getSize(s.value, total.value),
+          }}
+        ></div>
+      ))}
+    </div>
+  );
+};
+
+export default SingleStackedBarChart;

client/src/containers/my-projects/columns.tsx

@@ -94,7 +94,7 @@ export const columns: CustomColumn[] = [
             "rounded-full border px-2 py-1 text-xs font-medium",
             getValue() === "Conservation"
               ? "border-sky-300 bg-blue-500/20 text-sky-blue-300"
-              : "border-mint-green-200 bg-green-500/20 text-mint-green-200",
+              : "bg-green-500/20 border-mint-green-200 text-mint-green-200",
           )}
         >
           {getValue()}

client/src/containers/overview/table/toolbar/index.tsx

@@ -180,7 +180,7 @@ export default function ToolbarProjectsTable() {
                       </div>
                       <div className="w-1/3 text-right font-medium">High</div>
                     </div>
-                    <div className="h-2 w-full rounded-full bg-gradient-to-r from-red-500 via-yellow-500 to-green-500" />
+                    <div className="to-green-500 h-2 w-full rounded-full bg-gradient-to-r from-red-500 via-yellow-500" />
                   </div>
                 </TabsContent>
 

client/src/containers/overview/table/view/overview/columns.tsx

@@ -1,15 +1,56 @@
 import { ProjectType } from "@shared/contracts/projects.contract";
 import { PROJECT_SCORE } from "@shared/entities/project-score.enum";
+import { COST_TYPE_SELECTOR } from "@shared/entities/projects.entity";
 import { createColumnHelper } from "@tanstack/react-table";
 import { z } from "zod";
 
 import { formatCurrency, formatNumber } from "@/lib/format";
 
 import { filtersSchema } from "@/app/(overview)/url-store";
 
+import { TableStateWithMaximums } from "@/containers/overview/table/view/overview";
+
+import SingleStackedBarChart from "@/components/ui/bar-chart/single-stacked-bar-chart";
 import { DEFAULT_BG_CLASSES, ScoreIndicator } from "@/components/ui/score-card";
 
-const columnHelper = createColumnHelper<Partial<ProjectType>>();
+const columnHelper = createColumnHelper<
+  Partial<ProjectType> & {
+    capex?: number;
+    opex?: number;
+    capexNPV?: number;
+    opexNPV?: number;
+    totalCostNPV?: number;
+  }
+>();
+
+const createSegments = (
+  type: "npv" | "total",
+  projectName: string,
+  rowData: {
+    capexNPV?: number;
+    opexNPV?: number;
+    capex?: number;
+    opex?: number;
+  },
+) => {
+  const values = {
+    capex: type === "npv" ? (rowData.capexNPV ?? 0) : (rowData.capex ?? 0),
+    opex: type === "npv" ? (rowData.opexNPV ?? 0) : (rowData.opex ?? 0),
+  };
+
+  return [
+    {
+      id: `segment-${type}-${projectName}-${values.capex}`,
+      value: values.capex,
+      colorClass: "bg-sky-blue-500",
+    },
+    {
+      id: `segment-${type}-${projectName}-${values.opex}`,
+      value: values.opex,
+      colorClass: "bg-sky-blue-200",
+    },
+  ];
+};
 
 export const columns = (filters: z.infer<typeof filtersSchema>) => [
   columnHelper.accessor("projectName", {
@@ -54,8 +95,27 @@ export const columns = (filters: z.infer<typeof filtersSchema>) => [
       if (value === null || value === undefined) {
         return "-";
       }
+      const state = props.table.getState() as TableStateWithMaximums;
 
-      return formatNumber(value);
+      return (
+        <div className="flex items-center gap-2">
+          <SingleStackedBarChart
+            total={{
+              id: `total-${props.row.original.projectName}-${value}`,
+              value: state.maximums?.maxAbatementPotential ?? 0,
+              colorClass: "bg-sky-blue-950",
+            }}
+            segments={[
+              {
+                id: `segment-${props.row.original.projectName}-${value}`,
+                value: props.getValue() ?? 0,
+                colorClass: "bg-green",
+              },
+            ]}
+          />
+          <p className="text-sm font-normal">{formatNumber(value)}</p>
+        </div>
+      );
     },
   }),
   columnHelper.accessor(
@@ -69,7 +129,33 @@ export const columns = (filters: z.infer<typeof filtersSchema>) => [
           return "-";
         }
 
-        return formatNumber(value);
+        const state = props.table.getState() as TableStateWithMaximums;
+        const segmentsMap = {
+          [COST_TYPE_SELECTOR.NPV]: createSegments(
+            "npv",
+            props.row.original.projectName ?? "project",
+            props.row.original,
+          ),
+          [COST_TYPE_SELECTOR.TOTAL]: createSegments(
+            "total",
+            props.row.original.projectName ?? "project",
+            props.row.original,
+          ),
+        };
+
+        return (
+          <div className="flex items-center gap-2">
+            <SingleStackedBarChart
+              total={{
+                id: `total-${props.row.original.projectName}-${value}`,
+                value: state.maximums?.maxCost ?? 0,
+                colorClass: "bg-sky-blue-950",
+              }}
+              segments={segmentsMap[filters.costRangeSelector]}
+            />
+            <p className="text-sm font-normal">{formatNumber(value)}</p>
+          </div>
+        );
       },
     },
   ),

client/src/containers/overview/table/view/overview/index.tsx

@@ -4,13 +4,15 @@ import { useState } from "react";
 
 import { ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
 import { projectsQuerySchema } from "@shared/contracts/projects.contract";
+import { PaginatedProjectsWithMaximums } from "@shared/dtos/projects/projects.dto";
 import { keepPreviousData } from "@tanstack/react-query";
 import {
   flexRender,
   getCoreRowModel,
   PaginationState,
   SortingState,
   useReactTable,
+  TableState,
 } from "@tanstack/react-table";
 import { useAtom } from "jotai";
 import { ChevronsUpDownIcon } from "lucide-react";
@@ -44,6 +46,9 @@ import TablePagination, {
 
 type filterFields = z.infer<typeof projectsQuerySchema.shape.fields>;
 type sortFields = z.infer<typeof projectsQuerySchema.shape.sort>;
+export interface TableStateWithMaximums extends TableState {
+  maximums?: PaginatedProjectsWithMaximums["maximums"];
+}
 
 export function OverviewTable() {
   const [tableView] = useTableView();
@@ -73,8 +78,8 @@ export function OverviewTable() {
     {
       query: {
         ...filtersToQueryParams(filters),
-        fields: columnsBasedOnFilters.map(
-          (column) => column.accessorKey,
+        fields: ["capex", "capexNPV", "opex", "opexNPV"].concat(
+          columnsBasedOnFilters.map((column) => column.accessorKey),
         ) as filterFields,
         ...(sorting.length > 0 && {
           sort: sorting.map(
@@ -87,24 +92,26 @@ export function OverviewTable() {
         pageNumber: pagination.pageIndex + 1,
         pageSize: pagination.pageSize,
         partialProjectName: filters.keyword,
+        withMaximums: true,
       },
     },
     {
       queryKey,
-      select: (data) => data.body,
+      select: (data) => data.body as PaginatedProjectsWithMaximums,
       placeholderData: keepPreviousData,
     },
   );
 
-  const table = useReactTable({
+  const table = useReactTable<PaginatedProjectsWithMaximums["data"][0]>({
     data: isSuccess ? data.data : NO_DATA,
     columns: columnsBasedOnFilters,
     getCoreRowModel: getCoreRowModel(),
     manualPagination: true,
     state: {
       sorting,
       pagination,
-    },
+      maximums: data?.maximums,
+    } as TableStateWithMaximums,
     onSortingChange: setSorting,
     onPaginationChange: setPagination,
   });

client/tailwind.config.ts

@@ -87,18 +87,19 @@ const config: Config = {
           950: "#0a2d42",
         },
         "mint-green": {
-          200: "#70C69B"
+          200: "#70C69B",
         },
-        "wheat": {
-          200: "#EEE0BD"
+        wheat: {
+          200: "#EEE0BD",
         },
-        "yellow": {
-          500: "#EACD3F"
+        yellow: {
+          500: "#EACD3F",
         },
-        "high": "#B9CCA3",
-        "medium": "#F5EBB8",
-        "low": "#F7BA93",
-        "deep-ocean": "#132A47"
+        green: "#90BA36",
+        high: "#B9CCA3",
+        medium: "#F5EBB8",
+        low: "#F7BA93",
+        "deep-ocean": "#132A47",
       },
       borderRadius: {
         lg: "var(--radius)",