@ampath/esm-dha-workflow-app 4.0.0-next.44 → 4.0.0-next.448

package/src/billing/dashboard/v3/patient-bill-details/attachments/medical-report/medical-report.scss

@@ -0,0 +1,265 @@
+.mr-root {
+  --ink: #16211c;
+  --ink-soft: #4b5a52;
+  --paper: #f6f4ee;
+  --panel: #ffffff;
+  --line: #dcd6c8;
+  --accent: #1f5f4e;
+  --accent-soft: #e4efe9;
+  --mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
+  --serif: 'Source Serif 4', Georgia, serif;
+  --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
+
+  display: block;
+  width: 190mm;
+  padding: 10mm;
+  box-sizing: border-box;
+  background: var(--paper);
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: 11px;
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+.mr-shell {
+  max-width: 100%;
+}
+
+.mr-header {
+  margin-bottom: 16px;
+}
+
+.mr-header-bar {
+  height: 6px;
+  background: var(--accent);
+  border-radius: 2px 2px 0 0;
+  margin-bottom: 12px;
+}
+
+.mr-header-info {
+  text-align: center;
+}
+
+.mr-org {
+  font-family: var(--mono);
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin: 0 0 2px;
+}
+
+.mr-title {
+  font-family: var(--serif);
+  font-size: 22px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.mr-field {
+  min-width: 0;
+}
+
+.mr-field-label {
+  font-family: var(--mono);
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ink-soft);
+  margin-bottom: 2px;
+}
+
+.mr-field-value {
+  font-size: 12px;
+  word-break: break-word;
+}
+
+.mr-field-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 10px 20px;
+}
+
+.mr-section {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  padding: 14px 16px;
+  margin-bottom: 14px;
+}
+
+.mr-section-title {
+  font-family: var(--mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--accent);
+  margin: 0 0 12px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--line);
+}
+
+.mr-section-num {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  line-height: 14px;
+  text-align: center;
+  border-radius: 50%;
+  background: var(--accent-soft);
+  color: var(--accent);
+  margin-right: 4px;
+  font-size: 8px;
+}
+
+.mr-subsection {
+  margin-bottom: 12px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.mr-subsection-title {
+  font-family: var(--mono);
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--ink-soft);
+  margin-bottom: 4px;
+}
+
+.mr-text {
+  font-size: 12px;
+  line-height: 1.5;
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+.mr-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 11px;
+  margin-bottom: 12px;
+
+  th {
+    text-align: left;
+    font-family: var(--mono);
+    font-size: 9px;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    color: var(--ink-soft);
+    padding: 6px 6px;
+    border-bottom: 1px solid var(--line);
+    background: var(--paper);
+  }
+
+  td {
+    padding: 6px 6px;
+    border-bottom: 1px solid var(--line);
+    vertical-align: top;
+  }
+
+  tbody tr:last-child td {
+    border-bottom: 1px solid var(--line);
+  }
+}
+
+.mr-inv-category {
+  font-weight: 600;
+}
+
+.mr-checkbox-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 8px 16px;
+  margin-bottom: 12px;
+}
+
+.mr-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+}
+
+.mr-checkbox-box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--ink-soft);
+  border-radius: 2px;
+  font-size: 10px;
+  flex-shrink: 0;
+}
+
+.mr-checkbox-checked {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+
+.mr-signoff {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 20px;
+  margin-top: 16px;
+}
+
+.mr-signature-line {
+  flex: 1;
+  border-top: 1px solid var(--line);
+  padding-top: 4px;
+}
+
+.mr-stamp-placeholder {
+  width: 90px;
+  height: 90px;
+  border: 2px dashed var(--line);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--mono);
+  font-size: 9px;
+  text-transform: uppercase;
+  color: var(--ink-soft);
+  letter-spacing: 0.04em;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.mr-confidentiality {
+  font-size: 10px;
+  color: var(--ink-soft);
+  border-top: 1px solid var(--line);
+  padding-top: 10px;
+  margin-top: 16px;
+
+  strong {
+    display: block;
+    font-family: var(--mono);
+    font-size: 9px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--accent);
+    margin-bottom: 4px;
+  }
+
+  p {
+    margin: 0;
+    line-height: 1.4;
+  }
+}
+
+@media print {
+  .mr-root {
+    padding: 0;
+  }
+}

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

