add items per page

components/tables/order-table.tsx

@@ -64,6 +64,46 @@ interface StatusConfig {
 
 type OrderStatus = "paid" | "unpaid" | "acknowledged" | "shipped" | "completed" | "cancelled" | "confirming";
 
+// Create a StatusFilter component to replace the missing component
+const StatusFilter = ({ currentStatus, onChange }: { currentStatus: string, onChange: (value: string) => void }) => {
+  return (
+    <Select value={currentStatus} onValueChange={onChange}>
+      <SelectTrigger className="w-40">
+        <SelectValue placeholder="Filter Status" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">All Statuses</SelectItem>
+        {["paid", "unpaid", "acknowledged", "shipped", "completed", "cancelled", "confirming"].map(status => (
+          <SelectItem key={status} value={status}>
+            {status.charAt(0).toUpperCase() + status.slice(1)}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};
+
+// Create a PageSizeSelector component
+const PageSizeSelector = ({ currentSize, onChange, options }: { currentSize: number, onChange: (value: string) => void, options: number[] }) => {
+  return (
+    <div className="flex items-center gap-2">
+      <div className="text-sm font-medium text-muted-foreground">Show:</div>
+      <Select value={currentSize.toString()} onValueChange={onChange}>
+        <SelectTrigger className="w-24">
+          <SelectValue placeholder="Page Size" />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map(size => (
+            <SelectItem key={size} value={size.toString()}>
+              {size}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+};
+
 export default function OrderTable() {
   const [orders, setOrders] = useState<Order[]>([]);
   const [loading, setLoading] = useState(true);
@@ -77,7 +117,8 @@ export default function OrderTable() {
   }>({ column: "orderDate", direction: "desc" });
   const [selectedOrders, setSelectedOrders] = useState<Set<string>>(new Set());
   const [isShipping, setIsShipping] = useState(false);
-  const ITEMS_PER_PAGE = 10;
+  const [itemsPerPage, setItemsPerPage] = useState<number>(20);
+  const pageSizeOptions = [5, 10, 15, 20, 25, 50, 75, 100];
 
   // Fetch orders with server-side pagination
   const fetchOrders = useCallback(async () => {
@@ -85,7 +126,7 @@ export default function OrderTable() {
       setLoading(true);
       const queryParams = new URLSearchParams({
         page: currentPage.toString(),
-        limit: ITEMS_PER_PAGE.toString(),
+        limit: itemsPerPage.toString(),
         ...(statusFilter !== "all" && { status: statusFilter }),
       });
 
@@ -100,7 +141,7 @@ export default function OrderTable() {
     } finally {
       setLoading(false);
     }
-  }, [currentPage, statusFilter]);
+  }, [currentPage, statusFilter, itemsPerPage]);
 
   useEffect(() => {
     fetchOrders();
@@ -115,6 +156,12 @@ export default function OrderTable() {
     setCurrentPage(newPage);
   };
 
+  const handleItemsPerPageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newSize = parseInt(e.target.value, 10);
+    setItemsPerPage(newSize);
+    setCurrentPage(1); // Reset to first page when changing items per page
+  };
+
   // Derived data calculations
   const filteredOrders = orders.filter(
     (order) => statusFilter === "all" || order.status === statusFilter
@@ -138,8 +185,8 @@ export default function OrderTable() {
   });
 
   const paginatedOrders = sortedOrders.slice(
-    (currentPage - 1) * ITEMS_PER_PAGE,
+    (currentPage - 1) * itemsPerPage,
-    currentPage * ITEMS_PER_PAGE
+    currentPage * itemsPerPage
   );
 
   // Handlers
@@ -249,158 +296,160 @@ export default function OrderTable() {
   };
 
   return (
-    <div className="rounded-lg border shadow-sm overflow-hidden">
+    <div className="space-y-4">
-      {/* Toolbar */}
+      <div className="border border-zinc-800 rounded-md bg-black/40 overflow-hidden">
-      <div className="p-4 flex justify-between items-center border-b">
+        {/* Filters header */}
-        <div className="flex items-center gap-4">
+        <div className="p-4 border-b border-zinc-800 bg-black/60">
-          <Select value={statusFilter} onValueChange={setStatusFilter}>
+          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-            <SelectTrigger className="w-40">
+            <div className="flex flex-col sm:flex-row gap-2 sm:items-center">
-              <SelectValue placeholder="Filter Status" />
+              <StatusFilter
-            </SelectTrigger>
+                currentStatus={statusFilter}
-            <SelectContent>
+                onChange={setStatusFilter}
-              <SelectItem value="all">All Statuses</SelectItem>
+              />
-              {Object.keys(statusConfig).map(status => (
+              
-                <SelectItem key={status} value={status}>
+              <PageSizeSelector
-                  {status.charAt(0).toUpperCase() + status.slice(1)}
+                currentSize={itemsPerPage}
-                </SelectItem>
+                onChange={(value) => handleItemsPerPageChange({ target: { value } } as React.ChangeEvent<HTMLSelectElement>)}
-              ))}
+                options={pageSizeOptions}
-            </SelectContent>
+              />
-          </Select>
+            </div>
-          <div className="text-sm text-muted-foreground">
+            
-            Total Orders: {totalOrders}
+            <div className="flex items-center gap-2 self-end sm:self-auto">
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button disabled={selectedOrders.size === 0 || isShipping}>
+                    <Truck className="mr-2 h-5 w-5" />
+                    {isShipping ? (
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                      `Mark Shipped (${selectedOrders.size})`
+                    )}
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>Mark Orders as Shipped</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      Are you sure you want to mark {selectedOrders.size} order{selectedOrders.size !== 1 ? 's' : ''} as shipped? 
+                      This action cannot be undone.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <AlertDialogAction onClick={markAsShipped}>
+                      Confirm
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </div>
           </div>
         </div>
 
-        <AlertDialog>
+        {/* Table */}
-          <AlertDialogTrigger asChild>
+        <div className="relative">
-            <Button disabled={selectedOrders.size === 0 || isShipping}>
+          {loading && (
-              <Truck className="mr-2 h-5 w-5" />
+            <div className="absolute inset-0 bg-background/50 flex items-center justify-center">
-              {isShipping ? (
+              <Loader2 className="h-6 w-6 animate-spin" />
-                <Loader2 className="h-4 w-4 animate-spin" />
+            </div>
-              ) : (
+          )}
-                `Mark Shipped (${selectedOrders.size})`
+          <div className="max-h-[calc(100vh-300px)] overflow-auto">
-              )}
+            <Table className="[&_tr]:border-b [&_tr]:border-zinc-800 [&_tr:last-child]:border-b-0 [&_td]:border-r [&_td]:border-zinc-800 [&_td:last-child]:border-r-0 [&_th]:border-r [&_th]:border-zinc-800 [&_th:last-child]:border-r-0 [&_tr:hover]:bg-zinc-900/70">
-            </Button>
+              <TableHeader className="bg-black/60 sticky top-0 z-10">
-          </AlertDialogTrigger>
+                <TableRow>
-          <AlertDialogContent>
+                  <TableHead className="w-12">
-            <AlertDialogHeader>
-              <AlertDialogTitle>Mark Orders as Shipped</AlertDialogTitle>
-              <AlertDialogDescription>
-                Are you sure you want to mark {selectedOrders.size} order{selectedOrders.size !== 1 ? 's' : ''} as shipped? 
-                This action cannot be undone.
-              </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogCancel>Cancel</AlertDialogCancel>
-              <AlertDialogAction onClick={markAsShipped}>
-                Confirm
-              </AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
-      </div>
-
-      {/* Table */}
-      <div className="relative">
-        {loading && (
-          <div className="absolute inset-0 bg-background/50 flex items-center justify-center">
-            <Loader2 className="h-6 w-6 animate-spin" />
-          </div>
-        )}
-        <Table>
-          <TableHeader className="bg-muted">
-            <TableRow>
-              <TableHead className="w-12">
-                <Checkbox
-                  checked={selectedOrders.size === orders.length && orders.length > 0}
-                  onCheckedChange={toggleAll}
-                />
-              </TableHead>
-              <TableHead className="cursor-pointer" onClick={() => handleSort("orderId")}>
-                Order ID <ArrowUpDown className="ml-2 inline h-4 w-4" />
-              </TableHead>
-              <TableHead className="cursor-pointer" onClick={() => handleSort("totalPrice")}>
-                Total <ArrowUpDown className="ml-2 inline h-4 w-4" />
-              </TableHead>
-              <TableHead className="cursor-pointer" onClick={() => handleSort("status")}>
-                Status <ArrowUpDown className="ml-2 inline h-4 w-4" />
-              </TableHead>
-              <TableHead className="cursor-pointer" onClick={() => handleSort("orderDate")}>
-                Date <ArrowUpDown className="ml-2 inline h-4 w-4" />
-              </TableHead>
-              <TableHead>Buyer</TableHead>
-              <TableHead className="w-24">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {orders.map((order) => {
-              const StatusIcon = statusConfig[order.status as keyof typeof statusConfig]?.icon || XCircle;
-
-              return (
-                <TableRow key={order._id}>
-                  <TableCell>
                     <Checkbox
-                      checked={selectedOrders.has(order._id)}
+                      checked={selectedOrders.size === orders.length && orders.length > 0}
-                      onCheckedChange={() => toggleSelection(order._id)}
+                      onCheckedChange={toggleAll}
-                      disabled={order.status !== "paid" && order.status !== "acknowledged"}
                     />
-                  </TableCell>
+                  </TableHead>
-                  <TableCell>#{order.orderId}</TableCell>
+                  <TableHead className="cursor-pointer" onClick={() => handleSort("orderId")}>
-                  <TableCell>£{order.totalPrice.toFixed(2)}</TableCell>
+                    Order ID <ArrowUpDown className="ml-2 inline h-4 w-4" />
-                  <TableCell>
+                  </TableHead>
-                    <div className={`inline-flex items-center gap-2 px-3 py-1 rounded-full text-sm ${
+                  <TableHead className="cursor-pointer" onClick={() => handleSort("totalPrice")}>
-                      statusConfig[order.status as OrderStatus]?.bgColor || "bg-gray-500"
+                    Total <ArrowUpDown className="ml-2 inline h-4 w-4" />
-                    } ${statusConfig[order.status as OrderStatus]?.color || "text-white"}`}>
+                  </TableHead>
-                      {React.createElement(statusConfig[order.status as OrderStatus]?.icon || XCircle, {
+                  <TableHead className="cursor-pointer" onClick={() => handleSort("status")}>
-                        className: `h-4 w-4 ${statusConfig[order.status as OrderStatus]?.animate || ""}`
+                    Status <ArrowUpDown className="ml-2 inline h-4 w-4" />
-                      })}
+                  </TableHead>
-                      {order.status.charAt(0).toUpperCase() + order.status.slice(1)}
+                  <TableHead className="cursor-pointer" onClick={() => handleSort("orderDate")}>
-                    </div>
+                    Date <ArrowUpDown className="ml-2 inline h-4 w-4" />
-                  </TableCell>
+                  </TableHead>
-                  <TableCell>
+                  <TableHead>Buyer</TableHead>
-                    {new Date(order.orderDate).toLocaleDateString("en-GB")}
+                  <TableHead className="w-24 text-center">Actions</TableHead>
-                  </TableCell>
-                  <TableCell>
-                    {order.telegramUsername ? `@${order.telegramUsername}` : "-"}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    <Button variant="ghost" size="sm" asChild>
-                      <Link href={`/dashboard/orders/${order._id}`}>
-                        <Eye className="h-4 w-4" />
-                      </Link>     
-                    </Button>
-                  </TableCell>
                 </TableRow>
-              );
+              </TableHeader>
-            })}
+              <TableBody>
-          </TableBody>
+                {orders.map((order) => {
-        </Table>
+                  const StatusIcon = statusConfig[order.status as keyof typeof statusConfig]?.icon || XCircle;
-      </div>
 
-      {/* Pagination */}
+                  return (
-      <div className="flex items-center justify-between px-4 py-4 border-t">
+                    <TableRow key={order._id}>
-        <div className="text-sm text-muted-foreground">
+                      <TableCell>
-          Page {currentPage} of {totalPages}
+                        <Checkbox
+                          checked={selectedOrders.has(order._id)}
+                          onCheckedChange={() => toggleSelection(order._id)}
+                          disabled={order.status !== "paid" && order.status !== "acknowledged"}
+                        />
+                      </TableCell>
+                      <TableCell>#{order.orderId}</TableCell>
+                      <TableCell>£{order.totalPrice.toFixed(2)}</TableCell>
+                      <TableCell>
+                        <div className={`inline-flex items-center gap-2 px-3 py-1 rounded-full text-sm ${
+                          statusConfig[order.status as OrderStatus]?.bgColor || "bg-gray-500"
+                        } ${statusConfig[order.status as OrderStatus]?.color || "text-white"}`}>
+                          {React.createElement(statusConfig[order.status as OrderStatus]?.icon || XCircle, {
+                            className: `h-4 w-4 ${statusConfig[order.status as OrderStatus]?.animate || ""}`
+                          })}
+                          {order.status.charAt(0).toUpperCase() + order.status.slice(1)}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        {new Date(order.orderDate).toLocaleDateString("en-GB")}
+                      </TableCell>
+                      <TableCell>
+                        {order.telegramUsername ? `@${order.telegramUsername}` : "-"}
+                      </TableCell>
+                      <TableCell className="text-center">
+                        <Button variant="ghost" size="sm" className="mx-auto" asChild>
+                          <Link href={`/dashboard/orders/${order._id}`}>
+                            <Eye className="h-4 w-4" />
+                          </Link>     
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </div>
         </div>
-        <div className="flex gap-2">
+
-          <Button
+        {/* Pagination */}
-            variant="outline"
+        <div className="flex items-center justify-between px-4 py-4 border-t border-zinc-800 bg-black/40">
-            size="sm"
+          <div className="text-sm text-muted-foreground">
-            onClick={() => handlePageChange(currentPage - 1)}
+            Page {currentPage} of {totalPages} ({totalOrders} total)
-            disabled={currentPage === 1 || loading}
+          </div>
-          >
+          <div className="flex gap-2">
-            <ChevronLeft className="h-4 w-4" />
+            <Button
-            Previous
+              variant="outline"
-          </Button>
+              size="sm"
-          <Button
+              onClick={() => handlePageChange(currentPage - 1)}
-            variant="outline"
+              disabled={currentPage === 1 || loading}
-            size="sm"
+            >
-            onClick={() => handlePageChange(currentPage + 1)}
+              <ChevronLeft className="h-4 w-4" />
-            disabled={currentPage >= totalPages || loading}
+              Previous
-          >
+            </Button>
-            Next
+            <Button
-            <ChevronRight className="h-4 w-4" />
+              variant="outline"
-          </Button>
+              size="sm"
+              onClick={() => handlePageChange(currentPage + 1)}
+              disabled={currentPage >= totalPages || loading}
+            >
+              Next
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
         </div>
       </div>
     </div>

components/ui/table.tsx

@@ -9,7 +9,7 @@ const Table = React.forwardRef<
   <div className="relative w-full overflow-auto">
     <table
       ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
+      className={cn("w-full caption-bottom text-sm border-collapse", className)}
       {...props}
     />
   </div>
@@ -58,7 +58,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      "transition-colors hover:bg-muted/20 data-[state=selected]:bg-muted",
       className
     )}
     {...props}