@open-mercato/core 0.6.4-develop.3929.1.fcf7afece2 → 0.6.4-develop.3944.1.4100aa7fbe

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

@@ -0,0 +1,253 @@
+"use client"
+
+import * as React from 'react'
+import { Building2, X } from 'lucide-react'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { SearchInput } from '@open-mercato/ui/primitives/search-input'
+import { useDealAssociationLookups } from '../DealForm'
+
+type AssociationOption = {
+  id: string
+  label: string
+  subtitle?: string | null
+}
+
+export type DealAssociationsFieldProps = {
+  id?: string
+  kind: 'people' | 'companies'
+  value: string[]
+  onChange: (next: string[]) => void
+  disabled?: boolean
+  labels: {
+    placeholder: string
+    empty: string
+    loading: string
+    noResults: string
+    remove: string
+    error: string
+  }
+}
+
+function sanitizeIdList(input: unknown): string[] {
+  if (!Array.isArray(input)) return []
+  const set = new Set<string>()
+  input.forEach((candidate) => {
+    if (typeof candidate !== 'string') return
+    const trimmed = candidate.trim()
+    if (!trimmed.length) return
+    set.add(trimmed)
+  })
+  return Array.from(set)
+}
+
+export function DealAssociationsField({
+  id,
+  kind,
+  value,
+  onChange,
+  disabled = false,
+  labels,
+}: DealAssociationsFieldProps) {
+  const lookups = useDealAssociationLookups()
+  const search = kind === 'people' ? lookups.searchPeople : lookups.searchCompanies
+  const fetchByIds = kind === 'people' ? lookups.fetchPeopleByIds : lookups.fetchCompaniesByIds
+
+  const [input, setInput] = React.useState('')
+  const [suggestions, setSuggestions] = React.useState<AssociationOption[]>([])
+  const [cache, setCache] = React.useState<Map<string, AssociationOption>>(() => new Map())
+  const [loading, setLoading] = React.useState(false)
+  const [error, setError] = React.useState<string | null>(null)
+
+  const normalizedValue = React.useMemo(() => sanitizeIdList(value), [value])
+
+  React.useEffect(() => {
+    if (!normalizedValue.length) return
+    const missing = normalizedValue.filter((id) => !cache.has(id))
+    if (!missing.length) return
+    let cancelled = false
+    ;(async () => {
+      try {
+        const entries = await fetchByIds(missing)
+        if (cancelled) return
+        setCache((prev) => {
+          const next = new Map(prev)
+          entries.forEach((entry) => {
+            if (entry?.id) next.set(entry.id, entry)
+          })
+          return next
+        })
+      } catch {
+        if (!cancelled) setError(labels.error)
+      }
+    })().catch(() => {
+      // The inner try/catch already surfaces failures via setError; this guards the IIFE promise only.
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [cache, fetchByIds, labels.error, normalizedValue])
+
+  React.useEffect(() => {
+    const query = input.trim()
+    // Only query once the operator starts typing. Searching on an empty string
+    // returns the first page of *every* person/company in the tenant — useless as
+    // a suggestion list and a performance trap at scale (thousands of records).
+    if (disabled || query.length === 0) {
+      setLoading(false)
+      setSuggestions([])
+      return
+    }
+    let cancelled = false
+    const handler = window.setTimeout(async () => {
+      setLoading(true)
+      try {
+        const results = await search(query)
+        if (cancelled) return
+        setSuggestions(results)
+        setCache((prev) => {
+          const next = new Map(prev)
+          results.forEach((entry) => {
+            if (entry?.id) next.set(entry.id, entry)
+          })
+          return next
+        })
+        setError(null)
+      } catch {
+        if (!cancelled) {
+          setError(labels.error)
+          setSuggestions([])
+        }
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }, 200)
+    return () => {
+      cancelled = true
+      window.clearTimeout(handler)
+    }
+  }, [disabled, input, labels.error, search])
+
+  const filteredSuggestions = React.useMemo(
+    () => suggestions.filter((option) => !normalizedValue.includes(option.id)),
+    [normalizedValue, suggestions],
+  )
+
+  const selectedOptions = React.useMemo(
+    () => normalizedValue.map((id) => cache.get(id) ?? { id, label: id }),
+    [cache, normalizedValue],
+  )
+
+  const addOption = React.useCallback(
+    (option: AssociationOption) => {
+      if (!option?.id) return
+      if (normalizedValue.includes(option.id)) return
+      onChange([...normalizedValue, option.id])
+      setCache((prev) => {
+        const next = new Map(prev)
+        next.set(option.id, option)
+        return next
+      })
+      setInput('')
+      setSuggestions([])
+    },
+    [normalizedValue, onChange],
+  )
+
+  const removeOption = React.useCallback(
+    (id: string) => {
+      onChange(normalizedValue.filter((candidate) => candidate !== id))
+    },
+    [normalizedValue, onChange],
+  )
+
+  const renderLeading = React.useCallback(
+    (option: AssociationOption) =>
+      kind === 'people' ? (
+        <Avatar label={option.label} size="xs" />
+      ) : (
+        <Building2 className="size-3.5 text-muted-foreground" aria-hidden="true" />
+      ),
+    [kind],
+  )
+
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-col gap-2 rounded-md border border-input bg-background p-2">
+        {selectedOptions.length ? (
+          <div className="flex flex-wrap gap-2">
+            {selectedOptions.map((option) => (
+              <span
+                key={option.id}
+                className="inline-flex items-center gap-1.5 rounded-md bg-muted px-2 py-1 text-xs text-foreground"
+              >
+                {renderLeading(option)}
+                <span className="truncate">{option.label}</span>
+                <IconButton
+                  type="button"
+                  variant="ghost"
+                  size="xs"
+                  aria-label={`${labels.remove} ${option.label}`}
+                  onClick={() => removeOption(option.id)}
+                  disabled={disabled}
+                >
+                  <X className="size-3" />
+                </IconButton>
+              </span>
+            ))}
+          </div>
+        ) : null}
+        <SearchInput
+          id={id}
+          size="default"
+          value={input}
+          onChange={setInput}
+          placeholder={labels.placeholder}
+          disabled={disabled}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault()
+              const nextOption = filteredSuggestions[0]
+              if (nextOption) addOption(nextOption)
+            } else if (event.key === 'Backspace' && !input.length && normalizedValue.length) {
+              removeOption(normalizedValue[normalizedValue.length - 1])
+            }
+          }}
+        />
+      </div>
+      {loading ? <div className="text-xs text-muted-foreground">{labels.loading}</div> : null}
+      {!loading && input.trim().length > 0 && filteredSuggestions.length ? (
+        <div className="flex max-h-72 flex-col gap-1 overflow-y-auto rounded-md border border-border bg-popover p-1 shadow-md">
+          {filteredSuggestions.slice(0, 8).map((option) => (
+            <Button
+              key={option.id}
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-auto justify-start px-2 py-1 text-left font-normal"
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={() => addOption(option)}
+              disabled={disabled}
+              aria-label={option.label}
+            >
+              {renderLeading(option)}
+              <span className="flex min-w-0 flex-col items-start">
+                <span className="truncate text-sm">{option.label}</span>
+                {option.subtitle ? (
+                  <span className="truncate text-xs text-muted-foreground">{option.subtitle}</span>
+                ) : null}
+              </span>
+            </Button>
+          ))}
+        </div>
+      ) : null}
+      {!loading && input.trim().length > 0 && !filteredSuggestions.length ? (
+        <div className="text-xs text-muted-foreground">{labels.noResults}</div>
+      ) : null}
+      {error ? <div className="text-xs text-status-error-text">{error}</div> : null}
+    </div>
+  )
+}
+
+export default DealAssociationsField

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

