88 lines
2.6 KiB
Vue
88 lines
2.6 KiB
Vue
<script setup>
|
|
import AppLayout from "@/Layouts/AppLayout.vue";
|
|
import SimpleKpiCard from "./Partials/SimpleKpiCard.vue";
|
|
import ActivityFeed from "./Partials/ActivityFeed.vue";
|
|
import SmsOverview from "./Partials/SmsOverview.vue";
|
|
import CompletedFieldJobsTrend from "./Partials/CompletedFieldJobsTrend.vue";
|
|
import FieldJobsAssignedToday from "./Partials/FieldJobsAssignedToday.vue";
|
|
import { Users, FileText, Banknote, CalendarCheck } from "lucide-vue-next";
|
|
|
|
const props = defineProps({
|
|
kpis: Object,
|
|
activities: Array,
|
|
trends: Object,
|
|
systemHealth: Object,
|
|
staleCases: Array,
|
|
fieldJobsAssignedToday: Array,
|
|
importsInProgress: Array,
|
|
activeTemplates: Array,
|
|
smsStats: Array,
|
|
});
|
|
|
|
// Format balance as currency
|
|
const formatBalance = (amount) => {
|
|
if (amount == null) return "—";
|
|
return new Intl.NumberFormat("sl-SI", {
|
|
style: "currency",
|
|
currency: "EUR",
|
|
minimumFractionDigits: 2,
|
|
}).format(amount);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout title="Nadzorna plošča">
|
|
<template #header> </template>
|
|
|
|
<div class="max-w-7xl mx-auto space-y-10 py-6">
|
|
<!-- KPI Cards Grid -->
|
|
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
<SimpleKpiCard
|
|
label="Aktivni stranke"
|
|
:value="kpis?.active_clients"
|
|
:icon="Users"
|
|
/>
|
|
<SimpleKpiCard
|
|
label="Aktivne pogodbe"
|
|
:value="kpis?.active_contracts"
|
|
:icon="FileText"
|
|
icon-bg="bg-chart-2/10"
|
|
icon-color="text-chart-2"
|
|
/>
|
|
<SimpleKpiCard
|
|
label="Skupno stanje"
|
|
:value="formatBalance(kpis?.total_balance)"
|
|
:icon="Banknote"
|
|
icon-bg="bg-chart-3/10"
|
|
icon-color="text-chart-3"
|
|
/>
|
|
<SimpleKpiCard
|
|
label="Aktivne obljube"
|
|
:value="kpis?.active_promises"
|
|
:icon="CalendarCheck"
|
|
icon-bg="bg-chart-4/10"
|
|
icon-color="text-chart-4"
|
|
/>
|
|
</div>
|
|
|
|
<div class="grid lg:grid-cols-3 gap-8">
|
|
<!-- Activity Feed -->
|
|
<div class="lg:col-span-1 space-y-4">
|
|
<ActivityFeed :activities="activities" :systemHealth="systemHealth" />
|
|
<!-- Field Jobs Assigned Today -->
|
|
<FieldJobsAssignedToday :fieldJobsAssignedToday="fieldJobsAssignedToday" />
|
|
</div>
|
|
|
|
<!-- Right side panels -->
|
|
<div class="lg:col-span-2 space-y-8">
|
|
<!-- SMS Overview -->
|
|
<SmsOverview :smsStats="smsStats" />
|
|
|
|
<!-- Completed Field Jobs Trend (7 dni) -->
|
|
<CompletedFieldJobsTrend :trends="trends" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|