Skip to content

Commit 70b9ecc

Browse files
aledguedesaledguedes
committed
dashboard tela inicial
1 parent 2aa0f7c commit 70b9ecc

4 files changed

Lines changed: 539 additions & 117 deletions

File tree

‎src/app/models/Products.model.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,5 @@ export interface Product {
1212
stock: number;
1313
category: Category;
1414
status: Status;
15+
amount?: number;
1516
}

‎src/app/pages/dashboard/dash-content/dash-content.component.html‎

Lines changed: 216 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="widgets p-3">
1+
<div class="widgets w-full p-2">
22
<div class="widget total-vendas shadow-3">
33
<div class="widget-content">
44
<i class="widget-icon ri-money-dollar-circle-line"></i>
@@ -37,30 +37,222 @@ <h3 class="widget-title">Clientes Registrados</h3>
3737
</div>
3838
</div>
3939

40-
<div class="flex justify-content-center px-3">
41-
<div class="container w-full">
42-
<div class="order">
43-
<p-card header="Pedidos" styleClass="h-auto lg:h-full md:h-full px-3">
44-
@for (item of orders; track $index) {
45-
<div class="flex justify-content-between">
46-
<p>{{ '#' + item.order_id }}</p>
47-
<p>{{ item.user_id }}</p>
48-
<p>{{ item.items[0].product_id }}</p>
49-
<p>{{ item.items[0].quantity }}</p>
50-
<p>{{ item.status }}</p>
51-
</div>
52-
<p-divider />
53-
}
54-
</p-card>
40+
<div class="grid-content p-2">
41+
<div class="item">
42+
<div class="header pt-3 px-3">
43+
<h1>Melhores Produtos</h1>
5544
</div>
56-
<div class="mini-cards" styleClass="h-full">
57-
@for (item of dashOrders; track $index) {
58-
<p-card [header]="item.title" class="mr-1 mb-1">
59-
<p class="m-0">
60-
{{item.info}}
61-
</p>
62-
</p-card>
63-
}
45+
46+
<div class="px-3">
47+
<table class="">
48+
<thead>
49+
<tr>
50+
<th>Product</th>
51+
<th>Price</th>
52+
<th>Orders</th>
53+
<th>Stock</th>
54+
<th>Amount</th>
55+
</tr>
56+
</thead>
57+
<tbody>
58+
@for (item of products; track $index) {
59+
<tr>
60+
<td class="product">
61+
<img [src]="item.images[0]" alt="Shirt">
62+
<div class="product-info">
63+
<span>Branded T-Shirts</span>
64+
<small>24 Apr 2021</small>
65+
</div>
66+
</td>
67+
<td class="column">
68+
<span> {{ item.price | currency }} </span>
69+
<small>Price</small>
70+
</td>
71+
<td class="column">
72+
<span style="font-size: 13px;"> {{ item.status.name }} </span>
73+
<small>Status</small>
74+
</td>
75+
<td class="column">
76+
<span> {{ item.stock }} </span>
77+
<small>Stock</small>
78+
</td>
79+
<td class="column">
80+
<span> {{ item.amount | currency }} </span>
81+
<small>Amount</small>
82+
</td>
83+
</tr>
84+
}
85+
</tbody>
86+
</table>
87+
</div>
88+
</div>
89+
<div class="item">
90+
<div class="header pt-3 px-3">
91+
<h1>Mais vendidos</h1>
6492
</div>
93+
94+
<div class="px-3">
95+
<table class="">
96+
<thead>
97+
<tr>
98+
<th>Product</th>
99+
<th>Price</th>
100+
<th>Orders</th>
101+
<th>Stock</th>
102+
<th>Amount</th>
103+
</tr>
104+
</thead>
105+
<tbody>
106+
@for (item of products; track $index) {
107+
<tr>
108+
<td class="product">
109+
<img [src]="item.images[0]" alt="Shirt">
110+
<div class="product-info">
111+
<span>Branded T-Shirts</span>
112+
<small>24 Apr 2021</small>
113+
</div>
114+
</td>
115+
<td class="column">
116+
<span> {{ item.price | currency }} </span>
117+
<small>Price</small>
118+
</td>
119+
<td class="column">
120+
<span style="font-size: 13px;"> {{ item.status.name }} </span>
121+
<small>Status</small>
122+
</td>
123+
<td class="column">
124+
<span> {{ item.stock }} </span>
125+
<small>Stock</small>
126+
</td>
127+
<td class="column">
128+
<span> {{ item.amount | currency }} </span>
129+
<small>Amount</small>
130+
</td>
131+
</tr>
132+
}
133+
</tbody>
134+
</table>
135+
</div>
136+
</div>
137+
</div>
138+
139+
<div class="grid-graph p-2">
140+
<div class="graph p-3" style="background-color: #FFF;">
141+
graph
142+
</div>
143+
144+
<div class="orders p-3" style="background-color: #FFF;">
145+
<h2>Recent Orders</h2>
146+
147+
<p-table [value]="orders">
148+
<ng-template pTemplate="header">
149+
<tr>
150+
<th pSortableColumn="id">
151+
Order ID <p-sortIcon field="id" />
152+
</th>
153+
<th pSortableColumn="customer.name">
154+
Cliente <p-sortIcon field="customer.name" />
155+
</th>
156+
<th pSortableColumn="product">
157+
Produto <p-sortIcon field="product" />
158+
</th>
159+
<th pSortableColumn="amount">
160+
Valor <p-sortIcon field="amount" />
161+
</th>
162+
<th pSortableColumn="vendor">
163+
Vendedor <p-sortIcon field="vendor" />
164+
</th>
165+
<th pSortableColumn="status">
166+
Status <p-sortIcon field="status" />
167+
</th>
168+
<th pSortableColumn="rating.score">
169+
Avaliações <p-sortIcon field="rating.score" />
170+
</th>
171+
</tr>
172+
</ng-template>
173+
<ng-template pTemplate="body" let-order>
174+
<tr>
175+
<td>{{ order.id }}</td>
176+
<td>
177+
<p-avatar [image]="order.customer.image" styleClass="mr-2" size="large" shape="circle" />
178+
<span>{{ order.customer.name }}</span>
179+
</td>
180+
<td>{{ order.product }}</td>
181+
<td>{{ order.amount }}</td>
182+
<td>{{ order.vendor }}</td>
183+
<td>{{ order.status }}</td>
184+
<td>
185+
<div>
186+
<span>{{ order.rating.score }}</span>
187+
<span>{{ order.rating.votes + ' (votos)' }}</span>
188+
</div>
189+
</td>
190+
191+
</tr>
192+
</ng-template>
193+
</p-table>
194+
<!-- <table class="table-graph">
195+
<thead>
196+
<tr>
197+
<th>Order ID</th>
198+
<th>Customer</th>
199+
<th>Product</th>
200+
<th>Amount</th>
201+
<th>Vendor</th>
202+
<th>Status</th>
203+
<th>Rating</th>
204+
</tr>
205+
</thead>
206+
<tbody>
207+
<tr>
208+
<td><a href="#">#VZ2112</a></td>
209+
<td>
210+
<img src="https://via.placeholder.com/40" alt="Alex Smith" class="customer-img">
211+
<span class="customer-name">Alex Smith</span>
212+
</td>
213+
<td>Clothes</td>
214+
<td>$109.00</td>
215+
<td>Zoetic Fashion</td>
216+
<td class="status-paid">Paid</td>
217+
<td class="rating">5.0 (61 votes)</td>
218+
</tr>
219+
<tr>
220+
<td><a href="#">#VZ2111</a></td>
221+
<td>
222+
<img src="https://via.placeholder.com/40" alt="Jansh Brown" class="customer-img">
223+
<span class="customer-name">Jansh Brown</span>
224+
</td>
225+
<td>Kitchen Storage</td>
226+
<td>$149.00</td>
227+
<td>Micro Design</td>
228+
<td class="status-pending">Pending</td>
229+
<td class="rating">4.5 (61 votes)</td>
230+
</tr>
231+
<tr>
232+
<td><a href="#">#VZ2109</a></td>
233+
<td>
234+
<img src="https://via.placeholder.com/40" alt="Ayaan Bowen" class="customer-img">
235+
<span class="customer-name">Ayaan Bowen</span>
236+
</td>
237+
<td>Bike Accessories</td>
238+
<td>$215.00</td>
239+
<td>Nesta Technologies</td>
240+
<td class="status-paid">Paid</td>
241+
<td class="rating">4.9 (89 votes)</td>
242+
</tr>
243+
<tr>
244+
<td><a href="#">#VZ2108</a></td>
245+
<td>
246+
<img src="https://via.placeholder.com/40" alt="Prezy Mark" class="customer-img">
247+
<span class="customer-name">Prezy Mark</span>
248+
</td>
249+
<td>Furniture</td>
250+
<td>$199.00</td>
251+
<td>Syntyce Solutions</td>
252+
<td class="status-unpaid">Unpaid</td>
253+
<td class="rating">4.3 (47 votes)</td>
254+
</tr>
255+
</tbody>
256+
</table> -->
65257
</div>
66258
</div>

0 commit comments

Comments
 (0)