2 files changed, 40 insertions, 14 deletions

diff --git a/packages/console/app/src/routes/workspace/[id]/billing/payment-section.module.css b/packages/console/app/src/routes/workspace/[id]/billing/payment-section.module.css
index 2e1afe78b..3a3b2f7a8 100644
--- a/packages/console/app/src/routes/workspace/[id]/billing/payment-section.module.css
+++ b/packages/console/app/src/routes/workspace/[id]/billing/payment-section.module.css
@@ -45,6 +45,19 @@
           text-decoration: line-through;
         }
       }
+
+      &[data-slot="payment-receipt"] {
+        span {
+          display: inline-block;
+          padding: var(--space-3) var(--space-4);
+          font-size: var(--font-size-sm);
+          line-height: 1.5;
+        }
+
+        button {
+          font-size: var(--font-size-sm);
+        }
+      }
     }
 
     tbody tr {
@@ -54,6 +67,7 @@
     }
 
     @media (max-width: 40rem) {
+
       th,
       td {
         padding: var(--space-2) var(--space-3);
@@ -61,16 +75,22 @@
       }
 
       th {
-        &:nth-child(2) /* Payment ID */ {
+        &:nth-child(2)
+
+        /* Payment ID */
+          {
           display: none;
         }
       }
 
       td {
-        &:nth-child(2) /* Payment ID */ {
+        &:nth-child(2)
+
+        /* Payment ID */
+          {
           display: none;
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/console/app/src/routes/workspace/[id]/billing/payment-section.tsx b/packages/console/app/src/routes/workspace/[id]/billing/payment-section.tsx
index 3712513bf..e51ccc9f5 100644
--- a/packages/console/app/src/routes/workspace/[id]/billing/payment-section.tsx
+++ b/packages/console/app/src/routes/workspace/[id]/billing/payment-section.tsx
@@ -77,6 +77,7 @@ export function PaymentSection() {
               <For each={payments()!}>
                 {(payment) => {
                   const date = new Date(payment.timeCreated)
+                  const isCredit = !payment.paymentID
                   return (
                     <tr>
                       <td data-slot="payment-date" title={formatDateUTC(date)}>
@@ -85,19 +86,24 @@ export function PaymentSection() {
                       <td data-slot="payment-id">{payment.id}</td>
                       <td data-slot="payment-amount" data-refunded={!!payment.timeRefunded}>
                         ${((payment.amount ?? 0) / 100000000).toFixed(2)}
+                        {isCredit ? " (credit)" : ""}
                       </td>
                       <td data-slot="payment-receipt">
-                        <button
-                          onClick={async () => {
-                            const receiptUrl = await downloadReceiptAction(params.id!, payment.paymentID!)
-                            if (receiptUrl) {
-                              window.open(receiptUrl, "_blank")
-                            }
-                          }}
-                          data-slot="receipt-button"
-                        >
-                          View
-                        </button>
+                        {isCredit ? (
+                          <span>-</span>
+                        ) : (
+                          <button
+                            onClick={async () => {
+                              const receiptUrl = await downloadReceiptAction(params.id!, payment.paymentID!)
+                              if (receiptUrl) {
+                                window.open(receiptUrl, "_blank")
+                              }
+                            }}
+                            data-slot="receipt-button"
+                          >
+                            View
+                          </button>
+                        )}
                       </td>
                     </tr>
                   )