275 lines
14 KiB
JavaScript
275 lines
14 KiB
JavaScript
'use client';
|
||
import { useState, useEffect } from 'react';
|
||
import Header from '@/components/Header';
|
||
import { Save, EyeOff, ShieldCheck, Check, AlertCircle, XCircle } from 'lucide-react';
|
||
import { motion, AnimatePresence } from 'framer-motion';
|
||
|
||
export default function SettingsPage() {
|
||
const [settings, setSettings] = useState({
|
||
blind_counting: false,
|
||
correction_roles: ['ADMIN', 'SUPERVISOR'],
|
||
uncounted_shelf_days: 10
|
||
});
|
||
const [loading, setLoading] = useState(true);
|
||
const [saving, setSaving] = useState(false);
|
||
const [toast, setToast] = useState({ show: false, message: '', isError: false });
|
||
|
||
const availableRoles = [
|
||
{ id: 'ADMIN', label: 'مدیر کل' },
|
||
{ id: 'SUPERVISOR', label: 'سرپرست انبار' },
|
||
{ id: 'ACCOUNTANT', label: 'حسابدار' },
|
||
{ id: 'COUNTER', label: 'انبارگردان' }
|
||
];
|
||
|
||
const showToast = (message, isError = false) => {
|
||
setToast({ show: true, message, isError });
|
||
setTimeout(() => setToast({ show: false, message: '', isError: false }), 3000);
|
||
};
|
||
|
||
useEffect(() => {
|
||
fetchSettings();
|
||
}, []);
|
||
|
||
const fetchSettings = async () => {
|
||
try {
|
||
const res = await fetch('/api/settings');
|
||
if (res.ok) {
|
||
const data = await res.json();
|
||
setSettings(prev => ({ ...prev, ...data }));
|
||
}
|
||
} catch (error) {
|
||
console.error(error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleSave = async () => {
|
||
setSaving(true);
|
||
try {
|
||
const res = await fetch('/api/settings', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(settings)
|
||
});
|
||
if (res.ok) {
|
||
showToast('تنظیمات با موفقیت ذخیره شد');
|
||
} else {
|
||
showToast('خطا در ذخیره تنظیمات', true);
|
||
}
|
||
} catch (error) {
|
||
console.error(error);
|
||
showToast('خطای شبکه', true);
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
const toggleRole = (roleId) => {
|
||
setSettings(prev => {
|
||
const roles = prev.correction_roles || [];
|
||
if (roles.includes(roleId)) {
|
||
return { ...prev, correction_roles: roles.filter(r => r !== roleId) };
|
||
} else {
|
||
return { ...prev, correction_roles: [...roles, roleId] };
|
||
}
|
||
});
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="w-full min-h-screen bg-gray-50 flex flex-col">
|
||
<Header title="تنظیمات سیستم" showBack={true} />
|
||
<div className="flex-1 flex justify-center items-center">
|
||
<div className="w-8 h-8 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="w-full min-h-screen bg-gray-50 flex flex-col pb-24 relative overflow-x-hidden">
|
||
<Header title="تنظیمات سیستم" showBack={true} />
|
||
|
||
<div className="flex-1 p-5 flex flex-col gap-6 max-w-lg mx-auto w-full mt-2">
|
||
<div className="w-full bg-white rounded-[24px] p-6 shadow-sm border border-gray-100 flex flex-col gap-8">
|
||
|
||
{/* Blind Counting Setting */}
|
||
<div className="flex items-start justify-between gap-4 border-b border-gray-50 pb-8">
|
||
<div className="flex-1 pr-2">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<div className="w-8 h-8 rounded-[12px] bg-purple-50 text-purple-600 flex items-center justify-center shrink-0">
|
||
<EyeOff size={16} strokeWidth={2.5} />
|
||
</div>
|
||
<h2 className="text-sm font-bold text-gray-800">شمارش کور (Blind Counting)</h2>
|
||
</div>
|
||
<p className="text-xs text-gray-500 leading-relaxed">
|
||
در صورت فعال بودن، انبارگردانها موجودی فعلی سیستم را نمیبینند و مجبورند به جای تایید کورکورانه، کالاها را به صورت واقعی بشمارند.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Elegant Switch Button */}
|
||
<button
|
||
onClick={() => setSettings(s => ({ ...s, blind_counting: !s.blind_counting }))}
|
||
className={`relative inline-flex h-8 w-14 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 ${settings.blind_counting ? 'bg-indigo-600' : 'bg-gray-200'}`}
|
||
role="switch"
|
||
aria-checked={settings.blind_counting}
|
||
>
|
||
<span
|
||
className={`pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow-md ring-0 transition-transform duration-300 ${settings.blind_counting ? '-translate-x-6' : 'translate-x-0'}`}
|
||
/>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Show Suggested Shelves Setting */}
|
||
<div className="flex items-start justify-between gap-4 border-b border-gray-50 pb-8">
|
||
<div className="flex-1 pr-2">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<div className="w-8 h-8 rounded-[12px] bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0">
|
||
<AlertCircle size={16} strokeWidth={2.5} />
|
||
</div>
|
||
<h2 className="text-sm font-bold text-gray-800">پیشنهاد قفسههای شمارشنشده</h2>
|
||
</div>
|
||
<p className="text-xs text-gray-500 leading-relaxed">
|
||
در صورت فعال بودن، در صفحه داشبورد لیستی از قفسههایی که مدتی شمارش نشدهاند به کاربر پیشنهاد داده میشود.
|
||
</p>
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => setSettings(s => ({ ...s, show_suggested_shelves: s.show_suggested_shelves === undefined ? false : !s.show_suggested_shelves }))}
|
||
className={`relative inline-flex h-8 w-14 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 ${(settings.show_suggested_shelves ?? true) ? 'bg-emerald-600' : 'bg-gray-200'}`}
|
||
role="switch"
|
||
aria-checked={settings.show_suggested_shelves ?? true}
|
||
>
|
||
<span
|
||
className={`pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow-md ring-0 transition-transform duration-300 ${(settings.show_suggested_shelves ?? true) ? '-translate-x-6' : 'translate-x-0'}`}
|
||
/>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Enable Counting Modes */}
|
||
<div className="border-t border-gray-50 pt-8 flex flex-col gap-5">
|
||
<div className="flex items-center gap-2 mb-1">
|
||
<div className="w-8 h-8 rounded-[12px] bg-blue-50 text-blue-600 flex items-center justify-center shrink-0">
|
||
<Check size={16} strokeWidth={2.5} />
|
||
</div>
|
||
<h2 className="text-sm font-bold text-gray-800">حالتهای انبارگردانی</h2>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between gap-4">
|
||
<p className="text-xs text-gray-500 leading-relaxed font-bold">انبارگردانی قفسهای</p>
|
||
<button
|
||
onClick={() => setSettings(s => ({ ...s, enable_shelf_counting: s.enable_shelf_counting === undefined ? true : !s.enable_shelf_counting }))}
|
||
className={`relative inline-flex h-8 w-14 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-300 focus:outline-none ${(settings.enable_shelf_counting ?? true) ? 'bg-blue-600' : 'bg-gray-200'}`}
|
||
>
|
||
<span className={`pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow-md ring-0 transition-transform duration-300 ${(settings.enable_shelf_counting ?? true) ? '-translate-x-6' : 'translate-x-0'}`} />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between gap-4">
|
||
<p className="text-xs text-gray-500 leading-relaxed font-bold">انبارگردانی کالایی</p>
|
||
<button
|
||
onClick={() => setSettings(s => ({ ...s, enable_item_counting: s.enable_item_counting === undefined ? true : !s.enable_item_counting }))}
|
||
className={`relative inline-flex h-8 w-14 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-300 focus:outline-none ${(settings.enable_item_counting ?? true) ? 'bg-blue-600' : 'bg-gray-200'}`}
|
||
>
|
||
<span className={`pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow-md ring-0 transition-transform duration-300 ${(settings.enable_item_counting ?? true) ? '-translate-x-6' : 'translate-x-0'}`} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Correction Roles Setting */}
|
||
<div>
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<div className="w-8 h-8 rounded-[12px] bg-blue-50 text-blue-600 flex items-center justify-center shrink-0">
|
||
<ShieldCheck size={16} strokeWidth={2.5} />
|
||
</div>
|
||
<h2 className="text-sm font-bold text-gray-800">دسترسی ثبت اصلاحیه</h2>
|
||
</div>
|
||
<p className="text-xs text-gray-500 leading-relaxed mb-5">
|
||
وقتی انبارگردانی یک قفسه بسته میشود، چه نقشهایی اجازه دارند درخواست اصلاحیه ثبت کنند؟
|
||
</p>
|
||
|
||
<div className="grid grid-cols-2 gap-3">
|
||
{availableRoles.map(role => {
|
||
const isSelected = settings.correction_roles?.includes(role.id);
|
||
return (
|
||
<motion.button
|
||
whileTap={{ scale: 0.97 }}
|
||
key={role.id}
|
||
onClick={() => toggleRole(role.id)}
|
||
className={`flex items-center justify-between p-3.5 rounded-[16px] border text-xs font-bold transition-all ${
|
||
isSelected
|
||
? 'border-indigo-500 bg-indigo-50 text-indigo-700 shadow-sm'
|
||
: 'border-gray-200 bg-white text-gray-600 hover:border-gray-300 hover:bg-gray-50'
|
||
}`}
|
||
>
|
||
{role.label}
|
||
<div className={`w-5 h-5 rounded-full flex items-center justify-center transition-colors ${isSelected ? 'bg-indigo-500 text-white' : 'bg-gray-100 text-transparent'}`}>
|
||
<Check size={12} strokeWidth={3} />
|
||
</div>
|
||
</motion.button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Uncounted Shelves Warning Days */}
|
||
<div className="border-t border-gray-50 pt-8">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<div className="w-8 h-8 rounded-[12px] bg-orange-50 text-orange-600 flex items-center justify-center shrink-0">
|
||
<AlertCircle size={16} strokeWidth={2.5} />
|
||
</div>
|
||
<h2 className="text-sm font-bold text-gray-800">هشدار قفسههای شمارشنشده</h2>
|
||
</div>
|
||
<p className="text-xs text-gray-500 leading-relaxed mb-4">
|
||
قفسههایی که بیشتر از این تعداد روز از آخرین انبارگردانیشان گذشته باشد، در صفحه اصلی برای شمارش مجدد پیشنهاد میشوند.
|
||
</p>
|
||
|
||
<div className="flex items-center gap-3 bg-gray-50 p-4 rounded-[16px] border border-gray-100">
|
||
<input
|
||
type="number"
|
||
min="1"
|
||
max="365"
|
||
value={settings.uncounted_shelf_days || 10}
|
||
onChange={e => setSettings(s => ({ ...s, uncounted_shelf_days: Number(e.target.value) }))}
|
||
className="w-20 bg-white border border-gray-200 rounded-[12px] px-3 py-2 text-center font-black text-gray-800 focus:outline-none focus:border-indigo-500 transition-colors"
|
||
/>
|
||
<span className="text-sm font-bold text-gray-600">روز</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<motion.button
|
||
whileTap={{ scale: 0.98 }}
|
||
onClick={handleSave}
|
||
disabled={saving}
|
||
className="w-full mt-4 flex items-center justify-center gap-2 bg-gray-900 text-white px-6 py-4 rounded-[16px] text-sm font-extrabold shadow-md hover:bg-gray-800 transition-colors disabled:opacity-70"
|
||
>
|
||
{saving ? (
|
||
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
|
||
) : (
|
||
<>
|
||
<Save size={18} strokeWidth={2.5} />
|
||
ذخیره تغییرات
|
||
</>
|
||
)}
|
||
</motion.button>
|
||
</div>
|
||
|
||
<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} /> : <Check size={14} />}
|
||
{toast.message}
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
);
|
||
}
|