MTES-MCT · claire2212 · May 11, 2026 · Apr 14, 2026 · May 5, 2026 · May 5, 2026
diff --git a/frontend/.env.example b/frontend/.env.example
@@ -34,9 +34,9 @@ FRONTEND_OIDC_LOGIN_BUTTON_PROVIDER=
 # Sentry
 
 FRONTEND_SENTRY_DSN=
-FRONTEND_MONITORFISH_VERSION=
+FRONTEND_MONITORFISH_VERSION=v0.0.0
 FRONTEND_SENTRY_TRACING_ORIGINS=
-FRONTEND_SENTRY_ENV=
+FRONTEND_SENTRY_ENV=development
 
 ################################################################################
 # UseMatomo

diff --git a/frontend/.env.local.defaults b/frontend/.env.local.defaults
@@ -34,9 +34,9 @@ FRONTEND_OIDC_LOGIN_BUTTON_PROVIDER=proconnect
 # Sentry
 
 FRONTEND_SENTRY_DSN=
-FRONTEND_MONITORFISH_VERSION=
+FRONTEND_MONITORFISH_VERSION=v0.0.0
 FRONTEND_SENTRY_TRACING_ORIGINS=
-FRONTEND_SENTRY_ENV=
+FRONTEND_SENTRY_ENV=development
 
 ################################################################################
 # UseMatomo

diff --git a/frontend/index.html b/frontend/index.html
@@ -2,11 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="/favicon-32.ico" />
+    <link id="favicon" rel="icon" href="/favicon-32.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="MonitorFish" />
     <title>MonitorFish</title>
