fix(pos): make the per-item note obvious with an explicit button
CI/CD / CI · API (dotnet build + test) (push) Successful in 46s
CI/CD / CI · Admin API (dotnet build) (push) Successful in 30s
CI/CD / CI · Dashboard (tsc) (push) Successful in 1m9s
CI/CD / CI · Admin Web (tsc) (push) Successful in 38s
CI/CD / CI · Website (tsc) (push) Successful in 47s
CI/CD / CI · Koja (tsc) (push) Successful in 51s
CI/CD / Deploy · all services (push) Successful in 3m11s

The note control was an unlabeled icon next to the trash on each cart line, so
cashiers couldn't tell where to add a note. Replaced it with a clear
"افزودن یادداشت" (add note) text button under each item; clicking it reveals the
note input, which collapses again on blur when left empty. Existing notes still
show the editable field.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-21 22:10:29 +03:30
parent 5596e8dbc5
commit cad5ba6ea3
@@ -767,15 +767,6 @@ function Ticket({
<Plus className="size-4" />
</button>
</div>
<button
type="button"
onClick={() => setNoteFor((cur) => (cur === l.menuItem.id ? null : l.menuItem.id))}
className={`flex size-9 items-center justify-center rounded-lg hover:bg-accent active:scale-95 ${l.notes ? "text-primary" : "text-muted-foreground"}`}
aria-label="یادداشت"
title="یادداشت آیتم"
>
<StickyNote className="size-4" />
</button>
<button type="button" onClick={() => onRemove(l.menuItem.id)} className="flex size-9 items-center justify-center rounded-lg text-red-500 hover:bg-red-50" aria-label="حذف">
<Trash2 className="size-4" />
</button>
@@ -784,13 +775,22 @@ function Ticket({
<input
value={l.notes ?? ""}
onChange={(e) => onNote(l.menuItem.id, e.target.value)}
onBlur={() => { if (!l.notes) setNoteFor((cur) => (cur === l.menuItem.id ? null : cur)); }}
placeholder="یادداشت برای آشپزخانه (مثلاً بدون شکر)"
autoFocus={noteFor === l.menuItem.id}
maxLength={200}
dir="rtl"
className="mt-2 w-full rounded-lg border border-border/70 bg-background px-2.5 py-1.5 text-sm outline-none focus:border-primary"
/>
) : null}
) : (
<button
type="button"
onClick={() => setNoteFor(l.menuItem.id)}
className="mt-1.5 flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs font-medium text-primary hover:bg-primary/10"
>
<StickyNote className="size-3.5" /> افزودن یادداشت
</button>
)}
</li>
))}
</ul>