From 8669da78d63bb0cfda685d1ae312da52242c18a5 Mon Sep 17 00:00:00 2001
From: sazzadulalambd <sazzad.sua@gmail.com>
Date: Wed, 20 May 2026 14:10:18 +0600
Subject: [PATCH] refactor: adjust UI state management and OCR locking logic in
 maintenance page

---
 src/app/admin/maintenance/[id]/page.tsx | 132 ++++++++++++------------
 1 file changed, 67 insertions(+), 65 deletions(-)

diff --git a/src/app/admin/maintenance/[id]/page.tsx b/src/app/admin/maintenance/[id]/page.tsx
index a29a792..ed7bbdb 100644
--- a/src/app/admin/maintenance/[id]/page.tsx
+++ b/src/app/admin/maintenance/[id]/page.tsx
@@ -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">