Changes to import and notifications

resources/js/Components/DataTable/DataTableClient.vue

@@ -0,0 +1,375 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import {
+  FwbTable,
+  FwbTableHead,
+  FwbTableHeadCell,
+  FwbTableBody,
+  FwbTableRow,
+  FwbTableCell,
+} from "flowbite-vue";
+
+const props = defineProps({
+  columns: { type: Array, required: true }, // [{ key, label, sortable?, align?, class?, formatter? }]
+  rows: { type: Array, default: () => [] },
+  // Sorting
+  sort: { type: Object, default: () => ({ key: null, direction: null }) },
+  // Searching
+  search: { type: String, default: "" },
+  searchKeys: { type: [Array, Function], default: () => [] },
+  // Pagination
+  page: { type: Number, default: 1 },
+  pageSize: { type: Number, default: 10 },
+  pageSizeOptions: { type: Array, default: () => [10, 25, 50] },
+  // UI
+  loading: { type: Boolean, default: false },
+  emptyText: { type: String, default: "Ni podatkov." },
+  rowKey: { type: [String, Function], default: "id" },
+  showToolbar: { type: Boolean, default: true },
+  // Pagination UX options
+  showPageStats: { type: Boolean, default: true },
+  showGoto: { type: Boolean, default: true },
+  maxPageLinks: { type: Number, default: 5 }, // odd number preferred
+});
+
+const emit = defineEmits([
+  "update:sort",
+  "update:search",
+  "update:page",
+  "update:pageSize",
+  "row:click",
+]);
+
+const internalSearch = ref(props.search);
+watch(
+  () => props.search,
+  (v) => {
+    internalSearch.value = v ?? "";
+  }
+);
+watch(internalSearch, (v, ov) => {
+  if (v !== props.search) {
+    emit("update:search", v);
+    // reset page when search changes
+    if (props.page !== 1) emit("update:page", 1);
+  }
+});
+
+function keyOf(row) {
+  if (typeof props.rowKey === "function") return props.rowKey(row);
+  if (typeof props.rowKey === "string" && row && row[props.rowKey] != null)
+    return row[props.rowKey];
+  return row?.uuid ?? row?.id ?? Math.random().toString(36).slice(2);
+}
+
+function toggleSort(col) {
+  if (!col?.sortable) return;
+  const { key } = col;
+  const current = props.sort || { key: null, direction: null };
+  let direction = "asc";
+  if (current.key === key) {
+    direction =
+      current.direction === "asc" ? "desc" : current.direction === "desc" ? null : "asc";
+  }
+  emit("update:sort", { key: direction ? key : null, direction });
+  // reset to page 1 when sort changes
+  if (props.page !== 1) emit("update:page", 1);
+}
+
+const filteredRows = computed(() => {
+  const s = (props.search ?? "").toString().trim().toLowerCase();
+  if (!s) return props.rows || [];
+  const keys = props.searchKeys;
+  if (typeof keys === "function") {
+    return (props.rows || []).filter((r) => {
+      try {
+        return String(keys(r) ?? "")
+          .toLowerCase()
+          .includes(s);
+      } catch (e) {
+        return false;
+      }
+    });
+  }
+  const arr =
+    Array.isArray(keys) && keys.length ? keys : Object.keys(props.rows?.[0] || {});
+  return (props.rows || []).filter((r) => {
+    return arr.some((k) =>
+      String(r?.[k] ?? "")
+        .toLowerCase()
+        .includes(s)
+    );
+  });
+});
+
+const sortedRows = computed(() => {
+  const { key, direction } = props.sort || { key: null, direction: null };
+  if (!key || !direction) return filteredRows.value;
+  const arr = [...filteredRows.value];
+  arr.sort((a, b) => {
+    const av = a?.[key];
+    const bv = b?.[key];
+    if (av == null && bv == null) return 0;
+    if (av == null) return direction === "asc" ? -1 : 1;
+    if (bv == null) return direction === "asc" ? 1 : -1;
+    if (typeof av === "number" && typeof bv === "number")
+      return direction === "asc" ? av - bv : bv - av;
+    return direction === "asc"
+      ? String(av).localeCompare(String(bv))
+      : String(bv).localeCompare(String(av));
+  });
+  return arr;
+});
+
+const total = computed(() => sortedRows.value.length);
+const lastPage = computed(() =>
+  Math.max(1, Math.ceil(total.value / (props.pageSize || 10)))
+);
+const currentPage = computed(() =>
+  Math.min(Math.max(1, props.page || 1), lastPage.value)
+);
+const startIndex = computed(() => (currentPage.value - 1) * (props.pageSize || 10));
+const endIndex = computed(() =>
+  Math.min(startIndex.value + (props.pageSize || 10), total.value)
+);
+const pageRows = computed(() => sortedRows.value.slice(startIndex.value, endIndex.value));
+
+const showingFrom = computed(() => (total.value === 0 ? 0 : startIndex.value + 1));
+const showingTo = computed(() => (total.value === 0 ? 0 : endIndex.value));
+
+const gotoInput = ref("");
+function goToPageInput() {
+  const raw = String(gotoInput.value || "").trim();
+  const n = Number(raw);
+  if (!Number.isFinite(n)) return;
+  const target = Math.max(1, Math.min(lastPage.value, Math.floor(n)));
+  if (target !== currentPage.value) setPage(target);
+  gotoInput.value = "";
+}
+
+const visiblePages = computed(() => {
+  const pages = [];
+  const count = lastPage.value;
+  if (count <= 1) return [1];
+  const windowSize = Math.max(3, props.maxPageLinks);
+  const half = Math.floor(windowSize / 2);
+  let start = Math.max(1, currentPage.value - half);
+  let end = Math.min(count, start + windowSize - 1);
+  start = Math.max(1, Math.min(start, end - windowSize + 1));
+  for (let p = start; p <= end; p++) pages.push(p);
+  return pages;
+});
+
+function setPage(p) {
+  emit("update:page", Math.min(Math.max(1, p), lastPage.value));
+}
+function setPageSize(ps) {
+  emit("update:pageSize", Number(ps));
+  emit("update:page", 1);
+}
+</script>
+
+<template>
+  <div class="w-full">
+    <div v-if="showToolbar" class="mb-3 flex items-center justify-between gap-3">
+      <div class="flex items-center gap-2">
+        <input
+          type="text"
+          class="w-64 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+          placeholder="Iskanje..."
+          v-model="internalSearch"
+        />
+      </div>
+      <div class="flex items-center gap-2">
+        <label class="text-sm text-gray-600">Na stran</label>
+        <select
+          class="rounded border-gray-300 text-sm"
+          :value="pageSize"
+          @change="setPageSize($event.target.value)"
+        >
+          <option v-for="opt in pageSizeOptions" :key="opt" :value="opt">
+            {{ opt }}
+          </option>
+        </select>
+      </div>
+    </div>
+
+    <div
+      class="relative overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm"
+    >
+      <FwbTable hoverable striped class="text-sm">
+        <FwbTableHead
+          class="sticky top-0 z-10 bg-gray-50/90 backdrop-blur border-b border-gray-200 shadow-sm"
+        >
+          <FwbTableHeadCell v-for="col in columns" :key="col.key" :class="col.class">
+            <button
+              v-if="col.sortable"
+              type="button"
+              class="inline-flex items-center gap-1 hover:text-indigo-600"
+              @click="toggleSort(col)"
+              :aria-sort="sort?.key === col.key ? sort.direction || 'none' : 'none'"
+            >
+              <span>{{ col.label }}</span>
+              <span v-if="sort?.key === col.key && sort.direction === 'asc'">▲</span>
+              <span v-else-if="sort?.key === col.key && sort.direction === 'desc'"
+                >▼</span
+              >
+            </button>
+            <span v-else>{{ col.label }}</span>
+          </FwbTableHeadCell>
+          <FwbTableHeadCell v-if="$slots.actions" class="w-px">&nbsp;</FwbTableHeadCell>
+        </FwbTableHead>
+
+        <FwbTableBody>
+          <template v-if="!loading && pageRows.length">
+            <FwbTableRow
+              v-for="(row, idx) in pageRows"
+              :key="keyOf(row)"
+              @click="$emit('row:click', row)"
+              class="cursor-default"
+            >
+              <FwbTableCell
+                v-for="col in columns"
+                :key="col.key"
+                :class="col.class"
+                :align="col.align || 'left'"
+              >
+                <template v-if="$slots['cell-' + col.key]">
+                  <slot
+                    :name="'cell-' + col.key"
+                    :row="row"
+                    :column="col"
+                    :value="row?.[col.key]"
+                    :index="idx"
+                  />
+                </template>
+                <template v-else-if="$slots.cell">
+                  <slot
+                    name="cell"
+                    :row="row"
+                    :column="col"
+                    :value="row?.[col.key]"
+                    :index="idx"
+                  />
+                </template>
+                <template v-else>
+                  {{ col.formatter ? col.formatter(row) : row?.[col.key] ?? "" }}
+                </template>
+              </FwbTableCell>
+              <FwbTableCell v-if="$slots.actions" class="w-px text-right">
+                <slot name="actions" :row="row" :index="idx" />
+              </FwbTableCell>
+            </FwbTableRow>
+          </template>
+          <template v-else-if="loading">
+            <FwbTableRow>
+              <FwbTableCell :colspan="columns.length + ($slots.actions ? 1 : 0)">
+                <div class="p-6 text-center text-gray-500">Nalagam...</div>
+              </FwbTableCell>
+            </FwbTableRow>
+          </template>
+          <template v-else>
+            <FwbTableRow>
+              <FwbTableCell :colspan="columns.length + ($slots.actions ? 1 : 0)">
+                <slot name="empty">
+                  <div class="p-6 text-center text-gray-500">{{ emptyText }}</div>
+                </slot>
+              </FwbTableCell>
+            </FwbTableRow>
+          </template>
+        </FwbTableBody>
+      </FwbTable>
+    </div>
+
+    <nav class="mt-3 flex flex-wrap items-center justify-between gap-3 text-sm text-gray-700" aria-label="Pagination">
+      <div v-if="showPageStats">
+        <span v-if="total > 0">Prikazano: {{ showingFrom }}–{{ showingTo }} od {{ total }}</span>
+        <span v-else>Ni zadetkov</span>
+      </div>
+      <div class="flex items-center gap-1">
+        <!-- First -->
+        <button
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 disabled:opacity-50"
+          :disabled="currentPage <= 1"
+          @click="setPage(1)"
+          aria-label="Prva stran"
+        >
+          ««
+        </button>
+        <!-- Prev -->
+        <button
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 disabled:opacity-50"
+          :disabled="currentPage <= 1"
+          @click="setPage(currentPage - 1)"
+          aria-label="Prejšnja stran"
+        >
+          «
+        </button>
+
+        <!-- Leading ellipsis / first page when window doesn't include 1 -->
+        <button
+          v-if="visiblePages[0] > 1"
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50"
+          @click="setPage(1)"
+        >1</button>
+        <span v-if="visiblePages[0] > 2" class="px-1">…</span>
+
+        <!-- Page numbers -->
+        <button
+          v-for="p in visiblePages"
+          :key="p"
+          class="px-3 py-1 rounded border transition-colors"
+          :class="p === currentPage ? 'border-indigo-600 bg-indigo-600 text-white' : 'border-gray-300 hover:bg-gray-50'"
+          :aria-current="p === currentPage ? 'page' : undefined"
+          @click="setPage(p)"
+        >
+          {{ p }}
+        </button>
+
+        <!-- Trailing ellipsis / last page when window doesn't include last -->
+        <span v-if="visiblePages[visiblePages.length - 1] < lastPage - 1" class="px-1">…</span>
+        <button
+          v-if="visiblePages[visiblePages.length - 1] < lastPage"
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50"
+          @click="setPage(lastPage)"
+        >{{ lastPage }}</button>
+
+        <!-- Next -->
+        <button
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 disabled:opacity-50"
+          :disabled="currentPage >= lastPage"
+          @click="setPage(currentPage + 1)"
+          aria-label="Naslednja stran"
+        >
+          »
+        </button>
+        <!-- Last -->
+        <button
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 disabled:opacity-50"
+          :disabled="currentPage >= lastPage"
+          @click="setPage(lastPage)"
+          aria-label="Zadnja stran"
+        >
+          »»
+        </button>
+
+        <!-- Goto page -->
+        <div v-if="showGoto" class="ms-2 flex items-center gap-1">
+          <input
+            v-model="gotoInput"
+            type="number"
+            min="1"
+            :max="lastPage"
+            inputmode="numeric"
+            class="w-16 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+            :placeholder="String(currentPage)"
+            aria-label="Pojdi na stran"
+            @keyup.enter="goToPageInput"
+            @blur="goToPageInput"
+          />
+          <span class="text-gray-500">/ {{ lastPage }}</span>
+        </div>
+      </div>
+    </nav>
+  </div>
+</template>

