Index: app/Http/Controllers/GenericModelController.php
===================================================================
--- app/Http/Controllers/GenericModelController.php	(revision 752245b09588c6cfdca47775fd64b100543df43d)
+++ app/Http/Controllers/GenericModelController.php	(revision 70133e4e1aaf27f2d1370b191bdf97cfb1956665)
@@ -6,4 +6,5 @@
 use Inertia\Inertia;
 use Illuminate\Support\Str;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
 
 class GenericModelController extends Controller
@@ -22,4 +23,10 @@
         $modelInstance = new $modelClass();
         $fillable = $modelInstance->getFillable();
+
+        // Eager load related models for foreign keys
+        $relationships = $this->getRelationships($modelInstance);
+        if (!empty($relationships)) {
+            $query->with($relationships);
+        }
 
         // Add search functionality
@@ -50,6 +57,8 @@
                 'sort_by' => $sortBy,
                 'sort_direction' => $sortDirection,
-                'per_page' => $request->get('per_page', 10)
-            ]
+                'per_page' => $request->get('per_page', 10),
+                'open_id' => $request->get('open_id') // Pass the open_id to the frontend
+            ],
+            'fkMap' => $this->getForeignKeyMap($modelInstance)
         ]);
     }
@@ -125,3 +134,54 @@
         return null;
     }
+
+    /**
+     * Get relationships for eager loading based on foreign keys
+     */
+    protected function getRelationships($modelInstance): array
+    {
+        $relationships = [];
+        $fillable = $modelInstance->getFillable();
+
+        foreach ($fillable as $field) {
+            if (Str::endsWith($field, '_id')) {
+                $relationName = Str::beforeLast($field, '_id');
+
+                // Check if the relationship method exists
+                if (method_exists($modelInstance, $relationName)) {
+                    try {
+                        $relation = $modelInstance->$relationName();
+                        if ($relation instanceof BelongsTo) {
+                            $relationships[] = $relationName;
+                        }
+                    } catch (\Exception $e) {
+                        // Skip if relationship doesn't exist or has issues
+                        continue;
+                    }
+                }
+            }
+        }
+
+        return $relationships;
+    }
+
+    /**
+     * Generate foreign key mapping for the frontend
+     */
+    protected function getForeignKeyMap($modelInstance): array
+    {
+        $fkMap = [];
+        $fillable = $modelInstance->getFillable();
+
+        foreach ($fillable as $field) {
+            if (Str::endsWith($field, '_id')) {
+                $relationName = Str::beforeLast($field, '_id');
+
+                // Map to plural table name (following Laravel conventions)
+                $tableName = Str::plural($relationName);
+                $fkMap[$field] = $tableName;
+            }
+        }
+
+        return $fkMap;
+    }
 }
Index: app/Models/Batch.php
===================================================================
--- app/Models/Batch.php	(revision 752245b09588c6cfdca47775fd64b100543df43d)
+++ app/Models/Batch.php	(revision 70133e4e1aaf27f2d1370b191bdf97cfb1956665)
@@ -27,4 +27,17 @@
     ];
 
