@nvent-addon/app 0.4.5 → 0.5.1

package/dist/runtime/app/pages/queues/jobs.vue

@@ -27,12 +27,6 @@
           >
             <div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
             <span>Live</span>
-            <span
-              v-if="isAutoRefreshing"
-              class="text-[10px] text-gray-400"
-            >
-              (updating...)
-            </span>
           </div>
           <div
             v-else-if="isReconnecting"
@@ -41,128 +35,383 @@
             <div class="w-2 h-2 rounded-full bg-amber-500 animate-pulse" />
             <span>Reconnecting...</span>
           </div>
-          <UBadge
-            :label="counts?.active.toString() || '0'"
-            color="warning"
-            variant="subtle"
-          >
-            <template #leading>
-              Active
-            </template>
-          </UBadge>
-          <UBadge
-            :label="counts?.waiting.toString() || '0'"
-            color="info"
-            variant="subtle"
-          >
-            <template #leading>
-              Waiting
-            </template>
-          </UBadge>
-          <UBadge
-            :label="counts?.completed.toString() || '0'"
-            color="success"
-            variant="subtle"
-          >
-            <template #leading>
-              Completed
-            </template>
-          </UBadge>
-          <UBadge
-            :label="counts?.failed.toString() || '0'"
-            color="error"
-            variant="subtle"
-          >
-            <template #leading>
-              Failed
-            </template>
-          </UBadge>
-          <USelectMenu
-            v-model="selectedStateOption"
-            :items="stateOptions"
-            placeholder="All States"
-            size="xs"
-            class="w-32"
-          />
           <UButton
-            icon="i-lucide-refresh-cw"
+            icon="i-lucide-settings"
             size="xs"
             color="neutral"
             variant="ghost"
-            :loading="status === 'pending'"
-            @click.prevent="onRefresh"
-          >
-            Refresh
-          </UButton>
+            square
+            title="View configuration"
+            @click="showConfig = !showConfig"
+          />
         </div>
       </div>
     </div>
 
     <!-- Main Content -->
-    <div class="flex-1 min-h-0 overflow-hidden flex flex-col">
-      <div
-        v-if="!data || !data.jobs || data.jobs.length === 0"
-        class="flex-1 flex items-center justify-center text-sm text-gray-400"
-      >
-        No jobs found
-      </div>
-      <template v-else>
-        <div class="flex-1 min-h-0 p-4 overflow-auto">
-          <UTable
-            ref="table"
-            v-model:pagination="pagination"
-            :data="data.jobs"
-            :columns="columns"
-            :loading="status === 'pending'"
-            :pagination-options="{
-  getPaginationRowModel: getPaginationRowModel()
-}"
-            :ui="{
-  base: 'table-fixed border-separate border-spacing-0',
-  thead: '[&>tr]:bg-elevated/50 [&>tr]:after:content-none',
-  tbody: '[&>tr]:last:[&>td]:border-b-0',
-  th: 'py-2 first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l last:border-r',
-  td: 'border-b border-default',
-  separator: 'h-0'
-}"
-          />
-        </div>
+    <div class="flex-1 min-h-0 overflow-hidden">
+      <div class="h-full flex gap-px bg-gray-200 dark:bg-gray-800">
+        <!-- Left: Jobs List -->
+        <div class="w-1/3 min-w-0 flex-shrink-0 bg-white dark:bg-gray-950 flex flex-col min-h-0 overflow-hidden">
+          <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between shrink-0">
+            <h2 class="text-sm font-medium text-gray-900 dark:text-gray-100">
+              Jobs
+            </h2>
+            <div class="flex items-center gap-2">
+              <USelectMenu
+                v-model="selectedStateOption"
+                :items="stateOptions"
+                placeholder="All States"
+                size="xs"
+                class="w-32"
+              />
+            </div>
+          </div>
 
