@kenyaemr/esm-express-workflow-app 5.4.4-pre.43 → 5.4.4-pre.430

package/src/components/anaesthetic/forms/icd11-diagnosis-search.component.tsx

@@ -0,0 +1,178 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+import { Search, InlineLoading, Stack, Tag } from '@carbon/react';
+import { useDebounce } from '@openmrs/esm-framework';
+import styles from './icd11-diagnosis-search.scss';
+import { useDiagnosis, type DiagnosisOption } from '../resources/anaesthetic-form.resource';
+
+export interface DiagnosisSearchConfig {
+  dataSourceUuid: string;
+  debounceMs?: number;
+  minChars?: number;
+  resultLimit?: number;
+  baseResultLimit?: number;
+}
+
+export interface DiagnosisSearchProps {
+  id: string;
+  labelText: string;
+  value: DiagnosisOption | null | undefined;
+  onChange: (diagnosis: DiagnosisOption | null) => void;
+  config: DiagnosisSearchConfig;
+  required?: boolean;
+  invalid?: boolean;
+  invalidText?: string;
+  placeholder?: string;
+}
+
+interface DiagnosisSearchResultsProps {
+  searchQuery: string;
+  diagnoses?: Array<DiagnosisOption>;
+  isLoading: boolean;
+  selectedDiagnosisUuid?: string;
+  onSelect: (diagnosis: DiagnosisOption) => void;
+  minChars: number;
+}
+
+const DiagnosisSearchResults: React.FC<DiagnosisSearchResultsProps> = ({
+  searchQuery,
+  diagnoses,
+  isLoading,
+  selectedDiagnosisUuid,
+  onSelect,
+  minChars,
+}) => {
+  const { t } = useTranslation();
+
+  if (searchQuery.length < minChars) {
+    return null;
+  }
+
+  return (
+    <div className={styles.searchResults}>
+      {isLoading && (
+        <div className={styles.loadingState}>
+          <InlineLoading description={t('searching', 'Searching...')} />
+        </div>
+      )}
+
+      {!isLoading && diagnoses && diagnoses.length > 0 && (
+        <div className={styles.resultsList}>
+          {diagnoses.map((diagnosis) => {
+            const isSelected = selectedDiagnosisUuid === diagnosis.uuid;
+
+            return (
+              <div
+                key={diagnosis.uuid}
+                className={classNames(styles.resultItem, {
+                  [styles.selected]: isSelected,
+                })}
+                onClick={() => onSelect(diagnosis)}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    onSelect(diagnosis);
+                  }
+                }}>
+                <span className={styles.diagnosisText}>{diagnosis.display}</span>
+                {isSelected && <Tag type="green" size="sm" className={styles.selectedTag}></Tag>}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {!isLoading && diagnoses && diagnoses.length === 0 && (
+        <div className={styles.noResults}>{t('noResults', 'No results found')}</div>
+      )}
+    </div>
+  );
+};
+
+const DiagnosisSearch: React.FC<DiagnosisSearchProps> = ({
+  id,
+  labelText,
+  value,
+  onChange,
+  config,
+  required = false,
+  invalid = false,
+  invalidText,
+  placeholder,
+}) => {
+  const { t } = useTranslation();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showResults, setShowResults] = useState(false);
+  const { debounceMs = 300, minChars = 3, resultLimit = 20, baseResultLimit = 4, dataSourceUuid } = config;
+  const debouncedSearchQuery = useDebounce(searchQuery, debounceMs);
+
+  const { diagnoses, isLoading } = useDiagnosis(
+    debouncedSearchQuery,
+    dataSourceUuid,
+    resultLimit,
+    baseResultLimit,
+    minChars,
+  );
+
+  useEffect(() => {
+    setSearchQuery(value?.display ?? '');
+  }, [value?.uuid, value?.display]);
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const query = e.target.value;
+    setSearchQuery(query);
+    setShowResults(query.length >= minChars);
+
+    if (!query) {
+      onChange(null);
+    }
+  };
+
+  const handleSelectDiagnosis = (diagnosis: DiagnosisOption) => {
+    onChange(diagnosis);
+    setShowResults(false);
+    setSearchQuery(diagnosis.display);
+  };
+
+  return (
+    <Stack gap={4}>
+      <div className={styles.searchWrapper}>
+        <p className="cds--label">{labelText}</p>
+        <Search
+          id={id}
+          labelText={labelText}
+          placeholder={placeholder || t('searchPlaceholder', 'Type to search (minimum 3 characters)...')}
+          value={searchQuery}
+          onChange={handleSearchChange}
+          size="md"
+          className={classNames({ [styles.invalid]: invalid })}
+        />
+
+        {showResults && (
+          <DiagnosisSearchResults
+            searchQuery={searchQuery}
+            diagnoses={diagnoses}
+            isLoading={isLoading}
+            selectedDiagnosisUuid={value?.uuid}
+            onSelect={handleSelectDiagnosis}
+            minChars={minChars}
+          />
+        )}
+
+        {searchQuery.length > 0 && searchQuery.length < minChars && (
+          <div className={styles.hint}>
+            <InlineLoading description={t('minimumCharacters', 'Type at least 3 characters to search')} />
+          </div>
+        )}
+      </div>
+
+      {invalid && invalidText && <div className={styles.errorMessage}>{invalidText}</div>}
+    </Stack>
+  );
+};
+
+export { DiagnosisSearch };
+export default DiagnosisSearch;

package/src/components/anaesthetic/forms/icd11-diagnosis-search.scss

@@ -0,0 +1,126 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.searchWrapper {
+  position: relative;
+}
+
+.searchResults {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 0.25rem;
+  max-height: 300px;
+  overflow-y: auto;
+  border: 1px solid colors.$gray-20;
+  border-radius: 4px;
+  background-color: colors.$white;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}
+
+.loadingState {
+  padding: layout.$spacing-05;
+  text-align: center;
+}
+
+.resultsList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.resultItem {
+  padding: layout.$spacing-04 layout.$spacing-05;
+  cursor: pointer;
+  border-bottom: 1px solid colors.$gray-20;
+  transition: background-color 0.2s;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &:hover {
+    background-color: colors.$gray-10;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &.selected {
+    background-color: colors.$gray-20;
+    font-weight: 600;
+  }
+
+  &:focus {
+    outline-offset: -2px;
+  }
+}
+
+.diagnosisText {
+  flex-grow: 1;
+}
+
+.selectedTag {
+  margin-left: layout.$spacing-03;
+}
+
+.noResults {
+  padding: layout.$spacing-05;
+  text-align: center;
+  color: colors.$gray-60;
+  font-style: italic;
+}
+
+.hint {
+  margin-top: layout.$spacing-03;
+  padding: layout.$spacing-03;
+  color: colors.$gray-60;
+  font-size: 0.875rem;
+  font-style: italic;
+}
+
+.errorMessage {
+  margin-top: layout.$spacing-03;
+  font-size: 0.875rem;
+  color: colors.$red-70;
+}
+
+.selectedDiagnosis {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  margin-top: layout.$spacing-03;
+}
+
+.selectedValueTag {
+  padding: layout.$spacing-02 layout.$spacing-03;
+}
+
+.clearButton {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: layout.$spacing-02;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+  color: colors.$gray-100;
+
+  &:hover {
+    background-color: colors.$gray-10;
+  }
+
+  &:focus {
+    outline: 2px solid colors.$blue-60;
+    outline-offset: 2px;
+  }
+}
+
+.invalid {
+  border-color: colors.$red-60 !important;
+}

package/src/components/anaesthetic/forms/index.ts

@@ -0,0 +1,2 @@
+export { default as InteroperativeRecordDrugGivenForm } from './interoperative-record-drug-given-form.component';
+export { default as AnaestheticForm } from './anaesthetic-form.component';

package/src/components/anaesthetic/forms/interoperative-record-drug-given-form.component.tsx

@@ -0,0 +1,231 @@
+import React from 'react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslation } from 'react-i18next';
+import { useForm, Controller } from 'react-hook-form';
+import { Button, ButtonSet, Form, Grid, Column, TextInput, Select, SelectItem } from '@carbon/react';
+import { showSnackbar, useConfig, Workspace2, type Workspace2DefinitionProps } from '@openmrs/esm-framework';
+import { z } from 'zod';
+import type { ConfigObject } from '../../../config-schema';
+import styles from '../anaesthetic-data-form.scss';
+
+// ── Workspace props exposed to the launcher ──────────────────────────────────
+export type InteroperativeRecordDrugGivenWorkspaceProps = {
+  onSubmit: (data: {
+    maintenanceAgent: string;
+    concentrationRate: string;
+    medicationGiven: string;
+    fluidsGiven: string;
+  }) => Promise<void> | void;
+  onDataSaved?: () => void;
+  patient?: {
+    uuid: string;
+    name: string;
+    gender: string;
+    age: string;
+  };
+};
+
+// ── Zod schema ────────────────────────────────────────────────────────────────
+const schema = z
+  .object({
+    maintenanceAgent: z.string(),
+    concentrationRate: z.string(),
+    medicationGiven: z.string(),
+    fluidsGiven: z.string(),
+  })
+  .superRefine((val, ctx) => {
+    const hasMaintenance = Boolean(val.maintenanceAgent);
+    const hasMedication = Boolean(val.medicationGiven.trim());
+    const hasFluids = Boolean(val.fluidsGiven.trim());
+
+    if (!hasMaintenance && !hasMedication && !hasFluids) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ['medicationGiven'],
+        message: 'Enter a maintenance agent, medication given, or fluids given before saving',
+      });
+    }
+  });
+
+type FormData = z.infer<typeof schema>;
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+const InteroperativeRecordDrugGivenForm: React.FC<
+  Workspace2DefinitionProps<InteroperativeRecordDrugGivenWorkspaceProps, {}, {}>
+> = ({ closeWorkspace, workspaceProps }) => {
+  const { t } = useTranslation();
+  const { onSubmit, onDataSaved, patient } = workspaceProps ?? {};
+  const config = useConfig<ConfigObject>();
+
+  // Blank placeholder + configurable options – deployments (Kenya, DRC, Congo…) override via config
+  const maintenanceOptions = [
+    { value: '', label: t('chooseAnOption', 'Choose an option') },
+    ...(config.maintenanceAgentOptions ?? []),
+  ];
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isDirty, errors },
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      maintenanceAgent: '',
+      concentrationRate: '',
+      medicationGiven: '',
+      fluidsGiven: '',
+    },
+  });
+
+  const onSubmitForm = async (data: FormData) => {
+    if (!patient?.uuid) {
+      showSnackbar({
+        title: t('validationError', 'Validation Error'),
+        subtitle: !patient
+          ? t('noPatientSelected', 'No patient selected')
+          : t('patientMissingUuid', 'Patient is missing a UUID'),
+        kind: 'error',
+      });
+      return;
+    }
+
+    if (!onSubmit) {
+      showSnackbar({
+        title: t('validationError', 'Validation Error'),
+        subtitle: t('missingSubmitHandler', 'No submit handler was provided for this form'),
+        kind: 'error',
+      });
+      return;
+    }
+
+    try {
+      await onSubmit({
+        maintenanceAgent: data.maintenanceAgent,
+        concentrationRate: data.concentrationRate.trim(),
+        medicationGiven: data.medicationGiven,
+        fluidsGiven: data.fluidsGiven,
+      });
+
+      showSnackbar({
+        title: t('drugOrderSaved', 'Drug order saved'),
+        subtitle: t('drugOrderSavedToBackend', 'Drug order has been saved to backend'),
+        kind: 'success',
+        isLowContrast: true,
+      });
+
+      onDataSaved?.();
+      reset();
+      closeWorkspace({ discardUnsavedChanges: true });
+    } catch (error) {
+      showSnackbar({
+        title: t('drugOrderSaveFailed', 'Failed to save drug order'),
+        subtitle:
+          error instanceof Error
+            ? error.message
+            : t('failedToSaveDrugsIvFluids', 'Failed to save drugs and IV fluids data'),
+        kind: 'error',
+        isLowContrast: true,
+      });
+    }
+  };
+
+  const patientLabel = patient ? `${patient.name}, ${patient.gender}, ${patient.age}` : undefined;
+
+  return (
+    <Workspace2 title={t('drugsIVFluids', 'Drugs and IV Fluids Given')} hasUnsavedChanges={isDirty}>
+      {patientLabel && <p className={styles.patientSummary}>{patientLabel}</p>}
+      <Form onSubmit={handleSubmit(onSubmitForm)} className={styles.workspaceForm}>
+        <div className={styles.workspaceContent}>
+          <Grid>
+            <Column sm={4} md={8} lg={16}>
+              <Controller
+                name="maintenanceAgent"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <Select
+                    id="maintenance-agent-dropdown"
+                    labelText={t('maintenanceOfAnaesthesia', 'Maintenance of Anaesthesia')}
+                    invalid={!!fieldState.error}
+                    invalidText={fieldState.error?.message}
+                    value={field.value}
+                    onChange={(e) => field.onChange(e.target.value)}>
+                    {maintenanceOptions.map((option) => (
+                      <SelectItem key={option.value || 'blank'} value={option.value} text={option.label} />
+                    ))}
+                  </Select>
+                )}
+              />
+            </Column>
+
+            <Column sm={4} md={8} lg={16}>
+              <Controller
+                name="concentrationRate"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <TextInput
+                    id="concentration-rate-input"
+                    labelText={t('concentrationRate', 'Concentration rate')}
+                    placeholder={t('enterConcentrationRate', 'Enter concentration rate')}
+                    value={field.value}
+                    onChange={field.onChange}
+                    invalid={!!fieldState.error}
+                    invalidText={fieldState.error?.message}
+                  />
+                )}
+              />
+            </Column>
+
+            <Column sm={4} md={4} lg={8}>
+              <Controller
+                name="medicationGiven"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <TextInput
+                    id="medication-given-input"
+                    labelText={t('medicationsGiven', 'Medications given')}
+                    placeholder={t('enterMedicationGiven', 'Enter medications given')}
+                    value={field.value}
+                    onChange={field.onChange}
+                    invalid={!!fieldState.error}
+                    invalidText={fieldState.error?.message}
+                  />
+                )}
+              />
+            </Column>
+
+            <Column sm={4} md={4} lg={8}>
+              <Controller
+                name="fluidsGiven"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <TextInput
+                    id="fluids-given-input"
+                    labelText={t('fluidsGiven', 'Fluids given')}
+                    placeholder={t('enterFluidsGiven', 'Enter fluids given')}
+                    value={field.value}
+                    onChange={field.onChange}
+                    invalid={!!fieldState.error}
+                    invalidText={fieldState.error?.message}
+                  />
+                )}
+              />
+            </Column>
+          </Grid>
+        </div>
+
+        <ButtonSet className={styles.workspaceButtonSet}>
+          <Button kind="secondary" onClick={() => closeWorkspace({ discardUnsavedChanges: true })}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button kind="primary" type="submit">
+            {t('save', 'Save')}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </Workspace2>
+  );
+};
+
+export default InteroperativeRecordDrugGivenForm;