Avaries VMS - Ajouter l'option "Arrêt temporaire" dans les statuts d'avaries

backend/src/main/kotlin/fr/gouv/cnsp/monitorfish/domain/entities/beacon_malfunctions/VesselStatus.kt

@@ -6,6 +6,7 @@ enum class VesselStatus {
     NO_NEWS,
     ACTIVITY_DETECTED,
     TECHNICAL_STOP,
+    TEMPORARY_STOP,
     ON_SALE,
     SUSPENDED_BECAUSE_UNPAID,
     IN_FOREIGN_EEZ,

backend/src/main/resources/db/migration/internal/V0.289__Update_beacon_malfunctions_table.sql

@@ -0,0 +1,25 @@
+-- Re-create ENUM with 'TEMPORARY_STOP' value
+CREATE TYPE beacon_malfunctions_vessel_status_new AS ENUM (
+    'AT_SEA',
+    'AT_PORT',
+    'ON_SALE',
+    'SUSPENDED_BECAUSE_UNPAID',
+    'IN_FOREIGN_EEZ',
+    'NO_NEWS',
+    'TECHNICAL_STOP',
+    'TEMPORARY_STOP',
+    'ACTIVITY_DETECTED'
+);
+
+-- Convert to new type, casting via text representation
+ALTER TABLE beacon_malfunctions
+  ALTER COLUMN vessel_status TYPE beacon_malfunctions_vessel_status_new
+    USING (vessel_status::text::beacon_malfunctions_vessel_status_new);
+
+-- and swap the types
+DROP TYPE beacon_malfunctions_vessel_status;
+ALTER TYPE beacon_malfunctions_vessel_status_new RENAME TO beacon_malfunctions_vessel_status;
+
+
+
+

frontend/src/api/beaconMalfunction.ts

@@ -2,14 +2,14 @@ import { FrontendApiError } from '@libs/FrontendApiError'
 
 import { monitorfishApiKy } from './api'
 
-import type { NOTIFICATION_TYPE, UserType } from '../domain/entities/beaconMalfunction/constants'
+import type { VesselId } from '../domain/entities/vessel/types'
+import type { NOTIFICATION_TYPE, UserType } from '@features/BeaconMalfunction/constants'
 import type {
   BeaconMalfunction,
   BeaconMalfunctionResumeAndDetails,
   UpdateBeaconMalfunction,
   VesselBeaconMalfunctionsResumeAndHistory
-} from '../domain/entities/beaconMalfunction/types'
-import type { VesselId } from '../domain/entities/vessel/types'
+} from '@features/BeaconMalfunction/types'
 
 export const ARCHIVE_BEACON_MALFUNCTION = "Nous n'avons pas pu archiver les avaries VMS"
 export const GET_BEACON_MALFUNCTIONS_ERROR_MESSAGE = "Nous n'avons pas pu récupérer les avaries VMS"

frontend/src/domain/shared_slices/BeaconMalfunction.ts

@@ -1,12 +1,11 @@
+import { EquipmentTab } from '@features/BeaconMalfunction/constants'
 import { createSlice } from '@reduxjs/toolkit'
 
-import { EquipmentTab } from '../entities/beaconMalfunction/constants'
-
 import type {
   BeaconMalfunction,
   BeaconMalfunctionResumeAndDetails,
   VesselBeaconMalfunctionsResumeAndHistory
-} from '../entities/beaconMalfunction/types'
+} from '@features/BeaconMalfunction/types'
 import type { PayloadAction } from '@reduxjs/toolkit'
 import type { ValueOf } from 'type-fest'
 

frontend/src/domain/shared_slices/Global.ts

@@ -1,7 +1,7 @@
+import { UserType } from '@features/BeaconMalfunction/constants'
 import { createSlice } from '@reduxjs/toolkit'
 
 import { getLocalStorageState } from '../../utils'
-import { UserType } from '../entities/beaconMalfunction/constants'
 import { getOnlyVesselIdentityProperties, vesselsAreEquals } from '../entities/vessel/vessel'
 
 import type { MapBox } from '@features/Map/constants'

frontend/src/domain/use_cases/beaconMalfunction/sendNotification.ts

@@ -1,5 +1,6 @@
+import { NOTIFICATION_TYPE } from '@features/BeaconMalfunction/constants'
+
 import { sendNotificationFromAPI } from '../../../api/beaconMalfunction'
