opendesk

1<template>
2  <div class="flex flex-col gap-4">
3    <div
4      v-for="card in cards"
5      :key="card.label"
6      class="flex flex-col gap-2 rounded-5 border border-outline-gray-1 bg-surface-base p-4"
7    >
8      <div class="flex items-center gap-1.5">
9        <span class="text-base text-ink-gray-5">{{ card.label }}</span>
10        <Tooltip :text="card.description">
11          <LucideInfo class="size-3.5 text-ink-gray-5" />
12        </Tooltip>
13      </div>
14      <span class="text-md-medium text-ink-gray-8">
15        {{ card.value ?? "–" }}
16      </span>
17    </div>
18  </div>
19</template>
20
21<script setup lang="ts">
22import { __ } from "@/translation";
23import { Tooltip } from "frappe-ui";
24import { computed } from "vue";
25import LucideInfo from "~icons/lucide/info";
26import type { AnalyticsMetrics } from "./types";
27import { formatSeconds } from "./utils";
28
29const props = defineProps<{ metrics: AnalyticsMetrics }>();
30
31const cards = computed(() => [
32  {
33    label: __("Avg. agent response gap"),
34    value: formatSeconds(props.metrics.avg_agent_gap),
35    description: __("Average time to reply after a customer message"),
36  },
37  {
38    label: __("Avg. customer response gap"),
39    value: formatSeconds(props.metrics.avg_customer_gap),
40    description: __("Average time the customer took to reply to an agent"),
41  },
42  {
43    label: __("Total hold time"),
44    value: formatSeconds(props.metrics.hold_time),
45    description: __("Time on hold with the SLA clock paused"),
46  },
47]);
48</script>
49