Skip to content

Commit 09269d8

Browse files
davebirrdavebirr
committed
Add Orders page and remove sample Counter/Weather pages
- Created Orders.razor page with filtering by status and region - Created orders.css with responsive table styling - Updated NavMenu to show Orders and Support Tickets instead of Counter/Weather - Removed sample Counter.razor and Weather.razor pages - Added orders.css reference to App.razor - Orders page shows stats cards and filterable table of all orders
1 parent e8a0b0f commit 09269d8

File tree

6 files changed

+428
-87
lines changed

6 files changed

+428
-87
lines changed

‎FabrikamDashboard/Components/App.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<link rel="stylesheet" href="@Assets["app.css"]" />
1010
<link rel="stylesheet" href="@Assets["dashboard.css"]" />
1111
<link rel="stylesheet" href="@Assets["css/support-tickets.css"]" />
12+
<link rel="stylesheet" href="@Assets["css/orders.css"]" />
1213
<link rel="stylesheet" href="@Assets["FabrikamDashboard.styles.css"]" />
1314
<ImportMap />
1415
<link rel="icon" type="image/png" href="favicon.png" />

‎FabrikamDashboard/Components/Layout/NavMenu.razor‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,14 @@
1515
</div>
1616

1717
<div class="nav-item px-3">
18-
<NavLink class="nav-link" href="counter">
19-
<span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
18+
<NavLink class="nav-link" href="orders">
19+
<span class="bi bi-box-seam-nav-menu" aria-hidden="true"></span> Orders
2020
</NavLink>
2121
</div>
2222

2323
<div class="nav-item px-3">
24-
<NavLink class="nav-link" href="weather">
25-
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
24+
<NavLink class="nav-link" href="support-tickets">
25+
<span class="bi bi-ticket-nav-menu" aria-hidden="true"></span> Support Tickets
2626
</NavLink>
2727
</div>
2828
</nav>

