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

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

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

@@ -0,0 +1,171 @@
+"use client"
+
+import * as React from 'react'
+import { format } from 'date-fns/format'
+import { parseISO } from 'date-fns/parseISO'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Textarea } from '@open-mercato/ui/primitives/textarea'
+import { DatePicker } from '@open-mercato/ui/primitives/date-picker'
+import { DictionarySelectField } from '../../formConfig'
+import { createDictionarySelectLabels } from '../utils'
+import { DealFormField } from './DealFormField'
+import { PipelineSelect } from './PipelineSelect'
+import { PipelineStageSelect } from './PipelineStageSelect'
+import { SuffixInput } from './SuffixInput'
+import { DealCurrencyField } from './DealCurrencyField'
+import { sanitizeAmount, sanitizeProbability } from './dealNumericInput'
+import type { BaseValues } from './dealFormTypes'
+import type { PipelineOption, PipelineStageOption } from './useDealPipelines'
+
+type Translate = (key: string, fallback: string, params?: Record<string, string | number>) => string
+
+export type DealDetailsFieldsProps = {
+  values: BaseValues
+  errors: Record<string, string>
+  isSubmitting: boolean
+  patch: (partial: Partial<BaseValues>) => void
+  onPipelineChange: (id: string) => void
+  pipelines: PipelineOption[]
+  stages: PipelineStageOption[]
+  statusLabels: ReturnType<typeof createDictionarySelectLabels>
+  tr: Translate
+}
+
+function toDate(value: string): Date | null {
+  if (!value) return null
+  const parsed = parseISO(value)
+  return Number.isNaN(parsed.getTime()) ? null : parsed
+}
+
+export function DealDetailsFields({
+  values,
+  errors,
+  isSubmitting,
+  patch,
+  onPipelineChange,
+  pipelines,
+  stages,
+  statusLabels,
+  tr,
+}: DealDetailsFieldsProps) {
+  return (
+    <>
+      <DealFormField
+        fieldId="title"
+        label={tr('customers.deals.create.fields.title', 'Deal title')}
+        required
+        hint={tr('customers.deals.create.hints.title', 'Short, descriptive name shown on pipeline cards')}
+        error={errors.title}
+      >
+        <Input
+          value={values.title}
+          onChange={(event) => patch({ title: event.target.value })}
+          aria-invalid={errors.title ? true : undefined}
+          disabled={isSubmitting}
+        />
+      </DealFormField>
+
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <DealFormField fieldId="status" label={tr('customers.people.detail.deals.fields.status', 'Status')}>
+          <DictionarySelectField
+            kind="deal-statuses"
+            value={values.status || undefined}
+            onChange={(next) => patch({ status: next ?? '' })}
+            labels={statusLabels}
+            selectClassName="w-full"
+            showActiveAppearance={false}
+          />
+        </DealFormField>
+        <DealFormField fieldId="pipelineId" label={tr('customers.people.detail.deals.fields.pipeline', 'Pipeline')}>
+          <PipelineSelect
+            pipelines={pipelines}
+            value={values.pipelineId}
+            onChange={onPipelineChange}
+            disabled={isSubmitting}
+            placeholder={tr('customers.deals.form.pipeline.placeholder', 'Select pipeline…')}
+          />
+        </DealFormField>
+      </div>
+
+      <DealFormField
+        fieldId="pipelineStageId"
+        label={tr('customers.people.detail.deals.fields.pipelineStage', 'Pipeline stage')}
+        hint={tr('customers.deals.create.hints.pipelineStage', 'Stages depend on the selected pipeline')}
+      >
+        <PipelineStageSelect
+          stages={stages}
+          value={values.pipelineStageId}
+          onChange={(id) => patch({ pipelineStageId: id })}
+          disabled={isSubmitting || !values.pipelineId}
+          placeholder={tr('customers.deals.form.pipelineStage.placeholder', 'Select stage…')}
+          formatCount={(position, total) =>
+            tr('customers.deals.create.fields.stageOf', '· stage {position} of {total}', { position, total })
+          }
+        />
+      </DealFormField>
+
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <DealFormField
+          fieldId="valueAmount"
+          label={tr('customers.deals.create.fields.valueAmount', 'Deal value')}
+          hint={tr('customers.deals.create.hints.valueAmount', 'Potential revenue from this opportunity')}
+          error={errors.valueAmount}
+        >
+          <SuffixInput
+            suffix={values.valueCurrency}
+            inputMode="decimal"
+            value={values.valueAmount}
+            onChange={(event) => patch({ valueAmount: sanitizeAmount(event.target.value) })}
+            placeholder="0"
+            aria-invalid={errors.valueAmount ? true : undefined}
+            disabled={isSubmitting}
+          />
+        </DealFormField>
+        <DealFormField fieldId="valueCurrency" label={tr('customers.people.detail.deals.fields.valueCurrency', 'Currency')}>
+          <DealCurrencyField
+            value={values.valueCurrency}
+            onChange={(code) => patch({ valueCurrency: code })}
+            disabled={isSubmitting}
+          />
+        </DealFormField>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <DealFormField
+          fieldId="probability"
+          label={tr('customers.deals.create.fields.probability', 'Probability')}
+          hint={tr('customers.deals.create.hints.probability', '0 – 100%, used for weighted pipeline value')}
+          error={errors.probability}
+        >
+          <SuffixInput
+            suffix="%"
+            inputMode="numeric"
+            value={values.probability}
+            onChange={(event) => patch({ probability: sanitizeProbability(event.target.value) })}
+            placeholder="0"
+            aria-invalid={errors.probability ? true : undefined}
+            disabled={isSubmitting}
+          />
+        </DealFormField>
+        <DealFormField fieldId="expectedCloseAt" label={tr('customers.deals.create.fields.expectedCloseAt', 'Expected close date')}>
+          <DatePicker
+            value={toDate(values.expectedCloseAt)}
+            onChange={(date) => patch({ expectedCloseAt: date ? format(date, 'yyyy-MM-dd') : '' })}
+            disabled={isSubmitting}
+            placeholder={tr('customers.deals.create.fields.datePlaceholder', 'Pick a date')}
+          />
+        </DealFormField>
+      </div>
+
+      <DealFormField fieldId="description" label={tr('customers.people.detail.deals.fields.description', 'Description')}>
+        <Textarea
+          value={values.description}
+          onChange={(event) => patch({ description: event.target.value })}
+          disabled={isSubmitting}
+        />
+      </DealFormField>
+    </>
+  )
+}
+
+export default DealDetailsFields

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

