Ajout de visuels sur la matrice pour sélection

package-lock.json

@@ -12,13 +12,14 @@
         "@supabase/supabase-js": "^2.105.4",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "d3-force": "^3.0.0",
         "lucide-react": "^1.16.0",
         "next-themes": "^0.4.6",
-        "pg": "^8.21.0",
         "radix-ui": "^1.4.3",
         "react": "^19.2.6",
         "react-dom": "^19.2.6",
         "react-router-dom": "^7.15.1",
+        "recharts": "^3.8.1",
         "shadcn": "^4.7.0",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.6.0",
@@ -35,6 +36,7 @@
         "eslint-plugin-react-hooks": "^7.1.1",
         "eslint-plugin-react-refresh": "^0.5.2",
         "globals": "^17.6.0",
+        "pg": "^8.21.0",
         "tailwindcss": "^4.3.0",
         "vite": "^8.0.12",
         "vitest": "^4.1.7"
@@ -2736,6 +2738,42 @@
       "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
       "license": "MIT"
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.12.0.tgz",
+      "integrity": "sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/immer": {
+      "version": "11.1.8",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.8.tgz",
+      "integrity": "sha512-/tbkHMW7y10Lx6i1crLjD4/OhNkRG+Fo7byZHtah0547nIeXYcpIXaUh0IAQY6gO5459qpGGYapcEOHtFXkIuA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/@rolldown/binding-android-arm64": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.1.tgz",
@@ -3022,7 +3060,12 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
       "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
-      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
       "license": "MIT"
     },
     "node_modules/@supabase/auth-js": {
@@ -3414,6 +3457,69 @@
         "assertion-error": "^2.0.1"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
     "node_modules/@types/deep-eql": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
@@ -3486,6 +3592,12 @@
       "integrity": "sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==",
       "license": "MIT"
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@types/validate-npm-package-name": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/validate-npm-package-name/-/validate-npm-package-name-4.0.2.tgz",
@@ -4276,6 +4388,159 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/data-uri-to-buffer": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
@@ -4302,6 +4567,12 @@
         }
       }
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
     "node_modules/dedent": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.7.2.tgz",
@@ -4545,6 +4816,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-toolkit": {
+      "version": "1.46.1",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.46.1.tgz",
+      "integrity": "sha512-5eNtXOs3tbfxXOj04tjjseeWkRWaoCjdEI+96DgwzZoe6c9juL49pXlzAFTI72aWC9Y8p7168g6XIKjh7k6pyQ==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -4787,6 +5068,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "license": "MIT"
+    },
     "node_modules/eventsource": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz",
@@ -5523,6 +5810,16 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
+      "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -5555,6 +5852,15 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "license": "ISC"
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/ip-address": {
       "version": "10.2.0",
       "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.2.0.tgz",
@@ -6830,6 +7136,7 @@
       "version": "8.21.0",
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.21.0.tgz",
       "integrity": "sha512-AUP1EYJuHraQGsVoCQVIcM7TEJVGtDzxWtGFZd8rds9d+CCXlU5Js1rYgfLNvxy9iJrpHjGrRjoi/3BT9fRyiA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "pg-connection-string": "^2.13.0",
@@ -6857,6 +7164,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/pg-cloudflare/-/pg-cloudflare-1.4.0.tgz",
       "integrity": "sha512-Vo7z/6rrQYxpNRylp4Tlob2elzbh+N/MOQbxFVWCxS7oEx6jF53GTJFxK2WWpKuBRkmiin4Mt+xofFDjx09R0A==",
+      "dev": true,
       "license": "MIT",
       "optional": true
     },
@@ -6864,12 +7172,14 @@
       "version": "2.13.0",
       "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.13.0.tgz",
       "integrity": "sha512-EMnU9E2fSULdsbErBbMaXJvFeD9B4+nPcM3f+4lsiCR0BHLPrLVjv3DbyM2hgQQviKJaTWIRRTjKjWlHg3p2ig==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/pg-int8": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz",
       "integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==",
+      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=4.0.0"
@@ -6879,6 +7189,7 @@
       "version": "3.14.0",
       "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.14.0.tgz",
       "integrity": "sha512-gKtPkFdQPU3DksooVLi9LsjZxrsBUZIpa+7aVx+LV5pNh0KzP4Zleud2po+ConrxbuXGBJ6Hfer6hdgpIBpBaw==",
+      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "pg": ">=8.0"
@@ -6888,12 +7199,14 @@
       "version": "1.14.0",
       "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.14.0.tgz",
       "integrity": "sha512-n5taZ1kO3s9ngDTVxsEznOqCyToTgz0FLuPq0B33COy5pPpuWJpY3/2oRBVETuOgzdqRXfWpM9HIhp2LBBT1BA==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/pg-types": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz",
       "integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "pg-int8": "1.0.1",
@@ -6910,6 +7223,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.5.tgz",
       "integrity": "sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "split2": "^4.1.0"
@@ -6987,6 +7301,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
       "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -6996,6 +7311,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.1.tgz",
       "integrity": "sha512-5+5HqXnsZPE65IJZSMkZtURARZelel2oXUEO8rH83VS/hxH5vv1uHquPg5wZs8yMAfdv971IU+kcPUczi7NVBQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -7005,6 +7321,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz",
       "integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -7014,6 +7331,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz",
       "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "xtend": "^4.0.0"
@@ -7261,6 +7579,36 @@
         "react": "^19.2.6"
       }
     },
+    "node_modules/react-is": {
+      "version": "19.2.6",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.6.tgz",
+      "integrity": "sha512-XjBR15BhXuylgWGuslhDKqlSayuqvqBX91BP8pauG8kd1zY8kotkNWbXksTCNRarse4kuGbe2kIY05ARtwNIvw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/react-redux": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.3.0.tgz",
+      "integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
@@ -7384,6 +7732,51 @@
         "node": ">= 4"
       }
     },
