Index: app/Http/Controllers/GenericModelController.php
===================================================================
--- app/Http/Controllers/GenericModelController.php	(revision 3989749f9bf29b73946732a608aec8454e3608f8)
+++ app/Http/Controllers/GenericModelController.php	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
@@ -9,4 +9,20 @@
 class GenericModelController extends Controller
 {
+    //helpers
+
+    protected function normalizeForeignKeys(array $data, $modelInstance): array
+    {
+        $fillable = $modelInstance->getFillable();
+
+        foreach ($fillable as $field) {
+            if (Str::endsWith($field, '_id') && isset($data[$field]) && is_array($data[$field])) {
+                // if frontend sent object instead of ID, extract it
+                $data[$field] = $data[$field]['id'] ?? null;
+            }
+        }
+
+        return $data;
+    }
+
     public function index(Request $request, string $model)
     {
@@ -57,10 +73,10 @@
         ]);
     }
-
-    /**
-     * Store a newly created resource in storage.
-     */
+//
     public function store(Request $request, string $model)
     {
+        \Log::info('STORE - raw request payload', $request->all());
+        \Log::info('STORE - model param: ' . $model);
+
         $modelClass = $this->getModelClass($model);
         if (!$modelClass) {
@@ -69,20 +85,53 @@
 
         $modelInstance = new $modelClass();
-        $fillable = $modelInstance->getFillable();
-
-        // Dynamically get validation rules from a method on the model
-        $validated = $request->validate($modelClass::getValidationRules());
-
-        $modelClass::create($validated);
-
-        return redirect()->route('generic.index', ['model' => Str::plural($model)])
-            ->with('success', Str::singular($model) . ' created successfully.');
-    }
-
-    /**
-     * Update the specified resource in storage.
-     */
+
+        // -- TEMP: bypass validation for debugging --
+        // $validated = $request->validate($modelClass::getValidationRules());
+        $data = $request->all();
+
+        // If you have normalizeForeignKeys helper, use it. Otherwise inline simple normalization:
+        if (method_exists($this, 'normalizeForeignKeys')) {
+            $data = $this->normalizeForeignKeys($data, $modelInstance);
+        } else {
+            // simple inline normalization for objects like { producer: {id: 'uuid', name: 'X'} } -> producer_id
+            $fillable = $modelInstance->getFillable();
+            foreach ($fillable as $field) {
+                if (Str::endsWith($field, '_id') && isset($data[$field]) && is_array($data[$field])) {
+                    $data[$field] = $data[$field]['id'] ?? null;
+                }
+            }
+        }
+
+        \Log::info('STORE - normalized payload', $data);
+
+        try {
+            $created = $modelClass::create($data);
+            \Log::info('STORE - created record', ['id' => $created->id ?? null, 'model' => $model]);
+            // Return JSON so you can see success in the Network tab without redirect issues
+//            return response()->json([
+//                'status' => 'ok',
+//                'created_id' => $created->id ?? null,
+//                'data' => $data,
+//            ], 201);
+            return redirect()->route('generic.index', ['model' => $model])
+                ->with('success', Str::singular($model) . ' created successfully.');
+        } catch (\Throwable $e) {
+            \Log::error('STORE - DB error: ' . $e->getMessage(), ['exception' => $e]);
+//            return response()->json([
+//                'status' => 'error',
+//                'message' => $e->getMessage(),
+//                'data' => $data,
+//            ], 500);
+            return redirect()->back()
+                ->withErrors(['error' => 'Failed to create ' . $model . ': ' . $e->getMessage()])
+                ->withInput();
+        }
+    }
+
     public function update(Request $request, string $model, string $id)
     {
+        \Log::info('UPDATE - raw request payload', $request->all());
+        \Log::info('UPDATE - model param: ' . $model . ' id: ' . $id);
+
         $modelClass = $this->getModelClass($model);
         if (!$modelClass) {
@@ -92,15 +141,45 @@
         $item = $modelClass::findOrFail($id);
 
-        $validated = $request->validate($modelClass::getValidationRules($item->id));
-
-        $item->update($validated);
-
-        return redirect()->route('generic.index', ['model' => Str::plural($model)])
-            ->with('success', Str::singular($model) . ' updated successfully.');
-    }
-
-    /**
-     * Remove the specified resource from storage.
-     */
+        // -- TEMP: bypass validation for debugging --
+        // $validated = $request->validate($modelClass::getValidationRules($item->id));
+        $data = $request->all();
+
+        if (method_exists($this, 'normalizeForeignKeys')) {
+            $data = $this->normalizeForeignKeys($data, $item);
+        } else {
+            $fillable = $item->getFillable();
+            foreach ($fillable as $field) {
+                if (Str::endsWith($field, '_id') && isset($data[$field]) && is_array($data[$field])) {
+                    $data[$field] = $data[$field]['id'] ?? null;
+                }
+            }
+        }
+
+        \Log::info('UPDATE - normalized payload', $data);
+
+        try {
+            $item->update($data);
+            \Log::info('UPDATE - updated record', ['id' => $item->id]);
+//            return response()->json([
+//                'status' => 'ok',
+//                'updated_id' => $item->id,
+//                'data' => $data,
+//            ], 200);
+            return redirect()->route('generic.index', ['model' => $model])
+                ->with('success', Str::singular($model) . ' updated successfully.');
+        } catch (\Throwable $e) {
+            \Log::error('UPDATE - DB error: ' . $e->getMessage(), ['exception' => $e]);
+//            return response()->json([
+//                'status' => 'error',
+//                'message' => $e->getMessage(),
+//                'data' => $data,
+//            ], 500);
+            return redirect()->back()
+                ->withErrors(['error' => 'Failed to update ' . $model . ': ' . $e->getMessage()])
+                ->withInput();
+        }
+    }
+
+
     public function destroy(string $model, string $id)
     {
@@ -113,5 +192,5 @@
         $item->delete();
 
-        return redirect()->route('generic.index', ['model' => Str::plural($model)])
+        return redirect()->route('generic.index', ['model' => $model])
             ->with('success', Str::singular($model) . ' deleted successfully.');
     }
@@ -149,5 +228,5 @@
                         }
                     } catch (\Exception $e) {
-                        // Skip if relationship doesn't exist or has issues
+                        // Skip if the relationship doesn't exist or has issues
                         continue;
                     }
@@ -212,2 +291,318 @@
     }
 }
