diff --git a/frontend/src/Components/NewTImeReport.tsx b/frontend/src/Components/NewTImeReport.tsx new file mode 100644 index 0000000..3c0e49d --- /dev/null +++ b/frontend/src/Components/NewTImeReport.tsx @@ -0,0 +1,60 @@ +function NewTimeReport(): JSX.Element { + const activities = [ + "Development", + "Meeting", + "Administration", + "Own Work", + "Studies", + "Testing", + ]; + + return ( + <> + <h1 className="font-bold text-[30px] mb-[20px]">New Time Report</h1> + <div className="border-4 border-black bg-white flex flex-col justify-start min-h-[65vh] h-fit w-[50vw] rounded-3xl overflow-scroll space-y-[2vh] p-[30px] items-center"> + <input + className="w-fill h-[5vh] font-sans text-[3vh] pl-[1vw] rounded-full text-center pt-[1vh] pb-[1vh] border-2 border-black" + type="week" + placeholder="Week" + onKeyDown={(event) => { + event.preventDefault(); + }} + onPaste={(event) => { + event.preventDefault(); + }} + /> + <table className="w-full text-center divide-y divide-x divide-white text-[30px]"> + <thead> + <tr> + <th className="w-1/2 py-2 border-b-2 border-black">Activity</th> + <th className="w-1/2 py-2 border-b-2 border-black"> + Total Time (min) + </th> + </tr> + </thead> + <tbody className="divide-y divide-black"> + {activities.map((activity, index) => ( + <tr key={index} className="h-[10vh]"> + <td>{activity}</td> + <td> + <input + type="number" + min="0" + className="border-2 border-black rounded-md text-center w-1/2" + onKeyDown={(event) => { + const keyValue = event.key; + if (!/\d/.test(keyValue) && keyValue !== "Backspace") + event.preventDefault(); + }} + /> + </td> + </tr> + ))} + </tbody> + </table> + </div> + </> + ); +} + +export default NewTimeReport; diff --git a/frontend/src/Pages/UserPages/UserNewTimeReportPage.tsx b/frontend/src/Pages/UserPages/UserNewTimeReportPage.tsx index b4e8436..d432817 100644 --- a/frontend/src/Pages/UserPages/UserNewTimeReportPage.tsx +++ b/frontend/src/Pages/UserPages/UserNewTimeReportPage.tsx @@ -1,8 +1,13 @@ import BasicWindow from "../../Components/BasicWindow"; import Button from "../../Components/Button"; +import NewTimeReport from "../../Components/NewTImeReport"; function UserNewTimeReportPage(): JSX.Element { - const content = <></>; + const content = ( + <> + <NewTimeReport /> + </> + ); const buttons = ( <>