Carousel integration done

This commit is contained in:
Senthamilselvi 2025-10-30 15:03:48 +05:30
parent c9fbac1f6f
commit 93c40e4f8c

View File

@ -11,7 +11,11 @@ const formatDate = (value) => {
if (!value) return '—';
const date = new Date(value);
if (Number.isNaN(date.getTime())) return '—';
return date.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
return date.toLocaleDateString('en-GB', {
day: '2-digit',
month: 'short',
year: 'numeric',
});
};
const formatRelativeDays = (value) => {
@ -22,73 +26,80 @@ const formatRelativeDays = (value) => {
const diffMs = deadline.getTime() - now.getTime();
const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
if (!Number.isFinite(diffDays)) return '—';
if (diffDays < 0) return `${Math.abs(diffDays)} days overdue`;
if (diffDays < 0) return `${Math.abs(diffDays)} day${Math.abs(diffDays) === 1 ? '' : 's'} overdue`;
if (diffDays === 0) return 'Due today';
return `${diffDays} day${diffDays === 1 ? '' : 's'}`;
return `Due in ${diffDays} day${diffDays === 1 ? '' : 's'}`;
};
const surveyList = [
{
title: 'Q4 2024 Survey Ready',
subtitle: 'Complete your quarterly industrial production data submission',
dueDate: '31.01.2025',
estTime: '1520 minutes',
status: 'Pending',
},
{
title: 'Q1 2025 Survey Ready',
subtitle: 'Begin your new quarter production data collection',
dueDate: '30.04.2025',
estTime: '20 minutes',
status: 'Pending',
},
{
title: 'Q2 2025 Survey Ready',
subtitle: 'Review and confirm your industrial production figures',
dueDate: '31.07.2025',
estTime: '25 minutes',
status: 'Pending',
},
];
export const SurveyStatus = ({ data = null, loading = false, error = '' }) => {
const navigate = useNavigate();
const handleStartSurvey = (survey) => {
console.log('Starting survey:', survey.title);
};
const surveyData = data || {};
const nextDeadline = surveyData?.next_deadline;
const formattedDueDate = formatDate(nextDeadline);
const relativeDue = formatRelativeDays(nextDeadline);
const submissionStatus = data?.submission_status || '—';
const currentQuarter = formatQuarterYear(data?.current_quarter, data?.current_quarter_year);
const nextDeadlineDate = formatDate(data?.next_deadline);
const nextDeadlineRelative = formatRelativeDays(data?.next_deadline);
const lastSubmissionQuarter = formatQuarterYear(data?.last_submission?.quarter, data?.last_submission?.year);
const lastSubmissionDate = formatDate(data?.last_submission?.submitted_on);
const surveys = [
{
title: `${formatQuarterYear(surveyData.previous_quarter, surveyData.previous_quarter_year)} Survey Ready`,
subtitle: 'Complete your quarterly industrial production data submission',
dueDate: formattedDueDate,
relativeDue,
estTime: '1520 minutes',
status: surveyData?.submission_status || 'Pending',
},
{
title: `${formatQuarterYear(surveyData.current_quarter, surveyData.current_quarter_year)} Survey Ready`,
subtitle: 'Complete your quarterly industrial production data submission',
dueDate: formattedDueDate,
relativeDue,
estTime: '1520 minutes',
status: surveyData?.submission_status || 'Pending',
},
{
title: `${formatQuarterYear(surveyData.next_quarter, surveyData.next_quarter_year)} Survey Ready`,
subtitle: 'Complete your quarterly industrial production data submission',
dueDate: formattedDueDate,
relativeDue,
estTime: '1520 minutes',
status: surveyData?.submission_status || 'Pending',
},
];
const heroTitle = loading
? 'Loading survey status…'
: error
? 'Unable to load survey status'
: currentQuarter !== '—'
? `${currentQuarter} Survey`
: 'Survey status unavailable';
? 'Unable to load survey status'
: 'Survey Overview';
const heroSubtitle = loading
? 'Fetching the latest reporting information.'
: error
? error
: 'Complete your quarterly industrial production data submission';
? error
: 'Complete your quarterly industrial production data submission';
return (
<section className="max-w-[1280px] mx-auto px-0">
<div className="p-6">
<SurveyCarousel
surveys={surveyList}
autoRotate
rotateInterval={7000}
onStartSurvey={handleStartSurvey}
/>
</div>
{loading ? (
<div className="text-center text-gray-500 text-sm py-10">Loading survey status...</div>
) : error ? (
<div className="text-center text-red-600 text-sm py-10">{error}</div>
) : (
<SurveyCarousel
surveys={surveys}
autoRotate
rotateInterval={7000}
onStartSurvey={handleStartSurvey}
/>
)}
</div>
</section>
);
};
};
export default SurveyStatus;