first fixes

app/controllers/components_controller.ts

@@ -11,12 +11,12 @@ export default class ComponentsController {
     const components = await Component.query()
       .preload('type')
       .where('userId', user.id)
-    return inertia.render('components/index', { components })
+    return inertia.render('components/index', { components: components.map((c) => c.serialize()) })
   }
 
   async create({ inertia }: HttpContext) {
     const types = await ComponentType.all()
-    return inertia.render('components/create', { types })
+    return inertia.render('components/create', { types: types.map((t) => t.serialize()) })
   }
 
   async store({ request, response, auth }: HttpContext) {
@@ -42,7 +42,7 @@ export default class ComponentsController {
       .where('userId', user.id)
       .andWhere('id', componentId)
       .firstOrFail()
-    return inertia.render('components/show', { component })
+    return inertia.render('components/show', { component: component.serialize() })
   }
 
   async edit({ params, auth, inertia }: HttpContext) {
@@ -54,7 +54,7 @@ export default class ComponentsController {
       .where('userId', user.id)
       .andWhere('id', componentId)
       .firstOrFail()
-    return inertia.render('components/edit', { component, types })
+    return inertia.render('components/edit', { component: component.serialize(), types: types.map((t) => t.serialize()) })
   }
 
   async update({ params, auth, request, response }: HttpContext) {

app/controllers/computers_controller.ts

@@ -19,7 +19,7 @@ export default class ComputersController {
         picturesQuery.where('order', 1)
       })
 
-    return inertia.render('computers/index', { computers })
+    return inertia.render('computers/index', { computers: computers.map((c) => c.serialize()) })
   }
 
   async create({ auth, inertia }: HttpContext) {
@@ -29,7 +29,7 @@ export default class ComputersController {
       .where('userId', user.id)
       .whereNull('computerId')
       .preload('type')
-    return inertia.render('computers/create', { components, states })
+    return inertia.render('computers/create', { components: components.map((c) => c.serialize()), states: states.map((s) => s.serialize()) })
   }
 
   async store({ auth, request, response }: HttpContext) {
@@ -60,7 +60,7 @@ export default class ComputersController {
       .where('user_id', user.id)
       .andWhere('id', computerId)
       .firstOrFail()
-    return inertia.render('computers/show', { computer })
+    return inertia.render('computers/show', { computer: computer.serialize() })
   }
 
   async edit({ params, inertia, auth }: HttpContext) {
@@ -86,7 +86,7 @@ export default class ComputersController {
         'id',
         computer.components.map((c) => c.id)
       )
-    return inertia.render('computers/edit', { computer, availableComponents, states })
+    return inertia.render('computers/edit', { computer: computer.serialize(), availableComponents: availableComponents.map((c) => c.serialize()), states: states.map((s) => s.serialize()) })
   }
 
   async update({ params, request, response }: HttpContext) {

inertia/pages/components/show.vue

@@ -1,46 +1,48 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3'
 
-defineProps<{ component: any }>()
+const props = defineProps<{ component: any }>()
 </script>
 
 <template>
   <div class="max-w-2xl mx-auto p-8 bg-white shadow-lg rounded-lg">
     <h1 class="text-2xl font-semibold mb-8 text-gray-800">Component Details</h1>
 
+    <template v-if="props.component">
       <div class="mb-6">
         <label class="block text-gray-700 text-sm font-bold mb-2">Name</label>
         <div class="px-3 py-2 border rounded text-gray-700">
-        {{ component.name }}
+          {{ props.component.name }}
         </div>
       </div>
 
       <div class="mb-6">
         <label class="block text-gray-700 text-sm font-bold mb-2">Price</label>
-      <div class="px-3 py-2 border rounded text-gray-700">${{ component.price }}</div>
+        <div class="px-3 py-2 border rounded text-gray-700">${{ props.component.price }}</div>
       </div>
 
       <div class="mb-6">
         <label class="block text-gray-700 text-sm font-bold mb-2">Type</label>
         <div class="px-3 py-2 border rounded text-gray-700">
-        {{ component.type?.name ?? 'N/A' }}
+          {{ props.component.type?.name ?? 'N/A' }}
         </div>
       </div>
 
       <div class="mb-6">
         <label class="block text-gray-700 text-sm font-bold mb-2">Purchase Date</label>
         <div class="px-3 py-2 border rounded text-gray-700">
-        {{ component.purchaseDate }}
+          {{ props.component.purchaseDate }}
         </div>
       </div>
 
       <Link
-      :href="`/components/${component.id}/edit`"
+        :href="`/components/${props.component.id}/edit`"
         type="button"
         as="button"
         class="w-full md:w-auto px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition text-center"
       >
         Edit
       </Link>
+    </template>
   </div>
 </template>