carloshra/nexus-spa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add widgets

Browse Source
This commit is contained in:
Çetin
2025-01-03 01:13:17 +03:00
parent 7429367493
commit 00117452b9
5 changed files with 383 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/components/dashboard/bestsellingwidget.ts Normal file
View File

@@ -0,0 +1,105 @@
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ButtonModule } from 'primeng/button';
import { MenuModule } from 'primeng/menu';
@Component({
standalone:true,
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;
items = [
{ label: 'Add New', icon: 'pi pi-fw pi-plus' },
{ label: 'Remove', icon: 'pi pi-fw pi-trash' }
];
}

59
src/components/dashboard/notificationswidget.ts Normal file
View File

@@ -0,0 +1,59 @@
import { Component } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { MenuModule } from 'primeng/menu';
@Component({
standalone:true,
imports: [
ButtonModule,
MenuModule,
],
template: `<div class="card">
<div class="flex align-items-center justify-content-between mb-4">
<h5>Notifications</h5>
<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>
<span class="block text-600 font-medium mb-3">TODAY</span>
<ul class="p-0 mx-0 mt-0 mb-4 list-none">
<li class="flex align-items-center py-2 border-bottom-1 surface-border">
<div class="w-3rem h-3rem flex align-items-center justify-content-center bg-blue-100 border-circle mr-3 flex-shrink-0">
<i class="pi pi-dollar text-xl text-blue-500"></i>
</div>
<span class="text-900 line-height-3">Richard Jones
<span class="text-700"> has purchased a blue t-shirt for <span class="text-blue-500">79$</span></span>
</span>
</li>
<li class="flex align-items-center py-2">
<div class="w-3rem h-3rem flex align-items-center justify-content-center bg-orange-100 border-circle mr-3 flex-shrink-0">
<i class="pi pi-download text-xl text-orange-500"></i>
</div>
<span class="text-700 line-height-3">Your request for withdrawal of <span class="text-blue-500 font-medium">2500$</span> has been initiated.</span>
</li>
</ul>
<span class="block text-600 font-medium mb-3">YESTERDAY</span>
<ul class="p-0 m-0 list-none">
<li class="flex align-items-center py-2 border-bottom-1 surface-border">
<div class="w-3rem h-3rem flex align-items-center justify-content-center bg-blue-100 border-circle mr-3 flex-shrink-0">
<i class="pi pi-dollar text-xl text-blue-500"></i>
</div>
<span class="text-900 line-height-3">Keyser Wick
<span class="text-700"> has purchased a black jacket for <span class="text-blue-500">59$</span></span>
</span>
</li>
<li class="flex align-items-center py-2 border-bottom-1 surface-border">
<div class="w-3rem h-3rem flex align-items-center justify-content-center bg-pink-100 border-circle mr-3 flex-shrink-0">
<i class="pi pi-question text-xl text-pink-500"></i>
</div>
<span class="text-900 line-height-3">Jane Davis<span class="text-700"> has posted a new questions about your product.</span></span>
</li>
</ul>
</div>`,
})
export class NotificationsWidget {
}

52
src/components/dashboard/recentsaleswidget.ts Normal file
View File

@@ -0,0 +1,52 @@
import { Component } from '@angular/core';
import { RippleModule } from 'primeng/ripple';
import { TableModule } from 'primeng/table';
import { ButtonModule } from 'primeng/button';
import { CommonModule } from '@angular/common';
import { Product } from '@/src/app/demo/api/product';
import { ProductService } from '@/src/app/demo/service/product.service';
@Component({
standalone:true,
imports: [
CommonModule,
TableModule,
ButtonModule,
RippleModule,
],
template: `<div class="card">
<h5>Recent Sales</h5>
<p-table [value]="products" [paginator]="true" [rows]="5" responsiveLayout="scroll">
<ng-template pTemplate="header">
<tr>
<th>Image</th>
<th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
<th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
<th>View</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td style="width: 15%; min-width: 5rem;">
<img src="assets/demo/images/product/{{product.image}}" class="shadow-4" 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: 15%;">
<button pButton pRipple type="button" icon="pi pi-search" class="p-button p-component p-button-text p-button-icon-only"></button>
</td>
</tr>
</ng-template>
</p-table>
</div>`,
})
export class RecentSalesWidget {
products!: Product[];
constructor(private productService: ProductService) {}
ngOnInit() {
this.productService.getProductsSmall().then(data => this.products = data);
}
}

99
src/components/dashboard/revenuestreamwidget.ts Normal file
View File

@@ -0,0 +1,99 @@
import { Component } from '@angular/core';
import { ChartModule } from 'primeng/chart';
import { debounceTime, Subscription } from 'rxjs';
import { LayoutService } from '@/src/app/layout/service/app.layout.service';
@Component({
standalone:true,
imports: [
ChartModule,
],
template: `<div class="card">
<div class="font-semibold text-xl mb-4">Revenue Stream</div>
<p-chart type="bar" [data]="chartData" [options]="chartOptions" class="h-80" />
</div>`,
})
export class RevenueStreamWidget {
chartData: any;
chartOptions: any;
subscription!: Subscription;
constructor(public layoutService: LayoutService) {
this.subscription = this.layoutService.configUpdate$
.pipe(debounceTime(25))
.subscribe((config) => {
this.initChart();
});
}
ngOnInit() {
this.initChart();
}
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');
this.chartData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
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
},
{
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
}
]
};
this.chartOptions = {
plugins: {
legend: {
labels: {
color: textColor
}
}
},
scales: {
x: {
ticks: {
color: textColorSecondary
},
grid: {
color: surfaceBorder,
drawBorder: false
}
},
y: {
ticks: {
color: textColorSecondary
},
grid: {
color: surfaceBorder,
drawBorder: false
}
}
}
};
}
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
}

68
src/components/dashboard/statswidget.ts Normal file
View File

@@ -0,0 +1,68 @@
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
standalone:true,
imports: [CommonModule],
template: `<div class="col-12 lg:col-6 xl:col-3">
<div class="card mb-0">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Orders</span>
<div class="text-900 font-medium text-xl">152</div>
</div>
<div class="flex align-items-center justify-content-center bg-blue-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">24 new </span>
<span class="text-500">since last visit</span>
</div>
</div>
<div class="col-12 lg:col-6 xl:col-3">
<div class="card mb-0">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Revenue</span>
<div class="text-900 font-medium text-xl">$2.100</div>
</div>
<div class="flex align-items-center justify-content-center bg-orange-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">%52+ </span>
<span class="text-500">since last week</span>
</div>
</div>
<div class="col-12 lg:col-6 xl:col-3">
<div class="card mb-0">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Customers</span>
<div class="text-900 font-medium text-xl">28441</div>
</div>
<div class="flex align-items-center justify-content-center bg-cyan-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">520 </span>
<span class="text-500">newly registered</span>
</div>
</div>
<div class="col-12 lg:col-6 xl:col-3">
<div class="card mb-0">
<div class="flex justify-content-between mb-3">
<div>
<span class="block text-500 font-medium mb-3">Comments</span>
<div class="text-900 font-medium text-xl">152 Unread</div>
</div>
<div class="flex align-items-center justify-content-center bg-purple-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
<i class="pi pi-comment text-purple-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">85 </span>
<span class="text-500">responded</span>
</div>
</div>`,
})
export class StatsWidget {}