admin dashboard actions flow updated

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

@@ -1,10 +1,14 @@
 import React, { useState, useEffect, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import Table from '@/components/common/Table';
 import apiClient from '../../services/api/apiClient.js';
 import { CheckCircle2, XCircle, Eye } from 'lucide-react';
+
 const SubmissionTable = ({ selectedQuarter, selectedYear }) => {
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
+  const navigate = useNavigate();
+
   useEffect(() => {
     const fetchDashboardData = async () => {
       try {
@@ -63,20 +67,6 @@ const SubmissionTable = ({ selectedQuarter, selectedYear }) => {
     return formatted.replace(/\s?(am|pm)$/i, (match) => match.toUpperCase());
   };
 
-  const headers = [
-    'Establishment',
-    'Emirates',
-    'Year',
-    'Quarter',
-    'Product Count',
-    'Submitted By',
-    'Submission Date & Time',
-    'Status',
-    'Reviewer',
-    'Reviewed On',
-    'Actions',
-  ];
-
   const renderStatusBadge = (status) => {
     const normalized = status?.toLowerCase();
     if (normalized === 'approved') {
@@ -108,48 +98,33 @@ const SubmissionTable = ({ selectedQuarter, selectedYear }) => {
 
   const userProfile = JSON.parse(sessionStorage.getItem("user_profile"));
 
+  const headers = [
+    'Establishment',
+    'Emirates',
+    'Year',
+    'Quarter',
+    'Product Count',
+    'Submitted By',
+    'Submission Date & Time',
+    'Status',
+    'Reviewer',
+    'Reviewed On',
+    'Actions',
+  ];
+
   const tableRows = filtered.map((item) => [
     item?.establishment?.factory_name || '-',
     item?.establishment?.establishment_emirate?.name || '-',
     item?.year || '-',
     item?.quarter || '-',
     item?.product_count || '-',
-    // item?.created_by || '-',
+    userProfile?.name || '-',
-    userProfile?.name || '-', 
     <span className="whitespace-nowrap">{formatDate(item?.created_at)}</span>,
     renderStatusBadge(item?.status),
-    // item?.updated_by || '-',
     userProfile?.name || '-',
-    // <span className="whitespace-nowrap">{formatDate(item?.updated_at)}</span>,
     <span className="whitespace-nowrap">{formatDate(item?.created_at)}</span>,
-    <div className="flex items-center justify-center gap-[10px]">
+    item, 
-      <div className="relative group">
-        <CheckCircle2 size={22} className="text-green-600 cursor-pointer hover:scale-110 transition-transform" />
-        <span className="absolute bottom-full mb-1 left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-[2px] rounded opacity-0 group-hover:opacity-100 transition">
-          Approve
-        </span>
-      </div>
-      <div className="relative group">
-        <XCircle size={22} className="text-red-600 cursor-pointer hover:scale-110 transition-transform" />
-        <span className="absolute bottom-full mb-1 left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-[2px] rounded opacity-0 group-hover:opacity-100 transition">
-          Reject
-        </span>
-      </div>
-      <div className="relative group">
-        <Eye
-          size={22}
-          className={`cursor-pointer hover:scale-110 transition-transform ${
-            item.status?.toLowerCase() === 'pending' ? 'text-[#9E792B]' : 'text-gray-500'
-          }`}
-          onClick={() => navigate(`/admin/validations/${item.id}`)}
-        />
-        <span className="absolute bottom-full mb-1 left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-[2px] rounded opacity-0 group-hover:opacity-100 transition">
-          View
-        </span>
-      </div>
-    </div>,
   ]);
-  
 
   const columnWidths = [240, 120, 100, 100, 130, 150, 180, 150, 150, 180, 120];
 
@@ -177,6 +152,64 @@ const SubmissionTable = ({ selectedQuarter, selectedYear }) => {
               separated
               rowGapClass="border-spacing-y-1"
               columnWidths={columnWidths}
+              renderCell={(value, _, columnIndex) => {
+                if (columnIndex === 10) {
+                  const item = value;
+                  return (
+                    <div className="flex items-center justify-center gap-[10px]">
+                      <div className="relative group">
+                        <CheckCircle2
+                          size={22}
+                          className="text-green-600 cursor-pointer hover:scale-110 transition-transform"
+                          onClick={() =>
+                            navigate(`/admin/validations/${item.id}`, {
+                              state: { actionType: 'approve' },
+                            })
+                          }
+                        />
+                        <span className="absolute bottom-full mb-1 left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-[2px] rounded opacity-0 group-hover:opacity-100 transition">
+                          Approve
+                        </span>
+                      </div>
+
+                      <div className="relative group">
+                        <XCircle
+                          size={22}
+                          className="text-red-600 cursor-pointer hover:scale-110 transition-transform"
+                          onClick={() =>
+                            navigate(`/admin/validations/${item.id}`, {
+                              state: { actionType: 'reject' },
+                            })
+                          }
+                        />
+                        <span className="absolute bottom-full mb-1 left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-[2px] rounded opacity-0 group-hover:opacity-100 transition">
+                          Reject
+                        </span>
+                      </div>
+
+                      <div className="relative group">
+                        <Eye
+                          size={22}
+                          className={`cursor-pointer hover:scale-110 transition-transform ${
+                            item.status?.toLowerCase() === 'pending'
+                              ? 'text-[#9E792B]'
+                              : 'text-gray-500'
+                          }`}
+                          onClick={() =>
+                            navigate(`/admin/validations/${item.id}`, {
+                              state: { actionType: 'view' },
+                            })
+                          }
+                        />
+                        <span className="absolute bottom-full mb-1 left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-[2px] rounded opacity-0 group-hover:opacity-100 transition">
+                          View
+                        </span>
+                      </div>
+                    </div>
+                  );
+                }
+                return value;
+              }}
             />
           </div>
         )}