[ui] Use CustomConfigContext in drilldown chart and statistical unit …

…table

app/src/app/reports/drill-down-chart.tsx

@@ -92,7 +92,7 @@ export const DrillDownChart = ({
         ],
       });
     }
-  }, [points, onSelect, variable]);
+  }, [points, onSelect, variable, title]);
 
   return <div ref={_ref} />;
 };

app/src/app/reports/statbus-chart.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
-import { DrillDown, DrillDownPoint } from "@/app/reports/types/drill-down";
+import { DrillDown } from "@/app/reports/types/drill-down";
 import * as highcharts from "highcharts";
 import HC_drilldown from "highcharts/modules/drilldown";
 import HC_a11y from "highcharts/modules/accessibility";
@@ -10,6 +10,7 @@ import { DrillDownChart } from "@/app/reports/drill-down-chart";
 import { useDrillDownData } from "@/app/reports/use-drill-down-data";
 import { SearchLink } from "@/app/reports/search-link";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useCustomConfigContext } from "../use-custom-config-context";
 
 export default function StatBusChart(props: { readonly drillDown: DrillDown }) {
   const {
@@ -20,6 +21,8 @@ export default function StatBusChart(props: { readonly drillDown: DrillDown }) {
     setActivityCategory,
   } = useDrillDownData(props.drillDown);
 
+  const { statDefinitions } = useCustomConfigContext();
+
   useEffect(() => {
     HC_a11y(highcharts);
     HC_drilldown(highcharts);
@@ -31,8 +34,11 @@ export default function StatBusChart(props: { readonly drillDown: DrillDown }) {
     title: string;
   }[] = [
     { value: "count", label: "Count", title: "Number of enterprises" },
-    { value: "employees", label: "Employees", title: "Number of employees" },
-    { value: "turnover", label: "Turnover", title: "Total turnover" },
+    ...(statDefinitions.map(({ code, name }) => ({
+      value: code,
+      label: code,
+      title: name,
+    })) ?? []),
   ];
 
   return (
@@ -43,6 +49,7 @@ export default function StatBusChart(props: { readonly drillDown: DrillDown }) {
             <TabsTrigger
               key={statisticalVariable.value}
               value={statisticalVariable.value}
+              className="capitalize"
             >
               {statisticalVariable.label}
             </TabsTrigger>

app/src/app/search/components/statistical-unit-table-header.tsx

@@ -1,7 +1,9 @@
 import { TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import SortableTableHead from "@/app/search/components/sortable-table-head";
+import { useCustomConfigContext } from "@/app/use-custom-config-context";
 
 export const StatisticalUnitTableHeader = () => {
+  const { statDefinitions } = useCustomConfigContext();
   return (
     <TableHeader className="bg-gray-50">
       <TableRow>
@@ -13,16 +15,16 @@ export const StatisticalUnitTableHeader = () => {
           Region
         </SortableTableHead>
         <SortableTableHead
-          className="text-right hidden lg:table-cell"
-          name="employees"
+          className="text-right hidden lg:table-cell [&>*]:capitalize"
+          name={statDefinitions?.[0]?.code}
         >
-          Employees
+          {statDefinitions?.[0]?.code}
         </SortableTableHead>
         <SortableTableHead
-          className="text-right hidden lg:table-cell"
-          name="turnover"
+          className="text-right hidden lg:table-cell [&>*]:capitalize"
+          name={statDefinitions?.[1]?.code}
         >
-          Turnover
+          {statDefinitions?.[1]?.code}
         </SortableTableHead>
         <SortableTableHead
           className="text-left hidden lg:table-cell"

app/src/app/search/components/statistical-unit-table-row.tsx

@@ -9,8 +9,8 @@ import { Bug } from "lucide-react";
 import { useCartContext } from "@/app/search/use-cart-context";
 import { useSearchContext } from "@/app/search/use-search-context";
 import { thousandSeparator } from "@/lib/number-utils";
-import { EMPLOYEES, TAX_IDENT, TURNOVER } from "@/app/global-variables";
 import { StatisticalUnit } from "@/app/types";
+import { useCustomConfigContext } from "@/app/use-custom-config-context";
 
 interface SearchResultTableRowProps {
   unit: Tables<"statistical_unit">;
@@ -23,6 +23,7 @@ export const StatisticalUnitTableRow = ({
 }: SearchResultTableRowProps) => {
   const { regions, activityCategories } = useSearchContext();
   const { selected } = useCartContext();
+  const { statDefinitions, externalIdentTypes } = useCustomConfigContext();
 
   const isInBasket = selected.some(
     (s) => s.unit_id === unit.unit_id && s.unit_type === unit.unit_type
@@ -41,9 +42,7 @@ export const StatisticalUnitTableRow = ({
     invalid_codes,
   } = unit as StatisticalUnit;
 
-  const tax_ident = external_idents[TAX_IDENT];
-  const employees = stats_summary[EMPLOYEES]?.sum;
-  const turnover = stats_summary[TURNOVER]?.sum;
+  const external_ident = external_idents[externalIdentTypes?.[0]?.code];
 
   const getRegionByPath = (physical_region_path: unknown) =>
     regions.find(({ path }) => path === physical_region_path);
@@ -104,7 +103,7 @@ export const StatisticalUnitTableRow = ({
               <span className="font-medium">{name}</span>
             )}
             <small className="text-gray-700 flex items-center space-x-1">
-              <span>{tax_ident}</span>
+              <span>{external_ident}</span>
               <span>|</span>
               <span>{prettifyUnitType(type)}</span>
               {invalid_codes && (
@@ -128,10 +127,10 @@ export const StatisticalUnitTableRow = ({
         </div>
       </TableCell>
       <TableCell className="py-2 text-right hidden lg:table-cell">
-        {thousandSeparator(employees)}
+        {thousandSeparator(stats_summary[statDefinitions?.[0]?.code]?.sum)}
       </TableCell>
       <TableCell className="py-2 text-right hidden lg:table-cell">
-        {thousandSeparator(turnover)}
+        {thousandSeparator(stats_summary[statDefinitions?.[1]?.code]?.sum)}
       </TableCell>
       <TableCell
         className="py-2 text-left hidden lg:table-cell"

app/src/app/search/filters/tax-reg-ident-filter.tsx

@@ -2,18 +2,19 @@
 import { Input } from "@/components/ui/input";
 import { useSearchContext } from "@/app/search/use-search-context";
 import { useCallback, useEffect } from "react";
-import { TAX_REG_IDENT } from "@/app/search/filters/url-search-params";
-import { TAX_IDENT } from "@/app/global-variables";
+import { useCustomConfigContext } from "@/app/use-custom-config-context";
 
 interface IProps {
   readonly urlSearchParam: string | null;
 }
 
 export default function TaxRegIdentFilter({ urlSearchParam }: IProps) {
+  const { externalIdentTypes } = useCustomConfigContext();
+  const externalIdentType = externalIdentTypes?.[0]?.code;
   const {
     dispatch,
     search: {
-      values: { [`external_idents->>${TAX_IDENT}`]: selected = [] },
+      values: { [`external_idents->>${externalIdentType}`]: selected = [] },
     },
   } = useSearchContext();
 
@@ -22,13 +23,13 @@ export default function TaxRegIdentFilter({ urlSearchParam }: IProps) {
       dispatch({
         type: "set_query",
         payload: {
-          name: `external_idents->>${TAX_IDENT}`,
+          name: `external_idents->>${externalIdentType}`,
           query: value ? `eq.${value}` : null,
           values: value ? [value] : [],
         },
       });
     },
-    [dispatch]
+    [dispatch, externalIdentType]
   );
 
   useEffect(() => {