Design System

Decision Maker Map

Enterprise buying committee visualization for multi-stakeholder deal management (PRD Gap #5).

Why This Pattern

Enterprise deals have 3-7 stakeholders. Without visualization:

  • No clarity on who influences vs decides
  • Unclear engagement levels per stakeholder
  • Deal health scoring is guesswork
  • Missing stakeholders cause deals to stall

Impact: Blocks 50% of enterprise deals with complex buying committees ($25K+ ACV)

Acme Corp - Enterprise Platform

$150,000 | Proposal Stage

Deal Health
58%
6
Stakeholders
2
Decision Makers
2
Influencers
✓
Key Roles
JS
John SmithEconomic Buyer
VP Finance
85% engaged
Last: 2 days ago
SC
Sarah ChenChampion
Director of Operations
95% engaged
Last: Today
MJ
Mike JohnsonTechnical
IT Manager
70% engaged
Last: 5 days ago
ED
Emily DavisLegal
General Counsel
30% engaged
Last: 2 weeks ago
PT
Procurement TeamProcurement
Vendor Management
20% engaged
Last: Not yet
DL
David LeeExecutive
CEO
45% engaged
Last: 1 week ago

Stakeholder Role Reference

Champion

Internal advocate pushing for purchase

Authority: influencer

Economic Buyer

Controls budget and final approval

Authority: decision maker

Technical

Assesses technical fit and requirements

Authority: influencer

Legal

Reviews contracts and compliance

Authority: gatekeeper

Procurement

Handles vendor management and process

Authority: gatekeeper

End User

Day-to-day user of the product

Authority: user

Executive

C-level stakeholder and sponsor

Authority: decision maker

Implementation

Stakeholder Card Pattern

import {
  RoleBadge,
  type StakeholderRole,
  type InfluenceLevel,
  roleToAuthority,
} from '@stackmates/ui-interactive/atoms';

interface Stakeholder {
  id: string;
  name: string;
  title: string;
  role: StakeholderRole;
  influence: InfluenceLevel;
  engagementScore: number;
}

function StakeholderCard({ stakeholder }: { stakeholder: Stakeholder }) {
  const authority = roleToAuthority[stakeholder.role];

  return (
    <div className="flex items-center gap-4 p-4 border rounded-lg">
      <Avatar>
        <AvatarFallback>{getInitials(stakeholder.name)}</AvatarFallback>
      </Avatar>

      <div className="flex-1">
        <div className="flex items-center gap-2">
          <span className="font-medium">{stakeholder.name}</span>
          <RoleBadge
            role={stakeholder.role}
            influence={stakeholder.influence}
            showInfluence
            size="sm"
          />
        </div>
        <div className="text-sm text-muted-foreground">
          {stakeholder.title}
        </div>
      </div>

      <div className="text-right">
        <div className="text-sm font-medium">
          {stakeholder.engagementScore}% engaged
        </div>
        <div className="text-xs text-muted-foreground capitalize">
          {authority.replace('_', ' ')}
        </div>
      </div>
    </div>
  );
}

Database Schema (deal_contacts junction)

// Drizzle schema for multi-stakeholder deals
export const dealContacts = pgTable('deal_contacts', {
  id: uuid('id').primaryKey().defaultRandom(),
  dealId: uuid('deal_id').references(() => deals.id),
  contactId: uuid('contact_id').references(() => beings.id),
  role: text('role').$type<StakeholderRole>().notNull(),
  influence: text('influence').$type<InfluenceLevel>(),
  engagementScore: integer('engagement_score').default(0),
  lastContactAt: timestamp('last_contact_at'),
  createdAt: timestamp('created_at').defaultNow(),
});

Pattern Checklist (PRD Gap #5)

  • RoleBadge atom for stakeholder role display
  • 7 enterprise roles (Champion, Economic Buyer, Technical, Legal, Procurement, End User, Executive)
  • Influence level indicators (High/Medium/Low)
  • Authority type mapping (Decision Maker, Influencer, Gatekeeper, User)
  • Engagement score display per stakeholder
  • Deal health scoring based on stakeholder coverage
  • Dark mode support
  • OrgChartPattern visualization (task-1.2)
  • deal_contacts junction table in schema (task-1.4)