Updated client contract table and notification table, multiselect

2025-11-18 21:46:22 +01:00
parent 8125b4d321
commit edbdb64102
14 changed files with 672 additions and 111 deletions
@@ -171,7 +171,7 @@ function goToPageInput() {

 <template>
  <div class="w-full">
-    <div v-if="showToolbar" class="mb-3 flex items-center justify-between gap-3">
+    <div v-if="showToolbar" class="mb-3 flex items-center gap-3">
      <div class="flex items-center gap-2">
        <input
          type="text"
@@ -180,7 +180,8 @@ function goToPageInput() {
          v-model="internalSearch"
        />
      </div>
-      <div class="flex items-center gap-2">
+      <slot name="toolbar-extra" />
+      <div class="ml-auto flex items-center gap-2">
        <label class="text-sm text-gray-600">Na stran</label>
        <select
          class="rounded border-gray-300 text-sm"
@@ -202,20 +203,25 @@ function goToPageInput() {
          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 class="uppercase">{{ 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
+            <template v-if="$slots['header-' + col.key]">
+              <slot :name="'header-' + col.key" :column="col" />
+            </template>
+            <template v-else>
+              <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'"
              >
-            </button>
-            <span v-else>{{ col.label }}</span>
+                <span class="uppercase">{{ 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>
+            </template>
          </FwbTableHeadCell>
          <FwbTableHeadCell v-if="$slots.actions" class="w-px">&nbsp;</FwbTableHeadCell>
        </FwbTableHead>
@@ -1,6 +1,6 @@
 <script setup>
 import AdminLayout from "@/Layouts/AdminLayout.vue";
-import { useForm, Link } from "@inertiajs/vue3";
+import { useForm, Link, router } from "@inertiajs/vue3";
 import { ref, computed } from "vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { faMagnifyingGlass, faFloppyDisk, faPlus } from "@fortawesome/free-solid-svg-icons";
@@ -103,6 +103,12 @@ function toggleCreateRole(roleId) {
    ? createForm.roles.filter((id) => id !== roleId)
    : [...createForm.roles, roleId];
 }
+
+function toggleUserActive(userId) {
+  router.patch(route("admin.users.toggle-active", { user: userId }), {}, {
+    preserveScroll: true,
+  });
+}
 </script>

 <template>
@@ -197,6 +203,9 @@ function toggleCreateRole(roleId) {
                <th class="p-2 text-left font-medium text-[11px] uppercase tracking-wide">
                  Uporabnik
                </th>
+                <th class="p-2 text-center font-medium text-[11px] uppercase tracking-wide">
+                  Status
+                </th>
                <th
                  v-for="role in props.roles"
                  :key="role.id"
@@ -218,6 +227,7 @@ function toggleCreateRole(roleId) {
                :class="[
                  'border-t border-slate-100',
                  idx % 2 === 1 ? 'bg-slate-50/40' : 'bg-white',
+                  !user.active && 'opacity-60',
                ]"
              >
                <td class="p-2 whitespace-nowrap align-top">
@@ -237,6 +247,19 @@ function toggleCreateRole(roleId) {
                    {{ user.email }}
                  </div>
                </td>
+                <td class="p-2 text-center align-top">
+                  <button
+                    @click="toggleUserActive(user.id)"
+                    class="inline-flex items-center px-2 py-1 rounded text-xs font-medium transition"
+                    :class="
+                      user.active
+                        ? 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200'
+                        : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                    "
+                  >
+                    {{ user.active ? 'Aktiven' : 'Neaktiven' }}
+                  </button>
+                </td>
                <td
                  v-for="role in props.roles"
                  :key="role.id"
@@ -269,7 +292,7 @@ function toggleCreateRole(roleId) {
              </tr>
              <tr v-if="!filteredUsers.length">
                <td
-                  :colspan="props.roles.length + 2"
+                  :colspan="props.roles.length + 3"
                  class="p-6 text-center text-sm text-gray-500"
                >
                  Ni rezultatov
@@ -1,10 +1,14 @@
 <script setup>
 import AppLayout from "@/Layouts/AppLayout.vue";
 import { ref } from "vue";
-import { Link, router } from "@inertiajs/vue3";
+import { Link, router, useForm } from "@inertiajs/vue3";
 import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
 import PersonInfoGrid from "@/Components/PersonInfoGrid.vue";
 import SectionTitle from "@/Components/SectionTitle.vue";
+import Multiselect from "vue-multiselect";
+import Dropdown from "@/Components/Dropdown.vue";
+import DialogModal from "@/Components/DialogModal.vue";
+import InputLabel from "@/Components/InputLabel.vue";

 const props = defineProps({
  client: Object,
@@ -17,7 +21,70 @@ const props = defineProps({
 const fromDate = ref(props.filters?.from || "");
 const toDate = ref(props.filters?.to || "");
 const search = ref(props.filters?.search || "");
-const selectedSegment = ref(props.filters?.segment || "");
+const selectedSegments = ref(
+  props.filters?.segments
+    ? props.segments.filter((s) => props.filters.segments.includes(s.id.toString()))
+    : []
+);
+const selectedRows = ref([]);
+const showSegmentModal = ref(false);
+const targetSegmentId = ref(null);
+const segmentForm = useForm({ segment_id: null, contracts: [] });
+
+function toggleSelectAll() {
+  if (selectedRows.value.length === props.contracts.data.length) {
+    selectedRows.value = [];
+  } else {
+    selectedRows.value = props.contracts.data.map((row) => row.uuid);
+  }
+}
+
+function toggleRowSelection(uuid) {
+  const index = selectedRows.value.indexOf(uuid);
+  if (index > -1) {
+    selectedRows.value.splice(index, 1);
+  } else {
+    selectedRows.value.push(uuid);
+  }
+}
+
+function isRowSelected(uuid) {
+  return selectedRows.value.includes(uuid);
+}
+
+function isAllSelected() {
+  return (
+    props.contracts.data.length > 0 &&
+    selectedRows.value.length === props.contracts.data.length
+  );
+}
+
+function isIndeterminate() {
+  return (
+    selectedRows.value.length > 0 &&
+    selectedRows.value.length < props.contracts.data.length
+  );
+}
+
+function openSegmentModal() {
+  if (!selectedRows.value.length) return;
+  targetSegmentId.value = null;
+  showSegmentModal.value = true;
+}
+
+function submitSegment() {
+  if (!targetSegmentId.value || !selectedRows.value.length) return;
+  segmentForm.segment_id = targetSegmentId.value;
+  segmentForm.contracts = [...selectedRows.value];
+  segmentForm.patch(route("contracts.segment"), {
+    preserveScroll: true,
+    onSuccess: () => {
+      showSegmentModal.value = false;
+      selectedRows.value = [];
+      router.reload({ only: ["contracts"] });
+    },
+  });
+}
 function applyDateFilter() {
  const params = Object.fromEntries(
    new URLSearchParams(window.location.search).entries()
@@ -37,10 +104,10 @@ function applyDateFilter() {
  } else {
    delete params.search;
  }
-  if (selectedSegment.value) {
-    params.segment = selectedSegment.value;
+  if (selectedSegments.value && selectedSegments.value.length > 0) {
+    params.segments = selectedSegments.value.map((s) => s.id).join(",");
  } else {
-    delete params.segment;
+    delete params.segments;
  }
  delete params.page;
  router.get(route("client.contracts", { uuid: props.client.uuid }), params, {
@@ -53,7 +120,7 @@ function applyDateFilter() {
 function clearDateFilter() {
  fromDate.value = "";
  toDate.value = "";
-  selectedSegment.value = "";
+  selectedSegments.value = [];
  applyDateFilter();
 }

@@ -110,7 +177,7 @@ function formatDate(value) {
                      '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'
+                        : 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300',
                    ]"
                  >
                    Primeri
@@ -123,7 +190,7 @@ function formatDate(value) {
                      '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'
+                        : 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300',
                    ]"
                  >
                    Pogodbe
@@ -154,57 +221,82 @@ function formatDate(value) {
      <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 flex-col gap-3 md:flex-row md:items-center md:justify-between"
-            >
-              <div class="flex items-center gap-3 flex-wrap">
-                <label class="font-medium mr-2">Filtri:</label>
-                <div class="flex items-center gap-2">
-                  <span class="text-sm text-gray-600">Od</span>
-                  <input
-                    type="date"
-                    v-model="fromDate"
-                    @change="applyDateFilter"
-                    class="rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
-                  />
+            <!-- Filters Section -->
+            <div class="bg-gray-50 rounded-lg border border-gray-200 p-3 mb-4">
+              <div class="flex flex-wrap items-center gap-x-6 gap-y-3">
+                <!-- Date Range -->
+                <div class="flex flex-col gap-3">
+                  <InputLabel value="Datum začetka" />
+                  <div class="flex items-center gap-2">
+                    <span class="text-xs text-gray-500">Od</span>
+                    <input
+                      type="date"
+                      v-model="fromDate"
+                      @change="applyDateFilter"
+                      class="rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 text-sm py-1.5"
+                    />
+                    <span class="text-xs text-gray-500">Do</span>
+                    <input
+                      type="date"
+                      v-model="toDate"
+                      @change="applyDateFilter"
+                      class="rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 text-sm py-1.5"
+                    />
+                  </div>
                </div>
-                <div class="flex items-center gap-2">
-                  <span class="text-sm text-gray-600">Do</span>
-                  <input
-                    type="date"
-                    v-model="toDate"
-                    @change="applyDateFilter"
-                    class="rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
-                  />
-                </div>
-                <div class="flex items-center gap-2">
-                  <span class="text-sm text-gray-600">Segment</span>
-                  <select
-                    v-model="selectedSegment"
-                    @change="applyDateFilter"
-                    class="rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
+
+                <!-- Segments -->
+                <div class="flex flex-col gap-3">
+                  <InputLabel for="segmentSelect" value="Segmenti" />
+                  <Multiselect
+                    v-model="selectedSegments"
+                    :options="segments"
+                    :multiple="true"
+                    :close-on-select="false"
+                    :clear-on-select="false"
+                    :preserve-search="true"
+                    :taggable="true"
+                    :append-to-body="true"
+                    placeholder="Izberi segmente"
+                    label="name"
+                    track-by="id"
+                    id="segmentSelect"
+                    :preselect-first="false"
+                    @update:modelValue="applyDateFilter"
+                    class="w-80"
                  >
-                    <option value="">Vsi segmenti</option>
-                    <option v-for="segment in segments" :key="segment.id" :value="segment.id">
-                      {{ segment.name }}
-                    </option>
-                  </select>
+                  </Multiselect>
                </div>
+
+                <!-- Clear Button -->
                <button
                  type="button"
-                  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 && !selectedSegment"
+                  class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition ml-auto"
+                  :disabled="!fromDate && !toDate && selectedSegments.length === 0"
                  @click="clearDateFilter"
-                  title="Počisti filtre"
                >
-                  Počisti
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-4 w-4 mr-1.5"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                  Počisti filtre
                </button>
              </div>
-              <!-- Search lives in DataTable toolbar -->
            </div>
            <DataTableServer
              class="mt-3"
              :columns="[
+                { key: 'select', label: '', sortable: false, width: '50px' },
                { key: 'reference', label: 'Referenca', sortable: false },
                { key: 'customer', label: 'Stranka', sortable: false },
                { key: 'start', label: 'Začetek', sortable: false },
@@ -212,37 +304,164 @@ function formatDate(value) {
                { 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 }"
+              :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, segment: selectedSegment || undefined }"
+              :query="{
+                from: fromDate || undefined,
+                to: toDate || undefined,
+                segments:
+                  selectedSegments.length > 0
+                    ? selectedSegments.map((s) => s.id).join(',')
+                    : undefined,
+              }"
              :search="search"
              row-key="uuid"
              :only-props="['contracts']"
            >
+              <template #toolbar-extra>
+                <div v-if="selectedRows.length" class="flex items-center gap-2">
+                  <div class="text-sm text-gray-700">
+                    Izbrano: <span class="font-medium">{{ selectedRows.length }}</span>
+                  </div>
+                  <Dropdown width="48" align="left">
+                    <template #trigger>
+                      <button
+                        type="button"
+                        class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md border border-gray-300 text-gray-700 bg-white hover:bg-gray-50"
+                      >
+                        Akcije
+                        <svg
+                          class="ml-1 h-4 w-4"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                          aria-hidden="true"
+                        >
+                          <path
+                            fill-rule="evenodd"
+                            d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z"
+                            clip-rule="evenodd"
+                          />
+                        </svg>
+                      </button>
+                    </template>
+                    <template #content>
+                      <button
+                        type="button"
+                        class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                        @click="openSegmentModal"
+                      >
+                        Preusmeri v segment
+                      </button>
+                    </template>
+                  </Dropdown>
+                </div>
+              </template>
+              <template #header-select>
+                <input
+                  type="checkbox"
+                  :checked="isAllSelected()"
+                  :indeterminate="isIndeterminate()"
+                  @change="toggleSelectAll"
+                  class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                />
+              </template>
+              <template #cell-select="{ row }">
+                <input
+                  type="checkbox"
+                  :checked="isRowSelected(row.uuid)"
+                  @change="toggleRowSelection(row.uuid)"
+                  class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                />
+              </template>
              <template #cell-reference="{ row }">
-                <Link :href="route('clientCase.show', caseShowParams(row))" class="text-indigo-600 hover:underline">
+                <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 || '-' }}
+                {{ row.client_case?.person?.full_name || "-" }}
              </template>
              <template #cell-start="{ row }">
                {{ formatDate(row.start_date) }}
              </template>
              <template #cell-segment="{ row }">
-                {{ row.segments?.[0]?.name || '-' }}
+                {{ 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)) }}
+                  {{
+                    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>
+
+            <!-- Segment Reassignment Modal -->
+            <DialogModal :show="showSegmentModal" @close="showSegmentModal = false">
+              <template #title> Preusmeri v segment </template>
+              <template #content>
+                <div class="space-y-3">
+                  <div class="text-sm text-gray-600">
+                    Število izbranih pogodb:
+                    <span class="font-medium">{{ selectedRows.length }}</span>
+                  </div>
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1"
+                      >Ciljni segment</label
+                    >
+                    <select
+                      v-model="targetSegmentId"
+                      class="w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+                    >
+                      <option :value="null" disabled>Izberi segment</option>
+                      <option v-for="seg in segments" :key="seg.id" :value="seg.id">
+                        {{ seg.name }}
+                      </option>
+                    </select>
+                    <div
+                      v-if="segmentForm.errors.segment_id"
+                      class="mt-1 text-sm text-red-600"
+                    >
+                      {{ segmentForm.errors.segment_id }}
+                    </div>
+                  </div>
+                </div>
+              </template>
+              <template #footer>
+                <button
+                  type="button"
+                  class="px-3 py-1.5 text-sm rounded-md border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 mr-2"
+                  @click="showSegmentModal = false"
+                >
+                  Prekliči
+                </button>
+                <button
+                  type="button"
+                  class="px-3 py-1.5 text-sm rounded-md bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50"
+                  :disabled="
+                    !targetSegmentId || !selectedRows.length || segmentForm.processing
+                  "
+                  @click="submitSegment"
+                >
+                  Potrdi
+                </button>
+              </template>
+            </DialogModal>
          </div>
          <!-- Pagination handled by DataTableServer -->
        </div>
@@ -4,6 +4,7 @@ import SectionTitle from "@/Components/SectionTitle.vue";
 import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
 import { Link, router } from "@inertiajs/vue3";
 import { ref, computed, watch } from "vue";
+import Dropdown from "@/Components/Dropdown.vue";

 const props = defineProps({
  activities: { type: Object, required: true },
@@ -40,19 +41,23 @@ const selectedClient = ref(initialClient);

 const clientOptions = computed(() => {
  // Prefer server-provided clients list; fallback to deriving from rows
-  const list = Array.isArray(props.clients) && props.clients.length
-    ? props.clients
-    : (Array.isArray(props.activities?.data) ? props.activities.data : [])
-        .map((row) => {
-          const client = row.contract?.client_case?.client || row.client_case?.client;
-          if (!client?.uuid) return null;
-          return { value: client.uuid, label: client.person?.full_name || "(neznana stranka)" };
-        })
-        .filter(Boolean)
-        .reduce((acc, cur) => {
-          if (!acc.find((x) => x.value === cur.value)) acc.push(cur);
-          return acc;
-        }, []);
+  const list =
+    Array.isArray(props.clients) && props.clients.length
+      ? props.clients
+      : (Array.isArray(props.activities?.data) ? props.activities.data : [])
+          .map((row) => {
+            const client = row.contract?.client_case?.client || row.client_case?.client;
+            if (!client?.uuid) return null;
+            return {
+              value: client.uuid,
+              label: client.person?.full_name || "(neznana stranka)",
+            };
+          })
+          .filter(Boolean)
+          .reduce((acc, cur) => {
+            if (!acc.find((x) => x.value === cur.value)) acc.push(cur);
+            return acc;
+          }, []);
  return list.sort((a, b) => (a.label || "").localeCompare(b.label || ""));
 });

@@ -67,12 +72,65 @@ watch(selectedClient, (val) => {
  });
 });

+const selectedRows = ref([]);
+
+function toggleSelectAll() {
+  if (selectedRows.value.length === (props.activities.data?.length || 0)) {
+    selectedRows.value = [];
+  } else {
+    selectedRows.value = (props.activities.data || []).map((row) => row.id);
+  }
+}
+
+function toggleRowSelection(id) {
+  const idx = selectedRows.value.indexOf(id);
+  if (idx > -1) {
+    selectedRows.value.splice(idx, 1);
+  } else {
+    selectedRows.value.push(id);
+  }
+}
+
+function isRowSelected(id) {
+  return selectedRows.value.includes(id);
+}
+
+function isAllSelected() {
+  return (
+    (props.activities.data?.length || 0) > 0 &&
+    selectedRows.value.length === (props.activities.data?.length || 0)
+  );
+}
+
+function isIndeterminate() {
+  return (
+    selectedRows.value.length > 0 &&
+    selectedRows.value.length < (props.activities.data?.length || 0)
+  );
+}
+
 function markRead(id) {
-  router.patch(route("notifications.activity.read"), 
+  router.patch(
+    route("notifications.activity.read"),
    { activity_id: id },
-    { 
+    {
      only: ["activities"],
-      preserveScroll: true 
+      preserveScroll: true,
+    }
+  );
+}
+
+function markReadBulk() {
+  if (!selectedRows.value.length) return;
+  router.patch(
+    route("notifications.activity.read"),
+    { activity_ids: selectedRows.value },
+    {
+      only: ["activities"],
+      preserveScroll: true,
+      onSuccess: () => {
+        selectedRows.value = [];
+      },
    }
  );
 }
@@ -95,14 +153,20 @@ function markRead(id) {
            <!-- Filters -->
            <div class="mb-4 flex items-center gap-3">
              <div class="flex-1 max-w-sm">
-                <label class="block text-sm font-medium text-gray-700 mb-1">Partner</label>
+                <label class="block text-sm font-medium text-gray-700 mb-1"
+                  >Partner</label
+                >
                <div class="flex items-center gap-2">
                  <select
                    v-model="selectedClient"
                    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
                  >
                    <option value="">Vsi partnerji</option>
-                    <option v-for="opt in clientOptions" :key="opt.value || opt.label" :value="opt.value">
+                    <option
+                      v-for="opt in clientOptions"
+                      :key="opt.value || opt.label"
+                      :value="opt.value"
+                    >
                      {{ opt.label }}
                    </option>
                  </select>
@@ -120,6 +184,7 @@ function markRead(id) {

            <DataTableServer
              :columns="[
+                { key: 'select', label: '', sortable: false, width: '50px' },
                { key: 'what', label: 'Zadeva', sortable: false },
                { key: 'partner', label: 'Partner', sortable: false },
                {
@@ -143,6 +208,61 @@ function markRead(id) {
              :only-props="['activities']"
              :query="{ client: selectedClient || undefined }"
            >
+              <template #toolbar-extra>
+                <div v-if="selectedRows.length" class="flex items-center gap-2">
+                  <div class="text-sm text-gray-700">
+                    Izbrano: <span class="font-medium">{{ selectedRows.length }}</span>
+                  </div>
+                  <Dropdown width="48" align="left">
+                    <template #trigger>
+                      <button
+                        type="button"
+                        class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md border border-gray-300 text-gray-700 bg-white hover:bg-gray-50"
+                      >
+                        Akcije
+                        <svg
+                          class="ml-1 h-4 w-4"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                          aria-hidden="true"
+                        >
+                          <path
+                            fill-rule="evenodd"
+                            d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z"
+                            clip-rule="evenodd"
+                          />
+                        </svg>
+                      </button>
+                    </template>
+                    <template #content>
+                      <button
+                        type="button"
+                        class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                        @click="markReadBulk"
+                      >
+                        Označi kot prebrano
+                      </button>
+                    </template>
+                  </Dropdown>
+                </div>
+              </template>
+              <template #header-select>
+                <input
+                  type="checkbox"
+                  :checked="isAllSelected()"
+                  :indeterminate="isIndeterminate()"
+                  @change="toggleSelectAll"
+                  class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                />
+              </template>
+              <template #cell-select="{ row }">
+                <input
+                  type="checkbox"
+                  :checked="isRowSelected(row.id)"
+                  @change="toggleRowSelection(row.id)"
+                  class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                />
+              </template>
              <template #cell-what="{ row }">
                <div class="font-medium text-gray-800 truncate">
                  <template v-if="row.contract?.uuid">
@@ -178,9 +298,9 @@ function markRead(id) {
              <template #cell-partner="{ row }">
                <div class="truncate">
                  {{
-                    (row.contract?.client_case?.client?.person?.full_name) ||
-                    (row.client_case?.client?.person?.full_name) ||
-                    '—'
+                    row.contract?.client_case?.client?.person?.full_name ||
+                    row.client_case?.client?.person?.full_name ||
+                    "—"
                  }}
                </div>
              </template>