From 506465619a6d6266d3068470ed39871c302ff19b Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Thu, 5 Sep 2024 11:52:25 -0400
Subject: [PATCH 01/28] Fallback to 'receivedByName' if Fedex's 'signedByName'
 is missing when tracking the 'signed_by' info

---
 .../fedex/karrio/providers/fedex/tracking.py           | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/modules/connectors/fedex/karrio/providers/fedex/tracking.py b/modules/connectors/fedex/karrio/providers/fedex/tracking.py
index d0feead6a6..1c33674978 100644
--- a/modules/connectors/fedex/karrio/providers/fedex/tracking.py
+++ b/modules/connectors/fedex/karrio/providers/fedex/tracking.py
@@ -121,10 +121,16 @@ def _extract_details(
             shipment_origin_country=lib.failsafe(
                 lambda: detail.originLocation.locationContactAndAddress.address.countryCode
             ),
-            signed_by=lib.failsafe(lambda: detail.deliveryDetails.signedByName),
+            signed_by=lib.failsafe(
+                lambda: (
+                    detail.deliveryDetails.signedByName
+                    if detail.deliveryDetails.signedByName
+                    else (detail.deliveryDetails.receivedByName)
+                )
+            ),
         ),
         images=lib.identity(models.Images(signature_image=img) if img else None),
-        estimated_delivery=lib.fdate(estimated_delivery, "%Y-%m-%dT%H:%M:%S"),
+        estimated_delivery=lib.fdate(estimated_delivery, try_formats=DATETIME_FORMATS),
         delivered=(status == "delivered"),
         status=status,
     )

From 2248e6dcd1f490d7b14023975183e75c017bf9bf Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Thu, 5 Sep 2024 12:04:01 -0400
Subject: [PATCH 02/28] Update my tracking re estimated delivery dates to try
 and avoid merge conflicts

---
 .../connectors/fedex/karrio/providers/fedex/tracking.py    | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/modules/connectors/fedex/karrio/providers/fedex/tracking.py b/modules/connectors/fedex/karrio/providers/fedex/tracking.py
index 1c33674978..4dc08ad9f6 100644
--- a/modules/connectors/fedex/karrio/providers/fedex/tracking.py
+++ b/modules/connectors/fedex/karrio/providers/fedex/tracking.py
@@ -53,9 +53,10 @@ def _extract_details(
         default=None,
     )
     estimated_delivery = lib.failsafe(
-        lambda: (
+        lambda: lib.fdate(
             detail.standardTransitTimeWindow.window.begins
-            or detail.estimatedDeliveryTimeWindow.window.begins
+            or detail.estimatedDeliveryTimeWindow.window.begins,
+            try_formats=DATETIME_FORMATS,
         )
     )
     status = next(
@@ -130,7 +131,7 @@ def _extract_details(
             ),
         ),
         images=lib.identity(models.Images(signature_image=img) if img else None),
-        estimated_delivery=lib.fdate(estimated_delivery, try_formats=DATETIME_FORMATS),
+        estimated_delivery=estimated_delivery=estimated_delivery,
         delivered=(status == "delivered"),
         status=status,
     )

From aedfc93d640f41be2e5b2079e0dd06c5e278d300 Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Thu, 5 Sep 2024 12:28:42 -0400
Subject: [PATCH 03/28] Trying to prevent merge conflicts

---
 .../connectors/fedex/karrio/providers/fedex/tracking.py    | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/modules/connectors/fedex/karrio/providers/fedex/tracking.py b/modules/connectors/fedex/karrio/providers/fedex/tracking.py
index 1c33674978..2ccb76aa27 100644
--- a/modules/connectors/fedex/karrio/providers/fedex/tracking.py
+++ b/modules/connectors/fedex/karrio/providers/fedex/tracking.py
@@ -53,9 +53,10 @@ def _extract_details(
         default=None,
     )
     estimated_delivery = lib.failsafe(
-        lambda: (
+        lambda: lib.fdate(
             detail.standardTransitTimeWindow.window.begins
-            or detail.estimatedDeliveryTimeWindow.window.begins
+            or detail.estimatedDeliveryTimeWindow.window.begins,
+            try_formats=DATETIME_FORMATS,
         )
     )
     status = next(
@@ -130,7 +131,7 @@ def _extract_details(
             ),
         ),
         images=lib.identity(models.Images(signature_image=img) if img else None),
-        estimated_delivery=lib.fdate(estimated_delivery, try_formats=DATETIME_FORMATS),
+        estimated_delivery=estimated_delivery,
         delivered=(status == "delivered"),
         status=status,
     )

From 8b28f8bdde06510cd3453b4b78020b70d30ca49f Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Wed, 18 Sep 2024 10:06:15 -0400
Subject: [PATCH 04/28] Correct typo "Delet" -> "Delete" and add tracking
 number to the dialog

---
 apps/dashboard/src/modules/Trackers/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dashboard/src/modules/Trackers/index.tsx b/apps/dashboard/src/modules/Trackers/index.tsx
index 263d8e9cfe..27e2ab1b36 100644
--- a/apps/dashboard/src/modules/Trackers/index.tsx
+++ b/apps/dashboard/src/modules/Trackers/index.tsx
@@ -142,7 +142,7 @@ export default function TrackersPage(pageProps: any) {
                       <button className="button is-white is-pulled-right"
                         onClick={(e) => {
                           e.stopPropagation();
-                          confirmDeletion({ label: "Delet Shipment Tracker", identifier: tracker.id as string, onConfirm: remove(tracker.id) })
+                          confirmDeletion({ label: "Delete Shipment Tracker", identifier: `${tracker.id} / ${tracker.tracking_number}` as string, onConfirm: remove(tracker.id) })
                         }}>
                         <span className="icon is-small">
                           <i className="fas fa-trash"></i>

From e7e8a970ef0df9e93a9133e42539d5e9a31932c0 Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Wed, 18 Sep 2024 12:38:26 -0400
Subject: [PATCH 05/28] If the tracker has been Delivered, include the
 signed_by as part of the event line

---
 apps/dashboard/src/modules/Trackers/index.tsx | 47 +++++++++++++++----
 1 file changed, 38 insertions(+), 9 deletions(-)

diff --git a/apps/dashboard/src/modules/Trackers/index.tsx b/apps/dashboard/src/modules/Trackers/index.tsx
index 27e2ab1b36..f4c0397f28 100644
--- a/apps/dashboard/src/modules/Trackers/index.tsx
+++ b/apps/dashboard/src/modules/Trackers/index.tsx
@@ -10,7 +10,7 @@ import { StatusBadge } from "@karrio/ui/components/status-badge";
 import { DashboardLayout } from "@/layouts/dashboard-layout";
 import { useLoader } from "@karrio/ui/components/loader";
 import { Spinner } from "@karrio/ui/components/spinner";
-import { TrackingEvent } from "@karrio/types/rest/api";
+import { TrackingEvent, TrackingInfo } from "@karrio/types/rest/api";
 import React, { useContext, useEffect } from "react";
 import { useRouter } from "next/dist/client/router";
 import Head from "next/head";
@@ -127,12 +127,27 @@ export default function TrackersPage(pageProps: any) {
                     <td className="status is-vcentered">
                       <StatusBadge status={tracker.status as string} style={{ width: '100%' }} />
                     </td>
-                    <td className="last-event is-vcentered py-1 last-event is-size-7 has-text-weight-bold has-text-grey text-ellipsis">
-                      <span className="text-ellipsis"
-                        title={isNoneOrEmpty(tracker?.events) ? "" : formatEventDescription((tracker?.events as TrackingEvent[])[0])}>
-                        {isNoneOrEmpty(tracker?.events) ? "" : formatEventDescription((tracker?.events as TrackingEvent[])[0])}
-                      </span>
-                    </td>
+                      <td className="last-event is-vcentered py-1 last-event is-size-7 has-text-weight-bold has-text-grey text-ellipsis">
+                        {(() => {
+                          const formattedDescription = isNoneOrEmpty(
+                            tracker?.events,
+                          )
+                            ? ""
+                            : formatEventDescription(
+                                (tracker?.events as TrackingEvent[])[0],
+                                tracker?.info as TrackingInfo,
+                              );
+
+                          return (
+                            <span
+                              className="text-ellipsis"
+                              title={formattedDescription}
+                            >
+                              {formattedDescription}
+                            </span>
+                          );
+                        })()}
+                      </td>
                     <td className="date is-vcentered has-text-right">
                       <p className="is-size-7 has-text-weight-semibold has-text-grey">
                         {isNoneOrEmpty(tracker?.events) ? "" : formatEventDate((tracker?.events as TrackingEvent[])[0])}
@@ -205,8 +220,22 @@ export default function TrackersPage(pageProps: any) {
   ), pageProps)
 }
 
