drmesta/anbar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upgrade node version to 20 for tailwind v5

Browse Source
This commit is contained in:
DrMesta103
2026-06-11 20:35:16 +03:30
parent 2c2c03717d
commit dc0c617e77
7 changed files with 361 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/manifest.json
+3 -3
View File
@@ -1,7 +1,7 @@
{
"name": "پردیس رایانه - سیستم انبارگردانی",
"short_name": "انبارگردانی",
"description": "سیستم جامع مدیریت قفسه‌ها و انبارگردانی",
"name": "سیستم انبارداری",
"short_name": "انبارداری",
"description": "سیستم جامع مدیریت قفسه‌ها و انبارداری",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
src/app/admin/locations/page.js
+189 -65
View File
@@ -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,9 +11,18 @@ 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>
);
}
src/app/api/locations/[id]/route.js
+59
View File
@@ -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 });
}
}
src/app/api/locations/route.js
+1
View File
@@ -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);
src/app/layout.js
+2 -2
View File
@@ -9,8 +9,8 @@ export const viewport = {
}
export const metadata = {
title: 'پردیس رایانه - انبارگردانی',
description: 'اپلیکیشن انبارگردانی پردیس',
title: 'سیستم انبارداری',
description: 'اپلیکیشن مدیریت انبار',
manifest: "/manifest.json",
appleWebApp: {
capable: true,
src/app/page.js
+6 -49
View File
@@ -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">
خوش آمدید
src/app/scan/page.js
+101 -62
View File
@@ -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>
<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"
/>
<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>
<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>
{/* 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>
<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>
<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>
</div>
</div>
);