@handled-ai/design-system 0.18.45 → 0.18.47

package/src/components/data-table-filter.tsx

@@ -28,10 +28,13 @@ export interface FilterOption {
   value: string
 }
 
-interface DataTableFilterCategoryBase {
+export interface DataTableFilterCategory {
   id: string
   label: string
   icon: React.ComponentType<{ className?: string }>
+  options: (string | FilterOption)[]
+  /** Filter behavior. Defaults to "multi" (checkbox multi-select). */
+  type?: "multi" | "single" | "boolean"
   /**
    * Submenu search behavior. Defaults to the DataTableFilter
    * optionSearchThreshold prop. Use true to always show search or false to
@@ -40,25 +43,6 @@ interface DataTableFilterCategoryBase {
   searchable?: boolean | { threshold?: number }
 }
 
-export interface DataTableOptionFilterCategory extends DataTableFilterCategoryBase {
-  options: (string | FilterOption)[]
-  /** Filter behavior. Defaults to "multi" (checkbox multi-select). */
-  type?: "multi" | "single" | "boolean"
-}
-
-export interface DataTableTextFilterCategory extends DataTableFilterCategoryBase {
-  /** Free-text filter behavior. Renders a top-level submenu with a text input. */
-  type: "text"
-  /** Placeholder shown in the text filter input. */
-  valuePlaceholder?: string
-  /** Not used for text filters; optional for backwards-compatible category shapes. */
-  options?: (string | FilterOption)[]
-}
-
-export type DataTableFilterCategory =
-  | DataTableOptionFilterCategory
-  | DataTableTextFilterCategory
-
 function getOptionValue(option: string | FilterOption): string {
   return typeof option === "string" ? option : option.value
 }
@@ -66,111 +50,6 @@ function getOptionLabel(option: string | FilterOption): string {
   return typeof option === "string" ? option : option.label
 }
 
-function isTextFilterCategory(
-  category: DataTableFilterCategory
-): category is DataTableTextFilterCategory {
-  return category.type === "text"
-}
-
-function TextFilterSubmenu({
-  category,
-  value,
-  onValueChange,
-}: {
-  category: DataTableTextFilterCategory
-  value: string
-  onValueChange?: (categoryId: string, value: string) => void
-}) {
-  const [draftValue, setDraftValue] = React.useState(value)
-
-  React.useEffect(() => {
-    setDraftValue(value)
-  }, [value])
-
-  const active = value.trim().length > 0
-  const applyValue = React.useCallback(() => {
-    onValueChange?.(category.id, draftValue.trim())
-  }, [category.id, draftValue, onValueChange])
-
-  return (
-    <DropdownMenuSub
-      onOpenChange={(open) => {
-        if (!open) {
-          setDraftValue(value)
-        }
-      }}
-    >
-      <DropdownMenuSubTrigger
-        className={cn(
-          "cursor-pointer py-1.5 text-xs",
-          active && "text-brand-purple"
-        )}
-      >
-        <category.icon
-          className={cn(
-            "mr-2 h-3.5 w-3.5 text-muted-foreground",
-            active && "text-brand-purple"
-          )}
-        />
-        {category.label}
-        {active ? <Check className="ml-auto h-4 w-4" /> : null}
-      </DropdownMenuSubTrigger>
-      <DropdownMenuSubContent className="w-64 p-2">
-        <div className="space-y-2">
-          <input
-            aria-label={category.label}
-            className="h-8 w-full rounded-md bg-muted/50 px-2 py-1 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted"
-            placeholder={
-              category.valuePlaceholder ??
-              `Enter ${category.label.toLowerCase()}...`
-            }
-            value={draftValue}
-            onChange={(event) => setDraftValue(event.target.value)}
-            onClick={(event) => event.stopPropagation()}
-            onKeyDown={(event) => {
-              event.stopPropagation()
-              if (event.key === "Enter") {
-                event.preventDefault()
-                applyValue()
-              }
-            }}
-          />
-          <div className="flex items-center justify-end gap-2">
-            {active ? (
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                className="h-7 px-2 text-xs"
-                onClick={(event) => {
-                  event.preventDefault()
-                  event.stopPropagation()
-                  setDraftValue("")
-                  onValueChange?.(category.id, "")
-                }}
-              >
-                Clear
-              </Button>
-            ) : null}
-            <Button
-              type="button"
-              size="sm"
-              className="h-7 px-2 text-xs"
-              onClick={(event) => {
-                event.preventDefault()
-                event.stopPropagation()
-                applyValue()
-              }}
-            >
-              Apply
-            </Button>
-          </div>
-        </div>
-      </DropdownMenuSubContent>
-    </DropdownMenuSub>
-  )
-}
-
 export interface DataTableFilterProps {
   categories: DataTableFilterCategory[]
   selectedFilters: Record<string, string[]>
@@ -192,10 +71,6 @@ export interface DataTableFilterProps {
   onConditionFiltersChange?: (conditions: ConditionFilterValue[]) => void
   /** Dropdown entry label for the condition-builder panel. Default: "Add filter". */
   conditionBuilderLabel?: string
-  /** Active free-text filters keyed by category id. */
-  textFilters?: Record<string, string>
-  /** Callback when a free-text filter value is applied or cleared. */
-  onTextFilterChange?: (categoryId: string, value: string) => void
 }
 
 export function DataTableFilter({
@@ -211,8 +86,6 @@ export function DataTableFilter({
   conditionFilters = [],
   onConditionFiltersChange,
   conditionBuilderLabel = "Add filter",
-  textFilters = {},
-  onTextFilterChange,
 }: DataTableFilterProps) {
   const [query, setQuery] = React.useState("")
   const [subQueries, setSubQueries] = React.useState<Record<string, string>>({})
@@ -230,10 +103,6 @@ export function DataTableFilter({
         return true
       }
 
-      if (isTextFilterCategory(category)) {
-        return false
-      }
-
       return category.options.some((option) =>
         getOptionLabel(option).toLowerCase().includes(normalized)
       )
@@ -254,16 +123,8 @@ export function DataTableFilter({
       0
     )
 
-    const textCount = categories.reduce((count, category) => {
-      if (!isTextFilterCategory(category)) {
-        return count
-      }
-
-      return textFilters[category.id]?.trim() ? count + 1 : count
-    }, 0)
-
-    return userCount + conditionFilters.length + textCount
-  }, [categories, selectedFilters, conditionFilters.length, textFilters])
+    return userCount + conditionFilters.length
+  }, [selectedFilters, conditionFilters.length])
 
   /** Collect all preset chips to render */
   const presetChips = React.useMemo(() => {
@@ -274,9 +135,9 @@ export function DataTableFilter({
     for (const [categoryId, values] of Object.entries(presetFilters)) {
       const category = categories.find((c) => c.id === categoryId)
       for (const value of values) {
-        const option = category && !isTextFilterCategory(category)
-          ? category.options.find((opt) => getOptionValue(opt) === value)
-          : undefined
+        const option = category?.options.find(
+          (opt) => getOptionValue(opt) === value
+        )
         const label = option ? getOptionLabel(option) : value
         const active = selectedFilters[categoryId]?.includes(value) ?? false
         chips.push({ categoryId, value, label, active })
@@ -347,18 +208,6 @@ export function DataTableFilter({
               )
             }
 
-            /* ── Free-text submenu ───────────────────────────────── */
-            if (isTextFilterCategory(category)) {
-              return (
-                <TextFilterSubmenu
-                  key={category.id}
-                  category={category}
-                  value={textFilters[category.id] ?? ""}
-                  onValueChange={onTextFilterChange}
-                />
-              )
-            }
-
             /* ── Sub-menu (single / multi) ──────────────────────── */
             const subQuery = (subQueries[category.id] ?? "").trim().toLowerCase()
             const filteredOptions = subQuery

package/src/components/signal-feedback-inline.tsx

@@ -73,6 +73,32 @@ const approveReasons = [
 
 type ApprovalState = "pending" | "confirming" | "creating" | "approving-feedback" | "dismissing" | "approved" | "dismissed" | "auto-approved"
 
+interface OpportunityPreviewOption {
+  value: string
+  label: string
+}
+
+interface OpportunityPreview {
+  name: string
+  stage: string
+  closeDate: string
+  closeDateValue?: string
+  amount: string
+  /** Raw draft input value. Numeric values render as currency in the editable field. */
+  amountValue?: string | number | null
+  accountName: string
+  description?: string | null
+  churnType?: string | null
+  churnTypeOptions?: Array<string | OpportunityPreviewOption>
+}
+
+interface OpportunityDraft {
+  closeDate: string
+  amount: string
+  description: string
+  churnType: string
+}
+
 interface SignalApprovalLabels {
   approveButton?: string
   dismissButton?: string
@@ -106,9 +132,9 @@ interface SignalApprovalContextValue {
   labels: Required<SignalApprovalLabels>
   hideApproveButton?: boolean
   approveButtonIconUrl?: string
-  opportunityPreview?: RootProps['opportunityPreview']
+  opportunityPreview?: OpportunityPreview
   requestingApproval: boolean
-  approve: () => void
+  approve: (draft?: OpportunityDraft) => void
   submitApproveFeedback: (reasons: string[], detail: string) => void
   skipApproveFeedback: () => void
   dismiss: (reasons: string[], detail: string, subReason?: string) => void
@@ -137,13 +163,7 @@ interface RootProps {
   /** Optional icon URL for the approve button. Renders an img instead of CirclePlus when provided. */
   approveButtonIconUrl?: string
   /** Optional structured preview data shown in the confirmation dialog. */
-  opportunityPreview?: {
-    name: string
-    stage: string
-    closeDate: string
-    amount: string
-    accountName: string
-  }
+  opportunityPreview?: OpportunityPreview
   /**
    * Async callback fired when the user clicks the approve button, BEFORE
    * transitioning to the "confirming" state. While the promise is pending,
@@ -160,7 +180,7 @@ interface RootProps {
    *   "creating" loading state while the promise is pending. On `true` it
    *   transitions to the feedback step; on `false` it reverts to "pending".
    */
-  onApprove?: () => void | Promise<boolean>
+  onApprove?: (draft?: OpportunityDraft) => void | Promise<boolean>
   onApproveFeedback?: (reasons: string[], detail: string) => void
   onDismiss?: (reasons: string[], detail: string, subReason?: string) => void
 }
@@ -205,8 +225,8 @@ function Root({ children, companyName, opportunityUrl, scheduledTime, initialApp
     setApprovalState("pending")
   }, [])
 
-  const approve = React.useCallback(() => {
-    const result = onApprove?.()
+  const approve = React.useCallback((draft?: OpportunityDraft) => {
+    const result = onApprove?.(draft)
     // If the callback returns a Promise, show a loading state and wait for it.
     if (result && typeof (result as Promise<boolean>).then === "function") {
       setApprovalState("creating")
@@ -417,6 +437,49 @@ function SubmittedFeedback({
   )
 }
 
+function optionValue(option: string | OpportunityPreviewOption): string {
+  return typeof option === "string" ? option : option.value
+}
+
+function optionLabel(option: string | OpportunityPreviewOption): string {
+  return typeof option === "string" ? option : option.label
+}
+
+function formatAmountDraftValue(value: string | number | null | undefined): string {
+  if (value == null || value === "") return ""
+  if (typeof value === "number") {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      maximumFractionDigits: 0,
+    }).format(value)
+  }
+  return value
+}
+
+function buildOpportunityDraft(preview?: OpportunityPreview): OpportunityDraft {
+  return {
+    closeDate: preview?.closeDateValue ?? preview?.closeDate ?? "",
+    amount: preview?.amountValue === undefined
+      ? preview?.amount ?? ""
+      : formatAmountDraftValue(preview.amountValue),
+    description: preview?.description ?? "",
+    churnType: preview?.churnType ?? "",
+  }
+}
+
+function hasEditableOpportunityPreview(preview?: OpportunityPreview): boolean {
+  return !!preview && isValidDateInput(preview.closeDateValue ?? preview.closeDate)
+}
+
+function isValidDateInput(value: string): boolean {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value)
+  if (!match) return false
+  const parsed = new Date(`${value}T00:00:00Z`)
+  if (Number.isNaN(parsed.getTime())) return false
+  return parsed.toISOString().slice(0, 10) === value
+}
+
 function Actions() {
   const { approvalState, companyName, opportunityUrl, scheduledTime, labels, hideApproveButton, approveButtonIconUrl, opportunityPreview, requestingApproval, approve, submitApproveFeedback, skipApproveFeedback, dismiss, requestApproval, requestDismiss, cancel } =
     useSignalApproval()
@@ -426,6 +489,16 @@ function Actions() {
   const [detailText, setDetailText] = React.useState("")
   const [submittedFeedback, setSubmittedFeedback] = React.useState<{ reasons: string[]; detail: string; subReason?: string } | null>(null)
   const [isEditing, setIsEditing] = React.useState(false)
+  const [opportunityDraft, setOpportunityDraft] = React.useState<OpportunityDraft>(() => buildOpportunityDraft(opportunityPreview))
+
+  React.useEffect(() => {
+    if (approvalState === "confirming") {
+      setOpportunityDraft(buildOpportunityDraft(opportunityPreview))
+    }
+  }, [approvalState, opportunityPreview])
+
+  const churnTypeOptions = opportunityPreview?.churnTypeOptions ?? []
+  const hasChurnTypeOptions = churnTypeOptions.length > 0
 
   const topNode = dismissReasonTree.find((n) => n.label === selectedTopReason)
   const hasSubOptions = !!(topNode?.subOptions && topNode.subOptions.length > 0)
@@ -438,6 +511,8 @@ function Actions() {
     (!needsText || detailText.trim().length > 0)
 
   const canSubmitApprove = selectedReasons.length > 0 || detailText.trim().length > 0
+  const isEditableOpportunityPreview = hasEditableOpportunityPreview(opportunityPreview)
+  const canConfirmOpportunity = !isEditableOpportunityPreview || isValidDateInput(opportunityDraft.closeDate)
 
   const selectTopReason = (label: string) => {
     if (selectedTopReason === label) {
@@ -739,8 +814,8 @@ function Actions() {
           <p className="text-sm text-foreground">
             {labels.confirmPrompt} <strong>{companyName}</strong>. Confirm?
           </p>
-          {opportunityPreview && (
-            <div className="mt-3 space-y-1.5 border-t border-border/50 pt-3">
+          {opportunityPreview && !isEditableOpportunityPreview && (
+            <div className="mt-3 space-y-2 border-t border-border/50 pt-3">
               {[
                 { label: "Opportunity", value: opportunityPreview.name },
                 { label: "Account", value: opportunityPreview.accountName },
@@ -748,19 +823,99 @@ function Actions() {
                 { label: "Close Date", value: opportunityPreview.closeDate },
                 { label: "Amount", value: opportunityPreview.amount },
               ].map(({ label, value }) => (
-                <div key={label} className="flex items-center justify-between text-xs">
+                <div key={label} className="flex items-center justify-between gap-3 text-xs">
+                  <span className="text-muted-foreground">{label}</span>
+                  <span className="text-right font-medium text-foreground">{value}</span>
+                </div>
+              ))}
+            </div>
+          )}
+          {opportunityPreview && isEditableOpportunityPreview && (
+            <div className="mt-3 space-y-3 border-t border-border/50 pt-3">
+              {[
+                { label: "Opportunity", value: opportunityPreview.name },
+                { label: "Account", value: opportunityPreview.accountName },
+                { label: "Stage", value: opportunityPreview.stage },
+              ].map(({ label, value }) => (
+                <div key={label} className="flex items-center justify-between gap-3 text-xs">
                   <span className="text-muted-foreground">{label}</span>
-                  <span className="font-medium text-foreground">{value}</span>
+                  <span className="text-right font-medium text-foreground">{value}</span>
                 </div>
               ))}
+
+              <div className="grid gap-2 sm:grid-cols-2">
+                <label className="space-y-1 text-xs">
+                  <span className="font-medium text-muted-foreground">Close Date</span>
+                  <input
+                    type="date"
+                    value={opportunityDraft.closeDate}
+                    onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, closeDate: event.target.value }))}
+                    aria-invalid={!canConfirmOpportunity}
+                    className="h-8 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+                  />
+                  {!canConfirmOpportunity && (
+                    <span className="text-[11px] text-red-600">Enter a valid close date.</span>
+                  )}
+                </label>
+
+                <label className="space-y-1 text-xs">
+                  <span className="font-medium text-muted-foreground">Amount</span>
+                  <input
+                    type="text"
+                    inputMode="decimal"
+                    value={opportunityDraft.amount}
+                    onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, amount: event.target.value }))}
+                    placeholder={opportunityPreview.amount}
+                    className="h-8 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring"
+                  />
+                </label>
+              </div>
+
+              <label className="space-y-1 text-xs">
+                <span className="font-medium text-muted-foreground">Churn Type</span>
+                {hasChurnTypeOptions ? (
+                  <select
+                    value={opportunityDraft.churnType}
+                    onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, churnType: event.target.value }))}
+                    className="h-8 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+                  >
+                    <option value="">No churn type</option>
+                    {churnTypeOptions.map((option) => (
+                      <option key={optionValue(option)} value={optionValue(option)}>
+                        {optionLabel(option)}
+                      </option>
+                    ))}
+                  </select>
+                ) : (
+                  <input
+                    type="text"
+                    value={opportunityDraft.churnType}
+                    onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, churnType: event.target.value }))}
+                    placeholder="No churn type"
+                    className="h-8 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring"
+                  />
+                )}
+              </label>
+
+              <label className="space-y-1 text-xs">
+                <span className="font-medium text-muted-foreground">Description</span>
+                <textarea
+                  value={opportunityDraft.description}
+                  onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, description: event.target.value }))}
+                  rows={3}
+                  placeholder="Add a short description"
+                  className="w-full resize-none rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring"
+                />
+              </label>
             </div>
           )}
         </div>
         <div className="flex items-center gap-2">
           <button
             type="button"
-            onClick={approve}
-            className="inline-flex h-7 items-center gap-1.5 rounded-md bg-foreground px-3 text-xs font-semibold text-background transition-colors hover:bg-foreground/90"
+            onClick={() => approve(isEditableOpportunityPreview ? opportunityDraft : undefined)}
+            disabled={!canConfirmOpportunity}
+            className="inline-flex h-7 items-center gap-1.5 rounded-md bg-foreground px-3 text-xs font-semibold text-background transition-colors hover:bg-foreground/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground"
           >
             <Check className="h-3 w-3" />
             Confirm
@@ -861,5 +1016,4 @@ export {
   Gate as SignalApprovalGate,
 }
 export const SignalApproval = { Root, Actions, Gate }
-export type OpportunityPreview = NonNullable<RootProps['opportunityPreview']>
-export type { ApprovalState, SignalApprovalLabels, SignalApprovalContextValue, RootProps as SignalApprovalRootProps }
+export type { ApprovalState, OpportunityPreview, OpportunityDraft, SignalApprovalLabels, SignalApprovalContextValue, RootProps as SignalApprovalRootProps }

package/src/prototype/prototype-config.ts

@@ -13,7 +13,7 @@ import type {
   PipelineStageTiming,
 } from "../charts/pipeline-overview"
 import type { TimelineEvent } from "../components/timeline-activity"
-import type { ApprovalState } from "../components/signal-feedback-inline"
+import type { ApprovalState, OpportunityDraft } from "../components/signal-feedback-inline"
 import type { LucideIcon } from "lucide-react"
 import type { PriorityFactor } from "../components/signal-priority-popover"
 import type { FeedbackChipTree, FeedbackSubmitData, PersistedFeedbackData } from "../components/feedback-primitives"
@@ -180,7 +180,7 @@ export interface InboxViewConfig {
   quickFilterTabs?: Array<{ id: string; label: string; matchValue?: string; count?: number }>
   hideAccountsButton?: boolean
   accountDetailsLabel?: string
-  onSignalApprove?: (item: QueueItem) => void | Promise<boolean>
+  onSignalApprove?: (item: QueueItem, draft?: OpportunityDraft) => void | Promise<boolean>
   getSignalApprovalState?: (item: QueueItem) => ApprovalState | undefined
   signalLabels?: {
     approveButton?: string

package/src/prototype/prototype-inbox-view.tsx

@@ -38,7 +38,7 @@ import {
   type InboxFilterCategory,
 } from "../components/inbox-toolbar"
 import { GroupedListView, type GroupedListGroup } from "../components/item-list"
-import { SignalApproval, type ApprovalState, type OpportunityPreview } from "../components/signal-feedback-inline"
+import { SignalApproval, type ApprovalState, type OpportunityDraft, type OpportunityPreview } from "../components/signal-feedback-inline"
 import { ScoreWhyChips } from "../components/score-why-chips"
 import { SignalPriorityPopover } from "../components/signal-priority-popover"
 import { type SourceDef } from "../components/detail-view"
@@ -149,7 +149,7 @@ export interface DetailViewProps {
   onSuggestedActionFeedback?: (actionId: number | string, feedback: string, actionTitle?: string) => void
   /** @deprecated The compact score UX no longer renders score-level thumbs by default. */
   onScoreFeedback?: (type: "up" | "down", pills: string[], detail: string) => void
-  onSignalApprove?: (item: QueueItem) => void | Promise<boolean>
+  onSignalApprove?: (item: QueueItem, draft?: OpportunityDraft) => void | Promise<boolean>
   getSignalApprovalState?: (item: QueueItem) => ApprovalState | undefined
   signalLabels?: InboxViewConfig["signalLabels"]
   hideApproveButton?: boolean
@@ -475,7 +475,7 @@ export function DetailView({
       opportunityPreview={opportunityPreview}
       onRequestApproval={onRequestApproval}
       initialApprovalState={getSignalApprovalState?.(item)}
-      onApprove={() => onSignalApprove?.(item)}
+      onApprove={(draft) => onSignalApprove?.(item, draft)}
       onApproveFeedback={(reasons, detail) => {
         signalData.onApproveFeedback?.(reasons, detail)
         console.log("Approval feedback:", { taskId: item.id, company: item.company, reasons, detail })