Index: resources/js/Pages/GenericModelPage.vue
===================================================================
--- resources/js/Pages/GenericModelPage.vue	(revision 70133e4e1aaf27f2d1370b191bdf97cfb1956665)
+++ resources/js/Pages/GenericModelPage.vue	(revision 86705658e3aba6038c5f5dbb996734bf9e1c7e91)
@@ -82,14 +82,13 @@
 });
 
-// Create foreign key mapping based on your models
 const foreignKeyMap = computed(() => {
-    const fkMap: Record<string, { table: string; nameField: string; }> = {
-        'product_id': { table: 'products', nameField: 'name' },
-        'buyer_id': { table: 'clients', nameField: 'name' },
-        'receiver_id': { table: 'clients', nameField: 'name' },
-        'transport_id': { table: 'transports', nameField: 'name' },
-        'producer_id': { table: 'producers', nameField: 'name' },
-        'order_id': { table: 'orders', nameField: 'id' }, // Orders don't have names, use ID
-        'payment_id': { table: 'payments', nameField: 'id' },
+    const fkMap: Record<string, string> = {
+        'product_id': 'products',  // Foreign key pointing to `products`
+        'buyer_id': 'clients',     // Foreign key pointing to `clients`
+        'receiver_id': 'clients',  // Foreign key pointing to `clients`
+        'transport_id': 'transports', // Foreign key pointing to `transports`
+        'producer_id': 'producers',  // Foreign key pointing to `producers`
+        'order_id': 'orders',      // Foreign key pointing to `orders`
+        'payment_id': 'payments',  // Foreign key pointing to `payments`
     };
     return fkMap;
@@ -266,7 +265,11 @@
     }
     if (typeof value === 'number') {
-        return value.toFixed(2); // format prices nicely, or just `return value;`
-    }
-    // Only treat as a date if it's a string that looks like one
+        return value.toFixed(2);
+    }
+
+    if (typeof value === 'object') {
+        return value.name || value.id || 'N/A';
+    }
+
     if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}/.test(value)) {
         const date = new Date(value);
@@ -282,6 +285,6 @@
     return fields.value.filter(
         (field) =>
-            !['created_at', 'updated_at'].includes(field) &&
-            typeof props.items.data[0][field] !== 'object' // Exclude relationships
+            !['id', 'created_at', 'updated_at'].includes(field) &&
+            typeof props.items.data[0][field] !== 'object'
     );
 });
@@ -290,5 +293,5 @@
 const detailFields = computed(() => {
     return fields.value.filter(
-        (field) => !['id', 'created_at', 'updated_at'].includes(field),
+        (field) => !['id', 'created_at', 'updated_at', 'buyer', 'transport', 'receiver'].includes(field),
     );
 });
@@ -354,5 +357,5 @@
                         <TableRow>
                             <TableHead v-for="field in tableFields" :key="field">
-                                {{ formatLabel(field) }}
+                                {{ formatLabel(field.replace('_id', '')) }}
                             </TableHead>
                             <TableHead>Created</TableHead>
@@ -421,5 +424,5 @@
                                             <div class="grid grid-cols-2 gap-4 text-sm">
                                                 <div v-for="field in detailFields" :key="field">
-                                                    <strong>{{ formatLabel(field) }}:</strong>
+                                                    <strong>{{ formatLabel(field.replace('_id', '')) }}:</strong>
                                                     <!-- Handle foreign keys in detail view -->
                                                     <template v-if="isForeignKey(field) && item[field]">
@@ -509,5 +512,5 @@
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 py-4">
                     <div v-for="field in detailFields" :key="field" class="space-y-2">
-                        <Label :for="field">{{ formatLabel(field) }}</Label>
+                        <Label :for="field">{{ formatLabel(field.replace('_id', '')) }}</Label>
                         <Input :id="field" v-model="createForm[toCamelCase(field)]"/>
                     </div>
@@ -527,5 +530,5 @@
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 py-4">
                     <div v-for="field in detailFields" :key="field" class="space-y-2">
-                        <Label :for="`edit_${field}`">{{ formatLabel(field) }}</Label>
+                        <Label :for="`edit_${field}`">{{ formatLabel(field.replace('_id', '')) }}</Label>
                         <Input :id="`edit_${field}`" v-model="editForm[toCamelCase(field)]"/>
                     </div>
Index: resources/js/lib/utils.ts
===================================================================
--- resources/js/lib/utils.ts	(revision 70133e4e1aaf27f2d1370b191bdf97cfb1956665)
+++ resources/js/lib/utils.ts	(revision 86705658e3aba6038c5f5dbb996734bf9e1c7e91)
@@ -1,7 +1,7 @@
-import {clsx, ClassValue} from 'clsx'
-import {twMerge} from 'tailwind-merge'
+import { ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-    return twMerge(clsx(inputs))
+    return twMerge(clsx(inputs));
 }
 
@@ -11,5 +11,4 @@
 
 export function formatLabel(str: string): string {
-    // Replace underscores with spaces and capitalize the first letter of each word
     const words = str.replace(/_/g, ' ').split(' ');
     const formattedWords = words.map((word) => {