admin dashboard actions flow updated

This commit is contained in:
Senthamilselvi 2025-11-03 15:53:33 +05:30
parent fadef78faf
commit a0105e59bd

View File

@ -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]">
<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>,
item,
]);
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>
)}