(feat) follow up changes on the case management: discontinuity of case

packages/esm-billing-app/translations/en.json

@@ -12,8 +12,6 @@
   "allPaymentModes": "All Payment Modes",
   "amount": "Amount",
   "anErrorOccurred": "An Error Occurred",
-  "anErrorOccurredClockingIn": "",
-  "anErrorOccurredClockingOut": "An error occurred clocking out",
   "anErrorOccurredCreatingPaymentPoint": "An error occurred creating payment point",
   "approvedTotal": "Approved Total",
   "attributeDescription": "Attribute description",
@@ -72,10 +70,7 @@
   "claimSummary": "Claim Summary",
   "clear": "Clear",
   "clearSearch": "Clear search input",
-  "clockIn": "Clock In",
-  "clockingIn": "Clocking in",
-  "clockingOut": "Clocking Out",
-  "clockOut": "Clock Out",
+  "clockInTime": "",
   "close": "Close",
   "create": "Create",
   "createClaimError": "Create Claim error",
@@ -210,15 +205,13 @@
   "paymentModes": "Payment Modes",
   "paymentModeSummary": "Payment Mode Summary",
   "paymentPayment": "Bill Payment",
-  "paymentPoint": "Payment point",
   "paymentPoints": "Payment Points",
   "payments": "Payments",
   "paymentType": "Payment Type",
   "pendingHIEVerification": "Pending HIE verification",
   "pendingVerificationReason": "",
   "Phone Number": "Phone Number",
   "pickLabRequest": "Pick Lab Request",
-  "pleaseSelectPaymentPoint": "Please select a payment point",
   "policyNumber": "Policy number",
   "preAuthJustification": "Pre-Auth Justification",
   "preauthRequest": "Preauth requests",
@@ -275,8 +268,6 @@
   "selectitemstorequestforpreauth": "Select items that are to be included in the pre authorization request",
   "selectPaymentMethod": "Select payment method",
   "selectPaymentMode": "Select payment mode",
-  "selectPaymentPoint": "Select payment point",
-  "selectPaymentPointMessage": "Select the payment point on which you will be clocked in.",
   "selectTimesheet": "Select timesheet",
   "sendClaim": "Pre authorization request sent successfully",
   "sendClaimError": "Pre authorization request failed, please try later",
@@ -292,8 +283,6 @@
   "stockItem": "Stock Item",
   "stockItemError": "Stock Item",
   "success": "Success",
-  "successfullyClockedIn": "",
-  "successfullyClockedOut": "Successfully Clocked Out",
   "successfullyCreatedPaymentPoint": "Successfully created payment point",
   "timesheet": "Timesheet",
   "total": "Total",

packages/esm-patient-clinical-view-app/src/case-management/metrics/case-management-header.component.tsx

@@ -1,11 +1,15 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { WatsonHealthStressBreathEditor } from '@carbon/react/icons';
 import { Button } from '@carbon/react';
 import styles from './case-management-header.scss';
-import { launchWorkspace, navigate, useSession } from '@openmrs/esm-framework';
+import { launchWorkspace, useSession } from '@openmrs/esm-framework';
 
-const MetricsHeader = () => {
+interface MetricsHeaderProps {
+  activeTabIndex: number;
+}
+
+const MetricsHeader: React.FC<MetricsHeaderProps> = ({ activeTabIndex }) => {
   const { t } = useTranslation();
   const { user } = useSession();
   const metricsTitle = t(' ', 'Case Manager');
@@ -14,14 +18,18 @@ const MetricsHeader = () => {
       workspaceTitle: 'Case Management Form',
     });
   };
