add variant fileter

src/components/table/ProfitRow.vue

@@ -4,6 +4,14 @@
     :class="result.missingPrices ? 'opacity-60' : ''"
     @click="expanded = !expanded"
   >
+    <!-- Variant badge -->
+    <td class="px-4 py-3">
+      <span
+        class="inline-flex items-center justify-center px-2 h-6 rounded text-xs font-semibold whitespace-nowrap"
+        :class="variantClass"
+      >{{ variantLabel }}</span>
+    </td>
+
     <!-- Item name -->
     <td class="px-4 py-3">
       <div class="flex items-center gap-2">
@@ -83,7 +91,7 @@
 
   <!-- Expanded detail row -->
   <tr v-if="expanded" class="border-b border-gray-700/50 bg-gray-900/60">
-    <td colspan="5" class="px-6 py-4">
+    <td colspan="6" class="px-6 py-4">
       <div class="flex gap-8">
 
         <!-- Ingredients breakdown -->
@@ -194,6 +202,23 @@ const { isManualPrice, getManualEntry, setManualPrice, clearManualPrice } = useA
 const { filters } = useFilters()
 const { upsert, remove, getQty, inOrder } = useProductionOrder()
 
+const VARIANT_INFO: Record<string, { label: string; cls: string }> = {
+  avalon:   { label: 'Avalon',    cls: 'bg-violet-600/30 text-violet-300 border border-violet-600/40' },
+  crystal:  { label: 'Crystal',   cls: 'bg-cyan-600/30 text-cyan-300 border border-cyan-600/40' },
+  artifact: { label: 'Artifact',  cls: 'bg-amber-600/30 text-amber-300 border border-amber-600/40' },
+  basic:    { label: 'Basic',     cls: 'bg-gray-700/50 text-gray-400 border border-gray-600/40' },
+}
+
+const variantInfo = computed(() => {
+  const id = props.result.recipe.outputItemId.replace(/@\d$/, '')
+  if (id.endsWith('_AVALON')) return VARIANT_INFO.avalon
+  if (id.endsWith('_CRYSTAL')) return VARIANT_INFO.crystal
+  if (/_(?:UNDEAD|HELL|MORGANA|KEEPER|ROYAL|FEY)$/.test(id)) return VARIANT_INFO.artifact
+  return VARIANT_INFO.basic
+})
+const variantLabel = computed(() => variantInfo.value.label)
+const variantClass = computed(() => variantInfo.value.cls)
+
 const expanded   = ref(false)
 const editingItemId = ref<string | null>(null)
 const inputValue = ref('')

src/components/table/TableHeader.vue

@@ -24,9 +24,9 @@
 import type { SortField, SortState } from '../../types/crafting'
 
 const columns: { field: SortField | 'status' | 'bill'; label: string; sortable: boolean }[] = [
+  { field: 'variantType', label: 'Variant', sortable: true },
   { field: 'displayName', label: 'Item', sortable: true },
   { field: 'tier', label: 'Tier', sortable: true },
-  { field: 'variantType', label: 'Variant', sortable: true },
   { field: 'materialCost', label: 'Craft Cost', sortable: true },
   { field: 'status', label: 'Price Age', sortable: false },
   { field: 'bill', label: '', sortable: false },