Prompt: Dashboard UI with Chart and Table (FPC003)
Model: Groq-Llama4-Scout | Date: 05/17/2025 | Page Title: Admin Dashboard
Prompt Description
Create a responsive admin dashboard UI. The page should include a header, a collapsible sidebar navigation, and a main content area displaying key metrics, an interactive chart, and a data table.
**Layout & Core Components:**
1. **Fixed Header:** Contains application title/logo and a user profile dropdown (basic structure, no complex auth). Identifiable as `data-testid='dashboard-header'`. The user profile trigger should be `data-testid='user-profile-trigger'`.
2. **Collapsible Sidebar Navigation:**
* Include links like 'Dashboard', 'Analytics', 'Reports', 'Settings'.
* The sidebar should be `data-testid='dashboard-sidebar'` and have `role='navigation'`.
* It should be collapsible/expandable via a toggle button (`data-testid='sidebar-toggle'`), with state communicated via `aria-expanded` and visual change (e.g., width or transform). On mobile, it might be off-canvas by default.
3. **Main Content Area (`<main>` role):**
* **Key Metrics Cards:** Display 3-4 cards showing summary statistics (e.g., 'Total Users: 1,234', 'Revenue: $56,789'). Each card identifiable `data-testid='metric-card-N'`.
* **Interactive Chart:** Embed a simple bar chart (using a JS library like Chart.js CDN, or implement a basic SVG chart if feeling ambitious) showing sample data (e.g., 'Sales per Month'). The chart canvas/SVG container should be `data-testid='sales-chart'`. Ensure it has an accessible title/description.
* **Data Table:** Display a sortable table of recent orders (Order ID, Customer Name, Date, Amount, Status). The table should be `data-testid='orders-table'`. Sorting should be available for 'Date' and 'Amount'. Column headers should use `aria-sort`. (Similar to C001 but integrated into a larger page).
**Technical & Accessibility Requirements:**
* Full semantic HTML page structure. Logical heading hierarchy.
* The dashboard MUST be responsive. The chart and table need to adapt gracefully to smaller screens.
* All interactive elements (sidebar toggle, user menu, sortable table headers) must be keyboard accessible and provide clear ARIA states/feedback.
* Chart accessibility: Provide a text alternative or ensure the chart library used offers good default accessibility (e.g., appropriate roles, labels for chart elements).
* Styling: Primarily Tailwind CSS. Custom CSS/JS may be needed for the chart styling/interactivity, sidebar animation, and any complex table interactions if Tailwind alone is insufficient.
**Testing Identifiers:**
* Header: `data-testid='dashboard-header'`
* User Profile Trigger: `data-testid='user-profile-trigger'`
* Sidebar: `data-testid='dashboard-sidebar'`
* Sidebar Toggle: `data-testid='sidebar-toggle'`
* Metric Cards (example): `data-testid='metric-card-1'`
* Sales Chart Container: `data-testid='sales-chart'`
* Orders Table: `data-testid='orders-table'`
* Sort by Date (in orders table): `data-testid='sort-orders-by-Date'`
Key Links & Info
Analysis Timestamp: 05/17/2025 11:46:10
Desktop Screenshot:
Mobile Screenshot:
Scores for this Prompt
Technical Quality
151.4 / 190.0
(79.68%)
Prompt Adherence
13.0 / 22.0
(59.09%)
Overall Weighted
63.21 %
Technical Quality Breakdown
HTML Structure & Semantics (8.0 / 10.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| HTML Lang | PASS |
PASS
|
1.0 / 1.0 | desktop |
| Page Title | PASS |
PASS
|
1.0 / 1.0 | desktop |
| Main Tag | PASS |
PASS
|
1.0 / 1.0 | desktop |
| Nav Tag | WARN |
No visible <nav>.
|
0.0 / 1.0 | desktop |
| Footer Tag | WARN |
No visible <footer>.
|
0.0 / 1.0 | desktop |
| H1 Count | PASS |
PASS
|
1.0 / 1.0 | desktop |
| Heading Order Logic | PASS |
PASS
|
1.0 / 1.0 | desktop |
| Image Alts | INFO |
No visible images (INFO).
|
1.0 / 1.0 | desktop |
| Form Labels | INFO |
No relevant form inputs (INFO).
{
"unlabeled_count": 0
}
|
2.0 / 2.0 | desktop |
CSS Quality (2.0 / 5.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| CSS Variables | WARN |
No :root CSS variables.
|
0.0 / 2.0 | desktop |
| Modern Layout Body/Main | INFO |
Flex/Grid not on body/main.
|
0.0 / 1.0 | desktop |
| Inline Styles | PASS |
Minimal inline styles.
|
1.0 / 1.0 | desktop |
| !important Usage | PASS |
No !important in <style> tags.
|
1.0 / 1.0 | desktop |
JavaScript Health (5.0 / 5.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| JS Console Errors | PASS |
No significant JS errors.
|
5.0 / 5.0 | desktop |
Accessibility (Axe-core) (18.0 / 40.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Axe Violations | FAIL |
2 Axe violations (Crit:1,Ser:0,Mod:0,Min:1). Report: axe_report_FPC003_Dashboard_UI_with_Chart_and_Table_desktop.json
[
{
"help": "ARIA role must be appropriate for the element",
"id": "aria-allowed-role",
"impact": "minor"
},
{
"help": "Buttons must have discernible text",
"id": "button-name",
"impact": "critical"
}
]
|
9.0 / 20.0 | desktop |
| Axe Violations | FAIL |
2 Axe violations (Crit:1,Ser:0,Mod:0,Min:1). Report: axe_report_FPC003_Dashboard_UI_with_Chart_and_Table_mobile.json
[
{
"help": "ARIA role must be appropriate for the element",
"id": "aria-allowed-role",
"impact": "minor"
},
{
"help": "Buttons must have discernible text",
"id": "button-name",
"impact": "critical"
}
]
|
9.0 / 20.0 | mobile |
Rendered Color & Contrast (30.0 / 30.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Contrast Check Result | PASS |
All 32 instances meet WCAG AA. (0 only AA, not AAA).
|
15.0 / 15.0 | desktop |
| Contrast Check Result | PASS |
All 32 instances meet WCAG AA. (0 only AA, not AAA).
|
15.0 / 15.0 | mobile |
Responsiveness (Viewport & Scroll) (16.0 / 20.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Viewport Meta Tag | PASS |
Configured correctly for responsiveness.
|
4.0 / 4.0 | desktop |
| Horizontal Scrollbar | PASS |
No horizontal scrollbar detected.
|
6.0 / 6.0 | desktop |
| Viewport Meta Tag | INFO |
Already scored for this prompt.
|
0.0 / 0.0 | mobile |
| Horizontal Scrollbar | PASS |
No horizontal scrollbar detected.
|
6.0 / 6.0 | mobile |
Performance (Lighthouse) (36.4 / 40.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Lighthouse Score | PASS |
94/100
|
18.8 / 20.0 | desktop |
| Lighthouse Score | WARN |
88/100
|
17.6 / 20.0 | mobile |
Accessibility (Lighthouse) (17.4 / 20.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Lighthouse Score | WARN |
87/100
|
8.7 / 10.0 | desktop |
| Lighthouse Score | WARN |
87/100
|
8.7 / 10.0 | mobile |
Best Practices (Lighthouse) (9.6 / 10.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Lighthouse Score | PASS |
96/100
|
4.8 / 5.0 | desktop |
| Lighthouse Score | PASS |
96/100
|
4.8 / 5.0 | mobile |
SEO (Lighthouse) (9.0 / 10.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Lighthouse Score | PASS |
90/100
|
4.5 / 5.0 | desktop |
| Lighthouse Score | PASS |
90/100
|
4.5 / 5.0 | mobile |
Prompt Adherence Breakdown
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Dashboard Header | PASS |
Element 'header[data-testid='dashboard-header']' present and visible.
Selector:
header[data-testid='dashboard-header'] |
1.0 / 1.0 | desktop |
| Dashboard Sidebar | FAIL |
Element 'nav[role='navigation'][data-testid='dashboard-sidebar']' NOT found.
Selector:
nav[role='navigation'][data-testid='dashboard-sidebar'] |
0.0 / 1.0 | desktop |
| Sidebar Toggle | PASS |
Element 'button[data-testid='sidebar-toggle']' present and visible.
Selector:
button[data-testid='sidebar-toggle'] |
1.0 / 1.0 | desktop |
| Main Content Area | PASS |
Element 'main' present and visible.
Selector:
main |
1.0 / 1.0 | desktop |
| Metric Cards (min 3) | PASS |
Count is 4 (Actual: 4, Expected: >= 3).
|
2.0 / 2.0 | desktop |
| Sales Chart Area | PASS |
Element '[data-testid='sales-chart']' present and visible.
Selector:
[data-testid='sales-chart'] |
2.0 / 2.0 | desktop |
| Orders Table | PASS |
Element 'table[data-testid='orders-table']' present and visible.
Selector:
table[data-testid='orders-table'] |
2.0 / 2.0 | desktop |
| Sort by Date (Orders Table) | FAIL |
Element 'table[data-testid='orders-table'] th [data-testid='sort-orders-by-Date']' NOT found.
Selector:
table[data-testid='orders-table'] th [data-testid='sort-orders-by-Date'] |
0.0 / 1.0 | desktop |
| Sidebar Toggle Functionality | FAIL |
One or more interaction steps/outcomes failed.
Interaction Log: [ "--- Executing Step: Collapse Sidebar ---", " [FAIL] Trigger config missing." ] |
0.0 / 4.0 | desktop |
| Sort Orders Table by Date | PASS |
All interaction steps/outcomes verified.
|
4.0 / 4.0 | desktop |
| Chart Has Accessible Name (title/aria-label) | FAIL |
Custom script evaluation result: False (expected true).
Script Eval: False
|
0.0 / 3.0 | desktop |
| Dashboard Header | PASS |
(Points already awarded) Element 'header[data-testid='dashboard-header']' present and visible.
Selector:
header[data-testid='dashboard-header'] |
0.0 / 1.0 | mobile |
| Dashboard Sidebar | FAIL |
Element 'nav[role='navigation'][data-testid='dashboard-sidebar']' NOT found.
Selector:
nav[role='navigation'][data-testid='dashboard-sidebar'] |
0.0 / 1.0 | mobile |
| Sidebar Toggle | PASS |
(Points already awarded) Element 'button[data-testid='sidebar-toggle']' present and visible.
Selector:
button[data-testid='sidebar-toggle'] |
0.0 / 1.0 | mobile |
| Main Content Area | PASS |
(Points already awarded) Element 'main' present and visible.
Selector:
main |
0.0 / 1.0 | mobile |
| Metric Cards (min 3) | PASS |
(Points already awarded) Count is 4 (Actual: 4, Expected: >= 3).
|
0.0 / 2.0 | mobile |
| Sales Chart Area | PASS |
(Points already awarded) Element '[data-testid='sales-chart']' present and visible.
Selector:
[data-testid='sales-chart'] |
0.0 / 2.0 | mobile |
| Orders Table | PASS |
(Points already awarded) Element 'table[data-testid='orders-table']' present and visible.
Selector:
table[data-testid='orders-table'] |
0.0 / 2.0 | mobile |
| Sort by Date (Orders Table) | FAIL |
Element 'table[data-testid='orders-table'] th [data-testid='sort-orders-by-Date']' NOT found.
Selector:
table[data-testid='orders-table'] th [data-testid='sort-orders-by-Date'] |
0.0 / 1.0 | mobile |
| Sidebar Toggle Functionality | FAIL |
One or more interaction steps/outcomes failed.
Interaction Log: [ "--- Executing Step: Collapse Sidebar ---", " [FAIL] Trigger config missing." ] |
0.0 / 4.0 | mobile |
| Sort Orders Table by Date | PASS |
(Points already awarded) All interaction steps/outcomes verified.
|
0.0 / 4.0 | mobile |
| Chart Has Accessible Name (title/aria-label) | FAIL |
Custom script evaluation result: False (expected true).
Script Eval: False
|
0.0 / 3.0 | mobile |