Dashboard final version, TODO: update main sidebar menu

2025-11-23 21:33:01 +01:00
parent c3de189e9d
commit c1ac92efbf
67 changed files with 5195 additions and 844 deletions
@@ -0,0 +1,87 @@
+<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>