establishment dashboard updated design completed & footer added to both dashboard

ipi-survey-platform/src/components/admin/SubmissionTable.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useMemo } from 'react';
 import Table from '@/components/common/Table';
 import apiClient from '../../services/api/apiClient.js';
 import { CheckCircle2, XCircle, Eye } from 'lucide-react';
-
+import Footer from '../common/Footer.jsx';
 const SubmissionTable = ({ selectedQuarter, selectedYear }) => {
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -144,6 +144,7 @@ const SubmissionTable = ({ selectedQuarter, selectedYear }) => {
   const columnWidths = [240, 120, 100, 100, 130, 150, 180, 150, 150, 180, 120];
 
   return (
+    <>
     <div
       className="border border-[#E5E7EB] bg-white shadow-[0_16px_32px_rgba(15,23,42,0.06)] rounded-[8px]"
       style={{ width: '1250px', minHeight: '780px' }}
@@ -181,6 +182,8 @@ const SubmissionTable = ({ selectedQuarter, selectedYear }) => {
         </button>
       </div>
     </div>
+          <Footer />
+    </>
   );
 };
 

ipi-survey-platform/src/components/common/Footer.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Phone, Smartphone, Headphones, Instagram, Facebook, Linkedin, Youtube } from 'lucide-react';
+
+const Footer = () => {
+  return (
+    <footer className="bg-white border-t border-gray-200 mt-10">
+      <div className="h-[3px] bg-[#92722A]" />
+
+      <div className="max-w-7xl mx-auto px-6 py-10 grid grid-cols-1 md:grid-cols-4 gap-8 text-[#232528]">
+        <div>
+          <h3 className="text-[#92722A] font-semibold mb-2">The Ministry</h3>
+          <ul className="space-y-1 text-sm">
+            <li><a href="#" className="hover:underline">About us</a></li>
+          </ul>
+        </div>
+
+        <div>
+          <h3 className="text-[#92722A] font-semibold mb-2">Using the website</h3>
+          <ul className="space-y-1 text-sm">
+            <li><a href="#" className="hover:underline">Disclaimer</a></li>
+            <li><a href="#" className="hover:underline">Privacy policy</a></li>
+            <li><a href="#" className="hover:underline">Terms and conditions</a></li>
+          </ul>
+        </div>
+
+        <div>
+          <h3 className="text-[#92722A] font-semibold mb-2">Information and support</h3>
+          <ul className="space-y-1 text-sm">
+            <li><a href="#" className="hover:underline">Contact us</a></li>
+            <li><a href="#" className="hover:underline">FAQ’s</a></li>
+            <li><a href="#" className="hover:underline">Feedback and complaints</a></li>
+          </ul>
+        </div>
+
+        <div className="flex flex-col items-start md:items-end gap-2">
+        <img src="/assets/images/TawasolLogo.png" alt="Tawasul" className="h-12 mb-2" />
+
+          <div className="flex items-center gap-2 text-sm">
+            <Phone size={16} className="text-green-600" />
+            <span className="font-semibold">171</span>
+            <Smartphone size={16} className="text-green-600 ml-3" />
+            <span className="font-semibold">04-7771777</span>
+          </div>
+
+          <div className="flex items-center gap-2 text-sm mt-1">
+            <Headphones size={16} className="text-gray-500" />
+            <span className="text-gray-700">Toll free: <span className="font-semibold">800 12</span></span>
+          </div>
+        </div>
+      </div>
+
+      <div className="border-t border-gray-200 my-2" />
+
+      <div className="max-w-7xl mx-auto px-6 py-4 flex flex-col md:flex-row justify-between items-center text-xs text-gray-600">
+        <p>
+          © 2023. Ministry of Human Resources & Emiratisation. All rights reserved.{' '}
+          <span className="text-gray-400">Last updated on 24/04/2023 at 15:45</span>
+        </p>
+        <div className="flex items-center gap-3 mt-3 md:mt-0">
+          <span>Follow us on:</span>
+          <a href="#" className="hover:text-[#92722A]"><Facebook size={16} /></a>
+          <a href="#" className="hover:text-[#92722A]"><Instagram size={16} /></a>
+          <a href="#" className="hover:text-[#92722A]"><Linkedin size={16} /></a>
+          <a href="#" className="hover:text-[#92722A]"><Youtube size={16} /></a>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

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

@@ -1,53 +1,50 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import Table from '@/components/common/Table';
+import Footer from '../common/Footer';
 
 const searchIconSrc = '/assets/images/material-symbols_search-rounded.svg';
-const caretDownSrc = '/assets/images/CaretDown.svg';
+
+const formatDateTime = (value) => {
+  if (!value) return '—';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return '—';
+  const formatted = date.toLocaleString('en-GB', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: true,
+  });
+  return formatted.replace(/\s?(am|pm)$/i, (match) => match.toUpperCase());
+};
 
 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';
   }
-  if (normalized === 'pending' || normalized === 'under review' || normalized === 'in-progress') {
+  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';
   }
-  if (normalized === 'rejected' || normalized === 'returned') {
+  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-gray-100 px-2 py-1 text-xs font-medium text-gray-800';
 };
 
-const formatQuarter = (quarter, year) => {
-  if (!quarter && !year) return '—';
-  return [quarter || '', year || ''].filter(Boolean).join(' ');
-};
-
-const formatDate = (value) => {
-  if (!value) return '—';
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return '—';
-  return date.toLocaleDateString('en-GB');
-};
-
-const statusOptions = [
-  { label: 'All Status', value: 'all' },
-  { label: 'Approved', value: 'approved' },
-  { label: 'Under Review', value: 'under review' },
-  { label: 'Pending', value: 'pending' },
-  { label: 'Returned', value: 'returned' },
-  { label: 'Rejected', value: 'rejected' },
-];
-
-const normalizeStatus = (status) => String(status || '').toLowerCase();
-
 const downloadCsv = (rows) => {
   if (!rows.length) return;
-  const headers = ['Quarter', 'Status', 'Submission Date', 'Products'];
+  const headers = ['Survey Name', 'Year', 'Quarter', 'Status', 'Submission On', 'Products'];
   const csvRows = [headers.join(',')];
   rows.forEach((row) => {
-    csvRows.push(row.slice(0, 4).map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(','));
+    csvRows.push(
+      row
+        .slice(0, 6)
+        .map((cell) => `"${String(cell).replace(/"/g, '""')}"`)
+        .join(',')
+    );
   });
   const blob = new Blob([csvRows.join('\n')], { type: 'text/csv;charset=utf-8;' });
   const url = URL.createObjectURL(blob);
@@ -62,57 +59,72 @@ const downloadCsv = (rows) => {
 
 export const SubmissionHistory = ({ history = [], loading = false, error = '' }) => {
   const [searchTerm, setSearchTerm] = React.useState('');
-  const [statusFilter, setStatusFilter] = React.useState('all');
   const navigate = useNavigate();
 
   const normalizedHistory = React.useMemo(() => {
     if (!Array.isArray(history)) return [];
     return history.map((entry, index) => ({
       id: entry?.id ?? index,
-      quarter: formatQuarter(entry?.quarter, entry?.year),
+      survey_name: '—',
+      year: entry?.year || '—',
+      quarter: entry?.quarter || '—',
       status: entry?.status || 'Pending',
-      date: formatDate(entry?.created_at || entry?.submitted_on),
+      submission_on: formatDateTime(entry?.created_at || entry?.submitted_on),
-      products: entry?.product_count,
+      products: entry?.product_count ?? 0,
     }));
   }, [history]);
 
   const filteredRows = normalizedHistory.filter((entry) => {
     const term = searchTerm.trim().toLowerCase();
-    const matchesSearch =
+    return (
       !term ||
+      entry.year.toString().includes(term) ||
       entry.quarter.toLowerCase().includes(term) ||
-      entry.status.toLowerCase().includes(term) ||
+      entry.status.toLowerCase().includes(term)
-      entry.date.toLowerCase().includes(term);
+    );
-    const matchesStatus =
-      statusFilter === 'all' || normalizeStatus(entry.status) === statusFilter;
-    return matchesSearch && matchesStatus;
-  });
-  const rowsData = filteredRows.map((s) => {
-    const count = Number.isFinite(Number(s.products)) ? Number(s.products) : null;
-    const display = count === null ? '—' : `${count} ${count === 1 ? 'product' : 'products'}`;
-    return [s.quarter, s.status, s.date, display, 'View'];
   });
 
-  const handleViewSubmission = React.useCallback(() => {
+  const navigateToView = (id) => navigate(`/history/${id}`);
-    navigate('/history');
+
-  }, [navigate]);
+  const rowsData = filteredRows.map((item) => {
+    const productCount = Number(item.products) || 0;
+    const productLabel = `${productCount} ${productCount === 1 ? 'product' : 'products'}`;
+
+    return [
+      item.survey_name,
+      item.year,
+      item.quarter,
+      <span className={getStatusClass(item.status)}>{item.status}</span>,
+      <span className="whitespace-nowrap">{item.submission_on}</span>, 
+      productLabel,
+      <button
+        onClick={() => navigateToView(item.id)}
+        className="text-[#9E792B] hover:text-[#7b5f22] font-medium"
+      >
+        View Details
+      </button>,
+    ];
+  });
 
   const toolbar = (
     <div className="px-4 pt-6 pb-2 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
       <div className="flex flex-col gap-1">
-        <h3 className="text-[18px] leading-[28px] font-medium text-[#232528]">Submission History</h3>
+        <h3 className="text-[18px] leading-[28px] font-medium text-[#232528]">
+          Submission History
+        </h3>
         <div className="flex gap-3 text-sm text-gray-500">
           {loading && <span>Loading…</span>}
           {error && <span className="text-red-600">{error}</span>}
         </div>
       </div>
+
       <div className="flex flex-col md:flex-row gap-3 md:items-center">
         <div className="relative w-full md:w-56">
           <input
             type="text"
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            placeholder="Search submissions"
+            placeholder="Search Establishment"
             className="w-full h-10 rounded-md border border-[#E5E7EB] pl-10 pr-3 text-sm focus:outline-none"
           />
           <img
@@ -121,29 +133,16 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
             className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5"
           />
         </div>
-        <div className="relative w-full md:w-40">
+
-          <select
-            value={statusFilter}
-            onChange={(e) => setStatusFilter(e.target.value)}
-            className="h-10 w-full appearance-none rounded-md border border-[#E5E7EB] bg-white pl-3 pr-9 text-sm text-[#232528] focus:outline-none cursor-pointer"
-          >
-            {statusOptions.map((option) => (
-              <option key={option.value} value={option.value}>
-                {option.label}
-              </option>
-            ))}
-          </select>
-          <img
-            src={caretDownSrc}
-            alt="Open"
-            className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4"
-          />
-        </div>
         <button
           type="button"
           onClick={() => downloadCsv(rowsData)}
           disabled={!rowsData.length}
-          className={`inline-flex h-10 items-center gap-2 rounded-md border px-4 text-sm font-medium ${rowsData.length ? 'border-[#92722A] text-[#92722A] hover:bg-[#F2ECCF]' : 'border-gray-200 text-gray-400 cursor-not-allowed'}`}
+          className={`inline-flex h-10 items-center gap-2 rounded-md border px-4 text-sm font-medium ${
+            rowsData.length
+              ? 'border-[#92722A] text-[#92722A] hover:bg-[#F2ECCF]'
+              : 'border-gray-200 text-gray-400 cursor-not-allowed'
+          }`}
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -152,7 +151,12 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
             viewBox="0 0 24 24"
             stroke="currentColor"
           >
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5m0 0l5-5m-5 5V4" />
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5m0 0l5-5m-5 5V4"
+            />
           </svg>
           <span>Export CSV</span>
         </button>
@@ -161,32 +165,28 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
   );
 
   return (
-    <section className="max-w-[1280px] mx-auto px-0">
+    <>
-      <Table
+      <section className="max-w-[1280px] mx-auto px-0">
-        headers={['Quarter', 'Status', 'Submission Date', 'Products', 'Actions']}
+        <Table
-        rows={rowsData}
+          headers={[
-        beforeHeader={toolbar}
+            'Survey Name',
-        separated
+            'Year',
-        rowGapClass="border-spacing-y-2"
+            'Quarter',
-        renderCell={(value, ri, ci) => {
+            'Status',
-          if (ci === 1) {
+            'Submission On',
-            return <span className={getStatusClass(String(value))}>{value}</span>;
+            'Products',
-          }
+            'Actions',
-          if (ci === 4) {
+          ]}
-            const disabled = !normalizedHistory[ri];
+          rows={rowsData}
-            return (
+          beforeHeader={toolbar}
-              <button
+          separated
-                onClick={handleViewSubmission}
+          rowGapClass="border-spacing-y-2"
-                className={`text-amber-700 hover:text-amber-800 ${disabled ? 'cursor-not-allowed opacity-50 hover:text-amber-700' : ''}`}
+        />
-                disabled={disabled}
+      </section>
-              >
+
-                View
+      <Footer />
-              </button>
+    </>
-            );
-          }
-          return value;
-        }}
-      />
-    </section>
   );
 };
+
+export default SubmissionHistory;

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

@@ -0,0 +1,94 @@
+import React, { useState, useEffect } from 'react';
+import { ChevronLeft, ChevronRight, Pause } from 'lucide-react';
+
+const SurveyCarousel = ({
+  surveys = [],
+  autoRotate = true,
+  rotateInterval = 5000,
+  onStartSurvey,
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isPaused, setIsPaused] = useState(false);
+
+  useEffect(() => {
+    if (!autoRotate || isPaused) return;
+    const timer = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % surveys.length);
+    }, rotateInterval);
+    return () => clearInterval(timer);
+  }, [autoRotate, isPaused, rotateInterval, surveys.length]);
+
+  if (!surveys.length) return null;
+  const current = surveys[currentIndex];
+
+  const handlePrev = () =>
+    setCurrentIndex((prev) => (prev === 0 ? surveys.length - 1 : prev - 1));
+
+  const handleNext = () =>
+    setCurrentIndex((prev) => (prev === surveys.length - 1 ? 0 : prev + 1));
+
+  return (
+    <div className="bg-white rounded-lg shadow-sm ring-1 ring-gray-200 mb-8 overflow-hidden">
+      <div className="rounded-none bg-[#F2ECCF] px-6 py-4 min-h-[148px] flex items-center justify-between transition-all duration-500">
+        <div className="flex-1">
+          <h3 className="text-[18px] leading-[28px] font-medium text-[#232528]">
+            {current?.title || '—'}
+          </h3>
+          <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>
+            <span>Est. time: {current?.estTime || '—'}</span>
+            <span>Status: {current?.status || '—'}</span>
+          </div>
+        </div>
+
+        <button
+          onClick={() => onStartSurvey?.(current)}
+          className="inline-flex items-center justify-center w-[196px] h-[52px] px-7 py-3 text-[18px] leading-[28px] font-medium rounded-lg text-white bg-[#92722A] hover:bg-[#7b5c1f] cursor-pointer whitespace-nowrap"
+        >
+          Start Survey Now
+        </button>
+      </div>
+
+      <div className="flex items-center justify-between px-6 py-3 bg-[#F2ECCF]">
+        <div className="flex items-center gap-3">
+         
+          <button
+            onClick={handlePrev}
+            className="p-1 rounded-full hover:bg-gray-100 transition"
+          >
+            <ChevronLeft size={20} className="text-gray-700" />
+          </button>
+          <button
+  onClick={() => setIsPaused(!isPaused)}
+  className="w-6 h-6 flex items-center justify-center rounded-full border border-black bg-transparent hover:bg-gray-100 transition"
+>
+  <Pause size={12} className="text-black" />
+</button>
+          <button
+            onClick={handleNext}
+            className="p-1 rounded-full hover:bg-gray-100 transition"
+          >
+            <ChevronRight size={20} className="text-gray-700" />
+          </button>
+
+          <div className="flex items-center gap-2 ml-2">
+            {surveys.map((_, idx) => (
+              <span
+                key={idx}
+                onClick={() => setCurrentIndex(idx)}
+                className={`h-[8px] w-[8px] rounded-full cursor-pointer transition ${
+                  idx === currentIndex ? 'bg-[#92722A]' : 'bg-gray-300'
+                }`}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SurveyCarousel;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
+import SurveyCarousel from './SurveyCarousel';
 
 const formatQuarterYear = (quarter, year) => {
   if (!quarter || !year) return '—';
@@ -25,18 +26,37 @@ const formatRelativeDays = (value) => {
   if (diffDays === 0) return 'Due today';
   return `${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 = () => {
+  const handleStartSurvey = (survey) => {
-    navigate('/survey', { 
+    console.log('Starting survey:', survey.title);
-      state: { 
-        currentQuarter: data?.current_quarter,
-        currentYear: data?.current_quarter_year
-      } 
-    });
   };
 
+
   const submissionStatus = data?.submission_status || '—';
   const currentQuarter = formatQuarterYear(data?.current_quarter, data?.current_quarter_year);
   const nextDeadlineDate = formatDate(data?.next_deadline);
@@ -60,67 +80,15 @@ export const SurveyStatus = ({ data = null, loading = false, error = '' }) => {
 
   return (
     <section className="max-w-[1280px] mx-auto px-0">
-      <div className="bg-white rounded-lg shadow-sm ring-1 ring-gray-200 mb-8 overflow-hidden">
+      <div className="p-6">
-        <div className="p-0">
+      <SurveyCarousel
-          <div className="rounded-none bg-[#F2ECCF] px-6 py-4 min-h-[148px] flex items-center justify-between">
+        surveys={surveyList}
-            <div className="flex-1">
+        autoRotate
-              <h3 className={`text-[18px] leading-[28px] font-medium ${error ? 'text-red-700' : 'text-[#232528]'}`}>{heroTitle}</h3>
+        rotateInterval={7000}
-              <p className="mt-1 text-[16px] leading-[24px] font-medium text-[#232528]">{heroSubtitle}</p>
+        onStartSurvey={handleStartSurvey}
-              <div className="mt-2 flex items-center gap-6 text-[12px] leading-[16px] font-medium text-[#232528]">
+      />
-                <span>Due: {nextDeadlineDate}</span>
+    </div>
-                <span>{nextDeadlineRelative}</span>
-              </div>
-            </div>
-            <button
-              onClick={handleStartSurvey}
-              className="inline-flex items-center justify-center w-[196px] h-[52px] px-7 py-3 text-[18px] leading-[28px] font-medium rounded-lg text-white bg-[#92722A] hover:bg-[#7b5c1f] cursor-pointer whitespace-nowrap"
-              disabled={loading}
-            >
-              Start Survey Now
-            </button>
-          </div>
-        </div>
-      </div>
 
-      <div className="mb-8">
-        <div className="hidden sm:flex gap-5">
-          <div className="w-[413px] h-[134px] bg-white rounded-[8px] ring-1 ring-gray-200 px-6 py-5">
-            <p className="text-[16px] leading-[24px] font-medium text-[#232528]">Submission Status</p>
-            <p className="mt-2 text-[18px] leading-[28px] font-medium text-[#232528]">{loading ? 'Loading…' : submissionStatus}</p>
-            <p className="mt-2 text-[12px] leading-[16px] font-medium text-[#5F646D]">{currentQuarter !== '—' ? `${currentQuarter} submission required` : 'Awaiting reporting period data.'}</p>
-          </div>
-
-          <div className="w-[413px] h-[134px] bg-white rounded-[8px] ring-1 ring-gray-200 px-6 py-5">
-            <p className="text-[16px] leading-[24px] font-medium text-[#232528]">Next Deadline</p>
-            <p className="mt-2 text-[18px] leading-[28px] font-medium text-[#232528]">{loading ? 'Loading…' : nextDeadlineRelative}</p>
-            <p className="mt-2 text-[12px] leading-[16px] font-medium text-[#5F646D]">{`Due on ${nextDeadlineDate}`}</p>
-          </div>
-
-          <div className="w-[413px] h-[134px] bg-white rounded-[8px] ring-1 ring-gray-200 px-6 py-5">
-            <p className="text-[16px] leading-[24px] font-medium text-[#232528]">Last Submission</p>
-            <p className="mt-2 text-[18px] leading-[28px] font-medium text-[#232528]">{loading ? 'Loading…' : lastSubmissionQuarter}</p>
-            <p className="mt-2 text-[12px] leading-[16px] font-medium text-[#5F646D]">{`Submitted ${lastSubmissionDate}`}</p>
-          </div>
-        </div>
-
-        <div className="sm:hidden space-y-4">
-          <div className="bg-white rounded-[8px] ring-1 ring-gray-200 px-6 py-5">
-            <p className="text-[16px] leading-[24px] font-medium text-[#232528]">Submission Status</p>
-            <p className="mt-2 text-[18px] leading-[28px] font-medium text-[#232528]">{loading ? 'Loading…' : submissionStatus}</p>
-            <p className="mt-2 text-[12px] leading-[16px] font-medium text-[#5F646D]">{currentQuarter !== '—' ? `${currentQuarter} submission required` : 'Awaiting reporting period data.'}</p>
-          </div>
-          <div className="bg-white rounded-[8px] ring-1 ring-gray-200 px-6 py-5">
-            <p className="text-[16px] leading-[24px] font-medium text-[#232528]">Next Deadline</p>
-            <p className="mt-2 text-[18px] leading-[28px] font-medium text-[#232528]">{loading ? 'Loading…' : nextDeadlineRelative}</p>
-            <p className="mt-2 text-[12px] leading-[16px] font-medium text-[#5F646D]">{`Due on ${nextDeadlineDate}`}</p>
-          </div>
-          <div className="bg-white rounded-[8px] ring-1 ring-gray-200 px-6 py-5">
-            <p className="text-[16px] leading-[24px] font-medium text-[#232528]">Last Submission</p>
-            <p className="mt-2 text-[18px] leading-[28px] font-medium text-[#232528]">{loading ? 'Loading…' : lastSubmissionQuarter}</p>
-            <p className="mt-2 text-[12px] leading-[16px] font-medium text-[#5F646D]">{`Submitted ${lastSubmissionDate}`}</p>
-          </div>
-        </div>
-      </div>
     </section>
   );
-};
+};

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

@@ -29,7 +29,18 @@ export const WelcomeSection = ({ data = null, loading = false, error = '' }) =>
 
       <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]">Welcome Back</h2>
+        <h2 className="w-[360px] text-[18px] leading-[28px] font-medium text-[#232528]">
+  Welcome{' '}
+  {(() => {
+    try {
+      const userProfile = JSON.parse(sessionStorage.getItem('user_profile'));
+      return userProfile?.name ? userProfile.name : '';
+    } catch (error) {
+      console.error('Error reading user_profile from sessionStorage:', error);
+      return '';
+    }
+  })()} !
+</h2>
           <p className={`w-[360px] text-[14px] leading-[24px] font-normal ${error ? 'text-red-600' : 'text-[#5F646D]'}`}>{description}</p>
         </div>
       </div>

ipi-survey-platform/src/components/layout/HeaderBar.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { NavLink, useNavigate } from 'react-router-dom';
-
+import { FileSearch } from 'lucide-react';
 const logoSrc = '/assets/images/FCSCLogo.svg';
 const surveyIconActiveSrc = '/assets/images/Vector.svg';
 const surveyIconInactiveSrc = '/assets/images/Vectorblack.svg';
@@ -88,6 +88,29 @@ const HeaderBar = () => {
                 </>
               )}
             </NavLink>
+
+<NavLink
+  to="/survey"
+  className={({ isActive }) =>
+    `inline-flex items-center gap-2 pb-1 border-b-2 ${
+      isActive
+        ? 'text-[#92722A] font-medium border-[#92722A]'
+        : 'text-[#232528] hover:text-gray-900 border-transparent'
+    }`
+  }
+>
+  {({ isActive }) => (
+    <>
+      <FileSearch
+        className={`h-[18px] w-[18px] ${
+          isActive ? 'text-[#92722A]' : 'text-[#232528]'
+        }`}
+      />
+      <span>Overview</span>
+    </>
+  )}
+</NavLink>
+
             <NavLink
               to="/history"
               className={({ isActive }) => `inline-flex items-center gap-2 pb-1 border-b-2 ${isActive ? 'text-[#92722A] font-medium border-[#92722A]' : 'text-[#232528] hover:text-gray-900 border-transparent'}`}