Holiday front end

package.json

@@ -66,6 +66,7 @@
 		"csv": "~5.3.2",
 		"csv-stringify": "~5.6.5",
 		"d3": "~7.8.5",
+		"date-holidays": "~3.33.0",
 		"dotenv": "~16.4.5",
 		"escape-html": "~1.0.3",
 		"express": "~4.19.2",

src/client/app/components/HeaderButtonsComponent.tsx

@@ -11,15 +11,15 @@ import TooltipHelpComponent from '../components/TooltipHelpComponent';
 import { clearGraphHistory } from '../redux/actions/extraActions';
 import { authApi } from '../redux/api/authApi';
 import { selectOEDVersion } from '../redux/api/versionApi';
+import { useTranslate } from '../redux/componentHooks';
 import { useAppDispatch, useAppSelector } from '../redux/reduxHooks';
 import { selectHelpUrl } from '../redux/slices/adminSlice';
 import { selectOptionsVisibility, toggleOptionsVisibility } from '../redux/slices/appStateSlice';
 import { selectHasRolePermissions, selectIsAdmin, selectIsLoggedIn } from '../redux/slices/currentUserSlice';
 import { UserRole } from '../types/items';
-import { useTranslate } from '../redux/componentHooks';
 import LanguageSelectorComponent from './LanguageSelectorComponent';
-import TooltipMarkerComponent from './TooltipMarkerComponent';
 import LoginComponent from './LoginComponent';
