Changes to import and notifications

2025-10-13 21:14:10 +02:00 · 2025-10-13 21:14:10 +02:00 · 79b3e20b02
commit 79b3e20b02
parent 0bbed64542
28 changed files with 2173 additions and 438 deletions
--- a/app/Http/Controllers/ActivityNotificationController.php
+++ b/app/Http/Controllers/ActivityNotificationController.php
@ -0,0 +1,41 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Activity;
+use App\Models\ActivityNotificationRead;
+use Illuminate\Http\Request;
+
+class ActivityNotificationController extends Controller
+{
+    /**
+     * Handle the incoming request.
+     */
+    public function __invoke(Request $request)
+    {
+        $request->validate([
+            'activity_id' => ['required', 'integer', 'exists:activities,id'],
+        ]);
+
+        $userId = optional($request->user())->id;
+        if (! $userId) {
+            abort(403);
+        }
+
+        $activity = Activity::query()->select(['id', 'due_date'])->findOrFail($request->integer('activity_id'));
+        $due = optional($activity->due_date) ? date('Y-m-d', strtotime($activity->due_date)) : now()->toDateString();
+
+        ActivityNotificationRead::query()->updateOrCreate(
+            [
+                'user_id' => $userId,
+                'activity_id' => $activity->id,
+                'due_date' => $due,
+            ],
+            [
+                'read_at' => now(),
+            ]
+        );
+
+        return response()->json(['status' => 'ok']);
+    }
+}
--- a/app/Http/Controllers/ClientCaseContoller.php
+++ b/app/Http/Controllers/ClientCaseContoller.php
@ -57,7 +57,7 @@ public function index(ClientCase $clientCase, Request $request)

        return Inertia::render('Cases/Index', [
            'client_cases' => $query
-                ->paginate(15, ['*'], 'client-cases-page')
+                ->paginate($request->integer('perPage', 15), ['*'], 'client-cases-page')
                ->withQueryString(),
            'filters' => $request->only(['search']),
        ]);
--- a/app/Http/Controllers/ClientController.php
+++ b/app/Http/Controllers/ClientController.php
@ -53,7 +53,7 @@ public function index(Client $client, Request $request)

        return Inertia::render('Client/Index', [
            'clients' => $query
-                ->paginate(15)
+                ->paginate($request->integer('perPage', 15))
                ->withQueryString(),
            'filters' => $request->only(['search']),
        ]);
@ -104,7 +104,7 @@ public function show(Client $client, Request $request)
                ])
                ->where('active', 1)
                ->orderByDesc('created_at')
-                ->paginate(15)
+                ->paginate($request->integer('perPage', 15))
                ->withQueryString(),
            'types' => $types,
            'filters' => $request->only(['search']),
@ -158,7 +158,7 @@ public function contracts(Client $client, Request $request)

        return Inertia::render('Client/Contracts', [
            'client' => $data,
-            'contracts' => $contractsQuery->paginate(20)->withQueryString(),
+            'contracts' => $contractsQuery->paginate($request->integer('perPage', 20))->withQueryString(),
            'filters' => $request->only(['from', 'to', 'search']),
            'types' => $types,
        ]);
--- a/app/Http/Controllers/ImportController.php
+++ b/app/Http/Controllers/ImportController.php
@ -146,6 +146,7 @@ public function store(Request $request)
            'size' => $file->getSize(),
            'sheet_name' => $validated['sheet_name'] ?? null,
            'status' => 'uploaded',
+            'show_missing' => false,
            'meta' => [
                'has_header' => $validated['has_header'] ?? true,
            ],
@ -155,6 +156,7 @@ public function store(Request $request)
            'id' => $import->id,
            'uuid' => $import->uuid,
            'status' => $import->status,
+            'show_missing' => (bool) ($import->show_missing ?? false),
        ]);
    }

@ -354,6 +356,116 @@ public function getMappings(Import $import)
        return response()->json(['mappings' => $rows]);
    }

+    /**
+     * List active, non-archived contracts for the import's client that are NOT present
+     * in the processed import file (based on mapped contract.reference values).
+     * Only available when contract.reference mapping apply_mode is 'keyref'.
+     */
+    public function missingContracts(Import $import)
+    {
+        // Ensure client context is available
+        if (empty($import->client_id)) {
+            return response()->json(['error' => 'Import has no client bound.'], 422);
+        }
+
+        // Respect optional feature flag on import
+        if (! (bool) ($import->show_missing ?? false)) {
+            return response()->json(['error' => 'Missing contracts listing is disabled for this import.'], 422);
+        }
+
+        // Check that this import's mappings set contract.reference to keyref mode
+        $mappings = \DB::table('import_mappings')
+            ->where('import_id', $import->id)
+            ->get(['target_field', 'apply_mode']);
+        $isKeyref = false;
+        foreach ($mappings as $map) {
+            $tf = strtolower((string) ($map->target_field ?? ''));
+            $am = strtolower((string) ($map->apply_mode ?? ''));
+            if (in_array($tf, ['contract.reference', 'contracts.reference'], true) && $am === 'keyref') {
+                $isKeyref = true;
+                break;
+            }
+        }
+        if (! $isKeyref) {
+            return response()->json(['error' => 'Missing contracts are only available for keyref mapping on contract.reference.'], 422);
+        }
+
+        // Collect referenced contract references from processed rows
+        $present = [];
+        foreach (\App\Models\ImportRow::query()->where('import_id', $import->id)->get(['mapped_data']) as $row) {
+            $md = $row->mapped_data ?? [];
+            if (is_array($md) && isset($md['contract']['reference'])) {
+                $ref = (string) $md['contract']['reference'];
+                if ($ref !== '') {
+                    $present[] = preg_replace('/\s+/', '', trim($ref));
+                }
+            }
+        }
+        $present = array_values(array_unique(array_filter($present)));
+
+        // Query active, non-archived contracts for this client that were not in import
+        // Include person full_name (owner of the client case) and aggregate active accounts' balance_amount
+        $contractsQ = \App\Models\Contract::query()
+            ->join('client_cases', 'contracts.client_case_id', '=', 'client_cases.id')
+            ->join('person', 'person.id', '=', 'client_cases.person_id')
+            ->leftJoin('accounts', function ($join) {
+                $join->on('accounts.contract_id', '=', 'contracts.id')
+                    ->where('accounts.active', 1);
+            })
+            ->where('client_cases.client_id', $import->client_id)
+            ->where('contracts.active', 1)
+            ->whereNull('contracts.deleted_at')
+            ->when(count($present) > 0, function ($q) use ($present) {
+                $q->whereNotIn('contracts.reference', $present);
+            })
+            ->groupBy('contracts.uuid', 'contracts.reference', 'client_cases.uuid', 'person.full_name')
+            ->orderBy('contracts.reference')
+            ->get([
+                'contracts.uuid as uuid',
+                'contracts.reference as reference',
+                'client_cases.uuid as case_uuid',
+                'person.full_name as full_name',
+                \DB::raw('COALESCE(SUM(accounts.balance_amount), 0) as balance_amount'),
+            ]);
+
+        return response()->json([
+            'missing' => $contractsQ,
+            'count' => $contractsQ->count(),
+        ]);
+    }
+
+    /**
+     * Update import options (e.g., booleans like show_missing, reactivate) from the UI.
+     */
+    public function updateOptions(Request $request, Import $import)
+    {
+        $data = $request->validate([
+            'show_missing' => 'nullable|boolean',
+            'reactivate' => 'nullable|boolean',
+        ]);
+
+        $payload = [];
+        if (array_key_exists('show_missing', $data)) {
+            $payload['show_missing'] = (bool) $data['show_missing'];
+        }
+        if (array_key_exists('reactivate', $data)) {
+            $payload['reactivate'] = (bool) $data['reactivate'];
+        }
+        if (! empty($payload)) {
+            $import->update($payload);
+        }
+
+        return response()->json([
+            'ok' => true,
+            'import' => [
+                'id' => $import->id,
+                'uuid' => $import->uuid,
+                'show_missing' => (bool) ($import->show_missing ?? false),
+                'reactivate' => (bool) ($import->reactivate ?? false),
+            ],
+        ]);
+    }
+
    // Fetch recent import events (logs) for an import
    public function getEvents(Import $import)
    {
@ -533,6 +645,8 @@ public function show(Import $import)
                'client_id' => $import->client_id,
                'client_uuid' => optional($client)->uuid,
                'import_template_id' => $import->import_template_id,
+                'show_missing' => (bool) ($import->show_missing ?? false),
+                'reactivate' => (bool) ($import->reactivate ?? false),
                'total_rows' => $import->total_rows,
                'imported_rows' => $import->imported_rows,
                'invalid_rows' => $import->invalid_rows,
--- a/app/Http/Controllers/NotificationController.php
+++ b/app/Http/Controllers/NotificationController.php
@ -0,0 +1,75 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Activity;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class NotificationController extends Controller
+{
+    public function unread(Request $request)
+    {
+        $user = $request->user();
+        if (! $user) {
+            abort(403);
+        }
+
+        $today = now()->toDateString();
+        $perPage = max(1, min(100, (int) $request->integer('perPage', 15)));
+        $search = trim((string) $request->input('search', ''));
+
+        $query = Activity::query()
+            ->select(['id', 'due_date', 'amount', 'contract_id', 'client_case_id', 'created_at'])
+            ->whereNotNull('due_date')
+            ->whereDate('due_date', '<=', $today)
+            ->whereNotExists(function ($q) use ($user) {
+                $q->from('activity_notification_reads as anr')
+                    ->whereColumn('anr.activity_id', 'activities.id')
+                    ->where('anr.user_id', $user->id)
+                    ->whereColumn('anr.due_date', 'activities.due_date');
+            })
+            // allow simple search by contract reference or person name
+            ->when($search !== '', function ($q) use ($search) {
+                $s = mb_strtolower($search);
+                $q->leftJoin('contracts', 'contracts.id', '=', 'activities.contract_id')
+                    ->leftJoin('client_cases', 'client_cases.id', '=', 'activities.client_case_id')
+                    ->leftJoin('person', 'person.id', '=', 'client_cases.person_id')
+                    ->where(function ($qq) use ($s) {
+                        $qq->whereRaw('LOWER(COALESCE(contracts.reference, \'\')) LIKE ?', ['%'.$s.'%'])
+                            ->orWhereRaw('LOWER(COALESCE(person.full_name, \'\')) LIKE ?', ['%'.$s.'%']);
+                    });
+            })
+            ->with([
+                'contract' => function ($q) {
+                    $q->select(['contracts.id', 'contracts.uuid', 'contracts.reference', 'contracts.client_case_id'])
+                        ->with([
+                            'clientCase' => function ($qq) {
+                                $qq->select(['client_cases.id', 'client_cases.uuid']);
+                            },
+                            'account' => function ($qq) {
+                                $qq->select(['accounts.id', 'accounts.contract_id', 'accounts.balance_amount', 'accounts.initial_amount']);
+                            },
+                        ]);
+                },
+                'clientCase' => function ($q) {
+                    $q->select(['client_cases.id', 'client_cases.uuid', 'client_cases.person_id'])
+                        ->with([
+                            'person' => function ($qq) {
+                                $qq->select(['person.id', 'person.full_name']);
+                            },
+                        ]);
+                },
+            ])
+            // force ordering by due_date DESC only
+            ->orderByDesc('activities.due_date');
+
+        // Use a custom page parameter name to match the frontend DataTableServer
+        $activities = $query->paginate($perPage, ['*'], 'unread-page')->withQueryString();
+
+        return Inertia::render('Notifications/Unread', [
+            'activities' => $activities,
+            'today' => $today,
+        ]);
+    }
+}
--- a/app/Http/Middleware/HandleInertiaRequests.php
+++ b/app/Http/Middleware/HandleInertiaRequests.php
@ -66,21 +66,44 @@ public function share(Request $request): array
                    }

                    $today = now()->toDateString();
+
+                    // Base fetch to avoid serialization issues; eager load relations afterwards
                    $activities = \App\Models\Activity::query()
-                        ->with([
-                            // Include contract uuid and reference, keep id for relation mapping, and client_case_id for nested eager load
-                            'contract:id,uuid,reference,client_case_id',
-                            // Include client case uuid (id required for mapping, will be hidden in JSON)
-                            'contract.clientCase:id,uuid',
-                            // Include account amounts; contract_id needed for relation mapping
-                            'contract.account:contract_id,balance_amount,initial_amount',
-                        ])
+                        ->select(['id', 'due_date', 'amount', 'contract_id', 'client_case_id', 'created_at'])
                        ->whereDate('due_date', $today)
-                        ->where('user_id', $user->id)
+                        ->whereNotExists(function ($q) use ($request) {
+                            $q->from('activity_notification_reads as anr')
+                                ->whereColumn('anr.activity_id', 'activities.id')
+                                ->where('anr.user_id', optional($request->user())->id)
+                                ->whereColumn('anr.due_date', 'activities.due_date');
+                        })
                        ->orderBy('created_at')
                        ->limit(20)
                        ->get();

