Merge branch 'master' of https://bitbucket.org/jubilian/fcsc_ipi_frontend

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

@@ -24,16 +24,20 @@ const formatDateTime = (value) => {
 
 const getStatusClass = (status) => {
   const normalized = String(status || '').toLowerCase();
+
   if (normalized === 'approved') {
-    return 'inline-flex items-center rounded-md bg-green-100 px-2 py-1 text-xs font-medium text-green-800';
+    return 'inline-flex items-center rounded-md bg-[#F5FAF6] px-2 py-1 text-xs font-medium text-[#2F663C]';
   }
+
   if (['pending', 'under review', 'in-progress'].includes(normalized)) {
-    return 'inline-flex items-center rounded-md bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-800';
+    return 'inline-flex items-center rounded-md bg-[#FFFDF3] px-2 py-1 text-xs font-medium text-[#7C5E24]';
   }
+
   if (['rejected', 'returned'].includes(normalized)) {
-    return 'inline-flex items-center rounded-md bg-red-100 px-2 py-1 text-xs font-medium text-red-800';
+    return 'inline-flex items-center rounded-md bg-[#FEF6F6] px-2 py-1 text-xs font-medium text-[#B52520]';
   }
-  return 'inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs font-medium text-gray-800';
+
+  return 'inline-flex items-center rounded-md bg-[#F8FAFC] px-2 py-1 text-xs font-medium text-[#374151]';
 };
 
 const downloadCsv = (rows) => {
@@ -99,7 +103,22 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
       item.survey_name,
       item.year,
       item.quarter,
-      <span className={getStatusClass(item.status)}>{item.status}</span>,
+  
+      (() => {
+        const normalized = String(item.status || '').toLowerCase();
+        let displayStatus = '—';
+  
+        if (normalized === 'pending') displayStatus = 'Under Review';
+        else if (normalized === 'rejected') displayStatus = 'Returned';
+        else if (['submitted', 'approved'].includes(normalized)) displayStatus = 'Approved';
+  
+        return (
+          <span className={getStatusClass(displayStatus)}>
+            {displayStatus}
+          </span>
+        );
+      })(),
+  
       <span className="whitespace-nowrap">{item.submission_on}</span>,
       productLabel,
       <button
@@ -186,24 +205,49 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
   return (
     <>
   <section className="max-w-[1280px] mx-auto px-0">
-        <Table
+  <div className="overflow-x-auto rounded-lg border border-[#D9D9DC] shadow-sm bg-white">
-          headers={[
+    <table className="min-w-full border-collapse text-sm text-[#232528]">
+      <thead>
+        <tr className="bg-[#F2ECCF] text-left text-[13px] font-semibold text-[#232528]">
+          {[
             'Survey Name',
             'Year',
             'Quarter',
             'Status',
-            'Submission On',
+            'Submission on',
             'Products',
             'Actions',
-          ]}
+          ].map((header, index) => (
-          rows={rowsData}
+            <th
-          beforeHeader={toolbar}
+              key={index}
-          separated
+              className="px-4 py-3 border-b border-[#D9D9DC] whitespace-nowrap"
-          rowGapClass="border-spacing-y-2"
+            >
-          columnWidths={[300, 100, 100, 120, 180, 120, 120]}
+              {header}
-        />
+            </th>
-      </section>
+          ))}
+        </tr>
+      </thead>
 
+      <tbody className="divide-y divide-[#D9D9DC] text-[13px] leading-[20px]">
+        {rowsData.map((row, rowIndex) => (
+          <tr
+            key={rowIndex}
+            className="hover:bg-[#FAFAFA] transition-colors duration-150"
+          >
+            {row.map((cell, cellIndex) => (
+              <td
+                key={cellIndex}
+                className="px-4 py-3 align-middle whitespace-nowrap border-b border-[#D9D9DC]"
+              >
+                {cell}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+</section>
       <Footer />
     </>
   );

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { ChevronLeft, ChevronRight, Pause } from 'lucide-react';
-
+import { CalendarDays, Clock3 } from 'lucide-react';
 const SurveyCarousel = ({
   surveys = [],
   autoRotate = true,
@@ -39,11 +39,25 @@ const SurveyCarousel = ({
           <p className="mt-1 text-[16px] leading-[24px] font-medium text-[#232528]">
             {current?.subtitle || ''}
           </p>
-          <div className="mt-2 flex items-center gap-6 text-[12px] leading-[16px] font-medium text-[#232528]">
+
-            <span>Due Date: {current?.dueDate || '—'}</span>
+<div className="mt-2 flex items-center gap-6 text-[12px] leading-[16px] font-medium text-[#232528]">
-            <span>Est. time: {current?.estTime || '—'}</span>
+  <span className="flex items-center gap-1">
-            <span>Status: {current?.status || '—'}</span>
+    <CalendarDays size={14} className="text-[#92722A]" />
-          </div>
+    <span className="font-semibold">Due Date:</span>&nbsp;
+    {current?.dueDate || '—'}
+  </span>
+
+  <span className="flex items-center gap-1">
+    <Clock3 size={14} className="text-[#92722A]" />
+    <span className="font-semibold">Est. time:</span>&nbsp;
+    {current?.estTime || '—'}
+  </span>
+
+  <span>
+    <span className="font-semibold">Status:</span>&nbsp;
+    {current?.status || '—'}
+  </span>
+</div>
         </div>
 
         <button

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

@@ -46,7 +46,7 @@ export const SurveyStatus = ({ data = null, loading = false, error = '' }) => {
   const surveys = [
     {
       title: `${formatQuarterYear(surveyData.previous_quarter, surveyData.previous_quarter_year)} Survey Ready`,
-      subtitle: 'Complete your quarterly industrial production data submission',
+      subtitle: 'Complete your quarterly Industrial Production Index (IPI) data submission',
       dueDate: formattedDueDate,
       relativeDue,
       estTime: '15–20 minutes',

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

@@ -11,7 +11,6 @@ const formatDate = (value) => {
 export const WelcomeSection = ({ data = null, loading = false, error = '' }) => {
   const currentQuarter = data?.current_quarter;
   const currentYear = data?.current_quarter_year;
-  const deadline = data?.next_deadline;
 
   let description = 'Current reporting information unavailable.';
   if (loading) {
@@ -19,14 +18,12 @@ export const WelcomeSection = ({ data = null, loading = false, error = '' }) =>
   } else if (error) {
     description = error;
   } else if (currentQuarter && currentYear) {
-    const formattedDeadline = formatDate(deadline);
+    description = `Current reporting period: ${currentQuarter} ${currentYear}`;
-    description = `Current reporting period: ${currentQuarter} ${currentYear}${formattedDeadline !== '—' ? ` (Due: ${formattedDeadline})` : ''}`;
   }
 
   return (
     <div className="min-h-[4rem] bg-gray-50">
       <HeaderBar />
-
       <div className="max-w-[1280px] mx-auto px-4 pt-4 pb-2">
         <div className="space-y-1">
           <h2 className="w-[360px] text-[18px] leading-[28px] font-medium text-[#232528]">
@@ -39,9 +36,15 @@ export const WelcomeSection = ({ data = null, loading = false, error = '' }) =>
                 console.error('Error reading user_profile from sessionStorage:', error);
                 return '';
               }
-  })()} !
+            })()}!
-</h2>
+          </h2>
-          <p className={`w-[360px] text-[14px] leading-[24px] font-normal ${error ? 'text-red-600' : 'text-[#5F646D]'}`}>{description}</p>
+          <p
+            className={`w-[360px] text-[14px] leading-[24px] font-normal ${
+              error ? 'text-red-600' : 'text-[#5F646D]'
+            }`}
+          >
+            {description}
+          </p>
         </div>
       </div>
     </div>