Index: .gitignore
===================================================================
--- .gitignore	(revision 1b0a9e621d4ba756e16a5283b7e9ce7ec8d06985)
+++ .gitignore	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -52,2 +52,5 @@
 *.pgsql
 *.bak
+
+# User seeder
+database/seeders/UserSeeder.php
Index: app/Http/Controllers/BatchController.php
===================================================================
--- app/Http/Controllers/BatchController.php	(revision 493b218696760be36468e7a224861a03e0952211)
+++ app/Http/Controllers/BatchController.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,65 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Batch;
+use Illuminate\Http\Request;
+
+class BatchController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        //
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(Batch $batch)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     */
+    public function edit(Batch $batch)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, Batch $batch)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(Batch $batch)
+    {
+        //
+    }
+}
Index: app/Http/Controllers/ClientController.php
===================================================================
--- app/Http/Controllers/ClientController.php	(revision 1b0a9e621d4ba756e16a5283b7e9ce7ec8d06985)
+++ app/Http/Controllers/ClientController.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -5,4 +5,5 @@
 use App\Models\Client;
 use Illuminate\Http\Request;
+use Inertia\Inertia;
 
 class ClientController extends Controller
@@ -11,7 +12,42 @@
      * Display a listing of the resource.
      */
-    public function index()
+    public function index(Request $request)
     {
-        //
+        $query = Client::query();
+
+        // Add search functionality
+        if ($request->has('search') && $request->search) {
+            $query->where(function ($q) use ($request) {
+                $q->where('client_name', 'like', '%' . $request->search . '%')
+                    ->orWhere('country', 'like', '%' . $request->search . '%')
+                    ->orWhere('registration_number', 'like', '%' . $request->search . '%')
+                    ->orWhere('tax_id', 'like', '%' . $request->search . '%')
+                    ->orWhere('contact_person', 'like', '%' . $request->search . '%')
+                    ->orWhere('phone_number', 'like', '%' . $request->search . '%')
+                    ->orWhere('billing_address', 'like', '%' . $request->search . '%')
+                    ->orWhere('shipping_address', 'like', '%' . $request->search . '%');
+            });
+        }
+
+        // Add sorting
+        $sortBy = $request->get('sort_by', 'created_at');
+        $sortDirection = $request->get('sort_direction', 'desc');
+        $query->orderBy($sortBy, $sortDirection);
+
+        // Paginate results
+        $clients = $query->paginate(
+            perPage: $request->get('per_page', 10),
+            page: $request->get('page', 1)
+        )->withQueryString(); // Preserve query parameters
+
+        return Inertia::render('Client', [
+            'clients' => $clients,
+            'filters' => [
+                'search' => $request->search,
+                'sort_by' => $sortBy,
+                'sort_direction' => $sortDirection,
+                'per_page' => $request->get('per_page', 10)
+            ]
+        ]);
     }
 
@@ -21,5 +57,5 @@
     public function create()
     {
-        //
+        //return Inertia::render('Client/Create');
     }
 
@@ -29,5 +65,19 @@
     public function store(Request $request)
     {
-        //
+        $validated = $request->validate([
+            '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',
+        ]);
+
+        Client::create($validated);
+
+        return redirect()->route('clients.index')
+            ->with('success', 'Client created successfully.');
     }
 
@@ -35,7 +85,11 @@
      * Display the specified resource.
      */
-    public function show(Client $company)
+    public function show(string $id)
     {
-        //
+//        $client = Client::with(['buyerOrders', 'receiverOrders'])->findOrFail($id);
+//
+//        return Inertia::render('Client/Show', [
+//            'client' => $client,
+//        ]);
     }
 
@@ -43,7 +97,11 @@
      * Show the form for editing the specified resource.
      */
-    public function edit(Client $company)
+    public function edit(string $id)
     {
-        //
+//        $client = Client::findOrFail($id);
+//
+//        return Inertia::render('Client/Edit', [
+//            'client' => $client,
+//        ]);
     }
 
@@ -51,7 +109,23 @@
      * Update the specified resource in storage.
      */
-    public function update(Request $request, Client $company)
+    public function update(Request $request, string $id)
     {
-        //
+        $client = Client::findOrFail($id);
+
+        $validated = $request->validate([
+            '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',
+        ]);
+
+        $client->update($validated);
+
+        return redirect()->route('clients.index')
+            ->with('success', 'Client updated successfully.');
     }
 
@@ -59,7 +133,34 @@
      * Remove the specified resource from storage.
      */
-    public function destroy(Client $company)
+//    public function destroy(string $id)
+//    {
+//        $client = Client::findOrFail($id);
+//
+//        // Check if the client has any orders before deletion
+//        if ($client->buyerOrders()->exists() || $client->receiverOrders()->exists()) {
+//            return redirect()->route('clients.index')
+//                ->with('error', 'Cannot delete client with existing orders.');
+//        }
+//
+//        $client->delete();
+//
+//        return redirect()->route('clients.index')
+//            ->with('success', 'Client deleted successfully.');
+//    }
+
+    /**
+     * Get clients for dropdowns/select options
+     */
+    public function getClientsForSelect(Request $request)
     {
-        //
+        $query = Client::select('id', 'client_name', 'country');
+
+        if ($request->has('search') && $request->search) {
+            $query->where('client_name', 'like', '%' . $request->search . '%');
+        }
+
+        $clients = $query->orderBy('client_name')->limit(50)->get();
+
+        return response()->json($clients);
     }
 }