-import { NOTIFICATION_TYPE } from '../../entities/beaconMalfunction/constants'
 import { setError } from '../../shared_slices/Global'
 
 /**

frontend/src/domain/use_cases/vessel/showVesselFromBeaconMalfunctionsKanban.ts

@@ -1,5 +1,5 @@
+import { END_OF_MALFUNCTION_REASON_RECORD } from '@features/BeaconMalfunction/constants'
 import { vesselActions } from '@features/Vessel/slice'
-import { END_OF_MALFUNCTION_REASON_RECORD } from 'domain/entities/beaconMalfunction/constants'
 import { VesselSidebarTab } from 'domain/entities/vessel/vessel'
 import { VesselTrackDepth } from 'domain/entities/vesselTrackDepth'
 

frontend/src/domain/entities/beaconMalfunction/__tests__/getMalfunctionStartDateText.test.TOFIX.ts → frontend/src/features/BeaconMalfunction/__tests__/getMalfunctionStartDateText.test.ts

@@ -1,7 +1,7 @@
 import { expect } from '@jest/globals'
 
 import { BeaconMalfunctionVesselStatus, EndOfBeaconMalfunctionReason } from '../constants'
-import { getMalfunctionStartDateText } from '../index'
+import { getMalfunctionStartDateText } from '../utils'
 
 describe('domain/entities/beaconMalfunction/index.getMalfunctionStartDateText()', () => {
   it('should return the right status', () => {

frontend/src/features/SideWindow/BeaconMalfunctionBoard/BeaconMalfunctionCard.tsx → frontend/src/features/BeaconMalfunction/components/BeaconMalfunctionBoard/BeaconMalfunctionCard.tsx

@@ -1,16 +1,16 @@
+import { COLORS } from '@constants/constants'
+import { useMainAppDispatch } from '@hooks/useMainAppDispatch'
 import { useEffect, useMemo, useRef } from 'react'
 import styled from 'styled-components'
 
-import { getBeaconCreationOrModificationDate } from './beaconMalfunctions'
+import { getBeaconCreationOrModificationDate } from './utils'
 import { VesselStatusSelect } from './VesselStatusSelect'
-import { COLORS } from '../../../constants/constants'
-import { getMalfunctionStartDateText } from '../../../domain/entities/beaconMalfunction'
-import { END_OF_MALFUNCTION_REASON_RECORD, VESSEL_STATUS } from '../../../domain/entities/beaconMalfunction/constants'
-import { openBeaconMalfunctionInKanban } from '../../../domain/use_cases/beaconMalfunction/openBeaconMalfunctionInKanban'
-import { showVesselFromBeaconMalfunctionsKanban } from '../../../domain/use_cases/vessel/showVesselFromBeaconMalfunctionsKanban'
-import { useMainAppDispatch } from '../../../hooks/useMainAppDispatch'
-
-import type { BeaconMalfunction } from '../../../domain/entities/beaconMalfunction/types'
+import { openBeaconMalfunctionInKanban } from '../../../../domain/use_cases/beaconMalfunction/openBeaconMalfunctionInKanban'
+import { showVesselFromBeaconMalfunctionsKanban } from '../../../../domain/use_cases/vessel/showVesselFromBeaconMalfunctionsKanban'
+import { END_OF_MALFUNCTION_REASON_RECORD, VESSEL_STATUS } from '../../constants'
+import { getMalfunctionStartDateText } from '../../utils'
+
+import type { BeaconMalfunction } from '../../types'
 import type { MutableRefObject } from 'react'
 
 export type BeaconMalfunctionCardProps = {

frontend/src/features/SideWindow/BeaconMalfunctionBoard/BeaconMalfunctionDetails.tsx → frontend/src/features/BeaconMalfunction/components/BeaconMalfunctionBoard/BeaconMalfunctionDetails.tsx

@@ -1,26 +1,23 @@
+import { COLORS } from '@constants/constants'
+import { useMainAppDispatch } from '@hooks/useMainAppDispatch'
 import { useEffect, useRef } from 'react'
 import styled from 'styled-components'
 import * as timeago from 'timeago.js'
 
 import { BeaconMalfunctionDetailsFollowUp } from './BeaconMalfunctionDetailsFollowUp'
-import { getBeaconCreationOrModificationDate } from './beaconMalfunctions'
 import { SendNotification } from './SendNotification'
+import { getBeaconCreationOrModificationDate } from './utils'
 import { VesselStatusSelect } from './VesselStatusSelect'
-import { COLORS } from '../../../constants/constants'
-import { getFirstVesselStatus, getMalfunctionStartDateText } from '../../../domain/entities/beaconMalfunction'
-import { VESSEL_STATUS } from '../../../domain/entities/beaconMalfunction/constants'
-import { closeBeaconMalfunctionInKanban } from '../../../domain/shared_slices/BeaconMalfunction'
-import { showVesselFromBeaconMalfunctionsKanban } from '../../../domain/use_cases/vessel/showVesselFromBeaconMalfunctionsKanban'
-import { useMainAppDispatch } from '../../../hooks/useMainAppDispatch'
-import { getDateTime } from '../../../utils'
-import CloseIconSVG from '../../icons/Croix_grise.svg?react'
-import AlertsSVG from '../../icons/Icone_alertes_gris.svg?react'
-import TimeAgoSVG from '../../icons/Label_horaire_VMS.svg?react'
-
-import type {
-  BeaconMalfunction,
-  BeaconMalfunctionResumeAndDetails
-} from '../../../domain/entities/beaconMalfunction/types'
+import { closeBeaconMalfunctionInKanban } from '../../../../domain/shared_slices/BeaconMalfunction'
+import { showVesselFromBeaconMalfunctionsKanban } from '../../../../domain/use_cases/vessel/showVesselFromBeaconMalfunctionsKanban'
+import { getDateTime } from '../../../../utils'
+import CloseIconSVG from '../../../icons/Croix_grise.svg?react'
+import AlertsSVG from '../../../icons/Icone_alertes_gris.svg?react'
+import TimeAgoSVG from '../../../icons/Label_horaire_VMS.svg?react'
+import { VESSEL_STATUS } from '../../constants'
+import { getFirstVesselStatus, getMalfunctionStartDateText } from '../../utils'
+
+import type { BeaconMalfunction, BeaconMalfunctionResumeAndDetails } from '../../types'
 import type { CSSProperties } from 'react'
 
 export type BeaconMalfunctionDetailsProps = {

frontend/src/features/SideWindow/BeaconMalfunctionBoard/BeaconMalfunctionDetailsFollowUp.tsx → frontend/src/features/BeaconMalfunction/components/BeaconMalfunctionBoard/BeaconMalfunctionDetailsFollowUp.tsx

@@ -1,26 +1,23 @@
+import { COLORS } from '@constants/constants'
+import { useListenForScroll } from '@hooks/useListenForScroll'
+import { useMainAppDispatch } from '@hooks/useMainAppDispatch'
+import { useMainAppSelector } from '@hooks/useMainAppSelector'
 import { customDayjs } from '@mtes-mct/monitor-ui'
+import { pushToObjectAtIndex } from '@utils/pushToObjectAtIndex'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { Toggle } from 'rsuite'
 import styled from 'styled-components'
 
 import { BeaconMalfunctionDetailsFollowUpItem } from './BeaconMalfunctionDetailsFollowUpItem'
 import { BeaconMalfunctionDetailsFollowUpRow } from './BeaconMalfunctionDetailsFollowUpRow'
-import { BeaconMalfunctionDetailsType, getContent } from './beaconMalfunctions'
-import { COLORS } from '../../../constants/constants'
-import { UserType, VESSEL_STATUS } from '../../../domain/entities/beaconMalfunction/constants'
-import { setUserType } from '../../../domain/shared_slices/Global'
-import { saveBeaconMalfunctionCommentFromKanban } from '../../../domain/use_cases/beaconMalfunction/saveBeaconMalfunctionCommentFromKanban'
-import { useListenForScroll } from '../../../hooks/useListenForScroll'
-import { useMainAppDispatch } from '../../../hooks/useMainAppDispatch'
-import { useMainAppSelector } from '../../../hooks/useMainAppSelector'
-import { getDate, mergeObjects } from '../../../utils'
-import { pushToObjectAtIndex } from '../../../utils/pushToObjectAtIndex'
-import CommentsSVG from '../../icons/Commentaires.svg?react'
-
-import type {
-  BeaconMalfunctionFollowUpItem,
-  BeaconMalfunctionStatusValue
-} from '../../../domain/entities/beaconMalfunction/types'
+import { BeaconMalfunctionDetailsType, getContent } from './utils'
+import { setUserType } from '../../../../domain/shared_slices/Global'
+import { saveBeaconMalfunctionCommentFromKanban } from '../../../../domain/use_cases/beaconMalfunction/saveBeaconMalfunctionCommentFromKanban'
+import { getDate, mergeObjects } from '../../../../utils'
+import CommentsSVG from '../../../icons/Commentaires.svg?react'
+import { UserType, VESSEL_STATUS } from '../../constants'
+
+import type { BeaconMalfunctionFollowUpItem, BeaconMalfunctionStatusValue } from '../../types'
 import type { CSSProperties } from 'react'
 
 export function BeaconMalfunctionDetailsFollowUp({ beaconMalfunctionWithDetails, firstStatus, smallSize }) {

frontend/src/features/SideWindow/BeaconMalfunctionBoard/BeaconMalfunctionDetailsFollowUpItem.tsx → frontend/src/features/BeaconMalfunction/components/BeaconMalfunctionBoard/BeaconMalfunctionDetailsFollowUpItem.tsx

@@ -1,9 +1,9 @@
+import { COLORS } from '@constants/constants'
 import styled from 'styled-components'
 
-import { BeaconMalfunctionDetailsType } from './beaconMalfunctions'
-import { COLORS } from '../../../constants/constants'
-import { UserType } from '../../../domain/entities/beaconMalfunction/constants'
-import { getTime } from '../../../utils'
+import { BeaconMalfunctionDetailsType } from './utils'
+import { getTime } from '../../../../utils'
+import { UserType } from '../../constants'
 
 export function BeaconMalfunctionDetailsFollowUpItem({ contentText, isLast, isLastDate, item, scrollToRef }) {
   return (

frontend/src/features/SideWindow/BeaconMalfunctionBoard/BeaconMalfunctionDetailsFollowUpRow.tsx → frontend/src/features/BeaconMalfunction/components/BeaconMalfunctionBoard/BeaconMalfunctionDetailsFollowUpRow.tsx

@@ -1,7 +1,6 @@
+import { COLORS } from '@constants/constants'
 import styled from 'styled-components'
 
-import { COLORS } from '../../../constants/constants'
-
 export function BeaconMalfunctionDetailsFollowUpRow({ children, date, hoveredDate, index, smallSize }) {
   return (
     <span key={date}>

frontend/src/features/SideWindow/BeaconMalfunctionBoard/BeaconMalfunctionsDetailsFollowUpNotification.tsx → frontend/src/features/BeaconMalfunction/components/BeaconMalfunctionBoard/BeaconMalfunctionsDetailsFollowUpNotification.tsx

@@ -1,14 +1,10 @@
+import { COLORS } from '@constants/constants'
 import { useState } from 'react'
 import styled from 'styled-components'
 
-import { COLORS } from '../../../constants/constants'
-import {
-  NOTIFICATION_RECIPIENT_FUNCTION,
-  NOTIFICATION_TYPE,
-  COMMUNICATION_MEAN
-} from '../../../domain/entities/beaconMalfunction/constants'
-import NotOkSVG from '../../icons/Icon_not_OK.svg?react'
-import OkSVG from '../../icons/Icon_OK.svg?react'
+import NotOkSVG from '../../../icons/Icon_not_OK.svg?react'
+import OkSVG from '../../../icons/Icon_OK.svg?react'
+import { NOTIFICATION_RECIPIENT_FUNCTION, NOTIFICATION_TYPE, COMMUNICATION_MEAN } from '../../constants'
 
 import type { CSSProperties } from 'react'
 

frontend/src/features/SideWindow/BeaconMalfunctionBoard/Draggable.tsx → frontend/src/features/BeaconMalfunction/components/BeaconMalfunctionBoard/Draggable.tsx

@@ -1,7 +1,7 @@
+import { COLORS } from '@constants/constants'
 import { useDraggable } from '@dnd-kit/core'
 
-import { COLORS } from '../../../constants/constants'
-import { STAGE_RECORD } from '../../../domain/entities/beaconMalfunction/constants'
+import { STAGE_RECORD } from '../../constants'
 
 export function Draggable({ children, id, stageId }) {
   const { attributes, listeners, setNodeRef } = useDraggable({

frontend/src/features/SideWindow/BeaconMalfunctionBoard/Droppable.tsx → frontend/src/features/BeaconMalfunction/components/BeaconMalfunctionBoard/Droppable.tsx

@@ -1,7 +1,6 @@
+import { COLORS } from '@constants/constants'
 import { useDroppable } from '@dnd-kit/core'
 
-import { COLORS } from '../../../constants/constants'
-
 export function Droppable({ children, disabled, id, index }) {
   const { isOver, setNodeRef } = useDroppable({
     data: {

frontend/src/features/SideWindow/BeaconMalfunctionBoard/SendNotification.tsx → frontend/src/features/BeaconMalfunction/components/BeaconMalfunctionBoard/SendNotification.tsx

@@ -5,8 +5,8 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import { SelectPicker } from 'rsuite'
 import styled from 'styled-components'
 
-import { NOTIFICATION_TYPE, SELECTABLE_NOTIFICATION_TYPES } from '../../../domain/entities/beaconMalfunction/constants'
-import { sendNotification } from '../../../domain/use_cases/beaconMalfunction/sendNotification'
+import { sendNotification } from '../../../../domain/use_cases/beaconMalfunction/sendNotification'
+import { NOTIFICATION_TYPE, SELECTABLE_NOTIFICATION_TYPES } from '../../constants'
 
 import type { CSSProperties } from 'react'
 

frontend/src/features/SideWindow/BeaconMalfunctionBoard/StageColumn.tsx → frontend/src/features/BeaconMalfunction/components/BeaconMalfunctionBoard/StageColumn.tsx

@@ -1,16 +1,13 @@
+import { COLORS } from '@constants/constants'
+import { useMainAppSelector } from '@hooks/useMainAppSelector'
 import { useRef } from 'react'
 import styled from 'styled-components'
 
 import { BeaconMalfunctionCard } from './BeaconMalfunctionCard'
 import { Draggable } from './Draggable'
 import { StageColumnHeader } from './StageColumnHeader'
-import { COLORS } from '../../../constants/constants'
-import { useMainAppSelector } from '../../../hooks/useMainAppSelector'
 
-import type {
-  BeaconMalfunction,
-  BeaconMalfunctionStageColumnValue
-} from '../../../domain/entities/beaconMalfunction/types'
+import type { BeaconMalfunction, BeaconMalfunctionStageColumnValue } from '../../types'
 import type { CSSProperties, MutableRefObject } from 'react'
 
 type StageColumnType = {

frontend/src/features/SideWindow/BeaconMalfunctionBoard/StageColumnHeader.tsx → frontend/src/features/BeaconMalfunction/components/BeaconMalfunctionBoard/StageColumnHeader.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { STAGE_RECORD } from '../../../domain/entities/beaconMalfunction/constants'
+import { STAGE_RECORD } from '../../constants'
 
 const MAX_ARCHIVED_ITEMS = 60
 

frontend/src/features/SideWindow/BeaconMalfunctionBoard/VesselStatusSelect.tsx → frontend/src/features/BeaconMalfunction/components/BeaconMalfunctionBoard/VesselStatusSelect.tsx

@@ -3,9 +3,9 @@ import { useEffect } from 'react'
 import { SelectPicker } from 'rsuite'
 
 import { VesselStatusSelectValue } from './VesselStatusSelectValue'
-import { VESSEL_STATUS } from '../../../domain/entities/beaconMalfunction/constants'
+import { VESSEL_STATUS } from '../../constants'
 
-import type { BeaconMalfunction } from '../../../domain/entities/beaconMalfunction/types'
+import type { BeaconMalfunction } from '../../types'
 
 type VesselStatusSelectProps = {
   beaconMalfunction: BeaconMalfunction | undefined
@@ -38,7 +38,7 @@ export function VesselStatusSelect({
         '*[data-cy="side-window-beacon-malfunctions-vessel-status"]'
       ) as HTMLElement
       if (toggleElement?.style) {
-        selectElement.style.setProperty('color', vesselStatus?.textColor ?? THEME.color.charcoal, 'important')
+        toggleElement.style.setProperty('color', vesselStatus?.textColor ?? THEME.color.charcoal, 'important')
       }
 
       const icons = domRef.current.querySelectorAll('.rs-icon') as HTMLElement[]

frontend/src/features/SideWindow/BeaconMalfunctionBoard/__tests__/getActionText.test.TOFIX.ts → frontend/src/features/BeaconMalfunction/components/BeaconMalfunctionBoard/__tests__/getActionText.test.ts

@@ -5,10 +5,10 @@ import {
   BeaconMalfunctionPropertyName,
   BeaconMalfunctionsStage,
   EndOfBeaconMalfunctionReason
-} from '../../../../domain/entities/beaconMalfunction/constants'
-import { getActionText } from '../beaconMalfunctions'
+} from '../../../constants'
+import { getActionText } from '../utils'
 
-describe('features/SideWindow/BeaconMalfunctionBoard/beaconMalfunctions.tsx/getActionText()', () => {
+describe('features/SideWindow/BeaconMalfunctionBoard/utils.tsx/getActionText()', () => {
   it('should not show the end of malfunction reason when the stage value is not an end column', () => {
     const reason = EndOfBeaconMalfunctionReason.BEACON_DEACTIVATED_OR_UNEQUIPPED
     const action = {

frontend/src/features/SideWindow/BeaconMalfunctionBoard/index.tsx → frontend/src/features/BeaconMalfunction/components/BeaconMalfunctionBoard/index.tsx

@@ -8,32 +8,32 @@ import {
   useSensor,
   useSensors
 } from '@dnd-kit/core'
+import { STAGE_RECORD, VESSEL_STATUS } from '@features/BeaconMalfunction/constants'
 import { useMainAppDispatch } from '@hooks/useMainAppDispatch'
 import { useMainAppSelector } from '@hooks/useMainAppSelector'
 import { THEME } from '@mtes-mct/monitor-ui'
 import { createSelector } from '@reduxjs/toolkit'
-import { STAGE_RECORD, VESSEL_STATUS } from 'domain/entities/beaconMalfunction/constants'
-import { setError } from 'domain/shared_slices/Global'
-import { getAllBeaconMalfunctions } from 'domain/use_cases/beaconMalfunction/getAllBeaconMalfunctions'
-import { updateBeaconMalfunctionFromKanban } from 'domain/use_cases/beaconMalfunction/updateBeaconMalfunctionFromKanban'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styled from 'styled-components'
-import { LegacyRsuiteComponentsWrapper } from 'ui/LegacyRsuiteComponentsWrapper'
 
 import { BeaconMalfunctionCard } from './BeaconMalfunctionCard'
 import { BeaconMalfunctionDetails } from './BeaconMalfunctionDetails'
-import { getBeaconMalfunctionsByStage, searchInBeaconMalfunctions } from './beaconMalfunctions'
 import { Droppable } from './Droppable'
 import { StageColumn } from './StageColumn'
+import { getBeaconMalfunctionsByStage, searchInBeaconMalfunctions } from './utils'
 import { VesselStatusSelect } from './VesselStatusSelect'
-import SearchIconSVG from '../../icons/Loupe_dark.svg?react'
+import { setError } from '../../../../domain/shared_slices/Global'
+import { getAllBeaconMalfunctions } from '../../../../domain/use_cases/beaconMalfunction/getAllBeaconMalfunctions'
+import { updateBeaconMalfunctionFromKanban } from '../../../../domain/use_cases/beaconMalfunction/updateBeaconMalfunctionFromKanban'
+import { LegacyRsuiteComponentsWrapper } from '../../../../ui/LegacyRsuiteComponentsWrapper'
+import SearchIconSVG from '../../../icons/Loupe_dark.svg?react'
 
-import type { MainRootState } from '@store'
 import type {
   BeaconMalfunction,
   BeaconMalfunctionStageColumnValue,
   BeaconMalfunctionStatusValue
-} from 'domain/entities/beaconMalfunction/types'
+} from '@features/BeaconMalfunction/types'
+import type { MainRootState } from '@store'
 import type { CSSProperties, MutableRefObject } from 'react'
 
 const getMemoizedBeaconMalfunctionsByStage = createSelector(