Admin panel updated with shadcn-vue components

resources/js/Pages/Admin/Packages/Show.vue

@@ -2,6 +2,27 @@
 import AdminLayout from "@/Layouts/AdminLayout.vue";
 import { Link, router } from "@inertiajs/vue3";
 import { onMounted, onUnmounted, ref, computed } from "vue";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/Components/ui/card";
+import { Button } from "@/Components/ui/button";
+import { Badge } from "@/Components/ui/badge";
+import { Separator } from "@/Components/ui/separator";
+import DataTableNew2 from "@/Components/DataTable/DataTableNew2.vue";
+import Pagination from "@/Components/Pagination.vue";
+import {
+  PackageIcon,
+  ArrowLeftIcon,
+  PlayIcon,
+  XCircleIcon,
+  RefreshCwIcon,
+  CopyIcon,
+} from "lucide-vue-next";
+import AppCard from "@/Components/app/ui/card/AppCard.vue";
 
 const props = defineProps({
   package: { type: Object, required: true },
@@ -9,6 +30,24 @@ const props = defineProps({
   preview: { type: [Object, null], default: null },
 });
 
+const columns = [
+  { accessorKey: "id", header: "ID" },
+  { accessorKey: "target", header: "Prejemnik" },
+  { accessorKey: "message", header: "Sporočilo" },
+  { accessorKey: "status", header: "Status" },
+  { accessorKey: "last_error", header: "Napaka" },
+  { accessorKey: "provider_message_id", header: "Provider ID" },
+  { accessorKey: "cost", header: "Cena" },
+  { accessorKey: "currency", header: "Valuta" },
+];
+
+function getStatusVariant(status) {
+  if (["queued", "processing"].includes(status)) return "secondary";
+  if (status === "sent") return "default";
+  if (status === "failed") return "destructive";
+  return "outline";
+}
+
 const refreshing = ref(false);
 let timer = null;
 
@@ -16,11 +55,15 @@ const isRunning = computed(() => ["queued", "running"].includes(props.package.st
 
 // Derive a summary of payload/template/body from the first item on the page.
 // Assumption: payload is the same across items in a package (both flows use a common payload).
-const firstItem = computed(() => (props.items?.data && props.items.data.length ? props.items.data[0] : null));
-const firstPayload = computed(() => (firstItem.value ? firstItem.value.payload_json || {} : {}));
+const firstItem = computed(() =>
+  props.items?.data && props.items.data.length ? props.items.data[0] : null
+);
+const firstPayload = computed(() =>
+  firstItem.value ? firstItem.value.payload_json || {} : {}
+);
 const messageBody = computed(() => {
   const b = firstPayload.value?.body;
-  if (typeof b === 'string') {
+  if (typeof b === "string") {
     const t = b.trim();
     return t.length ? t : null;
   }
@@ -73,14 +116,16 @@ async function copyText(text) {
     await navigator.clipboard.writeText(text);
   } catch (e) {
     // Fallback for older browsers
-    const ta = document.createElement('textarea');
+    const ta = document.createElement("textarea");
     ta.value = text;
-    ta.style.position = 'fixed';
-    ta.style.opacity = '0';
+    ta.style.position = "fixed";
+    ta.style.opacity = "0";
     document.body.appendChild(ta);
     ta.focus();
     ta.select();
-    try { document.execCommand('copy'); } catch (_) {}
+    try {
+      document.execCommand("copy");
+    } catch (_) {}
     document.body.removeChild(ta);
   }
 }
@@ -88,195 +133,205 @@ async function copyText(text) {
 
 <template>
   <AdminLayout :title="`Paket #${package.id}`">
-    <div class="flex items-center justify-between mb-4">
-      <div>
-        <h2 class="text-base font-semibold text-gray-800">Paket #{{ package.id }}</h2>
-        <p class="text-xs text-gray-500">
-          UUID: <span class="font-mono">{{ package.uuid }}</span>
-        </p>
-      </div>
-      <div class="flex items-center gap-2">
-        <Link
-          :href="route('admin.packages.index')"
-          class="text-sm text-gray-600 hover:underline"
-          >← Nazaj</Link
-        >
-        <button
-          v-if="['draft', 'failed'].includes(package.status)"
-          @click="dispatchPkg"
-          class="px-3 py-1.5 rounded bg-indigo-600 text-white text-sm"
-        >
-          Zaženi
-        </button>
-        <button
-          v-if="isRunning"
-          @click="cancelPkg"
-          class="px-3 py-1.5 rounded bg-rose-600 text-white text-sm"
-        >
-          Prekliči
-        </button>
-        <button
-          v-if="!isRunning"
-          @click="reload"
-          class="px-3 py-1.5 rounded border text-sm"
-        >
-          Osveži
-        </button>
-      </div>
-    </div>
+    <Card class="mb-4">
+      <CardHeader>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <PackageIcon class="h-5 w-5 text-muted-foreground" />
+            <div>
+              <CardTitle>Paket #{{ package.id }}</CardTitle>
+              <CardDescription class="font-mono"
+                >UUID: {{ package.uuid }}</CardDescription
+              >
+            </div>
+          </div>
+          <div class="flex items-center gap-2">
+            <Button variant="ghost" size="sm" as-child>
+              <Link :href="route('admin.packages.index')">
+                <ArrowLeftIcon class="h-4 w-4 mr-2" />
+                Nazaj
+              </Link>
+            </Button>
+            <Button
+              v-if="['draft', 'failed'].includes(package.status)"
+              @click="dispatchPkg"
+              size="sm"
+            >
+              <PlayIcon class="h-4 w-4 mr-2" />
+              Zaženi
+            </Button>
+            <Button v-if="isRunning" @click="cancelPkg" variant="destructive" size="sm">
+              <XCircleIcon class="h-4 w-4 mr-2" />
+              Prekliči
+            </Button>
+            <Button v-if="!isRunning" @click="reload" variant="outline" size="sm">
+              <RefreshCwIcon class="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+    </Card>
 
     <div class="grid sm:grid-cols-4 gap-3 mb-4">
-      <div class="rounded border bg-white p-3">
-        <p class="text-xs text-gray-500">Status</p>
-        <p class="text-sm font-semibold mt-1 uppercase">{{ package.status }}</p>
-      </div>
-      <div class="rounded border bg-white p-3">
-        <p class="text-xs text-gray-500">Skupaj</p>
-        <p class="text-sm font-semibold mt-1">{{ package.total_items }}</p>
-      </div>
-      <div class="rounded border bg-white p-3">
-        <p class="text-xs text-gray-500">Poslano</p>
-        <p class="text-sm font-semibold mt-1 text-emerald-700">
-          {{ package.sent_count }}
-        </p>
-      </div>
-      <div class="rounded border bg-white p-3">
-        <p class="text-xs text-gray-500">Neuspešno</p>
-        <p class="text-sm font-semibold mt-1 text-rose-700">{{ package.failed_count }}</p>
-      </div>
+      <Card>
+        <CardHeader class="pb-2">
+          <CardDescription>Status</CardDescription>
+          <CardTitle class="text-xl uppercase">{{ package.status }}</CardTitle>
+        </CardHeader>
+      </Card>
+      <Card>
+        <CardHeader class="pb-2">
+          <CardDescription>Skupaj</CardDescription>
+          <CardTitle class="text-xl">{{ package.total_items }}</CardTitle>
+        </CardHeader>
+      </Card>
+      <Card>
+        <CardHeader class="pb-2">
+          <CardDescription>Poslano</CardDescription>
+          <CardTitle class="text-xl text-emerald-700">{{ package.sent_count }}</CardTitle>
+        </CardHeader>
+      </Card>
+      <Card>
+        <CardHeader class="pb-2">
+          <CardDescription>Neuspešno</CardDescription>
+          <CardTitle class="text-xl text-rose-700">{{ package.failed_count }}</CardTitle>
+        </CardHeader>
+      </Card>
     </div>
 
     <!-- Payload / Message preview -->
     <div class="mb-4 grid gap-3 sm:grid-cols-2">
-      <div class="rounded border bg-white p-3">
-        <p class="text-xs text-gray-500 mb-2">Sporočilo</p>
-        <template v-if="preview && preview.content">
-          <div class="text-sm whitespace-pre-wrap text-gray-800">{{ preview.content }}</div>
-          <div class="mt-2">
-            <button @click="copyText(preview.content)" class="px-2 py-1 rounded border text-xs">Kopiraj</button>
+      <Card>
+        <CardHeader>
+          <CardTitle class="text-base">Sporočilo</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <template v-if="preview && preview.content">
+            <div class="text-sm whitespace-pre-wrap mb-3">{{ preview.content }}</div>
+            <Button @click="copyText(preview.content)" size="sm" variant="outline">
+              <CopyIcon class="h-3.5 w-3.5 mr-2" />
+              Kopiraj
+            </Button>
+            <p
+              v-if="preview.source === 'template' && preview.template"
+              class="mt-3 text-xs text-muted-foreground"
+            >
+              Predloga: {{ preview.template.name }} (#{{ preview.template.id }})
+            </p>
+          </template>
+          <template v-else>
+            <div v-if="messageBody" class="text-sm whitespace-pre-wrap">
+              {{ messageBody }}
+            </div>
+            <div v-else class="text-sm text-muted-foreground">
+              <template v-if="payloadSummary.template_id">
+                Uporabljena bo predloga #{{ payloadSummary.template_id }}.
+              </template>
+              <template v-else> Vsebina sporočila ni določena. </template>
+            </div>
+          </template>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle class="text-base">Meta / Nastavitve pošiljanja</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <dl class="text-sm grid grid-cols-3 gap-y-2">
+            <dt class="col-span-1 text-muted-foreground">Profil</dt>
+            <dd class="col-span-2">{{ payloadSummary.profile_id ?? "—" }}</dd>
+            <dt class="col-span-1 text-muted-foreground">Pošiljatelj</dt>
+            <dd class="col-span-2">{{ payloadSummary.sender_id ?? "—" }}</dd>
+            <dt class="col-span-1 text-muted-foreground">Predloga</dt>
+            <dd class="col-span-2">{{ payloadSummary.template_id ?? "—" }}</dd>
+            <dt class="col-span-1 text-muted-foreground">Delivery report</dt>
+            <dd class="col-span-2">{{ payloadSummary.delivery_report ? "da" : "ne" }}</dd>
+          </dl>
+          <div
+            v-if="
+              package.meta && (package.meta.source || package.meta.skipped !== undefined)
+            "
+            class="mt-3 pt-3 border-t text-xs text-muted-foreground"
+          >
+            <span v-if="package.meta.source" class="mr-3"
+              >Vir: {{ package.meta.source }}</span
+            >
+            <span v-if="package.meta.skipped !== undefined"
+              >Preskočeno: {{ package.meta.skipped }}</span
+            >
           </div>
-          <div v-if="preview.source === 'template' && preview.template" class="mt-2 text-xs text-gray-500">
-            Predloga: {{ preview.template.name }} (#{{ preview.template.id }})
-          </div>
-        </template>
-        <template v-else>
-          <div v-if="messageBody" class="text-sm whitespace-pre-wrap text-gray-800">
-            {{ messageBody }}
-          </div>
-          <div v-else class="text-sm text-gray-600">
-            <template v-if="payloadSummary.template_id">
-              Uporabljena bo predloga #{{ payloadSummary.template_id }}.
-            </template>
-            <template v-else>
-              Vsebina sporočila ni določena.
-            </template>
-          </div>
-        </template>
-      </div>
-      <div class="rounded border bg-white p-3">
-        <p class="text-xs text-gray-500 mb-2">Meta / Nastavitve pošiljanja</p>
-        <dl class="text-sm text-gray-700 grid grid-cols-3 gap-y-1">
-          <dt class="col-span-1 text-gray-500">Profil</dt>
-          <dd class="col-span-2">{{ payloadSummary.profile_id ?? '—' }}</dd>
-          <dt class="col-span-1 text-gray-500">Pošiljatelj</dt>
-          <dd class="col-span-2">{{ payloadSummary.sender_id ?? '—' }}</dd>
-          <dt class="col-span-1 text-gray-500">Predloga</dt>
-          <dd class="col-span-2">{{ payloadSummary.template_id ?? '—' }}</dd>
-          <dt class="col-span-1 text-gray-500">Delivery report</dt>
-          <dd class="col-span-2">{{ payloadSummary.delivery_report ? 'da' : 'ne' }}</dd>
-        </dl>
-        <div v-if="package.meta && (package.meta.source || package.meta.skipped !== undefined)" class="mt-2 text-xs text-gray-500">
-          <span v-if="package.meta.source" class="mr-3">Vir: {{ package.meta.source }}</span>
-          <span v-if="package.meta.skipped !== undefined">Preskočeno: {{ package.meta.skipped }}</span>
+        </CardContent>
+      </Card>
+    </div>
+
+    <AppCard
+      title=""
+      padding="none"
+      class="p-0! gap-0"
+      header-class="py-3! px-4 gap-0 text-muted-foreground"
+      body-class=""
+    >
+      <template #header>
+        <div class="flex items-center gap-2">
+          <PackageIcon size="18" />
+          <CardTitle class="uppercase">Uvozi</CardTitle>
         </div>
-      </div>
-    </div>
+      </template>
+      <DataTableNew2
+        :columns="columns"
+        :data="items.data"
+        :meta="items"
+        route-name="admin.packages.show"
+        :route-params="{ id: package.id }"
+      >
+        <template #cell-target="{ row }">
+          <span class="text-sm">{{
+            (row.target_json && row.target_json.number) || "—"
+          }}</span>
+        </template>
 
-    <div class="overflow-hidden rounded-md border bg-white">
-      <table class="min-w-full divide-y divide-gray-200">
-        <thead class="bg-gray-50">
-          <tr class="text-xs text-gray-500">
-            <th class="px-3 py-2 text-left font-medium">ID</th>
-            <th class="px-3 py-2 text-left font-medium">Prejemnik</th>
-            <th class="px-3 py-2 text-left font-medium">Sporočilo</th>
-            <th class="px-3 py-2 text-left font-medium">Status</th>
-            <th class="px-3 py-2 text-left font-medium">Napaka</th>
-            <th class="px-3 py-2 text-left font-medium">Provider ID</th>
-            <th class="px-3 py-2 text-left font-medium">Cena</th>
-            <th class="px-3 py-2 text-left font-medium">Valuta</th>
-          </tr>
-        </thead>
-        <tbody class="divide-y divide-gray-200 text-sm">
-          <tr v-for="it in items.data" :key="it.id">
-            <td class="px-3 py-2">{{ it.id }}</td>
-            <td class="px-3 py-2">
-              {{ (it.target_json && it.target_json.number) || "—" }}
-            </td>
-            <td class="px-3 py-2">
-              <div class="flex items-start gap-2">
-                <div class="text-xs text-gray-800 max-w-[420px] line-clamp-2 whitespace-pre-wrap">{{ it.rendered_preview || '—' }}</div>
-                <button v-if="it.rendered_preview" @click="copyText(it.rendered_preview)" class="px-2 py-0.5 rounded border text-xs">Kopiraj</button>
-              </div>
-            </td>
-            <td class="px-3 py-2">
-              <span
-                class="inline-flex items-center px-2 py-0.5 rounded text-xs"
-                :class="{
-                  'bg-yellow-50 text-yellow-700': ['queued', 'processing'].includes(
-                    it.status
-                  ),
-                  'bg-emerald-50 text-emerald-700': it.status === 'sent',
-                  'bg-rose-50 text-rose-700': it.status === 'failed',
-                  'bg-gray-100 text-gray-600':
-                    it.status === 'canceled' || it.status === 'skipped',
-                }"
-                >{{ it.status }}</span
-              >
-            </td>
-            <td class="px-3 py-2 text-xs text-rose-700">{{ it.last_error ?? "—" }}</td>
-            <td class="px-3 py-2 text-xs text-gray-500 font-mono">
-              {{ it.provider_message_id ?? "—" }}
-            </td>
-            <td class="px-3 py-2">{{ it.cost ?? "—" }}</td>
-            <td class="px-3 py-2">{{ it.currency ?? "—" }}</td>
-          </tr>
-          <tr v-if="!items.data?.length">
-            <td colspan="8" class="px-3 py-8 text-center text-sm text-gray-500">
-              Ni elementov za prikaz.
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+        <template #cell-message="{ row }">
+          <div class="flex items-start gap-2">
+            <div class="text-xs max-w-[420px] line-clamp-2 whitespace-pre-wrap">
+              {{ row.rendered_preview || "—" }}
+            </div>
+            <Button
+              v-if="row.rendered_preview"
+              @click="copyText(row.rendered_preview)"
+              size="sm"
+              variant="ghost"
+            >
+              <CopyIcon class="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        </template>
 
-    <div class="mt-4 flex items-center justify-between text-sm">
-      <div class="text-gray-600">
-        Prikazano {{ items.from || 0 }}–{{ items.to || 0 }} od {{ items.total || 0 }}
-      </div>
-      <div class="space-x-2">
-        <Link
-          :href="items.prev_page_url || '#'"
-          :class="[
-            'px-3 py-1.5 rounded border',
-            items.prev_page_url
-              ? 'text-gray-700 hover:bg-gray-50'
-              : 'text-gray-400 cursor-not-allowed',
-          ]"
-          >Nazaj</Link
-        >
-        <Link
-          :href="items.next_page_url || '#'"
-          :class="[
-            'px-3 py-1.5 rounded border',
-            items.next_page_url
-              ? 'text-gray-700 hover:bg-gray-50'
-              : 'text-gray-400 cursor-not-allowed',
-          ]"
-          >Naprej</Link
-        >
-      </div>
-    </div>
+        <template #cell-status="{ row }">
+          <Badge :variant="getStatusVariant(row.status)">{{ row.status }}</Badge>
+        </template>
 
-    <div v-if="refreshing" class="mt-2 text-xs text-gray-500">Osveževanje ...</div>
+        <template #cell-last_error="{ row }">
+          <span class="text-xs text-rose-700">{{ row.last_error ?? "—" }}</span>
+        </template>
+
+        <template #cell-provider_message_id="{ row }">
+          <span class="font-mono text-xs text-muted-foreground">{{
+            row.provider_message_id ?? "—"
+          }}</span>
+        </template>
+
+        <template #cell-cost="{ row }">
+          <span class="text-sm">{{ row.cost ?? "—" }}</span>
+        </template>
+
+        <template #cell-currency="{ row }">
+          <span class="text-sm">{{ row.currency ?? "—" }}</span>
+        </template>
+      </DataTableNew2>
+    </AppCard>
+
+    <div v-if="refreshing" class="mt-2 text-xs text-muted-foreground">
+      Osveževanje ...
+    </div>
   </AdminLayout>
 </template>