@fayz-ai/plugin-reports 0.1.1

package/src/ReportsPage.tsx

@@ -0,0 +1,62 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { ReportsContextProvider } from './ReportsContext'
+import { ReportHub } from './views/ReportHub'
+import { ReportViewer } from './views/ReportViewer'
+import type { ResolvedReportsConfig, ReportDef } from './types'
+import type { ReportDataProvider } from './data/types'
+
+const HASH_BASE = '/reports'
+
+function getReportIdFromHash(): string | null {
+  const hash = (window.location.hash.slice(1) || '/').split('?')[0]
+  if (hash.startsWith(HASH_BASE + '/') && hash.length > HASH_BASE.length + 1) {
+    return hash.slice(HASH_BASE.length + 1)
+  }
+  return null
+}
+
+export function ReportsPage({
+  config,
+  provider,
+}: {
+  config: ResolvedReportsConfig
+  provider: ReportDataProvider
+}) {
+  const [activeReportId, setActiveReportId] = useState<string | null>(getReportIdFromHash)
+
+  useEffect(() => {
+    function handler() {
+      setActiveReportId(getReportIdFromHash())
+    }
+    window.addEventListener('hashchange', handler)
+    return () => window.removeEventListener('hashchange', handler)
+  }, [])
+
+  const handleSelect = useCallback((report: ReportDef) => {
+    window.location.hash = `${HASH_BASE}/${report.id}`
+  }, [])
+
+  const handleBack = useCallback(() => {
+    window.location.hash = HASH_BASE
+  }, [])
+
+  const activeReport = activeReportId
+    ? config.reports.find((r) => r.id === activeReportId) ?? null
+    : null
+
+  return (
+    <ReportsContextProvider config={config} provider={provider}>
+      <div className="p-1">
+        {activeReport ? (
+          <ReportViewer
+            key={activeReport.id}
+            report={activeReport}
+            onBack={handleBack}
+          />
+        ) : (
+          <ReportHub onSelect={handleSelect} />
+        )}
+      </div>
+    </ReportsContextProvider>
+  )
+}

package/src/components/ExportDropdown.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react'
+import { Download } from 'lucide-react'
+import { Button } from '@fayz-ai/ui'
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownContent,
+  DropdownItem,
+} from '@fayz-ai/ui'
+import { useTranslation } from '@fayz-ai/core'
+import type { ReportColumnDef } from '../types'
+import { exportToCsv } from '../export/csv'
+
+interface ExportDropdownProps {
+  columns: ReportColumnDef[]
+  data: Record<string, any>[]
+  filename: string
+  currency?: string
+  title?: string
+}
+
+export function ExportDropdown({ columns, data, filename, currency, title }: ExportDropdownProps) {
+  const t = useTranslation()
+  const [excelAvailable, setExcelAvailable] = useState(false)
+  const [pdfAvailable, setPdfAvailable] = useState(false)
+
+  useEffect(() => {
+    import('../export/excel').then((m) => m.isExcelAvailable()).then(setExcelAvailable).catch(() => {})
+    import('../export/pdf').then((m) => m.isPdfAvailable()).then(setPdfAvailable).catch(() => {})
+  }, [])
+
+  const handleCsv = () => exportToCsv(columns, data, filename, currency)
+
+  const handleExcel = async () => {
+    const { exportToExcel } = await import('../export/excel')
+    await exportToExcel(columns, data, filename, currency)
+  }
+
+  const handlePdf = async () => {
+    const { exportToPdf } = await import('../export/pdf')
+    await exportToPdf(columns, data, filename, { title, currency })
+  }
+
+  return (
+    <Dropdown>
+      <DropdownTrigger asChild>
+        <Button variant="outline" size="sm">
+          <Download className="h-4 w-4 mr-1.5" />
+          {t('reports.export')}
+        </Button>
+      </DropdownTrigger>
+      <DropdownContent align="end">
+        <DropdownItem onClick={handleCsv}>{t('reports.exportCsv')}</DropdownItem>
+        {excelAvailable && (
+          <DropdownItem onClick={handleExcel}>{t('reports.exportExcel')}</DropdownItem>
+        )}
+        {pdfAvailable && (
+          <DropdownItem onClick={handlePdf}>{t('reports.exportPdf')}</DropdownItem>
+        )}
+      </DropdownContent>
+    </Dropdown>
+  )
+}

package/src/components/ReportCard.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import * as LucideIcons from 'lucide-react'
+import { Badge } from '@fayz-ai/ui'
+import type { ReportDef } from '../types'
+
+interface ReportCardProps {
+  report: ReportDef
+  onClick: (report: ReportDef) => void
+}
+
+export function ReportCard({ report, onClick }: ReportCardProps) {
+  const IconComp = (LucideIcons as any)[report.icon] ?? LucideIcons.FileText
+
+  return (
+    <button
+      type="button"
+      onClick={() => onClick(report)}
+      className="flex flex-col items-start gap-2 rounded-xl border bg-card p-4 text-left transition-all hover:border-primary/30 hover:shadow-md"
+    >
+      <div className="flex w-full items-start justify-between">
+        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
+          <IconComp className="h-5 w-5" />
+        </div>
+        {report.badge && (
+          <Badge variant="secondary" className="text-xs capitalize">
+            {report.badge}
+          </Badge>
+        )}
+      </div>
+      <div>
+        <h4 className="font-medium text-sm">{report.name}</h4>
+        {report.description && (
+          <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">{report.description}</p>
+        )}
+      </div>
+    </button>
+  )
+}

package/src/components/ReportFilterBar.tsx

@@ -0,0 +1,132 @@
+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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,68 @@
+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

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

package/src/data/mock.ts

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

package/src/data/supabase.ts

@@ -0,0 +1,200 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,21 @@
+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)
+}