DemoBuy

Deals & Targets

Last updated on 2026-04-05

The deals and targets pages provide tabular deal management and quota attainment tracking. Both screens are in the (dashboard) route group and share the sidebar and header layout.

Deals

Route: /deals

The deals page presents a comprehensive list view of all deals in the sales pipeline. It complements the visual pipeline board with a data-dense, filterable table format.

  • Deal list table -- data table displaying all deals with columns for deal name, company, value (formatted as currency), expected close date, stage badge (color-coded), owner avatar, and priority indicator
  • Status filters -- filter tabs for All, Open, Won, and Lost to quickly segment the deal list by outcome
  • Search -- text input to filter deals by name, company, or owner
  • Sort controls -- click column headers to sort by value, close date, stage, or creation date (ascending/descending toggle)
  • Value range filter -- slider or input fields to filter deals by minimum and maximum value
  • Date range filter -- date picker to filter deals by expected close date range
  • Bulk actions -- select multiple deals via checkboxes to perform bulk stage changes or export
  • Deal detail link -- click a deal row to expand an inline detail panel or navigate to a full deal view
import { DealRow } from "@/components/sales/deal-row"
import { StageBadge } from "@/components/sales/stage-badge"
import { PriorityBadge } from "@/components/sales/priority-badge"

Deal List Layout

┌───────────────────────────────────────────────────────┐
│ Deals                                   [Search] [+]  │
├───────────────────────────────────────────────────────┤
│ All | Open | Won | Lost          Value ▼  Date Range  │
├────┬──────────┬─────────┬────────┬───────┬────┬──────┤
│ □  │ Deal     │ Company │ Value  │ Close │Stg │Owner │
├────┼──────────┼─────────┼────────┼───────┼────┼──────┤
│ □  │ Acme ERP │ Acme Co │ $45K   │ Apr 20│ ●  │ JD   │
│ □  │ Beta CRM │ Beta Ltd│ $32K   │ May 10│ ●  │ SK   │
│ □  │ Cloud Mig│ Gamma   │ $78K   │ Apr 15│ ●  │ ML   │
└────┴──────────┴─────────┴────────┴───────┴────┴──────┘

Deal Stages

Stage Color Description
Prospecting gray Initial outreach and lead identification
Qualification blue Evaluating fit and budget
Proposal indigo Formal proposal sent
Negotiation violet Terms and pricing negotiation
Closed Won green Deal successfully closed
Closed Lost red Deal did not close

Data Sources

Data Source Location
Deals deals data/seed.ts
Pipeline stages pipelineStages data/seed.ts
Team members teamMembers data/seed.ts

Targets

Route: /targets

The targets page tracks individual and team quota attainment against assigned sales targets. It provides visual progress indicators and detailed breakdowns of performance against goals.

  • Team quota overview -- summary cards at the top showing total team quota, total attainment, and gap to target with trend indicators
  • Individual target cards -- cards for each sales rep displaying their name, avatar, assigned quota, current attainment (revenue closed), attainment percentage, and a progress bar color-coded by performance tier
  • Progress bars -- color-coded visual indicators: green (100%+ of quota), amber (75-99%), red (below 75%)
  • Quota attainment chart -- bar chart comparing each rep's attainment against their individual quota via Recharts BarChart
  • Period selector -- toggle between monthly, quarterly, and annual target views
  • Target breakdown -- expandable detail for each rep showing deals won (count and value), deals in pipeline, and projected close amounts
  • Team vs. individual toggle -- switch between team-level aggregate view and individual rep drill-down
import { TargetCard } from "@/components/sales/target-card"
import { QuotaProgress } from "@/components/sales/quota-progress"
import { QuotaAttainmentChart } from "@/components/charts/quota-attainment-chart"

Targets Layout

┌──────────┬──────────┬──────────┐
│ Team     │ Total    │ Gap to   │
│ Quota    │ Attained │ Target   │
├──────────┴──────────┴──────────┤
│ Quota Attainment by Rep (chart)│
├────────────────────────────────┤
│ ┌────────────┐ ┌────────────┐  │
│ │ Jane D.    │ │ Sam K.     │  │
│ │ $120K/$150K│ │ $95K/$130K │  │
│ │ ████████░░ │ │ ██████░░░░ │  │
│ │ 80%        │ │ 73%        │  │
│ └────────────┘ └────────────┘  │
│ ┌────────────┐ ┌────────────┐  │
│ │ Mike L.    │ │ Lisa T.    │  │
│ │ $165K/$150K│ │ $110K/$140K│  │
│ │ ██████████ │ │ ████████░░ │  │
│ │ 110%       │ │ 79%        │  │
│ └────────────┘ └────────────┘  │
└────────────────────────────────┘

Performance Tiers

Tier Attainment Color Indicator
Exceeding 100%+ green Filled progress bar with checkmark icon
On Track 75-99% amber Partially filled progress bar
At Risk Below 75% red Low-fill progress bar with alert icon

Data Sources

Data Source Location
Team quotas targets data/seed.ts
Individual targets repTargets data/seed.ts
Attainment data Computed from deals (won) data/seed.ts
Team members teamMembers data/seed.ts

Next Steps

Previous

Dashboard & Pipeline

Next

Leaderboard & Reports