feat: better empty state for SLA (#9198)

* feat: better empty state

* feat: better create CTA

* feat: use text-sm

app/javascript/dashboard/i18n/locale/en/sla.json

@@ -2,11 +2,18 @@
   "SLA": {
     "HEADER": "SLA",
     "ADD_ACTION": "Add SLA",
+    "ADD_ACTION_LONG": "Create a new SLA Policy",
     "DESCRIPTION": "Service Level Agreements (SLAs) are contracts that define clear expectations between your team and customers. They establish standards for response and resolution times, creating a framework for accountability and ensures a consistent, high-quality experience.",
     "LEARN_MORE": "Learn more about SLA",
     "LOADING": "Fetching SLAs",
     "LIST": {
       "404": "There are no SLAs available in this account.",
+      "EMPTY": {
+        "TITLE_1": "Enterprise P0",
+        "DESC_1": "Issues raised by enterprise customers, that require immediate attention.",
+        "TITLE_2": "Enterprise P1",
+        "DESC_2": "Issues raised by enterprise customers, that needs to be acknowledged quickly."
+      },
       "BUSINESS_HOURS_ON": "Business hours on",
       "BUSINESS_HOURS_OFF": "Business hours off",
       "RESPONSE_TYPES": {
@@ -78,4 +85,4 @@
       }
     }
   }
-}
+}

app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue

@@ -4,18 +4,49 @@
     :loading-message="$t('SLA.LOADING')"
   >
     <template #header>
-      <SLA-header @click="openAddPopup" />
+      <SLA-header :show-actions="records.length > 0" @click="openAddPopup" />
     </template>
     <template #loading>
       <SLAListItemLoading v-for="ii in 2" :key="ii" class="mb-3" />
     </template>
     <template #body>
-      <p
-        v-if="!records.length"
-        class="flex flex-col items-center justify-center h-full"
-      >
-        {{ $t('SLA.LIST.404') }}
-      </p>
+      <div v-if="!records.length" class="w-full min-h-[12rem] relative">
+        <div class="w-full space-y-3">
+          <SLA-list-item
+            class="opacity-25 dark:opacity-20"
+            :sla-name="$t('SLA.LIST.EMPTY.TITLE_1')"
+            :description="$t('SLA.LIST.EMPTY.DESC_1')"
+            first-response="20m"
+            next-response="1h"
+            resolution-time="24h"
+            has-business-hours
+          />
+          <SLA-list-item
+            class="opacity-25 dark:opacity-20"
+            :sla-name="$t('SLA.LIST.EMPTY.TITLE_2')"
+            :description="$t('SLA.LIST.EMPTY.DESC_2')"
+            first-response="2h"
+            next-response="4h"
+            resolution-time="4d"
+            has-business-hours
+          />
+        </div>
+        <div
+          class="absolute inset-0 flex flex-col items-center justify-center w-full h-full bg-gradient-to-t from-white dark:from-slate-900 to-transparent"
+        >
+          <p class="max-w-xs text-sm font-medium text-center">
+            {{ $t('SLA.LIST.404') }}
+          </p>
+          <woot-button
+            color-scheme="primary"
+            icon="plus-sign"
+            class="px-5 mt-4 rounded-xl"
+            @click="openAddPopup"
+          >
+            {{ $t('SLA.ADD_ACTION_LONG') }}
+          </woot-button>
+        </div>
+      </div>
       <div v-if="records.length" class="flex flex-col w-full h-full gap-3">
         <SLA-list-item
           v-for="sla in records"

app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue

@@ -1,5 +1,12 @@
 <script setup>
 import BaseSettingsHeader from '../../components/BaseSettingsHeader.vue';
+
+defineProps({
+  showActions: {
+    type: Boolean,
+    default: true,
+  },
+});
 </script>
 <template>
   <base-settings-header
@@ -9,7 +16,7 @@ import BaseSettingsHeader from '../../components/BaseSettingsHeader.vue';
     href="/"
     icon-name="document-list-clock"
   >
-    <template #actions>
+    <template v-if="showActions" #actions>
       <woot-button
         color-scheme="primary"
         icon="plus-sign"