+
+//
+//namespace App\Http\Controllers;
+//
+//use Illuminate\Http\Request;
+//use Inertia\Inertia;
+//use Illuminate\Support\Str;
+//use Illuminate\Database\Eloquent\Relations\BelongsTo;
+//use function Laravel\Prompts\error;
+//
+//class GenericModelController extends Controller
+//{
+//    protected function preprocessFormData(array $data, $modelInstance): array
+//    {
+//        $fillable = $modelInstance->getFillable();
+//
+//        foreach ($fillable as $field) {
+//            // hendla nadvoreshni kluchevi
+//            if (Str::endsWith($field, '_id') && isset($data[$field])) {
+//                // ekstrahira id of objektot ako e daden kako objekt
+//                if (is_array($data[$field])) {
+//                    $data[$field] = $data[$field]['id'] ?? null;
+//                }
+//                // konvertira prazen string u null za nadvoreshni kluchevi
+//                if ($data[$field] === '') {
+//                    $data[$field] = null;
+//                }
+//            }
+//
+//            // hendla boolean polinja
+//            if (isset($data[$field]) && is_bool($modelInstance->$field)) {
+//                $data[$field] = (bool) $data[$field];
+//
+//            }
+//
+//            // hendla date polinja
+//            $casts = $modelInstance->getCasts();
+//            if (isset($casts[$field]) && strpos($casts[$field], 'date') !== false && isset($data[$field])) {
+//                if ($data[$field] === '') {
+//                    $data[$field] = null;
+//                }
+//            }
+//
+//            return $data;
+//        }
+//    }
+//
+//    public function store(Request $request, string $model)
+//    {
+//        \Log::info('STORE - raw request payload', $request->all());
+//        \Log::info('STORE - model param: ' . $model);
+//
+//        $modelClass = $this->getModelClass($model);
+//        if (!$modelClass) {
+//            abort(404, 'Model not found.');
+//        }
+//
+//        $modelInstance = new $modelClass();
+//
+//
+//        $data = $request->all();
+//        $data = $this->preprocessFormData($data, $modelInstance);
+//
+//        try {
+//            $valdated = validator($data, $modelClass:getValidationRules()) -> validate();
+//        } catch (\Illuminate\Validation\ValidationException $e) {
+//            log.error('STORE - validation failed', $e->errors());
+//        }
+//
+////        // Re-enable validation but with better error handling
+////        try {
+////            $validated = $request->validate($data, $modelClass::getValidationRules());
+////            \Log::info('STORE - validation passed', $validated);
+////        } catch (\Illuminate\Validation\ValidationException $e) {
+////            \Log::error('STORE - validation failed', $e->errors());
+////
+////            // Return proper Inertia error response
+////            return redirect()->back()
+////                ->withErrors($e->errors())
+////                ->withInput();
+////        }
+//
+//        // Normalize foreign keys
+//        $data = $this->normalizeForeignKeys($validated, $modelInstance);
+//        \Log::info('STORE - normalized payload', $data);
+//
+//        try {
+//            $created = $modelClass::create($data);
+//            \Log::info('STORE - created record', ['id' => $created->id ?? null, 'model' => $model]);
+//
+//            // Proper Inertia redirect after successful creation
+//            return redirect()->route('generic.index', ['model' => $model])
+//                ->with('success', Str::singular($model) . ' created successfully.');
+//
+//        } catch (\Throwable $e) {
+//            \Log::error('STORE - DB error: ' . $e->getMessage(), ['exception' => $e]);
+//
+//            return redirect()->back()
+//                ->withErrors(['error' => 'Failed to create ' . $model . ': ' . $e->getMessage()])
+//                ->withInput();
+//        }
+//    }
+//
+//    public function update(Request $request, string $model, string $id)
+//    {
+//        \Log::info('UPDATE - raw request payload', $request->all());
+//        \Log::info('UPDATE - model param: ' . $model . ' id: ' . $id);
+//
+//        $modelClass = $this->getModelClass($model);
+//        if (!$modelClass) {
+//            abort(404, 'Model not found.');
+//        }
+//
+//        $item = $modelClass::findOrFail($id);
+//
+//        // Re-enable validation
+//        try {
+//            $validated = $request->validate($modelClass::getValidationRules($item->id));
+//            \Log::info('UPDATE - validation passed', $validated);
+//        } catch (\Illuminate\Validation\ValidationException $e) {
+//            \Log::error('UPDATE - validation failed', $e->errors());
+//
+//            return redirect()->back()
+//                ->withErrors($e->errors())
+//                ->withInput();
+//        }
+//
+//        $data = $this->normalizeForeignKeys($validated, $item);
+//        \Log::info('UPDATE - normalized payload', $data);
+//
+//        try {
+//            $item->update($data);
+//            \Log::info('UPDATE - updated record', ['id' => $item->id]);
+//
+//            return redirect()->route('generic.index', ['model' => $model])
+//                ->with('success', Str::singular($model) . ' updated successfully.');
+//
+//        } catch (\Throwable $e) {
+//            \Log::error('UPDATE - DB error: ' . $e->getMessage(), ['exception' => $e]);
+//
+//            return redirect()->back()
+//                ->withErrors(['error' => 'Failed to update ' . $model . ': ' . $e->getMessage()])
+//                ->withInput();
+//        }
+//    }
+//
+//    // Improved normalizeForeignKeys method
+//    protected function normalizeForeignKeys(array $data, $modelInstance): array
+//    {
+//        $fillable = $modelInstance->getFillable();
+//
+//        foreach ($fillable as $field) {
+//            if (Str::endsWith($field, '_id') && isset($data[$field])) {
+//                // Handle various input formats
+//                if (is_array($data[$field])) {
+//                    // Extract ID from object: {id: 'uuid', name: 'Name'}
+//                    $data[$field] = $data[$field]['id'] ?? null;
+//                } elseif (is_string($data[$field]) && empty($data[$field])) {
+//                    // Convert empty strings to null for foreign keys
+//                    $data[$field] = null;
+//                }
+//                // If it's already a valid ID (string/int), leave it as is
+//            }
+//        }
+//
+//        return $data;
+//    }
+//
+//    // Rest of your existing methods remain the same...
+//
+//    protected function getModelClass(string $model)
+//    {
+//        $modelClass = 'App\\Models\\' . Str::studly(Str::singular($model));
+//        if (class_exists($modelClass)) {
+//            return $modelClass;
+//        }
+//        return null;
+//    }
+//
+//    protected function getRelationships($modelInstance): array
+//    {
+//        $relationships = [];
+//        $fillable = $modelInstance->getFillable();
+//
+//        foreach ($fillable as $field) {
+//            if (Str::endsWith($field, '_id')) {
+//                $relationName = Str::beforeLast($field, '_id');
+//
+//                if (method_exists($modelInstance, $relationName)) {
+//                    try {
+//                        $relation = $modelInstance->$relationName();
+//                        if ($relation instanceof BelongsTo) {
+//                            $relationships[] = $relationName;
+//                        }
+//                    } catch (\Exception $e) {
+//                        continue;
+//                    }
+//                }
+//            }
+//        }
+//
+//        return $relationships;
+//    }
+//
+//    protected function getForeignKeyMap($modelInstance): array
+//    {
+//        $fkMap = [];
+//        $fillable = $modelInstance->getFillable();
+//
+//        foreach ($fillable as $field) {
+//            if (Str::endsWith($field, '_id')) {
+//                $relationName = Str::beforeLast($field, '_id');
+//                $tableName = Str::plural($relationName);
+//                $fkMap[$field] = $tableName;
+//            }
+//        }
+//
+//        return $fkMap;
+//    }
+//
+//    protected function getRelatedOptions($modelInstance): array
+//    {
+//        $options = [];
+//        $fillable = $modelInstance->getFillable();
+//
+//        foreach ($fillable as $field) {
+//            if (Str::endsWith($field, '_id')) {
+//                $relationName = Str::beforeLast($field, '_id');
+//                if (method_exists($modelInstance, $relationName)) {
+//                    try {
+//                        $relation = $modelInstance->$relationName();
+//                        if ($relation instanceof BelongsTo) {
+//                            $relatedModel = $relation->getRelated();
+//                            $relatedItems = $relatedModel->all();
+//
+//                            $options[$field] = $relatedItems->map(function ($item) {
+//                                return [
+//                                    'id' => $item->id,
+//                                    'name' => $item->name ?? ("#{$item->id}"),
+//                                ];
+//                            })->values();
+//                        }
+//                    } catch (\Exception $e) {
+//                        continue;
+//                    }
+//                }
+//            }
+//        }
+//
+//        return $options;
+//    }
+//
+//    public function index(Request $request, string $model)
+//    {
+//        $modelClass = $this->getModelClass($model);
+//        if (!$modelClass) {
+//            abort(404, 'Model not found.');
+//        }
+//
+//        $query = $modelClass::query();
+//        $modelInstance = new $modelClass();
+//        $fillable = $modelInstance->getFillable();
+//
+//        $relationships = $this->getRelationships($modelInstance);
+//        if (!empty($relationships)) {
+//            $query->with($relationships);
+//        }
+//
+//        if ($request->has('search') && $request->search) {
+//            $query->where(function ($q) use ($request, $fillable) {
+//                foreach ($fillable as $field) {
+//                    $q->orWhere($field, 'like', '%' . $request->search . '%');
+//                }
+//            });
+//        }
+//
+//        $sortBy = $request->get('sort_by', 'created_at');
+//        $sortDirection = $request->get('sort_direction', 'desc');
+//        $query->orderBy($sortBy, $sortDirection);
+//
+//        $items = $query->paginate(
+//            perPage: $request->get('per_page', 10),
+//            page: $request->get('page', 1)
+//        )->withQueryString();
+//
+//        $relatedOptions = $this->getRelatedOptions($modelInstance);
+//
+//        return Inertia::render('GenericModelPage', [
+//            'model' => Str::singular(Str::studly($model)),
+//            'items' => $items,
+//            'filters' => [
+//                'search' => $request->search,
+//                'sort_by' => $sortBy,
+//                'sort_direction' => $sortDirection,
+//                'per_page' => $request->get('per_page', 10),
+//                'open_id' => $request->get('open_id')
+//            ],
+//            'fkMap' => $this->getForeignKeyMap($modelInstance),
+//            'relatedOptions' => $relatedOptions,
+//        ]);
+//    }
+//
+//    public function destroy(string $model, string $id)
+//    {
+//        $modelClass = $this->getModelClass($model);
+//        if (!$modelClass) {
+//            abort(404, 'Model not found.');
+//        }
+//
+//        $item = $modelClass::findOrFail($id);
+//        $item->delete();
+//
+//        return redirect()->route('generic.index', ['model' => $model])
+//            ->with('success', Str::singular($model) . ' deleted successfully.');
+//    }
+//}
Index: app/Http/Middleware/HandleInertiaRequests.php
===================================================================
--- app/Http/Middleware/HandleInertiaRequests.php	(revision 3989749f9bf29b73946732a608aec8454e3608f8)
+++ app/Http/Middleware/HandleInertiaRequests.php	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
@@ -33,5 +33,12 @@
             ...parent::share($request),
             'auth' => [
-                'user' => $request->user(),
+                'user' => $request->user()
+                ? [
+                    'id' => $request->user()->id,
+                        'name' => $request->user()->name,
+                        'email' => $request->user()->email,
+                        'is_admin' => $request->user()->is_admin,
+                    ]
+                    : null,
             ],
         ];
Index: app/Models/Batch.php
===================================================================
--- app/Models/Batch.php	(revision 3989749f9bf29b73946732a608aec8454e3608f8)
+++ app/Models/Batch.php	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
@@ -8,4 +8,5 @@
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\BelongsToMany;
+use Illuminate\Validation\Rule;
 
 class Batch extends Model
@@ -27,9 +28,26 @@
     ];
 
