solve the problem of mutual circular import

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iSunFA",
-  "version": "0.8.0+70",
+  "version": "0.8.0+71",
   "private": false,
   "scripts": {
     "dev": "next dev",

src/components/add_account_title_modal/add_account_title_modal.tsx

@@ -5,7 +5,6 @@ import { Button } from '@/components/button/button';
 import Skeleton from '@/components/skeleton/skeleton';
 import { useUserCtx } from '@/contexts/user_context';
 import { useAccountingCtx } from '@/contexts/accounting_context';
-// eslint-disable-next-line import/no-cycle
 import { useGlobalCtx } from '@/contexts/global_context';
 import APIHandler from '@/lib/utils/api_handler';
 import { APIName } from '@/constants/api_connection';

src/components/add_project_modal/add_project_modal.tsx

@@ -10,7 +10,6 @@ import { FiSearch } from 'react-icons/fi';
 import { IMember, dummyMemberList } from '@/interfaces/member';
 import { useTranslation } from 'next-i18next';
 import { useUserCtx } from '@/contexts/user_context';
-// eslint-disable-next-line import/no-cycle
 import { useGlobalCtx } from '@/contexts/global_context';
 import { APIName } from '@/constants/api_connection';
 import APIHandler from '@/lib/utils/api_handler';

src/components/camera_scanner/camera_scanner.tsx

@@ -6,7 +6,6 @@ import { GrLinkNext } from 'react-icons/gr';
 import { TbArrowBackUp } from 'react-icons/tb';
 
 // ToDo: (20240523 - Luphia) fix loop import issue
-// eslint-disable-next-line import/no-cycle
 import { useGlobalCtx } from '@/contexts/global_context';
 import { useAccountingCtx } from '@/contexts/accounting_context';
 import APIHandler from '@/lib/utils/api_handler';

src/components/company_invitation_modal/company_invitation_modal.tsx

@@ -3,7 +3,6 @@ import { Button } from '@/components/button/button';
 import { RxCross2 } from 'react-icons/rx';
 import { IToastify, ToastType } from '@/interfaces/toastify';
 import { ToastId } from '@/constants/toast_id';
-// eslint-disable-next-line import/no-cycle
 import { useGlobalCtx } from '@/contexts/global_context';
 import { MessageType } from '@/interfaces/message_modal';
 import APIHandler from '@/lib/utils/api_handler';

src/components/confirm_modal/confirm_modal.tsx

@@ -15,8 +15,6 @@ import { ILineItem } from '@/interfaces/line_item';
 import AccountingVoucherRow from '@/components/accounting_voucher_row/accounting_voucher_row';
 import AccountingVoucherRowMobile from '@/components/accounting_voucher_row/accounting_voucher_row_mobile';
 import { Button } from '@/components/button/button';
-// ToDo: (20240527 - Luphia) Fix me
-// eslint-disable-next-line import/no-cycle
 import { useGlobalCtx } from '@/contexts/global_context';
 import { MessageType } from '@/interfaces/message_modal';
 import { ToastType } from '@/interfaces/toastify';

src/components/create_company_modal/create_company_modal.tsx

@@ -2,7 +2,6 @@ import Image from 'next/image';
 import React, { useEffect, useState } from 'react';
 import { Button } from '@/components/button/button';
 import { RxCross2 } from 'react-icons/rx';
-// eslint-disable-next-line import/no-cycle
 import { useGlobalCtx } from '@/contexts/global_context';
 import { useUserCtx } from '@/contexts/user_context';
 import useOuterClick from '@/lib/hooks/use_outer_click';

src/components/edit_account_title_modal/edit_account_title_modal.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react';
 import { RxCross2 } from 'react-icons/rx';
 import { RiDeleteBinLine } from 'react-icons/ri';
-// eslint-disable-next-line import/no-cycle
 import { useGlobalCtx } from '@/contexts/global_context';
 import { useAccountingCtx } from '@/contexts/accounting_context';
 import { useUserCtx } from '@/contexts/user_context';

src/components/edit_bookmark_modal/edit_bookmark_modal.tsx

@@ -3,7 +3,6 @@ import React, { useEffect } from 'react';
 import { Button } from '@/components/button/button';
 import { useDashboardCtx } from '@/contexts/dashboard_context';
 import useOuterClick from '@/lib/hooks/use_outer_click';
-// eslint-disable-next-line import/no-cycle
 import { useGlobalCtx } from '@/contexts/global_context';
 import { useTranslation } from 'next-i18next';
 

src/components/preview_invoice_modal/preview_invoice_modal.tsx

@@ -5,7 +5,6 @@ import { PiShareFat } from 'react-icons/pi';
 import { timestampToString } from '@/lib/utils/common';
 import { IPreviewInvoiceModal } from '@/interfaces/preview_invoice_modal';
 import { Button } from '@/components/button/button';
-// eslint-disable-next-line import/no-cycle
 import { useGlobalCtx } from '@/contexts/global_context';
 import { MessageType } from '@/interfaces/message_modal';
 import { useTranslation } from 'next-i18next';

src/components/profile_upload_modal/profile_upload_modal.tsx

@@ -6,7 +6,6 @@ import { useTranslation } from 'next-i18next';
 import { Button } from '@/components/button/button';
 import APIHandler from '@/lib/utils/api_handler';
 import { APIName } from '@/constants/api_connection';
-// eslint-disable-next-line import/no-cycle
 import { useGlobalCtx } from '@/contexts/global_context';
 import { useUserCtx } from '@/contexts/user_context';
 import { FREE_COMPANY_ID, NON_EXISTING_COMPANY_ID } from '@/constants/config';

src/components/salary_sidebar/salary_sidebar.tsx

@@ -142,8 +142,7 @@ const SalarySidebar = () => {
         <button
           type="button"
           // ToDo: (20240802 - Julian) [Beta] Not released yet
-          // eslint-disable-next-line react/jsx-boolean-value
-          disabled={true}
+          disabled
           className="mx-auto p-16px text-tabs-text-default disabled:opacity-50"
         >
           <svg

src/components/team_setting_modal/team_setting_modal.tsx

@@ -4,7 +4,6 @@ import APIHandler from '@/lib/utils/api_handler';
 import { useUserCtx } from '@/contexts/user_context';
 import { APIName } from '@/constants/api_connection';
 import { ICompany } from '@/interfaces/company';
-// eslint-disable-next-line import/no-cycle
 import { useGlobalCtx } from '@/contexts/global_context';
 import { ToastType } from '@/interfaces/toastify';
 import { useTranslation } from 'next-i18next';

src/components/transfer_company_modal/transfer_company_modal.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef } from 'react';
 import { Button } from '@/components/button/button';
-// eslint-disable-next-line import/no-cycle
 import { useGlobalCtx } from '@/contexts/global_context';
 import { MessageType } from '@/interfaces/message_modal';
 import APIHandler from '@/lib/utils/api_handler';

src/contexts/global_context.tsx

@@ -9,50 +9,26 @@ import useWindowSize from '@/lib/hooks/use_window_size';
 import { LAYOUT_BREAKPOINT } from '@/constants/display';
 import { LayoutAssertion } from '@/interfaces/layout_assertion';
 import { IMessageModal, dummyMessageModalData } from '@/interfaces/message_modal';
-// eslint-disable-next-line import/no-cycle
-import ConfirmModal from '@/components/confirm_modal/confirm_modal';
 import AddAssetModal from '@/components/add_asset_modal/add_asset_modal';
-// eslint-disable-next-line import/no-cycle
-import CameraScanner from '@/components/camera_scanner/camera_scanner';
-// eslint-disable-next-line import/no-cycle
-import PreviewInvoiceModal from '@/components/preview_invoice_modal/preview_invoice_modal';
 import {
   IPreviewInvoiceModal,
   dummyPreviewInvoiceModalData,
 } from '@/interfaces/preview_invoice_modal';
 import EmbedCodeModal from '@/components/embed_code_modal/embed_code_modal';
 import Toast from '@/components/toast/toast';
 import { IToastify, ToastPosition, ToastType } from '@/interfaces/toastify';
-// eslint-disable-next-line import/no-cycle
-import CreateCompanyModal from '@/components/create_company_modal/create_company_modal';
-// eslint-disable-next-line import/no-cycle
-import CompanyInvitationModal from '@/components/company_invitation_modal/company_invitation_modal';
 import Link from 'next/link';
 import { ISUNFA_ROUTE } from '@/constants/url';
 import { useRouter } from 'next/router';
 import LoadingModal from '@/components/loading_modal/loading_modal';
 import { IConfirmModal, dummyConfirmModalData } from '@/interfaces/confirm_modal';
 import FilterOptionsModal from '@/components/filter_options_modal/filter_options_modal';
-// eslint-disable-next-line import/no-cycle
-import AddProjectModal from '@/components/add_project_modal/add_project_modal';
 import { useUserCtx } from '@/contexts/user_context';
 import { useNotificationCtx } from '@/contexts/notification_context';
 import { ProjectStage } from '@/constants/project';
-// eslint-disable-next-line import/no-cycle
-import EditBookmarkModal from '@/components/edit_bookmark_modal/edit_bookmark_modal';
-// eslint-disable-next-line import/no-cycle
-import ProfileUploadModal from '@/components/profile_upload_modal/profile_upload_modal';
 import SalaryBookConfirmModal from '@/components/salary_book_confirm_modal/salary_book_confirm_modal';
 import { ToastId } from '@/constants/toast_id';
 import { useTranslation } from 'next-i18next';
-// eslint-disable-next-line import/no-cycle
-import AddAccountTitleModal from '@/components/add_account_title_modal/add_account_title_modal';
-// eslint-disable-next-line import/no-cycle
-import EditAccountTitleModal from '@/components/edit_account_title_modal/edit_account_title_modal';
-// eslint-disable-next-line import/no-cycle
-import TeamSettingModal from '@/components/team_setting_modal/team_setting_modal';
-// eslint-disable-next-line import/no-cycle
-import TransferCompanyModal from '@/components/transfer_company_modal/transfer_company_modal';
 import { UploadType } from '@/constants/file';
 import LoginConfirmModal from '@/components/login_confirm_modal/login_confirm_modal';
 
@@ -182,7 +158,7 @@ export const GlobalProvider = ({ children }: IGlobalProvider) => {
   const [isCameraScannerVisible, setIsCameraScannerVisible] = useState(false);
 
   const [isPreviewInvoiceModalVisible, setIsPreviewInvoiceModalVisible] = useState(false);
-  const [previewInvoiceModalData, setPreviewInvoiceModalData] = useState<IPreviewInvoiceModal>(
+  const [, setPreviewInvoiceModalData] = useState<IPreviewInvoiceModal>(
     dummyPreviewInvoiceModalData
   );
 
@@ -209,20 +185,18 @@ export const GlobalProvider = ({ children }: IGlobalProvider) => {
     useState<IFilterOptions>(DUMMY_FILTER_OPTIONS);
 
   const [isAddProjectModalVisible, setIsAddProjectModalVisible] = useState(false);
-  const [addProjectDefaultStage, setAddProjectDefaultStage] = useState<ProjectStage>(
-    ProjectStage.SELLING
-  );
+  const [, setAddProjectDefaultStage] = useState<ProjectStage>(ProjectStage.SELLING);
 
   const [profileUploadModalVisible, setProfileUploadModalVisible] = useState(false);
-  const [uploadImageType, setUploadImageType] = useState<UploadType>(UploadType.USER);
+  const [, setUploadImageType] = useState<UploadType>(UploadType.USER);
 
   const [isSalaryBookConfirmModalVisible, setIsSalaryBookConfirmModalVisible] = useState(false);
 
   const [isAddAccountTitleModalVisible, setIsAddAccountTitleModalVisible] = useState(false);
-  const [addAccountTitleId, setAddAccountTitleId] = useState(0);
+  const [, setAddAccountTitleId] = useState(0);
 
   const [isEditAccountTitleModalVisible, setIsEditAccountTitleModalVisible] = useState(false);
-  const [editAccountTitleId, setEditAccountTitleId] = useState(0);
+  const [, setEditAccountTitleId] = useState(0);
 
   const [isTeamSettingModalVisible, setIsTeamSettingModalVisible] = useState(false);
 
@@ -746,63 +720,24 @@ export const GlobalProvider = ({ children }: IGlobalProvider) => {
         isModalVisible={isPasskeySupportModalVisible}
         modalVisibilityHandler={passKeySupportModalVisibilityHandler}
       />
-      {/* Todo: (20240829 - Anna) 修改循環引用問題 */}
-      <EditBookmarkModal
-        isModalVisible={isAddBookmarkModalVisible}
-        modalVisibilityHandler={addBookmarkModalVisibilityHandler}
-      />
-
       <MessageModal
         isModalVisible={isMessageModalVisible}
         modalVisibilityHandler={messageModalVisibilityHandler}
         messageModalData={messageModalData}
       />
-
-      <ConfirmModal
-        isModalVisible={isConfirmModalVisible}
-        modalVisibilityHandler={confirmModalVisibilityHandler}
-        confirmData={confirmModalData}
-      />
-
       <AddAssetModal
         isModalVisible={isAddAssetModalVisible}
         modalVisibilityHandler={addAssetModalVisibilityHandler}
       />
-
-      <CameraScanner
-        isModalVisible={isCameraScannerVisible}
-        modalVisibilityHandler={cameraScannerVisibilityHandler}
-      />
-
-      <PreviewInvoiceModal
-        isModalVisible={isPreviewInvoiceModalVisible}
-        modalVisibilityHandler={previewInvoiceModalVisibilityHandler}
-        previewInvoiceModalData={previewInvoiceModalData}
-      />
-
       <EmbedCodeModal
         isModalVisible={isEmbedCodeModalVisible}
         modalVisibilityHandler={embedCodeModalVisibilityHandler}
       />
-
-      <CreateCompanyModal
-        isModalVisible={isCreateCompanyModalVisible}
-        modalVisibilityHandler={createCompanyModalVisibilityHandler}
-      />
-
-      <CompanyInvitationModal
-        isModalVisible={isCompanyInvitationModalVisible}
-        modalVisibilityHandler={companyInvitationModalVisibilityHandler}
-        toastHandler={toastHandler}
-      />
-
       <LoadingModal
         isModalVisible={isLoadingModalVisible}
         modalVisibilityHandler={loadingModalVisibilityHandler}
       />
-
       <Toast />
-
       <FilterOptionsModal
         isModalVisible={isFilterOptionsModalForPendingVisible}
         filterType={FilterOptionsModalType.pending}
@@ -821,46 +756,10 @@ export const GlobalProvider = ({ children }: IGlobalProvider) => {
         modalVisibilityHandler={filterOptionsModalVisibilityHandlerForContract}
         getFilterOptions={getFilterOptionsForContract}
       />
-
-      <AddProjectModal
-        isModalVisible={isAddProjectModalVisible}
-        modalVisibilityHandler={addProjectModalVisibilityHandler}
-        defaultStage={addProjectDefaultStage}
-      />
-
-      <ProfileUploadModal
-        isModalVisible={profileUploadModalVisible}
-        modalVisibilityHandler={profileUploadModalVisibilityHandler}
-        uploadType={uploadImageType}
-      />
-
       <SalaryBookConfirmModal
         isModalVisible={isSalaryBookConfirmModalVisible}
         modalVisibilityHandler={salaryBookConfirmModalVisibilityHandler}
       />
-
-      <AddAccountTitleModal
-        isModalVisible={isAddAccountTitleModalVisible}
-        modalVisibilityHandler={addAccountTitleModalVisibilityHandler}
-        modalData={{ accountId: addAccountTitleId }}
-      />
-
-      <EditAccountTitleModal
-        isModalVisible={isEditAccountTitleModalVisible}
-        modalVisibilityHandler={editAccountTitleModalVisibilityHandler}
-        modalData={{ accountId: editAccountTitleId }}
-      />
-
-      <TeamSettingModal
-        isModalVisible={isTeamSettingModalVisible}
-        modalVisibilityHandler={teamSettingModalVisibilityHandler}
-      />
-
-      <TransferCompanyModal
-        isModalVisible={isTransferCompanyModalVisible}
-        modalVisibilityHandler={transferCompanyModalVisibilityHandler}
-      />
-
       <LoginConfirmModal
         id="agree-with-information"
         isModalVisible={isAgreeWithInfomationConfirmModalVisible}
@@ -872,7 +771,6 @@ export const GlobalProvider = ({ children }: IGlobalProvider) => {
         infoModalVisibilityHandler={agreeWithInfomationConfirmModalVisibilityHandler}
         tosModalVisibilityHandler={TOSNPrivacyPolicyConfirmModalVisibilityHandler}
       />
-
       <LoginConfirmModal
         id="tos-n-privacy-policy"
         isModalVisible={isTOSNPrivacyPolicyConfirmModalVisible}