firmanr/titipin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

style: apply consistent code formatting across project files

Browse Source
This commit is contained in:
Firman Ramdhani
2026-09-16 13:14:02 +07:00
parent d5791e759e
commit 51d05653c6
48 changed files with 3585 additions and 2575 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Sidebar.tsx
+107 -71
View File
@@ -4,29 +4,30 @@ 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 { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import {
Store,
ClipboardList,
ShoppingBag,
UserCircle,
Sparkles,
import {
Store,
ClipboardList,
ShoppingBag,
UserCircle,
Sparkles,
X,
ArrowUpRight,
Info,
BarChart2,
Wallet,
Settings
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: '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' },
@@ -64,79 +65,95 @@ export function Sidebar({ isOpen, onClose }: { isOpen?: boolean; onClose?: () =>
// Dynamic Menu Items based on role
const finalMenuItems = [...menuItems]
if (userRole === 'superadmin') {
finalMenuItems.push({ name: 'Pengaturan', href: '/settings/users', icon: Settings, desc: 'Konfigurasi aplikasi' })
finalMenuItems.push({
name: 'Pengaturan',
href: '/settings/users',
icon: Settings,
desc: 'Konfigurasi aplikasi',
})
}
return (
<>
{/* Mobile Backdrop */}
{isOpen && (
<div
<div
onClick={onClose}
className="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-40 lg:hidden transition-opacity"
className="fixed inset-0 z-40 bg-slate-900/40 backdrop-blur-sm transition-opacity lg:hidden"
/>
)}
<aside className={cn(
"fixed lg:sticky top-0 left-0 z-50 h-screen w-72 bg-white dark:bg-slate-900 border-r border-slate-200/80 dark:border-slate-800 flex flex-col justify-between transition-transform duration-300 ease-in-out p-5",
isOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
)}>
<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="flex items-center gap-3 group">
<div className="w-11 h-11 rounded-2xl bg-gradient-to-br from-[#1B2CC1] to-[#121E85] flex items-center justify-center text-white shadow-lg shadow-[#1B2CC1]/25 transition-all duration-300 group-hover:scale-105 group-hover:shadow-[#1B2CC1]/40">
<Sparkles className="w-5 h-5" />
<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="font-black text-xl tracking-tight text-slate-900 dark:text-white leading-none">
<span className="text-xl leading-none font-black tracking-tight text-slate-900 dark:text-white">
TitipIn
</span>
<span className="text-[9px] font-extrabold uppercase px-1.5 py-0.5 rounded-md bg-[#1B2CC1]/10 text-[#1B2CC1] dark:bg-blue-900/40 dark:text-blue-300">
<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="text-[11px] font-medium text-slate-400 mt-1">Sistem Titip Pesanan</span>
<span className="mt-1 text-[11px] font-medium text-slate-400">
Sistem Titip Pesanan
</span>
</div>
</Link>
{onClose && (
<button onClick={onClose} className="lg:hidden p-1.5 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100">
<X className="w-5 h-5" />
<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
<Link
href="/profile"
onClick={onClose}
className="flex items-center gap-3 p-3 rounded-2xl border border-slate-200/90 dark:border-slate-800 bg-slate-50/70 dark:bg-slate-800/40 hover:bg-slate-100/80 dark:hover:bg-slate-800 transition-all duration-200 group shadow-xs"
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="w-10 h-10 rounded-xl object-cover ring-2 ring-white dark:ring-slate-700 shadow-sm" />
<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="w-10 h-10 rounded-xl bg-[#1B2CC1]/10 text-[#1B2CC1] flex items-center justify-center font-black text-sm ring-2 ring-white dark:ring-slate-700 shadow-xs">
<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 -bottom-0.5 -right-0.5 w-3 h-3 bg-emerald-500 rounded-full ring-2 ring-white dark:ring-slate-900 shadow-xs" />
<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 flex-col min-w-0 flex-1">
<div className="flex min-w-0 flex-1 flex-col">
<div className="flex items-center justify-between">
<span className="text-xs font-bold text-slate-800 dark:text-slate-200 truncate group-hover:text-[#1B2CC1] transition-colors">
<span className="truncate text-xs font-bold text-slate-800 transition-colors group-hover:text-[#1B2CC1] dark:text-slate-200">
{userName}
</span>
<ArrowUpRight className="w-3.5 h-3.5 text-slate-400 opacity-0 group-hover:opacity-100 transition-opacity" />
<ArrowUpRight className="h-3.5 w-3.5 text-slate-400 opacity-0 transition-opacity group-hover:opacity-100" />
</div>
<div className="flex items-center gap-1.5 mt-0.5">
<div className="mt-0.5 flex items-center gap-1.5">
{userRole === 'superadmin' && (
<span className="px-1.5 py-[2px] rounded-md bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400 text-[8px] font-black uppercase tracking-wider">
<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="text-[10px] font-medium text-slate-500 dark:text-slate-400 truncate">
<span className="truncate text-[10px] font-medium text-slate-500 dark:text-slate-400">
{userNameAccount ? `@${userNameAccount}` : 'Aktif'}
</span>
</div>
@@ -145,7 +162,7 @@ export function Sidebar({ isOpen, onClose }: { isOpen?: boolean; onClose?: () =>
{/* Main Navigation */}
<div className="space-y-1.5">
<div className="px-3 pb-1.5 text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-slate-500">
<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">
@@ -158,26 +175,30 @@ export function Sidebar({ isOpen, onClose }: { isOpen?: boolean; onClose?: () =>
href={item.href}
onClick={onClose}
className={cn(
"flex items-center gap-3 px-3.5 py-3 rounded-2xl text-sm font-semibold transition-all duration-200 group relative",
isActive
? "bg-[#1B2CC1] text-white shadow-md shadow-[#1B2CC1]/25 font-bold"
: "text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100/80 dark:hover:bg-slate-800/60"
'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(
"w-8 h-8 rounded-xl flex items-center justify-center transition-colors",
isActive
? "bg-white/15 text-white"
: "bg-slate-100 dark:bg-slate-800 text-slate-500 group-hover:text-[#1B2CC1] group-hover:bg-[#1B2CC1]/10"
)}>
<Icon className="w-4 h-4" />
<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 flex-col min-w-0">
<div className="flex min-w-0 flex-col">
<span className="leading-tight">{item.name}</span>
<span className={cn(
"text-[10px] font-normal truncate mt-0.5",
isActive ? "text-blue-100" : "text-slate-400"
)}>
<span
className={cn(
'mt-0.5 truncate text-[10px] font-normal',
isActive ? 'text-blue-100' : 'text-slate-400'
)}
>
{item.desc}
</span>
</div>
@@ -190,31 +211,46 @@ export function Sidebar({ isOpen, onClose }: { isOpen?: boolean; onClose?: () =>
<>
<button
onClick={() => setIsLogoutOpen(true)}
className="w-full flex items-center gap-3 px-3.5 py-3 rounded-2xl text-sm font-semibold transition-all duration-200 group relative text-rose-600 dark:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-950/30 cursor-pointer"
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="w-8 h-8 rounded-xl flex items-center justify-center transition-colors bg-rose-100 dark:bg-rose-900/40 text-rose-500 group-hover:bg-rose-200 dark:group-hover:bg-rose-800/60">
<X className="w-4 h-4" />
<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 flex-col min-w-0 text-left">
<div className="flex min-w-0 flex-col text-left">
<span className="leading-tight">Logout</span>
<span className="text-[10px] font-normal truncate mt-0.5 text-rose-400/80">Keluar dari akun</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="sm:max-w-xs rounded-3xl p-0 overflow-hidden border-0">
<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="w-12 h-12 rounded-full bg-rose-100 text-rose-600 flex items-center justify-center mx-auto mb-3">
<X className="w-6 h-6" />
<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="text-xs text-slate-500 mt-2">
<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="p-4 flex gap-3 bg-slate-50">
<Button type="button" variant="outline" onClick={() => setIsLogoutOpen(false)} className="flex-1 h-11 rounded-xl">Batal</Button>
<Button type="button" onClick={handleLogout} className="flex-1 h-11 rounded-xl bg-rose-600 hover:bg-rose-700 text-white font-bold cursor-pointer">
<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>
@@ -239,8 +275,8 @@ export function Sidebar({ isOpen, onClose }: { isOpen?: boolean; onClose?: () =>
</p>
</div> */}
{/* Copyright */}
<div className="mt-4 pt-4 border-t border-slate-100 dark:border-slate-800 text-center">
<p className="text-[10px] text-slate-400 font-medium">
<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">
&copy; {new Date().getFullYear()} TitipIn - Sistem Titip Pesanan
</p>
</div>