+    <script type="module">
+      // Set favicon based on environment
+      const env = import.meta.env.FRONTEND_SENTRY_ENV;
+      const faviconUrl = env === 'production' ? '/favicon.ico' : '/faviconBW.ico';
+      const description = env === 'production' ? 'MonitorFish' : `MonitorFish - ${env}`;
+      document.getElementById('favicon').href = faviconUrl;
+      document.getElementsByTagName('title')[0].textContent = description;
+    </script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/frontend/public/faviconBW.ico b/frontend/public/faviconBW.ico
diff --git a/frontend/src/components/EnvironmentBox.tsx b/frontend/src/components/EnvironmentBox.tsx
@@ -0,0 +1,40 @@
+import { THEME } from '@mtes-mct/monitor-ui'
+import { getEnvironmentData } from '@utils/getEnvironmentData'
+import styled from 'styled-components'
+
+export function EnvironmentBox() {
+  const { environmentMessage, isEnvironmentBoxVisible, version } = getEnvironmentData()
+
+  if (!isEnvironmentBoxVisible) {
+    return null
+  }
+
+  return (
+    <Wrapper>
+      <span>{environmentMessage}</span>
+      <span> version {version}</span>
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.div`
+  background-color: ${p => p.theme.color.goldenPoppy};
+  color: ${p => p.theme.color.charcoal};
+  display: flex;
+  font-size: 12px;
+  font-weight: 500;
+  justify-content: space-between;
+  padding-left: 4px;
+  padding-right: 8px;
+  position: absolute;
+  top: 0px;
+  width: 99%;
+  z-index: 10000;
+`
+
+export function getEnvironmentBorderStyle(isEnvironmentBoxVisible: boolean) {
+  return `
+   border: ${isEnvironmentBoxVisible ? '4px' : '0'} solid ${THEME.color.goldenPoppy};
+   border-top: ${isEnvironmentBoxVisible ? '6px' : '0'} solid ${THEME.color.goldenPoppy};
+  `
+}
diff --git a/frontend/src/features/MainWindow/index.tsx b/frontend/src/features/MainWindow/index.tsx
@@ -1,10 +1,12 @@
+import { EnvironmentBox, getEnvironmentBorderStyle } from '@components/EnvironmentBox'
 import { BannerStack } from '@features/MainWindow/components/BannerStack'
 import { MainMap } from '@features/Map/components/MainMap'
 import { IUUReportingMapForm } from '@features/Reporting/components/IUUReportingMapForm'
 import { SideWindowStatus } from '@features/SideWindow/constants'
 import { VesselFiltersHeadband } from '@features/Vessel/components/VesselFiltersHeadband'
 import { VesselGroupMainWindowEdition } from '@features/VesselGroup/components/VesselGroupMainWindowEdition'
 import { trackEvent } from '@hooks/useTracking'
+import { getEnvironmentData } from '@utils/getEnvironmentData'
 import { useCallback, useEffect } from 'react'
 import { useBeforeUnload } from 'react-router-dom'
 import styled from 'styled-components'
@@ -21,6 +23,8 @@ import { MapButtons } from '../Map/components/MapButtons'
 import { SideWindowLauncher } from '../SideWindow/SideWindowLauncher'
 import { VesselLoader } from '../Vessel/components/VesselLoader'
 
+const { isEnvironmentBoxVisible } = getEnvironmentData()
+
 export function MainWindow() {
   const isControlUnitDialogDisplayed = useMainAppSelector(
     state => state.displayedComponent.isControlUnitDialogDisplayed
@@ -59,8 +63,10 @@ export function MainWindow() {
 
       <PreviewFilteredVessels />
 
-      <Wrapper id="mainWindowWrapper">
+      <Wrapper $isEnvironmentBoxVisible={isEnvironmentBoxVisible} id="mainWindowWrapper">
+        <EnvironmentBox />
         <BannerStack />
+
         <VesselFiltersHeadband />
 
         <LegacyRsuiteComponentsWrapper>
@@ -83,9 +89,12 @@ export function MainWindow() {
   )
 }
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{
+  $isEnvironmentBoxVisible: boolean
+}>`
+  ${p => getEnvironmentBorderStyle(p.$isEnvironmentBoxVisible)}
   font-size: 13px;
   overflow: hidden;
-  width: 100vw;
-  height: 100vh;
+  width: ${p => (p.$isEnvironmentBoxVisible ? 'calc(100% - 8px)' : '100%')};
+  height: ${p => (p.$isEnvironmentBoxVisible ? 'calc(100% - 10px)' : '100%')};
 `
diff --git a/frontend/src/features/Map/components/BaseMap.tsx b/frontend/src/features/Map/components/BaseMap.tsx
@@ -107,12 +107,12 @@ export function BaseMap({
 
 const MapWrapper = styled.div`
   display: flex;
-  flex: 1;
+  height: 100%;
 `
 
 const MapContainer = styled.div`
   background-color: #d4dadc;
-  height: 100vh;
+  height: 100%;
   width: 100%;
   overflow-y: hidden;
   overflow-x: hidden;

diff --git a/frontend/src/features/Regulation/components/RegulationForm/index.tsx b/frontend/src/features/Regulation/components/RegulationForm/index.tsx
@@ -36,11 +36,11 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 
+import { RegulationTags } from './identification/RegulationTags'
 import { Footer, FooterButton, OtherRemark, Section, Title } from '../../../commonStyles/Backoffice.style'
 import { CancelButton, ValidateButton } from '../../../commonStyles/Buttons.style'
 import ChevronIconSVG from '../../../icons/Chevron_simple_gris.svg?react'
 import { STATUS } from '../RegulationTables/constants'
-import { RegulationTags } from './identification/RegulationTags'
 
 import type { BackofficeAppPromiseThunk } from '@store'
 import type { Polygon } from 'geojson'
@@ -354,7 +354,7 @@ const CreateRegulationWrapper = styled.div`
   flex-direction: column;
   padding: 11px 27px 11px 27px;
   background-color: ${p => p.theme.color.white};
-  height: 100vh;
+  height: 100%;
 `
 
 const LinkSpan = styled.span`

diff --git a/frontend/src/features/Regulation/components/RegulationTables/index.tsx b/frontend/src/features/Regulation/components/RegulationTables/index.tsx
@@ -220,14 +220,14 @@ const BackofficeContainer = styled.div`
   position: relative;
   background-color: ${p => p.theme.color.white};
   width: 100%;
-  height: 100vh;
+  height: 100%;
 `
 
 const RegulatoryZonePanel = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
-  max-height: 100vh;
+  max-height: 100%;
   max-width: 50%;
   background-color: ${p => p.theme.color.white};
 `

diff --git a/frontend/src/features/SideWindow/index.tsx b/frontend/src/features/SideWindow/index.tsx
@@ -1,3 +1,4 @@
+import { EnvironmentBox, getEnvironmentBorderStyle } from '@components/EnvironmentBox'
 import { FrontendErrorBoundary } from '@components/FrontendErrorBoundary'
 import { getOperationalAlerts } from '@features/Alert/useCases/getOperationalAlerts'
 import { getSilencedAlerts } from '@features/Alert/useCases/getSilencedAlerts'
@@ -12,6 +13,7 @@ import { VesselListAndGroups } from '@features/Vessel/components/VesselListAndGr
 import { setVessels } from '@features/Vessel/slice'
 import { vesselApi } from '@features/Vessel/vesselApi'
 import { NewWindowContext, type NewWindowContextValue, THEME } from '@mtes-mct/monitor-ui'
+import { getEnvironmentData } from '@utils/getEnvironmentData'
 import {
   type CSSProperties,
   Fragment,
@@ -44,9 +46,12 @@ import { PriorNotificationList } from '../PriorNotification/components/PriorNoti
 
 import type { MainAppAsyncThunk } from '@store'
 
+const { isEnvironmentBoxVisible } = getEnvironmentData()
+
 export type SideWindowProps = HTMLAttributes<HTMLDivElement> & {
   isFromURL: boolean
 }
+
 export function SideWindow({ isFromURL }: SideWindowProps) {
   const dispatch = useMainAppDispatch()
   const isSuperUser = useIsSuperUser()
@@ -144,11 +149,11 @@ export function SideWindow({ isFromURL }: SideWindowProps) {
 
   return (
     <StyleSheetManager target={wrapperRef.current ?? undefined}>
-      <Wrapper ref={wrapperRef}>
+      <Wrapper ref={wrapperRef} $isEnvironmentBoxVisible={isEnvironmentBoxVisible}>
         {!isFirstRender && (
           <NewWindowContext.Provider value={newWindowContextProviderValue}>
             <GlobalStyle $isFromURL={isFromURL} />
-
+            <EnvironmentBox />
             <BannerStack />
 
             <Menu selectedMenu={selectedPath.menu} />
@@ -256,10 +261,12 @@ const GlobalStyle = createGlobalStyle<{
 `
 
 // All containers within this SideWindow root wrapper should now only use flexboxes
-const Wrapper = styled.div`
+const Wrapper = styled.div<{ $isEnvironmentBoxVisible: boolean }>`
+  ${p => getEnvironmentBorderStyle(p.$isEnvironmentBoxVisible)}
   background: ${p => p.theme.color.white};
   display: flex;
-  height: 100%;
+  height: ${p => (p.$isEnvironmentBoxVisible ? 'calc(100% - 10px)' : '100%')};
+  width: ${p => (p.$isEnvironmentBoxVisible ? 'calc(100% - 8px)' : '100%')};
   min-height: 0;
   min-width: 0;
 

diff --git a/frontend/src/features/VesselGroup/slice.ts b/frontend/src/features/VesselGroup/slice.ts
@@ -71,9 +71,11 @@ export const vesselGroupActions = vesselGroupSlice.actions
 
 export const vesselGroupReducer = vesselGroupSlice.reducer
 
+const selectAllVesselGroupsQuery = vesselGroupApi.endpoints.getAllVesselGroups.select()
+
 export const selectVesselGroupsIdsFiltered = createSelector(
   [
-    (state: MainRootState) => vesselGroupApi.endpoints.getAllVesselGroups.select()(state),
+    (state: MainRootState) => selectAllVesselGroupsQuery(state),
     (state: MainRootState) => state.vesselGroup.filteredGroupType,
     (state: MainRootState) => state.vesselGroup.filteredSharing,
     (state: MainRootState) => state.vesselGroup.vesselGroupsIdsPinned

diff --git a/frontend/src/pages/BackofficePage.tsx b/frontend/src/pages/BackofficePage.tsx
@@ -1,6 +1,8 @@
 import { BackofficeMode } from '@api/BackofficeMode'
+import { EnvironmentBox, getEnvironmentBorderStyle } from '@components/EnvironmentBox'
 import { BackOfficeMenu } from '@features/BackOffice/components/BackofficeMenu'
 import { BannerStack } from '@features/MainWindow/components/BannerStack'
+import { getEnvironmentData } from '@utils/getEnvironmentData'
 import countries from 'i18n-iso-countries'
 import COUNTRIES_FR from 'i18n-iso-countries/langs/fr.json'
 import { Provider } from 'react-redux'
@@ -12,14 +14,17 @@ import { backofficeStore, backofficeStorePersistor } from '../store'
 
 countries.registerLocale(COUNTRIES_FR)
 
+const { isEnvironmentBoxVisible } = getEnvironmentData()
+
 export function BackofficePage() {
   return (
     <Provider store={backofficeStore}>
       {/* eslint-disable-next-line no-null/no-null */}
       <PersistGate loading={null} persistor={backofficeStorePersistor}>
         <BackofficeMode isBackoffice />
 
-        <Wrapper>
+        <Wrapper $isEnvironmentBoxVisible={isEnvironmentBoxVisible}>
+          <EnvironmentBox />
           <BannerStack />
           <BackOfficeMenu />
 
@@ -30,7 +35,11 @@ export function BackofficePage() {
   )
 }
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{
+  $isEnvironmentBoxVisible: boolean
+}>`
+  ${p => getEnvironmentBorderStyle(p.$isEnvironmentBoxVisible)}
   display: flex;
-  height: 100%;
+  height: ${p => (p.$isEnvironmentBoxVisible ? 'calc(100% - 10px)' : '100%')};
+  position: relative;
 `
diff --git a/frontend/src/ui/shared/.keep b/frontend/src/ui/shared/.keep
diff --git a/frontend/src/utils/getEnvironmentData.ts b/frontend/src/utils/getEnvironmentData.ts
@@ -0,0 +1,11 @@
+const environment = import.meta.env.FRONTEND_SENTRY_ENV
+const version = import.meta.env.FRONTEND_MONITORFISH_VERSION
+const environmentMessage = "ENVIRONNEMENT D'INTEGRATION"
+const isEnvironmentBoxVisible = environment === 'integration'
+export function getEnvironmentData() {
+  return {
+    environmentMessage,
+    isEnvironmentBoxVisible,
+    version
+  }
+}