@wealthx/shadcn 1.0.2 → 1.2.0

package/src/components/ui/pipeline-dialogs.tsx

@@ -0,0 +1,303 @@
+import * as React from "react";
+import { addDays, startOfDay, format } from "date-fns";
+import { cn } from "@/lib/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { DatePicker } from "@/components/ui/date-picker";
+
+/**
+ * Pipeline Dialogs — WealthX DS (L4)
+ *
+ * Small, focused dialogs for Pipeline / Loan CRM actions:
+ * - DeleteOpportunityDialog — confirm card deletion
+ * - ChangePriorityDialog    — select priority (Auto / Low / Medium / High)
+ * - PutOnHoldDialog         — choose a hold-until date (preset or custom)
+ *
+ * All dialogs are fully controlled (`open` + `onOpenChange`).
+ * The `loading` prop disables actions and prevents accidental close.
+ */
+
+// ---------------------------------------------------------------------------
+// DeleteOpportunityDialog
+// ---------------------------------------------------------------------------
+
+export interface DeleteOpportunityDialogProps {
+  open: boolean;
+  /** Disables buttons and prevents close while an async op is in-flight. */
+  loading?: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+  className?: string;
+}
+
+export function DeleteOpportunityDialog({
+  open,
+  loading = false,
+  onOpenChange,
+  onConfirm,
+  className,
+}: DeleteOpportunityDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={loading ? undefined : onOpenChange}>
+      <DialogContent
+        showCloseButton={!loading}
+        className={cn("max-w-sm", className)}
+      >
+        <DialogHeader>
+          <DialogTitle>Want to delete this card?</DialogTitle>
+          <DialogDescription>
+            Doing so will also remove all associated loan applications and
+            tasks. This action cannot be undone.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={loading}
+          >
+            Cancel
+          </Button>
+          <Button variant="destructive" onClick={onConfirm} disabled={loading}>
+            {loading ? "Deleting…" : "Delete"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ChangePriorityDialog
+// ---------------------------------------------------------------------------
+
+export type PrioritySelection = "auto" | "low" | "medium" | "high";
+
+const PRIORITY_OPTIONS: {
+  value: PrioritySelection;
+  label: string;
+  color: string;
+}[] = [
+  { value: "auto", label: "Auto", color: "var(--color-muted-foreground)" },
+  { value: "low", label: "Low", color: "var(--color-success)" },
+  { value: "medium", label: "Medium", color: "var(--color-warning)" },
+  { value: "high", label: "High", color: "var(--color-destructive)" },
+];
+
+export interface ChangePriorityDialogProps {
+  open: boolean;
+  value: PrioritySelection;
+  loading?: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSave: () => void;
+  onSelectionChange: (value: PrioritySelection) => void;
+  className?: string;
+}
+
+export function ChangePriorityDialog({
+  open,
+  value,
+  loading = false,
+  onOpenChange,
+  onSave,
+  onSelectionChange,
+  className,
+}: ChangePriorityDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={loading ? undefined : onOpenChange}>
+      <DialogContent className={cn("max-w-sm", className)}>
+        <DialogHeader>
+          <DialogTitle>Change priority</DialogTitle>
+        </DialogHeader>
+        <Select
+          value={value}
+          onValueChange={(v) => onSelectionChange(v as PrioritySelection)}
+        >
+          <SelectTrigger className="w-full">
+            {(() => {
+              const opt = PRIORITY_OPTIONS.find((o) => o.value === value);
+              return opt ? (
+                <span className="flex items-center gap-2">
+                  <span
+                    className="inline-block size-2 shrink-0 rounded-full"
+                    style={{ backgroundColor: opt.color }}
+                    aria-hidden="true"
+                  />
+                  {opt.label}
+                </span>
+              ) : null;
+            })()}
+          </SelectTrigger>
+          <SelectContent>
+            {PRIORITY_OPTIONS.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                <span className="flex items-center gap-2">
+                  <span
+                    className="inline-block size-2 shrink-0 rounded-full"
+                    style={{ backgroundColor: opt.color }}
+                    aria-hidden="true"
+                  />
+                  {opt.label}
+                </span>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={loading}
+          >
+            Cancel
+          </Button>
+          <Button onClick={onSave} disabled={loading}>
+            {loading ? "Saving…" : "Save"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// PutOnHoldDialog
+// ---------------------------------------------------------------------------
+
+export type HoldDuration = "90" | "180" | "360" | "custom";
+
+const HOLD_OPTIONS: { value: HoldDuration; label: string }[] = [
+  { value: "90", label: "90 Days" },
+  { value: "180", label: "180 Days" },
+  { value: "360", label: "360 Days" },
+  { value: "custom", label: "Custom" },
+];
+
+export interface PutOnHoldDialogProps {
+  open: boolean;
+  loading?: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Called with an ISO date string (yyyy-MM-dd) when the user saves. */
+  onSave: (isoDate: string) => void;
+  className?: string;
+}
+
+export function PutOnHoldDialog({
+  open,
+  loading = false,
+  onOpenChange,
+  onSave,
+  className,
+}: PutOnHoldDialogProps) {
+  const [duration, setDuration] = React.useState<HoldDuration>("90");
+  const [customDate, setCustomDate] = React.useState<Date | undefined>();
+  const today = React.useMemo(() => startOfDay(new Date()), []);
+
+  const resolvedDate = React.useMemo<Date | undefined>(() => {
+    if (duration === "custom") return customDate;
+    return addDays(today, parseInt(duration, 10));
+  }, [duration, customDate, today]);
+
+  const isValid = resolvedDate !== undefined && resolvedDate >= today;
+
+  function handleSave() {
+    if (!resolvedDate) return;
+    onSave(format(resolvedDate, "yyyy-MM-dd"));
+  }
+
+  // Reset when dialog opens
+  React.useEffect(() => {
+    if (open) {
+      setDuration("90");
+      setCustomDate(undefined);
+    }
+  }, [open]);
+
+  return (
+    <Dialog open={open} onOpenChange={loading ? undefined : onOpenChange}>
+      <DialogContent className={cn("max-w-sm", className)}>
+        <DialogHeader>
+          <DialogTitle>Hold and Hide Until Later Date</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-4">
+          <ToggleGroup
+            type="single"
+            variant="outline"
+            size="sm"
+            value={[duration]}
+            onValueChange={(v) => {
+              if (v.length) setDuration(v[0] as HoldDuration);
+            }}
+            className="w-full"
+          >
+            {HOLD_OPTIONS.map((opt) => (
+              <ToggleGroupItem
+                key={opt.value}
+                value={opt.value}
+                className="flex-1"
+              >
+                {opt.label}
+              </ToggleGroupItem>
+            ))}
+          </ToggleGroup>
+
+          {/* Fixed-height row — same h-9 in all tab states to prevent layout jump */}
+          {duration === "custom" ? (
+            <DatePicker
+              value={customDate}
+              onChange={setCustomDate}
+              placeholder="Pick a date"
+              calendarProps={{ disabled: { before: today } }}
+            />
+          ) : (
+            resolvedDate && (
+              <div className="flex h-9 items-center border border-input bg-muted/30 px-3 text-sm text-muted-foreground">
+                Hold until:{" "}
+                <span className="ml-1 font-medium text-foreground">
+                  {format(resolvedDate, "dd MMM yyyy")}
+                </span>
+              </div>
+            )
+          )}
+
+          {/* For custom: show resolved date below the picker once selected */}
+          {duration === "custom" && customDate && (
+            <p className="text-sm text-muted-foreground">
+              Hold until:{" "}
+              <span className="font-medium text-foreground">
+                {format(customDate, "dd MMM yyyy")}
+              </span>
+            </p>
+          )}
+        </div>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={loading}
+          >
+            Cancel
+          </Button>
+          <Button onClick={handleSave} disabled={loading || !isValid}>
+            {loading ? "Saving…" : "Save"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/pipeline-primitives.tsx

@@ -0,0 +1,108 @@
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+
+/**
+ * Pipeline domain primitives — WealthX DS
+ *
+ * Complex domain-specific atoms for the Pipeline / Loan CRM feature
+ * that cannot be expressed as simple use-cases of existing primitives.
+ *
+ * Simple patterns (priority dot, days chip, loan type badge, progress bar)
+ * are documented as use-cases in their respective base component stories
+ * (Badge, Chip, Progress) — not exported as separate components.
+ *
+ * Layer: L2 Domain Primitive
+ */
+
+// ---------------------------------------------------------------------------
+// TaskCheckItem
+// ---------------------------------------------------------------------------
+
+export interface TaskCheckItemProps {
+  /** Task display title. */
+  title: string;
+  /** Whether the task has been completed. */
+  completed: boolean;
+  /** Name of the AI agent assigned to this task, if any. */
+  aiAgentName?: string | null;
+  /** Called when the checkbox is toggled. */
+  onToggle?: () => void;
+  /** Disables interaction (e.g. while saving). */
+  disabled?: boolean;
+  /**
+   * Text size for the task title.
+   * - "xs" (default) — 12px, for compact card usage
+   * - "sm" — 14px, for standalone / drawer usage
+   */
+  size?: "xs" | "sm";
+  className?: string;
+}
+
+/**
+ * A single task row with a checkbox, title (strikethrough when done),
+ * and an optional AI agent chip.
+ *
+ * Used in two contexts:
+ * - `OpportunityCard` (kanban card) — default `size="xs"` (12px), compact
+ * - `StageTimeline` (drawer Tasks tab) — `size="sm"` (14px), standalone
+ *
+ * Data source: `Opportunity.tasks[]` from `loan-crm.ts`
+ * - `completed` ← `task.completedTaskId !== null`
+ * - `aiAgentName` ← `task.aiAgentName`
+ */
+export function TaskCheckItem({
+  title,
+  completed,
+  aiAgentName,
+  onToggle,
+  disabled = false,
+  size = "xs",
+  className,
+}: TaskCheckItemProps) {
+  return (
+    <div
+      className={cn(
+        "flex cursor-pointer items-start gap-2 py-1.5",
+        disabled && "pointer-events-none opacity-60",
+        className,
+      )}
+      onClick={() => onToggle?.()}
+      data-slot="task-check-item"
+    >
+      {/*
+       * Wrapper span stops click propagation so the outer div's onClick doesn't
+       * double-fire when the user clicks the Checkbox button directly.
+       * (Radix Checkbox renders as <button> — clicking it fires onCheckedChange,
+       * then the event would bubble to the div and call onToggle a second time.)
+       */}
+      <span onClick={(e) => e.stopPropagation()} className="mt-0.5 shrink-0">
+        <Checkbox
+          checked={completed}
+          onCheckedChange={() => onToggle?.()}
+          disabled={disabled}
+        />
+      </span>
+      <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <span
+          className={cn(
+            "leading-snug text-foreground",
+            size === "sm" ? "text-sm" : "text-xs",
+            completed && "text-muted-foreground line-through",
+          )}
+        >
+          {title}
+        </span>
+        {aiAgentName && (
+          <Badge variant="secondary" className="gap-1 text-[10px]">
+            <span
+              className="size-1.5 rounded-full bg-primary"
+              aria-hidden="true"
+            />
+            {aiAgentName}
+          </Badge>
+        )}
+      </span>
+    </div>
+  );
+}

package/src/components/ui/popover.tsx

@@ -1,29 +1,29 @@
-import { type ReactElement } from "react"
-import * as React from "react"
-import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
-import { cn } from "@/lib/utils"
-import { useThemeVars } from "@/lib/theme-provider"
+import { type ReactElement } from "react";
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { cn } from "@/lib/utils";
+import { useThemeVars } from "@/lib/theme-provider";
 
-export type PopoverProps = React.ComponentProps<typeof PopoverPrimitive.Root>
+export type PopoverProps = React.ComponentProps<typeof PopoverPrimitive.Root>;
 
-function Popover({
-  ...props
-}: PopoverProps): ReactElement {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+function Popover({ ...props }: PopoverProps): ReactElement {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
-export type PopoverTriggerProps = React.ComponentProps<typeof PopoverPrimitive.Trigger>
+export type PopoverTriggerProps = React.ComponentProps<
+  typeof PopoverPrimitive.Trigger
+>;
 
-function PopoverTrigger({
-  ...props
-}: PopoverTriggerProps): ReactElement {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+function PopoverTrigger({ ...props }: PopoverTriggerProps): ReactElement {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 
-export type PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> & {
-  align?: "start" | "center" | "end"
-  sideOffset?: number
-}
+export type PopoverContentProps = React.ComponentProps<
+  typeof PopoverPrimitive.Popup
+> & {
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+};
 
 function PopoverContent({
   className,
@@ -36,13 +36,14 @@ function PopoverContent({
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Positioner
+        className="z-[200]"
         align={align}
         sideOffset={sideOffset}
       >
         <PopoverPrimitive.Popup
           className={cn(
             "z-50 w-72 border border-border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
-            className
+            className,
           )}
           data-slot="popover-content"
           style={{ ...themeVars, ...style } as React.CSSProperties}
@@ -50,32 +51,36 @@ function PopoverContent({
         />
       </PopoverPrimitive.Positioner>
     </PopoverPrimitive.Portal>
-  )
+  );
 }
 
-export type PopoverAnchorProps = React.ComponentProps<"div">
+export type PopoverAnchorProps = React.ComponentProps<"div">;
 
-function PopoverAnchor({
-  ...props
-}: PopoverAnchorProps): ReactElement {
-  return <div data-slot="popover-anchor" {...props} />
+function PopoverAnchor({ ...props }: PopoverAnchorProps): ReactElement {
+  return <div data-slot="popover-anchor" {...props} />;
 }
 
-export type PopoverHeaderProps = React.ComponentProps<"div">
+export type PopoverHeaderProps = React.ComponentProps<"div">;
 
-function PopoverHeader({ className, ...props }: PopoverHeaderProps): ReactElement {
+function PopoverHeader({
+  className,
+  ...props
+}: PopoverHeaderProps): ReactElement {
   return (
     <div
-      className={cn("flex flex-col gap-1 text-sm", className)}
+      className={cn("flex flex-col gap-1 text-body-small", className)}
       data-slot="popover-header"
       {...props}
     />
-  )
+  );
 }
 
-export type PopoverTitleProps = React.ComponentProps<"h2">
+export type PopoverTitleProps = React.ComponentProps<"h2">;
 
-function PopoverTitle({ className, ...props }: PopoverTitleProps): ReactElement {
+function PopoverTitle({
+  className,
+  ...props
+}: PopoverTitleProps): ReactElement {
   return (
     // eslint-disable-next-line jsx-a11y/heading-has-content -- children passed via props spread
     <h2
@@ -83,10 +88,10 @@ function PopoverTitle({ className, ...props }: PopoverTitleProps): ReactElement
       data-slot="popover-title"
       {...props}
     />
-  )
+  );
 }
 
-export type PopoverDescriptionProps = React.ComponentProps<"p">
+export type PopoverDescriptionProps = React.ComponentProps<"p">;
 
 function PopoverDescription({
   className,
@@ -98,7 +103,7 @@ function PopoverDescription({
       data-slot="popover-description"
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -109,4 +114,4 @@ export {
   PopoverHeader,
   PopoverTitle,
   PopoverDescription,
-}
+};