resources/js/Components/DataTable/DataTableServer.vue

@@ -0,0 +1,390 @@
+<script setup>
+import { ref, watch, computed } from "vue";
+import { router } from "@inertiajs/vue3";
+import {
+  FwbTable,
+  FwbTableHead,
+  FwbTableHeadCell,
+  FwbTableBody,
+  FwbTableRow,
+  FwbTableCell,
+} from "flowbite-vue";
+
+const props = defineProps({
+  columns: { type: Array, required: true }, // [{ key, label, sortable?, align?, class? }]
+  rows: { type: Array, default: () => [] },
+  meta: { type: Object, required: true }, // { current_page, per_page, total, last_page }
+  sort: { type: Object, default: () => ({ key: null, direction: null }) },
+  search: { type: String, default: "" },
+  page: { type: Number, default: 1 },
+  pageSize: { type: Number, default: 10 },
+  pageSizeOptions: { type: Array, default: () => [10, 25, 50] },
+  routeName: { type: String, required: true },
+  routeParams: { type: Object, default: () => ({}) },
+  query: { type: Object, default: () => ({}) },
+  preserveState: { type: Boolean, default: true },
+  preserveScroll: { type: Boolean, default: true },
+  loading: { type: Boolean, default: false },
+  emptyText: { type: String, default: "Ni podatkov." },
+  rowKey: { type: [String, Function], default: "id" },
+  showToolbar: { type: Boolean, default: true },
+  onlyProps: { type: Array, default: () => [] }, // e.g., ['contracts']
+  // Pagination UX options
+  showPageStats: { type: Boolean, default: true },
+  showGoto: { type: Boolean, default: true },
+  maxPageLinks: { type: Number, default: 5 }, // odd number preferred
+  // Optional custom page parameter name (Laravel custom paginator key, e.g. 'client-cases-page')
+  pageParamName: { type: String, default: "page" },
+});
+
+const emit = defineEmits([
+  "update:sort",
+  "update:search",
+  "update:page",
+  "update:pageSize",
+  "row:click",
+]);
+
+const internalSearch = ref(props.search);
+watch(
+  () => props.search,
+  (v) => {
+    internalSearch.value = v ?? "";
+  }
+);
+
+let searchTimer;
+watch(internalSearch, (v) => {
+  emit("update:search", v);
+  // Debounced request, reset page to 1
+  clearTimeout(searchTimer);
+  searchTimer = setTimeout(() => doRequest({ page: 1, search: v }), 300);
+});
+
+function keyOf(row) {
+  if (typeof props.rowKey === "function") return props.rowKey(row);
+  if (typeof props.rowKey === "string" && row && row[props.rowKey] != null)
+    return row[props.rowKey];
+  return row?.uuid ?? row?.id ?? Math.random().toString(36).slice(2);
+}
+
+function toggleSort(col) {
+  if (!col?.sortable) return;
+  const { key } = col;
+  const current = props.sort || { key: null, direction: null };
+  let direction = "asc";
+  if (current.key === key) {
+    direction =
+      current.direction === "asc" ? "desc" : current.direction === "desc" ? null : "asc";
+  }
+  emit("update:sort", { key: direction ? key : null, direction });
+  doRequest({ sort: direction ? key : null, direction, page: 1 });
+}
+
+function setPage(p) {
+  emit("update:page", p);
+  doRequest({ page: p });
+}
+function setPageSize(ps) {
+  const perPage = Number(ps);
+  emit("update:pageSize", perPage);
+  doRequest({ page: 1, perPage });
+}
+
+function doRequest(overrides = {}) {
+  const q = {
+    ...props.query,
+    perPage: overrides.perPage ?? props.meta?.per_page ?? props.pageSize ?? 10,
+    sort: overrides.sort ?? props.sort?.key ?? null,
+    direction: overrides.direction ?? props.sort?.direction ?? null,
+    search: overrides.search ?? props.search ?? "",
+  };
+  const pageParam = props.pageParamName || "page";
+  q[pageParam] = overrides.page ?? props.meta?.current_page ?? props.page ?? 1;
+  if (pageParam !== "page") {
+    delete q.page;
+  }
+  // Clean nulls
+  Object.keys(q).forEach((k) => {
+    if (q[k] === null || q[k] === undefined || q[k] === "") delete q[k];
+  });
+  const url = route(props.routeName, props.routeParams || {});
+  router.get(url, q, {
+    preserveScroll: props.preserveScroll,
+    preserveState: props.preserveState,
+    replace: true,
+    only: props.onlyProps.length ? props.onlyProps : undefined,
+  });
+}
+
+const total = computed(() => props.meta?.total ?? 0);
+const currentPage = computed(() => props.meta?.current_page ?? 1);
+const lastPage = computed(() => props.meta?.last_page ?? 1);
+const perPage = computed(() => props.meta?.per_page ?? props.pageSize ?? 10);
+
+// Ensure the page-size selector always contains the current server value
+const pageSizeOptionsResolved = computed(() => {
+  const base = Array.isArray(props.pageSizeOptions)
+    ? [...props.pageSizeOptions]
+    : [10, 25, 50];
+  const current = perPage.value;
+  if (current && !base.includes(current)) {
+    base.push(current);
+  }
+  return base.sort((a, b) => a - b);
+});
+
+const showingFrom = computed(() => {
+  if (total.value === 0) return 0;
+  return (currentPage.value - 1) * perPage.value + 1;
+});
+const showingTo = computed(() => {
+  if (total.value === 0) return 0;
+  return Math.min(currentPage.value * perPage.value, total.value);
+});
+
+const gotoInput = ref("");
+
+const visiblePages = computed(() => {
+  const pages = [];
+  const count = lastPage.value;
+  if (count <= 1) return [1];
+  const windowSize = Math.max(3, props.maxPageLinks);
+  const half = Math.floor(windowSize / 2);
+  let start = Math.max(1, currentPage.value - half);
+  let end = Math.min(count, start + windowSize - 1);
+  // Adjust start if at the end
+  start = Math.max(1, Math.min(start, end - windowSize + 1));
+  for (let p = start; p <= end; p++) pages.push(p);
+  return pages;
+});
+
+function goToPageInput() {
+  const raw = String(gotoInput.value || "").trim();
+  const n = Number(raw);
+  if (!Number.isFinite(n)) return;
+  const target = Math.max(1, Math.min(lastPage.value, Math.floor(n)));
+  if (target !== currentPage.value) setPage(target);
+  gotoInput.value = "";
+}
+</script>
+
+<template>
+  <div class="w-full">
+    <div v-if="showToolbar" class="mb-3 flex items-center justify-between gap-3">
+      <div class="flex items-center gap-2">
+        <input
+          type="text"
+          class="w-64 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+          placeholder="Iskanje..."
+          v-model="internalSearch"
+        />
+      </div>
+      <div class="flex items-center gap-2">
+        <label class="text-sm text-gray-600">Na stran</label>
+        <select
+          class="rounded border-gray-300 text-sm"
+          :value="meta?.per_page || pageSize"
+          @change="setPageSize($event.target.value)"
+        >
+          <option v-for="opt in pageSizeOptionsResolved" :key="opt" :value="opt">
+            {{ opt }}
+          </option>
+        </select>
+      </div>
+    </div>
+
+    <div
+      class="relative overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm"
+    >
+      <FwbTable hoverable striped class="text-sm">
+        <FwbTableHead
+          class="sticky top-0 z-10 bg-gray-50/90 backdrop-blur border-b border-gray-200 shadow-sm"
+        >
+          <FwbTableHeadCell v-for="col in columns" :key="col.key" :class="col.class">
+            <button
+              v-if="col.sortable"
+              type="button"
+              class="inline-flex items-center gap-1 hover:text-indigo-600"
+              @click="toggleSort(col)"
+              :aria-sort="sort?.key === col.key ? sort.direction || 'none' : 'none'"
+            >
+              <span>{{ col.label }}</span>
+              <span v-if="sort?.key === col.key && sort.direction === 'asc'">▲</span>
+              <span v-else-if="sort?.key === col.key && sort.direction === 'desc'"
+                >▼</span
+              >
+            </button>
+            <span v-else>{{ col.label }}</span>
+          </FwbTableHeadCell>
+          <FwbTableHeadCell v-if="$slots.actions" class="w-px">&nbsp;</FwbTableHeadCell>
+        </FwbTableHead>
+
+        <FwbTableBody>
+          <template v-if="!loading && rows.length">
+            <FwbTableRow
+              v-for="(row, idx) in rows"
+              :key="keyOf(row)"
+              @click="$emit('row:click', row)"
+              class="cursor-default"
+            >
+              <FwbTableCell
+                v-for="col in columns"
+                :key="col.key"
+                :class="col.class"
+                :align="col.align || 'left'"
+              >
+                <template v-if="$slots['cell-' + col.key]">
+                  <slot
+                    :name="'cell-' + col.key"
+                    :row="row"
+                    :column="col"
+                    :value="row?.[col.key]"
+                    :index="idx"
+                  />
+                </template>
+                <template v-else-if="$slots.cell">
+                  <slot
+                    name="cell"
+                    :row="row"
+                    :column="col"
+                    :value="row?.[col.key]"
+                    :index="idx"
+                  />
+                </template>
+                <template v-else>
+                  {{ row?.[col.key] ?? "" }}
+                </template>
+              </FwbTableCell>
+              <FwbTableCell v-if="$slots.actions" class="w-px text-right">
+                <slot name="actions" :row="row" :index="idx" />
+              </FwbTableCell>
+            </FwbTableRow>
+          </template>
+          <template v-else-if="loading">
+            <FwbTableRow>
+              <FwbTableCell :colspan="columns.length + ($slots.actions ? 1 : 0)">
+                <div class="p-6 text-center text-gray-500">Nalagam...</div>
+              </FwbTableCell>
+            </FwbTableRow>
+          </template>
+          <template v-else>
+            <FwbTableRow>
+              <FwbTableCell :colspan="columns.length + ($slots.actions ? 1 : 0)">
+                <slot name="empty">
+                  <div class="p-6 text-center text-gray-500">{{ emptyText }}</div>
+                </slot>
+              </FwbTableCell>
+            </FwbTableRow>
+          </template>
+        </FwbTableBody>
+      </FwbTable>
+    </div>
+
+    <nav
+      class="mt-3 flex flex-wrap items-center justify-between gap-3 text-sm text-gray-700"
+      aria-label="Pagination"
+    >
+      <div v-if="showPageStats">
+        <span v-if="total > 0"
+          >Prikazano: {{ showingFrom }}–{{ showingTo }} od {{ total }}</span
+        >
+        <span v-else>Ni zadetkov</span>
+      </div>
+      <div class="flex items-center gap-1">
+        <!-- First -->
+        <button
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 disabled:opacity-50"
+          :disabled="currentPage <= 1"
+          @click="setPage(1)"
+          aria-label="Prva stran"
+        >
+          ««
+        </button>
+        <!-- Prev -->
+        <button
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 disabled:opacity-50"
+          :disabled="currentPage <= 1"
+          @click="setPage(currentPage - 1)"
+          aria-label="Prejšnja stran"
+        >
+          «
+        </button>
+
+        <!-- Leading ellipsis / first page when window doesn't include 1 -->
+        <button
+          v-if="visiblePages[0] > 1"
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50"
+          @click="setPage(1)"
+        >
+          1
+        </button>
+        <span v-if="visiblePages[0] > 2" class="px-1">…</span>
+
+        <!-- Page numbers -->
+        <button
+          v-for="p in visiblePages"
+          :key="p"
+          class="px-3 py-1 rounded border transition-colors"
+          :class="
+            p === currentPage
+              ? 'border-indigo-600 bg-indigo-600 text-white'
+              : 'border-gray-300 hover:bg-gray-50'
+          "
+          :aria-current="p === currentPage ? 'page' : undefined"
+          @click="setPage(p)"
+        >
+          {{ p }}
+        </button>
+
+        <!-- Trailing ellipsis / last page when window doesn't include last -->
+        <span v-if="visiblePages[visiblePages.length - 1] < lastPage - 1" class="px-1"
+          >…</span
+        >
+        <button
+          v-if="visiblePages[visiblePages.length - 1] < lastPage"
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50"
+          @click="setPage(lastPage)"
+        >
+          {{ lastPage }}
+        </button>
+
+        <!-- Next -->
+        <button
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 disabled:opacity-50"
+          :disabled="currentPage >= lastPage"
+          @click="setPage(currentPage + 1)"
+          aria-label="Naslednja stran"
+        >
+          »
+        </button>
+        <!-- Last -->
+        <button
+          class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 disabled:opacity-50"
+          :disabled="currentPage >= lastPage"
+          @click="setPage(lastPage)"
+          aria-label="Zadnja stran"
+        >
+          »»
+        </button>
+
+        <!-- Goto page -->
+        <div v-if="showGoto" class="ms-2 flex items-center gap-1">
+          <input
+            v-model="gotoInput"
+            type="number"
+            min="1"
+            :max="lastPage"
+            inputmode="numeric"
+            class="w-16 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+            :placeholder="String(currentPage)"
+            aria-label="Pojdi na stran"
+            @keyup.enter="goToPageInput"
+            @blur="goToPageInput"
+          />
+          <span class="text-gray-500">/ {{ lastPage }}</span>
+        </div>
+      </div>
+    </nav>
+  </div>
+</template>

