Index: app/Http/Controllers/GenericModelController.php
===================================================================
--- app/Http/Controllers/GenericModelController.php	(revision 40fe572921df8fd06cbf6bd3ecc6cb1353c67ecf)
+++ app/Http/Controllers/GenericModelController.php	(revision 047232ed8179bfed3c1ae2ed01c3fa82ef3f523e)
@@ -7,5 +7,4 @@
 use Illuminate\Support\Str;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
-
 class GenericModelController extends Controller
 {
Index: resources/js/Pages/GenericModelPage.vue
===================================================================
--- resources/js/Pages/GenericModelPage.vue	(revision 40fe572921df8fd06cbf6bd3ecc6cb1353c67ecf)
+++ resources/js/Pages/GenericModelPage.vue	(revision 047232ed8179bfed3c1ae2ed01c3fa82ef3f523e)
@@ -128,11 +128,11 @@
 // Helper to navigate to related model
 const navigateToRelatedModel = (field: string, value: any) => {
-    const fkInfo = foreignKeyMap.value[field];
-    if (!fkInfo) return;
+    const fkTable = foreignKeyMap.value[field];
+    if (!fkTable) return;
 
     const targetId = typeof value === 'object' ? value.id : value;
     if (!targetId) return;
 
-    router.get(`/${fkInfo.table}`, {
+    router.get(`/${fkTable}`, {
         open_id: targetId
     });
@@ -214,16 +214,25 @@
 };
 
+// Utility to convert camelCase back to snake_case
+const toSnakeCase = (str: string) =>
+    str.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`);
+
+const transformKeysToSnakeCase = (form: Record<string, any>) => {
+    const result: Record<string, any> = {};
+    for (const key in form) {
+        result[toSnakeCase(key)] = form[key];
+    }
+    return result;
+};
+
 // Submit create form
 const submitCreate = () => {
     router.post(
         `/${props.model.toLowerCase()}s`,
-        createForm,
+        transformKeysToSnakeCase(createForm),
         {
             onSuccess: () => {
                 createDialogOpen.value = false;
-                // Reset form
-                Object.keys(createForm).forEach((key) => {
-                    createForm[key] = '';
-                });
+                resetCreateForm();
             },
         },
@@ -237,5 +246,5 @@
     router.put(
         `/${props.model.toLowerCase()}s/${currentEditItem.value.id}`,
-        editForm,
+        transformKeysToSnakeCase(editForm),
         {
             onSuccess: () => {
@@ -246,4 +255,5 @@
     );
 };
+
 
 // Delete item
@@ -295,4 +305,15 @@
     );
 });
+
+const descriptionFields = ["description", "status", "insurance_conditions", "notes"];
+
+// returns the first description field if available
+const getDialogDescription = (fields: string[]): string | null => {
+    const found = fields.find(f => descriptionFields.includes(f));
+    if (!found) return null;
+
+    // humanize
+    return `Please provide a value for "${found.replace(/_/g, " ")}".`;
+};
 
 const getFieldType = (field: string): 'boolean' | 'date' | 'number' | 'foreignKey' | 'string' => {
@@ -699,535 +720,2 @@
     </App>
 </template>
-<script setup lang="ts">
-import {ref, watch, reactive, computed} from 'vue';
-import {router} from '@inertiajs/vue3';
-import {ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, ExternalLink} from 'lucide-vue-next';
-import {debounce} from 'lodash-es';
-import App from '@/Layout/App.vue';
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from '@/components/ui/table';
-import {Input} from '@/components/ui/input';
-import {Button} from '@/components/ui/button';
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/components/ui/select';
-import {
-    Dialog,
-    DialogContent,
-    DialogHeader,
-    DialogTitle,
-    DialogFooter,
-} from '@/components/ui/dialog';
-import {Label} from '@/components/ui/label';
-import {toCamelCase, formatLabel} from '@/lib/utils';
-
-interface PaginatedData {
-    data: any[];
-    current_page: number;
-    last_page: number;
-    per_page: number;
-    total: number;
-    from: number;
-    to: number;
-    links: Array<{
-        url: string | null;
-        label: string;
-        active: boolean;
-    }>;
-}
-interface RelatedOption {
-    id: number;
-    name: string;
-}
-interface Props {
-    model: string;
-    items: PaginatedData;
-    filters: {
-        search?: string;
-        sort_by: string;
-        sort_direction: string;
-        per_page: number;
-        open_id?: string;
-    };
-    fkMap: Record<string, string>;
-    relatedOptions: Record<string, RelatedOption[]>;
-}
-const props = defineProps<Props>();
-
-// Dialog states
-const createDialogOpen = ref(false);
-const editDialogOpen = ref(false);
-const currentEditItem = ref<any | null>(null);
-
-// Form models
-const createForm = reactive<Record<string, any>>({});
-const editForm = reactive<Record<string, any>>({});
-
-// Reactive search
-const search = ref(props.filters.search || '');
-const perPage = ref(props.filters.per_page);
-
-// Dynamic Fields
-const fields = computed(() => {
-    if (!props.items.data.length) return [];
-    return Object.keys(props.items.data[0]);
-});
-
-const foreignKeyMap = computed(() => {
-    const fkMap: Record<string, string> = {
-        'product_id': 'products',
-        'buyer_id': 'clients',
-        'receiver_id': 'clients',
-        'transport_id': 'transports',
-        'producer_id': 'producers',
-        'order_id': 'orders',
-        'payment_id': 'payments',
-    };
-    return fkMap;
-});
-
-const isForeignKey = (field: string): boolean => {
-    return field.endsWith('_id') && foreignKeyMap.value[field] !== undefined;
-};
-
-const getFieldType = (field: string): 'boolean' | 'date' | 'number' | 'foreignKey' | 'string' => {
-  if (isForeignKey(field)) {
-    return 'foreignKey';
-  }
-  if (props.items.data.length === 0) return 'string';
-  const value = props.items.data[0][field];
-  if (typeof value === 'boolean') {
-    return 'boolean';
-  }
-  if (typeof value === 'number') {
-    return 'number';
-  }
-  if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}/.test(value)) {
-    return 'date';
-  }
-  return 'string';
-};
-
-const detailFields = computed(() => {
-    return fields.value.filter(
-        (field) => !['id', 'created_at', 'updated_at', 'buyer', 'transport', 'receiver'].includes(field),
-    );
-});
-
-const formatDateForInput = (val: any) => {
-  if (!val) return '';
-  const d = new Date(val);
-  if (isNaN(d.getTime())) return '';
-  return d.toISOString().slice(0, 10);
-};
-
-// Initialize or reset create form
-const resetCreateForm = () => {
-  Object.keys(createForm).forEach(key => delete createForm[key]);
-  detailFields.value.forEach(field => {
-    const camel = toCamelCase(field);
-    if (getFieldType(field) === 'boolean') {
-      createForm[camel] = false;
-    } else if (getFieldType(field) === 'date') {
-      createForm[camel] = '';
-    } else {
-      createForm[camel] = '';
-    }
-  });
-};
-
-// Open create dialog and reset form
-const openCreateDialog = () => {
-    resetCreateForm();
-    createDialogOpen.value = true;
-};
-
-// Open edit dialog and load data in editForm
-const openEditDialog = (item: any) => {
-  currentEditItem.value = item;
-  Object.keys(editForm).forEach(key => delete editForm[key]);
-  for (const field of detailFields.value) {
-    const camel = toCamelCase(field);
-    if (getFieldType(field) === 'date') {
-      editForm[camel] = formatDateForInput(item[field]);
-    } else if (getFieldType(field) === 'boolean') {
-      editForm[camel] = Boolean(item[field]);
-    } else {
-      editForm[camel] = item[field];
-    }
-  }
-  editDialogOpen.value = true;
-};
-
-// Submit create form
-const submitCreate = () => {
-    router.post(
-        `/${props.model.toLowerCase()}s`,
-        createForm,
-        {
-            onSuccess: () => {
-                createDialogOpen.value = false;
-                resetCreateForm();
-            },
-        },
-    );
-};
-
-// Submit edit form
-const submitEdit = () => {
-    if (!currentEditItem.value) return;
-    router.put(
-        `/${props.model.toLowerCase()}s/${currentEditItem.value.id}`,
-        editForm,
-        {
-            onSuccess: () => {
-                editDialogOpen.value = false;
-                currentEditItem.value = null;
-            },
-        },
-    );
-};
-
-// Delete item
-const deleteItem = (item: any) => {
-    if (confirm(`Are you sure you want to delete this ${props.model}?`)) {
-        router.delete(`/${props.model.toLowerCase()}s/${item.id}`, {
-            preserveScroll: true,
-        });
-    }
-};
-</script>
-
-<style scoped>
-.table-auto-layout {
-    table-layout: auto;
-}
-.fk-link {
-    color: #2563eb;
-    text-decoration: underline;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25rem;
-    transition: all 0.2s ease;
-}
-.fk-link:hover {
-    color: #1d4ed8;
-    background-color: #eff6ff;
-    padding: 0.125rem 0.25rem;
-    border-radius: 0.25rem;
-}
-</style>
-
-<template>
-    <App>
-        <template #title>{{ model }}s</template>
-        <div class="w-full space-y-4">
-            <div class="flex items-center justify-between">
-                <div class="flex items-center space-x-2">
-                    <Input
-                        v-model="search"
-                        class="max-w-sm"
-                        :placeholder="`Search ${model.toLowerCase()}s...`"
-                    />
-                    <Select v-model="perPage">
-                        <SelectTrigger class="w-[120px]">
-                            <SelectValue/>
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectItem value="10">10 per page</SelectItem>
-                            <SelectItem value="25">25 per page</SelectItem>
-                            <SelectItem value="50">50 per page</SelectItem>
-                            <SelectItem value="100">100 per page</SelectItem>
-                        </SelectContent>
-                    </Select>
-                    <!-- Open create dialog using function -->
-                    <Button @click="openCreateDialog">Create {{ model }}</Button>
-                </div>
-                <div class="text-sm text-muted-foreground">
-                    Showing {{ items.from }} to {{ items.to }} of {{ items.total }} results
-                </div>
-            </div>
-            <div class="rounded-md border">
-                <Table>
-                    <TableHeader>
-                        <TableRow>
-                            <TableHead v-for="field in tableFields" :key="field">
-                                {{ formatLabel(field.replace('_id', '')) }}
-                            </TableHead>
-                            <TableHead>Created</TableHead>
-                            <TableHead>Actions</TableHead>
-                        </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                        <template v-if="items.data.length">
-                            <template v-for="item in items.data" :key="item.id">
-                                <TableRow
-                                    class="cursor-pointer hover:bg-muted/50"
-                                    @click="toggleRowExpansion(item.id)"
-                                >
-                                    <TableCell
-                                        v-for="field in tableFields"
-                                        :key="field"
-                                        class="font-medium max-w-[200px] truncate whitespace-nowrap overflow-hidden"
-                                    >
-                                        <template v-if="isForeignKey(field) && item[field]">
-                                            <span
-                                                class="fk-link"
-                                                @click.stop="navigateToRelatedModel(field, item[field])"
-                                            >
-                                                {{ getRelatedModelName(item, field) }}
-                                                <ExternalLink class="h-3 w-3" />
-                                            </span>
-                                        </template>
-                                        <template v-else>
-                                            {{ formatValue(item[field], field) }}
-                                        </template>
-                                    </TableCell>
-                                    <TableCell>
-                                        {{ new Date(item.created_at).toLocaleDateString() }}
-                                    </TableCell>
-                                    <TableCell class="flex space-x-2">
-                                        <Button
-                                            variant="outline"
-                                            size="sm"
-                                            @click.stop="toggleRowExpansion(item.id)"
-                                        >
-                                            {{ expandedRows.has(item.id) ? 'Hide' : 'Show' }}
-                                        </Button>
-                                        <Button
-                                            variant="outline"
-                                            size="sm"
-                                            @click.stop="openEditDialog(item)"
-                                        >
-                                            Edit
-                                        </Button>
-                                        <Button
-                                            variant="destructive"
-                                            size="sm"
-                                            @click.stop="deleteItem(item)"
-                                        >
-                                            Delete
-                                        </Button>
-                                    </TableCell>
-                                </TableRow>
-                                <TableRow v-if="expandedRows.has(item.id)" class="bg-muted/20">
-                                    <TableCell :colspan="tableFields.length + 2" class="p-4">
-                                        <div class="space-y-3">
-                                            <h4 class="font-semibold">{{ model }} Details</h4>
-                                            <div class="grid grid-cols-2 gap-4 text-sm">
-                                                <div v-for="field in detailFields" :key="field">
-                                                    <strong>{{ formatLabel(field.replace('_id', '')) }}:</strong>
-                                                    <template v-if="isForeignKey(field) && item[field]">
-                                                        <span
-                                                            class="fk-link ml-2"
-                                                            @click.stop="navigateToRelatedModel(field, item[field])"
-                                                        >
-                                                            {{ getRelatedModelName(item, field) }}
-                                                            <ExternalLink class="h-3 w-3" />
-                                                        </span>
-                                                    </template>
-                                                    <template v-else>
-                                                        {{ formatValue(item[field], field) }}
-                                                    </template>
-                                                </div>
-                                            </div>
-                                            <div class="text-xs text-muted-foreground mt-2">
-                                                Created:
-                                                {{ new Date(item.created_at).toLocaleString() }} |
-                                                Updated:
-                                                {{ new Date(item.updated_at).toLocaleString() }}
-                                            </div>
-                                        </div>
-                                    </TableCell>
-                                </TableRow>
-                            </template>
-                        </template>
-                        <TableRow v-else>
-                            <TableCell :colspan="tableFields.length + 2" class="h-24 text-center">
-                                No {{ model.toLowerCase() }}s found.
-                            </TableCell>
-                        </TableRow>
-                    </TableBody>
-                </Table>
-            </div>
-            <div class="flex items-center justify-between">
-                <div class="text-sm text-muted-foreground">
-                    Page {{ items.current_page }} of {{ items.last_page }}
-                </div>
-                <div class="flex items-center space-x-2">
-                    <Button
-                        variant="outline"
-                        size="sm"
-                        :disabled="!canGoPrevious()"
-                        @click="goToFirstPage"
-                    >
-                        <ChevronsLeft class="h-4 w-4"/>
-                        <span class="sr-only">Go to first page</span>
-                    </Button>
-                    <Button
-                        variant="outline"
-                        size="sm"
-                        :disabled="!canGoPrevious()"
-                        @click="goToPreviousPage"
-                    >
-                        <ChevronLeft class="h-4 w-4"/>
-                        Previous
-                    </Button>
-                    <Button
-                        variant="outline"
-                        size="sm"
-                        :disabled="!canGoNext()"
-                        @click="goToNextPage"
-                    >
-                        Next
-                        <ChevronRight class="h-4 w-4"/>
-                    </Button>
-                    <Button
-                        variant="outline"
-                        size="sm"
-                        :disabled="!canGoNext()"
-                        @click="goToLastPage"
-                    >
-                        <ChevronsRight class="h-4 w-4"/>
-                        <span class="sr-only">Go to last page</span>
-                    </Button>
-                </div>
-            </div>
-        </div>
-
-        <!-- Create Dialog -->
-        <Dialog v-model:open="createDialogOpen">
-            <DialogContent class="sm:max-w-3xl">
-                <DialogHeader>
-                    <DialogTitle>Create New {{ model }}</DialogTitle>
-                </DialogHeader>
-                <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.replace('_id', '')) }}</Label>
-
-                        <div v-if="getFieldType(field) === 'foreignKey'">
-                          <Select v-model="createForm[toCamelCase(field)]" :aria-label="formatLabel(field)">
-                            <SelectTrigger>
-                              <SelectValue placeholder="Select..." />
-                            </SelectTrigger>
-                            <SelectContent>
-                              <SelectItem
-                                v-for="option in props.relatedOptions[field] || []"
-                                :key="option.id"
-                                :value="option.id"
-                              >
-                                {{ option.name }}
-                              </SelectItem>
-                            </SelectContent>
-                          </Select>
-                        </div>
-                        <div v-else-if="getFieldType(field) === 'boolean'">
-                          <input
-                            type="checkbox"
-                            :id="field"
-                            v-model="createForm[toCamelCase(field)]"
-                            class="checkbox"
-                          />
-                        </div>
-                        <div v-else-if="getFieldType(field) === 'date'">
-                          <input
-                            type="date"
-                            :id="field"
-                            v-model="createForm[toCamelCase(field)]"
-                            class="input"
-                          />
-                        </div>
-                        <div v-else-if="getFieldType(field) === 'number'">
-                          <input
-                            type="number"
-                            :id="field"
-                            v-model.number="createForm[toCamelCase(field)]"
-                            class="input"
-                          />
-                        </div>
-                        <div v-else>
-                          <Input :id="field" v-model="createForm[toCamelCase(field)]" />
-                        </div>
-                    </div>
-                </div>
-                <DialogFooter>
-                    <Button variant="outline" @click="createDialogOpen = false">Cancel</Button>
-                    <Button type="submit" @click="submitCreate">Create {{ model }}</Button>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-
-        <!-- Edit Dialog -->
-        <Dialog v-model:open="editDialogOpen">
-            <DialogContent class="sm:max-w-3xl">
-                <DialogHeader>
-                    <DialogTitle>Edit {{ model }}</DialogTitle>
-                </DialogHeader>
-                <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.replace('_id', '')) }}</Label>
-
-                        <div v-if="getFieldType(field) === 'foreignKey'">
-                          <Select v-model="editForm[toCamelCase(field)]" :aria-label="formatLabel(field)">
-                            <SelectTrigger>
-                              <SelectValue placeholder="Select..." />
-                            </SelectTrigger>
-                            <SelectContent>
-                              <SelectItem
-                                v-for="option in props.relatedOptions[field] || []"
-                                :key="option.id"
-                                :value="option.id"
-                              >
-                                {{ option.name }}
-                              </SelectItem>
-                            </SelectContent>
-                          </Select>
-                        </div>
-                        <div v-else-if="getFieldType(field) === 'boolean'">
-                          <input
-                            type="checkbox"
-                            :id="`edit_${field}`"
-                            v-model="editForm[toCamelCase(field)]"
-                            class="checkbox"
-                          />
-                        </div>
-                        <div v-else-if="getFieldType(field) === 'date'">
-                          <input
-                            type="date"
-                            :id="`edit_${field}`"
-                            v-model="editForm[toCamelCase(field)]"
-                            class="input"
-                          />
-                        </div>
-                        <div v-else-if="getFieldType(field) === 'number'">
-                          <input
-                            type="number"
-                            :id="`edit_${field}`"
-                            v-model.number="editForm[toCamelCase(field)]"
-                            class="input"
-                          />
-                        </div>
-                        <div v-else>
-                          <Input :id="`edit_${field}`" v-model="editForm[toCamelCase(field)]" />
-                        </div>
-                    </div>
-                </div>
-                <DialogFooter>
-                    <Button variant="outline" @click="editDialogOpen = false">Cancel</Button>
-                    <Button type="submit" @click="submitEdit">Save Changes</Button>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    </App>
-</template>