+    "node_modules/recharts": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.8.1.tgz",
+      "integrity": "sha512-mwzmO1s9sFL0TduUpwndxCUNoXsBw3u3E/0+A+cLcrSfQitSG62L32N69GhqUrrT5qKcAE3pCGVINC6pqkBBQg==",
+      "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
+      "dependencies": {
+        "@reduxjs/toolkit": "^1.9.0 || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^10.1.1",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.1.1",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -7402,6 +7795,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -7820,6 +8219,7 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
       "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==",
+      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">= 10.x"
@@ -8339,6 +8739,28 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/vite": {
       "version": "8.0.13",
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.13.tgz",
@@ -8663,6 +9085,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
       "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.4"

package.json

@@ -16,12 +16,14 @@
     "@supabase/supabase-js": "^2.105.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "d3-force": "^3.0.0",
     "lucide-react": "^1.16.0",
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "react-router-dom": "^7.15.1",
+    "recharts": "^3.8.1",
     "shadcn": "^4.7.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
@@ -38,9 +40,9 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.6.0",
+    "pg": "^8.21.0",
     "tailwindcss": "^4.3.0",
     "vite": "^8.0.12",
-    "pg": "^8.21.0",
     "vitest": "^4.1.7"
   }
 }

src/components/matrix/BarChartView.jsx

