@fayz-ai/plugin-shop 0.2.0

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@fayz-ai/plugin-shop",
+  "version": "0.2.0",
+  "description": "Fayz SDK — plugin-shop plugin",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@tanstack/react-table": "^8.20.0",
+    "lucide-react": "^0.400.0",
+    "zustand": "^4.5.0",
+    "@fayz-ai/core": "^0.2.0",
+    "@fayz-ai/shop": "^0.2.0",
+    "@fayz-ai/saas": "^0.2.0",
+    "@fayz-ai/ui": "^0.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "react": "^18.3.0",
+    "tsup": "^8.2.0",
+    "typescript": "^5.5.0"
+  },
+  "license": "MIT",
+  "keywords": [
+    "fayz",
+    "fayz-plugin",
+    "fayz-sdk"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup && tsc --emitDeclarationOnly --declaration --declarationMap --noEmit false",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}

package/src/ShopPage.tsx

@@ -0,0 +1,323 @@
+import React, { useEffect, useState, useCallback, useMemo } from 'react'
+import type { ColumnDef } from '@tanstack/react-table'
+import { DataTable } from '@fayz-ai/ui'
+import { getShopProvider } from '@fayz-ai/shop'
+import type { Product, Order, ShopCustomer, Discount, ListProductsOptions, ShopProvider } from '@fayz-ai/shop'
+
+export type ShopProviderResolver = ShopProvider | (() => ShopProvider)
+
+export interface ShopPageProps {
+  provider?: ShopProviderResolver
+}
+
+// ---------------------------------------------------------------------------
+// Shared helpers
+// ---------------------------------------------------------------------------
+
+function currency(value: number, code = 'BRL', locale = 'pt-BR') {
+  return new Intl.NumberFormat(locale, { style: 'currency', currency: code }).format(value)
+}
+
+function badge(label: string, color: string) {
+  return (
+    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${color}`}>
+      {label}
+    </span>
+  )
+}
+
+const statusColors: Record<string, string> = {
+  active: 'bg-emerald-100 text-emerald-800',
+  draft: 'bg-gray-100 text-gray-700',
+  archived: 'bg-orange-100 text-orange-700',
+  open: 'bg-blue-100 text-blue-800',
+  cancelled: 'bg-red-100 text-red-700',
+  paid: 'bg-emerald-100 text-emerald-800',
+  pending: 'bg-yellow-100 text-yellow-800',
+  fulfilled: 'bg-emerald-100 text-emerald-800',
+  unfulfilled: 'bg-gray-100 text-gray-700',
+  'partially_fulfilled': 'bg-blue-100 text-blue-800',
+}
+
+function resolveShopProvider(provider?: ShopProviderResolver): ShopProvider {
+  return typeof provider === 'function' ? provider() : provider ?? getShopProvider()
+}
+
+// ---------------------------------------------------------------------------
+// Products tab
+// ---------------------------------------------------------------------------
+
+function ProductsTab({ provider }: ShopPageProps) {
+  const [products, setProducts] = useState<Product[]>([])
+  const [loading, setLoading] = useState(true)
+  const [search, setSearch] = useState('')
+
+  const load = useCallback(async (opts?: ListProductsOptions) => {
+    setLoading(true)
+    try {
+      const data = await resolveShopProvider(provider).listProducts(opts)
+      setProducts(data)
+    } finally {
+      setLoading(false)
+    }
+  }, [provider])
+
+  useEffect(() => { load() }, [load])
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const q = e.target.value
+    setSearch(q)
+    load(q ? { search: q } : undefined)
+  }
+
+  const columns = useMemo<ColumnDef<Product, any>[]>(() => [
+    { accessorKey: 'name', header: 'Produto', cell: ({ getValue }) => <span className="font-medium">{getValue() as string}</span> },
+    { accessorKey: 'sku', header: 'SKU', cell: ({ getValue }) => <span className="text-muted-foreground">{(getValue() as string | undefined) ?? '—'}</span> },
+    {
+      accessorKey: 'price', header: () => <span className="block text-right">Preço</span>,
+      cell: ({ getValue, row }) => <div className="text-right">{currency(getValue() as number, row.original.currency)}</div>,
+    },
+    {
+      accessorKey: 'inventoryCount', header: () => <span className="block text-right">Estoque</span>,
+      cell: ({ getValue }) => {
+        const count = getValue() as number
+        return <div className="text-right"><span className={count === 0 ? 'text-red-600 font-medium' : ''}>{count}</span></div>
+      },
+    },
+    {
+      accessorKey: 'status', header: 'Status',
+      cell: ({ getValue }) => {
+        const status = getValue() as string
+        return badge(status, statusColors[status] ?? 'bg-gray-100 text-gray-700')
+      },
+    },
+  ], [])
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-4">
+        <input
+          type="search" value={search} onChange={handleSearch}
+          placeholder="Buscar produtos..."
+          className="border rounded-lg px-3 py-2 text-sm w-64 focus:outline-none focus:ring-2 focus:ring-primary/50"
+        />
+        <span className="text-sm text-muted-foreground">{products.length} produtos</span>
+      </div>
+
+      {loading ? (
+        <div className="py-12 text-center text-sm text-muted-foreground">Carregando...</div>
+      ) : (
+        <DataTable
+          columns={columns}
+          data={products}
+          variant="card"
+          emptyMessage="Nenhum produto encontrado."
+        />
+      )}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Orders tab
+// ---------------------------------------------------------------------------
+
+function OrdersTab({ provider }: ShopPageProps) {
+  const [orders, setOrders] = useState<Order[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    resolveShopProvider(provider).listOrders({ limit: 50 }).then(setOrders).finally(() => setLoading(false))
+  }, [provider])
+
+  const columns = useMemo<ColumnDef<Order, any>[]>(() => [
+    { accessorKey: 'orderNumber', header: 'Pedido', cell: ({ getValue }) => <span className="font-medium">#{getValue() as string}</span> },
+    {
+      id: 'customer', accessorFn: (o) => o.customerName ?? o.customerEmail ?? '—', header: 'Cliente',
+      cell: ({ getValue }) => <span>{getValue() as string}</span>,
+    },
+    {
+      accessorKey: 'total', header: () => <span className="block text-right">Total</span>,
+      cell: ({ getValue, row }) => <div className="text-right font-medium">{currency(getValue() as number, row.original.currency)}</div>,
+    },
+    {
+      accessorKey: 'financialStatus', header: 'Pagamento',
+      cell: ({ getValue }) => {
+        const status = getValue() as string
+        return badge(status, statusColors[status] ?? 'bg-gray-100 text-gray-700')
+      },
+    },
+    {
+      accessorKey: 'fulfillmentStatus', header: 'Entrega',
+      cell: ({ getValue }) => {
+        const status = getValue() as string
+        return badge(status, statusColors[status] ?? 'bg-gray-100 text-gray-700')
+      },
+    },
+    {
+      accessorKey: 'createdAt', header: 'Data',
+      cell: ({ getValue }) => <span className="text-muted-foreground">{new Date(getValue() as string).toLocaleDateString('pt-BR')}</span>,
+    },
+  ], [])
+
+  return (
+    <div>
+      {loading ? (
+        <div className="py-12 text-center text-sm text-muted-foreground">Carregando...</div>
+      ) : (
+        <DataTable
+          columns={columns}
+          data={orders}
+          variant="card"
+          emptyMessage="Nenhum pedido ainda."
+        />
+      )}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Customers tab
+// ---------------------------------------------------------------------------
+
+function CustomersTab({ provider }: ShopPageProps) {
+  const [customers, setCustomers] = useState<ShopCustomer[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    resolveShopProvider(provider).listCustomers({ limit: 50 }).then(setCustomers).finally(() => setLoading(false))
+  }, [provider])
+
+  const columns = useMemo<ColumnDef<ShopCustomer, any>[]>(() => [
+    {
+      id: 'name', accessorFn: (c) => `${c.firstName} ${c.lastName}`, header: 'Nome',
+      cell: ({ row }) => <span className="font-medium">{row.original.firstName} {row.original.lastName}</span>,
+    },
+    { accessorKey: 'email', header: 'Email', cell: ({ getValue }) => <span className="text-muted-foreground">{(getValue() as string | undefined) ?? '—'}</span> },
+    { accessorKey: 'phone', header: 'Telefone', cell: ({ getValue }) => <span className="text-muted-foreground">{(getValue() as string | undefined) ?? '—'}</span> },
+    {
+      accessorKey: 'ordersCount', header: () => <span className="block text-right">Pedidos</span>,
+      cell: ({ getValue }) => <div className="text-right">{getValue() as number}</div>,
+    },
+    {
+      accessorKey: 'totalSpent', header: () => <span className="block text-right">Total Gasto</span>,
+      cell: ({ getValue }) => <div className="text-right">{currency(getValue() as number)}</div>,
+    },
+  ], [])
+
+  return (
+    <div>
+      {loading ? (
+        <div className="py-12 text-center text-sm text-muted-foreground">Carregando...</div>
+      ) : (
+        <DataTable
+          columns={columns}
+          data={customers}
+          variant="card"
+          emptyMessage="Nenhum cliente ainda."
+        />
+      )}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Discounts tab
+// ---------------------------------------------------------------------------
+
+function DiscountsTab({ provider }: ShopPageProps) {
+  const [discounts, setDiscounts] = useState<Discount[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    resolveShopProvider(provider).listDiscounts({ limit: 50 }).then(setDiscounts).finally(() => setLoading(false))
+  }, [provider])
+
+  const columns = useMemo<ColumnDef<Discount, any>[]>(() => [
+    { accessorKey: 'title', header: 'Título', cell: ({ getValue }) => <span className="font-medium">{getValue() as string}</span> },
+    { accessorKey: 'code', header: 'Código', cell: ({ getValue }) => <span className="font-mono text-sm">{(getValue() as string | undefined) ?? '—'}</span> },
+    { accessorKey: 'type', header: 'Tipo', cell: ({ getValue }) => <span className="text-muted-foreground">{getValue() as string}</span> },
+    {
+      accessorKey: 'value', header: () => <span className="block text-right">Valor</span>,
+      cell: ({ row }) => <div className="text-right">{row.original.type === 'percentage' ? `${row.original.value}%` : currency(row.original.value)}</div>,
+    },
+    {
+      id: 'usos', accessorKey: 'timesUsed', header: () => <span className="block text-right">Usos</span>,
+      cell: ({ row }) => <div className="text-right">{row.original.timesUsed}{row.original.usageLimit ? ` / ${row.original.usageLimit}` : ''}</div>,
+    },
+    {
+      accessorKey: 'status', header: 'Status',
+      cell: ({ getValue }) => {
+        const status = getValue() as string
+        return badge(status, statusColors[status] ?? 'bg-gray-100 text-gray-700')
+      },
+    },
+  ], [])
+
+  return (
+    <div>
+      {loading ? (
+        <div className="py-12 text-center text-sm text-muted-foreground">Carregando...</div>
+      ) : (
+        <DataTable
+          columns={columns}
+          data={discounts}
+          variant="card"
+          emptyMessage="Nenhum desconto cadastrado."
+        />
+      )}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Main page
+// ---------------------------------------------------------------------------
+
+const TABS = [
+  { id: 'products',  label: 'Produtos' },
+  { id: 'orders',    label: 'Pedidos' },
+  { id: 'customers', label: 'Clientes' },
+  { id: 'discounts', label: 'Descontos' },
+] as const
+
+type TabId = typeof TABS[number]['id']
+
+export const ShopPage: React.FC<ShopPageProps> = ({ provider }) => {
+  const [tab, setTab] = useState<TabId>('products')
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <div className="mb-6">
+        <h1 className="text-2xl font-semibold">Loja</h1>
+        <p className="text-muted-foreground mt-1">Gerencie produtos, pedidos, clientes e descontos.</p>
+      </div>
+
+      {/* Tabs */}
+      <div className="border-b mb-6">
+        <nav className="flex gap-1">
+          {TABS.map(t => (
+            <button
+              key={t.id}
+              onClick={() => setTab(t.id)}
+              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                tab === t.id
+                  ? 'border-primary text-primary'
+                  : 'border-transparent text-muted-foreground hover:text-foreground'
+              }`}
+            >
+              {t.label}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      {tab === 'products'  && <ProductsTab provider={provider} />}
+      {tab === 'orders'    && <OrdersTab provider={provider} />}
+      {tab === 'customers' && <CustomersTab provider={provider} />}
+      {tab === 'discounts' && <DiscountsTab provider={provider} />}
+    </div>
+  )
+}
+
+ShopPage.displayName = 'ShopPage'

