@kenyaemr/esm-ward-app 8.1.2-pre.214 → 8.5.1-pre.18

package/src/ward-patients/discharge-in-patients.tsx

@@ -0,0 +1,183 @@
+import {
+  OverflowMenu,
+  OverflowMenuItem,
+  DataTable,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Pagination,
+} from '@carbon/react';
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { EmptyState } from './table-state-components';
+import {
+  formatDatetime,
+  launchWorkspace,
+  type OpenmrsResource,
+  parseDate,
+  useAppContext,
+  useConfig,
+  usePagination,
+} from '@openmrs/esm-framework';
+import { type WardPatient, type WardViewContext } from '../types';
+import { bedLayoutToBed, getOpenmrsId } from '../ward-view/ward-view.resource';
+import dayjs from 'dayjs';
+import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+import { type WardConfigObject } from '../config-schema';
+
+const DischargeInPatients = () => {
+  const { t } = useTranslation();
+  const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
+  const { bedLayouts, wardAdmittedPatientsWithBed, isLoading } = wardPatientGroupDetails ?? {};
+  const config = useConfig<WardConfigObject>();
+  const headers = [
+    { key: 'admissionDate', header: t('admissionDate', 'Admission Date') },
+    { key: 'idNumber', header: t('idNumber', 'ID Number') },
+    { key: 'name', header: t('name', 'Name') },
+    { key: 'gender', header: t('gender', 'Gender') },
+    { key: 'age', header: t('age', 'Age') },
+    { key: 'bedNumber', header: t('bedNumber', 'Bed Number') },
+    { key: 'daysAdmitted', header: t('durationOnWard', 'Duration on Ward') },
+    { key: 'action', header: t('action', 'Action') },
+  ];
+
+  const patients = useMemo(() => {
+    return (
+      bedLayouts
+        ?.map((bedLayout) => {
+          const { patients } = bedLayout;
+          const bed = bedLayoutToBed(bedLayout);
+          const wardPatients: WardPatient[] = patients.map((patient): WardPatient => {
+            const inpatientAdmission = wardAdmittedPatientsWithBed?.get(patient.uuid);
+            if (inpatientAdmission) {
+              const { patient, visit, currentInpatientRequest } = inpatientAdmission;
+              return { patient, visit, bed, inpatientAdmission, inpatientRequest: currentInpatientRequest || null };
+            } else {
+              // for some reason this patient is in a bed but not in the list of admitted patients, so we need to use the patient data from the bed endpoint
+              return {
+                patient: patient,
+                visit: null,
+                bed,
+                inpatientAdmission: null, // populate after BED-13
+                inpatientRequest: null,
+              };
+            }
+          });
+          return wardPatients;
+        })
+        ?.flat() ?? []
+    ).filter((pat) => {
+      const noteEncounter = pat?.visit?.encounters?.find(
+        (encounter) => encounter.encounterType?.uuid === config.doctorsnoteEncounterTypeUuid,
+      );
+      if (!noteEncounter) return false;
+      const obs = noteEncounter.obs.find((ob) => ob.concept.uuid === config.referralsConceptUuid);
+      if (!obs) return false;
+      const isDischargedIn = [config.referringToAnotherFacilityConceptUuid, config.dischargeHomeConceptUuid].includes(
+        (obs.value as OpenmrsResource).uuid,
+      );
+      return isDischargedIn === true;
+    });
+  }, [bedLayouts, wardAdmittedPatientsWithBed, config]);
+
+  const [pageSize, setPageSize] = useState(5);
+  const { paginated, results, totalPages, currentPage, goTo } = usePagination(patients, pageSize);
+  const { pageSizes } = usePaginationInfo(pageSize, totalPages, currentPage, results.length);
+
+  const tableRows = useMemo(() => {
+    return results.map((patient, index) => {
+      const { encounterAssigningToCurrentInpatientLocation } = patient.inpatientAdmission ?? {};
+
+      const admissionDate = encounterAssigningToCurrentInpatientLocation?.encounterDatetime
+        ? formatDatetime(parseDate(encounterAssigningToCurrentInpatientLocation!.encounterDatetime!))
+        : '--';
+      const daysAdmitted = encounterAssigningToCurrentInpatientLocation?.encounterDatetime
+        ? dayjs(encounterAssigningToCurrentInpatientLocation?.encounterDatetime).diff(dayjs(), 'days')
+        : '--';
+      return {
+        id: patient.patient?.uuid ?? index,
+        admissionDate,
+        idNumber: getOpenmrsId(patient.patient?.identifiers ?? []) ?? '--',
+        name: patient.patient?.person?.display ?? '--',
+        gender: patient.patient?.person?.gender ?? '--',
+        age: patient.patient?.person?.age ?? '--',
+        bedNumber: patient.bed?.bedNumber ?? '--',
+        daysAdmitted,
+        action: (
+          <OverflowMenu size={'sm'} flipped>
+            <OverflowMenuItem itemText={t('goToBilling', 'Go to Billing')} onClick={() => {}} />
+            <OverflowMenuItem itemText={t('waivePatient', 'Waive Patient')} onClick={() => {}} />
+            <OverflowMenuItem itemText={t('patientAbscondend', 'Patient Absconded')} onClick={() => {}} />
+            <OverflowMenuItem
+              itemText={t('discharge', 'Discharge')}
+              onClick={() => {
+                launchWorkspace('patient-discharge-workspace', {
+                  wardPatient: patient,
+                  patientUuid: patient.patient.uuid,
+                  formUuid: config.inpatientDischargeFormUuid,
+                });
+              }}
+            />
+          </OverflowMenu>
+        ),
+      };
+    });
+  }, [results, config, t]);
+
+  if (!patients.length) return <EmptyState message={t('noDischargeInpatients', 'No Discharge in patients')} />;
+
+  return (
+    <DataTable rows={tableRows} headers={headers} isSortable useZebraStyles>
+      {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getCellProps }) => (
+        <TableContainer>
+          <Table {...getTableProps()} aria-label="sample table">
+            <TableHead>
+              <TableRow>
+                {headers.map((header) => (
+                  <TableHeader
+                    key={header.key}
+                    {...getHeaderProps({
+                      header,
+                    })}>
+                    {header.header}
+                  </TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row) => {
+                return (
+                  <TableRow key={row.id} {...getRowProps({ row })}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id} {...getCellProps({ cell })}>
+                        {cell.value}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+          {paginated && !isLoading && (
+            <Pagination
+              page={currentPage}
+              pageSize={pageSize}
+              pageSizes={pageSizes}
+              totalItems={(patients ?? []).length}
+              onChange={({ page, pageSize }) => {
+                goTo(page);
+                setPageSize(pageSize);
+              }}
+            />
+          )}
+        </TableContainer>
+      )}
+    </DataTable>
+  );
+};
+
+export default DischargeInPatients;

package/src/ward-patients/discharge-patients.tsx

@@ -0,0 +1,129 @@
+import {
+  DataTable,
+  DataTableSkeleton,
+  OverflowMenu,
+  OverflowMenuItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Pagination,
+} from '@carbon/react';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { EmptyState, ErrorState } from './table-state-components';
+import { useIpdDischargeEncounter } from '../hooks/useIpdDischargeEncounter';
+import { formatDatetime, parseDate } from '@openmrs/esm-framework';
+import { PatientAdmissionDateCell, PatientAgeCell, PatientDayInWardCell, PatientGenderCell } from './patient-cells';
+
+const DischargePatients = () => {
+  const { t } = useTranslation();
+  const {
+    encounters,
+    error,
+    isLoading,
+    paginated,
+    currentPage,
+    pageSizes,
+    goTo,
+    currPageSize,
+    setCurrPageSize,
+    totalCount,
+  } = useIpdDischargeEncounter();
+  const headers = [
+    { key: 'admissionDate', header: t('admissionDate', 'Admission Date') },
+    { key: 'dischargeDate', header: t('dischargeDate', 'Discharge Date') },
+    { key: 'idNumber', header: t('idNumber', 'ID Number') },
+    { key: 'name', header: t('name', 'Name') },
+    { key: 'gender', header: t('gender', 'Gender') },
+    { key: 'age', header: t('age', 'Age') },
+    { key: 'bedNumber', header: t('bedNumber', 'Bed Number') },
+    { key: 'daysAdmitted', header: t('durationOnWard', 'Duration on Ward') },
+    { key: 'action', header: t('action', 'Action') },
+  ];
+  const tableRows = useMemo(() => {
+    return encounters.map((encounter, index) => {
+      return {
+        id: encounter.uuid,
+        dischargeDate: encounter.encounterDateTime ? formatDatetime(parseDate(encounter.encounterDateTime)) : '--',
+        admissionDate: <PatientAdmissionDateCell patientUuid={encounter.patient.uuid} encounterUuid={encounter.uuid} />,
+        idNumber: encounter.patient.openmrsId,
+        name: encounter.patient.name,
+        gender: <PatientGenderCell patientUuid={encounter.patient.uuid} />,
+        age: <PatientAgeCell patientUuid={encounter.patient.uuid} />,
+        bedNumber: '--',
+        daysAdmitted: <PatientDayInWardCell patientUuid={encounter.patient.uuid} encounterUuid={encounter.uuid} />,
+        action: (
+          <OverflowMenu size={'sm'} flipped>
+            <OverflowMenuItem itemText={t('dischargeSummary', 'Discharge Summary')} onClick={() => {}} />
+            <OverflowMenuItem itemText={t('gatePass', 'Gate Pass')} onClick={() => {}} />
+          </OverflowMenu>
+        ),
+      };
+    });
+  }, [encounters, t]);
+
+  if (isLoading) return <DataTableSkeleton />;
+  if (error) return <ErrorState error={error} />;
+
+  if (!encounters?.length) return <EmptyState message={t('noDischargepatients', 'No Discharge patients')} />;
+
+  return (
+    <DataTable rows={tableRows} headers={headers} isSortable useZebraStyles>
+      {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getCellProps }) => (
+        <TableContainer>
+          <Table {...getTableProps()} aria-label="sample table">
+            <TableHead>
+              <TableRow>
+                {headers.map((header) => (
+                  <TableHeader
+                    key={header.key}
+                    {...getHeaderProps({
+                      header,
+                    })}>
+                    {header.header}
+                  </TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row) => {
+                return (
+                  <TableRow key={row.id} {...getRowProps({ row })}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id} {...getCellProps({ cell })}>
+                        {cell.value}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+          {paginated && !isLoading && (
+            <Pagination
+              forwardText=""
+              backwardText=""
+              page={currentPage}
+              pageSize={currPageSize}
+              pageSizes={pageSizes}
+              totalItems={totalCount}
+              size={'sm'}
+              onChange={({ page: newPage, pageSize }) => {
+                if (newPage !== currentPage) {
+                  goTo(newPage);
+                }
+                setCurrPageSize(pageSize);
+              }}
+            />
+          )}
+        </TableContainer>
+      )}
+    </DataTable>
+  );
+};
+
+export default DischargePatients;

package/src/ward-patients/patient-cells.tsx

@@ -0,0 +1,75 @@
+import { InlineLoading } from '@carbon/react';
+import { formatDatetime, parseDate, useConfig, usePatient } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import React, { type FC, useMemo } from 'react';
+import { useEncounterDetails } from '../hooks/useIpdDischargeEncounter';
+import { type WardConfigObject } from '../config-schema';
+
+type CellProps = {
+  patientUuid: string;
+};
+
+export const PatientAgeCell: FC<CellProps> = ({ patientUuid }) => {
+  const { isLoading, patient, error } = usePatient(patientUuid);
+  const age = useMemo(() => {
+    if (!patient?.birthDate) return '--';
+    return dayjs().diff(dayjs(patient.birthDate), 'years');
+  }, [patient?.birthDate]);
+  if (isLoading) return <InlineLoading />;
+  if (error) return <p>--</p>;
+  return <div>{age}</div>;
+};
+
+export const PatientGenderCell: FC<CellProps> = ({ patientUuid }) => {
+  const { isLoading, patient, error } = usePatient(patientUuid);
+
+  if (isLoading) return <InlineLoading />;
+  if (error) return <p>--</p>;
+  return <div>{patient.gender}</div>;
+};
+
+type PatientAdmissionCellProps = CellProps & {
+  encounterUuid: string;
+};
+
+export const PatientAdmissionDateCell: FC<PatientAdmissionCellProps> = ({ encounterUuid }) => {
+  const { encounter, error, isLoading } = useEncounterDetails(encounterUuid);
+  const { admissionEncounterTypeUuid } = useConfig<WardConfigObject>();
+
+  const admissionDate = useMemo(() => {
+    const admisionEncounter = encounter?.visit?.encounters?.find(
+      (e) => e.encounterType.uuid === admissionEncounterTypeUuid,
+    );
+    if (!admisionEncounter || !admisionEncounter.encounterDatetime) return '--';
+    return formatDatetime(parseDate(admisionEncounter.encounterDatetime));
+  }, [encounter, admissionEncounterTypeUuid]);
+  if (isLoading) return <InlineLoading />;
+  if (error) return <p>--</p>;
+
+  return <p>{admissionDate}</p>;
+};
+
+export const PatientDayInWardCell: FC<PatientAdmissionCellProps> = ({ encounterUuid }) => {
+  const { encounter, error, isLoading } = useEncounterDetails(encounterUuid);
+  const { admissionEncounterTypeUuid } = useConfig<WardConfigObject>();
+  const daysInWard = useMemo(() => {
+    const admisionEncounter = encounter?.visit?.encounters?.find(
+      (e) => e.encounterType.uuid === admissionEncounterTypeUuid,
+    );
+    if (!admisionEncounter || !admisionEncounter.encounterDatetime) return '--';
+    const dischargeEncounter = encounter?.visit?.encounters?.find((e) => e.uuid === encounterUuid);
+    if (!dischargeEncounter || !dischargeEncounter.encounterDatetime) return '--';
+
+    const admissionDate = dayjs(admisionEncounter.encounterDatetime).startOf('day');
+    const dischargeDate = dischargeEncounter.encounterDatetime
+      ? dayjs(dischargeEncounter.encounterDatetime).startOf('day')
+      : dayjs().startOf('day');
+    const daysAdmitted =
+      admissionDate.isValid() && dischargeDate.isValid() ? Math.abs(dischargeDate.diff(admissionDate, 'days')) : '--';
+    return daysAdmitted;
+  }, [encounter, encounterUuid, admissionEncounterTypeUuid]);
+  if (isLoading) return <InlineLoading />;
+  if (error) return <p>--</p>;
+
+  return <p>{daysInWard}</p>;
+};

package/src/ward-patients/table-state-components.tsx

@@ -0,0 +1,40 @@
+// Desclaimer: not using openmrs provided (EmptyState,ErrorState) to avoid repeated header titles and customize the message since provided ones are contexted to patient chart
+
+import { Tile } from '@carbon/react';
+import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+import React, { type FC } from 'react';
+import styles from './ward-patient.scss';
+import { useTranslation } from 'react-i18next';
+type EmptyStateProps = {
+  message?: string;
+};
+
+export const EmptyState: FC<EmptyStateProps> = ({ message }) => {
+  return (
+    <Tile className={styles.empty}>
+      <EmptyDataIllustration />
+      <p>{message}</p>
+    </Tile>
+  );
+};
+type ErrorStateProps = {
+  error?: Error;
+};
+
+export const ErrorState: FC<ErrorStateProps> = ({ error }) => {
+  const { t } = useTranslation();
+  return (
+    <Tile className={styles.error}>
+      <strong>
+        {t('error', 'Error')} {`${(error as any)?.response?.status}: `}
+        {(error as any)?.response?.statusText}
+      </strong>
+      <p>
+        {t(
+          'errorCopy',
+          'Sorry, there was a problem displaying this information. You can try to reload this page, or contact the site administrator and quote the error code above.',
+        )}
+      </p>{' '}
+    </Tile>
+  );
+};

package/src/ward-patients/ward-patient.scss

@@ -0,0 +1,24 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+@use '@carbon/colors';
+
+.empty {
+    justify-content: center;
+    align-items: center;
+    gap: layout.$spacing-03;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    color: $text-02;
+    height: 200px;
+}
+
+.error {
+    justify-content: center;
+    align-items: center;
+    gap: layout.$spacing-03;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    height: 200px;
+}

package/src/ward-patients/ward-patients-table.tsx

@@ -0,0 +1,38 @@
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import AdmittedPatients from './admitted-patients';
+import AwaitingAdmissionPatients from './awaiting-admission-patients';
+import DischargeInPatients from './discharge-in-patients';
+import DischargePatients from './discharge-patients';
+
+const WardPatientsTable = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Tabs onTabCloseRequest={() => {}}>
+      <TabList scrollDebounceWait={200}>
+        <Tab>{t('awaitingAdmision', 'Awaiting Admission')}</Tab>
+        <Tab>{t('admitted', 'Admitted')}</Tab>
+        <Tab>{t('dischargeIn', 'Discharge In')}</Tab>
+        <Tab>{t('discharge', 'Discharge')}</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>
+          <AwaitingAdmissionPatients />
+        </TabPanel>
+        <TabPanel>
+          <AdmittedPatients />
+        </TabPanel>
+        <TabPanel>
+          <DischargeInPatients />
+        </TabPanel>
+        <TabPanel>
+          <DischargePatients />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export default WardPatientsTable;

package/src/ward-view/default-ward/default-ward-patient-card-header.component.tsx

@@ -1,14 +1,14 @@
-import classNames from 'classnames';
 import React from 'react';
-import WardPatientAge from '../../ward-patient-card/row-elements/ward-patient-age';
-import WardPatientBedNumber from '../../ward-patient-card/row-elements/ward-patient-bed-number';
-import WardPatientIdentifier from '../../ward-patient-card/row-elements/ward-patient-identifier';
-import WardPatientName from '../../ward-patient-card/row-elements/ward-patient-name';
-import WardPatientTimeOnWard from '../../ward-patient-card/row-elements/ward-patient-time-on-ward';
-import WardPatientTimeSinceAdmission from '../../ward-patient-card/row-elements/ward-patient-time-since-admission';
-import styles from '../../ward-patient-card/ward-patient-card.scss';
 import { type WardPatientCardType } from '../../types';
+import classNames from 'classnames';
+import WardPatientAge from '../../ward-patient-card/row-elements/ward-patient-age.component';
+import WardPatientBedNumber from '../../ward-patient-card/row-elements/ward-patient-bed-number.component';
+import WardPatientIdentifier from '../../ward-patient-card/row-elements/ward-patient-identifier.component';
+import WardPatientName from '../../ward-patient-card/row-elements/ward-patient-name.component';
+import WardPatientTimeOnWard from '../../ward-patient-card/row-elements/ward-patient-time-on-ward.component';
+import WardPatientTimeSinceAdmission from '../../ward-patient-card/row-elements/ward-patient-time-since-admission.component';
 import WardPatientGender from '../../ward-patient-card/row-elements/ward-patient-gender.component';
+import styles from '../../ward-patient-card/ward-patient-card.scss';
 
 const DefaultWardPatientCardHeader: WardPatientCardType = ({ wardPatient }) => {
   const { patient, bed, inpatientAdmission } = wardPatient;

package/src/ward-view/default-ward/default-ward-pending-patients.component.tsx

@@ -1,10 +1,10 @@
-import { ErrorState, useAppContext } from '@openmrs/esm-framework';
 import React from 'react';
+import { ErrorState, useAppContext } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
-import { type WardViewContext, type InpatientRequest } from '../../types';
+import { type InpatientRequest, type WardViewContext } from '../../types';
 import AdmissionRequestCard from '../../ward-workspace/admission-request-card/admission-request-card.component';
-import WardPatientSkeletonText from '../../ward-patient-card/row-elements/ward-patient-skeleton-text';
 import AdmissionRequestNoteRow from '../../ward-patient-card/card-rows/admission-request-note-row.component';
+import WardPatientSkeletonText from '../../ward-patient-card/row-elements/ward-patient-skeleton-text.component';
 
 function DefaultWardPendingPatients() {
   const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};

package/src/ward-view/default-ward/default-ward-view.component.tsx

@@ -1,20 +1,41 @@
 import { useDefineAppContext } from '@openmrs/esm-framework';
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useWardSummaryMetrics } from '../../hooks/useSummaryMetrics';
+import useWardLocation from '../../hooks/useWardLocation';
 import { useWardPatientGrouping } from '../../hooks/useWardPatientGrouping';
 import { type WardViewContext } from '../../types';
-import WardViewHeader from '../../ward-view-header/ward-view-header.component';
+import WardPatientsTable from '../../ward-patients/ward-patients-table';
+import Filters from '../linelist-wards/Filters';
+import Header from '../linelist-wards/Header';
+import Metrics from '../linelist-wards/Metrics';
+import WardViewContentWrapper from '../ward-view-content-wrapper';
 import Ward from '../ward.component';
 import DefaultWardBeds from './default-ward-beds.component';
+import DefaultWardPatientCardHeader from './default-ward-patient-card-header.component';
 import DefaultWardPendingPatients from './default-ward-pending-patients.component';
 import DefaultWardUnassignedPatients from './default-ward-unassigned-patients.component';
-import DefaultWardPatientCardHeader from './default-ward-patient-card-header.component';
 
 const DefaultWardView = () => {
+  const { location } = useWardLocation();
+  const { t } = useTranslation();
   const wardPatientGroupDetails = useWardPatientGrouping();
+  const summary = useWardSummaryMetrics();
   useDefineAppContext<WardViewContext>('ward-view-context', {
     wardPatientGroupDetails,
-    WardPatientHeader: DefaultWardPatientCardHeader
+    WardPatientHeader: DefaultWardPatientCardHeader,
   });
+  const cards = useMemo(() => {
+    return [
+      {
+        label: t('awaitingAdmission', 'Awaiting Admission'),
+        value: `${summary.awaitingAdmissionPatient}`,
+      },
+      { label: t('admitted', 'Admitted'), value: `${summary.admittedPatients}` },
+      { label: t('dischargIn', 'Discaharg In'), value: `${summary.dischargeInPatients}` },
+      { label: t('discharge', 'Discharge'), value: `${summary.dischargedPatients}` },
+    ];
+  }, [t, summary]);
 
   const wardBeds = <DefaultWardBeds />;
   const wardUnassignedPatients = <DefaultWardUnassignedPatients />;
@@ -22,8 +43,14 @@ const DefaultWardView = () => {
 
   return (
     <>
-      <WardViewHeader {...{ wardPendingPatients }} />
-      <Ward {...{ wardBeds, wardUnassignedPatients }} />
+      <Header title={location.display} />
+      <Filters />
+      <Metrics metrics={cards} />
+      {/* <WardViewHeader {...{ wardPendingPatients }} /> */}
+      <WardViewContentWrapper
+        cardView={<Ward {...{ wardBeds, wardUnassignedPatients }} />}
+        tableView={<WardPatientsTable />}
+      />
     </>
   );
 };

package/src/ward-view/linelist-wards/Filters.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import styles from './linelist-wards.scss';
+import { DatePicker, DatePickerInput } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+const Filters = () => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.filtersContainer}>
+      <div>
+        <DatePicker datePickerType="single" onChange={() => {}} onClose={() => {}} onOpen={() => {}}>
+          <DatePickerInput
+            id="date-picker-single"
+            labelText={t('date', 'Date')}
+            onChange={() => {}}
+            onClose={() => {}}
+            onOpen={() => {}}
+            placeholder="mm/dd/yyyy"
+          />
+        </DatePicker>
+      </div>
+    </div>
+  );
+};
+
+export default Filters;

package/src/ward-view/linelist-wards/Header.tsx

@@ -0,0 +1,27 @@
+import { Calendar, Location, LocationCompany, UserFollow } from '@carbon/react/icons';
+import { formatDate, HomePictogram, useSession } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './linelist-wards.scss';
+
+interface HeaderProps {
+  title: string;
+}
+
+const Header: React.FC<HeaderProps> = ({ title }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.header} id="admin-header">
+      <div className={styles.leftJustifiedItems}>
+        <HomePictogram className={styles.icon} />
+        <div className={styles.pageLabels}>
+          <p>{t('locations', 'Locations')}</p>
+          <p className={styles.pageName}>{title}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;