Carousel integration done

ipi-survey-platform/src/components/dashboard/SurveyStatus.jsx

@@ -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 surveys = [
-  const currentQuarter = formatQuarterYear(data?.current_quarter, data?.current_quarter_year);
+    {
-  const nextDeadlineDate = formatDate(data?.next_deadline);
+      title: `${formatQuarterYear(surveyData.previous_quarter, surveyData.previous_quarter_year)} Survey Ready`,
-  const nextDeadlineRelative = formatRelativeDays(data?.next_deadline);
+      subtitle: 'Complete your quarterly industrial production data submission',
-  const lastSubmissionQuarter = formatQuarterYear(data?.last_submission?.quarter, data?.last_submission?.year);
+      dueDate: formattedDueDate,
-  const lastSubmissionDate = formatDate(data?.last_submission?.submitted_on);
+      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'
+    ? 'Unable to load survey status'
-      : currentQuarter !== '—'
+    : 'Survey Overview';
-        ? `${currentQuarter} Survey`
-        : 'Survey status unavailable';
 
   const heroSubtitle = loading
     ? 'Fetching the latest reporting information.'
     : error
-      ? error
+    ? error
-      : 'Complete your quarterly industrial production data submission';
+    : 'Complete your quarterly industrial production data submission';
 
   return (
     <section className="max-w-[1280px] mx-auto px-0">
       <div className="p-6">
-      <SurveyCarousel
+        {loading ? (
-        surveys={surveyList}
+          <div className="text-center text-gray-500 text-sm py-10">Loading survey status...</div>
-        autoRotate
+        ) : error ? (
-        rotateInterval={7000}
+          <div className="text-center text-red-600 text-sm py-10">{error}</div>
-        onStartSurvey={handleStartSurvey}
+        ) : (
-      />
+          <SurveyCarousel
-    </div>
+            surveys={surveys}
-
+            autoRotate
+            rotateInterval={7000}
+            onStartSurvey={handleStartSurvey}
+          />
+        )}
+      </div>
     </section>
   );
-};
+};
+
+export default SurveyStatus;