apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx (1)

31-43: Consider extracting color values and improving dark mode handling

While the button configuration structure is well-organized, the styling could be improved:

1. Extract hardcoded colors like #2932417c into CSS variables or a theme configuration
2. Consider using Tailwind's color palette instead of hex values for better consistency
3. Implement a more systematic approach to dark mode styling

Example refactor:

- className="!text-[#2932417c] dark:!text-gray-400 rounded"
+ className="!text-gray-600/50 dark:!text-gray-400 rounded"

apps/web/app/[locale]/timesheet/[memberId]/page.tsx (3)

141-141: Consider using CSS variables for the height calculation.

The magic number 291px in the height calculation (calc(100vh-_291px)) could cause maintenance issues. Consider:

1. Using CSS variables to store header heights
2. Using React refs to calculate dynamic heights
3. Adding a comment explaining the calculation

Example using CSS variables:

-<div className='h-[calc(100vh-_291px)] mt-3 overflow-y-auto border border-gray-200 rounded-lg dark:border-gray-800'>
+<div className='h-[calc(100vh-var(--header-height)-var(--filters-height))] mt-3 overflow-y-auto border border-gray-200 rounded-lg dark:border-gray-800'>

---

175-175: Improve documentation and remove sensitive information.

The URL comment should:

1. Explain why this URL is relevant (e.g., "Reference implementation for timesheet layout")
2. Remove sensitive information (organizationId)
3. Consider moving to project documentation if it's a long-term reference

-// https://demo.gauzy.co/#/pages/employees/timesheets/daily?organizationId=e4a6eeb6-3f13-4712-b880-34aa9ef1dd2f&date=2024-11-02&date_end=2024-11-02&unit_of_time=day&is_custom_date=false
+// Reference implementation: https://demo.gauzy.co/#/pages/employees/timesheets/daily

---

Line range hint 1-175: Consider component decomposition and search optimization.

The TimeSheet component has grown to handle multiple responsibilities. Consider:

1. Extracting the search functionality into a separate SearchBar component
2. Adding debounce to the search input to prevent excessive re-renders
3. Moving the ViewToggleButton to a separate file since it's a reusable component

apps/web/lib/features/manual-time/add-manual-time-modal.tsx (6)

Line range hint 19-31: Update interface documentation to include the new timeSheetStatus prop

The interface documentation needs to be updated to include the newly added timeSheetStatus prop in the JSDoc comments.

Add the following to the interface documentation:

 * @property {boolean} isOpen - Indicates whether the modal is open or closed.
 * @property {"AddManuelTime" | "AddTime"} params - Determines the context in which the modal is used, either "AddManuelTime" for the Add Manuel Time view or "AddTime" for the   Add time.
 * @property {() => void} closeModal - Callback function to be called to close the modal.
+* @property {'ManagerTimesheet' | 'TeamMemberTimesheet'} [timeSheetStatus] - Optional prop to determine the context of the timesheet view.

---

204-204: Optimize modal styling classes

The className can be simplified by:

1. Removing redundant h-[auto] as it's the default behavior
2. Consolidating width classes

-className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl w-full md:w-40 md:min-w-[24rem] h-[auto] justify-start"
+className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl w-full md:min-w-[24rem] justify-start"

---

Line range hint 283-289: Remove debug console.log statements

Debug console.log statements should be removed before merging to production.

  const handleSelectedValuesChange = (values: { [key: string]: Item | null }) => {
-   console.log(values);
  };

  const handleChange = (field: string, selectedItem: Item | null) => {
-   console.log(`Field: ${field}, Selected Item:`, selectedItem);
  };

---

Line range hint 89-108: Refactor time validation logic and internationalize error messages

The time validation logic could be extracted into a separate utility function for better maintainability and reusability. Additionally, error messages should be internationalized using the translation system.

Consider refactoring like this:

const validateTimeRange = (startTime: string, endTime: string): boolean => {
  return endTime > startTime;
};

const handleSubmit = useCallback(
  (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (!date || !startTime || !endTime || !team || !taskId) {
      setErrorMsg(t('manualTime.errors.REQUIRED_FIELDS'));
      return;
    }

    if (!validateTimeRange(startTime, endTime)) {
      setErrorMsg(t('manualTime.errors.INVALID_TIME_RANGE'));
      return;
    }

    // ... rest of the submit logic
  },
  [/* ... dependencies ... */]
);

---

Line range hint 291-299: Remove commented out code

Remove the commented out team selection code block as it's no longer needed.

- {/* <div className="">
-   <label className="block text-gray-500 mb-1">
-     {t('manualTime.TEAM')}<span className="text-[#de5505e1] ml-1">*</span>
-   </label>
-   {
-     activeTeam ?
-       <SelectItems ... />
-       : <></>
-   }
- </div> */}

---

Line range hint 1-516: Consider breaking down the component for better maintainability

