diff --git a/src/apps/calendar/index.ts b/src/apps/calendar/index.ts new file mode 100644 index 000000000..6f39cd49b --- /dev/null +++ b/src/apps/calendar/index.ts @@ -0,0 +1 @@ +export * from './src' diff --git a/src/apps/calendar/src/CalendarApp.tsx b/src/apps/calendar/src/CalendarApp.tsx new file mode 100644 index 000000000..39bc823bc --- /dev/null +++ b/src/apps/calendar/src/CalendarApp.tsx @@ -0,0 +1,33 @@ +import { FC, useContext, useEffect, useMemo } from 'react' +import { Outlet, Routes } from 'react-router-dom' + +import { routerContext, RouterContextData } from '~/libs/core' + +import { CalendarContextProvider, Layout, SWRConfigProvider } from './lib' +import { toolTitle } from './calendar-app.routes' +import './lib/styles/index.scss' + +const CalendarApp: FC = () => { + const { getChildRoutes }: RouterContextData = useContext(routerContext) + const childRoutes = useMemo(() => getChildRoutes(toolTitle), [getChildRoutes]) + + useEffect(() => { + document.body.classList.add('calendar-app') + return () => { + document.body.classList.remove('calendar-app') + } + }, []) + + return ( + + + + + {childRoutes} + + + + ) +} + +export default CalendarApp diff --git a/src/apps/calendar/src/calendar-app.routes.tsx b/src/apps/calendar/src/calendar-app.routes.tsx new file mode 100644 index 000000000..b3eec295f --- /dev/null +++ b/src/apps/calendar/src/calendar-app.routes.tsx @@ -0,0 +1,43 @@ +import { AppSubdomain, ToolTitle } from '~/config' +import { lazyLoad, LazyLoadedComponent, PlatformRoute } from '~/libs/core' +import { UserRole } from '~/libs/core/lib/profile/profile-functions/profile-factory/user-role.enum' + +import { personalCalendarRouteId, rootRoute, teamCalendarRouteId } from './config/routes.config' + +const CalendarApp: LazyLoadedComponent = lazyLoad(() => import('./CalendarApp')) +const PersonalCalendarPage: LazyLoadedComponent = lazyLoad( + () => import('./pages/personal-calendar'), + 'PersonalCalendarPage', +) +const TeamCalendarPage: LazyLoadedComponent = lazyLoad( + () => import('./pages/team-calendar'), + 'TeamCalendarPage', +) + +export const toolTitle: string = ToolTitle.calendar + +export const calendarRoutes: ReadonlyArray = [ + { + authRequired: true, + children: [ + { + element: , + id: personalCalendarRouteId, + route: '', + title: 'Personal Calendar', + }, + { + element: , + id: teamCalendarRouteId, + route: 'team-calendar', + title: 'Team Calendar', + }, + ], + domain: AppSubdomain.calendar, + element: , + id: toolTitle, + rolesRequired: [UserRole.topcoderStaff, UserRole.administrator], + route: rootRoute, + title: toolTitle, + }, +] diff --git a/src/apps/calendar/src/config/index.config.ts b/src/apps/calendar/src/config/index.config.ts new file mode 100644 index 000000000..f1a930826 --- /dev/null +++ b/src/apps/calendar/src/config/index.config.ts @@ -0,0 +1,4 @@ +/** + * Common calendar config constants. + */ +export const APP_NAME = 'Calendar' diff --git a/src/apps/calendar/src/config/routes.config.ts b/src/apps/calendar/src/config/routes.config.ts new file mode 100644 index 000000000..194a42193 --- /dev/null +++ b/src/apps/calendar/src/config/routes.config.ts @@ -0,0 +1,9 @@ +import { AppSubdomain, EnvironmentConfig } from '~/config' + +export const rootRoute: string + = EnvironmentConfig.SUBDOMAIN === AppSubdomain.calendar + ? '' + : `/${AppSubdomain.calendar}` + +export const personalCalendarRouteId = 'personal-calendar' +export const teamCalendarRouteId = 'team-calendar' diff --git a/src/apps/calendar/src/index.ts b/src/apps/calendar/src/index.ts new file mode 100644 index 000000000..393b0b665 --- /dev/null +++ b/src/apps/calendar/src/index.ts @@ -0,0 +1,2 @@ +export { calendarRoutes } from './calendar-app.routes' +export { rootRoute as calendarRootRoute } from './config/routes.config' diff --git a/src/apps/calendar/src/lib/components/Calendar/Calendar.module.scss b/src/apps/calendar/src/lib/components/Calendar/Calendar.module.scss new file mode 100644 index 000000000..29891004a --- /dev/null +++ b/src/apps/calendar/src/lib/components/Calendar/Calendar.module.scss @@ -0,0 +1,116 @@ +.calendar { + position: relative; + background: #ffffff; + border: 1px solid var(--calendar-border); + border-radius: 12px; + padding: 16px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); +} + +.dayNames { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 8px; + margin-bottom: 12px; + color: #6c757d; + text-align: center; + font-size: 12px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.04em; +} + +.dayName { + padding: 4px 0; +} + +.grid { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 8px; +} + +.cell { + position: relative; + min-height: 88px; + width: 100%; + border-radius: 10px; + border: 1px solid var(--calendar-border); + background: var(--status-available); + display: flex; + align-items: flex-start; + justify-content: flex-end; + padding: 10px; + cursor: pointer; + transition: background-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; + font-weight: 700; + color: #2d2d2d; +} + +.cell:hover { + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); + background: var(--calendar-hover); +} + +.cell:disabled { + cursor: not-allowed; + opacity: 0.75; +} + +.empty { + background: transparent; + border: none; + pointer-events: none; +} + +.dateNumber { + font-size: 16px; + line-height: 1; +} + +.status-available { + background: var(--status-available); +} + +.status-leave { + background: var(--status-leave); + color: #ffffff; +} + +.status-holiday { + background: var(--status-holiday); +} + +.status-weekend { + background: var(--status-weekend); +} + +.selected { + border-color: var(--status-selected); + box-shadow: 0 0 0 2px rgba(77, 171, 247, 0.3); +} + +.loading { + pointer-events: none; +} + +.loadingOverlay { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + background: rgba(255, 255, 255, 0.7); + border-radius: 12px; +} + +@media (max-width: 768px) { + .calendar { + padding: 12px; + } + + .cell { + min-height: 72px; + } +} diff --git a/src/apps/calendar/src/lib/components/Calendar/Calendar.tsx b/src/apps/calendar/src/lib/components/Calendar/Calendar.tsx new file mode 100644 index 000000000..6b2b9ff10 --- /dev/null +++ b/src/apps/calendar/src/lib/components/Calendar/Calendar.tsx @@ -0,0 +1,124 @@ +import { MouseEvent, useMemo } from 'react' +import classNames from 'classnames' + +import { LoadingSpinner } from '~/libs/ui' + +import { LeaveDate } from '../../models' +import { + getDateKey, + getMonthDates, + getStatusColor, + getStatusForDate, +} from '../../utils' + +import styles from './Calendar.module.scss' + +const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] + +interface CalendarProps { + currentDate: Date + leaveDates: LeaveDate[] + selectedDates: Set + onDateClick: (dateKey: string) => void + isLoading: boolean +} + +export const Calendar = (props: CalendarProps): JSX.Element => { + const currentDate = props.currentDate + const isLoading = props.isLoading + const leaveDates = props.leaveDates + const onDateClick = props.onDateClick + const selectedDates = props.selectedDates + + const monthDates = useMemo( + () => getMonthDates(currentDate.getFullYear(), currentDate.getMonth()), + [currentDate], + ) + + const paddedDates = useMemo(() => { + if (!monthDates.length) { + return [] + } + + const padding = monthDates[0].getDay() + const cells: Array = [] + + for (let i = 0; i < padding; i += 1) { + cells.push(undefined) + } + + cells.push(...monthDates) + + while (cells.length % 7 !== 0) { + cells.push(undefined) + } + + return cells + }, [monthDates]) + + function handleDateClick(event: MouseEvent): void { + const dateKey = event.currentTarget.dataset.dateKey + + if (dateKey) { + onDateClick(dateKey) + } + } + + return ( +
+
+ {dayNames.map(day => ( +
+ {day} +
+ ))} +
+ +
+ {paddedDates.map((date, index) => { + if (!date) { + return ( +
+ ) + } + + const dateKey = getDateKey(date) + const status = getStatusForDate(date, leaveDates) + const isSelected = selectedDates.has(dateKey) + const statusClass = styles[getStatusColor(status)] + + return ( + + ) + })} +
+ + {isLoading && ( +
+ +
+ )} +
+ ) +} + +export default Calendar diff --git a/src/apps/calendar/src/lib/components/Calendar/index.ts b/src/apps/calendar/src/lib/components/Calendar/index.ts new file mode 100644 index 000000000..8c50cf89e --- /dev/null +++ b/src/apps/calendar/src/lib/components/Calendar/index.ts @@ -0,0 +1 @@ +export * from './Calendar' diff --git a/src/apps/calendar/src/lib/components/CalendarLegend/CalendarLegend.module.scss b/src/apps/calendar/src/lib/components/CalendarLegend/CalendarLegend.module.scss new file mode 100644 index 000000000..4447f6d9d --- /dev/null +++ b/src/apps/calendar/src/lib/components/CalendarLegend/CalendarLegend.module.scss @@ -0,0 +1,42 @@ +.legend { + display: flex; + flex-wrap: wrap; + gap: 12px 20px; + align-items: center; + margin: 8px 0 16px; +} + +.item { + display: inline-flex; + align-items: center; + gap: 8px; + font-size: 14px; + color: #4b5563; +} + +.color { + width: 14px; + height: 14px; + border-radius: 4px; + border: 1px solid var(--calendar-border); +} + +.status-available { + background: var(--status-available); +} + +.status-leave { + background: var(--status-leave); +} + +.status-holiday { + background: var(--status-holiday); +} + +.status-weekend { + background: var(--status-weekend); +} + +.label { + white-space: nowrap; +} diff --git a/src/apps/calendar/src/lib/components/CalendarLegend/CalendarLegend.tsx b/src/apps/calendar/src/lib/components/CalendarLegend/CalendarLegend.tsx new file mode 100644 index 000000000..375b0a04f --- /dev/null +++ b/src/apps/calendar/src/lib/components/CalendarLegend/CalendarLegend.tsx @@ -0,0 +1,19 @@ +import { FC } from 'react' +import classNames from 'classnames' + +import { legendItems } from '../../utils' + +import styles from './CalendarLegend.module.scss' + +export const CalendarLegend: FC = () => ( +
+ {legendItems.map(item => ( +
+ + {item.label} +
+ ))} +
+) + +export default CalendarLegend diff --git a/src/apps/calendar/src/lib/components/CalendarLegend/index.ts b/src/apps/calendar/src/lib/components/CalendarLegend/index.ts new file mode 100644 index 000000000..99e195112 --- /dev/null +++ b/src/apps/calendar/src/lib/components/CalendarLegend/index.ts @@ -0,0 +1 @@ +export * from './CalendarLegend' diff --git a/src/apps/calendar/src/lib/components/Layout/Layout.module.scss b/src/apps/calendar/src/lib/components/Layout/Layout.module.scss new file mode 100644 index 000000000..25e66ab2f --- /dev/null +++ b/src/apps/calendar/src/lib/components/Layout/Layout.module.scss @@ -0,0 +1,47 @@ +@import '@libs/ui/styles/includes'; + +.layout { + position: relative; + font-family: $font-roboto; + color: var(--Primary); + background: #ffffff; + border: 1px solid var(--BorderColor, #e0e0e0); + border-radius: 10px; + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08); + padding: $sp-5; +} + +.header { + display: flex; + align-items: center; + justify-content: flex-end; + gap: $sp-3; + flex-wrap: wrap; + margin-bottom: $sp-4; +} + +.headerActions { + display: flex; + align-items: center; + gap: $sp-2; + + @include ltemd { + width: 100%; + justify-content: flex-start; + } +} + +.main { + @include ltelg { + padding-top: $sp-3; + } +} + +.contentLayoutOuter { + margin: $sp-6 auto !important; +} + +.contentLayoutInner { + box-sizing: border-box; + width: 100%; +} diff --git a/src/apps/calendar/src/lib/components/Layout/Layout.tsx b/src/apps/calendar/src/lib/components/Layout/Layout.tsx new file mode 100644 index 000000000..9e3a87b79 --- /dev/null +++ b/src/apps/calendar/src/lib/components/Layout/Layout.tsx @@ -0,0 +1,61 @@ +import { FC, PropsWithChildren } from 'react' +import { useLocation, useNavigate } from 'react-router-dom' + +import { Button, ContentLayout, IconOutline } from '~/libs/ui' + +import { rootRoute, teamCalendarRouteId } from '../../../config/routes.config' + +import styles from './Layout.module.scss' + +export const NullLayout: FC = props => ( + <>{props.children} +) + +export const Layout: FC = props => { + const location = useLocation() + const navigate = useNavigate() + + const buildPath = (...parts: string[]): string => { + const cleanedParts = parts + .filter(Boolean) + .map(part => part.replace(/^\/+|\/+$/g, '')) + + return `/${cleanedParts.join('/')}` || '/' + } + + const normalizedRootPath = rootRoute || '' + const teamCalendarPath = buildPath(normalizedRootPath, teamCalendarRouteId) + const personalCalendarPath = buildPath(normalizedRootPath) + const normalizedCurrentPath = location.pathname.replace(/\/+$/, '') || '/' + const isTeamCalendar = normalizedCurrentPath === teamCalendarPath + const buttonLabel = isTeamCalendar ? 'View My Calendar' : 'View Team Leave' + const buttonIcon = isTeamCalendar ? IconOutline.UserIcon : IconOutline.UsersIcon + const targetPath = isTeamCalendar ? personalCalendarPath : teamCalendarPath + function handleToggleCalendar(): void { + navigate(targetPath) + } + + return ( + +
+
+
+ +
+
+
{props.children}
+
+ + ) +} + +export default Layout diff --git a/src/apps/calendar/src/lib/components/Layout/index.ts b/src/apps/calendar/src/lib/components/Layout/index.ts new file mode 100644 index 000000000..19b84975d --- /dev/null +++ b/src/apps/calendar/src/lib/components/Layout/index.ts @@ -0,0 +1 @@ +export * from './Layout' diff --git a/src/apps/calendar/src/lib/components/MonthNavigation/MonthNavigation.module.scss b/src/apps/calendar/src/lib/components/MonthNavigation/MonthNavigation.module.scss new file mode 100644 index 000000000..488adf5d1 --- /dev/null +++ b/src/apps/calendar/src/lib/components/MonthNavigation/MonthNavigation.module.scss @@ -0,0 +1,32 @@ +.navigation { + display: flex; + align-items: center; + justify-content: center; + gap: 12px; + margin-bottom: 16px; +} + +.navButton { + min-width: 44px; + height: 44px; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.currentMonth { + font-size: 20px; + font-weight: 700; + letter-spacing: 0.01em; + color: #1f2933; +} + +@media (max-width: 480px) { + .navigation { + gap: 8px; + } + + .currentMonth { + font-size: 18px; + } +} diff --git a/src/apps/calendar/src/lib/components/MonthNavigation/MonthNavigation.tsx b/src/apps/calendar/src/lib/components/MonthNavigation/MonthNavigation.tsx new file mode 100644 index 000000000..edf5c2d96 --- /dev/null +++ b/src/apps/calendar/src/lib/components/MonthNavigation/MonthNavigation.tsx @@ -0,0 +1,36 @@ +import { FC } from 'react' + +import { Button, IconOutline } from '~/libs/ui' + +import { formatMonthYear } from '../../utils' + +import styles from './MonthNavigation.module.scss' + +interface MonthNavigationProps { + currentDate: Date + onNextMonth: () => void + onPrevMonth: () => void +} + +export const MonthNavigation: FC = (props: MonthNavigationProps) => ( +
+
+) + +export default MonthNavigation diff --git a/src/apps/calendar/src/lib/components/MonthNavigation/index.ts b/src/apps/calendar/src/lib/components/MonthNavigation/index.ts new file mode 100644 index 000000000..86e180167 --- /dev/null +++ b/src/apps/calendar/src/lib/components/MonthNavigation/index.ts @@ -0,0 +1 @@ +export * from './MonthNavigation' diff --git a/src/apps/calendar/src/lib/components/TeamCalendar/TeamCalendar.module.scss b/src/apps/calendar/src/lib/components/TeamCalendar/TeamCalendar.module.scss new file mode 100644 index 000000000..d0ff3d3b8 --- /dev/null +++ b/src/apps/calendar/src/lib/components/TeamCalendar/TeamCalendar.module.scss @@ -0,0 +1,151 @@ +@import '@libs/ui/styles/includes'; + +.teamCalendar { + position: relative; + background: #ffffff; + border: 1px solid var(--calendar-border); + border-radius: 12px; + padding: 16px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); +} + +.dayNames { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 8px; + margin-bottom: 12px; + color: #6c757d; + text-align: center; + font-size: 12px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.04em; +} + +.dayName { + padding: 4px 0; +} + +.grid { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 10px; +} + +.cell { + position: relative; + min-height: 120px; + width: 100%; + border-radius: 10px; + border: 1px solid var(--team-cell-border, #e5e7eb); + background: #f9fafb; + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 12px; + gap: 8px; + transition: background-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease; +} + +.cell:hover { + transform: translateY(-1px); + box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05); + background: #f3f4f6; +} + +.empty { + background: transparent; + border: none; + pointer-events: none; +} + +.weekend { + background: #f0f7ff; + border-color: #dbeafe; +} + +.dateNumber { + align-self: flex-end; + font-size: 16px; + font-weight: 800; + color: #111827; + line-height: 1; +} + +.userList { + display: flex; + flex-direction: column; + gap: 6px; + width: 100%; +} + +.userItem { + width: 100%; + border-radius: 8px; + padding: 8px 10px; + font-weight: 700; + font-size: 14px; + line-height: 1.2; + border: 1px solid transparent; +} + +.userLeave { + background: var(--user-leave-bg, #fee2e2); + border-color: #fecdd3; + color: #9b1c1c; +} + +.userHoliday { + background: var(--user-holiday-bg, #fef3c7); + border-color: #fde68a; + color: #92400e; +} + +.emptyState { + color: #6b7280; + font-size: 13px; + font-weight: 600; +} + +.overflowIndicator { + color: #374151; + font-size: 13px; + font-weight: 700; +} + +.loading { + pointer-events: none; +} + +.loadingOverlay { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + background: rgba(255, 255, 255, 0.7); + border-radius: 12px; +} + +@media (max-width: 768px) { + .teamCalendar { + padding: 12px; + } + + .grid { + gap: 8px; + } + + .cell { + min-height: 96px; + padding: 10px; + } + + .userItem { + font-size: 13px; + } + + .dateNumber { + font-size: 15px; + } +} diff --git a/src/apps/calendar/src/lib/components/TeamCalendar/TeamCalendar.tsx b/src/apps/calendar/src/lib/components/TeamCalendar/TeamCalendar.tsx new file mode 100644 index 000000000..1a2feecea --- /dev/null +++ b/src/apps/calendar/src/lib/components/TeamCalendar/TeamCalendar.tsx @@ -0,0 +1,159 @@ +import { isWeekend } from 'date-fns' +import { FC, useMemo } from 'react' +import classNames from 'classnames' + +import { LoadingSpinner } from '~/libs/ui' + +import { LeaveStatus, TeamLeaveDate } from '../../models' +import { getDateKey, getMonthDates } from '../../utils' + +import styles from './TeamCalendar.module.scss' + +const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] +type TeamLeaveUser = TeamLeaveDate['usersOnLeave'][number] + +const getUserDisplayName = (user: TeamLeaveUser): string => { + const firstName = user.firstName?.trim() + const lastName = user.lastName?.trim() + const fullName = [firstName, lastName] + .filter(Boolean) + .join(' ') + + return fullName || user.handle || user.userId +} + +const compareUsersByName = (userA: TeamLeaveUser, userB: TeamLeaveUser): number => { + const firstNameA = userA.firstName?.trim() || getUserDisplayName(userA) + const firstNameB = userB.firstName?.trim() || getUserDisplayName(userB) + const firstNameCompare = firstNameA.localeCompare(firstNameB, undefined, { sensitivity: 'base' }) + + if (firstNameCompare !== 0) { + return firstNameCompare + } + + const lastNameA = userA.lastName?.trim() ?? '' + const lastNameB = userB.lastName?.trim() ?? '' + const lastNameCompare = lastNameA.localeCompare(lastNameB, undefined, { sensitivity: 'base' }) + + if (lastNameCompare !== 0) { + return lastNameCompare + } + + return (userA.userId ?? '').localeCompare(userB.userId ?? '', undefined, { sensitivity: 'base' }) +} + +interface TeamCalendarProps { + currentDate: Date + teamLeaveDates: TeamLeaveDate[] + isLoading: boolean +} + +export const TeamCalendar: FC = (props: TeamCalendarProps) => { + const currentDate = props.currentDate + const isLoading = props.isLoading + const teamLeaveDates = props.teamLeaveDates + + const monthDates = useMemo( + () => getMonthDates(currentDate.getFullYear(), currentDate.getMonth()), + [currentDate], + ) + + const paddedDates = useMemo(() => { + if (!monthDates.length) { + return [] + } + + const padding = monthDates[0].getDay() + const cells: Array = [] + + for (let i = 0; i < padding; i += 1) { + cells.push(undefined) + } + + cells.push(...monthDates) + + while (cells.length % 7 !== 0) { + cells.push(undefined) + } + + return cells + }, [monthDates]) + + return ( +
+
+ {dayNames.map(day => ( +
+ {day} +
+ ))} +
+ +
+ {paddedDates.map((date, index) => { + if (!date) { + return ( +
+ ) + } + + const dateKey = getDateKey(date) + const leaveEntry = teamLeaveDates.find(item => item.date === dateKey) + const users = leaveEntry?.usersOnLeave ?? [] + const sortedUsers = [...users].sort(compareUsersByName) + const displayedUsers = sortedUsers.slice(0, 10) + const overflowCount = sortedUsers.length - displayedUsers.length + const weekendClass = isWeekend(date) ? styles.weekend : undefined + + return ( +
+ {date.getDate()} +
+ {displayedUsers.length > 0 + && displayedUsers.map((user, userIndex) => { + const isHolidayStatus = user.status === LeaveStatus.WIPRO_HOLIDAY + || user.status === LeaveStatus.HOLIDAY + + return ( +
+ {getUserDisplayName(user)} +
+ ) + })} + {overflowCount > 0 && ( +
+ {`+${overflowCount} more`} +
+ )} +
+
+ ) + })} +
+ + {isLoading && ( +
+ +
+ )} +
+ ) +} + +export default TeamCalendar diff --git a/src/apps/calendar/src/lib/components/TeamCalendar/index.ts b/src/apps/calendar/src/lib/components/TeamCalendar/index.ts new file mode 100644 index 000000000..1aa33e31a --- /dev/null +++ b/src/apps/calendar/src/lib/components/TeamCalendar/index.ts @@ -0,0 +1 @@ +export * from './TeamCalendar' diff --git a/src/apps/calendar/src/lib/components/index.ts b/src/apps/calendar/src/lib/components/index.ts new file mode 100644 index 000000000..705dd2af7 --- /dev/null +++ b/src/apps/calendar/src/lib/components/index.ts @@ -0,0 +1,5 @@ +export * from './Layout' +export * from './Calendar' +export * from './MonthNavigation' +export * from './CalendarLegend' +export * from './TeamCalendar' diff --git a/src/apps/calendar/src/lib/contexts/CalendarContext.ts b/src/apps/calendar/src/lib/contexts/CalendarContext.ts new file mode 100644 index 000000000..d9611437b --- /dev/null +++ b/src/apps/calendar/src/lib/contexts/CalendarContext.ts @@ -0,0 +1,9 @@ +import { createContext } from 'react' + +import type { CalendarContextModel } from '../models' + +export const CalendarContext = createContext({ + loginUserInfo: undefined, +}) + +export default CalendarContext diff --git a/src/apps/calendar/src/lib/contexts/CalendarContextProvider.tsx b/src/apps/calendar/src/lib/contexts/CalendarContextProvider.tsx new file mode 100644 index 000000000..550987623 --- /dev/null +++ b/src/apps/calendar/src/lib/contexts/CalendarContextProvider.tsx @@ -0,0 +1,40 @@ +import { + FC, + PropsWithChildren, + useEffect, + useMemo, + useState, +} from 'react' + +import { tokenGetAsync, TokenModel } from '~/libs/core' + +import type { CalendarContextModel } from '../models' + +import { CalendarContext } from './CalendarContext' + +export const CalendarContextProvider: FC = props => { + const [loginUserInfo, setLoginUserInfo] = useState(undefined) + + const value = useMemo( + () => ({ + loginUserInfo, + }), + [loginUserInfo], + ) + + useEffect(() => { + tokenGetAsync() + .then((token: TokenModel) => setLoginUserInfo(token)) + .catch(() => { + // no-op, consumer can handle missing token + }) + }, []) + + return ( + + {props.children} + + ) +} + +export default CalendarContextProvider diff --git a/src/apps/calendar/src/lib/contexts/SWRConfigProvider.tsx b/src/apps/calendar/src/lib/contexts/SWRConfigProvider.tsx new file mode 100644 index 000000000..c9efac909 --- /dev/null +++ b/src/apps/calendar/src/lib/contexts/SWRConfigProvider.tsx @@ -0,0 +1,19 @@ +import { FC, PropsWithChildren } from 'react' +import { SWRConfig } from 'swr' + +import { xhrGetAsync } from '~/libs/core' + +export const SWRConfigProvider: FC = props => ( + xhrGetAsync(resource), + refreshInterval: 0, + revalidateOnFocus: false, + revalidateOnMount: true, + }} + > + {props.children} + +) + +export default SWRConfigProvider diff --git a/src/apps/calendar/src/lib/contexts/index.ts b/src/apps/calendar/src/lib/contexts/index.ts new file mode 100644 index 000000000..b2bdb3318 --- /dev/null +++ b/src/apps/calendar/src/lib/contexts/index.ts @@ -0,0 +1,3 @@ +export * from './CalendarContext' +export * from './CalendarContextProvider' +export * from './SWRConfigProvider' diff --git a/src/apps/calendar/src/lib/hooks/index.ts b/src/apps/calendar/src/lib/hooks/index.ts new file mode 100644 index 000000000..19778633f --- /dev/null +++ b/src/apps/calendar/src/lib/hooks/index.ts @@ -0,0 +1,2 @@ +export * from './useFetchLeaveDates' +export * from './useFetchTeamLeave' diff --git a/src/apps/calendar/src/lib/hooks/useFetchLeaveDates.ts b/src/apps/calendar/src/lib/hooks/useFetchLeaveDates.ts new file mode 100644 index 000000000..7a445f68d --- /dev/null +++ b/src/apps/calendar/src/lib/hooks/useFetchLeaveDates.ts @@ -0,0 +1,105 @@ +import { useCallback, useRef, useState } from 'react' + +import { handleError } from '~/libs/shared' + +import { LeaveDate, LeaveUpdateStatus } from '../models' +import { fetchUserLeaveDates, setLeaveDates as setLeaveDatesService } from '../services' +import { getDateKey } from '../utils' + +export interface UseFetchLeaveDatesResult { + leaveDates: LeaveDate[] + isLoading: boolean + isUpdating: boolean + error: unknown + loadLeaveDates: (startDate?: Date, endDate?: Date) => Promise + updateLeaveDates: (dates: string[], status: LeaveUpdateStatus) => Promise +} + +const buildRequestKey = (...parts: Array): string => ( + parts + .filter(Boolean) + .join('|') +) + +export function useFetchLeaveDates(): UseFetchLeaveDatesResult { + const [leaveDates, setLeaveDates] = useState([]) + const [isLoading, setIsLoading] = useState(false) + const [isUpdating, setIsUpdating] = useState(false) + const [error, setError] = useState(undefined) + const latestLoadRequestRef = useRef('') + const latestUpdateRequestRef = useRef('') + + const loadLeaveDates = useCallback( + async (startDate?: Date, endDate?: Date) => { + const startKey = startDate ? getDateKey(startDate) : undefined + const endKey = endDate ? getDateKey(endDate) : undefined + const requestKey = buildRequestKey( + startKey, + endKey, + Date.now() + .toString(), + ) + latestLoadRequestRef.current = requestKey + setIsLoading(true) + setError(undefined) + + try { + const response = await fetchUserLeaveDates(startKey, endKey) + if (latestLoadRequestRef.current !== requestKey) { + return + } + + setLeaveDates(response) + } catch (err) { + if (latestLoadRequestRef.current === requestKey) { + setError(err) + handleError(err) + throw err + } + } finally { + if (latestLoadRequestRef.current === requestKey) { + setIsLoading(false) + } + } + }, + [], + ) + + const updateLeaveDates = useCallback( + async (dates: string[], status: LeaveUpdateStatus) => { + const requestKey = buildRequestKey( + status, + dates.join(','), + Date.now() + .toString(), + ) + latestUpdateRequestRef.current = requestKey + setIsUpdating(true) + setError(undefined) + + try { + await setLeaveDatesService(dates, status) + } catch (err) { + if (latestUpdateRequestRef.current === requestKey) { + setError(err) + handleError(err) + throw err + } + } finally { + if (latestUpdateRequestRef.current === requestKey) { + setIsUpdating(false) + } + } + }, + [], + ) + + return { + error, + isLoading, + isUpdating, + leaveDates, + loadLeaveDates, + updateLeaveDates, + } +} diff --git a/src/apps/calendar/src/lib/hooks/useFetchTeamLeave.ts b/src/apps/calendar/src/lib/hooks/useFetchTeamLeave.ts new file mode 100644 index 000000000..6446241fc --- /dev/null +++ b/src/apps/calendar/src/lib/hooks/useFetchTeamLeave.ts @@ -0,0 +1,71 @@ +import { useCallback, useRef, useState } from 'react' + +import { handleError } from '~/libs/shared' + +import { TeamLeaveDate } from '../models' +import { fetchTeamLeave } from '../services' +import { getDateKey } from '../utils' + +export interface UseFetchTeamLeaveResult { + teamLeaveDates: TeamLeaveDate[] + isLoading: boolean + error: unknown + loadTeamLeave: (startDate?: Date, endDate?: Date) => Promise +} + +const buildRequestKey = (...parts: Array): string => ( + parts + .filter(Boolean) + .join('|') +) + +export function useFetchTeamLeave(): UseFetchTeamLeaveResult { + const [teamLeaveDates, setTeamLeaveDates] = useState([]) + const [isLoading, setIsLoading] = useState(false) + const [error, setError] = useState(undefined) + const latestLoadRequestRef = useRef('') + + const loadTeamLeave = useCallback( + async (startDate?: Date, endDate?: Date) => { + const startKey = startDate ? getDateKey(startDate) : undefined + const endKey = endDate ? getDateKey(endDate) : undefined + const requestKey = buildRequestKey( + startKey, + endKey, + Date.now() + .toString(), + ) + latestLoadRequestRef.current = requestKey + setIsLoading(true) + setTeamLeaveDates([]) + setError(undefined) + + try { + const response = await fetchTeamLeave(startKey, endKey) + if (latestLoadRequestRef.current !== requestKey) { + return + } + + setTeamLeaveDates(response) + } catch (err) { + if (latestLoadRequestRef.current === requestKey) { + setError(err) + handleError(err) + throw err + } + } finally { + if (latestLoadRequestRef.current === requestKey) { + setIsLoading(false) + } + } + }, + [], + ) + + return { + error, + isLoading, + loadTeamLeave, + teamLeaveDates, + } +} diff --git a/src/apps/calendar/src/lib/index.ts b/src/apps/calendar/src/lib/index.ts new file mode 100644 index 000000000..d5dc44d56 --- /dev/null +++ b/src/apps/calendar/src/lib/index.ts @@ -0,0 +1,6 @@ +export * from './components' +export * from './contexts' +export * from './services' +export * from './models' +export * from './hooks' +export * from './utils' diff --git a/src/apps/calendar/src/lib/models/index.ts b/src/apps/calendar/src/lib/models/index.ts new file mode 100644 index 000000000..994fa9c6c --- /dev/null +++ b/src/apps/calendar/src/lib/models/index.ts @@ -0,0 +1,31 @@ +import { TokenModel } from '~/libs/core' + +export enum LeaveStatus { + AVAILABLE = 'AVAILABLE', + LEAVE = 'LEAVE', + HOLIDAY = 'HOLIDAY', + WIPRO_HOLIDAY = 'WIPRO_HOLIDAY', + WEEKEND = 'WEEKEND', +} + +export type LeaveUpdateStatus = LeaveStatus.AVAILABLE | LeaveStatus.LEAVE | LeaveStatus.HOLIDAY + +export interface LeaveDate { + date: string + status: LeaveStatus +} + +export interface TeamLeaveDate { + date: string + usersOnLeave: Array<{ + userId: string + handle?: string + firstName?: string + lastName?: string + status: LeaveStatus.LEAVE | LeaveStatus.HOLIDAY | LeaveStatus.WIPRO_HOLIDAY + }> +} + +export interface CalendarContextModel { + loginUserInfo?: TokenModel +} diff --git a/src/apps/calendar/src/lib/services/index.ts b/src/apps/calendar/src/lib/services/index.ts new file mode 100644 index 000000000..f5ff03efd --- /dev/null +++ b/src/apps/calendar/src/lib/services/index.ts @@ -0,0 +1 @@ +export * from './leave.service' diff --git a/src/apps/calendar/src/lib/services/leave.service.ts b/src/apps/calendar/src/lib/services/leave.service.ts new file mode 100644 index 000000000..4169e8138 --- /dev/null +++ b/src/apps/calendar/src/lib/services/leave.service.ts @@ -0,0 +1,34 @@ +import qs from 'qs' + +import { EnvironmentConfig } from '~/config' +import { xhrGetAsync, xhrPostAsync } from '~/libs/core' + +import type { LeaveDate, LeaveUpdateStatus, TeamLeaveDate } from '../models' + +const serializeQuery = (params: Record): string => qs.stringify( + params, + { addQueryPrefix: true, skipNulls: true }, +) + +export const fetchUserLeaveDates = async ( + startDate?: string, + endDate?: string, +): Promise => { + const queryString = serializeQuery({ endDate, startDate }) + + return xhrGetAsync(`${EnvironmentConfig.API.V6}/leave/dates${queryString}`) +} + +export const setLeaveDates = async ( + dates: string[], + status: LeaveUpdateStatus, +): Promise => xhrPostAsync(`${EnvironmentConfig.API.V6}/leave/dates`, { dates, status }) + +export const fetchTeamLeave = async ( + startDate?: string, + endDate?: string, +): Promise => { + const queryString = serializeQuery({ endDate, startDate }) + + return xhrGetAsync(`${EnvironmentConfig.API.V6}/leave/team${queryString}`) +} diff --git a/src/apps/calendar/src/lib/styles/index.scss b/src/apps/calendar/src/lib/styles/index.scss new file mode 100644 index 000000000..6c1ffcaa9 --- /dev/null +++ b/src/apps/calendar/src/lib/styles/index.scss @@ -0,0 +1,37 @@ +@import '@libs/ui/styles/includes'; + +:root { + --LeaveColor: #4caf50; + --AvailableColor: #e8f5e9; + --HolidayColor: #ffc107; + --WeekendColor: #f5f5f5; + --BorderColor: #e0e0e0; + --user-leave-bg: #fee2e2; + --user-holiday-bg: #fef3c7; + --team-cell-border: #e5e7eb; +} + +.calendar-app { + --status-available: #f0f0f0; + --status-leave: #ff6b6b; + --status-holiday: #ffd93d; + --status-weekend: #a8dadc; + --status-selected: #4dabf7; + --calendar-border: #dee2e6; + --calendar-hover: #e9ecef; + + // App-specific global styles +} + +.primaryButton { + background-color: var(--LeaveColor); + color: white; + border: none; + border-radius: 4px; + padding: 8px 16px; + cursor: pointer; + + &:hover { + opacity: 0.9; + } +} diff --git a/src/apps/calendar/src/lib/utils/calendar.utils.ts b/src/apps/calendar/src/lib/utils/calendar.utils.ts new file mode 100644 index 000000000..b9a90153f --- /dev/null +++ b/src/apps/calendar/src/lib/utils/calendar.utils.ts @@ -0,0 +1,59 @@ +import { eachDayOfInterval, endOfMonth, format, startOfMonth } from 'date-fns' + +import { LeaveDate, LeaveStatus } from '../models' + +const statusColorMap: Record = { + [LeaveStatus.LEAVE]: 'status-leave', + [LeaveStatus.HOLIDAY]: 'status-holiday', + [LeaveStatus.WIPRO_HOLIDAY]: 'status-holiday', + [LeaveStatus.WEEKEND]: 'status-weekend', + [LeaveStatus.AVAILABLE]: 'status-available', +} + +const statusLabelMap: Record = { + [LeaveStatus.LEAVE]: 'Leave', + [LeaveStatus.HOLIDAY]: 'Personal Holiday', + [LeaveStatus.WIPRO_HOLIDAY]: 'Wipro Holiday', + [LeaveStatus.WEEKEND]: 'Weekend', + [LeaveStatus.AVAILABLE]: 'Available', +} + +export const legendStatusOrder: LeaveStatus[] = [ + LeaveStatus.AVAILABLE, + LeaveStatus.LEAVE, + LeaveStatus.HOLIDAY, + LeaveStatus.WIPRO_HOLIDAY, + LeaveStatus.WEEKEND, +] + +export const getMonthDates = (year: number, month: number): Date[] => { + const monthDate = new Date(year, month, 1) + + return eachDayOfInterval({ + end: endOfMonth(monthDate), + start: startOfMonth(monthDate), + }) +} + +export const formatMonthYear = (date: Date): string => format(date, 'LLLL yyyy') + +export const getDateKey = (date: Date): string => format(date, 'yyyy-MM-dd') + +export const getStatusForDate = (date: Date, leaveDates: LeaveDate[]): LeaveStatus => { + const dateKey = getDateKey(date) + const match = leaveDates.find(item => item.date === dateKey) + + return match?.status ?? LeaveStatus.AVAILABLE +} + +export const getStatusColor = (status: LeaveStatus): string => ( + statusColorMap[status] ?? statusColorMap[LeaveStatus.AVAILABLE] +) + +export const getStatusLabel = (status: LeaveStatus): string => statusLabelMap[status] + +export const legendItems = legendStatusOrder.map(status => ({ + label: getStatusLabel(status), + status, + statusClass: getStatusColor(status), +})) diff --git a/src/apps/calendar/src/lib/utils/index.ts b/src/apps/calendar/src/lib/utils/index.ts new file mode 100644 index 000000000..91a1467b7 --- /dev/null +++ b/src/apps/calendar/src/lib/utils/index.ts @@ -0,0 +1 @@ +export * from './calendar.utils' diff --git a/src/apps/calendar/src/pages/personal-calendar/PersonalCalendarPage.module.scss b/src/apps/calendar/src/pages/personal-calendar/PersonalCalendarPage.module.scss new file mode 100644 index 000000000..e4a32af5d --- /dev/null +++ b/src/apps/calendar/src/pages/personal-calendar/PersonalCalendarPage.module.scss @@ -0,0 +1,77 @@ +.page { + max-width: 1080px; + margin: 0 auto; + padding: 24px 16px 48px; +} + +.header { + margin-bottom: 12px; +} + +.subtitle { + margin: 0; + font-size: 14px; + letter-spacing: 0.08em; + text-transform: uppercase; + color: #6b7280; +} + +.title { + margin: 2px 0 0; + font-size: 28px; + font-weight: 800; + color: #111827; +} + +.navigation { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + margin: 12px 0 8px; +} + +.calendarSection { + margin: 0 auto; +} + +.actions { + margin-top: 16px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + flex-wrap: wrap; +} + +.actionButtons { + display: inline-flex; + gap: 12px; + flex-wrap: wrap; +} + +.selectionInfo { + font-weight: 700; + color: #374151; +} + +.error { + margin-top: 12px; + padding: 12px 16px; + background: #fff5f5; + border: 1px solid #fda4af; + border-radius: 8px; + color: #b91c1c; + font-weight: 600; +} + +@media (max-width: 720px) { + .actions { + flex-direction: column; + align-items: flex-start; + } + + .selectionInfo { + order: 2; + } +} diff --git a/src/apps/calendar/src/pages/personal-calendar/PersonalCalendarPage.tsx b/src/apps/calendar/src/pages/personal-calendar/PersonalCalendarPage.tsx new file mode 100644 index 000000000..fe2ab14b9 --- /dev/null +++ b/src/apps/calendar/src/pages/personal-calendar/PersonalCalendarPage.tsx @@ -0,0 +1,175 @@ +import { addMonths, endOfMonth, startOfMonth, subMonths } from 'date-fns' +import { FC, useCallback, useContext, useEffect, useMemo, useState } from 'react' + +import { Button } from '~/libs/ui' + +import { Calendar, CalendarLegend, MonthNavigation } from '../../lib/components' +import { CalendarContext } from '../../lib/contexts/CalendarContext' +import { useFetchLeaveDates } from '../../lib/hooks' +import { LeaveStatus } from '../../lib/models' + +import styles from './PersonalCalendarPage.module.scss' + +const PersonalCalendarPage: FC = () => { + const calendarContext = useContext(CalendarContext) + const [currentDate, setCurrentDate] = useState(new Date()) + const [selectedDates, setSelectedDates] = useState>(new Set()) + const leaveDatesState = useFetchLeaveDates() + const error = leaveDatesState.error + const isLoading = leaveDatesState.isLoading + const isUpdating = leaveDatesState.isUpdating + const leaveDates = leaveDatesState.leaveDates + const loadLeaveDates = leaveDatesState.loadLeaveDates + const updateLeaveDates = leaveDatesState.updateLeaveDates + const [actionError, setActionError] = useState('') + + const loadCurrentMonth = useCallback(async () => { + setActionError('') + try { + await loadLeaveDates( + startOfMonth(currentDate), + endOfMonth(currentDate), + ) + } catch { + setActionError('Unable to load leave dates. Please try again.') + } + }, [currentDate, loadLeaveDates]) + + useEffect(() => { + loadCurrentMonth() + }, [loadCurrentMonth]) + + const handlePrevMonth = useCallback(() => { + setSelectedDates(new Set()) + setCurrentDate(prev => subMonths(prev, 1)) + }, []) + + const handleNextMonth = useCallback(() => { + setSelectedDates(new Set()) + setCurrentDate(prev => addMonths(prev, 1)) + }, []) + + const handleDateClick = useCallback((dateKey: string) => { + setSelectedDates(prev => { + const next = new Set(prev) + if (next.has(dateKey)) { + next.delete(dateKey) + } else { + next.add(dateKey) + } + + return next + }) + }, []) + + const handleSetAsLeave = useCallback(async () => { + if (!selectedDates.size) return + + setActionError('') + try { + await updateLeaveDates(Array.from(selectedDates), LeaveStatus.LEAVE) + setSelectedDates(new Set()) + await loadCurrentMonth() + } catch { + setActionError('Unable to update leave dates. Please try again.') + } + }, [loadCurrentMonth, selectedDates, updateLeaveDates]) + + const handleSetAsHoliday = useCallback(async () => { + if (!selectedDates.size) return + + setActionError('') + try { + await updateLeaveDates(Array.from(selectedDates), LeaveStatus.HOLIDAY) + setSelectedDates(new Set()) + await loadCurrentMonth() + } catch { + setActionError('Unable to update leave dates. Please try again.') + } + }, [loadCurrentMonth, selectedDates, updateLeaveDates]) + + const handleSetAsAvailable = useCallback(async () => { + if (!selectedDates.size) return + + setActionError('') + try { + await updateLeaveDates(Array.from(selectedDates), LeaveStatus.AVAILABLE) + setSelectedDates(new Set()) + await loadCurrentMonth() + } catch { + setActionError('Unable to update leave dates. Please try again.') + } + }, [loadCurrentMonth, selectedDates, updateLeaveDates]) + + const selectionLabel = useMemo(() => { + const count = selectedDates.size + if (!count) return 'No dates selected' + return `${count} date${count > 1 ? 's' : ''} selected` + }, [selectedDates]) + + const errorMessage = actionError || (error ? 'Something went wrong. Please try again.' : '') + + return ( +
+
+

Welcome back

+

+ {calendarContext.loginUserInfo?.handle ?? 'Your calendar'} +

+
+ +
+ + +
+ +
+ +
+ +
+
+ + + +
+
{selectionLabel}
+
+ + {errorMessage && ( +
{errorMessage}
+ )} +
+ ) +} + +export default PersonalCalendarPage diff --git a/src/apps/calendar/src/pages/personal-calendar/index.ts b/src/apps/calendar/src/pages/personal-calendar/index.ts new file mode 100644 index 000000000..5141e08f7 --- /dev/null +++ b/src/apps/calendar/src/pages/personal-calendar/index.ts @@ -0,0 +1 @@ +export { default as PersonalCalendarPage } from './PersonalCalendarPage' diff --git a/src/apps/calendar/src/pages/team-calendar/TeamCalendarPage.module.scss b/src/apps/calendar/src/pages/team-calendar/TeamCalendarPage.module.scss new file mode 100644 index 000000000..4735ddd7f --- /dev/null +++ b/src/apps/calendar/src/pages/team-calendar/TeamCalendarPage.module.scss @@ -0,0 +1,46 @@ +.page { + max-width: 1200px; + margin: 0 auto; + padding: 24px 16px 48px; +} + +.header { + margin-bottom: 8px; +} + +.title { + margin: 0; + font-size: 28px; + font-weight: 800; + color: #111827; +} + +.navigation { + display: flex; + justify-content: center; + margin: 14px 0 10px; +} + +.calendarSection { + margin: 0 auto; +} + +.error { + margin-top: 12px; + padding: 12px 16px; + background: #fff5f5; + border: 1px solid #fda4af; + border-radius: 8px; + color: #b91c1c; + font-weight: 600; +} + +@media (max-width: 720px) { + .page { + padding: 20px 12px 32px; + } + + .title { + font-size: 24px; + } +} diff --git a/src/apps/calendar/src/pages/team-calendar/TeamCalendarPage.tsx b/src/apps/calendar/src/pages/team-calendar/TeamCalendarPage.tsx new file mode 100644 index 000000000..ab50c6d28 --- /dev/null +++ b/src/apps/calendar/src/pages/team-calendar/TeamCalendarPage.tsx @@ -0,0 +1,77 @@ +import { addMonths, endOfMonth, startOfMonth, subMonths } from 'date-fns' +import { FC, useCallback, useEffect, useMemo, useState } from 'react' + +import { MonthNavigation, TeamCalendar } from '../../lib/components' +import { useFetchTeamLeave } from '../../lib/hooks' + +import styles from './TeamCalendarPage.module.scss' + +const TeamCalendarPage: FC = () => { + const [currentDate, setCurrentDate] = useState(new Date()) + const [actionError, setActionError] = useState('') + const teamLeaveState = useFetchTeamLeave() + const error = teamLeaveState.error + const isLoading = teamLeaveState.isLoading + const loadTeamLeave = teamLeaveState.loadTeamLeave + const teamLeaveDates = teamLeaveState.teamLeaveDates + + const loadCurrentMonth = useCallback(async () => { + setActionError('') + try { + await loadTeamLeave( + startOfMonth(currentDate), + endOfMonth(currentDate), + ) + } catch { + setActionError('Unable to load team leave. Please try again.') + } + }, [currentDate, loadTeamLeave]) + + useEffect(() => { + loadCurrentMonth() + }, [loadCurrentMonth]) + + const handlePrevMonth = useCallback(() => { + setCurrentDate(prev => subMonths(prev, 1)) + }, []) + + const handleNextMonth = useCallback(() => { + setCurrentDate(prev => addMonths(prev, 1)) + }, []) + + const errorMessage = useMemo(() => { + if (actionError) return actionError + if (error) return 'Something went wrong. Please try again.' + return '' + }, [actionError, error]) + + return ( +
+
+

Team Leave Calendar

+
+ +
+ +
+ +
+ +
+ + {errorMessage && ( +
{errorMessage}
+ )} +
+ ) +} + +export default TeamCalendarPage diff --git a/src/apps/calendar/src/pages/team-calendar/index.ts b/src/apps/calendar/src/pages/team-calendar/index.ts new file mode 100644 index 000000000..be8c78227 --- /dev/null +++ b/src/apps/calendar/src/pages/team-calendar/index.ts @@ -0,0 +1 @@ +export { default as TeamCalendarPage } from './TeamCalendarPage' diff --git a/src/apps/onboarding/src/pages/onboarding/index.tsx b/src/apps/onboarding/src/pages/onboarding/index.tsx index 55447227d..525fd7485 100644 --- a/src/apps/onboarding/src/pages/onboarding/index.tsx +++ b/src/apps/onboarding/src/pages/onboarding/index.tsx @@ -1,12 +1,10 @@ import { FC, useContext, useEffect } from 'react' import { Outlet, Routes, useLocation } from 'react-router-dom' -import { Provider, useDispatch, useSelector } from 'react-redux' +import { Provider, useDispatch } from 'react-redux' import classNames from 'classnames' import { routerContext, RouterContextData } from '~/libs/core' -import { Member } from '~/apps/talent-search/src/lib/models' import { SharedSwrConfig } from '~/libs/shared' -import { EnvironmentConfig } from '~/config' import { onboardRouteId } from '../../onboarding.routes' import { fetchMemberInfo, fetchMemberTraits } from '../../redux/actions/member' @@ -20,7 +18,6 @@ const OnboardingContent: FC<{ const { getChildRoutes }: RouterContextData = useContext(routerContext) const location = useLocation() const dispatch = useDispatch() - const reduxMemberInfo: Member = useSelector((state: any) => state.member.memberInfo) useEffect(() => { dispatch(fetchMemberInfo()) @@ -43,11 +40,6 @@ const OnboardingContent: FC<{ {getChildRoutes(onboardRouteId)}
- - I will complete this onboarding later, - skip for now - . - ) } diff --git a/src/apps/onboarding/src/pages/onboarding/styles.module.scss b/src/apps/onboarding/src/pages/onboarding/styles.module.scss index 6b05aae3e..585282491 100644 --- a/src/apps/onboarding/src/pages/onboarding/styles.module.scss +++ b/src/apps/onboarding/src/pages/onboarding/styles.module.scss @@ -68,19 +68,3 @@ text-transform: none; } } - -.textFooter { - color: $black-80; - margin-top: 64px; - text-align: center; - - @include ltemd { - margin-top: 32px; - max-width: 284px; - } - - a { - color: $turq-160; - font-weight: 500; - } -} \ No newline at end of file diff --git a/src/apps/onboarding/src/pages/skills/index.tsx b/src/apps/onboarding/src/pages/skills/index.tsx index 064e02cc7..9ac5a1606 100644 --- a/src/apps/onboarding/src/pages/skills/index.tsx +++ b/src/apps/onboarding/src/pages/skills/index.tsx @@ -1,5 +1,5 @@ import { useNavigate } from 'react-router-dom' -import { FC, useState } from 'react' +import { FC, useEffect, useState } from 'react' import { connect } from 'react-redux' import classNames from 'classnames' @@ -17,8 +17,15 @@ export const PageSkillsContent: FC<{ const navigate: any = useNavigate() const [loading, setLoading] = useState(false) const editor: MemberSkillEditor = useMemberSkillEditor() + const [showValidationError, setShowValidationError] = useState(false) async function saveSkills(): Promise { + if (!editor.hasValidSkills()) { + setShowValidationError(true) + return + } + + setShowValidationError(false) setLoading(true) try { await editor.saveSkills() @@ -29,6 +36,12 @@ export const PageSkillsContent: FC<{ navigate('../open-to-work') } + useEffect(() => { + if (editor.hasValidSkills()) { + setShowValidationError(false) + } + }, [editor]) + return (

@@ -56,6 +69,11 @@ export const PageSkillsContent: FC<{ progress={1} maxStep={5} /> + {showValidationError && ( + + * Please select at least one skill in both Principal and Additional Skills. + + )}