@@ -0,0 +1,39 @@
+"use client"
+
+import * as React from 'react'
+import { Label } from '@open-mercato/ui/primitives/label'
+
+export type DealFormFieldProps = {
+  label: string
+  /**
+   * Stable field key exposed as `data-crud-field-id` and used as the control's `id`.
+   * Lets Playwright target the control via the project's `data-crud-field-id` convention
+   * (see .ai/lessons.md). Falls back to a generated id for label/control association only.
+   */
+  fieldId?: string
+  required?: boolean
+  hint?: string
+  error?: string
+  children: React.ReactNode
+}
+
+export function DealFormField({ label, fieldId, required, hint, error, children }: DealFormFieldProps) {
+  const generatedId = React.useId()
+  const controlId = fieldId ?? generatedId
+  const control = React.isValidElement(children)
+    ? React.cloneElement(children as React.ReactElement<{ id?: string }>, { id: controlId })
+    : children
+  return (
+    <div className="space-y-2" data-crud-field-id={fieldId}>
+      <Label htmlFor={controlId}>
+        {label}
+        {required ? <span className="text-destructive"> *</span> : null}
+      </Label>
+      {control}
+      {hint ? <p className="text-xs text-muted-foreground">{hint}</p> : null}
+      {error ? <p className="text-xs text-status-error-text">{error}</p> : null}
+    </div>
+  )
+}
+
+export default DealFormField

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

@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+export type DealSectionCardProps = {
+  icon: React.ComponentType<{ className?: string }>
+  title: string
+  subtitle?: React.ReactNode
+  actions?: React.ReactNode
+  children: React.ReactNode
+  className?: string
+}
+
+export function DealSectionCard({
+  icon: Icon,
+  title,
+  subtitle,
+  actions,
+  children,
+  className,
+}: DealSectionCardProps) {
+  return (
+    <section className={cn('rounded-lg border border-border bg-card shadow-sm p-6 space-y-6', className)}>
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex min-w-0 items-center gap-3">
+          <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-brand-violet/10">
+            <Icon className="size-4 text-brand-violet" />
+          </div>
+          <div className="flex min-w-0 flex-col gap-0.5">
+            <p className="text-base font-semibold text-foreground">{title}</p>
+            {subtitle ? <p className="text-xs text-muted-foreground">{subtitle}</p> : null}
+          </div>
+        </div>
+        {actions ? <div className="flex shrink-0 items-center gap-2">{actions}</div> : null}
+      </div>
+      <div className="space-y-4">{children}</div>
+    </section>
+  )
+}

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

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from 'react'
+import { Wand2 } from 'lucide-react'
+
+export type DealTipsCardProps = {
+  title: string
+  tips: string[]
+}
+
+export function DealTipsCard({ title, tips }: DealTipsCardProps) {
+  return (
+    <div className="rounded-lg border-l-4 border-status-info-border bg-status-info-bg px-5 py-4 space-y-3">
+      <div className="flex items-center gap-2">
+        <Wand2 className="size-4 text-status-info-icon" />
+        <p className="text-sm font-semibold text-status-info-text">{title}</p>
+      </div>
+      {tips.map((tip, index) => (
+        <div key={`${tip}-${index}`} className="flex items-start gap-2">
+          <span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-status-info-icon" />
+          <p className="text-xs text-muted-foreground">{tip}</p>
+        </div>
+      ))}
+    </div>
+  )
+}

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

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from 'react'
+import { Flag } from 'lucide-react'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectTriggerLeading,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
+import type { PipelineOption } from './useDealPipelines'
+
+export type PipelineSelectProps = {
+  id?: string
+  pipelines: PipelineOption[]
+  value?: string | null
+  onChange: (id: string) => void
+  disabled?: boolean
+  placeholder: string
+}
+
+export function PipelineSelect({
+  id,
+  pipelines,
+  value,
+  onChange,
+  disabled = false,
+  placeholder,
+}: PipelineSelectProps) {
+  return (
+    <Select
+      value={typeof value === 'string' && value ? value : undefined}
+      onValueChange={(next) => onChange(next ?? '')}
+      disabled={disabled}
+    >
+      <SelectTrigger id={id} size="default">
+        <SelectTriggerLeading>
+          <Flag className="size-4 text-muted-foreground" aria-hidden="true" />
+        </SelectTriggerLeading>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {pipelines.map((pipeline) => (
+          <SelectItem key={pipeline.id} value={pipeline.id}>
+            {pipeline.name}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+
+export default PipelineSelect