@kenyaemr/esm-patient-clinical-view-app 5.4.2-pre.2668 → 5.4.2-pre.2676

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[],"extensions":[{"name":"hiv-care-and-treatment-dashboard-link","component":"hivCareAndTreatmentLink","slot":"patient-chart-dashboard-slot","meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-hiv-care-and-treatment-dashboard-slot","path":"hiv-care-and-treatment-dashboard","layoutMode":"anchored"}},{"name":"hiv-care-and-treatment-dashboard","slot":"patient-chart-hiv-care-and-treatment-dashboard-slot","component":"hivCareAndTreatment","order":0,"online":true,"offline":false},{"name":"relationship-dashboard-link","component":"relationshipsLink","order":24,"online":true,"offline":false,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-relationship-slot","path":"relationships","layoutMode":"anchored"}},{"name":"relationship-dashboard","slot":"patient-chart-relationship-slot","component":"relationships","order":0,"online":true,"offline":false},{"name":"clinical-encounter-dashboard-link","component":"clinicalEncounterLink","order":25,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-clinical-encounter-slot","path":"clinical-encounter","layoutMode":"anchored"}},{"name":"clinical-encounter-dashboard","slot":"patient-chart-clinical-encounter-slot","component":"clinicalEncounter","order":0,"online":true,"offline":false},{"name":"maternal-and-child-health-dashboard-link","component":"maternalAndChildHealthDashboardLink","order":26,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-maternal-and-child-health-slot","path":"maternal-and-child-health","layoutMode":"anchored"}},{"name":"maternal-and-child-health-dashboard","slot":"patient-chart-maternal-and-child-health-slot","component":"maternalAndChildHealthDashboard","order":0,"online":true,"offline":false},{"name":"maternal-and-child-health-partograph","slot":"maternal-and-child-health-partograph-slot","component":"partograph","order":0,"online":true,"offline":false},{"name":"contact-list-dashboard-link","component":"contactListLink","order":27,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-contact-list-slot","path":"contact-list","layoutMode":"anchored"}},{"name":"contact-list-dashboard","slot":"patient-chart-contact-list-slot","component":"contactList","order":0,"online":true,"offline":false},{"component":"caseManagementDashboardLink","name":"case-management-dashboard-link","meta":{"name":"case-management","title":"Case Management","slot":"case-management-dashboard-slot","path":"/case-management"}},{"name":"in-patient-dashboard-link","component":"inPatientChartLink","order":7,"meta":{"slot":"patient-chart-in-patient-dashboard-slot","path":"in-patient","layoutMode":"anchored","columns":1,"columnSpan":1}},{"name":"in-patient-dashboard","slot":"patient-chart-in-patient-dashboard-slot","component":"inPatientChartDashboard","meta":{"fullWidth":false}},{"name":"wrap-component-view","slot":"case-management-dashboard-slot","component":"wrapComponent","order":2,"online":true,"offline":false},{"name":"case-encounter-link","component":"caseEncounterDashboardLink","order":14,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-case-encounter-slot","path":"case-management-encounters","layoutMode":"anchored"}},{"name":"case-encounter-table","slot":"patient-chart-case-encounter-slot","component":"caseEncounterTable","order":0,"online":true,"offline":false},{"component":"peerCalendarDashboardLink","name":"peer-calendar-dashboard-link","meta":{"name":"peer-calendar","title":"Peer Calendar","slot":"peer-calendar-dashboard-slot","path":"peer-management"}},{"name":"peer-calendar","slot":"peer-calendar-dashboard-slot","component":"peerCalendar","order":0,"online":true,"offline":false},{"name":"special-clinics-dashboard-link","component":"specialClinicsDashboardLink","order":15,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-special-clinics-slot","path":"special-clinics","layoutMode":"anchored"}},{"name":"special-clinics-dashboard","slot":"patient-chart-special-clinics-slot","component":"specialClinicsDashboard","order":0,"online":true,"offline":false}],"modals":[{"name":"birth-date-calculator","component":"birthDateCalculator"},{"name":"relationship-delete-confirm-dialog","component":"relationshipDeleteConfirmialog"},{"name":"end-relationship-dialog","component":"endRelationshipModal"}],"workspaces":[{"name":"contact-list-form","component":"contactListForm","title":"Contact List Form","type":"form"},{"name":"case-management-form","component":"caseManagementForm","title":"Case Management Form","type":"form"},{"name":"family-relationship-form","component":"familyRelationshipForm","title":"Family Relationship Form","type":"form"},{"name":"peers-form","component":"peersForm","title":"Add New Peer","type":"form"},{"name":"kenyaemr-cusom-form-entry-workspace","component":"peerCalendarFormEntry","title":"KVP Peer Educator Outreach Calendar","type":"form","width":"extra-wide","canMaximize":true,"canHide":true},{"name":"contact-list-update-form","component":"contactListUpdateForm","title":"Contact List Update Form","type":"form"},{"name":"other-relationship-form","component":"otherRelationshipsForm","title":"Other Relationships Form","type":"form"},{"name":"end-relationship-form","component":"endRelationshipWorkspace","title":"Discontinue relationship form","type":"form"}],"version":"5.4.2-pre.2668"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[],"extensions":[{"name":"hiv-care-and-treatment-dashboard-link","component":"hivCareAndTreatmentLink","slot":"patient-chart-dashboard-slot","meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-hiv-care-and-treatment-dashboard-slot","path":"hiv-care-and-treatment-dashboard","layoutMode":"anchored"}},{"name":"hiv-care-and-treatment-dashboard","slot":"patient-chart-hiv-care-and-treatment-dashboard-slot","component":"hivCareAndTreatment","order":0,"online":true,"offline":false},{"name":"relationship-dashboard-link","component":"relationshipsLink","order":24,"online":true,"offline":false,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-relationship-slot","path":"relationships","layoutMode":"anchored"}},{"name":"relationship-dashboard","slot":"patient-chart-relationship-slot","component":"relationships","order":0,"online":true,"offline":false},{"name":"clinical-encounter-dashboard-link","component":"clinicalEncounterLink","order":25,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-clinical-encounter-slot","path":"clinical-encounter","layoutMode":"anchored"}},{"name":"clinical-encounter-dashboard","slot":"patient-chart-clinical-encounter-slot","component":"clinicalEncounter","order":0,"online":true,"offline":false},{"name":"maternal-and-child-health-dashboard-link","component":"maternalAndChildHealthDashboardLink","order":26,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-maternal-and-child-health-slot","path":"maternal-and-child-health","layoutMode":"anchored"}},{"name":"maternal-and-child-health-dashboard","slot":"patient-chart-maternal-and-child-health-slot","component":"maternalAndChildHealthDashboard","order":0,"online":true,"offline":false},{"name":"maternal-and-child-health-partograph","slot":"maternal-and-child-health-partograph-slot","component":"partograph","order":0,"online":true,"offline":false},{"name":"contact-list-dashboard-link","component":"contactListLink","order":27,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-contact-list-slot","path":"contact-list","layoutMode":"anchored"}},{"name":"contact-list-dashboard","slot":"patient-chart-contact-list-slot","component":"contactList","order":0,"online":true,"offline":false},{"component":"caseManagementDashboardLink","name":"case-management-dashboard-link","meta":{"name":"case-management","title":"Case Management","slot":"case-management-dashboard-slot","path":"/case-management"}},{"name":"in-patient-dashboard-link","component":"inPatientChartLink","order":7,"meta":{"slot":"patient-chart-in-patient-dashboard-slot","path":"in-patient","layoutMode":"anchored","columns":1,"columnSpan":1}},{"name":"in-patient-dashboard","slot":"patient-chart-in-patient-dashboard-slot","component":"inPatientChartDashboard","meta":{"fullWidth":false}},{"name":"wrap-component-view","slot":"case-management-dashboard-slot","component":"wrapComponent","order":2,"online":true,"offline":false},{"name":"case-encounter-link","component":"caseEncounterDashboardLink","order":14,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-case-encounter-slot","path":"case-management-encounters","layoutMode":"anchored"}},{"name":"case-encounter-table","slot":"patient-chart-case-encounter-slot","component":"caseEncounterTable","order":0,"online":true,"offline":false},{"component":"peerCalendarDashboardLink","name":"peer-calendar-dashboard-link","meta":{"name":"peer-calendar","title":"Peer Calendar","slot":"peer-calendar-dashboard-slot","path":"peer-management"}},{"name":"peer-calendar","slot":"peer-calendar-dashboard-slot","component":"peerCalendar","order":0,"online":true,"offline":false},{"name":"special-clinics-dashboard-link","component":"specialClinicsDashboardLink","order":15,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-special-clinics-slot","path":"special-clinics","layoutMode":"anchored"}},{"name":"special-clinics-dashboard","slot":"patient-chart-special-clinics-slot","component":"specialClinicsDashboard","order":0,"online":true,"offline":false}],"modals":[{"name":"birth-date-calculator","component":"birthDateCalculator"},{"name":"relationship-delete-confirm-dialog","component":"relationshipDeleteConfirmialog"},{"name":"end-relationship-dialog","component":"endRelationshipModal"}],"workspaces":[{"name":"contact-list-form","component":"contactListForm","title":"Contact List Form","type":"form"},{"name":"case-management-form","component":"caseManagementForm","title":"Case Management Form","type":"form"},{"name":"add-patient-case-form","component":"addPatientCaseForm","title":"Add patient case Form","type":"form"},{"name":"family-relationship-form","component":"familyRelationshipForm","title":"Family Relationship Form","type":"form"},{"name":"peers-form","component":"peersForm","title":"Add New Peer","type":"form"},{"name":"kenyaemr-cusom-form-entry-workspace","component":"peerCalendarFormEntry","title":"KVP Peer Educator Outreach Calendar","type":"form","width":"extra-wide","canMaximize":true,"canHide":true},{"name":"contact-list-update-form","component":"contactListUpdateForm","title":"Contact List Update Form","type":"form"},{"name":"other-relationship-form","component":"otherRelationshipsForm","title":"Other Relationships Form","type":"form"},{"name":"end-relationship-form","component":"endRelationshipWorkspace","title":"Discontinue relationship form","type":"form"}],"version":"5.4.2-pre.2676"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-patient-clinical-view-app",
-  "version": "5.4.2-pre.2668",
+  "version": "5.4.2-pre.2676",
   "description": "Patient clinical view microfrontend for the OpenMRS SPA",
   "keywords": [
     "openmrs"

package/src/case-management/encounters/case-encounter-overview.component.tsx

@@ -16,6 +16,7 @@ import { ConfigObject } from '../../config-schema';
 import GenericTable from '../../specialized-clinics/generic-nav-links/generic-table.component';
 import styles from './case-encounter-header.scss';
 import { deleteEncounter, useInfiniteVisits } from './case-encounter-table.resource';
+import PatientHasActiveCase from './patient-has-active-case.component.tsx';
 
 interface CaseEncounterProps {
   mutate: KeyedMutator<any>;
@@ -198,7 +199,7 @@ const CaseEncounterOverviewComponent = ({ patientUuid }: CaseEncounterOverviewCo
   }
 
   return (
-    <>
+    <PatientHasActiveCase patientUuid={patientUuid}>
       <CaseEncounterHeader patientUuid={patientUuid} mutate={mutateVisits} onFilterChange={setFilterFormUuid} />
       {filteredEncounters.length === 0 ? (
         <Layer>
@@ -230,7 +231,7 @@ const CaseEncounterOverviewComponent = ({ patientUuid }: CaseEncounterOverviewCo
           />
         </div>
       )}
-    </>
+    </PatientHasActiveCase>
   );
 };
 

package/src/case-management/encounters/case-encounter-table.resource.ts

@@ -1,5 +1,9 @@
-import { openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import { FetchResponse, openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import useSWR from 'swr';
 import useSWRInfinite from 'swr/infinite';
+import { ConfigObject } from '../../config-schema';
+import dayjs from 'dayjs';
 
 export interface ChartConfig {
   freeTextFieldConceptUuid: string;
@@ -101,3 +105,45 @@ export function deleteEncounter(encounterUuid: string, abortController: AbortCon
     signal: abortController.signal,
   });
 }
+
+type Relationship = {
+  display: string;
+  uuid: string;
+  personA: {
+    uuid: string;
+    display: string;
+  };
+  personB: {
+    uuid: string;
+    display: string;
+  };
+  startDate: string;
+  endDate: string;
+  relationshipType: {
+    uuid: string;
+    display: string;
+  };
+};
+
+export const usePatientActiveCases = (patientUuid: string) => {
+  const { caseManagerRelationshipType } = useConfig<ConfigObject>();
+  const rep =
+    'custom:(display,uuid,personA:(uuid,display),personB:(uuid,display),startDate,endDate,relationshipType:(uuid,display))';
+  const url = `${restBaseUrl}/relationship?person=${patientUuid}&v=${rep}`;
+  const { data, error, isLoading, mutate } = useSWR<FetchResponse<{ results: Array<Relationship> }>>(url, openmrsFetch);
+  const activeCases = useMemo(
+    () =>
+      (data?.data?.results ?? []).filter(
+        (rel) =>
+          rel.relationshipType.uuid === caseManagerRelationshipType &&
+          (!rel.endDate || dayjs(rel.endDate).isAfter(dayjs())),
+      ),
+    [data, caseManagerRelationshipType],
+  );
+  return {
+    activeCases,
+    isLoading,
+    mutate,
+    error,
+  };
+};

package/src/case-management/encounters/patient-case-form.scss

@@ -0,0 +1,36 @@
+@use '@carbon/type';
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+}
+
+.grid {
+  margin: layout.$spacing-05 layout.$spacing-05;
+  padding: layout.$spacing-05 0 0 0;
+}
+
+.button {
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.buttonSet {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.datePickerInput span,
+.datePickerInput div,
+.datePickerInput input,
+.datePickerInput {
+  min-width: 100%;
+}

package/src/case-management/encounters/patient-case.workspace.tsx

@@ -0,0 +1,182 @@
+import React, { FC } from 'react';
+import { saveRelationship, useCaseManagers } from '../workspace/case-management.resource';
+import { DefaultWorkspaceProps, showSnackbar, useConfig } from '@openmrs/esm-framework';
+import usePerson from '../../contact-list/contact-list.resource';
+import { relationshipFormSchema } from '../../relationships/relationship.resources';
+import { Controller, useForm } from 'react-hook-form';
+import z from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  Button,
+  ButtonSet,
+  Column,
+  ComboBox,
+  DatePicker,
+  DatePickerInput,
+  Form,
+  Stack,
+  TextInput,
+} from '@carbon/react';
+import styles from './patient-case-form.scss';
+import { useTranslation } from 'react-i18next';
+import { extractNameString, uppercaseText } from '../../utils/expression-helper';
+import { ConfigObject } from '../../config-schema';
+import { usePatientActiveCases } from './case-encounter-table.resource';
+
+type PatientCaseFormProps = DefaultWorkspaceProps & { patientUuid: string };
+const formSchema = relationshipFormSchema.pick({
+  personA: true,
+  personB: true,
+  relationshipType: true,
+  startDate: true,
+  endDate: true,
+});
+
+type FormType = z.infer<typeof formSchema>;
+
+const PatientCaseForm: FC<PatientCaseFormProps> = ({ closeWorkspace, patientUuid }) => {
+  const { data } = useCaseManagers();
+  const { isLoading, person } = usePerson(patientUuid);
+  const { caseManagerRelationshipType } = useConfig<ConfigObject>();
+  const { mutate } = usePatientActiveCases(patientUuid);
+  const { t } = useTranslation();
+  const caseManagers =
+    data?.data.results.map((manager) => ({
+      id: manager.person.uuid,
+      text: manager.display,
+    })) || [];
+
+  const form = useForm<FormType>({
+    mode: 'all',
+    defaultValues: {
+      personA: patientUuid,
+      personB: '',
+      relationshipType: caseManagerRelationshipType,
+    },
+    resolver: zodResolver(formSchema),
+  });
+
+  const onSubmit = async (values: FormType) => {
+    try {
+      await saveRelationship(values);
+      showSnackbar({
+        kind: 'success',
+        title: t('success', 'Success'),
+        subtitle: t('caseSavedSuccesfully', 'Case saved successfully'),
+        isLowContrast: true,
+      });
+      mutate();
+      closeWorkspace();
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: t('error', 'Error'),
+        subtitle: t('errorAddingCase', 'Error Adding patient case'),
+        isLowContrast: true,
+      });
+    }
+  };
+
+  return (
+    <Form onSubmit={form.handleSubmit(onSubmit)} className={styles.form}>
+      <Stack gap={4} className={styles.grid}>
+        <Column>
+          <Controller
+            control={form.control}
+            name="startDate"
+            render={({ field, fieldState: { error } }) => (
+              <DatePicker
+                className={styles.datePickerInput}
+                dateFormat="d/m/Y"
+                datePickerType="single"
+                {...field}
+                onChange={([date]) => field.onChange(date)}
+                ref={undefined}
+                invalid={!!error?.message}
+                invalidText={error?.message}>
+                <DatePickerInput
+                  id={`startdate-input`}
+                  invalid={!!error?.message}
+                  invalidText={error?.message}
+                  placeholder="mm/dd/yyyy"
+                  labelText={t('startDate', 'Start Date')}
+                  size="lg"
+                />
+              </DatePicker>
+            )}
+          />
+        </Column>
+        <Column>
+          <Controller
+            control={form.control}
+            name="endDate"
+            render={({ field, fieldState: { error } }) => (
+              <DatePicker
+                className={styles.datePickerInput}
+                dateFormat="d/m/Y"
+                datePickerType="single"
+                {...field}
+                onChange={([date]) => field.onChange(date)}
+                invalid={!!error?.message}
+                invalidText={error?.message}>
+                <DatePickerInput
+                  id="endDate"
+                  invalid={!!error?.message}
+                  invalidText={error?.message}
+                  placeholder="mm/dd/yyyy"
+                  labelText={t('endDate', 'End Date')}
+                  size="lg"
+                />
+              </DatePicker>
+            )}
+          />
+        </Column>
+        <Column>
+          <TextInput id="patient" labelText={t('patient', 'Patient')} value={person?.display} readOnly />
+        </Column>
+        <Column>
+          <Controller
+            name="personB"
+            control={form.control}
+            render={({ field, fieldState }) => {
+              return (
+                <ComboBox
+                  id="case_manager_name"
+                  titleText={t('manager', 'Case Manager')}
+                  placeholder="Select Case Manager"
+                  items={caseManagers}
+                  itemToString={(item) => uppercaseText(extractNameString(item ? item.text : ''))}
+                  onChange={(e) => {
+                    field.onChange(e.selectedItem?.id);
+                  }}
+                  selectedItem={caseManagers.find((manager) => manager.id === field.value)}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}
+                />
+              );
+            }}
+          />
+        </Column>
+        <Column>
+          <TextInput
+            id="relationshipType"
+            labelText={t('relationshipType', 'Relationship to patient')}
+            value={t('caseManager', 'Case Manager')}
+            readOnly
+          />
+        </Column>
+      </Stack>
+
+      <ButtonSet className={styles.buttonSet}>
+        <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
+          {t('discard', 'Discard')}
+        </Button>
+        <Button className={styles.button} kind="primary" type="submit" disabled={form.formState.isSubmitting}>
+          {t('submit', 'Submit')}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+export default PatientCaseForm;

package/src/case-management/encounters/patient-has-active-case.component.tsx.tsx

@@ -0,0 +1,34 @@
+import React, { FC, PropsWithChildren } from 'react';
+import { usePatientActiveCases } from './case-encounter-table.resource';
+import { DataTableSkeleton } from '@carbon/react';
+import { ErrorState, launchWorkspace } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { EmptyState } from '@openmrs/esm-patient-common-lib';
+
+type PatientHasActiveCaseProps = PropsWithChildren<{ patientUuid: string }>;
+
+const PatientHasActiveCase: FC<PatientHasActiveCaseProps> = ({ patientUuid, children }) => {
+  const { activeCases, error, isLoading } = usePatientActiveCases(patientUuid);
+  const { t } = useTranslation();
+  const handleAddPatientCase = () => {
+    launchWorkspace('add-patient-case-form', { workspaceTitle: 'Add Patient Case', patientUuid });
+  };
+  if (isLoading) {
+    return <DataTableSkeleton />;
+  }
+  if (error) {
+    return <ErrorState error={error} headerTitle={t('patientCases', 'Patient Cases')} />;
+  }
+  if (!activeCases?.length) {
+    return (
+      <EmptyState
+        headerTitle={t('patientCases', 'Patient Cases')}
+        displayText={t('patientActiveCase', 'Patient Active case')}
+        launchForm={handleAddPatientCase}
+      />
+    );
+  }
+  return <>{children}</>;
+};
+
+export default PatientHasActiveCase;

package/src/config-schema.ts

@@ -52,6 +52,7 @@ export const configSchema = {
       peerCalendarOutreactForm: '7492cffe-5874-4144-a1e6-c9e455472a35',
       autopsyFormUuid: '2b61a73-4971-4fc0-b20b-9a30176317e2',
       htsClientTracingFormUuid: '15ed03d2-c972-11e9-a32f-2a2ae2dbcce4',
+      admissionRequestFormUuid: '0bae7646-b079-4cbb-8130-b24274fc16f7',
     },
   },
   htsClientTracingConceptsUuids: {
@@ -409,6 +410,11 @@ export const configSchema = {
       },
     },
   },
