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

package/src/components/anaesthetic/forms/time-picker-with-clock.scss

@@ -0,0 +1,178 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
+
+.timePickerContainer {
+  position: relative;
+  width: 100%;
+}
+
+.inputWrapper {
+  position: relative;
+  cursor: pointer;
+  input {
+    cursor: pointer;
+    caret-color: transparent;
+  }
+}
+
+.clockIcon {
+  position: absolute;
+  right: spacing.$spacing-05;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: $text-02;
+  z-index: 1;
+}
+
+.clockDropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: $ui-background;
+  border: 1px solid $ui-03;
+  border-radius: 4px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  z-index: 9999;
+  padding: spacing.$spacing-05;
+  margin-top: spacing.$spacing-02;
+  min-height: 240px;
+}
+
+.clockFace {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.clockTitle {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: spacing.$spacing-05;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: spacing.$spacing-03;
+}
+
+.backButton {
+  @include type.type-style('body-compact-01');
+  background: none;
+  border: none;
+  color: colors.$blue-60;
+  cursor: pointer;
+  text-decoration: underline;
+  padding: 0;
+
+  &:hover {
+    color: colors.$blue-70;
+  }
+}
+
+.clockNumbers {
+  position: relative;
+  width: 180px;
+  height: 180px;
+  border-radius: 50%;
+  border: 2px solid $ui-03;
+  background: $ui-background;
+}
+
+.clockNumber {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0 0;
+  width: 32px;
+  height: 32px;
+  border: 1px solid $ui-03;
+  border-radius: 50%;
+  background: $ui-background;
+  color: $text-02;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  @include type.type-style('body-compact-01');
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: $ui-02;
+    border-color: colors.$blue-60;
+    transform: scale(1.1);
+  }
+
+  &:active {
+    background: colors.$blue-60;
+    color: colors.$white;
+  }
+}
+
+.hourNumber {
+  font-weight: 600;
+
+  &:hover {
+    background: colors.$green-50;
+    color: colors.$white;
+  }
+}
+
+.minuteNumber {
+  background: $ui-02;
+
+  &:hover {
+    background: colors.$purple-60;
+    color: colors.$white;
+  }
+}
+
+@media (max-width: 672px) {
+  .clockDropdown {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    right: auto;
+    transform: translate(-50%, -50%);
+    width: 90vw;
+    max-width: 300px;
+    border-radius: 8px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  }
+
+  .clockNumbers {
+    width: 160px;
+    height: 160px;
+  }
+
+  .clockNumber {
+    width: 28px;
+    height: 28px;
+    @include type.type-style('body-compact-01');
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .clockDropdown {
+    background: $ui-02;
+    border-color: $ui-04;
+  }
+
+  .clockNumbers {
+    border-color: $ui-04;
+    background: $ui-background;
+  }
+
+  .clockNumber {
+    background: $ui-02;
+    border-color: $ui-04;
+    color: $text-02;
+
+    &:hover {
+      background: $ui-03;
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+import { useCervixData, UseCervixDataResult } from '../resources/anaesthetic.resource';
+export function useCervixFormData(patientUuid: string): UseCervixDataResult {
+  return useCervixData(patientUuid);
+}
+export type {
+  CervixFormData,
+  CervixObservation,
+  CervixEncounter,
+  SaveCervixDataResponse,
+} from '../resources/anaesthetic.resource';
+
+export {
+  saveCervixFormData,
+  deleteCervixEncounter,
+  MCH_PARTOGRAPHY_ENCOUNTER_UUID,
+} from '../resources/anaesthetic.resource';

package/src/components/anaesthetic/graphs/anaesthetic-graph-wrapper.component.tsx

@@ -0,0 +1,266 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  DataTable,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Pagination,
+} from '@carbon/react';
+import { Add, ChartColumn, Table as TableIcon } from '@carbon/react/icons';
+import { launchWorkspace2 } from '@openmrs/esm-framework';
+import AnaestheticGraph, { AnaestheticGraphData } from './anaesthetic-graph.component';
+import { type AnaestheticFormWorkspaceProps } from '../forms/anaesthetic-form.component';
+import styles from '../anaesthetic.scss';
+import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+
+interface AnaestheticGraphWrapperProps {
+  data: AnaestheticGraphData[];
+  tableData?: Array<{
+    pulse: number;
+    systolicBP: number;
+    diastolicBP: number;
+    spo2?: number | string;
+    etco2?: number | string;
+    date?: string;
+    time?: string;
+    timestamp?: Date;
+  }>;
+  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;
+  minTime?: string;
+  patient?: {
+    uuid: string;
+    name: string;
+    gender: string;
+    age: string;
+  };
+  onAnaestheticSubmit?: (data: {
+    heartRate: number;
+    systolicBP: number;
+    diastolicBP: number;
+    spo2: number;
+    etco2: number;
+    time: string;
+  }) => Promise<void> | void;
+}
+
+const AnaestheticGraphWrapper: React.FC<AnaestheticGraphWrapperProps> = ({
+  data = [],
+  tableData = [],
+  viewMode = 'graph',
+  currentPage = 1,
+  pageSize = 5,
+  totalItems = 0,
+  controlSize = 'sm',
+  onAddData,
+  onViewModeChange,
+  onPageChange,
+  onPageSizeChange,
+  isAddButtonDisabled = false,
+  minTime,
+  patient,
+  onAnaestheticSubmit,
+}) => {
+  const { t } = useTranslation();
+
+  const formatDateTime = (item: any, index: number): string => {
+    if (item.timestamp) {
+      return (
+        item.timestamp.toLocaleDateString() +
+        ' ' +
+        item.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+      );
+    }
+
+    if (item.date && item.time) {
+      return `${item.date} ${item.time}`;
+    }
+
+    if (item.date) {
+      return item.date;
+    }
+
+    if (item.time) {
+      return item.time;
+    }
+
+    const now = new Date();
+    return now.toLocaleDateString() + ' ' + now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  };
+
+  const handleFormSubmit = async (formData: {
+    heartRate: number;
+    systolicBP: number;
+    diastolicBP: number;
+    spo2: number;
+    etco2: number;
+    time: string;
+  }) => {
+    await onAnaestheticSubmit?.(formData);
+  };
+
+  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 existingTimeEntries = tableData
+    .filter((item) => typeof item.time === 'string' && item.time.includes(':'))
+    .map((item, index) => ({ hour: index, time: item.time as string }));
+
+  const handleAddData = () => {
+    onAddData?.();
+    launchWorkspace2<AnaestheticFormWorkspaceProps, {}, {}>('anaesthetic-record-workspace-form', {
+      onSubmit: handleFormSubmit,
+      patient,
+      existingTimeEntries,
+      minTime,
+    });
+  };
+
+  const headers = [
+    { key: 'dateTime', header: t('dateTime', 'Date & Time') },
+    { key: 'heartRate', header: t('heartRate', 'Heart Rate (bpm)') },
+    { key: 'bloodPressure', header: t('bloodPressure', 'Blood Pressure (mmHg)') },
+    { key: 'spo2', header: t('spo2', 'SPO2') },
+    { key: 'etco2', header: t('etco2', 'EtCO2') },
+  ];
+
+  const rows = paginatedTableData.map((item, index) => {
+    return {
+      id: `${internalPage}-${index}`,
+      dateTime: formatDateTime(item, index),
+      heartRate: item.pulse,
+      bloodPressure: `${item.systolicBP}/${item.diastolicBP}`,
+      spo2: item.spo2 ?? '--',
+      etco2: item.etco2 ?? '--',
+    };
+  });
+
+  return (
+    <div className={styles.fetalHeartRateSection}>
+      <div className={styles.fetalHeartRateContainer}>
+        <div className={styles.fetalHeartRateHeader}>
+          <div className={styles.fetalHeartRateTitle}>
+            <h3 className={styles.fetalHeartRateHeading}>{t('anaestheticRecord', 'Anaesthetic 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 anaesthetic record"
+              disabled={isAddButtonDisabled}
+              onClick={handleAddData}
+              className={styles.addButton}>
+              Add
+            </Button>
+          </div>
+        </div>
+
+        {viewMode === 'graph' ? (
+          <AnaestheticGraph data={data} />
+        ) : (
+          <div className={styles.tableContainer}>
+            {tableData && tableData.length > 0 ? (
+              <>
+                <TableContainer title="">
+                  <DataTable rows={rows} headers={headers} isSortable={false}>
+                    {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+                      <Table {...getTableProps()} size={controlSize} className={styles.dataTable}>
+                        <TableHead>
+                          <TableRow>
+                            {headers.map((header) => (
+                              <TableHeader {...getHeaderProps({ header })} key={header.key}>
+                                {header.header}
+                              </TableHeader>
+                            ))}
+                          </TableRow>
+                        </TableHead>
+                        <TableBody>
+                          {rows.map((row) => (
+                            <TableRow {...getRowProps({ row })} key={row.id}>
+                              {row.cells.map((cell) => (
+                                <TableCell key={cell.id}>{cell.value}</TableCell>
+                              ))}
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    )}
+                  </DataTable>
+                </TableContainer>
+                <Pagination
+                  page={internalPage}
+                  pageSize={internalPageSize}
+                  pageSizes={calculatedPageSizes}
+                  totalItems={totalItems}
+                  onChange={({ page, pageSize }) => {
+                    setInternalPage(page);
+                    setInternalPageSize(pageSize);
+                    onPageChange?.(page);
+                    onPageSizeChange?.(pageSize);
+                  }}
+                  className={styles.pagination}
+                />
+                {totalItems > 0 && <div className={styles.paginationInfo}>{itemsDisplayed}</div>}
+              </>
+            ) : (
+              <div className={styles.emptyTable}>
+                <p>{t('noAnaestheticRecordData', 'No anaesthetic record data available')}</p>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AnaestheticGraphWrapper;

package/src/components/anaesthetic/graphs/anaesthetic-graph.component.tsx

@@ -0,0 +1,185 @@
+import React from 'react';
+import { LineChart } from '@carbon/charts-react';
+import styles from '../anaesthetic.scss';
+
+export interface AnaestheticGraphData {
+  pulse: number;
+  systolicBP: number;
+  diastolicBP: number;
+  spo2?: number;
+  etco2?: number;
+  time?: string;
+  index?: number;
+  date?: string;
+  timestamp?: Date;
+}
+
+interface ChartDataPoint {
+  index: number;
+  time: string;
+  group: string;
+  value: number;
+}
+
+interface AnaestheticGraphProps {
+  data: AnaestheticGraphData[];
+}
+
+enum ScaleTypes {
+  LABELS = 'labels',
+  LINEAR = 'linear',
+}
+
+const DEFAULT_VISIBLE_SLOTS = 24;
+
+const ANAESTHETIC_CHART_OPTIONS = {
+  axes: {
+    bottom: {
+      title: 'Time',
+      mapsTo: 'index',
+      scaleType: ScaleTypes.LINEAR,
+      domain: [0, DEFAULT_VISIBLE_SLOTS - 1],
+      ticks: {
+        values: Array.from({ length: DEFAULT_VISIBLE_SLOTS }, (_, index) => index),
+        formatter: () => '',
+      },
+    },
+    left: {
+      title: 'Vitals',
+      mapsTo: 'value',
+      domain: [0, 260],
+      ticks: {
+        values: [0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 200, 220, 240, 260],
+        formatter: (value: number) => `${value}`,
+      },
+      scaleType: ScaleTypes.LINEAR,
+    },
+  },
+  points: {
+    enabled: true,
+    radius: 4,
+    filled: true,
+  },
+  curve: 'curveLinear',
+  height: '600px',
+  theme: 'white',
+  toolbar: {
+    enabled: false,
+  },
+  legend: {
+    position: 'top',
+    clickable: false,
+  },
+  grid: {
+    x: {
+      enabled: true,
+      numberOfTicks: DEFAULT_VISIBLE_SLOTS,
+    },
+    y: {
+      enabled: true,
+      numberOfTicks: 14,
+    },
+  },
+  zoomBar: {
+    top: {
+      enabled: false,
+    },
+  },
+};
+
+const AnaestheticGraph: React.FC<AnaestheticGraphProps> = ({ data }) => {
+  const actualData: AnaestheticGraphData[] = React.useMemo(() => (data.length > 0 ? data : []), [data]);
+  const dataForPlot = actualData;
+  const hasActualData = dataForPlot.length > 0;
+  const visibleSlotCount = Math.max(dataForPlot.length, DEFAULT_VISIBLE_SLOTS);
+
+  const finalChartData: ChartDataPoint[] = hasActualData
+    ? dataForPlot.flatMap((item, index) => {
+        const time = item.time || `T${index + 1}`;
+        return [
+          { index, time, value: item.systolicBP, group: 'Systolic BP' },
+          { index, time, value: item.diastolicBP, group: 'Diastolic BP' },
+          { index, time, value: item.pulse, group: 'Heart Rate' },
+          { index, time, value: item.spo2 ?? 0, group: 'SPO2' },
+          { index, time, value: item.etco2 ?? 0, group: 'EtCO2' },
+        ] satisfies ChartDataPoint[];
+      })
+    : Array.from({ length: visibleSlotCount }, (_, index) => ({
+        index,
+        time: '',
+        value: Number.NaN,
+        group: '__grid__',
+      }));
+
+  const colorScale: { [key: string]: string } = {
+    'Systolic BP': '#da1e28',
+    'Diastolic BP': '#24a148',
+    'Heart Rate': '#0f62fe',
+    SPO2: '#8a3ffc',
+    EtCO2: '#ff832b',
+    __grid__: 'rgba(0, 0, 0, 0)',
+  };
+
+  const chartOptions = {
+    ...ANAESTHETIC_CHART_OPTIONS,
+    title: 'Anaesthetic record',
+    axes: {
+      ...ANAESTHETIC_CHART_OPTIONS.axes,
+      bottom: {
+        ...ANAESTHETIC_CHART_OPTIONS.axes.bottom,
+        domain: [0, visibleSlotCount - 1],
+        ticks: {
+          values: Array.from({ length: visibleSlotCount }, (_, index) => index),
+          formatter: (index: number) => dataForPlot[index]?.time || '',
+        },
+      },
+    },
+    color: {
+      scale: colorScale,
+    },
+    points: {
+      enabled: true,
+      radius: 4,
+      filled: true,
+      strokeWidth: 2,
+    },
+    legend: {
+      position: 'top',
+      clickable: false,
+      enabled: hasActualData,
+    },
+    grid: {
+      x: {
+        enabled: true,
+        numberOfTicks: visibleSlotCount,
+      },
+      y: {
+        enabled: true,
+        numberOfTicks: 14,
+      },
+    },
+    tooltip: {
+      showTotal: false,
+      customHTML: (data: any) => {
+        if (data && data.length > 0) {
+          const point = data[0];
+          return `<div style="background: #333; color: white; padding: 8px; border-radius: 4px; font-size: 14px; border: none;">
+            <div>${point.group}</div>
+            <div>${point.time}: ${point.value}</div>
+          </div>`;
+        }
+        return '';
+      },
+    },
+  };
+
+  return (
+    <div className={styles.pulseBPGraph}>
+      <div className={styles.chartContainer} data-chart-id="pulse-bp">
+        <LineChart data={finalChartData} options={chartOptions} />
+      </div>
+    </div>
+  );
+};
+
+export default AnaestheticGraph;

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

@@ -0,0 +1,2 @@
+export { default as InteroperativeRecordDrugGivenGraph } from './interoperative-record-drug-given-graph-wrapper.component';
+export { default as AnaestheticGraph } from './anaesthetic-graph-wrapper.component';