Index: app/Http/Controllers/CrudController.php
===================================================================
--- app/Http/Controllers/CrudController.php	(revision 493b218696760be36468e7a224861a03e0952211)
+++ app/Http/Controllers/CrudController.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,91 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Str;
+use Inertia\Inertia;
+
+class CrudController extends Controller
+{
+    protected function resolveModel(string $model)
+    {
+        $class = 'App\\Models\\' . Str::studly(Str::singular($model));
+
+        if (!class_exists($class)) {
+            abort(404, "Model [$class] not found.");
+        }
+
+        return new $class;
+    }
+
+    public function index(Request $request, string $model)
+    {
+        $instance = $this->resolveModel($model);
+
+        $items = $instance->query()->paginate(10);
+        $fields = $instance->getFillable();
+
+        return Inertia::render('Crud/Index', [
+            'model' => $model,
+            'items' => $items,
+            'fields' => $fields,
+        ]);
+    }
+
+    public function create(string $model)
+    {
+        $instance = $this->resolveModel($model);
+
+        return Inertia::render('Crud/Form', [
+            'model' => $model,
+            'fields' => $instance->getFillable(),
+            'item' => null,
+        ]);
+    }
+
+    public function store(Request $request, string $model)
+    {
+        $instance = $this->resolveModel($model);
+
+        $data = $request->validate(
+            array_fill_keys($instance->getFillable(), 'required')
+        );
+
+        $instance->create($data);
+
+        return redirect()->route('crud.index', $model);
+    }
+
+    public function edit(string $model, $id)
+    {
+        $instance = $this->resolveModel($model)->findOrFail($id);
+
+        return Inertia::render('Crud/Form', [
+            'model' => $model,
+            'fields' => $instance->getFillable(),
+            'item' => $instance,
+        ]);
+    }
+
+    public function update(Request $request, string $model, $id)
+    {
+        $instance = $this->resolveModel($model)->findOrFail($id);
+
+        $data = $request->validate(
+            array_fill_keys($instance->getFillable(), 'required')
+        );
+
+        $instance->update($data);
+
+        return redirect()->route('crud.index', $model);
+    }
+
+    public function destroy(string $model, $id)
+    {
+        $instance = $this->resolveModel($model)->findOrFail($id);
+        $instance->delete();
+
+        return redirect()->route('crud.index', $model);
+    }
+}
Index: app/Http/Controllers/DashboardController.php
===================================================================
--- app/Http/Controllers/DashboardController.php	(revision 1b0a9e621d4ba756e16a5283b7e9ce7ec8d06985)
+++ app/Http/Controllers/DashboardController.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -2,4 +2,5 @@
 
 namespace App\Http\Controllers;
+
 use Illuminate\Http\Request;
 use Inertia\Inertia;
@@ -12,5 +13,5 @@
     public function index()
     {
-        return Inertia::render('Dashboard/Index');
+        return Inertia::render('Dashboard');
     }
 
Index: app/Http/Controllers/PackingListController.php
===================================================================
--- app/Http/Controllers/PackingListController.php	(revision 493b218696760be36468e7a224861a03e0952211)
+++ app/Http/Controllers/PackingListController.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,65 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\PackingList;
+use Illuminate\Http\Request;
+
+class PackingListController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        //
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(PackingList $packingList)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     */
+    public function edit(PackingList $packingList)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, PackingList $packingList)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(PackingList $packingList)
+    {
+        //
+    }
+}
Index: app/Http/Controllers/ProductController.php
===================================================================
--- app/Http/Controllers/ProductController.php	(revision 1b0a9e621d4ba756e16a5283b7e9ce7ec8d06985)
+++ app/Http/Controllers/ProductController.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -39,5 +39,5 @@
         )->withQueryString(); // Preserve query parameters
 
-        return Inertia::render('Product/Index', [
+        return Inertia::render('Product', [
             'products' => $products,
             'filters' => [
Index: app/Http/Controllers/TransportController.php
===================================================================
--- app/Http/Controllers/TransportController.php	(revision 493b218696760be36468e7a224861a03e0952211)
+++ app/Http/Controllers/TransportController.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class TransportController extends Controller
+{
+    //
+}
Index: app/Models/Batch.php
===================================================================
--- app/Models/Batch.php	(revision 493b218696760be36468e7a224861a03e0952211)
+++ app/Models/Batch.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Concerns\HasUuids;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
+
+class Batch extends Model
+{
+    use HasFactory, HasUuids;
+
+    protected $primaryKey = 'id';
+    public $incrementing = false;
+    protected $keyType = 'string';
+
+    protected $fillable = [
+        'product_id',
+        'batch_code',
+        'production_date',
+        'expiration_date',
+        'net_weight',
+        'gross_weight',
+        'units_per_batch'
+    ];
+
+    public function product(): BelongsTo
+    {
+        return $this->belongsTo(Product::class);
+    }
+
+    public function orders(): BelongsToMany
+    {
+        return $this->belongsToMany(Order::class, 'order_products')
+            ->withPivot('quantity')
+            ->withTimestamps();
+    }
+}
Index: app/Models/Order.php
===================================================================
--- app/Models/Order.php	(revision 1b0a9e621d4ba756e16a5283b7e9ce7ec8d06985)
+++ app/Models/Order.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -7,4 +7,5 @@
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 
 class Order extends Model
@@ -51,8 +52,27 @@
     }
 
+    public function products():BelongsToMany
+    {
+        return $this->belongsToMany(Product::class, 'order_products')
+            ->withPivot('quantity', 'price_per_unit', 'total_price')
+            ->withTimestamps();
+    }
+
+    public function batches(): BelongsToMany
+    {
+        return $this->belongsToMany(Batch::class, 'order_batches')
+            ->withPivot('quantity')
+            ->withTimestamps();
+    }
+
+    public function packingList()
+    {
+        return $this->hasOne(PackingList::class);
+    }
+
     // Helper to calculate the total amount
-    public function getTotalAmountAttribute(): float
-    {
-        return $this->products->sum('pivot.total_price') ?? 0;
-    }
+//    public function getTotalAmountAttribute(): float
+//    {
+//        return $this->products->sum('pivot.total_price') ?? 0;
+//    }
 }
Index: app/Models/PackingList.php
===================================================================
--- app/Models/PackingList.php	(revision 493b218696760be36468e7a224861a03e0952211)
+++ app/Models/PackingList.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Concerns\HasUuids;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class PackingList extends Model
+{
+    use HasFactory, HasUuids;
+
+    protected $primaryKey = 'id';
+    public $incrementing = false;
+    protected $keyType = 'string';
+
+    protected $fillable = [
+        'order_id',
+        'packing_list_date',
+        'status'
+    ];
+
+    public function order(): BelongsTo
+    {
+        return $this->belongsTo(Order::class, 'order_id');
+    }
+}
Index: app/Models/Producer.php
===================================================================
--- app/Models/Producer.php	(revision 1b0a9e621d4ba756e16a5283b7e9ce7ec8d06985)
+++ app/Models/Producer.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -6,4 +6,5 @@
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 
@@ -27,3 +28,10 @@
         return $this->hasMany(Product::class, 'producer_id');
     }
+
+    public function orders(): BelongsToMany
+    {
+        return $this->belongsToMany(Order::class, 'order_products')
+            ->withPivot('quantity', 'price')
+            ->withTimestamps();
+    }
 }
Index: app/Models/Product.php
===================================================================
--- app/Models/Product.php	(revision 1b0a9e621d4ba756e16a5283b7e9ce7ec8d06985)
+++ app/Models/Product.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -8,4 +8,5 @@
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\BelongsToMany;
+use Illuminate\Database\Eloquent\Relations\HasMany;
 
 class Product extends Model
@@ -38,3 +39,8 @@
         return $this->belongsToMany(Order::class, 'order_products', 'product_id', 'order_id');
     }