+    public static function getValidationRules($id = null): array
+    {
+        return [
+            'product_id' => 'required|string|exists:products,id',
+            'batch_code' => 'required|string|max:255|unique:batches,batch_code,' . $id,
+            'production_date' => 'required|date|before_or_equal:today',
+            'expiration_date' => 'required|date|after:production_date',
+            'net_weight' => 'required|numeric|min:0|max:999999.99',
+            'gross_weight' => 'required|numeric|min:0|max:999999.99|gte:net_weight',
+            'units_per_batch' => 'required|integer|min:1|max:1000000',
+        ];
+    }
+
     public function product(): BelongsTo
     {
Index: app/Models/Client.php
===================================================================
--- app/Models/Client.php	(revision 752245b09588c6cfdca47775fd64b100543df43d)
+++ app/Models/Client.php	(revision 70133e4e1aaf27f2d1370b191bdf97cfb1956665)
@@ -17,5 +17,5 @@
 
     protected $fillable = [
-        'client_name',
+        'name',
         'country',
         'registration_number',
@@ -30,12 +30,12 @@
     {
         return [
-            'client_name' => 'required|string|max:255',
+            'name' => 'required|string|max:255|unique:clients,name,' . $id,
             'country' => 'required|string|max:255',
-            'registration_number' => 'nullable|string|max:255',
-            'tax_code' => 'nullable|string|max:255',
+            'registration_number' => 'nullable|string|max:255|unique:clients,registration_number,' . $id,
+            'tax_code' => 'nullable|string|max:255|unique:clients,tax_code,' . $id,
             'contact_person' => 'nullable|string|max:255',
-            'phone_number' => 'nullable|string|max:255',
-            'billing_address' => 'nullable|string',
-            'shipping_address' => 'nullable|string',
+            'phone_number' => 'nullable|string|max:255|regex:/^[\+]?[0-9\s\-\(\)]+$/',
+            'billing_address' => 'nullable|string|max:1000',
+            'shipping_address' => 'nullable|string|max:1000',
         ];
     }
Index: app/Models/Invoice.php
===================================================================
--- app/Models/Invoice.php	(revision 752245b09588c6cfdca47775fd64b100543df43d)
+++ app/Models/Invoice.php	(revision 70133e4e1aaf27f2d1370b191bdf97cfb1956665)
@@ -25,4 +25,14 @@
     ];
 
+    public static function getValidationRules($id = null): array
+    {
+        return [
+            'invoice_date' => 'required|date|before_or_equal:today',
+            'status' => 'required|string|in:draft,sent,paid,overdue,cancelled',
+            'total_amount' => 'required|numeric|min:0|max:9999999.99',
+            'order_id' => 'required|string|exists:orders,id|unique:invoices,order_id,' . $id,
+        ];
+    }
+
     public function order(): BelongsTo
     {
Index: app/Models/Order.php
===================================================================
--- app/Models/Order.php	(revision 752245b09588c6cfdca47775fd64b100543df43d)
+++ app/Models/Order.php	(revision 70133e4e1aaf27f2d1370b191bdf97cfb1956665)
@@ -26,4 +26,16 @@
         'transport_id',
     ];
+
+    public static function getValidationRules($id = null): array
+    {
+        return [
+            'date' => 'required|date|before_or_equal:today',
+            'status' => 'required|string|in:pending,confirmed,processing,shipped,delivered,cancelled',
+            'estimated_delivery_date' => 'required|date|after_or_equal:date',
+            'buyer_id' => 'required|string|exists:clients,id',
+            'receiver_id' => 'required|string|exists:clients,id',
+            'transport_id' => 'nullable|string|exists:transports,id',
+        ];
+    }
 
     public function buyer(): BelongsTo
Index: app/Models/PackingList.php
===================================================================
--- app/Models/PackingList.php	(revision 752245b09588c6cfdca47775fd64b100543df43d)
+++ app/Models/PackingList.php	(revision 70133e4e1aaf27f2d1370b191bdf97cfb1956665)
@@ -22,4 +22,13 @@
     ];
 
+    public static function getValidationRules($id = null): array
+    {
+        return [
+            'order_id' => 'required|string|exists:orders,id|unique:packing_lists,order_id,' . $id,
+            'packing_list_date' => 'required|date|before_or_equal:today',
+            'status' => 'required|string|in:draft,prepared,packed,shipped',
+        ];
+    }
+
     public function order(): BelongsTo
     {
Index: app/Models/Payment.php
===================================================================
--- app/Models/Payment.php	(revision 752245b09588c6cfdca47775fd64b100543df43d)
+++ app/Models/Payment.php	(revision 70133e4e1aaf27f2d1370b191bdf97cfb1956665)
@@ -23,4 +23,17 @@
         'payment_status'
     ];
