Feat billable hours

packages/client/src/App.tsx

@@ -1,25 +1,25 @@
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import { Employee } from '@pages/Employee/Employee';
+import { Employee } from '@pages/employee/Employee';
 
 import { GraphqlProvider } from '@graphql/graphql-provider';
-import { Project } from '@pages/Project/Project';
-import { Track } from '@pages/Track/Track';
+import { Project } from '@pages/project/Project';
+import { Track } from '@pages/track/Track';
 import { Paths } from '@constants/paths';
-import { AdminLayout } from '@pages/Admin/AdminLayout';
+import { AdminLayout } from '@pages/admin/AdminLayout';
 import { ThemeProvider } from '@theme/theme.provider';
 import { SettingsProvider } from '@context/setting.context';
 import { EmployeeProvider } from '@context/employee.context';
 import { DateProvider } from '@context/date.context';
-import { TrackLayout } from '@pages/Track/components/TrackLayout';
-import { Report } from '@pages/Report/Report';
-import { Invoice } from '@pages/Invoice/Invoice';
+import { TrackLayout } from '@pages/track/components/TrackLayout';
+import { Report } from '@pages/report/Report';
+import { Invoice } from '@pages/invoice/Invoice';
 import enLocale from 'date-fns/locale/en-US';
-import { InvoiceDetails } from '@pages/Invoice/InvoiceDetails';
+import { InvoiceDetails } from '@pages/invoice/InvoiceDetails';
 import { DateRangeProvider } from '@context/reportFilter.context';
-import { Export } from '@pages/Invoice/Export';
-import { NotFoundAdmin } from '@pages/Not_Find/NotFindAdmin';
+import { Export } from '@pages/invoice/Export';
+import { NotFoundAdmin } from '@pages/not-found/NotFindAdmin';
 import { SnackBarProvider } from '@context/snackbar.context';
 import { NavbarProvider } from '@context/navbar.context';
 

packages/client/src/components/StyledComponent.tsx

