@fayz-ai/plugin-tables 0.9.0 → 0.9.2

package/src/store.ts

@@ -1,178 +0,0 @@
-import { createStore, type StoreApi } from 'zustand/vanilla'
-import { dedup } from '@fayz-ai/saas'
-import { toast } from 'sonner'
-import type { TablesDataProvider } from './data/types'
-import type {
-  RestaurantTable, TableSession, Zone,
-  CreateTableInput, SeatGuestsInput, UpdateTableStatusInput,
-  TableQuery, TablesSummary,
-} from './types'
-
-// ---------------------------------------------------------------------------
-// Store state
-// ---------------------------------------------------------------------------
-
-export interface TablesUIState {
-  // Data cache
-  tables: RestaurantTable[]
-  tablesLoading: boolean
-
-  zones: Zone[]
-  zonesLoading: boolean
-
-  activeSessions: TableSession[]
-  sessionsLoading: boolean
-
-  sessionHistory: TableSession[]
-  historyLoading: boolean
-
-  summary: TablesSummary | null
-  summaryLoading: boolean
-
-  selectedTableId: string | null
-
-  // Actions
-  fetchTables(query?: TableQuery): Promise<void>
-  fetchZones(): Promise<void>
-  fetchActiveSessions(): Promise<void>
-  fetchSessionHistory(tableId?: string): Promise<void>
-  fetchSummary(): Promise<void>
-  selectTable(id: string | null): void
-  seatGuests(input: SeatGuestsInput): Promise<TableSession>
-  closeSession(sessionId: string): Promise<void>
-  updateTableStatus(input: UpdateTableStatusInput): Promise<void>
-  createTable(input: CreateTableInput): Promise<RestaurantTable>
-}
-
-// ---------------------------------------------------------------------------
-// Store factory
-// ---------------------------------------------------------------------------
-
-export function createTablesStore(provider: TablesDataProvider): StoreApi<TablesUIState> {
-  return createStore<TablesUIState>((set, get) => ({
-    tables: [],
-    tablesLoading: false,
-
-    zones: [],
-    zonesLoading: false,
-
-    activeSessions: [],
-    sessionsLoading: false,
-
-    sessionHistory: [],
-    historyLoading: false,
-
-    summary: null,
-    summaryLoading: false,
-
-    selectedTableId: null,
-
-    async fetchTables(query) {
-      return dedup('tables:tables:' + JSON.stringify(query), async () => {
-        set({ tablesLoading: true })
-        const tables = await provider.getTables(query)
-        set({ tables, tablesLoading: false })
-      })
-    },
-
-    async fetchZones() {
-      return dedup('tables:zones', async () => {
-        set({ zonesLoading: true })
-        const zones = await provider.getZones()
-        set({ zones, zonesLoading: false })
-      })
-    },
-
-    async fetchActiveSessions() {
-      return dedup('tables:activeSessions', async () => {
-        set({ sessionsLoading: true })
-        const activeSessions = await provider.getActiveSessions()
-        set({ activeSessions, sessionsLoading: false })
-      })
-    },
-
-    async fetchSessionHistory(tableId) {
-      return dedup('tables:history:' + (tableId ?? ''), async () => {
-        set({ historyLoading: true })
-        const sessionHistory = await provider.getSessionHistory(tableId)
-        set({ sessionHistory, historyLoading: false })
-      })
-    },
-
-    async fetchSummary() {
-      return dedup('tables:summary', async () => {
-        set({ summaryLoading: true })
-        const summary = await provider.getSummary()
-        set({ summary, summaryLoading: false })
-      })
-    },
-
-    selectTable(id) {
-      set({ selectedTableId: id })
-    },
-
-    async seatGuests(input) {
-      try {
-        const session = await provider.seatGuests(input)
-        const [tables, activeSessions, summary] = await Promise.all([
-          provider.getTables(),
-          provider.getActiveSessions(),
-          provider.getSummary(),
-        ])
-        set({ tables, activeSessions, summary })
-        toast.success('Guests seated')
-        return session
-      } catch (err: any) {
-        toast.error('Failed to seat guests', { description: err?.message })
-        throw err
-      }
-    },
-
-    async closeSession(sessionId) {
-      try {
-        await provider.closeSession(sessionId)
-        const [tables, activeSessions, summary] = await Promise.all([
-          provider.getTables(),
-          provider.getActiveSessions(),
-          provider.getSummary(),
-        ])
-        set({ tables, activeSessions, summary })
-        toast.success('Session closed')
-      } catch (err: any) {
-        toast.error('Failed to close session', { description: err?.message })
-        throw err
-      }
-    },
-
-    async updateTableStatus(input) {
-      try {
-        await provider.updateTableStatus(input)
-        const [tables, summary] = await Promise.all([
-          provider.getTables(),
-          provider.getSummary(),
-        ])
-        set({ tables, summary })
-        toast.success('Table status updated')
-      } catch (err: any) {
-        toast.error('Failed to update table status', { description: err?.message })
-        throw err
-      }
-    },
-
-    async createTable(input) {
-      try {
-        const table = await provider.createTable(input)
-        const [tables, summary] = await Promise.all([
-          provider.getTables(),
-          provider.getSummary(),
-        ])
-        set({ tables, summary })
-        toast.success('Table created')
-        return table
-      } catch (err: any) {
-        toast.error('Failed to create table', { description: err?.message })
-        throw err
-      }
-    },
-  }))
-}

