feat: Add SLA reports page

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

@@ -0,0 +1,11 @@
+<template>
+  <div class="flex-1 overflow-auto p-4">
+    <h1>SLA Reports</h1>
+  </div>
+</template>
+<script>
+import { defineComponent, ref, watch, watchEffect } from 'vue';
+export default {
+  name: 'SLAReports',
+};
+</script>

app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js

@@ -9,6 +9,7 @@ const TeamReports = () => import('./TeamReports.vue');
 const CsatResponses = () => import('./CsatResponses.vue');
 const BotReports = () => import('./BotReports.vue');
 const LiveReports = () => import('./LiveReports.vue');
+const SLAReports = () => import('./SLAReports.vue');
 
 export default {
   routes: [
@@ -151,5 +152,22 @@ export default {
         },
       ],
     },
+    {
+      path: frontendURL('accounts/:accountId/reports'),
+      component: SettingsContent,
+      props: {
+        headerTitle: 'SLA_REPORTS.HEADER',
+        icon: 'people-team',
+        keepAlive: false,
+      },
+      children: [
+        {
+          path: 'sla',
+          name: 'sla_reports',
+          roles: ['administrator'],
+          component: SLAReports,
+        },
+      ],
+    },
   ],
 };