ahasani/psp_panel
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
src/components/dashboard/bestsellingwidget.ts
+105
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' }
];
}