111 lines
3.8 KiB
Vue
111 lines
3.8 KiB
Vue
<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>
|