cortex-react-components 2.26.5 → 2.27.0

package/dist/components/AdvancedComponents/org-chart-component/OrgNode.js

@@ -0,0 +1,9 @@
+"use strict";var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var f=(r,t)=>{for(var a in t)s(r,a,{get:t[a],enumerable:!0})},x=(r,t,a,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of b(t))!p.call(r,o)&&o!==a&&s(r,o,{get:()=>t[o],enumerable:!(n=u(t,o))||n.enumerable});return r};var h=r=>x(s({},"__esModule",{value:!0}),r);var v={};f(v,{OrgNode:()=>C});module.exports=h(v);function l(r){if(!r)return"?";let t=r.trim().split(/\s+/);return t.length===1?t[0].substring(0,2).toUpperCase():(t[0][0]+t[t.length-1][0]).toUpperCase()}function d(r){return r&&{P:"bg-primary/20 text-primary border-primary/30",SM:"bg-accent/20 text-accent border-accent/30",M:"bg-accent/15 text-accent border-accent/25",SC2:"bg-card text-card-foreground border-border",SC1:"bg-card text-card-foreground border-border",C3:"bg-muted text-muted-foreground border-border",C2:"bg-muted text-muted-foreground border-border",C1:"bg-muted text-muted-foreground border-border"}[r]||"bg-muted text-muted-foreground"}var c={C1:"Consultant 1",C2:"Consultant 2",C3:"Consultant 3",SC1:"Senior Consultant 1",SC2:"Senior Consultant 2",M:"Manager",SM:"Senior Manager",P:"Partner"};var e=require("react/jsx-runtime"),C=({node:r,onNodeClick:t,expandable:a=!1,isExpanded:n=!0,onToggleExpand:o})=>{let i=r.children.length>0,g=a&&i;return(0,e.jsxs)("div",{className:"flex flex-col items-center",children:[(0,e.jsxs)("div",{className:`
+          relative bg-card border border-border rounded-lg shadow-sm
+          transition-all duration-200 hover:shadow-md hover:border-primary/50
+          ${t?"cursor-pointer":""}
+          w-64 p-4
+        `,onClick:()=>t?.(r),children:[(0,e.jsxs)("div",{className:"flex items-start gap-3",children:[(0,e.jsx)("div",{className:"flex-shrink-0",children:r.profilePicture?.url?(0,e.jsx)("img",{src:r.profilePicture.url,alt:r.profilePicture.alt||r.name,className:"w-12 h-12 rounded-full object-cover border-2 border-primary/20"}):(0,e.jsx)("div",{className:"w-12 h-12 rounded-full bg-primary/10 border-2 border-primary/20 flex items-center justify-center",children:(0,e.jsx)("span",{className:"text-sm font-semibold text-primary",children:l(r.name)})})}),(0,e.jsxs)("div",{className:"flex-1 min-w-0",children:[(0,e.jsx)("h3",{className:"font-semibold text-card-foreground text-sm truncate",children:r.name}),(0,e.jsx)("p",{className:"text-xs text-muted-foreground truncate",children:r.email}),r.jobRole&&(0,e.jsx)("div",{className:"mt-2",children:(0,e.jsx)("span",{className:`
+                    inline-block px-2 py-0.5 rounded text-xs font-medium border
+                    ${d(r.jobRole)}
+                  `,children:c[r.jobRole]})})]})]}),r.about&&(0,e.jsx)("div",{className:"mt-3 pt-3 border-t border-border",children:(0,e.jsx)("p",{className:"text-xs text-muted-foreground line-clamp-2",children:r.about})}),g&&(0,e.jsx)("button",{onClick:m=>{m.stopPropagation(),o?.()},className:"absolute -bottom-3 left-1/2 -translate-x-1/2 w-6 h-6 rounded-full bg-card border-2 border-border hover:border-primary/50 flex items-center justify-center transition-colors","aria-label":n?"Collapse":"Expand",children:(0,e.jsx)("svg",{className:`w-3 h-3 text-muted-foreground transition-transform ${n?"rotate-180":""}`,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:(0,e.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})})]}),i&&n&&(0,e.jsx)("div",{className:"w-0.5 h-8 bg-border"})]})};0&&(module.exports={OrgNode});

package/dist/components/AdvancedComponents/org-chart-component/OrgNode.mjs

@@ -0,0 +1 @@
+import{a}from"../../../chunk-KQRQXBJ3.mjs";import"../../../chunk-SOTCQX2G.mjs";import"../../../chunk-32G45Z2G.mjs";import"../../../chunk-YEKQJ4YC.mjs";export{a as OrgNode};

package/dist/components/AdvancedComponents/org-chart-component/OrgTree.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { OrgChartNode, User } from './types';
+interface OrgTreeProps {
+    nodes: OrgChartNode[];
+    onNodeClick?: (user: User) => void;
+    expandable?: boolean;
+    initiallyExpanded?: boolean;
+}
+export declare const OrgTree: React.FC<OrgTreeProps>;
+export {};

package/dist/components/AdvancedComponents/org-chart-component/OrgTree.js

@@ -0,0 +1,12 @@
+"use strict";var g=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var N=Object.prototype.hasOwnProperty;var y=(e,r)=>{for(var n in r)g(e,n,{get:r[n],enumerable:!0})},O=(e,r,n,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of C(r))!N.call(e,a)&&a!==n&&g(e,a,{get:()=>r[a],enumerable:!(s=v(r,a))||s.enumerable});return e};var P=e=>O(g({},"__esModule",{value:!0}),e);var R={};y(R,{OrgTree:()=>w});module.exports=P(R);var x=require("react");function p(e){if(!e)return"?";let r=e.trim().split(/\s+/);return r.length===1?r[0].substring(0,2).toUpperCase():(r[0][0]+r[r.length-1][0]).toUpperCase()}function u(e){return e&&{P:"bg-primary/20 text-primary border-primary/30",SM:"bg-accent/20 text-accent border-accent/30",M:"bg-accent/15 text-accent border-accent/25",SC2:"bg-card text-card-foreground border-border",SC1:"bg-card text-card-foreground border-border",C3:"bg-muted text-muted-foreground border-border",C2:"bg-muted text-muted-foreground border-border",C1:"bg-muted text-muted-foreground border-border"}[e]||"bg-muted text-muted-foreground"}var b={C1:"Consultant 1",C2:"Consultant 2",C3:"Consultant 3",SC1:"Senior Consultant 1",SC2:"Senior Consultant 2",M:"Manager",SM:"Senior Manager",P:"Partner"};var t=require("react/jsx-runtime"),f=({node:e,onNodeClick:r,expandable:n=!1,isExpanded:s=!0,onToggleExpand:a})=>{let l=e.children.length>0,i=n&&l;return(0,t.jsxs)("div",{className:"flex flex-col items-center",children:[(0,t.jsxs)("div",{className:`
+          relative bg-card border border-border rounded-lg shadow-sm
+          transition-all duration-200 hover:shadow-md hover:border-primary/50
+          ${r?"cursor-pointer":""}
+          w-64 p-4
+        `,onClick:()=>r?.(e),children:[(0,t.jsxs)("div",{className:"flex items-start gap-3",children:[(0,t.jsx)("div",{className:"flex-shrink-0",children:e.profilePicture?.url?(0,t.jsx)("img",{src:e.profilePicture.url,alt:e.profilePicture.alt||e.name,className:"w-12 h-12 rounded-full object-cover border-2 border-primary/20"}):(0,t.jsx)("div",{className:"w-12 h-12 rounded-full bg-primary/10 border-2 border-primary/20 flex items-center justify-center",children:(0,t.jsx)("span",{className:"text-sm font-semibold text-primary",children:p(e.name)})})}),(0,t.jsxs)("div",{className:"flex-1 min-w-0",children:[(0,t.jsx)("h3",{className:"font-semibold text-card-foreground text-sm truncate",children:e.name}),(0,t.jsx)("p",{className:"text-xs text-muted-foreground truncate",children:e.email}),e.jobRole&&(0,t.jsx)("div",{className:"mt-2",children:(0,t.jsx)("span",{className:`
+                    inline-block px-2 py-0.5 rounded text-xs font-medium border
+                    ${u(e.jobRole)}
+                  `,children:b[e.jobRole]})})]})]}),e.about&&(0,t.jsx)("div",{className:"mt-3 pt-3 border-t border-border",children:(0,t.jsx)("p",{className:"text-xs text-muted-foreground line-clamp-2",children:e.about})}),i&&(0,t.jsx)("button",{onClick:d=>{d.stopPropagation(),a?.()},className:"absolute -bottom-3 left-1/2 -translate-x-1/2 w-6 h-6 rounded-full bg-card border-2 border-border hover:border-primary/50 flex items-center justify-center transition-colors","aria-label":s?"Collapse":"Expand",children:(0,t.jsx)("svg",{className:`w-3 h-3 text-muted-foreground transition-transform ${s?"rotate-180":""}`,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:(0,t.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})})]}),l&&s&&(0,t.jsx)("div",{className:"w-0.5 h-8 bg-border"})]})};var w=({nodes:e,onNodeClick:r,expandable:n=!1,initiallyExpanded:s=!0})=>(0,t.jsx)("div",{className:"flex flex-col items-center gap-0",children:e.map((a,l)=>(0,t.jsx)(h,{node:a,onNodeClick:r,expandable:n,initiallyExpanded:s,isLast:l===e.length-1},a.id))}),h=({node:e,onNodeClick:r,expandable:n,initiallyExpanded:s=!0,isLast:a=!1})=>{let[l,i]=(0,x.useState)(s),d=e.children.length>0;return(0,t.jsxs)("div",{className:`flex flex-col items-center ${a?"":"mb-8"}`,children:[(0,t.jsx)(f,{node:e,onNodeClick:r,expandable:n,isExpanded:l,onToggleExpand:()=>i(!l)}),d&&l&&(0,t.jsxs)("div",{className:"flex flex-col items-center mt-0",children:[e.children.length>1&&(0,t.jsx)("div",{className:"relative w-full flex justify-center",children:(0,t.jsxs)("div",{className:"absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-[800px]",children:[(0,t.jsx)("div",{className:"absolute top-0 left-0 right-0 h-0.5 bg-border"}),(0,t.jsx)("div",{className:"flex justify-around",children:e.children.map((c,m)=>(0,t.jsx)("div",{className:"w-0.5 h-8 bg-border"},m))})]})}),(0,t.jsx)("div",{className:`
+              flex gap-8 mt-8
+              ${e.children.length===1?"flex-col items-center":"flex-row items-start justify-center flex-wrap"}
+            `,children:e.children.map((c,m)=>(0,t.jsx)(h,{node:c,onNodeClick:r,expandable:n,initiallyExpanded:s,isLast:m===e.children.length-1},c.id))})]})]})};0&&(module.exports={OrgTree});

package/dist/components/AdvancedComponents/org-chart-component/OrgTree.mjs

@@ -0,0 +1 @@
+import{a}from"../../../chunk-G6OGEIN4.mjs";import"../../../chunk-KQRQXBJ3.mjs";import"../../../chunk-SOTCQX2G.mjs";import"../../../chunk-32G45Z2G.mjs";import"../../../chunk-YEKQJ4YC.mjs";export{a as OrgTree};

package/dist/components/AdvancedComponents/org-chart-component/examples/PayloadIntegration.js

@@ -0,0 +1,233 @@
+var a=`
+\`\`\`js
+/**
+ * Example: Integrating OrgChart with PayloadCMS3
+ * 
+ * This example shows how to fetch user data from Payload using the client SDK
+ * and render it in the OrgChart component.
+ */
+
+import React from 'react';
+import { OrgChart } from '../OrgChart';
+import type { User } from '../types';
+
+/**
+ * Server Component Example (Next.js App Router)
+ * 
+ * Use this approach in a server component to fetch data at build/request time.
+ */
+export async function OrgChartServerComponent() {
+  // Import Payload config (adjust path to your project structure)
+  const { getPayload } = await import('payload');
+  const config = await import('@/payload.config').then((m) => m.default);
+  
+  // Get Payload instance
+  const payload = await getPayload({ config });
+  
+  // Fetch all users with manager relationships
+  const usersResponse = await payload.find({
+    collection: 'users',
+    depth: 2, // Include manager relationship data
+    limit: 1000, // Adjust based on your org size
+  });
+  
+  // Transform Payload data to OrgChart format
+  const users: User[] = usersResponse.docs.map((doc) => ({
+    id: doc.id,
+    name: doc.name || '',
+    email: doc.email,
+    jobRole: doc.jobRole,
+    manager: doc.manager,
+    about: doc.about,
+    profilePicture: doc.profilePicture
+      ? {
+          url: typeof doc.profilePicture === 'object' 
+            ? doc.profilePicture.url 
+            : doc.profilePicture,
+          alt: doc.name,
+        }
+      : undefined,
+  }));
+  
+  return (
+    <div className="container mx-auto py-8">
+      <h1 className="text-3xl font-bold mb-8">Organization Chart</h1>
+      <OrgChart 
+        users={users} 
+        expandable={true}
+        initiallyExpanded={true}
+      />
+    </div>
+  );
+}
+
+/**
+ * Client Component Example (with Server Action or API Route)
+ * 
+ * Use this approach when you need client-side interactivity.
+ */
+'use client';
+
+interface OrgChartClientComponentProps {
+  initialUsers: User[];
+}
+
+export function OrgChartClientComponent({ initialUsers }: OrgChartClientComponentProps) {
+  const [users, setUsers] = React.useState<User[]>(initialUsers);
+  const [selectedUser, setSelectedUser] = React.useState<User | null>(null);
+  
+  const handleNodeClick = (user: User) => {
+    setSelectedUser(user);
+    // You could also navigate to a user detail page here
+    // router.push(\`/team/\${user.id}\`);
+  };
+  
+  return (
+    <div className="container mx-auto py-8">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold">Organization Chart</h1>
+        <p className="text-muted-foreground mt-2">
+          Click on any team member to view details
+        </p>
+      </div>
+      
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        {/* Org Chart */}
+        <div className="lg:col-span-2">
+          <OrgChart 
+            users={users}
+            onNodeClick={handleNodeClick}
+            expandable={true}
+            initiallyExpanded={true}
+          />
+        </div>
+        
+        {/* Selected User Details */}
+        <div className="lg:col-span-1">
+          {selectedUser ? (
+            <div className="bg-card border border-border rounded-lg p-6 sticky top-8">
+              <h2 className="text-xl font-semibold mb-4">Team Member Details</h2>
+              <div className="space-y-4">
+                <div>
+                  <label className="text-sm text-muted-foreground">Name</label>
+                  <p className="font-medium">{selectedUser.name}</p>
+                </div>
+                <div>
+                  <label className="text-sm text-muted-foreground">Email</label>
+                  <p className="font-medium">{selectedUser.email}</p>
+                </div>
+                {selectedUser.jobRole && (
+                  <div>
+                    <label className="text-sm text-muted-foreground">Role</label>
+                    <p className="font-medium">{selectedUser.jobRole}</p>
+                  </div>
+                )}
+                {selectedUser.about && (
+                  <div>
+                    <label className="text-sm text-muted-foreground">About</label>
+                    <p className="text-sm">{selectedUser.about}</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : (
+            <div className="bg-muted/50 border border-border rounded-lg p-6 text-center">
+              <p className="text-muted-foreground">
+                Select a team member to view details
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * API Route Example (Next.js App Router)
+ * 
+ * Create this file at: app/api/org-chart/route.ts
+ */
+export async function GET() {
+  const { getPayload } = await import('payload');
+  const config = await import('@/payload.config').then((m) => m.default);
+  
+  const payload = await getPayload({ config });
+  
+  const usersResponse = await payload.find({
+    collection: 'users',
+    depth: 2,
+    limit: 1000,
+  });
+  
+  const users: User[] = usersResponse.docs.map((doc) => ({
+    id: doc.id,
+    name: doc.name || '',
+    email: doc.email,
+    jobRole: doc.jobRole,
+    manager: doc.manager,
+    about: doc.about,
+    profilePicture: doc.profilePicture
+      ? {
+          url: typeof doc.profilePicture === 'object' 
+            ? doc.profilePicture.url 
+            : doc.profilePicture,
+          alt: doc.name,
+        }
+      : undefined,
+  }));
+  
+  return Response.json({ users });
+}
+
+/**
+ * Server Action Example (Next.js App Router)
+ * 
+ * Create this file at: app/actions/getOrgChartData.ts
+ */
+'use server';
+
+export async function getOrgChartData(): Promise<User[]> {
+  const { getPayload } = await import('payload');
+  const config = await import('@/payload.config').then((m) => m.default);
+  
+  const payload = await getPayload({ config });
+  
+  const usersResponse = await payload.find({
+    collection: 'users',
+    depth: 2,
+    limit: 1000,
+    // Optional: Add sorting
+    sort: 'name',
+  });
+  
+  return usersResponse.docs.map((doc) => ({
+    id: doc.id,
+    name: doc.name || '',
+    email: doc.email,
+    jobRole: doc.jobRole,
+    manager: doc.manager,
+    about: doc.about,
+    profilePicture: doc.profilePicture
+      ? {
+          url: typeof doc.profilePicture === 'object' 
+            ? doc.profilePicture.url 
+            : doc.profilePicture,
+          alt: doc.name,
+        }
+      : undefined,
+  }));
+}
+
+/**
+ * Usage in a page component:
+ * 
+ * import { getOrgChartData } from '@/app/actions/getOrgChartData';
+ * import { OrgChartClientComponent } from '@/components/OrgChartClientComponent';
+ * 
+ * export default async function OrgChartPage() {
+ *   const users = await getOrgChartData();
+ *   return <OrgChartClientComponent initialUsers={users} />;
+ * }
+ */
+\`\`\``;

package/dist/components/AdvancedComponents/org-chart-component/examples/PayloadIntegration.mjs

@@ -0,0 +1,233 @@
+import"../../../../chunk-YEKQJ4YC.mjs";var a=`
+\`\`\`js
+/**
+ * Example: Integrating OrgChart with PayloadCMS3
+ * 
+ * This example shows how to fetch user data from Payload using the client SDK
+ * and render it in the OrgChart component.
+ */
+
+import React from 'react';
+import { OrgChart } from '../OrgChart';
+import type { User } from '../types';
+
+/**
+ * Server Component Example (Next.js App Router)
+ * 
+ * Use this approach in a server component to fetch data at build/request time.
+ */
+export async function OrgChartServerComponent() {
+  // Import Payload config (adjust path to your project structure)
+  const { getPayload } = await import('payload');
+  const config = await import('@/payload.config').then((m) => m.default);
+  
+  // Get Payload instance
+  const payload = await getPayload({ config });
+  
+  // Fetch all users with manager relationships
+  const usersResponse = await payload.find({
+    collection: 'users',
+    depth: 2, // Include manager relationship data
+    limit: 1000, // Adjust based on your org size
+  });
+  
+  // Transform Payload data to OrgChart format
+  const users: User[] = usersResponse.docs.map((doc) => ({
+    id: doc.id,
+    name: doc.name || '',
+    email: doc.email,
+    jobRole: doc.jobRole,
+    manager: doc.manager,
+    about: doc.about,
+    profilePicture: doc.profilePicture
+      ? {
+          url: typeof doc.profilePicture === 'object' 
+            ? doc.profilePicture.url 
+            : doc.profilePicture,
+          alt: doc.name,
+        }
+      : undefined,
+  }));
+  
+  return (
+    <div className="container mx-auto py-8">
+      <h1 className="text-3xl font-bold mb-8">Organization Chart</h1>
+      <OrgChart 
+        users={users} 
+        expandable={true}
+        initiallyExpanded={true}
+      />
+    </div>
+  );
+}
+
+/**
+ * Client Component Example (with Server Action or API Route)
+ * 
+ * Use this approach when you need client-side interactivity.
+ */
+'use client';
+
+interface OrgChartClientComponentProps {
+  initialUsers: User[];
+}
+
+export function OrgChartClientComponent({ initialUsers }: OrgChartClientComponentProps) {
+  const [users, setUsers] = React.useState<User[]>(initialUsers);
+  const [selectedUser, setSelectedUser] = React.useState<User | null>(null);
+  
+  const handleNodeClick = (user: User) => {
+    setSelectedUser(user);
+    // You could also navigate to a user detail page here
+    // router.push(\`/team/\${user.id}\`);
+  };
+  
+  return (
+    <div className="container mx-auto py-8">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold">Organization Chart</h1>
+        <p className="text-muted-foreground mt-2">
+          Click on any team member to view details
+        </p>
+      </div>
+      
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        {/* Org Chart */}
+        <div className="lg:col-span-2">
+          <OrgChart 
+            users={users}
+            onNodeClick={handleNodeClick}
+            expandable={true}
+            initiallyExpanded={true}
+          />
+        </div>
+        
+        {/* Selected User Details */}
+        <div className="lg:col-span-1">
+          {selectedUser ? (
+            <div className="bg-card border border-border rounded-lg p-6 sticky top-8">
+              <h2 className="text-xl font-semibold mb-4">Team Member Details</h2>
+              <div className="space-y-4">
+                <div>
+                  <label className="text-sm text-muted-foreground">Name</label>
+                  <p className="font-medium">{selectedUser.name}</p>
+                </div>
+                <div>
+                  <label className="text-sm text-muted-foreground">Email</label>
+                  <p className="font-medium">{selectedUser.email}</p>
+                </div>
+                {selectedUser.jobRole && (
+                  <div>
+                    <label className="text-sm text-muted-foreground">Role</label>
+                    <p className="font-medium">{selectedUser.jobRole}</p>
+                  </div>
+                )}
+                {selectedUser.about && (
+                  <div>
+                    <label className="text-sm text-muted-foreground">About</label>
+                    <p className="text-sm">{selectedUser.about}</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : (
+            <div className="bg-muted/50 border border-border rounded-lg p-6 text-center">
+              <p className="text-muted-foreground">
+                Select a team member to view details
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * API Route Example (Next.js App Router)
+ * 
+ * Create this file at: app/api/org-chart/route.ts
+ */
+export async function GET() {
+  const { getPayload } = await import('payload');
+  const config = await import('@/payload.config').then((m) => m.default);
+  
+  const payload = await getPayload({ config });
+  
+  const usersResponse = await payload.find({
+    collection: 'users',
+    depth: 2,
+    limit: 1000,
+  });
+  
+  const users: User[] = usersResponse.docs.map((doc) => ({
+    id: doc.id,
+    name: doc.name || '',
+    email: doc.email,
+    jobRole: doc.jobRole,
+    manager: doc.manager,
+    about: doc.about,
+    profilePicture: doc.profilePicture
+      ? {
+          url: typeof doc.profilePicture === 'object' 
+            ? doc.profilePicture.url 
+            : doc.profilePicture,
+          alt: doc.name,
+        }
+      : undefined,
+  }));
+  
+  return Response.json({ users });
+}
+
+/**
+ * Server Action Example (Next.js App Router)
+ * 
+ * Create this file at: app/actions/getOrgChartData.ts
+ */
+'use server';
+
+export async function getOrgChartData(): Promise<User[]> {
+  const { getPayload } = await import('payload');
+  const config = await import('@/payload.config').then((m) => m.default);
+  
+  const payload = await getPayload({ config });
+  
+  const usersResponse = await payload.find({
+    collection: 'users',
+    depth: 2,
+    limit: 1000,
+    // Optional: Add sorting
+    sort: 'name',
+  });
+  
+  return usersResponse.docs.map((doc) => ({
+    id: doc.id,
+    name: doc.name || '',
+    email: doc.email,
+    jobRole: doc.jobRole,
+    manager: doc.manager,
+    about: doc.about,
+    profilePicture: doc.profilePicture
+      ? {
+          url: typeof doc.profilePicture === 'object' 
+            ? doc.profilePicture.url 
+            : doc.profilePicture,
+          alt: doc.name,
+        }
+      : undefined,
+  }));
+}
+
+/**
+ * Usage in a page component:
+ * 
+ * import { getOrgChartData } from '@/app/actions/getOrgChartData';
+ * import { OrgChartClientComponent } from '@/components/OrgChartClientComponent';
+ * 
+ * export default async function OrgChartPage() {
+ *   const users = await getOrgChartData();
+ *   return <OrgChartClientComponent initialUsers={users} />;
+ * }
+ */
+\`\`\``;export{a as default};

package/dist/components/AdvancedComponents/org-chart-component/index.d.ts

@@ -0,0 +1,4 @@
+export { OrgChart } from './OrgChart';
+export { OrgNode } from './OrgNode';
+export { OrgTree } from './OrgTree';
+export * from './utils';

package/dist/components/AdvancedComponents/org-chart-component/index.js

@@ -0,0 +1,12 @@
+"use strict";var f=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var k=(e,r)=>{for(var o in r)f(e,o,{get:r[o],enumerable:!0})},R=(e,r,o,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of P(r))!w.call(e,t)&&t!==o&&f(e,t,{get:()=>r[t],enumerable:!(i=y(r,t))||i.enumerable});return e};var E=e=>R(f({},"__esModule",{value:!0}),e);var U={};k(U,{OrgChart:()=>O,OrgNode:()=>m,OrgTree:()=>p,buildOrgTree:()=>b,getInitials:()=>x,getRoleBadgeColor:()=>h});module.exports=E(U);function b(e){let r=new Map,o=[];e.forEach(t=>{r.set(t.id,{...t,children:[],level:0})}),e.forEach(t=>{let a=r.get(t.id);if(!a)return;let d=typeof t.manager=="string"?t.manager:t.manager?.id;if(d){let c=r.get(d);c?(c.children.push(a),a.level=c.level+1):o.push(a)}else o.push(a)});let i=(t,a)=>{t.level=a,t.children.forEach(d=>i(d,a+1))};return o.forEach(t=>i(t,0)),o}function x(e){if(!e)return"?";let r=e.trim().split(/\n+/);return r.length===1?r[0].substring(0,2).toUpperCase():(r[0][0]+r[r.length-1][0]).toUpperCase()}function h(e){return e&&{P:"bg-primary/20 text-primary border-primary/30",SM:"bg-accent/20 text-accent border-accent/30",M:"bg-accent/15 text-accent border-accent/25",SC2:"bg-card text-card-foreground border-border",SC1:"bg-card text-card-foreground border-border",C3:"bg-muted text-muted-foreground border-border",C2:"bg-muted text-muted-foreground border-border",C1:"bg-muted text-muted-foreground border-border"}[e]||"bg-muted text-muted-foreground"}var N=require("react");var v={C1:"Consultant 1",C2:"Consultant 2",C3:"Consultant 3",SC1:"Senior Consultant 1",SC2:"Senior Consultant 2",M:"Manager",SM:"Senior Manager",P:"Partner"};var n=require("react/jsx-runtime"),m=({node:e,onNodeClick:r,expandable:o=!1,isExpanded:i=!0,onToggleExpand:t})=>{let a=e.children.length>0,d=o&&a;return(0,n.jsxs)("div",{className:"flex flex-col items-center",children:[(0,n.jsxs)("div",{className:`
+          relative bg-card border border-border rounded-lg shadow-sm
+          transition-all duration-200 hover:shadow-md hover:border-primary/50
+          ${r?"cursor-pointer":""}
+          w-64 p-4
+        `,onClick:()=>r?.(e),children:[(0,n.jsxs)("div",{className:"flex items-start gap-3",children:[(0,n.jsx)("div",{className:"flex-shrink-0",children:e.profilePicture?.url?(0,n.jsx)("img",{src:e.profilePicture.url,alt:e.profilePicture.alt||e.name,className:"w-12 h-12 rounded-full object-cover border-2 border-primary/20"}):(0,n.jsx)("div",{className:"w-12 h-12 rounded-full bg-primary/10 border-2 border-primary/20 flex items-center justify-center",children:(0,n.jsx)("span",{className:"text-sm font-semibold text-primary",children:x(e.name)})})}),(0,n.jsxs)("div",{className:"flex-1 min-w-0",children:[(0,n.jsx)("h3",{className:"font-semibold text-card-foreground text-sm truncate",children:e.name}),(0,n.jsx)("p",{className:"text-xs text-muted-foreground truncate",children:e.email}),e.jobRole&&(0,n.jsx)("div",{className:"mt-2",children:(0,n.jsx)("span",{className:`
+                    inline-block px-2 py-0.5 rounded text-xs font-medium border
+                    ${h(e.jobRole)}
+                  `,children:v[e.jobRole]})})]})]}),e.about&&(0,n.jsx)("div",{className:"mt-3 pt-3 border-t border-border",children:(0,n.jsx)("p",{className:"text-xs text-muted-foreground line-clamp-2",children:e.about})}),d&&(0,n.jsx)("button",{onClick:c=>{c.stopPropagation(),t?.()},className:"absolute -bottom-3 left-1/2 -translate-x-1/2 w-6 h-6 rounded-full bg-card border-2 border-border hover:border-primary/50 flex items-center justify-center transition-colors","aria-label":i?"Collapse":"Expand",children:(0,n.jsx)("svg",{className:`w-3 h-3 text-muted-foreground transition-transform ${i?"rotate-180":""}`,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:(0,n.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})})]}),a&&i&&(0,n.jsx)("div",{className:"w-0.5 h-8 bg-border"})]})};var p=({nodes:e,onNodeClick:r,expandable:o=!1,initiallyExpanded:i=!0})=>(0,n.jsx)("div",{className:"flex flex-col items-center gap-0",children:e.map((t,a)=>(0,n.jsx)(C,{node:t,onNodeClick:r,expandable:o,initiallyExpanded:i,isLast:a===e.length-1},t.id))}),C=({node:e,onNodeClick:r,expandable:o,initiallyExpanded:i=!0,isLast:t=!1})=>{let[a,d]=(0,N.useState)(i),c=e.children.length>0;return(0,n.jsxs)("div",{className:`flex flex-col items-center ${t?"":"mb-8"}`,children:[(0,n.jsx)(m,{node:e,onNodeClick:r,expandable:o,isExpanded:a,onToggleExpand:()=>d(!a)}),c&&a&&(0,n.jsxs)("div",{className:"flex flex-col items-center mt-0",children:[e.children.length>1&&(0,n.jsx)("div",{className:"relative w-full flex justify-center",children:(0,n.jsxs)("div",{className:"absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-[800px]",children:[(0,n.jsx)("div",{className:"absolute top-0 left-0 right-0 h-0.5 bg-border"}),(0,n.jsx)("div",{className:"flex justify-around",children:e.children.map((g,u)=>(0,n.jsx)("div",{className:"w-0.5 h-8 bg-border"},u))})]})}),(0,n.jsx)("div",{className:`
+              flex gap-8 mt-8
+              ${e.children.length===1?"flex-col items-center":"flex-row items-start justify-center flex-wrap"}
+            `,children:e.children.map((g,u)=>(0,n.jsx)(C,{node:g,onNodeClick:r,expandable:o,initiallyExpanded:i,isLast:u===e.children.length-1},g.id))})]})]})};var O=({users:e,onNodeClick:r,className:o="",expandable:i=!1,initiallyExpanded:t=!0})=>{let a=b(e);return e.length===0?(0,n.jsx)("div",{className:`flex items-center justify-center p-8 ${o}`,children:(0,n.jsx)("div",{className:"text-center",children:(0,n.jsx)("p",{className:"text-muted-foreground",children:"No users to display"})})}):a.length===0?(0,n.jsx)("div",{className:`flex items-center justify-center p-8 ${o}`,children:(0,n.jsxs)("div",{className:"text-center",children:[(0,n.jsx)("p",{className:"text-muted-foreground",children:"Unable to build organization tree"}),(0,n.jsx)("p",{className:"text-xs text-muted-foreground mt-1",children:"Check that manager relationships are properly configured"})]})}):(0,n.jsx)("div",{className:`org-chart w-full overflow-x-auto ${o}`,children:(0,n.jsx)("div",{className:"inline-block min-w-full p-8",children:(0,n.jsx)(p,{nodes:a,onNodeClick:r,expandable:i,initiallyExpanded:t})})})};0&&(module.exports={OrgChart,OrgNode,OrgTree,buildOrgTree,getInitials,getRoleBadgeColor});

package/dist/components/AdvancedComponents/org-chart-component/index.mjs

@@ -0,0 +1 @@
+import{a as f}from"../../../chunk-B7RZ4K6Y.mjs";import{a as e}from"../../../chunk-G6OGEIN4.mjs";import{a as d}from"../../../chunk-KQRQXBJ3.mjs";import"../../../chunk-SOTCQX2G.mjs";import{a,b,c}from"../../../chunk-32G45Z2G.mjs";import"../../../chunk-YEKQJ4YC.mjs";export{f as OrgChart,d as OrgNode,e as OrgTree,a as buildOrgTree,b as getInitials,c as getRoleBadgeColor};

package/dist/components/AdvancedComponents/org-chart-component/mockData.d.ts

@@ -0,0 +1,7 @@
+import { User } from './types';
+export declare const smallTeamData: User[];
+export declare const mediumTeamData: User[];
+export declare const singlePersonData: User[];
+export declare const deepHierarchyData: User[];
+export declare const wideHierarchyData: User[];
+export declare const emptyData: User[];

package/dist/components/AdvancedComponents/org-chart-component/mockData.js

@@ -0,0 +1 @@
+"use strict";var m=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var t=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var c=(e,a)=>{for(var n in a)m(e,n,{get:a[n],enumerable:!0})},s=(e,a,n,r)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of t(a))!l.call(e,o)&&o!==n&&m(e,o,{get:()=>a[o],enumerable:!(r=i(a,o))||r.enumerable});return e};var u=e=>s(m({},"__esModule",{value:!0}),e);var C={};c(C,{deepHierarchyData:()=>p,emptyData:()=>h,mediumTeamData:()=>d,singlePersonData:()=>g,smallTeamData:()=>b,wideHierarchyData:()=>y});module.exports=u(C);var b=[{id:"1",name:"Sarah Chen",email:"sarah.chen@company.com",jobRole:"P",manager:null,about:"Partner leading the consulting practice",profilePicture:void 0},{id:"2",name:"Michael Roberts",email:"michael.roberts@company.com",jobRole:"SM",manager:"1",about:"Senior Manager overseeing client delivery"},{id:"3",name:"Emily Watson",email:"emily.watson@company.com",jobRole:"M",manager:"2",about:"Manager focused on digital transformation projects"},{id:"4",name:"David Kim",email:"david.kim@company.com",jobRole:"SC1",manager:"3",about:"Senior Consultant specializing in cloud architecture"},{id:"5",name:"Lisa Anderson",email:"lisa.anderson@company.com",jobRole:"SC2",manager:"3",about:"Senior Consultant with expertise in data analytics"},{id:"6",name:"James Taylor",email:"james.taylor@company.com",jobRole:"C3",manager:"3",about:"Consultant working on enterprise solutions"}],d=[{id:"1",name:"Alexandra Martinez",email:"alexandra.martinez@company.com",jobRole:"P",manager:null,about:"Partner and Managing Director"},{id:"2",name:"Robert Chang",email:"robert.chang@company.com",jobRole:"SM",manager:"1",about:"Senior Manager - Technology Practice"},{id:"3",name:"Jennifer Williams",email:"jennifer.williams@company.com",jobRole:"SM",manager:"1",about:"Senior Manager - Strategy Practice"},{id:"4",name:"Thomas Brown",email:"thomas.brown@company.com",jobRole:"M",manager:"2",about:"Manager - Cloud Solutions"},{id:"5",name:"Maria Garcia",email:"maria.garcia@company.com",jobRole:"M",manager:"2",about:"Manager - Application Development"},{id:"6",name:"Christopher Lee",email:"christopher.lee@company.com",jobRole:"M",manager:"3",about:"Manager - Business Strategy"},{id:"7",name:"Amanda White",email:"amanda.white@company.com",jobRole:"SC2",manager:"4",about:"Senior Consultant - DevOps"},{id:"8",name:"Daniel Harris",email:"daniel.harris@company.com",jobRole:"SC1",manager:"4",about:"Senior Consultant - Infrastructure"},{id:"9",name:"Rachel Thompson",email:"rachel.thompson@company.com",jobRole:"C3",manager:"4",about:"Consultant - Cloud Migration"},{id:"10",name:"Kevin Martinez",email:"kevin.martinez@company.com",jobRole:"SC2",manager:"5",about:"Senior Consultant - Full Stack Development"},{id:"11",name:"Sophie Anderson",email:"sophie.anderson@company.com",jobRole:"C2",manager:"5",about:"Consultant - Frontend Development"},{id:"12",name:"Marcus Johnson",email:"marcus.johnson@company.com",jobRole:"C1",manager:"5",about:"Consultant - Backend Development"},{id:"13",name:"Olivia Davis",email:"olivia.davis@company.com",jobRole:"SC1",manager:"6",about:"Senior Consultant - Market Analysis"},{id:"14",name:"Nathan Wilson",email:"nathan.wilson@company.com",jobRole:"C3",manager:"6",about:"Consultant - Strategic Planning"}],g=[{id:"1",name:"Victoria Sterling",email:"victoria.sterling@company.com",jobRole:"P",manager:null,about:"Founder and CEO"}],p=[{id:"1",name:"William Thompson",email:"william.thompson@company.com",jobRole:"P",manager:null,about:"Partner"},{id:"2",name:"Elizabeth Moore",email:"elizabeth.moore@company.com",jobRole:"SM",manager:"1",about:"Senior Manager"},{id:"3",name:"Charles Jackson",email:"charles.jackson@company.com",jobRole:"M",manager:"2",about:"Manager"},{id:"4",name:"Margaret Taylor",email:"margaret.taylor@company.com",jobRole:"SC2",manager:"3",about:"Senior Consultant"},{id:"5",name:"Henry Adams",email:"henry.adams@company.com",jobRole:"C3",manager:"4",about:"Consultant"},{id:"6",name:"Catherine Wright",email:"catherine.wright@company.com",jobRole:"C1",manager:"5",about:"Junior Consultant"}],y=[{id:"1",name:"Richard Foster",email:"richard.foster@company.com",jobRole:"P",manager:null,about:"Partner"},{id:"2",name:"Anna Peterson",email:"anna.peterson@company.com",jobRole:"M",manager:"1",about:"Manager - Team A"},{id:"3",name:"Brian Collins",email:"brian.collins@company.com",jobRole:"SC2",manager:"2",about:"Senior Consultant"},{id:"4",name:"Caroline Hughes",email:"caroline.hughes@company.com",jobRole:"SC1",manager:"2",about:"Senior Consultant"},{id:"5",name:"Derek Murphy",email:"derek.murphy@company.com",jobRole:"C3",manager:"2",about:"Consultant"},{id:"6",name:"Emma Richardson",email:"emma.richardson@company.com",jobRole:"C2",manager:"2",about:"Consultant"},{id:"7",name:"Frank Cooper",email:"frank.cooper@company.com",jobRole:"C1",manager:"2",about:"Consultant"},{id:"8",name:"Grace Bennett",email:"grace.bennett@company.com",jobRole:"C1",manager:"2",about:"Consultant"}],h=[];0&&(module.exports={deepHierarchyData,emptyData,mediumTeamData,singlePersonData,smallTeamData,wideHierarchyData});

