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": "پردیس رایانه - سیستم انبارگردانی", "name": "سیستم انبارداری",
"short_name": "انبارگردانی", "short_name": "انبارداری",
"description": "سیستم جامع مدیریت قفسه‌ها و انبارگردانی", "description": "سیستم جامع مدیریت قفسه‌ها و انبارداری",
"start_url": "/", "start_url": "/",
"display": "standalone", "display": "standalone",
"background_color": "#ffffff", "background_color": "#ffffff",
src/app/admin/locations/page.js
+189 -65
View File
@@ -2,6 +2,8 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import Header from '@/components/Header'; import Header from '@/components/Header';
import dynamic from 'next/dynamic'; 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 }); const Scanner = dynamic(() => import('@yudiel/react-qr-scanner').then(mod => mod.Scanner), { ssr: false });
export default function AdminLocations() { export default function AdminLocations() {
@@ -9,9 +11,18 @@ export default function AdminLocations() {
const [newCode, setNewCode] = useState(''); const [newCode, setNewCode] = useState('');
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [cameraEnabled, setCameraEnabled] = useState(false); const [cameraEnabled, setCameraEnabled] = useState(false);
const [camError, setCamError] = useState(''); const [camError, setCamError] = useState('');
const [activeFilter, setActiveFilter] = useState('all'); 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(() => { useEffect(() => {
fetchLocations(); fetchLocations();
@@ -28,125 +39,173 @@ export default function AdminLocations() {
} }
}; };
const handleAddLocation = async (codeValue) => { const handleAddOrEdit = async (codeValue) => {
const targetCode = codeValue || newCode; const targetCode = editingId ? editCode : (codeValue || newCode);
if (!targetCode) return; if (!targetCode) return;
setLoading(true); setLoading(true);
try { try {
const res = await fetch('/api/locations', { const method = editingId ? 'PUT' : 'POST';
method: 'POST', const url = editingId ? `/api/locations/${editingId}` : '/api/locations';
const res = await fetch(url, {
method,
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ code: targetCode }) body: JSON.stringify({ code: targetCode })
}); });
const data = await res.json(); const data = await res.json();
if (res.ok) { if (res.ok) {
alert('قفسه با موفقیت ثبت شد!'); showToast(editingId ? 'قفسه با موفقیت ویرایش شد' : 'قفسه با موفقیت ثبت شد!');
setNewCode(''); setNewCode('');
setEditingId(null);
setEditCode('');
fetchLocations(); fetchLocations();
} else { } else {
alert(data.error || 'خطا در ثبت قفسه'); showToast(data.error || 'خطا در ثبت قفسه', true);
} }
} catch (e) { } catch (e) {
alert('خطای شبکه'); showToast('خطای شبکه', true);
} finally { } finally {
setLoading(false); setLoading(false);
setCameraEnabled(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) => { const handleScan = (detectedCodes) => {
if (detectedCodes && detectedCodes.length > 0) { if (detectedCodes && detectedCodes.length > 0) {
const scannedValue = detectedCodes[0].rawValue; const scannedValue = detectedCodes[0].rawValue;
handleAddLocation(scannedValue); handleAddOrEdit(scannedValue);
} }
}; };
const handleError = (error) => { const handleError = (error) => {
console.error(error);
const msg = error?.message || error?.name || ''; const msg = error?.message || error?.name || '';
if (msg.includes('Requested device not found') || msg.includes('NotFoundError') || msg.includes('device not found')) { if (msg.includes('Requested device not found')) {
setCamError('هیچ دوربینی روی این دستگاه یافت نشد. لطفاً از لپ‌تاپ یا موبایل استفاده کنید.'); setCamError('دوربینی یافت نشد.');
} else { } else {
setCamError(msg || 'خطا در دسترسی به دوربین. آیا از HTTPS یا localhost استفاده میکنید؟'); setCamError(msg || 'خطا در دسترسی به دوربین.');
} }
}; };
// استخراج طبقات یکتا برای ساخت دکمه‌های فیلتر
const floors = [...new Set(locations.map(loc => loc.floor))].sort(); const floors = [...new Set(locations.map(loc => loc.floor))].sort();
// اعمال فیلتر روی لیست قفسه‌ها
const filteredLocations = activeFilter === 'all' const filteredLocations = activeFilter === 'all'
? locations ? locations
: locations.filter(loc => loc.floor === activeFilter); : locations.filter(loc => loc.floor === activeFilter);
return ( return (
<div className="w-full min-h-screen bg-gray-50 flex flex-col pb-20"> <div className="w-full min-h-screen bg-gray-50 flex flex-col pb-24 relative">
<Header title="مدیریت قفسه ها (ادمین)" showBack={true} /> <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"> {/* Header Title */}
<h2 className="font-bold mb-2">ثبت قفسه جدید</h2> <div className="flex flex-col">
<p className="text-xs text-gray-500 mb-4"> <h2 className="text-xl font-black text-gray-800 tracking-tight">تنظیمات قفسه‌ها</h2>
فرمت استاندارد شامل حروف و اعداد است. <p className="text-xs text-gray-400 font-medium mt-1">
مثال: C2F2 (طبقه C، منطقه 2، قطاع F، ردیف 2) ثبت، ویرایش و مدیریت قفسه‌های انبار
</p> </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 <input
type="text" type="text"
dir="ltr" dir="ltr"
value={newCode} value={editingId ? editCode : newCode}
onChange={(e) => setNewCode(e.target.value)} onChange={(e) => editingId ? setEditCode(e.target.value) : setNewCode(e.target.value)}
placeholder="مثال: C2F2" 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 <motion.button
onClick={() => handleAddLocation(newCode)} whileTap={{ scale: 0.95 }}
onClick={() => handleAddOrEdit()}
disabled={loading} 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"
> >
ثبت دستی {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} />)}
</button> </motion.button>
</div> </div>
<div className="mt-4 border-t pt-4"> <div className="relative overflow-hidden rounded-[16px]">
{cameraEnabled ? ( <AnimatePresence>
<div className="w-full aspect-video relative flex flex-col items-center justify-center bg-gray-100 rounded"> {cameraEnabled && (
{camError ? ( <motion.div
<div className="text-red-500 text-xs p-4 text-center">{camError}</div> initial={{ height: 0, opacity: 0 }}
) : ( animate={{ height: 'auto', opacity: 1 }}
<Scanner onScan={handleScan} onError={handleError} /> exit={{ height: 0, opacity: 0 }}
)} className="w-full aspect-video relative flex flex-col items-center justify-center bg-black overflow-hidden"
<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"
> >
بستن دوربین {camError ? (
</button> <div className="text-red-400 text-xs p-4 text-center font-medium">{camError}</div>
</div> ) : (
) : ( <div className="w-full h-full [&>div]:!object-cover [&>div>video]:!object-cover">
<button <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)} 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> </div>
<div className="w-full bg-white p-4 rounded shadow border border-gray-200"> {/* List Section */}
<h2 className="font-bold mb-4">قفسه های ثبت شده ({filteredLocations.length})</h2> <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 && ( {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 <button
onClick={() => setActiveFilter('all')} 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> </button>
@@ -154,7 +213,7 @@ export default function AdminLocations() {
<button <button
key={floor} key={floor}
onClick={() => setActiveFilter(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} طبقه {floor}
</button> </button>
@@ -162,18 +221,83 @@ export default function AdminLocations() {
</div> </div>
)} )}
<div className="flex flex-col gap-2 max-h-[300px] overflow-y-auto pr-1"> {/* Cards */}
{filteredLocations.map((loc) => ( <div className="flex flex-col gap-3">
<div key={loc.id} className="flex justify-between items-center bg-gray-50 p-2 rounded border border-gray-100 text-sm"> {filteredLocations.map((loc) => {
<span className="font-bold text-lg text-purple-700">{loc.code}</span> const hasData = loc._count?.countings > 0;
<span className="text-gray-500 text-xs">طبقه {loc.floor} | منطقه {loc.region} | قطاع {loc.sector} | ردیف {loc.row}</span> 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> </div>
))} )}
{filteredLocations.length === 0 && <span className="text-center text-sm text-gray-400 py-4">موردی یافت نشد.</span>}
</div> </div>
</div> </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> </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() { export async function GET() {
try { try {
const locations = await prisma.location.findMany({ const locations = await prisma.location.findMany({
include: { _count: { select: { countings: true } } },
orderBy: [{ floor: 'asc' }, { region: 'asc' }, { sector: 'asc' }, { row: 'asc' }] orderBy: [{ floor: 'asc' }, { region: 'asc' }, { sector: 'asc' }, { row: 'asc' }]
}); });
return NextResponse.json(locations); return NextResponse.json(locations);
src/app/layout.js
+2 -2
View File
@@ -9,8 +9,8 @@ export const viewport = {
} }
export const metadata = { export const metadata = {
title: 'پردیس رایانه - انبارگردانی', title: 'سیستم انبارداری',
description: 'اپلیکیشن انبارگردانی پردیس', description: 'اپلیکیشن مدیریت انبار',
manifest: "/manifest.json", manifest: "/manifest.json",
appleWebApp: { appleWebApp: {
capable: true, 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" className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-gray-50/50 backdrop-blur-md"
> >
<motion.div <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 }} animate={{ scale: 1, opacity: 1, y: 0 }}
transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1], delay: 0.2 }} 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 <img src="/icons/icon-512x512.png" alt="انبارداری" className="w-full h-full object-contain drop-shadow-xl" />
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>
</motion.div> </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> </motion.div>
) : showInstall ? ( ) : showInstall ? (
<motion.div <motion.div
@@ -156,8 +113,8 @@ export default function EntryPage() {
transition={{ duration: 0.6 }} 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" 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"> <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-cover" /> <img src="/icons/icon-512x512.png" alt="انبارداری" className="w-full h-full object-contain drop-shadow-md" />
</div> </div>
<h2 className="text-2xl font-black text-gray-800 tracking-tight mb-3 text-center"> <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" 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"> <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> </div>
<h2 className="text-2xl font-black text-gray-800 tracking-tight mb-2"> <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'; 'use client';
import { useState, useEffect } from 'react'; import { useState } from 'react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import Header from '@/components/Header'; import Header from '@/components/Header';
import dynamic from 'next/dynamic'; 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 }); const Scanner = dynamic(() => import('@yudiel/react-qr-scanner').then(mod => mod.Scanner), { ssr: false });
export default function ScanPage() { export default function ScanPage() {
@@ -26,7 +28,7 @@ export default function ScanPage() {
setCameraEnabled(false); setCameraEnabled(false);
setTimeout(() => { setTimeout(() => {
router.push(`/counting?code=${scannedValue}&warehouse=${warehouse}`); router.push(`/counting?code=${scannedValue}&warehouse=${warehouse}`);
}, 1500); }, 500);
} }
}; };
@@ -34,76 +36,113 @@ export default function ScanPage() {
console.error(error); console.error(error);
const msg = error?.message || error?.name || ''; const msg = error?.message || error?.name || '';
if (msg.includes('Requested device not found') || msg.includes('NotFoundError') || msg.includes('device not found')) { if (msg.includes('Requested device not found') || msg.includes('NotFoundError') || msg.includes('device not found')) {
setCamError('هیچ دوربینی روی این دستگاه یافت نشد. لطفاً از لپ‌تاپ یا موبایل استفاده کنید.'); setCamError('دوربینی روی این دستگاه یافت نشد. لطفاً از لپ‌تاپ یا موبایل استفاده کنید.');
} else { } else {
setCamError(msg || 'خطا در دسترسی به دوربین. آیا از HTTPS یا localhost استفاده میکنید؟'); setCamError(msg || 'خطا در دسترسی به دوربین.');
} }
}; };
return ( return (
<div className="w-full min-h-screen bg-gray-50 flex flex-col pb-20"> <div className="w-full min-h-screen bg-gray-50 flex flex-col pb-24">
<Header title="اسکن کد کالا" showBack={true} /> <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"> {/* Camera Area */}
{cameraEnabled ? ( <div className="w-full relative mb-8">
<div className="w-full h-full relative"> <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'}`}>
{camError ? ( {cameraEnabled ? (
<div className="text-red-500 text-xs p-4 text-center">{camError}</div> <div className="w-full h-full relative">
) : ( {camError ? (
<Scanner <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>
onScan={handleScan} ) : (
onError={handleError} <div className="w-full h-full [&>div]:!object-cover [&>div>video]:!object-cover">
formats={['qr_code', 'code_128', 'ean_13']} <Scanner
/> onScan={handleScan}
)} onError={handleError}
<button formats={['qr_code', 'code_128', 'ean_13']}
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>
)}
{/* 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"
> >
بستن دوربین <div className="w-16 h-16 rounded-[20px] bg-indigo-50 flex items-center justify-center text-indigo-500">
</button> <ScanLine size={32} strokeWidth={2} />
</div> </div>
) : ( <div className="flex flex-col items-center">
<button <span className="text-sm font-extrabold text-gray-800 mb-1">فعال‌سازی دوربین</span>
onClick={() => setCameraEnabled(true)} <span className="text-xs font-medium text-gray-400">برای اسکن بارکد کالا کلیک کنید</span>
className="text-blue-500 font-bold px-4 py-2" </div>
> </motion.button>
فعال کردن دوربین برای اسکن )}
</button> </div>
)}
</div> </div>
<p className="text-sm text-gray-500">کد کالا را اسکن یا وارد کنید</p> {/* Manual Input */}
<div className="w-full flex flex-col gap-4">
<input <div className="relative">
type="number" <div className="absolute inset-y-0 left-5 flex items-center pointer-events-none">
dir="ltr" <Search className="text-gray-400" size={18} strokeWidth={2.5} />
value={code} </div>
onChange={(e) => setCode(e.target.value)} <input
placeholder="ورود دستی کد" type="number"
className="w-full max-w-xs text-center text-3xl p-4 border rounded-lg focus:ring-2 focus:ring-purple-500 outline-none" dir="ltr"
/> value={code}
onChange={(e) => setCode(e.target.value)}
<select placeholder="ورود دستی کد کالا..."
value={warehouse} 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"
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" </div>
>
<option value="11">مرکزی</option> <div className="relative">
<option value="13">انبار فروشگاه</option> <div className="absolute inset-y-0 left-5 flex items-center pointer-events-none">
<option value="14">انبار کارگاه شارژ</option> <ChevronDown className="text-gray-400" size={18} strokeWidth={2.5} />
<option value="15">انبار کارگاه تعمیرات</option> </div>
</select> <select
value={warehouse}
<button onChange={(e) => setWarehouse(e.target.value)}
onClick={handleGoToCounting} 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"
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" <option value="11">انبار مرکزی (11)</option>
> <option value="13">انبار فروشگاه (13)</option>
شمارش <option value="14">انبار کارگاه شارژ (14)</option>
</button> <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>
</div> </div>
); );