+
+    public function batches(): HasMany
+    {
+        return $this->hasMany(Batch::class);
+    }
 }
Index: app/Traits/CrudTrait.php
===================================================================
--- app/Traits/CrudTrait.php	(revision 493b218696760be36468e7a224861a03e0952211)
+++ app/Traits/CrudTrait.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Traits;
+
+use Illuminate\Support\Facades\Schema;
+
+trait CrudTrait
+{
+    public static function getCrudFields(): array
+    {
+        $table = (new static)->getTable();
+        $columns = Schema::getColumnListing($table);
+
+        // You can filter out unwanted columns like timestamps, id, etc.
+        return array_values(array_diff($columns, ['id', 'created_at', 'updated_at', 'deleted_at']));
+    }
+}
Index: database/factories/BatchFactory.php
===================================================================
--- database/factories/BatchFactory.php	(revision 493b218696760be36468e7a224861a03e0952211)
+++ database/factories/BatchFactory.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,31 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Models\Batch;
+use App\Models\Product;
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class BatchFactory extends Factory
+{
+    protected $model = Batch::class;
+
+    public function definition(): array
+    {
+        $product = Product::query()->exists()
+            ? Product::query()->inRandomOrder()->first()
+            : Product::factory()->create();
+
+        $createdAt = $this->faker->dateTimeBetween('-6 months', 'now');
+
+        return [
+            'product_id' => $product->id,
+            'batch_code' => strtoupper($this->faker->bothify('BATCH-#####')),
+            'production_date' => $createdAt,
+            'expiration_date' => $this->faker->dateTimeBetween($createdAt, '+1 year'),
+            'gross_weight' => $this->faker->randomFloat(2, 100, 1000),
+            'net_weight' => $this->faker->randomFloat(2, 80, 950),
+            'units_per_batch' => 100000,
+        ];
+    }
+}
Index: tabase/factories/OrderFactory.php
===================================================================
--- database/factories/OrderFactory.php	(revision 1b0a9e621d4ba756e16a5283b7e9ce7ec8d06985)
+++ 	(revision )
@@ -1,46 +1,0 @@
-<?php
-
-namespace Database\Factories;
-
-use App\Models\Order;
-use App\Models\Client;
-use App\Models\Transport;
-use Illuminate\Database\Eloquent\Factories\Factory;
-
-/**
- * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Order>
- */
-class OrderFactory extends Factory
-{
-    protected $model = Order::class;
-
-    public function definition(): array
-    {
-        $statuses = ['pending', 'processing', 'shipped', 'delivered'];
-        $date = $this->faker->dateTimeBetween('-30 days', 'now');
-        $estimatedDelivery = $this->faker->dateTimeBetween($date, '+30 days');
-
-        return [
-            'buyer_id' => Client::factory(),
-            'receiver_id' => Client::factory(),
-            'transport_id' => Transport::factory(),
-            'date' => $date,
-            'status' => $this->faker->randomElement($statuses),
-            'estimated_delivery_date' => $estimatedDelivery,
-        ];
-    }
-
-    public function pending(): static
-    {
-        return $this->state(fn (array $attributes) => [
-            'status' => 'pending',
-        ]);
-    }
-
-    public function delivered(): static
-    {
-        return $this->state(fn (array $attributes) => [
-            'status' => 'delivered',
-        ]);
-    }
-}
Index: tabase/factories/PaymentFactory.php
===================================================================
--- database/factories/PaymentFactory.php	(revision 1b0a9e621d4ba756e16a5283b7e9ce7ec8d06985)
+++ 	(revision )
@@ -1,138 +1,0 @@
-<?php
-
-namespace Database\Factories;
-
-use App\Models\Order;
-use App\Models\Payment;
-use Illuminate\Database\Eloquent\Factories\Factory;
-
-/**
- * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Payment>
- */
-class PaymentFactory extends Factory
-{
-    /**
-     * Define the model's default state.
-     *
-     * @return array<string, mixed>
-     */
-    public function definition(): array
-    {
-        $currencies = ['USD', 'EUR', 'RUB', 'CNY', 'MKD'];
-        $paymentMethods = ['credit_card', 'debit_card', 'bank_transfer', 'paypal', 'stripe', 'cash'];
-        $paymentStatuses = ['pending', 'processing', 'completed', 'failed', 'cancelled', 'refunded'];
-
-        $dueDate = $this->faker->dateTimeBetween('-30 days', '+60 days');
-        $currency = $this->faker->randomElement($currencies);
-
-        // Exchange rates to MKD (Macedonian Denar)
-        $exchangeRates = [
-            'USD' => 57.50,   // 1 USD ≈ 57.50 MKD
-            'EUR' => 61.50,   // 1 EUR ≈ 61.50 MKD
-            'RUB' => 0.62,    // 1 RUB ≈ 0.62 MKD
-            'CNY' => 8.00,    // 1 CNY ≈ 8.00 MKD
-            'MKD' => 1.0000,  // 1 MKD = 1 MKD
-        ];
-
-        return [
-            'amount' => $this->faker->randomFloat(2, 10, 5000),
-            'currency' => $currency,
-            'due_date' => $dueDate,
-            'exchange_rate' => $exchangeRates[$currency] ?? $this->faker->randomFloat(4, 1, 100),
-            'payment_date' => $this->faker->optional(0.7)->dateTimeBetween(
-                min($dueDate, new \DateTime('now')),
-                max($dueDate, new \DateTime('now'))
-            ),
-            'payment_method' => $this->faker->randomElement($paymentMethods),
-            'payment_status' => $this->faker->randomElement($paymentStatuses),
-            'order_id' => Order::factory(),
-        ];
-    }
-
-    /**
-     * Indicate that the payment is completed.
-     */
-    public function completed(): static
-    {
-        return $this->state(fn (array $attributes) => [
-            'payment_status' => 'completed',
-            'payment_date' => $this->faker->dateTimeBetween(
-                min($attributes['due_date'], new \DateTime('now')),
-                'now'
-            ),
-        ]);
-    }
-
-    /**
-     * Indicate that the payment is pending.
-     */
-    public function pending(): static
-    {
-        return $this->state(fn (array $attributes) => [
-            'payment_status' => 'pending',
-            'payment_date' => null,
-        ]);
-    }
-
-    /**
-     * Indicate that the payment is overdue.
-     */
-    public function overdue(): static
-    {
-        return $this->state(fn (array $attributes) => [
-            'payment_status' => 'pending',
-            'due_date' => $this->faker->dateTimeBetween('-30 days', '-1 day'),
-            'payment_date' => null,
-        ]);
-    }
-
-    /**
-     * Indicate that the payment is failed.
-     */
-    public function failed(): static
-    {
-        return $this->state(fn (array $attributes) => [
-            'payment_status' => 'failed',
-            'payment_date' => $this->faker->dateTimeBetween($attributes['due_date'], 'now'),
-        ]);
-    }
-
-    /**
-     * Set a specific currency with an appropriate exchange rate to MKD.
-     */
-    public function currency(string $currency): static
-    {
-        $exchangeRates = [
-            'USD' => 57.50,   // 1 USD ≈ 57.50 MKD
-            'EUR' => 61.50,   // 1 EUR ≈ 61.50 MKD
-            'RUB' => 0.62,    // 1 RUB ≈ 0.62 MKD
-            'CNY' => 8.00,    // 1 CNY ≈ 8.00 MKD
-            'MKD' => 1.0000,  // 1 MKD = 1 MKD
-        ];
-
-        return $this->state(fn (array $attributes) => [
-            'currency' => $currency,
-            'exchange_rate' => $exchangeRates[$currency] ?? $this->faker->randomFloat(4, 1, 100),
-        ]);
-    }
-
-    /**
-     * Set a specific amount range.
-     */
-    public function amount(float $min = 10, float $max = 5000): static
-    {
-        return $this->state(fn (array $attributes) => [
-            'amount' => $this->faker->randomFloat(2, $min, $max),
-        ]);
-    }
-
-    /**
-     * Associate with an existing order.
-     */
-    public function forOrder(Order $order): static
-    {
-        return $this->state(fn (array $attributes) => [
-            'order_id' => $order->id,
-        ]);
-    }
-}
Index: database/migrations/2025_08_14_120500_create_batches_table.php
===================================================================
--- database/migrations/2025_08_14_120500_create_batches_table.php	(revision 493b218696760be36468e7a224861a03e0952211)
+++ database/migrations/2025_08_14_120500_create_batches_table.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('batches', function (Blueprint $table) {
+            $table->uuid('id')->primary();
+            $table->uuid('product_id');
+            $table->string('batch_code')->unique();
+            $table->date('production_date');
+            $table->date('expiration_date');
+            $table->decimal('net_weight', 10, 2);
+            $table->decimal('gross_weight', 10, 2);
+            $table->integer('units_per_batch')->default(100000);
+            $table->timestamps();
+
+            $table->foreign('product_id')->references('id')->on('products')->onDelete('cascade');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('batches');
+    }
+};
Index: database/migrations/2025_08_14_120623_create_order_batches_table.php
===================================================================
--- database/migrations/2025_08_14_120623_create_order_batches_table.php	(revision 493b218696760be36468e7a224861a03e0952211)
+++ database/migrations/2025_08_14_120623_create_order_batches_table.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('order_batches', function (Blueprint $table) {
+            $table->uuid('id')->primary();
+            $table->uuid('order_id');
+            $table->uuid('batch_id');
+            $table->integer('quantity');
+            $table->timestamps();
+
+            $table->foreign('order_id')->references('id')->on('orders')->onDelete('cascade');
+            $table->foreign('batch_id')->references('id')->on('batches')->onDelete('cascade');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('order_batches');
+    }
+};
Index: database/migrations/2025_08_14_121316_create_packing_lists_table.php
===================================================================
--- database/migrations/2025_08_14_121316_create_packing_lists_table.php	(revision 493b218696760be36468e7a224861a03e0952211)
+++ database/migrations/2025_08_14_121316_create_packing_lists_table.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('packing_lists', function (Blueprint $table) {
+            $table->uuid('id')->primary();
+            $table->uuid('order_id');
+            $table->date('packing_list_date');
+            $table->string('status')->nullable();
+            $table->timestamps();
+
+            $table->foreign('order_id')->references('id')->on('orders')->onDelete('cascade');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('packing_lists');
+    }
+};
Index: database/seeders/BatchSeeder.php
===================================================================
--- database/seeders/BatchSeeder.php	(revision 493b218696760be36468e7a224861a03e0952211)
+++ database/seeders/BatchSeeder.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,35 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Batch;
+use App\Models\Product;
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Str;
+
+class BatchSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        $products = Product::all();
+
+        foreach ($products as $product) {
+            for ($i = 0; $i <= 3; $i++) {
+                Batch::create([
+                    'id' => Str::uuid(),
+                    'product_id' => $product->id,
+                    'batch_code' => 'BATCH-' . strtoupper(Str::random(6)),
+                    'production_date' => now()->subDays(rand(10, 100)),
+                    'expiration_date' => now()->addMonths(rand(6, 18)),
+                    'net_weight' => 1.5,
+                    'gross_weight' => 1.7,
+                    'units_per_batch' => 100000,
+                ]);
+            }
+        }
+    }
+}
Index: database/seeders/ClientSeeder.php
===================================================================
--- database/seeders/ClientSeeder.php	(revision 1b0a9e621d4ba756e16a5283b7e9ce7ec8d06985)
+++ database/seeders/ClientSeeder.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -11,33 +11,5 @@
     public function run(): void
     {
-        $clients = [
-            [
-                'id' => (string) Str::uuid(),
-                'client_name' => 'Acme Corp',
-                'country' => 'USA',
-                'registration_number' => '123456789',
-                'tax_id' => 'TAX123456',
-                'contact_person' => 'John Doe',
-                'phone_number' => '+1-555-1234',
-                'billing_address' => '123 Acme St, New York, NY',
-                'shipping_address' => '456 Acme Warehouse, New York, NY',
-            ],
-            [
-                'id' => (string) Str::uuid(),
-                'client_name' => 'Globex Ltd',
-                'country' => 'UK',
-                'registration_number' => '987654321',
-                'tax_id' => 'TAX987654',
-                'contact_person' => 'Jane Smith',
-                'phone_number' => '+44-20-1234-5678',
-                'billing_address' => '789 Globex Rd, London',
-                'shipping_address' => '101 Globex Distribution, London',
-            ],
-            // Add more clients as needed
-        ];
-
-        foreach ($clients as $company) {
-            Client::create($company);
-        }
+        Client::factory()->count(15)->create();
     }
 }
