Cleanup, change app login

app/login/page.tsx

@@ -8,7 +8,6 @@ import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Github } from "lucide-react"; // ✅ Added missing GitHub icon
 
 export default function LoginPage() {
   const [username, setUsername] = useState(""); // ✅ Fixed incorrect state name

components/kokonutui/sidebar.tsx

@@ -41,7 +41,7 @@ export default function Sidebar() {
       if (!res.ok) throw new Error("Logout failed")
 
       document.cookie = "authToken=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT;" // Clear cookie
-      router.push("/login") // Redirect to login page
+      router.push("/login") 
     } catch (error) {
       console.error("Error logging out:", error)
     }

components/order-table.tsx

@@ -24,12 +24,14 @@ import {
   XCircle,
   ChevronLeft,
   ChevronRight,
+  ArrowUpDown,
+  Truck,
 } from "lucide-react";
 import Link from "next/link";
 import { fetchWithAuthClient } from "@/lib/client-utils";
 import { toast } from "sonner";
+import { Checkbox } from "@/components/ui/checkbox";
 
-// ✅ Define Order Type
 interface Order {
   _id: string;
   orderId: number;
@@ -37,42 +39,32 @@ interface Order {
   totalPrice: number;
   escrowExpiresAt: string;
   telegramUsername: string;
-}
-
-interface OrdersResponse {
-  orders: Order[];
-  page: number;
-  totalPages: number;
+  createdAt: string;
 }
 
 export default function OrderTable() {
-  const [orders, setOrders] = useState<Order[] | null>(null);
+  const [orders, setOrders] = useState<Order[]>([]);
+  const [filteredOrders, setFilteredOrders] = useState<Order[]>([]);
+  const [selectedOrders, setSelectedOrders] = useState<Set<string>>(new Set());
   const [loading, setLoading] = useState<boolean>(true);
-  const [statusFilter, setStatusFilter] = useState<string>("all"); // ✅ Status Filter
+  const [statusFilter, setStatusFilter] = useState<string>("all");
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [totalPages, setTotalPages] = useState<number>(1);
+  const [sortColumn, setSortColumn] = useState<string>("createdAt");
+  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");
+  const ITEMS_PER_PAGE = 10;
 
-  // ✅ Fetch Orders with Pagination & Filtering
+  // Fetch Orders
   useEffect(() => {
     const fetchOrders = async () => {
       try {
         setLoading(true);
-        const query = new URLSearchParams({
-          page: currentPage.toString(),
-          limit: "10",
-        });
-
-        if (statusFilter !== "all") {
-          query.append("status", statusFilter);
-        }
-
-        const response: OrdersResponse = await fetchWithAuthClient(
-          `/orders?${query.toString()}`
-        );
+        const response = await fetchWithAuthClient("/orders");
 
         if (response.orders) {
           setOrders(response.orders);
-          setTotalPages(response.totalPages);
+          setFilteredOrders(response.orders);
+          setTotalPages(Math.ceil(response.orders.length / ITEMS_PER_PAGE));
         } else {
           throw new Error("Invalid API response format");
         }
@@ -85,17 +77,99 @@ export default function OrderTable() {
     };
 
     fetchOrders();
-  }, [statusFilter, currentPage]);
+  }, []);
+
+  // Filter Orders by Status
+  useEffect(() => {
+    const filtered = orders.filter(
+      (order) => statusFilter === "all" || order.status === statusFilter
+    );
+    setFilteredOrders(filtered);
+    setTotalPages(Math.ceil(filtered.length / ITEMS_PER_PAGE));
+    setCurrentPage(1); // Reset to the first page on filter change
+  }, [statusFilter, orders]);
+
+  // Sort Orders
+  const sortedOrders = filteredOrders.sort((a, b) => {
+    const aValue = a[sortColumn as keyof Order];
+    const bValue = b[sortColumn as keyof Order];
+
+    if (typeof aValue === "number" || typeof aValue === "string") {
+      if (aValue < bValue) return sortDirection === "asc" ? -1 : 1;
+      if (aValue > bValue) return sortDirection === "asc" ? 1 : -1;
+    }
+
+    return 0;
+  });
+
+  // Paginated Orders
+  const paginatedOrders = sortedOrders.slice(
+    (currentPage - 1) * ITEMS_PER_PAGE,
+    currentPage * ITEMS_PER_PAGE
+  );
+
+  // Handle Sorting
+  const handleSort = (column: string) => {
+    if (column === sortColumn) {
+      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+    } else {
+      setSortColumn(column);
+      setSortDirection("asc");
+    }
+  };
+
+  const toggleOrderSelection = (orderId: string) => {
+    setSelectedOrders((prev) => {
+      const updated = new Set(prev);
+      if (updated.has(orderId)) {
+        updated.delete(orderId);
+      } else {
+        updated.add(orderId);
+      }
+      return updated;
+    });
+  };
+
+  // Handle Bulk Actions
+  const markAsShipped = async () => {
+    try {
+      if (selectedOrders.size === 0) {
+        toast.warning("No orders selected.");
+        return;
+      }
+
+      const orderIds = Array.from(selectedOrders);
+      const response = await fetchWithAuthClient(
+        "/orders/mark-shipped",
+        "POST",
+        { orderIds }
+      );
+
+      if (response.success) {
+        setOrders((prevOrders) =>
+          prevOrders.map((order) =>
+            selectedOrders.has(order._id)
+              ? { ...order, status: "shipped" }
+              : order
+          )
+        );
+        setSelectedOrders(new Set());
+        toast.success("Orders marked as shipped successfully.");
+      } else {
+        throw new Error("Failed to update orders");
+      }
+    } catch (error) {
+      toast.error("Failed to update orders.");
+      console.error("Error marking orders as shipped:", error);
+    }
+  };
 
   return (
     <div className="rounded-lg border dark:border-zinc-700 shadow-sm overflow-hidden">
-      {/* ✅ Filtering UI */}
+      {/* Filter and Bulk Action */}
       <div className="p-4 flex justify-between items-center border-b dark:border-zinc-700">
-        <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
-          Orders
-        </h2>
         <Select value={statusFilter} onValueChange={setStatusFilter}>
-          <SelectTrigger className="w-32">
+          <SelectTrigger className="w-40">
             <SelectValue placeholder="Filter Status" />
           </SelectTrigger>
           <SelectContent>
@@ -106,15 +180,55 @@ export default function OrderTable() {
             <SelectItem value="completed">Completed</SelectItem>
           </SelectContent>
         </Select>
+        <Button onClick={markAsShipped} disabled={selectedOrders.size === 0}>
+          <Truck className="mr-2 h-5 w-5" />
+          Mark as Shipped
+        </Button>
       </div>
 
+      {/* Orders Table */}
       <Table>
         <TableHeader className="bg-gray-50 dark:bg-zinc-800/50">
           <TableRow>
-            <TableHead className="w-[150px] text-center">Order ID</TableHead>{" "}
-            {/* Center-aligned */}
-            <TableHead className="text-center">Total (£)</TableHead>
-            <TableHead className="text-center">Status</TableHead>
+            <TableHead className="w-[50px] text-center">
+              <Checkbox
+                checked={
+                  selectedOrders.size === paginatedOrders.length &&
+                  paginatedOrders.length > 0
+                }
+                onCheckedChange={(checked) =>
+                  setSelectedOrders(
+                    checked
+                      ? new Set(paginatedOrders.map((o) => o._id))
+                      : new Set()
+                  )
+                }
+              />
+            </TableHead>
+            <TableHead
+              className="text-center cursor-pointer"
+              onClick={() => handleSort("orderId")}
+            >
+              Order ID <ArrowUpDown className="ml-2 h-4 w-4 inline" />
+            </TableHead>
+            <TableHead
+              className="text-center cursor-pointer"
+              onClick={() => handleSort("totalPrice")}
+            >
+              Total (£) <ArrowUpDown className="ml-2 h-4 w-4 inline" />
+            </TableHead>
+            <TableHead
+              className="text-center cursor-pointer"
+              onClick={() => handleSort("status")}
+            >
+              Status <ArrowUpDown className="ml-2 h-4 w-4 inline" />
+            </TableHead>
+            <TableHead
+              className="text-center cursor-pointer"
+              onClick={() => handleSort("createdAt")}
+            >
+              Date <ArrowUpDown className="ml-2 h-4 w-4 inline" />
+            </TableHead>
             <TableHead className="text-center">Buyer</TableHead>
             <TableHead className="text-right">Action</TableHead>
           </TableRow>
@@ -122,32 +236,63 @@ export default function OrderTable() {
         <TableBody>
           {loading ? (
             <TableRow>
-              <TableCell colSpan={6} className="text-center py-4">
+              <TableCell colSpan={7} className="text-center py-4">
                 <Loader className="h-5 w-5 animate-spin" />
               </TableCell>
             </TableRow>
-          ) : orders && orders.length > 0 ? (
-            orders.map((order) => (
-              <TableRow
-                key={order._id}
-                className="transition-colors hover:bg-gray-50 dark:hover:bg-zinc-800/70"
-              >
-                <TableCell className="font-medium text-center">
-                  #{order.orderId}
+          ) : paginatedOrders.length ? (
+            paginatedOrders.map((order) => (
+              <TableRow key={order._id}>
+                <TableCell className="text-center">
+                  <Checkbox
+                    checked={selectedOrders.has(order._id)}
+                    onCheckedChange={() => toggleOrderSelection(order._id)}
+                  />
                 </TableCell>
+                <TableCell className="text-center">#{order.orderId}</TableCell>
                 <TableCell className="text-center">
                   £{order.totalPrice.toFixed(2)}
                 </TableCell>
                 <TableCell className="text-center">
-                  {order.status === "paid" ? (
-                    <div className="text-green-500 flex items-center justify-center">
+                  {order.status === "paid" && (
+                    <span className="flex items-center justify-center text-green-500">
                       <CheckCircle className="h-4 w-4 mr-1" /> Paid
-                    </div>
-                  ) : (
-                    <div className="text-red-500 flex items-center justify-center">
-                      <XCircle className="h-4 w-4 mr-1" /> {order.status}
-                    </div>
+                    </span>
                   )}
+                  {order.status === "unpaid" && (
+                    <span className="flex items-center justify-center text-red-500">
+                      <XCircle className="h-4 w-4 mr-1" /> Unpaid
+                    </span>
+                  )}
+                  {order.status === "confirming" && (
+                    <span className="flex items-center justify-center text-yellow-500">
+                      <Loader className="h-4 w-4 mr-1 animate-spin" />{" "}
+                      Confirming
+                    </span>
+                  )}
+                  {order.status === "shipped" && (
+                    <span className="flex items-center justify-center text-blue-500">
+                      <Truck className="h-4 w-4 mr-1" /> Shipped
+                    </span>
+                  )}
+                  {order.status === "completed" && (
+                    <span className="flex items-center justify-center text-gray-500">
+                      <CheckCircle className="h-4 w-4 mr-1" /> Completed
+                    </span>
+                  )}
+                  {order.status === "disputed" && (
+                    <span className="flex items-center justify-center text-orange-500">
+                      <XCircle className="h-4 w-4 mr-1" /> Disputed
+                    </span>
+                  )}
+                  {order.status === "cancelled" && (
+                    <span className="flex items-center justify-center text-gray-400">
+                      <XCircle className="h-4 w-4 mr-1" /> Cancelled
+                    </span>
+                  )}
+                </TableCell>
+                <TableCell className="text-center">
+                  {new Date(order.createdAt).toLocaleDateString()}
                 </TableCell>
                 <TableCell className="text-center">
                   @{order.telegramUsername}
@@ -163,7 +308,7 @@ export default function OrderTable() {
             ))
           ) : (
             <TableRow>
-              <TableCell colSpan={6} className="h-24 text-center">
+              <TableCell colSpan={7} className="text-center py-4">
                 No orders found.
               </TableCell>
             </TableRow>
@@ -171,6 +316,7 @@ export default function OrderTable() {
         </TableBody>
       </Table>
 
+      {/* Pagination */}
       <div className="p-4 flex justify-between items-center border-t dark:border-zinc-700">
         <Button
           variant="outline"
@@ -180,13 +326,13 @@ export default function OrderTable() {
         >
           <ChevronLeft className="h-4 w-4" /> Previous
         </Button>
-        <span className="text-sm text-gray-500 dark:text-gray-400">
+        <span className="text-sm">
           Page {currentPage} of {totalPages}
         </span>
         <Button
           variant="outline"
           size="sm"
-          disabled={currentPage >= totalPages}
+          disabled={currentPage === totalPages}
           onClick={() => setCurrentPage((prev) => prev + 1)}
         >
           Next <ChevronRight className="h-4 w-4" />

lib/utils.ts

@@ -10,5 +10,3 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]): string {
   return twMerge(clsx(inputs));
 }
-
-