-        <div class="flex items-center justify-between gap-3 border-t border-default p-4 shrink-0">
-          <div class="text-sm text-muted">
-            Showing {{ Math.min(pagination.pageIndex * pagination.pageSize + pagination.pageSize, data.jobs.length) }} of {{ data.jobs.length }} job(s)
-            <span
-              v-if="selectedState"
-              class="text-gray-400"
-            >
-              (filtered by {{ selectedStateOption?.label }})
-            </span>
+          <div
+            v-if="!data || !data.jobs || data.jobs.length === 0"
+            class="flex-1 flex items-center justify-center"
+          >
+            <div class="text-center">
+              <UIcon
+                name="i-lucide-inbox"
+                class="w-8 h-8 mx-auto mb-2 text-gray-300 dark:text-gray-700"
+              />
+              <p class="text-sm text-gray-500 dark:text-gray-400">
+                No jobs found
+              </p>
+            </div>
+          </div>
+
+          <div
+            v-else
+            class="flex-1 min-h-0 overflow-y-auto"
+          >
+            <div class="divide-y divide-gray-100 dark:divide-gray-800">
+              <div
+                v-for="job in paginatedJobs"
+                :key="job.id"
+                class="px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-900/50 cursor-pointer transition-colors"
+                :class="{
+  'bg-blue-50 dark:bg-blue-950/30 border-l-2 border-l-blue-500': selectedJobId === job.id
+}"
+                @click="selectJob(job.id)"
+              >
+                <div class="flex items-start gap-3">
+                  <div class="flex-shrink-0 mt-0.5">
+                    <UIcon
+                      :name="getJobIcon(job.state)"
+                      class="w-5 h-5"
+                      :class="getJobIconColor(job.state)"
+                    />
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <div class="flex items-center justify-between gap-2 mb-1">
+                      <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+                        {{ job.name }}
+                      </h3>
+                      <UBadge
+                        :label="job.state || 'unknown'"
+                        :color="getStateBadgeColor(job.state)"
+                        variant="subtle"
+                        size="xs"
+                        class="capitalize flex-shrink-0"
+                      />
+                    </div>
+                    <p class="text-xs text-gray-500 dark:text-gray-400 font-mono truncate mb-1">
+                      {{ truncateId(job.id) }}
+                    </p>
+                    <div class="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
+                      <span v-if="job.timestamp">
+                        {{ formatTime(job.timestamp) }}
+                      </span>
+                      <span v-if="job.finishedOn && job.processedOn">
+                        • {{ formatDuration(job.processedOn, job.finishedOn) }}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
-          <div class="flex items-center gap-1.5">
+
+          <!-- Pagination Footer -->
+          <div
+            v-if="data && data.total > jobsPerPage"
+            class="border-t border-gray-200 dark:border-gray-800 px-4 py-3 flex items-center justify-center shrink-0"
+          >
             <UPagination
-              :default-page="(table?.tableApi?.getState().pagination.pageIndex || 0) + 1"
-              :items-per-page="table?.tableApi?.getState().pagination.pageSize || 20"
-              :total="data.jobs.length"
-              @update:page="(p) => table?.tableApi?.setPageIndex(p - 1)"
+              v-model:page="currentPage"
+              :items-per-page="jobsPerPage"
+              :total="data.total"
+              size="xs"
             />
           </div>
         </div>