@@ -123,7 +123,8 @@ export const StyledTableHeadRow = styled(TableRow)(({ theme }) => ({
 export const StyledTableDataRow = styled(TableRow)(({ theme }) => ({
   '& .MuiTableCell-root': {
     borderBottom: '1px dashed',
-    borderColor: theme.palette.mode === 'light' ? theme.palette.grey[200] : 'rgb(46, 50, 54)'
+    borderColor: theme.palette.mode === 'light' ? theme.palette.grey[200] : 'rgb(46, 50, 54)',
+    padding: 4
   },
   '&:hover': { backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[100] : alpha(theme.palette.grey[500], 0.08) }
 }));

packages/client/src/components/form/FormObserver.tsx

@@ -0,0 +1,29 @@
+import { useFormikContext } from 'formik';
+import { FC, useEffect, useRef } from 'react';
+
+interface FormObserverProps {
+  id: string;
+  handleOnChange: (value: number) => void;
+}
+
+interface FormValues {
+  [id: string]: number | string;
+}
+
+export const FormObserver: FC<FormObserverProps> = ({ id, handleOnChange }) => {
+  const { values } = useFormikContext<FormValues>();
+  const valueRef = useRef(values);
+
+  useEffect(() => {
+    if (values[id] === valueRef.current[id] || values[id] < 0) return;
+    const timeId = setTimeout(() => {
+      const value = values[id] === 0 || values[id] === '' ? 0 : (values[id] as number);
+      handleOnChange(value);
+    }, 1000);
+    valueRef.current = values;
+
+    return () => clearTimeout(timeId);
+  }, [values]);
+
+  return null;
+};

packages/client/src/components/form/ObserverTextInput.tsx

@@ -25,7 +25,8 @@ export const ObserverTextInput: FC<TextInputProps> = (props) => {
         error={!!errors[props.name]}
         helperText={(touched[props.name] && errors[props.name]) as string}
         sx={{
-          '.MuiFormHelperText-root ': { width: '120px', marginRight: 0 }
+          '.MuiFormHelperText-root ': { width: '120px', marginRight: 0 },
+          ...props.sx
         }}
       />
     </FormControl>

packages/client/src/components/switch/switchBtn.tsx

@@ -57,11 +57,5 @@ interface SwitchBtnProps {
 export const SwitchBtn: FC<SwitchBtnProps> = ({ onClick, open = true }) => {
   const { settings } = useSettings();
 
-  return (
-    <FormControlLabel
-      control={<MaterialUISwitch sx={{ m: 1 }} defaultChecked={settings.theme !== 'light'} onClick={onClick} />}
-      label={open ? 'Theme switch' : ''}
-      sx={{ minWidth: '200px' }}
-    />
-  );
+  return <FormControlLabel control={<MaterialUISwitch sx={{ m: 1 }} defaultChecked={settings.theme !== 'light'} onClick={onClick} />} label={open ? 'Theme switch' : ''} />;
 };

packages/client/src/graphql/billable-hours/billable-hours.graphql

@@ -0,0 +1,11 @@
+mutation createOrUpdateBillableHours($input: BillableHoursCreateInput!) {
+    createOrUpdateBillableHours(input: $input) {
+        id
+        employeeId
+        projectId
+        precalculatedHours
+        billableHours
+        startDate
+        endDate
+    }
+}

packages/client/src/graphql/billable-hours/billable-hours.ts

@@ -0,0 +1,66 @@
+/* Generated File DO NOT EDIT. */
+/* tslint:disable */
+import * as Types from '../graphql';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type CreateOrUpdateBillableHoursMutationVariables = Types.Exact<{
+  input: Types.BillableHoursCreateInput;
+}>;
+
+export type CreateOrUpdateBillableHoursMutation = {
+  __typename?: 'Mutation';
+  createOrUpdateBillableHours: {
+    __typename?: 'BillableHoursModel';
+    id: string;
+    employeeId: string;
+    projectId: string;
+    precalculatedHours: number;
+    billableHours: number;
+    startDate: any;
+    endDate: any;
+  };
+};
+
+export const CreateOrUpdateBillableHoursDocument = gql`
+  mutation createOrUpdateBillableHours($input: BillableHoursCreateInput!) {
+    createOrUpdateBillableHours(input: $input) {
+      id
+      employeeId
+      projectId
+      precalculatedHours
+      billableHours
+      startDate
+      endDate
+    }
+  }
+`;
+export type CreateOrUpdateBillableHoursMutationFn = Apollo.MutationFunction<CreateOrUpdateBillableHoursMutation, CreateOrUpdateBillableHoursMutationVariables>;
+
+/**
+ * __useCreateOrUpdateBillableHoursMutation__
+ *
+ * To run a mutation, you first call `useCreateOrUpdateBillableHoursMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateOrUpdateBillableHoursMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [createOrUpdateBillableHoursMutation, { data, loading, error }] = useCreateOrUpdateBillableHoursMutation({
+ *   variables: {
+ *      input: // value for 'input'
+ *   },
+ * });
+ */
+export function useCreateOrUpdateBillableHoursMutation(
+  baseOptions?: Apollo.MutationHookOptions<CreateOrUpdateBillableHoursMutation, CreateOrUpdateBillableHoursMutationVariables>
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useMutation<CreateOrUpdateBillableHoursMutation, CreateOrUpdateBillableHoursMutationVariables>(CreateOrUpdateBillableHoursDocument, options);
+}
+export type CreateOrUpdateBillableHoursMutationHookResult = ReturnType<typeof useCreateOrUpdateBillableHoursMutation>;
+export type CreateOrUpdateBillableHoursMutationResult = Apollo.MutationResult<CreateOrUpdateBillableHoursMutation>;
+export type CreateOrUpdateBillableHoursMutationOptions = Apollo.BaseMutationOptions<CreateOrUpdateBillableHoursMutation, CreateOrUpdateBillableHoursMutationVariables>;

packages/client/src/graphql/employee/employee.graphql

@@ -14,6 +14,7 @@ query getEmployeesWithRecord($startDate: DateTime!, $endDate: DateTime!) {
     status
     workHours
     indirectHours
+    precalculatedHours
     billableHours
     inner {
       projectId
@@ -22,6 +23,8 @@ query getEmployeesWithRecord($startDate: DateTime!, $endDate: DateTime!) {
       projectWorkHours
       projectPercentage
       projectIndirectHours
+      precalculatedHours
+      billableHours
     }
   }
 }
@@ -45,6 +48,7 @@ query getProjectWithEmployeeRecords($startDate: DateTime!, $endDate: DateTime!)
       employeeWorkHours
       employeeIndirectHours
       employeePercentage
+      employeeBillableHours
     }
 
   }

packages/client/src/graphql/employee/employee.ts

@@ -23,6 +23,7 @@ export type GetEmployeesWithRecordQuery = {
     status: string;
     workHours: number;
     indirectHours: number;
+    precalculatedHours: number;
     billableHours: number;
     inner: Array<{
       __typename?: 'EmployeeWithRecordInner';
@@ -32,6 +33,8 @@ export type GetEmployeesWithRecordQuery = {
       projectWorkHours: number;
       projectPercentage: string;
       projectIndirectHours: number;
+      precalculatedHours?: number | null;
+      billableHours?: number | null;
     }>;
   }>;
 };
@@ -63,6 +66,7 @@ export type GetProjectWithEmployeeRecordsQuery = {
       employeeWorkHours: number;
       employeeIndirectHours: number;
       employeePercentage: string;
+      employeeBillableHours: number;
     }>;
   }>;
 };
@@ -178,6 +182,7 @@ export const GetEmployeesWithRecordDocument = gql`
       status
       workHours
       indirectHours
+      precalculatedHours
       billableHours
       inner {
         projectId
@@ -186,6 +191,8 @@ export const GetEmployeesWithRecordDocument = gql`
         projectWorkHours
         projectPercentage
         projectIndirectHours
+        precalculatedHours
+        billableHours
       }
     }
   }
