feat(components/admin): add clear cache button to email images library

- Introduced a new "Clear Cache" button in the AdminEmailAssets component to allow users to clear the email images cache.
- Enhanced the layout by wrapping the header and button in a flex container for improved UI.
- Integrated cache clearing functionality using a custom hook.

Author: tabiodun

src/components/admin/AdminEmailAssets.vue

@@ -1,7 +1,21 @@
 <!-- EmailImageLibrary.vue -->
 <template>
   <div class="email-images-library">
-    <h3>{{ $t('Email Images') }}</h3>
+    <div class="header-section">
+      <h3>{{ $t('Email Images') }}</h3>
+      <base-button
+        :text="$t('Clear Cache')"
+        :alt="$t('Clear Cache')"
+        data-testid="testClearEmailImagesCacheButton"
+        variant="outline"
+        size="small"
+        :disabled="isClearing"
+        :show-spinner="isClearing"
+        :action="clearEmailImagesCache"
+      >
+        {{ $t('Clear Cache') }}
+      </base-button>
+    </div>
     <div class="images-grid">
       <div
         v-for="image in emailImages"
@@ -26,9 +40,11 @@ import axios from 'axios';
 import { useI18n } from 'vue-i18n';
 import { useToast } from 'vue-toastification';
 import BaseButton from '@/components/BaseButton.vue';
+import { useEmailImagesClearCache } from '@/hooks/useEmailImagesClearCache';
 
 const { t } = useI18n();
 const $toasted = useToast();
+const { clearEmailImagesCache, isClearing } = useEmailImagesClearCache();
 
 const emailImages = ref<any[]>([]);
 
@@ -60,9 +76,15 @@ onMounted(async () => {
   max-height: 80vh;
   overflow-y: auto;
 }
+.header-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
 .email-images-library h3 {
   font-size: 1.25rem;
-  margin-bottom: 0.5rem;
+  margin: 0;
 }
 .images-grid {
   display: grid;

src/hooks/useEmailImagesClearCache.ts

@@ -0,0 +1,72 @@
+import { ref, readonly } from 'vue';
+import { whenever } from '@vueuse/core';
+import { useToast } from 'vue-toastification';
+import { useApi } from '@/hooks/useApi';
+import { getErrorMessage } from '@/utils/errors';
+
+interface ClearCacheResponse {
+  cleared_count: number;
+  message?: string;
+}
+
+export function useEmailImagesClearCache() {
+  const $toast = useToast();
+  const api = useApi();
+  const isClearing = ref(false);
+
+  const clearEmailImagesCache =
+    async (): Promise<ClearCacheResponse | null> => {
+      if (isClearing.value) {
+        return null;
+      }
+
+      isClearing.value = true;
+
+      try {
+        const { data, error, isFinished } = api<ClearCacheResponse>(
+          '/admins/email-images',
+          {
+            method: 'DELETE',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          },
+        );
+
+        // Wait for the request to complete
+        await new Promise<void>((resolve) => {
+          const unwatch = whenever(isFinished, () => {
+            unwatch();
+            resolve();
+          });
+        });
+
+        if (error.value) {
+          const errorMessage = getErrorMessage(error.value);
+          $toast.error(`Failed to clear email images cache: ${errorMessage}`);
+          return null;
+        }
+
+        if (data.value) {
+          const clearedCount = data.value.cleared_count;
+          $toast.success(
+            `Email images cache cleared successfully! ${clearedCount} entries removed.`,
+          );
+          return data.value;
+        }
+
+        return null;
+      } catch (error) {
+        const errorMessage = getErrorMessage(error);
+        $toast.error(`Error clearing email images cache: ${errorMessage}`);
+        return null;
+      } finally {
+        isClearing.value = false;
+      }
+    };
+
+  return {
+    clearEmailImagesCache,
+    isClearing: readonly(isClearing),
+  };
+}