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

package/src/maternal-and-child-health/partography/forms/pulse-bp-form.component.tsx

@@ -48,26 +48,26 @@ const PulseBPForm: React.FC<PulseBPFormProps> = ({ isOpen, onClose, onSubmit, on
 
     clearErrors();
 
-    if (!data.pulse || isNaN(pulseValue) || pulseValue < 30 || pulseValue > 200) {
+    if (!data.pulse || isNaN(pulseValue) || pulseValue < 0 || pulseValue > 230) {
       setError('pulse', {
         type: 'manual',
-        message: 'Please enter a valid pulse rate (30-200 bpm)',
+        message: 'Please enter a valid pulse rate (0-230 bpm)',
       });
       return;
     }
 
-    if (!data.systolicBP || isNaN(systolicValue) || systolicValue < 60 || systolicValue > 250) {
+    if (!data.systolicBP || isNaN(systolicValue) || systolicValue < 0 || systolicValue > 250) {
       setError('systolicBP', {
         type: 'manual',
-        message: 'Please enter a valid systolic BP (60-250 mmHg)',
+        message: 'Please enter a valid systolic BP (0-250 mmHg)',
       });
       return;
     }
 
-    if (!data.diastolicBP || isNaN(diastolicValue) || diastolicValue < 40 || diastolicValue > 150) {
+    if (!data.diastolicBP || isNaN(diastolicValue) || diastolicValue < 0 || diastolicValue > 150) {
       setError('diastolicBP', {
         type: 'manual',
-        message: 'Please enter a valid diastolic BP (40-150 mmHg)',
+        message: 'Please enter a valid diastolic BP (0-150 mmHg)',
       });
       return;
     }
@@ -112,17 +112,19 @@ const PulseBPForm: React.FC<PulseBPFormProps> = ({ isOpen, onClose, onSubmit, on
             <Controller
               name="pulse"
               control={control}
-              render={({ field }) => (
+              render={({ field, fieldState }) => (
                 <NumberInput
                   id="pulse"
                   label={t('pulse', 'Pulse Rate')}
-                  helperText="Normal: 60-100 bpm"
-                  min={30}
-                  max={200}
-                  value={field.value}
-                  onChange={(e, { value }) => field.onChange(value)}
-                  invalid={!!errors.pulse}
-                  invalidText={errors.pulse?.message}
+                  helperText="Normal: 0-230 bpm"
+                  min={0}
+                  max={230}
+                  step={1}
+                  value={field.value || ''}
+                  onChange={(e, { value }) => field.onChange(String(value))}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}
+                  allowEmpty
                 />
               )}
             />
@@ -131,17 +133,19 @@ const PulseBPForm: React.FC<PulseBPFormProps> = ({ isOpen, onClose, onSubmit, on
             <Controller
               name="systolicBP"
               control={control}
-              render={({ field }) => (
+              render={({ field, fieldState }) => (
                 <NumberInput
                   id="systolicBP"
                   label={t('systolicBP', 'BP Systolic')}
-                  helperText="Normal: 90-149 mmHg"
-                  min={60}
+                  helperText="Normal: 0-250 mmHg"
+                  min={0}
                   max={250}
-                  value={field.value}
-                  onChange={(e, { value }) => field.onChange(value)}
-                  invalid={!!errors.systolicBP}
-                  invalidText={errors.systolicBP?.message}
+                  step={1}
+                  value={field.value || ''}
+                  onChange={(e, { value }) => field.onChange(String(value))}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}
+                  allowEmpty
                 />
               )}
             />
@@ -150,17 +154,19 @@ const PulseBPForm: React.FC<PulseBPFormProps> = ({ isOpen, onClose, onSubmit, on
             <Controller
               name="diastolicBP"
               control={control}
-              render={({ field }) => (
+              render={({ field, fieldState }) => (
                 <NumberInput
                   id="diastolicBP"
                   label={t('diastolicBP', 'BP Diastolic')}
-                  helperText="Normal: 60-80 mmHg"
-                  min={40}
+                  helperText="Normal: 0-150 mmHg"
+                  min={0}
                   max={150}
-                  value={field.value}
-                  onChange={(e, { value }) => field.onChange(value)}
-                  invalid={!!errors.diastolicBP}
-                  invalidText={errors.diastolicBP?.message}
+                  step={1}
+                  value={field.value || ''}
+                  onChange={(e, { value }) => field.onChange(String(value))}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}
+                  allowEmpty
                 />
               )}
             />

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

@@ -64,10 +64,10 @@ const TemperatureForm: React.FC<TemperatureFormProps> = ({
       return;
     }
 
-    if (!data.temperature || isNaN(temperatureValue) || temperatureValue < 30 || temperatureValue > 45) {
+    if (!data.temperature || isNaN(temperatureValue) || temperatureValue < 25 || temperatureValue > 43) {
       setError('temperature', {
         type: 'manual',
-        message: t('temperatureValidation', 'Please enter a valid temperature (30-45°C)'),
+        message: t('temperatureValidation', 'Please enter a valid temperature (25-43°C)'),
       });
       return;
     }
@@ -165,18 +165,19 @@ const TemperatureForm: React.FC<TemperatureFormProps> = ({
             <Controller
               name="temperature"
               control={control}
-              render={({ field }) => (
+              render={({ field, fieldState }) => (
                 <NumberInput
                   id="temperature"
                   label={t('temperature', 'Temperature')}
                   helperText="Normal: 36.1-37.2°C"
-                  min={30}
-                  max={45}
+                  min={25}
+                  max={43}
                   step={0.1}
-                  value={field.value}
-                  onChange={(e, { value }) => field.onChange(value)}
-                  invalid={!!errors.temperature}
-                  invalidText={errors.temperature?.message}
+                  value={field.value || ''}
+                  onChange={(e, { value }) => field.onChange(String(value))}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}
+                  allowEmpty
                 />
               )}
             />

package/src/maternal-and-child-health/partography/forms/time-picker-dropdown.component.tsx

@@ -75,32 +75,32 @@ const TimePickerDropdown: React.FC<TimePickerDropdownProps> = ({
         reason: disableReason,
       };
     });
-  }, [existingTimeEntries, latestEntry]);
+  }, [latestEntry]);
 
   const minuteOptions = useMemo(() => {
     if (!latestEntry || !hours) {
-      return Array.from({ length: 12 }, (_, i) => {
-        const minute = (i * 5).toString().padStart(2, '0');
+      return Array.from({ length: 60 }, (_, i) => {
+        const minute = i.toString().padStart(2, '0');
         return { value: minute, text: minute, disabled: false };
       });
     }
     const [latestHour, latestMinute] = latestEntry.time.split(':').map(Number);
     const currentHour = parseInt(hours);
-    return Array.from({ length: 12 }, (_, i) => {
-      const minute = (i * 5).toString().padStart(2, '0');
+    return Array.from({ length: 60 }, (_, i) => {
+      const minute = i.toString().padStart(2, '0');
       let isDisabled = false;
       let disableReason = '';
       if (currentHour < latestHour) {
         isDisabled = true;
         disableReason = 'before latest entry';
-      } else if (currentHour === latestHour && i * 5 <= latestMinute) {
+      } else if (currentHour === latestHour && i <= latestMinute) {
         isDisabled = true;
         disableReason = `≤ ${latestMinute} min`;
       }
       const displayText = isDisabled ? `${minute} ${disableReason}` : minute;
       return { value: minute, text: displayText, disabled: isDisabled };
     });
-  }, [hours, existingTimeEntries, latestEntry]);
+  }, [hours, latestEntry]);
 
   const handleHourChange = (selectedHour: string) => {
     if (!selectedHour || selectedHour === '') {
@@ -145,7 +145,7 @@ const TimePickerDropdown: React.FC<TimePickerDropdownProps> = ({
 
   return (
     <div className={styles.timePickerContainer}>
-      <FormGroup legendText={labelText} invalid={invalid}>
+      <FormGroup legendText={labelText} invalid={invalid === true}>
         <div className={styles.timeInputsWrapper}>
           <div className={styles.timeInput}>
             <Select
@@ -153,7 +153,7 @@ const TimePickerDropdown: React.FC<TimePickerDropdownProps> = ({
               labelText="Hours (HH)"
               value={hours}
               onChange={(e) => handleHourChange((e.target as HTMLSelectElement).value)}
-              invalid={invalid}>
+              invalid={invalid === true}>
               <SelectItem value="" text="HH" />
               {hourOptions.map((option) => (
                 <SelectItem
@@ -175,7 +175,7 @@ const TimePickerDropdown: React.FC<TimePickerDropdownProps> = ({
               labelText="Minutes (MM)"
               value={minutes}
               onChange={(e) => handleMinuteChange((e.target as HTMLSelectElement).value)}
-              invalid={invalid}>
+              invalid={invalid === true}>
               <SelectItem value="" text="MM" />
               {minuteOptions.map((option) => (
                 <SelectItem

package/src/maternal-and-child-health/partography/forms/urine-test-form.component.tsx

@@ -213,17 +213,18 @@ const UrineTestForm: React.FC<UrineTestFormProps> = ({
             <Controller
               name="volume"
               control={control}
-              render={({ field }) => (
+              render={({ field, fieldState }) => (
                 <NumberInput
                   id="volume"
                   label={t('volume', 'Volume Produced ml')}
-                  helperText={t('volumeHelper', 'Enter the Dilation')}
+                  helperText={t('volumeHelper', 'Enter the Exact Volume Produced in ml')}
                   min={0}
                   step={1}
-                  value={field.value}
-                  onChange={(e, { value }) => field.onChange(value)}
-                  invalid={!!errors.volume}
-                  invalidText={errors.volume?.message}
+                  value={field.value || ''}
+                  onChange={(e, { value }) => field.onChange(String(value))}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}
+                  allowEmpty
                 />
               )}
             />

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

@@ -93,7 +93,7 @@ const CervicalContractionsGraph: React.FC<CervicalContractionsGraphProps> = ({
       <div className={styles.fetalHeartRateContainer}>
         <div className={styles.fetalHeartRateHeader}>
           <div className={styles.fetalHeartRateHeaderLeft}>
-            <h3 className={styles.fetalHeartRateTitle}>Cervical Contractions</h3>
+            <h3 className={styles.fetalHeartRateTitle}>Contractions</h3>
             <div className={styles.fetalHeartRateControls}>
               <span className={styles.legendText}>
                 Contractions per 10 min | Bar Heights: 0=None, 2=Mild, 3=Moderate, 5=Strong
@@ -126,7 +126,7 @@ const CervicalContractionsGraph: React.FC<CervicalContractionsGraphProps> = ({
                 kind="primary"
                 size={controlSize}
                 renderIcon={Add}
-                iconDescription="Add cervical contractions data"
+                iconDescription="Add contractions data"
                 disabled={isAddButtonDisabled}
                 onClick={() => onAddData?.()}
                 className={styles.addButton}>
@@ -141,68 +141,58 @@ const CervicalContractionsGraph: React.FC<CervicalContractionsGraphProps> = ({
             <div
               className={styles.contractionsContainer}
               style={{ minWidth: Math.max(1100, 70 * Math.max(13, data.length) + 60) }}>
-              <div className={styles.contractionsTimeHeaders} style={{ display: 'flex' }}>
-                <div className={styles.contractionsYAxisLabel} style={{ minWidth: 60, fontWeight: 600 }}>
-                  {t('time', 'Time')}
-                </div>
-                {Array.from({ length: Math.max(13, data.length) }, (_, colIndex) => (
-                  <div
-                    key={`header-${colIndex}`}
-                    className={styles.contractionsTimeHeader}
-                    style={{ minWidth: 70, textAlign: 'center', fontWeight: 600 }}>
-                    {data[colIndex]?.timeSlot || ''}
-                  </div>
-                ))}
-              </div>
-              {yAxisLabels.map((label, rowIndex) => (
-                <div key={label} className={styles.contractionsGridRow} style={{ display: 'flex' }}>
-                  <div className={styles.contractionsYAxisLabel} style={{ minWidth: 60 }}>
-                    {label}
-                  </div>
-                  {Array.from({ length: Math.max(13, data.length) }, (_, colIndex) => {
-                    const dataForTimeSlot = data?.[colIndex];
-                    const yPosition = parseInt(label);
-                    const contractionCount = dataForTimeSlot ? parseInt(dataForTimeSlot.contractionCount) : 0;
-                    const contractionLevel = dataForTimeSlot?.contractionLevel || 'none';
+              {yAxisLabels.map((label, rowIndex) => {
+                if (!label) {
+                  return null;
+                }
+                return (
+                  <div key={label} className={styles.contractionsGridRow} style={{ display: 'flex' }}>
+                    <div className={styles.contractionsYAxisLabel} style={{ minWidth: 60 }}>
+                      {label}
+                    </div>
+                    {Array.from({ length: Math.max(20, data.length) }, (_, colIndex) => {
+                      const dataForTimeSlot = data?.[colIndex];
+                      const yPosition = parseInt(label);
+                      const contractionCount = dataForTimeSlot ? parseInt(dataForTimeSlot.contractionCount) : 0;
+                      const contractionLevel = dataForTimeSlot?.contractionLevel || 'none';
 
-                    const shouldFill = contractionCount > 0 && yPosition <= contractionCount;
+                      const shouldFill = contractionCount > 0 && yPosition <= contractionCount;
 
-                    const getColorClass = (level: string) => {
-                      switch (level) {
-                        case 'mild':
-                          return 'contractionBarMild';
-                        case 'moderate':
-                          return 'contractionBarModerate';
-                        case 'strong':
-                          return 'contractionBarStrong';
-                        default:
-                          return 'contractionBarNone';
-                      }
-                    };
+                      const getColorClass = (level: string) => {
+                        switch (level) {
+                          case 'mild':
+                            return 'contractionBarMild';
+                          case 'moderate':
+                            return 'contractionBarModerate';
+                          case 'strong':
+                            return 'contractionBarStrong';
+                          default:
+                            return 'contractionBarNone';
+                        }
+                      };
 
-                    return (
-                      <div
-                        key={`${label}-${colIndex}`}
-                        className={`${styles.contractionsGridCell} ${
-                          shouldFill ? styles[getColorClass(contractionLevel)] : ''
-                        }`}
-                        data-y={label}
-                        data-x={colIndex}
-                        data-filled={shouldFill}
-                        data-count={contractionCount}
-                        data-level={contractionLevel}
-                        style={{ minWidth: 70 }}>
-                        {shouldFill && (
-                          <div className={`${styles.contractionBar} ${styles[getColorClass(contractionLevel)]}`} />
-                        )}
-                      </div>
-                    );
-                  })}
-                </div>
-              ))}
-              <div className={styles.contractionsYAxisTitle}>
-                <span>{t('contractionsPerTenMin', 'Contractions per 10 min')}</span>
-              </div>
+                      return (
+                        <div
+                          key={`${label}-${colIndex}`}
+                          className={`${styles.contractionsGridCell} ${
+                            shouldFill ? styles[getColorClass(contractionLevel)] : ''
+                          }`}
+                          data-y={label}
+                          data-x={colIndex}
+                          data-filled={shouldFill}
+                          data-count={contractionCount}
+                          data-level={contractionLevel}
+                          style={{ minWidth: 70 }}>
+                          {shouldFill && (
+                            <div className={`${styles.contractionBar} ${styles[getColorClass(contractionLevel)]}`} />
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+                );
+              })}
+              {/* Y-axis title removed to prevent overlap with numbers */}
             </div>
           </div>
         ) : (

package/src/maternal-and-child-health/partography/graphs/drugs-iv-fluids-graph-wrapper.component.tsx

@@ -120,7 +120,6 @@ const DrugsIVFluidsGraphWrapper: React.FC<DrugsIVFluidsGraphWrapperProps> = ({
                       <th>{t('dosage', 'Dosage')}</th>
                       <th>{t('route', 'Route')}</th>
                       <th>{t('frequency', 'Frequency')}</th>
-                      <th>{t('source', 'Source')}</th>
                     </tr>
                   </thead>
                   <tbody>
@@ -131,11 +130,6 @@ const DrugsIVFluidsGraphWrapper: React.FC<DrugsIVFluidsGraphWrapperProps> = ({
                         <td>{item.dosage}</td>
                         <td>{item.route || '-'}</td>
                         <td>{item.frequency || '-'}</td>
-                        <td>
-                          <span className={item.source === 'order' ? styles.orderSource : styles.manualSource}>
-                            {item.source === 'order' ? t('drugOrder', 'Drug Order') : t('manual', 'Manual')}
-                          </span>
-                        </td>
                       </tr>
                     ))}
                   </tbody>

package/src/maternal-and-child-health/partography/graphs/drugs-iv-fluids-graph.component.tsx

@@ -14,14 +14,14 @@ interface DrugsIVFluidsGraphProps {
 const DrugsIVFluidsGraph: React.FC<DrugsIVFluidsGraphProps> = ({ data }) => {
   const { t } = useTranslation();
   const getColumns = () => {
-    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;
     }
-    if (data.length <= 13) {
+    if (data.length <= 20) {
       const dataColumns = data.map((_, index) => `data-${index}`);
-      const remainingEmpty = Array.from({ length: 13 - data.length }, (_, i) => `empty-${i + 1}`);
+      const remainingEmpty = Array.from({ length: 20 - data.length }, (_, i) => `empty-${i + 1}`);
       return [...dataColumns, ...remainingEmpty];
     }
     return data.map((_, index) => `data-${index}`);

package/src/maternal-and-child-health/partography/graphs/fetal-heart-rate-graph.component.tsx

@@ -16,7 +16,7 @@ import {
 import { Add, ChartColumn, Table as TableIcon } from '@carbon/react/icons';
 import { LineChart } from '@carbon/charts-react';
 import styles from '../partography.scss';
-import { getColorForGraph, generateRange, defaultFetalHeartRateChartData } from '../types';
+import { getColorForGraph, generateRange } from '../types';
 import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
 
 enum ScaleTypes {
@@ -78,12 +78,12 @@ const FetalHeartRateGraph: React.FC<FetalHeartRateGraphProps> = ({
   );
   const getFetalHeartRateStatus = (value: string): { type: string; text: string; color: string } => {
     const numValue = parseInt(value.replace(' bpm', ''));
-    if (numValue < 110) {
-      return { type: 'red', text: 'Low', color: getColorForGraph('red') };
-    } else if (numValue >= 110 && numValue <= 160) {
-      return { type: 'green', text: 'Normal', color: getColorForGraph('green') };
+    if (numValue < 100) {
+      return { type: 'orange', text: t('low', 'Low'), color: getColorForGraph('orange') };
+    } else if (numValue >= 100 && numValue <= 180) {
+      return { type: 'green', text: t('normal', 'Normal'), color: getColorForGraph('green') };
     } else {
-      return { type: 'red', text: 'High', color: getColorForGraph('red') };
+      return { type: 'red', text: t('abnormal', 'Abnormal'), color: getColorForGraph('red') };
     }
   };
   const tableHeaders = [
@@ -94,9 +94,9 @@ const FetalHeartRateGraph: React.FC<FetalHeartRateGraphProps> = ({
     { key: 'status', header: t('status', 'Status') },
   ];
   const getFetalHeartRateColor = (value: number): string => {
-    if (value < 110) {
-      return getColorForGraph('red');
-    } else if (value >= 110 && value <= 160) {
+    if (value < 100) {
+      return getColorForGraph('orange');
+    } else if (value >= 100 && value <= 180) {
       return getColorForGraph('green');
     } else {
       return getColorForGraph('red');
@@ -107,13 +107,13 @@ const FetalHeartRateGraph: React.FC<FetalHeartRateGraphProps> = ({
     if (data && data.length > 0) {
       return data.map((point) => ({
         ...point,
-        group: 'Fetal Heart Rate',
+        group: t('fetalHeartRate', 'Fetal Heart Rate'),
         color: getFetalHeartRateColor(point.value),
       }));
     }
 
-    return defaultFetalHeartRateChartData;
-  }, [data]);
+    return [];
+  }, [data, t]);
 
   const chartData = enhancedChartData;
   const chartKey = React.useMemo(() => JSON.stringify(enhancedChartData), [enhancedChartData]);
@@ -146,7 +146,7 @@ const FetalHeartRateGraph: React.FC<FetalHeartRateGraphProps> = ({
         },
       },
       left: {
-        title: 'Fetal Heart Rate (bpm)',
+        title: t('fetalHeartRateBpm', 'Fetal Heart Rate (bpm)'),
         mapsTo: 'value',
         scaleType: ScaleTypes.LINEAR,
         domain: [80, 200],
@@ -198,7 +198,7 @@ const FetalHeartRateGraph: React.FC<FetalHeartRateGraphProps> = ({
         data && data.length > 0
           ? (datapoint: any) => getFetalHeartRateColor(datapoint.value)
           : {
-              'Fetal Heart Rate': 'transparent',
+              [t('fetalHeartRate', 'Fetal Heart Rate')]: 'transparent', // Hide empty data lines
             },
     },
     legend: {
@@ -215,16 +215,16 @@ const FetalHeartRateGraph: React.FC<FetalHeartRateGraphProps> = ({
       <div className={styles.fetalHeartRateContainer}>
         <div className={styles.fetalHeartRateHeader}>
           <div className={styles.fetalHeartRateHeaderLeft}>
-            <h3 className={styles.fetalHeartRateTitle}>Fetal Heart Rate</h3>
+            <h3 className={styles.fetalHeartRateTitle}>{t('fetalHeartRate', 'Fetal Heart Rate')}</h3>
             <div className={styles.fetalHeartRateControls}>
-              <Tag type="green" title="Normal Range">
-                Normal (110-160)
+              <Tag type="green" title={t('normalRange', 'Normal Range')}>
+                {t('normalRange100180', 'Normal (100-180)')}
               </Tag>
-              <Tag type="red" title="Abnormal Range">
-                Abnormal (&gt;160)
+              <Tag type="red" title={t('abnormalRange', 'Abnormal Range')}>
+                {t('abnormalRangeGreater180', 'Abnormal (>180)')}
               </Tag>
-              <Tag type="red" title="Low Range">
-                Low (&lt;110)
+              <Tag type="gray" title={t('lowRange', 'Low Range')} className={styles.tagLowRange}>
+                {t('lowRangeLess100', 'Low (<100)')}
               </Tag>
             </div>
           </div>
@@ -254,11 +254,11 @@ const FetalHeartRateGraph: React.FC<FetalHeartRateGraphProps> = ({
                 kind="primary"
                 size={controlSize}
                 renderIcon={Add}
-                iconDescription="Add fetal heart rate data"
+                iconDescription={t('addFetalHeartRateData', 'Add fetal heart rate data')}
                 disabled={isAddButtonDisabled}
                 onClick={onAddData}
                 className={styles.addButton}>
-                Add
+                {t('add', 'Add')}
               </Button>
             </div>
           </div>
@@ -266,7 +266,20 @@ const FetalHeartRateGraph: React.FC<FetalHeartRateGraphProps> = ({
 
         {viewMode === 'graph' ? (
           <div className={styles.fetalHeartRateChart}>
-            <LineChart data={chartData} options={chartOptions} key={chartKey} />
+            {chartData.length > 0 ? (
+              <LineChart data={chartData} options={chartOptions} key={chartKey} />
+            ) : (
+              <LineChart
+                data={[{ hour: 0, value: 140, group: 'No Data', time: '0:00' }]}
+                options={{
+                  ...chartOptions,
+                  legend: { enabled: false },
+                  points: { enabled: false },
+                  color: { scale: { 'No Data': 'transparent' } },
+                }}
+                key="empty-chart"
+              />
+            )}
           </div>
         ) : (
           <div className={styles.tableContainer}>
@@ -296,7 +309,11 @@ const FetalHeartRateGraph: React.FC<FetalHeartRateGraphProps> = ({
                                           row.cells.find((c) => c.info.header === 'value')?.value || '0 bpm',
                                         );
                                         return (
-                                          <Tag type={status.type as any} title={`Fetal Heart Rate: ${status.text}`}>
+                                          <Tag
+                                            type={status.type as any}
+                                            title={t('fetalHeartRateStatus', 'Fetal Heart Rate: {{status}}', {
+                                              status: status.text,
+                                            })}>
                                             {status.text}
                                           </Tag>
                                         );
@@ -304,23 +321,29 @@ const FetalHeartRateGraph: React.FC<FetalHeartRateGraphProps> = ({
                                     : cell.info.header === 'value'
                                     ? (() => {
                                         const numValue = parseInt(cell.value.replace(' bpm', ''));
-                                        if (numValue < 110) {
+                                        if (numValue < 100) {
                                           return (
-                                            <span className={`${styles.fetalHeartRateValue} ${styles.low}`}>
+                                            <span
+                                              className={`${styles.fetalHeartRateValue} ${styles.low}`}
+                                              style={{ color: getColorForGraph('orange') }}>
                                               <span className={styles.arrow}>↓</span>
                                               {cell.value}
                                             </span>
                                           );
-                                        } else if (numValue > 160) {
+                                        } else if (numValue > 180) {
                                           return (
-                                            <span className={`${styles.fetalHeartRateValue} ${styles.high}`}>
+                                            <span
+                                              className={`${styles.fetalHeartRateValue} ${styles.high}`}
+                                              style={{ color: getColorForGraph('red') }}>
                                               <span className={styles.arrow}>↑</span>
                                               {cell.value}
                                             </span>
                                           );
                                         } else {
                                           return (
-                                            <span className={`${styles.fetalHeartRateValue} ${styles.normal}`}>
+                                            <span
+                                              className={`${styles.fetalHeartRateValue} ${styles.normal}`}
+                                              style={{ color: getColorForGraph('green') }}>
                                               {cell.value}
                                             </span>
                                           );