@kenyaemr/esm-patient-clinical-view-app 5.4.2-pre.2716 → 5.4.2-pre.2724

package/src/maternal-and-child-health/partography/components/uterine-contractions-graph.component.tsx

@@ -0,0 +1,209 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, SkeletonText } from '@carbon/react';
+import { Add, ChartColumn, Table as TableIcon } from '@carbon/react/icons';
+import styles from '../partography.scss';
+import UterineContractionsTable from '../table/uterine-contractions-table.component';
+
+interface UterineContractionsTableRow {
+  id: string;
+  date: string;
+  timeSlot: string;
+  contractionCount: string;
+  contractionLevel: string;
+  protein?: string;
+  acetone?: string;
+  volume?: string;
+}
+
+interface UterineContractionsGraphProps {
+  tableData: UterineContractionsTableRow[];
+  viewMode: 'graph' | 'table';
+  currentPage: number;
+  pageSize: number;
+  totalItems: number;
+  controlSize: 'sm' | 'md';
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (size: number) => void;
+  onAddData?: () => void;
+  onViewModeChange?: (mode: 'graph' | 'table') => void;
+  isAddButtonDisabled?: boolean;
+  isLoading?: boolean;
+}
+
+const UterineContractionsGraph: React.FC<UterineContractionsGraphProps> = ({
+  tableData,
+  viewMode,
+  currentPage,
+  pageSize,
+  totalItems,
+  controlSize,
+  onPageChange,
+  onPageSizeChange,
+  onAddData,
+  onViewModeChange,
+  isAddButtonDisabled = false,
+  isLoading = false,
+}) => {
+  const { t } = useTranslation();
+
+  // Only show rows with both date and timeSlot
+  const filteredTableData = tableData.filter((item) => item.date && item.timeSlot);
+  const timeColumns = filteredTableData.map((item) => item.timeSlot || '--');
+  const yAxisLabels = ['5', '4', '3', '2', '1'];
+
+  // Carbon skeleton for loading state
+  const renderSkeleton = () => (
+    <div className={styles.membraneGrid}>
+      <div className={styles.gridContainer}>
+        <div className={styles.gridHeader}>
+          <div className={styles.gridCell}>
+            <SkeletonText width="60px" />
+          </div>
+          {[...Array(6)].map((_, idx) => (
+            <div key={idx} className={styles.gridCell}>
+              <SkeletonText width="60px" />
+            </div>
+          ))}
+        </div>
+        <div className={styles.gridRow}>
+          <div className={styles.gridRowLabel}>
+            <SkeletonText width="80px" />
+          </div>
+          {[...Array(6)].map((_, idx) => (
+            <div key={idx} className={styles.gridCell}>
+              <SkeletonText width="40px" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+
+  // Empty state for no data
+  const renderEmptyGraph = () => (
+    <div className={styles.membraneGrid}>
+      <div className={styles.gridContainer}>
+        <div className={styles.gridHeader}>
+          <div className={styles.gridCell}>{t('time', 'Time')}</div>
+          {[...Array(6)].map((_, idx) => (
+            <div key={idx} className={styles.gridCell}>
+              --
+            </div>
+          ))}
+        </div>
+        <div className={styles.gridRow}>
+          <div className={styles.gridRowLabel}>{t('contractions', 'Contractions')}</div>
+          {[...Array(6)].map((_, idx) => (
+            <div key={idx} className={styles.gridCell}>
+              --
+            </div>
+          ))}
+        </div>
+        <div style={{ textAlign: 'center', marginTop: '2rem', width: '100%' }}>
+          <p>{t('noContractionData', 'No contraction data available')}</p>
+          <Button kind="primary" size={controlSize} renderIcon={Add} onClick={onAddData}>
+            {t('addFirstDataPoint', 'Add first data point')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className={styles.fetalHeartRateSection}>
+      <div className={styles.fetalHeartRateContainer}>
+        <div className={styles.fetalHeartRateHeader}>
+          <div className={styles.fetalHeartRateHeaderLeft}>
+            <h3 className={styles.fetalHeartRateTitle}>Uterine Contractions</h3>
+            <div className={styles.fetalHeartRateControls}>
+              <span className={styles.legendText}>
+                Contractions per 10 min | Bar Heights: 0=None, 2=Mild, 3=Moderate, 5=Strong
+              </span>
+            </div>
+          </div>
+          <div className={styles.fetalHeartRateHeaderRight}>
+            <div className={styles.fetalHeartRateActions}>
+              <div className={styles.viewSwitcher}>
+                <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 uterine contractions data"
+                disabled={isAddButtonDisabled}
+                onClick={onAddData}
+                className={styles.addButton}>
+                Add
+              </Button>
+            </div>
+          </div>
+        </div>
+        {viewMode === 'graph' ? (
+          isLoading ? (
+            renderSkeleton()
+          ) : filteredTableData.length === 0 ? (
+            renderEmptyGraph()
+          ) : (
+            <div className={styles.membraneGrid}>
+              <div className={styles.gridContainer}>
+                {/* Header row with time columns */}
+                <div className={styles.gridHeader}>
+                  <div className={styles.gridCell}>{t('time', 'Time')}</div>
+                  {timeColumns.map((timeColumn, idx) => (
+                    <div key={idx} className={styles.gridCell}>
+                      {timeColumn}
+                    </div>
+                  ))}
+                </div>
+                {/* Contractions row */}
+                <div className={styles.gridRow}>
+                  <div className={styles.gridRowLabel}>{t('contractions', 'Contractions')}</div>
+                  {filteredTableData.map((item, idx) => (
+                    <div key={`contraction-${idx}`} className={styles.gridCell}>
+                      {item.contractionCount !== undefined && item.contractionCount !== null
+                        ? item.contractionCount
+                        : '--'}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )
+        ) : (
+          <div className={styles.tableContainer}>
+            <UterineContractionsTable
+              tableData={filteredTableData}
+              currentPage={currentPage}
+              pageSize={pageSize}
+              totalItems={filteredTableData.length}
+              controlSize={controlSize}
+              onPageChange={onPageChange}
+              onPageSizeChange={onPageSizeChange}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default UterineContractionsGraph;

package/src/maternal-and-child-health/partography/forms/cervical-contractions-form.component.tsx

@@ -0,0 +1,211 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useForm, Controller } from 'react-hook-form';
+import { Button, Modal, Grid, Column, Dropdown } from '@carbon/react';
+import styles from '../partography.scss';
+import { CONTRACTION_STRONG_UUID } from '../types';
+import { MOULDING_NONE_CONCEPT, MOULDING_SLIGHT_CONCEPT, MOULDING_MODERATE_CONCEPT } from '../../../config-schema';
+
+type CervicalContractionsFormData = {
+  contractionLevel: string;
+  contractionCount: string;
+};
+
+type CervicalContractionsFormProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (data: { contractionLevel: string; contractionCount: string; timeSlot: string }) => void;
+  onDataSaved?: () => void;
+  patient?: {
+    uuid: string;
+    name: string;
+    gender: string;
+    age: string;
+  };
+};
+
+const CervicalContractionsForm: React.FC<CervicalContractionsFormProps> = ({
+  isOpen,
+  onClose,
+  onSubmit,
+  onDataSaved,
+  patient,
+}) => {
+  const { t } = useTranslation();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    setError,
+    clearErrors,
+    formState: { errors },
+  } = useForm<CervicalContractionsFormData>({
+    defaultValues: {
+      contractionLevel: '',
+      contractionCount: '',
+    },
+  });
+
+  const contractionLevelOptions = useMemo(
+    () => [
+      {
+        value: 'none',
+        label: t('noContractions', 'No Contractions'),
+        concept: MOULDING_NONE_CONCEPT,
+        visual: '0',
+        visualClass: 'none',
+        title: t('none', 'None'),
+      },
+      {
+        value: 'mild',
+        label: t('mildContractions', 'Mild Contractions'),
+        concept: MOULDING_SLIGHT_CONCEPT,
+        visual: '1',
+        visualClass: 'mild',
+        title: t('mild', 'Mild'),
+      },
+      {
+        value: 'moderate',
+        label: t('moderateContractions', 'Moderate Contractions'),
+        concept: MOULDING_MODERATE_CONCEPT,
+        visual: '2',
+        visualClass: 'moderate',
+        title: t('moderate', 'Moderate'),
+      },
+      {
+        value: 'strong',
+        label: t('strongContractions', 'Strong Contractions'),
+        concept: CONTRACTION_STRONG_UUID,
+        visual: '3',
+        visualClass: 'strong',
+        title: 'Strong',
+      },
+    ],
+    [t],
+  );
+
+  const contractionCountItems = useMemo(
+    () => [
+      { id: '1', text: t('oneContraction', '1 contraction') },
+      { id: '2', text: t('twoContractions', '2 contractions') },
+      { id: '3', text: t('threeContractions', '3 contractions') },
+      { id: '4', text: t('fourContractions', '4 contractions') },
+      { id: '5', text: t('fiveContractions', '5 contractions') },
+    ],
+    [t],
+  );
+
+  const handleFormSubmit = (data: CervicalContractionsFormData) => {
+    const currentTime = new Date().toLocaleTimeString('en-GB', {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+
+    onSubmit({
+      contractionLevel: data.contractionLevel,
+      contractionCount: data.contractionCount,
+      timeSlot: currentTime,
+    });
+
+    reset();
+  };
+
+  const handleClose = () => {
+    reset();
+    clearErrors();
+    onClose();
+  };
+
+  return (
+    <Modal
+      open={isOpen}
+      onRequestClose={handleClose}
+      primaryButtonText={t('save', 'Save')}
+      secondaryButtonText={t('cancel', 'Cancel')}
+      onRequestSubmit={handleSubmit(handleFormSubmit)}
+      onSecondarySubmit={handleClose}
+      className={styles.cervixModal}
+      size="lg">
+      <div className={styles.contractionsFormContainer}>
+        <div className={styles.formMainSection}>
+          <div className={styles.formSectionLeft}>
+            <h3 className={styles.sectionTitle}>{t('cervicalContractionsData', 'Cervical Contractions')}</h3>
+            <h4 className={styles.sectionTitle}>{t('contractionLevel', 'Select Contraction Level')}</h4>
+            <p className={styles.sectionDescription}>
+              {t('contractionLevelDescription', 'Choose the intensity of uterine contractions observed')}
+            </p>
+
+            <Controller
+              name="contractionLevel"
+              control={control}
+              rules={{ required: t('contractionLevelRequired', 'Please select contraction level') }}
+              render={({ field, fieldState }) => (
+                <>
+                  <div className={styles.contractionLevelSelector}>
+                    {contractionLevelOptions.map((option) => (
+                      <div
+                        key={option.value}
+                        className={`${styles.contractionLevelOption} ${
+                          field.value === option.value ? styles.contractionLevelSelected : ''
+                        }`}
+                        onClick={() => field.onChange(option.value)}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            field.onChange(option.value);
+                          }
+                        }}
+                        role="button"
+                        tabIndex={0}
+                        aria-pressed={field.value === option.value}
+                        title={option.label}>
+                        <div className={styles.contractionLevelTitle}>{option.title}</div>
+                        <div className={`${styles.contractionLevelButton} ${styles[option.visualClass]}`}>
+                          {option.visual}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                  {fieldState.error && <div className={styles.errorMessage}>{fieldState.error.message}</div>}
+                </>
+              )}
+            />
+          </div>
+
+          <div className={styles.formSectionRight}>
+            <Controller
+              name="contractionCount"
+              control={control}
+              rules={{ required: t('contractionCountRequired', 'Please select number of contractions') }}
+              render={({ field, fieldState }) => (
+                <>
+                  <Dropdown
+                    id="contraction-count-dropdown"
+                    titleText={t('chooseCount', 'Number of Contractions')}
+                    label={t('chooseCount', 'Choose count')}
+                    items={contractionCountItems}
+                    itemToString={(item) => (item ? item.text : '')}
+                    selectedItem={
+                      field.value
+                        ? {
+                            id: field.value,
+                            text: `${field.value} contraction${field.value === '1' ? '' : 's'}`,
+                          }
+                        : null
+                    }
+                    onChange={({ selectedItem }) => field.onChange(selectedItem?.id || '')}
+                    className={styles.contractionCountDropdown}
+                  />
+                  {fieldState.error && <div className={styles.errorMessage}>{fieldState.error.message}</div>}
+                </>
+              )}
+            />
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default CervicalContractionsForm;