@kenyaemr/esm-morgue-app 5.4.2-pre.2330 → 5.4.2-pre.2344

package/src/modals/mortuary-gate-pass/print-preview-confirmation.modal.tsx

@@ -0,0 +1,257 @@
+import React, { useRef, useState, useMemo } from 'react';
+import { Button, ButtonSet, ModalBody, ModalFooter, InlineNotification } from '@carbon/react';
+import { useReactToPrint } from 'react-to-print';
+import { formatDate, formatDatetime, parseDate, useSession } from '@openmrs/esm-framework';
+import styles from './print-preview-confirmation.scss';
+import { type Patient } from '../../types';
+import { formatDateTime, documentId } from '../../utils/utils';
+import { useTranslation } from 'react-i18next';
+
+type PrintPreviewModalProps = {
+  onClose: () => void;
+  patient: Patient;
+  encounterDate?: string;
+};
+
+const PrintPreviewModal: React.FC<PrintPreviewModalProps> = ({ onClose, patient, encounterDate }) => {
+  const { t } = useTranslation();
+  const [printError, setPrintError] = useState<string | null>(null);
+  const printRef = useRef<HTMLDivElement>(null);
+  const { sessionLocation, user } = useSession();
+  const userDisplay = user ? user.display : '';
+  const generationTimestamp = useMemo(() => new Date(), []);
+
+  const handlePrint = useReactToPrint({
+    content: () => printRef.current,
+    documentTitle: 'Mortuary Gate Pass',
+    onAfterPrint: () => {
+      setPrintError(null);
+    },
+    onPrintError: (_, error) => {
+      setPrintError(error?.message || 'An error occurred while printing');
+    },
+    pageStyle: `
+      @page {
+        size: A4;
+        margin: 15mm;
+      }
+    `,
+  });
+
+  const getPatientNumber = () => {
+    const openMRSId =
+      patient.identifiers
+        ?.find((id) => id.display?.includes('OpenMRS ID'))
+        ?.display?.split('=')?.[1]
+        ?.trim() || '';
+    return openMRSId;
+  };
+
+  const getCurrentDateTime = () => {
+    const now = new Date();
+    return {
+      date: formatDate(now, { mode: 'standard' }),
+      time: now.toLocaleTimeString('en-US', {
+        hour12: false,
+        hour: '2-digit',
+        minute: '2-digit',
+      }),
+    };
+  };
+
+  const currentDateTime = getCurrentDateTime();
+
+  return (
+    <>
+      <ModalBody>
+        <div className={styles.container}>
+          <div ref={printRef} className={styles.printableContent}>
+            <div className={styles.printableHeader}>
+              <div className={styles.facilityDetails}>
+                <div className={styles.facilityName}>{sessionLocation?.display}</div>
+                <div className={styles.heading}>{t('mortuaryGatePass', 'Mortuary Gate Pass')}</div>
+              </div>
+            </div>
+
+            <div className={styles.printableBody}>
+              <div className={styles.gatePassForm}>
+                <div className={styles.topInfoRow}>
+                  <div className={styles.infoItem}>
+                    <span className={styles.label}>{t('paperNo', 'Paper No' + ':')}</span>
+                    <span className={styles.value}>{getPatientNumber()}</span>
+                  </div>
+                  <div className={styles.infoItem}>
+                    <span className={styles.label}>{t('patientNo', 'Patient No' + ':')}</span>
+                    <span className={styles.value}>{getPatientNumber()}</span>
+                  </div>
+                  <div className={styles.infoItem}>
+                    <span className={styles.label}>{t('date', 'Date' + ':')}</span>
+                    <span className={styles.value}>{currentDateTime.date}</span>
+                  </div>
+                  <div className={styles.infoItem}>
+                    <span className={styles.label}>{t('time', 'Time' + ':')}</span>
+                    <span className={styles.value}>{currentDateTime.time}</span>
+                  </div>
+                </div>
+                <div className={styles.secondInfoRow}>
+                  <div className={styles.patientField}>
+                    <span className={styles.label}>{t('patientName', 'Patient Name' + ':')}</span>
+                    <span className={styles.valueWide}>{patient.person?.display || ''}</span>
+                  </div>
+                  <div className={styles.ageField}>
+                    <span className={styles.label}>{t('age', 'Age' + ':')}</span>
+                    <span className={styles.value}>{patient.person?.age || ''}</span>
+                  </div>
+                </div>
+                <div className={styles.secondInfoRow}>
+                  <div className={styles.patientField}>
+                    <span className={styles.label}>{t('dateOfAdmission', 'Date of Admission' + ':')}</span>
+                    <span className={styles.valueWide}>{formatDateTime(patient.person?.deathDate)}</span>
+                  </div>
+                  <div className={styles.ageField}>
+                    <span className={styles.label}>{t('dateOfDischarge', 'Date of Discharge' + ':')}</span>
+                    <span className={styles.value}>{formatDateTime(encounterDate)}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div className={styles.paymentSection}>
+                <div className={styles.sectionTitle}>
+                  {t('methodOfPayment', 'Method of payment (tick as appropriate)')}
+                </div>
+                <div className={styles.paymentGrid}>
+                  <div className={styles.paymentOption}>
+                    <span className={styles.checkbox}></span>
+                    <span className={styles.optionLabel}>{t('cash', 'Cash')}</span>
+                  </div>
+                  <div className={styles.paymentOption}>
+                    <span className={styles.checkbox}></span>
+                    <span className={styles.optionLabel}>{t('cheque', 'Cheque')}</span>
+                  </div>
+                  <div className={styles.paymentOption}>
+                    <span className={styles.checkbox}></span>
+                    <span className={styles.optionLabel}>{t('sha', 'SHA')}</span>
+                  </div>
+                  <div className={styles.paymentOption}>
+                    <span className={styles.checkbox}></span>
+                    <span className={styles.optionLabel}>{t('scheme', 'Scheme')}</span>
+                  </div>
+                  <div className={styles.paymentOption}>
+                    <span className={styles.checkbox}></span>
+                    <span className={styles.optionLabel}>{t('mrM', 'M.R.M')}</span>
+                  </div>
+                  <div className={styles.paymentOption}>
+                    <span className={styles.checkbox}></span>
+                    <span className={styles.optionLabel}>
+                      {t('others', 'Others:')} {'...........................'}
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              <div className={styles.signaturesSection}>
+                <div className={styles.signatureBlock}>
+                  <div className={styles.signatureRow}>
+                    <div className={styles.nameField}>
+                      <span className={styles.label}>{t('accountOfficer', 'Account Officer:')}</span>
+                      <span className={styles.nameValue}>{''}</span>
+                    </div>
+                    <div className={styles.signField}>
+                      <span className={styles.label}>{t('sign', 'Sign:')}</span>
+                      <div className={styles.signatureLine}></div>
+                    </div>
+                    <div className={styles.dateField}>
+                      <span className={styles.label}>{t('date', 'Date:')}</span>
+                      <div className={styles.signatureLine}></div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className={styles.signatureBlock}>
+                  <div className={styles.signatureRow}>
+                    <div className={styles.nameField}>
+                      <span className={styles.label}>{t('nurseOfficerIncharge', 'Nurse Officer Incharge:')}</span>
+                      <span className={styles.nameValue}>{''}</span>
+                    </div>
+                    <div className={styles.signField}>
+                      <span className={styles.label}>{t('sign', 'Sign:')}</span>
+                      <div className={styles.signatureLine}></div>
+                    </div>
+                    <div className={styles.dateField}>
+                      <span className={styles.label}>{t('date', 'Date:')}</span>
+                      <div className={styles.signatureLine}></div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className={styles.signatureBlock}>
+                  <div className={styles.signatureRow}>
+                    <div className={styles.nameField}>
+                      <span className={styles.label}>{t('securityGuardName', 'S. Guard Name:')}</span>
+                      <span className={styles.nameValue}>{''}</span>
+                    </div>
+                    <div className={styles.signField}>
+                      <span className={styles.label}>{t('sign', 'Sign:')}</span>
+                      <div className={styles.signatureLine}></div>
+                    </div>
+                    <div className={styles.dateField}>
+                      <span className={styles.label}>{t('date', 'Date:')}</span>
+                      <div className={styles.signatureLine}></div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className={styles.signatureBlock}>
+                  <div className={styles.signatureRow}>
+                    <div className={styles.nameField}>
+                      <span className={styles.label}>{t('printedBy', 'Printed by:')}</span>
+                      <span className={styles.nameValue}>{userDisplay}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className={styles.footerNote}>
+                <div className={styles.noteText}>
+                  <strong>{t('nb', 'N/B:')}</strong>{' '}
+                  {t(
+                    'formDuplicateNote',
+                    'This form should be filled in duplicate, one copy to be retained in the ward and the other to be left at the main gate',
+                  )}
+                </div>
+              </div>
+
+              <div className={styles.footer}>
+                <div className={styles.footerDetails}>
+                  <div>
+                    {documentId()} | {t('generatedBy', 'Generated By')}: {userDisplay}
+                  </div>
+                  <div>
+                    {t('generationTimestamp', 'Generated')}: {formatDatetime(generationTimestamp)} |{' '}
+                    {t('facility', 'Facility')}: {sessionLocation?.display}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <ButtonSet className={styles.btnSet}>
+          <Button kind="secondary" onClick={onClose} type="button">
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button kind="primary" type="button" onClick={handlePrint}>
+            {t('print', 'Print')}
+          </Button>
+        </ButtonSet>
+      </ModalFooter>
+
+      {printError && (
+        <InlineNotification kind="error" title={t('printError', 'Error')} subtitle={printError} hideCloseButton />
+      )}
+    </>
+  );
+};
+
+export default PrintPreviewModal;

