@openmrs/esm-fast-data-entry-app 1.0.1-pre.171 → 1.0.1-pre.176

package/src/form-entry-workflow/patient-banner/PatientBanner.test.tsx

@@ -1,9 +1,9 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import PatientBanner from "./PatientBanner";
+import React from 'react';
+import { render } from '@testing-library/react';
+import PatientBanner from './PatientBanner';
 
-describe("PatientBanner", () => {
-  it("renders placeholder information when no data is present", () => {
+describe('PatientBanner', () => {
+  it('renders placeholder information when no data is present', () => {
     render(<PatientBanner />);
   });
 });

package/src/form-entry-workflow/patient-banner/PatientBanner.tsx

@@ -1,10 +1,10 @@
-import { age, ExtensionSlot } from "@openmrs/esm-framework";
-import { SkeletonPlaceholder, SkeletonText } from "@carbon/react";
-import React, { useContext } from "react";
-import styles from "./styles.scss";
-import { useTranslation } from "react-i18next";
-import useGetPatient from "../../hooks/useGetPatient";
-import FormWorkflowContext from "../../context/FormWorkflowContext";
+import { age, ExtensionSlot } from '@openmrs/esm-framework';
+import { SkeletonPlaceholder, SkeletonText } from '@carbon/react';
+import React, { useContext } from 'react';
+import styles from './styles.scss';
+import { useTranslation } from 'react-i18next';
+import useGetPatient from '../../hooks/useGetPatient';
+import FormWorkflowContext from '../../context/FormWorkflowContext';
 
 const SkeletonPatientInfo = () => {
   return (
@@ -36,16 +36,14 @@ const PatientBanner = () => {
   const { activePatientUuid, workflowState } = useContext(FormWorkflowContext);
   const patient = useGetPatient(activePatientUuid);
   const { t } = useTranslation();
-  const patientName = `${patient?.name?.[0].given?.join(" ")} ${
-    patient?.name?.[0]?.family
-  }`;
+  const patientName = `${patient?.name?.[0].given?.join(' ')} ${patient?.name?.[0]?.family}`;
 
   const patientPhotoSlotState = React.useMemo(
-    () => ({ patientUuid: patient?.id, patientName, size: "small" }),
-    [patient?.id, patientName]
+    () => ({ patientUuid: patient?.id, patientName, size: 'small' }),
+    [patient?.id, patientName],
   );
 
-  if (workflowState === "NEW_PATIENT") return null;
+  if (workflowState === 'NEW_PATIENT') return null;
 
   if (!patient) {
     return <SkeletonPatientInfo />;
@@ -53,29 +51,18 @@ const PatientBanner = () => {
 
   return (
     <div className={styles.container}>
-      <ExtensionSlot
-        extensionSlotName="patient-photo-slot"
-        state={patientPhotoSlotState}
-      />
+      <ExtensionSlot extensionSlotName="patient-photo-slot" state={patientPhotoSlotState} />
       <div className={styles.patientInfoContent}>
         <div className={styles.patientInfoRow}>
           <span className={styles.patientName}>{patientName}</span>
         </div>
         <div className={styles.patientInfoRow}>
-          <span>
-            {(patient.gender ?? t("unknown", "Unknown")).replace(/^\w/, (c) =>
-              c.toUpperCase()
-            )}
-          </span>
+          <span>{(patient.gender ?? t('unknown', 'Unknown')).replace(/^\w/, (c) => c.toUpperCase())}</span>
           <span>&middot;</span>
           <span>{age(patient.birthDate)}</span>
           <span>&middot;</span>
           <span>
-            {patient.identifier.length
-              ? patient.identifier
-                  .map((identifier) => identifier.value)
-                  .join(", ")
-              : "--"}
+            {patient.identifier.length ? patient.identifier.map((identifier) => identifier.value).join(', ') : '--'}
           </span>
         </div>
       </div>

package/src/form-entry-workflow/patient-banner/index.ts

@@ -1,3 +1,3 @@
-import PatientBanner from "./PatientBanner";
+import PatientBanner from './PatientBanner';
 
 export default PatientBanner;

package/src/form-entry-workflow/patient-search-header/PatientSearchHeader.tsx

@@ -1,58 +1,49 @@
-import { Add, Close } from "@carbon/react/icons";
-import {
-  ExtensionSlot,
-  interpolateUrl,
-  navigate,
-} from "@openmrs/esm-framework";
-import { Button } from "@carbon/react";
-import React, { useContext } from "react";
-import { Link } from "react-router-dom";
-import FormWorkflowContext from "../../context/FormWorkflowContext";
-import styles from "./styles.scss";
-import { useTranslation } from "react-i18next";
+import { Add, Close } from '@carbon/react/icons';
+import { ExtensionSlot, interpolateUrl, navigate } from '@openmrs/esm-framework';
+import { Button } from '@carbon/react';
+import React, { useContext } from 'react';
+import { Link } from 'react-router-dom';
+import FormWorkflowContext from '../../context/FormWorkflowContext';
+import styles from './styles.scss';
+import { useTranslation } from 'react-i18next';
 
 const PatientSearchHeader = () => {
-  const { addPatient, workflowState, activeFormUuid } =
-    useContext(FormWorkflowContext);
+  const { addPatient, workflowState, activeFormUuid } = useContext(FormWorkflowContext);
   const handleSelectPatient = (patient) => {
     addPatient(patient);
   };
   const { t } = useTranslation();
 
-  if (workflowState !== "NEW_PATIENT") return null;
+  if (workflowState !== 'NEW_PATIENT') return null;
 
-  const afterUrl = encodeURIComponent(
-    `\${openmrsSpaBase}/forms/form/${activeFormUuid}?patientUuid=\${patientUuid}`
-  );
-  const patientRegistrationUrl = interpolateUrl(
-    `\${openmrsSpaBase}/patient-registration?afterUrl=${afterUrl}`
-  );
+  const afterUrl = encodeURIComponent(`\${openmrsSpaBase}/forms/form/${activeFormUuid}?patientUuid=\${patientUuid}`);
+  const patientRegistrationUrl = interpolateUrl(`\${openmrsSpaBase}/patient-registration?afterUrl=${afterUrl}`);
 
   return (
     <div className={styles.searchHeaderContainer}>
-      <span className={styles.padded}>{t("nextPatient", "Next patient")}:</span>
+      <span className={styles.padded}>{t('nextPatient', 'Next patient')}:</span>
       <span className={styles.searchBarWrapper}>
         <ExtensionSlot
           name="patient-search-bar-slot"
           state={{
             selectPatientAction: handleSelectPatient,
             buttonProps: {
-              kind: "primary",
+              kind: 'primary',
             },
           }}
         />
       </span>
-      <span className={styles.padded}>{t("or", "or")}</span>
+      <span className={styles.padded}>{t('or', 'or')}</span>
       <span>
         <Button onClick={() => navigate({ to: patientRegistrationUrl })}>
-          {t("createNewPatient", "Create new patient")} <Add size={20} />
+          {t('createNewPatient', 'Create new patient')} <Add size={20} />
         </Button>
       </span>
       <span style={{ flexGrow: 1 }} />
       <span>
         <Link to="../">
           <Button kind="ghost">
-            {t("cancel", "Cancel")} <Close size={20} />
+            {t('cancel', 'Cancel')} <Close size={20} />
           </Button>
         </Link>
       </span>

package/src/form-entry-workflow/patient-search-header/index.ts

@@ -1,3 +1,3 @@
-import PatientSearchHeader from "./PatientSearchHeader";
+import PatientSearchHeader from './PatientSearchHeader';
 
 export default PatientSearchHeader;

package/src/form-entry-workflow/workflow-review/WorkflowReview.tsx

@@ -1,10 +1,10 @@
-import { Button } from "@carbon/react";
-import React, { useContext } from "react";
-import { useNavigate } from "react-router-dom";
-import FormWorkflowContext from "../../context/FormWorkflowContext";
-import FormReviewCard from "../form-review-card";
-import styles from "./styles.scss";
-import { useTranslation } from "react-i18next";
+import { Button } from '@carbon/react';
+import React, { useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
+import FormWorkflowContext from '../../context/FormWorkflowContext';
+import FormReviewCard from '../form-review-card';
+import styles from './styles.scss';
+import { useTranslation } from 'react-i18next';
 
 const WorkflowReview = () => {
   const { patientUuids } = useContext(FormWorkflowContext);
@@ -14,13 +14,13 @@ const WorkflowReview = () => {
     <div className={styles.workspaceWrapper}>
       <div className={styles.workspace}>
         <div className={styles.leftPanel}>
-          <h4>{t("review", "Review")}</h4>
+          <h4>{t('review', 'Review')}</h4>
           <div className={styles.navButtons}>
-            <Button kind="primary" onClick={() => navigate("/")}>
-              {t("save&close", "Save & Close")}
+            <Button kind="primary" onClick={() => navigate('/')}>
+              {t('save&close', 'Save & Close')}
             </Button>
-            <Button kind="tertiary" onClick={() => navigate("/")}>
-              {t("cancel", "Cancel")}
+            <Button kind="tertiary" onClick={() => navigate('/')}>
+              {t('cancel', 'Cancel')}
             </Button>
           </div>
         </div>

package/src/form-entry-workflow/workflow-review/index.ts

@@ -1,3 +1,3 @@
-import WorkflowReview from "./WorkflowReview";
+import WorkflowReview from './WorkflowReview';
 
 export default WorkflowReview;

package/src/forms-app-menu-link.tsx

@@ -1,13 +1,11 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { ConfigurableLink } from "@openmrs/esm-framework";
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ConfigurableLink } from '@openmrs/esm-framework';
 
 export default function FormsAppMenuLink() {
   const { t } = useTranslation();
   return (
     // eslint-disable-next-line
-    <ConfigurableLink to="${openmrsSpaBase}/forms">
-      {t("formsAppMenuLink", "Fast Data Entry")}
-    </ConfigurableLink>
+    <ConfigurableLink to="${openmrsSpaBase}/forms">{t('formsAppMenuLink', 'Fast Data Entry')}</ConfigurableLink>
   );
 }

package/src/forms-page/FormsPage.tsx

@@ -1,19 +1,13 @@
-import { useConfig, useSession } from "@openmrs/esm-framework";
-import { Tab, Tabs, TabList, TabPanels, TabPanel } from "@carbon/react";
-import React from "react";
-import { type Config } from "../config-schema";
-import { useGetAllForms } from "../hooks";
-import FormsTable from "./forms-table";
-import styles from "./styles.scss";
-import { useTranslation } from "react-i18next";
-import {
-  fdeWorkflowStorageName,
-  fdeWorkflowStorageVersion,
-} from "../context/FormWorkflowReducer";
-import {
-  fdeGroupWorkflowStorageName,
-  fdeGroupWorkflowStorageVersion,
-} from "../context/GroupFormWorkflowReducer";
+import { useConfig, useSession } from '@openmrs/esm-framework';
+import { Tab, Tabs, TabList, TabPanels, TabPanel } from '@carbon/react';
+import React from 'react';
+import { type Config } from '../config-schema';
+import { useGetAllForms } from '../hooks';
+import FormsTable from './forms-table';
+import styles from './styles.scss';
+import { useTranslation } from 'react-i18next';
+import { fdeWorkflowStorageName, fdeWorkflowStorageVersion } from '../context/FormWorkflowReducer';
+import { fdeGroupWorkflowStorageName, fdeGroupWorkflowStorageVersion } from '../context/GroupFormWorkflowReducer';
 
 // helper function useful for debugging
 // given a list of forms, it will organize into permissions
@@ -25,7 +19,7 @@ export const getFormPermissions = (forms) => {
       (output[form.encounterType.editPrivilege.display] = [
         ...(output[form.encounterType.editPrivilege.display] || []),
         form.display,
-      ])
+      ]),
   );
   return output;
 };
@@ -50,35 +44,23 @@ const FormsPage = () => {
   const { forms, isLoading, error } = useGetAllForms();
   const cleanRows = prepareRowsForTable(forms);
   const { user } = useSession();
-  const savedFormsData = localStorage.getItem(
-    fdeWorkflowStorageName + ":" + user?.uuid
-  );
-  const savedGroupFormsData = localStorage.getItem(
-    fdeGroupWorkflowStorageName + ":" + user?.uuid
-  );
+  const savedFormsData = localStorage.getItem(fdeWorkflowStorageName + ':' + user?.uuid);
+  const savedGroupFormsData = localStorage.getItem(fdeGroupWorkflowStorageName + ':' + user?.uuid);
   const activeForms = [];
   const activeGroupForms = [];
 
-  if (
-    savedFormsData &&
-    JSON.parse(savedFormsData)?.["_storageVersion"] ===
-      fdeWorkflowStorageVersion
-  ) {
+  if (savedFormsData && JSON.parse(savedFormsData)?.['_storageVersion'] === fdeWorkflowStorageVersion) {
     Object.entries(JSON.parse(savedFormsData).forms).forEach(
       ([formUuid, form]: [string, { [key: string]: unknown }]) => {
         if (form.workflowState) activeForms.push(formUuid);
-      }
+      },
     );
   }
-  if (
-    savedGroupFormsData &&
-    JSON.parse(savedGroupFormsData)?.["_storageVersion"] ===
-      fdeGroupWorkflowStorageVersion
-  ) {
+  if (savedGroupFormsData && JSON.parse(savedGroupFormsData)?.['_storageVersion'] === fdeGroupWorkflowStorageVersion) {
     Object.entries(JSON.parse(savedGroupFormsData).forms).forEach(
       ([formUuid, form]: [string, { [key: string]: unknown }]) => {
         if (form.workflowState) activeGroupForms.push(formUuid);
-      }
+      },
     );
   }
 
@@ -94,15 +76,11 @@ const FormsPage = () => {
 
   return (
     <div className={styles.mainContent}>
-      <h3 className={styles.pageTitle}>
-        {t("fastDataEntry", "Fast Data Entry")}
-      </h3>
+      <h3 className={styles.pageTitle}>{t('fastDataEntry', 'Fast Data Entry')}</h3>
       <Tabs>
         <TabList>
-          <Tab label={t("allForms", "All Forms")}>
-            {`${t("allForms", "All Forms")} (${
-              cleanRows ? cleanRows?.length : "??"
-            })`}
+          <Tab label={t('allForms', 'All Forms')}>
+            {`${t('allForms', 'All Forms')} (${cleanRows ? cleanRows?.length : '??'})`}
           </Tab>
           {categoryRows?.map((category, index) => (
             <Tab label={category.name} key={index}>
@@ -112,17 +90,11 @@ const FormsPage = () => {
         </TabList>
         <TabPanels>
           <TabPanel>
-            <FormsTable
-              rows={cleanRows}
-              {...{ error, isLoading, activeForms, activeGroupForms }}
-            />
+            <FormsTable rows={cleanRows} {...{ error, isLoading, activeForms, activeGroupForms }} />
           </TabPanel>
           {categoryRows?.map((category, index) => (
             <TabPanel key={index}>
-              <FormsTable
-                rows={category.rows}
-                {...{ error, isLoading, activeForms, activeGroupForms }}
-              />
+              <FormsTable rows={category.rows} {...{ error, isLoading, activeForms, activeGroupForms }} />
             </TabPanel>
           ))}
         </TabPanels>

package/src/forms-page/forms-table/FormsTable.tsx

@@ -1,4 +1,4 @@
-import { ErrorState } from "@openmrs/esm-framework";
+import { ErrorState } from '@openmrs/esm-framework';
 import {
   DataTable,
   DataTableSkeleton,
@@ -12,35 +12,29 @@ import {
   TableToolbar,
   TableToolbarContent,
   TableToolbarSearch,
-} from "@carbon/react";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
-import EmptyState from "../../empty-state/EmptyState";
-import styles from "./styles.scss";
+} from '@carbon/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import EmptyState from '../../empty-state/EmptyState';
+import styles from './styles.scss';
 
-const FormsTable = ({
-  rows,
-  error,
-  isLoading,
-  activeForms,
-  activeGroupForms,
-}) => {
+const FormsTable = ({ rows, error, isLoading, activeForms, activeGroupForms }) => {
   const { t } = useTranslation();
 
   const tableHeaders = [
     {
-      key: "display",
-      header: t("formName", "Form Name"),
+      key: 'display',
+      header: t('formName', 'Form Name'),
       isSortable: true,
     },
     {
-      key: "actions",
-      header: t("actions", "Actions"),
+      key: 'actions',
+      header: t('actions', 'Actions'),
     },
     {
-      key: "actions2",
-      header: "",
+      key: 'actions2',
+      header: '',
     },
   ];
 
@@ -48,50 +42,36 @@ const FormsTable = ({
     ...row,
     actions: (
       <Link to={`form/${row.uuid}`}>
-        {activeForms.includes(row.uuid)
-          ? t("resumeSession", "Resume Session")
-          : t("fillForm", "Fill Form")}
+        {activeForms.includes(row.uuid) ? t('resumeSession', 'Resume Session') : t('fillForm', 'Fill Form')}
       </Link>
     ),
     actions2: (
       <Link to={`groupform/${row.uuid}`}>
         {activeGroupForms.includes(row.uuid)
-          ? t("resumeGroupSession", "Resume Group Session")
-          : t("startGroupSession", "Start Group Session")}
+          ? t('resumeGroupSession', 'Resume Group Session')
+          : t('startGroupSession', 'Start Group Session')}
       </Link>
     ),
   }));
 
   if (isLoading) return <DataTableSkeleton />;
   if (error) {
-    return (
-      <ErrorState
-        headerTitle={t("errorLoadingData", "Error Loading Data")}
-        error={error}
-      />
-    );
+    return <ErrorState headerTitle={t('errorLoadingData', 'Error Loading Data')} error={error} />;
   }
   if (augmentedRows.length === 0) {
     return (
       <EmptyState
-        headerTitle={t("noFormsFound", "No Forms To Show")}
+        headerTitle={t('noFormsFound', 'No Forms To Show')}
         displayText={t(
-          "noFormsFoundMessage",
-          "No forms could be found for this category. Please double check the form concept uuids and access permissions."
+          'noFormsFoundMessage',
+          'No forms could be found for this category. Please double check the form concept uuids and access permissions.',
         )}
       />
     );
   }
   return (
     <DataTable rows={augmentedRows} headers={tableHeaders}>
-      {({
-        rows,
-        headers,
-        getTableProps,
-        getHeaderProps,
-        getRowProps,
-        onInputChange,
-      }) => {
+      {({ rows, headers, getTableProps, getHeaderProps, getRowProps, onInputChange }) => {
         return (
           <TableContainer>
             <div className={styles.toolbarWrapper}>

package/src/forms-page/forms-table/index.ts

@@ -1,3 +1,3 @@
-import FormsTable from "./FormsTable";
+import FormsTable from './FormsTable';
 
 export default FormsTable;

package/src/forms-page/index.ts

@@ -1,3 +1,3 @@
-import FormsPage from "./FormsPage";
+import FormsPage from './FormsPage';
 
 export default FormsPage;

package/src/group-form-entry-workflow/GroupFormEntryWorkflow.tsx

@@ -1,11 +1,11 @@
-import { ExtensionSlot } from "@openmrs/esm-framework";
-import React from "react";
-import GroupDisplayHeader from "./group-display-header";
-import styles from "./styles.scss";
-import { GroupFormWorkflowProvider } from "../context/GroupFormWorkflowContext";
-import GroupSearchHeader from "./group-search-header";
-import SessionMetaWorkspace from "./SessionMetaWorkspace";
-import GroupSessionWorkspace from "./GroupSessionWorkspace";
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import React from 'react';
+import GroupDisplayHeader from './group-display-header';
+import styles from './styles.scss';
+import { GroupFormWorkflowProvider } from '../context/GroupFormWorkflowContext';
+import GroupSearchHeader from './group-search-header';
+import SessionMetaWorkspace from './SessionMetaWorkspace';
+import GroupSessionWorkspace from './GroupSessionWorkspace';
 
 const GroupFormEntryWorkflow = () => {
   return (

package/src/group-form-entry-workflow/GroupSessionWorkspace.tsx

@@ -1,48 +1,32 @@
-import {
-  getGlobalStore,
-  useConfig,
-  useSession,
-  useStore,
-} from "@openmrs/esm-framework";
-import { Button } from "@carbon/react";
-import React, { useCallback, useContext, useEffect, useState } from "react";
-import PatientCard from "../patient-card/PatientCard";
-import styles from "./styles.scss";
-import { useTranslation } from "react-i18next";
-import { v4 as uuid } from "uuid";
-import GroupFormWorkflowContext from "../context/GroupFormWorkflowContext";
-import FormBootstrap from "../FormBootstrap";
-import CompleteModal from "../CompleteModal";
-import CancelModal from "../CancelModal";
+import { getGlobalStore, useConfig, useSession, useStore } from '@openmrs/esm-framework';
+import { Button } from '@carbon/react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import PatientCard from '../patient-card/PatientCard';
+import styles from './styles.scss';
+import { useTranslation } from 'react-i18next';
+import { v4 as uuid } from 'uuid';
+import GroupFormWorkflowContext from '../context/GroupFormWorkflowContext';
+import FormBootstrap from '../FormBootstrap';
+import CompleteModal from '../CompleteModal';
+import CancelModal from '../CancelModal';
 
-const formStore = getGlobalStore("ampath-form-state");
+const formStore = getGlobalStore('ampath-form-state');
 
 const WorkflowNavigationButtons = () => {
   const context = useContext(GroupFormWorkflowContext);
-  const {
-    activeFormUuid,
-    submitForNext,
-    patientUuids,
-    activePatientUuid,
-    workflowState,
-  } = context;
+  const { activeFormUuid, submitForNext, patientUuids, activePatientUuid, workflowState } = context;
   const store = useStore(formStore);
   const formState = store[activeFormUuid];
   const navigationDisabled =
-    (formState !== "ready" || workflowState !== "EDIT_FORM") &&
-    formState !== "readyWithValidationErrors";
+    (formState !== 'ready' || workflowState !== 'EDIT_FORM') && formState !== 'readyWithValidationErrors';
   const [cancelModalOpen, setCancelModalOpen] = useState(false);
   const [completeModalOpen, setCompleteModalOpen] = useState(false);
   const { t } = useTranslation();
 
-  const isLastPatient =
-    activePatientUuid === patientUuids[patientUuids.length - 1];
+  const isLastPatient = activePatientUuid === patientUuids[patientUuids.length - 1];
 
   const handleClickNext = () => {
-    if (
-      workflowState === "EDIT_FORM" ||
-      formState === "readyWithValidationErrors"
-    ) {
+    if (workflowState === 'EDIT_FORM' || formState === 'readyWithValidationErrors') {
       submitForNext();
     }
   };
@@ -50,33 +34,18 @@ const WorkflowNavigationButtons = () => {
   return (
     <>
       <div className={styles.rightPanelActionButtons}>
-        <Button
-          kind="primary"
-          onClick={handleClickNext}
-          disabled={navigationDisabled}
-        >
-          {isLastPatient
-            ? t("saveForm", "Save Form")
-            : t("nextPatient", "Next patient")}
+        <Button kind="primary" onClick={handleClickNext} disabled={navigationDisabled}>
+          {isLastPatient ? t('saveForm', 'Save Form') : t('nextPatient', 'Next patient')}
         </Button>
         <Button kind="secondary" onClick={() => setCompleteModalOpen(true)}>
-          {t("saveAndComplete", "Save & Complete")}
+          {t('saveAndComplete', 'Save & Complete')}
         </Button>
         <Button kind="tertiary" onClick={() => setCancelModalOpen(true)}>
-          {t("cancel", "Cancel")}
+          {t('cancel', 'Cancel')}
         </Button>
       </div>
-      <CancelModal
-        open={cancelModalOpen}
-        setOpen={setCancelModalOpen}
-        context={context}
-      />
-      <CompleteModal
-        open={completeModalOpen}
-        setOpen={setCompleteModalOpen}
-        context={context}
-        validateFirst={false}
-      />
+      <CancelModal open={cancelModalOpen} setOpen={setCancelModalOpen} context={context} />
+      <CompleteModal open={completeModalOpen} setOpen={setCompleteModalOpen} context={context} validateFirst={false} />
     </>
   );
 };
@@ -177,7 +146,7 @@ const GroupSessionWorkspace = () => {
       activePatientUuid,
       groupVisitTypeUuid,
       updateVisitUuid,
-    ]
+    ],
   );
 
   // Once form has been posted, save the new encounter uuid so we can edit it later
@@ -187,17 +156,17 @@ const GroupSessionWorkspace = () => {
         saveEncounter(encounter.uuid);
       }
     },
-    [saveEncounter]
+    [saveEncounter],
   );
 
   const switchPatient = useCallback(
     (patientUuid) => {
       submitForNext(patientUuid);
     },
-    [submitForNext]
+    [submitForNext],
   );
 
-  if (workflowState === "NEW_GROUP_SESSION") return null;
+  if (workflowState === 'NEW_GROUP_SESSION') return null;
 
   return (
     <div className={styles.workspace}>
@@ -214,7 +183,7 @@ const GroupSessionWorkspace = () => {
           />
         </div>
         <div className={styles.rightPanel}>
-          <h4>{t("formsFilled", "Forms filled")}</h4>
+          <h4>{t('formsFilled', 'Forms filled')}</h4>
           <div className={styles.patientCardsSection}>
             {patientUuids?.map((patientUuid) => (
               <PatientCard