+ {keyName && "{keyName}"}
+ {keyName && : }
+ {formatValue(data)}
+ {comma}
+
+ );
+ }
+
+ if (isEmpty) {
+ const brackets = isArray ? '[]' : '{}';
+ return (
+
+ {keyName && "{keyName}"}
+ {keyName && : }
+ {brackets + comma}
+
+ );
+ }
+
+ const openBracket = isArray ? '[' : '{';
+ const closeBracket = isArray ? ']' : '}';
+ const itemCount = entries.length;
+
+ if (!isExpanded) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+ );
+}
+
+interface ApiColumn {
+ name: string;
+ label?: string;
+ type?: string;
+ format?: string;
+ nullable?: boolean;
+ description?: string;
+ example?: any;
+ sortable?: boolean;
+ filterable?: boolean;
+ searchable?: boolean;
+ enum?: string[];
+}
+
+interface ApiAction {
+ name: string;
+ slug: string;
+ label: string;
+ description?: string;
+ method: string;
+ requiresRecord: boolean;
+ bulk: boolean;
+ requiresConfirmation: boolean;
+ confirmationMessage?: string;
+ hidden: boolean;
+ requestSchema?: any;
+ responseSchema?: any;
+ successMessage?: string;
+}
+
+export interface ApiResource {
+ columns: ApiColumn[];
+ endpoint: string;
+ baseUrl: string;
+ fullUrl: string;
+ paginated: boolean;
+ perPage: number;
+ allowedFilters: string[];
+ allowedSorts: string[];
+ allowedIncludes?: string[];
+ searchableColumns: string[];
+ description?: string;
+ version?: string;
+ authenticated: boolean;
+ headers: Record
+
+ {entries.map(([key, value], index) => (
+
+ {closeBracket + comma}
+
+
+ {/* Sidebar - Endpoints */}
+
+ );
+}
diff --git a/resources/react/components/CardGrid.tsx b/resources/react/components/CardGrid.tsx
new file mode 100644
index 0000000..c83c05f
--- /dev/null
+++ b/resources/react/components/CardGrid.tsx
@@ -0,0 +1,1011 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Skeleton } from '@/components/ui/skeleton';
+import { cn } from '@/lib/utils';
+import { router } from '@inertiajs/react';
+import RecordActions from '@laravilt/actions/components/RecordActions';
+import {
+ AlertCircle,
+ AlertTriangle,
+ Archive,
+ Calendar,
+ CheckCircle2,
+ Circle,
+ Clock,
+ FileText,
+ Inbox,
+ Loader2,
+ Package,
+ PenLine,
+ Play,
+ Star,
+ User,
+ XCircle,
+ type LucideIcon,
+} from 'lucide-react';
+import { useState, type ChangeEvent, type ComponentType, type MouseEvent } from 'react';
+import { useWatch } from '../composables/useWatch';
+import { toDisplayString } from '../lib/display';
+import { resolveColumnIcon } from '../lib/icons';
+import ColorGridColumn from './grid-columns/ColorGridColumn';
+import IconGridColumn from './grid-columns/IconGridColumn';
+import ImageGridColumn from './grid-columns/ImageGridColumn';
+import TextGridColumn from './grid-columns/TextGridColumn';
+import ToggleGridColumn from './grid-columns/ToggleGridColumn';
+
+export interface CardGridProps {
+ grid: any;
+ records: any[];
+ recordActions?: any[];
+ loading?: boolean;
+ loadingMore?: boolean;
+ bulkActionsAvailable?: boolean;
+ resourceSlug: string;
+ modelClass?: string;
+ clearSelections?: number;
+ onUpdateSelectedRecords?: (records: (number | string)[]) => void;
+}
+
+const columnComponents: Record
+ {/* Sidebar Header */}
+
+
+ {/* Main Content */}
+
+ {!sidebarCollapsed && (
+
+
+ {/* Endpoints List */}
+
+
+ )}
+
+
+ {/* CRUD Operations */}
+ {!sidebarCollapsed && (
+
+
+ {/* API Info Footer */}
+ {!sidebarCollapsed && apiResource?.version && (
+ CRUD Operations
+ )} + + {operations.map((op) => ( +
+
+ {/* Tooltip for collapsed state */}
+ {sidebarCollapsed && (
+
+ ))}
+
+ {/* Custom Actions */}
+ {customActions.length > 0 && (
+ <>
+ {!sidebarCollapsed ? (
+ <>
+
+
+ {op.method}
+ {op.label}
+
+ )}
+ Actions
+ + ) : ( + + )} + + {customActions.map((action) => ( +
+
+ {/* Tooltip for collapsed state */}
+ {sidebarCollapsed && (
+
+ ))}
+
+ )}
+
+ {action.method}
+ {action.label}
+
+ )}
+
+
+ )}
+ API {apiResource.version}
+
+ {/* Request Section */}
+
+
+ {/* Operation Info */}
+ {currentOperation && (
+
+
+ {/* Response Section */}
+
+
+ )}
+
+ {/* Record ID Input */}
+ {currentOperation?.needsId && (
+
+ {method}
+ {currentOperation.label}
+
+ {currentOperation.description && {currentOperation.description}
} +
+
+ )}
+
+ {/* URL Bar */}
+
+
+ handleRecordIdChange(event.target.value)}
+ type="text"
+ placeholder="Enter ID"
+ className="w-32 px-2 py-1 text-sm rounded border border-border bg-background focus:outline-none focus:ring-1 focus:ring-primary"
+ />
+
+
+
+
+ {/* Request Tabs */}
+
+
+
+
+
+
+ setUrl(event.target.value)}
+ type="text"
+ placeholder="Enter request URL"
+ className="flex-1 bg-transparent px-3 py-2 text-sm font-mono focus:outline-none"
+ />
+
+
+
+ {(['params', 'headers', 'body', 'auth'] as const).map((tab) => (
+
+ ))}
+
+
+
+ {/* Tab Content */}
+
+
+
+
+ {showExportMenu && (
+
+
+
+ )}
+
+
+
+
+
+
+ {/* Params Tab */}
+ {requestTab === 'params' && (
+
+
+ {queryParams.length === 0 ? (
+
+ )}
+
+ {/* Headers Tab */}
+ {requestTab === 'headers' && (
+
+
+ ) : (
+ <>
+ {queryParams.map((param, index) => (
+ No query parameters
+ +
+ updateQueryParam(index, { enabled: event.target.checked })}
+ className="h-4 w-4 rounded border-border accent-primary"
+ />
+ updateQueryParam(index, { key: event.target.value })}
+ type="text"
+ placeholder="Key"
+ className={INPUT_CLASS}
+ />
+ updateQueryParam(index, { value: event.target.value })}
+ type="text"
+ placeholder="Value"
+ className={INPUT_CLASS}
+ />
+
+
+ ))}
+
+
+ )}
+
+ {headers.map((header, index) => (
+
+ )}
+
+ {/* Body Tab */}
+ {requestTab === 'body' && (
+
+ updateHeader(index, { enabled: event.target.checked })}
+ className="h-4 w-4 rounded border-border accent-primary"
+ />
+ updateHeader(index, { key: event.target.value })}
+ type="text"
+ placeholder="Key"
+ className={INPUT_CLASS}
+ />
+ updateHeader(index, { value: event.target.value })}
+ type="text"
+ placeholder="Value"
+ className={INPUT_CLASS}
+ />
+
+
+ ))}
+
+
+
+ )}
+
+ {/* Auth Tab */}
+ {requestTab === 'auth' && (
+
+ Request Body (JSON)
+
+
+
+
+
+ )}
+
+
+
+
+
+
+ setApiTokenInput(event.target.value)}
+ type={showToken ? 'text' : 'password'}
+ placeholder="Enter your API token"
+ className="w-full px-3 py-2 pr-10 text-sm font-mono rounded border border-border bg-background focus:outline-none focus:ring-1 focus:ring-primary"
+ />
+
+
+ Token will be sent as: Authorization: Bearer <token>
+
+ {/* Response Header */}
+
+
+
+
+ {/* Response Body */}
+
+ Response
+ {responseStatus ? (
+ <>
+
+ {responseStatus}
+
+ {responseTime}ms
+ {responseSize ? {formatBytes(responseSize)} : null}
+
+ ) : null}
+
+
+
+
+
+
+
+
+
+ {responseTab === 'body' && response && typeof response === 'object' && (
+ <>
+
+
+
+
+
+
+
+
+ )}
+
+ {response && (
+
+ )}
+
+ {isLoading ? (
+
+
+
+ ) : error ? (
+
+
+
+
+ ) : !response ? (
+
+
+ Request Failed
+{error}
+
+
+ ) : responseTab === 'body' ? (
+ responseViewMode === 'pretty' && typeof response === 'object' ? (
+
+
+ No Response Yet
+Click Send to make a request
+
+
+ ) : (
+
+ {formattedResponse}
+
+ )
+ ) : responseTab === 'headers' ? (
+
+ {Object.entries(responseHeaders).map(([key, value]) => (
+
+ ) : null}
+
+ {key}:
+ {value}
+
+ ))}
+ {Object.keys(responseHeaders).length === 0 && (
+
+
+ )}
+ No response headers
+
+ {/* Category / SKU */}
+
+
+ {/* Actions Footer Skeleton */}
+
+
+
+ {/* Title */}
+
+
+
+ {/* Price & Stock */}
+
+ {FIVE.map((s) => (
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function SimpleSkeleton() {
+ return (
+ <>
+ {/* Main Card Content Skeleton */}
+
+ {/* Header: Checkbox + ID */}
+
+
+ {/* Actions Footer Skeleton */}
+
+
+
+ {/* Body: Avatar + Info (centered) */}
+
+ {/* Avatar Skeleton */}
+
+
+ {/* Meta Row Skeleton */}
+
+
+
+
+
+
+
+ {/* Status Badge Skeleton */}
+
+
+
+
+ );
+}
+
+export default function CardGrid({
+ grid,
+ records,
+ loading = false,
+ loadingMore = false,
+ bulkActionsAvailable = false,
+ resourceSlug,
+ modelClass,
+ clearSelections = 0,
+ onUpdateSelectedRecords,
+}: CardGridProps) {
+ const [selectedRecords, setSelectedRecords] = useState handleCardClick(event, record)}
+ >
+ {/* Main Card Content */}
+
+ );
+ };
+
+ // ================================
+ // MEDIA CARD STYLE
+ // Full background image with gradient overlay
+ // ================================
+ const renderMediaCard = (record: any) => {
+ const badge = getBadge(record);
+ const imageUrl = getImageUrl(record);
+ const title = getTitle(record);
+ const description = getDescription(record);
+ const BadgeIcon = getBadgeIconComponent(record);
+
+ return (
+
+ {/* Top Header: Checkbox + ID */}
+
+
+ {/* Actions Footer (CENTERED) */}
+ {record._actions && record._actions.length > 0 && (
+
+ {/* Selection Checkbox */}
+ {bulkActionsAvailable && (
+ handleSelectRecord(record.id)}
+ aria-label={`Select record #${toDisplayString(record.id)}`}
+ className="size-5 rounded border-2 border-muted-foreground/40 bg-background cursor-pointer hover:border-primary/60"
+ />
+ )}
+ {/* Record ID */}
+ #{toDisplayString(record.id)}
+
+
+ {/* Body: Avatar + Info (centered horizontally) */}
+
+ {/* Avatar with Status Indicator */}
+
+
+ {/* Meta Row: Status Badge + Timestamp */}
+
+
+ {imageUrl &&
+ {getAvatarInitials(record)}
+
+
+ {/* Online/Status Indicator Dot */}
+ {badge && (
+
+ )}
+
+
+ {/* Title and Description (centered) */}
+
+
+
+
+ {description && (
+ {toDisplayString(title)}
} +
+
+ )}
+ {toDisplayString(description)}
+
+ {/* Status Badge */}
+ {badge ? (
+
+
+
+ ) : (
+
+ )}
+
+ {/* Timestamp with Calendar Icon */}
+ {relativeTime && (
+
+
+ )}
+
+ {renderRecordActions(record)}
+
+ )}
+ handleCardClick(event, record)}
+ >
+ {/* Background Image */}
+
+ );
+ };
+
+ // ================================
+ // PRODUCT CARD STYLE
+ // E-commerce style with image, structured info, and price
+ // ================================
+ const renderProductCard = (record: any) => {
+ const badge = getBadge(record);
+ const imageUrl = getImageUrl(record);
+ const title = getTitle(record);
+ const subtitle = getSubtitle(record);
+ const description = getDescription(record);
+ const price = getPrice(record);
+ const StatusIcon = getStatusIcon(badge);
+
+ return (
+
+ {imageUrl ? (
+ 
+ ) : (
+
+
+ {/* Actions Bar */}
+ {record._actions && record._actions.length > 0 && (
+
+ {toDisplayString(title).charAt(0) || '?'}
+
+ )}
+
+ {/* Gradient Overlay */}
+
+
+ {/* Selection Checkbox (top-left) */}
+ {bulkActionsAvailable && (
+
+ handleSelectRecord(record.id)}
+ aria-label={`Select record #${toDisplayString(record.id)}`}
+ className="border-white/50 data-[state=checked]:bg-primary data-[state=checked]:border-primary"
+ />
+
+ )}
+
+ {/* Badge (top-right) */}
+ {badge && (
+
+
+ {BadgeIcon &&
+
+ )}
+
+ {/* Content Overlay (bottom) */}
+
+ {/* Title */}
+ {title &&
+ {toDisplayString(title)}
} + + {/* Description */} + {description &&{toDisplayString(description)}
} +
+ {renderRecordActions(record)}
+
+ )}
+ handleCardClick(event, record)}
+ >
+ {/* Selection Checkbox (floating) */}
+ {bulkActionsAvailable && (
+
+ );
+ };
+
+ // ================================
+ // DEFAULT CARD STYLE (Fallback)
+ // Used when no specific style or when style is unrecognized
+ // ================================
+ const renderDefaultCard = (record: any) => {
+ const badge = getBadge(record);
+ const title = getTitle(record);
+
+ return (
+
+ handleSelectRecord(record.id)}
+ aria-label={`Select record #${toDisplayString(record.id)}`}
+ className="size-5 rounded border-2 border-white/80 bg-white/90 backdrop-blur-sm shadow-sm cursor-pointer hover:border-primary/60"
+ />
+
+ )}
+
+ {/* Badge (floating top-right) */}
+ {badge && (
+
+
+ )}
+
+ {/* Product Image Container */}
+ {grid.card?.showImage !== false && (
+
+
+
+ {imageUrl ? (
+
+ ) : (
+
+ )}
+
+ {/* Product Info */}
+
+
+ )}
+
+
+
+ {/* Subtitle (e.g., Category) */}
+ {subtitle && (
+
+
+ {/* Actions Footer */}
+ {record._actions && record._actions.length > 0 && grid.card?.actionsPosition === 'bottom' && (
+
+ {toDisplayString(subtitle)}
+
+ )}
+
+ {/* Title */}
+ {title && (
+ + {toDisplayString(title)} +
+ )} + + {/* Description */} + {description &&{toDisplayString(description)}
} + + {/* Rating */} + {record.rating ? ( +
+
+ ) : null}
+
+ {/* Price & Stock Section */}
+
+ {FIVE.map((i) => (
+
+ ({toDisplayString(record.review_count || 0)})
+
+
+
+ {/* Price */}
+ {price ? (
+
+
+
+ {typeof price === 'number' ? `$${price.toFixed(2)}` : toDisplayString(price)}
+
+
+ ) : null}
+
+ {/* Stock Status */}
+ {record.stock_quantity !== undefined && (
+
+
+ )}
+ 10 ? 'bg-emerald-500' : record.stock_quantity > 0 ? 'bg-amber-500' : 'bg-red-500',
+ )}
+ >
+ 10 ? 'text-emerald-600' : record.stock_quantity > 0 ? 'text-amber-600' : 'text-red-600',
+ )}
+ >
+ {record.stock_quantity > 0 ? `${record.stock_quantity} in stock` : 'Out of stock'}
+
+
+ {renderRecordActions(record)}
+
+ )}
+
+ {title ? (
+
+ {badge && (
+ {toDisplayString(title)}
+ ) : ( + Record #{toDisplayString(record.id)} + )} +
+ {/* Select All (when bulk actions available) */}
+ {bulkActionsAvailable && records.length > 0 && (
+
+ );
+}
diff --git a/resources/react/components/DataTable.css b/resources/react/components/DataTable.css
new file mode 100644
index 0000000..2ab5952
--- /dev/null
+++ b/resources/react/components/DataTable.css
@@ -0,0 +1,45 @@
+/* Global scrollbar styles from DataTable.vue (not scoped for proper pseudo-element support) */
+/* Custom scrollbar for DataTable - thin and elegant */
+.custom-scrollbar::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+ background: transparent;
+ margin: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+ background: hsl(var(--muted-foreground) / 0.3);
+ border-radius: 9999px;
+ transition: background 0.15s ease;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+ background: hsl(var(--muted-foreground) / 0.5);
+}
+
+/* Dark mode scrollbar */
+.dark .custom-scrollbar::-webkit-scrollbar-thumb {
+ background: hsl(var(--muted-foreground) / 0.25);
+}
+
+.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+ background: hsl(var(--muted-foreground) / 0.4);
+}
+
+/* Firefox scrollbar */
+.custom-scrollbar {
+ scrollbar-width: thin;
+ scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
+}
+
+.dark .custom-scrollbar {
+ scrollbar-color: hsl(var(--muted-foreground) / 0.25) transparent;
+}
+
+/* Scrollbar corner */
+.custom-scrollbar::-webkit-scrollbar-corner {
+ background: transparent;
+}
diff --git a/resources/react/components/DataTable.tsx b/resources/react/components/DataTable.tsx
new file mode 100644
index 0000000..6235ee7
--- /dev/null
+++ b/resources/react/components/DataTable.tsx
@@ -0,0 +1,708 @@
+import { Skeleton } from '@/components/ui/skeleton';
+import { cn } from '@/lib/utils';
+import { router } from '@inertiajs/react';
+import RecordActions from '@laravilt/actions/components/RecordActions';
+import { useLatest } from '@laravilt/support/composables/hooks';
+import { useLocalization } from '@laravilt/support/composables/useLocalization';
+import { ArrowDown, ArrowUp, ArrowUpDown, GripVertical, Inbox } from 'lucide-react';
+import { useMemo, useState, type ComponentType, type CSSProperties, type DragEvent, type MouseEvent, type ReactNode } from 'react';
+import { useWatch } from '../composables/useWatch';
+import ColorColumn from './columns/ColorColumn';
+import IconColumn from './columns/IconColumn';
+import ImageColumn from './columns/ImageColumn';
+import TextColumn from './columns/TextColumn';
+import ToggleColumn from './columns/ToggleColumn';
+import './DataTable.css';
+
+export interface Column {
+ component: string;
+ name: string;
+ label: string;
+ sortable?: boolean;
+ toggleable?: boolean;
+ [key: string]: any;
+}
+
+export interface TableRecord {
+ id: number | string;
+ _url?: string;
+ [key: string]: any;
+}
+
+export interface Action {
+ name: string;
+ label?: string;
+ icon?: string;
+ color?: string;
+ url?: string;
+ requiresConfirmation?: boolean;
+ [key: string]: any;
+}
+
+export interface GroupConfig {
+ column: string;
+ label: string;
+ collapsible: boolean;
+}
+
+export interface RecordGroup {
+ value: string | number | null;
+ title: string;
+ description?: string | null;
+ records: TableRecord[];
+}
+
+export interface DataTableProps {
+ columns?: Column[];
+ records?: TableRecord[];
+ loading?: boolean;
+ skeletonRows?: number;
+ sortColumn?: string | null;
+ sortDirection?: 'asc' | 'desc';
+ visibleColumns?: string[];
+ bulkActionsAvailable?: boolean;
+ resourceSlug?: string;
+ columnExecutionRoute?: string;
+ modelClass?: string;
+ recordActions?: Action[];
+ executionRoute?: string;
+ clearSelections?: number;
+ fixedActions?: boolean;
+ striped?: boolean;
+ infiniteScroll?: boolean;
+ useAjax?: boolean;
+ reorderable?: boolean;
+ reorderableColumn?: string;
+ reorderRoute?: string;
+ activeGroup?: string | null;
+ groups?: GroupConfig[];
+ onSort?: (column: string, direction: 'asc' | 'desc') => void;
+ onUpdateSelectedRecords?: (records: (number | string)[]) => void;
+ onActionComplete?: (data?: any) => void;
+ onReorder?: (items: { id: number | string; order: number }[]) => void;
+ /** Vue slot `empty` */
+ empty?: ReactNode;
+ /** Vue scoped slot `actions` */
+ actions?: (scope: { record: TableRecord }) => ReactNode;
+}
+
+const EMPTY_COLUMNS: Column[] = [];
+const EMPTY_RECORDS: TableRecord[] = [];
+const EMPTY_STRINGS: string[] = [];
+const EMPTY_ACTIONS: Action[] = [];
+const EMPTY_GROUPS: GroupConfig[] = [];
+
+// Scoped `.group` rule from DataTable.vue (smooth transitions for row hover states)
+const ROW_TRANSITION_STYLE: CSSProperties = {
+ transition: 'background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out',
+};
+
+const CHECKBOX_CLASS =
+ 'peer size-4 shrink-0 appearance-none rounded border border-input bg-background shadow-sm ring-offset-background transition-all duration-150 hover:border-primary/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 checked:border-primary checked:bg-primary checked:text-primary-foreground cursor-pointer';
+
+function CheckIcon() {
+ return (
+
+ );
+}
+
+export default function DataTable({
+ columns = EMPTY_COLUMNS,
+ records = EMPTY_RECORDS,
+ loading = false,
+ skeletonRows = 10,
+ sortColumn = null,
+ sortDirection = 'asc',
+ visibleColumns = EMPTY_STRINGS,
+ bulkActionsAvailable = false,
+ resourceSlug = '',
+ columnExecutionRoute,
+ modelClass,
+ executionRoute,
+ clearSelections = 0,
+ fixedActions = false,
+ striped = false,
+ reorderable = false,
+ reorderableColumn = 'sort_order',
+ reorderRoute,
+ activeGroup = null,
+ groups = EMPTY_GROUPS,
+ onSort,
+ onUpdateSelectedRecords,
+ onActionComplete,
+ onReorder,
+ empty,
+ actions,
+}: DataTableProps) {
+ const { trans } = useLocalization();
+ const recordsRef = useLatest(records);
+
+ // Drag and drop state for reorderable
+ const [draggedIndex, setDraggedIndex] = useState
+
+
+ )}
+
+ {isLoading && !loadingMore ? (
+ // Loading State (show skeleton when loading initial data)
+
+ {cardStyle === 'product'
+ ? // Product Card Skeleton
+ SKELETON_INDEXES.map((i) => (
+
+ ) : records.length > 0 ? (
+ // Grid Content with records (+ loading more skeletons at bottom)
+
+
+ ))
+ : // Simple Card Skeleton (default)
+ SKELETON_INDEXES.map((i) => (
+
+
+ ))}
+
+ {records.map((record) => renderCard(record))}
+
+ {/* Loading more skeleton cards (shown at bottom while infinite scrolling) */}
+ {loadingMore && cardStyle === 'product'
+ ? LOADING_MORE_INDEXES.map((i) => (
+
+ ) : (
+ // Empty State (only when not loading and no records)
+
+
+ ))
+ : loadingMore
+ ? LOADING_MORE_INDEXES.map((i) => (
+
+
+ ))
+ : null}
+
+
+ )}
+
+
+ {grid.emptyState?.heading || 'No records found'}
+ {grid.emptyState?.description ? ( +{grid.emptyState.description}
+ ) : ( +There are no records to display. Try adjusting your filters or search query.
+ )} +
+ {!loading && !records.length ? (
+ // Empty State
+
+ {/* Table Header */}
+
+
+ )}
+
+ );
+}
diff --git a/resources/react/components/GridToolbar.tsx b/resources/react/components/GridToolbar.tsx
new file mode 100644
index 0000000..8d39395
--- /dev/null
+++ b/resources/react/components/GridToolbar.tsx
@@ -0,0 +1,291 @@
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { cn } from '@/lib/utils';
+import { useLocalization } from '@laravilt/support/composables';
+import { ArrowDown, ArrowUp, ArrowUpDown, Search, SlidersHorizontal, X } from 'lucide-react';
+import { useState, type KeyboardEvent, type ReactNode } from 'react';
+import { useWatch } from '../composables/useWatch';
+
+interface FilterIndicator {
+ label: string;
+ removeField: string;
+}
+
+export interface GridToolbarProps {
+ searchable?: boolean;
+ searchPlaceholder?: string;
+ search?: string;
+ filters?: any[];
+ activeFilters?: Record
+
+ ) : (
+ // Table Content (only show when there are records or loading)
+
+ {empty != null ? (
+ empty
+ ) : (
+
+
+
+ )}
+
+
+ No records found
++ There are no records to display. Try adjusting your filters or search query. +
+| + Reorder + | + )} + + {/* Checkbox Column (if bulk actions available) */} + {bulkActionsAvailable && ( ++ + | + )} + + {/* Data Column Headers */} + {visibleColumnsFiltered.map((column) => { + const SortIcon = getSortIcon(column); + + return ( + handleSort(column)}
+ >
+
+ {column.label}
+ {column.sortable && SortIcon && (
+
+ |
+ );
+ })}
+
+ {/* Actions Header */}
+ {hasRecordActions && (
+ + {trans('tables::tables.columns.actions')} + | + )} +|
|---|---|---|---|---|
| } + + {/* Checkbox Skeleton */} + {bulkActionsAvailable && ( + |
+ |
+ )}
+
+ {/* Column Skeletons */}
+ {visibleColumnsFiltered.map((column) => (
+
+ |
+ ))}
+
+ {/* Actions Skeleton */}
+ {hasRecordActions && (
+
+
+ {actionSkeletonIndexes.map((n) => (
+
+ |
+ )}
+ |
|
+ |
+ )}
+
+ {/* Checkbox Column */}
+ {bulkActionsAvailable && (
+ + + | + )} + + {/* Data Columns */} + {visibleColumnsFiltered.map((column, columnIndex) => { + const ColumnComponent = getColumnComponent(column.component); + + return ( +
+ {/* Same binding order as Vue: column config overrides the record-level values */}
+ |
+ );
+ })}
+
+ {/* Actions Column */}
+ {record._actions && record._actions.length > 0 ? (
+
+
+ {actions ? (
+ actions({ record })
+ ) : (
+
+ |
+ ) : hasRecordActions ? (
+ + ) : null} + |
+ {/* Bulk Actions Bar */}
+ {bulkActionsAvailable && selectedCount > 0 && (
+
+ );
+}
diff --git a/resources/react/components/Table.tsx b/resources/react/components/Table.tsx
new file mode 100644
index 0000000..5410bc3
--- /dev/null
+++ b/resources/react/components/Table.tsx
@@ -0,0 +1,1036 @@
+import { cn } from '@/lib/utils';
+import { router } from '@inertiajs/react';
+import ActionButton from '@laravilt/actions/components/ActionButton';
+import LaraviltComponentRenderer from '@laravilt/forms/components/LaraviltComponentRenderer';
+import { useLocalization } from '@laravilt/support/composables';
+import { useLatest } from '@laravilt/support/composables/hooks';
+import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, type MouseEvent } from 'react';
+import { useStateRef } from '../composables/useStateRef';
+import { useWatch } from '../composables/useWatch';
+import CardGrid from './CardGrid';
+import DataTable from './DataTable';
+import TableToolbar from './TableToolbar';
+
+export interface FilterIndicator {
+ label: string;
+ removeField: string;
+}
+
+export interface RelationContext {
+ baseUrl: string;
+ relationship: string;
+ canEdit: boolean;
+ canDelete: boolean;
+ columnExecutionRoute?: string;
+}
+
+export interface TableProps {
+ table: any;
+ records?: any[];
+ pagination?: any;
+ recordActions?: any[];
+ bulkActions?: any[];
+ filterIndicators?: FilterIndicator[];
+ resourceSlug: string;
+ queryRoute: string;
+ loading?: boolean;
+ currentView?: 'table' | 'grid';
+ useAjax?: boolean; // Use fetch API instead of Inertia router (for relation managers)
+ onDataLoaded?: (data: { records: any[]; pagination: any }) => void; // Callback when data is loaded via AJAX (Vue: prop + `data-loaded` event)
+ relationContext?: RelationContext; // Context for relation manager to build record-specific URLs
+ onActionComplete?: (data?: any) => void;
+}
+
+const DEFAULT_PAGINATION = {
+ total: 0,
+ per_page: 12,
+ current_page: 1,
+ last_page: 1,
+ from: 0,
+ to: 0,
+};
+
+const EMPTY: any[] = [];
+const EMPTY_INDICATORS: FilterIndicator[] = [];
+
+// Preserve existing URL params that we don't manage (like 'view')
+const PRESERVE_PARAMS = ['view'];
+
+export default function Table({
+ table,
+ records = EMPTY,
+ pagination = DEFAULT_PAGINATION,
+ recordActions = EMPTY,
+ bulkActions = EMPTY,
+ filterIndicators = EMPTY_INDICATORS,
+ resourceSlug,
+ queryRoute,
+ loading = false,
+ currentView = 'table',
+ useAjax = false,
+ onDataLoaded,
+ relationContext,
+ onActionComplete,
+}: TableProps) {
+ const { trans } = useLocalization();
+
+ // Latest props for async callbacks (timeouts, observer, window listener, fetch)
+ const live = useLatest({ table, pagination, queryRoute, useAjax, onDataLoaded, onActionComplete });
+
+ // Extract bulk actions from toolbarActions (handles BulkActionGroup)
+ const extractedBulkActions = useMemo(() => {
+ let actions: any[] = [];
+
+ // First, check if bulk actions are directly provided
+ if (bulkActions && bulkActions.length > 0) {
+ actions = bulkActions;
+ }
+ // Then check table's bulkActions
+ else if (table.bulkActions && table.bulkActions.length > 0) {
+ actions = table.bulkActions;
+ }
+ // Finally, extract from toolbarActions (look for BulkActionGroup)
+ else if (table.toolbarActions && table.toolbarActions.length > 0) {
+ for (const action of table.toolbarActions) {
+ // Check if this is a BulkActionGroup
+ if (action.type === 'bulk-action-group' && action.actions) {
+ actions.push(...action.actions);
+ }
+ }
+ }
+
+ // Filter out hidden actions (based on isHidden property from backend)
+ // and set preserveState: false for all bulk actions so table refreshes after action
+ return actions
+ .filter((action) => !action.isHidden)
+ .map((action) => ({
+ ...action,
+ preserveState: action.preserveState ?? false,
+ isBulkAction: true,
+ deselectRecordsAfterCompletion: action.deselectRecordsAfterCompletion ?? true,
+ }));
+ }, [bulkActions, table.bulkActions, table.toolbarActions]);
+
+ // Check if table is configured for grid-only mode
+ const isGridOnly = table.gridOnly === true && table.card !== null && table.card !== undefined;
+
+ // Determine if we should show grid view (if gridOnly is enabled, always show grid)
+ const isGridView = isGridOnly ? true : currentView === 'grid' && table.card !== null && table.card !== undefined;
+
+ // Check if table has card configuration (for view toggle visibility) — not used by the template (same as Vue)
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const hasGridOption = isGridOnly ? false : table.card !== null && table.card !== undefined;
+
+ const [sortColumn, setSortColumn, sortColumnRef] = useStateRef
+ {selectedCount} selected
+
+ )}
+
+ {/* Top Row: Search and Filters */}
+ {bulkActions}
+
+ {/* Search */}
+ {searchable && (
+
+
+ {/* Active Filters Display */}
+ {(hasActiveFilters || hasActiveSearch || hasComputedFilterIndicators) && (
+
+ ) => {
+ if (event.key === 'Enter') handleSearchSubmit();
+ }}
+ />
+ {hasActiveSearch && (
+
+ )}
+
+ )}
+
+
+ {/* Sort Button */}
+ {sortableColumns.length > 0 && (
+
+
+
+
+
+
+
+ )}
+
+ {/* Filters Button */}
+ {filters.length > 0 && (
+
+
+
+
+
+
+
+ )}
+
+ {/* Toolbar Actions Slot */}
+ {toolbarActions}
+
+
+
+ Sort by
+
+ {sortableColumns.map((column: any) => (
+
+ ))}
+
+
+
+
+
+ Filters
+ {hasActiveFilters && ( + + )} +{filtersSlot}
+
+ Active filters:
+
+ {hasActiveSearch && (
+
+ Search: "{search}"
+
+
+ )}
+
+ {computedFilterIndicators.map((indicator, index) => (
+
+ {indicator.label}
+
+
+ ))}
+
+ {activeFiltersSlot}
+
+ {(hasActiveFilters || hasActiveSearch || hasComputedFilterIndicators) && (
+
+ )}
+
+ )}
+
+ {/* Table with integrated toolbar */}
+
+ );
+}
diff --git a/resources/react/components/TableToolbar.tsx b/resources/react/components/TableToolbar.tsx
new file mode 100644
index 0000000..8ababd9
--- /dev/null
+++ b/resources/react/components/TableToolbar.tsx
@@ -0,0 +1,467 @@
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+ DropdownMenu,
+ DropdownMenuCheckboxItem,
+ DropdownMenuContent,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/input';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { cn } from '@/lib/utils';
+import { useLocalization } from '@laravilt/support/composables/useLocalization';
+import { ArrowDown, ArrowUp, ArrowUpDown, Check, Columns3, Eye, EyeOff, LayoutList, Search, SlidersHorizontal, X } from 'lucide-react';
+import { useState, type KeyboardEvent, type ReactNode } from 'react';
+import { useWatch } from '../composables/useWatch';
+
+interface Column {
+ name: string;
+ label: string;
+ toggleable?: boolean;
+ [key: string]: any;
+}
+
+interface Filter {
+ name: string;
+ label: string;
+ component: string;
+ [key: string]: any;
+}
+
+interface FilterIndicator {
+ label: string;
+ removeField: string;
+}
+
+interface GroupConfig {
+ column: string;
+ label: string;
+ collapsible: boolean;
+}
+
+export interface TableToolbarProps {
+ searchable?: boolean;
+ searchPlaceholder?: string;
+ search?: string;
+ filters?: Filter[];
+ activeFilters?: Record
+ {/* Search, Filters, and Column Visibility (Fixed at top) */}
+
+
+ {table && (
+ 0}
+ selectedCount={selectedRecords.length}
+ showSort={isGridView}
+ sortColumn={sortColumn}
+ sortDirection={sortDirection}
+ groups={table.groups}
+ activeGroup={activeGroup}
+ visibleColumns={visibleColumns}
+ onUpdateVisibleColumns={setVisibleColumns}
+ onUpdateSearch={handleSearch}
+ onUpdateFilters={handleFilterChange}
+ onRemoveFilter={removeFilter}
+ onClearFilters={clearAllFilters}
+ onUpdateSort={handleSort}
+ onUpdateActiveGroup={handleGroupChange}
+ toolbarActions={(table.headerActions || []).map((action: any) => (
+
+
+ {/* Scrollable Records Area */}
+
+ {filter.formField ? (
+ // Render custom form field if available
+ handleFilterUpdate(filter.name, value),
+ }}
+ />
+ ) : (
+ // Fallback to default filter component based on type
+ handleFilterUpdate(filter.name, value),
+ }}
+ />
+ )}
+
+ ))}
+ bulkActions={extractedBulkActions.map((action: any) => (
+
+ {!isGridView ? (
+ // Render DataTable for table view
+ 0}
+ resourceSlug={resourceSlug}
+ columnExecutionRoute={relationContext?.columnExecutionRoute || table.columnExecutionRoute}
+ modelClass={table.model}
+ clearSelections={clearSelectionsKey}
+ fixedActions={table.fixedActions}
+ striped={table.striped}
+ infiniteScroll={isInfiniteScrollActive}
+ useAjax={useAjax}
+ reorderable={table.reorderable}
+ reorderableColumn={table.reorderableColumn}
+ reorderRoute={table.reorderRoute}
+ groups={table.groups}
+ activeGroup={activeGroup}
+ onSort={handleSort}
+ onUpdateSelectedRecords={handleUpdateSelectedRecords}
+ onActionComplete={handleActionComplete}
+ onReorder={handleReorder}
+ />
+ ) : (
+ // Render CardGrid for grid view
+ 0}
+ resourceSlug={resourceSlug}
+ modelClass={table.model}
+ clearSelections={clearSelectionsKey}
+ onUpdateSelectedRecords={handleUpdateSelectedRecords}
+ />
+ )}
+
+ {/* Infinite Scroll Loading Indicator & Observer (inside scrollable area) */}
+ {isInfiniteScrollActive && (
+
+ {/* End Scrollable Records Area */}
+
+ {/* Pagination (Fixed at bottom) */}
+ {!isInfiniteScrollActive && pagination && pagination.total > 0 && (
+
+ {isLoadingMore ? (
+
+ )}
+
+
+ ) : pagination && pagination.current_page < pagination.last_page ? (
+
+
+ {trans('tables::tables.infinite_scroll.loading_more')}
+
+
+
+ ) : (
+
+ {trans('tables::tables.infinite_scroll.scroll_for_more')}
+
+
+ {trans('tables::tables.infinite_scroll.no_more_records')}
+
+ )}
+
+
+ )}
+
+ {/* Pagination Info (left side) */}
+
+
+ {trans('tables::tables.pagination.showing')} {pagination.from} {trans('tables::tables.pagination.to')} {pagination.to}{' '}
+ {trans('tables::tables.pagination.of')} {pagination.total}
+
+
+ {/* Pagination Controls (centered) */}
+
+ {/* Previous Button */}
+
+
+ {/* Page Numbers */}
+
+
+ {/* Per Page Selector (right side) */}
+
+ {getPageNumbers().map((page, index) =>
+ page === '...' ? (
+
+ ...
+
+ ) : (
+
+ ),
+ )}
+
+
+ {/* Next Button */}
+
+
+
+
+
+
+ {/* Bulk Actions Bar (when items are selected) */}
+ {bulkActionsAvailable && selectedCount > 0 && (
+
+ );
+}
diff --git a/resources/react/components/columns/ColorColumn.tsx b/resources/react/components/columns/ColorColumn.tsx
new file mode 100644
index 0000000..1cc4f6f
--- /dev/null
+++ b/resources/react/components/columns/ColorColumn.tsx
@@ -0,0 +1,127 @@
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import { useNotification } from '@laravilt/notifications/composables/useNotification';
+
+export interface ColorColumnProps {
+ value: any;
+ copyable?: boolean;
+ copyMessage?: string | null;
+ copyMessageDuration?: number | null;
+ wrap?: boolean;
+ description?: string | null;
+ descriptionPosition?: 'above' | 'below';
+ maxVisible?: number;
+}
+
+export default function ColorColumn({
+ value,
+ copyable = false,
+ copyMessage = null,
+ copyMessageDuration = null,
+ description = null,
+ descriptionPosition = 'below',
+ maxVisible = 4,
+}: ColorColumnProps) {
+ const { notify } = useNotification();
+
+ const colors: any[] = !value ? [] : Array.isArray(value) ? value : [value];
+ const visibleColors = colors.slice(0, maxVisible);
+ const hiddenColors = colors.slice(maxVisible);
+ const hasMoreColors = colors.length > maxVisible;
+
+ const handleCopy = (color: string) => {
+ if (copyable && color) {
+ navigator.clipboard.writeText(color);
+ notify(copyMessage || 'Copied!', `Color ${color} copied to clipboard`, 'success', {
+ duration: copyMessageDuration || 1500,
+ });
+ }
+ };
+
+ return (
+
+
+ {selectedCount} {trans('tables::tables.bulk.selected').replace(':count ', '')}
+
+
+ )}
+
+ {/* Top Row: Search, Filters, Column Toggle */}
+ {bulkActions}
+
+ {/* Search */}
+ {searchable && (
+
+
+ {/* Active Filters Display */}
+ {(hasActiveFilters || hasActiveSearch || hasComputedFilterIndicators) && (
+
+ ) => {
+ if (event.key === 'Enter') handleSearchSubmit();
+ }}
+ />
+ {hasActiveSearch && (
+
+ )}
+
+ )}
+
+
+ {/* Sort Button (for grid view) */}
+ {showSort && sortableColumns.length > 0 && (
+
+
+
+
+
+
+
+ )}
+
+ {/* Filters Button */}
+ {filters.length > 0 && (
+
+
+
+
+
+
+
+ )}
+
+ {/* Group By Selector */}
+ {hasGroups && (
+
+
+
+
+
+
+
+ )}
+
+ {/* Column Toggle */}
+ {toggleableColumns.length > 0 && (
+
+
+
+
+
+ {trans('tables::tables.toolbar.toggle_columns')}
+ {
+ event.preventDefault();
+ toggleColumn(column.name);
+ }}
+ className="gap-2"
+ >
+
+ );
+ })}
+
+
+ )}
+
+ {/* Toolbar Actions Slot */}
+ {toolbarActions}
+
+
+
+ {trans('tables::tables.toolbar.sort_by')}
+
+ {sortableColumns.map((column) => (
+
+ ))}
+
+
+
+
+
+ {trans('tables::tables.toolbar.filters')}
+ {hasActiveFilters && ( + + )} +{filtersSlot}
+
+
+ {trans('tables::tables.toolbar.group_by') || 'Group by'}
+
+ {/* No Grouping Option */}
+
+ {/* Group Options */}
+ {groups.map((group) => (
+
+ ))}
+
+
+ {trans('tables::tables.toolbar.active_filters')}:
+
+ {hasActiveSearch && (
+
+ {trans('tables::tables.toolbar.search')}: "{search}"
+
+
+ )}
+
+ {/* Computed filter indicators with individual removal */}
+ {computedFilterIndicators.map((indicator, index) => (
+
+ {indicator.label}
+
+
+ ))}
+
+ {activeFiltersSlot}
+
+ {(hasActiveFilters || hasActiveSearch || hasComputedFilterIndicators) && (
+
+ )}
+
+ )}
+
+ {/* Description above */}
+ {description && descriptionPosition === 'above' && (
+
+ );
+}
diff --git a/resources/react/components/columns/IconColumn.tsx b/resources/react/components/columns/IconColumn.tsx
new file mode 100644
index 0000000..8dc22ee
--- /dev/null
+++ b/resources/react/components/columns/IconColumn.tsx
@@ -0,0 +1,52 @@
+import { cn } from '@/lib/utils';
+import { resolveColumnIcon } from '../../lib/icons';
+
+export interface IconColumnProps {
+ value: any;
+ boolean?: boolean;
+ wrap?: boolean;
+ icon?: string | null;
+ color?: string | null;
+ size?: string | null;
+}
+
+// Map color to Tailwind classes
+const colorMap: Record{description}
+ )}
+
+ {colors.length > 1 ? (
+ // Main content - stacked circles style for multiple colors
+
+
+ ) : colors.length === 1 ? (
+ // Single color - simple square style
+
+ {visibleColors.map((color: any, index: number) => (
+
+
+
+ ) : null}
+
+ {/* Description below */}
+ {description && descriptionPosition === 'below' && (
+ {description}
+ )}
+
+ {LucideIconComponent &&
+ );
+}
diff --git a/resources/react/components/columns/ImageColumn.tsx b/resources/react/components/columns/ImageColumn.tsx
new file mode 100644
index 0000000..9b7ff1d
--- /dev/null
+++ b/resources/react/components/columns/ImageColumn.tsx
@@ -0,0 +1,211 @@
+import { cn } from '@/lib/utils';
+import type { CSSProperties, SyntheticEvent } from 'react';
+
+export interface ImageColumnProps {
+ value: any;
+ imageWidth?: string | number | null;
+ imageHeight?: string | number | null;
+ square?: boolean;
+ circular?: boolean;
+ stacked?: boolean;
+ ring?: number;
+ overlap?: number;
+ limit?: number | null;
+ limitedRemainingText?: boolean;
+ limitedRemainingTextSize?: string;
+ wrap?: boolean;
+ disk?: string | null;
+ visibility?: string | null;
+ defaultImageUrl?: string | null;
+ checkFileExistence?: boolean;
+ extraImgAttributes?: Record
+ {/* Description above */}
+ {description && descriptionPosition === 'above' && (
+
+ );
+}
diff --git a/resources/react/components/columns/TextColumn.tsx b/resources/react/components/columns/TextColumn.tsx
new file mode 100644
index 0000000..ec3f17e
--- /dev/null
+++ b/resources/react/components/columns/TextColumn.tsx
@@ -0,0 +1,310 @@
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import { useNotification } from '@laravilt/notifications/composables/useNotification';
+import { Copy } from 'lucide-react';
+import type { MouseEvent } from 'react';
+import { toDisplayString } from '../../lib/display';
+import { resolveColumnIcon } from '../../lib/icons';
+
+export interface TextColumnProps {
+ value: any;
+ limit?: number;
+ wrap?: boolean;
+ copyable?: string | null;
+ badge?: boolean;
+ dateTimeFormat?: string | null;
+ dateFormat?: string | null;
+ icon?: string | null;
+ weight?: string | null;
+ moneyFormat?: { currency: string; divideBy: number } | null;
+ color?: string | null;
+ description?: string | null;
+ descriptionPosition?: 'above' | 'below';
+ html?: boolean;
+ placeholder?: string | null;
+ // New FilamentPHP v4 compatible props
+ alignment?: 'start' | 'center' | 'end' | 'justify';
+ tooltip?: string | null;
+ url?: string | null;
+ openUrlInNewTab?: boolean;
+ prefix?: string | null;
+ suffix?: string | null;
+ grow?: boolean;
+ size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | null;
+}
+
+// Map color to badge variant
+const badgeColorMap: Record{description}
+ )}
+
+ {/* Main content */}
+
+ {stacked ? (
+ // Stacked images
+ })
handleImageError(event, image)}
+ />
+ ))}
+
+ {limitedRemainingText && remainingCount > 0 && (
+ +{remainingCount}
+ )}
+
+ )}
+
+
+ {/* Description below */}
+ {description && descriptionPosition === 'below' && (
+
+ {displayImages.map((image: any, index: number) => (
+
+ ) : (
+ // Regular images
+ <>
+ {displayImages.map((image: any, index: number) => (
+ 0 && overlapClass)}>
+ handleImageError(event, image)}
+ />
+
+ ))}
+
+ {limitedRemainingText && remainingCount > 0 && (
+ +{remainingCount}
+ )}
+ {description}
+ )}
+
+ {(value as any[]).map((item: any, index: number) => (
+
+ {LucideIconComponent &&
+ ))}
+
+ ) : badge && !isEmpty ? (
+ // Single badge
+
+ {displayValue}
+
+ ) : (
+ // Regular text
+ {displayValue}
+ )}
+
+ {copyable && (
+
+ )}
+
+ {/* Description above */}
+ {description && descriptionPosition === 'above' && (
+
+
+ {content}
+
+
+
+
+ ) : (
+ content
+ )}
+
+ {/* Description below */}
+ {description && descriptionPosition === 'below' && (
+
+ );
+}
diff --git a/resources/react/components/columns/ToggleColumn.tsx b/resources/react/components/columns/ToggleColumn.tsx
new file mode 100644
index 0000000..84a76b2
--- /dev/null
+++ b/resources/react/components/columns/ToggleColumn.tsx
@@ -0,0 +1,129 @@
+import { Switch } from '@/components/ui/switch';
+import { cn } from '@/lib/utils';
+import { router } from '@inertiajs/react';
+import { useNotification } from '@laravilt/notifications/composables/useNotification';
+import { useLocalization } from '@laravilt/support/composables/useLocalization';
+import { useEffect, useState } from 'react';
+import { useStateRef } from '../../composables/useStateRef';
+
+export interface ToggleColumnProps {
+ value: any;
+ name: string;
+ recordId: number | string;
+ resourceSlug?: string;
+ columnExecutionRoute?: string;
+ editable?: boolean;
+ disabled?: boolean;
+ description?: string | null;
+ descriptionPosition?: 'above' | 'below';
+ // Text labels for i18n support
+ successNotificationTitle?: string;
+ successNotificationMessage?: string;
+ errorNotificationTitle?: string;
+ errorNotificationMessage?: string;
+}
+
+export default function ToggleColumn({
+ value,
+ name,
+ recordId,
+ columnExecutionRoute,
+ editable = true,
+ disabled = false,
+ description = null,
+ descriptionPosition = 'below',
+ successNotificationTitle = 'Updated',
+ successNotificationMessage = 'Value updated successfully',
+ errorNotificationTitle = 'Error',
+ errorNotificationMessage = 'Failed to update value',
+}: ToggleColumnProps) {
+ const { trans } = useLocalization();
+ const { notify } = useNotification();
+
+ // Compute the execution URL - replace __ID__ placeholder with actual record ID
+ const executionUrl = columnExecutionRoute ? columnExecutionRoute.replace('__ID__', String(recordId)) : null;
+
+ // Translated labels - use tables::tables namespace
+ const translatedSuccessTitle =
+ successNotificationTitle !== 'Updated' ? successNotificationTitle : trans('tables::tables.toggle_column.success_notification_title');
+ const translatedSuccessMessage =
+ successNotificationMessage !== 'Value updated successfully'
+ ? successNotificationMessage
+ : trans('tables::tables.toggle_column.success_notification_message');
+ const translatedErrorTitle =
+ errorNotificationTitle !== 'Error' ? errorNotificationTitle : trans('tables::tables.toggle_column.error_notification_title');
+ const translatedErrorMessage =
+ errorNotificationMessage !== 'Failed to update value'
+ ? errorNotificationMessage
+ : trans('tables::tables.toggle_column.error_notification_message');
+
+ // Use the same boolean conversion as the Edit page - simple Boolean() cast
+ const [localValue, setLocalValue] = useState{description}
+ )}
+
+ {/* Wrap with tooltip if provided */}
+ {tooltip ? (
+ {tooltip}
+{description}
+ )}
+
+ {/* Description above */}
+ {description && descriptionPosition === 'above' && (
+
+ );
+}
diff --git a/resources/react/components/filters/TextFilter.tsx b/resources/react/components/filters/TextFilter.tsx
new file mode 100644
index 0000000..17c6ff1
--- /dev/null
+++ b/resources/react/components/filters/TextFilter.tsx
@@ -0,0 +1,52 @@
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useState, type KeyboardEvent } from 'react';
+import { useWatch } from '../../composables/useWatch';
+
+export interface TextFilterProps {
+ name: string;
+ label: string;
+ modelValue?: string | null;
+ placeholder?: string;
+ type?: 'text' | 'email' | 'url' | 'number';
+ onUpdateModelValue?: (value: string | null) => void;
+}
+
+export default function TextFilter({
+ name,
+ label,
+ modelValue = null,
+ placeholder = 'Enter text...',
+ type = 'text',
+ onUpdateModelValue,
+}: TextFilterProps) {
+ const [localValue, setLocalValue] = useState{description}
+ )}
+
+ {/* Main content */}
+
+ setChecked(checked)}
+ />
+
+
+ {/* Description below */}
+ {description && descriptionPosition === 'below' && (
+ {description}
+ )}
+
+
+ setLocalValue(event.target.value)}
+ onBlur={handleInput}
+ onKeyUp={(event: KeyboardEvent) => {
+ if (event.key === 'Enter') handleInput();
+ }}
+ />
+
+ );
+}
diff --git a/resources/react/components/filters/ToggleFilter.tsx b/resources/react/components/filters/ToggleFilter.tsx
new file mode 100644
index 0000000..17a34bd
--- /dev/null
+++ b/resources/react/components/filters/ToggleFilter.tsx
@@ -0,0 +1,26 @@
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+
+export interface ToggleFilterProps {
+ name: string;
+ label: string;
+ modelValue?: boolean | null;
+ description?: string;
+ onUpdateModelValue?: (value: boolean | null) => void;
+}
+
+export default function ToggleFilter({ name, label, modelValue = null, description, onUpdateModelValue }: ToggleFilterProps) {
+ const checked = modelValue === true;
+
+ return (
+
+ onUpdateModelValue?.(value)} />
+
+ );
+}
diff --git a/resources/react/components/grid-columns/ColorGridColumn.tsx b/resources/react/components/grid-columns/ColorGridColumn.tsx
new file mode 100644
index 0000000..d03420d
--- /dev/null
+++ b/resources/react/components/grid-columns/ColorGridColumn.tsx
@@ -0,0 +1,68 @@
+import { cn } from '@/lib/utils';
+import { useNotification } from '@laravilt/notifications/composables/useNotification';
+
+export interface ColorGridColumnProps {
+ value: any;
+ copyable?: boolean;
+ copyMessage?: string | null;
+ copyMessageDuration?: number | null;
+ wrap?: boolean;
+ description?: string | null;
+ descriptionPosition?: 'above' | 'below';
+}
+
+export default function ColorGridColumn({
+ value,
+ copyable = false,
+ copyMessage = null,
+ copyMessageDuration = null,
+ wrap = false,
+ description = null,
+ descriptionPosition = 'below',
+}: ColorGridColumnProps) {
+ const { notify } = useNotification();
+
+ const colors: any[] = !value ? [] : Array.isArray(value) ? value : [value];
+
+ const handleCopy = (color: string) => {
+ if (copyable && color) {
+ navigator.clipboard.writeText(color);
+ notify(copyMessage || 'Copied!', `Color ${color} copied to clipboard`, 'success', {
+ duration: copyMessageDuration || 1500,
+ });
+ }
+ };
+
+ return (
+
+
+ {description &&
+ {description}
} +
+ {/* Description above */}
+ {description && descriptionPosition === 'above' && (
+
+ );
+}
diff --git a/resources/react/components/grid-columns/IconGridColumn.tsx b/resources/react/components/grid-columns/IconGridColumn.tsx
new file mode 100644
index 0000000..bd9bc47
--- /dev/null
+++ b/resources/react/components/grid-columns/IconGridColumn.tsx
@@ -0,0 +1,75 @@
+import { cn } from '@/lib/utils';
+import { resolveColumnIcon } from '../../lib/icons';
+
+export interface IconGridColumnProps {
+ value: any;
+ boolean?: boolean;
+ wrap?: boolean;
+ icon?: string | null;
+ color?: string | null;
+ size?: string | null;
+ description?: string | null;
+ descriptionPosition?: 'above' | 'below';
+}
+
+// Map color to Tailwind classes
+const colorMap: Record{description}
+ )}
+
+ {/* Main content */}
+
+ {colors.map((color: any, index: number) => (
+
+
+ {/* Description below */}
+ {description && descriptionPosition === 'below' && (
+ {description}
+ )}
+
+ {/* Description above */}
+ {description && descriptionPosition === 'above' && (
+
+ );
+}
diff --git a/resources/react/components/grid-columns/ImageGridColumn.tsx b/resources/react/components/grid-columns/ImageGridColumn.tsx
new file mode 100644
index 0000000..452d1b5
--- /dev/null
+++ b/resources/react/components/grid-columns/ImageGridColumn.tsx
@@ -0,0 +1,211 @@
+import { cn } from '@/lib/utils';
+import type { CSSProperties, SyntheticEvent } from 'react';
+
+export interface ImageGridColumnProps {
+ value: any;
+ imageWidth?: string | number | null;
+ imageHeight?: string | number | null;
+ square?: boolean;
+ circular?: boolean;
+ stacked?: boolean;
+ ring?: number;
+ overlap?: number;
+ limit?: number | null;
+ limitedRemainingText?: boolean;
+ limitedRemainingTextSize?: string;
+ wrap?: boolean;
+ disk?: string | null;
+ visibility?: string | null;
+ defaultImageUrl?: string | null;
+ checkFileExistence?: boolean;
+ extraImgAttributes?: Record{description}
+ )}
+
+ {/* Main content */}
+
+ {LucideIconComponent &&
+
+ {/* Description below */}
+ {description && descriptionPosition === 'below' && (
+ {description}
+ )}
+
+ {/* Description above */}
+ {description && descriptionPosition === 'above' && (
+
+ );
+}
diff --git a/resources/react/components/grid-columns/TextGridColumn.tsx b/resources/react/components/grid-columns/TextGridColumn.tsx
new file mode 100644
index 0000000..7d65f2c
--- /dev/null
+++ b/resources/react/components/grid-columns/TextGridColumn.tsx
@@ -0,0 +1,201 @@
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { useNotification } from '@laravilt/notifications/composables/useNotification';
+import { Copy } from 'lucide-react';
+import { toDisplayString } from '../../lib/display';
+import { resolveColumnIcon } from '../../lib/icons';
+
+export interface TextGridColumnProps {
+ value: any;
+ limit?: number;
+ wrap?: boolean;
+ copyable?: string | null;
+ badge?: boolean;
+ dateTimeFormat?: string | null;
+ dateFormat?: string | null;
+ icon?: string | null;
+ weight?: string | null;
+ moneyFormat?: { currency: string; divideBy: number } | null;
+ color?: string | null;
+ description?: string | null;
+ descriptionPosition?: 'above' | 'below';
+}
+
+// Map color to badge variant
+const badgeColorMap: Record{description}
+ )}
+
+ {/* Main content */}
+
+ {stacked ? (
+ // Stacked images
+
+ ))}
+
+ {limitedRemainingText && remainingCount > 0 && (
+ +{remainingCount}
+ )}
+
+ )}
+
+
+ {/* Description below */}
+ {description && descriptionPosition === 'below' && (
+
+ {displayImages.map((image: any, index: number) => (
+
+ ) : (
+ // Regular images
+ <>
+ {displayImages.map((image: any, index: number) => (
+ 0 && overlapClass)}>
+
+
+ ))}
+
+ {limitedRemainingText && remainingCount > 0 && (
+ +{remainingCount}
+ )}
+ {description}
+ )}
+
+ {/* Description above */}
+ {description && descriptionPosition === 'above' && (
+
+ );
+}
diff --git a/resources/react/components/grid-columns/ToggleGridColumn.tsx b/resources/react/components/grid-columns/ToggleGridColumn.tsx
new file mode 100644
index 0000000..075f3ea
--- /dev/null
+++ b/resources/react/components/grid-columns/ToggleGridColumn.tsx
@@ -0,0 +1,107 @@
+import { Switch } from '@/components/ui/switch';
+import { router, usePage } from '@inertiajs/react';
+import { useNotification } from '@laravilt/notifications/composables/useNotification';
+import { useLocalization } from '@laravilt/support/composables/useLocalization';
+import { useEffect, useState } from 'react';
+import { useStateRef } from '../../composables/useStateRef';
+
+export interface ToggleGridColumnProps {
+ value: any;
+ name: string;
+ recordId: number | string;
+ resourceSlug: string;
+ editable?: boolean;
+ disabled?: boolean;
+ description?: string | null;
+ descriptionPosition?: 'above' | 'below';
+}
+
+export default function ToggleGridColumn({
+ value,
+ name,
+ recordId,
+ resourceSlug,
+ editable = true,
+ disabled = false,
+ description = null,
+ descriptionPosition = 'below',
+}: ToggleGridColumnProps) {
+ const { trans } = useLocalization();
+ const { notify } = useNotification();
+
+ // Get the panel path from Inertia shared data
+ const page = usePage();
+ const panelPath = (page.props as any).panel?.path || 'dashboard';
+
+ // Use the same boolean conversion as the Edit page - simple Boolean() cast
+ const [localValue, setLocalValue] = useState{description}
+ )}
+
+ {/* Main content */}
+
+ {/* Icon outside badge when not using badge */}
+ {LucideIconComponent && !badge &&
+ {LucideIconComponent &&
+ ) : (
+ // Regular text
+ {formattedValue}
+ )}
+
+ {copyable && (
+
+ )}
+
+
+ {/* Description below */}
+ {description && descriptionPosition === 'below' && (
+
+ {(value as any[]).map((item: any, index: number) => (
+
+ {LucideIconComponent &&
+ ))}
+
+ ) : badge ? (
+ // Single badge
+ {description}
+ )}
+
+ {/* Description above */}
+ {description && descriptionPosition === 'above' && (
+
+ );
+}
diff --git a/resources/react/composables/useStateRef.ts b/resources/react/composables/useStateRef.ts
new file mode 100644
index 0000000..3561ef2
--- /dev/null
+++ b/resources/react/composables/useStateRef.ts
@@ -0,0 +1,18 @@
+import { useCallback, useRef, useState, type RefObject } from 'react';
+
+/**
+ * State that is also readable synchronously through a ref — the React equivalent of a Vue `ref()` that is
+ * written in a handler and read right away (or later from a timeout/observer) in the same tick.
+ * The setter updates the ref immediately and schedules the re-render.
+ */
+export function useStateRef{description}
+ )}
+
+ {/* Main content */}
+
+ setChecked(checked)}
+ />
+
+
+ {/* Description below */}
+ {description && descriptionPosition === 'below' && (
+ {description}
+ )}
+