@@ -0,0 +1,347 @@
+import React, { forwardRef } from 'react';
+import styles from './proforma-invoice.scss';
+
+const DEMO_INVOICE = {
+  facility: {
+    name: 'Sample Hospital',
+    code: 'SAMPLE-FAC-000',
+    address: 'Sample Town, P.O. Box 000-00000',
+    phone: '0700000000',
+    email: 'info@samplehospital.example',
+    kraPin: 'P000000000A',
+  },
+  invoiceDetails: {
+    number: 'PI-0000000',
+    date: '01-Jan-2026',
+    validUntil: '08-Jan-2026',
+    currency: 'KES',
+  },
+  patient: {
+    name: 'Jane A. Doe',
+    patientId: 'SAMPLE-ID-0000000',
+    dob: '01-01-1990',
+    age: '36',
+    sex: 'Female',
+    phone: '0700000000',
+    encounterNo: 'ENC-0000000',
+    department: 'General Medicine',
+    ward: '—',
+  },
+  payer: {
+    type: {
+      cash: true,
+      insurance: false,
+      sha: false,
+      corporate: false,
+      other: '',
+    },
+    insuranceProvider: '—',
+    membershipNo: '—',
+    principalMember: '—',
+    authorizationNo: '—',
+  },
+  items: [
+    { no: 1, description: 'Consultation', quantity: 1, unitCost: 500 },
+    { no: 2, description: 'Laboratory Investigation', quantity: 1, unitCost: 1500 },
+  ],
+  costSummary: {
+    discount: 0,
+    tax: 0,
+    otherCharges: 0,
+    amountInWords: 'Two Thousand Kenya Shillings Only',
+  },
+  payment: {
+    method: {
+      cash: true,
+      mobileMoney: false,
+      bank: false,
+      insurance: false,
+      other: '',
+    },
+    terms: 'Due on service.',
+    dueDate: '01-Jan-2026',
+  },
+  service: {
+    proposedTreatment: 'Sample proposed service/treatment.',
+    expectedDate: '02-Jan-2026',
+    referringClinician: 'Dr. Sample Referrer',
+    remarks: 'None.',
+  },
+  authorization: {
+    preparedBy: 'Sample Cashier',
+    preparedDesignation: 'Billing Officer',
+    preparedDate: '01-Jan-2026',
+    approvedBy: 'Sample Supervisor',
+    approvedDesignation: 'Finance Officer',
+    approvedDate: '01-Jan-2026',
+  },
+  systemReferences: {
+    encounterId: 'ENC-0000000',
+    patientId: 'SAMPLE-ID-0000000',
+    transactionRef: 'TXN-0000000',
+    generatedBy: 'Demo User',
+    generatedAt: '2026-01-01 00:00:00',
+  },
+};
+
+function Field({ label, value }) {
+  return (
+    <div className={styles['pi-field']}>
+      <div className={styles['pi-field-label']}>{label}</div>
+      <div className={styles['pi-field-value']}>{value || '—'}</div>
+    </div>
+  );
+}
+
+function SectionBlock({ number, title, children }) {
+  return (
+    <section className={styles['pi-section']}>
+      <h2 className={styles['pi-section-title']}>
+        {number && <span className={styles['pi-section-num']}>{number}</span>} {title}
+      </h2>
+      <div className={styles['pi-section-body']}>{children}</div>
+    </section>
+  );
+}
+
+function Checkbox({ label, checked }) {
+  return (
+    <div className={styles['pi-checkbox']}>
+      <span className={`${styles['pi-checkbox-box']} ${checked ? styles['pi-checkbox-checked'] : ''}`}>
+        {checked ? '✓' : ''}
+      </span>
+      <span>{label}</span>
+    </div>
+  );
+}
+
+function formatMoney(value: number, currency: string) {
+  return `${currency} ${value.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+}
+
+interface ProformaInvoiceProps {
+  invoice?: typeof DEMO_INVOICE;
+  patientUuid: string;
+}
+
+const ProformaInvoice = forwardRef<HTMLDivElement, ProformaInvoiceProps>(({ invoice = DEMO_INVOICE }, ref) => {
+  const inv = invoice;
+  const currency = inv.invoiceDetails.currency;
+
+  const itemsWithTotal = inv.items.map((item) => ({
+    ...item,
+    total: item.quantity * item.unitCost,
+  }));
+  const subtotal = itemsWithTotal.reduce((sum, item) => sum + item.total, 0);
+  const estimatedTotal = subtotal - inv.costSummary.discount + inv.costSummary.tax + inv.costSummary.otherCharges;
+
+  const payerType = inv.payer.type;
+  const paymentMethod = inv.payment.method;
+
+  return (
+    <div className={styles['pi-root']} ref={ref}>
+      <div className={styles['pi-shell']}>
+        <header className={styles['pi-header']}>
+          <div className={styles['pi-header-bar']} />
+          <div className={styles['pi-header-info']}>
+            <h1 className={styles['pi-title']}>Proforma Invoice</h1>
+          </div>
+        </header>
+
+        <div className={styles['pi-facility-grid']}>
+          <Field label="Facility Name" value={inv.facility.name} />
+          <Field label="Facility Code" value={inv.facility.code} />
+          <Field label="Address" value={inv.facility.address} />
+          <Field label="Telephone" value={inv.facility.phone} />
+          <Field label="Email" value={inv.facility.email} />
+          <Field label="KRA PIN" value={inv.facility.kraPin} />
+        </div>
+
+        <div className={styles['pi-invoice-meta']}>
+          <Field label="Proforma Invoice No." value={inv.invoiceDetails.number} />
+          <Field label="Date" value={inv.invoiceDetails.date} />
+          <Field label="Valid Until" value={inv.invoiceDetails.validUntil} />
+          <Field label="Currency" value={inv.invoiceDetails.currency} />
+        </div>
+
+        <SectionBlock number="1" title="Patient Details">
+          <div className={styles['pi-field-grid']}>
+            <Field label="Patient Name" value={inv.patient.name} />
+            <Field label="Patient ID / AMRS ID" value={inv.patient.patientId} />
+            <Field label="Date of Birth" value={inv.patient.dob} />
+            <Field label="Age" value={inv.patient.age} />
+            <Field label="Sex" value={inv.patient.sex} />
+            <Field label="Phone Number" value={inv.patient.phone} />
+            <Field label="Visit / Encounter No." value={inv.patient.encounterNo} />
+            <Field label="Department / Clinic" value={inv.patient.department} />
+            <Field label="Ward" value={inv.patient.ward} />
+          </div>
+        </SectionBlock>
+
+        <SectionBlock number="2" title="Billing / Payer Details">
+          <div className={styles['pi-subsection']}>
+            <div className={styles['pi-subsection-title']}>Payer Type</div>
+            <div className={styles['pi-checkbox-grid']}>
+              <Checkbox label="Cash" checked={payerType.cash} />
+              <Checkbox label="Insurance" checked={payerType.insurance} />
+              <Checkbox label="NHIF / SHA" checked={payerType.sha} />
+              <Checkbox label="Corporate" checked={payerType.corporate} />
+            </div>
+            {payerType.other && <p className={styles['pi-text']}>Other: {payerType.other}</p>}
+          </div>
+          <div className={styles['pi-field-grid']}>
+            <Field label="Insurance Provider" value={inv.payer.insuranceProvider} />
+            <Field label="Membership / Policy No." value={inv.payer.membershipNo} />
+            <Field label="Principal Member Name" value={inv.payer.principalMember} />
+            <Field label="Authorization / Pre-authorization No." value={inv.payer.authorizationNo} />
+          </div>
+        </SectionBlock>
+
+        <SectionBlock number="3" title="Medical Services / Items">
+          <table className={styles['pi-table']}>
+            <thead>
+              <tr>
+                <th>No.</th>
+                <th>Service / Item Description</th>
+                <th className={styles['pi-num-col']}>Quantity</th>
+                <th className={styles['pi-num-col']}>Unit Cost ({currency})</th>
+                <th className={styles['pi-num-col']}>Total ({currency})</th>
+              </tr>
+            </thead>
+            <tbody>
+              {itemsWithTotal.map((item) => (
+                <tr key={item.no}>
+                  <td>{item.no}</td>
+                  <td>{item.description}</td>
+                  <td className={styles['pi-num-col']}>{item.quantity}</td>
+                  <td className={styles['pi-num-col']}>{item.unitCost.toLocaleString()}</td>
+                  <td className={styles['pi-num-col']}>{item.total.toLocaleString()}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </SectionBlock>
+
+        <SectionBlock number="4" title="Cost Summary">
+          <div className={styles['pi-cost-summary']}>
+            <div className={styles['pi-cost-row']}>
+              <span>Subtotal</span>
+              <span>{formatMoney(subtotal, currency)}</span>
+            </div>
+            <div className={styles['pi-cost-row']}>
+              <span>Discount</span>
+              <span>{formatMoney(inv.costSummary.discount, currency)}</span>
+            </div>
+            <div className={styles['pi-cost-row']}>
+              <span>Tax / VAT, where applicable</span>
+              <span>{formatMoney(inv.costSummary.tax, currency)}</span>
+            </div>
+            <div className={styles['pi-cost-row']}>
+              <span>Other Charges</span>
+              <span>{formatMoney(inv.costSummary.otherCharges, currency)}</span>
+            </div>
+            <div className={`${styles['pi-cost-row']} ${styles['pi-cost-total']}`}>
+              <span>Estimated Total</span>
+              <span>{formatMoney(estimatedTotal, currency)}</span>
+            </div>
+          </div>
+          <div className={styles['pi-subsection']}>
+            <div className={styles['pi-subsection-title']}>Amount in Words</div>
+            <p className={styles['pi-text']}>{inv.costSummary.amountInWords}</p>
+          </div>
+        </SectionBlock>
+
+        <SectionBlock number="5" title="Payment Information">
+          <div className={styles['pi-subsection']}>
+            <div className={styles['pi-subsection-title']}>Payment Method</div>
+            <div className={styles['pi-checkbox-grid']}>
+              <Checkbox label="Cash" checked={paymentMethod.cash} />
+              <Checkbox label="Mobile Money" checked={paymentMethod.mobileMoney} />
+              <Checkbox label="Bank" checked={paymentMethod.bank} />
+              <Checkbox label="Insurance" checked={paymentMethod.insurance} />
+            </div>
+            {paymentMethod.other && <p className={styles['pi-text']}>Other: {paymentMethod.other}</p>}
+          </div>
+          <div className={styles['pi-field-grid']}>
+            <Field label="Payment Terms" value={inv.payment.terms} />
+            <Field label="Payment Due Date" value={inv.payment.dueDate} />
+          </div>
+        </SectionBlock>
+
+        <SectionBlock number="6" title="Service / Treatment Information">
+          <div className={styles['pi-subsection']}>
+            <div className={styles['pi-subsection-title']}>Proposed Service / Treatment</div>
+            <p className={styles['pi-text']}>{inv.service.proposedTreatment}</p>
+          </div>
+          <div className={styles['pi-field-grid']}>
+            <Field label="Expected Date of Service / Admission" value={inv.service.expectedDate} />
+            <Field label="Referring Clinician / Department" value={inv.service.referringClinician} />
+          </div>
+          <div className={styles['pi-subsection']}>
+            <div className={styles['pi-subsection-title']}>Remarks</div>
+            <p className={styles['pi-text']}>{inv.service.remarks}</p>
+          </div>
+        </SectionBlock>
+
+        <SectionBlock number="7" title="Terms and Conditions">
+          <ol className={styles['pi-terms-list']}>
+            <li>This is a proforma invoice and represents an estimated cost of the proposed medical services.</li>
+            <li>
+              The final amount may change depending on the actual services, investigations, medicines, procedures,
+              length of stay, or other services provided.
+            </li>
+            <li>The proforma invoice does not constitute proof of payment.</li>
+            <li>
+              A final invoice/receipt should be issued according to the actual services provided and payment received.
+            </li>
+            <li>Insurance services are subject to eligibility, authorization, and the applicable payer terms.</li>
+            <li>
+              The patient/client should confirm the estimated costs and payment arrangements before the service, where
+              applicable.
+            </li>
+          </ol>
+        </SectionBlock>
+
+        <SectionBlock number="8" title="Authorization">
+          <div className={styles['pi-authorization-grid']}>
+            <div className={styles['pi-auth-block']}>
+              <Field label="Prepared By" value={inv.authorization.preparedBy} />
+              <Field label="Designation" value={inv.authorization.preparedDesignation} />
+              <Field label="Date" value={inv.authorization.preparedDate} />
+              <div className={styles['pi-signature-line']}>
+                <span className={styles['pi-field-label']}>Signature</span>
+              </div>
+            </div>
+            <div className={styles['pi-auth-block']}>
+              <Field label="Approved By" value={inv.authorization.approvedBy} />
+              <Field label="Designation" value={inv.authorization.approvedDesignation} />
+              <Field label="Date" value={inv.authorization.approvedDate} />
+              <div className={styles['pi-signature-line']}>
+                <span className={styles['pi-field-label']}>Signature / Stamp</span>
+              </div>
+            </div>
+          </div>
+        </SectionBlock>
+
+        <section className={styles['pi-section']}>
+          <h2 className={styles['pi-section-title']}>AMRS System References</h2>
+          <div className={styles['pi-section-body']}>
+            <div className={styles['pi-field-grid']}>
+              <Field label="AMRS Encounter ID" value={inv.systemReferences.encounterId} />
+              <Field label="AMRS Patient ID" value={inv.systemReferences.patientId} />
+              <Field label="Invoice / Transaction Reference" value={inv.systemReferences.transactionRef} />
+              <Field label="Generated By" value={inv.systemReferences.generatedBy} />
+              <Field label="Date/Time Generated" value={inv.systemReferences.generatedAt} />
+            </div>
+          </div>
+        </section>
+
+        <div className={styles['pi-footer']}>Confidential — For authorized billing use only</div>
+      </div>
+    </div>
+  );
+});
+
+ProformaInvoice.displayName = 'ProformaInvoice';
+
+export default ProformaInvoice;