diff --git a/src/app/models/Products.model.ts b/src/app/models/Products.model.ts index 6fb8721..3fc6ba6 100644 --- a/src/app/models/Products.model.ts +++ b/src/app/models/Products.model.ts @@ -12,4 +12,5 @@ export interface Product { stock: number; category: Category; status: Status; + amount?: number; } \ No newline at end of file diff --git a/src/app/pages/dashboard/dash-content/dash-content.component.html b/src/app/pages/dashboard/dash-content/dash-content.component.html index c5fa5e0..614db02 100644 --- a/src/app/pages/dashboard/dash-content/dash-content.component.html +++ b/src/app/pages/dashboard/dash-content/dash-content.component.html @@ -1,4 +1,4 @@ -
+
@@ -37,30 +37,112 @@

Clientes Registrados

-
-
-
- - @for (item of orders; track $index) { -
-

{{ '#' + item.order_id }}

-

{{ item.user_id }}

-

{{ item.items[0].product_id }}

-

{{ item.items[0].quantity }}

-

{{ item.status }}

-
- - } - +
+
+ graph +
+ +
+

Recent Orders

+ +
+
+ +
+
+
+

Melhores Produtos

-
- @for (item of dashOrders; track $index) { - -

- {{item.info}} -

- - } + +
+ + + + + + + + + + + + @for (item of products; track $index) { + + + + + + + + } + +
ProductPriceOrdersStockAmount
+ Shirt +
+ Branded T-Shirts + 24 Apr 2021 +
+ 		+ {{ item.price | currency }} + Price + + {{ item.status.name }} + Status + + {{ item.stock }} + Stock + + {{ item.amount | currency }} + Amount +
+
+
+
+
+

Mais vendidos

