Add admin dashboard pages and restructure admin route

Introduces new admin dashboard pages for alerts, bans, invites, orders, settings, status, and vendors under app/dashboard/admin/. Moves the main admin page to the new dashboard structure and adds a shared admin layout. Updates sidebar configuration and adds supporting components and hooks for admin features.

components/admin/OrdersTable.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+import { useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Search, Filter, Eye, ChevronLeft, ChevronRight } from "lucide-react";
+
+interface Order {
+  orderId: string | number;
+  userId: string;
+  total: number;
+  createdAt: string;
+  status: string;
+  items: Array<{
+    name: string;
+    quantity: number;
+  }>;
+  vendorUsername?: string;
+}
+
+interface OrdersTableProps {
+  orders: Order[];
+}
+
+const getStatusStyle = (status: string) => {
+  switch (status) {
+    case 'acknowledged':
+      return 'bg-purple-500/10 text-purple-500 border-purple-500/20';
+    case 'paid':
+      return 'bg-emerald-500/10 text-emerald-500 border-emerald-500/20';
+    case 'shipped':
+      return 'bg-blue-500/10 text-blue-500 border-blue-500/20';
+    case 'completed':
+      return 'bg-green-500/10 text-green-500 border-green-500/20';
+    case 'cancelled':
+      return 'bg-red-500/10 text-red-500 border-red-500/20';
+    case 'unpaid':
+      return 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20';
+    case 'confirming':
+      return 'bg-orange-500/10 text-orange-500 border-orange-500/20';
+    default:
+      return 'bg-gray-500/10 text-gray-500 border-gray-500/20';
+  }
+};
+
+export default function OrdersTable({ orders }: OrdersTableProps) {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [statusFilter, setStatusFilter] = useState("all");
+  const itemsPerPage = 10;
+
+  // Filter orders based on search and status
+  const filteredOrders = orders.filter(order => {
+    const matchesSearch = order.orderId.toString().toLowerCase().includes(searchTerm.toLowerCase()) ||
+                         order.userId.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                         (order.vendorUsername && order.vendorUsername.toLowerCase().includes(searchTerm.toLowerCase()));
+    
+    const matchesStatus = statusFilter === "all" || order.status === statusFilter;
+    
+    return matchesSearch && matchesStatus;
+  });
+
+  // Calculate pagination
+  const totalPages = Math.ceil(filteredOrders.length / itemsPerPage);
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const currentOrders = filteredOrders.slice(startIndex, endIndex);
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const handleSearchChange = (value: string) => {
+    setSearchTerm(value);
+    setCurrentPage(1); // Reset to first page when searching
+  };
+
+  const handleStatusFilterChange = (value: string) => {
+    setStatusFilter(value);
+    setCurrentPage(1); // Reset to first page when filtering
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle>Order Management</CardTitle>
+            <CardDescription>View and manage platform orders</CardDescription>
+          </div>
+          <div className="flex items-center space-x-2">
+            <div className="relative">
+              <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input 
+                placeholder="Search orders..." 
+                className="pl-8 w-64"
+                value={searchTerm}
+                onChange={(e) => handleSearchChange(e.target.value)}
+              />
+            </div>
+            <Select value={statusFilter} onValueChange={handleStatusFilterChange}>
+              <SelectTrigger className="w-32">
+                <SelectValue placeholder="Status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Status</SelectItem>
+                <SelectItem value="acknowledged">Acknowledged</SelectItem>
+                <SelectItem value="paid">Paid</SelectItem>
+                <SelectItem value="completed">Completed</SelectItem>
+                <SelectItem value="cancelled">Cancelled</SelectItem>
+              </SelectContent>
+            </Select>
+            <Button variant="outline" size="sm">
+              <Filter className="h-4 w-4 mr-2" />
+              Filters
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Order ID</TableHead>
+              <TableHead>Customer</TableHead>
+              <TableHead>Vendor</TableHead>
+              <TableHead>Product</TableHead>
+              <TableHead>Amount</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Payment</TableHead>
+              <TableHead>Date</TableHead>
+              <TableHead className="text-right">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {currentOrders.map((order) => (
+              <TableRow key={order.orderId}>
+                <TableCell className="font-medium">{order.orderId}</TableCell>
+                <TableCell>{order.userId}</TableCell>
+                <TableCell>{order.vendorUsername || 'N/A'}</TableCell>
+                <TableCell className="max-w-[200px] truncate">
+                  {order.items.length > 0 ? order.items[0].name : 'No items'}
+                </TableCell>
+                <TableCell>£{order.total.toFixed(2)}</TableCell>
+                <TableCell>
+                  <div className={`px-3 py-1 rounded-full border ${getStatusStyle(order.status)}`}>
+                    {order.status.toUpperCase()}
+                  </div>
+                </TableCell>
+                <TableCell>N/A</TableCell>
+                <TableCell>{new Date(order.createdAt).toLocaleDateString()}</TableCell>
+                <TableCell className="text-right">
+                  <Button variant="outline" size="sm">
+                    <Eye className="h-4 w-4" />
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="flex items-center justify-between mt-4">
+            <div className="text-sm text-muted-foreground">
+              Showing {startIndex + 1} to {Math.min(endIndex, filteredOrders.length)} of {filteredOrders.length} orders
+            </div>
+            <div className="flex items-center space-x-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => handlePageChange(currentPage - 1)}
+                disabled={currentPage === 1}
+              >
+                <ChevronLeft className="h-4 w-4" />
+                Previous
+              </Button>
+              
+              <div className="flex items-center space-x-1">
+                {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                  const pageNum = i + 1;
+                  return (
+                    <Button
+                      key={pageNum}
+                      variant={currentPage === pageNum ? "default" : "outline"}
+                      size="sm"
+                      onClick={() => handlePageChange(pageNum)}
+                      className="w-8 h-8 p-0"
+                    >
+                      {pageNum}
+                    </Button>
+                  );
+                })}
+              </div>
+
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => handlePageChange(currentPage + 1)}
+                disabled={currentPage === totalPages}
+              >
+                Next
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

components/layout/sidebar.tsx

@@ -2,17 +2,43 @@
 
 import { useState } from "react"
 import Link from "next/link"
-import { useRouter } from "next/navigation"
-import { ShoppingCart, LogOut } from "lucide-react"
+import { useRouter, usePathname } from "next/navigation"
+import { ShoppingCart, LogOut, Shield } from "lucide-react"
 import { NavItem } from "./nav-item"
 import { Button } from "@/components/ui/button"
 import { sidebarConfig } from "@/config/sidebar"
+import { adminSidebarConfig } from "@/config/admin-sidebar"
 import { logoutUser } from "@/lib/utils/auth"
 import { toast } from "sonner"
+import { useUser } from "@/hooks/useUser"
 
 const Sidebar: React.FC = () => {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
   const router = useRouter()
+  const pathname = usePathname()
+  const { isAdmin } = useUser()
+  
+  // Determine if we're in admin area
+  const isAdminArea = pathname?.startsWith('/dashboard/admin')
+  
+  // Filter sidebar config based on admin status
+  const getFilteredConfig = () => {
+    if (isAdminArea) {
+      return adminSidebarConfig
+    }
+    
+    // Filter out admin section for non-admin users
+    return sidebarConfig.filter(section => {
+      if (section.title === "Administration") {
+        return isAdmin
+      }
+      return true
+    })
+  }
+  
+  const currentConfig = getFilteredConfig()
+  const homeLink = isAdminArea ? '/dashboard/admin' : '/dashboard'
+  const icon = isAdminArea ? Shield : ShoppingCart
 
   const handleLogout = async () => {
     try {
@@ -39,15 +65,15 @@ const Sidebar: React.FC = () => {
         `}
       >
         <div className="h-full flex flex-col">
-          <Link href="/dashboard" className="h-16 px-6 flex items-center border-b border-border">
+          <Link href={homeLink} className="h-16 px-6 flex items-center border-b border-border">
             <div className="flex items-center gap-3">
-              <ShoppingCart className="h-6 w-6 text-foreground" />
+              {icon === Shield ? <Shield className="h-6 w-6 text-foreground" /> : <ShoppingCart className="h-6 w-6 text-foreground" />}
               <span className="text-lg font-semibold text-foreground">Ember</span>
             </div>
           </Link>
 
           <div className="flex-1 overflow-y-auto py-4 px-4 space-y-6">
-            {sidebarConfig.map((section, index) => (
+            {currentConfig.map((section, index) => (
               <div key={index}>
                 <div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                   {section.title}