feat: add initial history entry for non-pending delivery status and update timeline events for better status representation

RabbitDaCoder · RabbitDaCoder · commit 053dda771cbb · 2025-09-05T16:23:31.000+01:00
diff --git a/api/controllers/delivery.controller.js b/api/controllers/delivery.controller.js
@@ -47,6 +47,21 @@ export const createDelivery = async (req, res) => {
 
     const delivery = await Delivery.create(value);
 
+    // If the delivery is created with a status other than "Pending",
+    // add an initial history entry to track when this status was set
+    if (value.status && value.status !== "Pending") {
+      const initialHistoryEntry = {
+        description: `Initial status set to ${value.status}`,
+        status: value.status,
+        time: new Date(),
+        updateDate: new Date().toISOString().slice(0, 10),
+        updateTime: new Date().toTimeString().slice(0, 5),
+      };
+
+      delivery.history.push(initialHistoryEntry);
+      await delivery.save();
+    }
+
     // Note: PDF generation is now handled on the frontend with jsPDF
     // Invoice URL will be set when PDF is generated and uploaded via the invoice controller
     let invoiceUrl = null;
@@ -333,14 +348,14 @@ export const updateStatusAndLocation = async (req, res) => {
       updateObj.status = value.status;
     }
 
-    // Build location update if any location data is provided
+    // Build location update if status is provided OR any location data is provided
     if (
+      value.status ||
       value.description ||
       value.city ||
       value.country ||
       value.lat ||
-      value.lng ||
-      value.status
+      value.lng
     ) {
       locationUpdate.description =
         value.description ||
@@ -360,6 +375,7 @@ export const updateStatusAndLocation = async (req, res) => {
           lng: value.lng,
         };
       }
+      // Always add status to history entry if provided
       if (value.status) {
         locationUpdate.status = value.status;
       }
diff --git a/client/src/Admin/pages/TimelineComponent.tsx b/client/src/Admin/pages/TimelineComponent.tsx
@@ -78,6 +78,8 @@ const TimelineComponent: React.FC<TimelineComponentProps> = ({ shipment }) => {
         return <Pause className="w-4 h-4" />;
       case "delivered":
         return <CheckCircle className="w-4 h-4" />;
+      case "pending-delivery":
+        return <Clock className="w-4 h-4" />;
       default:
         return <AlertCircle className="w-4 h-4" />;
     }
@@ -98,6 +100,8 @@ const TimelineComponent: React.FC<TimelineComponentProps> = ({ shipment }) => {
         return "text-orange-400 bg-orange-500";
       case "delivered":
         return "text-green-400 bg-green-500";
+      case "pending-delivery":
+        return "text-gray-400 bg-gray-500";
       default:
         return "text-gray-400 bg-gray-500";
     }
@@ -123,15 +127,6 @@ const TimelineComponent: React.FC<TimelineComponentProps> = ({ shipment }) => {
     });
   };
 
