Notifications change

resources/js/Pages/Notifications/Unread.vue

@@ -3,10 +3,13 @@ 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";
+import { ref, computed, watch } from "vue";
 
 const props = defineProps({
   activities: { type: Object, required: true },
   today: { type: String, required: true },
+  // Optional: full list of clients with unread items to populate filter dropdown
+  clients: { type: Array, default: () => [] },
 });
 
 function fmtDate(d) {
@@ -30,6 +33,39 @@ function fmtEUR(value) {
   return formatted.replace("\u00A0", " ");
 }
 
+// --- Client filter (like Segments/Show.vue) ---
+const urlParams = new URLSearchParams(window.location.search);
+const initialClient = urlParams.get("client") || urlParams.get("client_id") || "";
+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 cc = row.contract?.client_case || row.client_case;
+          return cc ? { value: cc.uuid, label: cc.person?.full_name || "(neznana stranka)" } : null;
+        })
+        .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 || ""));
+});
+
+watch(selectedClient, (val) => {
+  const query = {};
+  if (val) query.client = val;
+  router.get(route("notifications.unread"), query, {
+    preserveState: true,
+    preserveScroll: true,
+    only: ["activities"],
+    replace: true,
+  });
+});
+
 async function markRead(id) {
   try {
     await window.axios.post(route("notifications.activity.read"), { activity_id: id });
@@ -52,9 +88,36 @@ async function markRead(id) {
               </SectionTitle>
             </div>
 
+            <!-- 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>
+                <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">
+                      {{ opt.label }}
+                    </option>
+                  </select>
+                  <button
+                    v-if="selectedClient"
+                    type="button"
+                    class="text-sm text-gray-600 hover:text-gray-900"
+                    @click="selectedClient = ''"
+                  >
+                    Počisti
+                  </button>
+                </div>
+              </div>
+            </div>
+
             <DataTableServer
               :columns="[
                 { key: 'what', label: 'Zadeva', sortable: false },
+                { key: 'partner', label: 'Partner', sortable: false },
                 {
                   key: 'balance',
                   label: 'Stanje',
@@ -74,6 +137,7 @@ async function markRead(id) {
               route-name="notifications.unread"
               page-param-name="unread-page"
               :only-props="['activities']"
+              :query="{ client: selectedClient || undefined }"
             >
               <template #cell-what="{ row }">
                 <div class="font-medium text-gray-800 truncate">
@@ -107,6 +171,15 @@ async function markRead(id) {
                   </template>
                 </div>
               </template>
+              <template #cell-partner="{ row }">
+                <div class="truncate">
+                  {{
+                    (row.contract?.client_case?.person?.full_name) ||
+                    (row.client_case?.person?.full_name) ||
+                    '—'
+                  }}
+                </div>
+              </template>
               <template #cell-balance="{ row }">
                 <div class="text-right">
                   <span v-if="row.contract">{{