@eventcatalog/core 2.19.9 → 2.20.0

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.19.9";
+var version = "2.20.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-TST4Y2ZK.js";
-import "../chunk-6YOAJVAK.js";
+} from "../chunk-I5QQKYHU.js";
+import "../chunk-PCV7T4HR.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -106,7 +106,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.19.9";
+var version = "2.20.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-V6S4JW6E.js";
-import "../chunk-TST4Y2ZK.js";
-import "../chunk-6YOAJVAK.js";
+} from "../chunk-3C6KBZOA.js";
+import "../chunk-I5QQKYHU.js";
+import "../chunk-PCV7T4HR.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/catalog-to-astro-content-directory.cjs

@@ -34,7 +34,7 @@ __export(catalog_to_astro_content_directory_exports, {
 });
 module.exports = __toCommonJS(catalog_to_astro_content_directory_exports);
 
-// node_modules/.pnpm/tsup@8.3.5_jiti@1.21.7_postcss@8.4.49_typescript@5.7.3_yaml@2.7.0/node_modules/tsup/assets/cjs_shims.js
+// node_modules/.pnpm/tsup@8.3.6_jiti@1.21.7_postcss@8.5.1_typescript@5.7.3_yaml@2.7.0/node_modules/tsup/assets/cjs_shims.js
 var getImportMetaUrl = () => typeof document === "undefined" ? new URL(`file:${__filename}`).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
 var importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
 

package/dist/{chunk-V6S4JW6E.js → chunk-3C6KBZOA.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-TST4Y2ZK.js";
+} from "./chunk-I5QQKYHU.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-TST4Y2ZK.js → chunk-I5QQKYHU.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-6YOAJVAK.js";
+} from "./chunk-PCV7T4HR.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/{chunk-6YOAJVAK.js → chunk-PCV7T4HR.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "2.19.9";
+var version = "2.20.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "2.19.9";
+var version = "2.20.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-6YOAJVAK.js";
+} from "./chunk-PCV7T4HR.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -22,7 +22,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 
-// node_modules/.pnpm/tsup@8.3.5_jiti@1.21.7_postcss@8.4.49_typescript@5.7.3_yaml@2.7.0/node_modules/tsup/assets/cjs_shims.js
+// node_modules/.pnpm/tsup@8.3.6_jiti@1.21.7_postcss@8.5.1_typescript@5.7.3_yaml@2.7.0/node_modules/tsup/assets/cjs_shims.js
 var getImportMetaUrl = () => typeof document === "undefined" ? new URL(`file:${__filename}`).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
 var importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
 
@@ -161,7 +161,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.19.9";
+var version = "2.20.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -3,14 +3,14 @@ import {
 } from "./chunk-SHCMAL37.js";
 import {
   log_build_default
-} from "./chunk-V6S4JW6E.js";
-import "./chunk-TST4Y2ZK.js";
+} from "./chunk-3C6KBZOA.js";
+import "./chunk-I5QQKYHU.js";
 import {
   catalogToAstro
 } from "./chunk-WF34R5UT.js";
 import {
   VERSION
-} from "./chunk-6YOAJVAK.js";
+} from "./chunk-PCV7T4HR.js";
 import {
   generate
 } from "./chunk-YEQVKHST.js";

package/eventcatalog/src/components/Tables/Table.tsx

@@ -20,14 +20,24 @@ import { isSameVersion } from '@utils/collections/util';
 declare module '@tanstack/react-table' {
   // @ts-ignore
   interface ColumnMeta<TData extends RowData, TValue> {
-    filterVariant?: 'collection' | 'name' | 'badges';
-    collectionFilterKey?: 'producers' | 'consumers' | 'sends' | 'receives' | 'services';
+    filterVariant?: 'collection' | 'name' | 'badges' | 'text';
+    collectionFilterKey?:
+      | 'producers'
+      | 'consumers'
+      | 'sends'
+      | 'receives'
+      | 'services'
+      | 'ownedCommands'
+      | 'ownedEvents'
+      | 'ownedServices'
+      | 'associatedTeams';
+    filteredItemHasVersion?: boolean;
     showFilter?: boolean;
     className?: string;
   }
 }
 
-export type TCollectionTypes = 'domains' | 'services' | CollectionMessageTypes | 'flows';
+export type TCollectionTypes = 'domains' | 'services' | CollectionMessageTypes | 'flows' | 'users' | 'teams';
 
 export type TData<T extends TCollectionTypes> = {
   collection: T;
@@ -92,6 +102,19 @@ export type TData<T extends TCollectionTypes> = {
       };
     }>;
     // ---------------------------------------------------------------------------
+    // Users
+    avatarUrl?: string;
+    email?: string;
+    slackDirectMessageUrl?: string;
+    msTeamsDirectMessageUrl?: string;
+    role?: string;
+    ownedCommands: any;
+    ownedEvents: any;
+    ownedServices: any;
+    associatedTeams: any;
+
+    // Teams
+    members: any;
   };
 };
 
