@nestledjs/data-browser 0.1.0

package/src/lib/components/filters/NumberRangeFilter.tsx

@@ -0,0 +1,111 @@
+import { formatFieldName } from '../../utils/string-utils'
+
+interface NumberRangeFilterProps {
+  fieldName: string
+  fieldType: string
+  currentValue: any
+  onChange: (value: any) => void
+}
+
+export function NumberRangeFilter({ 
+  fieldName, 
+  fieldType,
+  currentValue, 
+  onChange 
+}: Readonly<NumberRangeFilterProps>) {
+  // Parse current value if it's a range object
+  const minValue = currentValue?.gte !== undefined ? currentValue.gte.toString() : ''
+  const maxValue = currentValue?.lte !== undefined ? currentValue.lte.toString() : ''
+  
+  const parseNumber = (value: string) => {
+    if (!value) return undefined
+    
+    // Parse based on field type
+    if (fieldType === 'int' || fieldType === 'bigint') {
+      const parsed = parseInt(value, 10)
+      return isNaN(parsed) ? undefined : parsed
+    } else if (fieldType === 'float' || fieldType === 'decimal') {
+      const parsed = parseFloat(value)
+      return isNaN(parsed) ? undefined : parsed
+    }
+    return undefined
+  }
+  
+  const handleMinChange = (value: string) => {
+    const newValue = { ...currentValue }
+    const parsedValue = parseNumber(value)
+    
+    if (parsedValue !== undefined) {
+      newValue.gte = parsedValue
+    } else {
+      delete newValue.gte
+    }
+    
+    // If no min or max value, clear the filter entirely
+    if (newValue.gte === undefined && newValue.lte === undefined) {
+      onChange(undefined)
+    } else {
+      onChange(newValue)
+    }
+  }
+  
+  const handleMaxChange = (value: string) => {
+    const newValue = { ...currentValue }
+    const parsedValue = parseNumber(value)
+    
+    if (parsedValue !== undefined) {
+      newValue.lte = parsedValue
+    } else {
+      delete newValue.lte
+    }
+    
+    // If no min or max value, clear the filter entirely
+    if (newValue.gte === undefined && newValue.lte === undefined) {
+      onChange(undefined)
+    } else {
+      onChange(newValue)
+    }
+  }
+  
+  // Determine input step based on field type
+  const step = fieldType === 'int' || fieldType === 'bigint' ? '1' : 'any'
+  
+  return (
+    <div className="space-y-1">
+      <label className="block text-sm font-medium text-gray-700">
+        {formatFieldName(fieldName)}
+      </label>
+      <div className="grid grid-cols-2 gap-2">
+        <div>
+          <label className="block text-xs text-gray-500 mb-1">Min</label>
+          <input
+            type="number"
+            step={step}
+            value={minValue}
+            onChange={(e) => handleMinChange(e.target.value)}
+            placeholder="No minimum"
+            className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-green-web focus:border-green-web"
+          />
+        </div>
+        <div>
+          <label className="block text-xs text-gray-500 mb-1">Max</label>
+          <input
+            type="number"
+            step={step}
+            value={maxValue}
+            onChange={(e) => handleMaxChange(e.target.value)}
+            placeholder="No maximum"
+            className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-green-web focus:border-green-web"
+          />
+        </div>
+      </div>
+      {(minValue || maxValue) && (
+        <div className="text-xs text-gray-500">
+          {minValue && maxValue && `${minValue} to ${maxValue}`}
+          {minValue && !maxValue && `≥ ${minValue}`}
+          {!minValue && maxValue && `≤ ${maxValue}`}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/lib/components/filters/RelationComponents.tsx

@@ -0,0 +1,176 @@
+import { getItemDisplayName } from '../../utils/string-utils'
+
+// Dropdown button component
+export function RelationDropdownButton({ 
+  currentItem, 
+  relatedModelName, 
+  isOpen, 
+  onClick 
+}: Readonly<{
+  currentItem: any
+  relatedModelName: string
+  isOpen: boolean
+  onClick: () => void
+}>) {
+  return (
+        <button
+          type="button"
+      onClick={onClick}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-web focus:border-green-web text-sm text-left bg-white flex items-center justify-between"
+        >
+          <span className={currentItem ? 'text-gray-900' : 'text-gray-500'}>
+        {currentItem ? getItemDisplayName(currentItem) : `Select ${relatedModelName.toLowerCase()}...`}
+          </span>
+      <svg 
+        className={`w-4 h-4 text-gray-400 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+        fill="none" 
+        stroke="currentColor" 
+        viewBox="0 0 24 24"
+      >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+  )
+}
+
+// Search input component
+export function RelationSearchInput({ 
+  searchTerm, 
+  onSearchChange, 
+  relatedModelName 
+}: Readonly<{
+  searchTerm: string
+  onSearchChange: (value: string) => void
+  relatedModelName: string
+}>) {
+  return (
+            <div className="p-2">
+              <input
+                type="text"
+                placeholder={`Search ${relatedModelName.toLowerCase()}...`}
+                value={searchTerm}
+        onChange={(e) => onSearchChange(e.target.value)}
+                className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-green-web"
+        autoFocus
+              />
+            </div>
+  )
+}
+
+// Individual item component
+export function RelationItem({ 
+  item, 
+  onSelect 
+}: {
+  item: any
+  onSelect: (item: any) => void
+}) {
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(item)}
+      className="w-full px-3 py-2 text-left text-sm hover:bg-gray-100 focus:bg-gray-100 transition-colors"
+    >
+      {getItemDisplayName(item)}
+    </button>
+  )
+}
+
+// Item list component with error handling
+export function RelationItemList({ 
+  items, 
+  loading, 
+  error,
+  onSelect, 
+  onClear 
+}: Readonly<{
+  items: any[]
+  loading: boolean
+  error?: any
+  onSelect: (item: any) => void
+  onClear: () => void
+}>) {
+  return (
+            <div className="max-h-48 overflow-y-auto">
+              <button
+                type="button"
+        onClick={onClear}
+        className="w-full px-3 py-2 text-left text-sm hover:bg-gray-100 text-gray-500 border-b border-gray-200"
+              >
+                Clear selection
+              </button>
+      
+      {error ? (
+        <div className="px-3 py-2 text-sm text-red-600">
+          <div className="flex items-center">
+            <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            Failed to load options
+          </div>
+          <div className="text-xs text-gray-500 mt-1">
+            {error.networkError ? 'Network error' : 'Please try again'}
+          </div>
+        </div>
+      ) : loading ? (
+        <div className="px-3 py-2 text-sm text-gray-500">
+          <div className="flex items-center">
+            <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            Loading...
+          </div>
+        </div>
+      ) : items.length === 0 ? (
+                <div className="px-3 py-2 text-sm text-gray-500">No items found</div>
+              ) : (
+        items.map((item: any) => (
+          <RelationItem
+                    key={item.id}
+            item={item}
+            onSelect={onSelect}
+          />
+                ))
+              )}
+            </div>
+  )
+}
+
+// Dropdown content container with error handling
+export function RelationDropdownContent({ 
+  searchTerm, 
+  onSearchChange, 
+  relatedModelName, 
+  items, 
+  loading, 
+  error,
+  onSelect, 
+  onClear 
+}: {
+  searchTerm: string
+  onSearchChange: (value: string) => void
+  relatedModelName: string
+  items: any[]
+  loading: boolean
+  error?: any
+  onSelect: (item: any) => void
+  onClear: () => void
+}) {
+  return (
+    <div className="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg">
+      <RelationSearchInput
+        searchTerm={searchTerm}
+        onSearchChange={onSearchChange}
+        relatedModelName={relatedModelName}
+      />
+      <RelationItemList
+        items={items}
+        loading={loading}
+        error={error}
+        onSelect={onSelect}
+        onClear={onClear}
+      />
+          </div>
+  )
+}

package/src/lib/components/filters/RelationFilterField.tsx

@@ -0,0 +1,106 @@
+import { useCallback, useMemo, useRef, useState } from 'react'
+import { useClickOutside } from '../../hooks/useClickOutside'
+import { useRelationData } from '../../hooks/useRelationData'
+import { formatFieldName } from '../../utils/string-utils'
+import { RelationDropdownButton, RelationDropdownContent } from './RelationComponents'
+
+interface RelationFilterFieldProps {
+  fieldName: string
+  relatedModelName: string
+  currentValue: any
+  onChange: (value: any) => void
+}
+
+// Refactored relation field filtering component
+export function RelationFilterField({ 
+  fieldName, 
+  relatedModelName, 
+  currentValue, 
+  onChange 
+}: Readonly<RelationFilterFieldProps>) {
+  const [searchTerm, setSearchTerm] = useState('')
+  const [isOpen, setIsOpen] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  
+  // Memoize the close handler to prevent memory leaks
+  const handleCloseDropdown = useCallback(() => {
+    setIsOpen(false)
+  }, [])
+  
+  // Custom hooks for behavior
+  useClickOutside(dropdownRef, handleCloseDropdown, isOpen)
+  const { relatedItems, loading, error: relationError, hasDocument } = useRelationData(relatedModelName, searchTerm, isOpen)
+  
+  // Find current item to display
+  const currentItem = useMemo(() => 
+    currentValue?.id ? relatedItems.find((item: any) => item.id === currentValue.id) : null,
+    [currentValue?.id, relatedItems]
+  )
+  
+  // Event handlers
+  const handleSelect = useCallback((item: any) => {
+    onChange({ id: item.id })
+    setIsOpen(false)
+    setSearchTerm('') // Reset search when item selected
+  }, [onChange])
+  
+  const handleClear = useCallback(() => {
+    onChange(undefined)
+    setIsOpen(false)
+    setSearchTerm('')
+  }, [onChange])
+  
+  const handleToggleOpen = useCallback(() => {
+    setIsOpen(!isOpen)
+    if (!isOpen) {
+      setSearchTerm('') // Reset search when opening
+    }
+  }, [isOpen])
+  
+  // If no document available, fall back to text input
+  if (!hasDocument) {
+    return (
+      <div className="space-y-1">
+        <label className="block text-sm font-medium text-gray-700">
+          {formatFieldName(fieldName)} ID
+        </label>
+        <input
+          type="text"
+          value={currentValue?.id || ''}
+          onChange={(e) => onChange(e.target.value ? { id: e.target.value } : undefined)}
+          placeholder="Enter ID..."
+          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-web focus:border-green-web text-sm"
+        />
+      </div>
+    )
+  }
+  
+  return (
+    <div className="space-y-1" ref={dropdownRef}>
+      <label className="block text-sm font-medium text-gray-700">
+        {formatFieldName(fieldName)}
+      </label>
+      <div className="relative">
+        <RelationDropdownButton
+          currentItem={currentItem}
+          relatedModelName={relatedModelName}
+          isOpen={isOpen}
+          onClick={handleToggleOpen}
+        />
+        
+        {isOpen && (
+          <RelationDropdownContent
+            searchTerm={searchTerm}
+            onSearchChange={setSearchTerm}
+            relatedModelName={relatedModelName}
+            items={relatedItems}
+            loading={loading}
+            error={relationError}
+            onSelect={handleSelect}
+            onClear={handleClear}
+          />
+        )}
+      </div>
+    </div>
+  )
+}

package/src/lib/components/filters/index.ts

@@ -0,0 +1,5 @@
+export { DateRangeFilter } from './DateRangeFilter'
+export { NumberRangeFilter } from './NumberRangeFilter'
+export * from './RelationComponents'
+export { RelationFilterField } from './RelationFilterField'
+

package/src/lib/components/index.ts

@@ -0,0 +1,2 @@
+export * from './filters'
+export * from './shared'

package/src/lib/components/shared/AdminBreadcrumbs.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import { Link } from 'react-router'
+import { ChevronRightIcon, HomeIcon } from '@heroicons/react/24/outline'
+
+export interface BreadcrumbItem {
+  id: string
+  label: string
+  href?: string
+  isActive?: boolean
+}
+
+export interface AdminBreadcrumbsProps {
+  readonly items: readonly BreadcrumbItem[]
+  readonly showHome?: boolean
+  readonly homeHref?: string
+  readonly className?: string
+}
+
+export function AdminBreadcrumbs({
+  items,
+  showHome = true,
+  homeHref = '/admin',
+  className = '',
+}: Readonly<AdminBreadcrumbsProps>) {
+  // Extract nested ternary logic into clear helper functions
+  const renderHomeLink = () => {
+    if (!showHome) return null
+    
+    return (
+      <li key="home" className="flex items-center">
+        <Link 
+          to={homeHref} 
+          className="text-gray-400 hover:text-gray-500"
+          aria-label="Home"
+        >
+          <HomeIcon className="h-5 w-5 flex-shrink-0" />
+        </Link>
+      </li>
+    )
+  }
+
+  const renderBreadcrumbItem = (item: BreadcrumbItem, index: number, isLast: boolean) => {
+    const content = item.href && !item.isActive ? (
+      <Link
+        to={item.href}
+        className="text-sm font-medium text-gray-500 hover:text-gray-700"
+      >
+        {item.label}
+      </Link>
+    ) : (
+      <span 
+        className={`text-sm font-medium ${
+          item.isActive ? 'text-gray-900' : 'text-gray-500'
+        }`}
+      >
+        {item.label}
+      </span>
+    )
+
+    return (
+      <li key={item.id} className="flex items-center">
+        {(showHome || index > 0) && (
+          <ChevronRightIcon 
+            className="h-5 w-5 flex-shrink-0 text-gray-400 mr-4" 
+            aria-hidden="true" 
+          />
+        )}
+        {content}
+      </li>
+    )
+  }
+
+  const shouldShowSeparator = (index: number) => {
+    return showHome || index > 0
+  }
+
+  return (
+    <nav className={`flex ${className}`} aria-label="Breadcrumb">
+      <ol className="flex items-center space-x-4">
+        {renderHomeLink()}
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1
+          return renderBreadcrumbItem(item, index, isLast)
+        })}
+      </ol>
+    </nav>
+  )
+}

package/src/lib/components/shared/AdminErrorStates.tsx

@@ -0,0 +1,180 @@
+import React from 'react'
+import { ExclamationTriangleIcon, ExclamationCircleIcon, XCircleIcon } from '@heroicons/react/24/outline'
+
+export type ErrorSeverity = 'warning' | 'error' | 'critical'
+
+export interface AdminErrorStateProps {
+  readonly title: string
+  readonly message?: string
+  readonly severity?: ErrorSeverity
+  readonly onRetry?: () => void
+  readonly onDismiss?: () => void
+  readonly className?: string
+  readonly showIcon?: boolean
+}
+
+export interface AdminEmptyStateProps {
+  readonly title: string
+  readonly message?: string
+  readonly actionLabel?: string
+  readonly onAction?: () => void
+  readonly className?: string
+  readonly icon?: React.ComponentType<{ className?: string }>
+}
+
+export interface AdminLoadingStateProps {
+  readonly title?: string
+  readonly message?: string
+  readonly className?: string
+  readonly size?: 'small' | 'medium' | 'large'
+}
+
+const getSeverityConfig = (severity: ErrorSeverity) => {
+  const configs = {
+    warning: {
+      icon: ExclamationTriangleIcon,
+      bgColor: 'bg-yellow-50',
+      borderColor: 'border-yellow-200',
+      iconColor: 'text-yellow-400',
+      titleColor: 'text-yellow-800',
+      messageColor: 'text-yellow-700',
+      buttonColor: 'bg-yellow-100 text-yellow-800 hover:bg-yellow-200',
+    },
+    error: {
+      icon: ExclamationCircleIcon,
+      bgColor: 'bg-red-50',
+      borderColor: 'border-red-200',
+      iconColor: 'text-red-400',
+      titleColor: 'text-red-800',
+      messageColor: 'text-red-700',
+      buttonColor: 'bg-red-100 text-red-800 hover:bg-red-200',
+    },
+    critical: {
+      icon: XCircleIcon,
+      bgColor: 'bg-red-100',
+      borderColor: 'border-red-300',
+      iconColor: 'text-red-500',
+      titleColor: 'text-red-900',
+      messageColor: 'text-red-800',
+      buttonColor: 'bg-red-200 text-red-900 hover:bg-red-300',
+    },
+  }
+  return configs[severity]
+}
+
+export function AdminErrorState({
+  title,
+  message,
+  severity = 'error',
+  onRetry,
+  onDismiss,
+  className = '',
+  showIcon = true,
+}: Readonly<AdminErrorStateProps>) {
+  const config = getSeverityConfig(severity)
+  const IconComponent = config.icon
+
+  return (
+    <div className={`rounded-md border p-4 ${config.bgColor} ${config.borderColor} ${className}`}>
+      <div className="flex">
+        {showIcon && (
+          <div className="flex-shrink-0">
+            <IconComponent className={`h-5 w-5 ${config.iconColor}`} aria-hidden="true" />
+          </div>
+        )}
+        <div className={showIcon ? 'ml-3' : ''}>
+          <h3 className={`text-sm font-medium ${config.titleColor}`}>
+            {title}
+          </h3>
+          {message && (
+            <div className={`mt-2 text-sm ${config.messageColor}`}>
+              <p>{message}</p>
+            </div>
+          )}
+          {(onRetry || onDismiss) && (
+            <div className="mt-4">
+              <div className="-mx-2 -my-1.5 flex">
+                {onRetry && (
+                  <button
+                    type="button"
+                    onClick={onRetry}
+                    className={`rounded-md px-2 py-1.5 text-sm font-medium ${config.buttonColor} focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500`}
+                  >
+                    Try Again
+                  </button>
+                )}
+                {onDismiss && (
+                  <button
+                    type="button"
+                    onClick={onDismiss}
+                    className={`ml-3 rounded-md px-2 py-1.5 text-sm font-medium ${config.buttonColor} focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500`}
+                  >
+                    Dismiss
+                  </button>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function AdminEmptyState({
+  title,
+  message,
+  actionLabel,
+  onAction,
+  className = '',
+  icon: IconComponent,
+}: Readonly<AdminEmptyStateProps>) {
+  return (
+    <div className={`text-center ${className}`}>
+      {IconComponent && (
+        <IconComponent className="mx-auto h-12 w-12 text-gray-400" />
+      )}
+      <h3 className="mt-2 text-sm font-medium text-gray-900">{title}</h3>
+      {message && (
+        <p className="mt-1 text-sm text-gray-500">{message}</p>
+      )}
+      {actionLabel && onAction && (
+        <div className="mt-6">
+          <button
+            type="button"
+            onClick={onAction}
+            className="inline-flex items-center rounded-md bg-green-web px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-web-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-web"
+          >
+            {actionLabel}
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function AdminLoadingState({
+  title = 'Loading...',
+  message,
+  className = '',
+  size = 'medium',
+}: Readonly<AdminLoadingStateProps>) {
+  const getSizeClasses = () => {
+    const sizes = {
+      small: 'h-4 w-4',
+      medium: 'h-8 w-8',
+      large: 'h-12 w-12',
+    }
+    return sizes[size]
+  }
+
+  return (
+    <div className={`flex flex-col items-center justify-center p-8 ${className}`}>
+      <div className={`animate-spin rounded-full border-b-2 border-green-web ${getSizeClasses()}`}></div>
+      <h3 className="mt-4 text-sm font-medium text-gray-900">{title}</h3>
+      {message && (
+        <p className="mt-1 text-sm text-gray-500">{message}</p>
+      )}
+    </div>
+  )
+}