Sales-to-Cash Dashboard

Unified operating system for lead → SOW → project → invoice → revenue flow

NRR

124%

+8% from last quarter

EBITDA Margin

28%

+3% from last month

Utilization %

78%

-2% from target

DSO

42

+5 days from target

Sales Pipeline

Lead → Opportunity → SOW → Closed Won

Acme Corp - Website Redesign $85,000
BANT Score: 82 SOW in Review
TechStart Inc - Mobile App $120,000
BANT Score: 65 Discovery Phase
Global Retail - E-commerce $250,000
BANT Score: 94 Contract Signing

Active Projects

Bench: 3 resources

FinTech Dashboard

Client: BankCorp

On Track
Burn Rate: $12,500/week
Milestones: 3/5 Complete
Utilization: 85%

Healthcare Portal

Client: MedLife

At Risk
Burn Rate: $18,200/week
Milestones: 2/6 Complete
Utilization: 62%

Quick Actions

Recent Activity

Invoice #INV-2024-045 paid

Acme Corp • 2 hours ago

New opportunity created

TechStart Inc • 4 hours ago

Project milestone delayed

Healthcare Portal • 6 hours ago

Jira sync completed

25 issues updated • 8 hours ago

System Status

PostgreSQL (OLTP)
Healthy
ClickHouse (Analytics)
Healthy
Redis Cache
Healthy
Temporal Workflows
1 pending

Finance Overview

Accounts Receivable

$245,800

Overdue (>30d)

$42,500

Revenue (MTD): $185,400
COGS (MTD): $112,900
Gross Margin: 39.1%

Active Automations

Invoice +14d Overdue

Triggers finance task

Active

Project Milestone Complete

Auto-generate invoice

Active

Low Account Health Score

Alert CSM team

Active

Notifications

Settings

Profile

Profile

John Doe

john@agencyos.com

Preferences

Integrations

Jira
Connected
Slack
Connected
Linear
// Define data at the beginning const kpiData = [ { "id": 1, "name": "NRR", "value": "124%", "change": "+8%", "trend": "up", "icon": "chart-line", "color": "green" }, { "id": 2, "name": "EBITDA Margin", "value": "28%", "change": "+3%", "trend": "up", "icon": "chart-pie", "color": "blue" }, { "id": 3, "name": "Utilization %", "value": "78%", "change": "-2%", "trend": "down", "icon": "users", "color": "purple" }, { "id": 4, "name": "DSO", "value": "42", "change": "+5 days", "trend": "up", "icon": "clock", "color": "red" } ]; const pipelineData = [ { "id": 1, "name": "Acme Corp - Website Redesign", "amount": "$85,000", "progress": 75, "bantScore": 82, "stage": "SOW in Review", "status": "active" }, { "id": 2, "name": "TechStart Inc - Mobile App", "amount": "$120,000", "progress": 40, "bantScore": 65, "stage": "Discovery Phase", "status": "active" }, { "id": 3, "name": "Global Retail - E-commerce", "amount": "$250,000", "progress": 95, "bantScore": 94, "stage": "Contract Signing", "status": "won" } ]; const projectData = [ { "id": 1, "name": "FinTech Dashboard", "client": "BankCorp", "status": "On Track", "burnRate": "$12,500/week", "milestones": "3/5 Complete", "utilization": 85, "statusColor": "green" }, { "id": 2, "name": "Healthcare Portal", "client": "MedLife", "status": "At Risk", "burnRate": "$18,200/week", "milestones": "2/6 Complete", "utilization": 62, "statusColor": "yellow" } ]; const activityData = [ { "id": 1, "type": "payment", "title": "Invoice #INV-2024-045 paid", "description": "Acme Corp • 2 hours ago", "icon": "check", "color": "green" }, { "id": 2, "type": "opportunity", "title": "New opportunity created", "description": "TechStart Inc • 4 hours ago", "icon": "plus", "color": "blue" }, { "id": 3, "type": "alert", "title": "Project milestone delayed", "description": "Healthcare Portal • 6 hours ago", "icon": "exclamation", "color": "red" }, { "id": 4, "type": "sync", "title": "Jira sync completed", "description": "25 issues updated • 8 hours ago", "icon": "sync-alt", "color": "purple" } ]; const automationData = [ { "id": 1, "name": "Invoice +14d Overdue", "description": "Triggers finance task", "icon": "bolt", "status": "Active", "color": "blue" }, { "id": 2, "name": "Project Milestone Complete", "description": "Auto-generate invoice", "icon": "sync-alt", "status": "Active", "color": "green" }, { "id": 3, "name": "Low Account Health Score", "description": "Alert CSM team", "icon": "robot", "status": "Active", "color": "purple" } ]; // Navigation handling document.addEventListener("DOMContentLoaded", function() { // Prevent default anchor behavior const anchors = document.querySelectorAll("a"); anchors.forEach(anchor => { anchor.addEventListener("click", function(e) { e.preventDefault(); const href = this.getAttribute("href"); if (href && href !== "#") { console.log("Navigating to:", href); // In a real app, this would use Next.js router or similar alert("Navigation to " + href + " would happen in a real application"); } }); }); // Quick action buttons const quickActions = document.querySelectorAll(".grid.grid-cols-2 button"); quickActions.forEach(button => { button.addEventListener("click", function() { const action = this.querySelector("span").textContent; alert("Initiating: " + action); }); }); // New Opportunity button const newOppBtn = document.querySelector("button:contains('New Opportunity')"); if (newOppBtn) { newOppBtn.addEventListener("click", function() { alert("Opening new opportunity form..."); }); } // Sync Jira button const syncJiraBtn = document.querySelector("button:contains('Sync Jira')"); if (syncJiraBtn) { syncJiraBtn.addEventListener("click", function() { alert("Syncing with Jira..."); }); } // Add hover effects to cards const cards = document.querySelectorAll(".card-hover"); cards.forEach(card => { card.addEventListener("mouseenter", function() { this.classList.add("shadow-lg"); }); card.addEventListener("mouseleave", function() { this.classList.remove("shadow-lg"); }); }); // Search functionality const searchInput = document.querySelector("input[type='search']"); if (searchInput) { searchInput.addEventListener("keypress", function(e) { if (e.key === "Enter") { alert("Searching for: " + this.value); } }); } // Notification bell const notificationBell = document.querySelector(".fa-bell").parentElement; if (notificationBell) { notificationBell.addEventListener("click", function() { alert("Showing notifications..."); }); } // Settings cog const settingsBtn = document.querySelector(".fa-cog").parentElement; if (settingsBtn) { settingsBtn.addEventListener("click", function() { alert("Opening settings..."); }); } }); // Helper function to format currency function formatCurrency(amount) { return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(amount); }