‎FabrikamDashboard/Components/Pages/Counter.razor‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎FabrikamDashboard/Components/Pages/Orders.razor‎

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
@page "/orders"
2+
@using FabrikamContracts.DTOs.Orders
3+
@using FabrikamDashboard.Services
4+
@inject FabrikamApiClient ApiClient
5+
@inject ILogger<Orders> Logger
6+
7+
<PageTitle>Orders - Fabrikam Dashboard</PageTitle>
8+
9+
<div class="orders-container">
10+
<div class="orders-header">
11+
<h1 class="orders-title">📦 Orders</h1>
12+
<div class="orders-filters">
13+
<select class="filter-select" @onchange="FilterByStatus">
14+
<option value="">All Statuses</option>
15+
<option value="Ordered">Ordered</option>
16+
<option value="InProduction">In Production</option>
17+
<option value="Shipped">Shipped</option>
18+
<option value="Delivered">Delivered</option>
19+
<option value="Cancelled">Cancelled</option>
20+
</select>
21+
<select class="filter-select" @onchange="FilterByRegion">
22+
<option value="">All Regions</option>
23+
<option value="Northeast">Northeast</option>
24+
<option value="Southeast">Southeast</option>
25+
<option value="Midwest">Midwest</option>
26+
<option value="Southwest">Southwest</option>
27+
<option value="West">West</option>
28+
</select>
29+
<button class="refresh-button" @onclick="LoadOrders">🔄 Refresh</button>
30+
</div>
31+
</div>
32+
33+
@if (_isLoading)
34+
{
35+
<div class="loading-container">
36+
<div class="loading-spinner">⏳</div>
37+
<p>Loading orders...</p>
38+
</div>
39+
}
40+
else if (_hasError)
41+
{
42+
<div class="error-container">
43+
<div class="error-icon">⚠️</div>
44+
<h3>Unable to Load Orders</h3>
45+
<p>@_errorMessage</p>
46+
<button class="retry-button" @onclick="LoadOrders">Try Again</button>
47+
</div>
48+
}
49+
else if (_filteredOrders.Count == 0)
50+
{
51+
<div class="empty-state">
52+
<div class="empty-icon">📦</div>
53+
<h3>No Orders Found</h3>
54+
<p>No orders match your current filters.</p>
55+
</div>
56+
}
57+
else
58+
{
59+
<!-- Stats Cards -->
60+
<div class="orders-stats">
61+
<div class="stat-card stat-ordered">
62+
<div class="stat-value">@_filteredOrders.Count(o => o.Status == "Ordered")</div>
63+
<div class="stat-label">Ordered</div>
64+
</div>
65+
<div class="stat-card stat-production">
66+
<div class="stat-value">@_filteredOrders.Count(o => o.Status == "InProduction")</div>
67+
<div class="stat-label">In Production</div>
68+
</div>
69+
<div class="stat-card stat-shipped">
70+
<div class="stat-value">@_filteredOrders.Count(o => o.Status == "Shipped")</div>
71+
<div class="stat-label">Shipped</div>
72+
</div>
73+
<div class="stat-card stat-delivered">
74+
<div class="stat-value">@_filteredOrders.Count(o => o.Status == "Delivered")</div>
75+
<div class="stat-label">Delivered</div>
76+
</div>
77+
</div>
78+
79+
<!-- Orders Table -->
80+
<div class="orders-table">
81+
<table>
82+
<thead>
83+
<tr>
84+
<th>Order #</th>
85+
<th>Customer</th>
86+
<th>Order Date</th>
87+
<th>Status</th>
88+
<th>Region</th>
89+
<th>Total</th>
90+
</tr>
91+
</thead>
92+
<tbody>
93+
@foreach (var order in _filteredOrders.OrderByDescending(o => o.OrderDate))
94+
{
95+
<tr class="order-row">
96+
<td class="order-id">
97+
<span class="order-number">@order.OrderNumber</span>
98+
</td>
99+
<td>
100+
<div class="customer-info">
101+
<div class="customer-name">@order.Customer.Name</div>
102+
<div class="customer-email">@order.Customer.Email</div>
103+
</div>
104+
</td>
105+
<td class="order-date">
106+
@order.OrderDate.ToString("MMM d, yyyy")
107+
</td>
108+
<td>
109+
<span class="status-badge status-@order.Status.ToLower()">
110+
@GetStatusDisplay(order.Status)
111+
</span>
112+
</td>
113+
<td>
114+
<span class="region-badge">@GetRegionIcon(order.Customer.Region) @order.Customer.Region</span>
115+
</td>
116+
<td class="order-total">
117+
$@order.Total.ToString("N0")
118+
</td>
119+
</tr>
120+
}
121+
</tbody>
122+
</table>
123+
</div>
124+
125+
<div class="orders-summary">
126+
Showing @_filteredOrders.Count of @_orders.Count orders
127+
@if (_filteredOrders.Count > 0)
128+
{
129+
<span> • Total Value: $@_filteredOrders.Sum(o => o.Total).ToString("N0")</span>
130+
}
131+
</div>
132+
}
133+
</div>
134+
135+
@code {
136+
private List<OrderDto> _orders = new();
137+
private List<OrderDto> _filteredOrders = new();
138+
private bool _isLoading = true;
139+
private bool _hasError = false;
140+
private string _errorMessage = string.Empty;
141+
private string _selectedStatus = string.Empty;
142+
private string _selectedRegion = string.Empty;
143+
144+
protected override async Task OnInitializedAsync()
145+
{
146+
await LoadOrders();
147+
}
148+
149+
private async Task LoadOrders()
150+
{
151+
_isLoading = true;
152+
_hasError = false;
153+
_errorMessage = string.Empty;
154+
155+
try
156+
{
157+
_orders = await ApiClient.GetOrdersAsync();
158+
ApplyFilters();
159+
}
160+
catch (Exception ex)
161+
{
162+
_hasError = true;
163+
_errorMessage = ex.Message;
164+
Logger.LogError(ex, "Error loading orders");
165+
}
166+
finally
167+
{
168+
_isLoading = false;
169+
}
170+
}
171+
172+
private void FilterByStatus(ChangeEventArgs e)
173+
{
174+
_selectedStatus = e.Value?.ToString() ?? string.Empty;
175+
ApplyFilters();
176+
}
177+
178+
private void FilterByRegion(ChangeEventArgs e)
179+
{
180+
_selectedRegion = e.Value?.ToString() ?? string.Empty;
181+
ApplyFilters();
182+
}
183+
184+
private void ApplyFilters()
185+
{
186+
_filteredOrders = _orders;
187+
188+
if (!string.IsNullOrEmpty(_selectedStatus))
189+
{
190+
_filteredOrders = _filteredOrders.Where(o => o.Status == _selectedStatus).ToList();
191+
}
192+
193+
if (!string.IsNullOrEmpty(_selectedRegion))
194+
{
195+
_filteredOrders = _filteredOrders.Where(o => o.Customer.Region == _selectedRegion).ToList();
196+
}
197+
}
198+
199+
private string GetStatusDisplay(string status)
200+
{
201+
return status switch
202+
{
203+
"InProduction" => "In Production",
204+
_ => status
205+
};
206+
}
207+
208+
private string GetRegionIcon(string region)
209+
{
210+
return region switch
211+
{
212+
"Northeast" => "🏔️",
213+
"Southeast" => "🌴",
214+
"Midwest" => "🌾",
215+
"Southwest" => "🌵",
216+
"West" => "🏖️",
217+
_ => "📍"
218+
};
219+
}
220+
}

‎FabrikamDashboard/Components/Pages/Weather.razor‎

Lines changed: 0 additions & 64 deletions
This file was deleted.

0 commit comments

Comments
 (0)