From 03b8bda1ba31fa835ea6e8bba07160d4495039ef Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Fri, 14 Feb 2025 16:19:31 +0100
Subject: [PATCH] fix(dashboard): Fix size of buttons and use Link to navigate
 (#11366)

**What**
- Fixes the wrong `size` being used for the allocate items button.
- Updates the buttons that link to somewhere to use a Link and asChild instead of an onClick.
---
 .changeset/thick-deers-guess.md               |  5 ++
 .../order-summary-section.tsx                 | 49 ++++++++-----------
 2 files changed, 26 insertions(+), 28 deletions(-)
 create mode 100644 .changeset/thick-deers-guess.md

diff --git a/.changeset/thick-deers-guess.md b/.changeset/thick-deers-guess.md
new file mode 100644
index 0000000000..9d8e99ab9b
--- /dev/null
+++ b/.changeset/thick-deers-guess.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/dashboard": patch
+---
+
+fix(dashboard): Fix size of buttons and use Link to navigate
diff --git a/packages/admin/dashboard/src/routes/orders/order-detail/components/order-summary-section/order-summary-section.tsx b/packages/admin/dashboard/src/routes/orders/order-detail/components/order-summary-section/order-summary-section.tsx
index 2d412c8b51..8ad3896440 100644
--- a/packages/admin/dashboard/src/routes/orders/order-detail/components/order-summary-section/order-summary-section.tsx
+++ b/packages/admin/dashboard/src/routes/orders/order-detail/components/order-summary-section/order-summary-section.tsx
@@ -1,6 +1,6 @@
 import { ReactNode, useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
-import { useNavigate } from "react-router-dom"
+import { Link, useNavigate } from "react-router-dom"
 
 import {
   ArrowDownRightMini,
@@ -18,9 +18,9 @@ import {
   AdminOrder,
   AdminOrderLineItem,
   AdminOrderPreview,
+  AdminPaymentCollection,
   AdminRegion,
   AdminReturn,
-  AdminPaymentCollection,
 } from "@medusajs/types"
 import {
   Badge,
@@ -188,16 +188,12 @@ export const OrderSummarySection = ({ order }: OrderSummarySectionProps) => {
         <div className="bg-ui-bg-subtle flex items-center justify-end gap-x-2 rounded-b-xl px-4 py-4">
           {showReturns &&
             (receivableReturns.length === 1 ? (
-              <Button
-                onClick={() =>
-                  navigate(
-                    `/orders/${order.id}/returns/${receivableReturns[0].id}/receive`
-                  )
-                }
-                variant="secondary"
-                size="small"
-              >
-                {t("orders.returns.receive.action")}
+              <Button asChild variant="secondary" size="small">
+                <Link
+                  to={`/orders/${order.id}/returns/${receivableReturns[0].id}/receive`}
+                >
+                  {t("orders.returns.receive.action")}
+                </Link>
               </Button>
             ) : (
               <ActionMenu
@@ -236,11 +232,10 @@ export const OrderSummarySection = ({ order }: OrderSummarySectionProps) => {
             ))}
 
           {showAllocateButton && (
-            <Button
-              onClick={() => navigate(`./allocate-items`)}
-              variant="secondary"
-            >
-              {t("orders.allocateItems.action")}
+            <Button asChild variant="secondary" size="small">
+              <Link to="allocate-items">
+                {t("orders.allocateItems.action")}
+              </Link>
             </Button>
           )}
 
@@ -262,17 +257,15 @@ export const OrderSummarySection = ({ order }: OrderSummarySectionProps) => {
           )}
 
           {showRefund && (
-            <Button
-              size="small"
-              variant="secondary"
-              onClick={() => navigate(`/orders/${order.id}/refund`)}
-            >
-              {t("orders.payment.refundAmount", {
-                amount: getStylizedAmount(
-                  pendingDifference * -1,
-                  order?.currency_code
-                ),
-              })}
+            <Button size="small" variant="secondary" asChild>
+              <Link to={`/orders/${order.id}/refund`}>
+                {t("orders.payment.refundAmount", {
+                  amount: getStylizedAmount(
+                    pendingDifference * -1,
+                    order?.currency_code
+                  ),
+                })}
+              </Link>
             </Button>
           )}
         </div>