scss

src/app/portal-manage/dashboard-management/dashboard-management.component.html

@@ -164,7 +164,7 @@
             [col]="panel.col"
           >
             <ng-template #header>
-              <div class="e-panel-header flex justify-between items-center">
+              <div class="flex justify-between items-center">
                 <span>{{ panel.header }}</span>
                 <div class="flex items-center space-x-2">
                   <button

src/app/portal-manage/services/widget-config-generator.service.ts

@@ -57,6 +57,8 @@ export class WidgetConfigGeneratorService {
         newConfig.backgroundColor = 'linear-gradient(to top right, #3366FF, #00CCFF)'; // Default background
         newConfig.iconColor = '#FFFFFF'; // Default icon color
         newConfig.borderColor = '#FFFFFF'; // Default border color
+        widget.rows = 1; // Set default rows for KPI widget
+        widget.cols = 1; // Set default cols for KPI widget
         break;
 
       case 'SlicerWidgetComponent':

src/app/portal-manage/widgets/simple-kpi-widget/simple-kpi-widget.component.html

@@ -2,38 +2,38 @@
 <div [style.border-color]="borderColor" class="relative flex flex-col h-full rounded-xl bg-white bg-clip-border text-gray-700 shadow-md transition-shadow duration-300 ease-in-out hover:shadow-lg hover:shadow-gray-900/10 border-2">
 
   <!-- Header -->
-  <div [style.background]="backgroundColor" class="relative mx-4 -mt-4 rounded-xl bg-clip-border text-white shadow-lg shadow-blue-500/40 p-4">
+  <div [style.background]="backgroundColor" class="relative mx-4 -mt-4 rounded-xl bg-clip-border text-white shadow-lg shadow-blue-500/40 p-3">
     <div class="flex items-center justify-between">
-      <div class="flex items-center gap-4">
-        <i *ngIf="icon" [style.color]="iconColor" [class]="'bi bi-' + icon + ' text-4xl'"></i>
-        <h4 class="text-xl font-semibold truncate">{{ title }}</h4>
+      <div class="flex items-center gap-3">
+        <i *ngIf="icon" [style.color]="iconColor" [class]="'bi bi-' + icon + ' text-3xl'"></i>
+        <h4 class="text-lg font-semibold truncate">{{ title }}</h4>
       </div>
       <!-- Removed trendValue display -->
     </div>
   </div>
 
   <!-- Body -->
-  <div class="flex-1 flex justify-center items-center p-6">
+  <div class="flex-1 flex justify-center items-center p-3">
 
     <!-- Loading State -->
     <div *ngIf="isLoading" class="text-center">
-      <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-blue-500 mx-auto"></div>
-      <p class="text-gray-500 mt-4 text-lg">Loading Data...</p>
+      <div class="animate-spin rounded-full h-12 w-12 border-t-4 border-b-4 border-blue-500 mx-auto"></div>
+      <p class="text-gray-500 mt-2 text-base">Loading Data...</p>
     </div>
 
     <!-- Error State -->
     <div *ngIf="hasError" class="text-center text-red-500">
-      <i class="bi bi-x-octagon-fill text-5xl"></i>
-      <p class="mt-3 text-xl font-semibold">Error Loading</p>
+      <i class="bi bi-x-octagon-fill text-4xl"></i>
+      <p class="mt-2 text-lg font-semibold">Error Loading</p>
       <p class="text-sm text-red-400">{{ errorMessage }}</p>
     </div>
 
     <!-- Content -->
     <div *ngIf="!isLoading && !hasError" class="text-center">
-      <p class="block font-sans text-7xl font-bold leading-snug tracking-normal text-blue-gray-900 antialiased">
+      <p class="block font-sans text-5xl font-bold leading-snug tracking-normal text-blue-gray-900 antialiased">
         {{ value }}
       </p>
-      <p *ngIf="unit" class="block font-sans text-2xl font-normal leading-relaxed text-blue-gray-600 antialiased">
+      <p *ngIf="unit" class="block font-sans text-xl font-normal leading-relaxed text-blue-gray-600 antialiased">
         {{ unit }}
       </p>
     </div>

src/styles.scss

@@ -35,20 +35,20 @@
 @import url("https://fonts.googleapis.com/css?family=Kanit:300,400,600,700,800");
 @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
 
-@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-angular-grids/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
-@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
-@import '../node_modules/@syncfusion/ej2-angular-pivotview/styles/tailwind3.css';
-@import "../node_modules/@syncfusion/ej2-angular-layouts/styles/tailwind3.css";
+@import '../node_modules/@syncfusion/ej2-base/styles/tailwind.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css';
+@import '../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css';
+@import '../node_modules/@syncfusion/ej2-angular-grids/styles/tailwind.css';
+@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind.css';
+@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind.css';
+@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
+@import '../node_modules/@syncfusion/ej2-angular-pivotview/styles/tailwind.css';
+@import "../node_modules/@syncfusion/ej2-angular-layouts/styles/tailwind.css";
 // @import "../node_modules/angular-calendar/scss/angular-calendar.scss";
 
 //swiperjs