From 8e6bcaeed633404eda44c8010a14dc5cf4b9b1d9 Mon Sep 17 00:00:00 2001 From: Melina Pashna Date: Fri, 27 Sep 2024 15:54:37 -0700 Subject: [PATCH 1/8] Fixed MUI TabContext import issue and installed @mui/lab --- Clients/package-lock.json | 161 +++++++++++++++++--------------------- 1 file changed, 71 insertions(+), 90 deletions(-) diff --git a/Clients/package-lock.json b/Clients/package-lock.json index d520bc56..313ea637 100644 --- a/Clients/package-lock.json +++ b/Clients/package-lock.json @@ -2916,7 +2916,6 @@ "version": "6.0.0-beta.10", "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-6.0.0-beta.10.tgz", "integrity": "sha512-eqCBz5SZS8Un9To3UcjH01AxkOOgvme/g0ZstFC8Nz1Kg5/EJMA0ByhKS5AvUMzUKrv0FXMdbuPqbBvF3bVrXg==", - "license": "MIT", "dependencies": { "@babel/runtime": "^7.25.6", "@mui/base": "5.0.0-beta.58", @@ -3422,224 +3421,208 @@ } }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.21.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.3.tgz", - "integrity": "sha512-MmKSfaB9GX+zXl6E8z4koOr/xU63AMVleLEa64v7R0QF/ZloMs5vcD1sHgM64GXXS1csaJutG+ddtzcueI/BLg==", + "version": "4.22.5", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.5.tgz", + "integrity": "sha512-SU5cvamg0Eyu/F+kLeMXS7GoahL+OoizlclVFX3l5Ql6yNlywJJ0OuqTzUx0v+aHhPHEB/56CT06GQrRrGNYww==", "cpu": [ "arm" ], "dev": true, - "license": "MIT", "optional": true, "os": [ "android" ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.21.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.21.3.tgz", - "integrity": "sha512-zrt8ecH07PE3sB4jPOggweBjJMzI1JG5xI2DIsUbkA+7K+Gkjys6eV7i9pOenNSDJH3eOr/jLb/PzqtmdwDq5g==", + "version": "4.22.5", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.5.tgz", + "integrity": "sha512-S4pit5BP6E5R5C8S6tgU/drvgjtYW76FBuG6+ibG3tMvlD1h9LHVF9KmlmaUBQ8Obou7hEyS+0w+IR/VtxwNMQ==", "cpu": [ "arm64" ], "dev": true, - "license": "MIT", "optional": true, "os": [ "android" ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.21.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.3.tgz", - "integrity": "sha512-P0UxIOrKNBFTQaXTxOH4RxuEBVCgEA5UTNV6Yz7z9QHnUJ7eLX9reOd/NYMO3+XZO2cco19mXTxDMXxit4R/eQ==", + "version": "4.22.5", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.5.tgz", + "integrity": "sha512-250ZGg4ipTL0TGvLlfACkIxS9+KLtIbn7BCZjsZj88zSg2Lvu3Xdw6dhAhfe/FjjXPVNCtcSp+WZjVsD3a/Zlw==", "cpu": [ "arm64" ], "dev": true, - "license": "MIT", "optional": true, "os": [ "darwin" ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.21.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.21.3.tgz", - "integrity": "sha512-L1M0vKGO5ASKntqtsFEjTq/fD91vAqnzeaF6sfNAy55aD+Hi2pBI5DKwCO+UNDQHWsDViJLqshxOahXyLSh3EA==", + "version": "4.22.5", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.5.tgz", + "integrity": "sha512-D8brJEFg5D+QxFcW6jYANu+Rr9SlKtTenmsX5hOSzNYVrK5oLAEMTUgKWYJP+wdKyCdeSwnapLsn+OVRFycuQg==", "cpu": [ "x64" ], "dev": true, - "license": "MIT", "optional": true, "os": [ "darwin" ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.21.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.21.3.tgz", - "integrity": "sha512-btVgIsCjuYFKUjopPoWiDqmoUXQDiW2A4C3Mtmp5vACm7/GnyuprqIDPNczeyR5W8rTXEbkmrJux7cJmD99D2g==", + "version": "4.22.5", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.5.tgz", + "integrity": "sha512-PNqXYmdNFyWNg0ma5LdY8wP+eQfdvyaBAojAXgO7/gs0Q/6TQJVXAXe8gwW9URjbS0YAammur0fynYGiWsKlXw==", "cpu": [ "arm" ], "dev": true, - "license": "MIT", "optional": true, "os": [ "linux" ] }, "node_modules/@rollup/rollup-linux-arm-musleabihf": { - "version": "4.21.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.21.3.tgz", - "integrity": "sha512-zmjbSphplZlau6ZTkxd3+NMtE4UKVy7U4aVFMmHcgO5CUbw17ZP6QCgyxhzGaU/wFFdTfiojjbLG3/0p9HhAqA==", + "version": "4.22.5", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.5.tgz", + "integrity": "sha512-kSSCZOKz3HqlrEuwKd9TYv7vxPYD77vHSUvM2y0YaTGnFc8AdI5TTQRrM1yIp3tXCKrSL9A7JLoILjtad5t8pQ==", "cpu": [ "arm" ], "dev": true, - "license": "MIT", "optional": true, "os": [ "linux" ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.21.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.21.3.tgz", - "integrity": "sha512-nSZfcZtAnQPRZmUkUQwZq2OjQciR6tEoJaZVFvLHsj0MF6QhNMg0fQ6mUOsiCUpTqxTx0/O6gX0V/nYc7LrgPw==", + "version": "4.22.5", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.5.tgz", + "integrity": "sha512-oTXQeJHRbOnwRnRffb6bmqmUugz0glXaPyspp4gbQOPVApdpRrY/j7KP3lr7M8kTfQTyrBUzFjj5EuHAhqH4/w==", "cpu": [ "arm64" ], "dev": true, - "license": "MIT", "optional": true, "os": [ "linux" ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.21.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.21.3.tgz", - "integrity": "sha512-MnvSPGO8KJXIMGlQDYfvYS3IosFN2rKsvxRpPO2l2cum+Z3exiExLwVU+GExL96pn8IP+GdH8Tz70EpBhO0sIQ==", + "version": "4.22.5", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.5.tgz", + "integrity": "sha512-qnOTIIs6tIGFKCHdhYitgC2XQ2X25InIbZFor5wh+mALH84qnFHvc+vmWUpyX97B0hNvwNUL4B+MB8vJvH65Fw==", "cpu": [ "arm64" ], "dev": true, - "license": "MIT", "optional": true, "os": [ "linux" ] }, "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { - "version": "4.21.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.21.3.tgz", - "integrity": "sha512-+W+p/9QNDr2vE2AXU0qIy0qQE75E8RTwTwgqS2G5CRQ11vzq0tbnfBd6brWhS9bCRjAjepJe2fvvkvS3dno+iw==", + "version": "4.22.5", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.5.tgz", + "integrity": "sha512-TMYu+DUdNlgBXING13rHSfUc3Ky5nLPbWs4bFnT+R6Vu3OvXkTkixvvBKk8uO4MT5Ab6lC3U7x8S8El2q5o56w==", "cpu": [ "ppc64" ], "dev": true, - "license": "MIT", "optional": true, "os": [ "linux" ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.21.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.21.3.tgz", - "integrity": "sha512-yXH6K6KfqGXaxHrtr+Uoy+JpNlUlI46BKVyonGiaD74ravdnF9BUNC+vV+SIuB96hUMGShhKV693rF9QDfO6nQ==", + "version": "4.22.5", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.5.tgz", + "integrity": "sha512-PTQq1Kz22ZRvuhr3uURH+U/Q/a0pbxJoICGSprNLAoBEkyD3Sh9qP5I0Asn0y0wejXQBbsVMRZRxlbGFD9OK4A==", "cpu": [ "riscv64" ], "dev": true, - "license": "MIT", "optional": true, "os": [ "linux" ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.21.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.21.3.tgz", - "integrity": "sha512-R8cwY9wcnApN/KDYWTH4gV/ypvy9yZUHlbJvfaiXSB48JO3KpwSpjOGqO4jnGkLDSk1hgjYkTbTt6Q7uvPf8eg==", + "version": "4.22.5", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.5.tgz", + "integrity": "sha512-bR5nCojtpuMss6TDEmf/jnBnzlo+6n1UhgwqUvRoe4VIotC7FG1IKkyJbwsT7JDsF2jxR+NTnuOwiGv0hLyDoQ==", "cpu": [ "s390x" ], "dev": true, - "license": "MIT", "optional": true, "os": [ "linux" ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.21.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.3.tgz", - "integrity": "sha512-kZPbX/NOPh0vhS5sI+dR8L1bU2cSO9FgxwM8r7wHzGydzfSjLRCFAT87GR5U9scj2rhzN3JPYVC7NoBbl4FZ0g==", + "version": "4.22.5", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.5.tgz", + "integrity": "sha512-N0jPPhHjGShcB9/XXZQWuWBKZQnC1F36Ce3sDqWpujsGjDz/CQtOL9LgTrJ+rJC8MJeesMWrMWVLKKNR/tMOCA==", "cpu": [ "x64" ], "dev": true, - "license": "MIT", "optional": true, "os": [ "linux" ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.21.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.21.3.tgz", - "integrity": "sha512-S0Yq+xA1VEH66uiMNhijsWAafffydd2X5b77eLHfRmfLsRSpbiAWiRHV6DEpz6aOToPsgid7TI9rGd6zB1rhbg==", + "version": "4.22.5", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.5.tgz", + "integrity": "sha512-uBa2e28ohzNNwjr6Uxm4XyaA1M/8aTgfF2T7UIlElLaeXkgpmIJ2EitVNQxjO9xLLLy60YqAgKn/AqSpCUkE9g==", "cpu": [ "x64" ], "dev": true, - "license": "MIT", "optional": true, "os": [ "linux" ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.21.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.21.3.tgz", - "integrity": "sha512-9isNzeL34yquCPyerog+IMCNxKR8XYmGd0tHSV+OVx0TmE0aJOo9uw4fZfUuk2qxobP5sug6vNdZR6u7Mw7Q+Q==", + "version": "4.22.5", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.5.tgz", + "integrity": "sha512-RXT8S1HP8AFN/Kr3tg4fuYrNxZ/pZf1HemC5Tsddc6HzgGnJm0+Lh5rAHJkDuW3StI0ynNXukidROMXYl6ew8w==", "cpu": [ "arm64" ], "dev": true, - "license": "MIT", "optional": true, "os": [ "win32" ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.21.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.21.3.tgz", - "integrity": "sha512-nMIdKnfZfzn1Vsk+RuOvl43ONTZXoAPUUxgcU0tXooqg4YrAqzfKzVenqqk2g5efWh46/D28cKFrOzDSW28gTA==", + "version": "4.22.5", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.5.tgz", + "integrity": "sha512-ElTYOh50InL8kzyUD6XsnPit7jYCKrphmddKAe1/Ytt74apOxDq5YEcbsiKs0fR3vff3jEneMM+3I7jbqaMyBg==", "cpu": [ "ia32" ], "dev": true, - "license": "MIT", "optional": true, "os": [ "win32" ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.21.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.21.3.tgz", - "integrity": "sha512-fOvu7PCQjAj4eWDEuD8Xz5gpzFqXzGlxHZozHP4b9Jxv9APtdxL6STqztDzMLuRXEc4UpXGGhx029Xgm91QBeA==", + "version": "4.22.5", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.5.tgz", + "integrity": "sha512-+lvL/4mQxSV8MukpkKyyvfwhH266COcWlXE/1qxwN08ajovta3459zrjLghYMgDerlzNwLAcFpvU+WWE5y6nAQ==", "cpu": [ "x64" ], "dev": true, - "license": "MIT", "optional": true, "os": [ "win32" @@ -4215,10 +4198,9 @@ } }, "node_modules/@types/estree": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", - "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", - "license": "MIT" + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", + "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==" }, "node_modules/@types/json-schema": { "version": "7.0.15", @@ -6879,13 +6861,12 @@ } }, "node_modules/rollup": { - "version": "4.21.3", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.3.tgz", - "integrity": "sha512-7sqRtBNnEbcBtMeRVc6VRsJMmpI+JU1z9VTvW8D4gXIYQFz0aLcsE6rRkyghZkLfEgUZgVvOG7A5CVz/VW5GIA==", + "version": "4.22.5", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.22.5.tgz", + "integrity": "sha512-WoinX7GeQOFMGznEcWA1WrTQCd/tpEbMkc3nuMs9BT0CPjMdSjPMTVClwWd4pgSQwJdP65SK9mTCNvItlr5o7w==", "devOptional": true, - "license": "MIT", "dependencies": { - "@types/estree": "1.0.5" + "@types/estree": "1.0.6" }, "bin": { "rollup": "dist/bin/rollup" @@ -6895,22 +6876,22 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.21.3", - "@rollup/rollup-android-arm64": "4.21.3", - "@rollup/rollup-darwin-arm64": "4.21.3", - "@rollup/rollup-darwin-x64": "4.21.3", - "@rollup/rollup-linux-arm-gnueabihf": "4.21.3", - "@rollup/rollup-linux-arm-musleabihf": "4.21.3", - "@rollup/rollup-linux-arm64-gnu": "4.21.3", - "@rollup/rollup-linux-arm64-musl": "4.21.3", - "@rollup/rollup-linux-powerpc64le-gnu": "4.21.3", - "@rollup/rollup-linux-riscv64-gnu": "4.21.3", - "@rollup/rollup-linux-s390x-gnu": "4.21.3", - "@rollup/rollup-linux-x64-gnu": "4.21.3", - "@rollup/rollup-linux-x64-musl": "4.21.3", - "@rollup/rollup-win32-arm64-msvc": "4.21.3", - "@rollup/rollup-win32-ia32-msvc": "4.21.3", - "@rollup/rollup-win32-x64-msvc": "4.21.3", + "@rollup/rollup-android-arm-eabi": "4.22.5", + "@rollup/rollup-android-arm64": "4.22.5", + "@rollup/rollup-darwin-arm64": "4.22.5", + "@rollup/rollup-darwin-x64": "4.22.5", + "@rollup/rollup-linux-arm-gnueabihf": "4.22.5", + "@rollup/rollup-linux-arm-musleabihf": "4.22.5", + "@rollup/rollup-linux-arm64-gnu": "4.22.5", + "@rollup/rollup-linux-arm64-musl": "4.22.5", + "@rollup/rollup-linux-powerpc64le-gnu": "4.22.5", + "@rollup/rollup-linux-riscv64-gnu": "4.22.5", + "@rollup/rollup-linux-s390x-gnu": "4.22.5", + "@rollup/rollup-linux-x64-gnu": "4.22.5", + "@rollup/rollup-linux-x64-musl": "4.22.5", + "@rollup/rollup-win32-arm64-msvc": "4.22.5", + "@rollup/rollup-win32-ia32-msvc": "4.22.5", + "@rollup/rollup-win32-x64-msvc": "4.22.5", "fsevents": "~2.3.2" } }, From 4669e2e816cfacc582b80123eb85b5b4d9d587c4 Mon Sep 17 00:00:00 2001 From: Melina Pashna Date: Mon, 30 Sep 2024 23:13:04 -0700 Subject: [PATCH 2/8] ComplianceTracker control pane completed --- Clients/src/App.tsx | 14 +- .../presentation/assets/icons/cloudUpload.svg | 3 + .../assets/icons/headingIcone.svg | 3 + .../components/Inputs/Datepicker/index.tsx | 2 +- .../components/Inputs/Dropdowns/index.tsx | 131 +++++++++++ .../components/Inputs/Field/index.tsx | 16 +- .../ComplianceFeedback/ComplianceFeedback.tsx | 159 +++++++++++++ .../components/Modals/Controlpane/index.tsx | 212 ++++++++++++++++++ .../presentation/components/Table/index.tsx | 21 +- .../compliance.data.ts} | 6 +- .../pages/ComplianceTracker/index.tsx | 125 ++++++----- 11 files changed, 605 insertions(+), 87 deletions(-) create mode 100644 Clients/src/presentation/assets/icons/cloudUpload.svg create mode 100644 Clients/src/presentation/assets/icons/headingIcone.svg create mode 100644 Clients/src/presentation/components/Inputs/Dropdowns/index.tsx create mode 100644 Clients/src/presentation/components/Modals/ComplianceFeedback/ComplianceFeedback.tsx create mode 100644 Clients/src/presentation/components/Modals/Controlpane/index.tsx rename Clients/src/presentation/{pages/ComplianceTracker/complianceData.ts => mocks/compliance.data.ts} (90%) diff --git a/Clients/src/App.tsx b/Clients/src/App.tsx index adb2932f..5ba4a52d 100644 --- a/Clients/src/App.tsx +++ b/Clients/src/App.tsx @@ -12,10 +12,6 @@ import Assessment from "./presentation/pages/Assessment"; import Vendors from "./presentation/pages/Vendors"; import Setting from "./presentation/pages/Setting"; import Team from "./presentation/pages/Team"; -import { - complianceMetrics, - complianceDetails, -} from "./presentation/pages/ComplianceTracker/complianceData"; function App() { const mode = useSelector((state: any) => state.ui?.mode || "light"); @@ -25,15 +21,7 @@ function App() { }> } /> - - } - /> + } /> } /> } /> } /> diff --git a/Clients/src/presentation/assets/icons/cloudUpload.svg b/Clients/src/presentation/assets/icons/cloudUpload.svg new file mode 100644 index 00000000..39c035f5 --- /dev/null +++ b/Clients/src/presentation/assets/icons/cloudUpload.svg @@ -0,0 +1,3 @@ + + + diff --git a/Clients/src/presentation/assets/icons/headingIcone.svg b/Clients/src/presentation/assets/icons/headingIcone.svg new file mode 100644 index 00000000..77bd622e --- /dev/null +++ b/Clients/src/presentation/assets/icons/headingIcone.svg @@ -0,0 +1,3 @@ + + + diff --git a/Clients/src/presentation/components/Inputs/Datepicker/index.tsx b/Clients/src/presentation/components/Inputs/Datepicker/index.tsx index 1c41a756..7788c35c 100644 --- a/Clients/src/presentation/components/Inputs/Datepicker/index.tsx +++ b/Clients/src/presentation/components/Inputs/Datepicker/index.tsx @@ -42,7 +42,7 @@ const DatePicker = ({ color={theme.palette.text.secondary} fontSize={13} fontWeight={500} - marginBottom={theme.spacing(3)} + marginBottom={theme.spacing(2)} > {label} {isRequired ? ( diff --git a/Clients/src/presentation/components/Inputs/Dropdowns/index.tsx b/Clients/src/presentation/components/Inputs/Dropdowns/index.tsx new file mode 100644 index 00000000..1bd9d0f3 --- /dev/null +++ b/Clients/src/presentation/components/Inputs/Dropdowns/index.tsx @@ -0,0 +1,131 @@ +import { Grid, Typography, useTheme } from "@mui/material"; +import { useState } from "react"; +import Select from "../Select"; +import DatePicker from "../Datepicker"; +import Field from "../Field"; + +const DropDowns = () => { + const [status, setStatus] = useState(""); + const [approver, setApprover] = useState(""); + const [riskReview, setRiskReview] = useState(""); + const [owner, setOwner] = useState(""); + const [reviewer, setReviewer] = useState(""); + const theme = useTheme(); + + const inputStyles = { width: 200, height: 34 }; + + return ( + <> + + + setApprover(e.target.value)} + items={[ + { _id: 10, name: "Option 1" }, + { _id: 20, name: "Option 2" }, + { _id: 30, name: "Option 3" }, + ]} + sx={inputStyles} + /> + + + setOwner(e.target.value)} + items={[ + { _id: 10, name: "Option 1" }, + { _id: 20, name: "Option 2" }, + { _id: 30, name: "Option 3" }, + ]} + sx={inputStyles} + /> + + + + + + + + {file && ( + + Attached file: {file.name} + + )} + + ); + } +); + +export default AuditorFeedback; diff --git a/Clients/src/presentation/components/Modals/Controlpane/index.tsx b/Clients/src/presentation/components/Modals/Controlpane/index.tsx new file mode 100644 index 00000000..965eda2f --- /dev/null +++ b/Clients/src/presentation/components/Modals/Controlpane/index.tsx @@ -0,0 +1,212 @@ +import { + Button, + Modal, + Stack, + Typography, + useTheme, + Divider, + Box, + Tabs, + Tab, +} from "@mui/material"; + +import React, { useState } from "react"; +import DropDowns from "../../Inputs/Dropdowns"; +import AuditorFeedback from "../ComplianceFeedback/ComplianceFeedback"; + +interface CustomModalProps { + isOpen: boolean; + setIsOpen: (isOpen: boolean) => void; + title: string; + content: string; + onConfirm: () => void; +} + +const CustomModal: React.FC = ({ + isOpen, + setIsOpen, + title, +}) => { + const theme = useTheme(); + // State for the date input + const [selectedTab, setSelectedTab] = useState(0); + const [activeSection, setActiveSection] = useState("Overview"); + + const handleClose = () => setIsOpen(false); + + const handleSelectedTab = (event: React.SyntheticEvent, newValue: number) => { + setSelectedTab(newValue); + }; + + const handleSectionChange = (section: string) => { + setActiveSection(section); + }; + + const buttonTabStyles = { + backgroundColor: "#EAECF0", + color: "Black", + borderColor: "#EAECF0", + fontWeight: 500, + boxShadow: "none", + textTransform: "none", + }; + + const buttonStyle = { + marginRight: 1, + borderRadius: theme.shape.borderRadius, + backgroundColor: "#4C7DE7", + width: 173, + height: 34, + fontSize: 13, + fontWeight: 400, + textTransform: "none", + }; + + const getVariant = (activeSection: string, section: string) => { + return activeSection === section ? "contained" : "outlined"; + }; + + return ( + + + + {title} + + + To ensure that the risk management system is a continuous iterative + process that is planned, run, and regularly reviewed and updated + throughout the entire lifecycle of the high-risk AI system. + + + + + + + + + + + + + + + + + + + + {/* Dynamic Content Based on Active Section */} + + + Subcontrol 19.1 + + + Plan and execute the risk management process as a continuous + iterative cycle. (EU AI ACT Ref: Subcontrol 19.1) + + {activeSection === "Overview" && ( + + + + )} + {["Evidence", "Auditor Feedback"].includes(activeSection) && ( + + )} + + + + + + + + + + + ); +}; + +export default CustomModal; diff --git a/Clients/src/presentation/components/Table/index.tsx b/Clients/src/presentation/components/Table/index.tsx index 680094bb..3028de6c 100644 --- a/Clients/src/presentation/components/Table/index.tsx +++ b/Clients/src/presentation/components/Table/index.tsx @@ -53,11 +53,13 @@ const BasicTable = ({ paginated, reversed, table, + onRowClick, }: { data: TableData; - paginated: boolean; - reversed: boolean; + paginated: any; + reversed: any; table: any; + onRowClick?: (rowId: number) => void; }) => { const DEFAULT_ROWS_PER_PAGE = 5; const theme = useTheme(); @@ -98,7 +100,7 @@ const BasicTable = ({ if (!data || !data.cols || !data.rows) { return
No data
; - } + } const getRange = () => { let start = page * rowsPerPage + 1; @@ -141,19 +143,26 @@ const BasicTable = ({ sx={{ textTransform: "capitalize", borderBottom: "1px solid #EEEEEE", - cursor: row.handleClick ? "pointer" : "default", + cursor: onRowClick ? "pointer" : "default", "&:hover": { backgroundColor: theme.palette.background.accent, }, }} key={row.id} - onClick={row.handleClick ? row.handleClick : null} + onClick={() => { + console.log(`Row clicked: ${row.id}`); + onRowClick && onRowClick(row.id); + }} > status icon {row.data.map((cell: any) => { - return {cell.data}; + return {cell.data} + ; })} ); diff --git a/Clients/src/presentation/pages/ComplianceTracker/complianceData.ts b/Clients/src/presentation/mocks/compliance.data.ts similarity index 90% rename from Clients/src/presentation/pages/ComplianceTracker/complianceData.ts rename to Clients/src/presentation/mocks/compliance.data.ts index 6d05db50..61717937 100644 --- a/Clients/src/presentation/pages/ComplianceTracker/complianceData.ts +++ b/Clients/src/presentation/mocks/compliance.data.ts @@ -1,6 +1,6 @@ -import Checked from "../../assets/icons/check-circle-green.svg"; -import Exclamation from "../../assets/icons/alert-circle-orange.svg"; +import Checked from "../../presentation/assets/icons/check-circle-green.svg"; +import Exclamation from "../../presentation/assets/icons/alert-circle-orange.svg"; export const complianceMetrics = [ @@ -24,7 +24,7 @@ export const complianceMetrics = [ export const complianceDetails = { cols: [ - { id: "icon", name: "" }, + { id: "icon", name: "icon" }, { id: "CONTROLS", name: "CONTROLS" }, { id: "OWNER", name: "OWNER" }, { id: "SUBCONTROLS", name: "SUBCONTROLS" }, diff --git a/Clients/src/presentation/pages/ComplianceTracker/index.tsx b/Clients/src/presentation/pages/ComplianceTracker/index.tsx index ee2061d2..fb949f18 100644 --- a/Clients/src/presentation/pages/ComplianceTracker/index.tsx +++ b/Clients/src/presentation/pages/ComplianceTracker/index.tsx @@ -1,36 +1,69 @@ import { useState } from "react"; import BasicTable from "../../../presentation/components/Table"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; +import CustomModal from "../../components/Modals/Controlpane"; import { Stack, useTheme, Box, Typography, - Select, - MenuItem, - FormControl, Toolbar, Container, AccordionSummary, Accordion, AccordionDetails, - SelectChangeEvent, } from "@mui/material"; +import { + complianceMetrics as metricData, + complianceDetails as detailsData, +} from "../../mocks/compliance.data"; -const Compliance = ({ complianceMetrics, complianceDetails }: any) => { +const Compliance = ({ + complianceMetrics = metricData, + complianceDetails = detailsData, +}: any) => { const theme = useTheme(); const { spacing, shape, palette } = theme; - const [dropDown, setDropDown] = useState("ChatBot AI"); + + // State to manage accordion expansion const [expanded, setExpanded] = useState(false); + // State to manage modal open/close + const [isModalOpen, setIsModalOpen] = useState(false); + + // State to manage the selected row for modal content + const [selectedRow, setSelectedRow] = useState(null); + + const selectedRowData = complianceDetails.rows.find( + (row: any) => row.id === selectedRow + ); + + const acdSumDetails = [ + { + summaryId: "panel1", + summaryTitle: "1.1 Compliance with Requirements for High-Risk AI Systems", + }, + { + summaryId: "panel2", + summaryTitle: + "1.2 Transparency Obligations for Providers and Deployers of Certain AI Systems", + }, + ]; + const handleAccordionChange = (panel: string) => { return (event: React.SyntheticEvent, isExpanded: boolean) => { setExpanded(isExpanded ? panel : false); }; }; - const handleDropDownChange = (event: SelectChangeEvent) => { - setDropDown(event.target.value as string); + const handleRowClick = (id: number) => { + setSelectedRow(id); + setIsModalOpen(true); + }; + + const handleConfirm = () => { + console.log("Confirmed action for row:", selectedRow); + setIsModalOpen(false); // Close the modal after confirming }; const renderAccordion = (id: string, title: string, content: any) => ( @@ -38,10 +71,10 @@ const Compliance = ({ complianceMetrics, complianceDetails }: any) => { expanded={expanded === id} onChange={handleAccordionChange(id)} sx={{ - mt: spacing(4.5), + mt: spacing(4.5), border: "2px solid", borderColor: "#eaecf0", - width: "100%", + width: "100%", marginLeft: spacing(0.75), borderRadius: theme.shape.borderRadius, overflow: "hidden", @@ -68,7 +101,10 @@ const Compliance = ({ complianceMetrics, complianceDetails }: any) => { flexDirection: "row-reverse", }} > - + {title} @@ -80,41 +116,11 @@ const Compliance = ({ complianceMetrics, complianceDetails }: any) => { - - - Currently viewing project: - - - - - { sx={{ flexGrow: 1, position: "absolute", - top: spacing(2.5), + top: spacing(2.5), fontSize: "18px", fontWeight: 600, color: "#1A1919", @@ -135,7 +141,7 @@ const Compliance = ({ complianceMetrics, complianceDetails }: any) => { sx={{ display: "flex", justifyContent: "flex-start", - gap: spacing(18), + gap: spacing(18), mt: spacing(1), paddingLeft: spacing(0.75), }} @@ -144,8 +150,8 @@ const Compliance = ({ complianceMetrics, complianceDetails }: any) => { { { {renderAccordion( - "panel1", - "1.1 Compliance with Requirements for High-Risk AI Systems", + acdSumDetails[0].summaryId, + acdSumDetails[0].summaryTitle, )} {renderAccordion( - "panel2", - "1.2 Transparency Obligations for Providers and Deployers of Certain AI Systems", + acdSumDetails[1].summaryId, + acdSumDetails[1].summaryTitle, )} - {/* */} + {/* Render the modal and pass the state */} + {selectedRow !== null && ( + + )} ); From d04cb119a4768a8ecac3e84574b5850e28a199ec Mon Sep 17 00:00:00 2001 From: Melina Pashna Date: Mon, 30 Sep 2024 23:36:14 -0700 Subject: [PATCH 3/8] shadow and hover disables --- .../components/Modals/Controlpane/index.tsx | 31 +++++++++++++------ 1 file changed, 22 insertions(+), 9 deletions(-) diff --git a/Clients/src/presentation/components/Modals/Controlpane/index.tsx b/Clients/src/presentation/components/Modals/Controlpane/index.tsx index 965eda2f..d4bd49c2 100644 --- a/Clients/src/presentation/components/Modals/Controlpane/index.tsx +++ b/Clients/src/presentation/components/Modals/Controlpane/index.tsx @@ -49,17 +49,21 @@ const CustomModal: React.FC = ({ fontWeight: 500, boxShadow: "none", textTransform: "none", + "&:hover": { + boxShadow: "none", + }, }; const buttonStyle = { - marginRight: 1, - borderRadius: theme.shape.borderRadius, - backgroundColor: "#4C7DE7", - width: 173, - height: 34, fontSize: 13, - fontWeight: 400, - textTransform: "none", + textTransform: "capitalize", + backgroundColor: "#4C7DE7", + boxShadow: "none", + borderRadius: "4px", + border: "1px solid #175CD3", + "&:hover": { + boxShadow: "none", + }, }; const getVariant = (activeSection: string, section: string) => { @@ -117,6 +121,7 @@ const CustomModal: React.FC = ({ @@ -189,10 +200,11 @@ const CustomModal: React.FC = ({ variant="contained" onClick={() => console.log("Next Subcontrol clicked")} sx={buttonStyle} + disableRipple > Next Subcontrol -> - + From 1d5ede8b0ddf167c621ba91f23acf6052ab31be3 Mon Sep 17 00:00:00 2001 From: Melina Pashna Date: Tue, 1 Oct 2024 02:25:02 -0700 Subject: [PATCH 4/8] Fixed Formatting issues in ComplianceFeedback --- .../ComplianceFeedback/ComplianceFeedback.tsx | 110 ++++++++++++++---- 1 file changed, 90 insertions(+), 20 deletions(-) diff --git a/Clients/src/presentation/components/Modals/ComplianceFeedback/ComplianceFeedback.tsx b/Clients/src/presentation/components/Modals/ComplianceFeedback/ComplianceFeedback.tsx index 180cd890..e93e5586 100644 --- a/Clients/src/presentation/components/Modals/ComplianceFeedback/ComplianceFeedback.tsx +++ b/Clients/src/presentation/components/Modals/ComplianceFeedback/ComplianceFeedback.tsx @@ -1,5 +1,5 @@ import { Box, Tooltip, Typography } from "@mui/material"; -import React, { useState } from "react"; +import React, { useRef, useState } from "react"; import { FormatBold, FormatItalic, @@ -19,15 +19,24 @@ const AuditorFeedback: React.FC = React.memo( ({ activeSection }) => { const [text, setText] = useState(""); const [file, setFile] = useState(null); + const [bold, setBold] = useState(false); + const [italic, setItalic] = useState(false); + const [bulleted, setBulleted] = useState(false); + const [numbered, setNumbered] = useState(false); + const fileInputRef = useRef(null); + + const handleFieldChange = (e: any) => { + setText(e.target.value); + }; const applyFormatting = (type: string) => { let updatedText = text; switch (type) { case "bold": - updatedText = `**${text}**`; + setBold(!bold); // Toggle bold state break; case "italic": - updatedText = `*${text}*`; + setItalic(!italic); // Toggle italic state break; case "uppercase": updatedText = text.toUpperCase(); @@ -36,16 +45,40 @@ const AuditorFeedback: React.FC = React.memo( updatedText = text.toLowerCase(); break; case "bullets": - updatedText = text - .split("\n") - .map((line) => `• ${line}`) - .join("\n"); + if (bulleted) { + // Remove bullet points if active + updatedText = text + .split("\n") + .map((line) => line.replace(/^•\s/, "")) // Remove bullet point if it exists + .join("\n"); + setBulleted(false); + } else { + // Add bullet points and remove numbering if active + updatedText = text + .split("\n") + .map((line) => `• ${line.replace(/^\d+\.\s/, "")}`) // Remove number if exists, add bullet + .join("\n"); + setBulleted(true); + setNumbered(false); // Disable numbered list if active + } break; case "numbers": - updatedText = text - .split("\n") - .map((line, index) => `${index + 1}. ${line}`) - .join("\n"); + if (numbered) { + // Remove numbers if active + updatedText = text + .split("\n") + .map((line) => line.replace(/^\d+\.\s/, "")) // Remove numbered prefix if it exists + .join("\n"); + setNumbered(false); + } else { + // Add numbers and remove bullets if active + updatedText = text + .split("\n") + .map((line, index) => `${index + 1}. ${line.replace(/^•\s/, "")}`) // Remove bullet if exists, add number + .join("\n"); + setNumbered(true); + setBulleted(false); // Disable bullet list if active + } break; default: break; @@ -59,6 +92,10 @@ const AuditorFeedback: React.FC = React.memo( } }; + const UploadFile = () => { + fileInputRef.current?.click(); + }; + return ( @@ -69,56 +106,82 @@ const AuditorFeedback: React.FC = React.memo( - applyFormatting("bold")}> + applyFormatting("bold")} disableRipple> - applyFormatting("italic")}> + applyFormatting("italic")} disableRipple> - applyFormatting("uppercase")}> + applyFormatting("uppercase")} + disableRipple + > - applyFormatting("lowercase")}> + applyFormatting("lowercase")} + disableRipple + > - applyFormatting("bullets")}> + applyFormatting("bullets")} + disableRipple + color={bulleted ? "primary" : "default"} // Visual indicator for toggle + > - applyFormatting("numbers")}> + applyFormatting("numbers")} + disableRipple + color={numbered ? "primary" : "default"} // Visual indicator for toggle + > + + {/* Text Field */} handleFieldChange(e)} type="description" sx={{ height: "50px", "& .MuiOutlinedInput-root": { height: "161px", + fontWeight: bold ? "bold" : "normal", // Apply bold + fontStyle: italic ? "italic" : "normal", // Apply italic }, "& fieldset": { - borderTop: "none", + borderTop: "#c4c4c4", + borderRadius: "0 0 0 0", }, marginBottom: 30, + "& .MuiOutlinedInput-root.Mui-focused fieldset": { + border: "solid 1px", + borderColor: "#c4c4c4", + }, }} /> + {/* File Upload */} = React.memo( borderColor: "#D0D5DD", width: 472, alignItems: "center", + cursor: "pointer", }} + onClick={UploadFile} > = React.memo( alt="Upload" style={{ height: 19, width: 20 }} /> - + From e28ef281cc9563252a997a2c7a916de52d43bd9f Mon Sep 17 00:00:00 2001 From: Melina Pashna Date: Tue, 1 Oct 2024 11:46:23 -0700 Subject: [PATCH 5/8] Fixed some padding issues --- .../components/Inputs/Dropdowns/index.tsx | 6 +- .../pages/ComplianceTracker/index.tsx | 101 ++++++++++-------- 2 files changed, 62 insertions(+), 45 deletions(-) diff --git a/Clients/src/presentation/components/Inputs/Dropdowns/index.tsx b/Clients/src/presentation/components/Inputs/Dropdowns/index.tsx index 1bd9d0f3..97afaec7 100644 --- a/Clients/src/presentation/components/Inputs/Dropdowns/index.tsx +++ b/Clients/src/presentation/components/Inputs/Dropdowns/index.tsx @@ -106,7 +106,7 @@ const DropDowns = () => { > Implementation details: - + { height: 73, borderRadius: theme.shape.borderRadius, "& .MuiInputBase-root": { - height: "73px", + height: "73px", }, "& .MuiOutlinedInput-input": { - padding: "10px", + paddingTop: '20px', }, }} > diff --git a/Clients/src/presentation/pages/ComplianceTracker/index.tsx b/Clients/src/presentation/pages/ComplianceTracker/index.tsx index fb949f18..e8bd9c4c 100644 --- a/Clients/src/presentation/pages/ComplianceTracker/index.tsx +++ b/Clients/src/presentation/pages/ComplianceTracker/index.tsx @@ -63,53 +63,62 @@ const Compliance = ({ const handleConfirm = () => { console.log("Confirmed action for row:", selectedRow); - setIsModalOpen(false); // Close the modal after confirming + setIsModalOpen(false); }; const renderAccordion = (id: string, title: string, content: any) => ( - - - } - aria-controls={`${id}-content`} - id={`${id}-header`} + + - + } + aria-controls={`${id}-content`} + id={`${id}-header`} + sx={{ + bgcolor: "#FAFAFA", + padding: spacing(5), + flexDirection: "row-reverse", + }} > - {title} - - - {content} - + + {title} + + + {content} + + ); return ( @@ -141,16 +150,23 @@ const Compliance = ({ sx={{ display: "flex", justifyContent: "flex-start", - gap: spacing(18), + gap: spacing(20), mt: spacing(1), paddingLeft: spacing(0.75), + "& .MuiAccordion-root": { + boxShadow: "none", // No shadow effect + }, + "& .MuiAccordion-root.Mui-expanded": { + margin: 0, + padding: 0, // Prevent margin movement + }, }} > {complianceMetrics.map((item: any) => ( ))} + Date: Wed, 2 Oct 2024 22:56:35 -0700 Subject: [PATCH 6/8] tiptap integration --- Clients/package-lock.json | 721 ++++++++++++++++-- Clients/package.json | 4 +- .../components/Inputs/Dropdowns/index.tsx | 169 ++-- .../ComplianceFeedback/ComplianceFeedback.tsx | 135 ++-- .../components/Modals/Controlpane/index.tsx | 6 +- 5 files changed, 825 insertions(+), 210 deletions(-) diff --git a/Clients/package-lock.json b/Clients/package-lock.json index 313ea637..844565f6 100644 --- a/Clients/package-lock.json +++ b/Clients/package-lock.json @@ -11,13 +11,15 @@ "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@fontsource/roboto": "^5.1.0", - "@mui/icons-material": "^6.1.0", + "@mui/icons-material": "^6.1.2", "@mui/lab": "^6.0.0-beta.10", "@mui/material": "^6.1.1", "@mui/styled-engine-sc": "^6.1.0", "@mui/x-date-pickers": "^7.18.0", "@reduxjs/toolkit": "^2.2.7", "@svgr/rollup": "^8.1.0", + "@tiptap/react": "^2.8.0", + "@tiptap/starter-kit": "^2.8.0", "dayjs": "^1.11.13", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -2877,20 +2879,18 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "6.1.1", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.1.tgz", - "integrity": "sha512-VdQC1tPIIcZAnf62L2M1eQif0x2vlKg3YK4kGYbtijSH4niEgI21GnstykW1vQIs+Bc6L+Hua2GATYVjilJ22A==", - "license": "MIT", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.2.tgz", + "integrity": "sha512-1oE4U38/TtzLWRYWEm/m70dUbpcvBx0QvDVg6NtpOmSNQC1Mbx0X/rNvYDdZnn8DIsAiVQ+SZ3am6doSswUQ4g==", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" } }, "node_modules/@mui/icons-material": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.0.tgz", - "integrity": "sha512-HxfB0jxwiMTYMN8gAnYn3avbF1aDrqBEuGIj6JDQ3YkLl650E1Wy8AIhwwyP47wdrv0at9aAR0iOO6VLb74A9w==", - "license": "MIT", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.2.tgz", + "integrity": "sha512-7NNcjW5JoT9jHagrVbARA1o41vQY2xezDamtke+mEKKZmsJyejfRBOacSrPDfjZQ//lyhIjNKyzAwisxYJR47w==", "dependencies": { "@babel/runtime": "^7.25.6" }, @@ -2902,7 +2902,7 @@ "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@mui/material": "^6.1.0", + "@mui/material": "^6.1.2", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, @@ -2957,16 +2957,15 @@ } }, "node_modules/@mui/material": { - "version": "6.1.1", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.1.tgz", - "integrity": "sha512-b+eULldTqtqTCbN++2BtBWCir/1LwEYw+2mIlOt2GiEUh1EBBw4/wIukGKKNt3xrCZqRA80yLLkV6tF61Lq3cA==", - "license": "MIT", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.2.tgz", + "integrity": "sha512-5TtHeAVX9D5d2LYfB1GAUn29BcVETVsrQ76Dwb2SpAfQGW3JVy4deJCAd0RrIkI3eEUrsl0E4xuBdreszxdTTg==", "dependencies": { "@babel/runtime": "^7.25.6", - "@mui/core-downloads-tracker": "^6.1.1", - "@mui/system": "^6.1.1", + "@mui/core-downloads-tracker": "^6.1.2", + "@mui/system": "^6.1.2", "@mui/types": "^7.2.17", - "@mui/utils": "^6.1.1", + "@mui/utils": "^6.1.2", "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.11", "clsx": "^2.1.1", @@ -2985,7 +2984,7 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@mui/material-pigment-css": "^6.1.1", + "@mui/material-pigment-css": "^6.1.2", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -3006,13 +3005,12 @@ } }, "node_modules/@mui/private-theming": { - "version": "6.1.1", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.1.tgz", - "integrity": "sha512-JlrjIdhyZUtewtdAuUsvi3ZnO0YS49IW4Mfz19ZWTlQ0sDGga6LNPVwHClWr2/zJK2we2BQx9/i8M32rgKuzrg==", - "license": "MIT", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.2.tgz", + "integrity": "sha512-S8WcjZdNdi++8UhrrY8Lton5h/suRiQexvdTfdcPAlbajlvgM+kx+uJstuVIEyTb3gMkxzIZep87knZ0tqcR0g==", "dependencies": { "@babel/runtime": "^7.25.6", - "@mui/utils": "^6.1.1", + "@mui/utils": "^6.1.2", "prop-types": "^15.8.1" }, "engines": { @@ -3033,10 +3031,9 @@ } }, "node_modules/@mui/styled-engine": { - "version": "6.1.1", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.1.tgz", - "integrity": "sha512-HJyIoMpFb11fnHuRtUILOXgq6vj4LhIlE8maG4SwP/W+E5sa7HFexhnB3vOMT7bKys4UKNxhobC8jwWxYilGsA==", - "license": "MIT", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.2.tgz", + "integrity": "sha512-uKOfWkR23X39xj7th2nyTcCHqInTAXtUnqD3T5qRVdJcOPvu1rlgTleTwJC/FJvWZJBU6ieuTWDhbcx5SNViHQ==", "dependencies": { "@babel/runtime": "^7.25.6", "@emotion/cache": "^11.13.1", @@ -3088,16 +3085,15 @@ } }, "node_modules/@mui/system": { - "version": "6.1.1", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.1.tgz", - "integrity": "sha512-PaYsCz2tUOcpu3T0okDEsSuP/yCDIj9JZ4Tox1JovRSKIjltHpXPsXZSGr3RiWdtM1MTQMFMCZzu0+CKbyy+Kw==", - "license": "MIT", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.2.tgz", + "integrity": "sha512-mzW7F1ZMIYS1aLON48Nrk9c65OrVEVQ+R4lUcTWs1lCSul0VGK23eo4dmY0NX5PS7Oe4xz3P5B9tQZZ7SYgxcg==", "dependencies": { "@babel/runtime": "^7.25.6", - "@mui/private-theming": "^6.1.1", - "@mui/styled-engine": "^6.1.1", + "@mui/private-theming": "^6.1.2", + "@mui/styled-engine": "^6.1.2", "@mui/types": "^7.2.17", - "@mui/utils": "^6.1.1", + "@mui/utils": "^6.1.2", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1" @@ -3142,14 +3138,13 @@ } }, "node_modules/@mui/utils": { - "version": "6.1.1", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.1.tgz", - "integrity": "sha512-HlRrgdJSPbYDXPpoVMWZV8AE7WcFtAk13rWNWAEVWKSanzBBkymjz3km+Th/Srowsh4pf1fTSP1B0L116wQBYw==", - "license": "MIT", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.2.tgz", + "integrity": "sha512-6+B1YZ8cCBWD1fc3RjqpclF9UA0MLUiuXhyCO+XowD/Z2ku5IlxeEhHHlgglyBWFGMu4kib4YU3CDsG5/zVjJQ==", "dependencies": { "@babel/runtime": "^7.25.6", "@mui/types": "^7.2.17", - "@types/prop-types": "^15.7.12", + "@types/prop-types": "^15.7.13", "clsx": "^2.1.1", "prop-types": "^15.8.1", "react-is": "^18.3.1" @@ -3389,6 +3384,11 @@ } } }, + "node_modules/@remirror/core-constants": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-3.0.0.tgz", + "integrity": "sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==" + }, "node_modules/@remix-run/router": { "version": "1.19.2", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz", @@ -4188,6 +4188,375 @@ "@swc/counter": "^0.1.3" } }, + "node_modules/@tiptap/core": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.8.0.tgz", + "integrity": "sha512-xsqDI4BNzYRWRtBq7+/38ThhqEr7uG9Njip1x+9/wgR3vWPBFnBkYJTz6jSxS35NRE6BSnERm4/B/vrLuY1Hdw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/pm": "^2.7.0" + } + }, + "node_modules/@tiptap/extension-blockquote": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-2.8.0.tgz", + "integrity": "sha512-m3CKrOIvV7fY1Ak2gYf5LkKiz6AHxHpg6wxfVaJvdBqXgLyVtHo552N+A4oSHOSRbB4AG9EBQ2NeBM8cdEQ4MA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0" + } + }, + "node_modules/@tiptap/extension-bold": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-2.8.0.tgz", + "integrity": "sha512-U1YkZBxDkSLNvPNiqxB5g42IeJHr27C7zDb/yGQN2xL4UBeg4O9xVhCFfe32f6tLwivSL0dar4ScElpaCJuqow==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0" + } + }, + "node_modules/@tiptap/extension-bubble-menu": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.8.0.tgz", + "integrity": "sha512-swg+myJPN60LduQvLMF4hVBqP5LOIN01INZBzBI8egz8QufqtSyRCgXl7Xcma0RT5xIXnZSG9XOqNFf2rtkjKA==", + "dependencies": { + "tippy.js": "^6.3.7" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0", + "@tiptap/pm": "^2.7.0" + } + }, + "node_modules/@tiptap/extension-bullet-list": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-2.8.0.tgz", + "integrity": "sha512-H4O2X0ozbc/ce9/XF1H98sqWVUdtt7jzy7hMBunwmY8ZxI4dHtcRkeg81CZbpKTqOqRrMCLWjE3M2tgiDXrDkA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0", + "@tiptap/extension-list-item": "^2.7.0", + "@tiptap/extension-text-style": "^2.7.0" + } + }, + "node_modules/@tiptap/extension-code": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-2.8.0.tgz", + "integrity": "sha512-VSFn3sFF6qPpOGkXFhik8oYRH5iByVJpFEFd/duIEftmS0MdPzkbSItOpN3mc9xsJ5dCX80LYaResSj5hr5zkA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0" + } + }, + "node_modules/@tiptap/extension-code-block": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-2.8.0.tgz", + "integrity": "sha512-POuA5Igx+Dto0DTazoBFAQTj/M/FCdkqRVD9Uhsxhv49swPyANTJRr05vgbgtHB+NDDsZfCawVh7pI0IAD/O0w==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0", + "@tiptap/pm": "^2.7.0" + } + }, + "node_modules/@tiptap/extension-document": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-2.8.0.tgz", + "integrity": "sha512-mp7Isx1sVc/ifeW4uW/PexGQ9exN3NRUOebSpnLfqXeWYk4y1RS1PA/3+IHkOPVetbnapgPjFx/DswlCP3XLjA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0" + } + }, + "node_modules/@tiptap/extension-dropcursor": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-2.8.0.tgz", + "integrity": "sha512-rAFvx44YuT6dtS1c+ALw0ROAGI16l5L1HxquL4hR1gtxDcTieST5xhw5bkshXlmrlfotZXPrhokzqA7qjhZtJw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0", + "@tiptap/pm": "^2.7.0" + } + }, + "node_modules/@tiptap/extension-floating-menu": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-2.8.0.tgz", + "integrity": "sha512-H4QT61CrkLqisnGGC7zgiYmsl2jXPHl89yQCbdlkQN7aw11H7PltcJS2PJguL0OrRVJS/Mv/VTTUiMslmsEV5g==", + "dependencies": { + "tippy.js": "^6.3.7" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0", + "@tiptap/pm": "^2.7.0" + } + }, + "node_modules/@tiptap/extension-gapcursor": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-2.8.0.tgz", + "integrity": "sha512-Be1LWCmvteQInOnNVN+HTqc1XWsj1bCl+Q7et8qqNjtGtTaCbdCp8ppcH1SKJxNTM/RLUtPyJ8FDgOTj51ixCA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0", + "@tiptap/pm": "^2.7.0" + } + }, + "node_modules/@tiptap/extension-hard-break": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-2.8.0.tgz", + "integrity": "sha512-vqiIfviNiCmy/pJTHuDSCAGL2O4QDEdDmAvGJu8oRmElUrnlg8DbJUfKvn6DWQHNSQwRb+LDrwWlzAYj1K9u6A==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0" + } + }, + "node_modules/@tiptap/extension-heading": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-2.8.0.tgz", + "integrity": "sha512-4inWgrTPiqlivPmEHFOM5ck2UsmOsbKKPtqga6bALvWPmCv24S6/EBwFp8Jz4YABabXDnkviihmGu0LpP9D69w==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0" + } + }, + "node_modules/@tiptap/extension-history": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-history/-/extension-history-2.8.0.tgz", + "integrity": "sha512-u5YS0J5Egsxt8TUWMMAC3QhPZaak+IzQeyHch4gtqxftx96tprItY7AD/A3pGDF2uCSnN+SZrk6yVexm6EncDw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0", + "@tiptap/pm": "^2.7.0" + } + }, + "node_modules/@tiptap/extension-horizontal-rule": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.8.0.tgz", + "integrity": "sha512-Sn/MI8WVFBoIYSIHA9NJryJIyCEzZdRysau8pC5TFnfifre0QV1ksPz2bgF+DyCD69ozQiRdBBHDEwKe47ZbfQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0", + "@tiptap/pm": "^2.7.0" + } + }, + "node_modules/@tiptap/extension-italic": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-2.8.0.tgz", + "integrity": "sha512-PwwSE2LTYiHI47NJnsfhBmPiLE8IXZYqaSoNPU6flPrk1KxEzqvRI1joKZBmD9wuqzmHJ93VFIeZcC+kfwi8ZA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0" + } + }, + "node_modules/@tiptap/extension-list-item": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.8.0.tgz", + "integrity": "sha512-o7OGymGxB0B9x3x2prp3KBDYFuBYGc5sW69O672jk8G52DqhzzndgPnkk0qUn8nXAUKuDGbJmpmHVA2kagqnRg==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0" + } + }, + "node_modules/@tiptap/extension-ordered-list": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-2.8.0.tgz", + "integrity": "sha512-sCvNbcTS1+5QTTXwUPFa10vf5I1pr8sGcOTIh0G+a5ZkS5+6FxT12k7VLzPt39QyNbOi+77U2o4Xr4XyaEkfSg==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0", + "@tiptap/extension-list-item": "^2.7.0", + "@tiptap/extension-text-style": "^2.7.0" + } + }, + "node_modules/@tiptap/extension-paragraph": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-2.8.0.tgz", + "integrity": "sha512-XgxxNNbuBF48rAGwv7/s6as92/xjm/lTZIGTq9aG13ClUKFtgdel7C33SpUCcxg3cO2WkEyllXVyKUiauFZw/A==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0" + } + }, + "node_modules/@tiptap/extension-strike": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.8.0.tgz", + "integrity": "sha512-ezkDiXxQ3ME/dDMMM7tAMkKRi6UWw7tIu+Mx7Os0z8HCGpVBk1gFhLlhEd8I5rJaPZr4tK1wtSehMA9bscFGQw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0" + } + }, + "node_modules/@tiptap/extension-text": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.8.0.tgz", + "integrity": "sha512-EDAdFFzWOvQfVy7j3qkKhBpOeE5thkJaBemSWfXI93/gMVc0ZCdLi24mDvNNgUHlT+RjlIoQq908jZaaxLKN2A==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0" + } + }, + "node_modules/@tiptap/extension-text-style": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-text-style/-/extension-text-style-2.8.0.tgz", + "integrity": "sha512-jJp0vcZ2Ty7RvIL0VU6dm1y+fTfXq1lN2GwtYzYM0ueFuESa+Qo8ticYOImyWZ3wGJGVrjn7OV9r0ReW0/NYkQ==", + "peer": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0" + } + }, + "node_modules/@tiptap/pm": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.8.0.tgz", + "integrity": "sha512-eMGpRooUMvKz/vOpnKKppApMSoNM325HxTdAJvTlVAmuHp5bOY5kyY1kfUlePRiVx1t1UlFcXs3kecFwkkBD3Q==", + "dependencies": { + "prosemirror-changeset": "^2.2.1", + "prosemirror-collab": "^1.3.1", + "prosemirror-commands": "^1.6.0", + "prosemirror-dropcursor": "^1.8.1", + "prosemirror-gapcursor": "^1.3.2", + "prosemirror-history": "^1.4.1", + "prosemirror-inputrules": "^1.4.0", + "prosemirror-keymap": "^1.2.2", + "prosemirror-markdown": "^1.13.0", + "prosemirror-menu": "^1.2.4", + "prosemirror-model": "^1.22.3", + "prosemirror-schema-basic": "^1.2.3", + "prosemirror-schema-list": "^1.4.1", + "prosemirror-state": "^1.4.3", + "prosemirror-tables": "^1.4.0", + "prosemirror-trailing-node": "^3.0.0", + "prosemirror-transform": "^1.10.0", + "prosemirror-view": "^1.33.10" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + } + }, + "node_modules/@tiptap/react": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/react/-/react-2.8.0.tgz", + "integrity": "sha512-o/aSCjO5Nu4MsNpTF+N1SzYzVQvvBiclmTOZX2E6usZ8jre5zmKfXHDSZnjGSRTK6z6kw5KW8wpjRQha03f9mg==", + "dependencies": { + "@tiptap/extension-bubble-menu": "^2.8.0", + "@tiptap/extension-floating-menu": "^2.8.0", + "@types/use-sync-external-store": "^0.0.6", + "fast-deep-equal": "^3", + "use-sync-external-store": "^1.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.7.0", + "@tiptap/pm": "^2.7.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + } + }, + "node_modules/@tiptap/react/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==" + }, + "node_modules/@tiptap/starter-kit": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-2.8.0.tgz", + "integrity": "sha512-r7UwaTrECkQoheWVZKFDqtL5tBx07x7IFT+prfgnsVlYFutGWskVVqzCDvD3BDmrg5PzeCWYZrQGlPaLib7tjg==", + "dependencies": { + "@tiptap/core": "^2.8.0", + "@tiptap/extension-blockquote": "^2.8.0", + "@tiptap/extension-bold": "^2.8.0", + "@tiptap/extension-bullet-list": "^2.8.0", + "@tiptap/extension-code": "^2.8.0", + "@tiptap/extension-code-block": "^2.8.0", + "@tiptap/extension-document": "^2.8.0", + "@tiptap/extension-dropcursor": "^2.8.0", + "@tiptap/extension-gapcursor": "^2.8.0", + "@tiptap/extension-hard-break": "^2.8.0", + "@tiptap/extension-heading": "^2.8.0", + "@tiptap/extension-history": "^2.8.0", + "@tiptap/extension-horizontal-rule": "^2.8.0", + "@tiptap/extension-italic": "^2.8.0", + "@tiptap/extension-list-item": "^2.8.0", + "@tiptap/extension-ordered-list": "^2.8.0", + "@tiptap/extension-paragraph": "^2.8.0", + "@tiptap/extension-strike": "^2.8.0", + "@tiptap/extension-text": "^2.8.0", + "@tiptap/pm": "^2.8.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + } + }, "node_modules/@trysound/sax": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", @@ -4209,6 +4578,25 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/linkify-it": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz", + "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==" + }, + "node_modules/@types/markdown-it": { + "version": "14.1.2", + "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz", + "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==", + "dependencies": { + "@types/linkify-it": "^5", + "@types/mdurl": "^2" + } + }, + "node_modules/@types/mdurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz", + "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==" + }, "node_modules/@types/node": { "version": "22.5.5", "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.5.tgz", @@ -4227,10 +4615,9 @@ "license": "MIT" }, "node_modules/@types/prop-types": { - "version": "15.7.12", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", - "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", - "license": "MIT" + "version": "15.7.13", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz", + "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==" }, "node_modules/@types/react": { "version": "18.3.5", @@ -5108,6 +5495,11 @@ "node": ">=10" } }, + "node_modules/crelt": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz", + "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==" + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -5654,7 +6046,6 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", - "dev": true, "license": "MIT" }, "node_modules/fast-glob": { @@ -6149,6 +6540,14 @@ "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", "license": "MIT" }, + "node_modules/linkify-it": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz", + "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==", + "dependencies": { + "uc.micro": "^2.0.0" + } + }, "node_modules/loader-runner": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz", @@ -6234,12 +6633,33 @@ "yallist": "^3.0.2" } }, + "node_modules/markdown-it": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz", + "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==", + "dependencies": { + "argparse": "^2.0.1", + "entities": "^4.4.0", + "linkify-it": "^5.0.0", + "mdurl": "^2.0.0", + "punycode.js": "^2.3.1", + "uc.micro": "^2.1.0" + }, + "bin": { + "markdown-it": "bin/markdown-it.mjs" + } + }, "node_modules/mdn-data": { "version": "2.0.30", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", "license": "CC0-1.0" }, + "node_modules/mdurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz", + "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==" + }, "node_modules/merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -6402,6 +6822,11 @@ "node": ">= 0.8.0" } }, + "node_modules/orderedmap": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz", + "integrity": "sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==" + }, "node_modules/p-limit": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", @@ -6579,6 +7004,183 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "license": "MIT" }, + "node_modules/prosemirror-changeset": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.2.1.tgz", + "integrity": "sha512-J7msc6wbxB4ekDFj+n9gTW/jav/p53kdlivvuppHsrZXCaQdVgRghoZbSS3kwrRyAstRVQ4/+u5k7YfLgkkQvQ==", + "dependencies": { + "prosemirror-transform": "^1.0.0" + } + }, + "node_modules/prosemirror-collab": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/prosemirror-collab/-/prosemirror-collab-1.3.1.tgz", + "integrity": "sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==", + "dependencies": { + "prosemirror-state": "^1.0.0" + } + }, + "node_modules/prosemirror-commands": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.6.0.tgz", + "integrity": "sha512-xn1U/g36OqXn2tn5nGmvnnimAj/g1pUx2ypJJIe8WkVX83WyJVC5LTARaxZa2AtQRwntu9Jc5zXs9gL9svp/mg==", + "dependencies": { + "prosemirror-model": "^1.0.0", + "prosemirror-state": "^1.0.0", + "prosemirror-transform": "^1.0.0" + } + }, + "node_modules/prosemirror-dropcursor": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.1.tgz", + "integrity": "sha512-M30WJdJZLyXHi3N8vxN6Zh5O8ZBbQCz0gURTfPmTIBNQ5pxrdU7A58QkNqfa98YEjSAL1HUyyU34f6Pm5xBSGw==", + "dependencies": { + "prosemirror-state": "^1.0.0", + "prosemirror-transform": "^1.1.0", + "prosemirror-view": "^1.1.0" + } + }, + "node_modules/prosemirror-gapcursor": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.2.tgz", + "integrity": "sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ==", + "dependencies": { + "prosemirror-keymap": "^1.0.0", + "prosemirror-model": "^1.0.0", + "prosemirror-state": "^1.0.0", + "prosemirror-view": "^1.0.0" + } + }, + "node_modules/prosemirror-history": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.4.1.tgz", + "integrity": "sha512-2JZD8z2JviJrboD9cPuX/Sv/1ChFng+xh2tChQ2X4bB2HeK+rra/bmJ3xGntCcjhOqIzSDG6Id7e8RJ9QPXLEQ==", + "dependencies": { + "prosemirror-state": "^1.2.2", + "prosemirror-transform": "^1.0.0", + "prosemirror-view": "^1.31.0", + "rope-sequence": "^1.3.0" + } + }, + "node_modules/prosemirror-inputrules": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.4.0.tgz", + "integrity": "sha512-6ygpPRuTJ2lcOXs9JkefieMst63wVJBgHZGl5QOytN7oSZs3Co/BYbc3Yx9zm9H37Bxw8kVzCnDsihsVsL4yEg==", + "dependencies": { + "prosemirror-state": "^1.0.0", + "prosemirror-transform": "^1.0.0" + } + }, + "node_modules/prosemirror-keymap": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.2.tgz", + "integrity": "sha512-EAlXoksqC6Vbocqc0GtzCruZEzYgrn+iiGnNjsJsH4mrnIGex4qbLdWWNza3AW5W36ZRrlBID0eM6bdKH4OStQ==", + "dependencies": { + "prosemirror-state": "^1.0.0", + "w3c-keyname": "^2.2.0" + } + }, + "node_modules/prosemirror-markdown": { + "version": "1.13.1", + "resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.13.1.tgz", + "integrity": "sha512-Sl+oMfMtAjWtlcZoj/5L/Q39MpEnVZ840Xo330WJWUvgyhNmLBLN7MsHn07s53nG/KImevWHSE6fEj4q/GihHw==", + "dependencies": { + "@types/markdown-it": "^14.0.0", + "markdown-it": "^14.0.0", + "prosemirror-model": "^1.20.0" + } + }, + "node_modules/prosemirror-menu": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.2.4.tgz", + "integrity": "sha512-S/bXlc0ODQup6aiBbWVsX/eM+xJgCTAfMq/nLqaO5ID/am4wS0tTCIkzwytmao7ypEtjj39i7YbJjAgO20mIqA==", + "dependencies": { + "crelt": "^1.0.0", + "prosemirror-commands": "^1.0.0", + "prosemirror-history": "^1.0.0", + "prosemirror-state": "^1.0.0" + } + }, + "node_modules/prosemirror-model": { + "version": "1.22.3", + "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.22.3.tgz", + "integrity": "sha512-V4XCysitErI+i0rKFILGt/xClnFJaohe/wrrlT2NSZ+zk8ggQfDH4x2wNK7Gm0Hp4CIoWizvXFP7L9KMaCuI0Q==", + "dependencies": { + "orderedmap": "^2.0.0" + } + }, + "node_modules/prosemirror-schema-basic": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.3.tgz", + "integrity": "sha512-h+H0OQwZVqMon1PNn0AG9cTfx513zgIG2DY00eJ00Yvgb3UD+GQ/VlWW5rcaxacpCGT1Yx8nuhwXk4+QbXUfJA==", + "dependencies": { + "prosemirror-model": "^1.19.0" + } + }, + "node_modules/prosemirror-schema-list": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.4.1.tgz", + "integrity": "sha512-jbDyaP/6AFfDfu70VzySsD75Om2t3sXTOdl5+31Wlxlg62td1haUpty/ybajSfJ1pkGadlOfwQq9kgW5IMo1Rg==", + "dependencies": { + "prosemirror-model": "^1.0.0", + "prosemirror-state": "^1.0.0", + "prosemirror-transform": "^1.7.3" + } + }, + "node_modules/prosemirror-state": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.3.tgz", + "integrity": "sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==", + "dependencies": { + "prosemirror-model": "^1.0.0", + "prosemirror-transform": "^1.0.0", + "prosemirror-view": "^1.27.0" + } + }, + "node_modules/prosemirror-tables": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.5.0.tgz", + "integrity": "sha512-VMx4zlYWm7aBlZ5xtfJHpqa3Xgu3b7srV54fXYnXgsAcIGRqKSrhiK3f89omzzgaAgAtDOV4ImXnLKhVfheVNQ==", + "dependencies": { + "prosemirror-keymap": "^1.1.2", + "prosemirror-model": "^1.8.1", + "prosemirror-state": "^1.3.1", + "prosemirror-transform": "^1.2.1", + "prosemirror-view": "^1.13.3" + } + }, + "node_modules/prosemirror-trailing-node": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-3.0.0.tgz", + "integrity": "sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ==", + "dependencies": { + "@remirror/core-constants": "3.0.0", + "escape-string-regexp": "^4.0.0" + }, + "peerDependencies": { + "prosemirror-model": "^1.22.1", + "prosemirror-state": "^1.4.2", + "prosemirror-view": "^1.33.8" + } + }, + "node_modules/prosemirror-transform": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.10.0.tgz", + "integrity": "sha512-9UOgFSgN6Gj2ekQH5CTDJ8Rp/fnKR2IkYfGdzzp5zQMFsS4zDllLVx/+jGcX86YlACpG7UR5fwAXiWzxqWtBTg==", + "dependencies": { + "prosemirror-model": "^1.21.0" + } + }, + "node_modules/prosemirror-view": { + "version": "1.34.3", + "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.34.3.tgz", + "integrity": "sha512-mKZ54PrX19sSaQye+sef+YjBbNu2voNwLS1ivb6aD2IRmxRGW64HU9B644+7OfJStGLyxvOreKqEgfvXa91WIA==", + "dependencies": { + "prosemirror-model": "^1.20.0", + "prosemirror-state": "^1.0.0", + "prosemirror-transform": "^1.1.0" + } + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -6589,6 +7191,14 @@ "node": ">=6" } }, + "node_modules/punycode.js": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz", + "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==", + "engines": { + "node": ">=6" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -6895,6 +7505,11 @@ "fsevents": "~2.3.2" } }, + "node_modules/rope-sequence": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz", + "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==" + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -7326,6 +7941,14 @@ "dev": true, "license": "MIT" }, + "node_modules/tippy.js": { + "version": "6.3.7", + "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", + "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", + "dependencies": { + "@popperjs/core": "^2.9.0" + } + }, "node_modules/to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -7418,6 +8041,11 @@ } } }, + "node_modules/uc.micro": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz", + "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==" + }, "node_modules/undici-types": { "version": "6.19.8", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz", @@ -7603,6 +8231,11 @@ } } }, + "node_modules/w3c-keyname": { + "version": "2.2.8", + "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz", + "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==" + }, "node_modules/watchpack": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz", diff --git a/Clients/package.json b/Clients/package.json index 3f7d72fc..9aa83917 100644 --- a/Clients/package.json +++ b/Clients/package.json @@ -13,13 +13,15 @@ "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@fontsource/roboto": "^5.1.0", - "@mui/icons-material": "^6.1.0", + "@mui/icons-material": "^6.1.2", "@mui/lab": "^6.0.0-beta.10", "@mui/material": "^6.1.1", "@mui/styled-engine-sc": "^6.1.0", "@mui/x-date-pickers": "^7.18.0", "@reduxjs/toolkit": "^2.2.7", "@svgr/rollup": "^8.1.0", + "@tiptap/react": "^2.8.0", + "@tiptap/starter-kit": "^2.8.0", "dayjs": "^1.11.13", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/Clients/src/presentation/components/Inputs/Dropdowns/index.tsx b/Clients/src/presentation/components/Inputs/Dropdowns/index.tsx index 97afaec7..832097fa 100644 --- a/Clients/src/presentation/components/Inputs/Dropdowns/index.tsx +++ b/Clients/src/presentation/components/Inputs/Dropdowns/index.tsx @@ -1,4 +1,4 @@ -import { Grid, Typography, useTheme } from "@mui/material"; +import { Grid, Stack, Typography, useTheme } from "@mui/material"; import { useState } from "react"; import Select from "../Select"; import DatePicker from "../Datepicker"; @@ -16,88 +16,91 @@ const DropDowns = () => { return ( <> - - - setApprover(e.target.value)} - items={[ - { _id: 10, name: "Option 1" }, - { _id: 20, name: "Option 2" }, - { _id: 30, name: "Option 3" }, - ]} - sx={inputStyles} - /> - - - setStatus(e.target.value)} + items={[ + { _id: 10, name: "Waiting" }, + { _id: 20, name: "In progress" }, + { _id: 30, name: "Done" }, + ]} + sx={inputStyles} + /> + + setRiskReview(e.target.value)} + items={[ + { _id: 10, name: "Acceptable risk" }, + { _id: 20, name: "Residual risk" }, + { _id: 30, name: "Unacceptable risk" }, + ]} + sx={inputStyles} + /> + {/* Second Row */} - - - setReviewer(e.target.value)} - items={[ - { _id: 10, name: "Option 1" }, - { _id: 20, name: "Option 2" }, - { _id: 30, name: "Option 3" }, - ]} - sx={inputStyles} - /> - - - - - + + setReviewer(e.target.value)} + items={[ + { _id: 10, name: "Option 1" }, + { _id: 20, name: "Option 2" }, + { _id: 30, name: "Option 3" }, + ]} + sx={inputStyles} + /> + + + { > Implementation details: - + { height: "73px", }, "& .MuiOutlinedInput-input": { - paddingTop: '20px', + paddingTop: "20px", }, }} > diff --git a/Clients/src/presentation/components/Modals/ComplianceFeedback/ComplianceFeedback.tsx b/Clients/src/presentation/components/Modals/ComplianceFeedback/ComplianceFeedback.tsx index e93e5586..f765b054 100644 --- a/Clients/src/presentation/components/Modals/ComplianceFeedback/ComplianceFeedback.tsx +++ b/Clients/src/presentation/components/Modals/ComplianceFeedback/ComplianceFeedback.tsx @@ -1,5 +1,7 @@ import { Box, Tooltip, Typography } from "@mui/material"; -import React, { useRef, useState } from "react"; +import React, { useState } from "react"; +import { useEditor, EditorContent } from "@tiptap/react"; +import StarterKit from "@tiptap/starter-kit"; import { FormatBold, FormatItalic, @@ -7,7 +9,6 @@ import { FormatListNumbered, HMobiledata, } from "@mui/icons-material"; -import Field from "../../Inputs/Field"; import { IconButton } from "@mui/material"; import CloudUpload from "../../../assets/icons/cloudUpload.svg"; @@ -17,83 +18,57 @@ interface AuditorFeedbackProps { const AuditorFeedback: React.FC = React.memo( ({ activeSection }) => { - const [text, setText] = useState(""); const [file, setFile] = useState(null); - const [bold, setBold] = useState(false); - const [italic, setItalic] = useState(false); const [bulleted, setBulleted] = useState(false); const [numbered, setNumbered] = useState(false); - const fileInputRef = useRef(null); - const handleFieldChange = (e: any) => { - setText(e.target.value); + const editor = useEditor({ + extensions: [StarterKit], + content: "", + autofocus: true, + }); + + const handleFileUpload = (e: React.ChangeEvent) => { + if (e.target.files && e.target.files[0]) { + setFile(e.target.files[0]); + } }; const applyFormatting = (type: string) => { - let updatedText = text; + if (!editor) return; + switch (type) { case "bold": - setBold(!bold); // Toggle bold state + editor.chain().focus().toggleBold().run(); break; case "italic": - setItalic(!italic); // Toggle italic state + editor.chain().focus().toggleItalic().run(); break; case "uppercase": - updatedText = text.toUpperCase(); + const uppercaseText = editor.getText().toUpperCase(); + editor.commands.setContent(uppercaseText); break; case "lowercase": - updatedText = text.toLowerCase(); + const lowercaseText = editor.getText().toLowerCase(); + editor.commands.setContent(lowercaseText); break; case "bullets": - if (bulleted) { - // Remove bullet points if active - updatedText = text - .split("\n") - .map((line) => line.replace(/^•\s/, "")) // Remove bullet point if it exists - .join("\n"); - setBulleted(false); - } else { - // Add bullet points and remove numbering if active - updatedText = text - .split("\n") - .map((line) => `• ${line.replace(/^\d+\.\s/, "")}`) // Remove number if exists, add bullet - .join("\n"); - setBulleted(true); - setNumbered(false); // Disable numbered list if active - } + editor.chain().focus().toggleBulletList().run(); + setBulleted(!bulleted); + setNumbered(false); break; case "numbers": - if (numbered) { - // Remove numbers if active - updatedText = text - .split("\n") - .map((line) => line.replace(/^\d+\.\s/, "")) // Remove numbered prefix if it exists - .join("\n"); - setNumbered(false); - } else { - // Add numbers and remove bullets if active - updatedText = text - .split("\n") - .map((line, index) => `${index + 1}. ${line.replace(/^•\s/, "")}`) // Remove bullet if exists, add number - .join("\n"); - setNumbered(true); - setBulleted(false); // Disable bullet list if active - } + editor.chain().focus().toggleOrderedList().run(); + setNumbered(!numbered); + setBulleted(false); break; default: break; } - setText(updatedText); - }; - - const handleFileUpload = (e: React.ChangeEvent) => { - if (e.target.files && e.target.files[0]) { - setFile(e.target.files[0]); - } }; const UploadFile = () => { - fileInputRef.current?.click(); + document.getElementById("file-upload")?.click(); }; return ( @@ -141,7 +116,7 @@ const AuditorFeedback: React.FC = React.memo( applyFormatting("bullets")} disableRipple - color={bulleted ? "primary" : "default"} // Visual indicator for toggle + color={bulleted ? "primary" : "default"} > @@ -150,36 +125,38 @@ const AuditorFeedback: React.FC = React.memo( applyFormatting("numbers")} disableRipple - color={numbered ? "primary" : "default"} // Visual indicator for toggle + color={numbered ? "primary" : "default"} > - {/* Text Field */} - handleFieldChange(e)} - type="description" - sx={{ - height: "50px", - "& .MuiOutlinedInput-root": { - height: "161px", - fontWeight: bold ? "bold" : "normal", // Apply bold - fontStyle: italic ? "italic" : "normal", // Apply italic - }, - "& fieldset": { - borderTop: "#c4c4c4", - borderRadius: "0 0 0 0", - }, - marginBottom: 30, - "& .MuiOutlinedInput-root.Mui-focused fieldset": { - border: "solid 1px", - borderColor: "#c4c4c4", - }, - }} - /> + + + + {/* File Upload */} = React.memo( diff --git a/Clients/src/presentation/components/Modals/Controlpane/index.tsx b/Clients/src/presentation/components/Modals/Controlpane/index.tsx index d4bd49c2..b01f5939 100644 --- a/Clients/src/presentation/components/Modals/Controlpane/index.tsx +++ b/Clients/src/presentation/components/Modals/Controlpane/index.tsx @@ -79,7 +79,7 @@ const CustomModal: React.FC = ({ top: "50%", left: "50%", transform: "translate(-50%, -50%)", - width: { xs: 300, md: 600, lg: 900 }, + width: { xs: 300, md: 600, lg: 816 }, height: 900, bgcolor: theme.palette.background.paper, border: `1px solid ${theme.palette.divider}`, @@ -157,7 +157,7 @@ const CustomModal: React.FC = ({ fontWeight: activeSection === "Auditor Feedback" ? "500" : 300, }} > - Auditor Feedback + Auditor feedback @@ -183,7 +183,7 @@ const CustomModal: React.FC = ({ )} - + Date: Fri, 4 Oct 2024 10:43:02 -0700 Subject: [PATCH 7/8] Conponentize tipTap and UI fixes --- .../components/Inputs/Dropdowns/index.tsx | 2 +- .../ComplianceFeedback/ComplianceFeedback.tsx | 245 ++++-------------- .../components/Modals/Controlpane/index.tsx | 38 ++- .../components/RichTextEditor/index.tsx | 147 +++++++++++ .../presentation/components/Table/index.css | 1 + .../pages/ComplianceTracker/index.tsx | 23 +- 6 files changed, 256 insertions(+), 200 deletions(-) create mode 100644 Clients/src/presentation/components/RichTextEditor/index.tsx diff --git a/Clients/src/presentation/components/Inputs/Dropdowns/index.tsx b/Clients/src/presentation/components/Inputs/Dropdowns/index.tsx index 832097fa..22c8360e 100644 --- a/Clients/src/presentation/components/Inputs/Dropdowns/index.tsx +++ b/Clients/src/presentation/components/Inputs/Dropdowns/index.tsx @@ -97,7 +97,7 @@ const DropDowns = () => { /> diff --git a/Clients/src/presentation/components/Modals/ComplianceFeedback/ComplianceFeedback.tsx b/Clients/src/presentation/components/Modals/ComplianceFeedback/ComplianceFeedback.tsx index f765b054..f1b796e3 100644 --- a/Clients/src/presentation/components/Modals/ComplianceFeedback/ComplianceFeedback.tsx +++ b/Clients/src/presentation/components/Modals/ComplianceFeedback/ComplianceFeedback.tsx @@ -1,206 +1,73 @@ -import { Box, Tooltip, Typography } from "@mui/material"; +import { Box, Typography, Tooltip, IconButton } from "@mui/material"; import React, { useState } from "react"; -import { useEditor, EditorContent } from "@tiptap/react"; -import StarterKit from "@tiptap/starter-kit"; -import { - FormatBold, - FormatItalic, - FormatListBulleted, - FormatListNumbered, - HMobiledata, -} from "@mui/icons-material"; -import { IconButton } from "@mui/material"; import CloudUpload from "../../../assets/icons/cloudUpload.svg"; +import RichTextEditor from "../../../components/RichTextEditor/index"; interface AuditorFeedbackProps { activeSection: string; } -const AuditorFeedback: React.FC = React.memo( - ({ activeSection }) => { - const [file, setFile] = useState(null); - const [bulleted, setBulleted] = useState(false); - const [numbered, setNumbered] = useState(false); +const AuditorFeedback: React.FC = ({ activeSection }) => { + const [file, setFile] = useState(null); - const editor = useEditor({ - extensions: [StarterKit], - content: "", - autofocus: true, - }); + const handleFileUpload = (e: React.ChangeEvent) => { + if (e.target.files && e.target.files[0]) { + setFile(e.target.files[0]); + } + }; - const handleFileUpload = (e: React.ChangeEvent) => { - if (e.target.files && e.target.files[0]) { - setFile(e.target.files[0]); - } - }; + const UploadFile = () => { + document.getElementById("file-upload")?.click(); + }; - const applyFormatting = (type: string) => { - if (!editor) return; + const handleContentChange = (content: string) => { + console.log("Updated content: ", content); + }; - switch (type) { - case "bold": - editor.chain().focus().toggleBold().run(); - break; - case "italic": - editor.chain().focus().toggleItalic().run(); - break; - case "uppercase": - const uppercaseText = editor.getText().toUpperCase(); - editor.commands.setContent(uppercaseText); - break; - case "lowercase": - const lowercaseText = editor.getText().toLowerCase(); - editor.commands.setContent(lowercaseText); - break; - case "bullets": - editor.chain().focus().toggleBulletList().run(); - setBulleted(!bulleted); - setNumbered(false); - break; - case "numbers": - editor.chain().focus().toggleOrderedList().run(); - setNumbered(!numbered); - setBulleted(false); - break; - default: - break; - } - }; + return ( + + + {activeSection === "Evidence" ? "Evidence:" : "Auditor Feedback:"} + - const UploadFile = () => { - document.getElementById("file-upload")?.click(); - }; + {/* Use the RichTextEditor component */} + - return ( - - - {activeSection === "Evidence" ? "Evidence:" : "Auditor Feedback:"} + {/* File Upload */} + + + You can also drag and drop, or click to upload a feedback. - - {/* Toolbar */} - - - applyFormatting("bold")} disableRipple> - - - - - applyFormatting("italic")} disableRipple> - - - - - applyFormatting("uppercase")} - disableRipple - > - - - - - applyFormatting("lowercase")} - disableRipple - > - - - - - applyFormatting("bullets")} - disableRipple - color={bulleted ? "primary" : "default"} - > - - - - - applyFormatting("numbers")} - disableRipple - color={numbered ? "primary" : "default"} - > - - - - - - - - - - - {/* File Upload */} - - - You can also drag and drop, or click to upload a feedback. - - - - Upload - - - - - - {file && ( - - Attached file: {file.name} - - )} + + + Upload + + + - ); - } -); + + {file && ( + + Attached file: {file.name} + + )} + + ); +}; export default AuditorFeedback; diff --git a/Clients/src/presentation/components/Modals/Controlpane/index.tsx b/Clients/src/presentation/components/Modals/Controlpane/index.tsx index b01f5939..831d7938 100644 --- a/Clients/src/presentation/components/Modals/Controlpane/index.tsx +++ b/Clients/src/presentation/components/Modals/Controlpane/index.tsx @@ -8,7 +8,9 @@ import { Box, Tabs, Tab, + IconButton, } from "@mui/material"; +import CloseIcon from '@mui/icons-material/Close'; import React, { useState } from "react"; import DropDowns from "../../Inputs/Dropdowns"; @@ -28,10 +30,16 @@ const CustomModal: React.FC = ({ title, }) => { const theme = useTheme(); - // State for the date input const [selectedTab, setSelectedTab] = useState(0); const [activeSection, setActiveSection] = useState("Overview"); + const extractNumberFromTitle = (title: string) => { + const match = title.match(/\d+/); + return match ? match[0] : "0"; + }; + + const titleNumber = extractNumberFromTitle(title); + const handleClose = () => setIsOpen(false); const handleSelectedTab = (event: React.SyntheticEvent, newValue: number) => { @@ -91,6 +99,18 @@ const CustomModal: React.FC = ({ }, }} > + + + + {title} @@ -100,7 +120,7 @@ const CustomModal: React.FC = ({ throughout the entire lifecycle of the high-risk AI system. - + = ({ textColor="primary" sx={{ justifyContent: "flex-start" }} > - - - - + + + + @@ -168,11 +188,11 @@ const CustomModal: React.FC = ({ fontWeight={600} sx={{ textAlign: "left", mb: 3 }} > - Subcontrol 19.1 + Subcontrol {titleNumber}.{selectedTab + 1} Plan and execute the risk management process as a continuous - iterative cycle. (EU AI ACT Ref: Subcontrol 19.1) + iterative cycle. (EU AI ACT Ref: Subcontrol {titleNumber}.{selectedTab + 1}) {activeSection === "Overview" && ( @@ -183,7 +203,7 @@ const CustomModal: React.FC = ({ )} - + void; +} + +const RichTextEditor: React.FC = ({ onContentChange }) => { + const [bulleted, setBulleted] = useState(false); + const [numbered, setNumbered] = useState(false); + + const editor = useEditor({ + extensions: [StarterKit], + content: "", + autofocus: true, + onUpdate({ editor }) { + if (onContentChange) { + onContentChange(editor.getHTML()); + } + }, + }); + + const applyFormatting = (type: string) => { + if (!editor) return; + + switch (type) { + case "bold": + editor.chain().focus().toggleBold().run(); + break; + case "italic": + editor.chain().focus().toggleItalic().run(); + break; + case "uppercase": + const uppercaseText = editor.getText().toUpperCase(); + editor.commands.setContent(uppercaseText); + break; + case "lowercase": + const lowercaseText = editor.getText().toLowerCase(); + editor.commands.setContent(lowercaseText); + break; + case "bullets": + editor.chain().focus().toggleBulletList().run(); + setBulleted(!bulleted); + setNumbered(false); + break; + case "numbers": + editor.chain().focus().toggleOrderedList().run(); + setNumbered(!numbered); + setBulleted(false); + break; + default: + break; + } + }; + + return ( + + {/* Toolbar */} + + + applyFormatting("bold")} disableRipple> + + + + + applyFormatting("italic")} disableRipple> + + + + + applyFormatting("uppercase")} disableRipple> + + + + + applyFormatting("lowercase")} disableRipple> + + + + + applyFormatting("bullets")} + disableRipple + color={bulleted ? "primary" : "default"} + > + + + + + applyFormatting("numbers")} + disableRipple + color={numbered ? "primary" : "default"} + > + + + + + + {/* Tiptap Editor */} + + + + + + + ); +}; + +export default RichTextEditor; diff --git a/Clients/src/presentation/components/Table/index.css b/Clients/src/presentation/components/Table/index.css index 411d2e19..0b74224b 100644 --- a/Clients/src/presentation/components/Table/index.css +++ b/Clients/src/presentation/components/Table/index.css @@ -131,3 +131,4 @@ padding-left: 12px; padding-right: 12px; } + diff --git a/Clients/src/presentation/pages/ComplianceTracker/index.tsx b/Clients/src/presentation/pages/ComplianceTracker/index.tsx index e8bd9c4c..1f479d75 100644 --- a/Clients/src/presentation/pages/ComplianceTracker/index.tsx +++ b/Clients/src/presentation/pages/ComplianceTracker/index.tsx @@ -90,6 +90,9 @@ const Compliance = ({ padding: 0, margin: 0, }, + "& .css-11dq6i3-MuiPaper-root-MuiTableContainer-root":{ + marginTop: 0, + } }} > - {content} + {content} ); From 9e4d5533e690ea44770c267f89d3312729bc73f7 Mon Sep 17 00:00:00 2001 From: Melina Pashna Date: Fri, 4 Oct 2024 11:31:32 -0700 Subject: [PATCH 8/8] accordion summary click height fix --- Clients/src/presentation/pages/ComplianceTracker/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/Clients/src/presentation/pages/ComplianceTracker/index.tsx b/Clients/src/presentation/pages/ComplianceTracker/index.tsx index 1f479d75..6f9a42fe 100644 --- a/Clients/src/presentation/pages/ComplianceTracker/index.tsx +++ b/Clients/src/presentation/pages/ComplianceTracker/index.tsx @@ -111,7 +111,11 @@ const Compliance = ({ padding: spacing(5), flexDirection: "row-reverse", height: '', - "& .MuiAccordionSummary-content":{ + "& .Mui-expanded":{ + marginTop: '12px', + marginBottom: '12px', + }, + "& .MuiAccordionSummary-root":{ marginTop: '12px', marginBottom: '12px', }