The component is quite large and handles multiple responsibilities. Consider breaking it down into smaller, more focused components:

1. TimeRangeSelector for date and time inputs
2. BillableToggle for the billable switch
3. TaskSelectionForm for task-related fields
4. DescriptionField for the description textarea

This would improve maintainability and make the code more testable.

Would you like me to provide an example of how to break down this component?

apps/web/lib/features/integrations/calendar/table-time-sheet.tsx (3)

232-234: Consider adding onReject callback prop

The modal integration looks good, but consider adding an onReject callback prop to handle the rejection action when confirmed.

 {<RejectSelectedModal
     closeModal={closeModal}
-    isOpen={isOpen} />}
+    isOpen={isOpen}
+    onReject={(reason: string) => {
+        // Handle rejection with reason
+        closeModal();
+    }} />}

---

265-271: Consider memoizing the Badge component

The Badge component with static content could be memoized to prevent unnecessary re-renders.

+ const TimesheetBadge = React.memo(() => (
+     <Badge variant={'outline'} className="flex items-center gap-x-2 h-[25px] rounded-md bg-[#E4E4E7] dark:bg-gray-800">
+         <span className="text-[#5f5f61]">Total</span>
+         <span className="text-[#868688]">24:30h</span>
+     </Badge>
+ ));

  // Replace the inline Badge with the memoized component
- <Badge variant={'outline'} className="flex items-center gap-x-2 h-[25px] rounded-md bg-[#E4E4E7] dark:bg-gray-800">
-     <span className="text-[#5f5f61]">Total</span>
-     <span className="text-[#868688]">24:30h</span>
- </Badge>
+ <TimesheetBadge />

---

279-280: Consider extracting styles to a constant

The inline styles and className could be organized better for reusability and maintainability.

+ const getTaskItemStyles = (status: StatusType) => ({
+   style: { backgroundColor: statusColor(status).bgOpacity, borderBottomColor: statusColor(status).bg },
+   className: clsxm(
+     "flex items-center border-b border-b-gray-200 dark:border-b-gray-600 space-x-4 p-1 h-[60px]"
+   )
+ });

- style={{ backgroundColor: statusColor(status).bgOpacity, borderBottomColor: statusColor(status).bg }}
- className={clsxm("flex items-center border-b border-b-gray-200 dark:border-b-gray-600 space-x-4 p-1 h-[60px]")}
+ {...getTaskItemStyles(status)}

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Search for RejectSelectedModal usage in relation to this component
rg -l "RejectSelectedModal.*TimesheetAction" --type tsx

# Verify the rejection flow implementation
ast-grep --pattern 'onClick={$_} $$$' apps/web/app/[locale]/timesheet/[memberId]

#!/bin/bash
# Search for RejectSelectedModal usage in the codebase
rg "RejectSelectedModal" --type ts --type tsx -A 5

# Find files containing TimesheetAction
fd "TimesheetAction" --type f

# Look for onClick handlers in timesheet-related files
rg "onClick.*Reject" --type ts --type tsx -A 5

#!/bin/bash
# Search for RejectSelectedModal without file type restrictions
rg "RejectSelectedModal" -A 5

# Look at the content of TimesheetAction.tsx
cat apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx

# Search for rejection-related handlers without file type restrictions
rg "onClick.*Reject|handleReject" -A 5

apps/web/app/[locale]/timesheet/[memberId]/components/RejectSelectedModal.tsx (1)

4-10: Add default values for optional props and improve type safety.

While the interface is well-defined, the component could benefit from default values for optional props and stricter type checking.

 export interface IRejectSelectedModalProps {
     isOpen: boolean;
     closeModal: () => void;
     onReject: (reason: string) => void;
-    minReasonLength?: number;
-    maxReasonLength?: number;
+    minReasonLength?: number | undefined;
+    maxReasonLength?: number | undefined;
 }

+const DEFAULT_MIN_LENGTH = 10;
+const DEFAULT_MAX_LENGTH = 120;

apps/web/lib/features/integrations/calendar/table-time-sheet.tsx (1)

257-257: Consider improving style maintainability

A few suggestions to improve the styling implementation:

1. Consider using CSS variables for the height value instead of hardcoding h-[50px]
2. The style properties could be consolidated into a single className using your styling system

Consider this approach:

- style={{ backgroundColor: statusColor(status).bgOpacity, borderBottomColor: statusColor(status).bg }}
- className={clsxm("flex items-center border-b border-b-gray-200 dark:border-b-gray-600 space-x-4 p-1 h-[60px]")}
+ className={clsxm(
+   "flex items-center border-b space-x-4 p-1",
+   "border-b-gray-200 dark:border-b-gray-600",
+   "h-[var(--task-item-height)]",
+   statusColor(status).className
+ )}

Add to your CSS:

:root {
  --task-item-height: 60px;
}

Also applies to: 284-285

Configuration used: CodeRabbit UI
Review profile: CHILL