Code format
This commit is contained in:
Çetin
@@ -4,97 +4,92 @@ import { ButtonModule } from 'primeng/button';
|
||||
import { MenuModule } from 'primeng/menu';
|
||||
|
||||
@Component({
|
||||
standalone:true,
|
||||
standalone: true,
|
||||
selector: 'app-best-selling-widget',
|
||||
imports: [
|
||||
CommonModule,
|
||||
ButtonModule,
|
||||
MenuModule,
|
||||
],
|
||||
template: `
|
||||
<div class="card">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div class="font-semibold text-xl">Best Selling Products</div>
|
||||
<div>
|
||||
<button pButton type="button" icon="pi pi-ellipsis-v" class="p-button-rounded p-button-text p-button-plain" (click)="menu.toggle($event)"></button>
|
||||
<p-menu #menu [popup]="true" [model]="items"></p-menu>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Space T-Shirt</span>
|
||||
<div class="mt-1 text-muted-color">Clothing</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-orange-500 h-full" style="width: 50%"></div>
|
||||
</div>
|
||||
<span class="text-orange-500 ml-4 font-medium">%50</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Portal Sticker</span>
|
||||
<div class="mt-1 text-muted-color">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-cyan-500 h-full" style="width: 16%"></div>
|
||||
</div>
|
||||
<span class="text-cyan-500 ml-4 font-medium">%16</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Supernova Sticker</span>
|
||||
<div class="mt-1 text-muted-color">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-pink-500 h-full" style="width: 67%"></div>
|
||||
</div>
|
||||
<span class="text-pink-500 ml-4 font-medium">%67</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Wonders Notebook</span>
|
||||
<div class="mt-1 text-muted-color">Office</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-green-500 h-full" style="width: 35%"></div>
|
||||
</div>
|
||||
<span class="text-primary ml-4 font-medium">%35</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Mat Black Case</span>
|
||||
<div class="mt-1 text-muted-color">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-purple-500 h-full" style="width: 75%"></div>
|
||||
</div>
|
||||
<span class="text-purple-500 ml-4 font-medium">%75</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Robots T-Shirt</span>
|
||||
<div class="mt-1 text-muted-color">Clothing</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-teal-500 h-full" style="width: 40%"></div>
|
||||
</div>
|
||||
<span class="text-teal-500 ml-4 font-medium">%40</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>`,
|
||||
imports: [CommonModule, ButtonModule, MenuModule],
|
||||
template: ` <div class="card">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div class="font-semibold text-xl">Best Selling Products</div>
|
||||
<div>
|
||||
<button pButton type="button" icon="pi pi-ellipsis-v" class="p-button-rounded p-button-text p-button-plain" (click)="menu.toggle($event)"></button>
|
||||
<p-menu #menu [popup]="true" [model]="items"></p-menu>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Space T-Shirt</span>
|
||||
<div class="mt-1 text-muted-color">Clothing</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-orange-500 h-full" style="width: 50%"></div>
|
||||
</div>
|
||||
<span class="text-orange-500 ml-4 font-medium">%50</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Portal Sticker</span>
|
||||
<div class="mt-1 text-muted-color">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-cyan-500 h-full" style="width: 16%"></div>
|
||||
</div>
|
||||
<span class="text-cyan-500 ml-4 font-medium">%16</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Supernova Sticker</span>
|
||||
<div class="mt-1 text-muted-color">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-pink-500 h-full" style="width: 67%"></div>
|
||||
</div>
|
||||
<span class="text-pink-500 ml-4 font-medium">%67</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Wonders Notebook</span>
|
||||
<div class="mt-1 text-muted-color">Office</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-green-500 h-full" style="width: 35%"></div>
|
||||
</div>
|
||||
<span class="text-primary ml-4 font-medium">%35</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Mat Black Case</span>
|
||||
<div class="mt-1 text-muted-color">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-purple-500 h-full" style="width: 75%"></div>
|
||||
</div>
|
||||
<span class="text-purple-500 ml-4 font-medium">%75</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Robots T-Shirt</span>
|
||||
<div class="mt-1 text-muted-color">Clothing</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-teal-500 h-full" style="width: 40%"></div>
|
||||
</div>
|
||||
<span class="text-teal-500 ml-4 font-medium">%40</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>`
|
||||
})
|
||||
export class BestSellingWidget {
|
||||
menu = null;
|
||||
|
||||
@@ -3,12 +3,9 @@ import { ButtonModule } from 'primeng/button';
|
||||
import { MenuModule } from 'primeng/menu';
|
||||
|
||||
@Component({
|
||||
standalone:true,
|
||||
standalone: true,
|
||||
selector: 'app-notifications-widget',
|
||||
imports: [
|
||||
ButtonModule,
|
||||
MenuModule,
|
||||
],
|
||||
imports: [ButtonModule, MenuModule],
|
||||
template: `<div class="card">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="font-semibold text-xl">Notifications</div>
|
||||
@@ -25,7 +22,7 @@ import { MenuModule } from 'primeng/menu';
|
||||
<i class="pi pi-dollar !text-xl text-blue-500"></i>
|
||||
</div>
|
||||
<span class="text-surface-900 dark:text-surface-0 leading-normal"
|
||||
>Richard Jones
|
||||
>Richard Jones
|
||||
<span class="text-surface-700 dark:text-surface-100">has purchased a blue t-shirt for <span class="text-primary font-bold">$79.00</span></span>
|
||||
</span>
|
||||
</li>
|
||||
@@ -44,7 +41,7 @@ import { MenuModule } from 'primeng/menu';
|
||||
<i class="pi pi-dollar !text-xl text-blue-500"></i>
|
||||
</div>
|
||||
<span class="text-surface-900 dark:text-surface-0 leading-normal"
|
||||
>Keyser Wick
|
||||
>Keyser Wick
|
||||
<span class="text-surface-700 dark:text-surface-100">has purchased a black jacket for <span class="text-primary font-bold">$59.00</span></span>
|
||||
</span>
|
||||
</li>
|
||||
@@ -53,7 +50,7 @@ import { MenuModule } from 'primeng/menu';
|
||||
<i class="pi pi-question !text-xl text-pink-500"></i>
|
||||
</div>
|
||||
<span class="text-surface-900 dark:text-surface-0 leading-normal"
|
||||
>Jane Davis
|
||||
>Jane Davis
|
||||
<span class="text-surface-700 dark:text-surface-100">has posted a new questions about your product.</span>
|
||||
</span>
|
||||
</li>
|
||||
@@ -73,7 +70,7 @@ import { MenuModule } from 'primeng/menu';
|
||||
<span class="text-surface-900 dark:text-surface-0 leading-normal"><span class="text-primary font-bold">12</span> users have added your products to their wishlist.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>`,
|
||||
</div>`
|
||||
})
|
||||
export class NotificationsWidget {
|
||||
items = [
|
||||
|
||||
@@ -6,14 +6,9 @@ import { CommonModule } from '@angular/common';
|
||||
import { Product, ProductService } from '../../service/product.service';
|
||||
|
||||
@Component({
|
||||
standalone:true,
|
||||
standalone: true,
|
||||
selector: 'app-recent-sales-widget',
|
||||
imports: [
|
||||
CommonModule,
|
||||
TableModule,
|
||||
ButtonModule,
|
||||
RippleModule,
|
||||
],
|
||||
imports: [CommonModule, TableModule, ButtonModule, RippleModule],
|
||||
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">
|
||||
@@ -28,10 +23,10 @@ import { Product, ProductService } from '../../service/product.service';
|
||||
<ng-template #body let-product>
|
||||
<tr>
|
||||
<td style="width: 15%; min-width: 5rem;">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/product/{{product.image}}" class="shadow-lg" alt="{{product.name}}" width="50">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/product/{{ product.image }}" class="shadow-lg" alt="{{ product.name }}" width="50" />
|
||||
</td>
|
||||
<td style="width: 35%; min-width: 7rem;">{{product.name}}</td>
|
||||
<td style="width: 35%; min-width: 8rem;">{{product.price | currency:'USD'}}</td>
|
||||
<td style="width: 35%; min-width: 7rem;">{{ product.name }}</td>
|
||||
<td style="width: 35%; min-width: 8rem;">{{ product.price | currency: 'USD' }}</td>
|
||||
<td style="width: 15%;">
|
||||
<button pButton pRipple type="button" icon="pi pi-search" class="p-button p-component p-button-text p-button-icon-only"></button>
|
||||
</td>
|
||||
@@ -39,15 +34,14 @@ import { Product, ProductService } from '../../service/product.service';
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>`,
|
||||
providers: [ProductService],
|
||||
providers: [ProductService]
|
||||
})
|
||||
export class RecentSalesWidget {
|
||||
products!: Product[];
|
||||
|
||||
|
||||
constructor(private productService: ProductService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.productService.getProductsSmall().then(data => this.products = data);
|
||||
this.productService.getProductsSmall().then((data) => (this.products = data));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,15 +4,13 @@ import { debounceTime, Subscription } from 'rxjs';
|
||||
import { LayoutService } from '../../../layout/service/layout.service';
|
||||
|
||||
@Component({
|
||||
standalone:true,
|
||||
standalone: true,
|
||||
selector: 'app-revenue-stream-widget',
|
||||
imports: [
|
||||
ChartModule,
|
||||
],
|
||||
imports: [ChartModule],
|
||||
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>`,
|
||||
</div>`
|
||||
})
|
||||
export class RevenueStreamWidget {
|
||||
chartData: any;
|
||||
@@ -22,11 +20,9 @@ export class RevenueStreamWidget {
|
||||
subscription!: Subscription;
|
||||
|
||||
constructor(public layoutService: LayoutService) {
|
||||
this.subscription = this.layoutService.configUpdate$
|
||||
.pipe(debounceTime(25))
|
||||
.subscribe(() => {
|
||||
this.initChart();
|
||||
});
|
||||
this.subscription = this.layoutService.configUpdate$.pipe(debounceTime(25)).subscribe(() => {
|
||||
this.initChart();
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
@@ -73,32 +69,32 @@ export class RevenueStreamWidget {
|
||||
};
|
||||
|
||||
this.chartOptions = {
|
||||
maintainAspectRatio: false,
|
||||
aspectRatio: 0.8,
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: textMutedColor
|
||||
maintainAspectRatio: false,
|
||||
aspectRatio: 0.8,
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: textMutedColor
|
||||
},
|
||||
grid: {
|
||||
color: 'transparent',
|
||||
borderColor: 'transparent'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
color: 'transparent',
|
||||
borderColor: 'transparent'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: textMutedColor
|
||||
},
|
||||
grid: {
|
||||
color: borderColor,
|
||||
borderColor: 'transparent',
|
||||
drawTicks: false
|
||||
y: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: textMutedColor
|
||||
},
|
||||
grid: {
|
||||
color: borderColor,
|
||||
borderColor: 'transparent',
|
||||
drawTicks: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
|
||||
@@ -2,68 +2,68 @@ import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
standalone:true,
|
||||
standalone: true,
|
||||
selector: 'app-stats-widget',
|
||||
imports: [CommonModule],
|
||||
template: `<div class="col-span-12 lg:col-span-6 xl:col-span-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-muted-color font-medium mb-4">Orders</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-blue-100 dark:bg-blue-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-shopping-cart text-blue-500 !text-xl"></i>
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-muted-color font-medium mb-4">Orders</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-blue-100 dark:bg-blue-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-shopping-cart text-blue-500 !text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-primary font-medium">24 new </span>
|
||||
<span class="text-muted-color">since last visit</span>
|
||||
</div>
|
||||
<span class="text-primary font-medium">24 new </span>
|
||||
<span class="text-muted-color">since last visit</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-muted-color font-medium mb-4">Revenue</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-orange-100 dark:bg-orange-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-dollar text-orange-500 !text-xl"></i>
|
||||
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-muted-color font-medium mb-4">Revenue</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-orange-100 dark:bg-orange-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-dollar text-orange-500 !text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-primary font-medium">%52+ </span>
|
||||
<span class="text-muted-color">since last week</span>
|
||||
</div>
|
||||
<span class="text-primary font-medium">%52+ </span>
|
||||
<span class="text-muted-color">since last week</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-muted-color font-medium mb-4">Customers</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-cyan-100 dark:bg-cyan-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-users text-cyan-500 !text-xl"></i>
|
||||
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-muted-color font-medium mb-4">Customers</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-cyan-100 dark:bg-cyan-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-users text-cyan-500 !text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-primary font-medium">520 </span>
|
||||
<span class="text-muted-color">newly registered</span>
|
||||
</div>
|
||||
<span class="text-primary font-medium">520 </span>
|
||||
<span class="text-muted-color">newly registered</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-muted-color font-medium mb-4">Comments</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-purple-100 dark:bg-purple-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-comment text-purple-500 !text-xl"></i>
|
||||
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-muted-color font-medium mb-4">Comments</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-purple-100 dark:bg-purple-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-comment text-purple-500 !text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-primary font-medium">85 </span>
|
||||
<span class="text-muted-color">responded</span>
|
||||
</div>
|
||||
<span class="text-primary font-medium">85 </span>
|
||||
<span class="text-muted-color">responded</span>
|
||||
</div>
|
||||
</div>`,
|
||||
</div>`
|
||||
})
|
||||
export class StatsWidget {}
|
||||
|
||||
@@ -6,20 +6,20 @@ import { BestSellingWidget } from './components/bestsellingwidget';
|
||||
import { RevenueStreamWidget } from './components/revenuestreamwidget';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
imports: [StatsWidget, RecentSalesWidget, BestSellingWidget, RevenueStreamWidget, NotificationsWidget],
|
||||
template: `
|
||||
<div class="grid grid-cols-12 gap-8">
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
selector: 'app-dashboard',
|
||||
imports: [StatsWidget, RecentSalesWidget, BestSellingWidget, RevenueStreamWidget, NotificationsWidget],
|
||||
template: `
|
||||
<div class="grid grid-cols-12 gap-8">
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class Dashboard {}
|
||||
|
||||
Reference in New Issue
Block a user