Merge pull request #401 from sujitha-kotyada/fix/order-status-consistency

fix(order): standardize initial order status across admin and frontend

Author: Nsanjayboruds

admin/src/pages/Order.jsx

@@ -54,7 +54,7 @@ function Order() {
   // Get unique status values for filter
   const statusOptions = [
     "All",
-    "Order Placed",
+    "Placed",
     "Packing",
     "Shipped",
     "Out for delivery",
@@ -65,11 +65,17 @@ function Order() {
   const filteredOrders =
     filterStatus === "All"
       ? orders
-      : orders.filter((order) => order.status === filterStatus);
+      : orders.filter((order) => {
+          if (filterStatus === "Placed") {
+            return order.status === "Placed" || order.status === "Order Placed";
+          }
+          return order.status === filterStatus;
+        });
 
   // Status color mapping
   const statusColors = {
-    "Order Placed": "bg-blue-500",
+    Placed: "bg-blue-500",
+    "Order Placed": "bg-blue-500", // backward compatibility for legacy records
     Packing: "bg-amber-500",
     Shipped: "bg-indigo-500",
     "Out for delivery": "bg-purple-500",
@@ -263,7 +269,9 @@ function Order() {
                             statusColors[order.status] || "bg-slate-600"
                           } text-white`}
                         >
-                          {order.status}
+                          {order.status === "Order Placed"
+                            ? "Placed"
+                            : order.status}
                         </span>
                       </div>
 
@@ -272,11 +280,15 @@ function Order() {
                           Update Status
                         </label>
                         <select
-                          value={order.status}
+                          value={
+                            order.status === "Order Placed"
+                              ? "Placed"
+                              : order.status
+                          }
                           onChange={(e) => statusHandler(e, order._id)}
                           className="w-full bg-slate-700/40 border border-slate-600 rounded-lg px-4 py-2 text-lg focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-all cursor-pointer"
                         >
-                          <option value="Order Placed">Order Placed</option>
+                          <option value="Placed">Placed</option>
                           <option value="Packing">Packing</option>
                           <option value="Shipped">Shipped</option>
                           <option value="Out for delivery">

frontend/src/pages/Order.jsx

@@ -97,7 +97,7 @@ function Order() {
 
   const statusSteps = [
     {
-      name: 'Order Placed',
+      name: 'Placed',
       icon: FaShoppingBag,
       color: 'from-blue-500 to-cyan-500',
     },
@@ -331,7 +331,9 @@ function Order() {
                         <span
                           className={`font-medium ${getStatusColor(item.status)}`}
                         >
-                          {item.status || 'Processing'}
+                          {item.status === 'Order Placed'
+                            ? 'Placed'
+                            : item.status || 'Processing'}
                         </span>
                       </div>
                       <div className="flex items-center gap-2 text-sm text-slate-500 dark:text-gray-400">