Index: app/Http/Controllers/GenericModelController.php
===================================================================
--- app/Http/Controllers/GenericModelController.php	(revision 93774cc2874f890ea669f15b97fa469770024559)
+++ app/Http/Controllers/GenericModelController.php	(revision 93774cc2874f890ea669f15b97fa469770024559)
@@ -0,0 +1,127 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Illuminate\Support\Str;
+
+class GenericModelController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index(Request $request, string $model)
+    {
+        $modelClass = $this->getModelClass($model);
+        if (!$modelClass) {
+            abort(404, 'Model not found.');
+        }
+
+        $query = $modelClass::query();
+        $modelInstance = new $modelClass();
+        $fillable = $modelInstance->getFillable();
+
+        // Add search functionality
+        if ($request->has('search') && $request->search) {
+            $query->where(function ($q) use ($request, $fillable) {
+                foreach ($fillable as $field) {
+                    $q->orWhere($field, 'like', '%' . $request->search . '%');
+                }
+            });
+        }
+
+        // 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();
+
+        return Inertia::render('GenericModelPage', [
+            'model' => Str::singular(Str::studly($model)),
+            'items' => $items,
+            'filters' => [
+                'search' => $request->search,
+                'sort_by' => $sortBy,
+                'sort_direction' => $sortDirection,
+                'per_page' => $request->get('per_page', 10)
+            ]
+        ]);
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request, string $model)
+    {
+        $modelClass = $this->getModelClass($model);
+        if (!$modelClass) {
+            abort(404, 'Model not found.');
+        }
+
+        $modelInstance = new $modelClass();
+        $fillable = $modelInstance->getFillable();
+
+        // Dynamically get validation rules from a method on the model
+        $validated = $request->validate($modelClass::getValidationRules());
+
+        $modelClass::create($validated);
+
+        return redirect()->route('generic.index', ['model' => Str::plural($model)])
+            ->with('success', Str::singular($model) . ' created successfully.');
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, string $model, string $id)
+    {
+        $modelClass = $this->getModelClass($model);
+        if (!$modelClass) {
+            abort(404, 'Model not found.');
+        }
+
+        $item = $modelClass::findOrFail($id);
+
+        $validated = $request->validate($modelClass::getValidationRules($item->id));
+
+        $item->update($validated);
+
+        return redirect()->route('generic.index', ['model' => Str::plural($model)])
+            ->with('success', Str::singular($model) . ' updated successfully.');
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(string $model, string $id)
+    {
+        $modelClass = $this->getModelClass($model);
+        if (!$modelClass) {
+            abort(404, 'Model not found.');
+        }
+
+        $item = $modelClass::findOrFail($id);
+        $item->delete();
+
+        return redirect()->route('generic.index', ['model' => Str::plural($model)])
+            ->with('success', Str::singular($model) . ' deleted successfully.');
+    }
+
+    /**
+     * Helper to resolve the model class.
+     */
+    protected function getModelClass(string $model)
+    {
+        $modelClass = 'App\\Models\\' . Str::studly(Str::singular($model));
+        if (class_exists($modelClass)) {
+            return $modelClass;
+        }
+        return null;
+    }
+}
Index: app/Models/Client.php
===================================================================
--- app/Models/Client.php	(revision 493b218696760be36468e7a224861a03e0952211)
+++ app/Models/Client.php	(revision 93774cc2874f890ea669f15b97fa469770024559)
@@ -27,4 +27,18 @@
     ];
 
+    public static function getValidationRules($id = null): array
+    {
+        return [
+            'client_name' => 'required|string|max:255',
+            'country' => 'required|string|max:255',
+            'registration_number' => 'nullable|string|max:255',
+            'tax_id' => 'nullable|string|max:255',
+            'contact_person' => 'nullable|string|max:255',
+            'phone_number' => 'nullable|string|max:255',
+            'billing_address' => 'nullable|string',
+            'shipping_address' => 'nullable|string',
+        ];
+    }
+
     // Orders where this company is the buyer
     public function buyerOrders(): HasMany
