feat: Complete API binding

app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue

@@ -1,10 +1,20 @@
 <template>
   <div class="flex flex-col flex-1 gap-6 p-4 overflow-auto font-inter">
-    <SLAMetrics :hit-rate="`12%`" :no-of-breaches="5" />
-    <SLATable />
+    <SLAMetrics
+      :hit-rate="slaMetrics.hitRate"
+      :no-of-breaches="slaMetrics.numberOfSLABreaches"
+    />
+    <SLATable
+      :sla-reports="slaReports"
+      :current-page="Number(slaMeta.currentPage)"
+      :total-count="Number(slaMeta.count)"
+      :page-size="3"
+      @page-change="onPageChange"
+    />
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex';
 import SLAMetrics from './components/SLA/SLAMetrics.vue';
 import SLATable from './components/SLA/SLATable.vue';
 export default {
@@ -13,5 +23,31 @@ export default {
     SLAMetrics,
     SLATable,
   },
+  data() {
+    return {
+      pageNumber: 1,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      slaReports: 'slaReports/getAll',
+      slaMetrics: 'slaReports/getMetrics',
+      slaMeta: 'slaReports/getMeta',
+    }),
+  },
+  mounted() {
+    this.$store.dispatch('slaReports/getMetrics');
+    this.fetchSLAReports();
+  },
+  methods: {
+    fetchSLAReports({ pageNumber } = {}) {
+      this.$store.dispatch('slaReports/get', {
+        page: pageNumber || this.pageNumber,
+      });
+    },
+    onPageChange(pageNumber) {
+      this.fetchSLAReports({ pageNumber });
+    },
+  },
 };
 </script>

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue

@@ -0,0 +1,43 @@
+<script setup>
+import CardLabels from 'dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue';
+defineProps({
+  slaName: {
+    type: String,
+    required: true,
+  },
+  conversationId: {
+    type: Number,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="grid content-center h-16 grid-cols-12 gap-4 px-6 py-0 bg-white border-b border-slate-75 dark:border-slate-800/50 dark:bg-slate-900"
+  >
+    <div
+      class="flex items-center capitalize py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 text-left rtl:text-right col-span-2"
+    >
+      {{ slaName }}
+    </div>
+    <div
+      class="flex items-center col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+    >
+      #{{ conversationId }} with John Doe
+      <card-labels :conversation-id="148" />
+    </div>
+    <div
+      class="flex items-center col-span-2 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+    >
+      Elijah
+    </div>
+    <div
+      class="flex items-center col-span-2 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+    >
+      <woot-button color-scheme="secondary" variant="link">
+        View details
+      </woot-button>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue

@@ -1,60 +1,92 @@
 <template>
-  <div
-    class="min-w-full border rounded-xl border-slate-75 dark:border-slate-800/50"
-  >
-    <!-- Header -->
+  <div>
     <div
-      class="grid content-center h-12 grid-cols-12 gap-4 px-6 py-0 border-b bg-slate-25 border-slate-75 dark:border-slate-800 rounded-t-xl dark:bg-slate-900"
+      class="min-w-full border rounded-xl border-slate-75 dark:border-slate-800/50"
     >
+      <!-- Header -->
       <div
-        class="flex items-center font-medium capitalize text-xs py-2 px-0 tracking-[10%] text-slate-700 dark:text-slate-100 text-left rtl:text-right col-span-2"
+        class="grid content-center h-12 grid-cols-12 gap-4 px-6 py-0 border-b bg-slate-25 border-slate-75 dark:border-slate-800 rounded-t-xl dark:bg-slate-900"
       >
-        POLICY BREACHED
+        <div
+          class="flex items-center font-medium capitalize text-xs py-2 px-0 tracking-[10%] text-slate-700 dark:text-slate-100 text-left rtl:text-right col-span-2"
+        >
+          POLICY BREACHED
+        </div>
+        <div
+          class="flex items-center col-span-6 px-0 py-2 text-xs font-medium text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
+        >
+          CONVERSATION
+        </div>
+        <div
+          class="flex items-center px-0 text-xs font-medium text-left capitalize col-span-2py-2 text-slate-700 dark:text-slate-100 rtl:text-right"
+        >
+          AGENT
+        </div>
+        <div
+          class="col-span-2 px-0 py-2 text-xs font-medium text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
+        />
       </div>
-      <div
-        class="flex items-center col-span-6 px-0 py-2 text-xs font-medium text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
-      >
-        CONVERSATION
-      </div>
-      <div
-        class="flex items-center px-0 text-xs font-medium text-left capitalize col-span-2py-2 text-slate-700 dark:text-slate-100 rtl:text-right"
-      >
-        AGENT
-      </div>
-      <div
-        class="col-span-2 px-0 py-2 text-xs font-medium text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
+      <SLA-report-item
+        v-for="sla in slaReports"
+        :key="sla.id"
+        :sla-name="sla.sla_policy.name"
+        :conversation-id="sla.conversation.id"
       />
     </div>
-    <div
-      class="grid content-center h-16 grid-cols-12 gap-4 px-6 py-0 bg-white border-b border-slate-75 dark:border-slate-800/50 dark:bg-slate-900"
-    >
-      <div
-        class="flex items-center capitalize py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 text-left rtl:text-right col-span-2"
-      >
-        Premium SLA
-      </div>
-      <div
-        class="flex items-center col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
-      >
-        #198 with John Doe
-        <card-labels :conversation-id="148" />
-      </div>
-      <div
-        class="flex items-center col-span-2 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
-      >
-        Elijah
-      </div>
-      <div
-        class="flex items-center col-span-2 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
-      >
-        <woot-button color-scheme="secondary" variant="link">
-          View details
-        </woot-button>
-      </div>
-    </div>
+    <table-footer
+      v-if="shouldShowFooter"
+      :current-page="currentPage"
+      :total-count="totalCount"
+      :page-size="pageSize"
+      class="dark:bg-slate-900 sticky bottom-0"
+      @page-change="onPageChange"
+    />
   </div>
 </template>
 
-<script setup>
-import CardLabels from 'dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue';
+<script>
+import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
+import SLAReportItem from './SLAReportItem.vue';
+export default {
+  name: 'SLATable',
+  components: {
+    SLAReportItem,
+    TableFooter,
+  },
+  props: {
+    slaReports: {
+      type: Array,
+      default: () => [],
+    },
+    totalCount: {
+      type: Number,
+      default: 0,
+    },
+    currentPage: {
+      type: Number,
+      default: 1,
+    },
+    pageSize: {
+      type: Number,
+      default: 25,
+    },
+  },
+  data() {
+    return {
+      pageNo: 1,
+    };
+  },
+  computed: {
+    shouldShowFooter() {
+      return this.currentPage === 1
+        ? this.totalCount > this.pageSize
+        : this.slaReports.length > 0;
+    },
+  },
+  methods: {
+    onPageChange(page) {
+      this.$emit('page-change', page);
+    },
+  },
+};
 </script>