+
+    public static function getValidationRules($id = null): array
+    {
+        return [
+            'amount' => 'required|numeric|min:0|max:9999999.99',
+            'currency' => 'required|string|size:3|in:USD,EUR,MKD,GBP,JPY,CHF,CAD,AUD',
+            'due_date' => 'required|date|after_or_equal:today',
+            'exchange_rate' => 'nullable|numeric|min:0.0001|max:9999.9999',
+            'payment_date' => 'nullable|date|before_or_equal:today',
+            'payment_method' => 'required|string|in:bank_transfer,credit_card,cash,check,wire_transfer',
+            'payment_status' => 'required|string|in:pending,paid,failed,refunded,cancelled',
+        ];
+    }
     public function order(): BelongsTo {
         return $this->belongsTo(Order::class, 'order_id');
Index: app/Models/Producer.php
===================================================================
--- app/Models/Producer.php	(revision 752245b09588c6cfdca47775fd64b100543df43d)
+++ app/Models/Producer.php	(revision 70133e4e1aaf27f2d1370b191bdf97cfb1956665)
@@ -24,4 +24,15 @@
     ];
 
+    public static function getValidationRules($id = null): array
+    {
+        return [
+            'name' => 'required|string|max:255|unique:producers,name,' . $id,
+            'address' => 'required|string|max:500',
+            'country' => 'required|string|max:255',
+            'phone_number' => 'nullable|string|max:255|regex:/^[\+]?[0-9\s\-\(\)]+$/',
+            'email' => 'nullable|email|max:255|unique:producers,email,' . $id,
+        ];
+    }
+
     public function products(): HasMany
     {
Index: app/Models/Product.php
===================================================================
--- app/Models/Product.php	(revision 752245b09588c6cfdca47775fd64b100543df43d)
+++ app/Models/Product.php	(revision 70133e4e1aaf27f2d1370b191bdf97cfb1956665)
@@ -26,4 +26,16 @@
     ];
 
