@digihmis/esm-outpatient-app 1.0.0

package/src/patient-management/patient-management-workspace/billable-services-selector.component.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Control, Controller } from 'react-hook-form';
+import { Stack, Tag, Layer, FilterableMultiSelect, InlineNotification, InlineLoading } from '@carbon/react';
+import { useCurrencyFormatting } from './utils';
+import type { TransformedBillableItem, PaymentInfo } from './type';
+import type { ClinicalEncounterFormData } from './patient-management-schema';
+import styles from './patient-management-workspace.scss';
+
+interface BillableServicesSelectorProps {
+  control: Control<ClinicalEncounterFormData>;
+  fieldName: 'procedures' | 'labTests' | 'imagingTests';
+  lineItems: Array<TransformedBillableItem>;
+  isLoading: boolean;
+  paymentInfo: PaymentInfo;
+  title: string;
+  searchPlaceholder: string;
+  errors?: {
+    message?: string;
+  };
+}
+
+export const BillableServicesSelector: React.FC<BillableServicesSelectorProps> = ({
+  control,
+  fieldName,
+  lineItems,
+  isLoading,
+  paymentInfo,
+  title,
+  searchPlaceholder,
+  errors,
+}) => {
+  const { t } = useTranslation();
+  const { formatSimple } = useCurrencyFormatting();
+
+  return (
+    <Stack gap={5}>
+      <Controller
+        name={fieldName}
+        control={control}
+        render={({ field }) => {
+          const selectedServices = field.value || [];
+
+          return (
+            <>
+              {/* Show selected services as tags with prices */}
+              {selectedServices.length > 0 && (
+                <div className={styles.selectedProceduresContainer}>
+                  <div className={styles.selectedProceduresTags}>
+                    {selectedServices.map((item: TransformedBillableItem, index: number) => {
+                      const price =
+                        typeof item.price === 'number'
+                          ? item.price
+                          : typeof item.price === 'string'
+                            ? parseFloat(item.price)
+                            : 0;
+                      const displayText = `${item.name || item.text} - ${formatSimple(price, {
+                        minimumFractionDigits: 2,
+                        maximumFractionDigits: 2,
+                      })}`;
+
+                      return (
+                        <Tag
+                          key={`${item.id}-${index}`}
+                          type="cyan"
+                          filter
+                          onClose={() => {
+                            const updated = selectedServices.filter(
+                              (_: TransformedBillableItem, i: number) => i !== index,
+                            );
+                            field.onChange(updated);
+                          }}
+                          className={styles.selectedProcedureTag}>
+                          {displayText}
+                        </Tag>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+
+              {/* FilterableMultiSelect */}
+              {isLoading ? (
+                <InlineLoading description={t('loadingServices', 'Loading services...')} />
+              ) : lineItems && lineItems.length > 0 ? (
+                <Layer>
+                  <div>
+                    {(() => {
+                      const selectedIds = new Set(
+                        selectedServices.map((svc: TransformedBillableItem) => svc.id || svc.conceptUuid),
+                      );
+
+                      const selectedDropdownItems = lineItems.filter((option) => {
+                        const isSelected = selectedIds.has(option.id);
+                        return isSelected;
+                      });
+
+                      return (
+                        <FilterableMultiSelect
+                          key={`${fieldName}-multiselect`}
+                          id={`${fieldName}-select`}
+                          className={styles.symptomsMultiSelect}
+                          titleText={title}
+                          placeholder={searchPlaceholder}
+                          items={lineItems}
+                          itemToString={(item: TransformedBillableItem | null | undefined) =>
+                            item ? item.name || item.text : ''
+                          }
+                          compareItems={(item1: TransformedBillableItem, item2: TransformedBillableItem) => {
+                            const result = item1?.id === item2?.id;
+                            return result;
+                          }}
+                          selectedItems={selectedDropdownItems}
+                          onChange={({ selectedItems }: { selectedItems: TransformedBillableItem[] }) => {
+                            const servicesWithDetails: TransformedBillableItem[] = selectedItems.map((item) => ({
+                              id: item.id,
+                              text: item.name,
+                              name: item.name,
+                              price: item.price,
+                              paymentModeUuid: item.paymentModeUuid,
+                              paymentModeName: item.paymentModeName,
+                              billableServiceUuid: item.billableServiceUuid,
+                              conceptUuid: item.conceptUuid,
+                              priceUuid: item.priceUuid,
+                            }));
+                            field.onChange(servicesWithDetails);
+                          }}
+                          invalid={!!errors}
+                          invalidText={errors?.message}
+                        />
+                      );
+                    })()}
+                  </div>
+                </Layer>
+              ) : (
+                <InlineNotification
+                  kind="warning"
+                  lowContrast
+                  hideCloseButton
+                  title={t('noBillableServices', 'No billable services')}
+                  subtitle={t('noBillableServicesDescription', 'Please configure billable services to continue.')}
+                />
+              )}
+            </>
+          );
+        }}
+      />
+    </Stack>
+  );
+};

package/src/patient-management/patient-management-workspace/patient-management-schema/index.ts

@@ -0,0 +1,261 @@
+// patient-management-schema.ts
+
+import { z } from 'zod';
+
+export const OTHER_SYMPTOM_UUID = '5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
+export const YES_ANSWER_UUID = '1065AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
+export const SURGICAL_HISTORY_UUID = '1651AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
+export const ADMISSION_HISTORY_UUID = '165644AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
+export const OTHER_PAST_ILLNESS_UUID = '5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
+
+// General Examination UUIDs
+export const ABNORMAL_GAIT_UUID = '5108AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
+export const JAUNDICE_UUID = '136443AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
+export const CYANOSIS_UUID = '143050AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
+export const DEHYDRATION_UUID = '142630AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
+export const FINGER_CLUBBING_UUID = '140125AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
+export const OEDEMA_UUID = '460AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
+export const PALLOR_UUID = '5245AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
+export const LYMPHADENOPATHY_UUID = '135488AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
+
+// Generic item schema (for symptoms, past illness, etc.)
+const genericItemSchema = z.object({
+  id: z.string(),
+  text: z.string(),
+});
+
+// Schema for billable services with full billing details
+const genericItemWithBillingSchema = z.object({
+  id: z.string(),
+  text: z.string(),
+  name: z.string(),
+  price: z.number(),
+  paymentModeUuid: z.string(),
+  paymentModeName: z.string(),
+  billableServiceUuid: z.string(),
+  conceptUuid: z.string(),
+  priceUuid: z.string(),
+});
+
+export const BaseClinicalEncounterSchema = z.object({
+  // Section 0: Symptoms
+  symptoms: z.array(genericItemSchema).min(1, 'Please select at least one symptom'),
+  onsetStatus: z.string().optional(),
+  tbContact: z.string().optional(),
+  otherSymptomText: z.string().optional(),
+
+  // Section 1: History of present illness
+  pastIllness: z.array(genericItemSchema).optional().default([]),
+  surgeryDetails: z.string().optional(),
+  admissionReason: z.string().optional(),
+  otherPastIllnessText: z.string().optional(),
+  medicationsTaken: z.string().optional(),
+  medicationDetails: z.string().optional(),
+
+  // Section 2: Physical Examination - General Examination
+  generalExamination: z.array(genericItemSchema).optional().default([]),
+  generalExaminationNotes: z.string().optional(),
+
+  // Gait (when Abnormal Gait is selected)
+  gaitFinding: z.string().optional(),
+
+  // Jaundice (when Jaundice is selected)
+  jaundiceGrading: z.string().optional(),
+
+  // Cyanosis (when Cyanosis is selected)
+  cyanosisType: z.string().optional(),
+
+  // Dehydration (when Dehydration is selected)
+  dehydrationType: z.array(genericItemSchema).optional().default([]),
+
+  // Finger Clubbing (when Finger Clubbing is selected)
+  fingerclubGrading: z.string().optional(),
+
+  // Oedema (when Oedema is selected)
+  oedemaLocation: z.array(genericItemSchema).optional().default([]),
+  oedemaType: z.string().optional(),
+  oedemaGrading: z.string().optional(),
+
+  // Pallor (when Pallor is selected)
+  pallorLocation: z.array(genericItemSchema).optional().default([]),
+  pallorGrading: z.string().optional(),
+
+  // Lymphadenopathy (when Lymphadenopathy is selected)
+  siteLymphadenopathy: z.array(genericItemSchema).optional().default([]),
+
+  // Section 3: Diagnosis
+  primaryDiagnosis: z.array(genericItemSchema).optional().default([]),
+  secondaryDiagnosis: z.array(genericItemSchema).optional().default([]),
+  diagnosisNotes: z.string().optional(),
+
+  // Section 4: Procedures with billing details
+  procedures: z.array(genericItemWithBillingSchema).optional().default([]),
+
+  // Section 5: Laboratory tests with billing details
+  labTests: z.array(genericItemWithBillingSchema).optional().default([]),
+
+  // Section 6: Imaging tests with billing details
+  imagingTests: z.array(genericItemWithBillingSchema).optional().default([]),
+
+  // Section 7: Notes/Instructions
+  notes: z.string().optional(),
+
+  // Section 8: Outcome
+  patientOutcome: z.string().optional(),
+});
+
+export const ClinicalEncounterSchema = BaseClinicalEncounterSchema.superRefine((data, ctx) => {
+  // Section 0 validations
+  const hasOtherSymptom = data.symptoms.some((s) => s.id === OTHER_SYMPTOM_UUID);
+  if (hasOtherSymptom && (!data.otherSymptomText || data.otherSymptomText.trim().length === 0)) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'This field is required when "Other" symptom is selected',
+      path: ['otherSymptomText'],
+    });
+  }
+
+  // Section 1 validations
+  const hasSurgicalHistory = data.pastIllness?.some((p) => p.id === SURGICAL_HISTORY_UUID);
+  if (hasSurgicalHistory && (!data.surgeryDetails || data.surgeryDetails.trim().length === 0)) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'Surgery details are required when Surgical History is selected',
+      path: ['surgeryDetails'],
+    });
+  }
+
+  const hasAdmissionHistory = data.pastIllness?.some((p) => p.id === ADMISSION_HISTORY_UUID);
+  if (hasAdmissionHistory && (!data.admissionReason || data.admissionReason.trim().length === 0)) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'Reason for admission is required when Admission History is selected',
+      path: ['admissionReason'],
+    });
+  }
+
+  const hasOtherPastIllness = data.pastIllness?.some((p) => p.id === OTHER_PAST_ILLNESS_UUID);
+  if (hasOtherPastIllness && (!data.otherPastIllnessText || data.otherPastIllnessText.trim().length === 0)) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'Please specify the other illness',
+      path: ['otherPastIllnessText'],
+    });
+  }
+
+  if (
+    data.medicationsTaken === YES_ANSWER_UUID &&
+    (!data.medicationDetails || data.medicationDetails.trim().length === 0)
+  ) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'Please provide details of medications taken',
+      path: ['medicationDetails'],
+    });
+  }
+
+  // Section 2: Physical Examination validations
+  const hasAbnormalGait = data.generalExamination?.some((e) => e.id === ABNORMAL_GAIT_UUID);
+  if (hasAbnormalGait && !data.gaitFinding) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'Please specify the gait finding',
+      path: ['gaitFinding'],
+    });
+  }
+
+  const hasJaundice = data.generalExamination?.some((e) => e.id === JAUNDICE_UUID);
+  if (hasJaundice && !data.jaundiceGrading) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'Please specify the jaundice grading',
+      path: ['jaundiceGrading'],
+    });
+  }
+
+  const hasCyanosis = data.generalExamination?.some((e) => e.id === CYANOSIS_UUID);
+  if (hasCyanosis && !data.cyanosisType) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'Please specify the cyanosis type',
+      path: ['cyanosisType'],
+    });
+  }
+
+  const hasDehydration = data.generalExamination?.some((e) => e.id === DEHYDRATION_UUID);
+  if (hasDehydration && (!data.dehydrationType || data.dehydrationType.length === 0)) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'Please specify the dehydration type',
+      path: ['dehydrationType'],
+    });
+  }
+
+  const hasFingerClubbing = data.generalExamination?.some((e) => e.id === FINGER_CLUBBING_UUID);
+  if (hasFingerClubbing && !data.fingerclubGrading) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'Please specify the finger clubbing grading',
+      path: ['fingerclubGrading'],
+    });
+  }
+
+  const hasOedema = data.generalExamination?.some((e) => e.id === OEDEMA_UUID);
+  if (hasOedema) {
+    if (!data.oedemaLocation || data.oedemaLocation.length === 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Please specify the oedema location',
+        path: ['oedemaLocation'],
+      });
+    }
+    if (!data.oedemaType) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Please specify the oedema type',
+        path: ['oedemaType'],
+      });
+    }
+    if (!data.oedemaGrading) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Please specify the oedema grading',
+        path: ['oedemaGrading'],
+      });
+    }
+  }
+
+  const hasPallor = data.generalExamination?.some((e) => e.id === PALLOR_UUID);
+  if (hasPallor) {
+    if (!data.pallorLocation || data.pallorLocation.length === 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Please specify the pallor location',
+        path: ['pallorLocation'],
+      });
+    }
+    if (!data.pallorGrading) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Please specify the pallor grading',
+        path: ['pallorGrading'],
+      });
+    }
+  }
+
+  const hasLymphadenopathy = data.generalExamination?.some((e) => e.id === LYMPHADENOPATHY_UUID);
+  if (hasLymphadenopathy && (!data.siteLymphadenopathy || data.siteLymphadenopathy.length === 0)) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'Please specify the lymphadenopathy site',
+      path: ['siteLymphadenopathy'],
+    });
+  }
+});
+
+// Export types
+export type ClinicalEncounterFormData = z.infer<typeof BaseClinicalEncounterSchema>;
+export type GenericItem = z.infer<typeof genericItemSchema>;
+export type ProcedureWithBilling = z.infer<typeof genericItemWithBillingSchema>;
+
+export type TransformedBillableItem = ProcedureWithBilling;

