Add support panel UI, search filters, and money thousand separators.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/MoneyInput.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { fromGroupedInput, toGroupedDisplay } from '@/utils/money'
+
+const props = withDefaults(
+  defineProps<{
+    value: number | null | undefined
+    size?: 'large' | 'middle' | 'small'
+    placeholder?: string
+    allowNegative?: boolean
+    disabled?: boolean
+  }>(),
+  {
+    size: 'large',
+    placeholder: '',
+    allowNegative: false,
+    disabled: false,
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'update:value', value: number): void
+}>()
+
+const display = computed(() => toGroupedDisplay(props.value ?? 0))
+
+function onInput(raw: string | number) {
+  emit('update:value', fromGroupedInput(String(raw ?? ''), props.allowNegative))
+}
+</script>
+
+<template>
+  <a-input
+    class="money-input"
+    dir="ltr"
+    :size="size"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :value="display"
+    @update:value="onInput"
+  />
+</template>
+
+<style scoped>
+.money-input {
+  width: 100%;
+}
+
+.money-input :deep(input) {
+  font-variant-numeric: tabular-nums;
+  text-align: left;
+  direction: ltr;
+}
+</style>