@ampath/esm-dha-workflow-app 4.0.0-next.33 → 4.0.0-next.331

package/src/billing/dashboard/v3/patient-bill-details/attachments/dialysis/dialysis-chart.tsx

@@ -0,0 +1,314 @@
+import React, { forwardRef, useEffect, useState } from 'react';
+import styles from './dialysis-chart.scss';
+import { type VisitSummaryResponse, type VitalReading } from '../type';
+import { showSnackbar, useSession } from '@openmrs/esm-framework';
+import { fetchCaseSummary } from '../../../../../billing-claims.resource';
+import { normalizeVitals } from '../case-summary/case-summary-helper';
+
+const DEMO_SESSION = {
+  facility: {
+    name: 'Sample Renal Unit',
+    hospital: 'Sample District Hospital',
+    address: 'Sample Town, P.O. Box 000-00000, Sample Town',
+    phone: '0700000000',
+    email: 'info@samplehospital.example',
+  },
+  patient: {
+    name: 'John A. Sample',
+    opNo: '000000',
+    insuranceNo: 'CR0000000000000-0',
+    date: '01-Jan-2026',
+    age: '60 years 0 months 0 weeks',
+    sex: 'Male',
+    contact: '0700000000',
+    clinic: 'Renal Unit',
+    diagnosis: 'Sample diagnosis code — Chronic kidney disease, stage 5',
+    address: 'Sample Ward',
+  },
+  preAssessment: {
+    weightBefore: '0.00 kg',
+    temperature: '36.5 °C',
+    pulse: '0.00 bpm',
+    bp: '0/0 mmHg',
+    respRate: '0.00',
+    oxygenSat: '0.00 %',
+    bloodSugar: '0.0',
+    accessType: 'Catheter',
+    accessSite: 'cvc',
+    doctor: 'Dr. Sample Nephrologist',
+  },
+  prescription: {
+    dialyzerType: 'synthetic',
+    bfr: '-',
+    dfr: '0.00 ml/min',
+    duration: '-',
+    ufGoal: '0.00 L',
+    heparinDose: '-',
+    dialysateComposition: 'sodium bicarbonate',
+  },
+  monitoring: [
+    { time: '0 min', bp: '0/0', pulse: '0', temp: '36.5', ufRemoved: '0', heparin: '0', remarks: 'pt is stable' },
+    { time: '60 min', bp: '0/0', pulse: '0', temp: '36.5', ufRemoved: '0mls', heparin: '0iu', remarks: 'pt is stable' },
+    {
+      time: '120 min',
+      bp: '0/0',
+      pulse: '0',
+      temp: '36.5',
+      ufRemoved: '0mls',
+      heparin: '0iu',
+      remarks: 'pt is stable',
+    },
+    {
+      time: '180 min',
+      bp: '0/0',
+      pulse: '0',
+      temp: '36.5',
+      ufRemoved: '0mls',
+      heparin: '0iu',
+      remarks: 'pt is stable',
+    },
+    {
+      time: '240 min',
+      bp: '0/0',
+      pulse: '0',
+      temp: '36.5',
+      ufRemoved: '0mls',
+      heparin: '0iu',
+      remarks: 'pt is stable',
+    },
+  ],
+  postAssessment: {
+    weightAfter: '0.00 kg',
+    totalUfAchieved: '-',
+    bp: '0/0',
+    pulse: '0.00 bpm',
+    temperature: '36.5 °C',
+    accessSite: 'Cleaned and dressed',
+    condition: 'Stable',
+    complications: 'None',
+  },
+  summary: {
+    prescribedDuration: '-',
+    actualDuration: '-',
+    adequacyAchieved: 'Yes',
+    toleratedProcedure: 'Yes',
+    comments: 'Sample discharge comment.',
+    nextSessionDate: '-',
+    additionalRemarks: '',
+  },
+  signoff: {
+    nurse: { name: 'Sample Nurse', regNo: '000000', date: '01-Jan-2026' },
+    doctor: { name: 'Dr. Sample Nephrologist', regNo: 'A0000', date: '01-Jan-2026' },
+  },
+};
+
+function Field({ label, value }) {
+  return (
+    <div className={styles.field}>
+      <div className={styles.fieldLabel}>{label}</div>
+      <div className={styles.fieldValue}>{value}</div>
+    </div>
+  );
+}
+
+function SectionBlock({ number, title, children }) {
+  return (
+    <section className={styles['dc-section']}>
+      <h2 className={styles['dc-section-title']}>
+        <span className={styles['dc-section-num']}>{number}</span> {title}
+      </h2>
+      <div className={styles['dc-section-body']}>{children}</div>
+    </section>
+  );
+}
+
+interface DialysisChartProps {
+  session?: typeof DEMO_SESSION;
+  patientUuid: string;
+}
+
+const DialysisChart = forwardRef<HTMLDivElement, DialysisChartProps>(({ session = DEMO_SESSION, patientUuid }, ref) => {
+  const s = session;
+
+  const [dialysisSummary, setDialysisSummary] = useState<VisitSummaryResponse>();
+  const [vitals, setVitals] = useState<VitalReading[]>();
+  // const p = patient;
+  const sessionL = useSession();
+  const locationUuid = sessionL?.sessionLocation?.uuid;
+  const locationName = sessionL?.sessionLocation?.display;
+  const user = sessionL?.user?.display;
+  const formatDate = (date?: string | Date | null): string => {
+    if (!date) return '—';
+
+    return new Intl.DateTimeFormat('en-KE', {
+      year: 'numeric',
+      month: 'short',
+      day: '2-digit',
+    }).format(new Date(date));
+  };
+
+  const getDialysisSummary = async (locationUuid: string) => {
+    try {
+      const res: VisitSummaryResponse = await fetchCaseSummary(locationUuid!, patientUuid);
+      setDialysisSummary(res);
+      const normalizedVitals = normalizeVitals(res.vitals);
+      setVitals(normalizedVitals);
+    } catch (err) {
+      console.log(err);
+      showSnackbar({
+        kind: 'error',
+        title: 'An error occured while fetching Case summary',
+        subtitle: 'An error occured while fetching Case summary. Please try again!',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!locationUuid) return;
+    getDialysisSummary(locationUuid);
+  }, [locationUuid, session]);
+
+  return (
+    <div className={styles['dc-root']} ref={ref}>
+      <div className={styles['dc-shell']}>
+        <header className={styles['dc-header']}>
+          <div className={styles['dc-header-bar']} />
+          <div className={styles['dc-header-info']}>
+            <h1 className={styles['dc-title']}>Renal Unit Haemodialysis Notes</h1>
+            <p className={styles['dc-hospital']}>{locationName}</p>
+            <p className={styles['dc-hospital-meta']}>
+              {/* {s.facility.address} · Tel: {s.facility.phone} · {s.facility.email} */}
+            </p>
+          </div>
+        </header>
+
+        <div className={styles['dc-identity']}>
+          <Field label="Patient Name" value={dialysisSummary?.demographics.name} />
+          <Field label="OP No" value={''} />
+          <Field label="Insurance No" value={dialysisSummary?.demographics.crNumber} />
+          <Field label="Date" value={dialysisSummary?.demographics.birthDate} />
+          <Field label="Age" value={dialysisSummary?.demographics.age} />
+          <Field label="Sex" value={dialysisSummary?.demographics.gender} />
+          <Field label="Contact" value={dialysisSummary?.demographics.contact} />
+          <Field label="Clinic" value={dialysisSummary?.demographics.clinic} />
+          <Field label="Diagnosis" value={dialysisSummary?.demographics.diagnosis} />
+          <Field label="Address" value={dialysisSummary?.demographics.address} />
+        </div>
+
+        <SectionBlock number="1" title="Pre-Dialysis Assessment">
+          <div className={styles['dc-field-grid']}>
+            <Field label="Weight Before" value={s.preAssessment.weightBefore} />
+            <Field label="Temperature" value={dialysisSummary?.vitals?.temperature} />
+            <Field label="Pulse" value={dialysisSummary?.vitals?.pulse} />
+            <Field label="BP" value={dialysisSummary?.vitals?.bloodPressure} />
+            <Field label="Resp. Rate" value={dialysisSummary?.vitals?.respiratoryRate} />
+            <Field label="Oxygen Sat." value={dialysisSummary?.vitals?.spo2} />
+            <Field label="Blood Sugar" value={s.preAssessment.bloodSugar} />
+            <Field label="Access Type" value={s.preAssessment.accessType} />
+            <Field label="Access Site" value={s.preAssessment.accessSite} />
+            <Field label="Doctor/Nephrologist" value={s.preAssessment.doctor} />
+          </div>
+        </SectionBlock>
+
+        <SectionBlock number="2" title="Physician Prescription">
+          <div className={styles['dc-field-grid']}>
+            <Field label="Dialyzer Type" value={s.prescription.dialyzerType} />
+            <Field label="BFR" value={s.prescription.bfr} />
+            <Field label="DFR" value={s.prescription.dfr} />
+            <Field label="Duration" value={s.prescription.duration} />
+            <Field label="UF Goal" value={s.prescription.ufGoal} />
+            <Field label="Heparin Dose" value={s.prescription.heparinDose} />
+            <Field label="Dialysate Composition" value={s.prescription.dialysateComposition} />
+          </div>
+        </SectionBlock>
+
+        <SectionBlock number="3" title="Intra-Dialytic Monitoring — Record Observations Every 60 Minutes">
+          <table className={styles['dc-table']}>
+            <thead>
+              <tr>
+                <th>Time</th>
+                <th>BP</th>
+                <th>Pulse</th>
+                <th>Temp</th>
+                <th>UF Removed</th>
+                <th>Heparin</th>
+                <th>Remarks</th>
+              </tr>
+            </thead>
+            <tbody>
+              {s.monitoring.map((row, i) => (
+                <tr key={i}>
+                  <td>{row.time}</td>
+                  <td>{row.bp}</td>
+                  <td>{row.pulse}</td>
+                  <td>{row.temp}</td>
+                  <td>{row.ufRemoved}</td>
+                  <td>{row.heparin}</td>
+                  <td>{row.remarks}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </SectionBlock>
+
+        <SectionBlock number="4" title="Post-Dialysis Assessment">
+          <div className={styles['dc-field-grid']}>
+            <Field label="Weight After" value={s.postAssessment.weightAfter} />
+            <Field label="Total UF Achieved" value={s.postAssessment.totalUfAchieved} />
+            <Field label="BP" value={s.postAssessment.bp} />
+            <Field label="Pulse" value={s.postAssessment.pulse} />
+            <Field label="Temperature" value={s.postAssessment.temperature} />
+            <Field label="Access Site" value={s.postAssessment.accessSite} />
+            <Field label="Condition" value={s.postAssessment.condition} />
+            <Field label="Complications" value={s.postAssessment.complications} />
+          </div>
+        </SectionBlock>
+
+        <SectionBlock number="5" title="Dialysis Summary">
+          <div className={styles['dc-field-grid']}>
+            <Field label="Prescribed Duration" value={s.summary.prescribedDuration} />
+            <Field label="Actual Duration" value={s.summary.actualDuration} />
+            <Field label="Adequacy Achieved" value={s.summary.adequacyAchieved} />
+            <Field label="Tolerated Procedure" value={s.summary.toleratedProcedure} />
+          </div>
+          <div className={styles['dc-notes']}>
+            <div className={styles['dc-field-label']}>Comments</div>
+            <p className={styles['dc-note-text']}>{s.summary.comments}</p>
+            <p className={styles['dc-note-text']}>Next dialysis date: {s.summary.nextSessionDate}</p>
+          </div>
+          <div className={styles['dc-notes']}>
+            <div className={styles['dc-field-label']}>Additional Remarks / Emergency Instructions</div>
+            <p className={styles['dc-note-text']}>
+              {s.summary.additionalRemarks || <span className={styles['dc-empty']}>None recorded</span>}
+            </p>
+          </div>
+        </SectionBlock>
+
+        <section className={styles['dc-signoff']}>
+          <div className={styles['dc-signoff-block']}>
+            <div className={styles['dc-signoff-title']}>Dialysis Nurse</div>
+            <Field label="Name" value={s.signoff.nurse.name} />
+            <Field label="Reg. No" value={s.signoff.nurse.regNo} />
+            <Field label="Date" value={s.signoff.nurse.date} />
+            <div className={styles['dc-signature-line']} />
+          </div>
+          <div className={styles['dc-signoff-block']}>
+            <div className={styles['dc-signoff-title']}>Doctor / Nephrologist</div>
+            <Field label="Name" value={s.signoff.doctor.name} />
+            <Field label="Reg. No" value={s.signoff.doctor.regNo} />
+            <Field label="Date" value={s.signoff.doctor.date} />
+            <div className={styles['dc-signature-line']} />
+          </div>
+          <div className={`${styles['dc-signoff-block']} ${styles['dc-signoff-stamp']}`}>
+            <div className={styles['dc-signoff-title']}>Hospital Stamp</div>
+            <div className={styles['dc-stamp-placeholder']}>stamp area</div>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+});
+
+DialysisChart.displayName = 'DialysisChart';
+
+export default DialysisChart;

package/src/billing/dashboard/v3/patient-bill-details/attachments/discharge-summary/discharge-summary.scss

@@ -0,0 +1,96 @@
+.fieldContainer {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 10px;
+    border-bottom: 1px dotted #999;
+    padding-bottom: 4px;
+
+.fieldLabel {
+    width: 180px;
+    font-weight: 600;
+    flex-shrink: 0;
+}
+
+.fieldValue {
+    flex: 1;
+    font-weight: 600;
+    color: grey;
+    word-break: break-word;
+}
+}
+
+.clinicianContainer {
+    width: 220px;
+    display: flex;
+    flex-direction: column;
+
+.clinicianLabel {
+    font-weight: 600;
+    margin-bottom: 4px;
+}
+}
+.footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 35px;
+  padding-top: 15px;
+  border-top: 1px solid #999;
+}
+
+.remarksValue {
+    border: 1px solid #000;
+    min-height: 80px;
+    padding: 10px;
+    line-height: 1.5
+}
+
+.remarksLabel {
+    font-weight: 600;
+    margin-bottom: 6px;
+}
+
+.container {
+    width: 190mm;
+    min-height: auto;
+    background: #fff;
+    padding: 10mm;
+    box-sizing: border-box;
+}
+
+.headerContainer {
+    border: 2px solid #000;
+    padding: 12px;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+.county {
+    font-size: 18px;
+    font-weight: 700;
+    margin-bottom: 4px;
+    text-transform: uppercase;
+}
+
+.department {
+    font-size: 14px;
+    margin-bottom: 8px;
+    font-weight: 600;
+}
+
+.hospitalName {
+    font-size: 20px;
+    font-weight: 700;
+    margin-bottom: 12px;
+    text-transform: uppercase;
+}
+
+.encounterType {
+    border-top: 1px solid #000;
+    padding-top: 10px;
+    font-size: 18px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    background: #f5f5f5;
+    padding: 8px;
+}

package/src/billing/dashboard/v3/patient-bill-details/attachments/discharge-summary/discharge-summary.tsx

@@ -0,0 +1,126 @@
+import React, { forwardRef, useEffect, useState } from 'react';
+import { type VisitIntervention } from '../../../types';
+import { type DischargeSummary } from '../type';
+import { getDischargeSummary } from '../../../../../maternity-discharge.resource';
+
+import styles from './discharge-summary.scss';
+import { useSession } from '@openmrs/esm-framework';
+
+interface DischargeSummaryComponentProps {
+  bill: any;
+  claimIntervention: VisitIntervention;
+}
+
+const DischargeSummaryComponent = forwardRef<HTMLDivElement, DischargeSummaryComponentProps>(
+  ({ bill, claimIntervention }, ref) => {
+    const [summary, setSummary] = useState<DischargeSummary | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    const session = useSession();
+    const locationName = session?.sessionLocation?.display;
+
+    useEffect(() => {
+      const loadSummary = async () => {
+        try {
+          const response = await getDischargeSummary(bill.cr_no, bill.amrs_universal_id);
+
+          setSummary(response);
+        } finally {
+          setLoading(false);
+        }
+      };
+
+      loadSummary();
+    }, [bill.amrs_universal_id, bill.cr_no, claimIntervention]);
+
+    if (loading) {
+      return <div ref={ref}>Loading...</div>;
+    }
+
+    if (!summary) {
+      return <div ref={ref}>Unable to load discharge summary.</div>;
+    }
+
+    return (
+      <>
+        <div ref={ref} className={styles.container}>
+          <div className={styles.headerContainer}>
+            <div className={styles.county}>County Government of Uasin Gishu</div>
+
+            <div className={styles.department}>Department of Health Services</div>
+
+            <div className={styles.hospitalName}>{locationName}</div>
+
+            <div className={styles.encounterType}>POST NATAL DISCHARGE SUMMARY</div>
+          </div>
+          <Field label="NAME" value={summary.patientName} />
+          <Field label="AGE" value={summary.age} />
+          <Field label="IP NO" value={summary.ipNumber} />
+          <Field label="PARITY" value={summary.parity} />
+          <Field
+            label="DATE OF ADMISSION"
+            value={summary.admissionDate ? new Date(summary.admissionDate).toLocaleDateString() : ''}
+          />
+          <Field
+            label="DATE OF DELIVERY"
+            value={summary.deliveryDate ? new Date(summary.deliveryDate).toLocaleDateString() : ''}
+          />
+          <Field label="MODE OF DELIVERY" value={summary.modeOfDelivery} />
+          <Field label="SEX OF BABY" value={summary.babySex} />
+          <Field label="BIRTH WEIGHT" value={summary.birthWeight} />
+          <Field label="FATE" value={summary.fate} />
+          <Field label="ADVICE ON PERSONAL HYGIENE" value={summary.hygieneAdvice} />
+          <Field label="NUTRITION" value={summary.nutrition} />
+          <Field label="BREAST FEEDING" value={summary.breastFeeding} />
+          <Field label="IMMUNIZATION" value={summary.immunization} />
+          <Field label="FAMILY PLANNING" value={summary.familyPlanning} />
+
+          <div
+            style={{
+              marginTop: '20px',
+            }}
+          >
+            <div
+              style={{
+                marginTop: '25px',
+              }}
+            >
+              <div className={styles.remarksLabel}>REMARKS</div>
+
+              <div className={styles.remarksValue}>{summary.remarks || '-'}</div>
+            </div>
+          </div>
+
+          <div className={styles.footer}>
+            <div>
+              <div style={{ fontWeight: 600 }}>Discharge Date</div>
+              <div>{summary.dischargeDate ? new Date(summary.dischargeDate).toLocaleDateString() : '-'}</div>
+            </div>
+
+            <div className={styles.clinicianContainer}>
+              <div className={styles.clinicianLabel}>Nurse / Clinician</div>
+
+              <div>{summary.clinician || '-'}</div>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  },
+);
+
+interface FieldProps {
+  label: string;
+  value?: string | number;
+}
+
+const Field: React.FC<FieldProps> = ({ label, value }) => (
+  <div className={styles.fieldContainer}>
+    <div className={styles.fieldLabel}>{label}</div>
+
+    <div className={styles.fieldValue}>{value || '-'}</div>
+  </div>
+);
+DischargeSummaryComponent.displayName = 'DischargeSummaryComponent';
+
+export default DischargeSummaryComponent;

package/src/billing/dashboard/v3/patient-bill-details/attachments/final-bill.component.tsx

@@ -0,0 +1,75 @@
+import React, { forwardRef } from 'react';
+import { type VisitIntervention } from '../../types';
+import styles from './attachments.scss';
+
+interface FinalBillComponentProps {
+  bill?: any;
+}
+
+const FinalBillComponent = forwardRef<HTMLDivElement, FinalBillComponentProps>(({ bill }, ref) => {
+  return (
+    <div
+      ref={ref}
+      style={{
+        all: 'initial',
+        display: 'block',
+        fontFamily: 'Arial',
+        fontSize: '10px',
+        width: '190mm',
+        padding: '10mm',
+        background: '#fff',
+        boxSizing: 'border-box',
+      }}
+    >
+      <h1>KESSES SUB-COUNTY HOSPITAL</h1>
+      <hr />
+      <h2>FINAL BILL</h2>
+      <p>
+        <strong>Patient:</strong> {bill.patient_name}
+      </p>
+      <p>
+        <strong>Claim Number:</strong> CLM-001245
+      </p>
+      <p>
+        <strong>Date:</strong> {bill.bill_date}
+      </p>
+      <div className={styles.invoice}>
+        <table
+          style={{
+            width: '100%',
+            borderCollapse: 'collapse',
+            marginTop: '20px',
+          }}
+        >
+          <thead>
+            <tr>
+              <th>Bill Item</th>
+              <th>Intervention Code</th>
+              <th>Order No</th>
+              <th>Service Type</th>
+              <th>Payer</th>
+              <th>Payment Status</th>
+              <th>Quantity</th>
+              <th>Total</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr>
+              <td>{bill.billable_service}</td>
+              <td>{bill.intervention_code}</td>
+              <td>{bill.order_no}</td>
+              <td>{bill.service_type}</td>
+              <td>{bill.payment_scheme}</td>
+              <td>{bill.payment_status}</td>
+              <td>{bill.item_quantity}</td>
+              <td>{bill.item_price}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+});
+
+export default FinalBillComponent;