Skip to content
This repository was archived by the owner on Sep 24, 2025. It is now read-only.

Commit 46294f1

Browse files
author
trzysiek
committed
Remove stale dashboards + Add list of products in order section
1 parent 244ec60 commit 46294f1

File tree

14 files changed

+903
-1563
lines changed

14 files changed

+903
-1563
lines changed

‎TODO.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
- **Implement bugs**
2-
- **Improve monitoring dashboard(s)**
2+
- **Improve monitoring dashboard(s)**I
33

44
## Done
55

‎frontend-service/src/App.jsx‎

Lines changed: 44 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ function App() {
1414
const [categories, setCategories] = useState([])
1515
const [cart, setCart] = useState([])
1616
const [orders, setOrders] = useState([])
17+
const [detailedOrders, setDetailedOrders] = useState([])
1718
const [user, setUser] = useState(null)
1819
const [token, setToken] = useState(localStorage.getItem('token'))
1920
const [quantities, setQuantities] = useState({}) // Track quantities for each product
@@ -88,12 +89,14 @@ function App() {
8889
setUser(userResponse.data)
8990

9091
// Then load cart and orders using the actual user ID
91-
const [cartResponse, ordersResponse] = await Promise.all([
92+
const [cartResponse, ordersResponse, detailedOrdersResponse] = await Promise.all([
9293
axios.get(`${API_CONFIG.ORDER_SERVICE}/users/${userResponse.data.id}/cart`, { headers }),
93-
axios.get(`${API_CONFIG.ORDER_SERVICE}/users/${userResponse.data.id}/orders`, { headers })
94+
axios.get(`${API_CONFIG.ORDER_SERVICE}/users/${userResponse.data.id}/orders`, { headers }),
95+
axios.get(`${API_CONFIG.ORDER_SERVICE}/users/${userResponse.data.id}/orders/detailed`, { headers })
9496
])
9597
setCart(cartResponse.data)
9698
setOrders(ordersResponse.data)
99+
setDetailedOrders(detailedOrdersResponse.data)
97100
} catch (error) {
98101
// If token is invalid, clear it and user state
99102
if (error.response && (error.response.status === 401 || error.response.status === 403)) {
@@ -105,6 +108,7 @@ function App() {
105108
setUser(null)
106109
setCart([])
107110
setOrders([])
111+
setDetailedOrders([])
108112
localStorage.removeItem('token')
109113
alert('Session expired. Please log in again.')
110114
} else {
@@ -172,12 +176,14 @@ function App() {
172176
const userResponse = await axios.get(`${API_CONFIG.ORDER_SERVICE}/users/me`, { headers })
173177
setUser(userResponse.data)
174178

175-
const [cartResponse, ordersResponse] = await Promise.all([
179+
const [cartResponse, ordersResponse, detailedOrdersResponse] = await Promise.all([
176180
axios.get(`${API_CONFIG.ORDER_SERVICE}/users/${userResponse.data.id}/cart`, { headers }),
177-
axios.get(`${API_CONFIG.ORDER_SERVICE}/users/${userResponse.data.id}/orders`, { headers })
181+
axios.get(`${API_CONFIG.ORDER_SERVICE}/users/${userResponse.data.id}/orders`, { headers }),
182+
axios.get(`${API_CONFIG.ORDER_SERVICE}/users/${userResponse.data.id}/orders/detailed`, { headers })
178183
])
179184
setCart(cartResponse.data)
180185
setOrders(ordersResponse.data)
186+
setDetailedOrders(detailedOrdersResponse.data)
181187

182188
// Record login metrics
183189
await metrics.recordUserAction('login', userResponse.data.email, activeTab, 'success')
@@ -205,6 +211,7 @@ function App() {
205211
setUser(null)
206212
setCart([])
207213
setOrders([])
214+
setDetailedOrders([])
208215
localStorage.removeItem('token')
209216
alert('Logged out successfully!')
210217
}
@@ -473,13 +480,40 @@ function App() {
473480

474481
<div className="card">
475482
<h2>Order History</h2>
476-
{orders.length === 0 ? (
483+
{detailedOrders.length === 0 ? (
477484
<p>No orders yet</p>
478485
) : (
479-
<div>
480-
{orders.map(order => (
481-
<div key={order.id} style={{ padding: '10px', border: '1px solid #ddd', margin: '5px 0' }}>
482-
Order #{order.id} | Total: ${order.total_amount} | Status: {order.status}
486+
<div className="orders-list">
487+
{detailedOrders.map(order => (
488+
<div key={order.id} className="order-item">
489+
<div className="order-header">
490+
<h3>Order #{order.id}</h3>
491+
<div className="order-meta">
492+
<span className="order-total">Total: ${order.total_amount}</span>
493+
<span className="order-status">Status: {order.status}</span>
494+
<span className="order-date">
495+
Date: {new Date(order.created_at).toLocaleDateString()}
496+
</span>
497+
</div>
498+
</div>
499+
<div className="order-products">
500+
<h4>Products:</h4>
501+
{order.items.map(item => (
502+
<div key={item.id} className="order-product-item">
503+
<div className="product-info">
504+
<strong>{item.product_name}</strong>
505+
<p className="product-description">{item.product_description}</p>
506+
</div>
507+
<div className="product-details">
508+
<span className="quantity">Qty: {item.quantity}</span>
509+
<span className="unit-price">Unit Price: ${item.unit_price}</span>
510+
<span className="total-price">
511+
Total: ${(item.quantity * parseFloat(item.unit_price)).toFixed(2)}
512+
</span>
513+
</div>
514+
</div>
515+
))}
516+
</div>
483517
</div>
484518
))}
485519
</div>
@@ -628,6 +662,7 @@ function App() {
628662
localStorage.removeItem('token')
629663
setCart([])
630664
setOrders([])
665+
setDetailedOrders([])
631666
}}
632667
>
633668
Logout

‎frontend-service/src/index.css‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -250,3 +250,159 @@ body {
250250
.btn-danger:hover {
251251
background-color: #c82333;
252252
}
253+
254+
/* Order History Styles */
255+
.orders-list {
256+
display: flex;
257+
flex-direction: column;
258+
gap: 20px;
259+
}
260+
261+
.order-item {
262+
border: 1px solid #ddd;
263+
border-radius: 8px;
264+
padding: 20px;
265+
background-color: #f9f9f9;
266+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
267+
}
268+
269+
.order-header {
270+
border-bottom: 2px solid #007bff;
271+
padding-bottom: 15px;
272+
margin-bottom: 15px;
273+
}
274+
275+
.order-header h3 {
276+
color: #333;
277+
margin-bottom: 10px;
278+
font-size: 1.4em;
279+
}
280+
281+
.order-meta {
282+
display: flex;
283+
flex-wrap: wrap;
284+
gap: 20px;
285+
font-size: 14px;
286+
}
287+
288+
.order-total {
289+
font-weight: bold;
290+
color: #28a745;
291+
background-color: #d4edda;
292+
padding: 4px 8px;
293+
border-radius: 4px;
294+
}
295+
296+
.order-status {
297+
font-weight: bold;
298+
color: #007bff;
299+
background-color: #d1ecf1;
300+
padding: 4px 8px;
301+
border-radius: 4px;
302+
text-transform: capitalize;
303+
}
304+
305+
.order-date {
306+
color: #666;
307+
background-color: #e9ecef;
308+
padding: 4px 8px;
309+
border-radius: 4px;
310+
}
311+
312+
.order-products {
313+
margin-top: 15px;
314+
}
315+
316+
.order-products h4 {
317+
color: #333;
318+
margin-bottom: 15px;
319+
font-size: 1.1em;
320+
border-bottom: 1px solid #ddd;
321+
padding-bottom: 8px;
322+
}
323+
324+
.order-product-item {
325+
display: flex;
326+
justify-content: space-between;
327+
align-items: flex-start;
328+
padding: 15px;
329+
margin: 10px 0;
330+
border: 1px solid #e0e0e0;
331+
border-radius: 6px;
332+
background-color: white;
333+
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
334+
}
335+
336+
.product-info {
337+
flex: 1;
338+
margin-right: 20px;
339+
}
340+
341+
.product-info strong {
342+
display: block;
343+
color: #333;
344+
font-size: 16px;
345+
margin-bottom: 5px;
346+
}
347+
348+
.product-description {
349+
color: #666;
350+
font-size: 14px;
351+
margin: 0;
352+
line-height: 1.4;
353+
}
354+
355+
.product-details {
356+
display: flex;
357+
flex-direction: column;
358+
gap: 5px;
359+
text-align: right;
360+
min-width: 150px;
361+
}
362+
363+
.product-details span {
364+
font-size: 13px;
365+
padding: 2px 6px;
366+
border-radius: 3px;
367+
}
368+
369+
.quantity {
370+
background-color: #e3f2fd;
371+
color: #1976d2;
372+
}
373+
374+
.unit-price {
375+
background-color: #f3e5f5;
376+
color: #7b1fa2;
377+
}
378+
379+
.total-price {
380+
background-color: #e8f5e9;
381+
color: #388e3c;
382+
font-weight: bold;
383+
}
384+
385+
/* Responsive design for order items */
386+
@media (max-width: 768px) {
387+
.order-meta {
388+
flex-direction: column;
389+
gap: 10px;
390+
}
391+
392+
.order-product-item {
393+
flex-direction: column;
394+
gap: 15px;
395+
}
396+
397+
.product-info {
398+
margin-right: 0;
399+
}
400+
401+
.product-details {
402+
flex-direction: row;
403+
flex-wrap: wrap;
404+
gap: 10px;
405+
text-align: left;
406+
min-width: auto;
407+
}
408+
}

0 commit comments

Comments
 (0)