337 lines
14 KiB
JavaScript
337 lines
14 KiB
JavaScript
'use client';
|
||
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() {
|
||
const [locations, setLocations] = useState([]);
|
||
const [warehouses, setWarehouses] = useState([]);
|
||
const [selectedWarehouse, setSelectedWarehouse] = useState('');
|
||
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();
|
||
fetchSettings();
|
||
}, []);
|
||
|
||
const fetchSettings = async () => {
|
||
try {
|
||
const res = await fetch('/api/settings');
|
||
if (res.ok) {
|
||
const data = await res.json();
|
||
setWarehouses(data.warehouses || []);
|
||
if (data.warehouses?.length > 0) {
|
||
setSelectedWarehouse(data.warehouses[0].id);
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.error(e);
|
||
}
|
||
};
|
||
|
||
const fetchLocations = async () => {
|
||
try {
|
||
const res = await fetch('/api/locations');
|
||
if (res.ok) {
|
||
setLocations(await res.json());
|
||
}
|
||
} catch (e) {
|
||
console.error(e);
|
||
}
|
||
};
|
||
|
||
const handleAddOrEdit = async (codeValue) => {
|
||
const targetCode = editingId ? editCode : (codeValue || newCode);
|
||
if (!targetCode) return;
|
||
if (!selectedWarehouse) {
|
||
showToast('لطفاً ابتدا انبار را انتخاب کنید', true);
|
||
return;
|
||
}
|
||
|
||
setLoading(true);
|
||
try {
|
||
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, warehouse: selectedWarehouse })
|
||
});
|
||
|
||
const data = await res.json();
|
||
if (res.ok) {
|
||
showToast(editingId ? 'قفسه با موفقیت ویرایش شد' : 'قفسه با موفقیت ثبت شد!');
|
||
setNewCode('');
|
||
setEditingId(null);
|
||
setEditCode('');
|
||
fetchLocations();
|
||
} else {
|
||
showToast(data.error || 'خطا در ثبت قفسه', true);
|
||
}
|
||
} catch (e) {
|
||
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;
|
||
handleAddOrEdit(scannedValue);
|
||
}
|
||
};
|
||
|
||
const handleError = (error) => {
|
||
const msg = error?.message || error?.name || '';
|
||
if (msg.includes('Requested device not found')) {
|
||
setCamError('دوربینی یافت نشد.');
|
||
} else {
|
||
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-24 relative">
|
||
<Header title="مدیریت قفسهها" showBack={true} />
|
||
|
||
<div className="flex-1 p-5 flex flex-col gap-6 max-w-md mx-auto w-full mt-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>
|
||
|
||
{/* 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>
|
||
|
||
<select
|
||
value={selectedWarehouse}
|
||
onChange={(e) => setSelectedWarehouse(e.target.value)}
|
||
className="w-full bg-gray-50 border border-gray-200 rounded-[16px] px-4 py-3 text-sm font-bold text-gray-800 focus:outline-none focus:border-indigo-500 transition-colors"
|
||
>
|
||
<option value="" disabled>انبار را انتخاب کنید...</option>
|
||
{warehouses.map(wh => (
|
||
<option key={wh.id} value={wh.id}>{wh.name} (کد: {wh.id})</option>
|
||
))}
|
||
</select>
|
||
|
||
<div className="flex gap-2">
|
||
<input
|
||
type="text"
|
||
dir="ltr"
|
||
value={editingId ? editCode : newCode}
|
||
onChange={(e) => editingId ? setEditCode(e.target.value) : setNewCode(e.target.value)}
|
||
placeholder="مثال: C2F2"
|
||
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"
|
||
/>
|
||
<motion.button
|
||
whileTap={{ scale: 0.95 }}
|
||
onClick={() => handleAddOrEdit()}
|
||
disabled={loading}
|
||
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} />)}
|
||
</motion.button>
|
||
</div>
|
||
|
||
<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"
|
||
>
|
||
{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 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} />
|
||
اسکن بارکد قفسه
|
||
</motion.button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 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-1 scrollbar-hide" style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
|
||
<button
|
||
onClick={() => setActiveFilter('all')}
|
||
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>
|
||
{floors.map(floor => (
|
||
<button
|
||
key={floor}
|
||
onClick={() => setActiveFilter(floor)}
|
||
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>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* 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.warehouse ? `انبار: ${loc.warehouse} • ` : ''}طبقه {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>
|
||
</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>
|
||
);
|
||
}
|