manage submission approve & reject navigation done

This commit is contained in:
Senthamilselvi 2025-11-03 14:06:58 +05:30
parent b305b8d167
commit fadef78faf
2 changed files with 75 additions and 48 deletions

View File

@ -1,9 +1,8 @@
import React from 'react'; import React from 'react';
import { Link, useNavigate, useParams } from 'react-router-dom'; import { Link, useNavigate, useParams, useLocation } from 'react-router-dom';
import AdminHeader from '@/components/admin/AdminHeader'; import AdminHeader from '@/components/admin/AdminHeader';
import { getSubmissionById } from '@/services/admin/submission'; import { getSubmissionById } from '@/services/admin/submission';
import apiClient from '@/services/api/apiClient'; import apiClient from '@/services/api/apiClient';
const caretUpSrc = '/assets/images/caret-up.svg'; const caretUpSrc = '/assets/images/caret-up.svg';
const establishmentIconSrc = '/assets/images/Establishment.svg'; const establishmentIconSrc = '/assets/images/Establishment.svg';
const establishmentIdIconSrc = '/assets/images/Establishmentid.svg'; const establishmentIdIconSrc = '/assets/images/Establishmentid.svg';
@ -25,6 +24,8 @@ const employmentIcons = {
const ValidationReview = () => { const ValidationReview = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation();
const actionType = location.state?.actionType || 'view';
const { id } = useParams(); const { id } = useParams();
const [isRejectOpen, setIsRejectOpen] = React.useState(false); const [isRejectOpen, setIsRejectOpen] = React.useState(false);
const [rejectReason, setRejectReason] = React.useState(''); const [rejectReason, setRejectReason] = React.useState('');
@ -459,22 +460,23 @@ const ValidationReview = () => {
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between"> <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<p className="text-sm text-[#4B5563]"><span className="font-semibold text-[#232528]">Note:</span> Please review the details carefully before taking action.</p> <p className="text-sm text-[#4B5563]"><span className="font-semibold text-[#232528]">Note:</span> Please review the details carefully before taking action.</p>
<div className="flex flex-col gap-3 md:flex-row md:items-center"> <div className="flex flex-col gap-3 md:flex-row md:items-center">
<button <button
type="button" type="button"
className="inline-flex h-11 w-full items-center justify-center rounded-[10px] border border-[#B52520] text-sm font-semibold text-[#B52520] transition-colors hover:bg-[#FEE2E2] md:w-[132px] disabled:opacity-50 disabled:cursor-not-allowed" className="inline-flex h-11 w-full items-center justify-center rounded-[10px] border border-[#B52520] text-sm font-semibold text-[#B52520] transition-colors hover:bg-[#FEE2E2] md:w-[132px] disabled:opacity-50 disabled:cursor-not-allowed"
onClick={() => setIsRejectOpen(true)} onClick={() => setIsRejectOpen(true)}
disabled={actionLoading} disabled={actionLoading || actionType === 'approve'}
> >
Reject Reject
</button> </button>
<button <button
type="button" type="button"
className="inline-flex h-11 w-full items-center justify-center rounded-[10px] bg-[#92722A] text-sm font-semibold text-white transition-colors hover:bg-[#B68A35] md:w-[132px] disabled:opacity-50 disabled:cursor-not-allowed" className="inline-flex h-11 w-full items-center justify-center rounded-[10px] bg-[#92722A] text-sm font-semibold text-white transition-colors hover:bg-[#B68A35] md:w-[132px] disabled:opacity-50 disabled:cursor-not-allowed"
onClick={handleApprove} onClick={handleApprove}
disabled={actionLoading} disabled={actionLoading || actionType === 'reject'}
> >
{actionLoading ? 'Processing...' : 'Approve'} {actionLoading ? 'Processing...' : 'Approve'}
</button> </button>
</div> </div>
</div> </div>
</section> </section>

View File

@ -308,37 +308,62 @@ const ManageSubmissions = () => {
</div> </div>
); );
if (columnIndex === 10) { if (columnIndex === 10) {
const item = value; const item = value;
return ( return (
<div className="flex items-center justify-center gap-[10px]"> <div className="flex items-center justify-center gap-[10px]">
<div className="relative group"> <div className="relative group">
<CheckCircle2 size={22} className="text-green-600 cursor-pointer hover:scale-110 transition-transform" /> <CheckCircle2
<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"> size={22}
Approve className="text-green-600 cursor-pointer hover:scale-110 transition-transform"
</span> 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> </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>
);
}
return value; return value;
}} }}
/> />