wip: add form data pelaksanaan operasi

todo: blood input section

* ui: patch focus ring state
* layouts-pages: fix width layout calculation

feat(treatment-report): add fill-notes component and validation messages
- Add new FillNotes component for tissue notes input with dynamic fields
- Update schema validation with required error messages for operation and specimen fields
- Adjust form layout to include new FillNotes component and improve field organization

cherry-pick arrangement procedure from feat/protokol-terapi-116

app/components/pub/my-ui/form/input-base.vue

@@ -76,10 +76,11 @@ const hasError = computed(() => !!fieldError.value)
                 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'
-                )"
+                :class="
+                  cn(
+                    hasError && 'border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500',
+                  )
+                "
                 autocomplete="off"
                 aria-autocomplete="none"
                 autocorrect="off"

app/components/pub/my-ui/form/text-area-input.vue

@@ -19,8 +19,11 @@ const props = defineProps<{
   maxLength?: number
   isRequired?: boolean
   isDisabled?: boolean
+  resize?: 'none' | 'y' | 'x'
+  rows?: number
 }>()
 
+const { resize = 'none' } = props
 function handleInput(event: Event) {
   const target = event.target as HTMLInputElement
   let value = target.value
@@ -47,7 +50,7 @@ function handleInput(event: Event) {
 <template>
   <DE.Cell :col-span="colSpan || 1">
     <DE.Label
-      class="mb-1"
+      :class="class"
       v-if="label !== ''"
       :label-for="fieldName"
       :is-required="isRequired && !isDisabled"
@@ -65,11 +68,19 @@ function handleInput(event: Event) {
         <FormItem>
           <FormControl>
             <Textarea
+              :rows="rows"
               :disabled="isDisabled"
               v-bind="componentField"
               :placeholder="placeholder"
               :maxlength="maxLength"
-              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
+              :class="
+                cn(
+                  'focus:border-primary focus:ring-primary focus:ring-offset-0',
+                  resize === 'y' && 'resize-y',
+                  resize === 'x' && 'resize-x',
+                  resize === 'none' && 'resize-none',
+                )
+              "
               autocomplete="off"
               aria-autocomplete="none"
               autocorrect="off"
@@ -83,4 +94,4 @@ function handleInput(event: Event) {
       </FormField>
     </DE.Field>
   </DE.Cell>
-</template>
+</template>