feat(person-relative): restructure contact relation components

Move select-relations component to fields directory and update imports
Add new table-head component for consistent styling

app/components/app/person-relative/entry-form.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
 import { FieldArray } from 'vee-validate'
+
+// components
+import { Form } from '~/components/pub/ui/form'
 import InputBase from '~/components/pub/my-ui/form/input-base.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
-import SelectContactRelation from './_common/select-relations.vue'
-import { Form } from '~/components/pub/ui/form'
+import { SelectRelations } from './fields'
 
 const props = defineProps<{
   title: string
@@ -77,7 +79,7 @@ defineExpose({
                 >
                   Hubungan dengan Pasien
                 </Label>
-                <SelectContactRelation
+                <SelectRelations
                   :field-name="`contacts[${idx}].relation`"
                   placeholder="Pilih"
                   field-group-class="mb-0"

app/components/app/person-relative/fields/index.ts

@@ -0,0 +1 @@
+export { default as SelectRelations } from './select-relations.vue'

app/components/app/person-relative/fields/select-relations.vue

@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import type { FormErrors } from '~/types/error'
+import { cn } from '~/lib/utils'
+import { relationshipCodes } from '~/lib/constants'
+
 import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import Select from '~/components/pub/my-ui/form/select.vue'
-import { cn } from '~/lib/utils'
-import { relationshipCodes } from '~/lib/constants'
 
 const props = defineProps<{
   fieldName: string
   placeholder?: string
-  errors?: FormErrors
   class?: string
   selectClass?: string
   fieldGroupClass?: string
@@ -17,12 +16,12 @@ const props = defineProps<{
   isDisabled?: boolean
 }>()
 
-const { fieldName = 'phoneNumber', errors, class: containerClass, selectClass, fieldGroupClass } = props
+const { fieldName = 'phoneNumber', class: containerClass, selectClass, fieldGroupClass } = props
 
 const emergencyContactOptions = Object.entries(relationshipCodes).map(([value, label]) => ({
   label,
   value,
-  ...(value === 'other' && { priority: -1 })
+  ...(value === 'other' && { priority: -1 }),
 }))
 </script>
 
@@ -30,7 +29,6 @@ const emergencyContactOptions = Object.entries(relationshipCodes).map(([value, l
   <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
     <Field
       :id="fieldName"
-      :errors="errors"
       :class="cn('select-field-wrapper')"
     >
       <FormField