feat: Enhance Status Column with Colors for Better Readability

packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte

@@ -15,13 +15,15 @@
   import { CurrencyTypes } from "@requestnetwork/types";
   import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection";
   // Components
+  import StatusLabel from "@requestnetwork/shared-components/status-label.svelte";
   import Accordion from "@requestnetwork/shared-components/accordion.svelte";
   import Button from "@requestnetwork/shared-components/button.svelte";
   import Tooltip from "@requestnetwork/shared-components/tooltip.svelte";
   // Icons
   import Check from "@requestnetwork/shared-icons/check.svelte";
   import Download from "@requestnetwork/shared-icons/download.svelte";
   // Utils
+  import { checkStatus } from "@requestnetwork/shared-utils/checkStatus";
   import { formatDate } from "@requestnetwork/shared-utils/formatDate";
   import { calculateItemTotal } from "@requestnetwork/shared-utils/invoiceTotals";
   import { exportToPDF } from "@requestnetwork/shared-utils/generateInvoice";
@@ -367,9 +369,7 @@
   </div>
   <h2 class="invoice-number">
     Invoice #{request?.contentData?.invoiceNumber || "-"}
-    <p class={`invoice-status ${isPaid ? "bg-green" : "bg-zinc"}`}>
-      {isPaid ? "Paid" : "Created"}
-    </p>
+    <StatusLabel status={checkStatus(request)} />
     <Tooltip text="Download PDF">
       <Download
         onClick={async () => {
@@ -646,21 +646,6 @@
     height: 13px;
   }
 
-  .invoice-status {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 1;
-    text-align: center;
-    border-radius: 8px;
-    color: #ffffff;
-    width: fit-content;
-    margin: 0;
-  }
-
   .invoice-address {
     display: flex;
     flex-direction: column;

packages/invoice-dashboard/src/lib/view-requests.svelte

@@ -9,6 +9,7 @@
   import Dropdown from "@requestnetwork/shared-components/dropdown.svelte";
   import Input from "@requestnetwork/shared-components/input.svelte";
   import PoweredBy from "@requestnetwork/shared-components/powered-by.svelte";
+  import StatusLabel from "@requestnetwork/shared-components/status-label.svelte";
   import Skeleton from "@requestnetwork/shared-components/skeleton.svelte";
   import Toaster from "@requestnetwork/shared-components/sonner.svelte";
   import Tooltip from "@requestnetwork/shared-components/tooltip.svelte";
@@ -34,11 +35,12 @@
   import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
   import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";
   import { exportToPDF } from "@requestnetwork/shared-utils/generateInvoice";
+  import { checkStatus } from "@requestnetwork/shared-utils/checkStatus";
   import { getCurrencyFromManager } from "@requestnetwork/shared-utils/getCurrency";
   import { CurrencyManager } from "@requestnetwork/currency";
   import { onDestroy, onMount, tick } from "svelte";
   import { formatUnits } from "viem";
-  import { capitalize, debounce, formatAddress } from "../utils";
+  import { debounce, formatAddress } from "../utils";
   import { Drawer, InvoiceView } from "./dashboard";
   import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection";
   import { CurrencyTypes } from "@requestnetwork/types";
@@ -381,17 +383,6 @@
   const handleRemoveSelectedRequest = () => {
     activeRequest = undefined;
   };
-
-  const checkStatus = (request: any) => {
-    switch (request?.balance?.balance > 0) {
-      case true:
-        return request?.balance?.balance >= request?.expectedAmount
-          ? "Paid"
-          : "Partially Paid";
-      default:
-        return capitalize(request?.state);
-    }
-  };
 </script>
 
 <div
@@ -653,7 +644,7 @@
                       type={signer === request.payer?.value ? "OUT" : "IN"}
                     />
                   </td>
-                  <td> {checkStatus(request)}</td>
+                  <td><StatusLabel status={checkStatus(request)} /></td>
                   <td
                     ><Tooltip text="Download PDF">
                       <Download

shared/components/status-label.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import { capitalize } from "../utils/capitalize";
+
+  export let status: string;
+
+  let statusClass = "";
+
+  $: {
+    switch (status.toLowerCase()) {
+      case "paid":
+        statusClass = "status-paid";
+        break;
+      case "partially paid":
+        statusClass = "status-partially-paid";
+        break;
+      case "accepted":
+        statusClass = "status-accepted";
+        break;
+      case "awaiting payment":
+        statusClass = "status-created";
+        break;
+      case "canceled":
+        statusClass = "status-canceled";
+        break;
+      case "rejected":
+        statusClass = "status-rejected";
+        break;
+      case "overdue":
+        statusClass = "status-overdue";
+        break;
+      case "pending":
+        statusClass = "status-pending";
+        break;
+      default:
+        statusClass = "status-created";
+    }
+  }
+</script>
+
+<div class={`status-indicator ${statusClass}`}>
+  {capitalize(status)}
+</div>
+
+<style>
+  .status-indicator {
+    text-align: center;
+    padding: 6px 12px;
+    text-align: center;
+    width: fit-content;
+    border-radius: 8px;
+    font-weight: 500;
+  }
+
+  .status-paid {
+    color: #328965;
+    background-color: rgba(88, 225, 165, 0.15);
+  }
+
+  .status-partially-paid {
+    color: #328965;
+    background: linear-gradient(
+      135deg,
+      rgba(88, 225, 165, 0.2) 25%,
+      white 25%,
+      white 50%,
+      rgba(88, 225, 165, 0.2) 50%,
+      rgba(88, 225, 165, 0.2) 75%,
+      white 75%,
+      white 100%
+    );
+    background-size: 20px 20px;
+  }
+
+  .status-accepted {
+    color: #006ebe;
+    background-color: rgba(90, 186, 255, 0.15);
+  }
+
+  .status-created {
+    color: #c99101;
+    background-color: rgba(255, 197, 49, 0.15);
+  }
+
+  .status-canceled {
+    color: #212121;
+    background-color: rgba(37, 37, 37, 0.15);
+  }
+
+  .status-rejected {
+    color: #d9601c;
+    background-color: rgba(255, 135, 67, 0.15);
+  }
+
+  .status-overdue {
+    color: #d91c1c;
+    background-color: rgba(255, 49, 49, 0.15);
+  }
+
+  .status-pending {
+    color: #7b7b7b;
+    background-color: rgba(224, 224, 224, 0.15);
+  }
+</style>

shared/utils/capitalize.ts

@@ -0,0 +1,2 @@
+export const capitalize = (str: string) =>
+  (str && str[0].toUpperCase() + str.slice(1)) || "";

shared/utils/checkStatus.ts

@@ -0,0 +1,37 @@
+import { capitalize } from "./capitalize";
+import { Types } from "@requestnetwork/request-client.js";
+
+export const checkStatus = (request: Types.IRequestDataWithEvents | null) => {
+  const balance = BigInt(request?.balance?.balance ?? 0);
+  const expectedAmount = BigInt(request?.expectedAmount ?? 0);
+  const today = new Date();
+  const dueDate = new Date(request?.contentData?.paymentTerms?.dueDate);
+  const isPaid = balance >= expectedAmount ? "Paid" : "Partially Paid";
+
+  const eventStatus = {
+    reject: "Rejected",
+    cancel: "Canceled",
+  };
+
+  for (const [event, status] of Object.entries(eventStatus)) {
+    if (
+      request?.events?.some(
+        (e: { name?: string }) => e?.name?.toLowerCase() === event.toLowerCase()
+      )
+    ) {
+      return capitalize(status);
+    }
+  }
+
+  if (dueDate < today) {
+    if (balance === BigInt(0)) {
+      return "Overdue";
+    }
+    return isPaid;
+  } else {
+    if (balance === BigInt(0)) {
+      return "Awaiting Payment";
+    }
+    return isPaid;
+  }
+};