feat: Introduce AI summary section, adjust month navigation layout, and remove global text styling.

src/assets/theme.css

@@ -206,7 +206,4 @@ body {
     color: var(--warning-color);
 }
     
-span, a, i {
-    color: var(--text-color) !important;
-    padding: 0 !important;
-}
+

src/components/dashboard/DashboardView.vue

@@ -136,17 +136,18 @@ const userName = computed(() => {
 
     <!-- Header / Greeting -->
     <div class="flex flex-col gap-1 px-1">
-      <div class="flex items-center justify-between mb-4">
-        <Button icon="pi pi-chevron-left" text rounded @click="prevMonth" />
-        <span class="text-xl font-semibold capitalize">{{ displayMonth }}</span>
-        <Button icon="pi pi-chevron-right" text rounded @click="nextMonth" />
-      </div>
+
       <h1 class="!text-2xl !font-semibold text-surface-900 dark:text-surface-0">
         Hello, {{ userName }}! 👋
       </h1>
       <p class="text-surface-500 dark:text-surface-400">
         Here is your financial overview.
       </p>
+      <div class="flex items-center justify-between mb-4">
+        <Button icon="pi pi-chevron-left" text rounded @click="prevMonth" />
+        <span class="!text-lg !font-semibold !capitalize">{{ displayMonth }}</span>
+        <Button icon="pi pi-chevron-right" text rounded @click="nextMonth" />
+      </div>
     </div>
 
     <!-- Stats Cards -->
@@ -157,7 +158,10 @@ const userName = computed(() => {
         <StatsCard title="Total Balance" :amount="dashboardData.balance" icon="pi pi-wallet" color="blue" />
       </div>
     </div>
-
+    <div class="flex card">
+      <span class="text-xl !font-semibold pl-1">Ai summary</span>
+      <span v-html="dashboardData.analyzedText" />
+    </div>
     <!-- Charts & Upcoming -->
     <div class="grid grid-cols-1 lg:grid-cols-1 gap-4">
       <!-- Charts -->