feat: Add frontend changes for Captain limits (#10749)

This PR introduces several improvements to the Captain AI dashboard
section:

- New billing page, with new colors, layout and meters for Captain usage
- Updated the base paywall component to use new colors
- Updated PageLayout.vue, it's more generic and can be used for other
pages as well
   - Use flags to toggle empty state and loading state
- Add prop for `featureFlag` to show the paywall slot based on feature
enabled on account
- Update `useAccount` to add a `isCloudFeatureEnabled`
- **Removed feature flag checks from captain route definitions**, so the
captain entry will always be visible on the sidebar
- Add banner to Captain pages for the following cases
   - Responses usage is over 80%
   - Documents limit is fully exhausted


### Screenshots

<details><summary>Free plan</summary>
<p>

![CleanShot 2025-01-22 at 18 37
11@2x](https://github.com/user-attachments/assets/17d3ddba-9095-4e81-9b6f-45b5f69e6a3f)
![CleanShot 2025-01-22 at 18 37
04@2x](https://github.com/user-attachments/assets/df9bb0a6-085f-45da-97d4-74cbcc33fc7e)


</p>
</details> 

<details><summary>Paid plan</summary>
<p>

![CleanShot 2025-01-22 at 18 36
45@2x](https://github.com/user-attachments/assets/a7ccf9d4-143b-49e4-8149-83c7a7985023)

![CleanShot 2025-01-22 at 20 23
57@2x](https://github.com/user-attachments/assets/c6ce35ba-e537-486d-85c8-4cc2d4e76438)


</p>
</details>

---------

Co-authored-by: Sojan Jose <sojan@pepalo.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/components-next/captain/PageLayout.vue

@@ -1,8 +1,12 @@
 <script setup>
+import { computed } from 'vue';
+import { useAccount } from 'dashboard/composables/useAccount';
 import Button from 'dashboard/components-next/button/Button.vue';
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import Policy from 'dashboard/components/policy.vue';
 
-defineProps({
+const { featureFlag } = defineProps({
   currentPage: {
     type: Number,
     default: 1,
@@ -19,10 +23,26 @@ defineProps({
     type: String,
     default: '',
   },
+  buttonPolicy: {
+    type: Array,
+    default: () => [],
+  },
   buttonLabel: {
     type: String,
     default: '',
   },
+  featureFlag: {
+    type: String,
+    default: '',
+  },
+  isFetching: {
+    type: Boolean,
+    default: false,
+  },
+  isEmpty: {
+    type: Boolean,
+    default: false,
+  },
   showPaginationFooter: {
     type: Boolean,
     default: true,
@@ -30,6 +50,11 @@ defineProps({
 });
 
 const emit = defineEmits(['click', 'close', 'update:currentPage']);
+const { isCloudFeatureEnabled } = useAccount();
+
+const showPaywall = computed(() => {
+  return !isCloudFeatureEnabled(featureFlag);
+});
 
 const handleButtonClick = () => {
   emit('click');
@@ -52,16 +77,19 @@ const handlePageChange = event => {
             <slot name="headerTitle" />
           </span>
           <div
+            v-if="!showPaywall"
             v-on-clickaway="() => emit('close')"
             class="relative group/campaign-button"
           >
-            <Button
-              :label="buttonLabel"
-              icon="i-lucide-plus"
-              size="sm"
-              class="group-hover/campaign-button:brightness-110"
-              @click="handleButtonClick"
-            />
+            <Policy :permissions="buttonPolicy">
+              <Button
+                :label="buttonLabel"
+                icon="i-lucide-plus"
+                size="sm"
+                class="group-hover/campaign-button:brightness-110"
+                @click="handleButtonClick"
+              />
+            </Policy>
             <slot name="action" />
           </div>
         </div>
@@ -69,7 +97,21 @@ const handlePageChange = event => {
     </header>
     <main class="flex-1 px-6 overflow-y-auto xl:px-0">
       <div class="w-full max-w-[960px] mx-auto py-4">
-        <slot name="default" />
+        <slot name="controls" />
+        <div
+          v-if="isFetching"
+          class="flex items-center justify-center py-10 text-n-slate-11"
+        >
+          <Spinner />
+        </div>
+        <div v-else-if="showPaywall">
+          <slot name="paywall" />
+        </div>
+        <div v-else-if="isEmpty">
+          <slot name="emptyState" />
+        </div>
+        <slot v-else name="body" />
+        <slot />
       </div>
     </main>
     <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10 px-4 pb-4">