Add Oudelaa dashboard API integration

oudelaa_dashboard/components/dashboard/sidebar.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import { usePathname } from "next/navigation";
+import { Search, ShieldCheck } from "lucide-react";
+
+import { useSuperAdminSession } from "@/components/auth/session-context";
+import { Input } from "@/components/ui/input";
+import { dashboardNav } from "@/lib/navigation";
+import { matchesPermissions } from "@/lib/permissions";
+import { cn } from "@/lib/utils";
+
+export function DashboardSidebar() {
+  const pathname = usePathname();
+  const [search, setSearch] = useState("");
+  const { permissions } = useSuperAdminSession();
+
+  const accessibleNav = useMemo(
+    () =>
+      dashboardNav.filter((item) =>
+        matchesPermissions(permissions, item.requiredPermissions, item.permissionMode),
+      ),
+    [permissions],
+  );
+
+  const filteredNav = useMemo(() => {
+    const needle = search.trim().toLowerCase();
+    if (!needle) return accessibleNav;
+    return accessibleNav.filter((item) => item.label.toLowerCase().includes(needle));
+  }, [accessibleNav, search]);
+
+  return (
+    <aside className="frame-panel ornament-grid sticky top-4 hidden h-[calc(100vh-2rem)] w-72 shrink-0 flex-col border-border/70 p-4 lg:flex">
+      <div className="mb-5 rounded-xl border border-border/60 bg-background/70 p-4">
+        <p className="font-heading text-xl font-bold tracking-wide text-primary">Oudelaa</p>
+        <p className="text-xs text-muted-foreground">SuperAdmin Command Console</p>
+      </div>
+
+      <div className="relative mb-4">
+        <Search className="pointer-events-none absolute right-3 top-3 h-4 w-4 text-muted-foreground" />
+        <Input
+          className="pr-9"
+          placeholder="Search sections..."
+          value={search}
+          onChange={(event) => setSearch(event.target.value)}
+        />
+      </div>
+
+      <nav className="space-y-1">
+        {filteredNav.map((item) => {
+          const isActive = pathname === item.href;
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={cn(
+                "group flex items-center gap-3 rounded-lg border px-3 py-2 text-sm transition",
+                isActive
+                  ? "border-primary/40 bg-primary/15 text-primary"
+                  : "border-transparent text-muted-foreground hover:border-border hover:bg-secondary/70 hover:text-foreground",
+              )}
+            >
+              <item.icon className="h-4 w-4" />
+              <span>{item.label}</span>
+            </Link>
+          );
+        })}
+      </nav>
+
+      <div className="mt-auto space-y-3 rounded-xl border border-border/70 bg-secondary/40 p-4">
+        <div className="flex items-center justify-between text-xs text-muted-foreground">
+          <span>Moderation mode</span>
+          <ShieldCheck className="h-4 w-4" />
+        </div>
+        <p className="text-sm text-foreground">
+          This console manages users, marketplace items, content, reports, and SuperAdmin sessions
+          through dedicated admin API routes.
+        </p>
+        <p className="text-xs text-muted-foreground">Data is loaded from the live API, not mock data.</p>
+      </div>
+    </aside>
+  );
+}