bug fixed
This commit is contained in:
parent
1c5f5242ef
commit
e0432a2902
@ -1485,7 +1485,7 @@ const location = useLocation();
|
|||||||
<div className="flex items-end space-x-4 mt-4">
|
<div className="flex items-end space-x-4 mt-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
{quarterPeriods?.previous_month?.previous_period_one } Cost <img src={uae_currency} alt="AED" className="inline-block w-4 h-4 -mt-0.5 opacity-70" />
|
{quarterPeriods?.previous_month?.previous_period_one } Cost (<img src={uae_currency} alt="AED" className="inline-block w-5 h-5 -mt-0.5 opacity-100" />)
|
||||||
</label>
|
</label>
|
||||||
<div className="flex items-center h-10 px-3 py-2 text-sm text-gray-700 rounded-md w-24" style={{ border: '1px solid #E6D7A2' }}>
|
<div className="flex items-center h-10 px-3 py-2 text-sm text-gray-700 rounded-md w-24" style={{ border: '1px solid #E6D7A2' }}>
|
||||||
{p.octCost || '0'}
|
{p.octCost || '0'}
|
||||||
@ -1493,7 +1493,7 @@ const location = useLocation();
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
{quarterPeriods?.previous_month?.previous_period_two } Cost (AED)
|
{quarterPeriods?.previous_month?.previous_period_two } Cost (<img src={uae_currency} alt="AED" className="inline-block w-5 h-5 -mt-0.5 opacity-100" />)
|
||||||
</label>
|
</label>
|
||||||
<div className="flex items-center h-10 px-3 py-2 text-sm text-gray-700 rounded-md w-24" style={{ border: '1px solid #E6D7A2' }}>
|
<div className="flex items-center h-10 px-3 py-2 text-sm text-gray-700 rounded-md w-24" style={{ border: '1px solid #E6D7A2' }}>
|
||||||
{p.novCost || '0'}
|
{p.novCost || '0'}
|
||||||
@ -1501,7 +1501,7 @@ const location = useLocation();
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
{quarterPeriods?.previous_month?.previous_period_three } Cost (<img src={uae_currency} alt="AED" className="inline-block w-3.5 h-3 -mt-0.5 opacity-80" />)
|
{quarterPeriods?.previous_month?.previous_period_three } Cost (<img src={uae_currency} alt="AED" className="inline-block w-5 h-5 -mt-0.5 opacity-100" />)
|
||||||
</label>
|
</label>
|
||||||
<div className="flex items-center h-10 px-3 py-2 text-sm text-gray-700 rounded-md w-24" style={{ border: '1px solid #E6D7A2' }}>
|
<div className="flex items-center h-10 px-3 py-2 text-sm text-gray-700 rounded-md w-24" style={{ border: '1px solid #E6D7A2' }}>
|
||||||
{p.decCost || '0'}
|
{p.decCost || '0'}
|
||||||
@ -1570,7 +1570,7 @@ const location = useLocation();
|
|||||||
<div className="flex items-end space-x-4">
|
<div className="flex items-end space-x-4">
|
||||||
<div data-field={`janCost_${idx}`}>
|
<div data-field={`janCost_${idx}`}>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
{quarterPeriods?.current_month?.current_period_one } Cost (<img src={uae_currency} alt="AED" className="inline-block w-3.5 h-3 -mt-0.5 opacity-80" />)<span className="text-red-600">*</span>
|
{quarterPeriods?.current_month?.current_period_one } Cost (<img src={uae_currency} alt="AED" className="inline-block w-5 h-5 -mt-0.5 opacity-100" />)<span className="text-red-600">*</span>
|
||||||
</label>
|
</label>
|
||||||
<Input
|
<Input
|
||||||
className="w-24"
|
className="w-24"
|
||||||
@ -1586,7 +1586,7 @@ const location = useLocation();
|
|||||||
</div>
|
</div>
|
||||||
<div data-field={`febCost_${idx}`}>
|
<div data-field={`febCost_${idx}`}>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
{quarterPeriods?.current_month?.current_period_two} Cost (<img src={uae_currency} alt="AED" className="inline-block w-3.5 h-3 -mt-0.5 opacity-80" />)<span className="text-red-600">*</span>
|
{quarterPeriods?.current_month?.current_period_two} Cost (<img src={uae_currency} alt="AED" className="inline-block w-5 h-5 -mt-0.5 opacity-100" />)<span className="text-red-600">*</span>
|
||||||
</label>
|
</label>
|
||||||
<Input
|
<Input
|
||||||
className="w-24"
|
className="w-24"
|
||||||
@ -1602,7 +1602,7 @@ const location = useLocation();
|
|||||||
</div>
|
</div>
|
||||||
<div data-field={`marCost_${idx}`}>
|
<div data-field={`marCost_${idx}`}>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
{quarterPeriods?.current_month?.current_period_three} Cost (<img src={uae_currency} alt="AED" className="inline-block w-3.5 h-3 -mt-0.5 opacity-80" />)<span className="text-red-600">*</span>
|
{quarterPeriods?.current_month?.current_period_three} Cost (<img src={uae_currency} alt="AED" className="inline-block w-5 h-5 -mt-0.5 opacity-100" />)<span className="text-red-600">*</span>
|
||||||
</label>
|
</label>
|
||||||
<Input
|
<Input
|
||||||
className="w-24"
|
className="w-24"
|
||||||
@ -1715,7 +1715,7 @@ const location = useLocation();
|
|||||||
<div className="flex items-end space-x-3">
|
<div className="flex items-end space-x-3">
|
||||||
<div data-field={`aprCost_${idx}`}>
|
<div data-field={`aprCost_${idx}`}>
|
||||||
<label className="block text-sm font-medium text-gray-700 w-26 mb-1">
|
<label className="block text-sm font-medium text-gray-700 w-26 mb-1">
|
||||||
{quarterPeriods?.forecast_month?.forecast_period_one} Cost (<img src={uae_currency} alt="AED" className="inline-block w-3.5 h-3 -mt-0.5 opacity-80" />)<span className="text-red-600">*</span>
|
{quarterPeriods?.forecast_month?.forecast_period_one} Cost (<img src={uae_currency} alt="AED" className="inline-block w-5 h-5 -mt-0.5 opacity-100" />)<span className="text-red-600">*</span>
|
||||||
</label>
|
</label>
|
||||||
<Input
|
<Input
|
||||||
className="w-24"
|
className="w-24"
|
||||||
@ -1732,7 +1732,7 @@ const location = useLocation();
|
|||||||
</div>
|
</div>
|
||||||
<div data-field={`mayCost_${idx}`}>
|
<div data-field={`mayCost_${idx}`}>
|
||||||
<label className="block text-sm font-medium text-gray-700 w-27 mb-1">
|
<label className="block text-sm font-medium text-gray-700 w-27 mb-1">
|
||||||
{quarterPeriods?.forecast_month?.forecast_period_two } Cost (<img src={uae_currency} alt="AED" className="inline-block w-3.5 h-3 -mt-0.5 opacity-80" />)<span className="text-red-600">*</span>
|
{quarterPeriods?.forecast_month?.forecast_period_two } Cost (<img src={uae_currency} alt="AED" className="inline-block w-5 h-5 -mt-0.5 opacity-100" />)<span className="text-red-600">*</span>
|
||||||
</label>
|
</label>
|
||||||
<Input
|
<Input
|
||||||
className="w-24"
|
className="w-24"
|
||||||
@ -1749,7 +1749,7 @@ const location = useLocation();
|
|||||||
</div>
|
</div>
|
||||||
<div data-field={`junCost_${idx}`}>
|
<div data-field={`junCost_${idx}`}>
|
||||||
<label className="block text-sm font-medium text-gray-700 w-27 mb-1">
|
<label className="block text-sm font-medium text-gray-700 w-27 mb-1">
|
||||||
{quarterPeriods?.forecast_month?.forecast_period_three } Cost (<img src={uae_currency} alt="AED" className="inline-block w-3.5 h-3 -mt-0.5 opacity-80" />)<span className="text-red-600">*</span>
|
{quarterPeriods?.forecast_month?.forecast_period_three } Cost (<img src={uae_currency} alt="AED" className="inline-block w-5 h-5 -mt-0.5 opacity-100" />)<span className="text-red-600">*</span>
|
||||||
</label>
|
</label>
|
||||||
<Input
|
<Input
|
||||||
className="w-24"
|
className="w-24"
|
||||||
|
|||||||
@ -12,6 +12,7 @@ const caretDownActiveSrc = '/assets/images/caretdown-active.svg';
|
|||||||
const searchIconSrc = '/assets/images/material-symbols_search-rounded.svg';
|
const searchIconSrc = '/assets/images/material-symbols_search-rounded.svg';
|
||||||
const caretDownSrc = '/assets/images/CaretDown-black.svg';
|
const caretDownSrc = '/assets/images/CaretDown-black.svg';
|
||||||
|
|
||||||
|
|
||||||
// Custom Toast Component
|
// Custom Toast Component
|
||||||
const CustomToast = ({ message, type, onClose }) => {
|
const CustomToast = ({ message, type, onClose }) => {
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
@ -89,6 +90,8 @@ const QuarterlyWindows = () => {
|
|||||||
const [isLoading, setIsLoading] = React.useState(false);
|
const [isLoading, setIsLoading] = React.useState(false);
|
||||||
const [validationErrors, setValidationErrors] = React.useState({});
|
const [validationErrors, setValidationErrors] = React.useState({});
|
||||||
const [toastData, setToastData] = React.useState(null);
|
const [toastData, setToastData] = React.useState(null);
|
||||||
|
const [isSaving, setIsSaving] = React.useState(false); // Add this line
|
||||||
|
|
||||||
const [sortConfig, setSortConfig] = React.useState({
|
const [sortConfig, setSortConfig] = React.useState({
|
||||||
key: null,
|
key: null,
|
||||||
direction: 'asc'
|
direction: 'asc'
|
||||||
@ -519,109 +522,125 @@ const QuarterlyWindows = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSave = async () => {
|
const handleSave = async () => {
|
||||||
try {
|
try {
|
||||||
if (!validateForm()) {
|
if (!validateForm()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsSaving(true);
|
||||||
|
|
||||||
|
const startDate = new Date(form.startDate);
|
||||||
|
const endDate = new Date(form.endDate);
|
||||||
|
|
||||||
|
const formattedData = {
|
||||||
|
survey_name: form.survey_name || '',
|
||||||
|
year: form.year ? parseInt(form.year, 10) : 0,
|
||||||
|
quarter: form.quarter || '',
|
||||||
|
start_date: startDate.toISOString().split('T')[0],
|
||||||
|
end_date: endDate.toISOString().split('T')[0],
|
||||||
|
grace_periods_days: form.gracePeriod ? parseInt(form.gracePeriod.split(' ')[0], 10) || 0 : 0,
|
||||||
|
assigned: form.assigned || 0,
|
||||||
|
responded: form.responded || 0,
|
||||||
|
not_responded: form.not_responded || 0,
|
||||||
|
is_active: form.status === 'Active',
|
||||||
|
establishment: form.establishment || '-',
|
||||||
|
};
|
||||||
|
|
||||||
|
if (modalMode === 'add') {
|
||||||
|
const response = await createQuarterlyWindow(formattedData);
|
||||||
|
if (response.status === 'success') {
|
||||||
|
// Fetch the latest data from the server
|
||||||
|
const latestData = await getQuarterlyWindows();
|
||||||
|
if (latestData.status === 'success' && Array.isArray(latestData.data)) {
|
||||||
|
const formattedData = latestData.data.map(item => ({
|
||||||
|
id: item.id,
|
||||||
|
survey_name: item.survey_name || '',
|
||||||
|
establishment: item.establishment || '-',
|
||||||
|
year: item.year?.toString() || '',
|
||||||
|
quarter: item.quarter || '',
|
||||||
|
startDate: item.start_date || '',
|
||||||
|
endDate: item.end_date || '',
|
||||||
|
gracePeriod: item.grace_periods_days ? `${item.grace_periods_days} days` : '0 days',
|
||||||
|
submissionCount: item.submission_count?.toString() || '-',
|
||||||
|
assigned: item.assigned?.toString() || '0',
|
||||||
|
responded: item.responded?.toString() || '0',
|
||||||
|
not_responded: item.not_responded?.toString() || '0',
|
||||||
|
status: item.is_active ? 'Active' : 'Inactive'
|
||||||
|
}));
|
||||||
|
setQuarterData(formattedData);
|
||||||
|
}
|
||||||
|
|
||||||
|
setToastData({
|
||||||
|
message: 'Quarterly survey created successfully!',
|
||||||
|
type: 'success'
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
const errorMessage = response.message || 'Failed to add quarterly window';
|
||||||
|
setToastData({
|
||||||
|
message: errorMessage,
|
||||||
|
type: 'error'
|
||||||
|
});
|
||||||
|
console.error('Failed to add quarterly window:', errorMessage);
|
||||||
|
}
|
||||||
|
} else if (modalMode === 'edit' && editingRow !== null) {
|
||||||
|
const itemId = quarterData[editingRow]?.id;
|
||||||
|
if (!itemId) {
|
||||||
|
setToastData({
|
||||||
|
message: 'Error: Could not find the item to update',
|
||||||
|
type: 'error'
|
||||||
|
});
|
||||||
|
console.error('Error: Could not find the item to update');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
const response = await updateQuarterlyWindow(itemId, formattedData);
|
||||||
const startDate = new Date(form.startDate);
|
if (response.status === 'success') {
|
||||||
const endDate = new Date(form.endDate);
|
// Fetch the latest data from the server
|
||||||
|
const latestData = await getQuarterlyWindows();
|
||||||
const formattedData = {
|
if (latestData.status === 'success' && Array.isArray(latestData.data)) {
|
||||||
survey_name: form.survey_name || '',
|
const formattedData = latestData.data.map(item => ({
|
||||||
year: form.year ? parseInt(form.year, 10) : 0,
|
id: item.id,
|
||||||
quarter: form.quarter || '',
|
survey_name: item.survey_name || '',
|
||||||
start_date: startDate.toISOString().split('T')[0],
|
establishment: item.establishment || '-',
|
||||||
end_date: endDate.toISOString().split('T')[0],
|
year: item.year?.toString() || '',
|
||||||
grace_periods_days: form.gracePeriod ? parseInt(form.gracePeriod.split(' ')[0], 10) || 0 : 0,
|
quarter: item.quarter || '',
|
||||||
assigned: form.assigned || 0,
|
startDate: item.start_date || '',
|
||||||
responded: form.responded || 0,
|
endDate: item.end_date || '',
|
||||||
not_responded: form.not_responded || 0,
|
gracePeriod: item.grace_periods_days ? `${item.grace_periods_days} days` : '0 days',
|
||||||
is_active: form.status === 'Active',
|
submissionCount: item.submission_count?.toString() || '-',
|
||||||
establishment: form.establishment || '-',
|
assigned: item.assigned?.toString() || '0',
|
||||||
};
|
responded: item.responded?.toString() || '0',
|
||||||
|
not_responded: item.not_responded?.toString() || '0',
|
||||||
if (modalMode === 'add') {
|
status: item.is_active ? 'Active' : 'Inactive'
|
||||||
const response = await createQuarterlyWindow(formattedData);
|
}));
|
||||||
if (response.status === 'success') {
|
setQuarterData(formattedData);
|
||||||
const newItem = {
|
|
||||||
...formattedData,
|
|
||||||
id: response.data.id || Date.now(),
|
|
||||||
startDate: form.startDate,
|
|
||||||
endDate: form.endDate,
|
|
||||||
gracePeriod: formattedData.grace_periods_days ? `${formattedData.grace_periods_days} days` : '0 days',
|
|
||||||
submissionCount: '0',
|
|
||||||
status: formattedData.is_active ? 'Active' : 'Inactive'
|
|
||||||
};
|
|
||||||
setQuarterData((prev) => [...prev, newItem]);
|
|
||||||
|
|
||||||
// Show success toast for add
|
|
||||||
setToastData({
|
|
||||||
message: 'Quarterly survey created successfully!',
|
|
||||||
type: 'success'
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// Show error message from API response if available
|
|
||||||
const errorMessage = response.message || 'Failed to add quarterly window';
|
|
||||||
setToastData({
|
|
||||||
message: errorMessage,
|
|
||||||
type: 'error'
|
|
||||||
});
|
|
||||||
console.error('Failed to add quarterly window:', errorMessage);
|
|
||||||
}
|
}
|
||||||
} else if (modalMode === 'edit' && editingRow !== null) {
|
|
||||||
const itemId = quarterData[editingRow]?.id;
|
|
||||||
if (!itemId) {
|
|
||||||
setToastData({
|
|
||||||
message: 'Error: Could not find the item to update',
|
|
||||||
type: 'error'
|
|
||||||
});
|
|
||||||
console.error('Error: Could not find the item to update');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const response = await updateQuarterlyWindow(itemId, formattedData);
|
|
||||||
if (response.status === 'success') {
|
|
||||||
setQuarterData((prev) =>
|
|
||||||
prev.map((item, idx) =>
|
|
||||||
idx === editingRow
|
|
||||||
? {
|
|
||||||
...item,
|
|
||||||
...formattedData,
|
|
||||||
startDate: form.startDate,
|
|
||||||
endDate: form.endDate,
|
|
||||||
gracePeriod: formattedData.grace_periods_days ? `${formattedData.grace_periods_days} days` : '0 days',
|
|
||||||
status: formattedData.is_active ? 'Active' : 'Inactive'
|
|
||||||
}
|
|
||||||
: item
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
// Show success toast for edit
|
setToastData({
|
||||||
setToastData({
|
message: 'Quarterly survey updated successfully!',
|
||||||
message: 'Quarterly survey updated successfully!',
|
type: 'success'
|
||||||
type: 'success'
|
});
|
||||||
});
|
} else {
|
||||||
} else {
|
const errorMessage = response.message || 'Failed to update quarterly window';
|
||||||
// Show error message from API response if available
|
setToastData({
|
||||||
const errorMessage = response.message || 'Failed to update quarterly window';
|
message: errorMessage,
|
||||||
setToastData({
|
type: 'error'
|
||||||
message: errorMessage,
|
});
|
||||||
type: 'error'
|
console.error('Failed to update quarterly window:', errorMessage);
|
||||||
});
|
|
||||||
console.error('Failed to update quarterly window:', errorMessage);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
handleCloseModal();
|
|
||||||
} catch (error) {
|
|
||||||
const errorMessage = error.response?.data?.message || error.message || 'An error occurred while saving';
|
|
||||||
setToastData({
|
|
||||||
message: errorMessage,
|
|
||||||
type: 'error'
|
|
||||||
});
|
|
||||||
console.error('Error saving quarterly window:', error);
|
|
||||||
}
|
}
|
||||||
};
|
handleCloseModal();
|
||||||
|
} catch (error) {
|
||||||
|
const errorMessage = error.response?.data?.message || error.message || 'An error occurred while saving';
|
||||||
|
setToastData({
|
||||||
|
message: errorMessage,
|
||||||
|
type: 'error'
|
||||||
|
});
|
||||||
|
console.error('Error saving quarterly window:', error);
|
||||||
|
} finally {
|
||||||
|
setIsSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full max-w-[1280px] rounded-lg border border-[#C3C6CB] bg-white min-h-[348px] pb-6">
|
<div className="w-full max-w-[1280px] rounded-lg border border-[#C3C6CB] bg-white min-h-[348px] pb-6">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user