@@ -0,0 +1,72 @@
+"use client"
+
+import * as React from 'react'
+import { Users } from 'lucide-react'
+import { DealSectionCard } from './DealSectionCard'
+import { DealFormField } from './DealFormField'
+import { DealAssociationsField } from './DealAssociationsField'
+import type { Translate } from './dealFormTypes'
+
+export type DealAssociationsSectionProps = {
+  tr: Translate
+  personIds: string[]
+  companyIds: string[]
+  onPeopleChange: (next: string[]) => void
+  onCompaniesChange: (next: string[]) => void
+  disabled: boolean
+}
+
+export function DealAssociationsSection({
+  tr,
+  personIds,
+  companyIds,
+  onPeopleChange,
+  onCompaniesChange,
+  disabled,
+}: DealAssociationsSectionProps) {
+  const peopleLabels = {
+    placeholder: tr('customers.deals.create.associations.peoplePlaceholder', 'Search people by name or email…'),
+    empty: tr('customers.deals.form.people.empty', 'No people linked yet.'),
+    loading: tr('customers.deals.form.people.loading', 'Searching people…'),
+    noResults: tr('customers.deals.form.people.noResults', 'No people match your search.'),
+    remove: tr('customers.deals.form.assignees.remove', 'Remove'),
+    error: tr('customers.deals.form.people.error', 'Failed to load people.'),
+  }
+  const companyLabels = {
+    placeholder: tr('customers.deals.create.associations.companiesPlaceholder', 'Search companies by name or domain…'),
+    empty: tr('customers.deals.form.companies.empty', 'No companies linked yet.'),
+    loading: tr('customers.deals.form.companies.loading', 'Searching companies…'),
+    noResults: tr('customers.deals.form.companies.noResults', 'No companies match your search.'),
+    remove: tr('customers.deals.form.assignees.remove', 'Remove'),
+    error: tr('customers.deals.form.companies.error', 'Failed to load companies.'),
+  }
+
+  return (
+    <DealSectionCard
+      icon={Users}
+      title={tr('customers.deals.create.sections.associations.title', 'Associations')}
+      subtitle={tr('customers.deals.create.sections.associations.subtitle', 'Link people and companies to this deal')}
+    >
+      <DealFormField fieldId="personIds" label={tr('customers.people.detail.deals.fields.people', 'People')}>
+        <DealAssociationsField
+          kind="people"
+          value={personIds}
+          onChange={onPeopleChange}
+          disabled={disabled}
+          labels={peopleLabels}
+        />
+      </DealFormField>
+      <DealFormField fieldId="companyIds" label={tr('customers.people.detail.deals.fields.companies', 'Companies')}>
+        <DealAssociationsField
+          kind="companies"
+          value={companyIds}
+          onChange={onCompaniesChange}
+          disabled={disabled}
+          labels={companyLabels}
+        />
+      </DealFormField>
+    </DealSectionCard>
+  )
+}
+
+export default DealAssociationsSection

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

