@fayz-ai/plugin-shop 0.9.0 → 0.10.0

package/src/views/ChannelsPage.tsx

@@ -1,274 +0,0 @@
-import React from 'react'
-import { Globe, MessageCircle, Camera, Music, ShoppingBag, MapPin, Link2, Plus, ExternalLink, Trash2, Check, X } from 'lucide-react'
-import { Button, Input } from '@fayz-ai/ui'
-import type { ShopProvider, SalesChannel, SalesChannelKind } from '@fayz-ai/shop'
-import { getShopProvider } from '@fayz-ai/shop'
-import type { ShopProviderResolver } from '../ShopPage'
-
-// ---------------------------------------------------------------------------
-// Canais de venda — the store's points of sale, Shopify-style. The online_store
-// channel points at the merchant's fayz storefront; the rest are external links
-// the merchant maintains (WhatsApp, Instagram, TikTok Shop…). Every enabled
-// channel with a URL also surfaces as an external link in the left menu (see
-// the "Canais de venda" nav group), so this page is where they are configured.
-// ---------------------------------------------------------------------------
-
-interface KindMeta {
-  label: string
-  icon: React.ComponentType<{ className?: string }>
-  hint: string
-  placeholder: string
-}
-
-const KIND_META: Record<SalesChannelKind, KindMeta> = {
-  online_store: { label: 'Loja Online', icon: Globe, hint: 'Seu storefront fayz — a vitrine pública da loja.', placeholder: 'https://minhaloja.com.br/' },
-  whatsapp:     { label: 'WhatsApp',    icon: MessageCircle, hint: 'Link direto para o WhatsApp Business.', placeholder: 'https://wa.me/5521999999999' },
-  instagram:    { label: 'Instagram',  icon: Camera, hint: 'Perfil ou loja no Instagram.', placeholder: 'https://instagram.com/sualoja' },
-  tiktok_shop:  { label: 'TikTok Shop', icon: Music, hint: 'Sua vitrine no TikTok Shop.', placeholder: 'https://shop.tiktok.com/@sualoja' },
-  marketplace:  { label: 'Marketplace', icon: ShoppingBag, hint: 'Mercado Livre, Amazon, Shopee…', placeholder: 'https://…' },
-  physical:     { label: 'Loja Física', icon: MapPin, hint: 'Endereço ou ponto de venda físico.', placeholder: 'https://maps.google.com/…' },
-  custom:       { label: 'Outro canal', icon: Link2, hint: 'Qualquer outro ponto de venda com um link.', placeholder: 'https://…' },
-}
-
-const ADDABLE_KINDS: SalesChannelKind[] = ['whatsapp', 'instagram', 'tiktok_shop', 'marketplace', 'physical', 'custom']
-
-function resolve(resolver?: ShopProviderResolver): ShopProvider {
-  return typeof resolver === 'function' ? resolver() : resolver ?? getShopProvider()
-}
-
-// Let any runtime nav contributor (e.g. the app's ChannelsNav) refresh the
-// sidebar the moment channels change here, without coupling the two.
-function notifyChannelsChanged() {
-  if (typeof window !== 'undefined') window.dispatchEvent(new Event('fayz:channels-changed'))
-}
-
-export interface ChannelsPageProps {
-  resolveProvider?: ShopProviderResolver
-}
-
-export function ChannelsPage({ resolveProvider }: ChannelsPageProps) {
-  const provider = React.useMemo(() => resolve(resolveProvider), [resolveProvider])
-  const supported = typeof provider.listSalesChannels === 'function'
-
-  const [channels, setChannels] = React.useState<SalesChannel[]>([])
-  const [loading, setLoading] = React.useState(true)
-  const [adding, setAdding] = React.useState<SalesChannelKind | null>(null)
-
-  const reload = React.useCallback(async () => {
-    if (!provider.listSalesChannels) { setLoading(false); return }
-    setLoading(true)
-    try {
-      const rows = await provider.listSalesChannels()
-      // Guarantee a Loja Online row exists so the storefront link is always
-      // configurable — seed one on first visit if the store has none.
-      if (!rows.some((c) => c.kind === 'online_store') && provider.createSalesChannel) {
-        await provider.createSalesChannel({ kind: 'online_store', label: 'Loja Online', enabled: true, position: 0 })
-        setChannels(await provider.listSalesChannels())
-      } else {
-        setChannels(rows)
-      }
-    } finally {
-      setLoading(false)
-    }
-  }, [provider])
-
-  React.useEffect(() => { void reload() }, [reload])
-
-  const patch = async (id: string, input: Parameters<NonNullable<ShopProvider['updateSalesChannel']>>[1]) => {
-    if (!provider.updateSalesChannel) return
-    const updated = await provider.updateSalesChannel(id, input)
-    setChannels((prev) => prev.map((c) => (c.id === id ? updated : c)))
-    notifyChannelsChanged()
-  }
-
-  const remove = async (id: string) => {
-    if (!provider.deleteSalesChannel) return
-    await provider.deleteSalesChannel(id)
-    setChannels((prev) => prev.filter((c) => c.id !== id))
-    notifyChannelsChanged()
-  }
-
-  const add = async (kind: SalesChannelKind, label: string, url: string) => {
-    if (!provider.createSalesChannel) return
-    const created = await provider.createSalesChannel({ kind, label: label || KIND_META[kind].label, url: url || null, enabled: true, position: channels.length })
-    setChannels((prev) => [...prev, created])
-    setAdding(null)
-    notifyChannelsChanged()
-  }
-
-  if (!supported) {
-    return (
-      <div className="mx-auto max-w-4xl p-6">
-        <h1 className="text-xl font-semibold text-foreground">Canais de venda</h1>
-        <p className="mt-2 text-sm text-muted-foreground">
-          Este provedor de loja ainda não expõe canais de venda.
-        </p>
-      </div>
-    )
-  }
-
-  const online = channels.find((c) => c.kind === 'online_store')
-  const others = channels.filter((c) => c.kind !== 'online_store')
-
-  return (
-    <div className="mx-auto max-w-4xl p-6">
-      <div className="mb-6">
-        <h1 className="text-xl font-semibold text-foreground">Canais de venda</h1>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Onde sua loja vende. A Loja Online é o seu storefront fayz; os demais são links que aparecem no menu lateral.
-        </p>
-      </div>
-
-      {loading ? (
-        <p className="text-sm text-muted-foreground">Carregando…</p>
-      ) : (
-        <div className="space-y-6">
-          {online && <OnlineStoreCard channel={online} onSave={(url) => patch(online.id, { url })} onToggle={(enabled) => patch(online.id, { enabled })} />}
-
-          <div>
-            <div className="mb-2 flex items-center justify-between">
-              <h2 className="text-sm font-semibold text-foreground">Outros canais</h2>
-            </div>
-            <div className="space-y-2">
-              {others.map((c) => (
-                <ChannelRow key={c.id} channel={c} onSave={(url) => patch(c.id, { url })} onToggle={(enabled) => patch(c.id, { enabled })} onRemove={() => remove(c.id)} />
-              ))}
-              {others.length === 0 && (
-                <p className="rounded-card border border-dashed border-border p-4 text-sm text-muted-foreground">
-                  Nenhum canal adicional ainda. Adicione WhatsApp, Instagram, TikTok Shop e outros pontos de venda.
-                </p>
-              )}
-            </div>
-
-            {adding ? (
-              <AddChannelForm kind={adding} onCancel={() => setAdding(null)} onAdd={(label, url) => add(adding, label, url)} onKind={setAdding} />
-            ) : (
-              <div className="mt-3 flex flex-wrap gap-2">
-                {ADDABLE_KINDS.map((k) => {
-                  const Icon = KIND_META[k].icon
-                  return (
-                    <Button key={k} variant="outline" size="sm" onClick={() => setAdding(k)}>
-                      <Icon className="mr-1.5 h-3.5 w-3.5" /> {KIND_META[k].label}
-                    </Button>
-                  )
-                })}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-function OnlineStoreCard({ channel, onSave, onToggle }: { channel: SalesChannel; onSave: (url: string | null) => void; onToggle: (enabled: boolean) => void }) {
-  const [url, setUrl] = React.useState(channel.url ?? '')
-  const dirty = (channel.url ?? '') !== url
-  const meta = KIND_META.online_store
-  return (
-    <div className="rounded-card border border-border bg-card p-5">
-      <div className="flex items-start gap-3">
-        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10">
-          <meta.icon className="h-5 w-5 text-primary" />
-        </div>
-        <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2">
-            <span className="font-semibold text-foreground">Loja Online</span>
-            <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${channel.enabled ? 'bg-emerald-100 text-emerald-800' : 'bg-muted text-muted-foreground'}`}>
-              {channel.enabled ? 'Ativa' : 'Inativa'}
-            </span>
-          </div>
-          <p className="mt-0.5 text-sm text-muted-foreground">{meta.hint}</p>
-
-          <div className="mt-3 flex flex-col gap-2 sm:flex-row sm:items-center">
-            <Input value={url} placeholder={meta.placeholder} onChange={(e) => setUrl(e.target.value)} className="flex-1" />
-            <div className="flex gap-2">
-              <Button size="sm" disabled={!dirty} onClick={() => onSave(url.trim() || null)}>Salvar</Button>
-              <Button size="sm" variant="outline" disabled={!channel.url} onClick={() => channel.url && window.open(channel.url, '_blank', 'noopener,noreferrer')}>
-                <ExternalLink className="mr-1.5 h-3.5 w-3.5" /> Ver loja
-              </Button>
-            </div>
-          </div>
-          <div className="mt-3">
-            <button type="button" onClick={() => onToggle(!channel.enabled)} className="text-xs font-medium text-muted-foreground hover:text-foreground">
-              {channel.enabled ? 'Desativar canal' : 'Ativar canal'}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function ChannelRow({ channel, onSave, onToggle, onRemove }: { channel: SalesChannel; onSave: (url: string | null) => void; onToggle: (enabled: boolean) => void; onRemove: () => void }) {
-  const [url, setUrl] = React.useState(channel.url ?? '')
-  const [editing, setEditing] = React.useState(false)
-  const meta = KIND_META[channel.kind] ?? KIND_META.custom
-  const Icon = meta.icon
-  return (
-    <div className="rounded-card border border-border bg-card p-3">
-      <div className="flex items-center gap-3">
-        <div className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-full ${channel.enabled ? 'bg-primary/10' : 'bg-muted'}`}>
-          <Icon className={`h-4 w-4 ${channel.enabled ? 'text-primary' : 'text-muted-foreground'}`} />
-        </div>
-        <div className="min-w-0 flex-1">
-          <p className="truncate text-sm font-medium text-foreground">{channel.label}</p>
-          {editing ? (
-            <Input value={url} placeholder={meta.placeholder} onChange={(e) => setUrl(e.target.value)} className="mt-1 h-8" />
-          ) : (
-            <p className="truncate text-xs text-muted-foreground">{channel.url || 'Sem link configurado'}</p>
-          )}
-        </div>
-        <div className="flex shrink-0 items-center gap-1">
-          {editing ? (
-            <>
-              <Button size="sm" variant="ghost" onClick={() => { onSave(url.trim() || null); setEditing(false) }}><Check className="h-4 w-4" /></Button>
-              <Button size="sm" variant="ghost" onClick={() => { setUrl(channel.url ?? ''); setEditing(false) }}><X className="h-4 w-4" /></Button>
-            </>
-          ) : (
-            <>
-              {channel.url && (
-                <Button size="sm" variant="ghost" onClick={() => window.open(channel.url!, '_blank', 'noopener,noreferrer')}><ExternalLink className="h-4 w-4" /></Button>
-              )}
-              <button type="button" onClick={() => onToggle(!channel.enabled)} title={channel.enabled ? 'Desativar' : 'Ativar'} className={`rounded-full px-2 py-0.5 text-xs font-medium ${channel.enabled ? 'bg-emerald-100 text-emerald-800' : 'bg-muted text-muted-foreground'}`}>
-                {channel.enabled ? 'Ativo' : 'Inativo'}
-              </button>
-              <Button size="sm" variant="ghost" onClick={() => setEditing(true)}>Editar</Button>
-              <Button size="sm" variant="ghost" onClick={onRemove}><Trash2 className="h-4 w-4 text-red-500" /></Button>
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function AddChannelForm({ kind, onKind, onCancel, onAdd }: { kind: SalesChannelKind; onKind: (k: SalesChannelKind) => void; onCancel: () => void; onAdd: (label: string, url: string) => void }) {
-  const meta = KIND_META[kind]
-  const [label, setLabel] = React.useState(meta.label)
-  const [url, setUrl] = React.useState('')
-  React.useEffect(() => { setLabel(KIND_META[kind].label) }, [kind])
-  return (
-    <div className="mt-3 rounded-card border border-border bg-card p-4">
-      <div className="mb-3 flex flex-wrap gap-2">
-        {ADDABLE_KINDS.map((k) => {
-          const Icon = KIND_META[k].icon
-          return (
-            <button key={k} type="button" onClick={() => onKind(k)} className={`flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium ${k === kind ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:text-foreground'}`}>
-              <Icon className="h-3.5 w-3.5" /> {KIND_META[k].label}
-            </button>
-          )
-        })}
-      </div>
-      <p className="mb-2 text-xs text-muted-foreground">{meta.hint}</p>
-      <div className="flex flex-col gap-2 sm:flex-row">
-        <Input value={label} placeholder="Nome do canal" onChange={(e) => setLabel(e.target.value)} className="sm:w-48" />
-        <Input value={url} placeholder={meta.placeholder} onChange={(e) => setUrl(e.target.value)} className="flex-1" />
-      </div>
-      <div className="mt-3 flex gap-2">
-        <Button size="sm" onClick={() => onAdd(label, url)}><Plus className="mr-1.5 h-3.5 w-3.5" /> Adicionar</Button>
-        <Button size="sm" variant="outline" onClick={onCancel}>Cancelar</Button>
-      </div>
-    </div>
-  )
-}

package/src/views/OrderDetailView.tsx

@@ -1,319 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import {
-  adminNavigateTo, PersonLink,
-  OrderDetailView as SharedOrderDetailView, OrderDetailSkeleton, OrderDetailBlock, OrderDetailRow,
-  type OrderDetailData, type OrderDetailInstallment, type OrderDetailTone,
-} from '@fayz-ai/saas'
-import { shopCustomerLookup } from './customerLookup'
-import type { Order, ShopProvider } from '@fayz-ai/shop'
-import { getSupabaseClientOptional } from '@fayz-ai/core'
-
-/** A shipment as stored in public.fulfillments (0018). */
-type Fulfillment = {
-  id: string
-  status: string
-  carrier: string | null
-  service: string | null
-  tracking_code: string | null
-  tracking_url: string | null
-  shipped_at: string | null
-  estimated_delivery_at: string | null
-  delivered_at: string | null
-}
-
-type Bill = {
-  id: string
-  amount: number
-  paid_amount: number | null
-  status: string
-  due_date: string
-  installment_number: number | null
-}
-type Receivable = {
-  balance: { amount: number; paid: number; balance: number; status: string; reference_number: string | null }
-  bills: Bill[]
-}
-
-const money = (v: number, currency = 'BRL') =>
-  new Intl.NumberFormat('pt-BR', { style: 'currency', currency }).format(Number(v) || 0)
-const dateTime = (iso: string) =>
-  new Intl.DateTimeFormat('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }).format(new Date(iso))
-const dateOnly = (iso: string) => new Date(iso).toLocaleDateString('pt-BR')
-
-const PAYMENT_LABEL: Record<string, string> = {
-  pix: 'Pix', credit_card: 'Cartão de crédito', debit_card: 'Cartão de débito',
-  boleto: 'Boleto', cash: 'Dinheiro', other: 'Outro',
-}
-const LABEL: Record<string, string> = {
-  paid: 'Pago', pending: 'Aguardando pagamento', refunded: 'Estornado',
-  partially_refunded: 'Estorno parcial', voided: 'Cancelado',
-  fulfilled: 'Enviado', unfulfilled: 'Não enviado', partially_fulfilled: 'Envio parcial',
-  open: 'Aberto', cancelled: 'Cancelado', archived: 'Arquivado',
-}
-const RECEIVABLE_LABEL: Record<string, string> = {
-  open: 'Em aberto', partial: 'Parcialmente recebido', paid: 'Recebido', overdue: 'Vencido', cancelled: 'Cancelado',
-}
-const SHIPMENT_LABEL: Record<string, string> = {
-  pending: 'Aguardando coleta', in_transit: 'Em trânsito', delivered: 'Entregue',
-  failed: 'Falhou', returned: 'Devolvido', cancelled: 'Cancelado',
-}
-
-/** Map a shop/receivable status string to the shared component's tone. */
-function toneOf(value: string): OrderDetailTone {
-  switch (value) {
-    case 'paid': case 'fulfilled': case 'delivered': return 'success'
-    case 'pending': case 'partial': case 'partially_fulfilled': case 'open': case 'in_transit': return 'warning'
-    case 'refunded': case 'partially_refunded': case 'voided': case 'cancelled': case 'overdue': case 'failed': case 'returned': return 'destructive'
-    default: return 'muted'
-  }
-}
-
-/** Small inline badge for the shop-specific blocks (Entrega/Histórico). */
-function InlineBadge({ value }: { value: string }) {
-  const tone = toneOf(value)
-  const cls: Record<OrderDetailTone, string> = {
-    success: 'bg-emerald-100 text-emerald-800', warning: 'bg-amber-100 text-amber-800',
-    destructive: 'bg-red-100 text-red-700', info: 'bg-sky-100 text-sky-800', muted: 'bg-muted text-muted-foreground',
-  }
-  return <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${cls[tone]}`}>{LABEL[value] ?? value}</span>
-}
-
-function deliveryFromNotes(notes: string | null): string | null {
-  if (!notes) return null
-  const match = notes.match(/entrega:\s*(.+)/i)
-  return (match?.[1] ?? '').trim() || null
-}
-
-// Cache por id (fora do componente) — trocar de aba remonta a view; sem cache
-// isso refaz o getOrder (skeleton + request) toda vez. Cache-first evita o refetch;
-// "Registrar recebimento" atualiza o cache.
-const shopOrderCache = new Map<string, Order>()
-const shopShipmentsCache = new Map<string, Fulfillment[]>()
-const shopReceivableCache = new Map<string, Receivable | null>()
-
-export function OrderDetailView({ orderId, provider, onBack }: {
-  orderId: string
-  provider: () => ShopProvider
-  onBack: () => void
-}) {
-  const [order, setOrder] = useState<Order | null>(() => shopOrderCache.get(orderId) ?? null)
-  const [shipments, setShipments] = useState<Fulfillment[]>(() => shopShipmentsCache.get(orderId) ?? [])
-  const [loading, setLoading] = useState(() => !shopOrderCache.has(orderId))
-  const [error, setError] = useState<string | null>(null)
-  const [confirming, setConfirming] = useState(false)
-  const [confirmError, setConfirmError] = useState<string | null>(null)
-  const [receivable, setReceivable] = useState<Receivable | null>(() => shopReceivableCache.get(orderId) ?? null)
-
-  useEffect(() => {
-    let cancelled = false
-    const cached = shopOrderCache.get(orderId)
-    if (cached) { setOrder(cached); setLoading(false); return () => { cancelled = true } } // cache hit → sem request
-    setLoading(true); setError(null)
-    provider().getOrder(orderId)
-      .then((o) => { if (!cancelled) { if (o) shopOrderCache.set(orderId, o); setOrder(o) } })
-      .catch((err: unknown) => { if (!cancelled) setError(err instanceof Error ? err.message : String(err)) })
-      .finally(() => { if (!cancelled) setLoading(false) })
-    return () => { cancelled = true }
-  }, [orderId, provider])
-
-  useEffect(() => {
-    let cancelled = false
-    const db = getSupabaseClientOptional() as unknown as { from: (t: string) => any } | null
-    if (!db) return
-    if (shopShipmentsCache.has(orderId)) return () => { cancelled = true } // cache hit → sem request
-    db.from('fulfillments').select('*').eq('order_id', orderId).order('created_at', { ascending: false })
-      .then(({ data }: { data: Fulfillment[] | null }) => { if (!cancelled) { shopShipmentsCache.set(orderId, data ?? []); setShipments(data ?? []) } })
-    return () => { cancelled = true }
-  }, [orderId])
-
-  // The order does not decide whether it was paid — the receivable does. Keep this
-  // hook ABOVE the early returns (hook order must be stable).
-  useEffect(() => {
-    let cancelled = false
-    const db = getSupabaseClientOptional() as unknown as { from: (t: string) => any } | null
-    if (!db) return
-    if (shopReceivableCache.has(orderId)) { setReceivable(shopReceivableCache.get(orderId) ?? null); return () => { cancelled = true } } // cache hit → sem request
-    void (async () => {
-      const [balance, bills] = await Promise.all([
-        db.from('v_invoice_balances').select('*').eq('invoice_id', orderId).maybeSingle(),
-        db.from('plg_financial_movements').select('*').eq('invoice_id', orderId).eq('movement_kind', 'bill').order('installment_number', { ascending: true }),
-      ])
-      if (cancelled || !balance?.data) return
-      const rec = { balance: balance.data, bills: bills?.data ?? [] }
-      shopReceivableCache.set(orderId, rec)
-      setReceivable(rec)
-    })()
-    return () => { cancelled = true }
-  }, [orderId, confirming])
-
-  if (loading) return <OrderDetailSkeleton />
-  if (error) {
-    return (
-      <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
-        <p className="font-medium">Não foi possível carregar o pedido.</p>
-        <p className="mt-1 text-red-700">{error}</p>
-      </div>
-    )
-  }
-  if (!order) return <div className="py-12 text-center text-sm text-muted-foreground">Pedido não encontrado.</div>
-
-  const cur = order.currency
-  const delivery = deliveryFromNotes(order.notes)
-  const addr = order.shippingAddress
-
-  async function registerReceipt() {
-    if (!order) return
-    shopReceivableCache.delete(order.id) // pagamento muda o recebível → força refetch
-    setConfirming(true); setConfirmError(null)
-    try {
-      const fresh = (await provider().confirmPayment?.(order.id)) ?? (await provider().getOrder(order.id))
-      if (fresh) { shopOrderCache.set(order.id, fresh); setOrder(fresh) } // atualiza o cache
-    } catch (err: unknown) {
-      setConfirmError(err instanceof Error ? err.message : String(err))
-    } finally { setConfirming(false) }
-  }
-
-  const installments: OrderDetailInstallment[] = (receivable && receivable.bills.length > 1)
-    ? receivable.bills.map((b) => ({
-        number: b.installment_number ?? 0,
-        amount: `${money(Number(b.paid_amount ?? 0), cur)} / ${money(Number(b.amount), cur)}`,
-        status: RECEIVABLE_LABEL[b.status] ?? b.status,
-        statusTone: toneOf(b.status),
-        dueDate: `vence ${dateOnly(b.due_date)}`,
-      }))
-    : []
-
-  const data: OrderDetailData = {
-    title: `Pedido #${order.orderNumber}`,
-    subtitle: dateTime(order.createdAt),
-    badges: [
-      { label: LABEL[order.financialStatus] ?? order.financialStatus, tone: toneOf(order.financialStatus) },
-      { label: LABEL[order.fulfillmentStatus] ?? order.fulfillmentStatus, tone: toneOf(order.fulfillmentStatus) },
-    ],
-    customer: { name: order.customerName, email: order.customerEmail },
-    customerNode: (
-      <div className="space-y-1 text-sm">
-        {order.customerId ? (
-          <PersonLink
-            personId={order.customerId}
-            name={order.customerName ?? order.customerEmail ?? 'Cliente'}
-            lookup={shopCustomerLookup(provider)}
-            profileHref={`#/customers/${order.customerId}`}
-            className="font-medium"
-          />
-        ) : (
-          <p className="font-medium">{order.customerName ?? '—'}</p>
-        )}
-        {order.customerEmail && <p className="text-muted-foreground">{order.customerEmail}</p>}
-        {!order.customerId && <p className="text-xs text-muted-foreground">Compra sem cadastro — não há ficha de cliente para abrir.</p>}
-      </div>
-    ),
-    items: order.items.map((it) => ({
-      id: it.id, name: it.name, description: it.sku, imageUrl: it.imageUrl,
-      quantity: it.quantity, unitPrice: money(it.unitPrice, cur), total: money(it.total, cur),
-    })),
-    totals: [
-      { label: 'Subtotal', value: money(order.subtotal, cur) },
-      ...(order.discountTotal > 0 ? [{ label: `Desconto${order.discountCode ? ` (${order.discountCode})` : ''}`, value: `− ${money(order.discountTotal, cur)}`, muted: true }] : []),
-      { label: 'Entrega', value: money(order.shippingTotal, cur) },
-      { label: 'Impostos', value: money(order.taxTotal, cur) },
-      { label: 'Total', value: money(order.total, cur), strong: true },
-    ],
-    paymentMethod: order.paymentMethodKind ? (PAYMENT_LABEL[order.paymentMethodKind] ?? order.paymentMethodKind) : undefined,
-    paidAt: order.paidAt ? dateTime(order.paidAt) : undefined,
-    receivable: receivable ? {
-      referenceNumber: receivable.balance.reference_number ?? undefined,
-      statusBadge: { label: RECEIVABLE_LABEL[receivable.balance.status] ?? receivable.balance.status, tone: toneOf(receivable.balance.status) },
-      rows: [
-        { label: 'Faturado', value: money(receivable.balance.amount, cur) },
-        { label: 'Recebido', value: money(receivable.balance.paid, cur) },
-        { label: 'Saldo', value: money(receivable.balance.balance, cur), strong: true },
-      ],
-      installments,
-      actions: (
-        <>
-          {receivable.balance.balance > 0 && receivable.balance.status !== 'cancelled' && (
-            <button type="button" onClick={registerReceipt} disabled={confirming} data-testid="order-register-receipt"
-              className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition hover:opacity-90 disabled:opacity-60">
-              {confirming ? 'Registrando…' : 'Registrar recebimento'}
-            </button>
-          )}
-          <button type="button" onClick={() => adminNavigateTo('/financial')}
-            className="rounded-md border px-3 py-1.5 text-sm font-medium transition hover:bg-muted">
-            Abrir no Financeiro
-          </button>
-          {confirmError && <p className="mt-2 w-full rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-800">{confirmError}</p>}
-        </>
-      ),
-      emptyLabel: 'Sem conta a receber para este pedido.',
-    } : { rows: [], installments: [], emptyLabel: 'Sem conta a receber para este pedido.' },
-    extraSections: (
-      <>
-        <OrderDetailBlock title="Entrega" hint="O que a logística precisa">
-          <div className="space-y-2 text-sm">
-            {addr ? (
-              <div className="space-y-0.5">
-                <p>{[addr.street, addr.number].filter(Boolean).join(', ')}{addr.complement ? ` — ${addr.complement}` : ''}</p>
-                {addr.district && <p className="text-muted-foreground">{addr.district}</p>}
-                <p className="text-muted-foreground">
-                  {[addr.city, addr.state].filter((v) => v && v !== '—').join('/')}{addr.postal_code ? ` · ${addr.postal_code}` : ''}
-                </p>
-                {(addr.recipient || addr.phone) && <p className="text-xs text-muted-foreground">{[addr.recipient, addr.phone].filter(Boolean).join(' · ')}</p>}
-              </div>
-            ) : (
-              <p className={delivery ? '' : 'text-muted-foreground'}>{delivery ?? 'Nenhum endereço registrado neste pedido.'}</p>
-            )}
-            <div className="border-t pt-2">
-              <OrderDetailRow label="Status" value={<InlineBadge value={order.fulfillmentStatus} />} />
-              {shipments.length === 0 ? (
-                <p className="mt-1 text-xs text-muted-foreground">Nenhum envio registrado.</p>
-              ) : (
-                <div className="mt-2 space-y-2">
-                  {shipments.map((s) => (
-                    <div key={s.id} className="rounded-md border px-2 py-1.5">
-                      <div className="flex items-center justify-between gap-2">
-                        <span className="text-sm font-medium">{[s.carrier, s.service].filter(Boolean).join(' · ') || 'Envio'}</span>
-                        <span className="text-[10px] text-muted-foreground">{SHIPMENT_LABEL[s.status] ?? s.status}</span>
-                      </div>
-                      {s.tracking_code && (
-                        <p className="mt-0.5 font-mono text-xs">
-                          {s.tracking_url ? <a href={s.tracking_url} target="_blank" rel="noreferrer" className="text-primary hover:underline">{s.tracking_code}</a> : s.tracking_code}
-                        </p>
-                      )}
-                      <div className="mt-1 space-y-0.5 text-[11px] text-muted-foreground">
-                        {s.shipped_at && <p>Despachado em {dateTime(s.shipped_at)}</p>}
-                        {s.estimated_delivery_at && <p>Previsão: {dateTime(s.estimated_delivery_at)}</p>}
-                        {s.delivered_at && <p>Entregue em {dateTime(s.delivered_at)}</p>}
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-        </OrderDetailBlock>
-
-        <OrderDetailBlock title="Histórico">
-          <div className="space-y-1 text-sm">
-            <OrderDetailRow label="Criado" value={dateTime(order.createdAt)} />
-            <OrderDetailRow label="Atualizado" value={dateTime(order.updatedAt)} />
-            <OrderDetailRow label="Situação" value={<InlineBadge value={order.status} />} />
-          </div>
-        </OrderDetailBlock>
-
-        {order.notes && (
-          <OrderDetailBlock title="Observações">
-            <p className="whitespace-pre-wrap text-sm text-muted-foreground">{order.notes}</p>
-          </OrderDetailBlock>
-        )}
-      </>
-    ),
-    onBack,
-    backLabel: 'Pedidos',
-  }
-
-  return <SharedOrderDetailView {...data} />
-}
-
-export const orderDetailPath = (id: string) => `/shop/orders/${id}`
-export const goToOrder = (id: string) => adminNavigateTo(orderDetailPath(id))