package/src/modals/mortuary-gate-pass/print-preview-confirmation.scss

@@ -0,0 +1,333 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  padding: layout.$spacing-06;
+  margin-bottom: layout.$spacing-05;
+  background-color: colors.$white;
+
+  @media print {
+    padding: 0;
+    margin: 0;
+    background-color: colors.$white;
+  }
+}
+
+.noPrint {
+  @media print {
+    display: none !important;
+  }
+}
+
+.printableContent {
+  background-color: colors.$white;
+  width: 210mm;
+  min-height: 297mm;
+  margin: 0 auto;
+  padding: layout.$spacing-07;
+  box-sizing: border-box;
+  font-size: 11px;
+  line-height: 1.3;
+  color: colors.$black;
+
+  @media print {
+    width: 100%;
+    height: 100%;
+    padding: layout.$spacing-07;
+    margin: 0;
+    box-shadow: none;
+    border: none;
+    page-break-after: avoid;
+    page-break-before: avoid;
+  }
+}
+
+.printableHeader {
+  text-align: center;
+  margin-bottom: layout.$spacing-05;
+  padding-bottom: layout.$spacing-03;
+  border-bottom: 1px solid colors.$black;
+
+  @media print {
+    border-bottom: 1px solid colors.$black;
+  }
+}
+
+.facilityDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.facilityName {
+  font-weight: 700;
+  color: colors.$black;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  margin-bottom: layout.$spacing-03;
+  font-size: 14px;
+
+  @media print {
+    color: colors.$black;
+  }
+}
+
+.heading {
+  font-weight: 600;
+  color: colors.$black;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-size: 12px;
+
+  @media print {
+    color: colors.$black;
+  }
+}
+
+.printableBody {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+}
+
+.gatePassForm {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+}
+
+.topInfoRow {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: layout.$spacing-03;
+  padding: layout.$spacing-03;
+  border: 1px solid colors.$black;
+  border-radius: 2px;
+
+  @media print {
+    border: 1px solid colors.$black;
+  }
+}
+
+.secondInfoRow {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: layout.$spacing-03;
+  padding: layout.$spacing-03;
+  border: 1px solid colors.$black;
+  border-radius: 2px;
+
+  @media print {
+    border: 1px solid colors.$black;
+  }
+}
+
+.infoItem,
+.patientField,
+.ageField {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-02;
+}
+
+.paymentSection {
+  padding: layout.$spacing-03;
+  border: 1px solid colors.$black;
+  border-radius: 2px;
+  margin: layout.$spacing-03 0;
+
+  @media print {
+    border: 1px solid colors.$black;
+  }
+}
+
+.sectionTitle {
+  font-weight: 600;
+  color: colors.$black;
+  margin-bottom: layout.$spacing-03;
+  font-size: 11px;
+
+  @media print {
+    color: colors.$black;
+  }
+}
+
+.paymentGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: layout.$spacing-03;
+}
+
+.paymentOption {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-02;
+}
+
+.checkbox {
+  width: 12px;
+  height: 12px;
+  border: 1px solid colors.$black;
+  background-color: colors.$white;
+  flex-shrink: 0;
+}
+
+.optionLabel {
+  color: colors.$black;
+  font-size: 10px;
+}
+
+.signaturesSection {
+  margin-top: layout.$spacing-05;
+  padding-top: layout.$spacing-03;
+  border-top: 1px solid colors.$black;
+}
+
+.signatureBlock {
+  margin-bottom: layout.$spacing-03;
+}
+
+.signatureRow {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  gap: layout.$spacing-03;
+  align-items: center;
+  padding: layout.$spacing-02;
+}
+
+.nameField,
+.signField {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-02;
+}
+
+.signatureLine {
+  border-bottom: 1px solid colors.$black;
+  height: layout.$spacing-04;
+  width: 100%;
+}
+
+.nameValue {
+  color: colors.$black;
+  border-bottom: 1px solid colors.$black;
+  padding: layout.$spacing-01;
+  min-height: layout.$spacing-04;
+  display: flex;
+  align-items: center;
+  font-size: 10px;
+}
+
+.footerNote {
+  margin-top: layout.$spacing-05;
+  padding: layout.$spacing-03;
+  border: 1px solid colors.$black;
+  border-radius: 2px;
+}
+
+.noteText {
+  color: colors.$black;
+  line-height: 1.4;
+  font-size: 10px;
+}
+
+.label {
+  font-weight: 600;
+  color: colors.$black;
+  font-size: 10px;
+  white-space: nowrap;
+}
+
+.value,
+.valueWide {
+  color: colors.$black;
+  border-bottom: 1px solid colors.$black;
+  padding: layout.$spacing-01;
+  min-height: layout.$spacing-04;
+  display: flex;
+  align-items: center;
+  font-size: 10px;
+}
+
+.btnSet {
+  width: 100%;
+  margin-top: layout.$spacing-05;
+}
+
+@media print {
+  body * {
+    visibility: hidden;
+  }
+  .printableContent,
+  .printableContent * {
+    visibility: visible;
+  }
+  .printableContent {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: layout.$spacing-07;
+  }
+}
+
+.footer {
+  margin-top: layout.$spacing-06;
+  padding-top: layout.$spacing-04;
+  border-top: 1px solid colors.$black;
+  text-align: center;
+  page-break-inside: avoid;
+
+  @media print {
+    position: fixed !important;
+    bottom: layout.$spacing-05 !important;
+    left: 0 !important;
+    right: 0 !important;
+    width: 100% !important;
+    margin: 0 !important;
+    padding: layout.$spacing-03 0 !important;
+    background: colors.$white !important;
+    border-top: 0.5pt solid colors.$gray-50 !important;
+    z-index: 1000 !important;
+    box-sizing: border-box !important;
+  }
+}
+
+.footerDetails {
+  margin-top: layout.$spacing-03;
+  padding-top: layout.$spacing-03;
+  border-top: 1px solid colors.$gray-30;
+  font-size: layout.$spacing-02;
+  color: colors.$gray-70;
+  text-align: center;
+  line-height: 1.3;
+
+  div {
+    margin-bottom: layout.$spacing-02;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  @media print {
+    margin: 0 !important;
+    padding: layout.$spacing-02 0 !important;
+    border-top: none !important;
+    font-size: 7pt !important;
+    color: colors.$gray-50 !important;
+    line-height: 1.1 !important;
+
+    div {
+      margin-bottom: layout.$spacing-01 !important;
+      display: inline-block !important;
+
+      &:last-child {
+        margin-bottom: 0 !important;
+      }
+    }
+  }
+}

package/src/routes.json

@@ -33,6 +33,11 @@
         "fullWidth": false
       }
     },
