@eventcatalog/core 5.0.0-beta.2 → 5.0.0-beta.20

package/eventcatalog/src/components/Grids/components.tsx

@@ -1,170 +0,0 @@
-import React from 'react';
-import {
-  MagnifyingGlassIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  ChevronDoubleLeftIcon,
-  ChevronDoubleRightIcon,
-} from '@heroicons/react/24/outline';
-import type { CollectionMessageTypes } from '@types';
-import { getCollectionStyles, type PaginationProps, type SearchBarProps, type TypeFilterProps } from './utils';
-
-export function SearchBar({ searchQuery, onSearchChange, placeholder, totalResults, totalItems }: SearchBarProps) {
-  return (
-    <div className="w-full md:w-96">
-      <div className="relative">
-        <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-          <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
-        </div>
-        <input
-          type="text"
-          placeholder={placeholder || 'Search...'}
-          value={searchQuery}
-          onChange={(e) => onSearchChange(e.target.value)}
-          className="block w-full rounded-lg border-0 py-2.5 pl-10 pr-4 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
-        />
-        {searchQuery && (
-          <div className="absolute inset-y-0 right-0 flex items-center pr-3">
-            <button onClick={() => onSearchChange('')} className="text-gray-400 hover:text-gray-500 focus:outline-hidden">
-              <span className="sr-only">Clear search</span>
-              <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                <path
-                  fillRule="evenodd"
-                  d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </button>
-          </div>
-        )}
-      </div>
-      {searchQuery && totalResults !== undefined && totalItems !== undefined && (
-        <div className="mt-2 text-sm text-gray-500 flex items-center justify-between">
-          <span>
-            Found <span className="font-medium text-gray-900">{totalResults}</span> of{' '}
-            <span className="font-medium text-gray-900">{totalItems}</span>
-          </span>
-          <span className="text-gray-400 text-xs">ESC to clear</span>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export function TypeFilters({ selectedTypes, onTypeChange, filteredCount, totalCount }: TypeFilterProps) {
-  const types: CollectionMessageTypes[] = ['events', 'commands', 'queries'];
-
-  return (
-    <div className="flex items-center gap-2">
-      {types.map((type) => {
-        const { color, Icon } = getCollectionStyles(type);
-        const isSelected = selectedTypes.includes(type);
-        return (
-          <button
-            key={type}
-            onClick={() => {
-              onTypeChange(selectedTypes.includes(type) ? selectedTypes.filter((t) => t !== type) : [...selectedTypes, type]);
-            }}
-            className={`
-                            inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium
-                            transition-colors duration-200
-                            ${
-                              isSelected
-                                ? `bg-${color}-100 text-${color}-700 ring-2 ring-${color}-500`
-                                : 'bg-gray-50 text-gray-600 hover:bg-gray-100'
-                            }
-                        `}
-          >
-            <Icon className={`h-4 w-4 ${isSelected ? `text-${color}-500` : 'text-gray-400'}`} />
-            <span className="capitalize">{type}</span>
-            {isSelected && filteredCount !== undefined && (
-              <span
-                className={`inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium bg-${color}-50 text-${color}-700 rounded-full`}
-              >
-                {filteredCount}
-              </span>
-            )}
-          </button>
-        );
-      })}
-      {selectedTypes.length > 0 && (
-        <button onClick={() => onTypeChange([])} className="text-xs text-gray-500 hover:text-gray-700 hover:underline">
-          Clear filters
-        </button>
-      )}
-    </div>
-  );
-}
-
-export function Pagination({ currentPage, totalPages, totalItems, itemsPerPage, onPageChange }: PaginationProps) {
-  if (totalPages <= 1) return null;
-
-  return (
-    <div className="flex items-center justify-between border-gray-200 bg-white px-4 py-3 sm:px-6">
-      <div className="flex flex-1 justify-between sm:hidden">
-        <button
-          onClick={() => onPageChange(Math.max(1, currentPage - 1))}
-          disabled={currentPage === 1}
-          className="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50"
-        >
-          Previous
-        </button>
-        <button
-          onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
-          disabled={currentPage === totalPages}
-          className="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50"
-        >
-          Next
-        </button>
-      </div>
-      <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
-        <div className="pr-4">
-          <p className="text-sm text-gray-700">
-            Showing <span className="font-medium">{(currentPage - 1) * itemsPerPage + 1}</span> to{' '}
-            <span className="font-medium">{Math.min(currentPage * itemsPerPage, totalItems)}</span> of{' '}
-            <span className="font-medium">{totalItems}</span> results
-          </p>
-        </div>
-        <div>
-          <nav className="isolate inline-flex -space-x-px rounded-md shadow-xs" aria-label="Pagination">
-            <button
-              onClick={() => onPageChange(1)}
-              disabled={currentPage === 1}
-              className="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 disabled:opacity-50"
-            >
-              <span className="sr-only">First</span>
-              <ChevronDoubleLeftIcon className="h-5 w-5" aria-hidden="true" />
-            </button>
-            <button
-              onClick={() => onPageChange(Math.max(1, currentPage - 1))}
-              disabled={currentPage === 1}
-              className="relative inline-flex items-center px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 disabled:opacity-50"
-            >
-              <span className="sr-only">Previous</span>
-              <ChevronLeftIcon className="h-5 w-5" aria-hidden="true" />
-            </button>
-            <span className="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 focus:outline-offset-0">
-              Page {currentPage} of {totalPages}
-            </span>
-            <button
-              onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
-              disabled={currentPage === totalPages}
-              className="relative inline-flex items-center px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 disabled:opacity-50"
-            >
-              <span className="sr-only">Next</span>
-              <ChevronRightIcon className="h-5 w-5" aria-hidden="true" />
-            </button>
-            <button
-              onClick={() => onPageChange(totalPages)}
-              disabled={currentPage === totalPages}
-              className="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 disabled:opacity-50"
-            >
-              <span className="sr-only">Last</span>
-              <ChevronDoubleRightIcon className="h-5 w-5" aria-hidden="true" />
-            </button>
-          </nav>
-        </div>
-      </div>
-    </div>
-  );
-}

package/eventcatalog/src/components/Grids/message-link.ts

@@ -1,38 +0,0 @@
-import type { CollectionMessageTypes } from '@types';
-
-export const MESSAGE_COLLECTIONS: readonly CollectionMessageTypes[] = ['events', 'commands', 'queries'];
-
-export function isMessageCollection(value: unknown): value is CollectionMessageTypes {
-  return value === 'events' || value === 'commands' || value === 'queries';
-}
-
-export interface MessageLinkProps {
-  collection?: CollectionMessageTypes;
-  id?: string;
-  name?: string;
-  version: string;
-  href?: string;
-}
-
-/**
- * Resolve a DomainGrid/SystemGrid receives/sends item into a docs link.
- *
- * Hydrated collection entries carry `collection` + `data.name`. Bare `{id, version}`
- * pointers do not — never guess `events` for those, or commands/queries get the wrong URL.
- */
-export function getMessageLinkProps(message: any): MessageLinkProps {
-  const data = message?.data ?? message;
-  const collectionCandidate = message?.collection ?? data?.collection;
-  const collection = isMessageCollection(collectionCandidate) ? collectionCandidate : undefined;
-  const id = data?.id ?? message?.id;
-  const name = data?.name || message?.name || id;
-  const version = data?.version ?? message?.version ?? 'latest';
-
-  return {
-    collection,
-    id,
-    name,
-    version,
-    href: collection && id ? `/docs/${collection}/${id}/${version}` : undefined,
-  };
-}

package/eventcatalog/src/components/Studio/StudioPageModal.tsx

@@ -1,150 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import * as Dialog from '@radix-ui/react-dialog';
-import { ExternalLinkIcon, CheckIcon, ClipboardIcon, Loader2 } from 'lucide-react';
-
-const StudioPageModal: React.FC = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [copySuccess, setCopySuccess] = useState(false);
-  const [hasCopied, setHasCopied] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const handleOpen = () => setIsOpen(true);
-    window.addEventListener('openStudioModal', handleOpen);
-    return () => window.removeEventListener('openStudioModal', handleOpen);
-  }, []);
-
-  const handleCopyResources = async () => {
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      const response = await fetch('/api/catalog');
-
-      if (!response.ok) {
-        throw new Error('Failed to fetch catalog data');
-      }
-
-      const catalogData = await response.json();
-
-      await navigator.clipboard.writeText(JSON.stringify(catalogData, null, 2));
-      setCopySuccess(true);
-      setHasCopied(true);
-      setTimeout(() => setCopySuccess(false), 2000);
-    } catch (err) {
-      console.error('Failed to copy resources:', err);
-      setError('Failed to copy resources. Please try again.');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleOpenStudio = () => {
-    window.open(
-      'https://app.eventcatalog.studio/playground?import-resources=true&utm_source=eventcatalog&utm_medium=referral&utm_campaign=studio-page',
-      '_blank'
-    );
-    setIsOpen(false);
-  };
-
-  return (
-    <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
-      <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow z-50" />
-        <Dialog.Content className="fixed top-1/2 left-1/2 w-[90vw] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-xl focus:outline-hidden data-[state=open]:animate-contentShow z-[100]">
-          <Dialog.Title className="text-lg font-semibold text-gray-900 mb-3">Open EventCatalog Studio</Dialog.Title>
-
-          <Dialog.Description className="text-sm text-gray-600 mb-6">
-            Import your catalog resources into{' '}
-            <a
-              href="https://eventcatalog.studio"
-              className="text-gray-900 hover:text-gray-700 underline font-semibold"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              EventCatalog Studio
-            </a>{' '}
-            to create architecture diagrams.
-          </Dialog.Description>
-
-          <div className="space-y-4">
-            {/* Step 1: Copy Resources */}
-            <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
-              <h4 className="text-sm font-bold text-gray-900 mb-2">Step 1: Copy your resources</h4>
-              <p className="text-xs text-gray-600 mb-3">Copy your EventCatalog resources to your clipboard.</p>
-
-              <button
-                onClick={handleCopyResources}
-                disabled={isLoading}
-                className={`w-full flex items-center justify-center space-x-2 px-4 py-2 text-sm font-medium rounded-md border transition-colors ${
-                  copySuccess
-                    ? 'bg-green-50 border-green-200 text-green-700'
-                    : isLoading
-                      ? 'bg-gray-100 border-gray-300 text-gray-400 cursor-not-allowed'
-                      : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'
-                }`}
-              >
-                {isLoading ? (
-                  <>
-                    <Loader2 className="w-4 h-4 animate-spin" />
-                    <span>Loading resources...</span>
-                  </>
-                ) : copySuccess ? (
-                  <>
-                    <CheckIcon className="w-4 h-4" />
-                    <span>Copied!</span>
-                  </>
-                ) : (
-                  <>
-                    <ClipboardIcon className="w-4 h-4" />
-                    <span>Copy resources to clipboard</span>
-                  </>
-                )}
-              </button>
-
-              {error && <p className="text-xs text-red-600 mt-2">{error}</p>}
-            </div>
-
-            {/* Step 2: Open Studio */}
-            <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
-              <h4 className="text-sm font-bold text-gray-900 mb-2">Step 2: Open EventCatalog Studio</h4>
-              <p className="text-xs text-gray-600 mb-3">
-                Go to EventCatalog Studio and paste your resources into the modal dialog.
-              </p>
-
-              <button
-                onClick={handleOpenStudio}
-                disabled={!hasCopied}
-                className={`w-full flex items-center justify-center space-x-2 px-4 py-2 text-sm font-medium rounded-md transition-colors ${
-                  hasCopied ? 'bg-gray-900 text-white hover:bg-gray-800' : 'bg-gray-300 text-gray-500 cursor-not-allowed'
-                }`}
-              >
-                <ExternalLinkIcon className="w-4 h-4" />
-                <span>Open EventCatalog Studio</span>
-              </button>
-
-              <p className="text-[12px] text-gray-500 italic mt-4 mb-0">
-                All data is stored locally in your browser. Nothing is sent to external servers.
-              </p>
-            </div>
-          </div>
-
-          <div className="mt-6 flex justify-end">
-            <Dialog.Close asChild>
-              <button
-                type="button"
-                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
-                onClick={() => setIsOpen(false)}
-              >
-                Close
-              </button>
-            </Dialog.Close>
-          </div>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-};
-
-export default StudioPageModal;

package/eventcatalog/src/components/Tables/SystemResources/SystemResourcesTable.tsx

@@ -1,294 +0,0 @@
-import { useMemo, useState } from 'react';
-import {
-  createColumnHelper,
-  flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
-  useReactTable,
-  type SortingState,
-} from '@tanstack/react-table';
-import { ArrowDown, ArrowUp, ArrowUpDown, Search, SearchX } from 'lucide-react';
-import { getColorAndIconForCollection } from '@utils/collections/icons';
-import { getCollectionTextColorClass } from '@utils/collection-colors';
-import { isIconPath, resolveIconUrl } from '@utils/icon';
-
-export type SystemResourceCollection =
-  | 'domains'
-  | 'systems'
-  | 'agents'
-  | 'services'
-  | 'flows'
-  | 'entities'
-  | 'data-products'
-  | 'containers'
-  | 'events'
-  | 'commands'
-  | 'queries';
-
-export interface SystemResourceItem {
-  collection: SystemResourceCollection;
-  id: string;
-  name: string;
-  version: string;
-  summary?: string;
-  icon?: string;
-  href: string;
-}
-
-interface SystemResourcesTableProps {
-  resources: SystemResourceItem[];
-}
-
-const TYPE_LABELS: Record<SystemResourceCollection, string> = {
-  domains: 'Subdomains',
-  systems: 'Systems',
-  agents: 'Agents',
-  services: 'Services',
-  flows: 'Flows',
-  entities: 'Entities',
-  'data-products': 'Data Products',
-  containers: 'Data Stores',
-  events: 'Events',
-  commands: 'Commands',
-  queries: 'Queries',
-};
-
-// Order the type filter pills follow on the page.
-const TYPE_ORDER: SystemResourceCollection[] = [
-  'domains',
-  'systems',
-  'agents',
-  'services',
-  'flows',
-  'entities',
-  'data-products',
-  'containers',
-  'events',
-  'commands',
-  'queries',
-];
-
-// Small icon for a collection type (used in filter pills and the type column).
-const CollectionTypeIcon = ({ collection, className }: { collection: SystemResourceCollection; className?: string }) => {
-  const { color, Icon } = getColorAndIconForCollection(collection);
-  const colorClass = getCollectionTextColorClass(color, 'text-[rgb(var(--ec-icon-color))]');
-  return <Icon className={`${className ?? 'h-3.5 w-3.5'} ${colorClass}`} aria-hidden="true" />;
-};
-
-const ResourceIcon = ({ item }: { item: SystemResourceItem }) => {
-  if (item.icon && isIconPath(item.icon)) {
-    return <img src={resolveIconUrl(item.icon)} alt="" className="h-5 w-5" loading="lazy" />;
-  }
-  return <CollectionTypeIcon collection={item.collection} className="h-5 w-5" />;
-};
-
-const columnHelper = createColumnHelper<SystemResourceItem>();
-
-const SortIcon = ({ direction }: { direction: false | 'asc' | 'desc' }) => {
-  if (direction === 'asc') return <ArrowUp className="h-3.5 w-3.5" aria-hidden="true" />;
-  if (direction === 'desc') return <ArrowDown className="h-3.5 w-3.5" aria-hidden="true" />;
-  return <ArrowUpDown className="h-3.5 w-3.5 opacity-40" aria-hidden="true" />;
-};
-
-export function SystemResourcesTable({ resources }: SystemResourcesTableProps) {
-  const [search, setSearch] = useState('');
-  const [selectedTypes, setSelectedTypes] = useState<SystemResourceCollection[]>([]);
-  const [sorting, setSorting] = useState<SortingState>([{ id: 'name', desc: false }]);
-
-  // Only show type filters that actually have resources in this system.
-  const availableTypes = useMemo(
-    () => TYPE_ORDER.filter((type) => resources.some((resource) => resource.collection === type)),
-    [resources]
-  );
-
-  const filtered = useMemo(() => {
-    const query = search.trim().toLowerCase();
-    return resources.filter((resource) => {
-      if (selectedTypes.length > 0 && !selectedTypes.includes(resource.collection)) {
-        return false;
-      }
-      if (query) {
-        const haystack = `${resource.name} ${resource.id} ${resource.summary ?? ''}`.toLowerCase();
-        if (!haystack.includes(query)) return false;
-      }
-      return true;
-    });
-  }, [resources, search, selectedTypes]);
-
-  const columns = useMemo(
-    () => [
-      columnHelper.accessor('name', {
-        header: 'Name',
-        cell: (info) => {
-          const resource = info.row.original;
-          return (
-            <a href={resource.href} className="group flex items-center gap-3">
-              <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))]">
-                <ResourceIcon item={resource} />
-              </span>
-              <span className="text-sm font-medium text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-accent))]">
-                {resource.name}
-              </span>
-            </a>
-          );
-        },
-      }),
-      columnHelper.accessor((row) => TYPE_LABELS[row.collection], {
-        id: 'type',
-        header: 'Type',
-        cell: (info) => {
-          const { collection } = info.row.original;
-          return (
-            <span className="inline-flex items-center gap-1.5 text-sm text-[rgb(var(--ec-page-text-muted))]">
-              <CollectionTypeIcon collection={collection} />
-              {TYPE_LABELS[collection]}
-            </span>
-          );
-        },
-      }),
-      columnHelper.accessor('version', {
-        header: 'Version',
-        cell: (info) => (
-          <span className="inline-flex items-center rounded-md border border-[rgb(var(--ec-page-border))] px-2 py-0.5 text-xs text-[rgb(var(--ec-page-text-muted))]">
-            v{info.getValue()}
-          </span>
-        ),
-      }),
-      columnHelper.accessor((row) => row.summary ?? '', {
-        id: 'summary',
-        header: 'Summary',
-        enableSorting: false,
-        cell: (info) => (
-          <span className="line-clamp-2 text-sm text-[rgb(var(--ec-page-text-muted))]">{info.getValue() || '-'}</span>
-        ),
-      }),
-    ],
-    []
-  );
-
-  const table = useReactTable({
-    data: filtered,
-    columns,
-    state: { sorting },
-    onSortingChange: setSorting,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-  });
-
-  const toggleType = (type: SystemResourceCollection) => {
-    setSelectedTypes((prev) => (prev.includes(type) ? prev.filter((t) => t !== type) : [...prev, type]));
-  };
-
-  return (
-    <div className="flex flex-col gap-4">
-      {/* Controls: search + type filters */}
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-        <div className="relative w-full sm:max-w-xs">
-          <Search
-            className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[rgb(var(--ec-icon-color))]"
-            aria-hidden="true"
-          />
-          <input
-            type="text"
-            value={search}
-            onChange={(event) => setSearch(event.target.value)}
-            placeholder="Search resources..."
-            className="w-full rounded-md border border-[rgb(var(--ec-input-border))] bg-[rgb(var(--ec-input-bg))] py-2 pl-9 pr-3 text-sm text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-page-text-muted))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.4)]"
-          />
-        </div>
-
-        {availableTypes.length > 1 && (
-          <div className="flex flex-wrap gap-2">
-            {availableTypes.map((type) => {
-              const active = selectedTypes.includes(type);
-              return (
-                <button
-                  key={type}
-                  type="button"
-                  onClick={() => toggleType(type)}
-                  className={[
-                    'inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors',
-                    active
-                      ? 'border-[rgb(var(--ec-accent))] bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))]'
-                      : 'border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]',
-                  ].join(' ')}
-                >
-                  <CollectionTypeIcon collection={type} />
-                  {TYPE_LABELS[type]}
-                </button>
-              );
-            })}
-          </div>
-        )}
-      </div>
-
-      {/* Table */}
-      <div className="overflow-hidden rounded-lg border border-[rgb(var(--ec-page-border))]">
-        <table className="min-w-full divide-y divide-[rgb(var(--ec-page-border))]">
-          <thead className="bg-[rgb(var(--ec-card-bg))]">
-            {table.getHeaderGroups().map((headerGroup) => (
-              <tr key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
-                  const canSort = header.column.getCanSort();
-                  const isSummary = header.column.id === 'summary';
-                  return (
-                    <th
-                      key={header.id}
-                      className={[
-                        'px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-[rgb(var(--ec-page-text-muted))]',
-                        isSummary ? 'hidden md:table-cell' : '',
-                      ].join(' ')}
-                    >
-                      {canSort ? (
-                        <button
-                          type="button"
-                          onClick={header.column.getToggleSortingHandler()}
-                          className="inline-flex items-center gap-1.5 uppercase tracking-wider hover:text-[rgb(var(--ec-page-text))]"
-                        >
-                          {flexRender(header.column.columnDef.header, header.getContext())}
-                          <SortIcon direction={header.column.getIsSorted()} />
-                        </button>
-                      ) : (
-                        flexRender(header.column.columnDef.header, header.getContext())
-                      )}
-                    </th>
-                  );
-                })}
-              </tr>
-            ))}
-          </thead>
-          <tbody className="divide-y divide-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))]">
-            {table.getRowModel().rows.length === 0 && (
-              <tr>
-                <td colSpan={columns.length} className="px-4 py-12">
-                  <div className="flex flex-col items-center justify-center gap-2 text-center text-[rgb(var(--ec-page-text-muted))]">
-                    <SearchX className="h-6 w-6" aria-hidden="true" />
-                    <p className="text-sm">No resources found.</p>
-                  </div>
-                </td>
-              </tr>
-            )}
-            {table.getRowModel().rows.map((row) => (
-              <tr key={row.id} className="transition-colors hover:bg-[rgb(var(--ec-card-bg))]">
-                {row.getVisibleCells().map((cell) => {
-                  const isSummary = cell.column.id === 'summary';
-                  return (
-                    <td key={cell.id} className={['px-4 py-3', isSummary ? 'hidden max-w-md md:table-cell' : ''].join(' ')}>
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                    </td>
-                  );
-                })}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-
-      <p className="text-xs text-[rgb(var(--ec-page-text-muted))]">
-        Showing {filtered.length} of {resources.length} resources
-      </p>
-    </div>
-  );
-}
-
-export default SystemResourcesTable;