Index: database/seeders/DatabaseSeeder.php
===================================================================
--- database/seeders/DatabaseSeeder.php	(revision 1b0a9e621d4ba756e16a5283b7e9ce7ec8d06985)
+++ database/seeders/DatabaseSeeder.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -3,36 +3,18 @@
 namespace Database\Seeders;
 
-use App\Models\Buyer;
-use App\Models\Order;
-use App\Models\Payment;
-use App\Models\Producer;
-use App\Models\Product;
-use App\Models\Receiver;
-use App\Models\Transport;
-use App\Models\User;
-// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
 use Illuminate\Database\Seeder;
 
 class DatabaseSeeder extends Seeder
 {
-    /**
-     * Seed the application's database.
-     */
     public function run(): void
     {
-        // User::factory(10)->create();
-
-        User::factory()->create([
-            'name' => 'Test User',
-            'email' => 'test@example.com',
+        // Keep the dataset minimal and CRUD-friendly
+        $this->call([
+            UserSeeder::class,
+            ProducerAndProductSeeder::class,
+            BatchSeeder::class,
+            ClientSeeder::class,
+            TransportSeeder::class,
         ]);
-
-        //Buyer::factory(10)->create();
-        Order::factory(10)->create();
-        Payment::factory(10)->create();
-        Product::factory(10)->create();
-        Producer::factory(10)->create();
-        //Receiver::factory(10)->create();
-        Transport::factory(10)->create();
     }
 }
Index: database/seeders/OrderBatchSeeder.php
===================================================================
--- database/seeders/OrderBatchSeeder.php	(revision 493b218696760be36468e7a224861a03e0952211)
+++ database/seeders/OrderBatchSeeder.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,51 @@
+<?php
+
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Str;
+use Illuminate\Support\Facades\DB;
+use App\Models\Order;
+use App\Models\Product;
+use App\Models\Batch;
+
+class OrderBatchSeeder extends Seeder
+{
+    public function run(): void
+    {
+        $orders = Order::all();
+        $products = Product::all();
+
+        if ($orders->isEmpty() || $products->isEmpty()) {
+            $this->command->warn('No orders or products found.');
+            return;
+        }
+
+        foreach ($orders as $order) {
+            // pick 1-3 random products for this order
+            $picked = $products->random(rand(1, min(3, $products->count())));
+            foreach ($picked as $product) {
+                // choose batches for this product
+                $batches = Batch::where('product_id', $product->id)->inRandomOrder()->get();
+                if ($batches->isEmpty()) continue;
+                // allocate a total quantity for this product in order
+                $remainingQty = rand(100, 10000); // number of units to ship for this product
+                foreach ($batches as $batch) {
+                    if ($remainingQty <= 0) break;
+                    // take between 1 and min(remainingQty, 5000)
+                    $take = rand(1, min($remainingQty, 5000));
+                    // insert into order_batches (we include UUID for id)
+                    DB::table('order_batches')->insert([
+                        'id' => (string)Str::uuid(),
+                        'order_id' => $order->id,
+                        'batch_id' => $batch->id,
+                        'quantity' => $take,
+                        'created_at' => now(),
+                        'updated_at' => now(),
+                    ]);
+                    $remainingQty -= $take;
+                }
+            }
+        }
+
+        $this->command->info('Order batches seeded.');
+    }
+}
Index: database/seeders/ProducerAndProductSeeder.php
===================================================================
--- database/seeders/ProducerAndProductSeeder.php	(revision 493b218696760be36468e7a224861a03e0952211)
+++ database/seeders/ProducerAndProductSeeder.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,29 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Producer;
+use App\Models\Product;
+use Illuminate\Database\Seeder;
+
+class ProducerAndProductSeeder extends Seeder
+{
+    public function run(): void
+    {
+        // Ensure there’s exactly one producer
+        $producer = Producer::first() ?? Producer::create([
+            'name' => 'Pharma Export',
+            'address' => '11a Street, Industrial Zone',
+            'country' => 'Macedonia',
+            'phone_number' => '+389 70 000 000',
+            'email' => 'contact@pharmaexport.com',
+        ]);
+
+        Product::factory()
+            ->count(15)
+            ->state([
+                'producer_id' => $producer->id
+            ])
+            ->create();
+    }
+}
Index: database/seeders/TransportSeeder.php
===================================================================
--- database/seeders/TransportSeeder.php	(revision 493b218696760be36468e7a224861a03e0952211)
+++ database/seeders/TransportSeeder.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,14 @@
+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Seeder;
+use App\Models\Transport;
+
+class TransportSeeder extends Seeder
+{
+    public function run(): void
+    {
+        Transport::factory()->count(10)->create();
+    }
+}
Index: resources/js/Layout/App.vue
===================================================================
--- resources/js/Layout/App.vue	(revision 1b0a9e621d4ba756e16a5283b7e9ce7ec8d06985)
+++ resources/js/Layout/App.vue	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -9,37 +9,43 @@
 ```vue template
 <script setup lang="ts">
-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 {Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users} from 'lucide-vue-next'
+import {computed} from 'vue'
+import {route} from 'ziggy-js'
 
 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, DropdownMenuContent, DropdownMenuItem, 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'
+import {Badge} from '@/components/ui/badge'
+import {Button} from '@/components/ui/button'
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card'
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    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'
 
 //Form
 const form = useForm({});
 const logout = () => {
-    router.post(route('logout'), {}, { preserveScroll: true });
+    router.post(route('logout'), {}, {preserveScroll: true});
 };
-const { setTheme } = useTheme()
+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('orders'), label: 'Orders', icon: Package, routeName: 'orders' }
+    {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: 'Customers', icon: Users },
-    { label: 'Analytics', icon: LineChart }
+    {label: 'Analytics', icon: LineChart}
 ]
 
@@ -54,5 +60,5 @@
 
 <template>
-    <Toaster />
+    <Toaster/>
 
     <div class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
@@ -61,9 +67,9 @@
                 <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" />
+                        <Bell class="h-4 w-4"/>
                         <span class="sr-only">Toggle notifications</span>
                     </Button>
@@ -75,5 +81,5 @@
                               :href="item.href"
                               :class="getLinkClasses(item.routeName)">
-                            <component :is="item.icon" class="h-4 w-4" />
+                            <component :is="item.icon" class="h-4 w-4"/>
                             {{ item.label }}
                         </Link>
@@ -83,5 +89,5 @@
                            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" />
+                            <component :is="item.icon" class="h-4 w-4"/>
                             {{ item.label }}
                         </a>
@@ -95,5 +101,5 @@
                     <SheetTrigger as-child>
                         <Button variant="outline" size="icon" class="shrink-0 md:hidden">
-                            <Menu class="h-5 w-5" />
+                            <Menu class="h-5 w-5"/>
                             <span class="sr-only">Toggle navigation menu</span>
                         </Button>
@@ -102,13 +108,15 @@
                         <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" />
+                                <Package2 class="h-6 w-6"/>
                                 <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" />
+                            <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" />
+                            <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">
@@ -116,14 +124,17 @@
                                 </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" />
+                            <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" />
-                                Customers
-                            </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" />
+                            <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>
@@ -150,6 +161,7 @@
                     <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="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"/>
                         </div>
                     </form>
@@ -184,5 +196,5 @@
                     <DropdownMenuTrigger as-child>
                         <Button variant="secondary" size="icon" class="rounded-full">
-                            <CircleUser class="h-5 w-5" />
+                            <CircleUser class="h-5 w-5"/>
                             <span class="sr-only">Toggle user menu</span>
                         </Button>
@@ -190,8 +202,8 @@
                     <DropdownMenuContent align="end">
                         <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                        <DropdownMenuSeparator />
+                        <DropdownMenuSeparator/>
                         <DropdownMenuItem>Settings</DropdownMenuItem>
                         <DropdownMenuItem>Support</DropdownMenuItem>
-                        <DropdownMenuSeparator />
+                        <DropdownMenuSeparator/>
                         <DropdownMenuItem @click="logout">Logout</DropdownMenuItem>
                     </DropdownMenuContent>
@@ -206,5 +218,5 @@
                 <div class="">
                     <!-- Content Page -->
-                    <slot />
+                    <slot/>
                     <!-- Content Page -->
                 </div>
Index: resources/js/Pages/Client.vue
===================================================================
--- resources/js/Pages/Client.vue	(revision 493b218696760be36468e7a224861a03e0952211)
+++ resources/js/Pages/Client.vue	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,478 @@
+<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/Dashboard.vue
===================================================================
--- resources/js/Pages/Dashboard.vue	(revision 493b218696760be36468e7a224861a03e0952211)
+++ resources/js/Pages/Dashboard.vue	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,10 @@
+<script setup>
+import {Button} from '@/components/ui/button/index.js'
+import App from '@/Layout/App.vue'
+</script>
+
+<template>
+    <App>
+        <h1>Dashboard</h1>
+    </App>
+</template>
Index: sources/js/Pages/Dashboard/Index.vue
===================================================================
--- resources/js/Pages/Dashboard/Index.vue	(revision 1b0a9e621d4ba756e16a5283b7e9ce7ec8d06985)
+++ 	(revision )
@@ -1,10 +1,0 @@
-<script setup>
-import { Button } from '@/components/ui/button'
-import App from '@/Layout/App.vue'
-</script>
-
-<template>
-    <App>
-        <h1>Dashboard</h1>
-    </App>
-</template>
Index: resources/js/Pages/Order.vue
===================================================================
--- resources/js/Pages/Order.vue	(revision 493b218696760be36468e7a224861a03e0952211)
+++ resources/js/Pages/Order.vue	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,267 @@
+<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/Order/Create.vue
===================================================================
--- resources/js/Pages/Order/Create.vue	(revision 1b0a9e621d4ba756e16a5283b7e9ce7ec8d06985)
+++ 	(revision )
@@ -1,11 +1,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-
-</template>
-
-<style scoped>
-
-</style>
Index: sources/js/Pages/Order/DataTableDropDown.vue
===================================================================
--- resources/js/Pages/Order/DataTableDropDown.vue	(revision 1b0a9e621d4ba756e16a5283b7e9ce7ec8d06985)
+++ 	(revision )
@@ -1,35 +1,0 @@
-<script setup lang="ts">
-import { MoreHorizontal } from 'lucide-vue-next'
-import { Button } from '@/components/ui/button'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
-
-defineProps<{
-    payment: {
-        id: string
-    }
-}>()
-
-function copy(id: string) {
-    navigator.clipboard.writeText(id)
-}
-</script>
-
-<template>
-    <DropdownMenu>
-        <DropdownMenuTrigger as-child>
-            <Button variant="ghost" class="w-8 h-8 p-0">
-                <span class="sr-only">Open menu</span>
-                <MoreHorizontal class="w-4 h-4" />
-            </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-            <DropdownMenuLabel>Actions</DropdownMenuLabel>
-            <DropdownMenuItem @click="copy(payment.id)">
-                Copy payment ID
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>View customer</DropdownMenuItem>
-            <DropdownMenuItem>View payment details</DropdownMenuItem>
-        </DropdownMenuContent>
-    </DropdownMenu>
-</template>
Index: sources/js/Pages/Order/Edit.vue
===================================================================
--- resources/js/Pages/Order/Edit.vue	(revision 1b0a9e621d4ba756e16a5283b7e9ce7ec8d06985)
+++ 	(revision )
@@ -1,11 +1,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-
-</template>
-
-<style scoped>
-
-</style>
Index: sources/js/Pages/Order/Index.vue
===================================================================
--- resources/js/Pages/Order/Index.vue	(revision 1b0a9e621d4ba756e16a5283b7e9ce7ec8d06985)
+++ 	(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/Order/Show.vue
===================================================================
--- resources/js/Pages/Order/Show.vue	(revision 1b0a9e621d4ba756e16a5283b7e9ce7ec8d06985)
+++ 	(revision )
@@ -1,11 +1,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-
-</template>
-
-<style scoped>
-
-</style>
Index: resources/js/Pages/Product.vue
===================================================================
--- resources/js/Pages/Product.vue	(revision 493b218696760be36468e7a224861a03e0952211)
+++ resources/js/Pages/Product.vue	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,269 @@
+<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/Product/Create.vue
===================================================================
--- resources/js/Pages/Product/Create.vue	(revision 1b0a9e621d4ba756e16a5283b7e9ce7ec8d06985)
+++ 	(revision )
@@ -1,11 +1,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-
-</template>
-
-<style scoped>
-
-</style>
Index: sources/js/Pages/Product/Edit.vue
===================================================================
--- resources/js/Pages/Product/Edit.vue	(revision 1b0a9e621d4ba756e16a5283b7e9ce7ec8d06985)
+++ 	(revision )
@@ -1,11 +1,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-
-</template>
-
-<style scoped>
-
-</style>
Index: sources/js/Pages/Product/Index.vue
===================================================================
--- resources/js/Pages/Product/Index.vue	(revision 1b0a9e621d4ba756e16a5283b7e9ce7ec8d06985)
+++ 	(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/Product/Show.vue
===================================================================
--- resources/js/Pages/Product/Show.vue	(revision 1b0a9e621d4ba756e16a5283b7e9ce7ec8d06985)
+++ 	(revision )
@@ -1,11 +1,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-
-</template>
-
-<style scoped>
-
-</style>
Index: resources/js/Pages/Transport.vue
===================================================================
--- resources/js/Pages/Transport.vue	(revision 493b218696760be36468e7a224861a03e0952211)
+++ resources/js/Pages/Transport.vue	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,87 @@
+<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: resources/js/components/ui/dialog/Dialog.vue
===================================================================
--- resources/js/components/ui/dialog/Dialog.vue	(revision 493b218696760be36468e7a224861a03e0952211)
+++ resources/js/components/ui/dialog/Dialog.vue	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot
+    data-slot="dialog"
+    v-bind="forwarded"
+  >
+    <slot />
+  </DialogRoot>
+</template>
Index: resources/js/components/ui/dialog/DialogClose.vue
===================================================================
--- resources/js/components/ui/dialog/DialogClose.vue	(revision 493b218696760be36468e7a224861a03e0952211)
+++ resources/js/components/ui/dialog/DialogClose.vue	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui"
+import { DialogClose } from "reka-ui"
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose
+    data-slot="dialog-close"
+    v-bind="props"
+  >
+    <slot />
+  </DialogClose>
+</template>
Index: resources/js/components/ui/dialog/DialogContent.vue
===================================================================
--- resources/js/components/ui/dialog/DialogContent.vue	(revision 493b218696760be36468e7a224861a03e0952211)
+++ resources/js/components/ui/dialog/DialogContent.vue	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type {DialogContentEmits, DialogContentProps} from "reka-ui"
+import type {HTMLAttributes} from "vue"
+import {reactiveOmit} from "@vueuse/core"
+import {X} from "lucide-vue-next"
+import {
+    DialogClose,
+    DialogContent,
+
+    DialogPortal,
+    useForwardPropsEmits,
+} from "reka-ui"
+import {cn} from "@/lib/utils"
+import DialogOverlay from "./DialogOverlay.vue"
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <DialogPortal>
+        <DialogOverlay/>
+        <DialogContent
+            data-slot="dialog-content"
+            v-bind="forwarded"
+            :class="
+        cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          props.class,
+        )"
+        >
+            <slot/>
+
+            <DialogClose
+                class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            >
+                <X/>
+                <span class="sr-only">Close</span>
+            </DialogClose>
+        </DialogContent>
+    </DialogPortal>
+</template>
Index: resources/js/components/ui/dialog/DialogDescription.vue
===================================================================
--- resources/js/components/ui/dialog/DialogDescription.vue	(revision 493b218696760be36468e7a224861a03e0952211)
+++ resources/js/components/ui/dialog/DialogDescription.vue	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogDescription, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="dialog-description"
+    v-bind="forwardedProps"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>
Index: resources/js/components/ui/dialog/DialogFooter.vue
===================================================================
--- resources/js/components/ui/dialog/DialogFooter.vue	(revision 493b218696760be36468e7a224861a03e0952211)
+++ resources/js/components/ui/dialog/DialogFooter.vue	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    data-slot="dialog-footer"
+    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
+  >
+    <slot />
+  </div>
+</template>
Index: resources/js/components/ui/dialog/DialogHeader.vue
===================================================================
--- resources/js/components/ui/dialog/DialogHeader.vue	(revision 493b218696760be36468e7a224861a03e0952211)
+++ resources/js/components/ui/dialog/DialogHeader.vue	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="dialog-header"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
Index: resources/js/components/ui/dialog/DialogOverlay.vue
===================================================================
--- resources/js/components/ui/dialog/DialogOverlay.vue	(revision 493b218696760be36468e7a224861a03e0952211)
+++ resources/js/components/ui/dialog/DialogOverlay.vue	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogOverlayProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogOverlay } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="dialog-overlay"
+    v-bind="delegatedProps"
+    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+  >
+    <slot />
+  </DialogOverlay>
+</template>
Index: resources/js/components/ui/dialog/DialogScrollContent.vue
===================================================================
--- resources/js/components/ui/dialog/DialogScrollContent.vue	(revision 493b218696760be36468e7a224861a03e0952211)
+++ resources/js/components/ui/dialog/DialogScrollContent.vue	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type {DialogContentEmits, DialogContentProps} from "reka-ui"
+import type {HTMLAttributes} from "vue"
+import {reactiveOmit} from "@vueuse/core"
+import {X} from "lucide-vue-next"
+import {
+    DialogClose,
+    DialogContent,
+
+    DialogOverlay,
+    DialogPortal,
+    useForwardPropsEmits,
+} from "reka-ui"
+import {cn} from '@/lib/utils'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <DialogPortal>
+        <DialogOverlay
+            class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+        >
+            <DialogContent
+                :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+                v-bind="forwarded"
+                @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+            >
+                <slot/>
+
+                <DialogClose
+                    class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+                >
+                    <X class="w-4 h-4"/>
+                    <span class="sr-only">Close</span>
+                </DialogClose>
+            </DialogContent>
+        </DialogOverlay>
+    </DialogPortal>
+</template>
Index: resources/js/components/ui/dialog/DialogTitle.vue
===================================================================
--- resources/js/components/ui/dialog/DialogTitle.vue	(revision 493b218696760be36468e7a224861a03e0952211)
+++ resources/js/components/ui/dialog/DialogTitle.vue	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="dialog-title"
+    v-bind="forwardedProps"
+    :class="cn('text-lg leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </DialogTitle>
+</template>
Index: resources/js/components/ui/dialog/DialogTrigger.vue
===================================================================
--- resources/js/components/ui/dialog/DialogTrigger.vue	(revision 493b218696760be36468e7a224861a03e0952211)
+++ resources/js/components/ui/dialog/DialogTrigger.vue	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui"
+import { DialogTrigger } from "reka-ui"
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger
+    data-slot="dialog-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </DialogTrigger>
+</template>
Index: resources/js/components/ui/dialog/index.ts
===================================================================
--- resources/js/components/ui/dialog/index.ts	(revision 493b218696760be36468e7a224861a03e0952211)
+++ resources/js/components/ui/dialog/index.ts	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,10 @@
+export { default as Dialog } from "./Dialog.vue"
+export { default as DialogClose } from "./DialogClose.vue"
+export { default as DialogContent } from "./DialogContent.vue"
+export { default as DialogDescription } from "./DialogDescription.vue"
+export { default as DialogFooter } from "./DialogFooter.vue"
+export { default as DialogHeader } from "./DialogHeader.vue"
+export { default as DialogOverlay } from "./DialogOverlay.vue"
+export { default as DialogScrollContent } from "./DialogScrollContent.vue"
+export { default as DialogTitle } from "./DialogTitle.vue"
+export { default as DialogTrigger } from "./DialogTrigger.vue"
Index: resources/js/components/ui/textarea/Textarea.vue
===================================================================
--- resources/js/components/ui/textarea/Textarea.vue	(revision 493b218696760be36468e7a224861a03e0952211)
+++ resources/js/components/ui/textarea/Textarea.vue	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { useVModel } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  defaultValue?: string | number
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: "update:modelValue", payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <textarea
+    v-model="modelValue"
+    data-slot="textarea"
+    :class="cn('border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', props.class)"
+  />
+</template>
Index: resources/js/components/ui/textarea/index.ts
===================================================================
--- resources/js/components/ui/textarea/index.ts	(revision 493b218696760be36468e7a224861a03e0952211)
+++ resources/js/components/ui/textarea/index.ts	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,1 @@
+export { default as Textarea } from "./Textarea.vue"
Index: resources/js/types/crud.ts
===================================================================
--- resources/js/types/crud.ts	(revision 493b218696760be36468e7a224861a03e0952211)
+++ resources/js/types/crud.ts	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -0,0 +1,123 @@
+export interface Column {
+    key: string
+    label: string
+    sortable?: boolean
+    formatter?: (value: any, row: any) => string
+    component?: string // For future custom cell components
+}
+
+export interface ExpandedField {
+    key: string
+    label: string
+    formatter?: (value: any, row: any) => string
+    span?: 1 | 2 // Grid span (1 = half width, 2 = full width)
+}
+
+export interface ExpandedSection {
+    title: string
+    fields: ExpandedField[]
+}
+
+export interface CrudConfig {
+    title: string
+    endpoint: string // e.g., '/clients', '/orders', '/transports'
+    searchPlaceholder: string
+    columns: Column[]
+    expandedSections?: ExpandedSection[]
+    searchFields?: string[] // Backend search fields (optional)
+}
+
+export interface PaginatedData<T = any> {
+    data: T[]
+    current_page: number
+    last_page: number
+    per_page: number
+    total: number
+    from: number
+    to: number
+    links?: Array<{
+        url: string | null
+        label: string
+        active: boolean
+    }>
+}
+
+export interface CrudFilters {
+    search?: string
+    sort_by: string
+    sort_direction: 'asc' | 'desc'
+    per_page: number
+}
+
+export interface FormField {
+    key: string
+    label: string
+    type: 'text' | 'textarea' | 'email' | 'tel' | 'number' | 'date'
+    required?: boolean
+    placeholder?: string
+    span?: 1 | 2 // Grid span for layout
+}
+
+export interface ActionButton {
+    label: string
+    variant: 'default' | 'outline' | 'destructive' | 'ghost'
+    action: (row: any) => void
+    condition?: (row: any) => boolean // Show button conditionally
+}
+
+export interface Column {
+    key: string
+    label: string
+    sortable?: boolean
+    formatter?: (value: any, row: any) => string
+    component?: string // For future custom cell components
+}
+
+export interface ExpandedField {
+    key: string
+    label: string
+    formatter?: (value: any, row: any) => string
+    span?: 1 | 2 // Grid span (1 = half width, 2 = full width)
+}
+
+export interface ExpandedSection {
+    title: string
+    fields: ExpandedField[]
+}
+
+export interface CrudConfig {
+    title: string
+    endpoint: string // e.g., '/clients', '/orders', '/transports'
+    searchPlaceholder: string
+    columns: Column[]
+    expandedSections?: ExpandedSection[]
+    searchFields?: string[] // Backend search fields (optional)
+    formFields: FormField[] // Fields for create/edit forms
+    customActions?: ActionButton[] // Custom action buttons per row
+    canCreate?: boolean
+    canEdit?: boolean
+    canDelete?: boolean
+    deleteConfirmMessage?: (row: any) => string
+}
+
+export interface PaginatedData<T = any> {
+    data: T[]
+    current_page: number
+    last_page: number
+    per_page: number
+    total: number
+    from: number
+    to: number
+    links?: Array<{
+        url: string | null
+        label: string
+        active: boolean
+    }>
+}
+
+export interface CrudFilters {
+    search?: string
+    sort_by: string
+    sort_direction: 'asc' | 'desc'
+    per_page: number
+}
Index: routes/web.php
===================================================================
--- routes/web.php	(revision 1b0a9e621d4ba756e16a5283b7e9ce7ec8d06985)
+++ routes/web.php	(revision 493b218696760be36468e7a224861a03e0952211)
@@ -1,6 +1,7 @@
 <?php
+
 namespace App\Http\Controllers;
+
 use Illuminate\Support\Facades\Route;
-use Inertia\Inertia;
 
 Route::middleware('guest')->group(function () {
@@ -15,3 +16,5 @@
     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');
 });