changes to UI mostly

2025-09-30 22:00:03 +02:00
parent 53917f2ca0
commit db99a57030
18 changed files with 2169 additions and 777 deletions
@@ -1,20 +1,20 @@
 <script setup>
-import AppPhoneLayout from '@/Layouts/AppPhoneLayout.vue';
-import SectionTitle from '@/Components/SectionTitle.vue';
-import PersonDetailPhone from '@/Components/PersonDetailPhone.vue';
+import AppPhoneLayout from "@/Layouts/AppPhoneLayout.vue";
+import SectionTitle from "@/Components/SectionTitle.vue";
+import PersonDetailPhone from "@/Components/PersonDetailPhone.vue";
 // Removed table-based component for phone; render a list instead
 // import DocumentsTable from '@/Components/DocumentsTable.vue';
-import DocumentViewerDialog from '@/Components/DocumentViewerDialog.vue';
-import { classifyDocument } from '@/Services/documents';
-import { reactive, ref, computed } from 'vue';
-import DialogModal from '@/Components/DialogModal.vue';
-import InputLabel from '@/Components/InputLabel.vue';
-import TextInput from '@/Components/TextInput.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
-import BasicButton from '@/Components/buttons/BasicButton.vue';
-import { useForm } from '@inertiajs/vue3';
-import ActivityDrawer from '@/Pages/Cases/Partials/ActivityDrawer.vue';
-import ConfirmationModal from '@/Components/ConfirmationModal.vue';
+import DocumentViewerDialog from "@/Components/DocumentViewerDialog.vue";
+import { classifyDocument } from "@/Services/documents";
+import { reactive, ref, computed } from "vue";
+import DialogModal from "@/Components/DialogModal.vue";
+import InputLabel from "@/Components/InputLabel.vue";
+import TextInput from "@/Components/TextInput.vue";
+import PrimaryButton from "@/Components/PrimaryButton.vue";
+import BasicButton from "@/Components/buttons/BasicButton.vue";
+import { useForm } from "@inertiajs/vue3";
+import ActivityDrawer from "@/Pages/Cases/Partials/ActivityDrawer.vue";
+import ConfirmationModal from "@/Components/ConfirmationModal.vue";

 const props = defineProps({
  client: Object,
@@ -26,29 +26,51 @@ const props = defineProps({
  activities: Array,
 });

-const viewer = reactive({ open: false, src: '', title: '' });
+const viewer = reactive({ open: false, src: "", title: "" });
 function openViewer(doc) {
  const kind = classifyDocument(doc);
-  const isContractDoc = (doc?.documentable_type || '').toLowerCase().includes('contract');
-  if (kind === 'preview') {
-    const url = isContractDoc && doc.contract_uuid
-      ? route('contract.document.view', { contract: doc.contract_uuid, document: doc.uuid })
-      : route('clientCase.document.view', { client_case: props.client_case.uuid, document: doc.uuid });
-    viewer.open = true; viewer.src = url; viewer.title = doc.original_name || doc.name;
+  const isContractDoc = (doc?.documentable_type || "").toLowerCase().includes("contract");
+  if (kind === "preview") {
+    const url =
+      isContractDoc && doc.contract_uuid
+        ? route("contract.document.view", {
+            contract: doc.contract_uuid,
+            document: doc.uuid,
+          })
+        : route("clientCase.document.view", {
+            client_case: props.client_case.uuid,
+            document: doc.uuid,
+          });
+    viewer.open = true;
+    viewer.src = url;
+    viewer.title = doc.original_name || doc.name;
  } else {
-    const url = isContractDoc && doc.contract_uuid
-      ? route('contract.document.download', { contract: doc.contract_uuid, document: doc.uuid })
-      : route('clientCase.document.download', { client_case: props.client_case.uuid, document: doc.uuid });
+    const url =
+      isContractDoc && doc.contract_uuid
+        ? route("contract.document.download", {
+            contract: doc.contract_uuid,
+            document: doc.uuid,
+          })
+        : route("clientCase.document.download", {
+            client_case: props.client_case.uuid,
+            document: doc.uuid,
+          });
    window.location.href = url;
  }
 }
-function closeViewer() { viewer.open = false; viewer.src = ''; }
+function closeViewer() {
+  viewer.open = false;
+  viewer.src = "";
+}

 function formatAmount(val) {
-  if (val === null || val === undefined) return '0,00';
-  const num = typeof val === 'number' ? val : parseFloat(val);
+  if (val === null || val === undefined) return "0,00";
+  const num = typeof val === "number" ? val : parseFloat(val);
  if (Number.isNaN(num)) return String(val);
-  return num.toLocaleString('sl-SI', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+  return num.toLocaleString("sl-SI", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
 }

 // Activity drawer state
@@ -58,40 +80,51 @@ const openDrawerAddActivity = (c = null) => {
  activityContractUuid.value = c?.uuid ?? null;
  drawerAddActivity.value = true;
 };
-const closeDrawer = () => { drawerAddActivity.value = false; };
+const closeDrawer = () => {
+  drawerAddActivity.value = false;
+};

 // Document upload state
 const docDialogOpen = ref(false);
 const docForm = useForm({
  file: null,
-  name: '',
-  description: '',
+  name: "",
+  description: "",
  is_public: true,
  contract_uuid: null,
 });
 const onPickDocument = (e) => {
  const f = e?.target?.files?.[0];
-  if (f) { docForm.file = f; }
+  if (f) {
+    docForm.file = f;
+  }
 };
 const openDocDialog = (c = null) => {
  docForm.contract_uuid = c?.uuid ?? null;
  docDialogOpen.value = true;
 };
-const closeDocDialog = () => { docDialogOpen.value = false; };
+const closeDocDialog = () => {
+  docDialogOpen.value = false;
+};
 const submitDocument = () => {
-  if (!docForm.file) { return; }
-  docForm.post(route('clientCase.document.store', { client_case: props.client_case.uuid }), {
-    forceFormData: true,
-    onSuccess: () => {
-      closeDocDialog();
-      docForm.reset('file', 'name', 'description', 'is_public', 'contract_uuid');
-    },
-  });
+  if (!docForm.file) {
+    return;
+  }
+  docForm.post(
+    route("clientCase.document.store", { client_case: props.client_case.uuid }),
+    {
+      forceFormData: true,
+      onSuccess: () => {
+        closeDocDialog();
+        docForm.reset("file", "name", "description", "is_public", "contract_uuid");
+      },
+    }
+  );
 };

 const selectedContract = computed(() => {
  if (!docForm.contract_uuid) return null;
-  return props.contracts?.find(c => c.uuid === docForm.contract_uuid) || null;
+  return props.contracts?.find((c) => c.uuid === docForm.contract_uuid) || null;
 });

 // Complete flow
@@ -100,8 +133,10 @@ const submitComplete = () => {
  // POST to phone.case.complete and redirect handled by server
  // Use a small form post via Inertia
  const form = useForm({});
-  form.post(route('phone.case.complete', { client_case: props.client_case.uuid }), {
-    onFinish: () => { confirmComplete.value = false; },
+  form.post(route("phone.case.complete", { client_case: props.client_case.uuid }), {
+    onFinish: () => {
+      confirmComplete.value = false;
+    },
  });
 };
 </script>
@@ -111,15 +146,23 @@ const submitComplete = () => {
    <template #header>
      <div class="flex items-center justify-between gap-3">
        <div class="flex items-center gap-3 min-w-0">
-          <a :href="route('phone.index')" class="text-sm text-blue-600 hover:underline shrink-0">← Nazaj</a>
-          <h2 class="font-semibold text-xl text-gray-800 truncate">{{ client_case?.person?.full_name }}</h2>
+          <a
+            :href="route('phone.index')"
+            class="text-sm text-blue-600 hover:underline shrink-0"
+            >← Nazaj</a
+          >
+          <h2 class="font-semibold text-xl text-gray-800 truncate">
+            {{ client_case?.person?.full_name }}
+          </h2>
        </div>
        <div class="shrink-0">
          <button
            type="button"
            class="px-3 py-2 rounded bg-green-600 text-white hover:bg-green-700"
            @click="confirmComplete = true"
-          >Zaključi</button>
+          >
+            Zaključi
+          </button>
        </div>
      </div>
    </template>
@@ -133,7 +176,11 @@ const submitComplete = () => {
              <template #title>Stranka</template>
            </SectionTitle>
            <div class="mt-2">
-              <PersonDetailPhone :types="types" :person="client.person" default-tab="phones" />
+              <PersonDetailPhone
+                :types="types"
+                :person="client.person"
+                default-tab="phones"
+              />
            </div>
          </div>
        </div>
@@ -145,7 +192,11 @@ const submitComplete = () => {
              <template #title>Primer - oseba</template>
            </SectionTitle>
            <div class="mt-2">
-              <PersonDetailPhone :types="types" :person="client_case.person" default-tab="phones" />
+              <PersonDetailPhone
+                :types="types"
+                :person="client_case.person"
+                default-tab="phones"
+              />
            </div>
          </div>
        </div>
@@ -165,81 +216,48 @@ const submitComplete = () => {
                <div class="flex items-center justify-between">
                  <div>
                    <p class="font-medium text-gray-900">{{ c.reference || c.uuid }}</p>
-                    <p class="text-sm text-gray-600">Tip: {{ c.type?.name || '—' }}</p>
+                    <p class="text-sm text-gray-600">Tip: {{ c.type?.name || "—" }}</p>
                  </div>
-                    <div class="text-right">
-                      <div class="space-y-2">
-                        <p v-if="c.account" class="text-sm text-gray-700">Odprto: {{ formatAmount(c.account.balance_amount) }} €</p>
-                        <button
-                          type="button"
-                          class="text-sm px-3 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700 w-full sm:w-auto"
-                          @click="openDrawerAddActivity(c)"
-                        >+ Aktivnost</button>
-                        <button
-                          type="button"
-                          class="text-sm px-3 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700 w-full sm:w-auto"
-                          @click="openDocDialog(c)"
-                        >+ Dokument</button>
-                      </div>
+                  <div class="text-right">
+                    <div class="space-y-2">
+                      <p v-if="c.account" class="text-sm text-gray-700">
+                        Odprto: {{ formatAmount(c.account.balance_amount) }} €
+                      </p>
+                      <button
+                        type="button"
+                        class="text-sm px-3 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700 w-full sm:w-auto"
+                        @click="openDrawerAddActivity(c)"
+                      >
+                        + Aktivnost
+                      </button>
+                      <button
+                        type="button"
+                        class="text-sm px-3 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700 w-full sm:w-auto"
+                        @click="openDocDialog(c)"
+                      >
+                        + Dokument
+                      </button>
                    </div>
-                </div>
-                  <div v-if="c.last_object" class="mt-2 text-sm text-gray-700">
-                    <p class="font-medium">Predmet:</p>
-                    <p>
-                      <span class="text-gray-900">{{ c.last_object.name || c.last_object.reference }}</span>
-                      <span v-if="c.last_object.type" class="ml-2 text-gray-500">({{ c.last_object.type }})</span>
-                    </p>
-                    <p v-if="c.last_object.description" class="text-gray-600 mt-1">{{ c.last_object.description }}</p>
-                  </div>
-              </div>
-              <p v-if="!contracts?.length" class="text-sm text-gray-600">Ni pogodbenih obveznosti dodeljenih vam za ta primer.</p>
-            </div>
-          </div>
-        </div>
-
-        <!-- Documents (case + assigned contracts) -->
-        <div class="mt-4 sm:mt-6 bg-white rounded-lg shadow border overflow-hidden">
-          <div class="p-3 sm:p-4">
-            <div class="flex items-center justify-between">
-              <SectionTitle>
-                <template #title>Dokumenti</template>
-              </SectionTitle>
-              <button
-                class="text-sm px-3 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700"
-                @click="openDocDialog()"
-              >Dodaj</button>
-            </div>
-
-            <div class="mt-3 divide-y">
-              <div
-                v-for="d in documents"
-                :key="d.uuid || d.id"
-                class="py-3"
-              >
-                <div class="flex items-start justify-between gap-3">
-                  <div class="min-w-0">
-                    <div class="font-medium text-gray-900 truncate">{{ d.name || d.original_name }}</div>
-                    <div class="text-xs text-gray-500 mt-0.5">
-                      <span v-if="d.contract_reference">Pogodba: {{ d.contract_reference }}</span>
-                      <span v-else>Primer</span>
-                      <span v-if="d.created_at" class="ml-2">· {{ new Date(d.created_at).toLocaleDateString('sl-SI') }}</span>
-                    </div>
-                    <div v-if="d.description" class="text-gray-600 text-sm mt-1 line-clamp-2">{{ d.description }}</div>
-                  </div>
-                  <div class="shrink-0 flex flex-col items-end gap-2">
-                    <button
-                      type="button"
-                      class="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-800"
-                      @click="openViewer(d)"
-                    >Ogled</button>
-                    <a
-                      class="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-800"
-                      :href="(() => { const isC = (d?.documentable_type || '').toLowerCase().includes('contract'); return isC && d.contract_uuid ? route('contract.document.download', { contract: d.contract_uuid, document: d.uuid }) : route('clientCase.document.download', { client_case: client_case.uuid, document: d.uuid }); })()"
-                    >Prenesi</a>
                  </div>
                </div>
+                <div v-if="c.last_object" class="mt-2 text-sm text-gray-700">
+                  <p class="font-medium">Predmet:</p>
+                  <p>
+                    <span class="text-gray-900">{{
+                      c.last_object.name || c.last_object.reference
+                    }}</span>
+                    <span v-if="c.last_object.type" class="ml-2 text-gray-500"
+                      >({{ c.last_object.type }})</span
+                    >
+                  </p>
+                  <p v-if="c.last_object.description" class="text-gray-600 mt-1">
+                    {{ c.last_object.description }}
+                  </p>
+                </div>
              </div>
-              <div v-if="!documents?.length" class="text-gray-600 text-sm py-2">Ni dokumentov.</div>
+              <p v-if="!contracts?.length" class="text-sm text-gray-600">
+                Ni pogodbenih obveznosti dodeljenih vam za ta primer.
+              </p>
            </div>
          </div>
        </div>
@@ -254,44 +272,154 @@ const submitComplete = () => {
              <button
                class="text-sm px-3 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700"
                @click="openDrawerAddActivity()"
-              >Nova</button>
+              >
+                Nova
+              </button>
            </div>
            <div class="mt-2 divide-y">
              <div v-for="a in activities" :key="a.id" class="py-2 text-sm">
                <div class="flex items-center justify-between">
-                  <div class="text-gray-800">{{ a.action?.name }}<span v-if="a.decision"> → {{ a.decision?.name }}</span></div>
+                  <div class="text-gray-800">
+                    {{ a.action?.name
+                    }}<span v-if="a.decision"> → {{ a.decision?.name }}</span>
+                  </div>
                  <div class="text-right text-gray-500">
                    <div v-if="a.contract">Pogodba: {{ a.contract.reference }}</div>
                    <div class="text-xs" v-if="a.created_at || a.user || a.user_name">
-                      <span v-if="a.created_at">{{ new Date(a.created_at).toLocaleDateString('sl-SI') }}</span>
-                      <span v-if="(a.user && a.user.name) || a.user_name" class="ml-1">· {{ a.user?.name || a.user_name }}</span>
+                      <span v-if="a.created_at">{{
+                        new Date(a.created_at).toLocaleDateString("sl-SI")
+                      }}</span>
+                      <span v-if="(a.user && a.user.name) || a.user_name" class="ml-1"
+                        >· {{ a.user?.name || a.user_name }}</span
+                      >
                    </div>
                  </div>
                </div>
                <div v-if="a.note" class="text-gray-600">{{ a.note }}</div>
                <div class="text-gray-500">
                  <span v-if="a.due_date">Zapadlost: {{ a.due_date }}</span>
-                  <span v-if="a.amount != null" class="ml-2">Znesek: {{ formatAmount(a.amount) }} €</span>
+                  <span v-if="a.amount != null" class="ml-2"
+                    >Znesek: {{ formatAmount(a.amount) }} €</span
+                  >
                </div>
              </div>
-              <div v-if="!activities?.length" class="text-gray-600 py-2">Ni aktivnosti.</div>
+              <div v-if="!activities?.length" class="text-gray-600 py-2">
+                Ni aktivnosti.
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Documents (case + assigned contracts) -->
+        <div class="mt-4 sm:mt-6 bg-white rounded-lg shadow border overflow-hidden">
+          <div class="p-3 sm:p-4">
+            <div class="flex items-center justify-between">
+              <SectionTitle>
+                <template #title>Dokumenti</template>
+              </SectionTitle>
+              <button
+                class="text-sm px-3 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700"
+                @click="openDocDialog()"
+              >
+                Dodaj
+              </button>
+            </div>
+
+            <div class="mt-3 divide-y">
+              <div v-for="d in documents" :key="d.uuid || d.id" class="py-3">
+                <div class="flex items-start justify-between gap-3">
+                  <div class="min-w-0">
+                    <div class="font-medium text-gray-900 truncate">
+                      {{ d.name || d.original_name }}
+                    </div>
+                    <div class="text-xs text-gray-500 mt-0.5">
+                      <span v-if="d.contract_reference"
+                        >Pogodba: {{ d.contract_reference }}</span
+                      >
+                      <span v-else>Primer</span>
+                      <span v-if="d.created_at" class="ml-2"
+                        >· {{ new Date(d.created_at).toLocaleDateString("sl-SI") }}</span
+                      >
+                    </div>
+                    <div
+                      v-if="d.description"
+                      class="text-gray-600 text-sm mt-1 line-clamp-2"
+                    >
+                      {{ d.description }}
+                    </div>
+                  </div>
+                  <div class="shrink-0 flex flex-col items-end gap-2">
+                    <button
+                      type="button"
+                      class="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-800"
+                      @click="openViewer(d)"
+                    >
+                      Ogled
+                    </button>
+                    <a
+                      class="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-800"
+                      :href="
+                        (() => {
+                          const isC = (d?.documentable_type || '')
+                            .toLowerCase()
+                            .includes('contract');
+                          return isC && d.contract_uuid
+                            ? route('contract.document.download', {
+                                contract: d.contract_uuid,
+                                document: d.uuid,
+                              })
+                            : route('clientCase.document.download', {
+                                client_case: client_case.uuid,
+                                document: d.uuid,
+                              });
+                        })()
+                      "
+                      >Prenesi</a
+                    >
+                  </div>
+                </div>
+              </div>
+              <div v-if="!documents?.length" class="text-gray-600 text-sm py-2">
+                Ni dokumentov.
+              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

-    <DocumentViewerDialog :show="viewer.open" :src="viewer.src" :title="viewer.title" @close="closeViewer" />
-    <ActivityDrawer :show="drawerAddActivity" @close="closeDrawer" :client_case="client_case" :actions="actions" :contract-uuid="activityContractUuid" />
+    <DocumentViewerDialog
+      :show="viewer.open"
+      :src="viewer.src"
+      :title="viewer.title"
+      @close="closeViewer"
+    />
+    <ActivityDrawer
+      :show="drawerAddActivity"
+      @close="closeDrawer"
+      :client_case="client_case"
+      :actions="actions"
+      :contract-uuid="activityContractUuid"
+    />

    <ConfirmationModal :show="confirmComplete" @close="confirmComplete = false">
      <template #title>Potrditev</template>
-      <template #content>
-        Ali ste prepričani da želite že zaključit stranko?
-      </template>
+      <template #content> Ali ste prepričani da želite že zaključit stranko? </template>
      <template #footer>
-        <button type="button" class="px-3 py-2 rounded bg-gray-100 hover:bg-gray-200" @click="confirmComplete = false">Prekliči</button>
-        <button type="button" class="px-3 py-2 rounded bg-green-600 text-white hover:bg-green-700 ml-2" @click="submitComplete">Potrdi</button>
+        <button
+          type="button"
+          class="px-3 py-2 rounded bg-gray-100 hover:bg-gray-200"
+          @click="confirmComplete = false"
+        >
+          Prekliči
+        </button>
+        <button
+          type="button"
+          class="px-3 py-2 rounded bg-green-600 text-white hover:bg-green-700 ml-2"
+          @click="submitComplete"
+        >
+          Potrdi
+        </button>
      </template>
    </ConfirmationModal>

@@ -301,22 +429,40 @@ const submitComplete = () => {
      <template #content>
        <div class="space-y-4">
          <div v-if="selectedContract" class="text-sm text-gray-700">
-            Dokument bo dodan k pogodbi: <span class="font-medium">{{ selectedContract.reference || selectedContract.uuid }}</span>
+            Dokument bo dodan k pogodbi:
+            <span class="font-medium">{{
+              selectedContract.reference || selectedContract.uuid
+            }}</span>
          </div>
          <div>
            <InputLabel for="docFile" value="Datoteka" />
-            <input id="docFile" type="file" class="mt-1 block w-full" @change="onPickDocument" />
-            <div v-if="docForm.errors.file" class="text-sm text-red-600 mt-1">{{ docForm.errors.file }}</div>
+            <input
+              id="docFile"
+              type="file"
+              class="mt-1 block w-full"
+              @change="onPickDocument"
+            />
+            <div v-if="docForm.errors.file" class="text-sm text-red-600 mt-1">
+              {{ docForm.errors.file }}
+            </div>
          </div>
          <div>
            <InputLabel for="docName" value="Ime" />
            <TextInput id="docName" v-model="docForm.name" class="mt-1 block w-full" />
-            <div v-if="docForm.errors.name" class="text-sm text-red-600 mt-1">{{ docForm.errors.name }}</div>
+            <div v-if="docForm.errors.name" class="text-sm text-red-600 mt-1">
+              {{ docForm.errors.name }}
+            </div>
          </div>
          <div>
            <InputLabel for="docDesc" value="Opis" />
-            <TextInput id="docDesc" v-model="docForm.description" class="mt-1 block w-full" />
-            <div v-if="docForm.errors.description" class="text-sm text-red-600 mt-1">{{ docForm.errors.description }}</div>
+            <TextInput
+              id="docDesc"
+              v-model="docForm.description"
+              class="mt-1 block w-full"
+            />
+            <div v-if="docForm.errors.description" class="text-sm text-red-600 mt-1">
+              {{ docForm.errors.description }}
+            </div>
          </div>
          <div class="flex items-center gap-2">
            <input id="docPublic" type="checkbox" v-model="docForm.is_public" />
@@ -326,14 +472,25 @@ const submitComplete = () => {
      </template>
      <template #footer>
        <div class="flex justify-end gap-2">
-          <button type="button" class="px-3 py-2 rounded bg-gray-100 hover:bg-gray-200" @click="closeDocDialog">Prekliči</button>
-          <button type="button" class="px-3 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700" :disabled="docForm.processing || !docForm.file" @click="submitDocument">Naloži</button>
+          <button
+            type="button"
+            class="px-3 py-2 rounded bg-gray-100 hover:bg-gray-200"
+            @click="closeDocDialog"
+          >
+            Prekliči
+          </button>
+          <button
+            type="button"
+            class="px-3 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700"
+            :disabled="docForm.processing || !docForm.file"
+            @click="submitDocument"
+          >
+            Naloži
+          </button>
        </div>
      </template>
    </DialogModal>
  </AppPhoneLayout>
-  
 </template>

-<style scoped>
-</style>
+<style scoped></style>
@@ -53,33 +53,34 @@ function formatAmount(val) {
    <div class="py-4 sm:py-8">
      <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
        <div class="mb-4 flex items-center gap-2">
-          <input
-            v-model="search"
-            type="text"
-            placeholder="Išči po referenci ali imenu..."
-            class="flex-1 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
-          />
-          <button
-            v-if="search"
-            type="button"
-            @click="search = ''"
-            class="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-600"
-          >Počisti</button>
+          <input v-model="search" type="text" placeholder="Išči po referenci ali imenu..."
+            class="flex-1 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
+          <button v-if="search" type="button" @click="search = ''"
+            class="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-600">Počisti</button>
        </div>
        <div class="grid grid-cols-1 gap-3 sm:gap-4 md:grid-cols-2 lg:grid-cols-3">
          <template v-if="filteredJobs.length">
            <div v-for="job in filteredJobs" :key="job.id" class="bg-white rounded-lg shadow border p-3 sm:p-4">
+              <div class="mb-4 flex gap-2">
+                <a :href="route('phone.case', { client_case: job.contract?.client_case?.uuid })"
+                  class="inline-flex-1 flex-1 text-center px-3 py-2 rounded-md bg-blue-600 text-white text-sm hover:bg-blue-700">Odpri
+                  primer</a>
+              </div>
              <div class="flex items-center justify-between">
-                <p class="text-sm text-gray-500">Dodeljeno: <span class="font-medium text-gray-700">{{ formatDateDMY(job.assigned_at) }}</span></p>
-                <span v-if="job.priority" class="inline-block text-xs px-2 py-0.5 rounded bg-amber-100 text-amber-700">Prioriteta</span>
+                <p class="text-sm text-gray-500">Dodeljeno: <span class="font-medium text-gray-700">{{
+                  formatDateDMY(job.assigned_at) }}</span></p>
+                <span v-if="job.priority"
+                  class="inline-block text-xs px-2 py-0.5 rounded bg-amber-100 text-amber-700">Prioriteta</span>
              </div>
              <div class="mt-2">
                <p class="text-base sm:text-lg font-semibold text-gray-800">
                  {{ job.contract?.client_case?.person?.full_name || '—' }}
                </p>
-                <p class="text-sm text-gray-600 truncate">Kontrakt: {{ job.contract?.reference || job.contract?.uuid }}</p>
+                <p class="text-sm text-gray-600 truncate">Kontrakt: {{ job.contract?.reference || job.contract?.uuid }}
+                </p>
                <p class="text-sm text-gray-600">Tip: {{ job.contract?.type?.name || '—' }}</p>
-                <p class="text-sm text-gray-600" v-if="job.contract?.account && job.contract.account.balance_amount !== null && job.contract.account.balance_amount !== undefined">
+                <p class="text-sm text-gray-600"
+                  v-if="job.contract?.account && job.contract.account.balance_amount !== null && job.contract.account.balance_amount !== undefined">
                  Odprto: {{ formatAmount(job.contract.account.balance_amount) }} €
                </p>
              </div>
@@ -93,9 +94,7 @@ function formatAmount(val) {
                  {{ job.contract?.client_case?.person?.phones?.[0]?.nu || '—' }}
                </p>
              </div>
-              <div class="mt-4 flex gap-2">
-                <a :href="route('phone.case', { client_case: job.contract?.client_case?.uuid })" class="inline-flex-1 flex-1 text-center px-3 py-2 rounded-md bg-blue-600 text-white text-sm hover:bg-blue-700">Odpri primer</a>
-              </div>
+
            </div>
          </template>
          <div v-else class="col-span-full bg-white rounded-lg shadow border p-6 text-center text-gray-600">