[Feat]: Set Working Hours #3501
Conversation
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
apps/web/app/[locale]/settings/personal/page.tsxOops! Something went wrong! :( ESLint: 8.46.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/apps/web/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. WalkthroughThis pull request introduces a comprehensive working hours feature for the Ever Teams platform. The changes span multiple files to implement a new Changes
Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Report too large to display inline |
|
🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎ To accept the risk, merge this PR and you will not be notified again.
Next stepsWhat is a critical CVE?Contains a Critical Common Vulnerability and Exposure (CVE). Remove or replace dependencies that include known critical CVEs. Consumers can use dependency overrides or npm audit fix --force to remove vulnerable dependencies. Take a deeper look at the dependencyTake a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev. Remove the packageIf you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency. Mark a package as acceptable riskTo ignore an alert, reply with a comment starting with
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (4)
apps/web/components/ui/time-picker.tsx (2)
11-21: Optimize time options generationThe
generateTimeOptionsfunction is called on every render. Consider memoizing the result or moving it outside the component.+const TIME_OPTIONS = generateTimeOptions(); + export const TimePicker: React.FC<TimePickerProps> = ({ value, onChange, disabled }) => { const [inputValue, setInputValue] = useState(value); const [isEditing, setIsEditing] = useState(false); - const timeOptions = generateTimeOptions();
5-9: Add error handling to props interfaceThe component lacks error state handling. Consider adding error-related props to handle and display validation errors.
interface TimePickerProps { value: string; onChange: (value: string) => void; disabled?: boolean; + error?: boolean; + errorMessage?: string; }apps/web/lib/settings/working-hours.tsx (1)
155-159: Move inline styles to CSS classesThe
ToggleSwitchcomponent uses inline styles. Consider moving these to CSS classes for better maintainability.<div - className={`w-14 h-6 flex items-center rounded-full p-1 cursor-pointer transition-colors`} + className={`w-14 h-6 flex items-center rounded-full p-1 cursor-pointer transition-colors ${ + enabled ? 'bg-success-light' : 'bg-danger-gradient' + }`} onClick={onToggle} - style={ - enabled - ? { background: '#2ead805b' } - : { background: 'linear-gradient(to right, #ea31244d, #ea312479)' } - }>apps/web/app/[locale]/timesheet/[memberId]/page.tsx (1)
270-288: LGTM! Consider memoizing the data prop calculation.The conditional rendering logic and component composition look good. The SelectedTimesheet component is properly shown only when timesheets are selected.
Consider memoizing the data prop calculation to prevent unnecessary recalculations:
+const calendarData = useMemo(() => + shouldRenderPagination ? paginatedGroups : filterDataTimesheet, + [shouldRenderPagination, paginatedGroups, filterDataTimesheet] +); <CalendarView user={user} - data={shouldRenderPagination ? paginatedGroups : filterDataTimesheet} + data={calendarData} loading={loadingTimesheet} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (6)
apps/web/app/[locale]/settings/personal/page.tsx(2 hunks)apps/web/app/[locale]/timesheet/[memberId]/page.tsx(2 hunks)apps/web/app/hooks/useLeftSettingData.ts(1 hunks)apps/web/components/ui/time-picker.tsx(1 hunks)apps/web/lib/components/toggler.tsx(7 hunks)apps/web/lib/settings/working-hours.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- apps/web/lib/components/toggler.tsx
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Codacy Static Code Analysis
- GitHub Check: deploy
- GitHub Check: deploy
🔇 Additional comments (2)
apps/web/lib/settings/working-hours.tsx (1)
31-39: 🛠️ Refactor suggestionAdd form submission handling
The component uses
useFormbut doesn't implement form submission. Consider adding a submit handler to save the working hours configuration.export const WorkingHours: React.FC<WorkScheduleProps> = ({ initialSchedule }) => { const [currentTimezone, setCurrentTimezone] = React.useState(''); const [user] = useAtom(userState); - const { setValue } = useForm(); + const { setValue, handleSubmit } = useForm(); const [schedule, setSchedule] = React.useState<WorkDay[]>( initialSchedule || defaultWorkDays ); + + const onSubmit = async (data: any) => { + // TODO: Implement save functionality + };apps/web/app/[locale]/timesheet/[memberId]/page.tsx (1)
305-305: Formatting change
Description
#3171
Please include a summary of the changes and the related issue.
Type of Change
Checklist
Previous screenshots
Please add here videos or images of previous status
Current screenshots
Please add here videos or images of previous status
Summary by CodeRabbit
Release Notes
New Features
Improvements
UI Updates