refactor(frontend): comprehensive architectural optimization and base component extraction

- Standardized table loading logic with enhanced useTableLoader.
- Unified form submission patterns via new useForm composable.
- Extracted common UI components: SearchInput and StatusBadge.
- Centralized common interface definitions in types/index.ts.
- Achieved TypeScript zero-error status across refactored files.
- Greatly improved code reusability and maintainability.

frontend/src/components/common/SearchInput.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="relative w-full">
+    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+      <svg
+        class="h-5 w-5 text-gray-400"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+        />
+      </svg>
+    </div>
+    <input
+      :value="modelValue"
+      type="text"
+      class="input pl-10"
+      :placeholder="placeholder"
+      @input="handleInput"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDebounceFn } from '@vueuse/core'
+
+const props = withDefaults(defineProps<{
+  modelValue: string
+  placeholder?: string
+  debounceMs?: number
+}>(), {
+  placeholder: 'Search...',
+  debounceMs: 300
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'search', value: string): void
+}>()
+
+const debouncedEmitSearch = useDebounceFn((value: string) => {
+  emit('search', value)
+}, props.debounceMs)
+
+const handleInput = (event: Event) => {
+  const value = (event.target as HTMLInputElement).value
+  emit('update:modelValue', value)
+  debouncedEmitSearch(value)
+}
+</script>

frontend/src/components/common/StatusBadge.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="flex items-center gap-1.5">
+    <span
+      :class="[
+        'inline-block h-2 w-2 rounded-full',
+        variantClass
+      ]"
+    ></span>
+    <span class="text-sm text-gray-700 dark:text-gray-300">
+      {{ label }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  status: string
+  label: string
+}>()
+
+const variantClass = computed(() => {
+  switch (props.status) {
+    case 'active':
+    case 'success':
+      return 'bg-green-500'
+    case 'disabled':
+    case 'inactive':
+    case 'warning':
+      return 'bg-yellow-500'
+    case 'error':
+    case 'danger':
+      return 'bg-red-500'
+    default:
+      return 'bg-gray-400'
+  }
+})
+</script>