Carousel integration done
This commit is contained in:
parent
c9fbac1f6f
commit
93c40e4f8c
@ -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: '15–20 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: '15–20 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: '15–20 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: '15–20 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;
|
||||
Loading…
Reference in New Issue
Block a user