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

@@ -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>

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>