@digihmis/esm-patient-registration-app 1.0.0

package/src/registration-form/registration-form.resource.ts

@@ -0,0 +1,264 @@
+import { FetchResponse, openmrsFetch, restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
+import {
+  type Patient,
+  type Relationship,
+  type PatientIdentifier,
+  type Encounter,
+  ConceptResponse,
+  ConceptAnswers,
+} from '../type';
+import dayjs from 'dayjs';
+import useSWRImmutable from 'swr';
+import { useMemo } from 'react';
+
+export const uuidIdentifier = '05a29f94-c0ed-11e2-94be-8c13b969e334';
+export const uuidTelephoneNumber = '14d4f066-15f5-102d-96e4-000c29c2a5d7';
+
+function dataURItoFile(dataURI: string) {
+  const byteString = window.atob(dataURI.split(',')[1]);
+  const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+  // write the bytes of the string to a typed array
+  const buffer = new Uint8Array(byteString.length);
+
+  for (let i = 0; i < byteString.length; i++) {
+    buffer[i] = byteString.charCodeAt(i);
+  }
+
+  const blob = new Blob([buffer], { type: mimeString });
+  return new File([blob], 'patient-photo.png');
+}
+
+export function savePatient(patient: Patient | null, updatePatientUuid?: string) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`${restBaseUrl}/patient/${updatePatientUuid || ''}`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: patient,
+    signal: abortController.signal,
+  });
+}
+
+export function saveEncounter(encounter: Encounter) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`${restBaseUrl}/encounter`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: encounter,
+    signal: abortController.signal,
+  });
+}
+
+export function generateIdentifier(source: string) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`${restBaseUrl}/idgen/identifiersource/${source}/identifier`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: {},
+    signal: abortController.signal,
+  });
+}
+
+export function deletePersonName(nameUuid: string, personUuid: string) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`${restBaseUrl}/person/${personUuid}/name/${nameUuid}`, {
+    method: 'DELETE',
+    signal: abortController.signal,
+  });
+}
+
+export function saveRelationship(relationship: Relationship) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`${restBaseUrl}/relationship`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: relationship,
+    signal: abortController.signal,
+  });
+}
+
+export function updateRelationship(relationshipUuid, relationship: { relationshipType: string }) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`${restBaseUrl}/relationship/${relationshipUuid}`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: { relationshipType: relationship.relationshipType },
+    signal: abortController.signal,
+  });
+}
+
+export function deleteRelationship(relationshipUuid) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`${restBaseUrl}/relationship/${relationshipUuid}`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'DELETE',
+    signal: abortController.signal,
+  });
+}
+
+export async function savePatientPhoto(
+  patientUuid: string,
+  content: string,
+  url: string,
+  date: string,
+  conceptUuid: string,
+) {
+  const abortController = new AbortController();
+
+  const formData = new FormData();
+  formData.append('patient', patientUuid);
+  formData.append('file', dataURItoFile(content));
+  formData.append(
+    'json',
+    JSON.stringify({
+      person: patientUuid,
+      concept: conceptUuid,
+      groupMembers: [],
+      obsDatetime: date,
+    }),
+  );
+
+  return openmrsFetch(url, {
+    method: 'POST',
+    signal: abortController.signal,
+    body: formData,
+  });
+}
+
+export async function fetchPerson(query: string, abortController: AbortController) {
+  const [patientsRes, personsRes] = await Promise.all([
+    openmrsFetch(`${restBaseUrl}/patient?q=${query}`, {
+      signal: abortController.signal,
+    }),
+    openmrsFetch(`${restBaseUrl}/person?q=${query}`, {
+      signal: abortController.signal,
+    }),
+  ]);
+
+  const results = [...patientsRes.data.results];
+
+  personsRes.data.results.forEach((person) => {
+    if (!results.some((patient) => patient.uuid === person.uuid)) {
+      results.push(person);
+    }
+  });
+
+  return results;
+}
+
+export async function addPatientIdentifier(patientUuid: string, patientIdentifier: PatientIdentifier) {
+  const abortController = new AbortController();
+  return openmrsFetch(`${restBaseUrl}/patient/${patientUuid}/identifier/`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: patientIdentifier,
+  });
+}
+
+export async function updatePatientIdentifier(patientUuid: string, identifierUuid: string, identifier: string) {
+  const abortController = new AbortController();
+  return openmrsFetch(`${restBaseUrl}/patient/${patientUuid}/identifier/${identifierUuid}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: { identifier },
+  });
+}
+
+export async function deletePatientIdentifier(patientUuid: string, patientIdentifierUuid: string) {
+  const abortController = new AbortController();
+  return openmrsFetch(`${restBaseUrl}/patient/${patientUuid}/identifier/${patientIdentifierUuid}?purge`, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+  });
+}
+
+export function getDatetime(date: Date | string, time: string, timeFormat: 'AM' | 'PM') {
+  const datetime = new Date(date);
+
+  // If time is empty or invalid, return date at start of day (midnight)
+  if (!time || time.trim() === '') {
+    return dayjs(datetime).startOf('day').toDate();
+  }
+
+  const timeParts = time.split(':');
+
+  // Validate time format
+  if (timeParts.length !== 2) {
+    return dayjs(datetime).startOf('day').toDate();
+  }
+
+  const [hours, minutes] = timeParts.map(Number);
+
+  // Validate parsed numbers
+  if (isNaN(hours) || isNaN(minutes)) {
+    return dayjs(datetime).startOf('day').toDate();
+  }
+
+  const fullHours = timeFormat === 'PM' ? (hours % 12) + 12 : hours % 12;
+  return dayjs(datetime).hour(fullHours).minute(minutes).second(0).millisecond(0).toDate();
+}
+
+export function useConcept(conceptUuid: string): { data: ConceptResponse; isLoading: boolean } {
+  const shouldFetch = typeof conceptUuid === 'string' && conceptUuid !== '';
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse<ConceptResponse>, Error>(
+    shouldFetch ? `${restBaseUrl}/concept/${conceptUuid}` : null,
+    openmrsFetch,
+  );
+  if (error) {
+    showSnackbar({
+      title: error.name,
+      subtitle: error.message,
+      kind: 'error',
+    });
+  }
+  const results = useMemo(() => ({ data: data?.data, isLoading }), [data, isLoading]);
+  return results;
+}
+
+export function useConceptAnswers(conceptUuid: string): {
+  data: Array<ConceptAnswers>;
+  isLoading: boolean;
+  error: Error;
+} {
+  const shouldFetch = typeof conceptUuid === 'string' && conceptUuid !== '';
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse<ConceptResponse>, Error>(
+    shouldFetch ? `${restBaseUrl}/concept/${conceptUuid}` : null,
+    openmrsFetch,
+  );
+  if (error) {
+    showSnackbar({
+      title: error.name,
+      subtitle: error.message,
+      kind: 'error',
+    });
+  }
+  const results = useMemo(() => ({ data: data?.data?.answers, isLoading, error }), [isLoading, error, data]);
+  return results;
+}

package/src/registration-form/registration-form.scss

@@ -0,0 +1,282 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.FormContainer {
+  margin: 0 auto;
+}
+
+.FormHeader {
+  background-color: colors.$gray-10;
+  border-bottom: 1px solid colors.$gray-20;
+  padding: layout.$spacing-05 layout.$spacing-06;
+  margin-top: 1rem;
+  :global(.omrs-breakpoint-lt-desktop) & {
+    margin-top: 3rem;
+  }
+}
+
+.identifierLabelText {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: layout.$spacing-03;
+}
+
+.configureIdentifiersButton {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+
+  svg {
+    margin-left: layout.$spacing-03;
+  }
+}
+
+.customField {
+  margin-bottom: layout.$spacing-05;
+}
+.arrowRightIcon {
+  fill: currentColor !important;
+}
+.identifierLabelText {
+  display: flex;
+  align-items: center;
+}
+
+.BackButton {
+  display: inline-flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  background: none;
+  border: none;
+  padding: layout.$spacing-03 layout.$spacing-04;
+  border-radius: layout.$spacing-02;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  margin-bottom: layout.$spacing-04;
+  color: colors.$blue-60;
+  @include type.type-style('body-compact-01');
+
+  &:hover {
+    background-color: colors.$gray-20;
+    color: colors.$blue-70;
+  }
+
+  &:focus {
+    outline: 2px solid colors.$blue-60;
+    outline-offset: 2px;
+  }
+
+  &:active {
+    background-color: colors.$gray-30;
+  }
+}
+
+.BackButtonText {
+  font-weight: 500;
+}
+
+.TitleSection {
+  margin-left: layout.$spacing-02;
+}
+
+.FormTitle {
+  @include type.type-style('productive-heading-04');
+  color: colors.$gray-100;
+  margin: 0 0 layout.$spacing-02 0;
+  font-weight: 600;
+}
+
+.FormSubtitle {
+  @include type.type-style('body-01');
+  color: colors.$gray-70;
+  margin: 0;
+  font-weight: 400;
+}
+
+.FormContent {
+  padding: layout.$spacing-06;
+}
+
+.PatientDetailsSection,
+.ContactDetailsSection,
+.IsDeadSection,
+.RelationshipSection {
+  margin-bottom: layout.$spacing-07;
+  padding-bottom: layout.$spacing-05;
+  border-bottom: 1px solid colors.$gray-20;
+
+  &:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+  }
+}
+
+.PatientDetailsSection,
+.ContactDetailsSection,
+.IsDeadSection,
+.RelationshipSection {
+  background: white;
+  padding: layout.$spacing-06;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  margin-bottom: layout.$spacing-07;
+}
+
+.SectionTitle {
+  @include type.type-style('productive-heading-03');
+  color: colors.$gray-100;
+  margin: 0 0 layout.$spacing-05 0;
+  font-weight: 600;
+}
+
+.FormField {
+  margin-bottom: layout.$spacing-05;
+}
+
+.dobContentSwitcherLabel {
+  margin-bottom: layout.$spacing-03;
+}
+
+.label01 {
+  @include type.type-style('label-01');
+  color: colors.$gray-100;
+  font-weight: bold;
+}
+
+.noIdentifiersConfiguredText {
+  @include type.type-style('label-02');
+  color: colors.$red-60;
+  font-weight: bold;
+  margin-bottom: layout.$spacing-07;
+}
+
+.required {
+  color: colors.$red-60;
+  margin-left: 2px;
+}
+
+.optional {
+  color: colors.$gray-70;
+  font-weight: normal;
+}
+
+.contentSwitcher {
+  width: 14%;
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    width: 23%;
+  }
+}
+
+.nameFieldsContainer {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: layout.$spacing-03;
+  margin-top: layout.$spacing-03;
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    grid-template-columns: 1fr;
+    gap: layout.$spacing-01;
+  }
+}
+
+.addressFieldsContainer {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: layout.$spacing-05;
+  margin-top: layout.$spacing-03;
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    grid-template-columns: repeat(3, 1fr);
+    gap: layout.$spacing-04;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    grid-template-columns: 1fr;
+    gap: layout.$spacing-04;
+  }
+}
+
+.contactFieldsContainer {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: layout.$spacing-05;
+  margin-top: layout.$spacing-03;
+  margin-bottom: layout.$spacing-03;
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    grid-template-columns: repeat(2, 1fr);
+    gap: layout.$spacing-04;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    grid-template-columns: 1fr;
+    gap: layout.$spacing-04;
+  }
+}
+
+.dobField {
+  margin-top: layout.$spacing-04;
+  width: 100%;
+
+  :global(.cds--date-picker-container) {
+    width: 100%;
+  }
+
+  :global(.cds--text-input) {
+    width: 100%;
+  }
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: layout.$spacing-05;
+  margin-top: layout.$spacing-04;
+  width: 50%;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    grid-template-columns: 1fr;
+    gap: layout.$spacing-04;
+  }
+}
+
+.FormActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: layout.$spacing-04;
+  margin-top: layout.$spacing-07;
+  padding-top: layout.$spacing-05;
+  border-top: 1px solid colors.$gray-20;
+}
+
+.inputField {
+  width: 100%;
+}
+.radioButtonOption {
+  padding: layout.$spacing-02;
+  margin-bottom: layout.$spacing-03;
+}
+.deathDateTimeRow {
+  display: flex;
+  gap: layout.$spacing-05;
+}
+.causeOfDeathField {
+  margin-top: layout.$spacing-04;
+  width: 30.8%;
+  :global(.omrs-breakpoint-lt-desktop) & {
+    width: 66%;
+  }
+}
+.fullWidthCombobox {
+  width: 32.8%;
+  :global(.omrs-breakpoint-lt-desktop) & {
+    width: 66%;
+  }
+}

package/src/routes.json

@@ -0,0 +1,62 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "fhir2": ">=1.2",
+    "webservices.rest": "^2.24.0"
+  },
+  "extensions": [
+    {
+      "name": "registration-dashboard-link",
+      "slot": "registration-dashboard-slot",
+      "component": "leftPanelLink",
+      "meta": {
+        "name": "patient-registration",
+        "slot": "registration-homepage-dashboard-slot",
+        "title": "search"
+      }
+    },
+    {
+      "name": "search-dashboard",
+      "slot": "search-dashboard-slot",
+      "component": "searchDashboard"
+    },
+    {
+      "name": "registration-form",
+      "slot": "registration-form-slot",
+      "component": "registrationForm"
+    },
+     {
+      "name": "visit-tag",
+      "slot": "patient-banner-tags-slot",
+      "component": "visitTag",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "deceased-patient-tag",
+      "slot": "patient-banner-tags-slot",
+      "component": "deceasedPatientTag",
+      "online": true,
+      "offline": true
+    }
+  ],
+  "workspaces": [
+    {
+      "name": "configure-identifiers",
+      "component": "identifierConfigureForm",
+      "title": "configureIdentifiersForm",  
+      "type": "other-form",
+            "canMaximize": true,
+      "width": "extra-wide"
+    },
+    {
+      "name": "check-in-form",
+      "component": "checkInWorkspace",
+      "title": "checkInFormTitle",
+      "type": "other-form",
+            "canMaximize": true,
+      "width": "extra-wide"
+    }
+  ]
+  
+}