+import TooltipMarkerComponent from './TooltipMarkerComponent';
 
 /**
  * React Component that defines the header buttons at the top of a page
@@ -58,12 +58,17 @@ export default function HeaderButtonsComponent() {
 		shouldAdminButtonDisabled: true,
 		shouldUsersButtonDisabled: true,
 		shouldGroupsButtonDisabled: true,
+		shouldHolidaysButtonDisabled: true,
+		shouldHolidayInstancesButtonDisabled: true,
+		shouldHolidayInstanceGroupsButtonDisabled: true,
 		shouldMetersButtonDisabled: true,
 		shouldMapsButtonDisabled: true,
 		shouldCSVMetersButtonDisabled: true,
 		shouldCSVReadingsButtonDisabled: true,
 		shouldUnitsButtonDisabled: true,
 		shouldConversionsButtonDisabled: true,
+		shouldDaysButtonDisabled: true,
+		shouldWeeksButtonDisabled: true,
 		shouldLogMsgButtonDisabled: true,
 		shouldVisualUnitMapButtonDisabled: true,
 		// Translated menu title that depend on whether logged in.
@@ -96,12 +101,17 @@ export default function HeaderButtonsComponent() {
 			shouldAdminButtonDisabled: pathname === '/admin',
 			shouldUsersButtonDisabled: pathname === '/users',
 			shouldGroupsButtonDisabled: pathname === '/groups',
+			shouldHolidaysButtonDisabled: pathname === '/holidays',
+			shouldHolidayInstancesButtonDisabled: pathname === '/holiday-instances',
+			shouldHolidayInstanceGroupsButtonDisabled: pathname === '/holiday-instance-groups',
 			shouldMetersButtonDisabled: pathname === '/meters',
 			shouldMapsButtonDisabled: pathname === '/maps',
 			shouldCSVMetersButtonDisabled: pathname === '/csvMeters',
 			shouldCSVReadingsButtonDisabled: pathname === '/csvReadings',
 			shouldUnitsButtonDisabled: pathname === '/units',
 			shouldConversionsButtonDisabled: pathname === '/conversions',
+			shouldDaysButtonDisabled: pathname === '/days',
+			shouldWeeksButtonDisabled: pathname === '/weeks',
 			shouldLogMsgButtonDisabled: pathname === '/logmsg',
 			shouldVisualUnitMapButtonDisabled: pathname === '/visual-unit'
 		}));
@@ -211,6 +221,27 @@ export default function HeaderButtonsComponent() {
 								to="/groups">
 								<FormattedMessage id='groups' />
 							</DropdownItem>
+							<DropdownItem
+								style={state.adminViewableLinkStyle}
+								disabled={state.shouldHolidayInstanceGroupsButtonDisabled}
+								tag={Link}
+								to="/holiday-instance-groups">
+								<FormattedMessage id='holiday.instance.groups' />
+							</DropdownItem>
+							<DropdownItem
+								style={state.adminViewableLinkStyle}
+								disabled={state.shouldHolidayInstancesButtonDisabled}
+								tag={Link}
+								to="/holiday-instances">
+								<FormattedMessage id='holiday.rates' />
+							</DropdownItem>
+							<DropdownItem
+								style={state.adminViewableLinkStyle}
+								disabled={state.shouldHolidaysButtonDisabled}
+								tag={Link}
+								to="/holidays">
+								<FormattedMessage id='holidays' />
+							</DropdownItem>
 							<DropdownItem
 								style={state.adminViewableLinkStyle}
 								disabled={state.shouldMapsButtonDisabled}
@@ -224,6 +255,20 @@ export default function HeaderButtonsComponent() {
 								to="/meters">
 								<FormattedMessage id='meters' />
 							</DropdownItem>
+							<DropdownItem
+								style={state.adminViewableLinkStyle}
+								disabled={state.shouldDaysButtonDisabled}
+								tag={Link}
+								to="/days">
+								<FormattedMessage id='patterns.daily' />
+							</DropdownItem>
+							<DropdownItem
+								style={state.adminViewableLinkStyle}
+								disabled={state.shouldWeeksButtonDisabled}
+								tag={Link}
+								to="/weeks">
+								<FormattedMessage id='patterns.weekly' />
+							</DropdownItem>
 							<DropdownItem
 								style={state.adminViewableLinkStyle}
 								disabled={state.shouldUnitsButtonDisabled}
@@ -322,4 +367,4 @@ export default function HeaderButtonsComponent() {
 
 		</div>
 	);
-}
+}

src/client/app/components/RouteComponent.tsx

@@ -4,29 +4,35 @@
 import * as React from 'react';
 import { IntlProvider } from 'react-intl';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
-import ReadingsCSVUploadComponent from '../components/csv/ReadingsCSVUploadComponent';
 import MetersCSVUploadComponent from '../components/csv/MetersCSVUploadComponent';
+import ReadingsCSVUploadComponent from '../components/csv/ReadingsCSVUploadComponent';
 import MapCalibrationContainer from '../containers/maps/MapCalibrationContainer';
 import MapsDetailContainer from '../containers/maps/MapsDetailContainer';
 import { useAppSelector } from '../redux/reduxHooks';
+import { selectSelectedLanguage } from '../redux/slices/appStateSlice';
 import LocaleTranslationData from '../translations/data';
 import { UserRole } from '../types/items';
 import AppLayout from './AppLayout';
 import HomeComponent from './HomeComponent';
 import AdminComponent from './admin/AdminComponent';
+import LogMsgComponent from './admin/LogMsgComponent';
 import UsersDetailComponent from './admin/users/UsersDetailComponent';
 import ConversionsDetailComponent from './conversion/ConversionsDetailComponent';
+import DaysDetailComponent from './days/DaysDetailComponent';
 import GroupsDetailComponent from './groups/GroupsDetailComponent';
 import MetersDetailComponent from './meters/MetersDetailComponent';
 import AdminOutlet from './router/AdminOutlet';
+import ErrorComponent from './router/ErrorComponent';
 import { GraphLink } from './router/GraphLinkComponent';
 import NotFound from './router/NotFoundOutlet';
 import RoleOutlet from './router/RoleOutlet';
 import UnitsDetailComponent from './unit/UnitsDetailComponent';
-import ErrorComponent from './router/ErrorComponent';
-import { selectSelectedLanguage } from '../redux/slices/appStateSlice';
-import LogMsgComponent from './admin/LogMsgComponent';
 import VisualUnitDetailComponent from './visual-unit/VisualUnitDetailComponent';
+import HolidayInstanceGroupComponent from './holiday-instance-groups/HolidayInstanceGroupComponent';
+import WeeksDetailComponent from './weeks/WeeksDetailComponent';
+import HolidayInstancePage from './holiday-instances/HolidayInstancePage';
+import HolidayPage from './holiday/HolidayPage';
+
 
 /**
  * @returns the router component Responsible for client side routing.
@@ -55,15 +61,20 @@ const router = createBrowserRouter([
 				element: <AdminOutlet />,
 				children: [
 					{ path: 'admin', element: <AdminComponent /> },
+					{ path: 'holidays', element: <HolidayPage /> },
+					{ path: 'holiday-instances', element: <HolidayInstancePage /> },
 					{ path: 'calibration', element: <MapCalibrationContainer /> },
 					{ path: 'conversions', element: <ConversionsDetailComponent /> },
+					{ path: 'days', element: <DaysDetailComponent /> },
+					{ path: 'weeks', element: <WeeksDetailComponent /> },
 					{ path: 'csvMeters', element: <MetersCSVUploadComponent /> },
 					{ path: 'maps', element: <MapsDetailContainer /> },
 					{ path: 'units', element: <UnitsDetailComponent /> },
 					{ path: 'users', element: <UsersDetailComponent /> },
 					{ path: 'logmsg', element: <LogMsgComponent /> },
 					{ path: 'users', element: <UsersDetailComponent /> },
-					{ path: 'visual-unit', element: <VisualUnitDetailComponent/> }
+					{ path: 'visual-unit', element: <VisualUnitDetailComponent/> },
+					{ path: 'holiday-instance-groups', element: <HolidayInstanceGroupComponent /> }
 				]
 			},
 			{