diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 84259995..a4443a66 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -11,8 +11,9 @@ "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@heroicons/react": "^2.2.0", - "@mui/icons-material": "^6.1.2", + "@mui/icons-material": "^6.1.9", "@mui/material": "^6.1.2", + "@mui/x-date-pickers": "^7.23.0", "@supabase/supabase-js": "^2.45.5", "axios": "^1.7.7", "pdfjs-dist": "^4.7.76", @@ -1858,13 +1859,13 @@ "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==" }, "node_modules/@emotion/cache": { - "version": "11.13.1", - "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz", - "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==", + "version": "11.13.5", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.5.tgz", + "integrity": "sha512-Z3xbtJ+UcK76eWkagZ1onvn/wAVb1GOMuR15s30Fm2wrMgC7jzpnO2JZXr4eujTTqoQFUrZIw/rT0c6Zzjca1g==", "dependencies": { "@emotion/memoize": "^0.9.0", "@emotion/sheet": "^1.4.0", - "@emotion/utils": "^1.4.0", + "@emotion/utils": "^1.4.2", "@emotion/weak-memoize": "^0.4.0", "stylis": "4.2.0" } @@ -1911,14 +1912,14 @@ } }, "node_modules/@emotion/serialize": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz", - "integrity": "sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==", + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz", + "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==", "dependencies": { "@emotion/hash": "^0.9.2", "@emotion/memoize": "^0.9.0", "@emotion/unitless": "^0.10.0", - "@emotion/utils": "^1.4.1", + "@emotion/utils": "^1.4.2", "csstype": "^3.0.2" } }, @@ -1963,9 +1964,9 @@ } }, "node_modules/@emotion/utils": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz", - "integrity": "sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==" + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz", + "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==" }, "node_modules/@emotion/weak-memoize": { "version": "0.4.0", @@ -3035,18 +3036,18 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "6.1.7", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.7.tgz", - "integrity": "sha512-POuIBi80BZBogQkG4PQKIGwy4QFwB+kOr+OI4k7Znh7LqMAIhwB9OC00l6M+w1GrZJYj3T8R5WX8G6QAIvoVEw==", + "version": "6.1.9", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.9.tgz", + "integrity": "sha512-TWqj7b1w5cmSz4H/uf+y2AHxAH4ldPR7D2bz0XVyn60GCAo/zRbRPx7cF8gTs/i7CiYeHzV6dtat0VpMwOtolw==", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" } }, "node_modules/@mui/icons-material": { - "version": "6.1.7", - "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.7.tgz", - "integrity": "sha512-RGzkeHNArIVy5ZQ12bq/8VYNeICEyngngsFskTJ/2hYKhIeIII3iRGtaZaSvLpXh7h3Fg3VKTulT+QU0w5K4XQ==", + "version": "6.1.9", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.9.tgz", + "integrity": "sha512-AzlhIT51rdjkZ/EcUV2dbhNkNSUHIqCnNoUxodpiTw8buyAUBd+qnxg5OBSuPpun/ZEdSSB8Q7Uyh6zqjiMsEQ==", "dependencies": { "@babel/runtime": "^7.26.0" }, @@ -3058,7 +3059,7 @@ "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@mui/material": "^6.1.7", + "@mui/material": "^6.1.9", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, @@ -3069,15 +3070,15 @@ } }, "node_modules/@mui/material": { - "version": "6.1.7", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.7.tgz", - "integrity": "sha512-KsjujQL/A2hLd1PV3QboF+W6SSL5QqH6ZlSuQoeYz9r69+TnyBFIevbYLxdjJcJmGBjigL5pfpn7hTGop+vhSg==", + "version": "6.1.9", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.9.tgz", + "integrity": "sha512-NwqIN0bdsgzSbZd5JFcC+2ez0XW/XNs8uiV2PDHrqQ4qf/FEasFJG1z6g8JbCN0YlTrHZekVb17X0Fv0qcYJfQ==", "dependencies": { "@babel/runtime": "^7.26.0", - "@mui/core-downloads-tracker": "^6.1.7", - "@mui/system": "^6.1.7", + "@mui/core-downloads-tracker": "^6.1.9", + "@mui/system": "^6.1.9", "@mui/types": "^7.2.19", - "@mui/utils": "^6.1.7", + "@mui/utils": "^6.1.9", "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.11", "clsx": "^2.1.1", @@ -3096,7 +3097,7 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@mui/material-pigment-css": "^6.1.7", + "@mui/material-pigment-css": "^6.1.9", "@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" @@ -3117,12 +3118,12 @@ } }, "node_modules/@mui/private-theming": { - "version": "6.1.7", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.7.tgz", - "integrity": "sha512-uLbfUSsug5K0LVkv0PI6Flste3le8+6WSL2omdTiYde93P89Qr7pKr8TA6d2yXfr+Bm+SvD8/fGnkaRwFkryuQ==", + "version": "6.1.9", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.9.tgz", + "integrity": "sha512-7aum/O1RquBYhfwL/7egDyl9GqJgPM6hoJDFFBbhF6Sgv9yI9v4w3ArKUkuVvR0CtVj4NXRVMKEioh1bjUzvuA==", "dependencies": { "@babel/runtime": "^7.26.0", - "@mui/utils": "^6.1.7", + "@mui/utils": "^6.1.9", "prop-types": "^15.8.1" }, "engines": { @@ -3143,13 +3144,13 @@ } }, "node_modules/@mui/styled-engine": { - "version": "6.1.7", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.7.tgz", - "integrity": "sha512-Ou4CxN7MQmwrfG1Pu6EYjPgPChQXxPDJrwgizLXlRPOad5qAq4gYXRuzrGQ2DfGjjwmJhjI8T6A0SeapAZPGig==", + "version": "6.1.9", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.9.tgz", + "integrity": "sha512-xynSLlJRxHLzSfQaiDjkaTx8LiFb9ByVa7aOdwFnTxGWFMY1F+mkXwAUY4jDDE+MAxkWxlzzQE0wOohnsxhdQg==", "dependencies": { "@babel/runtime": "^7.26.0", - "@emotion/cache": "^11.13.1", - "@emotion/serialize": "^1.3.2", + "@emotion/cache": "^11.13.5", + "@emotion/serialize": "^1.3.3", "@emotion/sheet": "^1.4.0", "csstype": "^3.1.3", "prop-types": "^15.8.1" @@ -3176,15 +3177,15 @@ } }, "node_modules/@mui/system": { - "version": "6.1.7", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.7.tgz", - "integrity": "sha512-qbMGgcC/FodpuRSfjXlEDdbNQaW++eATh0vNBcPUv2/YXSpReoOpoT9FhogxEBNks+aQViDXBRZKh6HX2fVmwg==", + "version": "6.1.9", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.9.tgz", + "integrity": "sha512-8x+RucnNp21gfFYsklCaZf0COXbv3+v0lrVuXONxvPEkESi2rwLlOi8UPJfcz6LxZOAX3v3oQ7qw18vnpgueRg==", "dependencies": { "@babel/runtime": "^7.26.0", - "@mui/private-theming": "^6.1.7", - "@mui/styled-engine": "^6.1.7", + "@mui/private-theming": "^6.1.9", + "@mui/styled-engine": "^6.1.9", "@mui/types": "^7.2.19", - "@mui/utils": "^6.1.7", + "@mui/utils": "^6.1.9", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1" @@ -3228,9 +3229,9 @@ } }, "node_modules/@mui/utils": { - "version": "6.1.7", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.7.tgz", - "integrity": "sha512-Gr7cRZxBoZ0BIa3Xqf/2YaUrBLyNPJvXPQH3OsD9WMZukI/TutibbQBVqLYpgqJn8pKSjbD50Yq2auG0wI1xOw==", + "version": "6.1.9", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.9.tgz", + "integrity": "sha512-N7uzBp7p2or+xanXn3aH2OTINC6F/Ru/U8h6amhRZEev8bJhKN86rIDIoxZZ902tj+09LXtH83iLxFMjMHyqNA==", "dependencies": { "@babel/runtime": "^7.26.0", "@mui/types": "^7.2.19", @@ -3256,6 +3257,90 @@ } } }, + "node_modules/@mui/x-date-pickers": { + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.23.0.tgz", + "integrity": "sha512-Db9ElibVYHluXLVsRLfFwlYkL6/3NNE5AosSZiTx+Gw7uix/Z3pdjyHeA3ab65fU1tCk08XHY0PU6LQFifYB2g==", + "dependencies": { + "@babel/runtime": "^7.25.7", + "@mui/utils": "^5.16.6 || ^6.0.0", + "@mui/x-internals": "7.23.0", + "@types/react-transition-group": "^4.4.11", + "clsx": "^2.1.1", + "prop-types": "^15.8.1", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.9.0", + "@emotion/styled": "^11.8.1", + "@mui/material": "^5.15.14 || ^6.0.0", + "@mui/system": "^5.15.14 || ^6.0.0", + "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0", + "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0", + "dayjs": "^1.10.7", + "luxon": "^3.0.2", + "moment": "^2.29.4", + "moment-hijri": "^2.1.2 || ^3.0.0", + "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "date-fns": { + "optional": true + }, + "date-fns-jalali": { + "optional": true + }, + "dayjs": { + "optional": true + }, + "luxon": { + "optional": true + }, + "moment": { + "optional": true + }, + "moment-hijri": { + "optional": true + }, + "moment-jalaali": { + "optional": true + } + } + }, + "node_modules/@mui/x-internals": { + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.23.0.tgz", + "integrity": "sha512-bPclKpqUiJYIHqmTxSzMVZi6MH51cQsn5U+8jskaTlo3J4QiMeCYJn/gn7YbeR9GOZFp8hetyHjoQoVHKRXCig==", + "dependencies": { + "@babel/runtime": "^7.25.7", + "@mui/utils": "^5.16.6 || ^6.0.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -4991,6 +5076,13 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/dayjs": { + "version": "1.11.13", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz", + "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==", + "optional": true, + "peer": true + }, "node_modules/debug": { "version": "4.3.7", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", diff --git a/frontend/package.json b/frontend/package.json index 6e4872a7..a0d3f6ee 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -14,8 +14,9 @@ "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@heroicons/react": "^2.2.0", - "@mui/icons-material": "^6.1.2", + "@mui/icons-material": "^6.1.9", "@mui/material": "^6.1.2", + "@mui/x-date-pickers": "^7.23.0", "@supabase/supabase-js": "^2.45.5", "axios": "^1.7.7", "pdfjs-dist": "^4.7.76", diff --git a/frontend/src/assets/labs-fishbones.png b/frontend/src/assets/labs-fishbones.png new file mode 100644 index 00000000..a4208b29 Binary files /dev/null and b/frontend/src/assets/labs-fishbones.png differ diff --git a/frontend/src/assets/pulses.png b/frontend/src/assets/pulses.png new file mode 100644 index 00000000..a4880d07 Binary files /dev/null and b/frontend/src/assets/pulses.png differ diff --git a/frontend/src/components/Buttons/CLButtons.jsx b/frontend/src/components/Buttons/CLButtons.jsx index 311ece25..096c953f 100644 --- a/frontend/src/components/Buttons/CLButtons.jsx +++ b/frontend/src/components/Buttons/CLButtons.jsx @@ -1,12 +1,12 @@ -import "./CLButtons.css"; +import "./CLButtons.css" -const DEFAULT_PRIMARY_CLASSNAME = "primary-variant-button"; -const DEFAULT_SECONDARY_CLASSNAME = "secondary-variant-button"; +const DEFAULT_PRIMARY_CLASSNAME = "primary-variant-button" +const DEFAULT_SECONDARY_CLASSNAME = "secondary-variant-button" -const DEFAULT_HEIGHT = "54px"; -const DEFAULT_WIDTH = "fit-content"; -const DEFAULT_TYPE = "button"; -const DEFAULT_ON_CLICK = () => {}; +const DEFAULT_HEIGHT = "54px" +const DEFAULT_WIDTH = "fit-content" +const DEFAULT_TYPE = "button" +const DEFAULT_ON_CLICK = () => {} /** * PRIMARY variant of the clinical logging button. @@ -21,12 +21,13 @@ export const CLButtonPrimary = ({ type = DEFAULT_TYPE, onClick = DEFAULT_ON_CLICK, }) => { + const updatedClassName = className ? DEFAULT_PRIMARY_CLASSNAME + " " + className - : DEFAULT_PRIMARY_CLASSNAME; + : DEFAULT_PRIMARY_CLASSNAME return ( - + + Cancel + + + + + + ); +} diff --git a/frontend/src/components/Modals/LogSavedSuccessModal/LogSavedSuccessModal.css b/frontend/src/components/Modals/LogSavedSuccessModal/LogSavedSuccessModal.css new file mode 100644 index 00000000..31c44935 --- /dev/null +++ b/frontend/src/components/Modals/LogSavedSuccessModal/LogSavedSuccessModal.css @@ -0,0 +1,89 @@ +.modal-content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 2rem; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + height: 380px; + width: 640px; + background-color: #FBFCFE; + border-radius: 20px; + box-shadow: 24; +} + +.save-icon-button { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + color: #F8F8F8; + gap: 4px; +} + +.close-modal-button { + position: absolute; + top: 40px; + left: 40px; + height: 40px; + width: 40px; + display: flex; + justify-content: center; + align-items: center; + background-color: transparent; + color: #244B94; + border-radius: 40px; +} + +.close-modal-button:hover { + background-color: rgb(219, 219, 219); +} + +.modal-description { + font-size: 24px; + font-weight: bold; + margin: 1rem; +} + +.log-saved-success-modal-divider { + width: 60%; +} + +.log-saved-success-modal-buttons-container { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 2rem; + gap: 20px; +} + +.see-log-history-button { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + color: #F7FAFF; + gap: 12px; +} + +.back-home-button { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + color: #4F607E; + gap: 12px; +} + +.save-icon { + height: 34px; + width: 34px; +} + +.modal-icon { + height: 40px; + width: 40px; +} \ No newline at end of file diff --git a/frontend/src/components/Modals/LogSavedSuccessModal/LogSavedSuccessModal.jsx b/frontend/src/components/Modals/LogSavedSuccessModal/LogSavedSuccessModal.jsx new file mode 100644 index 00000000..b06803e9 --- /dev/null +++ b/frontend/src/components/Modals/LogSavedSuccessModal/LogSavedSuccessModal.jsx @@ -0,0 +1,63 @@ +import { useState } from 'react'; +import { useNavigate } from "react-router-dom"; +import { CLButtonPrimary, CLButtonSecondary } from "../../Buttons/CLButtons" +import { + ClockIcon, + HomeIcon, + XMarkIcon +} from '@heroicons/react/24/outline'; +import Box from '@mui/material/Box'; +import Modal from '@mui/material/Modal'; +import Divider from '@mui/material/Divider' +import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined'; +import './LogSavedSuccessModal.css' + +export const LogSavedSuccessModal = () => { + const [open, setOpen] = useState(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); + + const navigate = useNavigate(); + + const handleLogHistory = () => { + navigate('/history'); + } + + const handleBackHome = () => { + navigate('/home'); + } + + return ( +
+ + +

Save to Log History

+ + + + +

+ Congratulations! +

+ +

Your new log "MyExampleLog" has been saved to log history.

+
+ + +

See Log History

+ + + +

Back to Home

+ +
+ + +
+ ); +} diff --git a/frontend/src/components/Modals/NewLogModal/NewLogModal.css b/frontend/src/components/Modals/NewLogModal/NewLogModal.css new file mode 100644 index 00000000..3140fe49 --- /dev/null +++ b/frontend/src/components/Modals/NewLogModal/NewLogModal.css @@ -0,0 +1,81 @@ +.modal-content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 2rem; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + height: 380px; + width: 640px; + background-color: #FBFCFE; + border-radius: 20px; + box-shadow: 24; +} + +.close-modal-button { + position: absolute; + top: 40px; + left: 40px; + height: 40px; + width: 40px; + display: flex; + justify-content: center; + align-items: center; + background-color: transparent; + color: #244B94; + border-radius: 40px; +} + +.close-modal-button:hover { + background-color: rgb(219, 219, 219); +} + +.modal-description { + font-size: 24px; + font-weight: bold; + margin: 1rem; +} + +.new-log-modal-divider { + width: 60%; +} + +.new-log-modal-buttons-container { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 2rem; + gap: 20px; +} + +.upload-photo-button { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + color: #F7FAFF; + gap: 12px; +} + +.create-manually-button { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + color: #4F607E; + gap: 12px; +} + +.close-x-icon { + height: 34px; + width: 34px; + color: inherit; +} + +.modal-icon { + height: 40px; + width: 40px; +} \ No newline at end of file diff --git a/frontend/src/components/Modals/NewLogModal/NewLogModal.jsx b/frontend/src/components/Modals/NewLogModal/NewLogModal.jsx new file mode 100644 index 00000000..215d0d24 --- /dev/null +++ b/frontend/src/components/Modals/NewLogModal/NewLogModal.jsx @@ -0,0 +1,60 @@ +import { useState } from 'react'; +import { useNavigate } from "react-router-dom"; +import { CLButtonPrimary, CLButtonSecondary } from "../../Buttons/CLButtons" +import { + PhotoIcon, + PencilSquareIcon, + XMarkIcon +} from '@heroicons/react/24/outline'; +import Box from '@mui/material/Box'; +import Modal from '@mui/material/Modal'; +import Divider from '@mui/material/Divider' +import './NewLogModal.css' + +export const NewLogModal = () => { + const [open, setOpen] = useState(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); + + const navigate = useNavigate(); + + const handleUploadPhoto = () => { + navigate('/uploadPhotos'); + } + + const handleCreateManually = () => { + navigate('/manualEntry'); + } + + return ( +
+ + Create New Log + + + + +

