Merge branch 'master' into Development

.github/copilot-instructions.md

@@ -22,7 +22,7 @@ ## Foundational Context
 - pestphp/pest (PEST) - v3
 - phpunit/phpunit (PHPUNIT) - v11
 - @inertiajs/vue3 (INERTIA) - v2
-- tailwindcss (TAILWINDCSS) - v3
+- tailwindcss (TAILWINDCSS) - v4
 - vue (VUE) - v3
 
 
@@ -359,11 +359,39 @@ ### Dark Mode
 - If existing pages and components support dark mode, new pages and components must support dark mode in a similar way, typically using `dark:`.
 
 
-=== tailwindcss/v3 rules ===
+=== tailwindcss/v4 rules ===
 
-## Tailwind 3
+## Tailwind 4
 
-- Always use Tailwind CSS v3 - verify you're using only classes supported by this version.
+- Always use Tailwind CSS v4 - do not use the deprecated utilities.
+- `corePlugins` is not supported in Tailwind v4.
+- In Tailwind v4, you import Tailwind using a regular CSS `@import` statement, not using the `@tailwind` directives used in v3:
+
+<code-snippet name="Tailwind v4 Import Tailwind Diff" lang="diff">
+   - @tailwind base;
+   - @tailwind components;
+   - @tailwind utilities;
+   + @import "tailwindcss";
+</code-snippet>
+
+
+### Replaced Utilities
+- Tailwind v4 removed deprecated utilities. Do not use the deprecated option - use the replacement.
+- Opacity values are still numeric.
+
+| Deprecated |	Replacement |
+|------------+--------------|
+| bg-opacity-* | bg-black/* |
+| text-opacity-* | text-black/* |
+| border-opacity-* | border-black/* |
+| divide-opacity-* | divide-black/* |
+| ring-opacity-* | ring-black/* |
+| placeholder-opacity-* | placeholder-black/* |
+| flex-shrink-* | shrink-* |
+| flex-grow-* | grow-* |
+| overflow-ellipsis | text-ellipsis |
+| decoration-slice | box-decoration-slice |
+| decoration-clone | box-decoration-clone |
 
 
 === tests rules ===

app/Console/Commands/RefreshMaterializedViews.php

@@ -0,0 +1,57 @@
+<?php
+
+namespace App\Console\Commands;
+
+use Illuminate\Console\Command;
+use Illuminate\Support\Facades\DB;
+
+class RefreshMaterializedViews extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'reports:refresh-mviews {--concurrently : Use CONCURRENTLY (Postgres 9.4+; requires indexes)}';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Refresh configured Postgres materialized views for reporting';
+
+    /**
+     * Execute the console command.
+     */
+    public function handle(): int
+    {
+        $views = (array) config('reports.materialized_views', []);
+        if (empty($views)) {
+            $this->info('No materialized views configured.');
+
+            return self::SUCCESS;
+        }
+
+        $concurrently = $this->option('concurrently') ? ' CONCURRENTLY' : '';
+
+        foreach ($views as $view) {
+            $name = trim((string) $view);
+            if ($name === '') {
+                continue;
+            }
+            $sql = 'REFRESH MATERIALIZED VIEW'.$concurrently.' '.DB::getPdo()->quote($name);
+            // PDO::quote wraps with single quotes; for identifiers we need double quotes or no quotes.
+            // Use a safe fallback: wrap with " if not already quoted
+            $safe = 'REFRESH MATERIALIZED VIEW'.$concurrently.' "'.str_replace('"', '""', $name).'"';
+            try {
+                DB::statement($safe);
+                $this->info("Refreshed: {$name}");
+            } catch (\Throwable $e) {
+                $this->error("Failed to refresh {$name}: ".$e->getMessage());
+            }
+        }
+
+        return self::SUCCESS;
+    }
+}

app/Console/Kernel.php

@@ -22,6 +22,15 @@ protected function schedule(Schedule $schedule): void
                 '--days' => $days,
             ])->dailyAt('02:00');
         }
+
+        // Optional: refresh configured materialized views for reporting
+        $views = (array) config('reports.materialized_views', []);
+        if (! empty($views)) {
+            $time = (string) (config('reports.refresh_time', '03:00') ?: '03:00');
+            $schedule->command('reports:refresh-mviews', [
+                '--concurrently' => true,
+            ])->dailyAt($time);
+        }
     }
 
     /**

app/Helpers/LZStringHelper.php

@@ -0,0 +1,224 @@
+<?php
+
+namespace App\Helpers;
+
+class LZStringHelper
+{
+    /**
+     * Decompresses a string compressed with LZ-String's compressToEncodedURIComponent method.
+     * This is a PHP port of the JavaScript LZ-String library.
+     *
+     * @param  string  $compressed
+     * @return string|null
+     */
+    public static function decompressFromEncodedURIComponent($compressed)
+    {
+        if ($compressed === null || $compressed === '') {
+            return '';
+        }
+
+        // Replace URL-safe characters back
+        $compressed = str_replace(' ', '+', $compressed);
+
+        return self::decompress(strlen($compressed), 32, function ($index) use ($compressed) {
+            return self::getBaseValue(self::$keyStrUriSafe, $compressed[$index]);
+        });
+    }
+
+    private static $keyStrUriSafe = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$';
+
+    private static function getBaseValue($alphabet, $character)
+    {
+        $pos = strpos($alphabet, $character);
+
+        return $pos !== false ? $pos : -1;
+    }
+
+    private static function decompress($length, $resetValue, $getNextValue)
+    {
+        $dictionary = [];
+        $enlargeIn = 4;
+        $dictSize = 4;
+        $numBits = 3;
+        $entry = '';
+        $result = [];
+        $data = ['val' => $getNextValue(0), 'position' => $resetValue, 'index' => 1];
+
+        for ($i = 0; $i < 3; $i++) {
+            $dictionary[$i] = chr($i);
+        }
+
+        $bits = 0;
+        $maxpower = pow(2, 2);
+        $power = 1;
+
+        while ($power != $maxpower) {
+            $resb = $data['val'] & $data['position'];
+            $data['position'] >>= 1;
+
+            if ($data['position'] == 0) {
+                $data['position'] = $resetValue;
+                $data['val'] = $getNextValue($data['index']++);
+            }
+
+            $bits |= ($resb > 0 ? 1 : 0) * $power;
+            $power <<= 1;
+        }
+
+        $next = $bits;
+
+        switch ($next) {
+            case 0:
+                $bits = 0;
+                $maxpower = pow(2, 8);
+                $power = 1;
+
+                while ($power != $maxpower) {
+                    $resb = $data['val'] & $data['position'];
+                    $data['position'] >>= 1;
+
+                    if ($data['position'] == 0) {
+                        $data['position'] = $resetValue;
+                        $data['val'] = $getNextValue($data['index']++);
+                    }
+
+                    $bits |= ($resb > 0 ? 1 : 0) * $power;
+                    $power <<= 1;
+                }
+
+                $c = chr($bits);
+                break;
+
+            case 1:
+                $bits = 0;
+                $maxpower = pow(2, 16);
+                $power = 1;
+
+                while ($power != $maxpower) {
+                    $resb = $data['val'] & $data['position'];
+                    $data['position'] >>= 1;
+
+                    if ($data['position'] == 0) {
+                        $data['position'] = $resetValue;
+                        $data['val'] = $getNextValue($data['index']++);
+                    }
+
+                    $bits |= ($resb > 0 ? 1 : 0) * $power;
+                    $power <<= 1;
+                }
+
+                $c = chr($bits);
+                break;
+
+            case 2:
+                return '';
+        }
+
+        $dictionary[$dictSize++] = $c;
+        $w = $c;
+        $result[] = $c;
+
+        while (true) {
+            if ($data['index'] > $length) {
+                return '';
+            }
+
+            $bits = 0;
+            $maxpower = pow(2, $numBits);
+            $power = 1;
+
+            while ($power != $maxpower) {
+                $resb = $data['val'] & $data['position'];
+                $data['position'] >>= 1;
+
+                if ($data['position'] == 0) {
+                    $data['position'] = $resetValue;
+                    $data['val'] = $getNextValue($data['index']++);
+                }
+
+                $bits |= ($resb > 0 ? 1 : 0) * $power;
+                $power <<= 1;
+            }
+
+            $c = $bits;
+
+            switch ($c) {
+                case 0:
+                    $bits = 0;
+                    $maxpower = pow(2, 8);
+                    $power = 1;
+
+                    while ($power != $maxpower) {
+                        $resb = $data['val'] & $data['position'];
+                        $data['position'] >>= 1;
+
+                        if ($data['position'] == 0) {
+                            $data['position'] = $resetValue;
+                            $data['val'] = $getNextValue($data['index']++);
+                        }
+
+                        $bits |= ($resb > 0 ? 1 : 0) * $power;
+                        $power <<= 1;
+                    }
+
+                    $dictionary[$dictSize++] = chr($bits);
+                    $c = $dictSize - 1;
+                    $enlargeIn--;
+                    break;
+
+                case 1:
+                    $bits = 0;
+                    $maxpower = pow(2, 16);
+                    $power = 1;
+
+                    while ($power != $maxpower) {
+                        $resb = $data['val'] & $data['position'];
+                        $data['position'] >>= 1;
+
+                        if ($data['position'] == 0) {
+                            $data['position'] = $resetValue;
+                            $data['val'] = $getNextValue($data['index']++);
+                        }
+
+                        $bits |= ($resb > 0 ? 1 : 0) * $power;
+                        $power <<= 1;
+                    }
+
+                    $dictionary[$dictSize++] = chr($bits);
+                    $c = $dictSize - 1;
+                    $enlargeIn--;
+                    break;
+
+                case 2:
+                    return implode('', $result);
+            }
+
+            if ($enlargeIn == 0) {
+                $enlargeIn = pow(2, $numBits);
+                $numBits++;
+            }
+
+            if (isset($dictionary[$c])) {
+                $entry = $dictionary[$c];
+            } else {
+                if ($c === $dictSize) {
+                    $entry = $w.$w[0];
+                } else {
+                    return null;
+                }
+            }
+
+            $result[] = $entry;
+
+            $dictionary[$dictSize++] = $w.$entry[0];
+            $enlargeIn--;
+
+            $w = $entry;
+
+            if ($enlargeIn == 0) {
+                $enlargeIn = pow(2, $numBits);
+                $numBits++;
+            }
+        }
+    }
+}

app/Http/Controllers/Admin/PackageController.php

@@ -288,6 +288,20 @@ public function cancel(Package $package): RedirectResponse
         return back()->with('success', 'Package canceled');
     }
 
+    public function destroy(Package $package): RedirectResponse
+    {
+        // Allow deletion only for drafts (not yet dispatched)
+        if ($package->status !== Package::STATUS_DRAFT) {
+            return back()->with('error', 'Package not in a deletable state.');
+        }
+
+        // Remove items first to avoid FK issues
+        $package->items()->delete();
+        $package->delete();
+
+        return back()->with('success', 'Package deleted');
+    }
+
     /**
      * List contracts for a given segment and include selected phone per person.
      */

app/Http/Controllers/ClientCaseContoller.php

@@ -7,6 +7,8 @@
 use App\Models\ClientCase;
 use App\Models\Contract;
 use App\Models\Document;
+use App\Services\Documents\DocumentStreamService;
+use App\Services\ReferenceDataCache;
 use App\Services\Sms\SmsService;
 use Exception;
 use Illuminate\Database\QueryException;
@@ -16,49 +18,50 @@
 
 class ClientCaseContoller extends Controller
 {
+    public function __construct(
+        protected ReferenceDataCache $referenceCache,
+        protected DocumentStreamService $documentStream,
+        protected \App\Services\ClientCaseDataService $caseDataService
+    ) {}
+
     /**
      * Display a listing of the resource.
      */
     public function index(ClientCase $clientCase, Request $request)
     {
+        $search = $request->input('search');
+
         $query = $clientCase::query()
-            ->with(['person.client', 'client.person'])
-            ->where('active', 1)
-            ->when($request->input('search'), function ($que, $search) {
-                $que->whereHas('person', function ($q) use ($search) {
-                    $q->where('full_name', 'ilike', '%'.$search.'%');
-                });
+            ->select('client_cases.*')
+            ->when($search, function ($que) use ($search) {
+                $que->join('person', 'person.id', '=', 'client_cases.person_id')
+                    ->where('person.full_name', 'ilike', '%'.$search.'%')
+                    ->groupBy('client_cases.id');
             })
+            ->where('client_cases.active', 1)
+            // Use LEFT JOINs for aggregated data to avoid subqueries
+            ->leftJoin('contracts', function ($join) {
+                $join->on('contracts.client_case_id', '=', 'client_cases.id')
+                    ->whereNull('contracts.deleted_at');
+            })
+            ->leftJoin('contract_segment', function ($join) {
+                $join->on('contract_segment.contract_id', '=', 'contracts.id')
+                    ->where('contract_segment.active', true);
+            })
+            ->leftJoin('accounts', 'accounts.contract_id', '=', 'contracts.id')
+            ->groupBy('client_cases.id')
             ->addSelect([
                 // Count of active contracts (a contract is considered active if it has an active pivot in contract_segment)
-                'active_contracts_count' => \DB::query()
-                    ->from('contracts')
-                    ->selectRaw('COUNT(*)')
-                    ->whereColumn('contracts.client_case_id', 'client_cases.id')
-                    ->whereNull('contracts.deleted_at')
-                    ->whereExists(function ($q) {
-                        $q->from('contract_segment')
-                            ->whereColumn('contract_segment.contract_id', 'contracts.id')
-                            ->where('contract_segment.active', true);
-                    }),
+                \DB::raw('COUNT(DISTINCT CASE WHEN contract_segment.id IS NOT NULL THEN contracts.id END) as active_contracts_count'),
                 // Sum of balances for accounts of active contracts
-                'active_contracts_balance_sum' => \DB::query()
-                    ->from('contracts')
-                    ->join('accounts', 'accounts.contract_id', '=', 'contracts.id')
-                    ->selectRaw('COALESCE(SUM(accounts.balance_amount), 0)')
-                    ->whereColumn('contracts.client_case_id', 'client_cases.id')
-                    ->whereNull('contracts.deleted_at')
-                    ->whereExists(function ($q) {
-                        $q->from('contract_segment')
-                            ->whereColumn('contract_segment.contract_id', 'contracts.id')
-                            ->where('contract_segment.active', true);
-                    }),
+                \DB::raw('COALESCE(SUM(CASE WHEN contract_segment.id IS NOT NULL THEN accounts.balance_amount END), 0) as active_contracts_balance_sum'),
             ])
-            ->orderByDesc('created_at');
+            ->with(['person.client', 'client.person'])
+            ->orderByDesc('client_cases.created_at');
 
         return Inertia::render('Cases/Index', [
             'client_cases' => $query
-                ->paginate($request->integer('perPage', 15), ['*'], 'client-cases-page')
+                ->paginate($request->integer('perPage', 15), ['*'], 'clientCasesPage')
                 ->withQueryString(),
             'filters' => $request->only(['search']),
         ]);
@@ -119,7 +122,7 @@ public function store(Request $request)
             });
         }
 
-        return to_route('client.show', $client);
+        return back()->with('success', 'Client created.')->with('flash_method', 'POST');
     }
 
     public function storeContract(ClientCase $clientCase, StoreContractRequest $request)
@@ -154,7 +157,7 @@ public function storeContract(ClientCase $clientCase, StoreContractRequest $requ
         // Preserve segment filter if present
         $segment = request('segment');
 
-        return to_route('clientCase.show', ['client_case' => $clientCase, 'segment' => $segment]);
+        return back()->with('success', 'Contract created.')->with('flash_method', 'POST');
     }
 
     public function updateContract(ClientCase $clientCase, string $uuid, UpdateContractRequest $request)
@@ -220,7 +223,7 @@ public function updateContract(ClientCase $clientCase, string $uuid, UpdateContr
         // Preserve segment filter if present
         $segment = request('segment');
 
-        return to_route('clientCase.show', ['client_case' => $clientCase, 'segment' => $segment]);
+        return back()->with('success', 'Contract updated.')->with('flash_method', 'PUT');
     }
 
     /**
@@ -320,7 +323,7 @@ public function storeActivity(ClientCase $clientCase, Request $request)
 
             // Stay on the current page (desktop or phone) instead of forcing a redirect to the desktop route.
             // Use 303 to align with Inertia's recommended POST/Redirect/GET behavior.
-            return back(303)->with('success', 'Successful created!');
+            return back(303)->with('success', 'Successful created!')->with('flash_method', 'POST');
         } catch (QueryException $e) {
             logger()->error('Database error occurred:', ['error' => $e->getMessage()]);
 
@@ -355,7 +358,7 @@ public function deleteContract(ClientCase $clientCase, string $uuid, Request $re
         // Preserve segment filter if present
         $segment = request('segment');
 
-        return to_route('clientCase.show', ['client_case' => $clientCase, 'segment' => $segment]);
+        return to_route('clientCase.show', ['client_case' => $clientCase, 'segment' => $segment])->with('flash_method', 'DELETE');
     }
 
     public function updateContractSegment(ClientCase $clientCase, string $uuid, Request $request)
@@ -393,7 +396,7 @@ public function updateContractSegment(ClientCase $clientCase, string $uuid, Requ
             }
         });
 
-        return back()->with('success', 'Contract segment updated.');
+        return back()->with('success', 'Contract segment updated.')->with('flash_method', 'PATCH');
     }
 
     public function patchContractMeta(ClientCase $clientCase, string $uuid, Request $request)
@@ -459,7 +462,7 @@ public function attachSegment(ClientCase $clientCase, Request $request)
             }
         });
 
-        return back()->with('success', 'Segment attached to case.');
+        return back()->with('success', 'Segment attached to case.')->with('flash_method', 'PATCH');
     }
 
     public function storeDocument(ClientCase $clientCase, Request $request)
@@ -513,7 +516,7 @@ public function storeDocument(ClientCase $clientCase, Request $request)
             \App\Jobs\GenerateDocumentPreview::dispatch($doc->id);
         }
 
-        return back()->with('success', 'Document uploaded.');
+        return back()->with('success', 'Document uploaded.')->with('flash_method', 'POST');
     }
 
     public function updateDocument(ClientCase $clientCase, Document $document, Request $request)
@@ -596,7 +599,7 @@ public function updateDocument(ClientCase $clientCase, Document $document, Reque
         $document->save();
 
         // Refresh documents list on page
-        return back()->with('success', __('Document updated.'));
+        return back()->with('success', 'Document updated.')->with('flash_method', 'PUT');
     }
 
     public function viewDocument(ClientCase $clientCase, Document $document, Request $request)
@@ -624,188 +627,7 @@ public function viewDocument(ClientCase $clientCase, Document $document, Request
             abort(404);
         }
 
-        // Optional: add authz checks here (e.g., policies)
-        $disk = $document->disk ?: 'public';
-        // Normalize relative path (handle legacy 'public/' or 'public\\' prefixes and backslashes on Windows)
-        $relPath = $document->path ?? '';
-        $relPath = str_replace('\\', '/', $relPath); // unify slashes
-        $relPath = ltrim($relPath, '/');
-        if (str_starts_with($relPath, 'public/')) {
-            $relPath = substr($relPath, 7);
-        }
-
-        // If a preview exists (e.g., PDF generated for doc/docx), stream that
-        $previewDisk = config('files.preview_disk', 'public');
-        if ($document->preview_path && Storage::disk($previewDisk)->exists($document->preview_path)) {
-            $stream = Storage::disk($previewDisk)->readStream($document->preview_path);
-            if ($stream === false) {
-                abort(404);
-            }
-
-            return response()->stream(function () use ($stream) {
-                fpassthru($stream);
-            }, 200, [
-                'Content-Type' => $document->preview_mime ?: 'application/pdf',
-                'Content-Disposition' => 'inline; filename="'.addslashes(($document->original_name ?: $document->file_name).'.pdf').'"',
-                'Cache-Control' => 'private, max-age=0, no-cache',
-                'Pragma' => 'no-cache',
-            ]);
-        }
-
-        // If it's a DOC/DOCX and no preview yet, queue generation and show 202 Accepted
-        $ext = strtolower(pathinfo($document->original_name ?: $document->file_name, PATHINFO_EXTENSION));
-        if (in_array($ext, ['doc', 'docx'])) {
-            \App\Jobs\GenerateDocumentPreview::dispatch($document->id);
-
-            return response('Preview is being generated. Please try again shortly.', 202);
-        }
-
-        // Try multiple path candidates to account for legacy prefixes
-        $candidates = [];
-        $candidates[] = $relPath;
-        // also try raw original (normalized slashes, trimmed)
-        $raw = $document->path ? ltrim(str_replace('\\', '/', $document->path), '/') : null;
-        if ($raw && $raw !== $relPath) {
-            $candidates[] = $raw;
-        }
-        // if path accidentally contains 'storage/' prefix (public symlink), strip it
-        if (str_starts_with($relPath, 'storage/')) {
-            $candidates[] = substr($relPath, 8);
-        }
-        if ($raw && str_starts_with($raw, 'storage/')) {
-            $candidates[] = substr($raw, 8);
-        }
-
-        $existsOnDisk = false;
-        foreach ($candidates as $cand) {
-            if (Storage::disk($disk)->exists($cand)) {
-                $existsOnDisk = true;
-                $relPath = $cand;
-                break;
-            }
-        }
-
-        if (! $existsOnDisk) {
-            // Fallback: some legacy files may live directly under public/, attempt to stream from there
-            $publicFull = public_path($relPath);
-            $real = @realpath($publicFull);
-            $publicRoot = @realpath(public_path());
-            $realN = $real ? str_replace('\\', '/', $real) : null;
-            $rootN = $publicRoot ? str_replace('\\', '/', $publicRoot) : null;
-            if ($realN && $rootN && str_starts_with($realN, $rootN) && is_file($real)) {
-                logger()->info('Document view fallback: serving from public path', [
-                    'document_id' => $document->id,
-                    'path' => $realN,
-                ]);
-                $fp = @fopen($real, 'rb');
-                if ($fp === false) {
-                    abort(404);
-                }
-
-                return response()->stream(function () use ($fp) {
-                    fpassthru($fp);
-                }, 200, [
-                    'Content-Type' => $document->mime_type ?: 'application/octet-stream',
-                    'Content-Disposition' => 'inline; filename="'.addslashes((($document->name ?: pathinfo($document->original_name ?: $document->file_name, PATHINFO_FILENAME)).'.'.strtolower(pathinfo($document->original_name ?: $document->file_name, PATHINFO_EXTENSION)))).'"',
-                    'Cache-Control' => 'private, max-age=0, no-cache',
-                    'Pragma' => 'no-cache',
-                ]);
-            }
-
-            logger()->warning('Document view 404: file missing on disk and public fallback failed', [
-                'document_id' => $document->id,
-                'document_uuid' => $document->uuid,
-                'disk' => $disk,
-                'path' => $document->path,
-                'normalizedCandidates' => $candidates,
-                'public_candidate' => $publicFull,
-            ]);
-            abort(404);
-        }
-
-        $stream = Storage::disk($disk)->readStream($relPath);
-        if ($stream === false) {
-            logger()->warning('Document view: readStream failed, attempting fallbacks', [
-                'document_id' => $document->id,
-                'disk' => $disk,
-                'relPath' => $relPath,
-            ]);
-
-            $headers = [
-                'Content-Type' => $document->mime_type ?: 'application/octet-stream',
-                'Content-Disposition' => 'inline; filename="'.addslashes((($document->name ?: pathinfo($document->original_name ?: $document->file_name, PATHINFO_FILENAME)).'.'.strtolower(pathinfo($document->original_name ?: $document->file_name, PATHINFO_EXTENSION)))).'"',
-                'Cache-Control' => 'private, max-age=0, no-cache',
-                'Pragma' => 'no-cache',
-            ];
-
-            // Fallback 1: get() the bytes directly
-            try {
-                $bytes = Storage::disk($disk)->get($relPath);
-            } catch (\Throwable $e) {
-                $bytes = null;
-            }
-            if (! is_null($bytes) && $bytes !== false) {
-                return response($bytes, 200, $headers);
-            }
-
-            // Fallback 2: open via absolute path (local driver)
-            $abs = null;
-            try {
-                if (method_exists(Storage::disk($disk), 'path')) {
-                    $abs = Storage::disk($disk)->path($relPath);
-                }
-            } catch (\Throwable $e) {
-                $abs = null;
-            }
-            if ($abs && is_file($abs)) {
-                $fp = @fopen($abs, 'rb');
-                if ($fp !== false) {
-                    logger()->info('Document view fallback: serving from absolute storage path', [
-                        'document_id' => $document->id,
-                        'abs' => str_replace('\\\\', '/', (string) realpath($abs)),
-                    ]);
-
-                    return response()->stream(function () use ($fp) {
-                        fpassthru($fp);
-                    }, 200, $headers);
-                }
-            }
-
-            // Fallback 3: serve from public path if available
-            $publicFull = public_path($relPath);
-            $real = @realpath($publicFull);
-            $publicRoot = @realpath(public_path());
-            $realN = $real ? str_replace('\\\\', '/', $real) : null;
-            $rootN = $publicRoot ? str_replace('\\\\', '/', $publicRoot) : null;
-            if ($realN && $rootN && str_starts_with($realN, $rootN) && is_file($real)) {
-                logger()->info('Document view fallback: serving from public path (post-readStream failure)', [
-                    'document_id' => $document->id,
-                    'path' => $realN,
-                ]);
-                $fp = @fopen($real, 'rb');
-                if ($fp !== false) {
-                    return response()->stream(function () use ($fp) {
-                        fpassthru($fp);
-                    }, 200, $headers);
-                }
-            }
-
-            logger()->warning('Document view 404: all fallbacks failed after readStream failure', [
-                'document_id' => $document->id,
-                'disk' => $disk,
-                'relPath' => $relPath,
-            ]);
-            abort(404);
-        }
-
-        return response()->stream(function () use ($stream) {
-            fpassthru($stream);
-        }, 200, [
-            'Content-Type' => $document->mime_type ?: 'application/octet-stream',
-            'Content-Disposition' => 'inline; filename="'.addslashes((($document->name ?: pathinfo($document->original_name ?: $document->file_name, PATHINFO_FILENAME)).'.'.strtolower(pathinfo($document->original_name ?: $document->file_name, PATHINFO_EXTENSION)))).'"',
-            'Cache-Control' => 'private, max-age=0, no-cache',
-            'Pragma' => 'no-cache',
-        ]);
+        return $this->documentStream->stream($document, inline: true);
     }
 
     public function downloadDocument(ClientCase $clientCase, Document $document, Request $request)
@@ -829,163 +651,8 @@ public function downloadDocument(ClientCase $clientCase, Document $document, Req
             ]);
             abort(404);
         }
-        $disk = $document->disk ?: 'public';
-        // Normalize relative path for Windows and legacy prefixes
-        $relPath = $document->path ?? '';
-        $relPath = str_replace('\\', '/', $relPath);
-        $relPath = ltrim($relPath, '/');
-        if (str_starts_with($relPath, 'public/')) {
-            $relPath = substr($relPath, 7);
-        }
 
-        $candidates = [];
-        $candidates[] = $relPath;
-        $raw = $document->path ? ltrim(str_replace('\\', '/', $document->path), '/') : null;
-        if ($raw && $raw !== $relPath) {
-            $candidates[] = $raw;
-        }
-        if (str_starts_with($relPath, 'storage/')) {
-            $candidates[] = substr($relPath, 8);
-        }
-        if ($raw && str_starts_with($raw, 'storage/')) {
-            $candidates[] = substr($raw, 8);
-        }
-
-        $existsOnDisk = false;
-        foreach ($candidates as $cand) {
-            if (Storage::disk($disk)->exists($cand)) {
-                $existsOnDisk = true;
-                $relPath = $cand;
-                break;
-            }
-        }
-
-        if (! $existsOnDisk) {
-            // Fallback to public/ direct path if present
-            $publicFull = public_path($relPath);
-            $real = @realpath($publicFull);
-            $publicRoot = @realpath(public_path());
-            $realN = $real ? str_replace('\\', '/', $real) : null;
-            $rootN = $publicRoot ? str_replace('\\', '/', $publicRoot) : null;
-            if ($realN && $rootN && str_starts_with($realN, $rootN) && is_file($real)) {
-                logger()->info('Document download fallback: serving from public path', [
-                    'document_id' => $document->id,
-                    'path' => $realN,
-                ]);
-                $nameBase = $document->name ?: pathinfo($document->original_name ?: $document->file_name, PATHINFO_FILENAME);
-                $ext = strtolower(pathinfo($document->original_name ?: $document->file_name, PATHINFO_EXTENSION));
-                $name = $ext ? ($nameBase.'.'.$ext) : $nameBase;
-                $fp = @fopen($real, 'rb');
-                if ($fp === false) {
-                    abort(404);
-                }
-
-                return response()->stream(function () use ($fp) {
-                    fpassthru($fp);
-                }, 200, [
-                    'Content-Type' => $document->mime_type ?: 'application/octet-stream',
-                    'Content-Disposition' => 'attachment; filename="'.addslashes($name).'"',
-                    'Cache-Control' => 'private, max-age=0, no-cache',
-                    'Pragma' => 'no-cache',
-                ]);
-            }
-
-            logger()->warning('Document download 404: file missing on disk and public fallback failed', [
-                'document_id' => $document->id,
-                'document_uuid' => $document->uuid,
-                'disk' => $disk,
-                'path' => $document->path,
-                'normalizedCandidates' => $candidates,
-                'public_candidate' => $publicFull,
-            ]);
-            abort(404);
-        }
-        $nameBase = $document->name ?: pathinfo($document->original_name ?: $document->file_name, PATHINFO_FILENAME);
-        $ext = strtolower(pathinfo($document->original_name ?: $document->file_name, PATHINFO_EXTENSION));
-        $name = $ext ? ($nameBase.'.'.$ext) : $nameBase;
-        $stream = Storage::disk($disk)->readStream($relPath);
-        if ($stream === false) {
-            logger()->warning('Document download: readStream failed, attempting fallbacks', [
-                'document_id' => $document->id,
-                'disk' => $disk,
-                'relPath' => $relPath,
-            ]);
-
-            $headers = [
-                'Content-Type' => $document->mime_type ?: 'application/octet-stream',
-                'Content-Disposition' => 'attachment; filename="'.addslashes($name).'"',
-                'Cache-Control' => 'private, max-age=0, no-cache',
-                'Pragma' => 'no-cache',
-            ];
-
-            // Fallback 1: get() the bytes directly
-            try {
-                $bytes = Storage::disk($disk)->get($relPath);
-            } catch (\Throwable $e) {
-                $bytes = null;
-            }
-            if (! is_null($bytes) && $bytes !== false) {
-                return response($bytes, 200, $headers);
-            }
-
-            // Fallback 2: open via absolute storage path
-            $abs = null;
-            try {
-                if (method_exists(Storage::disk($disk), 'path')) {
-                    $abs = Storage::disk($disk)->path($relPath);
-                }
-            } catch (\Throwable $e) {
-                $abs = null;
-            }
-            if ($abs && is_file($abs)) {
-                $fp = @fopen($abs, 'rb');
-                if ($fp !== false) {
-                    logger()->info('Document download fallback: serving from absolute storage path', [
-                        'document_id' => $document->id,
-                        'abs' => str_replace('\\\\', '/', (string) realpath($abs)),
-                    ]);
-
-                    return response()->stream(function () use ($fp) {
-                        fpassthru($fp);
-                    }, 200, $headers);
-                }
-            }
-
-            // Fallback 3: serve from public path if available
-            $publicFull = public_path($relPath);
-            $real = @realpath($publicFull);
-            $publicRoot = @realpath(public_path());
-            $realN = $real ? str_replace('\\\\', '/', $real) : null;
-            $rootN = $publicRoot ? str_replace('\\\\', '/', $publicRoot) : null;
-            if ($realN && $rootN && str_starts_with($realN, $rootN) && is_file($real)) {
-                logger()->info('Document download fallback: serving from public path (post-readStream failure)', [
-                    'document_id' => $document->id,
-                    'path' => $realN,
-                ]);
-                $fp = @fopen($real, 'rb');
-                if ($fp !== false) {
-                    return response()->stream(function () use ($fp) {
-                        fpassthru($fp);
-                    }, 200, $headers);
-                }
-            }
-
-            logger()->warning('Document download 404: all fallbacks failed after readStream failure', [
-                'document_id' => $document->id,
-                'disk' => $disk,
-                'relPath' => $relPath,
-            ]);
-            abort(404);
-        }
-
-        return response()->stream(function () use ($stream) {
-            fpassthru($stream);
-        }, 200, [
-            'Content-Type' => $document->mime_type ?: 'application/octet-stream',
-            'Content-Disposition' => 'attachment; filename="'.addslashes($name).'"',
-            'Cache-Control' => 'private, max-age=0, no-cache',
-            'Pragma' => 'no-cache',
-        ]);
+        return $this->documentStream->stream($document, inline: false);
     }
 
     /**
@@ -999,8 +666,7 @@ public function viewContractDocument(Contract $contract, Document $document, Req
             abort(404);
         }
 
-        // Reuse the existing logic by delegating to a small helper
-        return $this->streamDocumentForDisk($document, inline: true);
+        return $this->documentStream->stream($document, inline: true);
     }
 
     /**
@@ -1013,138 +679,7 @@ public function downloadContractDocument(Contract $contract, Document $document,
             abort(404);
         }
 
-        return $this->streamDocumentForDisk($document, inline: false);
-    }
-
-    /**
-     * Internal helper to stream a document either inline or as attachment with all Windows/public fallbacks.
-     */
-    protected function streamDocumentForDisk(Document $document, bool $inline = true)
-    {
-        $disk = $document->disk ?: 'public';
-        $relPath = $document->path ?? '';
-        $relPath = str_replace('\\', '/', $relPath);
-        $relPath = ltrim($relPath, '/');
-        if (str_starts_with($relPath, 'public/')) {
-            $relPath = substr($relPath, 7);
-        }
-
-        // Previews for DOC/DOCX
-        $ext = strtolower(pathinfo($document->original_name ?: $document->file_name, PATHINFO_EXTENSION));
-        $previewDisk = config('files.preview_disk', 'public');
-        if ($inline && in_array($ext, ['doc', 'docx'])) {
-            if ($document->preview_path && Storage::disk($previewDisk)->exists($document->preview_path)) {
-                $stream = Storage::disk($previewDisk)->readStream($document->preview_path);
-                if ($stream !== false) {
-                    $previewNameBase = $document->name ?: pathinfo($document->original_name ?: $document->file_name, PATHINFO_FILENAME);
-
-                    return response()->stream(function () use ($stream) {
-                        fpassthru($stream);
-                    }, 200, [
-                        'Content-Type' => $document->preview_mime ?: 'application/pdf',
-                        'Content-Disposition' => 'inline; filename="'.addslashes($previewNameBase.'.pdf').'"',
-                        'Cache-Control' => 'private, max-age=0, no-cache',
-                        'Pragma' => 'no-cache',
-                    ]);
-                }
-            }
-            \App\Jobs\GenerateDocumentPreview::dispatch($document->id);
-
-            return response('Preview is being generated. Please try again shortly.', 202);
-        }
-
-        // Try storage candidates
-        $candidates = [$relPath];
-        $raw = $document->path ? ltrim(str_replace('\\', '/', $document->path), '/') : null;
-        if ($raw && $raw !== $relPath) {
-            $candidates[] = $raw;
-        }
-        if (str_starts_with($relPath, 'storage/')) {
-            $candidates[] = substr($relPath, 8);
-        }
-        if ($raw && str_starts_with($raw, 'storage/')) {
-            $candidates[] = substr($raw, 8);
-        }
-
-        $found = null;
-        foreach ($candidates as $cand) {
-            if (Storage::disk($disk)->exists($cand)) {
-                $found = $cand;
-                break;
-            }
-        }
-
-        $headers = [
-            'Content-Type' => $document->mime_type ?: 'application/octet-stream',
-            'Content-Disposition' => ($inline ? 'inline' : 'attachment').'; filename="'.addslashes($document->original_name ?: $document->file_name).'"',
-            'Cache-Control' => 'private, max-age=0, no-cache',
-            'Pragma' => 'no-cache',
-        ];
-
-        if (! $found) {
-            // public/ fallback
-            $publicFull = public_path($relPath);
-            $real = @realpath($publicFull);
-            $publicRoot = @realpath(public_path());
-            $realN = $real ? str_replace('\\\\', '/', $real) : null;
-            $rootN = $publicRoot ? str_replace('\\\\', '/', $publicRoot) : null;
-            if ($realN && $rootN && str_starts_with($realN, $rootN) && is_file($real)) {
-                $fp = @fopen($real, 'rb');
-                if ($fp !== false) {
-                    return response()->stream(function () use ($fp) {
-                        fpassthru($fp);
-                    }, 200, $headers);
-                }
-            }
-            abort(404);
-        }
-
-        $stream = Storage::disk($disk)->readStream($found);
-        if ($stream !== false) {
-            return response()->stream(function () use ($stream) {
-                fpassthru($stream);
-            }, 200, $headers);
-        }
-
-        // Fallbacks on readStream failure
-        try {
-            $bytes = Storage::disk($disk)->get($found);
-            if (! is_null($bytes) && $bytes !== false) {
-                return response($bytes, 200, $headers);
-            }
-        } catch (\Throwable $e) {
-        }
-
-        $abs = null;
-        try {
-            if (method_exists(Storage::disk($disk), 'path')) {
-                $abs = Storage::disk($disk)->path($found);
-            }
-        } catch (\Throwable $e) {
-            $abs = null;
-        }
-        if ($abs && is_file($abs)) {
-            $fp = @fopen($abs, 'rb');
-            if ($fp !== false) {
-                return response()->stream(function () use ($fp) {
-                    fpassthru($fp);
-                }, 200, $headers);
-            }
-        }
-
-        // public/ again as last try
-        $publicFull = public_path($found);
-        $real = @realpath($publicFull);
-        if ($real && is_file($real)) {
-            $fp = @fopen($real, 'rb');
-            if ($fp !== false) {
-                return response()->stream(function () use ($fp) {
-                    fpassthru($fp);
-                }, 200, $headers);
-            }
-        }
-
-        abort(404);
+        return $this->documentStream->stream($document, inline: false);
     }
 
     /**
@@ -1157,153 +692,40 @@ public function show(ClientCase $clientCase)
         ])->where('active', 1)->findOrFail($clientCase->id);
 
         $types = [
-            'address_types' => \App\Models\Person\AddressType::all(),
-            'phone_types' => \App\Models\Person\PhoneType::all(),
+            'address_types' => $this->referenceCache->getAddressTypes(),
+            'phone_types' => $this->referenceCache->getPhoneTypes(),
         ];
 
-        // $active = false;
-
-        // Optional segment filter from query string
         $segmentId = request()->integer('segment');
-
-        // Determine latest archive (non-reactivate) setting for this context to infer archive segment and related tables
-        $latestArchiveSetting = \App\Models\ArchiveSetting::query()
-            ->where('enabled', true)
-            ->where(function ($q) {
-                $q->whereNull('reactivate')->orWhere('reactivate', false);
-            })
-            ->orderByDesc('id')
-            ->first();
-        $archiveSegmentId = optional($latestArchiveSetting)->segment_id; // may be null
-        $relatedArchiveTables = [];
-        if ($latestArchiveSetting) {
-            $entities = (array) $latestArchiveSetting->entities;
-            foreach ($entities as $edef) {
-                if (isset($edef['related']) && is_array($edef['related'])) {
-                    foreach ($edef['related'] as $rel) {
-                        $relatedArchiveTables[] = $rel;
-                    }
-                }
-            }
-            $relatedArchiveTables = array_values(array_unique($relatedArchiveTables));
-        }
-
-        // Prepare contracts and a reference map.
-        // Only apply active/inactive filtering IF a segment filter is provided.
-        $contractsQuery = $case->contracts()
-            // Only select lean columns to avoid oversize JSON / headers (include description for UI display)
-            ->select(['id', 'uuid', 'reference', 'start_date', 'end_date', 'description', 'meta', 'active', 'type_id', 'client_case_id', 'created_at'])
-            ->with([
-                'type:id,name',
-                // Use closure for account to avoid ambiguous column names with latestOfMany join
-                'account' => function ($q) {
-                    $q->select([
-                        'accounts.id',
-                        'accounts.contract_id',
-                        'accounts.type_id',
-                        'accounts.initial_amount',
-                        'accounts.balance_amount',
-                        'accounts.promise_date',
-                        'accounts.created_at',
-                        'accounts.updated_at', // include updated_at so FE can detect changes & for debugging
-                    ])->orderByDesc('accounts.id');
-                },
-                'segments:id,name',
-                // Eager load objects so newly created objects appear without full reload logic issues
-                'objects:id,contract_id,reference,name,description,type,created_at',
-            ]);
-
-        $contractsQuery->orderByDesc('created_at');
-
-        if (! empty($segmentId)) {
-            // Filter to contracts that are in the provided segment and active on pivot
-            $contractsQuery->whereExists(function ($q) use ($segmentId) {
-                $q->from('contract_segment')
-                    ->whereColumn('contract_segment.contract_id', 'contracts.id')
-                    ->where('contract_segment.segment_id', $segmentId)
-                    ->where('contract_segment.active', true);
-            });
-        }
-
-        // NOTE: If a case has an extremely large number of contracts this can still be heavy.
-        // Consider pagination or deferred (Inertia lazy) loading. For now, hard-cap to 500 to prevent
-        // pathological memory / header growth. Frontend can request more via future endpoint.
-        $contracts = $contractsQuery->limit(500)->get();
-
-        // TEMP DEBUG: log what balances are being sent to Inertia (remove once issue resolved)
-        try {
-            logger()->info('Show contracts balances', [
-                'case_id' => $case->id,
-                'contract_count' => $contracts->count(),
-                'contracts' => $contracts->map(fn ($c) => [
-                    'id' => $c->id,
-                    'uuid' => $c->uuid,
-                    'reference' => $c->reference,
-                    'account_id' => optional($c->account)->id,
-                    'initial_amount' => optional($c->account)->initial_amount,
-                    'balance_amount' => optional($c->account)->balance_amount,
-                    'account_updated_at' => optional($c->account)->updated_at,
-                ])->toArray(),
-            ]);
-        } catch (\Throwable $e) {
-            // swallow
-        }
-
-        $contractRefMap = [];
-        foreach ($contracts as $c) {
-            $contractRefMap[$c->id] = $c->reference;
-        }
-
-        // Merge client case and contract documents into a single array and include contract reference when applicable
-        $contractIds = $contracts->pluck('id');
-        // Include 'uuid' so frontend can build document routes (was causing missing 'document' param error)
-        // IMPORTANT: If there are no contracts for this case we must NOT return all contract documents from other cases.
-        if ($contractIds->isEmpty()) {
-            $contractDocs = collect();
-        } else {
-            $contractDocs = Document::query()
-                ->select(['id', 'uuid', 'documentable_id', 'documentable_type', 'name', 'file_name', 'original_name', 'extension', 'mime_type', 'size', 'created_at', 'is_public'])
-                ->where('documentable_type', Contract::class)
-                ->whereIn('documentable_id', $contractIds)
-                ->orderByDesc('created_at')
-                ->limit(300) // cap to prevent excessive payload; add pagination later if needed
-                ->get()
-                ->map(function ($d) use ($contractRefMap) {
-                    $arr = method_exists($d, 'toArray') ? $d->toArray() : (array) $d;
-                    $arr['contract_reference'] = $contractRefMap[$d->documentable_id] ?? null;
-                    $arr['contract_uuid'] = optional(Contract::withTrashed()->find($d->documentable_id))->uuid;
-
-                    return $arr;
-                });
-        }
-
-        $caseDocs = $case->documents()
-            ->select(['id', 'uuid', 'documentable_id', 'documentable_type', 'name', 'file_name', 'original_name', 'extension', 'mime_type', 'size', 'created_at', 'is_public'])
-            ->orderByDesc('created_at')
-            ->limit(200)
-            ->get()
-            ->map(function ($d) use ($case) {
-                $arr = method_exists($d, 'toArray') ? $d->toArray() : (array) $d;
-                $arr['client_case_uuid'] = $case->uuid;
-
-                return $arr;
-            });
-        $mergedDocs = $caseDocs
-            ->concat($contractDocs)
-            ->sortByDesc('created_at')
-            ->values();
-
-        // Resolve current segment for display when filtered
         $currentSegment = null;
         if (! empty($segmentId)) {
             $currentSegment = \App\Models\Segment::query()->select('id', 'name')->find($segmentId);
         }
 
+        // Get contracts using service
+        $contractsPerPage = request()->integer('contracts_per_page', 10);
+        $contracts = $this->caseDataService->getContracts($case, $segmentId, $contractsPerPage);
+        $contractIds = collect($contracts->items())->pluck('id')->all();
+
+        // Get activities using service
+        $activitiesPerPage = request()->integer('activities_per_page', 15);
+        $encodedFilters = request()->input('filter_activities');
+        $activities = $this->caseDataService->getActivities($case, $segmentId, $encodedFilters, $contractIds, $activitiesPerPage);
+
+        // Get documents using service
+        $contractsPerPage = request()->integer('documentsPerPage', 15);
+        $documents = $this->caseDataService->getDocuments($case, $contractIds, $contractsPerPage);
+
+        // Get archive metadata using service
+        
+        $archiveMeta = $this->caseDataService->getArchiveMeta();
+
         return Inertia::render('Cases/Show', [
             'client' => $case->client()->with('person', fn ($q) => $q->with(['addresses', 'phones', 'emails', 'bankAccounts', 'client']))->firstOrFail(),
             'client_case' => $case,
             'contracts' => $contracts,
-            // Active document templates for contracts (latest version per slug)
+            'documents' => $documents,
+        ])->with([
             'contract_doc_templates' => \App\Models\DocumentTemplate::query()
                 ->where('active', true)
                 ->where('core_entity', 'contract')
@@ -1312,39 +734,10 @@ public function show(ClientCase $clientCase)
                 ->groupBy('slug')
                 ->map(fn ($g) => $g->sortByDesc('version')->first())
                 ->values(),
-            'archive_meta' => [
-                'archive_segment_id' => $archiveSegmentId,
-                'related_tables' => $relatedArchiveTables,
-            ],
-            'activities' => tap(
-                (function () use ($case, $segmentId, $contractIds) {
-                    $q = $case->activities()
-                        ->with(['action', 'decision', 'contract:id,uuid,reference', 'user:id,name'])
-                        ->orderByDesc('created_at');
-                    if (! empty($segmentId)) {
-                        // Only activities for filtered contracts or unlinked (contract_id null)
-                        $q->where(function ($qq) use ($contractIds) {
-                            $qq->whereNull('contract_id');
-                            if ($contractIds->isNotEmpty()) {
-                                $qq->orWhereIn('contract_id', $contractIds);
-                            }
-                        });
-                    }
-
-                    return $q->paginate(20, ['*'], 'activities')->withQueryString();
-                })(),
-                function ($p) {
-                    $p->getCollection()->transform(function ($a) {
-                        $a->setAttribute('user_name', optional($a->user)->name);
-
-                        return $a;
-                    });
-                }
-            ),
-            'documents' => $mergedDocs,
-            'contract_types' => \App\Models\ContractType::whereNull('deleted_at')->get(),
-            'account_types' => \App\Models\AccountType::all(),
-            // Include decisions with auto-mail metadata and the linked email template entity_types for UI logic
+            'archive_meta' => $archiveMeta,
+            'activities' => $activities,
+            'contract_types' => $this->referenceCache->getContractTypes(),
+            'account_types' => $this->referenceCache->getAccountTypes(),
             'actions' => \App\Models\Action::query()
                 ->with([
                     'decisions' => function ($q) {
@@ -1359,7 +752,6 @@ function ($p) {
             'segments' => $case->segments()->wherePivot('active', true)->get(['segments.id', 'segments.name']),
             'all_segments' => \App\Models\Segment::query()->where('active', true)->get(['id', 'name']),
             'current_segment' => $currentSegment,
-            // SMS helpers for per-case sending UI
             'sms_profiles' => \App\Models\SmsProfile::query()
                 ->select(['id', 'name', 'default_sender_id'])
                 ->where('active', true)
@@ -1427,9 +819,7 @@ public function deleteDocument(ClientCase $clientCase, Document $document, Reque
 
         $document->delete(); // soft delete
 
-        return $request->wantsJson()
-            ? response()->json(['status' => 'ok'])
-            : back()->with('success', 'Document deleted.');
+        return back()->with('success', 'Document deleted.')->with('flash_method', 'DELETE');
     }
 
     /**
@@ -1446,9 +836,7 @@ public function deleteContractDocument(Contract $contract, Document $document, R
 
         $document->delete();
 
-        return $request->wantsJson()
-            ? response()->json(['status' => 'ok'])
-            : back()->with('success', 'Document deleted.');
+        return back()->with('success', 'Document deleted.')->with('flash_method', 'DELETE');
     }
 
     /**
@@ -1629,7 +1017,7 @@ public function archiveContract(ClientCase $clientCase, string $uuid, Request $r
 
         $message = $reactivateRequested ? __('contracts.reactivated') : __('contracts.archived');
 
-        return back()->with('success', $message);
+        return back()->with('success', $message)->with('flash_method', 'PATCH');
     }
 
     /**

app/Http/Controllers/ClientController.php

@@ -3,57 +3,51 @@
 namespace App\Http\Controllers;
 
 use App\Models\Client;
+use App\Services\ReferenceDataCache;
 use DB;
 use Illuminate\Http\Request;
 use Inertia\Inertia;
 
 class ClientController extends Controller
 {
+    public function __construct(protected ReferenceDataCache $referenceCache) {}
+
     public function index(Client $client, Request $request)
     {
+        $search = $request->input('search');
+        
         $query = $client::query()
-            ->with('person')
-            ->when($request->input('search'), function ($que, $search) {
-                $que->whereHas('person', function ($q) use ($search) {
-                    $q->where('full_name', 'ilike', '%'.$search.'%');
-                });
+            ->select('clients.*')
+            ->when($search, function ($que) use ($search) {
+                $que->join('person', 'person.id', '=', 'clients.person_id')
+                    ->where('person.full_name', 'ilike', '%'.$search.'%')
+                    ->groupBy('clients.id');
             })
-            ->where('active', 1)
+            ->where('clients.active', 1)
+            // Use LEFT JOINs for aggregated data to avoid subqueries
+            ->leftJoin('client_cases', 'client_cases.client_id', '=', 'clients.id')
+            ->leftJoin('contracts', function ($join) {
+                $join->on('contracts.client_case_id', '=', 'client_cases.id')
+                    ->whereNull('contracts.deleted_at');
+            })
+            ->leftJoin('contract_segment', function ($join) {
+                $join->on('contract_segment.contract_id', '=', 'contracts.id')
+                    ->where('contract_segment.active', true);
+            })
+            ->leftJoin('accounts', 'accounts.contract_id', '=', 'contracts.id')
+            ->groupBy('clients.id')
             ->addSelect([
                 // Number of client cases for this client that have at least one active contract
-                'cases_with_active_contracts_count' => DB::query()
-                    ->from('client_cases')
-                    ->join('contracts', 'contracts.client_case_id', '=', 'client_cases.id')
-                    ->selectRaw('COUNT(DISTINCT client_cases.id)')
-                    ->whereColumn('client_cases.client_id', 'clients.id')
-                    ->whereNull('contracts.deleted_at')
-                    ->whereExists(function ($q) {
-                        $q->from('contract_segment')
-                            ->whereColumn('contract_segment.contract_id', 'contracts.id')
-                            ->where('contract_segment.active', true);
-                    }),
-                // Sum of account balances for active contracts that belong to this client's cases
-                'active_contracts_balance_sum' => DB::query()
-                    ->from('contracts')
-                    ->join('accounts', 'accounts.contract_id', '=', 'contracts.id')
-                    ->selectRaw('COALESCE(SUM(accounts.balance_amount), 0)')
-                    ->whereExists(function ($q) {
-                        $q->from('client_cases')
-                            ->whereColumn('client_cases.id', 'contracts.client_case_id')
-                            ->whereColumn('client_cases.client_id', 'clients.id');
-                    })
-                    ->whereNull('contracts.deleted_at')
-                    ->whereExists(function ($q) {
-                        $q->from('contract_segment')
-                            ->whereColumn('contract_segment.contract_id', 'contracts.id')
-                            ->where('contract_segment.active', true);
-                    }),
+                DB::raw('COUNT(DISTINCT CASE WHEN contract_segment.id IS NOT NULL THEN client_cases.id END) as cases_with_active_contracts_count'),
+                // Sum of account balances for active contracts
+                DB::raw('COALESCE(SUM(CASE WHEN contract_segment.id IS NOT NULL THEN accounts.balance_amount END), 0) as active_contracts_balance_sum'),
             ])
-            ->orderByDesc('created_at');
+            ->with('person')
+            ->orderByDesc('clients.created_at');
 
         return Inertia::render('Client/Index', [
             'clients' => $query
-                ->paginate($request->integer('perPage', 15))
+                ->paginate($request->integer('per_page', 15))
                 ->withQueryString(),
             'filters' => $request->only(['search']),
         ]);
@@ -67,44 +61,37 @@ public function show(Client $client, Request $request)
             ->findOrFail($client->id);
 
         $types = [
-            'address_types' => \App\Models\Person\AddressType::all(),
-            'phone_types' => \App\Models\Person\PhoneType::all(),
+            'address_types' => $this->referenceCache->getAddressTypes(),
+            'phone_types' => $this->referenceCache->getPhoneTypes(),
         ];
 
         return Inertia::render('Client/Show', [
             'client' => $data,
             'client_cases' => $data->clientCases()
-                ->with(['person', 'client.person'])
-                ->when($request->input('search'), fn ($que, $search) => $que->whereHas(
-                    'person',
-                    fn ($q) => $q->where('full_name', 'ilike', '%'.$search.'%')
-                ))
+                ->select('client_cases.*')
+                ->when($request->input('search'), function ($que, $search) {
+                    $que->join('person', 'person.id', '=', 'client_cases.person_id')
+                        ->where('person.full_name', 'ilike', '%'.$search.'%')
+                        ->groupBy('client_cases.id');
+                })
+                ->leftJoin('contracts', function ($join) {
+                    $join->on('contracts.client_case_id', '=', 'client_cases.id')
+                        ->whereNull('contracts.deleted_at');
+                })
+                ->leftJoin('contract_segment', function ($join) {
+                    $join->on('contract_segment.contract_id', '=', 'contracts.id')
+                        ->where('contract_segment.active', true);
+                })
+                ->leftJoin('accounts', 'accounts.contract_id', '=', 'contracts.id')
+                ->groupBy('client_cases.id')
                 ->addSelect([
-                    'active_contracts_count' => \DB::query()
-                        ->from('contracts')
-                        ->selectRaw('COUNT(*)')
-                        ->whereColumn('contracts.client_case_id', 'client_cases.id')
-                        ->whereNull('contracts.deleted_at')
-                        ->whereExists(function ($q) {
-                            $q->from('contract_segment')
-                                ->whereColumn('contract_segment.contract_id', 'contracts.id')
-                                ->where('contract_segment.active', true);
-                        }),
-                    'active_contracts_balance_sum' => \DB::query()
-                        ->from('contracts')
-                        ->join('accounts', 'accounts.contract_id', '=', 'contracts.id')
-                        ->selectRaw('COALESCE(SUM(accounts.balance_amount), 0)')
-                        ->whereColumn('contracts.client_case_id', 'client_cases.id')
-                        ->whereNull('contracts.deleted_at')
-                        ->whereExists(function ($q) {
-                            $q->from('contract_segment')
-                                ->whereColumn('contract_segment.contract_id', 'contracts.id')
-                                ->where('contract_segment.active', true);
-                        }),
+                    \DB::raw('COUNT(DISTINCT CASE WHEN contract_segment.id IS NOT NULL THEN contracts.id END) as active_contracts_count'),
+                    \DB::raw('COALESCE(SUM(CASE WHEN contract_segment.id IS NOT NULL THEN accounts.balance_amount END), 0) as active_contracts_balance_sum'),
                 ])
-                ->where('active', 1)
-                ->orderByDesc('created_at')
-                ->paginate($request->integer('perPage', 15))
+                ->with(['person', 'client.person'])
+                ->where('client_cases.active', 1)
+                ->orderByDesc('client_cases.created_at')
+                ->paginate($request->integer('per_page', 15))
                 ->withQueryString(),
             'types' => $types,
             'filters' => $request->only(['search']),
@@ -122,8 +109,31 @@ public function contracts(Client $client, Request $request)
         $segmentIds = $segmentsParam ? array_filter(explode(',', $segmentsParam)) : [];
 
         $contractsQuery = \App\Models\Contract::query()
-            ->whereHas('clientCase', function ($q) use ($client) {
-                $q->where('client_id', $client->id);
+            ->select(['contracts.id', 'contracts.uuid', 'contracts.reference', 'contracts.start_date', 'contracts.client_case_id'])
+            ->join('client_cases', 'client_cases.id', '=', 'contracts.client_case_id')
+            ->where('client_cases.client_id', $client->id)
+            ->whereNull('contracts.deleted_at')
+            ->when($from || $to, function ($q) use ($from, $to) {
+                if (! empty($from)) {
+                    $q->whereDate('contracts.start_date', '>=', $from);
+                }
+                if (! empty($to)) {
+                    $q->whereDate('contracts.start_date', '<=', $to);
+                }
+            })
+            ->when($search, function ($q) use ($search) {
+                $q->leftJoin('person', 'person.id', '=', 'client_cases.person_id')
+                    ->where(function ($inner) use ($search) {
+                        $inner->where('contracts.reference', 'ilike', '%'.$search.'%')
+                            ->orWhere('person.full_name', 'ilike', '%'.$search.'%');
+                    });
+            })
+            ->when($segmentId, function ($q) use ($segmentId) {
+                $q->join('contract_segment', function ($join) use ($segmentId) {
+                    $join->on('contract_segment.contract_id', '=', 'contracts.id')
+                        ->where('contract_segment.segment_id', $segmentId)
+                        ->where('contract_segment.active', true);
+                });
             })
             ->with([
                 'clientCase:id,uuid,person_id',
@@ -133,43 +143,19 @@ public function contracts(Client $client, Request $request)
                 },
                 'account:id,accounts.contract_id,balance_amount',
             ])
-            ->select(['id', 'uuid', 'reference', 'start_date', 'client_case_id'])
-            ->whereNull('deleted_at')
-            ->when($from || $to, function ($q) use ($from, $to) {
-                if (! empty($from)) {
-                    $q->whereDate('start_date', '>=', $from);
-                }
-                if (! empty($to)) {
-                    $q->whereDate('start_date', '<=', $to);
-                }
-            })
-            ->when($search, function ($q) use ($search) {
-                $q->where(function ($inner) use ($search) {
-                    $inner->where('reference', 'ilike', '%'.$search.'%')
-                        ->orWhereHas('clientCase.person', function ($p) use ($search) {
-                            $p->where('full_name', 'ilike', '%'.$search.'%');
-                        });
-                });
-            })
-            ->when($segmentIds, function ($q) use ($segmentIds) {
-                $q->whereHas('segments', function ($s) use ($segmentIds) {
-                    $s->whereIn('segments.id', $segmentIds)
-                        ->where('contract_segment.active', true);
-                });
-            })
-            ->orderByDesc('start_date');
+            ->orderByDesc('contracts.start_date');
 
         $segments = \App\Models\Segment::orderBy('name')->get(['id', 'name']);
 
         $types = [
-            'address_types' => \App\Models\Person\AddressType::all(),
-            'phone_types' => \App\Models\Person\PhoneType::all(),
+            'address_types' => $this->referenceCache->getAddressTypes(),
+            'phone_types' => $this->referenceCache->getPhoneTypes(),
         ];
 
         return Inertia::render('Client/Contracts', [
             'client' => $data,
-            'contracts' => $contractsQuery->paginate($request->integer('perPage', 20))->withQueryString(),
-            'filters' => $request->only(['from', 'to', 'search', 'segments']),
+            'contracts' => $contractsQuery->paginate($request->integer('per_page', 20))->withQueryString(),
+            'filters' => $request->only(['from', 'to', 'search', 'segment']),
             'segments' => $segments,
             'types' => $types,
         ]);
@@ -212,14 +198,14 @@ public function store(Request $request)
 
         // \App\Models\Person\PersonAddress::create($address);
 
-        return to_route('client');
+        return back()->with('success', 'Client created')->with('flash_method', 'POST');
 
     }
 
     public function update(Client $client, Request $request)
     {
 
-        return to_route('client.show', $client);
+        return back()->with('success', 'Client updated')->with('flash_method', 'PUT');
     }
 
     /**

app/Http/Controllers/ContractController.php

@@ -49,7 +49,7 @@ public function store(Request $request)
             });
         }
 
-        return to_route('clientCase.show', $clientCase);
+        return back()->with('success', 'Contract created')->with('flash_method', 'POST');
     }
 
     public function update(Contract $contract, Request $request)

app/Http/Controllers/PersonController.php

@@ -26,18 +26,10 @@ public function update(Person $person, Request $request)
 
         $person->update($attributes);
 
-        if ($request->header('X-Inertia')) {
-            return back()->with('success', 'Person updated');
-        }
+        return back()->with('success', 'Person updated')->with('flash_method', 'PUT');
+       
+
         
-        return response()->json([
-            'person' => [
-                'full_name' => $person->full_name,
-                'tax_number' => $person->tax_number,
-                'social_security_number' => $person->social_security_number,
-                'description' => $person->description,
-            ],
-        ]);
     }
 
     public function createAddress(Person $person, Request $request)
@@ -60,13 +52,8 @@ public function createAddress(Person $person, Request $request)
         ], $attributes);
 
         // Support Inertia form submissions (redirect back) and JSON (for API/axios)
-        if ($request->header('X-Inertia')) {
-            return back()->with('success', 'Address created');
-        }
+        return back()->with('success', 'Address created')->with('flash_method', 'POST');
 
-        return response()->json([
-            'address' => \App\Models\Person\PersonAddress::with(['type'])->findOrFail($address->id),
-        ]);
     }
 
     public function updateAddress(Person $person, int $address_id, Request $request)
@@ -84,13 +71,8 @@ public function updateAddress(Person $person, int $address_id, Request $request)
 
         $address->update($attributes);
 
-        if ($request->header('X-Inertia')) {
-            return back()->with('success', 'Address updated');
-        }
+        return back()->with('success', 'Address updated')->with('flash_method', 'PUT');
         
-        return response()->json([
-            'address' => $address,
-        ]);
     }
 
     public function deleteAddress(Person $person, int $address_id, Request $request)
@@ -98,11 +80,8 @@ public function deleteAddress(Person $person, int $address_id, Request $request)
         $address = $person->addresses()->findOrFail($address_id);
         $address->delete(); // soft delete
 
-        if ($request->header('X-Inertia')) {
-            return back()->with('success', 'Address deleted');
-        }
 
-        return response()->json(['status' => 'ok']);
+        return back()->with('success', 'Address deleted')->with('flash_method', 'DELETE');
     }
 
     public function createPhone(Person $person, Request $request)
@@ -122,7 +101,7 @@ public function createPhone(Person $person, Request $request)
             'country_code' => $attributes['country_code'] ?? null,
         ], $attributes);
 
-        return back()->with('success', 'Phone added successfully');
+        return back()->with('success', 'Phone added successfully')->with('flash_method', 'POST');
     }
 
     public function updatePhone(Person $person, int $phone_id, Request $request)
@@ -140,7 +119,7 @@ public function updatePhone(Person $person, int $phone_id, Request $request)
 
         $phone->update($attributes);
 
-        return back()->with('success', 'Phone updated successfully');
+        return back()->with('success', 'Phone updated successfully')->with('flash_method', 'PUT');
     }
 
     public function deletePhone(Person $person, int $phone_id, Request $request)
@@ -148,7 +127,7 @@ public function deletePhone(Person $person, int $phone_id, Request $request)
         $phone = $person->phones()->findOrFail($phone_id);
         $phone->delete(); // soft delete
 
-        return back()->with('success', 'Phone deleted');
+        return back()->with('success', 'Phone deleted')->with('flash_method', 'DELETE');
     }
 
     public function createEmail(Person $person, Request $request)
@@ -170,7 +149,7 @@ public function createEmail(Person $person, Request $request)
             'value' => $attributes['value'],
         ], $attributes);
 
-        return back()->with('success', 'Email added successfully');
+        return back()->with('success', 'Email added successfully')->with('flash_method', 'POST');
     }
 
     public function updateEmail(Person $person, int $email_id, Request $request)
@@ -191,7 +170,7 @@ public function updateEmail(Person $person, int $email_id, Request $request)
 
         $email->update($attributes);
 
-        return back()->with('success', 'Email updated successfully');
+        return back()->with('success', 'Email updated successfully')->with('flash_method', 'PUT');
     }
 
     public function deleteEmail(Person $person, int $email_id, Request $request)
@@ -203,7 +182,7 @@ public function deleteEmail(Person $person, int $email_id, Request $request)
             return back()->with('success', 'Email deleted');
         }
 
-        return response()->json(['status' => 'ok']);
+        return back()->with('success', 'Email deleted')->with('flash_method', 'DELETE');
     }
 
     // TRR (bank account) CRUD
@@ -225,13 +204,10 @@ public function createTrr(Person $person, Request $request)
         // Create without dedup (IBAN may be null or vary); could dedup by IBAN if provided
         $trr = $person->bankAccounts()->create($attributes);
 
-        if ($request->header('X-Inertia')) {
-            return back()->with('success', 'TRR added successfully');
-        }
        
-        return response()->json([
-            'trr' => BankAccount::findOrFail($trr->id),
-        ]);
+        return back()->with('success', 'TRR added successfully')->with('flash_method', 'POST');
+
+
     }
 
     public function updateTrr(Person $person, int $trr_id, Request $request)
@@ -253,13 +229,8 @@ public function updateTrr(Person $person, int $trr_id, Request $request)
         $trr = $person->bankAccounts()->findOrFail($trr_id);
         $trr->update($attributes);
 
-        if ($request->header('X-Inertia')) {
-            return back()->with('success', 'TRR updated successfully');
-        }
+        return back()->with('success', 'TRR updated successfully')->with('flash_method', 'PUT');
 
-        return response()->json([
-            'trr' => $trr,
-        ]);
     }
 
     public function deleteTrr(Person $person, int $trr_id, Request $request)
@@ -267,10 +238,8 @@ public function deleteTrr(Person $person, int $trr_id, Request $request)
         $trr = $person->bankAccounts()->findOrFail($trr_id);
         $trr->delete();
 
-        if ($request->header('X-Inertia')) {
-            return back()->with('success', 'TRR deleted');
-        }
     
-        return response()->json(['status' => 'ok']);
+        return back()->with('success', 'TRR deleted')->with('flash_method', 'DELETE');
+       
     }
 }

app/Http/Controllers/PhoneViewController.php

@@ -3,11 +3,13 @@
 namespace App\Http\Controllers;
 
 use App\Models\FieldJob;
+use App\Services\ReferenceDataCache;
 use Illuminate\Http\Request;
 use Inertia\Inertia;
 
 class PhoneViewController extends Controller
 {
+    public function __construct(protected ReferenceDataCache $referenceCache) {}
     public function index(Request $request)
     {
         $userId = $request->user()->id;
@@ -168,8 +170,8 @@ public function showCase(\App\Models\ClientCase $clientCase, Request $request)
 
         // Provide minimal types for PersonInfoGrid
         $types = [
-            'address_types' => \App\Models\Person\AddressType::all(),
-            'phone_types' => \App\Models\Person\PhoneType::all(),
+            'address_types' => $this->referenceCache->getAddressTypes(),
+            'phone_types' => $this->referenceCache->getPhoneTypes(),
         ];
 
         // Case activities (compact for phone): latest 20 with relations
@@ -235,7 +237,7 @@ function ($q) {
             'contracts' => $contracts,
             'documents' => $documents,
             'types' => $types,
-            'account_types' => \App\Models\AccountType::all(),
+            'account_types' => $this->referenceCache->getAccountTypes(),
             // Provide decisions (filtered by segment) with linked email template metadata (entity_types, allow_attachments)
             'actions' => $actions,
             'activities' => $activities,

app/Http/Controllers/ReportController.php

@@ -0,0 +1,379 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Reports\ReportRegistry;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+// facades referenced with fully-qualified names below to satisfy static analysis
+
+class ReportController extends Controller
+{
+    public function __construct(protected ReportRegistry $registry) {}
+
+    public function index(Request $request)
+    {
+        $reports = collect($this->registry->all())
+            ->map(fn ($r) => [
+                'slug' => $r->slug(),
+                'name' => $r->name(),
+                'description' => $r->description(),
+            ])
+            ->values();
+
+        return Inertia::render('Reports/Index', [
+            'reports' => $reports,
+        ]);
+    }
+
+    public function show(string $slug, Request $request)
+    {
+        $report = $this->registry->findBySlug($slug);
+        abort_if(! $report, 404);
+        $report->authorize($request);
+
+        // Accept filters & pagination from query and return initial data for server-driven table
+        $filters = $this->validateFilters($report->inputs(), $request);
+        \Log::info('Report filters', ['filters' => $filters, 'request' => $request->all()]);
+        $perPage = (int) ($request->integer('per_page') ?: 25);
+        $paginator = $report->paginate($filters, $perPage);
+
+        $rows = collect($paginator->items())
+            ->map(fn ($row) => $this->normalizeRow($row))
+            ->values();
+
+        return Inertia::render('Reports/Show', [
+            'slug' => $report->slug(),
+            'name' => $report->name(),
+            'description' => $report->description(),
+            'inputs' => $report->inputs(),
+            'columns' => $report->columns(),
+            'rows' => $rows,
+            'meta' => [
+                'total' => $paginator->total(),
+                'current_page' => $paginator->currentPage(),
+                'per_page' => $paginator->perPage(),
+                'last_page' => $paginator->lastPage(),
+            ],
+            'query' => array_filter($filters, fn ($v) => $v !== null && $v !== ''),
+        ]);
+    }
+
+    public function data(string $slug, Request $request)
+    {
+        $report = $this->registry->findBySlug($slug);
+        abort_if(! $report, 404);
+        $report->authorize($request);
+
+        $filters = $this->validateFilters($report->inputs(), $request);
+        $perPage = (int) ($request->integer('per_page') ?: 25);
+
+        $paginator = $report->paginate($filters, $perPage);
+
+        $rows = collect($paginator->items())
+            ->map(fn ($row) => $this->normalizeRow($row))
+            ->values();
+
+        return response()->json([
+            'data' => $rows,
+            'total' => $paginator->total(),
+            'current_page' => $paginator->currentPage(),
+            'last_page' => $paginator->lastPage(),
+        ]);
+    }
+
+    public function export(string $slug, Request $request)
+    {
+        $report = $this->registry->findBySlug($slug);
+        abort_if(! $report, 404);
+        $report->authorize($request);
+
+        $filters = $this->validateFilters($report->inputs(), $request);
+        $format = strtolower((string) $request->get('format', 'csv'));
+
+        $rows = $report->query($filters)->get()->map(fn ($row) => $this->normalizeRow($row));
+        $columns = $report->columns();
+        $filename = $report->slug().'-'.now()->format('Ymd_His');
+
+        if ($format === 'pdf') {
+            $pdf = \Barryvdh\DomPDF\Facade\Pdf::loadView('reports.pdf.table', [
+                'name' => $report->name(),
+                'columns' => $columns,
+                'rows' => $rows,
+            ]);
+
+            return $pdf->download($filename.'.pdf');
+        }
+
+        if ($format === 'xlsx') {
+            $keys = array_map(fn ($c) => $c['key'], $columns);
+            $headings = array_map(fn ($c) => $c['label'] ?? $c['key'], $columns);
+
+            // Convert values for correct Excel rendering (dates, numbers, text)
+            $array = $this->prepareXlsxArray($rows, $keys);
+
+            // Build base column formats: text for contracts, EU datetime for *_at; numbers are formatted per-cell in AfterSheet
+            $columnFormats = [];
+            $textColumns = [];
+            $dateColumns = [];
+            foreach ($keys as $i => $key) {
+                $letter = $this->excelColumnLetter($i + 1);
+                if ($key === 'contract_reference') {
+                    $columnFormats[$letter] = '@';
+                    $textColumns[] = $letter;
+
+                    continue;
+                }
+                if (str_ends_with($key, '_at')) {
+                    $columnFormats[$letter] = 'dd.mm.yyyy hh:mm';
+                    $dateColumns[] = $letter;
+
+                    continue;
+                }
+            }
+
+            // Anonymous export with custom value binder to force text where needed
+            $export = new class($array, $headings, $columnFormats, $textColumns, $dateColumns) extends \Maatwebsite\Excel\DefaultValueBinder implements \Maatwebsite\Excel\Concerns\FromArray, \Maatwebsite\Excel\Concerns\ShouldAutoSize, \Maatwebsite\Excel\Concerns\WithColumnFormatting, \Maatwebsite\Excel\Concerns\WithCustomValueBinder, \Maatwebsite\Excel\Concerns\WithEvents, \Maatwebsite\Excel\Concerns\WithHeadings
+            {
+                public function __construct(private array $array, private array $headings, private array $formats, private array $textColumns, private array $dateColumns) {}
+
+                public function array(): array
+                {
+                    return $this->array;
+                }
+
+                public function headings(): array
+                {
+                    return $this->headings;
+                }
+
+                public function columnFormats(): array
+                {
+                    return $this->formats;
+                }
+
+                public function bindValue(\PhpOffice\PhpSpreadsheet\Cell\Cell $cell, $value): bool
+                {
+                    $col = preg_replace('/\d+/', '', $cell->getCoordinate()); // e.g., B from B2
+                    // Force text for configured columns or very long digit-only strings (>15)
+                    if (in_array($col, $this->textColumns, true) || (is_string($value) && ctype_digit($value) && strlen($value) > 15)) {
+                        $cell->setValueExplicit((string) $value, \PhpOffice\PhpSpreadsheet\Cell\DataType::TYPE_STRING);
+
+                        return true;
+                    }
+
+                    return parent::bindValue($cell, $value);
+                }
+
+                public function registerEvents(): array
+                {
+                    return [
+                        \Maatwebsite\Excel\Events\AfterSheet::class => function (\Maatwebsite\Excel\Events\AfterSheet $event) {
+                            $sheet = $event->sheet->getDelegate();
+                            // Data starts at row 2 (row 1 is headings)
+                            $rowIndex = 2;
+                            foreach ($this->array as $row) {
+                                foreach (array_values($row) as $i => $val) {
+                                    $colLetter = $this->colLetter($i + 1);
+                                    if (in_array($colLetter, $this->textColumns, true) || in_array($colLetter, $this->dateColumns, true)) {
+                                        continue; // already handled via columnFormats or binder
+                                    }
+                                    $coord = $colLetter.$rowIndex;
+                                    $fmt = null;
+                                    if (is_int($val)) {
+                                        // Integer: thousands separator, no decimals
+                                        $fmt = '#,##0';
+                                    } elseif (is_float($val)) {
+                                        // Float: show decimals only if fractional part exists
+                                        $fmt = (floor($val) != $val) ? '#,##0.00' : '#,##0';
+                                    }
+                                    if ($fmt) {
+                                        $sheet->getStyle($coord)->getNumberFormat()->setFormatCode($fmt);
+                                    }
+                                }
+                                $rowIndex++;
+                            }
+                        },
+                    ];
+                }
+
+                private function colLetter(int $index): string
+                {
+                    $letter = '';
+                    while ($index > 0) {
+                        $mod = ($index - 1) % 26;
+                        $letter = chr(65 + $mod).$letter;
+                        $index = intdiv($index - $mod, 26) - 1;
+                    }
+
+                    return $letter;
+                }
+            };
+
+            return \Maatwebsite\Excel\Facades\Excel::download($export, $filename.'.xlsx');
+        }
+
+        // Default CSV export
+        $keys = array_map(fn ($c) => $c['key'], $columns);
+        $headings = array_map(fn ($c) => $c['label'] ?? $c['key'], $columns);
+
+        $csv = fopen('php://temp', 'r+');
+        fputcsv($csv, $headings);
+        foreach ($rows as $r) {
+            $line = collect($keys)->map(fn ($k) => data_get($r, $k))->toArray();
+            fputcsv($csv, $line);
+        }
+        rewind($csv);
+        $content = stream_get_contents($csv) ?: '';
+        fclose($csv);
+
+        return response($content, 200, [
+            'Content-Type' => 'text/csv',
+            'Content-Disposition' => 'attachment; filename="'.$filename.'.csv"',
+        ]);
+    }
+
+    /**
+     * Lightweight users lookup for filters: id + name, optional search and limit.
+     */
+    public function users(Request $request)
+    {
+        $search = trim((string) $request->get('search', ''));
+        $limit = (int) ($request->integer('limit') ?: 10);
+
+        $q = \App\Models\User::query()->orderBy('name');
+        if ($search !== '') {
+            $like = '%'.mb_strtolower($search).'%';
+            $q->where(function ($qq) use ($like) {
+                $qq->whereRaw('LOWER(name) LIKE ?', [$like])
+                    ->orWhereRaw('LOWER(email) LIKE ?', [$like]);
+            });
+        }
+
+        $users = $q->limit(max(1, min(50, $limit)))->get(['id', 'name']);
+
+        return response()->json($users);
+    }
+
+    /**
+     * Lightweight clients lookup for filters: uuid + name (person full_name), optional search and limit.
+     */
+    public function clients(Request $request)
+    {
+        $clients = \App\Models\Client::query()
+            ->with('person:id,full_name')
+            ->get()
+            ->map(fn($c) => [
+                'id' => $c->uuid,
+                'name' => $c->person->full_name ?? 'Unknown'
+            ])
+            ->sortBy('name')
+            ->values();
+        
+        return response()->json($clients);
+    }
+
+    /**
+     * Build validation rules based on inputs descriptor and validate.
+     *
+     * @param  array<int, array<string, mixed>>  $inputs
+     * @return array<string, mixed>
+     */
+    protected function validateFilters(array $inputs, Request $request): array
+    {
+        $rules = [];
+        foreach ($inputs as $inp) {
+            $key = $inp['key'];
+            $type = $inp['type'] ?? 'string';
+            $nullable = ($inp['nullable'] ?? true) ? 'nullable' : 'required';
+            $rules[$key] = match ($type) {
+                'date' => [$nullable, 'date'],
+                'integer' => [$nullable, 'integer'],
+                'select:user' => [$nullable, 'integer', 'exists:users,id'],
+                'select:client' => [$nullable, 'string', 'exists:clients,uuid'],
+                default => [$nullable, 'string'],
+            };
+        }
+
+        return $request->validate($rules);
+    }
+
+    /**
+     * Ensure derived export/display fields exist on row objects.
+     */
+    protected function normalizeRow(object $row): object
+    {
+        if (isset($row->contract) && ! isset($row->contract_reference)) {
+            $row->contract_reference = $row->contract->reference ?? null;
+        }
+        if (isset($row->assignedUser) && ! isset($row->assigned_user_name)) {
+            $row->assigned_user_name = $row->assignedUser->name ?? null;
+        }
+
+        return $row;
+    }
+
+    /**
+     * Convert rows for XLSX export: dates to Excel serial numbers, numbers to numeric, contract refs to text.
+     *
+     * @param  iterable<int, object|array>  $rows
+     * @param  array<int, string>  $keys
+     * @return array<int, array<int, mixed>>
+     */
+    protected function prepareXlsxArray(iterable $rows, array $keys): array
+    {
+        $out = [];
+        foreach ($rows as $r) {
+            $line = [];
+            foreach ($keys as $k) {
+                $v = data_get($r, $k);
+                if ($k === 'contract_reference') {
+                    $line[] = (string) $v;
+
+                    continue;
+                }
+                if (str_ends_with($k, '_at')) {
+                    if (empty($v)) {
+                        $line[] = null;
+                    } else {
+                        try {
+                            $dt = \Carbon\Carbon::parse($v);
+                            $line[] = \PhpOffice\PhpSpreadsheet\Shared\Date::dateTimeToExcel($dt);
+                        } catch (\Throwable $e) {
+                            $line[] = (string) $v;
+                        }
+                    }
+
+                    continue;
+                }
+                if (is_int($v) || is_float($v)) {
+                    $line[] = $v;
+                } elseif (is_numeric($v) && is_string($v)) {
+                    // cast numeric-like strings unless they are identifiers that we want as text
+                    $line[] = (strpos($k, 'id') !== false) ? (int) $v : ($v + 0);
+                } else {
+                    $line[] = $v;
+                }
+            }
+            $out[] = $line;
+        }
+
+        return $out;
+    }
+
+    /**
+     * Convert 1-based index to Excel column letter.
+     */
+    protected function excelColumnLetter(int $index): string
+    {
+        $letter = '';
+        while ($index > 0) {
+            $mod = ($index - 1) % 26;
+            $letter = chr(65 + $mod).$letter;
+            $index = intdiv($index - $mod, 26) - 1;
+        }
+
+        return $letter;
+    }
+}

app/Http/Middleware/HandleInertiaRequests.php

@@ -57,6 +57,7 @@ public function share(Request $request): array
                 'error' => fn () => $request->session()->get('error'),
                 'warning' => fn () => $request->session()->get('warning'),
                 'info' => fn () => $request->session()->get('info'),
+                'method' => fn () => $request->session()->get('flash_method'), // HTTP method for toast styling
             ],
             'notifications' => function () use ($request) {
                 try {

app/Http/Resources/ActivityCollection.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\ResourceCollection;
+
+class ActivityCollection extends ResourceCollection
+{
+    /**
+     * Transform the resource collection into an array.
+     *
+     * @return array<int|string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        // Transform data to add user_name attribute
+        $this->collection->transform(function ($activity) {
+            $activity->setAttribute('user_name', optional($activity->user)->name);
+
+            return $activity;
+        });
+
+        return $this->resource->toArray();
+    }
+}

app/Http/Resources/ContractCollection.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\ResourceCollection;
+
+class ContractCollection extends ResourceCollection
+{
+    /**
+     * Transform the resource collection into an array.
+     *
+     * @return array<int|string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return $this->resource->toArray();
+    }
+}

app/Http/Resources/DocumentCollection.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\ResourceCollection;
+
+class DocumentCollection extends ResourceCollection
+{
+    /**
+     * Transform the resource collection into an array.
+     *
+     * @return array<int|string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'data' => $this->collection,
+        ];
+    }
+}

app/Models/Activity.php

@@ -2,6 +2,8 @@
 
 namespace App\Models;
 
+use Illuminate\Database\Eloquent\Attributes\Scope;
+use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
@@ -57,6 +59,69 @@ protected static function booted()
         });
     }
 
+    /**
+     * Scope activities to those linked to contracts within a specific segment.
+     */
+    #[Scope]
+    public function scopeForSegment(Builder $query, int $segmentId, array $contractIds): Builder
+    {
+        return $query->where(function ($q) use ($contractIds) {
+            $q->whereNull('contract_id');
+            if (! empty($contractIds)) {
+                $q->orWhereIn('contract_id', $contractIds);
+            }
+        });
+    }
+
+    /**
+     * Scope activities with decoded base64 filters.
+     */
+    #[Scope]
+    public function scopeWithFilters(Builder $query, ?string $encodedFilters, \App\Models\ClientCase $clientCase): Builder
+    {
+        if (empty($encodedFilters)) {
+            return $query;
+        }
+
+        try {
+            $decompressed = base64_decode($encodedFilters);
+            $filters = json_decode($decompressed, true);
+
+            if (! is_array($filters)) {
+                return $query;
+            }
+
+            if (! empty($filters['action_id'])) {
+                $query->where('action_id', $filters['action_id']);
+            }
+
+            if (! empty($filters['contract_uuid'])) {
+                $contract = $clientCase->contracts()->where('uuid', $filters['contract_uuid'])->first(['id']);
+                if ($contract) {
+                    $query->where('contract_id', $contract->id);
+                }
+            }
+
+            if (! empty($filters['user_id'])) {
+                $query->where('user_id', $filters['user_id']);
+            }
+
+            if (! empty($filters['date_from'])) {
+                $query->whereDate('created_at', '>=', $filters['date_from']);
+            }
+
+            if (! empty($filters['date_to'])) {
+                $query->whereDate('created_at', '<=', $filters['date_to']);
+            }
+        } catch (\Throwable $e) {
+            \Log::error('Invalid activity filter format', [
+                'error' => $e->getMessage(),
+            ]);
+        }
+
+        return $query;
+    }
+
     public function action(): BelongsTo
     {
         return $this->belongsTo(\App\Models\Action::class);

app/Models/Contract.php

@@ -3,6 +3,8 @@
 namespace App\Models;
 
 use App\Traits\Uuid;
+use Illuminate\Database\Eloquent\Attributes\Scope;
+use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Casts\Attribute;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
@@ -78,6 +80,20 @@ protected function endDate(): Attribute
         );
     }
 
+    /**
+     * Scope contracts to those in a specific segment with active pivot.
+     */
+    #[Scope]
+    public function scopeForSegment(Builder $query, int $segmentId): Builder
+    {
+        return $query->whereExists(function ($q) use ($segmentId) {
+            $q->from('contract_segment')
+                ->whereColumn('contract_segment.contract_id', 'contracts.id')
+                ->where('contract_segment.segment_id', $segmentId)
+                ->where('contract_segment.active', true);
+        });
+    }
+
     public function type(): BelongsTo
     {
         return $this->belongsTo(\App\Models\ContractType::class, 'type_id');

app/Providers/ReportServiceProvider.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Providers;
+
+use App\Reports\ActionsDecisionsCountReport;
+use App\Reports\ActivitiesPerPeriodReport;
+use App\Reports\ActiveContractsReport;
+use App\Reports\FieldJobsCompletedReport;
+use App\Reports\DecisionsCountReport;
+use App\Reports\ReportRegistry;
+use App\Reports\SegmentActivityCountsReport;
+use Illuminate\Support\ServiceProvider;
+
+class ReportServiceProvider extends ServiceProvider
+{
+    public function register(): void
+    {
+        $this->app->singleton(ReportRegistry::class, function () {
+            $registry = new ReportRegistry;
+            // Register built-in reports here
+            $registry->register(new FieldJobsCompletedReport);
+            $registry->register(new SegmentActivityCountsReport);
+            $registry->register(new ActionsDecisionsCountReport);
+            $registry->register(new ActivitiesPerPeriodReport);
+            $registry->register(new DecisionsCountReport);
+            $registry->register(new ActiveContractsReport);
+
+            return $registry;
+        });
+    }
+
+    public function boot(): void
+    {
+        //
+    }
+}

app/Reports/ActionsDecisionsCountReport.php

@@ -0,0 +1,53 @@
+<?php
+
+namespace App\Reports;
+
+use App\Models\Activity;
+use App\Reports\Contracts\Report;
+use Illuminate\Database\Eloquent\Builder;
+
+class ActionsDecisionsCountReport extends BaseEloquentReport implements Report
+{
+    public function slug(): string
+    {
+        return 'actions-decisions-counts';
+    }
+
+    public function name(): string
+    {
+        return 'Dejanja / Odločitve – štetje';
+    }
+
+    public function description(): ?string
+    {
+        return 'Število aktivnosti po dejanjih in odločitvah v obdobju.';
+    }
+
+    public function inputs(): array
+    {
+        return [
+            ['key' => 'from', 'type' => 'date', 'label' => 'Od', 'nullable' => true],
+            ['key' => 'to', 'type' => 'date', 'label' => 'Do', 'nullable' => true],
+        ];
+    }
+
+    public function columns(): array
+    {
+        return [
+            ['key' => 'action_name', 'label' => 'Dejanje'],
+            ['key' => 'decision_name', 'label' => 'Odločitev'],
+            ['key' => 'activities_count', 'label' => 'Št. aktivnosti'],
+        ];
+    }
+
+    public function query(array $filters): Builder
+    {
+        return Activity::query()
+            ->leftJoin('actions', 'activities.action_id', '=', 'actions.id')
+            ->leftJoin('decisions', 'activities.decision_id', '=', 'decisions.id')
+            ->when(! empty($filters['from']), fn ($q) => $q->whereDate('activities.created_at', '>=', $filters['from']))
+            ->when(! empty($filters['to']), fn ($q) => $q->whereDate('activities.created_at', '<=', $filters['to']))
+            ->groupBy('actions.name', 'decisions.name')
+            ->selectRaw("COALESCE(actions.name, '—') as action_name, COALESCE(decisions.name, '—') as decision_name, COUNT(*) as activities_count");
+    }
+}

app/Reports/ActiveContractsReport.php

@@ -0,0 +1,78 @@
+<?php
+
+namespace App\Reports;
+
+use App\Models\Contract;
+use App\Reports\Contracts\Report;
+use Illuminate\Database\Eloquent\Builder;
+
+class ActiveContractsReport extends BaseEloquentReport implements Report
+{
+    public function slug(): string
+    {
+        return 'active-contracts';
+    }
+
+    public function name(): string
+    {
+        return 'Aktivne pogodbe';
+    }
+
+    public function description(): ?string
+    {
+        return 'Pogodbe, ki so aktivne na izbrani dan, z možnostjo filtriranja po stranki.';
+    }
+
+    public function inputs(): array
+    {
+        return [
+            ['key' => 'client_uuid', 'type' => 'select:client', 'label' => 'Stranka', 'nullable' => true],
+        ];
+    }
+
+    public function columns(): array
+    {
+        return [
+            ['key' => 'contract_reference', 'label' => 'Pogodba'],
+            ['key' => 'client_name', 'label' => 'Stranka'],
+            ['key' => 'person_name', 'label' => 'Zadeva (oseba)'],
+            ['key' => 'start_date', 'label' => 'Začetek'],
+            ['key' => 'end_date', 'label' => 'Konec'],
+            ['key' => 'balance_amount', 'label' => 'Saldo'],
+        ];
+    }
+
+    public function query(array $filters): Builder
+    {
+        $asOf = now()->toDateString();
+
+        return Contract::query()
+            ->join('client_cases', 'contracts.client_case_id', '=', 'client_cases.id')
+            ->leftJoin('clients', 'client_cases.client_id', '=', 'clients.id')
+            ->leftJoin('person as client_people', 'clients.person_id', '=', 'client_people.id')
+            ->leftJoin('person as subject_people', 'client_cases.person_id', '=', 'subject_people.id')
+            ->leftJoin('accounts', 'contracts.id', '=', 'accounts.contract_id')
+            ->when(! empty($filters['client_uuid']), fn ($q) => $q->where('clients.uuid', $filters['client_uuid']))
+            // Active as of date: start_date <= as_of (or null) AND (end_date is null OR end_date >= as_of)
+            ->where(function ($q) use ($asOf) {
+                $q->whereNull('contracts.start_date')
+                    ->orWhereDate('contracts.start_date', '<=', $asOf);
+            })
+            ->where(function ($q) use ($asOf) {
+                $q->whereNull('contracts.end_date')
+                    ->orWhereDate('contracts.end_date', '>=', $asOf);
+            })
+            ->select([
+                'contracts.id',
+                'contracts.start_date',
+                'contracts.end_date',
+            ])
+            ->addSelect([
+                \DB::raw('contracts.reference as contract_reference'),
+                \DB::raw('client_people.full_name as client_name'),
+                \DB::raw('subject_people.full_name as person_name'),
+                \DB::raw('CAST(accounts.balance_amount AS FLOAT) as balance_amount'),
+            ])
+            ->orderBy('contracts.start_date', 'asc');
+    }
+}

app/Reports/ActivitiesPerPeriodReport.php

@@ -0,0 +1,95 @@
+<?php
+
+namespace App\Reports;
+
+use App\Models\Activity;
+use App\Reports\Contracts\Report;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Support\Facades\DB;
+
+class ActivitiesPerPeriodReport extends BaseEloquentReport implements Report
+{
+    public function slug(): string
+    {
+        return 'activities-per-period';
+    }
+
+    public function name(): string
+    {
+        return 'Aktivnosti po obdobjih';
+    }
+
+    public function description(): ?string
+    {
+        return 'Seštevek aktivnosti po dneh/tednih/mesecih v obdobju.';
+    }
+
+    public function inputs(): array
+    {
+        return [
+            ['key' => 'from', 'type' => 'date', 'label' => 'Od', 'nullable' => true],
+            ['key' => 'to', 'type' => 'date', 'label' => 'Do', 'nullable' => true],
+            ['key' => 'period', 'type' => 'string', 'label' => 'Obdobje (day|week|month)', 'default' => 'day'],
+        ];
+    }
+
+    public function columns(): array
+    {
+        return [
+            ['key' => 'period', 'label' => 'Obdobje'],
+            ['key' => 'activities_count', 'label' => 'Št. aktivnosti'],
+        ];
+    }
+
+    public function query(array $filters): Builder
+    {
+        $periodRaw = $filters['period'] ?? 'day';
+        $period = in_array($periodRaw, ['day', 'week', 'month'], true) ? $periodRaw : 'day';
+        $driver = DB::getDriverName();
+
+        // Build database-compatible period expressions
+        if ($driver === 'sqlite') {
+            if ($period === 'day') {
+                // Use string slice to avoid timezone conversion differences in SQLite
+                $selectExpr = DB::raw('SUBSTR(activities.created_at, 1, 10) as period');
+                $groupExpr = DB::raw('SUBSTR(activities.created_at, 1, 10)');
+                $orderExpr = DB::raw('SUBSTR(activities.created_at, 1, 10)');
+            } elseif ($period === 'month') {
+                $selectExpr = DB::raw("strftime('%Y-%m-01', activities.created_at) as period");
+                $groupExpr = DB::raw("strftime('%Y-%m-01', activities.created_at)");
+                $orderExpr = DB::raw("strftime('%Y-%m-01', activities.created_at)");
+            } else { // week
+                $selectExpr = DB::raw("strftime('%Y-%W', activities.created_at) as period");
+                $groupExpr = DB::raw("strftime('%Y-%W', activities.created_at)");
+                $orderExpr = DB::raw("strftime('%Y-%W', activities.created_at)");
+            }
+        } elseif ($driver === 'mysql') {
+            if ($period === 'day') {
+                $selectExpr = DB::raw('DATE(activities.created_at) as period');
+                $groupExpr = DB::raw('DATE(activities.created_at)');
+                $orderExpr = DB::raw('DATE(activities.created_at)');
+            } elseif ($period === 'month') {
+                $selectExpr = DB::raw("DATE_FORMAT(activities.created_at, '%Y-%m-01') as period");
+                $groupExpr = DB::raw("DATE_FORMAT(activities.created_at, '%Y-%m-01')");
+                $orderExpr = DB::raw("DATE_FORMAT(activities.created_at, '%Y-%m-01')");
+            } else { // week
+                // ISO week-year-week number for grouping; adequate for summary grouping
+                $selectExpr = DB::raw("DATE_FORMAT(activities.created_at, '%x-%v') as period");
+                $groupExpr = DB::raw("DATE_FORMAT(activities.created_at, '%x-%v')");
+                $orderExpr = DB::raw("DATE_FORMAT(activities.created_at, '%x-%v')");
+            }
+        } else { // postgres and others supporting date_trunc
+            $selectExpr = DB::raw("date_trunc('".$period."', activities.created_at) as period");
+            $groupExpr = DB::raw("date_trunc('".$period."', activities.created_at)");
+            $orderExpr = DB::raw("date_trunc('".$period."', activities.created_at)");
+        }
+
+        return Activity::query()
+            ->when(! empty($filters['from']), fn ($q) => $q->whereDate('activities.created_at', '>=', $filters['from']))
+            ->when(! empty($filters['to']), fn ($q) => $q->whereDate('activities.created_at', '<=', $filters['to']))
+            ->groupBy($groupExpr)
+            ->orderBy($orderExpr)
+            ->select($selectExpr)
+            ->selectRaw('COUNT(*) as activities_count');
+    }
+}

app/Reports/BaseEloquentReport.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Reports;
+
+use App\Reports\Contracts\Report;
+use Illuminate\Contracts\Pagination\LengthAwarePaginator;
+use Illuminate\Database\Eloquent\Builder as EloquentBuilder;
+use Illuminate\Database\Query\Builder as QueryBuilder;
+use Illuminate\Http\Request;
+
+abstract class BaseEloquentReport implements Report
+{
+    public function description(): ?string
+    {
+        return null;
+    }
+
+    public function authorize(Request $request): void
+    {
+        // Default: no extra checks. Controllers can gate via middleware.
+    }
+
+    /**
+     * @param  array<string, mixed>  $filters
+     */
+    public function paginate(array $filters, int $perPage = 25): LengthAwarePaginator
+    {
+        /** @var EloquentBuilder|QueryBuilder $query */
+        $query = $this->query($filters);
+
+        return $query->paginate($perPage);
+    }
+}

app/Reports/Contracts/Report.php

@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Reports\Contracts;
+
+use Illuminate\Contracts\Pagination\LengthAwarePaginator;
+use Illuminate\Database\Eloquent\Builder as EloquentBuilder;
+use Illuminate\Database\Query\Builder as QueryBuilder;
+use Illuminate\Http\Request;
+
+interface Report
+{
+    public function slug(): string;
+
+    public function name(): string;
+
+    public function description(): ?string;
+
+    /**
+     * Return an array describing input filters (type, label, default, options) for UI.
+     * Example item: ['key' => 'from', 'type' => 'date', 'label' => 'Od', 'default' => today()]
+     *
+     * @return array<int, array<string, mixed>>
+     */
+    public function inputs(): array;
+
+    /**
+     * Return column definitions for the table and exports.
+     * Example: [ ['key' => 'id', 'label' => '#'], ['key' => 'user', 'label' => 'Uporabnik'] ]
+     *
+     * @return array<int, array<string, mixed>>
+     */
+    public function columns(): array;
+
+    /**
+     * Build the data source query for the report based on validated filters.
+     * Should return an Eloquent or Query builder.
+     *
+     * @param  array<string, mixed>  $filters
+     * @return EloquentBuilder|QueryBuilder
+     */
+    public function query(array $filters);
+
+    /**
+     * Optional per-report authorization logic.
+     */
+    public function authorize(Request $request): void;
+
+    /**
+     * Execute the report and return a paginator for UI.
+     *
+     * @param  array<string, mixed>  $filters
+     */
+    public function paginate(array $filters, int $perPage = 25): LengthAwarePaginator;
+}

app/Reports/DecisionsCountReport.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Reports;
+
+use App\Models\Activity;
+use App\Reports\Contracts\Report;
+use Illuminate\Database\Eloquent\Builder;
+
+class DecisionsCountReport extends BaseEloquentReport implements Report
+{
+    public function slug(): string
+    {
+        return 'decisions-counts';
+    }
+
+    public function name(): string
+    {
+        return 'Odločitve – štetje';
+    }
+
+    public function description(): ?string
+    {
+        return 'Število aktivnosti po odločitvah v izbranem obdobju.';
+    }
+
+    public function inputs(): array
+    {
+        return [
+            ['key' => 'from', 'type' => 'date', 'label' => 'Od', 'nullable' => true],
+            ['key' => 'to', 'type' => 'date', 'label' => 'Do', 'nullable' => true],
+        ];
+    }
+
+    public function columns(): array
+    {
+        return [
+            ['key' => 'decision_name', 'label' => 'Odločitev'],
+            ['key' => 'activities_count', 'label' => 'Št. aktivnosti'],
+        ];
+    }
+
+    public function query(array $filters): Builder
+    {
+        return Activity::query()
+            ->leftJoin('decisions', 'activities.decision_id', '=', 'decisions.id')
+            ->when(!empty($filters['from']), fn ($q) => $q->whereDate('activities.created_at', '>=', $filters['from']))
+            ->when(!empty($filters['to']), fn ($q) => $q->whereDate('activities.created_at', '<=', $filters['to']))
+            ->groupBy('decisions.name')
+            ->selectRaw("COALESCE(decisions.name, '—') as decision_name, COUNT(*) as activities_count");
+    }
+}

app/Reports/FieldJobsCompletedReport.php

@@ -0,0 +1,60 @@
+<?php
+
+namespace App\Reports;
+
+use App\Models\FieldJob;
+use Illuminate\Database\Eloquent\Builder as EloquentBuilder;
+
+class FieldJobsCompletedReport extends BaseEloquentReport
+{
+    public function slug(): string
+    {
+        return 'field-jobs-completed';
+    }
+
+    public function name(): string
+    {
+        return 'Zaključeni tereni';
+    }
+
+    public function description(): ?string
+    {
+        return 'Pregled zaključenih terenov po datumu in uporabniku.';
+    }
+
+    public function inputs(): array
+    {
+        return [
+            ['key' => 'from', 'type' => 'date', 'label' => 'Od', 'default' => now()->startOfMonth()->toDateString()],
+            ['key' => 'to', 'type' => 'date', 'label' => 'Do', 'default' => now()->toDateString()],
+            ['key' => 'user_id', 'type' => 'select:user', 'label' => 'Uporabnik', 'default' => null],
+        ];
+    }
+
+    public function columns(): array
+    {
+        return [
+            ['key' => 'id', 'label' => '#'],
+            ['key' => 'contract_reference', 'label' => 'Pogodba'],
+            ['key' => 'assigned_user_name', 'label' => 'Terenski'],
+            ['key' => 'completed_at', 'label' => 'Zaključeno'],
+            ['key' => 'notes', 'label' => 'Opombe'],
+        ];
+    }
+
+    /**
+     * @param  array<string, mixed>  $filters
+     */
+    public function query(array $filters): EloquentBuilder
+    {
+        $from = isset($filters['from']) ? now()->parse($filters['from'])->startOfDay() : now()->startOfMonth();
+        $to = isset($filters['to']) ? now()->parse($filters['to'])->endOfDay() : now()->endOfDay();
+
+        return FieldJob::query()
+            ->whereNull('cancelled_at')
+            ->whereBetween('completed_at', [$from, $to])
+            ->when(! empty($filters['user_id']), fn ($q) => $q->where('assigned_user_id', $filters['user_id']))
+            ->with(['assignedUser:id,name', 'contract:id,reference'])
+            ->select(['id', 'assigned_user_id', 'contract_id', 'completed_at', 'notes']);
+    }
+}

app/Reports/ReportRegistry.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Reports;
+
+use App\Reports\Contracts\Report;
+
+class ReportRegistry
+{
+    /** @var array<string, Report> */
+    protected array $reports = [];
+
+    public function register(Report $report): void
+    {
+        $this->reports[$report->slug()] = $report;
+    }
+
+    /**
+     * @return array<string, Report>
+     */
+    public function all(): array
+    {
+        return $this->reports;
+    }
+
+    public function findBySlug(string $slug): ?Report
+    {
+        return $this->reports[$slug] ?? null;
+    }
+}

app/Reports/SegmentActivityCountsReport.php

@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Reports;
+
+use App\Models\Activity;
+use App\Reports\Contracts\Report;
+use Illuminate\Database\Eloquent\Builder;
+
+class SegmentActivityCountsReport extends BaseEloquentReport implements Report
+{
+    public function slug(): string
+    {
+        return 'segment-activity-counts';
+    }
+
+    public function name(): string
+    {
+        return 'Aktivnosti po segmentih';
+    }
+
+    public function description(): ?string
+    {
+        return 'Število aktivnosti po segmentih v izbranem obdobju (glede na segment dejanja).';
+    }
+
+    public function inputs(): array
+    {
+        return [
+            ['key' => 'from', 'type' => 'date', 'label' => 'Od', 'nullable' => true],
+            ['key' => 'to', 'type' => 'date', 'label' => 'Do', 'nullable' => true],
+        ];
+    }
+
+    public function columns(): array
+    {
+        return [
+            ['key' => 'segment_name', 'label' => 'Segment'],
+            ['key' => 'activities_count', 'label' => 'Št. aktivnosti'],
+        ];
+    }
+
+    public function query(array $filters): Builder
+    {
+        $q = Activity::query()
+            ->join('actions', 'activities.action_id', '=', 'actions.id')
+            ->leftJoin('segments', 'actions.segment_id', '=', 'segments.id')
+            ->when(! empty($filters['from']), fn ($qq) => $qq->whereDate('activities.created_at', '>=', $filters['from']))
+            ->when(! empty($filters['to']), fn ($qq) => $qq->whereDate('activities.created_at', '<=', $filters['to']))
+            ->groupBy('segments.name')
+            ->selectRaw("COALESCE(segments.name, 'Brez segmenta') as segment_name, COUNT(*) as activities_count");
+
+        return $q;
+    }
+}

app/Services/ClientCaseDataService.php

@@ -0,0 +1,181 @@
+<?php
+
+namespace App\Services;
+
+use App\Models\ClientCase;
+use App\Models\Contract;
+use App\Models\Document;
+use Illuminate\Contracts\Pagination\LengthAwarePaginator;
+use Illuminate\Support\Collection;
+
+class ClientCaseDataService
+{
+    /**
+     * Get paginated contracts for a client case with optional segment filtering.
+     */
+    public function getContracts(ClientCase $clientCase, ?int $segmentId = null, int $perPage = 50): LengthAwarePaginator
+    {
+        $query = $clientCase->contracts()
+            ->select(['id', 'uuid', 'reference', 'start_date', 'end_date', 'description', 'meta', 'active', 'type_id', 'client_case_id', 'created_at'])
+            ->with([
+                'type:id,name',
+                'account' => function ($q) {
+                    $q->select([
+                        'accounts.id',
+                        'accounts.contract_id',
+                        'accounts.type_id',
+                        'accounts.initial_amount',
+                        'accounts.balance_amount',
+                        'accounts.promise_date',
+                        'accounts.created_at',
+                        'accounts.updated_at',
+                    ])->orderByDesc('accounts.id');
+                },
+                'segments:id,name',
+                'objects:id,contract_id,reference,name,description,type,created_at',
+            ])
+            ->orderByDesc('created_at');
+
+        if (! empty($segmentId)) {
+            $query->forSegment($segmentId);
+        }
+
+        $perPage = max(1, min(100, $perPage));
+
+        return $query->paginate($perPage, ['*'], 'contracts_page')->withQueryString();
+    }
+
+    /**
+     * Get paginated activities for a client case with optional segment and filter constraints.
+     */
+    public function getActivities(
+        ClientCase $clientCase,
+        ?int $segmentId = null,
+        ?string $encodedFilters = null,
+        array $contractIds = [],
+        int $perPage = 20
+    ): LengthAwarePaginator {
+        $query = $clientCase->activities()
+            ->with(['action', 'decision', 'contract:id,uuid,reference', 'user:id,name'])
+            ->orderByDesc('created_at');
+
+        if (! empty($segmentId)) {
+            $query->forSegment($segmentId, $contractIds);
+        }
+
+        if (! empty($encodedFilters)) {
+            $query->withFilters($encodedFilters, $clientCase);
+        }
+
+        $perPage = max(1, min(100, $perPage));
+
+        return $query->paginate($perPage, ['*'], 'activities_page')->withQueryString();
+    }
+
+    /**
+     * Get merged documents from case and its contracts.
+     */
+    public function getDocuments(ClientCase $clientCase, array $contractIds = [], int $perPage = 15): LengthAwarePaginator
+    {
+        $query = null;
+        $caseDocsQuery = Document::query()
+            ->select([
+                'documents.id',
+                'documents.uuid',
+                'documents.documentable_id',
+                'documents.documentable_type',
+                'documents.name',
+                'documents.file_name',
+                'documents.original_name',
+                'documents.extension',
+                'documents.mime_type',
+                'documents.size',
+                'documents.created_at',
+                'documents.is_public',
+                \DB::raw('NULL as contract_reference'),
+                \DB::raw('NULL as contract_uuid'),
+                \DB::raw("'{$clientCase->uuid}' as client_case_uuid"),
+                \DB::raw('users.name as created_by'),
+            ])
+            ->join('users', 'documents.user_id', '=', 'users.id')
+            ->where('documents.documentable_type', ClientCase::class)
+            ->where('documents.documentable_id', $clientCase->id);
+
+        if (! empty($contractIds)) {
+            // Get contract references for mapping
+            $contracts = Contract::query()
+                ->whereIn('id', $contractIds)
+                ->get(['id', 'uuid', 'reference'])
+                ->keyBy('id');
+
+            $contractDocsQuery = Document::query()
+                ->select([
+                    'documents.id',
+                    'documents.uuid',
+                    'documents.documentable_id',
+                    'documents.documentable_type',
+                    'documents.name',
+                    'documents.file_name',
+                    'documents.original_name',
+                    'documents.extension',
+                    'documents.mime_type',
+                    'documents.size',
+                    'documents.created_at',
+                    'documents.is_public',
+                    'contracts.reference as contract_reference',
+                    'contracts.uuid as contract_uuid',
+                    \DB::raw('NULL as client_case_uuid'),
+                    \DB::raw('users.name as created_by'),
+                ])
+                ->join('users', 'documents.user_id', '=', 'users.id')
+                ->join('contracts', 'documents.documentable_id', '=', 'contracts.id')
+                ->where('documents.documentable_type', Contract::class)
+                ->whereIn('documents.documentable_id', $contractIds);
+
+            // Union the queries
+            $query = $caseDocsQuery->union($contractDocsQuery);
+        } else {
+            $query = $caseDocsQuery;
+        }
+
+        return \DB::table(\DB::raw("({$query->toSql()}) as documents"))
+            ->mergeBindings($query->getQuery())
+            ->orderByDesc('created_at')
+            ->paginate($perPage, ['*'], 'documentsPage')
+            ->withQueryString();
+    }
+
+    /**
+     * Get archive metadata from latest non-reactivate archive setting.
+     */
+    public function getArchiveMeta(): array
+    {
+        $latestArchiveSetting = \App\Models\ArchiveSetting::query()
+            ->where('enabled', true)
+            ->where(function ($q) {
+                $q->whereNull('reactivate')->orWhere('reactivate', false);
+            })
+            ->orderByDesc('id')
+            ->first();
+
+        $archiveSegmentId = optional($latestArchiveSetting)->segment_id;
+        $relatedArchiveTables = [];
+
+        if ($latestArchiveSetting) {
+            $entities = (array) $latestArchiveSetting->entities;
+            foreach ($entities as $edef) {
+                if (isset($edef['related']) && is_array($edef['related'])) {
+                    foreach ($edef['related'] as $rel) {
+                        $relatedArchiveTables[] = $rel;
+                    }
+                }
+            }
+            $relatedArchiveTables = array_values(array_unique($relatedArchiveTables));
+        }
+
+        return [
+            'archive_segment_id' => $archiveSegmentId,
+            'related_tables' => $relatedArchiveTables,
+        ];
+    }
+}

app/Services/Documents/DocumentStreamService.php

@@ -0,0 +1,221 @@
+<?php
+
+namespace App\Services\Documents;
+
+use App\Models\Document;
+use Illuminate\Http\Response;
+use Illuminate\Support\Facades\Storage;
+use Symfony\Component\HttpFoundation\StreamedResponse;
+
+class DocumentStreamService
+{
+    /**
+     * Stream a document either inline or as attachment with all Windows/public fallbacks.
+     */
+    public function stream(Document $document, bool $inline = true): StreamedResponse|Response
+    {
+        $disk = $document->disk ?: 'public';
+        $relPath = $this->normalizePath($document->path ?? '');
+
+        // Handle DOC/DOCX previews for inline viewing
+        if ($inline) {
+            $previewResponse = $this->tryPreview($document);
+            if ($previewResponse) {
+                return $previewResponse;
+            }
+        }
+
+        // Try to find the file using multiple path candidates
+        $found = $this->findFile($disk, $relPath);
+        
+        if (! $found) {
+            // Try public/ fallback
+            $found = $this->tryPublicFallback($relPath);
+            if (! $found) {
+                abort(404, 'Document file not found');
+            }
+        }
+
+        $headers = $this->buildHeaders($document, $inline);
+
+        // Try streaming first
+        $stream = Storage::disk($disk)->readStream($found);
+        if ($stream !== false) {
+            return response()->stream(function () use ($stream) {
+                fpassthru($stream);
+            }, 200, $headers);
+        }
+
+        // Fallbacks on readStream failure
+        return $this->fallbackStream($disk, $found, $document, $relPath, $headers);
+    }
+
+    /**
+     * Normalize path for Windows and legacy prefixes.
+     */
+    protected function normalizePath(string $path): string
+    {
+        $path = str_replace('\\', '/', $path);
+        $path = ltrim($path, '/');
+        if (str_starts_with($path, 'public/')) {
+            $path = substr($path, 7);
+        }
+
+        return $path;
+    }
+
+    /**
+     * Build path candidates to try.
+     */
+    protected function buildPathCandidates(string $relPath, ?string $documentPath): array
+    {
+        $candidates = [$relPath];
+        $raw = $documentPath ? ltrim(str_replace('\\', '/', $documentPath), '/') : null;
+        
+        if ($raw && $raw !== $relPath) {
+            $candidates[] = $raw;
+        }
+        if (str_starts_with($relPath, 'storage/')) {
+            $candidates[] = substr($relPath, 8);
+        }
+        if ($raw && str_starts_with($raw, 'storage/')) {
+            $candidates[] = substr($raw, 8);
+        }
+
+        return array_unique($candidates);
+    }
+
+    /**
+     * Try to find file using path candidates.
+     */
+    protected function findFile(string $disk, string $relPath, ?string $documentPath = null): ?string
+    {
+        $candidates = $this->buildPathCandidates($relPath, $documentPath);
+        
+        foreach ($candidates as $cand) {
+            if (Storage::disk($disk)->exists($cand)) {
+                return $cand;
+            }
+        }
+
+        return null;
+    }
+
+    /**
+     * Try public/ fallback path.
+     */
+    protected function tryPublicFallback(string $relPath): ?string
+    {
+        $publicFull = public_path($relPath);
+        $real = @realpath($publicFull);
+        $publicRoot = @realpath(public_path());
+        $realN = $real ? str_replace('\\\\', '/', $real) : null;
+        $rootN = $publicRoot ? str_replace('\\\\', '/', $publicRoot) : null;
+        
+        if ($realN && $rootN && str_starts_with($realN, $rootN) && is_file($real)) {
+            return $real;
+        }
+
+        return null;
+    }
+
+    /**
+     * Try to stream preview for DOC/DOCX files.
+     */
+    protected function tryPreview(Document $document): StreamedResponse|Response|null
+    {
+        $ext = strtolower(pathinfo($document->original_name ?: $document->file_name, PATHINFO_EXTENSION));
+        if (! in_array($ext, ['doc', 'docx'])) {
+            return null;
+        }
+
+        $previewDisk = config('files.preview_disk', 'public');
+        if ($document->preview_path && Storage::disk($previewDisk)->exists($document->preview_path)) {
+            $stream = Storage::disk($previewDisk)->readStream($document->preview_path);
+            if ($stream !== false) {
+                $previewNameBase = $document->name ?: pathinfo($document->original_name ?: $document->file_name, PATHINFO_FILENAME);
+
+                return response()->stream(function () use ($stream) {
+                    fpassthru($stream);
+                }, 200, [
+                    'Content-Type' => $document->preview_mime ?: 'application/pdf',
+                    'Content-Disposition' => 'inline; filename="'.addslashes($previewNameBase.'.pdf').'"',
+                    'Cache-Control' => 'private, max-age=0, no-cache',
+                    'Pragma' => 'no-cache',
+                ]);
+            }
+        }
+
+        // Queue preview generation if not available
+        \App\Jobs\GenerateDocumentPreview::dispatch($document->id);
+
+        return response('Preview is being generated. Please try again shortly.', 202);
+    }
+
+    /**
+     * Build response headers.
+     */
+    protected function buildHeaders(Document $document, bool $inline): array
+    {
+        $nameBase = $document->name ?: pathinfo($document->original_name ?: $document->file_name, PATHINFO_FILENAME);
+        $ext = strtolower(pathinfo($document->original_name ?: $document->file_name, PATHINFO_EXTENSION));
+        $name = $ext ? ($nameBase.'.'.$ext) : $nameBase;
+
+        return [
+            'Content-Type' => $document->mime_type ?: 'application/octet-stream',
+            'Content-Disposition' => ($inline ? 'inline' : 'attachment').'; filename="'.addslashes($name).'"',
+            'Cache-Control' => 'private, max-age=0, no-cache',
+            'Pragma' => 'no-cache',
+        ];
+    }
+
+    /**
+     * Fallback streaming methods when readStream fails.
+     */
+    protected function fallbackStream(string $disk, string $found, Document $document, string $relPath, array $headers): StreamedResponse|Response
+    {
+        // Fallback 1: get() the bytes directly
+        try {
+            $bytes = Storage::disk($disk)->get($found);
+            if (! is_null($bytes) && $bytes !== false) {
+                return response($bytes, 200, $headers);
+            }
+        } catch (\Throwable $e) {
+            // Continue to next fallback
+        }
+
+        // Fallback 2: open via absolute storage path
+        $abs = null;
+        try {
+            if (method_exists(Storage::disk($disk), 'path')) {
+                $abs = Storage::disk($disk)->path($found);
+            }
+        } catch (\Throwable $e) {
+            $abs = null;
+        }
+        
+        if ($abs && is_file($abs)) {
+            $fp = @fopen($abs, 'rb');
+            if ($fp !== false) {
+                return response()->stream(function () use ($fp) {
+                    fpassthru($fp);
+                }, 200, $headers);
+            }
+        }
+
+        // Fallback 3: serve from public path if available
+        $publicFull = public_path($found);
+        $real = @realpath($publicFull);
+        if ($real && is_file($real)) {
+            $fp = @fopen($real, 'rb');
+            if ($fp !== false) {
+                return response()->stream(function () use ($fp) {
+                    fpassthru($fp);
+                }, 200, $headers);
+            }
+        }
+
+        abort(404, 'Document file could not be streamed');
+    }
+}
+

app/Services/ReferenceDataCache.php

@@ -0,0 +1,68 @@
+<?php
+
+namespace App\Services;
+
+use App\Models\AccountType;
+use App\Models\ContractType;
+use App\Models\Person\AddressType;
+use App\Models\Person\PhoneType;
+use Illuminate\Support\Facades\Cache;
+
+class ReferenceDataCache
+{
+    private const TTL = 3600; // 1 hour
+
+    public function getAddressTypes()
+    {
+        return Cache::remember('reference_data:address_types', self::TTL, fn () => AddressType::all());
+    }
+
+    public function getPhoneTypes()
+    {
+        return Cache::remember('reference_data:phone_types', self::TTL, fn () => PhoneType::all());
+    }
+
+    public function getAccountTypes()
+    {
+        return Cache::remember('reference_data:account_types', self::TTL, fn () => AccountType::all());
+    }
+
+    public function getContractTypes()
+    {
+        return Cache::remember('reference_data:contract_types', self::TTL, fn () => ContractType::whereNull('deleted_at')->get());
+    }
+
+    /**
+     * Clear all reference data cache.
+     */
+    public function clearAll(): void
+    {
+        Cache::forget('reference_data:address_types');
+        Cache::forget('reference_data:phone_types');
+        Cache::forget('reference_data:account_types');
+        Cache::forget('reference_data:contract_types');
+    }
+
+    /**
+     * Clear specific reference data cache.
+     */
+    public function clear(string $type): void
+    {
+        Cache::forget("reference_data:{$type}");
+    }
+
+    /**
+     * Get all types as an array for convenience.
+     */
+    public function getAllTypes(): array
+    {
+        return [
+            'address_types' => $this->getAddressTypes(),
+            'phone_types' => $this->getPhoneTypes(),
+            'account_types' => $this->getAccountTypes(),
+            'contract_types' => $this->getContractTypes(),
+        ];
+    }
+}
+
+

bootstrap/providers.php

@@ -5,4 +5,5 @@
     App\Providers\AuthServiceProvider::class,
     App\Providers\FortifyServiceProvider::class,
     App\Providers\JetstreamServiceProvider::class,
+    App\Providers\ReportServiceProvider::class,
 ];

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "typescript": false,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "resources/css/app.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "composables": "@/composables"
+  },
+  "registries": {}
+}

composer.json

@@ -5,9 +5,9 @@
     "keywords": ["laravel", "framework"],
     "license": "MIT",
     "require": {
-            "tijsverkoyen/css-to-inline-styles": "^2.2",
         "php": "^8.2",
         "arielmejiadev/larapex-charts": "^2.1",
+        "barryvdh/laravel-dompdf": "^3.1",
         "diglactic/laravel-breadcrumbs": "^10.0",
         "http-interop/http-factory-guzzle": "^1.2",
         "inertiajs/inertia-laravel": "^2.0",
@@ -16,9 +16,11 @@
         "laravel/sanctum": "^4.0",
         "laravel/scout": "^10.11",
         "laravel/tinker": "^2.9",
+        "maatwebsite/excel": "^3.1",
         "meilisearch/meilisearch-php": "^1.11",
         "robertboes/inertia-breadcrumbs": "dev-laravel-12",
-        "tightenco/ziggy": "^2.0"
+        "tightenco/ziggy": "^2.0",
+        "tijsverkoyen/css-to-inline-styles": "^2.2"
     },
     "require-dev": {
         "fakerphp/faker": "^1.23",

config/reports.php

@@ -0,0 +1,10 @@
+<?php
+
+return [
+    // Optionally list Postgres materialized view names to refresh on schedule
+    'materialized_views' => [
+        // e.g., 'mv_activities_daily', 'mv_segment_activity_counts'
+    ],
+    // Time for scheduled refresh (24h format HH:MM)
+    'refresh_time' => '03:00',
+];

database/migrations/2025_01_15_000000_add_performance_indexes.php

@@ -0,0 +1,143 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        // Contracts table indexes
+        Schema::table('contracts', function (Blueprint $table) {
+            if (! $this->indexExists('contracts', 'contracts_client_case_id_active_deleted_at_index')) {
+                $table->index(['client_case_id', 'active', 'deleted_at'], 'contracts_client_case_id_active_deleted_at_index');
+            }
+            if (! $this->indexExists('contracts', 'contracts_start_date_end_date_index')) {
+                $table->index(['start_date', 'end_date'], 'contracts_start_date_end_date_index');
+            }
+        });
+
+        // Contract segment pivot table indexes
+        Schema::table('contract_segment', function (Blueprint $table) {
+            if (! $this->indexExists('contract_segment', 'contract_segment_contract_id_active_index')) {
+                $table->index(['contract_id', 'active'], 'contract_segment_contract_id_active_index');
+            }
+            if (! $this->indexExists('contract_segment', 'contract_segment_segment_id_active_index')) {
+                $table->index(['segment_id', 'active'], 'contract_segment_segment_id_active_index');
+            }
+        });
+
+        // Activities table indexes
+        Schema::table('activities', function (Blueprint $table) {
+            if (! $this->indexExists('activities', 'activities_client_case_id_created_at_index')) {
+                $table->index(['client_case_id', 'created_at'], 'activities_client_case_id_created_at_index');
+            }
+            if (! $this->indexExists('activities', 'activities_contract_id_created_at_index')) {
+                $table->index(['contract_id', 'created_at'], 'activities_contract_id_created_at_index');
+            }
+        });
+
+        // Client cases table indexes
+        Schema::table('client_cases', function (Blueprint $table) {
+            if (! $this->indexExists('client_cases', 'client_cases_client_id_active_index')) {
+                $table->index(['client_id', 'active'], 'client_cases_client_id_active_index');
+            }
+            if (! $this->indexExists('client_cases', 'client_cases_person_id_active_index')) {
+                $table->index(['person_id', 'active'], 'client_cases_person_id_active_index');
+            }
+        });
+
+        // Documents table indexes for polymorphic relations
+        Schema::table('documents', function (Blueprint $table) {
+            if (! $this->indexExists('documents', 'documents_documentable_type_documentable_id_index')) {
+                $table->index(['documentable_type', 'documentable_id'], 'documents_documentable_type_documentable_id_index');
+            }
+            if (! $this->indexExists('documents', 'documents_created_at_index')) {
+                $table->index(['created_at'], 'documents_created_at_index');
+            }
+        });
+
+        // Field jobs indexes
+        Schema::table('field_jobs', function (Blueprint $table) {
+            if (! $this->indexExists('field_jobs', 'field_jobs_assigned_user_id_index')) {
+                $table->index(['assigned_user_id'], 'field_jobs_assigned_user_id_index');
+            }
+            if (! $this->indexExists('field_jobs', 'field_jobs_contract_id_index')) {
+                $table->index(['contract_id'], 'field_jobs_contract_id_index');
+            }
+            if (! $this->indexExists('field_jobs', 'field_jobs_completed_at_index')) {
+                $table->index(['completed_at'], 'field_jobs_completed_at_index');
+            }
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('contracts', function (Blueprint $table) {
+            $table->dropIndex('contracts_client_case_id_active_deleted_at_index');
+            $table->dropIndex('contracts_start_date_end_date_index');
+        });
+
+        Schema::table('contract_segment', function (Blueprint $table) {
+            $table->dropIndex('contract_segment_contract_id_active_index');
+            $table->dropIndex('contract_segment_segment_id_active_index');
+        });
+
+        Schema::table('activities', function (Blueprint $table) {
+            $table->dropIndex('activities_client_case_id_created_at_index');
+            $table->dropIndex('activities_contract_id_created_at_index');
+        });
+
+        Schema::table('client_cases', function (Blueprint $table) {
+            $table->dropIndex('client_cases_client_id_active_index');
+            $table->dropIndex('client_cases_person_id_active_index');
+        });
+
+        Schema::table('documents', function (Blueprint $table) {
+            $table->dropIndex('documents_documentable_type_documentable_id_index');
+            $table->dropIndex('documents_created_at_index');
+        });
+
+        Schema::table('field_jobs', function (Blueprint $table) {
+            $table->dropIndex('field_jobs_assigned_user_id_index');
+            $table->dropIndex('field_jobs_contract_id_index');
+            $table->dropIndex('field_jobs_completed_at_index');
+        });
+    }
+
+    /**
+     * Check if an index exists on a table.
+     */
+    protected function indexExists(string $table, string $index): bool
+    {
+        $connection = Schema::getConnection();
+        $driver = $connection->getDriverName();
+
+        if ($driver === 'pgsql') {
+            // PostgreSQL uses pg_indexes system catalog
+            $result = $connection->select(
+                "SELECT COUNT(*) as count FROM pg_indexes 
+                 WHERE schemaname = 'public' AND tablename = ? AND indexname = ?",
+                [$table, $index]
+            );
+        } else {
+            // MySQL/MariaDB uses information_schema.statistics
+            $databaseName = $connection->getDatabaseName();
+            $result = $connection->select(
+                "SELECT COUNT(*) as count FROM information_schema.statistics 
+                 WHERE table_schema = ? AND table_name = ? AND index_name = ?",
+                [$databaseName, $table, $index]
+            );
+        }
+
+        return $result[0]->count > 0;
+    }
+};
+

package.json

@@ -9,13 +9,14 @@
         "@inertiajs/vue3": "2.0",
         "@mdi/js": "^7.4.47",
         "@tailwindcss/forms": "^0.5.7",
+        "@tailwindcss/postcss": "^4.1.16",
         "@tailwindcss/typography": "^0.5.10",
         "@vitejs/plugin-vue": "^6.0.1",
         "autoprefixer": "^10.4.16",
         "axios": "^1.7.4",
         "laravel-vite-plugin": "^2.0.1",
         "postcss": "^8.4.32",
-        "tailwindcss": "^3.4.0",
+        "tailwindcss": "^4.1.16",
         "vite": "^7.1.7",
         "vue": "^3.3.13"
     },
@@ -25,24 +26,34 @@
         "@fortawesome/free-regular-svg-icons": "^6.6.0",
         "@fortawesome/free-solid-svg-icons": "^6.6.0",
         "@fortawesome/vue-fontawesome": "^3.0.8",
-    "quill": "^1.3.7",
         "@headlessui/vue": "^1.7.23",
         "@heroicons/vue": "^2.1.5",
         "@internationalized/date": "^3.9.0",
+        "@tanstack/vue-table": "^8.21.3",
+        "@vee-validate/zod": "^4.15.1",
         "@vuepic/vue-datepicker": "^11.0.2",
+        "@vueuse/core": "^14.0.0",
         "apexcharts": "^4.0.0",
-        "flowbite": "^2.5.2",
-        "flowbite-vue": "^0.1.6",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "date-fns": "^4.1.0",
         "lodash": "^4.17.21",
+        "lucide-vue-next": "^0.552.0",
         "material-design-icons-iconfont": "^6.7.0",
         "preline": "^2.7.0",
-        "reka-ui": "^2.5.1",
+        "quill": "^1.3.7",
+        "reka-ui": "^2.6.0",
+        "tailwind-merge": "^3.3.1",
+        "tailwindcss-animate": "^1.0.7",
         "tailwindcss-inner-border": "^0.2.0",
         "v-calendar": "^3.1.2",
+        "vee-validate": "^4.15.1",
+        "vue-currency-input": "^3.2.1",
         "vue-multiselect": "^3.1.0",
         "vue-search-input": "^1.1.16",
+        "vue-sonner": "^2.0.9",
         "vue3-apexcharts": "^1.7.0",
         "vuedraggable": "^4.1.0",
-        "vue-currency-input": "^3.2.1"
+        "zod": "^3.25.76"
     }
 }

postcss.config.js

@@ -1,6 +1,9 @@
+import tailwindcss from '@tailwindcss/postcss';
+import autoprefixer from 'autoprefixer';
+
 export default {
-    plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
-    },
+    plugins: [
+        tailwindcss(),
+        autoprefixer(),
+    ],
 };

resources/css/app.css

@@ -1,10 +1,142 @@
-@import '/node_modules/floating-vue/dist/style.css';
-@import '/node_modules/vue-search-input/dist/styles.css';
-@import '/node_modules/vue-multiselect/dist/vue-multiselect.min.css';
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+    /* Disable dark mode */
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Font Family */
+    --font-family-sans: 'Figtree', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+    /* Primary brand colors */
+    --color-primary-50: #eef2ff;
+    --color-primary-100: #e0e7ff;
+    --color-primary-200: #c7d2fe;
+    --color-primary-300: #a5b4fc;
+    --color-primary-400: #818cf8;
+    --color-primary-500: #6366f1;
+    --color-primary-600: #4f46e5;
+    --color-primary-700: #4338ca;
+    --color-primary-800: #3730a3;
+    --color-primary-900: #312e81;
+    --color-primary-950: #1e1b4b;
+
+    /* Semantic colors - Success */
+    --color-success-50: #f0fdf4;
+    --color-success-100: #dcfce7;
+    --color-success-200: #bbf7d0;
+    --color-success-300: #86efac;
+    --color-success-400: #4ade80;
+    --color-success-500: #22c55e;
+    --color-success-600: #16a34a;
+    --color-success-700: #15803d;
+    --color-success-800: #166534;
+    --color-success-900: #14532d;
+
+    /* Semantic colors - Warning */
+    --color-warning-50: #fffbeb;
+    --color-warning-100: #fef3c7;
+    --color-warning-200: #fde68a;
+    --color-warning-300: #fcd34d;
+    --color-warning-400: #fbbf24;
+    --color-warning-500: #f59e0b;
+    --color-warning-600: #d97706;
+    --color-warning-700: #b45309;
+    --color-warning-800: #92400e;
+    --color-warning-900: #78350f;
+
+    /* Semantic colors - Error */
+    --color-error-50: #fef2f2;
+    --color-error-100: #fee2e2;
+    --color-error-200: #fecaca;
+    --color-error-300: #fca5a5;
+    --color-error-400: #f87171;
+    --color-error-500: #ef4444;
+    --color-error-600: #dc2626;
+    --color-error-700: #b91c1c;
+    --color-error-800: #991b1b;
+    --color-error-900: #7f1d1d;
+
+    /* Semantic colors - Info */
+    --color-info-50: #eff6ff;
+    --color-info-100: #dbeafe;
+    --color-info-200: #bfdbfe;
+    --color-info-300: #93c5fd;
+    --color-info-400: #60a5fa;
+    --color-info-500: #3b82f6;
+    --color-info-600: #2563eb;
+    --color-info-700: #1d4ed8;
+    --color-info-800: #1e40af;
+    --color-info-900: #1e3a8a;
+
+    /* Neutral grays */
+    --color-neutral-50: #f9fafb;
+    --color-neutral-100: #f3f4f6;
+    --color-neutral-200: #e5e7eb;
+    --color-neutral-300: #d1d5db;
+    --color-neutral-400: #9ca3af;
+    --color-neutral-500: #6b7280;
+    --color-neutral-600: #4b5563;
+    --color-neutral-700: #374151;
+    --color-neutral-800: #1f2937;
+    --color-neutral-900: #111827;
+
+    /* Spacing scale */
+    --spacing-18: 4.5rem;
+    --spacing-88: 22rem;
+    --spacing-112: 28rem;
+    --spacing-128: 32rem;
+
+    /* Border radius */
+    --radius-4xl: 2rem;
+
+    /* Box shadows */
+    --shadow-soft: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
+    --shadow-medium: 0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --shadow-strong: 0 10px 40px -10px rgba(0, 0, 0, 0.2);
+
+    /* Animations */
+    --animate-fade-in: fade-in 0.2s ease-in-out;
+    --animate-slide-up: slide-up 0.3s ease-out;
+    --animate-slide-down: slide-down 0.3s ease-out;
+    --animate-shimmer: shimmer 2s infinite linear;
+
+    @keyframes fade-in {
+        from { opacity: 0; }
+        to { opacity: 1; }
+    }
+
+    @keyframes slide-up {
+        from {
+            transform: translateY(10px);
+            opacity: 0;
+        }
+        to {
+            transform: translateY(0);
+            opacity: 1;
+        }
+    }
+
+    @keyframes slide-down {
+        from {
+            transform: translateY(-10px);
+            opacity: 0;
+        }
+        to {
+            transform: translateY(0);
+            opacity: 1;
+        }
+    }
+
+    @keyframes shimmer {
+        from { background-position: -1000px 0; }
+        to { background-position: 1000px 0; }
+    }
+}
 
 [x-cloak] {
     display: none;
@@ -12,3 +144,124 @@ [x-cloak] {
 
 /* Ensure dropdowns/menus render above dialog overlays when appended to body */
 .multiselect__content-wrapper { z-index: 2147483647 !important; }
+
+/* stylelint-disable-next-line at-rule-no-unknown */
+/* @theme is a valid Tailwind CSS v4 at-rule */
+@theme inline {
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-chart-1: var(--chart-1);
+    --color-chart-2: var(--chart-2);
+    --color-chart-3: var(--chart-3);
+    --color-chart-4: var(--chart-4);
+    --color-chart-5: var(--chart-5);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+    --radius: 0.625rem;
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.129 0.042 264.695);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.129 0.042 264.695);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.129 0.042 264.695);
+    --primary: oklch(0.208 0.042 265.755);
+    --primary-foreground: oklch(0.984 0.003 247.858);
+    --secondary: oklch(0.968 0.007 247.896);
+    --secondary-foreground: oklch(0.208 0.042 265.755);
+    --muted: oklch(0.968 0.007 247.896);
+    --muted-foreground: oklch(0.554 0.046 257.417);
+    --accent: oklch(0.968 0.007 247.896);
+    --accent-foreground: oklch(0.208 0.042 265.755);
+    --destructive: oklch(0.577 0.245 27.325);
+    --destructive-foreground: oklch(0.577 0.245 27.325);
+    --border: oklch(0.929 0.013 255.508);
+    --input: oklch(0.929 0.013 255.508);
+    --ring: oklch(0.704 0.04 256.788);
+    --chart-1: oklch(0.646 0.222 41.116);
+    --chart-2: oklch(0.6 0.118 184.704);
+    --chart-3: oklch(0.398 0.07 227.392);
+    --chart-4: oklch(0.828 0.189 84.429);
+    --chart-5: oklch(0.769 0.188 70.08);
+    --sidebar: oklch(0.984 0.003 247.858);
+    --sidebar-foreground: oklch(0.129 0.042 264.695);
+    --sidebar-primary: oklch(0.208 0.042 265.755);
+    --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+    --sidebar-accent: oklch(0.968 0.007 247.896);
+    --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+    --sidebar-border: oklch(0.929 0.013 255.508);
+    --sidebar-ring: oklch(0.704 0.04 256.788);
+}
+
+.dark {
+    --background: oklch(0.129 0.042 264.695);
+    --foreground: oklch(0.984 0.003 247.858);
+    --card: oklch(0.129 0.042 264.695);
+    --card-foreground: oklch(0.984 0.003 247.858);
+    --popover: oklch(0.129 0.042 264.695);
+    --popover-foreground: oklch(0.984 0.003 247.858);
+    --primary: oklch(0.984 0.003 247.858);
+    --primary-foreground: oklch(0.208 0.042 265.755);
+    --secondary: oklch(0.279 0.041 260.031);
+    --secondary-foreground: oklch(0.984 0.003 247.858);
+    --muted: oklch(0.279 0.041 260.031);
+    --muted-foreground: oklch(0.704 0.04 256.788);
+    --accent: oklch(0.279 0.041 260.031);
+    --accent-foreground: oklch(0.984 0.003 247.858);
+    --destructive: oklch(0.396 0.141 25.723);
+    --destructive-foreground: oklch(0.637 0.237 25.331);
+    --border: oklch(0.279 0.041 260.031);
+    --input: oklch(0.279 0.041 260.031);
+    --ring: oklch(0.446 0.043 257.281);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --sidebar: oklch(0.208 0.042 265.755);
+    --sidebar-foreground: oklch(0.984 0.003 247.858);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+    --sidebar-accent: oklch(0.279 0.041 260.031);
+    --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+    --sidebar-border: oklch(0.279 0.041 260.031);
+    --sidebar-ring: oklch(0.446 0.043 257.281);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    }
+  body {
+    @apply bg-background text-foreground;
+    }
+}

resources/js/Components/AddressCreateForm.vue

@@ -1,228 +0,0 @@
-<script setup>
-import { ref, watch } from "vue";
-import { useForm, router, usePage } from "@inertiajs/vue3";
-import DialogModal from "./DialogModal.vue";
-import InputLabel from "./InputLabel.vue";
-import SectionTitle from "./SectionTitle.vue";
-import TextInput from "./TextInput.vue";
-import InputError from "./InputError.vue";
-import PrimaryButton from "./PrimaryButton.vue";
-
-const props = defineProps({
-  show: {
-    type: Boolean,
-    default: false,
-  },
-  person: Object,
-  types: Array,
-  edit: {
-    type: Boolean,
-    default: false,
-  },
-  id: {
-    type: Number,
-    default: 0,
-  },
-});
-
-const processing = ref(false);
-const errors = ref({});
-
-const emit = defineEmits(["close"]);
-
-const close = () => {
-  emit("close");
-  setTimeout(() => {
-    errors.value = {};
-    try {
-      form.clearErrors && form.clearErrors();
-    } catch {}
-  }, 300);
-};
-
-const form = useForm({
-  address: "",
-  country: "",
-  post_code: "",
-  city: "",
-  type_id: props.types?.[0]?.id ?? null,
-  description: "",
-});
-
-const resetForm = () => {
-  form.address = "";
-  form.country = "";
-  form.post_code = "";
-  form.city = "";
-  form.type_id = props.types?.[0]?.id ?? null;
-  form.description = "";
-};
-
-const create = async () => {
-  processing.value = true;
-  errors.value = {};
-
-  form.post(route("person.address.create", props.person), {
-    preserveScroll: true,
-    onSuccess: () => {
-      // Optimistically append from last created record in DB by refetch or expose via flash if needed.
-      // For now, trigger a lightweight reload of person's addresses via a GET if you have an endpoint, else trust parent reactivity.
-      processing.value = false;
-      close();
-      form.reset();
-    },
-    onError: (e) => {
-      errors.value = e || {};
-      processing.value = false;
-    },
-  });
-};
-
-const update = async () => {
-  processing.value = true;
-  errors.value = {};
-
-  form.put(
-    route("person.address.update", { person: props.person, address_id: props.id }),
-    {
-      preserveScroll: true,
-      onSuccess: () => {
-        processing.value = false;
-        close();
-        form.reset();
-      },
-      onError: (e) => {
-        errors.value = e || {};
-        processing.value = false;
-      },
-    }
-  );
-};
-
-watch(
-  () => props.id,
-  (id) => {
-    if (props.edit && id !== 0) {
-      console.log(props.edit);
-      props.person.addresses.filter((a) => {
-        if (a.id === props.id) {
-          form.address = a.address;
-          form.country = a.country;
-          form.post_code = a.post_code || a.postal_code || "";
-          form.city = a.city || "";
-          form.type_id = a.type_id;
-          form.description = a.description;
-        }
-      });
-      return;
-    }
-    resetForm();
-  }
-);
-
-const callSubmit = () => {
-  if (props.edit) {
-    update();
-  } else {
-    create();
-  }
-};
-</script>
-
-<template>
-  <DialogModal :show="show" @close="close">
-    <template #title>
-      <span v-if="edit">Spremeni naslov</span>
-      <span v-else>Dodaj novi naslov</span>
-    </template>
-    <template #content>
-      <form @submit.prevent="callSubmit">
-        <SectionTitle class="border-b mb-4">
-          <template #title> Naslov </template>
-        </SectionTitle>
-
-        <div class="col-span-6 sm:col-span-4">
-          <InputLabel for="cr_address" value="Naslov" />
-          <TextInput
-            id="cr_address"
-            ref="cr_addressInput"
-            v-model="form.address"
-            type="text"
-            class="mt-1 block w-full"
-            autocomplete="address"
-          />
-
-          <InputError
-            v-if="errors.address !== undefined"
-            v-for="err in errors.address"
-            :message="err"
-          />
-        </div>
-        <div class="col-span-6 sm:col-span-4">
-          <InputLabel for="cr_country" value="Država" />
-          <TextInput
-            id="cr_country"
-            ref="cr_countryInput"
-            v-model="form.country"
-            type="text"
-            class="mt-1 block w-full"
-            autocomplete="country"
-          />
-
-          <InputError
-            v-if="errors.address !== undefined"
-            v-for="err in errors.address"
-            :message="err"
-          />
-        </div>
-        <div class="col-span-6 sm:col-span-4">
-          <InputLabel for="cr_post_code" value="Poštna številka" />
-          <TextInput
-            id="cr_post_code"
-            v-model="form.post_code"
-            type="text"
-            class="mt-1 block w-full"
-            autocomplete="postal-code"
-          />
-          <InputError
-            v-if="errors.post_code !== undefined"
-            v-for="err in errors.post_code"
-            :message="err"
-          />
-        </div>
-        <div class="col-span-6 sm:col-span-4">
-          <InputLabel for="cr_city" value="Mesto" />
-          <TextInput
-            id="cr_city"
-            v-model="form.city"
-            type="text"
-            class="mt-1 block w-full"
-            autocomplete="address-level2"
-          />
-          <InputError
-            v-if="errors.city !== undefined"
-            v-for="err in errors.city"
-            :message="err"
-          />
-        </div>
-        <div class="col-span-6 sm:col-span-4">
-          <InputLabel for="cr_type" value="Tip" />
-          <select
-            class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
-            id="cr_type"
-            v-model="form.type_id"
-          >
-            <option v-for="type in types" :key="type.id" :value="type.id">
-              {{ type.name }}
-            </option>
-          </select>
-        </div>
-        <div class="flex justify-end mt-4">
-          <PrimaryButton :class="{ 'opacity-25': processing }" :disabled="processing">
-            Shrani
-          </PrimaryButton>
-        </div>
-      </form>
-    </template>
-  </DialogModal>
-</template>

resources/js/Components/AddressUpdateForm.vue

@@ -1,197 +0,0 @@
-<script setup>
-import { ref, watch } from "vue";
-import { useForm } from "@inertiajs/vue3";
-import DialogModal from "./DialogModal.vue";
-import InputLabel from "./InputLabel.vue";
-import SectionTitle from "./SectionTitle.vue";
-import TextInput from "./TextInput.vue";
-import InputError from "./InputError.vue";
-import PrimaryButton from "./PrimaryButton.vue";
-
-const props = defineProps({
-  show: { type: Boolean, default: false },
-  person: Object,
-  types: Array,
-  id: { type: Number, default: 0 },
-});
-
-const processing = ref(false);
-const errors = ref({});
-
-const emit = defineEmits(["close"]);
-const close = () => {
-  emit("close");
-  setTimeout(() => {
-    errors.value = {};
-    try {
-      form.clearErrors && form.clearErrors();
-    } catch {}
-  }, 300);
-};
-
-const form = useForm({
-  address: "",
-  country: "",
-  post_code: "",
-  city: "",
-  type_id: props.types?.[0]?.id ?? null,
-  description: "",
-});
-
-const resetForm = () => {
-  form.address = "";
-  form.country = "";
-  form.post_code = "";
-  form.city = "";
-  form.type_id = props.types?.[0]?.id ?? null;
-  form.description = "";
-};
-
-const hydrate = () => {
-  const id = props.id;
-  if (id) {
-    const a = (props.person.addresses || []).find((x) => x.id === id);
-    if (a) {
-      form.address = a.address;
-      form.country = a.country;
-      form.post_code = a.post_code || a.postal_code || "";
-      form.city = a.city || "";
-      form.type_id = a.type_id;
-      form.description = a.description || "";
-    }
-  } else {
-    resetForm();
-  }
-};
-
-watch(
-  () => props.id,
-  () => hydrate(),
-  { immediate: true }
-);
-watch(
-  () => props.show,
-  (v) => {
-    if (v) hydrate();
-  }
-);
-
-const update = async () => {
-  processing.value = true;
-  errors.value = {};
-
-  form.put(
-    route("person.address.update", { person: props.person, address_id: props.id }),
-    {
-      preserveScroll: true,
-      onSuccess: () => {
-        processing.value = false;
-        close();
-        form.reset();
-      },
-      onError: (e) => {
-        errors.value = e || {};
-        processing.value = false;
-      },
-    }
-  );
-};
-</script>
-
-<template>
-  <DialogModal :show="show" @close="close">
-    <template #title>Spremeni naslov</template>
-    <template #content>
-      <form @submit.prevent="update">
-        <SectionTitle class="border-b mb-4"
-          ><template #title>Naslov</template></SectionTitle
-        >
-
-        <div class="col-span-6 sm:col-span-4">
-          <InputLabel for="up_address" value="Naslov" />
-          <TextInput
-            id="up_address"
-            v-model="form.address"
-            type="text"
-            class="mt-1 block w-full"
-            autocomplete="address"
-          />
-          <InputError
-            v-if="errors.address !== undefined"
-            v-for="err in errors.address"
-            :message="err"
-          />
-        </div>
-
-        <div class="col-span-6 sm:col-span-4">
-          <InputLabel for="up_country" value="Država" />
-          <TextInput
-            id="up_country"
-            v-model="form.country"
-            type="text"
-            class="mt-1 block w-full"
-            autocomplete="country"
-          />
-          <InputError
-            v-if="errors.country !== undefined"
-            v-for="err in errors.country"
-            :message="err"
-          />
-        </div>
-
-        <div class="col-span-6 sm:col-span-4">
-          <InputLabel for="up_post_code" value="Poštna številka" />
-          <TextInput
-            id="up_post_code"
-            v-model="form.post_code"
-            type="text"
-            class="mt-1 block w-full"
-            autocomplete="postal-code"
-          />
-          <InputError
-            v-if="errors.post_code !== undefined"
-            v-for="err in errors.post_code"
-            :message="err"
-          />
-        </div>
-
-        <div class="col-span-6 sm:col-span-4">
-          <InputLabel for="up_city" value="Mesto" />
-          <TextInput
-            id="up_city"
-            v-model="form.city"
-            type="text"
-            class="mt-1 block w-full"
-            autocomplete="address-level2"
-          />
-          <InputError
-            v-if="errors.city !== undefined"
-            v-for="err in errors.city"
-            :message="err"
-          />
-        </div>
-
-        <div class="col-span-6 sm:col-span-4">
-          <InputLabel for="up_type" value="Tip" />
-          <select
-            id="up_type"
-            v-model="form.type_id"
-            class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
-          >
-            <option v-for="type in types" :key="type.id" :value="type.id">
-              {{ type.name }}
-            </option>
-          </select>
-        </div>
-
-        <div class="flex justify-end mt-4">
-          <PrimaryButton :class="{ 'opacity-25': processing }" :disabled="processing"
-            >Shrani</PrimaryButton
-          >
-        </div>
-      </form>
-    </template>
-  </DialogModal>
-</template>
-
-<style scoped></style>

resources/js/Components/ApplicationMark.vue

@@ -1,3 +1,3 @@
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" class="w-20 h-20" viewBox="0 -960 960 960" fill="#5985E1"><path d="M480-80q-140-35-230-162.5T160-522v-238l320-120 320 120v238q0 78-21.5 154.5T703-225L563-359q-19 11-40.16 18-21.16 7-42.84 7-62 0-105.5-43T331-482.5q0-62.5 43.5-106T480-632q62 0 105.5 43.5T629-482q0 21-6 42t-19 38l88 84q24-43 36-96.5T740-522v-198.48L480-815l-260 94.52V-522q0 131 72.5 236.5T480.2-142q28.8-8 70.3-33t65.5-48l42 43q-35 32-83.5 60.5T480-80Zm.2-314q36.8 0 62.8-25.5t26-63q0-37.5-26.2-63.5-26.21-26-63-26-36.8 0-62.8 26t-26 63.5q0 37.5 26.2 63 26.21 25.5 63 25.5Zm-1.2-90Z"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-auto" viewBox="0 -960 960 960" fill="#5985E1" preserveAspectRatio="xMidYMid meet"><path d="M480-80q-140-35-230-162.5T160-522v-238l320-120 320 120v238q0 78-21.5 154.5T703-225L563-359q-19 11-40.16 18-21.16 7-42.84 7-62 0-105.5-43T331-482.5q0-62.5 43.5-106T480-632q62 0 105.5 43.5T629-482q0 21-6 42t-19 38l88 84q24-43 36-96.5T740-522v-198.48L480-815l-260 94.52V-522q0 131 72.5 236.5T480.2-142q28.8-8 70.3-33t65.5-48l42 43q-35 32-83.5 60.5T480-80Zm.2-314q36.8 0 62.8-25.5t26-63q0-37.5-26.2-63.5-26.21-26-63-26-36.8 0-62.8 26t-26 63.5q0 37.5 26.2 63 26.21 25.5 63 25.5Zm-1.2-90Z"/></svg>
 </template>

resources/js/Components/BasicTable.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { FwbButton, FwbTable, FwbTableBody, FwbTableCell, FwbTableHead, FwbTableHeadCell, FwbTableRow } from 'flowbite-vue';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/Components/ui/table';
 import DialogModal from './DialogModal.vue';
 import { useForm } from '@inertiajs/vue3';
 import { ref } from 'vue';
@@ -9,6 +9,7 @@ import ActionMessage from './ActionMessage.vue';
 import PrimaryButton from './PrimaryButton.vue';
 import Modal from './Modal.vue';
 import SecondaryButton from './SecondaryButton.vue';
+import { Button } from '@/Components/ui/button';
 
 
 const props = defineProps({
@@ -121,30 +122,32 @@ const remove = () => {
     </div>
 
     <div :class="['relative rounded-lg border border-gray-200 bg-white shadow-sm overflow-x-auto overflow-y-auto', bodyMaxHeight, stickyHeader ? 'table-sticky' : '']">
-      <FwbTable hoverable striped class="text-sm">
-        <FwbTableHead class="sticky top-0 z-10 bg-gray-50/90 backdrop-blur supports-[backdrop-filter]:bg-gray-50/80 border-b border-gray-200 shadow-sm">
-          <FwbTableHeadCell
+      <Table class="text-sm">
+        <TableHeader class="sticky top-0 z-10 bg-gray-50/90 backdrop-blur supports-[backdrop-filter]:bg-gray-50/80 border-b border-gray-200 shadow-sm">
+          <TableRow class="border-b">
+            <TableHead
               v-for="(h, hIndex) in header"
               :key="hIndex"
               class="sticky top-0 z-10 uppercase text-xs font-semibold tracking-wide text-gray-700 py-3 first:pl-6 last:pr-6 bg-gray-50/90"
-          >{{ h.data }}</FwbTableHeadCell>
-          <FwbTableHeadCell v-if="editor" class="sticky top-0 z-10 w-px text-gray-700 py-3 bg-gray-50/90"></FwbTableHeadCell>
-          <FwbTableHeadCell v-else class="sticky top-0 z-10 w-px text-gray-700 py-3 bg-gray-50/90" />
-        </FwbTableHead>
-        <FwbTableBody>
-          <FwbTableRow v-for="(row, key, parent_index) in body" :key="key" :class="row.options.class">
-            <FwbTableCell v-for="(col, colIndex) in row.cols" :key="colIndex" class="align-middle">  
+            >{{ h.data }}</TableHead>
+            <TableHead v-if="editor" class="sticky top-0 z-10 w-px text-gray-700 py-3 bg-gray-50/90"></TableHead>
+            <TableHead v-else class="sticky top-0 z-10 w-px text-gray-700 py-3 bg-gray-50/90" />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow v-for="(row, key, parent_index) in body" :key="key" :class="[row.options.class, 'hover:bg-gray-50/50']">
+            <TableCell v-for="(col, colIndex) in row.cols" :key="colIndex" class="align-middle">  
               <a v-if="col.link !== undefined" :class="col.link.css" :href="route(col.link.route, col.link.options)">{{ col.data }}</a>
               <span v-else>{{ col.data }}</span>
-            </FwbTableCell>
-            <FwbTableCell v-if="editor" class="text-right whitespace-nowrap">
-              <fwb-button class="mr-2" size="sm" color="default" @click="openEditor(row.options.ref, row.options.editable)" outline>Edit</fwb-button>
-              <fwb-button size="sm" color="red" @click="showModal(row.options.ref.val, row.options.title)" outline>Remove</fwb-button>
-            </FwbTableCell>
-            <FwbTableCell v-else />
-          </FwbTableRow>
-        </FwbTableBody>
-      </FwbTable>
+            </TableCell>
+            <TableCell v-if="editor" class="text-right whitespace-nowrap">
+              <Button class="mr-2" size="sm" variant="outline" @click="openEditor(row.options.ref, row.options.editable)">Edit</Button>
+              <Button size="sm" variant="destructive" @click="showModal(row.options.ref.val, row.options.title)">Remove</Button>
+            </TableCell>
+            <TableCell v-else />
+          </TableRow>
+        </TableBody>
+      </Table>
       <div v-if="!body || body.length === 0" class="p-6 text-center text-sm text-gray-500">No records found.</div>
     </div>
   </div>

resources/js/Components/Breadcrumbs.vue

@@ -13,8 +13,8 @@ defineProps({
                 <svg v-if="index !== 0" class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
                 </svg>
-                <a v-if="page.current === undefined" :href="page.url" class="ms-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ms-2 dark:text-gray-400 dark:hover:text-white">{{ page.title }}</a>
-                <span v-else class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400">{{ page.title }}</span>
+                <a v-if="page.current === undefined" :href="page.url" class="ms-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ms-2">{{ page.title }}</a>
+                <span v-else class="ms-1 text-sm font-medium text-gray-500 md:ms-2">{{ page.title }}</span>
             </li>
         </ol>
     </nav>

resources/js/Components/ConfirmDialog.vue

@@ -1,6 +1,5 @@
 <script setup>
-import DialogModal from './DialogModal.vue';
-import PrimaryButton from './PrimaryButton.vue';
+import DeleteDialog from './Dialogs/DeleteDialog.vue';
 
 const props = defineProps({
   show: { type: Boolean, default: false },
@@ -9,6 +8,8 @@ const props = defineProps({
   confirmText: { type: String, default: 'Potrdi' },
   cancelText: { type: String, default: 'Prekliči' },
   danger: { type: Boolean, default: false },
+  itemName: { type: String, default: null },
+  processing: { type: Boolean, default: false },
 });
 
 const emit = defineEmits(['close', 'confirm']);
@@ -18,21 +19,15 @@ const onConfirm = () => emit('confirm');
 </script>
 
 <template>
-  <DialogModal :show="show" @close="onClose">
-    <template #title>
-      {{ title }}
-    </template>
-    <template #content>
-      <p class="text-sm text-gray-700">{{ message }}</p>
-      <div class="mt-6 flex items-center justify-end gap-3">
-        <button type="button" class="px-4 py-2 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50" @click="onClose">
-          {{ cancelText }}
-        </button>
-        <PrimaryButton :class="danger ? 'bg-red-600 hover:bg-red-700 focus:ring-red-500' : ''" @click="onConfirm">
-          {{ confirmText }}
-        </PrimaryButton>
-      </div>
-    </template>
-  </DialogModal>
-  
+  <DeleteDialog
+    :show="show"
+    :title="title"
+    :message="message"
+    :item-name="itemName"
+    :confirm-text="confirmText"
+    :cancel-text="cancelText"
+    :processing="processing"
+    @close="onClose"
+    @confirm="onConfirm"
+  />
 </template>

resources/js/Components/CurrencyInput.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { watch, onMounted } from "vue";
 import { useCurrencyInput } from "vue-currency-input";
+import { Input } from "@/Components/ui/input";
+import { cn } from "@/lib/utils";
 
 const props = defineProps({
   modelValue: { type: [Number, String, null], default: null },
@@ -14,6 +16,7 @@ const props = defineProps({
   precision: { type: [Number, Object], default: 2 },
   allowNegative: { type: Boolean, default: false },
   useGrouping: { type: Boolean, default: true },
+  class: { type: String, default: "" },
 });
 
 const emit = defineEmits(["update:modelValue", "change"]);
@@ -81,7 +84,7 @@ onMounted(() => {
     :placeholder="placeholder"
     :disabled="disabled"
     :required="required"
-    class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-800 dark:border-gray-600"
+    :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)"
     autocomplete="off"
     @change="$emit('change', numberValue)"
   />

resources/js/Components/CusTabs.vue

@@ -16,15 +16,15 @@ provide('selected', selected);
 
 </script>
 <template>
-    <div class="text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700">
+    <div class="text-sm font-medium text-center text-gray-500 border-b border-gray-200">
         <ul class="flex flex-wrap -mb-px">
             <li class="me-2" v-for="tab in tabs" :key="tab.name">
                 <button 
                     @click="selected = tab.name"
                     class="inline-block p-4"
                     :class="{ 
-                        ['border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300']: tab.name !== selected,
-                        [`text-${ selectedColor } border-b-2 border-${ selectedColor } rounded-t-lg active dark:text-blue-500 dark:border-${ selectedColor }`]: tab.name === selected 
+                        'border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300': tab.name !== selected,
+                        [`text-${selectedColor} border-b-2 border-${selectedColor} rounded-t-lg active`]: tab.name === selected 
                     }"
                 >
                     {{ tab.title }}

resources/js/Components/DataTable/ActionMenuItem.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { DropdownMenuItem } from '@/Components/ui/dropdown-menu';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { cn } from '@/lib/utils';
+
+const props = defineProps({
+  icon: {
+    type: [String, Object, Array],
+    default: null,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  danger: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['click']);
+
+function handleClick(event) {
+  if (!props.disabled) {
+    emit('click', event);
+  }
+}
+</script>
+
+<template>
+  <DropdownMenuItem
+    :disabled="disabled"
+    :class="
+      cn(
+        'flex items-center gap-2 cursor-pointer',
+        danger && 'text-red-700 focus:text-red-700 focus:bg-red-50',
+      )
+    "
+    @select="handleClick"
+  >
+    <FontAwesomeIcon
+      v-if="icon"
+      :icon="icon"
+      class="w-4 h-4 flex-shrink-0"
+    />
+    <span>{{ label }}</span>
+  </DropdownMenuItem>
+</template>
+
+

resources/js/Components/DataTable/ColumnFilter.vue

@@ -0,0 +1,134 @@
+<script setup>
+import { ref, watch } from 'vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faFilter, faTimes } from '@fortawesome/free-solid-svg-icons';
+import DatePicker from '@/Components/DatePicker.vue';
+
+const props = defineProps({
+  column: {
+    type: Object,
+    required: true,
+  },
+  value: {
+    type: [String, Number, Array, null],
+    default: null,
+  },
+  type: {
+    type: String,
+    default: 'text', // text, select, date, date-range, number
+    validator: (v) => ['text', 'select', 'date', 'date-range', 'number'].includes(v),
+  },
+  options: {
+    type: Array,
+    default: () => [], // For select type: [{ value, label }]
+  },
+});
+
+const emit = defineEmits(['update:value', 'clear']);
+
+const internalValue = ref(props.value);
+
+watch(
+  () => props.value,
+  (newVal) => {
+    internalValue.value = newVal;
+  }
+);
+
+watch(internalValue, (newVal) => {
+  emit('update:value', newVal);
+});
+
+function clear() {
+  internalValue.value = props.type === 'select' || props.type === 'date-range' ? null : '';
+  emit('clear');
+}
+</script>
+
+<template>
+  <div class="relative">
+    <!-- Filter Button -->
+    <button
+      type="button"
+      :class="[
+        'inline-flex items-center justify-center rounded-md px-2 py-1 text-xs font-medium transition-colors',
+        value && value !== '' && (Array.isArray(value) ? value.length > 0 : true)
+          ? 'bg-primary-100 text-primary-700 hover:bg-primary-200'
+          : 'bg-gray-100 text-gray-600 hover:bg-gray-200',
+      ]"
+      @click.stop
+    >
+      <FontAwesomeIcon :icon="faFilter" class="h-3 w-3 mr-1" />
+      {{ column.label }}
+      <button
+        v-if="value && value !== '' && (Array.isArray(value) ? value.length > 0 : true)"
+        @click.stop="clear"
+        class="ml-1.5 text-gray-500 hover:text-gray-700"
+      >
+        <FontAwesomeIcon :icon="faTimes" class="h-3 w-3" />
+      </button>
+    </button>
+
+    <!-- Filter Dropdown -->
+    <div
+      v-if="showDropdown"
+      class="absolute z-50 mt-1 w-64 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5"
+      @click.stop
+    >
+      <div class="p-3">
+        <!-- Text Filter -->
+        <input
+          v-if="type === 'text'"
+          v-model="internalValue"
+          type="text"
+          :placeholder="`Filtriraj ${column.label.toLowerCase()}...`"
+          class="block w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500"
+        />
+
+        <!-- Select Filter -->
+        <select
+          v-else-if="type === 'select'"
+          v-model="internalValue"
+          class="block w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500"
+        >
+          <option :value="null">Vse</option>
+          <option v-for="opt in options" :key="opt.value" :value="opt.value">
+            {{ opt.label }}
+          </option>
+        </select>
+
+        <!-- Number Filter -->
+        <div v-else-if="type === 'number'" class="space-y-2">
+          <input
+            v-model.number="internalValue"
+            type="number"
+            :placeholder="`Filtriraj ${column.label.toLowerCase()}...`"
+            class="block w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500"
+          />
+        </div>
+
+        <!-- Date Filter -->
+        <DatePicker
+          v-else-if="type === 'date'"
+          v-model="internalValue"
+          format="dd.MM.yyyy"
+          placeholder="Izberi datum"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+const showDropdown = ref(false);
+
+// Close dropdown when clicking outside
+if (typeof window !== 'undefined') {
+  document.addEventListener('click', () => {
+    showDropdown.value = false;
+  });
+}
+</script>
+

resources/js/Components/DataTable/DataTable.vue

@@ -0,0 +1,705 @@
+<script setup>
+import { ref, computed, watch, h, useSlots } from "vue";
+import { router } from "@inertiajs/vue3";
+import {
+  useVueTable,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+} from "@tanstack/vue-table";
+import DataTableColumnHeader from "./DataTableColumnHeader.vue";
+import DataTablePagination from "./DataTablePagination.vue";
+import DataTableViewOptions from "./DataTableViewOptions.vue";
+import SkeletonTable from "../Skeleton/SkeletonTable.vue";
+import EmptyState from "../EmptyState.vue";
+import Pagination from "../Pagination.vue";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/Components/ui/table";
+import Checkbox from "@/Components/ui/checkbox/Checkbox.vue";
+import { cn } from "@/lib/utils";
+
+const slots = useSlots();
+
+const props = defineProps({
+  // Data
+  rows: { type: Array, default: () => [] },
+  columns: {
+    type: Array,
+    required: true,
+    validator: (cols) =>
+      cols.every(
+        (col) =>
+          col.key &&
+          col.label &&
+          typeof col.key === "string" &&
+          typeof col.label === "string"
+      ),
+  },
+
+  // Pagination (for server-side)
+  meta: {
+    type: Object,
+    default: null,
+    validator: (meta) =>
+      !meta ||
+      (typeof meta.current_page === "number" &&
+        typeof meta.per_page === "number" &&
+        typeof meta.total === "number" &&
+        typeof meta.last_page === "number"),
+  },
+
+  // Sorting
+  sort: {
+    type: Object,
+    default: () => ({ key: null, direction: null }),
+  },
+
+  // Search
+  search: { type: String, default: "" },
+
+  // Loading state
+  loading: { type: Boolean, default: false },
+
+  // Client-side pagination (when meta is null)
+  pageSize: { type: Number, default: 10 },
+  pageSizeOptions: { type: Array, default: () => [10, 25, 50, 100] },
+
+  // Routing (for server-side)
+  routeName: { type: String, default: null },
+  routeParams: { type: Object, default: () => ({}) },
+  pageParamName: { type: String, default: "page" },
+  onlyProps: { type: Array, default: () => [] },
+
+  // Features
+  showPagination: { type: Boolean, default: true },
+  showViewOptions: { type: Boolean, default: false },
+  rowKey: { type: [String, Function], default: "uuid" },
+  selectable: { type: Boolean, default: false },
+  striped: { type: Boolean, default: false },
+  hoverable: { type: Boolean, default: true },
+
+  // Empty state
+  emptyText: { type: String, default: "Ni podatkov" },
+  emptyIcon: { type: [String, Object, Array], default: null },
+  emptyDescription: { type: String, default: null },
+
+  // Actions
+  showActions: { type: Boolean, default: false },
+  actionsPosition: {
+    type: String,
+    default: "right",
+    validator: (v) => ["left", "right"].includes(v),
+  },
+
+  // Mobile
+  mobileCardView: { type: Boolean, default: true },
+  mobileBreakpoint: { type: Number, default: 768 },
+
+  // State preservation
+  preserveState: { type: Boolean, default: true },
+  preserveScroll: { type: Boolean, default: true },
+});
+
+const emit = defineEmits([
+  "update:search",
+  "update:sort",
+  "update:page",
+  "update:pageSize",
+  "row:click",
+  "row:select",
+  "selection:change",
+]);
+
+// Determine if this is server-side (has meta and routeName)
+const isServerSide = computed(() => !!(props.meta && props.routeName));
+const isClientSide = computed(() => !isServerSide.value);
+
+// Row key helper
+function keyOf(row) {
+  if (typeof props.rowKey === "function") return props.rowKey(row);
+  if (typeof props.rowKey === "string" && row && row[props.rowKey] != null)
+    return row[props.rowKey];
+  return row?.uuid ?? row?.id ?? Math.random().toString(36).slice(2);
+}
+
+// Convert simple column format to TanStack Table ColumnDef format
+const columnDefinitions = computed(() => {
+  return props.columns.map((col) => ({
+    accessorKey: col.key,
+    id: col.key,
+    header: ({ column }) => {
+      return h(DataTableColumnHeader, {
+        column,
+        title: col.label,
+        class: col.class,
+      });
+    },
+    cell: ({ row, getValue }) => {
+      return getValue();
+    },
+    enableSorting: col.sortable !== false,
+    enableHiding: col.hideable !== false,
+    meta: {
+      align: col.align || "left",
+      class: col.class,
+    },
+  }));
+});
+
+// Add selection column if selectable
+const columnsWithSelection = computed(() => {
+  if (!props.selectable) return columnDefinitions.value;
+
+  return [
+    {
+      id: "select",
+      enableHiding: false,
+      enableSorting: false,
+      header: ({ table }) => {
+        return h(Checkbox, {
+          modelValue: table.getIsAllPageRowsSelected(),
+          indeterminate: table.getIsSomePageRowsSelected(),
+          "onUpdate:modelValue": (value) => table.toggleAllPageRowsSelected(!!value),
+          "aria-label": "Select all",
+        });
+      },
+      cell: ({ row }) => {
+        return h(Checkbox, {
+          modelValue: row.getIsSelected(),
+          "onUpdate:modelValue": (value) => row.toggleSelected(!!value),
+          "aria-label": "Select row",
+        });
+      },
+    },
+    ...columnDefinitions.value,
+  ];
+});
+
+// Add actions column if showActions
+const finalColumns = computed(() => {
+  if (!props.showActions && !slots.actions) return columnsWithSelection.value;
+
+  return [
+    ...columnsWithSelection.value,
+    {
+      id: "actions",
+      enableHiding: false,
+      enableSorting: false,
+      header: () => h("span", { class: "sr-only" }, "Actions"),
+      cell: ({ row }) => {
+        // Actions will be rendered via slot
+        return null;
+      },
+    },
+  ];
+});
+
+// Internal search state
+const internalSearch = ref(props.search);
+watch(
+  () => props.search,
+  (newVal) => {
+    internalSearch.value = newVal;
+  }
+);
+
+// Internal sorting state
+const sorting = computed(() => {
+  if (!props.sort?.key || !props.sort?.direction) return [];
+  return [
+    {
+      id: props.sort.key,
+      desc: props.sort.direction === "desc",
+    },
+  ];
+});
+
+// Internal pagination state
+const pagination = computed(() => {
+  if (isServerSide.value) {
+    return {
+      pageIndex: (props.meta?.current_page ?? 1) - 1,
+      pageSize: props.meta?.per_page ?? props.pageSize,
+    };
+  }
+  return {
+    pageIndex: internalPage.value - 1,
+    pageSize: internalPageSize.value,
+  };
+});
+
+const internalPage = ref(1);
+const internalPageSize = ref(props.pageSize);
+
+// Row selection
+const rowSelection = ref({});
+
+// Create TanStack Table instance
+const table = useVueTable({
+  get data() {
+    return props.rows;
+  },
+  get columns() {
+    return finalColumns.value;
+  },
+  getCoreRowModel: getCoreRowModel(),
+  getPaginationRowModel: isClientSide.value ? getPaginationRowModel() : undefined,
+  getSortedRowModel: isClientSide.value ? getSortedRowModel() : undefined,
+  getFilteredRowModel: isClientSide.value ? getFilteredRowModel() : undefined,
+  globalFilterFn: "includesString",
+  onGlobalFilterChange: (updater) => {
+    const newFilter =
+      typeof updater === "function" ? updater(internalSearch.value) : updater;
+    handleSearchChange(newFilter);
+  },
+  onSortingChange: (updater) => {
+    const newSorting = typeof updater === "function" ? updater(sorting.value) : updater;
+    if (newSorting.length > 0) {
+      const sort = newSorting[0];
+      emit("update:sort", {
+        key: sort.id,
+        direction: sort.desc ? "desc" : "asc",
+      });
+      if (isServerSide.value) {
+        doServerRequest({
+          sort: sort.id,
+          direction: sort.desc ? "desc" : "asc",
+          page: 1,
+        });
+      }
+    } else {
+      emit("update:sort", { key: null, direction: null });
+      if (isServerSide.value) {
+        doServerRequest({ sort: null, direction: null, page: 1 });
+      }
+    }
+  },
+  onPaginationChange: (updater) => {
+    const newPagination =
+      typeof updater === "function" ? updater(pagination.value) : updater;
+    if (isServerSide.value) {
+      doServerRequest({ page: newPagination.pageIndex + 1 });
+    } else {
+      internalPage.value = newPagination.pageIndex + 1;
+      emit("update:page", newPagination.pageIndex + 1);
+    }
+    internalPageSize.value = newPagination.pageSize;
+    emit("update:pageSize", newPagination.pageSize);
+  },
+  onRowSelectionChange: (updater) => {
+    const newSelection =
+      typeof updater === "function" ? updater(rowSelection.value) : updater;
+    rowSelection.value = newSelection;
+    const selectedKeys = Object.keys(newSelection).filter((key) => newSelection[key]);
+    emit("selection:change", selectedKeys);
+  },
+  manualSorting: isServerSide.value,
+  manualPagination: isServerSide.value,
+  manualFiltering: isServerSide.value,
+  enableRowSelection: props.selectable,
+  state: {
+    get sorting() {
+      return sorting.value;
+    },
+    get pagination() {
+      return pagination.value;
+    },
+    get rowSelection() {
+      return rowSelection.value;
+    },
+    get globalFilter() {
+      return internalSearch.value;
+    },
+  },
+});
+
+// Server-side request
+function doServerRequest(overrides = {}) {
+  const existingParams = Object.fromEntries(
+    new URLSearchParams(window.location.search).entries()
+  );
+
+  const q = {
+    ...existingParams,
+    per_page: overrides.perPage ?? props.meta?.per_page ?? internalPageSize.value,
+    sort: overrides.sort ?? props.sort?.key ?? existingParams.sort ?? null,
+    direction:
+      overrides.direction ?? props.sort?.direction ?? existingParams.direction ?? null,
+    search: overrides.search ?? internalSearch.value ?? existingParams.search ?? "",
+  };
+
+  const pageParam = props.pageParamName || "page";
+  q[pageParam] = overrides.page ?? props.meta?.current_page ?? 1;
+  if (pageParam !== "page") {
+    delete q.page;
+  }
+
+  Object.keys(q).forEach((k) => {
+    if (q[k] === null || q[k] === undefined || q[k] === "") delete q[k];
+  });
+
+  const url = route(props.routeName, props.routeParams || {});
+  router.get(url, q, {
+    preserveScroll: props.preserveScroll,
+    preserveState: props.preserveState,
+    replace: true,
+    only: props.onlyProps.length ? props.onlyProps : undefined,
+  });
+}
+
+function handleSearchChange(value) {
+  internalSearch.value = value;
+  emit("update:search", value);
+
+  if (isServerSide.value) {
+    clearTimeout(searchTimer.value);
+    searchTimer.value = setTimeout(() => {
+      doServerRequest({ search: value, page: 1 });
+    }, 300);
+  }
+}
+
+function handlePageSizeChange(size) {
+  const newSize = Number(size);
+  internalPageSize.value = newSize;
+  emit("update:pageSize", newSize);
+
+  if (isServerSide.value) {
+    doServerRequest({ perPage: newSize, page: 1 });
+  } else {
+    table.setPageSize(newSize);
+  }
+}
+
+const searchTimer = ref(null);
+
+// Mobile detection
+const isMobile = ref(false);
+if (typeof window !== "undefined") {
+  const checkMobile = () => {
+    isMobile.value = window.innerWidth < props.mobileBreakpoint;
+  };
+  checkMobile();
+  window.addEventListener("resize", checkMobile);
+}
+
+// Display rows
+const displayRows = computed(() => {
+  if (isServerSide.value) return props.rows;
+  return table.getRowModel().rows.map((row) => row.original);
+});
+
+const total = computed(() => {
+  if (isServerSide.value) return props.meta?.total ?? 0;
+  return table.getFilteredRowModel().rows.length;
+});
+
+const from = computed(() => {
+  if (isServerSide.value) return props.meta?.from ?? 0;
+  const pageIndex = table.getState().pagination.pageIndex;
+  const pageSize = table.getState().pagination.pageSize;
+  return total.value === 0 ? 0 : pageIndex * pageSize + 1;
+});
+
+const to = computed(() => {
+  if (isServerSide.value) return props.meta?.to ?? 0;
+  const pageIndex = table.getState().pagination.pageIndex;
+  const pageSize = table.getState().pagination.pageSize;
+  return Math.min((pageIndex + 1) * pageSize, total.value);
+});
+
+// Export functionality
+function handleExport(format) {
+  const data = displayRows.value.map((row) => {
+    const exported = {};
+    props.columns.forEach((col) => {
+      exported[col.label] = row?.[col.key] ?? "";
+    });
+    return exported;
+  });
+
+  if (format === "csv") {
+    exportToCSV(data);
+  } else if (format === "xlsx") {
+    exportToXLSX(data);
+  }
+}
+
+function exportToCSV(data) {
+  if (data.length === 0) return;
+
+  const headers = Object.keys(data[0]);
+  const csvContent = [
+    headers.join(","),
+    ...data.map((row) =>
+      headers
+        .map((header) => {
+          const value = row[header];
+          if (value == null) return "";
+          const stringValue = String(value).replace(/"/g, '""');
+          return `"${stringValue}"`;
+        })
+        .join(",")
+    ),
+  ].join("\n");
+
+  const blob = new Blob(["\uFEFF" + csvContent], { type: "text/csv;charset=utf-8;" });
+  const link = document.createElement("a");
+  const url = URL.createObjectURL(blob);
+  link.setAttribute("href", url);
+  link.setAttribute("download", `export_${new Date().toISOString().split("T")[0]}.csv`);
+  link.style.visibility = "hidden";
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+function exportToXLSX(data) {
+  exportToCSV(data);
+}
+
+// Expose table instance and utilities for toolbar usage
+defineExpose({
+  table,
+  internalSearch,
+  internalPageSize,
+  rowSelection,
+  handleSearchChange,
+  handlePageSizeChange,
+  handleExport,
+  exportToCSV,
+  exportToXLSX,
+});
+</script>
+
+<template>
+  <div class="w-full space-y-4">
+    <!-- Toolbar Slot - Users can build their own toolbar using the table instance -->
+    <slot
+      name="toolbar"
+      :table="table"
+      :search="internalSearch"
+      :page-size="internalPageSize"
+      :row-selection="rowSelection"
+    />
+
+    <!-- View Options -->
+    <div v-if="showViewOptions" class="flex items-center space-x-2">
+      <DataTableViewOptions :table="table" />
+    </div>
+
+    <!-- Table Container -->
+    <div data-table-container class="relative overflow-hidden">
+      <!-- Desktop Table View -->
+      <div v-if="!isMobile || !mobileCardView" class="overflow-x-auto">
+        <Table>
+          <TableHeader class="p-4">
+            <TableRow
+              v-for="headerGroup in table.getHeaderGroups()"
+              :key="headerGroup.id"
+            >
+              <TableHead
+                v-for="header in headerGroup.headers"
+                :key="header.id"
+                :class="[
+                  header.column.columnDef.meta?.class,
+                  header.column.columnDef.meta?.align === 'right'
+                    ? 'text-right'
+                    : header.column.columnDef.meta?.align === 'center'
+                    ? 'text-center'
+                    : 'text-left',
+                ]"
+              >
+                <div v-if="!header.isPlaceholder">
+                  <component :is="header.column.columnDef.header(header.getContext())" />
+                </div>
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <!-- Loading State -->
+            <template v-if="loading">
+              <TableRow>
+                <TableCell
+                  :colspan="
+                    columns.length +
+                    (selectable ? 1 : 0) +
+                    (showActions || slots.actions ? 1 : 0)
+                  "
+                  class="h-24 text-center"
+                >
+                  <SkeletonTable :rows="5" :cols="columns.length" />
+                </TableCell>
+              </TableRow>
+            </template>
+
+            <!-- Empty State -->
+            <template v-else-if="!loading && table.getRowModel().rows.length === 0">
+              <TableRow>
+                <TableCell
+                  :colspan="
+                    columns.length +
+                    (selectable ? 1 : 0) +
+                    (showActions || slots.actions ? 1 : 0)
+                  "
+                  class="h-24 text-center"
+                >
+                  <EmptyState
+                    :icon="emptyIcon"
+                    :title="emptyText"
+                    :description="emptyDescription"
+                    size="sm"
+                  />
+                </TableCell>
+              </TableRow>
+            </template>
+
+            <!-- Rows -->
+            <template v-else>
+              <TableRow
+                v-for="row in table.getRowModel().rows"
+                :key="row.id"
+                :data-state="row.getIsSelected() && 'selected'"
+                :class="
+                  cn(
+                    hoverable && 'cursor-pointer',
+                    striped && row.index % 2 === 1 && 'bg-muted/50'
+                  )
+                "
+                @click="
+                  (e) => {
+                    const interactive = e.target.closest(
+                      'button, a, [role=button], [data-dropdown], .relative, input[type=checkbox]'
+                    );
+                    if (interactive) return;
+                    $emit('row:click', row.original, row.index);
+                  }
+                "
+              >
+                <TableCell
+                  v-for="cell in row.getVisibleCells()"
+                  :key="cell.id"
+                  :class="[
+                    cell.column.columnDef.meta?.class,
+                    cell.column.columnDef.meta?.align === 'right'
+                      ? 'text-right'
+                      : cell.column.columnDef.meta?.align === 'center'
+                      ? 'text-center'
+                      : 'text-left',
+                  ]"
+                >
+                  <template v-if="cell.column.id === 'actions'">
+                    <slot name="actions" :row="row.original" :index="row.index">
+                      <slot name="row-actions" :row="row.original" :index="row.index" />
+                    </slot>
+                  </template>
+                  <template v-else>
+                    <slot
+                      :name="`cell-${cell.column.id}`"
+                      :row="row.original"
+                      :column="cell.column.columnDef"
+                      :value="cell.getValue()"
+                      :index="row.index"
+                    >
+                      <slot
+                        name="cell"
+                        :row="row.original"
+                        :column="cell.column.columnDef"
+                        :value="cell.getValue()"
+                        :index="row.index"
+                      >
+                        <component :is="cell.column.columnDef.cell(cell.getContext())" />
+                      </slot>
+                    </slot>
+                  </template>
+                </TableCell>
+              </TableRow>
+            </template>
+          </TableBody>
+        </Table>
+      </div>
+
+      <!-- Mobile Card View -->
+      <div v-else-if="isMobile && mobileCardView" class="divide-y divide-gray-200">
+        <template v-if="loading">
+          <div class="p-4">
+            <SkeletonTable :rows="3" :cols="1" />
+          </div>
+        </template>
+
+        <template v-else-if="!loading && table.getRowModel().rows.length === 0">
+          <div class="p-6">
+            <EmptyState
+              :icon="emptyIcon"
+              :title="emptyText"
+              :description="emptyDescription"
+              size="sm"
+            />
+          </div>
+        </template>
+
+        <template v-else>
+          <div
+            v-for="row in table.getRowModel().rows"
+            :key="row.id"
+            @click="$emit('row:click', row.original, row.index)"
+            class="p-4 space-y-2 hover:bg-gray-50 transition-colors"
+            :class="{ 'cursor-pointer': !!$attrs.onRowClick }"
+          >
+            <slot name="mobile-card" :row="row.original" :index="row.index">
+              <!-- Default mobile card layout -->
+              <div
+                v-for="col in columns.slice(0, 3)"
+                :key="col.key"
+                class="flex justify-between items-start"
+              >
+                <span class="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                  {{ col.label }}
+                </span>
+                <span class="text-sm text-gray-900 text-right">
+                  <slot
+                    :name="`cell-${col.key}`"
+                    :row="row.original"
+                    :column="col"
+                    :value="row.original?.[col.key]"
+                    :index="row.index"
+                  >
+                    {{ row.original?.[col.key] ?? "—" }}
+                  </slot>
+                </span>
+              </div>
+              <div
+                v-if="showActions || $slots.actions"
+                class="pt-2 border-t border-gray-100"
+              >
+                <slot name="actions" :row="row.original" :index="row.index">
+                  <slot name="row-actions" :row="row.original" :index="row.index" />
+                </slot>
+              </div>
+            </slot>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <!-- Pagination -->
+    <div v-if="showPagination">
+      <!-- Use existing Pagination component for server-side -->
+      <template v-if="isServerSide && meta?.links">
+        <Pagination :links="meta.links" :from="from" :to="to" :total="total" />
+      </template>
+
+      <!-- TanStack Table Pagination for client-side -->
+      <template v-else>
+        <DataTablePagination :table="table" />
+      </template>
+    </div>
+  </div>
+</template>

resources/js/Components/DataTable/DataTableClient.vue

@@ -1,13 +1,15 @@
 <script setup>
 import { computed, ref, watch } from "vue";
+import SkeletonTable from "@/Components/Skeleton/SkeletonTable.vue";
+import EmptyState from "@/Components/EmptyState.vue";
 import {
-  FwbTable,
-  FwbTableHead,
-  FwbTableHeadCell,
-  FwbTableBody,
-  FwbTableRow,
-  FwbTableCell,
-} from "flowbite-vue";
+  Table,
+  TableHeader,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableCell,
+} from "@/Components/ui/table";
 
 const props = defineProps({
   columns: { type: Array, required: true }, // [{ key, label, sortable?, align?, class?, formatter? }]
@@ -197,11 +199,12 @@ function setPageSize(ps) {
     <div
       class="relative overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm"
     >
-      <FwbTable hoverable striped class="text-sm">
-        <FwbTableHead
+      <Table class="text-sm">
+        <TableHeader
           class="sticky top-0 z-10 bg-gray-50/90 backdrop-blur border-b border-gray-200 shadow-sm"
         >
-          <FwbTableHeadCell v-for="col in columns" :key="col.key" :class="col.class">
+          <TableRow class="border-b">
+            <TableHead v-for="col in columns" :key="col.key" :class="col.class">
               <button
                 v-if="col.sortable"
                 type="button"
@@ -216,23 +219,23 @@ function setPageSize(ps) {
                 >
               </button>
               <span v-else>{{ col.label }}</span>
-          </FwbTableHeadCell>
-          <FwbTableHeadCell v-if="$slots.actions" class="w-px">&nbsp;</FwbTableHeadCell>
-        </FwbTableHead>
+            </TableHead>
+            <TableHead v-if="$slots.actions" class="w-px">&nbsp;</TableHead>
+          </TableRow>
+        </TableHeader>
 
-        <FwbTableBody>
+        <TableBody>
           <template v-if="!loading && pageRows.length">
-            <FwbTableRow
+            <TableRow
               v-for="(row, idx) in pageRows"
               :key="keyOf(row)"
               @click="$emit('row:click', row)"
-              class="cursor-default"
+              class="cursor-default hover:bg-gray-50/50"
             >
-              <FwbTableCell
+              <TableCell
                 v-for="col in columns"
                 :key="col.key"
                 :class="col.class"
-                :align="col.align || 'left'"
               >
                 <template v-if="$slots['cell-' + col.key]">
                   <slot
@@ -255,33 +258,37 @@ function setPageSize(ps) {
                 <template v-else>
                   {{ col.formatter ? col.formatter(row) : row?.[col.key] ?? "" }}
                 </template>
-              </FwbTableCell>
-              <FwbTableCell v-if="$slots.actions" class="w-px text-right">
+              </TableCell>
+              <TableCell v-if="$slots.actions" class="w-px text-right">
                 <slot name="actions" :row="row" :index="idx" />
-              </FwbTableCell>
-            </FwbTableRow>
+              </TableCell>
+            </TableRow>
           </template>
           <template v-else-if="loading">
-            <FwbTableRow>
-              <FwbTableCell :colspan="columns.length + ($slots.actions ? 1 : 0)">
-                <div class="p-6 text-center text-gray-500">Nalagam...</div>
-              </FwbTableCell>
-            </FwbTableRow>
+            <TableRow>
+              <TableCell :colspan="columns.length + ($slots.actions ? 1 : 0)">
+                <SkeletonTable :rows="5" :cols="columns.length" />
+              </TableCell>
+            </TableRow>
           </template>
           <template v-else>
-            <FwbTableRow>
-              <FwbTableCell :colspan="columns.length + ($slots.actions ? 1 : 0)">
+            <TableRow>
+              <TableCell :colspan="columns.length + ($slots.actions ? 1 : 0)">
                 <slot name="empty">
-                  <div class="p-6 text-center text-gray-500">{{ emptyText }}</div>
+                  <EmptyState
+                    :title="emptyText"
+                    size="sm"
+                  />
                 </slot>
-              </FwbTableCell>
-            </FwbTableRow>
+              </TableCell>
+            </TableRow>
           </template>
-        </FwbTableBody>
-      </FwbTable>
+        </TableBody>
+      </Table>
     </div>
 
     <nav
+      v-if="showPagination"
       class="mt-3 flex flex-wrap items-center justify-between gap-3 text-sm text-gray-700"
       aria-label="Pagination"
     >

resources/js/Components/DataTable/DataTableColumnHeader.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { h } from 'vue';
+import { ArrowUpDown, ArrowUp, ArrowDown, EyeOff } from 'lucide-vue-next';
+import { Button } from '@/Components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/Components/ui/dropdown-menu';
+import { cn } from '@/lib/utils';
+
+const props = defineProps({
+  column: {
+    type: Object,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  class: {
+    type: [String, Object, Array],
+    default: null,
+  },
+});
+
+const getSortIcon = (column) => {
+  if (!column.getIsSorted()) return ArrowUpDown;
+  return column.getIsSorted() === 'asc' ? ArrowUp : ArrowDown;
+};
+</script>
+
+<template>
+  <div v-if="column.getCanSort()" :class="cn('flex items-center space-x-2', props.class)">
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <Button
+          variant="ghost"
+          size="sm"
+          class="-ml-3 h-8 data-[state=open]:bg-accent"
+        >
+          <span>{{ title }}</span>
+          <component
+            :is="getSortIcon(column)"
+            class="ml-2 h-4 w-4"
+          />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem @click="column.toggleSorting(false)">
+          <ArrowUp class="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+          Asc
+        </DropdownMenuItem>
+        <DropdownMenuItem @click="column.toggleSorting(true)">
+          <ArrowDown class="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+          Desc
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem @click="column.toggleVisibility(false)">
+          <EyeOff class="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+          Hide
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+  <div v-else :class="cn('', props.class)">
+    {{ title }}
+  </div>
+</template>
+

resources/js/Components/DataTable/DataTableNew.vue

@@ -0,0 +1,703 @@
+<script setup>
+import { ref, computed, watch, h } from 'vue';
+import { router } from '@inertiajs/vue3';
+import {
+  useVueTable,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  flexRender,
+} from '@tanstack/vue-table';
+import DataTableToolbar from './DataTableToolbar.vue';
+import DataTableColumnHeader from './DataTableColumnHeader.vue';
+import DataTablePagination from './DataTablePagination.vue';
+import DataTableViewOptions from './DataTableViewOptions.vue';
+import SkeletonTable from '../Skeleton/SkeletonTable.vue';
+import EmptyState from '../EmptyState.vue';
+import Pagination from '../Pagination.vue';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/Components/ui/table';
+import Checkbox from '@/Components/ui/checkbox/Checkbox.vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps({
+  // Data
+  rows: { type: Array, default: () => [] },
+  columns: {
+    type: Array,
+    required: true,
+    validator: (cols) =>
+      cols.every(
+        (col) => col.key && col.label && typeof col.key === 'string' && typeof col.label === 'string'
+      ),
+  },
+  
+  // Pagination (for server-side)
+  meta: {
+    type: Object,
+    default: null,
+    validator: (meta) =>
+      !meta ||
+      (typeof meta.current_page === 'number' &&
+        typeof meta.per_page === 'number' &&
+        typeof meta.total === 'number' &&
+        typeof meta.last_page === 'number'),
+  },
+  
+  // Sorting
+  sort: {
+    type: Object,
+    default: () => ({ key: null, direction: null }),
+  },
+  
+  // Search
+  search: { type: String, default: '' },
+  
+  // Loading state
+  loading: { type: Boolean, default: false },
+  
+  // Client-side pagination (when meta is null)
+  pageSize: { type: Number, default: 10 },
+  pageSizeOptions: { type: Array, default: () => [10, 25, 50, 100] },
+  
+  // Routing (for server-side)
+  routeName: { type: String, default: null },
+  routeParams: { type: Object, default: () => ({}) },
+  pageParamName: { type: String, default: 'page' },
+  onlyProps: { type: Array, default: () => [] },
+  
+  // Features
+  showToolbar: { type: Boolean, default: true },
+  showSearch: { type: Boolean, default: false },
+  showPageSize: { type: Boolean, default: false },
+  showPagination: { type: Boolean, default: true },
+  showFilters: { type: Boolean, default: false },
+  showExport: { type: Boolean, default: false },
+  showAdd: { type: Boolean, default: false },
+  showOptions: { type: Boolean, default: false },
+  showSelectedCount: { type: Boolean, default: false },
+  showOptionsMenu: { type: Boolean, default: false },
+  showViewOptions: { type: Boolean, default: false },
+  compactToolbar: { type: Boolean, default: false },
+  hasActiveFilters: { type: Boolean, default: false },
+  rowKey: { type: [String, Function], default: 'uuid' },
+  selectable: { type: Boolean, default: false },
+  striped: { type: Boolean, default: false },
+  hoverable: { type: Boolean, default: true },
+  
+  // Empty state
+  emptyText: { type: String, default: 'Ni podatkov' },
+  emptyIcon: { type: [String, Object, Array], default: null },
+  emptyDescription: { type: String, default: null },
+  
+  // Actions
+  showActions: { type: Boolean, default: false },
+  actionsPosition: { type: String, default: 'right', validator: (v) => ['left', 'right'].includes(v) },
+  
+  // Mobile
+  mobileCardView: { type: Boolean, default: true },
+  mobileBreakpoint: { type: Number, default: 768 },
+  
+  // State preservation
+  preserveState: { type: Boolean, default: true },
+  preserveScroll: { type: Boolean, default: true },
+});
+
+const emit = defineEmits([
+  'update:search',
+  'update:sort',
+  'update:page',
+  'update:pageSize',
+  'row:click',
+  'row:select',
+  'selection:change',
+]);
+
+// Determine if this is server-side (has meta and routeName)
+const isServerSide = computed(() => !!(props.meta && props.routeName));
+const isClientSide = computed(() => !isServerSide.value);
+
+// Row key helper
+function keyOf(row) {
+  if (typeof props.rowKey === 'function') return props.rowKey(row);
+  if (typeof props.rowKey === 'string' && row && row[props.rowKey] != null)
+    return row[props.rowKey];
+  return row?.uuid ?? row?.id ?? Math.random().toString(36).slice(2);
+}
+
+// Convert simple column format to TanStack Table ColumnDef format
+const columnDefinitions = computed(() => {
+  return props.columns.map((col) => ({
+    accessorKey: col.key,
+    id: col.key,
+    header: ({ column }) => {
+      return h(DataTableColumnHeader, {
+        column,
+        title: col.label,
+        class: col.class,
+      });
+    },
+    cell: ({ row, getValue }) => {
+      return getValue();
+    },
+    enableSorting: col.sortable !== false,
+    enableHiding: col.hideable !== false,
+    meta: {
+      align: col.align || 'left',
+      class: col.class,
+    },
+  }));
+});
+
+// Add selection column if selectable
+const columnsWithSelection = computed(() => {
+  if (!props.selectable) return columnDefinitions.value;
+  
+  return [
+    {
+      id: 'select',
+      enableHiding: false,
+      enableSorting: false,
+      header: ({ table }) => {
+        return h(Checkbox, {
+          modelValue: table.getIsAllPageRowsSelected(),
+          indeterminate: table.getIsSomePageRowsSelected(),
+          'onUpdate:modelValue': (value) => table.toggleAllPageRowsSelected(!!value),
+          'aria-label': 'Select all',
+        });
+      },
+      cell: ({ row }) => {
+        return h(Checkbox, {
+          modelValue: row.getIsSelected(),
+          'onUpdate:modelValue': (value) => row.toggleSelected(!!value),
+          'aria-label': 'Select row',
+        });
+      },
+    },
+    ...columnDefinitions.value,
+  ];
+});
+
+// Add actions column if showActions
+const finalColumns = computed(() => {
+  if (!props.showActions && !props.$slots.actions) return columnsWithSelection.value;
+  
+  return [
+    ...columnsWithSelection.value,
+    {
+      id: 'actions',
+      enableHiding: false,
+      enableSorting: false,
+      header: () => h('span', { class: 'sr-only' }, 'Actions'),
+      cell: ({ row }) => {
+        // Actions will be rendered via slot
+        return null;
+      },
+    },
+  ];
+});
+
+// Internal search state
+const internalSearch = ref(props.search);
+watch(
+  () => props.search,
+  (newVal) => {
+    internalSearch.value = newVal;
+  }
+);
+
+// Internal sorting state
+const sorting = computed(() => {
+  if (!props.sort?.key || !props.sort?.direction) return [];
+  return [
+    {
+      id: props.sort.key,
+      desc: props.sort.direction === 'desc',
+    },
+  ];
+});
+
+// Internal pagination state
+const pagination = computed(() => {
+  if (isServerSide.value) {
+    return {
+      pageIndex: (props.meta?.current_page ?? 1) - 1,
+      pageSize: props.meta?.per_page ?? props.pageSize,
+    };
+  }
+  return {
+    pageIndex: internalPage.value - 1,
+    pageSize: internalPageSize.value,
+  };
+});
+
+const internalPage = ref(1);
+const internalPageSize = ref(props.pageSize);
+
+// Row selection
+const rowSelection = ref({});
+
+// Create TanStack Table instance
+const table = useVueTable({
+  get data() {
+    return props.rows;
+  },
+  get columns() {
+    return finalColumns.value;
+  },
+  getCoreRowModel: getCoreRowModel(),
+  getPaginationRowModel: isClientSide.value ? getPaginationRowModel() : undefined,
+  getSortedRowModel: isClientSide.value ? getSortedRowModel() : undefined,
+  getFilteredRowModel: isClientSide.value ? getFilteredRowModel() : undefined,
+  onSortingChange: (updater) => {
+    const newSorting = typeof updater === 'function' ? updater(sorting.value) : updater;
+    if (newSorting.length > 0) {
+      const sort = newSorting[0];
+      emit('update:sort', {
+        key: sort.id,
+        direction: sort.desc ? 'desc' : 'asc',
+      });
+      if (isServerSide.value) {
+        doServerRequest({
+          sort: sort.id,
+          direction: sort.desc ? 'desc' : 'asc',
+          page: 1,
+        });
+      }
+    } else {
+      emit('update:sort', { key: null, direction: null });
+      if (isServerSide.value) {
+        doServerRequest({ sort: null, direction: null, page: 1 });
+      }
+    }
+  },
+  onPaginationChange: (updater) => {
+    const newPagination = typeof updater === 'function' ? updater(pagination.value) : updater;
+    if (isServerSide.value) {
+      doServerRequest({ page: newPagination.pageIndex + 1 });
+    } else {
+      internalPage.value = newPagination.pageIndex + 1;
+      emit('update:page', newPagination.pageIndex + 1);
+    }
+    internalPageSize.value = newPagination.pageSize;
+    emit('update:pageSize', newPagination.pageSize);
+  },
+  onRowSelectionChange: (updater) => {
+    const newSelection = typeof updater === 'function' ? updater(rowSelection.value) : updater;
+    rowSelection.value = newSelection;
+    const selectedKeys = Object.keys(newSelection).filter((key) => newSelection[key]);
+    emit('selection:change', selectedKeys);
+  },
+  manualSorting: isServerSide.value,
+  manualPagination: isServerSide.value,
+  manualFiltering: isServerSide.value,
+  enableRowSelection: props.selectable,
+  state: {
+    get sorting() {
+      return sorting.value;
+    },
+    get pagination() {
+      return pagination.value;
+    },
+    get rowSelection() {
+      return rowSelection.value;
+    },
+    get globalFilter() {
+      return internalSearch.value;
+    },
+  },
+});
+
+// Server-side request
+function doServerRequest(overrides = {}) {
+  const existingParams = Object.fromEntries(
+    new URLSearchParams(window.location.search).entries()
+  );
+  
+  const q = {
+    ...existingParams,
+    per_page: overrides.perPage ?? props.meta?.per_page ?? internalPageSize.value,
+    sort: overrides.sort ?? props.sort?.key ?? existingParams.sort ?? null,
+    direction: overrides.direction ?? props.sort?.direction ?? existingParams.direction ?? null,
+    search: overrides.search ?? internalSearch.value ?? existingParams.search ?? '',
+  };
+  
+  const pageParam = props.pageParamName || 'page';
+  q[pageParam] = overrides.page ?? props.meta?.current_page ?? 1;
+  if (pageParam !== 'page') {
+    delete q.page;
+  }
+  
+  Object.keys(q).forEach((k) => {
+    if (q[k] === null || q[k] === undefined || q[k] === '') delete q[k];
+  });
+  
+  const url = route(props.routeName, props.routeParams || {});
+  router.get(
+    url,
+    q,
+    {
+      preserveScroll: props.preserveScroll,
+      preserveState: props.preserveState,
+      replace: true,
+      only: props.onlyProps.length ? props.onlyProps : undefined,
+    }
+  );
+}
+
+function handleSearchChange(value) {
+  internalSearch.value = value;
+  emit('update:search', value);
+  
+  if (isServerSide.value) {
+    clearTimeout(searchTimer.value);
+    searchTimer.value = setTimeout(() => {
+      doServerRequest({ search: value, page: 1 });
+    }, 300);
+  }
+}
+
+function handlePageSizeChange(size) {
+  const newSize = Number(size);
+  internalPageSize.value = newSize;
+  emit('update:pageSize', newSize);
+  
+  if (isServerSide.value) {
+    doServerRequest({ perPage: newSize, page: 1 });
+  } else {
+    table.setPageSize(newSize);
+  }
+}
+
+const searchTimer = ref(null);
+
+// Mobile detection
+const isMobile = ref(false);
+if (typeof window !== 'undefined') {
+  const checkMobile = () => {
+    isMobile.value = window.innerWidth < props.mobileBreakpoint;
+  };
+  checkMobile();
+  window.addEventListener('resize', checkMobile);
+}
+
+// Display rows
+const displayRows = computed(() => {
+  if (isServerSide.value) return props.rows;
+  return table.getRowModel().rows.map((row) => row.original);
+});
+
+const total = computed(() => {
+  if (isServerSide.value) return props.meta?.total ?? 0;
+  return table.getFilteredRowModel().rows.length;
+});
+
+const from = computed(() => {
+  if (isServerSide.value) return props.meta?.from ?? 0;
+  const pageIndex = table.getState().pagination.pageIndex;
+  const pageSize = table.getState().pagination.pageSize;
+  return total.value === 0 ? 0 : pageIndex * pageSize + 1;
+});
+
+const to = computed(() => {
+  if (isServerSide.value) return props.meta?.to ?? 0;
+  const pageIndex = table.getState().pagination.pageIndex;
+  const pageSize = table.getState().pagination.pageSize;
+  return Math.min((pageIndex + 1) * pageSize, total.value);
+});
+
+// Export functionality
+function handleExport(format) {
+  const data = displayRows.value.map((row) => {
+    const exported = {};
+    props.columns.forEach((col) => {
+      exported[col.label] = row?.[col.key] ?? '';
+    });
+    return exported;
+  });
+
+  if (format === 'csv') {
+    exportToCSV(data);
+  } else if (format === 'xlsx') {
+    exportToXLSX(data);
+  }
+}
+
+function exportToCSV(data) {
+  if (data.length === 0) return;
+
+  const headers = Object.keys(data[0]);
+  const csvContent = [
+    headers.join(','),
+    ...data.map((row) =>
+      headers
+        .map((header) => {
+          const value = row[header];
+          if (value == null) return '';
+          const stringValue = String(value).replace(/"/g, '""');
+          return `"${stringValue}"`;
+        })
+        .join(',')
+    ),
+  ].join('\n');
+
+  const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
+  const link = document.createElement('a');
+  const url = URL.createObjectURL(blob);
+  link.setAttribute('href', url);
+  link.setAttribute('download', `export_${new Date().toISOString().split('T')[0]}.csv`);
+  link.style.visibility = 'hidden';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+function exportToXLSX(data) {
+  exportToCSV(data);
+}
+</script>
+
+<template>
+  <div class="w-full space-y-4">
+    <!-- Toolbar -->
+    <DataTableToolbar
+      v-if="showToolbar"
+      :search="internalSearch"
+      :show-search="showSearch"
+      :show-page-size="showPageSize"
+      :page-size="internalPageSize"
+      :page-size-options="pageSizeOptions"
+      :selected-count="Object.keys(rowSelection).filter((key) => rowSelection[key]).length"
+      :show-selected-count="showSelectedCount"
+      :show-export="showExport"
+      :show-add="showAdd"
+      :show-options="showOptions"
+      :show-filters="showFilters"
+      :show-options-menu="showOptionsMenu"
+      :has-active-filters="hasActiveFilters"
+      :compact="compactToolbar"
+      @update:search="handleSearchChange"
+      @update:page-size="handlePageSizeChange"
+      @export="handleExport"
+    >
+      <template #add>
+        <slot name="toolbar-add" />
+      </template>
+      <template #options>
+        <slot name="toolbar-options" />
+      </template>
+      <template #filters>
+        <slot name="toolbar-filters" />
+      </template>
+      <template #actions>
+        <slot name="toolbar-actions" />
+      </template>
+    </DataTableToolbar>
+
+    <!-- View Options -->
+    <div v-if="showViewOptions" class="flex items-center space-x-2">
+      <DataTableViewOptions :table="table" />
+    </div>
+
+    <!-- Table Container -->
+    <div data-table-container class="relative overflow-hidden">
+      <!-- Desktop Table View -->
+      <div v-if="!isMobile || !mobileCardView" class="overflow-x-auto">
+        <Table>
+          <TableHeader>
+            <TableRow
+              v-for="headerGroup in table.getHeaderGroups()"
+              :key="headerGroup.id"
+            >
+              <TableHead
+                v-for="header in headerGroup.headers"
+                :key="header.id"
+                :class="[
+                  header.column.columnDef.meta?.class,
+                  header.column.columnDef.meta?.align === 'right' ? 'text-right' : 
+                  header.column.columnDef.meta?.align === 'center' ? 'text-center' : 'text-left',
+                ]"
+              >
+                <div v-if="!header.isPlaceholder">
+                  <component
+                    :is="flexRender(header.column.columnDef.header, header.getContext())"
+                  />
+                </div>
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <!-- Loading State -->
+            <template v-if="loading">
+              <TableRow>
+                <TableCell
+                  :colspan="columns.length + (selectable ? 1 : 0) + (showActions ? 1 : 0)"
+                  class="h-24 text-center"
+                >
+                  <SkeletonTable :rows="5" :cols="columns.length" />
+                </TableCell>
+              </TableRow>
+            </template>
+
+            <!-- Empty State -->
+            <template v-else-if="!loading && table.getRowModel().rows.length === 0">
+              <TableRow>
+                <TableCell
+                  :colspan="columns.length + (selectable ? 1 : 0) + (showActions ? 1 : 0)"
+                  class="h-24 text-center"
+                >
+                  <EmptyState
+                    :icon="emptyIcon"
+                    :title="emptyText"
+                    :description="emptyDescription"
+                    size="sm"
+                  />
+                </TableCell>
+              </TableRow>
+            </template>
+
+            <!-- Rows -->
+            <template v-else>
+              <TableRow
+                v-for="row in table.getRowModel().rows"
+                :key="row.id"
+                :data-state="row.getIsSelected() && 'selected'"
+                :class="cn(
+                  hoverable && 'cursor-pointer',
+                  striped && row.index % 2 === 1 && 'bg-muted/50',
+                )"
+                @click="(e) => { 
+                  const interactive = e.target.closest('button, a, [role=button], [data-dropdown], .relative, input[type=checkbox]'); 
+                  if (interactive) return; 
+                  $emit('row:click', row.original, row.index); 
+                }"
+              >
+                <TableCell
+                  v-for="cell in row.getVisibleCells()"
+                  :key="cell.id"
+                  :class="[
+                    cell.column.columnDef.meta?.class,
+                    cell.column.columnDef.meta?.align === 'right' ? 'text-right' : 
+                    cell.column.columnDef.meta?.align === 'center' ? 'text-center' : 'text-left',
+                  ]"
+                >
+                  <template v-if="cell.column.id === 'actions'">
+                    <slot name="actions" :row="row.original" :index="row.index">
+                      <slot name="row-actions" :row="row.original" :index="row.index" />
+                    </slot>
+                  </template>
+                  <template v-else>
+                    <slot
+                      :name="`cell-${cell.column.id}`"
+                      :row="row.original"
+                      :column="cell.column.columnDef"
+                      :value="cell.getValue()"
+                      :index="row.index"
+                    >
+                      <slot
+                        name="cell"
+                        :row="row.original"
+                        :column="cell.column.columnDef"
+                        :value="cell.getValue()"
+                        :index="row.index"
+                      >
+                        <component
+                          :is="flexRender(cell.column.columnDef.cell, cell.getContext())"
+                        />
+                      </slot>
+                    </slot>
+                  </template>
+                </TableCell>
+              </TableRow>
+            </template>
+          </TableBody>
+        </Table>
+      </div>
+
+      <!-- Mobile Card View -->
+      <div v-else-if="isMobile && mobileCardView" class="divide-y divide-gray-200">
+        <template v-if="loading">
+          <div class="p-4">
+            <SkeletonTable :rows="3" :cols="1" />
+          </div>
+        </template>
+
+        <template v-else-if="!loading && table.getRowModel().rows.length === 0">
+          <div class="p-6">
+            <EmptyState
+              :icon="emptyIcon"
+              :title="emptyText"
+              :description="emptyDescription"
+              size="sm"
+            />
+          </div>
+        </template>
+
+        <template v-else>
+          <div
+            v-for="row in table.getRowModel().rows"
+            :key="row.id"
+            @click="$emit('row:click', row.original, row.index)"
+            class="p-4 space-y-2 hover:bg-gray-50 transition-colors"
+            :class="{ 'cursor-pointer': !!$attrs.onRowClick }"
+          >
+            <slot name="mobile-card" :row="row.original" :index="row.index">
+              <!-- Default mobile card layout -->
+              <div
+                v-for="col in columns.slice(0, 3)"
+                :key="col.key"
+                class="flex justify-between items-start"
+              >
+                <span class="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                  {{ col.label }}
+                </span>
+                <span class="text-sm text-gray-900 text-right">
+                  <slot
+                    :name="`cell-${col.key}`"
+                    :row="row.original"
+                    :column="col"
+                    :value="row.original?.[col.key]"
+                    :index="row.index"
+                  >
+                    {{ row.original?.[col.key] ?? '—' }}
+                  </slot>
+                </span>
+              </div>
+              <div v-if="showActions || $slots.actions" class="pt-2 border-t border-gray-100">
+                <slot name="actions" :row="row.original" :index="row.index">
+                  <slot name="row-actions" :row="row.original" :index="row.index" />
+                </slot>
+              </div>
+            </slot>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <!-- Pagination -->
+    <div v-if="showPagination">
+      <!-- Use existing Pagination component for server-side -->
+      <template v-if="isServerSide && meta?.links">
+        <Pagination
+          :links="meta.links"
+          :from="from"
+          :to="to"
+          :total="total"
+        />
+      </template>
+
+      <!-- TanStack Table Pagination for client-side -->
+      <template v-else>
+        <DataTablePagination :table="table" />
+      </template>
+    </div>
+  </div>
+</template>
+

resources/js/Components/DataTable/DataTableNew2.vue

@@ -0,0 +1,601 @@
+<script setup>
+import { ref, computed, watch, h } from "vue";
+import { router } from "@inertiajs/vue3";
+import {
+  FlexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  useVueTable,
+} from "@tanstack/vue-table";
+import { valueUpdater } from "@/lib/utils";
+import DataTableColumnHeader from "./DataTableColumnHeader.vue";
+import DataTablePagination from "./DataTablePagination.vue";
+import DataTableViewOptions from "./DataTableViewOptions.vue";
+import DataTableToolbar from "./DataTableToolbar.vue";
+import SkeletonTable from "../Skeleton/SkeletonTable.vue";
+import EmptyState from "../EmptyState.vue";
+import Pagination from "../Pagination.vue";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/Components/ui/table";
+import Checkbox from "@/Components/ui/checkbox/Checkbox.vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  // Column definitions using TanStack Table format or simple format
+  columns: {
+    type: Array,
+    required: true,
+  },
+  // Data rows
+  data: {
+    type: Array,
+    default: () => [],
+  },
+  // Server-side pagination meta (Laravel pagination)
+  meta: {
+    type: Object,
+    default: null,
+  },
+  // Current sort state
+  sort: {
+    type: Object,
+    default: () => ({ key: null, direction: null }),
+  },
+  // Search/filter value
+  search: {
+    type: String,
+    default: "",
+  },
+  // Loading state
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  // Page size for client-side pagination
+  pageSize: {
+    type: Number,
+    default: 10,
+  },
+  pageSizeOptions: {
+    type: Array,
+    default: () => [10, 25, 50, 100],
+  },
+  // Server-side routing
+  routeName: {
+    type: String,
+    default: null,
+  },
+  routeParams: {
+    type: Object,
+    default: () => ({}),
+  },
+  pageParamName: {
+    type: String,
+    default: "page",
+  },
+  perPageParamName: {
+    type: String,
+    default: "per_page",
+  },
+  onlyProps: {
+    type: Array,
+    default: () => [],
+  },
+  preserveState: {
+    type: Boolean,
+    default: true,
+  },
+  preserveScroll: {
+    type: Boolean,
+    default: true,
+  },
+  // Features
+  showPagination: {
+    type: Boolean,
+    default: true,
+  },
+  showToolbar: {
+    type: Boolean,
+    default: true,
+  },
+  filterColumn: {
+    type: String,
+    default: null,
+  },
+  filterPlaceholder: {
+    type: String,
+    default: "Filter...",
+  },
+  rowKey: {
+    type: [String, Function],
+    default: "id",
+  },
+  enableRowSelection: {
+    type: Boolean,
+    default: false,
+  },
+  striped: {
+    type: Boolean,
+    default: false,
+  },
+  hoverable: {
+    type: Boolean,
+    default: true,
+  },
+  // Empty state
+  emptyText: {
+    type: String,
+    default: "No results.",
+  },
+  emptyIcon: {
+    type: [String, Object, Array],
+    default: null,
+  },
+  emptyDescription: {
+    type: String,
+    default: null,
+  },
+});
+
+const emit = defineEmits([
+  "update:search",
+  "update:sort",
+  "update:page",
+  "update:pageSize",
+  "row:click",
+  "row:select",
+  "selection:change",
+]);
+
+// Determine if this is server-side mode
+const isServerSide = computed(() => !!(props.meta && props.routeName));
+
+// Convert simple column format to TanStack ColumnDef if needed
+const columnDefinitions = computed(() => {
+  return props.columns.map((col) => {
+    // If already a full ColumnDef, return as is
+    if (col.accessorKey || col.accessorFn) {
+      return col;
+    }
+
+    // Convert simple format to ColumnDef
+    return {
+      accessorKey: col.key,
+      id: col.key,
+      header: ({ column }) => {
+        return h(DataTableColumnHeader, {
+          column,
+          title: col.label,
+          class: col.class,
+        });
+      },
+      cell: ({ row }) => {
+        const value = row.getValue(col.key);
+        return h("div", { class: col.class }, value);
+      },
+      enableSorting: col.sortable !== false,
+      enableHiding: col.hideable !== false,
+      meta: {
+        align: col.align || "left",
+        class: col.class,
+      },
+    };
+  });
+});
+
+// Add selection column if enabled
+const columnsWithSelection = computed(() => {
+  if (!props.enableRowSelection) return columnDefinitions.value;
+
+  return [
+    {
+      id: "select",
+      header: ({ table }) => {
+        return h(Checkbox, {
+          modelValue: table.getIsAllPageRowsSelected(),
+          indeterminate: table.getIsSomePageRowsSelected(),
+          "onUpdate:modelValue": (value) => table.toggleAllPageRowsSelected(!!value),
+          "aria-label": "Select all",
+        });
+      },
+      cell: ({ row }) => {
+        return h(Checkbox, {
+          modelValue: row.getIsSelected(),
+          "onUpdate:modelValue": (value) => row.toggleSelected(!!value),
+          "aria-label": "Select row",
+        });
+      },
+      enableSorting: false,
+      enableHiding: false,
+    },
+    ...columnDefinitions.value,
+  ];
+});
+
+// Internal state
+const sorting = ref([]);
+const columnFilters = ref([]);
+const columnVisibility = ref({});
+const rowSelection = ref({});
+
+// Client-side pagination state
+const clientPagination = ref({
+  pageIndex: 0,
+  pageSize: props.pageSize,
+});
+
+// Initialize sorting from props
+watch(
+  () => props.sort,
+  (newSort) => {
+    if (newSort?.key && newSort?.direction) {
+      sorting.value = [
+        {
+          id: newSort.key,
+          desc: newSort.direction === "desc",
+        },
+      ];
+    } else {
+      sorting.value = [];
+    }
+  },
+  { immediate: true }
+);
+
+// Initialize filter from props
+watch(
+  () => props.search,
+  (newSearch) => {
+    if (props.filterColumn && newSearch) {
+      columnFilters.value = [
+        {
+          id: props.filterColumn,
+          value: newSearch,
+        },
+      ];
+    } else if (!newSearch) {
+      columnFilters.value = [];
+    }
+  },
+  { immediate: true }
+);
+
+// Pagination state
+const pagination = computed(() => {
+  if (isServerSide.value) {
+    // Check URL for custom per-page parameter
+    const urlParams = new URLSearchParams(window.location.search);
+    const perPageParam = props.perPageParamName || "per_page";
+    const urlPerPage = urlParams.get(perPageParam);
+    const pageSize = urlPerPage 
+      ? Number(urlPerPage) 
+      : (props.meta?.per_page ?? props.pageSize);
+    
+    return {
+      pageIndex: (props.meta?.current_page ?? 1) - 1,
+      pageSize: pageSize,
+    };
+  }
+  return clientPagination.value;
+});
+
+// Watch for prop changes to update client pagination
+watch(
+  () => props.pageSize,
+  (newSize) => {
+    if (!isServerSide.value) {
+      clientPagination.value.pageSize = newSize;
+    }
+  }
+);
+
+// Create TanStack Table
+const table = useVueTable({
+  get data() {
+    return props.data;
+  },
+  get columns() {
+    return columnsWithSelection.value;
+  },
+  getCoreRowModel: getCoreRowModel(),
+  getPaginationRowModel: !isServerSide.value ? getPaginationRowModel() : undefined,
+  getSortedRowModel: !isServerSide.value ? getSortedRowModel() : undefined,
+  getFilteredRowModel: !isServerSide.value ? getFilteredRowModel() : undefined,
+  onSortingChange: (updater) => {
+    valueUpdater(updater, sorting);
+    const newSort = sorting.value[0];
+    if (newSort) {
+      emit("update:sort", {
+        key: newSort.id,
+        direction: newSort.desc ? "desc" : "asc",
+      });
+      if (isServerSide.value) {
+        doServerRequest({
+          sort: newSort.id,
+          direction: newSort.desc ? "desc" : "asc",
+          page: 1,
+        });
+      }
+    } else {
+      emit("update:sort", { key: null, direction: null });
+      if (isServerSide.value) {
+        doServerRequest({ sort: null, direction: null, page: 1 });
+      }
+    }
+  },
+  onColumnFiltersChange: (updater) => {
+    valueUpdater(updater, columnFilters);
+    const filter = columnFilters.value.find((f) => f.id === props.filterColumn);
+    const searchValue = filter?.value ?? "";
+    emit("update:search", searchValue);
+    if (isServerSide.value) {
+      clearTimeout(searchTimer.value);
+      searchTimer.value = setTimeout(() => {
+        doServerRequest({ search: searchValue, page: 1 });
+      }, 300);
+    }
+  },
+  onColumnVisibilityChange: (updater) => valueUpdater(updater, columnVisibility),
+  onRowSelectionChange: (updater) => {
+    valueUpdater(updater, rowSelection);
+    const selectedKeys = Object.keys(rowSelection.value).filter(
+      (key) => rowSelection.value[key]
+    );
+    emit("selection:change", selectedKeys);
+  },
+  onPaginationChange: (updater) => {
+    const currentPagination = pagination.value;
+    const newPagination =
+      typeof updater === "function" ? updater(currentPagination) : updater;
+
+    // Check if page size changed
+    const pageSizeChanged = newPagination.pageSize !== currentPagination.pageSize;
+
+    if (isServerSide.value) {
+      // If page size changed, go back to page 1
+      const targetPage = pageSizeChanged ? 1 : newPagination.pageIndex + 1;
+      doServerRequest({
+        page: targetPage,
+        perPage: newPagination.pageSize,
+      });
+    } else {
+      // Update client-side pagination state
+      clientPagination.value = {
+        pageIndex: newPagination.pageIndex,
+        pageSize: newPagination.pageSize,
+      };
+    }
+
+    if (pageSizeChanged) {
+      emit("update:pageSize", newPagination.pageSize);
+    }
+    if (newPagination.pageIndex !== currentPagination.pageIndex) {
+      emit("update:page", newPagination.pageIndex + 1);
+    }
+  },
+  manualSorting: isServerSide.value,
+  manualPagination: isServerSide.value,
+  manualFiltering: isServerSide.value,
+  enableRowSelection: props.enableRowSelection,
+  state: {
+    get sorting() {
+      return sorting.value;
+    },
+    get columnFilters() {
+      return columnFilters.value;
+    },
+    get columnVisibility() {
+      return columnVisibility.value;
+    },
+    get rowSelection() {
+      return rowSelection.value;
+    },
+    get pagination() {
+      return pagination.value;
+    },
+  },
+});
+
+const searchTimer = ref(null);
+
+// Server-side request handler
+function doServerRequest(overrides = {}) {
+  if (!props.routeName) return;
+
+  const existingParams = Object.fromEntries(
+    new URLSearchParams(window.location.search).entries()
+  );
+
+  const perPageParam = props.perPageParamName || "per_page";
+  const pageParam = props.pageParamName || "page";
+
+  const q = {
+    ...existingParams,
+    sort: overrides.sort ?? props.sort?.key ?? null,
+    direction: overrides.direction ?? props.sort?.direction ?? null,
+    search: overrides.search ?? props.search ?? "",
+  };
+
+  // Use custom per_page parameter name
+  q[perPageParam] = overrides.perPage ?? props.meta?.per_page ?? props.pageSize;
+  if (perPageParam !== "per_page") {
+    delete q.per_page;
+  }
+
+  // Use custom page parameter name
+  q[pageParam] = overrides.page ?? props.meta?.current_page ?? 1;
+  if (pageParam !== "page") {
+    delete q.page;
+  }
+
+  Object.keys(q).forEach((k) => {
+    if (q[k] === null || q[k] === undefined || q[k] === "") delete q[k];
+  });
+
+  const url = route(props.routeName, props.routeParams || {});
+  router.get(url, q, {
+    preserveScroll: props.preserveScroll,
+    preserveState: props.preserveState,
+    replace: true,
+    only: props.onlyProps.length ? props.onlyProps : undefined,
+  });
+}
+
+// Row key helper
+function keyOf(row) {
+  if (typeof props.rowKey === "function") return props.rowKey(row);
+  if (typeof props.rowKey === "string" && row && row[props.rowKey] != null)
+    return row[props.rowKey];
+  return row?.uuid ?? row?.id ?? Math.random().toString(36).slice(2);
+}
+</script>
+
+<template>
+  <div class="w-full">
+    <!-- Toolbar -->
+    <DataTableToolbar
+      v-if="showToolbar"
+      :table="table"
+      :filter-column="filterColumn"
+      :filter-placeholder="filterPlaceholder"
+      :show-per-page-selector="isServerSide"
+      :per-page="pagination.pageSize"
+      :page-size-options="pageSizeOptions"
+      @update:per-page="(value) => table.setPageSize(value)"
+      class="px-4 py-2 border-t"
+    >
+      <template #filters="slotProps">
+        <slot name="toolbar-filters" v-bind="slotProps" />
+      </template>
+      <template #actions="slotProps">
+        <slot name="toolbar-actions" v-bind="slotProps" />
+      </template>
+    </DataTableToolbar>
+
+    <!-- Custom toolbar slot for full control -->
+    <slot name="toolbar" :table="table" />
+
+    <!-- Table -->
+    <div class="border-t">
+      <Table>
+        <TableHeader>
+          <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
+            <TableHead
+              v-for="header in headerGroup.headers"
+              :key="header.id"
+              :class="[
+                'py-4',
+                header.column.columnDef.meta?.class,
+                header.column.columnDef.meta?.align === 'right'
+                  ? 'text-right'
+                  : header.column.columnDef.meta?.align === 'center'
+                  ? 'text-center'
+                  : 'text-left',
+              ]"
+            >
+              <FlexRender
+                v-if="!header.isPlaceholder"
+                :render="header.column.columnDef.header"
+                :props="header.getContext()"
+              />
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <!-- Loading State -->
+          <template v-if="loading">
+            <TableRow>
+              <TableCell :colspan="table.getAllColumns().length" class="h-24 text-center">
+                <SkeletonTable :rows="5" :cols="columns.length" />
+              </TableCell>
+            </TableRow>
+          </template>
+
+          <!-- Empty State -->
+          <template v-else-if="table.getRowModel().rows.length === 0">
+            <TableRow>
+              <TableCell :colspan="table.getAllColumns().length" class="h-24 text-center">
+                <EmptyState
+                  :icon="emptyIcon"
+                  :title="emptyText"
+                  :description="emptyDescription"
+                  size="sm"
+                />
+              </TableCell>
+            </TableRow>
+          </template>
+
+          <!-- Data Rows -->
+          <template v-else>
+            <TableRow
+              v-for="row in table.getRowModel().rows"
+              :key="keyOf(row.original)"
+              :data-state="row.getIsSelected() && 'selected'"
+              :class="
+                cn(
+                  hoverable && 'cursor-pointer hover:bg-muted/50',
+                  striped && row.index % 2 === 1 && 'bg-muted/50'
+                )
+              "
+              @click="$emit('row:click', row.original, row.index)"
+            >
+              <TableCell
+                v-for="cell in row.getVisibleCells()"
+                :key="cell.id"
+                :class="[
+                  cell.column.columnDef.meta?.class,
+                  cell.column.columnDef.meta?.align === 'right'
+                    ? 'text-right'
+                    : cell.column.columnDef.meta?.align === 'center'
+                    ? 'text-center'
+                    : 'text-left',
+                ]"
+              >
+                <!-- Use slot if provided -->
+                <slot
+                  :name="`cell-${cell.column.id}`"
+                  :row="row.original"
+                  :column="cell.column"
+                  :value="cell.getValue()"
+                  :index="row.index"
+                >
+                  <!-- Otherwise use FlexRender -->
+                  <FlexRender
+                    :render="cell.column.columnDef.cell"
+                    :props="cell.getContext()"
+                  />
+                </slot>
+              </TableCell>
+            </TableRow>
+          </template>
+        </TableBody>
+      </Table>
+    </div>
+
+    <!-- Pagination -->
+    <div v-if="showPagination">
+      <!-- Server-side pagination -->
+      <template v-if="isServerSide && meta?.links">
+        <Pagination
+          :links="meta.links"
+          :from="meta.from"
+          :to="meta.to"
+          :total="meta.total"
+        />
+      </template>
+
+      <!-- Client-side pagination -->
+      <template v-else>
+        <DataTablePagination :table="table" />
+      </template>
+    </div>
+  </div>
+</template>

resources/js/Components/DataTable/DataTableOld.vue

@@ -0,0 +1,884 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { router } from '@inertiajs/vue3';
+import DataTableToolbar from './DataTableToolbar.vue';
+import SkeletonTable from '../Skeleton/SkeletonTable.vue';
+import EmptyState from '../EmptyState.vue';
+import Pagination from '../Pagination.vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import {
+  faChevronLeft,
+  faChevronRight,
+  faSort,
+  faSortUp,
+  faSortDown,
+} from '@fortawesome/free-solid-svg-icons';
+
+const props = defineProps({
+  // Data
+  rows: { type: Array, default: () => [] },
+  columns: {
+    type: Array,
+    required: true,
+    validator: (cols) =>
+      cols.every(
+        (col) => col.key && col.label && typeof col.key === 'string' && typeof col.label === 'string'
+      ),
+  },
+  
+  // Pagination (for server-side)
+  meta: {
+    type: Object,
+    default: null,
+    validator: (meta) =>
+      !meta ||
+      (typeof meta.current_page === 'number' &&
+        typeof meta.per_page === 'number' &&
+        typeof meta.total === 'number' &&
+        typeof meta.last_page === 'number'),
+  },
+  
+  // Sorting
+  sort: {
+    type: Object,
+    default: () => ({ key: null, direction: null }),
+  },
+  
+  // Search
+  search: { type: String, default: '' },
+  
+  // Loading state
+  loading: { type: Boolean, default: false },
+  
+  // Client-side pagination (when meta is null)
+  pageSize: { type: Number, default: 10 },
+  pageSizeOptions: { type: Array, default: () => [10, 25, 50, 100] },
+  
+  // Routing (for server-side)
+  routeName: { type: String, default: null },
+  routeParams: { type: Object, default: () => ({}) },
+  pageParamName: { type: String, default: 'page' },
+  onlyProps: { type: Array, default: () => [] },
+  
+  // Features
+  showToolbar: { type: Boolean, default: true },
+  showSearch: { type: Boolean, default: false },
+  showPageSize: { type: Boolean, default: false },
+  showPagination: { type: Boolean, default: true },
+  showFilters: { type: Boolean, default: false },
+  showExport: { type: Boolean, default: false },
+  showAdd: { type: Boolean, default: false }, // Show add buttons dropdown
+  showOptions: { type: Boolean, default: false }, // Show custom options slot
+  showSelectedCount: { type: Boolean, default: false }, // Show selected count badge
+  showOptionsMenu: { type: Boolean, default: false }, // Show options menu (three dots)
+  compactToolbar: { type: Boolean, default: false }, // Compact mode: move search/page size to menu
+  hasActiveFilters: { type: Boolean, default: false }, // External indicator for active filters
+  rowKey: { type: [String, Function], default: 'uuid' },
+  selectable: { type: Boolean, default: false },
+  striped: { type: Boolean, default: false },
+  hoverable: { type: Boolean, default: true },
+  
+  // Empty state
+  emptyText: { type: String, default: 'Ni podatkov' },
+  emptyIcon: { type: [String, Object, Array], default: null },
+  emptyDescription: { type: String, default: null },
+  
+  // Actions
+  showActions: { type: Boolean, default: false },
+  actionsPosition: { type: String, default: 'right', validator: (v) => ['left', 'right'].includes(v) },
+  
+  // Mobile
+  mobileCardView: { type: Boolean, default: true },
+  mobileBreakpoint: { type: Number, default: 768 }, // Tailwind md breakpoint
+  
+  // State preservation
+  preserveState: { type: Boolean, default: true },
+  preserveScroll: { type: Boolean, default: true },
+});
+
+const emit = defineEmits([
+  'update:search',
+  'update:sort',
+  'update:page',
+  'update:pageSize',
+  'row:click',
+  'row:select',
+  'selection:change',
+]);
+
+// Determine if this is server-side (has meta and routeName)
+const isServerSide = computed(() => !!(props.meta && props.routeName));
+const isClientSide = computed(() => !isServerSide.value);
+
+// Row key helper
+function keyOf(row) {
+  if (typeof props.rowKey === 'function') return props.rowKey(row);
+  if (typeof props.rowKey === 'string' && row && row[props.rowKey] != null)
+    return row[props.rowKey];
+  return row?.uuid ?? row?.id ?? Math.random().toString(36).slice(2);
+}
+
+// Client-side sorting
+const sortedRows = computed(() => {
+  if (isServerSide.value || !props.sort?.key || !props.sort?.direction) {
+    return props.rows;
+  }
+  
+  const key = props.sort.key;
+  const direction = props.sort.direction;
+  const sorted = [...props.rows];
+  
+  sorted.sort((a, b) => {
+    let aVal = a?.[key];
+    let bVal = b?.[key];
+    
+    // Handle nulls/undefined
+    if (aVal == null) return 1;
+    if (bVal == null) return -1;
+    
+    // Handle dates
+    if (aVal instanceof Date || (typeof aVal === 'string' && aVal.match(/\d{4}-\d{2}-\d{2}/))) {
+      aVal = new Date(aVal);
+      bVal = new Date(bVal);
+    }
+    
+    // Handle numbers
+    if (typeof aVal === 'number' && typeof bVal === 'number') {
+      return direction === 'asc' ? aVal - bVal : bVal - aVal;
+    }
+    
+    // Handle strings
+    const aStr = String(aVal).toLowerCase();
+    const bStr = String(bVal).toLowerCase();
+    if (direction === 'asc') {
+      return aStr.localeCompare(bStr);
+    }
+    return bStr.localeCompare(aStr);
+  });
+  
+  return sorted;
+});
+
+// Client-side pagination
+const currentPage = computed(() => {
+  if (isServerSide.value) return props.meta?.current_page ?? 1;
+  return internalPage.value;
+});
+
+const internalPage = ref(1);
+// Use computed for pageSize to always reflect the correct value
+// For server-side: use meta.per_page, for client-side: use internal state or props.pageSize
+const internalPageSize = computed({
+  get: () => {
+    if (isServerSide.value && props.meta?.per_page) {
+      return props.meta.per_page;
+    }
+    return internalPageSizeState.value ?? props.pageSize;
+  },
+  set: (value) => {
+    internalPageSizeState.value = value;
+  }
+});
+
+// Internal state for client-side or when user changes page size before server responds
+const internalPageSizeState = ref(null);
+
+const totalPages = computed(() => {
+  if (isServerSide.value) return props.meta?.last_page ?? 1;
+  return Math.ceil(sortedRows.value.length / internalPageSize.value);
+});
+
+const paginatedRows = computed(() => {
+  if (isServerSide.value) return props.rows;
+  
+  const start = (currentPage.value - 1) * internalPageSize.value;
+  const end = start + internalPageSize.value;
+  return sortedRows.value.slice(start, end);
+});
+
+// Client-side search
+const filteredRows = computed(() => {
+  if (isServerSide.value || !internalSearch.value) {
+    return paginatedRows.value;
+  }
+  
+  const searchTerm = internalSearch.value.toLowerCase();
+  return paginatedRows.value.filter((row) => {
+    return props.columns.some((col) => {
+      const value = row?.[col.key];
+      if (value == null) return false;
+      return String(value).toLowerCase().includes(searchTerm);
+    });
+  });
+});
+
+// Search handling
+const internalSearch = ref(props.search);
+watch(
+  () => props.search,
+  (newVal) => {
+    internalSearch.value = newVal;
+  }
+);
+
+// Selection
+const selectedRows = ref(new Set());
+const isAllSelected = computed(() => {
+  if (filteredRows.value.length === 0) return false;
+  return filteredRows.value.every((row) => selectedRows.value.has(keyOf(row)));
+});
+const isSomeSelected = computed(() => {
+  return (
+    selectedRows.value.size > 0 &&
+    filteredRows.value.some((row) => selectedRows.value.has(keyOf(row)))
+  );
+});
+
+function toggleSelectAll() {
+  if (isAllSelected.value) {
+    filteredRows.value.forEach((row) => {
+      selectedRows.value.delete(keyOf(row));
+    });
+  } else {
+    filteredRows.value.forEach((row) => {
+      selectedRows.value.add(keyOf(row));
+    });
+  }
+  emit('selection:change', Array.from(selectedRows.value));
+}
+
+function toggleSelectRow(row) {
+  const key = keyOf(row);
+  if (selectedRows.value.has(key)) {
+    selectedRows.value.delete(key);
+  } else {
+    selectedRows.value.add(key);
+  }
+  emit('row:select', row, selectedRows.value.has(key));
+  emit('selection:change', Array.from(selectedRows.value));
+}
+
+// Sorting
+function toggleSort(col) {
+  if (!col.sortable) return;
+  
+  if (isServerSide.value) {
+    const current = props.sort || { key: null, direction: null };
+    let direction = 'asc';
+    if (current.key === col.key) {
+      direction =
+        current.direction === 'asc' ? 'desc' : current.direction === 'desc' ? null : 'asc';
+    }
+    emit('update:sort', { key: direction ? col.key : null, direction });
+    doServerRequest({ sort: direction ? col.key : null, direction, page: 1 });
+  } else {
+    const current = props.sort || { key: null, direction: null };
+    let direction = 'asc';
+    if (current.key === col.key) {
+      direction =
+        current.direction === 'asc' ? 'desc' : current.direction === 'desc' ? null : 'asc';
+    }
+    emit('update:sort', { key: direction ? col.key : null, direction });
+  }
+}
+
+function getSortIcon(col) {
+  if (props.sort?.key !== col.key) return faSort;
+  if (props.sort?.direction === 'asc') return faSortUp;
+  if (props.sort?.direction === 'desc') return faSortDown;
+  return faSort;
+}
+
+// Server-side request
+function doServerRequest(overrides = {}) {
+  // Preserve existing query parameters from URL
+  const existingParams = Object.fromEntries(
+    new URLSearchParams(window.location.search).entries()
+  );
+  
+  const q = {
+    ...existingParams, // Preserve all existing query parameters
+    per_page: overrides.perPage ?? props.meta?.per_page ?? internalPageSizeState.value ?? internalPageSize.value,
+    sort: overrides.sort ?? props.sort?.key ?? existingParams.sort ?? null,
+    direction: overrides.direction ?? props.sort?.direction ?? existingParams.direction ?? null,
+    search: overrides.search ?? internalSearch.value ?? existingParams.search ?? '',
+  };
+  
+  const pageParam = props.pageParamName || 'page';
+  q[pageParam] = overrides.page ?? props.meta?.current_page ?? 1;
+  if (pageParam !== 'page') {
+    delete q.page;
+  }
+  
+  // Clean nulls and empty strings
+  Object.keys(q).forEach((k) => {
+    if (q[k] === null || q[k] === undefined || q[k] === '') delete q[k];
+  });
+  
+  const url = route(props.routeName, props.routeParams || {});
+  router.get(
+    url,
+    q,
+    {
+      preserveScroll: props.preserveScroll,
+      preserveState: props.preserveState,
+      replace: true,
+      only: props.onlyProps.length ? props.onlyProps : undefined,
+      onSuccess: () => {
+        // Scroll to top of table after server request completes
+        setTimeout(() => {
+          const tableElement = document.querySelector('[data-table-container]');
+          if (tableElement) {
+            tableElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+          } else {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }
+        }, 100);
+      },
+    }
+  );
+}
+
+function handleSearchChange(value) {
+  internalSearch.value = value;
+  emit('update:search', value);
+  
+  if (isServerSide.value) {
+    clearTimeout(searchTimer.value);
+    searchTimer.value = setTimeout(() => {
+      doServerRequest({ search: value, page: 1 });
+    }, 300);
+  }
+}
+
+function handlePageSizeChange(size) {
+  const newSize = Number(size);
+  internalPageSizeState.value = newSize;
+  emit('update:pageSize', newSize);
+  
+  if (isServerSide.value) {
+    // Reset to page 1 when changing page size to avoid being on a non-existent page
+    doServerRequest({ perPage: newSize, page: 1 });
+  } else {
+    // Calculate total pages with new size
+    const newTotalPages = Math.ceil(sortedRows.value.length / newSize);
+    // If current page exceeds new total, reset to last page or page 1
+    const targetPage = currentPage.value > newTotalPages && newTotalPages > 0 ? newTotalPages : 1;
+    internalPage.value = targetPage;
+    emit('update:page', targetPage);
+  }
+}
+
+function handlePageChange(page) {
+  if (isServerSide.value) {
+    doServerRequest({ page });
+  } else {
+    internalPage.value = page;
+    emit('update:page', page);
+  }
+  
+  // Scroll to top of table after page change
+  setTimeout(() => {
+    const tableElement = document.querySelector('[data-table-container]');
+    if (tableElement) {
+      tableElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    } else {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  }, isServerSide.value ? 100 : 50);
+}
+
+const searchTimer = ref(null);
+
+// Mobile detection
+const isMobile = ref(false);
+if (typeof window !== 'undefined') {
+  const checkMobile = () => {
+    isMobile.value = window.innerWidth < props.mobileBreakpoint;
+  };
+  checkMobile();
+  window.addEventListener('resize', checkMobile);
+}
+
+// Display rows
+const displayRows = computed(() => {
+  if (isServerSide.value || !internalSearch.value) {
+    return paginatedRows.value;
+  }
+  return filteredRows.value;
+});
+
+const total = computed(() => {
+  if (isServerSide.value) return props.meta?.total ?? 0;
+  return internalSearch.value ? filteredRows.value.length : sortedRows.value.length;
+});
+
+const from = computed(() => {
+  if (isServerSide.value) return props.meta?.from ?? 0;
+  return total.value === 0 ? 0 : (currentPage.value - 1) * internalPageSize.value + 1;
+});
+
+const to = computed(() => {
+  if (isServerSide.value) return props.meta?.to ?? 0;
+  return Math.min(currentPage.value * internalPageSize.value, total.value);
+});
+
+// Export functionality
+function handleExport(format) {
+  const data = displayRows.value.map((row) => {
+    const exported = {};
+    props.columns.forEach((col) => {
+      exported[col.label] = row?.[col.key] ?? '';
+    });
+    return exported;
+  });
+
+  if (format === 'csv') {
+    exportToCSV(data);
+  } else if (format === 'xlsx') {
+    exportToXLSX(data);
+  }
+}
+
+function exportToCSV(data) {
+  if (data.length === 0) return;
+
+  const headers = Object.keys(data[0]);
+  const csvContent = [
+    headers.join(','),
+    ...data.map((row) =>
+      headers
+        .map((header) => {
+          const value = row[header];
+          if (value == null) return '';
+          const stringValue = String(value).replace(/"/g, '""');
+          return `"${stringValue}"`;
+        })
+        .join(',')
+    ),
+  ].join('\n');
+
+  const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
+  const link = document.createElement('a');
+  const url = URL.createObjectURL(blob);
+  link.setAttribute('href', url);
+  link.setAttribute('download', `export_${new Date().toISOString().split('T')[0]}.csv`);
+  link.style.visibility = 'hidden';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+function exportToXLSX(data) {
+  // For XLSX, we'll use a CSV-like format or alert user to install xlsx library
+  // Simple implementation: use CSV format with .xlsx extension
+  exportToCSV(data);
+  // In production, you might want to use a library like 'xlsx' or 'exceljs'
+}
+
+// Generate visible page numbers with ellipsis
+function getVisiblePages() {
+  const pages = [];
+  const total = totalPages.value;
+  const current = currentPage.value;
+  const maxVisible = 7;
+  
+  if (total <= maxVisible) {
+    for (let i = 1; i <= total; i++) {
+      pages.push(i);
+    }
+    return pages;
+  }
+  
+  // Always show first page
+  pages.push(1);
+  
+  // Calculate start and end
+  let start = Math.max(2, current - 1);
+  let end = Math.min(total - 1, current + 1);
+  
+  // Adjust if near start
+  if (current <= 3) {
+    end = Math.min(4, total - 1);
+  }
+  
+  // Adjust if near end
+  if (current >= total - 2) {
+    start = Math.max(2, total - 3);
+  }
+  
+  // Add ellipsis after first page if needed
+  if (start > 2) {
+    pages.push('...');
+  }
+  
+  // Add middle pages
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+  
+  // Add ellipsis before last page if needed
+  if (end < total - 1) {
+    pages.push('...');
+  }
+  
+  // Always show last page
+  if (total > 1) {
+    pages.push(total);
+  }
+  
+  return pages;
+}
+</script>
+
+<template>
+  <div class="w-full space-y-4">
+    <!-- Toolbar -->
+    <DataTableToolbar
+      v-if="showToolbar"
+      :search="internalSearch"
+      :show-search="showSearch"
+      :show-page-size="showPageSize"
+      :page-size="internalPageSize"
+      :page-size-options="pageSizeOptions"
+      :selected-count="selectedRows.size"
+      :show-selected-count="showSelectedCount"
+      :show-export="showExport"
+      :show-add="showAdd"
+      :show-options="showOptions"
+      :show-filters="showFilters"
+      :show-options-menu="showOptionsMenu"
+      :has-active-filters="hasActiveFilters"
+      :compact="compactToolbar"
+      @update:search="handleSearchChange"
+      @update:page-size="handlePageSizeChange"
+      @export="handleExport"
+    >
+      <template #add>
+        <slot name="toolbar-add" />
+      </template>
+      <template #options>
+        <slot name="toolbar-options" />
+      </template>
+      <template #filters>
+        <slot name="toolbar-filters" />
+      </template>
+      <template #actions>
+        <slot name="toolbar-actions" />
+      </template>
+    </DataTableToolbar>
+
+    <!-- Table Container -->
+    <div
+      data-table-container
+      class="relative overflow-hidden"
+    >
+      <!-- Desktop Table View -->
+      <div v-if="!isMobile || !mobileCardView" class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-gray-200">
+          <!-- Header -->
+          <thead>
+            <tr>
+              <!-- Select All Checkbox -->
+              <th
+                v-if="selectable"
+                class="w-12 px-6 py-3 text-left"
+                scope="col"
+              >
+                <input
+                  type="checkbox"
+                  :checked="isAllSelected"
+                  :indeterminate="isSomeSelected && !isAllSelected"
+                  @change="toggleSelectAll"
+                  class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+                />
+              </th>
+
+              <!-- Column Headers -->
+              <th
+                v-for="col in columns"
+                :key="col.key"
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
+                :class="[
+                  col.class,
+                  col.align === 'right' ? 'text-right' : col.align === 'center' ? 'text-center' : 'text-left',
+                ]"
+              >
+                <button
+                  v-if="col.sortable"
+                  type="button"
+                  class="group inline-flex items-center gap-1.5 hover:text-gray-700 transition-colors"
+                  @click="toggleSort(col)"
+                  :aria-sort="sort?.key === col.key ? sort.direction || 'none' : 'none'"
+                >
+                  <span>{{ col.label }}</span>
+                  <FontAwesomeIcon
+                    :icon="getSortIcon(col)"
+                    class="w-3 h-3 transition-colors"
+                    :class="{
+                      'text-gray-700': sort?.key === col.key,
+                      'text-gray-400 group-hover:text-gray-500': sort?.key !== col.key,
+                    }"
+                  />
+                </button>
+                <span v-else>{{ col.label }}</span>
+              </th>
+
+              <!-- Actions Column -->
+              <th
+                v-if="showActions || $slots.actions"
+                scope="col"
+                class="relative w-px px-6 py-3"
+              >
+                <span class="sr-only">Actions</span>
+              </th>
+            </tr>
+          </thead>
+
+          <!-- Body -->
+          <tbody class="divide-y divide-gray-200 bg-white">
+            <!-- Loading State -->
+            <template v-if="loading">
+              <tr>
+                <td :colspan="columns.length + (selectable ? 1 : 0) + (showActions ? 1 : 0)" class="px-6 py-4">
+                  <SkeletonTable :rows="5" :cols="columns.length" />
+                </td>
+              </tr>
+            </template>
+
+            <!-- Empty State -->
+            <template v-else-if="!loading && displayRows.length === 0">
+              <tr>
+                <td
+                  :colspan="columns.length + (selectable ? 1 : 0) + (showActions ? 1 : 0)"
+                  class="px-6 py-12 text-center"
+                >
+                  <EmptyState
+                    :icon="emptyIcon"
+                    :title="emptyText"
+                    :description="emptyDescription"
+                    size="sm"
+                  />
+                </td>
+              </tr>
+            </template>
+
+            <!-- Rows -->
+            <template v-else>
+              <tr
+                v-for="(row, idx) in displayRows"
+                :key="keyOf(row)"
+                @click="(e) => { const interactive = e.target.closest('button, a, [role=button], [data-dropdown], .relative'); if (interactive) return; $emit('row:click', row, idx); }"
+                class="transition-colors"
+                :class="{
+                  'cursor-pointer': !!$attrs.onRowClick,
+                  'bg-gray-50': striped && idx % 2 === 1,
+                  'hover:bg-gray-50': hoverable && !selectedRows.has(keyOf(row)),
+                  'bg-primary-50': selectedRows.has(keyOf(row)),
+                }"
+              >
+                <!-- Select Checkbox -->
+                <td v-if="selectable" class="px-6 py-4 whitespace-nowrap">
+                  <input
+                    type="checkbox"
+                    :checked="selectedRows.has(keyOf(row))"
+                    @click.stop="toggleSelectRow(row)"
+                    class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+                  />
+                </td>
+
+                <!-- Data Cells -->
+                <td
+                  v-for="col in columns"
+                  :key="col.key"
+                  class="px-6 py-4 whitespace-nowrap text-sm"
+                  :class="[
+                    col.class,
+                    col.align === 'right'
+                      ? 'text-right text-gray-900'
+                      : col.align === 'center'
+                      ? 'text-center text-gray-900'
+                      : 'text-left text-gray-900',
+                  ]"
+                >
+                  <slot
+                    :name="`cell-${col.key}`"
+                    :row="row"
+                    :column="col"
+                    :value="row?.[col.key]"
+                    :index="idx"
+                  >
+                    <slot name="cell" :row="row" :column="col" :value="row?.[col.key]" :index="idx">
+                      <span>{{ row?.[col.key] ?? '—' }}</span>
+                    </slot>
+                  </slot>
+                </td>
+
+                <!-- Actions Cell -->
+                <td
+                  v-if="showActions || $slots.actions"
+                  class="relative whitespace-nowrap py-4 pl-3 pr-6 text-right text-sm font-medium"
+                >
+                  <slot name="actions" :row="row" :index="idx">
+                    <slot name="row-actions" :row="row" :index="idx" />
+                  </slot>
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Mobile Card View -->
+      <div v-else-if="isMobile && mobileCardView" class="divide-y divide-gray-200">
+        <template v-if="loading">
+          <div class="p-4">
+            <SkeletonTable :rows="3" :cols="1" />
+          </div>
+        </template>
+
+        <template v-else-if="!loading && displayRows.length === 0">
+          <div class="p-6">
+            <EmptyState
+              :icon="emptyIcon"
+              :title="emptyText"
+              :description="emptyDescription"
+              size="sm"
+            />
+          </div>
+        </template>
+
+        <template v-else>
+          <div
+            v-for="(row, idx) in displayRows"
+            :key="keyOf(row)"
+            @click="$emit('row:click', row, idx)"
+            class="p-4 space-y-2 hover:bg-gray-50 transition-colors"
+            :class="{ 'cursor-pointer': !!$attrs.onRowClick }"
+          >
+            <slot name="mobile-card" :row="row" :index="idx">
+              <!-- Default mobile card layout -->
+              <div
+                v-for="col in columns.slice(0, 3)"
+                :key="col.key"
+                class="flex justify-between items-start"
+              >
+                <span class="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                  {{ col.label }}
+                </span>
+                <span class="text-sm text-gray-900 text-right">
+                  <slot
+                    :name="`cell-${col.key}`"
+                    :row="row"
+                    :column="col"
+                    :value="row?.[col.key]"
+                    :index="idx"
+                  >
+                    {{ row?.[col.key] ?? '—' }}
+                  </slot>
+                </span>
+              </div>
+              <div v-if="showActions || $slots.actions" class="pt-2 border-t border-gray-100">
+                <slot name="actions" :row="row" :index="idx">
+                  <slot name="row-actions" :row="row" :index="idx" />
+                </slot>
+              </div>
+            </slot>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <!-- Pagination -->
+    <div v-if="showPagination && totalPages > 1">
+      <!-- Use existing Pagination component for server-side -->
+      <template v-if="isServerSide && meta?.links">
+        <Pagination
+          :links="meta.links"
+          :from="from"
+          :to="to"
+          :total="total"
+        />
+      </template>
+
+      <!-- Custom pagination for client-side -->
+      <template v-else>
+        <div class="flex flex-1 justify-between sm:hidden">
+          <button
+            @click="handlePageChange(currentPage - 1)"
+            :disabled="currentPage <= 1"
+            class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            Prejšnja
+          </button>
+          <button
+            @click="handlePageChange(currentPage + 1)"
+            :disabled="currentPage >= totalPages"
+            class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            Naslednja
+          </button>
+        </div>
+
+        <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+          <div>
+            <p class="text-sm text-gray-700">
+              Prikazano
+              <span class="font-medium">{{ from }}</span>
+              do
+              <span class="font-medium">{{ to }}</span>
+              od
+              <span class="font-medium">{{ total }}</span>
+              rezultatov
+            </p>
+          </div>
+          <div>
+            <nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
+              <button
+                @click="handlePageChange(currentPage - 1)"
+                :disabled="currentPage <= 1"
+                class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <span class="sr-only">Prejšnja</span>
+                <FontAwesomeIcon :icon="faChevronLeft" class="h-5 w-5" />
+              </button>
+
+              <template v-for="page in getVisiblePages()" :key="page">
+                <button
+                  v-if="page !== '...'"
+                  @click="handlePageChange(page)"
+                  :aria-current="page === currentPage ? 'page' : undefined"
+                  class="relative inline-flex items-center px-4 py-2 text-sm font-semibold focus:z-20"
+                  :class="
+                    page === currentPage
+                      ? 'z-10 bg-primary-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600'
+                      : 'text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:outline-offset-0'
+                  "
+                >
+                  {{ page }}
+                </button>
+                <span
+                  v-else
+                  class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300"
+                >
+                  ...
+                </span>
+              </template>
+
+              <button
+                @click="handlePageChange(currentPage + 1)"
+                :disabled="currentPage >= totalPages"
+                class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <span class="sr-only">Naslednja</span>
+                <FontAwesomeIcon :icon="faChevronRight" class="h-5 w-5" />
+              </button>
+            </nav>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+

resources/js/Components/DataTable/DataTablePagination.vue

@@ -0,0 +1,95 @@
+<script setup>
+import { computed } from 'vue';
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-vue-next';
+import { Button } from '@/Components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/Components/ui/select';
+
+const props = defineProps({
+  table: {
+    type: Object,
+    required: true,
+  },
+});
+
+const pageSizeOptions = computed(() => [10, 20, 30, 40, 50]);
+</script>
+
+<template>
+  <div class="flex items-center justify-between px-2">
+    <div class="flex-1 text-sm text-muted-foreground">
+      {{ table.getFilteredSelectedRowModel().rows.length }} of
+      {{ table.getFilteredRowModel().rows.length }} row(s) selected.
+    </div>
+    <div class="flex items-center space-x-6 lg:space-x-8">
+      <div class="flex items-center space-x-2">
+        <p class="text-sm font-medium">Rows per page</p>
+        <Select
+          :model-value="`${table.getState().pagination.pageSize}`"
+          @update:model-value="(value) => table.setPageSize(Number(value))"
+        >
+          <SelectTrigger class="h-8 w-[70px]">
+            <SelectValue :placeholder="`${table.getState().pagination.pageSize}`" />
+          </SelectTrigger>
+          <SelectContent side="top">
+            <SelectItem
+              v-for="pageSize in pageSizeOptions"
+              :key="pageSize"
+              :value="`${pageSize}`"
+            >
+              {{ pageSize }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div class="flex w-[100px] items-center justify-center text-sm font-medium">
+        Page {{ table.getState().pagination.pageIndex + 1 }} of
+        {{ table.getPageCount() }}
+      </div>
+      <div class="flex items-center space-x-2">
+        <Button
+          variant="outline"
+          class="hidden h-8 w-8 p-0 lg:flex"
+          :disabled="!table.getCanPreviousPage()"
+          @click="table.setPageIndex(0)"
+        >
+          <span class="sr-only">Go to first page</span>
+          <ChevronsLeft class="h-4 w-4" />
+        </Button>
+        <Button
+          variant="outline"
+          class="h-8 w-8 p-0"
+          :disabled="!table.getCanPreviousPage()"
+          @click="table.previousPage()"
+        >
+          <span class="sr-only">Go to previous page</span>
+          <ChevronLeft class="h-4 w-4" />
+        </Button>
+        <Button
+          variant="outline"
+          class="h-8 w-8 p-0"
+          :disabled="!table.getCanNextPage()"
+          @click="table.nextPage()"
+        >
+          <span class="sr-only">Go to next page</span>
+          <ChevronRight class="h-4 w-4" />
+        </Button>
+        <Button
+          variant="outline"
+          class="hidden h-8 w-8 p-0 lg:flex"
+          :disabled="!table.getCanNextPage()"
+          @click="table.setPageIndex(table.getPageCount() - 1)"
+        >
+          <span class="sr-only">Go to last page</span>
+          <ChevronsRight class="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+

resources/js/Components/DataTable/DataTableServer.vue

@@ -1,14 +1,16 @@
 <script setup>
 import { ref, watch, computed } from "vue";
 import { router } from "@inertiajs/vue3";
+import SkeletonTable from "@/Components/Skeleton/SkeletonTable.vue";
+import EmptyState from "@/Components/EmptyState.vue";
 import {
-  FwbTable,
-  FwbTableHead,
-  FwbTableHeadCell,
-  FwbTableBody,
-  FwbTableRow,
-  FwbTableCell,
-} from "flowbite-vue";
+  Table,
+  TableHeader,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableCell,
+} from "@/Components/ui/table";
 
 const props = defineProps({
   columns: { type: Array, required: true }, // [{ key, label, sortable?, align?, class? }]
@@ -94,7 +96,8 @@ function setPageSize(ps) {
 function doRequest(overrides = {}) {
   const q = {
     ...props.query,
-    perPage: overrides.perPage ?? props.meta?.per_page ?? props.pageSize ?? 10,
+    // Laravel expects snake_case per_page
+    per_page: overrides.perPage ?? props.meta?.per_page ?? props.pageSize ?? 10,
     sort: overrides.sort ?? props.sort?.key ?? null,
     direction: overrides.direction ?? props.sort?.direction ?? null,
     search: overrides.search ?? props.search ?? "",
@@ -198,15 +201,12 @@ function goToPageInput() {
     <div
       class="relative overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm"
     >
-      <FwbTable hoverable striped class="text-sm">
-        <FwbTableHead
+      <Table class="text-sm">
+        <TableHeader
           class="sticky top-0 z-10 bg-gray-50/90 backdrop-blur border-b border-gray-200 shadow-sm"
         >
-          <FwbTableHeadCell v-for="col in columns" :key="col.key" :class="col.class">
-            <template v-if="$slots['header-' + col.key]">
-              <slot :name="'header-' + col.key" :column="col" />
-            </template>
-            <template v-else>
+          <TableRow class="border-b">
+            <TableHead v-for="col in columns" :key="col.key" :class="col.class">
               <button
                 v-if="col.sortable"
                 type="button"
@@ -221,24 +221,23 @@ function goToPageInput() {
                 >
               </button>
               <span v-else>{{ col.label }}</span>
-            </template>
-          </FwbTableHeadCell>
-          <FwbTableHeadCell v-if="$slots.actions" class="w-px">&nbsp;</FwbTableHeadCell>
-        </FwbTableHead>
+            </TableHead>
+            <TableHead v-if="$slots.actions" class="w-px">&nbsp;</TableHead>
+          </TableRow>
+        </TableHeader>
 
-        <FwbTableBody>
+        <TableBody>
           <template v-if="!loading && rows.length">
-            <FwbTableRow
+            <TableRow
               v-for="(row, idx) in rows"
               :key="keyOf(row)"
               @click="$emit('row:click', row)"
-              class="cursor-default"
+              class="cursor-default hover:bg-gray-50/50"
             >
-              <FwbTableCell
+              <TableCell
                 v-for="col in columns"
                 :key="col.key"
                 :class="col.class"
-                :align="col.align || 'left'"
               >
                 <template v-if="$slots['cell-' + col.key]">
                   <slot
@@ -261,30 +260,30 @@ function goToPageInput() {
                 <template v-else>
                   {{ row?.[col.key] ?? "" }}
                 </template>
-              </FwbTableCell>
-              <FwbTableCell v-if="$slots.actions" class="w-px text-right">
+              </TableCell>
+              <TableCell v-if="$slots.actions" class="w-px text-right">
                 <slot name="actions" :row="row" :index="idx" />
-              </FwbTableCell>
-            </FwbTableRow>
+              </TableCell>
+            </TableRow>
           </template>
           <template v-else-if="loading">
-            <FwbTableRow>
-              <FwbTableCell :colspan="columns.length + ($slots.actions ? 1 : 0)">
-                <div class="p-6 text-center text-gray-500">Nalagam...</div>
-              </FwbTableCell>
-            </FwbTableRow>
+            <TableRow>
+              <TableCell :colspan="columns.length + ($slots.actions ? 1 : 0)">
+                <SkeletonTable :rows="5" :cols="columns.length" />
+              </TableCell>
+            </TableRow>
           </template>
           <template v-else>
-            <FwbTableRow>
-              <FwbTableCell :colspan="columns.length + ($slots.actions ? 1 : 0)">
+            <TableRow>
+              <TableCell :colspan="columns.length + ($slots.actions ? 1 : 0)">
                 <slot name="empty">
                   <div class="p-6 text-center text-gray-500">{{ emptyText }}</div>
                 </slot>
-              </FwbTableCell>
-            </FwbTableRow>
+              </TableCell>
+            </TableRow>
           </template>
-        </FwbTableBody>
-      </FwbTable>
+        </TableBody>
+      </Table>
     </div>
 
     <nav

resources/js/Components/DataTable/DataTableToolbar.vue

@@ -0,0 +1,182 @@
+<script setup>
+import { computed, ref } from "vue";
+import { X, Settings2 } from "lucide-vue-next";
+import { Input } from "@/Components/ui/input";
+import { Button } from "@/Components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/Components/ui/select";
+import { Popover, PopoverContent, PopoverTrigger } from "@/Components/ui/popover";
+import DataTableViewOptions from "./DataTableViewOptions.vue";
+
+/**
+ * DataTable Toolbar Component
+ * Simplified toolbar following shadcn-vue patterns for TanStack Table integration
+ */
+
+const props = defineProps({
+  // TanStack Table instance
+  table: {
+    type: Object,
+    required: true,
+  },
+  // Column to filter on (e.g., 'email', 'name')
+  filterColumn: {
+    type: String,
+    default: null,
+  },
+  // Placeholder text for filter input
+  filterPlaceholder: {
+    type: String,
+    default: "Filter...",
+  },
+  // Show view options (column visibility toggle)
+  showViewOptions: {
+    type: Boolean,
+    default: true,
+  },
+  // Show per-page selector
+  showPerPageSelector: {
+    type: Boolean,
+    default: false,
+  },
+  // Current per page value
+  perPage: {
+    type: Number,
+    default: 15,
+  },
+  // Per page options
+  pageSizeOptions: {
+    type: Array,
+    default: () => [10, 15, 25, 50, 100],
+  },
+});
+
+const emit = defineEmits(["update:perPage"]);
+
+// Popover state
+const settingsPopoverOpen = ref(false);
+
+// Check if any filters are active
+const isFiltered = computed(() => {
+  if (!props.filterColumn) return false;
+  const column = props.table.getColumn(props.filterColumn);
+  return column && column.getFilterValue();
+});
+
+// Get/set filter value
+const filterValue = computed({
+  get() {
+    if (!props.filterColumn) return "";
+    const column = props.table.getColumn(props.filterColumn);
+    return column?.getFilterValue() ?? "";
+  },
+  set(value) {
+    if (!props.filterColumn) return;
+    const column = props.table.getColumn(props.filterColumn);
+    column?.setFilterValue(value);
+  },
+});
+
+// Reset all filters
+function resetFilters() {
+  props.table.resetColumnFilters();
+}
+</script>
+
+<template>
+  <div class="flex items-center justify-between">
+    <!-- Left side: Search and Filters -->
+    <div class="flex flex-1 items-center space-x-2">
+      <!-- Filter Input -->
+      <Input
+        v-if="filterColumn"
+        v-model="filterValue"
+        :placeholder="filterPlaceholder"
+        class="h-8 w-[150px] lg:w-[250px]"
+      />
+
+      <!-- Custom filter slots -->
+      <slot name="filters" :table="table" />
+
+      <!-- Reset filters button -->
+      <Button
+        v-if="isFiltered"
+        variant="ghost"
+        @click="resetFilters"
+        class="h-8 px-2 lg:px-3"
+      >
+        Reset
+        <X class="ml-2 h-4 w-4" />
+      </Button>
+    </div>
+
+    <!-- Right side: Actions and View Options -->
+    <div class="flex items-center space-x-2">
+      <!-- Custom action slots -->
+      <slot name="actions" :table="table" />
+
+      <!-- Settings Popover (Per-page selector + View Options) -->
+      <Popover v-model:open="settingsPopoverOpen">
+        <PopoverTrigger as-child>
+          <Button variant="outline" size="sm" class="gap-2">
+            <Settings2 class="h-4 w-4" />
+            Pogled
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent class="w-[300px]" align="end">
+          <div class="space-y-4">
+            <div class="space-y-2">
+              <h4 class="font-medium text-sm">Nastavitve pogleda</h4>
+            </div>
+
+            <div class="space-y-3">
+              <!-- Per page selector -->
+              <div
+                v-if="showPerPageSelector"
+                class="flex items-center justify-between gap-4"
+              >
+                <label class="text-sm whitespace-nowrap">Elementov na stran</label>
+                <Select
+                  :model-value="String(perPage)"
+                  @update:model-value="
+                    (value) => {
+                      emit('update:perPage', Number(value));
+                      settingsPopoverOpen = false;
+                    }
+                  "
+                >
+                  <SelectTrigger class="h-9 w-[70px]">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent align="end">
+                    <SelectItem
+                      v-for="size in pageSizeOptions"
+                      :key="size"
+                      :value="String(size)"
+                    >
+                      {{ size }}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <!-- Column visibility -->
+              <div v-if="showViewOptions" class="flex items-center justify-between gap-4">
+                <label class="text-sm whitespace-nowrap">Vidnost stolpcev</label>
+                <DataTableViewOptions
+                  :table="table"
+                  @column-toggle="settingsPopoverOpen = false"
+                />
+              </div>
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  </div>
+</template>

resources/js/Components/DataTable/DataTableToolbarExample.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { ref } from 'vue';
+import DataTableToolbar from './DataTableToolbar.vue';
+
+// Example: Using DataTableToolbar standalone
+const search = ref('');
+const pageSize = ref(10);
+const selectedCount = ref(0);
+
+const handleSearchChange = (value) => {
+  search.value = value;
+  console.log('Search changed:', value);
+};
+
+const handlePageSizeChange = (value) => {
+  pageSize.value = value;
+  console.log('Page size changed:', value);
+};
+
+const handleExport = (format) => {
+  console.log('Export:', format);
+};
+
+const handleAdd = () => {
+  console.log('Add button clicked');
+};
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Standalone DataTableToolbar -->
+    <DataTableToolbar
+      :search="search"
+      :show-search="true"
+      :show-page-size="true"
+      :page-size="pageSize"
+      :selected-count="selectedCount"
+      :show-selected-count="true"
+      :show-export="true"
+      :show-add="true"
+      :show-filters="true"
+      @update:search="handleSearchChange"
+      @update:page-size="handlePageSizeChange"
+      @export="handleExport"
+    >
+      <!-- Add button dropdown content -->
+      <template #add>
+        <button
+          @click="handleAdd"
+          class="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50"
+        >
+          Dodaj novo
+        </button>
+      </template>
+
+      <!-- Custom options -->
+      <template #options>
+        <button class="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded">
+          Opcija 1
+        </button>
+      </template>
+
+      <!-- Filters -->
+      <template #filters>
+        <div class="space-y-2">
+          <label class="text-sm font-medium">Filtriraj po:</label>
+          <input type="text" class="w-full px-2 py-1 border rounded" />
+        </div>
+      </template>
+
+      <!-- Custom actions -->
+      <template #actions>
+        <button class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded">
+          Akcija
+        </button>
+      </template>
+    </DataTableToolbar>
+
+    <!-- Your content here -->
+    <div class="p-4 bg-gray-50 rounded">
+      <p>Search: {{ search }}</p>
+      <p>Page Size: {{ pageSize }}</p>
+      <p>Selected: {{ selectedCount }}</p>
+    </div>
+  </div>
+</template>

resources/js/Components/DataTable/DataTableViewOptions.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { computed } from "vue";
+import { Settings } from "lucide-vue-next";
+import { Button } from "@/Components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/Components/ui/dropdown-menu";
+
+const props = defineProps({
+  table: {
+    type: Object,
+    required: true,
+  },
+});
+
+const columns = computed(() =>
+  props.table
+    .getAllColumns()
+    .filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide())
+);
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="outline" size="sm" class="ml-auto hidden h-8 lg:flex">
+        <Settings class="mr-2 h-4 w-4" />
+        Pogled
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end" class="w-[150px]">
+      <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuCheckboxItem
+        v-for="column in columns"
+        :key="column.id"
+        class="capitalize"
+        :model-value="column.getIsVisible()"
+        @update:model-value="(value) => column.toggleVisibility(!!value)"
+      >
+        {{ column.id }}
+      </DropdownMenuCheckboxItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>

resources/js/Components/DataTable/MIGRATION.md

@@ -0,0 +1,291 @@
+# DataTable Migration Guide
+
+## Summary of Changes
+
+The DataTable component has been updated to follow **shadcn-vue** architecture patterns using **TanStack Table v8**. This provides better flexibility, more features, and follows industry-standard patterns.
+
+## What's New
+
+### ✅ Components Created/Updated
+
+1. **`DataTableNew2.vue`** - New main component with shadcn-vue architecture
+2. **`DataTableColumnHeader.vue`** - Already good, uses lucide-vue-next icons
+3. **`DataTablePagination.vue`** - Already follows shadcn-vue patterns
+4. **`DataTableViewOptions.vue`** - Already follows shadcn-vue patterns
+5. **`DataTableToolbar.vue`** - Already exists with advanced features
+6. **`columns-example.js`** - Column definition examples
+7. **`README.md`** - Comprehensive documentation
+8. **`DataTableExample.vue`** - Working example page
+
+### ✅ Utilities Added
+
+- **`valueUpdater()`** in `lib/utils.js` - Helper for TanStack Table state management
+
+## Key Improvements
+
+### 1. **FlexRender Integration**
+Now properly uses TanStack Table's FlexRender for column headers and cells:
+```vue
+<FlexRender 
+  :render="cell.column.columnDef.cell" 
+  :props="cell.getContext()" 
+/>
+```
+
+### 2. **Better Column Definitions**
+Supports both simple and advanced formats:
+
+**Simple:**
+```javascript
+{ key: 'name', label: 'Name', sortable: true }
+```
+
+**Advanced:**
+```javascript
+{
+  accessorKey: 'name',
+  header: ({ column }) => h(DataTableColumnHeader, { column, title: 'Name' }),
+  cell: ({ row }) => h('div', {}, row.getValue('name')),
+}
+```
+
+### 3. **Enhanced Features**
+- ✅ Row selection with checkboxes
+- ✅ Column visibility toggle
+- ✅ Advanced filtering
+- ✅ Better loading/empty states
+- ✅ Custom cell slots
+- ✅ Flexible toolbar
+
+### 4. **Better State Management**
+Uses `valueUpdater()` helper for proper Vue reactivity with TanStack Table:
+```javascript
+onSortingChange: (updater) => valueUpdater(updater, sorting)
+```
+
+## Migration Steps
+
+### Step 1: Update Imports
+
+**Before:**
+```vue
+import DataTable from '@/Components/DataTable/DataTable.vue';
+```
+
+**After:**
+```vue
+import DataTable from '@/Components/DataTable/DataTableNew2.vue';
+```
+
+### Step 2: Update Props
+
+**Before:**
+```vue
+<DataTable
+  :rows="clients.data"
+  :columns="columns"
+  :meta="clients.meta"
+/>
+```
+
+**After:**
+```vue
+<DataTable
+  :data="clients.data"
+  :columns="columns"
+  :meta="clients.meta"
+  route-name="clients.index"
+/>
+```
+
+Main prop changes:
+- `rows` → `data`
+- Add `route-name` for server-side pagination
+
+### Step 3: Column Definitions
+
+Your existing simple column format still works:
+```javascript
+const columns = [
+  { key: 'id', label: 'ID', sortable: true },
+  { key: 'name', label: 'Name', sortable: true },
+];
+```
+
+But you can now use advanced format for more control:
+```javascript
+import { h } from 'vue';
+import DataTableColumnHeader from '@/Components/DataTable/DataTableColumnHeader.vue';
+
+const columns = [
+  {
+    accessorKey: 'name',
+    header: ({ column }) => h(DataTableColumnHeader, { column, title: 'Name' }),
+    cell: ({ row }) => h('div', { class: 'font-medium' }, row.getValue('name')),
+  },
+];
+```
+
+### Step 4: Custom Cell Rendering
+
+**Before:** Required editing component
+**After:** Use slots!
+
+```vue
+<DataTable :columns="columns" :data="data">
+  <template #cell-status="{ value, row }">
+    <Badge :variant="value === 'active' ? 'default' : 'secondary'">
+      {{ value }}
+    </Badge>
+  </template>
+</DataTable>
+```
+
+## Backward Compatibility
+
+The **old DataTable components are still available**:
+- `DataTable.vue` - Your current enhanced version
+- `DataTableServer.vue` - Your server-side version
+- `DataTableOld.vue` - Original version
+
+You can migrate pages gradually. Both old and new can coexist.
+
+## Example Migration
+
+### Before (Client/Index.vue)
+
+```vue
+<script setup>
+import DataTable from '@/Components/DataTable/DataTable.vue';
+
+const props = defineProps({
+  clients: Object,
+  filters: Object,
+});
+
+const columns = [
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'email', label: 'Email', sortable: true },
+];
+</script>
+
+<template>
+  <DataTable
+    :rows="clients.data"
+    :columns="columns"
+    :meta="clients.meta"
+    :search="filters.search"
+    :sort="filters.sort"
+    route-name="clients.index"
+  />
+</template>
+```
+
+### After (Using DataTableNew2)
+
+```vue
+<script setup>
+import DataTable from '@/Components/DataTable/DataTableNew2.vue';
+
+const props = defineProps({
+  clients: Object,
+  filters: Object,
+});
+
+const columns = [
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'email', label: 'Email', sortable: true },
+  { key: 'status', label: 'Status', sortable: false },
+];
+</script>
+
+<template>
+  <DataTable
+    :data="clients.data"
+    :columns="columns"
+    :meta="clients.meta"
+    :search="filters.search"
+    :sort="filters.sort"
+    route-name="clients.index"
+    filter-column="email"
+    filter-placeholder="Search clients..."
+    :only-props="['clients']"
+  >
+    <!-- Add custom cell rendering -->
+    <template #cell-status="{ value }">
+      <Badge :variant="value === 'active' ? 'default' : 'secondary'">
+        {{ value }}
+      </Badge>
+    </template>
+  </DataTable>
+</template>
+```
+
+## Testing Your Migration
+
+1. **Check the example page:**
+   ```
+   Visit: /examples/datatable
+   ```
+   (You'll need to add a route for this)
+
+2. **Test features:**
+   - ✅ Sorting (click column headers)
+   - ✅ Filtering (use search input)
+   - ✅ Pagination (navigate pages)
+   - ✅ Row selection (if enabled)
+   - ✅ Column visibility (View button)
+
+3. **Check browser console:**
+   - No errors
+   - Events firing correctly
+
+## Common Issues
+
+### Issue: "FlexRender is not defined"
+**Solution:** Make sure you imported it:
+```javascript
+import { FlexRender } from '@tanstack/vue-table';
+```
+
+### Issue: Column not sorting
+**Solution:** Make sure `sortable: true` is set:
+```javascript
+{ key: 'name', label: 'Name', sortable: true }
+```
+
+### Issue: Server-side not working
+**Solution:** Provide both `meta` and `route-name`:
+```vue
+<DataTable
+  :data="data"
+  :meta="meta"
+  route-name="your.route.name"
+/>
+```
+
+### Issue: Custom cells not rendering
+**Solution:** Use the correct slot name format:
+```vue
+<template #cell-columnKey="{ value, row }">
+  <!-- Your content -->
+</template>
+```
+
+## Need Help?
+
+1. Check `README.md` for detailed documentation
+2. Look at `columns-example.js` for column patterns
+3. Review `DataTableExample.vue` for working examples
+4. Check TanStack Table docs: https://tanstack.com/table/v8
+
+## Rollback Plan
+
+If you encounter issues, you can always use the old components:
+```vue
+import DataTable from '@/Components/DataTable/DataTable.vue';
+// or
+import DataTableServer from '@/Components/DataTable/DataTableServer.vue';
+```
+
+Nothing breaks your existing code!

resources/js/Components/DataTable/README.md

@@ -0,0 +1,390 @@
+# DataTable Component - Usage Guide
+
+This DataTable component follows the shadcn-vue architecture and uses TanStack Table v8 for powerful table functionality.
+
+## Features
+
+- ✅ Client-side and server-side pagination
+- ✅ Sorting (single column)
+- ✅ Filtering/Search
+- ✅ Row selection
+- ✅ Column visibility toggle
+- ✅ Customizable column definitions
+- ✅ Loading states
+- ✅ Empty states
+- ✅ Flexible toolbar
+- ✅ Cell-level customization via slots
+- ✅ Responsive design
+- ✅ Laravel Inertia integration
+
+## Basic Usage
+
+### Simple Format (Recommended for basic tables)
+
+```vue
+<script setup>
+import DataTable from '@/Components/DataTable/DataTableNew2.vue';
+
+const columns = [
+  { key: 'id', label: 'ID', sortable: true },
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'email', label: 'Email', sortable: true },
+  { key: 'status', label: 'Status' },
+];
+
+const data = ref([
+  { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Inactive' },
+]);
+</script>
+
+<template>
+  <DataTable :columns="columns" :data="data" />
+</template>
+```
+
+### Advanced Format (Full TanStack Table power)
+
+```vue
+<script setup>
+import { h } from 'vue';
+import DataTable from '@/Components/DataTable/DataTableNew2.vue';
+import { Badge } from '@/Components/ui/badge';
+import { columns } from './columns'; // Import from separate file
+
+const data = ref([...]);
+</script>
+
+<template>
+  <DataTable :columns="columns" :data="data" />
+</template>
+```
+
+See `columns-example.js` for comprehensive column definition examples.
+
+## Props
+
+### Data Props
+- `columns` (Array, required) - Column definitions (simple or TanStack format)
+- `data` (Array, default: []) - Array of data objects
+- `meta` (Object, default: null) - Laravel pagination meta for server-side
+- `loading` (Boolean, default: false) - Loading state
+
+### Server-side Props
+- `routeName` (String) - Laravel route name for server-side requests
+- `routeParams` (Object) - Additional route parameters
+- `pageParamName` (String, default: 'page') - Custom page parameter name
+- `onlyProps` (Array) - Inertia.js only props
+- `preserveState` (Boolean, default: true)
+- `preserveScroll` (Boolean, default: true)
+
+### Sorting & Filtering
+- `sort` (Object, default: {key: null, direction: null})
+- `search` (String, default: '')
+- `filterColumn` (String) - Column to filter on
+- `filterPlaceholder` (String, default: 'Filter...')
+
+### Pagination
+- `showPagination` (Boolean, default: true)
+- `pageSize` (Number, default: 10)
+- `pageSizeOptions` (Array, default: [10, 25, 50, 100])
+
+### Features
+- `enableRowSelection` (Boolean, default: false)
+- `showToolbar` (Boolean, default: true)
+- `striped` (Boolean, default: false)
+- `hoverable` (Boolean, default: true)
+- `rowKey` (String|Function, default: 'id')
+
+### Empty State
+- `emptyText` (String, default: 'No results.')
+- `emptyIcon` (String|Object|Array)
+- `emptyDescription` (String)
+
+## Events
+
+- `@update:search` - Emitted when search changes
+- `@update:sort` - Emitted when sort changes
+- `@update:page` - Emitted when page changes
+- `@update:pageSize` - Emitted when page size changes
+- `@row:click` - Emitted when row is clicked
+- `@selection:change` - Emitted when selection changes
+
+## Client-side Example
+
+```vue
+<script setup>
+import DataTable from '@/Components/DataTable/DataTableNew2.vue';
+
+const columns = [
+  { key: 'id', label: 'ID', sortable: true },
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'email', label: 'Email', sortable: true },
+];
+
+const data = ref([
+  // Your data here
+]);
+</script>
+
+<template>
+  <DataTable
+    :columns="columns"
+    :data="data"
+    :page-size="10"
+    filter-column="email"
+    filter-placeholder="Filter emails..."
+    enable-row-selection
+  />
+</template>
+```
+
+## Server-side Example (Laravel Inertia)
+
+### Controller
+```php
+public function index(Request $request)
+{
+    $query = Client::query();
+    
+    // Search
+    if ($request->search) {
+        $query->where('name', 'like', "%{$request->search}%")
+              ->orWhere('email', 'like', "%{$request->search}%");
+    }
+    
+    // Sort
+    if ($request->sort && $request->direction) {
+        $query->orderBy($request->sort, $request->direction);
+    }
+    
+    $clients = $query->paginate($request->per_page ?? 10);
+    
+    return Inertia::render('Clients/Index', [
+        'clients' => $clients,
+        'filters' => $request->only(['search', 'sort', 'direction']),
+    ]);
+}
+```
+
+### Vue Component
+```vue
+<script setup>
+import DataTable from '@/Components/DataTable/DataTableNew2.vue';
+
+const props = defineProps({
+  clients: Object,
+  filters: Object,
+});
+
+const columns = [
+  { key: 'id', label: 'ID', sortable: true },
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'email', label: 'Email', sortable: true },
+];
+</script>
+
+<template>
+  <DataTable
+    :columns="columns"
+    :data="clients.data"
+    :meta="clients.meta"
+    :search="filters.search"
+    :sort="{ key: filters.sort, direction: filters.direction }"
+    route-name="clients.index"
+    filter-column="email"
+    filter-placeholder="Search clients..."
+    :only-props="['clients']"
+  />
+</template>
+```
+
+## Custom Cell Rendering
+
+### Using Slots
+```vue
+<template>
+  <DataTable :columns="columns" :data="data">
+    <!-- Custom cell for status column -->
+    <template #cell-status="{ value, row }">
+      <Badge :variant="value === 'active' ? 'default' : 'secondary'">
+        {{ value }}
+      </Badge>
+    </template>
+    
+    <!-- Custom cell for actions -->
+    <template #cell-actions="{ row }">
+      <Button @click="editRow(row)">Edit</Button>
+    </template>
+  </DataTable>
+</template>
+```
+
+### Using Column Definitions
+```javascript
+import { h } from 'vue';
+import { Badge } from '@/Components/ui/badge';
+
+export const columns = [
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    cell: ({ row }) => {
+      const status = row.getValue('status');
+      return h(Badge, { 
+        variant: status === 'active' ? 'default' : 'secondary' 
+      }, () => status);
+    },
+  },
+];
+```
+
+## Custom Toolbar
+
+The new toolbar is simplified and follows shadcn-vue patterns:
+
+```vue
+<template>
+  <DataTable 
+    :columns="columns" 
+    :data="data"
+    filter-column="email"
+    filter-placeholder="Search emails..."
+  >
+    <!-- Add custom filter controls -->
+    <template #toolbar-filters="{ table }">
+      <select 
+        @change="table.getColumn('status')?.setFilterValue($event.target.value)"
+        class="h-8 rounded-md border px-3"
+      >
+        <option value="">All Status</option>
+        <option value="active">Active</option>
+        <option value="inactive">Inactive</option>
+      </select>
+    </template>
+    
+    <!-- Add custom action buttons -->
+    <template #toolbar-actions="{ table }">
+      <Button @click="exportData">Export</Button>
+      <Button @click="addNew">Add New</Button>
+    </template>
+  </DataTable>
+</template>
+```
+
+Or completely replace the toolbar:
+
+```vue
+<template>
+  <DataTable :columns="columns" :data="data" :show-toolbar="false">
+    <template #toolbar="{ table }">
+      <div class="flex items-center justify-between mb-4">
+        <Input
+          :model-value="table.getColumn('email')?.getFilterValue()"
+          @update:model-value="table.getColumn('email')?.setFilterValue($event)"
+          placeholder="Filter emails..."
+          class="max-w-sm"
+        />
+        <div class="flex gap-2">
+          <Button @click="exportData">Export</Button>
+          <DataTableViewOptions :table="table" />
+        </div>
+      </div>
+    </template>
+  </DataTable>
+</template>
+```
+
+## Row Selection
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import DataTable from '@/Components/DataTable/DataTableNew2.vue';
+
+const selectedRows = ref([]);
+
+function handleSelectionChange(keys) {
+  selectedRows.value = keys;
+  console.log('Selected rows:', keys);
+}
+</script>
+
+<template>
+  <DataTable
+    :columns="columns"
+    :data="data"
+    enable-row-selection
+    @selection:change="handleSelectionChange"
+  />
+  
+  <div v-if="selectedRows.length">
+    Selected {{ selectedRows.length }} row(s)
+  </div>
+</template>
+```
+
+## Row Click Handler
+
+```vue
+<script setup>
+function handleRowClick(row, index) {
+  console.log('Clicked row:', row);
+  // Navigate or perform action
+  router.visit(route('clients.show', row.id));
+}
+</script>
+
+<template>
+  <DataTable
+    :columns="columns"
+    :data="data"
+    @row:click="handleRowClick"
+  />
+</template>
+```
+
+## Tips
+
+1. **Column Keys**: Always use consistent keys/accessorKeys across your data
+2. **Server-side**: Always provide `meta` and `routeName` props together
+3. **Performance**: For large datasets, use server-side pagination
+4. **Styling**: Use column `class` property for custom styling
+5. **Slots**: Prefer slots for complex cell rendering over h() functions
+
+## Migration from Old DataTable
+
+### Before (Old API)
+```vue
+<DataTable
+  :rows="clients.data"
+  :columns="columns"
+  :meta="clients.meta"
+/>
+```
+
+### After (New API)
+```vue
+<DataTableNew2
+  :data="clients.data"
+  :columns="columns"
+  :meta="clients.meta"
+  route-name="clients.index"
+/>
+```
+
+Main changes:
+- `rows` → `data`
+- Added `route-name` prop for server-side
+- More consistent prop naming
+- Better TypeScript support
+- More flexible column definitions
+
+## Component Files
+
+- `DataTableNew2.vue` - Main table component
+- `DataTableColumnHeader.vue` - Sortable column header
+- `DataTablePagination.vue` - Pagination controls
+- `DataTableViewOptions.vue` - Column visibility toggle
+- `DataTableToolbar.vue` - Toolbar component
+- `columns-example.js` - Column definition examples

resources/js/Components/DataTable/StatusBadge.vue

@@ -0,0 +1,170 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  status: {
+    type: String,
+    required: true,
+  },
+  variant: {
+    type: String,
+    default: 'default', // default, dot, pill
+    validator: (v) => ['default', 'dot', 'pill'].includes(v),
+  },
+  size: {
+    type: String,
+    default: 'md', // sm, md, lg
+    validator: (v) => ['sm', 'md', 'lg'].includes(v),
+  },
+  color: {
+    type: String,
+    default: null, // If null, uses status-based colors
+    validator: (v) =>
+      !v ||
+      [
+        'gray',
+        'red',
+        'yellow',
+        'green',
+        'blue',
+        'indigo',
+        'purple',
+        'pink',
+        'amber',
+        'emerald',
+      ].includes(v),
+  },
+});
+
+// Status-based color mapping
+const statusColors = {
+  active: 'green',
+  inactive: 'gray',
+  archived: 'gray',
+  pending: 'yellow',
+  completed: 'green',
+  failed: 'red',
+  success: 'green',
+  error: 'red',
+  warning: 'yellow',
+  info: 'blue',
+  draft: 'gray',
+  published: 'green',
+};
+
+const badgeColor = computed(() => {
+  if (props.color) return props.color;
+  const lowerStatus = props.status.toLowerCase();
+  return statusColors[lowerStatus] || 'gray';
+});
+
+const sizeClasses = {
+  sm: {
+    text: 'text-xs',
+    padding: 'px-2 py-0.5',
+    dot: 'w-1.5 h-1.5',
+  },
+  md: {
+    text: 'text-sm',
+    padding: 'px-2.5 py-1',
+    dot: 'w-2 h-2',
+  },
+  lg: {
+    text: 'text-base',
+    padding: 'px-3 py-1.5',
+    dot: 'w-2.5 h-2.5',
+  },
+};
+
+const colorClasses = {
+  gray: {
+    bg: 'bg-gray-100',
+    text: 'text-gray-800',
+    dot: 'bg-gray-500',
+    border: 'border-gray-300',
+  },
+  red: {
+    bg: 'bg-red-100',
+    text: 'text-red-800',
+    dot: 'bg-red-500',
+    border: 'border-red-300',
+  },
+  yellow: {
+    bg: 'bg-yellow-100',
+    text: 'text-yellow-800',
+    dot: 'bg-yellow-500',
+    border: 'border-yellow-300',
+  },
+  green: {
+    bg: 'bg-green-100',
+    text: 'text-green-800',
+    dot: 'bg-green-500',
+    border: 'border-green-300',
+  },
+  blue: {
+    bg: 'bg-blue-100',
+    text: 'text-blue-800',
+    dot: 'bg-blue-500',
+    border: 'border-blue-300',
+  },
+  indigo: {
+    bg: 'bg-indigo-100',
+    text: 'text-indigo-800',
+    dot: 'bg-indigo-500',
+    border: 'border-indigo-300',
+  },
+  purple: {
+    bg: 'bg-purple-100',
+    text: 'text-purple-800',
+    dot: 'bg-purple-500',
+    border: 'border-purple-300',
+  },
+  pink: {
+    bg: 'bg-pink-100',
+    text: 'text-pink-800',
+    dot: 'bg-pink-500',
+    border: 'border-pink-300',
+  },
+  amber: {
+    bg: 'bg-amber-100',
+    text: 'text-amber-800',
+    dot: 'bg-amber-500',
+    border: 'border-amber-300',
+  },
+  emerald: {
+    bg: 'bg-emerald-100',
+    text: 'text-emerald-800',
+    dot: 'bg-emerald-500',
+    border: 'border-emerald-300',
+  },
+};
+
+const colors = computed(() => colorClasses[badgeColor.value] || colorClasses.gray);
+const sizes = computed(() => sizeClasses[props.size] || sizeClasses.md);
+</script>
+
+<template>
+  <span
+    :class="[
+      'inline-flex items-center font-medium',
+      sizes.text,
+      sizes.padding,
+      colors.bg,
+      colors.text,
+      variant === 'pill' ? 'rounded-full' : 'rounded-md',
+      variant === 'default' ? `border ${colors.border}` : '',
+    ]"
+  >
+    <span
+      v-if="variant === 'dot'"
+      :class="[
+        'rounded-full mr-1.5',
+        sizes.dot,
+        colors.dot,
+      ]"
+    ></span>
+    <slot>{{ status }}</slot>
+  </span>
+</template>
+
+

resources/js/Components/DataTable/TableActions.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { ref } from "vue";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/Components/ui/dropdown-menu";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { faEllipsisVertical } from "@fortawesome/free-solid-svg-icons";
+import Button from "../ui/button/Button.vue";
+
+const props = defineProps({
+  align: {
+    type: String,
+    default: "right", // left, right
+    validator: (v) => ["left", "right"].includes(v),
+  },
+  size: {
+    type: String,
+    default: "md", // sm, md
+    validator: (v) => ["sm", "md"].includes(v),
+  },
+});
+
+const sizeClasses = {
+  sm: "h-6 w-6",
+  md: "h-8 w-8",
+};
+
+const emit = defineEmits(["action"]);
+
+function handleAction(action) {
+  emit("action", action);
+  if (action.onClick) {
+    action.onClick();
+  }
+}
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="ghost" size="icon" aria-label="Actions">
+        <FontAwesomeIcon :icon="faEllipsisVertical" class="h-4 w-4" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent :align="align === 'right' ? 'end' : 'start'" class="py-1">
+      <slot :handle-action="handleAction" />
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>

resources/js/Components/DataTable/columns-example.js

@@ -0,0 +1,267 @@
+import { h } from 'vue';
+import { Badge } from '@/Components/ui/badge';
+import { Button } from '@/Components/ui/button';
+import { Checkbox } from '@/Components/ui/checkbox';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/Components/ui/dropdown-menu';
+import { MoreHorizontal, ArrowUpDown } from 'lucide-vue-next';
+
+/**
+ * Example columns definition following shadcn-vue DataTable patterns
+ * 
+ * Usage:
+ * import { columns } from './columns'
+ * <DataTable :columns="columns" :data="data" />
+ * 
+ * This is a TypeScript-like example for JavaScript.
+ * The columns follow TanStack Table's ColumnDef format.
+ */
+
+/**
+ * Simple format - automatically converted to ColumnDef
+ * Use this for basic tables
+ */
+export const simpleColumns = [
+  { key: 'id', label: 'ID', sortable: true },
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'email', label: 'Email', sortable: true },
+  { key: 'status', label: 'Status', sortable: false },
+];
+
+/**
+ * Advanced format - full TanStack Table ColumnDef
+ * Use this for custom rendering, formatting, etc.
+ */
+export const advancedColumns = [
+  // Selection column (added automatically if enableRowSelection prop is true)
+  // {
+  //   id: 'select',
+  //   header: ({ table }) => {
+  //     return h(Checkbox, {
+  //       modelValue: table.getIsAllPageRowsSelected(),
+  //       indeterminate: table.getIsSomePageRowsSelected(),
+  //       'onUpdate:modelValue': (value) => table.toggleAllPageRowsSelected(!!value),
+  //       'aria-label': 'Select all',
+  //     });
+  //   },
+  //   cell: ({ row }) => {
+  //     return h(Checkbox, {
+  //       modelValue: row.getIsSelected(),
+  //       'onUpdate:modelValue': (value) => row.toggleSelected(!!value),
+  //       'aria-label': 'Select row',
+  //     });
+  //   },
+  //   enableSorting: false,
+  //   enableHiding: false,
+  // },
+
+  // ID column
+  {
+    accessorKey: 'id',
+    header: ({ column }) => {
+      return h(
+        Button,
+        {
+          variant: 'ghost',
+          onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
+        },
+        () => ['ID', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })]
+      );
+    },
+    cell: ({ row }) => {
+      return h('div', { class: 'w-20 font-medium' }, row.getValue('id'));
+    },
+  },
+
+  // Name column
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    cell: ({ row }) => {
+      return h('div', { class: 'font-medium' }, row.getValue('name'));
+    },
+  },
+
+  // Email column with custom rendering
+  {
+    accessorKey: 'email',
+    header: ({ column }) => {
+      return h(
+        Button,
+        {
+          variant: 'ghost',
+          onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
+        },
+        () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })]
+      );
+    },
+    cell: ({ row }) => {
+      return h('div', { class: 'lowercase' }, row.getValue('email'));
+    },
+  },
+
+  // Amount column with formatting
+  {
+    accessorKey: 'amount',
+    header: () => h('div', { class: 'text-right' }, 'Amount'),
+    cell: ({ row }) => {
+      const amount = parseFloat(row.getValue('amount'));
+      const formatted = new Intl.NumberFormat('sl-SI', {
+        style: 'currency',
+        currency: 'EUR',
+      }).format(amount);
+
+      return h('div', { class: 'text-right font-medium' }, formatted);
+    },
+  },
+
+  // Status column with badge
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    cell: ({ row }) => {
+      const status = row.getValue('status');
+      const variants = {
+        success: 'default',
+        pending: 'secondary',
+        failed: 'destructive',
+      };
+
+      return h(
+        Badge,
+        {
+          variant: variants[status] || 'outline',
+        },
+        () => status
+      );
+    },
+  },
+
+  // Actions column
+  {
+    id: 'actions',
+    enableHiding: false,
+    cell: ({ row }) => {
+      const item = row.original;
+
+      return h(
+        'div',
+        { class: 'text-right' },
+        h(
+          DropdownMenu,
+          {},
+          {
+            default: () => [
+              h(
+                DropdownMenuTrigger,
+                { asChild: true },
+                {
+                  default: () =>
+                    h(
+                      Button,
+                      {
+                        variant: 'ghost',
+                        class: 'h-8 w-8 p-0',
+                      },
+                      {
+                        default: () => [
+                          h('span', { class: 'sr-only' }, 'Open menu'),
+                          h(MoreHorizontal, { class: 'h-4 w-4' }),
+                        ],
+                      }
+                    ),
+                }
+              ),
+              h(
+                DropdownMenuContent,
+                { align: 'end' },
+                {
+                  default: () => [
+                    h(DropdownMenuLabel, {}, () => 'Actions'),
+                    h(
+                      DropdownMenuItem,
+                      {
+                        onClick: () => navigator.clipboard.writeText(item.id),
+                      },
+                      () => 'Copy ID'
+                    ),
+                    h(DropdownMenuSeparator),
+                    h(DropdownMenuItem, {}, () => 'View details'),
+                    h(DropdownMenuItem, {}, () => 'Edit'),
+                  ],
+                }
+              ),
+            ],
+          }
+        )
+      );
+    },
+  },
+];
+
+/**
+ * Payments example from shadcn-vue docs
+ */
+export const paymentColumns = [
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    cell: ({ row }) => {
+      const status = row.getValue('status');
+      return h('div', { class: 'capitalize' }, status);
+    },
+  },
+  {
+    accessorKey: 'email',
+    header: ({ column }) => {
+      return h(
+        Button,
+        {
+          variant: 'ghost',
+          onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
+        },
+        () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })]
+      );
+    },
+    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
+  },
+  {
+    accessorKey: 'amount',
+    header: () => h('div', { class: 'text-right' }, 'Amount'),
+    cell: ({ row }) => {
+      const amount = parseFloat(row.getValue('amount'));
+      const formatted = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+      }).format(amount);
+      return h('div', { class: 'text-right font-medium' }, formatted);
+    },
+  },
+];
+
+/**
+ * Example with custom cell slots
+ * Use template slots in your component:
+ * 
+ * <DataTable :columns="columnsWithSlots" :data="data">
+ *   <template #cell-status="{ value }">
+ *     <Badge :variant="value === 'active' ? 'default' : 'secondary'">
+ *       {{ value }}
+ *     </Badge>
+ *   </template>
+ * </DataTable>
+ */
+export const columnsWithSlots = [
+  { key: 'id', label: 'ID', sortable: true },
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'status', label: 'Status', sortable: false }, // Will use #cell-status slot
+  { key: 'email', label: 'Email', sortable: true },
+];
+
+export default advancedColumns;

resources/js/Components/DatePicker.vue

@@ -0,0 +1,141 @@
+<script setup>
+import { computed, ref } from "vue";
+import { Button } from "@/Components/ui/button";
+import { Calendar } from "@/Components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/Components/ui/popover";
+import { cn } from "@/lib/utils";
+import { CalendarIcon } from "lucide-vue-next";
+import { format } from "date-fns";
+import { sl } from "date-fns/locale";
+import { CalendarDate, parseDate } from "@internationalized/date";
+
+const props = defineProps({
+  modelValue: {
+    type: [Date, String, null],
+    default: null,
+  },
+  placeholder: {
+    type: String,
+    default: "Izberi datum",
+  },
+  format: {
+    type: String,
+    default: "dd.MM.yyyy",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  id: {
+    type: String,
+    default: undefined,
+  },
+  error: {
+    type: [String, Array],
+    default: undefined,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+// Convert string/Date to CalendarDate
+const toCalendarDate = (value) => {
+  if (!value) return null;
+  let dateObj;
+  if (value instanceof Date) {
+    dateObj = value;
+  } else if (typeof value === "string") {
+    // Handle YYYY-MM-DD format
+    if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+      try {
+        const [year, month, day] = value.split("-").map(Number);
+        return new CalendarDate(year, month, day);
+      } catch {
+        dateObj = new Date(value);
+      }
+    } else {
+      dateObj = new Date(value);
+    }
+  } else {
+    return null;
+  }
+
+  if (dateObj && !isNaN(dateObj.getTime())) {
+    return new CalendarDate(
+      dateObj.getFullYear(),
+      dateObj.getMonth() + 1,
+      dateObj.getDate()
+    );
+  }
+  return null;
+};
+
+// Convert CalendarDate to ISO string (YYYY-MM-DD)
+const fromCalendarDate = (calendarDate) => {
+  if (!calendarDate) return null;
+  return `${String(calendarDate.year).padStart(4, "0")}-${String(calendarDate.month).padStart(2, "0")}-${String(calendarDate.day).padStart(2, "0")}`;
+};
+
+const calendarDate = computed({
+  get: () => toCalendarDate(props.modelValue),
+  set: (value) => {
+    const isoString = fromCalendarDate(value);
+    emit("update:modelValue", isoString);
+  },
+});
+
+// Format for display
+const formattedDate = computed(() => {
+  if (!calendarDate.value) return props.placeholder;
+  try {
+    const dateObj = new Date(
+      calendarDate.value.year,
+      calendarDate.value.month - 1,
+      calendarDate.value.day
+    );
+    const formatMap = {
+      "dd.MM.yyyy": "dd.MM.yyyy",
+      "yyyy-MM-dd": "yyyy-MM-dd",
+    };
+    const dateFormat = formatMap[props.format] || "dd.MM.yyyy";
+    return format(dateObj, dateFormat, { locale: sl });
+  } catch {
+    return props.placeholder;
+  }
+});
+
+const open = ref(false);
+</script>
+
+<template>
+  <Popover v-model:open="open">
+    <PopoverTrigger as-child>
+      <Button
+        :id="id"
+        variant="outline"
+        :class="
+          cn(
+            'w-full justify-start text-left font-normal',
+            !calendarDate && 'text-muted-foreground',
+            error && 'border-red-500 focus:border-red-500 focus:ring-red-500'
+          )
+        "
+        :disabled="disabled"
+      >
+        <CalendarIcon class="mr-2 h-4 w-4" />
+        {{ formattedDate }}
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-0" align="start">
+      <Calendar v-model="calendarDate" :disabled="disabled" />
+    </PopoverContent>
+  </Popover>
+  <p v-if="error" class="mt-1 text-sm text-red-600">
+    {{ Array.isArray(error) ? error[0] : error }}
+  </p>
+</template>
+

resources/js/Components/DateRangePicker.vue

@@ -0,0 +1,231 @@
+<script setup>
+import { computed, ref } from "vue";
+import { Button } from "@/Components/ui/button";
+import { RangeCalendar } from "@/Components/ui/range-calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/Components/ui/popover";
+import { cn } from "@/lib/utils";
+import { CalendarIcon } from "lucide-vue-next";
+import { format } from "date-fns";
+import { sl } from "date-fns/locale";
+import { CalendarDate } from "@internationalized/date";
+import { DateFormatter, getLocalTimeZone } from "@internationalized/date";
+
+const props = defineProps({
+  modelValue: {
+    type: [Object, null],
+    default: null,
+  },
+  placeholder: {
+    type: String,
+    default: "Izberi datumski obseg",
+  },
+  format: {
+    type: String,
+    default: "dd.MM.yyyy",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  id: {
+    type: String,
+    default: undefined,
+  },
+  error: {
+    type: [String, Array],
+    default: undefined,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+// Convert string dates to CalendarDate objects
+const toCalendarDate = (val) => {
+  if (!val) return null;
+  if (val instanceof Date) {
+    return new CalendarDate(
+      val.getFullYear(),
+      val.getMonth() + 1,
+      val.getDate()
+    );
+  }
+  if (typeof val === "string") {
+    if (/^\d{4}-\d{2}-\d{2}$/.test(val)) {
+      const [year, month, day] = val.split("-").map(Number);
+      return new CalendarDate(year, month, day);
+    }
+    const dateObj = new Date(val);
+    if (!isNaN(dateObj.getTime())) {
+      return new CalendarDate(
+        dateObj.getFullYear(),
+        dateObj.getMonth() + 1,
+        dateObj.getDate()
+      );
+    }
+  }
+  return null;
+};
+
+// Convert CalendarDate to ISO string (YYYY-MM-DD)
+const fromCalendarDate = (calendarDate) => {
+  if (!calendarDate) return null;
+  return `${String(calendarDate.year).padStart(4, "0")}-${String(calendarDate.month).padStart(2, "0")}-${String(calendarDate.day).padStart(2, "0")}`;
+};
+
+// Convert ISO string range to DateRange (CalendarDate objects)
+const toDateRange = (value) => {
+  if (!value) return { start: null, end: null };
+  const start = toCalendarDate(value.start);
+  const end = toCalendarDate(value.end);
+  // Always return an object, even if both are null
+  return { start: start || null, end: end || null };
+};
+
+// Convert DateRange to ISO string range
+const fromDateRange = (dateRange) => {
+  if (!dateRange || (!dateRange.start && !dateRange.end)) return null;
+  const start = fromCalendarDate(dateRange.start);
+  const end = fromCalendarDate(dateRange.end);
+  // Return null if both dates are null/empty
+  if (!start && !end) return null;
+  return {
+    start: start || null,
+    end: end || null,
+  };
+};
+
+// Date formatter for display
+const df = new DateFormatter("sl-SI", {
+  dateStyle: "short",
+});
+
+const dateRange = computed({
+  get: () => {
+    const range = toDateRange(props.modelValue);
+    // RangeCalendar expects an object with start and end, not null
+    return range || { start: null, end: null };
+  },
+  set: (value) => {
+    // Only emit if value has actual dates, otherwise emit null
+    if (value && (value.start || value.end)) {
+      const isoRange = fromDateRange(value);
+      emit("update:modelValue", isoRange);
+    } else {
+      emit("update:modelValue", null);
+    }
+  },
+});
+
+// Format for display using DateRange (CalendarDate objects)
+const formattedDateRange = computed(() => {
+  const range = dateRange.value;
+  if (!range || (!range.start && !range.end)) {
+    return props.placeholder;
+  }
+  
+  try {
+    if (range.start && range.end) {
+      // Use DateFormatter if available, otherwise fall back to date-fns
+      try {
+        const startStr = df.format(range.start.toDate(getLocalTimeZone()));
+        const endStr = df.format(range.end.toDate(getLocalTimeZone()));
+        return `${startStr} - ${endStr}`;
+      } catch {
+        // Fallback to date-fns
+        const formatDate = (calendarDate) => {
+          if (!calendarDate) return "";
+          const dateObj = new Date(
+            calendarDate.year,
+            calendarDate.month - 1,
+            calendarDate.day
+          );
+          const formatMap = {
+            "dd.MM.yyyy": "dd.MM.yyyy",
+            "yyyy-MM-dd": "yyyy-MM-dd",
+          };
+          const dateFormat = formatMap[props.format] || "dd.MM.yyyy";
+          return format(dateObj, dateFormat, { locale: sl });
+        };
+        return `${formatDate(range.start)} - ${formatDate(range.end)}`;
+      }
+    }
+    if (range.start) {
+      try {
+        return df.format(range.start.toDate(getLocalTimeZone()));
+      } catch {
+        const dateObj = new Date(
+          range.start.year,
+          range.start.month - 1,
+          range.start.day
+        );
+        return format(dateObj, props.format || "dd.MM.yyyy", { locale: sl });
+      }
+    }
+    if (range.end) {
+      try {
+        return df.format(range.end.toDate(getLocalTimeZone()));
+      } catch {
+        const dateObj = new Date(
+          range.end.year,
+          range.end.month - 1,
+          range.end.day
+        );
+        return format(dateObj, props.format || "dd.MM.yyyy", { locale: sl });
+      }
+    }
+    
+    return props.placeholder;
+  } catch {
+    return props.placeholder;
+  }
+});
+
+const open = ref(false);
+</script>
+
+<template>
+  <Popover v-model:open="open">
+    <PopoverTrigger as-child>
+      <Button
+        :id="id"
+        variant="outline"
+        :class="
+          cn(
+            'w-full justify-start text-left font-normal',
+            (!props.modelValue?.start && !props.modelValue?.end) && 'text-muted-foreground',
+            error && 'border-red-500 focus:border-red-500 focus:ring-red-500'
+          )
+        "
+        :disabled="disabled"
+      >
+        <CalendarIcon class="mr-2 h-4 w-4" />
+        <template v-if="dateRange?.start">
+          <template v-if="dateRange.end">
+            {{ formattedDateRange }}
+          </template>
+          <template v-else>
+            {{ formattedDateRange }}
+          </template>
+        </template>
+        <template v-else>
+          {{ props.placeholder }}
+        </template>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-0" align="start">
+      <RangeCalendar
+        v-model="dateRange"
+        :disabled="disabled"
+        :initial-focus="true"
+        :number-of-months="2"
+      />
+    </PopoverContent>
+  </Popover>
+  <p v-if="error" class="mt-1 text-sm text-red-600">
+    {{ Array.isArray(error) ? error[0] : error }}
+  </p>
+</template>

resources/js/Components/DialogModal.vue

@@ -1,9 +1,15 @@
 <script setup>
-import Modal from './Modal.vue';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/Components/ui/dialog';
+import { computed, ref, watch } from 'vue';
 
-const emit = defineEmits(['close']);
-
-defineProps({
+const props = defineProps({
   show: {
     type: Boolean,
     default: false,
@@ -18,30 +24,53 @@ defineProps({
   },
 });
 
-const close = () => {
+const emit = defineEmits(['update:show', 'close']);
+
+const open = ref(props.show);
+
+watch(() => props.show, (newVal) => {
+  open.value = newVal;
+});
+
+watch(open, (newVal) => {
+  emit('update:show', newVal);
+  if (!newVal) {
     emit('close');
+  }
+});
+
+const maxWidthClass = computed(() => {
+  const maxWidthMap = {
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-md',
+    lg: 'sm:max-w-lg',
+    xl: 'sm:max-w-xl',
+    '2xl': 'sm:max-w-2xl',
+    wide: 'sm:max-w-[1200px]',
   };
+  return maxWidthMap[props.maxWidth] || 'sm:max-w-2xl';
+});
 </script>
 
 <template>
-    <Modal
-        :show="show"
-        :max-width="maxWidth"
-        :closeable="closeable"
-        @close="close"
-    >
-        <div class="px-6 py-4">
-            <div class="text-lg font-medium text-gray-900">
+  <Dialog v-model:open="open" :modal="true">
+    <DialogContent :class="maxWidthClass">
+      <DialogHeader>
+        <DialogTitle>
           <slot name="title" />
-            </div>
+        </DialogTitle>
+        <DialogDescription>
+          <slot name="description" />
+        </DialogDescription>
+      </DialogHeader>
 
-            <div class="mt-4 text-sm text-gray-600">
+      <div class="py-4">
         <slot name="content" />
       </div>
-        </div>
 
-        <div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-end">
+      <DialogFooter>
         <slot name="footer" />
-        </div>
-    </Modal>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
 </template>

resources/js/Components/Dialogs/ConfirmationDialog.vue

@@ -0,0 +1,111 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/Components/ui/dialog';
+import { Button } from '@/Components/ui/button';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faCircleQuestion, faCheckCircle } from '@fortawesome/free-solid-svg-icons';
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  title: { type: String, default: 'Potrditev' },
+  message: { type: String, default: 'Ali ste prepričani?' },
+  confirmText: { type: String, default: 'Potrdi' },
+  cancelText: { type: String, default: 'Prekliči' },
+  processing: { type: Boolean, default: false },
+  maxWidth: { type: String, default: 'md' },
+  variant: { 
+    type: String, 
+    default: 'default', // 'default' or 'success'
+    validator: (v) => ['default', 'success'].includes(v)
+  },
+});
+
+const emit = defineEmits(['update:show', 'close', 'confirm']);
+
+const open = ref(props.show);
+
+watch(() => props.show, (newVal) => {
+  open.value = newVal;
+});
+
+watch(open, (newVal) => {
+  emit('update:show', newVal);
+  if (!newVal) {
+    emit('close');
+  }
+});
+
+const onClose = () => {
+  open.value = false;
+};
+
+const onConfirm = () => {
+  emit('confirm');
+};
+
+const icon = computed(() => props.variant === 'success' ? faCheckCircle : faCircleQuestion);
+const iconColor = computed(() => props.variant === 'success' ? 'text-green-600' : 'text-primary-600');
+const iconBg = computed(() => props.variant === 'success' ? 'bg-green-100' : 'bg-primary-100');
+
+const maxWidthClass = computed(() => {
+  const maxWidthMap = {
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-md',
+    lg: 'sm:max-w-lg',
+    xl: 'sm:max-w-xl',
+    '2xl': 'sm:max-w-2xl',
+    wide: 'sm:max-w-[1200px]',
+  };
+  return maxWidthMap[props.maxWidth] || 'sm:max-w-md';
+});
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogContent :class="maxWidthClass">
+      <DialogHeader>
+        <DialogTitle>
+          <div class="flex items-center gap-2">
+            <FontAwesomeIcon :icon="icon" :class="['h-5 w-5', iconColor]" />
+            <span>{{ title }}</span>
+          </div>
+        </DialogTitle>
+        <DialogDescription>
+          <div class="flex items-start gap-4 pt-4">
+            <div class="flex-shrink-0">
+              <div :class="['flex items-center justify-center h-12 w-12 rounded-full', iconBg]">
+                <FontAwesomeIcon :icon="icon" :class="['h-6 w-6', iconColor]" />
+              </div>
+            </div>
+            <div class="flex-1">
+              <p class="text-sm text-gray-700">
+                {{ message }}
+              </p>
+              <slot />
+            </div>
+          </div>
+        </DialogDescription>
+      </DialogHeader>
+
+      <DialogFooter>
+        <Button variant="outline" @click="onClose" :disabled="processing">
+          {{ cancelText }}
+        </Button>
+        <Button
+          @click="onConfirm"
+          :disabled="processing"
+        >
+          {{ confirmText }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
+

resources/js/Components/Dialogs/CreateDialog.vue

@@ -0,0 +1,100 @@
+<script setup>
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/Components/ui/dialog';
+import { Button } from '@/Components/ui/button';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faPlusCircle } from '@fortawesome/free-solid-svg-icons';
+import { computed, ref, watch, nextTick } from 'vue';
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  title: { type: String, default: 'Ustvari novo' },
+  maxWidth: { type: String, default: '2xl' },
+  confirmText: { type: String, default: 'Ustvari' },
+  cancelText: { type: String, default: 'Prekliči' },
+  processing: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['update:show', 'close', 'confirm']);
+
+const open = ref(props.show);
+
+watch(() => props.show, (newVal) => {
+  open.value = newVal;
+  if (newVal) {
+    // Emit custom event when dialog opens
+    nextTick(() => {
+      window.dispatchEvent(new CustomEvent('dialog:open'));
+    });
+  }
+});
+
+watch(open, (newVal) => {
+  emit('update:show', newVal);
+  if (!newVal) {
+    emit('close');
+  }
+});
+
+const onClose = () => {
+  open.value = false;
+};
+
+const onConfirm = () => {
+  emit('confirm');
+};
+
+const maxWidthClass = computed(() => {
+  const maxWidthMap = {
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-md',
+    lg: 'sm:max-w-lg',
+    xl: 'sm:max-w-xl',
+    '2xl': 'sm:max-w-2xl',
+    wide: 'sm:max-w-[1200px]',
+  };
+  return maxWidthMap[props.maxWidth] || 'sm:max-w-2xl';
+});
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogContent :class="maxWidthClass">
+      <DialogHeader>
+        <DialogTitle>
+          <div class="flex items-center gap-2">
+            <FontAwesomeIcon :icon="faPlusCircle" class="h-5 w-5 text-primary-600" />
+            <span>{{ title }}</span>
+          </div>
+        </DialogTitle>
+        <DialogDescription>
+          <slot name="description" />
+        </DialogDescription>
+      </DialogHeader>
+
+      <div class="py-4">
+        <slot />
+      </div>
+
+      <DialogFooter>
+        <Button variant="outline" @click="onClose" :disabled="processing">
+          {{ cancelText }}
+        </Button>
+        <Button
+          @click="onConfirm"
+          :disabled="processing || disabled"
+        >
+          {{ confirmText }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
+

resources/js/Components/Dialogs/DeleteDialog.vue

@@ -0,0 +1,96 @@
+<script setup>
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/Components/ui/dialog';
+import { Button } from '@/Components/ui/button';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faTrashCan, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  title: { type: String, default: 'Izbriši' },
+  message: { type: String, default: 'Ali ste prepričani, da želite izbrisati ta element?' },
+  confirmText: { type: String, default: 'Izbriši' },
+  cancelText: { type: String, default: 'Prekliči' },
+  processing: { type: Boolean, default: false },
+  itemName: { type: String, default: null }, // Optional name to show in confirmation
+});
+
+const emit = defineEmits(['update:show', 'close', 'confirm']);
+
+const open = ref(props.show);
+
+watch(() => props.show, (newVal) => {
+  open.value = newVal;
+});
+
+watch(open, (newVal) => {
+  emit('update:show', newVal);
+  if (!newVal) {
+    emit('close');
+  }
+});
+
+const onClose = () => {
+  open.value = false;
+};
+
+const onConfirm = () => {
+  emit('confirm');
+};
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogContent class="sm:max-w-md">
+      <DialogHeader>
+        <DialogTitle>
+          <div class="flex items-center gap-2">
+            <FontAwesomeIcon :icon="faTrashCan" class="h-5 w-5 text-red-600" />
+            <span>{{ title }}</span>
+          </div>
+        </DialogTitle>
+        <DialogDescription>
+          <div class="flex items-start gap-4 pt-4">
+            <div class="flex-shrink-0">
+              <div class="flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
+                <FontAwesomeIcon :icon="faTriangleExclamation" class="h-6 w-6 text-red-600" />
+              </div>
+            </div>
+            <div class="flex-1 space-y-2">
+              <p class="text-sm text-gray-700">
+                {{ message }}
+              </p>
+              <p v-if="itemName" class="text-sm font-medium text-gray-900">
+                {{ itemName }}
+              </p>
+              <p class="text-sm text-gray-500">
+                Ta dejanje ni mogoče razveljaviti.
+              </p>
+            </div>
+          </div>
+        </DialogDescription>
+      </DialogHeader>
+
+      <DialogFooter>
+        <Button variant="outline" @click="onClose" :disabled="processing">
+          {{ cancelText }}
+        </Button>
+        <Button
+          variant="destructive"
+          @click="onConfirm"
+          :disabled="processing"
+        >
+          {{ confirmText }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
+

resources/js/Components/Dialogs/UpdateDialog.vue

@@ -0,0 +1,100 @@
+<script setup>
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/Components/ui/dialog';
+import { Button } from '@/Components/ui/button';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faPenToSquare } from '@fortawesome/free-solid-svg-icons';
+import { computed, ref, watch, nextTick } from 'vue';
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  title: { type: String, default: 'Uredi' },
+  maxWidth: { type: String, default: '2xl' },
+  confirmText: { type: String, default: 'Shrani' },
+  cancelText: { type: String, default: 'Prekliči' },
+  processing: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['update:show', 'close', 'confirm']);
+
+const open = ref(props.show);
+
+watch(() => props.show, (newVal) => {
+  open.value = newVal;
+  if (newVal) {
+    // Emit custom event when dialog opens
+    nextTick(() => {
+      window.dispatchEvent(new CustomEvent('dialog:open'));
+    });
+  }
+});
+
+watch(open, (newVal) => {
+  emit('update:show', newVal);
+  if (!newVal) {
+    emit('close');
+  }
+});
+
+const onClose = () => {
+  open.value = false;
+};
+
+const onConfirm = () => {
+  emit('confirm');
+};
+
+const maxWidthClass = computed(() => {
+  const maxWidthMap = {
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-md',
+    lg: 'sm:max-w-lg',
+    xl: 'sm:max-w-xl',
+    '2xl': 'sm:max-w-2xl',
+    wide: 'sm:max-w-[1200px]',
+  };
+  return maxWidthMap[props.maxWidth] || 'sm:max-w-2xl';
+});
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogContent :class="maxWidthClass">
+      <DialogHeader>
+        <DialogTitle>
+          <div class="flex items-center gap-2">
+            <FontAwesomeIcon :icon="faPenToSquare" class="h-5 w-5 text-primary-600" />
+            <span>{{ title }}</span>
+          </div>
+        </DialogTitle>
+        <DialogDescription>
+          <slot name="description" />
+        </DialogDescription>
+      </DialogHeader>
+
+      <div class="py-4">
+        <slot />
+      </div>
+
+      <DialogFooter>
+        <Button variant="outline" @click="onClose" :disabled="processing">
+          {{ cancelText }}
+        </Button>
+        <Button
+          @click="onConfirm"
+          :disabled="processing || disabled"
+        >
+          {{ confirmText }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
+

resources/js/Components/Dialogs/WarningDialog.vue

@@ -0,0 +1,104 @@
+<script setup>
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/Components/ui/dialog';
+import { Button } from '@/Components/ui/button';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
+import { computed, ref, watch } from 'vue';
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  title: { type: String, default: 'Opozorilo' },
+  message: { type: String, default: 'Prosimo, bodite pozorni.' },
+  confirmText: { type: String, default: 'Razumem' },
+  cancelText: { type: String, default: 'Prekliči' },
+  processing: { type: Boolean, default: false },
+  maxWidth: { type: String, default: 'md' },
+  showCancel: { type: Boolean, default: true },
+});
+
+const emit = defineEmits(['update:show', 'close', 'confirm']);
+
+const open = ref(props.show);
+
+watch(() => props.show, (newVal) => {
+  open.value = newVal;
+});
+
+watch(open, (newVal) => {
+  emit('update:show', newVal);
+  if (!newVal) {
+    emit('close');
+  }
+});
+
+const onClose = () => {
+  open.value = false;
+};
+
+const onConfirm = () => {
+  emit('confirm');
+};
+
+const maxWidthClass = computed(() => {
+  const maxWidthMap = {
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-md',
+    lg: 'sm:max-w-lg',
+    xl: 'sm:max-w-xl',
+    '2xl': 'sm:max-w-2xl',
+    wide: 'sm:max-w-[1200px]',
+  };
+  return maxWidthMap[props.maxWidth] || 'sm:max-w-md';
+});
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogContent :class="maxWidthClass">
+      <DialogHeader>
+        <DialogTitle>
+          <div class="flex items-center gap-2">
+            <FontAwesomeIcon :icon="faTriangleExclamation" class="h-5 w-5 text-amber-600" />
+            <span>{{ title }}</span>
+          </div>
+        </DialogTitle>
+        <DialogDescription>
+          <div class="flex items-start gap-4 pt-4">
+            <div class="flex-shrink-0">
+              <div class="flex items-center justify-center h-12 w-12 rounded-full bg-amber-100">
+                <FontAwesomeIcon :icon="faTriangleExclamation" class="h-6 w-6 text-amber-600" />
+              </div>
+            </div>
+            <div class="flex-1">
+              <p class="text-sm text-gray-700">
+                {{ message }}
+              </p>
+              <slot />
+            </div>
+          </div>
+        </DialogDescription>
+      </DialogHeader>
+
+      <DialogFooter>
+        <Button v-if="showCancel" variant="outline" @click="onClose" :disabled="processing">
+          {{ cancelText }}
+        </Button>
+        <Button
+          @click="onConfirm"
+          :disabled="processing"
+          class="bg-amber-600 hover:bg-amber-700 focus:ring-amber-500"
+        >
+          {{ confirmText }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
+

resources/js/Components/DocumentEditDialog.vue

@@ -1,96 +0,0 @@
-<script setup>
-import DialogModal from '@/Components/DialogModal.vue'
-import InputLabel from '@/Components/InputLabel.vue'
-import TextInput from '@/Components/TextInput.vue'
-import { useForm } from '@inertiajs/vue3'
-import { computed, watch } from 'vue'
-
-const props = defineProps({
-  show: { type: Boolean, default: false },
-  client_case_uuid: { type: String, required: true },
-  document: { type: Object, default: null },
-  contracts: { type: Array, default: () => [] },
-})
-
-const emit = defineEmits(['close', 'saved'])
-
-const form = useForm({
-  name: '',
-  description: '',
-  is_public: false,
-  contract_uuid: null,
-})
-
-watch(
-  () => props.document,
-  (d) => {
-    if (!d) return
-    form.name = d.name || d.original_name || ''
-    form.description = d.description || ''
-    form.is_public = !!d.is_public
-    // Pre-fill contract selection if this doc belongs to a contract
-    const isContract = (d?.documentable_type || '').toLowerCase().includes('contract')
-    form.contract_uuid = isContract ? d.contract_uuid || null : null
-  },
-  { immediate: true }
-)
-
-const submit = () => {
-  if (!props.document) return
-  form.patch(
-    route('clientCase.document.update', {
-      client_case: props.client_case_uuid,
-      document: props.document.uuid,
-    }),
-    {
-      preserveScroll: true,
-      onSuccess: () => {
-        emit('saved')
-        emit('close')
-      },
-    }
-  )
-}
-
-const contractOptions = computed(() => {
-  return props.contracts || []
-})
-</script>
-
-<template>
-  <DialogModal :show="show" @close="$emit('close')">
-    <template #title>Uredi dokument</template>
-    <template #content>
-      <div class="space-y-4">
-        <div>
-          <InputLabel for="docName" value="Ime" />
-          <TextInput id="docName" v-model="form.name" class="mt-1 block w-full" />
-          <div v-if="form.errors.name" class="text-sm text-red-600 mt-1">{{ form.errors.name }}</div>
-        </div>
-        <div>
-          <InputLabel for="docDesc" value="Opis" />
-          <TextInput id="docDesc" v-model="form.description" class="mt-1 block w-full" />
-          <div v-if="form.errors.description" class="text-sm text-red-600 mt-1">{{ form.errors.description }}</div>
-        </div>
-        <div class="flex items-center gap-2">
-          <input id="docPublic" type="checkbox" v-model="form.is_public" />
-          <InputLabel for="docPublic" value="Javno" />
-        </div>
-        <div>
-          <InputLabel for="docContract" value="Pogodba" />
-          <select id="docContract" v-model="form.contract_uuid" class="mt-1 block w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
-            <option :value="null">— Brez — (dok. pri primeru)</option>
-            <option v-for="c in contractOptions" :key="c.uuid || c.id" :value="c.uuid">{{ c.reference || c.uuid }}</option>
-          </select>
-          <div v-if="form.errors.contract_uuid" class="text-sm text-red-600 mt-1">{{ form.errors.contract_uuid }}</div>
-        </div>
-      </div>
-    </template>
-    <template #footer>
-      <div class="flex justify-end gap-2">
-        <button type="button" class="px-3 py-2 rounded bg-gray-100 hover:bg-gray-200" @click="$emit('close')">Prekliči</button>
-        <button type="button" class="px-3 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700" :disabled="form.processing" @click="submit">Shrani</button>
-      </div>
-    </template>
-  </DialogModal>
-</template>

resources/js/Components/DocumentUploadDialog.vue

@@ -1,127 +0,0 @@
-<script setup>
-import DialogModal from '@/Components/DialogModal.vue'
-import PrimaryButton from '@/Components/PrimaryButton.vue'
-import SecondaryButton from '@/Components/SecondaryButton.vue'
-import ActionMessage from '@/Components/ActionMessage.vue'
-import InputLabel from '@/Components/InputLabel.vue'
-import TextInput from '@/Components/TextInput.vue'
-import { useForm } from '@inertiajs/vue3'
-import { ref, watch } from 'vue'
-
-const props = defineProps({
-  show: { type: Boolean, default: false },
-  postUrl: { type: String, required: true },
-  // Optional list of contracts to allow attaching the document directly to a contract
-  // Each item should have at least: { uuid, reference }
-  contracts: { type: Array, default: () => [] },
-})
-const emit = defineEmits(['close', 'uploaded'])
-
-const MAX_SIZE = 25 * 1024 * 1024 // 25MB
-const ALLOWED_EXTS = ['doc','docx','pdf','txt','csv','xls','xlsx','jpeg','jpg','png']
-
-const form = useForm({
-  name: '',
-  description: '',
-  file: null,
-  is_public: true,
-  contract_uuid: null,
-})
-const localError = ref('')
-
-watch(() => props.show, (v) => {
-  if (!v) return
-  localError.value = ''
-})
-
-const onFileChange = (e) => {
-  localError.value = ''
-  const f = e.target.files?.[0]
-  if (!f) { form.file = null; return }
-  const ext = (f.name.split('.').pop() || '').toLowerCase()
-  if (!ALLOWED_EXTS.includes(ext)) {
-    localError.value = 'Unsupported file type. Allowed: ' + ALLOWED_EXTS.join(', ')
-    e.target.value = ''
-    form.file = null
-    return
-  }
-  if (f.size > MAX_SIZE) {
-    localError.value = 'File is too large. Maximum size is 25MB.'
-    e.target.value = ''
-    form.file = null
-    return
-  }
-  form.file = f
-  if (!form.name) {
-    form.name = f.name.replace(/\.[^.]+$/, '')
-  }
-}
-
-const submit = () => {
-  localError.value = ''
-  if (!form.file) {
-    localError.value = 'Please choose a file.'
-    return
-  }
-  const ext = (form.file.name.split('.').pop() || '').toLowerCase()
-  if (!ALLOWED_EXTS.includes(ext)) {
-    localError.value = 'Unsupported file type. Allowed: ' + ALLOWED_EXTS.join(', ')
-    return
-  }
-  if (form.file.size > MAX_SIZE) {
-    localError.value = 'File is too large. Maximum size is 25MB.'
-    return
-  }
-  form.post(props.postUrl, {
-    forceFormData: true,
-    onSuccess: () => {
-      emit('uploaded')
-      close()
-      form.reset()
-    },
-  })
-}
-
-const close = () => emit('close')
-</script>
-
-<template>
-  <DialogModal :show="props.show" @close="close" maxWidth="lg">
-    <template #title>Dodaj dokument</template>
-    <template #content>
-      <div class="space-y-4">
-        <div v-if="props.contracts && props.contracts.length" class="grid grid-cols-1 gap-2">
-          <InputLabel for="doc_attach" value="Pripiši k" />
-          <select id="doc_attach" v-model="form.contract_uuid" class="mt-1 block w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
-            <option :value="null">Primer</option>
-            <option v-for="c in props.contracts" :key="c.uuid" :value="c.uuid">Pogodba: {{ c.reference }}</option>
-          </select>
-        </div>
-        <div>
-          <InputLabel for="doc_name" value="Name" />
-          <TextInput id="doc_name" class="mt-1 block w-full" v-model="form.name" />
-        </div>
-        <div>
-          <InputLabel for="doc_desc" value="Description" />
-          <textarea id="doc_desc" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" rows="3" v-model="form.description"></textarea>
-        </div>
-        <div>
-          <InputLabel for="doc_file" value="File (max 25MB)" />
-          <input id="doc_file" type="file" class="mt-1 block w-full" @change="onFileChange" accept=".doc,.docx,.pdf,.txt,.csv,.xls,.xlsx,.jpeg,.jpg,.png" />
-          <div v-if="localError" class="text-sm text-red-600 mt-1">{{ localError }}</div>
-        </div>
-        <label class="inline-flex items-center gap-2 text-sm">
-          <input type="checkbox" v-model="form.is_public" class="rounded" />
-          Public
-        </label>
-      </div>
-    </template>
-    <template #footer>
-      <div class="flex items-center gap-3">
-        <ActionMessage :on="form.recentlySuccessful">Uploaded.</ActionMessage>
-        <SecondaryButton type="button" @click="close">Cancel</SecondaryButton>
-        <PrimaryButton :disabled="form.processing" @click="submit">Upload</PrimaryButton>
-      </div>
-    </template>
-  </DialogModal>
-</template>

resources/js/Components/DocumentViewerDialog.vue

@@ -1,26 +0,0 @@
-<script setup>
-import DialogModal from '@/Components/DialogModal.vue'
-import SecondaryButton from '@/Components/SecondaryButton.vue'
-
-const props = defineProps({
-  show: { type: Boolean, default: false },
-  src: { type: String, default: '' },
-  title: { type: String, default: 'Document' }
-})
-const emit = defineEmits(['close'])
-</script>
-
-<template>
-  <DialogModal :show="props.show" @close="$emit('close')" maxWidth="4xl">
-    <template #title>{{ props.title }}</template>
-    <template #content>
-      <div class="h-[70vh]">
-        <iframe v-if="props.src" :src="props.src" class="w-full h-full rounded border" />
-        <div v-else class="text-sm text-gray-500">No document to display.</div>
-      </div>
-    </template>
-    <template #footer>
-      <SecondaryButton type="button" @click="$emit('close')">Close</SecondaryButton>
-    </template>
-  </DialogModal>
-</template>

resources/js/Components/DocumentsTable.vue

@@ -1,411 +0,0 @@
-<script setup>
-import {
-  FwbTable,
-  FwbTableHead,
-  FwbTableHeadCell,
-  FwbTableBody,
-  FwbTableRow,
-  FwbTableCell,
-  FwbBadge,
-} from "flowbite-vue";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import {
-  faFilePdf,
-  faFileWord,
-  faFileExcel,
-  faFileLines,
-  faFileImage,
-  faFile,
-  faCircleInfo,
-  faEllipsisVertical,
-  faDownload,
-  faTrash,
-} from "@fortawesome/free-solid-svg-icons";
-import { ref } from "vue";
-import { router } from "@inertiajs/vue3";
-import Dropdown from "@/Components/Dropdown.vue";
-import ConfirmationModal from "@/Components/ConfirmationModal.vue";
-import SecondaryButton from "./SecondaryButton.vue";
-import DangerButton from "./DangerButton.vue";
-
-const props = defineProps({
-  documents: { type: Array, default: () => [] },
-  viewUrlBuilder: { type: Function, default: null },
-  // Optional: direct download URL builder; if absent we emit 'download'
-  downloadUrlBuilder: { type: Function, default: null },
-  // Optional: direct delete URL builder; if absent we emit 'delete'
-  deleteUrlBuilder: { type: Function, default: null },
-  edit: { type: Boolean, default: false },
-});
-// Derive a human-friendly source for a document: Case or Contract reference
-const sourceLabel = (doc) => {
-  // Server can include optional documentable meta; fall back to type
-  if (doc.documentable_type?.toLowerCase?.().includes("contract")) {
-    return doc.contract_reference ? `Pogodba ${doc.contract_reference}` : "Pogodba";
-  }
-  return "Primer";
-};
-
-const emit = defineEmits(["view", "download", "delete", "edit"]);
-
-const formatSize = (bytes) => {
-  if (bytes == null) return "-";
-  const thresh = 1024;
-  if (Math.abs(bytes) < thresh) return bytes + " B";
-  const units = ["KB", "MB", "GB", "TB"];
-  let u = -1;
-  do {
-    bytes /= thresh;
-    ++u;
-  } while (Math.abs(bytes) >= thresh && u < units.length - 1);
-  return bytes.toFixed(1) + " " + units[u];
-};
-
-const extFrom = (doc) => {
-  let ext = (doc?.extension || "").toLowerCase();
-  if (!ext && doc?.original_name) {
-    const parts = String(doc.original_name).toLowerCase().split(".");
-    if (parts.length > 1) ext = parts.pop();
-  }
-  // derive from mime
-  if (!ext && doc?.mime_type) {
-    const mime = String(doc.mime_type).toLowerCase();
-    if (mime.includes("pdf")) ext = "pdf";
-    else if (mime.includes("word") || mime.includes("msword") || mime.includes("doc"))
-      ext = "docx";
-    else if (mime.includes("excel") || mime.includes("sheet")) ext = "xlsx";
-    else if (mime.includes("csv")) ext = "csv";
-    else if (mime.startsWith("image/")) ext = "img";
-    else if (mime.includes("text")) ext = "txt";
-  }
-  return ext;
-};
-
-const fileTypeInfo = (doc) => {
-  const ext = extFrom(doc);
-  const mime = (doc?.mime_type || "").toLowerCase();
-  switch (ext) {
-    case "pdf":
-      return { icon: faFilePdf, color: "text-red-600", label: "PDF" };
-    case "doc":
-    case "docx":
-      return {
-        icon: faFileWord,
-        color: "text-blue-600",
-        label: (ext || "DOCX").toUpperCase(),
-      };
-    case "xls":
-    case "xlsx":
-      return {
-        icon: faFileExcel,
-        color: "text-green-600",
-        label: (ext || "XLSX").toUpperCase(),
-      };
-    case "csv":
-      // treat CSV as spreadsheet-like
-      return { icon: faFileExcel, color: "text-emerald-600", label: "CSV" };
-    case "txt":
-      return { icon: faFileLines, color: "text-slate-600", label: "TXT" };
-    case "jpg":
-    case "jpeg":
-    case "png":
-    case "img":
-      return {
-        icon: faFileImage,
-        color: "text-fuchsia-600",
-        label: ext === "img" ? "IMG" : (ext || "IMG").toUpperCase(),
-      };
-    default:
-      if (mime.startsWith("image/"))
-        return { icon: faFileImage, color: "text-fuchsia-600", label: "IMG" };
-      return {
-        icon: faFile,
-        color: "text-gray-600",
-        label: (ext || "FILE").toUpperCase(),
-      };
-  }
-};
-
-const hasDesc = (doc) => {
-  const d = doc?.description;
-  return typeof d === "string" && d.trim().length > 0;
-};
-
-const expandedDescKey = ref(null);
-const rowKey = (doc, i) => doc?.uuid ?? i;
-const toggleDesc = (doc, i) => {
-  const key = rowKey(doc, i);
-  expandedDescKey.value = expandedDescKey.value === key ? null : key;
-};
-
-const resolveDownloadUrl = (doc) => {
-  if (typeof props.downloadUrlBuilder === "function")
-    return props.downloadUrlBuilder(doc);
-  // If no builder provided, parent can handle via emitted event
-  return null;
-};
-
-const handleDownload = (doc) => {
-  const url = resolveDownloadUrl(doc);
-  if (url) {
-    // Trigger a navigation to a direct-download endpoint; server should set Content-Disposition: attachment
-    const a = document.createElement("a");
-    a.href = url;
-    a.target = "_self";
-    a.rel = "noopener";
-    // In many browsers, simply setting href is enough
-    a.click();
-  } else {
-    emit("download", doc);
-  }
-  closeActions();
-};
-
-// ---------------- Delete logic ----------------
-const confirmDelete = ref(false);
-const deleting = ref(false);
-const docToDelete = ref(null);
-
-const resolveDeleteUrl = (doc) => {
-  // 1. Explicit builder via prop takes precedence
-  if (typeof props.deleteUrlBuilder === "function") {
-    return props.deleteUrlBuilder(doc);
-  }
-  // 2. Attempt automatic route resolution (requires Ziggy's global `route` helper)
-  try {
-    const type = (doc?.documentable_type || "").toLowerCase();
-    // Contract document
-    if (type.includes("contract") && doc?.contract_uuid && doc?.uuid) {
-      if (typeof route === "function") {
-        return route("contract.document.delete", {
-          contract: doc.contract_uuid,
-          document: doc.uuid,
-        });
-      }
-    }
-    // Case document
-    if (doc?.client_case_uuid && doc?.uuid) {
-      if (typeof route === "function") {
-        return route("clientCase.document.delete", {
-          client_case: doc.client_case_uuid,
-          document: doc.uuid,
-        });
-      }
-    }
-  } catch (e) {
-    // swallow – fallback to emit path
-  }
-  // 3. Fallback: no URL, caller must handle emitted event
-  return null;
-};
-
-const requestDelete = async () => {
-  if (!docToDelete.value) {
-    return;
-  }
-  const url = resolveDeleteUrl(docToDelete.value);
-  deleting.value = true;
-  try {
-    if (url) {
-      await router.delete(url, { preserveScroll: true });
-    } else {
-      emit("delete", docToDelete.value);
-    }
-  } finally {
-    deleting.value = false;
-    confirmDelete.value = false;
-    docToDelete.value = null;
-  }
-};
-
-const askDelete = (doc) => {
-  docToDelete.value = doc;
-  confirmDelete.value = true;
-};
-
-function closeActions() {
-  /* noop placeholder for symmetry; Dropdown auto-closes */
-}
-</script>
-
-<template>
-  <div
-    class="relative overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm"
-  >
-    <FwbTable hoverable striped class="text-sm">
-      <FwbTableHead
-        class="sticky top-0 z-10 bg-gray-50/90 backdrop-blur border-b border-gray-200 shadow-sm"
-      >
-        <FwbTableHeadCell
-          class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3"
-          >Naziv</FwbTableHeadCell
-        >
-        <FwbTableHeadCell
-          class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3"
-          >Vrsta</FwbTableHeadCell
-        >
-        <FwbTableHeadCell
-          class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3"
-          >Velikost</FwbTableHeadCell
-        >
-        <FwbTableHeadCell
-          class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3"
-          >Dodano</FwbTableHeadCell
-        >
-        <FwbTableHeadCell
-          class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3"
-          >Vir</FwbTableHeadCell
-        >
-        <FwbTableHeadCell
-          class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-"
-          >Opis</FwbTableHeadCell
-        >
-        <FwbTableHeadCell
-          class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-"
-        ></FwbTableHeadCell>
-      </FwbTableHead>
-      <FwbTableBody>
-        <template v-for="(doc, i) in documents" :key="doc.uuid || i">
-          <FwbTableRow>
-            <FwbTableCell>
-              <div class="flex items-center gap-2">
-                <button
-                  type="button"
-                  class="text-indigo-600 hover:underline"
-                  @click="$emit('view', doc)"
-                >
-                  {{ doc.name }}
-                </button>
-                <FwbBadge v-if="doc.is_public" type="green">Public</FwbBadge>
-              </div>
-            </FwbTableCell>
-            <FwbTableCell>
-              <div class="flex items-center gap-2">
-                <FontAwesomeIcon
-                  :icon="fileTypeInfo(doc).icon"
-                  :class="['h-5 w-5', fileTypeInfo(doc).color]"
-                />
-                <span class="text-gray-700">{{ fileTypeInfo(doc).label }}</span>
-              </div>
-            </FwbTableCell>
-            <FwbTableCell>{{ formatSize(doc.size) }}</FwbTableCell>
-            <FwbTableCell>{{ new Date(doc.created_at).toLocaleString() }}</FwbTableCell>
-            <FwbTableCell>
-              <FwbBadge type="purple">{{ sourceLabel(doc) }}</FwbBadge>
-            </FwbTableCell>
-            <FwbTableCell class="text-center">
-              <button
-                class="inline-flex items-center justify-center h-8 w-8 rounded-full hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed"
-                :disabled="!hasDesc(doc)"
-                :title="hasDesc(doc) ? 'Pokaži opis' : 'Ni opisa'"
-                type="button"
-                @click="toggleDesc(doc, i)"
-              >
-                <FontAwesomeIcon :icon="faCircleInfo" class="h-4 w-4 text-gray-700" />
-              </button>
-            </FwbTableCell>
-            <FwbTableCell class="text-right whitespace-nowrap">
-              <Dropdown align="right" width="48">
-                <template #trigger>
-                  <button
-                    type="button"
-                    class="inline-flex items-center justify-center h-8 w-8 rounded-full hover:bg-gray-100 focus:outline-none"
-                    :title="'Actions'"
-                  >
-                    <FontAwesomeIcon
-                      :icon="faEllipsisVertical"
-                      class="h-4 w-4 text-gray-700"
-                    />
-                  </button>
-                </template>
-                <template #content>
-                  <button
-                    type="button"
-                    class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
-                    @click="emit('edit', doc)"
-                    v-if="edit"
-                  >
-                    <FontAwesomeIcon :icon="faCircleInfo" class="h-4 w-4 text-gray-600" />
-                    <span>Uredi</span>
-                  </button>
-                  <button
-                    type="button"
-                    class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
-                    @click="handleDownload(doc)"
-                  >
-                    <FontAwesomeIcon :icon="faDownload" class="h-4 w-4 text-gray-600" />
-                    <span>Prenos</span>
-                  </button>
-                  <button
-                    type="button"
-                    class="w-full px-3 py-2 text-left text-sm text-red-600 hover:bg-red-50 flex items-center gap-2"
-                    @click="askDelete(doc)"
-                    v-if="edit"
-                  >
-                    <FontAwesomeIcon :icon="faTrash" class="h-4 w-4" />
-                    <span>Izbriši</span>
-                  </button>
-                  <!-- future actions can be slotted here -->
-                </template>
-              </Dropdown>
-            </FwbTableCell>
-          </FwbTableRow>
-          <!-- Expanded description row directly below the item -->
-          <FwbTableRow
-            :key="'desc-' + (doc.uuid || i)"
-            v-if="expandedDescKey === rowKey(doc, i)"
-          >
-            <FwbTableCell :colspan="6" class="bg-gray-50">
-              <div
-                class="px-4 py-3 text-sm text-gray-700 whitespace-pre-wrap border-l-2 border-indigo-400"
-              >
-                {{ doc.description }}
-              </div>
-            </FwbTableCell>
-          </FwbTableRow>
-        </template>
-      </FwbTableBody>
-    </FwbTable>
-    <div
-      v-if="!documents || documents.length === 0"
-      class="p-6 text-center text-sm text-gray-500"
-    >
-      No documents.
-    </div>
-    <!-- Delete confirmation modal using shared component -->
-    <ConfirmationModal
-      :show="confirmDelete"
-      :closeable="!deleting"
-      max-width="md"
-      @close="
-        confirmDelete = false;
-        docToDelete = null;
-      "
-    >
-      <template #title>Potrditev</template>
-      <template #content>
-        Ali res želite izbrisati dokument
-        <span class="font-medium">{{ docToDelete?.name }}</span
-        >? Tega dejanja ni mogoče razveljaviti.
-      </template>
-      <template #footer>
-        <SecondaryButton
-          type="button"
-          @click="
-            confirmDelete = false;
-            docToDelete = null;
-          "
-          :disabled="deleting"
-          >Prekliči</SecondaryButton
-        >
-        <DangerButton
-          :disabled="deleting"
-          type="button"
-          class="ml-2"
-          @click="requestDelete"
-          >{{ deleting ? "Brisanje…" : "Izbriši" }}</DangerButton
-        >
-      </template>
-    </ConfirmationModal>
-  </div>
-</template>

resources/js/Components/DocumentsTable/DocumentEditDialog.vue

@@ -0,0 +1,182 @@
+<script setup>
+import UpdateDialog from '@/Components/Dialogs/UpdateDialog.vue'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+import { computed, ref, watch } from 'vue'
+import { router } from '@inertiajs/vue3'
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/Components/ui/form'
+import { Input } from '@/Components/ui/input'
+import { Textarea } from '@/Components/ui/textarea'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/Components/ui/select'
+import { Checkbox } from '@/Components/ui/checkbox'
+import { Switch } from '@/Components/ui/switch'
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  client_case_uuid: { type: String, required: true },
+  document: { type: Object, default: null },
+  contracts: { type: Array, default: () => [] },
+})
+
+const emit = defineEmits(['close', 'saved'])
+
+const formSchema = toTypedSchema(z.object({
+  name: z.string().min(1, 'Ime je obvezno'),
+  description: z.string().optional(),
+  is_public: z.boolean().default(false),
+  contract_uuid: z.string().nullable().optional(),
+}))
+
+const form = useForm({
+  validationSchema: formSchema,
+})
+
+
+const processing = ref(false)
+
+const update = async () => {
+  if (!props.document) return
+  
+  processing.value = true
+  const { values } = form
+  
+  router.patch(
+    route('clientCase.document.update', {
+      client_case: props.client_case_uuid,
+      document: props.document.uuid,
+    }),
+    values,
+    {
+      preserveScroll: true,
+      onSuccess: () => {
+        emit('saved')
+        close()
+      },
+      onError: (errors) => {
+        // Map Inertia errors to VeeValidate field errors
+        Object.keys(errors).forEach((field) => {
+          const errorMessages = Array.isArray(errors[field])
+            ? errors[field]
+            : [errors[field]]
+          form.setFieldError(field, errorMessages[0])
+        })
+        processing.value = false
+      },
+      onFinish: () => {
+        processing.value = false
+      },
+    }
+  )
+}
+
+const close = () => {
+  emit('close')
+  processing.value = false
+}
+
+const onSubmit = form.handleSubmit((values) => {
+  update()
+})
+
+const onConfirm = () => {
+  onSubmit()
+}
+
+const contractOptions = computed(() => {
+  return props.contracts || []
+})
+
+// Watch for dialog opening and document changes
+watch(
+  () => [props.show, props.document],
+  () => {
+    if (!props.show) {
+      return
+    }
+    // When dialog opens, reset form with document values
+    console.log((props.document?.documentable_type || '').toLowerCase().includes('contract') ? (props.document.contract_uuid || null) : null, props.document)
+    if (props.document) {
+      form.resetForm({
+        values: {
+          name: props.document.name || props.document.original_name || '',
+          description: props.document.description || '',
+          is_public: !!props.document.is_public,
+          contract_uuid: (props.document?.documentable_type || '').toLowerCase().includes('contract') ? (props.document.contract_uuid || null) : null,
+        },
+      })
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <UpdateDialog
+    :show="show"
+    title="Uredi dokument"
+    :processing="processing"
+    @close="close"
+    @confirm="onConfirm"
+  >
+    <form @submit.prevent="onSubmit" class="space-y-4">
+      <FormField v-slot="{ componentField }" name="name">
+        <FormItem>
+          <FormLabel>Ime</FormLabel>
+          <FormControl>
+            <Input id="docName" v-bind="componentField" />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+
+      <FormField v-slot="{ componentField }" name="description">
+        <FormItem>
+          <FormLabel>Opis</FormLabel>
+          <FormControl>
+            <Textarea id="docDesc" v-bind="componentField" rows="3" />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+
+      <FormField v-slot="{ value, handleChange }" name="is_public">
+        <FormItem class="flex flex-row items-start space-x-3 space-y-0">
+          <FormControl>
+            <Switch
+              :model-value="value"
+              @update:model-value="handleChange"
+            />
+          </FormControl>
+          <div class="space-y-1 leading-none">
+            <FormLabel>Javno</FormLabel>
+          </div>
+        </FormItem>
+      </FormField>
+
+      <FormField v-slot="{ value, handleChange }" name="contract_uuid">
+        <FormItem>
+          <FormLabel>Pogodba</FormLabel>
+          <Select :model-value="value" @update:model-value="handleChange">
+            <FormControl>
+              <SelectTrigger>
+                <SelectValue placeholder="— Brez — (dok. pri primeru)" />
+              </SelectTrigger>
+            </FormControl>
+            <SelectContent>
+              <SelectItem :value="null">— Brez — (dok. pri primeru)</SelectItem>
+              <SelectItem
+                v-for="c in contractOptions"
+                :key="c.uuid || c.id"
+                :value="c.uuid"
+              >
+                {{ c.reference || c.uuid }}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </form>
+  </UpdateDialog>
+</template>

resources/js/Components/DocumentsTable/DocumentUploadDialog.vue

@@ -0,0 +1,218 @@
+<script setup>
+import CreateDialog from '@/Components/Dialogs/CreateDialog.vue'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+import { ref, watch } from 'vue'
+import { router } from '@inertiajs/vue3'
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/Components/ui/form'
+import { Input } from '@/Components/ui/input'
+import { Textarea } from '@/Components/ui/textarea'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/Components/ui/select'
+import { Switch } from '@/Components/ui/switch'
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  postUrl: { type: String, required: true },
+  // Optional list of contracts to allow attaching the document directly to a contract
+  // Each item should have at least: { uuid, reference }
+  contracts: { type: Array, default: () => [] },
+})
+const emit = defineEmits(['close', 'uploaded'])
+
+const MAX_SIZE = 25 * 1024 * 1024 // 25MB
+const ALLOWED_EXTS = ['doc','docx','pdf','txt','csv','xls','xlsx','jpeg','jpg','png']
+
+const formSchema = toTypedSchema(z.object({
+  name: z.string().min(1, 'Ime je obvezno'),
+  description: z.string().optional(),
+  file: z.instanceof(File).refine((file) => file.size > 0, 'Izberite datoteko'),
+  is_public: z.boolean().default(true),
+  contract_uuid: z.string().nullable().optional(),
+}))
+
+const form = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    name: '',
+    description: '',
+    file: null,
+    is_public: true,
+    contract_uuid: null,
+  },
+})
+
+const localError = ref('')
+
+watch(() => props.show, (v) => {
+  if (!v) return
+  localError.value = ''
+  form.resetForm()
+})
+
+const onFileChange = (e) => {
+  localError.value = ''
+  const f = e.target.files?.[0]
+  if (!f) {
+    form.setFieldValue('file', null)
+    return
+  }
+  const ext = (f.name.split('.').pop() || '').toLowerCase()
+  if (!ALLOWED_EXTS.includes(ext)) {
+    localError.value = 'Nepodprta vrsta datoteke. Dovoljeno: ' + ALLOWED_EXTS.join(', ')
+    e.target.value = ''
+    form.setFieldValue('file', null)
+    return
+  }
+  if (f.size > MAX_SIZE) {
+    localError.value = 'Datoteka je prevelika. Največja velikost je 25MB.'
+    e.target.value = ''
+    form.setFieldValue('file', null)
+    return
+  }
+  form.setFieldValue('file', f)
+  if (!form.values.name) {
+    form.setFieldValue('name', f.name.replace(/\.[^.]+$/, ''))
+  }
+}
+
+const submit = form.handleSubmit(async (values) => {
+  localError.value = ''
+  if (!values.file) {
+    localError.value = 'Prosimo izberite datoteko.'
+    return
+  }
+  const ext = (values.file.name.split('.').pop() || '').toLowerCase()
+  if (!ALLOWED_EXTS.includes(ext)) {
+    localError.value = 'Nepodprta vrsta datoteke. Dovoljeno: ' + ALLOWED_EXTS.join(', ')
+    return
+  }
+  if (values.file.size > MAX_SIZE) {
+    localError.value = 'Datoteka je prevelika. Največja velikost je 25MB.'
+    return
+  }
+
+  const formData = new FormData()
+  formData.append('name', values.name)
+  formData.append('description', values.description || '')
+  formData.append('file', values.file)
+  formData.append('is_public', values.is_public ? '1' : '0')
+  if (values.contract_uuid) {
+    formData.append('contract_uuid', values.contract_uuid)
+  }
+
+  router.post(props.postUrl, formData, {
+    forceFormData: true,
+    onSuccess: () => {
+      emit('uploaded')
+      emit('close')
+      form.resetForm()
+    },
+    onError: (errors) => {
+      // Set form errors if any
+      if (errors.name) form.setFieldError('name', errors.name)
+      if (errors.description) form.setFieldError('description', errors.description)
+      if (errors.file) form.setFieldError('file', errors.file)
+      if (errors.contract_uuid) form.setFieldError('contract_uuid', errors.contract_uuid)
+    },
+  })
+})
+
+const close = () => emit('close')
+
+const onConfirm = () => {
+  submit()
+}
+</script>
+
+<template>
+  <CreateDialog
+    :show="props.show"
+    title="Dodaj dokument"
+    max-width="lg"
+    confirm-text="Naloži"
+    :processing="!!form.isSubmitting.value"
+    :disabled="!form.values.file"
+    @close="close"
+    @confirm="onConfirm"
+  >
+    <form @submit.prevent="submit" class="space-y-4">
+      <FormField v-if="props.contracts && props.contracts.length" v-slot="{ value, handleChange }" name="contract_uuid">
+        <FormItem>
+          <FormLabel>Pripiši k</FormLabel>
+          <Select :model-value="value" @update:model-value="handleChange">
+            <FormControl>
+              <SelectTrigger>
+                <SelectValue placeholder="Primer" />
+              </SelectTrigger>
+            </FormControl>
+            <SelectContent>
+              <SelectItem :value="null">Primer</SelectItem>
+              <SelectItem
+                v-for="c in props.contracts"
+                :key="c.uuid"
+                :value="c.uuid"
+              >
+                Pogodba: {{ c.reference }}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+
+      <FormField v-slot="{ componentField }" name="name">
+        <FormItem>
+          <FormLabel>Ime</FormLabel>
+          <FormControl>
+            <Input id="doc_name" v-bind="componentField" />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+
+      <FormField v-slot="{ componentField }" name="description">
+        <FormItem>
+          <FormLabel>Opis</FormLabel>
+          <FormControl>
+            <Textarea id="doc_desc" v-bind="componentField" rows="3" />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+
+      <FormField v-slot="{ value, handleChange }" name="file">
+        <FormItem>
+          <FormLabel>Datoteka (max 25MB)</FormLabel>
+          <FormControl>
+            <Input
+              id="doc_file"
+              type="file"
+              @change="onFileChange"
+              accept=".doc,.docx,.pdf,.txt,.csv,.xls,.xlsx,.jpeg,.jpg,.png"
+            />
+          </FormControl>
+          <FormMessage />
+          <div v-if="localError" class="text-sm text-red-600 mt-1">{{ localError }}</div>
+          <div v-if="value" class="text-sm text-gray-600 mt-1">
+            Izbrana datoteka: {{ value.name }} ({{ (value.size / 1024).toFixed(2) }} KB)
+          </div>
+        </FormItem>
+      </FormField>
+
+      <FormField v-slot="{ value, handleChange }" name="is_public">
+        <FormItem class="flex flex-row items-start space-x-3 space-y-0">
+          <FormControl>
+            <Switch
+              :model-value="value"
+              @update:model-value="handleChange"
+            />
+          </FormControl>
+          <div class="space-y-1 leading-none">
+            <FormLabel>Javno</FormLabel>
+          </div>
+        </FormItem>
+      </FormField>
+    </form>
+  </CreateDialog>
+</template>

resources/js/Components/DocumentsTable/DocumentViewerDialog.vue

@@ -0,0 +1,33 @@
+<script setup>
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/Components/ui/dialog'
+import { Button } from '@/Components/ui/button'
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  src: { type: String, default: '' },
+  title: { type: String, default: 'Dokument' }
+})
+const emit = defineEmits(['close'])
+</script>
+
+<template>
+  <Dialog :open="show" @update:open="(open) => !open && $emit('close')">
+    <DialogContent class="max-w-4xl">
+      <DialogHeader>
+        <DialogTitle>{{ props.title }}</DialogTitle>
+      </DialogHeader>
+      <div class="h-[70vh]">
+        <iframe v-if="props.src" :src="props.src" class="w-full h-full rounded border" />
+        <div v-else class="text-sm text-gray-500">Ni dokumenta za prikaz.</div>
+      </div>
+      <div class="flex justify-end mt-4">
+        <Button type="button" variant="outline" @click="$emit('close')">Zapri</Button>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>

resources/js/Components/DocumentsTable/DocumentsTable.vue

@@ -0,0 +1,416 @@
+<script setup>
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import {
+  faFilePdf,
+  faFileWord,
+  faFileExcel,
+  faFileLines,
+  faFileImage,
+  faFile,
+  faCircleInfo,
+  faEllipsisVertical,
+  faDownload,
+  faTrash,
+  faFileAlt,
+} from "@fortawesome/free-solid-svg-icons";
+import { ref, computed } from "vue";
+import { router } from "@inertiajs/vue3";
+import DataTable from "../DataTable/DataTableNew2.vue";
+import Dropdown from "@/Components/Dropdown.vue";
+import DeleteDialog from "../Dialogs/DeleteDialog.vue";
+import { Badge } from "@/Components/ui/badge";
+import TableActions from "@/Components/DataTable/TableActions.vue";
+import ActionMenuItem from "@/Components/DataTable/ActionMenuItem.vue";
+import { fmtDateTime } from "@/Utilities/functions";
+
+const props = defineProps({
+  documents: { type: [Array, Object], default: () => [] },
+  viewUrlBuilder: { type: Function, default: null },
+  // Optional: direct download URL builder; if absent we emit 'download'
+  downloadUrlBuilder: { type: Function, default: null },
+  // Optional: direct delete URL builder; if absent we emit 'delete'
+  deleteUrlBuilder: { type: Function, default: null },
+  edit: { type: Boolean, default: false },
+  pageSize: {
+    type: Number,
+    default: 15,
+  },
+  pageSizeOptions: {
+    type: Array,
+    default: () => [10, 15, 25, 50, 100],
+  },
+  // Server-side pagination support
+  clientCase: { type: Object, default: null },
+});
+
+// Define columns for DataTable
+const columns = [
+  { key: "name", label: "Naziv", sortable: false },
+  { key: "type", label: "Vrsta", sortable: false },
+  { key: "size", label: "Velikost", align: "right", sortable: false },
+  { key: "created_at", label: "Dodano", sortable: false },
+  { key: "source", label: "Vir", sortable: false },
+  { key: "description", label: "Opis", align: "center", sortable: false },
+  { key: "actions", label: "", sortable: false, hideable: false, align: "center" },
+];
+
+// Derive a human-friendly source for a document: Case or Contract reference
+const sourceLabel = (doc) => {
+  // Server can include optional documentable meta; fall back to type
+  if (doc.documentable_type?.toLowerCase?.().includes("contract")) {
+    return doc.contract_reference ? `Pogodba ${doc.contract_reference}` : "Pogodba";
+  }
+  return "Primer";
+};
+
+const emit = defineEmits(["view", "download", "delete", "edit"]);
+
+// Support both array and Resource Collection (object with data property)
+const documentsData = computed(() => {
+  if (Array.isArray(props.documents)) {
+    return props.documents;
+  }
+  return props.documents?.data || [];
+});
+
+// Check if using server-side pagination
+const isServerSide = computed(() => {
+  return !!(props.documents?.links && props.clientCase);
+});
+
+const formatSize = (bytes) => {
+  if (bytes == null) return "-";
+  const thresh = 1024;
+  if (Math.abs(bytes) < thresh) return bytes + " B";
+  const units = ["KB", "MB", "GB", "TB"];
+  let u = -1;
+  do {
+    bytes /= thresh;
+    ++u;
+  } while (Math.abs(bytes) >= thresh && u < units.length - 1);
+  return bytes.toFixed(1) + " " + units[u];
+};
+
+const extFrom = (doc) => {
+  let ext = (doc?.extension || "").toLowerCase();
+  if (!ext && doc?.original_name) {
+    const parts = String(doc.original_name).toLowerCase().split(".");
+    if (parts.length > 1) ext = parts.pop();
+  }
+  // derive from mime
+  if (!ext && doc?.mime_type) {
+    const mime = String(doc.mime_type).toLowerCase();
+    if (mime.includes("pdf")) ext = "pdf";
+    else if (mime.includes("word") || mime.includes("msword") || mime.includes("doc"))
+      ext = "docx";
+    else if (mime.includes("excel") || mime.includes("sheet")) ext = "xlsx";
+    else if (mime.includes("csv")) ext = "csv";
+    else if (mime.startsWith("image/")) ext = "img";
+    else if (mime.includes("text")) ext = "txt";
+  }
+  return ext;
+};
+
+const fileTypeInfo = (doc) => {
+  const ext = extFrom(doc);
+  const mime = (doc?.mime_type || "").toLowerCase();
+  switch (ext) {
+    case "pdf":
+      return { icon: faFilePdf, color: "text-red-600", label: "PDF" };
+    case "doc":
+    case "docx":
+      return {
+        icon: faFileWord,
+        color: "text-blue-600",
+        label: (ext || "DOCX").toUpperCase(),
+      };
+    case "xls":
+    case "xlsx":
+      return {
+        icon: faFileExcel,
+        color: "text-green-600",
+        label: (ext || "XLSX").toUpperCase(),
+      };
+    case "csv":
+      // treat CSV as spreadsheet-like
+      return { icon: faFileExcel, color: "text-emerald-600", label: "CSV" };
+    case "txt":
+      return { icon: faFileLines, color: "text-slate-600", label: "TXT" };
+    case "jpg":
+    case "jpeg":
+    case "png":
+    case "img":
+      return {
+        icon: faFileImage,
+        color: "text-fuchsia-600",
+        label: ext === "img" ? "IMG" : (ext || "IMG").toUpperCase(),
+      };
+    default:
+      if (mime.startsWith("image/"))
+        return { icon: faFileImage, color: "text-fuchsia-600", label: "IMG" };
+      return {
+        icon: faFile,
+        color: "text-gray-600",
+        label: (ext || "FILE").toUpperCase(),
+      };
+  }
+};
+
+const hasDesc = (doc) => {
+  const d = doc?.description;
+  return typeof d === "string" && d.trim().length > 0;
+};
+
+const expandedDescKey = ref(null);
+const rowKey = (doc) => doc?.uuid ?? doc?.id ?? null;
+const toggleDesc = (doc) => {
+  const key = rowKey(doc);
+  if (!key) return;
+  expandedDescKey.value = expandedDescKey.value === key ? null : key;
+};
+
+// Track which documents have expanded descriptions
+const isExpanded = (doc) => {
+  const key = rowKey(doc);
+  return key ? expandedDescKey.value === key : false;
+};
+
+const resolveDownloadUrl = (doc) => {
+  if (typeof props.downloadUrlBuilder === "function")
+    return props.downloadUrlBuilder(doc);
+  // If no builder provided, parent can handle via emitted event
+  return null;
+};
+
+const handleDownload = (doc) => {
+  const url = resolveDownloadUrl(doc);
+  if (url) {
+    // Trigger a navigation to a direct-download endpoint; server should set Content-Disposition: attachment
+    const a = document.createElement("a");
+    a.href = url;
+    a.target = "_self";
+    a.rel = "noopener";
+    // In many browsers, simply setting href is enough
+    a.click();
+  } else {
+    emit("download", doc);
+  }
+  closeActions();
+};
+
+// ---------------- Delete logic ----------------
+const confirmDelete = ref(false);
+const deleting = ref(false);
+const docToDelete = ref(null);
+
+const resolveDeleteUrl = (doc) => {
+  // 1. Explicit builder via prop takes precedence
+  if (typeof props.deleteUrlBuilder === "function") {
+    return props.deleteUrlBuilder(doc);
+  }
+  // 2. Attempt automatic route resolution (requires Ziggy's global `route` helper)
+  try {
+    const type = (doc?.documentable_type || "").toLowerCase();
+    // Contract document
+    if (type.includes("contract") && doc?.contract_uuid && doc?.uuid) {
+      if (typeof route === "function") {
+        return route("contract.document.delete", {
+          contract: doc.contract_uuid,
+          document: doc.uuid,
+        });
+      }
+    }
+    // Case document
+    if (doc?.client_case_uuid && doc?.uuid) {
+      if (typeof route === "function") {
+        return route("clientCase.document.delete", {
+          client_case: doc.client_case_uuid,
+          document: doc.uuid,
+        });
+      }
+    }
+  } catch (e) {
+    // swallow – fallback to emit path
+  }
+  // 3. Fallback: no URL, caller must handle emitted event
+  return null;
+};
+
+const requestDelete = async () => {
+  if (!docToDelete.value) {
+    return;
+  }
+  const url = resolveDeleteUrl(docToDelete.value);
+  deleting.value = true;
+  try {
+    if (url) {
+      await router.delete(url, { preserveScroll: true });
+    } else {
+      emit("delete", docToDelete.value);
+    }
+  } finally {
+    deleting.value = false;
+    confirmDelete.value = false;
+    docToDelete.value = null;
+  }
+};
+
+const askDelete = (doc) => {
+  docToDelete.value = doc;
+  confirmDelete.value = true;
+};
+
+const closeDeleteDialog = () => {
+  confirmDelete.value = false;
+  docToDelete.value = null;
+};
+
+function closeActions() {
+  /* noop placeholder for symmetry; Dropdown auto-closes */
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <DataTable
+      :columns="columns"
+      :data="documentsData"
+      :meta="isServerSide ? documents : null"
+      :route-name="isServerSide ? 'clientCase.show' : null"
+      :route-params="isServerSide ? { client_case: clientCase.uuid } : {}"
+      :only-props="isServerSide ? ['documents'] : []"
+      :page-size="pageSize"
+      :page-size-options="pageSizeOptions"
+      page-param-name="documentsPage"
+      per-page-param-name="documentsPerPage"
+      :show-pagination="false"
+      :show-toolbar="true"
+      :hoverable="true"
+      row-key="uuid"
+      empty-text="Ni dokumentov."
+    >
+      <template #toolbar-actions>
+        <slot name="add" />
+      </template>
+      <!-- Name column -->
+      <template #cell-name="{ row }">
+        <div>
+          <div class="flex items-center gap-2">
+            <button
+              type="button"
+              class="text-indigo-600 hover:underline"
+              @click.stop="$emit('view', row)"
+            >
+              {{ row.name }}
+            </button>
+            <Badge
+              v-if="row.is_public"
+              variant="secondary"
+              class="bg-green-100 text-green-700 hover:bg-green-200"
+              >Public</Badge
+            >
+          </div>
+          <!-- Expanded description -->
+          <div
+            v-if="isExpanded(row)"
+            class="mt-2 bg-gray-50 px-4 py-3 text-sm text-gray-700 whitespace-pre-wrap border-l-2 border-indigo-400 rounded"
+          >
+            {{ row.description }}
+          </div>
+        </div>
+      </template>
+
+      <!-- Type column -->
+      <template #cell-type="{ row }">
+        <div class="flex items-center gap-2">
+          <FontAwesomeIcon
+            :icon="fileTypeInfo(row).icon"
+            :class="['h-5 w-5', fileTypeInfo(row).color]"
+          />
+          <span class="text-gray-700">{{ fileTypeInfo(row).label }}</span>
+        </div>
+      </template>
+
+      <!-- Size column -->
+      <template #cell-size="{ row }">
+        {{ formatSize(row.size) }}
+      </template>
+
+      <!-- Created at column -->
+      <template #cell-created_at="{ row }">
+        <div class="text-gray-800 font-medium leading-tight">
+          {{ row.created_by }}
+        </div>
+        <div v-if="row.created_at" class="mt-1">
+          <span
+            class="inline-block px-2 py-0.5 rounded text-[11px] bg-gray-100 text-gray-600 tracking-wide"
+          >
+            {{ fmtDateTime(row.created_at) }}
+          </span>
+        </div>
+      </template>
+
+      <!-- Source column -->
+      <template #cell-source="{ row }">
+        <Badge
+          variant="secondary"
+          class="bg-purple-100 text-purple-700 hover:bg-purple-200"
+          >{{ sourceLabel(row) }}</Badge
+        >
+      </template>
+
+      <!-- Description column -->
+      <template #cell-description="{ row }">
+        <div class="flex justify-center">
+          <button
+            class="inline-flex items-center justify-center h-8 w-8 rounded-full hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+            :disabled="!hasDesc(row)"
+            :title="hasDesc(row) ? 'Pokaži opis' : 'Ni opisa'"
+            type="button"
+            @click.stop="toggleDesc(row)"
+          >
+            <FontAwesomeIcon :icon="faCircleInfo" class="h-4 w-4 text-gray-700" />
+          </button>
+        </div>
+      </template>
+
+      <!-- Actions column -->
+      <template #cell-actions="{ row }">
+        <TableActions align="right">
+          <template #default>
+            <ActionMenuItem
+              v-if="edit"
+              :icon="faCircleInfo"
+              label="Uredi"
+              @click="emit('edit', row)"
+            />
+            <ActionMenuItem
+              :icon="faDownload"
+              label="Prenos"
+              @click="handleDownload(row)"
+            />
+            <ActionMenuItem
+              v-if="edit"
+              :icon="faTrash"
+              label="Izbriši"
+              danger
+              @click="askDelete(row)"
+            />
+          </template>
+        </TableActions>
+      </template>
+    </DataTable>
+
+    <!-- Delete confirmation dialog -->
+    <DeleteDialog
+      :show="confirmDelete"
+      title="Potrditev brisanja"
+      :message="`Ali res želite izbrisati dokument '${docToDelete?.name}'?`"
+      :item-name="docToDelete?.name"
+      confirm-text="Izbriši"
+      :processing="deleting"
+      @close="closeDeleteDialog"
+      @confirm="requestDelete"
+    />
+  </div>
+</template>

resources/js/Components/DragDropList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { FwbListGroup, FwbListGroupItem } from 'flowbite-vue';
+// ListGroup components removed - using custom implementation
 import { computed, onMounted, ref, useTemplateRef, watch } from 'vue';
 import draggable from 'vuedraggable';
 
@@ -68,13 +68,13 @@ watch(
             group="actions"
         >
             <template #item="{element, index}">
-                <fwb-list-group-item class="flex justify-between">
+                <li class="flex justify-between items-center p-2 bg-white border border-gray-200 rounded-md mb-1 hover:bg-gray-50 transition-colors">
                     <span class="text">{{ element.name }} </span>
                     
-                    <i class=" cursor-pointer" @click="removeAt(index, containerOne)"><svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                    <button type="button" class="cursor-pointer p-1 hover:bg-gray-100 rounded" @click="removeAt(index, containerOne)"><svg class="w-6 h-6 text-gray-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
-                    </svg></i>
-                </fwb-list-group-item>
+                    </svg></button>
+                </li>
             </template>
         </draggable>
         <draggable 
@@ -92,13 +92,13 @@ watch(
             group="actions"
         >
             <template #item="{element, index}">
-                <fwb-list-group-item class="flex justify-between">
+                <li class="flex justify-between items-center p-2 bg-white border border-gray-200 rounded-md mb-1 hover:bg-gray-50 transition-colors">
                     <span class="text">{{ element.name }} </span>
 
-                    <i class="cursor-pointer" @click="removeAt(index, containerOne)"><svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                    <button type="button" class="cursor-pointer p-1 hover:bg-gray-100 rounded" @click="removeAt(index, containerOne)"><svg class="w-6 h-6 text-gray-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
-                    </svg></i>
-                </fwb-list-group-item>
+                    </svg></button>
+                </li>
             </template>
         </draggable>
     </div>

resources/js/Components/Dropdown.vue

@@ -1,5 +1,10 @@
 <script setup>
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, ref, watch, onMounted, onUnmounted } from 'vue';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/Components/ui/dropdown-menu';
 
 const props = defineProps({
     align: {
@@ -20,64 +25,64 @@ const props = defineProps({
     },
 });
 
-let open = ref(false);
-const triggerEl = ref(null);
-const panelEl = ref(null);
-const panelStyle = ref({ top: '0px', left: '0px' });
+const open = ref(false);
 
-const closeOnEscape = (e) => {
-    if (open.value && e.key === 'Escape') {
+// Expose close method for parent components
+const close = () => {
+  open.value = false;
+};
+
+defineExpose({
+  close,
+  open,
+});
+
+// Close dropdown when dialog opens
+const handleDialogOpen = () => {
+  if (open.value) {
     open.value = false;
   }
 };
 
-const updatePosition = () => {
-    const t = triggerEl.value;
-    const p = panelEl.value;
-    if (!t || !p) return;
-    const rect = t.getBoundingClientRect();
-    // Ensure we have updated width
-    const pw = p.offsetWidth || 0;
-    const ph = p.offsetHeight || 0;
-    const margin = 8; // small spacing from trigger
-    let left = rect.left;
-    if (props.align === 'right') {
-        left = rect.right - pw;
-    } else if (props.align === 'left') {
-        left = rect.left;
-    }
-    // Clamp within viewport
-    const maxLeft = Math.max(0, window.innerWidth - pw - margin);
-    left = Math.min(Math.max(margin, left), maxLeft);
-    let top = rect.bottom + margin;
-    // If not enough space below, place above the trigger
-    if (top + ph > window.innerHeight) {
-        top = Math.max(margin, rect.top - ph - margin);
-    }
-    panelStyle.value = { top: `${top}px`, left: `${left}px` };
-};
+// Watch for dialog opens using MutationObserver
+let observer = null;
 
-const onWindowChange = () => {
-    updatePosition();
-};
+onMounted(() => {
+  // Listen for custom dialog open events
+  window.addEventListener('dialog:open', handleDialogOpen);
   
-watch(open, async (val) => {
-    if (val) {
-        await nextTick();
-        updatePosition();
-        window.addEventListener('resize', onWindowChange);
-        window.addEventListener('scroll', onWindowChange, true);
-    } else {
-        window.removeEventListener('resize', onWindowChange);
-        window.removeEventListener('scroll', onWindowChange, true);
+  // Watch for dialog state changes in the DOM
+  observer = new MutationObserver((mutations) => {
+    // Check if any dialog has data-state="open"
+    const openDialogs = document.querySelectorAll('[data-state="open"]');
+    const hasOpenDialog = Array.from(openDialogs).some((dialog) => {
+      // Check if it's a dialog element (has role="dialog" or is DialogContent)
+      const role = dialog.getAttribute('role');
+      const isDialogContent = dialog.classList?.contains('DialogContent') || 
+                             dialog.querySelector('[role="dialog"]') ||
+                             dialog.closest('[role="dialog"]');
+      
+      return role === 'dialog' || isDialogContent;
+    });
+    
+    if (hasOpenDialog && open.value) {
+      handleDialogOpen();
     }
   });
   
-onMounted(() => document.addEventListener('keydown', closeOnEscape));
+  observer.observe(document.body, {
+    attributes: true,
+    attributeFilter: ['data-state'],
+    subtree: true,
+    childList: true,
+  });
+});
+
 onUnmounted(() => {
-    document.removeEventListener('keydown', closeOnEscape);
-    window.removeEventListener('resize', onWindowChange);
-    window.removeEventListener('scroll', onWindowChange, true);
+  window.removeEventListener('dialog:open', handleDialogOpen);
+  if (observer) {
+    observer.disconnect();
+  }
 });
 
 const widthClass = computed(() => {
@@ -90,57 +95,38 @@ const widthClass = computed(() => {
         'wide': 'w-[34rem] max-w-[90vw]',
         'auto': '',
     };
-    return map[props.width.toString()] ?? '';
+    return map[props.width.toString()] || '';
 });
 
-const alignmentClasses = computed(() => {
-    if (props.align === 'left') {
-        return 'ltr:origin-top-left rtl:origin-top-right start-0';
-    }
-
-    if (props.align === 'right') {
-        return 'ltr:origin-top-right rtl:origin-top-left end-0';
-    }
-
-    return 'origin-top';
+// Map align prop to shadcn-vue's align prop
+// 'left' -> 'start', 'right' -> 'end'
+const alignProp = computed(() => {
+    if (props.align === 'left') return 'start';
+    if (props.align === 'right') return 'end';
+    return 'start';
 });
-const onContentClick = () => {
-    if (props.closeOnContentClick) {
-        open.value = false;
+
+const combinedContentClasses = computed(() => {
+    // Merge width class with custom content classes
+    // Note: shadcn-vue already provides base styling, so we append custom classes
+    const classes = [widthClass.value];
+    if (props.contentClasses && props.contentClasses.length) {
+        classes.push(...props.contentClasses);
     }
-};
+    return classes.filter(Boolean).join(' ');
+});
 </script>
 
 <template>
-    <div class="relative" ref="triggerEl">
-        <div @click="open = ! open">
+    <DropdownMenu v-model:open="open">
+        <DropdownMenuTrigger as-child>
             <slot name="trigger" />
-        </div>
-
-        <teleport to="body">
-            <!-- Full Screen Dropdown Overlay at body level -->
-            <div v-show="open" class="fixed inset-0 z-[2147483646]" @click="open = false" />
-
-            <transition
-                enter-active-class="transition ease-out duration-200"
-                enter-from-class="transform opacity-0 scale-95"
-                enter-to-class="transform opacity-100 scale-100"
-                leave-active-class="transition ease-in duration-75"
-                leave-from-class="transform opacity-100 scale-100"
-                leave-to-class="transform opacity-0 scale-95"
+        </DropdownMenuTrigger>
+        <DropdownMenuContent 
+            :align="alignProp" 
+            :class="combinedContentClasses"
         >
-                <div
-                    v-show="open"
-                    ref="panelEl"
-                    class="fixed z-[2147483647] rounded-md shadow-lg"
-                    :class="[widthClass]"
-                    :style="[panelStyle]"
-                >
-                    <div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses" @click="onContentClick">
             <slot name="content" />
-                    </div>
-                </div>
-            </transition>
-        </teleport>
-    </div>
+        </DropdownMenuContent>
+    </DropdownMenu>
 </template>

resources/js/Components/EmailCreateForm.vue

@@ -1,168 +0,0 @@
-<script setup>
-import { computed, watch } from "vue";
-import DialogModal from "./DialogModal.vue";
-import InputLabel from "./InputLabel.vue";
-import SectionTitle from "./SectionTitle.vue";
-import TextInput from "./TextInput.vue";
-import InputError from "./InputError.vue";
-import PrimaryButton from "./PrimaryButton.vue";
-import { useForm } from "@inertiajs/vue3";
-
-/*
-  EmailCreateForm / Email editor
-  - Props mirror Phone/Address forms for consistency
-  - Routes assumed: person.email.create, person.email.update
-  - Adjust route names/fields to match your backend if different
-*/
-
-const props = defineProps({
-  show: { type: Boolean, default: false },
-  person: { type: Object, required: true },
-  // kept for parity with other *CreateForm components; not used directly here
-  types: { type: Array, default: () => [] },
-  edit: { type: Boolean, default: false },
-  id: { type: Number, default: 0 },
-  // When true, force-show the auto mail opt-in even if person.client wasn't eager loaded
-  isClientContext: { type: Boolean, default: false },
-});
-
-// Inertia useForm handles processing and errors for us
-
-const emit = defineEmits(["close"]);
-
-const close = () => {
-  emit("close");
-  // Clear validation errors and reset minimal fields after closing so the form reopens cleanly
-  setTimeout(() => {
-    form.clearErrors();
-    form.reset("value", "label", "receive_auto_mails");
-  }, 0);
-};
-
-const form = useForm({
-  value: "",
-  label: "",
-  receive_auto_mails: false,
-});
-
-const resetForm = () => {
-  form.reset("value", "label", "receive_auto_mails");
-};
-
-const create = async () => {
-  form.post(route("person.email.create", props.person), {
-    preserveScroll: true,
-    onSuccess: () => {
-      close();
-      resetForm();
-    },
-  });
-};
-
-const update = async () => {
-  form.put(route("person.email.update", { person: props.person, email_id: props.id }), {
-    preserveScroll: true,
-    onSuccess: () => {
-      close();
-      resetForm();
-    },
-  });
-};
-
-watch(
-  () => props.show,
-  (newVal) => {
-    if (!newVal) {
-      return;
-    }
-    if (props.edit && props.id) {
-      const list = Array.isArray(props.person?.emails) ? props.person.emails : [];
-      const email = list.find((e) => e.id === props.id);
-      if (email) {
-        form.value = email.value ?? email.email ?? email.address ?? "";
-        form.label = email.label ?? "";
-        form.receive_auto_mails = !!email.receive_auto_mails;
-      } else {
-        form.reset("value", "label", "receive_auto_mails");
-      }
-    } else {
-      form.reset("value", "label", "receive_auto_mails");
-    }
-  }
-);
-
-const submit = () => (props.edit ? update() : create());
-</script>
-
-<template>
-  <DialogModal :show="show" @close="close">
-    <template #title>
-      <span v-if="edit">Spremeni email</span>
-      <span v-else>Dodaj email</span>
-    </template>
-    <template #content>
-      <form @submit.prevent="submit">
-        <SectionTitle class="border-b mb-4">
-          <template #title>Email</template>
-        </SectionTitle>
-
-        <div class="col-span-6 sm:col-span-4">
-          <InputLabel for="em_value" value="E-pošta" />
-          <TextInput
-            id="em_value"
-            v-model="form.value"
-            type="email"
-            class="mt-1 block w-full"
-            autocomplete="email"
-          />
-          <InputError
-            v-if="form.errors.value"
-            v-for="err in [].concat(form.errors.value || [])"
-            :key="err"
-            :message="err"
-          />
-        </div>
-
-        <div class="col-span-6 sm:col-span-4">
-          <InputLabel for="em_label" value="Oznaka (neobvezno)" />
-          <TextInput
-            id="em_label"
-            v-model="form.label"
-            type="text"
-            class="mt-1 block w-full"
-            autocomplete="off"
-          />
-          <InputError
-            v-if="form.errors.label"
-            v-for="err in [].concat(form.errors.label || [])"
-            :key="err"
-            :message="err"
-          />
-        </div>
-
-        <div
-          v-if="props.person?.client || isClientContext"
-          class="mt-3 flex items-center gap-2"
-        >
-          <input
-            id="em_receive_auto_mails"
-            type="checkbox"
-            v-model="form.receive_auto_mails"
-            class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
-          />
-          <label for="em_receive_auto_mails" class="text-sm"
-            >Prejemaj samodejna e-sporočila</label
-          >
-        </div>
-
-        <div class="flex justify-end mt-4">
-          <PrimaryButton
-            :class="{ 'opacity-25': form.processing }"
-            :disabled="form.processing"
-            >Shrani</PrimaryButton
-          >
-        </div>
-      </form>
-    </template>
-  </DialogModal>
-</template>

resources/js/Components/EmptyState.vue

@@ -0,0 +1,124 @@
+<script setup>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { computed } from 'vue';
+
+const props = defineProps({
+  icon: {
+    type: [String, Object, Array],
+    default: null,
+  },
+  title: {
+    type: String,
+    default: 'Ni podatkov',
+  },
+  description: {
+    type: String,
+    default: null,
+  },
+  action: {
+    type: Object,
+    default: null,
+  },
+  size: {
+    type: String,
+    default: 'md', // sm, md, lg
+    validator: (value) => ['sm', 'md', 'lg'].includes(value),
+  },
+});
+
+const sizeClasses = computed(() => {
+  const sizes = {
+    sm: {
+      icon: 'text-4xl',
+      title: 'text-base',
+      description: 'text-sm',
+      container: 'py-8',
+    },
+    md: {
+      icon: 'text-5xl',
+      title: 'text-lg',
+      description: 'text-sm',
+      container: 'py-12',
+    },
+    lg: {
+      icon: 'text-6xl',
+      title: 'text-xl',
+      description: 'text-base',
+      container: 'py-16',
+    },
+  };
+  return sizes[props.size];
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col items-center justify-center text-center"
+    :class="sizeClasses.container"
+  >
+    <!-- Icon -->
+    <div
+      v-if="icon"
+      class="mb-4 text-gray-400"
+      :class="sizeClasses.icon"
+    >
+      <FontAwesomeIcon :icon="icon" />
+    </div>
+    <!-- Default icon if none provided -->
+    <div
+      v-else
+      class="mb-4 text-gray-400"
+      :class="sizeClasses.icon"
+    >
+      <svg
+        class="mx-auto"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+          d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+        />
+      </svg>
+    </div>
+
+    <!-- Title -->
+    <h3
+      class="font-medium text-gray-900 mb-2"
+      :class="sizeClasses.title"
+    >
+      {{ title }}
+    </h3>
+
+    <!-- Description -->
+    <p
+      v-if="description"
+      class="text-gray-500 max-w-sm mb-6"
+      :class="sizeClasses.description"
+    >
+      {{ description }}
+    </p>
+
+    <!-- Action button -->
+    <div v-if="action">
+      <component
+        :is="action.to ? 'Link' : 'button'"
+        :href="action.to"
+        @click="action.onClick"
+        class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors"
+      >
+        <FontAwesomeIcon
+          v-if="action.icon"
+          :icon="action.icon"
+          class="w-4 h-4"
+        />
+        {{ action.label }}
+      </component>
+    </div>
+  </div>
+</template>
+
+

resources/js/Components/Modal.vue

@@ -22,19 +22,27 @@ const showSlot = ref(props.show);
 
 watch(
   () => props.show,
-  () => {
+  (newVal) => {
     if (props.show) {
       document.body.style.overflow = "hidden";
       showSlot.value = true;
-      dialog.value?.showModal();
+      // Use nextTick to ensure dialog ref is available
+      setTimeout(() => {
+        if (dialog.value) {
+          dialog.value.showModal();
+        }
+      }, 0);
     } else {
       document.body.style.overflow = null;
       setTimeout(() => {
-        dialog.value?.close();
+        if (dialog.value) {
+          dialog.value.close();
+        }
         showSlot.value = false;
       }, 200);
     }
-  }
+  },
+  { immediate: true }
 );
 
 const close = () => {

resources/js/Components/Pagination.vue

@@ -1,200 +1,319 @@
 <script setup>
-import { Link } from "@inertiajs/vue3";
-import { computed } from "vue";
+import { Link, router } from "@inertiajs/vue3";
+import { computed, ref } from "vue";
+import { Input } from "@/Components/ui/input";
+import { Button } from "@/Components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/Components/ui/select";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationItem,
+  PaginationLast,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/Components/ui/pagination";
+import { Separator } from "@/components/ui/separator";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-vue-next";
+import { toInteger } from "lodash";
 
 const props = defineProps({
   links: { type: Array, default: () => [] },
   from: { type: Number, default: 0 },
   to: { type: Number, default: 0 },
   total: { type: Number, default: 0 },
+  perPage: { type: Number, default: 15 },
+  pageSizeOptions: { type: Array, default: () => [10, 15, 25, 50, 100] },
+  currentPage: { type: Number, default: 0 },
+  lastPage: { type: Number, default: 0 },
+  perPageParam: { type: String, default: "per_page" }, // e.g., 'activities_per_page', 'contracts_per_page'
+  pageParam: { type: String, default: "page" }, // e.g., 'activities_page', 'contracts_page'
 });
 
 const num = props.links?.length || 0;
 
-const prevLink = computed(() => (num > 0 ? props.links[0] : null));
-const nextLink = computed(() => (num > 1 ? props.links[num - 1] : null));
-const numericLinks = computed(() => {
-  if (num < 3) return [];
-  return props.links
-    .slice(1, num - 1)
-    .map((l) => ({
-      ...l,
-      page: Number.parseInt(String(l.label).replace(/[^0-9]/g, ""), 10),
-    }))
-    .filter((l) => !Number.isNaN(l.page));
+const prevLink = computed(() => {
+  if (num > 0 && props.links && Array.isArray(props.links) && props.links[0]) {
+    return props.links[0];
+  }
+  return null;
 });
-const currentPage = computed(() => numericLinks.value.find((l) => l.active)?.page || 1);
-const lastPage = computed(() =>
-  numericLinks.value.length ? Math.max(...numericLinks.value.map((l) => l.page)) : 1
+const nextLink = computed(() => {
+  if (num > 1 && props.links && Array.isArray(props.links) && props.links[num - 1]) {
+    return props.links[num - 1];
+  }
+  return null;
+});
+const firstLink = computed(() => {
+  if (num < 3 || !props.links || !Array.isArray(props.links)) return null;
+  // Find the first numeric link (page 1)
+  for (let i = 1; i < num - 1; i++) {
+    const link = props.links[i];
+    if (!link) continue;
+    const page = Number.parseInt(String(link?.label || "").replace(/[^0-9]/g, ""), 10);
+    if (page === 1) return link;
+  }
+  return null;
+});
+const lastLink = computed(() => {
+  if (num < 3 || !props.links || !Array.isArray(props.links)) return null;
+  // Find the last numeric link
+  let maxPage = 0;
+  let maxLink = null;
+  for (let i = 1; i < num - 1; i++) {
+    const link = props.links[i];
+    if (!link) continue;
+    const page = Number.parseInt(String(link?.label || "").replace(/[^0-9]/g, ""), 10);
+    if (!Number.isNaN(page) && page > maxPage) {
+      maxPage = page;
+      maxLink = link;
+    }
+  }
+  return maxLink;
+});
+
+// Generate visible page numbers with ellipsis (similar to DataTableClient)
+const visiblePages = computed(() => {
+  const pages = [];
+  const total = props.lastPage;
+  const current = props.currentPage;
+  const maxVisible = 5;
+
+  if (total <= maxVisible) {
+    for (let i = 1; i <= total; i++) {
+      pages.push(i);
+    }
+    return pages;
+  }
+
+  // Calculate window around current page
+  const half = Math.floor(maxVisible / 2);
+  let start = Math.max(1, current - half);
+  let end = Math.min(total, start + maxVisible - 1);
+  start = Math.max(1, Math.min(start, end - maxVisible + 1));
+
+  // Handle first page
+  if (start > 1) {
+    pages.push(1);
+    if (start > 2) pages.push("...");
+  }
+
+  // Add pages in window
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+
+  // Handle last page
+  if (end < total) {
+    if (end < total - 1) pages.push("...");
+    pages.push(total);
+  }
+
+  return pages;
+});
+
+const gotoInput = ref("");
+
+// Navigate to a specific page using Laravel's pagination links
+function navigateToPage(pageNum) {
+  if (!pageNum || pageNum < 1 || pageNum > props.lastPage) return;
+
+  const url = new URL(window.location.href);
+  url.searchParams.set(props.pageParam, String(pageNum));
+
+  router.get(
+    url.pathname + url.search,
+    {},
+    {
+      preserveState: true,
+      preserveScroll: true,
+      replace: true,
+    }
   );
-const linkByPage = computed(() => {
-  const m = new Map();
-  for (const l of numericLinks.value) m.set(l.page, l);
-  return m;
-});
-const windowItems = computed(() => {
-  const items = [];
-  const cur = currentPage.value;
-  const last = lastPage.value;
-  const show = new Set([1, last, cur - 1, cur, cur + 1]);
-  if (cur <= 3) {
-    show.add(2);
-    show.add(3);
-  }
-  if (cur >= last - 2) {
-    show.add(last - 1);
-    show.add(last - 2);
 }
 
-  // Prev
-  items.push({ kind: "prev", link: prevLink.value });
+function goToPage() {
+  const raw = String(gotoInput.value || "").trim();
+  const n = Number(raw);
+  if (!Number.isFinite(n) || n < 1 || n > props.lastPage) {
+    gotoInput.value = "";
+    return;
+  }
+  navigateToPage(n);
+  gotoInput.value = "";
+}
 
-  // Pages with ellipses
-  let inGap = false;
-  for (let p = 1; p <= last; p++) {
-    if (show.has(p)) {
-      items.push({
-        kind: "page",
-        link: linkByPage.value.get(p) || {
-          url: null,
-          label: String(p),
-          active: p === cur,
-        },
-      });
-      inGap = false;
-    } else if (!inGap) {
-      items.push({ kind: "ellipsis" });
-      inGap = true;
+function handleKeyPress(event) {
+  if (event.key === "Enter") {
+    goToPage();
   }
 }
 
-  // Next
-  items.push({ kind: "next", link: nextLink.value });
+function handlePerPageChange(value) {
+  const newPerPage = Number(value);
+  if (!newPerPage) return;
 
-  return items;
-});
+  const url = new URL(window.location.href);
+  url.searchParams.set(props.perPageParam, newPerPage);
+  url.searchParams.set(props.pageParam, "1"); // Reset to first page
+
+  router.get(
+    url.pathname + url.search,
+    {},
+    {
+      preserveState: true,
+      preserveScroll: true,
+      replace: true,
+    }
+  );
+}
 </script>
+
 <template>
-  <div class="flex items-center justify-between bg-white px-4 py-3 sm:px-6">
-    <!-- Mobile: Prev / Next -->
-    <div class="flex flex-1 justify-between sm:hidden">
-      <component
-        :is="links?.[0]?.url ? Link : 'span'"
-        :href="links?.[0]?.url"
-        :aria-disabled="!links?.[0]?.url"
-        :tabindex="!links?.[0]?.url ? -1 : 0"
-        class="relative inline-flex items-center rounded-md border px-4 py-2 text-sm font-medium"
-        :class="
-          links?.[0]?.url
-            ? 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50'
-            : 'border-gray-200 bg-gray-100 text-gray-400'
-        "
-      >
-        Prejšnja
-      </component>
-      <component
-        :is="links?.[num - 1]?.url ? Link : 'span'"
-        :href="links?.[num - 1]?.url"
-        :aria-disabled="!links?.[num - 1]?.url"
-        :tabindex="!links?.[num - 1]?.url ? -1 : 0"
-        class="relative ml-3 inline-flex items-center rounded-md border px-4 py-2 text-sm font-medium"
-        :class="
-          links?.[num - 1]?.url
-            ? 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50'
-            : 'border-gray-200 bg-gray-100 text-gray-400'
-        "
-      >
-        Naslednja
-      </component>
-    </div>
-    <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
-      <div>
-        <p class="text-sm text-gray-700">
-          Showing
-          <span class="font-medium">{{ from }}</span>
-          to
-          <span class="font-medium">{{ to }}</span>
-          of
-          <span class="font-medium">{{ total }}</span>
-          results
-        </p>
-      </div>
-      <div>
   <nav
-          class="isolate inline-flex -space-x-px rounded-md shadow-sm"
+    class="flex flex-wrap items-center justify-between gap-3 px-2 text-sm text-gray-700 sm:px-5"
     aria-label="Pagination"
   >
-          <template v-for="(item, idx) in windowItems" :key="idx">
-            <!-- Prev / Next -->
-            <component
-              v-if="item.kind === 'prev' || item.kind === 'next'"
-              :is="item.link?.url ? Link : 'span'"
-              :href="item.link?.url"
-              class="relative inline-flex items-center px-2 py-2 ring-1 ring-inset ring-gray-300 focus:z-20 focus:outline-offset-0"
-              :class="{
-                'rounded-l-md': item.kind === 'prev',
-                'rounded-r-md': item.kind === 'next',
-                'text-gray-900 hover:bg-gray-50': item.link?.url,
-                'text-gray-400 bg-gray-100': !item.link?.url,
-              }"
+    <!-- Mobile: Simple prev/next -->
+    <div class="flex flex-1 justify-between sm:hidden">
+      <button
+        v-if="prevLink?.url"
+        @click="navigateToPage(currentPage - 1)"
+        class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
       >
-              <span class="sr-only">{{
-                item.kind === "prev" ? "Prejšnja" : "Naslednja"
-              }}</span>
-              <svg
-                v-if="item.kind === 'prev'"
-                class="h-5 w-5"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                aria-hidden="true"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-              <svg
-                v-else
-                class="h-5 w-5"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                aria-hidden="true"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-            </component>
-
-            <!-- Ellipsis -->
+        Prejšnja
+      </button>
       <span
-              v-else-if="item.kind === 'ellipsis'"
-              class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-500 ring-1 ring-inset ring-gray-200 select-none"
-              >…</span
+        v-else
+        class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-400 cursor-not-allowed opacity-50"
       >
+        Prejšnja
+      </span>
+      <button
+        v-if="nextLink?.url"
+        @click="navigateToPage(currentPage + 1)"
+        class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
+      >
+        Naslednja
+      </button>
+      <span
+        v-else
+        class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-400 cursor-not-allowed opacity-50"
+      >
+        Naslednja
+      </span>
+    </div>
 
-            <!-- Page number -->
-            <component
-              v-else-if="item.kind === 'page'"
-              :is="item.link?.url ? Link : 'span'"
-              :href="item.link?.url"
-              class="relative inline-flex items-center px-4 py-2 text-sm font-semibold focus:outline-offset-0"
-              :class="{
-                'text-gray-700 ring-1 ring-inset ring-gray-300': !item.link?.url,
-                'text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20':
-                  item.link?.url && !item.link?.active,
-                'z-10 bg-blue-600 text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600':
-                  item.link?.active,
-              }"
+    <!-- Desktop: Full pagination -->
+    <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+      <!-- Page stats with modern badge style -->
+      <div v-if="total > 0" class="flex items-center gap-2">
+        <span class="text-sm text-muted-foreground">Prikazano</span>
+        <div
+          class="inline-flex items-center gap-1 rounded-md bg-muted px-2 py-1 text-sm font-medium"
         >
-              {{ item.link?.label || "" }}
-            </component>
+          <span class="text-foreground">{{ from || 0 }}</span>
+          <span class="text-muted-foreground">-</span>
+          <span class="text-foreground">{{ to || 0 }}</span>
+        </div>
+        <span class="text-sm text-muted-foreground">od</span>
+        <div
+          class="inline-flex items-center rounded-md bg-primary/10 px-2.5 py-1 text-sm font-semibold text-primary"
+        >
+          {{ total || 0 }}
+        </div>
+      </div>
+      <div
+        v-else
+        class="inline-flex items-center gap-2 rounded-lg bg-muted/50 px-3 py-1.5"
+      >
+        <span class="text-sm font-medium text-muted-foreground">Ni zadetkov</span>
+      </div>
+
+      <!-- Pagination controls -->
+      <Pagination
+        v-slot="{ page }"
+        :total="total"
+        :items-per-page="perPage"
+        :sibling-count="1"
+        show-edges
+        :default-page="currentPage"
+        :page="currentPage"
+      >
+        <PaginationContent>
+          <!-- First -->
+          <PaginationFirst :disabled="currentPage <= 1" @click="navigateToPage(1)">
+            <ChevronsLeft />
+          </PaginationFirst>
+
+          <!-- Previous -->
+          <PaginationPrevious
+            :disabled="currentPage <= 1"
+            @click="navigateToPage(currentPage - 1)"
+          >
+            <ChevronLeft />
+          </PaginationPrevious>
+
+          <!-- Page numbers -->
+          <template v-for="(item, index) in visiblePages" :key="index">
+            <PaginationEllipsis v-if="item === '...'" />
+            <PaginationItem
+              v-else
+              :value="item"
+              :is-active="currentPage === item"
+              @click="navigateToPage(item)"
+            >
+              {{ item }}
+            </PaginationItem>
           </template>
+
+          <!-- Next -->
+          <PaginationNext
+            :disabled="currentPage >= lastPage"
+            @click="navigateToPage(currentPage + 1)"
+          >
+            <ChevronRight />
+          </PaginationNext>
+
+          <!-- Last -->
+          <PaginationLast
+            :disabled="currentPage >= lastPage"
+            @click="navigateToPage(lastPage)"
+          >
+            <ChevronsRight />
+          </PaginationLast>
+        </PaginationContent>
+      </Pagination>
+
+      <!-- Goto page input -->
+      <div class="flex items-center gap-3">
+        <!-- Go to page -->
+        <div
+          class="inline-flex items-center gap-2 rounded-md border border-input bg-background px-2 h-8"
+        >
+          <input
+            v-model="gotoInput"
+            type="number"
+            min="1"
+            :max="lastPage"
+            inputmode="numeric"
+            class="w-10 h-full text-sm text-center bg-transparent border-0 outline-none focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+            :placeholder="String(currentPage)"
+            aria-label="Pojdi na stran"
+            @keyup.enter="goToPage"
+            @blur="goToPage"
+          />
+          <Separator orientation="vertical" class="h-full" />
+          <span class="text-sm text-muted-foreground">{{ lastPage }}</span>
+        </div>
+      </div>
+    </div>
   </nav>
-      </div>
-    </div>
-  </div>
 </template>

resources/js/Components/PersonInfo/AddressCreateForm.vue

@@ -0,0 +1,283 @@
+<script setup>
+import { ref, watch } from "vue";
+import { useForm, Field as FormField } from "vee-validate";
+import { toTypedSchema } from "@vee-validate/zod";
+import * as z from "zod";
+import { router } from "@inertiajs/vue3";
+import CreateDialog from "../Dialogs/CreateDialog.vue";
+import UpdateDialog from "../Dialogs/UpdateDialog.vue";
+import SectionTitle from "../SectionTitle.vue";
+import {
+  FormControl,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/Components/ui/form";
+import { Input } from "@/Components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/Components/ui/select";
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  person: Object,
+  types: Array,
+  edit: {
+    type: Boolean,
+    default: false,
+  },
+  id: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const formSchema = toTypedSchema(
+  z.object({
+    address: z.string().min(1, "Naslov je obvezen."),
+    country: z.string().optional(),
+    post_code: z.string().optional(),
+    city: z.string().optional(),
+    type_id: z.number().nullable(),
+    description: z.string().optional(),
+  })
+);
+
+const form = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    address: "",
+    country: "",
+    post_code: "",
+    city: "",
+    type_id: props.types?.[0]?.id ?? null,
+    description: "",
+  },
+});
+
+const processing = ref(false);
+const emit = defineEmits(["close"]);
+
+const close = () => {
+  emit("close");
+  setTimeout(() => {
+    form.resetForm();
+    processing.value = false;
+  }, 300);
+};
+
+const resetForm = () => {
+  form.resetForm({
+    values: {
+      address: "",
+      country: "",
+      post_code: "",
+      city: "",
+      type_id: props.types?.[0]?.id ?? null,
+      description: "",
+    },
+  });
+};
+
+watch(
+  () => props.id,
+  (id) => {
+    if (props.edit && id !== 0) {
+      const a = props.person.addresses?.find((x) => x.id === id);
+      if (a) {
+        form.setValues({
+          address: a.address || "",
+          country: a.country || "",
+          post_code: a.post_code || a.postal_code || "",
+          city: a.city || "",
+          type_id: a.type_id ?? (props.types?.[0]?.id ?? null),
+          description: a.description || "",
+        });
+        return;
+      }
+    }
+    resetForm();
+  },
+  { immediate: true }
+);
+
+watch(() => props.show, (val) => {
+  if (val && props.edit && props.id) {
+    const a = props.person.addresses?.find((x) => x.id === props.id);
+    if (a) {
+      form.setValues({
+        address: a.address || "",
+        country: a.country || "",
+        post_code: a.post_code || a.postal_code || "",
+        city: a.city || "",
+        type_id: a.type_id ?? (props.types?.[0]?.id ?? null),
+        description: a.description || "",
+      });
+    }
+  } else if (val && !props.edit) {
+    resetForm();
+  }
+});
+
+const create = async () => {
+  processing.value = true;
+  const { values } = form;
+
+  router.post(
+    route("person.address.create", props.person),
+    values,
+    {
+      preserveScroll: true,
+      onSuccess: () => {
+        processing.value = false;
+        close();
+        resetForm();
+      },
+      onError: (errors) => {
+        Object.keys(errors).forEach((field) => {
+          const errorMessages = Array.isArray(errors[field])
+            ? errors[field]
+            : [errors[field]];
+          form.setFieldError(field, errorMessages[0]);
+        });
+        processing.value = false;
+      },
+      onFinish: () => {
+        processing.value = false;
+      },
+    }
+  );
+};
+
+const update = async () => {
+  processing.value = true;
+  const { values } = form;
+
+  router.put(
+    route("person.address.update", { person: props.person, address_id: props.id }),
+    values,
+    {
+      preserveScroll: true,
+      onSuccess: () => {
+        processing.value = false;
+        close();
+        resetForm();
+      },
+      onError: (errors) => {
+        Object.keys(errors).forEach((field) => {
+          const errorMessages = Array.isArray(errors[field])
+            ? errors[field]
+            : [errors[field]];
+          form.setFieldError(field, errorMessages[0]);
+        });
+        processing.value = false;
+      },
+      onFinish: () => {
+        processing.value = false;
+      },
+    }
+  );
+};
+
+const callSubmit = () => {
+  if (props.edit) {
+    update();
+  } else {
+    create();
+  }
+};
+
+const onSubmit = form.handleSubmit(() => {
+  callSubmit();
+});
+
+const onConfirm = () => {
+  onSubmit();
+};
+</script>
+
+<template>
+  <component
+    :is="edit ? UpdateDialog : CreateDialog"
+    :show="show"
+    :title="edit ? 'Spremeni naslov' : 'Dodaj novi naslov'"
+    confirm-text="Shrani"
+    :processing="processing"
+    @close="close"
+    @confirm="onConfirm"
+  >
+    <form @submit.prevent="onSubmit">
+      <SectionTitle class="border-b mb-4">
+        <template #title> Naslov </template>
+      </SectionTitle>
+
+      <div class="space-y-4">
+        <FormField v-slot="{ componentField }" name="address">
+          <FormItem>
+            <FormLabel>Naslov</FormLabel>
+            <FormControl>
+              <Input type="text" placeholder="Naslov" autocomplete="street-address" v-bind="componentField" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="country">
+          <FormItem>
+            <FormLabel>Država</FormLabel>
+            <FormControl>
+              <Input type="text" placeholder="Država" autocomplete="country" v-bind="componentField" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="post_code">
+          <FormItem>
+            <FormLabel>Poštna številka</FormLabel>
+            <FormControl>
+              <Input type="text" placeholder="Poštna številka" autocomplete="postal-code" v-bind="componentField" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="city">
+          <FormItem>
+            <FormLabel>Mesto</FormLabel>
+            <FormControl>
+              <Input type="text" placeholder="Mesto" autocomplete="address-level2" v-bind="componentField" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ value, handleChange }" name="type_id">
+          <FormItem>
+            <FormLabel>Tip</FormLabel>
+            <Select :model-value="value" @update:model-value="handleChange">
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder="Izberi tip" />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                <SelectItem v-for="type in types" :key="type.id" :value="type.id">
+                  {{ type.name }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+      </div>
+    </form>
+  </component>
+</template>

resources/js/Components/PersonInfo/AddressUpdateForm.vue

@@ -0,0 +1,217 @@
+<script setup>
+import { ref, watch } from "vue";
+import { useForm, Field as FormField } from "vee-validate";
+import { toTypedSchema } from "@vee-validate/zod";
+import * as z from "zod";
+import { router } from "@inertiajs/vue3";
+import UpdateDialog from "../Dialogs/UpdateDialog.vue";
+import SectionTitle from "../SectionTitle.vue";
+import {
+  FormControl,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/Components/ui/form";
+import { Input } from "@/Components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/Components/ui/select";
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  person: Object,
+  types: Array,
+  id: { type: Number, default: 0 },
+});
+
+const processing = ref(false);
+const emit = defineEmits(["close"]);
+
+const formSchema = toTypedSchema(
+  z.object({
+    address: z.string().min(1, "Naslov je obvezen."),
+    country: z.string().optional(),
+    post_code: z.string().optional(),
+    city: z.string().optional(),
+    type_id: z.number().nullable(),
+    description: z.string().optional(),
+  })
+);
+
+const form = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    address: "",
+    country: "",
+    post_code: "",
+    city: "",
+    type_id: props.types?.[0]?.id ?? null,
+    description: "",
+  },
+});
+
+const close = () => {
+  emit("close");
+  setTimeout(() => {
+    form.resetForm();
+    processing.value = false;
+  }, 300);
+};
+
+const resetForm = () => {
+  form.resetForm({
+    values: {
+      address: "",
+      country: "",
+      post_code: "",
+      city: "",
+      type_id: props.types?.[0]?.id ?? null,
+      description: "",
+    },
+  });
+};
+
+const hydrate = () => {
+  const id = props.id;
+  if (id) {
+    const a = (props.person.addresses || []).find((x) => x.id === id);
+    if (a) {
+      form.setValues({
+        address: a.address || "",
+        country: a.country || "",
+        post_code: a.post_code || a.postal_code || "",
+        city: a.city || "",
+        type_id: a.type_id ?? (props.types?.[0]?.id ?? null),
+        description: a.description || "",
+      });
+      return;
+    }
+  }
+  resetForm();
+};
+
+watch(() => props.id, () => hydrate(), { immediate: true });
+watch(() => props.show, (v) => {
+  if (v) hydrate();
+});
+
+const update = async () => {
+  processing.value = true;
+  const { values } = form;
+
+  router.put(
+    route("person.address.update", { person: props.person, address_id: props.id }),
+    values,
+    {
+      preserveScroll: true,
+      onSuccess: () => {
+        processing.value = false;
+        close();
+        resetForm();
+      },
+      onError: (errors) => {
+        Object.keys(errors).forEach((field) => {
+          const errorMessages = Array.isArray(errors[field])
+            ? errors[field]
+            : [errors[field]];
+          form.setFieldError(field, errorMessages[0]);
+        });
+        processing.value = false;
+      },
+      onFinish: () => {
+        processing.value = false;
+      },
+    }
+  );
+};
+
+const onSubmit = form.handleSubmit(() => {
+  update();
+});
+
+const onConfirm = () => {
+  onSubmit();
+};
+</script>
+
+<template>
+  <UpdateDialog
+    :show="show"
+    title="Spremeni naslov"
+    confirm-text="Shrani"
+    :processing="processing"
+    @close="close"
+    @confirm="onConfirm"
+  >
+    <form @submit.prevent="onSubmit">
+      <SectionTitle class="border-b mb-4">
+        <template #title>Naslov</template>
+      </SectionTitle>
+
+      <div class="space-y-4">
+        <FormField v-slot="{ componentField }" name="address">
+          <FormItem>
+            <FormLabel>Naslov</FormLabel>
+            <FormControl>
+              <Input type="text" placeholder="Naslov" autocomplete="street-address" v-bind="componentField" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="country">
+          <FormItem>
+            <FormLabel>Država</FormLabel>
+            <FormControl>
+              <Input type="text" placeholder="Država" autocomplete="country" v-bind="componentField" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="post_code">
+          <FormItem>
+            <FormLabel>Poštna številka</FormLabel>
+            <FormControl>
+              <Input type="text" placeholder="Poštna številka" autocomplete="postal-code" v-bind="componentField" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="city">
+          <FormItem>
+            <FormLabel>Mesto</FormLabel>
+            <FormControl>
+              <Input type="text" placeholder="Mesto" autocomplete="address-level2" v-bind="componentField" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ value, handleChange }" name="type_id">
+          <FormItem>
+            <FormLabel>Tip</FormLabel>
+            <Select :model-value="value" @update:model-value="handleChange">
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder="Izberi tip" />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                <SelectItem v-for="type in types" :key="type.id" :value="type.id">
+                  {{ type.name }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+      </div>
+    </form>
+  </UpdateDialog>
+</template>

resources/js/Components/PersonInfo/EmailCreateForm.vue

@@ -0,0 +1,234 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useForm, Field as FormField } from "vee-validate";
+import { toTypedSchema } from "@vee-validate/zod";
+import * as z from "zod";
+import { router } from "@inertiajs/vue3";
+import CreateDialog from "../Dialogs/CreateDialog.vue";
+import UpdateDialog from "../Dialogs/UpdateDialog.vue";
+import SectionTitle from "../SectionTitle.vue";
+import {
+  FormControl,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/Components/ui/form";
+import { Input } from "@/Components/ui/input";
+import { Switch } from "@/Components/ui/switch";
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  person: { type: Object, required: true },
+  types: { type: Array, default: () => [] },
+  edit: { type: Boolean, default: false },
+  id: { type: Number, default: 0 },
+  isClientContext: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["close"]);
+
+// Zod schema for form validation
+const formSchema = toTypedSchema(
+  z.object({
+    value: z.string().email("E-pošta mora biti veljavna.").min(1, "E-pošta je obvezna."),
+    label: z.string().optional(),
+    receive_auto_mails: z.boolean().optional(),
+  })
+);
+
+// VeeValidate form
+const form = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    value: "",
+    label: "",
+    receive_auto_mails: false,
+  },
+});
+
+const processing = ref(false);
+
+const close = () => {
+  emit("close");
+  setTimeout(() => {
+    form.resetForm();
+    processing.value = false;
+  }, 0);
+};
+
+const resetForm = () => {
+  form.resetForm({
+    values: {
+      value: "",
+      label: "",
+      receive_auto_mails: false,
+    },
+  });
+};
+
+const create = async () => {
+  processing.value = true;
+  const { values } = form;
+  
+  router.post(
+    route("person.email.create", props.person),
+    values,
+    {
+      preserveScroll: true,
+      onSuccess: () => {
+        close();
+        resetForm();
+      },
+      onError: (errors) => {
+        // Map Inertia errors to VeeValidate field errors
+        Object.keys(errors).forEach((field) => {
+          const errorMessages = Array.isArray(errors[field])
+            ? errors[field]
+            : [errors[field]];
+          form.setFieldError(field, errorMessages[0]);
+        });
+        processing.value = false;
+      },
+      onFinish: () => {
+        processing.value = false;
+      },
+    }
+  );
+};
+
+const update = async () => {
+  processing.value = true;
+  const { values } = form;
+  
+  router.put(
+    route("person.email.update", { person: props.person, email_id: props.id }),
+    values,
+    {
+      preserveScroll: true,
+      onSuccess: () => {
+        close();
+        resetForm();
+      },
+      onError: (errors) => {
+        // Map Inertia errors to VeeValidate field errors
+        Object.keys(errors).forEach((field) => {
+          const errorMessages = Array.isArray(errors[field])
+            ? errors[field]
+            : [errors[field]];
+          form.setFieldError(field, errorMessages[0]);
+        });
+        processing.value = false;
+      },
+      onFinish: () => {
+        processing.value = false;
+      },
+    }
+  );
+};
+
+watch(
+  () => props.show,
+  (newVal) => {
+    if (!newVal) {
+      return;
+    }
+    if (props.edit && props.id) {
+      const list = Array.isArray(props.person?.emails) ? props.person.emails : [];
+      const email = list.find((e) => e.id === props.id);
+      if (email) {
+        form.setValues({
+          value: email.value ?? email.email ?? email.address ?? "",
+          label: email.label ?? "",
+          receive_auto_mails: !!email.receive_auto_mails,
+        });
+      } else {
+        resetForm();
+      }
+    } else {
+      resetForm();
+    }
+  }
+);
+
+const onSubmit = form.handleSubmit((values) => {
+  if (props.edit) {
+    update();
+  } else {
+    create();
+  }
+});
+
+const onConfirm = () => {
+  onSubmit();
+};
+</script>
+
+<template>
+  <component
+    :is="edit ? UpdateDialog : CreateDialog"
+    :show="show"
+    :title="edit ? 'Spremeni email' : 'Dodaj email'"
+    confirm-text="Shrani"
+    :processing="processing"
+    @close="close"
+    @confirm="onConfirm"
+  >
+    <form @submit.prevent="onSubmit">
+      <SectionTitle class="border-b mb-4">
+        <template #title>Email</template>
+      </SectionTitle>
+
+      <div class="space-y-4">
+        <FormField v-slot="{ componentField }" name="value">
+          <FormItem>
+            <FormLabel>E-pošta</FormLabel>
+            <FormControl>
+              <Input
+                type="email"
+                placeholder="example@example.com"
+                autocomplete="email"
+                v-bind="componentField"
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="label">
+          <FormItem>
+            <FormLabel>Oznaka (neobvezno)</FormLabel>
+            <FormControl>
+              <Input
+                type="text"
+                placeholder="Oznaka"
+                autocomplete="off"
+                v-bind="componentField"
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField
+          v-if="props.person?.client || isClientContext"
+          v-slot="{ value, handleChange }"
+          name="receive_auto_mails"
+        >
+          <FormItem class="flex flex-row items-start space-x-3 space-y-0">
+            <FormControl>
+              <Switch
+                :model-value="value"
+                @update:model-value="handleChange"
+              />
+            </FormControl>
+            <div class="space-y-1 leading-none">
+              <FormLabel class="cursor-pointer">
+                Prejemaj samodejna e-sporočila
+              </FormLabel>
+            </div>
+          </FormItem>
+        </FormField>
+      </div>
+    </form>
+  </component>
+</template>

resources/js/Components/PersonInfo/PersonInfoAddressesTab.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { DottedMenu, EditIcon, TrashBinIcon, PlusIcon } from "@/Utilities/Icons";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/Components/ui/dropdown-menu";
+import { Card } from "@/Components/ui/card";
+import { Button } from "../ui/button";
+import { EllipsisVertical } from "lucide-vue-next";
+
+const props = defineProps({
+  person: Object,
+  edit: { type: Boolean, default: true },
+});
+
+const emit = defineEmits(["add", "edit", "delete"]);
+
+const handleAdd = () => emit("add");
+const handleEdit = (id) => emit("edit", id);
+const handleDelete = (id, label) => emit("delete", id, label);
+</script>
+
+<template>
+  <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+    <Card class="p-2" v-for="address in person.addresses" :key="address.id">
+      <div class="flex items-center justify-between mb-2">
+        <div class="flex flex-wrap gap-2">
+          <span
+            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"
+          >
+            {{ address.country }}
+          </span>
+          <span
+            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"
+          >
+            {{ address.type.name }}
+          </span>
+        </div>
+        <div v-if="edit">
+          <DropdownMenu>
+            <DropdownMenuTrigger as-child>
+              <Button variant="ghost" size="icon" title="Možnosti">
+                <EllipsisVertical />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem @click="handleEdit(address.id)">
+                <EditIcon size="sm" />
+                <span>Uredi</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                @click="handleDelete(address.id, address.address)"
+                class="text-red-600 focus:bg-red-50 focus:text-red-600"
+              >
+                <TrashBinIcon size="sm" class="text-red-600" />
+                <span>Izbriši</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+      <p class="text-sm font-medium text-gray-900 leading-relaxed">
+        {{
+          address.post_code && address.city
+            ? `${address.address}, ${address.post_code} ${address.city}`
+            : address.address
+        }}
+      </p>
+    </Card>
+    <button
+      v-if="edit"
+      @click="handleAdd"
+      class="rounded-lg p-4 bg-white border-2 border-dashed border-gray-300 hover:border-gray-400 hover:bg-gray-50 transition-all flex items-center justify-center h-full"
+      title="Dodaj naslov"
+    >
+      <PlusIcon class="h-8 w-8 text-gray-400" />
+    </button>
+  </div>
+</template>

resources/js/Components/PersonInfo/PersonInfoEmailsTab.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { DottedMenu, EditIcon, TrashBinIcon, PlusIcon } from "@/Utilities/Icons";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/Components/ui/dropdown-menu";
+import { Card } from "@/Components/ui/card";
+import { Button } from "../ui/button";
+import { EllipsisVertical } from "lucide-vue-next";
+
+const props = defineProps({
+  person: Object,
+  edit: { type: Boolean, default: true },
+});
+
+const emit = defineEmits(["add", "edit", "delete"]);
+
+const getEmails = (p) => (Array.isArray(p?.emails) ? p.emails : []);
+
+const handleAdd = () => emit("add");
+const handleEdit = (id) => emit("edit", id);
+const handleDelete = (id, label) => emit("delete", id, label);
+</script>
+
+<template>
+  <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+    <template v-if="getEmails(person).length">
+      <Card class="p-2" v-for="(email, idx) in getEmails(person)" :key="idx">
+        <div class="flex items-center justify-between mb-2" v-if="edit">
+          <div class="flex flex-wrap gap-2">
+            <span
+              v-if="email?.label"
+              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"
+            >
+              {{ email.label }}
+            </span>
+            <span
+              v-else
+              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800"
+            >
+              Email
+            </span>
+          </div>
+          <div v-if="edit">
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <Button variant="ghost" size="icon" title="Možnosti">
+                  <EllipsisVertical />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem @click="handleEdit(email.id)">
+                  <EditIcon size="sm" />
+                  <span>Uredi</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  @click="
+                    handleDelete(email.id, email?.value || email?.email || email?.address)
+                  "
+                  class="text-red-600 focus:bg-red-50 focus:text-red-600"
+                >
+                  <TrashBinIcon size="sm" class="text-red-600" />
+                  <span>Izbriši</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+        <p class="text-sm font-medium text-gray-900 leading-relaxed">
+          {{ email?.value || email?.email || email?.address || "-" }}
+        </p>
+        <p
+          v-if="email?.note"
+          class="mt-2 text-xs text-gray-600 whitespace-pre-wrap leading-relaxed"
+        >
+          {{ email.note }}
+        </p>
+      </Card>
+    </template>
+    <button
+      v-if="edit"
+      @click="handleAdd"
+      class="rounded-lg p-4 bg-white border-2 border-dashed border-gray-300 hover:border-gray-400 hover:bg-gray-50 transition-all flex items-center justify-center h-full"
+      title="Dodaj email"
+    >
+      <PlusIcon class="h-8 w-8 text-gray-400" />
+    </button>
+    <p
+      v-else-if="!edit && !getEmails(person).length"
+      class="col-span-full p-4 text-sm text-gray-500 text-center bg-gray-50 rounded-lg border border-gray-200"
+    >
+      Ni e-poštnih naslovov.
+    </p>
+  </div>
+</template>

resources/js/Components/PersonInfo/PersonInfoGrid.vue

@@ -0,0 +1,517 @@
+<script setup>
+import { ref, computed } from "vue";
+import { router } from "@inertiajs/vue3";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/Components/ui/tabs";
+import { Button } from "@/Components/ui/button";
+import { PlusIcon } from "@/Utilities/Icons";
+import { faUser, faMapMarkerAlt, faPhone, faEnvelope, faUniversity } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import PersonUpdateForm from "./PersonUpdateForm.vue";
+import AddressCreateForm from "./AddressCreateForm.vue";
+import AddressUpdateForm from "./AddressUpdateForm.vue";
+import PhoneCreateForm from "./PhoneCreateForm.vue";
+import PhoneUpdateForm from "./PhoneUpdateForm.vue";
+import EmailCreateForm from "./EmailCreateForm.vue";
+import EmailUpdateForm from "./EmailUpdateForm.vue";
+import TrrCreateForm from "./TrrCreateForm.vue";
+import TrrUpdateForm from "./TrrUpdateForm.vue";
+import ConfirmDialog from "../ConfirmDialog.vue";
+
+// Tab components
+import PersonInfoPersonTab from "./PersonInfoPersonTab.vue";
+import PersonInfoAddressesTab from "./PersonInfoAddressesTab.vue";
+import PersonInfoPhonesTab from "./PersonInfoPhonesTab.vue";
+import PersonInfoEmailsTab from "./PersonInfoEmailsTab.vue";
+import PersonInfoTrrTab from "./PersonInfoTrrTab.vue";
+import PersonInfoSmsDialog from "./PersonInfoSmsDialog.vue";
+
+const props = defineProps({
+  person: Object,
+  personEdit: {
+    type: Boolean,
+    default: true,
+  },
+  edit: {
+    type: Boolean,
+    default: true,
+  },
+  tabColor: {
+    type: String,
+    default: "blue-600",
+  },
+  types: {
+    type: Object,
+    default: {
+      address_types: [],
+      phone_types: [],
+    },
+  },
+  enableSms: { type: Boolean, default: false },
+  clientCaseUuid: { type: String, default: null },
+  smsProfiles: { type: Array, default: () => [] },
+  smsSenders: { type: Array, default: () => [] },
+  smsTemplates: { type: Array, default: () => [] },
+});
+
+// Dialog states
+const drawerUpdatePerson = ref(false);
+const drawerAddAddress = ref(false);
+const drawerAddPhone = ref(false);
+const drawerAddEmail = ref(false);
+const drawerAddTrr = ref(false);
+
+// Edit states
+const editAddress = ref(false);
+const editAddressId = ref(0);
+const editPhone = ref(false);
+const editPhoneId = ref(0);
+const editEmail = ref(false);
+const editEmailId = ref(0);
+const editTrr = ref(false);
+const editTrrId = ref(0);
+
+// Confirm dialog state
+const confirm = ref({
+  show: false,
+  title: "Potrditev brisanja",
+  message: "",
+  type: "",
+  id: 0,
+  itemName: null,
+});
+
+// SMS dialog state
+const showSmsDialog = ref(false);
+const smsTargetPhone = ref(null);
+
+// Person handlers
+const openDrawerUpdateClient = () => {
+  drawerUpdatePerson.value = true;
+};
+
+// Address handlers
+const openDrawerAddAddress = (edit = false, id = 0) => {
+  drawerAddAddress.value = true;
+  editAddress.value = edit;
+  editAddressId.value = id;
+};
+
+const closeDrawerAddAddress = () => {
+  drawerAddAddress.value = false;
+  const wasEdit = editAddress.value;
+  editAddress.value = false;
+  editAddressId.value = 0;
+  if (!wasEdit) {
+    switchToTab('addresses');
+  }
+};
+
+// Phone handlers
+const openDrawerAddPhone = (edit = false, id = 0) => {
+  editPhone.value = edit;
+  editPhoneId.value = id;
+  drawerAddPhone.value = true;
+};
+
+// Keep the old name for backward compatibility if needed, but use the correct name
+const operDrawerAddPhone = openDrawerAddPhone;
+
+const closeDrawerAddPhone = () => {
+  drawerAddPhone.value = false;
+  const wasEdit = editPhone.value;
+  editPhone.value = false;
+  editPhoneId.value = 0;
+  if (!wasEdit) {
+    switchToTab('phones');
+  }
+};
+
+// Email handlers
+const openDrawerAddEmail = (edit = false, id = 0) => {
+  drawerAddEmail.value = true;
+  editEmail.value = edit;
+  editEmailId.value = id;
+};
+
+const closeDrawerAddEmail = () => {
+  drawerAddEmail.value = false;
+  const wasEdit = editEmail.value;
+  editEmail.value = false;
+  editEmailId.value = 0;
+  if (!wasEdit) {
+    switchToTab('emails');
+  }
+};
+
+// TRR handlers
+const openDrawerAddTrr = (edit = false, id = 0) => {
+  drawerAddTrr.value = true;
+  editTrr.value = edit;
+  editTrrId.value = id;
+};
+
+const closeDrawerAddTrr = () => {
+  drawerAddTrr.value = false;
+  const wasEdit = editTrr.value;
+  editTrr.value = false;
+  editTrrId.value = 0;
+  if (!wasEdit) {
+    switchToTab('trr');
+  }
+};
+
+// Confirm dialog handlers
+const openConfirm = (type, id, label = "") => {
+  confirm.value = {
+    show: true,
+    title: "Potrditev brisanja",
+    message: label
+      ? `Ali res želite izbrisati "${label}"?`
+      : "Ali res želite izbrisati izbran element?",
+    type,
+    id,
+    itemName: label || null,
+  };
+};
+
+const closeConfirm = () => {
+  confirm.value.show = false;
+  confirm.value.itemName = null;
+};
+
+const onConfirmDelete = async () => {
+  const { type, id } = confirm.value;
+  
+  if (type === "email") {
+    router.delete(
+      route("person.email.delete", { person: props.person, email_id: id }),
+      {
+        preserveScroll: true,
+        onSuccess: () => {
+          closeConfirm();
+        },
+        onError: (errors) => {
+          console.error("Delete failed", errors);
+          closeConfirm();
+        },
+      }
+    );
+  } else if (type === "trr") {
+    router.delete(
+      route("person.trr.delete", { person: props.person, trr_id: id }),
+      {
+        preserveScroll: true,
+        onSuccess: () => {
+          closeConfirm();
+        },
+        onError: (errors) => {
+          console.error("Delete failed", errors);
+          closeConfirm();
+        },
+      }
+    );
+  } else if (type === "address") {
+    router.delete(
+      route("person.address.delete", { person: props.person, address_id: id }),
+      {
+        preserveScroll: true,
+        onSuccess: () => {
+          closeConfirm();
+        },
+        onError: (errors) => {
+          console.error("Delete failed", errors);
+          closeConfirm();
+        },
+      }
+      );
+  } else if (type === "phone") {
+    router.delete(
+      route("person.phone.delete", { person: props.person, phone_id: id }),
+      {
+        preserveScroll: true,
+        onSuccess: () => {
+          closeConfirm();
+        },
+        onError: (errors) => {
+          console.error("Delete failed", errors);
+          closeConfirm();
+        },
+      }
+    );
+  }
+};
+
+// SMS handlers
+const openSmsDialog = (phone) => {
+  if (!props.enableSms || !props.clientCaseUuid) return;
+  smsTargetPhone.value = phone;
+  showSmsDialog.value = true;
+};
+
+const closeSmsDialog = () => {
+  showSmsDialog.value = false;
+  smsTargetPhone.value = null;
+};
+
+// Tab event handlers
+const handlePersonEdit = () => openDrawerUpdateClient();
+
+const handleAddressAdd = () => openDrawerAddAddress(false, 0);
+const handleAddressEdit = (id) => openDrawerAddAddress(true, id);
+const handleAddressDelete = (id, label) => openConfirm("address", id, label);
+
+const handlePhoneAdd = () => openDrawerAddPhone(false, 0);
+const handlePhoneEdit = (id) => openDrawerAddPhone(true, id);
+const handlePhoneDelete = (id, label) => openConfirm("phone", id, label);
+const handlePhoneSms = (phone) => openSmsDialog(phone);
+
+const handleEmailAdd = () => openDrawerAddEmail(false, 0);
+const handleEmailEdit = (id) => openDrawerAddEmail(true, id);
+const handleEmailDelete = (id, label) => openConfirm("email", id, label);
+
+const handleTrrAdd = () => openDrawerAddTrr(false, 0);
+const handleTrrEdit = (id) => openDrawerAddTrr(true, id);
+const handleTrrDelete = (id, label) => openConfirm("trr", id, label);
+
+// Computed counts for badges
+const addressesCount = computed(() => (props.person?.addresses || []).length);
+const phonesCount = computed(() => (props.person?.phones || []).length);
+const emailsCount = computed(() => (props.person?.emails || []).length);
+const trrsCount = computed(() => {
+  const list = props.person?.trrs || 
+               props.person?.bank_accounts || 
+               props.person?.accounts || 
+               props.person?.bankAccounts || [];
+  return list.length;
+});
+
+// Format badge count (show 999+ if >= 999)
+const formatBadgeCount = (count) => {
+  return count >= 999 ? '999+' : String(count);
+};
+
+// Tab switching
+const activeTab = ref('person');
+const switchToTab = (tab) => {
+  activeTab.value = tab;
+};
+</script>
+
+<template>
+  <Tabs v-model="activeTab" class="mt-2">
+    <TabsList class="flex w-full bg-white gap-2 p-1">
+      <TabsTrigger value="person" class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2">
+        <div class="flex items-center gap-2">
+          <FontAwesomeIcon :icon="faUser" class="h-4 w-4" />
+          <span>Oseba</span>
+        </div>
+      </TabsTrigger>
+      <TabsTrigger value="addresses" class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2 px-3">
+        <div class="flex items-center justify-between gap-2 w-full">
+          <div class="flex items-center gap-2">
+            <FontAwesomeIcon :icon="faMapMarkerAlt" class="h-4 w-4" />
+            <span>Naslovi</span>
+          </div>
+          <span
+            v-if="addressesCount > 0"
+            class="h-5 min-w-5 px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
+          >
+            {{ formatBadgeCount(addressesCount) }}
+          </span>
+        </div>
+      </TabsTrigger>
+      <TabsTrigger value="phones" class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2 px-3">
+        <div class="flex items-center justify-between gap-2 w-full">
+          <div class="flex items-center gap-2">
+            <FontAwesomeIcon :icon="faPhone" class="h-4 w-4" />
+            <span>Telefonske</span>
+          </div>
+          <span
+            v-if="phonesCount > 0"
+            class="h-5 min-w-5 px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
+          >
+            {{ formatBadgeCount(phonesCount) }}
+          </span>
+        </div>
+      </TabsTrigger>
+      <TabsTrigger value="emails" class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2 px-3">
+        <div class="flex items-center justify-between gap-2 w-full">
+          <div class="flex items-center gap-2">
+            <FontAwesomeIcon :icon="faEnvelope" class="h-4 w-4" />
+            <span>Email</span>
+          </div>
+          <span
+            v-if="emailsCount > 0"
+            class="h-5 min-w-5 px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
+          >
+            {{ formatBadgeCount(emailsCount) }}
+          </span>
+        </div>
+      </TabsTrigger>
+      <TabsTrigger value="trr" class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2 px-3">
+        <div class="flex items-center justify-between gap-2 w-full">
+          <div class="flex items-center gap-2">
+            <FontAwesomeIcon :icon="faUniversity" class="h-4 w-4" />
+            <span>TRR</span>
+          </div>
+          <span
+            v-if="trrsCount > 0"
+            class="h-5 min-w-5 px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
+          >
+            {{ formatBadgeCount(trrsCount) }}
+          </span>
+        </div>
+      </TabsTrigger>
+    </TabsList>
+    <TabsContent value="person" class="py-2">
+      <PersonInfoPersonTab
+        :person="person"
+        :edit="edit"
+        :person-edit="personEdit"
+        @edit="handlePersonEdit"
+      />
+    </TabsContent>
+
+    <TabsContent value="addresses" class="py-4">
+      <PersonInfoAddressesTab
+        :person="person"
+        :edit="edit"
+        @add="handleAddressAdd"
+        @edit="handleAddressEdit"
+        @delete="handleAddressDelete"
+      />
+    </TabsContent>
+
+    <TabsContent value="phones" class="py-4">
+      <PersonInfoPhonesTab
+        :person="person"
+        :edit="edit"
+        :enable-sms="enableSms && !!clientCaseUuid"
+        @add="handlePhoneAdd"
+        @edit="handlePhoneEdit"
+        @delete="handlePhoneDelete"
+        @sms="handlePhoneSms"
+      />
+    </TabsContent>
+
+    <TabsContent value="emails" class="py-4">
+      <PersonInfoEmailsTab
+        :person="person"
+        :edit="edit"
+        @add="handleEmailAdd"
+        @edit="handleEmailEdit"
+        @delete="handleEmailDelete"
+      />
+    </TabsContent>
+
+    <TabsContent value="trr" class="py-4">
+      <PersonInfoTrrTab
+        :person="person"
+        :edit="edit"
+        @add="handleTrrAdd"
+        @edit="handleTrrEdit"
+        @delete="handleTrrDelete"
+      />
+    </TabsContent>
+  </Tabs>
+
+  <!-- Person Update Dialog -->
+  <PersonUpdateForm
+    :show="drawerUpdatePerson"
+    @close="drawerUpdatePerson = false"
+    :person="person"
+  />
+
+  <!-- Address Dialogs -->
+  <AddressCreateForm
+    :show="drawerAddAddress && !editAddress"
+    @close="closeDrawerAddAddress"
+    :person="person"
+    :types="types.address_types"
+    :id="editAddressId"
+    :edit="editAddress"
+  />
+  <AddressUpdateForm
+    :show="drawerAddAddress && editAddress"
+    @close="closeDrawerAddAddress"
+    :person="person"
+    :types="types.address_types"
+    :id="editAddressId"
+  />
+
+  <!-- Phone Dialogs -->
+  <PhoneCreateForm
+    :show="drawerAddPhone && !editPhone"
+    @close="closeDrawerAddPhone"
+    :person="person"
+    :types="types.phone_types"
+  />
+  <PhoneUpdateForm
+    :show="drawerAddPhone && editPhone"
+    @close="closeDrawerAddPhone"
+    :person="person"
+    :types="types.phone_types"
+    :id="editPhoneId"
+  />
+
+  <!-- Email Dialogs -->
+  <EmailCreateForm
+    :show="drawerAddEmail && !editEmail"
+    @close="closeDrawerAddEmail"
+    :person="person"
+    :types="types.email_types ?? []"
+    :is-client-context="!!person?.client"
+  />
+  <EmailUpdateForm
+    :show="drawerAddEmail && editEmail"
+    @close="closeDrawerAddEmail"
+    :person="person"
+    :types="types.email_types ?? []"
+    :id="editEmailId"
+    :is-client-context="!!person?.client"
+  />
+
+  <!-- TRR Dialogs -->
+  <TrrCreateForm
+    :show="drawerAddTrr && !editTrr"
+    @close="closeDrawerAddTrr"
+    :person="person"
+    :types="types.trr_types ?? []"
+    :banks="types.banks ?? []"
+    :currencies="types.currencies ?? ['EUR']"
+  />
+  <TrrUpdateForm
+    :show="drawerAddTrr && editTrr"
+    @close="closeDrawerAddTrr"
+    :person="person"
+    :types="types.trr_types ?? []"
+    :banks="types.banks ?? []"
+    :currencies="types.currencies ?? ['EUR']"
+    :id="editTrrId"
+  />
+
+  <!-- Confirm Deletion Dialog -->
+  <ConfirmDialog
+    :show="confirm.show"
+    :title="confirm.title"
+    :message="confirm.message"
+    :item-name="confirm.itemName"
+    confirm-text="Izbriši"
+    cancel-text="Prekliči"
+    :danger="true"
+    @close="closeConfirm"
+    @confirm="onConfirmDelete"
+  />
+
+  <!-- SMS Dialog -->
+  <PersonInfoSmsDialog
+    v-if="clientCaseUuid"
+    :show="showSmsDialog"
+    :phone="smsTargetPhone"
+    :client-case-uuid="clientCaseUuid"
+    :sms-profiles="smsProfiles"
+    :sms-senders="smsSenders"
+    :sms-templates="smsTemplates"
+    @close="closeSmsDialog"
+  />
+</template>

resources/js/Components/PersonInfo/PersonInfoPersonTab.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { UserEditIcon } from "@/Utilities/Icons";
+import { Button } from "../ui/button";
+
+const props = defineProps({
+  person: Object,
+  edit: { type: Boolean, default: true },
+  personEdit: { type: Boolean, default: true },
+});
+
+const emit = defineEmits(['edit']);
+
+const getMainAddress = (adresses) => {
+  const addr = adresses.filter((a) => a.type.id === 1)[0] ?? "";
+  if (addr !== "") {
+    const tail = addr.post_code && addr.city ? `, ${addr.post_code} ${addr.city}` : "";
+    const country = addr.country !== "" ? ` - ${addr.country}` : "";
+    return addr.address !== "" ? addr.address + tail + country : "";
+  }
+  return "";
+};
+
+const getMainPhone = (phones) => {
+  const pho = phones.filter((a) => a.type.id === 1)[0] ?? "";
+  if (pho !== "") {
+    const countryCode = pho.country_code !== null ? `+${pho.country_code} ` : "";
+    return pho.nu !== "" ? countryCode + pho.nu : "";
+  }
+  return "";
+};
+
+const handleEdit = () => {
+  emit('edit');
+};
+</script>
+
+<template>
+  <div class="flex justify-end mb-3">
+    <Button
+      v-if="edit && personEdit"
+      @click="handleEdit"
+      class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all"
+      title="Uredi osebo"
+    >
+      <UserEditIcon size="md" />
+      <span>Uredi</span>
+    </button>
+  </div>
+  <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
+    <div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
+      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Nu.</p>
+      <p class="text-sm font-semibold text-gray-900">{{ person.nu }}</p>
+    </div>
+    <div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
+      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Name.</p>
+      <p class="text-sm font-semibold text-gray-900">
+        {{ person.full_name }}
+      </p>
+    </div>
+    <div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
+      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Tax NU.</p>
+      <p class="text-sm font-semibold text-gray-900">
+        {{ person.tax_number }}
+      </p>
+    </div>
+    <div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
+      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Social security NU.</p>
+      <p class="text-sm font-semibold text-gray-900">
+        {{ person.social_security_number }}
+      </p>
+    </div>
+  </div>
+  <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 mt-3">
+    <div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
+      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Address</p>
+      <p class="text-sm font-medium text-gray-900">
+        {{ getMainAddress(person.addresses) }}
+      </p>
+    </div>
+    <div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
+      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Phone</p>
+      <p class="text-sm font-medium text-gray-900">
+        {{ getMainPhone(person.phones) }}
+      </p>
+    </div>
+    <div class="md:col-span-full lg:col-span-1 rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
+      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Description</p>
+      <p class="text-sm font-medium text-gray-900">
+        {{ person.description }}
+      </p>
+    </div>
+  </div>
+</template>
+

resources/js/Components/PersonInfo/PersonInfoPhonesTab.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { DottedMenu, EditIcon, TrashBinIcon, PlusIcon } from "@/Utilities/Icons";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/Components/ui/dropdown-menu";
+import { Card } from "@/Components/ui/card";
+import { Button } from "../ui/button";
+import { EllipsisVertical, MessageSquare, MessageSquareText } from "lucide-vue-next";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
+
+const props = defineProps({
+  person: Object,
+  edit: { type: Boolean, default: true },
+  enableSms: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["add", "edit", "delete", "sms"]);
+
+const getPhones = (p) => (Array.isArray(p?.phones) ? p.phones : []);
+
+const handleAdd = () => emit("add");
+const handleEdit = (id) => emit("edit", id);
+const handleDelete = (id, label) => emit("delete", id, label);
+const handleSms = (phone) => emit("sms", phone);
+</script>
+
+<template>
+  <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+    <template v-if="getPhones(person).length">
+      <Card class="p-2" v-for="phone in getPhones(person)" :key="phone.id">
+        <div class="flex items-center justify-between mb-2">
+          <div class="flex flex-wrap gap-2">
+            <span
+              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"
+            >
+              +{{ phone.country_code }}
+            </span>
+            <span
+              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"
+            >
+              {{ phone && phone.type && phone.type.name ? phone.type.name : "—" }}
+            </span>
+          </div>
+          <div class="flex items-center gap-1">
+            <!-- Send SMS only in ClientCase person context -->
+
+            <Button
+              v-if="enableSms"
+              @click="handleSms(phone)"
+              title="Pošlji SMS"
+              size="icon"
+              variant="ghost"
+            >
+              <MessageSquare />
+            </Button>
+
+            <DropdownMenu v-if="edit">
+              <DropdownMenuTrigger as-child>
+                <Button variant="ghost" size="icon" title="Možnosti">
+                  <EllipsisVertical />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem @click="handleEdit(phone.id)">
+                  <EditIcon size="sm" />
+                  <span>Uredi</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  @click="handleDelete(phone.id, phone.nu)"
+                  class="text-red-600 focus:bg-red-50 focus:text-red-600"
+                >
+                  <TrashBinIcon size="sm" class="text-red-600" />
+                  <span>Izbriši</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+        <p class="text-sm font-medium text-gray-900 leading-relaxed">{{ phone.nu }}</p>
+      </Card>
+    </template>
+    <button
+      v-if="edit"
+      @click="handleAdd"
+      class="rounded-lg p-4 bg-white border-2 border-dashed border-gray-300 hover:border-gray-400 hover:bg-gray-50 transition-all flex items-center justify-center h-full"
+      title="Dodaj telefon"
+    >
+      <PlusIcon class="h-8 w-8 text-gray-400" />
+    </button>
+    <p
+      v-else-if="!edit && !getPhones(person).length"
+      class="col-span-full p-4 text-sm text-gray-500 text-center bg-gray-50 rounded-lg border border-gray-200"
+    >
+      Ni telefonov.
+    </p>
+  </div>
+</template>

resources/js/Components/PersonInfo/PersonInfoSmsDialog.vue

@@ -0,0 +1,669 @@
+<script setup>
+import { ref, watch, computed } from "vue";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/Components/ui/dialog";
+import { router, usePage } from "@inertiajs/vue3";
+import { useForm, Field as FormField } from "vee-validate";
+import { toTypedSchema } from "@vee-validate/zod";
+import * as z from "zod";
+import {
+  FormControl,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/Components/ui/form";
+import { Input } from "@/Components/ui/input";
+import { Textarea } from "@/Components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/Components/ui/select";
+import { Switch } from "@/Components/ui/switch";
+import { Button } from "@/Components/ui/button";
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  phone: Object,
+  clientCaseUuid: { type: String, default: null },
+  smsProfiles: { type: Array, default: () => [] },
+  smsSenders: { type: Array, default: () => [] },
+  smsTemplates: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits(["close"]);
+
+const page = usePage();
+const pageProps = computed(() => page?.props ?? {});
+
+const pageSmsProfiles = computed(() => {
+  const fromProps =
+    Array.isArray(props.smsProfiles) && props.smsProfiles.length
+      ? props.smsProfiles
+      : null;
+  return fromProps ?? pageProps.value?.sms_profiles ?? [];
+});
+
+const pageSmsSenders = computed(() => {
+  const fromProps =
+    Array.isArray(props.smsSenders) && props.smsSenders.length ? props.smsSenders : null;
+  return fromProps ?? pageProps.value?.sms_senders ?? [];
+});
+
+const pageSmsTemplates = computed(() => {
+  const fromProps =
+    Array.isArray(props.smsTemplates) && props.smsTemplates.length
+      ? props.smsTemplates
+      : null;
+  return fromProps ?? pageProps.value?.sms_templates ?? [];
+});
+
+// SMS encoding helpers
+const GSM7_EXTENDED = new Set(["^", "{", "}", "\\", "[", "~", "]", "|"]);
+
+const isGsm7 = (text) => {
+  for (const ch of text || "") {
+    if (ch === "€") continue;
+    const code = ch.charCodeAt(0);
+    if (code >= 0x80) return false;
+  }
+  return true;
+};
+
+const gsm7Length = (text) => {
+  let len = 0;
+  for (const ch of text || "") {
+    if (ch === "€" || GSM7_EXTENDED.has(ch)) {
+      len += 2;
+    } else {
+      len += 1;
+    }
+  }
+  return len;
+};
+
+const ucs2Length = (text) => (text ? text.length : 0);
+
+const formatEu = (value, decimals = 2) => {
+  if (value === null || value === undefined || value === "") {
+    return new Intl.NumberFormat("de-DE", {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals,
+    }).format(0);
+  }
+  const num =
+    typeof value === "number"
+      ? value
+      : parseFloat(String(value).replace(/\./g, "").replace(",", "."));
+  return new Intl.NumberFormat("de-DE", {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  }).format(isNaN(num) ? 0 : num);
+};
+
+const renderTokens = (text, vars) => {
+  if (!text) return "";
+  const resolver = (obj, path) => {
+    if (!obj) return null;
+    if (Object.prototype.hasOwnProperty.call(obj, path)) return obj[path];
+    const segs = path.split(".");
+    let cur = obj;
+    for (const s of segs) {
+      if (cur && typeof cur === "object" && s in cur) {
+        cur = cur[s];
+      } else {
+        return null;
+      }
+    }
+    return cur;
+  };
+  return text.replace(/\{([a-zA-Z0-9_\.]+)\}/g, (_, key) => {
+    const val = resolver(vars, key);
+    return val !== null && val !== undefined ? String(val) : `{${key}}`;
+  });
+};
+
+const truncateToLimit = (text, limit, encoding) => {
+  if (!text) return "";
+  if (limit <= 0) return "";
+  if (encoding === "UCS-2") {
+    return text.slice(0, limit);
+  }
+  let acc = 0;
+  let out = "";
+  for (const ch of text) {
+    const cost = ch === "€" || GSM7_EXTENDED.has(ch) ? 2 : 1;
+    if (acc + cost > limit) break;
+    out += ch;
+    acc += cost;
+  }
+  return out;
+};
+
+// Form schema with custom validation
+const formSchema = toTypedSchema(
+  z.object({
+    message: z
+      .string()
+      .min(1, "Vsebina sporočila je obvezna.")
+      .refine(
+        (val) => {
+          const encoding = isGsm7(val) ? "GSM-7" : "UCS-2";
+          const maxAllowed = encoding === "GSM-7" ? 640 : 320;
+          const count =
+            encoding === "GSM-7" ? gsm7Length(val) : ucs2Length(val);
+          return count <= maxAllowed;
+        },
+        {
+          message: "Sporočilo presega dovoljeno dolžino.",
+        }
+      ),
+    template_id: z.number().nullable().optional(),
+    contract_uuid: z.string().nullable().optional(),
+    profile_id: z.number().nullable().optional(),
+    sender_id: z.number().nullable().optional(),
+    delivery_report: z.boolean().default(false),
+  })
+);
+
+const form = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    message: "",
+    template_id: null,
+    contract_uuid: null,
+    profile_id: null,
+    sender_id: null,
+    delivery_report: false,
+  },
+});
+
+const processing = ref(false);
+const contractsForCase = ref([]);
+
+const sendersForSelectedProfile = computed(() => {
+  if (!form.values.profile_id) return pageSmsSenders.value;
+  return (pageSmsSenders.value || []).filter(
+    (s) => s.profile_id === form.values.profile_id
+  );
+});
+
+const smsEncoding = computed(() =>
+  isGsm7(form.values.message) ? "GSM-7" : "UCS-2"
+);
+
+const charCount = computed(() =>
+  smsEncoding.value === "GSM-7"
+    ? gsm7Length(form.values.message)
+    : ucs2Length(form.values.message)
+);
+
+const perSegment = computed(() => {
+  const count = charCount.value;
+  if (smsEncoding.value === "GSM-7") {
+    return count <= 160 ? 160 : 153;
+  }
+  return count <= 70 ? 70 : 67;
+});
+
+const segments = computed(() => {
+  const count = charCount.value;
+  const size = perSegment.value || 1;
+  return count > 0 ? Math.ceil(count / size) : 0;
+});
+
+const creditsNeeded = computed(() => segments.value);
+
+const maxAllowed = computed(() =>
+  smsEncoding.value === "GSM-7" ? 640 : 320
+);
+
+const remaining = computed(() =>
+  Math.max(0, maxAllowed.value - charCount.value)
+);
+
+// Truncate message if exceeds limit
+watch(
+  () => form.values.message,
+  (val) => {
+    const limit = maxAllowed.value;
+    if (charCount.value > limit) {
+      form.setFieldValue(
+        "message",
+        truncateToLimit(val, limit, smsEncoding.value)
+      );
+    }
+  }
+);
+
+// Auto-select sender when profile changes
+watch(
+  () => form.values.profile_id,
+  (profileId) => {
+  if (!profileId) {
+    form.setFieldValue("sender_id", null);
+    return;
+  }
+
+  const prof = (pageSmsProfiles.value || []).find((p) => p.id === profileId);
+  if (prof?.default_sender_id) {
+    const inList = sendersForSelectedProfile.value.find(
+      (s) => s.id === prof.default_sender_id
+    );
+    if (inList) {
+      form.setFieldValue("sender_id", prof.default_sender_id);
+      return;
+    }
+  }
+
+  // Auto-select first sender if available
+  if (sendersForSelectedProfile.value.length > 0) {
+    form.setFieldValue("sender_id", sendersForSelectedProfile.value[0].id);
+  } else {
+    form.setFieldValue("sender_id", null);
+  }
+  }
+);
+
+// Reset sender if not available for selected profile
+watch(sendersForSelectedProfile, (list) => {
+  if (!form.values.sender_id || !Array.isArray(list)) return;
+  const ok = list.some((s) => s.id === form.values.sender_id);
+  if (!ok) form.setFieldValue("sender_id", null);
+});
+
+const buildVarsFromSelectedContract = () => {
+  const uuid = form.values.contract_uuid;
+  if (!uuid) return {};
+  const c = (contractsForCase.value || []).find((x) => x.uuid === uuid);
+  if (!c) return {};
+  const vars = {
+    contract: {
+      uuid: c.uuid,
+      reference: c.reference,
+      start_date: c.start_date || "",
+      end_date: c.end_date || "",
+    },
+  };
+  if (c.account) {
+    vars.account = {
+      reference: c.account.reference,
+      type: c.account.type,
+      initial_amount:
+        c.account.initial_amount ??
+        (c.account.initial_amount_raw
+          ? formatEu(c.account.initial_amount_raw)
+          : null),
+      balance_amount:
+        c.account.balance_amount ??
+        (c.account.balance_amount_raw
+          ? formatEu(c.account.balance_amount_raw)
+          : null),
+      initial_amount_raw: c.account.initial_amount_raw ?? null,
+      balance_amount_raw: c.account.balance_amount_raw ?? null,
+    };
+  }
+  return vars;
+};
+
+const updateSmsFromSelection = async () => {
+  if (!form.values.template_id) return;
+  try {
+    const url = route("clientCase.sms.preview", {
+      client_case: props.clientCaseUuid,
+    });
+    const res = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Requested-With": "XMLHttpRequest",
+        "X-CSRF-TOKEN":
+          document.querySelector('meta[name="csrf-token"]')?.getAttribute("content") ||
+          "",
+      },
+      body: JSON.stringify({
+        template_id: form.values.template_id,
+        contract_uuid: form.values.contract_uuid || null,
+      }),
+      credentials: "same-origin",
+    });
+    if (res.ok) {
+      const data = await res.json();
+      if (typeof data?.content === "string" && data.content.trim() !== "") {
+        form.setFieldValue("message", data.content);
+        return;
+      }
+    }
+  } catch (e) {
+    // ignore and fallback
+  }
+
+  // Fallback to client-side template rendering
+  const tpl = (pageSmsTemplates.value || []).find(
+    (t) => t.id === form.values.template_id
+  );
+  if (tpl && typeof tpl.content === "string") {
+    form.setFieldValue(
+      "message",
+      renderTokens(tpl.content, buildVarsFromSelectedContract())
+    );
+  }
+};
+
+watch(
+  () => form.values.template_id,
+  () => {
+  if (!form.values.template_id) return;
+  updateSmsFromSelection();
+  }
+);
+
+watch(
+  () => form.values.contract_uuid,
+  () => {
+  if (!form.values.template_id) return;
+  updateSmsFromSelection();
+  }
+);
+
+watch(pageSmsTemplates, (list) => {
+  if (!Array.isArray(list)) return;
+  if (!form.values.template_id && list.length > 0) {
+    form.setFieldValue("template_id", list[0].id);
+  }
+});
+
+const loadContractsForCase = async () => {
+  try {
+    const url = route("clientCase.contracts.list", {
+      client_case: props.clientCaseUuid,
+    });
+    const res = await fetch(url, {
+      headers: { "X-Requested-With": "XMLHttpRequest" },
+      credentials: "same-origin",
+    });
+    const json = await res.json();
+    contractsForCase.value = Array.isArray(json?.data) ? json.data : [];
+  } catch (e) {
+    contractsForCase.value = [];
+  }
+};
+
+watch(
+  () => props.show,
+  (newVal) => {
+    if (newVal) {
+      form.resetForm({
+        values: {
+          message: "",
+          template_id: pageSmsTemplates.value?.[0]?.id ?? null,
+          contract_uuid: null,
+          profile_id: pageSmsProfiles.value?.[0]?.id ?? null,
+          sender_id: null,
+          delivery_report: false,
+        },
+      });
+
+      // Set default sender after profile is set
+      const profileId = pageSmsProfiles.value?.[0]?.id;
+      if (profileId) {
+        const prof = (pageSmsProfiles.value || []).find((p) => p.id === profileId);
+        if (prof?.default_sender_id) {
+          const inList = sendersForSelectedProfile.value.find(
+            (s) => s.id === prof.default_sender_id
+          );
+          if (inList) {
+            form.setFieldValue("sender_id", prof.default_sender_id);
+          }
+        }
+      }
+
+      loadContractsForCase();
+    }
+  }
+);
+
+const closeSmsDialog = () => {
+  emit("close");
+};
+
+const onSubmit = form.handleSubmit((values) => {
+  if (!props.phone || !props.clientCaseUuid) return;
+
+  processing.value = true;
+  router.post(
+    route("clientCase.phone.sms", {
+      client_case: props.clientCaseUuid,
+      phone_id: props.phone.id,
+    }),
+    values,
+    {
+      preserveScroll: true,
+      onSuccess: () => {
+        processing.value = false;
+        closeSmsDialog();
+      },
+      onError: () => {
+        processing.value = false;
+      },
+      onFinish: () => {
+        processing.value = false;
+      },
+    }
+  );
+});
+
+const open = computed({
+  get: () => props.show,
+  set: (value) => {
+    if (!value) closeSmsDialog();
+  },
+});
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogContent class="sm:max-w-2xl">
+      <DialogHeader>
+        <DialogTitle>Pošlji SMS</DialogTitle>
+        <DialogDescription>
+          <p class="text-sm text-gray-600">
+            Prejemnik: <span class="font-mono">{{ phone?.nu }}</span>
+            <span v-if="phone?.country_code" class="ml-2 text-xs text-gray-500">
+              CC +{{ phone.country_code }}
+            </span>
+          </p>
+        </DialogDescription>
+      </DialogHeader>
+
+      <form @submit.prevent="onSubmit" class="space-y-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <FormField v-slot="{ value, handleChange }" name="profile_id">
+            <FormItem>
+              <FormLabel>Profil</FormLabel>
+              <Select :model-value="value" @update:model-value="handleChange">
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="—" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem :value="null">—</SelectItem>
+                  <SelectItem
+                    v-for="p in pageSmsProfiles"
+                    :key="p.id"
+                    :value="p.id"
+                  >
+                    {{ p.name || "Profil #" + p.id }}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+
+          <FormField v-slot="{ value, handleChange }" name="sender_id">
+            <FormItem>
+              <FormLabel>Pošiljatelj</FormLabel>
+              <Select :model-value="value" @update:model-value="handleChange">
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="—" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem :value="null">—</SelectItem>
+                  <SelectItem
+                    v-for="s in sendersForSelectedProfile"
+                    :key="s.id"
+                    :value="s.id"
+                  >
+                    {{ s.name || s.phone || "Sender #" + s.id }}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+        </div>
+
+        <FormField v-slot="{ value, handleChange }" name="contract_uuid">
+          <FormItem>
+            <FormLabel>Pogodba</FormLabel>
+            <Select :model-value="value" @update:model-value="handleChange">
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder="—" />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                <SelectItem :value="null">—</SelectItem>
+                <SelectItem
+                  v-for="c in contractsForCase"
+                  :key="c.uuid"
+                  :value="c.uuid"
+                >
+                  {{ c.reference || c.uuid }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <p class="mt-1 text-xs text-gray-500">
+              Uporabi podatke pogodbe (in računa) za zapolnitev {contract.*} in
+              {account.*} mest.
+            </p>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ value, handleChange }" name="template_id">
+          <FormItem>
+            <FormLabel>Predloga</FormLabel>
+            <Select :model-value="value" @update:model-value="handleChange">
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder="—" />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                <SelectItem :value="null">—</SelectItem>
+                <SelectItem
+                  v-for="t in pageSmsTemplates"
+                  :key="t.id"
+                  :value="t.id"
+                >
+                  {{ t.name || "Predloga #" + t.id }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="message">
+          <FormItem>
+            <FormLabel>Vsebina sporočila</FormLabel>
+            <FormControl>
+              <Textarea
+                rows="4"
+                placeholder="Vpišite SMS vsebino..."
+                v-bind="componentField"
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <!-- Live counters -->
+        <div class="text-xs text-gray-600 flex flex-col gap-1">
+          <div>
+            <span class="font-medium">Znakov:</span>
+            <span class="font-mono">{{ charCount }}</span>
+            <span class="mx-2">|</span>
+            <span class="font-medium">Kodiranje:</span>
+            <span>{{ smsEncoding }}</span>
+            <span class="mx-2">|</span>
+            <span class="font-medium">Deli SMS:</span>
+            <span class="font-mono">{{ segments }}</span>
+            <span class="mx-2">|</span>
+            <span class="font-medium">Krediti:</span>
+            <span class="font-mono">{{ creditsNeeded }}</span>
+          </div>
+          <div>
+            <span class="font-medium">Omejitev:</span>
+            <span class="font-mono">{{ maxAllowed }}</span>
+            <span class="mx-2">|</span>
+            <span class="font-medium">Preostanek:</span>
+            <span class="font-mono" :class="{ 'text-red-600': remaining === 0 }">
+              {{ remaining }}
+            </span>
+          </div>
+          <p class="text-[11px] text-gray-500 leading-snug">
+            Dolžina 160 znakov velja samo pri pošiljanju sporočil, ki vsebujejo
+            znake, ki ne zahtevajo enkodiranja. Če npr. želite pošiljati
+            šumnike, ki niso del 7-bitne abecede GSM, morate uporabiti Unicode
+            enkodiranje (UCS‑2). V tem primeru je največja dolžina enega SMS
+            sporočila 70 znakov (pri daljših sporočilih 67 znakov na del),
+            medtem ko je pri GSM‑7 160 znakov (pri daljših sporočilih 153
+            znakov na del). Razširjeni znaki (^{{ "{" }}}}\\[]~| in €) štejejo
+            dvojno. Največja dovoljena dolžina po ponudniku: 640 (GSM‑7) oziroma
+            320 (UCS‑2) znakov.
+          </p>
+        </div>
+
+        <FormField v-slot="{ value, handleChange }" name="delivery_report">
+          <FormItem class="flex flex-row items-start space-x-3 space-y-0">
+            <FormControl>
+              <Switch
+                :model-value="value"
+                @update:model-value="handleChange"
+              />
+            </FormControl>
+            <div class="space-y-1 leading-none">
+              <FormLabel>Zahtevaj poročilo o dostavi</FormLabel>
+            </div>
+          </FormItem>
+        </FormField>
+      </form>
+
+      <DialogFooter>
+        <Button variant="outline" @click="closeSmsDialog" :disabled="processing">
+          Prekliči
+        </Button>
+        <Button
+          @click="onSubmit"
+          :disabled="processing || !form.values.message"
+        >
+          Pošlji
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

resources/js/Components/PersonInfo/PersonInfoTrrTab.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { DottedMenu, EditIcon, TrashBinIcon, PlusIcon } from "@/Utilities/Icons";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/Components/ui/dropdown-menu";
+import { Card } from "@/Components/ui/card";
+import { EllipsisVertical } from "lucide-vue-next";
+import { Button } from "../ui/button";
+
+const props = defineProps({
+  person: Object,
+  edit: { type: Boolean, default: true },
+});
+
+const emit = defineEmits(["add", "edit", "delete"]);
+
+const getTRRs = (p) => {
+  if (Array.isArray(p?.trrs)) return p.trrs;
+  if (Array.isArray(p?.bank_accounts)) return p.bank_accounts;
+  if (Array.isArray(p?.accounts)) return p.accounts;
+  if (Array.isArray(p?.bankAccounts)) return p.bankAccounts;
+  return [];
+};
+
+const handleAdd = () => emit("add");
+const handleEdit = (id) => emit("edit", id);
+const handleDelete = (id, label) => emit("delete", id, label);
+</script>
+
+<template>
+  <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+    <template v-if="getTRRs(person).length">
+      <Card class="p-2" v-for="(acc, idx) in getTRRs(person)" :key="idx">
+        <div class="flex items-center justify-between mb-2" v-if="edit">
+          <div class="flex flex-wrap gap-2">
+            <span
+              v-if="acc?.bank_name"
+              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"
+            >
+              {{ acc.bank_name }}
+            </span>
+            <span
+              v-if="acc?.holder_name"
+              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800"
+            >
+              {{ acc.holder_name }}
+            </span>
+            <span
+              v-if="acc?.currency"
+              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"
+            >
+              {{ acc.currency }}
+            </span>
+          </div>
+          <div v-if="edit">
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <Button variant="ghost" size="icon" title="Možnosti">
+                  <EllipsisVertical />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem @click="handleEdit(acc.id)">
+                  <EditIcon size="sm" />
+                  <span>Uredi</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  @click="handleDelete(acc.id, acc?.iban || acc?.account_number)"
+                  class="text-red-600 focus:bg-red-50 focus:text-red-600"
+                >
+                  <TrashBinIcon size="sm" class="text-red-600" />
+                  <span>Izbriši</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+        <p class="text-sm font-medium text-gray-900 leading-relaxed font-mono">
+          {{
+            acc?.iban ||
+            acc?.account_number ||
+            acc?.account ||
+            acc?.nu ||
+            acc?.number ||
+            "-"
+          }}
+        </p>
+        <p
+          v-if="acc?.notes"
+          class="mt-2 text-xs text-gray-600 whitespace-pre-wrap leading-relaxed"
+        >
+          {{ acc.notes }}
+        </p>
+      </Card>
+    </template>
+    <button
+      v-if="edit"
+      @click="handleAdd"
+      class="rounded-lg p-4 bg-white border-2 border-dashed border-gray-300 hover:border-gray-400 hover:bg-gray-50 transition-all flex items-center justify-center h-full"
+      title="Dodaj TRR"
+    >
+      <PlusIcon class="h-8 w-8 text-gray-400" />
+    </button>
+    <p
+      v-else-if="!edit && !getTRRs(person).length"
+      class="col-span-full p-4 text-sm text-gray-500 text-center bg-gray-50 rounded-lg border border-gray-200"
+    >
+      Ni TRR računov.
+    </p>
+  </div>
+</template>

resources/js/Components/PersonInfo/PersonUpdateForm.vue

@@ -0,0 +1,182 @@
+<script setup>
+import UpdateDialog from '@/Components/Dialogs/UpdateDialog.vue';
+import SectionTitle from '@/Components/SectionTitle.vue';
+import { useForm, Field as FormField } from "vee-validate";
+import { toTypedSchema } from "@vee-validate/zod";
+import * as z from "zod";
+import { router } from '@inertiajs/vue3';
+import { ref } from 'vue';
+import {
+  FormControl,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/Components/ui/form";
+import { Input } from "@/Components/ui/input";
+import { Textarea } from "@/Components/ui/textarea";
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false
+    },
+    person: Object
+});
+
+const processingUpdate = ref(false);
+
+const emit = defineEmits(['close']);
+
+const formSchema = toTypedSchema(
+  z.object({
+    full_name: z.string().min(1, "Naziv je obvezen."),
+    tax_number: z.string().optional(),
+    social_security_number: z.string().optional(),
+    description: z.string().optional(),
+  })
+);
+
+const form = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    full_name: props.person?.full_name || '',
+    tax_number: props.person?.tax_number || '',
+    social_security_number: props.person?.social_security_number || '',
+    description: props.person?.description || ''
+  },
+});
+
+const close = () => {
+    emit('close');
+    setTimeout(() => {
+        form.resetForm({
+          values: {
+            full_name: props.person?.full_name || '',
+            tax_number: props.person?.tax_number || '',
+            social_security_number: props.person?.social_security_number || '',
+            description: props.person?.description || ''
+          }
+        });
+    }, 500);
+}
+
+const updatePerson = async () => {
+    processingUpdate.value = true;
+    const { values } = form;
+
+    router.put(
+      route('person.update', props.person),
+      values,
+      {
+        preserveScroll: true,
+        onSuccess: () => {
+          processingUpdate.value = false;
+          close();
+        },
+        onError: (errors) => {
+          // Map Inertia errors to VeeValidate field errors
+          Object.keys(errors).forEach((field) => {
+            const errorMessages = Array.isArray(errors[field])
+              ? errors[field]
+              : [errors[field]];
+            form.setFieldError(field, errorMessages[0]);
+          });
+          processingUpdate.value = false;
+        },
+        onFinish: () => {
+          processingUpdate.value = false;
+        },
+      }
+    );
+}
+
+const onSubmit = form.handleSubmit(() => {
+  updatePerson();
+});
+
+const onConfirm = () => {
+    onSubmit();
+}
+</script>
+<template>
+    <UpdateDialog
+        :show="show"
+        :title="`Posodobi ${person.full_name}`"
+        confirm-text="Shrani"
+        :processing="processingUpdate"
+        @close="close"
+        @confirm="onConfirm"
+    >
+        <form @submit.prevent="onSubmit">
+            <SectionTitle class="border-b mb-4">
+                <template #title>
+                    Oseba
+                </template>
+            </SectionTitle>
+
+            <div class="space-y-4">
+                <FormField v-slot="{ componentField }" name="full_name">
+                    <FormItem>
+                        <FormLabel>Naziv</FormLabel>
+                        <FormControl>
+                            <Input 
+                                id="cfullname"
+                                type="text"
+                                placeholder="Naziv"
+                                autocomplete="full-name"
+                                v-bind="componentField"
+                            />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+
+                <FormField v-slot="{ componentField }" name="tax_number">
+                    <FormItem>
+                        <FormLabel>Davčna</FormLabel>
+                        <FormControl>
+                            <Input 
+                                id="ctaxnumber"
+                                type="text"
+                                placeholder="Davčna številka"
+                                autocomplete="tax-number"
+                                v-bind="componentField"
+                            />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+
+                <FormField v-slot="{ componentField }" name="social_security_number">
+                    <FormItem>
+                        <FormLabel>Matična / Emšo</FormLabel>
+                        <FormControl>
+                            <Input 
+                                id="csocialSecurityNumber"
+                                type="text"
+                                placeholder="Matična / Emšo"
+                                autocomplete="social-security-number"
+                                v-bind="componentField"
+                            />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+                
+                <FormField v-slot="{ componentField }" name="description">
+                    <FormItem>
+                        <FormLabel>Opis</FormLabel>
+                        <FormControl>
+                            <Textarea 
+                                id="cdescription"
+                                placeholder="Opis"
+                                v-bind="componentField"
+                            />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+            </div>
+        </form>
+    </UpdateDialog>
+</template>