({});
+ const { setLockConfirm } = props;
+
+ const handleRowEditStop: GridEventListener<'rowEditStop'> = (params, event) => {
+ if (params.reason === GridRowEditStopReasons.rowFocusOut) {
+ event.defaultMuiPrevented = true;
+ }
+ };
+
+ const handleEditClick = (id: GridRowId) => () => {
+ setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } });
+ };
+
+ const handleSaveClick = (id: GridRowId) => () => {
+
+ setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } });
+ };
+
+ const handleDeleteClick = (id: GridRowId) => () => {
+ setRows(rows.filter((row) => row.id !== id));
+ };
+
+ const handleCancelClick = (id: GridRowId) => () => {
+ setRowModesModel({
+ ...rowModesModel,
+ [id]: { mode: GridRowModes.View, ignoreModifications: true },
+ });
+
+ const editedRow = rows.find((row) => row.id === id);
+ if (editedRow!.isNew) {
+ setRows(rows.filter((row) => row.id !== id));
+ }
+ };
+
+ const processRowUpdate = (newRow: GridRowModel) => {
+ const updatedRow = { ...newRow, isNew: false };
+ setRows(rows.map((row) => (row.id === newRow.id ? updatedRow : row)));
+ return updatedRow;
+ };
+
+ const handleRowModesModelChange = (newRowModesModel: GridRowModesModel) => {
+ setRowModesModel(newRowModesModel);
+ };
+
+ const getHoursTotal = (column : any) => {
+ let sum = 0;
+ rows.forEach((row) => {
+ sum += row[column]??0;
+ });
+ return sum;
+ };
+
+ const weekdayColConfig : any = {
+ type: 'number',
+ // sortable: false,
+ //width: 100,
+ flex: 1,
+ align: 'left',
+ headerAlign: 'left',
+ editable: true,
+ renderEditCell: (value : any) => (
+
+ ),
+ };
+
+ const columns: GridColDef[] = [
+ {
+ field: 'actions',
+ type: 'actions',
+ headerName: '',
+ width: 100,
+ cellClassName: 'actions',
+ getActions: ({ id }) => {
+ const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit;
+
+ if (isInEditMode) {
+ return [
+ }
+ title="Save"
+ label="Save"
+ sx={{
+ color: 'primary.main',
+ }}
+ onClick={handleSaveClick(id)}
+ />,
+ }
+ title="Cancel"
+ label="Cancel"
+ className="textPrimary"
+ onClick={handleCancelClick(id)}
+ color="inherit"
+ />,
+ ];
+ }
+
+ return [
+ }
+ title="Edit"
+ label="Edit"
+ className="textPrimary"
+ onClick={handleEditClick(id)}
+ color="inherit"
+ />,
+ }
+ onClick={handleDeleteClick(id)}
+ sx={{color:"red"}}
+ />,
+ ];
+ },
+ },
+ {
+ field: 'projectCode',
+ headerName: 'Project Code',
+ // width: 220,
+ flex: 2,
+ editable: true,
+ type: 'singleSelect',
+ valueOptions: options,
+ },
+ {
+ field: 'task',
+ headerName: 'Task',
+ // width: 220,
+ flex: 3,
+ editable: true,
+ type: 'singleSelect',
+ valueOptions: options2,
+ },
+ {
+ // Mon
+ field: 'mon',
+ ...weekdayColConfig,
+ renderHeader: () => {
+ return (
+ Mon - {getDateForHeader(day, 1)}
+ );
+ },
+ },
+ {
+ // Tue
+ field: 'tue',
+ ...weekdayColConfig,
+ renderHeader: () => {
+ return (
+ Tue - {getDateForHeader(day, 2)}
+ );
+ },
+ },
+ {
+ // Wed
+ field: 'wed',
+ ...weekdayColConfig,
+ renderHeader: () => {
+ return (
+ Wed - {getDateForHeader(day, 3)}
+ );
+ },
+ },
+ {
+ // Thu
+ field: 'thu',
+ ...weekdayColConfig,
+ renderHeader: () => {
+ return (
+ Thu - {getDateForHeader(day, 4)}
+ );
+ },
+ },
+ {
+ // Fri
+ field: 'fri',
+ ...weekdayColConfig,
+ renderHeader: () => {
+ return (
+ Fri - {getDateForHeader(day, 5)}
+ );
+ },
+ },
+ {
+ // Sat
+ field: 'sat',
+ ...weekdayColConfig,
+ renderHeader: () => {
+ return (
+ Sat - {getDateForHeader(day, 6)}
+ );
+ },
+ },
+ {
+ // Sun
+ field: 'sun',
+ ...weekdayColConfig,
+ renderHeader: () => {
+ return (
+ Sun - {getDateForHeader(day, 7)}
+ );
+ },
+ },
+ // {
+ // field: 'joinDate',
+ // headerName: 'Join date',
+ // type: 'date',
+ // width: 180,
+ // editable: true,
+ // },
+ ];
+
+ return (
+
+
+
+
+
+ );
+}
+
+export default TimesheetInputGrid;
diff --git a/src/components/EnterTimesheet/index.ts b/src/components/EnterTimesheet/index.ts
new file mode 100644
index 0000000..e070291
--- /dev/null
+++ b/src/components/EnterTimesheet/index.ts
@@ -0,0 +1 @@
+export { default } from "./EnterTimesheetModal";
diff --git a/src/components/Swal/CustomAlerts.js b/src/components/Swal/CustomAlerts.js
new file mode 100644
index 0000000..d8d5cdd
--- /dev/null
+++ b/src/components/Swal/CustomAlerts.js
@@ -0,0 +1,23 @@
+import Swal from "sweetalert2";
+
+
+export const msg = (text) => {
+ Swal.mixin({
+ toast: true,
+ position: "bottom-end",
+ showConfirmButton: false,
+ timer: 3000,
+ timerProgressBar: true,
+ didOpen: (toast) => {
+ toast.onmouseenter = Swal.stopTimer;
+ toast.onmouseleave = Swal.resumeTimer;
+ }
+ }).fire({
+ icon: "Success",
+ title: text
+ });
+}
+
+export const popup = (text) => {
+ Swal.fire(text);
+}
\ No newline at end of file
diff --git a/src/components/UserWorkspacePage/ProjectGrid.tsx b/src/components/UserWorkspacePage/ProjectGrid.tsx
new file mode 100644
index 0000000..53cc264
--- /dev/null
+++ b/src/components/UserWorkspacePage/ProjectGrid.tsx
@@ -0,0 +1,62 @@
+"use client";
+import * as React from "react";
+import Grid from "@mui/material/Grid";
+import { useEffect, useState } from 'react'
+import { TFunction } from "i18next";
+import { useTranslation } from "react-i18next";
+import {Card,CardContent,CardHeader} from '@mui/material';
+import CustomCardGrid from '../CustomCardGrid/CustomCardGrid';
+import '../../app/global.css';
+import { PROJECT_CARD_STYLE } from "@/theme/colorConst";
+
+interface ProjectGridProps {
+ tab: number;
+}
+
+
+const ProjectGrid: React.FC = (props) => {
+ const [items, setItems] = React.useState([])
+
+ useEffect(() => {
+ if (props.tab == 0) {
+ setItems(cards)
+ }
+ else {
+ const filteredItems = cards;//cards.filter(item => (item.track == props.tab));
+ setItems(filteredItems);
+ }
+ }, [props.tab]);
+
+ const cards = [
+ {code: 'M1001 (C)', name: 'Consultancy Project A', hr_spent: 12.75, hr_spent_normal: 0.00, hr_alloc: 150.00, hr_alloc_normal: 30.00},
+ {code: 'M1301 (C)', name: 'Consultancy Project AAA', hr_spent: 4.25, hr_spent_normal: 0.25, hr_alloc: 30.00, hr_alloc_normal: 0.00},
+ {code: 'M1354 (C)', name: 'Consultancy Project BBB', hr_spent: 57.00, hr_spent_normal: 6.50, hr_alloc: 100.00, hr_alloc_normal: 20.00},
+ {code: 'M1973 (C)', name: 'Construction Project CCC', hr_spent: 12.75, hr_spent_normal: 0.00, hr_alloc: 150.00, hr_alloc_normal: 30.00},
+ {code: 'M2014 (T)', name: 'Consultancy Project DDD', hr_spent: 1.00, hr_spent_normal: 0.00, hr_alloc: 10.00, hr_alloc_normal: 0.00},
+ ];
+
+ const cardLayout = (item: Record) => {
+ return (
+
+
+
+ Hours Spent: {item.hr_spent}
+ Normal (Others): {item.hr_spent_normal}
+ Hours Allocated: {item.hr_alloc}
+ Normal (Others): {item.hr_alloc_normal}
+
+
+ );
+ }
+ // Apply the preset style to the cards in child, if not specified //
+ return (
+
+ {/* */}
+ {/* item count = {items?.length??"idk"} , track/tab = {props.tab} */}
+
+ {/* */}
+
+ );
+};
+
+export default ProjectGrid;
diff --git a/src/components/UserWorkspacePage/UserWorkspacePage.tsx b/src/components/UserWorkspacePage/UserWorkspacePage.tsx
new file mode 100644
index 0000000..19cd266
--- /dev/null
+++ b/src/components/UserWorkspacePage/UserWorkspacePage.tsx
@@ -0,0 +1,69 @@
+"use client";
+import Grid from "@mui/material/Grid";
+import Paper from "@mui/material/Paper";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import AssignedProjectGrid from "../AssignedProjectGrid/AssignedProjectGrid";
+import PageTitle from "../PageTitle/PageTitle";
+import { Suspense } from "react";
+import Button from "@mui/material/Button";
+import Stack from "@mui/material/Stack";
+import { Add } from '@mui/icons-material';
+import Link from "next/link";
+import { t } from 'i18next';
+import { Modal } from "@mui/material";
+import CustomModal from "../CustomModal/CustomModal";
+import EnterTimesheetModal from "../EnterTimesheet/EnterTimesheetModal";
+
+const UserWorkspacePage: React.FC = () => {
+ const [isModalVisible, setModalVisible] = useState(false);
+ const { t } = useTranslation("home");
+
+
+ const handleButtonClick = () => {
+ setModalVisible(true);
+ };
+
+ const handleCloseModal = () => {
+ setModalVisible(false);
+ };
+
+ return (
+
+
+
+
+ }
+ onClick={handleButtonClick}
+ sx={{marginRight:"2rem"}}
+ >
+ Enter Timesheet
+
+ }
+ sx={{marginRight:"2rem"}}
+ LinkComponent={Link}
+ href="/projects/create"
+ >
+ Record Leave
+
+
+
{/*fallback={}>*/}
+
+
+
+
+
+
+
+ );
+};
+
+export default UserWorkspacePage;
diff --git a/src/components/UserWorkspacePage/index.ts b/src/components/UserWorkspacePage/index.ts
new file mode 100644
index 0000000..ec65d8f
--- /dev/null
+++ b/src/components/UserWorkspacePage/index.ts
@@ -0,0 +1 @@
+export { default } from "./UserWorkspacePage";
diff --git a/src/theme/colorConst.js b/src/theme/colorConst.js
new file mode 100644
index 0000000..2d3c0a8
--- /dev/null
+++ b/src/theme/colorConst.js
@@ -0,0 +1,371 @@
+import { createTheme } from "@mui/material";
+import { aborted } from "util";
+
+// - - - - - - WORK IN PROGRESS - - - - - - //
+
+export const chartColor = [
+ '#CB4047', '#ED3A41', '#F47B50', '#FBA647',
+ '#FDB64C', '#CCBB32', '#9ACC59', '#57B962',
+ '#1E83C5', '#7C4A9D'
+];
+
+export const chartSingleColor = [
+ '#f2969a', '#fc9599', '#faa789', '#f7ae94',
+ '#ffd491', '#ede5a1', '#d1f5a2', '#9de0a4',
+ '#a2d4f5', '#b685d6'
+];
+
+export const rankColor = [
+ '#FFD700', '#C0C0C0', '#CD853F', '#57B962', '#57B962',
+ '#57B962', '#57B962', '#57B962', '#57B962', '#57B962'
+];
+
+export const piechartColor1 = [
+ '#E84A3E', '#F2883C', '#FDCD4D', '#CE478A', '#B63D2A',
+ '#6A8B9E', '#60667E', '#58865F', '#2F763E', '#7D80B5',
+];
+
+export const piechartColor2 = [
+ '#6A8B9E', '#60667E', '#58865F', '#2F763E', '#7D80B5',
+ '#E84A3E', '#F2883C', '#FDCD4D', '#CE478A', '#B63D2A',
+];
+
+export const cardBorderColor = [
+ '#efb142', '#4bb641', '#448df2', '#e03c04'
+];
+
+export const chartLineColor = [
+ '#FFFFFF', '#D9D9D9'
+];
+
+export const GENERAL_RED_COLOR = '#e03c04';
+
+export const TABLE_HEADER_TEXT_COLOR = "#3367D1";
+
+export const GENERAL_INFO_COLOR = '#448df2';
+
+export const GENERAL_SETTING_COLOR = '#666666';
+
+export const GENERAL_BORDER_COLOR = '#e6ebf1';
+
+export const GENERAL_TEXT_COLOR = '#262626';
+
+export const FONT_SIZE_L = "1.875rem";
+
+export const FONT_SIZE_M = "1.5rem";
+
+export const FONT_SIZE_S = "1.25rem";
+
+export const PROJECT_CARD_STYLE = {
+ borderRadius: '10px',
+ //border: '10px dotted #ccc',
+ width: '20rem',
+ margin: '20px',
+ //backgroundColor:"pink"
+};
+
+export const PROJECT_MODAL_STYLE = {
+ position: 'absolute',
+ width: '85%',
+ borderRadius: '10px',
+ height: '75%',
+ // top: '50%',
+ // left: '50%',
+ transform: 'translate(10%, 15%)',
+ backgroundColor: 'white',
+ padding: '20px',
+ display: 'flex',
+ flexDirection: 'column',
+ };
+
+export const TAB_THEME = {
+ components: {
+ MuiTab: {
+ styleOverrides: {
+ root: {
+ // fontSize: '1.0rem',
+ fontSize: '1.25rem'//'20px',
+ // height: '40px',
+ // width: '40vw', // Default width for xs screen sizes
+ // '@media (min-width: 600px)': { // sm breakpoint
+ // width: '20vw',
+ // },
+ // '@media (min-width: 960px)': { // md breakpoint
+ // width: '15vw',
+ // },
+ // '@media (min-width: 1280px)': { // lg breakpoint
+ // width: '7vw',
+ // },
+ // textTransform: "none",
+ // alignItems: 'center'
+ },
+ },
+ },
+ }
+
+ };
+
+// copy from MTMS
+export const TSMS_BUTTON_THEME = createTheme({
+ palette: {
+ primary: {
+ main: '#92C1E9',
+ contrastText: '#FFFFFF',
+ },
+ secondary: {
+ main: '#898D8D',
+ contrastText: '#FFFFFF',
+ },
+ success: {
+ main: '#ADCAB8',
+ contrastText: '#FFFFFF',
+ },
+ danger: {
+ main: '#F890A5',
+ contrastText: '#FFFFFF',
+ },
+ warning: {
+ main: '#EFBE7D',
+ contrastText: '#FFFFFF',
+ },
+ disable: {
+ main: '#B2B4B2',
+ contrastText: '#FFFFFF',
+ },
+ create: {
+ // main: '#57B962',
+ main: '#ADCAB8',
+ // light: will be calculated from palette.primary.main,
+ // dark: will be calculated from palette.primary.main,
+ // contrastText: will be calculated to contrast with palette.primary.main
+ contrastText: '#FFFFFF',
+ },
+ delete: {
+ // main: '#E03C04',
+ main: '#F890A5',
+ contrastText: '#FFFFFF',
+
+ },
+ cancel: {
+ // main: '#999999',
+ main: '#F890A5',
+ contrastText: '#FFFFFF',
+ },
+ back: {
+ // main: '#999999',
+ main: '#898D8D',
+ contrastText: '#FFFFFF',
+ },
+ reset: {
+ main: '#EFBE7D',
+ contrastText: '#FFFFFF',
+ },
+ save: {
+ // main: '#448DF2',
+ main: '#92C1E9',
+ contrastText: '#FFFFFF',
+ },
+ export: {
+ main: '#8C52FF',
+ contrastText: '#FFFFFF',
+ },
+ import: {
+ main: '#92C1E9',
+ contrastText: '#FFFFFF',
+ },
+ saveAs: {
+ main: '#FFBD59',
+ contrastText: '#FFFFFF',
+ }
+ },
+ components: {
+ MuiButton: {
+ styleOverrides: {
+ root: {
+ '& .MuiButtonBase-root-MuiButton-root': {
+ fontSize: FONT_SIZE_S
+ },
+ }
+ }
+ },
+ MuiButtonBase: {
+ styleOverrides: {
+ root: {
+ '&.MuiChip-root.Mui-disabled': {
+ opacity: 0.75,
+ },
+ '&.MuiButton-root': {
+ fontSize: FONT_SIZE_S
+ },
+ }
+ }
+ },
+ }
+});
+
+export const formTheme = createTheme({
+ components: {
+ MuiFormLabel: {
+ root: { // Name of the rule
+ color: "rgba(0, 0, 0, 1)",
+ },
+ styleOverrides: {
+ asterisk: {
+ color: "#db3131",
+ "&$error": {
+ color: "#db3131",
+ },
+ },
+ },
+ },
+ },
+});
+
+
+export const ARS_BUTTON_THEME = createTheme({
+ palette: {
+ create: {
+ main: '#57B962',
+ // light: will be calculated from palette.primary.main,
+ // dark: will be calculated from palette.primary.main,
+ // contrastText: will be calculated to contrast with palette.primary.main
+ contrastText: '#FFFFFF',
+ },
+ delete: {
+ main: '#E03C04',
+ contrastText: '#FFFFFF',
+
+ },
+ cancel: {
+ main: '#999999',
+ contrastText: '#FFFFFF',
+
+ },
+ save: {
+ main: '#448DF2',
+ contrastText: '#FFFFFF',
+ },
+ export: {
+ main: '#8C52FF',
+ contrastText: '#FFFFFF',
+ },
+ saveAs: {
+ main: '#FFBD59',
+ contrastText: '#FFFFFF',
+ },
+ edit: {
+ main: '#F3AF2B',
+ contrastText: '#FFFFFF',
+ },
+ exportExcel: {
+ main: '#6A8B9E',
+ contrastText: '#FFFFFF',
+ }
+ },
+ components: {
+ MuiDataGrid: {
+ styleOverrides: {
+ actionsCell: {
+ '& .MuiDataGrid-actionsContainer .MuiIconButton-root': {
+ fontSize: '80px', // Set the desired icon size here
+ },
+ },
+ },
+ },
+ MuiButton: {
+ styleOverrides: {
+ root: {
+ // fontSize: '1.0rem',
+ fontSize: '1.25rem',
+ height: '40px',
+ width: '40vw', // Default width for xs screen sizes
+ '@media (min-width: 600px)': { // sm breakpoint
+ width: '20vw',
+ },
+ '@media (min-width: 960px)': { // md breakpoint
+ width: '15vw',
+ },
+ '@media (min-width: 1280px)': { // lg breakpoint
+ width: '7vw',
+ },
+ textTransform: "none",
+ alignItems: 'center'
+ },
+ },
+ },
+ }
+});
+
+//from ARS
+export const TSMS_LONG_BUTTON_THEME = createTheme({
+ palette: {
+ create: {
+ main: '#57B962',
+ // light: will be calculated from palette.primary.main,
+ // dark: will be calculated from palette.primary.main,
+ // contrastText: will be calculated to contrast with palette.primary.main
+ contrastText: '#FFFFFF',
+ },
+ delete: {
+ main: '#E03C04',
+ contrastText: '#FFFFFF',
+
+ },
+ cancel: {
+ main: '#999999',
+ contrastText: '#FFFFFF',
+
+ },
+ save: {
+ main: '#448DF2',
+ contrastText: '#FFFFFF',
+ },
+ export: {
+ main: '#8C52FF',
+ contrastText: '#FFFFFF',
+ },
+ saveAs: {
+ main: '#FFBD59',
+ contrastText: '#FFFFFF',
+ },
+ edit: {
+ main: '#F3AF2B',
+ contrastText: '#FFFFFF',
+ },
+ exportExcel: {
+ main: '#60667E',
+ contrastText: '#FFFFFF',
+ }
+ },
+ components: {
+ MuiDataGrid: {
+ styleOverrides: {
+ actionsCell: {
+ '& .MuiDataGrid-actionsContainer .MuiIconButton-root': {
+ fontSize: '80px', // Set the desired icon size here
+ },
+ },
+ },
+ },
+ MuiButton: {
+ styleOverrides: {
+ root: {
+ fontSize: '1.25rem',
+ height: '40px',
+ width: '40vw', // Default width for xs screen sizes
+ '@media (min-width: 600px)': { // sm breakpoint
+ width: '30vw',
+ },
+ '@media (min-width: 960px)': { // md breakpoint
+ width: '25vw',
+ },
+ '@media (min-width: 1280px)': { // lg breakpoint
+ width: '14vw',
+ },
+ textTransform: "none",
+ alignItems: 'center'
+ },
+ },
+ },
+ }
+});
\ No newline at end of file