update ui

src/components/dashboard/EmptyState.vue

@@ -35,9 +35,11 @@ const props = defineProps<Props>();
     <button
       v-if="actionLabel && onAction"
       @click="onAction"
-      class="px-6 py-3 bg-primary hover:bg-primary-600 text-white rounded-lg font-medium transition-colors press-animated flex items-center gap-2"
+      class="btn btn-outline-primary press-animated flex items-center gap-2"
     >
-      <span class="i-heroicons-plus w-5 h-5" />
+       <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+       </svg>
       {{ actionLabel }}
     </button>
 

src/components/dashboard/PageHeader.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils';
+import { VNode } from 'vue';
 
 interface Breadcrumb {
   label: string;
@@ -8,7 +9,7 @@ interface Breadcrumb {
 
 interface Action {
   label: string;
-  icon?: string;
+  icon?: string | VNode;
   variant?: 'primary' | 'secondary' | 'danger';
   onClick: () => void;
 }
@@ -76,7 +77,11 @@ const getButtonClass = (variant?: string) => {
           @click="action.onClick"
           :class="getButtonClass(action.variant)"
         >
-          <span v-if="action.icon" :class="[action.icon, 'w-5 h-5']" />
+           <component
+            v-if="action.icon"
+            :is="action.icon"
+            class="w-5 h-5"
+          />
           {{ action.label }}
         </button>
       </div>

src/components/icons/Add.vue

@@ -15,5 +15,5 @@
     </svg>
 </template>
 <script lang="ts" setup>
-defineProps<{ class?: string, filled?: boolean }>();
+defineProps<{  filled?: boolean }>();
 </script>

src/components/icons/Bell.vue

@@ -14,5 +14,5 @@
     </svg>
 </template>
 <script lang="ts" setup>
-defineProps<{ class?: string, filled?: boolean }>();
+defineProps<{  filled?: boolean }>();
 </script>

src/components/icons/Credit.vue

@@ -3,5 +3,5 @@
     <svg xmlns="http://www.w3.org/2000/svg" v-else viewBox="-10 -194 532 404"><path d="M448-136c9 0 16 7 16 16v32H48v-32c0-9 7-16 16-16h384zm16 112v160c0 9-7 16-16 16H64c-9 0-16-7-16-16V-24h416zM64-184c-35 0-64 29-64 64v256c0 35 29 64 64 64h384c35 0 64-29 64-64v-256c0-35-29-64-64-64H64zM80 96c0 13 11 24 24 24h48c13 0 24-11 24-24s-11-24-24-24h-48c-13 0-24 11-24 24zm144 0c0 13 11 24 24 24h64c13 0 24-11 24-24s-11-24-24-24h-64c-13 0-24 11-24 24z" fill="#1e3050"/></svg>
 </template>
 <script lang="ts" setup>
-defineProps<{ class?: string, filled?: boolean }>();
+defineProps<{  filled?: boolean }>();
 </script>

src/components/icons/Home.vue

@@ -13,5 +13,5 @@
     </svg>
 </template>
 <script lang="ts" setup>
-defineProps<{ class?: string, filled?: boolean }>();
+defineProps<{  filled?: boolean }>();
 </script>

src/components/icons/Layout.vue

@@ -15,5 +15,5 @@
     </svg>
 </template>
 <script lang="ts" setup>
-defineProps<{ class?: string, filled?: boolean }>();
+defineProps<{  filled?: boolean }>();
 </script>

src/components/icons/Video.vue

@@ -12,5 +12,5 @@
     </svg>
 </template>
 <script lang="ts" setup>
-defineProps<{ class?: string, filled?: boolean }>();
+defineProps<{  filled?: boolean }>();
 </script>