From 008f5bb47df3322fc678d16e80fa62e991bbc8f1 Mon Sep 17 00:00:00 2001
From: Nicolas Gorga <62995075+NicolasGorga@users.noreply.github.com>
Date: Fri, 5 Dec 2025 06:20:45 -0300
Subject: [PATCH] feat(dashboard): Improve fully refunded order details
 (#14077)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

**What** — What changes are introduced in this PR?

Improve fully refunded order details in the order list of Admin UI.

**Why** — Why are these changes relevant or necessary?

Fully refunded orders did not show a value for the `total` column and its `payment_status` color badge expressed a happy path.

**How** — How have these changes been implemented?

Added the refund amount with line through style for fully refunded orders in the `total` column of order list table and changed the `payment_status` badge color to red

**Testing** — How have these changes been tested, or how can the reviewer test the feature?

Validated UI looks as expected

---

## Examples

Provide examples or code snippets that demonstrate how this feature works, or how it can be used in practice.
This helps with documentation and ensures maintainers can quickly understand and verify the change.

```ts
// Example usage
```

---

## Checklist

Please ensure the following before requesting a review:

- [x] I have added a **changeset** for this PR
    - Every non-breaking change should be marked as a **patch**
    - To add a changeset, run `yarn changeset` and follow the prompts
- [ ] The changes are covered by relevant **tests**
- [x] I have verified the code works as intended locally
- [x] I have linked the related issue(s) if applicable

---

## Additional Context

Add any additional context, related issues, or references that might help the reviewer understand this PR.


---

> [!NOTE]
> Show refunded amounts with muted strikethrough in the total column for fully refunded orders and set the refunded payment badge to red, fetching `payment_collections` as needed.
>
> - **Admin Dashboard — Order List**:
>   - **Total column**: For `payment_status === "refunded"`, display the sum of `payment_collections.refunded_amount` with `text-ui-fg-muted` and `line-through` via `TotalCell` `className`.
>   - **Payment status**: Change `refunded` badge color to red.
>   - **Component**: `TotalCell` now accepts optional `className`.
> - **Data**:
>   - Add `*payment_collections` to `DEFAULT_RELATIONS` for orders.
> - **Changeset**:
>   - Patch release for `@medusajs/dashboard`.
>
> <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 802d24330bceaeba74e11d85886593809876cd8d. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>
---
 .changeset/mighty-jokes-rest.md               |  5 +++++
 .../order/total-cell/total-cell.tsx           |  5 +++--
 .../table/columns/use-order-table-columns.tsx | 20 ++++++++++++++++---
 .../admin/dashboard/src/lib/order-helpers.ts  |  2 +-
 .../src/routes/orders/order-list/const.ts     |  2 +-
 5 files changed, 27 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/mighty-jokes-rest.md

diff --git a/.changeset/mighty-jokes-rest.md b/.changeset/mighty-jokes-rest.md
new file mode 100644
index 0000000000..10ccbb1d83
--- /dev/null
+++ b/.changeset/mighty-jokes-rest.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/dashboard": patch
+---
+
+feat(dashboard): Improve fully refunded order details
diff --git a/packages/admin/dashboard/src/components/table/table-cells/order/total-cell/total-cell.tsx b/packages/admin/dashboard/src/components/table/table-cells/order/total-cell/total-cell.tsx
index f9543ad99d..5db4aa0d3a 100644
--- a/packages/admin/dashboard/src/components/table/table-cells/order/total-cell/total-cell.tsx
+++ b/packages/admin/dashboard/src/components/table/table-cells/order/total-cell/total-cell.tsx
@@ -5,15 +5,16 @@ import { PlaceholderCell } from "../../common/placeholder-cell"
 type TotalCellProps = {
   currencyCode: string
   total: number | null
+  className?: string
 }
 
-export const TotalCell = ({ currencyCode, total }: TotalCellProps) => {
+export const TotalCell = ({ currencyCode, total, className }: TotalCellProps) => {
   if (!total) {
     return <PlaceholderCell />
   }
 
   return (
-    <MoneyAmountCell currencyCode={currencyCode} amount={total} align="right" />
+    <MoneyAmountCell currencyCode={currencyCode} amount={total} className={className} align="right" />
   )
 }
 
diff --git a/packages/admin/dashboard/src/hooks/table/columns/use-order-table-columns.tsx b/packages/admin/dashboard/src/hooks/table/columns/use-order-table-columns.tsx
index f26abbc35b..99cd88bce0 100644
--- a/packages/admin/dashboard/src/hooks/table/columns/use-order-table-columns.tsx
+++ b/packages/admin/dashboard/src/hooks/table/columns/use-order-table-columns.tsx
@@ -98,10 +98,24 @@ export const useOrderTableColumns = (props: UseOrderTableColumnsProps) => {
       columnHelper.accessor("total", {
         header: () => <TotalHeader />,
         cell: ({ getValue, row }) => {
-          const total = getValue()
-          const currencyCode = row.original.currency_code
+            const isFullyRefunded = row.original.payment_status === "refunded"
+            const total = !isFullyRefunded
+              ? getValue()
+              : row.original.payment_collections.reduce(
+                  (acc, payCol) => acc + (payCol.refunded_amount ?? 0),
+                  0
+                )
+            const currencyCode = row.original.currency_code
 
-          return <TotalCell currencyCode={currencyCode} total={total} />
+            return (
+              <TotalCell
+                currencyCode={currencyCode}
+                total={total}
+                className={
+                  isFullyRefunded ? "text-ui-fg-muted line-through" : ""
+                }
+              />
+            )
         },
       }),
       columnHelper.display({
diff --git a/packages/admin/dashboard/src/lib/order-helpers.ts b/packages/admin/dashboard/src/lib/order-helpers.ts
index 5fee3f1729..4102ba3740 100644
--- a/packages/admin/dashboard/src/lib/order-helpers.ts
+++ b/packages/admin/dashboard/src/lib/order-helpers.ts
@@ -24,7 +24,7 @@ export const getOrderPaymentStatus = (
     ],
     awaiting: [t("orders.payment.status.awaiting"), "orange"],
     captured: [t("orders.payment.status.captured"), "green"],
-    refunded: [t("orders.payment.status.refunded"), "green"],
+    refunded: [t("orders.payment.status.refunded"), "red"],
     partially_refunded: [
       t("orders.payment.status.partiallyRefunded"),
       "orange",
diff --git a/packages/admin/dashboard/src/routes/orders/order-list/const.ts b/packages/admin/dashboard/src/routes/orders/order-list/const.ts
index d1dc5896b1..e3bce4dd14 100644
--- a/packages/admin/dashboard/src/routes/orders/order-list/const.ts
+++ b/packages/admin/dashboard/src/routes/orders/order-list/const.ts
@@ -11,7 +11,7 @@ export const DEFAULT_PROPERTIES = [
   "currency_code",
 ]
 
-export const DEFAULT_RELATIONS = ["*customer", "*sales_channel"]
+export const DEFAULT_RELATIONS = ["*customer", "*sales_channel", "*payment_collections"]
 
 export const DEFAULT_FIELDS = `${DEFAULT_PROPERTIES.join(
   ","