feat: Add SLA header component (#9129)

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Pranav <pranav@chatwoot.com>

app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue

@@ -0,0 +1,21 @@
+<script setup>
+defineProps({
+  keepAlive: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col w-full h-full px-5 pt-8 m-0 overflow-auto bg-white sm:px-16 sm:pt-16 dark:bg-slate-900"
+  >
+    <div class="flex items-start max-w-[900px] w-full">
+      <keep-alive v-if="keepAlive">
+        <router-view />
+      </keep-alive>
+      <router-view v-else />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue

@@ -0,0 +1,100 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  iconName: {
+    type: String,
+    required: true,
+  },
+  href: {
+    type: String,
+    default: '',
+  },
+  linkText: {
+    type: String,
+    default: '',
+  },
+});
+
+const openInNewTab = url => {
+  if (!url) return;
+  window.open(url, '_blank', 'noopener noreferrer');
+};
+</script>
+
+<template>
+  <div class="flex flex-col items-start w-full gap-4">
+    <!-- Header section with icon, title and action button -->
+    <div class="flex items-center justify-between w-full gap-4">
+      <!-- Icon and title container -->
+      <div class="flex items-center gap-3">
+        <div
+          class="flex items-center w-10 h-10 p-1 rounded-full bg-woot-25/60 dark:bg-woot-900/60"
+        >
+          <div
+            class="flex items-center justify-center w-full h-full rounded-full bg-woot-75/70 dark:bg-woot-800/40"
+          >
+            <fluent-icon
+              size="14"
+              :icon="iconName"
+              type="outline"
+              class="flex-shrink-0 text-woot-500 dark:text-woot-500"
+            />
+          </div>
+        </div>
+        <h1
+          class="text-2xl font-medium tracking-tight text-slate-900 dark:text-slate-25"
+        >
+          {{ title }}
+        </h1>
+      </div>
+      <!-- Slot for additional actions on larger screens -->
+      <div class="hidden gap-2 sm:flex">
+        <slot name="actions" />
+      </div>
+    </div>
+    <!-- Description and optional link -->
+    <div
+      class="flex flex-col gap-2 text-slate-600 dark:text-slate-300 max-w-[721px] w-full"
+    >
+      <p class="mb-0 text-sm font-normal">
+        <slot name="description">{{ description }}</slot>
+      </p>
+      <!-- Conditional link -->
+      <a
+        v-if="href && linkText"
+        :href="href"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="sm:inline-flex hidden gap-1 w-fit items-center text-woot-500 dark:text-woot-500 text-sm font-medium tracking=[-0.6%] hover:underline"
+      >
+        {{ linkText }}
+        <fluent-icon
+          size="16"
+          icon="chevron-right"
+          type="outline"
+          class="flex-shrink-0 text-woot-500 dark:text-woot-500"
+        />
+      </a>
+    </div>
+    <!-- Mobile view for actions and link -->
+    <div class="flex items-start justify-start w-full gap-3 sm:hidden">
+      <slot name="actions" />
+      <woot-button
+        v-if="href && linkText"
+        color-scheme="secondary"
+        icon="arrow-outwards"
+        class="flex-row-reverse rounded-xl min-w-0 !bg-slate-50 !text-slate-900 dark:!text-white dark:!bg-slate-800"
+        @click="openInNewTab(href)"
+      >
+        {{ linkText }}
+      </woot-button>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup>
+import BaseSettingsHeader from '../../components/BaseSettingsHeader.vue';
+</script>
+<template>
+  <base-settings-header
+    :title="$t('SLA.HEADER')"
+    :description="$t('SLA.DESCRIPTION')"
+    :link-text="$t('SLA.LEARN_MORE')"
+    href="/"
+    icon-name="document-list-clock"
+  >
+    <template #actions>
+      <woot-button
+        color-scheme="primary"
+        icon="plus-sign"
+        class="rounded-xl"
+        @click="$emit('click')"
+      >
+        {{ $t('SLA.ADD_ACTION') }}
+      </woot-button>
+    </template>
+  </base-settings-header>
+</template>