feat: unified sticky header and removed redundant titles
This commit is contained in:
@@ -142,14 +142,6 @@ export default function AdminLocations() {
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
@@ -44,7 +44,7 @@ export default function AdminDashboard() {
|
||||
<div className="w-12 h-12 bg-indigo-50 text-indigo-500 rounded-2xl flex items-center justify-center mb-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
</div>
|
||||
<span className="font-extrabold text-xs text-center text-gray-700">تنظیمات و انبارها</span>
|
||||
<span className="font-extrabold text-xs text-center text-gray-700">تنظیمات مدیریت</span>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
@@ -53,7 +53,7 @@ export default function AdminDashboard() {
|
||||
<div className="w-12 h-12 bg-purple-50 text-purple-600 rounded-2xl flex items-center justify-center mb-1">
|
||||
<Layers strokeWidth={1.5} size={24} />
|
||||
</div>
|
||||
<span className="font-extrabold text-xs text-center text-gray-700">وضعیت قفسهها</span>
|
||||
<span className="font-extrabold text-xs text-center text-gray-700">مدیریت قفسهها</span>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
@@ -91,7 +91,7 @@ export default function AdminDashboard() {
|
||||
<div className="w-10 h-10 bg-indigo-50 text-indigo-500 rounded-xl flex items-center justify-center">
|
||||
<Users strokeWidth={1.5} size={20} />
|
||||
</div>
|
||||
<span className="font-extrabold text-sm text-gray-800">مدیریت کاربران و گزارشات</span>
|
||||
<span className="font-extrabold text-sm text-gray-800">کاربران</span>
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-gray-50 rounded-full flex items-center justify-center">
|
||||
<svg className="w-4 h-4 text-gray-400 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" /></svg>
|
||||
|
||||
@@ -92,11 +92,6 @@ export default function SettingsPage() {
|
||||
<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="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 */}
|
||||
|
||||
@@ -96,16 +96,6 @@ export default function WarehousesPage() {
|
||||
|
||||
<div className="flex-1 p-4 md:p-6 flex flex-col gap-6 max-w-lg mx-auto w-full mt-2">
|
||||
|
||||
<div className="flex flex-col mb-2">
|
||||
<h2 className="text-xl font-black text-gray-800 tracking-tight flex items-center gap-2">
|
||||
<Server className="text-indigo-600" size={24} strokeWidth={2.5} />
|
||||
مدیریت انبارهای حسابفا
|
||||
</h2>
|
||||
<p className="text-xs text-gray-500 font-medium mt-2 leading-relaxed">
|
||||
کد انبار باید دقیقاً منطبق با کد انبار در سیستم حسابفا باشد. با افزودن انبار در اینجا، دسترسی کاربران به آن در اپلیکیشن فعال میشود.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Add New Warehouse */}
|
||||
<div className="bg-white rounded-[24px] p-5 shadow-sm border border-gray-100 flex flex-col gap-4 relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-16 h-16 bg-indigo-50/50 rounded-bl-full -z-0"></div>
|
||||
|
||||
+20
-48
@@ -29,37 +29,36 @@ export default function Header({ title = 'داشبورد', showBack = false }) {
|
||||
return name.charAt(0);
|
||||
};
|
||||
|
||||
if (!showBack) {
|
||||
// Style 4: Modern Floating Island (Pill) Design
|
||||
return (
|
||||
<motion.header
|
||||
initial={{ y: -50, opacity: 0 }}
|
||||
initial={{ y: -20, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ type: 'spring', stiffness: 300, damping: 24 }}
|
||||
className="mx-4 mt-6 mb-4 p-2 bg-white/70 backdrop-blur-xl border border-white rounded-[28px] flex items-center justify-between shadow-[0_8px_30px_rgb(0,0,0,0.04)]"
|
||||
className="sticky top-4 z-50 mx-4 mb-6 p-2 bg-white/80 backdrop-blur-xl border border-white rounded-[24px] flex items-center justify-between shadow-[0_8px_30px_rgb(0,0,0,0.06)]"
|
||||
>
|
||||
<Link href="/settings" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
|
||||
<div className="w-12 h-12 bg-gradient-to-tr from-purple-600 to-indigo-500 rounded-[20px] flex items-center justify-center text-white text-lg font-bold shadow-md shadow-purple-500/20 overflow-hidden">
|
||||
{user?.avatarUrl ? (
|
||||
<img src={user.avatarUrl} alt={user.name} className="w-full h-full object-cover" />
|
||||
<div className="flex items-center gap-2">
|
||||
{showBack ? (
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="w-10 h-10 bg-gray-50 text-gray-700 rounded-[18px] hover:bg-gray-100 transition-all flex items-center justify-center"
|
||||
>
|
||||
<ChevronRight size={20} strokeWidth={2.5} />
|
||||
</button>
|
||||
) : (
|
||||
getInitial(user?.name)
|
||||
<div className="w-10 h-10 bg-indigo-50 text-indigo-600 rounded-[18px] flex items-center justify-center font-black text-sm">
|
||||
{getInitial(user?.name)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col pr-1">
|
||||
<span className="text-[10px] text-gray-400 font-extrabold tracking-wider mb-0.5">پردیس رایانه</span>
|
||||
<span className="text-sm font-black text-gray-800 tracking-tight">
|
||||
{user?.name || 'کاربر'}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-2 pl-1">
|
||||
{user?.roles?.includes('ADMIN') && (
|
||||
<div className="font-extrabold text-sm text-gray-800 absolute left-1/2 -translate-x-1/2 whitespace-nowrap">
|
||||
{title}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5">
|
||||
{!showBack && user?.roles?.includes('ADMIN') && (
|
||||
<Link
|
||||
href="/admin"
|
||||
className="w-10 h-10 bg-gray-50 text-gray-600 rounded-[18px] hover:bg-gray-100 transition-colors flex items-center justify-center"
|
||||
title="پنل مدیریت"
|
||||
>
|
||||
<Settings size={18} strokeWidth={2.5} />
|
||||
</Link>
|
||||
@@ -67,37 +66,10 @@ export default function Header({ title = 'داشبورد', showBack = false }) {
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="w-10 h-10 bg-red-50 text-red-500 rounded-[18px] hover:bg-red-100 transition-colors flex items-center justify-center"
|
||||
title="خروج"
|
||||
>
|
||||
<LogOut size={18} strokeWidth={2.5} />
|
||||
<LogOut size={16} strokeWidth={2.5} />
|
||||
</button>
|
||||
</div>
|
||||
</motion.header>
|
||||
);
|
||||
}
|
||||
|
||||
// Inner pages (showBack = true)
|
||||
return (
|
||||
<motion.header
|
||||
initial={{ y: -20, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
className="sticky top-4 z-50 mx-4 mb-6 p-2 bg-white/80 backdrop-blur-xl border border-white rounded-[24px] flex items-center justify-between shadow-[0_8px_30px_rgb(0,0,0,0.06)]"
|
||||
>
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="w-10 h-10 bg-gray-50 text-gray-700 rounded-[18px] hover:bg-gray-100 transition-all flex items-center justify-center"
|
||||
>
|
||||
<ChevronRight size={20} strokeWidth={2.5} />
|
||||
</button>
|
||||
|
||||
<div className="font-extrabold text-sm text-gray-800 absolute left-1/2 -translate-x-1/2">
|
||||
{title}
|
||||
</div>
|
||||
|
||||
<div className="w-10 h-10 flex items-center justify-center">
|
||||
{/* Decorative dot for symmetry */}
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-gray-300"></div>
|
||||
</div>
|
||||
</motion.header>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user