@@ -0,0 +1,83 @@
+import {
+  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend,
+} from 'recharts'
+
+const levelLabels = {
+  1: { label: 'Débutant', color: '#9ca3af' },
+  2: { label: 'Intermédiaire', color: '#60a5fa' },
+  3: { label: 'Avancé', color: '#fbbf24' },
+  4: { label: 'Expert', color: '#34d399' },
+}
+
+export default function BarChartView({
+  categories, skills: allSkills, members, levels, filterCat,
+  onBarClick,
+}) {
+  const cats = filterCat === 'all' ? categories : categories.filter((c) => c.id === filterCat)
+
+  const data = cats.map((cat) => {
+    const catSkills = allSkills.filter((s) => s.category_id === cat.id)
+    const buckets = { 1: 0, 2: 0, 3: 0, 4: 0 }
+    members.forEach((m) => {
+      catSkills.forEach((s) => {
+        const key = `${m.id}-${s.id}`
+        const lvl = levels[key]?.level
+        if (lvl) buckets[lvl]++
+      })
+    })
+    return {
+      name: cat.name,
+      color: cat.color,
+      id: cat.id,
+      ...buckets,
+    }
+  })
+
+  if (data.length === 0) {
+    return <div className="p-8 text-center text-gray-400">Aucune donnée à afficher</div>
+  }
+
+  function handleClick(entry, _index, level) {
+    if (onBarClick && entry?.id) {
+      onBarClick(entry.id, level)
+    }
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-950 rounded-lg p-4">
+      <ResponsiveContainer width="100%" height={400}>
+        <BarChart data={data} layout="vertical" margin={{ top: 20, right: 30, left: 80, bottom: 5 }}>
+          <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" horizontal={false} />
+          <XAxis type="number" stroke="var(--foreground)" tick={{ fontSize: 12 }} />
+          <YAxis type="category" dataKey="name" stroke="var(--foreground)" tick={{ fontSize: 12 }} width={100} />
+          <Tooltip
+            contentStyle={{
+              background: 'var(--background)',
+              border: '1px solid var(--border)',
+              borderRadius: 'var(--radius)',
+              fontSize: 13,
+            }}
+          />
+          <Legend
+            payload={[1, 2, 3, 4].map((l) => ({
+              value: `${l} - ${levelLabels[l].label}`,
+              type: 'rect',
+              color: levelLabels[l].color,
+            }))}
+          />
+          {[1, 2, 3, 4].map((lvl) => (
+            <Bar
+              key={lvl}
+              dataKey={lvl}
+              stackId="a"
+              fill={levelLabels[lvl].color}
+              name={`Niveau ${lvl}`}
+              cursor="pointer"
+              onClick={(entry) => handleClick(entry, null, lvl)}
+            />
+          ))}
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}

src/components/matrix/GraphView.jsx

@@ -0,0 +1,251 @@
+import { useEffect, useRef, useState } from 'react'
+import { forceSimulation, forceLink, forceManyBody, forceCenter, forceCollide } from 'd3-force'
+import { Button } from '@/components/ui/button'
+
+export default function GraphView({
+  categories, skills: allSkills, levels,
+  filteredSkills, filteredMembers,
+}) {
+  const canvasRef = useRef(null)
+  const [aggregated, setAggregated] = useState(false)
+  const [selectedNode, setSelectedNode] = useState(null)
+  const width = 900
+  const height = 600
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return
+
+    const catMap = {}
+    categories.forEach((c) => { catMap[c.id] = c })
+
+    const nodes = []
+    const links = []
+    const nodeMap = new Map()
+
+    filteredMembers.forEach((m) => {
+      const node = { id: m.id, type: 'member', label: m.full_name || m.email, r: 10, x: width / 2, y: height / 2 }
+      nodes.push(node)
+      nodeMap.set(m.id, node)
+    })
+
+    if (aggregated) {
+      categories
+        .filter((cat) => filteredSkills.length === 0 || filteredSkills.some((s) => s.category_id === cat.id))
+        .forEach((cat) => {
+          const nid = `cat-${cat.id}`
+          const node = { id: nid, type: 'category', label: cat.name, r: 14, color: cat.color, catId: cat.id, x: width / 2, y: height / 2 }
+          nodes.push(node)
+          nodeMap.set(nid, node)
+
+          filteredMembers.forEach((m) => {
+            const catSkillIds = allSkills.filter((s) => s.category_id === cat.id).map((s) => s.id)
+            let total = 0
+            let count = 0
+            catSkillIds.forEach((sid) => {
+              const key = `${m.id}-${sid}`
+              const lvl = levels[key]?.level
+              if (lvl) { total += lvl; count++ }
+            })
+            if (count > 0) {
+              links.push({ source: m.id, target: nid, strength: total / count / 4 })
+            }
+          })
+        })
+    } else {
+      filteredSkills.forEach((s) => {
+        const nid = `skill-${s.id}`
+        const node = { id: nid, type: 'skill', label: s.name, r: 8, color: catMap[s.category_id]?.color || '#888', skillId: s.id, x: width / 2, y: height / 2 }
+        nodes.push(node)
+        nodeMap.set(nid, node)
+      })
+
+      filteredMembers.forEach((m) => {
+        filteredSkills.forEach((s) => {
+          const key = `${m.id}-${s.id}`
+          const lvl = levels[key]?.level
+          if (lvl) {
+            links.push({ source: m.id, target: `skill-${s.id}`, strength: lvl / 4 })
+          }
+        })
+      })
+    }
+
+    if (nodes.length === 0) return
+
+    const dpi = window.devicePixelRatio || 1
+    canvas.width = width * dpi
+    canvas.height = height * dpi
+    ctx.scale(dpi, dpi)
+
+    const borderColor = getComputedStyle(canvas).getPropertyValue('--border').trim() || '#e5e7eb'
+    const fgColor = getComputedStyle(canvas).getPropertyValue('--foreground').trim() || '#000'
+
+    const simulation = forceSimulation(nodes)
+      .force('link', forceLink(links).id((d) => d.id).distance(120).strength((d) => d.strength || 0.3))
+      .force('charge', forceManyBody().strength(-150))
+      .force('center', forceCenter(width / 2, height / 2))
+      .force('collide', forceCollide(20))
+      .on('tick', ticked)
+
+    function ticked() {
+      ctx.clearRect(0, 0, width, height)
+
+      ctx.strokeStyle = borderColor
+      ctx.lineWidth = 1
+      links.forEach((l) => {
+        const s = l.strength || 0.3
+        ctx.globalAlpha = s * 0.5 + 0.15
+        ctx.beginPath()
+        ctx.moveTo(l.source.x, l.source.y)
+        ctx.lineTo(l.target.x, l.target.y)
+        ctx.stroke()
+      })
+
+      ctx.globalAlpha = 1
+      nodes.forEach((n) => {
+        const isSel = selectedNode === n.id
+        const isNeighbor = isSel
+          ? links.some((l) => {
+              const sid = typeof l.source === 'object' ? l.source.id : l.source
+              const tid = typeof l.target === 'object' ? l.target.id : l.target
+              return (sid === selectedNode && tid === n.id) || (tid === selectedNode && sid === n.id)
+            })
+          : false
+
+        ctx.globalAlpha = selectedNode && !isSel && !isNeighbor ? 0.12 : 1
+
+        if (n.type === 'member') {
+          ctx.beginPath()
+          ctx.arc(n.x, n.y, n.r, 0, 2 * Math.PI)
+          ctx.fillStyle = '#6366f1'
+          ctx.fill()
+          if (isSel) {
+            ctx.strokeStyle = '#fff'
+            ctx.lineWidth = 2
+            ctx.stroke()
+          }
+        } else if (n.type === 'category') {
+          ctx.beginPath()
+          ctx.arc(n.x, n.y, n.r, 0, 2 * Math.PI)
+          ctx.fillStyle = n.color || '#888'
+          ctx.fill()
+          if (isSel) {
+            ctx.strokeStyle = '#fff'
+            ctx.lineWidth = 2
+            ctx.stroke()
+          }
+        } else {
+          const s = 6
+          ctx.fillStyle = n.color || '#888'
+          ctx.fillRect(n.x - s / 2, n.y - s / 2, s, s)
+          if (isSel) {
+            ctx.strokeStyle = '#fff'
+            ctx.lineWidth = 2
+            ctx.strokeRect(n.x - s / 2, n.y - s / 2, s, s)
+          }
+        }
+
+        ctx.fillStyle = fgColor
+        ctx.font = '10px sans-serif'
+        ctx.textAlign = 'center'
+        ctx.fillText(n.label, n.x, n.y + n.r + 12)
+      })
+
+      ctx.globalAlpha = 1
+    }
+
+    let dragNode = null
+
+    function getCanvasPos(e) {
+      const rect = canvas.getBoundingClientRect()
+      return {
+        x: (e.clientX - rect.left) * (width / rect.width),
+        y: (e.clientY - rect.top) * (height / rect.height),
+      }
+    }
+
+    function findHit(px, py) {
+      for (let i = nodes.length - 1; i >= 0; i--) {
+        const n = nodes[i]
+        const dx = px - n.x
+        const dy = py - n.y
+        if (dx * dx + dy * dy <= (n.r + 8) * (n.r + 8)) return n
+      }
+      return null
+    }
+
+    function onPointerDown(e) {
+      const pos = getCanvasPos(e)
+      const hit = findHit(pos.x, pos.y)
+      if (hit) {
+        dragNode = hit
+        setSelectedNode(hit.id)
+        hit.fx = hit.x
+        hit.fy = hit.y
+        simulation.alphaTarget(0.3).restart()
+      }
+    }
+
+    function onPointerMove(e) {
+      if (!dragNode) return
+      const pos = getCanvasPos(e)
+      dragNode.fx = Math.max(0, Math.min(width, pos.x))
+      dragNode.fy = Math.max(0, Math.min(height, pos.y))
+    }
+
+    function onPointerUp() {
+      if (dragNode) {
+        dragNode.fx = null
+        dragNode.fy = null
+        dragNode = null
+        simulation.alphaTarget(0)
+      }
+    }
+
+    canvas.addEventListener('pointerdown', onPointerDown)
+    window.addEventListener('pointermove', onPointerMove)
+    window.addEventListener('pointerup', onPointerUp)
+
+    return () => {
+      simulation.stop()
+      canvas.removeEventListener('pointerdown', onPointerDown)
+      window.removeEventListener('pointermove', onPointerMove)
+      window.removeEventListener('pointerup', onPointerUp)
+    }
+  }, [filteredSkills, filteredMembers, levels, categories, aggregated, selectedNode, allSkills])
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between flex-wrap gap-2">
+        <div className="flex items-center gap-3 text-sm text-gray-500 dark:text-gray-400">
+          <span className="inline-flex items-center gap-1.5">
+            <span className="w-3 h-3 rounded-full bg-indigo-500 inline-block" /> Membre
+          </span>
+          <span className="inline-flex items-center gap-1.5">
+            <span className="w-3 h-3 rounded-sm bg-gray-400 inline-block" /> Compétence
+          </span>
+          <span className="inline-flex items-center gap-1.5">
+            <span className="w-3 h-3 rounded-full border border-current inline-block" /> Catégorie
+          </span>
+        </div>
+        <Button variant="outline" size="sm" onClick={() => setAggregated(!aggregated)}>
+          {aggregated ? 'Détailler les compétences' : 'Agréger par catégorie'}
+        </Button>
+      </div>
+
+      <div className="bg-white dark:bg-gray-950 rounded-lg overflow-hidden relative">
+        <canvas
+          ref={canvasRef}
+          className="block w-full touch-none"
+          style={{ height: `${height}px`, cursor: 'grab' }}
+        />
+        <div className="absolute bottom-3 left-1/2 -translate-x-1/2 text-xs text-gray-400 pointer-events-none">
+          Cliquez sur un nœud pour le sélectionner • Glissez pour déplacer
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/matrix/HeatmapView.jsx

