dev changes

Reviewed-on: #1

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -39,3 +39,11 @@ docker-compose.local.yaml
 docker-compose.override.yaml
 .env.local
 .env.docker
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

app/Http/Controllers/Admin/PackageController.php

@@ -12,6 +12,7 @@
 use App\Models\SmsTemplate;
 use App\Services\Contact\PhoneSelector;
 use App\Services\Sms\SmsService;
+use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Bus;
@@ -50,6 +51,7 @@ public function create(Request $request): Response
             ->get(['id', 'name', 'content']);
         $segments = \App\Models\Segment::query()
             ->where('active', true)
+            ->where('exclude', false)
             ->orderBy('name')
             ->get(['id', 'name']);
         // Provide a lightweight list of recent clients with person names for filtering
@@ -321,7 +323,6 @@ public function contracts(Request $request, PhoneSelector $selector): \Illuminat
         $request->validate([
             'segment_id' => ['nullable', 'integer', 'exists:segments,id'],
             'q' => ['nullable', 'string'],
-          
             'client_id' => ['nullable', 'integer', 'exists:clients,id'],
             'only_mobile' => ['nullable', 'boolean'],
             'only_validated' => ['nullable', 'boolean'],
@@ -333,12 +334,12 @@ public function contracts(Request $request, PhoneSelector $selector): \Illuminat
 
         $segmentId = $request->input('segment_id') ? (int) $request->input('segment_id') : null;
 
-
         $query = Contract::query()
             ->with([
                 'clientCase.person.phones',
                 'clientCase.client.person',
                 'account',
+                'segments:id,name',
             ])
             ->select('contracts.*')
             ->latest('contracts.id');
@@ -350,6 +351,15 @@ public function contracts(Request $request, PhoneSelector $selector): \Illuminat
                     ->where('contract_segment.segment_id', '=', $segmentId)
                     ->where('contract_segment.active', true);
             });
+        } else {
+            // Only include contracts that have at least one active, non-excluded segment
+            $query->whereExists(fn ($exist) => $exist->select(\DB::raw(1))
+                ->from('contract_segment')
+                ->join('segments', 'segments.id', '=', 'contract_segment.segment_id')
+                ->where('contract_segment.active', true)
+                ->where('segments.exclude', false)
+                ->whereColumn('contract_segment.contract_id', 'contracts.id')
+            );
         }
 
         if ($q = trim((string) $request->input('q'))) {
@@ -399,13 +409,14 @@ public function contracts(Request $request, PhoneSelector $selector): \Illuminat
             });
         }
 
-        $contracts = $query->get();
+        $contracts = $query->limit(500)->get();
 
         $data = collect($contracts)->map(function (Contract $contract) use ($selector) {
             $person = $contract->clientCase?->person;
             $selected = $person ? $selector->selectForPerson($person) : ['phone' => null, 'reason' => 'no_person'];
             $phone = $selected['phone'];
             $clientPerson = $contract->clientCase?->client?->person;
+            $segment = collect($contract->segments)->last();
 
             return [
                 'id' => $contract->id,
@@ -423,6 +434,7 @@ public function contracts(Request $request, PhoneSelector $selector): \Illuminat
                     'uuid' => $person?->uuid,
                     'full_name' => $person?->full_name,
                 ],
+                'segment' => $segment,
                 // Stranka: the client person
                 'client' => $clientPerson ? [
                     'id' => $contract->clientCase?->client?->id,
@@ -440,7 +452,7 @@ public function contracts(Request $request, PhoneSelector $selector): \Illuminat
         });
 
         return response()->json([
-            'data' => $data
+            'data' => $data,
         ]);
     }
 

app/Http/Controllers/ClientController.php

@@ -27,7 +27,7 @@ public function index(Client $client, Request $request)
                     ->where('person.full_name', 'ilike', '%'.$search.'%')
                     ->groupBy('clients.id');
             })
