@fayz-ai/plugin-reports 0.9.0 → 0.10.0

package/src/components/ReportFilterBar.tsx

@@ -1,132 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { DatePicker } from '@fayz-ai/ui'
-import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '@fayz-ai/ui'
-import { Input } from '@fayz-ai/ui'
-import { useTranslation } from '@fayz-ai/core'
-import type { ReportFilterDef, ReportDateRange, ReportFilterOption } from '../types'
-
-interface ReportFilterBarProps {
-  dateRange: ReportDateRange
-  onDateRangeChange: (range: ReportDateRange) => void
-  filters: ReportFilterDef[]
-  filterValues: Record<string, any>
-  onFilterChange: (key: string, value: any) => void
-}
-
-export function ReportFilterBar({
-  dateRange,
-  onDateRangeChange,
-  filters,
-  filterValues,
-  onFilterChange,
-}: ReportFilterBarProps) {
-  const t = useTranslation()
-
-  return (
-    <div className="flex flex-wrap items-end gap-3">
-      {/* Date range — always present */}
-      <div className="flex items-end gap-2">
-        <div className="space-y-1">
-          <label className="text-xs font-medium text-muted-foreground">{t('reports.from')}</label>
-          <DatePicker
-            value={dateRange.from}
-            onChange={(v) => onDateRangeChange({ ...dateRange, from: v })}
-          />
-        </div>
-        <div className="space-y-1">
-          <label className="text-xs font-medium text-muted-foreground">{t('reports.to')}</label>
-          <DatePicker
-            value={dateRange.to}
-            onChange={(v) => onDateRangeChange({ ...dateRange, to: v })}
-          />
-        </div>
-      </div>
-
-      {/* Custom filters */}
-      {filters.map((filter) => (
-        <FilterControl
-          key={filter.key}
-          filter={filter}
-          value={filterValues[filter.key]}
-          onChange={(v) => onFilterChange(filter.key, v)}
-        />
-      ))}
-    </div>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// Individual filter control
-// ---------------------------------------------------------------------------
-
-function FilterControl({
-  filter,
-  value,
-  onChange,
-}: {
-  filter: ReportFilterDef
-  value: any
-  onChange: (value: any) => void
-}) {
-  const [options, setOptions] = useState<ReportFilterOption[]>(
-    Array.isArray(filter.options) ? filter.options : [],
-  )
-
-  useEffect(() => {
-    if (typeof filter.options === 'function') {
-      filter.options().then(setOptions)
-    }
-  }, [filter.options])
-
-  if (filter.type === 'select') {
-    return (
-      <div className="space-y-1">
-        <label className="text-xs font-medium text-muted-foreground">{filter.label}</label>
-        <Select value={value ?? ''} onValueChange={(v) => onChange(v === '__all__' ? '' : v)}>
-          <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder={filter.placeholder ?? filter.label} />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">All</SelectItem>
-            {options.map((opt) => (
-              <SelectItem key={opt.value} value={opt.value}>
-                {opt.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-    )
-  }
-
-  if (filter.type === 'text') {
-    return (
-      <div className="space-y-1">
-        <label className="text-xs font-medium text-muted-foreground">{filter.label}</label>
-        <Input
-          value={value ?? ''}
-          onChange={(e) => onChange(e.target.value)}
-          placeholder={filter.placeholder ?? filter.label}
-          className="w-[180px]"
-        />
-      </div>
-    )
-  }
-
-  if (filter.type === 'number') {
-    return (
-      <div className="space-y-1">
-        <label className="text-xs font-medium text-muted-foreground">{filter.label}</label>
-        <Input
-          type="number"
-          value={value ?? ''}
-          onChange={(e) => onChange(e.target.value ? Number(e.target.value) : undefined)}
-          placeholder={filter.placeholder ?? filter.label}
-          className="w-[120px]"
-        />
-      </div>
-    )
-  }
-
-  return null
-}

package/src/components/ReportPagination.tsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
-import { Button } from '@fayz-ai/ui'
-
-interface ReportPaginationProps {
-  page: number
-  pageSize: number
-  total: number
-  onPageChange: (page: number) => void
-  onPageSizeChange: (size: number) => void
-}
-
-export function ReportPagination({ page, pageSize, total, onPageChange, onPageSizeChange }: ReportPaginationProps) {
-  const totalPages = Math.max(1, Math.ceil(total / pageSize))
-  const from = (page - 1) * pageSize + 1
-  const to = Math.min(page * pageSize, total)
-
-  return (
-    <div className="flex items-center justify-between border-t px-4 py-3">
-      <div className="text-sm text-muted-foreground">
-        {total > 0 ? `${from}–${to} of ${total}` : 'No results'}
-      </div>
-
-      <div className="flex items-center gap-3">
-        <select
-          value={pageSize}
-          onChange={(e) => onPageSizeChange(Number(e.target.value))}
-          className="h-8 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-2 text-sm"
-        >
-          {[25, 50, 100].map((size) => (
-            <option key={size} value={size}>{size} / page</option>
-          ))}
-        </select>
-
-        <div className="flex items-center gap-1">
-          <Button
-            variant="outline"
-            size="sm"
-            disabled={page <= 1}
-            onClick={() => onPageChange(page - 1)}
-          >
-            <ChevronLeft className="h-4 w-4" />
-          </Button>
-          <span className="text-sm px-2">
-            {page} / {totalPages}
-          </span>
-          <Button
-            variant="outline"
-            size="sm"
-            disabled={page >= totalPages}
-            onClick={() => onPageChange(page + 1)}
-          >
-            <ChevronRight className="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/ReportSummaryRow.tsx

@@ -1,68 +0,0 @@
-import React from 'react'
-import type { ReportColumnDef } from '../types'
-import { formatValuePlain } from '../lib/columns'
-
-interface ReportSummaryRowProps {
-  columns: ReportColumnDef[]
-  data: Record<string, any>[]
-  currency?: string
-}
-
-export function ReportSummaryRow({ columns, data, currency }: ReportSummaryRowProps) {
-  const visibleCols = columns.filter((c) => c.visible !== false)
-  const hasAggregates = visibleCols.some((c) => c.aggregate)
-  if (!hasAggregates || data.length === 0) return null
-
-  return (
-    <div className="rounded-lg border bg-muted/30 overflow-hidden">
-      <table className="w-full text-xs">
-        <tbody>
-          <tr className="font-semibold">
-            {visibleCols.map((col) => {
-              const value = computeAggregate(col, data)
-              const alignRight = col.align === 'right' || col.type === 'currency' || col.type === 'number'
-              return (
-                <td
-                  key={col.key}
-                  className={`px-3 py-1.5 ${alignRight ? 'text-right' : ''}`}
-                >
-                  {value != null
-                    ? formatValuePlain(value, col, currency)
-                    : col.aggregate
-                      ? '—'
-                      : ''}
-                </td>
-              )
-            })}
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  )
-}
-
-function computeAggregate(col: ReportColumnDef, data: Record<string, any>[]): number | null {
-  if (!col.aggregate) return null
-
-  const values = data
-    .map((row) => row[col.key])
-    .filter((v) => v != null && !isNaN(Number(v)))
-    .map(Number)
-
-  if (values.length === 0) return null
-
-  switch (col.aggregate) {
-    case 'sum':
-      return values.reduce((a, b) => a + b, 0)
-    case 'avg':
-      return values.reduce((a, b) => a + b, 0) / values.length
-    case 'count':
-      return values.length
-    case 'min':
-      return Math.min(...values)
-    case 'max':
-      return Math.max(...values)
-    default:
-      return null
-  }
-}

package/src/data/index.ts

@@ -1,4 +0,0 @@
-export type { ReportDataProvider, ReportResult } from './types'
-export { createSupabaseReportProvider } from './supabase'
-export type { SupabaseReportProviderConfig } from './supabase'
-export { createMockReportProvider } from './mock'

package/src/data/mock.ts

@@ -1,9 +0,0 @@
-import type { ReportDataProvider } from './types'
-
-export function createMockReportProvider(): ReportDataProvider {
-  return {
-    async fetch() {
-      return { data: [], total: 0 }
-    },
-  }
-}

package/src/data/supabase.ts

@@ -1,200 +0,0 @@
-import { getSupabaseClientOptional } from '@fayz-ai/core'
-import type { ReportDef, ReportQueryState } from '../types'
-import type { ReportDataProvider, ReportResult } from './types'
-
-// ---------------------------------------------------------------------------
-// Case conversion
-// ---------------------------------------------------------------------------
-
-function camelToSnake(str: string): string {
-  return str.replace(/[A-Z]/g, (c) => '_' + c.toLowerCase())
-}
-
-function snakeToCamel(str: string): string {
-  return str.replace(/_([a-z])/g, (_, c) => c.toUpperCase())
-}
-
-function mapRow(row: Record<string, unknown>, columnMap?: Record<string, string>): Record<string, any> {
-  const result: Record<string, unknown> = {}
-  for (const [key, value] of Object.entries(row)) {
-    const camelKey = columnMap?.[key] ?? snakeToCamel(key)
-    result[camelKey] = value
-  }
-  return result
-}
-
-// ---------------------------------------------------------------------------
-// Provider factory
-// ---------------------------------------------------------------------------
-
-export interface SupabaseReportProviderConfig {
-  tenantId: string | (() => string | undefined)
-  tenantIdColumn?: string
-  schema?: string
-}
-
-export function createSupabaseReportProvider(config: SupabaseReportProviderConfig): ReportDataProvider {
-  const schema = config.schema ?? 'public'
-  const tenantIdCol = config.tenantIdColumn ?? 'tenant_id'
-
-  function resolveTenantId(): string | undefined {
-    return typeof config.tenantId === 'function' ? config.tenantId() : config.tenantId
-  }
-
-  function getClient() {
-    const supabase = getSupabaseClientOptional() as any
-    if (!supabase) throw new Error('Supabase client not available')
-    return schema === 'public' ? supabase : supabase.schema(schema)
-  }
-
-  return {
-    async fetch(reportDef: ReportDef, query: ReportQueryState): Promise<ReportResult> {
-      const { dataSource } = reportDef
-      const columnMap = dataSource.columnMap
-
-      if (dataSource.kind === 'rpc') {
-        return fetchViaRpc(reportDef, query, getClient, resolveTenantId, columnMap)
-      }
-
-      return fetchViaView(reportDef, query, getClient, resolveTenantId, tenantIdCol, columnMap)
-    },
-  }
-}
-
-// ---------------------------------------------------------------------------
-// View-based fetch
-// ---------------------------------------------------------------------------
-
-async function fetchViaView(
-  reportDef: ReportDef,
-  query: ReportQueryState,
-  getClient: () => any,
-  resolveTenantId: () => string | undefined,
-  tenantIdCol: string,
-  columnMap?: Record<string, string>,
-): Promise<ReportResult> {
-  const { dataSource } = reportDef
-  let q = getClient().from(dataSource.name).select('*', { count: 'exact' })
-
-  // Tenant scoping
-  const tenantId = resolveTenantId()
-  if (tenantId) {
-    q = q.eq(tenantIdCol, tenantId)
-  }
-
-  // Date range
-  const dateCol = dataSource.dateColumn ?? 'created_at'
-  if (query.dateRange.from) {
-    q = q.gte(dateCol, query.dateRange.from)
-  }
-  if (query.dateRange.to) {
-    // For date-type columns, plain date string is sufficient.
-    // For timestamptz columns, extend to end of day.
-    const toValue = dateCol === 'created_at' || dateCol.endsWith('_at')
-      ? query.dateRange.to + 'T23:59:59'
-      : query.dateRange.to
-    q = q.lte(dateCol, toValue)
-  }
-
-  // Custom filters
-  for (const [key, value] of Object.entries(query.filters)) {
-    if (value == null || value === '') continue
-    const col = camelToSnake(key)
-    if (Array.isArray(value)) {
-      q = q.in(col, value)
-    } else {
-      q = q.eq(col, value)
-    }
-  }
-
-  // Search
-  if (query.search) {
-    const searchableCols = reportDef.columns
-      .filter((c) => c.type === 'text' || c.type === 'email')
-      .map((c: any) => camelToSnake(c.key))
-    if (searchableCols.length > 0) {
-      const term = `%${query.search}%`
-      const orClause = searchableCols.map((col) => `${col}.ilike.${term}`).join(',')
-      q = q.or(orClause)
-    }
-  }
-
-  // Sort
-  const sortCol = query.sortBy
-    ? camelToSnake(query.sortBy)
-    : dataSource.defaultSort
-      ? camelToSnake(dataSource.defaultSort)
-      : dateCol
-  const ascending = query.sortDir
-    ? query.sortDir === 'asc'
-    : dataSource.defaultSortDir
-      ? dataSource.defaultSortDir === 'asc'
-      : false
-  q = q.order(sortCol, { ascending })
-
-  // Pagination
-  const from = (query.page - 1) * query.pageSize
-  const to = from + query.pageSize - 1
-  q = q.range(from, to)
-
-  const { data, error, count } = await q
-
-  if (error) throw error
-
-  return {
-    data: (data ?? []).map((row: any) => mapRow(row, columnMap)),
-    total: count ?? 0,
-  }
-}
-
-// ---------------------------------------------------------------------------
-// RPC-based fetch
-// ---------------------------------------------------------------------------
-
-async function fetchViaRpc(
-  reportDef: ReportDef,
-  query: ReportQueryState,
-  getClient: () => any,
-  resolveTenantId: () => string | undefined,
-  columnMap?: Record<string, string>,
-): Promise<ReportResult> {
-  const { dataSource } = reportDef
-  const tenantId = resolveTenantId()
-
-  const params: Record<string, any> = {
-    p_tenant_id: tenantId,
-    p_from: query.dateRange.from,
-    p_to: query.dateRange.to,
-    p_page: query.page,
-    p_page_size: query.pageSize,
-  }
-
-  // Custom filters
-  for (const [key, value] of Object.entries(query.filters)) {
-    if (value == null || value === '') continue
-    params[`p_${camelToSnake(key)}`] = value
-  }
-
-  if (query.sortBy) {
-    params.p_sort_by = camelToSnake(query.sortBy)
-    params.p_sort_dir = query.sortDir ?? 'desc'
-  }
-
-  const { data, error } = await getClient().rpc(dataSource.name, params)
-  if (error) throw error
-
-  // RPC expected to return { data: [...], total: number }
-  if (data && typeof data === 'object' && 'data' in data) {
-    return {
-      data: (data.data ?? []).map((row: any) => mapRow(row, columnMap)),
-      total: data.total ?? 0,
-    }
-  }
-
-  // Fallback: RPC returns a plain array
-  const rows = Array.isArray(data) ? data : []
-  return {
-    data: rows.map((row: any) => mapRow(row, columnMap)),
-    total: rows.length,
-  }
-}

package/src/data/types.ts

@@ -1,10 +0,0 @@
-import type { ReportDef, ReportQueryState } from '../types'
-
-export interface ReportResult {
-  data: Record<string, any>[]
-  total: number
-}
-
-export interface ReportDataProvider {
-  fetch(reportDef: ReportDef, query: ReportQueryState): Promise<ReportResult>
-}

package/src/export/csv.ts

@@ -1,21 +0,0 @@
-import { exportCSV } from '@fayz-ai/core'
-import type { CSVColumn } from '@fayz-ai/core'
-import type { ReportColumnDef } from '../types'
-import { formatValuePlain } from '../lib/columns'
-
-export function exportToCsv(
-  columns: ReportColumnDef[],
-  data: Record<string, any>[],
-  filename: string,
-  currency?: string,
-): void {
-  const visibleCols = columns.filter((c) => c.visible !== false)
-
-  const csvColumns: CSVColumn[] = visibleCols.map((col) => ({
-    key: col.key,
-    label: col.label,
-    format: (value: any) => formatValuePlain(value, col, currency),
-  }))
-
-  exportCSV(csvColumns, data, filename)
-}

package/src/export/excel.ts

@@ -1,42 +0,0 @@
-import type { ReportColumnDef } from '../types'
-import { formatValuePlain } from '../lib/columns'
-
-// Opaque dynamic import — hidden from Vite's static analysis so it won't
-// fail when xlsx is not installed (it's an optional peer dependency).
-const load = (m: string) => new Function('m', 'return import(m)')(m) as Promise<any>
-
-export async function exportToExcel(
-  columns: ReportColumnDef[],
-  data: Record<string, any>[],
-  filename: string,
-  currency?: string,
-): Promise<void> {
-  const XLSX = await load('xlsx')
-  const visibleCols = columns.filter((c) => c.visible !== false)
-
-  const header = visibleCols.map((c) => c.label)
-  const rows = data.map((row) =>
-    visibleCols.map((col) => {
-      const value = row[col.key]
-      if (col.type === 'number' || col.type === 'currency') {
-        const num = typeof value === 'number' ? value : parseFloat(value)
-        return isNaN(num) ? '' : num
-      }
-      return formatValuePlain(value, col, currency)
-    }),
-  )
-
-  const ws = XLSX.utils.aoa_to_sheet([header, ...rows])
-  const wb = XLSX.utils.book_new()
-  XLSX.utils.book_append_sheet(wb, ws, 'Report')
-  XLSX.writeFile(wb, `${filename}.xlsx`)
-}
-
-export async function isExcelAvailable(): Promise<boolean> {
-  try {
-    await load('xlsx')
-    return true
-  } catch {
-    return false
-  }
-}

package/src/export/pdf.ts

@@ -1,47 +0,0 @@
-import type { ReportColumnDef } from '../types'
-import { formatValuePlain } from '../lib/columns'
-
-// Opaque dynamic import — hidden from Vite's static analysis so it won't
-// fail when jspdf is not installed (it's an optional peer dependency).
-const load = (m: string) => new Function('m', 'return import(m)')(m) as Promise<any>
-
-export async function exportToPdf(
-  columns: ReportColumnDef[],
-  data: Record<string, any>[],
-  filename: string,
-  options?: { title?: string; currency?: string },
-): Promise<void> {
-  const { default: jsPDF } = await load('jspdf')
-  await load('jspdf-autotable')
-
-  const visibleCols = columns.filter((c) => c.visible !== false)
-
-  const doc = new jsPDF({ orientation: visibleCols.length > 6 ? 'landscape' : 'portrait' })
-
-  if (options?.title) {
-    doc.setFontSize(14)
-    doc.text(options.title, 14, 20)
-  }
-
-  ;(doc as any).autoTable({
-    startY: options?.title ? 30 : 14,
-    head: [visibleCols.map((c) => c.label)],
-    body: data.map((row) =>
-      visibleCols.map((col) => formatValuePlain(row[col.key], col, options?.currency)),
-    ),
-    styles: { fontSize: 8 },
-    headStyles: { fillColor: [100, 100, 100] },
-  })
-
-  doc.save(`${filename}.pdf`)
-}
-
-export async function isPdfAvailable(): Promise<boolean> {
-  try {
-    await load('jspdf')
-    await load('jspdf-autotable')
-    return true
-  } catch {
-    return false
-  }
-}