adds footer to analysis table

client/src/containers/analysis-visualization/analysis-table/component.tsx

@@ -6,6 +6,7 @@ import { ArrowLeftIcon } from '@heroicons/react/solid';
 
 import ComparisonCell from './comparison-cell/component';
 import ChartCell from './chart-cell';
+import AnalysisTableFooter from './footer';
 
 import { useAppSelector, useSyncIndicators, useSyncTableDetailView } from 'store/hooks';
 import { filtersForTabularAPI } from 'store/features/analysis/selector';
@@ -531,8 +532,8 @@ const AnalysisTable = () => {
   );
 
   return (
-    <div className="flex flex-1 flex-col">
-      <div className="flex justify-between px-6">
+    <div className="flex flex-1 flex-col space-y-6 px-6 pb-6">
+      <div className="flex justify-between">
         <div className="flex w-full items-end justify-between">
           <AnalysisDynamicMetadata />
           <div>
@@ -559,9 +560,10 @@ const AnalysisTable = () => {
           </div>
         </div>
       </div>
-      <div className="relative my-6 flex-1 px-6" data-testid="analysis-table">
+      <div className="relative flex-1" data-testid="analysis-table">
         <Table {...tableProps} />
       </div>
+      <AnalysisTableFooter />
     </div>
   );
 };

client/src/containers/analysis-visualization/analysis-table/footer/index.tsx

@@ -0,0 +1,63 @@
+import { FC } from 'react';
+import { useSearchParams } from 'next/navigation';
+
+import { Separator } from '@/components/ui/separator';
+import { Badge } from '@/components/ui/badge';
+import { useScenario } from '@/hooks/scenarios';
+
+const AnalysisTableFooter: FC = () => {
+  const searchParams = useSearchParams();
+  const compareScenarioId = searchParams.get('compareScenarioId');
+
+  const { data: scenarioName } = useScenario(compareScenarioId, undefined, {
+    select: (scenario) => scenario?.title,
+  });
+
+  return (
+    <footer className="flex items-end justify-between text-xs text-gray-500">
+      <ul className="space-y-1">
+        {Boolean(scenarioName) && (
+          <li className="flex items-center space-x-2">
+            <span className="relative pl-3 before:absolute before:left-0 before:top-1/2 before:h-3 before:w-[6px] before:shrink-0 before:grow-0 before:-translate-y-1/2 before:rounded before:bg-gray-900">
+              {scenarioName}
+            </span>
+            <Separator className="h-[1px] w-[26px] text-gray-200" />
+            <span className="text-gray-900">140</span>
+            <Badge className="rounded-sm border border-gray-400 bg-transparent p-1 leading-3 text-gray-400">
+              +70
+            </Badge>
+            <Separator className="h-[1px] w-[26px] text-gray-200" />
+            <span>Difference</span>
+          </li>
+        )}
+        <li className="flex items-center space-x-2">
+          <span className="relative pl-3 before:absolute before:left-0 before:top-1/2 before:h-3 before:w-[6px] before:shrink-0 before:grow-0 before:-translate-y-1/2 before:rounded before:bg-gray-300">
+            Actual data
+          </span>
+          <Separator className="h-[1px] w-[26px] text-gray-200" />
+          <span className="text-gray-400 line-through">70</span>
+        </li>
+      </ul>
+
+      <div className="flex items-center space-x-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="27"
+          height="2"
+          viewBox="0 0 27 2"
+          fill="none"
+        >
+          <path
+            d="M27 1L0.733333 1H0"
+            stroke="#60626A"
+            stroke-dasharray="3.6 2.4"
+            strokeWidth="1.2"
+          />
+        </svg>
+        <span>The years at the right of the doted line are projected</span>
+      </div>
+    </footer>
+  );
+};
+
+export default AnalysisTableFooter;

client/src/hooks/scenarios/index.ts

@@ -4,11 +4,7 @@ import { useQuery, useQueryClient, useInfiniteQuery, useMutation } from '@tansta
 import { apiService } from 'services/api';
 
 // types
-import type {
-  UseQueryResult,
-  UseInfiniteQueryResult,
-  UseQueryOptions,
-} from '@tanstack/react-query';
+import type { UseInfiniteQueryResult, UseQueryOptions } from '@tanstack/react-query';
 import type { AxiosResponse } from 'axios';
 import type { Scenario, ScenarioDTO } from 'containers/scenarios/types';
 import type { APIMetadataPagination } from 'types';
@@ -24,8 +20,6 @@ type ResponseInfiniteData = UseInfiniteQueryResult<
   }>
 >;
 
-type ResponseDataScenario = UseQueryResult<Scenario>;
-
 type QueryParams = {
   sort?: string;
   include?: string;
@@ -98,24 +92,23 @@ export function useInfiniteScenarios(queryParams: QueryParams): ResponseInfinite
   return useMemo<ResponseInfiniteData>((): ResponseInfiniteData => query, [query]);
 }
 
-export function useScenario(
-  id?: Scenario['id'] | null,
+export function useScenario<T = Scenario>(
+  id: Scenario['id'],
   queryParams?: QueryParams,
-): ResponseDataScenario {
-  const response: ResponseDataScenario = useQuery(
+  queryOptions: UseQueryOptions<Scenario, unknown, T> = {},
+) {
+  return useQuery(
     ['scenario', id],
     () =>
       apiService
-        .request({
+        .request<{ data: Scenario }>({
           method: 'GET',
           url: `/scenarios/${id}`,
           params: queryParams,
         })
         .then(({ data: responseData }) => responseData.data),
-    { ...DEFAULT_QUERY_OPTIONS, enabled: !!id },
+    { enabled: Boolean(id), ...queryOptions },
   );
-
-  return useMemo<ResponseDataScenario>(() => response, [response]);
 }
 
 export function useDeleteScenario() {