bug fixed
This commit is contained in:
Malini
parent
1c5f5242ef
commit
e0432a2902
@ -1485,7 +1485,7 @@ const location = useLocation();
|
||||
<div className="flex items-end space-x-4 mt-4">
|
||||
<div>
|
||||
<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>
|
||||
<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'}
|
||||
@ -1493,7 +1493,7 @@ const location = useLocation();
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
<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'}
|
||||
@ -1501,7 +1501,7 @@ const location = useLocation();
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
<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'}
|
||||
@ -1570,7 +1570,7 @@ const location = useLocation();
|
||||
<div className="flex items-end space-x-4">
|
||||
<div data-field={`janCost_${idx}`}>
|
||||
<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>
|
||||
<Input
|
||||
className="w-24"
|
||||
@ -1586,7 +1586,7 @@ const location = useLocation();
|
||||
</div>
|
||||
<div data-field={`febCost_${idx}`}>
|
||||
<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>
|
||||
<Input
|
||||
className="w-24"
|
||||
@ -1602,7 +1602,7 @@ const location = useLocation();
|
||||
</div>
|
||||
<div data-field={`marCost_${idx}`}>
|
||||
<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>
|
||||
<Input
|
||||
className="w-24"
|
||||
@ -1715,7 +1715,7 @@ const location = useLocation();
|
||||
<div className="flex items-end space-x-3">
|
||||
<div data-field={`aprCost_${idx}`}>
|
||||
<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>
|
||||
<Input
|
||||
className="w-24"
|
||||
@ -1732,7 +1732,7 @@ const location = useLocation();
|
||||
</div>
|
||||
<div data-field={`mayCost_${idx}`}>
|
||||
<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>
|
||||
<Input
|
||||
className="w-24"
|
||||
@ -1749,7 +1749,7 @@ const location = useLocation();
|
||||
</div>
|
||||
<div data-field={`junCost_${idx}`}>
|
||||
<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>
|
||||
<Input
|
||||
className="w-24"
|
||||
|
||||
@ -12,6 +12,7 @@ const caretDownActiveSrc = '/assets/images/caretdown-active.svg';
|
||||
const searchIconSrc = '/assets/images/material-symbols_search-rounded.svg';
|
||||
const caretDownSrc = '/assets/images/CaretDown-black.svg';
|
||||
|
||||
|
||||
// Custom Toast Component
|
||||
const CustomToast = ({ message, type, onClose }) => {
|
||||
React.useEffect(() => {
|
||||
@ -89,6 +90,8 @@ const QuarterlyWindows = () => {
|
||||
const [isLoading, setIsLoading] = React.useState(false);
|
||||
const [validationErrors, setValidationErrors] = React.useState({});
|
||||
const [toastData, setToastData] = React.useState(null);
|
||||
const [isSaving, setIsSaving] = React.useState(false); // Add this line
|
||||
|
||||
const [sortConfig, setSortConfig] = React.useState({
|
||||
key: null,
|
||||
direction: 'asc'
|
||||
@ -519,109 +522,125 @@ const QuarterlyWindows = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
if (!validateForm()) {
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
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;
|
||||
}
|
||||
|
||||
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') {
|
||||
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({
|
||||
message: 'Quarterly survey updated successfully!',
|
||||
type: 'success'
|
||||
});
|
||||
} else {
|
||||
// Show error message from API response if available
|
||||
const errorMessage = response.message || 'Failed to update quarterly window';
|
||||
setToastData({
|
||||
message: errorMessage,
|
||||
type: 'error'
|
||||
});
|
||||
console.error('Failed to update quarterly window:', errorMessage);
|
||||
const response = await updateQuarterlyWindow(itemId, 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 updated successfully!',
|
||||
type: 'success'
|
||||
});
|
||||
} else {
|
||||
const errorMessage = response.message || 'Failed to update quarterly window';
|
||||
setToastData({
|
||||
message: errorMessage,
|
||||
type: 'error'
|
||||
});
|
||||
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 (
|
||||
<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