287 lines
12 KiB
TypeScript
287 lines
12 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { cn } from '@/lib/utils'
|
|
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
Store,
|
|
ClipboardList,
|
|
ShoppingBag,
|
|
UserCircle,
|
|
Sparkles,
|
|
X,
|
|
ArrowUpRight,
|
|
Info,
|
|
BarChart2,
|
|
Wallet,
|
|
Settings,
|
|
} from 'lucide-react'
|
|
|
|
const menuItems = [
|
|
{ name: 'Open Order', href: '/', icon: Store, desc: 'Daftar PO live hari ini' },
|
|
{
|
|
name: 'Jasa Order Saya',
|
|
href: '/my-orders',
|
|
icon: ClipboardList,
|
|
desc: 'Kelola PO buatan Anda',
|
|
},
|
|
{ name: 'Pesanan Saya', href: '/my-purchases', icon: ShoppingBag, desc: 'Riwayat titipan Anda' },
|
|
{ name: 'Buku Saldo', href: '/balances', icon: Wallet, desc: 'Pantau riwayat saldo' },
|
|
{ name: 'Laporan', href: '/reports', icon: BarChart2, desc: 'Ringkasan transaksi' },
|
|
]
|
|
|
|
export function Sidebar({ isOpen, onClose }: { isOpen?: boolean; onClose?: () => void }) {
|
|
const pathname = usePathname()
|
|
const [userName, setUserName] = useState<string>('Pengguna')
|
|
const [userNameAccount, setUserNameAccount] = useState<string>('Pengguna')
|
|
const [userPhoto, setUserPhoto] = useState<string | null>(null)
|
|
const [userRole, setUserRole] = useState<string | null>(null)
|
|
const [userId, setUserId] = useState<string | null>(null)
|
|
const [isLogoutOpen, setIsLogoutOpen] = useState(false)
|
|
|
|
useEffect(() => {
|
|
import('@/app/actions').then(({ getSessionUser }) => {
|
|
getSessionUser().then((u) => {
|
|
if (u) {
|
|
setUserId(u.id)
|
|
setUserName(u.name)
|
|
setUserNameAccount(u.username)
|
|
setUserRole(u.role)
|
|
if (u.photo) setUserPhoto(u.photo)
|
|
}
|
|
})
|
|
})
|
|
}, [pathname])
|
|
|
|
const handleLogout = async () => {
|
|
const { logoutUser } = await import('@/app/actions')
|
|
await logoutUser()
|
|
window.location.href = '/login'
|
|
}
|
|
|
|
// Dynamic Menu Items based on role
|
|
const finalMenuItems = [...menuItems]
|
|
if (userRole === 'superadmin') {
|
|
finalMenuItems.push({
|
|
name: 'Pengaturan',
|
|
href: '/settings/users',
|
|
icon: Settings,
|
|
desc: 'Konfigurasi aplikasi',
|
|
})
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{/* Mobile Backdrop */}
|
|
{isOpen && (
|
|
<div
|
|
onClick={onClose}
|
|
className="fixed inset-0 z-40 bg-slate-900/40 backdrop-blur-sm transition-opacity lg:hidden"
|
|
/>
|
|
)}
|
|
|
|
<aside
|
|
className={cn(
|
|
'fixed top-0 left-0 z-50 flex h-screen w-72 flex-col justify-between border-r border-slate-200/80 bg-white p-5 transition-transform duration-300 ease-in-out lg:sticky dark:border-slate-800 dark:bg-slate-900',
|
|
isOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
|
|
)}
|
|
>
|
|
<div className="space-y-6">
|
|
{/* Brand Header */}
|
|
<div className="flex items-center justify-between px-1">
|
|
<Link href="/" className="group flex items-center gap-3">
|
|
<div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-gradient-to-br from-[#1B2CC1] to-[#121E85] text-white shadow-lg shadow-[#1B2CC1]/25 transition-all duration-300 group-hover:scale-105 group-hover:shadow-[#1B2CC1]/40">
|
|
<Sparkles className="h-5 w-5" />
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-xl leading-none font-black tracking-tight text-slate-900 dark:text-white">
|
|
TitipIn
|
|
</span>
|
|
<span className="rounded-md bg-[#1B2CC1]/10 px-1.5 py-0.5 text-[9px] font-extrabold text-[#1B2CC1] uppercase dark:bg-blue-900/40 dark:text-blue-300">
|
|
Pro
|
|
</span>
|
|
</div>
|
|
<span className="mt-1 text-[11px] font-medium text-slate-400">
|
|
Sistem Titip Pesanan
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
{onClose && (
|
|
<button
|
|
onClick={onClose}
|
|
className="rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 lg:hidden"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* User Profile Card */}
|
|
<Link
|
|
href="/profile"
|
|
onClick={onClose}
|
|
className="group flex items-center gap-3 rounded-2xl border border-slate-200/90 bg-slate-50/70 p-3 shadow-xs transition-all duration-200 hover:bg-slate-100/80 dark:border-slate-800 dark:bg-slate-800/40 dark:hover:bg-slate-800"
|
|
>
|
|
<div className="relative">
|
|
{userPhoto ? (
|
|
<img
|
|
src={userPhoto}
|
|
alt={userName}
|
|
className="h-10 w-10 rounded-xl object-cover shadow-sm ring-2 ring-white dark:ring-slate-700"
|
|
/>
|
|
) : (
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-[#1B2CC1]/10 text-sm font-black text-[#1B2CC1] shadow-xs ring-2 ring-white dark:ring-slate-700">
|
|
{userName.charAt(0).toUpperCase()}
|
|
</div>
|
|
)}
|
|
<span className="absolute -right-0.5 -bottom-0.5 h-3 w-3 rounded-full bg-emerald-500 shadow-xs ring-2 ring-white dark:ring-slate-900" />
|
|
</div>
|
|
<div className="flex min-w-0 flex-1 flex-col">
|
|
<div className="flex items-center justify-between">
|
|
<span className="truncate text-xs font-bold text-slate-800 transition-colors group-hover:text-[#1B2CC1] dark:text-slate-200">
|
|
{userName}
|
|
</span>
|
|
<ArrowUpRight className="h-3.5 w-3.5 text-slate-400 opacity-0 transition-opacity group-hover:opacity-100" />
|
|
</div>
|
|
<div className="mt-0.5 flex items-center gap-1.5">
|
|
{userRole === 'superadmin' && (
|
|
<span className="rounded-md bg-purple-100 px-1.5 py-[2px] text-[8px] font-black tracking-wider text-purple-700 uppercase dark:bg-purple-900/30 dark:text-purple-400">
|
|
Admin
|
|
</span>
|
|
)}
|
|
<span className="truncate text-[10px] font-medium text-slate-500 dark:text-slate-400">
|
|
{userNameAccount ? `@${userNameAccount}` : 'Aktif'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
|
|
{/* Main Navigation */}
|
|
<div className="space-y-1.5">
|
|
<div className="px-3 pb-1.5 text-[10px] font-black tracking-widest text-slate-400 uppercase dark:text-slate-500">
|
|
Navigasi Utama
|
|
</div>
|
|
<nav className="space-y-1">
|
|
{finalMenuItems.map((item) => {
|
|
const Icon = item.icon
|
|
const isActive = pathname === item.href
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
onClick={onClose}
|
|
className={cn(
|
|
'group relative flex items-center gap-3 rounded-2xl px-3.5 py-3 text-sm font-semibold transition-all duration-200',
|
|
isActive
|
|
? 'bg-[#1B2CC1] font-bold text-white shadow-md shadow-[#1B2CC1]/25'
|
|
: 'text-slate-600 hover:bg-slate-100/80 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800/60 dark:hover:text-white'
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
'flex h-8 w-8 items-center justify-center rounded-xl transition-colors',
|
|
isActive
|
|
? 'bg-white/15 text-white'
|
|
: 'bg-slate-100 text-slate-500 group-hover:bg-[#1B2CC1]/10 group-hover:text-[#1B2CC1] dark:bg-slate-800'
|
|
)}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
</div>
|
|
<div className="flex min-w-0 flex-col">
|
|
<span className="leading-tight">{item.name}</span>
|
|
<span
|
|
className={cn(
|
|
'mt-0.5 truncate text-[10px] font-normal',
|
|
isActive ? 'text-blue-100' : 'text-slate-400'
|
|
)}
|
|
>
|
|
{item.desc}
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
)
|
|
})}
|
|
|
|
{/* Logout Button */}
|
|
{userId && (
|
|
<>
|
|
<button
|
|
onClick={() => setIsLogoutOpen(true)}
|
|
className="group relative flex w-full cursor-pointer items-center gap-3 rounded-2xl px-3.5 py-3 text-sm font-semibold text-rose-600 transition-all duration-200 hover:bg-rose-50 dark:text-rose-400 dark:hover:bg-rose-950/30"
|
|
>
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-xl bg-rose-100 text-rose-500 transition-colors group-hover:bg-rose-200 dark:bg-rose-900/40 dark:group-hover:bg-rose-800/60">
|
|
<X className="h-4 w-4" />
|
|
</div>
|
|
<div className="flex min-w-0 flex-col text-left">
|
|
<span className="leading-tight">Logout</span>
|
|
<span className="mt-0.5 truncate text-[10px] font-normal text-rose-400/80">
|
|
Keluar dari akun
|
|
</span>
|
|
</div>
|
|
</button>
|
|
|
|
<Dialog open={isLogoutOpen} onOpenChange={setIsLogoutOpen}>
|
|
<DialogContent className="overflow-hidden rounded-3xl border-0 p-0 sm:max-w-xs">
|
|
<div className="px-6 pt-6 pb-2 text-center">
|
|
<div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-rose-100 text-rose-600">
|
|
<X className="h-6 w-6" />
|
|
</div>
|
|
<DialogTitle className="text-xl font-black text-slate-800">
|
|
Konfirmasi Logout
|
|
</DialogTitle>
|
|
<p className="mt-2 text-xs text-slate-500">
|
|
Apakah Anda yakin ingin keluar dari akun ini?
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-3 bg-slate-50 p-4">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => setIsLogoutOpen(false)}
|
|
className="h-11 flex-1 rounded-xl"
|
|
>
|
|
Batal
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
onClick={handleLogout}
|
|
className="h-11 flex-1 cursor-pointer rounded-xl bg-rose-600 font-bold text-white hover:bg-rose-700"
|
|
>
|
|
Ya, Logout
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
)}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Feature Card */}
|
|
{/* <div className="p-4 rounded-2xl bg-gradient-to-br from-blue-50/80 to-slate-50 dark:from-slate-800/60 dark:to-slate-900 border border-blue-100/80 dark:border-slate-800 space-y-2">
|
|
<div className="flex items-center gap-2 text-xs font-bold text-slate-800 dark:text-slate-200">
|
|
<div className="w-5 h-5 rounded-lg bg-[#1B2CC1]/10 text-[#1B2CC1] flex items-center justify-center">
|
|
<Info className="w-3 h-3" />
|
|
</div>
|
|
<span>Auto Rekap</span>
|
|
</div>
|
|
<p className="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed">
|
|
Gunakan Generator Rekap pada detail PO untuk salin ringkasan belanja otomatis ke chat grup.
|
|
</p>
|
|
</div> */}
|
|
{/* Copyright */}
|
|
<div className="mt-4 border-t border-slate-100 pt-4 text-center dark:border-slate-800">
|
|
<p className="text-[10px] font-medium text-slate-400">
|
|
© {new Date().getFullYear()} TitipIn - Sistem Titip Pesanan
|
|
</p>
|
|
</div>
|
|
</aside>
|
|
</>
|
|
)
|
|
}
|