From b8d50ecb46ef2a17a556deac0efe4d481675ce2c Mon Sep 17 00:00:00 2001
From: alicedraillard <alice.draillard@cgi.com>
Date: Thu, 5 Dec 2024 18:17:46 +0100
Subject: [PATCH 01/12] chore: prepare next development iteration

---
 backend/deployment/magneto/conf.json.template | 2 +-
 backend/pom.xml                               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/deployment/magneto/conf.json.template b/backend/deployment/magneto/conf.json.template
index 61c45c6f..66ab13c5 100644
--- a/backend/deployment/magneto/conf.json.template
+++ b/backend/deployment/magneto/conf.json.template
@@ -1,5 +1,5 @@
     {
-      "name": "fr.cgi~magneto~2.0.0",
+      "name": "fr.cgi~magneto~${magnetoVersion}",
       "config": {
         "main" : "fr.cgi.magneto.Magneto",
         "port" : 8205,
diff --git a/backend/pom.xml b/backend/pom.xml
index e6313b7e..ddcbfe77 100644
--- a/backend/pom.xml
+++ b/backend/pom.xml
@@ -9,7 +9,7 @@
     </parent>
     <groupId>fr.cgi</groupId>
     <artifactId>magneto</artifactId>
-    <version>2.0.0</version>
+    <version>2.0-SNAPSHOT</version>
     <scm>
         <connection>scm:git:https://github.com/OPEN-ENT-NG/magneto.git</connection>
         <developerConnection>scm:git:https://github.com/OPEN-ENT-NG/magneto.git</developerConnection>

From 56620229d2b8811fa8f20818d76eb407170687de Mon Sep 17 00:00:00 2001
From: alicedraillard <alice.draillard@cgi.com>
Date: Fri, 6 Dec 2024 16:49:20 +0100
Subject: [PATCH 02/12] chore: update edifice-ts-client version

---
 frontend/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/package.json b/frontend/package.json
index 5e345a84..c9c48d97 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -111,7 +111,7 @@
     "concurrently": "8.2.1",
     "csstype": "3.1.2",
     "dotenv-cli": "^7.4.2",
-    "edifice-ts-client": "1.5.23",
+    "edifice-ts-client": "1.7.4",
     "eslint": "8.51.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-import": "2.28.1",

From b45887bdf285428b9a5133d44a041e658313017b Mon Sep 17 00:00:00 2001
From: Benjamin Perez <benjamin.perez@web-education.net>
Date: Mon, 9 Dec 2024 12:05:04 +0100
Subject: [PATCH 03/12] fix: remove useless property in pom.xml

---
 backend/pom.xml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/backend/pom.xml b/backend/pom.xml
index ddcbfe77..b1d612a3 100644
--- a/backend/pom.xml
+++ b/backend/pom.xml
@@ -32,7 +32,6 @@
     </repositories>
     <properties>
         <toolsVersion>2.0.0-final</toolsVersion>
-        <vertxCronTimer>2.0.0</vertxCronTimer>
         <powerMockVersion>2.0.2</powerMockVersion>
         <mockitoVersion>[2.0,3.0)</mockitoVersion>
         <entCoreVersion>6.0-SNAPSHOT</entCoreVersion>

From 128eacd15bb2e9c8e7d6703c20919f755b8cdcf7 Mon Sep 17 00:00:00 2001
From: Florent Mariotti <florent.mariotti@cgi.com>
Date: Fri, 13 Dec 2024 17:09:39 +0100
Subject: [PATCH 04/12] WIP (trying to scale iframe)

---
 .../card-content-board/CardContentBoard.tsx   | 127 ++++++++++++++++++
 .../components/create-magnet/CreateMagnet.tsx |   2 +
 2 files changed, 129 insertions(+)
 create mode 100644 frontend/src/components/card-content-board/CardContentBoard.tsx

diff --git a/frontend/src/components/card-content-board/CardContentBoard.tsx b/frontend/src/components/card-content-board/CardContentBoard.tsx
new file mode 100644
index 00000000..75d30dc1
--- /dev/null
+++ b/frontend/src/components/card-content-board/CardContentBoard.tsx
@@ -0,0 +1,127 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+
+interface CustomIframeProps {
+  src: string;
+  width?: number;
+  height?: number;
+}
+
+export const CustomIframe: React.FC<CustomIframeProps> = ({ 
+  src, 
+  width = 1500, 
+  height = 800 
+}) => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [scale, setScale] = useState(1);
+
+  const adjustIframeScale = useCallback(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+
+    try {
+      // Utiliser un délai pour s'assurer que le contenu est chargé
+      setTimeout(() => {
+        const iframeWindow = iframe.contentWindow;
+        const iframeDocument = iframe.contentDocument || iframeWindow?.document;
+        
+        if (!iframeDocument) return;
+
+        // Essayer différentes méthodes pour obtenir les dimensions
+        const contentWidth = Math.max(
+          iframeDocument.body?.scrollWidth || 0,
+          iframeDocument.documentElement?.scrollWidth || 0,
+          iframeWindow?.innerWidth || 0
+        );
+        
+        const contentHeight = Math.max(
+          iframeDocument.body?.scrollHeight || 0,
+          iframeDocument.documentElement?.scrollHeight || 0,
+          iframeWindow?.innerHeight || 0
+        );
+
+        // Calculer l'échelle
+        const scaleX = width / contentWidth;
+        const scaleY = height / contentHeight;
+        
+        // Prendre le zoom le plus petit, mais sans dépasser 1
+        const newScale = Math.min(scaleX, scaleY, 1);
+        
+        // Mettre à jour le state pour déclencher un re-render
+        setScale(newScale);
+
+        console.log('Iframe Scaling:', {
+          contentWidth, 
+          contentHeight, 
+          scaleX, 
+          scaleY, 
+          finalScale: newScale
+        });
+      }, 1000); // Délai plus long pour charger le contenu
+    } catch (error) {
+      console.error('Erreur de scaling de l\'iframe:', error);
+    }
+  }, [width, height]);
+
+  // Gérer le chargement et le scaling
+  const handleIframeLoad = useCallback(() => {
+    setIsLoaded(true);
+    adjustIframeScale();
+    
+    // Ajouter un écouteur de redimensionnement
+    window.addEventListener('resize', adjustIframeScale);
+    
+    return () => {
+      window.removeEventListener('resize', adjustIframeScale);
+    };
+  }, [adjustIframeScale]);
+
+  // Effet pour gérer l'événement de chargement
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (iframe) {
+      iframe.addEventListener('load', handleIframeLoad);
+      
+      return () => {
+        iframe.removeEventListener('load', handleIframeLoad);
+      };
+    }
+  }, [handleIframeLoad]);
+
+  return (
+    <div 
+      style={{ 
+        width: '100%', 
+        maxWidth: `${width}px`, 
+        height, 
+        overflow: 'hidden',
+        position: 'relative',
+      }}
+    >
+      <iframe
+        ref={iframeRef}
+        src={src}
+        style={{
+          border: 'none',
+          width: '100%',
+          height: '100%',
+          transform: `scale(${scale})`,
+          transformOrigin: 'top left',
+          pointerEvents: 'none',
+        }}
+        sandbox="allow-scripts allow-same-origin allow-forms"
+        title="Scaled Iframe"
+      />
+      {!isLoaded && (
+        <div style={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+        }}>
+          Chargement...
+        </div>
+      )}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/components/create-magnet/CreateMagnet.tsx b/frontend/src/components/create-magnet/CreateMagnet.tsx
index 8e6a72c7..c2d03865 100644
--- a/frontend/src/components/create-magnet/CreateMagnet.tsx
+++ b/frontend/src/components/create-magnet/CreateMagnet.tsx
@@ -49,6 +49,7 @@ import {
   convertResourceTypeToMediaType,
 } from "./utils";
 import { MediaProps } from "../board-view/types";
+import { CustomIframe } from "../card-content-board/CardContentBoard";
 import { CardContentFile } from "../card-content-file/CardContentFile";
 import { FilePickerWorkspace } from "../file-picker-workspace/FilePickerWorkspace";
 import { iconButtonStyle } from "../file-picker-workspace/style";
