feat: implement organization working days and hours settings

- Added functionality to fetch and update organization working days and hours in the admin center.
- Introduced a form for saving working days and hours, with validation and error handling.
- Updated the reporting allocation logic to utilize organization-specific working hours for accurate calculations.
- Enhanced localization files to support new settings in English, Spanish, and Portuguese.
This commit is contained in:
chamikaJ
2025-05-19 16:07:35 +05:30
parent fc30c1854e
commit a8b20680e5
7 changed files with 157 additions and 21 deletions

View File

@@ -1,6 +1,6 @@
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 { Button, Card, Input, Space, Tooltip, Typography, Checkbox, Col, Form, Row, message } 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';
@@ -12,6 +12,8 @@ import { adminCenterApiService } from '@/api/admin-center/admin-center.api.servi
import { IOrganization, IOrganizationAdmin } from '@/types/admin-center/admin-center.types';
import logger from '@/utils/errorLogger';
import { tr } from 'date-fns/locale';
import { scheduleAPIService } from '@/api/schedule/schedule.api.service';
import { Settings } from '@/types/schedule/schedule-v2.types';
const { Text } = Typography;
@@ -19,6 +21,10 @@ const Overview: React.FC = () => {
const [organization, setOrganization] = useState<IOrganization | null>(null);
const [organizationAdmins, setOrganizationAdmins] = useState<IOrganizationAdmin[] | null>(null);
const [loadingAdmins, setLoadingAdmins] = useState(false);
const [workingDays, setWorkingDays] = useState<Settings['workingDays']>([]);
const [workingHours, setWorkingHours] = useState<Settings['workingHours']>(8);
const [saving, setSaving] = useState(false);
const [form] = Form.useForm();
const themeMode = useAppSelector((state: RootState) => state.themeReducer.mode);
const { t } = useTranslation('admin-center/overview');
@@ -34,6 +40,19 @@ const Overview: React.FC = () => {
}
};
const getOrgWorkingSettings = async () => {
try {
const res = await scheduleAPIService.fetchScheduleSettings();
if (res && res.done) {
setWorkingDays(res.body.workingDays || ['Monday','Tuesday','Wednesday','Thursday','Friday']);
setWorkingHours(res.body.workingHours || 8);
form.setFieldsValue({ workingDays: res.body.workingDays || ['Monday','Tuesday','Wednesday','Thursday','Friday'], workingHours: res.body.workingHours || 8 });
}
} catch (error) {
logger.error('Error getting organization working settings', error);
}
};
const getOrganizationAdmins = async () => {
setLoadingAdmins(true);
try {
@@ -48,8 +67,30 @@ const Overview: React.FC = () => {
}
};
const handleSave = async (values: any) => {
setSaving(true);
try {
const res = await scheduleAPIService.updateScheduleSettings({
workingDays: values.workingDays,
workingHours: values.workingHours,
});
if (res && res.done) {
message.success(t('saved'));
setWorkingDays(values.workingDays);
setWorkingHours(values.workingHours);
getOrgWorkingSettings();
}
} catch (error) {
logger.error('Error updating organization working days/hours', error);
message.error(t('errorSaving'));
} finally {
setSaving(false);
}
};
useEffect(() => {
getOrganizationDetails();
getOrgWorkingSettings();
getOrganizationAdmins();
}, []);
@@ -72,6 +113,37 @@ const Overview: React.FC = () => {
refetch={getOrganizationDetails}
/>
<Card>
<Typography.Title level={5} style={{ margin: 0 }}>{t('organizationWorkingDaysAndHours') || 'Organization Working Days & Hours'}</Typography.Title>
<Form
layout="vertical"
form={form}
initialValues={{ workingDays, workingHours }}
onFinish={handleSave}
style={{ marginTop: 16 }}
>
<Form.Item label={t('workingDays')} name="workingDays">
<Checkbox.Group>
<Row>
<Col span={8}><Checkbox value="Monday">{t('monday')}</Checkbox></Col>
<Col span={8}><Checkbox value="Tuesday">{t('tuesday')}</Checkbox></Col>
<Col span={8}><Checkbox value="Wednesday">{t('wednesday')}</Checkbox></Col>
<Col span={8}><Checkbox value="Thursday">{t('thursday')}</Checkbox></Col>
<Col span={8}><Checkbox value="Friday">{t('friday')}</Checkbox></Col>
<Col span={8}><Checkbox value="Saturday">{t('saturday')}</Checkbox></Col>
<Col span={8}><Checkbox value="Sunday">{t('sunday')}</Checkbox></Col>
</Row>
</Checkbox.Group>
</Form.Item>
<Form.Item label={t('workingHours')} name="workingHours">
<Input type="number" min={1} max={24} suffix={t('hours')} width={100} />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" loading={saving}>{t('saveButton') || 'Save'}</Button>
</Form.Item>
</Form>
</Card>
<Card>
<Typography.Title level={5} style={{ margin: 0 }}>
{t('admins')}