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/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>