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/input-base.vue

@@ -1,17 +1,16 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
 import { Input } from '~/components/pub/ui/input'
 import { cn } from '~/lib/utils'
+import { computed } from 'vue'
+import { useFieldError } from 'vee-validate'
 
 import * as DE from '~/components/pub/my-ui/doc-entry'
 
 const props = defineProps<{
   fieldName: string
   placeholder: string
-  label: string
+  label?: string
   errors?: FormErrors
   class?: string
   colSpan?: number
@@ -21,6 +20,8 @@ const props = defineProps<{
   isDisabled?: boolean
   rightLabel?: string
   bottomLabel?: string
+  suffixMsg?: string
+  iconName?: string
 }>()
 
 function handleInput(event: Event) {
@@ -44,12 +45,16 @@ function handleInput(event: Event) {
     target.dispatchEvent(new Event('input', { bubbles: true }))
   }
 }
+
+// Get error state from vee-validate
+const fieldError = useFieldError(() => props.fieldName)
+const hasError = computed(() => !!fieldError.value)
 </script>
 
 <template>
   <DE.Cell :col-span="colSpan || 1">
     <DE.Label
-      v-if="label !== ''"
+      v-if="label"
       :label-for="fieldName"
       :is-required="isRequired && !isDisabled"
     >
@@ -63,27 +68,53 @@ function handleInput(event: Event) {
         v-slot="{ componentField }"
         :name="fieldName"
       >
-        <FormItem :class="cn(`relative`,)">
-          <FormControl>
-            <Input
-              :disabled="isDisabled"
-              v-bind="componentField"
-              :placeholder="placeholder"
-              :maxlength="maxLength"
-              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0', props.class)"
-              autocomplete="off"
-              aria-autocomplete="none"
-              autocorrect="off"
-              autocapitalize="off"
-              spellcheck="false"
-              @input="handleInput"
-            />
-            <p v-show="rightLabel" class="text-gray-400 absolute top-0 right-3">{{ rightLabel }}</p>
+        <FormItem>
+          <FormControl class="relative">
+            <div class="relative w-full max-w-sm items-center">
+              <Input
+                :disabled="isDisabled"
+                v-bind="componentField"
+                :placeholder="placeholder"
+                :maxlength="maxLength"
+                :class="cn(
+                  'focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0',
+                  hasError && 'border-red-500 focus:border-red-500 focus:ring-red-500'
+                )"
+                autocomplete="off"
+                aria-autocomplete="none"
+                autocorrect="off"
+                autocapitalize="off"
+                spellcheck="false"
+                @input="handleInput"
+              />
+              <span
+                v-if="suffixMsg"
+                class="absolute inset-y-0 end-0 flex items-center justify-center px-2 text-muted-foreground"
+              >
+                {{ suffixMsg }}
+              </span>
+              <Icon
+                v-if="iconName"
+                :name="iconName"
+                class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400"
+              />
+              <p
+                v-show="rightLabel"
+                class="absolute right-3 top-0 text-gray-400"
+              >
+                {{ rightLabel }}
+              </p>
+            </div>
           </FormControl>
           <FormMessage />
         </FormItem>
       </FormField>
     </DE.Field>
-    <p v-show="bottomLabel" class="text-gray-400 mt-1">{{ bottomLabel }}</p>    
+    <p
+      v-show="bottomLabel"
+      class="text-gray-400"
+    >
+      {{ bottomLabel }}
+    </p>
   </DE.Cell>
 </template>