+                    // Eager load needed relations (contracts and client cases) with qualified selects
+                    $activities->load([
+                        'contract' => function ($q) {
+                            $q->select(['contracts.id', 'contracts.uuid', 'contracts.reference', 'contracts.client_case_id'])
+                                ->with([
+                                    'clientCase' => function ($qq) {
+                                        $qq->select(['client_cases.id', 'client_cases.uuid']);
+                                    },
+                                    'account' => function ($qq) {
+                                        $qq->select(['accounts.id', 'accounts.contract_id', 'accounts.balance_amount', 'accounts.initial_amount']);
+                                    },
+                                ]);
+                        },
+                        'clientCase' => function ($q) {
+                            $q->select(['client_cases.id', 'client_cases.uuid', 'client_cases.person_id'])
+                                ->with([
+                                    'person' => function ($qq) {
+                                        $qq->select(['person.id', 'person.full_name']);
+                                    },
+                                ]);
+                        },
+                    ]);
+
                    return [
                        'dueToday' => [
                            'count' => $activities->count(),
--- a/app/Models/ActivityNotificationRead.php
+++ b/app/Models/ActivityNotificationRead.php
@ -0,0 +1,28 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class ActivityNotificationRead extends Model
+{
+    //
+    protected $fillable = [
+        'user_id', 'activity_id', 'due_date', 'read_at',
+    ];
+
+    protected $casts = [
+        'due_date' => 'date',
+        'read_at' => 'datetime',
+    ];
+
+    public function user(): \Illuminate\Database\Eloquent\Relations\BelongsTo
+    {
+        return $this->belongsTo(User::class);
+    }
+
+    public function activity(): \Illuminate\Database\Eloquent\Relations\BelongsTo
+    {
+        return $this->belongsTo(Activity::class);
+    }
+}
--- a/app/Models/Import.php
+++ b/app/Models/Import.php
@ -12,7 +12,7 @@ class Import extends Model
    use HasFactory;

    protected $fillable = [
-        'uuid', 'user_id', 'import_template_id', 'client_id', 'source_type', 'file_name', 'original_name', 'disk', 'path', 'size', 'sheet_name', 'status', 'reactivate', 'total_rows', 'valid_rows', 'invalid_rows', 'imported_rows', 'started_at', 'finished_at', 'failed_at', 'error_summary', 'meta',
+        'uuid', 'user_id', 'import_template_id', 'client_id', 'source_type', 'file_name', 'original_name', 'disk', 'path', 'size', 'sheet_name', 'status', 'reactivate', 'show_missing', 'total_rows', 'valid_rows', 'invalid_rows', 'imported_rows', 'started_at', 'finished_at', 'failed_at', 'error_summary', 'meta',
    ];

    protected $casts = [
@ -22,6 +22,7 @@ class Import extends Model
        'finished_at' => 'datetime',
        'failed_at' => 'datetime',
        'reactivate' => 'boolean',
+        'show_missing' => 'boolean',
    ];

    public function user(): BelongsTo
--- a/app/Services/ImportProcessor.php
+++ b/app/Services/ImportProcessor.php
@ -499,7 +499,7 @@ public function process(Import $import, ?Authenticatable $user = null): array
                        $contractKeyMode = $tplMeta['contract_key_mode'] ?? null;
                        if (! $accountIdForPayment && $paymentsImport && $contractKeyMode === 'reference') {
                            $contractRef = $mapped['contract']['reference'] ?? null;
-                            if ($contractRef) {
+                            if (! $contractId) {
                                $contract = \App\Models\Contract::query()
                                    ->when($import->client_id, function ($q, $clientId) {
                                        $q->join('client_cases', 'contracts.client_case_id', '=', 'client_cases.id')
@ -508,9 +508,25 @@ public function process(Import $import, ?Authenticatable $user = null): array
                                    ->where('contracts.reference', $contractRef)
                                    ->select('contracts.id')
                                    ->first();
-                                if ($contract) {
-                                    $accountIdForPayment = \App\Models\Account::where('contract_id', $contract->id)->value('id');
+                            } elseif ($hasContractRoot) {
+                                // If mapping for contract.reference is keyref, do NOT create contract – lookup only
+                                $refMode = $this->mappingMode($mappings, 'contract.reference');
+                                if ($refMode === 'keyref') {
+                                    ImportEvent::create([
+                                        'import_id' => $import->id,
+                                        'user_id' => null,
+                                        'event' => 'row_skipped',
+                                        'level' => 'warning',
+                                        'message' => 'Contract reference '.$contractRef.' does not exist (keyref); row skipped.',
+                                    ]);
+
+                                    return [
+                                        'action' => 'skipped',
+                                        'message' => 'contract.reference keyref lookup failed: not found',
+                                    ];
                                }
+                                /* Lines 1242-1269 omitted */
+                                $contractId = $createdContract->id;
                            }
                        }

@ -1583,6 +1599,20 @@ private function upsertContractChain(Import $import, array $mapped, $mappings):
            }
        }

+        // If contract not found and contract.reference is keyref, skip without creating entities
+        $refMode = $this->mappingMode($mappings, 'contract.reference');
+        if (! $existing && $refMode === 'keyref') {
+            ImportEvent::create([
+                'import_id' => $import->id,
+                'user_id' => null,
+                'event' => 'row_skipped',
+                'level' => 'warning',
+                'message' => 'Contract reference '.$reference.' does not exist (keyref); row skipped.',
+            ]);
+
+            return ['action' => 'skipped', 'message' => 'contract.reference keyref lookup failed: not found'];
+        }
+
        if ($existing) {
            // 1) Prepare contract field changes (non-null)
            $changes = array_filter($applyUpdate, fn ($v) => ! is_null($v));
@ -2040,6 +2070,24 @@ private function normalizeTargetField(string $target, array $rootAliasMap, array
        return $bracket !== null ? ($root.'['.$bracket.']') : $root;
    }

+    /**
+     * Get apply mode for a specific mapping target field, normalized via normalizeMappings beforehand.
+     * Returns lowercased mode string like 'insert', 'update', 'both', 'keyref', or null if not present.
+     */
+    private function mappingMode($mappings, string $targetField): ?string
+    {
+        foreach ($mappings as $map) {
+            $target = (string) ($map->target_field ?? '');
+            if ($target === $targetField) {
+                $mode = $map->apply_mode ?? null;
+
+                return is_string($mode) ? strtolower($mode) : null;
+            }
+        }
+
+        return null;
+    }
+
    protected function loadImportEntityConfig(): array
    {
        $entities = ImportEntity::all();
--- a/app/Services/ImportSimulationService.php
+++ b/app/Services/ImportSimulationService.php
@ -20,6 +20,11 @@
 */
 class ImportSimulationService
 {
+    /**
+     * Optional client scoping for lookups during a simulation run.
+     */
+    private ?int $clientId = null;
+
    /**
     * Public entry: simulate import applying mappings to first $limit rows.
     * Keeps existing machine keys for backward compatibility, but adds Slovenian
@ -27,6 +32,8 @@ class ImportSimulationService
     */
    public function simulate(Import $import, int $limit = 100, bool $verbose = false): array
    {
+        // Store client context for the duration of this simulation
+        $this->clientId = $import->client_id ?: null;
        $meta = $import->meta ?? [];
        $hasHeader = (bool) ($meta['has_header'] ?? true);
        $delimiter = $meta['forced_delimiter'] ?? $meta['detected_delimiter'] ?? ',';
@ -70,9 +77,14 @@ public function simulate(Import $import, int $limit = 100, bool $verbose = false
        $translatedStatuses = $this->statusTranslations();

        $simRows = [];
+        // Determine keyref behavior for contract.reference from mappings/template
+        $tplMeta = optional($import->template)->meta ?? [];
+        $contractKeyModeTpl = $tplMeta['contract_key_mode'] ?? null; // e.g. 'reference'
+        $contractRefMode = $this->mappingModeForImport($import, 'contract.reference'); // e.g. 'keyref'
        foreach ($rows as $idx => $rawValues) {
            $assoc = $this->associateRow($columns, $rawValues);
            $rowEntities = [];
+            $keyrefSkipRow = false; // if true, downstream creations are skipped for this row

            // Reactivation intent detection (row > import > template)
            $rowReactivate = false;
@ -139,6 +151,24 @@ public function simulate(Import $import, int $limit = 100, bool $verbose = false
                    $contractEntity['action'] = 'reactivate';
                    $contractEntity['reactivation'] = true;
                }
+                // Keyref enforcement: if mapping is keyref (or template says reference) and contract doesn't exist, skip row creations
+                $ref = $contractEntity['reference'] ?? null;
+                if (($contractRefMode === 'keyref' || $contractKeyModeTpl === 'reference')
+                    && ($contractEntity['action'] === 'create')
+                ) {
+                    // Adjust summaries: revert create -> invalid
+                    if (isset($summaries['contract'])) {
+                        if (($summaries['contract']['create'] ?? 0) > 0) {
+                            $summaries['contract']['create']--;
+                        }
+                        $summaries['contract']['invalid'] = ($summaries['contract']['invalid'] ?? 0) + 1;
+                    }
+                    $contractEntity['original_action'] = 'create';
+                    $contractEntity['action'] = 'skip';
+                    $contractEntity['warning'] = 'Contract reference '.(string) $ref.' does not exist (keyref); row skipped.';
+                    $contractEntity['skipped_due_to_keyref'] = true;
+                    $keyrefSkipRow = true;
+                }
                // Attach contract meta preview from mappings (group-aware)
                $metaGroups = [];
                // Grouped contract.meta.* via groupedLookup
@ -199,6 +229,19 @@ public function simulate(Import $import, int $limit = 100, bool $verbose = false
                    }
                }
                [$accountEntity, $summaries, $accountCache] = $this->simulateAccount($val, $summaries, $accountCache, $rawAccountRef);
+                // If row is being skipped due to keyref missing contract, do not create accounts
+                if ($keyrefSkipRow && ($accountEntity['action'] ?? null) === 'create') {
+                    if (isset($summaries['account'])) {
+                        if (($summaries['account']['create'] ?? 0) > 0) {
+                            $summaries['account']['create']--;
+                        }
+                        $summaries['account']['invalid'] = ($summaries['account']['invalid'] ?? 0) + 1;
+                    }
+                    $accountEntity['original_action'] = 'create';
+                    $accountEntity['action'] = 'skip';
+                    $accountEntity['warning'] = 'Skipped due to missing contract.reference in keyref mode.';
+                    $accountEntity['skipped_due_to_keyref'] = true;
+                }
                if ($inherited) {
                    $accountEntity['inherited_reference'] = true;
                }
@ -212,6 +255,10 @@ public function simulate(Import $import, int $limit = 100, bool $verbose = false

            // Generic roots (person, address, email, phone, client_case, etc.) excluding already handled ones
            foreach (array_keys($entityRoots) as $rootKey) {
+                // If keyref skip is active for this row, suppress downstream creations (person, client_case, etc.)
+                if ($keyrefSkipRow && ! in_array($rootKey, ['contract', 'account', 'payment'], true)) {
+                    continue;
+                }
                if (in_array($rootKey, ['contract', 'account', 'payment'], true)) {
                    continue; // already simulated explicitly
                }
@ -220,6 +267,16 @@ public function simulate(Import $import, int $limit = 100, bool $verbose = false
                if ($existingContract && in_array($rootKey, ['person', 'client_case'], true)) {
                    continue;
                }
+                // Special-case: when contract exists and email/phone/address mapping uses the same column as contract.reference,
+                // treat it as a root declaration only and defer to chain attachments instead of generic simulation.
+                if ($existingContract && in_array($rootKey, ['email', 'phone', 'address'], true)) {
+                    $crSrc = $targetToSource['contract.reference'] ?? null;
+                    $rk = $rootKey === 'email' ? 'email.value' : ($rootKey === 'phone' ? 'phone.nu' : 'address.address');
+                    $rkSrc = $targetToSource[$rk] ?? null;
+                    if ($crSrc !== null && $rkSrc !== null && $crSrc === $rkSrc) {
+                        continue;
+                    }
+                }
                $reference = $val($rootKey.'.reference');
                $identityCandidates = $this->genericIdentityCandidates($rootKey, $val);
                if (isset($multiRoots[$rootKey]) && $multiRoots[$rootKey] === true) {
@ -237,12 +294,18 @@ public function simulate(Import $import, int $limit = 100, bool $verbose = false
                            $verbose,
                            $targetToSource
                        );
-                    // Add action labels and attach
-                    $rowEntities[$rootKey] = array_map(function ($ent) use ($translatedActions) {
+                    // Add action labels
+                    $items = array_map(function ($ent) use ($translatedActions) {
                        $ent['action_label'] = $translatedActions[$ent['action']] ?? $ent['action'];

                        return $ent;
                    }, $items);
+                    // If only a single, ungrouped item, flatten to a single entity for convenience
+                    if (count($items) === 1 && (($items[0]['group'] ?? '') === '')) {
+                        $rowEntities[$rootKey] = $items[0];
+                    } else {
+                        $rowEntities[$rootKey] = $items;
+                    }
                } else {
                    [$genericEntity, $summaries, $genericCaches, $genericExistingIdentities, $genericSeenIdentities]
                        = $this->simulateGenericRoot(
@ -491,6 +554,10 @@ public function simulate(Import $import, int $limit = 100, bool $verbose = false
            if (isset($rowEntities['payment']['status']) && $rowEntities['payment']['status'] !== 'ok') {
                $rowStatus = $rowEntities['payment']['status'];
            }
+            // If we skipped due to keyref, surface a warning status for the row if not already set
+            if ($rowStatus === 'ok' && $keyrefSkipRow) {
+                $rowStatus = 'warning';
+            }
            $simRows[] = [
                'index' => $idx + 1,
                'entities' => $rowEntities,
@ -806,7 +873,14 @@ private function simulateContract(callable $val, array $summaries, array $cache,
            if (array_key_exists($reference, $cache)) {
                $contract = $cache[$reference];
            } else {
-                $contract = Contract::query()->where('reference', $reference)->first(['id', 'reference', 'client_case_id', 'active', 'deleted_at']);
+                $q = Contract::query()->where('reference', $reference);
+                // Scope to selected client when available
+                if (! is_null($this->clientId)) {
+                    $q->whereHas('clientCase', function ($qq): void {
+                        $qq->where('client_id', $this->clientId);
+                    });
+                }
+                $contract = $q->first(['id', 'reference', 'client_case_id', 'active', 'deleted_at']);
                $cache[$reference] = $contract; // may be null
            }
        }
@ -838,10 +912,16 @@ private function simulateAccount(callable $val, array $summaries, array $cache,
            if (array_key_exists($reference, $cache)) {
                $account = $cache[$reference];
            } else {
-                $account = Account::query()
+                $q = Account::query()
                    ->where('reference', $reference)
-                    ->where('active', 1)
-                    ->first(['id', 'reference', 'balance_amount']);
+                    ->where('active', 1);
+                // Scope to selected client when available via contract -> clientCase
+                if (! is_null($this->clientId)) {
+                    $q->whereHas('contract.clientCase', function ($qq): void {
+                        $qq->where('client_id', $this->clientId);
+                    });
+                }
+                $account = $q->first(['id', 'reference', 'balance_amount']);
                $cache[$reference] = $account;
            }
        }
@ -897,6 +977,39 @@ private function simulateAccount(callable $val, array $summaries, array $cache,
        return [$entity, $summaries, $cache];
    }

+    /**
+     * Lookup apply_mode for a mapping target field on this import.
+     * Returns lowercased mode like 'insert', 'update', 'both', 'keyref', or null if not found.
+     */
+    private function mappingModeForImport(Import $import, string $targetField): ?string
+    {
+        $rows = \DB::table('import_mappings')
+            ->where('import_id', $import->id)
+            ->get(['target_field', 'apply_mode']);
+        foreach ($rows as $row) {
+            $tf = (string) ($row->target_field ?? '');
+            if ($tf === '') {
+                continue;
+            }
+            // Normalize root part to match canonical keys like contract.reference
+            if (str_contains($tf, '.')) {
+                [$root, $rest] = explode('.', $tf, 2);
+            } else {
+                $root = $tf;
+                $rest = null;
+            }
+            $norm = $this->normalizeRoot($root);
+            $tfNorm = $rest !== null ? ($norm.'.'.$rest) : $norm;
+            if ($tfNorm === $targetField) {
+                $mode = $row->apply_mode ?? null;
+
+                return is_string($mode) ? strtolower($mode) : null;
+            }
+        }
+
+        return null;
+    }
+
    private function simulateImplicitAccount(int $contractId, array $summaries, array $cache): array
    {
        $acct = Account::query()->where('contract_id', $contractId)->orderBy('id')->first(['id', 'reference', 'balance_amount']);
@ -1070,7 +1183,12 @@ private function simulateGenericRoot(
                // Try/catch to avoid issues if column doesn't exist
                try {
                    if (\Schema::hasColumn((new $modelClass)->getTable(), 'reference')) {
-                        $record = $modelClass::query()->where('reference', $reference)->first(['id', 'reference']);
+                        $qb = $modelClass::query()->where('reference', $reference);
+                        // Scope client_case lookups to selected client
+                        if ($modelClass === \App\Models\ClientCase::class && ! is_null($this->clientId)) {
+                            $qb->where('client_id', $this->clientId);
+                        }
+                        $record = $qb->first(['id', 'reference']);
                    }
                } catch (\Throwable) {
                    $record = null;
@ -1471,7 +1589,11 @@ private function simulateGenericRootMulti(
                } elseif ($modelClass && class_exists($modelClass)) {
                    try {
                        if (\Schema::hasColumn((new $modelClass)->getTable(), 'reference')) {
-                            $record = $modelClass::query()->where('reference', $reference)->first(['id', 'reference']);
+                            $qb = $modelClass::query()->where('reference', $reference);
+                            if ($modelClass === \App\Models\ClientCase::class && ! is_null($this->clientId)) {
+                                $qb->where('client_id', $this->clientId);
+                            }
+                            $record = $qb->first(['id', 'reference']);
                        }
                    } catch (\Throwable) {
                        $record = null;
--- a/database/migrations/2025_10_13_090000_add_show_missing_to_imports_table.php
+++ b/database/migrations/2025_10_13_090000_add_show_missing_to_imports_table.php
@ -0,0 +1,26 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::table('imports', function (Blueprint $table) {
+            if (! Schema::hasColumn('imports', 'show_missing')) {
+                $table->boolean('show_missing')->default(false)->after('reactivate');
+            }
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('imports', function (Blueprint $table) {
+            if (Schema::hasColumn('imports', 'show_missing')) {
+                $table->dropColumn('show_missing');
+            }
+        });
+    }
+};
--- a/database/migrations/2025_10_13_164417_create_activity_notification_reads_table.php
+++ b/database/migrations/2025_10_13_164417_create_activity_notification_reads_table.php
@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('activity_notification_reads', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('user_id')->constrained()->cascadeOnDelete();
+            $table->foreignId('activity_id')->constrained()->cascadeOnDelete();
+            $table->date('due_date');
+            $table->timestamp('read_at')->nullable();
+            $table->timestamps();
+
+            $table->unique(['user_id', 'activity_id', 'due_date'], 'uniq_user_activity_due');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('activity_notification_reads');
+    }
+};
--- a/database/migrations/2025_10_13_164513_create_activity_notification_reads_table.php
+++ b/database/migrations/2025_10_13_164513_create_activity_notification_reads_table.php
@ -0,0 +1,34 @@
+<?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
+    {
+        if (Schema::hasTable('activity_notification_reads')) {
+            return; // Table created by earlier migration
+        }
+
+        Schema::create('activity_notification_reads', function (Blueprint $table) {
+            $table->id();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        // Intentionally keep as-is to avoid dropping a table created by the primary migration
+        if (Schema::hasTable('activity_notification_reads')) {
+            Schema::dropIfExists('activity_notification_reads');
+        }
+    }
+};
--- a/resources/js/Components/DataTable/DataTableClient.vue
+++ b/resources/js/Components/DataTable/DataTableClient.vue
@ -0,0 +1,375 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import {
+  FwbTable,
+  FwbTableHead,
+  FwbTableHeadCell,
+  FwbTableBody,
+  FwbTableRow,
+  FwbTableCell,
+} from "flowbite-vue";
+
+const props = defineProps({
+  columns: { type: Array, required: true }, // [{ key, label, sortable?, align?, class?, formatter? }]
+  rows: { type: Array, default: () => [] },
+  // Sorting
+  sort: { type: Object, default: () => ({ key: null, direction: null }) },
+  // Searching
+  search: { type: String, default: "" },
+  searchKeys: { type: [Array, Function], default: () => [] },
+  // Pagination
+  page: { type: Number, default: 1 },
+  pageSize: { type: Number, default: 10 },
+  pageSizeOptions: { type: Array, default: () => [10, 25, 50] },
+  // UI
+  loading: { type: Boolean, default: false },
+  emptyText: { type: String, default: "Ni podatkov." },
+  rowKey: { type: [String, Function], default: "id" },
+  showToolbar: { type: Boolean, default: true },
+  // Pagination UX options
+  showPageStats: { type: Boolean, default: true },
+  showGoto: { type: Boolean, default: true },
+  maxPageLinks: { type: Number, default: 5 }, // odd number preferred
+});
+
+const emit = defineEmits([
+  "update:sort",
+  "update:search",
+  "update:page",
+  "update:pageSize",
+  "row:click",
+]);
+
+const internalSearch = ref(props.search);
+watch(
+  () => props.search,
+  (v) => {
+    internalSearch.value = v ?? "";
+  }
+);
+watch(internalSearch, (v, ov) => {
+  if (v !== props.search) {
+    emit("update:search", v);
+    // reset page when search changes
+    if (props.page !== 1) emit("update:page", 1);
+  }
+});
+
+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);
+}
+
+function toggleSort(col) {
+  if (!col?.sortable) return;
+  const { key } = col;
+  const current = props.sort || { key: null, direction: null };
+  let direction = "asc";
+  if (current.key === key) {
+    direction =
+      current.direction === "asc" ? "desc" : current.direction === "desc" ? null : "asc";
+  }
+  emit("update:sort", { key: direction ? key : null, direction });
+  // reset to page 1 when sort changes
+  if (props.page !== 1) emit("update:page", 1);
+}
+
+const filteredRows = computed(() => {
+  const s = (props.search ?? "").toString().trim().toLowerCase();
+  if (!s) return props.rows || [];
+  const keys = props.searchKeys;
+  if (typeof keys === "function") {
+    return (props.rows || []).filter((r) => {
+      try {
+        return String(keys(r) ?? "")
+          .toLowerCase()
+          .includes(s);
+      } catch (e) {
+        return false;
+      }
+    });
+  }
+  const arr =
+    Array.isArray(keys) && keys.length ? keys : Object.keys(props.rows?.[0] || {});
+  return (props.rows || []).filter((r) => {
+    return arr.some((k) =>
+      String(r?.[k] ?? "")
+        .toLowerCase()
+        .includes(s)
+    );
+  });
+});
+
+const sortedRows = computed(() => {
+  const { key, direction } = props.sort || { key: null, direction: null };
+  if (!key || !direction) return filteredRows.value;
+  const arr = [...filteredRows.value];
+  arr.sort((a, b) => {
+    const av = a?.[key];
+    const bv = b?.[key];
+    if (av == null && bv == null) return 0;
+    if (av == null) return direction === "asc" ? -1 : 1;
+    if (bv == null) return direction === "asc" ? 1 : -1;
+    if (typeof av === "number" && typeof bv === "number")
+      return direction === "asc" ? av - bv : bv - av;
+    return direction === "asc"
+      ? String(av).localeCompare(String(bv))
+      : String(bv).localeCompare(String(av));
+  });
+  return arr;
+});
+
+const total = computed(() => sortedRows.value.length);
+const lastPage = computed(() =>
+  Math.max(1, Math.ceil(total.value / (props.pageSize || 10)))
+);
+const currentPage = computed(() =>
+  Math.min(Math.max(1, props.page || 1), lastPage.value)
+);
+const startIndex = computed(() => (currentPage.value - 1) * (props.pageSize || 10));
+const endIndex = computed(() =>
+  Math.min(startIndex.value + (props.pageSize || 10), total.value)
+);
+const pageRows = computed(() => sortedRows.value.slice(startIndex.value, endIndex.value));
+
+const showingFrom = computed(() => (total.value === 0 ? 0 : startIndex.value + 1));
+const showingTo = computed(() => (total.value === 0 ? 0 : endIndex.value));
+
+const gotoInput = ref("");
+function goToPageInput() {
+  const raw = String(gotoInput.value || "").trim();
+  const n = Number(raw);
+  if (!Number.isFinite(n)) return;
+  const target = Math.max(1, Math.min(lastPage.value, Math.floor(n)));
+  if (target !== currentPage.value) setPage(target);
+  gotoInput.value = "";
+}
+
+const visiblePages = computed(() => {
+  const pages = [];
+  const count = lastPage.value;
+  if (count <= 1) return [1];
+  const windowSize = Math.max(3, props.maxPageLinks);
+  const half = Math.floor(windowSize / 2);
+  let start = Math.max(1, currentPage.value - half);
+  let end = Math.min(count, start + windowSize - 1);
+  start = Math.max(1, Math.min(start, end - windowSize + 1));
+  for (let p = start; p <= end; p++) pages.push(p);
+  return pages;
+});
+
+function setPage(p) {
+  emit("update:page", Math.min(Math.max(1, p), lastPage.value));
+}
+function setPageSize(ps) {
+  emit("update:pageSize", Number(ps));
+  emit("update:page", 1);
+}
+</script>
+
+<template>
+  <div class="w-full">
+    <div v-if="showToolbar" class="mb-3 flex items-center justify-between gap-3">
+      <div class="flex items-center gap-2">
+        <input
+          type="text"
+          class="w-64 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+          placeholder="Iskanje..."
+          v-model="internalSearch"
+        />
+      </div>
+      <div class="flex items-center gap-2">
+        <label class="text-sm text-gray-600">Na stran</label>
+        <select
+          class="rounded border-gray-300 text-sm"
+          :value="pageSize"
+          @change="setPageSize($event.target.value)"
+        >
+          <option v-for="opt in pageSizeOptions" :key="opt" :value="opt">
+            {{ opt }}
+          </option>
+        </select>
+      </div>
+    </div>
+
+    <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 v-for="col in columns" :key="col.key" :class="col.class">
+            <button
+              v-if="col.sortable"
+              type="button"
+              class="inline-flex items-center gap-1 hover:text-indigo-600"
+              @click="toggleSort(col)"
+              :aria-sort="sort?.key === col.key ? sort.direction || 'none' : 'none'"
+            >
+              <span>{{ col.label }}</span>
+              <span v-if="sort?.key === col.key && sort.direction === 'asc'">▲</span>
+              <span v-else-if="sort?.key === col.key && sort.direction === 'desc'"
+                >▼</span
+              >
+            </button>
+            <span v-else>{{ col.label }}</span>
+          </FwbTableHeadCell>
+          <FwbTableHeadCell v-if="$slots.actions" class="w-px">&nbsp;</FwbTableHeadCell>
+        </FwbTableHead>
+
+        <FwbTableBody>
+          <template v-if="!loading && pageRows.length">
+            <FwbTableRow
+              v-for="(row, idx) in pageRows"
+              :key="keyOf(row)"
+              @click="$emit('row:click', row)"
+              class="cursor-default"
+            >
+              <FwbTableCell
+                v-for="col in columns"
+                :key="col.key"
+                :class="col.class"
+                :align="col.align || 'left'"
+              >
+                <template v-if="$slots['cell-' + col.key]">
+                  <slot
+                    :name="'cell-' + col.key"
+                    :row="row"
+                    :column="col"
+                    :value="row?.[col.key]"
+                    :index="idx"
+                  />
+                </template>
+                <template v-else-if="$slots.cell">
+                  <slot
+                    name="cell"
+                    :row="row"
+                    :column="col"
+                    :value="row?.[col.key]"
+                    :index="idx"
+                  />
+                </template>
+                <template v-else>
+                  {{ col.formatter ? col.formatter(row) : row?.[col.key] ?? "" }}
+                </template>
+              </FwbTableCell>
+              <FwbTableCell v-if="$slots.actions" class="w-px text-right">
+                <slot name="actions" :row="row" :index="idx" />
+              </FwbTableCell>
+            </FwbTableRow>
+          </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>
+          </template>
+          <template v-else>
+            <FwbTableRow>
+              <FwbTableCell :colspan="columns.length + ($slots.actions ? 1 : 0)">
+                <slot name="empty">
+                  <div class="p-6 text-center text-gray-500">{{ emptyText }}</div>
+                </slot>
+              </FwbTableCell>
+            </FwbTableRow>
+          </template>
+        </FwbTableBody>
+      </FwbTable>
+    </div>
+
+    <nav class="mt-3 flex flex-wrap items-center justify-between gap-3 text-sm text-gray-700" aria-label="Pagination">
+      <div v-if="showPageStats">
+        <span v-if="total > 0">Prikazano: {{ showingFrom }}–{{ showingTo }} od {{ total }}</span>
+        <span v-else>Ni zadetkov</span>
+      </div>
+      <div class="flex items-center gap-1">
+        <!-- First -->
+        <button
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 disabled:opacity-50"
+          :disabled="currentPage <= 1"
+          @click="setPage(1)"
+          aria-label="Prva stran"
+        >
+          ««
+        </button>
+        <!-- Prev -->
+        <button
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 disabled:opacity-50"
+          :disabled="currentPage <= 1"
+          @click="setPage(currentPage - 1)"
+          aria-label="Prejšnja stran"
+        >
+          «
+        </button>
+
+        <!-- Leading ellipsis / first page when window doesn't include 1 -->
+        <button
+          v-if="visiblePages[0] > 1"
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50"
+          @click="setPage(1)"
+        >1</button>
+        <span v-if="visiblePages[0] > 2" class="px-1">…</span>
+
+        <!-- Page numbers -->
+        <button
+          v-for="p in visiblePages"
+          :key="p"
+          class="px-3 py-1 rounded border transition-colors"
+          :class="p === currentPage ? 'border-indigo-600 bg-indigo-600 text-white' : 'border-gray-300 hover:bg-gray-50'"
+          :aria-current="p === currentPage ? 'page' : undefined"
+          @click="setPage(p)"
+        >
+          {{ p }}
+        </button>
+
+        <!-- Trailing ellipsis / last page when window doesn't include last -->
+        <span v-if="visiblePages[visiblePages.length - 1] < lastPage - 1" class="px-1">…</span>
+        <button
+          v-if="visiblePages[visiblePages.length - 1] < lastPage"
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50"
+          @click="setPage(lastPage)"
+        >{{ lastPage }}</button>
+
+        <!-- Next -->
+        <button
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 disabled:opacity-50"
+          :disabled="currentPage >= lastPage"
+          @click="setPage(currentPage + 1)"
+          aria-label="Naslednja stran"
+        >
+          »
+        </button>
+        <!-- Last -->
+        <button
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 disabled:opacity-50"
+          :disabled="currentPage >= lastPage"
+          @click="setPage(lastPage)"
+          aria-label="Zadnja stran"
+        >
+          »»
+        </button>
+
+        <!-- Goto page -->
+        <div v-if="showGoto" class="ms-2 flex items-center gap-1">
+          <input
+            v-model="gotoInput"
+            type="number"
+            min="1"
+            :max="lastPage"
+            inputmode="numeric"
+            class="w-16 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+            :placeholder="String(currentPage)"
+            aria-label="Pojdi na stran"
+            @keyup.enter="goToPageInput"
+            @blur="goToPageInput"
+          />
+          <span class="text-gray-500">/ {{ lastPage }}</span>
+        </div>
+      </div>
+    </nav>
+  </div>
+</template>
--- a/resources/js/Components/DataTable/DataTableServer.vue
+++ b/resources/js/Components/DataTable/DataTableServer.vue
@ -0,0 +1,390 @@
+<script setup>
+import { ref, watch, computed } from "vue";
+import { router } from "@inertiajs/vue3";
+import {
+  FwbTable,
+  FwbTableHead,
+  FwbTableHeadCell,
+  FwbTableBody,
+  FwbTableRow,
+  FwbTableCell,
+} from "flowbite-vue";
+
+const props = defineProps({
+  columns: { type: Array, required: true }, // [{ key, label, sortable?, align?, class? }]
+  rows: { type: Array, default: () => [] },
+  meta: { type: Object, required: true }, // { current_page, per_page, total, last_page }
+  sort: { type: Object, default: () => ({ key: null, direction: null }) },
+  search: { type: String, default: "" },
+  page: { type: Number, default: 1 },
+  pageSize: { type: Number, default: 10 },
+  pageSizeOptions: { type: Array, default: () => [10, 25, 50] },
+  routeName: { type: String, required: true },
+  routeParams: { type: Object, default: () => ({}) },
+  query: { type: Object, default: () => ({}) },
+  preserveState: { type: Boolean, default: true },
+  preserveScroll: { type: Boolean, default: true },
+  loading: { type: Boolean, default: false },
+  emptyText: { type: String, default: "Ni podatkov." },
+  rowKey: { type: [String, Function], default: "id" },
+  showToolbar: { type: Boolean, default: true },
+  onlyProps: { type: Array, default: () => [] }, // e.g., ['contracts']
+  // Pagination UX options
+  showPageStats: { type: Boolean, default: true },
+  showGoto: { type: Boolean, default: true },
+  maxPageLinks: { type: Number, default: 5 }, // odd number preferred
+  // Optional custom page parameter name (Laravel custom paginator key, e.g. 'client-cases-page')
+  pageParamName: { type: String, default: "page" },
+});
+
+const emit = defineEmits([
+  "update:sort",
+  "update:search",
+  "update:page",
+  "update:pageSize",
+  "row:click",
+]);
+
+const internalSearch = ref(props.search);
+watch(
+  () => props.search,
+  (v) => {
+    internalSearch.value = v ?? "";
+  }
+);
+
+let searchTimer;
+watch(internalSearch, (v) => {
+  emit("update:search", v);
+  // Debounced request, reset page to 1
+  clearTimeout(searchTimer);
+  searchTimer = setTimeout(() => doRequest({ page: 1, search: v }), 300);
+});
+
+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);
+}
+
+function toggleSort(col) {
+  if (!col?.sortable) return;
+  const { key } = col;
+  const current = props.sort || { key: null, direction: null };
+  let direction = "asc";
+  if (current.key === key) {
+    direction =
+      current.direction === "asc" ? "desc" : current.direction === "desc" ? null : "asc";
+  }
+  emit("update:sort", { key: direction ? key : null, direction });
+  doRequest({ sort: direction ? key : null, direction, page: 1 });
+}
+
+function setPage(p) {
+  emit("update:page", p);
+  doRequest({ page: p });
+}
+function setPageSize(ps) {
+  const perPage = Number(ps);
+  emit("update:pageSize", perPage);
+  doRequest({ page: 1, perPage });
+}
+
+function doRequest(overrides = {}) {
+  const q = {
+    ...props.query,
+    perPage: 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 ?? "",
+  };
+  const pageParam = props.pageParamName || "page";
+  q[pageParam] = overrides.page ?? props.meta?.current_page ?? props.page ?? 1;
+  if (pageParam !== "page") {
+    delete q.page;
+  }
+  // Clean nulls
+  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,
+  });
+}
+
+const total = computed(() => props.meta?.total ?? 0);
+const currentPage = computed(() => props.meta?.current_page ?? 1);
+const lastPage = computed(() => props.meta?.last_page ?? 1);
+const perPage = computed(() => props.meta?.per_page ?? props.pageSize ?? 10);
+
+// Ensure the page-size selector always contains the current server value
+const pageSizeOptionsResolved = computed(() => {
+  const base = Array.isArray(props.pageSizeOptions)
+    ? [...props.pageSizeOptions]
+    : [10, 25, 50];
+  const current = perPage.value;
+  if (current && !base.includes(current)) {
+    base.push(current);
+  }
+  return base.sort((a, b) => a - b);
+});
+
+const showingFrom = computed(() => {
+  if (total.value === 0) return 0;
+  return (currentPage.value - 1) * perPage.value + 1;
+});
+const showingTo = computed(() => {
+  if (total.value === 0) return 0;
+  return Math.min(currentPage.value * perPage.value, total.value);
+});
+
+const gotoInput = ref("");
+
+const visiblePages = computed(() => {
+  const pages = [];
+  const count = lastPage.value;
+  if (count <= 1) return [1];
+  const windowSize = Math.max(3, props.maxPageLinks);
+  const half = Math.floor(windowSize / 2);
+  let start = Math.max(1, currentPage.value - half);
+  let end = Math.min(count, start + windowSize - 1);
+  // Adjust start if at the end
+  start = Math.max(1, Math.min(start, end - windowSize + 1));
+  for (let p = start; p <= end; p++) pages.push(p);
+  return pages;
+});
+
+function goToPageInput() {
+  const raw = String(gotoInput.value || "").trim();
+  const n = Number(raw);
+  if (!Number.isFinite(n)) return;
+  const target = Math.max(1, Math.min(lastPage.value, Math.floor(n)));
+  if (target !== currentPage.value) setPage(target);
+  gotoInput.value = "";
+}
+</script>
+
+<template>
+  <div class="w-full">
+    <div v-if="showToolbar" class="mb-3 flex items-center justify-between gap-3">
+      <div class="flex items-center gap-2">
+        <input
+          type="text"
+          class="w-64 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+          placeholder="Iskanje..."
+          v-model="internalSearch"
+        />
+      </div>
+      <div class="flex items-center gap-2">
+        <label class="text-sm text-gray-600">Na stran</label>
+        <select
+          class="rounded border-gray-300 text-sm"
+          :value="meta?.per_page || pageSize"
+          @change="setPageSize($event.target.value)"
+        >
+          <option v-for="opt in pageSizeOptionsResolved" :key="opt" :value="opt">
+            {{ opt }}
+          </option>
+        </select>
+      </div>
+    </div>
+
+    <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 v-for="col in columns" :key="col.key" :class="col.class">
+            <button
+              v-if="col.sortable"
+              type="button"
+              class="inline-flex items-center gap-1 hover:text-indigo-600"
+              @click="toggleSort(col)"
+              :aria-sort="sort?.key === col.key ? sort.direction || 'none' : 'none'"
+            >
+              <span>{{ col.label }}</span>
+              <span v-if="sort?.key === col.key && sort.direction === 'asc'">▲</span>
+              <span v-else-if="sort?.key === col.key && sort.direction === 'desc'"
+                >▼</span
+              >
+            </button>
+            <span v-else>{{ col.label }}</span>
+          </FwbTableHeadCell>
+          <FwbTableHeadCell v-if="$slots.actions" class="w-px">&nbsp;</FwbTableHeadCell>
+        </FwbTableHead>
+
+        <FwbTableBody>
+          <template v-if="!loading && rows.length">
+            <FwbTableRow
+              v-for="(row, idx) in rows"
+              :key="keyOf(row)"
+              @click="$emit('row:click', row)"
+              class="cursor-default"
+            >
+              <FwbTableCell
+                v-for="col in columns"
+                :key="col.key"
+                :class="col.class"
+                :align="col.align || 'left'"
+              >
+                <template v-if="$slots['cell-' + col.key]">
+                  <slot
+                    :name="'cell-' + col.key"
+                    :row="row"
+                    :column="col"
+                    :value="row?.[col.key]"
+                    :index="idx"
+                  />
+                </template>
+                <template v-else-if="$slots.cell">
+                  <slot
+                    name="cell"
+                    :row="row"
+                    :column="col"
+                    :value="row?.[col.key]"
+                    :index="idx"
+                  />
+                </template>
+                <template v-else>
+                  {{ row?.[col.key] ?? "" }}
+                </template>
+              </FwbTableCell>
+              <FwbTableCell v-if="$slots.actions" class="w-px text-right">
+                <slot name="actions" :row="row" :index="idx" />
+              </FwbTableCell>
+            </FwbTableRow>
+          </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>
+          </template>
+          <template v-else>
+            <FwbTableRow>
+              <FwbTableCell :colspan="columns.length + ($slots.actions ? 1 : 0)">
+                <slot name="empty">
+                  <div class="p-6 text-center text-gray-500">{{ emptyText }}</div>
+                </slot>
+              </FwbTableCell>
+            </FwbTableRow>
+          </template>
+        </FwbTableBody>
+      </FwbTable>
+    </div>
+
+    <nav
+      class="mt-3 flex flex-wrap items-center justify-between gap-3 text-sm text-gray-700"
+      aria-label="Pagination"
+    >
+      <div v-if="showPageStats">
+        <span v-if="total > 0"
+          >Prikazano: {{ showingFrom }}–{{ showingTo }} od {{ total }}</span
+        >
+        <span v-else>Ni zadetkov</span>
+      </div>
+      <div class="flex items-center gap-1">
+        <!-- First -->
+        <button
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 disabled:opacity-50"
+          :disabled="currentPage <= 1"
+          @click="setPage(1)"
+          aria-label="Prva stran"
+        >
+          ««
+        </button>
+        <!-- Prev -->
+        <button
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 disabled:opacity-50"
+          :disabled="currentPage <= 1"
+          @click="setPage(currentPage - 1)"
+          aria-label="Prejšnja stran"
+        >
+          «
+        </button>
+
+        <!-- Leading ellipsis / first page when window doesn't include 1 -->
+        <button
+          v-if="visiblePages[0] > 1"
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50"
+          @click="setPage(1)"
+        >
+          1
+        </button>
+        <span v-if="visiblePages[0] > 2" class="px-1">…</span>
+
+        <!-- Page numbers -->
+        <button
+          v-for="p in visiblePages"
+          :key="p"
+          class="px-3 py-1 rounded border transition-colors"
+          :class="
+            p === currentPage
+              ? 'border-indigo-600 bg-indigo-600 text-white'
+              : 'border-gray-300 hover:bg-gray-50'
+          "
+          :aria-current="p === currentPage ? 'page' : undefined"
+          @click="setPage(p)"
+        >
+          {{ p }}
+        </button>
+
+        <!-- Trailing ellipsis / last page when window doesn't include last -->
+        <span v-if="visiblePages[visiblePages.length - 1] < lastPage - 1" class="px-1"
+          >…</span
+        >
+        <button
+          v-if="visiblePages[visiblePages.length - 1] < lastPage"
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50"
+          @click="setPage(lastPage)"
+        >
+          {{ lastPage }}
+        </button>
+
+        <!-- Next -->
+        <button
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 disabled:opacity-50"
+          :disabled="currentPage >= lastPage"
+          @click="setPage(currentPage + 1)"
+          aria-label="Naslednja stran"
+        >
+          »
+        </button>
+        <!-- Last -->
+        <button
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 disabled:opacity-50"
+          :disabled="currentPage >= lastPage"
+          @click="setPage(lastPage)"
+          aria-label="Zadnja stran"
+        >
+          »»
+        </button>
+
+        <!-- Goto page -->
+        <div v-if="showGoto" class="ms-2 flex items-center gap-1">
+          <input
+            v-model="gotoInput"
+            type="number"
+            min="1"
+            :max="lastPage"
+            inputmode="numeric"
+            class="w-16 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+            :placeholder="String(currentPage)"
+            aria-label="Pojdi na stran"
+            @keyup.enter="goToPageInput"
+            @blur="goToPageInput"
+          />
+          <span class="text-gray-500">/ {{ lastPage }}</span>
+        </div>
+      </div>
+    </nav>
+  </div>
+</template>
--- a/resources/js/Layouts/Partials/NotificationsBell.vue
+++ b/resources/js/Layouts/Partials/NotificationsBell.vue
@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { usePage, Link } from "@inertiajs/vue3";
 import Dropdown from "@/Components/Dropdown.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@ -10,6 +10,10 @@ const due = computed(
  () => page.props.notifications?.dueToday || { count: 0, items: [], date: null }
 );

+// Local, optimistically-updated list of items and derived count
+const items = ref([]);
+const count = computed(() => items.value.length);
+
 function fmtDate(d) {
  if (!d) return "";
  try {
@ -37,16 +41,43 @@ function fmtEUR(value) {
  // Replace non-breaking space with normal space for consistency
  return formatted.replace("\u00A0", " ");
 }
+
 onMounted(() => {
-  console.log(due.value);
+  items.value = [...(due.value.items || [])];
 });
+
+watch(
+  () => due.value.items,
+  (val) => {
+    items.value = [...(val || [])];
+  }
+);
+
+async function markRead(item) {
+  const idx = items.value.findIndex((i) => i.id === item.id);
+  if (idx === -1) {
+    return;
+  }
+
+  // Optimistically remove
+  const removed = items.value.splice(idx, 1)[0];
+
+  try {
+    await window.axios.post(route("notifications.activity.read"), {
+      activity_id: item.id,
+    });
+  } catch (e) {
+    // Rollback on failure
+    items.value.splice(idx, 0, removed);
+  }
+}
 </script>

 <template>
  <Dropdown
    align="right"
    width="72"
-    :content-classes="['py-1', 'bg-white', 'max-h-96', 'overflow-auto']"
+    :content-classes="['p-0', 'bg-white', 'max-h-96', 'overflow-hidden']"
  >
    <template #trigger>
      <button
@ -56,48 +87,76 @@ onMounted(() => {
      >
        <FontAwesomeIcon :icon="faBell" class="w-5 h-5" />
        <span
-          v-if="due.count"
+          v-if="count"
          class="absolute -top-1 -right-1 inline-flex items-center justify-center h-5 min-w-[1.25rem] px-1 rounded-full text-[11px] bg-red-600 text-white"
-          >{{ due.count }}</span
+          >{{ count }}</span
        >
      </button>
    </template>

    <template #content>
-      <div class="px-3 py-2 text-xs text-gray-400 border-b">Obljube zapadejo jutri</div>
+      <div class="px-3 py-2 text-xs text-gray-400 border-b sticky top-0 bg-white z-10 flex items-center justify-between">
+        <span>Zapadejo danes</span>
+        <Link :href="route('notifications.unread')" class="text-indigo-600 hover:text-indigo-700">Vsa obvestila</Link>
+      </div>
      <!-- Scrollable content area with max height -->
-      <div class="max-h-96 overflow-y-auto">
-        <div v-if="!due.count" class="px-3 py-3 text-sm text-gray-500">
+      <div class="max-h-80 overflow-auto">
+        <div v-if="!count" class="px-3 py-3 text-sm text-gray-500">
          Ni zapadlih aktivnosti danes.
        </div>
        <ul v-else class="divide-y">
          <li
-            v-for="item in due.items"
+            v-for="item in items"
            :key="item.id"
            class="px-3 py-2 text-sm flex items-start gap-2"
          >
            <div class="flex-1 min-w-0">
              <div class="font-medium text-gray-800 truncate">
-                Pogodba:
-                <Link
-                  v-if="item.contract?.client_case?.uuid"
-                  :href="
-                    route('clientCase.show', {
-                      client_case: item.contract.client_case.uuid,
-                    })
-                  "
-                  class="text-indigo-600 hover:text-indigo-700 hover:underline"
-                >
-                  {{ item.contract?.reference || "—" }}
-                </Link>
-                <span v-else>{{ item.contract?.reference || "—" }}</span>
+                <template v-if="item.contract?.uuid">
+                  Pogodba:
+                  <Link
+                    v-if="item.contract?.client_case?.uuid"
+                    :href="
+                      route('clientCase.show', {
+                        client_case: item.contract.client_case.uuid,
+                      })
+                    "
+                    class="text-indigo-600 hover:text-indigo-700 hover:underline"
+                  >
+                    {{ item.contract?.reference || "—" }}
+                  </Link>
+                  <span v-else>{{ item.contract?.reference || "—" }}</span>
+                </template>
+                <template v-else>
+                  Primer:
+                  <Link
+                    v-if="item.client_case?.uuid"
+                    :href="
+                      route('clientCase.show', { client_case: item.client_case.uuid })
+                    "
+                    class="text-indigo-600 hover:text-indigo-700 hover:underline"
+                  >
+                    {{ item.client_case?.person?.full_name || "—" }}
+                  </Link>
+                  <span v-else>{{ item.client_case?.person?.full_name || "—" }}</span>
+                </template>
              </div>
-              <div class="text-gray-600 truncate">
+              <div class="text-gray-600 truncate" v-if="item.contract">
                {{ fmtEUR(item.contract?.account?.balance_amount) }}
              </div>
            </div>
-            <div class="text-xs text-gray-500 whitespace-nowrap">
-              {{ fmtDate(item.due_date) }}
+            <div class="flex flex-col items-end gap-1">
+              <div class="text-xs text-gray-500 whitespace-nowrap">
+                {{ fmtDate(item.due_date) }}
+              </div>
+              <button
+                type="button"
+                class="text-[11px] text-gray-400 hover:text-gray-600"
+                @click.stop="markRead(item)"
+                title="Skrij obvestilo"
+              >
+                Skrij
+              </button>
            </div>
          </li>
        </ul>
--- a/resources/js/Pages/Cases/Index.vue
+++ b/resources/js/Pages/Cases/Index.vue
@ -1,38 +1,17 @@
 <script setup>
 import AppLayout from "@/Layouts/AppLayout.vue";
-import Pagination from "@/Components/Pagination.vue";
 import SectionTitle from "@/Components/SectionTitle.vue";
 import { Link, router } from "@inertiajs/vue3";
-import { debounce } from "lodash";
-import { ref, watch, onUnmounted } from "vue";
+import { ref } from "vue";
+import DataTableServer from "@/Components/DataTable/DataTableServer.vue";

 const props = defineProps({
  client_cases: Object,
  filters: Object,
 });

-// Search state (initialize from server-provided filters)
+// Initial search for DataTable toolbar
 const search = ref(props.filters?.search || "");
-const applySearch = debounce((term) => {
-  const params = Object.fromEntries(
-    new URLSearchParams(window.location.search).entries()
-  );
-  if (term) {
-    params.search = term;
-  } else {
-    delete params.search;
-  }
-  // Reset paginator key used by backend: 'client-cases-page'
-  delete params["client-cases-page"];
-  delete params.page;
-  router.get(route("clientCase"), params, {
-    preserveState: true,
-    replace: true,
-    preserveScroll: true,
-  });
-}, 300);
-watch(search, (v) => applySearch(v));
-onUnmounted(() => applySearch.cancel && applySearch.cancel());

 // Format helpers
 const fmtCurrency = (v) => {
@ -53,79 +32,85 @@ const fmtCurrency = (v) => {
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="px-3 bg-white overflow-hidden shadow-xl sm:rounded-lg">
          <div class="mx-auto max-w-4x1 py-3">
-            <div class="flex items-center justify-between gap-3 pb-3">
+            <div class="pb-3">
              <SectionTitle>
                <template #title>Primeri</template>
              </SectionTitle>
-              <input
-                v-model="search"
-                type="text"
-                placeholder="Iskanje po imenu"
-                class="w-full sm:w-80 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
-              />
-            </div>
-            <div class="overflow-x-auto">
-              <table class="min-w-full text-left text-sm">
-                <thead>
-                  <tr class="border-b">
-                    <th class="py-2 pr-4">Št.</th>
-                    <th class="py-2 pr-4">Primer</th>
-                    <th class="py-2 pr-4">Stranka</th>
-                    <th class="py-2 pr-4">Davčna</th>
-                    <th class="py-2 pr-4 text-right">Aktivne pogodbe</th>
-                    <th class="py-2 pr-4 text-right">Skupaj stanje</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr
-                    v-for="c in client_cases.data"
-                    :key="c.uuid"
-                    class="border-b last:border-0"
-                  >
-                    <td class="py-2 pr-4">{{ c.person?.nu || "-" }}</td>
-                    <td class="py-2 pr-4">
-                      <Link
-                        :href="route('clientCase.show', { client_case: c.uuid })"
-                        class="text-indigo-600 hover:underline"
-                      >
-                        {{ c.person?.full_name || "-" }}
-                      </Link>
-                      <button
-                        v-if="!c.person"
-                        @click.prevent="
-                          router.post(
-                            route('clientCase.emergencyPerson', { client_case: c.uuid })
-                          )
-                        "
-                        class="ml-2 inline-flex items-center rounded bg-red-50 px-2 py-0.5 text-xs font-semibold text-red-600 hover:bg-red-100 border border-red-200"
-                        title="Emergency: recreate missing person"
-                      >
-                        Add Person
-                      </button>
-                    </td>
-                    <td class="py-2 pr-4">{{ c.client?.person?.full_name || "-" }}</td>
-
-                    <td class="py-2 pr-4">{{ c.person?.tax_number || "-" }}</td>
-                    <td class="py-2 pr-4 text-right">
-                      {{ c.active_contracts_count ?? 0 }}
-                    </td>
-                    <td class="py-2 pr-4 text-right">
-                      {{ fmtCurrency(c.active_contracts_balance_sum) }}
-                    </td>
-                  </tr>
-                  <tr v-if="!client_cases.data || client_cases.data.length === 0">
-                    <td colspan="6" class="py-4 text-gray-500">Ni zadetkov.</td>
-                  </tr>
-                </tbody>
-              </table>
            </div>
+            <DataTableServer
+              :columns="[
+                { key: 'nu', label: 'Št.', sortable: false, class: 'w-40' },
+                { key: 'case', label: 'Primer', sortable: false },
+                { key: 'client', label: 'Stranka', sortable: false },
+                { key: 'tax', label: 'Davčna', sortable: false },
+                {
+                  key: 'active_contracts',
+                  label: 'Aktivne pogodbe',
+                  sortable: false,
+                  align: 'right',
+                },
+                {
+                  key: 'balance',
+                  label: 'Skupaj stanje',
+                  sortable: false,
+                  align: 'right',
+                },
+              ]"
+              :rows="client_cases.data || []"
+              :meta="{
+                current_page: client_cases.current_page,
+                per_page: client_cases.per_page,
+                total: client_cases.total,
+                last_page: client_cases.last_page,
+              }"
+              :search="search"
+              route-name="clientCase"
+              page-param-name="client-cases-page"
+              :only-props="['client_cases']"
+            >
+              <template #cell-nu="{ row }">
+                {{ row.person?.nu || "-" }}
+              </template>
+              <template #cell-case="{ row }">
+                <Link
+                  :href="route('clientCase.show', { client_case: row.uuid })"
+                  class="text-indigo-600 hover:underline"
+                >
+                  {{ row.person?.full_name || "-" }}
+                </Link>
+                <button
+                  v-if="!row.person"
+                  @click.prevent="
+                    router.post(
+                      route('clientCase.emergencyPerson', { client_case: row.uuid })
+                    )
+                  "
+                  class="ml-2 inline-flex items-center rounded bg-red-50 px-2 py-0.5 text-xs font-semibold text-red-600 hover:bg-red-100 border border-red-200"
+                  title="Emergency: recreate missing person"
+                >
+                  Add Person
+                </button>
+              </template>
+              <template #cell-client="{ row }">
+                {{ row.client?.person?.full_name || "-" }}
+              </template>
+              <template #cell-tax="{ row }">
+                {{ row.person?.tax_number || "-" }}
+              </template>
+              <template #cell-active_contracts="{ row }">
+                <div class="text-right">{{ row.active_contracts_count ?? 0 }}</div>
+              </template>
+              <template #cell-balance="{ row }">
+                <div class="text-right">
+                  {{ fmtCurrency(row.active_contracts_balance_sum) }}
+                </div>
+              </template>
+              <template #empty>
+                <div class="p-6 text-center text-gray-500">Ni zadetkov.</div>
+              </template>
+            </DataTableServer>
          </div>
-          <Pagination
-            :links="client_cases.links"
-            :from="client_cases.from"
-            :to="client_cases.to"
-            :total="client_cases.total"
-          />
+          <!-- Pagination handled by DataTableServer -->
        </div>
      </div>
    </div>
--- a/resources/js/Pages/Cases/Partials/ActivityTable.vue
+++ b/resources/js/Pages/Cases/Partials/ActivityTable.vue
@ -1,6 +1,6 @@
 <script setup>
 import { ref } from "vue";
-import { router } from "@inertiajs/vue3";
+import { Link, router } from "@inertiajs/vue3";
 import Dropdown from "@/Components/Dropdown.vue";
 import ConfirmationModal from "@/Components/ConfirmationModal.vue";
 import SecondaryButton from "@/Components/SecondaryButton.vue";
@ -107,7 +107,19 @@ const confirmDeleteAction = () => {
            :key="row.id"
            class="border-b last:border-b-0"
          >
-            <td class="py-2 pr-4 align-top">{{ row.contract?.reference || "" }}</td>
+            <td class="py-2 pr-4 align-top">
+              <template v-if="row.contract?.reference">
+                {{ row.contract.reference }}
+              </template>
+              <template v-else>
+                <Link
+                  :href="route('clientCase.show', { client_case: client_case.uuid })"
+                  class="text-indigo-600 hover:underline"
+                >
+                  {{ client_case?.person?.full_name || "—" }}
+                </Link>
+              </template>
+            </td>
            <td class="py-2 pr-4 align-top">
              <div class="flex flex-col gap-1">
                <span
--- a/resources/js/Pages/Cases/Show.vue
+++ b/resources/js/Pages/Cases/Show.vue
@ -258,7 +258,6 @@ const submitAttachSegment = () => {
              :types="types"
              tab-color="red-600"
              :person="client_case.person"
-              
            />
          </div>
        </div>
--- a/resources/js/Pages/Client/Contracts.vue
+++ b/resources/js/Pages/Client/Contracts.vue
@ -2,7 +2,7 @@
 import AppLayout from "@/Layouts/AppLayout.vue";
 import { ref } from "vue";
 import { Link, router } from "@inertiajs/vue3";
-import Pagination from "@/Components/Pagination.vue";
+import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
 import PersonInfoGrid from "@/Components/PersonInfoGrid.vue";
 import SectionTitle from "@/Components/SectionTitle.vue";

@ -43,33 +43,14 @@ function applyDateFilter() {
  });
 }

-function applySearch() {
-  const params = Object.fromEntries(
-    new URLSearchParams(window.location.search).entries()
-  );
-  if (fromDate.value) {
-    params.from = fromDate.value;
-  } else {
-    delete params.from;
-  }
-  if (toDate.value) {
-    params.to = toDate.value;
-  } else {
-    delete params.to;
-  }
-  if (search.value && search.value.trim() !== "") {
-    params.search = search.value.trim();
-  } else {
-    delete params.search;
-  }
-  delete params.page;
-  router.get(route("client.contracts", { uuid: props.client.uuid }), params, {
-    preserveState: true,
-    replace: true,
-    preserveScroll: true,
-  });
+function clearDateFilter() {
+  fromDate.value = "";
+  toDate.value = "";
+  applyDateFilter();
 }

+// Search handled by DataTableServer toolbar; keep date filter applying
+
 // Build params for navigating to client case show, including active segment if available
 function caseShowParams(contract) {
  const params = { client_case: contract?.client_case?.uuid };
@ -112,19 +93,36 @@ function formatDate(value) {
                </template>
              </SectionTitle>
            </div>
-            <div class="mt-2 flex items-center gap-3 text-sm">
-              <Link
-                :href="route('client.show', { uuid: client.uuid })"
-                class="px-2 py-1 rounded hover:underline"
-                >Primeri</Link
-              >
-              <span class="text-gray-300">|</span>
-              <Link
-                :href="route('client.contracts', { uuid: client.uuid })"
-                class="px-2 py-1 rounded text-indigo-600 hover:underline"
-                >Pogodbe</Link
-              >
-            </div>
+            <nav class="mt-2 border-b border-gray-200">
+              <ul class="flex gap-6 -mb-px">
+                <li>
+                  <Link
+                    :href="route('client.show', { uuid: client.uuid })"
+                    :class="[
+                      'inline-flex items-center px-3 py-2 text-sm font-medium border-b-2',
+                      route().current('client.show')
+                        ? 'text-indigo-600 border-indigo-600'
+                        : 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300'
+                    ]"
+                  >
+                    Primeri
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    :href="route('client.contracts', { uuid: client.uuid })"
+                    :class="[
+                      'inline-flex items-center px-3 py-2 text-sm font-medium border-b-2',
+                      route().current('client.contracts')
+                        ? 'text-indigo-600 border-indigo-600'
+                        : 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300'
+                    ]"
+                  >
+                    Pogodbe
+                  </Link>
+                </li>
+              </ul>
+            </nav>
          </div>
        </div>
      </div>
@ -171,78 +169,61 @@ function formatDate(value) {
                    class="rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
                  />
                </div>
-              </div>
-              <div class="flex items-center gap-2">
-                <input
-                  type="text"
-                  v-model="search"
-                  @keyup.enter="applySearch"
-                  placeholder="Išči po referenci ali imenu"
-                  class="rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm w-64"
-                />
                <button
                  type="button"
-                  @click="applySearch"
-                  class="inline-flex items-center px-3 py-2 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded"
+                  class="inline-flex items-center px-3 py-2 text-sm font-medium rounded border border-gray-300 text-gray-700 hover:bg-gray-50 disabled:opacity-50"
+                  :disabled="!fromDate && !toDate"
+                  @click="clearDateFilter"
+                  title="Počisti datum"
                >
-                  Išči
+                  Počisti
                </button>
              </div>
+              <!-- Search lives in DataTable toolbar -->
            </div>
-            <div class="overflow-x-auto mt-3">
-              <table class="min-w-full text-left text-sm">
-                <thead>
-                  <tr class="border-b">
-                    <th class="py-2 pr-4">Referenca</th>
-                    <th class="py-2 pr-4">Stranka</th>
-                    <th class="py-2 pr-4">Začetek</th>
-                    <th class="py-2 pr-4">Segment</th>
-                    <th class="py-2 pr-4 text-right">Stanje</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr
-                    v-for="contract in contracts.data"
-                    :key="contract.uuid"
-                    class="border-b last:border-0"
-                  >
-                    <td class="py-2 pr-4">
-                      <Link
-                        :href="route('clientCase.show', caseShowParams(contract))"
-                        class="text-indigo-600 hover:underline"
-                      >
-                        {{ contract.reference }}
-                      </Link>
-                    </td>
-                    <td class="py-2 pr-4">
-                      {{ contract.client_case?.person?.full_name || "-" }}
-                    </td>
-                    <td class="py-2 pr-4">
-                      {{ formatDate(contract.start_date) }}
-                    </td>
-                    <td class="py-2 pr-4">{{ contract.segments?.[0]?.name || "-" }}</td>
-                    <td class="py-2 pr-4 text-right">
-                      {{
-                        new Intl.NumberFormat("sl-SI", {
-                          style: "currency",
-                          currency: "EUR",
-                        }).format(Number(contract.account?.balance_amount ?? 0))
-                      }}
-                    </td>
-                  </tr>
-                  <tr v-if="!contracts.data || contracts.data.length === 0">
-                    <td colspan="5" class="py-4 text-gray-500">Ni zadetkov.</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
+            <DataTableServer
+              class="mt-3"
+              :columns="[
+                { key: 'reference', label: 'Referenca', sortable: false },
+                { key: 'customer', label: 'Stranka', sortable: false },
+                { key: 'start', label: 'Začetek', sortable: false },
+                { key: 'segment', label: 'Segment', sortable: false },
+                { key: 'balance', label: 'Stanje', sortable: false, align: 'right' },
+              ]"
+              :rows="contracts.data || []"
+              :meta="{ current_page: contracts.current_page, per_page: contracts.per_page, total: contracts.total, last_page: contracts.last_page }"
+              route-name="client.contracts"
+              :route-params="{ uuid: client.uuid }"
+              :query="{ from: fromDate || undefined, to: toDate || undefined }"
+              :search="search"
+              row-key="uuid"
+              :only-props="['contracts']"
+            >
+              <template #cell-reference="{ row }">
+                <Link :href="route('clientCase.show', caseShowParams(row))" class="text-indigo-600 hover:underline">
+                  {{ row.reference }}
+                </Link>
+              </template>
+              <template #cell-customer="{ row }">
+                {{ row.client_case?.person?.full_name || '-' }}
+              </template>
+              <template #cell-start="{ row }">
+                {{ formatDate(row.start_date) }}
+              </template>
+              <template #cell-segment="{ row }">
+                {{ row.segments?.[0]?.name || '-' }}
+              </template>
+              <template #cell-balance="{ row }">
+                <div class="text-right">
+                  {{ new Intl.NumberFormat('sl-SI', { style: 'currency', currency: 'EUR' }).format(Number(row.account?.balance_amount ?? 0)) }}
+                </div>
+              </template>
+              <template #empty>
+                <div class="p-6 text-center text-gray-500">Ni zadetkov.</div>
+              </template>
+            </DataTableServer>
          </div>
-          <Pagination
-            :links="contracts.links"
-            :from="contracts.from"
-            :to="contracts.to"
-            :total="contracts.total"
-          />
+          <!-- Pagination handled by DataTableServer -->
        </div>
      </div>
    </div>
--- a/resources/js/Pages/Client/Index.vue
+++ b/resources/js/Pages/Client/Index.vue
@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from "vue";
+import { ref } from "vue";
 import AppLayout from "@/Layouts/AppLayout.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import InputLabel from "@/Components/InputLabel.vue";
@ -7,8 +7,7 @@ import TextInput from "@/Components/TextInput.vue";
 import { Link, useForm, router } from "@inertiajs/vue3";
 import ActionMessage from "@/Components/ActionMessage.vue";
 import DialogModal from "@/Components/DialogModal.vue";
-import Pagination from "@/Components/Pagination.vue";
-import { debounce } from "lodash";
+import DataTableServer from "@/Components/DataTable/DataTableServer.vue";

 const props = defineProps({
  clients: Object,
@ -41,25 +40,8 @@ const formClient = useForm({
 //Create client drawer
 const drawerCreateClient = ref(false);

-// Search state (table-friendly, SPA)
-const search = ref(props.filters?.search || "");
-const applySearch = debounce((term) => {
-  const params = Object.fromEntries(
-    new URLSearchParams(window.location.search).entries()
-  );
-  if (term) {
-    params.search = term;
-  } else {
-    delete params.search;
-  }
-  delete params.page; // reset pagination
-  router.get(route("client"), params, {
-    preserveState: true,
-    replace: true,
-    preserveScroll: true,
-  });
-}, 300);
-watch(search, (v) => applySearch(v));
+// Initial search (passed to DataTable toolbar)
+const initialSearch = ref(props.filters?.search || "");

 //Open drawer create client
 const openDrawerCreateClient = () => {
@ -105,74 +87,86 @@ const fmtCurrency = (v) => {
    <div class="py-12">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="px-3 bg-white overflow-hidden shadow-xl sm:rounded-lg">
-          <div class="mx-auto max-w-4x1 py-3">
+          <div class="mx-auto max-w-4x1 py-3 space-y-3">
+            <!-- Top actions -->
            <div class="flex items-center justify-between gap-3">
-              <PrimaryButton @click="openDrawerCreateClient" class="bg-blue-400"
+              <PrimaryButton
+                @click="openDrawerCreateClient"
+                class="bg-blue-600 hover:bg-blue-700"
                >Dodaj</PrimaryButton
              >
-              <input
-                v-model="search"
-                type="text"
-                placeholder="Iskanje po imenu"
-                class="w-full sm:w-80 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
-              />
            </div>
-            <div class="overflow-x-auto mt-3">
-              <table class="min-w-full text-left text-sm">
-                <thead>
-                  <tr class="border-b">
-                    <th class="py-2 pr-4">Št.</th>
-                    <th class="py-2 pr-4">Naročnik</th>
-                    <th class="py-2 pr-4 text-right">Primeri z aktivnimi pogodbami</th>
-                    <th class="py-2 pr-4 text-right">Skupaj stanje</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr
-                    v-for="client in clients.data"
-                    :key="client.uuid"
-                    class="border-b last:border-0"
+
+            <!-- DataTable (server-side) -->
+            <DataTableServer
+              :columns="[
+                { key: 'nu', label: 'Št.', sortable: false, class: 'w-40' },
+                { key: 'name', label: 'Naročnik', sortable: false },
+                {
+                  key: 'cases',
+                  label: 'Primeri z aktivnimi pogodbami',
+                  sortable: false,
+                  align: 'right',
+                },
+                {
+                  key: 'balance',
+                  label: 'Skupaj stanje',
+                  sortable: false,
+                  align: 'right',
+                },
+              ]"
+              :rows="clients.data || []"
+              :meta="{
+                current_page: clients.current_page,
+                per_page: clients.per_page,
+                total: clients.total,
+                last_page: clients.last_page,
+              }"
+              :sort="{
+                key: props.filters?.sort || null,
+                direction: props.filters?.direction || null,
+              }"
+              :search="initialSearch"
+              route-name="client"
+              row-key="uuid"
+              :page-size-options="[clients.per_page]"
+              :only-props="['clients']"
+            >
+              <template #cell-nu="{ row }">
+                {{ row.person?.nu || "-" }}
+              </template>
+              <template #cell-name="{ row }">
+                <Link
+                  :href="route('client.show', { uuid: row.uuid })"
+                  class="text-indigo-600 hover:underline"
+                >
+                  {{ row.person?.full_name || "-" }}
+                </Link>
+                <div v-if="!row.person" class="mt-1">
+                  <PrimaryButton
+                    class="!py-0.5 !px-2 bg-red-500 hover:bg-red-600 text-xs"
+                    @click.prevent="
+                      router.post(route('client.emergencyPerson', { uuid: row.uuid }))
+                    "
+                    >Add Person</PrimaryButton
                  >
-                    <td class="py-2 pr-4">{{ client.person?.nu || "-" }}</td>
-                    <td class="py-2 pr-4">
-                      <Link
-                        :href="route('client.show', { uuid: client.uuid })"
-                        class="text-indigo-600 hover:underline"
-                      >
-                        {{ client.person?.full_name || "-" }}
-                      </Link>
-                      <div v-if="!client.person" class="mt-1">
-                        <PrimaryButton
-                          class="!py-0.5 !px-2 bg-red-500 hover:bg-red-600 text-xs"
-                          @click.prevent="
-                            router.post(
-                              route('client.emergencyPerson', { uuid: client.uuid })
-                            )
-                          "
-                          >Add Person</PrimaryButton
-                        >
-                      </div>
-                    </td>
-                    <td class="py-2 pr-4 text-right">
-                      {{ client.cases_with_active_contracts_count ?? 0 }}
-                    </td>
-                    <td class="py-2 pr-4 text-right">
-                      {{ fmtCurrency(client.active_contracts_balance_sum) }}
-                    </td>
-                  </tr>
-                  <tr v-if="!clients.data || clients.data.length === 0">
-                    <td colspan="4" class="py-4 text-gray-500">Ni zadetkov.</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
+                </div>
+              </template>
+              <template #cell-cases="{ row }">
+                <div class="text-right">
+                  {{ row.cases_with_active_contracts_count ?? 0 }}
+                </div>
+              </template>
+              <template #cell-balance="{ row }">
+                <div class="text-right">
+                  {{ fmtCurrency(row.active_contracts_balance_sum) }}
+                </div>
+              </template>
+              <template #empty>
+                <div class="p-6 text-center text-gray-500">Ni zadetkov.</div>
+              </template>
+            </DataTableServer>
          </div>
-          <Pagination
-            :links="clients.links"
-            :from="clients.from"
-            :to="clients.to"
-            :total="clients.total"
-          />
        </div>
      </div>
    </div>
--- a/resources/js/Pages/Client/Show.vue
+++ b/resources/js/Pages/Client/Show.vue
@ -1,13 +1,12 @@
 <script setup>
 import AppLayout from "@/Layouts/AppLayout.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
-import { ref, watch } from "vue";
-import { Link, router } from "@inertiajs/vue3";
+import { ref } from "vue";
+import { Link } from "@inertiajs/vue3";
 import SectionTitle from "@/Components/SectionTitle.vue";
 import PersonInfoGrid from "@/Components/PersonInfoGrid.vue";
-import Pagination from "@/Components/Pagination.vue";
 import FormCreateCase from "./Partials/FormCreateCase.vue";
-import { debounce } from "lodash";
+import DataTableServer from "@/Components/DataTable/DataTableServer.vue";

 const props = defineProps({
  client: Object,
@ -17,25 +16,9 @@ const props = defineProps({
  types: Object,
 });

-// Table-friendly search for client cases
+// Removed page-level search; DataTable or server can handle filtering elsewhere if needed
+// DataTable search state
 const search = ref(props.filters?.search || "");
-const applySearch = debounce((term) => {
-  const params = Object.fromEntries(
-    new URLSearchParams(window.location.search).entries()
-  );
-  if (term) {
-    params.search = term;
-  } else {
-    delete params.search;
-  }
-  delete params.page;
-  router.get(route("client.show", { uuid: props.client.uuid }), params, {
-    preserveState: true,
-    replace: true,
-    preserveScroll: true,
-  });
-}, 300);
-watch(search, (v) => applySearch(v));

 const drawerCreateCase = ref(false);

@ -60,19 +43,36 @@ const openDrawerCreateCase = () => {
                </template>
              </SectionTitle>
            </div>
-            <div class="mt-2 flex items-center gap-3 text-sm">
-              <Link
-                :href="route('client.show', { uuid: client.uuid })"
-                class="px-2 py-1 rounded hover:underline"
-                >Primeri</Link
-              >
-              <span class="text-gray-300">|</span>
-              <Link
-                :href="route('client.contracts', { uuid: client.uuid })"
-                class="px-2 py-1 rounded text-indigo-600 hover:underline"
-                >Pogodbe</Link
-              >
-            </div>
+            <nav class="mt-2 border-b border-gray-200">
+              <ul class="flex gap-6 -mb-px">
+                <li>
+                  <Link
+                    :href="route('client.show', { uuid: client.uuid })"
+                    :class="[
+                      'inline-flex items-center px-3 py-2 text-sm font-medium border-b-2',
+                      route().current('client.show')
+                        ? 'text-indigo-600 border-indigo-600'
+                        : 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300'
+                    ]"
+                  >
+                    Primeri
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    :href="route('client.contracts', { uuid: client.uuid })"
+                    :class="[
+                      'inline-flex items-center px-3 py-2 text-sm font-medium border-b-2',
+                      route().current('client.contracts')
+                        ? 'text-indigo-600 border-indigo-600'
+                        : 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300'
+                    ]"
+                  >
+                    Pogodbe
+                  </Link>
+                </li>
+              </ul>
+            </nav>
          </div>
        </div>
      </div>
@ -97,65 +97,72 @@ const openDrawerCreateCase = () => {
              <PrimaryButton @click="openDrawerCreateCase" class="bg-blue-400"
                >Dodaj</PrimaryButton
              >
-              <input
-                v-model="search"
-                type="text"
-                placeholder="Iskanje po imenu"
-                class="w-full sm:w-80 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
-              />
-            </div>
-            <div class="overflow-x-auto mt-3">
-              <table class="min-w-full text-left text-sm">
-                <thead>
-                  <tr class="border-b">
-                    <th class="py-2 pr-4">Št.</th>
-                    <th class="py-2 pr-4">Primer</th>
-                    <th class="py-2 pr-4">Davčna</th>
-                    <th class="py-2 pr-4 text-right">Aktivne pogodbe</th>
-                    <th class="py-2 pr-4 text-right">Skupaj stanje</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr
-                    v-for="c in client_cases.data"
-                    :key="c.uuid"
-                    class="border-b last:border-0"
-                  >
-                    <td class="py-2 pr-4">{{ c.person?.nu || "-" }}</td>
-                    <td class="py-2 pr-4">
-                      <Link
-                        :href="route('clientCase.show', { client_case: c.uuid })"
-                        class="text-indigo-600 hover:underline"
-                      >
-                        {{ c.person?.full_name || "-" }}
-                      </Link>
-                    </td>
-                    <td class="py-2 pr-4">{{ c.person?.tax_number || "-" }}</td>
-                    <td class="py-2 pr-4 text-right">
-                      {{ c.active_contracts_count ?? 0 }}
-                    </td>
-                    <td class="py-2 pr-4 text-right">
-                      {{
-                        new Intl.NumberFormat("sl-SI", {
-                          style: "currency",
-                          currency: "EUR",
-                        }).format(Number(c.active_contracts_balance_sum ?? 0))
-                      }}
-                    </td>
-                  </tr>
-                  <tr v-if="!client_cases.data || client_cases.data.length === 0">
-                    <td colspan="5" class="py-4 text-gray-500">Ni zadetkov.</td>
-                  </tr>
-                </tbody>
-              </table>
            </div>
+            <DataTableServer
+              class="mt-3"
+              :columns="[
+                { key: 'nu', label: 'Št.', sortable: false, class: 'w-40' },
+                { key: 'case', label: 'Primer', sortable: false },
+                { key: 'tax', label: 'Davčna', sortable: false },
+                {
+                  key: 'active_contracts',
+                  label: 'Aktivne pogodbe',
+                  sortable: false,
+                  align: 'right',
+                },
+                {
+                  key: 'balance',
+                  label: 'Skupaj stanje',
+                  sortable: false,
+                  align: 'right',
+                },
+              ]"
+              :rows="client_cases.data || []"
+              :meta="{
+                current_page: client_cases.current_page,
+                per_page: client_cases.per_page,
+                total: client_cases.total,
+                last_page: client_cases.last_page,
+              }"
+              route-name="client.show"
+              :route-params="{ uuid: client.uuid }"
+              row-key="uuid"
+              :search="search"
+              :only-props="['client_cases']"
+            >
+              <template #cell-nu="{ row }">
+                {{ row.person?.nu || "-" }}
+              </template>
+              <template #cell-case="{ row }">
+                <Link
+                  :href="route('clientCase.show', { client_case: row.uuid })"
+                  class="text-indigo-600 hover:underline"
+                >
+                  {{ row.person?.full_name || "-" }}
+                </Link>
+              </template>
+              <template #cell-tax="{ row }">
+                {{ row.person?.tax_number || "-" }}
+              </template>
+              <template #cell-active_contracts="{ row }">
+                <div class="text-right">{{ row.active_contracts_count ?? 0 }}</div>
+              </template>
+              <template #cell-balance="{ row }">
+                <div class="text-right">
+                  {{
+                    new Intl.NumberFormat("sl-SI", {
+                      style: "currency",
+                      currency: "EUR",
+                    }).format(Number(row.active_contracts_balance_sum ?? 0))
+                  }}
+                </div>
+              </template>
+              <template #empty>
+                <div class="p-6 text-center text-gray-500">Ni zadetkov.</div>
+              </template>
+            </DataTableServer>
          </div>
-          <Pagination
-            :links="client_cases.links"
-            :from="client_cases.from"
-            :to="client_cases.to"
-            :total="client_cases.total"
-          />
+          <!-- Pagination handled by DataTableServer -->
        </div>
      </div>
    </div>
--- a/resources/js/Pages/Imports/Import.vue
+++ b/resources/js/Pages/Imports/Import.vue
@ -82,6 +82,74 @@ const previewColumns = ref([]);
 const previewTruncated = ref(false);
 const previewLimit = ref(200);

+// Import options (persisted on Import): show_missing and reactivate
+const showMissingEnabled = ref(Boolean(props.import?.show_missing ?? false));
+const reactivateEnabled = ref(Boolean(props.import?.reactivate ?? false));
+
+async function saveImportOptions() {
+  if (!importId.value) return;
+  try {
+    await axios.post(
+      route("imports.options", { import: importId.value }),
+      {
+        show_missing: !!showMissingEnabled.value,
+        // keep existing reactivate value if UI doesn't expose it here
+        reactivate: !!reactivateEnabled.value,
+      },
+      { headers: { Accept: "application/json" }, withCredentials: true }
+    );
+  } catch (e) {
+    console.error(
+      "Save import options failed",
+      e.response?.status || "",
+      e.response?.data || e
+    );
+  }
+}
+
+// Missing contracts (post-finish) UI state
+const showMissingContracts = ref(false);
+const missingContractsLoading = ref(false);
+const missingContracts = ref([]);
+const contractRefIsKeyref = computed(() => {
+  return (persistedMappings.value || []).some((m) => {
+    const tf = String(m?.target_field || "")
+      .toLowerCase()
+      .trim();
+    const am = String(m?.apply_mode || "")
+      .toLowerCase()
+      .trim();
+    return ["contract.reference", "contracts.reference"].includes(tf) && am === "keyref";
+  });
+});
+const canShowMissingButton = computed(() => {
+  return contractRefIsKeyref.value && !!showMissingEnabled.value;
+});
+async function openMissingContracts() {
+  if (!importId.value || !contractRefIsKeyref.value) return;
+  showMissingContracts.value = true;
+  missingContractsLoading.value = true;
+  try {
+    const { data } = await axios.get(
+      route("imports.missing-contracts", { import: importId.value }),
+      {
+        headers: { Accept: "application/json" },
+        withCredentials: true,
+      }
+    );
+    missingContracts.value = Array.isArray(data?.missing) ? data.missing : [];
+  } catch (e) {
+    console.error(
+      "Missing contracts fetch failed",
+      e.response?.status || "",
+      e.response?.data || e
+    );
+    missingContracts.value = [];
+  } finally {
+    missingContractsLoading.value = false;
+  }
+}
+
 // Determine if all detected columns are mapped with entity+field
 function evaluateMappingSaved() {
  console.log("here the evaluation happen of mapping save!");
@ -1028,6 +1096,11 @@ async function fetchSimulation() {
            :class="['px-2 py-0.5 rounded-full text-xs font-medium', statusInfo.classes]"
            >{{ statusInfo.label }}</span
          >
+          <span
+            v-if="showMissingEnabled"
+            class="text-[10px] px-1 py-0.5 rounded bg-amber-100 text-amber-700 align-middle"
+            >seznam manjkajočih</span
+          >
        </div>
      </div>
    </template>
@ -1065,6 +1138,22 @@ async function fetchSimulation() {
                <span class="font-medium">{{ props.import?.valid_rows ?? "—" }}</span>
              </div>
            </div>
+            <div class="mt-3 flex items-center gap-2">
+              <button
+                class="px-3 py-1.5 bg-gray-700 text-white text-xs rounded"
+                @click.prevent="openPreview"
+              >
+                Ogled CSV
+              </button>
+              <button
+                v-if="canShowMissingButton"
+                class="px-3 py-1.5 bg-indigo-600 text-white text-xs rounded"
+                @click.prevent="openMissingContracts"
+                title="Prikaži aktivne pogodbe, ki niso bile prisotne v uvozu (samo keyref)"
+              >
+                Ogled manjkajoče
+              </button>
+            </div>
          </div>
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <TemplateControls
@ -1096,6 +1185,24 @@ async function fetchSimulation() {
              "
              @apply-template="applyTemplateToImport"
            />
+            <!-- Import options -->
+            <div v-if="!isCompleted" class="mt-2 p-3 rounded border bg-gray-50">
+              <div class="flex items-center gap-3">
+                <label class="inline-flex items-center text-sm text-gray-700">
+                  <input
+                    type="checkbox"
+                    class="rounded mr-2"
+                    v-model="showMissingEnabled"
+                    @change="saveImportOptions"
+                  />
+                  <span>Seznam manjkajočih (po končanem uvozu)</span>
+                </label>
+              </div>
+              <p class="mt-1 text-xs text-gray-500">
+                Ko je omogočeno in je "contract.reference" nastavljen na keyref, bo po
+                končanem uvozu na voljo gumb za ogled pogodb, ki jih ni v datoteki.
+              </p>
+            </div>
            <ChecklistSteps :steps="stepStates" :missing-critical="missingCritical" />
          </div>

@ -1173,6 +1280,57 @@ async function fetchSimulation() {
    @change-limit="(val) => (previewLimit = val)"
    @refresh="fetchPreview"
  />
+  <!-- Missing contracts modal -->
+  <Modal
+    :show="showMissingContracts"
+    max-width="2xl"
+    @close="showMissingContracts = false"
+  >
+    <div class="p-4 max-h-[70vh] overflow-auto">
+      <div class="flex items-center justify-between mb-4">
+        <h3 class="font-semibold text-lg">Manjkajoče pogodbe (aktivne, ne-arhivirane)</h3>
+        <button
+          class="text-gray-500 hover:text-gray-700"
+          @click.prevent="showMissingContracts = false"
+        >
+          Zapri
+        </button>
+      </div>
+      <div v-if="missingContractsLoading" class="py-8 text-center text-sm text-gray-500">
+        Nalagam …
+      </div>
+      <div v-else>
+        <div v-if="!missingContracts.length" class="py-6 text-sm text-gray-600">
+          Ni zadetkov.
+        </div>
+        <ul v-else class="divide-y divide-gray-200">
+          <li
+            v-for="row in missingContracts"
+            :key="row.uuid"
+            class="py-2 text-sm flex items-center justify-between"
+          >
+            <div class="min-w-0">
+              <div class="font-mono text-gray-800">{{ row.reference }}</div>
+              <div class="text-xs text-gray-500 truncate">
+                <span class="font-medium text-gray-600">Primer: </span>
+                <span>{{ row.full_name || "—" }}</span>
+                <span v-if="row.balance_amount != null" class="ml-2"
+                  >• {{ formatMoney(row.balance_amount) }}</span
+                >
+              </div>
+            </div>
+            <div class="flex-shrink-0">
+              <a
+                :href="route('clientCase.show', row.case_uuid)"
+                class="text-blue-600 hover:underline text-xs"
+                >Odpri primer</a
+              >
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </Modal>
  <SimulationModal
    :show="showPaymentSim"
    :rows="paymentSimRows"
--- a/resources/js/Pages/Imports/Partials/SimulationModal.vue
+++ b/resources/js/Pages/Imports/Partials/SimulationModal.vue
@ -11,10 +11,21 @@ const props = defineProps({
  limit: { type: Number, default: 50 },
  loading: { type: Boolean, default: false },
  entities: { type: Array, default: () => [] },
+  // passthrough verbose from parent to render extra sources in table
+  verbose: { type: Boolean, default: false },
 });

 // Emits
-const emit = defineEmits(["close", "update:limit"]);
+const emit = defineEmits(["close", "update:limit", "toggle-verbose"]);
+
+// Local handlers for header controls
+function onLimit(e) {
+  const val = Number(e?.target?.value ?? props.limit ?? 50);
+  emit("update:limit", isNaN(val) ? 50 : val);
+}
+function toggleVerbose() {
+  emit("toggle-verbose");
+}

 // Map technical entity keys to localized labels
 const entityLabelMap = {
@ -70,6 +81,8 @@ const entitiesWithRows = computed(() => {
 const activeEntity = ref(null);
 const hideChain = ref(false);
 const showOnlyChanged = ref(false);
+// Show only rows skipped due to missing contract.reference in keyref mode (contract/account)
+const showOnlyKeyrefSkipped = ref(false);
 watch(
  entitiesWithRows,
  (val) => {
@ -156,6 +169,15 @@ const visibleRows = computed(() => {
    .filter((r) => {
      if (!r.entities || !r.entities[activeEntity.value]) return false;
      const ent = r.entities[activeEntity.value];
+      // Filter: only rows explicitly skipped due to keyref missing
+      if (showOnlyKeyrefSkipped.value) {
+        if (Array.isArray(ent)) {
+          const anySkipped = ent.some((i) => i && i.skipped_due_to_keyref);
+          if (!anySkipped) return false;
+        } else {
+          if (!ent.skipped_due_to_keyref) return false;
+        }
+      }
      if (!Array.isArray(ent)) {
        if (hideChain.value && ent.existing_chain) return false;
      }
@ -286,7 +308,7 @@ function referenceOf(entityName, ent) {
            class="text-[11px] px-2 py-1 rounded border bg-white hover:bg-gray-50"
            @click="toggleVerbose"
          >
-            {{ verbose ? "Manj" : "Več" }} podrobnosti
+            {{ props.verbose ? "Manj" : "Več" }} podrobnosti
          </button>
          <label class="flex items-center gap-1 text-[11px] text-gray-600">
            <input type="checkbox" v-model="hideChain" class="rounded border-gray-300" />
@ -300,6 +322,14 @@ function referenceOf(entityName, ent) {
            />
            Samo spremenjeni
          </label>
+          <label class="flex items-center gap-1 text-[11px] text-gray-600" title="Prikaži le vrstice preskočene zaradi manjkajoče contract.reference v načinu keyref (pogodbe/računi)">
+            <input
+              type="checkbox"
+              v-model="showOnlyKeyrefSkipped"
+              class="rounded border-gray-300"
+            />
+            Samo preskočene (keyref)
+          </label>
          <button
            type="button"
            class="text-[11px] px-2 py-1 rounded bg-gray-800 text-white hover:bg-gray-700"
--- a/resources/js/Pages/Notifications/Unread.vue
+++ b/resources/js/Pages/Notifications/Unread.vue
@ -0,0 +1,102 @@
+<script setup>
+import AppLayout from '@/Layouts/AppLayout.vue'
+import SectionTitle from '@/Components/SectionTitle.vue'
+import DataTableServer from '@/Components/DataTable/DataTableServer.vue'
+import { Link, router } from '@inertiajs/vue3'
+
+const props = defineProps({
+  activities: { type: Object, required: true },
+  today: { type: String, required: true },
+})
+
+function fmtDate(d) {
+  if (!d) return ''
+  try { return new Date(d).toLocaleDateString('sl-SI') } catch { return String(d) }
+}
+function fmtEUR(value) {
+  if (value === null || value === undefined) return '—'
+  const num = typeof value === 'string' ? Number(value) : value
+  if (Number.isNaN(num)) return String(value)
+  const formatted = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(num)
+  return formatted.replace('\u00A0', ' ')
+}
+
+async function markRead(id) {
+  try {
+    await window.axios.post(route('notifications.activity.read'), { activity_id: id })
+    router.reload({ only: ['activities'] })
+  } catch (e) {}
+}
+</script>
+
+<template>
+  <AppLayout title="Obvestila">
+    <template #header></template>
+    <div class="py-12">
+      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+        <div class="px-3 bg-white overflow-hidden shadow-xl sm:rounded-lg">
+          <div class="mx-auto max-w-4x1 py-3">
+            <div class="pb-3">
+              <SectionTitle>
+                <template #title>Neprikazana obvestila</template>
+                <template #description>Do danes: {{ fmtDate(today) }}</template>
+              </SectionTitle>
+            </div>
+
+            <DataTableServer
+              :columns="[
+                { key: 'what', label: 'Kaj', sortable: false },
+                { key: 'balance', label: 'Stanje', sortable: false, align: 'right', class: 'w-40' },
+                { key: 'due', label: 'Zapadlost', sortable: true, class: 'w-28' },
+              ]"
+              :rows="activities.data || []"
+              :meta="{
+                current_page: activities.current_page,
+                per_page: activities.per_page,
+                total: activities.total,
+                last_page: activities.last_page,
+              }"
+              route-name="notifications.unread"
+              page-param-name="unread-page"
+              :only-props="['activities']"
+            >
+              <template #cell-what="{ row }">
+                <div class="font-medium text-gray-800 truncate">
+                  <template v-if="row.contract?.uuid">
+                    Pogodba:
+                    <Link v-if="row.contract?.client_case?.uuid" :href="route('clientCase.show', { client_case: row.contract.client_case.uuid })" class="text-indigo-600 hover:underline">
+                      {{ row.contract?.reference || '—' }}
+                    </Link>
+                    <span v-else>{{ row.contract?.reference || '—' }}</span>
+                  </template>
+                  <template v-else>
+                    Primer:
+                    <Link v-if="row.client_case?.uuid" :href="route('clientCase.show', { client_case: row.client_case.uuid })" class="text-indigo-600 hover:underline">
+                      {{ row.client_case?.person?.full_name || '—' }}
+                    </Link>
+                    <span v-else>{{ row.client_case?.person?.full_name || '—' }}</span>
+                  </template>
+                </div>
+              </template>
+              <template #cell-balance="{ row }">
+                <div class="text-right">
+                  <span v-if="row.contract">{{ fmtEUR(row.contract?.account?.balance_amount) }}</span>
+                  <span v-else>—</span>
+                </div>
+              </template>
+              <template #cell-due="{ row }">
+                {{ fmtDate(row.due_date) }}
+              </template>
+              <template #actions="{ row }">
+                <button type="button" class="text-[12px] text-gray-500 hover:text-gray-700" @click="markRead(row.id)">Označi kot prikazano</button>
+              </template>
+              <template #empty>
+                <div class="p-6 text-center text-gray-500">Trenutno ni neprikazanih obvestil.</div>
+              </template>
+            </DataTableServer>
+          </div>
+        </div>
+      </div>
+    </div>
+  </AppLayout>
+</template>
--- a/resources/js/Pages/Testing/Index.vue
+++ b/resources/js/Pages/Testing/Index.vue
@ -1,21 +1,98 @@
 <script setup>
-import AppLayout from '@/Layouts/AppLayout.vue'
+import { ref } from "vue";
+import AppLayout from "@/Layouts/AppLayout.vue";
+import DataTableClient from "@/Components/DataTable/DataTableClient.vue";

 const props = defineProps({
-  example: { type: String, default: 'Demo' },
-})
+  example: { type: String, default: "Demo" },
+});
+
+// Dummy columns
+const columns = [
+  { key: "id", label: "ID", sortable: true, class: "w-16" },
+  { key: "name", label: "Ime", sortable: true },
+  { key: "email", label: "Email", sortable: true },
+  {
+    key: "balance",
+    label: "Stanje",
+    sortable: true,
+    align: "right",
+    formatter: (row) =>
+      new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(
+        row.balance
+      ),
+  },
+  { key: "created_at", label: "Ustvarjeno", sortable: true },
+];
+
+// Generate some dummy rows
+function makeRow(i) {
+  const bal = Math.round((Math.random() * 5000 - 1000) * 100) / 100;
+  const dt = new Date(Date.now() - Math.floor(Math.random() * 1000 * 60 * 60 * 24 * 90));
+  const iso = dt.toISOString().slice(0, 10);
+  return {
+    id: i + 1,
+    name: `Uporabnik ${i + 1}`,
+    email: `user${i + 1}@example.com`,
+    balance: bal,
+    created_at: iso,
+  };
+}
+// Increase dataset to visualize multi-page pagination (e.g., 100 pages at size 10)
+const rows = ref(Array.from({ length: 1000 }, (_, i) => makeRow(i)));
+
+// Controls (two-way bound)
+const sort = ref({ key: null, direction: null });
+const search = ref("");
+const page = ref(1);
+const pageSize = ref(10);
+const searchKeys = ["name", "email"];
+
+function onRowClick(row) {
+  // no-op demo; could show toast or details
+  console.debug("Row clicked:", row);
+}
 </script>

 <template>
  <AppLayout title="Testing Sandbox">
-    <div class="space-y-6">
+    <div class="space-y-6 p-6">
      <div class="prose dark:prose-invert max-w-none">
        <h1 class="text-2xl font-semibold">Testing Page</h1>
-        <p>This page is for quick UI or component experiments. Remove or adapt as needed.</p>
+        <p>
+          This page is for quick UI or component experiments. Remove or adapt as needed.
+        </p>
+        <p class="text-slate-700 dark:text-slate-200 text-sm">
+          Prop example value: <span class="font-mono">{{ props.example }}</span>
+        </p>
      </div>
-      <div class="rounded-lg border border-slate-200 dark:border-slate-700 bg-white/70 dark:bg-slate-800/60 p-4 shadow-sm">
-        <h2 class="text-sm font-semibold tracking-wide uppercase text-slate-500 dark:text-slate-400 mb-3">Example Area</h2>
-        <p class="text-slate-700 dark:text-slate-200 text-sm">Prop example value: <span class="font-mono">{{ props.example }}</span></p>
+
+      <div
+        class="rounded-lg border border-slate-200 dark:border-slate-700 bg-white/70 dark:bg-slate-800/60 p-4 shadow-sm"
+      >
+        <h2
+          class="text-sm font-semibold tracking-wide uppercase text-slate-500 dark:text-slate-400 mb-3"
+        >
+          DataTable (Client-side)
+        </h2>
+        <DataTableClient
+          :columns="columns"
+          :rows="rows"
+          v-model:sort="sort"
+          v-model:search="search"
+          v-model:page="page"
+          v-model:pageSize="pageSize"
+          :search-keys="searchKeys"
+          @row:click="onRowClick"
+        >
+          <template #actions="{ row }">
+            <button
+              class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 text-xs"
+            >
+              Akcija
+            </button>
+          </template>
+        </DataTableClient>
      </div>
    </div>
  </AppLayout>
--- a/routes/breadcrumbs.php
+++ b/routes/breadcrumbs.php
@ -1,15 +1,22 @@
-<?php // routes/breadcrumbs.php
+<?php
+
+// routes/breadcrumbs.php

 // Note: Laravel will automatically resolve `Breadcrumbs::` without
 // this import. This is nice for IDE syntax and refactoring.
 use App\Models\Client;
 use App\Models\ClientCase;
 use Diglactic\Breadcrumbs\Breadcrumbs;
-
 // This import is also not required, and you could replace `BreadcrumbTrail $trail`
 //  with `$trail`. This is nice for IDE type checking and completion.
 use Diglactic\Breadcrumbs\Generator as BreadcrumbTrail;

+// Dashboard > Notifications (Unread)
+Breadcrumbs::for('notifications.unread', function (BreadcrumbTrail $trail): void {
+    $trail->parent('dashboard');
+    $trail->push('Obvestila', route('notifications.unread'));
+});
+
 Breadcrumbs::for('settings.contractConfigs.index', function (BreadcrumbTrail $trail): void {
    $trail->parent('settings');
    $trail->push('Contract Configs', route('settings.contractConfigs.index'));
@ -32,6 +39,12 @@
    $trail->push($client->person->full_name, route('client.show', $client));
 });

+// Dashboard > Clients > [Client] > Contracts
+Breadcrumbs::for('client.contracts', function (BreadcrumbTrail $trail, Client $client) {
+    $trail->parent('client.show', $client);
+    $trail->push('Pogodbe', route('client.contracts', $client));
+});
+
 // Dashboard > Cases

 Breadcrumbs::for('clientCase', function (BreadcrumbTrail $trail) {
@ -74,4 +87,4 @@
 Breadcrumbs::for('settings.payment.edit', function (BreadcrumbTrail $trail) {
    $trail->parent('settings');
    $trail->push('Plačila', route('settings.payment.edit'));
-});
+});
--- a/routes/web.php
+++ b/routes/web.php
@ -2,6 +2,7 @@

 use App\Http\Controllers\AccountBookingController;
 use App\Http\Controllers\AccountPaymentController;
+use App\Http\Controllers\ActivityNotificationController;
 use App\Http\Controllers\ArchiveSettingController;
 use App\Http\Controllers\CaseObjectController;
 use App\Http\Controllers\ClientCaseContoller;
@ -11,6 +12,7 @@
 use App\Http\Controllers\FieldJobSettingController;
 use App\Http\Controllers\ImportController;
 use App\Http\Controllers\ImportTemplateController;
+use App\Http\Controllers\NotificationController;
 use App\Http\Controllers\PaymentSettingController;
 use App\Http\Controllers\PersonController;
 use App\Http\Controllers\PhoneViewController;
@ -265,6 +267,10 @@
    // contract / documents (direct access by contract)
    Route::get('contracts/{contract:uuid}/documents/{document:uuid}/view', [ClientCaseContoller::class, 'viewContractDocument'])->name('contract.document.view');
    Route::get('contracts/{contract:uuid}/documents/{document:uuid}/download', [ClientCaseContoller::class, 'downloadContractDocument'])->name('contract.document.download');
+
+    // Notifications: unread list and mark one activity as read (today)
+    Route::get('notifications/unread', [NotificationController::class, 'unread'])->name('notifications.unread');
+    Route::post('notifications/activity/read', ActivityNotificationController::class)->name('notifications.activity.read');
    Route::delete('contracts/{contract:uuid}/documents/{document:uuid}', [ClientCaseContoller::class, 'deleteContractDocument'])->name('contract.document.delete');
    // settings
    Route::get('settings', [SettingController::class, 'index'])->name('settings');
@ -313,6 +319,8 @@
    Route::get('imports/{import}/mappings', [ImportController::class, 'getMappings'])->name('imports.mappings.get');
    Route::get('imports/{import}/events', [ImportController::class, 'getEvents'])->name('imports.events');
    Route::get('imports/{import}/preview', [ImportController::class, 'preview'])->name('imports.preview');
+    Route::get('imports/{import}/missing-contracts', [ImportController::class, 'missingContracts'])->name('imports.missing-contracts');
+    Route::post('imports/{import}/options', [ImportController::class, 'updateOptions'])->name('imports.options');
    // Generic simulation endpoint (new) – provides projected effects for first N rows regardless of payments template
    Route::get('imports/{import}/simulate', [ImportController::class, 'simulate'])->name('imports.simulate');
    // Backwards compatible payments simulation route (legacy name) – now proxies to generic simulate method