From b13016df2adc218cd87d77264d789eeeac7f1009 Mon Sep 17 00:00:00 2001
From: Senthamilselvi <senthamilselvi.s@cardyai.com>
Date: Wed, 5 Nov 2025 17:10:59 +0530
Subject: [PATCH 1/2] view submission products new design completed

---
 .../src/pages/Admin/ValidationReview.jsx      | 229 ++++++++++++------
 1 file changed, 150 insertions(+), 79 deletions(-)

diff --git a/ipi-survey-platform/src/pages/Admin/ValidationReview.jsx b/ipi-survey-platform/src/pages/Admin/ValidationReview.jsx
index 9a959c3..4d55036 100644
--- a/ipi-survey-platform/src/pages/Admin/ValidationReview.jsx
+++ b/ipi-survey-platform/src/pages/Admin/ValidationReview.jsx
@@ -374,87 +374,158 @@ const ValidationReview = () => {
         </section>
 
         {productDetails.length > 0 ? (
-          <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-            {productDetails.map((product, idx) => (
-              <section key={product.code + idx} className="rounded-[16px] bg-white p-6 shadow-[0_16px_32px_rgba(15,23,42,0.08)] ring-1 ring-[#E5E7EB] space-y-4">
-                <div className="flex flex-wrap items-center justify-between w-full">
-                  <div className="text-sm font-semibold text-[#232528]">
-                    Product: <span className="font-normal">{product.code} - {product.name}</span>
-                  </div>
-
-                  <div className="flex flex-wrap items-center gap-2">
-                    <div className="flex items-center gap-1 border border-[#D0D5DD] rounded-md px-2 py-[2px] text-xs text-[#344054]">
-                      <span className="text-[#475467] font-medium">Submitted By:</span>
-                      <span className="font-semibold text-[#232528]">{product.submittedBy}</span>
-                    </div>
-                    <div className="flex items-center gap-1 border border-[#D0D5DD] rounded-md px-2 py-[2px] text-xs text-[#344054]">
-                      <span className="text-[#475467] font-medium">Unit:</span>
-                      <span className="font-semibold text-[#232528]">{product.unit}</span>
-                    </div>
-                    <div className="flex items-center gap-1 border border-[#D0D5DD] rounded-md px-2 py-[2px] text-xs text-[#344054]">
-                      <span className="text-[#475467] font-medium">Capacity:</span>
-                      <span className="font-semibold text-[#232528]">{product.capacity}</span>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="overflow-hidden rounded-[12px] border border-[#E5E7EB]">
-                  <table className="w-full table-fixed text-sm">
-                    <thead>
-                      <tr>
-                        <th className="w-[160px] bg-[#F2ECCF] px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-[#92722A]">Description</th>
-                        {product.quarters.map((quarter) => (
-                          <th
-                            key={quarter.label}
-                            className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-white"
-                            style={{ backgroundColor: quarter.color }}
-                          >
-                            {quarter.label}
-                          </th>
-                        ))}
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {product.rows.map((row) => (
-                        <tr key={row.label} className="border-t border-[#E5E7EB]">
-                          <td className="bg-[#FFFCF2] px-4 py-3 font-medium text-[#232528]">{row.label}</td>
-                          {row.values.map((value, index) => (
-                            <td
-                              key={`${row.label}-${product.quarters[index].label}`}
-                              className="px-4 py-3 text-[#232528]"
-                              style={{ backgroundColor: product.quarters[index].cellColor }}
-                            >
-                              {value}
-                            </td>
-                          ))}
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-
-                <div className="space-y-3">
-                  <div className="text-sm text-[#4B5563]">
-                    <span className="font-semibold text-[#232528]">Remarks:</span> {product.remarks}
-                  </div>
-                  <div className="flex flex-col gap-2">
-                    <span className="text-sm font-semibold text-[#232528]">Admin Remarks</span>
-                    <textarea
-                      rows={3}
-                      className="w-full rounded-[10px] border border-[#D1D5DB] bg-[#FFFCF2] px-4 py-2 text-sm text-[#232528] placeholder:text-[#9CA3AF] focus:outline-none focus:ring-2 focus:ring-[#92722A]"
-                      placeholder="Add short note..."
-                      defaultValue=""
-                    />
-                  </div>
-                </div>
-              </section>
-            ))}
+  <div
+    className={`grid gap-4 ${
+      productDetails.length === 1
+        ? 'grid-cols-1'
+        : 'grid-cols-1 lg:grid-cols-2'
+    }`}
+  >
+    {productDetails.map((product, idx) => (
+      <section
+        key={product.code + idx}
+        className="rounded-[16px] bg-white p-6 shadow-[0_16px_32px_rgba(15,23,42,0.08)] ring-1 ring-[#E5E7EB] space-y-5"
+      >
+        <div className="flex flex-wrap items-center justify-between">
+          <div className="text-sm font-semibold text-[#232528]">
+            Product: <span className="font-normal">{product.code} - {product.name}</span>
           </div>
-        ) : (
-          <div className="rounded-lg bg-amber-50 border border-amber-200 p-6 text-center">
-            <p className="text-amber-800">No products found for this submission.</p>
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="px-2 py-[2px] border border-[#D0D5DD] rounded-md text-xs">
+              Submitted By: <strong>{product.submittedBy}</strong>
+            </span>
+            <span className="px-2 py-[2px] border border-[#D0D5DD] rounded-md text-xs">
+              Unit: <strong>{product.unit}</strong>
+            </span>
+            <span className="px-2 py-[2px] border border-[#D0D5DD] rounded-md text-xs">
+              Capacity: <strong>{product.capacity}</strong>
+            </span>
           </div>
-        )}
+        </div>
+
+        <div className="overflow-x-auto rounded-[12px] border border-[#E5E7EB]">
+  <table className="min-w-full text-sm text-left border-collapse">
+    <thead>
+      <tr>
+        <th
+          rowSpan="2"
+          className="bg-[#F2ECCF] text-[#92722A] px-4 py-3 text-xs font-semibold uppercase align-middle border-r border-[#E5E7EB]"
+        >
+          Metric
+        </th>
+        <th colSpan="3" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center">
+          Q4-2024 (Previous Quarter)
+        </th>
+        <th colSpan="3" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center">
+          Q1-2025 (Current Quarter)
+        </th>
+        <th colSpan="3" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center">
+          Q2-2025 (Next Quarter)
+        </th>
+      </tr>
+
+      <tr>
+        <th className="bg-[#F4F8FF] px-4 py-2 font-medium text-[#286CFF]">Oct</th>
+        <th className="bg-[#F4F8FF] px-4 py-2 font-medium text-[#286CFF]">Nov</th>
+        <th className="bg-[#F4F8FF] px-4 py-2 font-medium text-[#286CFF]">Dec</th>
+
+        <th className="bg-[#F3FAF4] px-4 py-2 font-medium text-[#2F663C]">Jan</th>
+        <th className="bg-[#F3FAF4] px-4 py-2 font-medium text-[#2F663C]">Feb</th>
+        <th className="bg-[#F3FAF4] px-4 py-2 font-medium text-[#2F663C]">Mar</th>
+
+        <th className="bg-[#FFF6EC] px-4 py-2 font-medium text-[#F29F0E]">Apr</th>
+        <th className="bg-[#FFF6EC] px-4 py-2 font-medium text-[#F29F0E]">May</th>
+        <th className="bg-[#FFF6EC] px-4 py-2 font-medium text-[#F29F0E]">Jun</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr className="border-t border-[#E5E7EB]">
+        <td className="bg-[#FFFCF2] px-4 py-3 font-medium text-[#232528]">
+          Quantity (liters)
+        </td>
+        <td className="px-4 py-3 text-[#232528]">1200</td>
+        <td className="px-4 py-3 text-red-600">1180 ▼</td>
+        <td className="px-4 py-3 text-green-600">1250 ▲</td>
+
+        <td className="px-4 py-3 text-[#232528]">1280</td>
+        <td className="px-4 py-3 text-[#232528]">1340</td>
+        <td className="px-4 py-3 text-[#232528]">1375</td>
+
+        <td className="px-4 py-3 text-[#232528]">1400</td>
+        <td className="px-4 py-3 text-[#232528]">1450</td>
+        <td className="px-4 py-3 text-[#232528]">1500</td>
+      </tr>
+
+      <tr className="border-t border-[#E5E7EB]">
+        <td className="bg-[#FFFCF2] px-4 py-3 font-medium text-[#232528]">
+          Cost (AED)
+        </td>
+        <td className="px-4 py-3 text-[#232528]">39,000</td>
+        <td className="px-4 py-3 text-red-600">37,500 ▼</td>
+        <td className="px-4 py-3 text-green-600">41,000 ▲</td>
+
+        <td className="px-4 py-3 text-[#232528]">40,000</td>
+        <td className="px-4 py-3 text-[#232528]">42,000</td>
+        <td className="px-4 py-3 text-[#232528]">43,500</td>
+
+        <td className="px-4 py-3 text-[#232528]">44,000</td>
+        <td className="px-4 py-3 text-[#232528]">45,000</td>
+        <td className="px-4 py-3 text-[#232528]">46,000</td>
+      </tr>
+
+      <tr className="border-t border-[#E5E7EB]">
+        <td className="bg-[#FFFCF2] px-4 py-3 font-medium text-[#232528]">
+          Reason (Current)
+        </td>
+        <td colSpan="3" className="px-4 py-3 text-center text-[#6B7280]">--</td>
+        <td colSpan="3" className="px-4 py-3 text-center bg-[#E9F6EC] text-[#1E7C34] font-medium rounded-md">
+          Seasonal Increase
+        </td>
+        <td colSpan="3" className="px-4 py-3 text-center text-[#6B7280]">--</td>
+      </tr>
+
+      <tr className="border-t border-[#E5E7EB]">
+        <td className="bg-[#FFFCF2] px-4 py-3 font-medium text-[#232528]">
+          Reason (Forecast)
+        </td>
+        <td colSpan="3" className="px-4 py-3 text-center text-[#6B7280]">--</td>
+        <td colSpan="3" className="px-4 py-3 text-center text-[#6B7280]">--</td>
+        <td colSpan="3" className="px-4 py-3 text-center bg-[#FFF2E0] text-[#D97706] font-medium rounded-md">
+          Projected demand
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+
+        <div className="text-xs text-[#4B5563] mt-2">
+  <p>
+    <span className="text-[#16A34A] font-semibold">Green ▲</span> indicates upward trend;{' '}
+    <span className="text-[#DC2626] font-semibold">Red ▼</span> indicates downward trend compared to previous month or quarter
+  </p>
+  <p className="mt-3 text-sm text-[#4B5563]">
+  <strong className="font-semibold text-[#232528]">Remarks:</strong> NA
+</p>
+</div>
+
+        <div className="mt-3">
+          <label className="block text-sm font-semibold mb-1 text-[#232528]">Admin Remarks</label>
+          <textarea
+            rows="2"
+            className="w-full rounded-[10px] border border-[#D1D5DB] bg-[#FFFCF2] px-4 py-2 text-sm text-[#232528] focus:ring-2 focus:ring-[#92722A] focus:outline-none"
+            placeholder="Add short note..."
+          ></textarea>
+        </div>
+      </section>
+    ))}
+  </div>
+) : (
+  <div className="rounded-lg bg-amber-50 border border-amber-200 p-6 text-center">
+    <p className="text-amber-800">No products found for this submission.</p>
+  </div>
+)}
 
         <section className="rounded-[16px] bg-white p-6 shadow-[0_16px_32px_rgba(15,23,42,0.08)] ring-1 ring-[#E5E7EB]">
           <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">

From b444718d8b21fc9e0b15959d2c3f620f9c74457f Mon Sep 17 00:00:00 2001
From: Senthamilselvi <senthamilselvi.s@cardyai.com>
Date: Wed, 5 Nov 2025 18:17:13 +0530
Subject: [PATCH 2/2] establishment dashboard bug solved

---
 .../dashboard/SubmissionHistory.jsx           | 165 ++++++++++--------
 1 file changed, 91 insertions(+), 74 deletions(-)

diff --git a/ipi-survey-platform/src/components/dashboard/SubmissionHistory.jsx b/ipi-survey-platform/src/components/dashboard/SubmissionHistory.jsx
index a4c3486..cabf24a 100644
--- a/ipi-survey-platform/src/components/dashboard/SubmissionHistory.jsx
+++ b/ipi-survey-platform/src/components/dashboard/SubmissionHistory.jsx
@@ -40,18 +40,32 @@ const getStatusClass = (status) => {
   return 'inline-flex items-center rounded-md bg-[#F8FAFC] px-2 py-1 text-xs font-medium text-[#374151]';
 };
 
-const downloadCsv = (rows) => {
-  if (!rows.length) return;
+const downloadCsv = (data) => {
+  if (!data.length) return;
+  
   const headers = ['Survey Name', 'Year', 'Quarter', 'Status', 'Submission On', 'Products'];
   const csvRows = [headers.join(',')];
-  rows.forEach((row) => {
-    csvRows.push(
-      row
-        .slice(0, 6)
-        .map((cell) => `"${String(cell).replace(/"/g, '""')}"`)
-        .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 blob = new Blob([csvRows.join('\n')], { type: 'text/csv;charset=utf-8;' });
   const url = URL.createObjectURL(blob);
   const link = document.createElement('a');
@@ -131,25 +145,19 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
   });  
 
   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] ml-2 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="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 flex-col md:flex-row gap-3 md:items-center">
-        <div className="relative w-full md:w-56">
+      <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"
+            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}
@@ -159,15 +167,15 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
         </div>
 
         <button
-          type="button"
-          onClick={() => downloadCsv(rowsData)}
-          disabled={!rowsData.length}
-          className={`inline-flex h-10 items-center gap-2 rounded-md border px-4 mr-2 text-sm font-medium ${
-            rowsData.length
-              ? 'border-[#92722A] text-[#92722A] hover:bg-[#F2ECCF]'
-              : 'border-gray-200 text-gray-400 cursor-not-allowed'
-          }`}
-        >
+  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"
@@ -204,50 +212,59 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
 
   return (
     <>
-  <section className="max-w-[1280px] mx-auto px-0">
-  <div className="overflow-x-auto rounded-lg border border-[#D9D9DC] shadow-sm bg-white">
-    <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>
+      <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.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>
+            <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>
+      </section>
       <Footer />
     </>
   );