+    {
+      "name": "print-post-mortem-overflow-menu-item",
+      "component": "printPostMortemOverflowMenuItem",
+      "slot": "print-post-mortem-overflow-menu-item-slot"
+    },
     {
       "component": "root",
       "name": "morgue-dashboard-root",
@@ -89,6 +94,16 @@
       "title": "Dispose Deceased Person",
       "type": "other-form"
     }
+  ],
+    "modals": [
+    {
+      "name": "print-confirmation-modal",
+      "component": "printConfirmationModal"
+    },
+    {
+      "name": "autopsy-report-modal",
+      "component": "autopsyReportModal"
+    }
   ],
   "pages": [
     {

package/src/utils/utils.ts

@@ -110,3 +110,9 @@ export const parseDischargeDateTime = (data: {
 
   return dischargeDateTime;
 };
+
+export const documentId = () => {
+  const timestamp = Date.now();
+  const random = Math.random().toString(36).substr(2, 9);
+  return `PM-${timestamp}-${random}`.toUpperCase();
+};

package/src/view-details/panels/attachement.component.tsx

@@ -1,12 +1,26 @@
 import React from 'react';
+import { useParams } from 'react-router-dom';
 import { ExtensionSlot, navigate, usePatient } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
-import { EmptyState, getPatientUuidFromStore } from '@openmrs/esm-patient-common-lib';
-import styles from './panels.scss';
+import { EmptyState } from '@openmrs/esm-patient-common-lib';
+
+interface RouteParams {
+  patientUuid: string;
+  [key: string]: string | undefined;
+}
 
 const AttachmentView: React.FC = () => {
   const { t } = useTranslation();
-  const patientUuid = getPatientUuidFromStore();
+  const { patientUuid } = useParams<RouteParams>();
+
+  if (!patientUuid) {
+    return (
+      <EmptyState
+        displayText={t('noPatientSelected', 'No patient selected')}
+        headerTitle={t('attachments', 'Attachments')}
+      />
+    );
+  }
 
   return (
     <ExtensionSlot