- Profile Picture\
Donation Tracking\ Validation Rejection\ Subscription Data Export\ Admin Dashboard Logo\ Admin Navbar Reorganization
This commit is contained in:
Koncept Kit
@@ -21,7 +21,8 @@ import {
|
||||
DollarSign,
|
||||
Scale,
|
||||
HardDrive,
|
||||
Repeat
|
||||
Repeat,
|
||||
Heart
|
||||
} from 'lucide-react';
|
||||
|
||||
const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
|
||||
@@ -123,6 +124,12 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
|
||||
path: '/admin/subscriptions',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: 'Donations',
|
||||
icon: Heart,
|
||||
path: '/admin/donations',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: 'Events',
|
||||
icon: Calendar,
|
||||
@@ -177,6 +184,73 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
|
||||
return location.pathname.startsWith(path);
|
||||
};
|
||||
|
||||
const renderNavItem = (item) => {
|
||||
if (!item) return null;
|
||||
|
||||
const Icon = item.icon;
|
||||
const active = isActive(item.path);
|
||||
|
||||
return (
|
||||
<div key={item.name} className="relative group">
|
||||
<Link
|
||||
to={item.disabled ? '#' : item.path}
|
||||
onClick={(e) => {
|
||||
if (item.disabled) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
className={`
|
||||
flex items-center gap-3 px-4 py-3 rounded-lg transition-all relative
|
||||
${item.disabled
|
||||
? 'opacity-50 cursor-not-allowed text-[#664fa3]'
|
||||
: active
|
||||
? 'bg-[#ff9e77]/10 text-[#ff9e77]'
|
||||
: 'text-[#422268] hover:bg-[#DDD8EB]/20'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{/* Active border */}
|
||||
{active && !item.disabled && (
|
||||
<div className="absolute left-0 top-0 bottom-0 w-1 bg-[#ff9e77] rounded-r" />
|
||||
)}
|
||||
|
||||
<Icon className="h-5 w-5 flex-shrink-0" />
|
||||
|
||||
{isOpen && (
|
||||
<>
|
||||
<span className="flex-1">{item.name}</span>
|
||||
{item.disabled && (
|
||||
<Badge className="bg-[#DDD8EB] text-[#422268] text-xs px-2 py-0.5">
|
||||
Soon
|
||||
</Badge>
|
||||
)}
|
||||
{item.badge > 0 && !item.disabled && (
|
||||
<Badge className="bg-[#ff9e77] text-white text-xs px-2 py-0.5">
|
||||
{item.badge}
|
||||
</Badge>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Badge when collapsed */}
|
||||
{!isOpen && item.badge > 0 && !item.disabled && (
|
||||
<div className="absolute -top-1 -right-1 bg-[#ff9e77] text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-medium">
|
||||
{item.badge}
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
|
||||
{/* Tooltip when collapsed */}
|
||||
{!isOpen && (
|
||||
<div className="absolute left-full ml-2 top-1/2 -translate-y-1/2 px-3 py-2 bg-[#422268] text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
|
||||
{item.name}
|
||||
{item.badge > 0 && ` (${item.badge})`}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Sidebar */}
|
||||
@@ -191,14 +265,23 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-[#ddd8eb]">
|
||||
{isOpen && (
|
||||
<h2 className="text-xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Admin
|
||||
</h2>
|
||||
)}
|
||||
<div className="flex items-center gap-3">
|
||||
<img
|
||||
src={`${process.env.PUBLIC_URL}/loaf-logo.png`}
|
||||
alt="LOAF Logo"
|
||||
className={`object-contain transition-all duration-200 ${
|
||||
isOpen ? 'h-10 w-10' : 'h-8 w-8'
|
||||
}`}
|
||||
/>
|
||||
{isOpen && (
|
||||
<h2 className="text-xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Admin
|
||||
</h2>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className="p-2 rounded-lg hover:bg-[#DDD8EB]/20 transition-colors ml-auto"
|
||||
className="p-2 rounded-lg hover:bg-[#DDD8EB]/20 transition-colors"
|
||||
aria-label={isOpen ? 'Collapse sidebar' : 'Expand sidebar'}
|
||||
>
|
||||
{isMobile ? (
|
||||
@@ -212,71 +295,71 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 overflow-y-auto p-4 space-y-2">
|
||||
{filteredNavItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const active = isActive(item.path);
|
||||
<nav className="flex-1 overflow-y-auto p-4">
|
||||
{/* Dashboard - Standalone */}
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Dashboard'))}
|
||||
|
||||
return (
|
||||
<div key={item.name} className="relative group">
|
||||
<Link
|
||||
to={item.disabled ? '#' : item.path}
|
||||
onClick={(e) => {
|
||||
if (item.disabled) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
className={`
|
||||
flex items-center gap-3 px-4 py-3 rounded-lg transition-all relative
|
||||
${item.disabled
|
||||
? 'opacity-50 cursor-not-allowed text-[#664fa3]'
|
||||
: active
|
||||
? 'bg-[#ff9e77]/10 text-[#ff9e77]'
|
||||
: 'text-[#422268] hover:bg-[#DDD8EB]/20'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{/* Active border */}
|
||||
{active && !item.disabled && (
|
||||
<div className="absolute left-0 top-0 bottom-0 w-1 bg-[#ff9e77] rounded-r" />
|
||||
)}
|
||||
{/* MEMBERSHIP Section */}
|
||||
{isOpen && (
|
||||
<div className="px-4 py-2 mt-6">
|
||||
<h3 className="text-xs font-semibold text-[#664fa3] uppercase tracking-wider">
|
||||
Membership
|
||||
</h3>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-1">
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Staff'))}
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Members'))}
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Validations'))}
|
||||
</div>
|
||||
|
||||
<Icon className="h-5 w-5 flex-shrink-0" />
|
||||
{/* FINANCIALS Section */}
|
||||
{isOpen && (
|
||||
<div className="px-4 py-2 mt-6">
|
||||
<h3 className="text-xs font-semibold text-[#664fa3] uppercase tracking-wider">
|
||||
Financials
|
||||
</h3>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-1">
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Plans'))}
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Subscriptions'))}
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Donations'))}
|
||||
</div>
|
||||
|
||||
{isOpen && (
|
||||
<>
|
||||
<span className="flex-1">{item.name}</span>
|
||||
{item.disabled && (
|
||||
<Badge className="bg-[#DDD8EB] text-[#422268] text-xs px-2 py-0.5">
|
||||
Soon
|
||||
</Badge>
|
||||
)}
|
||||
{item.badge > 0 && !item.disabled && (
|
||||
<Badge className="bg-[#ff9e77] text-white text-xs px-2 py-0.5">
|
||||
{item.badge}
|
||||
</Badge>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{/* EVENTS & MEDIA Section */}
|
||||
{isOpen && (
|
||||
<div className="px-4 py-2 mt-6">
|
||||
<h3 className="text-xs font-semibold text-[#664fa3] uppercase tracking-wider">
|
||||
Events & Media
|
||||
</h3>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-1">
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Events'))}
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Gallery'))}
|
||||
</div>
|
||||
|
||||
{/* Badge when collapsed */}
|
||||
{!isOpen && item.badge > 0 && !item.disabled && (
|
||||
<div className="absolute -top-1 -right-1 bg-[#ff9e77] text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-medium">
|
||||
{item.badge}
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
{/* DOCUMENTATION Section */}
|
||||
{isOpen && (
|
||||
<div className="px-4 py-2 mt-6">
|
||||
<h3 className="text-xs font-semibold text-[#664fa3] uppercase tracking-wider">
|
||||
Documentation
|
||||
</h3>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-1">
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Newsletters'))}
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Financials'))}
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Bylaws'))}
|
||||
</div>
|
||||
|
||||
{/* Tooltip when collapsed */}
|
||||
{!isOpen && (
|
||||
<div className="absolute left-full ml-2 top-1/2 -translate-y-1/2 px-3 py-2 bg-[#422268] text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
|
||||
{item.name}
|
||||
{item.badge > 0 && ` (${item.badge})`}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{/* Permissions - Superadmin only (no header) */}
|
||||
{user?.role === 'superadmin' && (
|
||||
<div className="mt-6">
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Permissions'))}
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* User Section */}
|
||||
|
||||
Reference in New Issue
Block a user