From 234a7d913a679582ee93c5a7538c8b05cf4d3bd9 Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Thu, 12 Mar 2026 13:09:27 +0100
Subject: [PATCH] feat(06-02): display item_tier badge in tracker table rows

- Add Badge import to BillsTracker, VariableExpenses, DebtTracker
- Render outline Badge after category name showing tier (Fixed/Variable/One-off)
- Use i18n keys template.fixed, template.variable, template.oneOff
- Badge is purely informational with variant="outline" for subtle appearance
---
 frontend/src/components/BillsTracker.tsx     | 8 +++++++-
 frontend/src/components/DebtTracker.tsx      | 8 +++++++-
 frontend/src/components/VariableExpenses.tsx | 8 +++++++-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/BillsTracker.tsx b/frontend/src/components/BillsTracker.tsx
index 0ffa9a0..1944a45 100644
--- a/frontend/src/components/BillsTracker.tsx
+++ b/frontend/src/components/BillsTracker.tsx
@@ -7,6 +7,7 @@ import type { BudgetDetail } from '@/lib/api'
 import { formatCurrency } from '@/lib/format'
 import { headerGradient, amountColorClass, palette } from '@/lib/palette'
 import { InlineEditCell } from '@/components/InlineEditCell'
+import { Badge } from '@/components/ui/badge'
 
 interface Props {
   budget: BudgetDetail
@@ -76,7 +77,12 @@ export function BillsTracker({ budget, onUpdate }: Props) {
                     : undefined
                 }
               >
-                <TableCell>{item.category_name}</TableCell>
+                <TableCell>
+                  {item.category_name}
+                  <Badge variant="outline" className="ml-2 text-xs font-normal">
+                    {t(`template.${item.item_tier === 'one_off' ? 'oneOff' : item.item_tier}`)}
+                  </Badge>
+                </TableCell>
                 <TableCell className="text-right">
                   {formatCurrency(item.budgeted_amount, budget.currency)}
                 </TableCell>
diff --git a/frontend/src/components/DebtTracker.tsx b/frontend/src/components/DebtTracker.tsx
index 64b6e1a..9bfb9e0 100644
--- a/frontend/src/components/DebtTracker.tsx
+++ b/frontend/src/components/DebtTracker.tsx
@@ -7,6 +7,7 @@ import type { BudgetDetail } from '@/lib/api'
 import { formatCurrency } from '@/lib/format'
 import { headerGradient, amountColorClass, palette } from '@/lib/palette'
 import { InlineEditCell } from '@/components/InlineEditCell'
+import { Badge } from '@/components/ui/badge'
 
 interface Props {
   budget: BudgetDetail
@@ -76,7 +77,12 @@ export function DebtTracker({ budget, onUpdate }: Props) {
                     : undefined
                 }
               >
-                <TableCell>{item.category_name}</TableCell>
+                <TableCell>
+                  {item.category_name}
+                  <Badge variant="outline" className="ml-2 text-xs font-normal">
+                    {t(`template.${item.item_tier === 'one_off' ? 'oneOff' : item.item_tier}`)}
+                  </Badge>
+                </TableCell>
                 <TableCell className="text-right">
                   {formatCurrency(item.budgeted_amount, budget.currency)}
                 </TableCell>
diff --git a/frontend/src/components/VariableExpenses.tsx b/frontend/src/components/VariableExpenses.tsx
index db89355..073754c 100644
--- a/frontend/src/components/VariableExpenses.tsx
+++ b/frontend/src/components/VariableExpenses.tsx
@@ -8,6 +8,7 @@ import type { BudgetDetail } from '@/lib/api'
 import { formatCurrency } from '@/lib/format'
 import { headerGradient, amountColorClass, palette } from '@/lib/palette'
 import { InlineEditCell } from '@/components/InlineEditCell'
+import { Badge } from '@/components/ui/badge'
 
 interface Props {
   budget: BudgetDetail
@@ -86,7 +87,12 @@ export function VariableExpenses({ budget, onUpdate }: Props) {
                       : undefined
                   }
                 >
-                  <TableCell>{item.category_name}</TableCell>
+                  <TableCell>
+                    {item.category_name}
+                    <Badge variant="outline" className="ml-2 text-xs font-normal">
+                      {t(`template.${item.item_tier === 'one_off' ? 'oneOff' : item.item_tier}`)}
+                    </Badge>
+                  </TableCell>
                   <TableCell className="text-right">
                     {formatCurrency(item.budgeted_amount, budget.currency)}
                   </TableCell>