5214368354
- Added holiday types and organization holidays management with CRUD operations. - Introduced country holidays import functionality using the date-holidays npm package. - Created database migrations for holiday types and organization holidays tables. - Developed a holiday calendar component for visual representation and management of holidays. - Enhanced API routes for holiday-related operations and integrated them into the admin center. - Updated frontend localization for holiday management features. - Implemented scripts for populating holidays in the database for 200+ countries.
93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
import { EditOutlined, MailOutlined, PhoneOutlined } from '@ant-design/icons';
|
|
import { PageHeader } from '@ant-design/pro-components';
|
|
import { Button, Card, Input, Space, Tooltip, Typography } from 'antd';
|
|
import React, { useEffect, useState } from 'react';
|
|
import OrganizationAdminsTable from '@/components/admin-center/overview/organization-admins-table/organization-admins-table';
|
|
import { useAppSelector } from '@/hooks/useAppSelector';
|
|
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 { IOrganization, IOrganizationAdmin } from '@/types/admin-center/admin-center.types';
|
|
import logger from '@/utils/errorLogger';
|
|
|
|
const { Text } = Typography;
|
|
|
|
const Overview: React.FC = () => {
|
|
const [organization, setOrganization] = useState<IOrganization | null>(null);
|
|
const [organizationAdmins, setOrganizationAdmins] = useState<IOrganizationAdmin[] | null>(null);
|
|
const [loadingAdmins, setLoadingAdmins] = useState(false);
|
|
|
|
const themeMode = useAppSelector((state: RootState) => state.themeReducer.mode);
|
|
const { t } = useTranslation('admin-center/overview');
|
|
|
|
const getOrganizationDetails = async () => {
|
|
try {
|
|
const res = await adminCenterApiService.getOrganizationDetails();
|
|
if (res.done) {
|
|
setOrganization(res.body);
|
|
}
|
|
} catch (error) {
|
|
logger.error('Error getting organization details', error);
|
|
}
|
|
};
|
|
|
|
const getOrganizationAdmins = async () => {
|
|
setLoadingAdmins(true);
|
|
try {
|
|
const res = await adminCenterApiService.getOrganizationAdmins();
|
|
if (res.done) {
|
|
setOrganizationAdmins(res.body);
|
|
}
|
|
} catch (error) {
|
|
logger.error('Error getting organization admins', error);
|
|
} finally {
|
|
setLoadingAdmins(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
getOrganizationDetails();
|
|
getOrganizationAdmins();
|
|
}, []);
|
|
|
|
return (
|
|
<div style={{ width: '100%' }}>
|
|
<PageHeader title={<span>{t('overview')}</span>} style={{ padding: '16px 0' }} />
|
|
|
|
<Space direction="vertical" style={{ width: '100%' }} size={22}>
|
|
<OrganizationName
|
|
themeMode={themeMode}
|
|
name={organization?.name || ''}
|
|
t={t}
|
|
refetch={getOrganizationDetails}
|
|
/>
|
|
|
|
<OrganizationOwner
|
|
themeMode={themeMode}
|
|
organization={organization}
|
|
t={t}
|
|
refetch={getOrganizationDetails}
|
|
/>
|
|
|
|
<Card>
|
|
<Typography.Title level={5} style={{ margin: 0 }}>
|
|
{t('admins')}
|
|
</Typography.Title>
|
|
<OrganizationAdminsTable
|
|
organizationAdmins={organizationAdmins}
|
|
loading={loadingAdmins}
|
|
themeMode={themeMode}
|
|
/>
|
|
</Card>
|
|
|
|
<HolidayCalendar themeMode={themeMode} />
|
|
</Space>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Overview;
|