@kenyaemr/esm-patient-clinical-view-app 5.4.2-pre.2724 → 5.4.2-pre.2730

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[{"component":"wrapComponent","route":"case-management"}],"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":"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.2724"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[{"component":"wrapComponent","route":"case-management"}],"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":"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},{"name":"patient-complaints","slot":"ewf-patient-summary-slot","component":"patientComplaints","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.2730"}

package/package.json

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

package/src/case-management/wrap/wrap.component.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
+import { WorkspaceContainer } from '@openmrs/esm-framework';
+
 import { ClaimManagementHeader } from '../header/case-management-header';
 import CaseManagementTabs from '../tabs/case-management-tabs.component';
 import MetricsHeader from '../metrics/case-management-header.component';
-
 const WrapComponent: React.FC = () => {
   const [activeTabIndex, setActiveTabIndex] = useState<number>(0);
 
@@ -11,6 +12,7 @@ const WrapComponent: React.FC = () => {
       <ClaimManagementHeader title={'Home'} />
       <MetricsHeader activeTabIndex={activeTabIndex} />
       <CaseManagementTabs setActiveTabIndex={setActiveTabIndex} />
+      <WorkspaceContainer key="case-management" contextKey="case-management" />
     </div>
   );
 };

package/src/complaints/complaints.resource.tsx

@@ -0,0 +1,109 @@
+import useSWR from 'swr';
+import { useMemo } from 'react';
+import {
+  Encounter,
+  makeUrl,
+  openmrsFetch,
+  restBaseUrl,
+  useOpenmrsPagination,
+  formatDate,
+  parseDate,
+} from '@openmrs/esm-framework';
+
+export function usePaginatedEncounters(patientUuid: string, encounterType: string, pageSize: number) {
+  const customRep = `custom:(uuid,display,diagnoses:(uuid,display,rank,diagnosis,certainty,voided),encounterDatetime,form:(uuid,display,name,description,encounterType,version,resources:(uuid,display,name,valueReference)),encounterType,visit,patient,obs:(uuid,concept:(uuid,display,conceptClass:(uuid,display)),display,groupMembers:(uuid,concept:(uuid,display),value:(uuid,display),display),value,obsDatetime),encounterProviders:(provider:(person)))`;
+  const url = new URL(makeUrl(`${restBaseUrl}/encounter`), window.location.toString());
+  url.searchParams.set('patient', patientUuid);
+  url.searchParams.set('v', customRep);
+  url.searchParams.set('order', 'desc');
+  encounterType && url.searchParams.set('encounterType', encounterType);
+  return useOpenmrsPagination<Encounter>(patientUuid ? url : null, pageSize);
+}
+
+const extractConceptLabels = (questions = []): Record<string, string> => {
+  const map: Record<string, string> = {};
+
+  questions.forEach((question) => {
+    // Extract labels from answers in questionOptions
+    if (question.questionOptions?.answers) {
+      question.questionOptions.answers.forEach((answer) => {
+        map[answer.concept] = answer.label;
+      });
+    }
+
+    // Recursively process nested questions (for obsGroup questions)
+    if (question.questions) {
+      Object.assign(map, extractConceptLabels(question.questions));
+    }
+  });
+
+  return map;
+};
+
+export const useForm = (formUuid: string) => {
+  const url = `${restBaseUrl}/o3/forms/${formUuid}`;
+  const { data, isLoading, error, mutate } = useSWR<{ data: Record<string, any> }>(url, openmrsFetch);
+
+  const conceptLabelMap = useMemo(() => {
+    if (!data?.data?.pages) {
+      return {};
+    }
+
+    const map: Record<string, string> = {};
+
+    // Traverse pages -> sections -> questions
+    data.data.pages.forEach((page) => {
+      page.sections?.forEach((section) => {
+        if (section.questions) {
+          Object.assign(map, extractConceptLabels(section.questions));
+        }
+      });
+    });
+
+    return map;
+  }, [data]);
+
+  return { data, isLoading, error, mutate, conceptLabelMap };
+};
+
+export const extractComplaintsFromObservations = (
+  observations: any[],
+  config: {
+    complaints: {
+      chiefComplaintConceptUuid: string;
+      complaintMemberConceptUuid: string;
+      durationConceptUuid: string;
+      onsetConceptUuid: string;
+    };
+  },
+  conceptLabelMap: Record<string, string>,
+) => {
+  return observations
+    .flatMap((observation) => observation)
+    .filter((obs) => obs.concept.uuid === config.complaints.chiefComplaintConceptUuid)
+    .map((obs) => {
+      const complaintMember = obs.groupMembers?.find(
+        (member) => member.concept.uuid === config.complaints.complaintMemberConceptUuid,
+      );
+      const durationMember = obs.groupMembers?.find(
+        (member) => member.concept.uuid === config.complaints.durationConceptUuid,
+      );
+      const onsetMember = obs.groupMembers?.find(
+        (member) => member.concept.uuid === config.complaints.onsetConceptUuid,
+      );
+      const onsetValue =
+        typeof onsetMember?.value === 'object' ? conceptLabelMap[onsetMember?.value?.['uuid']] : onsetMember?.value;
+      const onsetDate = obs.obsDatetime ? formatDate(parseDate(obs.obsDatetime), { mode: 'wide', noToday: true }) : '';
+      const onsetDisplay = [onsetDate, onsetValue].filter(Boolean).join(' - ') || '--';
+
+      return {
+        id: obs.uuid,
+        complaint:
+          (typeof complaintMember?.value === 'object' && complaintMember?.value?.display) ||
+          complaintMember?.display ||
+          '--',
+        duration: durationMember?.value || '--',
+        onset: onsetDisplay,
+      };
+    });
+};

