refactor(treatment-report): restructure treatment report form and components

- Replace SelectDPJP with SelectDoctor component
- Update schema naming from ActionReport to TreatmentReport
- Add doctor selection functionality to treatment report form
- Improve form layout and field organization
- Update related model imports to use single quotes
- add fragment for better form grouping
- cherry pick form field from another branch

app/components/pub/my-ui/form/select.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { SelectRoot } from 'radix-vue'
-import { watch } from 'vue'
+import { watch, computed } from 'vue'
+import { useFieldError } from 'vee-validate'
 import SelectContent from '~/components/pub/ui/select/SelectContent.vue'
 import SelectGroup from '~/components/pub/ui/select/SelectGroup.vue'
 import SelectItem from '~/components/pub/ui/select/SelectItem.vue'
@@ -29,9 +30,14 @@ const props = defineProps<{
   isDisabled?: boolean
   autoWidth?: boolean
   autoFill?: boolean
+  id?: string
   // otherPlacement sudah tidak digunakan, diganti dengan priority system di Item interface
 }>()
 
+// Get error state from vee-validate if id is provided
+const fieldError = props.id ? useFieldError(() => props.id!) : ref(null)
+const hasError = computed(() => !!fieldError.value)
+
 const emit = defineEmits<{
   'update:modelValue': [value: string]
 }>()
@@ -121,6 +127,7 @@ watch(
             'cursor-not-allowed bg-gray-100 opacity-50': isDisabled,
             'bg-white text-black dark:bg-gray-800 dark:text-white': !isDisabled,
             'w-full': !autoWidth,
+            'border-red-500 focus:ring-red-500': hasError,
           },
           props.class,
         )