feat: projects pages revamp

web/apps/client-demo/src/Router.tsx

@@ -14,6 +14,8 @@ import Profile from './pages/settings/Profile';
 import Sessions from './pages/settings/Sessions';
 import Members from './pages/settings/Members';
 import Security from './pages/settings/Security';
+import Projects from './pages/settings/Projects';
+import ProjectDetails from './pages/settings/ProjectDetails';
 
 function Router() {
   return (
@@ -34,6 +36,8 @@ function Router() {
           <Route path="sessions" element={<Sessions />} />
           <Route path="members" element={<Members />} />
           <Route path="security" element={<Security />} />
+          <Route path="projects" element={<Projects />} />
+          <Route path="projects/:projectId" element={<ProjectDetails />} />
         </Route>
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>

web/apps/client-demo/src/pages/Settings.tsx

@@ -9,7 +9,8 @@ const NAV_ITEMS = [
   { label: 'Profile', path: 'profile' },
   { label: 'Sessions', path: 'sessions' },
   { label: 'Members', path: 'members' },
-  { label: 'Security', path: 'security' }
+  { label: 'Security', path: 'security' },
+  { label: 'Projects', path: 'projects' }
 ];
 
 export default function Settings() {

web/apps/client-demo/src/pages/settings/ProjectDetails.tsx

@@ -0,0 +1,17 @@
+import { useParams, useNavigate } from 'react-router-dom';
+import { ProjectDetailsView } from '@raystack/frontier/react';
+
+export default function ProjectDetails() {
+  const { orgId, projectId } = useParams<{ orgId: string; projectId: string }>();
+  const navigate = useNavigate();
+
+  if (!projectId) return null;
+
+  return (
+    <ProjectDetailsView
+      projectId={projectId}
+      onNavigateToProjects={() => navigate(`/${orgId}/settings/projects`)}
+      onDeleteSuccess={() => navigate(`/${orgId}/settings/projects`)}
+    />
+  );
+}

web/apps/client-demo/src/pages/settings/Projects.tsx

@@ -0,0 +1,13 @@
+import { useParams, useNavigate } from 'react-router-dom';
+import { ProjectsView } from '@raystack/frontier/react';
+
+export default function Projects() {
+  const { orgId } = useParams<{ orgId: string }>();
+  const navigate = useNavigate();
+
+  return (
+    <ProjectsView
+      onProjectClick={(projectId) => navigate(`/${orgId}/settings/projects/${projectId}`)}
+    />
+  );
+}

web/sdk/react/components/view-header/view-header.tsx

@@ -1,12 +1,32 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { Flex, Headline, Text } from '@raystack/apsara-v1';
 
 export interface ViewHeaderProps extends ComponentProps<typeof Flex> {
   title: string;
   description?: string;
+  /**
+   * When provided, renders a breadcrumb row above the title.
+   * `children` are placed alongside the breadcrumb (e.g. action buttons).
+   * Without breadcrumb, `children` render alongside the title (default layout).
+   */
+  breadcrumb?: ReactNode;
 }
 
-export function ViewHeader({ title, description, children, ...props }: ViewHeaderProps) {
+export function ViewHeader({ title, description, breadcrumb, children, ...props }: ViewHeaderProps) {
+  if (breadcrumb) {
+    return (
+      <Flex direction="column" gap={7} {...props}>
+        <Flex direction="row" align="center" gap={5}>
+          {breadcrumb}
+          {children}
+        </Flex>
+        <Headline size="t1" weight="medium">
+          {title}
+        </Headline>
+      </Flex>
+    );
+  }
+
   return (
     <Flex direction="row" justify="between" align="center" {...props}>
       <Flex direction="column" gap={3}>

web/sdk/react/index.ts

@@ -36,6 +36,7 @@ export { ProfileView } from './views-new/profile';
 export { SessionsView } from './views-new/sessions';
 export { MembersView } from './views-new/members';
 export { SecurityView } from './views-new/security';
+export { ProjectsView, ProjectDetailsView } from './views-new/projects';
 
 export type {
   FrontierClientOptions,

web/sdk/react/views-new/preferences/preferences-view.tsx

@@ -79,7 +79,7 @@ export function PreferencesView({ children }: PreferencesViewProps) {
           </Select>
         </PreferenceRow>
         {children}
-      </Flex >
-    </ViewContainer >
+      </Flex>
+    </ViewContainer>
   );
 }

web/sdk/react/views-new/projects/components/add-member-menu.tsx

@@ -0,0 +1,251 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { CardStackPlusIcon, PlusIcon } from '@radix-ui/react-icons';
+import {
+  Avatar,
+  Button,
+  Flex,
+  Menu,
+  Separator,
+  Skeleton,
+  Tooltip
+} from '@raystack/apsara-v1';
+import { toastManager } from '@raystack/apsara-v1';
+import { useQuery, useMutation } from '@connectrpc/connect-query';
+import {
+  FrontierServiceQueries,
+  ListOrganizationUsersRequestSchema,
+  CreatePolicyForProjectRequestSchema,
+  type User
+} from '@raystack/proton/frontier';
+import { create } from '@bufbuild/protobuf';
+import { useFrontier } from '../../../contexts/FrontierContext';
+import { useOrganizationTeams } from '../../../hooks/useOrganizationTeams';
+import { AuthTooltipMessage } from '../../../utils';
+import {
+  PERMISSIONS,
+  filterUsersfromUsers,
+  getInitials
+} from '../../../../utils';
+import styles from '../project-details-view.module.css';
+
+interface AddMemberMenuProps {
+  projectId: string;
+  canUpdateProject: boolean;
+  members: User[];
+  refetch: () => void;
+}
+
+export function AddMemberMenu({
+  projectId,
+  canUpdateProject,
+  members,
+  refetch
+}: AddMemberMenuProps) {
+  const [showTeam, setShowTeam] = useState(false);
+
+  const { activeOrganization: organization } = useFrontier();
+  const { isFetching: isTeamsLoading, teams } = useOrganizationTeams({});
+
+  const {
+    data: orgUsersData,
+    isLoading: isOrgUsersLoading,
+    error: orgUsersError
+  } = useQuery(
+    FrontierServiceQueries.listOrganizationUsers,
+    create(ListOrganizationUsersRequestSchema, {
+      id: organization?.id || ''
+    }),
+    { enabled: !!organization?.id && canUpdateProject }
+  );
+
+  const orgUsers = useMemo(
+    () => orgUsersData?.users ?? [],
+    [orgUsersData]
+  );
+
+  useEffect(() => {
+    if (orgUsersError) {
+      toastManager.add({
+        title: 'Something went wrong',
+        description: orgUsersError.message,
+        type: 'error'
+      });
+    }
+  }, [orgUsersError]);
+
+  const invitableUsers = useMemo(
+    () => filterUsersfromUsers(orgUsers, members),
+    [orgUsers, members]
+  );
+
+  const { mutate: createPolicyForProject } = useMutation(
+    FrontierServiceQueries.createPolicyForProject,
+    {
+      onSuccess: () => {
+        toastManager.add({
+          title: 'Member added',
+          type: 'success'
+        });
+        refetch();
+      },
+      onError: (err: Error) => {
+        toastManager.add({
+          title: 'Something went wrong',
+          description: err.message,
+          type: 'error'
+        });
+      }
+    }
+  );
+
+  const addMember = useCallback(
+    (userId: string) => {
+      if (!userId || !organization?.id || !projectId) return;
+      const principal = `${PERMISSIONS.UserNamespace}:${userId}`;
+      createPolicyForProject(
+        create(CreatePolicyForProjectRequestSchema, {
+          projectId,
+          body: { roleId: PERMISSIONS.RoleProjectViewer, principal }
+        })
+      );
+    },
+    [createPolicyForProject, organization?.id, projectId]
+  );
+
+  const addTeam = useCallback(
+    (teamId: string) => {
+      if (!teamId || !organization?.id || !projectId) return;
+      const principal = `${PERMISSIONS.GroupNamespace}:${teamId}`;
+      createPolicyForProject(
+        create(CreatePolicyForProjectRequestSchema, {
+          projectId,
+          body: { roleId: PERMISSIONS.RoleProjectViewer, principal }
+        })
+      );
+    },
+    [createPolicyForProject, organization?.id, projectId]
+  );
+
+  const toggleShowTeam = useCallback(() => {
+    setShowTeam(prev => !prev);
+  }, []);
+
+  const isLoading = showTeam ? isTeamsLoading : isOrgUsersLoading;
+
+  if (!canUpdateProject) {
+    return (
+      <Tooltip>
+        <Tooltip.Trigger render={<span />}>
+          <Button
+            variant="solid"
+            color="accent"
+            disabled
+            data-test-id="frontier-sdk-add-project-member-btn"
+          >
+            Add a member
+          </Button>
+        </Tooltip.Trigger>
+        <Tooltip.Content>{AuthTooltipMessage}</Tooltip.Content>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Menu autocomplete>
+      <Menu.Trigger
+        render={
+          <Button
+            variant="solid"
+            color="accent"
+            data-test-id="frontier-sdk-add-project-member-btn"
+          />
+        }
+      >
+        Add a member
+      </Menu.Trigger>
+      <Menu.Content
+        align="end"
+        className={styles.addMemberContent}
+        searchPlaceholder={showTeam ? 'Search teams...' : 'Search...'}
+      >
+        <div className={styles.addMemberMenuList}>
+          {isLoading
+            ? <Flex gap={1} direction="column">
+              {
+                Array.from({ length: 6 }, (_, i) => (
+                  <Skeleton key={i} height="30px" width="100%" />
+                ))
+              }
+            </Flex>
+            : showTeam
+              ? teams.map(team => (
+                <Menu.Item
+                  key={team.id}
+                  value={team.title || team.name || ''}
+                  className={styles.addMemberMenuItem}
+                  leadingIcon={
+                    <Avatar
+                      fallback={getInitials(team.title || team.name || '')}
+                      size={1}
+                    />
+                  }
+                  onClick={() => addTeam(team.id || '')}
+                  data-test-id={`frontier-sdk-add-team-to-project-item-${team.id}`}
+                >
+                  <span className={styles.addMemberMenuItemText}>{team.title || team.name}</span>
+                </Menu.Item>
+              ))
+              : invitableUsers.map(user => (
+                <Menu.Item
+                  key={user.id}
+                  value={user.title || user.email || ''}
+                  className={styles.addMemberMenuItem}
+                  leadingIcon={
+                    <Avatar
+                      src={user.avatar}
+                      fallback={getInitials(
+                        user.title || user.email || ''
+                      )}
+                      size={1}
+                    />
+                  }
+                  onClick={() => addMember(user.id || '')}
+                  data-test-id={`frontier-sdk-add-user-to-project-item-${user.id}`}
+                >
+                  <span className={styles.addMemberMenuItemText}>{user.title || user.email}</span>
+                </Menu.Item>
+              ))}
+
+          {!isLoading &&
+            (showTeam ? !teams.length : !invitableUsers.length) && (
+              <Menu.EmptyState className={styles.addMemberEmptyState}>
+                {showTeam ? 'No teams found' : 'No users found'}
+              </Menu.EmptyState>
+            )}
+        </div>
+        <Flex direction="column" align="center" className={styles.addMemberFooter}>
+          <Separator className={styles.addMemberSeparator} />
+          <Button
+            width="100%"
+            variant="text"
+            color="neutral"
+            className={styles.addMemberToggleBtn}
+            leadingIcon={
+              showTeam ? (
+                <PlusIcon />
+              ) : (
+                <CardStackPlusIcon />
+              )
+            }
+            onClick={toggleShowTeam}
+            data-test-id="frontier-sdk-add-project-member-toggle"
+          >
+            {showTeam ? 'Add project member' : 'Add team to project'}
+          </Button>
+        </Flex>
+      </Menu.Content>
+    </Menu>
+  );
+}