-  const STATUS_ORDER = [
-    "pending",
-    "processing",
-    "shipped",
-    "in transit",
-    "on hold",
-    "delivered",
-  ];
-
   const STATUS_LABELS: Record<string, string> = {
     pending: "Order Confirmed & Pending",
     processing: "Processing",
@@ -141,26 +136,16 @@ const TimelineComponent: React.FC<TimelineComponentProps> = ({ shipment }) => {
     delivered: "Delivered",
   };
 
-  // Build timeline events
+  // Build timeline events - chronological order based on actual history
   const buildTimeline = (): TimelineEvent[] => {
     const events: TimelineEvent[] = [];
     const sentDate = new Date(shipment.dateSent);
     const deliveryDate = new Date(shipment.deliveryDate);
 
-    // Group history by status (case-insensitive)
-    const historyByStatus: Record<string, LocationUpdate[]> = {};
-    (Array.isArray(shipment.history) ? shipment.history : []).forEach(
-      (entry) => {
-        const status = entry.status?.toLowerCase() || "pending";
-        if (!historyByStatus[status]) historyByStatus[status] = [];
-        historyByStatus[status].push(entry);
-      }
-    );
-
-    // Always add Pending (first)
+    // Always start with creation/pending event
     events.push({
-      id: "pending",
-      title: STATUS_LABELS["pending"],
+      id: "created",
+      title: "Order Created & Confirmed",
       location: `${shipment.sender?.city || "Unknown"}, ${
         shipment.sender?.country || "Unknown"
       }`,
@@ -171,49 +156,66 @@ const TimelineComponent: React.FC<TimelineComponentProps> = ({ shipment }) => {
       isFixed: true,
     });
 
-    // Add only statuses that exist in history (except pending/delivered)
-    STATUS_ORDER.slice(1, -1).forEach((status) => {
-      const entries = historyByStatus[status] || [];
-      if (entries.length > 0) {
-        // Use the latest entry for this status
-        const latest = entries.reduce((a, b) =>
-          new Date(a.time).getTime() > new Date(b.time).getTime() ? a : b
-        );
-        events.push({
-          id: status,
-          title:
-            STATUS_LABELS[status] +
-            (latest.description ? ` - ${latest.description}` : ""),
-          location:
-            latest.city && latest.country
-              ? `${latest.city}, ${latest.country}`
-              : latest.location
-              ? `${latest.location.lat?.toFixed(2) ?? ""}, ${
-                  latest.location.lng?.toFixed(2) ?? ""
-                }`
-              : "Unknown",
-          date: latest.time ? formatDate(latest.time) : "",
-          time: latest.time ? formatTime(latest.time) : "",
-          status,
-          completed: true,
-          isFixed: false,
-        });
-      }
-    });
+    // Add all history entries in chronological order
+    if (Array.isArray(shipment.history) && shipment.history.length > 0) {
+      // Sort history by time (chronological order)
+      const sortedHistory = [...shipment.history].sort(
+        (a, b) => new Date(a.time).getTime() - new Date(b.time).getTime()
+      );
 
-    // Always add Delivered (last)
-    events.push({
-      id: "delivered",
-      title: STATUS_LABELS["delivered"],
-      location: `${shipment.receiver?.city || "Unknown"}, ${
-        shipment.receiver?.country || "Unknown"
-      }`,
-      date: formatDate(deliveryDate),
-      time: formatTime(deliveryDate),
-      status: "delivered",
-      completed: shipment.status?.toLowerCase() === "delivered",
-      isFixed: true,
-    });
+      sortedHistory.forEach((entry, index) => {
+        if (entry.status) {
+          const entryTime = new Date(entry.time);
+          events.push({
+            id: `history-${index}`,
+            title: STATUS_LABELS[entry.status.toLowerCase()] || entry.status,
+            location:
+              entry.city && entry.country
+                ? `${entry.city}, ${entry.country}`
+                : entry.location
+                ? `${entry.location.lat?.toFixed(2) ?? ""}, ${
+                    entry.location.lng?.toFixed(2) ?? ""
+                  }`
+                : entry.description || "Unknown",
+            date: formatDate(entryTime),
+            time: formatTime(entryTime),
+            status: entry.status.toLowerCase(),
+            completed: true,
+            isFixed: false,
+          });
+        }
+      });
+    }
+
+    // Add delivery event (only if status is delivered)
+    if (shipment.status?.toLowerCase() === "delivered") {
+      events.push({
+        id: "delivered",
+        title: STATUS_LABELS["delivered"],
+        location: `${shipment.receiver?.city || "Unknown"}, ${
+          shipment.receiver?.country || "Unknown"
+        }`,
+        date: formatDate(deliveryDate),
+        time: formatTime(deliveryDate),
+        status: "delivered",
+        completed: true,
+        isFixed: true,
+      });
+    } else {
+      // Add expected delivery as pending event
+      events.push({
+        id: "expected-delivery",
+        title: "Expected Delivery",
+        location: `${shipment.receiver?.city || "Unknown"}, ${
+          shipment.receiver?.country || "Unknown"
+        }`,
+        date: formatDate(deliveryDate),
+        time: formatTime(deliveryDate),
+        status: "pending-delivery",
+        completed: false,
+        isFixed: true,
+      });
+    }
 
     return events;
   };
@@ -334,11 +336,11 @@ const TimelineComponent: React.FC<TimelineComponentProps> = ({ shipment }) => {
       <div className="mt-8 p-4 bg-gray-50 dark:bg-zinc-800/30 border border-gray-200 dark:border-zinc-700 rounded-lg">
         <div className="flex justify-between items-center text-sm">
           <span className="text-gray-600 dark:text-zinc-400">
-            Total Updates: {timeline.length - 2}{" "}
-            {/* Exclude fixed pending/delivery */}
+            Total Updates: {timeline.filter((event) => !event.isFixed).length}{" "}
+            {/* Exclude fixed creation/delivery events */}
           </span>
           <span className="text-gray-600 dark:text-zinc-400">
-            Status:{" "}
+            Current Status:{" "}
             <span className="text-gray-900 dark:text-white font-medium capitalize">
               {shipment.status}
             </span>
diff --git a/client/src/components/EditShipmentForm.tsx b/client/src/components/EditShipmentForm.tsx
@@ -130,7 +130,9 @@ const EditShipmentForm: React.FC<ShipmentFormProps> = ({
 
     // Check dates
     if (!formData.pickupDate) {
-      errors.push("Pickup date is required");
+      // Auto-set pickup date to today if not provided
+      const today = new Date().toISOString();
+      setFormData((prev) => ({ ...prev, pickupDate: today }));
     }
     if (!formData.deliveryDate) {
       errors.push("Delivery date is required");
@@ -225,12 +227,21 @@ const EditShipmentForm: React.FC<ShipmentFormProps> = ({
       ...formData.receiver,
       ...parseLocation(formData.receiver.location),
     };
-    const payload = {
+
+    // Transform dates to ISO strings, use today for pickup if not provided
+    const transformedData = {
       ...formData,
       sender,
       receiver,
+      dateSent: formData.pickupDate
+        ? new Date(formData.pickupDate).toISOString()
+        : new Date().toISOString(), // Use today's date as fallback
+      deliveryDate: formData.deliveryDate
+        ? new Date(formData.deliveryDate).toISOString()
+        : new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(), // 7 days from now as fallback
     };
-    onSubmit?.(payload);
+
+    onSubmit?.(transformedData);
   };
 
   const steps = [
@@ -347,6 +358,9 @@ const EditShipmentForm: React.FC<ShipmentFormProps> = ({
           <div>
             <label className="block text-zinc-900 dark:text-white text-sm font-medium mb-2">
               Pickup Date
+              <span className="text-zinc-500 dark:text-zinc-400 text-xs ml-2">
+                (Today's date will be used if not selected)
+              </span>
             </label>
             <DatePickerDemo
               value={formData.pickupDate}
@@ -830,7 +844,7 @@ const EditShipmentForm: React.FC<ShipmentFormProps> = ({
                   Pickup Date:
                 </span>
                 <span className="text-zinc-900 dark:text-white">
-                  {formData.pickupDate || "Not selected"}
+                  {formData.pickupDate || "Today's date"}
                 </span>
               </div>
               <div className="flex justify-between">
diff --git a/client/src/components/ShipmentForm.tsx b/client/src/components/ShipmentForm.tsx
@@ -136,7 +136,9 @@ const ShipmentForm: React.FC<ShipmentFormProps> = ({
 
     // Check dates
     if (!formData.pickupDate) {
-      errors.push("Pickup date is required");
+      // Auto-set pickup date to today if not provided
+      const today = new Date().toISOString();
+      setFormData((prev) => ({ ...prev, pickupDate: today }));
     }
     if (!formData.deliveryDate) {
       errors.push("Delivery date is required");
@@ -359,6 +361,9 @@ const ShipmentForm: React.FC<ShipmentFormProps> = ({
           <div>
             <label className="block text-zinc-900 dark:text-white text-sm font-medium mb-2">
               Pickup Date
+              <span className="text-zinc-500 dark:text-zinc-400 text-xs ml-2">
+                (Today's date will be used if not selected)
+              </span>
             </label>
             <DatePickerDemo
               value={formData.pickupDate}
@@ -827,7 +832,7 @@ const ShipmentForm: React.FC<ShipmentFormProps> = ({
               <div className="flex justify-between">
                 <span className="text-zinc-400">Pickup Date:</span>
                 <span className="text-white">
-                  {formData.pickupDate || "Not selected"}
+                  {formData.pickupDate || "Today's date"}
                 </span>
               </div>
               <div className="flex justify-between">
