bug fixed

This commit is contained in:
Malini 2025-12-10 15:18:55 +05:30
parent 1c5f5242ef
commit e0432a2902
2 changed files with 126 additions and 107 deletions

View File

@ -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"

View File

@ -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">