@@ -239,6 +246,7 @@ export const GetProjectWithEmployeeRecordsDocument = gql`
         employeeWorkHours
         employeeIndirectHours
         employeePercentage
+        employeeBillableHours
       }
     }
   }

packages/client/src/graphql/graphql-provider.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useEffect } from 'react';
 import { ApolloClient, ApolloProvider, from, HttpLink, InMemoryCache } from '@apollo/client';
 import { useSettings } from '@context/setting.context';
-import { LoadingScreen } from '@components/loading-screen';
+import { LoadingScreen } from '@components/LoadingScreen';
 
 export interface GraphqlProviderProps {
   children: React.ReactNode;

packages/client/src/graphql/graphql.ts

@@ -33,6 +33,26 @@ export type BatchSendSlackMessageInput = {
   message: Scalars['String'];
 };
 
+export type BillableHoursCreateInput = {
+  billableHours: Scalars['Float'];
+  employeeId: Scalars['String'];
+  endDate: Scalars['DateTime'];
+  precalculatedHours: Scalars['Float'];
+  projectId: Scalars['String'];
+  startDate: Scalars['DateTime'];
+};
+
+export type BillableHoursModel = {
+  __typename?: 'BillableHoursModel';
+  billableHours: Scalars['Float'];
+  employeeId: Scalars['String'];
+  endDate: Scalars['DateTime'];
+  id: Scalars['ID'];
+  precalculatedHours: Scalars['Float'];
+  projectId: Scalars['String'];
+  startDate: Scalars['DateTime'];
+};
+
 export type ClickUpStatuses = {
   __typename?: 'ClickUpStatuses';
   color: Scalars['String'];
@@ -139,15 +159,18 @@ export type EmployeeWithRecord = {
   indirectHours: Scalars['Float'];
   inner: Array<EmployeeWithRecordInner>;
   name: Scalars['String'];
+  precalculatedHours: Scalars['Float'];
   status: Scalars['String'];
   workHours: Scalars['Float'];
 };
 
 export type EmployeeWithRecordInner = {
   __typename?: 'EmployeeWithRecordInner';
+  billableHours?: Maybe<Scalars['Float']>;
   contractTypeId: Scalars['Float'];
   fte: Scalars['Float'];
   isBillable: Scalars['Boolean'];
+  precalculatedHours?: Maybe<Scalars['Float']>;
   projectId: Scalars['String'];
   projectIndirectHours: Scalars['Float'];
   projectName: Scalars['String'];
@@ -274,6 +297,7 @@ export type Mutation = {
   batchSendingMessages: BatchResponseModel;
   createAndAddClickUpTaskToInvoice: ClickUpTaskModel;
   createClickUpTask: ClickUpTaskModel;
+  createOrUpdateBillableHours: BillableHoursModel;
   createOrUpdateInvoice: InvoiceModel;
   deleteComment: CommentModel;
   deleteEmployees: EmployeeDeleteReturnModel;
@@ -322,6 +346,10 @@ export type MutationCreateClickUpTaskArgs = {
   task: ClickUpTaskCreateInput;
 };
 
+export type MutationCreateOrUpdateBillableHoursArgs = {
+  input: BillableHoursCreateInput;
+};
+
 export type MutationCreateOrUpdateInvoiceArgs = {
   invoice: InvoiceCreateInput;
 };
@@ -442,6 +470,7 @@ export type ProjectWithEmployeeRecords = {
 
 export type ProjectWithEmployeeRecordsInner = {
   __typename?: 'ProjectWithEmployeeRecordsInner';
+  employeeBillableHours: Scalars['Float'];
   employeeId: Scalars['String'];
   employeeIndirectHours: Scalars['Float'];
   employeeName: Scalars['String'];
@@ -538,6 +567,7 @@ export type RecordInsertOrUpdateModel = {
   date: Scalars['DateTime'];
   employeeId: Scalars['ID'];
   hours: Scalars['Float'];
+  id?: Maybe<Scalars['String']>;
   projectId: Scalars['ID'];
 };
 
@@ -547,6 +577,7 @@ export type RecordModel = {
   employee: EmployeeModel;
   employeeId: Scalars['ID'];
   hours: Scalars['Float'];
+  id?: Maybe<Scalars['String']>;
   project: ProjectModel;
   projectId: Scalars['ID'];
 };

packages/client/src/graphql/record/record.graphql

@@ -15,6 +15,7 @@ mutation deleteRecord($input: RecordDeleteInput!) {
 
 query getRecordsByDateRange($input: DateRangeInput!) {
   getRecordsByDateRange(input: $input) {
+    id
     date
     hours
     employee {

packages/client/src/graphql/record/record.ts

@@ -28,6 +28,7 @@ export type GetRecordsByDateRangeQuery = {
   __typename?: 'Query';
   getRecordsByDateRange: Array<{
     __typename?: 'RecordModel';
+    id?: string | null;
     date: any;
     hours: number;
     employee: { __typename?: 'EmployeeModel'; name: string };
@@ -107,6 +108,7 @@ export type DeleteRecordMutationOptions = Apollo.BaseMutationOptions<DeleteRecor
 export const GetRecordsByDateRangeDocument = gql`
   query getRecordsByDateRange($input: DateRangeInput!) {
     getRecordsByDateRange(input: $input) {
+      id
       date
       hours
       employee {