@open-mercato/core 0.6.3-develop.3894.1.352abf4240 → 0.6.3

package/src/modules/customers/components/detail/create/PipelineStageSelect.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import * as React from 'react'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
+import type { PipelineStageOption } from './useDealPipelines'
+
+export type PipelineStageSelectProps = {
+  id?: string
+  stages: PipelineStageOption[]
+  value?: string | null
+  onChange: (id: string) => void
+  disabled?: boolean
+  placeholder: string
+  formatCount: (position: number, total: number) => string
+}
+
+export function PipelineStageSelect({
+  id,
+  stages,
+  value,
+  onChange,
+  disabled = false,
+  placeholder,
+  formatCount,
+}: PipelineStageSelectProps) {
+  const selectedIndex = React.useMemo(
+    () => (value ? stages.findIndex((stage) => stage.id === value) : -1),
+    [stages, value],
+  )
+  const selectedStage = selectedIndex >= 0 ? stages[selectedIndex] : null
+
+  return (
+    <Select
+      value={typeof value === 'string' && value ? value : undefined}
+      onValueChange={(next) => onChange(next ?? '')}
+      disabled={disabled || !stages.length}
+    >
+      <SelectTrigger id={id} size="default">
+        <SelectValue placeholder={placeholder}>
+          {selectedStage ? (
+            <span className="flex min-w-0 items-center gap-2 truncate">
+              <span className="truncate">{selectedStage.label}</span>
+              <span className="text-muted-foreground">
+                {formatCount(selectedIndex + 1, stages.length)}
+              </span>
+            </span>
+          ) : null}
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        {stages.map((stage, index) => (
+          <SelectItem key={stage.id} value={stage.id}>
+            <span className="truncate">{stage.label}</span>
+            <span className="text-muted-foreground">
+              {formatCount(index + 1, stages.length)}
+            </span>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+
+export default PipelineStageSelect

package/src/modules/customers/components/detail/create/SuffixInput.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import * as React from 'react'
+import { Input } from '@open-mercato/ui/primitives/input'
+
+export type SuffixInputProps = React.ComponentPropsWithoutRef<typeof Input> & { suffix: string }
+
+export const SuffixInput = React.forwardRef<HTMLInputElement, SuffixInputProps>(
+  ({ suffix, ...props }, ref) => {
+    return (
+      <Input
+        ref={ref}
+        rightIcon={<span className="text-sm font-medium text-muted-foreground">{suffix}</span>}
+        {...props}
+      />
+    )
+  }
+)
+
+SuffixInput.displayName = 'SuffixInput'

package/src/modules/customers/components/detail/create/dealCustomFieldControl.tsx

@@ -0,0 +1,310 @@
+"use client"
+
+import * as React from 'react'
+import { format } from 'date-fns/format'
+import { parseISO } from 'date-fns/parseISO'
+import type { CrudField, CrudFieldOption } from '@open-mercato/ui/backend/CrudForm'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Textarea } from '@open-mercato/ui/primitives/textarea'
+import { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'
+import { DatePicker } from '@open-mercato/ui/primitives/date-picker'
+import { TagInput } from '@open-mercato/ui/primitives/tag-input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
+import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
+
+export type DealCustomFieldControlProps = {
+  field: CrudField
+  value: unknown
+  onChange: (value: unknown) => void
+  error?: string
+  disabled?: boolean
+}
+
+const SELECT_CLEAR_SENTINEL = '__deal_custom_field_select_clear__'
+
+function toStringArray(value: unknown): string[] {
+  if (!Array.isArray(value)) return []
+  return value.filter((item): item is string => typeof item === 'string')
+}
+
+function toDate(value: unknown): Date | null {
+  if (value instanceof Date) return value
+  if (typeof value === 'string' && value) {
+    const parsed = parseISO(value)
+    return Number.isNaN(parsed.getTime()) ? null : parsed
+  }
+  return null
+}
+
+function useResolvedOptions(field: CrudField): CrudFieldOption[] {
+  const builtin = field.type === 'custom' ? null : field
+  const staticOptions = builtin?.options
+  const loadOptions = builtin?.loadOptions
+  const [loadedOptions, setLoadedOptions] = React.useState<CrudFieldOption[]>([])
+
+  React.useEffect(() => {
+    if (staticOptions && staticOptions.length > 0) return
+    if (typeof loadOptions !== 'function') return
+    let cancelled = false
+    loadOptions()
+      .then((options) => {
+        if (!cancelled) setLoadedOptions(options)
+      })
+      .catch(() => {
+        if (!cancelled) setLoadedOptions([])
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [staticOptions, loadOptions])
+
+  if (staticOptions && staticOptions.length > 0) return staticOptions
+  return loadedOptions
+}
+
+function FieldShell({
+  label,
+  required,
+  description,
+  error,
+  children,
+}: {
+  label: string
+  required?: boolean
+  description?: React.ReactNode
+  error?: string
+  children: React.ReactNode
+}) {
+  const fieldId = React.useId()
+  const control = React.isValidElement(children)
+    ? React.cloneElement(children as React.ReactElement<{ id?: string }>, { id: fieldId })
+    : children
+  return (
+    <div className="space-y-1">
+      {label.trim().length > 0 ? (
+        <Label htmlFor={fieldId}>
+          {label}
+          {required ? <span className="text-destructive"> *</span> : null}
+        </Label>
+      ) : null}
+      {control}
+      {description ? <p className="text-xs text-muted-foreground">{description}</p> : null}
+      {error ? <p className="text-xs text-status-error-text">{error}</p> : null}
+    </div>
+  )
+}
+
+export function DealCustomFieldControl({
+  field,
+  value,
+  onChange,
+  error,
+  disabled = false,
+}: DealCustomFieldControlProps) {
+  const options = useResolvedOptions(field)
+  const ariaInvalid = error ? true : undefined
+
+  if (field.type === 'checkbox') {
+    return (
+      <div className="space-y-1">
+        <CheckboxField
+          label={field.label}
+          description={field.description}
+          checked={value === true}
+          onCheckedChange={(next) => onChange(next === true)}
+          disabled={disabled}
+          aria-invalid={ariaInvalid}
+        />
+        {error ? <p className="text-xs text-status-error-text">{error}</p> : null}
+      </div>
+    )
+  }
+
+  if (field.type === 'custom') {
+    return (
+      <FieldShell
+        label={field.label}
+        required={field.required}
+        description={field.description}
+        error={error}
+      >
+        {field.component({
+          id: field.id,
+          value,
+          error,
+          setValue: onChange,
+          disabled,
+          autoFocus: false,
+        })}
+      </FieldShell>
+    )
+  }
+
+  let control: React.ReactNode
+
+  switch (field.type) {
+    case 'number':
+      control = (
+        <Input
+          type="number"
+          inputMode="numeric"
+          value={typeof value === 'number' || typeof value === 'string' ? String(value) : ''}
+          placeholder={field.placeholder}
+          disabled={disabled}
+          aria-invalid={ariaInvalid}
+          onChange={(event) => {
+            const raw = event.target.value
+            if (raw === '') {
+              onChange(undefined)
+              return
+            }
+            const parsed = Number(raw)
+            onChange(Number.isNaN(parsed) ? raw : parsed)
+          }}
+        />
+      )
+      break
+    case 'date':
+    case 'datepicker':
+      control = (
+        <DatePicker
+          value={toDate(value)}
+          onChange={(date) => onChange(date ? format(date, 'yyyy-MM-dd') : undefined)}
+          disabled={disabled}
+          placeholder={field.placeholder}
+          aria-invalid={ariaInvalid}
+        />
+      )
+      break
+    case 'datetime':
+    case 'datetime-local':
+      control = (
+        <DatePicker
+          withTime
+          value={toDate(value)}
+          onChange={(date) => onChange(date ? date.toISOString() : undefined)}
+          disabled={disabled}
+          placeholder={field.placeholder}
+          aria-invalid={ariaInvalid}
+        />
+      )
+      break
+    case 'tags':
+      control = (
+        <TagInput
+          value={toStringArray(value)}
+          onChange={(next) => onChange(next)}
+          placeholder={field.placeholder}
+          disabled={disabled}
+          aria-invalid={ariaInvalid}
+        />
+      )
+      break
+    case 'richtext':
+      control = (
+        <Textarea
+          value={value == null ? '' : String(value)}
+          placeholder={field.placeholder}
+          disabled={disabled}
+          aria-invalid={ariaInvalid}
+          onChange={(event) => onChange(event.target.value)}
+        />
+      )
+      break
+    case 'select': {
+      if (field.multiple) {
+        const selected = toStringArray(value)
+        control = (
+          <div className="flex flex-wrap gap-3">
+            {options.map((option) => {
+              const checked = selected.includes(option.value)
+              return (
+                <label key={option.value} className="inline-flex cursor-pointer items-center gap-2">
+                  <Checkbox
+                    checked={checked}
+                    disabled={disabled}
+                    onCheckedChange={(state) => {
+                      const next = new Set(selected)
+                      if (state === true) next.add(option.value)
+                      else next.delete(option.value)
+                      onChange(Array.from(next))
+                    }}
+                  />
+                  <span className="text-sm">{option.label}</span>
+                </label>
+              )
+            })}
+          </div>
+        )
+      } else {
+        const selectedValue = Array.isArray(value)
+          ? String(value[0] ?? '')
+          : value == null
+            ? ''
+            : String(value)
+        control = (
+          <Select
+            value={selectedValue}
+            disabled={disabled}
+            onValueChange={(next) => {
+              if (!next || next === SELECT_CLEAR_SENTINEL) {
+                onChange(null)
+                return
+              }
+              onChange(next)
+            }}
+          >
+            <SelectTrigger aria-invalid={ariaInvalid}>
+              <SelectValue placeholder={field.placeholder} />
+            </SelectTrigger>
+            <SelectContent>
+              {!field.required && selectedValue ? (
+                <SelectItem value={SELECT_CLEAR_SENTINEL}>—</SelectItem>
+              ) : null}
+              {options
+                .filter((option) => option.value !== '')
+                .map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+            </SelectContent>
+          </Select>
+        )
+      }
+      break
+    }
+    case 'text':
+    default:
+      control = (
+        <Input
+          value={value == null ? '' : String(value)}
+          placeholder={field.placeholder}
+          disabled={disabled}
+          aria-invalid={ariaInvalid}
+          onChange={(event) => onChange(event.target.value)}
+        />
+      )
+      break
+  }
+
+  return (
+    <FieldShell
+      label={field.label}
+      required={field.required}
+      description={field.description}
+      error={error}
+    >
+      {control}
+    </FieldShell>
+  )
+}
+
+export default DealCustomFieldControl

package/src/modules/customers/components/detail/create/dealFormTypes.ts

@@ -0,0 +1,29 @@
+export type Translate = (key: string, fallback: string, params?: Record<string, string | number>) => string
+
+export type BaseValues = {
+  title: string
+  status: string
+  pipelineId: string
+  pipelineStageId: string
+  valueAmount: string
+  valueCurrency: string
+  probability: string
+  expectedCloseAt: string
+  description: string
+  personIds: string[]
+  companyIds: string[]
+}
+
+export const EMPTY_VALUES: BaseValues = {
+  title: '',
+  status: '',
+  pipelineId: '',
+  pipelineStageId: '',
+  valueAmount: '',
+  valueCurrency: '',
+  probability: '',
+  expectedCloseAt: '',
+  description: '',
+  personIds: [],
+  companyIds: [],
+}

package/src/modules/customers/components/detail/create/dealNumericInput.ts

@@ -0,0 +1,20 @@
+/**
+ * Input sanitizers for the deal create form's numeric fields. They guarantee the
+ * underlying state only ever holds a valid numeric string (or empty), so non-numeric
+ * input can never reach the zod schema and surface a raw "expected number" type error.
+ */
+
+/** Keep only digits and a single decimal point; strips letters, signs, and extra dots. */
+export function sanitizeAmount(raw: string): string {
+  const cleaned = raw.replace(/[^\d.]/g, '')
+  const firstDot = cleaned.indexOf('.')
+  if (firstDot === -1) return cleaned
+  return cleaned.slice(0, firstDot + 1) + cleaned.slice(firstDot + 1).replace(/\./g, '')
+}
+
+/** Digits only, clamped to 0–100, so probability is always a valid percentage. */
+export function sanitizeProbability(raw: string): string {
+  const digits = raw.replace(/\D/g, '')
+  if (!digits) return ''
+  return String(Math.min(100, Number(digits)))
+}

package/src/modules/customers/components/detail/create/useDealCustomFields.ts

@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from 'react'
+import {
+  validateValuesAgainstDefs,
+  type CustomFieldDefLike,
+} from '@open-mercato/shared/modules/entities/validation'
+import type { CrudField } from '@open-mercato/ui/backend/CrudForm'
+import type { CustomFieldDefDto } from '@open-mercato/ui/backend/utils/customFieldDefs'
+import { collectCustomFieldValues } from '@open-mercato/ui/backend/utils/customFieldValues'
+import { normalizeCustomFieldSubmitValue } from '../customFieldUtils'
+import type { DealCustomAttributesLoadState } from './DealCustomAttributes'
+import type { Translate } from './dealFormTypes'
+
+function isEmptyCustomFieldValue(field: CrudField, value: unknown): boolean {
+  if (value === undefined || value === null) return true
+  if (typeof value === 'string') return value.trim() === ''
+  if (Array.isArray(value)) return value.length === 0
+  return field.type === 'checkbox' && value !== true
+}
+
+function mapCustomDefinitionsForValidation(definitions: CustomFieldDefDto[]): CustomFieldDefLike[] {
+  return definitions.map((definition) => ({
+    key: definition.key,
+    kind: definition.kind,
+    configJson: {
+      validation: Array.isArray(definition.validation) ? definition.validation : [],
+    },
+  }))
+}
+
+export type UseDealCustomFieldsResult = {
+  customValues: Record<string, unknown>
+  customFieldsLoaded: boolean
+  customCount: number
+  handleCustomChange: (key: string, value: unknown) => void
+  handleCustomAttributesLoaded: (state: DealCustomAttributesLoadState) => void
+  validateCustomFields: (source: Record<string, unknown>) => Record<string, string>
+  collectNormalizedCustomValues: (source: Record<string, unknown>) => Record<string, unknown>
+}
+
+export function useDealCustomFields(tr: Translate): UseDealCustomFieldsResult {
+  const [customValues, setCustomValues] = React.useState<Record<string, unknown>>({})
+  const [customFields, setCustomFields] = React.useState<CrudField[]>([])
+  const [customDefinitions, setCustomDefinitions] = React.useState<CustomFieldDefDto[]>([])
+  const [customFieldsLoaded, setCustomFieldsLoaded] = React.useState(false)
+  const [customCount, setCustomCount] = React.useState(0)
+  const customDefaultsAppliedRef = React.useRef(false)
+
+  const handleCustomChange = React.useCallback((key: string, value: unknown) => {
+    setCustomValues((current) => ({ ...current, [key]: value }))
+  }, [])
+
+  const handleCustomAttributesLoaded = React.useCallback((state: DealCustomAttributesLoadState) => {
+    setCustomFields(state.fields)
+    setCustomDefinitions(state.definitions)
+    setCustomFieldsLoaded(true)
+    setCustomCount(state.fields.length)
+
+    if (customDefaultsAppliedRef.current || state.definitions.length === 0) return
+    customDefaultsAppliedRef.current = true
+    setCustomValues((current) => {
+      let changed = false
+      const next = { ...current }
+      for (const definition of state.definitions) {
+        if (definition.defaultValue === undefined || definition.defaultValue === null) continue
+        const fieldId = `cf_${definition.key}`
+        if (next[fieldId] !== undefined) continue
+        next[fieldId] = definition.defaultValue
+        changed = true
+      }
+      return changed ? next : current
+    })
+  }, [])
+
+  const collectNormalizedCustomValues = React.useCallback((source: Record<string, unknown>) =>
+    collectCustomFieldValues(source, {
+      transform: (value) => normalizeCustomFieldSubmitValue(value),
+    }), [])
+
+  const validateCustomFields = React.useCallback((source: Record<string, unknown>) => {
+    const fieldErrors: Record<string, string> = {}
+    const requiredMessage = tr('ui.forms.errors.required', 'Required')
+
+    for (const field of customFields) {
+      if (!field.required) continue
+      if (isEmptyCustomFieldValue(field, source[field.id])) {
+        fieldErrors[field.id] = requiredMessage
+      }
+    }
+
+    if (customDefinitions.length > 0) {
+      const result = validateValuesAgainstDefs(
+        collectNormalizedCustomValues(source),
+        mapCustomDefinitionsForValidation(customDefinitions),
+      )
+      if (!result.ok) {
+        for (const [fieldId, message] of Object.entries(result.fieldErrors)) {
+          if (!fieldErrors[fieldId]) fieldErrors[fieldId] = tr(message, message)
+        }
+      }
+    }
+
+    return fieldErrors
+  }, [collectNormalizedCustomValues, customDefinitions, customFields, tr])
+
+  return {
+    customValues,
+    customFieldsLoaded,
+    customCount,
+    handleCustomChange,
+    handleCustomAttributesLoaded,
+    validateCustomFields,
+    collectNormalizedCustomValues,
+  }
+}
+
+export default useDealCustomFields

package/src/modules/customers/components/detail/create/useDealPipelines.ts

@@ -0,0 +1,80 @@
+"use client"
+
+import * as React from 'react'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+
+export type PipelineOption = {
+  id: string
+  name: string
+  isDefault: boolean
+}
+
+export type PipelineStageOption = {
+  id: string
+  label: string
+  order: number
+}
+
+export type UseDealPipelinesResult = {
+  pipelines: PipelineOption[]
+  stages: PipelineStageOption[]
+  loadStages: (pipelineId: string) => Promise<void>
+}
+
+export function useDealPipelines(): UseDealPipelinesResult {
+  const [pipelines, setPipelines] = React.useState<PipelineOption[]>([])
+  const [stages, setStages] = React.useState<PipelineStageOption[]>([])
+  const mountedRef = React.useRef(true)
+
+  React.useEffect(() => {
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+    }
+  }, [])
+
+  React.useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      try {
+        const call = await apiCall<{ items: PipelineOption[] }>('/api/customers/pipelines')
+        if (cancelled || !mountedRef.current) return
+        if (call.ok && call.result?.items) {
+          setPipelines(call.result.items)
+        }
+      } catch {
+        if (!cancelled && mountedRef.current) setPipelines([])
+      }
+    })().catch(() => {
+      // The inner try/catch already resets pipelines on failure; this guards the IIFE promise only.
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const loadStages = React.useCallback(async (pipelineId: string) => {
+    if (!pipelineId) {
+      if (mountedRef.current) setStages([])
+      return
+    }
+    try {
+      const call = await apiCall<{ items: PipelineStageOption[] }>(
+        `/api/customers/pipeline-stages?pipelineId=${encodeURIComponent(pipelineId)}`,
+      )
+      if (!mountedRef.current) return
+      if (call.ok && call.result?.items) {
+        const sorted = [...call.result.items].sort((a, b) => a.order - b.order)
+        setStages(sorted)
+      } else {
+        setStages([])
+      }
+    } catch {
+      if (mountedRef.current) setStages([])
+    }
+  }, [])
+
+  return { pipelines, stages, loadStages }
+}
+
+export default useDealPipelines

package/src/modules/customers/components/formConfig.tsx

@@ -113,6 +113,7 @@ type DictionarySelectFieldProps = {
   allowAppearance?: boolean
   showManage?: boolean
   showLabelInput?: boolean
+  showActiveAppearance?: boolean
 }
 
 const emailValidationSchema = z.string().email()
@@ -141,6 +142,7 @@ export function DictionarySelectField({
   allowAppearance = false,
   showManage = false,
   showLabelInput = true,
+  showActiveAppearance = true,
 }: DictionarySelectFieldProps) {
   const t = useT()
   const queryClient = useQueryClient()
@@ -237,6 +239,7 @@ export function DictionarySelectField({
       allowAppearance={allowAppearance}
       showManage={showManage}
       showLabelInput={showLabelInput}
+      showActiveAppearance={showActiveAppearance}
     />
   )
 }