package/src/types.ts

@@ -1,116 +0,0 @@
-// ---------------------------------------------------------------------------
-// Tables Plugin — Pure TypeScript types
-// ---------------------------------------------------------------------------
-
-// ============================================================
-// ENUMS / LITERALS
-// ============================================================
-
-export type TableStatus = 'available' | 'occupied' | 'reserved' | 'cleaning'
-export type TableShape = 'square' | 'round' | 'rectangle' | 'bar'
-
-// ============================================================
-// CORE ENTITIES
-// ============================================================
-
-export interface RestaurantTable {
-  id: string
-  name: string
-  number: number
-  seats: number
-  status: TableStatus
-  zone: string
-  zoneName?: string
-  shape: TableShape
-  gridCol: number
-  gridRow: number
-  isActive: boolean
-  // Current session (denormalized for floor plan)
-  currentSessionId?: string
-  currentOrderId?: string
-  currentGuests?: number
-  currentWaiterName?: string
-  currentElapsedMinutes?: number
-  currentTotal?: number
-  metadata?: Record<string, unknown>
-  tenantId: string
-  createdAt: string
-  updatedAt: string
-}
-
-export interface TableSession {
-  id: string
-  tableId: string
-  tableName?: string
-  orderId?: string
-  guests: number
-  waiterId?: string
-  waiterName?: string
-  seatedAt: string
-  closedAt?: string
-  status: 'active' | 'closed'
-  notes?: string
-  tenantId: string
-  createdAt: string
-}
-
-export interface Zone {
-  id: string
-  name: string
-  color?: string
-  sortOrder: number
-  isActive: boolean
-  tenantId: string
-  createdAt: string
-}
-
-// ============================================================
-// INPUT TYPES
-// ============================================================
-
-export interface CreateTableInput {
-  name: string
-  number: number
-  seats: number
-  zone: string
-  shape?: TableShape
-  gridCol?: number
-  gridRow?: number
-}
-
-export interface SeatGuestsInput {
-  tableId: string
-  guests: number
-  waiterId?: string
-  notes?: string
-}
-
-export interface UpdateTableStatusInput {
-  tableId: string
-  status: TableStatus
-}
-
-// ============================================================
-// QUERY TYPES
-// ============================================================
-
-export interface TableQuery {
-  zone?: string
-  status?: TableStatus | TableStatus[]
-  search?: string
-}
-
-// ============================================================
-// AGGREGATION
-// ============================================================
-
-export interface TablesSummary {
-  totalTables: number
-  availableCount: number
-  occupiedCount: number
-  reservedCount: number
-  cleaningCount: number
-  totalSeats: number
-  occupiedSeats: number
-  averageSessionMinutes: number
-}

package/src/views/FloorPlanView.tsx

