141 lines
4.4 KiB
TypeScript
141 lines
4.4 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { useParams } from "react-router-dom";
|
|
|
|
/**
|
|
* Renders the component for showing total time per role in a project.
|
|
* @returns JSX.Element
|
|
*/
|
|
export default function TimePerRole(): JSX.Element {
|
|
const [PManagerTime, setPManagerTime] = useState(0);
|
|
const [SManagerTime, setSManagerTime] = useState(0);
|
|
const [DeveloperTime, setDeveloperTime] = useState(0);
|
|
const [TesterTime, setTesterTime] = useState(0);
|
|
|
|
// const token = localStorage.getItem("accessToken") ?? "";
|
|
// const username = localStorage.getItem("username") ?? "";
|
|
const { projectName } = useParams();
|
|
|
|
// const fetchTimePerRole = async (): Promise<void> => {
|
|
// const response = await api.getTimePerRole(
|
|
// username,
|
|
// projectName ?? "",
|
|
// token,
|
|
// );
|
|
// {
|
|
// if (response.success) {
|
|
// const report: TimePerRole = response.data ?? {
|
|
// PManagerTime: 0,
|
|
// SManagerTime: 0,
|
|
// DeveloperTime: 0,
|
|
// TesterTime: 0,
|
|
// };
|
|
// } else {
|
|
// console.error("Failed to fetch weekly report:", response.message);
|
|
// }
|
|
// }
|
|
|
|
interface TimePerRole {
|
|
PManager: number;
|
|
SManager: number;
|
|
Developer: number;
|
|
Tester: number;
|
|
}
|
|
|
|
const fetchTimePerRole = async (): Promise<void> => {
|
|
// Use mock data
|
|
const report: TimePerRole = {
|
|
PManager: 120,
|
|
SManager: 80,
|
|
Developer: 200,
|
|
Tester: 150,
|
|
};
|
|
|
|
// Set the state with the mock data
|
|
setPManagerTime(report.PManager);
|
|
setSManagerTime(report.SManager);
|
|
setDeveloperTime(report.Developer);
|
|
setTesterTime(report.Tester);
|
|
|
|
await Promise.resolve();
|
|
};
|
|
|
|
useEffect(() => {
|
|
void fetchTimePerRole();
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<h1 className="font-bold text-[30px] mb-[20px]">
|
|
Total Time Per Role In: {projectName}{" "}
|
|
</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">
|
|
<div className="flex flex-col items-center">
|
|
<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">Role</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">
|
|
<tr className="h-[10vh]">
|
|
<td>Project Manager</td>
|
|
<td>
|
|
<input
|
|
type="string"
|
|
className="border-2 border-black rounded-md text-center w-1/2"
|
|
value={PManagerTime}
|
|
onKeyDown={(event) => {
|
|
event.preventDefault();
|
|
}}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
<tr className="h-[10vh]">
|
|
<td>System Manager</td>
|
|
<td>
|
|
<input
|
|
type="string"
|
|
className="border-2 border-black rounded-md text-center w-1/2"
|
|
value={SManagerTime}
|
|
onKeyDown={(event) => {
|
|
event.preventDefault();
|
|
}}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
<tr className="h-[10vh]">
|
|
<td>Administration</td>
|
|
<td>
|
|
<input
|
|
type="string"
|
|
className="border-2 border-black rounded-md text-center w-1/2"
|
|
value={DeveloperTime}
|
|
onKeyDown={(event) => {
|
|
event.preventDefault();
|
|
}}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
<tr className="h-[10vh]">
|
|
<td>Own Work</td>
|
|
<td>
|
|
<input
|
|
type="string"
|
|
className="border-2 border-black rounded-md text-center w-1/2"
|
|
value={TesterTime}
|
|
onKeyDown={(event) => {
|
|
event.preventDefault();
|
|
}}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|