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,110 @@
+<script setup>
+import AppCard from "@/Components/app/ui/card/AppCard.vue";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/Components/ui/card";
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+} from "@/Components/ui/item";
+import {
+  MessageSquare,
+  Send,
+  CheckCircle,
+  XCircle,
+  MessageCircle,
+  Smartphone,
+} from "lucide-vue-next";
+
+const props = defineProps({
+  smsStats: { type: Array, required: false },
+});
+</script>
+
+<template>
+  <AppCard
+    title=""
+    padding="none"
+    class="p-0! gap-2"
+    header-class="py-3! px-4 border-b gap-0 text-muted-foreground"
+    body-class=""
+  >
+    <template #header>
+      <div class="flex items-center gap-2">
+        <Smartphone size="18" />
+        <CardTitle class="uppercase">SMS stanje </CardTitle>
+      </div>
+    </template>
+
+    <div v-if="smsStats?.length">
+      <div v-for="p in smsStats" :key="p.id" class="flex flex-col rounded-lg bg-card">
+        <Item variant="outline" size="lg" class="rounded-t-none border-t-0">
+          <ItemContent class="gap-0">
+            <ItemTitle
+              class="w-full flex flex-row items-center justify-between border-b py-2 px-4"
+            >
+              <div class="flex items-center gap-2">
+                <span class="font-semibold text-base">{{ p.name }}</span>
+                <span
+                  class="px-2 py-0.5 text-xs font-medium rounded-full"
+                  :class="
+                    p.active
+                      ? 'bg-emerald-100 text-emerald-700'
+                      : 'bg-gray-100 text-gray-500'
+                  "
+                >
+                  {{ p.active ? "Aktiven" : "Neaktiven" }}
+                </span>
+              </div>
+              <div class="text-right flex-1">
+                <div class="text-xs text-muted-foreground">Bilanca</div>
+                <div class="text-xl font-bold">{{ p.balance ?? "—" }}</div>
+              </div>
+            </ItemTitle>
+            <!-- Stats grid -->
+            <ItemDescription>
+              <div class="grid grid-cols-4 divide-x">
+                <div class="flex flex-row items-center justify-between p-2">
+                  <div class="flex flex-col gap-2">
+                    <span class="text-muted-foreground text-xs">Skupaj</span>
+                    <span class="text-xl font-bold">{{ p.today?.total ?? 0 }}</span>
+                  </div>
+                  <MessageSquare class="h-5 w-5 text-gray-500" />
+                </div>
+                <div class="flex flex-row items-center justify-between p-2">
+                  <div class="flex flex-col gap-2">
+                    <span class="text-muted-foreground text-xs">Poslano</span>
+                    <span class="text-xl font-bold">{{ p.today?.sent ?? 0 }}</span>
+                  </div>
+                  <Send class="h-5 w-5 text-sky-600" />
+                </div>
+                <div class="flex flex-row items-center justify-between p-2">
+                  <div class="flex flex-col gap-2">
+                    <span class="text-muted-foreground text-xs">Delivered</span>
+                    <span class="text-xl font-bold">{{ p.today?.delivered ?? 0 }}</span>
+                  </div>
+                  <CheckCircle class="h-5 w-5 text-emerald-600" />
+                </div>
+                <div class="flex flex-row items-center justify-between p-2">
+                  <div class="flex flex-col gap-2">
+                    <span class="text-muted-foreground text-xs">Failed</span>
+                    <span class="text-xl font-bold">{{ p.today?.failed ?? 0 }}</span>
+                  </div>
+                  <XCircle class="h-5 w-5 text-rose-600" />
+                </div>
+              </div>
+            </ItemDescription>
+          </ItemContent>
+        </Item>
+      </div>
+    </div>
+    <div v-else class="text-sm text-gray-500 p-4">Ni podatkov o SMS.</div>
+  </AppCard>
+</template>