@open-mercato/core 0.6.3-develop.3635.1.e4a05c16e8 → 0.6.3-develop.3653.1.b8558737ae

package/src/modules/customers/backend/customers/deals/pipeline/components/ActivityComposerDialog.tsx

@@ -0,0 +1,277 @@
+"use client"
+
+import * as React from 'react'
+import { Mail, Phone, StickyNote, type LucideIcon } from 'lucide-react'
+import { z } from 'zod'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@open-mercato/ui/primitives/dialog'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { CrudForm, type CrudField } from '@open-mercato/ui/backend/CrudForm'
+import { createCrud } from '@open-mercato/ui/backend/utils/crud'
+import { createCrudFormError } from '@open-mercato/ui/backend/utils/serverErrors'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { translateWithFallback } from '@open-mercato/shared/lib/i18n/translate'
+
+export type ActivityComposerType = 'call' | 'email' | 'note'
+
+export type ActivityComposerContext = {
+  dealId: string
+  dealTitle: string
+  type: ActivityComposerType
+  entityId: string
+}
+
+type ActivityComposerDialogProps = {
+  open: boolean
+  context: ActivityComposerContext | null
+  onClose: () => void
+  onCreated: () => void
+}
+
+type ActivityComposerFormValues = {
+  title: string
+  phoneNumber: string
+  body: string
+}
+
+const ACTIVITY_CONTEXT_ID = 'customers-deals-kanban:activity-composer'
+
+const TYPE_META: Record<
+  ActivityComposerType,
+  {
+    titleKey: string
+    titleFallback: string
+    interactionType: string
+    icon: LucideIcon
+  }
+> = {
+  call: {
+    titleKey: 'customers.deals.kanban.activityComposer.call',
+    titleFallback: 'Log a call',
+    interactionType: 'call',
+    icon: Phone,
+  },
+  email: {
+    titleKey: 'customers.deals.kanban.activityComposer.email',
+    titleFallback: 'Send email',
+    interactionType: 'email',
+    icon: Mail,
+  },
+  note: {
+    titleKey: 'customers.deals.kanban.activityComposer.note',
+    titleFallback: 'Add a note',
+    interactionType: 'note',
+    icon: StickyNote,
+  },
+}
+
+export function ActivityComposerDialog({
+  open,
+  context,
+  onClose,
+  onCreated,
+}: ActivityComposerDialogProps): React.ReactElement | null {
+  const t = useT()
+  // Re-mount CrudForm whenever the dialog opens, or when the deal/type changes — these
+  // identify what we're logging activity FOR, and CrudForm's internal state must reset.
+  const [formInstanceKey, setFormInstanceKey] = React.useState(0)
+  React.useEffect(() => {
+    if (open) setFormInstanceKey((current) => current + 1)
+  }, [open])
+
+  const { runMutation, retryLastMutation } = useGuardedMutation<{
+    formId: string
+    resourceKind: string
+    resourceId: string
+    retryLastMutation: () => Promise<boolean>
+  }>({
+    contextId: ACTIVITY_CONTEXT_ID,
+    blockedMessage: translateWithFallback(t, 'ui.forms.flash.saveBlocked', 'Save blocked by validation'),
+  })
+
+  // Email mode shows the field as "Subject" (see TYPE_META + the field config below), so
+  // the refine error must reference "subject" instead of "title" to stay coherent. Call
+  // and Note modes keep the "title or body" copy that matches their Subject-labelled field.
+  const eitherRequiredMessage = React.useMemo(
+    () =>
+      context?.type === 'email'
+        ? translateWithFallback(
+            t,
+            'customers.deals.kanban.activityComposer.required.email',
+            'Add a subject or body before saving.',
+          )
+        : translateWithFallback(
+            t,
+            'customers.deals.kanban.activityComposer.required.titleOrBody',
+            'Add a title or body before saving.',
+          ),
+    [context?.type, t],
+  )
+
+  const formSchema = React.useMemo(
+    () =>
+      z
+        .object({
+          title: z.string().optional(),
+          phoneNumber: z.string().optional(),
+          body: z.string().optional(),
+        })
+        // Activity must carry at least a title OR a body — purely empty saves are
+        // useless and they previously surfaced as a confusing inline error.
+        .refine(
+          (values) => (values.title?.trim().length || values.body?.trim().length) ? true : false,
+          {
+            message: eitherRequiredMessage,
+            path: ['title'],
+          },
+        ),
+    [eitherRequiredMessage],
+  ) as unknown as z.ZodType<ActivityComposerFormValues>
+
+  const initialValues = React.useMemo<Partial<ActivityComposerFormValues>>(
+    () => ({ title: '', phoneNumber: '', body: '' }),
+    [],
+  )
+
+  const isCall = context?.type === 'call'
+
+  const fields = React.useMemo<CrudField[]>(() => {
+    const list: CrudField[] = [
+      {
+        // CrudForm auto-focuses the first field on mount; explicit `autoFocus` is rejected
+        // by CrudBuiltinField's type and would shadow CrudForm's own focus management.
+        id: 'title',
+        label: translateWithFallback(t, 'customers.deals.kanban.activityComposer.title', 'Subject'),
+        type: 'text',
+        placeholder: translateWithFallback(
+          t,
+          'customers.deals.kanban.activityComposer.title.placeholder',
+          'Short summary (optional)',
+        ),
+      },
+    ]
+    if (isCall) {
+      list.push({
+        id: 'phoneNumber',
+        label: translateWithFallback(t, 'customers.deals.kanban.activityComposer.phone', 'Phone number'),
+        type: 'text',
+        placeholder: '+48 ...',
+      })
+    }
+    list.push({
+      id: 'body',
+      label: translateWithFallback(t, 'customers.deals.kanban.activityComposer.body', 'Notes'),
+      type: 'textarea',
+      rows: 4,
+      placeholder: translateWithFallback(
+        t,
+        'customers.deals.kanban.activityComposer.body.placeholder',
+        'What happened? Markdown supported.',
+      ),
+    })
+    return list
+  }, [isCall, t])
+
+  const handleSubmit = React.useCallback(
+    async (values: ActivityComposerFormValues) => {
+      if (!context) return
+      const trimmedTitle = (values.title ?? '').trim()
+      const trimmedBody = (values.body ?? '').trim()
+      if (!trimmedTitle.length && !trimmedBody.length) {
+        // Zod refine already handles this, but we surface a field-level error too so the
+        // inline indicator stays anchored on the Subject input.
+        throw createCrudFormError(eitherRequiredMessage, { title: eitherRequiredMessage })
+      }
+      const meta = TYPE_META[context.type]
+      const payload: Record<string, unknown> = {
+        entityId: context.entityId,
+        interactionType: meta.interactionType,
+        dealId: context.dealId,
+        status: 'planned',
+      }
+      if (trimmedTitle.length) payload.title = trimmedTitle
+      if (trimmedBody.length) payload.body = trimmedBody
+      if (context.type === 'call' && (values.phoneNumber ?? '').trim().length) {
+        payload.phoneNumber = values.phoneNumber!.trim()
+      }
+      const operation = () =>
+        createCrud('customers/interactions', payload, {
+          errorMessage: translateWithFallback(
+            t,
+            'customers.deals.kanban.activityComposer.error',
+            'Failed to save activity.',
+          ),
+        })
+      await runMutation({
+        operation,
+        context: {
+          formId: ACTIVITY_CONTEXT_ID,
+          resourceKind: 'customers.interaction',
+          resourceId: context.dealId,
+          retryLastMutation,
+        },
+      })
+      flash(
+        translateWithFallback(t, 'customers.deals.kanban.activityComposer.success', 'Activity saved.'),
+        'success',
+      )
+      onCreated()
+      onClose()
+    },
+    [context, eitherRequiredMessage, onClose, onCreated, retryLastMutation, runMutation, t],
+  )
+
+  if (!context) return null
+  const meta = TYPE_META[context.type]
+  const Icon = meta.icon
+  const dialogTitle = translateWithFallback(t, meta.titleKey, meta.titleFallback)
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) onClose()
+      }}
+    >
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Icon className="size-4" aria-hidden="true" />
+            {dialogTitle}
+          </DialogTitle>
+          <DialogDescription>
+            {translateWithFallback(
+              t,
+              'customers.deals.kanban.activityComposer.context',
+              'Deal: {title}',
+              { title: context.dealTitle },
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <CrudForm<ActivityComposerFormValues>
+          key={`${context.dealId}:${context.type}:${formInstanceKey}`}
+          embedded
+          fields={fields}
+          initialValues={initialValues}
+          schema={formSchema}
+          submitLabel={translateWithFallback(
+            t,
+            'customers.deals.kanban.activityComposer.submit',
+            'Save activity',
+          )}
+          onSubmit={handleSubmit}
+        />
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default ActivityComposerDialog

package/src/modules/customers/backend/customers/deals/pipeline/components/AddStageDialog.tsx

@@ -0,0 +1,425 @@
+"use client"
+
+import * as React from 'react'
+import { z } from 'zod'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@open-mercato/ui/primitives/dialog'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { CrudForm, type CrudField } from '@open-mercato/ui/backend/CrudForm'
+import { createCrud } from '@open-mercato/ui/backend/utils/crud'
+import { createCrudFormError } from '@open-mercato/ui/backend/utils/serverErrors'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { translateWithFallback } from '@open-mercato/shared/lib/i18n/translate'
+
+const ADD_STAGE_CONTEXT_ID = 'customers-deals-kanban:add-stage'
+
+// Stage color palette — semantic tone identifiers matching Lane.tsx's ACCENT_TONE_CLASS
+// map. We switched from arbitrary hex values to canonical tones (success / warning / info
+// / error / neutral / brand / pink) so the picker can't silently fall through to gray
+// when the implicit hex→tone mapping doesn't recognise a value. Empty string = no color
+// (lane falls back to the position-based rotation). Forward-only migration 2026-05-19
+// backfills existing hex values to their nearest tone.
+const TONE_OPTIONS = [
+  {
+    value: '',
+    swatchClass: 'border border-dashed border-border',
+    labelKey: 'customers.deals.kanban.addStage.color.none',
+    labelFallback: 'No color',
+  },
+  {
+    value: 'success',
+    swatchClass: 'bg-status-success-icon',
+    labelKey: 'customers.deals.kanban.addStage.color.success',
+    labelFallback: 'Green',
+  },
+  {
+    value: 'warning',
+    swatchClass: 'bg-status-warning-icon',
+    labelKey: 'customers.deals.kanban.addStage.color.warning',
+    labelFallback: 'Amber',
+  },
+  {
+    value: 'info',
+    swatchClass: 'bg-status-info-icon',
+    labelKey: 'customers.deals.kanban.addStage.color.info',
+    labelFallback: 'Blue',
+  },
+  {
+    value: 'error',
+    swatchClass: 'bg-status-error-icon',
+    labelKey: 'customers.deals.kanban.addStage.color.error',
+    labelFallback: 'Red',
+  },
+  {
+    value: 'neutral',
+    swatchClass: 'bg-status-neutral-icon',
+    labelKey: 'customers.deals.kanban.addStage.color.neutral',
+    labelFallback: 'Gray',
+  },
+  {
+    value: 'brand',
+    swatchClass: 'bg-brand-violet',
+    labelKey: 'customers.deals.kanban.addStage.color.brand',
+    labelFallback: 'Violet',
+  },
+  {
+    value: 'pink',
+    swatchClass: 'bg-status-pink-icon',
+    labelKey: 'customers.deals.kanban.addStage.color.pink',
+    labelFallback: 'Pink',
+  },
+] as const
+
+/**
+ * Identifier values for the "Position" picker:
+ *   - `end` — append after every existing stage (the default; matches the previous
+ *     always-at-end behavior so the dialog stays familiar)
+ *   - `start` — insert at order 0; existing stages shift right
+ *   - `after:<stageId>` — insert directly after the given stage; everything to its right shifts
+ *
+ * We use a single-string discriminated value rather than a separate "mode" + "afterId"
+ * pair because CrudForm's built-in `select` field type expects scalar option values, and
+ * the backend payload computation is trivial off this single string.
+ */
+const POSITION_END = 'end' as const
+const POSITION_START = 'start' as const
+const POSITION_AFTER_PREFIX = 'after:'
+
+export type AddStageContext = {
+  pipelineId: string
+  pipelineName: string
+  /**
+   * Snapshot of every stage already in the pipeline, ordered by their `order` field.
+   * Drives the "Position" picker. `order` is the server-side position used to build
+   * the create payload (we send `existingOrder + 1` for "after this stage").
+   */
+  existingStages: ReadonlyArray<{ id: string; label: string; order: number }>
+}
+
+type AddStageDialogProps = {
+  open: boolean
+  context: AddStageContext | null
+  onClose: () => void
+  onCreated: () => void
+}
+
+type AddStageFormValues = {
+  label: string
+  color: string
+  position: string
+}
+
+/**
+ * Resolve the picker's discriminated string to the integer `order` we send to the API.
+ * Returns `undefined` when the operator picked "At end" — the backend treats undefined
+ * as "append" so the legacy default behavior is preserved bit-for-bit.
+ */
+function resolveInsertOrder(
+  position: string,
+  existingStages: ReadonlyArray<{ id: string; label: string; order: number }>,
+): number | undefined {
+  if (position === POSITION_END || position === '') return undefined
+  if (position === POSITION_START) return 0
+  if (position.startsWith(POSITION_AFTER_PREFIX)) {
+    const afterId = position.slice(POSITION_AFTER_PREFIX.length)
+    const idx = existingStages.findIndex((stage) => stage.id === afterId)
+    if (idx < 0) return undefined
+    // Insert position is the existing stage's order + 1; the backend will shift the
+    // remainder of the stages by +1 to keep ordering dense and unique.
+    return existingStages[idx].order + 1
+  }
+  return undefined
+}
+
+export function AddStageDialog({
+  open,
+  context,
+  onClose,
+  onCreated,
+}: AddStageDialogProps): React.ReactElement | null {
+  const t = useT()
+  // Re-mount CrudForm whenever the dialog opens so cleared state is consistently fresh and
+  // any stale field errors from a previous open don't carry over.
+  const [formInstanceKey, setFormInstanceKey] = React.useState(0)
+  React.useEffect(() => {
+    if (open) setFormInstanceKey((current) => current + 1)
+  }, [open])
+
+  const { runMutation, retryLastMutation } = useGuardedMutation<{
+    formId: string
+    resourceKind: string
+    retryLastMutation: () => Promise<boolean>
+  }>({
+    contextId: ADD_STAGE_CONTEXT_ID,
+    blockedMessage: translateWithFallback(t, 'ui.forms.flash.saveBlocked', 'Save blocked by validation'),
+  })
+
+  const labelRequiredMessage = translateWithFallback(
+    t,
+    'customers.deals.kanban.addStage.label.required',
+    'Stage name is required.',
+  )
+
+  // Cast widens to AddStageFormValues so CrudForm's TValues generic stays exact — Zod's
+  // inferred type is structurally identical but the generic parameters carry extra
+  // metadata that doesn't match `z.ZodType<TValues>` literally.
+  const formSchema = React.useMemo(
+    () =>
+      z.object({
+        label: z.string().trim().min(1, labelRequiredMessage),
+        color: z.string().optional(),
+        position: z.string().optional(),
+      }) as unknown as z.ZodType<AddStageFormValues>,
+    [labelRequiredMessage],
+  )
+
+  const positionOptions = React.useMemo(() => {
+    const existingStages = context?.existingStages ?? []
+    const opts: Array<{ value: string; label: string }> = [
+      {
+        value: POSITION_END,
+        label: translateWithFallback(
+          t,
+          'customers.deals.kanban.addStage.position.end',
+          'At the end (default)',
+        ),
+      },
+      {
+        value: POSITION_START,
+        label: translateWithFallback(
+          t,
+          'customers.deals.kanban.addStage.position.start',
+          'At the start',
+        ),
+      },
+    ]
+    for (const stage of existingStages) {
+      opts.push({
+        value: `${POSITION_AFTER_PREFIX}${stage.id}`,
+        label: translateWithFallback(
+          t,
+          'customers.deals.kanban.addStage.position.after',
+          'After {label}',
+          { label: stage.label },
+        ),
+      })
+    }
+    return opts
+  }, [context?.existingStages, t])
+
+  const fields = React.useMemo<CrudField[]>(
+    () => [
+      {
+        // CrudForm auto-focuses the first field of the first group on mount, so we don't
+        // need an explicit `autoFocus: true` here — and adding one would be a type error
+        // because `autoFocus` is only valid on CrudCustomFieldRenderProps.
+        id: 'label',
+        label: translateWithFallback(t, 'customers.deals.kanban.addStage.label', 'Stage name'),
+        type: 'text',
+        required: true,
+        placeholder: translateWithFallback(
+          t,
+          'customers.deals.kanban.addStage.label.placeholder',
+          'e.g. Discovery',
+        ),
+      },
+      {
+        // Custom inline radio-style list instead of a Radix Select — when the dialog sits
+        // near the bottom of the viewport, Radix's Select dropdown clips to the available
+        // vertical space (`--radix-select-content-available-height`), which can leave only
+        // 1–2 visible options and hide the rest behind a small scroll affordance the
+        // operator doesn't notice. Rendering the picker inline inside the dialog body
+        // gives it a deterministic max-height + clearly scrollable area, and "After {label}"
+        // entries are always visible without portal clipping.
+        id: 'position',
+        label: translateWithFallback(
+          t,
+          'customers.deals.kanban.addStage.position',
+          'Position in pipeline',
+        ),
+        type: 'custom',
+        description: translateWithFallback(
+          t,
+          'customers.deals.kanban.addStage.position.help',
+          'Choose where the new stage appears on the kanban. Existing stages after the chosen position shift one step to the right.',
+        ),
+        component: ({ value, setValue }) => {
+          const current = typeof value === 'string' && value.length > 0 ? value : POSITION_END
+          return (
+            <div className="flex max-h-52 flex-col gap-1 overflow-y-auto rounded-md border border-input bg-card p-1">
+              {positionOptions.map((option) => {
+                const selected = current === option.value
+                return (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    key={option.value}
+                    type="button"
+                    onClick={() => setValue(option.value)}
+                    aria-pressed={selected}
+                    className={`flex items-center justify-between gap-2 rounded-sm px-3 py-2 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${
+                      selected
+                        ? 'bg-muted font-medium text-foreground'
+                        : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground'
+                    }`}
+                  >
+                    <span className="flex-1 truncate">{option.label}</span>
+                    <span
+                      className={`inline-flex size-4 shrink-0 items-center justify-center rounded-full border ${
+                        selected ? 'border-primary bg-primary' : 'border-input'
+                      }`}
+                      aria-hidden="true"
+                    >
+                      {selected ? (
+                        <span className="size-1.5 rounded-full bg-primary-foreground" />
+                      ) : null}
+                    </span>
+                  </Button>
+                )
+              })}
+            </div>
+          )
+        },
+      },
+      {
+        // Custom render — built-in `select` can't render a swatch alongside each label.
+        // Each swatch uses the same DS class the lane bar renders, so the picker is a
+        // true preview of the kanban appearance instead of a separate hex translation.
+        id: 'color',
+        label: translateWithFallback(t, 'customers.deals.kanban.addStage.color', 'Color'),
+        type: 'custom',
+        component: ({ value, setValue }) => {
+          const current = typeof value === 'string' ? value : ''
+          return (
+            <div className="flex flex-wrap gap-2">
+              {TONE_OPTIONS.map((option) => {
+                const selected = current === option.value
+                const label = translateWithFallback(t, option.labelKey, option.labelFallback)
+                return (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    key={option.value || 'none'}
+                    type="button"
+                    onClick={() => setValue(option.value)}
+                    aria-pressed={selected}
+                    title={label}
+                    className={`inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${
+                      selected
+                        ? 'border-primary bg-muted text-foreground'
+                        : 'border-input bg-card text-muted-foreground hover:bg-muted hover:text-foreground'
+                    }`}
+                  >
+                    <span
+                      className={`size-3 rounded-sm ${option.swatchClass}`}
+                      aria-hidden="true"
+                    />
+                    <span>{label}</span>
+                  </Button>
+                )
+              })}
+            </div>
+          )
+        },
+      },
+    ],
+    [positionOptions, t],
+  )
+
+  const initialValues = React.useMemo<Partial<AddStageFormValues>>(
+    () => ({ label: '', color: '', position: POSITION_END }),
+    [],
+  )
+
+  const handleSubmit = React.useCallback(
+    async (values: AddStageFormValues) => {
+      if (!context) return
+      const trimmedLabel = values.label.trim()
+      if (!trimmedLabel.length) {
+        // Zod schema should already catch this — but we re-verify defensively because the
+        // Zod check uses `trim().min(1)` and the field renders trimmed values consistently.
+        throw createCrudFormError(labelRequiredMessage, { label: labelRequiredMessage })
+      }
+      const payload: Record<string, unknown> = {
+        pipelineId: context.pipelineId,
+        label: trimmedLabel,
+      }
+      if (values.color) payload.color = values.color
+      const insertOrder = resolveInsertOrder(values.position ?? POSITION_END, context.existingStages)
+      // Only send `order` when the operator explicitly chose a non-default position. Letting
+      // it stay undefined preserves the legacy "append to end" behavior on the backend
+      // (and keeps payloads clean / debugger-friendly for typical add flows).
+      if (insertOrder !== undefined) payload.order = insertOrder
+      const operation = () =>
+        createCrud('customers/pipeline-stages', payload, {
+          errorMessage: translateWithFallback(
+            t,
+            'customers.deals.kanban.addStage.error',
+            'Failed to add stage.',
+          ),
+        })
+      await runMutation({
+        operation,
+        context: {
+          formId: ADD_STAGE_CONTEXT_ID,
+          resourceKind: 'customers.pipeline_stage',
+          retryLastMutation,
+        },
+      })
+      flash(translateWithFallback(t, 'customers.deals.kanban.addStage.success', 'Stage added.'), 'success')
+      onCreated()
+      onClose()
+    },
+    [context, labelRequiredMessage, onClose, onCreated, retryLastMutation, runMutation, t],
+  )
+
+  if (!context) return null
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) onClose()
+      }}
+    >
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>
+            {translateWithFallback(t, 'customers.deals.kanban.addStage.title', 'New stage')}
+          </DialogTitle>
+          <DialogDescription>
+            {translateWithFallback(
+              t,
+              'customers.deals.kanban.addStage.context',
+              'Pipeline: {pipeline}',
+              { pipeline: context.pipelineName },
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <CrudForm<AddStageFormValues>
+          key={`${context.pipelineId}:${formInstanceKey}`}
+          embedded
+          fields={fields}
+          initialValues={initialValues}
+          schema={formSchema}
+          submitLabel={translateWithFallback(
+            t,
+            'customers.deals.kanban.addStage.submit',
+            'Add stage',
+          )}
+          onSubmit={handleSubmit}
+        />
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default AddStageDialog