fix ui style

components/admin/admin-sidebar.tsx

@@ -5,18 +5,33 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import Image from "next/image";
 import { signOut } from "next-auth/react";
+import {
+  ArrowLeft,
+  ArrowUpRight,
+  Banknote,
+  Compass,
+  IdCard,
+  LayoutDashboard,
+  Mail,
+  Menu,
+  ScrollText,
+  Settings,
+  Users,
+  X,
+  type LucideIcon,
+} from "lucide-react";
 import { AdminSearchBar } from "@/features/admin/components/admin-search-bar";
 
-const NAV_ITEMS: { href: string; label: string; icon: string }[] = [
-  { href: "/admin", label: "Dashboard", icon: "📊" },
-  { href: "/admin/trips", label: "Trips", icon: "🧭" },
-  { href: "/admin/users", label: "Users", icon: "👥" },
-  { href: "/admin/verifications", label: "Verifikasi", icon: "🪪" },
-  { href: "/admin/refunds", label: "Refund", icon: "↩️" },
-  { href: "/admin/payouts", label: "Payout", icon: "💸" },
-  { href: "/admin/emails", label: "Email", icon: "✉️" },
-  { href: "/admin/audit-log", label: "Audit Log", icon: "📜" },
-  { href: "/admin/system", label: "System", icon: "⚙️" },
+const NAV_ITEMS: { href: string; label: string; icon: LucideIcon }[] = [
+  { href: "/admin", label: "Dashboard", icon: LayoutDashboard },
+  { href: "/admin/trips", label: "Trips", icon: Compass },
+  { href: "/admin/users", label: "Users", icon: Users },
+  { href: "/admin/verifications", label: "Verifikasi", icon: IdCard },
+  { href: "/admin/refunds", label: "Refund", icon: ArrowLeft },
+  { href: "/admin/payouts", label: "Payout", icon: Banknote },
+  { href: "/admin/emails", label: "Email", icon: Mail },
+  { href: "/admin/audit-log", label: "Audit Log", icon: ScrollText },
+  { href: "/admin/system", label: "System", icon: Settings },
 ];
 
 interface AdminSidebarProps {
@@ -51,13 +66,9 @@ export function AdminSidebar({ user }: AdminSidebarProps) {
           aria-expanded={open}
         >
           {open ? (
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-              <path d="M5 5l10 10M15 5L5 15" />
-            </svg>
+            <X size={20} strokeWidth={2} aria-hidden />
           ) : (
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-              <path d="M3 5h14M3 10h14M3 15h14" />
-            </svg>
+            <Menu size={20} strokeWidth={2} aria-hidden />
           )}
         </button>
       </header>
@@ -106,6 +117,7 @@ export function AdminSidebar({ user }: AdminSidebarProps) {
               const isActive =
                 pathname === item.href ||
                 (item.href !== "/admin" && pathname?.startsWith(item.href));
+              const Icon = item.icon;
               return (
                 <li key={item.href}>
                   <Link
@@ -117,9 +129,7 @@ export function AdminSidebar({ user }: AdminSidebarProps) {
                         : "text-neutral-700 hover:bg-neutral-100"
                     }`}
                   >
-                    <span aria-hidden className="text-base">
-                      {item.icon}
-                    </span>
+                    <Icon size={20} strokeWidth={1.75} aria-hidden />
                     <span>{item.label}</span>
                   </Link>
                 </li>
@@ -136,7 +146,7 @@ export function AdminSidebar({ user }: AdminSidebarProps) {
                 onClick={() => setOpen(false)}
                 className="flex items-center gap-3 rounded-lg px-3 py-2 text-xs font-medium text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700"
               >
-                <span aria-hidden>↩</span>
+                <ArrowUpRight size={16} strokeWidth={1.75} aria-hidden />
                 <span>Lihat situs publik</span>
               </Link>
             </li>