-function formatEventDescription(last_event?: TrackingEvent): string {
-  return last_event?.description || '';
+function formatEventDescription(
+  last_event?: TrackingEvent,
+  tracking_info?: TrackingInfo,
+): string {
+  if (!last_event) {
+    return "";
+  }
+
+  const { description } = last_event;
+  const { signed_by } = tracking_info || {};
+
+  if (description === "Delivered" && signed_by) {
+    return `${description} (Signed by: ${signed_by})`;
+  }
+
+  return description || "";
 }
 
 function formatEventDate(last_event?: TrackingEvent): string {

From eeead1ec2fcc98840538ae9716058ea22e753876 Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Wed, 18 Sep 2024 12:51:18 -0400
Subject: [PATCH 06/28] Show error directly (in case of no API server running
 for example), attempt to make a '404' page to resolve next warnings... no
 luck

---
 apps/dashboard/src/pages/404.tsx  |  8 ++++++++
 apps/dashboard/src/pages/_app.tsx | 22 +++++++++++++++++++---
 2 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 apps/dashboard/src/pages/404.tsx

diff --git a/apps/dashboard/src/pages/404.tsx b/apps/dashboard/src/pages/404.tsx
new file mode 100644
index 0000000000..ce382556ca
--- /dev/null
+++ b/apps/dashboard/src/pages/404.tsx
@@ -0,0 +1,8 @@
+export default function Custom404() {
+  return (
+    <div>
+      <h1>404 - Page Not Found</h1>
+      <p>Sorry, the page you are looking for does not exist.</p>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/pages/_app.tsx b/apps/dashboard/src/pages/_app.tsx
index bd4b350c01..83b85165fc 100644
--- a/apps/dashboard/src/pages/_app.tsx
+++ b/apps/dashboard/src/pages/_app.tsx
@@ -12,16 +12,32 @@ import type { AppProps } from "next/app";
 
 const queryClient = new QueryClient();
 
-function MyApp({ Component, pageProps }: AppProps) {
+function MyApp({ Component, pageProps, router }: AppProps) {
+  // Check for error in pageProps and render an error screen
+  if (pageProps?.error) {
+    return (
+      <div>
+        <h1>Error</h1>
+        <p>{pageProps.error.message}</p>
+      </div>
+    );
+  }
+
+  const isErrorPage = router.pathname === "/404" || router.pathname === "/500";
+
   return (
     <SessionProvider session={pageProps.session} refetchInterval={5 * 60}>
       <NextPostHogProvider>
         <QueryClientProvider client={queryClient}>
           <APIMetadataProvider {...pageProps}>
             <ClientProvider {...pageProps}>
-              <MainLayout error={pageProps?.error}>
+              {isErrorPage ? (
                 <Component {...pageProps} />
-              </MainLayout>
+              ) : (
+                <MainLayout error={pageProps?.error}>
+                  <Component {...pageProps} />
+                </MainLayout>
+              )}
             </ClientProvider>
           </APIMetadataProvider>
         </QueryClientProvider>

From a92bfb14fdb097a0a97627f7039ac1520f3af0d2 Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Wed, 18 Sep 2024 13:34:59 -0400
Subject: [PATCH 07/28] Display available 'info' fields in the tracker preview
 header

---
 .../src/components/tracking-preview.tsx          | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/apps/dashboard/src/components/tracking-preview.tsx b/apps/dashboard/src/components/tracking-preview.tsx
index b41efaf30f..043e1713ca 100644
--- a/apps/dashboard/src/components/tracking-preview.tsx
+++ b/apps/dashboard/src/components/tracking-preview.tsx
@@ -104,6 +104,22 @@ export const TrackingPreview: React.FC<TrackingPreviewComponent> = ({ children }
               <span>Tracking ID</span> <strong>{tracker?.tracking_number}</strong>
             </p>
 
+            {!isNone(tracker?.info) && (
+              <>
+                <hr />
+                <p className="has-text-weight-bold my-4 is-size-6">Additional Information</p>
+                <div className="columns is-multiline">
+                  {Object.entries(tracker.info)
+                    .filter(([_, value]) => value != null) // Exclude null or undefined values
+                    .map(([key, value], index) => (
+                      <div key={index} className="column is-6">
+                        <strong>{key}: </strong> <span>{String(value)}</span>
+                      </div>
+                  ))}
+                </div>
+              </>
+            )}
+
             {!isNone(tracker?.estimated_delivery) && <p className="subtitle has-text-centered is-6 mb-3">
               <span>{tracker?.delivered ? 'Delivered' : 'Estimated Delivery'}</span> {' '}
               <strong>{formatDayDate(tracker!.estimated_delivery as string)}</strong>

From 3a0186201e3423fc0bbb29243c2d4c61d5179eca Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Wed, 18 Sep 2024 14:56:09 -0400
Subject: [PATCH 08/28] Refactor tracking-preview and tracking-page so they
 don't repeat themselves and re-use new components

---
 .../src/components/TrackingEvents.tsx         |  47 ++++++++
 .../src/components/TrackingHeader.tsx         | 103 +++++++++++++++++
 .../src/components/TrackingMessages.tsx       |  21 ++++
 .../src/components/tracking-preview.tsx       | 107 ++----------------
 .../src/modules/Trackers/tracking-page.tsx    |  53 ++-------
 5 files changed, 187 insertions(+), 144 deletions(-)
 create mode 100644 apps/dashboard/src/components/TrackingEvents.tsx
 create mode 100644 apps/dashboard/src/components/TrackingHeader.tsx
 create mode 100644 apps/dashboard/src/components/TrackingMessages.tsx

diff --git a/apps/dashboard/src/components/TrackingEvents.tsx b/apps/dashboard/src/components/TrackingEvents.tsx
new file mode 100644
index 0000000000..eeb4171433
--- /dev/null
+++ b/apps/dashboard/src/components/TrackingEvents.tsx
@@ -0,0 +1,47 @@
+// components/TrackingEvents.tsx
+import { TrackingEvent, TrackingStatus } from "@karrio/types/rest/api";
+import { formatDayDate } from "@karrio/lib";
+
+type DayEvents = { [k: string]: TrackingEvent[] };
+
+const computeEvents = (tracker: TrackingStatus): DayEvents => {
+  return (tracker?.events || []).reduce((days, event: TrackingEvent) => {
+    const daydate = formatDayDate(event.date as string);
+    return { ...days, [daydate]: [...(days[daydate] || []), event] };
+  }, {} as DayEvents);
+};
+
+const TrackingEvents: React.FC<{ tracker: TrackingStatus }> = ({ tracker }) => {
+  const eventsByDay = computeEvents(tracker);
+
+  return (
+    <div className="my-6">
+      <aside className="menu">
+        <ul className="menu-list mb-5" style={{ maxWidth: "28rem" }}>
+          {Object.entries(eventsByDay).map(([day, events], index) => (
+            <li key={index}>
+              <p className="menu-label is-size-6 is-capitalized">{day}</p>
+              {events.map((event, index) => (
+                <ul key={index}>
+                  <li className="my-2">
+                    <code>{event.time}</code>
+                    <span className="is-subtitle is-size-7 my-1 has-text-weight-semibold">
+                      {event.location}
+                    </span>
+                  </li>
+                  <li className="my-2">
+                    <span className="is-subtitle is-size-7 my-1 has-text-weight-semibold has-text-grey">
+                      {event.description}
+                    </span>
+                  </li>
+                </ul>
+              ))}
+            </li>
+          ))}
+        </ul>
+      </aside>
+    </div>
+  );
+};
+
+export default TrackingEvents;
diff --git a/apps/dashboard/src/components/TrackingHeader.tsx b/apps/dashboard/src/components/TrackingHeader.tsx
new file mode 100644
index 0000000000..574791c6b8
--- /dev/null
+++ b/apps/dashboard/src/components/TrackingHeader.tsx
@@ -0,0 +1,103 @@
+// components/TrackingHeader.tsx
+import { TrackingStatus } from "@karrio/types/rest/api";
+import { TrackerStatusEnum, TrackerType } from "@karrio/types";
+import { formatDayDate, formatRef, isNone } from "@karrio/lib";
+import { CarrierImage } from "@karrio/ui/components/carrier-image";
+
+const TrackingHeader: React.FC<{ tracker: TrackingStatus }> = ({ tracker }) => {
+  const computeColor = (tracker: TrackerType) => {
+    if (tracker?.delivered) return "has-background-success";
+    else if (tracker?.status === TrackerStatusEnum.pending.toString())
+      return "has-background-grey-dark";
+    else if (
+      [
+        TrackerStatusEnum.on_hold.toString(),
+        TrackerStatusEnum.delivery_delayed.toString(),
+      ].includes(tracker?.status as string)
+    )
+      return "has-background-warning";
+    else if (
+      [TrackerStatusEnum.unknown.toString()].includes(
+        tracker?.status as string,
+      )
+    )
+      return "has-background-grey";
+    else if (
+      [TrackerStatusEnum.delivery_failed.toString()].includes(
+        tracker?.status as string,
+      )
+    )
+      return "has-background-danger";
+    else return "has-background-info";
+  };
+  const computeStatus = (tracker: TrackerType) => {
+    if (tracker?.delivered) return "Delivered";
+    else if (tracker?.status === TrackerStatusEnum.pending.toString())
+      return "Pending";
+    else if (
+      [
+        TrackerStatusEnum.on_hold.toString(),
+        TrackerStatusEnum.delivery_delayed.toString(),
+        TrackerStatusEnum.ready_for_pickup.toString(),
+        TrackerStatusEnum.unknown.toString(),
+        TrackerStatusEnum.delivery_failed.toString(),
+      ].includes(tracker?.status as string)
+    )
+      return formatRef(tracker!.status as string);
+    else return "In-Transit";
+  };
+
+  return (
+    <>
+      <div className="pb-4 is-flex is-justify-content-center">
+        <CarrierImage
+          carrier_name={tracker.carrier_name}
+          width={60}
+          height={60}
+        />
+      </div>
+
+      <p className="subtitle has-text-centered is-6 my-3">
+        <span>Tracking ID</span> <strong>{tracker.tracking_number}</strong>
+      </p>
+
+      {!isNone(tracker?.estimated_delivery) && (
+        <p className="subtitle has-text-centered is-6 mb-3">
+          <span>{tracker?.delivered ? "Delivered" : "Estimated Delivery"}</span>{" "}
+          <strong>
+            {formatDayDate(tracker!.estimated_delivery as string)}
+          </strong>
+        </p>
+      )}
+
+      {!isNone(tracker?.info) && (
+        <>
+          <hr />
+          <p className="has-text-weight-bold my-4 is-size-6">
+            Additional Information
+          </p>
+          <div className="columns is-multiline">
+            {Object.entries(tracker.info)
+              .filter(([_, value]) => value != null) // Exclude null or undefined values
+              .map(([key, value], index) => (
+                <div key={index} className="column is-6">
+                  <strong>{key}: </strong> <span>{String(value)}</span>
+                </div>
+              ))}
+          </div>
+        </>
+      )}
+
+      <p
+        className={
+          computeColor(tracker as TrackerType) +
+          " block has-text-centered has-text-white is-size-4 py-3"
+        }
+      >
+        {computeStatus(tracker as TrackerType)}
+      </p>
+    </>
+  );
+};
+
+export default TrackingHeader;
diff --git a/apps/dashboard/src/components/TrackingMessages.tsx b/apps/dashboard/src/components/TrackingMessages.tsx
new file mode 100644
index 0000000000..03443df101
--- /dev/null
+++ b/apps/dashboard/src/components/TrackingMessages.tsx
@@ -0,0 +1,21 @@
+// components/TrackingMessages.tsx
+import React from "react";
+import { TrackerType } from "@karrio/types";
+
+interface TrackingMessagesProps {
+  messages: TrackerType["messages"];
+}
+
+const TrackingMessages: React.FC<TrackingMessagesProps> = ({ messages }) => {
+  if (!messages || messages.length === 0) return null;
+
+  return (
+    <div className="notification is-warning">
+      <p className="is-size-7 my-1 has-text-weight-semibold has-text-grey">
+        {messages[0]?.message}
+      </p>
+    </div>
+  );
+};
+
+export default TrackingMessages;
diff --git a/apps/dashboard/src/components/tracking-preview.tsx b/apps/dashboard/src/components/tracking-preview.tsx
index 043e1713ca..d88ee8294a 100644
--- a/apps/dashboard/src/components/tracking-preview.tsx
+++ b/apps/dashboard/src/components/tracking-preview.tsx
@@ -1,10 +1,11 @@
-import { formatAddressRegion, formatDayDate, formatRef, isNone, useLocation } from '@karrio/lib';
-import { TrackerStatusEnum, TrackerType, TrackingEventType } from '@karrio/types';
-import { CarrierImage } from '@karrio/ui/components/carrier-image';
+import { formatAddressRegion, formatRef, isNone, useLocation } from '@karrio/lib';
+import { TrackerType } from '@karrio/types';
+import TrackingHeader from "@/components/TrackingHeader";
+import TrackingEvents from "@/components/TrackingEvents";
+import TrackingMessages from "@/components/TrackingMessages";
 import { AppLink } from '@karrio/ui/components/app-link';
 import React, { useRef, useState } from 'react';
 
-type DayEvents = { [k: string]: TrackingEventType[] };
 type TrackingPreviewContextType = {
   previewTracker: (tracker: TrackerType) => void,
 };
@@ -45,39 +46,6 @@ export const TrackingPreview: React.FC<TrackingPreviewComponent> = ({ children }
     document.execCommand('copy');
     document.body.removeChild(input);
   };
-  const computeColor = (tracker: TrackerType) => {
-    if (tracker?.delivered) return "has-background-success";
-    else if (tracker?.status === TrackerStatusEnum.pending.toString()) return "has-background-grey-dark";
-    else if ([
-      TrackerStatusEnum.on_hold.toString(),
-      TrackerStatusEnum.delivery_delayed.toString(),
-    ].includes(tracker?.status as string)) return "has-background-warning";
-    else if ([
-      TrackerStatusEnum.unknown.toString(),
-    ].includes(tracker?.status as string)) return "has-background-grey";
-    else if ([
-      TrackerStatusEnum.delivery_failed.toString(),
-    ].includes(tracker?.status as string)) return "has-background-danger";
-    else return "has-background-info";
-  };
-  const computeStatus = (tracker: TrackerType) => {
-    if (tracker?.delivered) return "Delivered";
-    else if (tracker?.status === TrackerStatusEnum.pending.toString()) return "Pending";
-    else if ([
-      TrackerStatusEnum.on_hold.toString(),
-      TrackerStatusEnum.delivery_delayed.toString(),
-      TrackerStatusEnum.ready_for_pickup.toString(),
-      TrackerStatusEnum.unknown.toString(),
-      TrackerStatusEnum.delivery_failed.toString(),
-    ].includes(tracker?.status as string)) return formatRef(tracker!.status as string);
-    else return "In-Transit";
-  };
-  const computeEvents = (tracker: TrackerType): DayEvents => {
-    return (tracker?.events || []).reduce((days: any, event: TrackingEventType) => {
-      const daydate = formatDayDate(event.date as string);
-      return { ...days, [daydate]: [...(days[daydate] || []), event] };
-    }, {} as DayEvents);
-  };
 
   return (
     <>
@@ -91,74 +59,17 @@ export const TrackingPreview: React.FC<TrackingPreviewComponent> = ({ children }
 
         {!isNone(tracker) && <div className="modal-card">
           <section className="modal-card-body">
-            <div className="has-text-centered pb-4">
-              <CarrierImage
-                carrier_name={(tracker?.meta as any)?.carrier || tracker?.carrier_name}
-                width={60} height={60}
-                text_color={tracker?.tracking_carrier?.config?.text_color}
-                background={tracker?.tracking_carrier?.config?.brand_color}
-              />
-            </div>
-
-            <p className="subtitle has-text-centered is-6 my-3">
-              <span>Tracking ID</span> <strong>{tracker?.tracking_number}</strong>
-            </p>
-
-            {!isNone(tracker?.info) && (
-              <>
-                <hr />
-                <p className="has-text-weight-bold my-4 is-size-6">Additional Information</p>
-                <div className="columns is-multiline">
-                  {Object.entries(tracker.info)
-                    .filter(([_, value]) => value != null) // Exclude null or undefined values
-                    .map(([key, value], index) => (
-                      <div key={index} className="column is-6">
-                        <strong>{key}: </strong> <span>{String(value)}</span>
-                      </div>
-                  ))}
-                </div>
-              </>
-            )}
-
-            {!isNone(tracker?.estimated_delivery) && <p className="subtitle has-text-centered is-6 mb-3">
-              <span>{tracker?.delivered ? 'Delivered' : 'Estimated Delivery'}</span> {' '}
-              <strong>{formatDayDate(tracker!.estimated_delivery as string)}</strong>
-            </p>}
-
-            <p className={computeColor(tracker as TrackerType) + " block has-text-centered has-text-white is-size-4 py-3"}>
-              {computeStatus(tracker as TrackerType)}
-            </p>
+            <TrackingHeader tracker={tracker as TrackingType} />
 
             <hr />
 
             <div className="my-3 pl-3" style={{ maxHeight: '40vh', overflowY: 'scroll' }}>
 
-              <aside className="menu">
-                <ul className="menu-list mb-5" style={{ maxWidth: "28rem" }}>
-                  {Object.entries(computeEvents(tracker as TrackerType)).map(([day, events], index) => <li key={index}>
-                    <p className="menu-label is-size-6 is-capitalized">{day}</p>
-
-                    {events.map((event, index) => <ul key={index}>
-                      <li className="my-2">
-                        <code>{event.time}</code>
-                        <span className="is-subtitle is-size-7 my-1 has-text-weight-semibold">{event.location}</span>
-                      </li>
-                      <li className="my-2">
-                        <span className="is-subtitle is-size-7 my-1 has-text-weight-semibold has-text-grey">{event.description}</span>
-                      </li>
-                    </ul>)}
-
-                  </li>)}
-                </ul>
-              </aside>
-
+              <TrackingEvents tracker={tracker as TrackingType} />
+              
             </div>
 
-            {((tracker?.messages || []).length > 0) && <div className="notification is-warning">
-              <p className="is-size-7 my-1 has-text-weight-semibold has-text-grey">
-                {(tracker?.messages || [{}])[0].message}
-              </p>
-            </div>}
+            <TrackingMessages messages={tracker?.messages} />
 
             {!isNone(tracker?.shipment) && <>
               <hr />
diff --git a/apps/dashboard/src/modules/Trackers/tracking-page.tsx b/apps/dashboard/src/modules/Trackers/tracking-page.tsx
index 4c93b881de..b403a3e908 100644
--- a/apps/dashboard/src/modules/Trackers/tracking-page.tsx
+++ b/apps/dashboard/src/modules/Trackers/tracking-page.tsx
@@ -1,5 +1,7 @@
 import { TrackingEvent, TrackingStatus } from "@karrio/types/rest/api";
-import { CarrierImage } from "@karrio/ui/components/carrier-image";
+import TrackingHeader from "@/components/TrackingHeader";
+import TrackingEvents from "@/components/TrackingEvents";
+import TrackingMessages from "@/components/TrackingMessages";
 import { formatDayDate, isNone } from "@karrio/lib";
 import { Metadata } from "@karrio/types";
 import { NextPage } from "next";
@@ -38,65 +40,24 @@ const Tracking: NextPage<{ id: string, metadata: Metadata, tracker?: TrackingSta
             <div className="card isolated-card">
               <div className="card-content">
 
-                <div className="pb-4 is-flex is-justify-content-center">
-                  <CarrierImage carrier_name={tracker!.carrier_name} width={60} height={60} />
-                </div>
-
-
-                <p className="subtitle has-text-centered is-6 my-3">
-                  <span>Tracking ID</span> <strong>{tracker?.tracking_number}</strong>
-                </p>
-
-                {!isNone(tracker?.estimated_delivery) && <p className="subtitle has-text-centered is-6 mb-3">
-                  <span>{tracker?.delivered ? 'Delivered' : 'Estimated Delivery'}</span> {' '}
-                  <strong>{formatDayDate(tracker!.estimated_delivery as string)}</strong>
-                </p>}
+                <TrackingHeader tracker={tracker as TrackingType} />
 
               </div>
 
               <footer className="card-footer">
 
-                {(tracker?.status === 'delivered') &&
-                  <p className="card-footer-item has-background-success has-text-white is-size-4">Delivered</p>}
-
-                {(tracker?.status === 'in_transit') &&
-                  <p className="card-footer-item has-background-info has-text-white is-size-4">In-Transit</p>}
-
-                {(tracker?.status !== 'delivered' && tracker?.status !== 'in_transit') &&
-                  <p className="card-footer-item has-background-grey-dark has-text-white is-size-4">Pending</p>}
-
               </footer>
 
             </div>
 
             <hr />
 
-            <div className="my-6">
-
-              <aside className="menu">
-                <ul className="menu-list mb-5" style={{ maxWidth: '28rem' }}>
-                  {Object.entries(computeEvents(tracker as TrackingStatus)).map(([day, events], index) => <li key={index}>
-
-                    <p className="menu-label is-size-6 is-capitalized">{day}</p>
-
-                    {events.map((event, index) => <ul key={index}>
-                      <li className="my-2">
-                        <code>{event.time}</code>
-                        <span className="is-subtitle is-size-7 my-1 has-text-weight-semibold">{event.location}</span>
-                      </li>
-                      <li className="my-2">
-                        <span className="is-subtitle is-size-7 my-1 has-text-weight-semibold has-text-grey">{event.description}</span>
-                      </li>
-                    </ul>)}
-
-                  </li>)}
-                </ul>
-              </aside>
-
-            </div>
+            <TrackingEvents tracker={tracker as TrackingType} />
 
           </>}
 
+          <TrackingMessages messages={tracker?.messages} />
+
           {!isNone(message) && <div className="card isolated-card my-6">
             <div className="card-content has-text-centered ">
               <p>{message}</p>

From 09d8fb945a70c98db0f7f8c541ba73c4fe076c57 Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Thu, 19 Sep 2024 16:59:04 -0400
Subject: [PATCH 09/28] Fix Fedex's SPOD (Signature Proof of Delivery) logic

---
 .../fedex/karrio/mappers/fedex/proxy.py       | 83 +++++++++++++++++++
 .../fedex/karrio/providers/fedex/tracking.py  | 33 ++++++--
 .../fedex/karrio/providers/fedex/utils.py     | 39 +--------
 .../fedex/tests/fedex/test_tracking.py        |  2 +-
 4 files changed, 113 insertions(+), 44 deletions(-)

diff --git a/modules/connectors/fedex/karrio/mappers/fedex/proxy.py b/modules/connectors/fedex/karrio/mappers/fedex/proxy.py
index e86a5c28db..751c1da06b 100644
--- a/modules/connectors/fedex/karrio/mappers/fedex/proxy.py
+++ b/modules/connectors/fedex/karrio/mappers/fedex/proxy.py
@@ -1,8 +1,13 @@
+import typing
 import urllib.parse
 import karrio.lib as lib
 import karrio.api.proxy as proxy
 import karrio.providers.fedex.utils as provider_utils
 import karrio.mappers.fedex.settings as provider_settings
+import karrio.schemas.fedex.tracking_document_request as fedex
+import logging
+
+logger = logging.getLogger(__name__)
 
 
 class Proxy(proxy.Proxy):
@@ -26,6 +31,7 @@ def get_rates(self, request: lib.Serializable) -> lib.Deserializable:
         return lib.Deserializable(response, lib.to_dict, request.ctx)
 
     def get_tracking(self, request: lib.Serializable) -> lib.Deserializable:
+        logger.debug(f"get_tracking settings: {self.settings}")
         response = lib.request(
             url=f"{self.settings.server_url}/track/v1/trackingnumbers",
             data=lib.to_json(request.serialize()),
@@ -99,3 +105,80 @@ def upload_document(self, requests: lib.Serializable) -> lib.Deserializable:
             response,
             lambda __: [lib.to_dict(_) for _ in __],
         )
+    
+    def get_proof_of_delivery(self, tracking_number: str) -> typing.Optional[str]:
+        import karrio.providers.fedex.error as error
+        logger.debug(f"Entering get_proof_of_delivery for tracking number {tracking_number}")
+        logger.debug(f"Using access token of Bearer")
+        logger.debug(self.settings)
+        logger.debug(self.settings.track_access_token)
+        logger.debug("------")
+
+        # Construct the request
+        request = fedex.TrackingDocumentRequestType(
+            trackDocumentSpecification=[
+                fedex.TrackDocumentSpecificationType(
+                    trackingNumberInfo=fedex.TrackingNumberInfoType(
+                        trackingNumber=tracking_number
+                    )
+                )
+            ],
+            trackDocumentDetail=fedex.TrackDocumentDetailType(
+                documentType="SIGNATURE_PROOF_OF_DELIVERY",
+                documentFormat="PNG",
+            ),
+        )
+        logger.debug(f"Request package: {lib.to_json(request)}")  # Log full request as JSON
+
+        try:
+            # Send the request
+            logger.debug("Sending request to fedex...")
+            response = lib.to_dict(
+                lib.request(
+                    url=f"{self.settings.server_url}/track/v1/trackingdocuments",
+                    data=lib.to_json(request),
+                    method="POST",
+                    headers={
+                        "x-locale": "en_US",
+                        "content-type": "application/json",
+                        "authorization": f"Bearer {self.settings.track_access_token}",
+                    },
+                    decoder=provider_utils.parse_response,
+                    on_error=lambda b: self.log_request_error(b),  # Custom error handler
+                )
+            )
+            logger.debug("Processing fedex response...")
+
+            logger.debug(f"Full response from POST to trackingdocuments: {response}")
+
+            # Check if there are any error messages in the response
+            logger.debug("Checking response for errors...")
+            messages = error.parse_error_response(response, self.settings)
+            if any(messages):
+                logger.error(f"FedEx SPOD Error for tracking number {tracking_number}: {messages}")
+                return None
+
+            # Check if the documents are present in the response
+            logger.debug("Parsing documents from response!")
+            documents = response.get("output", {}).get("documents")
+            if not documents:
+                logger.error(f"No POD documents found in the response for tracking number {tracking_number}")
+                return None
+
+            # Convert documents to base64
+            logger.debug(f"bundling documents")
+            #return lib.failsafe(lambda: lib.bundle_base64(documents, format="PNG"))
+            docs_to_return = lib.bundle_base64(documents, format="PNG")
+            logger.debug(f"Docs to return {docs_to_return}")
+            return docs_to_return
+        
+        except Exception as e:
+            # Catch any other exceptions and log the details
+            logger.error(f"An error occurred while fetching POD for tracking number {tracking_number}: {e}")
+            return None
+
+    def log_request_error(self, response_body):
+        # Custom handler for logging errors during the request
+        error_content = response_body.read().decode()
+        logger.error(f"FedEx API Request Error: {error_content}")
+        return provider_utils.parse_response(error_content)
diff --git a/modules/connectors/fedex/karrio/providers/fedex/tracking.py b/modules/connectors/fedex/karrio/providers/fedex/tracking.py
index 2ccb76aa27..618e49678f 100644
--- a/modules/connectors/fedex/karrio/providers/fedex/tracking.py
+++ b/modules/connectors/fedex/karrio/providers/fedex/tracking.py
@@ -6,6 +6,12 @@
 import karrio.providers.fedex.error as provider_error
 import karrio.providers.fedex.utils as provider_utils
 import karrio.providers.fedex.units as provider_units
+import karrio.mappers.fedex.proxy as proxy
+import logging
+
+logger = logging.getLogger(__name__)
+logging.basicConfig(level=logging.DEBUG)
+
 
 DATETIME_FORMATS = ["%Y-%m-%dT%H:%M:%S%z", "%Y-%m-%dT%H:%M:%S"]
 
@@ -68,13 +74,28 @@ def _extract_details(
         provider_units.TrackingStatus.in_transit.name,
     )
     delivered = status == "delivered"
-    img = lib.failsafe(
-        lambda: (
-            provider_utils.get_proof_of_delivery(package.trackingNumber, settings)
-            if delivered
-            else None
-        )
+    # Create a proxy instance with settings
+    logger.debug(f"Settings being passed to the proxy_instance: {settings}")
+    proxy_instance = proxy.Proxy(settings=settings)
+
+    # img = lib.failsafe(
+    #     lambda: (
+    #         proxy_instance.get_proof_of_delivery(package.trackingNumber)
+    #         if delivered
+    #         else None
+    #     )
+    # )
+    img = (
+        proxy_instance.get_proof_of_delivery(package.trackingNumber)
+        if delivered
+        else None
     )
+    logger.debug(f"Image for {package.trackingNumber}: {img}")
+    if img:
+        logger.info(f"Successfully retrieved SPOD image for {package.trackingNumber}")
+    else:
+        logger.warning(f"No SPOD image available for {package.trackingNumber}")
+
 
     return models.TrackingDetails(
         carrier_name=settings.carrier_name,
diff --git a/modules/connectors/fedex/karrio/providers/fedex/utils.py b/modules/connectors/fedex/karrio/providers/fedex/utils.py
index b14f9ae85c..9034f22891 100644
--- a/modules/connectors/fedex/karrio/providers/fedex/utils.py
+++ b/modules/connectors/fedex/karrio/providers/fedex/utils.py
@@ -1,11 +1,12 @@
-import karrio.schemas.fedex.tracking_document_request as fedex
 import gzip
 import datetime
 import urllib.parse
 import karrio.lib as lib
 import karrio.core as core
 import karrio.core.errors as errors
+import logging
 
+logger = logging.getLogger(__name__)
 
 class Settings(core.Settings):
     """FedEx connection settings."""
@@ -142,42 +143,6 @@ def login(settings: Settings, client_id: str = None, client_secret: str = None):
     return {**response, "expiry": lib.fdatetime(expiry)}
 
 
-def get_proof_of_delivery(tracking_number: str, settings: Settings):
-    import karrio.providers.fedex.error as error
-
-    request = fedex.TrackingDocumentRequestType(
-        trackDocumentSpecification=[
-            fedex.TrackDocumentSpecificationType(
-                trackingNumberInfo=fedex.TrackingNumberInfoType(
-                    trackingNumber=tracking_number
-                )
-            )
-        ],
-        trackDocumentDetail=fedex.TrackDocumentDetailType(
-            documentType="SIGNATURE_PROOF_OF_DELIVERY",
-            documentFormat="PNG",
-        ),
-    )
-    response = lib.to_dict(
-        lib.request(
-            url=f"{settings.server_url}/track/v1/trackingdocuments",
-            data=lib.to_json(request),
-            method="POST",
-            decoder=parse_response,
-            on_error=lambda b: parse_response(b.read()),
-        )
-    )
-
-    messages = error.parse_error_response(response, settings)
-
-    if any(messages):
-        return None
-
-    return lib.failsafe(
-        lambda: lib.bundle_base64(response["output"]["documents"], format="PNG")
-    )
-
-
 def parse_response(binary_string):
     content = lib.failsafe(lambda: gzip.decompress(binary_string)) or binary_string
     return lib.decode(content)
diff --git a/modules/connectors/fedex/tests/fedex/test_tracking.py b/modules/connectors/fedex/tests/fedex/test_tracking.py
index 7a37212e36..65d377a775 100644
--- a/modules/connectors/fedex/tests/fedex/test_tracking.py
+++ b/modules/connectors/fedex/tests/fedex/test_tracking.py
@@ -107,7 +107,7 @@ def test_parse_inconsistent_datetime_response(self):
                 "shipment_origin_postal_code": "98101",
                 "shipment_origin_country": "US",
                 "shipment_service": "FedEx Freight Economy.",
-                "signed_by": "Reciever",
+                "signed_by": "Reciever", # How do I do a test for the 'fall over' when we set signed_by to recievedBy instead of signedBy?
             },
             "status": "in_transit",
             "tracking_number": "123456789012",

From 9f9a056dd20520b699248f6f839cdcc064f67c49 Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Thu, 19 Sep 2024 17:16:56 -0400
Subject: [PATCH 10/28] More effort to try and get the '404' page to actually
 show... ugly but it works now at least

---
 apps/dashboard/src/pages/500.tsx  | 10 ++++++++++
 apps/dashboard/src/pages/_app.tsx | 18 +++++++++++++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 apps/dashboard/src/pages/500.tsx

diff --git a/apps/dashboard/src/pages/500.tsx b/apps/dashboard/src/pages/500.tsx
new file mode 100644
index 0000000000..c4cac33c56
--- /dev/null
+++ b/apps/dashboard/src/pages/500.tsx
@@ -0,0 +1,10 @@
+const Custom500 = () => {
+  return (
+    <div className="error-page">
+      <h1>500 - Server Error</h1>
+      <p>Something went wrong. Please try again later.</p>
+    </div>
+  );
+};
+
+export default Custom500;
diff --git a/apps/dashboard/src/pages/_app.tsx b/apps/dashboard/src/pages/_app.tsx
index 83b85165fc..0b66ea53e0 100644
--- a/apps/dashboard/src/pages/_app.tsx
+++ b/apps/dashboard/src/pages/_app.tsx
@@ -10,6 +10,7 @@ import { SessionProvider } from "next-auth/react";
 import MainLayout from "@/layouts/main-layout";
 import type { AppProps } from "next/app";
 
+// Set up query client
 const queryClient = new QueryClient();
 
 function MyApp({ Component, pageProps, router }: AppProps) {
@@ -22,8 +23,22 @@ function MyApp({ Component, pageProps, router }: AppProps) {
       </div>
     );
   }
+  console.log("Current Component Name: |", Component.name, "|");
 
-  const isErrorPage = router.pathname === "/404" || router.pathname === "/500";
+  // Check if the component is a known error page like 404 or 500
+  const isErrorPage =
+    Component.name?.trim() === "Custom404" ||
+    Component.name?.trim() === "Custom500";
+
+  console.log("isErrorPage? ", isErrorPage);
+
+  if (isErrorPage) {
+    return (
+      <div>
+        <Component {...pageProps} />
+      </div>
+    );
+  }
 
   return (
     <SessionProvider session={pageProps.session} refetchInterval={5 * 60}>
@@ -31,6 +46,7 @@ function MyApp({ Component, pageProps, router }: AppProps) {
         <QueryClientProvider client={queryClient}>
           <APIMetadataProvider {...pageProps}>
             <ClientProvider {...pageProps}>
+              {/* Skip MainLayout for error pages */}
               {isErrorPage ? (
                 <Component {...pageProps} />
               ) : (

From 9f47df0191830e86baacff6c59e76d08dd598fc0 Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Tue, 1 Oct 2024 15:25:54 -0400
Subject: [PATCH 11/28] minor clean-up

---
 apps/dashboard/src/pages/_app.tsx    | 5 +----
 packages/types/rest/api.ts           | 4 ++--
 packages/ui/modals/confirm-modal.tsx | 1 +
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/apps/dashboard/src/pages/_app.tsx b/apps/dashboard/src/pages/_app.tsx
index 0b66ea53e0..3e46c8bdfe 100644
--- a/apps/dashboard/src/pages/_app.tsx
+++ b/apps/dashboard/src/pages/_app.tsx
@@ -13,7 +13,7 @@ import type { AppProps } from "next/app";
 // Set up query client
 const queryClient = new QueryClient();
 
-function MyApp({ Component, pageProps, router }: AppProps) {
+function MyApp({ Component, pageProps }: AppProps) {
   // Check for error in pageProps and render an error screen
   if (pageProps?.error) {
     return (
@@ -23,15 +23,12 @@ function MyApp({ Component, pageProps, router }: AppProps) {
       </div>
     );
   }
-  console.log("Current Component Name: |", Component.name, "|");
 
   // Check if the component is a known error page like 404 or 500
   const isErrorPage =
     Component.name?.trim() === "Custom404" ||
     Component.name?.trim() === "Custom500";
 
-  console.log("isErrorPage? ", isErrorPage);
-
   if (isErrorPage) {
     return (
       <div>
diff --git a/packages/types/rest/api.ts b/packages/types/rest/api.ts
index 61ad14cf35..aea5b632b9 100644
--- a/packages/types/rest/api.ts
+++ b/packages/types/rest/api.ts
@@ -8679,13 +8679,13 @@ export interface TrackingStatus {
      */
     'messages'?: Array<Message>;
     /**
-     * The shipment invoice URL
+     * The photo proof of delivery image URL
      * @type {string}
      * @memberof TrackingStatus
      */
     'delivery_image_url'?: string | null;
     /**
-     * The shipment invoice URL
+     * The the signature proof of delivery image URL
      * @type {string}
      * @memberof TrackingStatus
      */
diff --git a/packages/ui/modals/confirm-modal.tsx b/packages/ui/modals/confirm-modal.tsx
index 571c17381f..1c4fc7f2ba 100644
--- a/packages/ui/modals/confirm-modal.tsx
+++ b/packages/ui/modals/confirm-modal.tsx
@@ -40,6 +40,7 @@ export const ConfirmModal: React.FC<ConfirmModalComponent> = ({ children }) => {
     try {
       await operation?.onConfirm();
       notify({
+        // TODO check grammar here
         type: NotificationType.success, message: `${operation?.label} successfully!...`
       });
       setTimeout(() => { close(); }, 2000);

From 84049ce3ff0c385fb4df4ae8c0b5be162ef22111 Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Tue, 1 Oct 2024 16:11:35 -0400
Subject: [PATCH 12/28] Typescript issues etc

---
 .../src/components/TrackingEvents.tsx         | 21 +++-
 .../src/components/TrackingHeader.tsx         |  5 +-
 .../src/components/TrackingMessages.tsx       | 15 ++-
 .../src/components/tracking-preview.tsx       |  6 +-
 .../src/modules/Trackers/tracking-page.tsx    | 98 ++++++++++---------
 5 files changed, 81 insertions(+), 64 deletions(-)

diff --git a/apps/dashboard/src/components/TrackingEvents.tsx b/apps/dashboard/src/components/TrackingEvents.tsx
index eeb4171433..524be8ccad 100644
--- a/apps/dashboard/src/components/TrackingEvents.tsx
+++ b/apps/dashboard/src/components/TrackingEvents.tsx
@@ -1,18 +1,29 @@
 // components/TrackingEvents.tsx
 import { TrackingEvent, TrackingStatus } from "@karrio/types/rest/api";
 import { formatDayDate } from "@karrio/lib";
+import { TrackerType } from "@karrio/types";
 
 type DayEvents = { [k: string]: TrackingEvent[] };
 
 const computeEvents = (tracker: TrackingStatus): DayEvents => {
-  return (tracker?.events || []).reduce((days, event: TrackingEvent) => {
+  const days: DayEvents = {};
+
+  (tracker?.events || []).forEach((event: TrackingEvent) => {
     const daydate = formatDayDate(event.date as string);
-    return { ...days, [daydate]: [...(days[daydate] || []), event] };
-  }, {} as DayEvents);
+
+    if (!days[daydate]) {
+      days[daydate] = [];
+    }
+
+    days[daydate].push(event);
+  });
+
+  return days;
 };
 
-const TrackingEvents: React.FC<{ tracker: TrackingStatus }> = ({ tracker }) => {
-  const eventsByDay = computeEvents(tracker);
+
+const TrackingEvents: React.FC<{ tracker: TrackerType }> = ({ tracker }) => {
+  const eventsByDay = computeEvents(tracker as TrackingStatus);
 
   return (
     <div className="my-6">
diff --git a/apps/dashboard/src/components/TrackingHeader.tsx b/apps/dashboard/src/components/TrackingHeader.tsx
index 574791c6b8..45fe01a46b 100644
--- a/apps/dashboard/src/components/TrackingHeader.tsx
+++ b/apps/dashboard/src/components/TrackingHeader.tsx
@@ -1,10 +1,9 @@
 // components/TrackingHeader.tsx
-import { TrackingStatus } from "@karrio/types/rest/api";
 import { TrackerStatusEnum, TrackerType } from "@karrio/types";
 import { formatDayDate, formatRef, isNone } from "@karrio/lib";
 import { CarrierImage } from "@karrio/ui/components/carrier-image";
 
-const TrackingHeader: React.FC<{ tracker: TrackingStatus }> = ({ tracker }) => {
+const TrackingHeader: React.FC<{ tracker: TrackerType }> = ({ tracker }) => {
   const computeColor = (tracker: TrackerType) => {
     if (tracker?.delivered) return "has-background-success";
     else if (tracker?.status === TrackerStatusEnum.pending.toString())
@@ -77,7 +76,7 @@ const TrackingHeader: React.FC<{ tracker: TrackingStatus }> = ({ tracker }) => {
             Additional Information
           </p>
           <div className="columns is-multiline">
-            {Object.entries(tracker.info)
+            {Object.entries(tracker.info || {})
               .filter(([_, value]) => value != null) // Exclude null or undefined values
               .map(([key, value], index) => (
                 <div key={index} className="column is-6">
diff --git a/apps/dashboard/src/components/TrackingMessages.tsx b/apps/dashboard/src/components/TrackingMessages.tsx
index 03443df101..a6cc491bfe 100644
--- a/apps/dashboard/src/components/TrackingMessages.tsx
+++ b/apps/dashboard/src/components/TrackingMessages.tsx
@@ -1,9 +1,8 @@
-// components/TrackingMessages.tsx
 import React from "react";
 import { TrackerType } from "@karrio/types";
 
 interface TrackingMessagesProps {
-  messages: TrackerType["messages"];
+  messages: (TrackerType["messages"] extends (infer U)[] ? U : never)[]; // Allow flexibility for undefined/null
 }
 
 const TrackingMessages: React.FC<TrackingMessagesProps> = ({ messages }) => {
@@ -11,9 +10,15 @@ const TrackingMessages: React.FC<TrackingMessagesProps> = ({ messages }) => {
 
   return (
     <div className="notification is-warning">
-      <p className="is-size-7 my-1 has-text-weight-semibold has-text-grey">
-        {messages[0]?.message}
-      </p>
+      {messages.map((msg, index) => (
+        <p
+          key={index}
+          className="is-size-7 my-1 has-text-weight-semibold has-text-grey"
+        >
+          {msg?.message ?? "No message available"}{" "}
+          {/* Handle undefined/null message */}
+        </p>
+      ))}
     </div>
   );
 };
diff --git a/apps/dashboard/src/components/tracking-preview.tsx b/apps/dashboard/src/components/tracking-preview.tsx
index d88ee8294a..1664617c73 100644
--- a/apps/dashboard/src/components/tracking-preview.tsx
+++ b/apps/dashboard/src/components/tracking-preview.tsx
@@ -59,17 +59,17 @@ export const TrackingPreview: React.FC<TrackingPreviewComponent> = ({ children }
 
         {!isNone(tracker) && <div className="modal-card">
           <section className="modal-card-body">
-            <TrackingHeader tracker={tracker as TrackingType} />
+            <TrackingHeader tracker={tracker as TrackerType} />
 
             <hr />
 
             <div className="my-3 pl-3" style={{ maxHeight: '40vh', overflowY: 'scroll' }}>
 
-              <TrackingEvents tracker={tracker as TrackingType} />
+              <TrackingEvents tracker={tracker as TrackerType} />
               
             </div>
 
-            <TrackingMessages messages={tracker?.messages} />
+            <TrackingMessages messages={tracker?.messages || []} />
 
             {!isNone(tracker?.shipment) && <>
               <hr />
diff --git a/apps/dashboard/src/modules/Trackers/tracking-page.tsx b/apps/dashboard/src/modules/Trackers/tracking-page.tsx
index b403a3e908..8bcd148cc8 100644
--- a/apps/dashboard/src/modules/Trackers/tracking-page.tsx
+++ b/apps/dashboard/src/modules/Trackers/tracking-page.tsx
@@ -1,30 +1,37 @@
-import { TrackingEvent, TrackingStatus } from "@karrio/types/rest/api";
+import { TrackingStatus } from "@karrio/types/rest/api";
 import TrackingHeader from "@/components/TrackingHeader";
 import TrackingEvents from "@/components/TrackingEvents";
 import TrackingMessages from "@/components/TrackingMessages";
-import { formatDayDate, isNone } from "@karrio/lib";
-import { Metadata } from "@karrio/types";
+import { isNone } from "@karrio/lib";
+import { Metadata, TrackerType } from "@karrio/types";
 import { NextPage } from "next";
 import Head from "next/head";
 import Link from "next/link";
 import React from "react";
 
-export { getServerSideProps } from '@/context/tracker';
-
-type DayEvents = { [k: string]: TrackingEvent[] };
-
-const Tracking: NextPage<{ id: string, metadata: Metadata, tracker?: TrackingStatus, message?: string }> = ({ metadata, id, tracker, message }) => {
-
-  const computeEvents = (tracker: TrackingStatus): DayEvents => {
-    return (tracker?.events || []).reduce((days, event: TrackingEvent) => {
-      const daydate = formatDayDate(event.date as string);
-      return { ...days, [daydate]: [...(days[daydate] || []), event] };
-    }, {} as DayEvents);
-  };
+export { getServerSideProps } from "@/context/tracker";
+
+const Tracking: NextPage<{
+  id: string;
+  metadata: Metadata;
+  tracker?: TrackingStatus;
+  message?: string;
+}> = ({ metadata, id, tracker, message }) => {
+  // Normalize messages to replace undefined with null for TypeScript compatibility
+  const normalizedMessages = (tracker?.messages || []).map((message) => ({
+    ...message,
+    carrier_name: message.carrier_name ?? null, // Convert undefined to null
+    carrier_id: message.carrier_id ?? null, // Convert undefined to null
+    message: message.message ?? null,
+    code: message.code ?? null,
+    details: message.details ?? null,
+  }));
 
   return (
     <>
-      <Head><title>{`Tracking - ${tracker?.tracking_number || id} - ${metadata?.APP_NAME}`}</title></Head>
+      <Head>
+        <title>{`Tracking - ${tracker?.tracking_number || id} - ${metadata?.APP_NAME}`}</title>
+      </Head>
 
       <section className="hero is-fullheight p-2">
 
@@ -32,40 +39,36 @@ const Tracking: NextPage<{ id: string, metadata: Metadata, tracker?: TrackingSta
 
           <div className="has-text-centered my-4">
             <Link legacyBehavior href="/">
-              <span className="is-size-4 has-text-primary has-text-weight-bold is-lowercase">{metadata?.APP_NAME}</span>
+              <span className="is-size-4 has-text-primary has-text-weight-bold is-lowercase">
+                {metadata?.APP_NAME}
+              </span>
             </Link>
           </div>
 
-          {!isNone(tracker) && <>
-            <div className="card isolated-card">
-              <div className="card-content">
-
-                <TrackingHeader tracker={tracker as TrackingType} />
-
+          {!isNone(tracker) && (
+            <>
+              <div className="card isolated-card">
+                <div className="card-content">
+                  <TrackingHeader tracker={tracker as TrackerType} />
+                </div>
+                <footer className="card-footer"></footer>
+              </div>
+              <hr />
+              <TrackingEvents tracker={tracker as TrackerType} />
+            </>
+          )}
+
+          {/* Pass normalized messages to the component */}
+          <TrackingMessages messages={normalizedMessages} />
+
+          {!isNone(message) && (
+            <div className="card isolated-card my-6">
+              <div className="card-content has-text-centered ">
+                <p>{message}</p>
               </div>
-
-              <footer className="card-footer">
-
-              </footer>
-
-            </div>
-
-            <hr />
-
-            <TrackingEvents tracker={tracker as TrackingType} />
-
-          </>}
-
-          <TrackingMessages messages={tracker?.messages} />
-
-          {!isNone(message) && <div className="card isolated-card my-6">
-            <div className="card-content has-text-centered ">
-              <p>{message}</p>
             </div>
-          </div>}
-
-        </div >
-
+          )}
+        </div>
         <hr className="mt-4" />
 
         <div className="hero-footer mb-4">
@@ -77,10 +80,9 @@ const Tracking: NextPage<{ id: string, metadata: Metadata, tracker?: TrackingSta
             </p>
           </div>
         </div>
-
-      </section >
+      </section>
     </>
-  )
+  );
 };
 
 export default Tracking;

From 72931906a384829847e0f26916498c5cd2c012cf Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Tue, 1 Oct 2024 16:17:30 -0400
Subject: [PATCH 13/28] remove a bunch of unnecessary debug logging

---
 .../fedex/karrio/mappers/fedex/proxy.py       | 21 +------------------
 1 file changed, 1 insertion(+), 20 deletions(-)

diff --git a/modules/connectors/fedex/karrio/mappers/fedex/proxy.py b/modules/connectors/fedex/karrio/mappers/fedex/proxy.py
index 751c1da06b..cff784fad3 100644
--- a/modules/connectors/fedex/karrio/mappers/fedex/proxy.py
+++ b/modules/connectors/fedex/karrio/mappers/fedex/proxy.py
@@ -31,7 +31,6 @@ def get_rates(self, request: lib.Serializable) -> lib.Deserializable:
         return lib.Deserializable(response, lib.to_dict, request.ctx)
 
     def get_tracking(self, request: lib.Serializable) -> lib.Deserializable:
-        logger.debug(f"get_tracking settings: {self.settings}")
         response = lib.request(
             url=f"{self.settings.server_url}/track/v1/trackingnumbers",
             data=lib.to_json(request.serialize()),
@@ -108,11 +107,6 @@ def upload_document(self, requests: lib.Serializable) -> lib.Deserializable:
     
     def get_proof_of_delivery(self, tracking_number: str) -> typing.Optional[str]:
         import karrio.providers.fedex.error as error
-        logger.debug(f"Entering get_proof_of_delivery for tracking number {tracking_number}")
-        logger.debug(f"Using access token of Bearer")
-        logger.debug(self.settings)
-        logger.debug(self.settings.track_access_token)
-        logger.debug("------")
 
         # Construct the request
         request = fedex.TrackingDocumentRequestType(
@@ -128,11 +122,9 @@ def get_proof_of_delivery(self, tracking_number: str) -> typing.Optional[str]:
                 documentFormat="PNG",
             ),
         )
-        logger.debug(f"Request package: {lib.to_json(request)}")  # Log full request as JSON
 
         try:
             # Send the request
-            logger.debug("Sending request to fedex...")
             response = lib.to_dict(
                 lib.request(
                     url=f"{self.settings.server_url}/track/v1/trackingdocuments",
@@ -147,30 +139,19 @@ def get_proof_of_delivery(self, tracking_number: str) -> typing.Optional[str]:
                     on_error=lambda b: self.log_request_error(b),  # Custom error handler
                 )
             )
-            logger.debug("Processing fedex response...")
-
-            logger.debug(f"Full response from POST to trackingdocuments: {response}")
-
-            # Check if there are any error messages in the response
-            logger.debug("Checking response for errors...")
             messages = error.parse_error_response(response, self.settings)
             if any(messages):
                 logger.error(f"FedEx SPOD Error for tracking number {tracking_number}: {messages}")
                 return None
 
             # Check if the documents are present in the response
-            logger.debug("Parsing documents from response!")
             documents = response.get("output", {}).get("documents")
             if not documents:
                 logger.error(f"No POD documents found in the response for tracking number {tracking_number}")
                 return None
 
             # Convert documents to base64
-            logger.debug(f"bundling documents")
-            #return lib.failsafe(lambda: lib.bundle_base64(documents, format="PNG"))
-            docs_to_return = lib.bundle_base64(documents, format="PNG")
-            logger.debug(f"Docs to return {docs_to_return}")
-            return docs_to_return
+            return lib.failsafe(lambda: lib.bundle_base64(documents, format="PNG"))
         
         except Exception as e:
             # Catch any other exceptions and log the details

From a648a0d036b858292d54c8c196f3b4e7396af3dc Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Tue, 1 Oct 2024 16:21:39 -0400
Subject: [PATCH 14/28] remove unnecessary logging

---
 .../fedex/karrio/providers/fedex/tracking.py  | 31 ++++++-------------
 1 file changed, 10 insertions(+), 21 deletions(-)

diff --git a/modules/connectors/fedex/karrio/providers/fedex/tracking.py b/modules/connectors/fedex/karrio/providers/fedex/tracking.py
index 618e49678f..7da986fb82 100644
--- a/modules/connectors/fedex/karrio/providers/fedex/tracking.py
+++ b/modules/connectors/fedex/karrio/providers/fedex/tracking.py
@@ -7,10 +7,6 @@
 import karrio.providers.fedex.utils as provider_utils
 import karrio.providers.fedex.units as provider_units
 import karrio.mappers.fedex.proxy as proxy
-import logging
-
-logger = logging.getLogger(__name__)
-logging.basicConfig(level=logging.DEBUG)
 
 
 DATETIME_FORMATS = ["%Y-%m-%dT%H:%M:%S%z", "%Y-%m-%dT%H:%M:%S"]
@@ -75,26 +71,19 @@ def _extract_details(
     )
     delivered = status == "delivered"
     # Create a proxy instance with settings
-    logger.debug(f"Settings being passed to the proxy_instance: {settings}")
     proxy_instance = proxy.Proxy(settings=settings)
 
-    # img = lib.failsafe(
-    #     lambda: (
-    #         proxy_instance.get_proof_of_delivery(package.trackingNumber)
-    #         if delivered
-    #         else None
-    #     )
-    # )
-    img = (
-        proxy_instance.get_proof_of_delivery(package.trackingNumber)
-        if delivered
-        else None
+    img = lib.failsafe(
+        lambda: (
+            proxy_instance.get_proof_of_delivery(package.trackingNumber)
+            if delivered
+            else None
+        )
     )
-    logger.debug(f"Image for {package.trackingNumber}: {img}")
-    if img:
-        logger.info(f"Successfully retrieved SPOD image for {package.trackingNumber}")
-    else:
-        logger.warning(f"No SPOD image available for {package.trackingNumber}")
+    # if img:
+    #     logger.info(f"Successfully retrieved SPOD image for {package.trackingNumber}")
+    # else:
+    #     logger.warning(f"No SPOD image available for {package.trackingNumber}")
 
 
     return models.TrackingDetails(

From dc0c442069d2c3d5f7885172858439dd425e3cac Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Thu, 5 Sep 2024 11:52:25 -0400
Subject: [PATCH 15/28] Fallback to 'receivedByName' if Fedex's 'signedByName'
 is missing when tracking the 'signed_by' info

---
 .../fedex/karrio/providers/fedex/tracking.py           | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/modules/connectors/fedex/karrio/providers/fedex/tracking.py b/modules/connectors/fedex/karrio/providers/fedex/tracking.py
index 10fe5afebb..20b7d0d6c8 100644
--- a/modules/connectors/fedex/karrio/providers/fedex/tracking.py
+++ b/modules/connectors/fedex/karrio/providers/fedex/tracking.py
@@ -122,10 +122,16 @@ def _extract_details(
             shipment_origin_country=lib.failsafe(
                 lambda: detail.originLocation.locationContactAndAddress.address.countryCode
             ),
-            signed_by=lib.failsafe(lambda: detail.deliveryDetails.signedByName),
+            signed_by=lib.failsafe(
+                lambda: (
+                    detail.deliveryDetails.signedByName
+                    if detail.deliveryDetails.signedByName
+                    else (detail.deliveryDetails.receivedByName)
+                )
+            ),
         ),
         images=lib.identity(models.Images(signature_image=img) if img else None),
-        estimated_delivery=estimated_delivery,
+        estimated_delivery=lib.fdate(estimated_delivery, try_formats=DATETIME_FORMATS),
         delivered=(status == "delivered"),
         status=status,
     )

From 223727b75363727499e10903c7816f71f30a3c7e Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Thu, 5 Sep 2024 12:28:42 -0400
Subject: [PATCH 16/28] Trying to prevent merge conflicts

---
 modules/connectors/fedex/karrio/providers/fedex/tracking.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/connectors/fedex/karrio/providers/fedex/tracking.py b/modules/connectors/fedex/karrio/providers/fedex/tracking.py
index 20b7d0d6c8..2ccb76aa27 100644
--- a/modules/connectors/fedex/karrio/providers/fedex/tracking.py
+++ b/modules/connectors/fedex/karrio/providers/fedex/tracking.py
@@ -131,7 +131,7 @@ def _extract_details(
             ),
         ),
         images=lib.identity(models.Images(signature_image=img) if img else None),
-        estimated_delivery=lib.fdate(estimated_delivery, try_formats=DATETIME_FORMATS),
+        estimated_delivery=estimated_delivery,
         delivered=(status == "delivered"),
         status=status,
     )

From ca23bec98e22467b16777e2a84e9102aa65a5610 Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Wed, 18 Sep 2024 10:06:15 -0400
Subject: [PATCH 17/28] Correct typo "Delet" -> "Delete" and add tracking
 number to the dialog

---
 packages/core/modules/Trackers/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/modules/Trackers/index.tsx b/packages/core/modules/Trackers/index.tsx
index 93a8fb1ee8..8203076988 100644
--- a/packages/core/modules/Trackers/index.tsx
+++ b/packages/core/modules/Trackers/index.tsx
@@ -281,7 +281,7 @@ export default function TrackersPage(pageProps: any) {
                           onClick={(e) => {
                             e.stopPropagation();
                             confirmDeletion({
-                              label: "Delet Shipment Tracker",
+                              label: "Delete Shipment Tracker",
                               identifier: tracker.id as string,
                               onConfirm: remove(tracker.id),
                             });

From 5a1a78496c4b4bbcf380d26326f5b47550834798 Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Wed, 18 Sep 2024 12:38:26 -0400
Subject: [PATCH 18/28] If the tracker has been Delivered, include the
 signed_by as part of the event line

---
 packages/core/modules/Trackers/index.tsx | 49 ++++++++++++++++--------
 1 file changed, 33 insertions(+), 16 deletions(-)

diff --git a/packages/core/modules/Trackers/index.tsx b/packages/core/modules/Trackers/index.tsx
index 8203076988..290b3eb4f9 100644
--- a/packages/core/modules/Trackers/index.tsx
+++ b/packages/core/modules/Trackers/index.tsx
@@ -24,7 +24,7 @@ import { dynamicMetadata } from "@karrio/core/components/metadata";
 import { StatusBadge } from "@karrio/ui/components/status-badge";
 import { useLoader } from "@karrio/ui/components/loader";
 import { Spinner } from "@karrio/ui/components/spinner";
-import { TrackingEvent } from "@karrio/types/rest/api";
+import { TrackingEvent, TrackingInfo } from "@karrio/types/rest/api";
 import React, { useContext, useEffect } from "react";
 import { useSearchParams } from "next/navigation";
 
@@ -249,22 +249,25 @@ export default function TrackersPage(pageProps: any) {
                         />
                       </td>
                       <td className="last-event is-vcentered py-1 last-event is-size-7 has-text-weight-bold has-text-grey text-ellipsis">
-                        <span
-                          className="text-ellipsis"
-                          title={
-                            isNoneOrEmpty(tracker?.events)
-                              ? ""
-                              : formatEventDescription(
-                                  (tracker?.events as TrackingEvent[])[0],
-                                )
-                          }
-                        >
-                          {isNoneOrEmpty(tracker?.events)
+                        {(() => {
+                          const formattedDescription = isNoneOrEmpty(
+                            tracker?.events,
+                          )
                             ? ""
                             : formatEventDescription(
                                 (tracker?.events as TrackingEvent[])[0],
-                              )}
-                        </span>
+                                tracker?.info as TrackingInfo,
+                              );
+
+                          return (
+                            <span
+                              className="text-ellipsis"
+                              title={formattedDescription}
+                            >
+                              {formattedDescription}
+                            </span>
+                          );
+                        })()}
                       </td>
                       <td className="date is-vcentered has-text-right">
                         <p className="is-size-7 has-text-weight-semibold has-text-grey">
@@ -351,8 +354,22 @@ export default function TrackersPage(pageProps: any) {
   );
 }
 
-function formatEventDescription(last_event?: TrackingEvent): string {
-  return last_event?.description || "";
+function formatEventDescription(
+  last_event?: TrackingEvent,
+  tracking_info?: TrackingInfo,
+): string {
+  if (!last_event) {
+    return "";
+  }
+
+  const { description } = last_event;
+  const { signed_by } = tracking_info || {};
+
+  if (description === "Delivered" && signed_by) {
+    return `${description} (Signed by: ${signed_by})`;
+  }
+
+  return description || "";
 }
 
 function formatEventDate(last_event?: TrackingEvent): string {

From 2ea146f57bdbb24c96c8a3b8d92e15a7c410dd0e Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Wed, 18 Sep 2024 13:34:59 -0400
Subject: [PATCH 19/28] Display available 'info' fields in the tracker preview
 header

---
 packages/core/components/tracking-preview.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/packages/core/components/tracking-preview.tsx b/packages/core/components/tracking-preview.tsx
index e23c156ba2..4517d734dc 100644
--- a/packages/core/components/tracking-preview.tsx
+++ b/packages/core/components/tracking-preview.tsx
@@ -139,6 +139,24 @@ export const TrackingPreview: React.FC<TrackingPreviewComponent> = ({
                 <strong>{tracker?.tracking_number}</strong>
               </p>
 
+              {!isNone(tracker?.info) && (
+                <>
+                  <hr />
+                  <p className="has-text-weight-bold my-4 is-size-6">
+                    Additional Information
+                  </p>
+                  <div className="columns is-multiline">
+                    {Object.entries(tracker?.info || {})
+                      .filter(([_, value]) => value != null) // Exclude null or undefined values
+                      .map(([key, value], index) => (
+                        <div key={index} className="column is-6">
+                          <strong>{key}: </strong> <span>{String(value)}</span>
+                        </div>
+                      ))}
+                  </div>
+                </>
+              )}
+
               {!isNone(tracker?.estimated_delivery) && (
                 <p className="subtitle has-text-centered is-6 mb-3">
                   <span>

From a8ed7cce340d872555311761c06631befa9989cf Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Wed, 18 Sep 2024 14:56:09 -0400
Subject: [PATCH 20/28] Refactor tracking-preview and tracking-page so they
 don't repeat themselves and re-use new components

---
 packages/core/components/TrackingEvents.tsx   |  47 ++++++
 packages/core/components/TrackingHeader.tsx   | 103 ++++++++++++
 packages/core/components/TrackingMessages.tsx |  21 +++
 packages/core/components/tracking-preview.tsx | 151 +-----------------
 .../core/modules/Trackers/tracking-page.tsx   |  87 ++--------
 5 files changed, 187 insertions(+), 222 deletions(-)
 create mode 100644 packages/core/components/TrackingEvents.tsx
 create mode 100644 packages/core/components/TrackingHeader.tsx
 create mode 100644 packages/core/components/TrackingMessages.tsx

diff --git a/packages/core/components/TrackingEvents.tsx b/packages/core/components/TrackingEvents.tsx
new file mode 100644
index 0000000000..eeb4171433
--- /dev/null
+++ b/packages/core/components/TrackingEvents.tsx
@@ -0,0 +1,47 @@
+// components/TrackingEvents.tsx
+import { TrackingEvent, TrackingStatus } from "@karrio/types/rest/api";
+import { formatDayDate } from "@karrio/lib";
+
+type DayEvents = { [k: string]: TrackingEvent[] };
+
+const computeEvents = (tracker: TrackingStatus): DayEvents => {
+  return (tracker?.events || []).reduce((days, event: TrackingEvent) => {
+    const daydate = formatDayDate(event.date as string);
+    return { ...days, [daydate]: [...(days[daydate] || []), event] };
+  }, {} as DayEvents);
+};
+
+const TrackingEvents: React.FC<{ tracker: TrackingStatus }> = ({ tracker }) => {
+  const eventsByDay = computeEvents(tracker);
+
+  return (
+    <div className="my-6">
+      <aside className="menu">
+        <ul className="menu-list mb-5" style={{ maxWidth: "28rem" }}>
+          {Object.entries(eventsByDay).map(([day, events], index) => (
+            <li key={index}>
+              <p className="menu-label is-size-6 is-capitalized">{day}</p>
+              {events.map((event, index) => (
+                <ul key={index}>
+                  <li className="my-2">
+                    <code>{event.time}</code>
+                    <span className="is-subtitle is-size-7 my-1 has-text-weight-semibold">
+                      {event.location}
+                    </span>
+                  </li>
+                  <li className="my-2">
+                    <span className="is-subtitle is-size-7 my-1 has-text-weight-semibold has-text-grey">
+                      {event.description}
+                    </span>
+                  </li>
+                </ul>
+              ))}
+            </li>
+          ))}
+        </ul>
+      </aside>
+    </div>
+  );
+};
+
+export default TrackingEvents;
diff --git a/packages/core/components/TrackingHeader.tsx b/packages/core/components/TrackingHeader.tsx
new file mode 100644
index 0000000000..574791c6b8
--- /dev/null
+++ b/packages/core/components/TrackingHeader.tsx
@@ -0,0 +1,103 @@
+// components/TrackingHeader.tsx
+import { TrackingStatus } from "@karrio/types/rest/api";
+import { TrackerStatusEnum, TrackerType } from "@karrio/types";
+import { formatDayDate, formatRef, isNone } from "@karrio/lib";
+import { CarrierImage } from "@karrio/ui/components/carrier-image";
+
+const TrackingHeader: React.FC<{ tracker: TrackingStatus }> = ({ tracker }) => {
+  const computeColor = (tracker: TrackerType) => {
+    if (tracker?.delivered) return "has-background-success";
+    else if (tracker?.status === TrackerStatusEnum.pending.toString())
+      return "has-background-grey-dark";
+    else if (
+      [
+        TrackerStatusEnum.on_hold.toString(),
+        TrackerStatusEnum.delivery_delayed.toString(),
+      ].includes(tracker?.status as string)
+    )
+      return "has-background-warning";
+    else if (
+      [TrackerStatusEnum.unknown.toString()].includes(
+        tracker?.status as string,
+      )
+    )
+      return "has-background-grey";
+    else if (
+      [TrackerStatusEnum.delivery_failed.toString()].includes(
+        tracker?.status as string,
+      )
+    )
+      return "has-background-danger";
+    else return "has-background-info";
+  };
+  const computeStatus = (tracker: TrackerType) => {
+    if (tracker?.delivered) return "Delivered";
+    else if (tracker?.status === TrackerStatusEnum.pending.toString())
+      return "Pending";
+    else if (
+      [
+        TrackerStatusEnum.on_hold.toString(),
+        TrackerStatusEnum.delivery_delayed.toString(),
+        TrackerStatusEnum.ready_for_pickup.toString(),
+        TrackerStatusEnum.unknown.toString(),
+        TrackerStatusEnum.delivery_failed.toString(),
+      ].includes(tracker?.status as string)
+    )
+      return formatRef(tracker!.status as string);
+    else return "In-Transit";
+  };
+
+  return (
+    <>
+      <div className="pb-4 is-flex is-justify-content-center">
+        <CarrierImage
+          carrier_name={tracker.carrier_name}
+          width={60}
+          height={60}
+        />
+      </div>
+
+      <p className="subtitle has-text-centered is-6 my-3">
+        <span>Tracking ID</span> <strong>{tracker.tracking_number}</strong>
+      </p>
+
+      {!isNone(tracker?.estimated_delivery) && (
+        <p className="subtitle has-text-centered is-6 mb-3">
+          <span>{tracker?.delivered ? "Delivered" : "Estimated Delivery"}</span>{" "}
+          <strong>
+            {formatDayDate(tracker!.estimated_delivery as string)}
+          </strong>
+        </p>
+      )}
+
+      {!isNone(tracker?.info) && (
+        <>
+          <hr />
+          <p className="has-text-weight-bold my-4 is-size-6">
+            Additional Information
+          </p>
+          <div className="columns is-multiline">
+            {Object.entries(tracker.info)
+              .filter(([_, value]) => value != null) // Exclude null or undefined values
+              .map(([key, value], index) => (
+                <div key={index} className="column is-6">
+                  <strong>{key}: </strong> <span>{String(value)}</span>
+                </div>
+              ))}
+          </div>
+        </>
+      )}
+
+      <p
+        className={
+          computeColor(tracker as TrackerType) +
+          " block has-text-centered has-text-white is-size-4 py-3"
+        }
+      >
+        {computeStatus(tracker as TrackerType)}
+      </p>
+    </>
+  );
+};
+
+export default TrackingHeader;
diff --git a/packages/core/components/TrackingMessages.tsx b/packages/core/components/TrackingMessages.tsx
new file mode 100644
index 0000000000..03443df101
--- /dev/null
+++ b/packages/core/components/TrackingMessages.tsx
@@ -0,0 +1,21 @@
+// components/TrackingMessages.tsx
+import React from "react";
+import { TrackerType } from "@karrio/types";
+
+interface TrackingMessagesProps {
+  messages: TrackerType["messages"];
+}
+
+const TrackingMessages: React.FC<TrackingMessagesProps> = ({ messages }) => {
+  if (!messages || messages.length === 0) return null;
+
+  return (
+    <div className="notification is-warning">
+      <p className="is-size-7 my-1 has-text-weight-semibold has-text-grey">
+        {messages[0]?.message}
+      </p>
+    </div>
+  );
+};
+
+export default TrackingMessages;
diff --git a/packages/core/components/tracking-preview.tsx b/packages/core/components/tracking-preview.tsx
index 4517d734dc..ccb076f008 100644
--- a/packages/core/components/tracking-preview.tsx
+++ b/packages/core/components/tracking-preview.tsx
@@ -1,20 +1,18 @@
 import {
   formatAddressRegion,
-  formatDayDate,
   formatRef,
   isNone,
 } from "@karrio/lib";
 import {
-  TrackerStatusEnum,
   TrackerType,
-  TrackingEventType,
 } from "@karrio/types";
-import { CarrierImage } from "@karrio/ui/components/carrier-image";
 import { AppLink } from "@karrio/ui/components/app-link";
 import React, { useRef, useState } from "react";
 import { useLocation } from "@karrio/hooks/location";
+import TrackingHeader from "./TrackingHeader";
+import TrackingEvents from "./TrackingEvents";
+import TrackingMessages from "./TrackingMessages";
 
-type DayEvents = { [k: string]: TrackingEventType[] };
 type TrackingPreviewContextType = {
   previewTracker: (tracker: TrackerType) => void;
 };
@@ -60,54 +58,6 @@ export const TrackingPreview: React.FC<TrackingPreviewComponent> = ({
     document.execCommand("copy");
     document.body.removeChild(input);
   };
-  const computeColor = (tracker: TrackerType) => {
-    if (tracker?.delivered) return "has-background-success";
-    else if (tracker?.status === TrackerStatusEnum.pending.toString())
-      return "has-background-grey-dark";
-    else if (
-      [
-        TrackerStatusEnum.on_hold.toString(),
-        TrackerStatusEnum.delivery_delayed.toString(),
-      ].includes(tracker?.status as string)
-    )
-      return "has-background-warning";
-    else if (
-      [TrackerStatusEnum.unknown.toString()].includes(tracker?.status as string)
-    )
-      return "has-background-grey";
-    else if (
-      [TrackerStatusEnum.delivery_failed.toString()].includes(
-        tracker?.status as string,
-      )
-    )
-      return "has-background-danger";
-    else return "has-background-info";
-  };
-  const computeStatus = (tracker: TrackerType) => {
-    if (tracker?.delivered) return "Delivered";
-    else if (tracker?.status === TrackerStatusEnum.pending.toString())
-      return "Pending";
-    else if (
-      [
-        TrackerStatusEnum.on_hold.toString(),
-        TrackerStatusEnum.delivery_delayed.toString(),
-        TrackerStatusEnum.ready_for_pickup.toString(),
-        TrackerStatusEnum.unknown.toString(),
-        TrackerStatusEnum.delivery_failed.toString(),
-      ].includes(tracker?.status as string)
-    )
-      return formatRef(tracker!.status as string);
-    else return "In-Transit";
-  };
-  const computeEvents = (tracker: TrackerType): DayEvents => {
-    return (tracker?.events || []).reduce(
-      (days: any, event: TrackingEventType) => {
-        const daydate = formatDayDate(event.date as string);
-        return { ...days, [daydate]: [...(days[daydate] || []), event] };
-      },
-      {} as DayEvents,
-    );
-  };
 
   return (
     <>
@@ -122,60 +72,7 @@ export const TrackingPreview: React.FC<TrackingPreviewComponent> = ({
         {!isNone(tracker) && (
           <div className="modal-card">
             <section className="modal-card-body">
-              <div className="has-text-centered pb-4">
-                <CarrierImage
-                  carrier_name={
-                    (tracker?.meta as any)?.carrier || tracker?.carrier_name
-                  }
-                  width={60}
-                  height={60}
-                  text_color={tracker?.tracking_carrier?.config?.text_color}
-                  background={tracker?.tracking_carrier?.config?.brand_color}
-                />
-              </div>
-
-              <p className="subtitle has-text-centered is-6 my-3">
-                <span>Tracking ID</span>{" "}
-                <strong>{tracker?.tracking_number}</strong>
-              </p>
-
-              {!isNone(tracker?.info) && (
-                <>
-                  <hr />
-                  <p className="has-text-weight-bold my-4 is-size-6">
-                    Additional Information
-                  </p>
-                  <div className="columns is-multiline">
-                    {Object.entries(tracker?.info || {})
-                      .filter(([_, value]) => value != null) // Exclude null or undefined values
-                      .map(([key, value], index) => (
-                        <div key={index} className="column is-6">
-                          <strong>{key}: </strong> <span>{String(value)}</span>
-                        </div>
-                      ))}
-                  </div>
-                </>
-              )}
-
-              {!isNone(tracker?.estimated_delivery) && (
-                <p className="subtitle has-text-centered is-6 mb-3">
-                  <span>
-                    {tracker?.delivered ? "Delivered" : "Estimated Delivery"}
-                  </span>{" "}
-                  <strong>
-                    {formatDayDate(tracker!.estimated_delivery as string)}
-                  </strong>
-                </p>
-              )}
-
-              <p
-                className={
-                  computeColor(tracker as TrackerType) +
-                  " block has-text-centered has-text-white is-size-4 py-3"
-                }
-              >
-                {computeStatus(tracker as TrackerType)}
-              </p>
+              <TrackingHeader tracker={tracker as TrackingType} />
 
               <hr />
 
@@ -183,45 +80,11 @@ export const TrackingPreview: React.FC<TrackingPreviewComponent> = ({
                 className="my-3 pl-3"
                 style={{ maxHeight: "40vh", overflowY: "scroll" }}
               >
-                <aside className="menu">
-                  <ul className="menu-list mb-5" style={{ maxWidth: "28rem" }}>
-                    {Object.entries(computeEvents(tracker as TrackerType)).map(
-                      ([day, events], index) => (
-                        <li key={index}>
-                          <p className="menu-label is-size-6 is-capitalized">
-                            {day}
-                          </p>
-
-                          {events.map((event, index) => (
-                            <ul key={index}>
-                              <li className="my-2">
-                                <code>{event.time}</code>
-                                <span className="is-subtitle is-size-7 my-1 has-text-weight-semibold">
-                                  {event.location}
-                                </span>
-                              </li>
-                              <li className="my-2">
-                                <span className="is-subtitle is-size-7 my-1 has-text-weight-semibold has-text-grey">
-                                  {event.description}
-                                </span>
-                              </li>
-                            </ul>
-                          ))}
-                        </li>
-                      ),
-                    )}
-                  </ul>
-                </aside>
+                <TrackingEvents tracker={tracker as TrackingType} />
               </div>
 
-              {(tracker?.messages || []).length > 0 && (
-                <div className="notification is-warning">
-                  <p className="is-size-7 my-1 has-text-weight-semibold has-text-grey">
-                    {(tracker?.messages || [{}])[0].message}
-                  </p>
-                </div>
-              )}
-
+              <TrackingMessages messages={tracker?.messages || [] } />
+              
               {!isNone(tracker?.shipment) && (
                 <>
                   <hr />
diff --git a/packages/core/modules/Trackers/tracking-page.tsx b/packages/core/modules/Trackers/tracking-page.tsx
index d607b6ccbd..ea6fc6d15e 100644
--- a/packages/core/modules/Trackers/tracking-page.tsx
+++ b/packages/core/modules/Trackers/tracking-page.tsx
@@ -1,11 +1,13 @@
 import { TrackingEvent, TrackingStatus } from "@karrio/types/rest/api";
 import { formatDayDate, isNone, KARRIO_API, url$ } from "@karrio/lib";
 import { dynamicMetadata } from "@karrio/core/components/metadata";
-import { CarrierImage } from "@karrio/ui/components/carrier-image";
 import { Collection, KarrioClient } from "@karrio/types";
 import { loadMetadata } from "@karrio/core/context/main";
 import Link from "next/link";
 import React from "react";
+import TrackingHeader from "@karrio/core/components/TrackingHeader";
+import TrackingEvents from "@karrio/core/components/TrackingEvents";
+import TrackingMessages from "@karrio/core/components/TrackingMessages";
 
 export const generateMetadata = dynamicMetadata("Tracking");
 
@@ -51,91 +53,20 @@ export default async function Page({ params }: { params: Collection }) {
             <>
               <div className="card isolated-card">
                 <div className="card-content">
-                  <div className="pb-4 is-flex is-justify-content-center">
-                    <CarrierImage
-                      carrier_name={tracker!.carrier_name}
-                      width={60}
-                      height={60}
-                    />
-                  </div>
-
-                  <p className="subtitle has-text-centered is-6 my-3">
-                    <span>Tracking ID</span>{" "}
-                    <strong>{tracker?.tracking_number}</strong>
-                  </p>
-
-                  {!isNone(tracker?.estimated_delivery) && (
-                    <p className="subtitle has-text-centered is-6 mb-3">
-                      <span>
-                        {tracker?.delivered
-                          ? "Delivered"
-                          : "Estimated Delivery"}
-                      </span>{" "}
-                      <strong>
-                        {formatDayDate(tracker!.estimated_delivery as string)}
-                      </strong>
-                    </p>
-                  )}
+                  <TrackingHeader tracker={tracker as TrackingType} />
                 </div>
 
-                <footer className="card-footer">
-                  {tracker?.status === "delivered" && (
-                    <p className="card-footer-item has-background-success has-text-white is-size-4">
-                      Delivered
-                    </p>
-                  )}
-
-                  {tracker?.status === "in_transit" && (
-                    <p className="card-footer-item has-background-info has-text-white is-size-4">
-                      In-Transit
-                    </p>
-                  )}
-
-                  {tracker?.status !== "delivered" &&
-                    tracker?.status !== "in_transit" && (
-                      <p className="card-footer-item has-background-grey-dark has-text-white is-size-4">
-                        Pending
-                      </p>
-                    )}
-                </footer>
+                <footer className="card-footer"></footer>
               </div>
 
               <hr />
-
-              <div className="my-6">
-                <aside className="menu">
-                  <ul className="menu-list mb-5" style={{ maxWidth: "28rem" }}>
-                    {Object.entries(
-                      computeEvents(tracker as TrackingStatus),
-                    ).map(([day, events], index) => (
-                      <li key={index}>
-                        <p className="menu-label is-size-6 is-capitalized">
-                          {day}
-                        </p>
-
-                        {events.map((event, index) => (
-                          <ul key={index}>
-                            <li className="my-2">
-                              <code>{event.time}</code>
-                              <span className="is-subtitle is-size-7 my-1 has-text-weight-semibold">
-                                {event.location}
-                              </span>
-                            </li>
-                            <li className="my-2">
-                              <span className="is-subtitle is-size-7 my-1 has-text-weight-semibold has-text-grey">
-                                {event.description}
-                              </span>
-                            </li>
-                          </ul>
-                        ))}
-                      </li>
-                    ))}
-                  </ul>
-                </aside>
-              </div>
+              
+              <TrackingEvents tracker={tracker as TrackingType} />
             </>
           )}
 
+          <TrackingMessages messages={tracker?.messages || [] } />
+          
           {!isNone(message) && (
             <div className="card isolated-card my-6">
               <div className="card-content has-text-centered ">

From f32c7cdeef0aa8533e4f723d93b8c39c50ab4141 Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Thu, 19 Sep 2024 16:59:04 -0400
Subject: [PATCH 21/28] Fix Fedex's SPOD (Signature Proof of Delivery) logic

---
 .../fedex/karrio/mappers/fedex/proxy.py       | 83 +++++++++++++++++++
 .../fedex/karrio/providers/fedex/tracking.py  | 33 ++++++--
 .../fedex/karrio/providers/fedex/utils.py     | 39 +--------
 .../fedex/tests/fedex/test_tracking.py        |  2 +-
 4 files changed, 113 insertions(+), 44 deletions(-)

diff --git a/modules/connectors/fedex/karrio/mappers/fedex/proxy.py b/modules/connectors/fedex/karrio/mappers/fedex/proxy.py
index 3176806f32..6c3ce9edd7 100644
--- a/modules/connectors/fedex/karrio/mappers/fedex/proxy.py
+++ b/modules/connectors/fedex/karrio/mappers/fedex/proxy.py
@@ -1,8 +1,13 @@
+import typing
 import urllib.parse
 import karrio.lib as lib
 import karrio.api.proxy as proxy
 import karrio.providers.fedex.utils as provider_utils
 import karrio.mappers.fedex.settings as provider_settings
+import karrio.schemas.fedex.tracking_document_request as fedex
+import logging
+
+logger = logging.getLogger(__name__)
 
 
 class Proxy(proxy.Proxy):
@@ -26,6 +31,7 @@ def get_rates(self, request: lib.Serializable) -> lib.Deserializable:
         return lib.Deserializable(response, lib.to_dict, request.ctx)
 
     def get_tracking(self, request: lib.Serializable) -> lib.Deserializable:
+        logger.debug(f"get_tracking settings: {self.settings}")
         response = lib.request(
             url=f"{self.settings.server_url}/track/v1/trackingnumbers",
             data=lib.to_json(request.serialize()),
@@ -142,3 +148,80 @@ def cancel_pickup(self, request: lib.Serializable) -> lib.Deserializable[str]:
         )
 
         return lib.Deserializable(response, lib.to_dict, request.ctx)
+    
+    def get_proof_of_delivery(self, tracking_number: str) -> typing.Optional[str]:
+        import karrio.providers.fedex.error as error
+        logger.debug(f"Entering get_proof_of_delivery for tracking number {tracking_number}")
+        logger.debug(f"Using access token of Bearer")
+        logger.debug(self.settings)
+        logger.debug(self.settings.track_access_token)
+        logger.debug("------")
+
+        # Construct the request
+        request = fedex.TrackingDocumentRequestType(
+            trackDocumentSpecification=[
+                fedex.TrackDocumentSpecificationType(
+                    trackingNumberInfo=fedex.TrackingNumberInfoType(
+                        trackingNumber=tracking_number
+                    )
+                )
+            ],
+            trackDocumentDetail=fedex.TrackDocumentDetailType(
+                documentType="SIGNATURE_PROOF_OF_DELIVERY",
+                documentFormat="PNG",
+            ),
+        )
+        logger.debug(f"Request package: {lib.to_json(request)}")  # Log full request as JSON
+
+        try:
+            # Send the request
+            logger.debug("Sending request to fedex...")
+            response = lib.to_dict(
+                lib.request(
+                    url=f"{self.settings.server_url}/track/v1/trackingdocuments",
+                    data=lib.to_json(request),
+                    method="POST",
+                    headers={
+                        "x-locale": "en_US",
+                        "content-type": "application/json",
+                        "authorization": f"Bearer {self.settings.track_access_token}",
+                    },
+                    decoder=provider_utils.parse_response,
+                    on_error=lambda b: self.log_request_error(b),  # Custom error handler
+                )
+            )
+            logger.debug("Processing fedex response...")
+
+            logger.debug(f"Full response from POST to trackingdocuments: {response}")
+
+            # Check if there are any error messages in the response
+            logger.debug("Checking response for errors...")
+            messages = error.parse_error_response(response, self.settings)
+            if any(messages):
+                logger.error(f"FedEx SPOD Error for tracking number {tracking_number}: {messages}")
+                return None
+
+            # Check if the documents are present in the response
+            logger.debug("Parsing documents from response!")
+            documents = response.get("output", {}).get("documents")
+            if not documents:
+                logger.error(f"No POD documents found in the response for tracking number {tracking_number}")
+                return None
+
+            # Convert documents to base64
+            logger.debug(f"bundling documents")
+            #return lib.failsafe(lambda: lib.bundle_base64(documents, format="PNG"))
+            docs_to_return = lib.bundle_base64(documents, format="PNG")
+            logger.debug(f"Docs to return {docs_to_return}")
+            return docs_to_return
+        
+        except Exception as e:
+            # Catch any other exceptions and log the details
+            logger.error(f"An error occurred while fetching POD for tracking number {tracking_number}: {e}")
+            return None
+
+    def log_request_error(self, response_body):
+        # Custom handler for logging errors during the request
+        error_content = response_body.read().decode()
+        logger.error(f"FedEx API Request Error: {error_content}")
+        return provider_utils.parse_response(error_content)
diff --git a/modules/connectors/fedex/karrio/providers/fedex/tracking.py b/modules/connectors/fedex/karrio/providers/fedex/tracking.py
index 2ccb76aa27..618e49678f 100644
--- a/modules/connectors/fedex/karrio/providers/fedex/tracking.py
+++ b/modules/connectors/fedex/karrio/providers/fedex/tracking.py
@@ -6,6 +6,12 @@
 import karrio.providers.fedex.error as provider_error
 import karrio.providers.fedex.utils as provider_utils
 import karrio.providers.fedex.units as provider_units
+import karrio.mappers.fedex.proxy as proxy
+import logging
+
+logger = logging.getLogger(__name__)
+logging.basicConfig(level=logging.DEBUG)
+
 
 DATETIME_FORMATS = ["%Y-%m-%dT%H:%M:%S%z", "%Y-%m-%dT%H:%M:%S"]
 
@@ -68,13 +74,28 @@ def _extract_details(
         provider_units.TrackingStatus.in_transit.name,
     )
     delivered = status == "delivered"
-    img = lib.failsafe(
-        lambda: (
-            provider_utils.get_proof_of_delivery(package.trackingNumber, settings)
-            if delivered
-            else None
-        )
+    # Create a proxy instance with settings
+    logger.debug(f"Settings being passed to the proxy_instance: {settings}")
+    proxy_instance = proxy.Proxy(settings=settings)
+
+    # img = lib.failsafe(
+    #     lambda: (
+    #         proxy_instance.get_proof_of_delivery(package.trackingNumber)
+    #         if delivered
+    #         else None
+    #     )
+    # )
+    img = (
+        proxy_instance.get_proof_of_delivery(package.trackingNumber)
+        if delivered
+        else None
     )
+    logger.debug(f"Image for {package.trackingNumber}: {img}")
+    if img:
+        logger.info(f"Successfully retrieved SPOD image for {package.trackingNumber}")
+    else:
+        logger.warning(f"No SPOD image available for {package.trackingNumber}")
+
 
     return models.TrackingDetails(
         carrier_name=settings.carrier_name,
diff --git a/modules/connectors/fedex/karrio/providers/fedex/utils.py b/modules/connectors/fedex/karrio/providers/fedex/utils.py
index b14f9ae85c..9034f22891 100644
--- a/modules/connectors/fedex/karrio/providers/fedex/utils.py
+++ b/modules/connectors/fedex/karrio/providers/fedex/utils.py
@@ -1,11 +1,12 @@
-import karrio.schemas.fedex.tracking_document_request as fedex
 import gzip
 import datetime
 import urllib.parse
 import karrio.lib as lib
 import karrio.core as core
 import karrio.core.errors as errors
+import logging
 
+logger = logging.getLogger(__name__)
 
 class Settings(core.Settings):
     """FedEx connection settings."""
@@ -142,42 +143,6 @@ def login(settings: Settings, client_id: str = None, client_secret: str = None):
     return {**response, "expiry": lib.fdatetime(expiry)}
 
 
-def get_proof_of_delivery(tracking_number: str, settings: Settings):
-    import karrio.providers.fedex.error as error
-
-    request = fedex.TrackingDocumentRequestType(
-        trackDocumentSpecification=[
-            fedex.TrackDocumentSpecificationType(
-                trackingNumberInfo=fedex.TrackingNumberInfoType(
-                    trackingNumber=tracking_number
-                )
-            )
-        ],
-        trackDocumentDetail=fedex.TrackDocumentDetailType(
-            documentType="SIGNATURE_PROOF_OF_DELIVERY",
-            documentFormat="PNG",
-        ),
-    )
-    response = lib.to_dict(
-        lib.request(
-            url=f"{settings.server_url}/track/v1/trackingdocuments",
-            data=lib.to_json(request),
-            method="POST",
-            decoder=parse_response,
-            on_error=lambda b: parse_response(b.read()),
-        )
-    )
-
-    messages = error.parse_error_response(response, settings)
-
-    if any(messages):
-        return None
-
-    return lib.failsafe(
-        lambda: lib.bundle_base64(response["output"]["documents"], format="PNG")
-    )
-
-
 def parse_response(binary_string):
     content = lib.failsafe(lambda: gzip.decompress(binary_string)) or binary_string
     return lib.decode(content)
diff --git a/modules/connectors/fedex/tests/fedex/test_tracking.py b/modules/connectors/fedex/tests/fedex/test_tracking.py
index 7a37212e36..65d377a775 100644
--- a/modules/connectors/fedex/tests/fedex/test_tracking.py
+++ b/modules/connectors/fedex/tests/fedex/test_tracking.py
@@ -107,7 +107,7 @@ def test_parse_inconsistent_datetime_response(self):
                 "shipment_origin_postal_code": "98101",
                 "shipment_origin_country": "US",
                 "shipment_service": "FedEx Freight Economy.",
-                "signed_by": "Reciever",
+                "signed_by": "Reciever", # How do I do a test for the 'fall over' when we set signed_by to recievedBy instead of signedBy?
             },
             "status": "in_transit",
             "tracking_number": "123456789012",

From f523562434324e944dfecb2d32dcb44c6820514d Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Tue, 1 Oct 2024 15:25:54 -0400
Subject: [PATCH 22/28] minor clean-up

---
 packages/types/rest/api.ts           | 4 ++--
 packages/ui/modals/confirm-modal.tsx | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/types/rest/api.ts b/packages/types/rest/api.ts
index 4d4529fc23..75667ce9cd 100644
--- a/packages/types/rest/api.ts
+++ b/packages/types/rest/api.ts
@@ -8750,13 +8750,13 @@ export interface TrackingStatus {
      */
     'messages'?: Array<Message>;
     /**
-     * The shipment invoice URL
+     * The photo proof of delivery image URL
      * @type {string}
      * @memberof TrackingStatus
      */
     'delivery_image_url'?: string | null;
     /**
-     * The shipment invoice URL
+     * The the signature proof of delivery image URL
      * @type {string}
      * @memberof TrackingStatus
      */
diff --git a/packages/ui/modals/confirm-modal.tsx b/packages/ui/modals/confirm-modal.tsx
index 571c17381f..1c4fc7f2ba 100644
--- a/packages/ui/modals/confirm-modal.tsx
+++ b/packages/ui/modals/confirm-modal.tsx
@@ -40,6 +40,7 @@ export const ConfirmModal: React.FC<ConfirmModalComponent> = ({ children }) => {
     try {
       await operation?.onConfirm();
       notify({
+        // TODO check grammar here
         type: NotificationType.success, message: `${operation?.label} successfully!...`
       });
       setTimeout(() => { close(); }, 2000);

From 19062e60baf9de9ff56ea9c2001e1b1b8b153d21 Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Tue, 1 Oct 2024 16:11:35 -0400
Subject: [PATCH 23/28] Typescript issues etc

---
 packages/core/components/TrackingEvents.tsx   | 21 +++++++++---
 packages/core/components/TrackingHeader.tsx   |  5 ++-
 packages/core/components/TrackingMessages.tsx | 15 ++++++---
 packages/core/components/tracking-preview.tsx |  4 +--
 .../core/modules/Trackers/tracking-page.tsx   | 33 +++++++++----------
 5 files changed, 46 insertions(+), 32 deletions(-)

diff --git a/packages/core/components/TrackingEvents.tsx b/packages/core/components/TrackingEvents.tsx
index eeb4171433..524be8ccad 100644
--- a/packages/core/components/TrackingEvents.tsx
+++ b/packages/core/components/TrackingEvents.tsx
@@ -1,18 +1,29 @@
 // components/TrackingEvents.tsx
 import { TrackingEvent, TrackingStatus } from "@karrio/types/rest/api";
 import { formatDayDate } from "@karrio/lib";
+import { TrackerType } from "@karrio/types";
 
 type DayEvents = { [k: string]: TrackingEvent[] };
 
 const computeEvents = (tracker: TrackingStatus): DayEvents => {
-  return (tracker?.events || []).reduce((days, event: TrackingEvent) => {
+  const days: DayEvents = {};
+
+  (tracker?.events || []).forEach((event: TrackingEvent) => {
     const daydate = formatDayDate(event.date as string);
-    return { ...days, [daydate]: [...(days[daydate] || []), event] };
-  }, {} as DayEvents);
+
+    if (!days[daydate]) {
+      days[daydate] = [];
+    }
+
+    days[daydate].push(event);
+  });
+
+  return days;
 };
 
-const TrackingEvents: React.FC<{ tracker: TrackingStatus }> = ({ tracker }) => {
-  const eventsByDay = computeEvents(tracker);
+
+const TrackingEvents: React.FC<{ tracker: TrackerType }> = ({ tracker }) => {
+  const eventsByDay = computeEvents(tracker as TrackingStatus);
 
   return (
     <div className="my-6">
diff --git a/packages/core/components/TrackingHeader.tsx b/packages/core/components/TrackingHeader.tsx
index 574791c6b8..45fe01a46b 100644
--- a/packages/core/components/TrackingHeader.tsx
+++ b/packages/core/components/TrackingHeader.tsx
@@ -1,10 +1,9 @@
 // components/TrackingHeader.tsx
-import { TrackingStatus } from "@karrio/types/rest/api";
 import { TrackerStatusEnum, TrackerType } from "@karrio/types";
 import { formatDayDate, formatRef, isNone } from "@karrio/lib";
 import { CarrierImage } from "@karrio/ui/components/carrier-image";
 
-const TrackingHeader: React.FC<{ tracker: TrackingStatus }> = ({ tracker }) => {
+const TrackingHeader: React.FC<{ tracker: TrackerType }> = ({ tracker }) => {
   const computeColor = (tracker: TrackerType) => {
     if (tracker?.delivered) return "has-background-success";
     else if (tracker?.status === TrackerStatusEnum.pending.toString())
@@ -77,7 +76,7 @@ const TrackingHeader: React.FC<{ tracker: TrackingStatus }> = ({ tracker }) => {
             Additional Information
           </p>
           <div className="columns is-multiline">
-            {Object.entries(tracker.info)
+            {Object.entries(tracker.info || {})
               .filter(([_, value]) => value != null) // Exclude null or undefined values
               .map(([key, value], index) => (
                 <div key={index} className="column is-6">
diff --git a/packages/core/components/TrackingMessages.tsx b/packages/core/components/TrackingMessages.tsx
index 03443df101..a6cc491bfe 100644
--- a/packages/core/components/TrackingMessages.tsx
+++ b/packages/core/components/TrackingMessages.tsx
@@ -1,9 +1,8 @@
-// components/TrackingMessages.tsx
 import React from "react";
 import { TrackerType } from "@karrio/types";
 
 interface TrackingMessagesProps {
-  messages: TrackerType["messages"];
+  messages: (TrackerType["messages"] extends (infer U)[] ? U : never)[]; // Allow flexibility for undefined/null
 }
 
 const TrackingMessages: React.FC<TrackingMessagesProps> = ({ messages }) => {
@@ -11,9 +10,15 @@ const TrackingMessages: React.FC<TrackingMessagesProps> = ({ messages }) => {
 
   return (
     <div className="notification is-warning">
-      <p className="is-size-7 my-1 has-text-weight-semibold has-text-grey">
-        {messages[0]?.message}
-      </p>
+      {messages.map((msg, index) => (
+        <p
+          key={index}
+          className="is-size-7 my-1 has-text-weight-semibold has-text-grey"
+        >
+          {msg?.message ?? "No message available"}{" "}
+          {/* Handle undefined/null message */}
+        </p>
+      ))}
     </div>
   );
 };
diff --git a/packages/core/components/tracking-preview.tsx b/packages/core/components/tracking-preview.tsx
index ccb076f008..7cddd30630 100644
--- a/packages/core/components/tracking-preview.tsx
+++ b/packages/core/components/tracking-preview.tsx
@@ -72,7 +72,7 @@ export const TrackingPreview: React.FC<TrackingPreviewComponent> = ({
         {!isNone(tracker) && (
           <div className="modal-card">
             <section className="modal-card-body">
-              <TrackingHeader tracker={tracker as TrackingType} />
+              <TrackingHeader tracker={tracker as TrackerType} />
 
               <hr />
 
@@ -80,7 +80,7 @@ export const TrackingPreview: React.FC<TrackingPreviewComponent> = ({
                 className="my-3 pl-3"
                 style={{ maxHeight: "40vh", overflowY: "scroll" }}
               >
-                <TrackingEvents tracker={tracker as TrackingType} />
+                <TrackingEvents tracker={tracker as TrackerType} />
               </div>
 
               <TrackingMessages messages={tracker?.messages || [] } />
diff --git a/packages/core/modules/Trackers/tracking-page.tsx b/packages/core/modules/Trackers/tracking-page.tsx
index ea6fc6d15e..13adcc88fb 100644
--- a/packages/core/modules/Trackers/tracking-page.tsx
+++ b/packages/core/modules/Trackers/tracking-page.tsx
@@ -1,7 +1,6 @@
-import { TrackingEvent, TrackingStatus } from "@karrio/types/rest/api";
-import { formatDayDate, isNone, KARRIO_API, url$ } from "@karrio/lib";
+import { isNone, KARRIO_API, url$ } from "@karrio/lib";
 import { dynamicMetadata } from "@karrio/core/components/metadata";
-import { Collection, KarrioClient } from "@karrio/types";
+import { Collection, KarrioClient, TrackerType } from "@karrio/types";
 import { loadMetadata } from "@karrio/core/context/main";
 import Link from "next/link";
 import React from "react";
@@ -11,8 +10,6 @@ import TrackingMessages from "@karrio/core/components/TrackingMessages";
 
 export const generateMetadata = dynamicMetadata("Tracking");
 
-type DayEvents = { [k: string]: TrackingEvent[] };
-
 export default async function Page({ params }: { params: Collection }) {
   const id = params?.id as string;
   const { metadata } = await loadMetadata();
@@ -29,13 +26,15 @@ export default async function Page({ params }: { params: Collection }) {
         message: `No Tracker ID nor Tracking Number found for ${id}`,
       };
     });
-
-  const computeEvents = (tracker: TrackingStatus): DayEvents => {
-    return (tracker?.events || []).reduce((days, event: TrackingEvent) => {
-      const daydate = formatDayDate(event.date as string);
-      return { ...days, [daydate]: [...(days[daydate] || []), event] };
-    }, {} as DayEvents);
-  };
+  // Normalize messages to replace undefined with null for TypeScript compatibility
+  const normalizedMessages = (tracker?.messages || []).map((message) => ({
+    ...message,
+    carrier_name: message.carrier_name ?? null, // Convert undefined to null
+    carrier_id: message.carrier_id ?? null, // Convert undefined to null
+    message: message.message ?? null,
+    code: message.code ?? null,
+    details: message.details ?? null,
+  }));
 
   return (
     <>
@@ -53,20 +52,20 @@ export default async function Page({ params }: { params: Collection }) {
             <>
               <div className="card isolated-card">
                 <div className="card-content">
-                  <TrackingHeader tracker={tracker as TrackingType} />
+                  <TrackingHeader tracker={tracker as TrackerType} />
                 </div>
 
                 <footer className="card-footer"></footer>
               </div>
 
               <hr />
-              
-              <TrackingEvents tracker={tracker as TrackingType} />
+
+              <TrackingEvents tracker={tracker as TrackerType} />
             </>
           )}
 
-          <TrackingMessages messages={tracker?.messages || [] } />
-          
+          <TrackingMessages messages={normalizedMessages} />
+
           {!isNone(message) && (
             <div className="card isolated-card my-6">
               <div className="card-content has-text-centered ">

From b8c9ed9baffbc962ac436a2cfd1bc2da5ac51017 Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Tue, 1 Oct 2024 16:17:30 -0400
Subject: [PATCH 24/28] remove a bunch of unnecessary debug logging

---
 .../fedex/karrio/mappers/fedex/proxy.py       | 21 +------------------
 1 file changed, 1 insertion(+), 20 deletions(-)

diff --git a/modules/connectors/fedex/karrio/mappers/fedex/proxy.py b/modules/connectors/fedex/karrio/mappers/fedex/proxy.py
index 6c3ce9edd7..c8371a2036 100644
--- a/modules/connectors/fedex/karrio/mappers/fedex/proxy.py
+++ b/modules/connectors/fedex/karrio/mappers/fedex/proxy.py
@@ -31,7 +31,6 @@ def get_rates(self, request: lib.Serializable) -> lib.Deserializable:
         return lib.Deserializable(response, lib.to_dict, request.ctx)
 
     def get_tracking(self, request: lib.Serializable) -> lib.Deserializable:
-        logger.debug(f"get_tracking settings: {self.settings}")
         response = lib.request(
             url=f"{self.settings.server_url}/track/v1/trackingnumbers",
             data=lib.to_json(request.serialize()),
@@ -151,11 +150,6 @@ def cancel_pickup(self, request: lib.Serializable) -> lib.Deserializable[str]:
     
     def get_proof_of_delivery(self, tracking_number: str) -> typing.Optional[str]:
         import karrio.providers.fedex.error as error
-        logger.debug(f"Entering get_proof_of_delivery for tracking number {tracking_number}")
-        logger.debug(f"Using access token of Bearer")
-        logger.debug(self.settings)
-        logger.debug(self.settings.track_access_token)
-        logger.debug("------")
 
         # Construct the request
         request = fedex.TrackingDocumentRequestType(
@@ -171,11 +165,9 @@ def get_proof_of_delivery(self, tracking_number: str) -> typing.Optional[str]:
                 documentFormat="PNG",
             ),
         )
-        logger.debug(f"Request package: {lib.to_json(request)}")  # Log full request as JSON
 
         try:
             # Send the request
-            logger.debug("Sending request to fedex...")
             response = lib.to_dict(
                 lib.request(
                     url=f"{self.settings.server_url}/track/v1/trackingdocuments",
@@ -190,30 +182,19 @@ def get_proof_of_delivery(self, tracking_number: str) -> typing.Optional[str]:
                     on_error=lambda b: self.log_request_error(b),  # Custom error handler
                 )
             )
-            logger.debug("Processing fedex response...")
-
-            logger.debug(f"Full response from POST to trackingdocuments: {response}")
-
-            # Check if there are any error messages in the response
-            logger.debug("Checking response for errors...")
             messages = error.parse_error_response(response, self.settings)
             if any(messages):
                 logger.error(f"FedEx SPOD Error for tracking number {tracking_number}: {messages}")
                 return None
 
             # Check if the documents are present in the response
-            logger.debug("Parsing documents from response!")
             documents = response.get("output", {}).get("documents")
             if not documents:
                 logger.error(f"No POD documents found in the response for tracking number {tracking_number}")
                 return None
 
             # Convert documents to base64
-            logger.debug(f"bundling documents")
-            #return lib.failsafe(lambda: lib.bundle_base64(documents, format="PNG"))
-            docs_to_return = lib.bundle_base64(documents, format="PNG")
-            logger.debug(f"Docs to return {docs_to_return}")
-            return docs_to_return
+            return lib.failsafe(lambda: lib.bundle_base64(documents, format="PNG"))
         
         except Exception as e:
             # Catch any other exceptions and log the details

From 033124214db092da729b8ec4b04e0d29c77f7404 Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Tue, 1 Oct 2024 16:21:39 -0400
Subject: [PATCH 25/28] remove unnecessary logging

---
 .../fedex/karrio/providers/fedex/tracking.py  | 31 ++++++-------------
 1 file changed, 10 insertions(+), 21 deletions(-)

diff --git a/modules/connectors/fedex/karrio/providers/fedex/tracking.py b/modules/connectors/fedex/karrio/providers/fedex/tracking.py
index 618e49678f..7da986fb82 100644
--- a/modules/connectors/fedex/karrio/providers/fedex/tracking.py
+++ b/modules/connectors/fedex/karrio/providers/fedex/tracking.py
@@ -7,10 +7,6 @@
 import karrio.providers.fedex.utils as provider_utils
 import karrio.providers.fedex.units as provider_units
 import karrio.mappers.fedex.proxy as proxy
-import logging
-
-logger = logging.getLogger(__name__)
-logging.basicConfig(level=logging.DEBUG)
 
 
 DATETIME_FORMATS = ["%Y-%m-%dT%H:%M:%S%z", "%Y-%m-%dT%H:%M:%S"]
@@ -75,26 +71,19 @@ def _extract_details(
     )
     delivered = status == "delivered"
     # Create a proxy instance with settings
-    logger.debug(f"Settings being passed to the proxy_instance: {settings}")
     proxy_instance = proxy.Proxy(settings=settings)
 
-    # img = lib.failsafe(
-    #     lambda: (
-    #         proxy_instance.get_proof_of_delivery(package.trackingNumber)
-    #         if delivered
-    #         else None
-    #     )
-    # )
-    img = (
-        proxy_instance.get_proof_of_delivery(package.trackingNumber)
-        if delivered
-        else None
+    img = lib.failsafe(
+        lambda: (
+            proxy_instance.get_proof_of_delivery(package.trackingNumber)
+            if delivered
+            else None
+        )
     )
-    logger.debug(f"Image for {package.trackingNumber}: {img}")
-    if img:
-        logger.info(f"Successfully retrieved SPOD image for {package.trackingNumber}")
-    else:
-        logger.warning(f"No SPOD image available for {package.trackingNumber}")
+    # if img:
+    #     logger.info(f"Successfully retrieved SPOD image for {package.trackingNumber}")
+    # else:
+    #     logger.warning(f"No SPOD image available for {package.trackingNumber}")
 
 
     return models.TrackingDetails(

From d1dff9eddb49846c95f7fce3c016737dc993c9aa Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Tue, 1 Oct 2024 21:40:13 -0400
Subject: [PATCH 26/28] merge after rebase?

---
 modules/connectors/fedex/karrio/mappers/fedex/proxy.py | 1 -
 1 file changed, 1 deletion(-)

diff --git a/modules/connectors/fedex/karrio/mappers/fedex/proxy.py b/modules/connectors/fedex/karrio/mappers/fedex/proxy.py
index c8371a2036..eb5c4061e1 100644
--- a/modules/connectors/fedex/karrio/mappers/fedex/proxy.py
+++ b/modules/connectors/fedex/karrio/mappers/fedex/proxy.py
@@ -9,7 +9,6 @@
 
 logger = logging.getLogger(__name__)
 
-
 class Proxy(proxy.Proxy):
     settings: provider_settings.Settings
 

From 14af461f7905b8c9a07612cb8141fe1772aadb54 Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Tue, 1 Oct 2024 22:23:07 -0400
Subject: [PATCH 27/28] address codacy issues

---
 modules/connectors/fedex/karrio/mappers/fedex/proxy.py | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/modules/connectors/fedex/karrio/mappers/fedex/proxy.py b/modules/connectors/fedex/karrio/mappers/fedex/proxy.py
index 82f44d38bf..670ad215c2 100644
--- a/modules/connectors/fedex/karrio/mappers/fedex/proxy.py
+++ b/modules/connectors/fedex/karrio/mappers/fedex/proxy.py
@@ -1,5 +1,4 @@
 import typing
-import typing
 import urllib.parse
 import karrio.lib as lib
 import karrio.api.proxy as proxy
@@ -147,7 +146,7 @@ def cancel_pickup(self, request: lib.Serializable) -> lib.Deserializable[str]:
         )
 
         return lib.Deserializable(response, lib.to_dict, request.ctx)
-    
+
     def get_proof_of_delivery(self, tracking_number: str) -> typing.Optional[str]:
         import karrio.providers.fedex.error as error
 
@@ -179,7 +178,7 @@ def get_proof_of_delivery(self, tracking_number: str) -> typing.Optional[str]:
                         "authorization": f"Bearer {self.settings.track_access_token}",
                     },
                     decoder=provider_utils.parse_response,
-                    on_error=lambda b: self.log_request_error(b),  # Custom error handler
+                    on_error=self.log_request_error,  # Direct function reference
                 )
             )
             messages = error.parse_error_response(response, self.settings)

From e23105222d914ca1977c48d129840da4d96215b0 Mon Sep 17 00:00:00 2001
From: "Chris Nolan.ca" <chrisnolan.ca+github@gmail.com>
Date: Wed, 2 Oct 2024 08:06:38 -0400
Subject: [PATCH 28/28] refactor 'Additional Info' in TrackingHeader to be
 'prettier' and collapsable

---
 .../fedex/karrio/mappers/fedex/proxy.py       |  2 +-
 packages/core/components/TrackingHeader.tsx   | 64 +++++++++++++++----
 2 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/modules/connectors/fedex/karrio/mappers/fedex/proxy.py b/modules/connectors/fedex/karrio/mappers/fedex/proxy.py
index 670ad215c2..4d43fb0020 100644
--- a/modules/connectors/fedex/karrio/mappers/fedex/proxy.py
+++ b/modules/connectors/fedex/karrio/mappers/fedex/proxy.py
@@ -194,7 +194,7 @@ def get_proof_of_delivery(self, tracking_number: str) -> typing.Optional[str]:
 
             # Convert documents to base64
             return lib.failsafe(lambda: lib.bundle_base64(documents, format="PNG"))
-        
+
         except Exception as e:
             # Catch any other exceptions and log the details
             logger.error(f"An error occurred while fetching POD for tracking number {tracking_number}: {e}")
diff --git a/packages/core/components/TrackingHeader.tsx b/packages/core/components/TrackingHeader.tsx
index 45fe01a46b..3fa9668004 100644
--- a/packages/core/components/TrackingHeader.tsx
+++ b/packages/core/components/TrackingHeader.tsx
@@ -1,9 +1,14 @@
 // components/TrackingHeader.tsx
+"use client";
+
+import { useState } from "react";
 import { TrackerStatusEnum, TrackerType } from "@karrio/types";
 import { formatDayDate, formatRef, isNone } from "@karrio/lib";
 import { CarrierImage } from "@karrio/ui/components/carrier-image";
 
 const TrackingHeader: React.FC<{ tracker: TrackerType }> = ({ tracker }) => {
+  const [isExpanded, setIsExpanded] = useState(false); // State to control expansion
+
   const computeColor = (tracker: TrackerType) => {
     if (tracker?.delivered) return "has-background-success";
     else if (tracker?.status === TrackerStatusEnum.pending.toString())
@@ -29,6 +34,7 @@ const TrackingHeader: React.FC<{ tracker: TrackerType }> = ({ tracker }) => {
       return "has-background-danger";
     else return "has-background-info";
   };
+
   const computeStatus = (tracker: TrackerType) => {
     if (tracker?.delivered) return "Delivered";
     else if (tracker?.status === TrackerStatusEnum.pending.toString())
@@ -46,6 +52,27 @@ const TrackingHeader: React.FC<{ tracker: TrackerType }> = ({ tracker }) => {
     else return "In-Transit";
   };
 
+  const prettifyKey = (key: string) => {
+    // Convert snake_case to "Pretty Case"
+    return key
+      .replace(/_/g, " ") // Replace underscores with spaces
+      .replace(/\b\w/g, (char) => char.toUpperCase()); // Capitalize each word
+  };
+
+  const customRender = (key: string, value: any) => {
+    switch (key) {
+      case "carrier_tracking_link":
+        return (
+          <a href={String(value)} target="_blank" rel="noopener noreferrer">
+            {String(value)}
+          </a>
+        );
+      // Add more cases as needed for custom rendering of specific fields
+      default:
+        return <span>{String(value)}</span>;
+    }
+  };
+
   return (
     <>
       <div className="pb-4 is-flex is-justify-content-center">
@@ -72,18 +99,31 @@ const TrackingHeader: React.FC<{ tracker: TrackerType }> = ({ tracker }) => {
       {!isNone(tracker?.info) && (
         <>
           <hr />
-          <p className="has-text-weight-bold my-4 is-size-6">
-            Additional Information
-          </p>
-          <div className="columns is-multiline">
-            {Object.entries(tracker.info || {})
-              .filter(([_, value]) => value != null) // Exclude null or undefined values
-              .map(([key, value], index) => (
-                <div key={index} className="column is-6">
-                  <strong>{key}: </strong> <span>{String(value)}</span>
-                </div>
-              ))}
-          </div>
+          {/* Accessible button to toggle section */}
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            aria-expanded={isExpanded} // Accessibility: indicate expanded state
+            aria-controls="additional-info" // Accessibility: points to content
+            className="has-text-weight-bold my-4 is-size-6 is-flex is-align-items-center"
+            style={{ cursor: "pointer", background: "none", border: "none" }}
+          >
+            <span>{isExpanded ? "-" : "+"}</span>
+            <span className="ml-2">Additional Information</span>
+          </button>
+
+          {/* Conditionally render additional info */}
+          {isExpanded && (
+            <div id="additional-info" className="columns is-multiline">
+              {Object.entries(tracker.info || {})
+                .filter(([_, value]) => value != null) // Exclude null or undefined values
+                .map(([key, value], index) => (
+                  <div key={index} className="column is-6">
+                    <strong>{prettifyKey(key)}: </strong>{" "}
+                    {customRender(key, value)}
+                  </div>
+                ))}
+            </div>
+          )}
         </>
       )}