+
+  const isDiscontinuationTab = activeTabIndex === 1;
+
   return (
     <div className={styles.metricsContainer}>
       <div className={styles.actionBtn}>
         <Button
           kind="tertiary"
           renderIcon={(props) => <WatsonHealthStressBreathEditor size={16} {...props} />}
           iconDescription={t('addCase', 'Add case')}
-          onClick={handleAddCase}>
+          onClick={handleAddCase}
+          disabled={isDiscontinuationTab}>
           {t('addCase', 'Add case')}
         </Button>
       </div>

packages/esm-patient-clinical-view-app/src/case-management/modal/case-management-modal.component.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, DatePicker, DatePickerInput, ModalFooter } from '@carbon/react';
+import { useForm, Controller } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { mutate } from 'swr';
+import { updateRelationship } from '../../relationships/relationship.resources';
+import { showSnackbar } from '@openmrs/esm-framework';
+import styles from './case-management-modal.scss';
+
+const EndRelationshipSchema = z.object({
+  endDate: z.date({
+    required_error: 'End date is required',
+    invalid_type_error: 'Please select a valid date',
+  }),
+});
+
+type FormData = z.infer<typeof EndRelationshipSchema>;
+
+interface EndRelationshipModalProps {
+  closeModal: () => void;
+  relationshipUuid: string;
+}
+
+const EndRelationshipModal: React.FC<EndRelationshipModalProps> = ({ closeModal, relationshipUuid }) => {
+  const { t } = useTranslation();
+
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<FormData>({
+    resolver: zodResolver(EndRelationshipSchema),
+    defaultValues: { endDate: null },
+  });
+
+  const handleEndRelationship = async (data: FormData) => {
+    try {
+      await updateRelationship(relationshipUuid, { endDate: data.endDate });
+      mutate((key) => typeof key === 'string' && key.startsWith('/ws/rest/v1/relationship'), undefined, {
+        revalidate: true,
+      });
+      showSnackbar({
+        kind: 'success',
+        title: t('endRelationship', 'End relationship'),
+        subtitle: t('savedRelationship', 'Relationship ended successfully'),
+        timeoutInMs: 3000,
+        isLowContrast: true,
+      });
+      closeModal();
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: t('relationshipError', 'Relationship Error'),
+        subtitle: t('relationshipErrorMessage', 'Request Failed'),
+        timeoutInMs: 2500,
+        isLowContrast: true,
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(handleEndRelationship)}>
+      <div className="cds--modal-header">
+        <h3 className="cds--modal-header__heading">{t('endRelationship', 'End relationship')}</h3>
+      </div>
+      <div className="cds--modal-content">
+        <p>{t('relationshipConfirmationText', 'This will end the relationship. Are you sure you want to proceed?')}</p>
+
+        <div className={styles.centeredContainer}>
+          <Controller
+            name="endDate"
+            control={control}
+            render={({ field, fieldState }) => (
+              <DatePicker
+                datePickerType="single"
+                onChange={(e) => field.onChange(e[0])}
+                className={styles.formDatePicker}>
+                <DatePickerInput
+                  placeholder="mm/dd/yyyy"
+                  labelText={t('endDate', 'End Date')}
+                  id="endDate-picker"
+                  size="md"
+                  className={styles.formDatePicker}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}
+                />
+              </DatePicker>
+            )}
+          />
+        </div>
+      </div>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('no', 'No')}
+        </Button>
+        <Button type="submit" kind="danger" disabled={isSubmitting}>
+          {t('yes', 'Yes')}
+        </Button>
+      </ModalFooter>
+    </form>
+  );
+};
+
+export default EndRelationshipModal;

packages/esm-patient-clinical-view-app/src/case-management/modal/case-management-modal.scss

@@ -0,0 +1,19 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.formDatePicker input {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: 1px solid colors.$gray-50;
+  padding: layout.$spacing-04 layout.$spacing-05;
+  background-color: colors.$white;
+}
+
+.centeredContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: layout.$spacing-06 layout.$spacing-07;
+}

packages/esm-patient-clinical-view-app/src/case-management/modal/case-management-modal.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { updateRelationship } from '../../relationships/relationship.resources';
+import { showSnackbar } from '@openmrs/esm-framework';
+import EndRelationshipModal from './case-management-modal.component';
+import { SWRConfig } from 'swr';
+
+jest.mock('../../relationships/relationship.resources', () => ({
+  updateRelationship: jest.fn(),
+}));
+
+jest.mock('@openmrs/esm-framework', () => ({
+  showSnackbar: jest.fn(),
+}));
+
+describe('EndRelationshipModal', () => {
+  const mockCloseModal = jest.fn();
+  const mockRelationshipUuid = 'test-uuid';
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the modal with the correct content', () => {
+    render(<EndRelationshipModal closeModal={mockCloseModal} relationshipUuid={mockRelationshipUuid} />);
+
+    expect(screen.getByText(/end relationship/i)).toBeInTheDocument();
+    expect(screen.getByText(/this will end the relationship. are you sure you want to proceed\?/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/end date/i)).toBeInTheDocument();
+  });
+
+  it('closes the modal when the No button is clicked', () => {
+    render(<EndRelationshipModal closeModal={mockCloseModal} relationshipUuid={mockRelationshipUuid} />);
+
+    const noButton = screen.getByRole('button', { name: /no/i });
+    fireEvent.click(noButton);
+
+    expect(mockCloseModal).toHaveBeenCalledTimes(1);
+  });
+});

