108 lines
3.4 KiB
Vue
108 lines
3.4 KiB
Vue
<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>
|