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 } from "@/app/api/projects";
import { RecordTimesheetInput } from "@/app/api/timesheets/actions";

export interface Props {
  assignedProjects: AssignedProject[];
  username: string;
  defaultTimesheets: RecordTimesheetInput;
}

const UserWorkspacePage: React.FC<Props> = ({
  assignedProjects,
  username,
  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}
        >
          {Boolean(assignedProjects.length) && (
            <ButtonGroup variant="contained">
              <Button
                startIcon={<Add />}
                onClick={handleAddTimesheetButtonClick}
              >
                {t("Enter Time")}
              </Button>
              <Button startIcon={<Add />} onClick={handleAddLeaveButtonClick}>
                {t("Record Leave")}
              </Button>
            </ButtonGroup>
          )}
        </Stack>
      </Stack>
      {assignedProjects.length > 0 ? (
        <>
          <TimesheetModal
            timesheetType="time"
            isOpen={isTimeheetModalVisible}
            onClose={handleCloseTimesheetModal}
            assignedProjects={assignedProjects}
            username={username}
            defaultTimesheets={defaultTimesheets}
          />
          <TimesheetModal
            timesheetType="leave"
            isOpen={isLeaveModalVisible}
            onClose={handleCloseLeaveModal}
            assignedProjects={assignedProjects}
            username={username}
          />
          <AssignedProjects assignedProjects={assignedProjects} />
        </>
      ) : (
        <>
          <Typography variant="subtitle1">
            {t("You have no assigned projects!")}
          </Typography>
        </>
      )}
    </>
  );
};

export default UserWorkspacePage;