+    public static function getValidationRules($id = null): array
+    {
+        return [
+            'name' => 'required|string|max:255',
+            'description' => 'required|string|max:1000',
+            'hs_code' => 'nullable|string|max:20|regex:/^[0-9.]+$/',
+            'price' => 'required|numeric|min:0|max:999999.99',
+            'producer_id' => 'required|string|exists:producers,id',
+            'unit_of_measure' => 'required|string|max:50|in:kg,g,lb,oz,piece,box,carton,pallet,liter,ml,gallon',
+        ];
+    }
+
     protected $casts = [
         'price' => 'float',
Index: app/Models/Transport.php
===================================================================
--- app/Models/Transport.php	(revision 752245b09588c6cfdca47775fd64b100543df43d)
+++ app/Models/Transport.php	(revision 70133e4e1aaf27f2d1370b191bdf97cfb1956665)
@@ -15,5 +15,5 @@
     protected $keyType = 'string';
     protected $fillable = [
-        'carrier_name',
+        'name',
         'departure_point',
         'arrival_point',
@@ -24,4 +24,16 @@
     ];
 
+    public static function getValidationRules($id = null): array
+    {
+        return [
+            'name' => 'required|string|max:255',
+            'departure_point' => 'required|string|max:255',
+            'arrival_point' => 'required|string|max:255',
+            'estimated_departure_date' => 'required|date|after_or_equal:today',
+            'estimated_arrival_date' => 'required|date|after:estimated_departure_date',
+            'incoterm' => 'required|string|in:EXW,FCA,CPT,CIP,DAP,DPU,DDP,FAS,FOB,CFR,CIF',
+            'insurance_conditions' => 'nullable|string|max:1000',
+        ];
+    }
     public function order(): HasMany {
         return $this->hasMany(Order::class, 'transport_id');
Index: app/Models/User.php
===================================================================
--- app/Models/User.php	(revision 752245b09588c6cfdca47775fd64b100543df43d)
+++ app/Models/User.php	(revision 70133e4e1aaf27f2d1370b191bdf97cfb1956665)
@@ -22,4 +22,16 @@
         'is_admin',
     ];
+
+    public static function getValidationRules($id = null): array
+    {
+        $passwordRule = $id ? 'nullable' : 'required';
+
+        return [
+            'name' => 'required|string|max:255',
+            'email' => 'required|email|max:255|unique:users,email,' . $id,
+            'password' => $passwordRule . '|string|min:8|confirmed',
+            'is_admin' => 'required|boolean',
+        ];
+    }
 
     /**
Index: database/factories/ClientFactory.php
===================================================================
--- database/factories/ClientFactory.php	(revision 752245b09588c6cfdca47775fd64b100543df43d)
+++ database/factories/ClientFactory.php	(revision 70133e4e1aaf27f2d1370b191bdf97cfb1956665)
@@ -16,5 +16,5 @@
     {
         return [
-            'client_name' => $this->faker->company(),
+            'name' => $this->faker->company(),
             'country' => $this->faker->country(),
             'registration_number' => $this->faker->regexify('[A-Z]{2}[0-9]{8}'),
Index: database/factories/TransportFactory.php
===================================================================
--- database/factories/TransportFactory.php	(revision 752245b09588c6cfdca47775fd64b100543df43d)
+++ database/factories/TransportFactory.php	(revision 70133e4e1aaf27f2d1370b191bdf97cfb1956665)
@@ -19,5 +19,5 @@
 
         return [
-            'carrier_name' => $this->faker->randomElement([
+            'name' => $this->faker->randomElement([
                 'DHL Express', 'FedEx', 'UPS', 'Maersk', 'COSCO', 'MSC',
                 'Emirates SkyCargo', 'Lufthansa Cargo', 'Air France KLM Cargo'
Index: database/migrations/2025_03_17_154849_create_transports_table.php
===================================================================
--- database/migrations/2025_03_17_154849_create_transports_table.php	(revision 752245b09588c6cfdca47775fd64b100543df43d)
+++ database/migrations/2025_03_17_154849_create_transports_table.php	(revision 70133e4e1aaf27f2d1370b191bdf97cfb1956665)
@@ -14,5 +14,5 @@
         Schema::create('transports', function (Blueprint $table) {
             $table->uuid('id')->primary();
-            $table->string('carrier_name');
+            $table->string('name');
             $table->string('departure_point');
             $table->string('arrival_point');
Index: database/migrations/2025_08_08_131914_create_clients_table.php
===================================================================
--- database/migrations/2025_08_08_131914_create_clients_table.php	(revision 752245b09588c6cfdca47775fd64b100543df43d)
+++ database/migrations/2025_08_08_131914_create_clients_table.php	(revision 70133e4e1aaf27f2d1370b191bdf97cfb1956665)
@@ -10,5 +10,5 @@
         Schema::create('clients', function (Blueprint $table) {
             $table->uuid('id')->primary();
-            $table->string('client_name');
+            $table->string('name');
             $table->string('country')->nullable();
             $table->string('registration_number')->nullable()->index();
Index: docker-compose.yml
===================================================================
--- docker-compose.yml	(revision 752245b09588c6cfdca47775fd64b100543df43d)
+++ docker-compose.yml	(revision 70133e4e1aaf27f2d1370b191bdf97cfb1956665)
@@ -2,16 +2,16 @@
 
 services:
-  pharma-export:
-    build:
-      context: .
-      dockerfile: Dockerfile
-    hostname: pharma-export
-    container_name: pharma-export
-    env_file: .env
-    restart: always
-    ports:
-      - 80:80
-    depends_on:
-      - pharma-export-db
+#  pharma-export:
+#    build:
+#      context: .
+#      dockerfile: Dockerfile
+#    hostname: pharma-export
+#    container_name: pharma-export
+#    env_file: .env
+#    restart: always
+#    ports:
+#      - 80:80
+#    depends_on:
+#      - pharma-export-db
 
   pharma-export-db:
@@ -21,4 +21,6 @@
     env_file: .env
     restart: always
+    ports:
+      - 5432:5432
     volumes:
       - pharma-export-db:/var/lib/postgresql/data
Index: resources/js/Layout/App.vue
===================================================================
--- resources/js/Layout/App.vue	(revision 752245b09588c6cfdca47775fd64b100543df43d)
+++ resources/js/Layout/App.vue	(revision 70133e4e1aaf27f2d1370b191bdf97cfb1956665)
@@ -8,16 +8,24 @@
     Package,
     Package2,
+    Pill,
     Search,
     ShoppingCart,
-    Users
-} from 'lucide-vue-next'
-import {computed} from 'vue'
-import {route} from 'ziggy-js'
-import type {FunctionalComponent, HTMLAttributes, VNodeProps} from 'vue'
-
-import useTheme from '@/composables/useTheme'
-import {Badge} from '@/components/ui/badge'
-import {Button} from '@/components/ui/button'
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card'
+    Truck,
+    Users,
+} from 'lucide-vue-next';
+import { computed } from 'vue';
+import { route } from 'ziggy-js';
+import type { FunctionalComponent, HTMLAttributes, VNodeProps } from 'vue';
+
+import useTheme from '@/composables/useTheme';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
 import {
     DropdownMenu,
@@ -26,20 +34,20 @@
     DropdownMenuLabel,
     DropdownMenuSeparator,
-    DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
-import {Input} from '@/components/ui/input'
-import {Toaster} from '@/components/ui/sonner'
-import {Sheet, SheetContent, SheetTrigger} from '@/components/ui/sheet'
-import {Link, useForm, router, usePage} from '@inertiajs/vue3'
-import {Icon} from '@iconify/vue'
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/input';
+import { Toaster } from '@/components/ui/sonner';
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { Link, useForm, router, usePage } from '@inertiajs/vue3';
+import { Icon } from '@iconify/vue';
 
 // Define a consistent interface for navigation items
 interface NavItem {
-    name: string
-    href: string
-    icon: FunctionalComponent<HTMLAttributes & VNodeProps>
-    current: boolean
-    routeName: string // Add routeName to the interface
-    model?: string
+    name: string;
+    href: string;
+    icon: FunctionalComponent<HTMLAttributes & VNodeProps>;
+    current: boolean;
+    routeName: string; // Add routeName to the interface
+    model?: string;
 }
 
@@ -47,8 +55,8 @@
 const form = useForm({});
 const logout = () => {
-    router.post(route('logout'), {}, {preserveScroll: true});
+    router.post(route('logout'), {}, { preserveScroll: true });
 };
-const {setTheme} = useTheme()
-const page = usePage()
+const { setTheme } = useTheme();
+const page = usePage();
 
 // Refactored navigation items as a computed property
@@ -59,29 +67,37 @@
         icon: Home,
         current: route().current('dashboard'),
-        routeName: 'Dashboard'
+        routeName: 'Dashboard',
     },
     {
         name: 'Products',
-        href: route('generic.index', {model: 'products'}),
+        href: route('generic.index', { model: 'products' }),
+        icon: Pill,
+        current: route().current('generic.index', { model: 'products' }),
+        routeName: 'GenericModelPage',
+        model: 'product',
+    },
+    {
+        name: 'Clients',
+        href: route('generic.index', { model: 'clients' }),
+        icon: Users,
+        current: route().current('generic.index', { model: 'clients' }),
+        routeName: 'GenericModelPage',
+        model: 'client',
+    },
+    {
+        name: 'Orders',
+        href: route('generic.index', { model: 'orders' }),
         icon: Package,
-        current: route().current('generic.index', {model: 'products'}),
-        routeName: 'GenericModelPage',
-        model: 'product'
-    },
-    {
-        name: 'Clients',
-        href: route('generic.index', {model: 'clients'}),
-        icon: Users,
-        current: route().current('generic.index', {model: 'clients'}),
-        routeName: 'GenericModelPage',
-        model: 'client'
-    },
-    {
-        name: 'Orders',
-        href: route('generic.index', {model: 'orders'}),
-        icon: Users,
-        current: route().current('generic.index', {model: 'orders'}),
-        routeName: 'GenericModelPage',
-        model: 'order'
+        current: route().current('generic.index', { model: 'orders' }),
+        routeName: 'GenericModelPage',
+        model: 'order',
+    },
+    {
+        name: 'Transports',
+        href: route('generic.index', { model: 'transports' }),
+        icon: Truck,
+        current: route().current('generic.index', { model: 'transports' }),
+        routeName: 'GenericModelPage',
+        model: 'transport',
     },
 ]);
@@ -89,37 +105,52 @@
 // Helper to determine active link classes and remove duplication
 const getLinkClasses = (item: NavItem): string => {
-    const baseClasses = 'flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary';
+    const baseClasses =
+        'flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary';
 
     // Check if both the route name and the 'model' parameter match
-    const isActive = item.routeName === page.component && item.model === route().params.model;
+    const isActive =
+        item.routeName === page.component &&
+        item.model === route().params.model;
 
     return isActive
         ? `${baseClasses} bg-muted text-primary`
-        : `${baseClasses} text-muted-foreground`
+        : `${baseClasses} text-muted-foreground`;
 };
 </script>
 
 <template>
-    <Toaster/>
-    <div class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
-        <div class="hidden border-r bg-muted/40 md:block">
+    <Toaster />
+    <div
+        class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]"
+    >
+        <div class="bg-muted/40 hidden border-r md:block">
             <div class="flex h-full max-h-screen flex-col gap-2">
-                <div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
+                <div
+                    class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6"
+                >
                     <a href="/" class="flex items-center gap-2 font-semibold">
-                        <Package2 class="h-6 w-6"/>
+                        <Package2 class="h-6 w-6" />
                         <span class="">Pharma Export</span>
                     </a>
-                    <Button variant="outline" size="icon" class="ml-auto h-8 w-8">
-                        <Bell class="h-4 w-4"/>
+                    <Button
+                        variant="outline"
+                        size="icon"
+                        class="ml-auto h-8 w-8"
+                    >
+                        <Bell class="h-4 w-4" />
                         <span class="sr-only">Toggle notifications</span>
                     </Button>
                 </div>
                 <div class="flex-1">
-                    <nav class="grid items-start px-2 text-sm font-medium lg:px-4">
-                        <Link v-for="item in navigationItems"
-                              :key="item.name"
-                              :href="item.href"
-                              :class="getLinkClasses(item)">
-                            <component :is="item.icon" class="h-4 w-4"/>
+                    <nav
+                        class="grid items-start px-2 text-sm font-medium lg:px-4"
+                    >
+                        <Link
+                            v-for="item in navigationItems"
+                            :key="item.name"
+                            :href="item.href"
+                            :class="getLinkClasses(item)"
+                        >
+                            <component :is="item.icon" class="h-4 w-4" />
                             {{ item.name }}
                         </Link>
@@ -129,9 +160,15 @@
         </div>
         <div class="flex flex-col">
-            <header class="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
+            <header
+                class="bg-muted/40 flex h-14 items-center gap-4 border-b px-4 lg:h-[60px] lg:px-6"
+            >
                 <Sheet>
                     <SheetTrigger as-child>
-                        <Button variant="outline" size="icon" class="shrink-0 md:hidden">
-                            <Menu class="h-5 w-5"/>
+                        <Button
+                            variant="outline"
+                            size="icon"
+                            class="shrink-0 md:hidden"
+                        >
+                            <Menu class="h-5 w-5" />
                             <span class="sr-only">Toggle navigation menu</span>
                         </Button>
@@ -139,14 +176,19 @@
                     <SheetContent side="left" class="flex flex-col">
                         <nav class="grid gap-2 text-lg font-medium">
-                            <a href="#" class="flex items-center gap-2 text-lg font-semibold">
-                                <Package2 class="h-6 w-6"/>
+                            <a
+                                href="#"
+                                class="flex items-center gap-2 text-lg font-semibold"
+                            >
+                                <Package2 class="h-6 w-6" />
                                 <span class="sr-only">Acme Inc</span>
                             </a>
-                            <Link v-for="item in navigationItems"
-                                  :key="item.name"
-                                  :href="item.href"
-                                  :class="getLinkClasses(item)"
-                                  class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground">
-                                <component :is="item.icon" class="h-5 w-5"/>
+                            <Link
+                                v-for="item in navigationItems"
+                                :key="item.name"
+                                :href="item.href"
+                                :class="getLinkClasses(item)"
+                                class="text-muted-foreground hover:text-foreground mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2"
+                            >
+                                <component :is="item.icon" class="h-5 w-5" />
                                 {{ item.name }}
                             </Link>
@@ -157,6 +199,6 @@
                                     <CardTitle>Upgrade to Pro</CardTitle>
                                     <CardDescription>
-                                        Unlock all features and get unlimited access to our
-                                        support team.
+                                        Unlock all features and get unlimited
+                                        access to our support team.
                                     </CardDescription>
                                 </CardHeader>
@@ -173,7 +215,12 @@
                     <form>
                         <div class="relative">
-                            <Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground"/>
-                            <Input type="search" placeholder="Search products..."
-                                   class="w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3"/>
+                            <Search
+                                class="text-muted-foreground absolute top-2.5 left-2.5 h-4 w-4"
+                            />
+                            <Input
+                                type="search"
+                                placeholder="Search products..."
+                                class="bg-background w-full appearance-none pl-8 shadow-none md:w-2/3 lg:w-1/3"
+                            />
                         </div>
                     </form>
@@ -184,9 +231,9 @@
                             <Icon
                                 icon="radix-icons:moon"
-                                class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+                                class="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90"
                             />
                             <Icon
                                 icon="radix-icons:sun"
-                                class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+                                class="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0"
                             />
                             <span class="sr-only">Toggle theme</span>
@@ -207,6 +254,10 @@
                 <DropdownMenu>
                     <DropdownMenuTrigger as-child>
-                        <Button variant="secondary" size="icon" class="rounded-full">
-                            <CircleUser class="h-5 w-5"/>
+                        <Button
+                            variant="secondary"
+                            size="icon"
+                            class="rounded-full"
+                        >
+                            <CircleUser class="h-5 w-5" />
                             <span class="sr-only">Toggle user menu</span>
                         </Button>
@@ -214,9 +265,11 @@
                     <DropdownMenuContent align="end">
                         <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                        <DropdownMenuSeparator/>
+                        <DropdownMenuSeparator />
                         <DropdownMenuItem>Settings</DropdownMenuItem>
                         <DropdownMenuItem>Support</DropdownMenuItem>
-                        <DropdownMenuSeparator/>
-                        <DropdownMenuItem @click="logout">Logout</DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem @click="logout"
+                            >Logout</DropdownMenuItem
+                        >
                     </DropdownMenuContent>
                 </DropdownMenu>
@@ -229,5 +282,5 @@
                 </div>
                 <div class="">
-                    <slot/>
+                    <slot />
                 </div>
             </main>
Index: resources/js/Pages/GenericModelPage.vue
===================================================================
--- resources/js/Pages/GenericModelPage.vue	(revision 752245b09588c6cfdca47775fd64b100543df43d)
+++ resources/js/Pages/GenericModelPage.vue	(revision 70133e4e1aaf27f2d1370b191bdf97cfb1956665)
@@ -2,5 +2,5 @@
 import {ref, watch, reactive, computed} from 'vue';
 import {router} from '@inertiajs/vue3';
-import {ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight} from 'lucide-vue-next';
+import {ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, ExternalLink} from 'lucide-vue-next';
 import {debounce} from 'lodash-es';
 import App from '@/Layout/App.vue';
@@ -56,5 +56,7 @@
         sort_direction: string;
         per_page: number;
+        open_id?: string; // NEW
     };
+    fkMap: Record<string, string>; // NEW: fk field -> referenced table (plural)
 }
 
@@ -80,4 +82,56 @@
 });
 
+// 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' },
+    };
+    return fkMap;
+});
+
+// Helper to check if a field is a foreign key
+const isForeignKey = (field: string): boolean => {
+    return field.endsWith('_id') && foreignKeyMap.value[field] !== undefined;
+};
+
+// Helper to get the related model name for display
+const getRelatedModelName = (item: any, field: string): string => {
+    const fkInfo = foreignKeyMap.value[field];
+    if (!fkInfo) return item[field] || 'N/A';
+
+    // Check if the related data is loaded (assuming eager loading)
+    const relationName = field.replace('_id', '');
+    if (item[relationName] && item[relationName].name) {
+        return item[relationName].name;
+    }
+
+    // For orders or other models without names, show the ID
+    if (fkInfo.nameField === 'id') {
+        return item[field] || 'N/A';
+    }
+
+    // Fallback to the foreign key value
+    return item[field] || 'N/A';
+};
+
+// Helper to navigate to related model
+const navigateToRelatedModel = (field: string, value: any) => {
+    const fkInfo = foreignKeyMap.value[field];
+    if (!fkInfo) return;
+
+    const targetId = typeof value === 'object' ? value.id : value;
+    if (!targetId) return;
+
+    router.get(`/${fkInfo.table}`, {
+        open_id: targetId
+    });
+};
+
 // Watch for search changes
 const debouncedSearch = debounce((value: string) => {
@@ -139,6 +193,11 @@
 const canGoNext = () => props.items.current_page < props.items.last_page;
 
-// Expanded rows
+// Expanded rows - check for open_id from URL
 const expandedRows = ref(new Set<string>());
+
+// Auto-expand if open_id is provided
+if (props.filters.open_id) {
+    expandedRows.value.add(props.filters.open_id);
+}
 
 const toggleRowExpansion = (itemId: string) => {
@@ -199,5 +258,5 @@
 };
 
-const formatValue = (value: any) => {
+const formatValue = (value: any, field?: string) => {
     if (value === null || value === undefined) {
         return 'N/A';
@@ -219,11 +278,10 @@
 };
 
-
-// Use this computed property to define which fields to show in the table
+// Enhanced table fields that handle foreign keys
 const tableFields = computed(() => {
     return fields.value.filter(
         (field) =>
-            !['id', 'created_at', 'updated_at'].includes(field) &&
-            typeof props.items.data[0][field] !== 'object', // Exclude relationships
+            !['created_at', 'updated_at'].includes(field) &&
+            typeof props.items.data[0][field] !== 'object' // Exclude relationships
     );
 });
@@ -235,6 +293,4 @@
     );
 });
-
-
 </script>
 
@@ -242,4 +298,21 @@
 .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>
@@ -299,5 +372,18 @@
                                         class="font-medium max-w-[200px] truncate whitespace-nowrap overflow-hidden"
                                     >
-                                        {{ formatValue(item[field]) }}
+                                        <!-- Handle foreign keys with clickable links -->
+                                        <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>
+                                        <!-- Handle regular fields -->
+                                        <template v-else>
+                                            {{ formatValue(item[field], field) }}
+                                        </template>
                                     </TableCell>
                                     <TableCell>
@@ -336,5 +422,17 @@
                                                 <div v-for="field in detailFields" :key="field">
                                                     <strong>{{ formatLabel(field) }}:</strong>
-                                                    {{ formatValue(item[field]) }}
+                                                    <!-- Handle foreign keys in detail view -->
+                                                    <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>
