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

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

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'