@@ -0,0 +1,157 @@
+import { useState } from 'react'
+import { ChevronDown, ChevronRight, ListCollapse } from 'lucide-react'
+import { SkillLevelSelect } from '@/components/SkillLevelBadge'
+
+const heatColors = {
+  0: 'bg-gray-50 dark:bg-gray-900',
+  1: 'bg-gray-200 dark:bg-gray-700',
+  2: 'bg-blue-200 dark:bg-blue-900',
+  3: 'bg-amber-200 dark:bg-amber-900',
+  4: 'bg-green-200 dark:bg-green-900',
+}
+
+export function HeatmapView({
+  categories, levels,
+  isAdmin, currentUserId,
+  editing, onEdit, onUpdate, onCancel,
+  filteredSkills, visibleMembers,
+}) {
+  const [collapsed, setCollapsed] = useState(new Set())
+
+  const grouped = categories
+    .map((cat) => ({
+      ...cat,
+      catSkills: filteredSkills.filter((s) => s.category_id === cat.id),
+    }))
+    .filter((g) => g.catSkills.length > 0)
+
+  const allCollapsed = grouped.every((g) => collapsed.has(g.id))
+
+  function toggleCategory(catId) {
+    setCollapsed((prev) => {
+      const next = new Set(prev)
+      if (next.has(catId)) next.delete(catId)
+      else next.add(catId)
+      return next
+    })
+  }
+
+  function toggleAll() {
+    if (allCollapsed) {
+      setCollapsed(new Set())
+    } else {
+      setCollapsed(new Set(grouped.map((g) => g.id)))
+    }
+  }
+
+  if (visibleMembers.length === 0) {
+    return (
+      <div className="p-8 text-center text-gray-400">
+        Aucun résultat
+      </div>
+    )
+  }
+
+  return (
+    <div className="overflow-auto">
+      <table className="w-full border-collapse">
+        <thead>
+          <tr>
+            <th className="text-left p-2 bg-gray-100 dark:bg-gray-800 border dark:border-gray-700 sticky left-0 z-10 min-w-[180px]">
+              <button
+                className="inline-flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 mr-2"
+                onClick={toggleAll}
+                title={allCollapsed ? 'Tout dérouler' : 'Tout replier'}
+              >
+                <ListCollapse className={`h-3.5 w-3.5 transition-transform ${allCollapsed ? '' : 'rotate-180'}`} />
+              </button>
+              Compétence
+            </th>
+            {visibleMembers.map((m) => (
+              <th key={m.id} className="p-2 bg-gray-100 dark:bg-gray-800 border dark:border-gray-700 text-sm text-center min-w-[120px]">
+                {m.full_name || m.email}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {grouped.map((g) => {
+            const isCollapsed = collapsed.has(g.id)
+            return (
+              <>
+                <tr key={g.id} className="bg-gray-50 dark:bg-gray-800/50 hover:bg-gray-100 dark:hover:bg-gray-800">
+                  <td className="p-2 border dark:border-gray-700 font-semibold text-sm sticky left-0 bg-gray-50 dark:bg-gray-800/50 cursor-pointer" onClick={() => toggleCategory(g.id)}>
+                    <span className="flex items-center gap-2">
+                      {isCollapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+                      <span className="w-2 h-2 rounded-full" style={{ backgroundColor: g.color }} />
+                      {g.name}
+                    </span>
+                  </td>
+                  {visibleMembers.map((m) => {
+                    const dotColors = ['bg-gray-200', 'bg-blue-200', 'bg-amber-200', 'bg-green-200']
+                    const counts = [0, 0, 0, 0]
+                    g.catSkills.forEach((s) => {
+                      const lvl = levels[`${m.id}-${s.id}`]?.level
+                      if (lvl) counts[lvl - 1]++
+                    })
+                    return (
+                      <td key={m.id} className="p-2 border dark:border-gray-700 text-center bg-gray-50 dark:bg-gray-800/50">
+                        <span className="inline-flex items-center gap-2 text-xs">
+                          {counts.map((c, i) =>
+                            c > 0 ? (
+                              <span key={i} className="inline-flex items-center gap-0.5">
+                                <span className={'inline-block w-2.5 h-2.5 rounded-full ' + dotColors[i]} />
+                                <span className="font-semibold">{c}</span>
+                              </span>
+                            ) : null
+                          )}
+                        </span>
+                      </td>
+                    )
+                  })}
+                </tr>
+                {!isCollapsed && g.catSkills.map((s) => (
+                  <tr key={s.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/50">
+                    <td className="p-2 border dark:border-gray-700 font-medium sticky left-0 bg-white dark:bg-gray-950">
+                      <span className="text-sm pl-6">{s.name}</span>
+                    </td>
+                    {visibleMembers.map((m) => {
+                      const key = `${m.id}-${s.id}`
+                      const level = levels[key]
+                      const lvl = level?.level || 0
+                      const canEditCell = isAdmin || currentUserId === m.id
+                      const isEditing = editing === key
+                      return (
+                        <td
+                          key={m.id}
+                          className={`p-2 border dark:border-gray-700 text-center ${heatColors[lvl]} ${currentUserId === m.id ? 'ring-2 ring-blue-400 dark:ring-blue-600 ring-inset' : ''}`}
+                        >
+                          {isEditing && canEditCell ? (
+                            <SkillLevelSelect
+                              value={level?.level || 1}
+                              onChange={(v) => onUpdate(m.id, s.id, v)}
+                            />
+                          ) : (
+                            <span
+                              className="text-sm font-medium cursor-pointer"
+                              onClick={() => canEditCell && onEdit(key)}
+                            >
+                              {lvl || '—'}
+                            </span>
+                          )}
+                          {isEditing && canEditCell && (
+                            <button className="ml-1 text-xs text-red-500" onClick={onCancel}>✕</button>
+                          )}
+                        </td>
+                      )
+                    })}
+                  </tr>
+                ))}
+              </>
+            )
+          })}
+        </tbody>
+      </table>
+    </div>
+  )
+}

src/components/matrix/RadarView.jsx

@@ -0,0 +1,104 @@
+import { useState } from 'react'
+import {
+  RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, Tooltip, ResponsiveContainer, Legend,
+} from 'recharts'
+
+export default function RadarView({
+  categories, skills: allSkills, members, levels, filterMember,
+}) {
+  const [selectedMember, setSelectedMember] = useState(filterMember !== 'all' ? filterMember : (members[0]?.id || ''))
+
+  function getCategoryAvg(catId) {
+    const catSkills = allSkills.filter((s) => s.category_id === catId)
+    if (catSkills.length === 0) return 0
+    let total = 0
+    let count = 0
+    members.forEach((m) => {
+      catSkills.forEach((s) => {
+        const key = `${m.id}-${s.id}`
+        const lvl = levels[key]?.level
+        if (lvl) { total += lvl; count++ }
+      })
+    })
+    return count > 0 ? +(total / count).toFixed(1) : 0
+  }
+
+  function getMemberAvg(catId, memberId) {
+    const catSkills = allSkills.filter((s) => s.category_id === catId)
+    if (catSkills.length === 0) return 0
+    let total = 0
+    let count = 0
+    catSkills.forEach((s) => {
+      const key = `${memberId}-${s.id}`
+      const lvl = levels[key]?.level
+      if (lvl) { total += lvl; count++ }
+    })
+    return count > 0 ? +(total / count).toFixed(1) : 0
+  }
+
+  const data = categories.map((cat) => {
+    const teamAvg = getCategoryAvg(cat.id)
+    const memberAvg = selectedMember ? getMemberAvg(cat.id, selectedMember) : 0
+    return {
+      category: cat.name,
+      color: cat.color,
+      teamAvg,
+      memberAvg,
+    }
+  })
+
+  const selectedMemberName = members.find((m) => m.id === selectedMember)?.full_name || 'Membre'
+
+  if (data.length === 0) {
+    return <div className="p-8 text-center text-gray-400">Aucune donnée à afficher</div>
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-950 rounded-lg p-4">
+      <div className="flex items-center gap-4 mb-4">
+        <label className="text-sm text-gray-600 dark:text-gray-400">Membre :</label>
+        <select
+          className="border rounded px-2 py-1 text-sm dark:bg-gray-800 dark:border-gray-700"
+          value={selectedMember}
+          onChange={(e) => setSelectedMember(e.target.value)}
+        >
+          {members.map((m) => (
+            <option key={m.id} value={m.id}>{m.full_name || m.email}</option>
+          ))}
+        </select>
+      </div>
+
+      <ResponsiveContainer width="100%" height={450}>
+        <RadarChart data={data}>
+          <PolarGrid stroke="var(--border)" />
+          <PolarAngleAxis dataKey="category" stroke="var(--foreground)" tick={{ fontSize: 11 }} />
+          <PolarRadiusAxis domain={[0, 4]} tickCount={5} stroke="var(--border)" tick={{ fontSize: 10 }} />
+          <Tooltip
+            contentStyle={{
+              background: 'var(--background)',
+              border: '1px solid var(--border)',
+              borderRadius: 'var(--radius)',
+              fontSize: 13,
+            }}
+          />
+          <Radar
+            name="Moyenne équipe"
+            dataKey="teamAvg"
+            stroke="var(--muted-foreground)"
+            fill="var(--muted-foreground)"
+            fillOpacity={0.1}
+            strokeDasharray="4 4"
+          />
+          <Radar
+            name={selectedMemberName}
+            dataKey="memberAvg"
+            stroke="var(--foreground)"
+            fill="var(--foreground)"
+            fillOpacity={0.15}
+          />
+          <Legend />
+        </RadarChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}

src/components/matrix/ScatterView.jsx

@@ -0,0 +1,126 @@
+import {
+  ScatterChart, Scatter, XAxis, YAxis, ZAxis, CartesianGrid,
+  Tooltip, ResponsiveContainer, Legend,
+} from 'recharts'
+
+export default function ScatterView({
+  members, levels, categories,
+  filterMember,
+  filteredSkills, onMemberSelect,
+}) {
+  const data = []
+  const catGaps = {}
+  let xPos = 0
+
+  categories.forEach((cat) => {
+    const catSkills = filteredSkills.filter((s) => s.category_id === cat.id)
+    if (catSkills.length === 0) return
+    xPos += 1
+    catGaps[cat.id] = { start: xPos, end: xPos + catSkills.length - 1 }
+    catSkills.forEach((s) => {
+      const x = xPos++
+      members.forEach((m) => {
+        if (filterMember !== 'all' && m.id !== filterMember) return
+        const key = `${m.id}-${s.id}`
+        const lvl = levels[key]?.level
+        if (!lvl) return
+        data.push({
+          x,
+          y: lvl + (Math.random() - 0.5) * 0.3,
+          memberName: m.full_name || m.email,
+          skillName: s.name,
+          level: lvl,
+          category: cat.name,
+          categoryColor: cat.color,
+          memberId: m.id,
+        })
+      })
+    })
+  })
+
+  const ticks = categories
+    .filter((cat) => catGaps[cat.id])
+    .map((cat) => ({
+      value: (catGaps[cat.id].start + catGaps[cat.id].end) / 2,
+      label: cat.name,
+    }))
+
+  if (data.length === 0) {
+    return <div className="p-8 text-center text-gray-400">Aucune donnée à afficher</div>
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-950 rounded-lg p-4">
+      <ResponsiveContainer width="100%" height={500}>
+        <ScatterChart margin={{ top: 20, right: 20, bottom: 60, left: 40 }}>
+          <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
+          <XAxis
+            type="number"
+            dataKey="x"
+            domain={[0, 'dataMax']}
+            ticks={ticks.map((t) => t.value)}
+            tickFormatter={(v) => ticks.find((t) => t.value === v)?.label || ''}
+            stroke="var(--foreground)"
+            tick={{ fontSize: 12 }}
+          />
+          <YAxis
+            type="number"
+            domain={[0.5, 4.5]}
+            ticks={[1, 2, 3, 4]}
+            tickFormatter={(v) => ['', '1 - Débutant', '2 - Intermédiaire', '3 - Avancé', '4 - Expert'][v]}
+            stroke="var(--foreground)"
+            tick={{ fontSize: 12 }}
+          />
+          <ZAxis range={[60, 60]} />
+          <Tooltip
+            contentStyle={{
+              background: 'var(--background)',
+              border: '1px solid var(--border)',
+              borderRadius: 'var(--radius)',
+              fontSize: 13,
+            }}
+            formatter={(val, name) => {
+              if (name === 'y') return null
+              return [val, name]
+            }}
+            labelFormatter={() => ''}
+            content={({ active, payload }) => {
+              if (!active || !payload?.[0]) return null
+              const d = payload[0].payload
+              return (
+                <div className="bg-white dark:bg-gray-800 border rounded-lg p-3 shadow-lg text-sm space-y-1">
+                  <p className="font-medium">{d.memberName}</p>
+                  <p>{d.skillName}</p>
+                  <p>Niveau : <strong>{d.level}</strong></p>
+                  <p className="text-xs" style={{ color: d.categoryColor }}>{d.category}</p>
+                </div>
+              )
+            }}
+          />
+          <Legend
+            payload={categories.map((c) => ({
+              id: c.id,
+              value: c.name,
+              type: 'circle',
+              color: c.color,
+            }))}
+          />
+          {categories.map((cat) => {
+            const catData = data.filter((d) => d.category === cat.name)
+            return (
+              <Scatter
+                key={cat.id}
+                name={cat.name}
+                data={catData}
+                fill={cat.color}
+                stroke="none"
+                onClick={(point) => onMemberSelect?.(point.memberId)}
+                style={{ cursor: 'pointer' }}
+              />
+            )
+          })}
+        </ScatterChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}

src/components/matrix/SkillMatrixFilters.jsx

@@ -1,4 +1,4 @@
-export function SkillMatrixFilters({ categories, members, filterCat, filterMember, filterMinLevel, onFilterChange }) {
+export function SkillMatrixFilters({ categories, members, filterCat, filterMember, filterMinLevel, onFilterChange, hideMember }) {
   return (
     <div className="flex gap-4 flex-wrap">
       <div className="flex items-center gap-2">
@@ -14,6 +14,7 @@ export function SkillMatrixFilters({ categories, members, filterCat, filterMembe
           ))}
         </select>
       </div>
+      {!hideMember && (
         <div className="flex items-center gap-2">
           <label className="text-sm text-gray-600 dark:text-gray-400">Membre :</label>
           <select
@@ -27,6 +28,7 @@ export function SkillMatrixFilters({ categories, members, filterCat, filterMembe
             ))}
           </select>
         </div>
+      )}
       <div className="flex items-center gap-2">
         <label className="text-sm text-gray-600 dark:text-gray-400">Niveau min. :</label>
         <select

src/components/matrix/TreemapView.jsx

@@ -0,0 +1,158 @@
+import { Treemap, ResponsiveContainer, Tooltip } from 'recharts'
+import { Card, CardContent } from '@/components/ui/card'
+
+export default function TreemapView({
+  categories: allCategories, members, levels,
+  filterMember, filterCat,
+  filteredSkills, onCellClick,
+}) {
+  const cats = allCategories
+    .filter((cat) => filterCat === 'all' || cat.id === filterCat)
+    .map((cat) => {
+      const catSkills = filteredSkills.filter((s) => s.category_id === cat.id)
+      return {
+        name: cat.name,
+        color: cat.color,
+        children: catSkills.map((s) => {
+          let total = 0
+          let count = 0
+          if (filterMember !== 'all') {
+            const key = `${filterMember}-${s.id}`
+            const lvl = levels[key]?.level
+            if (lvl) { total += lvl; count++ }
+          } else {
+            members.forEach((m) => {
+              const key = `${m.id}-${s.id}`
+              const lvl = levels[key]?.level
+              if (lvl) { total += lvl; count++ }
+            })
+          }
+          const avg = count > 0 ? +(total / count).toFixed(1) : 0
+          return {
+            name: s.name,
+            size: 1,
+            avg,
+            count,
+            skillId: s.id,
+            catId: cat.id,
+          }
+        }),
+      }
+    })
+    .filter((cat) => cat.children.length > 0)
+
+  const flatData = cats
+    .flatMap((cat) => cat.children)
+    .sort((a, b) => b.avg - a.avg)
+
+  if (flatData.length === 0) {
+    return <div className="p-8 text-center text-gray-400">Aucune donnée à afficher</div>
+  }
+
+  function getColor(avg) {
+    if (avg >= 3.5) return '#34d399'
+    if (avg >= 2.5) return '#fbbf24'
+    if (avg >= 1.5) return '#60a5fa'
+    return '#9ca3af'
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="bg-white dark:bg-gray-950 rounded-lg p-4">
+        <ResponsiveContainer width="100%" height={500}>
+          <Treemap
+            data={flatData}
+            dataKey="size"
+            aspectRatio={4 / 3}
+            stroke="var(--background)"
+            fill="#8884d8"
+            content={({ x, y, width, height, payload }) => {
+              if (!payload) return null
+              return (
+                <g>
+                  <rect
+                    x={x}
+                    y={y}
+                    width={width}
+                    height={height}
+                    fill={getColor(payload.avg)}
+                    stroke="var(--background)"
+                    strokeWidth={2}
+                    style={{ cursor: 'pointer' }}
+                    onClick={() => onCellClick?.(payload.catId, filterMember !== 'all' ? filterMember : undefined)}
+                    rx={4}
+                  />
+                  {width > 40 && height > 30 && (
+                    <>
+                      <text
+                        x={x + width / 2}
+                        y={y + height / 2 - 4}
+                        textAnchor="middle"
+                        fill={payload.avg >= 2.5 ? '#000' : '#fff'}
+                        fontSize={12}
+                        fontWeight={600}
+                      >
+                        {payload.name}
+                      </text>
+                      <text
+                        x={x + width / 2}
+                        y={y + height / 2 + 12}
+                        textAnchor="middle"
+                        fill={payload.avg >= 2.5 ? '#000' : '#fff'}
+                        fontSize={11}
+                      >
+                        {payload.avg}
+                        {filterMember === 'all' && ` (${payload.count})`}
+                      </text>
+                    </>
+                  )}
+                </g>
+              )
+            }}
+          >
+            <Tooltip
+              contentStyle={{
+                background: 'var(--background)',
+                border: '1px solid var(--border)',
+                borderRadius: 'var(--radius)',
+                fontSize: 13,
+              }}
+              formatter={(value, name, props) => {
+                const p = props.payload
+                if (!p) return []
+                return [
+                  filterMember === 'all'
+                    ? `Moyenne : ${p.avg} — ${p.count} évalué(s)`
+                    : `Niveau : ${p.avg}`,
+                  p.name,
+                ]
+              }}
+            />
+          </Treemap>
+        </ResponsiveContainer>
+      </div>
+
+      {flatData.length > 0 && (
+        <Card>
+          <CardContent className="p-4">
+            <h3 className="text-sm font-semibold text-gray-500 dark:text-gray-400 mb-3 uppercase tracking-wider">
+              Détail des compétences
+            </h3>
+            <div className="space-y-1">
+              {flatData.map((s) => (
+                <div
+                  key={s.skillId}
+                  className="flex items-center justify-between py-1.5 px-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer text-sm"
+                  onClick={() => onCellClick?.(s.catId, filterMember !== 'all' ? filterMember : undefined)}
+                >
+                  <span>{s.name}</span>
+                  <span className="font-medium">{s.avg}</span>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  )
+}

src/components/matrix/ViewSwitcher.jsx

@@ -0,0 +1,37 @@
+import { Button } from '@/components/ui/button'
+import {
+  Table2, Palette, ScatterChart, Share2, Grid3x3, Radar, BarChart3,
+} from 'lucide-react'
+
+const views = [
+  { id: 'table',  icon: Table2,  label: 'Tableau' },
+  { id: 'heat',   icon: Palette, label: 'Matrice thermique' },
+  { id: 'scatter', icon: ScatterChart, label: 'Nuage de points' },
+  { id: 'graph',  icon: Share2,  label: 'Graphe' },
+  { id: 'treemap', icon: Grid3x3, label: 'Treemap' },
+  { id: 'radar',  icon: Radar,   label: 'Radar' },
+  { id: 'bars',   icon: BarChart3, label: 'Barres' },
+]
+
+export function ViewSwitcher({ active, onChange }) {
+  return (
+    <div className="flex gap-1" role="group" aria-label="Mode d'affichage">
+      {views.map((v) => {
+        const Icon = v.icon
+        const isActive = active === v.id
+        return (
+          <Button
+            key={v.id}
+            variant={isActive ? 'default' : 'outline'}
+            size="sm"
+            className="h-8 w-8 p-0"
+            onClick={() => onChange(v.id)}
+            title={v.label}
+          >
+            <Icon className="h-4 w-4" />
+          </Button>
+        )
+      })}
+    </div>
+  )
+}

src/pages/SkillMatrix.jsx

@@ -1,4 +1,5 @@
-import { useState } from 'react'
+import { lazy, Suspense, useState } from 'react'
+import { useSearchParams } from 'react-router-dom'
 import { useAuth } from '@/context/AuthContext'
 import { useCategories } from '@/hooks/useCategories'
 import { useSkills } from '@/hooks/useSkills'
@@ -7,10 +8,21 @@ import { useSkillLevels } from '@/hooks/useSkillLevels'
 import { SkillMatrixFilters } from '@/components/matrix/SkillMatrixFilters'
 import { SkillMatrixTable } from '@/components/matrix/SkillMatrixTable'
 import { SkillMemberForm } from '@/components/matrix/SkillMemberForm'
+import { ViewSwitcher } from '@/components/matrix/ViewSwitcher'
+import { HeatmapView } from '@/components/matrix/HeatmapView'
 import { Download } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { toast } from 'sonner'
 
+const ScatterView = lazy(() => import('@/components/matrix/ScatterView'))
+const GraphView = lazy(() => import('@/components/matrix/GraphView'))
+const TreemapView = lazy(() => import('@/components/matrix/TreemapView'))
+const RadarView = lazy(() => import('@/components/matrix/RadarView'))
+const BarChartView = lazy(() => import('@/components/matrix/BarChartView'))
+
+const hideMemberViews = new Set(['bars'])
+const showLevelLegendViews = new Set(['table', 'heat'])
+
 export function SkillMatrix() {
   const { profile } = useAuth()
   const isAdmin = profile?.role === 'admin'
@@ -20,11 +32,18 @@ export function SkillMatrix() {
   const { members } = useMembers()
   const { levels, updateLevel } = useSkillLevels()
 
+  const [searchParams, setSearchParams] = useSearchParams()
+  const viewMode = searchParams.get('view') || 'table'
+
   const [filterCat, setFilterCat] = useState('all')
   const [filterMember, setFilterMember] = useState('all')
   const [filterMinLevel, setFilterMinLevel] = useState(0)
   const [editing, setEditing] = useState(null)
 
+  function setViewMode(mode) {
+    setSearchParams(mode === 'table' ? {} : { view: mode }, { replace: true })
+  }
+
   function onFilterChange(key, value) {
     if (key === 'cat') setFilterCat(value)
     if (key === 'member') setFilterMember(value)
@@ -73,33 +92,88 @@ export function SkillMatrix() {
     toast.success('Fichier CSV téléchargé')
   }
 
+  function navigateToView(mode, filters) {
+    if (filters.cat !== undefined) setFilterCat(filters.cat)
+    if (filters.member !== undefined) setFilterMember(filters.member)
+    if (filters.minLevel !== undefined) setFilterMinLevel(filters.minLevel)
+    setViewMode(mode)
+  }
+
+  const commonProps = {
+    categories, skills, members, levels,
+    isAdmin, currentUserId,
+    filterCat, filterMember, filterMinLevel,
+  }
+
+  const editableProps = {
+    editing, onEdit: setEditing, onUpdate: handleUpdate, onCancel: () => setEditing(null),
+  }
+
+  function renderView() {
+    switch (viewMode) {
+      case 'heat':
         return (
-    <div className="space-y-6">
+          <HeatmapView
-      <div className="flex items-center justify-between">
+            {...commonProps}
-        <h1 className="text-2xl font-bold">Matrice des compétences</h1>
+            {...editableProps}
-        <Button variant="outline" onClick={exportCSV}>
+            filteredSkills={filteredSkills}
-          <Download className="h-4 w-4 mr-2" />
+            visibleMembers={visibleMembers}
-          CSV
-        </Button>
-      </div>
-
-      <SkillMatrixFilters
-        categories={categories}
-        members={members}
-        filterCat={filterCat}
-        filterMember={filterMember}
-        filterMinLevel={filterMinLevel}
-        onFilterChange={onFilterChange}
           />
+        )
 
-      <div className="flex gap-4 text-sm text-gray-500 dark:text-gray-400">
+      case 'scatter':
-        <span><span className="inline-block w-3 h-3 rounded-full bg-gray-200 mr-1" /> Débutant</span>
+        return (
-        <span><span className="inline-block w-3 h-3 rounded-full bg-blue-200 mr-1" /> Intermédiaire</span>
+          <Suspense fallback={<Fallback />}>
-        <span><span className="inline-block w-3 h-3 rounded-full bg-amber-200 mr-1" /> Avancé</span>
+            <ScatterView
-        <span><span className="inline-block w-3 h-3 rounded-full bg-green-200 mr-1" /> Expert</span>
+              {...commonProps}
-      </div>
+              filteredSkills={filteredSkills}
+              onMemberSelect={(memberId) => navigateToView('table', { member: memberId })}
+            />
+          </Suspense>
+        )
 
-      {filterMember !== 'all' && visibleMembers.length === 1 ? (
+      case 'graph':
+        return (
+          <Suspense fallback={<Fallback />}>
+            <GraphView
+              {...commonProps}
+              filteredSkills={filteredSkills}
+              filteredMembers={filteredMembers}
+            />
+          </Suspense>
+        )
+
+      case 'treemap':
+        return (
+          <Suspense fallback={<Fallback />}>
+            <TreemapView
+              {...commonProps}
+              filteredSkills={filteredSkills}
+              onCellClick={(catId, memberId) => navigateToView('table', { cat: catId, member: memberId })}
+            />
+          </Suspense>
+        )
+
+      case 'radar':
+        return (
+          <Suspense fallback={<Fallback />}>
+            <RadarView {...commonProps} />
+          </Suspense>
+        )
+
+      case 'bars':
+        return (
+          <Suspense fallback={<Fallback />}>
+            <BarChartView
+              {...commonProps}
+              onBarClick={(catId, level) => navigateToView('table', { cat: catId, minLevel: level })}
+            />
+          </Suspense>
+        )
+
+      default:
+        if (filterMember !== 'all' && visibleMembers.length === 1) {
+          return (
             <SkillMemberForm
               member={visibleMembers[0]}
               categories={categories}
@@ -113,7 +187,9 @@ export function SkillMatrix() {
                   .catch(() => toast.error('Erreur lors de la mise à jour'))
               }}
             />
-      ) : (
+          )
+        }
+        return (
           <SkillMatrixTable
             categories={categories}
             skills={filteredSkills}
@@ -126,7 +202,51 @@ export function SkillMatrix() {
             onUpdate={handleUpdate}
             onCancel={() => setEditing(null)}
           />
+        )
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between flex-wrap gap-4">
+        <h1 className="text-2xl font-bold">Matrice des compétences</h1>
+        <div className="flex items-center gap-2">
+          <ViewSwitcher active={viewMode} onChange={setViewMode} />
+          <Button variant="outline" onClick={exportCSV}>
+            <Download className="h-4 w-4 mr-2" />
+            CSV
+          </Button>
+        </div>
+      </div>
+
+      <SkillMatrixFilters
+        categories={categories}
+        members={members}
+        filterCat={filterCat}
+        filterMember={filterMember}
+        filterMinLevel={filterMinLevel}
+        onFilterChange={onFilterChange}
+        hideMember={hideMemberViews.has(viewMode)}
+      />
+
+      {showLevelLegendViews.has(viewMode) && (
+        <div className="flex gap-4 text-sm text-gray-500 dark:text-gray-400">
+          <span><span className="inline-block w-3 h-3 rounded-full bg-gray-200 mr-1" /> Débutant</span>
+          <span><span className="inline-block w-3 h-3 rounded-full bg-blue-200 mr-1" /> Intermédiaire</span>
+          <span><span className="inline-block w-3 h-3 rounded-full bg-amber-200 mr-1" /> Avancé</span>
+          <span><span className="inline-block w-3 h-3 rounded-full bg-green-200 mr-1" /> Expert</span>
+        </div>
       )}
+
+      {renderView()}
+    </div>
+  )
+}
+
+function Fallback() {
+  return (
+    <div className="flex items-center justify-center min-h-[400px] text-gray-400">
+      Chargement...
     </div>
   )
 }