package/dist/components/AdvancedComponents/org-chart-component/mockData.mjs

@@ -0,0 +1 @@
+import"../../../chunk-YEKQJ4YC.mjs";var a=[{id:"1",name:"Sarah Chen",email:"sarah.chen@company.com",jobRole:"P",manager:null,about:"Partner leading the consulting practice",profilePicture:void 0},{id:"2",name:"Michael Roberts",email:"michael.roberts@company.com",jobRole:"SM",manager:"1",about:"Senior Manager overseeing client delivery"},{id:"3",name:"Emily Watson",email:"emily.watson@company.com",jobRole:"M",manager:"2",about:"Manager focused on digital transformation projects"},{id:"4",name:"David Kim",email:"david.kim@company.com",jobRole:"SC1",manager:"3",about:"Senior Consultant specializing in cloud architecture"},{id:"5",name:"Lisa Anderson",email:"lisa.anderson@company.com",jobRole:"SC2",manager:"3",about:"Senior Consultant with expertise in data analytics"},{id:"6",name:"James Taylor",email:"james.taylor@company.com",jobRole:"C3",manager:"3",about:"Consultant working on enterprise solutions"}],e=[{id:"1",name:"Alexandra Martinez",email:"alexandra.martinez@company.com",jobRole:"P",manager:null,about:"Partner and Managing Director"},{id:"2",name:"Robert Chang",email:"robert.chang@company.com",jobRole:"SM",manager:"1",about:"Senior Manager - Technology Practice"},{id:"3",name:"Jennifer Williams",email:"jennifer.williams@company.com",jobRole:"SM",manager:"1",about:"Senior Manager - Strategy Practice"},{id:"4",name:"Thomas Brown",email:"thomas.brown@company.com",jobRole:"M",manager:"2",about:"Manager - Cloud Solutions"},{id:"5",name:"Maria Garcia",email:"maria.garcia@company.com",jobRole:"M",manager:"2",about:"Manager - Application Development"},{id:"6",name:"Christopher Lee",email:"christopher.lee@company.com",jobRole:"M",manager:"3",about:"Manager - Business Strategy"},{id:"7",name:"Amanda White",email:"amanda.white@company.com",jobRole:"SC2",manager:"4",about:"Senior Consultant - DevOps"},{id:"8",name:"Daniel Harris",email:"daniel.harris@company.com",jobRole:"SC1",manager:"4",about:"Senior Consultant - Infrastructure"},{id:"9",name:"Rachel Thompson",email:"rachel.thompson@company.com",jobRole:"C3",manager:"4",about:"Consultant - Cloud Migration"},{id:"10",name:"Kevin Martinez",email:"kevin.martinez@company.com",jobRole:"SC2",manager:"5",about:"Senior Consultant - Full Stack Development"},{id:"11",name:"Sophie Anderson",email:"sophie.anderson@company.com",jobRole:"C2",manager:"5",about:"Consultant - Frontend Development"},{id:"12",name:"Marcus Johnson",email:"marcus.johnson@company.com",jobRole:"C1",manager:"5",about:"Consultant - Backend Development"},{id:"13",name:"Olivia Davis",email:"olivia.davis@company.com",jobRole:"SC1",manager:"6",about:"Senior Consultant - Market Analysis"},{id:"14",name:"Nathan Wilson",email:"nathan.wilson@company.com",jobRole:"C3",manager:"6",about:"Consultant - Strategic Planning"}],o=[{id:"1",name:"Victoria Sterling",email:"victoria.sterling@company.com",jobRole:"P",manager:null,about:"Founder and CEO"}],n=[{id:"1",name:"William Thompson",email:"william.thompson@company.com",jobRole:"P",manager:null,about:"Partner"},{id:"2",name:"Elizabeth Moore",email:"elizabeth.moore@company.com",jobRole:"SM",manager:"1",about:"Senior Manager"},{id:"3",name:"Charles Jackson",email:"charles.jackson@company.com",jobRole:"M",manager:"2",about:"Manager"},{id:"4",name:"Margaret Taylor",email:"margaret.taylor@company.com",jobRole:"SC2",manager:"3",about:"Senior Consultant"},{id:"5",name:"Henry Adams",email:"henry.adams@company.com",jobRole:"C3",manager:"4",about:"Consultant"},{id:"6",name:"Catherine Wright",email:"catherine.wright@company.com",jobRole:"C1",manager:"5",about:"Junior Consultant"}],m=[{id:"1",name:"Richard Foster",email:"richard.foster@company.com",jobRole:"P",manager:null,about:"Partner"},{id:"2",name:"Anna Peterson",email:"anna.peterson@company.com",jobRole:"M",manager:"1",about:"Manager - Team A"},{id:"3",name:"Brian Collins",email:"brian.collins@company.com",jobRole:"SC2",manager:"2",about:"Senior Consultant"},{id:"4",name:"Caroline Hughes",email:"caroline.hughes@company.com",jobRole:"SC1",manager:"2",about:"Senior Consultant"},{id:"5",name:"Derek Murphy",email:"derek.murphy@company.com",jobRole:"C3",manager:"2",about:"Consultant"},{id:"6",name:"Emma Richardson",email:"emma.richardson@company.com",jobRole:"C2",manager:"2",about:"Consultant"},{id:"7",name:"Frank Cooper",email:"frank.cooper@company.com",jobRole:"C1",manager:"2",about:"Consultant"},{id:"8",name:"Grace Bennett",email:"grace.bennett@company.com",jobRole:"C1",manager:"2",about:"Consultant"}],r=[];export{n as deepHierarchyData,r as emptyData,e as mediumTeamData,o as singlePersonData,a as smallTeamData,m as wideHierarchyData};