@@ -0,0 +1,79 @@
+"use client"
+
+import * as React from 'react'
+import { Sparkles } from 'lucide-react'
+import { DealSectionCard } from './DealSectionCard'
+import { DealTipsCard } from './DealTipsCard'
+import {
+  DealCustomAttributes,
+  type DealCustomAttributesLoadState,
+} from './DealCustomAttributes'
+import type { Translate } from './dealFormTypes'
+
+export type DealCreateSidebarProps = {
+  tr: Translate
+  customValues: Record<string, unknown>
+  onCustomChange: (key: string, value: unknown) => void
+  errors: Record<string, string>
+  disabled: boolean
+  customCount: number
+  manageHref: string
+  onCustomLoaded: (state: DealCustomAttributesLoadState) => void
+}
+
+export function DealCreateSidebar({
+  tr,
+  customValues,
+  onCustomChange,
+  errors,
+  disabled,
+  customCount,
+  manageHref,
+  onCustomLoaded,
+}: DealCreateSidebarProps) {
+  return (
+    <div className="space-y-4">
+      <DealSectionCard
+        icon={Sparkles}
+        title={tr('customers.deals.create.sections.custom.title', 'Custom attributes')}
+        subtitle={tr('customers.deals.create.sections.custom.subtitle', '{count} fields defined for this tenant', {
+          count: customCount,
+        })}
+      >
+        <DealCustomAttributes
+          values={customValues}
+          onChange={onCustomChange}
+          errors={errors}
+          disabled={disabled}
+          manageHref={manageHref}
+          labels={{
+            manage: tr('customers.deals.create.sections.custom.manage', 'Manage fields'),
+            empty: tr('customers.deals.create.sections.custom.empty', 'No custom fields defined for deals yet.'),
+            loading: tr('customers.deals.create.sections.custom.loading', 'Loading custom fields…'),
+          }}
+          onLoaded={onCustomLoaded}
+        />
+      </DealSectionCard>
+
+      <DealTipsCard
+        title={tr('customers.deals.create.tips.title', 'Tips for better deals')}
+        tips={[
+          tr(
+            'customers.deals.create.tips.item1',
+            'Use the company name + short deliverable format in the title (e.g. "Copperleaf — Q3 Renewal")',
+          ),
+          tr(
+            'customers.deals.create.tips.item2',
+            'Set probability based on pipeline stage: Qual 10-25%, Proposal 30-50%, Negotiation 50-75%, Contract 75-90%',
+          ),
+          tr(
+            'customers.deals.create.tips.item3',
+            'Link primary decision maker as first person — they get default email CC on activities',
+          ),
+        ]}
+      />
+    </div>
+  )
+}
+
+export default DealCreateSidebar

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

