Skip to content
codexa

Dashboards · React

Sales dashboard

Revenue, pipeline and deals at a glance, with a searchable, sortable deals table.

Use this templateRemix
Sales dashboard starter, as built from its own files
Starter screenshot captured from this template's own build at 1440×900. It shows the template as it ships, not output generated from a prompt.

What you get

A sales overview for a small team: four headline numbers, revenue against target by month, pipeline by stage, recent deals with status, and an activity feed. Sample data lives in src/dashboard.ts.

Files

Exactly what is copied into a new project: 13 files, nothing generated.

Raw data: GET /api/v1/templates/dash-sales

Explorer 13

src/dashboard.ts
src/dashboard.ts
import type { Dashboard } from "./types"; /** Everything this dashboard shows. Edit freely. */export const dashboard: Dashboard = {  "brand": "Ledgerline",  "user": {    "name": "Dana Whitfield",    "role": "Head of Sales"  },  "nav": [    {      "label": "Overview",      "icon": "chart",      "href": "#overview"    },    {      "label": "Revenue",      "icon": "bolt",      "href": "#trends"    },    {      "label": "Pipeline",      "icon": "box",      "href": "#breakdown"    },    {      "label": "Deals",      "icon": "users",      "href": "#table"    },    {      "label": "Activity",      "icon": "clock",      "href": "#activity"    }  ],  "title": "Sales overview",  "subtitle": "Q3 performance across all regions",  "ranges": [    {      "label": "6M",      "points": 6    },    {      "label": "12M",      "points": 12    }  ],  "kpis": [    {      "label": "Revenue",      "value": "$482,900",      "delta": "12.4%",      "up": true    },    {      "label": "New deals",      "value": "64",      "delta": "8",      "up": true    },    {      "label": "Win rate",      "value": "31%",      "delta": "2.1 pts",      "up": false    },    {      "label": "Sales cycle",      "value": "38 days",      "delta": "4 days",      "up": false,      "upIsGood": false    }  ],  "chart": {    "title": "Revenue vs target",    "type": "line",    "unit": "$",    "labels": [      "Oct",      "Nov",      "Dec",      "Jan",      "Feb",      "Mar",      "Apr",      "May",      "Jun",      "Jul",      "Aug",      "Sep"    ],    "series": [      {        "name": "Revenue",        "values": [          118000,          124000,          151000,          109000,          121000,          138000,          142000,          149000,          156000,          151000,          163000,          168900        ]      },      {        "name": "Target",        "values": [          120000,          125000,          140000,          120000,          125000,          135000,          140000,          145000,          150000,          155000,          160000,          165000        ]      }    ]  },  "side": {    "title": "Pipeline by stage",    "items": [      {        "label": "Qualified",        "value": "$1.2M",        "pct": 100      },      {        "label": "Proposal",        "value": "$740K",        "pct": 62      },      {        "label": "Negotiation",        "value": "$410K",        "pct": 34      },      {        "label": "Closing",        "value": "$188K",        "pct": 16      }    ]  },  "table": {    "title": "Recent deals",    "columns": [      "Company",      "Owner",      "Value",      "Stage",      "Close date"    ],    "statusColumn": 3,    "tones": {      "Won": "good",      "Negotiation": "accent",      "Proposal": "neutral",      "Lost": "bad",      "Stalled": "warn"    },    "rows": [      [        "Harbor Freight Co.",        "Dana W.",        "$48,000",        "Won",        "Sep 28"      ],      [        "Pinecrest Clinics",        "Luis M.",        "$22,500",        "Negotiation",        "Oct 12"      ],      [        "Atlas Robotics",        "Dana W.",        "$91,000",        "Proposal",        "Oct 30"      ],      [        "Brightwater Hotels",        "Amara K.",        "$15,200",        "Won",        "Sep 19"      ],      [        "Northfield Schools",        "Luis M.",        "$9,800",        "Stalled",        "Nov 4"      ],      [        "Copperleaf Foods",        "Amara K.",        "$33,000",        "Lost",        "Sep 9"      ]    ]  },  "feed": {    "title": "Activity",    "items": [      {        "text": "Dana closed Harbor Freight Co. ($48,000)",        "time": "2 hours ago"      },      {        "text": "Luis sent a revised proposal to Pinecrest Clinics",        "time": "Yesterday"      },      {        "text": "Atlas Robotics booked a technical review",        "time": "2 days ago"      }    ]  }};

Remix

Remix this template

Describe what to change and the agent starts from Sales dashboard's files. The box is already started for you: finish “Start from Sales dashboard and …”

Agent ready

Creates a free account first; your idea is carried over.

Dependencies

Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.

  • react^19.1.0
  • react-dom^19.1.0
  • vite^6.3.0
  • @vitejs/plugin-react^4.4.0
  • tailwindcss^4.1.0
  • @tailwindcss/vite^4.1.0
  • typescript^5.8.0

How it runs

Framework
Vite + React + TypeScript
Dev command
npm run dev
Build command
npm run build
Output directory
dist
Port
5173
Entry route
/

Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.

Keep browsing

All templates

Build on Sales dashboard

Create a free account, start from this template, and ask the AI agent to turn it into your app.

Use this templateAll templates