diff --git a/web/package-lock.json b/web/package-lock.json index e5f013a..88599cc 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -24,7 +24,6 @@ "eslint-plugin-react-refresh": "^0.4.16", "globals": "^15.14.0", "prettier": "^3.4.2", - "sass": "^1.83.4", "vite": "^6.0.5" }, "engines": { @@ -1020,6 +1019,7 @@ "hasInstallScript": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "detect-libc": "^1.0.3", "is-glob": "^4.0.3", @@ -1062,6 +1062,7 @@ "os": [ "android" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1083,6 +1084,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1104,6 +1106,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1125,6 +1128,7 @@ "os": [ "freebsd" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1146,6 +1150,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1167,6 +1172,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1188,6 +1194,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1209,6 +1216,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1230,6 +1238,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1251,6 +1260,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1272,6 +1282,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1293,6 +1304,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1314,6 +1326,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1948,6 +1961,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "fill-range": "^7.1.1" }, @@ -2092,6 +2106,8 @@ "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "readdirp": "^4.0.1" }, @@ -2280,6 +2296,7 @@ "dev": true, "license": "Apache-2.0", "optional": true, + "peer": true, "bin": { "detect-libc": "bin/detect-libc.js" }, @@ -2859,6 +2876,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "to-regex-range": "^5.0.1" }, @@ -3202,7 +3220,9 @@ "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz", "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==", "dev": true, - "license": "MIT" + "license": "MIT", + "optional": true, + "peer": true }, "node_modules/import-fresh": { "version": "3.3.0", @@ -3458,6 +3478,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "engines": { "node": ">=0.12.0" } @@ -3824,6 +3845,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" @@ -3884,7 +3906,8 @@ "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", "dev": true, "license": "MIT", - "optional": true + "optional": true, + "peer": true }, "node_modules/node-releases": { "version": "2.0.19", @@ -4122,6 +4145,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "engines": { "node": ">=8.6" }, @@ -4277,6 +4301,8 @@ "integrity": "sha512-h80JrZu/MHUZCyHu5ciuoI0+WxsCxzxJTILn6Fs8rxSnFPh+UVHYfeIxK1nVGugMqkfC4vJcBOYbkfkwYK0+gw==", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "engines": { "node": ">= 14.18.0" }, @@ -4457,6 +4483,8 @@ "integrity": "sha512-B1bozCeNQiOgDcLd33e2Cs2U60wZwjUUXzh900ZyQF5qUasvMdDZYbQ566LJu7cqR+sAHlAfO6RMkaID5s6qpA==", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", @@ -4810,6 +4838,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "is-number": "^7.0.0" }, diff --git a/web/src/App.jsx b/web/src/App.jsx index 34be849..6d6c111 100644 --- a/web/src/App.jsx +++ b/web/src/App.jsx @@ -1,9 +1,64 @@ -import { TaskList } from './components/domains/task/TaskList/TaskList'; +// import TaskItem from './components/domains/task/TaskItem/TaskItem'; +import NewTask from './components/domains/task/TaskItem/NewTask'; +import TaskList from './components/domains/task/TaskList/TaskList'; +import { useState } from 'react'; function App() { + const [taskInform, setTaskInform] = useState([ + { + id: 1, + ProjectName: 'Re-work UI/UX', + Priority: 'low', + DueDate: '12/05/2025', + Assignee: 'Said & Rachel', + Project: 'Time App', + }, + { + id: 2, + ProjectName: 'Dark mode toggle', + Priority: 'high', + DueDate: '09/03/2025', + Assignee: 'Umair & Precious', + Project: 'Asa Dark-mode Feature', + }, + { + id: 3, + ProjectName: 'Accessibility check', + Priority: 'medium', + DueDate: '15/04/2025', + Assignee: 'Michel & Ricardo', + Project: 'Timer App', + }, + { + id: 4, + ProjectName: 'Notification Integration', + Priority: 'high', + DueDate: '11/03/2025', + Assignee: 'Ebetsam & Deborah', + Project: 'Timer App', + }, + ]); + function newTaskList(event, ProjectName, Project, Assignee) { + event.preventDefault(); + setTaskInform((prevtask) => [ + ...prevtask, + { + id: 5, + ProjectName, + DueDate: new Date().toLocaleDateString(), + Project, + Assignee, + Priority: 'high', + }, + ]); + } return ( <> - +

Task Manager

+ {/* */} + + + ); } diff --git a/web/src/components/domains/task/TaskItem/MyIconSunset.jsx b/web/src/components/domains/task/TaskItem/MyIconSunset.jsx new file mode 100644 index 0000000..81edf38 --- /dev/null +++ b/web/src/components/domains/task/TaskItem/MyIconSunset.jsx @@ -0,0 +1,75 @@ +const MyIconSunset = () => ( + + + + + + + + + + + + + + + + + +); + +export default MyIconSunset; diff --git a/web/src/components/domains/task/TaskItem/NewTask.jsx b/web/src/components/domains/task/TaskItem/NewTask.jsx new file mode 100644 index 0000000..dc5b272 --- /dev/null +++ b/web/src/components/domains/task/TaskItem/NewTask.jsx @@ -0,0 +1,73 @@ +import { useState } from 'react'; +import PropTypes from 'prop-types'; +import styles from './NewTask.module.css'; +function NewTask({ submit }) { + const [formTitle, setFormTitle] = useState(''); + const [formProject, setFormProject] = useState(''); + const [formAssignee, setFormAssignee] = useState(''); + + function handleSubmit(event) { + event.preventDefault(); + if (!formTitle.trim() || !formProject.trim() || !formAssignee.trim()) { + return; + } + submit(event, formTitle, formProject, formAssignee); + + setFormAssignee(''); + setFormProject(''); + setFormTitle(''); + } + + return ( + <> +
+
+ + setFormTitle(e.target.value)} + /> + + setFormProject(e.target.value)} + /> + + setFormAssignee(e.target.value)} + /> +
+ +
+ + ); +} +export default NewTask; + +NewTask.propTypes = { + submit: PropTypes.func.isRequired, +}; + +{ + /*
+
+ + setNewItem(e.target.value)} + type="text" + id="item" + /> +
+ +
*/ +} diff --git a/web/src/components/domains/task/TaskItem/NewTask.module.css b/web/src/components/domains/task/TaskItem/NewTask.module.css new file mode 100644 index 0000000..395e80b --- /dev/null +++ b/web/src/components/domains/task/TaskItem/NewTask.module.css @@ -0,0 +1,51 @@ +form { + max-width: 600px; + margin: 20px auto; + padding: 20px; + background-color: rgb(241, 234, 234); + border-radius: 8px; + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); +} +.titleContainer { + display: flex; + flex-direction: column; + justify-content: center; + gap: 10px; +} + +label { + font-size: 15px; + font-weight: bold; + margin-bottom: 3px; +} + +input { + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 15px; + transition: border-color 0.3s ease; +} + +input:focus { + outline: none; + border-color: #007bff; + box-shadow: 0px 0px 5px rgba(0, 123, 255, 0.5); +} + +.btn { + padding: 10px 15px; + font-size: 15px; + font-weight: bold; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; + margin-top: 15px; +} + +.btn:hover { + background-color: #0056b3; +} diff --git a/web/src/components/domains/task/TaskItem/StudentIcon.jsx b/web/src/components/domains/task/TaskItem/StudentIcon.jsx new file mode 100644 index 0000000..5f278ee --- /dev/null +++ b/web/src/components/domains/task/TaskItem/StudentIcon.jsx @@ -0,0 +1,47 @@ +const StudentIcon = () => ( + + + + + + + + + + + + + +); + +export default StudentIcon; diff --git a/web/src/components/domains/task/TaskItem/TaskItem.jsx b/web/src/components/domains/task/TaskItem/TaskItem.jsx index a1832ec..6a68184 100644 --- a/web/src/components/domains/task/TaskItem/TaskItem.jsx +++ b/web/src/components/domains/task/TaskItem/TaskItem.jsx @@ -1,4 +1,7 @@ +import MyIconSunset from './MyIconSunset'; +import StudentIcon from './StudentIcon'; import styles from './TaskItem.module.css'; +import PropTypes from 'prop-types'; /* Please create the component following the design from the Figma file. @@ -6,6 +9,54 @@ Please make sure to add styles using CSS Modules. Add the necessary props to the component. */ -export function TaskItem(props) { - return
; +function TaskItem({ ProjectName, Priority, DueDate, Assignee, Project }) { + function colorBox() { + if (Priority === 'low') { + return `${styles.btn} ${styles.btnGreen}`; + } + if (Priority === 'medium') { + return `${styles.btn} ${styles.btnYellow}`; + } + if (Priority === 'high') { + return `${styles.btn} ${styles.btnRed}`; + } + } + + return ( + <> +
+

{ProjectName}

+
+ +
+
+

+ + + + {DueDate} +

+
+ +

+ + + + {Assignee} +

+ +

{Project}

+
+ + ); } + +TaskItem.propTypes = { + ProjectName: PropTypes.string.isRequired, + Priority: PropTypes.oneOf(['low', 'medium', 'high']).isRequired, + DueDate: PropTypes.string.isRequired, + Assignee: PropTypes.string.isRequired, + Project: PropTypes.string.isRequired, +}; + +export default TaskItem; diff --git a/web/src/components/domains/task/TaskItem/TaskItem.module.css b/web/src/components/domains/task/TaskItem/TaskItem.module.css index e69de29..58a5729 100644 --- a/web/src/components/domains/task/TaskItem/TaskItem.module.css +++ b/web/src/components/domains/task/TaskItem/TaskItem.module.css @@ -0,0 +1,49 @@ +.mainContainer { + border-radius: 20px; + background-color: #e7e5df; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + margin: 15px; + padding: 10px; +} + +.projectItem { + font-weight: bold; + font-size: small; +} +.btn { + border-radius: 10px; + width: 60px; + height: 20px; + color: white; + font-size: small; +} +.btnGreen { + background-color: green; +} +.btnRed { + background-color: red; +} +.btnYellow { + background-color: orange; +} +h1 { + text-align: center; + margin-top: 3rem; + margin-bottom: 1rem; +} +h4 { + font-size: small; +} +.dueDate { + font-size: small; + display: flex; + align-items: center; + gap: 5px; +} +.assignee { + font-size: small; + display: flex; + align-items: center; + gap: 5px; +} diff --git a/web/src/components/domains/task/TaskList/TaskList.jsx b/web/src/components/domains/task/TaskList/TaskList.jsx index 624be89..a8b1efa 100644 --- a/web/src/components/domains/task/TaskList/TaskList.jsx +++ b/web/src/components/domains/task/TaskList/TaskList.jsx @@ -1,14 +1,35 @@ +import TaskItem from '../TaskItem/TaskItem'; import styles from './TaskList.module.css'; +import PropTypes from 'prop-types'; +function TaskList({ tasks }) { + return ( +
+ {tasks.map((task) => ( + + ))} +
+ ); +} -/* -Please create the component following the design from the Figma file. -Please make sure to add styles using CSS Modules. -Create a taskItems array and return a list of components. -*/ - -export function TaskList() { - // create some task items here and return one task list for each item you have - const taskItems = []; +// PropTypes validation +TaskList.propTypes = { + tasks: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.number.isRequired, + ProjectName: PropTypes.string.isRequired, + Priority: PropTypes.string.isRequired, + DueDate: PropTypes.string.isRequired, + Assignee: PropTypes.string.isRequired, + Project: PropTypes.string.isRequired, + }), + ).isRequired, +}; - return
; -} +export default TaskList; diff --git a/web/src/components/domains/task/TaskList/TaskList.module.css b/web/src/components/domains/task/TaskList/TaskList.module.css index e69de29..b4ebf7d 100644 --- a/web/src/components/domains/task/TaskList/TaskList.module.css +++ b/web/src/components/domains/task/TaskList/TaskList.module.css @@ -0,0 +1,7 @@ +.listWrapper { + padding: 5px; + max-width: 800px; + margin: auto; + background-color: rgb(241, 234, 234); + border-radius: 7px; +}