+
+ +
+ + + + + + + + + + + + @for (item of products; track $index) { + + + + + + + + } + +
ProductPriceOrdersStockAmount
+ Shirt +
+ Branded T-Shirts + 24 Apr 2021 +
+ 		+ {{ item.price | currency }} + Price + + {{ item.status.name }} + Status + + {{ item.stock }} + Stock + + {{ item.amount | currency }} + Amount +
\ No newline at end of file diff --git a/src/app/pages/dashboard/dash-content/dash-content.component.scss b/src/app/pages/dashboard/dash-content/dash-content.component.scss index a675190..56c7bfc 100644 --- a/src/app/pages/dashboard/dash-content/dash-content.component.scss +++ b/src/app/pages/dashboard/dash-content/dash-content.component.scss @@ -1,151 +1,300 @@ .cards { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; } .container { - display: grid; - grid-template-columns: 2fr 1fr; - gap: 20px; + display: grid; + grid-template-columns: 2fr 1fr; + gap: 20px; } .order { - grid-area: order; + grid-area: order; } .mini-cards { - grid-area: mini-cards; - display: flex; - flex-direction: column; - justify-content: space-between; + grid-area: mini-cards; + display: flex; + flex-direction: column; + justify-content: space-between; } - .widgets { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); - gap: 20px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); + justify-content: center; + gap: 20px; } .widget { - padding: 15px; - border-radius: 8px; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); - transition: transform 0.3s ease; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - color: #333; + padding: 15px; + border-radius: 8px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + color: #333; } .widget-content { - display: flex; - align-items: center; - justify-content: space-between; - text-align: center; + display: flex; + align-items: center; + justify-content: space-between; + text-align: center; } .widget-icon { - font-size: 3.5rem; - margin-right: 10px; - vertical-align: middle; + font-size: 3.5rem; + margin-right: 10px; + vertical-align: middle; } .widget-info { - text-align: left; - padding: 16px; + text-align: left; + padding: 16px; } .widget-title { - font-size: 1rem; - margin: 0; + font-size: 1rem; + margin: 0; } .widget-value { - font-size: 1.5rem; - font-weight: bold; - margin-top: 5px; - margin-bottom: 5px; + font-size: 1.5rem; + font-weight: bold; + margin-top: 5px; + margin-bottom: 5px; } .chart-container { - padding: 20px; - background-color: #f0f0f0; - border-radius: 10px; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + padding: 20px; + background-color: #f0f0f0; + border-radius: 10px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } /* Estilos específicos para cada widget */ .widget.total-vendas { - background-color: #fdebd0; + background-color: #fdebd0; } .widget.total-vendas .widget-icon { - color: #f5b041; + color: #f5b041; } .widget.numero-pedidos { - background-color: #dff0d8; + background-color: #dff0d8; } .widget.numero-pedidos .widget-icon { - color: #5cb85c; + color: #5cb85c; } .widget.produtos-estoque { - background-color: #d9edf7; + background-color: #d9edf7; } .widget.produtos-estoque .widget-icon { - color: #06b0e4; + color: #06b0e4; } .widget.clientes-registrados { - background-color: #fcf8e3; + background-color: #fcf8e3; } .widget.clientes-registrados .widget-icon { - color: #f0ad4e; + color: #f0ad4e; } .container { - grid-template-areas: - 'order mini-cards'; + grid-template-areas: + 'order mini-cards'; } @media (max-width: 992px) { - .container { - grid-template-columns: 1fr; - grid-template-areas: - 'mini-cards' - 'order'; - } + .container { + grid-template-columns: 1fr; + grid-template-areas: + 'mini-cards' + 'order'; + } - .mini-cards { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - } + .mini-cards { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + } - .mini-card { - flex: 0 0 auto; - max-width: none; - } + .mini-card { + flex: 0 0 auto; + max-width: none; + } } @media (max-width: 767px) { - .mini-cards { - flex: 0 0 auto; - flex-direction: column; - width: 100%; - } + .mini-cards { + flex: 0 0 auto; + flex-direction: column; + width: 100%; + } + + .mini-card { + flex: 0 0 auto; + max-width: none; + } +} + +// BOX Best Selling Products + +.header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +.header h1 { + font-size: 1.5em; + margin: 0; +} + +.sort-by { + font-size: 0.9em; + color: #888; +} + +.sort-by span { + color: #333; +} + +table { + width: 100%; + border-collapse: collapse; +} + +thead { + display: none; +} + +tbody tr { + display: flex; + align-items: center; + padding: 10px 0; + border-bottom: 1px solid #eee; +} + +tbody tr:last-child { + border-bottom: none; +} + +td { + text-align: left; + display: flex; + align-items: flex-start; + justify-content: flex-start; +} + +td.product { + flex: 2; +} + +td.column { + flex: 1; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +td img { + width: 50px; + height: 50px; + margin-right: 10px; + border-radius: 5px; + vertical-align: middle; +} + +td .product-info { + display: flex; + flex-direction: column; +} + +td .product-info span { + font-weight: bold; +} + +td .column span { + font-weight: bold; +} + +td small { + color: #888; +} + +.out-of-stock { + color: #fa8994; +} + +.tag { + background-color: #feede9; + padding: 4px 8px; + border-radius: 4px; + font-size: 10px; + font-weight: 600; +} + +.footer { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 20px; +} + +.pagination button { + background-color: #fff; + border: 1px solid #ccc; + padding: 5px 10px; + margin: 0 2px; + cursor: pointer; +} + +.pagination button.active { + background-color: #007bff; + color: #fff; + border-color: #007bff; +} + +.grid-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; +} + +.item { + background-color: #FFF; +} + +@media (max-width: 576px) { + + .grid-content { + grid-template-columns: 1fr; + } +} + +.grid-graph { + display: grid; + grid-template-columns: 1fr 2fr; + gap: 20px; +} + +@media (max-width: 576px) { - .mini-card { - flex: 0 0 auto; - max-width: none; - } + .grid-graph { + grid-template-columns: 1fr; + } } \ No newline at end of file diff --git a/src/app/pages/dashboard/dash-content/dash-content.component.ts b/src/app/pages/dashboard/dash-content/dash-content.component.ts index f15150c..9a44929 100644 --- a/src/app/pages/dashboard/dash-content/dash-content.component.ts +++ b/src/app/pages/dashboard/dash-content/dash-content.component.ts @@ -1,38 +1,69 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { ProductsService } from '../../../services/products/products.service'; import { CardModule } from 'primeng/card'; import { ButtonModule } from 'primeng/button'; import { DividerModule } from 'primeng/divider'; -import { NgStyle } from '@angular/common'; +import { CurrencyPipe, NgClass, NgStyle } from '@angular/common'; +import { DataViewModule } from 'primeng/dataview'; +import { TagModule } from 'primeng/tag'; +import { TableModule } from 'primeng/table'; +import { Product } from '../../../models/Products.model'; +import { AvatarModule } from 'primeng/avatar'; +import { AvatarGroupModule } from 'primeng/avatargroup'; +import { DashOrdersComponent } from '../dash-orders/dash-orders.component'; @Component({ selector: 'app-dash-content', standalone: true, - imports: [CardModule, ButtonModule, DividerModule, NgStyle], + imports: [ + CardModule, + ButtonModule, + DividerModule, + NgStyle, + NgClass, + DataViewModule, + TagModule, + TableModule, + CurrencyPipe, + AvatarModule, + AvatarGroupModule, + DashOrdersComponent + ], templateUrl: './dash-content.component.html', styleUrl: './dash-content.component.scss' }) -export class DashContentComponent { - - dashOrders: any[] = [ - { - title: "Simple Card 1", - info: "Lorem ipsum dolor sit amet 1111..." - }, - { - title: "Simple Card 2", - info: "Lorem ipsum dolor sit amet 2222..." - }, - { - title: "Simple Card 3", - info: "Lorem ipsum dolor sit amet 3333..." - } - ]; - - orders = [ - { "order_id": 1, "user_id": "Emily", "items": [{ "product_id": "Produto 01", "quantity": 2 }, { "product_id": 3, "quantity": 1 }], "total_price": 849.97, "status": "Shipped" }, - { "order_id": 2, "user_id": "João", "items": [{ "product_id": "Produto 02", "quantity": 1 }, { "product_id": 7, "quantity": 1 }], "total_price": 1149.98, "status": "Delivered" }, - { "order_id": 3, "user_id": "Djoor", "items": [{ "product_id": "Produto 04", "quantity": 1 }, { "product_id": 8, "quantity": 1 }], "total_price": 599.98, "status": "Processing" } - ] +export class DashContentComponent implements OnInit { + + products: Product[] = []; + + constructor( + private prodService: ProductsService + ) { } + + ngOnInit(): void { + this.listBestSelling(); + } + + listBestSelling() { + + this.prodService.getAllProducts(1, 30).subscribe({ + next: (data) => { + let filterProds = data.slice(0, 5); + filterProds.forEach((item: Product) => { + item['amount'] = item.stock * item.price; + }) + this.products = filterProds; + console.log(this.products) + }, + error: (err) => { + console.log(err); + } + }); + } + + gerarNumeroAleatorio(min: number, max: number) { + return Math.floor(Math.random() * (max - min + 1)) + min; + } } diff --git a/src/app/pages/dashboard/dash-orders/dash-orders.component.html b/src/app/pages/dashboard/dash-orders/dash-orders.component.html new file mode 100644 index 0000000..69250f6 --- /dev/null +++ b/src/app/pages/dashboard/dash-orders/dash-orders.component.html @@ -0,0 +1,37 @@ + + + + + Order ID + + + Cliente + + + Produto + + + Valor + + + Vendedor + + + Status + + + + + + {{ order.order_id }} + + + {{ order.customer.name }} + + {{ order.product }} + {{ order.amount }} + {{ order.vendor }} + {{ order.status }} + + + \ No newline at end of file diff --git a/src/app/pages/dashboard/dash-orders/dash-orders.component.scss b/src/app/pages/dashboard/dash-orders/dash-orders.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/dashboard/dash-orders/dash-orders.component.spec.ts b/src/app/pages/dashboard/dash-orders/dash-orders.component.spec.ts new file mode 100644 index 0000000..f5eb830 --- /dev/null +++ b/src/app/pages/dashboard/dash-orders/dash-orders.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DashOrdersComponent } from './dash-orders.component'; + +describe('DashOrdersComponent', () => { + let component: DashOrdersComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DashOrdersComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DashOrdersComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/dashboard/dash-orders/dash-orders.component.ts b/src/app/pages/dashboard/dash-orders/dash-orders.component.ts new file mode 100644 index 0000000..2af3631 --- /dev/null +++ b/src/app/pages/dashboard/dash-orders/dash-orders.component.ts @@ -0,0 +1,84 @@ +import { Component } from '@angular/core'; +import { TableModule } from 'primeng/table'; +import { AvatarModule } from 'primeng/avatar'; +import { AvatarGroupModule } from 'primeng/avatargroup'; + +@Component({ + selector: 'app-dash-orders', + standalone: true, + imports: [ + TableModule, + AvatarModule, + AvatarGroupModule + ], + templateUrl: './dash-orders.component.html', + styleUrl: './dash-orders.component.scss' +}) +export class DashOrdersComponent { + + + + orders: any[] = [ + { + "order_id": "#VZ2112", + "customer": { + "name": "Alex Smith", + "image_url": "https://via.placeholder.com/40" + }, + "product": "Clothes", + "amount": "$109.00", + "vendor": "Zoetic Fashion", + "status": "Paid", + "rating": { + "score": 5.0, + "votes": 61 + } + }, + { + "order_id": "#VZ2111", + "customer": { + "name": "Jansh Brown", + "image_url": "https://via.placeholder.com/40" + }, + "product": "Kitchen Storage", + "amount": "$149.00", + "vendor": "Micro Design", + "status": "Pending", + "rating": { + "score": 4.5, + "votes": 61 + } + }, + { + "order_id": "#VZ2109", + "customer": { + "name": "Ayaan Bowen", + "image_url": "https://via.placeholder.com/40" + }, + "product": "Bike Accessories", + "amount": "$215.00", + "vendor": "Nesta Technologies", + "status": "Paid", + "rating": { + "score": 4.9, + "votes": 89 + } + }, + { + "order_id": "#VZ2108", + "customer": { + "name": "Prezy Mark", + "image_url": "https://via.placeholder.com/40" + }, + "product": "Furniture", + "amount": "$199.00", + "vendor": "Syntyce Solutions", + "status": "Unpaid", + "rating": { + "score": 4.3, + "votes": 47 + } + } + ]; + +}