@open-mercato/core 0.5.1-develop.2663.2c29774b5b → 0.5.1-develop.2681.c559bb2bc3

package/src/modules/customers/components/detail/CompanyTagsDialog.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import { EntityTagsDialog, type EntityTagsDialogProps } from './EntityTagsDialog'
+
+type CompanyTagsDialogProps = Omit<EntityTagsDialogProps, 'entityType' | 'entityOrganizationId' | 'entityData'> & {
+  companyOrganizationId: string | null
+  companyData: EntityTagsDialogProps['entityData']
+}
+
+export function CompanyTagsDialog({
+  companyOrganizationId,
+  companyData,
+  ...props
+}: CompanyTagsDialogProps) {
+  return (
+    <EntityTagsDialog
+      {...props}
+      entityType="company"
+      entityOrganizationId={companyOrganizationId}
+      entityData={companyData}
+    />
+  )
+}

package/src/modules/customers/components/detail/ConfirmDealLostDialog.tsx

@@ -0,0 +1,210 @@
+"use client"
+
+import * as React from 'react'
+import { AlertTriangle, Check, ChevronDown } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { loadDictionaryEntriesByKey } from '@open-mercato/core/modules/dictionaries/lib/clientEntries'
+import { Alert, AlertDescription, AlertTitle } from '@open-mercato/ui/primitives/alert'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
+import { Textarea } from '@open-mercato/ui/primitives/textarea'
+
+type LossReasonOption = {
+  id: string
+  value: string
+  label: string
+  description?: string | null
+}
+
+type ConfirmDealLostDialogProps = {
+  open: boolean
+  dealTitle: string
+  dealValue?: string | null
+  companyName?: string | null
+  onClose: () => void
+  onConfirm: (input: { lossReasonId: string; lossNotes?: string }) => void | Promise<void>
+}
+
+export function ConfirmDealLostDialog({
+  open,
+  dealTitle,
+  dealValue,
+  companyName,
+  onClose,
+  onConfirm,
+}: ConfirmDealLostDialogProps) {
+  const t = useT()
+  const [lossReasonId, setLossReasonId] = React.useState('')
+  const [lossNotes, setLossNotes] = React.useState('')
+  const [lossReasons, setLossReasons] = React.useState<LossReasonOption[]>([])
+  const [reasonListOpen, setReasonListOpen] = React.useState(false)
+  const [error, setError] = React.useState('')
+
+  React.useEffect(() => {
+    if (!open) return
+    let cancelled = false
+    loadDictionaryEntriesByKey('sales.deal_loss_reason')
+      .then((items) => {
+        if (!cancelled) setLossReasons(items)
+      })
+      .catch((loadError) => {
+        console.error('customers.deals.detail.lossReasons failed', loadError)
+        if (!cancelled) setLossReasons([])
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [open])
+
+  React.useEffect(() => {
+    if (!open) return
+    setLossReasonId('')
+    setLossNotes('')
+    setReasonListOpen(false)
+    setError('')
+  }, [open])
+
+  const selectedLossReason = React.useMemo(
+    () => lossReasons.find((reason) => reason.id === lossReasonId) ?? null,
+    [lossReasonId, lossReasons],
+  )
+
+  const handleConfirm = React.useCallback(async () => {
+    if (!lossReasonId) {
+      setError(t('customers.deals.detail.lost.reasonRequired', 'Please select a loss reason'))
+      return
+    }
+    await onConfirm({
+      lossReasonId,
+      lossNotes: lossNotes.trim() || undefined,
+    })
+  }, [lossNotes, lossReasonId, onConfirm, t])
+
+  const handleKeyDown = React.useCallback((event: React.KeyboardEvent) => {
+    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+      event.preventDefault()
+      void handleConfirm()
+    }
+  }, [handleConfirm])
+
+  return (
+    <Dialog open={open} onOpenChange={(nextOpen) => { if (!nextOpen) onClose() }}>
+      <DialogContent className="overflow-hidden p-0 sm:max-w-[560px]" onKeyDown={handleKeyDown}>
+        <div className="overflow-hidden rounded-lg bg-card">
+          <DialogHeader className="border-b border-border/70 px-7 py-5">
+            <div className="flex items-start gap-4">
+              <div className="flex size-10 shrink-0 items-center justify-center rounded-md bg-destructive/10 text-destructive">
+                <AlertTriangle className="size-5" />
+              </div>
+              <div className="min-w-0">
+                <DialogTitle className="text-lg font-bold leading-none tracking-tight text-foreground">
+                  {t('customers.deals.detail.lost.title', 'Mark deal as Lost?')}
+                </DialogTitle>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {dealTitle}
+                  {dealValue ? ` · ${dealValue}` : ''}
+                  {companyName ? ` · ${companyName}` : ''}
+                </p>
+              </div>
+            </div>
+          </DialogHeader>
+
+          <div className="space-y-6 px-7 py-6">
+            <Alert variant="warning" className="rounded-md">
+              <AlertTriangle className="size-4" />
+              <AlertTitle>
+                {t('customers.deals.detail.lost.warningTitle', 'This action closes the deal')}
+              </AlertTitle>
+              <AlertDescription>
+                {t('customers.deals.detail.lost.warning', "This action sets the stage to 'Lost' and cannot be undone without 'sales.reopen' permission")}
+              </AlertDescription>
+            </Alert>
+
+            <div className="space-y-2">
+              <label className="text-sm font-semibold text-foreground">
+                {t('customers.deals.detail.lost.reasonLabel', 'Loss reason')}
+                <span className="ml-1 text-destructive">*</span>
+              </label>
+              <div className="space-y-3">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setReasonListOpen((current) => !current)}
+                  className="h-auto flex w-full items-center justify-between rounded-md border-2 border-foreground bg-background px-4 py-3 text-left"
+                >
+                  <div className="min-w-0">
+                    <div className="truncate text-base font-semibold text-foreground">
+                      {selectedLossReason?.label ?? t('customers.deals.detail.lost.reasonPlaceholder', 'Select loss reason')}
+                    </div>
+                    <div className="truncate text-sm text-muted-foreground">
+                      {selectedLossReason?.description ?? t('customers.deals.detail.lost.reasonHelp', 'Choose the closest reason from the dictionary.')}
+                    </div>
+                  </div>
+                  <ChevronDown className="ml-3 size-4 shrink-0 text-muted-foreground" />
+                </Button>
+
+                {reasonListOpen ? (
+                  <div className="overflow-hidden rounded-md border border-border/80 bg-background">
+                    {lossReasons.map((reason, index) => {
+                      const isSelected = reason.id === lossReasonId
+                      return (
+                        <Button
+                          key={reason.id}
+                          type="button"
+                          variant="ghost"
+                          onClick={() => {
+                            setLossReasonId(reason.id)
+                            setReasonListOpen(false)
+                            setError('')
+                          }}
+                          className={`h-auto flex w-full items-center justify-between rounded-none px-4 py-3 text-left ${
+                            index < lossReasons.length - 1 ? 'border-b border-border/60' : ''
+                          } ${isSelected ? 'bg-muted/60' : 'hover:bg-accent/50'}`}
+                        >
+                          <div className="min-w-0">
+                            <div className="text-base font-semibold text-foreground">{reason.label}</div>
+                            <div className="text-sm text-muted-foreground">
+                              {reason.description ?? t('customers.deals.detail.lost.reasonFallbackDescription', 'No description available.')}
+                            </div>
+                          </div>
+                          {isSelected ? (
+                            <span className="ml-3 flex size-6 shrink-0 items-center justify-center rounded-full bg-foreground text-background">
+                              <Check className="size-3.5" />
+                            </span>
+                          ) : null}
+                        </Button>
+                      )
+                    })}
+                  </div>
+                ) : null}
+              </div>
+              {error ? <p className="text-xs text-destructive">{error}</p> : null}
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-semibold text-foreground">
+                {t('customers.deals.detail.lost.notesLabel', 'Loss notes (optional)')}
+              </label>
+              <Textarea
+                value={lossNotes}
+                onChange={(event) => setLossNotes(event.target.value)}
+                placeholder={t('customers.deals.detail.lost.notesPlaceholder', 'Additional context about the loss...')}
+                rows={4}
+                className="min-h-[88px] rounded-md border-border/80 px-4 py-3 shadow-none"
+              />
+            </div>
+          </div>
+
+          <DialogFooter className="border-t border-border/70 px-7 py-4 sm:justify-end">
+            <Button type="button" variant="outline" onClick={onClose}>
+              {t('customers.deals.detail.lost.cancel', 'Cancel')}
+            </Button>
+            <Button type="button" variant="destructive" onClick={() => { void handleConfirm() }}>
+              {t('customers.deals.detail.lost.confirm', 'Mark as Lost')}
+            </Button>
+          </DialogFooter>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/modules/customers/components/detail/CreatePersonDialog.tsx

@@ -0,0 +1,178 @@
+'use client'
+
+import * as React from 'react'
+import { Building2 } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { useOrganizationScopeDetail } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
+import { CrudForm, type CrudField } from '@open-mercato/ui/backend/CrudForm'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { createCrud } from '@open-mercato/ui/backend/utils/crud'
+import { createCrudFormError } from '@open-mercato/ui/backend/utils/serverErrors'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
+import { E } from '#generated/entities.ids.generated'
+import {
+  buildPersonPayload,
+  createPersonFormFields,
+  createPersonFormGroups,
+  createPersonFormSchema,
+  type PersonFormValues,
+} from '../formConfig'
+
+type GuardedMutationRunner = <T,>(
+  operation: () => Promise<T>,
+  mutationPayload?: Record<string, unknown>,
+) => Promise<T>
+
+export type CreatedPersonSummary = {
+  id: string
+  displayName: string
+  companyId: string
+  companyName: string
+}
+
+interface CreatePersonDialogProps {
+  open: boolean
+  onClose: () => void
+  companyId: string
+  companyName: string
+  runGuardedMutation?: GuardedMutationRunner
+  onPersonCreated?: (created?: CreatedPersonSummary) => void
+}
+
+export function CreatePersonDialog({
+  open,
+  onClose,
+  companyId,
+  companyName,
+  runGuardedMutation,
+  onPersonCreated,
+}: CreatePersonDialogProps) {
+  const t = useT()
+  const { organizationId } = useOrganizationScopeDetail()
+  const [formInstanceKey, setFormInstanceKey] = React.useState(0)
+
+  React.useEffect(() => {
+    if (open) {
+      setFormInstanceKey((current) => current + 1)
+    }
+  }, [open])
+
+  const formSchema = React.useMemo(() => createPersonFormSchema(), [])
+
+  const fields = React.useMemo<CrudField[]>(() => {
+    return createPersonFormFields(t)
+      .filter((field) => field.id !== 'addresses')
+      .map((field) => {
+        if (field.id !== 'companyEntityId') {
+          return field
+        }
+        return {
+          id: field.id,
+          label: field.label,
+          type: 'custom',
+          layout: field.layout,
+          required: field.required,
+          description: field.description,
+          disabled: field.disabled,
+          readOnly: true,
+          component: () => (
+            <div className="space-y-2">
+              <div className="flex min-h-9 items-center gap-2 rounded-md border bg-muted/40 px-3 py-2 text-sm">
+                <Building2 className="size-4 text-muted-foreground" />
+                <span className="font-medium text-foreground">{companyName}</span>
+                <Badge variant="secondary" className="ml-auto rounded-full px-2 py-0 text-xs font-semibold">
+                  {t('customers.people.createDialog.auto', 'auto')}
+                </Badge>
+              </div>
+            </div>
+          ),
+        } satisfies CrudField
+      })
+  }, [companyName, t])
+
+  const groups = React.useMemo(
+    () => createPersonFormGroups(t).filter((group) => group.id !== 'addresses'),
+    [t],
+  )
+
+  const initialValues = React.useMemo<Partial<PersonFormValues>>(
+    () => ({
+      companyEntityId: companyId,
+    }),
+    [companyId],
+  )
+
+  const handleSubmit = React.useCallback(async (values: PersonFormValues) => {
+    let payload: Record<string, unknown>
+    try {
+      payload = buildPersonPayload(values, organizationId)
+    } catch (err) {
+      if (err instanceof Error && err.message === 'DISPLAY_NAME_REQUIRED') {
+        const message = t('customers.people.form.displayName.error')
+        throw createCrudFormError(message, { displayName: message })
+      }
+      throw err
+    }
+
+    const operation = () => createCrud<{ id?: string; entityId?: string }>('customers/people', payload)
+    const response = runGuardedMutation
+      ? await runGuardedMutation(operation, payload)
+      : await operation()
+
+    flash(t('customers.people.createDialog.success', 'Person created and linked to company'), 'success')
+    const newId = response?.result?.id ?? response?.result?.entityId ?? ''
+    const displayNameFromPayload = typeof payload.displayName === 'string' ? payload.displayName : ''
+    onPersonCreated?.({
+      id: newId,
+      displayName: displayNameFromPayload,
+      companyId,
+      companyName,
+    })
+    onClose()
+  }, [companyId, companyName, onClose, onPersonCreated, organizationId, runGuardedMutation, t])
+
+  const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+      const form = event.currentTarget.querySelector('form')
+      if (form) {
+        event.preventDefault()
+        form.requestSubmit()
+      }
+    }
+  }, [])
+
+  return (
+    <Dialog open={open} onOpenChange={(nextOpen) => { if (!nextOpen) onClose() }}>
+      <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[1028px]" onKeyDown={handleKeyDown}>
+        <DialogHeader>
+          <DialogTitle>{t('customers.people.createDialog.title', 'Add new person')}</DialogTitle>
+          <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+            <Building2 className="size-3.5" />
+            <span>{companyName}</span>
+            <span className="text-xs">·</span>
+            <span>{t('customers.people.createDialog.autoLink', 'auto-linked to company')}</span>
+          </div>
+        </DialogHeader>
+
+        <CrudForm<PersonFormValues>
+          key={`${companyId}:${formInstanceKey}`}
+          embedded
+          entityIds={[E.customers.customer_entity, E.customers.customer_person_profile]}
+          fields={fields}
+          groups={groups}
+          initialValues={initialValues}
+          submitLabel={t('customers.people.createDialog.submit', 'Create person')}
+          schema={formSchema}
+          onSubmit={handleSubmit}
+          extraActions={(
+            <Button type="button" variant="outline" onClick={onClose}>
+              {t('customers.people.createDialog.cancel', 'Cancel')}
+            </Button>
+          )}
+        />
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/modules/customers/components/detail/DealClosureActionBar.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from 'react'
+import { ArrowRight, Check, Info, Trophy, X } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+
+type DealClosureActionBarProps = {
+  closureOutcome: string | null
+  onWon: () => void
+  onLost: () => void
+  disabled?: boolean
+  embedded?: boolean
+}
+
+export function DealClosureActionBar({
+  closureOutcome,
+  onWon,
+  onLost,
+  disabled = false,
+  embedded = false,
+}: DealClosureActionBarProps) {
+  const t = useT()
+
+  if (closureOutcome) return null
+
+  return (
+    <div className={embedded ? '' : 'rounded-2xl border bg-card px-5 py-4'}>
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
+          <Info className="size-4 text-muted-foreground" />
+          <span>{t('customers.deals.detail.closure.prompt', 'Close deal — choose outcome')}</span>
+          <span className="text-border">·</span>
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          <Button
+            type="button"
+            size="sm"
+            onClick={onWon}
+            disabled={disabled}
+            className="h-11 rounded-lg bg-status-success-icon px-5 text-sm font-semibold text-white hover:bg-status-success-icon/90"
+          >
+            <Trophy className="size-4" />
+            {t('customers.deals.detail.closure.won', 'Won')}
+            <Check className="size-4 stroke-[2.5]" />
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            onClick={onLost}
+            disabled={disabled}
+            className="h-11 rounded-lg border-status-error-border px-5 text-sm font-semibold text-status-error-text hover:bg-status-error-bg"
+          >
+            <X className="size-4 stroke-[2.5]" />
+            {t('customers.deals.detail.closure.lost', 'Lost')}
+            <ArrowRight className="size-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}