Merge branch 'feature/hierarchical-identifiers'

Author: jhf

app/src/app/establishments/[id]/general-info/general-info-form.tsx

@@ -2,6 +2,7 @@
 import { FormField } from "@/components/form/form-field";
 import { useBaseData } from "@/atoms/base-data";
 import { EditableField } from "@/components/form/editable-field";
+import { EditableHierarchicalField } from "@/components/form/editable-hierarchical-field";
 import { useActionState, useEffect, useState } from "react";
 import { updateExternalIdent } from "@/app/legal-units/[id]/update-external-ident-server-action";
 import { SubmissionFeedbackDebugInfo } from "@/components/form/submission-feedback-debug-info";
@@ -94,6 +95,22 @@ export default function GeneralInfoForm({ id }: { readonly id: string }) {
       <div className="grid lg:grid-cols-2 gap-4 p-3">
         {externalIdentTypes.map((type) => {
           const value = establishment?.external_idents[type.code];
+          
+          // Use hierarchical field component for hierarchical identifier types
+          if (type.shape === "hierarchical" && type.labels) {
+            return (
+              <EditableHierarchicalField
+                key={type.code}
+                fieldId={`${type.code}`}
+                label={type.name ?? type.code!}
+                value={value}
+                identType={type}
+                response={externalIdentState}
+                formAction={externalIdentFormAction}
+              />
+            );
+          }
+          
           return (
             <EditableField
               key={type.code}

app/src/app/establishments/[id]/inspect/inspect.tsx

@@ -1,14 +1,55 @@
 "use client";
-import { useEstablishment } from "@/components/statistical-unit-details/use-unit-details";
+import { useEstablishment, useStatisticalUnitDetails } from "@/components/statistical-unit-details/use-unit-details";
 import DataDump from "@/components/data-dump";
 import UnitNotFound from "@/components/statistical-unit-details/unit-not-found";
+import useSWR from "swr";
+import { getBrowserRestClient } from "@/context/RestClientStore";
+
+function useExternalIdents(establishmentId: string) {
+  const { data, isLoading, error } = useSWR(
+    ["external_idents_establishment", establishmentId],
+    async () => {
+      const client = await getBrowserRestClient();
+      const { data, error } = await client
+        .from("external_ident")
+        .select("*, external_ident_type:type_id(code, name, shape, labels)")
+        .eq("establishment_id", parseInt(establishmentId, 10));
+      if (error) throw error;
+      return data;
+    },
+    { revalidateOnFocus: false }
+  );
+  return { externalIdents: data, isLoading, error };
+}
 
 export default function InspectDump({ id }: { readonly id: string }) {
-  const { establishment, error } = useEstablishment(id);
+  const { establishment, error: establishmentError } = useEstablishment(id);
+  const { data: details, error: detailsError } = useStatisticalUnitDetails(id, "establishment");
+  const { externalIdents, error: externalIdentsError } = useExternalIdents(id);
 
-  if (error || !establishment) {
+  if (establishmentError || !establishment) {
     return <UnitNotFound />;
   }
 
-  return <DataDump data={establishment} />;
+  const establishmentDetails = details?.establishment?.[0];
+
+  return (
+    <div className="space-y-6">
+      <DataDump data={establishment} title="establishment (base table)" />
+      
+      {externalIdents && externalIdents.length > 0 && (
+        <DataDump 
+          data={externalIdents} 
+          title="external_ident (related records)" 
+        />
+      )}
+
+      {establishmentDetails && (
+        <DataDump 
+          data={establishmentDetails} 
+          title="statistical_unit_details (computed view)" 
+        />
+      )}
+    </div>
+  );
 }

app/src/app/legal-units/[id]/general-info/general-info-form.tsx

@@ -13,6 +13,7 @@ import { useBaseData } from "@/atoms/base-data";
 import { updateExternalIdent } from "@/app/legal-units/[id]/update-external-ident-server-action";
 import { Tables } from "@/lib/database.types";
 import { EditableField } from "@/components/form/editable-field";
+import { EditableHierarchicalField } from "@/components/form/editable-hierarchical-field";
 import { SubmissionFeedbackDebugInfo } from "@/components/form/submission-feedback-debug-info";
 import { useStatisticalUnitDetails } from "@/components/statistical-unit-details/use-unit-details";
 import Loading from "@/components/statistical-unit-details/loading";
@@ -143,6 +144,22 @@ export default function GeneralInfoForm({ id }: { readonly id: string }) {
         {externalIdentTypes.map(
           (type: Tables<"external_ident_type_active">) => {
             const value = legalUnit?.external_idents[type.code];
+            
+            // Use hierarchical field component for hierarchical identifier types
+            if (type.shape === "hierarchical" && type.labels) {
+              return (
+                <EditableHierarchicalField
+                  key={type.code}
+                  fieldId={`${type.code}`}
+                  label={type.name ?? type.code!}
+                  value={value}
+                  identType={type}
+                  response={externalIdentState}
+                  formAction={externalIdentFormAction}
+                />
+              );
+            }
+            
             return (
               <EditableField
                 key={type.code}

app/src/app/legal-units/[id]/inspect/inspect.tsx

@@ -1,14 +1,55 @@
 "use client";
-import { useLegalUnit } from "@/components/statistical-unit-details/use-unit-details";
+import { useLegalUnit, useStatisticalUnitDetails } from "@/components/statistical-unit-details/use-unit-details";
 import DataDump from "@/components/data-dump";
 import UnitNotFound from "@/components/statistical-unit-details/unit-not-found";
+import useSWR from "swr";
+import { getBrowserRestClient } from "@/context/RestClientStore";
+
+function useExternalIdents(legalUnitId: string) {
+  const { data, isLoading, error } = useSWR(
+    ["external_idents", legalUnitId],
+    async () => {
+      const client = await getBrowserRestClient();
+      const { data, error } = await client
+        .from("external_ident")
+        .select("*, external_ident_type:type_id(code, name, shape, labels)")
+        .eq("legal_unit_id", parseInt(legalUnitId, 10));
+      if (error) throw error;
+      return data;
+    },
+    { revalidateOnFocus: false }
+  );
+  return { externalIdents: data, isLoading, error };
+}
 
 export default function InspectDump({ id }: { readonly id: string }) {
-  const { legalUnit, error } = useLegalUnit(id);
+  const { legalUnit, error: legalUnitError } = useLegalUnit(id);
+  const { data: details, error: detailsError } = useStatisticalUnitDetails(id, "legal_unit");
+  const { externalIdents, error: externalIdentsError } = useExternalIdents(id);
 
-  if (error || !legalUnit) {
+  if (legalUnitError || !legalUnit) {
     return <UnitNotFound />;
   }
 
-  return <DataDump data={legalUnit} />;
+  const legalUnitDetails = details?.legal_unit?.[0];
+
+  return (
+    <div className="space-y-6">
+      <DataDump data={legalUnit} title="legal_unit (base table)" />
+      
+      {externalIdents && externalIdents.length > 0 && (
+        <DataDump 
+          data={externalIdents} 
+          title="external_ident (related records)" 
+        />
+      )}
+
+      {legalUnitDetails && (
+        <DataDump 
+          data={legalUnitDetails} 
+          title="statistical_unit_details (computed view)" 
+        />
+      )}
+    </div>
+  );
 }

app/src/app/legal-units/[id]/update-external-ident-server-action.ts

@@ -19,6 +19,34 @@ const externalIdentsSchema = zfd.formData(
   )
 );
 
+/**
+ * Constructs a hierarchical identifier path from form data.
+ * Form fields are named like: census_ident_census, census_ident_region, census_ident_surveyor, census_ident_unit_no
+ * The labels (like "census.region.surveyor.unit_no") tell us the level names.
+ */
+function constructHierarchicalPath(
+  identTypeCode: string,
+  labels: string,
+  formData: Record<string, string | undefined>
+): string | null {
+  const levelNames = labels.split(".");
+  const parts: string[] = [];
+
+  for (const levelName of levelNames) {
+    const fieldKey = `${identTypeCode}_${levelName}`;
+    const value = formData[fieldKey];
+    if (value) {
+      parts.push(value);
+    } else {
+      // If any level is empty, stop constructing the path
+      break;
+    }
+  }
+
+  // Return null if no parts, otherwise join with dots
+  return parts.length > 0 ? parts.join(".") : null;
+}
+
 export async function updateExternalIdent(
   id: string,
   unitType: "establishment" | "legal_unit",
@@ -54,18 +82,50 @@ export async function updateExternalIdent(
 
   const unitIdField = `${unitType}_id`;
 
-  const [[identTypeCode, newIdentValue]] = Object.entries(validatedFields.data);
-
+  // Get first key to determine which identifier type we're editing
+  const firstKey = Object.keys(validatedFields.data)[0];
+  
+  // Detect if this is a hierarchical identifier by checking for underscore pattern
+  // e.g., "census_ident_census" -> "census_ident"
+  const identTypeCode = firstKey.includes("_") && 
+    externalIdentTypes.some(t => t.shape === "hierarchical" && firstKey.startsWith(t.code + "_"))
+    ? firstKey.substring(0, firstKey.lastIndexOf("_"))
+    : firstKey;
+  
+  // For hierarchical types, find the actual type code by checking prefixes
   const identType = externalIdentTypes.find(
-    (type) => type.code === identTypeCode
+    (type) => {
+      if (type.shape === "hierarchical" && type.labels) {
+        // Check if any form key starts with this type's code followed by underscore
+        return Object.keys(validatedFields.data).some(key => 
+          key.startsWith(type.code + "_")
+        );
+      }
+      return type.code === firstKey;
+    }
   );
+  
   if (!identType) {
     return {
       status: "error",
-      message: `Invalid external identifier type: ${identTypeCode}`,
+      message: `Invalid external identifier type: ${firstKey}`,
     };
   }
   const identTypeId = identType.id;
+  const isHierarchical = identType.shape === "hierarchical";
+  
+  // Construct the value based on identifier type
+  let newIdentValue: string | null = null;
+  if (isHierarchical && identType.labels) {
+    newIdentValue = constructHierarchicalPath(
+      identType.code!,
+      identType.labels,
+      validatedFields.data
+    );
+  } else {
+    newIdentValue = validatedFields.data[firstKey] || null;
+  }
+  
   try {
     const { data: exisitingIdent, error } = await client
       .from("external_ident")
@@ -85,7 +145,7 @@ export async function updateExternalIdent(
       if (count === 1) {
         return {
           status: "error",
-          message: `Cannot delete ${identTypeCode}. Unit must have at least one external identifier.`,
+          message: `Cannot delete ${identType.code}. Unit must have at least one external identifier.`,
         };
       }
       response = await client
@@ -94,40 +154,59 @@ export async function updateExternalIdent(
         .eq("type_id", identTypeId!)
         .eq(unitIdField, parseInt(id));
     } else if (!exisitingIdent || exisitingIdent.length === 0) {
-      response = await client.from("external_ident").insert({
-        ident: newIdentValue,
+      // Note: 'shape' and 'labels' are derived by trigger from type_id
+      // but TypeScript requires them. The trigger will override our value.
+      const insertData: Record<string, unknown> = {
         [unitIdField]: parseInt(id),
         type_id: identTypeId!,
         edit_by_user_id: userId,
-      });
+        shape: identType.shape!, // Will be overwritten by trigger
+      };
+      
+      if (isHierarchical) {
+        insertData.idents = newIdentValue;
+      } else {
+        insertData.ident = newIdentValue;
+      }
+      
+      response = await client.from("external_ident").insert(insertData);
     } else {
+      const updateData: Record<string, unknown> = {
+        edit_by_user_id: userId,
+        edit_at: new Date().toISOString(),
+      };
+      
+      if (isHierarchical) {
+        updateData.idents = newIdentValue;
+        updateData.ident = null; // Clear the regular ident field
+      } else {
+        updateData.ident = newIdentValue;
+        updateData.idents = null; // Clear the hierarchical idents field
+      }
+      
       response = await client
         .from("external_ident")
-        .update({
-          ident: newIdentValue,
-          edit_by_user_id: userId,
-          edit_at: new Date().toISOString(),
-        })
+        .update(updateData)
         .eq("type_id", identTypeId!)
         .eq(unitIdField, parseInt(id));
     }
     if (response?.error) {
-      logger.error(response.error, `failed to update ${identTypeCode}`);
+      logger.error(response.error, `failed to update ${identType.code}`);
       return {
         status: "error",
-        message: `failed to update ${identTypeCode}: ${response.error.message}`,
+        message: `failed to update ${identType.code}: ${response.error.message}`,
       };
     }
 
     revalidatePath(`/${unitType}s/${id}`);
     return {
       status: "success",
-      message: `${identTypeCode} successfully updated`,
+      message: `${identType.code} successfully updated`,
     };
   } catch (error) {
     return {
       status: "error",
-      message: `failed to update ${identTypeCode}`,
+      message: `failed to update ${identType.code}`,
     };
   }
 }