Merge branch 'feature/add-calender-and-holidays' of https://github.com/Worklenz/worklenz into feature/team-utilization

worklenz-frontend/src/pages/admin-center/overview/overview.tsx

@@ -1,6 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import {
+  Button,
   Card,
+  DatabaseOutlined,
+  message,
   Space,
   Typography,
 } from '@/shared/antd-imports';
@@ -11,7 +14,9 @@ import { RootState } from '@/app/store';
 import { useTranslation } from 'react-i18next';
 import OrganizationName from '@/components/admin-center/overview/organization-name/organization-name';
 import OrganizationOwner from '@/components/admin-center/overview/organization-owner/organization-owner';
+import HolidayCalendar from '@/components/admin-center/overview/holiday-calendar/holiday-calendar';
 import { adminCenterApiService } from '@/api/admin-center/admin-center.api.service';
+import { holidayApiService } from '@/api/holiday/holiday.api.service';
 import { IOrganization, IOrganizationAdmin } from '@/types/admin-center/admin-center.types';
 import logger from '@/utils/errorLogger';
 
@@ -19,6 +24,7 @@ const Overview: React.FC = () => {
   const [organization, setOrganization] = useState<IOrganization | null>(null);
   const [organizationAdmins, setOrganizationAdmins] = useState<IOrganizationAdmin[] | null>(null);
   const [loadingAdmins, setLoadingAdmins] = useState(false);
+  const [populatingHolidays, setPopulatingHolidays] = useState(false);
 
   const themeMode = useAppSelector((state: RootState) => state.themeReducer.mode);
   const { t } = useTranslation('admin-center/overview');
@@ -48,6 +54,21 @@ const Overview: React.FC = () => {
     }
   };
 
+  const handlePopulateHolidays = async () => {
+    setPopulatingHolidays(true);
+    try {
+      const res = await holidayApiService.populateCountryHolidays();
+      if (res.done) {
+        message.success(`Successfully populated ${res.body.total_populated} holidays`);
+      }
+    } catch (error) {
+      logger.error('Error populating holidays', error);
+      message.error('Failed to populate holidays');
+    } finally {
+      setPopulatingHolidays(false);
+    }
+  };
+
   useEffect(() => {
     getOrganizationDetails();
     getOrganizationAdmins();
@@ -55,7 +76,20 @@ const Overview: React.FC = () => {
 
   return (
     <div style={{ width: '100%' }}>
-      <PageHeader title={<span>{t('overview')}</span>} style={{ padding: '16px 0' }} />
+      <PageHeader 
+        title={<span>{t('overview')}</span>} 
+        style={{ padding: '16px 0' }}
+        extra={[
+          <Button
+            key="populate-holidays"
+            icon={<DatabaseOutlined />}
+            onClick={handlePopulateHolidays}
+            loading={populatingHolidays}
+          >
+            Populate Holidays Database
+          </Button>
+        ]}
+      />
 
       <Space direction="vertical" style={{ width: '100%' }} size={22}>
         <OrganizationName
@@ -82,6 +116,8 @@ const Overview: React.FC = () => {
             themeMode={themeMode}
           />
         </Card>
+
+        <HolidayCalendar themeMode={themeMode} />
       </Space>
     </div>
   );