Admin panel updated with shadcn-vue components
This commit is contained in:
Simon Pocrnjič
@@ -1,80 +1,222 @@
|
||||
<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" />
|
||||
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<Link :href="route('admin.sms-logs.index')" class="text-sm text-indigo-600 hover:underline">← Nazaj na dnevnike</Link>
|
||||
<div class="text-gray-700 text-sm">#{{ log.id }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<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-4">
|
||||
<div class="rounded-lg border bg-white p-4 shadow-sm">
|
||||
<div class="font-semibold text-gray-800 mb-2">Sporočilo</div>
|
||||
<pre class="text-sm whitespace-pre-wrap">{{ log.message }}</pre>
|
||||
</div>
|
||||
<div class="rounded-lg border bg-white p-4 shadow-sm">
|
||||
<div class="font-semibold text-gray-800 mb-2">Meta</div>
|
||||
<pre class="text-xs whitespace-pre-wrap">{{ JSON.stringify(log.meta || {}, null, 2) }}</pre>
|
||||
</div>
|
||||
<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>
|
||||
<div class="space-y-4">
|
||||
<div class="rounded-lg border bg-white p-4 shadow-sm">
|
||||
<div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
|
||||
<div class="text-gray-500">Prejemnik</div>
|
||||
<div class="text-gray-800">{{ log.to_number }}</div>
|
||||
|
||||
<div class="text-gray-500">Sender</div>
|
||||
<div class="text-gray-800">{{ log.sender || '—' }}</div>
|
||||
|
||||
<div class="text-gray-500">Profil</div>
|
||||
<div class="text-gray-800">{{ log.profile?.name || '—' }}</div>
|
||||
|
||||
<div class="text-gray-500">Predloga</div>
|
||||
<div class="text-gray-800">{{ log.template?.slug || log.template?.name || '—' }}</div>
|
||||
|
||||
<div class="text-gray-500">Status</div>
|
||||
<div class="text-gray-800">{{ log.status }}</div>
|
||||
|
||||
<div class="text-gray-500">Cena</div>
|
||||
<div class="text-gray-800">{{ log.cost != null ? (Number(log.cost).toFixed(2) + ' ' + (log.currency || '')) : '—' }}</div>
|
||||
|
||||
<div class="text-gray-500">Provider ID</div>
|
||||
<div class="text-gray-800">{{ log.provider_message_id || '—' }}</div>
|
||||
|
||||
<div class="text-gray-500">Čas</div>
|
||||
<div class="text-gray-800">{{ new Date(log.created_at).toLocaleString() }}</div>
|
||||
|
||||
<div class="text-gray-500">Sent</div>
|
||||
<div class="text-gray-800">{{ log.sent_at ? new Date(log.sent_at).toLocaleString() : '—' }}</div>
|
||||
|
||||
<div class="text-gray-500">Delivered</div>
|
||||
<div class="text-gray-800">{{ log.delivered_at ? new Date(log.delivered_at).toLocaleString() : '—' }}</div>
|
||||
|
||||
<div class="text-gray-500">Failed</div>
|
||||
<div class="text-gray-800">{{ log.failed_at ? new Date(log.failed_at).toLocaleString() : '—' }}</div>
|
||||
|
||||
<div class="text-gray-500">Napaka (koda)</div>
|
||||
<div class="text-gray-800">{{ log.error_code || '—' }}</div>
|
||||
|
||||
<div class="text-gray-500">Napaka (opis)</div>
|
||||
<div class="text-gray-800">{{ log.error_message || '—' }}</div>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div class="flex items-center gap-2">
|
||||
<InfoIcon class="h-4 w-4" />
|
||||
<CardTitle class="text-base">Informacije</CardTitle>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
.label { display: block; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #6b7280; margin-bottom: 0.25rem; }
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user