refactor(dashboard): Extract boolean badge component

packages/dashboard/src/components/data-display/boolean.tsx

@@ -1,5 +1,23 @@
 import { CheckIcon, XIcon } from 'lucide-react';
+import React from 'react';
+import { Badge } from '../ui/badge.js';
 
 export function BooleanDisplayCheckbox({ value }: { value: boolean }) {
     return value ? <CheckIcon className="opacity-70" /> : <XIcon className="opacity-70" />;
 }
+
+export function BooleanDisplayBadge({
+    value,
+    labelTrue,
+    labelFalse,
+}: {
+    value: boolean;
+    labelTrue?: string | React.ReactNode;
+    labelFalse?: string | React.ReactNode;
+}) {
+    return (
+        <Badge variant={value ? 'success' : 'destructive'}>
+            {value ? (labelTrue ?? 'Enabled') : (labelFalse ?? 'Disabled')}
+        </Badge>
+    );
+}

packages/dashboard/src/routes/_authenticated/_countries/countries.tsx

@@ -9,6 +9,7 @@ import { PageActionBar } from '@/framework/layout-engine/page-layout.js';
 import { PermissionGuard } from '@/components/shared/permission-guard.js';
 import { PlusIcon } from 'lucide-react';
 import { Button } from '@/components/ui/button.js';
+import { BooleanDisplayBadge } from '@/components/data-display/boolean.js';
 
 export const Route = createFileRoute('/_authenticated/_countries/countries')({
     component: CountryListPage,
@@ -44,9 +45,7 @@ function CountryListPage() {
                 enabled: {
                     header: 'Enabled',
                     cell: ({ row }) => (
-                        <Badge variant={row.original.enabled ? 'success' : 'destructive'}>
-                            {row.original.enabled ? 'Enabled' : 'Disabled'}
-                        </Badge>
+                        <BooleanDisplayBadge value={row.original.enabled} />
                     ),
                 },
             }}

packages/dashboard/src/routes/_authenticated/_payment-methods/payment-methods.tsx

@@ -5,6 +5,7 @@ import { addCustomFields } from '@/framework/document-introspection/add-custom-f
 import { paymentMethodListQuery } from './payment-methods.graphql.js';
 import { DetailPageButton } from '@/components/shared/detail-page-button.js';
 import { Badge } from '@/components/ui/badge.js';
+import { BooleanDisplayBadge } from '@/components/data-display/boolean.js';
 
 export const Route = createFileRoute('/_authenticated/_payment-methods/payment-methods')({
     component: PaymentMethodListPage,
@@ -44,9 +45,7 @@ function PaymentMethodListPage() {
                 enabled: {
                     header: 'Enabled',
                     cell: ({ row }) => (
-                        <Badge variant={row.original.enabled ? 'success' : 'destructive'}>
-                            <Trans>{row.original.enabled ? 'Enabled' : 'Disabled'}</Trans>
-                        </Badge>
+                        <BooleanDisplayBadge value={row.original.enabled} />
                     ),
                 },
             }}

packages/dashboard/src/routes/_authenticated/_tax-rates/tax-rates.tsx

@@ -12,6 +12,7 @@ import { PlusIcon } from 'lucide-react';
 import { Button } from '@/components/ui/button.js';
 import { PermissionGuard } from '@/components/shared/permission-guard.js';
 import { PageActionBar } from '@/framework/layout-engine/page-layout.js';
+import { BooleanDisplayBadge } from '@/components/data-display/boolean.js';
 
 export const Route = createFileRoute('/_authenticated/_tax-rates/tax-rates')({
     component: TaxRateListPage,
@@ -77,9 +78,7 @@ function TaxRateListPage() {
                 enabled: {
                     header: 'Enabled',
                     cell: ({ row }) => (
-                        <Badge variant={row.original.enabled ? 'success' : 'destructive'}>
-                            <Trans>{row.original.enabled ? 'Enabled' : 'Disabled'}</Trans>
-                        </Badge>
+                        <BooleanDisplayBadge value={row.original.enabled} />
                     ),
                 },
                 category: {