packages/esm-patient-clinical-view-app/src/case-management/table/case-management-list-active-component.tsx

@@ -14,18 +14,30 @@ import {
   Layer,
   Tile,
   OverflowMenu,
+  Tag,
+  OverflowMenuItem,
 } from '@carbon/react';
 import { CardHeader, EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
-import { ConfigurableLink, isDesktop, useLayoutType, useSession } from '@openmrs/esm-framework';
+import {
+  ConfigurableLink,
+  isDesktop,
+  launchWorkspace,
+  showModal,
+  showSnackbar,
+  useLayoutType,
+  useSession,
+} from '@openmrs/esm-framework';
 import styles from './case-management-list.scss';
 import { useActivecases } from '../workspace/case-management.resource';
 import { extractNameString, uppercaseText } from '../../utils/expression-helper';
+import { updateRelationship } from '../../relationships/relationship.resources';
 
 interface CaseManagementListActiveProps {
   setActiveCasesCount: (count: number) => void;
+  activeTabIndex: number;
 }
 
-const CaseManagementListActive: React.FC<CaseManagementListActiveProps> = ({ setActiveCasesCount }) => {
+const CaseManagementListActive: React.FC<CaseManagementListActiveProps> = ({ setActiveCasesCount, activeTabIndex }) => {
   const { t } = useTranslation();
   const layout = useLayoutType();
   const [pageSize, setPageSize] = useState(10);
@@ -35,14 +47,15 @@ const CaseManagementListActive: React.FC<CaseManagementListActiveProps> = ({ set
   const { user } = useSession();
   const caseManagerPersonUuid = user?.person.uuid;
 
-  const { data: activeCasesData, error: activeCasesError } = useActivecases(caseManagerPersonUuid);
+  const { data: activeCasesData, error: activeCasesError, mutate: fetchCases } = useActivecases(caseManagerPersonUuid);
 
   const patientChartUrl = '${openmrsSpaBase}/patient/${patientUuid}/chart/case-management-encounters';
 
   const headers = [
     { key: 'names', header: t('names', 'Names') },
     { key: 'dateofstart', header: t('dateofstart', 'Start Date') },
     { key: 'dateofend', header: t('dateofend', 'End Date') },
+    { key: 'actions', header: t('actions', 'Actions') },
   ];
 
   const filteredCases = activeCasesData?.data.results.filter(
@@ -51,6 +64,12 @@ const CaseManagementListActive: React.FC<CaseManagementListActiveProps> = ({ set
       (extractNameString(caseData.personB.display).toLowerCase().includes(searchTerm.toLowerCase()) ||
         caseData.personB.display.toLowerCase().includes(searchTerm.toLowerCase())),
   );
+  const handleDiscontinueACase = async (relationshipUuid: string) => {
+    const dispose = showModal('end-relationship-dialog', {
+      closeModal: () => dispose(),
+      relationshipUuid,
+    });
+  };
 
   const tableRows = filteredCases
     ?.slice((currentPage - 1) * pageSize, currentPage * pageSize)
@@ -65,7 +84,23 @@ const CaseManagementListActive: React.FC<CaseManagementListActiveProps> = ({ set
         </ConfigurableLink>
       ),
       dateofstart: new Date(caseData.startDate).toLocaleDateString(),
-      dateofend: caseData.endDate ? new Date(caseData.endDate).toLocaleDateString() : '-',
+      dateofend: caseData.endDate ? (
+        new Date(caseData.endDate).toLocaleDateString()
+      ) : (
+        <Tag type="green" size="lg">
+          {t('enrolled', 'Enrolled')}
+        </Tag>
+      ),
+      actions: (
+        <OverflowMenu size="md">
+          <OverflowMenuItem
+            isDelete
+            itemText={t('discontinue', 'Discontinue')}
+            disabled={activeTabIndex === 1}
+            onClick={() => handleDiscontinueACase(caseData.uuid)}
+          />
+        </OverflowMenu>
+      ),
     }));
 
   useEffect(() => {