update dashboard

src/components/dashboard/recentsaleswidget.ts

@@ -15,7 +15,7 @@ import { Product, ProductService } from '@/src/service/product.service';
         ButtonModule,
         RippleModule,
     ],
-    template: `<div class="card">
+    template: `<div class="card !mb-8">
         <div class="font-semibold text-xl mb-4">Recent Sales</div>
         <p-table [value]="products" [paginator]="true" [rows]="5" responsiveLayout="scroll">
             <ng-template pTemplate="header">

src/components/dashboard/revenuestreamwidget.ts

@@ -9,7 +9,7 @@ import { LayoutService } from '@/src/service/layout.service';
     imports: [
         ChartModule,
     ],
-    template: `<div class="card">
+    template: `<div class="card !mb-8">
         <div class="font-semibold text-xl mb-4">Revenue Stream</div>
         <p-chart type="bar" [data]="chartData" [options]="chartOptions" class="h-80" />
     </div>`,
@@ -35,61 +35,68 @@ export class RevenueStreamWidget {
 
     initChart() {
         const documentStyle = getComputedStyle(document.documentElement);
-        const textColor = documentStyle.getPropertyValue('--text-color');
-        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
-        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const borderColor = documentStyle.getPropertyValue('--surface-border');
+        const textMutedColor = documentStyle.getPropertyValue('--text-color-secondary');
 
         this.chartData = {
-            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            labels: ['Q1', 'Q2', 'Q3', 'Q4'],
             datasets: [
                 {
-                    label: 'First Dataset',
-                    data: [65, 59, 80, 81, 56, 55, 40],
-                    fill: false,
-                    backgroundColor: documentStyle.getPropertyValue('--bluegray-700'),
-                    borderColor: documentStyle.getPropertyValue('--bluegray-700'),
-                    tension: .4
+                    type: 'bar',
+                    label: 'Subscriptions',
+                    backgroundColor: documentStyle.getPropertyValue('--p-primary-400'),
+                    data: [4000, 10000, 15000, 4000],
+                    barThickness: 32
                 },
                 {
-                    label: 'Second Dataset',
-                    data: [28, 48, 40, 19, 86, 27, 90],
-                    fill: false,
-                    backgroundColor: documentStyle.getPropertyValue('--green-600'),
-                    borderColor: documentStyle.getPropertyValue('--green-600'),
-                    tension: .4
+                    type: 'bar',
+                    label: 'Advertising',
+                    backgroundColor: documentStyle.getPropertyValue('--p-primary-300'),
+                    data: [2100, 8400, 2400, 7500],
+                    barThickness: 32
+                },
+                {
+                    type: 'bar',
+                    label: 'Affiliate',
+                    backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
+                    data: [4100, 5200, 3400, 7400],
+                    borderRadius: {
+                        topLeft: 8,
+                        topRight: 8
+                    },
+                    borderSkipped: true,
+                    barThickness: 32
                 }
             ]
         };
 
         this.chartOptions = {
-            plugins: {
-                legend: {
-                    labels: {
-                        color: textColor
-                    }
+        maintainAspectRatio: false,
+        aspectRatio: 0.8,
+        scales: {
+            x: {
+                stacked: true,
+                ticks: {
+                    color: textMutedColor
+                },
+                grid: {
+                    color: 'transparent',
+                    borderColor: 'transparent'
                 }
             },
-            scales: {
-                x: {
-                    ticks: {
-                        color: textColorSecondary
-                    },
-                    grid: {
-                        color: surfaceBorder,
-                        drawBorder: false
-                    }
+            y: {
+                stacked: true,
+                ticks: {
+                    color: textMutedColor
                 },
-                y: {
-                    ticks: {
-                        color: textColorSecondary
-                    },
-                    grid: {
-                        color: surfaceBorder,
-                        drawBorder: false
-                    }
+                grid: {
+                    color: borderColor,
+                    borderColor: 'transparent',
+                    drawTicks: false
                 }
             }
-        };
+        }
+    };
     }
 
     ngOnDestroy() {

src/views/dashboard.ts

@@ -10,14 +10,14 @@ import { NotificationsWidget } from '@/src/components/dashboard/notificationswid
   imports: [StatsWidget, RecentSalesWidget, BestSellingWidget, RevenueStreamWidget, NotificationsWidget],
   template: `
       <div class="grid grid-cols-12 gap-8">
-        <app-stats-widget />
+        <app-stats-widget class="contents" />
           <div class="col-span-12 xl:col-span-6">
               <app-recent-sales-widget />
               <app-best-selling-widget />
           </div>
           <div class="col-span-12 xl:col-span-6">
               <app-revenue-stream-widget />
-              <app-notifications-widget />
+              <app-notifications-widget  />
           </div>
       </div>
   `,

src/views/uikit/formlayoutdoc.ts

@@ -84,7 +84,7 @@ import {TextareaModule} from "primeng/textarea";
             </div>
         </div>
 
-        <div class="flex mt-20">
+        <div class="flex mt-8">
             <div class="card flex flex-col gap-6 w-full">
                 <div class="font-semibold text-xl">Advanced</div>
                 <div class="flex flex-col md:flex-row gap-6">