chore: setup project for production

app/accounts/profile/orders/page.jsx

@@ -0,0 +1,120 @@
+"use client";
+import { useCurrency } from "@/app/contexts/currencyContext";
+import authAxios, { backendUrl } from "@/utils/axios";
+import { ShoppingBag } from "lucide-react";
+import Image from "next/image";
+import { useState, useEffect } from "react";
+
+const OrdersPage = () => {
+  const [orders, setOrders] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const { isLoading, formatPrice } = useCurrency();
+
+  useEffect(() => {
+    const fetchOrders = async () => {
+      try {
+        const response = await authAxios.get("/orders/my-orders");
+        setOrders(response.data);
+      } catch (error) {
+        console.error("Error fetching orders:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchOrders();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center min-h-[40vh]">
+        Loading...
+      </div>
+    );
+  }
+
+  if (!orders.length) {
+    return (
+      <div>
+        <h1 className="text-3xl font-semibold border-b pb-4 text-zinc-700">
+          Orders
+        </h1>
+        <div className="flex flex-col gap-5 justify-center items-center min-h-[40vh]">
+          <h2>
+            <ShoppingBag className="sm:ml-20 mb-3 text-[#AC8C6B]" />
+            You don&apos;t have any orders yet
+          </h2>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1 className="text-3xl font-semibold border-b pb-4 text-zinc-700">
+        Orders
+      </h1>
+      <div className="mt-6 space-y-4">
+        {orders.map((order) => (
+          <div key={order.id} className="bg-white p-4 rounded-lg shadow">
+            <div className="flex justify-between items-center mb-4">
+              <span className="font-medium">Order #{order.order_number}</span>
+              <span
+                className={`px-3 py-1 rounded-full text-sm ${
+                  order.status === "DELIVERED"
+                    ? "bg-green-100 text-green-800"
+                    : order.status === "SHIPPED"
+                    ? "bg-blue-100 text-blue-800"
+                    : "bg-yellow-100 text-yellow-800"
+                }`}
+              >
+                {order.status}
+              </span>
+            </div>
+
+            <div className="space-y-3">
+              {order.items.map((item) => (
+                <div key={item.id} className="flex items-center gap-4">
+                  <Image
+                    src={`${backendUrl}${item.variant.product.images[0].image}`}
+                    alt={item.variant.product.product_name}
+                    width={64}
+                    height={64}
+                    className="object-cover rounded-md"
+                  />
+                  <div>
+                    <p className="font-medium">
+                      {item.variant.product.product_name}
+                    </p>
+                    <p className="text-sm text-gray-600">
+                      Size: {item.variant.size.size_name}
+                      {item.design && ` • Design: ${item.design.design_name}`}
+                    </p>
+                    <p className="text-sm text-gray-600">
+                      Quantity: {item.quantity}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            <div className="mt-4 pt-4 border-t flex justify-between items-center">
+              <div className="text-gray-600">
+                {new Date(order.created_at).toLocaleDateString()}
+              </div>
+              <div className="font-medium">
+                Total:{" "}
+                {isLoading ? (
+                  <span>Loading...</span>
+                ) : (
+                  <span>{formatPrice(order.total_amount)}</span>
+                )}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default OrdersPage;