+ How would you like to create a new log? +

+ +
+ + +

Upload Photo

+ + + +

Create Manually

+ +
+ + +
+ ); +} diff --git a/frontend/src/pages/logbooks/__tests__/NewLog.test.js b/frontend/src/pages/logbooks/__tests__/Logbooks.test.js similarity index 100% rename from frontend/src/pages/logbooks/__tests__/NewLog.test.js rename to frontend/src/pages/logbooks/__tests__/Logbooks.test.js diff --git a/frontend/src/pages/manual_entry/ManualEntry.css b/frontend/src/pages/manual_entry/ManualEntry.css new file mode 100644 index 00000000..c3edad55 --- /dev/null +++ b/frontend/src/pages/manual_entry/ManualEntry.css @@ -0,0 +1,54 @@ +.manual-entry-container { + margin: 0 220px 0 220px; +} + +.section-header { + font-size: 28px; +} + +.input-title { + margin: 4px 0 4px 0; + color: #4F607E; + font-size: 16px; +} + +.input-title-bold { + margin: 4px 0 4px 0; + color: #4F607E; + font-weight: 500; + font-size: 18px; +} + +.manual-entry-input { + box-sizing: border-box; + width: 100%; + padding: 1rem; + border: 1px solid #BAC1D0; + border-radius: 16px; + background-color: transparent; +} + +.manual-entry-text-area { + box-sizing: border-box; + width: 100%; + padding: 1rem; + border: 1px solid #BAC1D0; + border-radius: 16px; + background-color: transparent; + resize: none; +} + +.radio-label-container { + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; +} + +.manual-entry-buttons-footer { + display: flex; + flex-direction: row; + width: 100%; + justify-content: space-between; + margin: 60px 0 30px 0; +} diff --git a/frontend/src/pages/manual_entry/ManualEntry.jsx b/frontend/src/pages/manual_entry/ManualEntry.jsx index 34407f7e..d4a8d00d 100644 --- a/frontend/src/pages/manual_entry/ManualEntry.jsx +++ b/frontend/src/pages/manual_entry/ManualEntry.jsx @@ -1,9 +1,40 @@ -const ManualEdit = () => { +import { AppBar } from "../../components/AppBar/AppBar"; +import { LogSavedSuccessModal } from "../../components/Modals/LogSavedSuccessModal/LogSavedSuccessModal"; +import { ConfirmCancelModal } from "../../components/Modals/ConfirmCancelModal/ConfirmCancelModal"; +import { SurgicalAndPatientInfo } from "./sections/surgical_and_patient_info/SurgicalAndPatientInfo"; +import { ExaminationsAndInvestigations } from "./sections/examinations_and_investigations/ExaminationsAndInvestigations"; +import { CasePlanning } from "./sections/case_planning/CasePlanning"; +import { LearningPoints } from "./sections/learning_points/LearningPoints"; +import { Divider } from "@mui/material"; +import "./ManualEntry.css" + +/** + * TODO: Add IntersectionObserver scrollable sticky header behaviour + * https://www.smashingmagazine.com/2021/07/dynamic-header-intersection-observer/ + * https://dev.to/dance2die/react-sticky-event-with-intersection-observer-310h + */ +const ManualEntry = () => { + return (
-

Manual Edit Page

+ +
+ +

1. Surgical and Patient Information

+ +

2. Examinations and Investigations

+ +

3. Case Planning

+ +

4. Learning Points

+ +
+ + +
+
); }; -export default ManualEdit; +export default ManualEntry; diff --git a/frontend/src/pages/manual_entry/sections/case_planning/CasePlanning.css b/frontend/src/pages/manual_entry/sections/case_planning/CasePlanning.css new file mode 100644 index 00000000..0cfc3929 --- /dev/null +++ b/frontend/src/pages/manual_entry/sections/case_planning/CasePlanning.css @@ -0,0 +1,5 @@ +.operative-notes-input-title-container { + display: flex; + height: 100%; + align-items: center; +} diff --git a/frontend/src/pages/manual_entry/sections/case_planning/CasePlanning.jsx b/frontend/src/pages/manual_entry/sections/case_planning/CasePlanning.jsx new file mode 100644 index 00000000..bb8fca65 --- /dev/null +++ b/frontend/src/pages/manual_entry/sections/case_planning/CasePlanning.jsx @@ -0,0 +1,93 @@ +import { CLInputWithUnits } from "../../../../components/Inputs/CLInputs"; +import Box from "@mui/material/Box"; +import Grid from '@mui/material/Grid2'; +import "./CasePlanning.css" + +export const CasePlanning = () => { + return ( + + + + + +
+

Surgical Plan

+