diff --git a/agent-ctx/new-features-2-main-coordinator.md b/agent-ctx/new-features-2-main-coordinator.md
new file mode 100644
index 0000000..17ae314
--- /dev/null
+++ b/agent-ctx/new-features-2-main-coordinator.md
@@ -0,0 +1,18 @@
+# Task ID: new-features-2
+## Agent: Main Coordinator
+## Task: Activity Feed, Export Button, Sortable Header, Clipboard Utility, Integration
+
+### Files Created
+- `src/components/layout/activity-feed.tsx` — ActivityFeed component (fetches audit/bulk, 30s refresh, color-coded icons, relative time)
+- `src/components/shared/export-button.tsx` — ExportButton component (CSV export via DropdownMenu, Blob download)
+- `src/components/shared/sortable-header.tsx` — SortableHeader component (3-state sort toggle with arrow icons)
+- `src/lib/clipboard.ts` — copyToClipboard utility (navigator.clipboard + textarea fallback)
+
+### Files Modified
+- `src/components/dashboard/dashboard-page.tsx` — Replaced inline activity feed with ActivityFeed, removed unused imports/types
+- `src/components/purchases/purchases-page.tsx` — Added ExportButton, SortableHeader (date/amount/status), client-side sort, clipboard util
+- `src/components/audit/audit-page.tsx` — Added ExportButton, SortableHeader (action/date), client-side sort
+- `src/components/users/users-page.tsx` — Added ExportButton next to search input
+
+### Lint Result
+- ESLint: 0 errors, 0 warnings
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 328dbd1..2b4749d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,72 +6,18 @@ import { AdminSidebar } from "@/components/layout/admin-sidebar";
 import { AdminHeader } from "@/components/layout/admin-header";
 import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar";
 import { LoginPage } from "@/app/login/page";
-
-// Lazy-loaded page components
-import dynamic from "next/dynamic";
-
-const DashboardPage = dynamic(() => import("@/components/dashboard/dashboard-page"), {
-  ssr: false,
-  loading: () => <PageSkeleton />,
-});
-const CatalogPage = dynamic(() => import("@/components/catalog/catalog-page"), {
-  ssr: false,
-  loading: () => <PageSkeleton />,
-});
-const UsersPage = dynamic(() => import("@/components/users/users-page"), {
-  ssr: false,
-  loading: () => <PageSkeleton />,
-});
-const UserDetailPage = dynamic(() => import("@/components/users/user-detail-page"), {
-  ssr: false,
-  loading: () => <PageSkeleton />,
-});
-const WalletsPage = dynamic(() => import("@/components/wallets/wallets-page"), {
-  ssr: false,
-  loading: () => <PageSkeleton />,
-});
-const PurchasesPage = dynamic(() => import("@/components/purchases/purchases-page"), {
-  ssr: false,
-  loading: () => <PageSkeleton />,
-});
-const AuditPage = dynamic(() => import("@/components/audit/audit-page"), {
-  ssr: false,
-  loading: () => <PageSkeleton />,
-});
-const CategoriesPage = dynamic(() => import("@/components/categories/categories-page"), {
-  ssr: false,
-  loading: () => <PageSkeleton />,
-});
-const LocationsPage = dynamic(() => import("@/components/locations/locations-page"), {
-  ssr: false,
-  loading: () => <PageSkeleton />,
-});
-const SettingsPage = dynamic(() => import("@/components/settings/settings-page"), {
-  ssr: false,
-  loading: () => <PageSkeleton />,
-});
-const LocalesPage = dynamic(() => import("@/components/locales/locales-page"), {
-  ssr: false,
-  loading: () => <PageSkeleton />,
-});
-const SeedPage = dynamic(() => import("@/components/seed/seed-page"), {
-  ssr: false,
-  loading: () => <PageSkeleton />,
-});
-
-function PageSkeleton() {
-  return (
-    <div className="p-6 space-y-4">
-      <div className="h-8 w-48 bg-muted animate-pulse rounded" />
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-        {[...Array(3)].map((_, i) => (
-          <div key={i} className="h-24 bg-muted animate-pulse rounded-lg" />
-        ))}
-      </div>
-      <div className="h-64 bg-muted animate-pulse rounded-lg" />
-    </div>
-  );
-}
+import { DashboardPage } from "@/components/dashboard/dashboard-page";
+import { CatalogPage } from "@/components/catalog/catalog-page";
+import { UsersPage } from "@/components/users/users-page";
+import { UserDetailPage } from "@/components/users/user-detail-page";
+import { WalletsPage } from "@/components/wallets/wallets-page";
+import { PurchasesPage } from "@/components/purchases/purchases-page";
+import { AuditPage } from "@/components/audit/audit-page";
+import { CategoriesPage } from "@/components/categories/categories-page";
+import { LocationsPage } from "@/components/locations/locations-page";
+import { SettingsPage } from "@/components/settings/settings-page";
+import { LocalesPage } from "@/components/locales/locales-page";
+import { SeedPage } from "@/components/seed/seed-page";
 
 export default function AppPage() {
   const { isAuthenticated, checkSession } = useAuthStore();
@@ -83,7 +29,6 @@ export default function AppPage() {
     checkSession().then(() => setReady(true));
   }, [checkSession]);
 
-  // Simple hash-based client-side routing
   useEffect(() => {
     const handleHash = () => {
       const hash = window.location.hash.slice(1) || "/";
@@ -103,7 +48,6 @@ export default function AppPage() {
     return () => window.removeEventListener("hashchange", handleHash);
   }, []);
 
-  // Intercept link clicks for hash navigation
   useEffect(() => {
     const handler = (e: MouseEvent) => {
       const target = e.target as HTMLElement;
@@ -111,7 +55,6 @@ export default function AppPage() {
       if (!link) return;
       const href = link.getAttribute("href");
       if (!href) return;
-      // Skip external links and real API links
       if (href.startsWith("http") || href.startsWith("/api")) return;
       e.preventDefault();
       window.location.hash = href;
@@ -149,7 +92,7 @@ export default function AppPage() {
     if (page === "/locales") return <LocalesPage />;
     if (page === "/seed") return <SeedPage />;
     return (
-      <div className="p-6">
+      <div className="flex items-center justify-center h-64">
         <p className="text-muted-foreground">Page not found</p>
       </div>
     );
diff --git a/src/components/audit/audit-page.tsx b/src/components/audit/audit-page.tsx
index 87d25b2..17df588 100644
--- a/src/components/audit/audit-page.tsx
+++ b/src/components/audit/audit-page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, useMemo } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -19,7 +19,9 @@ import {
 } from "@/components/ui/collapsible";
 import { toast } from "sonner";
 import { format } from "date-fns";
-import { ChevronDown } from "lucide-react";
+import { ChevronDown, FileText } from "lucide-react";
+import { ExportButton } from "@/components/shared/export-button";
+import { SortableHeader } from "@/components/shared/sortable-header";
 
 interface AuditRow {
   id: number;
@@ -86,6 +88,8 @@ export function AuditPage() {
   const [page, setPage] = useState(1);
   const [loading, setLoading] = useState(true);
   const [openRows, setOpenRows] = useState<Set<number>>(new Set());
+  const [sortColumn, setSortColumn] = useState<string>("");
+  const [sortDirection, setSortDirection] = useState<"asc" | "desc" | null>(null);
   const limit = 100;
 
   const fetchData = useCallback(async () => {
@@ -110,6 +114,44 @@ export function AuditPage() {
 
   const totalPages = Math.max(1, Math.ceil(total / limit));
 
+  const handleSort = (column: string) => {
+    if (sortColumn === column) {
+      if (sortDirection === "asc") setSortDirection("desc");
+      else if (sortDirection === "desc") {
+        setSortColumn("");
+        setSortDirection(null);
+      }
+    } else {
+      setSortColumn(column);
+      setSortDirection("asc");
+    }
+  };
+
+  const sortedLogs = useMemo(() => {
+    if (!sortColumn || !sortDirection) return logs;
+    return [...logs].sort((a, b) => {
+      let valA: unknown;
+      let valB: unknown;
+      if (sortColumn === "date") { valA = a.createdAt; valB = b.createdAt; }
+      else if (sortColumn === "action") { valA = a.action; valB = b.action; }
+      else return 0;
+      if (valA === valB) return 0;
+      const cmp = valA < valB ? -1 : 1;
+      return sortDirection === "asc" ? cmp : -cmp;
+    });
+  }, [logs, sortColumn, sortDirection]);
+
+  const exportData = useMemo<Record<string, unknown>[]>(
+    () => sortedLogs.map((l) => ({
+      ID: l.id,
+      Action: l.action,
+      "Admin ID": l.adminId,
+      Details: l.details || "",
+      Date: l.createdAt,
+    })),
+    [sortedLogs]
+  );
+
   const toggleRow = (id: number) => {
     setOpenRows((prev) => {
       const next = new Set(prev);
@@ -120,15 +162,21 @@ export function AuditPage() {
   };
 
   return (
-    <div className="space-y-4">
+    <div className="p-4 md:p-6 space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-semibold">Audit Log</h2>
+        <ExportButton data={exportData} filename="audit-log" />
+      </div>
+
       <div className="rounded-lg border">
-        <div className="max-h-[calc(100vh-14rem)] overflow-y-auto">
+        <div className="max-h-[calc(100vh-12rem)] overflow-y-auto">
           {loading ? (
             <div className="p-4">
               <SkeletonTable />
             </div>
           ) : logs.length === 0 ? (
             <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+              <FileText className="h-10 w-10 mb-2 opacity-40" />
               <p className="text-lg font-medium">No audit entries</p>
               <p className="text-sm">Audit log is empty.</p>
             </div>
@@ -137,14 +185,18 @@ export function AuditPage() {
               <TableHeader>
                 <TableRow>
                   <TableHead className="w-16">ID</TableHead>
-                  <TableHead className="w-40">Action</TableHead>
+                  <TableHead className="w-40">
+                    <SortableHeader column="action" label="Action" sortColumn={sortColumn} sortDirection={sortDirection} onSort={handleSort} />
+                  </TableHead>
                   <TableHead className="w-28">Admin ID</TableHead>
                   <TableHead>Details</TableHead>
-                  <TableHead className="w-36">Date</TableHead>
+                  <TableHead className="w-36">
+                    <SortableHeader column="date" label="Date" sortColumn={sortColumn} sortDirection={sortDirection} onSort={handleSort} />
+                  </TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {logs.map((log) => (
+                {sortedLogs.map((log) => (
                   <TableRow key={log.id}>
                     <TableCell className="font-mono text-sm">{log.id}</TableCell>
                     <TableCell>
@@ -182,7 +234,7 @@ export function AuditPage() {
                       )}
                     </TableCell>
                     <TableCell className="text-sm text-muted-foreground">
-                      {format(new Date(log.createdAt), "MMM d, HH:mm")}
+                      {format(new Date(log.createdAt), "MMM d, yyyy HH:mm")}
                     </TableCell>
                   </TableRow>
                 ))}
diff --git a/src/components/catalog/catalog-page.tsx b/src/components/catalog/catalog-page.tsx
index 09a2b37..9c9c3b2 100644
--- a/src/components/catalog/catalog-page.tsx
+++ b/src/components/catalog/catalog-page.tsx
@@ -694,7 +694,7 @@ export function CatalogPage() {
               )}
 
               {/* Tree */}
-              <div className="flex-1 overflow-y-auto max-h-[calc(100vh-14rem)] p-2">
+              <div className="flex-1 overflow-y-auto max-h-[calc(100vh-12rem)] p-2">
                 {countries.length === 0 ? (
                   <p className="text-sm text-muted-foreground text-center py-8">
                     No locations yet. Add one above.
diff --git a/src/components/categories/categories-page.tsx b/src/components/categories/categories-page.tsx
index beedfe2..a3faf5e 100644
--- a/src/components/categories/categories-page.tsx
+++ b/src/components/categories/categories-page.tsx
@@ -42,7 +42,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { toast } from "sonner";
-import { Plus, Pencil, Trash2 } from "lucide-react";
+import { Plus, Pencil, Trash2, FolderOpen } from "lucide-react";
 
 interface LocationItem {
   id: number;
@@ -206,7 +206,9 @@ export function CategoriesPage() {
   );
 
   return (
-    <div className="space-y-4">
+    <div className="p-4 md:p-6 space-y-4">
+      <h2 className="text-xl font-semibold">Categories</h2>
+
       <div className="flex justify-end">
         <Button onClick={handleAdd} size="sm">
           <Plus className="h-4 w-4 mr-1" /> Add Category
@@ -214,11 +216,12 @@ export function CategoriesPage() {
       </div>
 
       <div className="rounded-lg border">
-        <div className="max-h-[calc(100vh-14rem)] overflow-y-auto">
+        <div className="max-h-[calc(100vh-12rem)] overflow-y-auto">
           {loading ? (
             <div className="p-4"><SkeletonTable /></div>
           ) : categories.length === 0 ? (
             <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+              <FolderOpen className="h-10 w-10 mb-2 opacity-40" />
               <p className="text-lg font-medium">No categories</p>
               <p className="text-sm">Create your first category to get started.</p>
             </div>
diff --git a/src/components/dashboard/dashboard-page.tsx b/src/components/dashboard/dashboard-page.tsx
index 6172137..671a49e 100644
--- a/src/components/dashboard/dashboard-page.tsx
+++ b/src/components/dashboard/dashboard-page.tsx
@@ -3,7 +3,9 @@
 import { useEffect, useState, useCallback } from "react";
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
+import { ActivityFeed } from "@/components/layout/activity-feed";
 
 import {
   Users,
@@ -16,7 +18,6 @@ import {
   Clock,
   XCircle,
   Tag,
-  FileText,
 } from "lucide-react";
 
 import {
@@ -87,14 +88,6 @@ interface TopCountry {
   productCount: number;
 }
 
-interface Activity {
-  type: "purchase" | "audit";
-  id: number;
-  title: string;
-  description: string;
-  date: string;
-}
-
 interface WalletSummary {
   walletType: string;
   count: number;
@@ -109,7 +102,6 @@ interface DashboardData {
   topSpenders: TopSpender[];
   revenueByCategory: RevenueByCategory[];
   topCountries: TopCountry[];
-  activities: Activity[];
   walletSummary: WalletSummary[];
 }
 
@@ -123,16 +115,6 @@ function formatCrypto(val: number): string {
   return val.toFixed(8);
 }
 
-function formatDate(dateStr: string): string {
-  const d = new Date(dateStr);
-  return d.toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-    hour: "2-digit",
-    minute: "2-digit",
-  });
-}
-
 function shortDate(dateStr: string): string {
   const d = new Date(dateStr + "T00:00:00");
   return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
@@ -173,7 +155,7 @@ function KpiCard({
 
 function DashboardSkeleton() {
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-4 md:p-6 space-y-6">
       <Skeleton className="h-8 w-48" />
       <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
         {Array.from({ length: 10 }).map((_, i) => (
@@ -252,7 +234,7 @@ export function DashboardPage() {
   }
   if (!data) return null;
 
-  const { stats, chartData, topProducts, topSpenders, revenueByCategory, topCountries, activities, walletSummary } = data;
+  const { stats, chartData, topProducts, topSpenders, revenueByCategory, topCountries, walletSummary } = data;
 
   // Prepare chart datasets
   const revenue7Data = chartData.days.map((day, i) => ({
@@ -294,20 +276,22 @@ export function DashboardPage() {
   ];
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-4 md:p-6 space-y-6">
       {/* ── Page Title ── */}
       <div>
-        <h1 className="text-2xl font-bold">Dashboard</h1>
+        <h2 className="text-xl font-semibold">Dashboard</h2>
         <p className="text-sm text-muted-foreground">Overview of your Telegram Shop</p>
       </div>
 
       {/* ── KPI Cards ── */}
-      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
         {kpis.map((kpi) => (
           <KpiCard key={kpi.title} {...kpi} icon={kpi.icon} />
         ))}
       </div>
 
+      <Separator />
+
       {/* ── Charts Grid ── */}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         {/* 1. Revenue 7 days */}
@@ -529,56 +513,10 @@ export function DashboardPage() {
         </ChartCard>
       </div>
 
-      {/* ── Bottom Section: Activity Feed + Wallet Summary ── */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-        {/* Activity Feed */}
-        <Card>
-          <CardHeader className="p-4 pb-0">
-            <CardTitle className="text-sm font-medium">Recent Activity</CardTitle>
-          </CardHeader>
-          <CardContent className="p-4">
-            {activities.length > 0 ? (
-              <div className="space-y-3 max-h-96 overflow-y-auto pr-1">
-                {activities.map((activity) => (
-                  <div
-                    key={`${activity.type}-${activity.id}`}
-                    className="flex items-start gap-3 rounded-lg border p-3"
-                  >
-                    <div
-                      className={"flex h-8 w-8 shrink-0 items-center justify-center rounded-full mt-0.5 "}
-                      style={{
-                        backgroundColor:
-                          activity.type === "purchase"
-                            ? `${CHART_1}15`
-                            : `${CHART_2}15`,
-                      }}
-                    >
-                      {activity.type === "purchase" ? (
-                        <ShoppingCart
-                          className="h-4 w-4"
-                          style={{ color: CHART_1 }}
-                        />
-                      ) : (
-                        <FileText
-                          className="h-4 w-4"
-                          style={{ color: CHART_2 }}
-                        />
-                      )}
-                    </div>
-                    <div className="min-w-0 flex-1">
-                      <p className="text-sm font-medium truncate">{activity.title}</p>
-                      <p className="text-xs text-muted-foreground truncate">{activity.description}</p>
-                      <p className="text-xs text-muted-foreground mt-1">{formatDate(activity.date)}</p>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <div className="h-48 flex items-center justify-center text-muted-foreground text-sm">No recent activity</div>
-            )}
-          </CardContent>
-        </Card>
+      <Separator />
 
+      {/* ── Bottom Section: Wallet Summary + Activity Feed ── */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
         {/* Wallet Summary */}
         <Card>
           <CardHeader className="p-4 pb-0">
@@ -614,6 +552,9 @@ export function DashboardPage() {
           </CardContent>
         </Card>
       </div>
+
+      {/* ── Activity Feed (full width) ── */}
+      <ActivityFeed />
     </div>
   );
 }
diff --git a/src/components/layout/activity-feed.tsx b/src/components/layout/activity-feed.tsx
new file mode 100644
index 0000000..26722b8
--- /dev/null
+++ b/src/components/layout/activity-feed.tsx
@@ -0,0 +1,167 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import {
+  LogIn,
+  DollarSign,
+  UserX,
+  KeyRound,
+  Package,
+  Settings,
+  CheckCircle,
+  Wallet,
+  CreditCard,
+  UserPlus,
+  FileText,
+} from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+// ─── Types ───────────────────────────────────────────────
+
+interface AuditItem {
+  id: number;
+  action: string;
+  adminId: string;
+  details: string | null;
+  createdAt: string;
+}
+
+// ─── Icon mapping ─────────────────────────────────────────
+
+const ICON_MAP: Record<
+  string,
+  { icon: React.ComponentType<{ className?: string }>; color: string }
+> = {
+  login: { icon: LogIn, color: "#3b82f6" },
+  balance_adjust: { icon: DollarSign, color: "#f97316" },
+  status_toggle: { icon: UserX, color: "#ef4444" },
+  seed_phrase_viewed: { icon: KeyRound, color: "#a855f7" },
+  product_created: { icon: Package, color: "#22c55e" },
+  settings_changed: { icon: Settings, color: "#22c55e" },
+  purchase_approved: { icon: CheckCircle, color: "#22c55e" },
+  wallet_added: { icon: Wallet, color: "#06b6d4" },
+  commission_paid: { icon: CreditCard, color: "#f59e0b" },
+  user_registered: { icon: UserPlus, color: "#14b8a6" },
+};
+
+const DEFAULT_ICON = { icon: FileText, color: "#6b7280" };
+
+// ─── Helpers ──────────────────────────────────────────────
+
+function relativeTime(dateStr: string): string {
+  const now = Date.now();
+  const then = new Date(dateStr).getTime();
+  const diffMs = now - then;
+  const diffSec = Math.floor(diffMs / 1000);
+
+  if (diffSec < 60) return `${diffSec}s ago`;
+  const diffMin = Math.floor(diffSec / 60);
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHr = Math.floor(diffMin / 60);
+  if (diffHr < 24) return `${diffHr}h ago`;
+  const diffDay = Math.floor(diffHr / 24);
+  return `${diffDay}d ago`;
+}
+
+function actionDescription(action: string, details: string | null): string {
+  const label = action.replace(/_/g, " ");
+  if (!details) return label;
+  try {
+    const obj = JSON.parse(details);
+    if (obj.username) return `${label} — ${obj.username}`;
+    if (obj.target) return `${label} — ${obj.target}`;
+    if (obj.userId) return `${label} — user #${obj.userId}`;
+  } catch {
+    // not JSON
+  }
+  return label;
+}
+
+// ─── Component ────────────────────────────────────────────
+
+export function ActivityFeed() {
+  const [items, setItems] = useState<AuditItem[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchFeed = useCallback(async () => {
+    try {
+      const res = await fetch("/api/audit/bulk?limit=15");
+      if (!res.ok) return;
+      const json = await res.json();
+      setItems(json.data ?? []);
+    } catch {
+      // silently fail
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchFeed();
+    const interval = setInterval(fetchFeed, 30000);
+    return () => clearInterval(interval);
+  }, [fetchFeed]);
+
+  return (
+    <Card>
+      <CardHeader className="p-4 pb-0">
+        <CardTitle className="text-sm font-medium">
+          Recent Activity
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="p-4">
+        {loading ? (
+          <div className="max-h-48 animate-pulse space-y-2">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <div
+                key={i}
+                className="flex items-center gap-3 rounded-md border p-2"
+              >
+                <div className="h-6 w-6 rounded-full bg-muted" />
+                <div className="flex-1 space-y-1">
+                  <div className="h-3 w-3/4 rounded bg-muted" />
+                  <div className="h-2 w-1/3 rounded bg-muted" />
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : items.length > 0 ? (
+          <div className="max-h-48 overflow-y-auto space-y-1">
+            {items.map((item) => {
+              const mapping = ICON_MAP[item.action] ?? DEFAULT_ICON;
+              const Icon = mapping.icon;
+              return (
+                <div
+                  key={item.id}
+                  className="flex items-center gap-3 rounded-md border border-border/50 px-3 py-2"
+                >
+                  <div
+                    className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full"
+                    style={{ backgroundColor: `${mapping.color}15` }}
+                  >
+                    <Icon
+                      className="h-3.5 w-3.5"
+                      style={{ color: mapping.color }}
+                    />
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <p className="text-sm truncate leading-tight">
+                      {actionDescription(item.action, item.details)}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {relativeTime(item.createdAt)}
+                    </p>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="flex h-48 items-center justify-center text-muted-foreground text-sm">
+            No recent activity
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/layout/admin-header.tsx b/src/components/layout/admin-header.tsx
index 3a33a33..9769d7e 100644
--- a/src/components/layout/admin-header.tsx
+++ b/src/components/layout/admin-header.tsx
@@ -12,9 +12,11 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
-import { Moon, Sun, LogOut, User } from "lucide-react";
+import { Moon, Sun, LogOut, User, Search } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useAuthStore } from "@/stores/auth-store";
+import { CommandPalette, openCommandPalette } from "@/components/layout/command-palette";
+import { AppBreadcrumbs } from "@/components/layout/breadcrumbs";
 
 const pageTitles: Record<string, string> = {
   "/": "Dashboard",
@@ -48,14 +50,27 @@ export function AdminHeader() {
     (hash.startsWith("/users/")
       ? "User Detail"
       : hash.split("/").pop()?.charAt(0).toUpperCase() +
-        hash.split("/").pop()?.slice(1) ||
+          hash.split("/").pop()?.slice(1) ||
         "Page");
 
   return (
     <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
       <SidebarTrigger className="-ml-1" />
       <Separator orientation="vertical" className="mr-2 h-4" />
-      <h1 className="text-base font-semibold flex-1 truncate">{title}</h1>
+      <AppBreadcrumbs />
+      <h1 className="text-base font-semibold flex-1 truncate hidden sm:block">
+        {title}
+      </h1>
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={openCommandPalette}
+        className="shrink-0"
+        title="Search (Ctrl+K)"
+      >
+        <Search className="size-4" />
+        <span className="sr-only">Search</span>
+      </Button>
       <Button
         variant="ghost"
         size="icon"
@@ -104,6 +119,7 @@ export function AdminHeader() {
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
+      <CommandPalette />
     </header>
   );
 }
diff --git a/src/components/layout/admin-sidebar.tsx b/src/components/layout/admin-sidebar.tsx
index 00a3a16..df21aa4 100644
--- a/src/components/layout/admin-sidebar.tsx
+++ b/src/components/layout/admin-sidebar.tsx
@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useState, useEffect } from "react";
 import {
   LayoutDashboard,
   FolderTree,
@@ -27,6 +28,7 @@ import {
   SidebarGroupLabel,
   SidebarHeader,
   SidebarMenu,
+  SidebarMenuBadge,
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarRail,
@@ -41,7 +43,7 @@ const mainNav = [
   { title: "Catalog", href: "/catalog", icon: FolderTree },
   { title: "Users", href: "/users", icon: Users },
   { title: "Wallets", href: "/wallets", icon: Wallet },
-  { title: "Purchases", href: "/purchases", icon: ShoppingCart },
+  { title: "Purchases", href: "/purchases", icon: ShoppingCart, badge: true },
   { title: "Audit Log", href: "/audit", icon: FileText },
 ];
 
@@ -55,9 +57,62 @@ const systemNav = [
   { title: "Locales", href: "/locales", icon: Languages },
 ];
 
+function usePendingCount(isAuthenticated: boolean) {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    if (!isAuthenticated) return;
+    let cancelled = false;
+
+    const load = () => {
+      fetch("/api/purchases/bulk?status=pending&limit=1")
+        .then((res) => (res.ok ? res.json() : null))
+        .then((data) => {
+          if (!cancelled && data) setCount(data.total ?? 0);
+        })
+        .catch(() => {});
+    };
+
+    load();
+    window.addEventListener("focus", load);
+    return () => {
+      cancelled = true;
+      window.removeEventListener("focus", load);
+    };
+  }, [isAuthenticated]);
+
+  return count;
+}
+
+function useConnectionStatus() {
+  const { checkSession } = useAuthStore();
+  const [connected, setConnected] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const check = () => {
+      checkSession().then((valid) => {
+        if (!cancelled) setConnected(valid);
+      });
+    };
+
+    check();
+    window.addEventListener("focus", check);
+    return () => {
+      cancelled = true;
+      window.removeEventListener("focus", check);
+    };
+  }, [checkSession]);
+
+  return connected;
+}
+
 export function AdminSidebar() {
   const pathname = usePathname();
-  const { role, logout } = useAuthStore();
+  const { role, logout, isAuthenticated } = useAuthStore();
+  const pendingCount = usePendingCount(isAuthenticated);
+  const connected = useConnectionStatus();
 
   return (
     <Sidebar collapsible="icon">
@@ -94,6 +149,11 @@ export function AdminSidebar() {
                       <span>{item.title}</span>
                     </Link>
                   </SidebarMenuButton>
+                  {item.badge && pendingCount > 0 && (
+                    <SidebarMenuBadge className="bg-destructive text-destructive-foreground">
+                      {pendingCount}
+                    </SidebarMenuBadge>
+                  )}
                 </SidebarMenuItem>
               ))}
             </SidebarMenu>
@@ -189,6 +249,16 @@ export function AdminSidebar() {
             <LogOut className="size-4" />
           </button>
         </div>
+        <div className="flex items-center gap-2 px-2 pb-2 group-data-[collapsible=icon]:justify-center">
+          <span
+            className={`size-2 rounded-full shrink-0 ${
+              connected ? "bg-green-500" : "bg-muted-foreground"
+            }`}
+          />
+          <span className="text-xs text-muted-foreground group-data-[collapsible=icon]:hidden">
+            {connected ? "Connected" : "Disconnected"}
+          </span>
+        </div>
       </SidebarFooter>
       <SidebarRail />
     </Sidebar>
diff --git a/src/components/layout/breadcrumbs.tsx b/src/components/layout/breadcrumbs.tsx
new file mode 100644
index 0000000..a698544
--- /dev/null
+++ b/src/components/layout/breadcrumbs.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+
+interface Crumb {
+  label: string;
+  href: string;
+}
+
+const pageLabels: Record<string, string> = {
+  "": "Dashboard",
+  catalog: "Catalog",
+  users: "Users",
+  wallets: "Wallets",
+  purchases: "Purchases",
+  audit: "Audit Log",
+  categories: "Categories",
+  locations: "Locations",
+  settings: "Settings",
+  locales: "Locales",
+  seed: "Danger Zone",
+  login: "Sign In",
+};
+
+function parseHash(hash: string): Crumb[] {
+  const path = hash.replace(/^#\/?/, "");
+  const segments = path.split("/").filter(Boolean);
+
+  const crumbs: Crumb[] = [{ label: "Home", href: "/" }];
+
+  if (segments.length === 0) {
+    return crumbs;
+  }
+
+  // Build parent href incrementally
+  let href = "";
+  for (let i = 0; i < segments.length; i++) {
+    href += "/" + segments[i];
+    const isLast = i === segments.length - 1;
+    const label = pageLabels[segments[i]] || segments[i];
+    crumbs.push({ label, href });
+  }
+
+  return crumbs;
+}
+
+export function AppBreadcrumbs() {
+  const [crumbs, setCrumbs] = useState<Crumb[]>([{ label: "Home", href: "/" }]);
+
+  useEffect(() => {
+    const update = () => setCrumbs(parseHash(window.location.hash));
+    update();
+    window.addEventListener("hashchange", update);
+    return () => window.removeEventListener("hashchange", update);
+  }, []);
+
+  if (crumbs.length <= 1) {
+    return null;
+  }
+
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        {/* Desktop: show all breadcrumbs */}
+        {crumbs.map((crumb, index) => {
+          const isLast = index === crumbs.length - 1;
+          return (
+            <BreadcrumbItem key={crumb.href} className="hidden sm:inline-flex">
+              {isLast ? (
+                <BreadcrumbPage>{crumb.label}</BreadcrumbPage>
+              ) : (
+                <BreadcrumbLink
+                  href="#"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    window.location.hash = crumb.href;
+                  }}
+                >
+                  {crumb.label}
+                </BreadcrumbLink>
+              )}
+              {!isLast && <BreadcrumbSeparator />}
+            </BreadcrumbItem>
+          );
+        })}
+
+        {/* Mobile: show only last 2 breadcrumbs with ellipsis */}
+        {crumbs.length > 2 && (
+          <BreadcrumbItem className="sm:hidden">
+            <BreadcrumbEllipsis />
+            <BreadcrumbSeparator />
+          </BreadcrumbItem>
+        )}
+        {crumbs.length >= 2 && (
+          <BreadcrumbItem className="sm:hidden">
+            <BreadcrumbLink
+              href="#"
+              onClick={(e) => {
+                e.preventDefault();
+                const href = crumbs[crumbs.length - 2].href;
+                window.location.hash = href;
+              }}
+            >
+              {crumbs[crumbs.length - 2].label}
+            </BreadcrumbLink>
+            <BreadcrumbSeparator />
+          </BreadcrumbItem>
+        )}
+        <BreadcrumbItem className="sm:hidden">
+          <BreadcrumbPage>{crumbs[crumbs.length - 1].label}</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}
diff --git a/src/components/layout/command-palette.tsx b/src/components/layout/command-palette.tsx
new file mode 100644
index 0000000..c061ad3
--- /dev/null
+++ b/src/components/layout/command-palette.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import {
+  LayoutDashboard,
+  FolderTree,
+  Users,
+  Wallet,
+  ShoppingCart,
+  FileText,
+  Tag,
+  MapPin,
+  Settings,
+  Languages,
+  AlertTriangle,
+  Database,
+  Trash2,
+  LogOut,
+} from "lucide-react";
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+import { useAuthStore } from "@/stores/auth-store";
+
+const COMMAND_TOGGLE = "command-palette:toggle";
+
+export function openCommandPalette() {
+  window.dispatchEvent(new CustomEvent(COMMAND_TOGGLE));
+}
+
+const navigationItems = [
+  { label: "Dashboard", href: "/", Icon: LayoutDashboard },
+  { label: "Catalog", href: "/catalog", Icon: FolderTree },
+  { label: "Users", href: "/users", Icon: Users },
+  { label: "Wallets", href: "/wallets", Icon: Wallet },
+  { label: "Purchases", href: "/purchases", Icon: ShoppingCart },
+  { label: "Audit Log", href: "/audit", Icon: FileText },
+  { label: "Categories", href: "/categories", Icon: Tag },
+  { label: "Locations", href: "/locations", Icon: MapPin },
+  { label: "Settings", href: "/settings", Icon: Settings },
+  { label: "Locales", href: "/locales", Icon: Languages },
+  { label: "Danger Zone", href: "/seed", Icon: AlertTriangle },
+] as const;
+
+export function CommandPalette() {
+  const [open, setOpen] = useState(false);
+  const { logout } = useAuthStore();
+
+  const toggle = useCallback(() => {
+    setOpen((prev) => !prev);
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        toggle();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [toggle]);
+
+  useEffect(() => {
+    const handleToggle = () => setOpen(true);
+    window.addEventListener(COMMAND_TOGGLE, handleToggle);
+    return () => window.removeEventListener(COMMAND_TOGGLE, handleToggle);
+  }, []);
+
+  return (
+    <CommandDialog open={open} onOpenChange={setOpen}>
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Navigation">
+          {navigationItems.map((item) => (
+            <CommandItem
+              key={item.href}
+              onSelect={() => {
+                setOpen(false);
+                window.location.hash = item.href;
+              }}
+            >
+              <item.Icon className="size-4" />
+              <span>{item.label}</span>
+            </CommandItem>
+          ))}
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Actions">
+          <CommandItem
+            onSelect={() => {
+              setOpen(false);
+              window.location.hash = "/seed";
+            }}
+          >
+            <Database className="size-4" />
+            <span>Seed Demo Data</span>
+          </CommandItem>
+          <CommandItem
+            onSelect={() => {
+              setOpen(false);
+              window.location.hash = "/seed";
+            }}
+          >
+            <Trash2 className="size-4" />
+            <span>Clear Data</span>
+          </CommandItem>
+          <CommandItem
+            onSelect={() => {
+              setOpen(false);
+              logout();
+              window.location.hash = "/login";
+            }}
+          >
+            <LogOut className="size-4 text-destructive" />
+            <span className="text-destructive">Logout</span>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  );
+}
diff --git a/src/components/locales/locales-page.tsx b/src/components/locales/locales-page.tsx
index 43ff251..76f4e5f 100644
--- a/src/components/locales/locales-page.tsx
+++ b/src/components/locales/locales-page.tsx
@@ -12,6 +12,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { toast } from "sonner";
+import { Languages } from "lucide-react";
 
 const LANGS = ["en", "es", "de"];
 const LANG_LABELS: Record<string, string> = { en: "English", es: "Spanish", de: "German" };
@@ -116,13 +117,16 @@ export function LocalesPage() {
   };
 
   return (
-    <div className="space-y-4">
+    <div className="p-4 md:p-6 space-y-4">
+      <h2 className="text-xl font-semibold">Locales</h2>
+
       <div className="rounded-lg border">
-        <div className="max-h-[calc(100vh-14rem)] overflow-y-auto">
+        <div className="max-h-[calc(100vh-12rem)] overflow-y-auto">
           {loading ? (
             <div className="p-4"><SkeletonTable /></div>
           ) : rows.length === 0 ? (
             <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+              <Languages className="h-10 w-10 mb-2 opacity-40" />
               <p className="text-lg font-medium">No locale data</p>
               <p className="text-sm">No translations found.</p>
             </div>
diff --git a/src/components/locations/locations-page.tsx b/src/components/locations/locations-page.tsx
index af49e18..249c03b 100644
--- a/src/components/locations/locations-page.tsx
+++ b/src/components/locations/locations-page.tsx
@@ -33,7 +33,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { toast } from "sonner";
-import { Plus, Pencil, Trash2 } from "lucide-react";
+import { Plus, Pencil, Trash2, MapPin } from "lucide-react";
 
 interface LocationRow {
   id: number;
@@ -183,7 +183,9 @@ export function LocationsPage() {
   };
 
   return (
-    <div className="space-y-4">
+    <div className="p-4 md:p-6 space-y-4">
+      <h2 className="text-xl font-semibold">Locations</h2>
+
       <div className="flex justify-end">
         <Button onClick={handleAdd} size="sm">
           <Plus className="h-4 w-4 mr-1" /> Add Location
@@ -191,11 +193,12 @@ export function LocationsPage() {
       </div>
 
       <div className="rounded-lg border">
-        <div className="max-h-[calc(100vh-14rem)] overflow-y-auto">
+        <div className="max-h-[calc(100vh-12rem)] overflow-y-auto">
           {loading ? (
             <div className="p-4"><SkeletonTable /></div>
           ) : locations.length === 0 ? (
             <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+              <MapPin className="h-10 w-10 mb-2 opacity-40" />
               <p className="text-lg font-medium">No locations</p>
               <p className="text-sm">Create your first location to get started.</p>
             </div>
diff --git a/src/components/purchases/purchases-page.tsx b/src/components/purchases/purchases-page.tsx
index 00cf381..5bae984 100644
--- a/src/components/purchases/purchases-page.tsx
+++ b/src/components/purchases/purchases-page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, useMemo } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -14,7 +14,10 @@ import {
 } from "@/components/ui/table";
 import { toast } from "sonner";
 import { format } from "date-fns";
-import { Copy } from "lucide-react";
+import { Copy, ShoppingCart } from "lucide-react";
+import { ExportButton } from "@/components/shared/export-button";
+import { SortableHeader } from "@/components/shared/sortable-header";
+import { copyToClipboard } from "@/lib/clipboard";
 
 interface PurchaseRow {
   id: number;
@@ -82,6 +85,8 @@ export function PurchasesPage() {
   const [page, setPage] = useState(1);
   const [status, setStatus] = useState<string>("");
   const [loading, setLoading] = useState(true);
+  const [sortColumn, setSortColumn] = useState<string>("");
+  const [sortDirection, setSortDirection] = useState<"asc" | "desc" | null>(null);
   const limit = 50;
 
   const fetchData = useCallback(async () => {
@@ -105,6 +110,49 @@ export function PurchasesPage() {
     fetchData();
   }, [fetchData]);
 
+  const handleSort = (column: string) => {
+    if (sortColumn === column) {
+      if (sortDirection === "asc") setSortDirection("desc");
+      else if (sortDirection === "desc") {
+        setSortColumn("");
+        setSortDirection(null);
+      }
+    } else {
+      setSortColumn(column);
+      setSortDirection("asc");
+    }
+  };
+
+  const sortedPurchases = useMemo(() => {
+    if (!sortColumn || !sortDirection) return purchases;
+    return [...purchases].sort((a, b) => {
+      let valA: unknown;
+      let valB: unknown;
+      if (sortColumn === "date") { valA = a.purchaseDate; valB = b.purchaseDate; }
+      else if (sortColumn === "amount") { valA = a.totalPrice; valB = b.totalPrice; }
+      else if (sortColumn === "status") { valA = a.status; valB = b.status; }
+      else return 0;
+      if (valA === valB) return 0;
+      const cmp = valA < valB ? -1 : 1;
+      return sortDirection === "asc" ? cmp : -cmp;
+    });
+  }, [purchases, sortColumn, sortDirection]);
+
+  const exportData = useMemo<Record<string, unknown>[]>(
+    () => sortedPurchases.map((p) => ({
+      ID: p.id,
+      User: p.user.username || `@${p.user.telegramId}`,
+      Product: p.product.name,
+      Qty: p.quantity,
+      "Total Price": p.totalPrice,
+      Currency: p.walletType || "",
+      "TX Hash": p.txHash || "",
+      Date: p.purchaseDate,
+      Status: p.status,
+    })),
+    [sortedPurchases]
+  );
+
   const totalPages = Math.max(1, Math.ceil(total / limit));
 
   const handleStatusChange = (s: string) => {
@@ -112,13 +160,18 @@ export function PurchasesPage() {
     setPage(1);
   };
 
-  const copyHash = (hash: string) => {
-    navigator.clipboard.writeText(hash);
-    toast.success("Copied!");
+  const copyHash = async (hash: string) => {
+    const ok = await copyToClipboard(hash);
+    if (ok) toast.success("Copied!");
   };
 
   return (
-    <div className="space-y-4">
+    <div className="p-4 md:p-6 space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-semibold">Purchases</h2>
+        <ExportButton data={exportData} filename="purchases" />
+      </div>
+
       <div className="flex flex-wrap gap-2">
         {STATUS_TABS.map((s) => (
           <Button
@@ -133,13 +186,14 @@ export function PurchasesPage() {
       </div>
 
       <div className="rounded-lg border">
-        <div className="max-h-[calc(100vh-14rem)] overflow-y-auto">
+        <div className="max-h-[calc(100vh-12rem)] overflow-y-auto">
           {loading ? (
             <div className="p-4">
               <SkeletonTable />
             </div>
           ) : purchases.length === 0 ? (
             <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+              <ShoppingCart className="h-10 w-10 mb-2 opacity-40" />
               <p className="text-lg font-medium">No purchases found</p>
               <p className="text-sm">There are no purchases matching the current filter.</p>
             </div>
@@ -151,15 +205,21 @@ export function PurchasesPage() {
                   <TableHead>User</TableHead>
                   <TableHead>Product</TableHead>
                   <TableHead className="w-16">Qty</TableHead>
-                  <TableHead className="w-28">Total Price</TableHead>
+                  <TableHead className="w-28">
+                    <SortableHeader column="amount" label="Total Price" sortColumn={sortColumn} sortDirection={sortDirection} onSort={handleSort} />
+                  </TableHead>
                   <TableHead className="w-20">Currency</TableHead>
                   <TableHead className="w-36">TX Hash</TableHead>
-                  <TableHead className="w-32">Date</TableHead>
-                  <TableHead className="w-28">Status</TableHead>
+                  <TableHead className="w-32">
+                    <SortableHeader column="date" label="Date" sortColumn={sortColumn} sortDirection={sortDirection} onSort={handleSort} />
+                  </TableHead>
+                  <TableHead className="w-28">
+                    <SortableHeader column="status" label="Status" sortColumn={sortColumn} sortDirection={sortDirection} onSort={handleSort} />
+                  </TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {purchases.map((p) => (
+                {sortedPurchases.map((p) => (
                   <TableRow key={p.id}>
                     <TableCell className="font-mono text-sm">{p.id}</TableCell>
                     <TableCell>
@@ -197,7 +257,7 @@ export function PurchasesPage() {
                       )}
                     </TableCell>
                     <TableCell className="text-sm text-muted-foreground">
-                      {format(new Date(p.purchaseDate), "MMM d, HH:mm")}
+                      {format(new Date(p.purchaseDate), "MMM d, yyyy HH:mm")}
                     </TableCell>
                     <TableCell>
                       <StatusBadge status={p.status} />
diff --git a/src/components/seed/seed-page.tsx b/src/components/seed/seed-page.tsx
index e3cf4a4..9ee6c15 100644
--- a/src/components/seed/seed-page.tsx
+++ b/src/components/seed/seed-page.tsx
@@ -18,6 +18,7 @@ import {
 import { Badge } from "@/components/ui/badge";
 import { toast } from "sonner";
 import { useAuthStore } from "@/stores/auth-store";
+import { Separator } from "@/components/ui/separator";
 import { Database, Trash2, AlertTriangle, Loader2, CheckCircle2 } from "lucide-react";
 
 export function SeedPage() {
@@ -88,7 +89,10 @@ export function SeedPage() {
   }
 
   return (
-    <div className="space-y-6">
+    <div className="p-4 md:p-6 space-y-6">
+      <h2 className="text-xl font-semibold">Database Seed</h2>
+
+      <Separator />
       {/* Status indicator */}
       <div className="flex items-center gap-3">
         <Database className="h-5 w-5 text-muted-foreground" />
diff --git a/src/components/settings/settings-page.tsx b/src/components/settings/settings-page.tsx
index 5c53b8b..ba14294 100644
--- a/src/components/settings/settings-page.tsx
+++ b/src/components/settings/settings-page.tsx
@@ -6,6 +6,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Separator } from "@/components/ui/separator";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { toast } from "sonner";
 import { Save, AlertTriangle } from "lucide-react";
@@ -84,7 +85,9 @@ export function SettingsPage() {
   };
 
   return (
-    <div className="space-y-6">
+    <div className="p-4 md:p-6 space-y-6">
+      <h2 className="text-xl font-semibold">Settings</h2>
+
       <Alert className="border-yellow-500 bg-yellow-50 dark:bg-yellow-950/20">
         <AlertTriangle className="h-4 w-4 text-yellow-600" />
         <AlertDescription className="text-yellow-700 dark:text-yellow-400">
@@ -92,6 +95,8 @@ export function SettingsPage() {
         </AlertDescription>
       </Alert>
 
+      <Separator />
+
       {!settings ? (
         <div className="space-y-6">
           {SECTIONS.map((s) => (
@@ -102,8 +107,9 @@ export function SettingsPage() {
           ))}
         </div>
       ) : (
-        SECTIONS.map((section) => (
+        SECTIONS.map((section, idx) => (
           <div key={section.title}>
+            {idx > 0 && <Separator className="mb-4" />}
             <h3 className="text-lg font-semibold mb-4">{section.title}</h3>
             <div className="space-y-4">
               {section.keys.map((key) => {
diff --git a/src/components/shared/export-button.tsx b/src/components/shared/export-button.tsx
new file mode 100644
index 0000000..7f477d0
--- /dev/null
+++ b/src/components/shared/export-button.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { Download, FileDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { toast } from "sonner";
+
+interface ExportButtonProps {
+  data: Record<string, unknown>[];
+  filename: string;
+  label?: string;
+}
+
+function toCsv(data: Record<string, unknown>[]): string {
+  if (data.length === 0) return "";
+  const headers = Object.keys(data[0]);
+  const escape = (val: unknown): string => {
+    const s = String(val ?? "");
+    if (s.includes(",") || s.includes("\"") || s.includes("\n")) {
+      return `"${s.replace(/"/g, '""')}"`;
+    }
+    return s;
+  };
+  const rows = data.map((row) => headers.map((h) => escape(row[h])).join(","));
+  return [headers.join(","), ...rows].join("\n");
+}
+
+function downloadFile(content: string, filename: string, mimeType: string) {
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+export function ExportButton({ data, filename, label }: ExportButtonProps) {
+  const handleExportCsv = () => {
+    if (data.length === 0) {
+      toast.info("No data to export");
+      return;
+    }
+    const csv = toCsv(data);
+    downloadFile(csv, `${filename}.csv`, "text/csv;charset=utf-8;");
+    toast.success(`Exported ${data.length} rows`);
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm">
+          <Download className="h-4 w-4 mr-1.5" />
+          {label ?? "Export"}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={handleExportCsv}>
+          <FileDown className="h-4 w-4 mr-2" />
+          CSV
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/components/shared/sortable-header.tsx b/src/components/shared/sortable-header.tsx
new file mode 100644
index 0000000..2f2b56a
--- /dev/null
+++ b/src/components/shared/sortable-header.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
+
+interface SortableHeaderProps {
+  column: string;
+  label: string;
+  sortColumn: string;
+  sortDirection: "asc" | "desc" | null;
+  onSort: (column: string) => void;
+}
+
+export function SortableHeader({
+  column,
+  label,
+  sortColumn,
+  sortDirection,
+  onSort,
+}: SortableHeaderProps) {
+  const isActive = sortColumn === column;
+
+  return (
+    <button
+      type="button"
+      onClick={() => onSort(column)}
+      className={`flex items-center gap-1 hover:text-foreground transition-colors cursor-pointer ${
+        isActive ? "text-primary" : "text-muted-foreground"
+      }`}
+    >
+      {label}
+      {isActive && sortDirection === "asc" ? (
+        <ArrowUp className="h-3.5 w-3.5" />
+      ) : isActive && sortDirection === "desc" ? (
+        <ArrowDown className="h-3.5 w-3.5" />
+      ) : (
+        <ArrowUpDown className="h-3.5 w-3.5 opacity-50" />
+      )}
+    </button>
+  );
+}
diff --git a/src/components/users/user-detail-page.tsx b/src/components/users/user-detail-page.tsx
index 928d0b6..6455e86 100644
--- a/src/components/users/user-detail-page.tsx
+++ b/src/components/users/user-detail-page.tsx
@@ -1,11 +1,13 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { format } from "date-fns";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   Select,
@@ -105,7 +107,7 @@ function PurchaseStatusBadge({ status }: { status: string }) {
 
 function ProfileSkeleton() {
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-4 md:p-6 space-y-6">
       <Skeleton className="h-8 w-40" />
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
         <Card>
@@ -204,7 +206,7 @@ export function UserDetailPage({ userId }: { userId: string }) {
   if (loading) return <ProfileSkeleton />;
   if (error || !user) {
     return (
-      <div className="p-6">
+      <div className="p-4 md:p-6">
         <Button variant="ghost" onClick={() => { window.location.hash = "/users"; }}>
           <ArrowLeft className="mr-2 h-4 w-4" /> Back to Users
         </Button>
@@ -214,12 +216,10 @@ export function UserDetailPage({ userId }: { userId: string }) {
   }
 
   const isBlocked = user.status === 2;
-  const registeredDate = new Date(user.createdAt).toLocaleDateString("en-US", {
-    year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit",
-  });
+  const registeredDate = format(new Date(user.createdAt), "MMM d, yyyy HH:mm");
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-4 md:p-6 space-y-6">
       {/* Header */}
       <div className="flex items-center gap-4">
         <Button
@@ -231,9 +231,9 @@ export function UserDetailPage({ userId }: { userId: string }) {
           <ArrowLeft className="h-4 w-4" />
         </Button>
         <div>
-          <h1 className="text-2xl font-bold tracking-tight">
+          <h2 className="text-xl font-semibold">
             {user.username || `User #${user.id}`}
-          </h1>
+          </h2>
           <p className="text-sm text-muted-foreground">ID: {user.id} · Telegram: {user.telegramId}</p>
         </div>
       </div>
@@ -360,6 +360,8 @@ export function UserDetailPage({ userId }: { userId: string }) {
             </CardContent>
           </Card>
 
+          <Separator />
+
           {/* Purchases Table */}
           <Card>
             <CardHeader>
@@ -400,9 +402,7 @@ export function UserDetailPage({ userId }: { userId: string }) {
                             <PurchaseStatusBadge status={p.status} />
                           </TableCell>
                           <TableCell className="text-xs text-muted-foreground">
-                            {new Date(p.purchaseDate).toLocaleDateString("en-US", {
-                              month: "short", day: "numeric", year: "numeric",
-                            })}
+                            {format(new Date(p.purchaseDate), "MMM d, yyyy HH:mm")}
                           </TableCell>
                         </TableRow>
                       ))}
diff --git a/src/components/users/users-page.tsx b/src/components/users/users-page.tsx
index f82c4c3..c9de9f6 100644
--- a/src/components/users/users-page.tsx
+++ b/src/components/users/users-page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState, useCallback, useRef } from "react";
+import { useEffect, useState, useCallback, useRef, useMemo } from "react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
@@ -13,7 +13,8 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { Search, Eye } from "lucide-react";
+import { Search, Eye, Users } from "lucide-react";
+import { ExportButton } from "@/components/shared/export-button";
 
 interface UserRow {
   id: number;
@@ -54,6 +55,12 @@ function StatusBadge({ status }: { status: number }) {
   );
 }
 
+function statusLabel(status: number): string {
+  if (status === 0) return "Active";
+  if (status === 2) return "Blocked";
+  return "Deleted";
+}
+
 function SkeletonTable() {
   return (
     <div className="space-y-3">
@@ -123,23 +130,42 @@ export function UsersPage() {
     fetchUsers(debouncedSearch, p);
   };
 
+  const exportData = useMemo<Record<string, unknown>[]>(
+    () => users.map((u) => ({
+      ID: u.id,
+      "Telegram ID": u.telegramId,
+      Username: u.username || "",
+      Country: u.country || "",
+      City: u.city || "",
+      Status: statusLabel(u.status),
+      "Total Balance": u.totalBalance,
+      "Bonus Balance": u.bonusBalance,
+      Wallets: u._count.wallets,
+      Purchases: u._count.purchases,
+    })),
+    [users]
+  );
+
   return (
-    <div className="p-6 space-y-4">
+    <div className="p-4 md:p-6 space-y-4">
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold tracking-tight">Users</h1>
+          <h2 className="text-xl font-semibold">Users</h2>
           <p className="text-sm text-muted-foreground">
             {total} user{total !== 1 ? "s" : ""} total
           </p>
         </div>
-        <div className="relative w-full sm:w-72">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-          <Input
-            placeholder="Search username or Telegram ID..."
-            value={search}
-            onChange={(e) => handleSearch(e.target.value)}
-            className="pl-9"
-          />
+        <div className="flex items-center gap-3">
+          <div className="relative w-full sm:w-72">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Search username or Telegram ID..."
+              value={search}
+              onChange={(e) => handleSearch(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+          <ExportButton data={exportData} filename="users" />
         </div>
       </div>
 
@@ -151,7 +177,10 @@ export function UsersPage() {
         ) : error ? (
           <div className="p-8 text-center text-destructive">{error}</div>
         ) : users.length === 0 ? (
-          <div className="p-8 text-center text-muted-foreground">No users found</div>
+          <div className="p-8 flex flex-col items-center justify-center text-muted-foreground">
+            <Users className="h-10 w-10 mb-2 opacity-40" />
+            <p>No users found</p>
+          </div>
         ) : (
           <Table>
             <TableHeader>
diff --git a/src/components/wallets/wallets-page.tsx b/src/components/wallets/wallets-page.tsx
index 9952640..7754873 100644
--- a/src/components/wallets/wallets-page.tsx
+++ b/src/components/wallets/wallets-page.tsx
@@ -296,11 +296,11 @@ export function WalletsPage() {
   const currencyTypes = ['BTC', 'LTC', 'ETH', 'USDT', 'USDC'];
 
   return (
-    <div className="space-y-6">
+    <div className="p-4 md:p-6 space-y-6">
       <div className="flex items-center gap-3">
         <Wallet className="h-8 w-8 text-orange-500" />
         <div>
-          <h1 className="text-2xl font-bold">Wallets</h1>
+          <h2 className="text-xl font-semibold">Wallets</h2>
           <p className="text-sm text-muted-foreground">Manage crypto wallets, view balances, and track commissions</p>
         </div>
       </div>
@@ -341,7 +341,7 @@ export function WalletsPage() {
                 </div>
               </CardHeader>
               <CardContent className="p-0">
-                <div className="max-h-[calc(100vh-20rem)] overflow-y-auto">
+                <div className="max-h-[calc(100vh-12rem)] overflow-y-auto">
                   {userListLoading ? (
                     <div className="p-4 space-y-3">
                       {[1, 2, 3, 4, 5].map((i) => (
diff --git a/src/lib/clipboard.ts b/src/lib/clipboard.ts
new file mode 100644
index 0000000..2ebc21b
--- /dev/null
+++ b/src/lib/clipboard.ts
@@ -0,0 +1,25 @@
+export async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    if (navigator.clipboard && typeof navigator.clipboard.writeText === "function") {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch {
+    // fallback below
+  }
+
+  try {
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.style.position = "fixed";
+    textarea.style.left = "-9999px";
+    textarea.style.opacity = "0";
+    document.body.appendChild(textarea);
+    textarea.select();
+    document.execCommand("copy");
+    document.body.removeChild(textarea);
+    return true;
+  } catch {
+    return false;
+  }
+}
diff --git a/src/lib/db.ts b/src/lib/db.ts
index 7dfb80c..82c1498 100644
--- a/src/lib/db.ts
+++ b/src/lib/db.ts
@@ -7,7 +7,7 @@ const globalForPrisma = globalThis as unknown as {
 export const db =
   globalForPrisma.prisma ??
   new PrismaClient({
-    log: ['query'],
+    log: ['error'],
   })
 
 if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = db
\ No newline at end of file
diff --git a/tool-results/read_1785935143179_c8c3abacfba3.txt b/tool-results/read_1785935143179_c8c3abacfba3.txt
new file mode 100644
index 0000000..5635e83
--- /dev/null
+++ b/tool-results/read_1785935143179_c8c3abacfba3.txt
@@ -0,0 +1,1445 @@
+     1→"use client";
+     2→
+     3→import { useState, useEffect, useCallback, useRef } from "react";
+     4→import {
+     5→  ResizablePanelGroup,
+     6→  ResizablePanel,
+     7→  ResizableHandle,
+     8→} from "@/components/ui/resizable";
+     9→import {
+    10→  Accordion,
+    11→  AccordionContent,
+    12→  AccordionItem,
+    13→  AccordionTrigger,
+    14→} from "@/components/ui/accordion";
+    15→import {
+    16→  Table,
+    17→  TableBody,
+    18→  TableCell,
+    19→  TableHead,
+    20→  TableHeader,
+    21→  TableRow,
+    22→} from "@/components/ui/table";
+    23→import {
+    24→  Dialog,
+    25→  DialogContent,
+    26→  DialogHeader,
+    27→  DialogTitle,
+    28→  DialogFooter,
+    29→} from "@/components/ui/dialog";
+    30→import {
+    31→  Select,
+    32→  SelectContent,
+    33→  SelectGroup,
+    34→  SelectItem,
+    35→  SelectLabel,
+    36→  SelectTrigger,
+    37→  SelectValue,
+    38→} from "@/components/ui/select";
+    39→import {
+    40→  AlertDialog,
+    41→  AlertDialogAction,
+    42→  AlertDialogCancel,
+    43→  AlertDialogContent,
+    44→  AlertDialogDescription,
+    45→  AlertDialogFooter,
+    46→  AlertDialogHeader,
+    47→  AlertDialogTitle,
+    48→} from "@/components/ui/alert-dialog";
+    49→import { Switch } from "@/components/ui/switch";
+    50→import { Button } from "@/components/ui/button";
+    51→import { Badge } from "@/components/ui/badge";
+    52→import { Input } from "@/components/ui/input";
+    53→import { Label } from "@/components/ui/label";
+    54→import { Textarea } from "@/components/ui/textarea";
+    55→import { Checkbox } from "@/components/ui/checkbox";
+    56→import { Skeleton } from "@/components/ui/skeleton";
+    57→import { toast } from "sonner";
+    58→import {
+    59→  Plus,
+    60→  Pencil,
+    61→  Trash2,
+    62→  Search,
+    63→  Package,
+    64→  MapPin,
+    65→  FolderOpen,
+    66→  Tag,
+    67→  ChevronRight,
+    68→  X,
+    69→} from "lucide-react";
+    70→
+    71→// ─── Types ───────────────────────────────────────
+    72→
+    73→interface TreeLocation {
+    74→  id: number;
+    75→  country: string;
+    76→  city: string;
+    77→  district: string;
+    78→  isActive: number;
+    79→  createdAt: string;
+    80→  categoryCount: number;
+    81→  productCount: number;
+    82→}
+    83→
+    84→interface TreeCategory {
+    85→  id: number;
+    86→  locationId: number;
+    87→  name: string;
+    88→  isActive: number;
+    89→  createdAt: string;
+    90→  location: { id: number; country: string; city: string; district: string };
+    91→  subcategoryCount: number;
+    92→  productCount: number;
+    93→}
+    94→
+    95→interface TreeSubcategory {
+    96→  id: number;
+    97→  categoryId: number;
+    98→  name: string;
+    99→  isActive: number;
+   100→  createdAt: string;
+   101→  category: { id: number; name: string; locationId: number };
+   102→  productCount: number;
+   103→}
+   104→
+   105→interface CatalogTree {
+   106→  locations: TreeLocation[];
+   107→  categories: TreeCategory[];
+   108→  subcategories: TreeSubcategory[];
+   109→}
+   110→
+   111→interface Product {
+   112→  id: number;
+   113→  locationId: number;
+   114→  categoryId: number;
+   115→  subcategoryId: number | null;
+   116→  name: string;
+   117→  description: string | null;
+   118→  privateData: string | null;
+   119→  price: number;
+   120→  quantityInStock: number;
+   121→  photoUrl: string | null;
+   122→  hiddenPhotoUrl: string | null;
+   123→  hiddenCoordinates: string | null;
+   124→  hiddenDescription: string | null;
+   125→  isMono: number;
+   126→  createdAt: string;
+   127→  category: { id: number; name: string };
+   128→  subcategory: { id: number; name: string } | null;
+   129→  location: { id: number; country: string; city: string; district: string };
+   130→}
+   131→
+   132→interface ProductFormData {
+   133→  locationId: string;
+   134→  categoryId: string;
+   135→  subcategoryId: string;
+   136→  name: string;
+   137→  description: string;
+   138→  privateData: string;
+   139→  price: string;
+   140→  quantityInStock: string;
+   141→  photoUrl: string;
+   142→  hiddenPhotoUrl: string;
+   143→  hiddenCoordinates: string;
+   144→  hiddenDescription: string;
+   145→  isMono: boolean;
+   146→}
+   147→
+   148→const emptyForm: ProductFormData = {
+   149→  locationId: "",
+   150→  categoryId: "",
+   151→  subcategoryId: "",
+   152→  name: "",
+   153→  description: "",
+   154→  privateData: "",
+   155→  price: "",
+   156→  quantityInStock: "0",
+   157→  photoUrl: "",
+   158→  hiddenPhotoUrl: "",
+   159→  hiddenCoordinates: "",
+   160→  hiddenDescription: "",
+   161→  isMono: false,
+   162→};
+   163→
+   164→type FilterType =
+   165→  | { type: "all" }
+   166→  | { type: "location"; locationId: number }
+   167→  | { type: "category"; categoryId: number; locationId: number }
+   168→  | { type: "subcategory"; subcategoryId: number; categoryId: number; locationId: number };
+   169→
+   170→// ─── Component ───────────────────────────────────
+   171→
+   172→export function CatalogPage() {
+   173→  // Tree state
+   174→  const [tree, setTree] = useState<CatalogTree | null>(null);
+   175→  const [treeLoading, setTreeLoading] = useState(true);
+   176→  const [treeError, setTreeError] = useState<string | null>(null);
+   177→
+   178→  // Products state
+   179→  const [products, setProducts] = useState<Product[]>([]);
+   180→  const [productTotal, setProductTotal] = useState(0);
+   181→  const [productsLoading, setProductsLoading] = useState(true);
+   182→  const [search, setSearch] = useState("");
+   183→  const [searchDebounce, setSearchDebounce] = useState("");
+   184→  const [filter, setFilter] = useState<FilterType>({ type: "all" });
+   185→  const [productPage, setProductPage] = useState(1);
+   186→  const productLimit = 50;
+   187→
+   188→  // Modal state
+   189→  const [modalOpen, setModalOpen] = useState(false);
+   190→  const [editProduct, setEditProduct] = useState<Product | null>(null);
+   191→  const [formData, setFormData] = useState<ProductFormData>(emptyForm);
+   192→  const [formLocations, setFormLocations] = useState<TreeLocation[]>([]);
+   193→  const [formCategories, setFormCategories] = useState<TreeCategory[]>([]);
+   194→  const [formSubcategories, setFormSubcategories] = useState<TreeSubcategory[]>([]);
+   195→  const [saving, setSaving] = useState(false);
+   196→
+   197→  // Delete confirm
+   198→  const [deleteTarget, setDeleteTarget] = useState<{
+   199→    type: string;
+   200→    id: number;
+   201→    name: string;
+   202→  } | null>(null);
+   203→
+   204→  // Inline rename state
+   205→  const [renamingId, setRenamingId] = useState<string | null>(null);
+   206→  const [renameValue, setRenameValue] = useState("");
+   207→  const renameInputRef = useRef<HTMLInputElement>(null);
+   208→
+   209→  // Add inline state
+   210→  const [addMode, setAddMode] = useState<string | null>(null);
+   211→  const [addInput, setAddInput] = useState("");
+   212→  const [addDistrict, setAddDistrict] = useState("");
+   213→  const [addCity, setAddCity] = useState("");
+   214→  const [addCountry, setAddCountry] = useState("");
+   215→  const [addParentId, setAddParentId] = useState<number | null>(null);
+   216→  const addInputRef = useRef<HTMLInputElement>(null);
+   217→
+   218→  useEffect(() => {
+   219→    if (addInputRef.current) addInputRef.current.focus();
+   220→  }, [addMode]);
+   221→
+   222→  useEffect(() => {
+   223→    if (renameInputRef.current) renameInputRef.current.focus();
+   224→  }, [renamingId]);
+   225→
+   226→  // ─── Data fetching ─────────────────────────────
+   227→  const fetchTree = useCallback(async () => {
+   228→    try {
+   229→      const res = await fetch("/api/catalog/tree");
+   230→      if (!res.ok) throw new Error("Failed to load tree");
+   231→      const data: CatalogTree = await res.json();
+   232→      setTree(data);
+   233→      setTreeError(null);
+   234→    } catch (e) {
+   235→      setTreeError("Failed to load catalog tree");
+   236→    } finally {
+   237→      setTreeLoading(false);
+   238→    }
+   239→  }, []);
+   240→
+   241→  const fetchProducts = useCallback(async () => {
+   242→    setProductsLoading(true);
+   243→    try {
+   244→      const params = new URLSearchParams({ page: String(productPage), limit: String(productLimit) });
+   245→      if (searchDebounce) params.set("search", searchDebounce);
+   246→      if (filter.type === "location") params.set("loc", String(filter.locationId));
+   247→      if (filter.type === "category") params.set("cat", String(filter.categoryId));
+   248→      if (filter.type === "subcategory") params.set("sub", String(filter.subcategoryId));
+   249→
+   250→      const res = await fetch(`/api/products/bulk?${params}`);
+   251→      if (!res.ok) throw new Error("Failed to load products");
+   252→      const data = await res.json();
+   253→      setProducts(data.data);
+   254→      setProductTotal(data.total);
+   255→    } catch {
+   256→      toast.error("Failed to load products");
+   257→    } finally {
+   258→      setProductsLoading(false);
+   259→    }
+   260→  }, [filter, searchDebounce, productPage]);
+   261→
+   262→  useEffect(() => {
+   263→    fetchTree();
+   264→  }, [fetchTree]);
+   265→
+   266→  useEffect(() => {
+   267→    fetchProducts();
+   268→  }, [fetchProducts]);
+   269→
+   270→  // Search debounce
+   271→  useEffect(() => {
+   272→    const t = setTimeout(() => setSearchDebounce(search), 300);
+   273→    return () => clearTimeout(t);
+   274→  }, [search]);
+   275→
+   276→  // Reset page on filter/search change
+   277→  useEffect(() => {
+   278→    setProductPage(1);
+   279→  }, [filter, searchDebounce]);
+   280→
+   281→  // ─── Tree grouping ─────────────────────────────
+   282→  const getGroupedTree = () => {
+   283→    if (!tree) return {};
+   284→
+   285→    const countryMap = new Map<
+   286→      string,
+   287→      {
+   288→        cityMap: Map<
+   289→          string,
+   290→          {
+   291→            districtMap: Map<
+   292→              string,
+   293→              { location: TreeLocation; categories: TreeCategory[] }
+   294→            >;
+   295→          }
+   296→        >;
+   297→      }
+   298→    >();
+   299→
+   300→    for (const loc of tree.locations) {
+   301→      if (!countryMap.has(loc.country))
+   302→        countryMap.set(loc.country, { cityMap: new Map() });
+   303→      const countryEntry = countryMap.get(loc.country)!;
+   304→      if (!countryEntry.cityMap.has(loc.city))
+   305→        countryEntry.cityMap.set(loc.city, { districtMap: new Map() });
+   306→      const cityEntry = countryEntry.cityMap.get(loc.city)!;
+   307→      const distKey = loc.district || "(no district)";
+   308→      if (!cityEntry.districtMap.has(distKey))
+   309→        cityEntry.districtMap.set(distKey, { location: loc, categories: [] });
+   310→    }
+   311→
+   312→    for (const cat of tree.categories) {
+   313→      const countryEntry = countryMap.get(cat.location.country);
+   314→      if (!countryEntry) continue;
+   315→      const cityEntry = countryEntry.cityMap.get(cat.location.city);
+   316→      if (!cityEntry) continue;
+   317→      const distKey = cat.location.district || "(no district)";
+   318→      const distEntry = cityEntry.districtMap.get(distKey);
+   319→      if (!distEntry) continue;
+   320→      distEntry.categories.push(cat);
+   321→    }
+   322→
+   323→    return countryMap;
+   324→  };
+   325→
+   326→  // ─── Tree node actions ─────────────────────────
+   327→  const handleToggleActive = async (type: string, id: number) => {
+   328→    try {
+   329→      const res = await fetch(`/api/${type}s/${id}`, { method: "PATCH" });
+   330→      if (!res.ok) throw new Error();
+   331→      toast.success(`${type} toggled`);
+   332→      fetchTree();
+   333→    } catch {
+   334→      toast.error(`Failed to toggle ${type}`);
+   335→    }
+   336→  };
+   337→
+   338→  const handleDelete = async () => {
+   339→    if (!deleteTarget) return;
+   340→    try {
+   341→      const typePath = deleteTarget.type === "product" ? "products" : `${deleteTarget.type}s`;
+   342→      const res = await fetch(`/api/${typePath}/${deleteTarget.id}`, { method: "DELETE" });
+   343→      if (!res.ok) {
+   344→        const data = await res.json();
+   345→        throw new Error(data.error || "Failed to delete");
+   346→      }
+   347→      toast.success(`${deleteTarget.type} deleted`);
+   348→      setDeleteTarget(null);
+   349→      fetchTree();
+   350→      fetchProducts();
+   351→    } catch (e) {
+   352→      toast.error(e instanceof Error ? e.message : "Failed to delete");
+   353→    }
+   354→  };
+   355→
+   356→  const handleRename = async (type: string, id: number) => {
+   357→    if (!renameValue.trim()) {
+   358→      setRenamingId(null);
+   359→      return;
+   360→    }
+   361→    try {
+   362→      let body: Record<string, string> = {};
+   363→      if (type === "location") {
+   364→        const loc = tree?.locations.find((l) => l.id === id);
+   365→        body = { country: loc?.country || "", city: loc?.city || "", district: renameValue.trim() };
+   366→      } else {
+   367→        body = { name: renameValue.trim() };
+   368→      }
+   369→      const typePath = `${type}s`;
+   370→      const res = await fetch(`/api/${typePath}/${id}`, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+   371→      if (!res.ok) throw new Error();
+   372→      toast.success("Renamed");
+   373→      setRenamingId(null);
+   374→      fetchTree();
+   375→    } catch {
+   376→      toast.error("Failed to rename");
+   377→    }
+   378→  };
+   379→
+   380→  const handleAdd = async () => {
+   381→    if (!addMode) return;
+   382→    try {
+   383→      if (addMode === "location") {
+   384→        if (!addCountry.trim() || !addCity.trim()) {
+   385→          toast.error("Country and city are required");
+   386→          return;
+   387→        }
+   388→        const res = await fetch("/api/locations/bulk", {
+   389→          method: "POST",
+   390→          headers: { "Content-Type": "application/json" },
+   391→          body: JSON.stringify({ country: addCountry.trim(), city: addCity.trim(), district: addDistrict.trim() }),
+   392→        });
+   393→        if (!res.ok) {
+   394→          const data = await res.json();
+   395→          throw new Error(data.error || "Failed to add");
+   396→        }
+   397→      } else if (addMode === "category") {
+   398→        if (!addInput.trim() || !addParentId) {
+   399→          toast.error("Name is required");
+   400→          return;
+   401→        }
+   402→        const res = await fetch("/api/categories/bulk", {
+   403→          method: "POST",
+   404→          headers: { "Content-Type": "application/json" },
+   405→          body: JSON.stringify({ name: addInput.trim(), locationId: addParentId }),
+   406→        });
+   407→        if (!res.ok) {
+   408→          const data = await res.json();
+   409→          throw new Error(data.error || "Failed to add");
+   410→        }
+   411→      } else if (addMode === "subcategory") {
+   412→        if (!addInput.trim() || !addParentId) {
+   413→          toast.error("Name is required");
+   414→          return;
+   415→        }
+   416→        const res = await fetch("/api/subcategories/bulk", {
+   417→          method: "POST",
+   418→          headers: { "Content-Type": "application/json" },
+   419→          body: JSON.stringify({ name: addInput.trim(), categoryId: addParentId }),
+   420→        });
+   421→        if (!res.ok) {
+   422→          const data = await res.json();
+   423→          throw new Error(data.error || "Failed to add");
+   424→        }
+   425→      }
+   426→      toast.success("Added successfully");
+   427→      setAddMode(null);
+   428→      setAddInput("");
+   429→      setAddCountry("");
+   430→      setAddCity("");
+   431→      setAddDistrict("");
+   432→      setAddParentId(null);
+   433→      fetchTree();
+   434→    } catch (e) {
+   435→      toast.error(e instanceof Error ? e.message : "Failed to add");
+   436→    }
+   437→  };
+   438→
+   439→  // ─── Product modal ─────────────────────────────
+   440→  const openProductModal = async (product?: Product) => {
+   441→ if (product) {
+   442→      setEditProduct(product);
+   443→      setFormData({
+   444→        locationId: String(product.locationId),
+   445→        categoryId: String(product.categoryId),
+   446→        subcategoryId: product.subcategoryId ? String(product.subcategoryId) : "",
+   447→        name: product.name,
+   448→        description: product.description || "",
+   449→        privateData: product.privateData || "",
+   450→        price: String(product.price),
+   451→        quantityInStock: product.isMono ? "0" : String(product.quantityInStock),
+   452→        photoUrl: product.photoUrl || "",
+   453→        hiddenPhotoUrl: product.hiddenPhotoUrl || "",
+   454→        hiddenCoordinates: product.hiddenCoordinates || "",
+   455→        hiddenDescription: product.hiddenDescription || "",
+   456→        isMono: product.isMono === 1,
+   457→      });
+   458→    } else {
+   459→      setEditProduct(null);
+   460→      setFormData(emptyForm);
+   461→    }
+   462→
+   463→    // Load form data
+   464→    try {
+   465→      const [treeRes, locRes] = await Promise.all([
+   466→        fetch("/api/catalog/tree"),
+   467→        fetch("/api/locations/bulk"),
+   468→      ]);
+   469→      const treeData: CatalogTree = await treeRes.json();
+   470→      const locData: TreeLocation[] = await locRes.json();
+   471→      setFormLocations(locData);
+   472→
+   473→      if (product) {
+   474→        setFormCategories(treeData.categories.filter((c) => c.locationId === product.locationId));
+   475→        setFormSubcategories(treeData.subcategories.filter((s) => s.categoryId === product.categoryId));
+   476→      } else {
+   477→        setFormCategories([]);
+   478→        setFormSubcategories([]);
+   479→      }
+   480→    } catch {
+   481→      toast.error("Failed to load form data");
+   482→    }
+   483→
+   484→    setModalOpen(true);
+   485→  };
+   486→
+   487→  const handleLocationChange = async (locationId: string) => {
+   488→    const updated = { ...formData, locationId, categoryId: "", subcategoryId: "" };
+   489→    setFormData(updated);
+   490→    if (!locationId) {
+   491→      setFormCategories([]);
+   492→      setFormSubcategories([]);
+   493→      return;
+   494→    }
+   495→    try {
+   496→      const treeRes = await fetch("/api/catalog/tree");
+   497→      const treeData: CatalogTree = await treeRes.json();
+   498→      const cats = treeData.categories.filter((c) => c.locationId === +locationId);
+   499→      setFormCategories(cats);
+   500→      setFormSubcategories([]);
+   501→    } catch {
+   502→      // ignore
+   503→    }
+   504→  };
+   505→
+   506→  const handleCategoryChange = async (categoryId: string) => {
+   507→    const updated = { ...formData, categoryId, subcategoryId: "" };
+   508→    setFormData(updated);
+   509→    if (!categoryId) {
+   510→      setFormSubcategories([]);
+   511→      return;
+   512→    }
+   513→    try {
+   514→      const treeRes = await fetch("/api/catalog/tree");
+   515→      const treeData: CatalogTree = await treeRes.json();
+   516→      const subs = treeData.subcategories.filter((s) => s.categoryId === +categoryId);
+   517→      setFormSubcategories(subs);
+   518→    } catch {
+   519→      // ignore
+   520→    }
+   521→  };
+   522→
+   523→  const handleSaveProduct = async () => {
+   524→    if (!formData.locationId || !formData.categoryId || !formData.name || !formData.price) {
+   525→      toast.error("Location, Category, Name, and Price are required");
+   526→      return;
+   527→    }
+   528→    setSaving(true);
+   529→    try {
+   530→      const body = {
+   531→        locationId: +formData.locationId,
+   532→        categoryId: +formData.categoryId,
+   533→        subcategoryId: formData.subcategoryId ? +formData.subcategoryId : null,
+   534→        name: formData.name,
+   535→        description: formData.description || null,
+   536→        privateData: formData.privateData || null,
+   537→        price: +formData.price,
+   538→        quantityInStock: formData.isMono ? 0 : +formData.quantityInStock,
+   539→        photoUrl: formData.photoUrl || null,
+   540→        hiddenPhotoUrl: formData.hiddenPhotoUrl || null,
+   541→        hiddenCoordinates: formData.hiddenCoordinates || null,
+   542→        hiddenDescription: formData.hiddenDescription || null,
+   543→        isMono: formData.isMono ? 1 : 0,
+   544→      };
+   545→
+   546→      let res: Response;
+   547→      if (editProduct) {
+   548→        res = await fetch(`/api/products/${editProduct.id}`, {
+   549→          method: "PUT",
+   550→          headers: { "Content-Type": "application/json" },
+   551→          body: JSON.stringify(body),
+   552→        });
+   553→      } else {
+   554→        res = await fetch("/api/products/add", {
+   555→          method: "POST",
+   556→          headers: { "Content-Type": "application/json" },
+   557→          body: JSON.stringify(body),
+   558→        });
+   559→      }
+   560→
+   561→      if (!res.ok) {
+   562→        const data = await res.json();
+   563→        throw new Error(data.error || "Failed to save");
+   564→      }
+   565→
+   566→      toast.success(editProduct ? "Product updated" : "Product created");
+   567→      setModalOpen(false);
+   568→      fetchTree();
+   569→      fetchProducts();
+   570→    } catch (e) {
+   571→      toast.error(e instanceof Error ? e.message : "Failed to save product");
+   572→    } finally {
+   573→      setSaving(false);
+   574→    }
+   575→  };
+   576→
+   577→  // ─── Filter handler ────────────────────────────
+   578→  const handleNodeClick = (f: FilterType) => {
+   579→    setFilter(f);
+   580→  };
+   581→
+   582→  // ─── Grouped tree for rendering ────────────────
+   583→  const groupedTree = getGroupedTree();
+   584→  const countries = Array.from(groupedTree.keys()).sort();
+   585→
+   586→  const totalPages = Math.max(1, Math.ceil(productTotal / productLimit));
+   587→
+   588→  // ─── Render: Left panel skeleton ────────────────
+   589→  if (treeLoading) {
+   590→    return (
+   591→      <div className="p-4 space-y-3">
+   592→        <Skeleton className="h-8 w-48" />
+   593→        <Skeleton className="h-64 w-full" />
+   594→        <Skeleton className="h-96 w-full" />
+   595→      </div>
+   596→    );
+   597→  }
+   598→
+   599→  if (treeError) {
+   600→    return (
+   601→      <div className="p-6">
+   602→        <p className="text-destructive">{treeError}</p>
+   603→        <Button variant="outline" onClick={fetchTree} className="mt-2">
+   604→          Retry
+   605→        </Button>
+   606→      </div>
+   607→    );
+   608→  }
+   609→
+   610→  // ─── Location select groups for form ───────────
+   611→  const locationGroups = new Map<string, TreeLocation[]>();
+   612→  for (const loc of formLocations) {
+   613→    const key = `${loc.country} > ${loc.city}`;
+   614→    if (!locationGroups.has(key)) locationGroups.set(key, []);
+   615→    locationGroups.get(key)!.push(loc);
+   616→  }
+   617→
+   618→  // ─── Main render ────────────────────────────────
+   619→  return (
+   620→    <div className="h-full flex flex-col">
+   621→      {/* Header */}
+   622→      <div className="flex items-center justify-between px-4 pt-4 pb-2">
+   623→        <div className="flex items-center gap-2">
+   624→          <FolderOpen className="h-5 w-5 text-orange-500" />
+   625→          <h1 className="text-xl font-semibold">Catalog</h1>
+   626→        </div>
+   627→        <Button onClick={() => openProductModal()} size="sm">
+   628→          <Plus className="h-4 w-4 mr-1" /> Add Product
+   629→        </Button>
+   630→      </div>
+   631→
+   632→      {/* Main content */}
+   633→      <div className="flex-1 px-4 pb-4 min-h-0">
+   634→        <ResizablePanelGroup direction="horizontal" className="rounded-lg border">
+   635→          {/* ─── Left Panel: Tree ─── */}
+   636→          <ResizablePanel defaultSize={30} minSize={20} maxSize={50}>
+   637→            <div className="h-full flex flex-col">
+   638→              <div className="p-3 border-b flex items-center justify-between">
+   639→                <span className="text-sm font-medium text-muted-foreground">Catalog Tree</span>
+   640→                <Button
+   641→                  variant="ghost"
+   642→                  size="sm"
+   643→                  className="h-7 text-xs"
+   644→                  onClick={() => {
+   645→                    setAddMode("location");
+   646→                    setAddCountry("");
+   647→                    setAddCity("");
+   648→                    setAddDistrict("");
+   649→                  }}
+   650→                >
+   651→                  <Plus className="h-3 w-3 mr-1" /> Location
+   652→                </Button>
+   653→              </div>
+   654→
+   655→              {/* Add Location Form */}
+   656→              {addMode === "location" && (
+   657→                <div className="p-3 border-b bg-muted/30 space-y-2">
+   658→                  <div className="flex gap-2">
+   659→                    <Input
+   660→                      placeholder="Country"
+   661→                      value={addCountry}
+   662→                      onChange={(e) => setAddCountry(e.target.value)}
+   663→                      className="h-8 text-xs"
+   664→                    />
+   665→                    <Input
+   666→                      placeholder="City"
+   667→                      value={addCity}
+   668→                      onChange={(e) => setAddCity(e.target.value)}
+   669→                      className="h-8 text-xs"
+   670→                    />
+   671→                  </div>
+   672→                  <div className="flex gap-2">
+   673→                    <Input
+   674→                      placeholder="District (optional)"
+   675→                      value={addDistrict}
+   676→                      onChange={(e) => setAddDistrict(e.target.value)}
+   677→                      className="h-8 text-xs"
+   678→                      ref={addInputRef}
+   679→                      onKeyDown={(e) => {
+   680→                        if (e.key === "Enter") handleAdd();
+   681→                        if (e.key === "Escape") setAddMode(null);
+   682→                      }}
+   683→                    />
+   684→                  </div>
+   685→                  <div className="flex gap-2">
+   686→                    <Button size="sm" className="h-7 text-xs" onClick={handleAdd}>
+   687→                      Add
+   688→                    </Button>
+   689→                    <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => setAddMode(null)}>
+   690→                      Cancel
+   691→                    </Button>
+   692→                  </div>
+   693→                </div>
+   694→              )}
+   695→
+   696→              {/* Tree */}
+   697→              <div className="flex-1 overflow-y-auto max-h-[calc(100vh-14rem)] p-2">
+   698→                {countries.length === 0 ? (
+   699→                  <p className="text-sm text-muted-foreground text-center py-8">
+   700→                    No locations yet. Add one above.
+   701→                  </p>
+   702→                ) : (
+   703→                  <Accordion type="multiple" defaultValue={countries.slice(0, 3)} className="w-full">
+   704→                    {countries.map((country) => {
+   705→                      const countryEntry = groupedTree.get(country)!;
+   706→                      const cities = Array.from(countryEntry.cityMap.keys()).sort();
+   707→                      return (
+   708→                        <AccordionItem key={country} value={country}>
+   709→                          <AccordionTrigger className="text-sm font-semibold py-2 px-2 hover:no-underline">
+   710→                            <span className="flex items-center gap-2">
+   711→                              <MapPin className="h-3.5 w-3.5 text-orange-500" />
+   712→                              {country}
+   713→                            </span>
+   714→                          </AccordionTrigger>
+   715→                          <AccordionContent className="pb-1">
+   716→                            {cities.map((city) => {
+   717→                              const cityEntry = countryEntry.cityMap.get(city)!;
+   718→                              const districts = Array.from(cityEntry.districtMap.keys()).sort();
+   719→                              return (
+   720→                                <div key={city} className="ml-2">
+   721→                                  <Accordion type="multiple" className="w-full">
+   722→                                    {districts.map((district) => {
+   723→                                      const { location, categories } = cityEntry.districtMap.get(district)!;
+   724→                                      const totalCount = location.categoryCount + location.productCount;
+   725→                                      const isDistrict = district !== "(no district)";
+   726→                                      return (
+   727→                                        <AccordionItem key={district} value={`${country}-${city}-${district}`}>
+   728→                                          <AccordionTrigger className="text-xs py-1.5 px-2 hover:no-underline">
+   729→                                            <div
+   730→                                              className="flex items-center gap-2 flex-1 min-w-0"
+   731→                                              onClick={(e) => {
+   732→                                                e.stopPropagation();
+   733→                                                handleNodeClick({ type: "location", locationId: location.id });
+   734→                                              }}
+   735→                                            >
+   736→                                              <ChevronRight className="h-3 w-3 shrink-0" />
+   737→                                              <span className="truncate">
+   738→                                                {city}{isDistrict ? ` > ${district}` : ""}
+   739→                                              </span>
+   740→                                              <Badge variant={location.isActive === 1 ? "default" : "secondary"} className="text-[10px] px-1.5 py-0 ml-auto mr-1">
+   741→                                                {totalCount}
+   742→                                              </Badge>
+   743→                                              {location.isActive === 0 && (
+   744→                                                <Badge variant="outline" className="text-[10px] px-1 py-0 text-muted-foreground">
+   745→                                                  off
+   746→                                                </Badge>
+   747→                                              )}
+   748→                                            </div>
+   749→                                            <div className="flex items-center gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
+   750→                                              <Switch
+   751→                                                checked={location.isActive === 1}
+   752→                                                onCheckedChange={() => handleToggleActive("location", location.id)}
+   753→                                                className="scale-75"
+   754→                                              />
+   755→                                              <Button
+   756→                                                variant="ghost"
+   757→                                                size="sm"
+   758→                                                className="h-6 w-6 p-0"
+   759→                                                onClick={() => {
+   760→                                                  setRenamingId(`loc-${location.id}`);
+   761→                                                  setRenameValue(isDistrict ? district : city);
+   762→                                                }}
+   763→                                              >
+   764→                                                <Pencil className="h-3 w-3" />
+   765→                                              </Button>
+   766→                                              <Button
+   767→                                                variant="ghost"
+   768→                                                size="sm"
+   769→                                                className="h-6 w-6 p-0 text-destructive hover:text-destructive"
+   770→                                                onClick={() =>
+   771→                                                  setDeleteTarget({
+   772→                                                    type: "location",
+   773→                                                    id: location.id,
+   774→                                                    name: `${country} > ${city}${isDistrict ? ` > ${district}` : ""}`,
+   775→                                                  })
+   776→                                                }
+   777→                                              >
+   778→                                                <Trash2 className="h-3 w-3" />
+   779→                                              </Button>
+   780→                                              <Button
+   781→                                                variant="ghost"
+   782→                                                size="sm"
+   783→                                                className="h-6 w-6 p-0"
+   784→                                                onClick={() => {
+   785→                                                  setAddMode("category");
+   786→                                                  setAddParentId(location.id);
+   787→                                                  setAddInput("");
+   788→                                                }}
+   789→                                              >
+   790→                                                <Plus className="h-3 w-3" />
+   791→                                              </Button>
+   792→                                            </div>
+   793→                                          </AccordionTrigger>
+   794→
+   795→                                          {/* Inline rename for location */}
+   796→                                          {renamingId === `loc-${location.id}` && (
+   797→                                            <div className="flex items-center gap-2 px-4 py-1">
+   798→                                              <Input
+   799→                                                ref={renameInputRef}
+   800→                                                value={renameValue}
+   801→                                                onChange={(e) => setRenameValue(e.target.value)}
+   802→                                                className="h-7 text-xs"
+   803→                                                onKeyDown={(e) => {
+   804→                                                  if (e.key === "Enter") handleRename("location", location.id);
+   805→                                                  if (e.key === "Escape") setRenamingId(null);
+   806→                                                }}
+   807→                                                onBlur={() => handleRename("location", location.id)}
+   808→                                              />
+   809→                                            </div>
+   810→                                          )}
+   811→
+   812→                                          {/* Add Category Form */}
+   813→                                          {addMode === "category" && addParentId === location.id && (
+   814→                                            <div className="flex items-center gap-2 px-4 py-1">
+   815→                                              <Input
+   816→                                                ref={addInputRef}
+   817→                                                value={addInput}
+   818→                                                onChange={(e) => setAddInput(e.target.value)}
+   819→                                                placeholder="Category name..."
+   820→                                                className="h-7 text-xs"
+   821→                                                onKeyDown={(e) => {
+   822→                                                  if (e.key === "Enter") handleAdd();
+   823→                                                  if (e.key === "Escape") setAddMode(null);
+   824→                                                }}
+   825→                                              />
+   826→                                              <Button size="sm" className="h-7 text-xs" onClick={handleAdd}>Add</Button>
+   827→                                              <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => setAddMode(null)}>✕</Button>
+   828→                                            </div>
+   829→                                          )}
+   830→
+   831→                                          <AccordionContent className="pb-0">
+   832→                                            {categories.length === 0 ? (
+   833→                                              <p className="text-xs text-muted-foreground pl-8 py-1">No categories</p>
+   834→                                            ) : (
+   835→                                              categories.map((cat) => {
+   836→                                                const subs = tree?.subcategories.filter((s) => s.categoryId === cat.id) || [];
+   837→                                                return (
+   838→                                                  <div key={cat.id} className="ml-3">
+   839→                                                    <Accordion type="multiple" className="w-full">
+   840→                                                      <AccordionItem value={`cat-${cat.id}`}>
+   841→                                                        <AccordionTrigger className="text-xs py-1 px-2 hover:no-underline">
+   842→                                                          <div
+   843→                                                            className="flex items-center gap-2 flex-1 min-w-0"
+   844→                                                            onClick={(e) => {
+   845→                                                              e.stopPropagation();
+   846→                                                              handleNodeClick({ type: "category", categoryId: cat.id, locationId: cat.locationId });
+   847→                                                            }}
+   848→                                                          >
+   849→                                                            <FolderOpen className="h-3 w-3 text-amber-500 shrink-0" />
+   850→                                                            <span className="truncate">{cat.name}</span>
+   851→                                                            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 ml-auto mr-1">
+   852→                                                              {cat.subcategoryCount + cat.productCount}
+   853→                                                            </Badge>
+   854→                                                            {cat.isActive === 0 && (
+   855→                                                              <Badge variant="outline" className="text-[10px] px-1 py-0 text-muted-foreground">
+   856→                                                                off
+   857→                                                              </Badge>
+   858→                                                            )}
+   859→                                                          </div>
+   860→                                                          <div className="flex items-center gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
+   861→                                                            <Switch
+   862→                                                              checked={cat.isActive === 1}
+   863→                                                              onCheckedChange={() => handleToggleActive("category", cat.id)}
+   864→                                                              className="scale-75"
+   865→                                                            />
+   866→                                                            <Button
+   867→                                                              variant="ghost"
+   868→                                                              size="sm"
+   869→                                                              className="h-6 w-6 p-0"
+   870→                                                              onClick={() => {
+   871→                                                                setRenamingId(`cat-${cat.id}`);
+   872→                                                                setRenameValue(cat.name);
+   873→                                                              }}
+   874→                                                            >
+   875→                                                              <Pencil className="h-3 w-3" />
+   876→                                                            </Button>
+   877→                                                            <Button
+   878→                                                              variant="ghost"
+   879→                                                              size="sm"
+   880→                                                              className="h-6 w-6 p-0 text-destructive hover:text-destructive"
+   881→                                                              onClick={() =>
+   882→                                                                setDeleteTarget({
+   883→                                                                  type: "category",
+   884→                                                                  id: cat.id,
+   885→                                                                  name: cat.name,
+   886→                                                                })
+   887→                                                              }
+   888→                                                            >
+   889→                                                              <Trash2 className="h-3 w-3" />
+   890→                                                            </Button>
+   891→                                                            <Button
+   892→                                                              variant="ghost"
+   893→                                                              size="sm"
+   894→                                                              className="h-6 w-6 p-0"
+   895→                                                              onClick={() => {
+   896→                                                                setAddMode("subcategory");
+   897→                                                                setAddParentId(cat.id);
+   898→                                                                setAddInput("");
+   899→                                                              }}
+   900→                                                            >
+   901→                                                              <Plus className="h-3 w-3" />
+   902→                                                            </Button>
+   903→                                                          </div>
+   904→                                                        </AccordionTrigger>
+   905→
+   906→                                                        {/* Inline rename for category */}
+   907→                                                        {renamingId === `cat-${cat.id}` && (
+   908→                                                          <div className="flex items-center gap-2 px-6 py-1">
+   909→                                                            <Input
+   910→                                                              ref={renameInputRef}
+   911→                                                              value={renameValue}
+   912→                                                              onChange={(e) => setRenameValue(e.target.value)}
+   913→                                                              className="h-7 text-xs"
+   914→                                                              onKeyDown={(e) => {
+   915→                                                                if (e.key === "Enter") handleRename("category", cat.id);
+   916→                                                                if (e.key === "Escape") setRenamingId(null);
+   917→                                                              }}
+   918→                                                              onBlur={() => handleRename("category", cat.id)}
+   919→                                                            />
+   920→                                                          </div>
+   921→                                                        )}
+   922→
+   923→                                                        {/* Add Subcategory Form */}
+   924→                                                        {addMode === "subcategory" && addParentId === cat.id && (
+   925→                                                          <div className="flex items-center gap-2 px-6 py-1">
+   926→                                                            <Input
+   927→                                                              ref={addInputRef}
+   928→                                                              value={addInput}
+   929→                                                              onChange={(e) => setAddInput(e.target.value)}
+   930→                                                              placeholder="Subcategory name..."
+   931→                                                              className="h-7 text-xs"
+   932→                                                              onKeyDown={(e) => {
+   933→                                                                if (e.key === "Enter") handleAdd();
+   934→                                                                if (e.key === "Escape") setAddMode(null);
+   935→                                                              }}
+   936→                                                            />
+   937→                                                            <Button size="sm" className="h-7 text-xs" onClick={handleAdd}>Add</Button>
+   938→                                                            <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => setAddMode(null)}>✕</Button>
+   939→                                                          </div>
+   940→                                                        )}
+   941→
+   942→                                                        <AccordionContent className="pb-1">
+   943→                                                          {subs.length === 0 ? (
+   944→                                                            <p className="text-xs text-muted-foreground pl-8 py-1">No subcategories</p>
+   945→                                                          ) : (
+   946→                                                            subs.map((sub) => (
+   947→                                                              <div
+   948→                                                                key={sub.id}
+   949→                                                                className="flex items-center gap-2 pl-8 py-1 pr-2 group hover:bg-muted/50 rounded-md cursor-pointer"
+   950→                                                                onClick={() =>
+   951→                                                                  handleNodeClick({
+   952→                                                                    type: "subcategory",
+   953→                                                                    subcategoryId: sub.id,
+   954→                                                                    categoryId: sub.categoryId,
+   955→                                                                    locationId: sub.category.locationId,
+   956→                                                                  })
+   957→                                                                }
+   958→                                                              >
+   959→                                                                <Tag className="h-3 w-3 text-emerald-500 shrink-0" />
+   960→                                                                {renamingId === `sub-${sub.id}` ? (
+   961→                                                                  <Input
+   962→                                                                    ref={renameInputRef}
+   963→                                                                    value={renameValue}
+   964→                                                                    onChange={(e) => setRenameValue(e.target.value)}
+   965→                                                                    className="h-6 text-xs flex-1"
+   966→                                                                    onClick={(e) => e.stopPropagation()}
+   967→                                                                    onKeyDown={(e) => {
+   968→                                                                      if (e.key === "Enter") { e.stopPropagation(); handleRename("subcategory", sub.id); }
+   969→                                                                      if (e.key === "Escape") { e.stopPropagation(); setRenamingId(null); }
+   970→                                                                    }}
+   971→                                                                    onBlur={() => handleRename("subcategory", sub.id)}
+   972→                                                                  />
+   973→                                                                ) : (
+   974→                                                                  <span className="text-xs truncate flex-1">{sub.name}</span>
+   975→                                                                )}
+   976→                                                                <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
+   977→                                                                  {sub.productCount}
+   978→                                                                </Badge>
+   979→                                                                {sub.isActive === 0 && (
+   980→                                                                  <Badge variant="outline" className="text-[10px] px-1 py-0 text-muted-foreground">
+   981→                                                                    off
+   982→                                                                  </Badge>
+   983→                                                                )}
+   984→                                                                <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity" onClick={(e) => e.stopPropagation()}>
+   985→                                                                  <Switch
+   986→                                                                    checked={sub.isActive === 1}
+   987→                                                                    onCheckedChange={() => handleToggleActive("subcategory", sub.id)}
+   988→                                                                    className="scale-50"
+   989→                                                                  />
+   990→                                                                  {renamingId !== `sub-${sub.id}` && (
+   991→                                                                    <>
+   992→                                                                      <Button
+   993→                                                                        variant="ghost"
+   994→                                                                        size="sm"
+   995→                                                                        className="h-5 w-5 p-0"
+   996→                                                                        onClick={() => {
+   997→                                                                          setRenamingId(`sub-${sub.id}`);
+   998→                                                                          setRenameValue(sub.name);
+   999→                                                                        }}
+  1000→                                                                      >
+  1001→                                                                        <Pencil className="h-2.5 w-2.5" />
+  1002→                                                                      </Button>
+  1003→                                                                      <Button
+  1004→                                                                        variant="ghost"
+  1005→                                                                        size="sm"
+  1006→                                                                        className="h-5 w-5 p-0 text-destructive hover:text-destructive"
+  1007→                                                                        onClick={() =>
+  1008→                                                                          setDeleteTarget({
+  1009→                                                                            type: "subcategory",
+  1010→                                                                            id: sub.id,
+  1011→                                                                            name: sub.name,
+  1012→                                                                          })
+  1013→                                                                        }
+  1014→                                                                      >
+  1015→                                                                        <Trash2 className="h-2.5 w-2.5" />
+  1016→                                                                      </Button>
+  1017→                                                                    </>
+  1018→                                                                  )}
+  1019→                                                                </div>
+  1020→                                                              </div>
+  1021→                                                            ))
+  1022→                                                          )}
+  1023→                                                        </AccordionContent>
+  1024→                                                      </AccordionItem>
+  1025→                                                    </Accordion>
+  1026→                                                  </div>
+  1027→                                                );
+  1028→                                              })
+  1029→                                            )}
+  1030→                                          </AccordionContent>
+  1031→                                        </AccordionItem>
+  1032→                                      );
+  1033→                                    })}
+  1034→                                  </Accordion>
+  1035→                                </div>
+  1036→                              );
+  1037→                            })}
+  1038→                          </AccordionContent>
+  1039→                        </AccordionItem>
+  1040→                      );
+  1041→                    })}
+  1042→                  </Accordion>
+  1043→                )}
+  1044→              </div>
+  1045→            </div>
+  1046→          </ResizablePanel>
+  1047→
+  1048→          <ResizableHandle withHandle />
+  1049→
+  1050→          {/* ─── Right Panel: Products ─── */}
+  1051→          <ResizablePanel defaultSize={70}>
+  1052→            <div className="h-full flex flex-col">
+  1053→              {/* Toolbar */}
+  1054→              <div className="p-3 border-b flex items-center gap-2 flex-wrap">
+  1055→                <div className="relative flex-1 min-w-[200px]">
+  1056→                  <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+  1057→                  <Input
+  1058→                    placeholder="Search products..."
+  1059→                    value={search}
+  1060→                    onChange={(e) => setSearch(e.target.value)}
+  1061→                    className="pl-9 h-9 text-sm"
+  1062→                  />
+  1063→                </div>
+  1064→                {filter.type !== "all" && (
+  1065→                  <Button
+  1066→                    variant="outline"
+  1067→                    size="sm"
+  1068→                    className="h-9"
+  1069→                    onClick={() => setFilter({ type: "all" })}
+  1070→                  >
+  1071→                    <X className="h-3.5 w-3.5 mr-1" />
+  1072→                    Clear filter
+  1073→                  </Button>
+  1074→                )}
+  1075→                <span className="text-xs text-muted-foreground">
+  1076→                  {productTotal} product{productTotal !== 1 ? "s" : ""}
+  1077→                </span>
+  1078→              </div>
+  1079→
+  1080→              {/* Table */}
+  1081→              <div className="flex-1 overflow-auto">
+  1082→                {productsLoading ? (
+  1083→                  <div className="p-4 space-y-2">
+  1084→                    {Array.from({ length: 5 }).map((_, i) => (
+  1085→                      <Skeleton key={i} className="h-10 w-full" />
+  1086→                    ))}
+  1087→                  </div>
+  1088→                ) : products.length === 0 ? (
+  1089→                  <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+  1090→                    <Package className="h-10 w-10 mb-2" />
+  1091→                    <p className="text-sm">No products found</p>
+  1092→                  </div>
+  1093→                ) : (
+  1094→                  <Table>
+  1095→                    <TableHeader>
+  1096→                      <TableRow>
+  1097→                        <TableHead className="w-12">ID</TableHead>
+  1098→                        <TableHead className="w-12">Photo</TableHead>
+  1099→                        <TableHead>Name</TableHead>
+  1100→                        <TableHead className="hidden md:table-cell">Category</TableHead>
+  1101→                        <TableHead className="hidden lg:table-cell">Subcategory</TableHead>
+  1102→                        <TableHead className="w-24">Price</TableHead>
+  1103→                        <TableHead className="w-20">Stock</TableHead>
+  1104→                        <TableHead className="w-24">Actions</TableHead>
+  1105→                      </TableRow>
+  1106→                    </TableHeader>
+  1107→                    <TableBody>
+  1108→                      {products.map((p) => (
+  1109→                        <TableRow key={p.id}>
+  1110→                          <TableCell className="font-mono text-xs text-muted-foreground">{p.id}</TableCell>
+  1111→                          <TableCell>
+  1112→                            {p.photoUrl ? (
+  1113→                              <img
+  1114→                                src={p.photoUrl}
+  1115→                                alt={p.name}
+  1116→                                className="w-10 h-10 rounded object-cover"
+  1117→                                onError={(e) => {
+  1118→                                  (e.target as HTMLImageElement).style.display = "none";
+  1119→                                }}
+  1120→                              />
+  1121→                            ) : (
+  1122→                              <div className="w-10 h-10 rounded bg-muted flex items-center justify-center">
+  1123→                                <Package className="h-4 w-4 text-muted-foreground" />
+  1124→                              </div>
+  1125→                            )}
+  1126→                          </TableCell>
+  1127→                          <TableCell className="font-medium max-w-[200px] truncate">{p.name}</TableCell>
+  1128→                          <TableCell className="hidden md:table-cell text-xs text-muted-foreground">{p.category.name}</TableCell>
+  1129→                          <TableCell className="hidden lg:table-cell text-xs text-muted-foreground">
+  1130→                            {p.subcategory?.name || "—"}
+  1131→                          </TableCell>
+  1132→                          <TableCell className="font-mono text-sm">
+  1133→                            ${p.price.toFixed(2)}
+  1134→                          </TableCell>
+  1135→                          <TableCell className="text-sm">
+  1136→                            {p.isMono === 1 ? "∞" : p.quantityInStock}
+  1137→                          </TableCell>
+  1138→                          <TableCell>
+  1139→                            <div className="flex items-center gap-1">
+  1140→                              <Button
+  1141→                                variant="ghost"
+  1142→                                size="sm"
+  1143→                                className="h-7 w-7 p-0"
+  1144→                                onClick={() => openProductModal(p)}
+  1145→                              >
+  1146→                                <Pencil className="h-3.5 w-3.5" />
+  1147→                              </Button>
+  1148→                              <Button
+  1149→                                variant="ghost"
+  1150→                                size="sm"
+  1151→                                className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+  1152→                                onClick={() =>
+  1153→                                  setDeleteTarget({
+  1154→                                    type: "product",
+  1155→                                    id: p.id,
+  1156→                                    name: p.name,
+  1157→                                  })
+  1158→                                }
+  1159→                              >
+  1160→                                <Trash2 className="h-3.5 w-3.5" />
+  1161→                              </Button>
+  1162→                            </div>
+  1163→                          </TableCell>
+  1164→                        </TableRow>
+  1165→                      ))}
+  1166→                    </TableBody>
+  1167→                  </Table>
+  1168→                )}
+  1169→              </div>
+  1170→
+  1171→              {/* Pagination */}
+  1172→              {totalPages > 1 && (
+  1173→                <div className="p-3 border-t flex items-center justify-between">
+  1174→                  <span className="text-xs text-muted-foreground">
+  1175→                    Page {productPage} of {totalPages}
+  1176→                  </span>
+  1177→                  <div className="flex items-center gap-2">
+  1178→                    <Button
+  1179→                      variant="outline"
+  1180→                      size="sm"
+  1181→                      className="h-8"
+  1182→                      disabled={productPage <= 1}
+  1183→                      onClick={() => setProductPage((p) => p - 1)}
+  1184→                    >
+  1185→                      Previous
+  1186→                    </Button>
+  1187→                    <Button
+  1188→                      variant="outline"
+  1189→                      size="sm"
+  1190→                      className="h-8"
+  1191→                      disabled={productPage >= totalPages}
+  1192→                      onClick={() => setProductPage((p) => p + 1)}
+  1193→                    >
+  1194→                      Next
+  1195→                    </Button>
+  1196→                  </div>
+  1197→                </div>
+  1198→              )}
+  1199→            </div>
+  1200→          </ResizablePanel>
+  1201→        </ResizablePanelGroup>
+  1202→      </div>
+  1203→
+  1204→      {/* ─── Product Modal ─── */}
+  1205→      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+  1206→        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+  1207→          <DialogHeader>
+  1208→            <DialogTitle>{editProduct ? "Edit Product" : "Add Product"}</DialogTitle>
+  1209→          </DialogHeader>
+  1210→
+  1211→          <div className="grid gap-4 py-2">
+  1212→            {/* Row 1: Cascading Selects */}
+  1213→            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+  1214→              <div className="space-y-1.5">
+  1215→                <Label className="text-xs">Location</Label>
+  1216→                <Select value={formData.locationId} onValueChange={handleLocationChange}>
+  1217→                  <SelectTrigger className="h-9 text-sm">
+  1218→                    <SelectValue placeholder="Select location" />
+  1219→                  </SelectTrigger>
+  1220→                  <SelectContent>
+  1221→                    {Array.from(locationGroups.entries()).map(([key, locs]) => (
+  1222→                      <SelectGroup key={key}>
+  1223→                        <SelectLabel>{key}</SelectLabel>
+  1224→                        {locs.map((loc) => {
+  1225→                          const label = loc.district
+  1226→                            ? `${loc.country} > ${loc.city} > ${loc.district}`
+  1227→                            : `${loc.country} > ${loc.city}`;
+  1228→                          return (
+  1229→                            <SelectItem key={loc.id} value={String(loc.id)}>
+  1230→                              <span className="truncate text-xs">{label}</span>
+  1231→                            </SelectItem>
+  1232→                          );
+  1233→                        })}
+  1234→                      </SelectGroup>
+  1235→                    ))}
+  1236→                  </SelectContent>
+  1237→                </Select>
+  1238→              </div>
+  1239→
+  1240→              <div className="space-y-1.5">
+  1241→                <Label className="text-xs">Category</Label>
+  1242→                <Select
+  1243→                  value={formData.categoryId}
+  1244→                  onValueChange={handleCategoryChange}
+  1245→                  disabled={!formData.locationId}
+  1246→                >
+  1247→                  <SelectTrigger className="h-9 text-sm">
+  1248→                    <SelectValue placeholder="Select category" />
+  1249→                  </SelectTrigger>
+  1250→                  <SelectContent>
+  1251→                    {formCategories.map((cat) => (
+  1252→                      <SelectItem key={cat.id} value={String(cat.id)}>
+  1253→                        {cat.name}
+  1254→                      </SelectItem>
+  1255→                    ))}
+  1256→                  </SelectContent>
+  1257→                </Select>
+  1258→              </div>
+  1259→
+  1260→              <div className="space-y-1.5">
+  1261→                <Label className="text-xs">Subcategory</Label>
+  1262→                <Select
+  1263→                  value={formData.subcategoryId}
+  1264→                  onValueChange={(v) => setFormData({ ...formData, subcategoryId: v === "__none__" ? "" : v })}
+  1265→                  disabled={!formData.categoryId}
+  1266→                >
+  1267→                  <SelectTrigger className="h-9 text-sm">
+  1268→                    <SelectValue placeholder="Select subcategory" />
+  1269→                  </SelectTrigger>
+  1270→                  <SelectContent>
+  1271→                    <SelectItem value="__none__">None</SelectItem>
+  1272→                    {formSubcategories.map((sub) => (
+  1273→                      <SelectItem key={sub.id} value={String(sub.id)}>
+  1274→                        {sub.name}
+  1275→                      </SelectItem>
+  1276→                    ))}
+  1277→                  </SelectContent>
+  1278→                </Select>
+  1279→              </div>
+  1280→            </div>
+  1281→
+  1282→            {/* Row 2: Name, Price, Stock, Mono */}
+  1283→            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+  1284→              <div className="space-y-1.5">
+  1285→                <Label className="text-xs">Name *</Label>
+  1286→                <Input
+  1287→                  value={formData.name}
+  1288→                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+  1289→                  placeholder="Product name"
+  1290→                  className="h-9 text-sm"
+  1291→                />
+  1292→              </div>
+  1293→              <div className="space-y-1.5">
+  1294→                <Label className="text-xs">Price ($) *</Label>
+  1295→                <Input
+  1296→                  type="number"
+  1297→                  min="0.01"
+  1298→                  step="0.01"
+  1299→                  value={formData.price}
+  1300→                  onChange={(e) => setFormData({ ...formData, price: e.target.value })}
+  1301→                  placeholder="0.00"
+  1302→                  className="h-9 text-sm"
+  1303→                />
+  1304→              </div>
+  1305→            </div>
+  1306→
+  1307→            <div className="flex items-center gap-3">
+  1308→              <div className="flex items-center gap-2">
+  1309→                <Checkbox
+  1310→                  id="is-mono"
+  1311→                  checked={formData.isMono}
+  1312→                  onCheckedChange={(checked) =>
+  1313→                    setFormData({ ...formData, isMono: !!checked })
+  1314→                  }
+  1315→                />
+  1316→                <Label htmlFor="is-mono" className="text-xs cursor-pointer">
+  1317→                  Digital Product (infinite stock)
+  1318→                </Label>
+  1319→              </div>
+  1320→              {!formData.isMono && (
+  1321→                <div className="flex items-center gap-2">
+  1322→                  <Label className="text-xs">Stock:</Label>
+  1323→                  <Input
+  1324→                    type="number"
+  1325→                    min="0"
+  1326→                    value={formData.quantityInStock}
+  1327→                    onChange={(e) => setFormData({ ...formData, quantityInStock: e.target.value })}
+  1328→                    className="h-9 text-sm w-24"
+  1329→                  />
+  1330→                </div>
+  1331→              )}
+  1332→              {formData.isMono && (
+  1333→                <span className="text-sm font-mono text-muted-foreground">Stock: ∞</span>
+  1334→              )}
+  1335→            </div>
+  1336→
+  1337→            {/* Row 3: Description */}
+  1338→            <div className="space-y-1.5">
+  1339→              <Label className="text-xs">Description</Label>
+  1340→              <Textarea
+  1341→                value={formData.description}
+  1342→                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+  1343→                placeholder="Product description..."
+  1344→                rows={3}
+  1345→                className="text-sm"
+  1346→              />
+  1347→            </div>
+  1348→
+  1349→            {/* Row 4: Photo URLs */}
+  1350→            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+  1351→              <div className="space-y-1.5">
+  1352→                <Label className="text-xs">Photo URL</Label>
+  1353→                <Input
+  1354→                  value={formData.photoUrl}
+  1355→                  onChange={(e) => setFormData({ ...formData, photoUrl: e.target.value })}
+  1356→                  placeholder="https://..."
+  1357→                  className="h-9 text-sm"
+  1358→                />
+  1359→              </div>
+  1360→              <div className="space-y-1.5">
+  1361→                <Label className="text-xs">Hidden Photo URL</Label>
+  1362→                <Input
+  1363→                  value={formData.hiddenPhotoUrl}
+  1364→                  onChange={(e) => setFormData({ ...formData, hiddenPhotoUrl: e.target.value })}
+  1365→                  placeholder="https://..."
+  1366→                  className="h-9 text-sm"
+  1367→                />
+  1368→              </div>
+  1369→            </div>
+  1370→
+  1371→            {/* Row 5: Hidden content */}
+  1372→            <details className="group">
+  1373→              <summary className="text-xs font-medium cursor-pointer text-muted-foreground hover:text-foreground transition-colors py-1">
+  1374→                ▸ Hidden Content Fields
+  1375→              </summary>
+  1376→              <div className="grid gap-3 mt-2 pl-2 border-l-2 border-muted">
+  1377→                <div className="space-y-1.5">
+  1378→                  <Label className="text-xs">Hidden Description</Label>
+  1379→                  <Textarea
+  1380→                    value={formData.hiddenDescription}
+  1381→                    onChange={(e) => setFormData({ ...formData, hiddenDescription: e.target.value })}
+  1382→                    placeholder="Hidden description (shown after purchase)..."
+  1383→                    rows={2}
+  1384→                    className="text-sm"
+  1385→                  />
+  1386→                </div>
+  1387→                <div className="space-y-1.5">
+  1388→                  <Label className="text-xs">Hidden Coordinates</Label>
+  1389→                  <Input
+  1390→                    value={formData.hiddenCoordinates}
+  1391→                    onChange={(e) => setFormData({ ...formData, hiddenCoordinates: e.target.value })}
+  1392→                    placeholder="lat,lng"
+  1393→                    className="h-9 text-sm"
+  1394→                  />
+  1395→                </div>
+  1396→                <div className="space-y-1.5">
+  1397→                  <Label className="text-xs">Private Data</Label>
+  1398→                  <Textarea
+  1399→                    value={formData.privateData}
+  1400→                    onChange={(e) => setFormData({ ...formData, privateData: e.target.value })}
+  1401→                    placeholder="Private data (credentials, keys, etc.)..."
+  1402→                    rows={2}
+  1403→                    className="text-sm"
+  1404→                  />
+  1405→                </div>
+  1406→              </div>
+  1407→            </details>
+  1408→          </div>
+  1409→
+  1410→          <DialogFooter>
+  1411→            <Button variant="outline" onClick={() => setModalOpen(false)} disabled={saving}>
+  1412→              Cancel
+  1413→            </Button>
+  1414→            <Button onClick={handleSaveProduct} disabled={saving}>
+  1415→              {saving ? "Saving..." : editProduct ? "Update Product" : "Create Product"}
+  1416→            </Button>
+  1417→          </DialogFooter>
+  1418→        </DialogContent>
+  1419→      </Dialog>
+  1420→
+  1421→      {/* ─── Delete Confirmation ─── */}
+  1422→      <AlertDialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
+  1423→        <AlertDialogContent>
+  1424→          <AlertDialogHeader>
+  1425→            <AlertDialogTitle>Delete {deleteTarget?.type}?</AlertDialogTitle>
+  1426→            <AlertDialogDescription>
+  1427→              Are you sure you want to delete &quot;{deleteTarget?.name}&quot;? This action cannot be
+  1428→              undone.
+  1429→            </AlertDialogDescription>
+  1430→          </AlertDialogHeader>
+  1431→          <AlertDialogFooter>
+  1432→            <AlertDialogCancel>Cancel</AlertDialogCancel>
+  1433→            <AlertDialogAction
+  1434→              onClick={handleDelete}
+  1435→              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+  1436→            >
+  1437→              Delete
+  1438→            </AlertDialogAction>
+  1439→          </AlertDialogFooter>
+  1440→        </AlertDialogContent>
+  1441→      </AlertDialog>
+  1442→    </div>
+  1443→  );
+  1444→}
+  1445→
\ No newline at end of file
diff --git a/tool-results/read_1785935146062_c8c3abacfba3.txt b/tool-results/read_1785935146062_c8c3abacfba3.txt
new file mode 100644
index 0000000..5635e83
--- /dev/null
+++ b/tool-results/read_1785935146062_c8c3abacfba3.txt
@@ -0,0 +1,1445 @@
+     1→"use client";
+     2→
+     3→import { useState, useEffect, useCallback, useRef } from "react";
+     4→import {
+     5→  ResizablePanelGroup,
+     6→  ResizablePanel,
+     7→  ResizableHandle,
+     8→} from "@/components/ui/resizable";
+     9→import {
+    10→  Accordion,
+    11→  AccordionContent,
+    12→  AccordionItem,
+    13→  AccordionTrigger,
+    14→} from "@/components/ui/accordion";
+    15→import {
+    16→  Table,
+    17→  TableBody,
+    18→  TableCell,
+    19→  TableHead,
+    20→  TableHeader,
+    21→  TableRow,
+    22→} from "@/components/ui/table";
+    23→import {
+    24→  Dialog,
+    25→  DialogContent,
+    26→  DialogHeader,
+    27→  DialogTitle,
+    28→  DialogFooter,
+    29→} from "@/components/ui/dialog";
+    30→import {
+    31→  Select,
+    32→  SelectContent,
+    33→  SelectGroup,
+    34→  SelectItem,
+    35→  SelectLabel,
+    36→  SelectTrigger,
+    37→  SelectValue,
+    38→} from "@/components/ui/select";
+    39→import {
+    40→  AlertDialog,
+    41→  AlertDialogAction,
+    42→  AlertDialogCancel,
+    43→  AlertDialogContent,
+    44→  AlertDialogDescription,
+    45→  AlertDialogFooter,
+    46→  AlertDialogHeader,
+    47→  AlertDialogTitle,
+    48→} from "@/components/ui/alert-dialog";
+    49→import { Switch } from "@/components/ui/switch";
+    50→import { Button } from "@/components/ui/button";
+    51→import { Badge } from "@/components/ui/badge";
+    52→import { Input } from "@/components/ui/input";
+    53→import { Label } from "@/components/ui/label";
+    54→import { Textarea } from "@/components/ui/textarea";
+    55→import { Checkbox } from "@/components/ui/checkbox";
+    56→import { Skeleton } from "@/components/ui/skeleton";
+    57→import { toast } from "sonner";
+    58→import {
+    59→  Plus,
+    60→  Pencil,
+    61→  Trash2,
+    62→  Search,
+    63→  Package,
+    64→  MapPin,
+    65→  FolderOpen,
+    66→  Tag,
+    67→  ChevronRight,
+    68→  X,
+    69→} from "lucide-react";
+    70→
+    71→// ─── Types ───────────────────────────────────────
+    72→
+    73→interface TreeLocation {
+    74→  id: number;
+    75→  country: string;
+    76→  city: string;
+    77→  district: string;
+    78→  isActive: number;
+    79→  createdAt: string;
+    80→  categoryCount: number;
+    81→  productCount: number;
+    82→}
+    83→
+    84→interface TreeCategory {
+    85→  id: number;
+    86→  locationId: number;
+    87→  name: string;
+    88→  isActive: number;
+    89→  createdAt: string;
+    90→  location: { id: number; country: string; city: string; district: string };
+    91→  subcategoryCount: number;
+    92→  productCount: number;
+    93→}
+    94→
+    95→interface TreeSubcategory {
+    96→  id: number;
+    97→  categoryId: number;
+    98→  name: string;
+    99→  isActive: number;
+   100→  createdAt: string;
+   101→  category: { id: number; name: string; locationId: number };
+   102→  productCount: number;
+   103→}
+   104→
+   105→interface CatalogTree {
+   106→  locations: TreeLocation[];
+   107→  categories: TreeCategory[];
+   108→  subcategories: TreeSubcategory[];
+   109→}
+   110→
+   111→interface Product {
+   112→  id: number;
+   113→  locationId: number;
+   114→  categoryId: number;
+   115→  subcategoryId: number | null;
+   116→  name: string;
+   117→  description: string | null;
+   118→  privateData: string | null;
+   119→  price: number;
+   120→  quantityInStock: number;
+   121→  photoUrl: string | null;
+   122→  hiddenPhotoUrl: string | null;
+   123→  hiddenCoordinates: string | null;
+   124→  hiddenDescription: string | null;
+   125→  isMono: number;
+   126→  createdAt: string;
+   127→  category: { id: number; name: string };
+   128→  subcategory: { id: number; name: string } | null;
+   129→  location: { id: number; country: string; city: string; district: string };
+   130→}
+   131→
+   132→interface ProductFormData {
+   133→  locationId: string;
+   134→  categoryId: string;
+   135→  subcategoryId: string;
+   136→  name: string;
+   137→  description: string;
+   138→  privateData: string;
+   139→  price: string;
+   140→  quantityInStock: string;
+   141→  photoUrl: string;
+   142→  hiddenPhotoUrl: string;
+   143→  hiddenCoordinates: string;
+   144→  hiddenDescription: string;
+   145→  isMono: boolean;
+   146→}
+   147→
+   148→const emptyForm: ProductFormData = {
+   149→  locationId: "",
+   150→  categoryId: "",
+   151→  subcategoryId: "",
+   152→  name: "",
+   153→  description: "",
+   154→  privateData: "",
+   155→  price: "",
+   156→  quantityInStock: "0",
+   157→  photoUrl: "",
+   158→  hiddenPhotoUrl: "",
+   159→  hiddenCoordinates: "",
+   160→  hiddenDescription: "",
+   161→  isMono: false,
+   162→};
+   163→
+   164→type FilterType =
+   165→  | { type: "all" }
+   166→  | { type: "location"; locationId: number }
+   167→  | { type: "category"; categoryId: number; locationId: number }
+   168→  | { type: "subcategory"; subcategoryId: number; categoryId: number; locationId: number };
+   169→
+   170→// ─── Component ───────────────────────────────────
+   171→
+   172→export function CatalogPage() {
+   173→  // Tree state
+   174→  const [tree, setTree] = useState<CatalogTree | null>(null);
+   175→  const [treeLoading, setTreeLoading] = useState(true);
+   176→  const [treeError, setTreeError] = useState<string | null>(null);
+   177→
+   178→  // Products state
+   179→  const [products, setProducts] = useState<Product[]>([]);
+   180→  const [productTotal, setProductTotal] = useState(0);
+   181→  const [productsLoading, setProductsLoading] = useState(true);
+   182→  const [search, setSearch] = useState("");
+   183→  const [searchDebounce, setSearchDebounce] = useState("");
+   184→  const [filter, setFilter] = useState<FilterType>({ type: "all" });
+   185→  const [productPage, setProductPage] = useState(1);
+   186→  const productLimit = 50;
+   187→
+   188→  // Modal state
+   189→  const [modalOpen, setModalOpen] = useState(false);
+   190→  const [editProduct, setEditProduct] = useState<Product | null>(null);
+   191→  const [formData, setFormData] = useState<ProductFormData>(emptyForm);
+   192→  const [formLocations, setFormLocations] = useState<TreeLocation[]>([]);
+   193→  const [formCategories, setFormCategories] = useState<TreeCategory[]>([]);
+   194→  const [formSubcategories, setFormSubcategories] = useState<TreeSubcategory[]>([]);
+   195→  const [saving, setSaving] = useState(false);
+   196→
+   197→  // Delete confirm
+   198→  const [deleteTarget, setDeleteTarget] = useState<{
+   199→    type: string;
+   200→    id: number;
+   201→    name: string;
+   202→  } | null>(null);
+   203→
+   204→  // Inline rename state
+   205→  const [renamingId, setRenamingId] = useState<string | null>(null);
+   206→  const [renameValue, setRenameValue] = useState("");
+   207→  const renameInputRef = useRef<HTMLInputElement>(null);
+   208→
+   209→  // Add inline state
+   210→  const [addMode, setAddMode] = useState<string | null>(null);
+   211→  const [addInput, setAddInput] = useState("");
+   212→  const [addDistrict, setAddDistrict] = useState("");
+   213→  const [addCity, setAddCity] = useState("");
+   214→  const [addCountry, setAddCountry] = useState("");
+   215→  const [addParentId, setAddParentId] = useState<number | null>(null);
+   216→  const addInputRef = useRef<HTMLInputElement>(null);
+   217→
+   218→  useEffect(() => {
+   219→    if (addInputRef.current) addInputRef.current.focus();
+   220→  }, [addMode]);
+   221→
+   222→  useEffect(() => {
+   223→    if (renameInputRef.current) renameInputRef.current.focus();
+   224→  }, [renamingId]);
+   225→
+   226→  // ─── Data fetching ─────────────────────────────
+   227→  const fetchTree = useCallback(async () => {
+   228→    try {
+   229→      const res = await fetch("/api/catalog/tree");
+   230→      if (!res.ok) throw new Error("Failed to load tree");
+   231→      const data: CatalogTree = await res.json();
+   232→      setTree(data);
+   233→      setTreeError(null);
+   234→    } catch (e) {
+   235→      setTreeError("Failed to load catalog tree");
+   236→    } finally {
+   237→      setTreeLoading(false);
+   238→    }
+   239→  }, []);
+   240→
+   241→  const fetchProducts = useCallback(async () => {
+   242→    setProductsLoading(true);
+   243→    try {
+   244→      const params = new URLSearchParams({ page: String(productPage), limit: String(productLimit) });
+   245→      if (searchDebounce) params.set("search", searchDebounce);
+   246→      if (filter.type === "location") params.set("loc", String(filter.locationId));
+   247→      if (filter.type === "category") params.set("cat", String(filter.categoryId));
+   248→      if (filter.type === "subcategory") params.set("sub", String(filter.subcategoryId));
+   249→
+   250→      const res = await fetch(`/api/products/bulk?${params}`);
+   251→      if (!res.ok) throw new Error("Failed to load products");
+   252→      const data = await res.json();
+   253→      setProducts(data.data);
+   254→      setProductTotal(data.total);
+   255→    } catch {
+   256→      toast.error("Failed to load products");
+   257→    } finally {
+   258→      setProductsLoading(false);
+   259→    }
+   260→  }, [filter, searchDebounce, productPage]);
+   261→
+   262→  useEffect(() => {
+   263→    fetchTree();
+   264→  }, [fetchTree]);
+   265→
+   266→  useEffect(() => {
+   267→    fetchProducts();
+   268→  }, [fetchProducts]);
+   269→
+   270→  // Search debounce
+   271→  useEffect(() => {
+   272→    const t = setTimeout(() => setSearchDebounce(search), 300);
+   273→    return () => clearTimeout(t);
+   274→  }, [search]);
+   275→
+   276→  // Reset page on filter/search change
+   277→  useEffect(() => {
+   278→    setProductPage(1);
+   279→  }, [filter, searchDebounce]);
+   280→
+   281→  // ─── Tree grouping ─────────────────────────────
+   282→  const getGroupedTree = () => {
+   283→    if (!tree) return {};
+   284→
+   285→    const countryMap = new Map<
+   286→      string,
+   287→      {
+   288→        cityMap: Map<
+   289→          string,
+   290→          {
+   291→            districtMap: Map<
+   292→              string,
+   293→              { location: TreeLocation; categories: TreeCategory[] }
+   294→            >;
+   295→          }
+   296→        >;
+   297→      }
+   298→    >();
+   299→
+   300→    for (const loc of tree.locations) {
+   301→      if (!countryMap.has(loc.country))
+   302→        countryMap.set(loc.country, { cityMap: new Map() });
+   303→      const countryEntry = countryMap.get(loc.country)!;
+   304→      if (!countryEntry.cityMap.has(loc.city))
+   305→        countryEntry.cityMap.set(loc.city, { districtMap: new Map() });
+   306→      const cityEntry = countryEntry.cityMap.get(loc.city)!;
+   307→      const distKey = loc.district || "(no district)";
+   308→      if (!cityEntry.districtMap.has(distKey))
+   309→        cityEntry.districtMap.set(distKey, { location: loc, categories: [] });
+   310→    }
+   311→
+   312→    for (const cat of tree.categories) {
+   313→      const countryEntry = countryMap.get(cat.location.country);
+   314→      if (!countryEntry) continue;
+   315→      const cityEntry = countryEntry.cityMap.get(cat.location.city);
+   316→      if (!cityEntry) continue;
+   317→      const distKey = cat.location.district || "(no district)";
+   318→      const distEntry = cityEntry.districtMap.get(distKey);
+   319→      if (!distEntry) continue;
+   320→      distEntry.categories.push(cat);
+   321→    }
+   322→
+   323→    return countryMap;
+   324→  };
+   325→
+   326→  // ─── Tree node actions ─────────────────────────
+   327→  const handleToggleActive = async (type: string, id: number) => {
+   328→    try {
+   329→      const res = await fetch(`/api/${type}s/${id}`, { method: "PATCH" });
+   330→      if (!res.ok) throw new Error();
+   331→      toast.success(`${type} toggled`);
+   332→      fetchTree();
+   333→    } catch {
+   334→      toast.error(`Failed to toggle ${type}`);
+   335→    }
+   336→  };
+   337→
+   338→  const handleDelete = async () => {
+   339→    if (!deleteTarget) return;
+   340→    try {
+   341→      const typePath = deleteTarget.type === "product" ? "products" : `${deleteTarget.type}s`;
+   342→      const res = await fetch(`/api/${typePath}/${deleteTarget.id}`, { method: "DELETE" });
+   343→      if (!res.ok) {
+   344→        const data = await res.json();
+   345→        throw new Error(data.error || "Failed to delete");
+   346→      }
+   347→      toast.success(`${deleteTarget.type} deleted`);
+   348→      setDeleteTarget(null);
+   349→      fetchTree();
+   350→      fetchProducts();
+   351→    } catch (e) {
+   352→      toast.error(e instanceof Error ? e.message : "Failed to delete");
+   353→    }
+   354→  };
+   355→
+   356→  const handleRename = async (type: string, id: number) => {
+   357→    if (!renameValue.trim()) {
+   358→      setRenamingId(null);
+   359→      return;
+   360→    }
+   361→    try {
+   362→      let body: Record<string, string> = {};
+   363→      if (type === "location") {
+   364→        const loc = tree?.locations.find((l) => l.id === id);
+   365→        body = { country: loc?.country || "", city: loc?.city || "", district: renameValue.trim() };
+   366→      } else {
+   367→        body = { name: renameValue.trim() };
+   368→      }
+   369→      const typePath = `${type}s`;
+   370→      const res = await fetch(`/api/${typePath}/${id}`, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+   371→      if (!res.ok) throw new Error();
+   372→      toast.success("Renamed");
+   373→      setRenamingId(null);
+   374→      fetchTree();
+   375→    } catch {
+   376→      toast.error("Failed to rename");
+   377→    }
+   378→  };
+   379→
+   380→  const handleAdd = async () => {
+   381→    if (!addMode) return;
+   382→    try {
+   383→      if (addMode === "location") {
+   384→        if (!addCountry.trim() || !addCity.trim()) {
+   385→          toast.error("Country and city are required");
+   386→          return;
+   387→        }
+   388→        const res = await fetch("/api/locations/bulk", {
+   389→          method: "POST",
+   390→          headers: { "Content-Type": "application/json" },
+   391→          body: JSON.stringify({ country: addCountry.trim(), city: addCity.trim(), district: addDistrict.trim() }),
+   392→        });
+   393→        if (!res.ok) {
+   394→          const data = await res.json();
+   395→          throw new Error(data.error || "Failed to add");
+   396→        }
+   397→      } else if (addMode === "category") {
+   398→        if (!addInput.trim() || !addParentId) {
+   399→          toast.error("Name is required");
+   400→          return;
+   401→        }
+   402→        const res = await fetch("/api/categories/bulk", {
+   403→          method: "POST",
+   404→          headers: { "Content-Type": "application/json" },
+   405→          body: JSON.stringify({ name: addInput.trim(), locationId: addParentId }),
+   406→        });
+   407→        if (!res.ok) {
+   408→          const data = await res.json();
+   409→          throw new Error(data.error || "Failed to add");
+   410→        }
+   411→      } else if (addMode === "subcategory") {
+   412→        if (!addInput.trim() || !addParentId) {
+   413→          toast.error("Name is required");
+   414→          return;
+   415→        }
+   416→        const res = await fetch("/api/subcategories/bulk", {
+   417→          method: "POST",
+   418→          headers: { "Content-Type": "application/json" },
+   419→          body: JSON.stringify({ name: addInput.trim(), categoryId: addParentId }),
+   420→        });
+   421→        if (!res.ok) {
+   422→          const data = await res.json();
+   423→          throw new Error(data.error || "Failed to add");
+   424→        }
+   425→      }
+   426→      toast.success("Added successfully");
+   427→      setAddMode(null);
+   428→      setAddInput("");
+   429→      setAddCountry("");
+   430→      setAddCity("");
+   431→      setAddDistrict("");
+   432→      setAddParentId(null);
+   433→      fetchTree();
+   434→    } catch (e) {
+   435→      toast.error(e instanceof Error ? e.message : "Failed to add");
+   436→    }
+   437→  };
+   438→
+   439→  // ─── Product modal ─────────────────────────────
+   440→  const openProductModal = async (product?: Product) => {
+   441→ if (product) {
+   442→      setEditProduct(product);
+   443→      setFormData({
+   444→        locationId: String(product.locationId),
+   445→        categoryId: String(product.categoryId),
+   446→        subcategoryId: product.subcategoryId ? String(product.subcategoryId) : "",
+   447→        name: product.name,
+   448→        description: product.description || "",
+   449→        privateData: product.privateData || "",
+   450→        price: String(product.price),
+   451→        quantityInStock: product.isMono ? "0" : String(product.quantityInStock),
+   452→        photoUrl: product.photoUrl || "",
+   453→        hiddenPhotoUrl: product.hiddenPhotoUrl || "",
+   454→        hiddenCoordinates: product.hiddenCoordinates || "",
+   455→        hiddenDescription: product.hiddenDescription || "",
+   456→        isMono: product.isMono === 1,
+   457→      });
+   458→    } else {
+   459→      setEditProduct(null);
+   460→      setFormData(emptyForm);
+   461→    }
+   462→
+   463→    // Load form data
+   464→    try {
+   465→      const [treeRes, locRes] = await Promise.all([
+   466→        fetch("/api/catalog/tree"),
+   467→        fetch("/api/locations/bulk"),
+   468→      ]);
+   469→      const treeData: CatalogTree = await treeRes.json();
+   470→      const locData: TreeLocation[] = await locRes.json();
+   471→      setFormLocations(locData);
+   472→
+   473→      if (product) {
+   474→        setFormCategories(treeData.categories.filter((c) => c.locationId === product.locationId));
+   475→        setFormSubcategories(treeData.subcategories.filter((s) => s.categoryId === product.categoryId));
+   476→      } else {
+   477→        setFormCategories([]);
+   478→        setFormSubcategories([]);
+   479→      }
+   480→    } catch {
+   481→      toast.error("Failed to load form data");
+   482→    }
+   483→
+   484→    setModalOpen(true);
+   485→  };
+   486→
+   487→  const handleLocationChange = async (locationId: string) => {
+   488→    const updated = { ...formData, locationId, categoryId: "", subcategoryId: "" };
+   489→    setFormData(updated);
+   490→    if (!locationId) {
+   491→      setFormCategories([]);
+   492→      setFormSubcategories([]);
+   493→      return;
+   494→    }
+   495→    try {
+   496→      const treeRes = await fetch("/api/catalog/tree");
+   497→      const treeData: CatalogTree = await treeRes.json();
+   498→      const cats = treeData.categories.filter((c) => c.locationId === +locationId);
+   499→      setFormCategories(cats);
+   500→      setFormSubcategories([]);
+   501→    } catch {
+   502→      // ignore
+   503→    }
+   504→  };
+   505→
+   506→  const handleCategoryChange = async (categoryId: string) => {
+   507→    const updated = { ...formData, categoryId, subcategoryId: "" };
+   508→    setFormData(updated);
+   509→    if (!categoryId) {
+   510→      setFormSubcategories([]);
+   511→      return;
+   512→    }
+   513→    try {
+   514→      const treeRes = await fetch("/api/catalog/tree");
+   515→      const treeData: CatalogTree = await treeRes.json();
+   516→      const subs = treeData.subcategories.filter((s) => s.categoryId === +categoryId);
+   517→      setFormSubcategories(subs);
+   518→    } catch {
+   519→      // ignore
+   520→    }
+   521→  };
+   522→
+   523→  const handleSaveProduct = async () => {
+   524→    if (!formData.locationId || !formData.categoryId || !formData.name || !formData.price) {
+   525→      toast.error("Location, Category, Name, and Price are required");
+   526→      return;
+   527→    }
+   528→    setSaving(true);
+   529→    try {
+   530→      const body = {
+   531→        locationId: +formData.locationId,
+   532→        categoryId: +formData.categoryId,
+   533→        subcategoryId: formData.subcategoryId ? +formData.subcategoryId : null,
+   534→        name: formData.name,
+   535→        description: formData.description || null,
+   536→        privateData: formData.privateData || null,
+   537→        price: +formData.price,
+   538→        quantityInStock: formData.isMono ? 0 : +formData.quantityInStock,
+   539→        photoUrl: formData.photoUrl || null,
+   540→        hiddenPhotoUrl: formData.hiddenPhotoUrl || null,
+   541→        hiddenCoordinates: formData.hiddenCoordinates || null,
+   542→        hiddenDescription: formData.hiddenDescription || null,
+   543→        isMono: formData.isMono ? 1 : 0,
+   544→      };
+   545→
+   546→      let res: Response;
+   547→      if (editProduct) {
+   548→        res = await fetch(`/api/products/${editProduct.id}`, {
+   549→          method: "PUT",
+   550→          headers: { "Content-Type": "application/json" },
+   551→          body: JSON.stringify(body),
+   552→        });
+   553→      } else {
+   554→        res = await fetch("/api/products/add", {
+   555→          method: "POST",
+   556→          headers: { "Content-Type": "application/json" },
+   557→          body: JSON.stringify(body),
+   558→        });
+   559→      }
+   560→
+   561→      if (!res.ok) {
+   562→        const data = await res.json();
+   563→        throw new Error(data.error || "Failed to save");
+   564→      }
+   565→
+   566→      toast.success(editProduct ? "Product updated" : "Product created");
+   567→      setModalOpen(false);
+   568→      fetchTree();
+   569→      fetchProducts();
+   570→    } catch (e) {
+   571→      toast.error(e instanceof Error ? e.message : "Failed to save product");
+   572→    } finally {
+   573→      setSaving(false);
+   574→    }
+   575→  };
+   576→
+   577→  // ─── Filter handler ────────────────────────────
+   578→  const handleNodeClick = (f: FilterType) => {
+   579→    setFilter(f);
+   580→  };
+   581→
+   582→  // ─── Grouped tree for rendering ────────────────
+   583→  const groupedTree = getGroupedTree();
+   584→  const countries = Array.from(groupedTree.keys()).sort();
+   585→
+   586→  const totalPages = Math.max(1, Math.ceil(productTotal / productLimit));
+   587→
+   588→  // ─── Render: Left panel skeleton ────────────────
+   589→  if (treeLoading) {
+   590→    return (
+   591→      <div className="p-4 space-y-3">
+   592→        <Skeleton className="h-8 w-48" />
+   593→        <Skeleton className="h-64 w-full" />
+   594→        <Skeleton className="h-96 w-full" />
+   595→      </div>
+   596→    );
+   597→  }
+   598→
+   599→  if (treeError) {
+   600→    return (
+   601→      <div className="p-6">
+   602→        <p className="text-destructive">{treeError}</p>
+   603→        <Button variant="outline" onClick={fetchTree} className="mt-2">
+   604→          Retry
+   605→        </Button>
+   606→      </div>
+   607→    );
+   608→  }
+   609→
+   610→  // ─── Location select groups for form ───────────
+   611→  const locationGroups = new Map<string, TreeLocation[]>();
+   612→  for (const loc of formLocations) {
+   613→    const key = `${loc.country} > ${loc.city}`;
+   614→    if (!locationGroups.has(key)) locationGroups.set(key, []);
+   615→    locationGroups.get(key)!.push(loc);
+   616→  }
+   617→
+   618→  // ─── Main render ────────────────────────────────
+   619→  return (
+   620→    <div className="h-full flex flex-col">
+   621→      {/* Header */}
+   622→      <div className="flex items-center justify-between px-4 pt-4 pb-2">
+   623→        <div className="flex items-center gap-2">
+   624→          <FolderOpen className="h-5 w-5 text-orange-500" />
+   625→          <h1 className="text-xl font-semibold">Catalog</h1>
+   626→        </div>
+   627→        <Button onClick={() => openProductModal()} size="sm">
+   628→          <Plus className="h-4 w-4 mr-1" /> Add Product
+   629→        </Button>
+   630→      </div>
+   631→
+   632→      {/* Main content */}
+   633→      <div className="flex-1 px-4 pb-4 min-h-0">
+   634→        <ResizablePanelGroup direction="horizontal" className="rounded-lg border">
+   635→          {/* ─── Left Panel: Tree ─── */}
+   636→          <ResizablePanel defaultSize={30} minSize={20} maxSize={50}>
+   637→            <div className="h-full flex flex-col">
+   638→              <div className="p-3 border-b flex items-center justify-between">
+   639→                <span className="text-sm font-medium text-muted-foreground">Catalog Tree</span>
+   640→                <Button
+   641→                  variant="ghost"
+   642→                  size="sm"
+   643→                  className="h-7 text-xs"
+   644→                  onClick={() => {
+   645→                    setAddMode("location");
+   646→                    setAddCountry("");
+   647→                    setAddCity("");
+   648→                    setAddDistrict("");
+   649→                  }}
+   650→                >
+   651→                  <Plus className="h-3 w-3 mr-1" /> Location
+   652→                </Button>
+   653→              </div>
+   654→
+   655→              {/* Add Location Form */}
+   656→              {addMode === "location" && (
+   657→                <div className="p-3 border-b bg-muted/30 space-y-2">
+   658→                  <div className="flex gap-2">
+   659→                    <Input
+   660→                      placeholder="Country"
+   661→                      value={addCountry}
+   662→                      onChange={(e) => setAddCountry(e.target.value)}
+   663→                      className="h-8 text-xs"
+   664→                    />
+   665→                    <Input
+   666→                      placeholder="City"
+   667→                      value={addCity}
+   668→                      onChange={(e) => setAddCity(e.target.value)}
+   669→                      className="h-8 text-xs"
+   670→                    />
+   671→                  </div>
+   672→                  <div className="flex gap-2">
+   673→                    <Input
+   674→                      placeholder="District (optional)"
+   675→                      value={addDistrict}
+   676→                      onChange={(e) => setAddDistrict(e.target.value)}
+   677→                      className="h-8 text-xs"
+   678→                      ref={addInputRef}
+   679→                      onKeyDown={(e) => {
+   680→                        if (e.key === "Enter") handleAdd();
+   681→                        if (e.key === "Escape") setAddMode(null);
+   682→                      }}
+   683→                    />
+   684→                  </div>
+   685→                  <div className="flex gap-2">
+   686→                    <Button size="sm" className="h-7 text-xs" onClick={handleAdd}>
+   687→                      Add
+   688→                    </Button>
+   689→                    <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => setAddMode(null)}>
+   690→                      Cancel
+   691→                    </Button>
+   692→                  </div>
+   693→                </div>
+   694→              )}
+   695→
+   696→              {/* Tree */}
+   697→              <div className="flex-1 overflow-y-auto max-h-[calc(100vh-14rem)] p-2">
+   698→                {countries.length === 0 ? (
+   699→                  <p className="text-sm text-muted-foreground text-center py-8">
+   700→                    No locations yet. Add one above.
+   701→                  </p>
+   702→                ) : (
+   703→                  <Accordion type="multiple" defaultValue={countries.slice(0, 3)} className="w-full">
+   704→                    {countries.map((country) => {
+   705→                      const countryEntry = groupedTree.get(country)!;
+   706→                      const cities = Array.from(countryEntry.cityMap.keys()).sort();
+   707→                      return (
+   708→                        <AccordionItem key={country} value={country}>
+   709→                          <AccordionTrigger className="text-sm font-semibold py-2 px-2 hover:no-underline">
+   710→                            <span className="flex items-center gap-2">
+   711→                              <MapPin className="h-3.5 w-3.5 text-orange-500" />
+   712→                              {country}
+   713→                            </span>
+   714→                          </AccordionTrigger>
+   715→                          <AccordionContent className="pb-1">
+   716→                            {cities.map((city) => {
+   717→                              const cityEntry = countryEntry.cityMap.get(city)!;
+   718→                              const districts = Array.from(cityEntry.districtMap.keys()).sort();
+   719→                              return (
+   720→                                <div key={city} className="ml-2">
+   721→                                  <Accordion type="multiple" className="w-full">
+   722→                                    {districts.map((district) => {
+   723→                                      const { location, categories } = cityEntry.districtMap.get(district)!;
+   724→                                      const totalCount = location.categoryCount + location.productCount;
+   725→                                      const isDistrict = district !== "(no district)";
+   726→                                      return (
+   727→                                        <AccordionItem key={district} value={`${country}-${city}-${district}`}>
+   728→                                          <AccordionTrigger className="text-xs py-1.5 px-2 hover:no-underline">
+   729→                                            <div
+   730→                                              className="flex items-center gap-2 flex-1 min-w-0"
+   731→                                              onClick={(e) => {
+   732→                                                e.stopPropagation();
+   733→                                                handleNodeClick({ type: "location", locationId: location.id });
+   734→                                              }}
+   735→                                            >
+   736→                                              <ChevronRight className="h-3 w-3 shrink-0" />
+   737→                                              <span className="truncate">
+   738→                                                {city}{isDistrict ? ` > ${district}` : ""}
+   739→                                              </span>
+   740→                                              <Badge variant={location.isActive === 1 ? "default" : "secondary"} className="text-[10px] px-1.5 py-0 ml-auto mr-1">
+   741→                                                {totalCount}
+   742→                                              </Badge>
+   743→                                              {location.isActive === 0 && (
+   744→                                                <Badge variant="outline" className="text-[10px] px-1 py-0 text-muted-foreground">
+   745→                                                  off
+   746→                                                </Badge>
+   747→                                              )}
+   748→                                            </div>
+   749→                                            <div className="flex items-center gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
+   750→                                              <Switch
+   751→                                                checked={location.isActive === 1}
+   752→                                                onCheckedChange={() => handleToggleActive("location", location.id)}
+   753→                                                className="scale-75"
+   754→                                              />
+   755→                                              <Button
+   756→                                                variant="ghost"
+   757→                                                size="sm"
+   758→                                                className="h-6 w-6 p-0"
+   759→                                                onClick={() => {
+   760→                                                  setRenamingId(`loc-${location.id}`);
+   761→                                                  setRenameValue(isDistrict ? district : city);
+   762→                                                }}
+   763→                                              >
+   764→                                                <Pencil className="h-3 w-3" />
+   765→                                              </Button>
+   766→                                              <Button
+   767→                                                variant="ghost"
+   768→                                                size="sm"
+   769→                                                className="h-6 w-6 p-0 text-destructive hover:text-destructive"
+   770→                                                onClick={() =>
+   771→                                                  setDeleteTarget({
+   772→                                                    type: "location",
+   773→                                                    id: location.id,
+   774→                                                    name: `${country} > ${city}${isDistrict ? ` > ${district}` : ""}`,
+   775→                                                  })
+   776→                                                }
+   777→                                              >
+   778→                                                <Trash2 className="h-3 w-3" />
+   779→                                              </Button>
+   780→                                              <Button
+   781→                                                variant="ghost"
+   782→                                                size="sm"
+   783→                                                className="h-6 w-6 p-0"
+   784→                                                onClick={() => {
+   785→                                                  setAddMode("category");
+   786→                                                  setAddParentId(location.id);
+   787→                                                  setAddInput("");
+   788→                                                }}
+   789→                                              >
+   790→                                                <Plus className="h-3 w-3" />
+   791→                                              </Button>
+   792→                                            </div>
+   793→                                          </AccordionTrigger>
+   794→
+   795→                                          {/* Inline rename for location */}
+   796→                                          {renamingId === `loc-${location.id}` && (
+   797→                                            <div className="flex items-center gap-2 px-4 py-1">
+   798→                                              <Input
+   799→                                                ref={renameInputRef}
+   800→                                                value={renameValue}
+   801→                                                onChange={(e) => setRenameValue(e.target.value)}
+   802→                                                className="h-7 text-xs"
+   803→                                                onKeyDown={(e) => {
+   804→                                                  if (e.key === "Enter") handleRename("location", location.id);
+   805→                                                  if (e.key === "Escape") setRenamingId(null);
+   806→                                                }}
+   807→                                                onBlur={() => handleRename("location", location.id)}
+   808→                                              />
+   809→                                            </div>
+   810→                                          )}
+   811→
+   812→                                          {/* Add Category Form */}
+   813→                                          {addMode === "category" && addParentId === location.id && (
+   814→                                            <div className="flex items-center gap-2 px-4 py-1">
+   815→                                              <Input
+   816→                                                ref={addInputRef}
+   817→                                                value={addInput}
+   818→                                                onChange={(e) => setAddInput(e.target.value)}
+   819→                                                placeholder="Category name..."
+   820→                                                className="h-7 text-xs"
+   821→                                                onKeyDown={(e) => {
+   822→                                                  if (e.key === "Enter") handleAdd();
+   823→                                                  if (e.key === "Escape") setAddMode(null);
+   824→                                                }}
+   825→                                              />
+   826→                                              <Button size="sm" className="h-7 text-xs" onClick={handleAdd}>Add</Button>
+   827→                                              <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => setAddMode(null)}>✕</Button>
+   828→                                            </div>
+   829→                                          )}
+   830→
+   831→                                          <AccordionContent className="pb-0">
+   832→                                            {categories.length === 0 ? (
+   833→                                              <p className="text-xs text-muted-foreground pl-8 py-1">No categories</p>
+   834→                                            ) : (
+   835→                                              categories.map((cat) => {
+   836→                                                const subs = tree?.subcategories.filter((s) => s.categoryId === cat.id) || [];
+   837→                                                return (
+   838→                                                  <div key={cat.id} className="ml-3">
+   839→                                                    <Accordion type="multiple" className="w-full">
+   840→                                                      <AccordionItem value={`cat-${cat.id}`}>
+   841→                                                        <AccordionTrigger className="text-xs py-1 px-2 hover:no-underline">
+   842→                                                          <div
+   843→                                                            className="flex items-center gap-2 flex-1 min-w-0"
+   844→                                                            onClick={(e) => {
+   845→                                                              e.stopPropagation();
+   846→                                                              handleNodeClick({ type: "category", categoryId: cat.id, locationId: cat.locationId });
+   847→                                                            }}
+   848→                                                          >
+   849→                                                            <FolderOpen className="h-3 w-3 text-amber-500 shrink-0" />
+   850→                                                            <span className="truncate">{cat.name}</span>
+   851→                                                            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 ml-auto mr-1">
+   852→                                                              {cat.subcategoryCount + cat.productCount}
+   853→                                                            </Badge>
+   854→                                                            {cat.isActive === 0 && (
+   855→                                                              <Badge variant="outline" className="text-[10px] px-1 py-0 text-muted-foreground">
+   856→                                                                off
+   857→                                                              </Badge>
+   858→                                                            )}
+   859→                                                          </div>
+   860→                                                          <div className="flex items-center gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
+   861→                                                            <Switch
+   862→                                                              checked={cat.isActive === 1}
+   863→                                                              onCheckedChange={() => handleToggleActive("category", cat.id)}
+   864→                                                              className="scale-75"
+   865→                                                            />
+   866→                                                            <Button
+   867→                                                              variant="ghost"
+   868→                                                              size="sm"
+   869→                                                              className="h-6 w-6 p-0"
+   870→                                                              onClick={() => {
+   871→                                                                setRenamingId(`cat-${cat.id}`);
+   872→                                                                setRenameValue(cat.name);
+   873→                                                              }}
+   874→                                                            >
+   875→                                                              <Pencil className="h-3 w-3" />
+   876→                                                            </Button>
+   877→                                                            <Button
+   878→                                                              variant="ghost"
+   879→                                                              size="sm"
+   880→                                                              className="h-6 w-6 p-0 text-destructive hover:text-destructive"
+   881→                                                              onClick={() =>
+   882→                                                                setDeleteTarget({
+   883→                                                                  type: "category",
+   884→                                                                  id: cat.id,
+   885→                                                                  name: cat.name,
+   886→                                                                })
+   887→                                                              }
+   888→                                                            >
+   889→                                                              <Trash2 className="h-3 w-3" />
+   890→                                                            </Button>
+   891→                                                            <Button
+   892→                                                              variant="ghost"
+   893→                                                              size="sm"
+   894→                                                              className="h-6 w-6 p-0"
+   895→                                                              onClick={() => {
+   896→                                                                setAddMode("subcategory");
+   897→                                                                setAddParentId(cat.id);
+   898→                                                                setAddInput("");
+   899→                                                              }}
+   900→                                                            >
+   901→                                                              <Plus className="h-3 w-3" />
+   902→                                                            </Button>
+   903→                                                          </div>
+   904→                                                        </AccordionTrigger>
+   905→
+   906→                                                        {/* Inline rename for category */}
+   907→                                                        {renamingId === `cat-${cat.id}` && (
+   908→                                                          <div className="flex items-center gap-2 px-6 py-1">
+   909→                                                            <Input
+   910→                                                              ref={renameInputRef}
+   911→                                                              value={renameValue}
+   912→                                                              onChange={(e) => setRenameValue(e.target.value)}
+   913→                                                              className="h-7 text-xs"
+   914→                                                              onKeyDown={(e) => {
+   915→                                                                if (e.key === "Enter") handleRename("category", cat.id);
+   916→                                                                if (e.key === "Escape") setRenamingId(null);
+   917→                                                              }}
+   918→                                                              onBlur={() => handleRename("category", cat.id)}
+   919→                                                            />
+   920→                                                          </div>
+   921→                                                        )}
+   922→
+   923→                                                        {/* Add Subcategory Form */}
+   924→                                                        {addMode === "subcategory" && addParentId === cat.id && (
+   925→                                                          <div className="flex items-center gap-2 px-6 py-1">
+   926→                                                            <Input
+   927→                                                              ref={addInputRef}
+   928→                                                              value={addInput}
+   929→                                                              onChange={(e) => setAddInput(e.target.value)}
+   930→                                                              placeholder="Subcategory name..."
+   931→                                                              className="h-7 text-xs"
+   932→                                                              onKeyDown={(e) => {
+   933→                                                                if (e.key === "Enter") handleAdd();
+   934→                                                                if (e.key === "Escape") setAddMode(null);
+   935→                                                              }}
+   936→                                                            />
+   937→                                                            <Button size="sm" className="h-7 text-xs" onClick={handleAdd}>Add</Button>
+   938→                                                            <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => setAddMode(null)}>✕</Button>
+   939→                                                          </div>
+   940→                                                        )}
+   941→
+   942→                                                        <AccordionContent className="pb-1">
+   943→                                                          {subs.length === 0 ? (
+   944→                                                            <p className="text-xs text-muted-foreground pl-8 py-1">No subcategories</p>
+   945→                                                          ) : (
+   946→                                                            subs.map((sub) => (
+   947→                                                              <div
+   948→                                                                key={sub.id}
+   949→                                                                className="flex items-center gap-2 pl-8 py-1 pr-2 group hover:bg-muted/50 rounded-md cursor-pointer"
+   950→                                                                onClick={() =>
+   951→                                                                  handleNodeClick({
+   952→                                                                    type: "subcategory",
+   953→                                                                    subcategoryId: sub.id,
+   954→                                                                    categoryId: sub.categoryId,
+   955→                                                                    locationId: sub.category.locationId,
+   956→                                                                  })
+   957→                                                                }
+   958→                                                              >
+   959→                                                                <Tag className="h-3 w-3 text-emerald-500 shrink-0" />
+   960→                                                                {renamingId === `sub-${sub.id}` ? (
+   961→                                                                  <Input
+   962→                                                                    ref={renameInputRef}
+   963→                                                                    value={renameValue}
+   964→                                                                    onChange={(e) => setRenameValue(e.target.value)}
+   965→                                                                    className="h-6 text-xs flex-1"
+   966→                                                                    onClick={(e) => e.stopPropagation()}
+   967→                                                                    onKeyDown={(e) => {
+   968→                                                                      if (e.key === "Enter") { e.stopPropagation(); handleRename("subcategory", sub.id); }
+   969→                                                                      if (e.key === "Escape") { e.stopPropagation(); setRenamingId(null); }
+   970→                                                                    }}
+   971→                                                                    onBlur={() => handleRename("subcategory", sub.id)}
+   972→                                                                  />
+   973→                                                                ) : (
+   974→                                                                  <span className="text-xs truncate flex-1">{sub.name}</span>
+   975→                                                                )}
+   976→                                                                <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
+   977→                                                                  {sub.productCount}
+   978→                                                                </Badge>
+   979→                                                                {sub.isActive === 0 && (
+   980→                                                                  <Badge variant="outline" className="text-[10px] px-1 py-0 text-muted-foreground">
+   981→                                                                    off
+   982→                                                                  </Badge>
+   983→                                                                )}
+   984→                                                                <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity" onClick={(e) => e.stopPropagation()}>
+   985→                                                                  <Switch
+   986→                                                                    checked={sub.isActive === 1}
+   987→                                                                    onCheckedChange={() => handleToggleActive("subcategory", sub.id)}
+   988→                                                                    className="scale-50"
+   989→                                                                  />
+   990→                                                                  {renamingId !== `sub-${sub.id}` && (
+   991→                                                                    <>
+   992→                                                                      <Button
+   993→                                                                        variant="ghost"
+   994→                                                                        size="sm"
+   995→                                                                        className="h-5 w-5 p-0"
+   996→                                                                        onClick={() => {
+   997→                                                                          setRenamingId(`sub-${sub.id}`);
+   998→                                                                          setRenameValue(sub.name);
+   999→                                                                        }}
+  1000→                                                                      >
+  1001→                                                                        <Pencil className="h-2.5 w-2.5" />
+  1002→                                                                      </Button>
+  1003→                                                                      <Button
+  1004→                                                                        variant="ghost"
+  1005→                                                                        size="sm"
+  1006→                                                                        className="h-5 w-5 p-0 text-destructive hover:text-destructive"
+  1007→                                                                        onClick={() =>
+  1008→                                                                          setDeleteTarget({
+  1009→                                                                            type: "subcategory",
+  1010→                                                                            id: sub.id,
+  1011→                                                                            name: sub.name,
+  1012→                                                                          })
+  1013→                                                                        }
+  1014→                                                                      >
+  1015→                                                                        <Trash2 className="h-2.5 w-2.5" />
+  1016→                                                                      </Button>
+  1017→                                                                    </>
+  1018→                                                                  )}
+  1019→                                                                </div>
+  1020→                                                              </div>
+  1021→                                                            ))
+  1022→                                                          )}
+  1023→                                                        </AccordionContent>
+  1024→                                                      </AccordionItem>
+  1025→                                                    </Accordion>
+  1026→                                                  </div>
+  1027→                                                );
+  1028→                                              })
+  1029→                                            )}
+  1030→                                          </AccordionContent>
+  1031→                                        </AccordionItem>
+  1032→                                      );
+  1033→                                    })}
+  1034→                                  </Accordion>
+  1035→                                </div>
+  1036→                              );
+  1037→                            })}
+  1038→                          </AccordionContent>
+  1039→                        </AccordionItem>
+  1040→                      );
+  1041→                    })}
+  1042→                  </Accordion>
+  1043→                )}
+  1044→              </div>
+  1045→            </div>
+  1046→          </ResizablePanel>
+  1047→
+  1048→          <ResizableHandle withHandle />
+  1049→
+  1050→          {/* ─── Right Panel: Products ─── */}
+  1051→          <ResizablePanel defaultSize={70}>
+  1052→            <div className="h-full flex flex-col">
+  1053→              {/* Toolbar */}
+  1054→              <div className="p-3 border-b flex items-center gap-2 flex-wrap">
+  1055→                <div className="relative flex-1 min-w-[200px]">
+  1056→                  <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+  1057→                  <Input
+  1058→                    placeholder="Search products..."
+  1059→                    value={search}
+  1060→                    onChange={(e) => setSearch(e.target.value)}
+  1061→                    className="pl-9 h-9 text-sm"
+  1062→                  />
+  1063→                </div>
+  1064→                {filter.type !== "all" && (
+  1065→                  <Button
+  1066→                    variant="outline"
+  1067→                    size="sm"
+  1068→                    className="h-9"
+  1069→                    onClick={() => setFilter({ type: "all" })}
+  1070→                  >
+  1071→                    <X className="h-3.5 w-3.5 mr-1" />
+  1072→                    Clear filter
+  1073→                  </Button>
+  1074→                )}
+  1075→                <span className="text-xs text-muted-foreground">
+  1076→                  {productTotal} product{productTotal !== 1 ? "s" : ""}
+  1077→                </span>
+  1078→              </div>
+  1079→
+  1080→              {/* Table */}
+  1081→              <div className="flex-1 overflow-auto">
+  1082→                {productsLoading ? (
+  1083→                  <div className="p-4 space-y-2">
+  1084→                    {Array.from({ length: 5 }).map((_, i) => (
+  1085→                      <Skeleton key={i} className="h-10 w-full" />
+  1086→                    ))}
+  1087→                  </div>
+  1088→                ) : products.length === 0 ? (
+  1089→                  <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+  1090→                    <Package className="h-10 w-10 mb-2" />
+  1091→                    <p className="text-sm">No products found</p>
+  1092→                  </div>
+  1093→                ) : (
+  1094→                  <Table>
+  1095→                    <TableHeader>
+  1096→                      <TableRow>
+  1097→                        <TableHead className="w-12">ID</TableHead>
+  1098→                        <TableHead className="w-12">Photo</TableHead>
+  1099→                        <TableHead>Name</TableHead>
+  1100→                        <TableHead className="hidden md:table-cell">Category</TableHead>
+  1101→                        <TableHead className="hidden lg:table-cell">Subcategory</TableHead>
+  1102→                        <TableHead className="w-24">Price</TableHead>
+  1103→                        <TableHead className="w-20">Stock</TableHead>
+  1104→                        <TableHead className="w-24">Actions</TableHead>
+  1105→                      </TableRow>
+  1106→                    </TableHeader>
+  1107→                    <TableBody>
+  1108→                      {products.map((p) => (
+  1109→                        <TableRow key={p.id}>
+  1110→                          <TableCell className="font-mono text-xs text-muted-foreground">{p.id}</TableCell>
+  1111→                          <TableCell>
+  1112→                            {p.photoUrl ? (
+  1113→                              <img
+  1114→                                src={p.photoUrl}
+  1115→                                alt={p.name}
+  1116→                                className="w-10 h-10 rounded object-cover"
+  1117→                                onError={(e) => {
+  1118→                                  (e.target as HTMLImageElement).style.display = "none";
+  1119→                                }}
+  1120→                              />
+  1121→                            ) : (
+  1122→                              <div className="w-10 h-10 rounded bg-muted flex items-center justify-center">
+  1123→                                <Package className="h-4 w-4 text-muted-foreground" />
+  1124→                              </div>
+  1125→                            )}
+  1126→                          </TableCell>
+  1127→                          <TableCell className="font-medium max-w-[200px] truncate">{p.name}</TableCell>
+  1128→                          <TableCell className="hidden md:table-cell text-xs text-muted-foreground">{p.category.name}</TableCell>
+  1129→                          <TableCell className="hidden lg:table-cell text-xs text-muted-foreground">
+  1130→                            {p.subcategory?.name || "—"}
+  1131→                          </TableCell>
+  1132→                          <TableCell className="font-mono text-sm">
+  1133→                            ${p.price.toFixed(2)}
+  1134→                          </TableCell>
+  1135→                          <TableCell className="text-sm">
+  1136→                            {p.isMono === 1 ? "∞" : p.quantityInStock}
+  1137→                          </TableCell>
+  1138→                          <TableCell>
+  1139→                            <div className="flex items-center gap-1">
+  1140→                              <Button
+  1141→                                variant="ghost"
+  1142→                                size="sm"
+  1143→                                className="h-7 w-7 p-0"
+  1144→                                onClick={() => openProductModal(p)}
+  1145→                              >
+  1146→                                <Pencil className="h-3.5 w-3.5" />
+  1147→                              </Button>
+  1148→                              <Button
+  1149→                                variant="ghost"
+  1150→                                size="sm"
+  1151→                                className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+  1152→                                onClick={() =>
+  1153→                                  setDeleteTarget({
+  1154→                                    type: "product",
+  1155→                                    id: p.id,
+  1156→                                    name: p.name,
+  1157→                                  })
+  1158→                                }
+  1159→                              >
+  1160→                                <Trash2 className="h-3.5 w-3.5" />
+  1161→                              </Button>
+  1162→                            </div>
+  1163→                          </TableCell>
+  1164→                        </TableRow>
+  1165→                      ))}
+  1166→                    </TableBody>
+  1167→                  </Table>
+  1168→                )}
+  1169→              </div>
+  1170→
+  1171→              {/* Pagination */}
+  1172→              {totalPages > 1 && (
+  1173→                <div className="p-3 border-t flex items-center justify-between">
+  1174→                  <span className="text-xs text-muted-foreground">
+  1175→                    Page {productPage} of {totalPages}
+  1176→                  </span>
+  1177→                  <div className="flex items-center gap-2">
+  1178→                    <Button
+  1179→                      variant="outline"
+  1180→                      size="sm"
+  1181→                      className="h-8"
+  1182→                      disabled={productPage <= 1}
+  1183→                      onClick={() => setProductPage((p) => p - 1)}
+  1184→                    >
+  1185→                      Previous
+  1186→                    </Button>
+  1187→                    <Button
+  1188→                      variant="outline"
+  1189→                      size="sm"
+  1190→                      className="h-8"
+  1191→                      disabled={productPage >= totalPages}
+  1192→                      onClick={() => setProductPage((p) => p + 1)}
+  1193→                    >
+  1194→                      Next
+  1195→                    </Button>
+  1196→                  </div>
+  1197→                </div>
+  1198→              )}
+  1199→            </div>
+  1200→          </ResizablePanel>
+  1201→        </ResizablePanelGroup>
+  1202→      </div>
+  1203→
+  1204→      {/* ─── Product Modal ─── */}
+  1205→      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+  1206→        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+  1207→          <DialogHeader>
+  1208→            <DialogTitle>{editProduct ? "Edit Product" : "Add Product"}</DialogTitle>
+  1209→          </DialogHeader>
+  1210→
+  1211→          <div className="grid gap-4 py-2">
+  1212→            {/* Row 1: Cascading Selects */}
+  1213→            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+  1214→              <div className="space-y-1.5">
+  1215→                <Label className="text-xs">Location</Label>
+  1216→                <Select value={formData.locationId} onValueChange={handleLocationChange}>
+  1217→                  <SelectTrigger className="h-9 text-sm">
+  1218→                    <SelectValue placeholder="Select location" />
+  1219→                  </SelectTrigger>
+  1220→                  <SelectContent>
+  1221→                    {Array.from(locationGroups.entries()).map(([key, locs]) => (
+  1222→                      <SelectGroup key={key}>
+  1223→                        <SelectLabel>{key}</SelectLabel>
+  1224→                        {locs.map((loc) => {
+  1225→                          const label = loc.district
+  1226→                            ? `${loc.country} > ${loc.city} > ${loc.district}`
+  1227→                            : `${loc.country} > ${loc.city}`;
+  1228→                          return (
+  1229→                            <SelectItem key={loc.id} value={String(loc.id)}>
+  1230→                              <span className="truncate text-xs">{label}</span>
+  1231→                            </SelectItem>
+  1232→                          );
+  1233→                        })}
+  1234→                      </SelectGroup>
+  1235→                    ))}
+  1236→                  </SelectContent>
+  1237→                </Select>
+  1238→              </div>
+  1239→
+  1240→              <div className="space-y-1.5">
+  1241→                <Label className="text-xs">Category</Label>
+  1242→                <Select
+  1243→                  value={formData.categoryId}
+  1244→                  onValueChange={handleCategoryChange}
+  1245→                  disabled={!formData.locationId}
+  1246→                >
+  1247→                  <SelectTrigger className="h-9 text-sm">
+  1248→                    <SelectValue placeholder="Select category" />
+  1249→                  </SelectTrigger>
+  1250→                  <SelectContent>
+  1251→                    {formCategories.map((cat) => (
+  1252→                      <SelectItem key={cat.id} value={String(cat.id)}>
+  1253→                        {cat.name}
+  1254→                      </SelectItem>
+  1255→                    ))}
+  1256→                  </SelectContent>
+  1257→                </Select>
+  1258→              </div>
+  1259→
+  1260→              <div className="space-y-1.5">
+  1261→                <Label className="text-xs">Subcategory</Label>
+  1262→                <Select
+  1263→                  value={formData.subcategoryId}
+  1264→                  onValueChange={(v) => setFormData({ ...formData, subcategoryId: v === "__none__" ? "" : v })}
+  1265→                  disabled={!formData.categoryId}
+  1266→                >
+  1267→                  <SelectTrigger className="h-9 text-sm">
+  1268→                    <SelectValue placeholder="Select subcategory" />
+  1269→                  </SelectTrigger>
+  1270→                  <SelectContent>
+  1271→                    <SelectItem value="__none__">None</SelectItem>
+  1272→                    {formSubcategories.map((sub) => (
+  1273→                      <SelectItem key={sub.id} value={String(sub.id)}>
+  1274→                        {sub.name}
+  1275→                      </SelectItem>
+  1276→                    ))}
+  1277→                  </SelectContent>
+  1278→                </Select>
+  1279→              </div>
+  1280→            </div>
+  1281→
+  1282→            {/* Row 2: Name, Price, Stock, Mono */}
+  1283→            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+  1284→              <div className="space-y-1.5">
+  1285→                <Label className="text-xs">Name *</Label>
+  1286→                <Input
+  1287→                  value={formData.name}
+  1288→                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+  1289→                  placeholder="Product name"
+  1290→                  className="h-9 text-sm"
+  1291→                />
+  1292→              </div>
+  1293→              <div className="space-y-1.5">
+  1294→                <Label className="text-xs">Price ($) *</Label>
+  1295→                <Input
+  1296→                  type="number"
+  1297→                  min="0.01"
+  1298→                  step="0.01"
+  1299→                  value={formData.price}
+  1300→                  onChange={(e) => setFormData({ ...formData, price: e.target.value })}
+  1301→                  placeholder="0.00"
+  1302→                  className="h-9 text-sm"
+  1303→                />
+  1304→              </div>
+  1305→            </div>
+  1306→
+  1307→            <div className="flex items-center gap-3">
+  1308→              <div className="flex items-center gap-2">
+  1309→                <Checkbox
+  1310→                  id="is-mono"
+  1311→                  checked={formData.isMono}
+  1312→                  onCheckedChange={(checked) =>
+  1313→                    setFormData({ ...formData, isMono: !!checked })
+  1314→                  }
+  1315→                />
+  1316→                <Label htmlFor="is-mono" className="text-xs cursor-pointer">
+  1317→                  Digital Product (infinite stock)
+  1318→                </Label>
+  1319→              </div>
+  1320→              {!formData.isMono && (
+  1321→                <div className="flex items-center gap-2">
+  1322→                  <Label className="text-xs">Stock:</Label>
+  1323→                  <Input
+  1324→                    type="number"
+  1325→                    min="0"
+  1326→                    value={formData.quantityInStock}
+  1327→                    onChange={(e) => setFormData({ ...formData, quantityInStock: e.target.value })}
+  1328→                    className="h-9 text-sm w-24"
+  1329→                  />
+  1330→                </div>
+  1331→              )}
+  1332→              {formData.isMono && (
+  1333→                <span className="text-sm font-mono text-muted-foreground">Stock: ∞</span>
+  1334→              )}
+  1335→            </div>
+  1336→
+  1337→            {/* Row 3: Description */}
+  1338→            <div className="space-y-1.5">
+  1339→              <Label className="text-xs">Description</Label>
+  1340→              <Textarea
+  1341→                value={formData.description}
+  1342→                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+  1343→                placeholder="Product description..."
+  1344→                rows={3}
+  1345→                className="text-sm"
+  1346→              />
+  1347→            </div>
+  1348→
+  1349→            {/* Row 4: Photo URLs */}
+  1350→            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+  1351→              <div className="space-y-1.5">
+  1352→                <Label className="text-xs">Photo URL</Label>
+  1353→                <Input
+  1354→                  value={formData.photoUrl}
+  1355→                  onChange={(e) => setFormData({ ...formData, photoUrl: e.target.value })}
+  1356→                  placeholder="https://..."
+  1357→                  className="h-9 text-sm"
+  1358→                />
+  1359→              </div>
+  1360→              <div className="space-y-1.5">
+  1361→                <Label className="text-xs">Hidden Photo URL</Label>
+  1362→                <Input
+  1363→                  value={formData.hiddenPhotoUrl}
+  1364→                  onChange={(e) => setFormData({ ...formData, hiddenPhotoUrl: e.target.value })}
+  1365→                  placeholder="https://..."
+  1366→                  className="h-9 text-sm"
+  1367→                />
+  1368→              </div>
+  1369→            </div>
+  1370→
+  1371→            {/* Row 5: Hidden content */}
+  1372→            <details className="group">
+  1373→              <summary className="text-xs font-medium cursor-pointer text-muted-foreground hover:text-foreground transition-colors py-1">
+  1374→                ▸ Hidden Content Fields
+  1375→              </summary>
+  1376→              <div className="grid gap-3 mt-2 pl-2 border-l-2 border-muted">
+  1377→                <div className="space-y-1.5">
+  1378→                  <Label className="text-xs">Hidden Description</Label>
+  1379→                  <Textarea
+  1380→                    value={formData.hiddenDescription}
+  1381→                    onChange={(e) => setFormData({ ...formData, hiddenDescription: e.target.value })}
+  1382→                    placeholder="Hidden description (shown after purchase)..."
+  1383→                    rows={2}
+  1384→                    className="text-sm"
+  1385→                  />
+  1386→                </div>
+  1387→                <div className="space-y-1.5">
+  1388→                  <Label className="text-xs">Hidden Coordinates</Label>
+  1389→                  <Input
+  1390→                    value={formData.hiddenCoordinates}
+  1391→                    onChange={(e) => setFormData({ ...formData, hiddenCoordinates: e.target.value })}
+  1392→                    placeholder="lat,lng"
+  1393→                    className="h-9 text-sm"
+  1394→                  />
+  1395→                </div>
+  1396→                <div className="space-y-1.5">
+  1397→                  <Label className="text-xs">Private Data</Label>
+  1398→                  <Textarea
+  1399→                    value={formData.privateData}
+  1400→                    onChange={(e) => setFormData({ ...formData, privateData: e.target.value })}
+  1401→                    placeholder="Private data (credentials, keys, etc.)..."
+  1402→                    rows={2}
+  1403→                    className="text-sm"
+  1404→                  />
+  1405→                </div>
+  1406→              </div>
+  1407→            </details>
+  1408→          </div>
+  1409→
+  1410→          <DialogFooter>
+  1411→            <Button variant="outline" onClick={() => setModalOpen(false)} disabled={saving}>
+  1412→              Cancel
+  1413→            </Button>
+  1414→            <Button onClick={handleSaveProduct} disabled={saving}>
+  1415→              {saving ? "Saving..." : editProduct ? "Update Product" : "Create Product"}
+  1416→            </Button>
+  1417→          </DialogFooter>
+  1418→        </DialogContent>
+  1419→      </Dialog>
+  1420→
+  1421→      {/* ─── Delete Confirmation ─── */}
+  1422→      <AlertDialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
+  1423→        <AlertDialogContent>
+  1424→          <AlertDialogHeader>
+  1425→            <AlertDialogTitle>Delete {deleteTarget?.type}?</AlertDialogTitle>
+  1426→            <AlertDialogDescription>
+  1427→              Are you sure you want to delete &quot;{deleteTarget?.name}&quot;? This action cannot be
+  1428→              undone.
+  1429→            </AlertDialogDescription>
+  1430→          </AlertDialogHeader>
+  1431→          <AlertDialogFooter>
+  1432→            <AlertDialogCancel>Cancel</AlertDialogCancel>
+  1433→            <AlertDialogAction
+  1434→              onClick={handleDelete}
+  1435→              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+  1436→            >
+  1437→              Delete
+  1438→            </AlertDialogAction>
+  1439→          </AlertDialogFooter>
+  1440→        </AlertDialogContent>
+  1441→      </AlertDialog>
+  1442→    </div>
+  1443→  );
+  1444→}
+  1445→
\ No newline at end of file
diff --git a/tool-results/read_1785935184311_0a91f702ffc4.txt b/tool-results/read_1785935184311_0a91f702ffc4.txt
new file mode 100644
index 0000000..cc391a7
--- /dev/null
+++ b/tool-results/read_1785935184311_0a91f702ffc4.txt
@@ -0,0 +1,914 @@
+     1→'use client';
+     2→
+     3→import { useState, useEffect, useCallback } from 'react';
+     4→import { toast } from 'sonner';
+     5→import { useAuthStore } from '@/stores/auth-store';
+     6→import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+     7→import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+     8→import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+     9→import { Badge } from '@/components/ui/badge';
+    10→import { Button } from '@/components/ui/button';
+    11→import { Input } from '@/components/ui/input';
+    12→import { Label } from '@/components/ui/label';
+    13→import {
+    14→  AlertDialog,
+    15→  AlertDialogAction,
+    16→  AlertDialogCancel,
+    17→  AlertDialogContent,
+    18→  AlertDialogDescription,
+    19→  AlertDialogFooter,
+    20→  AlertDialogHeader,
+    21→  AlertDialogTitle,
+    22→  AlertDialogTrigger,
+    23→} from '@/components/ui/alert-dialog';
+    24→import {
+    25→  Wallet,
+    26→  Users,
+    27→  Eye,
+    28→  EyeOff,
+    29→  Search,
+    30→  RefreshCw,
+    31→  DollarSign,
+    32→  Download,
+    33→  Lock,
+    34→  Copy,
+    35→  AlertTriangle,
+    36→  ShieldCheck,
+    37→} from 'lucide-react';
+    38→import { Skeleton } from '@/components/ui/skeleton';
+    39→
+    40→// ── Types ──────────────────────────────────────────────
+    41→
+    42→interface WalletUser {
+    43→  id: number;
+    44→  username: string | null;
+    45→  telegramId: string;
+    46→  status: number;
+    47→  totalBalance: number;
+    48→  bonusBalance: number;
+    49→  walletCount: number;
+    50→  country: string | null;
+    51→  city: string | null;
+    52→}
+    53→
+    54→interface UserWallet {
+    55→  id: number;
+    56→  walletType: string;
+    57→  address: string;
+    58→  balance: number;
+    59→  createdAt: string;
+    60→}
+    61→
+    62→interface UserProfile {
+    63→  id: number;
+    64→  username: string | null;
+    65→  telegramId: string;
+    66→  status: number;
+    67→  totalBalance: number;
+    68→  bonusBalance: number;
+    69→  country: string | null;
+    70→  city: string | null;
+    71→  createdAt: string;
+    72→  wallets: UserWallet[];
+    73→}
+    74→
+    75→interface OverviewData {
+    76→  totals: Record<string, number>;
+    77→  walletCounts: Record<string, number>;
+    78→  totalUsd: number;
+    79→  totalWallets: number;
+    80→  totalUsers: number;
+    81→  commissionEnabled: boolean;
+    82→  commissionRate: number;
+    83→  currentCommission: number;
+    84→  payments: {
+    85→    id: number;
+    86→    paidAmountUsd: number;
+    87→    note: string | null;
+    88→    createdAt: string;
+    89→  }[];
+    90→  lastPaidAmount: number;
+    91→  commissionDue: number;
+    92→}
+    93→
+    94→interface SeedEntry {
+    95→  walletId: number;
+    96→  userId: number;
+    97→  username: string;
+    98→  walletType: string;
+    99→  address: string;
+   100→  derivationPath: string;
+   101→  mnemonic: string;
+   102→}
+   103→
+   104→// ── Helpers ────────────────────────────────────────────
+   105→
+   106→function formatBalance(val: number): string {
+   107→  return val.toFixed(8);
+   108→}
+   109→
+   110→function truncateAddress(addr: string, len = 10): string {
+   111→  if (addr.length <= len * 2) return addr;
+   112→  return `${addr.slice(0, len)}...${addr.slice(-len)}`;
+   113→}
+   114→
+   115→function statusBadge(status: number) {
+   116→  if (status === 0) return <Badge className="bg-emerald-100 text-emerald-700 hover:bg-emerald-100">Active</Badge>;
+   117→  if (status === 2) return <Badge className="bg-red-100 text-red-700 hover:bg-red-100">Blocked</Badge>;
+   118→  return <Badge variant="secondary">Unknown</Badge>;
+   119→}
+   120→
+   121→function walletTypeBadge(type: string) {
+   122→  const colorMap: Record<string, string> = {
+   123→    BTC: 'bg-orange-100 text-orange-700 hover:bg-orange-100',
+   124→    LTC: 'bg-gray-100 text-gray-700 hover:bg-gray-100',
+   125→    ETH: 'bg-violet-100 text-violet-700 hover:bg-violet-100',
+   126→    USDT: 'bg-emerald-100 text-emerald-700 hover:bg-emerald-100',
+   127→    USDC: 'bg-blue-100 text-blue-700 hover:bg-blue-100',
+   128→  };
+   129→  return <Badge className={colorMap[type] || ''}>{type}</Badge>;
+   130→}
+   131→
+   132→function copyToClipboard(text: string, label: string) {
+   133→  navigator.clipboard.writeText(text).then(() => {
+   134→    toast.success(`${label} copied!`);
+   135→  }).catch(() => {
+   136→    toast.error('Failed to copy');
+   137→  });
+   138→}
+   139→
+   140→// ── Component ───────────────────────────────────────────
+   141→
+   142→export function WalletsPage() {
+   143→  const { role } = useAuthStore();
+   144→  const isSuperAdmin = role === 'super_admin';
+   145→
+   146→  // Tab 1 state
+   147→  const [userList, setUserList] = useState<WalletUser[]>([]);
+   148→  const [userListLoading, setUserListLoading] = useState(true);
+   149→  const [userSearch, setUserSearch] = useState('');
+   150→  const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
+   151→  const [selectedUser, setSelectedUser] = useState<UserProfile | null>(null);
+   152→  const [selectedUserLoading, setSelectedUserLoading] = useState(false);
+   153→
+   154→  // Tab 2 state
+   155→  const [overview, setOverview] = useState<OverviewData | null>(null);
+   156→  const [overviewLoading, setOverviewLoading] = useState(true);
+   157→  const [paymentAmount, setPaymentAmount] = useState('');
+   158→  const [paymentNote, setPaymentNote] = useState('');
+   159→  const [paymentSubmitting, setPaymentSubmitting] = useState(false);
+   160→
+   161→  // Tab 3 state
+   162→  const [seeds, setSeeds] = useState<SeedEntry[]>([]);
+   163→  const [seedsLoading, setSeedsLoading] = useState(false);
+   164→  const [seedsLoaded, setSeedsLoaded] = useState(false);
+   165→  const [revealedMnemonics, setRevealedMnemonics] = useState<Set<number>>(new Set());
+   166→  const [seedsAlertOpen, setSeedsAlertOpen] = useState(false);
+   167→  const [exportAlertOpen, setExportAlertOpen] = useState(false);
+   168→
+   169→  // ── Tab 1: User Wallets ────────────────────────────
+   170→
+   171→  const fetchUserList = useCallback(async (search?: string) => {
+   172→    setUserListLoading(true);
+   173→    try {
+   174→      const query = search ? `?search=${encodeURIComponent(search)}` : '';
+   175→      const res = await fetch(`/api/wallets/bulk${query}`);
+   176→      if (!res.ok) throw new Error('Failed to fetch');
+   177→      const data = await res.json();
+   178→      setUserList(data);
+   179→    } catch {
+   180→      toast.error('Failed to load user list');
+   181→    } finally {
+   182→      setUserListLoading(false);
+   183→    }
+   184→  }, []);
+   185→
+   186→  useEffect(() => {
+   187→    const debounce = setTimeout(() => {
+   188→      fetchUserList(userSearch);
+   189→    }, 300);
+   190→    return () => clearTimeout(debounce);
+   191→  }, [userSearch, fetchUserList]);
+   192→
+   193→  const selectUser = async (userId: number) => {
+   194→    setSelectedUserId(userId);
+   195→    setSelectedUser(null);
+   196→    setSelectedUserLoading(true);
+   197→    try {
+   198→      const res = await fetch(`/api/wallets/${userId}`);
+   199→      if (!res.ok) throw new Error('Failed to fetch');
+   200→      const data = await res.json();
+   201→      setSelectedUser(data);
+   202→    } catch {
+   203→      toast.error('Failed to load user wallets');
+   204→    } finally {
+   205→      setSelectedUserLoading(false);
+   206→    }
+   207→  };
+   208→
+   209→  // ── Tab 2: Owner Summary ──────────────────────────
+   210→
+   211→  useEffect(() => {
+   212→    const fetchOverview = async () => {
+   213→      setOverviewLoading(true);
+   214→      try {
+   215→        const res = await fetch('/api/wallets/overview');
+   216→        if (!res.ok) throw new Error('Failed to fetch');
+   217→        const data = await res.json();
+   218→        setOverview(data);
+   219→      } catch {
+   220→        toast.error('Failed to load overview');
+   221→      } finally {
+   222→        setOverviewLoading(false);
+   223→      }
+   224→    };
+   225→    fetchOverview();
+   226→  }, []);
+   227→
+   228→  const handleRecordPayment = async () => {
+   229→    const amount = parseFloat(paymentAmount);
+   230→    if (isNaN(amount) || amount <= 0) {
+   231→      toast.error('Enter a valid amount');
+   232→      return;
+   233→    }
+   234→    setPaymentSubmitting(true);
+   235→    try {
+   236→      const res = await fetch('/api/wallets/record-payment', {
+   237→        method: 'POST',
+   238→        headers: { 'Content-Type': 'application/json' },
+   239→        body: JSON.stringify({ paidAmount: amount, note: paymentNote }),
+   240→      });
+   241→      if (!res.ok) throw new Error('Failed');
+   242→      toast.success('Payment recorded successfully');
+   243→      setPaymentAmount('');
+   244→      setPaymentNote('');
+   245→      // Refetch overview
+   246→      const overviewRes = await fetch('/api/wallets/overview');
+   247→      if (overviewRes.ok) {
+   248→        const data = await overviewRes.json();
+   249→        setOverview(data);
+   250→      }
+   251→    } catch {
+   252→      toast.error('Failed to record payment');
+   253→    } finally {
+   254→      setPaymentSubmitting(false);
+   255→    }
+   256→  };
+   257→
+   258→  // ── Tab 3: Seed Phrases ────────────────────────────
+   259→
+   260→  const handleLoadSeeds = async () => {
+   261→    setSeedsLoading(true);
+   262→    try {
+   263→      const res = await fetch('/api/wallets/seeds');
+   264→      if (!res.ok) throw new Error('Failed');
+   265→      const data = await res.json();
+   266→      setSeeds(data);
+   267→      setSeedsLoaded(true);
+   268→      toast.success(`Loaded ${data.length} seed phrases`);
+   269→    } catch {
+   270→      toast.error('Failed to load seeds');
+   271→    } finally {
+   272→      setSeedsLoading(false);
+   273→      setSeedsAlertOpen(false);
+   274→    }
+   275→  };
+   276→
+   277→  const handleExportSeeds = () => {
+   278→    window.open('/api/wallets/export-seeds', '_blank');
+   279→    setExportAlertOpen(false);
+   280→  };
+   281→
+   282→  const toggleMnemonic = (walletId: number) => {
+   283→    setRevealedMnemonics((prev) => {
+   284→      const next = new Set(prev);
+   285→      if (next.has(walletId)) {
+   286→        next.delete(walletId);
+   287→      } else {
+   288→        next.add(walletId);
+   289→      }
+   290→      return next;
+   291→    });
+   292→  };
+   293→
+   294→  // ── Render ─────────────────────────────────────────
+   295→
+   296→  const currencyTypes = ['BTC', 'LTC', 'ETH', 'USDT', 'USDC'];
+   297→
+   298→  return (
+   299→    <div className="space-y-6">
+   300→      <div className="flex items-center gap-3">
+   301→        <Wallet className="h-8 w-8 text-orange-500" />
+   302→        <div>
+   303→          <h1 className="text-2xl font-bold">Wallets</h1>
+   304→          <p className="text-sm text-muted-foreground">Manage crypto wallets, view balances, and track commissions</p>
+   305→        </div>
+   306→      </div>
+   307→
+   308→      <Tabs defaultValue="user-wallets" className="w-full">
+   309→        <TabsList className="grid w-full grid-cols-3 max-w-lg">
+   310→          <TabsTrigger value="user-wallets" className="gap-2">
+   311→            <Users className="h-4 w-4" />
+   312→            User Wallets
+   313→          </TabsTrigger>
+   314→          <TabsTrigger value="owner-summary" className="gap-2">
+   315→            <DollarSign className="h-4 w-4" />
+   316→            Owner Summary
+   317→          </TabsTrigger>
+   318→          {isSuperAdmin && (
+   319→            <TabsTrigger value="seed-phrases" className="gap-2">
+   320→              <ShieldCheck className="h-4 w-4" />
+   321→              Seeds
+   322→            </TabsTrigger>
+   323→          )}
+   324→        </TabsList>
+   325→
+   326→        {/* ── Tab 1: User Wallets ─────────────────────── */}
+   327→        <TabsContent value="user-wallets" className="mt-6">
+   328→          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+   329→            {/* Left: User List */}
+   330→            <Card className="lg:col-span-1">
+   331→              <CardHeader className="pb-3">
+   332→                <CardTitle className="text-lg">Users with Wallets</CardTitle>
+   333→                <div className="relative mt-2">
+   334→                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+   335→                  <Input
+   336→                    placeholder="Search username or Telegram ID..."
+   337→                    className="pl-9"
+   338→                    value={userSearch}
+   339→                    onChange={(e) => setUserSearch(e.target.value)}
+   340→                  />
+   341→                </div>
+   342→              </CardHeader>
+   343→              <CardContent className="p-0">
+   344→                <div className="max-h-[calc(100vh-20rem)] overflow-y-auto">
+   345→                  {userListLoading ? (
+   346→                    <div className="p-4 space-y-3">
+   347→                      {[1, 2, 3, 4, 5].map((i) => (
+   348→                        <div key={i} className="flex items-center justify-between p-3">
+   349→                          <div className="space-y-2">
+   350→                            <Skeleton className="h-4 w-24" />
+   351→                            <Skeleton className="h-3 w-16" />
+   352→                          </div>
+   353→                          <Skeleton className="h-5 w-12" />
+   354→                        </div>
+   355→                      ))}
+   356→                    </div>
+   357→                  ) : userList.length === 0 ? (
+   358→                    <div className="p-8 text-center text-muted-foreground">
+   359→                      <Users className="h-10 w-10 mx-auto mb-2 opacity-40" />
+   360→                      <p>No users with wallets found</p>
+   361→                    </div>
+   362→                  ) : (
+   363→                    <div className="divide-y">
+   364→                      {userList.map((u) => (
+   365→                        <button
+   366→                          key={u.id}
+   367→                          className={`w-full text-left px-4 py-3 flex items-center justify-between hover:bg-muted/50 transition-colors ${
+   368→                            selectedUserId === u.id ? 'bg-muted border-l-2 border-l-orange-500' : ''
+   369→                          }`}
+   370→                          onClick={() => selectUser(u.id)}
+   371→                        >
+   372→                          <div className="min-w-0">
+   373→                            <div className="flex items-center gap-2">
+   374→                              <span className="font-medium text-sm truncate">
+   375→                                {u.username || `User#${u.id}`}
+   376→                              </span>
+   377→                              {statusBadge(u.status)}
+   378→                            </div>
+   379→                            <p className="text-xs text-muted-foreground mt-0.5">
+   380→                              TG: {u.telegramId} · {u.country ? `${u.country}${u.city ? `, ${u.city}` : ''}` : 'N/A'}
+   381→                            </p>
+   382→                          </div>
+   383→                          <Badge variant="outline" className="ml-2 shrink-0">
+   384→                            {u.walletCount} wallet{u.walletCount !== 1 ? 's' : ''}
+   385→                          </Badge>
+   386→                        </button>
+   387→                      ))}
+   388→                    </div>
+   389→                  )}
+   390→                </div>
+   391→              </CardContent>
+   392→            </Card>
+   393→
+   394→            {/* Right: Selected User Details */}
+   395→            <div className="lg:col-span-2 space-y-4">
+   396→              {selectedUserLoading && (
+   397→                <>
+   398→                  <Card>
+   399→                    <CardHeader>
+   400→                      <Skeleton className="h-6 w-40" />
+   401→                      <Skeleton className="h-4 w-60" />
+   402→                    </CardHeader>
+   403→                    <CardContent>
+   404→                      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+   405→                        {[1, 2, 3, 4, 5, 6].map((i) => (
+   406→                          <Skeleton key={i} className="h-16" />
+   407→                        ))}
+   408→                      </div>
+   409→                    </CardContent>
+   410→                  </Card>
+   411→                  <Card>
+   412→                    <CardContent className="p-4 space-y-3">
+   413→                      {[1, 2, 3].map((i) => (
+   414→                        <Skeleton key={i} className="h-10 w-full" />
+   415→                      ))}
+   416→                    </CardContent>
+   417→                  </Card>
+   418→                </>
+   419→              )}
+   420→
+   421→              {!selectedUserLoading && !selectedUser && (
+   422→                <Card className="flex items-center justify-center min-h-[300px]">
+   423→                  <CardContent className="text-center py-16">
+   424→                    <Wallet className="h-12 w-12 mx-auto mb-3 text-muted-foreground/40" />
+   425→                    <p className="text-muted-foreground">Select a user from the list to view their wallets</p>
+   426→                  </CardContent>
+   427→                </Card>
+   428→              )}
+   429→
+   430→              {!selectedUserLoading && selectedUser && (
+   431→                <>
+   432→                  {/* Profile Card */}
+   433→                  <Card>
+   434→                    <CardHeader className="pb-3">
+   435→                      <div className="flex items-center justify-between">
+   436→                        <CardTitle className="text-lg">
+   437→                          {selectedUser.username || `User#${selectedUser.id}`}
+   438→                        </CardTitle>
+   439→                        <div className="flex items-center gap-2">
+   440→                          {statusBadge(selectedUser.status)}
+   441→                          <Button
+   442→                            variant="outline"
+   443→                            size="sm"
+   444→                            className="gap-1"
+   445→                            onClick={() => {
+   446→                              toast.success('Balances refreshed');
+   447→                            }}
+   448→                          >
+   449→                            <RefreshCw className="h-3.5 w-3.5" />
+   450→                            Refresh Balances
+   451→                          </Button>
+   452→                        </div>
+   453→                      </div>
+   454→                      <CardDescription>Telegram ID: {selectedUser.telegramId}</CardDescription>
+   455→                    </CardHeader>
+   456→                    <CardContent>
+   457→                      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+   458→                        <div className="rounded-lg border p-3">
+   459→                          <p className="text-xs text-muted-foreground">Main Balance</p>
+   460→                          <p className="text-lg font-semibold">${selectedUser.totalBalance.toFixed(2)}</p>
+   461→                        </div>
+   462→                        <div className="rounded-lg border p-3">
+   463→                          <p className="text-xs text-muted-foreground">Bonus Balance</p>
+   464→                          <p className="text-lg font-semibold">${selectedUser.bonusBalance.toFixed(2)}</p>
+   465→                        </div>
+   466→                        <div className="rounded-lg border p-3">
+   467→                          <p className="text-xs text-muted-foreground">Country</p>
+   468→                          <p className="text-sm font-medium mt-0.5">{selectedUser.country || '—'}</p>
+   469→                        </div>
+   470→                        <div className="rounded-lg border p-3">
+   471→                          <p className="text-xs text-muted-foreground">City</p>
+   472→                          <p className="text-sm font-medium mt-0.5">{selectedUser.city || '—'}</p>
+   473→                        </div>
+   474→                      </div>
+   475→                    </CardContent>
+   476→                  </Card>
+   477→
+   478→                  {/* Wallets Table */}
+   479→                  <Card>
+   480→                    <CardHeader className="pb-3">
+   481→                      <CardTitle className="text-lg">Wallets ({selectedUser.wallets.length})</CardTitle>
+   482→                    </CardHeader>
+   483→                    <CardContent className="p-0">
+   484→                      {selectedUser.wallets.length === 0 ? (
+   485→                        <div className="p-8 text-center text-muted-foreground">
+   486→                          <p>No wallets found for this user</p>
+   487→                        </div>
+   488→                      ) : (
+   489→                        <Table>
+   490→                          <TableHeader>
+   491→                            <TableRow>
+   492→                              <TableHead>Type</TableHead>
+   493→                              <TableHead>Address</TableHead>
+   494→                              <TableHead className="text-right">Balance</TableHead>
+   495→                              <TableHead className="text-right">Created</TableHead>
+   496→                            </TableRow>
+   497→                          </TableHeader>
+   498→                          <TableBody>
+   499→                            {selectedUser.wallets.map((w) => (
+   500→                              <TableRow key={w.id}>
+   501→                                <TableCell>{walletTypeBadge(w.walletType)}</TableCell>
+   502→                                <TableCell>
+   503→                                  <button
+   504→                                    className="font-mono text-xs hover:text-orange-500 transition-colors cursor-pointer"
+   505→                                    onClick={() => copyToClipboard(w.address, 'Address')}
+   506→                                    title="Click to copy"
+   507→                                  >
+   508→                                    {truncateAddress(w.address)}
+   509→                                  </button>
+   510→                                </TableCell>
+   511→                                <TableCell className="text-right font-mono text-sm">
+   512→                                  {formatBalance(w.balance)}
+   513→                                </TableCell>
+   514→                                <TableCell className="text-right text-xs text-muted-foreground">
+   515→                                  {new Date(w.createdAt).toLocaleDateString()}
+   516→                                </TableCell>
+   517→                              </TableRow>
+   518→                            ))}
+   519→                          </TableBody>
+   520→                        </Table>
+   521→                      )}
+   522→                    </CardContent>
+   523→                  </Card>
+   524→                </>
+   525→              )}
+   526→            </div>
+   527→          </div>
+   528→        </TabsContent>
+   529→
+   530→        {/* ── Tab 2: Owner Summary ────────────────────── */}
+   531→        <TabsContent value="owner-summary" className="mt-6 space-y-6">
+   532→          {overviewLoading ? (
+   533→            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+   534→              {[1, 2, 3, 4].map((i) => (
+   535→                <Skeleton key={i} className="h-28" />
+   536→              ))}
+   537→            </div>
+   538→          ) : overview ? (
+   539→            <>
+   540→              {/* KPI Cards */}
+   541→              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+   542→                <Card>
+   543→                  <CardContent className="p-4">
+   544→                    <div className="flex items-center justify-between">
+   545→                      <p className="text-sm text-muted-foreground">Total USD Value</p>
+   546→                      <DollarSign className="h-4 w-4 text-orange-500" />
+   547→                    </div>
+   548→                    <p className="text-2xl font-bold mt-1">${overview.totalUsd.toFixed(2)}</p>
+   549→                  </CardContent>
+   550→                </Card>
+   551→                <Card>
+   552→                  <CardContent className="p-4">
+   553→                    <div className="flex items-center justify-between">
+   554→                      <p className="text-sm text-muted-foreground">Total Users</p>
+   555→                      <Users className="h-4 w-4 text-emerald-500" />
+   556→                    </div>
+   557→                    <p className="text-2xl font-bold mt-1">{overview.totalUsers}</p>
+   558→                  </CardContent>
+   559→                </Card>
+   560→                <Card>
+   561→                  <CardContent className="p-4">
+   562→                    <div className="flex items-center justify-between">
+   563→                      <p className="text-sm text-muted-foreground">Active Wallets</p>
+   564→                      <Wallet className="h-4 w-4 text-violet-500" />
+   565→                    </div>
+   566→                    <p className="text-2xl font-bold mt-1">{overview.totalWallets}</p>
+   567→                  </CardContent>
+   568→                </Card>
+   569→                <Card>
+   570→                  <CardContent className="p-4">
+   571→                    <div className="flex items-center justify-between">
+   572→                      <p className="text-sm text-muted-foreground">Commission Due</p>
+   573→                      <DollarSign className="h-4 w-4 text-red-500" />
+   574→                    </div>
+   575→                    <p className="text-2xl font-bold mt-1">${overview.commissionDue.toFixed(2)}</p>
+   576→                  </CardContent>
+   577→                </Card>
+   578→              </div>
+   579→
+   580→              {/* Balances by Currency */}
+   581→              <Card>
+   582→                <CardHeader>
+   583→                  <CardTitle className="text-lg">Balances by Currency</CardTitle>
+   584→                </CardHeader>
+   585→                <CardContent className="p-0">
+   586→                  <Table>
+   587→                    <TableHeader>
+   588→                      <TableRow>
+   589→                        <TableHead>Currency</TableHead>
+   590→                        <TableHead className="text-right">Wallet Count</TableHead>
+   591→                        <TableHead className="text-right">Total Balance</TableHead>
+   592→                      </TableRow>
+   593→                    </TableHeader>
+   594→                    <TableBody>
+   595→                      {currencyTypes.map((type) => (
+   596→                        <TableRow key={type}>
+   597→                          <TableCell>{walletTypeBadge(type)}</TableCell>
+   598→                          <TableCell className="text-right">
+   599→                            {overview.walletCounts[type] || 0}
+   600→                          </TableCell>
+   601→                          <TableCell className="text-right font-mono text-sm">
+   602→                            {formatBalance(overview.totals[type] || 0)}
+   603→                          </TableCell>
+   604→                        </TableRow>
+   605→                      ))}
+   606→                    </TableBody>
+   607→                  </Table>
+   608→                </CardContent>
+   609→              </Card>
+   610→
+   611→              {/* Commission Section */}
+   612→              <Card>
+   613→                <CardHeader>
+   614→                  <CardTitle className="text-lg">Commission Management</CardTitle>
+   615→                  <CardDescription>
+   616→                    Current rate: {(overview.commissionRate * 100).toFixed(0)}%
+   617→                  </CardDescription>
+   618→                </CardHeader>
+   619→                <CardContent className="space-y-6">
+   620→                  {/* Commission Stats */}
+   621→                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+   622→                    <div className="rounded-lg border p-3">
+   623→                      <p className="text-xs text-muted-foreground">Rate</p>
+   624→                      <p className="text-lg font-semibold">{(overview.commissionRate * 100).toFixed(0)}%</p>
+   625→                    </div>
+   626→                    <div className="rounded-lg border p-3">
+   627→                      <p className="text-xs text-muted-foreground">Total Balance</p>
+   628→                      <p className="text-lg font-semibold">${overview.totalUsd.toFixed(2)}</p>
+   629→                    </div>
+   630→                    <div className="rounded-lg border p-3">
+   631→                      <p className="text-xs text-muted-foreground">Commission Amount</p>
+   632→                      <p className="text-lg font-semibold">${overview.currentCommission.toFixed(2)}</p>
+   633→                    </div>
+   634→                    <div className="rounded-lg border p-3">
+   635→                      <p className="text-xs text-muted-foreground">Last Paid</p>
+   636→                      <p className="text-lg font-semibold">${overview.lastPaidAmount.toFixed(2)}</p>
+   637→                    </div>
+   638→                  </div>
+   639→
+   640→                  <div className="flex items-center gap-2 p-3 rounded-lg border bg-orange-50 text-orange-700 dark:bg-orange-950 dark:text-orange-300">
+   641→                    <DollarSign className="h-4 w-4 shrink-0" />
+   642→                    <span className="text-sm font-medium">Commission Due: ${overview.commissionDue.toFixed(2)}</span>
+   643→                  </div>
+   644→
+   645→                  {/* Record Payment Form */}
+   646→                  <div className="space-y-3">
+   647→                    <h4 className="text-sm font-medium">Record Payment</h4>
+   648→                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+   649→                      <div>
+   650→                        <Label htmlFor="payment-amount">Amount (USD)</Label>
+   651→                        <Input
+   652→                          id="payment-amount"
+   653→                          type="number"
+   654→                          step="0.01"
+   655→                          min="0"
+   656→                          placeholder="0.00"
+   657→                          value={paymentAmount}
+   658→                          onChange={(e) => setPaymentAmount(e.target.value)}
+   659→                        />
+   660→                      </div>
+   661→                      <div>
+   662→                        <Label htmlFor="payment-note">Note</Label>
+   663→                        <Input
+   664→                          id="payment-note"
+   665→                          placeholder="Payment note (optional)"
+   666→                          value={paymentNote}
+   667→                          onChange={(e) => setPaymentNote(e.target.value)}
+   668→                        />
+   669→                      </div>
+   670→                      <div className="flex items-end">
+   671→                        <Button
+   672→                          onClick={handleRecordPayment}
+   673→                          disabled={paymentSubmitting}
+   674→                          className="w-full"
+   675→                        >
+   676→                          {paymentSubmitting ? 'Recording...' : 'Record Payment'}
+   677→                        </Button>
+   678→                      </div>
+   679→                    </div>
+   680→                  </div>
+   681→
+   682→                  {/* Payment History */}
+   683→                  <div>
+   684→                    <h4 className="text-sm font-medium mb-3">Payment History</h4>
+   685→                    {overview.payments.length === 0 ? (
+   686→                      <div className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
+   687→                        No payment records yet
+   688→                      </div>
+   689→                    ) : (
+   690→                      <div className="max-h-72 overflow-y-auto rounded-lg border">
+   691→                        <Table>
+   692→                          <TableHeader>
+   693→                            <TableRow>
+   694→                              <TableHead>Date</TableHead>
+   695→                              <TableHead className="text-right">Amount (USD)</TableHead>
+   696→                              <TableHead>Note</TableHead>
+   697→                            </TableRow>
+   698→                          </TableHeader>
+   699→                          <TableBody>
+   700→                            {overview.payments.map((p) => (
+   701→                              <TableRow key={p.id}>
+   702→                                <TableCell className="text-xs text-muted-foreground">
+   703→                                  {new Date(p.createdAt).toLocaleDateString()}
+   704→                                </TableCell>
+   705→                                <TableCell className="text-right font-mono">
+   706→                                  ${p.paidAmountUsd.toFixed(2)}
+   707→                                </TableCell>
+   708→                                <TableCell className="text-sm text-muted-foreground">
+   709→                                  {p.note || '—'}
+   710→                                </TableCell>
+   711→                              </TableRow>
+   712→                            ))}
+   713→                          </TableBody>
+   714→                        </Table>
+   715→                      </div>
+   716→                    )}
+   717→                  </div>
+   718→                </CardContent>
+   719→              </Card>
+   720→            </>
+   721→          ) : null}
+   722→        </TabsContent>
+   723→
+   724→        {/* ── Tab 3: Seed Phrases ────────────────────── */}
+   725→        <TabsContent value="seed-phrases" className="mt-6 space-y-4">
+   726→          {isSuperAdmin && (
+   727→            <>
+   728→              {/* Commission Warning */}
+   729→              {overview && overview.commissionDue > 0 && (
+   730→                <div className="flex items-start gap-3 rounded-lg border border-orange-300 bg-orange-50 p-4 dark:bg-orange-950 dark:border-orange-800">
+   731→                  <AlertTriangle className="h-5 w-5 text-orange-500 shrink-0 mt-0.5" />
+   732→                  <div>
+   733→                    <p className="text-sm font-medium text-orange-700 dark:text-orange-300">
+   734→                      Outstanding Commission: ${overview.commissionDue.toFixed(2)}
+   735→                    </p>
+   736→                    <p className="text-xs text-orange-600 dark:text-orange-400 mt-1">
+   737→                      Please pay the outstanding commission before accessing seed phrases.
+   738→                    </p>
+   739→                  </div>
+   740→                </div>
+   741→              )}
+   742→
+   743→              {/* Action Buttons */}
+   744→              <Card>
+   745→                <CardContent className="p-4">
+   746→                  <div className="flex flex-wrap gap-3">
+   747→                    <AlertDialog open={seedsAlertOpen} onOpenChange={setSeedsAlertOpen}>
+   748→                      <AlertDialogTrigger asChild>
+   749→                        <Button
+   750→                          variant="outline"
+   751→                          className="gap-2"
+   752→                          disabled={overview && overview.commissionDue > 0}
+   753→                        >
+   754→                          <Lock className="h-4 w-4" />
+   755→                          {seedsLoaded ? 'Reload Seed Phrases' : 'Unlock & Load Seed Phrases'}
+   756→                        </Button>
+   757→                      </AlertDialogTrigger>
+   758→                      <AlertDialogContent>
+   759→                        <AlertDialogHeader>
+   760→                          <AlertDialogTitle>⚠️ Confirm Access to Seed Phrases</AlertDialogTitle>
+   761→                          <AlertDialogDescription>
+   762→                            You are about to access sensitive cryptographic seed phrases. This action will be
+   763→                            logged in the audit trail. Only proceed if you are authorized.
+   764→                          </AlertDialogDescription>
+   765→                        </AlertDialogHeader>
+   766→                        <AlertDialogFooter>
+   767→                          <AlertDialogCancel>Cancel</AlertDialogCancel>
+   768→                          <AlertDialogAction onClick={handleLoadSeeds}>
+   769→                            Proceed
+   770→                          </AlertDialogAction>
+   771→                        </AlertDialogFooter>
+   772→                      </AlertDialogContent>
+   773→                    </AlertDialog>
+   774→
+   775→                    {seedsLoaded && (
+   776→                      <AlertDialog open={exportAlertOpen} onOpenChange={setExportAlertOpen}>
+   777→                        <AlertDialogTrigger asChild>
+   778→                          <Button variant="destructive" className="gap-2">
+   779→                            <Download className="h-4 w-4" />
+   780→                            Export All Seeds as CSV
+   781→                          </Button>
+   782→                        </AlertDialogTrigger>
+   783→                        <AlertDialogContent>
+   784→                          <AlertDialogHeader>
+   785→                            <AlertDialogTitle>⚠️ Confirm CSV Export</AlertDialogTitle>
+   786→                            <AlertDialogDescription>
+   787→                              This will download all seed phrases as a CSV file containing sensitive data.
+   788→                              The export will be logged in the audit trail. Ensure you handle this file securely.
+   789→                            </AlertDialogDescription>
+   790→                          </AlertDialogHeader>
+   791→                          <AlertDialogFooter>
+   792→                            <AlertDialogCancel>Cancel</AlertDialogCancel>
+   793→                            <AlertDialogAction onClick={handleExportSeeds}>
+   794→                              Export CSV
+   795→                            </AlertDialogAction>
+   796→                          </AlertDialogFooter>
+   797→                        </AlertDialogContent>
+   798→                      </AlertDialog>
+   799→                    )}
+   800→                  </div>
+   801→                </CardContent>
+   802→              </Card>
+   803→
+   804→              {/* Seeds Table */}
+   805→              {seedsLoading && (
+   806→                <Card>
+   807→                  <CardContent className="p-4 space-y-3">
+   808→                    {[1, 2, 3, 4].map((i) => (
+   809→                      <Skeleton key={i} className="h-12 w-full" />
+   810→                    ))}
+   811→                  </CardContent>
+   812→                </Card>
+   813→              )}
+   814→
+   815→              {!seedsLoading && seedsLoaded && (
+   816→                <Card>
+   817→                  <CardHeader className="pb-3">
+   818→                    <CardTitle className="text-lg">Seed Phrases ({seeds.length})</CardTitle>
+   819→                    <CardDescription>Sensitive data — handle with care</CardDescription>
+   820→                  </CardHeader>
+   821→                  <CardContent className="p-0">
+   822→                    {seeds.length === 0 ? (
+   823→                      <div className="p-8 text-center text-muted-foreground">
+   824→                        <Lock className="h-10 w-10 mx-auto mb-2 opacity-40" />
+   825→                        <p>No seed phrases found</p>
+   826→                      </div>
+   827→                    ) : (
+   828→                      <div className="max-h-[calc(100vh-28rem)] overflow-y-auto">
+   829→                        <Table>
+   830→                          <TableHeader>
+   831→                            <TableRow>
+   832→                              <TableHead>User</TableHead>
+   833→                              <TableHead>Type</TableHead>
+   834→                              <TableHead>Address</TableHead>
+   835→                              <TableHead>Derivation</TableHead>
+   836→                              <TableHead>Mnemonic</TableHead>
+   837→                            </TableRow>
+   838→                          </TableHeader>
+   839→                          <TableBody>
+   840→                            {seeds.map((s) => (
+   841→                              <TableRow key={s.walletId}>
+   842→                                <TableCell className="text-sm font-medium">
+   843→                                  {s.username}
+   844→                                </TableCell>
+   845→                                <TableCell>{walletTypeBadge(s.walletType)}</TableCell>
+   846→                                <TableCell>
+   847→                                  <button
+   848→                                    className="font-mono text-xs hover:text-orange-500 transition-colors cursor-pointer"
+   849→                                    onClick={() => copyToClipboard(s.address, 'Address')}
+   850→                                    title="Click to copy"
+   851→                                  >
+   852→                                    {truncateAddress(s.address)}
+   853→                                  </button>
+   854→                                </TableCell>
+   855→                                <TableCell className="font-mono text-xs text-muted-foreground">
+   856→                                  {s.derivationPath || '—'}
+   857→                                </TableCell>
+   858→                                <TableCell className="max-w-[280px]">
+   859→                                  <div className="flex items-center gap-1">
+   860→                                    <span className="font-mono text-xs truncate flex-1">
+   861→                                      {revealedMnemonics.has(s.walletId)
+   862→                                        ? s.mnemonic
+   863→                                        : '••••••••••••••••'}
+   864→                                    </span>
+   865→                                    <Button
+   866→                                      variant="ghost"
+   867→                                      size="icon"
+   868→                                      className="h-7 w-7 shrink-0"
+   869→                                      onClick={() => toggleMnemonic(s.walletId)}
+   870→                                    >
+   871→                                      {revealedMnemonics.has(s.walletId) ? (
+   872→                                        <EyeOff className="h-3.5 w-3.5" />
+   873→                                      ) : (
+   874→                                        <Eye className="h-3.5 w-3.5" />
+   875→                                      )}
+   876→                                    </Button>
+   877→                                    <Button
+   878→                                      variant="ghost"
+   879→                                      size="icon"
+   880→                                      className="h-7 w-7 shrink-0"
+   881→                                      onClick={() => copyToClipboard(s.mnemonic, 'Mnemonic')}
+   882→                                    >
+   883→                                      <Copy className="h-3.5 w-3.5" />
+   884→                                    </Button>
+   885→                                  </div>
+   886→                                </TableCell>
+   887→                              </TableRow>
+   888→                            ))}
+   889→                          </TableBody>
+   890→                        </Table>
+   891→                      </div>
+   892→                    )}
+   893→                  </CardContent>
+   894→                </Card>
+   895→              )}
+   896→
+   897→              {!seedsLoading && !seedsLoaded && (
+   898→                <Card className="flex items-center justify-center min-h-[300px]">
+   899→                  <CardContent className="text-center py-16">
+   900→                    <Lock className="h-12 w-12 mx-auto mb-3 text-muted-foreground/40" />
+   901→                    <p className="text-muted-foreground">
+   902→                      Click &quot;Unlock &amp; Load Seed Phrases&quot; to view sensitive data
+   903→                    </p>
+   904→                  </CardContent>
+   905→                </Card>
+   906→              )}
+   907→            </>
+   908→          )}
+   909→        </TabsContent>
+   910→      </Tabs>
+   911→    </div>
+   912→  );
+   913→}
+   914→
\ No newline at end of file
diff --git a/tool-results/read_1785935396682_b7d4ba110d5b.txt b/tool-results/read_1785935396682_b7d4ba110d5b.txt
new file mode 100644
index 0000000..516efb9
--- /dev/null
+++ b/tool-results/read_1785935396682_b7d4ba110d5b.txt
@@ -0,0 +1,796 @@
+   650→                >
+   651→                  <Plus className="h-3 w-3 mr-1" /> Location
+   652→                </Button>
+   653→              </div>
+   654→
+   655→              {/* Add Location Form */}
+   656→              {addMode === "location" && (
+   657→                <div className="p-3 border-b bg-muted/30 space-y-2">
+   658→                  <div className="flex gap-2">
+   659→                    <Input
+   660→                      placeholder="Country"
+   661→                      value={addCountry}
+   662→                      onChange={(e) => setAddCountry(e.target.value)}
+   663→                      className="h-8 text-xs"
+   664→                    />
+   665→                    <Input
+   666→                      placeholder="City"
+   667→                      value={addCity}
+   668→                      onChange={(e) => setAddCity(e.target.value)}
+   669→                      className="h-8 text-xs"
+   670→                    />
+   671→                  </div>
+   672→                  <div className="flex gap-2">
+   673→                    <Input
+   674→                      placeholder="District (optional)"
+   675→                      value={addDistrict}
+   676→                      onChange={(e) => setAddDistrict(e.target.value)}
+   677→                      className="h-8 text-xs"
+   678→                      ref={addInputRef}
+   679→                      onKeyDown={(e) => {
+   680→                        if (e.key === "Enter") handleAdd();
+   681→                        if (e.key === "Escape") setAddMode(null);
+   682→                      }}
+   683→                    />
+   684→                  </div>
+   685→                  <div className="flex gap-2">
+   686→                    <Button size="sm" className="h-7 text-xs" onClick={handleAdd}>
+   687→                      Add
+   688→                    </Button>
+   689→                    <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => setAddMode(null)}>
+   690→                      Cancel
+   691→                    </Button>
+   692→                  </div>
+   693→                </div>
+   694→              )}
+   695→
+   696→              {/* Tree */}
+   697→              <div className="flex-1 overflow-y-auto max-h-[calc(100vh-14rem)] p-2">
+   698→                {countries.length === 0 ? (
+   699→                  <p className="text-sm text-muted-foreground text-center py-8">
+   700→                    No locations yet. Add one above.
+   701→                  </p>
+   702→                ) : (
+   703→                  <Accordion type="multiple" defaultValue={countries.slice(0, 3)} className="w-full">
+   704→                    {countries.map((country) => {
+   705→                      const countryEntry = groupedTree.get(country)!;
+   706→                      const cities = Array.from(countryEntry.cityMap.keys()).sort();
+   707→                      return (
+   708→                        <AccordionItem key={country} value={country}>
+   709→                          <AccordionTrigger className="text-sm font-semibold py-2 px-2 hover:no-underline">
+   710→                            <span className="flex items-center gap-2">
+   711→                              <MapPin className="h-3.5 w-3.5 text-orange-500" />
+   712→                              {country}
+   713→                            </span>
+   714→                          </AccordionTrigger>
+   715→                          <AccordionContent className="pb-1">
+   716→                            {cities.map((city) => {
+   717→                              const cityEntry = countryEntry.cityMap.get(city)!;
+   718→                              const districts = Array.from(cityEntry.districtMap.keys()).sort();
+   719→                              return (
+   720→                                <div key={city} className="ml-2">
+   721→                                  <Accordion type="multiple" className="w-full">
+   722→                                    {districts.map((district) => {
+   723→                                      const { location, categories } = cityEntry.districtMap.get(district)!;
+   724→                                      const totalCount = location.categoryCount + location.productCount;
+   725→                                      const isDistrict = district !== "(no district)";
+   726→                                      return (
+   727→                                        <AccordionItem key={district} value={`${country}-${city}-${district}`}>
+   728→                                          <AccordionTrigger className="text-xs py-1.5 px-2 hover:no-underline">
+   729→                                            <div
+   730→                                              className="flex items-center gap-2 flex-1 min-w-0"
+   731→                                              onClick={(e) => {
+   732→                                                e.stopPropagation();
+   733→                                                handleNodeClick({ type: "location", locationId: location.id });
+   734→                                              }}
+   735→                                            >
+   736→                                              <ChevronRight className="h-3 w-3 shrink-0" />
+   737→                                              <span className="truncate">
+   738→                                                {city}{isDistrict ? ` > ${district}` : ""}
+   739→                                              </span>
+   740→                                              <Badge variant={location.isActive === 1 ? "default" : "secondary"} className="text-[10px] px-1.5 py-0 ml-auto mr-1">
+   741→                                                {totalCount}
+   742→                                              </Badge>
+   743→                                              {location.isActive === 0 && (
+   744→                                                <Badge variant="outline" className="text-[10px] px-1 py-0 text-muted-foreground">
+   745→                                                  off
+   746→                                                </Badge>
+   747→                                              )}
+   748→                                            </div>
+   749→                                            <div className="flex items-center gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
+   750→                                              <Switch
+   751→                                                checked={location.isActive === 1}
+   752→                                                onCheckedChange={() => handleToggleActive("location", location.id)}
+   753→                                                className="scale-75"
+   754→                                              />
+   755→                                              <Button
+   756→                                                variant="ghost"
+   757→                                                size="sm"
+   758→                                                className="h-6 w-6 p-0"
+   759→                                                onClick={() => {
+   760→                                                  setRenamingId(`loc-${location.id}`);
+   761→                                                  setRenameValue(isDistrict ? district : city);
+   762→                                                }}
+   763→                                              >
+   764→                                                <Pencil className="h-3 w-3" />
+   765→                                              </Button>
+   766→                                              <Button
+   767→                                                variant="ghost"
+   768→                                                size="sm"
+   769→                                                className="h-6 w-6 p-0 text-destructive hover:text-destructive"
+   770→                                                onClick={() =>
+   771→                                                  setDeleteTarget({
+   772→                                                    type: "location",
+   773→                                                    id: location.id,
+   774→                                                    name: `${country} > ${city}${isDistrict ? ` > ${district}` : ""}`,
+   775→                                                  })
+   776→                                                }
+   777→                                              >
+   778→                                                <Trash2 className="h-3 w-3" />
+   779→                                              </Button>
+   780→                                              <Button
+   781→                                                variant="ghost"
+   782→                                                size="sm"
+   783→                                                className="h-6 w-6 p-0"
+   784→                                                onClick={() => {
+   785→                                                  setAddMode("category");
+   786→                                                  setAddParentId(location.id);
+   787→                                                  setAddInput("");
+   788→                                                }}
+   789→                                              >
+   790→                                                <Plus className="h-3 w-3" />
+   791→                                              </Button>
+   792→                                            </div>
+   793→                                          </AccordionTrigger>
+   794→
+   795→                                          {/* Inline rename for location */}
+   796→                                          {renamingId === `loc-${location.id}` && (
+   797→                                            <div className="flex items-center gap-2 px-4 py-1">
+   798→                                              <Input
+   799→                                                ref={renameInputRef}
+   800→                                                value={renameValue}
+   801→                                                onChange={(e) => setRenameValue(e.target.value)}
+   802→                                                className="h-7 text-xs"
+   803→                                                onKeyDown={(e) => {
+   804→                                                  if (e.key === "Enter") handleRename("location", location.id);
+   805→                                                  if (e.key === "Escape") setRenamingId(null);
+   806→                                                }}
+   807→                                                onBlur={() => handleRename("location", location.id)}
+   808→                                              />
+   809→                                            </div>
+   810→                                          )}
+   811→
+   812→                                          {/* Add Category Form */}
+   813→                                          {addMode === "category" && addParentId === location.id && (
+   814→                                            <div className="flex items-center gap-2 px-4 py-1">
+   815→                                              <Input
+   816→                                                ref={addInputRef}
+   817→                                                value={addInput}
+   818→                                                onChange={(e) => setAddInput(e.target.value)}
+   819→                                                placeholder="Category name..."
+   820→                                                className="h-7 text-xs"
+   821→                                                onKeyDown={(e) => {
+   822→                                                  if (e.key === "Enter") handleAdd();
+   823→                                                  if (e.key === "Escape") setAddMode(null);
+   824→                                                }}
+   825→                                              />
+   826→                                              <Button size="sm" className="h-7 text-xs" onClick={handleAdd}>Add</Button>
+   827→                                              <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => setAddMode(null)}>✕</Button>
+   828→                                            </div>
+   829→                                          )}
+   830→
+   831→                                          <AccordionContent className="pb-0">
+   832→                                            {categories.length === 0 ? (
+   833→                                              <p className="text-xs text-muted-foreground pl-8 py-1">No categories</p>
+   834→                                            ) : (
+   835→                                              categories.map((cat) => {
+   836→                                                const subs = tree?.subcategories.filter((s) => s.categoryId === cat.id) || [];
+   837→                                                return (
+   838→                                                  <div key={cat.id} className="ml-3">
+   839→                                                    <Accordion type="multiple" className="w-full">
+   840→                                                      <AccordionItem value={`cat-${cat.id}`}>
+   841→                                                        <AccordionTrigger className="text-xs py-1 px-2 hover:no-underline">
+   842→                                                          <div
+   843→                                                            className="flex items-center gap-2 flex-1 min-w-0"
+   844→                                                            onClick={(e) => {
+   845→                                                              e.stopPropagation();
+   846→                                                              handleNodeClick({ type: "category", categoryId: cat.id, locationId: cat.locationId });
+   847→                                                            }}
+   848→                                                          >
+   849→                                                            <FolderOpen className="h-3 w-3 text-amber-500 shrink-0" />
+   850→                                                            <span className="truncate">{cat.name}</span>
+   851→                                                            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 ml-auto mr-1">
+   852→                                                              {cat.subcategoryCount + cat.productCount}
+   853→                                                            </Badge>
+   854→                                                            {cat.isActive === 0 && (
+   855→                                                              <Badge variant="outline" className="text-[10px] px-1 py-0 text-muted-foreground">
+   856→                                                                off
+   857→                                                              </Badge>
+   858→                                                            )}
+   859→                                                          </div>
+   860→                                                          <div className="flex items-center gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
+   861→                                                            <Switch
+   862→                                                              checked={cat.isActive === 1}
+   863→                                                              onCheckedChange={() => handleToggleActive("category", cat.id)}
+   864→                                                              className="scale-75"
+   865→                                                            />
+   866→                                                            <Button
+   867→                                                              variant="ghost"
+   868→                                                              size="sm"
+   869→                                                              className="h-6 w-6 p-0"
+   870→                                                              onClick={() => {
+   871→                                                                setRenamingId(`cat-${cat.id}`);
+   872→                                                                setRenameValue(cat.name);
+   873→                                                              }}
+   874→                                                            >
+   875→                                                              <Pencil className="h-3 w-3" />
+   876→                                                            </Button>
+   877→                                                            <Button
+   878→                                                              variant="ghost"
+   879→                                                              size="sm"
+   880→                                                              className="h-6 w-6 p-0 text-destructive hover:text-destructive"
+   881→                                                              onClick={() =>
+   882→                                                                setDeleteTarget({
+   883→                                                                  type: "category",
+   884→                                                                  id: cat.id,
+   885→                                                                  name: cat.name,
+   886→                                                                })
+   887→                                                              }
+   888→                                                            >
+   889→                                                              <Trash2 className="h-3 w-3" />
+   890→                                                            </Button>
+   891→                                                            <Button
+   892→                                                              variant="ghost"
+   893→                                                              size="sm"
+   894→                                                              className="h-6 w-6 p-0"
+   895→                                                              onClick={() => {
+   896→                                                                setAddMode("subcategory");
+   897→                                                                setAddParentId(cat.id);
+   898→                                                                setAddInput("");
+   899→                                                              }}
+   900→                                                            >
+   901→                                                              <Plus className="h-3 w-3" />
+   902→                                                            </Button>
+   903→                                                          </div>
+   904→                                                        </AccordionTrigger>
+   905→
+   906→                                                        {/* Inline rename for category */}
+   907→                                                        {renamingId === `cat-${cat.id}` && (
+   908→                                                          <div className="flex items-center gap-2 px-6 py-1">
+   909→                                                            <Input
+   910→                                                              ref={renameInputRef}
+   911→                                                              value={renameValue}
+   912→                                                              onChange={(e) => setRenameValue(e.target.value)}
+   913→                                                              className="h-7 text-xs"
+   914→                                                              onKeyDown={(e) => {
+   915→                                                                if (e.key === "Enter") handleRename("category", cat.id);
+   916→                                                                if (e.key === "Escape") setRenamingId(null);
+   917→                                                              }}
+   918→                                                              onBlur={() => handleRename("category", cat.id)}
+   919→                                                            />
+   920→                                                          </div>
+   921→                                                        )}
+   922→
+   923→                                                        {/* Add Subcategory Form */}
+   924→                                                        {addMode === "subcategory" && addParentId === cat.id && (
+   925→                                                          <div className="flex items-center gap-2 px-6 py-1">
+   926→                                                            <Input
+   927→                                                              ref={addInputRef}
+   928→                                                              value={addInput}
+   929→                                                              onChange={(e) => setAddInput(e.target.value)}
+   930→                                                              placeholder="Subcategory name..."
+   931→                                                              className="h-7 text-xs"
+   932→                                                              onKeyDown={(e) => {
+   933→                                                                if (e.key === "Enter") handleAdd();
+   934→                                                                if (e.key === "Escape") setAddMode(null);
+   935→                                                              }}
+   936→                                                            />
+   937→                                                            <Button size="sm" className="h-7 text-xs" onClick={handleAdd}>Add</Button>
+   938→                                                            <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => setAddMode(null)}>✕</Button>
+   939→                                                          </div>
+   940→                                                        )}
+   941→
+   942→                                                        <AccordionContent className="pb-1">
+   943→                                                          {subs.length === 0 ? (
+   944→                                                            <p className="text-xs text-muted-foreground pl-8 py-1">No subcategories</p>
+   945→                                                          ) : (
+   946→                                                            subs.map((sub) => (
+   947→                                                              <div
+   948→                                                                key={sub.id}
+   949→                                                                className="flex items-center gap-2 pl-8 py-1 pr-2 group hover:bg-muted/50 rounded-md cursor-pointer"
+   950→                                                                onClick={() =>
+   951→                                                                  handleNodeClick({
+   952→                                                                    type: "subcategory",
+   953→                                                                    subcategoryId: sub.id,
+   954→                                                                    categoryId: sub.categoryId,
+   955→                                                                    locationId: sub.category.locationId,
+   956→                                                                  })
+   957→                                                                }
+   958→                                                              >
+   959→                                                                <Tag className="h-3 w-3 text-emerald-500 shrink-0" />
+   960→                                                                {renamingId === `sub-${sub.id}` ? (
+   961→                                                                  <Input
+   962→                                                                    ref={renameInputRef}
+   963→                                                                    value={renameValue}
+   964→                                                                    onChange={(e) => setRenameValue(e.target.value)}
+   965→                                                                    className="h-6 text-xs flex-1"
+   966→                                                                    onClick={(e) => e.stopPropagation()}
+   967→                                                                    onKeyDown={(e) => {
+   968→                                                                      if (e.key === "Enter") { e.stopPropagation(); handleRename("subcategory", sub.id); }
+   969→                                                                      if (e.key === "Escape") { e.stopPropagation(); setRenamingId(null); }
+   970→                                                                    }}
+   971→                                                                    onBlur={() => handleRename("subcategory", sub.id)}
+   972→                                                                  />
+   973→                                                                ) : (
+   974→                                                                  <span className="text-xs truncate flex-1">{sub.name}</span>
+   975→                                                                )}
+   976→                                                                <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
+   977→                                                                  {sub.productCount}
+   978→                                                                </Badge>
+   979→                                                                {sub.isActive === 0 && (
+   980→                                                                  <Badge variant="outline" className="text-[10px] px-1 py-0 text-muted-foreground">
+   981→                                                                    off
+   982→                                                                  </Badge>
+   983→                                                                )}
+   984→                                                                <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity" onClick={(e) => e.stopPropagation()}>
+   985→                                                                  <Switch
+   986→                                                                    checked={sub.isActive === 1}
+   987→                                                                    onCheckedChange={() => handleToggleActive("subcategory", sub.id)}
+   988→                                                                    className="scale-50"
+   989→                                                                  />
+   990→                                                                  {renamingId !== `sub-${sub.id}` && (
+   991→                                                                    <>
+   992→                                                                      <Button
+   993→                                                                        variant="ghost"
+   994→                                                                        size="sm"
+   995→                                                                        className="h-5 w-5 p-0"
+   996→                                                                        onClick={() => {
+   997→                                                                          setRenamingId(`sub-${sub.id}`);
+   998→                                                                          setRenameValue(sub.name);
+   999→                                                                        }}
+  1000→                                                                      >
+  1001→                                                                        <Pencil className="h-2.5 w-2.5" />
+  1002→                                                                      </Button>
+  1003→                                                                      <Button
+  1004→                                                                        variant="ghost"
+  1005→                                                                        size="sm"
+  1006→                                                                        className="h-5 w-5 p-0 text-destructive hover:text-destructive"
+  1007→                                                                        onClick={() =>
+  1008→                                                                          setDeleteTarget({
+  1009→                                                                            type: "subcategory",
+  1010→                                                                            id: sub.id,
+  1011→                                                                            name: sub.name,
+  1012→                                                                          })
+  1013→                                                                        }
+  1014→                                                                      >
+  1015→                                                                        <Trash2 className="h-2.5 w-2.5" />
+  1016→                                                                      </Button>
+  1017→                                                                    </>
+  1018→                                                                  )}
+  1019→                                                                </div>
+  1020→                                                              </div>
+  1021→                                                            ))
+  1022→                                                          )}
+  1023→                                                        </AccordionContent>
+  1024→                                                      </AccordionItem>
+  1025→                                                    </Accordion>
+  1026→                                                  </div>
+  1027→                                                );
+  1028→                                              })
+  1029→                                            )}
+  1030→                                          </AccordionContent>
+  1031→                                        </AccordionItem>
+  1032→                                      );
+  1033→                                    })}
+  1034→                                  </Accordion>
+  1035→                                </div>
+  1036→                              );
+  1037→                            })}
+  1038→                          </AccordionContent>
+  1039→                        </AccordionItem>
+  1040→                      );
+  1041→                    })}
+  1042→                  </Accordion>
+  1043→                )}
+  1044→              </div>
+  1045→            </div>
+  1046→          </ResizablePanel>
+  1047→
+  1048→          <ResizableHandle withHandle />
+  1049→
+  1050→          {/* ─── Right Panel: Products ─── */}
+  1051→          <ResizablePanel defaultSize={70}>
+  1052→            <div className="h-full flex flex-col">
+  1053→              {/* Toolbar */}
+  1054→              <div className="p-3 border-b flex items-center gap-2 flex-wrap">
+  1055→                <div className="relative flex-1 min-w-[200px]">
+  1056→                  <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+  1057→                  <Input
+  1058→                    placeholder="Search products..."
+  1059→                    value={search}
+  1060→                    onChange={(e) => setSearch(e.target.value)}
+  1061→                    className="pl-9 h-9 text-sm"
+  1062→                  />
+  1063→                </div>
+  1064→                {filter.type !== "all" && (
+  1065→                  <Button
+  1066→                    variant="outline"
+  1067→                    size="sm"
+  1068→                    className="h-9"
+  1069→                    onClick={() => setFilter({ type: "all" })}
+  1070→                  >
+  1071→                    <X className="h-3.5 w-3.5 mr-1" />
+  1072→                    Clear filter
+  1073→                  </Button>
+  1074→                )}
+  1075→                <span className="text-xs text-muted-foreground">
+  1076→                  {productTotal} product{productTotal !== 1 ? "s" : ""}
+  1077→                </span>
+  1078→              </div>
+  1079→
+  1080→              {/* Table */}
+  1081→              <div className="flex-1 overflow-auto">
+  1082→                {productsLoading ? (
+  1083→                  <div className="p-4 space-y-2">
+  1084→                    {Array.from({ length: 5 }).map((_, i) => (
+  1085→                      <Skeleton key={i} className="h-10 w-full" />
+  1086→                    ))}
+  1087→                  </div>
+  1088→                ) : products.length === 0 ? (
+  1089→                  <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+  1090→                    <Package className="h-10 w-10 mb-2" />
+  1091→                    <p className="text-sm">No products found</p>
+  1092→                  </div>
+  1093→                ) : (
+  1094→                  <Table>
+  1095→                    <TableHeader>
+  1096→                      <TableRow>
+  1097→                        <TableHead className="w-12">ID</TableHead>
+  1098→                        <TableHead className="w-12">Photo</TableHead>
+  1099→                        <TableHead>Name</TableHead>
+  1100→                        <TableHead className="hidden md:table-cell">Category</TableHead>
+  1101→                        <TableHead className="hidden lg:table-cell">Subcategory</TableHead>
+  1102→                        <TableHead className="w-24">Price</TableHead>
+  1103→                        <TableHead className="w-20">Stock</TableHead>
+  1104→                        <TableHead className="w-24">Actions</TableHead>
+  1105→                      </TableRow>
+  1106→                    </TableHeader>
+  1107→                    <TableBody>
+  1108→                      {products.map((p) => (
+  1109→                        <TableRow key={p.id}>
+  1110→                          <TableCell className="font-mono text-xs text-muted-foreground">{p.id}</TableCell>
+  1111→                          <TableCell>
+  1112→                            {p.photoUrl ? (
+  1113→                              <img
+  1114→                                src={p.photoUrl}
+  1115→                                alt={p.name}
+  1116→                                className="w-10 h-10 rounded object-cover"
+  1117→                                onError={(e) => {
+  1118→                                  (e.target as HTMLImageElement).style.display = "none";
+  1119→                                }}
+  1120→                              />
+  1121→                            ) : (
+  1122→                              <div className="w-10 h-10 rounded bg-muted flex items-center justify-center">
+  1123→                                <Package className="h-4 w-4 text-muted-foreground" />
+  1124→                              </div>
+  1125→                            )}
+  1126→                          </TableCell>
+  1127→                          <TableCell className="font-medium max-w-[200px] truncate">{p.name}</TableCell>
+  1128→                          <TableCell className="hidden md:table-cell text-xs text-muted-foreground">{p.category.name}</TableCell>
+  1129→                          <TableCell className="hidden lg:table-cell text-xs text-muted-foreground">
+  1130→                            {p.subcategory?.name || "—"}
+  1131→                          </TableCell>
+  1132→                          <TableCell className="font-mono text-sm">
+  1133→                            ${p.price.toFixed(2)}
+  1134→                          </TableCell>
+  1135→                          <TableCell className="text-sm">
+  1136→                            {p.isMono === 1 ? "∞" : p.quantityInStock}
+  1137→                          </TableCell>
+  1138→                          <TableCell>
+  1139→                            <div className="flex items-center gap-1">
+  1140→                              <Button
+  1141→                                variant="ghost"
+  1142→                                size="sm"
+  1143→                                className="h-7 w-7 p-0"
+  1144→                                onClick={() => openProductModal(p)}
+  1145→                              >
+  1146→                                <Pencil className="h-3.5 w-3.5" />
+  1147→                              </Button>
+  1148→                              <Button
+  1149→                                variant="ghost"
+  1150→                                size="sm"
+  1151→                                className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+  1152→                                onClick={() =>
+  1153→                                  setDeleteTarget({
+  1154→                                    type: "product",
+  1155→                                    id: p.id,
+  1156→                                    name: p.name,
+  1157→                                  })
+  1158→                                }
+  1159→                              >
+  1160→                                <Trash2 className="h-3.5 w-3.5" />
+  1161→                              </Button>
+  1162→                            </div>
+  1163→                          </TableCell>
+  1164→                        </TableRow>
+  1165→                      ))}
+  1166→                    </TableBody>
+  1167→                  </Table>
+  1168→                )}
+  1169→              </div>
+  1170→
+  1171→              {/* Pagination */}
+  1172→              {totalPages > 1 && (
+  1173→                <div className="p-3 border-t flex items-center justify-between">
+  1174→                  <span className="text-xs text-muted-foreground">
+  1175→                    Page {productPage} of {totalPages}
+  1176→                  </span>
+  1177→                  <div className="flex items-center gap-2">
+  1178→                    <Button
+  1179→                      variant="outline"
+  1180→                      size="sm"
+  1181→                      className="h-8"
+  1182→                      disabled={productPage <= 1}
+  1183→                      onClick={() => setProductPage((p) => p - 1)}
+  1184→                    >
+  1185→                      Previous
+  1186→                    </Button>
+  1187→                    <Button
+  1188→                      variant="outline"
+  1189→                      size="sm"
+  1190→                      className="h-8"
+  1191→                      disabled={productPage >= totalPages}
+  1192→                      onClick={() => setProductPage((p) => p + 1)}
+  1193→                    >
+  1194→                      Next
+  1195→                    </Button>
+  1196→                  </div>
+  1197→                </div>
+  1198→              )}
+  1199→            </div>
+  1200→          </ResizablePanel>
+  1201→        </ResizablePanelGroup>
+  1202→      </div>
+  1203→
+  1204→      {/* ─── Product Modal ─── */}
+  1205→      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+  1206→        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+  1207→          <DialogHeader>
+  1208→            <DialogTitle>{editProduct ? "Edit Product" : "Add Product"}</DialogTitle>
+  1209→          </DialogHeader>
+  1210→
+  1211→          <div className="grid gap-4 py-2">
+  1212→            {/* Row 1: Cascading Selects */}
+  1213→            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+  1214→              <div className="space-y-1.5">
+  1215→                <Label className="text-xs">Location</Label>
+  1216→                <Select value={formData.locationId} onValueChange={handleLocationChange}>
+  1217→                  <SelectTrigger className="h-9 text-sm">
+  1218→                    <SelectValue placeholder="Select location" />
+  1219→                  </SelectTrigger>
+  1220→                  <SelectContent>
+  1221→                    {Array.from(locationGroups.entries()).map(([key, locs]) => (
+  1222→                      <SelectGroup key={key}>
+  1223→                        <SelectLabel>{key}</SelectLabel>
+  1224→                        {locs.map((loc) => {
+  1225→                          const label = loc.district
+  1226→                            ? `${loc.country} > ${loc.city} > ${loc.district}`
+  1227→                            : `${loc.country} > ${loc.city}`;
+  1228→                          return (
+  1229→                            <SelectItem key={loc.id} value={String(loc.id)}>
+  1230→                              <span className="truncate text-xs">{label}</span>
+  1231→                            </SelectItem>
+  1232→                          );
+  1233→                        })}
+  1234→                      </SelectGroup>
+  1235→                    ))}
+  1236→                  </SelectContent>
+  1237→                </Select>
+  1238→              </div>
+  1239→
+  1240→              <div className="space-y-1.5">
+  1241→                <Label className="text-xs">Category</Label>
+  1242→                <Select
+  1243→                  value={formData.categoryId}
+  1244→                  onValueChange={handleCategoryChange}
+  1245→                  disabled={!formData.locationId}
+  1246→                >
+  1247→                  <SelectTrigger className="h-9 text-sm">
+  1248→                    <SelectValue placeholder="Select category" />
+  1249→                  </SelectTrigger>
+  1250→                  <SelectContent>
+  1251→                    {formCategories.map((cat) => (
+  1252→                      <SelectItem key={cat.id} value={String(cat.id)}>
+  1253→                        {cat.name}
+  1254→                      </SelectItem>
+  1255→                    ))}
+  1256→                  </SelectContent>
+  1257→                </Select>
+  1258→              </div>
+  1259→
+  1260→              <div className="space-y-1.5">
+  1261→                <Label className="text-xs">Subcategory</Label>
+  1262→                <Select
+  1263→                  value={formData.subcategoryId}
+  1264→                  onValueChange={(v) => setFormData({ ...formData, subcategoryId: v === "__none__" ? "" : v })}
+  1265→                  disabled={!formData.categoryId}
+  1266→                >
+  1267→                  <SelectTrigger className="h-9 text-sm">
+  1268→                    <SelectValue placeholder="Select subcategory" />
+  1269→                  </SelectTrigger>
+  1270→                  <SelectContent>
+  1271→                    <SelectItem value="__none__">None</SelectItem>
+  1272→                    {formSubcategories.map((sub) => (
+  1273→                      <SelectItem key={sub.id} value={String(sub.id)}>
+  1274→                        {sub.name}
+  1275→                      </SelectItem>
+  1276→                    ))}
+  1277→                  </SelectContent>
+  1278→                </Select>
+  1279→              </div>
+  1280→            </div>
+  1281→
+  1282→            {/* Row 2: Name, Price, Stock, Mono */}
+  1283→            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+  1284→              <div className="space-y-1.5">
+  1285→                <Label className="text-xs">Name *</Label>
+  1286→                <Input
+  1287→                  value={formData.name}
+  1288→                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+  1289→                  placeholder="Product name"
+  1290→                  className="h-9 text-sm"
+  1291→                />
+  1292→              </div>
+  1293→              <div className="space-y-1.5">
+  1294→                <Label className="text-xs">Price ($) *</Label>
+  1295→                <Input
+  1296→                  type="number"
+  1297→                  min="0.01"
+  1298→                  step="0.01"
+  1299→                  value={formData.price}
+  1300→                  onChange={(e) => setFormData({ ...formData, price: e.target.value })}
+  1301→                  placeholder="0.00"
+  1302→                  className="h-9 text-sm"
+  1303→                />
+  1304→              </div>
+  1305→            </div>
+  1306→
+  1307→            <div className="flex items-center gap-3">
+  1308→              <div className="flex items-center gap-2">
+  1309→                <Checkbox
+  1310→                  id="is-mono"
+  1311→                  checked={formData.isMono}
+  1312→                  onCheckedChange={(checked) =>
+  1313→                    setFormData({ ...formData, isMono: !!checked })
+  1314→                  }
+  1315→                />
+  1316→                <Label htmlFor="is-mono" className="text-xs cursor-pointer">
+  1317→                  Digital Product (infinite stock)
+  1318→                </Label>
+  1319→              </div>
+  1320→              {!formData.isMono && (
+  1321→                <div className="flex items-center gap-2">
+  1322→                  <Label className="text-xs">Stock:</Label>
+  1323→                  <Input
+  1324→                    type="number"
+  1325→                    min="0"
+  1326→                    value={formData.quantityInStock}
+  1327→                    onChange={(e) => setFormData({ ...formData, quantityInStock: e.target.value })}
+  1328→                    className="h-9 text-sm w-24"
+  1329→                  />
+  1330→                </div>
+  1331→              )}
+  1332→              {formData.isMono && (
+  1333→                <span className="text-sm font-mono text-muted-foreground">Stock: ∞</span>
+  1334→              )}
+  1335→            </div>
+  1336→
+  1337→            {/* Row 3: Description */}
+  1338→            <div className="space-y-1.5">
+  1339→              <Label className="text-xs">Description</Label>
+  1340→              <Textarea
+  1341→                value={formData.description}
+  1342→                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+  1343→                placeholder="Product description..."
+  1344→                rows={3}
+  1345→                className="text-sm"
+  1346→              />
+  1347→            </div>
+  1348→
+  1349→            {/* Row 4: Photo URLs */}
+  1350→            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+  1351→              <div className="space-y-1.5">
+  1352→                <Label className="text-xs">Photo URL</Label>
+  1353→                <Input
+  1354→                  value={formData.photoUrl}
+  1355→                  onChange={(e) => setFormData({ ...formData, photoUrl: e.target.value })}
+  1356→                  placeholder="https://..."
+  1357→                  className="h-9 text-sm"
+  1358→                />
+  1359→              </div>
+  1360→              <div className="space-y-1.5">
+  1361→                <Label className="text-xs">Hidden Photo URL</Label>
+  1362→                <Input
+  1363→                  value={formData.hiddenPhotoUrl}
+  1364→                  onChange={(e) => setFormData({ ...formData, hiddenPhotoUrl: e.target.value })}
+  1365→                  placeholder="https://..."
+  1366→                  className="h-9 text-sm"
+  1367→                />
+  1368→              </div>
+  1369→            </div>
+  1370→
+  1371→            {/* Row 5: Hidden content */}
+  1372→            <details className="group">
+  1373→              <summary className="text-xs font-medium cursor-pointer text-muted-foreground hover:text-foreground transition-colors py-1">
+  1374→                ▸ Hidden Content Fields
+  1375→              </summary>
+  1376→              <div className="grid gap-3 mt-2 pl-2 border-l-2 border-muted">
+  1377→                <div className="space-y-1.5">
+  1378→                  <Label className="text-xs">Hidden Description</Label>
+  1379→                  <Textarea
+  1380→                    value={formData.hiddenDescription}
+  1381→                    onChange={(e) => setFormData({ ...formData, hiddenDescription: e.target.value })}
+  1382→                    placeholder="Hidden description (shown after purchase)..."
+  1383→                    rows={2}
+  1384→                    className="text-sm"
+  1385→                  />
+  1386→                </div>
+  1387→                <div className="space-y-1.5">
+  1388→                  <Label className="text-xs">Hidden Coordinates</Label>
+  1389→                  <Input
+  1390→                    value={formData.hiddenCoordinates}
+  1391→                    onChange={(e) => setFormData({ ...formData, hiddenCoordinates: e.target.value })}
+  1392→                    placeholder="lat,lng"
+  1393→                    className="h-9 text-sm"
+  1394→                  />
+  1395→                </div>
+  1396→                <div className="space-y-1.5">
+  1397→                  <Label className="text-xs">Private Data</Label>
+  1398→                  <Textarea
+  1399→                    value={formData.privateData}
+  1400→                    onChange={(e) => setFormData({ ...formData, privateData: e.target.value })}
+  1401→                    placeholder="Private data (credentials, keys, etc.)..."
+  1402→                    rows={2}
+  1403→                    className="text-sm"
+  1404→                  />
+  1405→                </div>
+  1406→              </div>
+  1407→            </details>
+  1408→          </div>
+  1409→
+  1410→          <DialogFooter>
+  1411→            <Button variant="outline" onClick={() => setModalOpen(false)} disabled={saving}>
+  1412→              Cancel
+  1413→            </Button>
+  1414→            <Button onClick={handleSaveProduct} disabled={saving}>
+  1415→              {saving ? "Saving..." : editProduct ? "Update Product" : "Create Product"}
+  1416→            </Button>
+  1417→          </DialogFooter>
+  1418→        </DialogContent>
+  1419→      </Dialog>
+  1420→
+  1421→      {/* ─── Delete Confirmation ─── */}
+  1422→      <AlertDialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
+  1423→        <AlertDialogContent>
+  1424→          <AlertDialogHeader>
+  1425→            <AlertDialogTitle>Delete {deleteTarget?.type}?</AlertDialogTitle>
+  1426→            <AlertDialogDescription>
+  1427→              Are you sure you want to delete &quot;{deleteTarget?.name}&quot;? This action cannot be
+  1428→              undone.
+  1429→            </AlertDialogDescription>
+  1430→          </AlertDialogHeader>
+  1431→          <AlertDialogFooter>
+  1432→            <AlertDialogCancel>Cancel</AlertDialogCancel>
+  1433→            <AlertDialogAction
+  1434→              onClick={handleDelete}
+  1435→              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+  1436→            >
+  1437→              Delete
+  1438→            </AlertDialogAction>
+  1439→          </AlertDialogFooter>
+  1440→        </AlertDialogContent>
+  1441→      </AlertDialog>
+  1442→    </div>
+  1443→  );
+  1444→}
+  1445→
\ No newline at end of file
diff --git a/tool-results/read_1785935400911_c8c3abacfba3.txt b/tool-results/read_1785935400911_c8c3abacfba3.txt
new file mode 100644
index 0000000..5635e83
--- /dev/null
+++ b/tool-results/read_1785935400911_c8c3abacfba3.txt
@@ -0,0 +1,1445 @@
+     1→"use client";
+     2→
+     3→import { useState, useEffect, useCallback, useRef } from "react";
+     4→import {
+     5→  ResizablePanelGroup,
+     6→  ResizablePanel,
+     7→  ResizableHandle,
+     8→} from "@/components/ui/resizable";
+     9→import {
+    10→  Accordion,
+    11→  AccordionContent,
+    12→  AccordionItem,
+    13→  AccordionTrigger,
+    14→} from "@/components/ui/accordion";
+    15→import {
+    16→  Table,
+    17→  TableBody,
+    18→  TableCell,
+    19→  TableHead,
+    20→  TableHeader,
+    21→  TableRow,
+    22→} from "@/components/ui/table";
+    23→import {
+    24→  Dialog,
+    25→  DialogContent,
+    26→  DialogHeader,
+    27→  DialogTitle,
+    28→  DialogFooter,
+    29→} from "@/components/ui/dialog";
+    30→import {
+    31→  Select,
+    32→  SelectContent,
+    33→  SelectGroup,
+    34→  SelectItem,
+    35→  SelectLabel,
+    36→  SelectTrigger,
+    37→  SelectValue,
+    38→} from "@/components/ui/select";
+    39→import {
+    40→  AlertDialog,
+    41→  AlertDialogAction,
+    42→  AlertDialogCancel,
+    43→  AlertDialogContent,
+    44→  AlertDialogDescription,
+    45→  AlertDialogFooter,
+    46→  AlertDialogHeader,
+    47→  AlertDialogTitle,
+    48→} from "@/components/ui/alert-dialog";
+    49→import { Switch } from "@/components/ui/switch";
+    50→import { Button } from "@/components/ui/button";
+    51→import { Badge } from "@/components/ui/badge";
+    52→import { Input } from "@/components/ui/input";
+    53→import { Label } from "@/components/ui/label";
+    54→import { Textarea } from "@/components/ui/textarea";
+    55→import { Checkbox } from "@/components/ui/checkbox";
+    56→import { Skeleton } from "@/components/ui/skeleton";
+    57→import { toast } from "sonner";
+    58→import {
+    59→  Plus,
+    60→  Pencil,
+    61→  Trash2,
+    62→  Search,
+    63→  Package,
+    64→  MapPin,
+    65→  FolderOpen,
+    66→  Tag,
+    67→  ChevronRight,
+    68→  X,
+    69→} from "lucide-react";
+    70→
+    71→// ─── Types ───────────────────────────────────────
+    72→
+    73→interface TreeLocation {
+    74→  id: number;
+    75→  country: string;
+    76→  city: string;
+    77→  district: string;
+    78→  isActive: number;
+    79→  createdAt: string;
+    80→  categoryCount: number;
+    81→  productCount: number;
+    82→}
+    83→
+    84→interface TreeCategory {
+    85→  id: number;
+    86→  locationId: number;
+    87→  name: string;
+    88→  isActive: number;
+    89→  createdAt: string;
+    90→  location: { id: number; country: string; city: string; district: string };
+    91→  subcategoryCount: number;
+    92→  productCount: number;
+    93→}
+    94→
+    95→interface TreeSubcategory {
+    96→  id: number;
+    97→  categoryId: number;
+    98→  name: string;
+    99→  isActive: number;
+   100→  createdAt: string;
+   101→  category: { id: number; name: string; locationId: number };
+   102→  productCount: number;
+   103→}
+   104→
+   105→interface CatalogTree {
+   106→  locations: TreeLocation[];
+   107→  categories: TreeCategory[];
+   108→  subcategories: TreeSubcategory[];
+   109→}
+   110→
+   111→interface Product {
+   112→  id: number;
+   113→  locationId: number;
+   114→  categoryId: number;
+   115→  subcategoryId: number | null;
+   116→  name: string;
+   117→  description: string | null;
+   118→  privateData: string | null;
+   119→  price: number;
+   120→  quantityInStock: number;
+   121→  photoUrl: string | null;
+   122→  hiddenPhotoUrl: string | null;
+   123→  hiddenCoordinates: string | null;
+   124→  hiddenDescription: string | null;
+   125→  isMono: number;
+   126→  createdAt: string;
+   127→  category: { id: number; name: string };
+   128→  subcategory: { id: number; name: string } | null;
+   129→  location: { id: number; country: string; city: string; district: string };
+   130→}
+   131→
+   132→interface ProductFormData {
+   133→  locationId: string;
+   134→  categoryId: string;
+   135→  subcategoryId: string;
+   136→  name: string;
+   137→  description: string;
+   138→  privateData: string;
+   139→  price: string;
+   140→  quantityInStock: string;
+   141→  photoUrl: string;
+   142→  hiddenPhotoUrl: string;
+   143→  hiddenCoordinates: string;
+   144→  hiddenDescription: string;
+   145→  isMono: boolean;
+   146→}
+   147→
+   148→const emptyForm: ProductFormData = {
+   149→  locationId: "",
+   150→  categoryId: "",
+   151→  subcategoryId: "",
+   152→  name: "",
+   153→  description: "",
+   154→  privateData: "",
+   155→  price: "",
+   156→  quantityInStock: "0",
+   157→  photoUrl: "",
+   158→  hiddenPhotoUrl: "",
+   159→  hiddenCoordinates: "",
+   160→  hiddenDescription: "",
+   161→  isMono: false,
+   162→};
+   163→
+   164→type FilterType =
+   165→  | { type: "all" }
+   166→  | { type: "location"; locationId: number }
+   167→  | { type: "category"; categoryId: number; locationId: number }
+   168→  | { type: "subcategory"; subcategoryId: number; categoryId: number; locationId: number };
+   169→
+   170→// ─── Component ───────────────────────────────────
+   171→
+   172→export function CatalogPage() {
+   173→  // Tree state
+   174→  const [tree, setTree] = useState<CatalogTree | null>(null);
+   175→  const [treeLoading, setTreeLoading] = useState(true);
+   176→  const [treeError, setTreeError] = useState<string | null>(null);
+   177→
+   178→  // Products state
+   179→  const [products, setProducts] = useState<Product[]>([]);
+   180→  const [productTotal, setProductTotal] = useState(0);
+   181→  const [productsLoading, setProductsLoading] = useState(true);
+   182→  const [search, setSearch] = useState("");
+   183→  const [searchDebounce, setSearchDebounce] = useState("");
+   184→  const [filter, setFilter] = useState<FilterType>({ type: "all" });
+   185→  const [productPage, setProductPage] = useState(1);
+   186→  const productLimit = 50;
+   187→
+   188→  // Modal state
+   189→  const [modalOpen, setModalOpen] = useState(false);
+   190→  const [editProduct, setEditProduct] = useState<Product | null>(null);
+   191→  const [formData, setFormData] = useState<ProductFormData>(emptyForm);
+   192→  const [formLocations, setFormLocations] = useState<TreeLocation[]>([]);
+   193→  const [formCategories, setFormCategories] = useState<TreeCategory[]>([]);
+   194→  const [formSubcategories, setFormSubcategories] = useState<TreeSubcategory[]>([]);
+   195→  const [saving, setSaving] = useState(false);
+   196→
+   197→  // Delete confirm
+   198→  const [deleteTarget, setDeleteTarget] = useState<{
+   199→    type: string;
+   200→    id: number;
+   201→    name: string;
+   202→  } | null>(null);
+   203→
+   204→  // Inline rename state
+   205→  const [renamingId, setRenamingId] = useState<string | null>(null);
+   206→  const [renameValue, setRenameValue] = useState("");
+   207→  const renameInputRef = useRef<HTMLInputElement>(null);
+   208→
+   209→  // Add inline state
+   210→  const [addMode, setAddMode] = useState<string | null>(null);
+   211→  const [addInput, setAddInput] = useState("");
+   212→  const [addDistrict, setAddDistrict] = useState("");
+   213→  const [addCity, setAddCity] = useState("");
+   214→  const [addCountry, setAddCountry] = useState("");
+   215→  const [addParentId, setAddParentId] = useState<number | null>(null);
+   216→  const addInputRef = useRef<HTMLInputElement>(null);
+   217→
+   218→  useEffect(() => {
+   219→    if (addInputRef.current) addInputRef.current.focus();
+   220→  }, [addMode]);
+   221→
+   222→  useEffect(() => {
+   223→    if (renameInputRef.current) renameInputRef.current.focus();
+   224→  }, [renamingId]);
+   225→
+   226→  // ─── Data fetching ─────────────────────────────
+   227→  const fetchTree = useCallback(async () => {
+   228→    try {
+   229→      const res = await fetch("/api/catalog/tree");
+   230→      if (!res.ok) throw new Error("Failed to load tree");
+   231→      const data: CatalogTree = await res.json();
+   232→      setTree(data);
+   233→      setTreeError(null);
+   234→    } catch (e) {
+   235→      setTreeError("Failed to load catalog tree");
+   236→    } finally {
+   237→      setTreeLoading(false);
+   238→    }
+   239→  }, []);
+   240→
+   241→  const fetchProducts = useCallback(async () => {
+   242→    setProductsLoading(true);
+   243→    try {
+   244→      const params = new URLSearchParams({ page: String(productPage), limit: String(productLimit) });
+   245→      if (searchDebounce) params.set("search", searchDebounce);
+   246→      if (filter.type === "location") params.set("loc", String(filter.locationId));
+   247→      if (filter.type === "category") params.set("cat", String(filter.categoryId));
+   248→      if (filter.type === "subcategory") params.set("sub", String(filter.subcategoryId));
+   249→
+   250→      const res = await fetch(`/api/products/bulk?${params}`);
+   251→      if (!res.ok) throw new Error("Failed to load products");
+   252→      const data = await res.json();
+   253→      setProducts(data.data);
+   254→      setProductTotal(data.total);
+   255→    } catch {
+   256→      toast.error("Failed to load products");
+   257→    } finally {
+   258→      setProductsLoading(false);
+   259→    }
+   260→  }, [filter, searchDebounce, productPage]);
+   261→
+   262→  useEffect(() => {
+   263→    fetchTree();
+   264→  }, [fetchTree]);
+   265→
+   266→  useEffect(() => {
+   267→    fetchProducts();
+   268→  }, [fetchProducts]);
+   269→
+   270→  // Search debounce
+   271→  useEffect(() => {
+   272→    const t = setTimeout(() => setSearchDebounce(search), 300);
+   273→    return () => clearTimeout(t);
+   274→  }, [search]);
+   275→
+   276→  // Reset page on filter/search change
+   277→  useEffect(() => {
+   278→    setProductPage(1);
+   279→  }, [filter, searchDebounce]);
+   280→
+   281→  // ─── Tree grouping ─────────────────────────────
+   282→  const getGroupedTree = () => {
+   283→    if (!tree) return {};
+   284→
+   285→    const countryMap = new Map<
+   286→      string,
+   287→      {
+   288→        cityMap: Map<
+   289→          string,
+   290→          {
+   291→            districtMap: Map<
+   292→              string,
+   293→              { location: TreeLocation; categories: TreeCategory[] }
+   294→            >;
+   295→          }
+   296→        >;
+   297→      }
+   298→    >();
+   299→
+   300→    for (const loc of tree.locations) {
+   301→      if (!countryMap.has(loc.country))
+   302→        countryMap.set(loc.country, { cityMap: new Map() });
+   303→      const countryEntry = countryMap.get(loc.country)!;
+   304→      if (!countryEntry.cityMap.has(loc.city))
+   305→        countryEntry.cityMap.set(loc.city, { districtMap: new Map() });
+   306→      const cityEntry = countryEntry.cityMap.get(loc.city)!;
+   307→      const distKey = loc.district || "(no district)";
+   308→      if (!cityEntry.districtMap.has(distKey))
+   309→        cityEntry.districtMap.set(distKey, { location: loc, categories: [] });
+   310→    }
+   311→
+   312→    for (const cat of tree.categories) {
+   313→      const countryEntry = countryMap.get(cat.location.country);
+   314→      if (!countryEntry) continue;
+   315→      const cityEntry = countryEntry.cityMap.get(cat.location.city);
+   316→      if (!cityEntry) continue;
+   317→      const distKey = cat.location.district || "(no district)";
+   318→      const distEntry = cityEntry.districtMap.get(distKey);
+   319→      if (!distEntry) continue;
+   320→      distEntry.categories.push(cat);
+   321→    }
+   322→
+   323→    return countryMap;
+   324→  };
+   325→
+   326→  // ─── Tree node actions ─────────────────────────
+   327→  const handleToggleActive = async (type: string, id: number) => {
+   328→    try {
+   329→      const res = await fetch(`/api/${type}s/${id}`, { method: "PATCH" });
+   330→      if (!res.ok) throw new Error();
+   331→      toast.success(`${type} toggled`);
+   332→      fetchTree();
+   333→    } catch {
+   334→      toast.error(`Failed to toggle ${type}`);
+   335→    }
+   336→  };
+   337→
+   338→  const handleDelete = async () => {
+   339→    if (!deleteTarget) return;
+   340→    try {
+   341→      const typePath = deleteTarget.type === "product" ? "products" : `${deleteTarget.type}s`;
+   342→      const res = await fetch(`/api/${typePath}/${deleteTarget.id}`, { method: "DELETE" });
+   343→      if (!res.ok) {
+   344→        const data = await res.json();
+   345→        throw new Error(data.error || "Failed to delete");
+   346→      }
+   347→      toast.success(`${deleteTarget.type} deleted`);
+   348→      setDeleteTarget(null);
+   349→      fetchTree();
+   350→      fetchProducts();
+   351→    } catch (e) {
+   352→      toast.error(e instanceof Error ? e.message : "Failed to delete");
+   353→    }
+   354→  };
+   355→
+   356→  const handleRename = async (type: string, id: number) => {
+   357→    if (!renameValue.trim()) {
+   358→      setRenamingId(null);
+   359→      return;
+   360→    }
+   361→    try {
+   362→      let body: Record<string, string> = {};
+   363→      if (type === "location") {
+   364→        const loc = tree?.locations.find((l) => l.id === id);
+   365→        body = { country: loc?.country || "", city: loc?.city || "", district: renameValue.trim() };
+   366→      } else {
+   367→        body = { name: renameValue.trim() };
+   368→      }
+   369→      const typePath = `${type}s`;
+   370→      const res = await fetch(`/api/${typePath}/${id}`, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+   371→      if (!res.ok) throw new Error();
+   372→      toast.success("Renamed");
+   373→      setRenamingId(null);
+   374→      fetchTree();
+   375→    } catch {
+   376→      toast.error("Failed to rename");
+   377→    }
+   378→  };
+   379→
+   380→  const handleAdd = async () => {
+   381→    if (!addMode) return;
+   382→    try {
+   383→      if (addMode === "location") {
+   384→        if (!addCountry.trim() || !addCity.trim()) {
+   385→          toast.error("Country and city are required");
+   386→          return;
+   387→        }
+   388→        const res = await fetch("/api/locations/bulk", {
+   389→          method: "POST",
+   390→          headers: { "Content-Type": "application/json" },
+   391→          body: JSON.stringify({ country: addCountry.trim(), city: addCity.trim(), district: addDistrict.trim() }),
+   392→        });
+   393→        if (!res.ok) {
+   394→          const data = await res.json();
+   395→          throw new Error(data.error || "Failed to add");
+   396→        }
+   397→      } else if (addMode === "category") {
+   398→        if (!addInput.trim() || !addParentId) {
+   399→          toast.error("Name is required");
+   400→          return;
+   401→        }
+   402→        const res = await fetch("/api/categories/bulk", {
+   403→          method: "POST",
+   404→          headers: { "Content-Type": "application/json" },
+   405→          body: JSON.stringify({ name: addInput.trim(), locationId: addParentId }),
+   406→        });
+   407→        if (!res.ok) {
+   408→          const data = await res.json();
+   409→          throw new Error(data.error || "Failed to add");
+   410→        }
+   411→      } else if (addMode === "subcategory") {
+   412→        if (!addInput.trim() || !addParentId) {
+   413→          toast.error("Name is required");
+   414→          return;
+   415→        }
+   416→        const res = await fetch("/api/subcategories/bulk", {
+   417→          method: "POST",
+   418→          headers: { "Content-Type": "application/json" },
+   419→          body: JSON.stringify({ name: addInput.trim(), categoryId: addParentId }),
+   420→        });
+   421→        if (!res.ok) {
+   422→          const data = await res.json();
+   423→          throw new Error(data.error || "Failed to add");
+   424→        }
+   425→      }
+   426→      toast.success("Added successfully");
+   427→      setAddMode(null);
+   428→      setAddInput("");
+   429→      setAddCountry("");
+   430→      setAddCity("");
+   431→      setAddDistrict("");
+   432→      setAddParentId(null);
+   433→      fetchTree();
+   434→    } catch (e) {
+   435→      toast.error(e instanceof Error ? e.message : "Failed to add");
+   436→    }
+   437→  };
+   438→
+   439→  // ─── Product modal ─────────────────────────────
+   440→  const openProductModal = async (product?: Product) => {
+   441→ if (product) {
+   442→      setEditProduct(product);
+   443→      setFormData({
+   444→        locationId: String(product.locationId),
+   445→        categoryId: String(product.categoryId),
+   446→        subcategoryId: product.subcategoryId ? String(product.subcategoryId) : "",
+   447→        name: product.name,
+   448→        description: product.description || "",
+   449→        privateData: product.privateData || "",
+   450→        price: String(product.price),
+   451→        quantityInStock: product.isMono ? "0" : String(product.quantityInStock),
+   452→        photoUrl: product.photoUrl || "",
+   453→        hiddenPhotoUrl: product.hiddenPhotoUrl || "",
+   454→        hiddenCoordinates: product.hiddenCoordinates || "",
+   455→        hiddenDescription: product.hiddenDescription || "",
+   456→        isMono: product.isMono === 1,
+   457→      });
+   458→    } else {
+   459→      setEditProduct(null);
+   460→      setFormData(emptyForm);
+   461→    }
+   462→
+   463→    // Load form data
+   464→    try {
+   465→      const [treeRes, locRes] = await Promise.all([
+   466→        fetch("/api/catalog/tree"),
+   467→        fetch("/api/locations/bulk"),
+   468→      ]);
+   469→      const treeData: CatalogTree = await treeRes.json();
+   470→      const locData: TreeLocation[] = await locRes.json();
+   471→      setFormLocations(locData);
+   472→
+   473→      if (product) {
+   474→        setFormCategories(treeData.categories.filter((c) => c.locationId === product.locationId));
+   475→        setFormSubcategories(treeData.subcategories.filter((s) => s.categoryId === product.categoryId));
+   476→      } else {
+   477→        setFormCategories([]);
+   478→        setFormSubcategories([]);
+   479→      }
+   480→    } catch {
+   481→      toast.error("Failed to load form data");
+   482→    }
+   483→
+   484→    setModalOpen(true);
+   485→  };
+   486→
+   487→  const handleLocationChange = async (locationId: string) => {
+   488→    const updated = { ...formData, locationId, categoryId: "", subcategoryId: "" };
+   489→    setFormData(updated);
+   490→    if (!locationId) {
+   491→      setFormCategories([]);
+   492→      setFormSubcategories([]);
+   493→      return;
+   494→    }
+   495→    try {
+   496→      const treeRes = await fetch("/api/catalog/tree");
+   497→      const treeData: CatalogTree = await treeRes.json();
+   498→      const cats = treeData.categories.filter((c) => c.locationId === +locationId);
+   499→      setFormCategories(cats);
+   500→      setFormSubcategories([]);
+   501→    } catch {
+   502→      // ignore
+   503→    }
+   504→  };
+   505→
+   506→  const handleCategoryChange = async (categoryId: string) => {
+   507→    const updated = { ...formData, categoryId, subcategoryId: "" };
+   508→    setFormData(updated);
+   509→    if (!categoryId) {
+   510→      setFormSubcategories([]);
+   511→      return;
+   512→    }
+   513→    try {
+   514→      const treeRes = await fetch("/api/catalog/tree");
+   515→      const treeData: CatalogTree = await treeRes.json();
+   516→      const subs = treeData.subcategories.filter((s) => s.categoryId === +categoryId);
+   517→      setFormSubcategories(subs);
+   518→    } catch {
+   519→      // ignore
+   520→    }
+   521→  };
+   522→
+   523→  const handleSaveProduct = async () => {
+   524→    if (!formData.locationId || !formData.categoryId || !formData.name || !formData.price) {
+   525→      toast.error("Location, Category, Name, and Price are required");
+   526→      return;
+   527→    }
+   528→    setSaving(true);
+   529→    try {
+   530→      const body = {
+   531→        locationId: +formData.locationId,
+   532→        categoryId: +formData.categoryId,
+   533→        subcategoryId: formData.subcategoryId ? +formData.subcategoryId : null,
+   534→        name: formData.name,
+   535→        description: formData.description || null,
+   536→        privateData: formData.privateData || null,
+   537→        price: +formData.price,
+   538→        quantityInStock: formData.isMono ? 0 : +formData.quantityInStock,
+   539→        photoUrl: formData.photoUrl || null,
+   540→        hiddenPhotoUrl: formData.hiddenPhotoUrl || null,
+   541→        hiddenCoordinates: formData.hiddenCoordinates || null,
+   542→        hiddenDescription: formData.hiddenDescription || null,
+   543→        isMono: formData.isMono ? 1 : 0,
+   544→      };
+   545→
+   546→      let res: Response;
+   547→      if (editProduct) {
+   548→        res = await fetch(`/api/products/${editProduct.id}`, {
+   549→          method: "PUT",
+   550→          headers: { "Content-Type": "application/json" },
+   551→          body: JSON.stringify(body),
+   552→        });
+   553→      } else {
+   554→        res = await fetch("/api/products/add", {
+   555→          method: "POST",
+   556→          headers: { "Content-Type": "application/json" },
+   557→          body: JSON.stringify(body),
+   558→        });
+   559→      }
+   560→
+   561→      if (!res.ok) {
+   562→        const data = await res.json();
+   563→        throw new Error(data.error || "Failed to save");
+   564→      }
+   565→
+   566→      toast.success(editProduct ? "Product updated" : "Product created");
+   567→      setModalOpen(false);
+   568→      fetchTree();
+   569→      fetchProducts();
+   570→    } catch (e) {
+   571→      toast.error(e instanceof Error ? e.message : "Failed to save product");
+   572→    } finally {
+   573→      setSaving(false);
+   574→    }
+   575→  };
+   576→
+   577→  // ─── Filter handler ────────────────────────────
+   578→  const handleNodeClick = (f: FilterType) => {
+   579→    setFilter(f);
+   580→  };
+   581→
+   582→  // ─── Grouped tree for rendering ────────────────
+   583→  const groupedTree = getGroupedTree();
+   584→  const countries = Array.from(groupedTree.keys()).sort();
+   585→
+   586→  const totalPages = Math.max(1, Math.ceil(productTotal / productLimit));
+   587→
+   588→  // ─── Render: Left panel skeleton ────────────────
+   589→  if (treeLoading) {
+   590→    return (
+   591→      <div className="p-4 space-y-3">
+   592→        <Skeleton className="h-8 w-48" />
+   593→        <Skeleton className="h-64 w-full" />
+   594→        <Skeleton className="h-96 w-full" />
+   595→      </div>
+   596→    );
+   597→  }
+   598→
+   599→  if (treeError) {
+   600→    return (
+   601→      <div className="p-6">
+   602→        <p className="text-destructive">{treeError}</p>
+   603→        <Button variant="outline" onClick={fetchTree} className="mt-2">
+   604→          Retry
+   605→        </Button>
+   606→      </div>
+   607→    );
+   608→  }
+   609→
+   610→  // ─── Location select groups for form ───────────
+   611→  const locationGroups = new Map<string, TreeLocation[]>();
+   612→  for (const loc of formLocations) {
+   613→    const key = `${loc.country} > ${loc.city}`;
+   614→    if (!locationGroups.has(key)) locationGroups.set(key, []);
+   615→    locationGroups.get(key)!.push(loc);
+   616→  }
+   617→
+   618→  // ─── Main render ────────────────────────────────
+   619→  return (
+   620→    <div className="h-full flex flex-col">
+   621→      {/* Header */}
+   622→      <div className="flex items-center justify-between px-4 pt-4 pb-2">
+   623→        <div className="flex items-center gap-2">
+   624→          <FolderOpen className="h-5 w-5 text-orange-500" />
+   625→          <h1 className="text-xl font-semibold">Catalog</h1>
+   626→        </div>
+   627→        <Button onClick={() => openProductModal()} size="sm">
+   628→          <Plus className="h-4 w-4 mr-1" /> Add Product
+   629→        </Button>
+   630→      </div>
+   631→
+   632→      {/* Main content */}
+   633→      <div className="flex-1 px-4 pb-4 min-h-0">
+   634→        <ResizablePanelGroup direction="horizontal" className="rounded-lg border">
+   635→          {/* ─── Left Panel: Tree ─── */}
+   636→          <ResizablePanel defaultSize={30} minSize={20} maxSize={50}>
+   637→            <div className="h-full flex flex-col">
+   638→              <div className="p-3 border-b flex items-center justify-between">
+   639→                <span className="text-sm font-medium text-muted-foreground">Catalog Tree</span>
+   640→                <Button
+   641→                  variant="ghost"
+   642→                  size="sm"
+   643→                  className="h-7 text-xs"
+   644→                  onClick={() => {
+   645→                    setAddMode("location");
+   646→                    setAddCountry("");
+   647→                    setAddCity("");
+   648→                    setAddDistrict("");
+   649→                  }}
+   650→                >
+   651→                  <Plus className="h-3 w-3 mr-1" /> Location
+   652→                </Button>
+   653→              </div>
+   654→
+   655→              {/* Add Location Form */}
+   656→              {addMode === "location" && (
+   657→                <div className="p-3 border-b bg-muted/30 space-y-2">
+   658→                  <div className="flex gap-2">
+   659→                    <Input
+   660→                      placeholder="Country"
+   661→                      value={addCountry}
+   662→                      onChange={(e) => setAddCountry(e.target.value)}
+   663→                      className="h-8 text-xs"
+   664→                    />
+   665→                    <Input
+   666→                      placeholder="City"
+   667→                      value={addCity}
+   668→                      onChange={(e) => setAddCity(e.target.value)}
+   669→                      className="h-8 text-xs"
+   670→                    />
+   671→                  </div>
+   672→                  <div className="flex gap-2">
+   673→                    <Input
+   674→                      placeholder="District (optional)"
+   675→                      value={addDistrict}
+   676→                      onChange={(e) => setAddDistrict(e.target.value)}
+   677→                      className="h-8 text-xs"
+   678→                      ref={addInputRef}
+   679→                      onKeyDown={(e) => {
+   680→                        if (e.key === "Enter") handleAdd();
+   681→                        if (e.key === "Escape") setAddMode(null);
+   682→                      }}
+   683→                    />
+   684→                  </div>
+   685→                  <div className="flex gap-2">
+   686→                    <Button size="sm" className="h-7 text-xs" onClick={handleAdd}>
+   687→                      Add
+   688→                    </Button>
+   689→                    <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => setAddMode(null)}>
+   690→                      Cancel
+   691→                    </Button>
+   692→                  </div>
+   693→                </div>
+   694→              )}
+   695→
+   696→              {/* Tree */}
+   697→              <div className="flex-1 overflow-y-auto max-h-[calc(100vh-14rem)] p-2">
+   698→                {countries.length === 0 ? (
+   699→                  <p className="text-sm text-muted-foreground text-center py-8">
+   700→                    No locations yet. Add one above.
+   701→                  </p>
+   702→                ) : (
+   703→                  <Accordion type="multiple" defaultValue={countries.slice(0, 3)} className="w-full">
+   704→                    {countries.map((country) => {
+   705→                      const countryEntry = groupedTree.get(country)!;
+   706→                      const cities = Array.from(countryEntry.cityMap.keys()).sort();
+   707→                      return (
+   708→                        <AccordionItem key={country} value={country}>
+   709→                          <AccordionTrigger className="text-sm font-semibold py-2 px-2 hover:no-underline">
+   710→                            <span className="flex items-center gap-2">
+   711→                              <MapPin className="h-3.5 w-3.5 text-orange-500" />
+   712→                              {country}
+   713→                            </span>
+   714→                          </AccordionTrigger>
+   715→                          <AccordionContent className="pb-1">
+   716→                            {cities.map((city) => {
+   717→                              const cityEntry = countryEntry.cityMap.get(city)!;
+   718→                              const districts = Array.from(cityEntry.districtMap.keys()).sort();
+   719→                              return (
+   720→                                <div key={city} className="ml-2">
+   721→                                  <Accordion type="multiple" className="w-full">
+   722→                                    {districts.map((district) => {
+   723→                                      const { location, categories } = cityEntry.districtMap.get(district)!;
+   724→                                      const totalCount = location.categoryCount + location.productCount;
+   725→                                      const isDistrict = district !== "(no district)";
+   726→                                      return (
+   727→                                        <AccordionItem key={district} value={`${country}-${city}-${district}`}>
+   728→                                          <AccordionTrigger className="text-xs py-1.5 px-2 hover:no-underline">
+   729→                                            <div
+   730→                                              className="flex items-center gap-2 flex-1 min-w-0"
+   731→                                              onClick={(e) => {
+   732→                                                e.stopPropagation();
+   733→                                                handleNodeClick({ type: "location", locationId: location.id });
+   734→                                              }}
+   735→                                            >
+   736→                                              <ChevronRight className="h-3 w-3 shrink-0" />
+   737→                                              <span className="truncate">
+   738→                                                {city}{isDistrict ? ` > ${district}` : ""}
+   739→                                              </span>
+   740→                                              <Badge variant={location.isActive === 1 ? "default" : "secondary"} className="text-[10px] px-1.5 py-0 ml-auto mr-1">
+   741→                                                {totalCount}
+   742→                                              </Badge>
+   743→                                              {location.isActive === 0 && (
+   744→                                                <Badge variant="outline" className="text-[10px] px-1 py-0 text-muted-foreground">
+   745→                                                  off
+   746→                                                </Badge>
+   747→                                              )}
+   748→                                            </div>
+   749→                                            <div className="flex items-center gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
+   750→                                              <Switch
+   751→                                                checked={location.isActive === 1}
+   752→                                                onCheckedChange={() => handleToggleActive("location", location.id)}
+   753→                                                className="scale-75"
+   754→                                              />
+   755→                                              <Button
+   756→                                                variant="ghost"
+   757→                                                size="sm"
+   758→                                                className="h-6 w-6 p-0"
+   759→                                                onClick={() => {
+   760→                                                  setRenamingId(`loc-${location.id}`);
+   761→                                                  setRenameValue(isDistrict ? district : city);
+   762→                                                }}
+   763→                                              >
+   764→                                                <Pencil className="h-3 w-3" />
+   765→                                              </Button>
+   766→                                              <Button
+   767→                                                variant="ghost"
+   768→                                                size="sm"
+   769→                                                className="h-6 w-6 p-0 text-destructive hover:text-destructive"
+   770→                                                onClick={() =>
+   771→                                                  setDeleteTarget({
+   772→                                                    type: "location",
+   773→                                                    id: location.id,
+   774→                                                    name: `${country} > ${city}${isDistrict ? ` > ${district}` : ""}`,
+   775→                                                  })
+   776→                                                }
+   777→                                              >
+   778→                                                <Trash2 className="h-3 w-3" />
+   779→                                              </Button>
+   780→                                              <Button
+   781→                                                variant="ghost"
+   782→                                                size="sm"
+   783→                                                className="h-6 w-6 p-0"
+   784→                                                onClick={() => {
+   785→                                                  setAddMode("category");
+   786→                                                  setAddParentId(location.id);
+   787→                                                  setAddInput("");
+   788→                                                }}
+   789→                                              >
+   790→                                                <Plus className="h-3 w-3" />
+   791→                                              </Button>
+   792→                                            </div>
+   793→                                          </AccordionTrigger>
+   794→
+   795→                                          {/* Inline rename for location */}
+   796→                                          {renamingId === `loc-${location.id}` && (
+   797→                                            <div className="flex items-center gap-2 px-4 py-1">
+   798→                                              <Input
+   799→                                                ref={renameInputRef}
+   800→                                                value={renameValue}
+   801→                                                onChange={(e) => setRenameValue(e.target.value)}
+   802→                                                className="h-7 text-xs"
+   803→                                                onKeyDown={(e) => {
+   804→                                                  if (e.key === "Enter") handleRename("location", location.id);
+   805→                                                  if (e.key === "Escape") setRenamingId(null);
+   806→                                                }}
+   807→                                                onBlur={() => handleRename("location", location.id)}
+   808→                                              />
+   809→                                            </div>
+   810→                                          )}
+   811→
+   812→                                          {/* Add Category Form */}
+   813→                                          {addMode === "category" && addParentId === location.id && (
+   814→                                            <div className="flex items-center gap-2 px-4 py-1">
+   815→                                              <Input
+   816→                                                ref={addInputRef}
+   817→                                                value={addInput}
+   818→                                                onChange={(e) => setAddInput(e.target.value)}
+   819→                                                placeholder="Category name..."
+   820→                                                className="h-7 text-xs"
+   821→                                                onKeyDown={(e) => {
+   822→                                                  if (e.key === "Enter") handleAdd();
+   823→                                                  if (e.key === "Escape") setAddMode(null);
+   824→                                                }}
+   825→                                              />
+   826→                                              <Button size="sm" className="h-7 text-xs" onClick={handleAdd}>Add</Button>
+   827→                                              <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => setAddMode(null)}>✕</Button>
+   828→                                            </div>
+   829→                                          )}
+   830→
+   831→                                          <AccordionContent className="pb-0">
+   832→                                            {categories.length === 0 ? (
+   833→                                              <p className="text-xs text-muted-foreground pl-8 py-1">No categories</p>
+   834→                                            ) : (
+   835→                                              categories.map((cat) => {
+   836→                                                const subs = tree?.subcategories.filter((s) => s.categoryId === cat.id) || [];
+   837→                                                return (
+   838→                                                  <div key={cat.id} className="ml-3">
+   839→                                                    <Accordion type="multiple" className="w-full">
+   840→                                                      <AccordionItem value={`cat-${cat.id}`}>
+   841→                                                        <AccordionTrigger className="text-xs py-1 px-2 hover:no-underline">
+   842→                                                          <div
+   843→                                                            className="flex items-center gap-2 flex-1 min-w-0"
+   844→                                                            onClick={(e) => {
+   845→                                                              e.stopPropagation();
+   846→                                                              handleNodeClick({ type: "category", categoryId: cat.id, locationId: cat.locationId });
+   847→                                                            }}
+   848→                                                          >
+   849→                                                            <FolderOpen className="h-3 w-3 text-amber-500 shrink-0" />
+   850→                                                            <span className="truncate">{cat.name}</span>
+   851→                                                            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 ml-auto mr-1">
+   852→                                                              {cat.subcategoryCount + cat.productCount}
+   853→                                                            </Badge>
+   854→                                                            {cat.isActive === 0 && (
+   855→                                                              <Badge variant="outline" className="text-[10px] px-1 py-0 text-muted-foreground">
+   856→                                                                off
+   857→                                                              </Badge>
+   858→                                                            )}
+   859→                                                          </div>
+   860→                                                          <div className="flex items-center gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
+   861→                                                            <Switch
+   862→                                                              checked={cat.isActive === 1}
+   863→                                                              onCheckedChange={() => handleToggleActive("category", cat.id)}
+   864→                                                              className="scale-75"
+   865→                                                            />
+   866→                                                            <Button
+   867→                                                              variant="ghost"
+   868→                                                              size="sm"
+   869→                                                              className="h-6 w-6 p-0"
+   870→                                                              onClick={() => {
+   871→                                                                setRenamingId(`cat-${cat.id}`);
+   872→                                                                setRenameValue(cat.name);
+   873→                                                              }}
+   874→                                                            >
+   875→                                                              <Pencil className="h-3 w-3" />
+   876→                                                            </Button>
+   877→                                                            <Button
+   878→                                                              variant="ghost"
+   879→                                                              size="sm"
+   880→                                                              className="h-6 w-6 p-0 text-destructive hover:text-destructive"
+   881→                                                              onClick={() =>
+   882→                                                                setDeleteTarget({
+   883→                                                                  type: "category",
+   884→                                                                  id: cat.id,
+   885→                                                                  name: cat.name,
+   886→                                                                })
+   887→                                                              }
+   888→                                                            >
+   889→                                                              <Trash2 className="h-3 w-3" />
+   890→                                                            </Button>
+   891→                                                            <Button
+   892→                                                              variant="ghost"
+   893→                                                              size="sm"
+   894→                                                              className="h-6 w-6 p-0"
+   895→                                                              onClick={() => {
+   896→                                                                setAddMode("subcategory");
+   897→                                                                setAddParentId(cat.id);
+   898→                                                                setAddInput("");
+   899→                                                              }}
+   900→                                                            >
+   901→                                                              <Plus className="h-3 w-3" />
+   902→                                                            </Button>
+   903→                                                          </div>
+   904→                                                        </AccordionTrigger>
+   905→
+   906→                                                        {/* Inline rename for category */}
+   907→                                                        {renamingId === `cat-${cat.id}` && (
+   908→                                                          <div className="flex items-center gap-2 px-6 py-1">
+   909→                                                            <Input
+   910→                                                              ref={renameInputRef}
+   911→                                                              value={renameValue}
+   912→                                                              onChange={(e) => setRenameValue(e.target.value)}
+   913→                                                              className="h-7 text-xs"
+   914→                                                              onKeyDown={(e) => {
+   915→                                                                if (e.key === "Enter") handleRename("category", cat.id);
+   916→                                                                if (e.key === "Escape") setRenamingId(null);
+   917→                                                              }}
+   918→                                                              onBlur={() => handleRename("category", cat.id)}
+   919→                                                            />
+   920→                                                          </div>
+   921→                                                        )}
+   922→
+   923→                                                        {/* Add Subcategory Form */}
+   924→                                                        {addMode === "subcategory" && addParentId === cat.id && (
+   925→                                                          <div className="flex items-center gap-2 px-6 py-1">
+   926→                                                            <Input
+   927→                                                              ref={addInputRef}
+   928→                                                              value={addInput}
+   929→                                                              onChange={(e) => setAddInput(e.target.value)}
+   930→                                                              placeholder="Subcategory name..."
+   931→                                                              className="h-7 text-xs"
+   932→                                                              onKeyDown={(e) => {
+   933→                                                                if (e.key === "Enter") handleAdd();
+   934→                                                                if (e.key === "Escape") setAddMode(null);
+   935→                                                              }}
+   936→                                                            />
+   937→                                                            <Button size="sm" className="h-7 text-xs" onClick={handleAdd}>Add</Button>
+   938→                                                            <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => setAddMode(null)}>✕</Button>
+   939→                                                          </div>
+   940→                                                        )}
+   941→
+   942→                                                        <AccordionContent className="pb-1">
+   943→                                                          {subs.length === 0 ? (
+   944→                                                            <p className="text-xs text-muted-foreground pl-8 py-1">No subcategories</p>
+   945→                                                          ) : (
+   946→                                                            subs.map((sub) => (
+   947→                                                              <div
+   948→                                                                key={sub.id}
+   949→                                                                className="flex items-center gap-2 pl-8 py-1 pr-2 group hover:bg-muted/50 rounded-md cursor-pointer"
+   950→                                                                onClick={() =>
+   951→                                                                  handleNodeClick({
+   952→                                                                    type: "subcategory",
+   953→                                                                    subcategoryId: sub.id,
+   954→                                                                    categoryId: sub.categoryId,
+   955→                                                                    locationId: sub.category.locationId,
+   956→                                                                  })
+   957→                                                                }
+   958→                                                              >
+   959→                                                                <Tag className="h-3 w-3 text-emerald-500 shrink-0" />
+   960→                                                                {renamingId === `sub-${sub.id}` ? (
+   961→                                                                  <Input
+   962→                                                                    ref={renameInputRef}
+   963→                                                                    value={renameValue}
+   964→                                                                    onChange={(e) => setRenameValue(e.target.value)}
+   965→                                                                    className="h-6 text-xs flex-1"
+   966→                                                                    onClick={(e) => e.stopPropagation()}
+   967→                                                                    onKeyDown={(e) => {
+   968→                                                                      if (e.key === "Enter") { e.stopPropagation(); handleRename("subcategory", sub.id); }
+   969→                                                                      if (e.key === "Escape") { e.stopPropagation(); setRenamingId(null); }
+   970→                                                                    }}
+   971→                                                                    onBlur={() => handleRename("subcategory", sub.id)}
+   972→                                                                  />
+   973→                                                                ) : (
+   974→                                                                  <span className="text-xs truncate flex-1">{sub.name}</span>
+   975→                                                                )}
+   976→                                                                <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
+   977→                                                                  {sub.productCount}
+   978→                                                                </Badge>
+   979→                                                                {sub.isActive === 0 && (
+   980→                                                                  <Badge variant="outline" className="text-[10px] px-1 py-0 text-muted-foreground">
+   981→                                                                    off
+   982→                                                                  </Badge>
+   983→                                                                )}
+   984→                                                                <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity" onClick={(e) => e.stopPropagation()}>
+   985→                                                                  <Switch
+   986→                                                                    checked={sub.isActive === 1}
+   987→                                                                    onCheckedChange={() => handleToggleActive("subcategory", sub.id)}
+   988→                                                                    className="scale-50"
+   989→                                                                  />
+   990→                                                                  {renamingId !== `sub-${sub.id}` && (
+   991→                                                                    <>
+   992→                                                                      <Button
+   993→                                                                        variant="ghost"
+   994→                                                                        size="sm"
+   995→                                                                        className="h-5 w-5 p-0"
+   996→                                                                        onClick={() => {
+   997→                                                                          setRenamingId(`sub-${sub.id}`);
+   998→                                                                          setRenameValue(sub.name);
+   999→                                                                        }}
+  1000→                                                                      >
+  1001→                                                                        <Pencil className="h-2.5 w-2.5" />
+  1002→                                                                      </Button>
+  1003→                                                                      <Button
+  1004→                                                                        variant="ghost"
+  1005→                                                                        size="sm"
+  1006→                                                                        className="h-5 w-5 p-0 text-destructive hover:text-destructive"
+  1007→                                                                        onClick={() =>
+  1008→                                                                          setDeleteTarget({
+  1009→                                                                            type: "subcategory",
+  1010→                                                                            id: sub.id,
+  1011→                                                                            name: sub.name,
+  1012→                                                                          })
+  1013→                                                                        }
+  1014→                                                                      >
+  1015→                                                                        <Trash2 className="h-2.5 w-2.5" />
+  1016→                                                                      </Button>
+  1017→                                                                    </>
+  1018→                                                                  )}
+  1019→                                                                </div>
+  1020→                                                              </div>
+  1021→                                                            ))
+  1022→                                                          )}
+  1023→                                                        </AccordionContent>
+  1024→                                                      </AccordionItem>
+  1025→                                                    </Accordion>
+  1026→                                                  </div>
+  1027→                                                );
+  1028→                                              })
+  1029→                                            )}
+  1030→                                          </AccordionContent>
+  1031→                                        </AccordionItem>
+  1032→                                      );
+  1033→                                    })}
+  1034→                                  </Accordion>
+  1035→                                </div>
+  1036→                              );
+  1037→                            })}
+  1038→                          </AccordionContent>
+  1039→                        </AccordionItem>
+  1040→                      );
+  1041→                    })}
+  1042→                  </Accordion>
+  1043→                )}
+  1044→              </div>
+  1045→            </div>
+  1046→          </ResizablePanel>
+  1047→
+  1048→          <ResizableHandle withHandle />
+  1049→
+  1050→          {/* ─── Right Panel: Products ─── */}
+  1051→          <ResizablePanel defaultSize={70}>
+  1052→            <div className="h-full flex flex-col">
+  1053→              {/* Toolbar */}
+  1054→              <div className="p-3 border-b flex items-center gap-2 flex-wrap">
+  1055→                <div className="relative flex-1 min-w-[200px]">
+  1056→                  <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+  1057→                  <Input
+  1058→                    placeholder="Search products..."
+  1059→                    value={search}
+  1060→                    onChange={(e) => setSearch(e.target.value)}
+  1061→                    className="pl-9 h-9 text-sm"
+  1062→                  />
+  1063→                </div>
+  1064→                {filter.type !== "all" && (
+  1065→                  <Button
+  1066→                    variant="outline"
+  1067→                    size="sm"
+  1068→                    className="h-9"
+  1069→                    onClick={() => setFilter({ type: "all" })}
+  1070→                  >
+  1071→                    <X className="h-3.5 w-3.5 mr-1" />
+  1072→                    Clear filter
+  1073→                  </Button>
+  1074→                )}
+  1075→                <span className="text-xs text-muted-foreground">
+  1076→                  {productTotal} product{productTotal !== 1 ? "s" : ""}
+  1077→                </span>
+  1078→              </div>
+  1079→
+  1080→              {/* Table */}
+  1081→              <div className="flex-1 overflow-auto">
+  1082→                {productsLoading ? (
+  1083→                  <div className="p-4 space-y-2">
+  1084→                    {Array.from({ length: 5 }).map((_, i) => (
+  1085→                      <Skeleton key={i} className="h-10 w-full" />
+  1086→                    ))}
+  1087→                  </div>
+  1088→                ) : products.length === 0 ? (
+  1089→                  <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+  1090→                    <Package className="h-10 w-10 mb-2" />
+  1091→                    <p className="text-sm">No products found</p>
+  1092→                  </div>
+  1093→                ) : (
+  1094→                  <Table>
+  1095→                    <TableHeader>
+  1096→                      <TableRow>
+  1097→                        <TableHead className="w-12">ID</TableHead>
+  1098→                        <TableHead className="w-12">Photo</TableHead>
+  1099→                        <TableHead>Name</TableHead>
+  1100→                        <TableHead className="hidden md:table-cell">Category</TableHead>
+  1101→                        <TableHead className="hidden lg:table-cell">Subcategory</TableHead>
+  1102→                        <TableHead className="w-24">Price</TableHead>
+  1103→                        <TableHead className="w-20">Stock</TableHead>
+  1104→                        <TableHead className="w-24">Actions</TableHead>
+  1105→                      </TableRow>
+  1106→                    </TableHeader>
+  1107→                    <TableBody>
+  1108→                      {products.map((p) => (
+  1109→                        <TableRow key={p.id}>
+  1110→                          <TableCell className="font-mono text-xs text-muted-foreground">{p.id}</TableCell>
+  1111→                          <TableCell>
+  1112→                            {p.photoUrl ? (
+  1113→                              <img
+  1114→                                src={p.photoUrl}
+  1115→                                alt={p.name}
+  1116→                                className="w-10 h-10 rounded object-cover"
+  1117→                                onError={(e) => {
+  1118→                                  (e.target as HTMLImageElement).style.display = "none";
+  1119→                                }}
+  1120→                              />
+  1121→                            ) : (
+  1122→                              <div className="w-10 h-10 rounded bg-muted flex items-center justify-center">
+  1123→                                <Package className="h-4 w-4 text-muted-foreground" />
+  1124→                              </div>
+  1125→                            )}
+  1126→                          </TableCell>
+  1127→                          <TableCell className="font-medium max-w-[200px] truncate">{p.name}</TableCell>
+  1128→                          <TableCell className="hidden md:table-cell text-xs text-muted-foreground">{p.category.name}</TableCell>
+  1129→                          <TableCell className="hidden lg:table-cell text-xs text-muted-foreground">
+  1130→                            {p.subcategory?.name || "—"}
+  1131→                          </TableCell>
+  1132→                          <TableCell className="font-mono text-sm">
+  1133→                            ${p.price.toFixed(2)}
+  1134→                          </TableCell>
+  1135→                          <TableCell className="text-sm">
+  1136→                            {p.isMono === 1 ? "∞" : p.quantityInStock}
+  1137→                          </TableCell>
+  1138→                          <TableCell>
+  1139→                            <div className="flex items-center gap-1">
+  1140→                              <Button
+  1141→                                variant="ghost"
+  1142→                                size="sm"
+  1143→                                className="h-7 w-7 p-0"
+  1144→                                onClick={() => openProductModal(p)}
+  1145→                              >
+  1146→                                <Pencil className="h-3.5 w-3.5" />
+  1147→                              </Button>
+  1148→                              <Button
+  1149→                                variant="ghost"
+  1150→                                size="sm"
+  1151→                                className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+  1152→                                onClick={() =>
+  1153→                                  setDeleteTarget({
+  1154→                                    type: "product",
+  1155→                                    id: p.id,
+  1156→                                    name: p.name,
+  1157→                                  })
+  1158→                                }
+  1159→                              >
+  1160→                                <Trash2 className="h-3.5 w-3.5" />
+  1161→                              </Button>
+  1162→                            </div>
+  1163→                          </TableCell>
+  1164→                        </TableRow>
+  1165→                      ))}
+  1166→                    </TableBody>
+  1167→                  </Table>
+  1168→                )}
+  1169→              </div>
+  1170→
+  1171→              {/* Pagination */}
+  1172→              {totalPages > 1 && (
+  1173→                <div className="p-3 border-t flex items-center justify-between">
+  1174→                  <span className="text-xs text-muted-foreground">
+  1175→                    Page {productPage} of {totalPages}
+  1176→                  </span>
+  1177→                  <div className="flex items-center gap-2">
+  1178→                    <Button
+  1179→                      variant="outline"
+  1180→                      size="sm"
+  1181→                      className="h-8"
+  1182→                      disabled={productPage <= 1}
+  1183→                      onClick={() => setProductPage((p) => p - 1)}
+  1184→                    >
+  1185→                      Previous
+  1186→                    </Button>
+  1187→                    <Button
+  1188→                      variant="outline"
+  1189→                      size="sm"
+  1190→                      className="h-8"
+  1191→                      disabled={productPage >= totalPages}
+  1192→                      onClick={() => setProductPage((p) => p + 1)}
+  1193→                    >
+  1194→                      Next
+  1195→                    </Button>
+  1196→                  </div>
+  1197→                </div>
+  1198→              )}
+  1199→            </div>
+  1200→          </ResizablePanel>
+  1201→        </ResizablePanelGroup>
+  1202→      </div>
+  1203→
+  1204→      {/* ─── Product Modal ─── */}
+  1205→      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+  1206→        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+  1207→          <DialogHeader>
+  1208→            <DialogTitle>{editProduct ? "Edit Product" : "Add Product"}</DialogTitle>
+  1209→          </DialogHeader>
+  1210→
+  1211→          <div className="grid gap-4 py-2">
+  1212→            {/* Row 1: Cascading Selects */}
+  1213→            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+  1214→              <div className="space-y-1.5">
+  1215→                <Label className="text-xs">Location</Label>
+  1216→                <Select value={formData.locationId} onValueChange={handleLocationChange}>
+  1217→                  <SelectTrigger className="h-9 text-sm">
+  1218→                    <SelectValue placeholder="Select location" />
+  1219→                  </SelectTrigger>
+  1220→                  <SelectContent>
+  1221→                    {Array.from(locationGroups.entries()).map(([key, locs]) => (
+  1222→                      <SelectGroup key={key}>
+  1223→                        <SelectLabel>{key}</SelectLabel>
+  1224→                        {locs.map((loc) => {
+  1225→                          const label = loc.district
+  1226→                            ? `${loc.country} > ${loc.city} > ${loc.district}`
+  1227→                            : `${loc.country} > ${loc.city}`;
+  1228→                          return (
+  1229→                            <SelectItem key={loc.id} value={String(loc.id)}>
+  1230→                              <span className="truncate text-xs">{label}</span>
+  1231→                            </SelectItem>
+  1232→                          );
+  1233→                        })}
+  1234→                      </SelectGroup>
+  1235→                    ))}
+  1236→                  </SelectContent>
+  1237→                </Select>
+  1238→              </div>
+  1239→
+  1240→              <div className="space-y-1.5">
+  1241→                <Label className="text-xs">Category</Label>
+  1242→                <Select
+  1243→                  value={formData.categoryId}
+  1244→                  onValueChange={handleCategoryChange}
+  1245→                  disabled={!formData.locationId}
+  1246→                >
+  1247→                  <SelectTrigger className="h-9 text-sm">
+  1248→                    <SelectValue placeholder="Select category" />
+  1249→                  </SelectTrigger>
+  1250→                  <SelectContent>
+  1251→                    {formCategories.map((cat) => (
+  1252→                      <SelectItem key={cat.id} value={String(cat.id)}>
+  1253→                        {cat.name}
+  1254→                      </SelectItem>
+  1255→                    ))}
+  1256→                  </SelectContent>
+  1257→                </Select>
+  1258→              </div>
+  1259→
+  1260→              <div className="space-y-1.5">
+  1261→                <Label className="text-xs">Subcategory</Label>
+  1262→                <Select
+  1263→                  value={formData.subcategoryId}
+  1264→                  onValueChange={(v) => setFormData({ ...formData, subcategoryId: v === "__none__" ? "" : v })}
+  1265→                  disabled={!formData.categoryId}
+  1266→                >
+  1267→                  <SelectTrigger className="h-9 text-sm">
+  1268→                    <SelectValue placeholder="Select subcategory" />
+  1269→                  </SelectTrigger>
+  1270→                  <SelectContent>
+  1271→                    <SelectItem value="__none__">None</SelectItem>
+  1272→                    {formSubcategories.map((sub) => (
+  1273→                      <SelectItem key={sub.id} value={String(sub.id)}>
+  1274→                        {sub.name}
+  1275→                      </SelectItem>
+  1276→                    ))}
+  1277→                  </SelectContent>
+  1278→                </Select>
+  1279→              </div>
+  1280→            </div>
+  1281→
+  1282→            {/* Row 2: Name, Price, Stock, Mono */}
+  1283→            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+  1284→              <div className="space-y-1.5">
+  1285→                <Label className="text-xs">Name *</Label>
+  1286→                <Input
+  1287→                  value={formData.name}
+  1288→                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+  1289→                  placeholder="Product name"
+  1290→                  className="h-9 text-sm"
+  1291→                />
+  1292→              </div>
+  1293→              <div className="space-y-1.5">
+  1294→                <Label className="text-xs">Price ($) *</Label>
+  1295→                <Input
+  1296→                  type="number"
+  1297→                  min="0.01"
+  1298→                  step="0.01"
+  1299→                  value={formData.price}
+  1300→                  onChange={(e) => setFormData({ ...formData, price: e.target.value })}
+  1301→                  placeholder="0.00"
+  1302→                  className="h-9 text-sm"
+  1303→                />
+  1304→              </div>
+  1305→            </div>
+  1306→
+  1307→            <div className="flex items-center gap-3">
+  1308→              <div className="flex items-center gap-2">
+  1309→                <Checkbox
+  1310→                  id="is-mono"
+  1311→                  checked={formData.isMono}
+  1312→                  onCheckedChange={(checked) =>
+  1313→                    setFormData({ ...formData, isMono: !!checked })
+  1314→                  }
+  1315→                />
+  1316→                <Label htmlFor="is-mono" className="text-xs cursor-pointer">
+  1317→                  Digital Product (infinite stock)
+  1318→                </Label>
+  1319→              </div>
+  1320→              {!formData.isMono && (
+  1321→                <div className="flex items-center gap-2">
+  1322→                  <Label className="text-xs">Stock:</Label>
+  1323→                  <Input
+  1324→                    type="number"
+  1325→                    min="0"
+  1326→                    value={formData.quantityInStock}
+  1327→                    onChange={(e) => setFormData({ ...formData, quantityInStock: e.target.value })}
+  1328→                    className="h-9 text-sm w-24"
+  1329→                  />
+  1330→                </div>
+  1331→              )}
+  1332→              {formData.isMono && (
+  1333→                <span className="text-sm font-mono text-muted-foreground">Stock: ∞</span>
+  1334→              )}
+  1335→            </div>
+  1336→
+  1337→            {/* Row 3: Description */}
+  1338→            <div className="space-y-1.5">
+  1339→              <Label className="text-xs">Description</Label>
+  1340→              <Textarea
+  1341→                value={formData.description}
+  1342→                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+  1343→                placeholder="Product description..."
+  1344→                rows={3}
+  1345→                className="text-sm"
+  1346→              />
+  1347→            </div>
+  1348→
+  1349→            {/* Row 4: Photo URLs */}
+  1350→            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+  1351→              <div className="space-y-1.5">
+  1352→                <Label className="text-xs">Photo URL</Label>
+  1353→                <Input
+  1354→                  value={formData.photoUrl}
+  1355→                  onChange={(e) => setFormData({ ...formData, photoUrl: e.target.value })}
+  1356→                  placeholder="https://..."
+  1357→                  className="h-9 text-sm"
+  1358→                />
+  1359→              </div>
+  1360→              <div className="space-y-1.5">
+  1361→                <Label className="text-xs">Hidden Photo URL</Label>
+  1362→                <Input
+  1363→                  value={formData.hiddenPhotoUrl}
+  1364→                  onChange={(e) => setFormData({ ...formData, hiddenPhotoUrl: e.target.value })}
+  1365→                  placeholder="https://..."
+  1366→                  className="h-9 text-sm"
+  1367→                />
+  1368→              </div>
+  1369→            </div>
+  1370→
+  1371→            {/* Row 5: Hidden content */}
+  1372→            <details className="group">
+  1373→              <summary className="text-xs font-medium cursor-pointer text-muted-foreground hover:text-foreground transition-colors py-1">
+  1374→                ▸ Hidden Content Fields
+  1375→              </summary>
+  1376→              <div className="grid gap-3 mt-2 pl-2 border-l-2 border-muted">
+  1377→                <div className="space-y-1.5">
+  1378→                  <Label className="text-xs">Hidden Description</Label>
+  1379→                  <Textarea
+  1380→                    value={formData.hiddenDescription}
+  1381→                    onChange={(e) => setFormData({ ...formData, hiddenDescription: e.target.value })}
+  1382→                    placeholder="Hidden description (shown after purchase)..."
+  1383→                    rows={2}
+  1384→                    className="text-sm"
+  1385→                  />
+  1386→                </div>
+  1387→                <div className="space-y-1.5">
+  1388→                  <Label className="text-xs">Hidden Coordinates</Label>
+  1389→                  <Input
+  1390→                    value={formData.hiddenCoordinates}
+  1391→                    onChange={(e) => setFormData({ ...formData, hiddenCoordinates: e.target.value })}
+  1392→                    placeholder="lat,lng"
+  1393→                    className="h-9 text-sm"
+  1394→                  />
+  1395→                </div>
+  1396→                <div className="space-y-1.5">
+  1397→                  <Label className="text-xs">Private Data</Label>
+  1398→                  <Textarea
+  1399→                    value={formData.privateData}
+  1400→                    onChange={(e) => setFormData({ ...formData, privateData: e.target.value })}
+  1401→                    placeholder="Private data (credentials, keys, etc.)..."
+  1402→                    rows={2}
+  1403→                    className="text-sm"
+  1404→                  />
+  1405→                </div>
+  1406→              </div>
+  1407→            </details>
+  1408→          </div>
+  1409→
+  1410→          <DialogFooter>
+  1411→            <Button variant="outline" onClick={() => setModalOpen(false)} disabled={saving}>
+  1412→              Cancel
+  1413→            </Button>
+  1414→            <Button onClick={handleSaveProduct} disabled={saving}>
+  1415→              {saving ? "Saving..." : editProduct ? "Update Product" : "Create Product"}
+  1416→            </Button>
+  1417→          </DialogFooter>
+  1418→        </DialogContent>
+  1419→      </Dialog>
+  1420→
+  1421→      {/* ─── Delete Confirmation ─── */}
+  1422→      <AlertDialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
+  1423→        <AlertDialogContent>
+  1424→          <AlertDialogHeader>
+  1425→            <AlertDialogTitle>Delete {deleteTarget?.type}?</AlertDialogTitle>
+  1426→            <AlertDialogDescription>
+  1427→              Are you sure you want to delete &quot;{deleteTarget?.name}&quot;? This action cannot be
+  1428→              undone.
+  1429→            </AlertDialogDescription>
+  1430→          </AlertDialogHeader>
+  1431→          <AlertDialogFooter>
+  1432→            <AlertDialogCancel>Cancel</AlertDialogCancel>
+  1433→            <AlertDialogAction
+  1434→              onClick={handleDelete}
+  1435→              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+  1436→            >
+  1437→              Delete
+  1438→            </AlertDialogAction>
+  1439→          </AlertDialogFooter>
+  1440→        </AlertDialogContent>
+  1441→      </AlertDialog>
+  1442→    </div>
+  1443→  );
+  1444→}
+  1445→
\ No newline at end of file
diff --git a/worklog.md b/worklog.md
index 563f3cd..e1403a2 100644
--- a/worklog.md
+++ b/worklog.md
@@ -167,3 +167,141 @@ Stage Summary:
 - Add real photo upload support (multipart/form-data)
 - Add WebSocket for live dashboard updates
 - Add pagination to all list pages
+
+---
+Task ID: QA-fix
+Agent: QA Fixer
+Task: Comprehensive QA review and styling consistency fixes across all page components
+
+Work Log:
+- Surveyed all 11 page components and login page for 6 critical issues
+- **Critical issues (1-6) audit results:**
+  - No `router.push()` calls found — all navigation already uses `window.location.hash`
+  - No `useRouter` imports from next/navigation in any page component
+  - No missing `@/` prefix on imports — all imports use `@/` alias
+  - All page components use named exports (e.g. `export function DashboardPage()`) — no `export default`
+  - `useAuthStore` for role checking already present in `wallets-page.tsx` and `seed-page.tsx`
+  - All pages use `import { toast } from "sonner"` — no `use-toast` imports
+
+- **Styling fixes applied to all 11 page components:**
+  - **Padding**: Added `p-4 md:p-6` to all page wrappers (was `p-6` or missing)
+  - **Page titles**: Added/changed `<h2 className="text-xl font-semibold">` to all pages (was `h1 text-2xl font-bold` or missing)
+  - **Table max-h**: Changed `max-h-[calc(100vh-14rem)]` → `max-h-[calc(100vh-12rem)]` in 6 files (purchases, audit, categories, locations, locales, catalog)
+  - **Empty states**: Added centered icons (lucide-react) to empty states in: users, purchases, audit, categories, locations, locales
+  - **date-fns**: Replaced `toLocaleDateString()` with `format()` from `date-fns` in dashboard, user-detail, purchases, audit pages
+  - **KPI grid**: Updated dashboard from `grid-cols-2 sm:grid-cols-3 lg:grid-cols-5` → `grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5`
+  - **Separators**: Added `<Separator />` between major sections in dashboard, user-detail, settings, seed pages
+  - **Settings**: Added `<Separator />` between section groups (Bot/WireGuard/Admin)
+
+- **Specific page fixes:**
+  - Dashboard: Added `date-fns` import, `Separator` import, fixed date formatting, added md breakpoint to KPI grid
+  - Users: Added `Users` icon import, empty state with icon, title and padding fixes
+  - User Detail: Added `date-fns` and `Separator` imports, fixed date formatting, title change, added separator before purchases table
+  - Wallets: Added padding and title fix
+  - Purchases: Added `ShoppingCart` icon import, padding, title, empty state icon, date format fix
+  - Audit: Added `FileText` icon import, padding, title, empty state icon, date format fix
+  - Categories: Added `FolderOpen` icon import, padding, title, empty state icon
+  - Locations: Added `MapPin` icon import, padding, title, empty state icon
+  - Settings: Added `Separator` import, padding, title, separators between section groups
+  - Locales: Added `Languages` icon import, padding, title, empty state icon
+  - Seed: Added `Separator` import, padding, title, separator after header
+  - Catalog: Fixed tree panel max-h from 14rem to 12rem
+
+Stage Summary:
+- All 6 critical issues were already correctly implemented by previous agents
+- 40+ styling fixes applied for UI consistency
+- ESLint: 0 errors, 0 warnings (verified)
+
+---
+Task ID: new-features-1
+Agent: Main Coordinator
+Task: Add Command Palette, Notification Badge, Breadcrumbs, and Status Indicator
+
+Work Log:
+- **FEATURE 1 — Command Palette (Ctrl+K)**
+  - Created `src/components/layout/command-palette.tsx` with `CommandPalette` component and `openCommandPalette` helper
+  - Uses shadcn `CommandDialog`, `CommandInput`, `CommandList`, `CommandGroup`, `CommandItem`, `CommandSeparator`, `CommandEmpty`
+  - Ctrl+K / Cmd+K keyboard shortcut toggles open state (useEffect + keydown listener)
+  - Custom DOM event (`command-palette:toggle`) allows external trigger from header search button
+  - Navigation group: all 11 pages with lucide-react icons
+  - Actions group: Seed Demo Data, Clear Data, Logout (with destructive styling)
+  - Escape key and click-outside close handled by CommandDialog
+  - Integrated into AdminHeader with Search icon button
+
+- **FEATURE 2 — Notification Badge on Purchases**
+  - Added `usePendingCount` custom hook in `admin-sidebar.tsx`
+  - Fetches `/api/purchases/bulk?status=pending&limit=1` on mount and window focus
+  - Shows red `SidebarMenuBadge` with count on Purchases menu item when > 0
+  - Badge hidden when sidebar is collapsed to icon mode (handled by SidebarMenuBadge)
+
+- **FEATURE 3 — Breadcrumbs**
+  - Created `src/components/layout/breadcrumbs.tsx` with `AppBreadcrumbs` component
+  - Reads `window.location.hash` and parses into crumb trail
+  - Shows: Home > Section > Sub-page (e.g. Home > Users > alice for /users/123)
+  - Responsive: desktop shows all crumbs, mobile shows ellipsis + last 2 items
+  - Integrated into AdminHeader between separator and title
+
+- **FEATURE 4 — Status Indicator in Sidebar Footer**
+  - Added `useConnectionStatus` custom hook calling `checkSession()` on mount and window focus
+  - Green dot = connected (session valid), gray dot = disconnected
+  - Text label hidden when sidebar collapsed to icon mode
+
+Stage Summary:
+- 4 features implemented across 3 files (1 new, 2 modified)
+- ESLint: 0 errors, 0 warnings (verified)
+
+---
+Task ID: new-features-2
+Agent: Main Coordinator
+Task: Activity Feed, Export Button, Sortable Header, Clipboard Utility, Integration
+
+Work Log:
+- **FEATURE 5 — Global Activity Feed**
+  - Created `src/components/layout/activity-feed.tsx` with `ActivityFeed` component
+  - Fetches `/api/audit/bulk?limit=15` on mount with 30-second auto-refresh
+  - Action icon mapping: login=LogIn(blue), balance_adjust=DollarSign(orange), status_toggle=UserX(red), seed_phrase_viewed=KeyRound(purple), product_created=Package(green), settings_changed=Settings(green), purchase_approved=CheckCircle(green), wallet_added=Wallet(cyan), commission_paid=CreditCard(amber), user_registered=UserPlus(teal), default=FileText(gray)
+  - Relative timestamps (e.g. "2m ago", "1h ago", "3d ago")
+  - `max-h-48 overflow-y-auto` with compact items and subtle borders
+  - "No recent activity" empty state with loading skeleton
+  - Integrated into Dashboard: replaced inline activity feed, placed full-width below wallet summary
+  - Cleaned up dashboard: removed unused `Activity` interface, `formatDate` helper, `FileText` import, `date-fns` import
+
+- **FEATURE 6 — Export Button**
+  - Created `src/components/shared/export-button.tsx` with `ExportButton` component
+  - Props: `data: Record<string, unknown>[]`, `filename: string`, `label?: string`
+  - Uses shadcn DropdownMenu with CSV format option
+  - Converts data to CSV with proper escaping (quotes, commas, newlines)
+  - Creates Blob and triggers download via dynamically-created anchor element
+  - Toast on success: "Exported X rows", toast.info on empty data
+
+- **FEATURE 7 — Sortable Header**
+  - Created `src/components/shared/sortable-header.tsx` with `SortableHeader` component
+  - Props: column, label, sortColumn, sortDirection ("asc"|"desc"|null), onSort
+  - Three-state toggle: unsorted→asc→desc→unsorted
+  - Icons: ArrowUpDown (unsorted), ArrowUp (asc), ArrowDown (desc)
+  - Active column gets text-primary, others text-muted-foreground
+
+- **FEATURE 8 — Clipboard Utility**
+  - Created `src/lib/clipboard.ts` with async `copyToClipboard(text: string): Promise<boolean>`
+  - Primary: `navigator.clipboard.writeText`
+  - Fallback: hidden textarea + `document.execCommand("copy")`
+  - Returns boolean success indicator
+
+- **INTEGRATION — Purchases Page**
+  - Added ExportButton (top-right, exports visible/sorted rows as CSV)
+  - Added SortableHeader on Date, Total Price, Status columns
+  - Client-side sorting with useMemo
+  - Replaced `navigator.clipboard.writeText` with `copyToClipboard` utility for TX hash copy
+
+- **INTEGRATION — Audit Page**
+  - Added ExportButton (top-right, exports visible/sorted rows as CSV)
+  - Added SortableHeader on Action, Date columns
+  - Client-side sorting with useMemo
+
+- **INTEGRATION — Users Page**
+  - Added ExportButton next to search input
+  - Exports visible rows with friendly column names and status labels
+
+Stage Summary:
+- 4 new files created, 4 existing files modified
+- ESLint: 0 errors, 0 warnings (verified)