package/dist/components/AdvancedComponents/org-chart-component/types/index.d.ts

@@ -0,0 +1,33 @@
+export type JobRole = 'C1' | 'C2' | 'C3' | 'SC1' | 'SC2' | 'M' | 'SM' | 'P';
+export interface ProfilePicture {
+    url: string;
+    alt?: string;
+}
+export interface User {
+    id: string;
+    name: string;
+    email: string;
+    jobRole?: JobRole;
+    manager?: User | string | null;
+    about?: string;
+    profilePicture?: ProfilePicture;
+}
+export interface OrgChartNode extends User {
+    children: OrgChartNode[];
+    level: number;
+}
+export interface OrgChartProps {
+    users: User[];
+    onNodeClick?: (user: User) => void;
+    className?: string;
+    expandable?: boolean;
+    initiallyExpanded?: boolean;
+}
+export interface OrgNodeProps {
+    node: OrgChartNode;
+    onNodeClick?: (user: User) => void;
+    expandable?: boolean;
+    isExpanded?: boolean;
+    onToggleExpand?: () => void;
+}
+export declare const jobRoleLabels: Record<JobRole, string>;

package/dist/components/AdvancedComponents/org-chart-component/types/index.js

@@ -0,0 +1 @@
+"use strict";var t=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var d=(r,e)=>{for(var n in e)t(r,n,{get:e[n],enumerable:!0})},C=(r,e,n,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of l(e))!s.call(r,o)&&o!==n&&t(r,o,{get:()=>e[o],enumerable:!(a=i(e,o))||a.enumerable});return r};var g=r=>C(t({},"__esModule",{value:!0}),r);var u={};d(u,{jobRoleLabels:()=>p});module.exports=g(u);var p={C1:"Consultant 1",C2:"Consultant 2",C3:"Consultant 3",SC1:"Senior Consultant 1",SC2:"Senior Consultant 2",M:"Manager",SM:"Senior Manager",P:"Partner"};0&&(module.exports={jobRoleLabels});

package/dist/components/AdvancedComponents/org-chart-component/types/index.mjs

@@ -0,0 +1 @@
+import{a}from"../../../../chunk-SOTCQX2G.mjs";import"../../../../chunk-YEKQJ4YC.mjs";export{a as jobRoleLabels};

package/dist/components/AdvancedComponents/org-chart-component/utils.d.ts

@@ -0,0 +1,13 @@
+import { User, OrgChartNode } from './types';
+/**
+ * Build a hierarchical tree structure from flat user list
+ */
+export declare function buildOrgTree(users: User[]): OrgChartNode[];
+/**
+ * Get initials from name for avatar fallback
+ */
+export declare function getInitials(name: string): string;
+/**
+ * Get color class based on job role level
+ */
+export declare function getRoleBadgeColor(jobRole?: string): string;