223 lines
6.9 KiB
Vue
223 lines
6.9 KiB
Vue
<script setup>
|
|
import AdminLayout from "@/Layouts/AdminLayout.vue";
|
|
import { Head, Link } from "@inertiajs/vue3";
|
|
import { ArrowLeftIcon, MessageSquareIcon, InfoIcon } from "lucide-vue-next";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/Components/ui/card";
|
|
import { Button } from "@/Components/ui/button";
|
|
import { Badge } from "@/Components/ui/badge";
|
|
import { Separator } from "@/Components/ui/separator";
|
|
|
|
const props = defineProps({ log: { type: Object, required: true } });
|
|
|
|
function getStatusVariant(status) {
|
|
if (status === "queued") return "secondary";
|
|
if (status === "sent") return "default";
|
|
if (status === "delivered") return "default";
|
|
if (status === "failed") return "destructive";
|
|
return "outline";
|
|
}
|
|
|
|
function getStatusClass(status) {
|
|
if (status === "queued") return "bg-amber-100 text-amber-800 hover:bg-amber-100";
|
|
if (status === "sent") return "bg-sky-100 text-sky-800 hover:bg-sky-100";
|
|
if (status === "delivered") return "bg-green-100 text-green-800 hover:bg-green-100";
|
|
if (status === "failed") return "bg-red-100 text-red-800 hover:bg-red-100";
|
|
return "";
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AdminLayout title="SMS log">
|
|
<Head title="SMS log" />
|
|
|
|
<Card class="mb-6">
|
|
<CardHeader>
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex items-start gap-3">
|
|
<div
|
|
class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 text-primary"
|
|
>
|
|
<MessageSquareIcon class="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<CardTitle>SMS log</CardTitle>
|
|
<CardDescription>#{{ log.id }}</CardDescription>
|
|
</div>
|
|
</div>
|
|
<Button variant="outline" size="sm" as-child>
|
|
<Link :href="route('admin.sms-logs.index')">
|
|
<ArrowLeftIcon class="h-4 w-4 mr-2" />
|
|
Nazaj
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
</Card>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div class="lg:col-span-2 space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle class="text-base">Sporočilo</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<pre class="text-sm whitespace-pre-wrap bg-muted p-4 rounded-md">{{
|
|
log.message
|
|
}}</pre>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle class="text-base">Meta podatki</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<pre class="text-xs whitespace-pre-wrap bg-muted p-4 rounded-md font-mono">{{
|
|
JSON.stringify(log.meta || {}, null, 2)
|
|
}}</pre>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<div class="flex items-center gap-2">
|
|
<InfoIcon class="h-4 w-4" />
|
|
<CardTitle class="text-base">Informacije</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent class="space-y-4">
|
|
<div class="space-y-3">
|
|
<div>
|
|
<div class="text-xs font-medium text-muted-foreground mb-1">Prejemnik</div>
|
|
<div class="text-sm font-medium">{{ log.to_number }}</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<div class="text-xs font-medium text-muted-foreground mb-1">Sender</div>
|
|
<div class="text-sm">{{ log.sender || "—" }}</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<div class="text-xs font-medium text-muted-foreground mb-1">Profil</div>
|
|
<div class="text-sm">{{ log.profile?.name || "—" }}</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<div class="text-xs font-medium text-muted-foreground mb-1">Predloga</div>
|
|
<Badge v-if="log.template" variant="outline">{{
|
|
log.template.slug || log.template.name
|
|
}}</Badge>
|
|
<span v-else class="text-sm text-muted-foreground">—</span>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<div class="text-xs font-medium text-muted-foreground mb-1">Status</div>
|
|
<Badge
|
|
:variant="getStatusVariant(log.status)"
|
|
:class="getStatusClass(log.status)"
|
|
>
|
|
{{ log.status }}
|
|
</Badge>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<div class="text-xs font-medium text-muted-foreground mb-1">Cena</div>
|
|
<div class="text-sm">
|
|
{{
|
|
log.cost != null
|
|
? Number(log.cost).toFixed(2) + " " + (log.currency || "")
|
|
: "—"
|
|
}}
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<div class="text-xs font-medium text-muted-foreground mb-1">
|
|
Provider ID
|
|
</div>
|
|
<div class="text-sm font-mono text-xs break-all">
|
|
{{ log.provider_message_id || "—" }}
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<div class="text-xs font-medium text-muted-foreground mb-1">Čas</div>
|
|
<div class="text-sm">{{ new Date(log.created_at).toLocaleString() }}</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<div class="text-xs font-medium text-muted-foreground mb-1">Poslano</div>
|
|
<div class="text-sm">
|
|
{{ log.sent_at ? new Date(log.sent_at).toLocaleString() : "—" }}
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<div class="text-xs font-medium text-muted-foreground mb-1">
|
|
Dostavljeno
|
|
</div>
|
|
<div class="text-sm">
|
|
{{ log.delivered_at ? new Date(log.delivered_at).toLocaleString() : "—" }}
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<div class="text-xs font-medium text-muted-foreground mb-1">Neuspešno</div>
|
|
<div class="text-sm">
|
|
{{ log.failed_at ? new Date(log.failed_at).toLocaleString() : "—" }}
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<div class="text-xs font-medium text-muted-foreground mb-1">
|
|
Napaka (koda)
|
|
</div>
|
|
<div class="text-sm">{{ log.error_code || "—" }}</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<div class="text-xs font-medium text-muted-foreground mb-1">
|
|
Napaka (opis)
|
|
</div>
|
|
<div class="text-sm text-destructive">{{ log.error_message || "—" }}</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</AdminLayout>
|
|
</template>
|
|
|
|
<style scoped></style>
|