Revenue command center for Salesforce pipeline visibility
Build an interactive, single-page web app that visualizes the progression of my Salesforce sales opportunities. Use React with Tailwind for styling, in a single file. Keep it visually clean and modern — no default/templated look. Data source Use the attached CSV/JSON export of my Opportunity data (I'll paste/attach it). Fetch data via a Salesforce REST API call for donal murray. For each opportunity, use these fields (map to my actual Salesforce field API names if they differ): Opportunity Name Stage (e.g. Prospecting, Qualification, Proposal, Negotiation, Closed Won, Closed Lost) ARR (Annual Recurring Revenue) TCV (Total Contract Value) Contract Start Date and Contract End Date (used to calculate total duration) Close Date Salesforce record URL (or Opportunity ID, to construct the URL as https://[my-instance].lightning.force.com/lightning/r/Opportunity/[Id]/view) Key Contacts: Name, Title/Role, Email, Phone (from OpportunityContactRole or a Contacts list) Layout & views Pipeline/progression view (primary): show opportunities grouped or ordered by stage, so I can see where each deal sits in the funnel at a glance — a horizontal stage-by-stage board (kanban-style) or a timeline, whichever renders more clearly with the data volume. Opportunity card: each opportunity is a clickable card/row showing Name, Stage, ARR, TCV, and Duration (calculated from Contract Start/End Dates, shown in months). Click-through behavior: clicking a card opens a detail panel (side drawer or modal) with: Full opportunity details (ARR, TCV, duration, close date, stage) A "View in Salesforce" button/link that opens the real Salesforce record in a new tab The list of key contacts with name, role, email, and phone, each contact clickable to open a mailto: link Summary header: total pipeline ARR, total TCV, and count of open opportunities, updating based on any active filters. Interactions Filter by stage and by a minimum ARR/TCV threshold. Sort by ARR, TCV, close date, or duration. Search by opportunity name or contact name. Formatting & edge cases Format ARR/TCV as currency (assume USD unless told otherwise). If Contract Start/End Dates are missing, show duration as "N/A" rather than erroring. If an opportunity has no listed contacts, show "No contacts on file" instead of leaving it blank. Handle any missing/null fields gracefully — don't let one incomplete record break the layout. Output A single self-contained artifact/component I can view directly, with placeholder/sample data included if no real data is provided yet, so the layout can be previewed immediately. Tools used: Salesforce (REST API), React with Tailwind
What this prompt builds
A single-page React dashboard that visualizes Salesforce opportunities across the sales pipeline, showing deal stage, ARR, TCV, contract duration, and key contacts in a kanban-style board. Users can filter by stage and revenue threshold, sort by multiple criteria, and click through to view full opportunity details or open records directly in Salesforce. The workflow consolidates scattered pipeline data into one unified command center for faster deal analysis and better forecasting.
The problem
Revenue teams juggling multiple open and closed opportunities struggle to get a unified view of where deals stand, how long they've been in cycle, and how many times close dates have slipped. Scattered data across Salesforce tabs and reports makes it hard to spot bottlenecks or make quick judgment calls on which deals need attention. This workflow builds a single-page command center that pulls Salesforce opportunity data into a visual kanban board, showing deal stage, ARR, TCV, contract duration, and push history all in one place. Filterable by stage and revenue threshold, sortable by key metrics, and click-through to full opportunity details and contacts, it turns fragmented pipeline information into an actionable snapshot for faster decision-making.
Solution and impact
Revenue operators and sales leaders get instant pipeline visibility without toggling between Salesforce views or building custom reports. The interactive dashboard surfaces deal health, cycle length, and contact details at a glance, cutting time spent hunting for context and enabling faster, more confident judgment calls on which opportunities to prioritize, push, or re-engage. By consolidating ARR, TCV, stage, and contact data into one clean interface, teams can forecast more accurately and intervene earlier when deals stall.