package/src/patient-management/patient-management-workspace/patient-management-workspace.scss

@@ -0,0 +1,304 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.container {
+  margin: layout.$spacing-05;
+
+  & section {
+    margin: layout.$spacing-05 0 layout.$spacing-03;
+
+    &:first-of-type {
+      margin-top: 0;
+    }
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.heading {
+  @include type.type-style('heading-03');
+  margin: layout.$spacing-05;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin: 0 0 layout.$spacing-03 0;
+
+  &:after {
+    content: '';
+    display: block;
+    width: layout.$spacing-07;
+    padding-top: 3px;
+    border-bottom: 0.375rem solid;
+    @include brand-03(border-bottom-color);
+  }
+}
+
+.dateTimeSection {
+  display: flex;
+  margin: layout.$spacing-05 0;
+  align-items: center;
+}
+
+.radioButton {
+  margin: layout.$spacing-05 0;
+}
+
+.headerGridRow {
+  border-bottom: 0.0625rem solid colors.$gray-20;
+  margin: 0;
+}
+
+.dataGridRow {
+  display: grid;
+  grid-template-columns: 50% 10% 1fr;
+  margin: layout.$spacing-03 layout.$spacing-05;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  height: 100%;
+}
+
+.patientHeader {
+  padding: layout.$spacing-05;
+  border-bottom: 1px solid colors.$gray-20;
+  background-color: colors.$gray-10;
+  flex-shrink: 0;
+
+  .patientName {
+    @include type.type-style('heading-compact-01');
+    font-weight: 600;
+    margin-right: layout.$spacing-03;
+  }
+
+  .patientId {
+    @include type.type-style('body-compact-01');
+    font-weight: 600;
+    margin-right: layout.$spacing-02;
+  }
+
+  .patientDetails {
+    @include type.type-style('body-compact-01');
+    color: colors.$gray-70;
+  }
+}
+
+.buttonSet {
+  width: 100%;
+  display: flex;
+
+  button {
+    max-width: none;
+    width: 100%;
+  }
+}
+
+.button {
+  min-width: 50%;
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: white;
+}
+
+.desktop {
+  padding: 0;
+}
+
+.inputRow {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: layout.$spacing-05;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    grid-template-columns: 1fr;
+  }
+}
+
+.dateTimeSection {
+  :global(.omrs-breakpoint-lt-tablet) & {
+    flex-direction: column;
+  }
+}
+
+.inlineNotification {
+  width: 100%;
+  max-width: unset;
+  padding: '0';
+}
+
+.label {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+}
+
+.workspaceWrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.workspaceContainer {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.sidebar {
+  width: 220px;
+  min-width: 220px;
+  background-color: #f4f4f4;
+  border-right: 1px solid #e0e0e0;
+  overflow-y: auto;
+}
+
+.sidebarContent {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow-y: auto;
+}
+
+:global(.cds--tree-node__label) {
+  padding-inline-start: 0.5rem !important;
+}
+
+:global(.cds--tree-node--active > .cds--tree-node__label:before) {
+  background-color: var(--cds-interactive, #4a90b8);
+}
+
+.sectionButton {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  background: transparent;
+  border: none;
+  border-left: 3px solid transparent;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: #525252;
+  transition: all 0.2s ease;
+  margin-bottom: 0.25rem;
+
+  &:hover {
+    background-color: #e0e0e0;
+  }
+
+  &.active {
+    border-left-color: #0f62fe;
+    background-color: #ffffff;
+    font-weight: 600;
+    color: #161616;
+  }
+}
+
+.mainContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+  min-height: 0;
+}
+
+.formWrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.formContent {
+  flex: 1;
+  padding: 1.5rem;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.navigationButtons {
+  border-top: 1px solid colors.$gray-20;
+  padding: layout.$spacing-05;
+  background-color: colors.$white;
+  flex-shrink: 0;
+}
+
+@media (max-width: 768px) {
+  .workspaceContainer {
+    flex-direction: column;
+  }
+
+  .sidebar {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid #e0e0e0;
+  }
+
+  .sidebarContent {
+    flex-direction: row;
+    overflow-x: auto;
+  }
+
+  .sectionButton {
+    white-space: nowrap;
+  }
+
+  .navigationButtons {
+    padding: layout.$spacing-04;
+  }
+
+  .buttonSet {
+    button {
+      flex: 1;
+    }
+  }
+}
+
+.symptomsMultiSelect {
+  padding-top: 0.5rem;
+}
+
+.selectedSymptomTag {
+  margin-right: 0.5rem;
+}
+
+.selectedSymptomsContainer {
+  width: 100%;
+}
+
+.selectedSymptomsTags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+.radioButtonGroup {
+  padding-top: 1rem;
+}
+.textAreaInput {
+  padding-top: 1rem;
+}
+.radioButtonOption {
+  padding-top: 0.7rem;
+}
+
+.selectedProceduresTags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: layout.$spacing-03;
+}
+
+.selectedProcedureTag {
+  max-width: 100%;
+  font-weight: 500;
+
+  :global(.cds--tag__label) {
+    white-space: normal;
+    word-break: break-word;
+  }
+}