import * as React from "react"; import { BadgeCheck, CalendarClock, ChartSpline, ClipboardPen, FilePlus2, Gauge, Handshake, ListCheck, NotebookPen, PhoneForwarded, Star, UserRound, } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Typography } from "@/components/ui/Typography"; const { Small: TypographySmall, Large: TypographyLarge, H4: TypographyH4, } = Typography; import { SidebarAppShellRevenueOperationsQuickActionsTwo } from "@/registry/sidebar-app-shell-revenue-operations-quick-actions-two/sidebar-app-shell-revenue-operations-quick-actions-two"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof SidebarAppShellRevenueOperationsQuickActionsTwo >; type SidebarAppShellRevenueOperationsQuickActionsTwoAccountNode = NonNullable< ComponentProps["accounts"] >[number]; type SidebarAppShellRevenueOperationsQuickActionsTwoMetricCard = NonNullable< ComponentProps["metrics"] >[number]; type SidebarAppShellRevenueOperationsQuickActionsTwoQuickAction = NonNullable< ComponentProps["quickActions"] >[number]; type SidebarAppShellRevenueOperationsQuickActionsTwoStageBadge = NonNullable< ComponentProps["stages"] >[number]; type SidebarAppShellRevenueOperationsQuickActionsTwoTab = NonNullable< ComponentProps["tabs"] >[number]; const accounts: SidebarAppShellRevenueOperationsQuickActionsTwoAccountNode[] = [ { id: "north-america", label: "North America", value: "$7.4M", children: [ { id: "enterprise", label: "Enterprise", badge: "12 owners", badgeVariant: "secondary", children: [ { id: "mariner", label: "Mariner Systems", value: "$1.6M" }, { id: "apex", label: "Apex Commerce", value: "$980K" }, ], }, { id: "commercial", label: "Commercial", badge: "8 pods", badgeVariant: "outline", children: [ { id: "orbit", label: "Orbit Desk", value: "$420K" }, { id: "beacon", label: "Beacon Labs", value: "$305K" }, ], }, ], }, { id: "emea", label: "EMEA", value: "$3.1M", children: [ { id: "atlas", label: "Atlas Mobility", value: "$540K" }, { id: "volterra", label: "Volterra", value: "$460K" }, ], }, ]; const tabs: SidebarAppShellRevenueOperationsQuickActionsTwoTab[] = [ { id: "pipeline", label: "Pipeline", badgeCount: 86, badgeVariant: "secondary", }, { id: "forecast", label: "Forecast", badgeCount: 4 }, { id: "team", label: "Team view" }, ]; const stages: SidebarAppShellRevenueOperationsQuickActionsTwoStageBadge[] = [ { id: "qualification", label: "Qualification", count: 19, variant: "default", }, { id: "proposal", label: "Proposal", count: 27 }, { id: "contract", label: "Contract", count: 14 }, { id: "risk", label: "At risk", count: 6, variant: "destructive" }, ]; const quickActions: SidebarAppShellRevenueOperationsQuickActionsTwoQuickAction[] = [ { id: "log-meeting", label: "Log customer meeting", description: "Post-call summary, outcomes, and next steps", icon: , shortcut: "L", }, { id: "create-deal", label: "Create sourced deal", description: "Prefills territory, product line, and region", icon: , shortcut: "N", }, { id: "trigger-play", label: "Launch pipeline play", description: "Spin up automations for stalled stage", icon: , shortcut: "P", }, ]; const metrics: SidebarAppShellRevenueOperationsQuickActionsTwoMetricCard[] = [ { id: "coverage", label: "Pipeline coverage", value: "2.8×", changeLabel: "+0.2 vs target", changeVariant: "positive", icon: , }, { id: "accuracy", label: "Forecast accuracy", value: "93%", changeLabel: "Last week 90%", changeVariant: "neutral", icon: , }, { id: "response", label: "Response SLA", value: "2h 18m", changeLabel: "Goal 3h", changeVariant: "positive", icon: , }, ]; export function SidebarAppShellRevenueOperationsQuickActionsTwoDemo() { const [activeTab, setActiveTab] = React.useState("pipeline"); return ( , }, { id: "create-deal", label: "Create deal", icon: , variant: "outline", }, ]} rightRail={ Quarterly focus Highlight key motions for operators this sprint. } title="Stalled stage hygiene" helper="Coach reps on updating mutual action plans twice weekly." /> } >

Pipeline velocity Average days in stage for deals closing this quarter across pod assignments.

Updated 6m ago Coverage Days in stage Owners Pipeline coverage improved 0.3x WoW driven by upsell pod contributions.

AE coverage balanced at 4 accounts per rep; coaching flagged for two pods. Rep activity spotlight Surface productivity, meetings, and automate reminders when reps fall behind. {[ { name: "Riley Chen", metric: "11 activities", detail: "2 calls, 4 emails, 5 notes", trend: "+3 vs avg", }, { name: "Sasha Patel", metric: "7 activities", detail: "Followed up on expansion play", trend: "+1 vs avg", }, { name: "Miguel Alvarez", metric: "3 activities", detail: "Needs follow-up — send coaching note", trend: "-4 vs avg", }, ].map((rep) => (

{rep.name} {rep.detail}

{rep.metric} {rep.trend}

))}

); } export interface StatCardProps { label: string; value: string; helper: string; } function StatCard({ label, value, helper }: StatCardProps) { return (

{label} {value} {helper}

); } export interface FocusRowProps { icon: React.ReactNode; title: string; helper: string; } function FocusRow({ icon, title, helper }: FocusRowProps) { return (

{icon}

{title} {helper}

); } export default SidebarAppShellRevenueOperationsQuickActionsTwoDemo;

Simple