@kenyaemr/esm-express-workflow-app 5.4.3 → 5.4.4-pre.1

package/src/components/anaesthetic/graphs/interoperative-record-drug-given-graph-wrapper.component.tsx

@@ -0,0 +1,197 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Pagination } from '@carbon/react';
+import { Add, ChartColumn, Table as TableIcon } from '@carbon/react/icons';
+import { launchWorkspace2 } from '@openmrs/esm-framework';
+import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+import InteroperativeRecordDrugGivenGraph, {
+  InteroperativeRecordDrugGivenData,
+} from './interoperative-record-drug-given-graph.component';
+import type { InteroperativeRecordDrugGivenWorkspaceProps } from '../forms/interoperative-record-drug-given-form.component';
+import styles from '../anaesthetic.scss';
+
+interface InteroperativeRecordDrugGivenGraphWrapperProps {
+  data: InteroperativeRecordDrugGivenData[];
+  tableData?: Array<{
+    date: string;
+    maintenanceAgent?: string;
+    concentrationRate?: string;
+    medicationGiven?: string;
+    fluidsGiven?: string;
+    source?: string;
+  }>;
+  viewMode?: 'graph' | 'table';
+  currentPage?: number;
+  pageSize?: number;
+  totalItems?: number;
+  controlSize?: 'sm' | 'md' | 'lg';
+  onAddData?: () => void;
+  onViewModeChange?: (mode: 'graph' | 'table') => void;
+  onPageChange?: (page: number) => void;
+  onPageSizeChange?: (pageSize: number) => void;
+  isAddButtonDisabled?: boolean;
+  patient?: {
+    uuid: string;
+    name: string;
+    gender: string;
+    age: string;
+  };
+  onInteroperativeRecordDrugGivenSubmit?: (data: {
+    maintenanceAgent: string;
+    concentrationRate: string;
+    medicationGiven: string;
+    fluidsGiven: string;
+  }) => Promise<void> | void;
+  onDataSaved?: () => void;
+}
+
+const InteroperativeRecordDrugGivenGraphWrapper: React.FC<InteroperativeRecordDrugGivenGraphWrapperProps> = ({
+  data = [],
+  tableData = [],
+  viewMode = 'graph',
+  currentPage = 1,
+  pageSize = 5,
+  totalItems = 0,
+  controlSize = 'sm',
+  onAddData,
+  onViewModeChange,
+  onPageChange,
+  onPageSizeChange,
+  isAddButtonDisabled = false,
+  patient,
+  onInteroperativeRecordDrugGivenSubmit,
+  onDataSaved,
+}) => {
+  const { t } = useTranslation();
+  const [internalPage, setInternalPage] = useState(currentPage);
+  const [internalPageSize, setInternalPageSize] = useState(pageSize);
+
+  React.useEffect(() => {
+    setInternalPage(currentPage);
+  }, [currentPage]);
+
+  React.useEffect(() => {
+    setInternalPageSize(pageSize);
+  }, [pageSize]);
+
+  const { pageSizes: calculatedPageSizes, itemsDisplayed } = usePaginationInfo(
+    internalPageSize,
+    Math.ceil((totalItems || 0) / internalPageSize),
+    internalPage,
+    totalItems || 0,
+  );
+
+  const paginatedTableData = tableData.slice((internalPage - 1) * internalPageSize, internalPage * internalPageSize);
+
+  const handleAddData = () => {
+    onAddData?.();
+    launchWorkspace2<InteroperativeRecordDrugGivenWorkspaceProps, {}, {}>('interoperative-drug-given-workspace-form', {
+      onSubmit: async (formData) => {
+        await onInteroperativeRecordDrugGivenSubmit?.(formData);
+      },
+      patient,
+      onDataSaved,
+    });
+  };
+
+  return (
+    <div className={styles.fetalHeartRateSection}>
+      <div className={styles.fetalHeartRateContainer}>
+        <div className={styles.fetalHeartRateHeader}>
+          <div className={styles.fetalHeartRateTitle}>
+            <h3 className={styles.fetalHeartRateHeading}>
+              {t('interoperativeRecordDrugGiven', 'Interoperative record')}
+            </h3>
+          </div>
+          <div className={styles.fetalHeartRateControls}>
+            <div className={styles.viewToggle}>
+              <Button
+                kind={viewMode === 'graph' ? 'primary' : 'secondary'}
+                size={controlSize}
+                hasIconOnly
+                iconDescription={t('graphView', 'Graph View')}
+                onClick={() => onViewModeChange?.('graph')}
+                className={styles.viewButton}>
+                <ChartColumn />
+              </Button>
+              <Button
+                kind={viewMode === 'table' ? 'primary' : 'secondary'}
+                size={controlSize}
+                hasIconOnly
+                iconDescription={t('tableView', 'Table View')}
+                onClick={() => onViewModeChange?.('table')}
+                className={styles.viewButton}>
+                <TableIcon />
+              </Button>
+            </div>
+            <Button
+              kind="primary"
+              size={controlSize}
+              renderIcon={Add}
+              iconDescription="Add interoperative record data"
+              disabled={isAddButtonDisabled}
+              onClick={handleAddData}
+              className={styles.addButton}>
+              Add
+            </Button>
+          </div>
+        </div>
+
+        {viewMode === 'graph' ? (
+          <InteroperativeRecordDrugGivenGraph data={data} />
+        ) : (
+          <div className={styles.tableContainer}>
+            {tableData && tableData.length > 0 ? (
+              <>
+                <div className={styles.drugsIVFluidsTable}>
+                  <table className={styles.dataTable}>
+                    <thead>
+                      <tr>
+                        <th>{t('date', 'Date')}</th>
+                        <th>{t('maintenanceOfAnaesthesia', 'Maintenance of Anaesthesia')}</th>
+                        <th>{t('concentrationRate', 'Concentration rate')}</th>
+                        <th>{t('medicationsGiven', 'Medications given')}</th>
+                        <th>{t('fluidsGiven', 'Fluids given')}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {paginatedTableData.map((item, index) => (
+                        <tr key={index}>
+                          <td>{item.date}</td>
+                          <td>{item.maintenanceAgent || '-'}</td>
+                          <td>{item.concentrationRate || '-'}</td>
+                          <td>{item.medicationGiven || '-'}</td>
+                          <td>{item.fluidsGiven || '-'}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+                <Pagination
+                  page={internalPage}
+                  pageSize={internalPageSize}
+                  pageSizes={calculatedPageSizes}
+                  totalItems={totalItems || tableData.length}
+                  onChange={({ page, pageSize }) => {
+                    setInternalPage(page);
+                    setInternalPageSize(pageSize);
+                    onPageChange?.(page);
+                    onPageSizeChange?.(pageSize);
+                  }}
+                  className={styles.pagination}
+                />
+                {(totalItems || tableData.length) > 0 && <div className={styles.paginationInfo}>{itemsDisplayed}</div>}
+              </>
+            ) : (
+              <div className={styles.emptyTable}>
+                <p>{t('noInteroperativeRecordDrugGivenData', 'No interoperative record data available')}</p>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default InteroperativeRecordDrugGivenGraphWrapper;

package/src/components/anaesthetic/graphs/interoperative-record-drug-given-graph.component.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from '../anaesthetic.scss';
+
+export interface InteroperativeRecordDrugGivenData {
+  maintenanceAgent?: string;
+  concentrationRate?: string;
+  medicationGiven?: string;
+  fluidsGiven?: string;
+  index?: number;
+}
+
+interface InteroperativeRecordDrugGivenGraphProps {
+  data: InteroperativeRecordDrugGivenData[];
+}
+
+const InteroperativeRecordDrugGivenGraph: React.FC<InteroperativeRecordDrugGivenGraphProps> = ({ data }) => {
+  const { t } = useTranslation();
+  const getColumns = () => {
+    const emptyColumns = Array.from({ length: 20 }, (_, i) => `grid-${i + 1}`);
+
+    if (data.length === 0) {
+      return emptyColumns;
+    }
+    if (data.length <= 20) {
+      const dataColumns = data.map((_, index) => `data-${index}`);
+      const remainingEmpty = Array.from({ length: 20 - data.length }, (_, i) => `empty-${i + 1}`);
+      return [...dataColumns, ...remainingEmpty];
+    }
+    return data.map((_, index) => `data-${index}`);
+  };
+
+  const columns = getColumns();
+  const rows = [
+    { id: 'maintenanceAgent', label: t('maintenanceOfAnaesthesia', 'Maintenance of Anaesthesia') },
+    { id: 'concentrationRate', label: t('concentrationRate', 'Concentration rate') },
+    { id: 'medicationGiven', label: t('medicationsGiven', 'Medications given') },
+    { id: 'fluidsGiven', label: t('fluidsGiven', 'Fluids given') },
+  ];
+
+  const getDataForColumn = (column: string): InteroperativeRecordDrugGivenData | undefined => {
+    if (column.startsWith('grid-') || column.startsWith('empty-')) {
+      return undefined;
+    }
+    const index = parseInt(column.replace('data-', ''), 10);
+    return data[index];
+  };
+
+  const getCellContent = (column: string, rowId: string) => {
+    const dataItem = getDataForColumn(column);
+
+    if (!dataItem) {
+      return '';
+    }
+
+    if (rowId === 'maintenanceAgent') {
+      return dataItem.maintenanceAgent || '';
+    } else if (rowId === 'concentrationRate') {
+      return dataItem.concentrationRate || '';
+    } else if (rowId === 'medicationGiven') {
+      return dataItem.medicationGiven || '';
+    } else if (rowId === 'fluidsGiven') {
+      return dataItem.fluidsGiven || '';
+    }
+
+    return '';
+  };
+
+  return (
+    <div className={styles.drugsIVFluidsGraph}>
+      <div className={styles.membraneGrid}>
+        <div className={styles.gridContainer}>
+          {rows.map((row) => (
+            <div key={row.id} className={styles.gridRow}>
+              <div className={styles.gridRowLabel}>{row.label}</div>
+              {columns.map((column) => (
+                <div
+                  key={`${row.id}-${column}`}
+                  className={`${styles.gridCell} ${styles.drugsCell}`}
+                  data-column={column}
+                  data-row={row.id}>
+                  {getCellContent(column, row.id)}
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InteroperativeRecordDrugGivenGraph;

package/src/components/anaesthetic/resources/anaesthetic-amniotic-fluid.resource.ts

@@ -0,0 +1,277 @@
+import { useMemo } from 'react';
+import useSWR from 'swr';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { PARTOGRAPHY_CONCEPTS, MCH_PARTOGRAPHY_ENCOUNTER_UUID } from '../types';
+import { createPartographyEncounter, usePartographyData } from '../anaesthetic.resource';
+import { useTranslation } from 'react-i18next';
+
+export interface MembraneAmnioticFluidTimeEntry {
+  hour: number;
+  time: string;
+  timeSlot: string;
+  encounterDatetime: string;
+  amnioticFluid?: string;
+  moulding?: string;
+}
+
+export interface UseMembraneAmnioticFluidFormDataResult {
+  membraneAmnioticFluidData: any[];
+  membraneAmnioticFluidTimeEntries: MembraneAmnioticFluidTimeEntry[];
+  isLoading: boolean;
+  error: any;
+  mutate: () => void;
+}
+
+export function useMembraneAmnioticFluidData(patientUuid: string) {
+  const { t } = useTranslation();
+  const fetcher = (url: string) => openmrsFetch(url).then((res) => res.json());
+
+  const { data, error, isLoading, mutate } = useSWR(
+    patientUuid
+      ? `${restBaseUrl}/encounter?patient=${patientUuid}&encounterType=${MCH_PARTOGRAPHY_ENCOUNTER_UUID}&v=full&limit=100&order=desc`
+      : null,
+    fetcher,
+    {
+      revalidateOnFocus: true,
+      revalidateOnReconnect: true,
+    },
+  );
+
+  const membraneAmnioticFluidEntries = useMemo(() => {
+    if (!data?.results || !Array.isArray(data.results)) {
+      return [];
+    }
+
+    const entries = [];
+    for (const encounter of data.results) {
+      if (!encounter.obs || !Array.isArray(encounter.obs)) {
+        continue;
+      }
+
+      const amnioticFluidObs = encounter.obs.find((obs) => obs.concept.uuid === PARTOGRAPHY_CONCEPTS['amniotic-fluid']);
+      const mouldingObs = encounter.obs.find((obs) => obs.concept.uuid === PARTOGRAPHY_CONCEPTS['moulding']);
+      const timeObs = encounter.obs.find(
+        (obs) =>
+          obs.concept.uuid === PARTOGRAPHY_CONCEPTS['fetal-heart-rate-time'] &&
+          typeof obs.value === 'string' &&
+          obs.value.startsWith('Time:'),
+      );
+
+      let time = '';
+      if (timeObs && typeof timeObs.value === 'string') {
+        const timeMatch = timeObs.value.match(/Time:\s*(.+)/);
+        if (timeMatch) {
+          time = timeMatch[1].trim();
+        }
+      }
+
+      if (amnioticFluidObs || mouldingObs) {
+        entries.push({
+          id: `maf-${encounter.uuid}`,
+          uuid: encounter.uuid,
+          amnioticFluid: amnioticFluidObs?.value?.display || amnioticFluidObs?.value || '',
+          moulding: mouldingObs?.value?.display || mouldingObs?.value || '',
+          time,
+          date: new Date(encounter.encounterDatetime).toLocaleDateString(),
+          encounterDatetime: encounter.encounterDatetime,
+        });
+      }
+    }
+    return entries;
+  }, [data]);
+
+  let localizedError = error;
+  if (error) {
+    localizedError = t('Failed to load membrane amniotic fluid data');
+  }
+
+  return {
+    membraneAmnioticFluidEntries,
+    isLoading,
+    error: localizedError,
+    mutate,
+  };
+}
+
+/**
+ * Custom hook for membrane amniotic fluid form-specific data isolation
+ * This ensures membrane amniotic fluid form validations only consider membrane amniotic fluid data
+ */
+export const useMembraneAmnioticFluidFormData = (patientUuid: string): UseMembraneAmnioticFluidFormDataResult => {
+  const {
+    data: membraneAmnioticFluidEncounters = [],
+    isLoading,
+    error,
+    mutate,
+  } = usePartographyData(patientUuid, 'membrane-amniotic-fluid');
+
+  // Extract membrane amniotic fluid-specific time entries for form validation
+  const membraneAmnioticFluidTimeEntries = useMemo(() => {
+    if (!membraneAmnioticFluidEncounters || membraneAmnioticFluidEncounters.length === 0) {
+      return [];
+    }
+
+    return membraneAmnioticFluidEncounters
+      .map((encounter) => {
+        // Find amniotic fluid observation
+        const amnioticFluidObs = encounter.obs.find(
+          (obs) => obs.concept.uuid === PARTOGRAPHY_CONCEPTS['amniotic-fluid'],
+        );
+
+        // Find moulding observation
+        const mouldingObs = encounter.obs.find((obs) => obs.concept.uuid === PARTOGRAPHY_CONCEPTS['moulding']);
+
+        // Find time observation
+        const timeObs = encounter.obs.find(
+          (obs) =>
+            obs.concept.uuid === PARTOGRAPHY_CONCEPTS['fetal-heart-rate-time'] &&
+            typeof obs.value === 'string' &&
+            obs.value.startsWith('Time:'),
+        );
+
+        if (!amnioticFluidObs && !mouldingObs) {
+          return null; // Skip if no membrane amniotic fluid data
+        }
+
+        // Extract time from observation value
+        let time = '';
+        if (timeObs && typeof timeObs.value === 'string') {
+          const timeMatch = timeObs.value.match(/Time:\s*(.+)/);
+          if (timeMatch) {
+            time = timeMatch[1].trim();
+          }
+        }
+
+        if (!time || !time.match(/^\d{1,2}:\d{2}$/)) {
+          return null; // Skip if invalid time format
+        }
+
+        // Convert time to hour value for progressive validation
+        const [hours, minutes] = time.split(':').map(Number);
+        const hourValue = hours + minutes / 60; // Convert to decimal hour
+
+        // Create timeSlot from hour (for backward compatibility with existing form logic)
+        const timeSlot = hourValue.toString();
+
+        // Extract amniotic fluid value
+        let amnioticFluid: string | undefined;
+        if (amnioticFluidObs?.value) {
+          if (
+            typeof amnioticFluidObs.value === 'object' &&
+            amnioticFluidObs.value &&
+            'display' in amnioticFluidObs.value
+          ) {
+            amnioticFluid = (amnioticFluidObs.value as any).display;
+          } else {
+            amnioticFluid = String(amnioticFluidObs.value);
+          }
+        }
+
+        // Extract moulding value
+        let moulding: string | undefined;
+        if (mouldingObs?.value) {
+          if (typeof mouldingObs.value === 'object' && mouldingObs.value && 'display' in mouldingObs.value) {
+            moulding = (mouldingObs.value as any).display;
+          } else {
+            moulding = String(mouldingObs.value);
+          }
+        }
+
+        return {
+          hour: hourValue,
+          time: time,
+          timeSlot: timeSlot,
+          encounterDatetime: encounter.encounterDatetime,
+          amnioticFluid,
+          moulding,
+        };
+      })
+      .filter((entry) => entry !== null)
+      .sort((a, b) => {
+        // Sort by encounter datetime for chronological order
+        return new Date(a!.encounterDatetime).getTime() - new Date(b!.encounterDatetime).getTime();
+      }) as MembraneAmnioticFluidTimeEntry[];
+  }, [membraneAmnioticFluidEncounters]);
+
+  return {
+    membraneAmnioticFluidData: membraneAmnioticFluidEncounters,
+    membraneAmnioticFluidTimeEntries,
+    isLoading,
+    error,
+    mutate,
+  };
+};
+
+export async function saveMembraneAmnioticFluidData(
+  patientUuid: string,
+  formData: { amnioticFluid: string; moulding: string; time: string },
+  t: (key: string, defaultValue?: string, options?: any) => string,
+  locationUuid?: string,
+  providerUuid?: string,
+): Promise<{ success: boolean; message: string }> {
+  try {
+    const result = await createPartographyEncounter(
+      patientUuid,
+      'membrane-amniotic-fluid',
+      formData,
+      locationUuid,
+      providerUuid,
+    );
+    if (result?.success && result?.encounter) {
+      return result;
+    } else {
+      return {
+        success: false,
+        message: result?.message || t('Failed to save membrane amniotic fluid data'),
+      };
+    }
+  } catch (error) {
+    return {
+      success: false,
+      message: error?.message || t('Failed to save membrane amniotic fluid data'),
+    };
+  }
+}
+
+/**
+ * Helper function to convert time string to decimal hour
+ * Example: "14:30" -> 14.5
+ */
+export const convertMembraneTimeToHour = (timeString: string): number => {
+  if (!timeString || !timeString.match(/^\d{1,2}:\d{2}$/)) {
+    return 0;
+  }
+
+  const [hours, minutes] = timeString.split(':').map(Number);
+  return hours + minutes / 60;
+};
+
+/**
+ * Helper function to extract time from membrane amniotic fluid observation value
+ */
+export const extractTimeFromMembraneObs = (obsValue: any): string => {
+  if (!obsValue) {
+    return '';
+  }
+
+  if (typeof obsValue === 'string') {
+    // Handle "Time: HH:MM" format
+    if (obsValue.startsWith('Time:')) {
+      const match = obsValue.match(/Time:\s*(.+)/);
+      if (match) {
+        const time = match[1].trim();
+        // Validate HH:MM format
+        if (time.match(/^\d{1,2}:\d{2}$/)) {
+          return time;
+        }
+      }
+    }
+
+    // Handle direct HH:MM format
+    if (obsValue.match(/^\d{1,2}:\d{2}$/)) {
+      return obsValue;
+    }
+  }
+
+  return '';
+};