CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl-labs/frontend-state-management

Proactively choose the right state management pattern: derived state, URL state, server state, local state, lifted state, Context, or external store. Always apply without being asked.

84

1.16x
Quality

76%

Does it follow best practices?

Impact

97%

1.16x

Average score across 5 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

task.mdevals/scenario-3/

Sales Analytics Dashboard

Build a sales analytics dashboard page in React with TypeScript. The page fetches daily sales data from /api/sales which returns { data: SaleRecord[] } where each SaleRecord has id: string, date: string, amount: number, category: string, and region: string.

The dashboard should include:

  1. Date range filter -- users pick a start and end date to narrow the displayed sales data
  2. Category filter -- a dropdown to filter by product category (or "All")
  3. Region filter -- a dropdown to filter by region (or "All")
  4. Sort control -- sort by date or amount, ascending or descending
  5. Sales table -- a sortable table showing the filtered sales records
  6. Summary cards -- show total revenue, average order value, and number of orders for the currently filtered data
  7. A chart area -- a placeholder component that receives the filtered data and displays it (a simple bar or line representation is fine)

Users should be able to bookmark or share a dashboard URL that preserves their active filters.

Output

Produce TypeScript/TSX files in a src/ directory:

  • src/types.ts -- TypeScript type definitions
  • src/hooks/useSalesData.ts -- custom hook to fetch sales data
  • src/components/Dashboard.tsx -- the main dashboard page with filters, table, summary, and chart
  • src/components/SalesTable.tsx -- the sortable data table
  • src/components/SummaryCards.tsx -- the summary statistics cards
  • src/components/SalesChart.tsx -- the chart placeholder
  • src/components/FilterBar.tsx -- the filter controls
  • src/App.tsx -- the app entry point

The code does not need to run against a real server. Do not include test files or build configuration.

evals

tile.json