From 7f26ff9d66d6d1c97dbd7653f526c8a816f39b89 Mon Sep 17 00:00:00 2001
From: pqhuy1987 <pqhuy1987@gmail.com>
Date: Thu, 23 Apr 2026 11:25:22 +0700
Subject: [PATCH] =?UTF-8?q?[CLAUDE]=20FE-User+FE-Admin:=202=20button=20lu?=
 =?UTF-8?q?=C3=B4n=20hi=E1=BB=87n,=20m=E1=BB=9D=20+=20disabled=20khi=20!?=
 =?UTF-8?q?=3D=20DangSoanThao?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User feedback: hiển thị Edit + Xóa cho mọi row (kể cả Phase khác), nhưng
mờ và disabled khi không thao tác được — để user biết button TỒN TẠI mà
không bị bất ngờ phải hover row đúng phase mới thấy.

## Thay đổi

- Bỏ conditional render `{phase === DangSoanThao && ...}`
- Thêm canMutate = c.phase === DangSoanThao biến + className conditional:
  - canMutate=true: text-slate-500 + hover brand/red + clickable
  - canMutate=false: text-slate-300 + cursor-not-allowed + disabled
- Default opacity-60 (luôn visible nhẹ), group-hover:opacity-100 (rõ
  khi hover)
- title tooltip thay đổi theo state — hint user lý do disable
- onClick guard early return nếu !canMutate (defense in depth)

Build: tsc + vite pass cả 2 app

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../pages/contracts/ContractCreatePage.tsx    | 65 ++++++++++++-------
 .../pages/contracts/ContractCreatePage.tsx    | 65 ++++++++++++-------
 2 files changed, 80 insertions(+), 50 deletions(-)

diff --git a/fe-admin/src/pages/contracts/ContractCreatePage.tsx b/fe-admin/src/pages/contracts/ContractCreatePage.tsx
index f23383d..fadd205 100644
--- a/fe-admin/src/pages/contracts/ContractCreatePage.tsx
+++ b/fe-admin/src/pages/contracts/ContractCreatePage.tsx
@@ -186,32 +186,47 @@ export function ContractCreatePage() {
                     </div>
                   </button>
 
-                  {/* Action buttons — Edit + Xóa, CHỈ hiện khi Phase = DangSoanThao
-                      (state nhập liệu / điều chỉnh). Sau khi nộp lên Góp ý → ẩn cả 2.
+                  {/* Action buttons — Edit + Xóa luôn hiển thị; mờ + disabled khi
+                      Phase != DangSoanThao (BE chỉ cho update/delete khi draft).
                       Sibling không nested để click không trigger row select. */}
-                  {c.phase === ContractPhase.DangSoanThao && (
-                    <div className="absolute right-2 top-2 z-10 flex gap-0.5 opacity-0 transition group-hover:opacity-100">
-                      <button
-                        onClick={() => selectContract(c.id)}
-                        title="Chỉnh sửa HĐ"
-                        className="rounded p-1 text-slate-500 hover:bg-white hover:text-brand-600 hover:shadow-sm"
-                      >
-                        <Pencil className="h-3.5 w-3.5" />
-                      </button>
-                      <button
-                        onClick={() => {
-                          if (confirm(`Xóa HĐ "${c.tenHopDong ?? c.maHopDong ?? 'này'}"?`)) {
-                            deleteContract.mutate(c.id)
-                          }
-                        }}
-                        title="Xóa HĐ"
-                        className="rounded p-1 text-slate-500 hover:bg-white hover:text-red-600 hover:shadow-sm"
-                        disabled={deleteContract.isPending}
-                      >
-                        <Trash2 className="h-3.5 w-3.5" />
-                      </button>
-                    </div>
-                  )}
+                  {(() => {
+                    const canMutate = c.phase === ContractPhase.DangSoanThao
+                    return (
+                      <div className="absolute right-2 top-2 z-10 flex gap-0.5 opacity-60 transition group-hover:opacity-100">
+                        <button
+                          onClick={() => canMutate && selectContract(c.id)}
+                          disabled={!canMutate}
+                          title={canMutate ? 'Chỉnh sửa HĐ' : 'Chỉ sửa được khi Phase = Đang soạn thảo'}
+                          className={cn(
+                            'rounded p-1 transition',
+                            canMutate
+                              ? 'text-slate-500 hover:bg-white hover:text-brand-600 hover:shadow-sm'
+                              : 'cursor-not-allowed text-slate-300',
+                          )}
+                        >
+                          <Pencil className="h-3.5 w-3.5" />
+                        </button>
+                        <button
+                          onClick={() => {
+                            if (!canMutate) return
+                            if (confirm(`Xóa HĐ "${c.tenHopDong ?? c.maHopDong ?? 'này'}"?`)) {
+                              deleteContract.mutate(c.id)
+                            }
+                          }}
+                          disabled={!canMutate || deleteContract.isPending}
+                          title={canMutate ? 'Xóa HĐ' : 'Chỉ xóa được khi Phase = Đang soạn thảo'}
+                          className={cn(
+                            'rounded p-1 transition',
+                            canMutate
+                              ? 'text-slate-500 hover:bg-white hover:text-red-600 hover:shadow-sm'
+                              : 'cursor-not-allowed text-slate-300',
+                          )}
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </button>
+                      </div>
+                    )
+                  })()}
                 </li>
               ))}
             </ul>