@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { DictionaryEntrySelect } from '@open-mercato/core/modules/dictionaries/components/DictionaryEntrySelect'
+import { useCurrencyDictionary } from '../hooks/useCurrencyDictionary'
+
+const CURRENCY_PRIORITY = ['EUR', 'USD', 'GBP', 'PLN'] as const
+
+export type DealCurrencyFieldProps = {
+  id?: string
+  value: string
+  onChange: (code: string) => void
+  disabled?: boolean
+}
+
+export function DealCurrencyField({ id, value, onChange, disabled = false }: DealCurrencyFieldProps) {
+  const t = useT()
+  const { data, error: rawError, isLoading, refetch } = useCurrencyDictionary()
+  const dictError = rawError
+    ? rawError instanceof Error
+      ? rawError.message
+      : String(rawError)
+    : null
+
+  const resolvedError = React.useMemo(() => {
+    if (dictError) return dictError
+    if (!isLoading && !data) {
+      return t('customers.deals.form.currency.missing', 'Currency dictionary is not configured yet.')
+    }
+    return null
+  }, [data, dictError, isLoading, t])
+
+  const fetchOptions = React.useCallback(async () => {
+    let payload = data ?? null
+    if (!payload) {
+      try {
+        payload = await refetch()
+      } catch (err) {
+        const message = err instanceof Error ? err.message : String(err ?? '')
+        throw new Error(message || t('customers.deals.form.currency.error', 'Failed to load currency dictionary.'))
+      }
+    }
+    if (!payload) {
+      throw new Error(t('customers.deals.form.currency.missing', 'Currency dictionary is not configured yet.'))
+    }
+    const priorityOrder = new Map<string, number>()
+    CURRENCY_PRIORITY.forEach((code, index) => priorityOrder.set(code, index))
+    const prioritized: { value: string; label: string; color: string | null; icon: string | null }[] = []
+    const remainder: { value: string; label: string; color: string | null; icon: string | null }[] = []
+    payload.entries.forEach((entry) => {
+      const code = entry.value.toUpperCase()
+      const label = entry.label && entry.label.length ? `${code} – ${entry.label}` : code
+      const option = { value: code, label, color: null, icon: null }
+      if (priorityOrder.has(code)) prioritized.push(option)
+      else remainder.push(option)
+    })
+    prioritized.sort((a, b) => priorityOrder.get(a.value)! - priorityOrder.get(b.value)!)
+    remainder.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: 'base' }))
+    return [...prioritized, ...remainder]
+  }, [data, refetch, t])
+
+  const labels = React.useMemo(
+    () => ({
+      placeholder: t('customers.deals.form.currency.placeholder', 'Select currency…'),
+      addLabel: t('customers.deals.form.currency.add', 'Add currency'),
+      dialogTitle: t('customers.deals.form.currency.dialogTitle', 'Add currency'),
+      valueLabel: t('customers.deals.form.currency.valueLabel', 'Currency code'),
+      valuePlaceholder: t('customers.deals.form.currency.valuePlaceholder', 'e.g. USD'),
+      labelLabel: t('customers.deals.form.currency.labelLabel', 'Label'),
+      labelPlaceholder: t('customers.deals.form.currency.labelPlaceholder', 'Display name shown in UI'),
+      emptyError: t('customers.deals.form.currency.error.required', 'Currency code is required.'),
+      cancelLabel: t('customers.deals.form.currency.cancel', 'Cancel'),
+      saveLabel: t('customers.deals.form.currency.save', 'Save'),
+      errorLoad: t('customers.deals.form.currency.error', 'Failed to load currency dictionary.'),
+      errorSave: t('customers.deals.form.currency.error', 'Failed to load currency dictionary.'),
+      loadingLabel: t('customers.deals.form.currency.loading', 'Loading currencies…'),
+      manageTitle: t('customers.deals.form.currency.manage', 'Manage currency dictionary'),
+    }),
+    [t],
+  )
+
+  return (
+    <div className="space-y-1">
+      <DictionaryEntrySelect
+        id={id}
+        value={value || undefined}
+        onChange={(next) => onChange(next ?? '')}
+        fetchOptions={fetchOptions}
+        labels={labels}
+        manageHref="/backend/config/dictionaries?key=currency"
+        allowInlineCreate={false}
+        allowAppearance={false}
+        selectClassName="w-full"
+        disabled={disabled}
+        showLabelInput={false}
+      />
+      {resolvedError ? (
+        <p className={cn('text-xs', dictError ? 'text-status-error-text' : 'text-muted-foreground')}>
+          {resolvedError}
+        </p>
+      ) : null}
+    </div>
+  )
+}
+
+export default DealCurrencyField

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

