@handled-ai/design-system 0.8.0 → 0.9.0

package/src/components/recommended-actions-section.tsx

@@ -0,0 +1,258 @@
+"use client"
+
+import * as React from "react"
+import {
+  CheckSquare,
+  Clock,
+  DollarSign,
+  HelpCircle,
+  MessageSquare,
+  SkipForward,
+  ThumbsDown,
+  ThumbsUp,
+  Users,
+  X,
+} from "lucide-react"
+import { Badge } from "./badge"
+import { Button } from "./button"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip"
+
+export interface RecommendedAction {
+  id: string
+  title: string
+  reason: string
+  category?: "Churn" | "Expand" | "Nurture" | string
+  priority?: "High" | "Medium" | "Low" | string
+  dueDate?: string
+  confidence?: number
+  signals?: string[]
+  revenueImpact?: number
+}
+
+interface RecommendedActionsSectionProps {
+  actions: RecommendedAction[]
+  title?: string
+  onQueueAction?: (action: RecommendedAction) => void
+  onDismissAction?: (action: RecommendedAction) => void
+  onFeedback?: (actionId: string, feedback: "useful" | "not_useful", comment: string) => void
+}
+
+function getCategoryBadgeClass(category?: string) {
+  if (category === "Churn") return "bg-white text-black border-red-300"
+  if (category === "Expand") return "bg-green-100 text-green-800 border-green-200"
+  if (category === "Nurture") return "bg-blue-100 text-blue-800 border-blue-200"
+  return "bg-muted text-muted-foreground border-border"
+}
+
+function getPriorityBadgeClass(priority?: string) {
+  if (priority === "High") return "border-foreground text-foreground"
+  if (priority === "Medium") return "border-muted-foreground text-muted-foreground"
+  return "border-border text-muted-foreground"
+}
+
+export function RecommendedActionsSection({
+  actions,
+  title = "Recommended Actions",
+  onQueueAction,
+  onDismissAction,
+  onFeedback,
+}: RecommendedActionsSectionProps) {
+  const [dismissedActions, setDismissedActions] = React.useState<Set<string>>(new Set())
+  const [actionFeedback, setActionFeedback] = React.useState<Record<string, "useful" | "not_useful" | null>>({})
+  const [feedbackComment, setFeedbackComment] = React.useState<Record<string, string>>({})
+  const [commentOpen, setCommentOpen] = React.useState<Record<string, boolean>>({})
+
+  const visibleActions = actions.filter((action) => !dismissedActions.has(action.id))
+
+  const handleDismissAction = (action: RecommendedAction) => {
+    setDismissedActions((previous) => new Set([...previous, action.id]))
+    onDismissAction?.(action)
+  }
+
+  const handleFeedback = (actionId: string, feedback: "useful" | "not_useful") => {
+    setActionFeedback((previous) => ({ ...previous, [actionId]: feedback }))
+    setCommentOpen((previous) => ({ ...previous, [actionId]: true }))
+  }
+
+  const submitFeedback = (actionId: string) => {
+    const feedback = actionFeedback[actionId]
+    if (!feedback) return
+
+    onFeedback?.(actionId, feedback, feedbackComment[actionId]?.trim() ?? "")
+    setCommentOpen((previous) => ({ ...previous, [actionId]: false }))
+    setFeedbackComment((previous) => ({ ...previous, [actionId]: "" }))
+  }
+
+  return (
+    <section className="border-t border-border py-6">
+      <div className="mb-4 flex items-center justify-between">
+        <h3 className="text-[11px] font-bold uppercase tracking-wider text-muted-foreground/70">{title}</h3>
+        <span className="text-xs text-muted-foreground">{visibleActions.length} actions</span>
+      </div>
+
+      {visibleActions.length === 0 ? (
+        <div className="rounded-md border border-dashed border-border p-4 text-sm text-muted-foreground">
+          All recommended actions are dismissed.
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {visibleActions.map((action) => (
+            <div
+              key={action.id}
+              className="group rounded-md border border-border bg-background p-4 transition-colors hover:bg-muted/20"
+            >
+              <div className="mb-3 flex items-start justify-between gap-3">
+                <div className="min-w-0 flex-1 space-y-2">
+                  <h4 className="text-sm font-medium leading-snug text-foreground">{action.title}</h4>
+                  <div className="flex flex-wrap items-center gap-2">
+                    <Badge variant="outline" className={`px-2.5 py-1 text-xs font-medium ${getCategoryBadgeClass(action.category)}`}>
+                      {action.category ?? "General"}
+                    </Badge>
+                    <TooltipProvider delayDuration={200}>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Badge variant="outline" className={`cursor-help px-2.5 py-1 text-xs ${getPriorityBadgeClass(action.priority)}`}>
+                            <DollarSign className="mr-1 h-3 w-3" />
+                            {action.priority ?? "Medium"}
+                            <HelpCircle className="ml-1 h-3 w-3" />
+                          </Badge>
+                        </TooltipTrigger>
+                        <TooltipContent className="max-w-xs">
+                          <p className="text-xs leading-relaxed">
+                            {action.confidence
+                              ? `${Math.round(action.confidence * 100)}% confidence based on current account signals.`
+                              : "Priority reflects expected impact and urgency."}
+                          </p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                    {typeof action.revenueImpact === "number" && (
+                      <span className="text-xs font-medium text-muted-foreground">
+                        +${action.revenueImpact.toLocaleString()}/mo impact
+                      </span>
+                    )}
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 bg-foreground text-background hover:bg-foreground/90"
+                    onClick={() => onQueueAction?.(action)}
+                  >
+                    <CheckSquare className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 text-muted-foreground hover:bg-muted hover:text-foreground"
+                    onClick={() => handleDismissAction(action)}
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              <p className="mb-3 text-sm leading-relaxed text-muted-foreground">{action.reason}</p>
+
+              {action.signals && action.signals.length > 0 && (
+                <div className="mb-3 flex flex-wrap gap-1.5">
+                  {action.signals.map((signal) => (
+                    <Badge key={`${action.id}-${signal}`} variant="secondary" className="text-[10px]">
+                      {signal}
+                    </Badge>
+                  ))}
+                </div>
+              )}
+
+              <div className="flex items-center justify-between">
+                <span className="text-xs text-muted-foreground">{action.dueDate ?? "This week"}</span>
+
+                <div className="flex items-center gap-1.5">
+                  <TooltipProvider delayDuration={200}>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button variant="ghost" size="icon" className="h-6 w-6">
+                          <SkipForward className="h-3.5 w-3.5" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>Skip</TooltipContent>
+                    </Tooltip>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button variant="ghost" size="icon" className="h-6 w-6">
+                          <Clock className="h-3.5 w-3.5" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>Snooze</TooltipContent>
+                    </Tooltip>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button variant="ghost" size="icon" className="h-6 w-6">
+                          <Users className="h-3.5 w-3.5" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>Delegate</TooltipContent>
+                    </Tooltip>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button variant="ghost" size="icon" className="h-6 w-6">
+                          <MessageSquare className="h-3.5 w-3.5" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>Add comment</TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
+              </div>
+
+              <div className="mt-3 border-t border-border/50 pt-3">
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className={`h-7 text-xs ${actionFeedback[action.id] === "useful" ? "border-emerald-200 bg-emerald-50 text-emerald-700" : ""}`}
+                    onClick={() => handleFeedback(action.id, "useful")}
+                  >
+                    <ThumbsUp className="mr-1.5 h-3.5 w-3.5" />
+                    Helpful
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className={`h-7 text-xs ${actionFeedback[action.id] === "not_useful" ? "border-red-200 bg-red-50 text-red-700" : ""}`}
+                    onClick={() => handleFeedback(action.id, "not_useful")}
+                  >
+                    <ThumbsDown className="mr-1.5 h-3.5 w-3.5" />
+                    Not helpful
+                  </Button>
+                </div>
+
+                {commentOpen[action.id] && (
+                  <div className="mt-2 flex gap-2">
+                    <input
+                      type="text"
+                      value={feedbackComment[action.id] ?? ""}
+                      onChange={(event) =>
+                        setFeedbackComment((previous) => ({
+                          ...previous,
+                          [action.id]: event.target.value,
+                        }))
+                      }
+                      placeholder="Optional context for this feedback"
+                      className="h-8 flex-1 rounded-md border border-border bg-background px-2.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring"
+                    />
+                    <Button size="sm" className="h-8 text-xs" onClick={() => submitFeedback(action.id)}>
+                      Submit
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </section>
+  )
+}

package/src/components/report-card.tsx

@@ -0,0 +1,106 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+interface ReportCardFilterOption {
+  label: string
+  value: string
+}
+
+export interface ReportCardProps {
+  title: string
+  subtitle?: string
+  /** Filter pill group rendered top-right */
+  filterOptions?: ReportCardFilterOption[]
+  selectedFilter?: string
+  onFilterChange?: (value: string) => void
+  /** Secondary toggle (e.g. metric selector) */
+  toggleOptions?: string[]
+  selectedToggle?: string
+  onToggleChange?: (value: string) => void
+  /** Render slot between header and content */
+  headerExtra?: React.ReactNode
+  children: React.ReactNode
+  className?: string
+  contentClassName?: string
+}
+
+export function ReportCard({
+  title,
+  subtitle,
+  filterOptions,
+  selectedFilter,
+  onFilterChange,
+  toggleOptions,
+  selectedToggle,
+  onToggleChange,
+  headerExtra,
+  children,
+  className,
+  contentClassName,
+}: ReportCardProps) {
+  return (
+    <div
+      className={cn(
+        "rounded-xl border border-border bg-card shadow-sm",
+        className,
+      )}
+    >
+      <div className="flex flex-col gap-3 border-b border-border/60 px-6 py-5 sm:flex-row sm:items-center sm:justify-between">
+        <div className="min-w-0">
+          <h3 className="text-sm font-bold text-foreground">{title}</h3>
+          {subtitle && (
+            <p className="mt-0.5 text-xs text-muted-foreground">{subtitle}</p>
+          )}
+        </div>
+
+        <div className="flex items-center gap-3">
+          {toggleOptions && toggleOptions.length > 1 && (
+            <div className="flex items-center gap-1 rounded-lg bg-muted p-1">
+              {toggleOptions.map((opt) => (
+                <button
+                  key={opt}
+                  onClick={() => onToggleChange?.(opt)}
+                  className={cn(
+                    "rounded-md px-3 py-1 text-xs font-medium transition-all",
+                    selectedToggle === opt
+                      ? "bg-background text-foreground shadow-sm"
+                      : "text-muted-foreground hover:text-foreground",
+                  )}
+                >
+                  {opt}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {filterOptions && filterOptions.length > 1 && (
+            <div className="flex items-center gap-1 rounded-lg bg-muted p-1">
+              {filterOptions.map((opt) => (
+                <button
+                  key={opt.value}
+                  onClick={() => onFilterChange?.(opt.value)}
+                  className={cn(
+                    "h-7 rounded-md border-none bg-transparent px-3 text-xs font-medium shadow-none transition-all hover:bg-white",
+                    selectedFilter === opt.value &&
+                      "bg-background text-foreground shadow-sm",
+                  )}
+                >
+                  {opt.label}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {headerExtra && (
+        <div className="border-b border-border/40 px-6 py-3">{headerExtra}</div>
+      )}
+
+      <div className={cn("p-6", contentClassName)}>{children}</div>
+    </div>
+  )
+}

package/src/components/score-analysis-modal.tsx

@@ -0,0 +1,172 @@
+"use client"
+
+import * as React from "react"
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "./sheet"
+import { Badge } from "./badge"
+import { ScoreRing } from "./score-ring"
+import { ScoreBreakdown, type ScoreFactor } from "./score-breakdown"
+import { SignalApproval } from "./signal-feedback-inline"
+import { X } from "lucide-react"
+
+interface ScoreAnalysisModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: string
+  description: string
+  score: number
+  denominator?: number
+  whyNow: string
+  evidence: React.ReactNode[]
+  factors?: ScoreFactor[]
+  onFactorFeedback?: (factorKey: string, type: "up" | "down" | null, detail?: string) => void
+  companyName?: string
+  opportunityUrl?: string
+  onApprove?: () => void
+  onApproveFeedback?: (reasons: string[], detail: string) => void
+  onDismiss?: (reasons: string[], detail: string) => void
+  /** When true, renders as an absolute-positioned inline panel instead of a Radix Sheet portal. Useful when the component is inside a container that should not be escaped. */
+  useInlinePanel?: boolean
+}
+
+function getScoreLabel(score: number, denominator: number) {
+  const pct = (score / denominator) * 100
+  if (pct >= 70) return { text: "HIGH", className: "text-emerald-600" }
+  if (pct >= 40) return { text: "MEDIUM", className: "text-amber-600" }
+  return { text: "LOW", className: "text-red-600" }
+}
+
+function ScoreAnalysisModal({
+  open,
+  onOpenChange,
+  title,
+  description,
+  score,
+  denominator = 100,
+  whyNow,
+  evidence,
+  factors,
+  onFactorFeedback,
+  companyName = "Account",
+  opportunityUrl,
+  onApprove,
+  onApproveFeedback,
+  onDismiss,
+  useInlinePanel = false,
+}: ScoreAnalysisModalProps) {
+  const label = getScoreLabel(score, denominator)
+
+  const panelContent = (
+    <SignalApproval.Root
+          companyName={companyName}
+          opportunityUrl={opportunityUrl}
+          onApprove={onApprove}
+          onApproveFeedback={onApproveFeedback}
+          onDismiss={onDismiss}
+        >
+          <div className="flex items-center justify-between px-6 py-4 border-b border-border shrink-0">
+            <h2 className="text-lg font-semibold text-foreground">{title}</h2>
+            <button
+              type="button"
+              onClick={() => onOpenChange(false)}
+              className="p-1.5 rounded-md text-muted-foreground hover:bg-secondary transition-colors"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+
+          <div className="flex-1 overflow-y-auto px-6 py-6">
+            <p className="text-sm text-muted-foreground mb-6">{description}</p>
+
+            <div className="mb-8">
+              <SignalApproval.Actions />
+            </div>
+
+            <div className="space-y-6">
+              <div className="flex flex-col items-center gap-3">
+                <ScoreRing score={score} denominator={denominator} size={120} strokeWidth={10} />
+                <Badge variant="outline">
+                  {Math.round((score / denominator) * 100)}% Score
+                  {" \u2014 "}
+                  <span className={label.className}>{label.text}</span>
+                </Badge>
+              </div>
+
+              <div>
+                <h3 className="font-semibold mb-2 text-sm">Why Now</h3>
+                <p className="text-sm text-muted-foreground leading-relaxed">{whyNow}</p>
+              </div>
+
+              <div>
+                <h3 className="font-semibold mb-2 text-sm">Supporting Evidence</h3>
+                <ul className="space-y-2">
+                  {evidence.map((item, index) => (
+                    <li key={index} className="flex items-start gap-2 text-sm">
+                      <div className="w-1.5 h-1.5 bg-primary rounded-full mt-2 flex-shrink-0" />
+                      <span className="text-muted-foreground leading-relaxed">{item}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              {factors && factors.length > 0 && (
+                <div>
+                  <h3 className="font-semibold mb-2 text-sm">Score Breakdown</h3>
+                  <ScoreBreakdown factors={factors} onFactorFeedback={onFactorFeedback} />
+                </div>
+              )}
+            </div>
+          </div>
+        </SignalApproval.Root>
+  )
+
+  if (useInlinePanel) {
+    if (!open) return null
+    return (
+      <div style={{ position: "absolute", inset: 0, zIndex: 50, pointerEvents: "auto", overflow: "hidden" }}>
+        <div
+          onClick={() => onOpenChange(false)}
+          style={{ position: "absolute", inset: 0, backgroundColor: "rgba(0,0,0,0.5)", transition: "opacity 200ms" }}
+        />
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            width: 500,
+            maxWidth: "100%",
+            zIndex: 50,
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden",
+            borderLeft: "1px solid var(--border)",
+            backgroundColor: "var(--background, #fff)",
+            boxShadow: "-4px 0 24px rgba(0,0,0,0.12)",
+          }}
+        >
+          {panelContent}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        className="w-full sm:w-[500px] sm:max-w-[600px] overflow-hidden p-0 bg-background border-l border-border flex flex-col"
+        showCloseButton={false}
+      >
+        <SheetHeader className="sr-only p-0">
+          <SheetTitle>{title}</SheetTitle>
+        </SheetHeader>
+        {panelContent}
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+const ScoreAnalysisPanel = ScoreAnalysisModal
+
+export { ScoreAnalysisModal, ScoreAnalysisPanel }
+export type { ScoreAnalysisModalProps }