Index: app/Http/Controllers/GenericModelController.php
===================================================================
--- app/Http/Controllers/GenericModelController.php	(revision 86705658e3aba6038c5f5dbb996734bf9e1c7e91)
+++ app/Http/Controllers/GenericModelController.php	(revision 40fe572921df8fd06cbf6bd3ecc6cb1353c67ecf)
@@ -10,7 +10,4 @@
 class GenericModelController extends Controller
 {
-    /**
-     * Display a listing of the resource.
-     */
     public function index(Request $request, string $model)
     {
@@ -19,10 +16,9 @@
             abort(404, 'Model not found.');
         }
-
         $query = $modelClass::query();
         $modelInstance = new $modelClass();
         $fillable = $modelInstance->getFillable();
 
-        // Eager load related models for foreign keys
+        // Eager load relationships for displaying data
         $relationships = $this->getRelationships($modelInstance);
         if (!empty($relationships)) {
@@ -30,5 +26,4 @@
         }
 
-        // Add search functionality
         if ($request->has('search') && $request->search) {
             $query->where(function ($q) use ($request, $fillable) {
@@ -39,14 +34,14 @@
         }
 
-        // Add sorting
         $sortBy = $request->get('sort_by', 'created_at');
         $sortDirection = $request->get('sort_direction', 'desc');
         $query->orderBy($sortBy, $sortDirection);
 
-        // Paginate results
         $items = $query->paginate(
             perPage: $request->get('per_page', 10),
             page: $request->get('page', 1)
         )->withQueryString();
+
+        $relatedOptions = $this->getRelatedOptions($modelInstance);
 
         return Inertia::render('GenericModelPage', [
@@ -58,7 +53,8 @@
                 'sort_direction' => $sortDirection,
                 'per_page' => $request->get('per_page', 10),
-                'open_id' => $request->get('open_id') // Pass the open_id to the frontend
+                'open_id' => $request->get('open_id')
             ],
-            'fkMap' => $this->getForeignKeyMap($modelInstance)
+            'fkMap' => $this->getForeignKeyMap($modelInstance),
+            'relatedOptions' => $relatedOptions,
         ]);
     }
@@ -185,3 +181,35 @@
         return $fkMap;
     }
+
+    protected function getRelatedOptions($modelInstance): array
+    {
+        $options = [];
+        $fillable = $modelInstance->getFillable();
+
+        foreach ($fillable as $field) {
+            if (Str::endsWith($field, '_id')) {
+                $relationName = Str::beforeLast($field, '_id');
+                if (method_exists($modelInstance, $relationName)) {
+                    try {
+                        $relation = $modelInstance->$relationName();
+                        if ($relation instanceof BelongsTo) {
+                            $relatedModel = $relation->getRelated();
+                            $relatedItems = $relatedModel->all();
+
+                            $options[$field] = $relatedItems->map(function ($item) {
+                                return [
+                                    'id' => $item->id,
+                                    'name' => $item->name ?? ("#{$item->id}"),
+                                ];
+                            })->values();
+                        }
+                    } catch (\Exception $e) {
+                        continue;
+                    }
+                }
+            }
+        }
+
+        return $options;
+    }
 }
Index: resources/js/Pages/GenericModelPage.vue
===================================================================
--- resources/js/Pages/GenericModelPage.vue	(revision 86705658e3aba6038c5f5dbb996734bf9e1c7e91)
+++ resources/js/Pages/GenericModelPage.vue	(revision 40fe572921df8fd06cbf6bd3ecc6cb1353c67ecf)
@@ -56,7 +56,13 @@
         sort_direction: string;
         per_page: number;
-        open_id?: string; // NEW
+        open_id?: string;
     };
-    fkMap: Record<string, string>; // NEW: fk field -> referenced table (plural)
+    fkMap: Record<string, string>;
+    relatedOptions: Record<string, RelatedOption[]>;
+}
+
+interface RelatedOption {
+    id: number;
+    name: string;
 }
 
@@ -208,11 +214,4 @@
 };
 
-// Open edit dialog
-const openEditDialog = (item: any) => {
-    currentEditItem.value = item;
-    Object.assign(editForm, item);
-    editDialogOpen.value = true;
-};
-
 // Submit create form
 const submitCreate = () => {
@@ -296,4 +295,65 @@
     );
 });
+
+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 formatDateForInput = (val: any) => {
+  if (!val) return '';
+  const d = new Date(val);
+  if (isNaN(d.getTime())) return '';
+  return d.toISOString().slice(0, 10);
+};
+
+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] = '';
+    }
+  });
+};
+
+resetCreateForm();
+
+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;
+};
 </script>
 
@@ -506,4 +566,547 @@
 
         <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>
+
+            <!-- Dynamic input types for create form -->
+            <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>
+
+            <!-- Dynamic input types for edit form -->
+            <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>
+<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>
@@ -513,5 +1116,48 @@
                     <div v-for="field in detailFields" :key="field" class="space-y-2">
                         <Label :for="field">{{ formatLabel(field.replace('_id', '')) }}</Label>
-                        <Input :id="field" v-model="createForm[toCamelCase(field)]"/>
+
+                        <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>
@@ -523,4 +1169,5 @@
         </Dialog>
 
+        <!-- Edit Dialog -->
         <Dialog v-model:open="editDialogOpen">
             <DialogContent class="sm:max-w-3xl">
@@ -531,5 +1178,48 @@
                     <div v-for="field in detailFields" :key="field" class="space-y-2">
                         <Label :for="`edit_${field}`">{{ formatLabel(field.replace('_id', '')) }}</Label>
-                        <Input :id="`edit_${field}`" v-model="editForm[toCamelCase(field)]"/>
+
+                        <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>