-      </template>
+
+        <!-- Right: Overview or Job Details -->
+        <div class="flex-1 min-w-0 bg-white dark:bg-gray-950 flex flex-col min-h-0 overflow-hidden">
+          <div class="px-4 py-2.5 border-b border-gray-200 dark:border-gray-800 shrink-0">
+            <div class="flex items-center justify-between">
+              <UTabs
+                v-model="activeTab"
+                :items="tabItems"
+                size="xs"
+                :ui="{
+  root: 'gap-0',
+  trigger: 'px-2 py-0.5'
+}"
+              />
+            </div>
+          </div>
+
+          <div class="flex-1 min-h-0 overflow-y-auto">
+            <!-- Overview Tab -->
+            <div
+              v-if="activeTab === 'overview'"
+              class="p-6 space-y-6"
+            >
+              <!-- Stats Cards -->
+              <div>
+                <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-4">
+                  Queue Statistics
+                </h3>
+                <div class="grid grid-cols-2 gap-4">
+                  <StatCard
+                    icon="i-lucide-clock"
+                    :count="counts?.waiting || 0"
+                    label="Waiting"
+                    variant="blue"
+                  />
+                  <StatCard
+                    icon="i-lucide-loader-2"
+                    :count="counts?.active || 0"
+                    label="Active"
+                    variant="amber"
+                  />
+                  <StatCard
+                    icon="i-lucide-check-circle"
+                    :count="counts?.completed || 0"
+                    label="Completed"
+                    variant="emerald"
+                  />
+                  <StatCard
+                    icon="i-lucide-x-circle"
+                    :count="counts?.failed || 0"
+                    label="Failed"
+                    variant="red"
+                  />
+                  <StatCard
+                    icon="i-lucide-timer"
+                    :count="counts?.delayed || 0"
+                    label="Delayed"
+                    variant="purple"
+                  />
+                  <StatCard
+                    icon="i-lucide-pause-circle"
+                    :count="counts?.paused || 0"
+                    label="Paused"
+                    variant="gray"
+                  />
+                </div>
+              </div>
+
+              <!-- Queue Configuration -->
+              <div>
+                <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-4">
+                  Queue Configuration
+                </h3>
+                <div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4 space-y-3">
+                  <div class="flex items-center justify-between py-2 border-b border-gray-200 dark:border-gray-800">
+                    <span class="text-sm text-gray-600 dark:text-gray-400">Queue Name</span>
+                    <span class="text-sm font-medium text-gray-900 dark:text-gray-100 font-mono">{{ queueName }}</span>
+                  </div>
+                  <div class="flex items-center justify-between py-2 border-b border-gray-200 dark:border-gray-800">
+                    <span class="text-sm text-gray-600 dark:text-gray-400">Total Jobs</span>
+                    <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ data?.jobs?.length || 0 }}</span>
+                  </div>
+                  <div class="flex items-center justify-between py-2">
+                    <span class="text-sm text-gray-600 dark:text-gray-400">Connection Status</span>
+                    <UBadge
+                      :label="isConnected ? 'Connected' : isReconnecting ? 'Reconnecting' : 'Disconnected'"
+                      :color="isConnected ? 'success' : isReconnecting ? 'warning' : 'error'"
+                      variant="subtle"
+                      size="xs"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Job Details Tab -->
+            <div
+              v-else-if="activeTab === 'details' && selectedJob"
+              class="p-6 space-y-6"
+            >
+              <!-- Job Info -->
+              <div>
+                <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
+                  <UIcon
+                    :name="getJobIcon(selectedJob.state)"
+                    class="w-5 h-5"
+                    :class="getJobIconColor(selectedJob.state)"
+                  />
+                  <span>Job Information</span>
+                </h3>
+                <div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4 space-y-3">
+                  <div class="flex items-center justify-between py-2 border-b border-gray-200 dark:border-gray-800">
+                    <span class="text-sm text-gray-600 dark:text-gray-400">ID</span>
+                    <span class="text-xs font-mono text-gray-900 dark:text-gray-100">{{ selectedJob.id }}</span>
+                  </div>
+                  <div class="flex items-center justify-between py-2 border-b border-gray-200 dark:border-gray-800">
+                    <span class="text-sm text-gray-600 dark:text-gray-400">Name</span>
+                    <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ selectedJob.name }}</span>
+                  </div>
+                  <div class="flex items-center justify-between py-2">
+                    <span class="text-sm text-gray-600 dark:text-gray-400">State</span>
+                    <UBadge
+                      :label="selectedJob.state || 'unknown'"
+                      :color="getStateBadgeColor(selectedJob.state)"
+                      variant="subtle"
+                      size="xs"
+                      class="capitalize"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- Timing -->
+              <div>
+                <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-4">
+                  Timing
+                </h3>
+                <div class="space-y-4">
+                  <div class="grid grid-cols-1 gap-3">
+                    <div class="flex items-center justify-between py-2 bg-gray-50 dark:bg-gray-900/50 rounded-lg px-4">
+                      <span class="text-sm text-gray-600 dark:text-gray-400">Created</span>
+                      <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ formatDate(selectedJob.timestamp) }}</span>
+                    </div>
+                    <div
+                      v-if="selectedJob.processedOn"
+                      class="flex items-center justify-between py-2 bg-gray-50 dark:bg-gray-900/50 rounded-lg px-4"
+                    >
+                      <span class="text-sm text-gray-600 dark:text-gray-400">Processed</span>
+                      <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ formatDate(selectedJob.processedOn) }}</span>
+                    </div>
+                    <div
+                      v-if="selectedJob.finishedOn"
+                      class="flex items-center justify-between py-2 bg-gray-50 dark:bg-gray-900/50 rounded-lg px-4"
+                    >
+                      <span class="text-sm text-gray-600 dark:text-gray-400">Finished</span>
+                      <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ formatDate(selectedJob.finishedOn) }}</span>
+                    </div>
+                  </div>
+
+                  <!-- Duration Cards -->
+                  <div
+                    v-if="selectedJobWaitDuration || selectedJobExecutionDuration"
+                    class="grid grid-cols-2 gap-3 pt-2"
+                  >
+                    <div
+                      v-if="selectedJobWaitDuration"
+                      class="bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 rounded-lg p-4 text-center"
+                    >
+                      <p class="text-xs text-blue-600 dark:text-blue-400 mb-1">
+                        Wait Time
+                      </p>
+                      <p class="text-lg font-bold text-blue-700 dark:text-blue-300">
+                        {{ selectedJobWaitDuration }}
+                      </p>
+                    </div>
+                    <div
+                      v-if="selectedJobExecutionDuration"
+                      class="rounded-lg p-4 text-center border"
+                      :class="selectedJob.state === 'active' ? 'bg-amber-50 dark:bg-amber-950/30 border-amber-200 dark:border-amber-800' : 'bg-emerald-50 dark:bg-emerald-950/30 border-emerald-200 dark:border-emerald-800'"
+                    >
+                      <p
+                        class="text-xs mb-1"
+                        :class="selectedJob.state === 'active' ? 'text-amber-600 dark:text-amber-400' : 'text-emerald-600 dark:text-emerald-400'"
+                      >
+                        {{ selectedJob.state === "active" ? "Running" : "Execution" }}
+                      </p>
+                      <p
+                        class="text-lg font-bold"
+                        :class="selectedJob.state === 'active' ? 'text-amber-700 dark:text-amber-300' : 'text-emerald-700 dark:text-emerald-300'"
+                      >
+                        {{ selectedJobExecutionDuration }}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Job Data -->
+              <div>
+                <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-4">
+                  Job Data
+                </h3>
+                <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 overflow-x-auto">
+                  <pre class="text-xs font-mono">{{ JSON.stringify(selectedJob.data, null, 2) }}</pre>
+                </div>
+              </div>
+
+              <!-- Return Value -->
+              <div v-if="selectedJob.returnvalue">
+                <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-4">
+                  Return Value
+                </h3>
+                <div class="bg-emerald-50 dark:bg-emerald-950/30 border border-emerald-200 dark:border-emerald-800 rounded-lg p-4 overflow-x-auto">
+                  <pre class="text-xs font-mono text-emerald-900 dark:text-emerald-100">{{ JSON.stringify(selectedJob.returnvalue, null, 2) }}</pre>
+                </div>
+              </div>
+
+              <!-- Error -->
+              <div v-if="selectedJob.failedReason">
+                <h3 class="text-sm font-semibold text-red-600 dark:text-red-400 mb-4">
+                  Error
+                </h3>
+                <div class="bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 rounded-lg p-4">
+                  <p class="text-sm text-red-700 dark:text-red-300 whitespace-pre-wrap">
+                    {{ selectedJob.failedReason }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
+
+    <!-- Configuration Slideover -->
+    <USlideover
+      v-model:open="showConfig"
+      title="Queue Configuration"
+    >
+      <template #body>
+        <QueueConfiguration
+          :queue-name="queueName"
+          :queue-config="queueInfo?.config?.queue"
+          :worker-config="queueInfo?.config?.worker"
+        />
+      </template>
+    </USlideover>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch, resolveComponent, useTemplateRef, h } from "#imports";
-import { getPaginationRowModel } from "@tanstack/table-core";
-import { UTable, UButton, UBadge, UPagination, USelectMenu } from "#components";
+import { ref, computed, watch } from "#imports";
+import { UButton, UBadge, UPagination, USelectMenu, UIcon, UTabs, USlideover } from "#components";
 import { useQueueJobs } from "../../composables/useQueueJobs";
 import { useQueueUpdates } from "../../composables/useQueueUpdates";
