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

@@ -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>

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>

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>