@ampath/esm-dha-workflow-app 4.0.0-next.35 → 4.0.0-next.355

package/src/billing/dashboard/v2/patient-bill-details/attachments/dialysis/dialysis-chart.scss

@@ -0,0 +1,238 @@
+.dc-root {
+  --ink: #16211c;
+  --ink-soft: #4b5a52;
+  --paper: #f6f4ee;
+  --panel: #ffffff;
+  --line: #dcd6c8;
+  --accent: #1f5f4e;
+  --accent-soft: #e4efe9;
+  --header-bar: #b3392b;
+  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
+  --serif: "Source Serif 4", Georgia, serif;
+  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
+  background: var(--paper);
+  color: var(--ink);
+  font-family: var(--sans);
+  padding: 32px 16px 64px;
+  min-height: 100%;
+  box-sizing: border-box;
+
+  * { box-sizing: border-box; }
+
+  .dc-shell { max-width: 900px; margin: 0 auto; }
+
+  .dc-demo-banner {
+    background: var(--accent-soft);
+    border: 1px solid var(--accent);
+    color: var(--accent);
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    padding: 8px 12px;
+    border-radius: 4px;
+    margin-bottom: 20px;
+  }
+
+  .dc-header {
+    margin-bottom: 20px;
+  }
+
+  .dc-header-bar {
+    height: 10px;
+    background: var(--header-bar);
+    border-radius: 3px 3px 0 0;
+    margin-bottom: 16px;
+  }
+
+  .dc-header-info {
+    text-align: center;
+  }
+
+  .dc-title {
+    font-family: var(--serif);
+    font-size: 24px;
+    font-weight: 600;
+    margin: 0 0 4px;
+  }
+
+  .dc-hospital {
+    font-family: var(--mono);
+    font-size: 12px;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--accent);
+    margin: 0 0 4px;
+  }
+
+  .dc-hospital-meta {
+    font-size: 12px;
+    color: var(--ink-soft);
+    margin: 0;
+  }
+
+  .dc-identity {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 14px 24px;
+    background: var(--panel);
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    padding: 18px 20px;
+    margin-bottom: 20px;
+  }
+
+  .dc-field {
+    min-width: 0;
+  }
+
+  .dc-field-label {
+    font-family: var(--mono);
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--ink-soft);
+    margin-bottom: 3px;
+  }
+
+  .dc-field-value {
+    font-size: 14px;
+    word-break: break-word;
+  }
+
+  .dc-field-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 14px 24px;
+  }
+
+  .dc-section {
+    background: var(--panel);
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    padding: 18px 20px;
+    margin-bottom: 16px;
+  }
+
+  .dc-section-title {
+    font-family: var(--mono);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--accent);
+    margin: 0 0 14px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .dc-section-num {
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    line-height: 18px;
+    text-align: center;
+    border-radius: 50%;
+    background: var(--accent-soft);
+    color: var(--accent);
+    margin-right: 6px;
+    font-size: 10px;
+  }
+
+  table.dc-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+
+    th {
+      text-align: left;
+      font-family: var(--mono);
+      font-size: 10px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--ink-soft);
+      padding: 6px 8px;
+      border-bottom: 1px solid var(--line);
+      background: var(--paper);
+    }
+
+    td {
+      padding: 8px 8px;
+      border-bottom: 1px solid var(--line);
+      vertical-align: top;
+    }
+
+    tr:last-child td { border-bottom: none; }
+  }
+
+  .dc-notes {
+    margin-top: 14px;
+  }
+
+  .dc-note-text {
+    font-size: 13px;
+    line-height: 1.5;
+    margin: 4px 0 0;
+  }
+
+  .dc-empty {
+    font-style: italic;
+    color: var(--ink-soft);
+  }
+
+  .dc-signoff {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 20px;
+    background: var(--panel);
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    padding: 18px 20px;
+    margin-top: 16px;
+  }
+
+  .dc-signoff-block {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .dc-signoff-title {
+    font-family: var(--mono);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--accent);
+    margin-bottom: 2px;
+  }
+
+  .dc-signature-line {
+    margin-top: 12px;
+    border-top: 1px solid var(--line);
+    height: 0;
+  }
+
+  .dc-signoff-stamp {
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .dc-stamp-placeholder {
+    width: 110px;
+    height: 110px;
+    border: 2px dashed var(--line);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--mono);
+    font-size: 10px;
+    text-transform: uppercase;
+    color: var(--ink-soft);
+    letter-spacing: 0.05em;
+  }
+
+  @media (max-width: 520px) {
+    .dc-title { font-size: 20px; }
+  }
+}

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

@@ -0,0 +1,269 @@
+import React from 'react';
+import styles from './dialysis-chart.scss';
+import { useSession } from '@openmrs/esm-framework';
+
+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>
+  );
+}
+
+const DialysisChart: React.FC<{ session?: typeof DEMO_SESSION }> = ({ session = DEMO_SESSION }) => {
+  const s = session;
+
+  const sessionL = useSession();
+  const locationName = sessionL?.sessionLocation?.display;
+
+  return (
+    <div className={styles['dc-root']}>
+      <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={s.patient.name} />
+          <Field label="OP No" value={s.patient.opNo} />
+          <Field label="Insurance No" value={s.patient.insuranceNo} />
+          <Field label="Date" value={s.patient.date} />
+          <Field label="Age" value={s.patient.age} />
+          <Field label="Sex" value={s.patient.sex} />
+          <Field label="Contact" value={s.patient.contact} />
+          <Field label="Clinic" value={s.patient.clinic} />
+          <Field label="Diagnosis" value={s.patient.diagnosis} />
+          <Field label="Address" value={s.patient.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={s.preAssessment.temperature} />
+            <Field label="Pulse" value={s.preAssessment.pulse} />
+            <Field label="BP" value={s.preAssessment.bp} />
+            <Field label="Resp. Rate" value={s.preAssessment.respRate} />
+            <Field label="Oxygen Sat." value={s.preAssessment.oxygenSat} />
+            <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>
+  );
+};
+
+export default DialysisChart;

package/src/billing/dashboard/v2/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;
+}