From f1e75832190a82650170f2657596f74de078aa6c Mon Sep 17 00:00:00 2001
From: NotII <46204250+NotII@users.noreply.github.com>
Date: Sat, 26 Jul 2025 22:32:47 +0200
Subject: [PATCH] Add paidAt field and display to order details and table

Introduces the optional 'paidAt' field to the Order interface and updates both the order details page and the order table to display the payment date. Also adds sorting by 'paidAt' in the order table and improves date formatting for both order and payment dates.
---
 app/dashboard/orders/[id]/page.tsx | 39 ++++++++++++++++++++++++++++++
 components/tables/order-table.tsx  | 18 ++++++++++++--
 2 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/app/dashboard/orders/[id]/page.tsx b/app/dashboard/orders/[id]/page.tsx
index 7249968..177c8ad 100644
--- a/app/dashboard/orders/[id]/page.tsx
+++ b/app/dashboard/orders/[id]/page.tsx
@@ -53,6 +53,8 @@ interface Order {
     totalItemPrice: number;
   }>;
   totalPrice: number;
+  orderDate: Date;
+  paidAt?: Date;
   trackingNumber?: string;
   telegramUsername?: string;
   telegramBuyerId?: string;
@@ -774,6 +776,43 @@ export default function OrderDetailsPage() {
 
           {/* Right Column - Actions and Status */}
           <div className="space-y-6">
+            {/* Order Information Card */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-lg font-medium">Order Information</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <div>
+                  <Label className="text-sm font-medium text-zinc-500">Order Date</Label>
+                  <div className="text-sm mt-1">
+                    {order?.orderDate ? new Date(order.orderDate).toLocaleDateString("en-GB", {
+                      day: '2-digit',
+                      month: 'short',
+                      year: 'numeric',
+                      hour: '2-digit',
+                      minute: '2-digit',
+                      hour12: false
+                    }) : "-"}
+                  </div>
+                </div>
+                {order?.paidAt && (
+                  <div>
+                    <Label className="text-sm font-medium text-zinc-500">Paid At</Label>
+                    <div className="text-sm mt-1 text-green-600 font-medium">
+                      {new Date(order.paidAt).toLocaleDateString("en-GB", {
+                        day: '2-digit',
+                        month: 'short',
+                        year: 'numeric',
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        hour12: false
+                      })}
+                    </div>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+
             {/* Order Actions Card */}
             <Card>
               <CardHeader>
diff --git a/components/tables/order-table.tsx b/components/tables/order-table.tsx
index e0d3643..fba0ee9 100644
--- a/components/tables/order-table.tsx
+++ b/components/tables/order-table.tsx
@@ -53,6 +53,7 @@ interface Order {
   status: string;
   totalPrice: number;
   orderDate: Date;
+  paidAt?: Date;
   telegramUsername?: string;
   telegramBuyerId?: string;
   underpaid?: boolean;
@@ -61,7 +62,7 @@ interface Order {
   cryptoTotal?: number;
 }
 
-type SortableColumns = "orderId" | "totalPrice" | "status" | "orderDate";
+type SortableColumns = "orderId" | "totalPrice" | "status" | "orderDate" | "paidAt";
 
 interface StatusConfig {
   icon: React.ElementType;
@@ -433,7 +434,10 @@ export default function OrderTable() {
                     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" />
+                    Order Date <ArrowUpDown className="ml-2 inline h-4 w-4" />
+                  </TableHead>
+                  <TableHead className="cursor-pointer" onClick={() => handleSort("paidAt")}>
+                    Paid At <ArrowUpDown className="ml-2 inline h-4 w-4" />
                   </TableHead>
                   <TableHead>Buyer</TableHead>
                   <TableHead className="w-24 text-center">Actions</TableHead>
@@ -492,6 +496,16 @@ export default function OrderTable() {
                           hour12: false
                         })}
                       </TableCell>
+                      <TableCell>
+                        {order.paidAt ? new Date(order.paidAt).toLocaleDateString("en-GB", {
+                          day: '2-digit',
+                          month: 'short',
+                          year: 'numeric',
+                          hour: '2-digit',
+                          minute: '2-digit',
+                          hour12: false
+                        }) : "-"}
+                      </TableCell>
                       <TableCell>
                         {order.telegramUsername ? `@${order.telegramUsername}` : "-"}
                       </TableCell>