Index: resources/js/Layout/App.vue
===================================================================
--- resources/js/Layout/App.vue	(revision 493b218696760be36468e7a224861a03e0952211)
+++ resources/js/Layout/App.vue	(revision 93774cc2874f890ea669f15b97fa469770024559)
@@ -1,15 +1,18 @@
-Looking at your Laravel routes and the current App.vue file, I can see that you're using Inertia.js with Laravel routes. The issue with URL resolution is that we need to use the `route()` helper function from Ziggy to properly resolve Laravel named routes.
-
-**Refactoring Description:**
-I'll apply **Extract Variable** and **Extract Method** refactorings by:
-- Creating a computed property for navigation items that uses Laravel route names
-- Extracting the common link class logic into a reusable method
-- Removing code duplication while maintaining the same functionality
-
-```vue template
 <script setup lang="ts">
-import {Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users} from 'lucide-vue-next'
+import {
+    Bell,
+    CircleUser,
+    Home,
+    LineChart,
+    Menu,
+    Package,
+    Package2,
+    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'
@@ -31,5 +34,15 @@
 import {Icon} from '@iconify/vue'
 
-//Form
+// 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
+}
+
+// Form and Logout logic
 const form = useForm({});
 const logout = () => {
@@ -37,29 +50,56 @@
 };
 const {setTheme} = useTheme()
-
 const page = usePage()
 
-const navigationItems = computed(() => [
-    {href: route('dashboard'), label: 'Dashboard', icon: Home, routeName: 'dashboard'},
-    {href: route('products'), label: 'Products', icon: Package, routeName: 'products'},
-    {href: route('clients'), label: 'Clients', icon: Package, routeName: 'clients'},
-])
-
-const staticItems = [
-    {label: 'Analytics', icon: LineChart}
-]
-
-const getLinkClasses = (routeName: string): string => {
-    const baseClasses = 'flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary'
-    const isActive = page.component.value?.startsWith(routeName.charAt(0).toUpperCase() + routeName.slice(1))
+// Refactored navigation items as a computed property
+const navigationItems = computed<NavItem[]>(() => [
+    {
+        name: 'Dashboard',
+        href: route('dashboard'),
+        icon: Home,
+        current: route().current('dashboard'),
+        routeName: 'Dashboard'
+    },
+    {
+        name: 'Products',
+        href: route('generic.index', {model: 'products'}),
+        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'
+    },
+]);
+
+// 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';
+
+    // Check if both the route name and the 'model' parameter match
+    const isActive = item.routeName === page.component && item.model === route().params.model;
+
     return isActive
         ? `${baseClasses} bg-muted text-primary`
         : `${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">
@@ -78,18 +118,10 @@
                     <nav class="grid items-start px-2 text-sm font-medium lg:px-4">
                         <Link v-for="item in navigationItems"
-                              :key="item.routeName"
+                              :key="item.name"
                               :href="item.href"
-                              :class="getLinkClasses(item.routeName)">
+                              :class="getLinkClasses(item)">
                             <component :is="item.icon" class="h-4 w-4"/>
-                            {{ item.label }}
+                            {{ item.name }}
                         </Link>
-
-                        <a v-for="item in staticItems"
-                           :key="item.label"
-                           href="#"
-                           class="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary">
-                            <component :is="item.icon" class="h-4 w-4"/>
-                            {{ item.label }}
-                        </a>
                     </nav>
                 </div>
@@ -111,32 +143,12 @@
                                 <span class="sr-only">Acme Inc</span>
                             </a>
-                            <a href="#"
-                               class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground">
-                                <Home class="h-5 w-5"/>
-                                Dashboard
-                            </a>
-                            <a href="#"
-                               class="mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground">
-                                <ShoppingCart class="h-5 w-5"/>
-                                Orders
-                                <Badge class="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
-                                    6
-                                </Badge>
-                            </a>
-                            <a href="#"
-                               class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground">
-                                <Package class="h-5 w-5"/>
-                                Products
-                            </a>
-                            <a href="#"
-                               class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground">
-                                <Users class="h-5 w-5"/>
-                                Clients
-                            </a>
-                            <a href="#"
-                               class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground">
-                                <LineChart class="h-5 w-5"/>
-                                Analytics
-                            </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"/>
+                                {{ item.name }}
+                            </Link>
                         </nav>
                         <div class="mt-auto">
@@ -217,7 +229,5 @@
                 </div>
                 <div class="">
-                    <!-- Content Page -->
                     <slot/>
-                    <!-- Content Page -->
                 </div>
             </main>
@@ -225,11 +235,2 @@
     </div>
 </template>
-```
-
-
-The refactoring eliminates code duplication by:
-1. Using the `route()` helper to properly generate Laravel route URLs
-2. Creating a `navigationItems` computed property that centralizes navigation configuration
-3. Extracting the link class logic into a reusable `getLinkClasses` method
-4. Using `v-for` loops to render navigation items dynamically
-5. Improving active state detection using Inertia's page component information
Index: sources/js/Pages/Client.vue
===================================================================
--- resources/js/Pages/Client.vue	(revision 493b218696760be36468e7a224861a03e0952211)
+++ 	(revision )
@@ -1,478 +1,0 @@
-<script setup lang="ts">
-import {ref, watch, reactive} from 'vue'
-import {router} from '@inertiajs/vue3'
-import {ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight} 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 {Textarea} from "@/components/ui/textarea"
-
-interface Client {
-    id: string
-    client_name: string
-    country: string
-    registration_number?: string
-    tax_id?: string
-    contact_person?: string
-    phone_number?: string
-    billing_address?: string
-    shipping_address?: string
-    created_at: string
-    updated_at: string
-}
-
-interface PaginatedData {
-    data: Client[]
-    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 Props {
-    clients: PaginatedData
-    filters: {
-        search?: string
-        sort_by: string
-        sort_direction: string
-        per_page: number
-    }
-}
-
-const props = defineProps<Props>()
-
-// Dialog states
-const createDialogOpen = ref(false)
-const editDialogOpen = ref(false)
-const currentEditClient = ref<Client | null>(null)
-
-// Form models
-const createForm = reactive({
-    client_name: '',
-    country: '',
-    registration_number: '',
-    tax_id: '',
-    contact_person: '',
-    phone_number: '',
-    billing_address: '',
-    shipping_address: ''
-})
-
-const editForm = reactive({
-    id: '',
-    client_name: '',
-    country: '',
-    registration_number: '',
-    tax_id: '',
-    contact_person: '',
-    phone_number: '',
-    billing_address: '',
-    shipping_address: ''
-})
-
-// Reactive search
-const search = ref(props.filters.search || '')
-const perPage = ref(props.filters.per_page)
-
-// Debounced search function
-const debouncedSearch = debounce((value: string) => {
-    router.get('/clients', {
-        search: value,
-        per_page: perPage.value
-    }, {
-        preserveState: true,
-        replace: true
-    })
-}, 300)
-
-// Watch for search changes
-watch(search, (newValue) => {
-    debouncedSearch(newValue)
-})
-
-// Watch for changes per page
-watch(perPage, (newValue) => {
-    router.get('/clients', {
-        search: search.value,
-        per_page: newValue,
-        page: 1 // Reset to the first page
-    }, {
-        preserveState: true,
-        replace: true
-    })
-})
-
-// Pagination functions
-const goToPage = (page: number) => {
-    router.get('/clients', {
-        search: search.value,
-        per_page: perPage.value,
-        page
-    }, {
-        preserveState: true
-    })
-}
-
-const goToFirstPage = () => goToPage(1)
-const goToLastPage = () => goToPage(props.clients.last_page)
-const goToPreviousPage = () => goToPage(props.clients.current_page - 1)
-const goToNextPage = () => goToPage(props.clients.current_page + 1)
-
-// Helper functions
-const canGoPrevious = () => props.clients.current_page > 1
-const canGoNext = () => props.clients.current_page < props.clients.last_page
-
-// Expanded rows
-const expandedRows = ref(new Set<string>())
-
-const toggleRowExpansion = (clientId: string) => {
-    if (expandedRows.value.has(clientId)) {
-        expandedRows.value.delete(clientId)
-    } else {
-        expandedRows.value.add(clientId)
-    }
-}
-
-// Open edit dialog
-const openEditDialog = (client: Client) => {
-    currentEditClient.value = client
-    Object.assign(editForm, client)
-    editDialogOpen.value = true
-}
-
-// Submit create form
-const submitCreate = () => {
-    router.post('/clients', createForm, {
-        onSuccess: () => {
-            createDialogOpen.value = false
-            // Reset form
-            Object.assign(createForm, {
-                client_name: '',
-                country: '',
-                registration_number: '',
-                tax_id: '',
-                contact_person: '',
-                phone_number: '',
-                billing_address: '',
-                shipping_address: ''
-            })
-        }
-    })
-}
-
-// Submit edit form
-const submitEdit = () => {
-    if (!currentEditClient.value) return
-
-    router.put(`/clients/${currentEditClient.value.id}`, editForm, {
-        onSuccess: () => {
-            editDialogOpen.value = false
-            currentEditClient.value = null
-        }
-    })
-}
-
-// Delete client
-const deleteClient = (client: Client) => {
-    if (confirm(`Are you sure you want to delete ${client.client_name}?`)) {
-        router.delete(`/clients/${client.id}`, {
-            preserveScroll: true
-        })
-    }
-}
-</script>
-
-<template>
-    <App>
-        <template #title>Clients</template>
-
-        <div class="w-full space-y-4">
-            <!-- Search and Controls -->
-            <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 clients..."
-                    />
-                    <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>
-                    <Button @click="createDialogOpen = true">Create Client</Button>
-                </div>
-
-                <!-- Results info -->
-                <div class="text-sm text-muted-foreground">
-                    Showing {{ clients.from }} to {{ clients.to }} of {{ clients.total }} results
-                </div>
-            </div>
-
-            <!-- Table -->
-            <div class="rounded-md border">
-                <Table>
-                    <TableHeader>
-                        <TableRow>
-                            <TableHead>Client Name</TableHead>
-                            <TableHead>Country</TableHead>
-                            <TableHead>Registration Number</TableHead>
-                            <TableHead>Contact Person</TableHead>
-                            <TableHead>Phone Number</TableHead>
-                            <TableHead>Created</TableHead>
-                            <TableHead>Actions</TableHead>
-                        </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                        <template v-if="clients.data.length">
-                            <template v-for="client in clients.data" :key="client.id">
-                                <TableRow
-                                    class="cursor-pointer hover:bg-muted/50"
-                                    @click="toggleRowExpansion(client.id)"
-                                >
-                                    <TableCell class="font-medium">{{ client.client_name }}</TableCell>
-                                    <TableCell>{{ client.country }}</TableCell>
-                                    <TableCell>{{ client.registration_number || 'N/A' }}</TableCell>
-                                    <TableCell>{{ client.contact_person || 'N/A' }}</TableCell>
-                                    <TableCell>{{ client.phone_number || 'N/A' }}</TableCell>
-                                    <TableCell>{{ new Date(client.created_at).toLocaleDateString() }}</TableCell>
-                                    <TableCell class="flex space-x-2">
-                                        <Button
-                                            variant="outline"
-                                            size="sm"
-                                            @click.stop="toggleRowExpansion(client.id)"
-                                        >
-                                            {{ expandedRows.has(client.id) ? 'Hide' : 'Show' }}
-                                        </Button>
-                                        <Button
-                                            variant="outline"
-                                            size="sm"
-                                            @click.stop="openEditDialog(client)"
-                                        >
-                                            Edit
-                                        </Button>
-                                        <Button
-                                            variant="outline"
-                                            color="crimson"
-                                            size="sm"
-                                            @click.stop="deleteClient(client)"
-                                        >
-                                            Delete
-                                        </Button>
-                                    </TableCell>
-                                </TableRow>
-
-                                <!-- Expanded row content -->
-                                <TableRow v-if="expandedRows.has(client.id)" class="bg-muted/20">
-                                    <TableCell :colspan="7" class="p-4">
-                                        <div class="space-y-3">
-                                            <h4 class="font-semibold">Client Details</h4>
-                                            <div class="grid grid-cols-2 gap-4 text-sm">
-                                                <div>
-                                                    <strong>Tax ID:</strong> {{ client.tax_id || 'N/A' }}
-                                                </div>
-                                                <div>
-                                                    <strong>Registration Number:</strong>
-                                                    {{ client.registration_number || 'N/A' }}
-                                                </div>
-                                                <div>
-                                                    <strong>Contact Person:</strong> {{
-                                                        client.contact_person || 'N/A'
-                                                    }}
-                                                </div>
-                                                <div>
-                                                    <strong>Phone:</strong> {{ client.phone_number || 'N/A' }}
-                                                </div>
-                                            </div>
-                                            <div class="grid grid-cols-1 gap-4 text-sm">
-                                                <div>
-                                                    <strong>Billing Address:</strong><br>
-                                                    {{ client.billing_address || 'Not provided' }}
-                                                </div>
-                                                <div>
-                                                    <strong>Shipping Address:</strong><br>
-                                                    {{ client.shipping_address || 'Not provided' }}
-                                                </div>
-                                            </div>
-                                            <div class="text-xs text-muted-foreground mt-2">
-                                                Created: {{ new Date(client.created_at).toLocaleString() }} |
-                                                Updated: {{ new Date(client.updated_at).toLocaleString() }}
-                                            </div>
-                                        </div>
-                                    </TableCell>
-                                </TableRow>
-                            </template>
-                        </template>
-
-                        <TableRow v-else>
-                            <TableCell colspan="7" class="h-24 text-center">
-                                No clients found.
-                            </TableCell>
-                        </TableRow>
-                    </TableBody>
-                </Table>
-            </div>
-
-            <!-- Pagination -->
-            <div class="flex items-center justify-between">
-                <div class="text-sm text-muted-foreground">
-                    Page {{ clients.current_page }} of {{ clients.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 Client Dialog -->
-        <Dialog v-model:open="createDialogOpen">
-            <DialogContent class="sm:max-w-3xl">
-                <DialogHeader>
-                    <DialogTitle>Create New Client</DialogTitle>
-                </DialogHeader>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 py-4">
-                    <div class="space-y-2">
-                        <Label for="client_name">Client Name *</Label>
-                        <Input id="client_name" v-model="createForm.client_name"/>
-                    </div>
-                    <div class="space-y-2">
-                        <Label for="country">Country *</Label>
-                        <Input id="country" v-model="createForm.country"/>
-                    </div>
-                    <div class="space-y-2">
-                        <Label for="registration_number">Registration Number</Label>
-                        <Input id="registration_number" v-model="createForm.registration_number"/>
-                    </div>
-                    <div class="space-y-2">
-                        <Label for="tax_id">Tax ID</Label>
-                        <Input id="tax_id" v-model="createForm.tax_id"/>
-                    </div>
-                    <div class="space-y-2">
-                        <Label for="contact_person">Contact Person</Label>
-                        <Input id="contact_person" v-model="createForm.contact_person"/>
-                    </div>
-                    <div class="space-y-2">
-                        <Label for="phone_number">Phone Number</Label>
-                        <Input id="phone_number" v-model="createForm.phone_number"/>
-                    </div>
-                    <div class="space-y-2 md:col-span-2">
-                        <Label for="billing_address">Billing Address</Label>
-                        <Textarea id="billing_address" v-model="createForm.billing_address"/>
-                    </div>
-                    <div class="space-y-2 md:col-span-2">
-                        <Label for="shipping_address">Shipping Address</Label>
-                        <Textarea id="shipping_address" v-model="createForm.shipping_address"/>
-                    </div>
-                </div>
-                <DialogFooter>
-                    <Button variant="outline" @click="createDialogOpen = false">Cancel</Button>
-                    <Button type="submit" @click="submitCreate">Create Client</Button>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-
-        <!-- Edit Client Dialog -->
-        <Dialog v-model:open="editDialogOpen">
-            <DialogContent class="sm:max-w-3xl">
-                <DialogHeader>
-                    <DialogTitle>Edit Client</DialogTitle>
-                </DialogHeader>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 py-4">
-                    <div class="space-y-2">
-                        <Label for="edit_client_name">Client Name *</Label>
-                        <Input id="edit_client_name" v-model="editForm.client_name"/>
-                    </div>
-                    <div class="space-y-2">
-                        <Label for="edit_country">Country *</Label>
-                        <Input id="edit_country" v-model="editForm.country"/>
-                    </div>
-                    <div class="space-y-2">
-                        <Label for="edit_registration_number">Registration Number</Label>
-                        <Input id="edit_registration_number" v-model="editForm.registration_number"/>
-                    </div>
-                    <div class="space-y-2">
-                        <Label for="edit_tax_id">Tax ID</Label>
-                        <Input id="edit_tax_id" v-model="editForm.tax_id"/>
-                    </div>
-                    <div class="space-y-2">
-                        <Label for="edit_contact_person">Contact Person</Label>
-                        <Input id="edit_contact_person" v-model="editForm.contact_person"/>
-                    </div>
-                    <div class="space-y-2">
-                        <Label for="edit_phone_number">Phone Number</Label>
-                        <Input id="edit_phone_number" v-model="editForm.phone_number"/>
-                    </div>
-                    <div class="space-y-2 md:col-span-2">
-                        <Label for="edit_billing_address">Billing Address</Label>
-                        <Textarea id="edit_billing_address" v-model="editForm.billing_address"/>
-                    </div>
-                    <div class="space-y-2 md:col-span-2">
-                        <Label for="edit_shipping_address">Shipping Address</Label>
-                        <Textarea id="edit_shipping_address" v-model="editForm.shipping_address"/>
-                    </div>
-                </div>
-                <DialogFooter>
-                    <Button variant="outline" @click="editDialogOpen = false">Cancel</Button>
-                    <Button type="submit" @click="submitEdit">Save Changes</Button>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    </App>
-</template>
Index: resources/js/Pages/GenericModelPage.vue
===================================================================
--- resources/js/Pages/GenericModelPage.vue	(revision 93774cc2874f890ea669f15b97fa469770024559)
+++ resources/js/Pages/GenericModelPage.vue	(revision 93774cc2874f890ea669f15b97fa469770024559)
@@ -0,0 +1,442 @@
+<script setup lang="ts">
+import {ref, watch, reactive, computed} from 'vue';
+import {router} from '@inertiajs/vue3';
+import {ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight} 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 {Textarea} from '@/components/ui/textarea';
+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 Props {
+    model: string;
+    items: PaginatedData;
+    filters: {
+        search?: string;
+        sort_by: string;
+        sort_direction: string;
+        per_page: number;
+    };
+}
+
+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: This is the core of the generic page
+const fields = computed(() => {
+    if (!props.items.data.length) return [];
+    return Object.keys(props.items.data[0]);
+});
+
+// Watch for search changes
+const debouncedSearch = debounce((value: string) => {
+    router.get(
+        `/${props.model.toLowerCase()}s`,
+        {
+            search: value,
+            per_page: perPage.value,
+        },
+        {
+            preserveState: true,
+            replace: true,
+        },
+    );
+}, 300);
+
+watch(search, (newValue) => {
+    debouncedSearch(newValue);
+});
+
+// Watch for changes per page
+watch(perPage, (newValue) => {
+    router.get(
+        `/${props.model.toLowerCase()}s`,
+        {
+            search: search.value,
+            per_page: newValue,
+            page: 1, // Reset to the first page
+        },
+        {
+            preserveState: true,
+            replace: true,
+        },
+    );
+});
+
+// Pagination functions
+const goToPage = (page: number) => {
+    router.get(
+        `/${props.model.toLowerCase()}s`,
+        {
+            search: search.value,
+            per_page: perPage.value,
+            page,
+        },
+        {
+            preserveState: true,
+        },
+    );
+};
+
+const goToFirstPage = () => goToPage(1);
+const goToLastPage = () => goToPage(props.items.last_page);
+const goToPreviousPage = () => goToPage(props.items.current_page - 1);
+const goToNextPage = () => goToPage(props.items.current_page + 1);
+
+// Helper functions
+const canGoPrevious = () => props.items.current_page > 1;
+const canGoNext = () => props.items.current_page < props.items.last_page;
+
+// Expanded rows
+const expandedRows = ref(new Set<string>());
+
+const toggleRowExpansion = (itemId: string) => {
+    if (expandedRows.value.has(itemId)) {
+        expandedRows.value.delete(itemId);
+    } else {
+        expandedRows.value.add(itemId);
+    }
+};
+
+// Open edit dialog
+const openEditDialog = (item: any) => {
+    currentEditItem.value = item;
+    Object.assign(editForm, item);
+    editDialogOpen.value = true;
+};
+
+// Submit create form
+const submitCreate = () => {
+    router.post(
+        `/${props.model.toLowerCase()}s`,
+        createForm,
+        {
+            onSuccess: () => {
+                createDialogOpen.value = false;
+                // Reset form
+                Object.keys(createForm).forEach((key) => {
+                    createForm[key] = '';
+                });
+            },
+        },
+    );
+};
+
+// 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,
+        });
+    }
+};
+
+const formatValue = (value: any) => {
+    if (value === null || value === undefined) {
+        return 'N/A';
+    }
+    if (typeof value === 'boolean') {
+        return value ? 'Yes' : 'No';
+    }
+    if (typeof value === 'number') {
+        return value.toFixed(2); // format prices nicely, or just `return value;`
+    }
+    // Only treat as date if it's a string that looks like one
+    if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}/.test(value)) {
+        const date = new Date(value);
+        if (!isNaN(date.getTime())) {
+            return date.toLocaleDateString();
+        }
+    }
+    return value;
+};
+
+
+// Use this computed property to define which fields to show in the table
+const tableFields = computed(() => {
+    return fields.value.filter(
+        (field) =>
+            !['id', 'created_at', 'updated_at'].includes(field) &&
+            typeof props.items.data[0][field] !== 'object', // Exclude relationships
+    );
+});
+
+// Use this computed property to define which fields to show in the detailed view and forms
+const detailFields = computed(() => {
+    return fields.value.filter(
+        (field) => !['id', 'created_at', 'updated_at'].includes(field),
+    );
+});
+
+
+</script>
+
+<style scoped>
+.table-auto-layout {
+    table-layout: auto;
+}
+</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>
+                    <Button @click="createDialogOpen = true">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) }}
+                            </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"
+                                    >
+                                        {{ formatValue(item[field]) }}
+                                    </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) }}:</strong>
+                                                    {{ formatValue(item[field]) }}
+                                                </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>
+
+        <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) }}</Label>
+                        <Input :id="field" v-model="createForm[toCamelCase(field)]"/>
+                    </div>
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" @click="createDialogOpen = false">Cancel</Button>
+                    <Button type="submit" @click="submitCreate">Create {{ model }}</Button>
+                </DialogFooter>
+            </DialogContent>
+        </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) }}</Label>
+                        <Input :id="`edit_${field}`" v-model="editForm[toCamelCase(field)]"/>
+                    </div>
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" @click="editDialogOpen = false">Cancel</Button>
+                    <Button type="submit" @click="submitEdit">Save Changes</Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    </App>
+</template>
Index: sources/js/Pages/Order.vue
===================================================================
--- resources/js/Pages/Order.vue	(revision 493b218696760be36468e7a224861a03e0952211)
+++ 	(revision )
@@ -1,267 +1,0 @@
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-import { router } from '@inertiajs/vue3'
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } 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"
-
-interface Order {
-    id: number
-    date: string
-    status: string
-    estimated_delivery_date: string
-    buyer?: {
-        name: string
-        email: string
-    }
-    receiver?: {
-        name: string
-        email: string
-    }
-    total_amount?: number
-}
-
-interface PaginatedData {
-    data: Order[]
-    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 Props {
-    orders: PaginatedData
-    filters: {
-        search?: string
-        sort_by: string
-        sort_direction: string
-        per_page: number
-    }
-}
-
-const props = defineProps<Props>()
-
-// Reactive search
-const search = ref(props.filters.search || '')
-const perPage = ref(props.filters.per_page)
-
-// Debounced search function
-const debouncedSearch = debounce((value: string) => {
-    router.get('/orders', {
-        search: value,
-        per_page: perPage.value
-    }, {
-        preserveState: true,
-        replace: true
-    })
-}, 300)
-
-// Watch for search changes
-watch(search, (newValue) => {
-    debouncedSearch(newValue)
-})
-
-// Watch for changes per page
-watch(perPage, (newValue) => {
-    router.get('/orders', {
-        search: search.value,
-        per_page: newValue,
-        page: 1 // Reset to the first page
-    }, {
-        preserveState: true,
-        replace: true
-    })
-})
-
-// Pagination functions
-const goToPage = (page: number) => {
-    router.get('/orders', {
-        search: search.value,
-        per_page: perPage.value,
-        page
-    }, {
-        preserveState: true
-    })
-}
-
-const goToFirstPage = () => goToPage(1)
-const goToLastPage = () => goToPage(props.orders.last_page)
-const goToPreviousPage = () => goToPage(props.orders.current_page - 1)
-const goToNextPage = () => goToPage(props.orders.current_page + 1)
-
-// Helper functions
-const canGoPrevious = () => props.orders.current_page > 1
-const canGoNext = () => props.orders.current_page < props.orders.last_page
-
-// Expanded rows
-const expandedRows = ref(new Set<string>())
-
-const toggleRowExpansion = (orderId: string) => {
-    if (expandedRows.value.has(orderId)) {
-        expandedRows.value.delete(orderId)
-    } else {
-        expandedRows.value.add(orderId)
-    }
-}
-</script>
-
-<template>
-    <App>
-        <template #title>Orders</template>
-
-        <div class="w-full space-y-4">
-            <!-- Search and Controls -->
-            <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 orders..."
-                    />
-                    <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>
-                </div>
-
-                <!-- Results info -->
-                <div class="text-sm text-muted-foreground">
-                    Showing {{ orders.from }} to {{ orders.to }} of {{ orders.total }} results
-                </div>
-            </div>
-
-            <!-- Table -->
-            <div class="rounded-md border">
-                <Table>
-                    <TableHeader>
-                        <TableRow>
-                            <TableHead>ID</TableHead>
-                            <TableHead>Order Date</TableHead>
-                            <TableHead>Status</TableHead>
-                            <TableHead>Buyer Email</TableHead>
-                            <TableHead>Estimated Delivery</TableHead>
-                            <TableHead>Total Amount</TableHead>
-                            <TableHead>Actions</TableHead>
-                        </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                        <template v-if="orders.data.length">
-                            <template v-for="order in orders.data" :key="order.id">
-                                <TableRow
-                                    class="cursor-pointer hover:bg-muted/50"
-                                    @click="toggleRowExpansion(order.id)"
-                                >
-                                    <TableCell>{{ order.id }}</TableCell>
-                                    <TableCell>{{ new Date(order.date).toLocaleDateString() }}</TableCell>
-                                    <TableCell>
-                                        <span class="capitalize">{{ order.status }}</span>
-                                    </TableCell>
-                                    <TableCell>{{ order.buyer?.email || 'N/A' }}</TableCell>
-                                    <TableCell>
-                                        {{ order.estimated_delivery_date ? new Date(order.estimated_delivery_date).toLocaleDateString() : 'Not set' }}
-                                    </TableCell>
-                                    <TableCell>${{ order.total_amount?.toFixed(2) || '0.00' }}</TableCell>
-                                    <TableCell>
-                                        <Button variant="ghost" size="sm">
-                                            {{ expandedRows.has(order.id) ? 'Hide' : 'Show' }} Details
-                                        </Button>
-                                    </TableCell>
-                                </TableRow>
-
-                                <!-- Expanded row content -->
-                                <TableRow v-if="expandedRows.has(order.id)" class="bg-muted/20">
-                                    <TableCell :colspan="7" class="p-4">
-                                        <div class="space-y-2">
-                                            <h4 class="font-semibold">Order Details</h4>
-                                            <div class="grid grid-cols-2 gap-4 text-sm">
-                                                <div>
-                                                    <strong>Buyer:</strong> {{ order.buyer?.name || 'N/A' }}
-                                                </div>
-                                                <div>
-                                                    <strong>Receiver:</strong> {{ order.receiver?.name || 'N/A' }}
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </TableCell>
-                                </TableRow>
-                            </template>
-                        </template>
-
-                        <TableRow v-else>
-                            <TableCell colspan="7" class="h-24 text-center">
-                                No orders found.
-                            </TableCell>
-                        </TableRow>
-                    </TableBody>
-                </Table>
-            </div>
-
-            <!-- Pagination -->
-            <div class="flex items-center justify-between">
-                <div class="text-sm text-muted-foreground">
-                    Page {{ orders.current_page }} of {{ orders.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>
-    </App>
-</template>
Index: sources/js/Pages/Product.vue
===================================================================
--- resources/js/Pages/Product.vue	(revision 493b218696760be36468e7a224861a03e0952211)
+++ 	(revision )
@@ -1,269 +1,0 @@
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-import { router } from '@inertiajs/vue3'
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } 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"
-
-interface Product {
-    id: string
-    name: string
-    description?: string
-    hs_code?: string
-    price: number
-    unit_of_measure?: string
-    producer?: {
-        name: string
-        email?: string
-    }
-    orders_count?: number
-}
-
-interface PaginatedData {
-    data: Product[]
-    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 Props {
-    products: PaginatedData
-    filters: {
-        search?: string
-        sort_by: string
-        sort_direction: string
-        per_page: number
-    }
-}
-
-const props = defineProps<Props>()
-
-// Reactive search
-const search = ref(props.filters.search || '')
-const perPage = ref(props.filters.per_page)
-
-// Debounced search function
-const debouncedSearch = debounce((value: string) => {
-    router.get('/products', {
-        search: value,
-        per_page: perPage.value
-    }, {
-        preserveState: true,
-        replace: true
-    })
-}, 300)
-
-// Watch for search changes
-watch(search, (newValue) => {
-    debouncedSearch(newValue)
-})
-
-// Watch for changes per page
-watch(perPage, (newValue) => {
-    router.get('/products', {
-        search: search.value,
-        per_page: newValue,
-        page: 1 // Reset to the first page
-    }, {
-        preserveState: true,
-        replace: true
-    })
-})
-
-// Pagination functions
-const goToPage = (page: number) => {
-    router.get('/products', {
-        search: search.value,
-        per_page: perPage.value,
-        page
-    }, {
-        preserveState: true
-    })
-}
-
-const goToFirstPage = () => goToPage(1)
-const goToLastPage = () => goToPage(props.products.last_page)
-const goToPreviousPage = () => goToPage(props.products.current_page - 1)
-const goToNextPage = () => goToPage(props.products.current_page + 1)
-
-// Helper functions
-const canGoPrevious = () => props.products.current_page > 1
-const canGoNext = () => props.products.current_page < props.products.last_page
-
-// Expanded rows
-const expandedRows = ref(new Set<string>())
-
-const toggleRowExpansion = (productId: string) => {
-    if (expandedRows.value.has(productId)) {
-        expandedRows.value.delete(productId)
-    } else {
-        expandedRows.value.add(productId)
-    }
-}
-</script>
-
-<template>
-    <App>
-        <template #title>Products</template>
-
-        <div class="w-full space-y-4">
-            <!-- Search and Controls -->
-            <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 products..."
-                    />
-                    <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>
-                </div>
-
-                <!-- Results info -->
-                <div class="text-sm text-muted-foreground">
-                    Showing {{ products.from }} to {{ products.to }} of {{ products.total }} results
-                </div>
-            </div>
-
-            <!-- Table -->
-            <div class="rounded-md border">
-                <Table>
-                    <TableHeader>
-                        <TableRow>
-                            <TableHead>ID</TableHead>
-                            <TableHead>Name</TableHead>
-                            <TableHead>HS Code</TableHead>
-                            <TableHead>Price</TableHead>
-                            <TableHead>Unit</TableHead>
-                            <TableHead>Producer</TableHead>
-                            <TableHead>Orders</TableHead>
-                            <TableHead>Actions</TableHead>
-                        </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                        <template v-if="products.data.length">
-                            <template v-for="product in products.data" :key="product.id">
-                                <TableRow
-                                    class="cursor-pointer hover:bg-muted/50"
-                                    @click="toggleRowExpansion(product.id)"
-                                >
-                                    <TableCell class="font-mono text-xs">{{ product.id.substring(0, 8) }}...</TableCell>
-                                    <TableCell class="font-medium">{{ product.name }}</TableCell>
-                                    <TableCell class="font-mono">{{ product.hs_code || 'N/A' }}</TableCell>
-                                    <TableCell>${{ product.price.toFixed(2) }}</TableCell>
-                                    <TableCell>{{ product.unit_of_measure || 'N/A' }}</TableCell>
-                                    <TableCell>{{ product.producer?.name || 'N/A' }}</TableCell>
-                                    <TableCell>{{ product.orders_count || 0 }}</TableCell>
-                                    <TableCell>
-                                        <Button variant="ghost" size="sm">
-                                            {{ expandedRows.has(product.id) ? 'Hide' : 'Show' }} Details
-                                        </Button>
-                                    </TableCell>
-                                </TableRow>
-
-                                <!-- Expanded row content -->
-                                <TableRow v-if="expandedRows.has(product.id)" class="bg-muted/20">
-                                    <TableCell :colspan="8" class="p-4">
-                                        <div class="space-y-2">
-                                            <h4 class="font-semibold">Product Details</h4>
-                                            <div class="grid grid-cols-2 gap-4 text-sm">
-                                                <div>
-                                                    <strong>Full Product ID:</strong><br>
-                                                    <span class="font-mono text-xs">{{ product.id }}</span>
-                                                </div>
-                                                <div>
-                                                    <strong>Producer Email:</strong><br>
-                                                    {{ product.producer?.email || 'N/A' }}
-                                                </div>
-                                                <div class="col-span-2">
-                                                    <strong>Description:</strong><br>
-                                                    {{ product.description || 'No description available' }}
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </TableCell>
-                                </TableRow>
-                            </template>
-                        </template>
-
-                        <TableRow v-else>
-                            <TableCell colspan="8" class="h-24 text-center">
-                                No products found.
-                            </TableCell>
-                        </TableRow>
-                    </TableBody>
-                </Table>
-            </div>
-
-            <!-- Pagination -->
-            <div class="flex items-center justify-between">
-                <div class="text-sm text-muted-foreground">
-                    Page {{ products.current_page }} of {{ products.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>
-    </App>
-</template>
Index: sources/js/Pages/Transport.vue
===================================================================
--- resources/js/Pages/Transport.vue	(revision 493b218696760be36468e7a224861a03e0952211)
+++ 	(revision )
@@ -1,87 +1,0 @@
-<script setup lang="ts">
-import GenericCrud from '@/components/GenericCrud.vue'
-import type {CrudConfig} from '@/types/crud'
-
-interface Props {
-    transports: any
-    filters: any
-}
-
-const props = defineProps<Props>()
-
-const config: CrudConfig = {
-    title: 'Transports',
-    endpoint: '/transports',
-    searchPlaceholder: 'Search transports...',
-    columns: [
-        {
-            key: 'carrier_name',
-            label: 'Carrier',
-            sortable: true
-        },
-        {
-            key: 'route',
-            label: 'Route',
-            formatter: (value, row) => `${row.departure_point} → ${row.arrival_point}`
-        },
-        {
-            key: 'estimated_departure_date',
-            label: 'Departure Date',
-            sortable: true,
-            formatter: (value) => value ? new Date(value).toLocaleDateString() : 'Not set'
-        },
-        {
-            key: 'estimated_arrival_date',
-            label: 'Arrival Date',
-            sortable: true,
-            formatter: (value) => value ? new Date(value).toLocaleDateString() : 'Not set'
-        },
-        {
-            key: 'incoterm',
-            label: 'Incoterm',
-            formatter: (value) => value || 'N/A'
-        },
-        {
-            key: 'created_at',
-            label: 'Created',
-            sortable: true,
-            formatter: (value) => new Date(value).toLocaleDateString()
-        }
-    ],
-    expandedSections: [
-        {
-            title: 'Transport Details',
-            fields: [
-                {key: 'carrier_name', label: 'Carrier'},
-                {key: 'incoterm', label: 'Incoterm'},
-                {key: 'departure_point', label: 'Departure Point'},
-                {key: 'arrival_point', label: 'Arrival Point'},
-                {
-                    key: 'estimated_departure_date',
-                    label: 'Est. Departure',
-                    formatter: (value) => value ? new Date(value).toLocaleDateString() : 'Not set'
-                },
-                {
-                    key: 'estimated_arrival_date',
-                    label: 'Est. Arrival',
-                    formatter: (value) => value ? new Date(value).toLocaleDateString() : 'Not set'
-                },
-                {
-                    key: 'insurance_conditions',
-                    label: 'Insurance Conditions',
-                    span: 2,
-                    formatter: (value) => value || 'Not specified'
-                }
-            ]
-        }
-    ]
-}
-</script>
-
-<template>
-    <GenericCrud
-        :data="transports"
-        :filters="filters"
-        :config="config"
-    />
-</template>
Index: sources/js/lib/utils.js
===================================================================
--- resources/js/lib/utils.js	(revision 493b218696760be36468e7a224861a03e0952211)
+++ 	(revision )
@@ -1,4 +1,0 @@
-// resources/js/lib/utils.js
-export function cn(...classes) {
-    return classes.filter(Boolean).join(" ");
-}
Index: resources/js/lib/utils.ts
===================================================================
--- resources/js/lib/utils.ts	(revision 93774cc2874f890ea669f15b97fa469770024559)
+++ resources/js/lib/utils.ts	(revision 93774cc2874f890ea669f15b97fa469770024559)
@@ -0,0 +1,19 @@
+import {clsx, ClassValue} from 'clsx'
+import {twMerge} from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
+
+export function toCamelCase(str: string): string {
+    return str.replace(/([-_]\w)/g, (g) => g[1].toUpperCase());
+}
+
+export function formatLabel(str: string): string {
+    // Replace underscores with spaces and capitalize the first letter of each word
+    const words = str.replace(/_/g, ' ').split(' ');
+    const formattedWords = words.map((word) => {
+        return word.charAt(0).toUpperCase() + word.slice(1);
+    });
+    return formattedWords.join(' ');
+}
Index: routes/web.php
===================================================================
--- routes/web.php	(revision 493b218696760be36468e7a224861a03e0952211)
+++ routes/web.php	(revision 93774cc2874f890ea669f15b97fa469770024559)
@@ -14,7 +14,9 @@
     Route::post('/logout', [AuthController::class, 'logout'])->name('logout');
 
-    Route::get('/products', [ProductController::class, 'products'])->name('products');
-    Route::get('/orders', [OrderController::class, 'orders'])->name('orders');
-    Route::get('/clients', [ClientController::class, 'index'])->name('clients');
-    //Route::get('/transports', [TransportController::class, 'transports'])->name('transports');
+    Route::prefix('{model}')->group(function () {
+        Route::get('/', [GenericModelController::class, 'index'])->name('generic.index');
+        Route::post('/', [GenericModelController::class, 'store'])->name('generic.store');
+        Route::put('/{id}', [GenericModelController::class, 'update'])->name('generic.update');
+        Route::delete('/{id}', [GenericModelController::class, 'destroy'])->name('generic.destroy');
+    });
 });
