@digihmis/esm-outpatient-app 1.0.0 → 1.0.2

package/src/patient-management/patient-management.component.tsx

@@ -1,97 +1,169 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import styles from './patient-management.scss';
-import { getPatientUuidFromUrl } from './utils';
-import { ExtensionSlot, launchWorkspace, launchWorkspace2, usePatient } from '@openmrs/esm-framework';
 import {
-  Tabs,
-  TabsVertical,
-  TabListVertical,
-  TextInput,
-  Stack,
+  Button,
   Layer,
+  SkeletonText,
   Tab,
-  RadioButtonGroup,
-  RadioButton,
-  Checkbox,
   TabList,
   TabPanel,
   TabPanels,
-  Button,
+  Tabs,
+  Tag,
+  Tile,
 } from '@carbon/react';
-import { AssetMovement } from '@carbon/react/icons';
+import { Calendar, ChartLineData, Medication, Microscope, Stethoscope, type CarbonIconType } from '@carbon/react/icons';
+import {
+  ExtensionSlot,
+  formatDatetime,
+  launchWorkspace,
+  parseDate,
+  usePatient,
+  useVisit,
+} from '@openmrs/esm-framework';
 import PatientBanner from './patient-banner/patient-banner.component';
-import { CardHeader } from '@openmrs/esm-patient-common-lib/src';
+import ClinicalEncountersList from './clinical-encounters.component';
+import { getPatientUuidFromUrl } from './utils';
+import styles from './patient-management.scss';
 
