From f3f48c7bb3c59be67a82632b6d1bc8acf22eef2f Mon Sep 17 00:00:00 2001
From: Daniel K <dan@karrio.io>
Date: Sat, 16 Dec 2023 04:20:00 -0800
Subject: [PATCH] (add) reference to shipment list and improve responsive
 styling

---
 apps/dashboard/src/modules/Shipments/index.tsx | 15 ++++++++++-----
 apps/dashboard/src/pages/api/images/[name].ts  |  2 +-
 apps/dashboard/src/styles/dashboard.scss       | 10 ++++++++--
 packages/ui/components/carrier-badge.tsx       |  2 +-
 4 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/apps/dashboard/src/modules/Shipments/index.tsx b/apps/dashboard/src/modules/Shipments/index.tsx
index 014ed61309..8ed4e47bb9 100644
--- a/apps/dashboard/src/modules/Shipments/index.tsx
+++ b/apps/dashboard/src/modules/Shipments/index.tsx
@@ -1,4 +1,4 @@
-import { formatAddressShort, formatAddressLocationShort, formatDateTime, formatRef, getURLSearchParams, isListEqual, isNone, isNoneOrEmpty } from "@karrio/lib";
+import { formatAddressShort, formatAddressLocationShort, formatDateTime, formatRef, getURLSearchParams, isListEqual, isNone, isNoneOrEmpty, formatCarrierSlug } from "@karrio/lib";
 import { ShipmentPreview, ShipmentPreviewContext } from "@/components/shipment-preview";
 import { ShipmentsFilter } from "@karrio/ui/filters/shipments-filter";
 import { ShipmentMenu } from "@karrio/ui/components/shipment-menu";
@@ -16,6 +16,7 @@ import React, { useContext, useEffect } from "react";
 import { useRouter } from "next/dist/client/router";
 import { AddressType } from "@karrio/types";
 import Head from "next/head";
+import { useAPIMetadata } from "@karrio/hooks/api-metadata";
 
 export { getServerSideProps } from "@/context/main";
 
@@ -24,6 +25,7 @@ export default function ShipmentsPage(pageProps: any) {
   const Component: React.FC = () => {
     const router = useRouter();
     const { setLoading } = useLoader();
+    const { metadata } = useAPIMetadata();
     const [initialized, setInitialized] = React.useState(false);
     const { previewShipment } = useContext(ShipmentPreviewContext);
     const context = useShipments({
@@ -100,6 +102,7 @@ export default function ShipmentsPage(pageProps: any) {
                   <td className="service is-size-7">SERVICE</td>
                   <td className="status"></td>
                   <td className="recipient is-size-7">RECIPIENT</td>
+                  <td className="reference is-size-7">REFERENCE</td>
                   <td className="date is-size-7">DATE</td>
                   <td className="action"></td>
                 </tr>
@@ -107,12 +110,11 @@ export default function ShipmentsPage(pageProps: any) {
                 {(shipments?.edges || []).map(({ node: shipment }) => (
                   <tr key={shipment.id} className="items is-clickable">
                     <td className="carrier is-vcentered p-2" onClick={() => previewShipment(shipment.id)}>
-                      {!!shipment.carrier_name && <CarrierBadge
+                      <CarrierBadge
                         className="has-background-primary has-text-weight-bold has-text-white-bis"
                         style={{ fontSize: '0.6rem' }}
-                        carrier_name={shipment.meta.carrier || shipment.carrier_name}
-                      />}
-                      {!shipment.carrier_name && <AppBadge />}
+                        carrier_name={shipment.meta?.carrier || shipment.carrier_name || formatCarrierSlug(metadata.APP_NAME)}
+                      />
                     </td>
                     <td className="service is-vcentered p-1 pl-2 is-size-7 has-text-weight-bold has-text-grey text-ellipsis"
                       onClick={() => previewShipment(shipment.id)}
@@ -138,6 +140,9 @@ export default function ShipmentsPage(pageProps: any) {
                       <br />
                       <span className="has-text-weight-medium">{formatAddressLocationShort(shipment.recipient as AddressType)}</span>
                     </td>
+                    <td className="reference is-vcentered is-size-7 has-text-weight-bold has-text-grey text-ellipsis" onClick={() => previewShipment(shipment.id)}>
+                      <span>{shipment.reference || ''}</span>
+                    </td>
                     <td className="date is-vcentered px-1" onClick={() => previewShipment(shipment.id)}>
                       <p className="is-size-7 has-text-weight-semibold has-text-grey">
                         {formatDateTime(shipment.created_at)}
diff --git a/apps/dashboard/src/pages/api/images/[name].ts b/apps/dashboard/src/pages/api/images/[name].ts
index 9fbaee7a06..113a04474e 100644
--- a/apps/dashboard/src/pages/api/images/[name].ts
+++ b/apps/dashboard/src/pages/api/images/[name].ts
@@ -20,7 +20,7 @@ async function ImageFallback(req: NextApiRequest, res: NextApiResponse) {
       ${path}
 
       <text x="50%" y="55%" alignment-baseline="middle" text-anchor="middle" fill="#ddd" font-weight="bold" font-family="arial"
-        font-size="${isIcon ? '16em' : '0.9em'}" style="text-transform: uppercase; ${isIcon ? 'border-radius: 40px;' : ''}">
+        font-size="${isIcon ? '16em' : '.95em'}" style="text-transform: uppercase; ${isIcon ? 'border-radius: 40px;' : '4px'}">
         ${carrier_name}
       </text>
     </g>
diff --git a/apps/dashboard/src/styles/dashboard.scss b/apps/dashboard/src/styles/dashboard.scss
index 4bf57f8c0c..b9a63e050b 100644
--- a/apps/dashboard/src/styles/dashboard.scss
+++ b/apps/dashboard/src/styles/dashboard.scss
@@ -43,7 +43,7 @@ Karrio custom styling
 .shipments-table {
   .carrier {
     width: 8%;
-    min-width: 50px;
+    min-width: 90px;
   }
 
   .service {
@@ -60,9 +60,15 @@ Karrio custom styling
     max-width: 200px;
   }
 
+  .reference {
+    min-width: 10vw;
+    max-width: 150px;
+  }
+
   .date {
     width: 15%;
     min-width: 120px;
+    max-width: 120px;
   }
 
   .action {
@@ -390,7 +396,7 @@ hr {
   position: fixed;
   top: 0;
   z-index: 40;
-  border-top: 1px solid rgb(196, 76, 52);
+  border-top: 2px solid rgb(196, 76, 52);
   padding: 0;
   text-align: center;
   width: 100%;
diff --git a/packages/ui/components/carrier-badge.tsx b/packages/ui/components/carrier-badge.tsx
index f05f997270..7a827b6de2 100644
--- a/packages/ui/components/carrier-badge.tsx
+++ b/packages/ui/components/carrier-badge.tsx
@@ -11,7 +11,7 @@ interface CarrierBadgeComponent extends React.AllHTMLAttributes<HTMLDivElement>
 export const CarrierBadge: React.FC<CarrierBadgeComponent> = ({ carrier_name, className, ...props }) => {
   return (
     <div className='mt-1'>
-      <Image src={p`/carriers/${carrier_name}_logo.svg`} height="20" width="80" alt="carrier logo" />
+      <Image src={p`/carriers/${carrier_name}_logo.svg`} height="14" width="70" alt="carrier logo" />
     </div>
   );
 };