+  caseManagerRelationshipType: {
+    _type: Type.UUID,
+    _description: 'Case manager/Client relationship type UUID',
+    _default: '9065e3c6-b2f5-4f99-9cbf-f67fd9f82ec5',
+  },
 };
 
 export interface ConfigObject {
@@ -442,6 +448,7 @@ export interface ConfigObject {
     peerCalendarOutreactForm: string;
     autopsyFormUuid: string;
     htsClientTracingFormUuid: string;
+    admissionRequestFormUuid: string;
   };
   defaulterTracingEncounterUuid: string;
   autopsyEncounterFormUuid: string;
@@ -501,6 +508,7 @@ export interface ConfigObject {
       bloodPressureDecrement: number;
     };
   };
+  caseManagerRelationshipType: string;
 }
 
 export interface PartograpyComponents {

package/src/in-patient/admission-request.component.tsx

@@ -0,0 +1,117 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { formatDatetime, isDesktop, launchWorkspace, useConfig, useLayoutType } from '@openmrs/esm-framework';
+import { CardHeader, EmptyState, ErrorState } from '@openmrs/esm-patient-common-lib';
+
+import { useAdmissionRequest } from './in-patient.resource';
+import { ConfigObject } from '../config-schema';
+import { Add } from '@carbon/react/icons';
+
+type AdmissionRequestProps = {
+  patientUuid: string;
+};
+
+const AdmissionRequest: React.FC<AdmissionRequestProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const controlSize = isDesktop(layout) ? 'sm' : 'md';
+  const {
+    formsList: { admissionRequestFormUuid },
+  } = useConfig<ConfigObject>();
+  const { admissionRequest, isLoading, error, mutate } = useAdmissionRequest(patientUuid);
+
+  const rows = useMemo(() => {
+    return admissionRequest.map((admissionRequest) => ({
+      id: admissionRequest.patient.uuid,
+      admissionLocation: admissionRequest.dispositionLocation?.display,
+      admissionType: admissionRequest.dispositionType,
+      disposition: admissionRequest.disposition.display,
+      requestDatetime: formatDatetime(new Date(admissionRequest.dispositionEncounter.encounterDatetime), {
+        mode: 'standard',
+      }),
+    }));
+  }, [admissionRequest]);
+
+  const headers = useMemo(() => {
+    return [
+      { key: 'requestDatetime', header: t('requestDatetime', 'Request Datetime') },
+      { key: 'admissionLocation', header: t('admissionLocation', 'Admission Location') },
+      { key: 'admissionType', header: t('admissionType', 'Admission Type') },
+      { key: 'disposition', header: t('disposition', 'Disposition') },
+    ];
+  }, []);
+
+  const handleLaunchAdmissionRequestForm = () => {
+    launchWorkspace('patient-form-entry-workspace', {
+      workspaceTitle: 'Admission Request',
+      mutateForm: mutate,
+      formInfo: {
+        formUuid: admissionRequestFormUuid,
+        encounterUuid: '',
+      },
+    });
+  };
+
+  if (isLoading) {
+    return <DataTableSkeleton />;
+  }
+
+  if (error) {
+    return <ErrorState error={error} headerTitle={t('admissionRequest', 'Admission Request')} />;
+  }
+
+  if (admissionRequest.length === 0) {
+    return (
+      <EmptyState
+        displayText={t('admissionRequests', 'admission requests')}
+        headerTitle={t('admissionRequest', 'Admission Request')}
+        launchForm={handleLaunchAdmissionRequestForm}
+      />
+    );
+  }
+
+  return (
+    <div>
+      <CardHeader title={t('admissionRequest', 'Admission Request')}>
+        <Button renderIcon={Add} onClick={handleLaunchAdmissionRequestForm} kind="ghost">
+          {t('add', 'Add')}
+        </Button>
+      </CardHeader>
+      <DataTable size={controlSize} rows={rows} headers={headers}>
+        {({ rows, headers, getTableProps, getHeaderProps, getRowProps, getCellProps }) => (
+          <Table {...getTableProps()}>
+            <TableHead>
+              <TableRow>
+                {headers.map((header) => (
+                  <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row) => (
+                <TableRow {...getRowProps({ row })}>
+                  {row.cells.map((cell) => (
+                    <TableCell {...getCellProps({ cell })}>{cell.value}</TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </DataTable>
+    </div>
+  );
+};
+
+export default AdmissionRequest;