Use this page for technical screen behavior, source references, and active Playwright coverage.
Comprehensive sales analytics with trends, categories, customer segmentation, peak hours, AOV analysis, and forecasting.
Page: SalesPerformance.razor
Route: /sales-performance
Menu Position: 12 (Analytics & Tracking > Sales Performance)
Comprehensive sales analytics with trends, categories, customer segmentation, peak hours, AOV analysis, and forecasting.
| ID | Section | Action | Expected Outcome | Controls Affected |
|---|---|---|---|---|
| UC-SALES-001 | Header | Load Sales Performance page | Page title shows "Sales Performance Analytics - Rabbit Accounts", subtitle shows "Comprehensive sales insights and trends" | h3 title, p subtitle, PageTitle |
| UC-SALES-002 | Filter | Default date range on load | From date = 30 days ago, To date = today | From date input, To date input |
| UC-SALES-003 | Filter | Change From date to Dec 1 | No immediate change (need to click Refresh) | From date input=Dec 1 |
| UC-SALES-004 | Filter | Change To date to Dec 15 | No immediate change (need to click Refresh) | To date input=Dec 15 |
| UC-SALES-005 | Filter | Click Refresh button | Loading spinner appears, then all data reloads for new date range: (1) Summary cards update, (2) Active tab data updates, (3) All analytics recalculate | spinner, Total Sales h4, Total Orders h4, Avg Order Value h4, Gross Profit Margin h4, all tab content |
| UC-SALES-006 | Loading | Page loading state | Shows spinner with "Loading analytics data..." text | spinner-border, loading text |
| ID | Section | Action | Expected Outcome | Controls Affected |
|---|---|---|---|---|
| UC-SALES-007 | Total Sales Card | View Total Sales | Shows: (1) Label "Total Sales", (2) Amount in ₹ format (₹X,XX,XXX.XX), (3) MoM growth % with up/down arrow, (4) Rupee icon in blue circle | Total Sales label, Total Sales h4 amount, MoM growth small text, bi-currency-rupee icon |
| UC-SALES-008 | Total Sales Card | MoM growth positive | Green text with up arrow, e.g., "↑ 5.2% MoM" | MoM growth text-success, bi-arrow-up icon |
| UC-SALES-009 | Total Sales Card | MoM growth negative | Red text with down arrow, e.g., "↓ 3.1% MoM" | MoM growth text-danger, bi-arrow-down icon |
| UC-SALES-010 | Total Orders Card | View Total Orders | Shows: (1) Label "Total Orders", (2) Order count number, (3) Customer count text "X customers", (4) Cart icon in green circle | Total Orders label, Total Orders h4 count, customers small text, bi-cart-check icon |
| UC-SALES-011 | Avg Order Value Card | View AOV | Shows: (1) Label "Avg Order Value", (2) Amount in ₹ format, (3) "Per transaction" text, (4) Graph icon in blue circle | Avg Order Value label, AOV h4 amount, Per transaction text, bi-graph-up icon |
| UC-SALES-012 | Gross Profit Card | View Gross Profit Margin | Shows: (1) Label "Gross Profit Margin", (2) Percentage with 1 decimal (X.X%), (3) Gross profit amount "₹X,XX,XXX", (4) Percent icon in yellow circle | Gross Profit Margin label, GPM h4 %, Gross profit amount, bi-percent icon |
| ID | Section | Action | Expected Outcome | Controls Affected |
|---|---|---|---|---|
| UC-SALES-013 | Tabs | Default active tab | "Trends" tab is active (highlighted) on page load | Trends tab nav-link active |
| UC-SALES-014 | Tabs | Click "Trends" tab | Tab becomes active, Trends content displays: YoY card, MoM card, Daily Sales chart, Monthly Sales chart | Trends tab active, YoY Growth card, MoM Growth card, Daily Sales Trend ApexChart, Monthly Sales Trend ApexChart |
| UC-SALES-015 | Tabs | Click "Categories" tab | Tab becomes active, Categories content displays: Pie chart, Performance table, Top Products per category cards | Categories tab active, Sales by Category ApexChart pie, Category Performance table, Top Products cards |
| UC-SALES-016 | Tabs | Click "Customers" tab | Tab becomes active, Customers content displays: Segmentation pie chart, Segmentation summary, Top 20 Customers table | Customers tab active, ABC Segmentation ApexChart, Segment A/B/C summary divs, Top 20 Customers table |
| UC-SALES-017 | Tabs | Click "Peak Hours" tab | Tab becomes active, Peak Hours content displays: Day of Week chart, Hour of Day chart, Peak summary cards | Peak Hours tab active, Day of Week ApexChart bar, Hour of Day ApexChart line, Best Day/Hour/Days Analyzed cards |
| UC-SALES-018 | Tabs | Click "AOV Trends" tab | Tab becomes active, AOV content displays: 4 MA cards, AOV Trend chart with 3 lines | AOV Trends tab active, Current AOV card, 7-Day MA card, 30-Day MA card, 90-Day MA card, AOV Trends ApexChart (3 series) |
| UC-SALES-019 | Tabs | Click "Forecast" tab | Tab becomes active, Forecast content displays: Info alert, Forecast chart, Detailed forecast table | Forecast tab active, Forecast method alert, Sales Forecast ApexChart (3 lines), Detailed Forecast table |
| ID | Section | Action | Expected Outcome | Controls Affected |
|---|---|---|---|---|
| UC-SALES-020 | YoY Card | View YoY Growth | Shows: (1) Title "Year-over-Year Growth", (2) Growth % as h3 (e.g., 15.2%), (3) Current period amount, (4) Previous year amount | YoY Growth card title, YoY h3 percentage, Current amount, Previous Year amount |
| UC-SALES-021 | MoM Card | View MoM Growth | Shows: (1) Title "Month-over-Month Growth", (2) Growth % as h3, (3) Current period amount, (4) Previous period amount | MoM Growth card title, MoM h3 percentage, Current amount, Previous Period amount |
| UC-SALES-022 | Daily Chart | View Daily Sales Trend | ApexChart renders line chart with: (1) Title "Daily Sales Trend", (2) Line series named "Sales", (3) X-axis = dates, (4) Y-axis = sales amounts, (5) Height 350px | Daily Sales Trend card title, ApexChart TItem=DailySalesTrend, Line series |
| UC-SALES-023 | Daily Chart | Hover on data point | Tooltip shows date and sales amount for that day | ApexChart tooltip |
| UC-SALES-024 | Monthly Chart | View Monthly Sales Trend | ApexChart renders with: (1) Title "Monthly Sales Trend (Last 12 Months)", (2) Bar series for Sales, (3) Line series for Orders, (4) X-axis = month names, (5) Height 350px | Monthly Sales Trend card title, ApexChart TItem=MonthlySalesTrend, Bar series Sales, Line series Orders |
| UC-SALES-025 | Monthly Chart | Chart has data | MUST show actual bars/lines with data (not empty chart) | ApexChart bars, ApexChart line |
| ID | Section | Action | Expected Outcome | Controls Affected |
|---|---|---|---|---|
| UC-SALES-026 | Category Pie | View Sales by Category | ApexChart pie chart with: (1) Segments for each category, (2) Data labels showing %, (3) Height 400px | Sales by Category ApexChart pie, pie segments, data labels |
| UC-SALES-027 | Category Table | View Category Performance | Table with columns: Category, Sales, Orders, Growth. Shows top 10 categories | Category Performance table, th Category/Sales/Orders/Growth, tbody rows (max 10) |
| UC-SALES-028 | Category Table | Growth positive | Green badge with positive % | badge bg-success |
| UC-SALES-029 | Category Table | Growth negative | Red badge with negative % | badge bg-danger |
| UC-SALES-030 | Top Products | View Top Products cards | 3 cards showing top products for top 3 categories, each with product list showing name, qty, sales badge | Top Products in [Category] card, list-group-item, product name, Qty small, sales badge |
| ID | Section | Action | Expected Outcome | Controls Affected |
|---|---|---|---|---|
| UC-SALES-031 | Segmentation Chart | View ABC Segmentation | Pie chart with 3 segments: A (Top 20%), B (Next 30%), C (Bottom 50%) | Customer Segmentation ApexChart pie, 3 segments |
| UC-SALES-032 | Segment A Summary | View Segment A | Red background div showing: customer count badge, sales amount, percentage of total | Segment A div bg-danger, badge bg-danger, sales amount, percentage |
| UC-SALES-033 | Segment B Summary | View Segment B | Yellow background div showing: customer count, sales, percentage | Segment B div bg-warning, badge bg-warning, sales amount, percentage |
| UC-SALES-034 | Segment C Summary | View Segment C | Blue background div showing: customer count, sales, percentage | Segment C div bg-info, badge bg-info, sales amount, percentage |
| UC-SALES-035 | Top Customers | View Top 20 Table | Table columns: Customer, Segment, Total Sales, Orders, Avg Order, Last Purchase | Top 20 Customers table, 6 column headers, up to 20 rows |
| UC-SALES-036 | Top Customers | Segment badge colors | A = red (bg-danger), B = yellow (bg-warning), C = blue (bg-info) | segment badge classes |
| UC-SALES-037 | Top Customers | Last Purchase column | Shows "X days ago" text | Last Purchase td, days ago small text |
| ID | Section | Action | Expected Outcome | Controls Affected |
|---|---|---|---|---|
| UC-SALES-038 | Day Chart | View Day of Week chart | Bar chart with 7 bars (Mon-Sun), Y-axis = Average Sales | Sales by Day of Week ApexChart bar, 7 bars, day labels |
| UC-SALES-039 | Hour Chart | View Hour of Day chart | Line chart with 24 points (or business hours), X-axis = hour labels | Sales by Hour of Day ApexChart line, hourly data points |
| UC-SALES-040 | Best Day Card | View Best Day | Green card showing: best day name, avg sales amount | Best Day card bg-success, day name h4, Avg amount |
| UC-SALES-041 | Best Hour Card | View Best Hour | Blue card showing: best hour label, sales amount | Best Hour card bg-info, hour label h4, Sales amount |
| UC-SALES-042 | Days Analyzed | View Total Days | Yellow card showing count of days in analysis period | Total Days Analyzed card bg-warning, count h4 |
| ID | Section | Action | Expected Outcome | Controls Affected |
|---|---|---|---|---|
| UC-SALES-043 | Current AOV Card | View Current AOV | Shows current average order value in ₹ | Current AOV card, h4 amount |
| UC-SALES-044 | 7-Day MA Card | View 7-Day MA | Shows 7-day moving average | 7-Day MA card, h4 amount |
| UC-SALES-045 | 30-Day MA Card | View 30-Day MA | Shows 30-day moving average | 30-Day MA card, h4 amount |
| UC-SALES-046 | 90-Day MA Card | View 90-Day MA | Shows 90-day moving average | 90-Day MA card, h4 amount |
| UC-SALES-047 | AOV Chart | View AOV Trend chart | Line chart with 3 series: Daily AOV (thin), 7-Day MA, 30-Day MA. Height 400px | AOV Trends ApexChart, Daily AOV series, 7-Day MA series, 30-Day MA series |
| ID | Section | Action | Expected Outcome | Controls Affected |
|---|---|---|---|---|
| UC-SALES-048 | Info Alert | View Forecast info | Blue alert showing: Forecast Method, Total Forecasted Sales, Forecast Period (days) | alert alert-info, Forecast Method, Total Forecasted Sales, Forecast Period |
| UC-SALES-049 | Forecast Chart | View Forecast chart | Line chart with 3 lines: Forecast (solid), Optimistic (dashed), Pessimistic (dashed). Height 400px | Sales Forecast ApexChart, Forecast line, Optimistic line dashed, Pessimistic line dashed |
| UC-SALES-050 | Forecast Table | View Detailed Forecast | Table with columns: Date, Forecast, Optimistic (green), Pessimistic (red), Confidence ±. Shows 14 rows | Detailed Forecast table, 5 columns, 14 rows, green optimistic, red pessimistic |
| ID | Validation | Requirement |
|---|---|---|
| UC-SALES-051 | Summary Cards | All 4 cards must show non-zero values when sales exist in date range |
| UC-SALES-052 | Daily Chart | Must render actual line with data points, NOT empty chart |
| UC-SALES-053 | Monthly Chart | Must render actual bars and line, NOT empty chart |
| UC-SALES-054 | Category Pie | Must show actual pie segments with category names |
| UC-SALES-055 | Customer Table | Must show customer rows with all columns populated |
| UC-SALES-056 | Peak Hours Charts | Both charts must show actual data patterns |
| UC-SALES-057 | AOV Chart | Must show 3 distinct lines with data |
| UC-SALES-058 | Forecast Table | All forecast values must be positive numbers |
| UC-SALES-059 | Currency Format | All ₹ amounts must use Indian format (₹X,XX,XXX.XX) |
| UC-SALES-060 | Growth Percentages | Must show 1 decimal place (X.X%) |
Total Use Cases: 60