@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from 'react'
+import { Plus } from 'lucide-react'
+import type { CrudField } from '@open-mercato/ui/backend/CrudForm'
+import type { CustomFieldDefDto } from '@open-mercato/ui/backend/utils/customFieldDefs'
+import { fetchCustomFieldFormStructure } from '@open-mercato/ui/backend/utils/customFieldForms'
+import { LinkButton } from '@open-mercato/ui/primitives/link-button'
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { E } from '#generated/entities.ids.generated'
+import { DealCustomFieldControl } from './dealCustomFieldControl'
+
+export type DealCustomAttributesLoadState = {
+  fields: CrudField[]
+  definitions: CustomFieldDefDto[]
+}
+
+export type DealCustomAttributesProps = {
+  values: Record<string, unknown>
+  onChange: (key: string, value: unknown) => void
+  errors?: Record<string, string>
+  disabled?: boolean
+  manageHref: string
+  labels: {
+    manage: string
+    empty: string
+    loading: string
+  }
+  onLoaded?: (state: DealCustomAttributesLoadState) => void
+}
+
+function ManageFieldsLink({ href, label }: { href: string; label: string }) {
+  return (
+    <LinkButton asChild variant="gray" size="sm">
+      <a href={href} className="inline-flex items-center gap-1">
+        <Plus className="size-3.5" />
+        {label}
+      </a>
+    </LinkButton>
+  )
+}
+
+export function DealCustomAttributes({
+  values,
+  onChange,
+  errors,
+  disabled = false,
+  manageHref,
+  labels,
+  onLoaded,
+}: DealCustomAttributesProps) {
+  const [fields, setFields] = React.useState<CrudField[]>([])
+  const [isLoading, setIsLoading] = React.useState(true)
+  const onLoadedRef = React.useRef(onLoaded)
+
+  React.useEffect(() => {
+    onLoadedRef.current = onLoaded
+  }, [onLoaded])
+
+  React.useEffect(() => {
+    let cancelled = false
+    setIsLoading(true)
+    fetchCustomFieldFormStructure([E.customers.customer_deal])
+      .then((result) => {
+        if (cancelled) return
+        setFields(result.fields)
+        setIsLoading(false)
+        onLoadedRef.current?.({ fields: result.fields, definitions: result.definitions })
+      })
+      .catch(() => {
+        if (cancelled) return
+        setFields([])
+        setIsLoading(false)
+        onLoadedRef.current?.({ fields: [], definitions: [] })
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <Spinner className="size-4" />
+        {labels.loading}
+      </div>
+    )
+  }
+
+  if (fields.length === 0) {
+    return (
+      <div className="space-y-3">
+        <p className="text-sm text-muted-foreground">{labels.empty}</p>
+        <ManageFieldsLink href={manageHref} label={labels.manage} />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {fields.map((field) => (
+        <DealCustomFieldControl
+          key={field.id}
+          field={field}
+          value={values[field.id]}
+          onChange={(next) => onChange(field.id, next)}
+          error={errors?.[field.id]}
+          disabled={disabled}
+        />
+      ))}
+      <div className="pt-1">
+        <ManageFieldsLink href={manageHref} label={labels.manage} />
+      </div>
+    </div>
+  )
+}
+
+export default DealCustomAttributes