shawon/JML
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: adjust UI state management and OCR locking logic in maintenance page

Browse Source
This commit is contained in:
sazzadulalambd
2026-05-20 14:10:18 +06:00
parent bb561e493b
commit 8669da78d6
1 changed files with 67 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
src/app/admin/maintenance/[id]/page.tsx
View File

@@ -306,7 +306,7 @@ export default function MaintenanceDetailPage() {
if (found) { if (found) {
setRecord(found); setRecord(found);
setEditForm(found); setEditForm(found);
setActualCost(found.actualCost?.toString() || found.estimatedCost.toString()); setActualCost(found.actualCost?.toString() || '');
} }
}, [id]); }, [id]);
@@ -485,7 +485,7 @@ export default function MaintenanceDetailPage() {
<CheckCircle className="w-3.5 h-3.5 text-emerald-500" /> Invoice Locked (OCR Synced) <CheckCircle className="w-3.5 h-3.5 text-emerald-500" /> Invoice Locked (OCR Synced)
</div> </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 ? ( {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"> <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 <MessageSquare className="w-4 h-4" /> Note
</button> </button>
)} )}
{record.status !== 'completed' && !invoiceCreated && ( <div className={`flex flex-wrap gap-2 filter blur-[1.5px] opacity-50 pointer-events-none`}>
<button {record.status !== 'completed' && !invoiceCreated && (
onClick={() => setShowCompleteModal(true)} <button
className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 flex items-center gap-2" 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> <FileText className="w-4 h-4" /> Create Invoice
)} </button>
{record.status !== 'completed' && invoiceCreated && ( )}
<> {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 <button
onClick={handleGenerateInvoice} 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" 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 <Printer className="w-4 h-4" /> Print Invoice
</button> </button>
<button )}
onClick={() => setShowPaymentModal(true)} </div>
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>
<div className="bg-orange-50 p-4 rounded-xl border border-orange-100 relative overflow-hidden transition-all duration-300"> <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"> <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"> <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 <CheckCircle className="w-3.5 h-3.5 text-emerald-400" /> Populated via AI OCR
</span> </span>
</div> </div>
)}
<div className={ocrComplete ? 'filter blur-[1.5px] opacity-60 pointer-events-none' : ''}> <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"> <h3 className="font-semibold text-orange-800 mb-3 flex items-center gap-2">
<History className="w-5 h-5" /> Issue History <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="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"> <div className="flex items-center justify-between">
<h3 className="font-semibold text-indigo-800 text-sm flex items-center gap-2"> <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> </h3>
{ocrComplete && ( {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"> <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>
<div className="bg-purple-50 p-4 rounded-xl border border-purple-100 relative overflow-hidden transition-all duration-300"> <div className="bg-purple-50 p-4 rounded-xl border border-purple-100 relative overflow-hidden transition-all duration-300">
{ocrComplete && ( {/* {ocrComplete && ( */}
<div className="absolute inset-0 bg-slate-900/5 backdrop-blur-[1px] flex items-center justify-center z-10 p-2"> <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"> <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 <CheckCircle className="w-3.5 h-3.5 text-emerald-400" /> Populated via AI OCR
</span> </span>
</div> </div>
)} {/* )} */}
<div className={ocrComplete ? 'filter blur-[1.5px] opacity-60 pointer-events-none' : ''}> <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"> <h3 className="font-semibold text-purple-800 mb-3 flex items-center gap-2">
<DollarSign className="w-5 h-5" /> Cost Details <DollarSign className="w-5 h-5" /> Cost Details
@@ -991,13 +993,13 @@ export default function MaintenanceDetailPage() {
</div> </div>
<div className="bg-orange-50 p-4 rounded-xl border border-orange-100 relative overflow-hidden transition-all duration-300"> <div className="bg-orange-50 p-4 rounded-xl border border-orange-100 relative overflow-hidden transition-all duration-300">
{ocrComplete && ( {/* {ocrComplete && ( */}
<div className="absolute inset-0 bg-slate-900/5 backdrop-blur-[1px] flex items-center justify-center z-10 p-2"> <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"> <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 <CheckCircle className="w-3.5 h-3.5 text-emerald-400" /> Populated via AI OCR
</span> </span>
</div> </div>
)} {/* )} */}
<div className={ocrComplete ? 'filter blur-[1.5px] opacity-60 pointer-events-none' : ''}> <div className={ocrComplete ? 'filter blur-[1.5px] opacity-60 pointer-events-none' : ''}>
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<h3 className="font-semibold text-orange-800 flex items-center gap-2"> <h3 className="font-semibold text-orange-800 flex items-center gap-2">