feat(ui): improve table controls and analytics filters

web/default/src/features/subscriptions/components/dialogs/subscription-purchase-dialog.tsx

@@ -17,6 +17,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
+import { GroupBadge } from '@/components/group-badge'
 import { Separator } from '@/components/ui/separator'
 import {
   paySubscriptionStripe,
@@ -209,11 +210,11 @@ export function SubscriptionPurchaseDialog(props: Props) {
               </span>
             </div>
             {plan.upgrade_group && (
-              <div className='flex justify-between'>
+              <div className='flex items-center justify-between'>
                 <span className='text-muted-foreground text-sm'>
                   {t('Upgrade Group')}
                 </span>
-                <span className='text-sm'>{plan.upgrade_group}</span>
+                <GroupBadge group={plan.upgrade_group} />
               </div>
             )}
             <Separator />

web/default/src/features/subscriptions/components/subscriptions-columns.tsx

@@ -2,6 +2,7 @@ import { useMemo } from 'react'
 import { type ColumnDef } from '@tanstack/react-table'
 import { useTranslation } from 'react-i18next'
 import { DataTableColumnHeader } from '@/components/data-table'
+import { GroupBadge } from '@/components/group-badge'
 import { StatusBadge } from '@/components/status-badge'
 import { formatDuration, formatResetPeriod } from '../lib'
 import type { PlanRecord } from '../types'
@@ -172,11 +173,10 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
         ),
         cell: ({ row }) => {
           const group = row.original.plan.upgrade_group
-          return (
-            <span className='text-muted-foreground'>
-              {group || t('No Upgrade')}
-            </span>
-          )
+          if (!group) {
+            return <span className='text-muted-foreground'>{t('No Upgrade')}</span>
+          }
+          return <GroupBadge group={group} />
         },
         size: 100,
       },