andika/membership-fe
3
1
Fork 1
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

Update FE

Browse Source
This commit is contained in:
Koncept Kit
2025-12-08 20:45:40 +07:00
parent d8c1e133ac
commit 1f27c3224b
23 changed files with 438 additions and 438 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/AdminSidebar.js
View File

@@ -116,7 +116,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
{/* Sidebar */}
<aside
className={`
bg-white border-r border-[#EAE0D5] transition-all duration-300 ease-out
bg-white border-r border-[#ddd8eb] transition-all duration-300 ease-out
${isMobile ? 'fixed inset-y-0 left-0 z-40' : 'relative'}
${isOpen ? 'w-64' : 'w-16'}
${isMobile && !isOpen ? '-translate-x-full' : 'translate-x-0'}
@@ -124,23 +124,23 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
`}
>
{/* Header */}
<div className="flex items-center justify-between p-4 border-b border-[#EAE0D5]">
<div className="flex items-center justify-between p-4 border-b border-[#ddd8eb]">
{isOpen && (
<h2 className="text-xl font-semibold fraunces text-[#3D405B]">
<h2 className="text-xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
Admin
</h2>
)}
<button
onClick={onToggle}
className="p-2 rounded-lg hover:bg-[#F2CC8F]/20 transition-colors ml-auto"
className="p-2 rounded-lg hover:bg-[#DDD8EB]/20 transition-colors ml-auto"
aria-label={isOpen ? 'Collapse sidebar' : 'Expand sidebar'}
>
{isMobile ? (
<Menu className="h-5 w-5 text-[#3D405B]" />
<Menu className="h-5 w-5 text-[#422268]" />
) : isOpen ? (
<ChevronLeft className="h-5 w-5 text-[#3D405B]" />
<ChevronLeft className="h-5 w-5 text-[#422268]" />
) : (
<ChevronRight className="h-5 w-5 text-[#3D405B]" />
<ChevronRight className="h-5 w-5 text-[#422268]" />
)}
</button>
</div>
@@ -163,16 +163,16 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
className={`
flex items-center gap-3 px-4 py-3 rounded-lg transition-all relative
${item.disabled
? 'opacity-50 cursor-not-allowed text-[#6B708D]'
? 'opacity-50 cursor-not-allowed text-[#664fa3]'
: active
? 'bg-[#E07A5F]/10 text-[#E07A5F]'
: 'text-[#3D405B] hover:bg-[#F2CC8F]/20'
? '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-[#E07A5F] rounded-r" />
<div className="absolute left-0 top-0 bottom-0 w-1 bg-[#ff9e77] rounded-r" />
)}
<Icon className="h-5 w-5 flex-shrink-0" />
@@ -181,12 +181,12 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
<>
<span className="flex-1">{item.name}</span>
{item.disabled && (
<Badge className="bg-[#F2CC8F] text-[#3D405B] text-xs px-2 py-0.5">
<Badge className="bg-[#DDD8EB] text-[#422268] text-xs px-2 py-0.5">
Soon
</Badge>
)}
{item.badge > 0 && !item.disabled && (
<Badge className="bg-[#E07A5F] text-white text-xs px-2 py-0.5">
<Badge className="bg-[#ff9e77] text-white text-xs px-2 py-0.5">
{item.badge}
</Badge>
)}
@@ -195,7 +195,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
{/* Badge when collapsed */}
{!isOpen && item.badge > 0 && !item.disabled && (
<div className="absolute -top-1 -right-1 bg-[#E07A5F] text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-medium">
<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>
)}
@@ -203,7 +203,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
{/* Tooltip when collapsed */}
{!isOpen && (
<div className="absolute left-full ml-2 top-1/2 -translate-y-1/2 px-3 py-2 bg-[#3D405B] text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
<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>
@@ -214,18 +214,18 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
</nav>
{/* User Section */}
<div className="border-t border-[#EAE0D5] p-4 space-y-2">
<div className="border-t border-[#ddd8eb] p-4 space-y-2">
{isOpen && user && (
<div className="px-4 py-3 mb-2">
<div className="flex items-center gap-3">
<div className="h-10 w-10 rounded-full bg-[#F2CC8F] flex items-center justify-center text-[#3D405B] font-semibold">
<div className="h-10 w-10 rounded-full bg-[#DDD8EB] flex items-center justify-center text-[#422268] font-semibold">
{user.first_name?.[0]}{user.last_name?.[0]}
</div>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-[#3D405B] truncate">
<p className="text-sm font-medium text-[#422268] truncate" style={{ fontFamily: "'Inter', sans-serif" }}>
{user.first_name} {user.last_name}
</p>
<p className="text-xs text-[#6B708D] capitalize truncate">
<p className="text-xs text-[#664fa3] capitalize truncate" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{user.role}
</p>
</div>
@@ -238,7 +238,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
onClick={handleLogout}
className={`
flex items-center gap-3 px-4 py-3 rounded-lg w-full
text-[#E07A5F] hover:bg-[#E07A5F]/10 transition-colors
text-[#ff9e77] hover:bg-[#ff9e77]/10 transition-colors
${!isOpen && 'justify-center'}
`}
>
@@ -249,7 +249,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
{/* Logout tooltip when collapsed */}
{!isOpen && (
<div className="relative group">
<div className="absolute left-full ml-2 bottom-0 px-3 py-2 bg-[#3D405B] text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
<div className="absolute left-full ml-2 bottom-0 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">
Logout
</div>
</div>