+//    public static function getValidationRules($id = null): array
+//    {
+//        return [
+//            'product_id' => 'required|string|exists:products,id',
+//            'batch_code' => 'required|string|max:255|unique:batches,batch_code,' . $id,
+//            'production_date' => 'required|date|before_or_equal:today',
+//            'expiration_date' => 'required|date|after:production_date',
+//            'net_weight' => 'required|numeric|min:0|max:999999.99',
+//            'gross_weight' => 'required|numeric|min:0|max:999999.99|gte:net_weight',
+//            'units_per_batch' => 'required|integer|min:1|max:1000000',
+//        ];
+//    }
     public static function getValidationRules($id = null): array
     {
         return [
             'product_id' => 'required|string|exists:products,id',
-            'batch_code' => 'required|string|max:255|unique:batches,batch_code,' . $id,
+            'batch_code' => [
+                'required',
+                'string',
+                'max:255',
+                Rule::unique('batches')->ignore($id)
+            ],
             'production_date' => 'required|date|before_or_equal:today',
             'expiration_date' => 'required|date|after:production_date',
Index: app/Models/Client.php
===================================================================
--- app/Models/Client.php	(revision 3989749f9bf29b73946732a608aec8454e3608f8)
+++ app/Models/Client.php	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
@@ -7,4 +7,5 @@
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\HasMany;
+use Illuminate\Validation\Rule;
 
 class Client extends Model
@@ -27,11 +28,40 @@
     ];
 
+//    public static function getValidationRules($id = null): array
+//    {
+//        return [
+//            'name' => 'required|string|max:255|unique:clients,name,' . $id,
+//            'country' => 'required|string|max:255',
+//            'registration_number' => 'nullable|string|max:255|unique:clients,registration_number,' . $id,
+//            'tax_code' => 'nullable|string|max:255|unique:clients,tax_code,' . $id,
+//            'contact_person' => 'nullable|string|max:255',
+//            'phone_number' => 'nullable|string|max:255|regex:/^[\+]?[0-9\s\-\(\)]+$/',
+//            'billing_address' => 'nullable|string|max:1000',
+//            'shipping_address' => 'nullable|string|max:1000',
+//        ];
+//    }
+
     public static function getValidationRules($id = null): array
     {
         return [
-            'name' => 'required|string|max:255|unique:clients,name,' . $id,
+            'name' => [
+                'required',
+                'string',
+                'max:255',
+                Rule::unique('clients')->ignore($id),
+            ],
             'country' => 'required|string|max:255',
-            'registration_number' => 'nullable|string|max:255|unique:clients,registration_number,' . $id,
-            'tax_code' => 'nullable|string|max:255|unique:clients,tax_code,' . $id,
+            'registration_number' => [
+                'nullable',
+                'string',
+                'max:255',
+                Rule::unique('clients')->ignore($id),
+            ],
+            'tax_code' => [
+                'nullable',
+                'string',
+                'max:255',
+                Rule::unique('clients')->ignore($id),
+            ],
             'contact_person' => 'nullable|string|max:255',
             'phone_number' => 'nullable|string|max:255|regex:/^[\+]?[0-9\s\-\(\)]+$/',
Index: app/Models/Invoice.php
===================================================================
--- app/Models/Invoice.php	(revision 3989749f9bf29b73946732a608aec8454e3608f8)
+++ app/Models/Invoice.php	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
@@ -7,4 +7,5 @@
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Validation\Rule;
 
 class Invoice extends Model
@@ -25,4 +26,14 @@
     ];
 
+//    public static function getValidationRules($id = null): array
+//    {
+//        return [
+//            'invoice_date' => 'required|date|before_or_equal:today',
+//            'status' => 'required|string|in:draft,sent,paid,overdue,cancelled',
+//            'total_amount' => 'required|numeric|min:0|max:9999999.99',
+//            'order_id' => 'required|string|exists:orders,id|unique:invoices,order_id,' . $id,
+//        ];
+//    }
+
     public static function getValidationRules($id = null): array
     {
@@ -31,5 +42,10 @@
             'status' => 'required|string|in:draft,sent,paid,overdue,cancelled',
             'total_amount' => 'required|numeric|min:0|max:9999999.99',
-            'order_id' => 'required|string|exists:orders,id|unique:invoices,order_id,' . $id,
+            'order_id' => [
+                'required',
+                'string',
+                'exists:orders,id',
+                Rule::unique('invoices')->ignore($id)
+            ],
         ];
     }
Index: app/Models/Order.php
===================================================================
--- app/Models/Order.php	(revision 3989749f9bf29b73946732a608aec8454e3608f8)
+++ app/Models/Order.php	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
@@ -4,5 +4,4 @@
 
 use Illuminate\Database\Eloquent\Concerns\HasUuids;
-use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
@@ -12,5 +11,5 @@
 class Order extends Model
 {
-    use HasFactory, HasUuids;
+    use HasUuids;
 
     protected $primaryKey = 'id';
@@ -25,4 +24,5 @@
         'receiver_id',
         'transport_id',
+        'payment_id',
     ];
 
@@ -36,4 +36,5 @@
             'receiver_id' => 'required|string|exists:clients,id',
             'transport_id' => 'nullable|string|exists:transports,id',
+            'payment_id' => 'nullable|string|exists:payments,id',
         ];
     }
@@ -52,5 +53,5 @@
     public function payment(): BelongsTo
     {
-        return $this->belongsTo(Payment::class);
+        return $this->belongsTo(Payment::class, 'payment_id');
     }
 
Index: app/Models/PackingList.php
===================================================================
--- app/Models/PackingList.php	(revision 3989749f9bf29b73946732a608aec8454e3608f8)
+++ app/Models/PackingList.php	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
@@ -7,4 +7,5 @@
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Validation\Rule;
 
 class PackingList extends Model
@@ -22,8 +23,21 @@
     ];
 
