@wealthx/shadcn 1.4.1 → 1.5.1

package/src/components/ui/create-contact-modal.tsx

@@ -0,0 +1,237 @@
+import * as React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Spinner } from "@/components/ui/spinner";
+import { AddressAutocomplete } from "@/components/ui/form-primitives";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface CreateContactFormData {
+  firstName: string;
+  lastName: string;
+  email: string;
+  phone: string;
+  address?: string;
+  assignedStaffId?: string;
+}
+
+export interface StaffOption {
+  id: string;
+  displayName: string;
+}
+
+export interface CreateContactModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (data: CreateContactFormData) => void;
+  isLoading?: boolean;
+  /** When provided, renders an "Assign to" staff selector (Admin role). */
+  staffOptions?: StaffOption[];
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function Field({
+  id,
+  label,
+  required,
+  children,
+}: {
+  id: string;
+  label: string;
+  required?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <Label htmlFor={id}>
+        {label}
+        {required && <span className="ml-0.5 text-destructive">*</span>}
+      </Label>
+      {children}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+const EMPTY_FORM: CreateContactFormData = {
+  firstName: "",
+  lastName: "",
+  email: "",
+  phone: "",
+  address: "",
+};
+
+export function CreateContactModal({
+  open,
+  onOpenChange,
+  onSubmit,
+  isLoading = false,
+  staffOptions,
+  className,
+}: CreateContactModalProps) {
+  const [form, setForm] = React.useState<CreateContactFormData>(EMPTY_FORM);
+
+  // Reset form when dialog opens
+  React.useEffect(() => {
+    if (open) setForm(EMPTY_FORM);
+  }, [open]);
+
+  function set(field: keyof CreateContactFormData, value: string) {
+    setForm((prev) => ({ ...prev, [field]: value }));
+  }
+
+  const isValid =
+    form.firstName.trim() !== "" &&
+    form.lastName.trim() !== "" &&
+    form.email.trim() !== "";
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!isValid || isLoading) return;
+    onSubmit(form);
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={isLoading ? undefined : onOpenChange}>
+      <DialogContent size="lg" className={className}>
+        <DialogHeader>
+          <DialogTitle>Add New Contact</DialogTitle>
+        </DialogHeader>
+
+        <form id="create-contact-form" onSubmit={handleSubmit}>
+          <div className="flex flex-col gap-4">
+            {/* Name row */}
+            <div className="grid grid-cols-2 gap-3">
+              <Field id="ccm-firstName" label="First name" required>
+                <Input
+                  id="ccm-firstName"
+                  placeholder="First name"
+                  value={form.firstName}
+                  onChange={(e) => set("firstName", e.target.value)}
+                  disabled={isLoading}
+                  autoComplete="given-name"
+                />
+              </Field>
+              <Field id="ccm-lastName" label="Last name" required>
+                <Input
+                  id="ccm-lastName"
+                  placeholder="Last name"
+                  value={form.lastName}
+                  onChange={(e) => set("lastName", e.target.value)}
+                  disabled={isLoading}
+                  autoComplete="family-name"
+                />
+              </Field>
+            </div>
+
+            {/* Email */}
+            <Field id="ccm-email" label="Email address" required>
+              <Input
+                id="ccm-email"
+                type="email"
+                placeholder="name@example.com"
+                value={form.email}
+                onChange={(e) => set("email", e.target.value)}
+                disabled={isLoading}
+                autoComplete="email"
+              />
+            </Field>
+
+            {/* Phone */}
+            <Field id="ccm-phone" label="Phone number">
+              <Input
+                id="ccm-phone"
+                type="tel"
+                placeholder="+61 4xx xxx xxx"
+                value={form.phone}
+                onChange={(e) => set("phone", e.target.value)}
+                disabled={isLoading}
+                autoComplete="tel"
+              />
+            </Field>
+
+            {/* Address */}
+            <Field id="ccm-address" label="Address">
+              <AddressAutocomplete
+                value={form.address ?? ""}
+                onValueChange={(v) => set("address", v)}
+                onSelect={(opt) => set("address", opt.label)}
+                disabled={isLoading}
+              />
+            </Field>
+
+            {/* Staff selector — Admin role only */}
+            {staffOptions && staffOptions.length > 0 && (
+              <Field id="ccm-staff" label="Assign to">
+                <Select
+                  value={form.assignedStaffId ?? ""}
+                  onValueChange={(v) => set("assignedStaffId", v)}
+                  disabled={isLoading}
+                >
+                  <SelectTrigger id="ccm-staff">
+                    <SelectValue placeholder="Select staff member" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {staffOptions.map((s) => (
+                      <SelectItem key={s.id} value={s.id}>
+                        {s.displayName}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </Field>
+            )}
+          </div>
+        </form>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={isLoading}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            form="create-contact-form"
+            disabled={!isValid || isLoading}
+          >
+            {isLoading ? (
+              <>
+                <Spinner className="size-3.5" />
+                Creating…
+              </>
+            ) : (
+              "Create Contact"
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/csv-import-modal.tsx

@@ -0,0 +1,153 @@
+import * as React from "react";
+import { FileTextIcon, XIcon } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { UploadCard } from "@/components/ui/upload-card";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface CsvImportModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Controlled: display name of the currently selected file. */
+  fileName?: string;
+  /** Controlled: size of the currently selected file in bytes. */
+  fileSize?: number;
+  /** Called when the user picks a file via the upload zone. */
+  onFileSelect?: (file: File) => void;
+  /** Called when the user removes the currently selected file. */
+  onFileClear?: () => void;
+  /** Called when the user clicks Next (a file must already be selected). */
+  onNext: () => void;
+  /** Called when the user clicks the CSV template download link. */
+  onDownloadTemplate?: () => void;
+  isLoading?: boolean;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function CsvImportModal({
+  open,
+  onOpenChange,
+  fileName,
+  fileSize,
+  onFileSelect,
+  onFileClear,
+  onNext,
+  onDownloadTemplate,
+  isLoading = false,
+  className,
+}: CsvImportModalProps) {
+  const hasFile = !!fileName;
+
+  return (
+    <Dialog open={open} onOpenChange={isLoading ? undefined : onOpenChange}>
+      <DialogContent size="md" className={className}>
+        <DialogHeader>
+          <DialogTitle>Import Contacts</DialogTitle>
+        </DialogHeader>
+
+        <p className="text-sm text-muted-foreground">
+          Upload a CSV file to bulk-import contacts into WealthX.{" "}
+          {onDownloadTemplate ? (
+            <button
+              type="button"
+              onClick={onDownloadTemplate}
+              className="text-primary underline-offset-2 hover:underline"
+            >
+              Download the CSV template
+            </button>
+          ) : (
+            "Download the CSV template"
+          )}{" "}
+          to get started.
+        </p>
+
+        {hasFile ? (
+          <SelectedFile
+            name={fileName!}
+            size={fileSize}
+            onClear={onFileClear}
+          />
+        ) : (
+          <UploadCard
+            size="lg"
+            label="Drag & drop or click to upload"
+            description="Supports .csv files only. Max 10 MB."
+            accept=".csv"
+            onFileChange={(file) => file && onFileSelect?.(file)}
+          />
+        )}
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={isLoading}
+          >
+            Cancel
+          </Button>
+          <Button disabled={!hasFile || isLoading} onClick={onNext}>
+            Next
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Sub-component
+// ---------------------------------------------------------------------------
+
+function SelectedFile({
+  name,
+  size,
+  onClear,
+}: {
+  name: string;
+  size?: number;
+  onClear?: () => void;
+}) {
+  return (
+    <div className="flex items-center gap-3 border border-border bg-muted/30 px-4 py-3">
+      <FileTextIcon className="size-4 shrink-0 text-muted-foreground" />
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-sm font-medium text-foreground">{name}</p>
+        {size !== undefined && (
+          <p className="text-xs text-muted-foreground">{formatBytes(size)}</p>
+        )}
+      </div>
+      {onClear && (
+        <button
+          type="button"
+          onClick={onClear}
+          aria-label="Remove file"
+          className="shrink-0 text-muted-foreground hover:text-foreground"
+        >
+          <XIcon className="size-4" />
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/ui/currency-input.tsx

@@ -0,0 +1,104 @@
+import React, { useEffect, useState } from "react";
+import { cn } from "@/lib/utils";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+
+/**
+ * Standalone currency input with a "$" prefix and thousands-separator formatting.
+ * Strips the slider and option buttons from the app's BaseMoneyInput — use this
+ * for expense row inputs or any context where just the dollar field is needed.
+ *
+ * Consumers should wrap in <Field> + <FieldLabel> / <FieldError> for label/error display.
+ */
+
+export type CurrencyInputProps = {
+  /** Current dollar value (whole dollars) */
+  value: number;
+  /** Called on blur with the parsed integer value */
+  onChange: (value: number) => void;
+  /** HTML id forwarded to the inner <input> — use for Field/label association */
+  id?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  /** Minimum allowed value (default: 0) */
+  min?: number;
+  /** When true, renders the InputGroup in its error visual state */
+  error?: boolean;
+  className?: string;
+};
+
+function formatDisplay(n: number): string {
+  return n.toLocaleString("en-AU", { maximumFractionDigits: 0 });
+}
+
+function parseRaw(raw: string): number {
+  const digits = raw.replace(/[^0-9.]/g, "");
+  const n = parseFloat(digits);
+  return isNaN(n) ? 0 : Math.round(n);
+}
+
+export function CurrencyInput({
+  value,
+  onChange,
+  id,
+  disabled = false,
+  placeholder = "0",
+  min = 0,
+  error = false,
+  className,
+}: CurrencyInputProps) {
+  const [displayValue, setDisplayValue] = useState(() =>
+    value > 0 ? formatDisplay(value) : "",
+  );
+  const [focused, setFocused] = useState(false);
+
+  // Keep display in sync when value changes externally (e.g. form reset)
+  useEffect(() => {
+    if (!focused) {
+      setDisplayValue(value > 0 ? formatDisplay(value) : "");
+    }
+  }, [value, focused]);
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    // Allow digits, comma separators, and one decimal point while typing
+    const cleaned = e.target.value.replace(/[^0-9,.]/g, "");
+    setDisplayValue(cleaned);
+  }
+
+  function handleFocus() {
+    setFocused(true);
+    // Show bare digits while editing — no commas
+    setDisplayValue(value > 0 ? String(value) : "");
+  }
+
+  function handleBlur() {
+    setFocused(false);
+    const parsed = Math.max(min, parseRaw(displayValue));
+    onChange(parsed);
+    setDisplayValue(parsed > 0 ? formatDisplay(parsed) : "");
+  }
+
+  return (
+    <InputGroup
+      className={cn(className)}
+      data-disabled={disabled ? "true" : undefined}
+    >
+      <InputGroupAddon align="inline-start">$</InputGroupAddon>
+      <InputGroupInput
+        id={id}
+        type="text"
+        inputMode="numeric"
+        value={displayValue}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        placeholder={placeholder}
+        disabled={disabled}
+        aria-invalid={error ? "true" : undefined}
+      />
+    </InputGroup>
+  );
+}