Implement Order Dashboard UI with DataTable, advanced filtering, and refund management (#106)

Author: rafiqul4

docs/ORDER_DASHBOARD_IMPLEMENTATION.md

@@ -3,6 +3,14 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   /* config options here */
   reactCompiler: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "via.placeholder.com",
+      },
+    ],
+  },
 };
 
 export default nextConfig;

next.config.ts

@@ -36,22 +36,18 @@ export default async function OrdersPage() {
       <AppSidebar variant="inset" />
       <SidebarInset>
         <SiteHeader />
-        <div className="flex flex-1 flex-col">
-          <div className="@container/main flex flex-1 flex-col gap-2">
-            <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
-              <div className="px-4 lg:px-6">
-                <div className="mb-8 flex items-center justify-between">
-                  <div>
-                    <h1 className="text-3xl font-bold tracking-tight">Orders</h1>
-                    <p className="text-muted-foreground">
-                      Manage and track all your orders across stores.
-                    </p>
-                  </div>
-                </div>
-
-                <OrdersPageClient />
+        <div className="flex flex-1 flex-col min-h-0 overflow-auto">
+          <div className="@container/main flex flex-col gap-2 p-4 pb-8 md:p-6 md:pb-12">
+            <div className="mb-8 flex items-center justify-between">
+              <div>
+                <h1 className="text-3xl font-bold tracking-tight">Orders</h1>
+                <p className="text-muted-foreground">
+                  Manage and track all your orders across stores.
+                </p>
               </div>
             </div>
+
+            <OrdersPageClient />
           </div>
         </div>
       </SidebarInset>

package-lock.json

@@ -116,6 +116,9 @@
   * {
     @apply border-border outline-ring/50;
   }
+  html, body {
+    @apply h-full;
+  }
   body {
     @apply bg-background text-foreground;
   }

prisma/prisma/dev.db

@@ -21,6 +21,7 @@ import {
   RefreshCw,
   Edit,
   Check,
+  DollarSign,
 } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
@@ -45,6 +46,9 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Separator } from '@/components/ui/separator';
 import { toast } from 'sonner';
+import { OrderStatusTimeline } from '@/components/orders/order-status-timeline';
+import { RefundDialog } from '@/components/orders/refund-dialog';
+import { OrderStatus } from '@prisma/client';
 
 // Types
 interface OrderItem {
@@ -81,21 +85,28 @@ interface Customer {
 interface Order {
   id: string;
   orderNumber: string;
-  status: string;
+  status: OrderStatus;
   paymentStatus: string;
   subtotal: number;
   taxAmount: number;
   shippingAmount: number;
   discountAmount: number;
   totalAmount: number;
+  refundedAmount?: number;
   shippingAddress: Address | string;
   billingAddress: Address | string;
   shippingMethod: string;
   trackingNumber: string | null;
   trackingUrl: string | null;
   customerNote: string | null;
+  adminNote?: string | null;
   createdAt: string;
   updatedAt: string;
+  fulfilledAt?: string | null;
+  deliveredAt?: string | null;
+  canceledAt?: string | null;
+  cancelReason?: string | null;
+  refundReason?: string | null;
   items: OrderItem[];
   customer?: Customer | null;
 }
@@ -134,6 +145,7 @@ export function OrderDetailClient({ orderId, storeId }: OrderDetailClientProps)
   const [trackingNumber, setTrackingNumber] = useState('');
   const [trackingUrl, setTrackingUrl] = useState('');
   const [isEditingTracking, setIsEditingTracking] = useState(false);
+  const [isRefundDialogOpen, setIsRefundDialogOpen] = useState(false);
 
   // Fetch order details
   const fetchOrder = async () => {
@@ -264,6 +276,40 @@ export function OrderDetailClient({ orderId, storeId }: OrderDetailClientProps)
     }
   };
 
+  // Handle refund
+  const handleRefund = async (amount: number, reason: string) => {
+    if (!order) return;
+
+    try {
+      setUpdating(true);
+
+      const response = await fetch(`/api/orders/${order.id}/refund`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          storeId,
+          refundAmount: amount,
+          reason,
+        }),
+      });
+
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || 'Failed to process refund');
+      }
+
+      toast.success(`Refund of ${formatCurrency(amount)} processed successfully`);
+      
+      // Refresh order data
+      await fetchOrder();
+    } catch (error) {
+      console.error('Error processing refund:', error);
+      throw error; // Let RefundDialog handle the error
+    } finally {
+      setUpdating(false);
+    }
+  };
+
   // Format currency
   const formatCurrency = (amount: number) => {
     return new Intl.NumberFormat('en-US', {
@@ -347,6 +393,16 @@ export function OrderDetailClient({ orderId, storeId }: OrderDetailClientProps)
         </div>
       </div>
 
+      {/* Status Timeline */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Order Status Timeline</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <OrderStatusTimeline currentStatus={order.status} />
+        </CardContent>
+      </Card>
+
       <div className="grid gap-6 md:grid-cols-3">
         {/* Left Column - Order Details */}
         <div className="md:col-span-2 space-y-6">
@@ -609,6 +665,52 @@ export function OrderDetailClient({ orderId, storeId }: OrderDetailClientProps)
             </CardContent>
           </Card>
 
+          {/* Refund Management */}
+          {(order.status === 'DELIVERED' || order.status === 'PAID') && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <DollarSign className="h-4 w-4" />
+                  Refund Management
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="rounded-lg border p-3 bg-muted/50">
+                  <div className="space-y-1 text-sm">
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">Order Total:</span>
+                      <span className="font-medium">{formatCurrency(order.totalAmount)}</span>
+                    </div>
+                    {order.refundedAmount && order.refundedAmount > 0 && (
+                      <div className="flex justify-between">
+                        <span className="text-muted-foreground">Already Refunded:</span>
+                        <span className="font-medium text-orange-600">
+                          -{formatCurrency(order.refundedAmount)}
+                        </span>
+                      </div>
+                    )}
+                    <div className="flex justify-between pt-1 border-t">
+                      <span className="font-semibold">Refundable Balance:</span>
+                      <span className="font-semibold">
+                        {formatCurrency(order.totalAmount - (order.refundedAmount || 0))}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                <Button
+                  onClick={() => setIsRefundDialogOpen(true)}
+                  disabled={updating || (order.totalAmount - (order.refundedAmount || 0)) <= 0}
+                  className="w-full"
+                  variant="destructive"
+                >
+                  <DollarSign className="h-4 w-4 mr-2" />
+                  Issue Refund
+                </Button>
+              </CardContent>
+            </Card>
+          )}
+
           {/* Customer Note */}
           {order.customerNote && (
             <Card>
@@ -627,6 +729,17 @@ export function OrderDetailClient({ orderId, storeId }: OrderDetailClientProps)
           )}
         </div>
       </div>
+
+      {/* Refund Dialog */}
+      <RefundDialog
+        open={isRefundDialogOpen}
+        onOpenChange={setIsRefundDialogOpen}
+        onRefund={handleRefund}
+        totalAmount={order.totalAmount}
+        refundedAmount={order.refundedAmount || 0}
+        orderNumber={order.orderNumber}
+        loading={updating}
+      />
     </div>
   );
 }