view submission products new design completed

ipi-survey-platform/src/pages/Admin/ValidationReview.jsx

@@ -374,78 +374,149 @@ const ValidationReview = () => {
         </section>
 
         {productDetails.length > 0 ? (
-          <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+  <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-4">
+      <section
-                <div className="flex flex-wrap items-center justify-between w-full">
+        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="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="px-2 py-[2px] border border-[#D0D5DD] rounded-md text-xs">
-                      <span className="text-[#475467] font-medium">Submitted By:</span>
+              Submitted By: <strong>{product.submittedBy}</strong>
-                      <span className="font-semibold text-[#232528]">{product.submittedBy}</span>
+            </span>
-                    </div>
+            <span className="px-2 py-[2px] border border-[#D0D5DD] rounded-md text-xs">
-                    <div className="flex items-center gap-1 border border-[#D0D5DD] rounded-md px-2 py-[2px] text-xs text-[#344054]">
+              Unit: <strong>{product.unit}</strong>
-                      <span className="text-[#475467] font-medium">Unit:</span>
+            </span>
-                      <span className="font-semibold text-[#232528]">{product.unit}</span>
+            <span className="px-2 py-[2px] border border-[#D0D5DD] rounded-md text-xs">
-                    </div>
+              Capacity: <strong>{product.capacity}</strong>
-                    <div className="flex items-center gap-1 border border-[#D0D5DD] rounded-md px-2 py-[2px] text-xs text-[#344054]">
+            </span>
-                      <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]">
+        <div className="overflow-x-auto rounded-[12px] border border-[#E5E7EB]">
-                  <table className="w-full table-fixed text-sm">
+  <table className="min-w-full text-sm text-left border-collapse">
     <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}
+          rowSpan="2"
-                            className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-white"
+          className="bg-[#F2ECCF] text-[#92722A] px-4 py-3 text-xs font-semibold uppercase align-middle border-r border-[#E5E7EB]"
-                            style={{ backgroundColor: quarter.color }}
         >
-                            {quarter.label}
+          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>
-                      {product.rows.map((row) => (
+      <tr className="border-t border-[#E5E7EB]">
-                        <tr key={row.label} className="border-t border-[#E5E7EB]">
+        <td className="bg-[#FFFCF2] px-4 py-3 font-medium text-[#232528]">
-                          <td className="bg-[#FFFCF2] px-4 py-3 font-medium text-[#232528]">{row.label}</td>
+          Quantity (liters)
-                          {row.values.map((value, index) => (
+        </td>
-                            <td
+        <td className="px-4 py-3 text-[#232528]">1200</td>
-                              key={`${row.label}-${product.quarters[index].label}`}
+        <td className="px-4 py-3 text-red-600">1180 ▼</td>
-                              className="px-4 py-3 text-[#232528]"
+        <td className="px-4 py-3 text-green-600">1250 ▲</td>
-                              style={{ backgroundColor: product.quarters[index].cellColor }}
+
-                            >
+        <td className="px-4 py-3 text-[#232528]">1280</td>
-                              {value}
+        <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="space-y-3">
+
-                  <div className="text-sm text-[#4B5563]">
+        <div className="text-xs text-[#4B5563] mt-2">
-                    <span className="font-semibold text-[#232528]">Remarks:</span> {product.remarks}
+  <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="flex flex-col gap-2">
+
-                    <span className="text-sm font-semibold text-[#232528]">Admin Remarks</span>
+        <div className="mt-3">
+          <label className="block text-sm font-semibold mb-1 text-[#232528]">Admin Remarks</label>
           <textarea
-                      rows={3}
+            rows="2"
-                      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]"
+            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..."
-                      defaultValue=""
+          ></textarea>
-                    />
-                  </div>
         </div>
       </section>
     ))}