package/src/complaints/complaints.test.tsx

@@ -0,0 +1,512 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import PatientComplaintsComponent from './patient-complaints.component';
+import { usePaginatedEncounters, useForm, extractComplaintsFromObservations } from './complaints.resource';
+import { useConfig, isDesktop } from '@openmrs/esm-framework';
+import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+
+// Mock the dependencies
+jest.mock('./complaints.resource', () => ({
+  usePaginatedEncounters: jest.fn(),
+  useForm: jest.fn(),
+  extractComplaintsFromObservations: jest.fn(),
+}));
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  useConfig: jest.fn(),
+  isDesktop: jest.fn(),
+  ErrorState: ({ headerTitle }) => <div data-testid="error-state">{headerTitle}</div>,
+}));
+jest.mock('@openmrs/esm-patient-common-lib', () => ({
+  CardHeader: ({ title, children }) => (
+    <div>
+      {title}
+      {children}
+    </div>
+  ),
+  EmptyState: ({ displayText }) => <div data-testid="empty-state">{displayText}</div>,
+  usePaginationInfo: jest.fn(),
+}));
+
+const mockUsePaginatedEncounters = usePaginatedEncounters as jest.Mock;
+const mockUseForm = useForm as jest.Mock;
+const mockUseConfig = useConfig as jest.Mock;
+const mockIsDesktop = isDesktop as unknown as jest.Mock;
+const mockUsePaginationInfo = usePaginationInfo as jest.Mock;
+const mockExtractComplaintsFromObservations = extractComplaintsFromObservations as jest.Mock;
+
+const mockConfig = {
+  encounterTypes: {
+    triage: 'd1059fb9-a079-4feb-a749-eedd709ae542',
+  },
+  formsList: {
+    complaintsFormUuid: '37f6bd8d-586a-4169-95fa-5781f987fe62',
+  },
+  complaints: {
+    chiefComplaintConceptUuid: '160531AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    complaintMemberConceptUuid: '5219AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    durationConceptUuid: '159368AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    onsetConceptUuid: 'd7a3441d-6aeb-49be-b7d6-b2a3bb39e78d',
+  },
+};
+
+const mockEncounterData = [
+  {
+    uuid: 'encounter-1',
+    encounterDatetime: '2023-10-01T10:30:00',
+    obs: [
+      {
+        uuid: 'obs-1',
+        concept: {
+          uuid: '160531AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+        },
+        obsDatetime: '2023-10-01T10:30:00',
+        groupMembers: [
+          {
+            uuid: 'obs-1-1',
+            concept: {
+              uuid: '5219AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+            },
+            value: {
+              display: 'Headache',
+            },
+            display: 'Chief Complaint: Headache',
+          },
+          {
+            uuid: 'obs-1-2',
+            concept: {
+              uuid: '159368AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+            },
+            value: '2 days',
+          },
+          {
+            uuid: 'obs-1-3',
+            concept: {
+              uuid: 'd7a3441d-6aeb-49be-b7d6-b2a3bb39e78d',
+            },
+            value: {
+              uuid: 'onset-uuid-1',
+            },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    uuid: 'encounter-2',
+    encounterDatetime: '2023-09-25T14:15:00',
+    obs: [
+      {
+        uuid: 'obs-2',
+        concept: {
+          uuid: '160531AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+        },
+        obsDatetime: '2023-09-25T14:15:00',
+        groupMembers: [
+          {
+            uuid: 'obs-2-1',
+            concept: {
+              uuid: '5219AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+            },
+            value: {
+              display: 'Fever',
+            },
+            display: 'Chief Complaint: Fever',
+          },
+          {
+            uuid: 'obs-2-2',
+            concept: {
+              uuid: '159368AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+            },
+            value: '5 days',
+          },
+          {
+            uuid: 'obs-2-3',
+            concept: {
+              uuid: 'd7a3441d-6aeb-49be-b7d6-b2a3bb39e78d',
+            },
+            value: {
+              uuid: 'onset-uuid-2',
+            },
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const mockConceptLabelMap = {
+  'onset-uuid-1': 'Sudden',
+  'onset-uuid-2': 'Gradual',
+};
+
+const mockComplaints = [
+  {
+    id: 'obs-1',
+    complaint: 'Headache',
+    duration: '2 days',
+    onset: '01-Oct-2023 - Sudden',
+  },
+  {
+    id: 'obs-2',
+    complaint: 'Fever',
+    duration: '5 days',
+    onset: '25-Sep-2023 - Gradual',
+  },
+];
+
+describe('PatientComplaintsComponent', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseConfig.mockReturnValue(mockConfig);
+    mockIsDesktop.mockReturnValue(true);
+    mockUsePaginationInfo.mockReturnValue({
+      pageSizes: [5, 10, 15, 20],
+    });
+    // Default mock for extractComplaintsFromObservations
+    mockExtractComplaintsFromObservations.mockReturnValue([]);
+  });
+
+  it('should render loading skeleton when data is loading', () => {
+    mockUsePaginatedEncounters.mockReturnValue({
+      data: [],
+      isLoading: true,
+      error: null,
+      currentPage: 1,
+      goTo: jest.fn(),
+      totalPages: 1,
+    });
+    mockUseForm.mockReturnValue({
+      conceptLabelMap: {},
+      isLoading: true,
+      error: null,
+    });
+
+    render(<PatientComplaintsComponent patientUuid="test-patient-uuid" />);
+
+    expect(screen.getByRole('table')).toBeInTheDocument();
+    expect(screen.getByRole('table')).toHaveClass('cds--skeleton');
+  });
+
+  it('should render error state when encounters fail to load', () => {
+    const mockError = new Error('Failed to load encounters');
+    mockUsePaginatedEncounters.mockReturnValue({
+      data: [],
+      isLoading: false,
+      error: mockError,
+      currentPage: 1,
+      goTo: jest.fn(),
+      totalPages: 1,
+    });
+    mockUseForm.mockReturnValue({
+      conceptLabelMap: {},
+      isLoading: false,
+      error: null,
+    });
+
+    render(<PatientComplaintsComponent patientUuid="test-patient-uuid" />);
+
+    expect(screen.getByTestId('error-state')).toBeInTheDocument();
+    expect(screen.getByText('Complaints')).toBeInTheDocument();
+  });
+
+  it('should render error state when form fails to load', () => {
+    const mockError = new Error('Failed to load form');
+    mockUsePaginatedEncounters.mockReturnValue({
+      data: [],
+      isLoading: false,
+      error: null,
+      currentPage: 1,
+      goTo: jest.fn(),
+      totalPages: 1,
+    });
+    mockUseForm.mockReturnValue({
+      conceptLabelMap: {},
+      isLoading: false,
+      error: mockError,
+    });
+
+    render(<PatientComplaintsComponent patientUuid="test-patient-uuid" />);
+
+    expect(screen.getByTestId('error-state')).toBeInTheDocument();
+    expect(screen.getByText('Complaints')).toBeInTheDocument();
+  });
+
+  it('should render empty state when there are no complaints', () => {
+    mockUsePaginatedEncounters.mockReturnValue({
+      data: [],
+      isLoading: false,
+      error: null,
+      currentPage: 1,
+      goTo: jest.fn(),
+      totalPages: 1,
+    });
+    mockUseForm.mockReturnValue({
+      conceptLabelMap: {},
+      isLoading: false,
+      error: null,
+    });
+
+    render(<PatientComplaintsComponent patientUuid="test-patient-uuid" />);
+
+    expect(screen.getByTestId('empty-state')).toBeInTheDocument();
+    expect(screen.getByText('Complaints')).toBeInTheDocument();
+  });
+
+  it('should render complaints table with data', () => {
+    mockUsePaginatedEncounters.mockReturnValue({
+      data: mockEncounterData,
+      isLoading: false,
+      error: null,
+      currentPage: 1,
+      goTo: jest.fn(),
+      totalPages: 1,
+    });
+    mockUseForm.mockReturnValue({
+      conceptLabelMap: mockConceptLabelMap,
+      isLoading: false,
+      error: null,
+    });
+    mockExtractComplaintsFromObservations.mockReturnValue(mockComplaints);
+
+    render(<PatientComplaintsComponent patientUuid="test-patient-uuid" />);
+
+    // Check table headers
+    expect(screen.getByText('Complaint')).toBeInTheDocument();
+    expect(screen.getByText('Duration')).toBeInTheDocument();
+    expect(screen.getByText('Onset')).toBeInTheDocument();
+
+    // Check table data
+    expect(screen.getByText('Headache')).toBeInTheDocument();
+    expect(screen.getByText('2 days')).toBeInTheDocument();
+    expect(screen.getByText('Fever')).toBeInTheDocument();
+    expect(screen.getByText('5 days')).toBeInTheDocument();
+  });
+
+  it('should handle pagination correctly', async () => {
+    const user = userEvent.setup();
+    const mockGoTo = jest.fn();
+
+    // Create enough complaints data to enable pagination (more than 5 items for page size 5)
+    const paginationComplaints = [
+      { id: 'obs-1', complaint: 'Headache', duration: '2 days', onset: '01-Oct-2023 - Sudden' },
+      { id: 'obs-2', complaint: 'Fever', duration: '5 days', onset: '25-Sep-2023 - Gradual' },
+      { id: 'obs-3', complaint: 'Cough', duration: '3 days', onset: '28-Sep-2023 - Sudden' },
+      { id: 'obs-4', complaint: 'Fatigue', duration: '7 days', onset: '20-Sep-2023 - Gradual' },
+      { id: 'obs-5', complaint: 'Nausea', duration: '1 day', onset: '30-Sep-2023 - Sudden' },
+      { id: 'obs-6', complaint: 'Dizziness', duration: '4 days', onset: '24-Sep-2023 - Gradual' },
+    ];
+
+    mockUsePaginatedEncounters.mockReturnValue({
+      data: mockEncounterData,
+      isLoading: false,
+      error: null,
+      currentPage: 1,
+      goTo: mockGoTo,
+      totalPages: 2,
+    });
+    mockUseForm.mockReturnValue({
+      conceptLabelMap: mockConceptLabelMap,
+      isLoading: false,
+      error: null,
+    });
+    mockExtractComplaintsFromObservations.mockReturnValue(paginationComplaints);
+
+    render(<PatientComplaintsComponent patientUuid="test-patient-uuid" />);
+
+    // Find and click the next page button
+    const nextPageButton = screen.getByRole('button', { name: /next page/i });
+    await user.click(nextPageButton);
+
+    // Verify goTo was called with page 2
+    await waitFor(() => {
+      expect(mockGoTo).toHaveBeenCalledWith(2);
+    });
+  });
+
+  it('should display "sm" size table on desktop layout', () => {
+    mockIsDesktop.mockReturnValue(true);
+    mockUsePaginatedEncounters.mockReturnValue({
+      data: mockEncounterData,
+      isLoading: false,
+      error: null,
+      currentPage: 1,
+      goTo: jest.fn(),
+      totalPages: 1,
+    });
+    mockUseForm.mockReturnValue({
+      conceptLabelMap: mockConceptLabelMap,
+      isLoading: false,
+      error: null,
+    });
+    mockExtractComplaintsFromObservations.mockReturnValue(mockComplaints);
+
+    render(<PatientComplaintsComponent patientUuid="test-patient-uuid" />);
+
+    const table = screen.getByRole('table');
+    expect(table).toHaveClass('cds--data-table--sm');
+  });
+
+  it('should display "lg" size table on tablet layout', () => {
+    mockIsDesktop.mockReturnValue(false);
+    mockUsePaginatedEncounters.mockReturnValue({
+      data: mockEncounterData,
+      isLoading: false,
+      error: null,
+      currentPage: 1,
+      goTo: jest.fn(),
+      totalPages: 1,
+    });
+    mockUseForm.mockReturnValue({
+      conceptLabelMap: mockConceptLabelMap,
+      isLoading: false,
+      error: null,
+    });
+    mockExtractComplaintsFromObservations.mockReturnValue(mockComplaints);
+
+    render(<PatientComplaintsComponent patientUuid="test-patient-uuid" />);
+
+    const table = screen.getByRole('table');
+    expect(table).toHaveClass('cds--data-table--lg');
+  });
+
+  it('should display placeholder when complaint data is missing', () => {
+    const encounterWithMissingData = [
+      {
+        uuid: 'encounter-3',
+        encounterDatetime: '2023-10-01T10:30:00',
+        obs: [
+          {
+            uuid: 'obs-3',
+            concept: {
+              uuid: '160531AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+            },
+            obsDatetime: '2023-10-01T10:30:00',
+            groupMembers: [],
+          },
+        ],
+      },
+    ];
+
+    const mockComplaintsWithPlaceholders = [
+      {
+        id: 'obs-3',
+        complaint: '--',
+        duration: '--',
+        onset: '--',
+      },
+    ];
+
+    mockUsePaginatedEncounters.mockReturnValue({
+      data: encounterWithMissingData,
+      isLoading: false,
+      error: null,
+      currentPage: 1,
+      goTo: jest.fn(),
+      totalPages: 1,
+    });
+    mockUseForm.mockReturnValue({
+      conceptLabelMap: {},
+      isLoading: false,
+      error: null,
+    });
+    mockExtractComplaintsFromObservations.mockReturnValue(mockComplaintsWithPlaceholders);
+
+    render(<PatientComplaintsComponent patientUuid="test-patient-uuid" />);
+
+    // Should display placeholder "--" for missing data
+    const placeholders = screen.getAllByText('--');
+    expect(placeholders.length).toBeGreaterThan(0);
+  });
+
+  it('should have zebra striped rows', () => {
+    mockUsePaginatedEncounters.mockReturnValue({
+      data: mockEncounterData,
+      isLoading: false,
+      error: null,
+      currentPage: 1,
+      goTo: jest.fn(),
+      totalPages: 1,
+    });
+    mockUseForm.mockReturnValue({
+      conceptLabelMap: mockConceptLabelMap,
+      isLoading: false,
+      error: null,
+    });
+    mockExtractComplaintsFromObservations.mockReturnValue(mockComplaints);
+
+    render(<PatientComplaintsComponent patientUuid="test-patient-uuid" />);
+
+    const table = screen.getByRole('table');
+    expect(table).toHaveClass('cds--data-table--zebra');
+  });
+
+  it('should call usePaginatedEncounters with correct parameters', () => {
+    mockUsePaginatedEncounters.mockReturnValue({
+      data: [],
+      isLoading: false,
+      error: null,
+      currentPage: 1,
+      goTo: jest.fn(),
+      totalPages: 1,
+    });
+    mockUseForm.mockReturnValue({
+      conceptLabelMap: {},
+      isLoading: false,
+      error: null,
+    });
+
+    render(<PatientComplaintsComponent patientUuid="test-patient-uuid" />);
+
+    expect(mockUsePaginatedEncounters).toHaveBeenCalledWith(
+      'test-patient-uuid',
+      'd1059fb9-a079-4feb-a749-eedd709ae542',
+      5,
+    );
+  });
+
+  it('should call useForm with correct form UUID', () => {
+    mockUsePaginatedEncounters.mockReturnValue({
+      data: [],
+      isLoading: false,
+      error: null,
+      currentPage: 1,
+      goTo: jest.fn(),
+      totalPages: 1,
+    });
+    mockUseForm.mockReturnValue({
+      conceptLabelMap: {},
+      isLoading: false,
+      error: null,
+    });
+
+    render(<PatientComplaintsComponent patientUuid="test-patient-uuid" />);
+
+    expect(mockUseForm).toHaveBeenCalledWith('37f6bd8d-586a-4169-95fa-5781f987fe62');
+  });
+
+  it('should have pagination controls with correct props', () => {
+    mockUsePaginatedEncounters.mockReturnValue({
+      data: mockEncounterData,
+      isLoading: false,
+      error: null,
+      currentPage: 1,
+      goTo: jest.fn(),
+      totalPages: 2,
+    });
+    mockUseForm.mockReturnValue({
+      conceptLabelMap: mockConceptLabelMap,
+      isLoading: false,
+      error: null,
+    });
+    mockExtractComplaintsFromObservations.mockReturnValue(mockComplaints);
+
+    render(<PatientComplaintsComponent patientUuid="test-patient-uuid" />);
+
+    // Pagination should be present
+    expect(screen.getByRole('button', { name: /previous page/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /next page/i })).toBeInTheDocument();
+  });
+});