package/src/index.ts

@@ -0,0 +1,137 @@
+import React from 'react'
+import type { PluginManifest, PluginScope, VerticalId } from '@fayz-ai/core'
+import { setShopTenantResolver } from '@fayz-ai/shop'
+import { useOrganizationStore } from '@fayz-ai/saas'
+import type { ShopProviderResolver } from './ShopPage'
+
+const ShopPage = React.lazy(() => import('./ShopPage').then((m) => ({ default: m.ShopPage })))
+
+// ---------------------------------------------------------------------------
+// Options
+// ---------------------------------------------------------------------------
+
+export interface ShopPluginOptions {
+  navPosition?: number
+  navSection?: 'main' | 'secondary' | 'settings'
+  navLabel?: string
+  scope?: PluginScope
+  verticalId?: VerticalId
+  currency?: { code?: string; locale?: string; symbol?: string }
+  provider?: ShopProviderResolver
+}
+
+// ---------------------------------------------------------------------------
+// Factory
+// ---------------------------------------------------------------------------
+
+export function createShopPlugin(options?: ShopPluginOptions): PluginManifest {
+  const curr = { code: 'BRL', locale: 'pt-BR', symbol: 'R$', ...options?.currency }
+
+  // Scope fallback shop queries to the active organization. Apps can inject a
+  // provider when they want SDK-owned data access instead of the global runtime.
+  setShopTenantResolver(() => useOrganizationStore.getState().currentOrg?.id)
+
+  const PageComponent: React.ComponentType<unknown> = () =>
+    React.createElement(React.Suspense, { fallback: null },
+      React.createElement(ShopPage as React.ComponentType<{ provider?: ShopProviderResolver }>, {
+        provider: options?.provider,
+      })
+    )
+  PageComponent.displayName = 'ShopPageWrapper'
+
+  return {
+    id: 'shop',
+    name: options?.navLabel ?? 'Shop',
+    icon: 'ShoppingBag',
+    version: '1.0.0',
+    scope: options?.scope ?? 'vertical',
+    verticalId: options?.verticalId,
+    defaultEnabled: true,
+    dependencies: [],
+    navigation: [
+      {
+        section: options?.navSection ?? 'main',
+        position: options?.navPosition ?? 6,
+        label: options?.navLabel ?? 'Shop',
+        route: '/shop',
+        icon: 'ShoppingBag',
+        permission: { feature: 'shop', action: 'read' as const },
+      },
+    ],
+    routes: [
+      {
+        path: '/shop',
+        component: PageComponent,
+        permission: { feature: 'shop', action: 'read' as const },
+      },
+    ],
+    widgets: [],
+    aiTools: [
+      {
+        id: 'shop.list-products',
+        name: 'listProducts',
+        description: 'Lists products in the shop catalog.',
+        icon: 'Package',
+        mode: 'read' as const,
+        category: 'Shop',
+        parameters: {
+          type: 'object' as const,
+          properties: {
+            search: { type: 'string' as const, description: 'Filter by name' },
+            status: { type: 'string' as const, enum: ['draft', 'active', 'archived'] },
+          },
+        },
+        suggestions: [
+          { label: 'What products are available?' },
+          { label: 'Which products are out of stock?' },
+        ],
+      },
+      {
+        id: 'shop.list-orders',
+        name: 'listOrders',
+        description: 'Lists recent shop orders.',
+        icon: 'ShoppingCart',
+        mode: 'read' as const,
+        category: 'Shop',
+        parameters: {
+          type: 'object' as const,
+          properties: {
+            financialStatus: { type: 'string' as const, enum: ['pending', 'paid', 'refunded', 'voided'] },
+            fulfillmentStatus: { type: 'string' as const, enum: ['unfulfilled', 'partially_fulfilled', 'fulfilled'] },
+          },
+        },
+        suggestions: [
+          { label: 'Show me pending orders' },
+          { label: 'How many orders were paid today?' },
+        ],
+      },
+    ],
+    settings: [
+      {
+        id: 'shop',
+        label: 'Shop',
+        icon: 'ShoppingBag',
+        component: (() => {
+          const ShopSettingsTab: React.ComponentType<unknown> = () =>
+            React.createElement('div', { className: 'p-4 space-y-2' },
+              React.createElement('h2', { className: 'text-lg font-semibold' }, 'Configurações da Loja'),
+              React.createElement('p', { className: 'text-sm text-muted-foreground' },
+                `Moeda: ${curr.symbol} (${curr.code})`
+              )
+            )
+          ShopSettingsTab.displayName = 'ShopSettingsTab'
+          return ShopSettingsTab
+        })(),
+        order: 30,
+        permission: { feature: 'shop', action: 'read' as const },
+      },
+    ],
+  }
+}
+
+// Re-export shop types so consumer apps only need @fayz-ai/plugin-shop
+export type {
+  Product, Order, ShopCustomer, Discount, Category,
+  CreateProductInput, UpdateProductInput, ListProductsOptions,
+  CreateOrderInput, UpdateOrderInput, ListOrdersOptions,
+} from '@fayz-ai/shop'