From f29664316e6692fb292e054ba832eb1b909f0e0e Mon Sep 17 00:00:00 2001
From: Ruud Andriessen <ruud.andriessen@uipath.com>
Date: Fri, 16 Oct 2026 13:42:18 +0200
Subject: [PATCH] fix(apollo-vertex): use tabular, right-aligned figures in
 numeric columns

TableChart already right-aligns columns whose align is "right" (the
adapter derives this from numeric, currency, percentage, duration and
datetime field types). Those cells now also use tabular-nums so digits
line up across rows.

Table is a generic shadcn primitive with no numeric or align API, so it
is left unchanged. The docs example and the dashboard templates now set
text-right tabular-nums on their amount columns, and right-align the
matching headers.
---
 apps/apollo-vertex/content/docs/components/table.mdx        | 4 ++--
 apps/apollo-vertex/templates/dashboard/DashboardCards.tsx   | 6 ++++--
 apps/apollo-vertex/templates/shell/InvoiceDashboard.tsx     | 6 ++++--
 apps/apollo-vertex/templates/shell/LoanQcDashboard.tsx      | 6 ++++--
 .../apollo-vertex/registry/table-chart/table-chart-view.tsx | 6 +++++-
 5 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/apps/apollo-vertex/content/docs/components/table.mdx b/apps/apollo-vertex/content/docs/components/table.mdx
index 7b718ae180..22d0c6af28 100644
--- a/apps/apollo-vertex/content/docs/components/table.mdx
+++ b/apps/apollo-vertex/content/docs/components/table.mdx
@@ -30,14 +30,14 @@ export const invoices = [
           <TableCell className="font-medium">{invoice.invoice}</TableCell>
           <TableCell>{invoice.status}</TableCell>
           <TableCell>{invoice.method}</TableCell>
-          <TableCell className="text-right">{invoice.amount}</TableCell>
+          <TableCell className="text-right tabular-nums">{invoice.amount}</TableCell>
         </TableRow>
       ))}
     </TableBody>
     <TableFooter>
       <TableRow>
         <TableCell colSpan={3}>Total</TableCell>
-        <TableCell className="text-right">$1,750.00</TableCell>
+        <TableCell className="text-right tabular-nums">$1,750.00</TableCell>
       </TableRow>
     </TableFooter>
   </Table>
diff --git a/apps/apollo-vertex/templates/dashboard/DashboardCards.tsx b/apps/apollo-vertex/templates/dashboard/DashboardCards.tsx
index 7627ea72a7..373dadacd8 100644
--- a/apps/apollo-vertex/templates/dashboard/DashboardCards.tsx
+++ b/apps/apollo-vertex/templates/dashboard/DashboardCards.tsx
@@ -164,7 +164,7 @@ export function InvoiceTable() {
             <TableRow>
               <TableHead>{t("invoice")}</TableHead>
               <TableHead>{t("vendor")}</TableHead>
-              <TableHead>{t("amount")}</TableHead>
+              <TableHead className="text-right">{t("amount")}</TableHead>
               <TableHead>{t("status")}</TableHead>
               <TableHead>{t("date")}</TableHead>
             </TableRow>
@@ -176,7 +176,9 @@ export function InvoiceTable() {
                 <TableRow key={inv.id}>
                   <TableCell className="font-medium">{inv.id}</TableCell>
                   <TableCell>{inv.vendor}</TableCell>
-                  <TableCell>{inv.amount}</TableCell>
+                  <TableCell className="text-right tabular-nums">
+                    {inv.amount}
+                  </TableCell>
                   <TableCell>
                     <Badge
                       variant={statusVariant[inv.status]}
diff --git a/apps/apollo-vertex/templates/shell/InvoiceDashboard.tsx b/apps/apollo-vertex/templates/shell/InvoiceDashboard.tsx
index 57cc63f23b..a4f2cf5d4c 100644
--- a/apps/apollo-vertex/templates/shell/InvoiceDashboard.tsx
+++ b/apps/apollo-vertex/templates/shell/InvoiceDashboard.tsx
@@ -157,7 +157,7 @@ export function InvoiceDashboard() {
                 <TableRow>
                   <TableHead>Invoice</TableHead>
                   <TableHead>Vendor</TableHead>
-                  <TableHead>Amount</TableHead>
+                  <TableHead className="text-right">Amount</TableHead>
                   <TableHead>Status</TableHead>
                   <TableHead>Date</TableHead>
                 </TableRow>
@@ -176,7 +176,9 @@ export function InvoiceDashboard() {
                   >
                     <TableCell className="font-medium">{inv.id}</TableCell>
                     <TableCell>{inv.vendor}</TableCell>
-                    <TableCell>{inv.amount}</TableCell>
+                    <TableCell className="text-right tabular-nums">
+                      {inv.amount}
+                    </TableCell>
                     <TableCell>
                       <Badge variant={statusVariant[inv.status]}>
                         {inv.status}
diff --git a/apps/apollo-vertex/templates/shell/LoanQcDashboard.tsx b/apps/apollo-vertex/templates/shell/LoanQcDashboard.tsx
index aacfff11eb..45513dc3b5 100644
--- a/apps/apollo-vertex/templates/shell/LoanQcDashboard.tsx
+++ b/apps/apollo-vertex/templates/shell/LoanQcDashboard.tsx
@@ -183,7 +183,7 @@ export function LoanQcDashboard() {
               <TableRow>
                 <TableHead>Loan ID</TableHead>
                 <TableHead>Borrower</TableHead>
-                <TableHead>Amount</TableHead>
+                <TableHead className="text-right">Amount</TableHead>
                 <TableHead>Type</TableHead>
                 <TableHead>Status</TableHead>
                 <TableHead>Date</TableHead>
@@ -196,7 +196,9 @@ export function LoanQcDashboard() {
                   <TableRow key={loan.id}>
                     <TableCell className="font-medium">{loan.id}</TableCell>
                     <TableCell>{loan.borrower}</TableCell>
-                    <TableCell>{loan.amount}</TableCell>
+                    <TableCell className="text-right tabular-nums">
+                      {loan.amount}
+                    </TableCell>
                     <TableCell className="text-muted-foreground">
                       {loan.type}
                     </TableCell>
diff --git a/packages/apollo-vertex/registry/table-chart/table-chart-view.tsx b/packages/apollo-vertex/registry/table-chart/table-chart-view.tsx
index 7f7b712abd..362e96e554 100644
--- a/packages/apollo-vertex/registry/table-chart/table-chart-view.tsx
+++ b/packages/apollo-vertex/registry/table-chart/table-chart-view.tsx
@@ -89,7 +89,11 @@ export function TableChart({
           const value = getValue<PrimitiveValue>();
           return (
             <div
-              className={column.align === "right" ? "text-right" : "text-left"}
+              className={
+                column.align === "right"
+                  ? "text-right tabular-nums"
+                  : "text-left"
+              }
             >
               {column.format(value)}
             </div>