done: form entry laporan tindakan

todo: manage state readonly ke komponen app prosedur

pager-nav: scroll x on small screen

form-schema: catatan opsional

feat(treatment-report): add datetime validation and duration calculation
- Change operator team fields from IDs to names in schema and form
- Modify blood input schema to use type-based amount selection
- Update form fields to match new schema structure
- Simplify radio bloods component logic and styling
- Add validation for ISO datetime format in treatment report schema
- Implement duration calculation for operation and anesthesia times
- Update input fields to use datetime-local type
- Add disabled state for radio bloods component

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

@@ -7,6 +7,8 @@ import { useFieldError } from 'vee-validate'
 
 import * as DE from '~/components/pub/my-ui/doc-entry'
 
+type InputType = 'text' | 'number' | 'password' | 'email' | 'date' | 'time' | 'datetime-local' | 'search' | 'tel'
+
 const props = defineProps<{
   fieldName: string
   placeholder: string
@@ -22,6 +24,7 @@ const props = defineProps<{
   bottomLabel?: string
   suffixMsg?: string
   iconName?: string
+  inputType?: InputType
 }>()
 
 const { class: containerClass } = props
@@ -85,6 +88,7 @@ const hasError = computed(() => !!fieldError.value)
                 autocapitalize="off"
                 spellcheck="false"
                 @input="handleInput"
+                :type="inputType"
               />
               <span
                 v-if="suffixMsg"

app/components/pub/my-ui/pagination/pagination.vue

@@ -93,7 +93,7 @@ function getButtonClass(pageNumber: number) {
 </script>
 
 <template>
-  <div class="flex w-full min-w-0 items-center justify-between px-2 py-2">
+  <div class="flex w-full min-w-0 items-center justify-between overflow-x-scroll px-2 py-2 md:overflow-hidden">
     <!-- Info text -->
     <div
       v-if="showInfo && endRecord > 0"

app/components/pub/ui/form/array-message.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ErrorMessage } from 'vee-validate'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  name: string
+  class?: string
+}>()
+</script>
+
+<template>
+  <ErrorMessage
+    :name="props.name"
+    v-slot="{ message }"
+  >
+    <p :class="cn('font-sans text-[0.8rem] text-destructive', props.class)">
+      {{ message }}
+    </p>
+  </ErrorMessage>
+</template>

app/components/pub/ui/form/index.ts

@@ -1,3 +1,4 @@
+export { default as ArrayMessage } from './array-message.vue'
 export { default as FormControl } from './FormControl.vue'
 export { default as FormDescription } from './FormDescription.vue'
 export { default as FormItem } from './FormItem.vue'