-            ->where('clients.active', 1)
+            //->where('clients.active', 1)
             // Use LEFT JOINs for aggregated data to avoid subqueries
             ->leftJoin('client_cases', 'client_cases.client_id', '=', 'clients.id')
             ->leftJoin('contracts', function ($join) {
@@ -51,7 +51,7 @@ public function index(Client $client, Request $request)
 
         return Inertia::render('Client/Index', [
             'clients' => $query
-                ->paginate($request->integer('per_page', 15))
+                ->paginate($request->integer('per_page', default: 100))
                 ->withQueryString(),
             'filters' => $request->only(['search']),
         ]);

app/Http/Controllers/ImportController.php

@@ -9,7 +9,6 @@
 use App\Models\ImportEvent;
 use App\Models\ImportTemplate;
 use App\Services\CsvImportService;
-use App\Services\Import\ImportServiceV2;
 use App\Services\Import\ImportSimulationServiceV2;
 use App\Services\ImportProcessor;
 use Illuminate\Http\Request;
@@ -190,6 +189,7 @@ public function process(Import $import, Request $request, ImportProcessor $proce
 
         try {
             $result = $processor->process($import, user: $request->user());
+
             return response()->json($result);
         } catch (\Throwable $e) {
             \Log::error('Import processing failed', [
@@ -202,7 +202,7 @@ public function process(Import $import, Request $request, ImportProcessor $proce
 
             return response()->json([
                 'success' => false,
-                'message' => 'Import processing failed: ' . $e->getMessage(),
+                'message' => 'Import processing failed: '.$e->getMessage(),
             ], 500);
         }
     }
@@ -712,8 +712,6 @@ public function simulatePayments(Import $import, Request $request)
      * templates. For payments templates, payment-specific summaries/entities will be included
      * automatically by the simulation service when mappings contain the payment root.
      *
-     * @param  Import  $import
-     * @param  Request  $request
      * @return \Illuminate\Http\JsonResponse
      */
     public function simulate(Import $import, Request $request)
@@ -829,4 +827,19 @@ public function destroy(Request $request, Import $import)
 
         return back()->with('success', 'Import deleted successfully');
     }
+
+    // Download the original import file
+    public function download(Import $import)
+    {
+        // Verify file exists
+        if (! $import->disk || ! $import->path || ! Storage::disk($import->disk)->exists($import->path)) {
+            return response()->json([
+                'error' => 'File not found',
+            ], 404);
+        }
+
+        $fileName = $import->original_name ?? 'import_'.$import->uuid;
+
+        return Storage::disk($import->disk)->download($import->path, $fileName);
+    }
 }

app/Jobs/SendSmsJob.php

@@ -118,10 +118,10 @@ public function handle(SmsService $sms): void
                 if ($template && $case) {
                     $note = '';
                     if ($log->status === 'sent') {
-                        $note = sprintf('Št: %s | Telo: %s', (string) $this->to, (string) $this->content);
+                        $note = sprintf('Tel: %s | Telo: %s', (string) $this->to, (string) $this->content);
                     } elseif ($log->status === 'failed') {
                         $note = sprintf(
-                            'Št: %s | Telo: %s | Napaka: %s',
+                            'Tel: %s | Telo: %s | Napaka: %s',
                             (string) $this->to,
                             (string) $this->content,
                             'SMS ni bil poslan!'

app/Services/ImportProcessor.php

@@ -1656,6 +1656,10 @@ private function upsertAccount(Import $import, array $mapped, $mappings, bool $h
             $value = $acc[$field] ?? null;
             if (in_array($field, ['balance_amount', 'initial_amount'], true) && is_string($value)) {
                 $value = $this->normalizeDecimal($value);
+                // Ensure the normalized value is numeric, otherwise default to 0
+                if ($value === '' || $value === '-' || ! is_numeric($value)) {
+                    $value = 0;
+                }
             }
             // Convert empty string to 0 for amount fields
             if (in_array($field, ['balance_amount', 'initial_amount'], true) && ($value === '' || $value === null)) {
@@ -1689,8 +1693,12 @@ private function upsertAccount(Import $import, array $mapped, $mappings, bool $h
         if ($existing) {
             // Build non-null changes for account fields
             $changes = array_filter($applyUpdate, fn ($v) => ! is_null($v));
-            // Track balance change
-            $oldBalance = (float) ($existing->balance_amount ?? 0);
+            // Track balance change - normalize in case DB has malformed data
+            $rawBalance = $existing->balance_amount ?? 0;
+            if (is_string($rawBalance) && $rawBalance !== '') {
+                $rawBalance = $this->normalizeDecimal($rawBalance);
+            }
+            $oldBalance = is_numeric($rawBalance) ? (float) $rawBalance : 0;
             // Note: meta merging for contracts is handled in upsertContractChain, not here
             if (! empty($changes)) {
                 $existing->fill($changes);
@@ -1699,7 +1707,11 @@ private function upsertAccount(Import $import, array $mapped, $mappings, bool $h
 
             // If balance_amount changed and this wasn't caused by a payment (we are in account upsert), log an activity with before/after
             if (array_key_exists('balance_amount', $changes)) {
-                $newBalance = (float) ($existing->balance_amount ?? 0);
+                $rawNewBalance = $existing->balance_amount ?? 0;
+                if (is_string($rawNewBalance) && $rawNewBalance !== '') {
+                    $rawNewBalance = $this->normalizeDecimal($rawNewBalance);
+                }
+                $newBalance = is_numeric($rawNewBalance) ? (float) $rawNewBalance : 0;
                 if ($newBalance !== $oldBalance) {
                     try {
                         $contractId = $existing->contract_id;
@@ -3194,7 +3206,7 @@ private function upsertAddress(int $personId, array $addrData, $mappings): array
             ->first();*/
 
         // Build search query combining address, post_code and city
-        $searchParts = [$addrData['post_code']];
+        $searchParts = [$addrData['address']];
         if (!empty($addrData['post_code'])) {
             $searchParts[] = $addrData['post_code'];
         }
@@ -3204,7 +3216,7 @@ private function upsertAddress(int $personId, array $addrData, $mappings): array
 
         $searchQuery = implode(' ', $searchParts);
         // Use fulltext search (GIN index optimized)
-        $existing = PersonAddress::where('person_id', $personId)
+        $existing = PersonAddress::query()->where('person_id', $personId)
             ->whereRaw("search_vector @@ plainto_tsquery('simple', ?)", [$searchQuery])
             ->first();
         

composer.json

@@ -45,6 +45,10 @@
         }
     },
     "scripts": {
+        "dev": [
+            "Composer\\Config::disableProcessTimeout",
+            "npx concurrently -c \"#93c5fd,#c4b5fd,#fdba74\" \"php artisan serve --no-reload --port=8090\" \"php artisan queue:listen --tries=1\" \"npm run dev\" --names='server,queue,vite'"
+        ],
         "post-autoload-dump": [
             "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
             "@php artisan package:discover --ansi"

database/migrations/2026_01_27_195456_alter_table_person_addresses_increase_varchar_postal.php

@@ -0,0 +1,49 @@
+<?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::table('person_addresses', function (Blueprint $table) {
+            $table->dropIndex('person_addresses_search_vector_idx');
+            $table->dropColumn('search_vector');
+
+
+            $table->string('post_code', 50)->nullable()->change();
+
+        });
+
+        // Add a generated tsvector column for fulltext search
+        DB::statement("
+            ALTER TABLE person_addresses 
+            ADD COLUMN search_vector tsvector 
+            GENERATED ALWAYS AS (
+                to_tsvector('simple', 
+                    coalesce(address, '') || ' ' || 
+                    coalesce(post_code, '') || ' ' || 
+                    coalesce(city, '')
+                )
+            ) STORED
+        ");
+
+        // Create GIN index on the tsvector column for fast fulltext search
+        DB::statement('CREATE INDEX person_addresses_search_vector_idx ON person_addresses USING GIN(search_vector)');
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('person_addresses', function (Blueprint $table) {
+            $table->string('post_code', 20)->change();
+        });
+    }
+};

e2e/example.spec.js

@@ -0,0 +1,19 @@
+// @ts-check
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Playwright/);
+});
+
+test('get started link', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Click the get started link.
+  await page.getByRole('link', { name: 'Get started' }).click();
+
+  // Expects page to have a heading with the name of Installation.
+  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+});

package.json

@@ -1,68 +1,69 @@
 {
-    "private": true,
-    "type": "module",
-    "scripts": {
-        "dev": "vite",
-        "build": "vite build",
-        "typecheck": "vue-tsc --noEmit -p tsconfig.json"
-    },
-    "devDependencies": {
-        "@inertiajs/vue3": "2.0",
-        "@mdi/js": "^7.4.47",
-        "@tailwindcss/forms": "^0.5.10",
-        "@tailwindcss/postcss": "^4.1.18",
-        "@tailwindcss/typography": "^0.5.19",
-        "@types/node": "^24.10.3",
-        "@vitejs/plugin-vue": "^6.0.2",
-        "autoprefixer": "^10.4.22",
-        "axios": "^1.13.2",
-        "laravel-vite-plugin": "^2.0.1",
-        "postcss": "^8.5.6",
-        "tailwindcss": "^4.1.16",
-        "typescript": "^5.9.3",
-        "vite": "^7.2.7",
-        "vue": "^3.3.13",
-        "vue-tsc": "^3.1.8"
-    },
-    "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^6.7.2",
-        "@fortawesome/free-brands-svg-icons": "^6.7.2",
-        "@fortawesome/free-regular-svg-icons": "^6.7.2",
-        "@fortawesome/free-solid-svg-icons": "^6.7.2",
-        "@fortawesome/vue-fontawesome": "^3.1.2",
-        "@guolao/vue-monaco-editor": "^1.6.0",
-        "@headlessui/vue": "^1.7.23",
-        "@heroicons/vue": "^2.2.0",
-        "@internationalized/date": "^3.10.0",
-        "@tanstack/vue-table": "^8.21.3",
-        "@unovis/ts": "^1.6.2",
-        "@unovis/vue": "^1.6.2",
-        "@vee-validate/zod": "^4.15.1",
-        "@vuepic/vue-datepicker": "^11.0.3",
-        "@vueuse/core": "^14.1.0",
-        "apexcharts": "^4.7.0",
-        "class-variance-authority": "^0.7.1",
-        "clean": "^4.0.2",
-        "clsx": "^2.1.1",
-        "date-fns": "^4.1.0",
-        "lodash": "^4.17.21",
-        "lucide-vue-next": "^0.552.0",
-        "material-design-icons-iconfont": "^6.7.0",
-        "monaco-editor": "^0.55.1",
-        "preline": "^2.7.0",
-        "quill": "^1.3.7",
-        "reka-ui": "^2.7.0",
-        "tailwind-merge": "^3.4.0",
-        "tailwindcss-animate": "^1.0.7",
-        "tailwindcss-inner-border": "^0.2.0",
-        "v-calendar": "^3.1.2",
-        "vee-validate": "^4.15.1",
-        "vue-currency-input": "^3.2.1",
-        "vue-multiselect": "^3.4.0",
-        "vue-search-input": "^1.1.19",
-        "vue-sonner": "^2.0.9",
-        "vue3-apexcharts": "^1.10.0",
-        "vuedraggable": "^4.1.0",
-        "zod": "^3.25.76"
-    }
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json"
+  },
+  "devDependencies": {
+    "@inertiajs/vue3": "2.0",
+    "@mdi/js": "^7.4.47",
+    "@playwright/test": "^1.59.1",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@tailwindcss/typography": "^0.5.19",
+    "@types/node": "^24.10.3",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "autoprefixer": "^10.4.22",
+    "axios": "^1.13.2",
+    "laravel-vite-plugin": "^2.0.1",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.16",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.7",
+    "vue": "^3.3.13",
+    "vue-tsc": "^3.1.8"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/vue-fontawesome": "^3.1.2",
+    "@guolao/vue-monaco-editor": "^1.6.0",
+    "@headlessui/vue": "^1.7.23",
+    "@heroicons/vue": "^2.2.0",
+    "@internationalized/date": "^3.10.0",
+    "@tanstack/vue-table": "^8.21.3",
+    "@unovis/ts": "^1.6.2",
+    "@unovis/vue": "^1.6.2",
+    "@vee-validate/zod": "^4.15.1",
+    "@vuepic/vue-datepicker": "^11.0.3",
+    "@vueuse/core": "^14.1.0",
+    "apexcharts": "^4.7.0",
+    "class-variance-authority": "^0.7.1",
+    "clean": "^4.0.2",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "lodash": "^4.17.21",
+    "lucide-vue-next": "^0.552.0",
+    "material-design-icons-iconfont": "^6.7.0",
+    "monaco-editor": "^0.55.1",
+    "preline": "^2.7.0",
+    "quill": "^1.3.7",
+    "reka-ui": "^2.7.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
+    "tailwindcss-inner-border": "^0.2.0",
+    "v-calendar": "^3.1.2",
+    "vee-validate": "^4.15.1",
+    "vue-currency-input": "^3.2.1",
+    "vue-multiselect": "^3.4.0",
+    "vue-search-input": "^1.1.19",
+    "vue-sonner": "^2.0.9",
+    "vue3-apexcharts": "^1.10.0",
+    "vuedraggable": "^4.1.0",
+    "zod": "^3.25.76"
+  }
 }

playwright.config.js

@@ -0,0 +1,81 @@
+// @ts-check
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  testDir: './e2e',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://localhost:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});
+

resources/js/Components/Dialogs/CreateDialog.vue

@@ -69,7 +69,7 @@ const maxWidthClass = computed(() => {
 
 <template>
   <Dialog v-model:open="open">
-    <DialogContent :class="maxWidthClass">
+    <DialogContent class="overflow-auto max-h-3/4" :class="maxWidthClass">
       <DialogHeader>
         <DialogTitle>
           <div class="flex items-center gap-2">

resources/js/Components/Dialogs/DeleteDialog.vue

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

resources/js/Components/Dialogs/UpdateDialog.vue

@@ -69,7 +69,7 @@ const maxWidthClass = computed(() => {
 
 <template>
   <Dialog v-model:open="open">
-    <DialogContent :class="maxWidthClass">
+    <DialogContent class="overflow-auto max-h-3/4" :class="maxWidthClass">
       <DialogHeader>
         <DialogTitle>
           <div class="flex items-center gap-2">

resources/js/Components/DocumentsTable/DocumentUploadDialog.vue

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

resources/js/Components/DocumentsTable/DocumentViewerDialog.vue

@@ -1,30 +1,219 @@
 <script setup>
+import { ref, computed, watch } from "vue";
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
-} from '@/Components/ui/dialog'
-import { Button } from '@/Components/ui/button'
+} from "@/Components/ui/dialog";
+import { Button } from "@/Components/ui/button";
+import { Badge } from "../ui/badge";
+import { Loader2 } from "lucide-vue-next";
+import axios from "axios";
 
 const props = defineProps({
   show: { type: Boolean, default: false },
-  src: { type: String, default: '' },
-  title: { type: String, default: 'Dokument' }
-})
-const emit = defineEmits(['close'])
+  src: { type: String, default: "" },
+  title: { type: String, default: "Dokument" },
+  mimeType: { type: String, default: "" },
+  filename: { type: String, default: "" },
+});
+const emit = defineEmits(["close"]);
+
+const textContent = ref("");
+const loading = ref(false);
+const previewGenerating = ref(false);
+const previewError = ref("");
+
+const fileExtension = computed(() => {
+  if (props.filename) {
+    return props.filename.split(".").pop()?.toLowerCase() || "";
+  }
+  return "";
+});
+
+const viewerType = computed(() => {
+  const ext = fileExtension.value;
+  const mime = props.mimeType.toLowerCase();
+
+  if (ext === "pdf" || mime === "application/pdf") return "pdf";
+  // DOCX/DOC files are converted to PDF by backend - treat as PDF viewer
+  if (["doc", "docx"].includes(ext) || mime.includes("word") || mime.includes("msword"))
+    return "docx";
+  if (["jpg", "jpeg", "png", "gif", "webp"].includes(ext) || mime.startsWith("image/"))
+    return "image";
+  if (["txt", "csv", "xml"].includes(ext) || mime.startsWith("text/")) return "text";
+
+  return "unsupported";
+});
+
+const loadTextContent = async () => {
+  if (!props.src || viewerType.value !== "text") return;
+  loading.value = true;
+  try {
+    const response = await axios.get(props.src);
+    textContent.value = response.data;
+  } catch (e) {
+    textContent.value = "Napaka pri nalaganju vsebine.";
+  } finally {
+    loading.value = false;
+  }
+};
+
+// For DOCX files, the backend converts to PDF. If the preview isn't ready yet (202 status),
+// we poll until it's available.
+const docxPreviewUrl = ref("");
+const loadDocxPreview = async () => {
+  if (!props.src || viewerType.value !== "docx") return;
+
+  previewGenerating.value = true;
+  previewError.value = "";
+  docxPreviewUrl.value = "";
+
+  const maxRetries = 15;
+  const retryDelay = 2000; // 2 seconds between retries
+
+  for (let attempt = 0; attempt < maxRetries; attempt++) {
+    try {
+      const response = await axios.head(props.src, { validateStatus: () => true });
+
+      if (response.status >= 200 && response.status < 300) {
+        // Preview is ready
+        docxPreviewUrl.value = props.src;
+        previewGenerating.value = false;
+        return;
+      } else if (response.status === 202) {
+        // Preview is being generated, wait and retry
+        await new Promise((resolve) => setTimeout(resolve, retryDelay));
+      } else {
+        // Other error
+        previewError.value = "Napaka pri nalaganju predogleda.";
+        previewGenerating.value = false;
+        return;
+      }
+    } catch (e) {
+      previewError.value = "Napaka pri nalaganju predogleda.";
+      previewGenerating.value = false;
+      return;
+    }
+  }
+
+  // Max retries reached
+  previewError.value = "Predogled ni na voljo. Prosimo poskusite znova kasneje.";
+  previewGenerating.value = false;
+};
+
+watch(
+  () => [props.show, props.src],
+  ([show]) => {
+    if (show && viewerType.value === "text") {
+      loadTextContent();
+    }
+    if (show && viewerType.value === "docx") {
+      loadDocxPreview();
+    }
+    // Reset states when dialog closes
+    if (!show) {
+      previewGenerating.value = false;
+      previewError.value = "";
+      docxPreviewUrl.value = "";
+    }
+  },
+  { immediate: true }
+);
 </script>
 
 <template>
   <Dialog :open="show" @update:open="(open) => !open && $emit('close')">
-    <DialogContent class="max-w-4xl">
+    <DialogContent class="max-w-full xl:max-w-7xl">
       <DialogHeader>
-        <DialogTitle>{{ props.title }}</DialogTitle>
+        <DialogTitle>
+          {{ title }}
+        </DialogTitle>
+        <DialogDescription>
+          <Badge>
+            {{ fileExtension }}
+          </Badge>
+        </DialogDescription>
       </DialogHeader>
-      <div class="h-[70vh]">
-        <iframe v-if="props.src" :src="props.src" class="w-full h-full rounded border" />
+
+      <div class="h-[70vh] overflow-auto">
+        <!-- PDF Viewer (browser native) -->
+        <template v-if="viewerType === 'pdf' && props.src">
+          <iframe
+            :src="props.src"
+            class="w-full h-full rounded border"
+            type="application/pdf"
+          />
+        </template>
+
+        <!-- DOCX Viewer (converted to PDF by backend) -->
+        <template v-else-if="viewerType === 'docx'">
+          <!-- Loading/generating state -->
+          <div
+            v-if="previewGenerating"
+            class="flex flex-col items-center justify-center h-full gap-4"
+          >
+            <Loader2 class="h-8 w-8 animate-spin text-indigo-600" />
+            <span class="text-gray-500">Priprava predogleda dokumenta...</span>
+          </div>
+          <!-- Error state -->
+          <div
+            v-else-if="previewError"
+            class="flex flex-col items-center justify-center h-full gap-4 text-gray-500"
+          >
+            <span>{{ previewError }}</span>
+            <Button as="a" :href="props.src" target="_blank" variant="outline">
+              Prenesi datoteko
+            </Button>
+          </div>
+          <!-- Preview ready -->
+          <iframe
+            v-else-if="docxPreviewUrl"
+            :src="docxPreviewUrl"
+            class="w-full h-full rounded border"
+            type="application/pdf"
+          />
+        </template>
+
+        <!-- Image Viewer -->
+        <template v-else-if="viewerType === 'image' && props.src">
+          <img
+            :src="props.src"
+            :alt="props.title"
+            class="max-w-full max-h-full mx-auto object-contain"
+          />
+        </template>
+
+        <!-- Text/CSV/XML Viewer -->
+        <template v-else-if="viewerType === 'text'">
+          <div v-if="loading" class="flex items-center justify-center h-full">
+            <div class="animate-pulse text-gray-500">Nalaganje...</div>
+          </div>
+          <pre
+            v-else
+            class="p-4 bg-gray-50 dark:bg-gray-900 rounded border text-sm overflow-auto h-full whitespace-pre-wrap wrap-break-word"
+            >{{ textContent }}</pre
+          >
+        </template>
+
+        <!-- Unsupported -->
+        <template v-else-if="viewerType === 'unsupported'">
+          <div
+            class="flex flex-col items-center justify-center h-full gap-4 text-gray-500"
+          >
+            <span>Predogled ni na voljo za to vrsto datoteke.</span>
+            <Button as="a" :href="props.src" target="_blank" variant="outline">
+              Prenesi datoteko
+            </Button>
+          </div>
+        </template>
+
+        <!-- No source -->
         <div v-else class="text-sm text-gray-500">Ni dokumenta za prikaz.</div>
       </div>
+
       <div class="flex justify-end mt-4">
         <Button type="button" variant="outline" @click="$emit('close')">Zapri</Button>
       </div>

resources/js/Components/PersonInfo/PersonInfoGrid.vue

@@ -299,7 +299,7 @@ const switchToTab = (tab) => {
 
 <template>
   <Tabs v-model="activeTab" class="mt-2">
-    <TabsList class="flex w-full bg-white gap-2 p-1">
+    <TabsList class="flex flex-row flex-wrap bg-white gap-2 p-1">
       <TabsTrigger
         value="person"
         class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2"

resources/js/Components/PersonInfo/PersonInfoPhonesTab.vue

@@ -8,7 +8,13 @@ import {
 } from "@/Components/ui/dropdown-menu";
 import { Card } from "@/Components/ui/card";
 import { Button } from "../ui/button";
-import { EllipsisVertical, MessageSquare, MessageSquareText } from "lucide-vue-next";
+import {
+  CircleCheckBigIcon,
+  CircleCheckIcon,
+  EllipsisVertical,
+  MessageSquare,
+  MessageSquareText,
+} from "lucide-vue-next";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
 
 const props = defineProps({
@@ -79,8 +85,9 @@ const handleSms = (phone) => emit("sms", phone);
             </DropdownMenu>
           </div>
         </div>
-        <p class="font-medium leading-relaxed p-1">
+        <p class="font-medium leading-relaxed p-1 flex gap-1 items-center">
           {{ phone.nu }}
+          <CircleCheckBigIcon color="#3e9392" size="20" v-if="phone.validated" />
         </p>
         <p class="text-sm text-muted-foreground p-1" v-if="phone.description">
           {{ phone.description }}

resources/js/Components/PersonInfo/PersonInfoSmsDialog.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref, watch, computed } from "vue";
+import axios from "axios";
 import {
   Dialog,
   DialogContent,
@@ -301,27 +302,13 @@ const updateSmsFromSelection = async () => {
     const url = route("clientCase.sms.preview", {
       client_case: props.clientCaseUuid,
     });
-    const res = await fetch(url, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-Requested-With": "XMLHttpRequest",
-        "X-CSRF-TOKEN":
-          document.querySelector('meta[name="csrf-token"]')?.getAttribute("content") ||
-          "",
-      },
-      body: JSON.stringify({
-        template_id: form.values.template_id,
-        contract_uuid: form.values.contract_uuid || null,
-      }),
-      credentials: "same-origin",
+    const { data } = await axios.post(url, {
+      template_id: form.values.template_id,
+      contract_uuid: form.values.contract_uuid || null,
     });
-    if (res.ok) {
-      const data = await res.json();
-      if (typeof data?.content === "string" && data.content.trim() !== "") {
-        form.setFieldValue("message", data.content);
-        return;
-      }
+    if (typeof data?.content === "string" && data.content.trim() !== "") {
+      form.setFieldValue("message", data.content);
+      return;
     }
   } catch (e) {
     // ignore and fallback

resources/js/Components/app/ui/AppRangeDatePicker.vue

@@ -0,0 +1,177 @@
+<script setup>
+import { CalendarIcon, XIcon } from "lucide-vue-next";
+import { computed, ref } from "vue";
+import { cn } from "@/lib/utils";
+import { Button } from "@/Components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/Components/ui/popover";
+import { RangeCalendar } from "@/Components/ui/range-calendar";
+import {
+  DateFormatter,
+  getLocalTimeZone,
+  today,
+  parseDate,
+  CalendarDate,
+} from "@internationalized/date";
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => ({ start: null, end: null }),
+  },
+  placeholder: {
+    type: String,
+    default: "Izberi datumski obseg",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  buttonClass: {
+    type: String,
+    default: "w-[280px]",
+  },
+  locale: {
+    type: String,
+    default: "sl-SI",
+  },
+  numberOfMonths: {
+    type: Number,
+    default: 2,
+  },
+  minValue: {
+    type: Object,
+    default: undefined,
+  },
+  maxValue: {
+    type: Object,
+    default: undefined,
+  },
+  clearable: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const open = ref(false);
+
+const df = new DateFormatter(props.locale, {
+  dateStyle: "medium",
+});
+
+// Check if there's a selected value
+const hasValue = computed(() => {
+  const val = props.modelValue;
+  return val?.start || val?.end;
+});
+
+// Convert string dates to CalendarDate objects for the calendar
+const calendarValue = computed({
+  get() {
+    const val = props.modelValue;
+    if (!val) return undefined;
+
+    let start = null;
+    let end = null;
+
+    if (val.start) {
+      if (typeof val.start === "string") {
+        start = parseDate(val.start);
+      } else if (val.start instanceof CalendarDate) {
+        start = val.start;
+      }
+    }
+
+    if (val.end) {
+      if (typeof val.end === "string") {
+        end = parseDate(val.end);
+      } else if (val.end instanceof CalendarDate) {
+        end = val.end;
+      }
+    }
+
+    if (!start && !end) return undefined;
+    return { start, end };
+  },
+  set(newValue) {
+    if (!newValue) {
+      emit("update:modelValue", { start: null, end: null });
+      return;
+    }
+
+    // Convert CalendarDate to ISO string (YYYY-MM-DD) for easier handling
+    const result = {
+      start: newValue.start ? newValue.start.toString() : null,
+      end: newValue.end ? newValue.end.toString() : null,
+    };
+    emit("update:modelValue", result);
+
+    // Close popover when both dates are selected
+    if (result.start && result.end) {
+      open.value = false;
+    }
+  },
+});
+
+const displayText = computed(() => {
+  const val = calendarValue.value;
+  if (!val?.start) return props.placeholder;
+
+  const startFormatted = df.format(val.start.toDate(getLocalTimeZone()));
+  if (!val.end) return startFormatted;
+
+  const endFormatted = df.format(val.end.toDate(getLocalTimeZone()));
+  return `${startFormatted} - ${endFormatted}`;
+});
+
+function clearValue(event) {
+  event.stopPropagation();
+  emit("update:modelValue", { start: null, end: null });
+}
+</script>
+
+<template>
+  <Popover v-model:open="open">
+    <PopoverTrigger as-child>
+      <Button
+        variant="outline"
+        :disabled="disabled"
+        :class="
+          cn(
+            'justify-start text-left font-normal',
+            !calendarValue?.start && 'text-muted-foreground',
+            buttonClass
+          )
+        "
+      >
+        <CalendarIcon class="mr-2 h-4 w-4 shrink-0" />
+        <span class="truncate flex-1">{{ displayText }}</span>
+        <span
+          v-if="clearable && hasValue && !disabled"
+          class="ml-2 shrink-0 opacity-50 hover:opacity-100 cursor-pointer"
+          @click.stop.prevent="clearValue"
+        >
+          <XIcon class="h-4 w-4" />
+        </span>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-0" align="start">
+      <RangeCalendar
+        v-model="calendarValue"
+        :locale="locale"
+        :number-of-months="numberOfMonths"
+        :min-value="minValue"
+        :max-value="maxValue"
+        initial-focus
+        @update:start-value="
+          (startDate) => {
+            if (calendarValue?.start?.toString() !== startDate?.toString()) {
+              calendarValue = { start: startDate, end: undefined };
+            }
+          }
+        "
+      />
+    </PopoverContent>
+  </Popover>
+</template>

resources/js/Pages/Admin/Packages/Create.vue

@@ -2,6 +2,7 @@
 import AdminLayout from "@/Layouts/AdminLayout.vue";
 import { Link, router, useForm } from "@inertiajs/vue3";
 import { ref, computed, nextTick } from "vue";
+import axios from "axios";
 import {
   Card,
   CardContent,
@@ -39,6 +40,9 @@ import {
   BadgeCheckIcon,
 } from "lucide-vue-next";
 import { fmtDateDMY } from "@/Utilities/functions";
+import { upperFirst } from "lodash";
+import AppCombobox from "@/Components/app/ui/AppCombobox.vue";
+import AppRangeDatePicker from "@/Components/app/ui/AppRangeDatePicker.vue";
 
 const props = defineProps({
   profiles: { type: Array, default: () => [] },
@@ -123,13 +127,19 @@ const contracts = ref({
 const segmentId = ref(null);
 const search = ref("");
 const clientId = ref(null);
-const startDateFrom = ref("");
-const startDateTo = ref("");
-const promiseDateFrom = ref("");
-const promiseDateTo = ref("");
+const startDateRange = ref({ start: null, end: null });
+const promiseDateRange = ref({ start: null, end: null });
 const onlyMobile = ref(false);
 const onlyValidated = ref(false);
 const loadingContracts = ref(false);
+
+// Transform clients for AppCombobox
+const clientItems = computed(() =>
+  props.clients.map((c) => ({
+    value: c.id,
+    label: c.name,
+  }))
+);
 const selectedContractIds = ref(new Set());
 const perPage = ref(25);
 
@@ -153,6 +163,11 @@ const contractColumns = [
     accessorFn: (row) => row.selected_phone?.number || "—",
     header: "Izbrana številka",
   },
+  {
+    id: "segment",
+    accessorFn: (row) => upperFirst(row.segment?.name) || "—",
+    header: "Segment",
+  },
   { accessorKey: "no_phone_reason", header: "Opomba" },
 ];
 
@@ -175,19 +190,22 @@ async function loadContracts(url = null) {
     if (segmentId.value) params.append("segment_id", segmentId.value);
     if (search.value) params.append("q", search.value);
     if (clientId.value) params.append("client_id", clientId.value);
-    if (startDateFrom.value) params.append("start_date_from", startDateFrom.value);
-    if (startDateTo.value) params.append("start_date_to", startDateTo.value);
-    if (promiseDateFrom.value) params.append("promise_date_from", promiseDateFrom.value);
-    if (promiseDateTo.value) params.append("promise_date_to", promiseDateTo.value);
+    if (startDateRange.value?.start)
+      params.append("start_date_from", startDateRange.value.start);
+    if (startDateRange.value?.end)
+      params.append("start_date_to", startDateRange.value.end);
+    if (promiseDateRange.value?.start)
+      params.append("promise_date_from", promiseDateRange.value.start);
+    if (promiseDateRange.value?.end)
+      params.append("promise_date_to", promiseDateRange.value.end);
     if (onlyMobile.value) params.append("only_mobile", "1");
     if (onlyValidated.value) params.append("only_validated", "1");
     params.append("per_page", perPage.value);
 
     const target = url || `${route("admin.packages.contracts")}?${params.toString()}`;
-    const res = await fetch(target, {
+    const { data: json } = await axios.get(target, {
       headers: { "X-Requested-With": "XMLHttpRequest" },
     });
-    const json = await res.json();
 
     // Wait for next tick before updating to avoid Vue reconciliation issues
     await nextTick();
@@ -238,10 +256,13 @@ function goToPage(page) {
   if (segmentId.value) params.append("segment_id", segmentId.value);
   if (search.value) params.append("q", search.value);
   if (clientId.value) params.append("client_id", clientId.value);
-  if (startDateFrom.value) params.append("start_date_from", startDateFrom.value);
-  if (startDateTo.value) params.append("start_date_to", startDateTo.value);
-  if (promiseDateFrom.value) params.append("promise_date_from", promiseDateFrom.value);
-  if (promiseDateTo.value) params.append("promise_date_to", promiseDateTo.value);
+  if (startDateRange.value?.start)
+    params.append("start_date_from", startDateRange.value.start);
+  if (startDateRange.value?.end) params.append("start_date_to", startDateRange.value.end);
+  if (promiseDateRange.value?.start)
+    params.append("promise_date_from", promiseDateRange.value.start);
+  if (promiseDateRange.value?.end)
+    params.append("promise_date_to", promiseDateRange.value.end);
   if (onlyMobile.value) params.append("only_mobile", "1");
   if (onlyValidated.value) params.append("only_validated", "1");
   params.append("per_page", perPage.value);
@@ -255,10 +276,8 @@ function resetFilters() {
   segmentId.value = null;
   clientId.value = null;
   search.value = "";
-  startDateFrom.value = "";
-  startDateTo.value = "";
-  promiseDateFrom.value = "";
-  promiseDateTo.value = "";
+  startDateRange.value = { start: null, end: null };
+  promiseDateRange.value = { start: null, end: null };
   onlyMobile.value = false;
   onlyValidated.value = false;
   contracts.value = {
@@ -448,9 +467,10 @@ const numbersCount = computed(() => {
             <div class="flex items-center justify-between">
               <div class="flex items-center gap-2">
                 <Checkbox
-                  :checked="form.delivery_report"
-                  @update:checked="(val) => (form.delivery_report = val)"
+                  :model-value="form.delivery_report"
+                  @update:model-value="(val) => (form.delivery_report = val)"
                   id="delivery-report"
+                  :disabled="true"
                 />
                 <Label for="delivery-report" class="cursor-pointer text-sm">
                   Zahtevaj delivery report
@@ -553,17 +573,15 @@ const numbersCount = computed(() => {
               </div>
               <div class="space-y-2">
                 <Label>Stranka</Label>
-                <Select v-model="clientId" @update:model-value="loadContracts()">
-                  <SelectTrigger>
-                    <SelectValue placeholder="Vse stranke" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem :value="null">Vse stranke</SelectItem>
-                    <SelectItem v-for="c in clients" :key="c.id" :value="c.id">
-                      {{ c.name }}
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
+                <AppCombobox
+                  v-model="clientId"
+                  :items="clientItems"
+                  placeholder="Vse stranke"
+                  search-placeholder="Išči stranko..."
+                  empty-text="Stranka ni najdena."
+                  button-class="w-full"
+                  @update:model-value="loadContracts()"
+                />
               </div>
               <div class="space-y-2">
                 <Label>Iskanje po referenci</Label>
@@ -586,29 +604,21 @@ const numbersCount = computed(() => {
               <div class="grid gap-4 md:grid-cols-2">
                 <div class="space-y-3">
                   <p class="text-sm text-muted-foreground">Datum začetka pogodbe</p>
-                  <div class="grid grid-cols-2 gap-2">
-                    <div class="space-y-2">
-                      <Label class="text-xs">Od</Label>
-                      <Input v-model="startDateFrom" type="date" />
-                    </div>
-                    <div class="space-y-2">
-                      <Label class="text-xs">Do</Label>
-                      <Input v-model="startDateTo" type="date" />
-                    </div>
-                  </div>
+                  <AppRangeDatePicker
+                    v-model="startDateRange"
+                    placeholder="Izberi obdobje"
+                    button-class="w-full"
+                    :number-of-months="1"
+                  />
                 </div>
                 <div class="space-y-3">
                   <p class="text-sm text-muted-foreground">Datum obljube plačila</p>
-                  <div class="grid grid-cols-2 gap-2">
-                    <div class="space-y-2">
-                      <Label class="text-xs">Od</Label>
-                      <Input v-model="promiseDateFrom" type="date" />
-                    </div>
-                    <div class="space-y-2">
-                      <Label class="text-xs">Do</Label>
-                      <Input v-model="promiseDateTo" type="date" />
-                    </div>
-                  </div>
+                  <AppRangeDatePicker
+                    v-model="promiseDateRange"
+                    placeholder="Izberi obdobje"
+                    button-class="w-full"
+                    :number-of-months="1"
+                  />
                 </div>
               </div>
             </div>
@@ -621,8 +631,8 @@ const numbersCount = computed(() => {
               <div class="flex flex-wrap gap-4">
                 <div class="flex items-center gap-2">
                   <Checkbox
-                    :checked="onlyMobile"
-                    @update:checked="
+                    :model-value="onlyMobile"
+                    @update:model-value="
                       (val) => {
                         onlyMobile = val;
                       }
@@ -635,8 +645,8 @@ const numbersCount = computed(() => {
                 </div>
                 <div class="flex items-center gap-2">
                   <Checkbox
-                    :checked="onlyValidated"
-                    @update:checked="
+                    :model-value="onlyValidated"
+                    @update:model-value="
                       (val) => {
                         onlyValidated = val;
                       }
@@ -653,11 +663,11 @@ const numbersCount = computed(() => {
             <!-- Action buttons -->
             <div class="flex items-center gap-2">
               <Button @click="loadContracts()">
-                <SearchIcon class="h-4 w-4 mr-2" />
+                <SearchIcon class="h-4 w-4" />
                 Išči pogodbe
               </Button>
               <Button @click="resetFilters" variant="outline">
-                <XCircleIcon class="h-4 w-4 mr-2" />
+                <XCircleIcon class="h-4 w-4" />
                 Počisti filtre
               </Button>
             </div>
@@ -669,7 +679,7 @@ const numbersCount = computed(() => {
           <CardHeader>
             <div class="flex items-center justify-between">
               <div>
-                <CardTitle>Rezultati iskanja</CardTitle>
+                <CardTitle>Rezultati iskanja (do 500 zapisov)</CardTitle>
                 <CardDescription v-if="contracts.meta.total > 0">
                   Najdeno {{ contracts.meta.total }}
                   {{
@@ -689,7 +699,7 @@ const numbersCount = computed(() => {
                   variant="secondary"
                   class="text-sm"
                 >
-                  <CheckCircle2Icon class="h-3 w-3 mr-1" />
+                  <CheckCircle2Icon class="h-3 w-3" />
                   Izbrano: {{ selectedContractIds.size }}
                 </Badge>
                 <Button
@@ -702,7 +712,7 @@ const numbersCount = computed(() => {
                   @click="submitCreateFromContracts"
                   :disabled="selectedContractIds.size === 0 || creatingFromContracts"
                 >
-                  <SaveIcon class="h-4 w-4 mr-2" />
+                  <SaveIcon class="h-4 w-4" />
                   Ustvari paket ({{ selectedContractIds.size }}
                   {{
                     selectedContractIds.size === 1

resources/js/Pages/Admin/Packages/Index.vue

@@ -18,6 +18,7 @@ import {
 import DataTableNew2 from "@/Components/DataTable/DataTableNew2.vue";
 import { PackageIcon, PlusIcon, Trash2Icon, EyeIcon } from "lucide-vue-next";
 import AppCard from "@/Components/app/ui/card/AppCard.vue";
+import { fmtDateTime } from "@/Utilities/functions";
 
 const props = defineProps({
   packages: { type: Object, required: true },
@@ -29,7 +30,6 @@ const showDeleteDialog = ref(false);
 
 const columns = [
   { accessorKey: "id", header: "ID" },
-  { accessorKey: "uuid", header: "UUID" },
   { accessorKey: "name", header: "Ime" },
   { accessorKey: "type", header: "Tip" },
   { accessorKey: "status", header: "Status" },
@@ -84,7 +84,7 @@ function confirmDelete() {
           </div>
           <Link :href="route('admin.packages.create')">
             <Button>
-              <PlusIcon class="h-4 w-4 mr-2" />
+              <PlusIcon class="h-4 w-4" />
               Nov paket
             </Button>
           </Link>
@@ -111,10 +111,6 @@ function confirmDelete() {
         :meta="packages"
         route-name="admin.packages.index"
       >
-        <template #cell-uuid="{ row }">
-          <span class="font-mono text-xs text-muted-foreground">{{ row.uuid }}</span>
-        </template>
-
         <template #cell-name="{ row }">
           <span class="text-sm">{{ row.name ?? "—" }}</span>
         </template>
@@ -128,7 +124,9 @@ function confirmDelete() {
         </template>
 
         <template #cell-finished_at="{ row }">
-          <span class="text-xs text-muted-foreground">{{ row.finished_at ?? "—" }}</span>
+          <span class="text-xs text-muted-foreground">{{
+            fmtDateTime(row.finished_at) ?? "—"
+          }}</span>
         </template>
 
         <template #cell-actions="{ row }">
@@ -157,8 +155,10 @@ function confirmDelete() {
           <AlertDialogTitle>Izbriši paket?</AlertDialogTitle>
           <AlertDialogDescription>
             Ali ste prepričani, da želite izbrisati paket
-            <strong v-if="packageToDelete">#{{ packageToDelete.id }} - {{ packageToDelete.name || 'Brez imena' }}</strong>?
-            Tega dejanja ni mogoče razveljaviti.
+            <strong v-if="packageToDelete"
+              >#{{ packageToDelete.id }} -
+              {{ packageToDelete.name || "Brez imena" }}</strong
+            >? Tega dejanja ni mogoče razveljaviti.
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>

resources/js/Pages/Cases/Partials/ActivityDrawer.vue

@@ -54,7 +54,9 @@ const form = useInertiaForm({
     props.actions[0].decisions.length > 0
       ? props.actions[0].decisions[0].id
       : null,
-  contract_uuids: props.contractUuid ? [props.contractUuid] : [],
+  contract_uuids: props.contractUuid ? [props.contractUuid] : (props.contracts && Array.isArray(props.contracts)
+    ? props.contracts.map((c) => c.uuid)
+    : []),
   send_auto_mail: true,
   attach_documents: false,
   attachment_document_ids: [],
@@ -104,7 +106,9 @@ watch(
   () => props.show,
   (visible) => {
     if (visible) {
-      form.contract_uuids = props.contractUuid ? [props.contractUuid] : [];
+      form.contract_uuids = props.contractUuid ? [props.contractUuid] : (props.contracts && Array.isArray(props.contracts)
+        ? props.contracts.map((c) => c.uuid)
+        : []);
     }
   }
 );
@@ -120,9 +124,10 @@ const store = async () => {
     return `${y}-${m}-${day}`;
   };
 
-  const contractUuids = Array.isArray(form.contract_uuids) && form.contract_uuids.length > 0
-    ? form.contract_uuids
-    : null;
+  const contractUuids =
+    Array.isArray(form.contract_uuids) && form.contract_uuids.length > 0
+      ? form.contract_uuids
+      : null;
 
   const isMultipleContracts = contractUuids && contractUuids.length > 1;
 
@@ -175,9 +180,9 @@ const autoMailRequiresContract = computed(() => {
 });
 
 const contractItems = computed(() => {
-  return pageContracts.value.map(c => ({
+  return pageContracts.value.map((c) => ({
     value: c.uuid,
-    label: `${c.reference}${c.name ? ` - ${c.name}` : ''}`
+    label: `${c.reference}${c.name ? ` - ${c.name}` : ""}`,
   }));
 });
 
@@ -188,7 +193,10 @@ const autoMailDisabled = computed(() => {
   if (form.contract_uuids && form.contract_uuids.length > 1) return true;
 
   // Disable if template requires contract but none selected
-  if (autoMailRequiresContract.value && (!form.contract_uuids || form.contract_uuids.length === 0)) {
+  if (
+    autoMailRequiresContract.value &&
+    (!form.contract_uuids || form.contract_uuids.length === 0)
+  ) {
     return true;
   }
 
@@ -202,7 +210,10 @@ const autoMailDisabledHint = computed(() => {
     return "Avtomatska e-pošta ni na voljo pri več pogodbah.";
   }
 
-  if (autoMailRequiresContract.value && (!form.contract_uuids || form.contract_uuids.length === 0)) {
+  if (
+    autoMailRequiresContract.value &&
+    (!form.contract_uuids || form.contract_uuids.length === 0)
+  ) {
     return "Ta e-poštna predloga zahteva pogodbo. Najprej izberite pogodbo.";
   }
 
@@ -333,133 +344,148 @@ watch(
     @confirm="store"
   >
     <form @submit.prevent="store">
-        <div class="space-y-4">
-          <div class="space-y-2">
-            <Label>Akcija</Label>
-            <Select v-model="form.action_id" :disabled="!actions || !actions.length">
-              <SelectTrigger>
-                <SelectValue placeholder="Izberi akcijo" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem v-for="a in actions" :key="a.id" :value="a.id">
-                  {{ a.name }}
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+      <div class="space-y-4">
+        <div class="space-y-2">
+          <Label>Akcija</Label>
+          <Select v-model="form.action_id" :disabled="!actions || !actions.length">
+            <SelectTrigger>
+              <SelectValue placeholder="Izberi akcijo" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem v-for="a in actions" :key="a.id" :value="a.id">
+                {{ a.name }}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
 
-          <div class="space-y-2">
-            <Label>Odločitev</Label>
-            <Select v-model="form.decision_id" :disabled="!decisions || !decisions.length">
-              <SelectTrigger>
-                <SelectValue placeholder="Izberi odločitev" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem v-for="d in decisions" :key="d.id" :value="d.id">
-                  {{ d.name }}
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+        <div class="space-y-2">
+          <Label>Odločitev</Label>
+          <Select v-model="form.decision_id" :disabled="!decisions || !decisions.length">
+            <SelectTrigger>
+              <SelectValue placeholder="Izberi odločitev" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem v-for="d in decisions" :key="d.id" :value="d.id">
+                {{ d.name }}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
 
-          <div class="space-y-2">
-            <Label>Pogodbe</Label>
-            <AppMultiSelect
-              v-model="form.contract_uuids"
-              :items="contractItems"
-              placeholder="Izberi pogodbe (neobvezno)"
-              search-placeholder="Išči pogodbo..."
-              empty-text="Ni pogodb."
-              :clearable="true"
-              :show-selected-chips="true"
-            />
-            <p v-if="form.contract_uuids && form.contract_uuids.length > 1" class="text-xs text-muted-foreground">
-              Bo ustvarjenih {{ form.contract_uuids.length }} aktivnosti (ena za vsako pogodbo).
-            </p>
-          </div>
+        <div class="space-y-2">
+          <Label>Pogodbe</Label>
+          <AppMultiSelect
+            v-model="form.contract_uuids"
+            :items="contractItems"
+            placeholder="Izberi pogodbe (neobvezno)"
+            search-placeholder="Išči pogodbo..."
+            empty-text="Ni pogodb."
+            :clearable="true"
+            :show-selected-chips="true"
+          />
+          <p
+            v-if="form.contract_uuids && form.contract_uuids.length > 1"
+            class="text-xs text-muted-foreground"
+          >
+            Bo ustvarjenih {{ form.contract_uuids.length }} aktivnosti (ena za vsako
+            pogodbo).
+          </p>
+        </div>
 
-          <div class="space-y-2">
-            <Label for="activityNote">Opomba</Label>
-            <Textarea
-              id="activityNote"
-              v-model="form.note"
-              class="block w-full"
-              placeholder="Opomba"
-            />
-          </div>
+        <div class="space-y-2">
+          <Label for="activityNote">Opomba</Label>
+          <Textarea
+            id="activityNote"
+            v-model="form.note"
+            class="block w-full max-h-72"
+            placeholder="Opomba"
+          />
+        </div>
 
-          <div class="space-y-2">
-            <Label for="activityDueDate">Datum zapadlosti</Label>
-            <DatePicker
-              id="activityDueDate"
-              v-model="form.due_date"
-              format="dd.MM.yyyy"
-              :error="form.errors.due_date"
-            />
-          </div>
+        <div class="space-y-2">
+          <Label for="activityDueDate">Datum zapadlosti</Label>
+          <DatePicker
+            id="activityDueDate"
+            v-model="form.due_date"
+            format="dd.MM.yyyy"
+            :error="form.errors.due_date"
+          />
+        </div>
 
-          <div class="space-y-2">
-            <Label for="activityAmount">Znesek</Label>
-            <CurrencyInput
-              id="activityAmount"
-              v-model="form.amount"
-              :precision="{ min: 0, max: 4 }"
-              placeholder="0,00"
-              class="w-full"
-            />
-          </div>
+        <div class="space-y-2">
+          <Label for="activityAmount">Znesek</Label>
+          <CurrencyInput
+            id="activityAmount"
+            v-model="form.amount"
+            :precision="{ min: 0, max: 4 }"
+            placeholder="0,00"
+            class="w-full"
+          />
+        </div>
 
-          <div v-if="showSendAutoMail()" class="space-y-2">
-            <div class="flex items-center justify-between">
-              <div class="flex items-center space-x-2">
-                <Switch
-                  v-model="form.send_auto_mail"
-                  :disabled="autoMailDisabled"
-                />
-                <Label class="cursor-pointer">Send auto email</Label>
-              </div>
+        <div v-if="showSendAutoMail()" class="space-y-2">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center space-x-2">
+              <Switch v-model="form.send_auto_mail" :disabled="autoMailDisabled" />
+              <Label class="cursor-pointer">Send auto email</Label>
             </div>
-            <p v-if="autoMailDisabled" class="text-xs text-amber-600">
-              {{ autoMailDisabledHint }}
-            </p>
+          </div>
+          <p v-if="autoMailDisabled" class="text-xs text-amber-600">
+            {{ autoMailDisabledHint }}
+          </p>
 
-            <div v-if="templateAllowsAttachments && form.contract_uuids && form.contract_uuids.length === 1" class="mt-3">
-              <label class="inline-flex items-center gap-2">
-                <Switch v-model="form.attach_documents" />
-                <span class="text-sm">Dodaj priponke iz izbrane pogodbe</span>
-              </label>
-              <div
-                v-if="form.attach_documents"
-                class="mt-2 border rounded p-2 max-h-48 overflow-auto"
-              >
-                <div class="text-xs text-gray-600 mb-2">
-                  Izberite dokumente, ki bodo poslani kot priponke:
-                </div>
-                <div class="space-y-1">
-                  <template v-for="c in pageContracts" :key="c.uuid || c.id">
-                    <div v-if="c.uuid === form.contract_uuids[0]">
-                      <div class="font-medium text-sm text-gray-700 mb-1">
-                        Pogodba {{ c.reference }}
-                      </div>
-                      <div class="space-y-1">
-                        <div
-                          v-for="doc in availableContractDocs"
-                          :key="doc.uuid || doc.id"
-                          class="flex items-center gap-2 text-sm"
-                        >
-                          <Switch
-                            :model-value="form.attachment_document_ids.includes(doc.id)"
-                            @update:model-value="(checked) => {
+          <div
+            v-if="
+              templateAllowsAttachments &&
+              form.contract_uuids &&
+              form.contract_uuids.length === 1
+            "
+            class="mt-3"
+          >
+            <label class="inline-flex items-center gap-2">
+              <Switch v-model="form.attach_documents" />
+              <span class="text-sm">Dodaj priponke iz izbrane pogodbe</span>
+            </label>
+            <div
+              v-if="form.attach_documents"
+              class="mt-2 border rounded p-2 max-h-48 overflow-auto"
+            >
+              <div class="text-xs text-gray-600 mb-2">
+                Izberite dokumente, ki bodo poslani kot priponke:
+              </div>
+              <div class="space-y-1">
+                <template v-for="c in pageContracts" :key="c.uuid || c.id">
+                  <div v-if="c.uuid === form.contract_uuids[0]">
+                    <div class="font-medium text-sm text-gray-700 mb-1">
+                      Pogodba {{ c.reference }}
+                    </div>
+                    <div class="space-y-1">
+                      <div
+                        v-for="doc in availableContractDocs"
+                        :key="doc.uuid || doc.id"
+                        class="flex items-center max-w-sm gap-2 text-sm"
+                      >
+                        <Switch
+                          :model-value="form.attachment_document_ids.includes(doc.id)"
+                          @update:model-value="
+                            (checked) => {
                               if (checked) {
                                 if (!form.attachment_document_ids.includes(doc.id)) {
                                   form.attachment_document_ids.push(doc.id);
                                 }
                               } else {
-                                form.attachment_document_ids = form.attachment_document_ids.filter(id => id !== doc.id);
+                                form.attachment_document_ids = form.attachment_document_ids.filter(
+                                  (id) => id !== doc.id
+                                );
                               }
-                            }"
-                          />
-                          <span>{{ doc.original_name || doc.name }}</span>
+                            }
+                          "
+                        />
+                        <div class="wrap-anywhere">
+                          <p>
+                            {{ doc.original_name || doc.name }}
+                          </p>
                           <span class="text-xs text-gray-400"
                             >({{ doc.extension?.toUpperCase() || "" }},
                             {{ (doc.size / 1024 / 1024).toFixed(2) }} MB)</span
@@ -467,22 +493,23 @@ watch(
                         </div>
                       </div>
                     </div>
-                  </template>
-                  <div
-                    v-if="availableContractDocs.length === 0"
-                    class="text-sm text-gray-500"
-                  >
-                    Ni dokumentov, povezanih s to pogodbo.
                   </div>
+                </template>
+                <div
+                  v-if="availableContractDocs.length === 0"
+                  class="text-sm text-gray-500"
+                >
+                  Ni dokumentov, povezanih s to pogodbo.
                 </div>
               </div>
             </div>
           </div>
-
-          <ActionMessage :on="form.recentlySuccessful" class="text-sm text-green-600">
-            Shranjuje.
-          </ActionMessage>
         </div>
-      </form>
-    </CreateDialog>
+
+        <ActionMessage :on="form.recentlySuccessful" class="text-sm text-green-600">
+          Shranjuje.
+        </ActionMessage>
+      </div>
+    </form>
+  </CreateDialog>
 </template>

resources/js/Pages/Cases/Show.vue

@@ -107,7 +107,7 @@ const onDocSaved = () => {
   router.reload({ only: ["documents"] });
 };
 
-const viewer = ref({ open: false, src: "", title: "" });
+const viewer = ref({ open: false, src: "", title: "", mimeType: "", filename: "" });
 const openViewer = (doc) => {
   const kind = classifyDocument(doc);
   const isContractDoc = (doc?.documentable_type || "").toLowerCase().includes("contract");
@@ -122,7 +122,13 @@ const openViewer = (doc) => {
             client_case: props.client_case.uuid,
             document: doc.uuid,
           });
-    viewer.value = { open: true, src: url, title: doc.original_name || doc.name };
+    viewer.value = {
+      open: true,
+      src: url,
+      title: doc.name || doc.original_name,
+      mimeType: doc.mime_type || "",
+      filename: doc.original_name || doc.name || "",
+    };
   } else {
     const url =
       isContractDoc && doc.contract_uuid
@@ -140,6 +146,8 @@ const openViewer = (doc) => {
 const closeViewer = () => {
   viewer.value.open = false;
   viewer.value.src = "";
+  viewer.value.mimeType = "";
+  viewer.value.filename = "";
 };
 
 const clientDetails = ref(false);
@@ -482,6 +490,8 @@ const submitAttachSegment = () => {
       :show="viewer.open"
       :src="viewer.src"
       :title="viewer.title"
+      :mime-type="viewer.mimeType"
+      :filename="viewer.filename"
       @close="closeViewer"
     />
   </AppLayout>

resources/js/Pages/Client/Index.vue

@@ -6,10 +6,8 @@ import CreateDialog from "@/Components/Dialogs/CreateDialog.vue";
 import DataTable from "@/Components/DataTable/DataTableNew2.vue";
 import { hasPermission } from "@/Services/permissions";
 import { Button } from "@/Components/ui/button";
-import { Card, CardHeader, CardTitle, CardContent } from "@/Components/ui/card";
+import { CardTitle } from "@/Components/ui/card";
 import { Input } from "@/Components/ui/input";
-import ActionMenuItem from "@/Components/DataTable/ActionMenuItem.vue";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import {
   Select,
   SelectContent,
@@ -27,8 +25,7 @@ import {
 import { useForm } from "vee-validate";
 import { toTypedSchema } from "@vee-validate/zod";
 import * as z from "zod";
-import ActionMessage from "@/Components/ActionMessage.vue";
-import { Mail, Plug2Icon, Plus, UsersRoundIcon } from "lucide-vue-next";
+import { Plus, UsersRoundIcon } from "lucide-vue-next";
 import { Separator } from "@/Components/ui/separator";
 import AppCard from "@/Components/app/ui/card/AppCard.vue";
 
@@ -162,7 +159,7 @@ const fmtCurrency = (v) => {
 </script>
 
 <template>
-  <AppLayout>
+  <AppLayout title="Clients">
     <template #header> </template>
     <div class="py-6">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
@@ -201,6 +198,7 @@ const fmtCurrency = (v) => {
             :show-pagination="false"
             :show-toolbar="true"
             :hoverable="true"
+            :page-size="100"
             row-key="uuid"
             :striped="true"
             empty-text="Ni najdenih naročnikov."

resources/js/Pages/Imports/Create.vue

@@ -245,7 +245,7 @@ async function startImport() {
 
             <!-- Has Header Checkbox -->
             <div class="flex items-center space-x-2">
-              <Checkbox id="has-header" v-model:checked="form.has_header" />
+              <Checkbox id="has-header" :model-value="form.has_header" />
               <Label
                 for="has-header"
                 class="cursor-pointer text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"

resources/js/Pages/Imports/Import.vue

@@ -1094,6 +1094,16 @@ async function fetchEvents() {
   }
 }
 
+async function downloadImport() {
+  if (!importId.value) return;
+  try {
+    const url = route("imports.download", { import: importId.value });
+    window.location.href = url;
+  } catch (e) {
+    console.error("Download failed", e);
+  }
+}
+
 // Simulation (generic or payments) state
 const showPaymentSim = ref(false);
 const paymentSimLoading = ref(false);
@@ -1307,7 +1317,8 @@ async function fetchSimulation() {
                 <Checkbox
                   :id="'show-missing-checkbox'"
                   :checked="showMissingEnabled"
-                  @update:checked="
+                  :model-value="showMissingEnabled"
+                  @update:model-value="
                     (val) => {
                       showMissingEnabled = val;
                       saveImportOptions();
@@ -1339,6 +1350,7 @@ async function fetchSimulation() {
             :can-process="canProcess"
             :selected-mappings-count="selectedMappingsCount"
             @preview="openPreview"
+            @download="downloadImport"
             @save-mappings="saveMappings"
             @process-import="processImport"
             @simulate="openSimulation"

resources/js/Pages/Imports/Partials/ActionsBar.vue

@@ -4,9 +4,10 @@ import {
   ArrowPathIcon,
   BeakerIcon,
   ArrowDownOnSquareIcon,
+  ArrowDownTrayIcon,
 } from "@heroicons/vue/24/outline";
-import { Button } from '@/Components/ui/button';
-import { Badge } from '@/Components/ui/badge';
+import { Button } from "@/Components/ui/button";
+import { Badge } from "@/Components/ui/badge";
 
 const props = defineProps({
   importId: [Number, String],
@@ -16,54 +17,68 @@ const props = defineProps({
   canProcess: Boolean,
   selectedMappingsCount: Number,
 });
-const emits = defineEmits(["preview", "save-mappings", "process-import", "simulate"]);
+const emits = defineEmits([
+  "preview",
+  "save-mappings",
+  "process-import",
+  "simulate",
+  "download",
+]);
 </script>
 <template>
-  <div class="flex flex-wrap gap-2 items-center" v-if="!isCompleted">
+  <div class="flex flex-wrap gap-2 items-center">
+    <!-- Download button - always visible -->
     <Button
       variant="secondary"
-      @click.prevent="$emit('preview')"
+      @click.prevent="$emit('download')"
       :disabled="!importId"
+      title="Preznesi originalno uvozno datoteko"
     >
-      <EyeIcon class="h-4 w-4 mr-2" />
-      Predogled vrstic
-    </Button>
-    <Button
-      variant="default"
-      class="bg-orange-600 hover:bg-orange-700"
-      @click.prevent="$emit('save-mappings')"
-      :disabled="!importId || processing || savingMappings || isCompleted"
-      title="Shrani preslikave za ta uvoz"
-    >
-      <span
-        v-if="savingMappings"
-        class="inline-block h-4 w-4 mr-2 border-2 border-white/70 border-t-transparent rounded-full animate-spin"
-      ></span>
-      <ArrowPathIcon v-else class="h-4 w-4 mr-2" />
-      <span>Shrani preslikave</span>
-      <Badge
-        v-if="selectedMappingsCount"
-        variant="secondary"
-        class="ml-2 text-xs"
-      >{{ selectedMappingsCount }}</Badge>
-    </Button>
-    <Button
-      variant="default"
-      class="bg-purple-600 hover:bg-purple-700"
-      @click.prevent="$emit('process-import')"
-      :disabled="!canProcess"
-    >
-      <BeakerIcon class="h-4 w-4 mr-2" />
-      {{ processing ? "Obdelava…" : "Obdelaj uvoz" }}
-    </Button>
-    <Button
-      variant="default"
-      class="bg-blue-600 hover:bg-blue-700"
-      @click.prevent="$emit('simulate')"
-      :disabled="!importId || processing"
-    >
-      <ArrowDownOnSquareIcon class="h-4 w-4 mr-2" />
-      Simulacija vnosa
+      <ArrowDownTrayIcon class="h-4 w-4" />
+      Prenos datoteko
     </Button>
+
+    <!-- Other action buttons - only when not completed -->
+    <div class="flex flex-wrap gap-2 items-center" v-if="!isCompleted">
+      <Button variant="secondary" @click.prevent="$emit('preview')" :disabled="!importId">
+        <EyeIcon class="h-4 w-4 mr-2" />
+        Predogled vrstic
+      </Button>
+      <Button
+        variant="default"
+        class="bg-orange-600 hover:bg-orange-700"
+        @click.prevent="$emit('save-mappings')"
+        :disabled="!importId || processing || savingMappings || isCompleted"
+        title="Shrani preslikave za ta uvoz"
+      >
+        <span
+          v-if="savingMappings"
+          class="inline-block h-4 w-4 mr-2 border-2 border-white/70 border-t-transparent rounded-full animate-spin"
+        ></span>
+        <ArrowPathIcon v-else class="h-4 w-4 mr-2" />
+        <span>Shrani preslikave</span>
+        <Badge v-if="selectedMappingsCount" variant="secondary" class="ml-2 text-xs">{{
+          selectedMappingsCount
+        }}</Badge>
+      </Button>
+      <Button
+        variant="default"
+        class="bg-purple-600 hover:bg-purple-700"
+        @click.prevent="$emit('process-import')"
+        :disabled="!canProcess"
+      >
+        <BeakerIcon class="h-4 w-4 mr-2" />
+        {{ processing ? "Obdelava…" : "Obdelaj uvoz" }}
+      </Button>
+      <Button
+        variant="default"
+        class="bg-blue-600 hover:bg-blue-700"
+        @click.prevent="$emit('simulate')"
+        :disabled="!importId || processing"
+      >
+        <ArrowDownOnSquareIcon class="h-4 w-4 mr-2" />
+        Simulacija vnosa
+      </Button>
+    </div>
   </div>
 </template>

resources/js/Pages/Imports/Partials/MappingTable.vue

@@ -1,10 +1,24 @@
 <script setup>
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/Components/ui/table';
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/Components/ui/select';
-import { Checkbox } from '@/Components/ui/checkbox';
-import { Input } from '@/Components/ui/input';
-import { Badge } from '@/Components/ui/badge';
-import { ScrollArea } from '@/Components/ui/scroll-area';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/Components/ui/table";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/Components/ui/select";
+import { Checkbox } from "@/Components/ui/checkbox";
+import { Input } from "@/Components/ui/input";
+import { Badge } from "@/Components/ui/badge";
+import { ScrollArea } from "@/Components/ui/scroll-area";
 
 const props = defineProps({
   rows: Array,
@@ -19,12 +33,12 @@ const props = defineProps({
   mappingError: String,
   show: { type: Boolean, default: true },
   fieldsForEntity: Function,
-})
-const emits = defineEmits(['update:rows','save'])
+});
+const emits = defineEmits(["update:rows", "save"]);
 
-function duplicateTarget(row){
-  if(!row || !row.entity || !row.field) return false
-  return props.duplicateTargets?.has?.(row.entity + '.' + row.field) || false
+function duplicateTarget(row) {
+  if (!row || !row.entity || !row.field) return false;
+  return props.duplicateTargets?.has?.(row.entity + "." + row.field) || false;
 }
 </script>
 <template>
@@ -32,137 +46,192 @@ function duplicateTarget(row){
     <div class="flex items-center justify-between mb-2">
       <h3 class="font-semibold">
         Detected Columns
-        <Badge variant="outline" class="ml-2 text-[10px]">{{ detected?.has_header ? 'header' : 'positional' }}</Badge>
+        <Badge variant="outline" class="ml-2 text-[10px]">{{
+          detected?.has_header ? "header" : "positional"
+        }}</Badge>
       </h3>
       <div class="text-xs text-muted-foreground">
-        detected: {{ detected?.columns?.length || 0 }}, rows: {{ rows.length }}, delimiter: {{ detected?.delimiter || 'auto' }}
+        detected: {{ detected?.columns?.length || 0 }}, rows: {{ rows.length }},
+        delimiter: {{ detected?.delimiter || "auto" }}
       </div>
     </div>
-    <p v-if="detectedNote" class="text-xs text-muted-foreground mb-2">{{ detectedNote }}</p>
+    <p v-if="detectedNote" class="text-xs text-muted-foreground mb-2">
+      {{ detectedNote }}
+    </p>
     <div class="relative border rounded-lg">
       <ScrollArea class="h-[420px]">
         <Table>
           <TableHeader class="sticky top-0 z-10 bg-background">
             <TableRow class="hover:bg-transparent">
-              <TableHead class="w-[180px] bg-muted/95 backdrop-blur">Source column</TableHead>
+              <TableHead class="w-[180px] bg-muted/95 backdrop-blur"
+                >Source column</TableHead
+              >
               <TableHead class="w-[150px] bg-muted/95 backdrop-blur">Entity</TableHead>
               <TableHead class="w-[150px] bg-muted/95 backdrop-blur">Field</TableHead>
               <TableHead class="w-[140px] bg-muted/95 backdrop-blur">Meta key</TableHead>
               <TableHead class="w-[120px] bg-muted/95 backdrop-blur">Meta type</TableHead>
               <TableHead class="w-[120px] bg-muted/95 backdrop-blur">Transform</TableHead>
-              <TableHead class="w-[130px] bg-muted/95 backdrop-blur">Apply mode</TableHead>
-              <TableHead class="w-[60px] text-center bg-muted/95 backdrop-blur">Skip</TableHead>
+              <TableHead class="w-[130px] bg-muted/95 backdrop-blur"
+                >Apply mode</TableHead
+              >
+              <TableHead class="w-[60px] text-center bg-muted/95 backdrop-blur"
+                >Skip</TableHead
+              >
             </TableRow>
           </TableHeader>
           <TableBody>
-            <TableRow v-for="(row, idx) in rows" :key="idx" :class="duplicateTarget(row) ? 'bg-destructive/10' : ''">
-            <TableCell class="font-medium">{{ row.source_column }}</TableCell>
-            <TableCell>
-              <Select :model-value="row.entity || ''" @update:model-value="(val) => row.entity = val || ''" :disabled="isCompleted">
-                <SelectTrigger class="h-8 text-xs">
-                  <SelectValue placeholder="Select entity..." />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectItem v-for="opt in entityOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </TableCell>
-            <TableCell>
-              <Select 
-                :model-value="row.field || ''" 
-                @update:model-value="(val) => row.field = val || ''" 
-                :disabled="isCompleted"
-                :class="duplicateTarget(row) ? 'border-destructive' : ''"
-              >
-                <SelectTrigger class="h-8 text-xs" :class="duplicateTarget(row) ? 'border-destructive bg-destructive/10' : ''">
-                  <SelectValue placeholder="Select field..." />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectItem v-for="f in fieldsForEntity(row.entity)" :key="f" :value="f">{{ f }}</SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </TableCell>
-            <TableCell>
-              <Input
-                v-if="row.field === 'meta'"
-                v-model="(row.options ||= {}).key"
-                type="text"
-                class="h-8 text-xs"
-                placeholder="e.g. monthly_rent"
-                :disabled="isCompleted"
-              />
-              <span v-else class="text-muted-foreground text-xs">—</span>
-            </TableCell>
-            <TableCell>
-              <Select
-                v-if="row.field === 'meta'"
-                :model-value="(row.options ||= {}).type || 'string'"
-                @update:model-value="(val) => (row.options ||= {}).type = val"
-                :disabled="isCompleted"
-              >
-                <SelectTrigger class="h-8 text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectItem value="string">string</SelectItem>
-                    <SelectItem value="number">number</SelectItem>
-                    <SelectItem value="date">date</SelectItem>
-                    <SelectItem value="boolean">boolean</SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-              <span v-else class="text-muted-foreground text-xs">—</span>
-            </TableCell>
-            <TableCell>
-              <Select :model-value="row.transform || 'none'" @update:model-value="(val) => row.transform = val === 'none' ? '' : val" :disabled="isCompleted">
-                <SelectTrigger class="h-8 text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectItem value="none">None</SelectItem>
-                    <SelectItem value="trim">Trim</SelectItem>
-                    <SelectItem value="upper">Uppercase</SelectItem>
-                    <SelectItem value="lower">Lowercase</SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </TableCell>
-            <TableCell>
-              <Select :model-value="row.apply_mode || 'both'" @update:model-value="(val) => row.apply_mode = val" :disabled="isCompleted">
-                <SelectTrigger class="h-8 text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectItem value="keyref">Keyref</SelectItem>
-                    <SelectItem value="both">Both</SelectItem>
-                    <SelectItem value="insert">Insert only</SelectItem>
-                    <SelectItem value="update">Update only</SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </TableCell>
-            <TableCell class="text-center">
-              <Checkbox :checked="row.skip" @update:checked="(val) => row.skip = val" :disabled="isCompleted" />
-            </TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
+            <TableRow
+              v-for="(row, idx) in rows"
+              :key="idx"
+              :class="duplicateTarget(row) ? 'bg-destructive/10' : ''"
+            >
+              <TableCell class="font-medium">{{ row.source_column }}</TableCell>
+              <TableCell>
+                <Select
+                  :model-value="row.entity || ''"
+                  @update:model-value="(val) => (row.entity = val || '')"
+                  :disabled="isCompleted"
+                >
+                  <SelectTrigger class="h-8 text-xs">
+                    <SelectValue placeholder="Select entity..." />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectItem
+                        v-for="opt in entityOptions"
+                        :key="opt.value"
+                        :value="opt.value"
+                        >{{ opt.label }}</SelectItem
+                      >
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </TableCell>
+              <TableCell>
+                <Select
+                  :model-value="row.field || ''"
+                  @update:model-value="(val) => (row.field = val || '')"
+                  :disabled="isCompleted"
+                  :class="duplicateTarget(row) ? 'border-destructive' : ''"
+                >
+                  <SelectTrigger
+                    class="h-8 text-xs"
+                    :class="
+                      duplicateTarget(row) ? 'border-destructive bg-destructive/10' : ''
+                    "
+                  >
+                    <SelectValue placeholder="Select field..." />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectItem
+                        v-for="f in fieldsForEntity(row.entity)"
+                        :key="f"
+                        :value="f"
+                        >{{ f }}</SelectItem
+                      >
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </TableCell>
+              <TableCell>
+                <Input
+                  v-if="row.field === 'meta'"
+                  v-model="(row.options ||= {}).key"
+                  type="text"
+                  class="h-8 text-xs"
+                  placeholder="e.g. monthly_rent"
+                  :disabled="isCompleted"
+                />
+                <span v-else class="text-muted-foreground text-xs">—</span>
+              </TableCell>
+              <TableCell>
+                <Select
+                  v-if="row.field === 'meta'"
+                  :model-value="(row.options ||= {}).type || 'string'"
+                  @update:model-value="(val) => ((row.options ||= {}).type = val)"
+                  :disabled="isCompleted"
+                >
+                  <SelectTrigger class="h-8 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectItem value="string">string</SelectItem>
+                      <SelectItem value="number">number</SelectItem>
+                      <SelectItem value="date">date</SelectItem>
+                      <SelectItem value="boolean">boolean</SelectItem>
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+                <span v-else class="text-muted-foreground text-xs">—</span>
+              </TableCell>
+              <TableCell>
+                <Select
+                  :model-value="row.transform || 'none'"
+                  @update:model-value="
+                    (val) => (row.transform = val === 'none' ? '' : val)
+                  "
+                  :disabled="isCompleted"
+                >
+                  <SelectTrigger class="h-8 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectItem value="none">None</SelectItem>
+                      <SelectItem value="trim">Trim</SelectItem>
+                      <SelectItem value="upper">Uppercase</SelectItem>
+                      <SelectItem value="lower">Lowercase</SelectItem>
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </TableCell>
+              <TableCell>
+                <Select
+                  :model-value="row.apply_mode || 'both'"
+                  @update:model-value="(val) => (row.apply_mode = val)"
+                  :disabled="isCompleted"
+                >
+                  <SelectTrigger class="h-8 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectItem value="keyref">Keyref</SelectItem>
+                      <SelectItem value="both">Both</SelectItem>
+                      <SelectItem value="insert">Insert only</SelectItem>
+                      <SelectItem value="update">Update only</SelectItem>
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </TableCell>
+              <TableCell class="text-center">
+                <Checkbox
+                  :model-value="row.skip"
+                  @update:model-value="(val) => (row.skip = val)"
+                  :disabled="isCompleted"
+                />
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
       </ScrollArea>
     </div>
-    <div v-if="mappingSaved" class="text-sm text-emerald-700 mt-2 flex items-center gap-2">
+    <div
+      v-if="mappingSaved"
+      class="text-sm text-emerald-700 mt-2 flex items-center gap-2"
+    >
       <Badge variant="default" class="bg-emerald-600">Saved</Badge>
       <span>{{ mappingSavedCount }} mappings saved</span>
     </div>
-    <div v-else-if="mappingError" class="text-sm text-destructive mt-2">{{ mappingError }}</div>
+    <div v-else-if="mappingError" class="text-sm text-destructive mt-2">
+      {{ mappingError }}
+    </div>
     <div v-if="missingCritical?.length" class="mt-2">
-      <Badge variant="destructive" class="text-xs">Missing critical: {{ missingCritical.join(', ') }}</Badge>
+      <Badge variant="destructive" class="text-xs"
+        >Missing critical: {{ missingCritical.join(", ") }}</Badge
+      >
     </div>
   </div>
 </template>

resources/js/Pages/Phone/Case/Index.vue

@@ -67,7 +67,7 @@ const props = defineProps({
   completed_mode: { type: Boolean, default: false },
 });
 
-const viewer = reactive({ open: false, src: "", title: "" });
+const viewer = reactive({ open: false, src: "", title: "", mimeType: "", filename: "" });
 function openViewer(doc) {
   const kind = classifyDocument(doc);
   const isContractDoc = (doc?.documentable_type || "").toLowerCase().includes("contract");
@@ -85,6 +85,8 @@ function openViewer(doc) {
     viewer.open = true;
     viewer.src = url;
     viewer.title = doc.original_name || doc.name;
+    viewer.mimeType = doc.mime_type || "";
+    viewer.filename = doc.original_name || doc.name || "";
   } else {
     const url =
       isContractDoc && doc.contract_uuid
@@ -102,6 +104,8 @@ function openViewer(doc) {
 function closeViewer() {
   viewer.open = false;
   viewer.src = "";
+  viewer.mimeType = "";
+  viewer.filename = "";
 }
 
 function formatAmount(val) {
@@ -610,6 +614,8 @@ const clientSummary = computed(() => {
       :show="viewer.open"
       :src="viewer.src"
       :title="viewer.title"
+      :mime-type="viewer.mimeType"
+      :filename="viewer.filename"
       @close="closeViewer"
     />
     <ActivityDrawer

resources/js/Pages/Testing/Index.vue

@@ -1,13 +1,21 @@
 <script setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import AppLayout from "@/Layouts/AppLayout.vue";
 import DataTableClient from "@/Components/DataTable/DataTableClient.vue";
 import DataTableExample from "../Examples/DataTableExample.vue";
+import { useForm } from "@inertiajs/vue3";
+import Checkbox from "@/Components/ui/checkbox/Checkbox.vue";
 
 const props = defineProps({
   example: { type: String, default: "Demo" },
 });
 
+const checkboxValue = ref(false);
+
+const testForm = useForm({
+  allowed: false,
+});
+
 // Dummy columns
 const columns = [
   { key: "id", label: "ID", sortable: true, class: "w-16" },
@@ -53,10 +61,17 @@ function onRowClick(row) {
   // no-op demo; could show toast or details
   console.debug("Row clicked:", row);
 }
+
+watch(
+  () => testForm.allowed,
+  (newVal) => {
+    console.log(newVal);
+  }
+);
 </script>
 
 <template>
-  
-        <DataTableExample></DataTableExample>
-    
+  <AppLayout>
+    <Checkbox v-model:checked="testForm.allowed" />
+  </AppLayout>
 </template>

routes/web.php

@@ -463,6 +463,7 @@
         Route::get('imports/{import}/missing-keyref-rows', [ImportController::class, 'missingKeyrefRows'])->name('imports.missing-keyref-rows');
         Route::get('imports/{import}/missing-keyref-csv', [ImportController::class, 'exportMissingKeyrefCsv'])->name('imports.missing-keyref-csv');
         Route::get('imports/{import}/preview', [ImportController::class, 'preview'])->name('imports.preview');
+        Route::get('imports/{import}/download', [ImportController::class, 'download'])->name('imports.download');
         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

tests/Feature/ImportDownloadTest.php

@@ -0,0 +1,72 @@
+<?php
+
+use App\Models\Import;
+use App\Models\User;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Str;
+
+it('downloads the original import file', function () {
+    // Create a test file
+    $uuid = (string) Str::uuid();
+    $disk = 'local';
+    $path = "imports/{$uuid}.csv";
+    $csv = "email,reference\nalpha@example.com,REF-1\n";
+    Storage::disk($disk)->put($path, $csv);
+
+    // Authenticate a user
+    $user = User::factory()->create();
+    Auth::login($user);
+
+    // Create import record
+    $import = Import::create([
+        'uuid' => $uuid,
+        'user_id' => $user->id,
+        'import_template_id' => null,
+        'client_id' => null,
+        'source_type' => 'csv',
+        'file_name' => basename($path),
+        'original_name' => 'test-import.csv',
+        'disk' => $disk,
+        'path' => $path,
+        'size' => strlen($csv),
+        'status' => 'uploaded',
+        'meta' => ['has_header' => true],
+    ]);
+
+    // Test download endpoint
+    $response = test()->get(route('imports.download', ['import' => $import->id]));
+
+    $response->assertSuccessful();
+    expect($response->headers->get('Content-Disposition'))->toContain('test-import.csv');
+    
+    // Clean up
+    Storage::disk($disk)->delete($path);
+});
+
+it('returns 404 when file does not exist', function () {
+    // Authenticate a user
+    $user = User::factory()->create();
+    Auth::login($user);
+
+    // Create import record with non-existent file
+    $import = Import::create([
+        'uuid' => (string) Str::uuid(),
+        'user_id' => $user->id,
+        'import_template_id' => null,
+        'client_id' => null,
+        'source_type' => 'csv',
+        'file_name' => 'missing.csv',
+        'original_name' => 'missing.csv',
+        'disk' => 'local',
+        'path' => 'imports/nonexistent.csv',
+        'size' => 0,
+        'status' => 'uploaded',
+        'meta' => ['has_header' => true],
+    ]);
+
+    // Test download endpoint
+    $response = test()->get(route('imports.download', ['import' => $import->id]));
+
+    $response->assertNotFound();
+});