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

feat: redesign settings, add warehouse/user/product management, update location schema

Browse Source
This commit is contained in:
DrMesta103
2026-06-12 11:44:05 +03:30
parent 8104224a5a
commit 4675d7ce27
11 changed files with 740 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/admin/settings/page.js
+103 -131
View File
@@ -1,7 +1,8 @@
'use client';
import { useState, useEffect } from 'react';
import { Save, EyeOff, ShieldCheck, Check } from 'lucide-react';
import { motion } from 'framer-motion';
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({
@@ -10,7 +11,7 @@ export default function SettingsPage() {
});
const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false);
const [saved, setSaved] = useState(false);
const [toast, setToast] = useState({ show: false, message: '', isError: false });
const availableRoles = [
{ id: 'ADMIN', label: 'مدیر کل' },
@@ -19,6 +20,11 @@ export default function SettingsPage() {
{ id: 'COUNTER', label: 'انبارگردان' }
];
const showToast = (message, isError = false) => {
setToast({ show: true, message, isError });
setTimeout(() => setToast({ show: false, message: '', isError: false }), 3000);
};
useEffect(() => {
fetchSettings();
}, []);
@@ -39,7 +45,6 @@ export default function SettingsPage() {
const handleSave = async () => {
setSaving(true);
setSaved(false);
try {
const res = await fetch('/api/settings', {
method: 'POST',
@@ -47,11 +52,13 @@ export default function SettingsPage() {
body: JSON.stringify(settings)
});
if (res.ok) {
setSaved(true);
setTimeout(() => setSaved(false), 3000);
showToast('تنظیمات با موفقیت ذخیره شد');
} else {
showToast('خطا در ذخیره تنظیمات', true);
}
} catch (error) {
console.error(error);
showToast('خطای شبکه', true);
} finally {
setSaving(false);
}
@@ -68,158 +75,123 @@ export default function SettingsPage() {
});
};
if (loading) return <div className="p-8 flex justify-center"><div className="w-8 h-8 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin"></div></div>;
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="max-w-3xl mx-auto p-4 md:p-8 space-y-8">
<div>
<h1 className="text-2xl font-black text-gray-800 tracking-tight">تنظیمات سیستم</h1>
<p className="text-sm text-gray-500 font-medium mt-1">مدیریت قوانین انبارگردانی و دسترسی‌ها</p>
</div>
<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="bg-white rounded-[24px] p-6 shadow-sm border border-gray-100 space-y-8">
{/* Blind Counting Setting */}
<div className="flex items-start justify-between gap-4 border-b border-gray-50 pb-8">
<div className="flex-1 p-5 flex flex-col gap-6 max-w-lg mx-auto w-full mt-2">
<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="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>
{/* Correction Roles Setting */}
<div>
<div className="flex items-center gap-2 mb-2">
<div className="w-8 h-8 rounded-xl bg-purple-50 text-purple-600 flex items-center justify-center">
<EyeOff size={18} />
<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-base font-bold text-gray-800">شمارش کور (Blind Counting)</h2>
<h2 className="text-sm font-bold text-gray-800">دسترسی ثبت اصلاحیه</h2>
</div>
<p className="text-xs text-gray-500 leading-relaxed max-w-lg">
در صورت فعال بودن، انبارگردان‌ها موجودی فعلی سیستم را نمی‌بینند و مجبورند به جای تایید کورکورانه، کالاها را به صورت واقعی بشمارند.
<p className="text-xs text-gray-500 leading-relaxed mb-5">
وقتی انبارگردانی یک قفسه بسته می‌شود، چه نقش‌هایی اجازه دارند درخواست اصلاحیه ثبت کنند؟
</p>
</div>
<button
onClick={() => setSettings(s => ({ ...s, blind_counting: !s.blind_counting }))}
className={`relative inline-flex h-7 w-14 items-center rounded-full transition-colors ${settings.blind_counting ? 'bg-indigo-600' : 'bg-gray-200'}`}
>
<span className={`inline-block h-5 w-5 transform rounded-full bg-white transition-transform shadow-sm ${settings.blind_counting ? '-translate-x-1.5' : '-translate-x-8'}`} />
</button>
</div>
{/* Correction Roles Setting */}
<div>
<div className="flex items-center gap-2 mb-2">
<div className="w-8 h-8 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center">
<ShieldCheck size={18} />
</div>
<h2 className="text-base font-bold text-gray-800">دسترسی ثبت اصلاحیه</h2>
</div>
<p className="text-xs text-gray-500 leading-relaxed mb-4">
وقتی انبارگردانی یک قفسه بسته می‌شود، چه نقش‌هایی اجازه دارند درخواست اصلاحیه ثبت کنند؟ (حالت چندانتخابی)
</p>
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
{availableRoles.map(role => {
const isSelected = settings.correction_roles?.includes(role.id);
return (
<button
key={role.id}
onClick={() => toggleRole(role.id)}
className={`flex items-center justify-between p-4 rounded-[16px] border text-xs font-bold transition-all ${
isSelected
? 'border-blue-500 bg-blue-50 text-blue-700'
: 'border-gray-200 bg-white text-gray-600 hover:border-gray-300'
}`}
>
{role.label}
{isSelected && <Check size={14} />}
</button>
);
})}
</div>
</div>
{/* Warehouses Setting */}
<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-xl bg-orange-50 text-orange-600 flex items-center justify-center">
<span className="font-black text-sm">WH</span>
</div>
<h2 className="text-base font-bold text-gray-800">مدیریت انبارهای حسابفا</h2>
</div>
<p className="text-xs text-gray-500 leading-relaxed mb-4">
لیست انبارهایی که انبارداران مجاز به انبارگردانی آن‌ها هستند. کد انبار باید دقیقاً با کد حسابفا مطابقت داشته باشد.
</p>
<div className="flex flex-col gap-3">
{settings.warehouses?.map((wh) => (
<div key={wh.id} className="flex items-center justify-between p-3 rounded-[16px] border border-gray-200 bg-gray-50">
<div className="flex items-center gap-3">
<div className="bg-gray-200 text-gray-600 px-3 py-1 rounded-lg text-xs font-black">کد: {wh.id}</div>
<span className="text-sm font-bold text-gray-800">{wh.name}</span>
</div>
<button
onClick={() => setSettings(s => ({ ...s, warehouses: s.warehouses.filter(w => w.id !== wh.id) }))}
className="text-red-500 hover:bg-red-50 p-2 rounded-xl transition-colors"
>
حذف
</button>
</div>
))}
<div className="flex gap-2 mt-2">
<input
type="number"
placeholder="کد انبار..."
id="wh_id"
className="w-24 bg-white border border-gray-200 rounded-[16px] px-3 py-2 text-sm focus:outline-none focus:border-indigo-500"
/>
<input
type="text"
placeholder="نام انبار..."
id="wh_name"
className="flex-1 bg-white border border-gray-200 rounded-[16px] px-3 py-2 text-sm focus:outline-none focus:border-indigo-500"
/>
<button
onClick={() => {
const id = document.getElementById('wh_id').value;
const name = document.getElementById('wh_name').value;
if (id && name) {
setSettings(s => ({
...s,
warehouses: [...(s.warehouses || []), { id, name }]
}));
document.getElementById('wh_id').value = '';
document.getElementById('wh_name').value = '';
}
}}
className="bg-indigo-50 text-indigo-600 px-4 py-2 rounded-[16px] text-xs font-bold hover:bg-indigo-100 transition-colors"
>
افزودن
</button>
<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>
</div>
</div>
<div className="flex justify-end">
<motion.button
whileTap={{ scale: 0.97 }}
whileTap={{ scale: 0.98 }}
onClick={handleSave}
disabled={saving}
className="flex items-center gap-2 bg-gray-900 text-white px-8 py-4 rounded-[20px] text-sm font-bold shadow-md hover:bg-gray-800 transition-colors disabled:opacity-70"
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>
) : saved ? (
<>
<Check size={18} />
ذخیره شد
</>
) : (
<>
<Save size={18} />
<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>
);
}