@startsimpli/ui 0.1.0

package/src/components/unified-table/components/TableFilters/index.tsx

@@ -0,0 +1,298 @@
+'use client'
+
+import { Button } from '../../../ui/button'
+import { Badge } from '../../../ui/badge'
+import { Input } from '../../../ui/input'
+import { Label } from '../../../ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../ui/select'
+import { Filter, XCircle, ChevronDown, ChevronUp } from 'lucide-react'
+import { FilterConfig, FilterSection, UseFiltersReturn } from '../../types'
+import { cn } from '../../../../lib/utils'
+import { useState, useCallback } from 'react'
+
+interface TableFiltersProps {
+  config: FilterConfig
+  filters: UseFiltersReturn
+  className?: string
+  defaultExpanded?: boolean
+}
+
+export function TableFilters({ config, filters, className, defaultExpanded = false }: TableFiltersProps) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded)
+  const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set())
+
+  const toggleSection = (sectionId: string) => {
+    setExpandedSections((prev) => {
+      const next = new Set(prev)
+      if (next.has(sectionId)) {
+        next.delete(sectionId)
+      } else {
+        next.add(sectionId)
+      }
+      return next
+    })
+  }
+
+  const renderChipsFilter = (section: FilterConfig['sections'][0]) => {
+    if (section.type !== 'chips' || !section.filters) return null
+
+    return (
+      <div className="flex flex-wrap items-center gap-3">
+        {section.filters.map((filter) => {
+          if (!filter.options) return null
+
+          return (
+            <div key={filter.id} className="flex items-center gap-2">
+              <Label className="text-sm text-muted-foreground whitespace-nowrap">
+                {filter.label}:
+              </Label>
+              <div className="flex gap-1">
+                {filter.options.map((option) => {
+                  const isActive = filters.filters[filter.id] === option
+
+                  return (
+                    <Button
+                      key={option}
+                      variant={isActive ? 'default' : 'outline'}
+                      size="sm"
+                      onClick={() => {
+                        if (isActive) {
+                          filters.clearFilter(filter.id)
+                        } else {
+                          filters.setFilter(filter.id, option)
+                        }
+                      }}
+                      className="h-7 px-2 text-xs"
+                    >
+                      {option}
+                    </Button>
+                  )
+                })}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
+  const renderBucketsFilter = (section: FilterConfig['sections'][0]) => {
+    if (section.type !== 'buckets' || !section.buckets) return null
+
+    const currentValue = filters.filters[section.id] || 'all'
+
+    return (
+      <div className="flex items-center gap-1.5">
+        <Label htmlFor={section.id} className="text-xs text-muted-foreground whitespace-nowrap">
+          {section.label}:
+        </Label>
+        <Select value={currentValue} onValueChange={(value) => filters.setFilter(section.id, value)}>
+          <SelectTrigger id={section.id} className="w-32 h-8 text-xs">
+            <SelectValue placeholder="Select range" />
+          </SelectTrigger>
+          <SelectContent>
+            {section.buckets.map((bucket, idx) => (
+              <SelectItem key={idx} value={bucket.label.toLowerCase().replace(/\s+/g, '-')}>
+                {bucket.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    )
+  }
+
+  const renderDropdownFilter = (filter: NonNullable<FilterConfig['sections'][0]['filters']>[0]) => {
+    if (!filter.options) return null
+
+    const currentValue = filters.filters[filter.id] || 'all'
+    // Filter out 'all' from options since we add it explicitly below
+    const filteredOptions = filter.options.filter((option: string) => option.toLowerCase() !== 'all')
+
+    return (
+      <div key={filter.id} className="flex items-center gap-1.5">
+        <Label htmlFor={filter.id} className="text-xs text-muted-foreground whitespace-nowrap">
+          {filter.label}:
+        </Label>
+        <Select value={currentValue} onValueChange={(value) => filters.setFilter(filter.id, value)}>
+          <SelectTrigger id={filter.id} className="w-28 h-8 text-xs">
+            <SelectValue placeholder="All" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All</SelectItem>
+            {filteredOptions.map((option: string) => (
+              <SelectItem key={option} value={option}>
+                {option === 'null' ? 'Not Set' : option}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    )
+  }
+
+  const renderSearchFilter = (filter: NonNullable<FilterConfig['sections'][0]['filters']>[0]) => {
+    const currentValue = filters.filters[filter.id] || ''
+
+    return (
+      <div key={filter.id} className="flex items-center gap-1.5">
+        <Label htmlFor={filter.id} className="text-xs text-muted-foreground whitespace-nowrap">
+          {filter.label}:
+        </Label>
+        <Input
+          id={filter.id}
+          type="text"
+          placeholder={filter.label}
+          value={currentValue}
+          onChange={(e) => filters.setFilter(filter.id, e.target.value)}
+          className="w-32 h-8 text-xs"
+        />
+      </div>
+    )
+  }
+
+  const renderCollapsibleSection = (section: FilterConfig['sections'][0]) => {
+    if (section.type !== 'collapsible' || !section.filters) return null
+
+    const isExpanded = expandedSections.has(section.id)
+
+    return (
+      <div key={section.id} className="border rounded-lg p-3">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => toggleSection(section.id)}
+          className="w-full justify-between -ml-2"
+        >
+          <span className="font-medium">{section.label}</span>
+          {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+        </Button>
+
+        {isExpanded && (
+          <div className="mt-3 space-y-3">
+            {section.filters.map((filter) => {
+              if (filter.type === 'dropdown') {
+                return renderDropdownFilter(filter)
+              }
+              if (filter.type === 'search') {
+                return renderSearchFilter(filter)
+              }
+              return null
+            })}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  // Render custom filter using the provided render function
+  const renderCustomFilter = useCallback((section: FilterSection) => {
+    if (section.type !== 'custom' || !section.customFilter) return null
+
+    const currentValue = filters.filters[section.id] ?? section.customFilter.defaultValue
+    const onChange = (value: any) => {
+      if (value === section.customFilter?.defaultValue || value === undefined || value === null) {
+        filters.clearFilter(section.id)
+      } else {
+        filters.setFilter(section.id, value)
+      }
+    }
+
+    return (
+      <div key={section.id} className="flex items-center gap-1.5">
+        {section.label && (
+          <Label className="text-xs text-muted-foreground whitespace-nowrap">
+            {section.label}:
+          </Label>
+        )}
+        {section.customFilter.render(currentValue, onChange)}
+      </div>
+    )
+  }, [filters])
+
+  const hasActiveFilters = filters.hasActiveFilters()
+  const activeFilterCount = filters.getActiveFilterCount()
+
+  return (
+    <div className={cn('rounded-lg border bg-muted/30', className)}>
+      {/* Collapsible Header */}
+      <button
+        type="button"
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full flex items-center justify-between px-3 py-2 hover:bg-muted/50 transition-colors"
+      >
+        <div className="flex items-center gap-2">
+          <Filter className="h-4 w-4 text-muted-foreground" />
+          <span className="text-sm font-medium">Filters</span>
+          {hasActiveFilters && (
+            <Badge variant="secondary" className="text-xs">
+              {activeFilterCount}
+            </Badge>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          {hasActiveFilters && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={(e) => {
+                e.stopPropagation()
+                filters.clearAllFilters()
+              }}
+              className="gap-1 h-6 px-2 text-xs"
+            >
+              <XCircle className="h-3 w-3" />
+              Clear
+            </Button>
+          )}
+          {isExpanded ? (
+            <ChevronUp className="h-4 w-4 text-muted-foreground" />
+          ) : (
+            <ChevronDown className="h-4 w-4 text-muted-foreground" />
+          )}
+        </div>
+      </button>
+
+      {/* Expanded filter content */}
+      {isExpanded && (
+        <div className="px-3 pb-3 pt-1">
+          {/* Compact horizontal layout for all filters */}
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
+            {config.sections.map((section) => {
+              if (section.type === 'chips') {
+                return <div key={section.id}>{renderChipsFilter(section)}</div>
+              }
+
+              if (section.type === 'buckets') {
+                return <div key={section.id}>{renderBucketsFilter(section)}</div>
+              }
+
+              if (section.type === 'collapsible') {
+                return renderCollapsibleSection(section)
+              }
+
+              if (section.type === 'dropdown' && section.filters) {
+                return section.filters.map((filter) => (
+                  <div key={filter.id}>{renderDropdownFilter(filter)}</div>
+                ))
+              }
+
+              if (section.type === 'search' && section.filters) {
+                return section.filters.map((filter) => (
+                  <div key={filter.id}>{renderSearchFilter(filter)}</div>
+                ))
+              }
+
+              if (section.type === 'custom') {
+                return <div key={section.id}>{renderCustomFilter(section)}</div>
+              }
+
+              return null
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/unified-table/components/TablePagination/index.tsx

@@ -0,0 +1,157 @@
+'use client'
+
+import { Button } from '../../../ui/button'
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react'
+import { UsePaginationReturn } from '../../types'
+
+interface TablePaginationProps {
+  pagination: UsePaginationReturn
+  showSelectAllPrompt?: boolean
+  onSelectAllPages?: () => void
+  totalFilteredCount?: number
+  className?: string
+}
+
+export function TablePagination({
+  pagination,
+  showSelectAllPrompt,
+  onSelectAllPages,
+  totalFilteredCount,
+  className,
+}: TablePaginationProps) {
+  const {
+    currentPage,
+    totalPages,
+    totalCount,
+    canGoNext,
+    canGoPrevious,
+    goToPage,
+    goToFirstPage,
+    goToLastPage,
+    goToNextPage,
+    goToPreviousPage,
+    getPageNumbers,
+    getDisplayRange,
+  } = pagination
+
+  const { start, end } = getDisplayRange()
+  const pageNumbers = getPageNumbers()
+
+  return (
+    <div className={className}>
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        {/* Item count display */}
+        <div className="text-sm text-muted-foreground">
+          Showing <span className="font-medium">{start}-{end}</span> of{' '}
+          <span className="font-medium">{totalCount}</span>
+          {totalFilteredCount && totalFilteredCount !== totalCount && (
+            <span> filtered items</span>
+          )}
+        </div>
+
+        {/* Page controls */}
+        {totalPages > 1 && (
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-muted-foreground hidden sm:inline">
+              Page {currentPage} of {totalPages}
+            </span>
+
+            <div className="flex gap-1">
+              {/* First page */}
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={goToFirstPage}
+                disabled={!canGoPrevious}
+                className="h-8 w-8 p-0"
+                title="First page"
+              >
+                <ChevronsLeft className="h-4 w-4" />
+              </Button>
+
+              {/* Previous page */}
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={goToPreviousPage}
+                disabled={!canGoPrevious}
+                className="h-8 w-8 p-0"
+                title="Previous page"
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+
+              {/* Page numbers */}
+              {pageNumbers.map((pageNum, idx) => {
+                if (pageNum === '...') {
+                  return (
+                    <span
+                      key={`ellipsis-${idx}`}
+                      className="flex items-center px-2 text-muted-foreground"
+                    >
+                      •••
+                    </span>
+                  )
+                }
+
+                const page = pageNum as number
+                return (
+                  <Button
+                    key={page}
+                    variant={page === currentPage ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => goToPage(page)}
+                    className="h-8 w-8 p-0"
+                  >
+                    {page}
+                  </Button>
+                )
+              })}
+
+              {/* Next page */}
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={goToNextPage}
+                disabled={!canGoNext}
+                className="h-8 w-8 p-0"
+                title="Next page"
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+
+              {/* Last page */}
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={goToLastPage}
+                disabled={!canGoNext}
+                className="h-8 w-8 p-0"
+                title="Last page"
+              >
+                <ChevronsRight className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Select all pages prompt */}
+      {showSelectAllPrompt && onSelectAllPages && totalFilteredCount && totalFilteredCount > end && (
+        <div className="mt-3 flex items-center justify-center p-3 bg-blue-50 border border-blue-200 rounded-lg">
+          <span className="text-sm text-blue-900 mr-2">
+            Select all <span className="font-semibold">{totalFilteredCount}</span> items?
+          </span>
+          <Button
+            size="sm"
+            variant="link"
+            onClick={onSelectAllPages}
+            className="text-blue-700 hover:text-blue-900 font-semibold p-0 h-auto"
+          >
+            Select all {totalFilteredCount} items
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/unified-table/components/Toolbar/ExportButton.tsx

@@ -0,0 +1,229 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import { Button } from '../../../ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../../ui/dropdown-menu'
+import { Download, FileSpreadsheet, FileText, Loader2 } from 'lucide-react'
+import { ColumnConfig } from '../../types'
+import { exportToCSV, exportToExcel, generateExportFilename } from '../../utils/export'
+
+export type ExportScope = 'all' | 'filtered' | 'selected'
+
+export interface ExportButtonProps<TData> {
+  data: TData[]
+  filteredData?: TData[]
+  selectedData?: TData[]
+  columns: ColumnConfig<TData>[]
+  baseFilename?: string
+  disabled?: boolean
+  className?: string
+  showProgress?: boolean
+  onExportStart?: (format: 'csv' | 'excel', scope: ExportScope) => void
+  onExportComplete?: (format: 'csv' | 'excel', scope: ExportScope, rowCount: number) => void
+  onExportError?: (error: Error) => void
+}
+
+export function ExportButton<TData>({
+  data,
+  filteredData,
+  selectedData,
+  columns,
+  baseFilename = 'export',
+  disabled = false,
+  className,
+  showProgress = true,
+  onExportStart,
+  onExportComplete,
+  onExportError,
+}: ExportButtonProps<TData>) {
+  const [isExporting, setIsExporting] = useState(false)
+  const [progress, setProgress] = useState(0)
+
+  // Determine what export options are available
+  const hasFilteredData = filteredData && filteredData.length > 0 && filteredData.length < data.length
+  const hasSelectedData = selectedData && selectedData.length > 0
+
+  const handleExport = useCallback(
+    async (format: 'csv' | 'excel', scope: ExportScope) => {
+      setIsExporting(true)
+      setProgress(0)
+
+      try {
+        onExportStart?.(format, scope)
+
+        // Determine which data to export
+        let dataToExport: TData[]
+        let scopeLabel: string
+
+        switch (scope) {
+          case 'selected':
+            if (!selectedData || selectedData.length === 0) {
+              throw new Error('No rows selected')
+            }
+            dataToExport = selectedData
+            scopeLabel = 'selected'
+            break
+          case 'filtered':
+            if (!filteredData || filteredData.length === 0) {
+              throw new Error('No filtered data available')
+            }
+            dataToExport = filteredData
+            scopeLabel = 'filtered'
+            break
+          case 'all':
+          default:
+            dataToExport = data
+            scopeLabel = 'all'
+            break
+        }
+
+        // Simulate progress for large datasets
+        if (showProgress && dataToExport.length > 100) {
+          setProgress(25)
+          await new Promise(resolve => setTimeout(resolve, 100))
+          setProgress(50)
+        }
+
+        // Generate filename with timestamp and scope
+        const filename = `${baseFilename}_${scopeLabel}_${generateExportFilename('')}`.replace(
+          /__/g,
+          '_'
+        )
+
+        // Export based on format
+        if (format === 'csv') {
+          exportToCSV(dataToExport, columns, filename)
+        } else {
+          exportToExcel(dataToExport, columns, filename)
+        }
+
+        if (showProgress) {
+          setProgress(100)
+        }
+
+        onExportComplete?.(format, scope, dataToExport.length)
+      } catch (error) {
+        console.error('Export failed:', error)
+        const errorObj = error instanceof Error ? error : new Error('Export failed')
+        onExportError?.(errorObj)
+      } finally {
+        // Reset state after a brief delay to show completion
+        if (showProgress) {
+          setTimeout(() => {
+            setIsExporting(false)
+            setProgress(0)
+          }, 500)
+        } else {
+          setIsExporting(false)
+          setProgress(0)
+        }
+      }
+    },
+    [
+      data,
+      filteredData,
+      selectedData,
+      columns,
+      baseFilename,
+      showProgress,
+      onExportStart,
+      onExportComplete,
+      onExportError,
+    ]
+  )
+
+  const isDisabled = disabled || isExporting || data.length === 0
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={isDisabled}
+          className={className}
+          aria-label="Export data"
+        >
+          {isExporting ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Exporting{showProgress && progress > 0 ? ` ${progress}%` : '...'}
+            </>
+          ) : (
+            <>
+              <Download className="mr-2 h-4 w-4" />
+              Export
+            </>
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        {/* CSV Export Options */}
+        <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">CSV Format</div>
+        <DropdownMenuItem
+          onClick={() => handleExport('csv', 'all')}
+          disabled={isExporting || data.length === 0}
+        >
+          <FileText className="mr-2 h-4 w-4" />
+          Export All ({data.length} rows)
+        </DropdownMenuItem>
+        {hasFilteredData && (
+          <DropdownMenuItem
+            onClick={() => handleExport('csv', 'filtered')}
+            disabled={isExporting}
+          >
+            <FileText className="mr-2 h-4 w-4" />
+            Export Filtered ({filteredData?.length || 0} rows)
+          </DropdownMenuItem>
+        )}
+        {hasSelectedData && (
+          <DropdownMenuItem
+            onClick={() => handleExport('csv', 'selected')}
+            disabled={isExporting}
+          >
+            <FileText className="mr-2 h-4 w-4" />
+            Export Selected ({selectedData?.length || 0} rows)
+          </DropdownMenuItem>
+        )}
+
+        <DropdownMenuSeparator />
+
+        {/* Excel Export Options */}
+        <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+          Excel Format
+        </div>
+        <DropdownMenuItem
+          onClick={() => handleExport('excel', 'all')}
+          disabled={isExporting || data.length === 0}
+        >
+          <FileSpreadsheet className="mr-2 h-4 w-4" />
+          Export All ({data.length} rows)
+        </DropdownMenuItem>
+        {hasFilteredData && (
+          <DropdownMenuItem
+            onClick={() => handleExport('excel', 'filtered')}
+            disabled={isExporting}
+          >
+            <FileSpreadsheet className="mr-2 h-4 w-4" />
+            Export Filtered ({filteredData?.length || 0} rows)
+          </DropdownMenuItem>
+        )}
+        {hasSelectedData && (
+          <DropdownMenuItem
+            onClick={() => handleExport('excel', 'selected')}
+            disabled={isExporting}
+          >
+            <FileSpreadsheet className="mr-2 h-4 w-4" />
+            Export Selected ({selectedData?.length || 0} rows)
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}