+import { useQueues } from "../../composables/useQueues";
 import { useComponentRouter } from "../../composables/useComponentRouter";
-const UBadgeComponent = resolveComponent("UBadge");
-const UButtonComponent = resolveComponent("UButton");
-const router = useComponentRouter();
-const queueName = computed(() => router.route.value?.params?.name || "");
+import { useRoute, useRouter } from "#app";
+import StatCard from "../../components/StatCard.vue";
+import QueueConfiguration from "../../components/QueueConfiguration.vue";
+const componentRouter = useComponentRouter();
+const router = useRouter();
+const route = useRoute();
+const queueName = computed(() => componentRouter.route.value?.params?.name || "");
 const stateOptions = [
   { label: "All States", value: null },
   { label: "Waiting", value: "waiting" },
@@ -172,120 +421,198 @@ const stateOptions = [
   { label: "Delayed", value: "delayed" },
   { label: "Paused", value: "paused" }
 ];
-const selectedStateOption = ref(stateOptions[0]);
-const selectedState = computed(() => selectedStateOption.value?.value ?? null);
-const { data, refresh, status } = useQueueJobs(queueName, selectedState);
-const { counts, isConnected, isReconnecting, shouldRefreshJobs, resetRefreshFlag } = useQueueUpdates(queueName);
-const isAutoRefreshing = ref(false);
-watch(selectedState, () => {
-  if (table.value?.tableApi) {
-    table.value.tableApi.setPageIndex(0);
+const selectedState = computed({
+  get: () => route.query.state || null,
+  set: (value) => {
+    router.push({
+      query: {
+        ...route.query,
+        state: value || void 0,
+        page: void 0
+        // Reset page when filter changes
+      }
+    });
+  }
+});
+const currentPage = computed({
+  get: () => {
+    const page = route.query.page;
+    return page ? Number.parseInt(page, 10) : 1;
+  },
+  set: (value) => {
+    router.push({
+      query: {
+        ...route.query,
+        page: value > 1 ? value.toString() : void 0
+      }
+    });
+  }
+});
+const selectedStateOption = computed({
+  get: () => stateOptions.find((opt) => opt.value === selectedState.value) || stateOptions[0],
+  set: (option) => {
+    selectedState.value = option.value;
   }
 });
+const jobsPerPage = 20;
+const jobQueryOptions = computed(() => ({
+  state: selectedState.value,
+  limit: jobsPerPage,
+  offset: (currentPage.value - 1) * jobsPerPage
+}));
+const { data, refresh } = useQueueJobs(queueName, jobQueryOptions);
+const { counts: liveCounts, isConnected, isReconnecting, shouldRefreshJobs, resetRefreshFlag } = useQueueUpdates(queueName);
+const { queues } = useQueues();
+const queueInfo = computed(() => {
+  return queues.value?.find((q) => q.name === queueName.value);
+});
+const counts = computed(() => liveCounts.value || queueInfo.value?.counts || null);
 watch(shouldRefreshJobs, async (shouldRefresh) => {
   if (shouldRefresh) {
-    isAutoRefreshing.value = true;
     await refresh();
     resetRefreshFlag();
-    setTimeout(() => {
-      isAutoRefreshing.value = false;
-    }, 500);
   }
 });
-const table = useTemplateRef("table");
-const pagination = ref({
-  pageIndex: 0,
-  pageSize: 20
+watch(() => jobQueryOptions.value, () => {
+  refresh();
+}, { deep: true });
+const paginatedJobs = computed(() => {
+  return data.value?.jobs || [];
+});
+const selectedJobId = ref(null);
+const selectedJob = computed(() => {
+  if (!selectedJobId.value || !data.value?.jobs) return null;
+  return data.value.jobs.find((job) => job.id === selectedJobId.value);
+});
+const showConfig = ref(false);
+const activeTab = ref("overview");
+const tabItems = computed(() => [
+  { label: "Overview", value: "overview", icon: "i-lucide-bar-chart-3" },
+  {
+    label: "Job Details",
+    value: "details",
+    icon: "i-lucide-file-text",
+    disabled: !selectedJobId.value
+  }
+]);
+watch(selectedJobId, (newId) => {
+  if (newId) {
+    activeTab.value = "details";
+    showConfig.value = false;
+  } else {
+    activeTab.value = "overview";
+  }
+});
+watch(showConfig, (show) => {
+  if (show) {
+    selectedJobId.value = null;
+  }
 });
-const onRefresh = async () => {
-  await refresh();
+const selectJob = (jobId) => {
+  selectedJobId.value = jobId;
 };
 const back = () => {
-  router.push("/queues");
+  componentRouter.push("/queues");
 };
-const selectJob = (jobId) => {
-  router.push(`/queues/${queueName.value}/jobs/${jobId}`);
+const getJobIcon = (state) => {
+  switch (state) {
+    case "waiting":
+      return "i-lucide-clock";
+    case "active":
+      return "i-lucide-loader-2";
+    case "completed":
+      return "i-lucide-check-circle";
+    case "failed":
+      return "i-lucide-x-circle";
+    case "delayed":
+      return "i-lucide-timer";
+    case "paused":
+      return "i-lucide-pause-circle";
+    default:
+      return "i-lucide-circle";
+  }
 };
-const columns = [
-  {
-    accessorKey: "id",
-    header: "Job ID",
-    cell: ({ row }) => {
-      const id = row.original.id;
-      return h("div", {
-        class: "font-mono text-xs cursor-pointer hover:underline",
-        onClick: () => selectJob(row.original.id)
-      }, id.length > 16 ? `${id.substring(0, 8)}...${id.substring(id.length - 8)}` : id);
-    }
-  },
-  {
-    accessorKey: "name",
-    header: "Name",
-    cell: ({ row }) => {
-      return h("div", {
-        class: "font-medium cursor-pointer hover:underline",
-        onClick: () => selectJob(row.original.id)
-      }, row.original.name);
-    }
-  },
-  {
-    accessorKey: "state",
-    header: "State",
-    cell: ({ row }) => {
-      const state = row.original.state;
-      const colorMap = {
-        waiting: "info",
-        active: "warning",
-        completed: "success",
-        failed: "error",
-        delayed: "secondary",
-        paused: "warning"
-      };
-      return h(UBadgeComponent, {
-        label: state || "unknown",
-        color: colorMap[state || ""] || "neutral",
-        variant: "subtle",
-        class: "capitalize"
-      });
-    }
-  },
-  {
-    accessorKey: "timestamp",
-    header: "Created",
-    cell: ({ row }) => {
-      const timestamp = row.original.timestamp;
-      if (!timestamp) return h("div", { class: "text-gray-400 text-xs" }, "-");
-      const date = new Date(timestamp);
-      return h(
-        "div",
-        { class: "text-xs" },
-        date.toLocaleString("de-DE", {
-          timeZone: "Europe/Berlin",
-          day: "2-digit",
-          month: "2-digit",
-          year: "numeric",
-          hour: "2-digit",
-          minute: "2-digit",
-          second: "2-digit"
-        })
-      );
-    }
-  },
-  {
-    id: "actions",
-    header: "",
-    cell: ({ row }) => {
-      return h(UButtonComponent, {
-        icon: "i-lucide-arrow-right",
-        size: "xs",
-        color: "neutral",
-        variant: "ghost",
-        square: true,
-        onClick: () => {
-          selectJob(row.original.id);
-        }
-      });
-    }
+const getJobIconColor = (state) => {
+  switch (state) {
+    case "waiting":
+      return "text-blue-500";
+    case "active":
+      return "text-amber-500 animate-spin";
+    case "completed":
+      return "text-emerald-500";
+    case "failed":
+      return "text-red-500";
+    case "delayed":
+      return "text-purple-500";
+    case "paused":
+      return "text-gray-500";
+    default:
+      return "text-gray-400";
   }
-];
+};
+const getStateBadgeColor = (state) => {
+  switch (state) {
+    case "waiting":
+      return "info";
+    case "active":
+      return "warning";
+    case "completed":
+      return "success";
+    case "failed":
+      return "error";
+    case "delayed":
+      return "secondary";
+    case "paused":
+      return "warning";
+    default:
+      return "neutral";
+  }
+};
+const truncateId = (id) => {
+  if (id.length <= 16) return id;
+  return `${id.substring(0, 8)}...${id.substring(id.length - 8)}`;
+};
+const formatTime = (timestamp) => {
+  if (!timestamp) return "-";
+  const date = new Date(timestamp);
+  const now = /* @__PURE__ */ new Date();
+  const diff = now.getTime() - date.getTime();
+  const seconds = Math.floor(diff / 1e3);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  if (days > 0) return `${days}d ago`;
+  if (hours > 0) return `${hours}h ago`;
+  if (minutes > 0) return `${minutes}m ago`;
+  if (seconds > 10) return `${seconds}s ago`;
+  return "just now";
+};
+const formatDuration = (start, end) => {
+  const diff = end - start;
+  if (diff < 1e3) return `${diff}ms`;
+  if (diff < 6e4) return `${(diff / 1e3).toFixed(2)}s`;
+  if (diff < 36e5) return `${(diff / 6e4).toFixed(2)}m`;
+  return `${(diff / 36e5).toFixed(2)}h`;
+};
+const formatDate = (timestamp) => {
+  if (!timestamp) return "-";
+  return new Date(timestamp).toLocaleString("de-DE", {
+    timeZone: "Europe/Berlin",
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+};
+const selectedJobWaitDuration = computed(() => {
+  if (!selectedJob.value?.timestamp || !selectedJob.value?.processedOn) return null;
+  return formatDuration(selectedJob.value.timestamp, selectedJob.value.processedOn);
+});
+const selectedJobExecutionDuration = computed(() => {
+  if (!selectedJob.value?.processedOn) return null;
+  const endTime = selectedJob.value.finishedOn || Date.now();
+  return formatDuration(selectedJob.value.processedOn, endTime);
+});
 </script>