first fixes

inertia/pages/components/create.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
 import { Link, useForm } from '@inertiajs/vue3'
+import CustomSelect from '~/pages/widgets/CustomSelect.vue'
 
 const props = defineProps<{ types: any[]; errors?: Record<string, string> }>()
 const errors = computed(() => props.errors || {})
@@ -58,17 +59,11 @@ function submitForm() {
 
       <div>
         <label class="block text-gray-700 text-sm font-bold mb-2" for="type">Type</label>
-        <select
-          name="typeId"
-          v-model.number="form.typeId"
-          id="type"
-          class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring-indigo-500 px-3 py-2 focus:ring-1 border rounded text-gray-700 bg-white"
-        >
-          <option disabled :value="null">Choose a type</option>
-          <option v-for="type in types" :key="type.id" :value="type.id">
-            {{ type.name }}
-          </option>
-        </select>
+        <CustomSelect
+          v-model="form.typeId"
+          :options="types"
+          placeholder="Choose a type"
+        />
       </div>
 
       <div>

inertia/pages/components/edit.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
 import { Link, usePage } from '@inertiajs/vue3'
+import CustomSelect from '~/pages/widgets/CustomSelect.vue'
 
 const { props } = usePage<{
   component: any
@@ -60,16 +61,11 @@ function formatDateForMySQL(date: string) {
 
       <div>
         <label class="block text-gray-700 text-sm font-bold mb-2" for="type">Type</label>
-        <select
+        <CustomSelect
           v-model="form.typeId"
-          id="type"
-          class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring-indigo-500 px-3 py-2 focus:ring-1 border rounded text-gray-700 bg-white"
-        >
-          <option disabled :value="null">Choose a type</option>
-          <option v-for="type in types" :key="type.id" :value="type.id">
-            {{ type.name }}
-          </option>
-        </select>
+          :options="types"
+          placeholder="Choose a type"
+        />
       </div>
 
       <div>