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 row = [
-    const year = item.year || '—';
+      item.survey_name || '—',
-    const quarter = item.quarter || '—';
+      item.year || '—',
-    
+      item.quarter || '—',
-    const normalized = String(item.status || '').toLowerCase();
+      item.status || '—',
-    let status = '—';
+      item.submission_on || '—',
-    if (normalized === 'pending') status = 'Under Review';
+      item.products || '—',
-    else if (normalized === 'rejected') status = 'Returned';
+    ];
-    else if (['submitted', 'approved'].includes(normalized)) status = 'Approved';
+    csvRows.push(row.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(','));
-    
-    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 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) => {
+  const tableHeaders = [
-    setSelectedSubmission(rowData);
+    'Survey Name',
-  };
+    'Year',
-
+    'Quarter',
-  const rowsData = filteredRows.map((item) => {
+    'Status',
-    const productCount = Number(item.products) || 0;
+    'Submission On',
-    const productLabel = `${productCount} ${productCount === 1 ? 'product' : 'products'}`;
+    'Products',
+    'Actions',
+  ];
 
+  const tableRows = filtered.map((item) => {
+    const productsLabel = `${item.products} ${item.products === 1 ? 'product' : 'products'}`;
     return [
       item.survey_name,
       item.year,
       item.quarter,
-  
+      getStatusBadge(item.status),
-      (() => {
-        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,
+      productsLabel,
       <button
-        onClick={() => handleViewDetails(item)}
+        onClick={() => setSelectedSubmission(item)}
         className="text-[#9E792B] hover:text-[#7b5f22] font-medium"
       >
         View Details
@@ -144,58 +138,6 @@ 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]">
-        Submission History
-      </h3>
-
-      <div className="flex items-center gap-3">
-        <div className="relative w-56">
-          <input
-            type="text"
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            placeholder="Search Establishment"
-            className="w-full h-10 rounded-md border border-[#E5E7EB] pl-10 pr-3 text-sm focus:outline-none focus:ring-1 focus:ring-[#92722A]"
-          />
-          <img
-            src={searchIconSrc}
-            alt="Search"
-            className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5"
-          />
-        </div>
-
-        <button
-  type="button"
-  onClick={() => downloadCsv(filteredRows)}  
-  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'
-  }`}
->
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="h-4 w-4"
-            fill="none"
-            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"
-            />
-          </svg>
-          <span>Export CSV</span>
-        </button>
-      </div>
-    </div>
-  );
-
   if (selectedSubmission) {
     return (
       <div className="min-h-screen bg-[#F8FAFC]">
@@ -212,59 +154,84 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
 
   return (
     <>
-      <section className="max-w-[1280px] mx-auto px-0">
+    <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="overflow-x-auto border border-[#D9D9DC] shadow-sm bg-white">
+        <div className="flex items-center justify-between px-6 pt-6 pb-4">
-          {toolbar}
+          <h2 className="text-[18px] leading-[28px] font-medium text-[#232528]">
-          <table className="min-w-full border-collapse text-sm text-[#232528]">
+            Submission History
-            <thead>
+          </h2>
-              <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]">
+          <div className="flex items-center gap-3">
-              {rowsData.length === 0 ? (
+            <div className="relative w-56">
-                <tr>
+              <input
-                  <td colSpan="7" className="px-4 py-8 text-center text-gray-500">
+                type="text"
-                    {loading ? 'Loading...' : error ? error : 'No submissions found'}
+                value={searchTerm}
-                  </td>
+                onChange={(e) => setSearchTerm(e.target.value)}
-                </tr>
+                placeholder="Search Establishment"
-              ) : (
+                className="w-full h-10 rounded-md border border-[#E5E7EB] pl-10 pr-3 text-sm focus:outline-none focus:ring-1 focus:ring-[#92722A]"
-                rowsData.map((row, rowIndex) => (
+              />
-                  <tr
+              <img
-                    key={rowIndex}
+                src={searchIconSrc}
-                    className="hover:bg-[#FAFAFA] transition-colors duration-150"
+                alt="Search"
-                  >
+                className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5"
-                    {row.map((cell, cellIndex) => (
+              />
-                      <td
+            </div>
-                        key={cellIndex}
+
-                        className="px-4 py-3 align-middle whitespace-nowrap border-b border-[#D9D9DC]"
+            <button
-                      >
+              type="button"
-                        {cell}
+              onClick={() => downloadCsv(filtered)}
-                      </td>
+              disabled={!filtered.length}
-                    ))}
+              className={`inline-flex h-10 items-center gap-2 rounded-md border px-4 text-sm font-medium ${
-                  </tr>
+                filtered.length
-                ))
+                  ? 'border-[#92722A] text-[#92722A] hover:bg-[#F2ECCF]'
-              )}
+                  : 'border-gray-200 text-gray-400 cursor-not-allowed'
-            </tbody>
+              }`}
-          </table>
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-4 w-4"
+                fill="none"
+                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"
+                />
+              </svg>
+              <span>Export CSV</span>
+            </button>
+          </div>
         </div>
-      </section>
+
+        <div className="overflow-x-auto">
+          {loading ? (
+            <div className="flex items-center justify-center h-[500px] text-gray-500">
+              Loading submissions...
+            </div>
+          ) : (
+<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>
+            </div>
+          )}
+        </div>
+      </div>
+
       <Footer />
     </>
   );