diff --git a/fe-user/src/pages/contracts/ContractCreatePage.tsx b/fe-user/src/pages/contracts/ContractCreatePage.tsx
index f23383d..fadd205 100644
--- a/fe-user/src/pages/contracts/ContractCreatePage.tsx
+++ b/fe-user/src/pages/contracts/ContractCreatePage.tsx
@@ -186,32 +186,47 @@ export function ContractCreatePage() {
                     </div>
                   </button>
 
-                  {/* Action buttons — Edit + Xóa, CHỈ hiện khi Phase = DangSoanThao
-                      (state nhập liệu / điều chỉnh). Sau khi nộp lên Góp ý → ẩn cả 2.
+                  {/* Action buttons — Edit + Xóa luôn hiển thị; mờ + disabled khi
+                      Phase != DangSoanThao (BE chỉ cho update/delete khi draft).
                       Sibling không nested để click không trigger row select. */}
-                  {c.phase === ContractPhase.DangSoanThao && (
-                    <div className="absolute right-2 top-2 z-10 flex gap-0.5 opacity-0 transition group-hover:opacity-100">
-                      <button
-                        onClick={() => selectContract(c.id)}
-                        title="Chỉnh sửa HĐ"
-                        className="rounded p-1 text-slate-500 hover:bg-white hover:text-brand-600 hover:shadow-sm"
-                      >
-                        <Pencil className="h-3.5 w-3.5" />
-                      </button>
-                      <button
-                        onClick={() => {
-                          if (confirm(`Xóa HĐ "${c.tenHopDong ?? c.maHopDong ?? 'này'}"?`)) {
-                            deleteContract.mutate(c.id)
-                          }
-                        }}
-                        title="Xóa HĐ"
-                        className="rounded p-1 text-slate-500 hover:bg-white hover:text-red-600 hover:shadow-sm"
-                        disabled={deleteContract.isPending}
-                      >
-                        <Trash2 className="h-3.5 w-3.5" />
-                      </button>
-                    </div>
-                  )}
+                  {(() => {
+                    const canMutate = c.phase === ContractPhase.DangSoanThao
+                    return (
+                      <div className="absolute right-2 top-2 z-10 flex gap-0.5 opacity-60 transition group-hover:opacity-100">
+                        <button
+                          onClick={() => canMutate && selectContract(c.id)}
+                          disabled={!canMutate}
+                          title={canMutate ? 'Chỉnh sửa HĐ' : 'Chỉ sửa được khi Phase = Đang soạn thảo'}
+                          className={cn(
+                            'rounded p-1 transition',
+                            canMutate
+                              ? 'text-slate-500 hover:bg-white hover:text-brand-600 hover:shadow-sm'
+                              : 'cursor-not-allowed text-slate-300',
+                          )}
+                        >
+                          <Pencil className="h-3.5 w-3.5" />
+                        </button>
+                        <button
+                          onClick={() => {
+                            if (!canMutate) return
+                            if (confirm(`Xóa HĐ "${c.tenHopDong ?? c.maHopDong ?? 'này'}"?`)) {
+                              deleteContract.mutate(c.id)
+                            }
+                          }}
+                          disabled={!canMutate || deleteContract.isPending}
+                          title={canMutate ? 'Xóa HĐ' : 'Chỉ xóa được khi Phase = Đang soạn thảo'}
+                          className={cn(
+                            'rounded p-1 transition',
+                            canMutate
+                              ? 'text-slate-500 hover:bg-white hover:text-red-600 hover:shadow-sm'
+                              : 'cursor-not-allowed text-slate-300',
+                          )}
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </button>
+                      </div>
+                    )
+                  })()}
                 </li>
               ))}
             </ul>