upgrade node version to 20 for tailwind v5

2026-06-11 20:35:16 +03:30
parent 2c2c03717d
commit dc0c617e77
7 changed files with 361 additions and 181 deletions
@@ -1,7 +1,7 @@
 {
-  "name": "پردیس رایانه - سیستم انبارگردانی",
-  "short_name": "انبارگردانی",
-  "description": "سیستم جامع مدیریت قفسه‌ها و انبارگردانی",
+  "name": "سیستم انبارداری",
+  "short_name": "انبارداری",
+  "description": "سیستم جامع مدیریت قفسه‌ها و انبارداری",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
@@ -2,6 +2,8 @@
 import { useState, useEffect } from 'react';
 import Header from '@/components/Header';
 import dynamic from 'next/dynamic';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ScanLine, Plus, Search, Trash2, Edit2, Layers, MapPin, X, AlertCircle, XCircle, Box } from 'lucide-react';
 const Scanner = dynamic(() => import('@yudiel/react-qr-scanner').then(mod => mod.Scanner), { ssr: false });

 export default function AdminLocations() {
@@ -9,10 +11,19 @@ export default function AdminLocations() {
  const [newCode, setNewCode] = useState('');
  const [loading, setLoading] = useState(false);
  const [cameraEnabled, setCameraEnabled] = useState(false);
-
  const [camError, setCamError] = useState('');
  const [activeFilter, setActiveFilter] = useState('all');
  
+  const [editingId, setEditingId] = useState(null);
+  const [editCode, setEditCode] = useState('');
+
+  const [toast, setToast] = useState({ show: false, message: '', isError: false });
+
+  const showToast = (message, isError = false) => {
+    setToast({ show: true, message, isError });
+    setTimeout(() => setToast({ show: false, message: '', isError: false }), 3000);
+  };
+
  useEffect(() => {
    fetchLocations();
  }, []);
@@ -28,125 +39,173 @@ export default function AdminLocations() {
    }
  };

-  const handleAddLocation = async (codeValue) => {
-    const targetCode = codeValue || newCode;
+  const handleAddOrEdit = async (codeValue) => {
+    const targetCode = editingId ? editCode : (codeValue || newCode);
    if (!targetCode) return;
    
    setLoading(true);
    try {
-      const res = await fetch('/api/locations', {
-        method: 'POST',
+      const method = editingId ? 'PUT' : 'POST';
+      const url = editingId ? `/api/locations/${editingId}` : '/api/locations';
+      
+      const res = await fetch(url, {
+        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code: targetCode })
      });
      
      const data = await res.json();
      if (res.ok) {
-        alert('قفسه با موفقیت ثبت شد!');
+        showToast(editingId ? 'قفسه با موفقیت ویرایش شد' : 'قفسه با موفقیت ثبت شد!');
        setNewCode('');
+        setEditingId(null);
+        setEditCode('');
        fetchLocations();
      } else {
-        alert(data.error || 'خطا در ثبت قفسه');
+        showToast(data.error || 'خطا در ثبت قفسه', true);
      }
    } catch (e) {
-      alert('خطای شبکه');
+      showToast('خطای شبکه', true);
    } finally {
      setLoading(false);
      setCameraEnabled(false);
    }
  };

+  const handleDelete = async (id) => {
+    if (!confirm('آیا از حذف این قفسه اطمینان دارید؟')) return;
+    try {
+      const res = await fetch(`/api/locations/${id}`, { method: 'DELETE' });
+      const data = await res.json();
+      if (res.ok) {
+        showToast('قفسه حذف شد');
+        fetchLocations();
+      } else {
+        showToast(data.error || 'خطا در حذف', true);
+      }
+    } catch (e) {
+      showToast('خطای شبکه', true);
+    }
+  };
+
  const handleScan = (detectedCodes) => {
    if (detectedCodes && detectedCodes.length > 0) {
      const scannedValue = detectedCodes[0].rawValue;
-      handleAddLocation(scannedValue);
+      handleAddOrEdit(scannedValue);
    }
  };

  const handleError = (error) => {
-    console.error(error);
    const msg = error?.message || error?.name || '';
-    if (msg.includes('Requested device not found') || msg.includes('NotFoundError') || msg.includes('device not found')) {
-      setCamError('هیچ دوربینی روی این دستگاه یافت نشد. لطفاً از لپ‌تاپ یا موبایل استفاده کنید.');
+    if (msg.includes('Requested device not found')) {
+      setCamError('دوربینی یافت نشد.');
    } else {
-      setCamError(msg || 'خطا در دسترسی به دوربین. آیا از HTTPS یا localhost استفاده میکنید؟');
+      setCamError(msg || 'خطا در دسترسی به دوربین.');
    }
  };

-  // استخراج طبقات یکتا برای ساخت دکمه‌های فیلتر
  const floors = [...new Set(locations.map(loc => loc.floor))].sort();
-
-  // اعمال فیلتر روی لیست قفسه‌ها
  const filteredLocations = activeFilter === 'all' 
    ? locations 
    : locations.filter(loc => loc.floor === activeFilter);

  return (
-    <div className="w-full min-h-screen bg-gray-50 flex flex-col pb-20">
-      <Header title="مدیریت قفسه ها (ادمین)" showBack={true} />
+    <div className="w-full min-h-screen bg-gray-50 flex flex-col pb-24 relative">
+      <Header title="مدیریت قفسه‌ها" showBack={true} />
      
-      <div className="p-4 flex flex-col gap-6 items-center">
+      <div className="flex-1 p-5 flex flex-col gap-6 max-w-md mx-auto w-full mt-2">
        
-        <div className="w-full bg-white p-4 rounded shadow border border-gray-200">
-          <h2 className="font-bold mb-2">ثبت قفسه جدید</h2>
-          <p className="text-xs text-gray-500 mb-4">
-            فرمت استاندارد شامل حروف و اعداد است. 
-            مثال: C2F2 (طبقه C، منطقه 2، قطاع F، ردیف 2)
+        {/* Header Title */}
+        <div className="flex flex-col">
+          <h2 className="text-xl font-black text-gray-800 tracking-tight">تنظیمات قفسه‌ها</h2>
+          <p className="text-xs text-gray-400 font-medium mt-1">
+            ثبت، ویرایش و مدیریت قفسه‌های انبار
          </p>
+        </div>

-          <div className="flex flex-col gap-3">
+        {/* Action Box */}
+        <div className="w-full bg-white rounded-[24px] p-5 shadow-sm border border-gray-100 flex flex-col gap-4">
+          
+          <div className="flex justify-between items-center mb-1">
+            <span className="text-sm font-bold text-gray-700">{editingId ? 'ویرایش قفسه' : 'ثبت قفسه جدید'}</span>
+            {editingId && (
+              <button onClick={() => { setEditingId(null); setEditCode(''); }} className="text-xs text-red-500 font-bold bg-red-50 px-2 py-1 rounded-lg">
+                لغو ویرایش
+              </button>
+            )}
+          </div>
+          
+          <div className="flex gap-2">
            <input 
              type="text" 
              dir="ltr"
-              value={newCode}
-              onChange={(e) => setNewCode(e.target.value)}
+              value={editingId ? editCode : newCode}
+              onChange={(e) => editingId ? setEditCode(e.target.value) : setNewCode(e.target.value)}
              placeholder="مثال: C2F2"
-              className="w-full border p-2 rounded text-center uppercase font-bold"
+              className="flex-1 bg-gray-50 border border-gray-200 rounded-[16px] px-4 py-3 text-center uppercase font-black text-gray-800 tracking-widest focus:outline-none focus:border-indigo-500 focus:bg-white transition-colors placeholder-gray-300"
            />
-            <button 
-              onClick={() => handleAddLocation(newCode)}
+            <motion.button 
+              whileTap={{ scale: 0.95 }}
+              onClick={() => handleAddOrEdit()}
              disabled={loading}
-              className="bg-purple-600 text-white font-bold py-2 rounded"
+              className="w-14 bg-gray-900 text-white rounded-[16px] flex items-center justify-center transition-opacity disabled:opacity-50 shrink-0"
            >
-              ثبت دستی
-            </button>
+              {loading ? <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div> : (editingId ? <Edit2 size={18} strokeWidth={2.5}/> : <Plus size={20} strokeWidth={3} />)}
+            </motion.button>
          </div>

-          <div className="mt-4 border-t pt-4">
-            {cameraEnabled ? (
-              <div className="w-full aspect-video relative flex flex-col items-center justify-center bg-gray-100 rounded">
-                {camError ? (
-                  <div className="text-red-500 text-xs p-4 text-center">{camError}</div>
-                ) : (
-                  <Scanner onScan={handleScan} onError={handleError} />
-                )}
-                <button 
-                  onClick={() => { setCameraEnabled(false); setCamError(''); }}
-                  className="absolute bottom-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded z-10"
+          <div className="relative overflow-hidden rounded-[16px]">
+            <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"
                >
-                  بستن دوربین
-                </button>
-              </div>
-            ) : (
-              <button 
+                  {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>
+            
+            {!cameraEnabled && !editingId && (
+              <motion.button 
+                whileTap={{ scale: 0.98 }}
                onClick={() => setCameraEnabled(true)}
-                className="w-full bg-blue-500 text-white font-bold py-2 rounded flex justify-center items-center gap-2"
+                className="w-full py-3.5 bg-indigo-50 text-indigo-600 text-sm font-extrabold rounded-[16px] transition-colors flex items-center justify-center gap-2"
              >
+                <ScanLine size={18} strokeWidth={2.5} />
                اسکن بارکد قفسه
-              </button>
+              </motion.button>
            )}
          </div>
        </div>

-        <div className="w-full bg-white p-4 rounded shadow border border-gray-200">
-          <h2 className="font-bold mb-4">قفسه های ثبت شده ({filteredLocations.length})</h2>
+        {/* List Section */}
+        <div className="flex flex-col gap-4 mt-2">
          
-          {/* فیلترهای تگ (اسکرول افقی) */}
+          <div className="flex items-center justify-between">
+            <h3 className="font-bold text-gray-800 text-sm">لیست قفسه‌ها <span className="text-gray-400 font-medium text-xs">({filteredLocations.length})</span></h3>
+          </div>
+
+          {/* Tag Filters */}
          {floors.length > 0 && (
-            <div className="flex gap-2 overflow-x-auto pb-2 mb-3 scrollbar-hide" style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
+            <div className="flex gap-2 overflow-x-auto pb-1 scrollbar-hide" style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
              <button 
                onClick={() => setActiveFilter('all')}
-                className={`px-4 py-1.5 rounded-full text-xs font-bold whitespace-nowrap transition-colors border ${activeFilter === 'all' ? 'bg-purple-600 text-white border-purple-600' : 'bg-gray-50 text-gray-600 border-gray-200'}`}
+                className={`px-4 py-2 rounded-[12px] text-xs font-bold whitespace-nowrap transition-all border ${activeFilter === 'all' ? 'bg-gray-900 text-white border-gray-900' : 'bg-white text-gray-500 border-gray-200 hover:bg-gray-50'}`}
              >
                همه طبقات
              </button>
@@ -154,7 +213,7 @@ export default function AdminLocations() {
                <button 
                  key={floor}
                  onClick={() => setActiveFilter(floor)}
-                  className={`px-4 py-1.5 rounded-full text-xs font-bold whitespace-nowrap transition-colors border ${activeFilter === floor ? 'bg-purple-600 text-white border-purple-600' : 'bg-gray-50 text-gray-600 border-gray-200'}`}
+                  className={`px-4 py-2 rounded-[12px] text-xs font-bold whitespace-nowrap transition-all border ${activeFilter === floor ? 'bg-gray-900 text-white border-gray-900' : 'bg-white text-gray-500 border-gray-200 hover:bg-gray-50'}`}
                >
                  طبقه {floor}
                </button>
@@ -162,18 +221,83 @@ export default function AdminLocations() {
            </div>
          )}

-          <div className="flex flex-col gap-2 max-h-[300px] overflow-y-auto pr-1">
-            {filteredLocations.map((loc) => (
-              <div key={loc.id} className="flex justify-between items-center bg-gray-50 p-2 rounded border border-gray-100 text-sm">
-                <span className="font-bold text-lg text-purple-700">{loc.code}</span>
-                <span className="text-gray-500 text-xs">طبقه {loc.floor} | منطقه {loc.region} | قطاع {loc.sector} | ردیف {loc.row}</span>
+          {/* Cards */}
+          <div className="flex flex-col gap-3">
+            {filteredLocations.map((loc) => {
+              const hasData = loc._count?.countings > 0;
+              return (
+                <motion.div 
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  key={loc.id} 
+                  className="bg-white p-4 rounded-[20px] border border-gray-100 shadow-sm flex items-center justify-between"
+                >
+                  <div className="flex items-center gap-4">
+                    <div className="w-12 h-12 bg-gray-50 rounded-[14px] flex items-center justify-center shrink-0">
+                      <Layers className="text-gray-400" size={20} strokeWidth={2} />
+                    </div>
+                    <div className="flex flex-col">
+                      <span className="font-black text-lg text-gray-800 tracking-wide uppercase">{loc.code}</span>
+                      <span className="text-[10px] text-gray-400 font-bold mt-0.5">
+                        طبقه {loc.floor} • منطقه {loc.region} • قطاع {loc.sector}
+                      </span>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center gap-1">
+                    {!hasData ? (
+                      <>
+                        <button 
+                          onClick={() => { setEditingId(loc.id); setEditCode(loc.code); window.scrollTo({ top: 0, behavior: 'smooth' }); }}
+                          className="w-8 h-8 flex items-center justify-center rounded-xl text-gray-400 hover:text-indigo-500 hover:bg-indigo-50 transition-colors"
+                        >
+                          <Edit2 size={16} strokeWidth={2.5} />
+                        </button>
+                        <button 
+                          onClick={() => handleDelete(loc.id)}
+                          className="w-8 h-8 flex items-center justify-center rounded-xl text-gray-400 hover:text-red-500 hover:bg-red-50 transition-colors"
+                        >
+                          <Trash2 size={16} strokeWidth={2.5} />
+                        </button>
+                      </>
+                    ) : (
+                      <div className="px-3 py-1 bg-gray-50 rounded-full flex items-center gap-1.5 border border-gray-100">
+                        <Box size={12} className="text-gray-400" />
+                        <span className="text-[10px] font-bold text-gray-500">{loc._count.countings} کالا</span>
+                      </div>
+                    )}
+                  </div>
+                </motion.div>
+              );
+            })}
+            
+            {filteredLocations.length === 0 && (
+              <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
+                <div className="w-16 h-16 bg-gray-50 rounded-full flex items-center justify-center mb-3">
+                  <MapPin className="text-gray-300" size={24} />
+                </div>
+                <span className="text-sm font-bold text-gray-500">هیچ قفسه‌ای یافت نشد</span>
+                <span className="text-xs text-gray-400 mt-1">با فرم بالا یک قفسه جدید ثبت کنید</span>
              </div>
-            ))}
-            {filteredLocations.length === 0 && <span className="text-center text-sm text-gray-400 py-4">موردی یافت نشد.</span>}
+            )}
          </div>
        </div>
-
      </div>
+
+      {/* Minimal Toast Notification */}
+      <AnimatePresence>
+        {toast.show && (
+          <motion.div 
+            initial={{ opacity: 0, y: 50, scale: 0.9 }} 
+            animate={{ opacity: 1, y: 0, scale: 1 }} 
+            exit={{ opacity: 0, y: 20, scale: 0.9 }}
+            className={`fixed bottom-8 left-1/2 -translate-x-1/2 z-[100] px-5 py-3 rounded-2xl shadow-xl backdrop-blur-3xl border text-xs font-bold whitespace-nowrap flex items-center justify-center gap-2 ${toast.isError ? 'bg-red-50/90 border-red-100 text-red-600' : 'bg-white/90 border-gray-100 text-gray-800'}`}
+          >
+            {toast.isError ? <XCircle size={14} /> : <AlertCircle size={14} />}
+            {toast.message}
+          </motion.div>
+        )}
+      </AnimatePresence>
    </div>
  );
 }
@@ -0,0 +1,59 @@
+import prisma from '@/lib/prisma';
+import { NextResponse } from 'next/server';
+
+export async function DELETE(req, { params }) {
+  try {
+    const { id: idParam } = await params;
+    const id = parseInt(idParam, 10);
+    const location = await prisma.location.findUnique({
+      where: { id },
+      include: { _count: { select: { countings: true } } }
+    });
+
+    if (!location) return NextResponse.json({ error: 'قفسه یافت نشد' }, { status: 404 });
+    if (location._count.countings > 0) {
+      return NextResponse.json({ error: 'این قفسه دارای کالای شمرده شده است و قابل حذف نیست.' }, { status: 400 });
+    }
+
+    await prisma.location.delete({ where: { id } });
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    return NextResponse.json({ error: 'خطا در حذف قفسه' }, { status: 500 });
+  }
+}
+
+export async function PUT(req, { params }) {
+  try {
+    const { id: idParam } = await params;
+    const id = parseInt(idParam, 10);
+    const { code } = await req.json();
+
+    const location = await prisma.location.findUnique({
+      where: { id },
+      include: { _count: { select: { countings: true } } }
+    });
+
+    if (!location) return NextResponse.json({ error: 'قفسه یافت نشد' }, { status: 404 });
+    if (location._count.countings > 0) {
+      return NextResponse.json({ error: 'این قفسه دارای کالا است و قابل ویرایش نیست.' }, { status: 400 });
+    }
+
+    const regex = /^([A-Za-z]+)(\d+)([A-Za-z]+)(\d+)$/;
+    const match = code.toUpperCase().match(regex);
+    if (!match) return NextResponse.json({ error: 'فرمت کد نامعتبر است. مثال: C2F2' }, { status: 400 });
+
+    const [, floor, regionStr, sector, rowStr] = match;
+    const region = parseInt(regionStr, 10);
+    const row = parseInt(rowStr, 10);
+
+    const updated = await prisma.location.update({
+      where: { id },
+      data: { code: code.toUpperCase(), floor, region, sector, row }
+    });
+
+    return NextResponse.json({ success: true, location: updated });
+  } catch (error) {
+    if (error.code === 'P2002') return NextResponse.json({ error: 'این کد قفسه از قبل وجود دارد' }, { status: 400 });
+    return NextResponse.json({ error: 'خطا در ویرایش قفسه' }, { status: 500 });
+  }
+}
@@ -4,6 +4,7 @@ import { NextResponse } from 'next/server';
 export async function GET() {
  try {
    const locations = await prisma.location.findMany({
+      include: { _count: { select: { countings: true } } },
      orderBy: [{ floor: 'asc' }, { region: 'asc' }, { sector: 'asc' }, { row: 'asc' }]
    });
    return NextResponse.json(locations);
@@ -9,8 +9,8 @@ export const viewport = {
 }

 export const metadata = {
-  title: 'پردیس رایانه - انبارگردانی',
-  description: 'اپلیکیشن انبارگردانی پردیس',
+  title: 'سیستم انبارداری',
+  description: 'اپلیکیشن مدیریت انبار',
  manifest: "/manifest.json",
  appleWebApp: {
    capable: true,
@@ -96,56 +96,13 @@ export default function EntryPage() {
            className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-gray-50/50 backdrop-blur-md"
          >
            <motion.div
-              initial={{ scale: 0.5, opacity: 0, y: 20 }}
+              initial={{ scale: 0.5, opacity: 0, y: 10 }}
              animate={{ scale: 1, opacity: 1, y: 0 }}
              transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1], delay: 0.2 }}
-              className="flex flex-col items-center"
+              className="flex items-center justify-center w-36 h-36"
            >
-              <motion.div 
-                className="w-24 h-24 rounded-3xl shadow-sm border border-gray-100 mb-6 overflow-hidden flex items-center justify-center bg-white"
-              >
-                <img src="/icons/icon-512x512.png" alt="پردیس رایانه" className="w-full h-full object-cover" />
-              </motion.div>
-              
-              <motion.h1 
-                initial={{ opacity: 0, y: 10 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: 0.6 }}
-                className="text-2xl font-black text-gray-800 tracking-tight"
-              >
-                انبارگردانی هوشمند
-              </motion.h1>
-              
-              <motion.p 
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                transition={{ duration: 0.5, delay: 0.8 }}
-                className="text-sm text-gray-500 mt-2 font-medium"
-              >
-                مدیریت حرفه‌ای انبار و قفسه‌ها
-              </motion.p>
+              <img src="/icons/icon-512x512.png" alt="انبارداری" className="w-full h-full object-contain drop-shadow-xl" />
            </motion.div>
-
-            <motion.div 
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ duration: 1, delay: 1 }}
-              className="absolute bottom-12 flex flex-col items-center"
-            >
-              <div className="flex flex-col items-center justify-center opacity-40 hover:opacity-100 transition-opacity gap-1">
-                <span className="text-[11px] text-gray-800 font-black tracking-[0.3em] uppercase font-sans">
-                  H U K A
-                </span>
-                <span className="text-[9px] text-gray-500 font-medium tracking-widest">طراحی توسط هوکا</span>
-              </div>
-            </motion.div>
-
-            <motion.div 
-              initial={{ opacity: 0, width: 0 }}
-              animate={{ opacity: 1, width: "120px" }}
-              transition={{ duration: 1.5, delay: 0.5, ease: "easeInOut" }}
-              className="absolute bottom-6 h-1 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full"
-            />
          </motion.div>
        ) : showInstall ? (
          <motion.div 
@@ -156,8 +113,8 @@ export default function EntryPage() {
            transition={{ duration: 0.6 }}
            className="w-full h-full flex flex-col justify-center items-center px-8 z-10 relative max-w-md mx-auto"
          >
-            <div className="w-28 h-28 rounded-3xl shadow-sm border border-gray-100 mb-8 overflow-hidden flex items-center justify-center bg-white p-2">
-              <img src="/icons/icon-512x512.png" alt="پردیس رایانه" className="w-full h-full object-cover" />
+            <div className="w-32 h-32 mb-6 flex items-center justify-center">
+              <img src="/icons/icon-512x512.png" alt="انبارداری" className="w-full h-full object-contain drop-shadow-md" />
            </div>
            
            <h2 className="text-2xl font-black text-gray-800 tracking-tight mb-3 text-center">
@@ -235,7 +192,7 @@ export default function EntryPage() {
              className="flex flex-col items-center justify-center flex-1 pt-10"
            >
              <div className="w-20 h-20 rounded-3xl shadow-sm border border-gray-100 mb-6 overflow-hidden flex items-center justify-center bg-white">
-                <img src="/icons/icon-512x512.png" alt="پردیس رایانه" className="w-full h-full object-cover" />
+                <img src="/icons/icon-512x512.png" alt="انبارداری" className="w-full h-full object-cover" />
              </div>
              <h2 className="text-2xl font-black text-gray-800 tracking-tight mb-2">
                خوش آمدید
@@ -1,8 +1,10 @@
 'use client';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Header from '@/components/Header';
 import dynamic from 'next/dynamic';
+import { motion } from 'framer-motion';
+import { ScanLine, Search, Box, X, ChevronDown, CheckCircle2 } from 'lucide-react';
 const Scanner = dynamic(() => import('@yudiel/react-qr-scanner').then(mod => mod.Scanner), { ssr: false });

 export default function ScanPage() {
@@ -26,7 +28,7 @@ export default function ScanPage() {
      setCameraEnabled(false);
      setTimeout(() => {
        router.push(`/counting?code=${scannedValue}&warehouse=${warehouse}`);
-      }, 1500);
+      }, 500);
    }
  };

@@ -34,76 +36,113 @@ export default function ScanPage() {
    console.error(error);
    const msg = error?.message || error?.name || '';
    if (msg.includes('Requested device not found') || msg.includes('NotFoundError') || msg.includes('device not found')) {
-      setCamError('هیچ دوربینی روی این دستگاه یافت نشد. لطفاً از لپ‌تاپ یا موبایل استفاده کنید.');
+      setCamError('دوربینی روی این دستگاه یافت نشد. لطفاً از لپ‌تاپ یا موبایل استفاده کنید.');
    } else {
-      setCamError(msg || 'خطا در دسترسی به دوربین. آیا از HTTPS یا localhost استفاده میکنید؟');
+      setCamError(msg || 'خطا در دسترسی به دوربین.');
    }
  };

  return (
-    <div className="w-full min-h-screen bg-gray-50 flex flex-col pb-20">
-      <Header title="اسکن کد کالا" showBack={true} />
+    <div className="w-full min-h-screen bg-gray-50 flex flex-col pb-24">
+      <Header title="اسکن کالا" showBack={true} />
      
-      <div className="p-4 flex flex-col gap-6 items-center mt-4">
+      <div className="flex-1 px-6 pt-6 flex flex-col items-center max-w-md mx-auto w-full">
        
-        <div className="w-full max-w-sm aspect-video border-2 border-dashed border-gray-300 rounded-lg overflow-hidden flex flex-col items-center justify-center bg-gray-100 relative">
-          {cameraEnabled ? (
-            <div className="w-full h-full relative">
-              {camError ? (
-                <div className="text-red-500 text-xs p-4 text-center">{camError}</div>
-              ) : (
-                <Scanner 
-                  onScan={handleScan}
-                  onError={handleError}
-                  formats={['qr_code', 'code_128', 'ean_13']}
-                />
-              )}
-              <button 
-                onClick={() => { setCameraEnabled(false); setCamError(''); }}
-                className="absolute bottom-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded z-10"
+        {/* Camera Area */}
+        <div className="w-full relative mb-8">
+          <div className={`w-full aspect-[4/3] rounded-[32px] overflow-hidden flex flex-col items-center justify-center transition-all duration-500 relative ${cameraEnabled ? 'bg-black shadow-2xl' : 'bg-white border border-gray-200 shadow-sm'}`}>
+            {cameraEnabled ? (
+              <div className="w-full h-full relative">
+                {camError ? (
+                  <div className="text-red-400 text-xs p-6 text-center h-full flex items-center justify-center font-medium bg-gray-900">{camError}</div>
+                ) : (
+                  <div className="w-full h-full [&>div]:!object-cover [&>div>video]:!object-cover">
+                    <Scanner 
+                      onScan={handleScan}
+                      onError={handleError}
+                      formats={['qr_code', 'code_128', 'ean_13']}
+                    />
+                  </div>
+                )}
+                
+                {/* Scanner Target Overlay */}
+                <div className="absolute inset-0 pointer-events-none flex items-center justify-center">
+                  <div className="w-48 h-48 border-2 border-white/40 rounded-3xl relative">
+                    <div className="absolute top-0 left-0 w-8 h-8 border-t-4 border-l-4 border-white rounded-tl-2xl"></div>
+                    <div className="absolute top-0 right-0 w-8 h-8 border-t-4 border-r-4 border-white rounded-tr-2xl"></div>
+                    <div className="absolute bottom-0 left-0 w-8 h-8 border-b-4 border-l-4 border-white rounded-bl-2xl"></div>
+                    <div className="absolute bottom-0 right-0 w-8 h-8 border-b-4 border-r-4 border-white rounded-br-2xl"></div>
+                  </div>
+                </div>
+
+                <button 
+                  onClick={() => { setCameraEnabled(false); setCamError(''); }}
+                  className="absolute top-4 right-4 bg-white/10 backdrop-blur-md p-2 rounded-full text-white hover:bg-white/20 transition-colors pointer-events-auto"
+                >
+                  <X size={20} strokeWidth={2.5} />
+                </button>
+              </div>
+            ) : (
+              <motion.button 
+                whileTap={{ scale: 0.98 }}
+                onClick={() => setCameraEnabled(true)}
+                className="w-full h-full flex flex-col items-center justify-center gap-4 py-12"
              >
-                بستن دوربین
-              </button>
-            </div>
-          ) : (
-            <button 
-              onClick={() => setCameraEnabled(true)}
-              className="text-blue-500 font-bold px-4 py-2"
-            >
-              فعال کردن دوربین برای اسکن
-            </button>
-          )}
+                <div className="w-16 h-16 rounded-[20px] bg-indigo-50 flex items-center justify-center text-indigo-500">
+                  <ScanLine size={32} strokeWidth={2} />
+                </div>
+                <div className="flex flex-col items-center">
+                  <span className="text-sm font-extrabold text-gray-800 mb-1">فعال‌سازی دوربین</span>
+                  <span className="text-xs font-medium text-gray-400">برای اسکن بارکد کالا کلیک کنید</span>
+                </div>
+              </motion.button>
+            )}
+          </div>
        </div>
        
-        <p className="text-sm text-gray-500">کد کالا را اسکن یا وارد کنید</p>
+        {/* Manual Input */}
+        <div className="w-full flex flex-col gap-4">
+          <div className="relative">
+            <div className="absolute inset-y-0 left-5 flex items-center pointer-events-none">
+              <Search className="text-gray-400" size={18} strokeWidth={2.5} />
+            </div>
+            <input 
+              type="number" 
+              dir="ltr"
+              value={code}
+              onChange={(e) => setCode(e.target.value)}
+              placeholder="ورود دستی کد کالا..."
+              className="w-full pl-12 pr-5 py-4 bg-white border border-gray-200 rounded-[24px] focus:outline-none focus:border-indigo-500 focus:ring-4 focus:ring-indigo-50 transition-all text-left text-lg font-bold text-gray-800 placeholder-gray-300 shadow-sm"
+            />
+          </div>
          
-        <input 
-          type="number" 
-          dir="ltr"
-          value={code}
-          onChange={(e) => setCode(e.target.value)}
-          placeholder="ورود دستی کد"
-          className="w-full max-w-xs text-center text-3xl p-4 border rounded-lg focus:ring-2 focus:ring-purple-500 outline-none"
-        />
+          <div className="relative">
+            <div className="absolute inset-y-0 left-5 flex items-center pointer-events-none">
+              <ChevronDown className="text-gray-400" size={18} strokeWidth={2.5} />
+            </div>
+            <select 
+              value={warehouse}
+              onChange={(e) => setWarehouse(e.target.value)}
+              className="w-full appearance-none pl-12 pr-5 py-4 bg-white border border-gray-200 rounded-[24px] focus:outline-none focus:border-indigo-500 focus:ring-4 focus:ring-indigo-50 transition-all text-sm font-bold text-gray-700 shadow-sm"
+            >
+              <option value="11">انبار مرکزی (11)</option>
+              <option value="13">انبار فروشگاه (13)</option>
+              <option value="14">انبار کارگاه شارژ (14)</option>
+              <option value="15">انبار کارگاه تعمیرات (15)</option>
+            </select>
+          </div>
          
-        <select 
-          value={warehouse}
-          onChange={(e) => setWarehouse(e.target.value)}
-          className="w-full max-w-xs text-center text-lg p-3 border rounded-lg focus:ring-2 focus:ring-purple-500 outline-none"
-        >
-          <option value="11">مرکزی</option>
-          <option value="13">انبار فروشگاه</option>
-          <option value="14">انبار کارگاه شارژ</option>
-          <option value="15">انبار کارگاه تعمیرات</option>
-        </select>
+          <motion.button 
+            whileTap={{ scale: 0.98 }}
+            onClick={handleGoToCounting}
+            disabled={!code}
+            className="w-full mt-4 py-4 bg-gray-900 text-white text-sm font-extrabold rounded-[24px] transition-all disabled:opacity-50 disabled:bg-gray-300 flex items-center justify-center gap-2 shadow-md shadow-gray-900/10"
+          >
+            {code ? <CheckCircle2 size={18} strokeWidth={2.5} /> : <Box size={18} strokeWidth={2.5} />}
+            شروع شمارش کالا
+          </motion.button>
+        </div>

-        <button 
-          onClick={handleGoToCounting}
-          disabled={!code}
-          className="w-full max-w-xs py-4 bg-green-500 hover:bg-green-600 disabled:bg-gray-300 text-white font-bold text-xl rounded-lg transition-colors"
-        >
-          شمارش
-        </button>
      </div>
    </div>
  );