+//    public static function getValidationRules($id = null): array
+//    {
+//        return [
+//            'order_id' => 'required|string|exists:orders,id|unique:packing_lists,order_id,' . $id,
+//            'packing_list_date' => 'required|date|before_or_equal:today',
+//            'status' => 'required|string|in:draft,prepared,packed,shipped',
+//        ];
+//    }
     public static function getValidationRules($id = null): array
     {
         return [
-            'order_id' => 'required|string|exists:orders,id|unique:packing_lists,order_id,' . $id,
+            'order_id' => [
+                'required',
+                'string',
+                'exists:orders,id',
+                Rule::unique('packing_lists')->ignore($id)
+            ],
             'packing_list_date' => 'required|date|before_or_equal:today',
             'status' => 'required|string|in:draft,prepared,packed,shipped',
Index: app/Models/Payment.php
===================================================================
--- app/Models/Payment.php	(revision 3989749f9bf29b73946732a608aec8454e3608f8)
+++ app/Models/Payment.php	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
@@ -4,5 +4,4 @@
 
 use Illuminate\Database\Eloquent\Concerns\HasUuids;
-use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
@@ -10,9 +9,10 @@
 class Payment extends Model
 {
-    use HasFactory, HasUuids;
+    use HasUuids;
     protected $primaryKey = 'id';
     public $incrementing = false;
     protected $keyType = 'string';
     protected $fillable = [
+        'order_id',
         'amount',
         'currency',
@@ -27,4 +27,5 @@
     {
         return [
+            'order_id' => 'required|string|exists:orders,id',
             'amount' => 'required|numeric|min:0|max:9999999.99',
             'currency' => 'required|string|size:3|in:USD,EUR,MKD,GBP,JPY,CHF,CAD,AUD',
Index: app/Models/Producer.php
===================================================================
--- app/Models/Producer.php	(revision 3989749f9bf29b73946732a608aec8454e3608f8)
+++ app/Models/Producer.php	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
@@ -8,4 +8,5 @@
 use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 use Illuminate\Database\Eloquent\Relations\HasMany;
+use Illuminate\Validation\Rule;
 
 class Producer extends Model
@@ -24,12 +25,32 @@
     ];
 
+//    public static function getValidationRules($id = null): array
+//    {
+//        return [
+//            'name' => 'required|string|max:255|unique:producers,name,' . $id,
+//            'address' => 'required|string|max:500',
+//            'country' => 'required|string|max:255',
+//            'phone_number' => 'nullable|string|max:255|regex:/^[\+]?[0-9\s\-\(\)]+$/',
+//            'email' => 'nullable|email|max:255|unique:producers,email,' . $id,
+//        ];
+//    }
     public static function getValidationRules($id = null): array
     {
         return [
-            'name' => 'required|string|max:255|unique:producers,name,' . $id,
+            'name' => [
+                'required',
+                'string',
+                'max:255',
+                Rule::unique('producers')->ignore($id)
+            ],
             'address' => 'required|string|max:500',
             'country' => 'required|string|max:255',
             'phone_number' => 'nullable|string|max:255|regex:/^[\+]?[0-9\s\-\(\)]+$/',
-            'email' => 'nullable|email|max:255|unique:producers,email,' . $id,
+            'email' => [
+                'nullable',
+                'email',
+                'max:255',
+                Rule::unique('producers')->ignore($id)
+            ],
         ];
     }
Index: app/Models/Product.php
===================================================================
--- app/Models/Product.php	(revision 3989749f9bf29b73946732a608aec8454e3608f8)
+++ app/Models/Product.php	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
@@ -34,5 +34,5 @@
             'price' => 'required|numeric|min:0|max:999999.99',
             'producer_id' => 'required|string|exists:producers,id',
-            'unit_of_measure' => 'required|string|max:50|in:kg,g,lb,oz,piece,box,carton,pallet,liter,ml,gallon',
+            'unit_of_measure' => 'required|string|max:50|in:vial, ampule, bottle, pack, scatula, carton'
         ];
     }
Index: app/Models/User.php
===================================================================
--- app/Models/User.php	(revision 3989749f9bf29b73946732a608aec8454e3608f8)
+++ app/Models/User.php	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
@@ -8,4 +8,5 @@
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
+use Illuminate\Validation\Rule;
 
 class User extends Authenticatable
@@ -23,4 +24,15 @@
     ];
 
+//    public static function getValidationRules($id = null): array
+//    {
+//        $passwordRule = $id ? 'nullable' : 'required';
+//
+//        return [
+//            'name' => 'required|string|max:255',
+//            'email' => 'required|email|max:255|unique:users,email,' . $id,
+//            'password' => $passwordRule . '|string|min:8|confirmed',
+//            'is_admin' => 'required|boolean',
+//        ];
+//    }
     public static function getValidationRules($id = null): array
     {
@@ -29,5 +41,10 @@
         return [
             'name' => 'required|string|max:255',
-            'email' => 'required|email|max:255|unique:users,email,' . $id,
+            'email' => [
+                'required',
+                'email',
+                'max:255',
+                Rule::unique('users')->ignore($id)
+            ],
             'password' => $passwordRule . '|string|min:8|confirmed',
             'is_admin' => 'required|boolean',
Index: p/Traits/CrudTrait.php
===================================================================
--- app/Traits/CrudTrait.php	(revision 3989749f9bf29b73946732a608aec8454e3608f8)
+++ 	(revision )
@@ -1,17 +1,0 @@
-<?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/seeders/DatabaseSeeder.php
===================================================================
--- database/seeders/DatabaseSeeder.php	(revision 3989749f9bf29b73946732a608aec8454e3608f8)
+++ database/seeders/DatabaseSeeder.php	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
@@ -4,4 +4,5 @@
 
 use App\Models\Order;
+use App\Models\Payment;
 use Illuminate\Database\Seeder;
 use Faker\Factory;
@@ -18,4 +19,5 @@
             TransportSeeder::class,
             OrderSeeder::class,
+            PaymentSeeder::class
             //invoiceseeder
             //packinglistseeder
Index: database/seeders/PaymentSeeder.php
===================================================================
--- database/seeders/PaymentSeeder.php	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
+++ database/seeders/PaymentSeeder.php	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
@@ -0,0 +1,64 @@
+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Str;
+use App\Models\Order;
+
+class PaymentSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        // Ensure at least one order exists
+        if (Order::count() === 0) {
+            $this->command->warn('No orders found. Creating a dummy order first.');
+
+            $order = Order::create([
+                'id' => Str::uuid(),
+                'customer_id' => Str::uuid(), // adjust if you have customer relation
+                'order_date' => now(),
+                'status' => 'pending',
+                // add any other required fields from your orders migration
+            ]);
+        } else {
+            $order = Order::inRandomOrder()->first();
+        }
+
+        // Example payment data
+        $payments = [
+            [
+                'id' => Str::uuid(),
+                'order_id' => $order->id,
+                'amount' => 1500.00,
+                'currency' => 'USD',
+                'due_date' => now()->addDays(30),
+                'exchange_rate' => 1.0,
+                'payment_date' => null,
+                'payment_method' => 'bank_transfer',
+                'payment_status' => 'pending',
+                'created_at' => now(),
+                'updated_at' => now(),
+            ],
+            [
+                'id' => Str::uuid(),
+                'order_id' => $order->id,
+                'amount' => 2000.00,
+                'currency' => 'EUR',
+                'due_date' => now()->addDays(15),
+                'exchange_rate' => 1.1,
+                'payment_date' => now()->addDays(5),
+                'payment_method' => 'credit_card',
+                'payment_status' => 'completed',
+                'created_at' => now(),
+                'updated_at' => now(),
+            ],
+        ];
+
+        DB::table('payments')->insert($payments);
+    }
+}
Index: package.json
===================================================================
--- package.json	(revision 3989749f9bf29b73946732a608aec8454e3608f8)
+++ package.json	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
@@ -46,4 +46,5 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "date-fns": "^4.1.0",
         "lib-utils": "^0.0.4",
         "lib-utils-ts": "^0.0.0-test",
Index: resources/js/Layout/App.vue
===================================================================
--- resources/js/Layout/App.vue	(revision 3989749f9bf29b73946732a608aec8454e3608f8)
+++ resources/js/Layout/App.vue	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
@@ -3,4 +3,5 @@
     Bell,
     CircleUser,
+    DollarSignIcon,
     Home,
     LineChart,
@@ -9,4 +10,5 @@
     Package2,
     Pill,
+    PillBottle,
     Search,
     ShoppingCart,
@@ -59,4 +61,5 @@
 const { setTheme } = useTheme();
 const page = usePage();
+const isAdmin = computed(() => page.props.auth?.user?.is_admin);
 
 // Refactored navigation items as a computed property
@@ -78,4 +81,12 @@
     },
     {
+        name: 'Batches',
+        href: route('generic.index', { model: 'batches' }),
+        icon: PillBottle,
+        current: route().current('generic.index', { model: 'batches' }),
+        routeName: 'GenericModelPage',
+        model: 'batches',
+    },
+    {
         name: 'Clients',
         href: route('generic.index', { model: 'clients' }),
@@ -101,5 +112,26 @@
         model: 'transport',
     },
+    {
+        name: 'Payments',
+        href: route('generic.index', { model: 'payments' }),
+        icon: DollarSignIcon,
+        current: route().current('generic.index', { model: 'payments' }),
+        routeName: 'GenericModelPage',
+        model: 'payments',
+    },
 ]);
+
+// const sidebarItems = computed(() => {
+//    let items = [...navigationItems];
+//
+//    if (isAdmin.value) {
+//        items.push({
+//            name: 'Users',
+//            href: route('generic.index', { model: 'users' }),
+//
+//        })
+//    }
+//    return items;
+// });
 
 // Helper to determine active link classes and remove duplication
Index: resources/js/Pages/GenericModelPage.vue
===================================================================
--- resources/js/Pages/GenericModelPage.vue	(revision 3989749f9bf29b73946732a608aec8454e3608f8)
+++ resources/js/Pages/GenericModelPage.vue	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
@@ -1,8 +1,29 @@
 <script setup lang="ts">
-import {ref, watch, reactive, computed} from 'vue';
-import {router} from '@inertiajs/vue3';
-import {ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, ExternalLink} from 'lucide-vue-next';
-import {debounce} from 'lodash-es';
 import App from '@/Layout/App.vue';
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
+import { Calendar } from '@/components/ui/calendar';
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from '@/components/ui/popover';
+import { CalendarIcon } from 'lucide-vue-next'
+import { format } from 'date-fns'
 import {
     Table,
@@ -13,23 +34,16 @@
     TableRow,
 } from '@/components/ui/table';
-import {Input} from '@/components/ui/input';
-import {Button} from '@/components/ui/button';
+import { router } from '@inertiajs/vue3';
+import { debounce } from 'lodash-es';
 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';
+    ChevronLeft,
+    ChevronRight,
+    ChevronsLeft,
+    ChevronsRight,
+    ExternalLink,
+} from 'lucide-vue-next';
+import { computed, reactive, ref, watch } from 'vue';
 //import {Textarea} from '@/components/ui/textarea';