+interface CarePanelTab {
+  key: string;
+  label: string;
+  icon: CarbonIconType;
+  slot: string;
+  emptyTitle: string;
+  emptyBody: string;
+  action?: { label: string; onClick: () => void };
+}
+
+/**
+ * The outpatient patient file: a Carbon care panel. A header with the patient banner, active-visit
+ * status and the Start Consultation action; the vitals header; and a set of contained tabs whose
+ * content comes from extension slots, each with a Carbon empty state until a module fills it.
+ */
 const CarePanel: React.FC = () => {
   const { t } = useTranslation();
   const patientUuid = getPatientUuidFromUrl();
-  const { patient, isLoading, error } = usePatient(patientUuid);
-  const [selectedTabIndex, setSelectedTabIndex] = React.useState(0);
+  const { patient, isLoading } = usePatient(patientUuid);
+  const { activeVisit } = useVisit(patientUuid);
 
-  const handleConsultationStart = (patientUuid: string) => {
-    launchWorkspace('patient-consultation', { patientUuid });
+  const startConsultation = () => {
+    launchWorkspace('form-renderer-workspace', {
+      workspaceTitle: t('clinicalEncounter', 'Clinical encounter'),
+      formId: 'clinical-encounter',
+      patientUuid,
+      visitUuid: activeVisit?.uuid,
+    });
   };
 
+  const tabs: Array<CarePanelTab> = [
+    {
+      key: 'encounter',
+      label: t('clinicalEncounter', 'Clinical encounter'),
+      icon: Stethoscope,
+      slot: 'outpatient-clinical-encounter-slot',
+      emptyTitle: t('noConsultationsTitle', 'No consultations yet'),
+      emptyBody: t('noConsultationsBody', 'Start a consultation to record findings for this visit.'),
+      action: { label: t('startConsultation', 'Start consultation'), onClick: startConsultation },
+    },
+    {
+      key: 'labs',
+      label: t('labResults', 'Lab results'),
+      icon: Microscope,
+      slot: 'outpatient-lab-results-slot',
+      emptyTitle: t('noLabResultsTitle', 'No lab results'),
+      emptyBody: t('noLabResultsBody', 'Laboratory results for this patient will appear here.'),
+    },
+    {
+      key: 'imaging',
+      label: t('imaging', 'Imaging'),
+      icon: ChartLineData,
+      slot: 'outpatient-imaging-slot',
+      emptyTitle: t('noImagingTitle', 'No imaging results'),
+      emptyBody: t('noImagingBody', 'Radiology and imaging results will appear here.'),
+    },
+    {
+      key: 'prescriptions',
+      label: t('prescriptions', 'Prescriptions'),
+      icon: Medication,
+      slot: 'outpatient-prescriptions-slot',
+      emptyTitle: t('noPrescriptionsTitle', 'No prescriptions'),
+      emptyBody: t('noPrescriptionsBody', 'Medications prescribed during this visit will appear here.'),
+    },
+    {
+      key: 'appointments',
+      label: t('appointments', 'Appointments'),
+      icon: Calendar,
+      slot: 'outpatient-appointments-slot',
+      emptyTitle: t('noAppointmentsTitle', 'No appointments'),
+      emptyBody: t('noAppointmentsBody', "The patient's upcoming appointments will appear here."),
+    },
+  ];
+
   return (
-    <>
-      <div className={styles.header}>
-        {patient && <PatientBanner patientUuid={patientUuid} patient={patient} hideActionsOverflow={true} />}
-        <ExtensionSlot name="patient-vitals-header-slot" state={{ patientUuid }} />
-        <Button
-          size="sm"
-          kind="primary"
-          renderIcon={AssetMovement}
-          className={styles.buttonStartConsultation}
-          onClick={() => handleConsultationStart(patientUuid!)}>
-          {t('startConsultation', 'Start Consultation')}
-        </Button>
-      </div>
-      {/* <TabsVertical height="3">
-        <TabListVertical>
-          <Tab>{t('clinicalEncounter', 'Clinical Encounter')}</Tab>
-          <Tab>{t('labResults', 'Laboratory Results')}</Tab>
-          <Tab>{t('procedureResults', 'Procedure Results')}</Tab>
-          <Tab>{t('imagingResults', 'Imaging Results')}</Tab>
-          <Tab>{t('prescriptions', 'Prescriptions')}</Tab>
-          <Tab>{t('appointments', 'Appointments')}</Tab>
-        </TabListVertical>
-        <TabPanels>
-          <TabPanel>Tab Panel 1</TabPanel>
-          <TabPanel>
-            <Layer>
-              <form
-                style={{
-                  margin: '2em',
-                }}>
-                <Stack gap={7}>
-                  <TextInput id="one" labelText="First Name" />
-                  <TextInput id="three" labelText="Middle Initial" />
-                  <TextInput id="two" labelText="Last Name" />
-                  <RadioButtonGroup
-                    defaultSelected="radio-1"
-                    legendText="Radio button heading"
-                    name="formgroup-default-radio-button-group">
-                    <RadioButton id="radio-1" labelText="Option 1" value="radio-1" />
-                    <RadioButton id="radio-2" labelText="Option 2" value="radio-2" />
-                    <RadioButton id="radio-3" labelText="Option 3" value="radio-3" />
-                  </RadioButtonGroup>
-                  <Checkbox id="checkbox-label-1" labelText="Checkbox one" />
-                  <Checkbox id="checkbox-label-2" labelText="Checkbox two" />
-                  <Button>Submit</Button>
-                </Stack>
-              </form>
-            </Layer>
-          </TabPanel>
-          <TabPanel>Tab Panel 3</TabPanel>
-          <TabPanel>Tab Panel 4</TabPanel>
-          <TabPanel>Tab Panel 5</TabPanel>
-          <TabPanel>Tab Panel 6</TabPanel>
-          <TabPanel>Tab Panel 7</TabPanel>
-        </TabPanels>
-      </TabsVertical> */}
-    </>
+    <div className={styles.container}>
+      <Layer>
+        <Tile className={styles.headerCard}>
+          {isLoading ? (
+            <SkeletonText heading width="50%" />
+          ) : (
+            patient && <PatientBanner patientUuid={patientUuid} patient={patient} hideActionsOverflow />
+          )}
+
+        </Tile>
+      </Layer>
+
+      <ExtensionSlot name="patient-vitals-header-slot" state={{ patientUuid }} className={styles.vitals} />
+
+      <Layer className={styles.tabsCard}>
+        <Tabs>
+          <TabList aria-label={t('carePanel', 'Care panel')} contained>
+            {tabs.map((tab) => (
+              <Tab key={tab.key} renderIcon={tab.icon}>
+                {tab.label}
+              </Tab>
+            ))}
+          </TabList>
+          <TabPanels>
+            {tabs.map((tab) => (
+              <TabPanel key={tab.key} className={styles.tabPanel}>
+                {tab.key === 'encounter' ? (
+                  <ClinicalEncountersList patientUuid={patientUuid} onStartConsultation={startConsultation} />
+                ) : (
+                  <>
+                    <ExtensionSlot name={tab.slot} state={{ patientUuid, visitUuid: activeVisit?.uuid }} />
+                    <EmptyState icon={tab.icon} title={tab.emptyTitle} body={tab.emptyBody} action={tab.action} />
+                  </>
+                )}
+              </TabPanel>
+            ))}
+          </TabPanels>
+        </Tabs>
+      </Layer>
+    </div>
   );
 };
 
+interface EmptyStateProps {
+  icon: CarbonIconType;
+  title: string;
+  body: string;
+  action?: { label: string; onClick: () => void };
+}
+
+const EmptyState: React.FC<EmptyStateProps> = ({ icon: Icon, title, body, action }) => (
+  <Layer>
+    <Tile className={styles.emptyTile}>
+      <Icon size={32} className={styles.emptyIcon} />
+      <p className={styles.emptyTitle}>{title}</p>
+      <p className={styles.emptyBody}>{body}</p>
+      {action && (
+        <Button kind="ghost" size="sm" onClick={action.onClick}>
+          {action.label}
+        </Button>
+      )}
+    </Tile>
+  </Layer>
+);
+
 export default CarePanel;

package/src/patient-management/patient-management.scss

@@ -1,30 +1,191 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '@carbon/colors';
 
-.header {
-  margin-top: layout.$spacing-04;
+.container {
+  padding: layout.$spacing-05;
+  margin: 0 auto;
 }
 
-:global(.cds--css-grid) {
-  --cds-grid-gutter-start: calc(var(--cds-grid-gutter) / 2);
-  --cds-grid-gutter-end: calc(var(--cds-grid-gutter) / 2);
-  --cds-grid-column-hang: calc(var(--cds-grid-gutter) / 2);
-  grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
-  width: 100%;
-  max-width: 150rem;
+/* ---- Header card: banner + visit status + primary action ---- */
+.headerCard {
+  padding: layout.$spacing-05;
+  margin-bottom: layout.$spacing-05;
+}
+
+.actionBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: layout.$spacing-04;
+  margin-top: layout.$spacing-05;
+  padding-top: layout.$spacing-05;
+  border-top: 1px solid var(--cds-border-subtle-01);
+}
+
+.visitTag {
+  margin: 0;
+}
+
+.vitals {
+  display: block;
+  margin-bottom: layout.$spacing-05;
+}
+
+/* ---- Tabs card ---- */
+.tabsCard {
+  border: 1px solid var(--cds-border-subtle);
+}
+
+.tabPanel {
   padding: 0;
-  margin-left: 0;
-  margin-right: 0;
+}
+
+/* ---- Empty state inside each tab ---- */
+.emptyTile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  min-height: 14rem;
+  padding: layout.$spacing-10 layout.$spacing-05;
+}
+
+.emptyIcon {
+  color: var(--cds-icon-secondary);
+  margin-bottom: layout.$spacing-04;
+}
+
+.emptyTitle {
+  @include type.type-style('heading-compact-01');
+  color: var(--cds-text-primary);
+  margin-bottom: layout.$spacing-02;
+}
+
+.emptyBody {
+  @include type.type-style('body-compact-01');
+  color: var(--cds-text-secondary);
+  max-width: 24rem;
+  margin-bottom: layout.$spacing-05;
+}
+
+/* Responsive: stack the action bar on narrow / tablet layouts (Carbon md breakpoint = 42rem) */
+@media (max-width: 42rem) {
+  .actionBar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .actionBar :global(.cds--btn) {
+    width: 100%;
+    max-inline-size: none;
+    justify-content: space-between;
+  }
+}
+
+/* ---------- Clinical encounters list ---------- */
+
+.encounterList {
+  display: flex;
+  flex-direction: column;
+}
+
+.encounterListHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+}
+
+.encounterCount {
+  @include type.type-style('label-01');
+  color: var(--cds-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.encounterTitle {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-02;
+}
+
+.encounterDate {
+  @include type.type-style('heading-compact-01');
+  color: var(--cds-text-primary);
+}
+
+.encounterProvider {
+  @include type.type-style('label-01');
+  color: var(--cds-text-secondary);
+}
+
+.detail {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+  padding: layout.$spacing-03 0;
+}
+
+.detailSection {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+}
+
+.detailLabel {
+  @include type.type-style('label-01');
+  color: var(--cds-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  margin: 0;
+}
+
+.tagRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: layout.$spacing-03;
+}
+
+.obsGrid {
   display: grid;
+  grid-template-columns: minmax(10rem, 18rem) 1fr;
+  gap: layout.$spacing-03 layout.$spacing-05;
+  margin: 0;
 }
-:global(.-esm-outpatient__card-header__desktopHeader___Qe2fu),
-:global(.-esm-outpatient__card-header__tabletHeader___gFxMA) {
-  // background-color: #f4f4f4 !important; // Your desired color
-  padding-bottom: 1rem;
+
+.obsRow {
+  display: contents;
 }
-:global(.cds--tabs.cds--tabs--vertical .cds--tabs__nav-item.cds--tabs__nav-item--selected) {
-  box-shadow: inset 3px 0 0 0 var(--cds-border-interactive, #4a90b8);
-  border-left: none;
-  border-right: none;
+
+.obsName {
+  @include type.type-style('body-compact-01');
+  color: var(--cds-text-secondary);
+}
+
+.obsValue {
+  @include type.type-style('body-compact-01');
+  color: var(--cds-text-primary);
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.orderList {
+  margin: 0;
+  padding-left: layout.$spacing-05;
+  @include type.type-style('body-compact-01');
+  color: var(--cds-text-primary);
+}
+
+.encounterActions {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+}
+
+.rowActionCell {
+  text-align: right;
+  width: 3rem;
 }

package/src/routes.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.openmrs.org/routes.schema.json",
   "backendDependencies": {
     "fhir2": ">=1.2",
-    "webservices.rest": "^2.24.0"
+    "webservices.rest": ">=2.24.0"
   },
   "extensions": [
     {
@@ -47,9 +47,9 @@
     },
     {
       "name": "care-panel-history",
-        "slot": "outpatient-file-dashboard-slot",
+      "slot": "outpatient-file-dashboard-slot",
       "component": "carePanel"
     }
   ],
   "workspaces": []
-}
+}