feat: redesign admin panel with Lucide icons and modern styling

- Add lucide-react for SVG icons throughout the admin
- Redesign sidebar with gradient background, icons per nav item, and sticky layout
- Redesign topbar with cleaner user info display
- Redesign dashboard with icon-backed stat cards, gradient progress bars, activity feed
- Update AdminNavLink with icon support and new active state styling
- Improve table styling in admin-page CSS (rounded corners, hover, spacing)
- Clean up unused admin CSS

src/components/admin/admin-nav-link.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import type { ReactNode } from "react";
 import { usePathname } from "next/navigation";
 
 /**
@@ -8,7 +9,7 @@ import { usePathname } from "next/navigation";
  * exactly; every other entry also matches its sub-routes (e.g. /admin/radio is
  * active on /admin/radio/history) so the current section stays lit.
  */
-export function AdminNavLink({ href, label }: { href: string; label: string }) {
+export function AdminNavLink({ href, icon, children }: { href: string; icon?: ReactNode; children: ReactNode }) {
   const pathname = usePathname() ?? "";
   const active =
     href === "/admin" ? pathname === "/admin" : pathname === href || pathname.startsWith(`${href}/`);
@@ -16,11 +17,18 @@ export function AdminNavLink({ href, label }: { href: string; label: string }) {
   return (
     <Link
       href={href}
-      className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-[#c8cbe0] text-sm font-semibold no-underline transition-[background,color] duration-150 hover:bg-white/7 hover:text-white hover:no-underline ${
-        active ? "bg-[var(--color-primary)] text-[#1a1a2e] shadow-[0_2px_8px_rgba(238,180,37,0.35)]" : ""
+      className={`flex items-center gap-2.5 px-2.5 py-2 rounded-xl text-sm font-medium no-underline transition-all duration-150 ${
+        active
+          ? "bg-gradient-to-r from-[var(--color-primary)]/20 to-transparent text-white shadow-sm border-l-2 border-[var(--color-primary)]"
+          : "text-[#8b8fa8] hover:text-white hover:bg-white/[0.04] hover:no-underline"
       }`}
     >
-      {label}
+      {icon ? (
+        <span className={`flex-none ${active ? "text-[var(--color-primary)]" : "text-[#5c5f7a]"}`}>
+          {icon}
+        </span>
+      ) : null}
+      <span>{children}</span>
     </Link>
   );
 }

src/components/admin/confirm-action.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+export function ConfirmAction({
+  message,
+  action,
+  userId,
+  className,
+  style,
+  children,
+}: {
+  message: string;
+  action: string;
+  userId: number;
+  className?: string;
+  style?: React.CSSProperties;
+  children: ReactNode;
+}) {
+  return (
+    <form action="/api/admin/users/actions" method="post" style={{ display: "inline-block" }}>
+      <input type="hidden" name="userId" value={userId} />
+      <input type="hidden" name="action" value={action} />
+      <button
+        type="submit"
+        className={className}
+        style={style}
+        onClick={(e) => {
+          if (!confirm(message)) e.preventDefault();
+        }}
+      >
+        {children}
+      </button>
+    </form>
+  );
+}

src/components/admin/dashboard.tsx

@@ -25,26 +25,20 @@ export function StatusCard({
   value: ReactNode;
   hint?: string;
   state?: State;
-  icon?: string;
+  icon?: ReactNode;
 }) {
-  const borderColor =
-    state === "ok" ? "border-l-green-600" :
-    state === "warn" ? "border-l-[var(--color-primary)]" :
-    state === "danger" ? "border-l-red-500" :
-    "border-l-[var(--color-text-muted)]";
-
   return (
-    <div className={`bg-[var(--color-surface)] border border-[var(--border)] border-l-4 ${borderColor} rounded-xl p-3.5 shadow-card`}>
-      <div className="flex items-center justify-between gap-2">
-        <span className="text-[0.72rem] font-bold uppercase tracking-wider text-[var(--color-text-muted)]">{label}</span>
+    <div className="bg-[var(--color-surface)] border border-[var(--border)] rounded-2xl p-5 shadow-card hover:shadow-card-hover transition-shadow duration-200">
+      <div className="flex items-center justify-between gap-3 mb-3">
+        <span className="text-[0.65rem] font-bold uppercase tracking-widest text-[var(--color-text-muted)]">{label}</span>
         {icon ? (
-          <span className="text-lg leading-none" aria-hidden>
+          <span className="w-8 h-8 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/15 to-[var(--color-primary)]/5 grid place-items-center text-[var(--color-primary)] flex-none">
             {icon}
           </span>
         ) : null}
       </div>
-      <div className="text-[1.7rem] font-extrabold leading-tight mt-1.5">{value}</div>
-      {hint ? <div className="text-[0.78rem] text-[var(--color-text-muted)] mt-1">{hint}</div> : null}
+      <div className="text-2xl font-extrabold text-[var(--color-text)] leading-tight">{value}</div>
+      {hint ? <div className="text-[0.7rem] text-[var(--color-text-muted)] mt-1.5 font-medium">{hint}</div> : null}
     </div>
   );
 }