@@ -1,388 +0,0 @@
-import React, { useEffect, useMemo } from 'react'
-import { MapPin, Users, Clock, UtensilsCrossed, Loader2 } from 'lucide-react'
-import { useTablesConfig, useTablesStore } from '../TablesContext'
-import { useTranslation } from '@fayz-ai/core'
-import type { RestaurantTable, TableStatus } from '../types'
-
-// ---------------------------------------------------------------------------
-// Status config
-// ---------------------------------------------------------------------------
-
-const statusConfig: Record<TableStatus, { color: string; bg: string }> = {
-  available: { color: 'text-success', bg: 'bg-success/10 border-success/30 hover:bg-success/20' },
-  occupied: { color: 'text-primary', bg: 'bg-primary/10 border-primary/30 hover:bg-primary/20' },
-  reserved: { color: 'text-accent', bg: 'bg-accent/10 border-accent/30 hover:bg-accent/20' },
-  cleaning: { color: 'text-muted-foreground', bg: 'bg-muted border-border hover:bg-muted/80' },
-}
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function formatElapsed(minutes: number | undefined, minLabel: string): string {
-  if (minutes == null) return ''
-  if (minutes < 60) return `${minutes}${minLabel}`
-  const h = Math.floor(minutes / 60)
-  const m = minutes % 60
-  return m > 0 ? `${h}h ${m}${minLabel}` : `${h}h`
-}
-
-function formatCurrency(value: number | undefined): string {
-  if (value == null) return ''
-  return new Intl.NumberFormat(undefined, { style: 'currency', currency: 'BRL' }).format(value)
-}
-
-// ---------------------------------------------------------------------------
-// Table card
-// ---------------------------------------------------------------------------
-
-function TableCard({ table, isSelected, onClick, t }: {
-  table: RestaurantTable
-  isSelected: boolean
-  onClick: () => void
-  t: (key: string) => string
-}) {
-  const config = statusConfig[table.status]
-  const isLarge = table.seats >= 6
-  const minLabel = t('tables.floorPlan.min')
-
-  return (
-    <button
-      onClick={onClick}
-      className={`
-        relative flex flex-col items-center justify-center rounded-lg border-2 p-3 transition-all cursor-pointer
-        ${config.bg}
-        ${isLarge ? 'col-span-2' : ''}
-        ${isSelected ? 'ring-2 ring-primary ring-offset-2' : ''}
-      `}
-      style={{ minHeight: '120px' }}
-    >
-      <span className={`text-2xl font-bold ${config.color}`}>{table.number}</span>
-      <span className="text-xs text-muted-foreground mt-1">
-        {table.seats} {t('tables.floorPlan.seats')}
-      </span>
-
-      {table.status === 'occupied' && (
-        <>
-          <span className="text-xs font-medium mt-1">
-            {table.currentGuests} {t('tables.detail.guests').toLowerCase()}
-          </span>
-          <span className="text-[10px] text-muted-foreground">
-            {formatElapsed(table.currentElapsedMinutes, minLabel)}
-          </span>
-        </>
-      )}
-
-      <span
-        className={`
-          absolute -top-2 -right-2 text-[10px] px-1.5 py-0.5 rounded-full font-medium border
-          ${table.status === 'occupied'
-            ? 'bg-primary text-primary-foreground border-primary'
-            : 'bg-secondary text-secondary-foreground border-border'}
-        `}
-      >
-        {t(`tables.floorPlan.${table.status}`)}
-      </span>
-    </button>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// Detail sidebar
-// ---------------------------------------------------------------------------
-
-function DetailPanel({ table, t }: { table: RestaurantTable; t: (key: string) => string }) {
-  const updateTableStatus = useTablesStore(s => s.updateTableStatus)
-  const seatGuests = useTablesStore(s => s.seatGuests)
-  const closeSession = useTablesStore(s => s.closeSession)
-  const minLabel = t('tables.floorPlan.min')
-
-  return (
-    <div className="rounded-lg border bg-card p-5 sticky top-6">
-      <div className="flex items-center justify-between mb-4">
-        <h3 className="text-lg font-bold">
-          {table.name || `#${table.number}`}
-        </h3>
-        <span
-          className={`
-            text-xs px-2 py-1 rounded-full font-medium border
-            ${table.status === 'occupied'
-              ? 'bg-primary text-primary-foreground border-primary'
-              : 'bg-secondary text-secondary-foreground border-border'}
-          `}
-        >
-          {t(`tables.floorPlan.${table.status}`)}
-        </span>
-      </div>
-
-      <dl className="space-y-3 text-sm">
-        <div className="flex justify-between">
-          <dt className="text-muted-foreground">{t('tables.floorPlan.seats')}</dt>
-          <dd className="font-medium">{table.seats}</dd>
-        </div>
-        {table.zoneName && (
-          <div className="flex justify-between">
-            <dt className="text-muted-foreground">{t('tables.floorPlan.zone')}</dt>
-            <dd className="font-medium">{table.zoneName}</dd>
-          </div>
-        )}
-        {table.status === 'occupied' && (
-          <>
-            {table.currentGuests != null && (
-              <div className="flex justify-between">
-                <dt className="text-muted-foreground">{t('tables.detail.guests')}</dt>
-                <dd className="font-medium">{table.currentGuests}</dd>
-              </div>
-            )}
-            {table.currentWaiterName && (
-              <div className="flex justify-between">
-                <dt className="text-muted-foreground">{t('tables.detail.waiter')}</dt>
-                <dd className="font-medium">{table.currentWaiterName}</dd>
-              </div>
-            )}
-            {table.currentOrderId && (
-              <div className="flex justify-between">
-                <dt className="text-muted-foreground">{t('tables.floorPlan.order')}</dt>
-                <dd className="font-medium">{table.currentOrderId}</dd>
-              </div>
-            )}
-            {table.currentTotal != null && (
-              <div className="flex justify-between">
-                <dt className="text-muted-foreground">{t('tables.detail.total')}</dt>
-                <dd className="font-bold text-base">{formatCurrency(table.currentTotal)}</dd>
-              </div>
-            )}
-            {table.currentElapsedMinutes != null && (
-              <div className="flex justify-between">
-                <dt className="text-muted-foreground">{t('tables.detail.elapsed')}</dt>
-                <dd className="font-medium">{formatElapsed(table.currentElapsedMinutes, minLabel)}</dd>
-              </div>
-            )}
-          </>
-        )}
-      </dl>
-
-      <div className="mt-5 grid grid-cols-2 gap-2">
-        {table.status === 'available' && (
-          <button
-            className="col-span-2 inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
-            onClick={() => seatGuests({ tableId: table.id, guests: 2 })}
-          >
-            {t('tables.detail.seatGuests')}
-          </button>
-        )}
-        {table.status === 'occupied' && (
-          <>
-            <button className="inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors">
-              {t('tables.detail.viewOrder')}
-            </button>
-            <button
-              className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
-              onClick={() => {
-                if (table.currentSessionId) closeSession(table.currentSessionId)
-              }}
-            >
-              {t('tables.detail.closeTable')}
-            </button>
-          </>
-        )}
-        {table.status === 'cleaning' && (
-          <button
-            className="col-span-2 inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
-            onClick={() => updateTableStatus({ tableId: table.id, status: 'available' })}
-          >
-            {t('tables.detail.markClean')}
-          </button>
-        )}
-        {table.status === 'reserved' && (
-          <>
-            <button
-              className="inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors"
-              onClick={() => updateTableStatus({ tableId: table.id, status: 'available' })}
-            >
-              {t('tables.detail.cancel')}
-            </button>
-            <button
-              className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
-              onClick={() => seatGuests({ tableId: table.id, guests: 2 })}
-            >
-              {t('tables.floorPlan.checkIn')}
-            </button>
-          </>
-        )}
-      </div>
-    </div>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// Loading skeleton
-// ---------------------------------------------------------------------------
-
-function FloorPlanSkeleton() {
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center gap-3">
-        {Array.from({ length: 4 }).map((_, i) => (
-          <div key={i} className="h-4 w-20 rounded bg-muted animate-pulse" />
-        ))}
-      </div>
-      <div className="grid lg:grid-cols-[1fr_320px] gap-6">
-        <div className="space-y-6">
-          {Array.from({ length: 2 }).map((_, z) => (
-            <div key={z} className="rounded-lg border bg-card p-5">
-              <div className="h-4 w-24 rounded bg-muted animate-pulse mb-4" />
-              <div className="grid grid-cols-4 gap-3">
-                {Array.from({ length: 4 }).map((_, i) => (
-                  <div key={i} className="h-[120px] rounded-lg bg-muted animate-pulse" />
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-        <div className="h-[300px] rounded-lg bg-muted animate-pulse" />
-      </div>
-    </div>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// Main view
-// ---------------------------------------------------------------------------
-
-export function FloorPlanView() {
-  const t = useTranslation()
-  const config = useTablesConfig()
-
-  const tables = useTablesStore(s => s.tables)
-  const zones = useTablesStore(s => s.zones)
-  const tablesLoading = useTablesStore(s => s.tablesLoading)
-  const fetchTables = useTablesStore(s => s.fetchTables)
-  const fetchZones = useTablesStore(s => s.fetchZones)
-  const selectedTableId = useTablesStore(s => s.selectedTableId)
-  const selectTable = useTablesStore(s => s.selectTable)
-
-  // Fetch on mount
-  useEffect(() => {
-    fetchTables()
-    fetchZones()
-  }, [fetchTables, fetchZones])
-
-  // Group tables by zone
-  const tablesByZone = useMemo(() => {
-    const map = new Map<string, { zoneName: string; color?: string; tables: RestaurantTable[] }>()
-
-    // Seed zone order from store zones
-    for (const zone of zones) {
-      map.set(zone.id, { zoneName: zone.name, color: zone.color, tables: [] })
-    }
-
-    for (const table of tables) {
-      const zoneId = table.zone
-      if (!map.has(zoneId)) {
-        map.set(zoneId, { zoneName: table.zoneName || zoneId, tables: [] })
-      }
-      map.get(zoneId)!.tables.push(table)
-    }
-
-    // Filter out empty zones
-    return Array.from(map.entries())
-      .filter(([, v]) => v.tables.length > 0)
-      .map(([id, v]) => ({ id, ...v }))
-  }, [tables, zones])
-
-  // Summary counts
-  const occupiedCount = tables.filter(t => t.status === 'occupied').length
-  const availableCount = tables.filter(t => t.status === 'available').length
-
-  // Selected table
-  const selectedTable = selectedTableId
-    ? tables.find(t => t.id === selectedTableId) ?? null
-    : null
-
-  // Loading state
-  if (tablesLoading && tables.length === 0) {
-    return <FloorPlanSkeleton />
-  }
-
-  // Empty state
-  if (!tablesLoading && tables.length === 0) {
-    return (
-      <div className="flex flex-col items-center justify-center py-20 text-center">
-        <UtensilsCrossed className="h-12 w-12 text-muted-foreground/40 mb-4" />
-        <h3 className="text-lg font-semibold">{t('tables.floorPlan.noTables')}</h3>
-        <p className="text-sm text-muted-foreground mt-1">{t('tables.floorPlan.noTablesDesc')}</p>
-      </div>
-    )
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* Header: summary + status legend */}
-      <div className="flex items-center justify-between flex-wrap gap-4">
-        <div>
-          <p className="text-muted-foreground text-sm">
-            {t('tables.floorPlan.occupiedOf')
-              .replace('{occupied}', String(occupiedCount))
-              .replace('{available}', String(availableCount))
-              .replace('{total}', String(tables.length))}
-          </p>
-        </div>
-        <div className="flex gap-3 flex-wrap">
-          {(Object.keys(statusConfig) as TableStatus[]).map(status => (
-            <div key={status} className="flex items-center gap-1.5 text-xs">
-              <div className={`h-3 w-3 rounded-full ${statusConfig[status].bg} border`} />
-              <span className="text-muted-foreground">{t(`tables.floorPlan.${status}`)}</span>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Floor plan grid + detail panel */}
-      <div className="grid lg:grid-cols-[1fr_320px] gap-6">
-        {/* Zone sections */}
-        <div className="space-y-6">
-          {tablesByZone.map(zone => (
-            <div key={zone.id} className="rounded-lg border bg-card p-5">
-              <div className="flex items-center gap-2 mb-4">
-                {zone.color && (
-                  <div
-                    className="h-3 w-3 rounded-full border"
-                    style={{ backgroundColor: zone.color }}
-                  />
-                )}
-                <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">
-                  {zone.zoneName}
-                </h3>
-              </div>
-              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
-                {zone.tables.map(table => (
-                  <TableCard
-                    key={table.id}
-                    table={table}
-                    isSelected={table.id === selectedTableId}
-                    onClick={() => selectTable(table.id === selectedTableId ? null : table.id)}
-                    t={t}
-                  />
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {/* Detail panel / sidebar */}
-        <div>
-          {selectedTable ? (
-            <DetailPanel table={selectedTable} t={t} />
-          ) : (
-            <div className="rounded-lg border bg-card p-8 text-center text-muted-foreground">
-              <MapPin className="h-10 w-10 mx-auto mb-3 text-muted-foreground/40" />
-              <p className="font-medium">{t('tables.floorPlan.selectTable')}</p>
-              <p className="text-sm mt-1">{t('tables.floorPlan.selectTableDesc')}</p>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}