refactor: adjust UI state management and OCR locking logic in maintenance page
This commit is contained in:
sazzadulalambd
@@ -306,7 +306,7 @@ export default function MaintenanceDetailPage() {
|
||||
if (found) {
|
||||
setRecord(found);
|
||||
setEditForm(found);
|
||||
setActualCost(found.actualCost?.toString() || found.estimatedCost.toString());
|
||||
setActualCost(found.actualCost?.toString() || '');
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
@@ -485,7 +485,7 @@ export default function MaintenanceDetailPage() {
|
||||
<CheckCircle className="w-3.5 h-3.5 text-emerald-500" /> Invoice Locked (OCR Synced)
|
||||
</div>
|
||||
)}
|
||||
<div className={`flex flex-wrap gap-2 ${ocrComplete ? 'filter blur-[1.5px] opacity-50 pointer-events-none' : ''}`}>
|
||||
<div className={`flex flex-wrap gap-2`}>
|
||||
{editMode ? (
|
||||
<>
|
||||
<button onClick={handleSaveEdit} className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 flex items-center gap-2">
|
||||
@@ -507,53 +507,55 @@ export default function MaintenanceDetailPage() {
|
||||
<MessageSquare className="w-4 h-4" /> Note
|
||||
</button>
|
||||
)}
|
||||
{record.status !== 'completed' && !invoiceCreated && (
|
||||
<button
|
||||
onClick={() => setShowCompleteModal(true)}
|
||||
className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 flex items-center gap-2"
|
||||
>
|
||||
<FileText className="w-4 h-4" /> Create Invoice
|
||||
</button>
|
||||
)}
|
||||
{record.status !== 'completed' && invoiceCreated && (
|
||||
<>
|
||||
<div className={`flex flex-wrap gap-2 filter blur-[1.5px] opacity-50 pointer-events-none`}>
|
||||
{record.status !== 'completed' && !invoiceCreated && (
|
||||
<button
|
||||
onClick={() => setShowCompleteModal(true)}
|
||||
className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 flex items-center gap-2"
|
||||
>
|
||||
<FileText className="w-4 h-4" /> Create Invoice
|
||||
</button>
|
||||
)}
|
||||
{record.status !== 'completed' && invoiceCreated && (
|
||||
<>
|
||||
<button
|
||||
onClick={handleGenerateInvoice}
|
||||
className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 flex items-center gap-2"
|
||||
>
|
||||
<Printer className="w-4 h-4" /> Print Invoice
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowPaymentModal(true)}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 flex items-center gap-2"
|
||||
>
|
||||
<DollarSign className="w-4 h-4" /> Proceed to Payment
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowCompleteModal(true)}
|
||||
className="px-3 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50"
|
||||
title="Edit Invoice"
|
||||
>
|
||||
<Edit className="w-4 h-4" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{record.status === 'completed' && record.paymentStatus !== 'paid' && (
|
||||
<button
|
||||
onClick={() => setShowPaymentModal(true)}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 flex items-center gap-2"
|
||||
>
|
||||
<DollarSign className="w-4 h-4" /> Payment
|
||||
</button>
|
||||
)}
|
||||
{record.paymentStatus === 'paid' && (
|
||||
<button
|
||||
onClick={handleGenerateInvoice}
|
||||
className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 flex items-center gap-2"
|
||||
>
|
||||
<Printer className="w-4 h-4" /> Print Invoice
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowPaymentModal(true)}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 flex items-center gap-2"
|
||||
>
|
||||
<DollarSign className="w-4 h-4" /> Proceed to Payment
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowCompleteModal(true)}
|
||||
className="px-3 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50"
|
||||
title="Edit Invoice"
|
||||
>
|
||||
<Edit className="w-4 h-4" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{record.status === 'completed' && record.paymentStatus !== 'paid' && (
|
||||
<button
|
||||
onClick={() => setShowPaymentModal(true)}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 flex items-center gap-2"
|
||||
>
|
||||
<DollarSign className="w-4 h-4" /> Payment
|
||||
</button>
|
||||
)}
|
||||
{record.paymentStatus === 'paid' && (
|
||||
<button
|
||||
onClick={handleGenerateInvoice}
|
||||
className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 flex items-center gap-2"
|
||||
>
|
||||
<Printer className="w-4 h-4" /> Print Invoice
|
||||
</button>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
@@ -631,13 +633,13 @@ export default function MaintenanceDetailPage() {
|
||||
</div>
|
||||
|
||||
<div className="bg-orange-50 p-4 rounded-xl border border-orange-100 relative overflow-hidden transition-all duration-300">
|
||||
{ocrComplete && (
|
||||
<div className="absolute inset-0 bg-slate-900/5 backdrop-blur-[1px] flex items-center justify-center z-10 p-2">
|
||||
<span className="px-3 py-1 bg-slate-900 text-white border border-slate-700 text-[10px] font-bold rounded-lg uppercase tracking-wider flex items-center gap-1.5 shadow-md">
|
||||
<CheckCircle className="w-3.5 h-3.5 text-emerald-400" /> Populated via AI OCR
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="absolute inset-0 bg-slate-900/5 backdrop-blur-[1px] flex items-center justify-center z-10 p-2">
|
||||
<span className="px-3 py-1 bg-slate-900 text-white border border-slate-700 text-[10px] font-bold rounded-lg uppercase tracking-wider flex items-center gap-1.5 shadow-md">
|
||||
<CheckCircle className="w-3.5 h-3.5 text-emerald-400" /> Populated via AI OCR
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={ocrComplete ? 'filter blur-[1.5px] opacity-60 pointer-events-none' : ''}>
|
||||
<h3 className="font-semibold text-orange-800 mb-3 flex items-center gap-2">
|
||||
<History className="w-5 h-5" /> Issue History
|
||||
@@ -801,7 +803,7 @@ export default function MaintenanceDetailPage() {
|
||||
<div className="bg-indigo-50/70 p-4 rounded-xl border border-indigo-100 space-y-3 relative overflow-hidden transition-all duration-300">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-semibold text-indigo-800 text-sm flex items-center gap-2">
|
||||
<FileText className="w-5 h-5 text-indigo-600" /> Manual Invoice OCR Upload
|
||||
<FileText className="w-5 h-5 text-indigo-600" /> {ocrComplete ? 'Manual Invoice OCR Upload' : 'Upload Manual Invoice'}
|
||||
</h3>
|
||||
{ocrComplete && (
|
||||
<span className="px-2.5 py-0.5 bg-emerald-100 border border-emerald-200 text-emerald-800 text-[10px] font-bold rounded-full uppercase tracking-wider animate-pulse">
|
||||
@@ -906,13 +908,13 @@ export default function MaintenanceDetailPage() {
|
||||
</div>
|
||||
|
||||
<div className="bg-purple-50 p-4 rounded-xl border border-purple-100 relative overflow-hidden transition-all duration-300">
|
||||
{ocrComplete && (
|
||||
<div className="absolute inset-0 bg-slate-900/5 backdrop-blur-[1px] flex items-center justify-center z-10 p-2">
|
||||
<span className="px-3 py-1 bg-slate-900 text-white border border-slate-700 text-[10px] font-bold rounded-lg uppercase tracking-wider flex items-center gap-1.5 shadow-md">
|
||||
<CheckCircle className="w-3.5 h-3.5 text-emerald-400" /> Populated via AI OCR
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{/* {ocrComplete && ( */}
|
||||
<div className="absolute inset-0 bg-slate-900/5 backdrop-blur-[1px] flex items-center justify-center z-10 p-2">
|
||||
<span className="px-3 py-1 bg-slate-900 text-white border border-slate-700 text-[10px] font-bold rounded-lg uppercase tracking-wider flex items-center gap-1.5 shadow-md">
|
||||
<CheckCircle className="w-3.5 h-3.5 text-emerald-400" /> Populated via AI OCR
|
||||
</span>
|
||||
</div>
|
||||
{/* )} */}
|
||||
<div className={ocrComplete ? 'filter blur-[1.5px] opacity-60 pointer-events-none' : ''}>
|
||||
<h3 className="font-semibold text-purple-800 mb-3 flex items-center gap-2">
|
||||
<DollarSign className="w-5 h-5" /> Cost Details
|
||||
@@ -991,13 +993,13 @@ export default function MaintenanceDetailPage() {
|
||||
</div>
|
||||
|
||||
<div className="bg-orange-50 p-4 rounded-xl border border-orange-100 relative overflow-hidden transition-all duration-300">
|
||||
{ocrComplete && (
|
||||
<div className="absolute inset-0 bg-slate-900/5 backdrop-blur-[1px] flex items-center justify-center z-10 p-2">
|
||||
<span className="px-3 py-1 bg-slate-900 text-white border border-slate-700 text-[10px] font-bold rounded-lg uppercase tracking-wider flex items-center gap-1.5 shadow-md">
|
||||
<CheckCircle className="w-3.5 h-3.5 text-emerald-400" /> Populated via AI OCR
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{/* {ocrComplete && ( */}
|
||||
<div className="absolute inset-0 bg-slate-900/5 backdrop-blur-[1px] flex items-center justify-center z-10 p-2">
|
||||
<span className="px-3 py-1 bg-slate-900 text-white border border-slate-700 text-[10px] font-bold rounded-lg uppercase tracking-wider flex items-center gap-1.5 shadow-md">
|
||||
<CheckCircle className="w-3.5 h-3.5 text-emerald-400" /> Populated via AI OCR
|
||||
</span>
|
||||
</div>
|
||||
{/* )} */}
|
||||
<div className={ocrComplete ? 'filter blur-[1.5px] opacity-60 pointer-events-none' : ''}>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="font-semibold text-orange-800 flex items-center gap-2">
|
||||
|
||||
Reference in New Issue
Block a user