@@ -242,6 +243,7 @@ export const CreateMagnet: FC = () => {
             <CloseIcon fontSize="inherit" />
           </IconButton>
         </Box>
+        <CustomIframe src={"http://localhost:4200/#/board/de9b72ea-b1db-4ffa-9cb7-d4e032ec5fbb/view"} />
         <Box sx={contentContainerStyle}>
           {magnetTypeHasFilePickerWorkspace &&
             (activeCard ? (

From bfbee7778d92ef259e6c96d3012f98c58b79ed07 Mon Sep 17 00:00:00 2001
From: Florent Mariotti <florent.mariotti@cgi.com>
Date: Tue, 17 Dec 2024 19:24:42 +0100
Subject: [PATCH 05/12] WIP display board list selection

---
 backend/src/main/resources/i18n/fr.json       |   1 +
 frontend/src/components/app-view/AppView.tsx  |  11 +-
 .../BoardCreateMagnetBoardModal.tsx           | 172 +++++++++++++++++
 .../board-create-magnet-board-modal/style.ts  | 132 +++++++++++++
 .../board-create-magnet-board-modal/types.ts  |  16 ++
 .../useRenderContent.tsx                      | 174 ++++++++++++++++++
 .../board-create-magnet-board-modal/utils.ts  |  10 +
 .../src/components/board-list/BoardList.tsx   |  10 +-
 frontend/src/components/board-list/types.ts   |   8 +
 .../src/components/board-view/BoardView.tsx   |   5 +
 .../card-content-board/CardContentBoard.tsx   | 147 ++++-----------
 .../components/card-content-board/style.ts    |  12 ++
 .../components/card-content-board/types.ts    |   5 +
 .../card-content-board/useScaledIframe.ts     | 159 ++++++++++++++++
 .../components/create-magnet/CreateMagnet.tsx |   8 +-
 .../src/components/static-page/StaticPage.tsx |  26 +++
 frontend/src/components/tab-list/TabList.tsx  |  12 +-
 frontend/src/components/tab-list/types.ts     |  11 ++
 frontend/src/components/tab-list/utils.ts     |  63 ++++---
 .../core/enums/menu-not-media-type.enum.ts    |   1 +
 frontend/src/hooks/useSideMenuData.ts         |   8 +
 21 files changed, 840 insertions(+), 151 deletions(-)
 create mode 100644 frontend/src/components/board-create-magnet-board-modal/BoardCreateMagnetBoardModal.tsx
 create mode 100644 frontend/src/components/board-create-magnet-board-modal/style.ts
 create mode 100644 frontend/src/components/board-create-magnet-board-modal/types.ts
 create mode 100644 frontend/src/components/board-create-magnet-board-modal/useRenderContent.tsx
 create mode 100644 frontend/src/components/board-create-magnet-board-modal/utils.ts
 create mode 100644 frontend/src/components/board-list/types.ts
 create mode 100644 frontend/src/components/card-content-board/style.ts
 create mode 100644 frontend/src/components/card-content-board/types.ts
 create mode 100644 frontend/src/components/card-content-board/useScaledIframe.ts
 create mode 100644 frontend/src/components/static-page/StaticPage.tsx

diff --git a/backend/src/main/resources/i18n/fr.json b/backend/src/main/resources/i18n/fr.json
index 46494b35..92d665b6 100644
--- a/backend/src/main/resources/i18n/fr.json
+++ b/backend/src/main/resources/i18n/fr.json
@@ -176,6 +176,7 @@
   "group.school.Guest": "Invités de l'{{0}}.",
   "magneto.return": "Retour",
   "magneto.card.saved.by": "Crée par {{0}}, modifié par {{1}}",
+  "magneto.boards.collection": "Collection de tableaux",
   "magneto.cards.collection": "Collection d'aimants",
   "magneto.cards.collection.mine": "Dans mes tableaux",
   "magneto.cards.collection.shared": "Dans les tableaux partagés",
diff --git a/frontend/src/components/app-view/AppView.tsx b/frontend/src/components/app-view/AppView.tsx
index ebdef215..3c2b21eb 100644
--- a/frontend/src/components/app-view/AppView.tsx
+++ b/frontend/src/components/app-view/AppView.tsx
@@ -32,8 +32,13 @@ export const AppView: FC = () => {
   const [searchBarResetter, resetSearchBar] = useState(0);
   const { currentFolder, folders, setSelectedFoldersIds, setSelectedFolders } =
     useFoldersNavigation();
-  const { boards, selectedBoards, setSelectedBoards, setSelectedBoardsIds } =
-    useBoardsNavigation();
+  const {
+    boards,
+    selectedBoards,
+    setSelectedBoards,
+    setSelectedBoardsIds,
+    boardsLoading,
+  } = useBoardsNavigation();
   const [dragAndDropBoards, setDragAndDropBoards] = useState<Board[]>([]);
   const [showModal, setShowModal] = useState(false);
   const [modalProps, setModalProps] = useState({
@@ -183,6 +188,8 @@ export const AppView: FC = () => {
             <BoardList
               searchText={searchText}
               onDragAndDrop={handleDragAndDropBoards}
+              boards={boards}
+              boardsLoading={boardsLoading}
             />
             <ToasterContainer
               reset={resetBoardsAndFolders}
diff --git a/frontend/src/components/board-create-magnet-board-modal/BoardCreateMagnetBoardModal.tsx b/frontend/src/components/board-create-magnet-board-modal/BoardCreateMagnetBoardModal.tsx
new file mode 100644
index 00000000..6a434fad
--- /dev/null
+++ b/frontend/src/components/board-create-magnet-board-modal/BoardCreateMagnetBoardModal.tsx
@@ -0,0 +1,172 @@
+import { FC, useMemo, useState } from "react";
+
+import { Button, SearchBar, useToast } from "@edifice-ui/react";
+import CloseIcon from "@mui/icons-material/Close";
+import { Box, IconButton, Modal, Typography } from "@mui/material";
+import { useTranslation } from "react-i18next";
+
+import {
+  closeButtonStyle,
+  contentContainerStyle,
+  duplicateButtonStyle,
+  headerStyle,
+  modalContainerStyle,
+  modalFooterStyle,
+  titleStyle,
+} from "./style";
+import { InputValueState, BoardCreateMagnetBoardModalProps } from "./types";
+import { initialInputvalue } from "./utils";
+import { BoardList } from "../board-list/BoardList";
+import { TabList } from "../tab-list/TabList";
+import { CURRENTTAB_STATE } from "../tab-list/types";
+import { BOARD_TABS_CONFIG } from "../tab-list/utils";
+import { Board, IBoardItemResponse } from "~/models/board.model";
+import { useBoard } from "~/providers/BoardProvider";
+import { useGetAllBoardsQuery } from "~/services/api/boards.service";
+import { useDuplicateCardMutation } from "~/services/api/cards.service";
+
+export const BoardCreateMagnetBoardModal: FC<
+  BoardCreateMagnetBoardModalProps
+> = ({ open, onClose }) => {
+  const { board } = useBoard();
+  const [inputValue, setInputValue] =
+    useState<InputValueState>(initialInputvalue);
+  const { currentTab } = inputValue;
+  const { t } = useTranslation("magneto");
+  const [duplicateCard] = useDuplicateCardMutation();
+  const toast = useToast();
+
+  const { data: myBoardsResult, isLoading: boardsLoading } =
+    useGetAllBoardsQuery({
+      isPublic: currentTab === CURRENTTAB_STATE.PUBLIC,
+      isShared: currentTab === CURRENTTAB_STATE.SHARED,
+      isDeleted: false,
+      sortBy: "modificationDate",
+      page: 0,
+    });
+
+  const boards = useMemo(() => {
+    return (
+      myBoardsResult?.all?.map((board: IBoardItemResponse) =>
+        new Board().build(board),
+      ) || []
+    );
+  }, [myBoardsResult]);
+
+  const handleTabChange = (newValue: CURRENTTAB_STATE) => {
+    setInputValue((prevState) => ({
+      ...prevState,
+      currentTab: newValue,
+      cardIds: [],
+    }));
+  };
+  const handleSearchChange = (newValue: string) => {
+    setInputValue((prevState) => ({
+      ...prevState,
+      search: newValue,
+      cardIds: [],
+    }));
+  };
+
+  const onCloseModal = () => {
+    setInputValue(initialInputvalue);
+    onClose();
+  };
+
+  const handleSubmit = async () => {
+    if (inputValue.cardIds) {
+      const magnetMagnetParams = {
+        boardId: board._id,
+        cardIds: inputValue.cardIds,
+      };
+      try {
+        await duplicateCard(magnetMagnetParams);
+        toast.success(t("magneto.duplicate.cards.confirm"));
+        onCloseModal();
+      } catch (err) {
+        console.error("failed to duplicate cards");
+      }
+    }
+  };
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      aria-labelledby="modal-title"
+      aria-describedby="modal-create-magnet-magnet"
+    >
+      <Box sx={modalContainerStyle}>
+        <Box sx={headerStyle}>
+          <Typography
+            id="modal-title"
+            variant="h4"
+            component="h2"
+            sx={titleStyle}
+          >
+            {t("magneto.boards.collection")}
+          </Typography>
+          <IconButton
+            onClick={onClose}
+            aria-label="close"
+            sx={closeButtonStyle}
+          >
+            <CloseIcon fontSize="inherit" />
+          </IconButton>
+        </Box>
+        <Box sx={{ width: "100%", padding: "2rem 10%", margin: "auto" }}>
+          <SearchBar
+            onChange={(e) => {
+              handleSearchChange(e.target.value);
+            }}
+            placeholder={t("magneto.search.placeholder")}
+            size="md"
+            isVariant
+            className="searchbar"
+          />
+        </Box>
+        <Box
+          sx={{
+            width: "100%",
+            pb: "1rem",
+            margin: "auto",
+            display: "flex",
+            justifyContent: "center",
+          }}
+        >
+          <TabList
+            currentTab={currentTab}
+            onChange={handleTabChange}
+            tabsConfig={BOARD_TABS_CONFIG}
+          />
+        </Box>
+        <Box sx={contentContainerStyle}>
+          <BoardList
+            searchText={inputValue.search}
+            onDragAndDrop={() => {}}
+            boards={boards}
+            boardsLoading={boardsLoading}
+          />
+        </Box>
+        <Box sx={modalFooterStyle}>
+          <Box sx={duplicateButtonStyle}>
+            <Button
+              color="tertiary"
+              type="button"
+              variant="ghost"
+              onClick={() => onCloseModal()}
+            >
+              {t("magneto.cancel")}
+            </Button>
+            <Button
+              onClick={() => handleSubmit()}
+              disabled={!inputValue.cardIds?.length}
+            >
+              {t("magneto.card.options.duplicate")}
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
diff --git a/frontend/src/components/board-create-magnet-board-modal/style.ts b/frontend/src/components/board-create-magnet-board-modal/style.ts
new file mode 100644
index 00000000..2f7df736
--- /dev/null
+++ b/frontend/src/components/board-create-magnet-board-modal/style.ts
@@ -0,0 +1,132 @@
+import { FormControlLabel, styled } from "@mui/material";
+
+import { BoardCardWrapperProps } from "./types";
+
+export const modalContainerStyle = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: "130rem",
+  bgcolor: "background.paper",
+  boxShadow: 24,
+  borderRadius: "1.6rem",
+  display: "flex",
+  maxHeight: "90vh",
+  flexDirection: "column",
+  padding: "3.2rem 5.2rem 3.2rem 5.2rem",
+};
+
+export const headerStyle = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  marginBottom: "1rem",
+};
+
+export const titleStyle = {
+  fontWeight: "bold",
+  fontFamily: "Comfortaa",
+  fontSize: "2.6rem",
+};
+
+export const closeButtonStyle = {
+  fontSize: "2.5rem",
+  borderRadius: "0.8rem",
+  position: "absolute",
+  top: "1.5rem",
+  right: "1.5rem",
+  color: "#4a4a4a",
+  opacity: 1,
+};
+
+export const contentContainerStyle = {
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  gap: "1rem",
+  marginTop: "1.4rem !important",
+  overflowY: "auto",
+  "&::-webkit-scrollbar": {
+    width: "0.8rem",
+    height: "0.8rem",
+  },
+  "&::-webkit-scrollbar-thumb": {
+    backgroundColor: "rgba(170,170,170,1)",
+    borderRadius: "0.3rem",
+  },
+};
+
+export const descriptionStyle = {
+  fontSize: "1.7rem",
+  whiteSpace: "pre-wrap",
+  wordWrap: "break-word",
+  overflowWrap: "break-word",
+};
+
+export const modalFooterStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  width: "100%",
+  gap: "1rem",
+  height: "4rem",
+};
+
+export const duplicateButtonStyle = {
+  marginTop: "1.5rem",
+};
+
+export const formGroupStyle = { flexDirection: "row", gap: ".5rem" };
+
+export const StyledFormControlLabel = styled(FormControlLabel)(() => ({
+  "& .MuiFormControlLabel-label": {
+    fontSize: "1.5rem",
+    color: "#4a4a4a",
+    fontFamily: "Roboto, sans-serif",
+  },
+}));
+
+export const boardTitleStyle = {
+  fontSize: "2.6rem",
+  fontFamily: "Comfortaa, cursive",
+  color: "black",
+  fontWeight: "700",
+};
+
+export const boardTitleWrapperStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "1rem",
+  marginBottom: "1.5rem",
+};
+
+export const boardTitleButton = {
+  color: "#555555",
+  textDecoration: "underline",
+  textTransform: "none",
+  fontSize: "1.5rem",
+  "&:hover": {
+    textDecoration: "underline",
+    background: "transparent",
+  },
+};
+
+export const listStyle = {
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+};
+
+export const BoardCardWrapper = styled("div")<BoardCardWrapperProps>(({
+  isCardSelected = false,
+}) => {
+  const boardCardStyle = {
+    border: isCardSelected
+      ? "0.2rem solid #CEEAF5"
+      : "0.2rem solid transparent",
+    borderRadius: isCardSelected ? "10px" : "",
+  };
+  return boardCardStyle;
+});
diff --git a/frontend/src/components/board-create-magnet-board-modal/types.ts b/frontend/src/components/board-create-magnet-board-modal/types.ts
new file mode 100644
index 00000000..cba93064
--- /dev/null
+++ b/frontend/src/components/board-create-magnet-board-modal/types.ts
@@ -0,0 +1,16 @@
+import { CURRENTTAB_STATE } from "../tab-list/types";
+
+export interface BoardCreateMagnetBoardModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export interface InputValueState {
+  search: string;
+  currentTab: CURRENTTAB_STATE;
+  boardIds: string[];
+}
+
+export interface BoardCardWrapperProps {
+  isCardSelected: boolean;
+}
diff --git a/frontend/src/components/board-create-magnet-board-modal/useRenderContent.tsx b/frontend/src/components/board-create-magnet-board-modal/useRenderContent.tsx
new file mode 100644
index 00000000..69f6e9ce
--- /dev/null
+++ b/frontend/src/components/board-create-magnet-board-modal/useRenderContent.tsx
@@ -0,0 +1,174 @@
+import { useEffect, useMemo, MouseEvent as ReactMouseEvent } from "react";
+
+import FileCopyOutlinedIcon from "@mui/icons-material/FileCopyOutlined";
+import { Box, Button, Grid, List, ListItem, Typography } from "@mui/material";
+import { useTranslation } from "react-i18next";
+
+import {
+  BoardCardWrapper,
+  boardTitleButton,
+  boardTitleStyle,
+  boardTitleWrapperStyle,
+  listStyle,
+} from "./style";
+import { InputValueState } from "./types";
+import BoardCard from "../board-card/BoardCard";
+import { EmptyState } from "../empty-state/EmptyState";
+import { CURRENTTAB_STATE } from "../tab-list/types";
+import { POINTER_TYPES } from "~/core/constants/pointerTypes.const";
+import { usePredefinedToasts } from "~/hooks/usePredefinedToasts";
+import { Board, IBoardItemResponse } from "~/models/board.model";
+import { Card } from "~/models/card.model";
+import {
+  useDuplicateBoardMutation,
+  useGetAllBoardsQuery,
+} from "~/services/api/boards.service";
+
+export const useRenderContent = (
+  inputValue: InputValueState,
+  setInputValue: React.Dispatch<React.SetStateAction<InputValueState>>,
+) => {
+  const { t } = useTranslation("magneto");
+  const { search, currentTab } = inputValue;
+  const zoomLevel = 2;
+  const { data: myBoardsResult } = useGetAllBoardsQuery({
+    isPublic: currentTab === CURRENTTAB_STATE.PUBLIC,
+    isShared: currentTab === CURRENTTAB_STATE.SHARED,
+    isDeleted: false,
+    sortBy: "modificationDate",
+    page: 0,
+  });
+
+  const [duplicateBoard] = useDuplicateBoardMutation();
+
+  const duplicateBoardsAndToast = usePredefinedToasts({
+    func: duplicateBoard,
+    successMessage: t("magneto.duplicate.elements.confirm"),
+    failureMessage: t("magneto.duplicate.elements.error"),
+  });
+
+  const boards = useMemo(() => {
+    return (
+      myBoardsResult?.all?.map((board: IBoardItemResponse) =>
+        new Board().build(board),
+      ) || []
+    );
+  }, [myBoardsResult]);
+
+  const isSelectable = (event: MouseEvent): boolean => {
+    const element = event.target as Element;
+    const isNonSelectable =
+      element.closest(`[data-type="${POINTER_TYPES.NON_SELECTABLE}"]`) !== null;
+    const dropdownOpen = document.querySelector('[data-dropdown-open="true"]');
+    return !isNonSelectable && !dropdownOpen;
+  };
+
+  const updateSelectedMagnets = (
+    event: ReactMouseEvent<HTMLDivElement>,
+    cardId: string,
+  ) => {
+    if (!isSelectable(event.nativeEvent)) {
+      event.preventDefault();
+      return;
+    }
+
+    let updatedSelectedBoards = inputValue.boardIds;
+
+    if (updatedSelectedBoards.find((magnetId: string) => magnetId == cardId)) {
+      const index = updatedSelectedBoards.indexOf(cardId, 0);
+      updatedSelectedBoards.splice(index, 1);
+    } else {
+      updatedSelectedBoards = [...updatedSelectedBoards, cardId];
+    }
+    setInputValue((prevState) => ({
+      ...prevState,
+      cardIds: updatedSelectedBoards,
+    }));
+  };
+
+  useEffect(() => {
+    const handleMouseDown = (e: MouseEvent) => {
+      if (!isSelectable(e)) {
+        e.preventDefault();
+      }
+    };
+
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, []);
+
+  const isBoardSelected = (boardId: string): boolean => {
+    return !!inputValue.boardIds.find(
+      (boardCardId: string) => boardCardId == boardId,
+    );
+  };
+
+  if (isByBoards) {
+    return isOneMagnetInBoards ? (
+      <List sx={listStyle}>
+        {boardsWithCards.map(
+          (board: Board) =>
+            !!board.cards.length && (
+              <ListItem key={board._id}>
+                <Box width={"100%"}>
+                  <Box sx={boardTitleWrapperStyle}>
+                    <Typography sx={boardTitleStyle}>{board._title}</Typography>
+                    <Button
+                      sx={boardTitleButton}
+                      startIcon={<FileCopyOutlinedIcon />}
+                      onClick={() => duplicateBoardsAndToast(board._id)}
+                    >
+                      {t("magneto.cards.collection.board.duplicate")}
+                    </Button>
+                  </Box>
+                  <Grid container spacing={2} width="fit-content">
+                    {board.cards.map((card) => (
+                      <Grid item key={card.id}>
+                        <BoardCardWrapper
+                          isBoardSelected={isBoardSelected(card.id)}
+                          onClick={(event) => {
+                            updateSelectedMagnets(event, card.id);
+                          }}
+                        >
+                          <BoardCard
+                            card={card}
+                            zoomLevel={zoomLevel}
+                            readOnly={true}
+                          />
+                        </BoardCardWrapper>
+                      </Grid>
+                    ))}
+                  </Grid>
+                </Box>
+              </ListItem>
+            ),
+        )}
+      </List>
+    ) : (
+      <EmptyState title={t("magneto.cards.empty.text")} />
+    );
+  } else {
+    return cardsData.length ? (
+      <Box sx={{ display: "flex", justifyContent: "center" }}>
+        <Grid container spacing={2} p={".5rem"}>
+          {cardsData.map((card: Card) => (
+            <Grid item key={card.id}>
+              <BoardCardWrapper
+                isBoardSelected={isBoardSelected(card.id)}
+                onClick={(event) => {
+                  updateSelectedMagnets(event, card.id);
+                }}
+              >
+                <BoardCard card={card} zoomLevel={zoomLevel} readOnly={true} />
+              </BoardCardWrapper>
+            </Grid>
+          ))}
+        </Grid>
+      </Box>
+    ) : (
+      <EmptyState title={t("magneto.cards.empty.text")} />
+    );
+  }
+};
diff --git a/frontend/src/components/board-create-magnet-board-modal/utils.ts b/frontend/src/components/board-create-magnet-board-modal/utils.ts
new file mode 100644
index 00000000..e9eeb473
--- /dev/null
+++ b/frontend/src/components/board-create-magnet-board-modal/utils.ts
@@ -0,0 +1,10 @@
+import { InputValueState } from "./types";
+import { CURRENTTAB_STATE } from "../tab-list/types";
+
+export const initialInputvalue: InputValueState = {
+  search: "",
+  currentTab: CURRENTTAB_STATE.MINE,
+  isByBoards: false,
+  isByFavorite: false,
+  cardIds: [],
+};
diff --git a/frontend/src/components/board-list/BoardList.tsx b/frontend/src/components/board-list/BoardList.tsx
index 4f48591f..8d2cc074 100644
--- a/frontend/src/components/board-list/BoardList.tsx
+++ b/frontend/src/components/board-list/BoardList.tsx
@@ -4,26 +4,22 @@ import { Loading } from "@edifice-ui/react";
 import { animated, useSpring } from "@react-spring/web";
 
 import "./BoardList.scss";
+import { BoardListProps } from "./types";
 import { isBoardInFilter } from "./utils";
 import { BoardItem } from "~/components/board-item/BoardItem";
 import { Board } from "~/models/board.model";
-import { useBoardsNavigation } from "~/providers/BoardsNavigationProvider";
-
-type BoardListProps = {
-  onDragAndDrop: (board: Board) => void;
-  searchText: string;
-};
 
 export const BoardList: React.FunctionComponent<BoardListProps> = ({
   onDragAndDrop,
   searchText,
+  boards,
+  boardsLoading,
 }) => {
   const springs = useSpring({
     from: { opacity: 0 },
     to: { opacity: 1 },
   });
 
-  const { boards, boardsLoading } = useBoardsNavigation();
   const [isBoardDragged, setIsBoardDragged] = useState<boolean>(false);
 
   return (
diff --git a/frontend/src/components/board-list/types.ts b/frontend/src/components/board-list/types.ts
new file mode 100644
index 00000000..7bd7e4e1
--- /dev/null
+++ b/frontend/src/components/board-list/types.ts
@@ -0,0 +1,8 @@
+import { Board } from "~/models/board.model";
+
+export interface BoardListProps {
+  onDragAndDrop: (board: Board) => void;
+  searchText: string;
+  boards: Board[]; // Nouvelle prop
+  boardsLoading: boolean; // Nouvelle prop
+}
diff --git a/frontend/src/components/board-view/BoardView.tsx b/frontend/src/components/board-view/BoardView.tsx
index f77fecd3..c2f8772e 100644
--- a/frontend/src/components/board-view/BoardView.tsx
+++ b/frontend/src/components/board-view/BoardView.tsx
@@ -27,6 +27,7 @@ import { MENU_NOT_MEDIA_TYPE } from "~/core/enums/menu-not-media-type.enum";
 import { useSideMenuData } from "~/hooks/useSideMenuData";
 import { useBoard } from "~/providers/BoardProvider";
 import { useMediaLibrary } from "~/providers/MediaLibraryProvider";
+import { BoardCreateMagnetBoardModal } from "../board-create-magnet-board-modal/BoardCreateMagnetBoardModal";
 
 export const BoardView: FC = () => {
   const { t } = useTranslation("magneto");
@@ -166,6 +167,10 @@ export const BoardView: FC = () => {
           open={magnetType === MENU_NOT_MEDIA_TYPE.CARD}
           onClose={onClose}
         />
+        <BoardCreateMagnetBoardModal
+          open={magnetType === MENU_NOT_MEDIA_TYPE.BOARD}
+          onClose={onClose}
+        />
         <CreateBoard
           isOpen={displayModals.PARAMETERS}
           toggle={() => toggleBoardModals(BOARD_MODAL_TYPE.PARAMETERS)}
diff --git a/frontend/src/components/card-content-board/CardContentBoard.tsx b/frontend/src/components/card-content-board/CardContentBoard.tsx
index 75d30dc1..38af4274 100644
--- a/frontend/src/components/card-content-board/CardContentBoard.tsx
+++ b/frontend/src/components/card-content-board/CardContentBoard.tsx
@@ -1,127 +1,46 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React from "react";
 
-interface CustomIframeProps {
-  src: string;
-  width?: number;
-  height?: number;
-}
+import { Box } from "@mui/material";
+import { useTranslation } from "react-i18next";
 
-export const CustomIframe: React.FC<CustomIframeProps> = ({ 
-  src, 
-  width = 1500, 
-  height = 800 
-}) => {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const [isLoaded, setIsLoaded] = useState(false);
-  const [scale, setScale] = useState(1);
-
-  const adjustIframeScale = useCallback(() => {
-    const iframe = iframeRef.current;
-    if (!iframe) return;
-
-    try {
-      // Utiliser un délai pour s'assurer que le contenu est chargé
-      setTimeout(() => {
-        const iframeWindow = iframe.contentWindow;
-        const iframeDocument = iframe.contentDocument || iframeWindow?.document;
-        
-        if (!iframeDocument) return;
-
-        // Essayer différentes méthodes pour obtenir les dimensions
-        const contentWidth = Math.max(
-          iframeDocument.body?.scrollWidth || 0,
-          iframeDocument.documentElement?.scrollWidth || 0,
-          iframeWindow?.innerWidth || 0
-        );
-        
-        const contentHeight = Math.max(
-          iframeDocument.body?.scrollHeight || 0,
-          iframeDocument.documentElement?.scrollHeight || 0,
-          iframeWindow?.innerHeight || 0
-        );
+import { loadingContainerStyle, loadingTextStyle } from "./style";
+import { ScaledIframeProps } from "./types";
+import { useScaledIframe } from "./useScaledIframe";
 
-        // Calculer l'échelle
-        const scaleX = width / contentWidth;
-        const scaleY = height / contentHeight;
-        
-        // Prendre le zoom le plus petit, mais sans dépasser 1
-        const newScale = Math.min(scaleX, scaleY, 1);
-        
-        // Mettre à jour le state pour déclencher un re-render
-        setScale(newScale);
-
-        console.log('Iframe Scaling:', {
-          contentWidth, 
-          contentHeight, 
-          scaleX, 
-          scaleY, 
-          finalScale: newScale
-        });
-      }, 1000); // Délai plus long pour charger le contenu
-    } catch (error) {
-      console.error('Erreur de scaling de l\'iframe:', error);
-    }
-  }, [width, height]);
-
-  // Gérer le chargement et le scaling
-  const handleIframeLoad = useCallback(() => {
-    setIsLoaded(true);
-    adjustIframeScale();
-    
-    // Ajouter un écouteur de redimensionnement
-    window.addEventListener('resize', adjustIframeScale);
-    
-    return () => {
-      window.removeEventListener('resize', adjustIframeScale);
-    };
-  }, [adjustIframeScale]);
+const ScaledIframe: React.FC<ScaledIframeProps> = ({
+  src,
+  width = 1920,
+  height = 1080,
+}) => {
+  const {
+    iframeRef,
+    containerRef,
+    isLoading,
+    handleIframeLoad,
+    iframeStyle,
+    containerStyle,
+  } = useScaledIframe({ width, height });
 
-  // Effet pour gérer l'événement de chargement
-  useEffect(() => {
-    const iframe = iframeRef.current;
-    if (iframe) {
-      iframe.addEventListener('load', handleIframeLoad);
-      
-      return () => {
-        iframe.removeEventListener('load', handleIframeLoad);
-      };
-    }
-  }, [handleIframeLoad]);
+  const { t } = useTranslation("magneto");
 
   return (
-    <div 
-      style={{ 
-        width: '100%', 
-        maxWidth: `${width}px`, 
-        height, 
-        overflow: 'hidden',
-        position: 'relative',
-      }}
-    >
+    <Box ref={containerRef} sx={containerStyle}>
       <iframe
         ref={iframeRef}
         src={src}
-        style={{
-          border: 'none',
-          width: '100%',
-          height: '100%',
-          transform: `scale(${scale})`,
-          transformOrigin: 'top left',
-          pointerEvents: 'none',
-        }}
+        scrolling="no"
+        style={iframeStyle}
+        onLoad={handleIframeLoad}
+        title="Scaled content"
         sandbox="allow-scripts allow-same-origin allow-forms"
-        title="Scaled Iframe"
       />
-      {!isLoaded && (
-        <div style={{
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-        }}>
-          Chargement...
-        </div>
+      {isLoading && (
+        <Box sx={loadingContainerStyle}>
+          <Box sx={loadingTextStyle}>{t("magneto.loading")}</Box>
+        </Box>
       )}
-    </div>
+    </Box>
   );
-};
\ No newline at end of file
+};
+
+export default ScaledIframe;
diff --git a/frontend/src/components/card-content-board/style.ts b/frontend/src/components/card-content-board/style.ts
new file mode 100644
index 00000000..790396ee
--- /dev/null
+++ b/frontend/src/components/card-content-board/style.ts
@@ -0,0 +1,12 @@
+export const loadingContainerStyle = {
+  position: "absolute",
+  inset: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  bgcolor: "grey.50",
+};
+
+export const loadingTextStyle = {
+  color: "text.secondary",
+};
diff --git a/frontend/src/components/card-content-board/types.ts b/frontend/src/components/card-content-board/types.ts
new file mode 100644
index 00000000..842a5c2a
--- /dev/null
+++ b/frontend/src/components/card-content-board/types.ts
@@ -0,0 +1,5 @@
+export interface ScaledIframeProps {
+  src: string;
+  width?: number;
+  height?: number;
+}
diff --git a/frontend/src/components/card-content-board/useScaledIframe.ts b/frontend/src/components/card-content-board/useScaledIframe.ts
new file mode 100644
index 00000000..feee19eb
--- /dev/null
+++ b/frontend/src/components/card-content-board/useScaledIframe.ts
@@ -0,0 +1,159 @@
+import { useEffect, useRef, useState, useMemo, useCallback } from "react";
+
+interface UseScaledIframeProps {
+  width?: number;
+  height?: number;
+}
+
+interface UseScaledIframeReturn {
+  iframeRef: React.RefObject<HTMLIFrameElement>;
+  containerRef: React.RefObject<HTMLDivElement>;
+  isLoading: boolean;
+  containerHeight: number;
+  handleIframeLoad: () => void;
+  iframeStyle: React.CSSProperties;
+  containerStyle: React.CSSProperties;
+}
+
+export const useScaledIframe = ({
+  width = 1920,
+  height = 1080,
+}: UseScaledIframeProps = {}): UseScaledIframeReturn => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [dimensions, setDimensions] = useState({
+    containerWidth: 0,
+    viewportHeight: window.innerHeight,
+    containerHeight: 0,
+    scale: 1,
+    horizontalOffset: 0,
+  });
+
+  // Calculate the iframe scaling to always show the whole page
+  const calculateScale = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return null;
+
+    const containerWidth = container.clientWidth;
+    const viewportHeight = window.innerHeight;
+    const maxHeight = viewportHeight * 0.4;
+
+    const scaleByWidth = containerWidth / width;
+    const scaleByHeight = maxHeight / height;
+    const scale = Math.min(scaleByWidth, scaleByHeight);
+
+    const scaledHeight = height * scale;
+    const horizontalOffset = (containerWidth - width * scale) / 2;
+
+    return {
+      containerWidth,
+      viewportHeight,
+      containerHeight: scaledHeight,
+      scale,
+      horizontalOffset,
+    };
+  }, [width, height]);
+
+  const updateScale = useCallback(() => {
+    const newDimensions = calculateScale();
+    if (newDimensions) {
+      setDimensions(newDimensions);
+    }
+  }, [calculateScale]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      requestAnimationFrame(updateScale);
+    });
+
+    resizeObserver.observe(container);
+
+    const handleResize = () => requestAnimationFrame(updateScale);
+    window.addEventListener("resize", handleResize);
+
+    // Initial scale calculation
+    updateScale();
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [updateScale]);
+
+  const hideHeader = useCallback(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+
+    try {
+      const iframeDoc =
+        iframe.contentDocument || iframe.contentWindow?.document;
+      if (!iframeDoc) return;
+
+      let styleElement = iframeDoc.getElementById("hide-header-style");
+      if (!styleElement) {
+        styleElement = iframeDoc.createElement("style");
+        styleElement.id = "hide-header-style";
+        iframeDoc.head.appendChild(styleElement);
+      }
+
+      styleElement.textContent = `
+        #root > .header:first-of-type {
+          display: none !important;
+        }
+      `;
+    } catch (error) {
+      console.error("Failed to hide header:", error);
+    }
+  }, []);
+
+  const handleIframeLoad = useCallback(() => {
+    setIsLoading(false);
+    updateScale();
+    hideHeader();
+  }, [updateScale, hideHeader]);
+
+  const iframeStyle = useMemo<React.CSSProperties>(
+    () => ({
+      transformOrigin: "top left",
+      pointerEvents: "none",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: `${width}px`,
+      height: `${height}px`,
+      transform: `translate(${dimensions.horizontalOffset}px, 0) scale(${dimensions.scale})`,
+      visibility: isLoading ? "hidden" : "visible",
+    }),
+    [width, height, dimensions.horizontalOffset, dimensions.scale, isLoading],
+  );
+
+  const containerStyle = useMemo<React.CSSProperties>(
+    () => ({
+      width: "100%",
+      height: dimensions.containerHeight
+        ? `${dimensions.containerHeight}px`
+        : "auto",
+      maxHeight: "40vh",
+      position: "relative",
+      overflow: "hidden",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+    }),
+    [dimensions.containerHeight],
+  );
+
+  return {
+    iframeRef,
+    containerRef,
+    isLoading,
+    containerHeight: dimensions.containerHeight,
+    handleIframeLoad,
+    iframeStyle,
+    containerStyle,
+  };
+};
diff --git a/frontend/src/components/create-magnet/CreateMagnet.tsx b/frontend/src/components/create-magnet/CreateMagnet.tsx
index c2d03865..6784d437 100644
--- a/frontend/src/components/create-magnet/CreateMagnet.tsx
+++ b/frontend/src/components/create-magnet/CreateMagnet.tsx
@@ -49,7 +49,7 @@ import {
   convertResourceTypeToMediaType,
 } from "./utils";
 import { MediaProps } from "../board-view/types";
-import { CustomIframe } from "../card-content-board/CardContentBoard";
+import ScaledIframe from "../card-content-board/CardContentBoard";
 import { CardContentFile } from "../card-content-file/CardContentFile";
 import { FilePickerWorkspace } from "../file-picker-workspace/FilePickerWorkspace";
 import { iconButtonStyle } from "../file-picker-workspace/style";
@@ -243,8 +243,12 @@ export const CreateMagnet: FC = () => {
             <CloseIcon fontSize="inherit" />
           </IconButton>
         </Box>
-        <CustomIframe src={"http://localhost:4200/#/board/de9b72ea-b1db-4ffa-9cb7-d4e032ec5fbb/view"} />
         <Box sx={contentContainerStyle}>
+          <ScaledIframe
+            src={
+              "http://localhost:4200/#/board/de9b72ea-b1db-4ffa-9cb7-d4e032ec5fbb/view"
+            }
+          />
           {magnetTypeHasFilePickerWorkspace &&
             (activeCard ? (
               <CardContentFile card={activeCard} />
diff --git a/frontend/src/components/static-page/StaticPage.tsx b/frontend/src/components/static-page/StaticPage.tsx
new file mode 100644
index 00000000..369cd335
--- /dev/null
+++ b/frontend/src/components/static-page/StaticPage.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+interface UrlBackgroundViewerProps {
+  url: string;
+  width?: number;
+  height?: number;
+}
+
+export const UrlBackgroundViewer: React.FC<UrlBackgroundViewerProps> = ({
+  url,
+  width = 1920,
+  height = 1080
+}) => {
+  return (
+    <div 
+      style={{
+        width: '100%',
+        maxWidth: `${width}px`,
+        height: `${height}px`,
+        background: `url(${url}) no-repeat center center`,
+        backgroundSize: 'contain',
+        pointerEvents: 'none',
+      }}
+    />
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/components/tab-list/TabList.tsx b/frontend/src/components/tab-list/TabList.tsx
index b5a6547b..9ff1653f 100644
--- a/frontend/src/components/tab-list/TabList.tsx
+++ b/frontend/src/components/tab-list/TabList.tsx
@@ -1,19 +1,21 @@
-"use client";
-
 import { FC, SyntheticEvent } from "react";
 
 import Tabs from "@mui/material/Tabs";
 
 import { StyledTab, tabsStyle } from "./style";
 import { CURRENTTAB_STATE, TabListProps } from "./types";
-import { useTabs } from "./utils";
+import { DEFAULT_TABS_CONFIG, useTabs } from "./utils";
 
-export const TabList: FC<TabListProps> = ({ currentTab, onChange }) => {
+export const TabList: FC<TabListProps> = ({
+  currentTab,
+  onChange,
+  tabsConfig = DEFAULT_TABS_CONFIG,
+}) => {
   const handleChange = (event: SyntheticEvent, newValue: CURRENTTAB_STATE) => {
     onChange(newValue);
   };
 
-  const tabs = useTabs();
+  const tabs = useTabs(tabsConfig);
 
   return (
     <Tabs
diff --git a/frontend/src/components/tab-list/types.ts b/frontend/src/components/tab-list/types.ts
index 69fc4752..93aa7bf1 100644
--- a/frontend/src/components/tab-list/types.ts
+++ b/frontend/src/components/tab-list/types.ts
@@ -1,6 +1,17 @@
+export interface Tab {
+  tabValue: CURRENTTAB_STATE;
+  label: string;
+}
+
+export interface TabConfig {
+  tabValue: CURRENTTAB_STATE;
+  translationKey: string;
+}
+
 export interface TabListProps {
   currentTab: CURRENTTAB_STATE;
   onChange: (newValue: CURRENTTAB_STATE) => void;
+  tabsConfig?: TabConfig[];
 }
 
 export enum CURRENTTAB_STATE {
diff --git a/frontend/src/components/tab-list/utils.ts b/frontend/src/components/tab-list/utils.ts
index a4d160eb..882d89e8 100644
--- a/frontend/src/components/tab-list/utils.ts
+++ b/frontend/src/components/tab-list/utils.ts
@@ -1,25 +1,46 @@
 import { useTranslation } from "react-i18next";
 
-import { CURRENTTAB_STATE } from "./types";
+import { CURRENTTAB_STATE, TabConfig } from "./types";
 
-export const useTabs = () => {
+export function useTabs(tabsConfig: TabConfig[]) {
   const { t } = useTranslation("magneto");
-  return [
-    {
-      tabValue: CURRENTTAB_STATE.MINE,
-      label: t("magneto.cards.collection.mine"),
-    },
-    {
-      tabValue: CURRENTTAB_STATE.SHARED,
-      label: t("magneto.cards.collection.shared"),
-    },
-    {
-      tabValue: CURRENTTAB_STATE.PUBLIC,
-      label: t("magneto.cards.collection.public"),
-    },
-    {
-      tabValue: CURRENTTAB_STATE.FAVORTIE,
-      label: t("magneto.cards.collection.favorite"),
-    },
-  ];
-};
+
+  return tabsConfig.map(({ tabValue, translationKey }) => ({
+    tabValue,
+    label: t(translationKey),
+  }));
+}
+
+export const DEFAULT_TABS_CONFIG: TabConfig[] = [
+  {
+    tabValue: CURRENTTAB_STATE.MINE,
+    translationKey: "magneto.cards.collection.mine",
+  },
+  {
+    tabValue: CURRENTTAB_STATE.SHARED,
+    translationKey: "magneto.cards.collection.shared",
+  },
+  {
+    tabValue: CURRENTTAB_STATE.PUBLIC,
+    translationKey: "magneto.cards.collection.public",
+  },
+  {
+    tabValue: CURRENTTAB_STATE.FAVORTIE,
+    translationKey: "magneto.cards.collection.favorite",
+  },
+];
+
+export const BOARD_TABS_CONFIG: TabConfig[] = [
+  {
+    tabValue: CURRENTTAB_STATE.MINE,
+    translationKey: "magneto.cards.collection.mine",
+  },
+  {
+    tabValue: CURRENTTAB_STATE.SHARED,
+    translationKey: "magneto.cards.collection.shared",
+  },
+  {
+    tabValue: CURRENTTAB_STATE.PUBLIC,
+    translationKey: "magneto.cards.collection.public",
+  },
+];
diff --git a/frontend/src/core/enums/menu-not-media-type.enum.ts b/frontend/src/core/enums/menu-not-media-type.enum.ts
index 289f52e8..f39c2751 100644
--- a/frontend/src/core/enums/menu-not-media-type.enum.ts
+++ b/frontend/src/core/enums/menu-not-media-type.enum.ts
@@ -1,4 +1,5 @@
 export enum MENU_NOT_MEDIA_TYPE {
   TEXT = "text",
   CARD = "card",
+  BOARD = "board",
 }
diff --git a/frontend/src/hooks/useSideMenuData.ts b/frontend/src/hooks/useSideMenuData.ts
index 041e2f6f..90195e76 100644
--- a/frontend/src/hooks/useSideMenuData.ts
+++ b/frontend/src/hooks/useSideMenuData.ts
@@ -11,6 +11,7 @@ import {
   mdiPlayCircle,
 } from "@mdi/js";
 import Icon from "@mdi/react";
+import TableChartIcon from "@mui/icons-material/TableChart";
 import { useTranslation } from "react-i18next";
 
 import { BOARD_MODAL_TYPE } from "~/core/enums/board-modal-type";
@@ -74,6 +75,13 @@ export const useSideMenuData = (): (
         handleClickMenu(MENU_NOT_MEDIA_TYPE.CARD);
       },
     },
+    {
+      icon: createElement(TableChartIcon),
+      name: t("magneto.board"),
+      action: () => {
+        handleClickMenu(MENU_NOT_MEDIA_TYPE.BOARD);
+      },
+    },
   );
 
   if (hasManageRights()) {

From 49d9264ec4b2ed9fa154890b263017355f4e5dbe Mon Sep 17 00:00:00 2001
From: Florent Mariotti <florent.mariotti@cgi.com>
Date: Thu, 19 Dec 2024 01:39:33 +0100
Subject: [PATCH 06/12] wip

---
 .../BoardCreateMagnetBoardModal.tsx           |  52 +-----
 .../BoardList.scss                            |  72 ++++++++
 .../board-create-magnet-board-modal/style.ts  |   6 +-
 .../board-create-magnet-board-modal/types.ts  |   4 +-
 .../useRenderContent.tsx                      | 172 +++++++-----------
 .../board-create-magnet-board-modal/utils.ts  |   4 +-
 .../board-item-light/BoardItemLight.scss      |  84 +++++++++
 .../board-item-light/BoardItemLight.tsx       | 133 ++++++++++++++
 .../src/components/board-view/BoardView.tsx   |   2 +-
 9 files changed, 367 insertions(+), 162 deletions(-)
 create mode 100644 frontend/src/components/board-create-magnet-board-modal/BoardList.scss
 create mode 100644 frontend/src/components/board-item-light/BoardItemLight.scss
 create mode 100644 frontend/src/components/board-item-light/BoardItemLight.tsx

diff --git a/frontend/src/components/board-create-magnet-board-modal/BoardCreateMagnetBoardModal.tsx b/frontend/src/components/board-create-magnet-board-modal/BoardCreateMagnetBoardModal.tsx
index 6a434fad..a0298804 100644
--- a/frontend/src/components/board-create-magnet-board-modal/BoardCreateMagnetBoardModal.tsx
+++ b/frontend/src/components/board-create-magnet-board-modal/BoardCreateMagnetBoardModal.tsx
@@ -1,4 +1,4 @@
-import { FC, useMemo, useState } from "react";
+import { FC, useState } from "react";
 
 import { Button, SearchBar, useToast } from "@edifice-ui/react";
 import CloseIcon from "@mui/icons-material/Close";
@@ -15,15 +15,12 @@ import {
   titleStyle,
 } from "./style";
 import { InputValueState, BoardCreateMagnetBoardModalProps } from "./types";
+import { useRenderContent } from "./useRenderContent";
 import { initialInputvalue } from "./utils";
-import { BoardList } from "../board-list/BoardList";
 import { TabList } from "../tab-list/TabList";
 import { CURRENTTAB_STATE } from "../tab-list/types";
 import { BOARD_TABS_CONFIG } from "../tab-list/utils";
-import { Board, IBoardItemResponse } from "~/models/board.model";
 import { useBoard } from "~/providers/BoardProvider";
-import { useGetAllBoardsQuery } from "~/services/api/boards.service";
-import { useDuplicateCardMutation } from "~/services/api/cards.service";
 
 export const BoardCreateMagnetBoardModal: FC<
   BoardCreateMagnetBoardModalProps
@@ -33,38 +30,21 @@ export const BoardCreateMagnetBoardModal: FC<
     useState<InputValueState>(initialInputvalue);
   const { currentTab } = inputValue;
   const { t } = useTranslation("magneto");
-  const [duplicateCard] = useDuplicateCardMutation();
   const toast = useToast();
 
-  const { data: myBoardsResult, isLoading: boardsLoading } =
-    useGetAllBoardsQuery({
-      isPublic: currentTab === CURRENTTAB_STATE.PUBLIC,
-      isShared: currentTab === CURRENTTAB_STATE.SHARED,
-      isDeleted: false,
-      sortBy: "modificationDate",
-      page: 0,
-    });
-
-  const boards = useMemo(() => {
-    return (
-      myBoardsResult?.all?.map((board: IBoardItemResponse) =>
-        new Board().build(board),
-      ) || []
-    );
-  }, [myBoardsResult]);
-
   const handleTabChange = (newValue: CURRENTTAB_STATE) => {
     setInputValue((prevState) => ({
       ...prevState,
       currentTab: newValue,
-      cardIds: [],
+      selectedBoardId: null,
     }));
   };
+
   const handleSearchChange = (newValue: string) => {
     setInputValue((prevState) => ({
       ...prevState,
       search: newValue,
-      cardIds: [],
+      selectedBoardId: null,
     }));
   };
 
@@ -74,18 +54,7 @@ export const BoardCreateMagnetBoardModal: FC<
   };
 
   const handleSubmit = async () => {
-    if (inputValue.cardIds) {
-      const magnetMagnetParams = {
-        boardId: board._id,
-        cardIds: inputValue.cardIds,
-      };
-      try {
-        await duplicateCard(magnetMagnetParams);
-        toast.success(t("magneto.duplicate.cards.confirm"));
-        onCloseModal();
-      } catch (err) {
-        console.error("failed to duplicate cards");
-      }
+    if (inputValue.selectedBoardId) {
     }
   };
 
@@ -141,12 +110,7 @@ export const BoardCreateMagnetBoardModal: FC<
           />
         </Box>
         <Box sx={contentContainerStyle}>
-          <BoardList
-            searchText={inputValue.search}
-            onDragAndDrop={() => {}}
-            boards={boards}
-            boardsLoading={boardsLoading}
-          />
+          {useRenderContent(inputValue, setInputValue)}
         </Box>
         <Box sx={modalFooterStyle}>
           <Box sx={duplicateButtonStyle}>
@@ -160,7 +124,7 @@ export const BoardCreateMagnetBoardModal: FC<
             </Button>
             <Button
               onClick={() => handleSubmit()}
-              disabled={!inputValue.cardIds?.length}
+              disabled={!inputValue.selectedBoardId}
             >
               {t("magneto.card.options.duplicate")}
             </Button>
diff --git a/frontend/src/components/board-create-magnet-board-modal/BoardList.scss b/frontend/src/components/board-create-magnet-board-modal/BoardList.scss
new file mode 100644
index 00000000..4a75fd21
--- /dev/null
+++ b/frontend/src/components/board-create-magnet-board-modal/BoardList.scss
@@ -0,0 +1,72 @@
+ul.grid {
+  padding-top: 15px;
+  display: grid;
+  grid-template-columns: repeat(
+    4,
+    minmax(0, 1fr)
+  ); /* Force equal width columns */
+  gap: 16px;
+  width: 100% !important;
+}
+
+li.boardSizing {
+  /* Remove any width constraints */
+  min-width: 0;
+
+  .card {
+    width: 100%;
+    padding: unset !important;
+    margin: unset !important;
+    display: flex;
+    flex-wrap: wrap !important;
+    flex-direction: column;
+    max-width: 100%; /* Ensure card doesn't overflow */
+
+    .board-number-magnets {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      svg {
+        color: #ffb600;
+        font-size: 14px;
+      }
+
+      svg + p {
+        font-size: 12px;
+        margin: 0;
+      }
+    }
+
+    .board-about {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+
+      .board-about-left-content,
+      .board-about-right-content {
+        margin: 0 !important;
+        display: flex;
+        gap: 0.4rem;
+        align-items: center;
+
+        .med-resource-card-text {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+
+.title {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+}
+
+.card-body {
+  width: 100%;
+  padding: 12px;
+}
diff --git a/frontend/src/components/board-create-magnet-board-modal/style.ts b/frontend/src/components/board-create-magnet-board-modal/style.ts
index 2f7df736..5108f107 100644
--- a/frontend/src/components/board-create-magnet-board-modal/style.ts
+++ b/frontend/src/components/board-create-magnet-board-modal/style.ts
@@ -120,13 +120,13 @@ export const listStyle = {
 };
 
 export const BoardCardWrapper = styled("div")<BoardCardWrapperProps>(({
-  isCardSelected = false,
+  isBoardSelected = false,
 }) => {
   const boardCardStyle = {
-    border: isCardSelected
+    border: isBoardSelected
       ? "0.2rem solid #CEEAF5"
       : "0.2rem solid transparent",
-    borderRadius: isCardSelected ? "10px" : "",
+    borderRadius: isBoardSelected ? "10px" : "",
   };
   return boardCardStyle;
 });
diff --git a/frontend/src/components/board-create-magnet-board-modal/types.ts b/frontend/src/components/board-create-magnet-board-modal/types.ts
index cba93064..aa1ce7f0 100644
--- a/frontend/src/components/board-create-magnet-board-modal/types.ts
+++ b/frontend/src/components/board-create-magnet-board-modal/types.ts
@@ -8,9 +8,9 @@ export interface BoardCreateMagnetBoardModalProps {
 export interface InputValueState {
   search: string;
   currentTab: CURRENTTAB_STATE;
-  boardIds: string[];
+  selectedBoardId: string | null;
 }
 
 export interface BoardCardWrapperProps {
-  isCardSelected: boolean;
+  isBoardSelected: boolean;
 }
diff --git a/frontend/src/components/board-create-magnet-board-modal/useRenderContent.tsx b/frontend/src/components/board-create-magnet-board-modal/useRenderContent.tsx
index 69f6e9ce..09da3913 100644
--- a/frontend/src/components/board-create-magnet-board-modal/useRenderContent.tsx
+++ b/frontend/src/components/board-create-magnet-board-modal/useRenderContent.tsx
@@ -1,36 +1,28 @@
 import { useEffect, useMemo, MouseEvent as ReactMouseEvent } from "react";
 
-import FileCopyOutlinedIcon from "@mui/icons-material/FileCopyOutlined";
-import { Box, Button, Grid, List, ListItem, Typography } from "@mui/material";
+import { animated, useSpring } from "@react-spring/web";
 import { useTranslation } from "react-i18next";
 
-import {
-  BoardCardWrapper,
-  boardTitleButton,
-  boardTitleStyle,
-  boardTitleWrapperStyle,
-  listStyle,
-} from "./style";
+import { BoardCardWrapper } from "./style";
 import { InputValueState } from "./types";
-import BoardCard from "../board-card/BoardCard";
-import { EmptyState } from "../empty-state/EmptyState";
+import { BoardItemLight } from "../board-item-light/BoardItemLight";
 import { CURRENTTAB_STATE } from "../tab-list/types";
 import { POINTER_TYPES } from "~/core/constants/pointerTypes.const";
-import { usePredefinedToasts } from "~/hooks/usePredefinedToasts";
 import { Board, IBoardItemResponse } from "~/models/board.model";
-import { Card } from "~/models/card.model";
-import {
-  useDuplicateBoardMutation,
-  useGetAllBoardsQuery,
-} from "~/services/api/boards.service";
+import { useGetAllBoardsQuery } from "~/services/api/boards.service";
+import "./BoardList.scss";
 
 export const useRenderContent = (
   inputValue: InputValueState,
   setInputValue: React.Dispatch<React.SetStateAction<InputValueState>>,
 ) => {
   const { t } = useTranslation("magneto");
-  const { search, currentTab } = inputValue;
-  const zoomLevel = 2;
+  const { search, currentTab, selectedBoardId } = inputValue;
+  const springs = useSpring({
+    from: { opacity: 0 },
+    to: { opacity: 1 },
+  });
+
   const { data: myBoardsResult } = useGetAllBoardsQuery({
     isPublic: currentTab === CURRENTTAB_STATE.PUBLIC,
     isShared: currentTab === CURRENTTAB_STATE.SHARED,
@@ -39,14 +31,6 @@ export const useRenderContent = (
     page: 0,
   });
 
-  const [duplicateBoard] = useDuplicateBoardMutation();
-
-  const duplicateBoardsAndToast = usePredefinedToasts({
-    func: duplicateBoard,
-    successMessage: t("magneto.duplicate.elements.confirm"),
-    failureMessage: t("magneto.duplicate.elements.error"),
-  });
-
   const boards = useMemo(() => {
     return (
       myBoardsResult?.all?.map((board: IBoardItemResponse) =>
@@ -65,25 +49,27 @@ export const useRenderContent = (
 
   const updateSelectedMagnets = (
     event: ReactMouseEvent<HTMLDivElement>,
-    cardId: string,
+    boardId: string,
   ) => {
     if (!isSelectable(event.nativeEvent)) {
       event.preventDefault();
       return;
     }
 
-    let updatedSelectedBoards = inputValue.boardIds;
-
-    if (updatedSelectedBoards.find((magnetId: string) => magnetId == cardId)) {
-      const index = updatedSelectedBoards.indexOf(cardId, 0);
-      updatedSelectedBoards.splice(index, 1);
-    } else {
-      updatedSelectedBoards = [...updatedSelectedBoards, cardId];
-    }
-    setInputValue((prevState) => ({
-      ...prevState,
-      cardIds: updatedSelectedBoards,
-    }));
+    setInputValue((prevState: InputValueState): InputValueState => {
+      // Si le board cliqué est déjà sélectionné, on le désélectionne
+      if (prevState.selectedBoardId === boardId) {
+        return {
+          ...prevState,
+          selectedBoardId: null,
+        };
+      }
+      // Sinon, on sélectionne le nouveau board
+      return {
+        ...prevState,
+        selectedBoardId: boardId,
+      };
+    });
   };
 
   useEffect(() => {
@@ -100,75 +86,43 @@ export const useRenderContent = (
   }, []);
 
   const isBoardSelected = (boardId: string): boolean => {
-    return !!inputValue.boardIds.find(
-      (boardCardId: string) => boardCardId == boardId,
-    );
+    return selectedBoardId === boardId;
   };
 
-  if (isByBoards) {
-    return isOneMagnetInBoards ? (
-      <List sx={listStyle}>
-        {boardsWithCards.map(
-          (board: Board) =>
-            !!board.cards.length && (
-              <ListItem key={board._id}>
-                <Box width={"100%"}>
-                  <Box sx={boardTitleWrapperStyle}>
-                    <Typography sx={boardTitleStyle}>{board._title}</Typography>
-                    <Button
-                      sx={boardTitleButton}
-                      startIcon={<FileCopyOutlinedIcon />}
-                      onClick={() => duplicateBoardsAndToast(board._id)}
-                    >
-                      {t("magneto.cards.collection.board.duplicate")}
-                    </Button>
-                  </Box>
-                  <Grid container spacing={2} width="fit-content">
-                    {board.cards.map((card) => (
-                      <Grid item key={card.id}>
-                        <BoardCardWrapper
-                          isBoardSelected={isBoardSelected(card.id)}
-                          onClick={(event) => {
-                            updateSelectedMagnets(event, card.id);
-                          }}
-                        >
-                          <BoardCard
-                            card={card}
-                            zoomLevel={zoomLevel}
-                            readOnly={true}
-                          />
-                        </BoardCardWrapper>
-                      </Grid>
-                    ))}
-                  </Grid>
-                </Box>
-              </ListItem>
-            ),
-        )}
-      </List>
-    ) : (
-      <EmptyState title={t("magneto.cards.empty.text")} />
-    );
-  } else {
-    return cardsData.length ? (
-      <Box sx={{ display: "flex", justifyContent: "center" }}>
-        <Grid container spacing={2} p={".5rem"}>
-          {cardsData.map((card: Card) => (
-            <Grid item key={card.id}>
-              <BoardCardWrapper
-                isBoardSelected={isBoardSelected(card.id)}
-                onClick={(event) => {
-                  updateSelectedMagnets(event, card.id);
-                }}
-              >
-                <BoardCard card={card} zoomLevel={zoomLevel} readOnly={true} />
-              </BoardCardWrapper>
-            </Grid>
-          ))}
-        </Grid>
-      </Box>
-    ) : (
-      <EmptyState title={t("magneto.cards.empty.text")} />
-    );
-  }
+  return (
+    <>
+      {boards?.length > 0 && (
+        <animated.ul className="grid ps-0 list-unstyled mb-24">
+          {boards
+            .filter((board: Board) => {
+              if (search === "") {
+                return board;
+              }
+            })
+            .map((board: Board) => {
+              const { id } = board;
+              return (
+                <animated.li
+                  className="z-1 boardSizing"
+                  key={id}
+                  style={{
+                    position: "relative",
+                    ...springs,
+                  }}
+                >
+                  <BoardCardWrapper
+                    isBoardSelected={isBoardSelected(board.id)}
+                    onClick={(event) => {
+                      updateSelectedMagnets(event, board.id);
+                    }}
+                  >
+                    <BoardItemLight board={board} />
+                  </BoardCardWrapper>
+                </animated.li>
+              );
+            })}
+        </animated.ul>
+      )}
+    </>
+  );
 };
diff --git a/frontend/src/components/board-create-magnet-board-modal/utils.ts b/frontend/src/components/board-create-magnet-board-modal/utils.ts
index e9eeb473..457b2497 100644
--- a/frontend/src/components/board-create-magnet-board-modal/utils.ts
+++ b/frontend/src/components/board-create-magnet-board-modal/utils.ts
@@ -4,7 +4,5 @@ import { CURRENTTAB_STATE } from "../tab-list/types";
 export const initialInputvalue: InputValueState = {
   search: "",
   currentTab: CURRENTTAB_STATE.MINE,
-  isByBoards: false,
-  isByFavorite: false,
-  cardIds: [],
+  selectedBoardId: null,
 };
diff --git a/frontend/src/components/board-item-light/BoardItemLight.scss b/frontend/src/components/board-item-light/BoardItemLight.scss
new file mode 100644
index 00000000..1330e7a7
--- /dev/null
+++ b/frontend/src/components/board-item-light/BoardItemLight.scss
@@ -0,0 +1,84 @@
+.board-item {
+  // Nested selectors for scoping
+  .card {
+    padding: unset !important;
+    margin: unset !important;
+    display: flex;
+    flex-wrap: wrap !important;
+    flex-direction: column;
+
+    .board-title {
+      width: 100%;
+      div {
+        width: 100%;
+      }
+
+      .tooltip {
+        max-width: 100%;
+        width: fit-content;
+        pointer-events: none;
+        .tooltip-arrow {
+          left: 1rem !important;
+        }
+      }
+    }
+
+    .board-number-magnets {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      svg {
+        color: #ffb600;
+        font-size: 16px;
+      }
+
+      svg + p {
+        font-size: 13px;
+      }
+    }
+
+    .board-about {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      .board-about-left-content,
+      .board-about-right-content {
+        margin: 0 !important;
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+
+        .med-resource-card-text {
+          margin-top: 1px;
+          font-size: 13px;
+        }
+      }
+    }
+
+    strong {
+      width: 100%;
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap !important;
+    }
+
+    .card-body {
+      width: 100%;
+    }
+
+    .card-image {
+      width: 100%;
+      position: relative;
+      aspect-ratio: 16 / 10;
+      background-color: transparent !important;
+
+      img {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+    }
+  }
+}
diff --git a/frontend/src/components/board-item-light/BoardItemLight.tsx b/frontend/src/components/board-item-light/BoardItemLight.tsx
new file mode 100644
index 00000000..a6c12bbf
--- /dev/null
+++ b/frontend/src/components/board-item-light/BoardItemLight.tsx
@@ -0,0 +1,133 @@
+import React from "react";
+
+import { Card, useOdeClient, Tooltip } from "@edifice-ui/react";
+import {
+  mdiAccountCircle,
+  mdiCalendarBlank,
+  mdiCrown,
+  mdiEarth,
+  mdiMagnet,
+  mdiShareVariant,
+} from "@mdi/js";
+import { Icon } from "@mdi/react";
+import { Box } from "@mui/material";
+import dayjs from "dayjs";
+import { useTranslation } from "react-i18next";
+import "./BoardItemLight.scss";
+
+import { LAYOUT_TYPE } from "~/core/enums/layout-type.enum";
+
+interface BoardItemProps {
+  board: {
+    id: string;
+    title: string;
+    imageUrl: string;
+    nbCards: number;
+    nbCardsSections: number;
+    layoutType: LAYOUT_TYPE;
+    shared: any;
+    owner: any;
+    modificationDate: string;
+    isPublished: boolean;
+  };
+}
+
+export const BoardItemLight: React.FunctionComponent<BoardItemProps> = ({
+  board,
+}) => {
+  const { user, currentApp } = useOdeClient();
+  const { t } = useTranslation("magneto");
+
+  const userId = user ? user?.userId : "";
+
+  const isSameAsUser = (id: string) => {
+    return id === userId;
+  };
+
+  return (
+    <Box className="board-item board">
+      <Card app={currentApp!}>
+        <Card.Body flexDirection={"column"}>
+          <Card.Image
+            className="image-c"
+            imageSrc={board.imageUrl}
+            variant="landscape"
+          />
+
+          <div className="board-title">
+            <Tooltip message={board.title} placement="bottom-start">
+              <Card.Title className="title">{board.title}</Card.Title>
+            </Tooltip>
+          </div>
+
+          <div className="board-number-magnets">
+            <Icon
+              path={mdiMagnet}
+              size={1}
+              className="med-resource-card-text"
+            />
+            <Card.Text className="med-resource-card-text board-text">
+              {board.layoutType == LAYOUT_TYPE.FREE
+                ? board.nbCards
+                : board.nbCardsSections}{" "}
+              {t("magneto.magnets")}
+            </Card.Text>
+          </div>
+
+          <div className="board-about">
+            <div className="board-about-left-content">
+              <Tooltip
+                message={t("magneto.board.date.update")}
+                placement="bottom"
+              >
+                <Icon path={mdiCalendarBlank} size={1} />
+              </Tooltip>
+              <Card.Text className="med-resource-card-text">
+                {dayjs(board.modificationDate, {
+                  locale: "fr",
+                  format: "YYYY-MM-DD HH:mm:ss",
+                }).format("DD MMMM YYYY")}
+              </Card.Text>
+            </div>
+            <div className="board-about-right-content">
+              {!isSameAsUser(board.owner.userId) && (
+                <Tooltip
+                  message={`${t("magneto.board.owner")} : ${
+                    board.owner.displayName
+                  }`}
+                  placement="bottom"
+                >
+                  <Icon path={mdiAccountCircle} size={1} />
+                </Tooltip>
+              )}
+              {isSameAsUser(board.owner.userId) && (
+                <Tooltip
+                  message={t("magneto.board.tooltip.my.board")}
+                  placement="bottom"
+                >
+                  <Icon path={mdiCrown} size={1} />
+                </Tooltip>
+              )}
+              {board.shared?.length > 0 && (
+                <Tooltip
+                  message={t("magneto.board.tooltip.shared.board")}
+                  placement="bottom"
+                >
+                  <Icon path={mdiShareVariant} size={1} />
+                </Tooltip>
+              )}
+              {board.isPublished && (
+                <Tooltip
+                  message={t("magneto.board.tooltip.public.board")}
+                  placement="bottom"
+                >
+                  <Icon path={mdiEarth} size={1} />
+                </Tooltip>
+              )}
+            </div>
+          </div>
+        </Card.Body>
+      </Card>
+    </Box>
+  );
+};
diff --git a/frontend/src/components/board-view/BoardView.tsx b/frontend/src/components/board-view/BoardView.tsx
index c2f8772e..27fb42fb 100644
--- a/frontend/src/components/board-view/BoardView.tsx
+++ b/frontend/src/components/board-view/BoardView.tsx
@@ -10,6 +10,7 @@ import { useTranslation } from "react-i18next";
 
 import { BoardBodyWrapper, BoardViewWrapper, mediaLibraryStyle } from "./style";
 import { useHeaderHeight } from "./useHeaderHeight";
+import { BoardCreateMagnetBoardModal } from "../board-create-magnet-board-modal/BoardCreateMagnetBoardModal";
 import { BoardCreateMagnetMagnetModal } from "../board-create-magnet-magnet-modal/BoardCreateMagnetMagnetModal";
 import { CardsFreeLayout } from "../cards-free-layout/CardsFreeLayout";
 import { CardsHorizontalLayout } from "../cards-horizontal-layout/CardsHorizontalLayout";
@@ -27,7 +28,6 @@ import { MENU_NOT_MEDIA_TYPE } from "~/core/enums/menu-not-media-type.enum";
 import { useSideMenuData } from "~/hooks/useSideMenuData";
 import { useBoard } from "~/providers/BoardProvider";
 import { useMediaLibrary } from "~/providers/MediaLibraryProvider";
-import { BoardCreateMagnetBoardModal } from "../board-create-magnet-board-modal/BoardCreateMagnetBoardModal";
 
 export const BoardView: FC = () => {
   const { t } = useTranslation("magneto");

From a5b41aa6cd5ff4551bb50a2e115380931067416c Mon Sep 17 00:00:00 2001
From: Florent Mariotti <florent.mariotti@cgi.com>
Date: Thu, 19 Dec 2024 14:26:26 +0100
Subject: [PATCH 07/12] feat(card) : #MAG-114 add board cards

---
 .../BoardCreateMagnetBoardModal.tsx           | 10 ++++++----
 .../src/components/board-view/BoardView.tsx   |  4 ++--
 .../components/create-magnet/CreateMagnet.tsx | 20 +++++++++++++------
 frontend/src/core/enums/board-modal-type.ts   |  1 +
 frontend/src/hooks/useSideMenuData.ts         |  1 +
 frontend/src/providers/BoardProvider/types.ts |  1 +
 frontend/src/providers/BoardProvider/utils.ts |  1 +
 .../providers/MediaLibraryProvider/index.tsx  | 10 ++++++++++
 .../providers/MediaLibraryProvider/types.ts   |  2 ++
 9 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/board-create-magnet-board-modal/BoardCreateMagnetBoardModal.tsx b/frontend/src/components/board-create-magnet-board-modal/BoardCreateMagnetBoardModal.tsx
index a0298804..0c05c93c 100644
--- a/frontend/src/components/board-create-magnet-board-modal/BoardCreateMagnetBoardModal.tsx
+++ b/frontend/src/components/board-create-magnet-board-modal/BoardCreateMagnetBoardModal.tsx
@@ -1,6 +1,6 @@
 import { FC, useState } from "react";
 
-import { Button, SearchBar, useToast } from "@edifice-ui/react";
+import { Button, SearchBar } from "@edifice-ui/react";
 import CloseIcon from "@mui/icons-material/Close";
 import { Box, IconButton, Modal, Typography } from "@mui/material";
 import { useTranslation } from "react-i18next";
@@ -20,17 +20,16 @@ import { initialInputvalue } from "./utils";
 import { TabList } from "../tab-list/TabList";
 import { CURRENTTAB_STATE } from "../tab-list/types";
 import { BOARD_TABS_CONFIG } from "../tab-list/utils";
-import { useBoard } from "~/providers/BoardProvider";
+import { useMediaLibrary } from "~/providers/MediaLibraryProvider";
 
 export const BoardCreateMagnetBoardModal: FC<
   BoardCreateMagnetBoardModalProps
 > = ({ open, onClose }) => {
-  const { board } = useBoard();
   const [inputValue, setInputValue] =
     useState<InputValueState>(initialInputvalue);
   const { currentTab } = inputValue;
   const { t } = useTranslation("magneto");
-  const toast = useToast();
+  const { setIsCreateMagnetOpen, setSelectedBoardData } = useMediaLibrary();
 
   const handleTabChange = (newValue: CURRENTTAB_STATE) => {
     setInputValue((prevState) => ({
@@ -55,6 +54,9 @@ export const BoardCreateMagnetBoardModal: FC<
 
   const handleSubmit = async () => {
     if (inputValue.selectedBoardId) {
+      setSelectedBoardData(inputValue.selectedBoardId);
+      setIsCreateMagnetOpen(true);
+      onCloseModal();
     }
   };
 
diff --git a/frontend/src/components/board-view/BoardView.tsx b/frontend/src/components/board-view/BoardView.tsx
index 27fb42fb..6c9a9035 100644
--- a/frontend/src/components/board-view/BoardView.tsx
+++ b/frontend/src/components/board-view/BoardView.tsx
@@ -168,8 +168,8 @@ export const BoardView: FC = () => {
           onClose={onClose}
         />
         <BoardCreateMagnetBoardModal
-          open={magnetType === MENU_NOT_MEDIA_TYPE.BOARD}
-          onClose={onClose}
+          open={displayModals.BOARD_SELECTION}
+          onClose={() => toggleBoardModals(BOARD_MODAL_TYPE.BOARD_SELECTION)}
         />
         <CreateBoard
           isOpen={displayModals.PARAMETERS}
diff --git a/frontend/src/components/create-magnet/CreateMagnet.tsx b/frontend/src/components/create-magnet/CreateMagnet.tsx
index 6784d437..98a14768 100644
--- a/frontend/src/components/create-magnet/CreateMagnet.tsx
+++ b/frontend/src/components/create-magnet/CreateMagnet.tsx
@@ -93,6 +93,8 @@ export const CreateMagnet: FC = () => {
     magnetType,
     setMagnetType,
     handleClickMedia,
+    selectedBoardData,
+    setSelectedBoardData,
   } = useMediaLibrary();
   const { activeCard, closeActiveCardAction } = useBoard();
   const isEditMagnet = !!activeCard;
@@ -120,6 +122,7 @@ export const CreateMagnet: FC = () => {
     setLinkUrl("");
     setDescription("");
     if (section !== null) setSection(board.sections[0]);
+    setSelectedBoardData(null);
     onClose();
   };
 
@@ -135,7 +138,11 @@ export const CreateMagnet: FC = () => {
       locked: isEditMagnet ? activeCard.locked : false,
       resourceId: media?.id ?? "",
       resourceType: getMagnetResourceType(),
-      resourceUrl: linkUrl ? linkUrl : media?.url ?? null,
+      resourceUrl: selectedBoardData
+        ? selectedBoardData
+        : linkUrl
+        ? linkUrl
+        : media?.url ?? null,
       title: title,
       id: isEditMagnet ? activeCard.id : undefined,
       ...(!isEditMagnet && section?._id ? { sectionId: section._id } : {}),
@@ -181,6 +188,9 @@ export const CreateMagnet: FC = () => {
       if (activeCard.resourceType === MENU_NOT_MEDIA_TYPE.TEXT)
         setMagnetType(MENU_NOT_MEDIA_TYPE.TEXT);
 
+      if (activeCard.resourceType === MENU_NOT_MEDIA_TYPE.BOARD)
+        setMagnetType(MENU_NOT_MEDIA_TYPE.BOARD);
+
       setMedia({
         name: activeCard.metadata?.name,
         url: activeCard.resourceUrl,
@@ -244,11 +254,6 @@ export const CreateMagnet: FC = () => {
           </IconButton>
         </Box>
         <Box sx={contentContainerStyle}>
-          <ScaledIframe
-            src={
-              "http://localhost:4200/#/board/de9b72ea-b1db-4ffa-9cb7-d4e032ec5fbb/view"
-            }
-          />
           {magnetTypeHasFilePickerWorkspace &&
             (activeCard ? (
               <CardContentFile card={activeCard} />
@@ -261,6 +266,9 @@ export const CreateMagnet: FC = () => {
           {magnetTypeHasImage && (
             <ImageContainer media={media} handleClickMedia={modifyFile} />
           )}
+          {selectedBoardData !== null && (
+            <ScaledIframe src={`/magneto#/board/${selectedBoardData}/view`} />
+          )}
           {magnetTypeHasAudio && (
             <Box sx={audioWrapperStyle}>
               <audio controls preload="metadata" src={media.url}>
diff --git a/frontend/src/core/enums/board-modal-type.ts b/frontend/src/core/enums/board-modal-type.ts
index 346453ec..d4fe64b9 100644
--- a/frontend/src/core/enums/board-modal-type.ts
+++ b/frontend/src/core/enums/board-modal-type.ts
@@ -5,4 +5,5 @@ export enum BOARD_MODAL_TYPE {
   DELETE = "DELETE_MODAL",
   DUPLICATE_OR_MOVE = "DUPLICATE_OR_MOVE",
   CREATE_EDIT = "CREATE_EDIT",
+  BOARD_SELECTION = "BOARD_SELECTION",
 }
diff --git a/frontend/src/hooks/useSideMenuData.ts b/frontend/src/hooks/useSideMenuData.ts
index 90195e76..05ba7340 100644
--- a/frontend/src/hooks/useSideMenuData.ts
+++ b/frontend/src/hooks/useSideMenuData.ts
@@ -80,6 +80,7 @@ export const useSideMenuData = (): (
       name: t("magneto.board"),
       action: () => {
         handleClickMenu(MENU_NOT_MEDIA_TYPE.BOARD);
+        toggleBoardModals(BOARD_MODAL_TYPE.BOARD_SELECTION);
       },
     },
   );
diff --git a/frontend/src/providers/BoardProvider/types.ts b/frontend/src/providers/BoardProvider/types.ts
index 81ecfc31..e5793e7f 100644
--- a/frontend/src/providers/BoardProvider/types.ts
+++ b/frontend/src/providers/BoardProvider/types.ts
@@ -59,4 +59,5 @@ export interface DisplayModalsState {
   [BOARD_MODAL_TYPE.DELETE]: boolean;
   [BOARD_MODAL_TYPE.DUPLICATE_OR_MOVE]: boolean;
   [BOARD_MODAL_TYPE.CREATE_EDIT]: boolean;
+  [BOARD_MODAL_TYPE.BOARD_SELECTION]: boolean;
 }
diff --git a/frontend/src/providers/BoardProvider/utils.ts b/frontend/src/providers/BoardProvider/utils.ts
index 1f6b08be..da2b5af3 100644
--- a/frontend/src/providers/BoardProvider/utils.ts
+++ b/frontend/src/providers/BoardProvider/utils.ts
@@ -15,6 +15,7 @@ export const initialDisplayModals: DisplayModalsState = {
   [BOARD_MODAL_TYPE.DELETE]: false,
   [BOARD_MODAL_TYPE.DUPLICATE_OR_MOVE]: false,
   [BOARD_MODAL_TYPE.CREATE_EDIT]: false,
+  [BOARD_MODAL_TYPE.BOARD_SELECTION]: false,
 };
 
 export const prepareBoardsState = (
diff --git a/frontend/src/providers/MediaLibraryProvider/index.tsx b/frontend/src/providers/MediaLibraryProvider/index.tsx
index c3cf5e17..38c1005b 100644
--- a/frontend/src/providers/MediaLibraryProvider/index.tsx
+++ b/frontend/src/providers/MediaLibraryProvider/index.tsx
@@ -50,6 +50,9 @@ export const MediaLibraryProvider: FC<MediaLibraryProviderProps> = ({
   const [magnetType, setMagnetType] = useState<MENU_NOT_MEDIA_TYPE | null>(
     null,
   );
+  const [selectedBoardData, setSelectedBoardData] = useState<string | null>(
+    null,
+  );
 
   const handleClickMedia = (type: MediaLibraryType) => {
     setMagnetType(null);
@@ -130,6 +133,10 @@ export const MediaLibraryProvider: FC<MediaLibraryProviderProps> = ({
     updateLibraryMedia();
   }, [libraryMedia, workspaceElement]);
 
+  useEffect(() => {
+    console.log(selectedBoardData);
+  }, [selectedBoardData]);
+
   const value = useMemo<MediaLibraryContextType>(
     () => ({
       workspaceElement,
@@ -151,6 +158,8 @@ export const MediaLibraryProvider: FC<MediaLibraryProviderProps> = ({
       setMagnetType,
       handleClickMenu,
       onClose,
+      selectedBoardData,
+      setSelectedBoardData,
     }),
     [
       mediaLibraryRef,
@@ -159,6 +168,7 @@ export const MediaLibraryProvider: FC<MediaLibraryProviderProps> = ({
       isCreateMagnetOpen,
       magnetType,
       workspaceElement,
+      selectedBoardData,
     ],
   );
 
diff --git a/frontend/src/providers/MediaLibraryProvider/types.ts b/frontend/src/providers/MediaLibraryProvider/types.ts
index 51d1d10c..1732789d 100644
--- a/frontend/src/providers/MediaLibraryProvider/types.ts
+++ b/frontend/src/providers/MediaLibraryProvider/types.ts
@@ -38,4 +38,6 @@ export type MediaLibraryContextType = {
   setMagnetType: Dispatch<SetStateAction<MENU_NOT_MEDIA_TYPE | null>>;
   handleClickMenu: (type: MENU_NOT_MEDIA_TYPE) => void;
   onClose: () => void;
+  selectedBoardData: string | null;
+  setSelectedBoardData: (id: string | null) => void;
 };

From 694d76149b57bb17189868245aac41b3268eb8f8 Mon Sep 17 00:00:00 2001
From: Florent Mariotti <florent.mariotti@cgi.com>
Date: Thu, 19 Dec 2024 14:32:55 +0100
Subject: [PATCH 08/12] linter prettier

---
 .../useRenderContent.tsx                           |  2 --
 frontend/src/components/static-page/StaticPage.tsx | 14 +++++++-------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/board-create-magnet-board-modal/useRenderContent.tsx b/frontend/src/components/board-create-magnet-board-modal/useRenderContent.tsx
index 09da3913..a599fb66 100644
--- a/frontend/src/components/board-create-magnet-board-modal/useRenderContent.tsx
+++ b/frontend/src/components/board-create-magnet-board-modal/useRenderContent.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useMemo, MouseEvent as ReactMouseEvent } from "react";
 
 import { animated, useSpring } from "@react-spring/web";
-import { useTranslation } from "react-i18next";
 
 import { BoardCardWrapper } from "./style";
 import { InputValueState } from "./types";
@@ -16,7 +15,6 @@ export const useRenderContent = (
   inputValue: InputValueState,
   setInputValue: React.Dispatch<React.SetStateAction<InputValueState>>,
 ) => {
-  const { t } = useTranslation("magneto");
   const { search, currentTab, selectedBoardId } = inputValue;
   const springs = useSpring({
     from: { opacity: 0 },
diff --git a/frontend/src/components/static-page/StaticPage.tsx b/frontend/src/components/static-page/StaticPage.tsx
index 369cd335..53312e9d 100644
--- a/frontend/src/components/static-page/StaticPage.tsx
+++ b/frontend/src/components/static-page/StaticPage.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 interface UrlBackgroundViewerProps {
   url: string;
@@ -9,18 +9,18 @@ interface UrlBackgroundViewerProps {
 export const UrlBackgroundViewer: React.FC<UrlBackgroundViewerProps> = ({
   url,
   width = 1920,
-  height = 1080
+  height = 1080,
 }) => {
   return (
-    <div 
+    <div
       style={{
-        width: '100%',
+        width: "100%",
         maxWidth: `${width}px`,
         height: `${height}px`,
         background: `url(${url}) no-repeat center center`,
-        backgroundSize: 'contain',
-        pointerEvents: 'none',
+        backgroundSize: "contain",
+        pointerEvents: "none",
       }}
     />
   );
-};
\ No newline at end of file
+};

From 91218cb41168d2ca2061abc35c3769603c90c84a Mon Sep 17 00:00:00 2001
From: Florent Mariotti <florent.mariotti@cgi.com>
Date: Thu, 19 Dec 2024 14:40:55 +0100
Subject: [PATCH 09/12] label and console fixes

---
 backend/src/main/resources/i18n/fr.json                       | 1 +
 .../BoardCreateMagnetBoardModal.tsx                           | 2 +-
 frontend/src/providers/MediaLibraryProvider/index.tsx         | 4 ----
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/backend/src/main/resources/i18n/fr.json b/backend/src/main/resources/i18n/fr.json
index 92d665b6..b99542b0 100644
--- a/backend/src/main/resources/i18n/fr.json
+++ b/backend/src/main/resources/i18n/fr.json
@@ -122,6 +122,7 @@
   "magneto.card.options.delete": "Supprimer",
   "magneto.card.options.move": "Déplacer",
   "magneto.comments": "Commentaires",
+  "magneto.add": "Ajouter",
   "magneto.add.comment": "Ajouter un commentaire",
   "magneto.add.comment.error": "Une erreur est survenue lors de l'ajout du commentaire.",
   "magneto.update.comment.error": "Une erreur est survenue lors de la mise à jour du commentaire.",
diff --git a/frontend/src/components/board-create-magnet-board-modal/BoardCreateMagnetBoardModal.tsx b/frontend/src/components/board-create-magnet-board-modal/BoardCreateMagnetBoardModal.tsx
index 0c05c93c..ab49efb8 100644
--- a/frontend/src/components/board-create-magnet-board-modal/BoardCreateMagnetBoardModal.tsx
+++ b/frontend/src/components/board-create-magnet-board-modal/BoardCreateMagnetBoardModal.tsx
@@ -128,7 +128,7 @@ export const BoardCreateMagnetBoardModal: FC<
               onClick={() => handleSubmit()}
               disabled={!inputValue.selectedBoardId}
             >
-              {t("magneto.card.options.duplicate")}
+              {t("magneto.add")}
             </Button>
           </Box>
         </Box>
diff --git a/frontend/src/providers/MediaLibraryProvider/index.tsx b/frontend/src/providers/MediaLibraryProvider/index.tsx
index 38c1005b..9b2b8bde 100644
--- a/frontend/src/providers/MediaLibraryProvider/index.tsx
+++ b/frontend/src/providers/MediaLibraryProvider/index.tsx
@@ -133,10 +133,6 @@ export const MediaLibraryProvider: FC<MediaLibraryProviderProps> = ({
     updateLibraryMedia();
   }, [libraryMedia, workspaceElement]);
 
-  useEffect(() => {
-    console.log(selectedBoardData);
-  }, [selectedBoardData]);
-
   const value = useMemo<MediaLibraryContextType>(
     () => ({
       workspaceElement,

From e00d54766136b784729440e6b6a63444870238f4 Mon Sep 17 00:00:00 2001
From: Florent Mariotti <florent.mariotti@cgi.com>
Date: Fri, 20 Dec 2024 16:34:32 +0100
Subject: [PATCH 10/12] Pr returns

---
 .../BoardCreateMagnetBoardModal.tsx           |  6 ++---
 frontend/src/components/board-list/types.ts   |  4 +--
 .../card-content-board/CardContentBoard.tsx   |  6 ++---
 .../components/card-content-board/types.ts    | 15 +++++++++++
 .../card-content-board/useScaledIframe.ts     | 15 +----------
 .../components/create-magnet/CreateMagnet.tsx |  2 +-
 .../src/components/static-page/StaticPage.tsx | 26 -------------------
 7 files changed, 24 insertions(+), 50 deletions(-)
 delete mode 100644 frontend/src/components/static-page/StaticPage.tsx

diff --git a/frontend/src/components/board-create-magnet-board-modal/BoardCreateMagnetBoardModal.tsx b/frontend/src/components/board-create-magnet-board-modal/BoardCreateMagnetBoardModal.tsx
index ab49efb8..97f91849 100644
--- a/frontend/src/components/board-create-magnet-board-modal/BoardCreateMagnetBoardModal.tsx
+++ b/frontend/src/components/board-create-magnet-board-modal/BoardCreateMagnetBoardModal.tsx
@@ -47,7 +47,7 @@ export const BoardCreateMagnetBoardModal: FC<
     }));
   };
 
-  const onCloseModal = () => {
+  const handleClose = () => {
     setInputValue(initialInputvalue);
     onClose();
   };
@@ -56,7 +56,7 @@ export const BoardCreateMagnetBoardModal: FC<
     if (inputValue.selectedBoardId) {
       setSelectedBoardData(inputValue.selectedBoardId);
       setIsCreateMagnetOpen(true);
-      onCloseModal();
+      handleClose();
     }
   };
 
@@ -120,7 +120,7 @@ export const BoardCreateMagnetBoardModal: FC<
               color="tertiary"
               type="button"
               variant="ghost"
-              onClick={() => onCloseModal()}
+              onClick={() => handleClose()}
             >
               {t("magneto.cancel")}
             </Button>
diff --git a/frontend/src/components/board-list/types.ts b/frontend/src/components/board-list/types.ts
index 7bd7e4e1..852b9ba6 100644
--- a/frontend/src/components/board-list/types.ts
+++ b/frontend/src/components/board-list/types.ts
@@ -3,6 +3,6 @@ import { Board } from "~/models/board.model";
 export interface BoardListProps {
   onDragAndDrop: (board: Board) => void;
   searchText: string;
-  boards: Board[]; // Nouvelle prop
-  boardsLoading: boolean; // Nouvelle prop
+  boards: Board[];
+  boardsLoading: boolean;
 }
diff --git a/frontend/src/components/card-content-board/CardContentBoard.tsx b/frontend/src/components/card-content-board/CardContentBoard.tsx
index 38af4274..27b77df7 100644
--- a/frontend/src/components/card-content-board/CardContentBoard.tsx
+++ b/frontend/src/components/card-content-board/CardContentBoard.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { FC } from "react";
 
 import { Box } from "@mui/material";
 import { useTranslation } from "react-i18next";
@@ -7,7 +7,7 @@ import { loadingContainerStyle, loadingTextStyle } from "./style";
 import { ScaledIframeProps } from "./types";
 import { useScaledIframe } from "./useScaledIframe";
 
-const ScaledIframe: React.FC<ScaledIframeProps> = ({
+export const ScaledIframe: FC<ScaledIframeProps> = ({
   src,
   width = 1920,
   height = 1080,
@@ -42,5 +42,3 @@ const ScaledIframe: React.FC<ScaledIframeProps> = ({
     </Box>
   );
 };
-
-export default ScaledIframe;
diff --git a/frontend/src/components/card-content-board/types.ts b/frontend/src/components/card-content-board/types.ts
index 842a5c2a..cb4f87ab 100644
--- a/frontend/src/components/card-content-board/types.ts
+++ b/frontend/src/components/card-content-board/types.ts
@@ -3,3 +3,18 @@ export interface ScaledIframeProps {
   width?: number;
   height?: number;
 }
+
+export interface UseScaledIframeProps {
+  width?: number;
+  height?: number;
+}
+
+export interface UseScaledIframeReturn {
+  iframeRef: React.RefObject<HTMLIFrameElement>;
+  containerRef: React.RefObject<HTMLDivElement>;
+  isLoading: boolean;
+  containerHeight: number;
+  handleIframeLoad: () => void;
+  iframeStyle: React.CSSProperties;
+  containerStyle: React.CSSProperties;
+}
diff --git a/frontend/src/components/card-content-board/useScaledIframe.ts b/frontend/src/components/card-content-board/useScaledIframe.ts
index feee19eb..6c3746fe 100644
--- a/frontend/src/components/card-content-board/useScaledIframe.ts
+++ b/frontend/src/components/card-content-board/useScaledIframe.ts
@@ -1,19 +1,6 @@
 import { useEffect, useRef, useState, useMemo, useCallback } from "react";
 
-interface UseScaledIframeProps {
-  width?: number;
-  height?: number;
-}
-
-interface UseScaledIframeReturn {
-  iframeRef: React.RefObject<HTMLIFrameElement>;
-  containerRef: React.RefObject<HTMLDivElement>;
-  isLoading: boolean;
-  containerHeight: number;
-  handleIframeLoad: () => void;
-  iframeStyle: React.CSSProperties;
-  containerStyle: React.CSSProperties;
-}
+import { UseScaledIframeProps, UseScaledIframeReturn } from "./types";
 
 export const useScaledIframe = ({
   width = 1920,
diff --git a/frontend/src/components/create-magnet/CreateMagnet.tsx b/frontend/src/components/create-magnet/CreateMagnet.tsx
index 98a14768..0be6c49a 100644
--- a/frontend/src/components/create-magnet/CreateMagnet.tsx
+++ b/frontend/src/components/create-magnet/CreateMagnet.tsx
@@ -49,7 +49,7 @@ import {
   convertResourceTypeToMediaType,
 } from "./utils";
 import { MediaProps } from "../board-view/types";
-import ScaledIframe from "../card-content-board/CardContentBoard";
+import { ScaledIframe } from "../card-content-board/CardContentBoard";
 import { CardContentFile } from "../card-content-file/CardContentFile";
 import { FilePickerWorkspace } from "../file-picker-workspace/FilePickerWorkspace";
 import { iconButtonStyle } from "../file-picker-workspace/style";
diff --git a/frontend/src/components/static-page/StaticPage.tsx b/frontend/src/components/static-page/StaticPage.tsx
deleted file mode 100644
index 53312e9d..00000000
--- a/frontend/src/components/static-page/StaticPage.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-
-interface UrlBackgroundViewerProps {
-  url: string;
-  width?: number;
-  height?: number;
-}
-
-export const UrlBackgroundViewer: React.FC<UrlBackgroundViewerProps> = ({
-  url,
-  width = 1920,
-  height = 1080,
-}) => {
-  return (
-    <div
-      style={{
-        width: "100%",
-        maxWidth: `${width}px`,
-        height: `${height}px`,
-        background: `url(${url}) no-repeat center center`,
-        backgroundSize: "contain",
-        pointerEvents: "none",
-      }}
-    />
-  );
-};

From 1d64a196e5c14214f14fc3c0d6cdfeb4c286ec6f Mon Sep 17 00:00:00 2001
From: Florent Mariotti <florent.mariotti@cgi.com>
Date: Fri, 20 Dec 2024 16:57:20 +0100
Subject: [PATCH 11/12] fix css

---
 .../BoardList.scss                                | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/board-create-magnet-board-modal/BoardList.scss b/frontend/src/components/board-create-magnet-board-modal/BoardList.scss
index 4a75fd21..703532c1 100644
--- a/frontend/src/components/board-create-magnet-board-modal/BoardList.scss
+++ b/frontend/src/components/board-create-magnet-board-modal/BoardList.scss
@@ -1,11 +1,12 @@
 ul.grid {
-  padding-top: 15px;
+  padding-top: 1.5rem;
+  padding-right: 1.6rem;
   display: grid;
   grid-template-columns: repeat(
     4,
     minmax(0, 1fr)
   ); /* Force equal width columns */
-  gap: 16px;
+  gap: 1.6rem;
   width: 100% !important;
 }
 
@@ -29,11 +30,11 @@ li.boardSizing {
 
       svg {
         color: #ffb600;
-        font-size: 14px;
+        font-size: 1.4rem;
       }
 
       svg + p {
-        font-size: 12px;
+        font-size: 1.2rem;
         margin: 0;
       }
     }
@@ -51,7 +52,7 @@ li.boardSizing {
         align-items: center;
 
         .med-resource-card-text {
-          font-size: 12px;
+          font-size: 1.2rem;
         }
       }
     }
@@ -63,10 +64,10 @@ li.boardSizing {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: 14px;
+  font-size: 1.4rem;
 }
 
 .card-body {
   width: 100%;
-  padding: 12px;
+  padding: 1.2rem;
 }

From 246e70181bb37d7f6038376a14b2baa5af979cae Mon Sep 17 00:00:00 2001
From: Florent Mariotti <florent.mariotti@cgi.com>
Date: Wed, 8 Jan 2025 15:27:56 +0100
Subject: [PATCH 12/12] fix preview and css

---
 .../board-card/useResourceTypeDisplay.ts      |   6 +
 .../BoardList.scss                            | 112 +++++-----
 .../useRenderContent.tsx                      |   4 +-
 .../card-preview-board/CardPreviewBoard.tsx   | 198 ++++++++++++++++++
 .../src/components/preview-content/utils.tsx  |   5 +
 frontend/src/core/enums/resource-type.enum.ts |   1 +
 6 files changed, 267 insertions(+), 59 deletions(-)
 create mode 100644 frontend/src/components/card-preview-board/CardPreviewBoard.tsx

diff --git a/frontend/src/components/board-card/useResourceTypeDisplay.ts b/frontend/src/components/board-card/useResourceTypeDisplay.ts
index 41cbb25d..242399b1 100644
--- a/frontend/src/components/board-card/useResourceTypeDisplay.ts
+++ b/frontend/src/components/board-card/useResourceTypeDisplay.ts
@@ -8,6 +8,7 @@ import {
   mdiMusicNote,
   mdiPlayCircle,
 } from "@mdi/js";
+import TableChartIcon from "@mui/icons-material/TableChart";
 
 import { RESOURCE_TYPE } from "~/core/enums/resource-type.enum";
 
@@ -42,6 +43,11 @@ export const useResourceTypeDisplay = (resourceType: string) => {
         type = "Audio";
         break;
       }
+      case RESOURCE_TYPE.BOARD: {
+        icon = mdiFileMultiple; //TODO : change to MUI TableIcon
+        type = "Tableau";
+        break;
+      }
       case RESOURCE_TYPE.FILE: {
         icon = mdiFileMultiple;
         type = "Fichier";
diff --git a/frontend/src/components/board-create-magnet-board-modal/BoardList.scss b/frontend/src/components/board-create-magnet-board-modal/BoardList.scss
index 703532c1..fa571fb2 100644
--- a/frontend/src/components/board-create-magnet-board-modal/BoardList.scss
+++ b/frontend/src/components/board-create-magnet-board-modal/BoardList.scss
@@ -1,73 +1,71 @@
-ul.grid {
-  padding-top: 1.5rem;
-  padding-right: 1.6rem;
-  display: grid;
-  grid-template-columns: repeat(
-    4,
-    minmax(0, 1fr)
-  ); /* Force equal width columns */
-  gap: 1.6rem;
-  width: 100% !important;
-}
-
-li.boardSizing {
-  /* Remove any width constraints */
-  min-width: 0;
+.board-list-container {
+  ul.grid {
+    padding-top: 1.5rem;
+    padding-right: 1.6rem;
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 1.6rem;
+    width: 100% !important;
+  }
 
-  .card {
-    width: 100%;
-    padding: unset !important;
-    margin: unset !important;
-    display: flex;
-    flex-wrap: wrap !important;
-    flex-direction: column;
-    max-width: 100%; /* Ensure card doesn't overflow */
+  li.boardSizing {
+    min-width: 0;
 
-    .board-number-magnets {
+    .card {
+      width: 100%;
+      padding: unset !important;
+      margin: unset !important;
       display: flex;
-      justify-content: center;
-      align-items: center;
+      flex-wrap: wrap !important;
+      flex-direction: column;
+      max-width: 100%;
 
-      svg {
-        color: #ffb600;
-        font-size: 1.4rem;
-      }
+      .board-number-magnets {
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
-      svg + p {
-        font-size: 1.2rem;
-        margin: 0;
-      }
-    }
+        svg {
+          color: #ffb600;
+          font-size: 1.4rem;
+        }
 
-    .board-about {
-      display: flex;
-      justify-content: space-between;
-      width: 100%;
+        svg + p {
+          font-size: 1.2rem;
+          margin: 0;
+        }
+      }
 
-      .board-about-left-content,
-      .board-about-right-content {
-        margin: 0 !important;
+      .board-about {
         display: flex;
-        gap: 0.4rem;
-        align-items: center;
+        justify-content: space-between;
+        width: 100%;
 
-        .med-resource-card-text {
-          font-size: 1.2rem;
+        .board-about-left-content,
+        .board-about-right-content {
+          margin: 0 !important;
+          display: flex;
+          gap: 0.4rem;
+          align-items: center;
+
+          .med-resource-card-text {
+            font-size: 1.2rem;
+          }
         }
       }
     }
   }
-}
 
-.title {
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 1.4rem;
-}
+  .title {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 1.4rem;
+  }
 
-.card-body {
-  width: 100%;
-  padding: 1.2rem;
+  .card-body {
+    width: 100%;
+    padding: 1.2rem;
+  }
 }
diff --git a/frontend/src/components/board-create-magnet-board-modal/useRenderContent.tsx b/frontend/src/components/board-create-magnet-board-modal/useRenderContent.tsx
index a599fb66..2abe9f51 100644
--- a/frontend/src/components/board-create-magnet-board-modal/useRenderContent.tsx
+++ b/frontend/src/components/board-create-magnet-board-modal/useRenderContent.tsx
@@ -88,7 +88,7 @@ export const useRenderContent = (
   };
 
   return (
-    <>
+    <div className="board-list-container">
       {boards?.length > 0 && (
         <animated.ul className="grid ps-0 list-unstyled mb-24">
           {boards
@@ -121,6 +121,6 @@ export const useRenderContent = (
             })}
         </animated.ul>
       )}
-    </>
+    </div>
   );
 };
diff --git a/frontend/src/components/card-preview-board/CardPreviewBoard.tsx b/frontend/src/components/card-preview-board/CardPreviewBoard.tsx
new file mode 100644
index 00000000..435c5d0a
--- /dev/null
+++ b/frontend/src/components/card-preview-board/CardPreviewBoard.tsx
@@ -0,0 +1,198 @@
+import React, { useState, useEffect, useRef } from "react";
+
+import { Box } from "@mui/material";
+
+interface CardPreviewBoardProps {
+  src: string;
+  width?: number;
+  height?: number;
+  onClose?: () => void; // Nouvelle prop pour gérer la fermeture
+}
+
+export const containerStyle = {
+  width: "100%",
+  position: "relative",
+  overflow: "hidden",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+};
+
+export const clickableOverlayStyle = {
+  position: "absolute",
+  cursor: "pointer",
+  zIndex: 1,
+  transformOrigin: "top left",
+  top: 0,
+  left: 0,
+};
+
+export const iframeStyle = {
+  transformOrigin: "top left",
+  pointerEvents: "none",
+  position: "absolute",
+  top: 0,
+  left: 0,
+};
+
+export const loadingContainerStyle = {
+  position: "absolute",
+  inset: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  bgcolor: "grey.50",
+};
+
+export const loadingTextStyle = {
+  color: "text.secondary",
+};
+
+const CardPreviewBoard: React.FC<CardPreviewBoardProps> = ({
+  src,
+  width = 1920,
+  height = 1080,
+  onClose,
+}) => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [containerHeight, setContainerHeight] = useState(0);
+
+  const updateScale = () => {
+    const iframe = iframeRef.current;
+    const container = containerRef.current;
+    const overlay = overlayRef.current;
+    if (!iframe || !container || !overlay) return;
+
+    const containerWidth = container.clientWidth;
+    const viewportHeight = window.innerHeight;
+    const maxHeight = viewportHeight * 0.4;
+
+    const scaleByWidth = containerWidth / width;
+    const scaleByHeight = maxHeight / height;
+    const finalScale = Math.min(scaleByWidth, scaleByHeight);
+
+    const scaledHeight = height * finalScale;
+
+    // Calculate centered position
+    const horizontalOffset = (containerWidth - width * finalScale) / 2;
+
+    setContainerHeight(scaledHeight);
+    container.style.height = `${scaledHeight}px`;
+
+    const transform = `translate(${horizontalOffset}px, 0) scale(${finalScale})`;
+
+    // Position and scale the iframe
+    iframe.style.transform = transform;
+    iframe.style.width = `${width}px`;
+    iframe.style.height = `${height}px`;
+
+    // Apply same transformation to overlay
+    overlay.style.cssText = iframe.style.cssText;
+    overlay.style.visibility = "visible";
+    overlay.style.pointerEvents = "auto";
+    overlay.style.cursor = "pointer";
+  };
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      requestAnimationFrame(updateScale);
+    });
+
+    resizeObserver.observe(container);
+
+    const handleResize = () => requestAnimationFrame(updateScale);
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  const hideHeader = () => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+
+    try {
+      const iframeDoc =
+        iframe.contentDocument || iframe.contentWindow?.document;
+      if (!iframeDoc) return;
+
+      let styleElement = iframeDoc.getElementById("hide-header-style");
+      if (!styleElement) {
+        styleElement = iframeDoc.createElement("style");
+        styleElement.id = "hide-header-style";
+        iframeDoc.head.appendChild(styleElement);
+      }
+
+      styleElement.textContent = `
+        #root > .header:first-of-type {
+          display: none !important;
+        }
+      `;
+    } catch (error) {
+      console.error("Failed to hide header:", error);
+    }
+  };
+
+  const handleIframeLoad = () => {
+    setIsLoading(false);
+    updateScale();
+    hideHeader();
+  };
+
+  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.button === 0) {
+      // Ferme d'abord la modale si la fonction onClose est fournie
+      if (onClose) {
+        onClose();
+      }
+      // Puis redirige vers la nouvelle URL
+      window.location.href = src;
+    }
+  };
+
+  return (
+    <Box
+      ref={containerRef}
+      sx={{
+        ...containerStyle,
+        height: containerHeight ? `${containerHeight}px` : "auto",
+        maxHeight: "40vh",
+      }}
+    >
+      <Box
+        ref={overlayRef}
+        sx={clickableOverlayStyle}
+        onClick={handleOverlayClick}
+      />
+      <iframe
+        ref={iframeRef}
+        src={src}
+        scrolling="no"
+        style={
+          {
+            ...iframeStyle,
+            visibility: isLoading ? "hidden" : "visible",
+          } as React.CSSProperties
+        }
+        onLoad={handleIframeLoad}
+        title="Scaled content"
+        sandbox="allow-scripts allow-same-origin allow-forms"
+      />
+      {isLoading && (
+        <Box sx={loadingContainerStyle}>
+          <Box sx={loadingTextStyle}>Chargement...</Box>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default CardPreviewBoard;
diff --git a/frontend/src/components/preview-content/utils.tsx b/frontend/src/components/preview-content/utils.tsx
index ed96b12d..eff20864 100644
--- a/frontend/src/components/preview-content/utils.tsx
+++ b/frontend/src/components/preview-content/utils.tsx
@@ -5,6 +5,7 @@ import { CardContentAudio } from "../card-content-audio/CardContentAudio";
 import { CardContentFile } from "../card-content-file/CardContentFile";
 import { CardContentImageDisplay } from "../card-content-image-display/CardContentImageDisplay";
 import { CardContentSvgDisplay } from "../card-content-svg-display/CardContentSvgDisplay";
+import CardPreviewBoard from "../card-preview-board/CardPreviewBoard";
 import { ExternalVideoPlayer } from "../external-video-player/ExternalVideoPlayer";
 import { getVideoSource } from "../external-video-player/utils";
 import { PreviewContentImage } from "../preview-content-image/PreviewContentImage";
@@ -50,6 +51,10 @@ export const displayPreviewContentByType = (card: Card) => {
       );
     case RESOURCE_TYPE.FILE:
       return <CardContentFile card={card} />;
+    case RESOURCE_TYPE.BOARD:
+      return (
+        <CardPreviewBoard src={`/magneto#/board/${card.resourceUrl}/view`} />
+      );
     default:
       return null;
   }
diff --git a/frontend/src/core/enums/resource-type.enum.ts b/frontend/src/core/enums/resource-type.enum.ts
index 1b15aa5c..6f0328a5 100644
--- a/frontend/src/core/enums/resource-type.enum.ts
+++ b/frontend/src/core/enums/resource-type.enum.ts
@@ -8,6 +8,7 @@ export enum RESOURCE_TYPE {
   FILE = "file",
   LINK = "link",
   CARD = "card",
+  BOARD = "board",
 
   EMBEDDER = "embedder",
   HYPERLINK = "hyperlink",