From 74971161185bccecacfd2db85ce3293cfeac74b9 Mon Sep 17 00:00:00 2001
From: "nick.leiby" <nick.leiby@includedhealth.com>
Date: Sun, 1 Feb 2026 15:52:22 -0500
Subject: [PATCH] fix: render single day in ItineraryDay instead of mapping all
 itinerary days

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 frontend/components/ItineraryDay.tsx | 208 +++++++++++++--------------
 1 file changed, 103 insertions(+), 105 deletions(-)

diff --git a/frontend/components/ItineraryDay.tsx b/frontend/components/ItineraryDay.tsx
index 717aeb34..897ec291 100644
--- a/frontend/components/ItineraryDay.tsx
+++ b/frontend/components/ItineraryDay.tsx
@@ -93,116 +93,114 @@ export default function ItineraryDay({ day, isEditing }: PropsT) {
     isAddingLocation ||
     isFetchingTrip;
 
+  // Find the index of this day in the itinerary for proper day numbering
+  const dayIndex = trip?.itinerary?.findIndex((it) => it.id === day.id) ?? 0;
+  const date = trip?.startDate ? dayjs(trip.startDate).add(dayIndex, "day").format("dddd, MMMM D") : "";
+  const { notes, locations } = day;
+
   return (
-    <>
-      {trip?.itinerary?.map(({ id: dayId, notes, locations }, i) => {
-        const date = dayjs(trip.startDate).add(i, "day").format("dddd, MMMM D");
-        return (
-          <div key={dayId} className="mb-8">
-            <div className="mb-3">
-              <div className="flex flex-col">
-                <h1 className="text-xl font-bold text-gray-700">Day {i + 1}</h1>
-                <span className="text-gray-500 text-[13px]">{date}</span>
-              </div>
-              <InputNotesSimple
-                value={notes}
-                onBlur={(value) => setNotesMutation.mutate({ notes: value })}
-                className="mt-1 mb-4"
-                canEdit={isEditing}
-              />
-            </div>
-            {!!locations?.length && (
-              <ul className="flex flex-col">
-                {locations?.map(({ locationId, type, id }, index) => {
-                  const location =
-                    trip?.hotspots?.find((h) => h.id === locationId) || trip?.markers?.find((m) => m.id === locationId);
+    <div className="mb-8">
+      <div className="mb-3">
+        <div className="flex flex-col">
+          <h1 className="text-xl font-bold text-gray-700">Day {dayIndex + 1}</h1>
+          <span className="text-gray-500 text-[13px]">{date}</span>
+        </div>
+        <InputNotesSimple
+          value={notes}
+          onBlur={(value) => setNotesMutation.mutate({ notes: value })}
+          className="mt-1 mb-4"
+          canEdit={isEditing}
+        />
+      </div>
+      {!!locations?.length && (
+        <ul className="flex flex-col">
+          {locations?.map(({ locationId, type, id }, index) => {
+            const location =
+              trip?.hotspots?.find((h) => h.id === locationId) || trip?.markers?.find((m) => m.id === locationId);
 
-                  return (
-                    <React.Fragment key={id}>
-                      {index !== 0 && (
-                        <li>
-                          <TravelTime isLoading={isLoading} isEditing={isEditing} dayId={dayId} id={id} />
-                        </li>
+            return (
+              <React.Fragment key={id}>
+                {index !== 0 && (
+                  <li>
+                    <TravelTime isLoading={isLoading} isEditing={isEditing} dayId={day.id} id={id} />
+                  </li>
+                )}
+                <li className="flex items-start gap-2 text-sm text-gray-700 group relative p-3 bg-white rounded-lg shadow">
+                  <button
+                    className="flex gap-2 text-left -my-[9px] py-3 -ml-4 pl-4 grow"
+                    onClick={
+                      location
+                        ? () =>
+                            type === "hotspot"
+                              ? open("hotspot", { hotspot: location })
+                              : open("viewMarker", { markerId: location.id })
+                        : undefined
+                    }
+                    disabled={!location}
+                  >
+                    {location ? (
+                      <MarkerWithIcon
+                        showStroke={false}
+                        icon={(location as any)?.icon || "hotspot"}
+                        className="inline-block scale-[.85] flex-shrink-0 print:hidden"
+                      />
+                    ) : (
+                      <Icon name="warning" className="text-red-500 text-[22px]" />
+                    )}
+                    <span>
+                      <div className="truncate font-medium mt-[2px]">{location?.name || "Unknown Location"}</div>
+                      {location?.notes && (
+                        <span className="text-gray-700 text-sm relative group whitespace-pre-wrap">
+                          {location.notes}
+                        </span>
+                      )}
+                    </span>
+                  </button>
+                  {isEditing && (
+                    <div className="flex items-center gap-1.5 ml-auto">
+                      {index !== locations.length - 1 && (
+                        <button
+                          type="button"
+                          onClick={() => moveLocationMutation.mutate({ id, direction: "down" })}
+                          className="text-[16px] p-1 text-gray-600 sm:opacity-0 group-hover:opacity-100 transition-opacity -mt-px"
+                        >
+                          <Icon name="angleDownBold" />
+                        </button>
                       )}
-                      <li className="flex items-start gap-2 text-sm text-gray-700 group relative p-3 bg-white rounded-lg shadow">
+                      {index !== 0 && (
                         <button
-                          className="flex gap-2 text-left -my-[9px] py-3 -ml-4 pl-4 grow"
-                          onClick={
-                            location
-                              ? () =>
-                                  type === "hotspot"
-                                    ? open("hotspot", { hotspot: location })
-                                    : open("viewMarker", { markerId: location.id })
-                              : undefined
-                          }
-                          disabled={!location}
+                          type="button"
+                          onClick={() => moveLocationMutation.mutate({ id, direction: "up" })}
+                          className="text-[16px] p-1 -mt-1 text-gray-600 sm:opacity-0 group-hover:opacity-100 transition-opacity"
                         >
-                          {location ? (
-                            <MarkerWithIcon
-                              showStroke={false}
-                              icon={(location as any)?.icon || "hotspot"}
-                              className="inline-block scale-[.85] flex-shrink-0 print:hidden"
-                            />
-                          ) : (
-                            <Icon name="warning" className="text-red-500 text-[22px]" />
-                          )}
-                          <span>
-                            <div className="truncate font-medium mt-[2px]">{location?.name || "Unknown Location"}</div>
-                            {location?.notes && (
-                              <span className="text-gray-700 text-sm relative group whitespace-pre-wrap">
-                                {location.notes}
-                              </span>
-                            )}
-                          </span>
+                          <Icon name="angleDownBold" className="rotate-180" />
                         </button>
-                        {isEditing && (
-                          <div className="flex items-center gap-1.5 ml-auto">
-                            {index !== locations.length - 1 && (
-                              <button
-                                type="button"
-                                onClick={() => moveLocationMutation.mutate({ id, direction: "down" })}
-                                className="text-[16px] p-1 text-gray-600 sm:opacity-0 group-hover:opacity-100 transition-opacity -mt-px"
-                              >
-                                <Icon name="angleDownBold" />
-                              </button>
-                            )}
-                            {index !== 0 && (
-                              <button
-                                type="button"
-                                onClick={() => moveLocationMutation.mutate({ id, direction: "up" })}
-                                className="text-[16px] p-1 -mt-1 text-gray-600 sm:opacity-0 group-hover:opacity-100 transition-opacity"
-                              >
-                                <Icon name="angleDownBold" className="rotate-180" />
-                              </button>
-                            )}
-                            <button
-                              type="button"
-                              onClick={() => removeLocationMutation.mutate({ id })}
-                              className="text-[16px] p-1 -mt-1 text-gray-600 sm:opacity-0 group-hover:opacity-100 transition-opacity"
-                            >
-                              <Icon name="xMarkBold" />
-                            </button>
-                          </div>
-                        )}
-                      </li>
-                    </React.Fragment>
-                  );
-                })}
-              </ul>
-            )}
-            {isEditing && (
-              <div className="flex justify-between items-center gap-2 mt-3">
-                <Button size="xs" color="gray" onClick={() => open("addItineraryLocation", { dayId })}>
-                  + Add Location
-                </Button>
-                <button type="button" onClick={handleRemoveDay} className="text-[12px] py-0.5 px-1.5 text-red-700">
-                  Remove day
-                </button>
-              </div>
-            )}
-          </div>
-        );
-      })}
-    </>
+                      )}
+                      <button
+                        type="button"
+                        onClick={() => removeLocationMutation.mutate({ id })}
+                        className="text-[16px] p-1 -mt-1 text-gray-600 sm:opacity-0 group-hover:opacity-100 transition-opacity"
+                      >
+                        <Icon name="xMarkBold" />
+                      </button>
+                    </div>
+                  )}
+                </li>
+              </React.Fragment>
+            );
+          })}
+        </ul>
+      )}
+      {isEditing && (
+        <div className="flex justify-between items-center gap-2 mt-3">
+          <Button size="xs" color="gray" onClick={() => open("addItineraryLocation", { dayId: day.id })}>
+            + Add Location
+          </Button>
+          <button type="button" onClick={handleRemoveDay} className="text-[12px] py-0.5 px-1.5 text-red-700">
+            Remove day
+          </button>
+        </div>
+      )}
+    </div>
   );
 }