feat: redesign counting flow, fix stats and history errors, continuous scanner, houka signature, counting mode toggles, fix hesabfa stock extraction and product_id int limit

prisma/schema.prisma

@@ -59,7 +59,7 @@ model Location {
 
 model Counting {
   id           Int       @id @default(autoincrement())
-  product_id   Int
+  product_id   String
   product_name String
   warehouse    Int
   

src/app/admin/settings/page.js

@@ -147,6 +147,36 @@ export default function SettingsPage() {
             </button>
           </div>
 
+          {/* Enable Counting Modes */}
+          <div className="border-t border-gray-50 pt-8 flex flex-col gap-5">
+            <div className="flex items-center gap-2 mb-1">
+              <div className="w-8 h-8 rounded-[12px] bg-blue-50 text-blue-600 flex items-center justify-center shrink-0">
+                <Check size={16} strokeWidth={2.5} />
+              </div>
+              <h2 className="text-sm font-bold text-gray-800">حالت‌های انبارگردانی</h2>
+            </div>
+            
+            <div className="flex items-center justify-between gap-4">
+              <p className="text-xs text-gray-500 leading-relaxed font-bold">انبارگردانی قفسه‌ای</p>
+              <button 
+                onClick={() => setSettings(s => ({ ...s, enable_shelf_counting: s.enable_shelf_counting === undefined ? true : !s.enable_shelf_counting }))}
+                className={`relative inline-flex h-8 w-14 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-300 focus:outline-none ${(settings.enable_shelf_counting ?? true) ? 'bg-blue-600' : 'bg-gray-200'}`}
+              >
+                <span className={`pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow-md ring-0 transition-transform duration-300 ${(settings.enable_shelf_counting ?? true) ? '-translate-x-6' : 'translate-x-0'}`} />
+              </button>
+            </div>
+
+            <div className="flex items-center justify-between gap-4">
+              <p className="text-xs text-gray-500 leading-relaxed font-bold">انبارگردانی کالایی</p>
+              <button 
+                onClick={() => setSettings(s => ({ ...s, enable_item_counting: s.enable_item_counting === undefined ? true : !s.enable_item_counting }))}
+                className={`relative inline-flex h-8 w-14 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-300 focus:outline-none ${(settings.enable_item_counting ?? true) ? 'bg-blue-600' : 'bg-gray-200'}`}
+              >
+                <span className={`pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow-md ring-0 transition-transform duration-300 ${(settings.enable_item_counting ?? true) ? '-translate-x-6' : 'translate-x-0'}`} />
+              </button>
+            </div>
+          </div>
+
           {/* Correction Roles Setting */}
           <div>
             <div className="flex items-center gap-2 mb-2">

src/app/admin/stats/page.js

@@ -11,7 +11,11 @@ export default function AdminStats() {
     fetch('/api/admin/stats')
       .then(res => res.json())
       .then(data => {
-        setStats(data);
+        if (Array.isArray(data)) {
+          setStats(data);
+        } else {
+          setStats([]);
+        }
         setLoading(false);
       });
   }, []);

src/app/api/counting/route.js

@@ -13,9 +13,9 @@ export async function POST(req) {
       });
     }
     
