From 7f58593f047b3a78086a85d10298b42ebe9de377 Mon Sep 17 00:00:00 2001
From: ali_mohaghegh <ali.mohaghegh@bennu.ir>
Date: Thu, 3 Sep 2026 17:10:58 +0330
Subject: [PATCH] =?UTF-8?q?fix(daily-control):=20=C2=AB=D9=85=D8=A7=D9=87?=
 =?UTF-8?q?=20=D8=A8=D8=B9=D8=AF=C2=BB=20navigation=20+=20hover=20feedback?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The month-shift anchor discarded the day returned by jalaliToGregorian:
new Date(gy, gm-1, 1) instead of new Date(gy, gm-1, gd). Jalali months
start mid-Gregorian-month (مهر ۱ = 2026-09-23), so the anchor landed on
the 1st of the Gregorian month — still inside the SAME Jalali month
(شهریور ۱۰) — and «ماه بعد» appeared dead while «ماه قبل» only seemed
to work because its wrong target showed a different label. This was also
the source of the reported ~22-day date mismatches.

- shiftMonth now keeps the converted day (gy, gm, gd)
- nav buttons fire on pointerup/click/keyboard with a dedupe guard so the
  action survives browsers that swallow the click event
- buttons got hover feedback (cursor-pointer, hover:bg-slate-100,
  transition-colors)

Verified against the library math: from شهریور ۱۴۰۵, next → مهر ۱۴۰۵,
prev → مرداد ۱۴۰۵; confirmed in the deployed bundle.
---
 .../src/pages/Inventory/DailyControlPage.tsx  | 41 ++++++++++++++++---
 1 file changed, 35 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/Inventory/DailyControlPage.tsx b/frontend/src/pages/Inventory/DailyControlPage.tsx
index 73fb60c..da57d90 100644
--- a/frontend/src/pages/Inventory/DailyControlPage.tsx
+++ b/frontend/src/pages/Inventory/DailyControlPage.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Header, PageLayout } from "../../components/layout/Header";
 import { useAuthStore } from "../../store/auth";
@@ -90,11 +90,40 @@ export function DailyControlPage() {
       nm = 1;
       ny += 1;
     }
-    const [gy, gm] = jalaliToGregorian(ny, nm, 1);
-    setAnchor(new Date(gy, gm - 1, 1));
+    // روزِ برگشتی را نگه می‌داریم (ماه شمسی از میانه‌ی ماه میلادی شروع می‌شود:
+    // مثلاً مهر ۱ = ۲۳ سپتامبر). اگر به‌جای آن روز «۱» استفاده شود، لنگر در
+    // اولِ ماهِ میلادی می‌نشیند و هنوز در همان ماه شمسی است — دکمه «ماه بعد»
+    // ظاهراً هیچ کاری نمی‌کند.
+    const [gy, gm, gd] = jalaliToGregorian(ny, nm, 1);
+    setAnchor(new Date(gy, gm - 1, gd));
   };
 
   const dayTx = txByDay.get(sel) || [];
+
+  // فعال‌سازی ناوبری ماه از چند مسیر (pointerup / click / کیبورد) با حذف
+  // اجرای تکراری — اگر مرورگر رویداد click را بخورد، pointerup جواب می‌دهد.
+  const navLast = useRef<{ key: string; at: number }>({ key: "", at: 0 });
+  const navFire = (key: string, action: () => void) => {
+    const now = Date.now();
+    if (navLast.current.key === key && now - navLast.current.at < 350) return;
+    navLast.current = { key, at: now };
+    action();
+  };
+  const navBtnProps = (key: string, action: () => void) => ({
+    type: "button" as const,
+    onPointerUp: (e: React.PointerEvent) => {
+      e.preventDefault();
+      navFire(key, action);
+    },
+    onClick: () => navFire(key, action),
+    onKeyDown: (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        navFire(key, action);
+      }
+    },
+  });
+
   const withdrawals = dayTx.filter((t) => t.transaction_type === "WITHDRAWAL");
   const wGroups = useMemo(() => {
     const gmap = new Map<string, { recId: string; q: number; last: string; tx: InventoryTransaction }>();
@@ -149,9 +178,9 @@ export function DailyControlPage() {
             <div className="mb-2 flex items-center justify-between">
               <div className="text-[14px] font-bold">📅 {monthTitle}</div>
               <div className="flex gap-1.5">
-                <button className="rounded-lg border border-line px-3 py-1 text-[12px]" onClick={() => shiftMonth(-1)}>▶ ماه قبل</button>
-                <button className="rounded-lg border border-line px-3 py-1 text-[12px]" onClick={() => { setAnchor(new Date()); setSel(todayKey()); setActRec(null); }}>امروز</button>
-                <button className="rounded-lg border border-line px-3 py-1 text-[12px]" onClick={() => shiftMonth(1)}>◀ ماه بعد</button>
+                <button className="cursor-pointer rounded-lg border border-line px-3 py-1 text-[12px] transition-colors hover:bg-slate-100" {...navBtnProps("prev", () => shiftMonth(-1))}>▶ ماه قبل</button>
+                <button className="cursor-pointer rounded-lg border border-line px-3 py-1 text-[12px] transition-colors hover:bg-slate-100" {...navBtnProps("today", () => { setAnchor(new Date()); setSel(todayKey()); setActRec(null); })}>امروز</button>
+                <button className="cursor-pointer rounded-lg border border-line px-3 py-1 text-[12px] transition-colors hover:bg-slate-100" {...navBtnProps("next", () => shiftMonth(1))}>◀ ماه بعد</button>
               </div>
             </div>
             <div className="grid grid-cols-7 gap-1">