changes notification added

2025-10-01 22:33:36 +02:00
parent db99a57030
commit 0e0912c81b
10 changed files with 994 additions and 485 deletions
@@ -0,0 +1,107 @@
+<script setup>
+import { computed, onMounted } from "vue";
+import { usePage, Link } from "@inertiajs/vue3";
+import Dropdown from "@/Components/Dropdown.vue";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { faBell } from "@fortawesome/free-solid-svg-icons";
+
+const page = usePage();
+const due = computed(
+  () => page.props.notifications?.dueToday || { count: 0, items: [], date: null }
+);
+
+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);
+  }
+  // de-DE locale: dot thousands, comma decimals, trailing Euro symbol
+  const formatted = new Intl.NumberFormat("de-DE", {
+    style: "currency",
+    currency: "EUR",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(num);
+  // Replace non-breaking space with normal space for consistency
+  return formatted.replace("\u00A0", " ");
+}
+onMounted(() => {
+  console.log(due.value);
+});
+</script>
+
+<template>
+  <Dropdown
+    align="right"
+    width="72"
+    :content-classes="['py-1', 'bg-white', 'max-h-96', 'overflow-auto']"
+  >
+    <template #trigger>
+      <button
+        type="button"
+        class="relative inline-flex items-center justify-center w-9 h-9 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100"
+        aria-label="Notifications"
+      >
+        <FontAwesomeIcon :icon="faBell" class="w-5 h-5" />
+        <span
+          v-if="due.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
+        >
+      </button>
+    </template>
+
+    <template #content>
+      <div class="px-3 py-2 text-xs text-gray-400 border-b">Obljube zapadejo jutri</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">
+          Ni zapadlih aktivnosti danes.
+        </div>
+        <ul v-else class="divide-y">
+          <li
+            v-for="item in due.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>
+              </div>
+              <div class="text-gray-600 truncate">
+                {{ fmtEUR(item.contract?.account?.balance_amount) }}
+              </div>
+            </div>
+            <div class="text-xs text-gray-500 whitespace-nowrap">
+              {{ fmtDate(item.due_date) }}
+            </div>
+          </li>
+        </ul>
+      </div>
+    </template>
+  </Dropdown>
+</template>