@kenyaemr/esm-patient-clinical-view-app 5.4.2-pre.2788 → 5.4.2-pre.2797

package/src/maternal-and-child-health/partography/graphs/membrane-amniotic-fluid-graph.component.tsx

@@ -22,6 +22,7 @@ interface MembraneAmnioticFluidData {
   exactTime: string;
   amnioticFluid: string;
   moulding: string;
+  time?: string;
   date?: string;
   id?: string;
 }
@@ -82,13 +83,13 @@ const MembraneAmnioticFluidGraph: React.FC<MembraneAmnioticFluidGraphProps> = ({
   ];
 
   const getTimeColumns = () => {
-    const emptyColumns = Array.from({ length: 13 }, (_, i) => `grid-${i + 1}`);
+    const emptyColumns = Array.from({ length: 20 }, (_, i) => `grid-${i + 1}`);
     if (data.length === 0) {
       return emptyColumns;
     }
     const dataTimes = data.map((item, idx) => item.exactTime || String(idx));
-    if (dataTimes.length <= 13) {
-      const remainingEmpty = Array.from({ length: 13 - dataTimes.length }, (_, i) => `empty-${i + 1}`);
+    if (dataTimes.length <= 20) {
+      const remainingEmpty = Array.from({ length: 20 - dataTimes.length }, (_, i) => `empty-${i + 1}`);
       return [...dataTimes, ...remainingEmpty];
     }
     return dataTimes;
@@ -168,6 +169,27 @@ const MembraneAmnioticFluidGraph: React.FC<MembraneAmnioticFluidGraphProps> = ({
         {viewMode === 'graph' ? (
           <div className={styles.membraneGrid}>
             <div className={styles.gridContainer}>
+              <div className={styles.gridRow}>
+                <div className={styles.gridRowLabel} style={{ fontWeight: 600 }}>
+                  {t('time', 'Time')}
+                </div>
+                {timeColumns.map((timeColumn, idx) => {
+                  const item = data[idx];
+                  let timeValue = '';
+                  if (item) {
+                    timeValue = item.time || item.timeSlot || item.exactTime || '';
+                  }
+                  return (
+                    <div
+                      key={`time-${idx}`}
+                      className={styles.gridCell}
+                      style={{ textAlign: 'center', fontWeight: 600 }}>
+                      {timeValue}
+                    </div>
+                  );
+                })}
+              </div>
+
               <div className={styles.gridRow}>
                 <div className={styles.gridRowLabel}>{t('amnioticFluid', 'Amniotic Fluid')}</div>
                 {timeColumns.map((timeColumn) => {

package/src/maternal-and-child-health/partography/graphs/oxytocin-graph-wrapper.component.tsx

@@ -75,114 +75,119 @@ const OxytocinGraph: React.FC<OxytocinGraphProps> = ({
   ];
 
   return (
-    <div className={styles.graphContainer}>
-      <div className={styles.graphHeader}>
-        <div className={styles.graphHeaderLeft}>
-          <h6>{t('oxytocinAdministration', 'Oxytocin Administration')}</h6>
-          <Tag type="outline">{t('oxytocinRange', '0-60 drops/min')}</Tag>
-        </div>
-        <div className={styles.graphHeaderRight}>
-          <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>
+    <div className={styles.fetalHeartRateSection}>
+      <div className={styles.fetalHeartRateContainer}>
+        <div className={styles.fetalHeartRateHeader}>
+          <div className={styles.fetalHeartRateHeaderLeft}>
+            <h6 className={styles.fetalHeartRateTitle}>{t('oxytocinAdministration', 'Oxytocin Administration')}</h6>
+            <Tag type="outline">{t('oxytocinRange', '0-60 drops/min')}</Tag>
+            <p style={{ fontSize: '0.875rem', color: '#525252', margin: 0 }}>
+              {t('oxytocinDescription', 'Track oxytocin administration and drops per minute over time')}
+            </p>
+          </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={viewMode === 'table' ? 'primary' : 'secondary'}
+              kind="primary"
               size={controlSize}
-              hasIconOnly
-              iconDescription={t('tableView', 'Table View')}
-              onClick={() => onViewModeChange('table')}
-              className={styles.viewButton}>
-              <TableIcon />
+              renderIcon={Add}
+              onClick={onAddData}
+              disabled={isAddButtonDisabled}>
+              {t('add', 'Add')}
             </Button>
           </div>
-          <Button kind="primary" size={controlSize} renderIcon={Add} onClick={onAddData} disabled={isAddButtonDisabled}>
-            {t('add', 'Add')}
-          </Button>
         </div>
-      </div>
-      <p className={styles.graphDescription}>
-        {t('oxytocinDescription', 'Track oxytocin administration and drops per minute over time')}
-      </p>
 
-      {viewMode === 'graph' ? (
-        <div className={styles.chartContainer}>
+        {viewMode === 'graph' ? (
           <OxytocinGraphComponent data={data} />
-        </div>
-      ) : (
-        <div className={styles.tableContainer}>
-          {paginatedData.length > 0 ? (
-            <>
-              <DataTable rows={paginatedData} headers={tableHeaders}>
-                {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
-                  <TableContainer title="" description="">
-                    <Table {...getTableProps()} size="sm">
-                      <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>
+        ) : (
+          <div className={styles.tableContainer}>
+            {paginatedData.length > 0 ? (
+              <>
+                <DataTable rows={paginatedData} headers={tableHeaders}>
+                  {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+                    <TableContainer title="" description="">
+                      <Table {...getTableProps()} size="sm">
+                        <TableHead>
+                          <TableRow>
+                            {headers.map((header) => (
+                              <TableHeader {...getHeaderProps({ header })} key={header.key}>
+                                {header.header}
+                              </TableHeader>
                             ))}
                           </TableRow>
-                        ))}
-                      </TableBody>
-                    </Table>
-                  </TableContainer>
-                )}
-              </DataTable>
+                        </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>
+                    </TableContainer>
+                  )}
+                </DataTable>
 
-              {totalItems > 0 && (
-                <Pagination
-                  page={currentPage}
-                  totalItems={totalItems}
-                  pageSize={pageSize}
-                  pageSizes={calculatedPageSizes}
-                  onChange={(event) => {
-                    onPageChange(event.page);
-                    if (event.pageSize !== pageSize) {
-                      onPageSizeChange(event.pageSize);
-                    }
-                  }}
-                  size={controlSize as 'sm' | 'md' | 'lg'}
-                />
-              )}
-              {totalItems > 0 && <div className={styles.paginationInfo}>{itemsDisplayed}</div>}
-              <div className={styles.tableStats}>
-                <span className={styles.recordCount}>
-                  {t('showingResults', 'Showing {{start}}-{{end}} of {{total}} {{itemType}}', {
-                    start: totalItems === 0 ? 0 : startIndex + 1,
-                    end: Math.min(endIndex, totalItems),
-                    total: totalItems,
-                    itemType: totalItems === 1 ? t('record', 'record') : t('records', 'records'),
-                  })}
-                </span>
+                {totalItems > 0 && (
+                  <Pagination
+                    page={currentPage}
+                    totalItems={totalItems}
+                    pageSize={pageSize}
+                    pageSizes={calculatedPageSizes}
+                    onChange={(event) => {
+                      onPageChange(event.page);
+                      if (event.pageSize !== pageSize) {
+                        onPageSizeChange(event.pageSize);
+                      }
+                    }}
+                    size={controlSize as 'sm' | 'md' | 'lg'}
+                  />
+                )}
+                {totalItems > 0 && <div className={styles.paginationInfo}>{itemsDisplayed}</div>}
+                <div className={styles.tableStats}>
+                  <span className={styles.recordCount}>
+                    {t('showingResults', 'Showing {{start}}-{{end}} of {{total}} {{itemType}}', {
+                      start: totalItems === 0 ? 0 : startIndex + 1,
+                      end: Math.min(endIndex, totalItems),
+                      total: totalItems,
+                      itemType: totalItems === 1 ? t('record', 'record') : t('records', 'records'),
+                    })}
+                  </span>
+                </div>
+              </>
+            ) : (
+              <div className={styles.emptyState}>
+                <p>{t('noOxytocinData', 'No oxytocin data available')}</p>
+                <Button kind="primary" size={controlSize} renderIcon={Add} onClick={onAddData}>
+                  {t('addFirstDataPoint', 'Add first data point')}
+                </Button>
               </div>
-            </>
-          ) : (
-            <div className={styles.emptyState}>
-              <p>{t('noOxytocinData', 'No oxytocin data available')}</p>
-              <Button kind="primary" size={controlSize} renderIcon={Add} onClick={onAddData}>
-                {t('addFirstDataPoint', 'Add first data point')}
-              </Button>
-            </div>
-          )}
-        </div>
-      )}
+            )}
+          </div>
+        )}
+      </div>
     </div>
   );
 };

package/src/maternal-and-child-health/partography/graphs/oxytocin-graph.component.tsx

@@ -16,16 +16,15 @@ const OxytocinGraph: React.FC<OxytocinGraphProps> = ({ data }) => {
   const { t } = useTranslation();
 
   const getTimeColumns = () => {
-    const emptyColumns = Array.from({ length: 13 }, (_, i) => `grid-${i + 1}`);
-    if (data.length === 0) {
-      return emptyColumns;
-    }
-    const dataTimeSlots = [...new Set(data.map((item) => item.timeSlot))].sort();
-    if (dataTimeSlots.length <= 13) {
-      const remainingEmpty = Array.from({ length: 13 - dataTimeSlots.length }, (_, i) => `empty-${i + 1}`);
-      return [...dataTimeSlots, ...remainingEmpty];
+    const emptyColumns = Array.from({ length: 20 }, (_, i) => `grid-${i + 1}`);
+
+    if (data && data.length > 0) {
+      const dataSlots = data.map((item, i) => `data-${i + 1}`);
+      const remainingEmpty = Array.from({ length: 20 - data.length }, (_, i) => `empty-${i + 1}`);
+      return [...dataSlots, ...remainingEmpty];
     }
-    return dataTimeSlots;
+
+    return emptyColumns;
   };
 
   const timeColumns = getTimeColumns();
@@ -79,19 +78,12 @@ const OxytocinGraph: React.FC<OxytocinGraphProps> = ({ data }) => {
   };
 
   return (
-    <div className={styles.membraneGrid}>
-      <div className={styles.gridContainer}>
-        <div className={styles.gridHeader}>
-          <div className={styles.gridCell}>{t('time', 'Time')}</div>
-          {timeColumns.map((timeColumn) => (
-            <div key={timeColumn} className={styles.gridCell}>
-              {timeColumn.startsWith('grid-') || timeColumn.startsWith('empty-') ? '' : timeColumn}
-            </div>
-          ))}
-        </div>
-
+    <div
+      className={styles.membraneGrid}
+      style={{ marginTop: 0, maxHeight: 'fit-content', minHeight: 'auto', marginBottom: 0 }}>
+      <div className={styles.gridContainer} style={{ padding: '0' }}>
         {rows.map((row) => (
-          <div key={row.id} className={styles.gridRow}>
+          <div key={row.id} className={styles.gridRow} style={{ minHeight: 40 }}>
             <div className={styles.gridRowLabel}>{row.label}</div>
             {timeColumns.map((timeColumn) => {
               const content = getCellContent(row.id, timeColumn);
@@ -102,7 +94,14 @@ const OxytocinGraph: React.FC<OxytocinGraphProps> = ({ data }) => {
                   className={`${styles.gridCell} ${cellClass}`}
                   data-time-slot={timeColumn}
                   data-row={row.id}
-                  title={`${timeColumn}: ${content || 'No data'}`}>
+                  title={`${timeColumn}: ${content || 'No data'}`}
+                  style={{
+                    minHeight: 40,
+                    padding: '8px 4px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}>
                   {content && (
                     <span
                       style={{

package/src/maternal-and-child-health/partography/graphs/pulse-bp-graph.component.tsx

@@ -44,9 +44,9 @@ const PULSE_BP_CHART_OPTIONS = {
     left: {
       title: 'Pulse',
       mapsTo: 'value',
-      domain: [60, 180],
+      domain: [0, 260],
       ticks: {
-        values: [60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180],
+        values: [0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 200, 220, 240, 260],
         formatter: (value: number) => `${value}`,
       },
       scaleType: ScaleTypes.LINEAR,
@@ -74,7 +74,7 @@ const PULSE_BP_CHART_OPTIONS = {
     },
     y: {
       enabled: true,
-      numberOfTicks: 7, // Fewer ticks for larger row spacing
+      numberOfTicks: 14,
     },
   },
   zoomBar: {
@@ -109,10 +109,9 @@ const PulseBPGraph: React.FC<PulseBPGraphProps> = ({ data }) => {
   const pulseChartData: ChartDataPoint[] = [];
 
   if (actualData.length > 0) {
-    pulseChartData.push({ index: 0, value: actualData[0].pulse, group: 'Pulse' });
     actualData.forEach((item, index) => {
       pulseChartData.push({
-        index: index + 1,
+        index: index,
         value: item.pulse,
         group: 'Pulse',
       });
@@ -156,23 +155,23 @@ const PulseBPGraph: React.FC<PulseBPGraphProps> = ({ data }) => {
                 zIndex: 5,
               }}>
               {actualData.map((item, index) => {
-                const chartMarginTop = 20;
-                const chartMarginBottom = 10;
-                const chartMarginLeft = 12;
-                const chartMarginRight = 5;
-
+                const chartMarginTop = 5;
+                const chartMarginBottom = 8;
+                const chartMarginLeft = 3.59;
+                const chartMarginRight = 8;
                 const chartWidth = 100 - chartMarginLeft - chartMarginRight;
                 const chartHeight = 100 - chartMarginTop - chartMarginBottom;
-
-                const dataPointIndex = index + 1;
-                const xPosition = chartMarginLeft + (dataPointIndex / 12) * chartWidth;
-
-                const gridUnit = chartWidth / 12;
-                const bpXPosition = chartMarginLeft + ((dataPointIndex - 1) / 12) * chartWidth;
-
-                const pulseYPosition = chartMarginTop + ((180 - item.pulse) / (180 - 60)) * chartHeight;
-                const systolicYPosition = chartMarginTop + ((180 - item.systolicBP) / (180 - 60)) * chartHeight;
-                const diastolicYPosition = chartMarginTop + ((180 - item.diastolicBP) / (180 - 60)) * chartHeight;
+                const dataPointIndex = index;
+                const bpXPosition = chartMarginLeft + ((dataPointIndex + 0) / 12) * chartWidth;
+                const yOffset = 23;
+                const yOffsetDiastolic = 40;
+                const pulseYPosition = chartMarginTop + yOffset + ((260 - item.pulse) / 260) * (chartHeight - yOffset);
+                const systolicYPosition =
+                  chartMarginTop + yOffset + ((260 - item.systolicBP) / 260) * (chartHeight - yOffset);
+                const diastolicYPosition =
+                  chartMarginTop +
+                  yOffsetDiastolic +
+                  ((260 - item.diastolicBP) / 260) * (chartHeight - yOffsetDiastolic);
 
                 const greenArrowStartY = Math.min(pulseYPosition, diastolicYPosition);
                 const greenArrowEndY = Math.max(pulseYPosition, diastolicYPosition);
@@ -198,7 +197,6 @@ const PulseBPGraph: React.FC<PulseBPGraphProps> = ({ data }) => {
                         refY="5"
                         orient="auto"
                         markerUnits="strokeWidth">
-                        {/* Downward arrow for green (diastolic) */}
                         <polygon points="0,10 10,5 0,0 3,5" fill={getColorForGraph('green')} />
                       </marker>
                     </defs>
@@ -213,12 +211,11 @@ const PulseBPGraph: React.FC<PulseBPGraphProps> = ({ data }) => {
                       markerEnd={`url(#systolic-arrow-${index})`}
                     />
 
-                    {/* Always draw green arrow down, regardless of value */}
                     <line
                       x1={`${bpXPosition}%`}
-                      y1={`${greenArrowStartY}%`}
+                      y1={`${pulseYPosition}%`}
                       x2={`${bpXPosition}%`}
-                      y2={`${greenArrowEndY}%`}
+                      y2={`${diastolicYPosition}%`}
                       stroke={getColorForGraph('green')}
                       strokeWidth="2"
                       markerEnd={`url(#diastolic-arrow-${index})`}

package/src/maternal-and-child-health/partography/graphs/temperature-graph.component.tsx

@@ -77,8 +77,9 @@ const TemperatureGraph: React.FC<TemperatureGraphProps> = ({
     { key: 'temperature', header: t('temperature', 'Temperature (°C)') },
   ];
 
-  const timeColumns = data.map((item, idx) =>
-    item.exactTime || item.timeSlot ? item.exactTime || item.timeSlot : '--',
+  const timeColumns = Array.from(
+    { length: Math.max(20, data.length) },
+    (_, colIndex) => data[colIndex]?.timeSlot || '',
   );
 
   const getTemperatureStatus = (temperature: number): string => {
@@ -94,18 +95,6 @@ const TemperatureGraph: React.FC<TemperatureGraphProps> = ({
     return '';
   };
 
-  const createGridData = () => {
-    const gridData: Record<string, { temperature: number }> = {};
-    data.forEach((item) => {
-      const key = item.timeSlot;
-      gridData[key] = {
-        temperature: item.temperature,
-      };
-    });
-    return gridData;
-  };
-  const gridData = createGridData();
-
   return (
     <div className={styles.fetalHeartRateSection}>
       <div className={styles.fetalHeartRateContainer}>
@@ -157,22 +146,30 @@ const TemperatureGraph: React.FC<TemperatureGraphProps> = ({
             <div className={styles.gridContainer}>
               <div className={styles.gridHeader}>
                 <div className={styles.gridCell}>{t('time', 'Time')}</div>
-                {timeColumns.map((timeColumn) => (
-                  <div key={timeColumn} className={styles.gridCell}>
-                    {timeColumn}
-                  </div>
-                ))}
+                {timeColumns.map((_, colIndex) => {
+                  const item = data[colIndex];
+                  return (
+                    <div key={`time-${colIndex}`} className={styles.gridCell}>
+                      {item?.exactTime || item?.timeSlot || ''}
+                    </div>
+                  );
+                })}
               </div>
 
               <div className={styles.gridRow}>
                 <div className={styles.gridRowLabel}>{t('temperature', 'Temp °C')}</div>
-                {data.map((item, idx) => (
-                  <div
-                    key={`temp-${idx}`}
-                    className={`${styles.gridCell} ${item.temperature ? getTemperatureStatus(item.temperature) : ''}`}>
-                    {item.temperature !== undefined && item.temperature !== null ? item.temperature : '--'}
-                  </div>
-                ))}
+                {timeColumns.map((_, colIndex) => {
+                  const item = data[colIndex];
+                  return (
+                    <div
+                      key={`temp-${colIndex}`}
+                      className={`${styles.gridCell} ${
+                        item?.temperature ? getTemperatureStatus(item.temperature) : ''
+                      }`}>
+                      {item?.temperature !== undefined && item?.temperature !== null ? item.temperature : ''}
+                    </div>
+                  );
+                })}
               </div>
             </div>
           </div>

package/src/maternal-and-child-health/partography/graphs/urine-test-graph.component.tsx

@@ -90,7 +90,7 @@ const UrineTestGraph: React.FC<UrineTestGraphProps> = ({
   ];
 
   const timeColumns = Array.from(
-    { length: Math.max(13, data.length) },
+    { length: Math.max(20, data.length) },
     (_, colIndex) => data[colIndex]?.timeSlot || '',
   );