From eb05f7030a151372640180f8860e036dee3a9826 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Fri, 10 Jan 2025 09:23:26 +0200
Subject: [PATCH] [Feat]: Set Working Hours (#3501)

* feat: add TimePicker component with time selection and input editing

* feat(WorkingHours): add configurable working hours component

* fix: add timezone component

* feat: create reusable ToggleSwitch component with dynamic styles and icons
---
 .../app/[locale]/settings/personal/page.tsx   |   7 +
 .../[locale]/timesheet/[memberId]/page.tsx    |  35 ++--
 apps/web/app/hooks/useLeftSettingData.ts      |   5 +
 apps/web/components/ui/time-picker.tsx        | 125 +++++++++++++
 apps/web/lib/components/toggler.tsx           |  17 +-
 apps/web/lib/settings/working-hours.tsx       | 165 ++++++++++++++++++
 yarn.lock                                     | 155 +++++++---------
 7 files changed, 394 insertions(+), 115 deletions(-)
 create mode 100644 apps/web/components/ui/time-picker.tsx
 create mode 100644 apps/web/lib/settings/working-hours.tsx

diff --git a/apps/web/app/[locale]/settings/personal/page.tsx b/apps/web/app/[locale]/settings/personal/page.tsx
index 63bb4889d..cc38d86e4 100644
--- a/apps/web/app/[locale]/settings/personal/page.tsx
+++ b/apps/web/app/[locale]/settings/personal/page.tsx
@@ -6,6 +6,7 @@ import { Accordian } from 'lib/components/accordian';
 import Link from 'next/link';
 import { useTranslations } from 'next-intl';
 import { SyncZone } from 'lib/settings/sync.zone';
+import { WorkingHours } from '@/lib/settings/working-hours';
 
 const Personal = () => {
 	const t = useTranslations();
@@ -28,6 +29,12 @@ const Personal = () => {
 				<ProfileAvatar />
 				<PersonalSettingForm />
 			</Accordian>
+			<Accordian
+				title='Working hours'
+				className="p-4 mt-4 dark:bg-dark--theme"
+				id="working-hours">
+				<WorkingHours />
+			</Accordian>
 			<Accordian
 				title={t('pages.settingsPersonal.DATA_SYNCHRONIZATION')}
 				className="p-4 mt-4 dark:bg-dark--theme"
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
index c64fc3766..5b3156f80 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
@@ -267,15 +267,25 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
 									loading={loadingTimesheet}
 								/>
 							) : (
-								<CalendarView
-									user={user}
-									data={
-										shouldRenderPagination ?
-											paginatedGroups :
-											filterDataTimesheet
+								<>
+									<CalendarView
+										user={user}
+										data={
+											shouldRenderPagination ?
+												paginatedGroups :
+												filterDataTimesheet
+										}
+										loading={loadingTimesheet}
+									/>
+									{selectTimesheetId.length > 0 && <SelectedTimesheet
+										deleteTaskTimesheet={deleteTaskTimesheet}
+										fullWidth={fullWidth}
+										selectTimesheetId={selectTimesheetId}
+										setSelectTimesheetId={setSelectTimesheetId}
+										updateTimesheetStatus={updateTimesheetStatus}
+									/>
 									}
-									loading={loadingTimesheet}
-								/>
+								</>
 							)}
 							{shouldRenderPagination && (
 								<TimesheetPagination
@@ -292,14 +302,7 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
 							)}
 
 						</div>
-						{selectTimesheetId.length > 0 && <SelectedTimesheet
-							deleteTaskTimesheet={deleteTaskTimesheet}
-							fullWidth={fullWidth}
-							selectTimesheetId={selectTimesheetId}
-							setSelectTimesheetId={setSelectTimesheetId}
-							updateTimesheetStatus={updateTimesheetStatus}
-						/>
-						}
+
 					</Container>
 				</div>
 			</MainLayout>
diff --git a/apps/web/app/hooks/useLeftSettingData.ts b/apps/web/app/hooks/useLeftSettingData.ts
index 60172af88..940e8e408 100644
--- a/apps/web/app/hooks/useLeftSettingData.ts
+++ b/apps/web/app/hooks/useLeftSettingData.ts
@@ -8,6 +8,11 @@ export const useLeftSettingData = () => {
 			color: '#7E7991',
 			href: '#general'
 		},
+		{
+			title: 'Working hours',
+			color: '#7E7991',
+			href: '#working-hours',
+		},
 		// {
 		// 	title: t('pages.settingsPersonal.WORK_SCHEDULE'),
 		// 	color: '#7E7991',
diff --git a/apps/web/components/ui/time-picker.tsx b/apps/web/components/ui/time-picker.tsx
new file mode 100644
index 000000000..472cfa3fd
--- /dev/null
+++ b/apps/web/components/ui/time-picker.tsx
@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
+import { Input } from './input';
+
+interface TimePickerProps {
+    value: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+}
+
+const generateTimeOptions = () => {
+    const options: string[] = [];
+    for (let hour = 0; hour < 24; hour++) {
+        for (let minute = 0; minute < 60; minute += 10) {
+            const formattedHour = hour.toString().padStart(2, '0');
+            const formattedMinute = minute.toString().padStart(2, '0');
+            options.push(`${formattedHour}:${formattedMinute}`);
+        }
+    }
+    return options;
+};
+
+const isValidTimeFormat = (time: string): boolean => {
+    const timeRegex = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/;
+    return timeRegex.test(time);
+};
+
+const formatTime = (time: string): string => {
+    if (!time) return '';
+    const [hours, minutes] = time.split(':');
+    const formattedHours = hours.padStart(2, '0');
+    const formattedMinutes = minutes ? minutes.padStart(2, '0') : '00';
+    return `${formattedHours}:${formattedMinutes}`;
+};
+
+export const TimePicker: React.FC<TimePickerProps> = ({ value, onChange, disabled }) => {
+    const [inputValue, setInputValue] = useState(value);
+    const [isEditing, setIsEditing] = useState(false);
+    const timeOptions = generateTimeOptions();
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+
+        // Auto-format as user types
+        if (newValue.length === 2 && !newValue.includes(':')) {
+            setInputValue(newValue + ':');
+        }
+    };
+
+    const handleInputBlur = () => {
+        setIsEditing(false);
+        if (isValidTimeFormat(inputValue)) {
+            const formattedTime = formatTime(inputValue);
+            setInputValue(formattedTime);
+            onChange(formattedTime);
+        } else {
+            setInputValue(value);
+        }
+    };
+
+    const handleSelectChange = (newValue: string) => {
+        setInputValue(newValue);
+        onChange(newValue);
+    };
+
+    return (
+        <div className="relative bg-light--theme-light dark:bg-dark--theme-light dark:text-white font-normal">
+            {isEditing ? (
+                <Input
+                    type="text"
+                    value={inputValue}
+                    onChange={handleInputChange}
+                    onBlur={handleInputBlur}
+                    placeholder="HH:MM"
+                    className="w-[120px]"
+                    maxLength={5}
+                    disabled={disabled}
+                    pattern="[0-2][0-9]:[0-5][0-9]"
+                />
+            ) : (
+                <Select
+                    value={value}
+                    onValueChange={handleSelectChange}
+                    disabled={disabled}
+                    onOpenChange={(open) => {
+                        if (!open) {
+                            setIsEditing(false);
+                        }
+                    }}>
+                    <SelectTrigger
+                        className="w-[120px] bg-light--theme-light dark:bg-dark--theme-light dark:text-white font-normal border-[#0000001A] dark:border-[#26272C] "
+                        onClick={() => setIsEditing(true)}>
+                        <SelectValue placeholder="Select time">
+                            {value}
+                        </SelectValue>
+                    </SelectTrigger>
+                    <SelectContent className="max-h-[200px] overflow-y-auto ">
+                        <div className="p-2 border-b">
+                            <Input
+                                type="text"
+                                value={inputValue}
+                                onChange={handleInputChange}
+                                onBlur={handleInputBlur}
+                                placeholder="HH:MM"
+                                className="mb-2 bg-light--theme-light dark:bg-dark--theme-light dark:text-white font-normal "
+                                maxLength={5}
+                            />
+                        </div>
+                        <div className="overflow-y-auto">
+                            {timeOptions.map((time) => (
+                                <SelectItem
+                                    key={time}
+                                    value={time}
+                                    className="hover:bg-gray-100 dark:hover:bg-gray-800 bg-light--theme-light dark:bg-dark--theme-light dark:text-white font-normal ">
+                                    {time}
+                                </SelectItem>
+                            ))}
+                        </div>
+                    </SelectContent>
+                </Select>
+            )}
+        </div>
+    );
+};
diff --git a/apps/web/lib/components/toggler.tsx b/apps/web/lib/components/toggler.tsx
index af90396ee..a829be297 100644
--- a/apps/web/lib/components/toggler.tsx
+++ b/apps/web/lib/components/toggler.tsx
@@ -138,7 +138,7 @@ export function DataSyncToggler({ className }: IClassName) {
         className={clsxm(
           'flex flex-row justify-center items-center p-2 w-8 h-8 rounded-[60px] ml-[-2px]',
           dataSync &&
-            'bg-white text-primary shadow-md dark:bg-transparent dark:bg-[#3B4454]'
+          'bg-white text-primary shadow-md dark:bg-transparent dark:bg-[#3B4454]'
         )}
       >
         <UpdateIcon className="dark:text-white" />
@@ -149,7 +149,7 @@ export function DataSyncToggler({ className }: IClassName) {
         className={clsxm(
           'flex flex-row justify-center items-center p-2 w-8 h-8 rounded-[60px] mr-[-2px]',
           !dataSync &&
-            'bg-red-400 shadow-md dark:bg-transparent dark:bg-red-400'
+          'bg-red-400 shadow-md dark:bg-transparent dark:bg-red-400'
         )}
       >
         <Cross2Icon className={clsxm(!dataSync && 'text-white')} />
@@ -186,7 +186,7 @@ export function DataSyncModeToggler({ className }: IClassName) {
           className={clsxm(
             'flex flex-row justify-center items-center p-2 w-8 h-8 rounded-[60px] ml-[-2px]',
             dataSyncMode == 'REAL_TIME' &&
-              'bg-white text-primary shadow-md dark:bg-transparent dark:bg-[#3B4454]'
+            'bg-white text-primary shadow-md dark:bg-transparent dark:bg-[#3B4454]'
           )}
         >
           <LightningBoltIcon className="dark:text-white" />
@@ -197,7 +197,7 @@ export function DataSyncModeToggler({ className }: IClassName) {
           className={clsxm(
             'flex flex-row justify-center items-center p-2 w-8 h-8 rounded-[60px] mr-[-2px]',
             dataSyncMode == 'PULL' &&
-              'bg-white shadow-md dark:bg-transparent dark:bg-[#3B4454]'
+            'bg-white shadow-md dark:bg-transparent dark:bg-[#3B4454]'
           )}
         >
           <UpdateIcon className="dark:text-white" />
@@ -234,9 +234,8 @@ export function CommonToggle({
       >
         <span
           aria-hidden="true"
-          className={`${
-            enabled ? 'translate-x-9 bg-[#3826A6]' : 'translate-x-1'
-          }
+          className={`${enabled ? 'translate-x-9 bg-[#3826A6]' : 'translate-x-1'
+            }
             pointer-events-none inline-block h-[30px] w-[30px] mt-[2.5px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`}
         />
       </Switch>
@@ -270,7 +269,7 @@ export function FullWidthToggler({ className }: IClassName) {
         className={clsxm(
           'flex flex-row justify-center items-center p-2 w-8 h-8 rounded-[60px] ml-[-2px]',
           fullWidth &&
-            'bg-white text-primary shadow-md dark:bg-transparent dark:bg-[#3B4454]'
+          'bg-white text-primary shadow-md dark:bg-transparent dark:bg-[#3B4454]'
         )}
       >
         <AllSidesIcon className="dark:text-white" />
@@ -281,7 +280,7 @@ export function FullWidthToggler({ className }: IClassName) {
         className={clsxm(
           'flex flex-row justify-center items-center p-2 w-8 h-8 rounded-[60px] mr-[-2px]',
           !fullWidth &&
-            'bg-red-400 shadow-md dark:bg-transparent dark:bg-red-400'
+          'bg-red-400 shadow-md dark:bg-transparent dark:bg-red-400'
         )}
       >
         <Cross2Icon className={clsxm(!fullWidth && 'text-white')} />
diff --git a/apps/web/lib/settings/working-hours.tsx b/apps/web/lib/settings/working-hours.tsx
new file mode 100644
index 000000000..9574ac264
--- /dev/null
+++ b/apps/web/lib/settings/working-hours.tsx
@@ -0,0 +1,165 @@
+import React from 'react';
+import { TimePicker } from '@/components/ui/time-picker';
+import { TimezoneDropDown } from './timezone-dropdown';
+import { getActiveLanguageIdCookie, getActiveTimezoneIdCookie, setActiveTimezoneCookie, userTimezone } from '@/app/helpers';
+import { useForm } from 'react-hook-form';
+import { useAtom } from 'jotai';
+import { userState } from '@/app/stores';
+import { renderTrackingIcon } from './table-action-popover';
+
+interface WorkDay {
+    day: string;
+    startTime: string;
+    endTime: string;
+    enabled: boolean;
+}
+
+interface WorkScheduleProps {
+    initialSchedule?: WorkDay[];
+}
+
+const defaultWorkDays: WorkDay[] = [
+    { day: 'Monday', startTime: '09:00', endTime: '17:00', enabled: true },
+    { day: 'Tuesday', startTime: '09:00', endTime: '17:00', enabled: true },
+    { day: 'Wednesday', startTime: '09:00', endTime: '17:00', enabled: true },
+    { day: 'Thursday', startTime: '09:00', endTime: '17:00', enabled: true },
+    { day: 'Friday', startTime: '09:00', endTime: '17:00', enabled: true },
+    { day: 'Saturday', startTime: '09:00', endTime: '17:00', enabled: false },
+    { day: 'Sunday', startTime: '09:00', endTime: '17:00', enabled: false },
+];
+
+export const WorkingHours: React.FC<WorkScheduleProps> = ({ initialSchedule }) => {
+    const [currentTimezone, setCurrentTimezone] = React.useState('');
+    const [user] = useAtom(userState);
+
+    const { setValue } = useForm();
+
+    const [schedule, setSchedule] = React.useState<WorkDay[]>(
+        initialSchedule || defaultWorkDays
+    );
+    const handleChangeTimezone = React.useCallback(
+        (newTimezone: string | undefined) => {
+            setActiveTimezoneCookie(newTimezone || userTimezone());
+            setCurrentTimezone(newTimezone || userTimezone());
+            setValue('timeZone', newTimezone || userTimezone());
+
+        },
+        [setCurrentTimezone, setValue]
+    );
+    React.useEffect(() => {
+        setCurrentTimezone(user?.timeZone || getActiveTimezoneIdCookie());
+        setValue('timeZone', user?.timeZone || getActiveTimezoneIdCookie());
+    }, [setCurrentTimezone, setValue, user, user?.timeZone]);
+    React.useEffect(() => {
+
+        /**
+         * Set Default current timezone.
+         * User can change it anytime if wants
+         */
+        if (!user?.timeZone) {
+            handleChangeTimezone(undefined);
+        }
+    }, [currentTimezone, setValue, handleChangeTimezone]);
+
+    React.useEffect(() => {
+        setValue(
+            'preferredLanguage',
+            user?.preferredLanguage || getActiveLanguageIdCookie()
+        );
+    }, [user, user?.preferredLanguage, setValue]);
+
+    const handleTimeChange = (index: number, field: 'startTime' | 'endTime', value: string) => {
+        const newSchedule = [...schedule];
+        newSchedule[index] = {
+            ...newSchedule[index],
+            [field]: value,
+        };
+        setSchedule(newSchedule);
+    };
+
+    const handleToggleDay = (index: number) => {
+        const newSchedule = [...schedule];
+        newSchedule[index] = {
+            ...newSchedule[index],
+            enabled: !newSchedule[index].enabled,
+        };
+        setSchedule(newSchedule);
+    };
+
+    return (
+        <div className="p-6">
+            <div className="space-y-4">
+                <div className='flex items-center space-x-4'>
+                    <span className='text-2xl'>Timezone</span>
+                    <TimezoneDropDown
+                        currentTimezone={currentTimezone}
+                        onChangeTimezone={(t: string) => {
+                            handleChangeTimezone(t);
+                        }}
+                    />
+                </div>
+                {schedule.map((workDay, index) => (
+                    <div key={workDay.day} className="flex items-center space-x-4 gap-4">
+                        <div className="w-32">
+                            <label className="inline-flex items-center">
+                                <ToggleSwitch
+                                    key={index}
+                                    enabled={workDay.enabled}
+                                    onToggle={() => handleToggleDay(index)}
+                                    renderTrackingIcon={renderTrackingIcon}
+                                />
+                                <span className="ml-2">{workDay.day}</span>
+                            </label>
+                        </div>
+                        <div className="flex items-center space-x-4">
+                            <TimePicker
+                                value={workDay.startTime}
+                                onChange={(value) => handleTimeChange(index, 'startTime', value)}
+                                disabled={!workDay.enabled}
+                            />
+                            <span>to</span>
+                            <TimePicker
+                                value={workDay.endTime}
+                                onChange={(value) => handleTimeChange(index, 'endTime', value)}
+                                disabled={!workDay.enabled}
+                            />
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+
+interface ToggleSwitchProps {
+    enabled: boolean;
+    onToggle: () => void;
+    renderTrackingIcon: (enabled: boolean) => React.ReactNode;
+}
+
+/**
+ * A toggle switch component that can be used to toggle a setting on and off.
+ * The component takes in three props: enabled, onToggle, and renderTrackingIcon.
+ * The enabled prop is a boolean that indicates whether the setting is currently enabled or not.
+ * The onToggle prop is a function that is called when the user clicks on the toggle switch.
+ * The renderTrackingIcon prop is a function that is called to render the icon that is displayed
+ * on the toggle switch. The function takes a boolean argument indicating whether the setting
+ * is enabled or not.
+ */
+export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({ enabled, onToggle, renderTrackingIcon }) => {
+    return (
+        <div
+            className={`w-14 h-6 flex items-center rounded-full p-1 cursor-pointer transition-colors`}
+            onClick={onToggle}
+            style={
+                enabled
+                    ? { background: '#2ead805b' }
+                    : { background: 'linear-gradient(to right, #ea31244d, #ea312479)' }
+            }>
+            <div className={`w-4 h-4 rounded-full shadow-md transform transition-transform  ${enabled ? 'translate-x-0 bg-[#2ead81]' : 'translate-x-9 bg-[#ea3124]'}`}>
+                {renderTrackingIcon(!enabled)}
+            </div>
+        </div>
+    );
+};
diff --git a/yarn.lock b/yarn.lock
index a049bc3d4..1a1cd58b4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4074,10 +4074,10 @@
     jsonc-parser "3.2.0"
     pluralize "8.0.0"
 
-"@next/env@14.2.17":
-  version "14.2.17"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.17.tgz#bcb2c84fca50a38ec5b492d1029b8f41b0900594"
-  integrity sha512-MCgO7VHxXo8sYR/0z+sk9fGyJJU636JyRmkjc7ZJY8Hurl8df35qG5hoAh5KMs75FLjhlEo9bb2LGe89Y/scDA==
+"@next/env@14.2.21":
+  version "14.2.21"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.21.tgz#09ff0813d29c596397e141205d4f5fd5c236bdd0"
+  integrity sha512-lXcwcJd5oR01tggjWJ6SrNNYFGuOOMB9c251wUNkjCpkoXOPkDeF/15c3mnVlBqrW4JJXb2kVxDFhC4GduJt2A==
 
 "@next/eslint-plugin-next@14.0.4":
   version "14.0.4"
@@ -4093,50 +4093,50 @@
   dependencies:
     glob "7.1.7"
 
-"@next/swc-darwin-arm64@14.2.17":
-  version "14.2.17"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.17.tgz#f1e38727eb94cf198f63fddcb19002bd4cc971dc"
-  integrity sha512-WiOf5nElPknrhRMTipXYTJcUz7+8IAjOYw3vXzj3BYRcVY0hRHKWgTgQ5439EvzQyHEko77XK+yN9x9OJ0oOog==
-
-"@next/swc-darwin-x64@14.2.17":
-  version "14.2.17"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.17.tgz#e29a17ef28d97c347c7d021f391e13b6c8e4c813"
-  integrity sha512-29y425wYnL17cvtxrDQWC3CkXe/oRrdt8ie61S03VrpwpPRI0XsnTvtKO06XCisK4alaMnZlf8riwZIbJTaSHQ==
-
-"@next/swc-linux-arm64-gnu@14.2.17":
-  version "14.2.17"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.17.tgz#10e99c7aa60cc33f8b7633e045f74be9a43e7b0c"
-  integrity sha512-SSHLZls3ZwNEHsc+d0ynKS+7Af0Nr8+KTUBAy9pm6xz9SHkJ/TeuEg6W3cbbcMSh6j4ITvrjv3Oi8n27VR+IPw==
-
-"@next/swc-linux-arm64-musl@14.2.17":
-  version "14.2.17"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.17.tgz#9a5bb809d3c6aef96c409959aedae28b4e5db53d"
-  integrity sha512-VFge37us5LNPatB4F7iYeuGs9Dprqe4ZkW7lOEJM91r+Wf8EIdViWHLpIwfdDXinvCdLl6b4VyLpEBwpkctJHA==
-
-"@next/swc-linux-x64-gnu@14.2.17":
-  version "14.2.17"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.17.tgz#64e0ce01870e6dc45ae48f676d7cce82aedcdc62"
-  integrity sha512-aaQlpxUVb9RZ41adlTYVQ3xvYEfBPUC8+6rDgmQ/0l7SvK8S1YNJzPmDPX6a4t0jLtIoNk7j+nroS/pB4nx7vQ==
-
-"@next/swc-linux-x64-musl@14.2.17":
-  version "14.2.17"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.17.tgz#93114164b6ccfc533908193ab9065f0c3970abc3"
-  integrity sha512-HSyEiFaEY3ay5iATDqEup5WAfrhMATNJm8dYx3ZxL+e9eKv10XKZCwtZByDoLST7CyBmyDz+OFJL1wigyXeaoA==
-
-"@next/swc-win32-arm64-msvc@14.2.17":
-  version "14.2.17"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.17.tgz#4b99dea02178c112e5c33c742f9ff2a49b3b2939"
-  integrity sha512-h5qM9Btqv87eYH8ArrnLoAHLyi79oPTP2vlGNSg4CDvUiXgi7l0+5KuEGp5pJoMhjuv9ChRdm7mRlUUACeBt4w==
-
-"@next/swc-win32-ia32-msvc@14.2.17":
-  version "14.2.17"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.17.tgz#f1c23955405a259b6d45c65f918575b01bcf0106"
-  integrity sha512-BD/G++GKSLexQjdyoEUgyo5nClU7er5rK0sE+HlEqnldJSm96CIr/+YOTT063LVTT/dUOeQsNgp5DXr86/K7/A==
-
-"@next/swc-win32-x64-msvc@14.2.17":
-  version "14.2.17"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.17.tgz#44f5a4fcd8df1396a8d4326510ca2d92fb809cb3"
-  integrity sha512-vkQfN1+4V4KqDibkW2q0sJ6CxQuXq5l2ma3z0BRcfIqkAMZiiW67T9yCpwqJKP68QghBtPEFjPAlaqe38O6frw==
+"@next/swc-darwin-arm64@14.2.21":
+  version "14.2.21"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.21.tgz#32a31992aace1440981df9cf7cb3af7845d94fec"
+  integrity sha512-HwEjcKsXtvszXz5q5Z7wCtrHeTTDSTgAbocz45PHMUjU3fBYInfvhR+ZhavDRUYLonm53aHZbB09QtJVJj8T7g==
+
+"@next/swc-darwin-x64@14.2.21":
+  version "14.2.21"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.21.tgz#5ab4b3f6685b6b52f810d0f5cf6e471480ddffdb"
+  integrity sha512-TSAA2ROgNzm4FhKbTbyJOBrsREOMVdDIltZ6aZiKvCi/v0UwFmwigBGeqXDA97TFMpR3LNNpw52CbVelkoQBxA==
+
+"@next/swc-linux-arm64-gnu@14.2.21":
+  version "14.2.21"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.21.tgz#8a0e1fa887aef19ca218af2af515d0a5ee67ba3f"
+  integrity sha512-0Dqjn0pEUz3JG+AImpnMMW/m8hRtl1GQCNbO66V1yp6RswSTiKmnHf3pTX6xMdJYSemf3O4Q9ykiL0jymu0TuA==
+
+"@next/swc-linux-arm64-musl@14.2.21":
+  version "14.2.21"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.21.tgz#ddad844406b42fa8965fe11250abc85c1fe0fd05"
+  integrity sha512-Ggfw5qnMXldscVntwnjfaQs5GbBbjioV4B4loP+bjqNEb42fzZlAaK+ldL0jm2CTJga9LynBMhekNfV8W4+HBw==
+
+"@next/swc-linux-x64-gnu@14.2.21":
+  version "14.2.21"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.21.tgz#db55fd666f9ba27718f65caa54b622a912cdd16b"
+  integrity sha512-uokj0lubN1WoSa5KKdThVPRffGyiWlm/vCc/cMkWOQHw69Qt0X1o3b2PyLLx8ANqlefILZh1EdfLRz9gVpG6tg==
+
+"@next/swc-linux-x64-musl@14.2.21":
+  version "14.2.21"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.21.tgz#dddb850353624efcd58c4c4e30ad8a1aab379642"
+  integrity sha512-iAEBPzWNbciah4+0yI4s7Pce6BIoxTQ0AGCkxn/UBuzJFkYyJt71MadYQkjPqCQCJAFQ26sYh7MOKdU+VQFgPg==
+
+"@next/swc-win32-arm64-msvc@14.2.21":
+  version "14.2.21"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.21.tgz#290012ee57b196d3d2d04853e6bf0179cae9fbaf"
+  integrity sha512-plykgB3vL2hB4Z32W3ktsfqyuyGAPxqwiyrAi2Mr8LlEUhNn9VgkiAl5hODSBpzIfWweX3er1f5uNpGDygfQVQ==
+
+"@next/swc-win32-ia32-msvc@14.2.21":
+  version "14.2.21"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.21.tgz#c959135a78cab18cca588d11d1e33bcf199590d4"
+  integrity sha512-w5bacz4Vxqrh06BjWgua3Yf7EMDb8iMcVhNrNx8KnJXt8t+Uu0Zg4JHLDL/T7DkTCEEfKXO/Er1fcfWxn2xfPA==
+
+"@next/swc-win32-x64-msvc@14.2.21":
+  version "14.2.21"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.21.tgz#21ff892286555b90538a7d1b505ea21a005d6ead"
+  integrity sha512-sT6+llIkzpsexGYZq8cjjthRyRGe5cJVhqh12FmlbxHqna6zsDDK8UNaV7g41T6atFHCJUPeLb3uyAwrBwy0NA==
 
 "@nivo/calendar@^0.87.0":
   version "0.87.0"
@@ -20223,12 +20223,12 @@ next-tick@^1.1.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb"
   integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==
 
-next@14.2.17:
-  version "14.2.17"
-  resolved "https://registry.yarnpkg.com/next/-/next-14.2.17.tgz#77a38b11be983ddbbf6c7d1cea3c7e913e8a5445"
-  integrity sha512-hNo/Zy701DDO3nzKkPmsLRlDfNCtb1OJxFUvjGEl04u7SFa3zwC6hqsOUzMajcaEOEV8ey1GjvByvrg0Qr5AiQ==
+next@14.2.21:
+  version "14.2.21"
+  resolved "https://registry.yarnpkg.com/next/-/next-14.2.21.tgz#f6da9e2abba1a0e4ca7a5273825daf06632554ba"
+  integrity sha512-rZmLwucLHr3/zfDMYbJXbw0ZeoBpirxkXuvsJbk7UPorvPYZhP7vq7aHbKnU7dQNCYIimRrbB2pp3xmf+wsYUg==
   dependencies:
-    "@next/env" "14.2.17"
+    "@next/env" "14.2.21"
     "@swc/helpers" "0.5.5"
     busboy "1.6.0"
     caniuse-lite "^1.0.30001579"
@@ -20236,15 +20236,15 @@ next@14.2.17:
     postcss "8.4.31"
     styled-jsx "5.1.1"
   optionalDependencies:
-    "@next/swc-darwin-arm64" "14.2.17"
-    "@next/swc-darwin-x64" "14.2.17"
-    "@next/swc-linux-arm64-gnu" "14.2.17"
-    "@next/swc-linux-arm64-musl" "14.2.17"
-    "@next/swc-linux-x64-gnu" "14.2.17"
-    "@next/swc-linux-x64-musl" "14.2.17"
-    "@next/swc-win32-arm64-msvc" "14.2.17"
-    "@next/swc-win32-ia32-msvc" "14.2.17"
-    "@next/swc-win32-x64-msvc" "14.2.17"
+    "@next/swc-darwin-arm64" "14.2.21"
+    "@next/swc-darwin-x64" "14.2.21"
+    "@next/swc-linux-arm64-gnu" "14.2.21"
+    "@next/swc-linux-arm64-musl" "14.2.21"
+    "@next/swc-linux-x64-gnu" "14.2.21"
+    "@next/swc-linux-x64-musl" "14.2.21"
+    "@next/swc-win32-arm64-msvc" "14.2.21"
+    "@next/swc-win32-ia32-msvc" "14.2.21"
+    "@next/swc-win32-x64-msvc" "14.2.21"
 
 ni18n@^1.1.0:
   version "1.1.0"
@@ -24728,16 +24728,7 @@ string-to-color@^2.2.2:
     lodash.words "^4.2.0"
     rgb-hex "^3.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -24847,14 +24838,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -26904,7 +26888,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -26922,15 +26906,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"