@@ -121,7 +144,6 @@ export const Table = <T extends TCollectionTypes>({
 
   useEffect(() => {
     const checkbox = document.getElementById(checkboxLatestId);
-
     function handleChange(evt: Event) {
       setShowOnlyLatest((evt.target as HTMLInputElement).checked);
     }
@@ -266,7 +288,7 @@ export const Table = <T extends TCollectionTypes>({
 };
 
 function Filter<T extends TCollectionTypes>({ column }: { column: Column<TData<T>, unknown> }) {
-  const { filterVariant, collectionFilterKey } = column.columnDef.meta ?? {};
+  const { filterVariant, collectionFilterKey, filteredItemHasVersion = true } = column.columnDef.meta ?? {};
 
   const columnFilterValue = column.getFilterValue();
 
@@ -275,7 +297,9 @@ function Filter<T extends TCollectionTypes>({ column }: { column: Column<TData<T
       const rows = column.getFacetedRowModel().rows;
       const data = rows.map((row) => row.original.data?.[collectionFilterKey] ?? []).flat();
 
-      const allItems = data.map((item) => `${item?.data.name} (v${item?.data.version})`);
+      const allItems = data.map((item) =>
+        filteredItemHasVersion ? `${item?.data.name} (v${item?.data.version})` : `${item?.data.name}`
+      );
       const uniqueItemsInList = Array.from(new Set(allItems));
 
       return uniqueItemsInList.sort().slice(0, 2000);
@@ -289,7 +313,9 @@ function Filter<T extends TCollectionTypes>({ column }: { column: Column<TData<T
         })
         .flat();
 
-      const allItems = data.map((item) => `${item.data.name} (v${item.data.version})`);
+      const allItems = data.map((item) =>
+        filteredItemHasVersion ? `${item.data.name} (v${item.data.version})` : `${item.data.name}`
+      );
       const uniqueItemsInList = Array.from(new Set(allItems));
 
       return uniqueItemsInList.sort().slice(0, 2000);

package/eventcatalog/src/components/Tables/columns/TeamsTableColumns.tsx

@@ -0,0 +1,253 @@
+import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
+import { createColumnHelper } from '@tanstack/react-table';
+import { useMemo, useState } from 'react';
+import { filterByName, filterCollectionByName } from '../filters/custom-filters';
+import { buildUrl } from '@utils/url-builder';
+import type { TData } from '../Table';
+import type { CollectionUserTypes } from '@types';
+import { User, Users } from 'lucide-react';
+import type { CollectionEntry } from 'astro:content';
+import { ServerIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/solid';
+
+const columnHelper = createColumnHelper<TData<CollectionUserTypes>>();
+
+export const getColorAndIconForMessageType = (type: string) => {
+  switch (type) {
+    case 'event':
+      return { color: 'orange', Icon: BoltIcon };
+    case 'command':
+      return { color: 'blue', Icon: ChatBubbleLeftIcon };
+    case 'querie':
+    case 'query':
+      return { color: 'green', Icon: MagnifyingGlassIcon };
+    default:
+      return { color: 'gray', Icon: ChatBubbleLeftIcon };
+  }
+};
+
+export const columns = () => [
+  columnHelper.accessor('data.name', {
+    id: 'name',
+    header: () => <span>Name</span>,
+    cell: (info) => {
+      const messageRaw = info.row.original;
+      const type = useMemo(() => messageRaw.collection.slice(0, -1), [messageRaw.collection]);
+      return (
+        <div className=" group ">
+          <a
+            href={buildUrl(`/docs/${messageRaw.collection}/${messageRaw.data.id}`)}
+            className={`group-hover:text-pink-500 flex space-x-1 items-center`}
+          >
+            <div className={`flex items-center border border-gray-300 shadow-sm rounded-md group-hover:border-pink-400`}>
+              <span className="flex items-center">
+                <span className={`bg-pink-500 group-hover:bg-pink-600 h-full rounded-tl rounded-bl p-1`}>
+                  {!messageRaw.data.avatarUrl && <Users className="h-4 w-4 text-white" />}
+                </span>
+                <span className="leading-none px-2 group-hover:underline group-hover:text-primary font-light">
+                  {messageRaw.data.name}
+                </span>
+              </span>
+            </div>
+          </a>
+        </div>
+      );
+    },
+    meta: {
+      filterVariant: 'name',
+      filteredItemHasVersion: false,
+    },
+    filterFn: filterByName,
+  }),
+
+  columnHelper.accessor('data.members', {
+    header: () => <span>Team members</span>,
+    meta: {
+      // filterVariant: 'collection',
+      showFilter: false,
+    },
+    cell: (info) => {
+      const members = info.getValue();
+      if (members?.length === 0 || !members)
+        return <div className="font-light text-sm text-gray-400/60 text-left italic">Team has no members</div>;
+
+      return <div>{members.length}</div>;
+    },
+    footer: (info) => info.column.id,
+    filterFn: filterByName,
+  }),
+
+  columnHelper.accessor('data.ownedCommands', {
+    header: () => <span>Owned commands</span>,
+    meta: {
+      filterVariant: 'collection',
+      collectionFilterKey: 'ownedCommands',
+    },
+    cell: (info) => {
+      const commands = info.getValue();
+      if (commands?.length === 0 || !commands)
+        return <div className="font-light text-sm text-gray-400/60 text-left italic">User owns no commands</div>;
+
+      const isExpandable = commands?.length > 10;
+      const isOpen = isExpandable ? commands?.length < 10 : true;
+      const [isExpanded, setIsExpanded] = useState(isOpen);
+
+      return (
+        <div>
+          {isExpandable && (
+            <button onClick={() => setIsExpanded(!isExpanded)} className="mb-2 text-sm text-gray-600 hover:text-gray-900">
+              {isExpanded ? '▼' : '▶'} {commands.length} command{commands.length !== 1 ? 's' : ''}
+            </button>
+          )}
+          {isExpanded && (
+            <ul>
+              {commands.map((command: CollectionEntry<'commands'>, index: number) => (
+                <li key={`${command.data.id}-${index}`} className="py-1 group font-light ">
+                  <a
+                    href={buildUrl(`/docs/${command.collection}/${command.data.id}/${command.data.version}`)}
+                    className="group-hover:text-primary flex space-x-1 items-center "
+                  >
+                    <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
+                      <span className="flex items-center">
+                        <span className={`bg-blue-500 h-full rounded-tl rounded-bl p-1`}>
+                          <ChatBubbleLeftIcon className="h-4 w-4 text-white" />
+                        </span>
+                        <span className="leading-none px-2 group-hover:underline ">
+                          {command.data.name} (v{command.data.version})
+                        </span>
+                      </span>
+                    </div>
+                  </a>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      );
+
+      // return commands.length;
+    },
+    footer: (info) => info.column.id,
+    filterFn: filterCollectionByName('ownedCommands'),
+  }),
+  columnHelper.accessor('data.ownedEvents', {
+    header: () => <span>Owned Events</span>,
+    meta: {
+      filterVariant: 'collection',
+      collectionFilterKey: 'ownedEvents',
+    },
+    cell: (info) => {
+      const events = info.getValue();
+      if (events?.length === 0 || !events)
+        return <div className="font-light text-sm text-gray-400/80 text-left italic">User owns no events</div>;
+
+      const isExpandable = events?.length > 10;
+      const isOpen = isExpandable ? events?.length < 10 : true;
+      const [isExpanded, setIsExpanded] = useState(isOpen);
+
+      return (
+        <div>
+          {isExpandable && (
+            <button onClick={() => setIsExpanded(!isExpanded)} className="mb-2 text-sm text-gray-600 hover:text-gray-900">
+              {isExpanded ? '▼' : '▶'} {events.length} event{events.length !== 1 ? 's' : ''}
+            </button>
+          )}
+          {isExpanded && (
+            <ul>
+              {events.map((event: CollectionEntry<'events'>, index: number) => (
+                <li key={`${event.data.id}-${index}`} className="py-1 group font-light ">
+                  <a
+                    href={buildUrl(`/docs/${event.collection}/${event.data.id}/${event.data.version}`)}
+                    className="group-hover:text-primary flex space-x-1 items-center "
+                  >
+                    <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
+                      <span className="flex items-center">
+                        <span className={`bg-orange-500 h-full rounded-tl rounded-bl p-1`}>
+                          <BoltIcon className="h-4 w-4 text-white" />
+                        </span>
+                        <span className="leading-none px-2 group-hover:underline ">
+                          {event.data.name} (v{event.data.version})
+                        </span>
+                      </span>
+                    </div>
+                  </a>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      );
+    },
+    footer: (info) => info.column.id,
+    filterFn: filterCollectionByName('ownedEvents'),
+  }),
+  columnHelper.accessor('data.ownedServices', {
+    header: () => <span>Owned Services</span>,
+    meta: {
+      filterVariant: 'collection',
+      collectionFilterKey: 'ownedServices',
+    },
+    cell: (info) => {
+      const services = info.getValue();
+      if (services?.length === 0 || !services)
+        return <div className="font-light text-sm text-gray-400/80 text-left italic">User owns no services</div>;
+
+      const isExpandable = services?.length > 10;
+      const isOpen = isExpandable ? services?.length < 10 : true;
+      const [isExpanded, setIsExpanded] = useState(isOpen);
+
+      return (
+        <div>
+          {isExpandable && (
+            <button onClick={() => setIsExpanded(!isExpanded)} className="mb-2 text-sm text-gray-600 hover:text-gray-900">
+              {isExpanded ? '▼' : '▶'} {services.length} service{services.length !== 1 ? 's' : ''}
+            </button>
+          )}
+          {isExpanded && (
+            <ul>
+              {services.map((service: CollectionEntry<'services'>, index: number) => (
+                <li key={`${service.data.id}-${index}`} className="py-1 group font-light ">
+                  <a
+                    href={buildUrl(`/docs/${service.collection}/${service.data.id}/${service.data.version}`)}
+                    className="group-hover:text-primary flex space-x-1 items-center "
+                  >
+                    <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
+                      <span className="flex items-center">
+                        <span className={`bg-green-500 h-full rounded-tl rounded-bl p-1`}>
+                          <ServerIcon className="h-4 w-4 text-white" />
+                        </span>
+                        <span className="leading-none px-2 group-hover:underline ">
+                          {service.data.name} (v{service.data.version})
+                        </span>
+                      </span>
+                    </div>
+                  </a>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      );
+    },
+    footer: (info) => info.column.id,
+    filterFn: filterCollectionByName('ownedServices'),
+  }),
+
+  columnHelper.accessor('data.name', {
+    header: () => <span />,
+    cell: (info) => {
+      const domain = info.row.original;
+      return (
+        <a
+          className="hover:text-primary hover:underline px-4 font-light"
+          href={buildUrl(`/docs/${domain.collection}/${domain.data.id}`)}
+        >
+          View &rarr;
+        </a>
+      );
+    },
+    id: 'actions',
+    meta: {
+      showFilter: false,
+    },
+  }),
+];

package/eventcatalog/src/components/Tables/columns/UserTableColumns.tsx

@@ -0,0 +1,289 @@
+import { createColumnHelper } from '@tanstack/react-table';
+import { useMemo, useState } from 'react';
+import { filterByName, filterCollectionByName } from '../filters/custom-filters';
+import { buildUrl } from '@utils/url-builder';
+import type { TData } from '../Table';
+import type { CollectionUserTypes } from '@types';
+import { User, Users } from 'lucide-react';
+import type { CollectionEntry } from 'astro:content';
+import { ServerIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/solid';
+
+const columnHelper = createColumnHelper<TData<CollectionUserTypes>>();
+
+export const columns = () => [
+  columnHelper.accessor('data.name', {
+    id: 'name',
+    header: () => <span>Name</span>,
+    cell: (info) => {
+      const messageRaw = info.row.original;
+      const type = useMemo(() => messageRaw.collection.slice(0, -1), [messageRaw.collection]);
+      return (
+        <div className=" group ">
+          <a
+            href={buildUrl(`/docs/${messageRaw.collection}/${messageRaw.data.id}`)}
+            className={`group-hover:text-gray-500 flex space-x-1 items-center`}
+          >
+            <div className={`flex items-center border border-gray-300 shadow-sm rounded-md group-hover:border-gray-400`}>
+              <span className="flex items-center">
+                {!messageRaw.data.avatarUrl && (
+                  <span className={`bg-gray-300 group-hover:bg-gray-600 h-full rounded-tl rounded-bl p-1`}>
+                    <User className="h-4 w-4 text-white" />
+                  </span>
+                )}
+                {messageRaw.data.avatarUrl && (
+                  <img src={messageRaw.data.avatarUrl} alt={messageRaw.data.name} className="h-12 w-12 rounded-md p-0.5" />
+                )}
+
+                <span className="leading-none px-2 group-hover:underline group-hover:text-primary font-light">
+                  {messageRaw.data.name}
+                </span>
+              </span>
+            </div>
+          </a>
+        </div>
+      );
+    },
+    meta: {
+      filterVariant: 'name',
+      filteredItemHasVersion: false,
+    },
+    filterFn: filterByName,
+  }),
+
+  columnHelper.accessor('data.role', {
+    id: 'role',
+    header: () => 'Role',
+    cell: (info) => <span className="font-light ">{info.renderValue()}</span>,
+    footer: (info) => info.column.id,
+    meta: {
+      showFilter: false,
+      className: 'max-w-[200px]',
+    },
+    filterFn: filterCollectionByName('role'),
+  }),
+
+  columnHelper.accessor('data.ownedCommands', {
+    header: () => <span>Owned commands</span>,
+    meta: {
+      filterVariant: 'collection',
+      collectionFilterKey: 'ownedCommands',
+    },
+    cell: (info) => {
+      const commands = info.getValue();
+      if (commands?.length === 0 || !commands)
+        return <div className="font-light text-sm text-gray-400/60 text-left italic">User owns no commands</div>;
+
+      const isExpandable = commands?.length > 10;
+      const isOpen = isExpandable ? commands?.length < 10 : true;
+      const [isExpanded, setIsExpanded] = useState(isOpen);
+
+      return (
+        <div>
+          {isExpandable && (
+            <button onClick={() => setIsExpanded(!isExpanded)} className="mb-2 text-sm text-gray-600 hover:text-gray-900">
+              {isExpanded ? '▼' : '▶'} {commands.length} command{commands.length !== 1 ? 's' : ''}
+            </button>
+          )}
+          {isExpanded && (
+            <ul>
+              {commands.map((command: CollectionEntry<'commands'>, index: number) => (
+                <li key={`${command.data.id}-${index}`} className="py-1 group font-light ">
+                  <a
+                    href={buildUrl(`/docs/${command.collection}/${command.data.id}/${command.data.version}`)}
+                    className="group-hover:text-primary flex space-x-1 items-center "
+                  >
+                    <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
+                      <span className="flex items-center">
+                        <span className={`bg-blue-500 h-full rounded-tl rounded-bl p-1`}>
+                          <ChatBubbleLeftIcon className="h-4 w-4 text-white" />
+                        </span>
+                        <span className="leading-none px-2 group-hover:underline ">
+                          {command.data.name} (v{command.data.version})
+                        </span>
+                      </span>
+                    </div>
+                  </a>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      );
+
+      // return commands.length;
+    },
+    footer: (info) => info.column.id,
+    filterFn: filterCollectionByName('ownedCommands'),
+  }),
+  columnHelper.accessor('data.ownedEvents', {
+    header: () => <span>Owned Events</span>,
+    meta: {
+      filterVariant: 'collection',
+      collectionFilterKey: 'ownedEvents',
+    },
+    cell: (info) => {
+      const events = info.getValue();
+      if (events?.length === 0 || !events)
+        return <div className="font-light text-sm text-gray-400/80 text-left italic">User owns no events</div>;
+
+      const isExpandable = events?.length > 10;
+      const isOpen = isExpandable ? events?.length < 10 : true;
+      const [isExpanded, setIsExpanded] = useState(isOpen);
+
+      return (
+        <div>
+          {isExpandable && (
+            <button onClick={() => setIsExpanded(!isExpanded)} className="mb-2 text-sm text-gray-600 hover:text-gray-900">
+              {isExpanded ? '▼' : '▶'} {events.length} event{events.length !== 1 ? 's' : ''}
+            </button>
+          )}
+          {isExpanded && (
+            <ul>
+              {events.map((event: CollectionEntry<'events'>, index: number) => (
+                <li key={`${event.data.id}-${index}`} className="py-1 group font-light ">
+                  <a
+                    href={buildUrl(`/docs/${event.collection}/${event.data.id}/${event.data.version}`)}
+                    className="group-hover:text-primary flex space-x-1 items-center "
+                  >
+                    <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
+                      <span className="flex items-center">
+                        <span className={`bg-orange-500 h-full rounded-tl rounded-bl p-1`}>
+                          <BoltIcon className="h-4 w-4 text-white" />
+                        </span>
+                        <span className="leading-none px-2 group-hover:underline ">
+                          {event.data.name} (v{event.data.version})
+                        </span>
+                      </span>
+                    </div>
+                  </a>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      );
+    },
+    footer: (info) => info.column.id,
+    filterFn: filterCollectionByName('ownedEvents'),
+  }),
+  columnHelper.accessor('data.ownedServices', {
+    header: () => <span>Owned Services</span>,
+    meta: {
+      filterVariant: 'collection',
+      collectionFilterKey: 'ownedServices',
+    },
+    cell: (info) => {
+      const services = info.getValue();
+      if (services?.length === 0 || !services)
+        return <div className="font-light text-sm text-gray-400/80 text-left italic">User owns no services</div>;
+
+      const isExpandable = services?.length > 10;
+      const isOpen = isExpandable ? services?.length < 10 : true;
+      const [isExpanded, setIsExpanded] = useState(isOpen);
+
+      return (
+        <div>
+          {isExpandable && (
+            <button onClick={() => setIsExpanded(!isExpanded)} className="mb-2 text-sm text-gray-600 hover:text-gray-900">
+              {isExpanded ? '▼' : '▶'} {services.length} service{services.length !== 1 ? 's' : ''}
+            </button>
+          )}
+          {isExpanded && (
+            <ul>
+              {services.map((service: CollectionEntry<'services'>, index: number) => (
+                <li key={`${service.data.id}-${index}`} className="py-1 group font-light ">
+                  <a
+                    href={buildUrl(`/docs/${service.collection}/${service.data.id}/${service.data.version}`)}
+                    className="group-hover:text-primary flex space-x-1 items-center "
+                  >
+                    <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
+                      <span className="flex items-center">
+                        <span className={`bg-green-500 h-full rounded-tl rounded-bl p-1`}>
+                          <ServerIcon className="h-4 w-4 text-white" />
+                        </span>
+                        <span className="leading-none px-2 group-hover:underline ">
+                          {service.data.name} (v{service.data.version})
+                        </span>
+                      </span>
+                    </div>
+                  </a>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      );
+    },
+    footer: (info) => info.column.id,
+    filterFn: filterCollectionByName('ownedServices'),
+  }),
+  columnHelper.accessor('data.associatedTeams', {
+    header: () => <span>Teams</span>,
+    meta: {
+      filterVariant: 'collection',
+      collectionFilterKey: 'associatedTeams',
+      filteredItemHasVersion: false,
+    },
+    cell: (info) => {
+      const teams = info.getValue();
+
+      const isExpandable = teams?.length > 10;
+      const isOpen = isExpandable ? teams?.length < 10 : true;
+      const [isExpanded, setIsExpanded] = useState(isOpen);
+
+      if (teams?.length === 0 || !teams)
+        return <div className="font-light text-sm text-gray-400/80 text-left italic">User is not associated with any teams</div>;
+
+      return (
+        <div>
+          {isExpandable && (
+            <button onClick={() => setIsExpanded(!isExpanded)} className="mb-2 text-sm text-gray-600 hover:text-gray-900">
+              {isExpanded ? '▼' : '▶'} {teams.length} team{teams.length !== 1 ? 's' : ''}
+            </button>
+          )}
+          {isExpanded && (
+            <ul>
+              {teams.map((team: CollectionEntry<'teams'>, index: number) => (
+                <li key={`${team.data.id}-${index}`} className="py-1 group font-light ">
+                  <a
+                    href={buildUrl(`/docs/teams/${team.data.id}`)}
+                    className="group-hover:text-primary flex space-x-1 items-center "
+                  >
+                    <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
+                      <span className="flex items-center">
+                        <span className={`bg-pink-500 h-full rounded-tl rounded-bl p-1`}>
+                          <Users className="h-4 w-4 text-white" />
+                        </span>
+                        <span className="leading-none px-2 group-hover:underline ">{team.data.name}</span>
+                      </span>
+                    </div>
+                  </a>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      );
+    },
+    footer: (info) => info.column.id,
+    filterFn: filterCollectionByName('associatedTeams'),
+  }),
+  columnHelper.accessor('data.name', {
+    header: () => <span />,
+    cell: (info) => {
+      const domain = info.row.original;
+      return (
+        <a
+          className="hover:text-primary hover:underline px-4 font-light"
+          href={buildUrl(`/docs/${domain.collection}/${domain.data.id}`)}
+        >
+          View &rarr;
+        </a>
+      );
+    },
+    id: 'actions',
+    meta: {
+      showFilter: false,
+    },
+  }),
+];

package/eventcatalog/src/components/Tables/columns/index.tsx

@@ -1,8 +1,9 @@
 import { columns as MessageTableColumns } from './MessageTableColumns';
+import { columns as UserTableColumns } from './UserTableColumns';
 import { columns as ServiceTableColumns } from './ServiceTableColumns';
 import { columns as DomainTableColumns } from './DomainTableColumns';
 import { columns as FlowTableColumns } from './FlowTableColumns';
-
+import { columns as TeamsTableColumns } from './TeamsTableColumns';
 export const getColumnsByCollection = (collection: string): any => {
   switch (collection) {
     case 'events':
@@ -15,6 +16,10 @@ export const getColumnsByCollection = (collection: string): any => {
       return DomainTableColumns();
     case 'flows':
       return FlowTableColumns();
+    case 'users':
+      return UserTableColumns();
+    case 'teams':
+      return TeamsTableColumns();
     default:
       return [];
   }

package/eventcatalog/src/layouts/DirectoryLayout.astro

@@ -0,0 +1,110 @@
+---
+import { Table, type TData, type TCollectionTypes } from '@components/Tables/Table';
+import { QueueListIcon, RectangleGroupIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline';
+import ServerIcon from '@heroicons/react/24/outline/ServerIcon';
+import { getCommands } from '@utils/commands';
+import { getDomains } from '@utils/collections/domains';
+import { getFlows } from '@utils/collections/flows';
+import { getEvents } from '@utils/events';
+import { getServices } from '@utils/collections/services';
+import { buildUrl } from '@utils/url-builder';
+import { getQueries } from '@utils/queries';
+import { MagnifyingGlassIcon } from '@heroicons/react/20/solid';
+import VerticalSideBarLayout from './VerticalSideBarLayout.astro';
+import Checkbox from '@components/Checkbox.astro';
+import { User, Users } from 'lucide-react';
+import { getUsers } from '@utils/users';
+import { getTeams } from '@utils/teams';
+
+const users = await getUsers();
+const teams = await getTeams();
+
+export interface Props<T extends TCollectionTypes> {
+  title: string;
+  subtitle: string;
+  data: TData<T>[];
+  type: T;
+}
+
+const { title, subtitle, data, type } = Astro.props;
+const currentPath = Astro.url.pathname;
+
+const checkboxLatestId = 'latest-only';
+
+const tabs = [
+  {
+    label: `Users (${users.length})`,
+    href: buildUrl('/directory/users'),
+    isActive: currentPath === '/directory/users',
+    icon: User,
+    activeColor: 'orange',
+    enabled: users.length > 0,
+  },
+  {
+    label: `Teams (${teams.length})`,
+    href: buildUrl('/directory/teams'),
+    isActive: currentPath === '/directory/teams',
+    icon: Users,
+    activeColor: 'blue',
+    enabled: teams.length > 0,
+  },
+];
+---
+
+<VerticalSideBarLayout title={`Explore | ${title}`}>
+  <main class="ml-0">
+    <div id="discover-collection-tabs">
+      <div class="hidden sm:block">
+        <div class="border-b border-gray-200">
+          <nav class="flex space-x-8 -mb-0.5 pl-6" aria-label="Tabs">
+            {
+              tabs.map((tab) => (
+                <a
+                  href={tab.href}
+                  class={` text-black  group inline-flex items-center py-4 px-1 text-sm font-light ${tab.isActive ? `border-${tab.activeColor}-500 border-b-[2px] text-${tab.activeColor}-500` : 'opacity-80'} ${!tab.enabled ? 'disabled' : ''}`}
+                  aria-current="page"
+                >
+                  <tab.icon
+                    className={`w-6 h-6 -ml-0.5 mr-2  ${tab.isActive ? `text-${tab.activeColor}-500` : 'text-gray-500'}`}
+                  />
+                  <span>{tab.label}</span>
+                </a>
+              ))
+            }
+          </nav>
+        </div>
+      </div>
+    </div>
+
+    <!-- Table -->
+    <div class="pb-20 ml-6 md:pr-10">
+      <div>
+        <div class="sm:flex sm:items-end py-4 pb-4" id="discover-title">
+          <div class="sm:flex-auto space-y-2">
+            <h1 class="text-4xl font-semibold text-gray-900 capitalize">{title}</h1>
+            <p class="text-md text-gray-700">{subtitle}</p>
+          </div>
+        </div>
+        <div class="mt-4 flow-root">
+          <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+            <div class="inline-block min-w-full align-middle sm:px-6 lg:px-8">
+              <Table checkboxLatestId={checkboxLatestId} data={data} collection={type} client:load />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</VerticalSideBarLayout>
+
+<style>
+  .ec-align-top {
+    vertical-align: top !important;
+  }
+
+  a.disabled {
+    pointer-events: none;
+    cursor: default;
+    opacity: 0.25;
+  }
+</style>

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -5,7 +5,7 @@ interface Props {
   description?: string;
 }
 
-import { BookOpenText, Workflow, TableProperties, House } from 'lucide-react';
+import { BookOpenText, Workflow, TableProperties, House, BookUser } from 'lucide-react';
 import Header from '../components/Header.astro';
 import SEO from '../components/Seo.astro';
 
@@ -14,8 +14,6 @@ import { getDomains } from '@utils/collections/domains';
 import { getEvents } from '@utils/events';
 import { getServices } from '@utils/collections/services';
 import { getFlows } from '@utils/collections/flows';
-import { getTeams } from '@utils/teams';
-import { getUsers } from '@utils/users';
 import { isCollectionVisibleInCatalog } from '@eventcatalog';
 import { buildUrl } from '@utils/url-builder';
 import { getQueries } from '@utils/queries';
@@ -30,13 +28,11 @@ const services = await getServices({ getAllVersions: false });
 const domains = await getDomains({ getAllVersions: false });
 const channels = await getChannels({ getAllVersions: false });
 const flows = await getFlows({ getAllVersions: false });
-const teams = await getTeams();
-const users = await getUsers();
 
 const messages = [...events, ...commands, ...queries];
 
 // @ts-ignore for large catalogs https://github.com/event-catalog/eventcatalog/issues/552
-const allData = [...domains, ...services, ...messages, ...channels, ...flows, ...teams, ...users];
+const allData = [...domains, ...services, ...messages, ...channels, ...flows];
 
 const currentPath = Astro.url.pathname;
 
@@ -95,6 +91,14 @@ const navigationItems = [
     current: currentPath.includes('/discover/'),
     sidebar: false,
   },
+  {
+    id: '/directory',
+    label: 'Directory',
+    icon: BookUser,
+    href: buildUrl('/directory/users'),
+    current: currentPath.includes('/directory'),
+    sidebar: false,
+  },
 ];
 
 const allDataAsSideNav = allData.reduce((acc, item) => {
@@ -103,17 +107,9 @@ const allDataAsSideNav = allData.reduce((acc, item) => {
   const currentPath = Astro.url.pathname;
   const route = currentPath.includes('visualiser') ? 'visualiser' : 'docs';
 
-  if (
-    currentPath.includes('visualiser') &&
-    (item.collection === 'teams' || item.collection === 'users' || item.collection === 'channels')
-  ) {
-    return acc;
-  }
-
   const navigationItem = {
     label: item.data.name,
-    version: item.collection === 'teams' || item.collection === 'users' ? null : item.data.version,
-    // items: item.collection === 'users' ? [] : item.headings,
+    version: item.data.version,
     visible: isCollectionVisibleInCatalog(item.collection),
     // @ts-ignore
     href: item.data.version

package/eventcatalog/src/pages/directory/[type]/index.astro

@@ -0,0 +1,69 @@
+---
+import { getUsers } from '@utils/users';
+import { getTeams } from '@utils/teams';
+
+import DirectoryLayout, { type Props as DirectoryLayoutProps } from '@layouts/DirectoryLayout.astro';
+
+export async function getStaticPaths() {
+  const loaders = {
+    users: getUsers,
+    teams: getTeams,
+  };
+
+  const itemTypes = ['users', 'teams'] as const;
+  const allItems = await Promise.all(itemTypes.map((type) => loaders[type]()));
+
+  return allItems.flatMap((items, index) => ({
+    params: {
+      type: itemTypes[index],
+    },
+    props: {
+      data: items,
+      type: itemTypes[index],
+    },
+  }));
+}
+
+const { type, data } = Astro.props;
+
+function mapToItem(i: any) {
+  return {
+    collection: i.collection,
+    data: {
+      id: i.data.id,
+      name: i.data.name,
+      version: i.data.version,
+    },
+  };
+}
+---
+
+<DirectoryLayout
+  title={`${type} (${data.length})`}
+  subtitle={`Find, filter and search for any ${type} in your system.`}
+  data={data.map(
+    (d) =>
+      ({
+        collection: d.collection,
+        data: {
+          id: d.data.id,
+          name: d.data.name,
+          // @ts-ignore
+          role: d.data?.role,
+          // @ts-ignore
+          avatarUrl: d.data?.avatarUrl,
+          // @ts-ignore
+          associatedTeams: d.data?.associatedTeams?.map(mapToItem) ?? [],
+          // @ts-ignore
+          ownedCommands: d.data?.ownedCommands?.map(mapToItem) ?? [],
+          // @ts-ignore
+          ownedEvents: d.data?.ownedEvents?.map(mapToItem) ?? [],
+          // @ts-ignore
+          ownedServices: d.data?.ownedServices?.map(mapToItem) ?? [],
+          // @ts-ignore
+          members: d.data?.members,
+        },
+      }) as DirectoryLayoutProps<typeof type>['data'][0]
+  )}
+  type={type}
+/>

package/eventcatalog/src/pages/directory/index.astro

@@ -0,0 +1,242 @@
+---
+import VerticalSideBarLayout from '../../layouts/VerticalSideBarLayout.astro';
+import { getUsers } from '@utils/users';
+import { getTeams } from '@utils/teams';
+
+const users = await getUsers();
+const teams = await getTeams();
+---
+
+<VerticalSideBarLayout title="EventCatalog">
+  <body class="min-h-screen bg-gray-50">
+    <main>
+      <div class="container mx-auto px-6 py-20 max-w-[90em]">
+        <div class="mb-12">
+          <h1 class="text-3xl font-bold text-gray-900 mb-8">Users</h1>
+          <div class="bg-white shadow-sm rounded-lg overflow-hidden">
+            <table class="min-w-full divide-y divide-gray-200">
+              <thead class="bg-gray-50">
+                <tr>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th
+                  >
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >Contact</th
+                  >
+                </tr>
+              </thead>
+              <tbody class="bg-white divide-y divide-gray-200">
+                {
+                  users.map((user: any) => (
+                    <tr class="hover:bg-gray-50">
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <a href={`/docs/users/${user.data.id}`} class="flex items-center">
+                          <div class="flex-shrink-0 h-10 w-10">
+                            <div class="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center overflow-hidden">
+                              {user.data.avatarUrl ? (
+                                <img src={user.data.avatarUrl} alt={user.data.name} class="h-10 w-10 object-cover" />
+                              ) : (
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  class="h-5 w-5 text-blue-600"
+                                  fill="none"
+                                  viewBox="0 0 24 24"
+                                  stroke="currentColor"
+                                >
+                                  <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                                  />
+                                </svg>
+                              )}
+                            </div>
+                          </div>
+                          <div class="ml-4">
+                            <div class="text-sm font-medium text-gray-900">{user.data.name}</div>
+                          </div>
+                        </a>
+                      </td>
+                      <td class="px-6 py-4">
+                        <div class="text-sm text-gray-900">{user.data.role}</div>
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        {user.data.email && <div class="text-sm text-gray-900">{user.data.email}</div>}
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="flex items-center space-x-2">
+                          {user.data.slackDirectMessageUrl && (
+                            <a
+                              href={user.data.slackDirectMessageUrl}
+                              target="_blank"
+                              rel="noopener"
+                              class="text-gray-500 hover:text-gray-700"
+                            >
+                              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" />
+                              </svg>
+                            </a>
+                          )}
+                          {user.data.msTeamsDirectMessageUrl && (
+                            <a
+                              href={user.data.msTeamsDirectMessageUrl}
+                              target="_blank"
+                              rel="noopener"
+                              class="text-gray-500 hover:text-gray-700"
+                            >
+                              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" />
+                              </svg>
+                            </a>
+                          )}
+                        </div>
+                      </td>
+                    </tr>
+                  ))
+                }
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div class="mb-12">
+          <h1 class="text-3xl font-bold text-gray-900 mb-8">Teams</h1>
+          <div class="bg-white shadow-sm rounded-lg overflow-hidden">
+            <table class="min-w-full divide-y divide-gray-200">
+              <thead class="bg-gray-50">
+                <tr>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >Summary</th
+                  >
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >Members</th
+                  >
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    >Contact</th
+                  >
+                </tr>
+              </thead>
+              <tbody class="bg-white divide-y divide-gray-200">
+                {
+                  teams.map((team: any) => (
+                    <tr class="hover:bg-gray-50">
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <a href={`/docs/teams/${team.data.id}`} class="flex items-center">
+                          <div class="flex-shrink-0 h-10 w-10">
+                            <div class="h-10 w-10 bg-green-100 rounded-full flex items-center justify-center overflow-hidden">
+                              {team.data.avatarUrl ? (
+                                <img src={team.data.avatarUrl} alt={team.data.name} class="h-10 w-10 object-cover" />
+                              ) : (
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  class="h-5 w-5 text-green-600"
+                                  fill="none"
+                                  viewBox="0 0 24 24"
+                                  stroke="currentColor"
+                                >
+                                  <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+                                  />
+                                </svg>
+                              )}
+                            </div>
+                          </div>
+                          <div class="ml-4">
+                            <div class="text-sm font-medium text-gray-900">{team.data.name}</div>
+                          </div>
+                        </a>
+                      </td>
+                      <td class="px-6 py-4">
+                        <div class="text-sm text-gray-900">{team.data.summary}</div>
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        {team.data.members && <div class="text-sm text-gray-900">{team.data.members.length} members</div>}
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="flex items-center space-x-2">
+                          {team.data.slackDirectMessageUrl && (
+                            <a
+                              href={team.data.slackDirectMessageUrl}
+                              target="_blank"
+                              rel="noopener"
+                              class="text-gray-500 hover:text-gray-700"
+                            >
+                              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" />
+                              </svg>
+                            </a>
+                          )}
+                          {team.data.msTeamsDirectMessageUrl && (
+                            <a
+                              href={team.data.msTeamsDirectMessageUrl}
+                              target="_blank"
+                              rel="noopener"
+                              class="text-gray-500 hover:text-gray-700"
+                            >
+                              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" />
+                              </svg>
+                            </a>
+                          )}
+                        </div>
+                      </td>
+                    </tr>
+                  ))
+                }
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </main>
+  </body>
+</VerticalSideBarLayout>
+
+<style>
+  .filter-btn.active {
+    background-color: #f3f4f6;
+    color: #111827;
+  }
+
+  .filter-btn {
+    color: #6b7280;
+  }
+
+  .filter-btn:hover {
+    color: #111827;
+  }
+</style>
+
+<script>
+  const filterButtons = document.querySelectorAll('.filter-btn');
+  const rows = document.querySelectorAll('tr[data-type]');
+
+  filterButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      filterButtons.forEach((btn) => btn.classList.remove('active'));
+      button.classList.add('active');
+
+      const filter = button.getAttribute('data-filter');
+
+      rows.forEach((row) => {
+        if (filter === 'all') {
+          row.style.display = 'table-row';
+        } else {
+          const rowType = row.getAttribute('data-type');
+          row.style.display = rowType === filter ? 'table-row' : 'none';
+        }
+      });
+    });
+  });
+
+  const defaultButton = document.querySelector('[data-filter="all"]');
+  if (defaultButton) {
+    defaultButton.classList.add('active');
+  }
+</script>

package/eventcatalog/src/types/index.ts

@@ -1,4 +1,4 @@
 export type CollectionTypes = 'commands' | 'events' | 'queries' | 'domains' | 'services' | 'flows' | 'channels';
 export type CollectionMessageTypes = 'commands' | 'events' | 'queries';
-
+export type CollectionUserTypes = 'users';
 export type PageTypes = 'events' | 'commands' | 'queries' | 'services' | 'domains' | 'channels';

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.19.9",
+  "version": "2.20.0",
   "publishConfig": {
     "access": "public"
   },