opendesk

1<template>
2  <div class="h-full w-full rounded-4 border border-outline-gray-1">
3    <AgentTicketsCard v-if="item.chart == 'agent_tickets'" :data="item.data" />
4    <LineChartCard
5      v-if="item.chart == 'avg_first_response_time'"
6      :title="__('Avg. First Response')"
7      api-url="opendesk.api.agent_home.agent_home.get_avg_first_response_time"
8      :data="item.data"
9      :chart-color="{
10        lineColor: '#F35555',
11        gradientColor: { start: '#ee9d9f', end: 'rgba(251,232,233,0)' },
12      }"
13    />
14    <LineChartCard
15      v-if="item.chart == 'avg_resolution_time'"
16      :title="__('Avg. Resolution')"
17      api-url="opendesk.api.agent_home.agent_home.get_avg_resolution_time"
18      :data="item.data"
19      :chart-color="{
20        lineColor: '#7263E8',
21        gradientColor: { start: '#a093ee', end: 'rgba(239, 237, 252,0)' },
22      }"
23    />
24    <RecentFeedback v-if="item.chart == 'recent_feedback'" :data="item.data" />
25    <AvgTimeMetrics v-if="item.chart == 'avg_time_metrics'" :data="item.data" />
26    <PendingTickets v-if="item.chart == 'pending_tickets'" :data="item.data" />
27    <RecentActivity v-if="item.chart == 'recent_activity'" :data="item.data" />
28  </div>
29</template>
30
31<script setup lang="ts">
32import { __ } from "@/translation";
33import { type PropType } from "vue";
34import LineChartCard from "../../../components/LineChartCard.vue";
35import AgentTicketsCard from "./AgentTicketsCard.vue";
36import AvgTimeMetrics from "./AvgTimeMetrics.vue";
37import PendingTickets from "./PendingTickets.vue";
38import RecentActivity from "./RecentActivity.vue";
39import RecentFeedback from "./RecentFeedback.vue";
40
41interface Item {
42  chart: string;
43  data: any;
44}
45
46const props = defineProps({
47  item: {
48    type: Object as PropType<Item>,
49    required: true,
50  },
51});
52</script>
53