@digihmis/esm-patient-registration-app 1.0.0

package/src/registration-form/registration-form.component.tsx

@@ -0,0 +1,1565 @@
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import {
+  Button,
+  TextInput,
+  ComboBox,
+  ContentSwitcher,
+  Switch,
+  TextArea,
+  Layer,
+  Select,
+  SelectItem,
+  InlineNotification,
+  NotificationActionButton,
+  SkeletonText,
+  RadioButtonGroup,
+  RadioButton,
+  Tag,
+} from '@carbon/react';
+import {
+  navigate,
+  OpenmrsDatePicker,
+  useConfig,
+  showSnackbar,
+  openmrsFetch,
+  restBaseUrl,
+  type FetchResponse,
+  UserHasAccess,
+  isDesktop,
+  useLayoutType,
+  launchWorkspace,
+  useSession,
+  ExtensionSlot,
+} from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { useForm, Controller } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import styles from './registration-form.scss';
+import { TrashCan, ArrowLeft, ArrowRight } from '@carbon/react/icons';
+import {
+  getCounties,
+  getSubCountiesByCounty,
+  getAllWardsInCounty,
+  type County,
+  type SubCounty,
+  type Ward,
+} from 'osm-kenya-boundaries';
+import { RegistrationConfig } from '../config-schema';
+import { Autosuggest } from '../components/custom-input/autosuggest/autosuggest.component';
+import { ConceptAnswers, PatientUuidMapType, FormValues, PatientIdentifierType } from '../type';
+import { fetchPatientIdentifierTypesWithSources } from '../identifier-workspace/identifier.resource';
+import { FormManager, SavePatientTransactionManager } from './form-manager';
+import { v4 as uuidv4 } from 'uuid';
+import { fetchPerson, useConceptAnswers } from './registration-form.resource';
+
+interface RelationshipType {
+  display: string;
+  uuid: string;
+  direction: string;
+}
+
+interface RelationshipValue {
+  relatedPersonUuid: string;
+  relatedPersonName?: string;
+  relationshipType?: string;
+  initialrelationshipTypeValue?: string;
+  action?: 'ADD' | 'UPDATE' | 'DELETE';
+  uuid?: string;
+}
+
+// Function to create dynamic validation schema
+const createRegistrationSchema = (maritalStatusRequired: boolean = false) => {
+  const baseSchema = {
+    isNameKnown: z.boolean().default(true),
+    firstName: z.string().optional(),
+    middleName: z.string().max(50, 'Middle name must be less than 50 characters').optional(),
+    familyName: z.string().optional(),
+    gender: z.string().min(1, 'Gender is required'),
+    isDobKnown: z.boolean().default(true),
+    birthdate: z.date().optional(),
+    yearsEstimated: z.number().min(0, 'Years must be 0 or greater').max(120, 'Years must be less than 120').optional(),
+    monthsEstimated: z
+      .number()
+      .min(0, 'Months must be 0 or greater')
+      .max(11, 'Months must be between 0 and 11')
+      .optional(),
+    county: z.string().min(1, 'County is required'),
+    countyUuid: z.string().optional(),
+    subCounty: z.string().min(1, 'Sub county is required'),
+    subCountyUuid: z.string().optional(),
+    ward: z.string().min(1, 'Ward is required'),
+    wardUuid: z.string().optional(),
+    phoneNumber: z
+      .string()
+      .regex(/^(\+254|0)[17]\d{8}$/, 'Please enter a valid Kenyan phone number (e.g., 0712345678 or +254712345678)')
+      .optional()
+      .or(z.literal('')),
+    email: z.string().email('Please enter a valid email address').optional().or(z.literal('')),
+    isDead: z.boolean().default(false),
+    deathDate: z.date().optional(),
+    deathCause: z.string().optional(),
+    nonCodedCauseOfDeath: z.string().optional(),
+    identifiers: z.record(z.string().optional()).optional(),
+  };
+
+  const schemaWithMaritalStatus = {
+    ...baseSchema,
+    maritalStatus: maritalStatusRequired ? z.string().min(1, 'Marital status is required') : z.string().optional(),
+  };
+
+  return z.object(schemaWithMaritalStatus).superRefine((data, ctx) => {
+    if (data.isNameKnown) {
+      if (!data.firstName || data.firstName.trim() === '') {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'First name is required',
+          path: ['firstName'],
+        });
+      } else if (data.firstName.length > 50) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'First name must be less than 50 characters',
+          path: ['firstName'],
+        });
+      }
+
+      if (!data.familyName || data.familyName.trim() === '') {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Family name is required',
+          path: ['familyName'],
+        });
+      } else if (data.familyName.length > 50) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Family name must be less than 50 characters',
+          path: ['familyName'],
+        });
+      }
+    }
+
+    if (data.isDobKnown && !data.birthdate) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Birthdate is required when date of birth is known',
+        path: ['birthdate'],
+      });
+    }
+
+    if (!data.isDobKnown && !data.yearsEstimated && !data.monthsEstimated) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Either years or months must be provided',
+        path: ['yearsEstimated'],
+      });
+    }
+
+    if (data.birthdate && data.birthdate > new Date()) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Birthdate cannot be in the future',
+        path: ['birthdate'],
+      });
+    }
+
+    if (data.isDead && !data.deathCause) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Cause of death is required when patient is marked as deceased',
+        path: ['deathCause'],
+      });
+    }
+
+    if (data.isDead && !data.deathDate) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Death date is required when patient is marked as deceased',
+        path: ['deathDate'],
+      });
+    }
+
+    // Validate that at least one identifier has a value (recommended but not required)
+    if (data.identifiers) {
+      const hasAtLeastOneIdentifier = Object.values(data.identifiers).some((value) => value && value.trim() !== '');
+
+      if (!hasAtLeastOneIdentifier) {
+        // Add a warning but don't block submission
+        // This will be shown as an inline notification instead
+      }
+    }
+  });
+};
+
+type RegistrationFormData = z.infer<ReturnType<typeof createRegistrationSchema>>;
+
+interface RelationshipTypeResponse {
+  uuid: string;
+  display: string;
+  displayAIsToB?: string;
+  displayBIsToA?: string;
+}
+
+function useRelationshipTypes() {
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse<{ results: RelationshipTypeResponse[] }>, Error>(
+    `${restBaseUrl}/relationshiptype?v=full`,
+    openmrsFetch,
+  );
+
+  if (error) {
+    showSnackbar({
+      title: error.name,
+      subtitle: error.message,
+      kind: 'error',
+    });
+  }
+
+  return {
+    data: data?.data?.results,
+    isLoading,
+    error,
+  };
+}
+
+interface RelationshipViewProps {
+  relationship: RelationshipValue;
+  index: number;
+  displayRelationshipTypes: RelationshipType[];
+  onUpdate: (index: number, field: string, value: any) => void;
+  onDelete: (index: number) => void;
+  onRestore: (index: number) => void;
+}
+
+const RelationshipView: React.FC<RelationshipViewProps> = ({
+  relationship,
+  index,
+  displayRelationshipTypes,
+  onUpdate,
+  onDelete,
+  onRestore,
+}) => {
+  const { t } = useTranslation();
+  const [isInvalid, setIsInvalid] = useState(false);
+  const [hasInteracted, setHasInteracted] = useState(false);
+  const newRelationship = !relationship.uuid;
+
+  const searchPerson = useCallback(
+    async (query: string) => {
+      const abortController = new AbortController();
+      try {
+        const results = await fetchPerson(query, abortController);
+        return results;
+      } catch (error) {
+        console.error(`[RelationshipView ${index}] Error searching for person:`, error);
+        return [];
+      }
+    },
+    [index],
+  );
+
+  const handleRelationshipTypeChange = useCallback(
+    (event) => {
+      const { target } = event;
+      const value = target.options[target.selectedIndex].value;
+      onUpdate(index, 'relationshipType', value);
+      if (!relationship?.action) {
+        onUpdate(index, 'action', 'UPDATE');
+      }
+    },
+    [index, relationship?.action, onUpdate],
+  );
+
+  const handleSuggestionSelected = useCallback(
+    (fieldId: string, value: string | undefined) => {
+      setHasInteracted(true);
+      if (value) {
+        setIsInvalid(false);
+        onUpdate(index, 'relatedPersonUuid', value);
+        if (!relationship?.action) {
+          onUpdate(index, 'action', 'UPDATE');
+        }
+      } else if (value === '') {
+        setIsInvalid(true);
+        onUpdate(index, 'relatedPersonUuid', '');
+      }
+    },
+    [index, relationship?.action, onUpdate],
+  );
+
+  return relationship.action !== 'DELETE' ? (
+    <div>
+      <div>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
+          <h4 style={{ fontSize: '1rem', fontWeight: 600 }}>{t('relationshipPlaceholder', 'Relationship')}</h4>
+          <Button
+            kind="ghost"
+            iconDescription={t('deleteRelationshipTooltipText', 'Delete')}
+            hasIconOnly
+            onClick={() => onDelete(index)}>
+            <TrashCan size={16} />
+          </Button>
+        </div>
+        <div style={{ marginBottom: '1rem' }}>
+          {newRelationship ? (
+            <Autosuggest
+              id={`relationships[${index}].relatedPersonUuid`}
+              labelText={t('relativeFullNameLabelText', 'Full name')}
+              placeholder={t('relativeNamePlaceholder', 'Firstname Familyname')}
+              defaultValue={relationship.relatedPersonName}
+              onSuggestionSelected={handleSuggestionSelected}
+              invalid={hasInteracted && isInvalid}
+              invalidText={t('relationshipPersonMustExist', 'Related person must be an existing person')}
+              getSearchResults={searchPerson}
+              getDisplayValue={(item) => item.display}
+              getFieldValue={(item) => item.uuid}
+            />
+          ) : (
+            <>
+              <span style={{ fontSize: '0.75rem', fontWeight: 600 }}>
+                {t('relativeFullNameLabelText', 'Full name')}
+              </span>
+              <p style={{ marginTop: '0.5rem' }}>{relationship.relatedPersonName}</p>
+            </>
+          )}
+        </div>
+      </div>
+      <div style={{ marginBottom: '1rem' }}>
+        <Layer>
+          <Select
+            id={`relationship-type-${index}`}
+            labelText={t('relationship', 'Relationship')}
+            onChange={handleRelationshipTypeChange}
+            name={`relationships[${index}].relationshipType`}
+            value={relationship?.relationshipType || 'placeholder-item'}>
+            <SelectItem
+              disabled
+              hidden
+              value="placeholder-item"
+              text={t('relationshipToPatient', 'Relationship to patient')}
+            />
+            {displayRelationshipTypes && displayRelationshipTypes.length > 0 ? (
+              displayRelationshipTypes.map((relationshipType, idx) => (
+                <SelectItem
+                  text={relationshipType.display}
+                  value={`${relationshipType.uuid}/${relationshipType.direction}`}
+                  key={`relationship-${relationshipType.uuid}-${relationshipType.direction}-${idx}`}
+                />
+              ))
+            ) : (
+              <SelectItem disabled value="no-options" text={t('noOptions', 'No options available')} />
+            )}
+          </Select>
+        </Layer>
+      </div>
+    </div>
+  ) : (
+    <InlineNotification
+      kind="info"
+      title={t('relationshipRemovedText', 'Relationship removed')}
+      actions={
+        <NotificationActionButton onClick={() => onRestore(index)}>
+          {t('restoreRelationshipActionButton', 'Undo')}
+        </NotificationActionButton>
+      }
+    />
+  );
+};
+
+export const RegistrationForm: React.FC = () => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const session = useSession();
+  const [isNameKnown, setIsNameKnown] = useState(true);
+  const [isDobKnown, setIsDobKnown] = useState(true);
+  const [isDead, setIsDead] = useState(false);
+  const [selectedCounty, setSelectedCounty] = useState<County | null>(null);
+  const [selectedSubCounty, setSelectedSubCounty] = useState<SubCounty | null>(null);
+  const [selectedWard, setSelectedWard] = useState<Ward | null>(null);
+
+  const [allIdentifierTypes, setAllIdentifierTypes] = useState<Array<PatientIdentifierType>>([]);
+  const [selectedIdentifierUuids, setSelectedIdentifierUuids] = useState<Array<string>>([]);
+  const [isLoadingIdentifiers, setIsLoadingIdentifiers] = useState(true);
+  const [showIdentifierWarning, setShowIdentifierWarning] = useState(false);
+
+  const config = useConfig<RegistrationConfig>();
+  const { fieldConfigurations, freeTextFieldConceptUuid, defaultPatientIdentifierTypes, fieldDefinitions } = config;
+  const conceptUuid = fieldConfigurations?.causeOfDeath?.conceptUuid;
+  const fieldConfigs = fieldConfigurations?.gender;
+
+  const maritalStatusField = fieldDefinitions?.find((fieldDefinition) => fieldDefinition.id === 'maritalStatus');
+  const maritalStatusOptions: Array<ConceptAnswers> =
+    maritalStatusField?.customConceptAnswers?.map((concept) => ({
+      uuid: concept?.uuid,
+      display: concept?.label,
+    })) ?? [];
+
+  const [relationships, setRelationships] = useState<RelationshipValue[]>([]);
+  const [displayRelationshipTypes, setDisplayRelationshipTypes] = useState<RelationshipType[]>([]);
+
+  const {
+    data: relationshipTypesData,
+    isLoading: isLoadingRelationshipTypes,
+    error: errorLoadingRelationshipTypes,
+  } = useRelationshipTypes();
+
+  useEffect(() => {
+    const loadIdentifierTypes = async () => {
+      try {
+        setIsLoadingIdentifiers(true);
+        const types = await fetchPatientIdentifierTypesWithSources();
+        setAllIdentifierTypes(types);
+
+        if (defaultPatientIdentifierTypes && defaultPatientIdentifierTypes.length > 0) {
+          setSelectedIdentifierUuids(defaultPatientIdentifierTypes);
+        }
+      } catch (error) {
+        showSnackbar({
+          title: t('errorLoadingIdentifiers', 'Error loading identifiers'),
+          kind: 'error',
+        });
+      } finally {
+        setIsLoadingIdentifiers(false);
+      }
+    };
+
+    loadIdentifierTypes();
+  }, [t, defaultPatientIdentifierTypes]);
+
+  const selectedIdentifierTypes = useMemo(() => {
+    return allIdentifierTypes.filter((type) => selectedIdentifierUuids.includes(type.uuid));
+  }, [allIdentifierTypes, selectedIdentifierUuids]);
+
+  useEffect(() => {
+    if (relationshipTypesData && Array.isArray(relationshipTypesData)) {
+      const tmp: RelationshipType[] = [];
+
+      relationshipTypesData.forEach((type) => {
+        let displayA = type.displayAIsToB;
+        let displayB = type.displayBIsToA;
+
+        if (!displayA || !displayB) {
+          const displayParts = type.display.split('/');
+          displayA = displayA || displayParts[0]?.trim() || type.display;
+          displayB = displayB || displayParts[1]?.trim() || type.display;
+        }
+
+        const aIsToB: RelationshipType = {
+          display: displayA,
+          uuid: type.uuid,
+          direction: 'aIsToB',
+        };
+
+        const bIsToA: RelationshipType = {
+          display: displayB,
+          uuid: type.uuid,
+          direction: 'bIsToA',
+        };
+
+        if (displayA === displayB) {
+          tmp.push(aIsToB);
+        } else if (displayB.toLowerCase() === 'patient') {
+          tmp.push(aIsToB, {
+            display: `Patient (${displayA})`,
+            uuid: type.uuid,
+            direction: 'bIsToA',
+          });
+        } else {
+          tmp.push(aIsToB, bIsToA);
+        }
+      });
+
+      setDisplayRelationshipTypes(tmp);
+    }
+  }, [relationshipTypesData]);
+
+  const handleAddRelationship = useCallback(() => {
+    setRelationships((prev) => [
+      ...prev,
+      {
+        relatedPersonUuid: '',
+        action: 'ADD',
+      },
+    ]);
+  }, []);
+
+  const handleUpdateRelationship = useCallback((index: number, field: string, value: any) => {
+    setRelationships((prev) => {
+      const updated = [...prev];
+      updated[index] = {
+        ...updated[index],
+        [field]: value,
+      };
+      return updated;
+    });
+  }, []);
+
+  const handleDeleteRelationship = useCallback((index: number) => {
+    setRelationships((prev) => {
+      const updated = [...prev];
+      if (updated[index].action === 'ADD') {
+        return updated.filter((_, i) => i !== index);
+      } else {
+        updated[index] = {
+          ...updated[index],
+          action: 'DELETE',
+        };
+        return updated;
+      }
+    });
+  }, []);
+
+  const handleRestoreRelationship = useCallback((index: number) => {
+    setRelationships((prev) => {
+      const updated = [...prev];
+      updated[index] = {
+        ...updated[index],
+        action: undefined,
+        relationshipType: updated[index].initialrelationshipTypeValue,
+      };
+      return updated;
+    });
+  }, []);
+
+  const shouldFetchConcepts = conceptUuid && typeof conceptUuid === 'string' && conceptUuid.trim() !== '';
+
+  const {
+    data: conceptAnswers,
+    isLoading: isLoadingConceptAnswers,
+    error: errorLoadingConceptAnswers,
+  } = useConceptAnswers(shouldFetchConcepts ? conceptUuid : null);
+
+  const answers = useMemo(() => {
+    if (isLoadingConceptAnswers) {
+      return [];
+    }
+    if (conceptAnswers && Array.isArray(conceptAnswers)) {
+      return conceptAnswers.map((answer) => ({
+        uuid: answer.uuid,
+        display: answer.display,
+        label: answer.display,
+      }));
+    }
+    return [];
+  }, [conceptAnswers, isLoadingConceptAnswers]);
+
+  const counties = useMemo(() => getCounties(), []);
+
+  const subCounties = useMemo(() => {
+    if (!selectedCounty) {
+      return [];
+    }
+    return getSubCountiesByCounty(selectedCounty.name);
+  }, [selectedCounty]);
+
+  const wards = useMemo(() => {
+    if (!selectedCounty) {
+      return [];
+    }
+    if (!selectedSubCounty) {
+      return getAllWardsInCounty(selectedCounty.name);
+    }
+    const allCountyWards = getAllWardsInCounty(selectedCounty.name);
+    return allCountyWards.filter(
+      (ward) =>
+        ward.constituency.toLowerCase().includes(selectedSubCounty.name.toLowerCase()) ||
+        selectedSubCounty.name.toLowerCase().includes(ward.constituency.toLowerCase()),
+    );
+  }, [selectedCounty, selectedSubCounty]);
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    watch,
+    setValue,
+    trigger,
+  } = useForm<RegistrationFormData>({
+    resolver: zodResolver(createRegistrationSchema(maritalStatusField?.validation.required || false)),
+    defaultValues: {
+      isNameKnown: true,
+      isDobKnown: true,
+      firstName: '',
+      middleName: '',
+      familyName: '',
+      gender: '',
+      maritalStatus: '',
+      yearsEstimated: undefined,
+      monthsEstimated: undefined,
+      county: '',
+      countyUuid: '',
+      subCounty: '',
+      subCountyUuid: '',
+      ward: '',
+      wardUuid: '',
+      phoneNumber: '',
+      email: '',
+      isDead: false,
+      deathDate: undefined,
+      deathCause: '',
+      nonCodedCauseOfDeath: '',
+      identifiers: {},
+    },
+  });
+
+  const identifiers = useMemo(() => watch('identifiers') || {}, [watch]);
+
+  useEffect(() => {
+    const hasAtLeastOneIdentifier = Object.values(identifiers).some(
+      (value) => value && typeof value === 'string' && value.trim() !== '',
+    );
+    setShowIdentifierWarning(!hasAtLeastOneIdentifier && selectedIdentifierTypes.length > 0);
+  }, [identifiers, selectedIdentifierTypes.length]);
+
+  const handleConfigureIdentifiers = useCallback(() => {
+    launchWorkspace('configure-identifiers', {
+      currentIdentifiers: selectedIdentifierUuids,
+      onSave: (selected: Array<string>) => {
+        setSelectedIdentifierUuids(selected);
+        const currentIdentifiers = { ...identifiers };
+        const newIdentifiers = {};
+
+        selected.forEach((uuid) => {
+          const identifierType = allIdentifierTypes.find((t) => t.uuid === uuid);
+          if (identifierType) {
+            newIdentifiers[identifierType.fieldName] = currentIdentifiers[identifierType.fieldName] || '';
+          }
+        });
+
+        setValue('identifiers', newIdentifiers);
+
+        showSnackbar({
+          title: t('identifiersUpdated', 'Identifiers updated'),
+          subtitle: t('identifiersConfigured', '{{count}} identifier(s) configured', { count: selected.length }),
+          kind: 'success',
+        });
+      },
+    });
+  }, [selectedIdentifierUuids, allIdentifierTypes, identifiers, setValue, t]);
+
+  const handleBackToSearch = () => {
+    navigate({ to: window.getOpenmrsSpaBase() + 'home/registration' });
+  };
+
+  const onSubmit = async (data: RegistrationFormData) => {
+    try {
+      const incompleteRelationships = relationships.filter(
+        (rel) => rel.action !== 'DELETE' && (!rel.relatedPersonUuid || !rel.relationshipType),
+      );
+
+      if (incompleteRelationships.length > 0) {
+        showSnackbar({
+          title: t('validationError', 'Validation Error'),
+          subtitle: t('incompleteRelationships', 'Please complete all relationship fields'),
+          kind: 'error',
+        });
+        return;
+      }
+
+      let calculatedBirthdate = data.birthdate;
+      let birthdateEstimated = !data.isDobKnown;
+
+      if (!data.isDobKnown && (data.yearsEstimated || data.monthsEstimated)) {
+        const today = new Date();
+        const years = data.yearsEstimated || 0;
+        const months = data.monthsEstimated || 0;
+        calculatedBirthdate = new Date(today.getFullYear() - years, today.getMonth() - months, today.getDate());
+      }
+
+      const patientUuid = uuidv4();
+
+      const patientUuidMap: PatientUuidMapType = {
+        preferredNameUuid: uuidv4(),
+        additionalNameUuid: data.isNameKnown ? undefined : uuidv4(),
+      };
+
+      const identifiersForFormManager = {};
+      for (const identifierType of selectedIdentifierTypes) {
+        const fieldName = identifierType.fieldName;
+        const autoGeneration = identifierType.identifierSources?.some(
+          (source) => source?.autoGenerationOption?.automaticGenerationEnabled === true,
+        );
+        const manualEntryEnabled = identifierType.identifierSources?.some(
+          (source) => source?.autoGenerationOption?.manualEntryEnabled === true,
+        );
+
+        const selectedSource = identifierType.identifierSources?.[0];
+
+        identifiersForFormManager[fieldName] = {
+          identifierTypeUuid: identifierType.uuid,
+          identifierValue: data.identifiers?.[fieldName] || '',
+          identifierUuid: uuidv4(),
+          selectedSource: selectedSource,
+          preferred: identifierType.required || false,
+          autoGeneration: autoGeneration,
+          initialValue: '',
+          identifierName: identifierType.name,
+        };
+      }
+
+      const attributes = {};
+      if (data.phoneNumber) {
+        attributes['b2c38640-2603-4629-aebd-3b54f33f1e3a'] = data.phoneNumber;
+      }
+
+      const obs = {};
+      if (data.maritalStatus && maritalStatusField?.uuid) {
+        obs[maritalStatusField.uuid] = data.maritalStatus;
+      }
+
+      const address = {
+        countyDistrict: data.county,
+        stateProvince: data.subCounty,
+        address4: data.ward,
+        preferred: true,
+      };
+
+      const formValues: FormValues = {
+        patientUuid: patientUuid,
+        givenName: data.firstName || config?.name?.defaultUnknownGivenName || 'UNKNOWN',
+        middleName: data.middleName || '',
+        familyName: data.familyName || config?.name?.defaultUnknownFamilyName || 'UNKNOWN',
+        addNameInLocalLanguage: false,
+        additionalGivenName: '',
+        additionalMiddleName: '',
+        additionalFamilyName: '',
+        gender: data.gender.toLowerCase(),
+        birthdate: calculatedBirthdate,
+        birthdateEstimated: birthdateEstimated,
+        address: { ...address, preferred: address.preferred.toString() },
+        attributes: attributes,
+        identifiers: identifiersForFormManager,
+        relationships: relationships.map((rel) => ({
+          relatedPersonUuid: rel.relatedPersonUuid,
+          relationshipType: rel.relationshipType,
+          uuid: rel.uuid,
+          action: rel.action,
+        })),
+        obs: obs,
+        isDead: data.isDead,
+        deathDate: data.deathDate,
+        deathTime: '',
+        deathTimeFormat: 'AM',
+        deathCause: data.deathCause,
+        nonCodedCauseOfDeath: data.nonCodedCauseOfDeath,
+        telephoneNumber: data.phoneNumber || '',
+        yearsEstimated: data.yearsEstimated || 0,
+        monthsEstimated: data.monthsEstimated || 0,
+      };
+
+      const currentLocation = session?.sessionLocation?.uuid;
+
+      const savePatientTransactionManager = new SavePatientTransactionManager();
+
+      const savedPatientUuid = await FormManager.savePatientFormOnline(
+        true,
+        formValues,
+        patientUuidMap,
+        {},
+        {
+          imageData: '',
+          dateTime: '',
+        },
+        currentLocation,
+        {},
+        session,
+        config,
+        savePatientTransactionManager,
+      );
+
+      // Fetch the newly created patient data
+      const patientResponse = await openmrsFetch(`${restBaseUrl}/patient/${savedPatientUuid}?v=full`);
+      const patient = patientResponse.data;
+
+      showSnackbar({
+        title: t('success', 'Success'),
+        subtitle: t('patientRegistered', 'Patient registered successfully'),
+        kind: 'success',
+      });
+
+      navigate({ to: `${window.getOpenmrsSpaBase()}home/registration` });
+
+      launchWorkspace('check-in-form', {
+        patientUuid: savedPatientUuid,
+        patient: patient,
+        openedFrom: 'registration',
+        showPatientHeader: true,
+      });
+    } catch (error) {
+      console.error('Submission error:', error);
+
+      let errorMessage = t('submissionFailed', 'Failed to submit form');
+
+      if (error?.responseBody) {
+        const responseBody = error.responseBody;
+
+        if (responseBody.error?.globalErrors && responseBody.error.globalErrors.length > 0) {
+          errorMessage = responseBody.error.globalErrors[0].message;
+        } else if (responseBody.error?.fieldErrors && Object.keys(responseBody.error.fieldErrors).length > 0) {
+          const fieldErrors = responseBody.error.fieldErrors;
+          const firstField = Object.keys(fieldErrors)[0];
+          errorMessage = `${firstField}: ${fieldErrors[firstField][0].message}`;
+        } else if (responseBody.error?.message) {
+          errorMessage = responseBody.error.message;
+        }
+      } else if (error?.message) {
+        errorMessage = error.message;
+      }
+
+      showSnackbar({
+        title: t('error', 'Error'),
+        subtitle: errorMessage,
+        kind: 'error',
+      });
+    }
+  };
+
+  const handleNameKnownChange = (value: boolean) => {
+    setIsNameKnown(value);
+    setValue('isNameKnown', value);
+    if (!value) {
+      setValue('firstName', config?.name?.defaultUnknownGivenName || 'UNKNOWN');
+      setValue('middleName', '');
+      setValue('familyName', config?.name?.defaultUnknownFamilyName || 'UNKNOWN');
+    } else {
+      setValue('firstName', '');
+      setValue('middleName', '');
+      setValue('familyName', '');
+    }
+  };
+
+  const handleDobKnownChange = (value: boolean) => {
+    setIsDobKnown(value);
+    setValue('isDobKnown', value);
+    if (value) {
+      setValue('yearsEstimated', undefined);
+      setValue('monthsEstimated', undefined);
+    } else {
+      setValue('birthdate', undefined);
+    }
+  };
+
+  const handleIsDeadChange = (value: boolean) => {
+    setIsDead(value);
+    setValue('isDead', value);
+    if (!value) {
+      setValue('deathDate', undefined);
+      setValue('deathCause', '');
+      setValue('nonCodedCauseOfDeath', '');
+    }
+  };
+
+  const today = new Date();
+
+  return (
+    <div className={styles.FormContainer}>
+      <div className={styles.FormHeader}>
+        <button
+          className={styles.BackButton}
+          onClick={handleBackToSearch}
+          type="button"
+          aria-label={t('goBack', 'Go back')}>
+          <ArrowLeft size={20} />
+          <span className={styles.BackButtonText}>{t('back', 'Back')}</span>
+        </button>
+
+        <div className={styles.TitleSection}>
+          <h1 className={styles.FormTitle}>{t('registerAPatient', 'Register a Patient')}</h1>
+          <p className={styles.FormSubtitle}>
+            {t('allFieldsRequiredText', 'All fields are required unless marked optional')}
+          </p>
+        </div>
+      </div>
+
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className={styles.FormContent}>
+          <section className={styles.PatientDetailsSection}>
+            <h2 className={styles.SectionTitle}>{t('basicInformation', '1. Basic Information')}</h2>
+
+            <div className={styles.halfWidthInDesktopView}>
+              <UserHasAccess privilege={['Get Identifier Types', 'Add Patient Identifiers']}>
+                <div className={styles.identifierLabelText}>
+                  <span className={styles.label01}>
+                    {t('idFieldLabelText', 'Identifiers')}
+                    <span className={styles.required}>*</span>
+                  </span>
+                  <Button
+                    kind="ghost"
+                    className={styles.configureIdentifiersButton}
+                    onClick={handleConfigureIdentifiers}
+                    size={isDesktop(layout) ? 'sm' : 'md'}
+                    disabled={isLoadingIdentifiers}>
+                    {t('configure', 'Configure')} <ArrowRight className={styles.arrowRightIcon} size={16} />
+                  </Button>
+                </div>
+              </UserHasAccess>
+            </div>
+
+            {isLoadingIdentifiers ? (
+              <SkeletonText />
+            ) : (
+              <div>
+                {selectedIdentifierTypes.length === 0 ? (
+                  <p className={styles.noIdentifiersConfiguredText}>
+                    {t('noIdentifiersConfigured', 'No identifiers configured. Click Configure to add identifiers.')}
+                  </p>
+                ) : (
+                  <>
+                    {/* {showIdentifierWarning && (
+                      <InlineNotification
+                        kind="warning"
+                        lowContrast
+                        hideCloseButton
+                        subtitle={t(
+                          'identifierRecommendation',
+                          'It is recommended to enter at least one identifier for the patient.',
+                        )}
+                        style={{ marginBottom: '1rem' }}
+                      />
+                    )} */}
+                    {selectedIdentifierTypes.map((identifierType) => {
+                      const autoGeneration =
+                        identifierType.identifierSources?.some(
+                          (source) => source?.autoGenerationOption?.automaticGenerationEnabled === true,
+                        ) ?? false;
+
+                      const manualEntryEnabled =
+                        identifierType.identifierSources?.some(
+                          (source) => source?.autoGenerationOption?.manualEntryEnabled === true,
+                        ) ?? false;
+
+                      const isAutoGeneratedOnly = autoGeneration && !manualEntryEnabled;
+
+                      return (
+                        <div key={identifierType.fieldName} style={{ marginBottom: '1rem' }}>
+                          {isAutoGeneratedOnly ? (
+                            <div>
+                              <div
+                                style={{
+                                  display: 'flex',
+                                  alignItems: 'center',
+                                  gap: '0.5rem',
+                                  marginBottom: '0.5rem',
+                                }}>
+                                <span
+                                  className={styles.label02}
+                                  style={{ fontWeight: 'bold', color: 'var(--cds-text-secondary)' }}>
+                                  {identifierType.name}
+                                  {identifierType.required && <span className={styles.required}>*</span>}
+                                </span>
+                                <Tag size="md" type="blue">
+                                  {t('autoGenerated', 'Auto-generated')}
+                                </Tag>
+                              </div>
+                              <div
+                                style={{
+                                  fontSize: '0.75rem',
+                                  color: 'var(--cds-text-secondary)',
+                                  fontStyle: 'italic',
+                                }}>
+                                {t(
+                                  'identifierAutoGenerateInfo',
+                                  'This identifier will be automatically generated when you save the patient.',
+                                )}
+                              </div>
+                            </div>
+                          ) : (
+                            <Controller
+                              name={`identifiers.${identifierType.fieldName}`}
+                              control={control}
+                              render={({ field }) => (
+                                <TextInput
+                                  {...field}
+                                  id={identifierType.fieldName}
+                                  labelText={
+                                    <div
+                                      style={{
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: '0.5rem',
+                                        flexWrap: 'wrap',
+                                      }}>
+                                      <span>
+                                        {identifierType.name}
+                                        {identifierType.required && <span className={styles.required}>*</span>}
+                                      </span>
+                                      {autoGeneration && (
+                                        <Tag size="md" type="blue">
+                                          {t('autoGenerated', 'Auto-generated')}
+                                        </Tag>
+                                      )}
+                                    </div>
+                                  }
+                                  placeholder={`${t('enter', 'Enter')} ${identifierType.name}`}
+                                  className={styles.inputField}
+                                />
+                              )}
+                            />
+                          )}
+                        </div>
+                      );
+                    })}
+                  </>
+                )}
+              </div>
+            )}
+            <div className={styles.FormField}>
+              <div className={styles.dobContentSwitcherLabel}>
+                <span className={styles.label01}>{t('patientNameKnown', "Is the patient's name known?")}</span>
+              </div>
+              <ContentSwitcher
+                className={styles.contentSwitcher}
+                selectedIndex={isNameKnown ? 0 : 1}
+                onChange={(e) => handleNameKnownChange(e.name === 'known')}>
+                <Switch name="known" text={t('yes', 'Yes')} />
+                <Switch name="unknown" text={t('no', 'No')} />
+              </ContentSwitcher>
+            </div>
+
+            {isNameKnown && (
+              <div className={styles.FormField}>
+                <span className={styles.label01}>
+                  {t('patientName', 'Patient Name')}
+                  <span className={styles.required}>*</span>
+                </span>
+                <div className={styles.nameFieldsContainer}>
+                  <Controller
+                    name="firstName"
+                    control={control}
+                    render={({ field }) => (
+                      <TextInput
+                        {...field}
+                        id="firstName"
+                        labelText={t('firstName', 'First Name')}
+                        placeholder={t('firstName', 'First Name')}
+                        className={styles.inputField}
+                        invalid={!!errors.firstName}
+                        invalidText={errors.firstName?.message}
+                      />
+                    )}
+                  />
+                  <Controller
+                    name="middleName"
+                    control={control}
+                    render={({ field }) => (
+                      <TextInput
+                        {...field}
+                        id="middleName"
+                        labelText={t('middleName', 'Middle Name')}
+                        placeholder={t('middleName', 'Middle Name')}
+                        className={styles.inputField}
+                        invalid={!!errors.middleName}
+                        invalidText={errors.middleName?.message}
+                      />
+                    )}
+                  />
+                  <Controller
+                    name="familyName"
+                    control={control}
+                    render={({ field }) => (
+                      <TextInput
+                        {...field}
+                        id="familyName"
+                        labelText={t('familyName', 'Family Name')}
+                        placeholder={t('familyName', 'Family Name')}
+                        className={styles.inputField}
+                        invalid={!!errors.familyName}
+                        invalidText={errors.familyName?.message}
+                      />
+                    )}
+                  />
+                </div>
+              </div>
+            )}
+
+            {!isNameKnown && (
+              <div className={styles.FormField}>
+                <InlineNotification
+                  kind="info"
+                  lowContrast
+                  hideCloseButton
+                  title={t('unknownPatientName', 'Unknown Patient')}
+                  subtitle={t(
+                    'unknownPatientNameDescription',
+                    'Default names will be used for this patient: {{givenName}} {{familyName}}',
+                    {
+                      givenName: config?.name?.defaultUnknownGivenName || 'UNKNOWN',
+                      familyName: config?.name?.defaultUnknownFamilyName || 'UNKNOWN',
+                    },
+                  )}
+                />
+              </div>
+            )}
+
+            <div className={styles.FormField}>
+              <Controller
+                name="gender"
+                control={control}
+                render={({ field }) => (
+                  <RadioButtonGroup
+                    name="gender"
+                    legendText={
+                      <>
+                        <span className={styles.label01}>
+                          {t('genderLabelText', 'Gender')}
+                          <span className={styles.required}>*</span>
+                        </span>
+                      </>
+                    }
+                    orientation="vertical"
+                    onChange={(value) => {
+                      field.onChange(value);
+                      trigger('gender');
+                    }}
+                    valueSelected={field.value}
+                    invalid={!!errors.gender}
+                    invalidText={errors.gender?.message}>
+                    {fieldConfigs?.map((option) => (
+                      <RadioButton
+                        id={`gender-option-${option.value}`}
+                        key={option.label ?? option.value}
+                        labelText={t(option.label ?? option.value, option.label ?? option.value)}
+                        value={option.value}
+                        className={styles.radioButtonOption}
+                      />
+                    ))}
+                  </RadioButtonGroup>
+                )}
+              />
+            </div>
+
+            {maritalStatusField && (
+              <div className={styles.FormField}>
+                <Controller
+                  name="maritalStatus"
+                  control={control}
+                  render={({ field }) => (
+                    <ComboBox
+                      id="maritalStatus-combobox"
+                      className={styles.fullWidthCombobox}
+                      items={maritalStatusOptions}
+                      itemToString={(item) => (item ? item.display : '')}
+                      selectedItem={maritalStatusOptions.find((option) => option.uuid === field.value) || null}
+                      onChange={({ selectedItem }) => {
+                        field.onChange(selectedItem?.uuid || '');
+                      }}
+                      titleText={
+                        <>
+                          <span className={styles.label01}>
+                            {t('maritalStatusLabelText', 'Marital Status')}
+                            {maritalStatusField?.validation.required && <span className={styles.required}>*</span>}
+                          </span>
+                        </>
+                      }
+                      placeholder={t('selectAnOption', 'Select an option')}
+                      invalid={!!errors.maritalStatus}
+                      invalidText={errors.maritalStatus?.message}
+                    />
+                  )}
+                />
+              </div>
+            )}
+
+            <div className={styles.FormField}>
+              <span className={styles.label01}>
+                {t('birth', 'Birth')}
+                <span className={styles.required}>*</span>
+              </span>
+              <div className={styles.FormField}>
+                <div className={styles.dobContentSwitcherLabel}>
+                  <span className={styles.label01}>{t('dateOfBirthKnown', 'Date of Birth Known?')}</span>
+                </div>
+                <ContentSwitcher
+                  className={styles.contentSwitcher}
+                  selectedIndex={isDobKnown ? 0 : 1}
+                  onChange={(e) => handleDobKnownChange(e.name === 'known')}>
+                  <Switch name="known" text={t('yes', 'Yes')} />
+                  <Switch name="unknown" text={t('no', 'No')} />
+                </ContentSwitcher>
+              </div>
+
+              {isDobKnown ? (
+                <div className={styles.dobField}>
+                  <Controller
+                    name="birthdate"
+                    control={control}
+                    render={({ field }) => (
+                      <OpenmrsDatePicker
+                        id="birthdate"
+                        data-testid="birthdate"
+                        {...field}
+                        onChange={(date) => {
+                          field.onChange(date);
+                          trigger('birthdate');
+                        }}
+                        maxDate={today}
+                        labelText={t('dateOfBirthLabelText', 'Date of birth')}
+                        isInvalid={!!errors.birthdate}
+                        invalidText={errors.birthdate?.message}
+                        value={field.value}
+                      />
+                    )}
+                  />
+                </div>
+              ) : (
+                <div className={styles.grid}>
+                  <div className={styles.dobField}>
+                    <Controller
+                      name="yearsEstimated"
+                      control={control}
+                      render={({ field }) => (
+                        <TextInput
+                          {...field}
+                          id="yearsEstimated"
+                          type="number"
+                          onChange={(e) => {
+                            const value = e.target.value ? parseInt(e.target.value, 10) : undefined;
+                            field.onChange(value);
+                          }}
+                          value={field.value ?? ''}
+                          labelText={t('estimatedAgeInYearsLabelText', 'Estimated age in years')}
+                          invalid={!!errors.yearsEstimated}
+                          invalidText={errors.yearsEstimated?.message}
+                          min={0}
+                        />
+                      )}
+                    />
+                  </div>
+                  <div className={styles.dobField}>
+                    <Controller
+                      name="monthsEstimated"
+                      control={control}
+                      render={({ field }) => (
+                        <TextInput
+                          {...field}
+                          id="monthsEstimated"
+                          type="number"
+                          onChange={(e) => {
+                            const value = e.target.value ? parseInt(e.target.value, 10) : undefined;
+                            field.onChange(value);
+                          }}
+                          value={field.value ?? ''}
+                          labelText={t('estimatedAgeInMonthsLabelText', 'Estimated age in months')}
+                          invalid={!!errors.monthsEstimated}
+                          invalidText={errors.monthsEstimated?.message}
+                          min={0}
+                          max={11}
+                        />
+                      )}
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+          </section>
+
+          <section className={styles.ContactDetailsSection}>
+            <h2 className={styles.SectionTitle}>{t('contactDetails', '2. Contact Details')}</h2>
+
+            <div className={styles.FormField}>
+              <span className={styles.label01}>
+                {t('address', 'Address')}
+                <span className={styles.required}>*</span>
+              </span>
+
+              <div className={styles.addressFieldsContainer}>
+                <Controller
+                  name="county"
+                  control={control}
+                  render={({ field }) => (
+                    <ComboBox
+                      id="county-combobox"
+                      items={counties}
+                      itemToString={(item) => (item ? item.name : '')}
+                      selectedItem={selectedCounty}
+                      onChange={({ selectedItem }) => {
+                        setSelectedCounty(selectedItem);
+                        setSelectedSubCounty(null);
+                        setSelectedWard(null);
+                        field.onChange(selectedItem?.name || '');
+                        setValue('countyUuid', selectedItem?.code || '');
+                        setValue('subCounty', '');
+                        setValue('subCountyUuid', '');
+                        setValue('ward', '');
+                        setValue('wardUuid', '');
+                        trigger('county');
+                      }}
+                      titleText={t('county', 'County')}
+                      placeholder={t('selectCounty', 'Select a county')}
+                      invalid={!!errors.county}
+                      invalidText={errors.county?.message}
+                    />
+                  )}
+                />
+                <Controller
+                  name="subCounty"
+                  control={control}
+                  render={({ field }) => (
+                    <ComboBox
+                      id="subcounty-combobox"
+                      items={subCounties}
+                      itemToString={(item) => (item ? item.name : '')}
+                      selectedItem={selectedSubCounty}
+                      onChange={({ selectedItem }) => {
+                        setSelectedSubCounty(selectedItem);
+                        setSelectedWard(null);
+                        field.onChange(selectedItem?.name || '');
+                        setValue('subCountyUuid', selectedItem?.code || '');
+                        setValue('ward', '');
+                        setValue('wardUuid', '');
+                        trigger('subCounty');
+                      }}
+                      titleText={t('subCounty', 'Sub county')}
+                      placeholder={t('selectSubCounty', 'Select a sub county')}
+                      disabled={!selectedCounty}
+                      invalid={!!errors.subCounty}
+                      invalidText={errors.subCounty?.message}
+                    />
+                  )}
+                />
+                <Controller
+                  name="ward"
+                  control={control}
+                  render={({ field }) => (
+                    <ComboBox
+                      id="ward-combobox"
+                      items={wards}
+                      itemToString={(item) => (item ? item.name : '')}
+                      selectedItem={selectedWard}
+                      onChange={({ selectedItem }) => {
+                        setSelectedWard(selectedItem);
+                        field.onChange(selectedItem?.name || '');
+                        setValue('wardUuid', selectedItem?.code || '');
+                        trigger('ward');
+                      }}
+                      titleText={t('ward', 'Ward')}
+                      placeholder={t('selectWard', 'Select a ward')}
+                      disabled={!selectedCounty}
+                      invalid={!!errors.ward}
+                      invalidText={errors.ward?.message}
+                    />
+                  )}
+                />
+              </div>
+            </div>
+
+            <div className={styles.contactFieldsContainer}>
+              <Controller
+                name="phoneNumber"
+                control={control}
+                render={({ field }) => (
+                  <TextInput
+                    {...field}
+                    id="phoneNumber"
+                    labelText={
+                      <>
+                        {t('phoneNumber', 'Phone Number')}
+                        <span className={styles.optional}> ({t('optional', 'Optional')})</span>
+                      </>
+                    }
+                    placeholder={t('phoneNumberPlaceholder', 'e.g., 0712345678')}
+                    className={styles.inputField}
+                    invalid={!!errors.phoneNumber}
+                    invalidText={errors.phoneNumber?.message}
+                  />
+                )}
+              />
+              <Controller
+                name="email"
+                control={control}
+                render={({ field }) => (
+                  <TextInput
+                    {...field}
+                    id="email"
+                    type="email"
+                    labelText={
+                      <>
+                        {t('email', 'Email Address')}
+                        <span className={styles.optional}> ({t('optional', 'Optional')})</span>
+                      </>
+                    }
+                    placeholder={t('emailPlaceholder', 'joedoe@email.com')}
+                    className={styles.inputField}
+                    invalid={!!errors.email}
+                    invalidText={errors.email?.message}
+                  />
+                )}
+              />
+            </div>
+          </section>
+
+          <section className={styles.IsDeadSection}>
+            <h2 className={styles.SectionTitle}>{t('deathInformation', '3. Death Information')}</h2>
+
+            <div className={styles.FormField}>
+              <div className={styles.dobContentSwitcherLabel}>
+                <span className={styles.label01}>{t('isPatientDeceased', 'Is the patient deceased?')}</span>
+              </div>
+              <ContentSwitcher
+                className={styles.contentSwitcher}
+                selectedIndex={isDead ? 0 : 1}
+                onChange={(e) => handleIsDeadChange(e.name === 'dead')}>
+                <Switch name="dead" text={t('yes', 'Yes')} />
+                <Switch name="alive" text={t('no', 'No')} />
+              </ContentSwitcher>
+            </div>
+
+            {isDead && (
+              <>
+                <div className={styles.FormField}>
+                  <Controller
+                    name="deathDate"
+                    control={control}
+                    render={({ field }) => (
+                      <OpenmrsDatePicker
+                        id="deathDate"
+                        {...field}
+                        onChange={(date) => {
+                          field.onChange(date);
+                          trigger('deathDate');
+                        }}
+                        maxDate={today}
+                        labelText={
+                          <>
+                            {t('deathDate', 'Date of Death')}
+                            <span className={styles.required}>*</span>
+                          </>
+                        }
+                        isInvalid={!!errors.deathDate}
+                        invalidText={errors.deathDate?.message}
+                        value={field.value}
+                      />
+                    )}
+                  />
+                </div>
+                <div className={styles.FormField}>
+                  <Controller
+                    name="deathCause"
+                    control={control}
+                    render={({ field }) => (
+                      <ComboBox
+                        id="deathCause-combobox"
+                        items={answers}
+                        itemToString={(item) => (item ? item.display : '')}
+                        selectedItem={answers.find((answer) => answer.uuid === field.value) || null}
+                        onChange={({ selectedItem }) => {
+                          field.onChange(selectedItem?.uuid || '');
+                          if (selectedItem?.uuid !== freeTextFieldConceptUuid) {
+                            setValue('nonCodedCauseOfDeath', '');
+                          }
+                          trigger('deathCause');
+                        }}
+                        titleText={
+                          <>
+                            {t('causeOfDeathInputLabel', 'Cause of Death')}
+                            <span className={styles.required}>*</span>
+                          </>
+                        }
+                        placeholder={
+                          isLoadingConceptAnswers ? t('loading', 'Loading...') : t('selectAnOption', 'Select an option')
+                        }
+                        disabled={isLoadingConceptAnswers || answers.length === 0}
+                        invalid={!!errors.deathCause}
+                        invalidText={errors.deathCause?.message}
+                        className={styles.causeOfDeathField}
+                      />
+                    )}
+                  />
+
+                  {errorLoadingConceptAnswers && (
+                    <InlineNotification
+                      kind="error"
+                      title={t('error', 'Error')}
+                      subtitle={t('failedToLoadCauseOfDeath', 'Failed to load cause of death options')}
+                    />
+                  )}
+
+                  {!isLoadingConceptAnswers && answers.length === 0 && !errorLoadingConceptAnswers && (
+                    <div className={styles.warningText}>
+                      {t(
+                        'noCauseOfDeathOptions',
+                        'No cause of death options available. Please configure the concept UUID.',
+                      )}
+                    </div>
+                  )}
+                </div>
+
+                {watch('deathCause') === freeTextFieldConceptUuid && (
+                  <div className={styles.FormField}>
+                    <Controller
+                      name="nonCodedCauseOfDeath"
+                      control={control}
+                      render={({ field }) => (
+                        <TextArea
+                          {...field}
+                          id="nonCodedCauseOfDeath"
+                          labelText={
+                            <>
+                              {t('nonCodedCauseOfDeath', 'Non-coded cause of death')}
+                              <span className={styles.required}>*</span>
+                            </>
+                          }
+                          placeholder={t('enterNonCodedCauseOfDeath', 'Enter non-coded cause of death')}
+                          className={styles.inputField}
+                          invalid={!!errors.nonCodedCauseOfDeath}
+                          invalidText={errors.nonCodedCauseOfDeath?.message}
+                          rows={4}
+                        />
+                      )}
+                    />
+                  </div>
+                )}
+              </>
+            )}
+          </section>
+
+          <section className={styles.RelationshipSection}>
+            <h2 className={styles.SectionTitle}>{t('relationshipDetails', '4. Relationship')}</h2>
+            {isLoadingRelationshipTypes ? (
+              <div aria-label="Loading relationships section">
+                <SkeletonText />
+              </div>
+            ) : errorLoadingRelationshipTypes ? (
+              <InlineNotification
+                kind="error"
+                title={t('error', 'Error')}
+                subtitle={t('failedToLoadRelationshipTypes', 'Failed to load relationship types')}
+              />
+            ) : (
+              <div>
+                {relationships && relationships.length > 0
+                  ? relationships.map((relationship: RelationshipValue, index) => (
+                      <div key={index} style={{ marginBottom: '1rem' }}>
+                        <RelationshipView
+                          relationship={relationship}
+                          index={index}
+                          displayRelationshipTypes={displayRelationshipTypes}
+                          onUpdate={handleUpdateRelationship}
+                          onDelete={handleDeleteRelationship}
+                          onRestore={handleRestoreRelationship}
+                        />
+                      </div>
+                    ))
+                  : null}
+                <div style={{ marginTop: '1rem' }}>
+                  <Button kind="ghost" onClick={handleAddRelationship}>
+                    {t('addRelationshipButtonText', 'Add Relationship')}
+                  </Button>
+                </div>
+              </div>
+            )}
+          </section>
+
+          <div className={styles.FormActions}>
+            <Button kind="secondary" onClick={handleBackToSearch}>
+              {t('cancel', 'Cancel')}
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? t('submitting', 'Submitting...') : t('registerPatient', 'Register Patient')}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};