@ampath/esm-dha-workflow-app 4.0.0-next.34 → 4.0.0-next.340

package/src/billing/dashboard/v2/patient-bill-details/attachments/case-summary/case-summary.scss

@@ -0,0 +1,295 @@
+.cs-root {
+  --ink: #16211c;
+  --ink-soft: #4b5a52;
+  --paper: #f6f4ee;
+  --panel: #ffffff;
+  --line: #dcd6c8;
+  --accent: #1f5f4e;
+  --accent-soft: #e4efe9;
+  --alert: #9c3b2e;
+  --alert-soft: #f6e6e2;
+  --header-bar: #1f5f4e;
+  --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; }
+
+  .cs-shell { max-width: 900px; margin: 0 auto; }
+
+  .cs-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;
+  }
+
+  .cs-header {
+    margin-bottom: 20px;
+  }
+
+  .cs-header-bar {
+    height: 10px;
+    background: var(--header-bar);
+    border-radius: 3px 3px 0 0;
+    margin-bottom: 16px;
+  }
+
+  .cs-header-info {
+    text-align: center;
+  }
+
+  .cs-org {
+    font-family: var(--mono);
+    font-size: 12px;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--accent);
+    margin: 0 0 4px;
+  }
+
+  .cs-title {
+    font-family: var(--serif);
+    font-size: 24px;
+    font-weight: 600;
+    margin: 0 0 4px;
+  }
+
+  .cs-meta-right {
+    text-align: center;
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--ink-soft);
+    line-height: 1.6;
+    margin-top: 4px;
+  }
+
+  .cs-identity {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 14px 24px;
+    background: var(--panel);
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    padding: 18px 20px;
+    margin-bottom: 20px;
+  }
+
+  .cs-field-name {
+    grid-column: 1 / -1;
+  }
+
+  .cs-name-value {
+    font-family: var(--serif);
+    font-size: 20px;
+    font-weight: 600;
+  }
+
+  .cs-field {
+    min-width: 0;
+  }
+
+  .cs-field-label {
+    font-family: var(--mono);
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--ink-soft);
+    margin-bottom: 3px;
+  }
+
+  .cs-field-value {
+    font-size: 14px;
+    word-break: break-word;
+  }
+
+  .cs-field-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 14px 24px;
+  }
+
+  .cs-alert {
+    background: var(--alert-soft);
+    border-left: 4px solid var(--alert);
+    color: var(--alert);
+    padding: 12px 16px;
+    border-radius: 4px;
+    font-size: 13px;
+    margin-bottom: 20px;
+  }
+
+  .cs-section {
+    background: var(--panel);
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    padding: 18px 20px;
+    margin-bottom: 16px;
+  }
+
+  .cs-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);
+  }
+
+  .cs-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;
+  }
+
+  .cs-vitals-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
+    gap: 10px;
+  }
+
+  .cs-vital {
+    text-align: center;
+    padding: 10px 4px;
+    background: var(--paper);
+    border-radius: 5px;
+  }
+
+  .cs-vital-value { font-family: var(--serif); font-size: 20px; font-weight: 600; }
+  .cs-vital-unit { font-size: 10px; color: var(--ink-soft); }
+  .cs-vital-label {
+    font-family: var(--mono);
+    font-size: 10px;
+    text-transform: uppercase;
+    color: var(--ink-soft);
+    margin-top: 2px;
+  }
+  .cs-vital-trend { font-size: 12px; margin-left: 3px; }
+  .cs-vitals-foot {
+    display: flex;
+    justify-content: space-between;
+    font-family: var(--mono);
+    font-size: 10px;
+    color: var(--ink-soft);
+    margin-top: 10px;
+  }
+
+  table.cs-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; }
+  }
+
+  .cs-pill {
+    display: inline-block;
+    font-family: var(--mono);
+    font-size: 9px;
+    text-transform: uppercase;
+    padding: 2px 7px;
+    border-radius: 20px;
+    background: var(--accent-soft);
+    color: var(--accent);
+
+    &.tag { background: #efe6d8; color: #7a5a2a; margin-left: 6px; }
+  }
+
+  .cs-drug-name { font-weight: 600; }
+  .cs-drug-detail { color: var(--ink-soft); font-size: 12px; margin-top: 2px; }
+
+  .cs-empty {
+    font-size: 13px;
+    color: var(--ink-soft);
+    font-style: italic;
+  }
+
+  .cs-soap {
+    dt {
+      font-family: var(--mono);
+      font-size: 10px;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: var(--accent);
+      margin-top: 12px;
+
+      &:first-child { margin-top: 0; }
+    }
+
+    dd { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }
+  }
+
+  .cs-encounter {
+    padding: 10px 0;
+    border-bottom: 1px solid var(--line);
+    font-size: 13px;
+
+    &:last-child { border-bottom: none; }
+
+    .cs-encounter-head {
+      font-family: var(--mono);
+      font-size: 11px;
+      color: var(--ink-soft);
+      margin-bottom: 4px;
+    }
+
+    .cs-encounter-line {
+      margin-top: 2px;
+
+      b { font-weight: 600; }
+    }
+  }
+
+  .cs-footer {
+    font-family: var(--mono);
+    font-size: 10px;
+    color: var(--ink-soft);
+    text-align: center;
+    margin-top: 24px;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+
+  @media (max-width: 520px) {
+    .cs-title { font-size: 20px; }
+  }
+}

package/src/billing/dashboard/v2/patient-bill-details/attachments/case-summary/case-summary.tsx

@@ -0,0 +1,326 @@
+import React from 'react';
+import styles from './case-summary.scss';
+import { useSession } from '@openmrs/esm-framework';
+import { fetchCaseSummary } from '../../../../../billing-claims.resource';
+
+const DEMO_PATIENT = {
+  facility: 'Sample County Government',
+  patientName: 'Jane A. Doe',
+  dob: '01-01-1990',
+  age: 36,
+  gender: 'Female',
+  patientId: 'SAMPLE-ID-0000000',
+  nationalId: '00000000',
+  insuranceNo: '00000000',
+  printedBy: 'Demo User',
+  printedAt: '2026-01-01 00:00:00',
+  alert: 'No active clinical alerts on file.',
+  allergies: [{ label: 'No Known Allergies (NKA)' }],
+  diagnoses: [
+    {
+      date: '01-Jan-2026',
+      code: 'A00Z',
+      description: 'Sample diagnosis, unspecified',
+      status: 'Active',
+      primary: true,
+    },
+    {
+      date: '01-Jan-2026',
+      code: 'B00Z',
+      description: 'Sample secondary condition',
+      status: 'Active',
+      primary: false,
+    },
+  ],
+  vitals: {
+    takenAt: '01-Jan-2026 00:00',
+    tewScore: 0,
+    readings: [
+      { label: 'Temp', value: '36.8', unit: '°C', trend: 'flat' },
+      { label: 'Pulse', value: '76', unit: 'bpm', trend: 'down' },
+      { label: 'BP', value: '112/67', unit: 'mmHg', trend: 'down' },
+      { label: 'RR', value: '18', unit: '/min', trend: 'up' },
+      { label: 'SpO2', value: '99', unit: '%', trend: 'flat' },
+      { label: 'Wt', value: '62.0', unit: 'kg', trend: 'flat' },
+      { label: 'Ht', value: '—', unit: 'cm', trend: 'flat' },
+      { label: 'BMI', value: '—', unit: '', trend: 'flat' },
+    ],
+  },
+  medications: [
+    {
+      date: '05-Jan-2026',
+      drug: 'SAMPLE DRUG 500 MG',
+      tag: 'Discharge',
+      detail: '(1) SAMPLE DRUG 500 MG BID for 5 Day Oral',
+      dose: '1',
+      route: 'Oral',
+      frequency: 'BID',
+      duration: '5 Day',
+    },
+    {
+      date: '03-Jan-2026',
+      drug: 'SAMPLE IV MEDICATION 1000 MG',
+      tag: null,
+      detail: '(1) SAMPLE IV MEDICATION 1000 MG BID for 3 Day IV',
+      dose: '1',
+      route: 'IV',
+      frequency: 'BID',
+      duration: '3 Day',
+    },
+  ],
+  labs: [],
+  soap: {
+    date: '01-Jan-2026',
+    subjective: 'Sample presenting complaint, duration and character as documented at intake.',
+    objective: 'General appearance and exam findings as documented.',
+    assessment: 'Clinical impression as documented by attending clinician.',
+    plan: 'Admit / treat / follow-up as documented.',
+  },
+  admission: {
+    date: '01-Jan-2026 00:00:00',
+    status: 'Admitted',
+    diagnosis: 'Sample admission diagnosis',
+    doctor: 'Dr. Sample Physician',
+    ward: 'WARD-00 - Sample Ward',
+  },
+  encounters: [
+    {
+      date: '01-Jan-2026',
+      time: '00:00',
+      clinician: 'Dr. Sample Physician',
+      labOrders: 'Sample Lab Panel',
+      prescriptions: 'Sample Rx A; Sample Rx B',
+    },
+    {
+      date: '30-Dec-2025',
+      time: '17:02',
+      clinician: 'Dr. Sample Physician B',
+      labOrders: 'Sample Lab Panel B',
+      prescriptions: 'Sample Rx C; Sample Rx D; Sample Rx E',
+    },
+  ],
+};
+
+const TREND_GLYPH = { up: '↑', down: '↓', flat: '→' };
+
+function Field({ label, value }) {
+  return (
+    <div className={styles['cs-field']}>
+      <div className={styles['cs-field-label']}>{label}</div>
+      <div className={styles['cs-field-value']}>{value}</div>
+    </div>
+  );
+}
+
+function SectionBlock({ number, title, children }) {
+  return (
+    <section className={styles['cs-section']}>
+      <h2 className={styles['cs-section-title']}>
+        {number && <span className={styles['cs-section-num']}>{number}</span>} {title}
+      </h2>
+      <div className={styles['cs-section-body']}>{children}</div>
+    </section>
+  );
+}
+
+const CaseSummary = ({ patient = DEMO_PATIENT }) => {
+  const p = patient;
+  const session = useSession();
+  const locationName = session.sessionLocation?.display;
+  const locationUuid = session?.sessionLocation?.uuid;
+  const provider = session?.user?.display;
+
+  const formattedDate = new Intl.DateTimeFormat('en-KE', {
+    year: 'numeric',
+    month: 'short',
+    day: '2-digit',
+  }).format(new Date());
+
+  const getCaseSummary = async () => {
+    try {
+      const res = await fetchCaseSummary(locationUuid, '');
+      console.log('CASE SUMMARY RESPONSE: ', res);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  return (
+    <div className={styles['cs-root']}>
+      <div className={styles['cs-shell']}>
+        <header className={styles['cs-header']}>
+          <div className={styles['cs-header-bar']} />
+          <div className={styles['cs-header-info']}>
+            <p className={styles['cs-org']}>{locationName}</p>
+            <h1 className={styles['cs-title']}>Patient Clinical Summary</h1>
+          </div>
+          <div className={styles['cs-meta-right']}>
+            Printed by {provider}
+            <br />
+            {formattedDate}
+          </div>
+        </header>
+
+        <div className={styles['cs-identity']}>
+          <div className={styles['cs-field']}>
+            <div className={styles['cs-field-label']}>Patient Name</div>
+            <div className={styles['cs-field-value']} cs-name-value>
+              {p.patientName}
+            </div>
+          </div>
+          <Field label="DOB" value={p.dob} />
+          <Field label="Age / Gender" value={`${p.age}y · ${p.gender}`} />
+          <Field label="Patient ID" value={p.patientId} />
+          <Field label="National ID" value={p.nationalId} />
+          <Field label="Insurance No." value={p.insuranceNo} />
+        </div>
+
+        {p.alert && <div className={styles['cs-alert']}>{p.alert}</div>}
+
+        <SectionBlock number="1" title="Allergies">
+          {p.allergies.map((a, i) => (
+            <div key={i} className={styles['cs-field-value']}>
+              ✓ {a.label}
+            </div>
+          ))}
+        </SectionBlock>
+
+        <SectionBlock number="2" title="Active Diagnoses">
+          <table className={styles['cs-table']}>
+            <thead>
+              <tr>
+                <th>Date</th>
+                <th>Code</th>
+                <th>Description</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {p.diagnoses.map((d, i) => (
+                <tr key={i}>
+                  <td>{d.date}</td>
+                  <td>{d.code}</td>
+                  <td>
+                    {d.description}
+                    {d.primary && <span className={styles['cs-pill']}>Primary</span>}
+                  </td>
+                  <td>{d.status}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </SectionBlock>
+
+        <SectionBlock number="3" title="Latest Vitals">
+          <div className={styles['cs-vitals-grid']}>
+            {p.vitals.readings.map((v, i) => (
+              <div className={styles['cs-vital']} key={i}>
+                <div className={styles['cs-vital-value']}>
+                  {v.value}
+                  <span className={styles['cs-vital-unit']}> {v.unit}</span>
+                </div>
+                <div className={styles['cs-vital-label']}>
+                  {v.label} <span className={styles['cs-vital-trend']}>{TREND_GLYPH[v.trend]}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className={styles['cs-vitals-foot']}>
+            <span>Taken: {p.vitals.takenAt}</span>
+            <span>TEW Score: {p.vitals.tewScore}</span>
+          </div>
+        </SectionBlock>
+
+        <SectionBlock number="4" title="Active Medications">
+          <table className={styles['cs-table']}>
+            <thead>
+              <tr>
+                <th>Drug</th>
+                <th>Dose</th>
+                <th>Route</th>
+                <th>Frequency</th>
+                <th>Duration</th>
+              </tr>
+            </thead>
+            <tbody>
+              {p.medications.map((m, i) => (
+                <tr key={i}>
+                  <td>
+                    <div className={styles['cs-drug-name']}>
+                      {m.drug}
+                      {m.tag && <span className={styles['cs-pill']}> {m.tag}</span>}
+                    </div>
+                    <div className={styles['cs-drug-detail']}>{m.detail}</div>
+                  </td>
+                  <td>{m.dose}</td>
+                  <td>{m.route}</td>
+                  <td>{m.frequency}</td>
+                  <td>{m.duration}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </SectionBlock>
+
+        <SectionBlock number="5" title="Latest Lab Results">
+          {p.labs.length === 0 ? (
+            <div className={styles['cs-empty']}>No lab results available</div>
+          ) : (
+            <ul>
+              {p.labs.map((l, i) => (
+                <li key={i}>{l}</li>
+              ))}
+            </ul>
+          )}
+        </SectionBlock>
+
+        <SectionBlock number="6" title={`SOAP Note — ${p.soap.date}`}>
+          <dl className={styles['cs-soap']}>
+            <dt>Subjective</dt>
+            <dd>{p.soap.subjective}</dd>
+            <dt>Objective</dt>
+            <dd>{p.soap.objective}</dd>
+            <dt>Assessment</dt>
+            <dd>{p.soap.assessment}</dd>
+            <dt>Plan</dt>
+            <dd>{p.soap.plan}</dd>
+          </dl>
+        </SectionBlock>
+
+        <SectionBlock number="7" title="Admission Details">
+          <div className={styles['cs-field-grid']}>
+            <Field label="Status" value={p.admission.status} />
+            <Field label="Admission Date" value={p.admission.date} />
+            <Field label="Admission Diagnosis" value={p.admission.diagnosis} />
+            <Field label="Primary Doctor" value={p.admission.doctor} />
+            <Field label="Ward / Bed" value={p.admission.ward} />
+          </div>
+        </SectionBlock>
+
+        <SectionBlock number="8" title="Encounter Log">
+          {p.encounters.map((e, i) => (
+            <div className={styles['cs-encounter']} key={i}>
+              <div className={styles['cs-encounter-head']}>
+                {e.date} — {e.time} — {e.clinician}
+              </div>
+              {e.labOrders && (
+                <div className={styles['cs-encounter-line']}>
+                  <b>Lab Orders:</b> {e.labOrders}
+                </div>
+              )}
+              {e.prescriptions && (
+                <div className={styles['cs-encounter-line']}>
+                  <b>Prescriptions:</b> {e.prescriptions}
+                </div>
+              )}
+            </div>
+          ))}
+        </SectionBlock>
+
+        <div className={styles['cs-footer']}>Confidential — For authorized clinical use only</div>
+      </div>
+    </div>
+  );
+};
+
+export default CaseSummary;