bug validation review bug
This commit is contained in:
Malini
parent
901729e1db
commit
8186987cb0
@ -29,11 +29,13 @@ const ValidationReview = () => {
|
||||
const { id } = useParams();
|
||||
const [isRejectOpen, setIsRejectOpen] = React.useState(false);
|
||||
const [rejectReason, setRejectReason] = React.useState('');
|
||||
const [showRejectError, setShowRejectError] = React.useState(false);
|
||||
const [loading, setLoading] = React.useState(true);
|
||||
const [actionLoading, setActionLoading] = React.useState(false);
|
||||
const [error, setError] = React.useState(null);
|
||||
const [submissionData, setSubmissionData] = React.useState(null);
|
||||
const [quarterPeriods, setQuarterPeriods] = React.useState(null);
|
||||
const [isApproveOpen, setIsApproveOpen] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
const fetchSubmission = async () => {
|
||||
@ -81,6 +83,7 @@ const ValidationReview = () => {
|
||||
}, [id]);
|
||||
|
||||
const handleApprove = async () => {
|
||||
setIsApproveOpen(false);
|
||||
if (actionLoading) return;
|
||||
|
||||
setActionLoading(true);
|
||||
@ -116,9 +119,10 @@ const ValidationReview = () => {
|
||||
if (actionLoading) return;
|
||||
|
||||
if (!rejectReason.trim()) {
|
||||
alert('Please provide a reason for rejection.');
|
||||
setShowRejectError(true);
|
||||
return;
|
||||
}
|
||||
setShowRejectError(false);
|
||||
|
||||
setActionLoading(true);
|
||||
try {
|
||||
@ -316,7 +320,7 @@ const ValidationReview = () => {
|
||||
<div className="max-w-[1280px] mx-auto px-4 py-6 space-y-6">
|
||||
<nav className="flex items-center gap-2 text-sm text-[#8F9299] mb-6">
|
||||
<Link to="/admin/validations" className="flex items-center gap-2 text-[#232528] hover:underline">
|
||||
Manage Submissions <img src={caretUpSrc} alt="" className="h-3 w-3 rotate-90" />
|
||||
Manage Submissions <img src={caretUpSrc} alt="" className="h-3 w-3 " />
|
||||
</Link>
|
||||
<span className="text-[#7A7F87] font-medium">View Submission</span>
|
||||
</nav>
|
||||
@ -378,226 +382,220 @@ const ValidationReview = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{productDetails.length > 0 ? (
|
||||
<div className={`grid gap-4 ${productDetails.length === 1 ? 'grid-cols-1' : 'grid-cols-1 lg:grid-cols-2'}`}>
|
||||
{productDetails.map((product, idx) => (
|
||||
{submissionData?.products?.length > 0 ? (
|
||||
<div
|
||||
className={`grid gap-4 ${
|
||||
submissionData.products.length === 1
|
||||
? 'grid-cols-1'
|
||||
: 'grid-cols-1 lg:grid-cols-2'
|
||||
}`}
|
||||
>
|
||||
{submissionData.products.map((product, idx) => (
|
||||
<section
|
||||
key={product.code + idx}
|
||||
key={product.id || 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"
|
||||
>
|
||||
{/* Header Section */}
|
||||
<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>
|
||||
Product:{' '}
|
||||
<span className="font-normal">
|
||||
{product?.product?.hs_code} - {product?.product?.product_name}
|
||||
</span>
|
||||
</div>
|
||||
<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>
|
||||
Submitted By: <strong>System</strong>
|
||||
</span>
|
||||
<span className="px-2 py-[2px] border border-[#D0D5DD] rounded-md text-xs">
|
||||
Unit: <strong>{product.unit}</strong>
|
||||
Unit: <strong>{product?.unit?.uom || 'units'}</strong>
|
||||
</span>
|
||||
<span className="px-2 py-[2px] border border-[#D0D5DD] rounded-md text-xs">
|
||||
Capacity: <strong>{product.capacity}</strong>
|
||||
Capacity: <strong>{product?.annual_installed_capacity}</strong>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table Section */}
|
||||
<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">
|
||||
{quarterPeriods?.previous_quarter}-{quarterPeriods?.previous_year} (Previous Quarter)
|
||||
</th>
|
||||
<th colSpan="3" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center">
|
||||
{quarterPeriods?.current_quarter}-{quarterPeriods?.current_year} (Current Quarter)
|
||||
</th>
|
||||
<th colSpan="3" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center">
|
||||
{quarterPeriods?.forecast_quarter}-{quarterPeriods?.forecast_year} (Next Quarter)
|
||||
</th>
|
||||
</tr>
|
||||
<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"
|
||||
>
|
||||
{quarterPeriods?.previous_quarter}-{quarterPeriods?.previous_year}{' '}
|
||||
(Previous Quarter)
|
||||
</th>
|
||||
<th
|
||||
colSpan="3"
|
||||
className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center"
|
||||
>
|
||||
{quarterPeriods?.current_quarter}-{quarterPeriods?.current_year}{' '}
|
||||
(Current Quarter)
|
||||
</th>
|
||||
<th
|
||||
colSpan="3"
|
||||
className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center"
|
||||
>
|
||||
{quarterPeriods?.forecast_quarter}-{quarterPeriods?.forecast_year}{' '}
|
||||
(Next Quarter)
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="bg-[#F4F8FF] px-4 py-2 font-medium text-[#286CFF]">{quarterPeriods?.current_month?.current_period_one}</th>
|
||||
<th className="bg-[#F4F8FF] px-4 py-2 font-medium text-[#286CFF]">{quarterPeriods?.current_month?.current_period_two}</th>
|
||||
<th className="bg-[#F4F8FF] px-4 py-2 font-medium text-[#286CFF]">{quarterPeriods?.current_month?.current_period_three}</th>
|
||||
<tr>
|
||||
<th className="bg-[#F4F8FF] px-4 py-2 font-medium text-[#286CFF]">
|
||||
{quarterPeriods?.previous_month?.previous_period_one}
|
||||
</th>
|
||||
<th className="bg-[#F4F8FF] px-4 py-2 font-medium text-[#286CFF]">
|
||||
{quarterPeriods?.previous_month?.previous_period_two}
|
||||
</th>
|
||||
<th className="bg-[#F4F8FF] px-4 py-2 font-medium text-[#286CFF]">
|
||||
{quarterPeriods?.previous_month?.previous_period_three}
|
||||
</th>
|
||||
|
||||
<th className="bg-[#F3FAF4] px-4 py-2 font-medium text-[#2F663C]">{quarterPeriods?.forecast_month?.forecast_period_one}</th>
|
||||
<th className="bg-[#F3FAF4] px-4 py-2 font-medium text-[#2F663C]">{quarterPeriods?.forecast_month?.forecast_period_two}</th>
|
||||
<th className="bg-[#F3FAF4] px-4 py-2 font-medium text-[#2F663C]">{quarterPeriods?.forecast_month?.forecast_period_three}</th>
|
||||
<th className="bg-[#F3FAF4] px-4 py-2 font-medium text-[#2F663C]">
|
||||
{quarterPeriods?.current_month?.current_period_one}
|
||||
</th>
|
||||
<th className="bg-[#F3FAF4] px-4 py-2 font-medium text-[#2F663C]">
|
||||
{quarterPeriods?.current_month?.current_period_two}
|
||||
</th>
|
||||
<th className="bg-[#F3FAF4] px-4 py-2 font-medium text-[#2F663C]">
|
||||
{quarterPeriods?.current_month?.current_period_three}
|
||||
</th>
|
||||
|
||||
<th className="bg-[#FFF6EC] px-4 py-2 font-medium text-[#F29F0E]">{quarterPeriods?.previous_month?.previous_period_one}</th>
|
||||
<th className="bg-[#FFF6EC] px-4 py-2 font-medium text-[#F29F0E]">{quarterPeriods?.previous_month?.previous_period_two}</th>
|
||||
<th className="bg-[#FFF6EC] px-4 py-2 font-medium text-[#F29F0E]">{quarterPeriods?.previous_month?.previous_period_three}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<th className="bg-[#FFF6EC] px-4 py-2 font-medium text-[#F29F0E]">
|
||||
{quarterPeriods?.forecast_month?.forecast_period_one}
|
||||
</th>
|
||||
<th className="bg-[#FFF6EC] px-4 py-2 font-medium text-[#F29F0E]">
|
||||
{quarterPeriods?.forecast_month?.forecast_period_two}
|
||||
</th>
|
||||
<th className="bg-[#FFF6EC] px-4 py-2 font-medium text-[#F29F0E]">
|
||||
{quarterPeriods?.forecast_month?.forecast_period_three}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{submissionData?.products?.map((product, idx) => (
|
||||
<React.Fragment key={idx}>
|
||||
{/* Quantity Row */}
|
||||
<tr className="border-t border-[#E5E7EB]">
|
||||
<td className="bg-[#FFFCF2] px-4 py-3 font-medium text-[#232528]">
|
||||
Quantity ({product.unit?.uom || 'units'})
|
||||
</td>
|
||||
{/* Previous Quarter Quantities */}
|
||||
<td className="px-4 py-3 text-[#232528]">
|
||||
{product.previous_quantity_period_one || '0'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-[#232528]">
|
||||
{product.previous_quantity_period_two || '0'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-[#232528]">
|
||||
{product.previous_quantity_period_three || '0'}
|
||||
</td>
|
||||
|
||||
{/* Current Quarter Quantities */}
|
||||
<td className="px-4 py-3 text-[#232528]">
|
||||
{product.current_quantity_period_one || '0'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-[#232528]">
|
||||
{product.current_quantity_period_two || '0'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-[#232528]">
|
||||
{product.current_quantity_period_three || '0'}
|
||||
</td>
|
||||
|
||||
{/* Forecast Quarter Quantities */}
|
||||
<td className="px-4 py-3 text-[#232528]">
|
||||
{product.forecast_quantity_period_one || '0'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-[#232528]">
|
||||
{product.forecast_quantity_period_two || '0'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-[#232528]">
|
||||
{product.forecast_quantity_period_three || '0'}
|
||||
</td>
|
||||
</tr>
|
||||
<tbody>
|
||||
{/* Quantity Row */}
|
||||
<tr className="border-t border-[#E5E7EB]">
|
||||
<td className="bg-[#FFFCF2] px-4 py-3 font-medium text-[#232528]">
|
||||
Quantity ({product?.unit?.uom || 'units'})
|
||||
</td>
|
||||
<td className="px-4 py-3">{product.previous_quantity_period_one || '0'}</td>
|
||||
<td className="px-4 py-3">{product.previous_quantity_period_two || '0'}</td>
|
||||
<td className="px-4 py-3">{product.previous_quantity_period_three || '0'}</td>
|
||||
|
||||
{/* Cost Row */}
|
||||
<tr className="border-t border-[#E5E7EB]">
|
||||
<td className="bg-[#FFFCF2] px-4 py-3 font-medium text-[#232528]">
|
||||
Cost (AED)
|
||||
</td>
|
||||
{/* Previous Quarter Costs */}
|
||||
<td className="px-4 py-3 text-[#232528]">
|
||||
{product.previous_cost_period_one || '0'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-[#232528]">
|
||||
{product.previous_cost_period_two || '0'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-[#232528]">
|
||||
{product.previous_cost_period_three || '0'}
|
||||
</td>
|
||||
|
||||
{/* Current Quarter Costs */}
|
||||
<td className="px-4 py-3 text-[#232528]">
|
||||
{product.current_cost_period_one || '0'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-[#232528]">
|
||||
{product.current_cost_period_two || '0'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-[#232528]">
|
||||
{product.current_cost_period_three || '0'}
|
||||
</td>
|
||||
|
||||
{/* Forecast Quarter Costs */}
|
||||
<td className="px-4 py-3 text-[#232528]">
|
||||
{product.forecast_cost_period_one || '0'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-[#232528]">
|
||||
{product.forecast_cost_period_two || '0'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-[#232528]">
|
||||
{product.forecast_cost_period_three || '0'}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/* Remarks Row (if exists) */}
|
||||
{product.remarks && (
|
||||
<tr className="border-t border-[#E5E7EB] bg-gray-100">
|
||||
<td className="px-4 py-3 font-medium text-[#232528]">
|
||||
Remarks
|
||||
</td>
|
||||
<td colSpan="9" className="px-4 py-3 text-[#232528]">
|
||||
{product.remarks}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{/* Current Quarter Reason Row */}
|
||||
<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">
|
||||
{product.variation_reason?.reason || 'No reason provided'}
|
||||
{product.other_variation_reason && (
|
||||
<div className="text-xs mt-1">Note: {product.other_variation_reason}</div>
|
||||
)}
|
||||
</td>
|
||||
<td colSpan="3" className="px-4 py-3 text-center text-[#6B7280]">--</td>
|
||||
</tr>
|
||||
<td className="px-4 py-3">{product.current_quantity_period_one || '0'}</td>
|
||||
<td className="px-4 py-3">{product.current_quantity_period_two || '0'}</td>
|
||||
<td className="px-4 py-3">{product.current_quantity_period_three || '0'}</td>
|
||||
|
||||
{/* Forecast Quarter Reason Row */}
|
||||
<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">
|
||||
{product.zero_target_reason?.reason || 'No reason provided'}
|
||||
{product.other_zero_target_reason && (
|
||||
<div className="text-xs mt-1">Note: {product.other_zero_target_reason}</div>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div className="mt-4">
|
||||
{/* <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>
|
||||
<td className="px-4 py-3">{product.forecast_quantity_period_one || '0'}</td>
|
||||
<td className="px-4 py-3">{product.forecast_quantity_period_two || '0'}</td>
|
||||
<td className="px-4 py-3">{product.forecast_quantity_period_three || '0'}</td>
|
||||
</tr>
|
||||
|
||||
{/* Cost Row */}
|
||||
<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">{product.previous_cost_period_one || '0'}</td>
|
||||
<td className="px-4 py-3">{product.previous_cost_period_two || '0'}</td>
|
||||
<td className="px-4 py-3">{product.previous_cost_period_three || '0'}</td>
|
||||
|
||||
<td className="px-4 py-3">{product.current_cost_period_one || '0'}</td>
|
||||
<td className="px-4 py-3">{product.current_cost_period_two || '0'}</td>
|
||||
<td className="px-4 py-3">{product.current_cost_period_three || '0'}</td>
|
||||
|
||||
<td className="px-4 py-3">{product.forecast_cost_period_one || '0'}</td>
|
||||
<td className="px-4 py-3">{product.forecast_cost_period_two || '0'}</td>
|
||||
<td className="px-4 py-3">{product.forecast_cost_period_three || '0'}</td>
|
||||
</tr>
|
||||
|
||||
{/* Reason (Current) */}
|
||||
<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="text-center text-[#6B7280]">
|
||||
--
|
||||
</td>
|
||||
<td
|
||||
colSpan="3"
|
||||
className="px-4 py-3 text-center bg-[#E9F6EC] text-[#1E7C34] font-medium rounded-md"
|
||||
>
|
||||
{product?.variation_reason?.reason || 'No reason provided'}
|
||||
{product.other_variation_reason && (
|
||||
<div className="text-xs mt-1">
|
||||
Note: {product.other_variation_reason}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td colSpan="3" className="text-center text-[#6B7280]">
|
||||
--
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/* Reason (Forecast) */}
|
||||
<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="text-center text-[#6B7280]">
|
||||
--
|
||||
</td>
|
||||
<td colSpan="3" className="text-center text-[#6B7280]">
|
||||
--
|
||||
</td>
|
||||
<td
|
||||
colSpan="3"
|
||||
className="px-4 py-3 text-center bg-[#FFF2E0] text-[#D97706] font-medium rounded-md"
|
||||
>
|
||||
{product?.zero_target_reason?.reason || 'No reason provided'}
|
||||
{product.other_zero_target_reason && (
|
||||
<div className="text-xs mt-1">
|
||||
Note: {product.other_zero_target_reason}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div className="mt-3 text-sm text-[#4B5563]">
|
||||
<strong className="font-semibold text-[#232528]">Remarks:</strong>{' '}
|
||||
{product.remarks || 'NA'}
|
||||
</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="Please enter remarks here"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</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="Please enter remarks here"
|
||||
></textarea>
|
||||
<div className="mt-1 flex justify-end">
|
||||
{/* <p className="text-xs text-[#6B7280] italic inline-flex items-center gap-1">
|
||||
<span>Please refer to the screenshot</span>
|
||||
</p> */}
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
)}
|
||||
|
||||
|
||||
{actionType !== 'view' && (
|
||||
<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">
|
||||
@ -643,23 +641,35 @@ const ValidationReview = () => {
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-3 px-6 py-5">
|
||||
<label className="flex flex-col gap-2 text-sm font-semibold text-[#232528]">
|
||||
Reason
|
||||
<div className="p-6">
|
||||
<p className="text-sm text-gray-600 leading-6 mb-2">
|
||||
You're about to return <span className="font-medium text-gray-900">{submissionData?.establishment?.factory_name || 'this establishment'}</span>'s <span className="font-medium text-gray-900">{submissionData?.quarter} {submissionData?.year}</span> submission for correction.
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 leading-6 mb-3">
|
||||
The status will change to Rejected and the establishment can resubmit within the survey window.
|
||||
</p>
|
||||
<div className="mb-0">
|
||||
<label htmlFor="rejectReason" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Reason for rejection: <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="rejectReason"
|
||||
rows={4}
|
||||
className="w-full rounded-[10px] border border-[#D1D5DB] bg-[#FFFCF2] px-4 py-3 text-sm text-[#232528] placeholder:text-[#9CA3AF] focus:outline-none focus:ring-2 focus:ring-[#92722A]"
|
||||
placeholder="Enter the reason for rejection..."
|
||||
className={`w-full px-3 py-2 border ${showRejectError && !rejectReason.trim() ? 'border-red-500' : 'border-gray-300'} rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[#92722A] focus:border-[#92722A] text-sm`}
|
||||
placeholder="Please provide a reason for rejection"
|
||||
value={rejectReason}
|
||||
onChange={(event) => setRejectReason(event.target.value)}
|
||||
onChange={(e) => setRejectReason(e.target.value)}
|
||||
disabled={actionLoading}
|
||||
/>
|
||||
</label>
|
||||
{showRejectError && !rejectReason.trim() && (
|
||||
<p className="mt-1 text-sm text-red-600">This field is required</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-3 border-t border-[#E5E7EB] px-6 py-4">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-10 items-center justify-center rounded-[10px] border border-[#C3C6CB] bg-white px-4 text-sm font-medium text-[#5F646D] transition-colors hover:bg-[#F7F7F7] disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
className="inline-flex h-10 items-center justify-center rounded-[10px] border border-[#92722A] bg-white px-4 text-sm font-medium text-[#92722A] transition-colors hover:bg-[#F7F7F7] disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
onClick={() => {
|
||||
setIsRejectOpen(false);
|
||||
setRejectReason('');
|
||||
@ -681,30 +691,8 @@ const ValidationReview = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Fixed bottom action bar */}
|
||||
<div className="fixed bottom-0 left-0 right-0 border-t border-[#E5E7EB] bg-white py-4 px-6 shadow-[0_-4px_12px_rgba(0,0,0,0.05)]">
|
||||
<div className="mx-auto flex max-w-[1280px] justify-end gap-4">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-11 items-center justify-center rounded-[10px] border border-[#B52520] px-3 text-sm font-semibold text-[#B52520] transition-colors hover:bg-[#FEE2E2] disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
onClick={() => setIsRejectOpen(true)}
|
||||
disabled={actionLoading || submissionData?.status === 'Rejected'}
|
||||
>
|
||||
{submissionData?.status === 'Rejected' ? 'Already Rejected' : 'Reject'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-11 items-center justify-center rounded-[10px] bg-[#92722A] px-6 text-sm font-semibold text-white transition-colors hover:bg-[#B68A35] disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
onClick={handleApprove}
|
||||
disabled={actionLoading || submissionData?.status === 'Approved'}
|
||||
>
|
||||
{actionLoading ? 'Processing...' : submissionData?.status === 'Approved' ? 'Already Approved' : 'Approve'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Fixed bottom action bar */}
|
||||
<div className="fixed bottom-0 left-0 right-0 border-t border-[#E5E7EB] bg-white py-4 px-6 shadow-[0_-4px_12px_rgba(0,0,0,0.05)]">
|
||||
{/* Action buttons moved to the main content area */}
|
||||
<div className="border-t border-[#E5E7EB] bg-white pt-2 pb-4 px-6 max-w-[1240px] mx-auto">
|
||||
<div className="mx-auto flex max-w-[1280px] justify-end gap-4">
|
||||
<button
|
||||
type="button"
|
||||
@ -717,13 +705,49 @@ const ValidationReview = () => {
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-11 items-center justify-center rounded-[10px] bg-[#92722A] px-6 text-sm font-semibold text-white transition-colors hover:bg-[#B68A35] disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
onClick={handleApprove}
|
||||
onClick={() => setIsApproveOpen(true)}
|
||||
disabled={actionLoading || submissionData?.status === 'Approved'}
|
||||
>
|
||||
{actionLoading ? 'Processing...' : submissionData?.status === 'Approved' ? 'Already Approved' : 'Approve'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Approval Confirmation Dialog */}
|
||||
{isApproveOpen && (
|
||||
<div className="fixed inset-0 flex items-center justify-center z-50 p-4 bg-black/30">
|
||||
<div className="bg-white rounded-lg w-full max-w-lg border border-gray-200 shadow-lg">
|
||||
<div className="flex items-center justify-between h-12 p-4 border-b border-gray-200">
|
||||
<h3 className="text-base font-medium text-gray-900">Approve this submission?</h3>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<p className="mb-4 text-gray-600 text-sm">
|
||||
You're about to approve <span className="font-medium"><b>{submissionData?.establishment?.factory_name|| 'this establishment'}</b></span> for <span className="font-medium"><b>{submissionData?.quarter} {submissionData?.year}</b></span>.
|
||||
<br /><br />
|
||||
This will lock the record for the establishment.
|
||||
</p>
|
||||
<div className="flex justify-end gap-3 mt-6">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md border border-gray-300 bg-[#92722A] px-4 py-2 text-sm font-medium text-[#92722A] hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
onClick={() => setIsApproveOpen(false)}
|
||||
disabled={actionLoading}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center rounded-md border border-transparent bg-[#92722A] px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-[#B68A35] focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50"
|
||||
onClick={handleApprove}
|
||||
disabled={actionLoading}
|
||||
>
|
||||
{actionLoading ? 'Processing...' : 'Approve'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user