pagination added for establishment dashboard table

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

@@ -22,48 +22,50 @@ const formatDateTime = (value) => {
   return formatted.replace(/\s?(am|pm)$/i, (match) => match.toUpperCase());
 };
 
-const getStatusClass = (status) => {
+const getStatusBadge = (status) => {
   const normalized = String(status || '').toLowerCase();
-
   if (normalized === 'approved') {
-    return 'inline-flex items-center rounded-md bg-[#F5FAF6] px-2 py-1 text-xs font-medium text-[#2F663C]';
+    return (
+      <span className="px-3 py-1 rounded-md text-green-700 bg-green-50 font-medium text-sm whitespace-nowrap">
+        Approved
+      </span>
+    );
+  } else if (['pending', 'under review', 'in-progress'].includes(normalized)) {
+    return (
+      <span className="px-3 py-1 rounded-md text-blue-600 bg-blue-50 font-medium text-sm whitespace-nowrap">
+        Under Review
+      </span>
+    );
+  } else if (['rejected', 'returned'].includes(normalized)) {
+    return (
+      <span className="px-3 py-1 rounded-md text-red-600 bg-red-50 font-medium text-sm whitespace-nowrap">
+        Returned
+      </span>
+    );
+  } else {
+    return (
+      <span className="px-3 py-1 rounded-md text-gray-600 bg-gray-50 font-medium text-sm whitespace-nowrap">
+        {status || '—'}
+      </span>
+    );
   }
-
-  if (['pending', 'under review', 'in-progress'].includes(normalized)) {
-    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-[#FEF6F6] px-2 py-1 text-xs font-medium text-[#B52520]';
-  }
-
-  return 'inline-flex items-center rounded-md bg-[#F8FAFC] px-2 py-1 text-xs font-medium text-[#374151]';
 };
 
 const downloadCsv = (data) => {
   if (!data.length) return;
-  
   const headers = ['Survey Name', 'Year', 'Quarter', 'Status', 'Submission On', 'Products'];
   const csvRows = [headers.join(',')];
 
   data.forEach((item) => {
-    const surveyName = item.survey_name || '—';
-    const year = item.year || '—';
-    const quarter = item.quarter || '—';
-    
-    const normalized = String(item.status || '').toLowerCase();
-    let status = '—';
-    if (normalized === 'pending') status = 'Under Review';
-    else if (normalized === 'rejected') status = 'Returned';
-    else if (['submitted', 'approved'].includes(normalized)) status = 'Approved';
-    
-    const submissionOn = item.submission_on || '—';
-    
-    const productCount = Number(item.products) || 0;
-    const products = `${productCount} ${productCount === 1 ? 'product' : 'products'}`;
-    
-    const row = [surveyName, year, quarter, status, submissionOn, products];
-    csvRows.push(row.map(cell => `"${String(cell).replace(/"/g, '""')}"`).join(','));
+    const row = [
+      item.survey_name || '—',
+      item.year || '—',
+      item.quarter || '—',
+      item.status || '—',
+      item.submission_on || '—',
+      item.products || '—',
+    ];
+    csvRows.push(row.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(','));
   });
 
   const blob = new Blob([csvRows.join('\n')], { type: 'text/csv;charset=utf-8;' });
@@ -80,6 +82,8 @@ const downloadCsv = (data) => {
 export const SubmissionHistory = ({ history = [], loading = false, error = '' }) => {
   const [searchTerm, setSearchTerm] = React.useState('');
   const [selectedSubmission, setSelectedSubmission] = React.useState(null);
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const pageSize = 10;
   const navigate = useNavigate();
 
   const normalizedHistory = React.useMemo(() => {
@@ -95,48 +99,38 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
     }));
   }, [history]);
 
-  const filteredRows = normalizedHistory.filter((entry) => {
+  const filtered = normalizedHistory.filter((entry) => {
     const term = searchTerm.trim().toLowerCase();
     return (
       !term ||
+      entry.survey_name.toLowerCase().includes(term) ||
       entry.year.toString().includes(term) ||
       entry.quarter.toLowerCase().includes(term) ||
       entry.status.toLowerCase().includes(term)
     );
   });
 
-  const handleViewDetails = (rowData) => {
-    setSelectedSubmission(rowData);
-  };
-
-  const rowsData = filteredRows.map((item) => {
-    const productCount = Number(item.products) || 0;
-    const productLabel = `${productCount} ${productCount === 1 ? 'product' : 'products'}`;
+  const tableHeaders = [
+    'Survey Name',
+    'Year',
+    'Quarter',
+    'Status',
+    'Submission On',
+    'Products',
+    'Actions',
+  ];
 
+  const tableRows = filtered.map((item) => {
+    const productsLabel = `${item.products} ${item.products === 1 ? 'product' : 'products'}`;
     return [
       item.survey_name,
       item.year,
       item.quarter,
-  
-      (() => {
-        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>
-        );
-      })(),
-  
+      getStatusBadge(item.status),
       <span className="whitespace-nowrap">{item.submission_on}</span>,
-      productLabel,
+      productsLabel,
       <button
-        onClick={() => handleViewDetails(item)}
+        onClick={() => setSelectedSubmission(item)}
         className="text-[#9E792B] hover:text-[#7b5f22] font-medium"
       >
         View Details
@@ -144,11 +138,27 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
     ];
   });
 
-  const toolbar = (
-    <div className="px-6 py-4 flex items-center justify-between border-b border-[#D9D9DC] bg-white">
-      <h3 className="text-[16px] font-medium text-[#232528]">
+  if (selectedSubmission) {
+    return (
+      <div className="min-h-screen bg-[#F8FAFC]">
+        <HeaderBar />
+        <main className="max-w-[1280px] mx-auto px-4 py-6">
+          <DetailedOverview
+            submission={selectedSubmission}
+            onBack={() => setSelectedSubmission(null)}
+          />
+        </main>
+      </div>
+    );
+  }
+
+  return (
+    <>
+    <div className="max-w-[1280px] mx-auto bg-white border border-[#E5E7EB] shadow-[0_16px_32px_rgba(15,23,42,0.06)] rounded-[8px] mt-8 w-full overflow-hidden">
+        <div className="flex items-center justify-between px-6 pt-6 pb-4">
+          <h2 className="text-[18px] leading-[28px] font-medium text-[#232528]">
             Submission History
-      </h3>
+          </h2>
 
           <div className="flex items-center gap-3">
             <div className="relative w-56">
@@ -168,10 +178,10 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
 
             <button
               type="button"
-  onClick={() => downloadCsv(filteredRows)}  
-  disabled={!rowsData.length}
+              onClick={() => downloadCsv(filtered)}
+              disabled={!filtered.length}
               className={`inline-flex h-10 items-center gap-2 rounded-md border px-4 text-sm font-medium ${
-    rowsData.length
+                filtered.length
                   ? 'border-[#92722A] text-[#92722A] hover:bg-[#F2ECCF]'
                   : 'border-gray-200 text-gray-400 cursor-not-allowed'
               }`}
@@ -194,77 +204,34 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
             </button>
           </div>
         </div>
-  );
 
-  if (selectedSubmission) {
-    return (
-      <div className="min-h-screen bg-[#F8FAFC]">
-        <HeaderBar />
-        <main className="max-w-[1280px] mx-auto px-4 py-6">
-          <DetailedOverview
-            submission={selectedSubmission}
-            onBack={() => setSelectedSubmission(null)}
-          />
-        </main>
+        <div className="overflow-x-auto">
+          {loading ? (
+            <div className="flex items-center justify-center h-[500px] text-gray-500">
+              Loading submissions...
             </div>
-    );
-  }
-
-  return (
-    <>
-      <section className="max-w-[1280px] mx-auto px-0">
-        <div className="overflow-x-auto border border-[#D9D9DC] shadow-sm bg-white">
-          {toolbar}
-          <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',
-                  'Products',
-                  'Actions',
-                ].map((header, index) => (
-                  <th
-                    key={index}
-                    className="px-4 py-3 border-b border-[#D9D9DC] whitespace-nowrap"
-                  >
-                    {header}
-                  </th>
-                ))}
-              </tr>
-            </thead>
-
-            <tbody className="divide-y divide-[#D9D9DC] text-[13px] leading-[20px]">
-              {rowsData.length === 0 ? (
-                <tr>
-                  <td colSpan="7" className="px-4 py-8 text-center text-gray-500">
-                    {loading ? 'Loading...' : error ? error : 'No submissions found'}
-                  </td>
-                </tr>
           ) : (
-                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 className="overflow-x-auto">
+<div className="min-w-[1200px]">              
+  <Table
+                headers={tableHeaders}
+                rows={tableRows}
+                separated
+                rowGapClass="border-spacing-y-1"
+                pagination={{
+                  currentPage,
+                  onPageChange: setCurrentPage,
+                  pageSize,
+                  totalItems: filtered.length,
+                }}
+                columnWidths={[250, 100, 100, 160, 180, 150, 120]}
+              />
               </div>
-      </section>
+            </div>
+          )}
+        </div>
+      </div>
+
       <Footer />
     </>
   );