-import {toCamelCase, formatLabel} from '@/lib/utils';
+import { formatLabel } from '@/lib/utils';
 
 interface PaginatedData {
@@ -93,11 +107,11 @@
 const foreignKeyMap = computed(() => {
     const fkMap: Record<string, string> = {
-        'product_id': 'products',  // Foreign key pointing to `products`
-        'buyer_id': 'clients',     // Foreign key pointing to `clients`
-        'receiver_id': 'clients',  // Foreign key pointing to `clients`
-        'transport_id': 'transports', // Foreign key pointing to `transports`
-        'producer_id': 'producers',  // Foreign key pointing to `producers`
-        'order_id': 'orders',      // Foreign key pointing to `orders`
-        'payment_id': 'payments',  // Foreign key pointing to `payments`
+        product_id: 'products', // Foreign key pointing to `products`
+        buyer_id: 'clients', // Foreign key pointing to `clients`
+        receiver_id: 'clients', // Foreign key pointing to `clients`
+        transport_id: 'transports', // Foreign key pointing to `transports`
+        producer_id: 'producers', // Foreign key pointing to `producers`
+        order_id: 'orders', // Foreign key pointing to `orders`
+        payment_id: 'payments', // Foreign key pointing to `payments`
     };
     return fkMap;
@@ -110,24 +124,42 @@
 
 // Helper to get the related model name for display
+// const getRelatedModelName = (item: any, field: string): string => {
+//     const fkInfo = foreignKeyMap.value[field];
+//     if (!fkInfo) return item[field] || 'N/A';
+//
+//     // Check if the related data is loaded (assuming eager loading)
+//     const relationName = field.replace('_id', '');
+//     if (item[relationName] && item[relationName].name) {
+//         return item[relationName].name;
+//     }
+//
+//     // For orders or other models without names, show the ID
+//     if (fkInfo.nameField === 'id') {
+//         return item[field] || 'N/A';
+//     }
+//
+//     // Fallback to the foreign key value
+//     return item[field] || 'N/A';
+// };
+
+// Fixed helper to get the related model name for display
 const getRelatedModelName = (item: any, field: string): string => {
-    const fkInfo = foreignKeyMap.value[field];
-    if (!fkInfo) return item[field] || 'N/A';
+    const relationName = field.replace('_id', '');
 
     // Check if the related data is loaded (assuming eager loading)
-    const relationName = field.replace('_id', '');
     if (item[relationName] && item[relationName].name) {
-        return item[relationName].name;
-    }
-
-    // For orders or other models without names, show the ID
-    if (fkInfo.nameField === 'id') {
-        return item[field] || 'N/A';
+        return item[relationName].name; // This returns the name if available
+    }
+
+    // Check if the related data has an id but no name
+    if (item[relationName] && item[relationName].id) {
+        return `#${item[relationName].id}`; // This returns the ID with a hash prefix
     }
 
     // Fallback to the foreign key value
-    return item[field] || 'N/A';
-};
-
-// Helper to navigate to related model
+    return item[field] ? item[field].toString() : 'N/A';
+};
+
+// Helper to navigate to the related model
 const navigateToRelatedModel = (field: string, value: any) => {
     const fkTable = foreignKeyMap.value[field];
@@ -138,5 +170,5 @@
 
     router.get(`/${fkTable}`, {
-        open_id: targetId
+        open_id: targetId,
     });
 };
@@ -224,12 +256,16 @@
 
         // Debug the item being expanded
-        const item = props.items.data.find(i => i.id === itemId);
+        const item = props.items.data.find((i) => i.id === itemId);
         console.log('🔍 Expanding item:', item);
         console.log('🔍 Item keys:', Object.keys(item));
 
         // Check specifically for producer-related fields
-        Object.keys(item).forEach(key => {
+        Object.keys(item).forEach((key) => {
             if (key.toLowerCase().includes('producer')) {
-                console.log(`🔍 Producer-related field "${key}":`, typeof item[key], item[key]);
+                console.log(
+                    `🔍 Producer-related field "${key}":`,
+                    typeof item[key],
+                    item[key],
+                );
             }
         });
@@ -238,45 +274,77 @@
 
 // Utility to convert camelCase back to snake_case
-const toSnakeCase = (str: string) =>
-    str.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`);
-
-const transformKeysToSnakeCase = (form: Record<string, any>) => {
-    const result: Record<string, any> = {};
-    for (const key in form) {
-        result[toSnakeCase(key)] = form[key];
-    }
-    return result;
-};
+// const toSnakeCase = (str: string) =>
+//     str.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);
+
+// const transformKeysToSnakeCase = (form: Record<string, any>) => {
+//     const result: Record<string, any> = {};
+//     for (const key in form) {
+//         result[toSnakeCase(key)] = form[key];
+//     }
+//     return result;
+// };
 
 // Submit create form
+// const submitCreate = () => {
+//     console.log('CreateForm payload:', createForm);
+//     router.post(`/${props.model.toLowerCase()}s`, createForm, {
+//         onSuccess: () => {
+//             createDialogOpen.value = false;
+//             resetCreateForm();
+//         },
+//     });
+// };
 const submitCreate = () => {
-    router.post(
-        `/${props.model.toLowerCase()}s`,
-        transformKeysToSnakeCase(createForm),
+    console.log('CreateForm payload:', createForm);
+
+    router.post(`/${props.model.toLowerCase()}s`, createForm, {
+        onSuccess: (page) => {
+            createDialogOpen.value = false;
+            resetCreateForm();
+        },
+        onError: (errors) => {
+            console.error('Create failed:', errors);
+            // Handle validation errors here
+        },
+        preserveState: false, // This helps with state refresh
+    });
+};
+
+// Submit edit form
+// const submitEdit = () => {
+//     if (!currentEditItem.value) return;
+//
+//     router.put(
+//         `/${props.model.toLowerCase()}s/${currentEditItem.value.id}`,
+//         editForm,
+//         {
+//             onSuccess: () => {
+//                 editDialogOpen.value = false;
+//                 currentEditItem.value = null;
+//             },
+//         },
+//     );
+// };
+
+const submitEdit = () => {
+    if (!currentEditItem.value) return;
+
+    router.put(
+        `/${props.model.toLowerCase()}s/${currentEditItem.value.id}`,
+        editForm,
         {
-            onSuccess: () => {
-                createDialogOpen.value = false;
-                resetCreateForm();
+            onSuccess: (page) => {
+                editDialogOpen.value = false;
+                currentEditItem.value = null;
+                // Clear the edit form
+                Object.keys(editForm).forEach((key) => delete editForm[key]);
             },
+            onError: (errors) => {
+                console.error('Update failed:', errors);
+            },
+            preserveState: false,
         },
     );
 };
-
-// Submit edit form
-const submitEdit = () => {
-    if (!currentEditItem.value) return;
-
-    router.put(
-        `/${props.model.toLowerCase()}s/${currentEditItem.value.id}`,
-        transformKeysToSnakeCase(editForm),
-        {
-            onSuccess: () => {
-                editDialogOpen.value = false;
-                currentEditItem.value = null;
-            },
-        },
-    );
-};
-
 
 // Delete item
@@ -318,5 +386,5 @@
         (field) =>
             !['id', 'created_at', 'updated_at'].includes(field) &&
-            typeof props.items.data[0][field] !== 'object'
+            typeof props.items.data[0][field] !== 'object',
     );
 });
@@ -347,13 +415,17 @@
 
 const detailFields = computed(() => {
-    return fields.value.filter(field => {
+    return fields.value.filter((field) => {
         // Exclude basic fields we don't want to show
         if (['id', 'created_at', 'updated_at'].includes(field)) return false;
 
         // Exclude relationship objects (keep only foreign keys ending with _id)
-        // This will exclude 'producer' object but keep 'producer_id'
+        // This will exclude the 'producer' object but keep 'producer_id'
         if (props.items.data.length > 0) {
             const value = props.items.data[0][field];
-            if (typeof value === 'object' && value !== null && !field.endsWith('_id')) {
+            if (
+                typeof value === 'object' &&
+                value !== null &&
+                !field.endsWith('_id')
+            ) {
                 return false;
             }
@@ -364,82 +436,191 @@
 });
 
-const descriptionFields = ["description", "status", "insurance_conditions", "notes"];
+const descriptionFields = [
+    'description',
+    'status',
+    'insurance_conditions',
+    'notes',
+];
 
 // returns the first description field if available
-const getDialogDescription = (fields: string[]): string | null => {
-    const found = fields.find(f => descriptionFields.includes(f));
-    if (!found) return null;
-
-    // humanize
-    return `Please provide a value for "${found.replace(/_/g, " ")}".`;
-};
-
+const dialogDescription = computed(() => {
+    const hasDescription = detailFields.value.some((f) =>
+        descriptionFields.includes(f),
+    );
+    if (hasDescription) {
+        return `Please fill in all required fields including the description.`;
+    }
+    return `Fill in the details to create a new ${props.model}.`;
+});
+
+// const getFieldType = (
+//     field: string,
+// ): 'boolean' | 'date' | 'number' | 'foreignKey' | 'string' => {
+//     if (isForeignKey(field)) {
+//         return 'foreignKey';
+//     }
+//     if (props.items.data.length === 0) return 'string';
+//
+//     const value = props.items.data[0][field];
+//
+//     if (typeof value === 'boolean') {
+//         return 'boolean';
+//     }
+//     if (typeof value === 'number') {
+//         return 'number';
+//     }
+//     if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}/.test(value)) {
+//         return 'date';
+//     }
+//
+//     return 'string';
+// };
 const getFieldType = (field: string): 'boolean' | 'date' | 'number' | 'foreignKey' | 'string' => {
-  if (isForeignKey(field)) {
-    return 'foreignKey';
-  }
-  if (props.items.data.length === 0) return 'string';
-
-  const value = props.items.data[0][field];
-
-  if (typeof value === 'boolean') {
-    return 'boolean';
-  }
-  if (typeof value === 'number') {
-    return 'number';
-  }
-  if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}/.test(value)) {
-    return 'date';
-  }
-
-  return 'string';
+    if (isForeignKey(field)) {
+        return 'foreignKey';
+    }
+    if (props.items.data.length === 0) return 'string';
+
+    const value = props.items.data[0][field];
+
+    if (typeof value === 'boolean') {
+        return 'boolean';
+    }
+    if (typeof value === 'number') {
+        return 'number';
+    }
+    if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}/.test(value)) {
+        return 'date';
+    }
+
+    return 'string';
 };
 
 const formatDateForInput = (val: any) => {
-  if (!val) return '';
-  const d = new Date(val);
-  if (isNaN(d.getTime())) return '';
-  return d.toISOString().slice(0, 10);
-};
+    if (!val) return '';
+    const d = new Date(val);
+    if (isNaN(d.getTime())) return '';
+    return d.toISOString().slice(0, 10);
+};
+
+// const resetCreateForm = () => {
+//   Object.keys(createForm).forEach(key => delete createForm[key]);
+//   detailFields.value.forEach(field => {
+//     const camel = toCamelCase(field);
+//     if (getFieldType(field) === 'boolean') {
+//       createForm[camel] = false;
+//     } else if (getFieldType(field) === 'date') {
+//       createForm[camel] = '';
+//     } else {
+//       createForm[camel] = '';
+//     }
+//   });
+// };
+
+// const resetCreateForm = () => {
+//     Object.keys(createForm).forEach((key) => delete createForm[key]);
+//     detailFields.value.forEach((field) => {
+//         if (getFieldType(field) === 'boolean') {
+//             createForm[field] = false;
+//         } else if (getFieldType(field) === 'date') {
+//             createForm[field] = '';
+//         } else {
+//             createForm[field] = '';
+//         }
+//     });
+// };
 
 const resetCreateForm = () => {
-  Object.keys(createForm).forEach(key => delete createForm[key]);
-  detailFields.value.forEach(field => {
-    const camel = toCamelCase(field);
-    if (getFieldType(field) === 'boolean') {
-      createForm[camel] = false;
-    } else if (getFieldType(field) === 'date') {
-      createForm[camel] = '';
-    } else {
-      createForm[camel] = '';
-    }
-  });
+    // Clear existing form data
+    Object.keys(createForm).forEach((key) => delete createForm[key]);
+
+    // Initialize form with default values
+    detailFields.value.forEach((field) => {
+        const fieldType = getFieldType(field);
+        switch (fieldType) {
+            case 'boolean':
+                createForm[field] = false;
+                break;
+            case 'date':
+                createForm[field] = '';
+                break;
+            case 'number':
+                createForm[field] = 0;
+                break;
+            case 'foreignKey':
+                createForm[field] = null; // Use null instead of empty string
+                break;
+            default:
+                createForm[field] = '';
+        }
+    });
 };
 
 resetCreateForm();
 
+// const openEditDialog = (item: any) => {
+//   currentEditItem.value = item;
+//   Object.keys(editForm).forEach(key => delete editForm[key]);
+//
+//   for (const field of detailFields.value) {
+//     const camel = toCamelCase(field);
+//     if (getFieldType(field) === 'date') {
+//       editForm[camel] = formatDateForInput(item[field]);
+//     } else if (getFieldType(field) === 'boolean') {
+//       editForm[camel] = Boolean(item[field]);
+//     } else {
+//       editForm[camel] = item[field];
+//     }
+//   }
+//   editDialogOpen.value = true;
+// };
+
+// const openEditDialog = (item: any) => {
+//     currentEditItem.value = item;
+//     Object.keys(editForm).forEach((key) => delete editForm[key]);
+//
+//     for (const field of detailFields.value) {
+//         if (getFieldType(field) === 'date') {
+//             editForm[field] = formatDateForInput(item[field]);
+//         } else if (getFieldType(field) === 'boolean') {
+//             editForm[field] = Boolean(item[field]);
+//         } else {
+//             editForm[field] = item[field];
+//         }
+//     }
+//     editDialogOpen.value = true;
+// };
+
 const openEditDialog = (item: any) => {
-  currentEditItem.value = item;
-  Object.keys(editForm).forEach(key => delete editForm[key]);
-
-  for (const field of detailFields.value) {
-    const camel = toCamelCase(field);
-    if (getFieldType(field) === 'date') {
-      editForm[camel] = formatDateForInput(item[field]);
-    } else if (getFieldType(field) === 'boolean') {
-      editForm[camel] = Boolean(item[field]);
-    } else {
-      editForm[camel] = item[field];
-    }
-  }
-  editDialogOpen.value = true;
+    currentEditItem.value = item;
+
+    // Clear existing form data
+    Object.keys(editForm).forEach((key) => delete editForm[key]);
+
+    // Populate form with item data
+    for (const field of detailFields.value) {
+        const fieldType = getFieldType(field);
+        switch (fieldType) {
+            case 'date':
+                editForm[field] = formatDateForInput(item[field]);
+                break;
+            case 'boolean':
+                editForm[field] = Boolean(item[field]);
+                break;
+            case 'foreignKey':
+                // Handle foreign key values properly
+                editForm[field] = item[field] || null;
+                break;
+            default:
+                editForm[field] = item[field] || '';
+        }
+    }
+
+    console.log('Edit form populated:', editForm);
+    editDialogOpen.value = true;
 };
 </script>
 
 <style scoped>
-.table-auto-layout {
-    table-layout: auto;
-}
-
 .fk-link {
     color: #2563eb;
@@ -474,5 +655,5 @@
                     <Select v-model="perPage">
                         <SelectTrigger class="w-[120px]">
-                            <SelectValue/>
+                            <SelectValue />
                         </SelectTrigger>
                         <SelectContent>
@@ -483,9 +664,12 @@
                         </SelectContent>
                     </Select>
-                    <Button @click="createDialogOpen = true">Create {{ model }}</Button>
+                    <Button @click="createDialogOpen = true"
+                        >Create {{ model }}</Button
+                    >
                 </div>
 
-                <div class="text-sm text-muted-foreground">
-                    Showing {{ items.from }} to {{ items.to }} of {{ items.total }} results
+                <div class="text-muted-foreground text-sm">
+                    Showing {{ items.from }} to {{ items.to }} of
+                    {{ items.total }} results
                 </div>
             </div>
@@ -495,5 +679,8 @@
                     <TableHeader>
                         <TableRow>
-                            <TableHead v-for="field in tableFields" :key="field">
+                            <TableHead
+                                v-for="field in tableFields"
+                                :key="field"
+                            >
                                 {{ formatLabel(field.replace('_id', '')) }}
                             </TableHead>
@@ -506,5 +693,5 @@
                             <template v-for="item in items.data" :key="item.id">
                                 <TableRow
-                                    class="cursor-pointer hover:bg-muted/50"
+                                    class="hover:bg-muted/50 cursor-pointer"
                                     @click="toggleRowExpansion(item.id)"
                                 >
@@ -512,13 +699,28 @@
                                         v-for="field in tableFields"
                                         :key="field"
-                                        class="font-medium max-w-[200px] truncate whitespace-nowrap overflow-hidden"
+                                        class="max-w-[200px] truncate overflow-hidden font-medium whitespace-nowrap"
                                     >
                                         <!-- Handle foreign keys with clickable links -->
-                                        <template v-if="isForeignKey(field) && item[field]">
+                                        <template
+                                            v-if="
+                                                isForeignKey(field) &&
+                                                item[field]
+                                            "
+                                        >
                                             <span
                                                 class="fk-link"
-                                                @click.stop="navigateToRelatedModel(field, item[field])"
+                                                @click.stop="
+                                                    navigateToRelatedModel(
+                                                        field,
+                                                        item[field],
+                                                    )
+                                                "
                                             >
-                                                {{ getRelatedModelName(item, field) }}
+                                                {{
+                                                    getRelatedModelName(
+                                                        item,
+                                                        field,
+                                                    )
+                                                }}
                                                 <ExternalLink class="h-3 w-3" />
                                             </span>
@@ -526,9 +728,15 @@
                                         <!-- Handle regular fields -->
                                         <template v-else>
-                                            {{ formatValue(item[field], field) }}
+                                            {{
+                                                formatValue(item[field], field)
+                                            }}
                                         </template>
                                     </TableCell>
                                     <TableCell>
-                                        {{ new Date(item.created_at).toLocaleDateString() }}
+                                        {{
+                                            new Date(
+                                                item.created_at,
+                                            ).toLocaleDateString()
+                                        }}
                                     </TableCell>
                                     <TableCell class="flex space-x-2">
@@ -536,7 +744,13 @@
                                             variant="outline"
                                             size="sm"
-                                            @click.stop="toggleRowExpansion(item.id)"
+                                            @click.stop="
+                                                toggleRowExpansion(item.id)
+                                            "
                                         >
-                                            {{ expandedRows.has(item.id) ? 'Hide' : 'Show' }}
+                                            {{
+                                                expandedRows.has(item.id)
+                                                    ? 'Hide'
+                                                    : 'Show'
+                                            }}
                                         </Button>
                                         <Button
@@ -557,31 +771,86 @@
                                 </TableRow>
 
-                                <TableRow v-if="expandedRows.has(item.id)" class="bg-muted/20">
-                                    <TableCell :colspan="tableFields.length + 2" class="p-4">
+                                <TableRow
+                                    v-if="expandedRows.has(item.id)"
+                                    class="bg-muted/20"
+                                >
+                                    <TableCell
+                                        :colspan="tableFields.length + 2"
+                                        class="p-4"
+                                    >
                                         <div class="space-y-3">
-                                            <h4 class="font-semibold">{{ model }} Details</h4>
-                                            <div class="grid grid-cols-2 gap-4 text-sm">
-                                                <div v-for="field in detailFields" :key="field">
-                                                    <strong>{{ formatLabel(field.replace('_id', '')) }}:</strong>
+                                            <h4 class="font-semibold">
+                                                {{ model }} Details
+                                            </h4>
+                                            <div
+                                                class="grid grid-cols-2 gap-4 text-sm"
+                                            >
+                                                <div
+                                                    v-for="field in detailFields"
+                                                    :key="field"
+                                                >
+                                                    <strong
+                                                        >{{
+                                                            formatLabel(
+                                                                field.replace(
+                                                                    '_id',
+                                                                    '',
+                                                                ),
+                                                            )
+                                                        }}:</strong
+                                                    >
                                                     <!-- Handle foreign keys in detail view -->
-                                                    <template v-if="isForeignKey(field) && item[field]">
+                                                    <template
+                                                        v-if="
+                                                            isForeignKey(
+                                                                field,
+                                                            ) && item[field]
+                                                        "
+                                                    >
                                                         <span
                                                             class="fk-link ml-2"
-                                                            @click.stop="navigateToRelatedModel(field, item[field])"
+                                                            @click.stop="
+                                                                navigateToRelatedModel(
+                                                                    field,
+                                                                    item[field],
+                                                                )
+                                                            "
                                                         >
-                                                            {{ getRelatedModelName(item, field) }}
-                                                            <ExternalLink class="h-3 w-3" />
+                                                            {{
+                                                                getRelatedModelName(
+                                                                    item,
+                                                                    field,
+                                                                )
+                                                            }}
+                                                            <ExternalLink
+                                                                class="h-3 w-3"
+                                                            />
                                                         </span>
                                                     </template>
                                                     <template v-else>
-                                                        {{ formatValue(item[field], field) }}
+                                                        {{
+                                                            formatValue(
+                                                                item[field],
+                                                                field,
+                                                            )
+                                                        }}
                                                     </template>
                                                 </div>
                                             </div>
-                                            <div class="text-xs text-muted-foreground mt-2">
+                                            <div
+                                                class="text-muted-foreground mt-2 text-xs"
+                                            >
                                                 Created:
-                                                {{ new Date(item.created_at).toLocaleString() }} |
-                                                Updated:
-                                                {{ new Date(item.updated_at).toLocaleString() }}
+                                                {{
+                                                    new Date(
+                                                        item.created_at,
+                                                    ).toLocaleString()
+                                                }}
+                                                | Updated:
+                                                {{
+                                                    new Date(
+                                                        item.updated_at,
+                                                    ).toLocaleString()
+                                                }}
                                             </div>
                                         </div>
@@ -591,5 +860,8 @@
                         </template>
                         <TableRow v-else>
-                            <TableCell :colspan="tableFields.length + 2" class="h-24 text-center">
+                            <TableCell
+                                :colspan="tableFields.length + 2"
+                                class="h-24 text-center"
+                            >
                                 No {{ model.toLowerCase() }}s found.
                             </TableCell>
@@ -600,5 +872,5 @@
 
             <div class="flex items-center justify-between">
-                <div class="text-sm text-muted-foreground">
+                <div class="text-muted-foreground text-sm">
                     Page {{ items.current_page }} of {{ items.last_page }}
                 </div>
@@ -610,5 +882,5 @@
                         @click="goToFirstPage"
                     >
-                        <ChevronsLeft class="h-4 w-4"/>
+                        <ChevronsLeft class="h-4 w-4" />
                         <span class="sr-only">Go to first page</span>
                     </Button>
@@ -619,5 +891,5 @@
                         @click="goToPreviousPage"
                     >
-                        <ChevronLeft class="h-4 w-4"/>
+                        <ChevronLeft class="h-4 w-4" />
                         Previous
                     </Button>
@@ -629,5 +901,5 @@
                     >
                         Next
-                        <ChevronRight class="h-4 w-4"/>
+                        <ChevronRight class="h-4 w-4" />
                     </Button>
                     <Button
@@ -637,5 +909,5 @@
                         @click="goToLastPage"
                     >
-                        <ChevronsRight class="h-4 w-4"/>
+                        <ChevronsRight class="h-4 w-4" />
                         <span class="sr-only">Go to last page</span>
                     </Button>
@@ -645,135 +917,233 @@
 
         <Dialog v-model:open="createDialogOpen">
-      <DialogContent class="sm:max-w-3xl">
-        <DialogHeader>
-          <DialogTitle>Create New {{ model }}</DialogTitle>
-        </DialogHeader>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 py-4">
-          <div v-for="field in detailFields" :key="field" class="space-y-2">
-            <Label :for="field">{{ formatLabel(field.replace('_id', '')) }}</Label>
-
-            <!-- Dynamic input types for create form -->
-            <div v-if="getFieldType(field) === 'foreignKey'">
-              <Select v-model="createForm[toCamelCase(field)]" :aria-label="formatLabel(field)">
-                <SelectTrigger>
-                  <SelectValue placeholder="Select..." />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem
-                    v-for="option in props.relatedOptions[field] || []"
-                    :key="option.id"
-                    :value="option.id"
-                  >
-                    {{ option.name }}
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div v-else-if="getFieldType(field) === 'boolean'">
-              <input
-                type="checkbox"
-                :id="field"
-                v-model="createForm[toCamelCase(field)]"
-                class="checkbox"
-              />
-            </div>
-
-            <div v-else-if="getFieldType(field) === 'date'">
-              <input
-                type="date"
-                :id="field"
-                v-model="createForm[toCamelCase(field)]"
-                class="input"
-              />
-            </div>
-
-            <div v-else-if="getFieldType(field) === 'number'">
-              <input
-                type="number"
-                :id="field"
-                v-model.number="createForm[toCamelCase(field)]"
-                class="input"
-              />
-            </div>
-
-            <div v-else>
-              <Input :id="field" v-model="createForm[toCamelCase(field)]" />
-            </div>
-          </div>
-        </div>
-        <DialogFooter>
-          <Button variant="outline" @click="createDialogOpen = false">Cancel</Button>
-          <Button type="submit" @click="submitCreate">Create {{ model }}</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-
-    <!-- Edit Dialog -->
-    <Dialog v-model:open="editDialogOpen">
-      <DialogContent class="sm:max-w-3xl">
-        <DialogHeader>
-          <DialogTitle>Edit {{ model }}</DialogTitle>
-        </DialogHeader>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 py-4">
-          <div v-for="field in detailFields" :key="field" class="space-y-2">
-            <Label :for="`edit_${field}`">{{ formatLabel(field.replace('_id', '')) }}</Label>
-
-            <!-- Dynamic input types for edit form -->
-            <div v-if="getFieldType(field) === 'foreignKey'">
-              <Select v-model="editForm[toCamelCase(field)]" :aria-label="formatLabel(field)">
-                <SelectTrigger>
-                  <SelectValue placeholder="Select..." />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem
-                    v-for="option in props.relatedOptions[field] || []"
-                    :key="option.id"
-                    :value="option.id"
-                  >
-                    {{ option.name }}
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div v-else-if="getFieldType(field) === 'boolean'">
-              <input
-                type="checkbox"
-                :id="`edit_${field}`"
-                v-model="editForm[toCamelCase(field)]"
-                class="checkbox"
-              />
-            </div>
-
-            <div v-else-if="getFieldType(field) === 'date'">
-              <input
-                type="date"
-                :id="`edit_${field}`"
-                v-model="editForm[toCamelCase(field)]"
-                class="input"
-              />
-            </div>
-
-            <div v-else-if="getFieldType(field) === 'number'">
-              <input
-                type="number"
-                :id="`edit_${field}`"
-                v-model.number="editForm[toCamelCase(field)]"
-                class="input"
-              />
-            </div>
-
-            <div v-else>
-              <Input :id="`edit_${field}`" v-model="editForm[toCamelCase(field)]" />
-            </div>
-          </div>
-        </div>
-        <DialogFooter>
-          <Button variant="outline" @click="editDialogOpen = false">Cancel</Button>
-          <Button type="submit" @click="submitEdit">Save Changes</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+            <DialogContent class="aria-dialog-description sm:max-w-3xl">
+                <DialogHeader>
+                    <DialogTitle>Create New {{ model }}</DialogTitle>
+                    <p
+                        id="create-dialog-description"
+                        class="text-muted-foreground text-sm"
+                    >
+                        {{ dialogDescription }}
+                    </p>
+                </DialogHeader>
+                <div class="grid grid-cols-1 gap-4 py-4 md:grid-cols-2">
+                    <div
+                        v-for="field in detailFields"
+                        :key="field"
+                        class="space-y-2"
+                    >
+                        <Label :for="field">{{
+                            formatLabel(field.replace('_id', ''))
+                        }}</Label>
+
+                        <!-- Dynamic input types for create form -->
+                        <div v-if="getFieldType(field) === 'foreignKey'">
+                            <Select
+                                v-model="createForm[field]"
+                                :aria-label="formatLabel(field)"
+                            >
+                                <SelectTrigger>
+                                    <SelectValue placeholder="Select..." />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem
+                                        v-for="option in props.relatedOptions[
+                                            field
+                                        ] || []"
+                                        :key="option.id"
+                                        :value="option.id"
+                                    >
+                                        {{ option.name }}
+                                    </SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </div>
+
+                        <div v-else-if="getFieldType(field) === 'boolean'">
+<!--                            <input-->
+<!--                                type="checkbox"-->
+<!--                                :id="field"-->
+<!--                                v-model="createForm[field]"-->
+<!--                                class="checkbox"-->
+<!--                            />-->
+                            <Checkbox
+                                :id="field"
+                                v-model:checked="createForm[field]"
+                            />
+                        </div>
+
+<!--                        <div v-else-if="getFieldType(field) === 'date'">-->
+<!--                            <input-->
+<!--                                type="date"-->
+<!--                                :id="field"-->
+<!--                                v-model="createForm[field]"-->
+<!--                                class="input"-->
+<!--                            />-->
+<!--                        </div>-->
+                        <div v-else-if="getFieldType(field) === 'date'">
+                            <Popover>
+                                <PopoverTrigger as-child>
+                                    <Button variant="outline" class="w-full justify-start text-left font-normal">
+                                        <CalendarIcon class="mr-2 h-4 w-4" />
+                                        {{ createForm[field] ? format(new Date(createForm[field]), 'PPP') : 'Pick a date' }}
+                                    </Button>
+                                </PopoverTrigger>
+                                <PopoverContent class="w-auto p-0" align="start">
+                                    <Calendar
+                                        v-model="createForm[field]"
+                                        mode="single"
+                                        :initial-focus="true"
+                                    />
+                                </PopoverContent>
+                            </Popover>
+                        </div>
+
+                        <div v-else-if="getFieldType(field) === 'number'">
+<!--                            <input-->
+<!--                                type="number"-->
+<!--                                :id="field"-->
+<!--                                v-model.number="createForm[field]"-->
+<!--                                class="input"-->
+<!--                            />-->
+                            <Input
+                                type="number"
+                                :id="field"
+                                v-model.number="createForm[field]"
+                            />
+                        </div>
+
+                        <div v-else>
+                            <Input :id="field" v-model="createForm[field]" />
+                        </div>
+                    </div>
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" @click="createDialogOpen = false"
+                        >Cancel</Button
+                    >
+                    <Button type="submit" @click="submitCreate"
+                        >Create {{ model }}</Button
+                    >
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+
+        <!-- Edit Dialog -->
+        <Dialog v-model:open="editDialogOpen">
+            <DialogContent class="sm:max-w-3xl">
+                <DialogHeader>
+                    <DialogTitle>Edit {{ model }}</DialogTitle>
+                    <p
+                        id="edit-dialog-description"
+                        class="text-muted-foreground text-sm"
+                    >
+                        {{ dialogDescription }}
+                    </p>
+                </DialogHeader>
+                <div class="grid grid-cols-1 gap-4 py-4 md:grid-cols-2">
+                    <div
+                        v-for="field in detailFields"
+                        :key="field"
+                        class="space-y-2"
+                    >
+                        <Label :for="`edit_${field}`">{{
+                            formatLabel(field.replace('_id', ''))
+                        }}</Label>
+
+                        <!-- Dynamic input types for edit form -->
+                        <div v-if="getFieldType(field) === 'foreignKey'">
+                            <Select
+                                v-model="editForm[field]"
+                                :aria-label="formatLabel(field)"
+                            >
+                                <SelectTrigger>
+                                    <SelectValue placeholder="Select..." />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem
+                                        v-for="option in props.relatedOptions[
+                                            field
+                                        ] || []"
+                                        :key="option.id"
+                                        :value="option.id"
+                                    >
+                                        {{ option.name }}
+                                    </SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </div>
+
+                        <div v-else-if="getFieldType(field) === 'boolean'">
+<!--                            <input-->
+<!--                                type="checkbox"-->
+<!--                                :id="`edit_${field}`"-->
+<!--                                v-model="editForm[field]"-->
+<!--                                class="checkbox"-->
+<!--                            />-->
+                            <Checkbox
+                                :id="`edit_${field}`"
+                                v-model:checked="editForm[field]"
+                            />
+                        </div>
+
+<!--                        <div v-else-if="getFieldType(field) === 'date'">-->
+<!--                            <input-->
+<!--                                type="date"-->
+<!--                                :id="`edit_${field}`"-->
+<!--                                v-model="editForm[field]"-->
+<!--                                class="input"-->
+<!--                            />-->
+<!--                        </div>-->
+                        <div v-else-if="getFieldType(field) === 'date'">
+                            <Popover>
+                                <PopoverTrigger as-child>
+                                    <Button variant="outline" class="w-full justify-start text-left font-normal">
+                                        <CalendarIcon class="mr-2 h-4 w-4" />
+                                        {{ editForm[field] ? format(new Date(editForm[field]), 'PPP') : 'Pick a date' }}
+                                    </Button>
+                                </PopoverTrigger>
+                                <PopoverContent class="w-auto p-0" align="start">
+                                    <Calendar
+                                        v-model="editForm[field]"
+                                        mode="single"
+                                        :initial-focus="true"
+                                    />
+                                </PopoverContent>
+                            </Popover>
+                        </div>
+
+                        <div v-else-if="getFieldType(field) === 'number'">
+<!--                            <input-->
+<!--                                type="number"-->
+<!--                                :id="`edit_${field}`"-->
+<!--                                v-model.number="editForm[field]"-->
+<!--                                class="input"-->
+<!--                            />-->
+                            <Input
+                                type="number"
+                                :id="field"
+                                v-model.number="createForm[field]"
+                            />
+
+                        </div>
+
+                        <div v-else>
+                            <Input
+                                :id="`edit_${field}`"
+                                v-model="editForm[field]"
+                            />
+                        </div>
+                    </div>
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" @click="editDialogOpen = false"
+                        >Cancel</Button
+                    >
+                    <Button type="submit" @click="submitEdit"
+                        >Save Changes</Button
+                    >
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
     </App>
 </template>
Index: resources/js/components/ui/popover/Popover.vue
===================================================================
--- resources/js/components/ui/popover/Popover.vue	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
+++ resources/js/components/ui/popover/Popover.vue	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from "reka-ui"
+import { PopoverRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot
+    data-slot="popover"
+    v-bind="forwarded"
+  >
+    <slot />
+  </PopoverRoot>
+</template>
Index: resources/js/components/ui/popover/PopoverAnchor.vue
===================================================================
--- resources/js/components/ui/popover/PopoverAnchor.vue	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
+++ resources/js/components/ui/popover/PopoverAnchor.vue	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverAnchorProps } from "reka-ui"
+import { PopoverAnchor } from "reka-ui"
+
+const props = defineProps<PopoverAnchorProps>()
+</script>
+
+<template>
+  <PopoverAnchor
+    data-slot="popover-anchor"
+    v-bind="props"
+  >
+    <slot />
+  </PopoverAnchor>
+</template>
Index: resources/js/components/ui/popover/PopoverContent.vue
===================================================================
--- resources/js/components/ui/popover/PopoverContent.vue	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
+++ resources/js/components/ui/popover/PopoverContent.vue	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  PopoverContent,
+
+  PopoverPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    align: "center",
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      data-slot="popover-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>
Index: resources/js/components/ui/popover/PopoverTrigger.vue
===================================================================
--- resources/js/components/ui/popover/PopoverTrigger.vue	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
+++ resources/js/components/ui/popover/PopoverTrigger.vue	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from "reka-ui"
+import { PopoverTrigger } from "reka-ui"
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+  <PopoverTrigger
+    data-slot="popover-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </PopoverTrigger>
+</template>
Index: resources/js/components/ui/popover/index.ts
===================================================================
--- resources/js/components/ui/popover/index.ts	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
+++ resources/js/components/ui/popover/index.ts	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
@@ -0,0 +1,4 @@
+export { default as Popover } from "./Popover.vue"
+export { default as PopoverAnchor } from "./PopoverAnchor.vue"
+export { default as PopoverContent } from "./PopoverContent.vue"
+export { default as PopoverTrigger } from "./PopoverTrigger.vue"
Index: resources/js/types/index.d.ts
===================================================================
--- resources/js/types/index.d.ts	(revision 3989749f9bf29b73946732a608aec8454e3608f8)
+++ resources/js/types/index.d.ts	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
@@ -1,14 +1,28 @@
-export interface User {
-    id: number;
-    name: string;
-    email: string;
-    email_verified_at?: string;
+import { PageProps as InertiaPageProps } from '@inertiajs/core';
+
+declare module '@inertiajs/core' {
+    export interface PageProps extends InertiaPageProps {
+        auth: {
+            user: {
+                id: string;
+                name: string;
+                email: string;
+                is_admin: boolean;
+            } | null;
+        };
+    }
 }
-
-export type PageProps<
-    T extends Record<string, unknown> = Record<string, unknown>,
-> = T & {
-    auth: {
-        user: User;
-    };
-};
+// export interface User {
+//     id: number;
+//     name: string;
+//     email: string;
+//     email_verified_at?: string;
+// }
+//
+// export type PageProps<
+//     T extends Record<string, unknown> = Record<string, unknown>,
+// > = T & {
+//     auth: {
+//         user: User;
+//     };
+// };
Index: tsconfig.json
===================================================================
--- tsconfig.json	(revision 3989749f9bf29b73946732a608aec8454e3608f8)
+++ tsconfig.json	(revision 118d88fce4f1e1e88092c991a75f3b9bb10e6975)
@@ -2,4 +2,7 @@
     "compilerOptions": {
         "allowJs": true,
+        "lib": [
+            "es5", "es6", "dom", "dom.iterable"
+        ],
         "module": "ESNext",
         "moduleResolution": "bundler",
@@ -17,5 +20,5 @@
 
             "ziggy-js": ["./vendor/tightenco/ziggy"]
-        }
+        },
     },
     "include": ["vite.config.ts", "resources/**/*.ts", "resources/**/*.vue"]