tsms/src/components/UserWorkspacePage/UserWorkspacePage.tsx

"use client";

import { useCallback, useState } from "react";
import { useTranslation } from "react-i18next";
import Button from "@mui/material/Button";
import Stack from "@mui/material/Stack";
import { Add } from "@mui/icons-material";
import { Typography } from "@mui/material";
import ButtonGroup from "@mui/material/ButtonGroup";
import AssignedProjects from "./AssignedProjects";
import TimesheetModal from "../TimesheetModal";
import { AssignedProject, ProjectWithTasks } from "@/app/api/projects";
import {
  RecordLeaveInput,
  RecordTimesheetInput,
} from "@/app/api/timesheets/actions";
import LeaveModal from "../LeaveModal";
import { LeaveType } from "@/app/api/timesheets";

export interface Props {
  leaveTypes: LeaveType[];
  allProjects: ProjectWithTasks[];
  assignedProjects: AssignedProject[];
  username: string;
  defaultLeaveRecords: RecordLeaveInput;
  defaultTimesheets: RecordTimesheetInput;
}

const UserWorkspacePage: React.FC<Props> = ({
  leaveTypes,
  allProjects,
  assignedProjects,
  username,
  defaultLeaveRecords,
  defaultTimesheets,
}) => {
  const [isTimeheetModalVisible, setTimeheetModalVisible] = useState(false);
  const [isLeaveModalVisible, setLeaveModalVisible] = useState(false);
  const { t } = useTranslation("home");

  const handleAddTimesheetButtonClick = useCallback(() => {
    setTimeheetModalVisible(true);
  }, []);

  const handleCloseTimesheetModal = useCallback(() => {
    setTimeheetModalVisible(false);
  }, []);

  const handleAddLeaveButtonClick = useCallback(() => {
    setLeaveModalVisible(true);
  }, []);

  const handleCloseLeaveModal = useCallback(() => {
    setLeaveModalVisible(false);
  }, []);

  return (
    <>
      <Stack
        direction="row"
        justifyContent="space-between"
        flexWrap="wrap"
        rowGap={2}
      >
        <Typography variant="h4" marginInlineEnd={2}>
          {t("User Workspace")}
        </Typography>
        <Stack
          direction="row"
          justifyContent="right"
          flexWrap="wrap"
          spacing={2}
        >
          <ButtonGroup variant="contained">
            <Button startIcon={<Add />} onClick={handleAddTimesheetButtonClick}>
              {t("Enter Time")}
            </Button>
            <Button startIcon={<Add />} onClick={handleAddLeaveButtonClick}>
              {t("Record Leave")}
            </Button>
          </ButtonGroup>
        </Stack>
      </Stack>
      <TimesheetModal
        isOpen={isTimeheetModalVisible}
        onClose={handleCloseTimesheetModal}
        allProjects={allProjects}
        assignedProjects={assignedProjects}
        username={username}
        defaultTimesheets={defaultTimesheets}
      />
      <LeaveModal
        leaveTypes={leaveTypes}
        isOpen={isLeaveModalVisible}
        onClose={handleCloseLeaveModal}
        defaultLeaveRecords={defaultLeaveRecords}
        username={username}
      />
      {assignedProjects.length > 0 ? (
        <AssignedProjects assignedProjects={assignedProjects} />
      ) : (
        <Typography variant="subtitle1">
          {t("You have no assigned projects!")}
        </Typography>
      )}
    </>
  );
};

export default UserWorkspacePage;