-    const count = await prisma.counting.create({
+      const count = await prisma.counting.create({
-      data: {
+        data: {
-        product_id: Number(data.product_id),
+          product_id: String(data.product_id),
         product_name: data.product_name,
         warehouse: Number(data.warehouse),
         shelfCode: data.shelfCode ? data.shelfCode.toUpperCase() : null,
@@ -43,7 +43,7 @@ export async function GET(req) {
   try {
     if (productId && warehouse) {
       const lastCount = await prisma.counting.findFirst({
-        where: { product_id: Number(productId), warehouse: Number(warehouse) },
+        where: { product_id: String(productId), warehouse: Number(warehouse) },
         orderBy: { createdAt: 'desc' }
       });
       return NextResponse.json(lastCount || { message: -1 });

src/app/api/reports/uncounted/route.js

@@ -16,7 +16,7 @@ export async function GET(req) {
     });
     
     // Get distinct product IDs that were counted
-    const countedProductIds = new Set(countings.map(c => Number(c.product_id)));
+    const countedProductIds = new Set(countings.map(c => String(c.product_id)));
 
     // 2. Fetch all products from Hesabfa
     const res = await axios.post('https://api.hesabfa.com/v1/item/getitems', {
@@ -31,7 +31,7 @@ export async function GET(req) {
     // 3. Filter items that have Stock > 0 but are not in countedProductIds
     const uncounted = hesabfaItems.filter(item => {
       // Check if not counted
-      if (countedProductIds.has(item.Code)) return false;
+      if (countedProductIds.has(String(item.Code))) return false;
       
       // Check if it has stock (assuming item.Stock or finding via another property, some accounts use item.Stock)
       // Since getitems might not return Stock per warehouse, we assume if Stock > 0 it should have been counted.

src/app/counting/item/page.js

@@ -1,8 +1,8 @@
 'use client';
-import { useState, useEffect, Suspense } from 'react';
+import { useState, useEffect, Suspense, useRef } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import Header from '@/components/Header';
-import { Box, Layers, CheckCircle2, ScanLine, X, AlertCircle } from 'lucide-react';
+import { ScanLine, Search, Check, Box, Layers, AlertCircle, X, History } from 'lucide-react';
 import { hasRole } from '@/lib/auth';
 import { saveCountOffline, syncOfflineCounts } from '@/lib/offlineSync';
 import dynamic from 'next/dynamic';
@@ -13,18 +13,19 @@ const Scanner = dynamic(() => import('@yudiel/react-qr-scanner').then(mod => mod
 function ItemCountingContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const code = searchParams.get('code');
+  const product_id = searchParams.get('product_id');
   const warehouse = searchParams.get('warehouse');
 
   const [user, setUser] = useState(null);
   const [settings, setSettings] = useState({});
   const [loading, setLoading] = useState(true);
 
+  // We fetch product details based on product_id from query
   const [productName, setProductName] = useState('');
   const [oldCount, setOldCount] = useState(null);
-  
-  const [shelfCode, setShelfCode] = useState('');
   const [newCount, setNewCount] = useState('');
+  const [shelfCode, setShelfCode] = useState('');
+  
   const [submitLoading, setSubmitLoading] = useState(false);
   const [history, setHistory] = useState([]);
   
@@ -32,44 +33,69 @@ function ItemCountingContent() {
   const [camError, setCamError] = useState('');
   const [errorMsg, setErrorMsg] = useState('');
 
+  const inputRef = useRef(null);
+
   useEffect(() => {
     const userData = localStorage.getItem('user');
     if (userData) setUser(JSON.parse(userData));
-    fetchSettingsAndData();
+    fetchSettings();
+    fetchInitialItemData();
 
     window.addEventListener('online', syncOfflineCounts);
     return () => window.removeEventListener('online', syncOfflineCounts);
-  }, [code, warehouse]);
+  }, []);
 
-  const fetchSettingsAndData = async () => {
+  const fetchSettings = async () => {
     try {
-      const setRes = await fetch('/api/settings');
+      const res = await fetch('/api/settings');
-      if (setRes.ok) {
+      if (res.ok) setSettings(await res.json());
-        const data = await setRes.json();
+    } catch (e) {}
-        setSettings(data);
+  };
+
+  const fetchInitialItemData = async () => {
+    if (!product_id) {
+      router.push('/dashboard');
+      return;
+    }
+    
+    try {
+      const nameRes = await fetch('/api/hesabfa', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ code: product_id, type: 'name' })
+      });
+      const nameData = await nameRes.json();
+      
+      if (!nameData?.Result?.Name || nameData?.Result?.Name === 'نامشخص') {
+        setErrorMsg('کالا یافت نشد.');
+      } else {
+        setProductName(nameData.Result.Name);
       }
 
-      if (code) {
+      const qRes = await fetch('/api/hesabfa', {
-        const nameRes = await fetch('/api/hesabfa', {
+        method: 'POST',
-          method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
-          headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ code: product_id, type: 'quantity' })
-          body: JSON.stringify({ code, type: 'name' })
+      });
-        });
+      const qData = await qRes.json();
-        const nameData = await nameRes.json();
+      const productInfo = qData?.Result?.[0];
-        setProductName(nameData?.Result?.Name || 'نامشخص');
+      
-
+      let foundStock = 0;
-        const qRes = await fetch('/api/hesabfa', {
+      if (productInfo) {
-          method: 'POST',
+         if (productInfo.StockByWarehouse && Array.isArray(productInfo.StockByWarehouse)) {
-          headers: { 'Content-Type': 'application/json' },
+            const wInfo = productInfo.StockByWarehouse.find(w => w.WarehouseCode === Number(warehouse) || w.Code === Number(warehouse));
-          body: JSON.stringify({ code, type: 'quantity' })
+            if (wInfo) foundStock = wInfo.Stock || wInfo.Quantity || 0;
-        });
+            else foundStock = productInfo.Stock || productInfo.Quantity || 0;
-        const qData = await qRes.json();
+         } else if (productInfo.Warehouse && Array.isArray(productInfo.Warehouse)) {
-        const productInfo = qData?.Result?.[0];
+            const wInfo = productInfo.Warehouse.find(w => w.Code === Number(warehouse));
-        const wInfo = productInfo?.Warehouse?.find(w => w.Code === Number(warehouse));
+            foundStock = wInfo?.Quantity ?? productInfo.Stock ?? productInfo.Quantity ?? 0;
-        setOldCount(wInfo?.Quantity ?? 0);
+         } else {
+            foundStock = productInfo.Stock ?? productInfo.Quantity ?? 0;
+         }
       }
-    } catch (e) {
+      setOldCount(foundStock);
-      console.error(e);
+    } catch (error) {
+      setErrorMsg('خطا در دریافت اطلاعات کالا از سرور');
     } finally {
       setLoading(false);
     }
@@ -78,61 +104,44 @@ function ItemCountingContent() {
   const handleScan = (detectedCodes) => {
     if (detectedCodes && detectedCodes.length > 0) {
       const scannedValue = detectedCodes[0].rawValue;
-      setShelfCode(scannedValue.toUpperCase());
+      // We do not close the camera!
-      setCameraEnabled(false);
+      setShelfCode(scannedValue);
-      setErrorMsg('');
+      setCamError('');
+      if (inputRef.current) setTimeout(() => inputRef.current.focus(), 100);
     }
   };
 
   const handleError = (error) => {
     const msg = error?.message || error?.name || '';
-    if (msg.includes('Requested device not found')) {
+    if (msg.includes('Requested device not found')) setCamError('دوربینی یافت نشد.');
-      setCamError('دوربینی یافت نشد.');
+    else setCamError('خطا در دسترسی به دوربین.');
-    } else {
-      setCamError('خطا در دسترسی به دوربین.');
-    }
   };
 
-  const validateShelfAndSubmit = async () => {
+  const handleSubmitShelf = async () => {
-    setErrorMsg('');
     if (!shelfCode) {
-      setErrorMsg('لطفاً کد قفسه را وارد یا اسکن کنید');
+      setErrorMsg('کد قفسه را وارد یا اسکن کنید');
       return;
     }
     if (newCount === '' || newCount === null) {
-      setErrorMsg('لطفاً تعداد را وارد کنید');
+      setErrorMsg('تعداد را وارد کنید');
       return;
     }
     
     setSubmitLoading(true);
+    setErrorMsg('');
+    
+    const payload = {
+      product_id: String(product_id),
+      product_name: productName,
+      warehouse: Number(warehouse),
+      shelfCode: shelfCode.toUpperCase(),
+      old_count: oldCount || 0,
+      new_count: Number(newCount),
+      user_id: user?.id,
+      mode: 'ITEM'
+    };
 
     try {
-      // 1. Validate shelf
-      const valRes = await fetch('/api/locations/validate', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ code: shelfCode.toUpperCase(), warehouse })
-      });
-      const valData = await valRes.json();
-      
-      if (!valRes.ok) {
-        setErrorMsg(valData.error || 'قفسه نامعتبر است');
-        setSubmitLoading(false);
-        return;
-      }
-
-      // 2. Submit count
-      const payload = {
-        product_id: code,
-        product_name: productName,
-        warehouse,
-        shelfCode: shelfCode.toUpperCase(),
-        old_count: oldCount || 0,
-        new_count: Number(newCount),
-        user_id: user?.id,
-        mode: 'ITEM'
-      };
-
       const res = await fetch('/api/counting', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -143,23 +152,14 @@ function ItemCountingContent() {
         setHistory([{ shelf: shelfCode.toUpperCase(), count: newCount }, ...history]);
         setShelfCode('');
         setNewCount('');
+        setErrorMsg('');
       } else {
-        setErrorMsg('خطا در ثبت شمارش در سرور');
+        const data = await res.json();
+        setErrorMsg(data.error || 'خطا در ثبت اطلاعات در سرور');
       }
     } catch (err) {
-      // 3. Fallback offline
-      const payload = {
-        product_id: code,
-        product_name: productName,
-        warehouse,
-        shelfCode: shelfCode.toUpperCase(),
-        old_count: oldCount || 0,
-        new_count: Number(newCount),
-        user_id: user?.id,
-        mode: 'ITEM'
-      };
       await saveCountOffline(payload);
-      alert('ارتباط با سرور قطع است. اطلاعات موقتاً در گوشی شما ذخیره شد.');
+      alert('ارتباط با سرور قطع است. اطلاعات ذخیره شد.');
       setHistory([{ shelf: shelfCode.toUpperCase(), count: newCount, offline: true }, ...history]);
       setShelfCode('');
       setNewCount('');
@@ -176,18 +176,14 @@ function ItemCountingContent() {
       await fetch('/api/counting/cancel', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ product_id: code, warehouse, userId: user?.id, reason, mode: 'ITEM' })
+        body: JSON.stringify({ product_id, warehouse, userId: user?.id, reason, mode: 'ITEM' })
       });
       router.push('/dashboard');
     } catch (error) {
-      alert('خطا در لغو انبارگردانی کالا');
+      alert('خطا در ارتباط با سرور');
     }
   };
 
-  const handleFinish = () => {
-    router.push('/dashboard');
-  };
-
   const isBlind = settings?.blind_counting && !hasRole(user?.roles, ['ADMIN', 'SUPERVISOR']);
 
   if (loading) {
@@ -205,148 +201,151 @@ function ItemCountingContent() {
     <div className="w-full min-h-screen bg-gray-50 flex flex-col pb-24 relative overflow-x-hidden">
       <Header title="انبارگردانی کالا" showBack={true} />
       
-      {/* Top Banner */}
+      {/* Top Fixed Info Bar */}
-      <div className="bg-gray-900 text-white px-5 py-4 shadow-md flex items-center gap-4">
+      <div className="bg-white border-b border-gray-200 px-5 py-3 flex items-center justify-between sticky top-0 z-40 shadow-sm">
-        <div className="w-12 h-12 bg-white/10 rounded-2xl flex items-center justify-center shrink-0">
+        <div className="flex items-center gap-3">
-          <Box size={24} />
+          <div className="w-10 h-10 bg-teal-50 text-teal-600 rounded-[14px] flex items-center justify-center font-black">
-        </div>
+            <Box size={20} />
-        <div className="flex-1">
-          <h2 className="text-sm font-bold leading-snug">{productName}</h2>
-          <p className="text-xs text-gray-400 mt-1 font-medium tracking-wider dir-ltr text-right">کد: {code}</p>
-        </div>
-        {!isBlind && oldCount !== null && (
-          <div className="bg-white/10 px-3 py-2 rounded-xl flex flex-col items-center shrink-0 border border-white/5">
-            <span className="text-sm font-black text-indigo-300">{oldCount}</span>
-            <span className="text-[10px] text-gray-300 font-bold">موجودی سیستم</span>
           </div>
-        )}
+          <div className="flex flex-col">
+            <span className="text-[10px] text-gray-400 font-bold tracking-wider line-clamp-1 w-32">{productName}</span>
+            <span className="text-xs font-black text-gray-800">آماده ثبت قفسه</span>
+          </div>
+        </div>
+        
+        <div className="flex items-center gap-2">
+          <button 
+            onClick={handleCancelItem}
+            className="w-10 h-10 flex items-center justify-center bg-red-50 text-red-500 rounded-[14px] transition-colors"
+          >
+            <X size={18} strokeWidth={2.5} />
+          </button>
+          <button 
+            onClick={() => router.push('/dashboard')}
+            className="bg-gray-900 hover:bg-gray-800 text-white text-xs font-black py-2.5 px-4 rounded-[14px] transition-colors flex items-center gap-2"
+          >
+            <Check size={14} strokeWidth={3} />
+            پایان کالا
+          </button>
+        </div>
       </div>
 
-      <div className="flex-1 p-4 md:p-6 max-w-md mx-auto w-full flex flex-col gap-6 mt-2">
+      <div className="flex-1 p-4 flex flex-col gap-5 max-w-md mx-auto w-full mt-2">
         
-        {/* Input Form */}
+        {!isBlind && oldCount !== null && (
-        <div className="bg-white rounded-[24px] p-5 shadow-sm border border-gray-100 flex flex-col gap-4 relative overflow-hidden">
+          <div className="bg-white rounded-[20px] p-4 shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-gray-100 flex items-center justify-between">
-          <div className="absolute top-0 right-0 w-16 h-16 bg-indigo-50/50 rounded-bl-full -z-0"></div>
+            <span className="text-sm font-bold text-gray-500">موجودی کل در سیستم:</span>
-          
+            <span className="text-xl font-black text-teal-600">{oldCount}</span>
-          <h3 className="text-sm font-bold text-gray-800 relative z-10 flex items-center gap-2">
+          </div>
-            <CheckCircle2 className="text-indigo-600" size={18} />
+        )}
-            ثبت شمارش در قفسه
-          </h3>
-          
-          {errorMsg && (
-            <div className="bg-red-50 border border-red-100 text-red-600 px-4 py-3 rounded-2xl text-xs font-bold flex items-center gap-2">
-              <AlertCircle size={14} />
-              {errorMsg}
-            </div>
-          )}
-          
-          <div className="flex flex-col gap-3 relative z-10">
-            <div className="flex gap-2">
-              <input 
-                type="text" 
-                dir="ltr"
-                value={shelfCode}
-                onChange={(e) => { setShelfCode(e.target.value); setErrorMsg(''); }}
-                placeholder="مثال: C-1"
-                className="flex-1 py-3.5 bg-gray-50 border border-gray-200 rounded-[16px] text-center text-lg font-black text-gray-800 uppercase focus:outline-none focus:border-indigo-500 focus:bg-white transition-all placeholder:text-sm placeholder:font-normal placeholder:text-gray-400"
-              />
-              <motion.button 
-                whileTap={{ scale: 0.95 }}
-                onClick={() => setCameraEnabled(true)}
-                className="w-14 bg-indigo-50 text-indigo-600 rounded-[16px] flex items-center justify-center shrink-0 hover:bg-indigo-100 transition-colors border border-indigo-100"
-              >
-                <ScanLine size={20} strokeWidth={2.5} />
-              </motion.button>
-            </div>
-            
-            <AnimatePresence>
-              {cameraEnabled && (
-                <motion.div 
-                  initial={{ height: 0, opacity: 0 }}
-                  animate={{ height: 'auto', opacity: 1 }}
-                  exit={{ height: 0, opacity: 0 }}
-                  className="w-full aspect-video relative flex flex-col items-center justify-center bg-black overflow-hidden rounded-[16px]"
-                >
-                  {camError ? (
-                    <div className="text-red-400 text-xs p-4 text-center font-medium">{camError}</div>
-                  ) : (
-                    <div className="w-full h-full [&>div]:!object-cover [&>div>video]:!object-cover">
-                      <Scanner onScan={handleScan} onError={handleError} />
-                    </div>
-                  )}
-                  <button 
-                    onClick={() => { setCameraEnabled(false); setCamError(''); }}
-                    className="absolute top-2 right-2 bg-white/20 backdrop-blur-md p-1.5 rounded-full text-white pointer-events-auto"
-                  >
-                    <X size={16} strokeWidth={3} />
-                  </button>
-                </motion.div>
-              )}
-            </AnimatePresence>
 
+        {/* Continuous Scanner Area for Shelf */}
+        <div className="bg-white rounded-[24px] p-2 shadow-sm border border-gray-100 flex flex-col relative overflow-hidden">
+          <div className="w-full aspect-video relative flex items-center justify-center bg-gray-900 rounded-[20px] overflow-hidden">
+            {camError ? (
+              <div className="text-red-400 text-xs p-4 text-center font-medium">{camError}</div>
+            ) : cameraEnabled ? (
+              <>
+                <div className="w-full h-full opacity-80 [&>div]:!object-cover [&>div>video]:!object-cover">
+                  <Scanner onScan={handleScan} onError={handleError} />
+                </div>
+                {/* Scanner Overlay UI */}
+                <div className="absolute inset-0 pointer-events-none border-[3px] border-teal-500/30 m-4 rounded-[16px]">
+                  <div className="absolute top-1/2 left-0 w-full h-[2px] bg-red-500/50 shadow-[0_0_10px_rgba(239,68,68,0.8)]"></div>
+                </div>
+              </>
+            ) : (
+              <button onClick={() => setCameraEnabled(true)} className="flex flex-col items-center gap-2 text-gray-400">
+                <ScanLine size={32} />
+                <span className="text-xs font-bold">فعال‌سازی مجدد دوربین</span>
+              </button>
+            )}
+          </div>
+          
+          <div className="flex items-center gap-2 mt-3 px-2 pb-2">
             <input 
+              type="text" 
+              dir="ltr"
+              value={shelfCode}
+              onChange={(e) => { setShelfCode(e.target.value); setErrorMsg(''); }}
+              placeholder="کد قفسه..."
+              className="flex-1 bg-gray-50 border border-gray-200 rounded-[14px] px-4 py-3 text-sm font-bold text-gray-800 uppercase focus:outline-none focus:border-teal-500 text-center placeholder:font-normal placeholder:normal-case"
+            />
+          </div>
+        </div>
+
+        {/* Error Message */}
+        <AnimatePresence>
+          {errorMsg && (
+            <motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} exit={{ opacity: 0, height: 0 }} className="bg-red-50 border border-red-100 text-red-600 px-4 py-3 rounded-[16px] text-xs font-bold flex items-center gap-2">
+              <AlertCircle size={16} className="shrink-0" />
+              {errorMsg}
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        {/* Count Input Box */}
+        <div className="bg-white rounded-[24px] p-5 shadow-[0_8px_30px_rgb(0,0,0,0.06)] border border-teal-50 flex flex-col gap-4 relative overflow-hidden">
+          <div className="absolute top-0 right-0 w-32 h-32 bg-teal-500/5 rounded-bl-full -z-0"></div>
+          
+          <div className="flex flex-col gap-1 relative z-10">
+            <h3 className="font-black text-gray-800 text-sm flex items-center gap-2">
+              <Layers size={18} className="text-teal-600" />
+              ثبت موجودی در قفسه {shelfCode ? `«${shelfCode.toUpperCase()}»` : ''}
+            </h3>
+          </div>
+
+          <div className="flex flex-col gap-3 relative z-10 mt-2">
+            <input 
+              ref={inputRef}
               type="number" 
               dir="ltr"
               value={newCount}
               onChange={(e) => { setNewCount(e.target.value); setErrorMsg(''); }}
-              placeholder="تعداد یافت شده در این قفسه..."
+              placeholder="0"
-              className="w-full border-2 border-gray-200 bg-white rounded-[16px] p-4 text-center text-2xl font-black text-gray-800 focus:outline-none focus:border-indigo-500 transition-all placeholder:text-sm placeholder:font-medium placeholder:text-gray-300"
+              className="w-full bg-gray-50 border-2 border-gray-200 rounded-[16px] p-4 text-center text-3xl font-black text-gray-900 focus:outline-none focus:border-teal-500 focus:bg-white transition-all placeholder:text-gray-300"
             />
-            
             <button 
-              onClick={validateShelfAndSubmit}
+              onClick={handleSubmitShelf}
               disabled={submitLoading || !newCount || !shelfCode}
-              className="w-full bg-indigo-600 text-white p-4 rounded-[16px] shadow-md shadow-indigo-600/20 hover:bg-indigo-700 transition-all disabled:opacity-50 text-sm font-black flex items-center justify-center gap-2 mt-1"
+              className="w-full bg-teal-600 text-white py-4 rounded-[16px] shadow-md hover:bg-teal-700 transition-all disabled:opacity-50 text-sm font-black flex items-center justify-center gap-2"
             >
               {submitLoading ? (
                 <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
               ) : (
-                <>ثبت قفسه و تعداد</>
+                <>ثبت شمارش</>
               )}
             </button>
           </div>
         </div>
 
-        {/* History of this item in different shelves */}
+        {/* History of this session */}
         {history.length > 0 && (
-          <div className="flex flex-col gap-3 mt-2">
+          <div className="flex flex-col gap-3 mt-4">
-            <h3 className="text-xs font-black text-gray-400 uppercase tracking-wider px-2">مکان‌های ثبت شده شما</h3>
+            <h3 className="text-xs font-black text-gray-400 flex items-center gap-2 px-2">
-            <div className="flex flex-col gap-3">
+              <History size={14} />
+              قفسه‌های شمارش شده برای این کالا
+            </h3>
+            <div className="flex flex-col gap-2">
               {history.map((item, idx) => (
-                <div key={idx} className="flex justify-between items-center bg-white p-4 rounded-[20px] shadow-sm border border-gray-100">
+                <div key={idx} className="flex justify-between items-center bg-white p-3 rounded-[16px] border border-gray-100 relative overflow-hidden">
+                  {item.offline && <div className="absolute left-0 top-0 bottom-0 w-1 bg-yellow-400"></div>}
                   <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 bg-gray-50 rounded-xl flex items-center justify-center">
+                    <div className="w-8 h-8 bg-green-50 rounded-[10px] flex items-center justify-center text-green-500 shrink-0">
-                      <Layers size={18} className="text-gray-400" />
+                      <Check size={16} strokeWidth={3} />
                     </div>
                     <div className="flex flex-col">
-                      <span className="text-sm font-black text-gray-800 uppercase tracking-widest">{item.shelf}</span>
+                      <p className="text-xs font-bold text-gray-800 tracking-widest uppercase">{item.shelf}</p>
-                      {item.offline && <span className="text-[10px] text-yellow-600 font-bold mt-0.5">ثبت آفلاین</span>}
                     </div>
                   </div>
-                  <div className="flex flex-col items-end">
+                  <div className="flex items-center gap-1 bg-gray-50 px-3 py-1.5 rounded-xl border border-gray-100">
-                    <span className="text-[10px] font-bold text-gray-400 mb-0.5">شمارش شده</span>
+                    <span className="text-sm font-black text-gray-800">{item.count}</span>
-                    <span className="text-lg font-black text-indigo-600">{item.count}</span>
                   </div>
                 </div>
               ))}
             </div>
           </div>
         )}
-        
-        <div className="flex items-center gap-2 mt-2">
-          <button 
-            onClick={handleCancelItem}
-            className="flex-1 py-4 bg-red-50 border border-red-100 text-red-500 text-sm font-extrabold rounded-[20px] transition-all hover:bg-red-100 shadow-sm"
-          >
-            لغو انبارگردانی
-          </button>
-          <button 
-            onClick={handleFinish}
-            className="flex-[2] py-4 bg-white border border-gray-200 text-gray-600 text-sm font-extrabold rounded-[20px] transition-all hover:bg-gray-50 hover:text-gray-900 shadow-sm"
-          >
-            پایان کار با این کالا
-          </button>
-        </div>
 
       </div>
     </div>

src/app/counting/shelf/page.js

@@ -1,8 +1,8 @@
 'use client';
-import { useState, useEffect, Suspense } from 'react';
+import { useState, useEffect, Suspense, useRef } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import Header from '@/components/Header';
-import { Lock, Unlock, ScanLine, Search, Check, Box, Layers, AlertCircle, X } from 'lucide-react';
+import { Lock, Unlock, ScanLine, Search, Check, Box, Layers, AlertCircle, X, History } from 'lucide-react';
 import { hasRole } from '@/lib/auth';
 import { saveCountOffline, syncOfflineCounts } from '@/lib/offlineSync';
 import dynamic from 'next/dynamic';
@@ -20,7 +20,6 @@ function ShelfCountingContent() {
   const [settings, setSettings] = useState({});
   const [loading, setLoading] = useState(true);
 
-  // Item scanning state
   const [productCode, setProductCode] = useState('');
   const [productName, setProductName] = useState('');
   const [oldCount, setOldCount] = useState(null);
@@ -33,8 +32,9 @@ function ShelfCountingContent() {
   const [cameraEnabled, setCameraEnabled] = useState(true);
   const [camError, setCamError] = useState('');
 
-  // History of scanned items in this session
   const [history, setHistory] = useState([]);
+  
+  const inputRef = useRef(null);
 
   useEffect(() => {
     const userData = localStorage.getItem('user');
@@ -52,11 +52,7 @@ function ShelfCountingContent() {
         const data = await res.json();
         setSettings(data);
       }
-    } catch (e) {
+    } catch (e) {} finally { setLoading(false); }
-      console.error(e);
-    } finally {
-      setLoading(false);
-    }
   };
 
   const handleFinishShelf = async () => {
@@ -76,7 +72,7 @@ function ShelfCountingContent() {
   const fetchItemData = async (codeToFetch) => {
     const code = codeToFetch || productCode;
     if (!code) {
-      setErrorMsg('کد کالا را وارد کنید');
+      setErrorMsg('لطفاً کد کالا را وارد کنید');
       return;
     }
     
@@ -85,6 +81,7 @@ function ShelfCountingContent() {
     setProductName('');
     setOldCount(null);
     setNewCount('');
+    setProductCode(code);
     
     try {
       const nameRes = await fetch('/api/hesabfa', {
@@ -95,7 +92,7 @@ function ShelfCountingContent() {
       const nameData = await nameRes.json();
       
       if (!nameData?.Result?.Name || nameData?.Result?.Name === 'نامشخص' || nameData.error) {
-        setErrorMsg('کالایی با این کد در حسابفا یافت نشد.');
+        setErrorMsg(`کالایی با کد ${code} در حسابفا یافت نشد.`);
         setItemLoading(false);
         return;
       }
@@ -109,22 +106,33 @@ function ShelfCountingContent() {
       });
       const qData = await qRes.json();
       const productInfo = qData?.Result?.[0];
-      const wInfo = productInfo?.Warehouse?.find(w => w.Code === Number(warehouse));
+      
-      setOldCount(wInfo?.Quantity ?? 0);
+      let foundStock = 0;
+      if (productInfo) {
+         if (productInfo.StockByWarehouse && Array.isArray(productInfo.StockByWarehouse)) {
+            const wInfo = productInfo.StockByWarehouse.find(w => w.WarehouseCode === Number(warehouse) || w.Code === Number(warehouse));
+            if (wInfo) foundStock = wInfo.Stock || wInfo.Quantity || 0;
+            else foundStock = productInfo.Stock || productInfo.Quantity || 0;
+         } else if (productInfo.Warehouse && Array.isArray(productInfo.Warehouse)) {
+            const wInfo = productInfo.Warehouse.find(w => w.Code === Number(warehouse));
+            foundStock = wInfo?.Quantity ?? productInfo.Stock ?? productInfo.Quantity ?? 0;
+         } else {
+            foundStock = productInfo.Stock ?? productInfo.Quantity ?? 0;
+         }
+      }
+      setOldCount(foundStock);
+      
+      if (inputRef.current) {
+        setTimeout(() => inputRef.current.focus(), 100);
+      }
     } catch (error) {
       console.error(error);
-      setErrorMsg('خطا در ارتباط با حسابفا');
+      setErrorMsg('خطا در ارتباط با حسابفا. لطفاً دوباره تلاش کنید.');
     } finally {
       setItemLoading(false);
     }
   };
 
-  const handleProductCodeChange = (e) => {
-    setProductCode(e.target.value);
-    setErrorMsg('');
-    setProductName('');
-  };
-
   const handleProductCodeKeyDown = (e) => {
     if (e.key === 'Enter') {
       fetchItemData();
@@ -134,20 +142,18 @@ function ShelfCountingContent() {
   const handleScan = (detectedCodes) => {
     if (detectedCodes && detectedCodes.length > 0) {
       const scannedValue = detectedCodes[0].rawValue;
-      setProductCode(scannedValue);
+      // We DO NOT turn off the camera. Just fetch!
-      setCameraEnabled(false);
       setCamError('');
-      fetchItemData(scannedValue);
+      if (scannedValue !== productCode) {
+        fetchItemData(scannedValue);
+      }
     }
   };
 
   const handleError = (error) => {
     const msg = error?.message || error?.name || '';
-    if (msg.includes('Requested device not found')) {
+    if (msg.includes('Requested device not found')) setCamError('دوربینی یافت نشد.');
-      setCamError('دوربینی یافت نشد.');
+    else setCamError('خطا در دسترسی به دوربین.');
-    } else {
-      setCamError('خطا در دسترسی به دوربین.');
-    }
   };
 
   const handleSubmitItem = async () => {
@@ -163,9 +169,9 @@ function ShelfCountingContent() {
     setSubmitLoading(true);
     
     const payload = {
-      product_id: productCode,
+      product_id: String(productCode),
       product_name: productName,
-      warehouse,
+      warehouse: Number(warehouse),
       shelfCode: shelfCode.toUpperCase(),
       old_count: oldCount || 0,
       new_count: Number(newCount),
@@ -188,12 +194,11 @@ function ShelfCountingContent() {
         setNewCount('');
         setErrorMsg('');
       } else {
-        setErrorMsg('خطا در ثبت شمارش کالا در سرور');
+        setErrorMsg('خطا در ثبت شمارش در سرور');
       }
     } catch (err) {
-      // Network error (offline or server down)
       await saveCountOffline(payload);
-      alert('ارتباط با سرور قطع است. اطلاعات در گوشی شما ذخیره شد و به محض اتصال ارسال می‌شود.');
+      alert('ارتباط با سرور قطع است. شمارش ذخیره شد و پس از اتصال ارسال می‌شود.');
       setHistory([{ code: productCode, name: productName, count: newCount, offline: true }, ...history]);
       setProductCode('');
       setProductName('');
@@ -238,184 +243,161 @@ function ShelfCountingContent() {
     <div className="w-full min-h-screen bg-gray-50 flex flex-col pb-24 relative overflow-x-hidden">
       <Header title="انبارگردانی قفسه" showBack={true} />
       
-      {/* Top Banner */}
+      {/* Top Fixed Info Bar */}
-      <div className="bg-indigo-600 text-white px-5 py-4 flex items-center justify-between shadow-md">
+      <div className="bg-white border-b border-gray-200 px-5 py-3 flex items-center justify-between sticky top-0 z-40 shadow-sm">
         <div className="flex items-center gap-3">
-          <div className="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center">
+          <div className="w-10 h-10 bg-indigo-50 text-indigo-600 rounded-[14px] flex items-center justify-center font-black">
-            <Layers size={20} />
+            {shelfCode}
           </div>
           <div className="flex flex-col">
-            <span className="text-[10px] text-indigo-200 font-bold mb-0.5 tracking-wider">در حال شمارش قفسه</span>
+            <span className="text-[10px] text-gray-400 font-bold tracking-wider">قفسه جاری</span>
-            <span className="text-xl font-black tracking-widest uppercase">{shelfCode}</span>
+            <span className="text-xs font-black text-gray-800">آماده اسکن کالای بعدی</span>
           </div>
         </div>
         
         <div className="flex items-center gap-2">
           <button 
             onClick={handleCancelShelf}
-            className="bg-red-500/20 hover:bg-red-500/40 text-red-100 text-xs font-black py-2.5 px-3 rounded-[14px] transition-colors flex items-center gap-1 backdrop-blur-sm"
+            className="w-10 h-10 flex items-center justify-center bg-red-50 text-red-500 rounded-[14px] transition-colors"
           >
-            <X size={14} strokeWidth={3} />
+            <X size={18} strokeWidth={2.5} />
-            لغو
           </button>
           <button 
             onClick={handleFinishShelf}
-            className="bg-white/20 hover:bg-white/30 text-white text-xs font-black py-2.5 px-4 rounded-[14px] transition-colors flex items-center gap-2 backdrop-blur-sm shadow-sm"
+            className="bg-gray-900 hover:bg-gray-800 text-white text-xs font-black py-2.5 px-4 rounded-[14px] transition-colors flex items-center gap-2"
           >
-            <Unlock size={14} strokeWidth={3} />
+            <Check size={14} strokeWidth={3} />
             پایان قفسه
           </button>
         </div>
       </div>
 
-      <div className="flex-1 p-4 md:p-6 max-w-md mx-auto w-full flex flex-col gap-6 mt-2">
+      <div className="flex-1 p-4 flex flex-col gap-5 max-w-md mx-auto w-full mt-2">
         
-        {/* Scanner Form */}
+        {/* Continuous Scanner Area */}
-        <div className="bg-white rounded-[24px] p-5 shadow-sm border border-gray-100 flex flex-col gap-4 relative overflow-hidden">
+        <div className="bg-white rounded-[24px] p-2 shadow-sm border border-gray-100 flex flex-col relative overflow-hidden">
-          <div className="absolute top-0 left-0 w-16 h-16 bg-blue-50/50 rounded-br-full -z-0"></div>
+          <div className="w-full aspect-video relative flex items-center justify-center bg-gray-900 rounded-[20px] overflow-hidden">
+            {camError ? (
+              <div className="text-red-400 text-xs p-4 text-center font-medium">{camError}</div>
+            ) : cameraEnabled ? (
+              <>
+                <div className="w-full h-full opacity-80 [&>div]:!object-cover [&>div>video]:!object-cover">
+                  <Scanner onScan={handleScan} onError={handleError} />
+                </div>
+                {/* Scanner Overlay UI */}
+                <div className="absolute inset-0 pointer-events-none border-[3px] border-indigo-500/30 m-4 rounded-[16px]">
+                  <div className="absolute top-1/2 left-0 w-full h-[2px] bg-red-500/50 shadow-[0_0_10px_rgba(239,68,68,0.8)]"></div>
+                </div>
+              </>
+            ) : (
+              <button onClick={() => setCameraEnabled(true)} className="flex flex-col items-center gap-2 text-gray-400">
+                <ScanLine size={32} />
+                <span className="text-xs font-bold">فعال‌سازی مجدد دوربین</span>
+              </button>
+            )}
+          </div>
           
-          <h3 className="text-sm font-bold text-gray-800 relative z-10 flex items-center gap-2">
+          <div className="flex items-center gap-2 mt-3 px-2 pb-2">
-            <ScanLine className="text-indigo-600" size={18} />
+            <input 
-            اسکن کالای جدید در این قفسه
+              type="text" 
-          </h3>
+              dir="ltr"
-
+              value={productCode}
-          {errorMsg && (
+              onChange={(e) => { setProductCode(e.target.value); setErrorMsg(''); setProductName(''); }}
-            <div className="bg-red-50 border border-red-100 text-red-600 px-4 py-3 rounded-2xl text-xs font-bold flex items-center gap-2 relative z-10">
+              onKeyDown={handleProductCodeKeyDown}
-              <AlertCircle size={14} className="shrink-0" />
+              placeholder="یا بارکد را اینجا تایپ کنید..."
-              {errorMsg}
+              className="flex-1 bg-gray-50 border border-gray-200 rounded-[14px] px-4 py-3 text-sm font-bold text-gray-800 focus:outline-none focus:border-indigo-500 text-center placeholder:font-normal"
-            </div>
+            />
-          )}
+            <button 
-          
+              onClick={() => fetchItemData()}
-          <div className="flex flex-col gap-3 relative z-10">
+              disabled={itemLoading || !productCode}
-            <div className="flex gap-2">
+              className="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-[14px] flex items-center justify-center shrink-0 hover:bg-indigo-100 transition-colors border border-indigo-100 disabled:opacity-50"
-              <input 
+            >
-                type="number" 
+              {itemLoading ? <div className="w-4 h-4 border-2 border-indigo-600/30 border-t-indigo-600 rounded-full animate-spin"></div> : <Search size={18} strokeWidth={2.5} />}
-                dir="ltr"
+            </button>
-                value={productCode}
-                onChange={handleProductCodeChange}
-                onKeyDown={handleProductCodeKeyDown}
-                placeholder="بارکد یا کد کالا..."
-                className="flex-1 bg-gray-50 border border-gray-200 rounded-[16px] px-4 py-3.5 text-lg font-bold text-gray-800 focus:outline-none focus:border-indigo-500 focus:bg-white transition-all text-center placeholder:text-sm placeholder:font-normal placeholder:text-gray-400"
-              />
-              <motion.button 
-                whileTap={{ scale: 0.95 }}
-                onClick={() => fetchItemData()}
-                disabled={itemLoading || !productCode}
-                className="w-14 bg-indigo-50 text-indigo-600 rounded-[16px] flex items-center justify-center shrink-0 hover:bg-indigo-100 transition-colors border border-indigo-100 disabled:opacity-50"
-              >
-                {itemLoading ? <div className="w-5 h-5 border-2 border-indigo-600/30 border-t-indigo-600 rounded-full animate-spin"></div> : <Search size={20} strokeWidth={2.5} />}
-              </motion.button>
-              <motion.button 
-                whileTap={{ scale: 0.95 }}
-                onClick={() => setCameraEnabled(true)}
-                className="w-14 bg-gray-900 text-white rounded-[16px] flex items-center justify-center shrink-0 shadow-md transition-colors"
-              >
-                <ScanLine size={20} strokeWidth={2.5} />
-              </motion.button>
-            </div>
-
-            <AnimatePresence>
-              {cameraEnabled && (
-                <motion.div 
-                  initial={{ height: 0, opacity: 0 }}
-                  animate={{ height: 'auto', opacity: 1 }}
-                  exit={{ height: 0, opacity: 0 }}
-                  className="w-full aspect-video relative flex flex-col items-center justify-center bg-black overflow-hidden rounded-[16px]"
-                >
-                  {camError ? (
-                    <div className="text-red-400 text-xs p-4 text-center font-medium">{camError}</div>
-                  ) : (
-                    <div className="w-full h-full [&>div]:!object-cover [&>div>video]:!object-cover">
-                      <Scanner onScan={handleScan} onError={handleError} />
-                    </div>
-                  )}
-                  <button 
-                    onClick={() => { setCameraEnabled(false); setCamError(''); }}
-                    className="absolute top-2 right-2 bg-white/20 backdrop-blur-md p-1.5 rounded-full text-white pointer-events-auto"
-                  >
-                    <X size={16} strokeWidth={3} />
-                  </button>
-                </motion.div>
-              )}
-            </AnimatePresence>
-
-            {/* Product Details & Count input (only shown if valid product found) */}
-            <AnimatePresence>
-              {productName && !itemLoading && (
-                <motion.div 
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  className="mt-2 pt-4 border-t border-gray-100 flex flex-col gap-4"
-                >
-                  <div className="flex justify-between items-start bg-indigo-50/50 p-3 rounded-[16px] border border-indigo-50">
-                    <div className="flex items-start gap-3">
-                      <div className="w-8 h-8 bg-white rounded-xl flex items-center justify-center text-indigo-500 shadow-sm shrink-0">
-                        <Box size={16} />
-                      </div>
-                      <div className="flex flex-col">
-                        <h3 className="font-bold text-gray-800 text-sm leading-tight">{productName}</h3>
-                        <p className="text-[10px] text-gray-500 mt-1 font-medium">کد حسابفا: {productCode}</p>
-                      </div>
-                    </div>
-                    {!isBlind && oldCount !== null && (
-                      <div className="bg-white border border-gray-100 text-indigo-600 px-3 py-1.5 rounded-xl flex flex-col items-center shadow-sm shrink-0 ml-1">
-                        <span className="text-sm font-black">{oldCount}</span>
-                        <span className="text-[9px] font-bold text-gray-400">موجودی سیستم</span>
-                      </div>
-                    )}
-                  </div>
-
-                  <div className="flex flex-col gap-3">
-                    <input 
-                      type="number" 
-                      dir="ltr"
-                      value={newCount}
-                      onChange={(e) => { setNewCount(e.target.value); setErrorMsg(''); }}
-                      placeholder="تعداد شمارش شده را وارد کنید..."
-                      className="w-full border-2 border-gray-200 bg-white rounded-[16px] p-4 text-center text-2xl font-black text-gray-800 focus:outline-none focus:border-indigo-500 transition-all placeholder:text-sm placeholder:font-medium placeholder:text-gray-300"
-                    />
-                    <button 
-                      onClick={handleSubmitItem}
-                      disabled={submitLoading || !newCount}
-                      className="w-full bg-indigo-600 text-white py-4 rounded-[16px] shadow-md shadow-indigo-600/20 hover:bg-indigo-700 transition-all disabled:opacity-50 text-sm font-black flex items-center justify-center gap-2"
-                    >
-                      {submitLoading ? (
-                        <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
-                      ) : (
-                        <>ثبت شمارش</>
-                      )}
-                    </button>
-                  </div>
-                </motion.div>
-              )}
-            </AnimatePresence>
           </div>
         </div>
 
+        {/* Error Message */}
+        <AnimatePresence>
+          {errorMsg && (
+            <motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} exit={{ opacity: 0, height: 0 }} className="bg-red-50 border border-red-100 text-red-600 px-4 py-3 rounded-[16px] text-xs font-bold flex items-center gap-2">
+              <AlertCircle size={16} className="shrink-0" />
+              {errorMsg}
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        {/* Product Details & Count input (only shown if valid product found) */}
+        <AnimatePresence>
+          {productName && !itemLoading && (
+            <motion.div 
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="bg-white rounded-[24px] p-5 shadow-[0_8px_30px_rgb(0,0,0,0.06)] border border-indigo-50 flex flex-col gap-4 relative overflow-hidden"
+            >
+              <div className="absolute top-0 right-0 w-32 h-32 bg-indigo-500/5 rounded-bl-full -z-0"></div>
+              
+              <div className="flex justify-between items-start relative z-10">
+                <div className="flex flex-col gap-1">
+                  <h3 className="font-black text-gray-800 text-lg leading-tight">{productName}</h3>
+                  <p className="text-xs text-gray-400 font-bold tracking-wider">کد حسابفا: {productCode}</p>
+                </div>
+                {!isBlind && oldCount !== null && (
+                  <div className="bg-indigo-50 text-indigo-600 px-3 py-2 rounded-xl flex flex-col items-center shadow-sm shrink-0 ml-1 border border-indigo-100">
+                    <span className="text-sm font-black">{oldCount}</span>
+                    <span className="text-[9px] font-bold opacity-70">موجودی سیستم</span>
+                  </div>
+                )}
+              </div>
+
+              <div className="flex flex-col gap-3 relative z-10 mt-2">
+                <input 
+                  ref={inputRef}
+                  type="number" 
+                  dir="ltr"
+                  value={newCount}
+                  onChange={(e) => { setNewCount(e.target.value); setErrorMsg(''); }}
+                  placeholder="0"
+                  className="w-full bg-gray-50 border-2 border-gray-200 rounded-[16px] p-4 text-center text-3xl font-black text-gray-900 focus:outline-none focus:border-indigo-500 focus:bg-white transition-all placeholder:text-gray-300"
+                />
+                <button 
+                  onClick={handleSubmitItem}
+                  disabled={submitLoading || !newCount}
+                  className="w-full bg-indigo-600 text-white py-4 rounded-[16px] shadow-md hover:bg-indigo-700 transition-all disabled:opacity-50 text-sm font-black flex items-center justify-center gap-2"
+                >
+                  {submitLoading ? (
+                    <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
+                  ) : (
+                    <>ثبت موجودی</>
+                  )}
+                </button>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
         {/* History of this session */}
         {history.length > 0 && (
-          <div className="flex flex-col gap-3 mt-2">
+          <div className="flex flex-col gap-3 mt-4">
-            <h3 className="text-xs font-black text-gray-400 uppercase tracking-wider px-2">کالاهای ثبت شده تا الان</h3>
+            <h3 className="text-xs font-black text-gray-400 flex items-center gap-2 px-2">
-            <div className="flex flex-col gap-3">
+              <History size={14} />
+              تاریخچه شمارش‌های شما در این قفسه
+            </h3>
+            <div className="flex flex-col gap-2">
               {history.map((item, idx) => (
-                <div key={idx} className="flex justify-between items-center bg-white p-4 rounded-[20px] shadow-sm border border-gray-100 relative overflow-hidden">
+                <div key={idx} className="flex justify-between items-center bg-white p-3 rounded-[16px] border border-gray-100 relative overflow-hidden">
-                  {item.offline && (
+                  {item.offline && <div className="absolute left-0 top-0 bottom-0 w-1 bg-yellow-400"></div>}
-                    <div className="absolute left-0 top-0 bottom-0 w-1 bg-yellow-400"></div>
-                  )}
                   <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 bg-gray-50 rounded-xl flex items-center justify-center border border-gray-100">
+                    <div className="w-8 h-8 bg-green-50 rounded-[10px] flex items-center justify-center text-green-500 shrink-0">
-                      <Box size={18} className="text-gray-400" />
+                      <Check size={16} strokeWidth={3} />
                     </div>
                     <div className="flex flex-col">
                       <p className="text-xs font-bold text-gray-800 line-clamp-1">{item.name}</p>
-                      <p className="text-[10px] font-medium text-gray-400 mt-0.5">کد: {item.code}</p>
+                      <p className="text-[9px] font-bold text-gray-400 mt-0.5">کد: {item.code}</p>
                     </div>
                   </div>
-                  <div className="flex flex-col items-end shrink-0 pl-1">
+                  <div className="flex items-center gap-1 bg-gray-50 px-3 py-1.5 rounded-xl border border-gray-100">
-                    <span className="text-[10px] font-bold text-gray-400 mb-0.5">شمارش شما</span>
+                    <span className="text-sm font-black text-gray-800">{item.count}</span>
-                    <span className="text-lg font-black text-indigo-600">
-                      {item.count}
-                    </span>
                   </div>
                 </div>
               ))}

src/app/history/page.js

@@ -2,7 +2,7 @@
 import { useState, useEffect } from 'react';
 import Header from '@/components/Header';
 import { hasRole } from '@/lib/auth';
-import { Edit2, Check, X, Box, Layers, User, Save } from 'lucide-react';
+import { Edit2, Check, X, Box, Layers, User, Save, History } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 
 export default function HistoryPage() {

src/app/layout.js

@@ -30,7 +30,7 @@ export default function RootLayout({ children }) {
             </div>
             <div className="w-full py-4 text-center mt-auto">
               <p className="text-[9px] font-bold text-gray-300 dir-ltr tracking-widest uppercase">
-                Designed & Developed by <span className="text-indigo-300">DrMesta</span>
+                <span className="text-indigo-300">HOUKA</span>
               </p>
               <p className="text-[8px] font-bold text-gray-200 mt-1">App v1.4.0</p>
             </div>

src/app/scan/page.js

@@ -16,18 +16,26 @@ export default function ScanPage() {
   const [loading, setLoading] = useState(false);
   const [lockError, setLockError] = useState('');
   const [warehouses, setWarehouses] = useState([]);
+  const [settings, setSettings] = useState(null);
   const router = useRouter();
   
   useEffect(() => {
     fetch('/api/settings')
       .then(res => res.json())
       .then(data => {
+        setSettings(data);
         if (data.warehouses) {
           setWarehouses(data.warehouses);
           if (data.warehouses.length > 0) {
             setWarehouse(data.warehouses[0].id);
           }
         }
+        
+        const shelfEnabled = data.enable_shelf_counting ?? true;
+        const itemEnabled = data.enable_item_counting ?? true;
+        
+        if (shelfEnabled && !itemEnabled) setMode('SHELF');
+        if (!shelfEnabled && itemEnabled) setMode('ITEM');
       });
   }, []);
 
@@ -90,20 +98,29 @@ export default function ScanPage() {
         
         {/* Mode Switcher */}
         <div className="w-full bg-white p-1.5 rounded-[20px] shadow-sm flex mb-6 border border-gray-100">
-          <button 
+          {(settings?.enable_item_counting ?? true) && (
-            onClick={() => { setMode('ITEM'); setCode(''); setLockError(''); }}
+            <button 
-            className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-[16px] text-xs font-bold transition-all ${mode === 'ITEM' ? 'bg-gray-900 text-white shadow-md' : 'text-gray-500 hover:bg-gray-50'}`}
+              onClick={() => { setMode('ITEM'); setCode(''); setLockError(''); }}
-          >
+              className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-[16px] text-xs font-bold transition-all ${mode === 'ITEM' ? 'bg-gray-900 text-white shadow-md' : 'text-gray-500 hover:bg-gray-50'}`}
-            <Box size={16} />
+            >
-            بر اساس کالا
+              <Box size={16} />
-          </button>
+              بر اساس کالا
-          <button 
+            </button>
-            onClick={() => { setMode('SHELF'); setCode(''); setLockError(''); }}
+          )}
-            className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-[16px] text-xs font-bold transition-all ${mode === 'SHELF' ? 'bg-indigo-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-50'}`}
+          {(settings?.enable_shelf_counting ?? true) && (
-          >
+            <button 
-            <LayoutGrid size={16} />
+              onClick={() => { setMode('SHELF'); setCode(''); setLockError(''); }}
-            بر اساس قفسه
+              className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-[16px] text-xs font-bold transition-all ${mode === 'SHELF' ? 'bg-indigo-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-50'}`}
-          </button>
+            >
+              <LayoutGrid size={16} />
+              بر اساس قفسه
+            </button>
+          )}
+          {!(settings?.enable_item_counting ?? true) && !(settings?.enable_shelf_counting ?? true) && (
+            <div className="flex-1 py-3 text-center text-xs font-bold text-red-500">
+              تمامی حالت‌های انبارگردانی غیرفعال شده‌اند
+            </div>
+          )}
         </div>
 
         {/* Camera Area */}

testHesabfa.js

@@ -0,0 +1,34 @@
+const axios = require('axios');
+
+async function test() {
+  const HESABFA_API_KEY = 'NCuDX3bksHlhXWGIqTvatvme3YTplxdF';
+  const HESABFA_TOKEN = '4ddb2fc517f6f6fe6d4b9bdd08fa0df31a564a62e12c4353eb9533ae63447b57ca87c479beb7f02b276929c861dad779';
+
+  try {
+    const res = await axios.post('https://api.hesabfa.com/v1/item/getitems', {
+      apiKey: HESABFA_API_KEY,
+      loginToken: HESABFA_TOKEN,
+      queryInfo: { Take: 5, Skip: 0 },
+      type: 0
+    });
+    console.log("getitems List:");
+    console.log(JSON.stringify(res.data.Result.List, null, 2));
+
+    if (res.data.Result.List.length > 0) {
+        const code = res.data.Result.List[0].Code;
+        console.log("Checking quantity for:", code);
+        const qRes = await axios.post('https://api.hesabfa.com/v1/item/GetQuantity2', {
+            apiKey: HESABFA_API_KEY,
+            loginToken: HESABFA_TOKEN,
+            codes: [code]
+        });
+        console.log("GetQuantity2:");
+        console.log(JSON.stringify(qRes.data, null, 2));
+    }
+    process.exit(0);
+  } catch(e) {
+      console.error(e.response ? e.response.data : e.message);
+  }
+}
+
+test();