resources/js/Layouts/Partials/NotificationsBell.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { usePage, Link } from "@inertiajs/vue3";
 import Dropdown from "@/Components/Dropdown.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -10,6 +10,10 @@ const due = computed(
   () => page.props.notifications?.dueToday || { count: 0, items: [], date: null }
 );
 
+// Local, optimistically-updated list of items and derived count
+const items = ref([]);
+const count = computed(() => items.value.length);
+
 function fmtDate(d) {
   if (!d) return "";
   try {
@@ -37,16 +41,43 @@ function fmtEUR(value) {
   // Replace non-breaking space with normal space for consistency
   return formatted.replace("\u00A0", " ");
 }
+
 onMounted(() => {
-  console.log(due.value);
+  items.value = [...(due.value.items || [])];
 });
+
+watch(
+  () => due.value.items,
+  (val) => {
+    items.value = [...(val || [])];
+  }
+);
+
+async function markRead(item) {
+  const idx = items.value.findIndex((i) => i.id === item.id);
+  if (idx === -1) {
+    return;
+  }
+
+  // Optimistically remove
+  const removed = items.value.splice(idx, 1)[0];
+
+  try {
+    await window.axios.post(route("notifications.activity.read"), {
+      activity_id: item.id,
+    });
+  } catch (e) {
+    // Rollback on failure
+    items.value.splice(idx, 0, removed);
+  }
+}
 </script>
 
 <template>
   <Dropdown
     align="right"
     width="72"
-    :content-classes="['py-1', 'bg-white', 'max-h-96', 'overflow-auto']"
+    :content-classes="['p-0', 'bg-white', 'max-h-96', 'overflow-hidden']"
   >
     <template #trigger>
       <button
@@ -56,48 +87,76 @@ onMounted(() => {
       >
         <FontAwesomeIcon :icon="faBell" class="w-5 h-5" />
         <span
-          v-if="due.count"
+          v-if="count"
           class="absolute -top-1 -right-1 inline-flex items-center justify-center h-5 min-w-[1.25rem] px-1 rounded-full text-[11px] bg-red-600 text-white"
-          >{{ due.count }}</span
+          >{{ count }}</span
         >
       </button>
     </template>
 
     <template #content>
-      <div class="px-3 py-2 text-xs text-gray-400 border-b">Obljube zapadejo jutri</div>
+      <div class="px-3 py-2 text-xs text-gray-400 border-b sticky top-0 bg-white z-10 flex items-center justify-between">
+        <span>Zapadejo danes</span>
+        <Link :href="route('notifications.unread')" class="text-indigo-600 hover:text-indigo-700">Vsa obvestila</Link>
+      </div>
       <!-- Scrollable content area with max height -->
-      <div class="max-h-96 overflow-y-auto">
-        <div v-if="!due.count" class="px-3 py-3 text-sm text-gray-500">
+      <div class="max-h-80 overflow-auto">
+        <div v-if="!count" class="px-3 py-3 text-sm text-gray-500">
           Ni zapadlih aktivnosti danes.
         </div>
         <ul v-else class="divide-y">
           <li
-            v-for="item in due.items"
+            v-for="item in items"
             :key="item.id"
             class="px-3 py-2 text-sm flex items-start gap-2"
           >
             <div class="flex-1 min-w-0">
               <div class="font-medium text-gray-800 truncate">
-                Pogodba:
-                <Link
-                  v-if="item.contract?.client_case?.uuid"
-                  :href="
-                    route('clientCase.show', {
-                      client_case: item.contract.client_case.uuid,
-                    })
-                  "
-                  class="text-indigo-600 hover:text-indigo-700 hover:underline"
-                >
-                  {{ item.contract?.reference || "—" }}
-                </Link>
-                <span v-else>{{ item.contract?.reference || "—" }}</span>
+                <template v-if="item.contract?.uuid">
+                  Pogodba:
+                  <Link
+                    v-if="item.contract?.client_case?.uuid"
+                    :href="
+                      route('clientCase.show', {
+                        client_case: item.contract.client_case.uuid,
+                      })
+                    "
+                    class="text-indigo-600 hover:text-indigo-700 hover:underline"
+                  >
+                    {{ item.contract?.reference || "—" }}
+                  </Link>
+                  <span v-else>{{ item.contract?.reference || "—" }}</span>
+                </template>
+                <template v-else>
+                  Primer:
+                  <Link
+                    v-if="item.client_case?.uuid"
+                    :href="
+                      route('clientCase.show', { client_case: item.client_case.uuid })
+                    "
+                    class="text-indigo-600 hover:text-indigo-700 hover:underline"
+                  >
+                    {{ item.client_case?.person?.full_name || "—" }}
+                  </Link>
+                  <span v-else>{{ item.client_case?.person?.full_name || "—" }}</span>
+                </template>
               </div>
-              <div class="text-gray-600 truncate">
+              <div class="text-gray-600 truncate" v-if="item.contract">
                 {{ fmtEUR(item.contract?.account?.balance_amount) }}
               </div>
             </div>
-            <div class="text-xs text-gray-500 whitespace-nowrap">
-              {{ fmtDate(item.due_date) }}
+            <div class="flex flex-col items-end gap-1">
+              <div class="text-xs text-gray-500 whitespace-nowrap">
+                {{ fmtDate(item.due_date) }}
+              </div>
+              <button
+                type="button"
+                class="text-[11px] text-gray-400 hover:text-gray-600"
+                @click.stop="markRead(item)"
+                title="Skrij obvestilo"
+              >
+                Skrij
+              </button>
             </div>
           </li>
         </ul>

resources/js/Pages/Cases/Index.vue

@@ -1,38 +1,17 @@
 <script setup>
 import AppLayout from "@/Layouts/AppLayout.vue";
-import Pagination from "@/Components/Pagination.vue";
 import SectionTitle from "@/Components/SectionTitle.vue";
 import { Link, router } from "@inertiajs/vue3";
-import { debounce } from "lodash";
-import { ref, watch, onUnmounted } from "vue";
+import { ref } from "vue";
+import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
 
 const props = defineProps({
   client_cases: Object,
   filters: Object,
 });
 
-// Search state (initialize from server-provided filters)
+// Initial search for DataTable toolbar
 const search = ref(props.filters?.search || "");
-const applySearch = debounce((term) => {
-  const params = Object.fromEntries(
-    new URLSearchParams(window.location.search).entries()
-  );
-  if (term) {
-    params.search = term;
-  } else {
-    delete params.search;
-  }
-  // Reset paginator key used by backend: 'client-cases-page'
-  delete params["client-cases-page"];
-  delete params.page;
-  router.get(route("clientCase"), params, {
-    preserveState: true,
-    replace: true,
-    preserveScroll: true,
-  });
-}, 300);
-watch(search, (v) => applySearch(v));
-onUnmounted(() => applySearch.cancel && applySearch.cancel());
 
 // Format helpers
 const fmtCurrency = (v) => {
@@ -53,79 +32,85 @@ const fmtCurrency = (v) => {
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
         <div class="px-3 bg-white overflow-hidden shadow-xl sm:rounded-lg">
           <div class="mx-auto max-w-4x1 py-3">
-            <div class="flex items-center justify-between gap-3 pb-3">
+            <div class="pb-3">
               <SectionTitle>
                 <template #title>Primeri</template>
               </SectionTitle>
-              <input
-                v-model="search"
-                type="text"
-                placeholder="Iskanje po imenu"
-                class="w-full sm:w-80 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
-              />
-            </div>
-            <div class="overflow-x-auto">
-              <table class="min-w-full text-left text-sm">
-                <thead>
-                  <tr class="border-b">
-                    <th class="py-2 pr-4">Št.</th>
-                    <th class="py-2 pr-4">Primer</th>
-                    <th class="py-2 pr-4">Stranka</th>
-                    <th class="py-2 pr-4">Davčna</th>
-                    <th class="py-2 pr-4 text-right">Aktivne pogodbe</th>
-                    <th class="py-2 pr-4 text-right">Skupaj stanje</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr
-                    v-for="c in client_cases.data"
-                    :key="c.uuid"
-                    class="border-b last:border-0"
-                  >
-                    <td class="py-2 pr-4">{{ c.person?.nu || "-" }}</td>
-                    <td class="py-2 pr-4">
-                      <Link
-                        :href="route('clientCase.show', { client_case: c.uuid })"
-                        class="text-indigo-600 hover:underline"
-                      >
-                        {{ c.person?.full_name || "-" }}
-                      </Link>
-                      <button
-                        v-if="!c.person"
-                        @click.prevent="
-                          router.post(
-                            route('clientCase.emergencyPerson', { client_case: c.uuid })
-                          )
-                        "
-                        class="ml-2 inline-flex items-center rounded bg-red-50 px-2 py-0.5 text-xs font-semibold text-red-600 hover:bg-red-100 border border-red-200"
-                        title="Emergency: recreate missing person"
-                      >
-                        Add Person
-                      </button>
-                    </td>
-                    <td class="py-2 pr-4">{{ c.client?.person?.full_name || "-" }}</td>
-
-                    <td class="py-2 pr-4">{{ c.person?.tax_number || "-" }}</td>
-                    <td class="py-2 pr-4 text-right">
-                      {{ c.active_contracts_count ?? 0 }}
-                    </td>
-                    <td class="py-2 pr-4 text-right">
-                      {{ fmtCurrency(c.active_contracts_balance_sum) }}
-                    </td>
-                  </tr>
-                  <tr v-if="!client_cases.data || client_cases.data.length === 0">
-                    <td colspan="6" class="py-4 text-gray-500">Ni zadetkov.</td>
-                  </tr>
-                </tbody>
-              </table>
             </div>
+            <DataTableServer
+              :columns="[
+                { key: 'nu', label: 'Št.', sortable: false, class: 'w-40' },
+                { key: 'case', label: 'Primer', sortable: false },
+                { key: 'client', label: 'Stranka', sortable: false },
+                { key: 'tax', label: 'Davčna', sortable: false },
+                {
+                  key: 'active_contracts',
+                  label: 'Aktivne pogodbe',
+                  sortable: false,
+                  align: 'right',
+                },
+                {
+                  key: 'balance',
+                  label: 'Skupaj stanje',
+                  sortable: false,
+                  align: 'right',
+                },
+              ]"
+              :rows="client_cases.data || []"
+              :meta="{
+                current_page: client_cases.current_page,
+                per_page: client_cases.per_page,
+                total: client_cases.total,
+                last_page: client_cases.last_page,
+              }"
+              :search="search"
+              route-name="clientCase"
+              page-param-name="client-cases-page"
+              :only-props="['client_cases']"
+            >
+              <template #cell-nu="{ row }">
+                {{ row.person?.nu || "-" }}
+              </template>
+              <template #cell-case="{ row }">
+                <Link
+                  :href="route('clientCase.show', { client_case: row.uuid })"
+                  class="text-indigo-600 hover:underline"
+                >
+                  {{ row.person?.full_name || "-" }}
+                </Link>
+                <button
+                  v-if="!row.person"
+                  @click.prevent="
+                    router.post(
+                      route('clientCase.emergencyPerson', { client_case: row.uuid })
+                    )
+                  "
+                  class="ml-2 inline-flex items-center rounded bg-red-50 px-2 py-0.5 text-xs font-semibold text-red-600 hover:bg-red-100 border border-red-200"
+                  title="Emergency: recreate missing person"
+                >
+                  Add Person
+                </button>
+              </template>
+              <template #cell-client="{ row }">
+                {{ row.client?.person?.full_name || "-" }}
+              </template>
+              <template #cell-tax="{ row }">
+                {{ row.person?.tax_number || "-" }}
+              </template>
+              <template #cell-active_contracts="{ row }">
+                <div class="text-right">{{ row.active_contracts_count ?? 0 }}</div>
+              </template>
+              <template #cell-balance="{ row }">
+                <div class="text-right">
+                  {{ fmtCurrency(row.active_contracts_balance_sum) }}
+                </div>
+              </template>
+              <template #empty>
+                <div class="p-6 text-center text-gray-500">Ni zadetkov.</div>
+              </template>
+            </DataTableServer>
           </div>
-          <Pagination
-            :links="client_cases.links"
-            :from="client_cases.from"
-            :to="client_cases.to"
-            :total="client_cases.total"
-          />
+          <!-- Pagination handled by DataTableServer -->
         </div>
       </div>
     </div>

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

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from "vue";
-import { router } from "@inertiajs/vue3";
+import { Link, router } from "@inertiajs/vue3";
 import Dropdown from "@/Components/Dropdown.vue";
 import ConfirmationModal from "@/Components/ConfirmationModal.vue";
 import SecondaryButton from "@/Components/SecondaryButton.vue";
@@ -107,7 +107,19 @@ const confirmDeleteAction = () => {
             :key="row.id"
             class="border-b last:border-b-0"
           >
-            <td class="py-2 pr-4 align-top">{{ row.contract?.reference || "" }}</td>
+            <td class="py-2 pr-4 align-top">
+              <template v-if="row.contract?.reference">
+                {{ row.contract.reference }}
+              </template>
+              <template v-else>
+                <Link
+                  :href="route('clientCase.show', { client_case: client_case.uuid })"
+                  class="text-indigo-600 hover:underline"
+                >
+                  {{ client_case?.person?.full_name || "—" }}
+                </Link>
+              </template>
+            </td>
             <td class="py-2 pr-4 align-top">
               <div class="flex flex-col gap-1">
                 <span

resources/js/Pages/Cases/Show.vue

@@ -258,7 +258,6 @@ const submitAttachSegment = () => {
               :types="types"
               tab-color="red-600"
               :person="client_case.person"
-              
             />
           </div>
         </div>

resources/js/Pages/Client/Contracts.vue

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

resources/js/Pages/Client/Index.vue

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

resources/js/Pages/Client/Show.vue

@@ -1,13 +1,12 @@
 <script setup>
 import AppLayout from "@/Layouts/AppLayout.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
-import { ref, watch } from "vue";
-import { Link, router } from "@inertiajs/vue3";
+import { ref } from "vue";
+import { Link } from "@inertiajs/vue3";
 import SectionTitle from "@/Components/SectionTitle.vue";
 import PersonInfoGrid from "@/Components/PersonInfoGrid.vue";
-import Pagination from "@/Components/Pagination.vue";
 import FormCreateCase from "./Partials/FormCreateCase.vue";
-import { debounce } from "lodash";
+import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
 
 const props = defineProps({
   client: Object,
@@ -17,25 +16,9 @@ const props = defineProps({
   types: Object,
 });
 
-// Table-friendly search for client cases
+// Removed page-level search; DataTable or server can handle filtering elsewhere if needed
+// DataTable search state
 const search = ref(props.filters?.search || "");
-const applySearch = debounce((term) => {
-  const params = Object.fromEntries(
-    new URLSearchParams(window.location.search).entries()
-  );
-  if (term) {
-    params.search = term;
-  } else {
-    delete params.search;
-  }
-  delete params.page;
-  router.get(route("client.show", { uuid: props.client.uuid }), params, {
-    preserveState: true,
-    replace: true,
-    preserveScroll: true,
-  });
-}, 300);
-watch(search, (v) => applySearch(v));
 
 const drawerCreateCase = ref(false);
 
@@ -60,19 +43,36 @@ const openDrawerCreateCase = () => {
                 </template>
               </SectionTitle>
             </div>
-            <div class="mt-2 flex items-center gap-3 text-sm">
-              <Link
-                :href="route('client.show', { uuid: client.uuid })"
-                class="px-2 py-1 rounded hover:underline"
-                >Primeri</Link
-              >
-              <span class="text-gray-300">|</span>
-              <Link
-                :href="route('client.contracts', { uuid: client.uuid })"
-                class="px-2 py-1 rounded text-indigo-600 hover:underline"
-                >Pogodbe</Link
-              >
-            </div>
+            <nav class="mt-2 border-b border-gray-200">
+              <ul class="flex gap-6 -mb-px">
+                <li>
+                  <Link
+                    :href="route('client.show', { uuid: client.uuid })"
+                    :class="[
+                      'inline-flex items-center px-3 py-2 text-sm font-medium border-b-2',
+                      route().current('client.show')
+                        ? 'text-indigo-600 border-indigo-600'
+                        : 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300'
+                    ]"
+                  >
+                    Primeri
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    :href="route('client.contracts', { uuid: client.uuid })"
+                    :class="[
+                      'inline-flex items-center px-3 py-2 text-sm font-medium border-b-2',
+                      route().current('client.contracts')
+                        ? 'text-indigo-600 border-indigo-600'
+                        : 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300'
+                    ]"
+                  >
+                    Pogodbe
+                  </Link>
+                </li>
+              </ul>
+            </nav>
           </div>
         </div>
       </div>
@@ -97,65 +97,72 @@ const openDrawerCreateCase = () => {
               <PrimaryButton @click="openDrawerCreateCase" class="bg-blue-400"
                 >Dodaj</PrimaryButton
               >
-              <input
-                v-model="search"
-                type="text"
-                placeholder="Iskanje po imenu"
-                class="w-full sm:w-80 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
-              />
-            </div>
-            <div class="overflow-x-auto mt-3">
-              <table class="min-w-full text-left text-sm">
-                <thead>
-                  <tr class="border-b">
-                    <th class="py-2 pr-4">Št.</th>
-                    <th class="py-2 pr-4">Primer</th>
-                    <th class="py-2 pr-4">Davčna</th>
-                    <th class="py-2 pr-4 text-right">Aktivne pogodbe</th>
-                    <th class="py-2 pr-4 text-right">Skupaj stanje</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr
-                    v-for="c in client_cases.data"
-                    :key="c.uuid"
-                    class="border-b last:border-0"
-                  >
-                    <td class="py-2 pr-4">{{ c.person?.nu || "-" }}</td>
-                    <td class="py-2 pr-4">
-                      <Link
-                        :href="route('clientCase.show', { client_case: c.uuid })"
-                        class="text-indigo-600 hover:underline"
-                      >
-                        {{ c.person?.full_name || "-" }}
-                      </Link>
-                    </td>
-                    <td class="py-2 pr-4">{{ c.person?.tax_number || "-" }}</td>
-                    <td class="py-2 pr-4 text-right">
-                      {{ c.active_contracts_count ?? 0 }}
-                    </td>
-                    <td class="py-2 pr-4 text-right">
-                      {{
-                        new Intl.NumberFormat("sl-SI", {
-                          style: "currency",
-                          currency: "EUR",
-                        }).format(Number(c.active_contracts_balance_sum ?? 0))
-                      }}
-                    </td>
-                  </tr>
-                  <tr v-if="!client_cases.data || client_cases.data.length === 0">
-                    <td colspan="5" class="py-4 text-gray-500">Ni zadetkov.</td>
-                  </tr>
-                </tbody>
-              </table>
             </div>
+            <DataTableServer
+              class="mt-3"
+              :columns="[
+                { key: 'nu', label: 'Št.', sortable: false, class: 'w-40' },
+                { key: 'case', label: 'Primer', sortable: false },
+                { key: 'tax', label: 'Davčna', sortable: false },
+                {
+                  key: 'active_contracts',
+                  label: 'Aktivne pogodbe',
+                  sortable: false,
+                  align: 'right',
+                },
+                {
+                  key: 'balance',
+                  label: 'Skupaj stanje',
+                  sortable: false,
+                  align: 'right',
+                },
+              ]"
+              :rows="client_cases.data || []"
+              :meta="{
+                current_page: client_cases.current_page,
+                per_page: client_cases.per_page,
+                total: client_cases.total,
+                last_page: client_cases.last_page,
+              }"
+              route-name="client.show"
+              :route-params="{ uuid: client.uuid }"
+              row-key="uuid"
+              :search="search"
+              :only-props="['client_cases']"
+            >
+              <template #cell-nu="{ row }">
+                {{ row.person?.nu || "-" }}
+              </template>
+              <template #cell-case="{ row }">
+                <Link
+                  :href="route('clientCase.show', { client_case: row.uuid })"
+                  class="text-indigo-600 hover:underline"
+                >
+                  {{ row.person?.full_name || "-" }}
+                </Link>
+              </template>
+              <template #cell-tax="{ row }">
+                {{ row.person?.tax_number || "-" }}
+              </template>
+              <template #cell-active_contracts="{ row }">
+                <div class="text-right">{{ row.active_contracts_count ?? 0 }}</div>
+              </template>
+              <template #cell-balance="{ row }">
+                <div class="text-right">
+                  {{
+                    new Intl.NumberFormat("sl-SI", {
+                      style: "currency",
+                      currency: "EUR",
+                    }).format(Number(row.active_contracts_balance_sum ?? 0))
+                  }}
+                </div>
+              </template>
+              <template #empty>
+                <div class="p-6 text-center text-gray-500">Ni zadetkov.</div>
+              </template>
+            </DataTableServer>
           </div>
-          <Pagination
-            :links="client_cases.links"
-            :from="client_cases.from"
-            :to="client_cases.to"
-            :total="client_cases.total"
-          />
+          <!-- Pagination handled by DataTableServer -->
         </div>
       </div>
     </div>

resources/js/Pages/Imports/Import.vue

@@ -82,6 +82,74 @@ const previewColumns = ref([]);
 const previewTruncated = ref(false);
 const previewLimit = ref(200);
 
+// Import options (persisted on Import): show_missing and reactivate
+const showMissingEnabled = ref(Boolean(props.import?.show_missing ?? false));
+const reactivateEnabled = ref(Boolean(props.import?.reactivate ?? false));
+
+async function saveImportOptions() {
+  if (!importId.value) return;
+  try {
+    await axios.post(
+      route("imports.options", { import: importId.value }),
+      {
+        show_missing: !!showMissingEnabled.value,
+        // keep existing reactivate value if UI doesn't expose it here
+        reactivate: !!reactivateEnabled.value,
+      },
+      { headers: { Accept: "application/json" }, withCredentials: true }
+    );
+  } catch (e) {
+    console.error(
+      "Save import options failed",
+      e.response?.status || "",
+      e.response?.data || e
+    );
+  }
+}
+
+// Missing contracts (post-finish) UI state
+const showMissingContracts = ref(false);
+const missingContractsLoading = ref(false);
+const missingContracts = ref([]);
+const contractRefIsKeyref = computed(() => {
+  return (persistedMappings.value || []).some((m) => {
+    const tf = String(m?.target_field || "")
+      .toLowerCase()
+      .trim();
+    const am = String(m?.apply_mode || "")
+      .toLowerCase()
+      .trim();
+    return ["contract.reference", "contracts.reference"].includes(tf) && am === "keyref";
+  });
+});
+const canShowMissingButton = computed(() => {
+  return contractRefIsKeyref.value && !!showMissingEnabled.value;
+});
+async function openMissingContracts() {
+  if (!importId.value || !contractRefIsKeyref.value) return;
+  showMissingContracts.value = true;
+  missingContractsLoading.value = true;
+  try {
+    const { data } = await axios.get(
+      route("imports.missing-contracts", { import: importId.value }),
+      {
+        headers: { Accept: "application/json" },
+        withCredentials: true,
+      }
+    );
+    missingContracts.value = Array.isArray(data?.missing) ? data.missing : [];
+  } catch (e) {
+    console.error(
+      "Missing contracts fetch failed",
+      e.response?.status || "",
+      e.response?.data || e
+    );
+    missingContracts.value = [];
+  } finally {
+    missingContractsLoading.value = false;
+  }
+}
+
 // Determine if all detected columns are mapped with entity+field
 function evaluateMappingSaved() {
   console.log("here the evaluation happen of mapping save!");
@@ -1028,6 +1096,11 @@ async function fetchSimulation() {
             :class="['px-2 py-0.5 rounded-full text-xs font-medium', statusInfo.classes]"
             >{{ statusInfo.label }}</span
           >
+          <span
+            v-if="showMissingEnabled"
+            class="text-[10px] px-1 py-0.5 rounded bg-amber-100 text-amber-700 align-middle"
+            >seznam manjkajočih</span
+          >
         </div>
       </div>
     </template>
@@ -1065,6 +1138,22 @@ async function fetchSimulation() {
                 <span class="font-medium">{{ props.import?.valid_rows ?? "—" }}</span>
               </div>
             </div>
+            <div class="mt-3 flex items-center gap-2">
+              <button
+                class="px-3 py-1.5 bg-gray-700 text-white text-xs rounded"
+                @click.prevent="openPreview"
+              >
+                Ogled CSV
+              </button>
+              <button
+                v-if="canShowMissingButton"
+                class="px-3 py-1.5 bg-indigo-600 text-white text-xs rounded"
+                @click.prevent="openMissingContracts"
+                title="Prikaži aktivne pogodbe, ki niso bile prisotne v uvozu (samo keyref)"
+              >
+                Ogled manjkajoče
+              </button>
+            </div>
           </div>
           <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
             <TemplateControls
@@ -1096,6 +1185,24 @@ async function fetchSimulation() {
               "
               @apply-template="applyTemplateToImport"
             />
+            <!-- Import options -->
+            <div v-if="!isCompleted" class="mt-2 p-3 rounded border bg-gray-50">
+              <div class="flex items-center gap-3">
+                <label class="inline-flex items-center text-sm text-gray-700">
+                  <input
+                    type="checkbox"
+                    class="rounded mr-2"
+                    v-model="showMissingEnabled"
+                    @change="saveImportOptions"
+                  />
+                  <span>Seznam manjkajočih (po končanem uvozu)</span>
+                </label>
+              </div>
+              <p class="mt-1 text-xs text-gray-500">
+                Ko je omogočeno in je "contract.reference" nastavljen na keyref, bo po
+                končanem uvozu na voljo gumb za ogled pogodb, ki jih ni v datoteki.
+              </p>
+            </div>
             <ChecklistSteps :steps="stepStates" :missing-critical="missingCritical" />
           </div>
 
@@ -1173,6 +1280,57 @@ async function fetchSimulation() {
     @change-limit="(val) => (previewLimit = val)"
     @refresh="fetchPreview"
   />
+  <!-- Missing contracts modal -->
+  <Modal
+    :show="showMissingContracts"
+    max-width="2xl"
+    @close="showMissingContracts = false"
+  >
+    <div class="p-4 max-h-[70vh] overflow-auto">
+      <div class="flex items-center justify-between mb-4">
+        <h3 class="font-semibold text-lg">Manjkajoče pogodbe (aktivne, ne-arhivirane)</h3>
+        <button
+          class="text-gray-500 hover:text-gray-700"
+          @click.prevent="showMissingContracts = false"
+        >
+          Zapri
+        </button>
+      </div>
+      <div v-if="missingContractsLoading" class="py-8 text-center text-sm text-gray-500">
+        Nalagam …
+      </div>
+      <div v-else>
+        <div v-if="!missingContracts.length" class="py-6 text-sm text-gray-600">
+          Ni zadetkov.
+        </div>
+        <ul v-else class="divide-y divide-gray-200">
+          <li
+            v-for="row in missingContracts"
+            :key="row.uuid"
+            class="py-2 text-sm flex items-center justify-between"
+          >
+            <div class="min-w-0">
+              <div class="font-mono text-gray-800">{{ row.reference }}</div>
+              <div class="text-xs text-gray-500 truncate">
+                <span class="font-medium text-gray-600">Primer: </span>
+                <span>{{ row.full_name || "—" }}</span>
+                <span v-if="row.balance_amount != null" class="ml-2"
+                  >• {{ formatMoney(row.balance_amount) }}</span
+                >
+              </div>
+            </div>
+            <div class="flex-shrink-0">
+              <a
+                :href="route('clientCase.show', row.case_uuid)"
+                class="text-blue-600 hover:underline text-xs"
+                >Odpri primer</a
+              >
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </Modal>
   <SimulationModal
     :show="showPaymentSim"
     :rows="paymentSimRows"

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

@@ -11,10 +11,21 @@ const props = defineProps({
   limit: { type: Number, default: 50 },
   loading: { type: Boolean, default: false },
   entities: { type: Array, default: () => [] },
+  // passthrough verbose from parent to render extra sources in table
+  verbose: { type: Boolean, default: false },
 });
 
 // Emits
-const emit = defineEmits(["close", "update:limit"]);
+const emit = defineEmits(["close", "update:limit", "toggle-verbose"]);
+
+// Local handlers for header controls
+function onLimit(e) {
+  const val = Number(e?.target?.value ?? props.limit ?? 50);
+  emit("update:limit", isNaN(val) ? 50 : val);
+}
+function toggleVerbose() {
+  emit("toggle-verbose");
+}
 
 // Map technical entity keys to localized labels
 const entityLabelMap = {
@@ -70,6 +81,8 @@ const entitiesWithRows = computed(() => {
 const activeEntity = ref(null);
 const hideChain = ref(false);
 const showOnlyChanged = ref(false);
+// Show only rows skipped due to missing contract.reference in keyref mode (contract/account)
+const showOnlyKeyrefSkipped = ref(false);
 watch(
   entitiesWithRows,
   (val) => {
@@ -156,6 +169,15 @@ const visibleRows = computed(() => {
     .filter((r) => {
       if (!r.entities || !r.entities[activeEntity.value]) return false;
       const ent = r.entities[activeEntity.value];
+      // Filter: only rows explicitly skipped due to keyref missing
+      if (showOnlyKeyrefSkipped.value) {
+        if (Array.isArray(ent)) {
+          const anySkipped = ent.some((i) => i && i.skipped_due_to_keyref);
+          if (!anySkipped) return false;
+        } else {
+          if (!ent.skipped_due_to_keyref) return false;
+        }
+      }
       if (!Array.isArray(ent)) {
         if (hideChain.value && ent.existing_chain) return false;
       }
@@ -286,7 +308,7 @@ function referenceOf(entityName, ent) {
             class="text-[11px] px-2 py-1 rounded border bg-white hover:bg-gray-50"
             @click="toggleVerbose"
           >
-            {{ verbose ? "Manj" : "Več" }} podrobnosti
+            {{ props.verbose ? "Manj" : "Več" }} podrobnosti
           </button>
           <label class="flex items-center gap-1 text-[11px] text-gray-600">
             <input type="checkbox" v-model="hideChain" class="rounded border-gray-300" />
@@ -300,6 +322,14 @@ function referenceOf(entityName, ent) {
             />
             Samo spremenjeni
           </label>
+          <label class="flex items-center gap-1 text-[11px] text-gray-600" title="Prikaži le vrstice preskočene zaradi manjkajoče contract.reference v načinu keyref (pogodbe/računi)">
+            <input
+              type="checkbox"
+              v-model="showOnlyKeyrefSkipped"
+              class="rounded border-gray-300"
+            />
+            Samo preskočene (keyref)
+          </label>
           <button
             type="button"
             class="text-[11px] px-2 py-1 rounded bg-gray-800 text-white hover:bg-gray-700"

resources/js/Pages/Notifications/Unread.vue

@@ -0,0 +1,102 @@
+<script setup>
+import AppLayout from '@/Layouts/AppLayout.vue'
+import SectionTitle from '@/Components/SectionTitle.vue'
+import DataTableServer from '@/Components/DataTable/DataTableServer.vue'
+import { Link, router } from '@inertiajs/vue3'
+
+const props = defineProps({
+  activities: { type: Object, required: true },
+  today: { type: String, required: true },
+})
+
+function fmtDate(d) {
+  if (!d) return ''
+  try { return new Date(d).toLocaleDateString('sl-SI') } catch { return String(d) }
+}
+function fmtEUR(value) {
+  if (value === null || value === undefined) return '—'
+  const num = typeof value === 'string' ? Number(value) : value
+  if (Number.isNaN(num)) return String(value)
+  const formatted = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(num)
+  return formatted.replace('\u00A0', ' ')
+}
+
+async function markRead(id) {
+  try {
+    await window.axios.post(route('notifications.activity.read'), { activity_id: id })
+    router.reload({ only: ['activities'] })
+  } catch (e) {}
+}
+</script>
+
+<template>
+  <AppLayout title="Obvestila">
+    <template #header></template>
+    <div class="py-12">
+      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+        <div class="px-3 bg-white overflow-hidden shadow-xl sm:rounded-lg">
+          <div class="mx-auto max-w-4x1 py-3">
+            <div class="pb-3">
+              <SectionTitle>
+                <template #title>Neprikazana obvestila</template>
+                <template #description>Do danes: {{ fmtDate(today) }}</template>
+              </SectionTitle>
+            </div>
+
+            <DataTableServer
+              :columns="[
+                { key: 'what', label: 'Kaj', sortable: false },
+                { key: 'balance', label: 'Stanje', sortable: false, align: 'right', class: 'w-40' },
+                { key: 'due', label: 'Zapadlost', sortable: true, class: 'w-28' },
+              ]"
+              :rows="activities.data || []"
+              :meta="{
+                current_page: activities.current_page,
+                per_page: activities.per_page,
+                total: activities.total,
+                last_page: activities.last_page,
+              }"
+              route-name="notifications.unread"
+              page-param-name="unread-page"
+              :only-props="['activities']"
+            >
+              <template #cell-what="{ row }">
+                <div class="font-medium text-gray-800 truncate">
+                  <template v-if="row.contract?.uuid">
+                    Pogodba:
+                    <Link v-if="row.contract?.client_case?.uuid" :href="route('clientCase.show', { client_case: row.contract.client_case.uuid })" class="text-indigo-600 hover:underline">
+                      {{ row.contract?.reference || '—' }}
+                    </Link>
+                    <span v-else>{{ row.contract?.reference || '—' }}</span>
+                  </template>
+                  <template v-else>
+                    Primer:
+                    <Link v-if="row.client_case?.uuid" :href="route('clientCase.show', { client_case: row.client_case.uuid })" class="text-indigo-600 hover:underline">
+                      {{ row.client_case?.person?.full_name || '—' }}
+                    </Link>
+                    <span v-else>{{ row.client_case?.person?.full_name || '—' }}</span>
+                  </template>
+                </div>
+              </template>
+              <template #cell-balance="{ row }">
+                <div class="text-right">
+                  <span v-if="row.contract">{{ fmtEUR(row.contract?.account?.balance_amount) }}</span>
+                  <span v-else>—</span>
+                </div>
+              </template>
+              <template #cell-due="{ row }">
+                {{ fmtDate(row.due_date) }}
+              </template>
+              <template #actions="{ row }">
+                <button type="button" class="text-[12px] text-gray-500 hover:text-gray-700" @click="markRead(row.id)">Označi kot prikazano</button>
+              </template>
+              <template #empty>
+                <div class="p-6 text-center text-gray-500">Trenutno ni neprikazanih obvestil.</div>
+              </template>
+            </DataTableServer>
+          </div>
+        </div>
+      </div>
+    </div>
+  </AppLayout>
+</template>

resources/js/Pages/Testing/Index.vue

@@ -1,21 +1,98 @@
 <script setup>
-import AppLayout from '@/Layouts/AppLayout.vue'
+import { ref } from "vue";
+import AppLayout from "@/Layouts/AppLayout.vue";
+import DataTableClient from "@/Components/DataTable/DataTableClient.vue";
 
 const props = defineProps({
-  example: { type: String, default: 'Demo' },
-})
+  example: { type: String, default: "Demo" },
+});
+
+// Dummy columns
+const columns = [
+  { key: "id", label: "ID", sortable: true, class: "w-16" },
+  { key: "name", label: "Ime", sortable: true },
+  { key: "email", label: "Email", sortable: true },
+  {
+    key: "balance",
+    label: "Stanje",
+    sortable: true,
+    align: "right",
+    formatter: (row) =>
+      new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(
+        row.balance
+      ),
+  },
+  { key: "created_at", label: "Ustvarjeno", sortable: true },
+];
+
+// Generate some dummy rows
+function makeRow(i) {
+  const bal = Math.round((Math.random() * 5000 - 1000) * 100) / 100;
+  const dt = new Date(Date.now() - Math.floor(Math.random() * 1000 * 60 * 60 * 24 * 90));
+  const iso = dt.toISOString().slice(0, 10);
+  return {
+    id: i + 1,
+    name: `Uporabnik ${i + 1}`,
+    email: `user${i + 1}@example.com`,
+    balance: bal,
+    created_at: iso,
+  };
+}
+// Increase dataset to visualize multi-page pagination (e.g., 100 pages at size 10)
+const rows = ref(Array.from({ length: 1000 }, (_, i) => makeRow(i)));
+
+// Controls (two-way bound)
+const sort = ref({ key: null, direction: null });
+const search = ref("");
+const page = ref(1);
+const pageSize = ref(10);
+const searchKeys = ["name", "email"];
+
+function onRowClick(row) {
+  // no-op demo; could show toast or details
+  console.debug("Row clicked:", row);
+}
 </script>
 
 <template>
   <AppLayout title="Testing Sandbox">
-    <div class="space-y-6">
+    <div class="space-y-6 p-6">
       <div class="prose dark:prose-invert max-w-none">
         <h1 class="text-2xl font-semibold">Testing Page</h1>
-        <p>This page is for quick UI or component experiments. Remove or adapt as needed.</p>
+        <p>
+          This page is for quick UI or component experiments. Remove or adapt as needed.
+        </p>
+        <p class="text-slate-700 dark:text-slate-200 text-sm">
+          Prop example value: <span class="font-mono">{{ props.example }}</span>
+        </p>
       </div>
-      <div class="rounded-lg border border-slate-200 dark:border-slate-700 bg-white/70 dark:bg-slate-800/60 p-4 shadow-sm">
-        <h2 class="text-sm font-semibold tracking-wide uppercase text-slate-500 dark:text-slate-400 mb-3">Example Area</h2>
-        <p class="text-slate-700 dark:text-slate-200 text-sm">Prop example value: <span class="font-mono">{{ props.example }}</span></p>
+
+      <div
+        class="rounded-lg border border-slate-200 dark:border-slate-700 bg-white/70 dark:bg-slate-800/60 p-4 shadow-sm"
+      >
+        <h2
+          class="text-sm font-semibold tracking-wide uppercase text-slate-500 dark:text-slate-400 mb-3"
+        >
+          DataTable (Client-side)
+        </h2>
+        <DataTableClient
+          :columns="columns"
+          :rows="rows"
+          v-model:sort="sort"
+          v-model:search="search"
+          v-model:page="page"
+          v-model:pageSize="pageSize"
+          :search-keys="searchKeys"
+          @row:click="onRowClick"
+        >
+          <template #actions="{ row }">
+            <button
+              class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 text-xs"
+            >
+              Akcija
+            </button>
+          </template>
+        </DataTableClient>
       </div>
     </div>
   </AppLayout>