From 138dc7084d9d30bc4a35e2ed94aed90e4c82dccc Mon Sep 17 00:00:00 2001
From: Andrej <aacevski@gmail.com>
Date: Tue, 11 Feb 2025 20:57:02 +0100
Subject: [PATCH] feat: adding pending invited users screen

---
 .../get-pending-workspace-users.ts            |  29 +++++
 apps/api/src/workspace-user/index.ts          |   9 +-
 .../team/invite-team-member-modal.tsx         |  43 +------
 .../get-pending-workspace-users.ts            |  17 +++
 .../use-get-pending-workspace-users.ts        |  11 ++
 apps/web/src/routeTree.gen.ts                 | 113 +++++++++++++++++-
 .../dashboard/workspace/$workspaceId/team.tsx | 104 ++++++++--------
 .../$workspaceId/team/invitations.tsx         | 107 +++++++++++++++++
 .../workspace/$workspaceId/team/members.tsx   |  27 +++++
 .../workspace/$workspaceId/team/roles.tsx     |  11 ++
 biome.json                                    |   3 +-
 11 files changed, 377 insertions(+), 97 deletions(-)
 create mode 100644 apps/api/src/workspace-user/controllers/get-pending-workspace-users.ts
 create mode 100644 apps/web/src/fetchers/workspace-user/get-pending-workspace-users.ts
 create mode 100644 apps/web/src/hooks/queries/workspace-users/use-get-pending-workspace-users.ts
 create mode 100644 apps/web/src/routes/dashboard/workspace/$workspaceId/team/invitations.tsx
 create mode 100644 apps/web/src/routes/dashboard/workspace/$workspaceId/team/members.tsx
 create mode 100644 apps/web/src/routes/dashboard/workspace/$workspaceId/team/roles.tsx

diff --git a/apps/api/src/workspace-user/controllers/get-pending-workspace-users.ts b/apps/api/src/workspace-user/controllers/get-pending-workspace-users.ts
new file mode 100644
index 0000000..7ec4e04
--- /dev/null
+++ b/apps/api/src/workspace-user/controllers/get-pending-workspace-users.ts
@@ -0,0 +1,29 @@
+import { and, eq, isNull } from "drizzle-orm";
+import db from "../../database";
+import { userTable, workspaceUserTable } from "../../database/schema";
+
+async function getPendingWorkspaceUsers({
+  workspaceId,
+}: {
+  workspaceId: string;
+}) {
+  const pendingInvites = await db
+    .select({
+      id: workspaceUserTable.id,
+      email: workspaceUserTable.userEmail,
+      role: workspaceUserTable.role,
+      invitedAt: workspaceUserTable.joinedAt,
+    })
+    .from(workspaceUserTable)
+    .leftJoin(userTable, eq(workspaceUserTable.userEmail, userTable.email))
+    .where(
+      and(
+        eq(workspaceUserTable.workspaceId, workspaceId),
+        isNull(userTable.email),
+      ),
+    );
+
+  return pendingInvites;
+}
+
+export default getPendingWorkspaceUsers;
diff --git a/apps/api/src/workspace-user/index.ts b/apps/api/src/workspace-user/index.ts
index 5fedb6e..3fe7623 100644
--- a/apps/api/src/workspace-user/index.ts
+++ b/apps/api/src/workspace-user/index.ts
@@ -1,14 +1,21 @@
 import Elysia, { t } from "elysia";
+import getPendingWorkspaceUsers from "./controllers/get-pending-workspace-users";
 import getWorkspaceUsers from "./controllers/get-workspace-users";
 import inviteWorkspaceUser from "./controllers/invite-workspace-user";
 
 const workspaceUser = new Elysia({ prefix: "/workspace-user" })
   .get("/list/:workspaceId", async ({ params: { workspaceId } }) => {
     const workspaceUsersInWorkspace = await getWorkspaceUsers({ workspaceId });
-    console.log({ workspaceUsersInWorkspace });
 
     return workspaceUsersInWorkspace;
   })
+  .get("/pending/list/:workspaceId", async ({ params: { workspaceId } }) => {
+    const pendingWorkspaceUsersInWorkspace = await getPendingWorkspaceUsers({
+      workspaceId,
+    });
+
+    return pendingWorkspaceUsersInWorkspace;
+  })
   .post(
     "/:workspaceId/invite",
     async ({ body }) => {
diff --git a/apps/web/src/components/team/invite-team-member-modal.tsx b/apps/web/src/components/team/invite-team-member-modal.tsx
index f7f0479..a29d6ce 100644
--- a/apps/web/src/components/team/invite-team-member-modal.tsx
+++ b/apps/web/src/components/team/invite-team-member-modal.tsx
@@ -1,8 +1,8 @@
 import useInviteWorkspaceUser from "@/hooks/mutations/workspace-user/use-invite-workspace-user";
-import useGetWorkspaces from "@/hooks/queries/workspace/use-get-workspaces";
+import { Route } from "@/routes/dashboard/workspace/$workspaceId/team";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as Dialog from "@radix-ui/react-dialog";
-import { Building2, X } from "lucide-react";
+import { X } from "lucide-react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { Button } from "../ui/button";
@@ -15,7 +15,6 @@ import {
   FormMessage,
 } from "../ui/form";
 import { Input } from "../ui/input";
-import { Select } from "../ui/select";
 
 type Props = {
   open: boolean;
@@ -24,24 +23,22 @@ type Props = {
 
 const teamMemberSchema = z.object({
   userEmail: z.string().email(),
-  workspaceId: z.string(),
 });
 
 type TeamMemberFormValues = z.infer<typeof teamMemberSchema>;
 
 function InviteTeamMemberModal({ open, onClose }: Props) {
-  const { data: workspaces } = useGetWorkspaces();
   const { mutateAsync } = useInviteWorkspaceUser();
+  const { workspaceId } = Route.useParams();
 
   const form = useForm<TeamMemberFormValues>({
     resolver: zodResolver(teamMemberSchema),
     defaultValues: {
       userEmail: "",
-      workspaceId: "",
     },
   });
 
-  const onSubmit = async ({ userEmail, workspaceId }: TeamMemberFormValues) => {
+  const onSubmit = async ({ userEmail }: TeamMemberFormValues) => {
     await mutateAsync({ userEmail, workspaceId });
 
     form.reset();
@@ -87,38 +84,6 @@ function InviteTeamMemberModal({ open, onClose }: Props) {
                       )}
                     />
                   </div>
-
-                  <FormField
-                    control={form.control}
-                    name="workspaceId"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel className="block text-sm font-medium text-zinc-900 dark:text-zinc-300 mb-1">
-                          Workspace
-                        </FormLabel>
-                        <FormControl>
-                          <Select
-                            {...field}
-                            options={[
-                              {
-                                value: "",
-                                label: "Select a workspace",
-                                icon: (
-                                  <Building2 className="w-4 h-4 text-zinc-400" />
-                                ),
-                              },
-                              ...(workspaces ?? []).map((workspace) => ({
-                                value: workspace.id,
-                                label: workspace.name,
-                              })),
-                            ]}
-                            placeholder="Select workspace"
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
                 </div>
 
                 <div className="flex justify-end gap-2 mt-6">
diff --git a/apps/web/src/fetchers/workspace-user/get-pending-workspace-users.ts b/apps/web/src/fetchers/workspace-user/get-pending-workspace-users.ts
new file mode 100644
index 0000000..7ff10df
--- /dev/null
+++ b/apps/web/src/fetchers/workspace-user/get-pending-workspace-users.ts
@@ -0,0 +1,17 @@
+import { api } from "@kaneo/libs";
+
+async function getPendingWorkspaceUsers({
+  workspaceId,
+}: { workspaceId: string }) {
+  const response = await api["workspace-user"].pending
+    .list({ workspaceId })
+    .get();
+
+  if (response.error) {
+    throw new Error(response.error.value.message);
+  }
+
+  return response.data;
+}
+
+export default getPendingWorkspaceUsers;
diff --git a/apps/web/src/hooks/queries/workspace-users/use-get-pending-workspace-users.ts b/apps/web/src/hooks/queries/workspace-users/use-get-pending-workspace-users.ts
new file mode 100644
index 0000000..5bd14d4
--- /dev/null
+++ b/apps/web/src/hooks/queries/workspace-users/use-get-pending-workspace-users.ts
@@ -0,0 +1,11 @@
+import getPendingWorkspaceUsers from "@/fetchers/workspace-user/get-pending-workspace-users";
+import { useQuery } from "@tanstack/react-query";
+
+function useGetPendingWorkspaceUsers({ workspaceId }: { workspaceId: string }) {
+  return useQuery({
+    queryKey: ["pending-workspace-users", workspaceId],
+    queryFn: () => getPendingWorkspaceUsers({ workspaceId }),
+  });
+}
+
+export default useGetPendingWorkspaceUsers;
diff --git a/apps/web/src/routeTree.gen.ts b/apps/web/src/routeTree.gen.ts
index 09bb0d1..ead2fdf 100644
--- a/apps/web/src/routeTree.gen.ts
+++ b/apps/web/src/routeTree.gen.ts
@@ -17,6 +17,9 @@ import { Route as AuthSignUpImport } from './routes/auth/sign-up'
 import { Route as AuthSignInImport } from './routes/auth/sign-in'
 import { Route as DashboardWorkspaceWorkspaceIdImport } from './routes/dashboard/workspace/$workspaceId'
 import { Route as DashboardWorkspaceWorkspaceIdTeamImport } from './routes/dashboard/workspace/$workspaceId/team'
+import { Route as DashboardWorkspaceWorkspaceIdTeamRolesImport } from './routes/dashboard/workspace/$workspaceId/team/roles'
+import { Route as DashboardWorkspaceWorkspaceIdTeamMembersImport } from './routes/dashboard/workspace/$workspaceId/team/members'
+import { Route as DashboardWorkspaceWorkspaceIdTeamInvitationsImport } from './routes/dashboard/workspace/$workspaceId/team/invitations'
 import { Route as DashboardWorkspaceWorkspaceIdProjectProjectIdImport } from './routes/dashboard/workspace/$workspaceId/project/$projectId'
 
 // Create/Update Routes
@@ -59,6 +62,27 @@ const DashboardWorkspaceWorkspaceIdTeamRoute =
     getParentRoute: () => DashboardWorkspaceWorkspaceIdRoute,
   } as any)
 
+const DashboardWorkspaceWorkspaceIdTeamRolesRoute =
+  DashboardWorkspaceWorkspaceIdTeamRolesImport.update({
+    id: '/roles',
+    path: '/roles',
+    getParentRoute: () => DashboardWorkspaceWorkspaceIdTeamRoute,
+  } as any)
+
+const DashboardWorkspaceWorkspaceIdTeamMembersRoute =
+  DashboardWorkspaceWorkspaceIdTeamMembersImport.update({
+    id: '/members',
+    path: '/members',
+    getParentRoute: () => DashboardWorkspaceWorkspaceIdTeamRoute,
+  } as any)
+
+const DashboardWorkspaceWorkspaceIdTeamInvitationsRoute =
+  DashboardWorkspaceWorkspaceIdTeamInvitationsImport.update({
+    id: '/invitations',
+    path: '/invitations',
+    getParentRoute: () => DashboardWorkspaceWorkspaceIdTeamRoute,
+  } as any)
+
 const DashboardWorkspaceWorkspaceIdProjectProjectIdRoute =
   DashboardWorkspaceWorkspaceIdProjectProjectIdImport.update({
     id: '/project/$projectId',
@@ -119,20 +143,62 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DashboardWorkspaceWorkspaceIdProjectProjectIdImport
       parentRoute: typeof DashboardWorkspaceWorkspaceIdImport
     }
+    '/dashboard/workspace/$workspaceId/team/invitations': {
+      id: '/dashboard/workspace/$workspaceId/team/invitations'
+      path: '/invitations'
+      fullPath: '/dashboard/workspace/$workspaceId/team/invitations'
+      preLoaderRoute: typeof DashboardWorkspaceWorkspaceIdTeamInvitationsImport
+      parentRoute: typeof DashboardWorkspaceWorkspaceIdTeamImport
+    }
+    '/dashboard/workspace/$workspaceId/team/members': {
+      id: '/dashboard/workspace/$workspaceId/team/members'
+      path: '/members'
+      fullPath: '/dashboard/workspace/$workspaceId/team/members'
+      preLoaderRoute: typeof DashboardWorkspaceWorkspaceIdTeamMembersImport
+      parentRoute: typeof DashboardWorkspaceWorkspaceIdTeamImport
+    }
+    '/dashboard/workspace/$workspaceId/team/roles': {
+      id: '/dashboard/workspace/$workspaceId/team/roles'
+      path: '/roles'
+      fullPath: '/dashboard/workspace/$workspaceId/team/roles'
+      preLoaderRoute: typeof DashboardWorkspaceWorkspaceIdTeamRolesImport
+      parentRoute: typeof DashboardWorkspaceWorkspaceIdTeamImport
+    }
   }
 }
 
 // Create and export the route tree
 
+interface DashboardWorkspaceWorkspaceIdTeamRouteChildren {
+  DashboardWorkspaceWorkspaceIdTeamInvitationsRoute: typeof DashboardWorkspaceWorkspaceIdTeamInvitationsRoute
+  DashboardWorkspaceWorkspaceIdTeamMembersRoute: typeof DashboardWorkspaceWorkspaceIdTeamMembersRoute
+  DashboardWorkspaceWorkspaceIdTeamRolesRoute: typeof DashboardWorkspaceWorkspaceIdTeamRolesRoute
+}
+
+const DashboardWorkspaceWorkspaceIdTeamRouteChildren: DashboardWorkspaceWorkspaceIdTeamRouteChildren =
+  {
+    DashboardWorkspaceWorkspaceIdTeamInvitationsRoute:
+      DashboardWorkspaceWorkspaceIdTeamInvitationsRoute,
+    DashboardWorkspaceWorkspaceIdTeamMembersRoute:
+      DashboardWorkspaceWorkspaceIdTeamMembersRoute,
+    DashboardWorkspaceWorkspaceIdTeamRolesRoute:
+      DashboardWorkspaceWorkspaceIdTeamRolesRoute,
+  }
+
+const DashboardWorkspaceWorkspaceIdTeamRouteWithChildren =
+  DashboardWorkspaceWorkspaceIdTeamRoute._addFileChildren(
+    DashboardWorkspaceWorkspaceIdTeamRouteChildren,
+  )
+
 interface DashboardWorkspaceWorkspaceIdRouteChildren {
-  DashboardWorkspaceWorkspaceIdTeamRoute: typeof DashboardWorkspaceWorkspaceIdTeamRoute
+  DashboardWorkspaceWorkspaceIdTeamRoute: typeof DashboardWorkspaceWorkspaceIdTeamRouteWithChildren
   DashboardWorkspaceWorkspaceIdProjectProjectIdRoute: typeof DashboardWorkspaceWorkspaceIdProjectProjectIdRoute
 }
 
 const DashboardWorkspaceWorkspaceIdRouteChildren: DashboardWorkspaceWorkspaceIdRouteChildren =
   {
     DashboardWorkspaceWorkspaceIdTeamRoute:
-      DashboardWorkspaceWorkspaceIdTeamRoute,
+      DashboardWorkspaceWorkspaceIdTeamRouteWithChildren,
     DashboardWorkspaceWorkspaceIdProjectProjectIdRoute:
       DashboardWorkspaceWorkspaceIdProjectProjectIdRoute,
   }
@@ -161,8 +227,11 @@ export interface FileRoutesByFullPath {
   '/auth/sign-in': typeof AuthSignInRoute
   '/auth/sign-up': typeof AuthSignUpRoute
   '/dashboard/workspace/$workspaceId': typeof DashboardWorkspaceWorkspaceIdRouteWithChildren
-  '/dashboard/workspace/$workspaceId/team': typeof DashboardWorkspaceWorkspaceIdTeamRoute
+  '/dashboard/workspace/$workspaceId/team': typeof DashboardWorkspaceWorkspaceIdTeamRouteWithChildren
   '/dashboard/workspace/$workspaceId/project/$projectId': typeof DashboardWorkspaceWorkspaceIdProjectProjectIdRoute
+  '/dashboard/workspace/$workspaceId/team/invitations': typeof DashboardWorkspaceWorkspaceIdTeamInvitationsRoute
+  '/dashboard/workspace/$workspaceId/team/members': typeof DashboardWorkspaceWorkspaceIdTeamMembersRoute
+  '/dashboard/workspace/$workspaceId/team/roles': typeof DashboardWorkspaceWorkspaceIdTeamRolesRoute
 }
 
 export interface FileRoutesByTo {
@@ -171,8 +240,11 @@ export interface FileRoutesByTo {
   '/auth/sign-in': typeof AuthSignInRoute
   '/auth/sign-up': typeof AuthSignUpRoute
   '/dashboard/workspace/$workspaceId': typeof DashboardWorkspaceWorkspaceIdRouteWithChildren
-  '/dashboard/workspace/$workspaceId/team': typeof DashboardWorkspaceWorkspaceIdTeamRoute
+  '/dashboard/workspace/$workspaceId/team': typeof DashboardWorkspaceWorkspaceIdTeamRouteWithChildren
   '/dashboard/workspace/$workspaceId/project/$projectId': typeof DashboardWorkspaceWorkspaceIdProjectProjectIdRoute
+  '/dashboard/workspace/$workspaceId/team/invitations': typeof DashboardWorkspaceWorkspaceIdTeamInvitationsRoute
+  '/dashboard/workspace/$workspaceId/team/members': typeof DashboardWorkspaceWorkspaceIdTeamMembersRoute
+  '/dashboard/workspace/$workspaceId/team/roles': typeof DashboardWorkspaceWorkspaceIdTeamRolesRoute
 }
 
 export interface FileRoutesById {
@@ -182,8 +254,11 @@ export interface FileRoutesById {
   '/auth/sign-in': typeof AuthSignInRoute
   '/auth/sign-up': typeof AuthSignUpRoute
   '/dashboard/workspace/$workspaceId': typeof DashboardWorkspaceWorkspaceIdRouteWithChildren
-  '/dashboard/workspace/$workspaceId/team': typeof DashboardWorkspaceWorkspaceIdTeamRoute
+  '/dashboard/workspace/$workspaceId/team': typeof DashboardWorkspaceWorkspaceIdTeamRouteWithChildren
   '/dashboard/workspace/$workspaceId/project/$projectId': typeof DashboardWorkspaceWorkspaceIdProjectProjectIdRoute
+  '/dashboard/workspace/$workspaceId/team/invitations': typeof DashboardWorkspaceWorkspaceIdTeamInvitationsRoute
+  '/dashboard/workspace/$workspaceId/team/members': typeof DashboardWorkspaceWorkspaceIdTeamMembersRoute
+  '/dashboard/workspace/$workspaceId/team/roles': typeof DashboardWorkspaceWorkspaceIdTeamRolesRoute
 }
 
 export interface FileRouteTypes {
@@ -196,6 +271,9 @@ export interface FileRouteTypes {
     | '/dashboard/workspace/$workspaceId'
     | '/dashboard/workspace/$workspaceId/team'
     | '/dashboard/workspace/$workspaceId/project/$projectId'
+    | '/dashboard/workspace/$workspaceId/team/invitations'
+    | '/dashboard/workspace/$workspaceId/team/members'
+    | '/dashboard/workspace/$workspaceId/team/roles'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -205,6 +283,9 @@ export interface FileRouteTypes {
     | '/dashboard/workspace/$workspaceId'
     | '/dashboard/workspace/$workspaceId/team'
     | '/dashboard/workspace/$workspaceId/project/$projectId'
+    | '/dashboard/workspace/$workspaceId/team/invitations'
+    | '/dashboard/workspace/$workspaceId/team/members'
+    | '/dashboard/workspace/$workspaceId/team/roles'
   id:
     | '__root__'
     | '/'
@@ -214,6 +295,9 @@ export interface FileRouteTypes {
     | '/dashboard/workspace/$workspaceId'
     | '/dashboard/workspace/$workspaceId/team'
     | '/dashboard/workspace/$workspaceId/project/$projectId'
+    | '/dashboard/workspace/$workspaceId/team/invitations'
+    | '/dashboard/workspace/$workspaceId/team/members'
+    | '/dashboard/workspace/$workspaceId/team/roles'
   fileRoutesById: FileRoutesById
 }
 
@@ -272,11 +356,28 @@ export const routeTree = rootRoute
     },
     "/dashboard/workspace/$workspaceId/team": {
       "filePath": "dashboard/workspace/$workspaceId/team.tsx",
-      "parent": "/dashboard/workspace/$workspaceId"
+      "parent": "/dashboard/workspace/$workspaceId",
+      "children": [
+        "/dashboard/workspace/$workspaceId/team/invitations",
+        "/dashboard/workspace/$workspaceId/team/members",
+        "/dashboard/workspace/$workspaceId/team/roles"
+      ]
     },
     "/dashboard/workspace/$workspaceId/project/$projectId": {
       "filePath": "dashboard/workspace/$workspaceId/project/$projectId.tsx",
       "parent": "/dashboard/workspace/$workspaceId"
+    },
+    "/dashboard/workspace/$workspaceId/team/invitations": {
+      "filePath": "dashboard/workspace/$workspaceId/team/invitations.tsx",
+      "parent": "/dashboard/workspace/$workspaceId/team"
+    },
+    "/dashboard/workspace/$workspaceId/team/members": {
+      "filePath": "dashboard/workspace/$workspaceId/team/members.tsx",
+      "parent": "/dashboard/workspace/$workspaceId/team"
+    },
+    "/dashboard/workspace/$workspaceId/team/roles": {
+      "filePath": "dashboard/workspace/$workspaceId/team/roles.tsx",
+      "parent": "/dashboard/workspace/$workspaceId/team"
     }
   }
 }
diff --git a/apps/web/src/routes/dashboard/workspace/$workspaceId/team.tsx b/apps/web/src/routes/dashboard/workspace/$workspaceId/team.tsx
index 5bb4216..bc0de5e 100644
--- a/apps/web/src/routes/dashboard/workspace/$workspaceId/team.tsx
+++ b/apps/web/src/routes/dashboard/workspace/$workspaceId/team.tsx
@@ -1,23 +1,19 @@
-import InviteTeamMemberModal from "@/components/team/invite-team-member-modal";
-import TeamTable from "@/components/team/team-table";
-import { Button } from "@/components/ui/button";
-import { Link, createFileRoute } from "@tanstack/react-router";
+import { cn } from "@/lib/cn";
+import {
+  Link,
+  Outlet,
+  createFileRoute,
+  useRouterState,
+} from "@tanstack/react-router";
 import { Shield, UserPlus, Users } from "lucide-react";
-import { useState } from "react";
-
-const menuItems = [
-  { icon: Users, label: "Members", path: "/team" },
-  { icon: UserPlus, label: "Invitations", path: "/team/invitations" },
-  { icon: Shield, label: "Roles", path: "/team/roles" },
-];
 
 export const Route = createFileRoute("/dashboard/workspace/$workspaceId/team")({
   component: RouteComponent,
 });
 
 function RouteComponent() {
-  const [isInviteTeamMemberDialogOpened, setIsInviteTeamMemberDialogOpened] =
-    useState(false);
+  const pathname = useRouterState({ select: (s) => s.location.pathname });
+  const { workspaceId } = Route.useParams();
 
   return (
     <div className="flex-1 flex h-screen">
@@ -26,45 +22,53 @@ function RouteComponent() {
           Team
         </h2>
         <nav className="space-y-1">
-          {menuItems.map(({ icon: Icon, label, path }) => (
-            <Link
-              key={path}
-              to={path}
-              className={`flex items-center px-3 py-2 rounded-lg text-sm ${
-                location.pathname === path
-                  ? "bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
-                  : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
-              }`}
-            >
-              <Icon className="w-4 h-4 mr-3" />
-              {label}
-            </Link>
-          ))}
+          <Link
+            className={`flex items-center px-3 py-2 rounded-lg  text-sm ${
+              pathname.includes("/members")
+                ? "bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
+                : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
+            }`}
+            to="/dashboard/workspace/$workspaceId/team/members"
+            params={{
+              workspaceId,
+            }}
+          >
+            <Users className="w-4 h-4 mr-3" />
+            Members
+          </Link>
+
+          <Link
+            className={`flex items-center px-3 py-2 rounded-lg  text-sm ${
+              pathname.includes("/invitations")
+                ? "bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
+                : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
+            }`}
+            to="/dashboard/workspace/$workspaceId/team/invitations"
+            params={{
+              workspaceId,
+            }}
+          >
+            <UserPlus className="w-4 h-4 mr-3" />
+            Invitations
+          </Link>
+
+          <div
+            className={cn(
+              "flex items-center px-3 py-2 rounded-lg text-sm opacity-50 cursor-not-allowed",
+              "text-zinc-400 dark:text-zinc-600",
+            )}
+          >
+            <Shield className="w-4 h-4 mr-3" />
+            <span className="flex items-center gap-2">
+              Roles
+              <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400">
+                Soon
+              </span>
+            </span>
+          </div>
         </nav>
       </aside>
-      <div className="flex-1 p-6">
-        <div className="w-full">
-          <div className="flex items-center justify-between mb-6">
-            <h1 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100">
-              Team Members
-            </h1>
-            <Button
-              onClick={() => setIsInviteTeamMemberDialogOpened(true)}
-              className="bg-indigo-600 text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400"
-            >
-              <UserPlus className="w-4 h-4 mr-2" />
-              Invite Member
-            </Button>
-          </div>
-        </div>
-        <div className="bg-white dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-800 overflow-hidden">
-          <TeamTable />
-        </div>
-      </div>
-      <InviteTeamMemberModal
-        open={isInviteTeamMemberDialogOpened}
-        onClose={() => setIsInviteTeamMemberDialogOpened(false)}
-      />
+      <Outlet />
     </div>
   );
 }
diff --git a/apps/web/src/routes/dashboard/workspace/$workspaceId/team/invitations.tsx b/apps/web/src/routes/dashboard/workspace/$workspaceId/team/invitations.tsx
new file mode 100644
index 0000000..5ba332e
--- /dev/null
+++ b/apps/web/src/routes/dashboard/workspace/$workspaceId/team/invitations.tsx
@@ -0,0 +1,107 @@
+import InviteTeamMemberModal from "@/components/team/invite-team-member-modal";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import useGetPendingWorkspaceUsers from "@/hooks/queries/workspace-users/use-get-pending-workspace-users";
+import { createFileRoute } from "@tanstack/react-router";
+import { UserPlus } from "lucide-react";
+import { useState } from "react";
+
+export const Route = createFileRoute(
+  "/dashboard/workspace/$workspaceId/team/invitations",
+)({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { workspaceId } = Route.useParams();
+  const { data: users } = useGetPendingWorkspaceUsers({ workspaceId });
+  const [isInviteTeamMemberModalOpen, setIsInviteTeamMemberModalOpen] =
+    useState(false);
+
+  return (
+    <div className="flex-1 p-6">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100">
+          Team Invitations
+        </h1>
+        <Button
+          onClick={() => setIsInviteTeamMemberModalOpen(true)}
+          className="bg-indigo-600 text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400"
+        >
+          <UserPlus className="w-4 h-4 mr-2" />
+          New Invitation
+        </Button>
+      </div>
+
+      <div className="bg-white dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-800 overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-zinc-200 dark:border-zinc-800">
+                <th className="text-left py-3 px-4 text-sm font-medium text-zinc-500 dark:text-zinc-400">
+                  Email
+                </th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-zinc-500 dark:text-zinc-400">
+                  Role
+                </th>
+
+                <th className="text-left py-3 px-4 text-sm font-medium text-zinc-500 dark:text-zinc-400">
+                  Sent
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {users?.map((invitation) => (
+                <tr
+                  key={invitation.id}
+                  className="border-b border-zinc-200 dark:border-zinc-800 last:border-0"
+                >
+                  <td className="py-3 px-4">
+                    <div className="flex items-center gap-3">
+                      <Avatar className="h-6 w-6">
+                        <AvatarFallback className="bg-indigo-100 dark:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400 uppercase text-xs">
+                          {invitation.email[0]}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="text-sm text-zinc-900 dark:text-zinc-100">
+                        {invitation.email}
+                      </span>
+                    </div>
+                  </td>
+                  <td className="py-3 px-4">
+                    <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-indigo-50 text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-400">
+                      Admin
+                    </span>
+                  </td>
+
+                  <td className="py-3 px-4 text-sm text-zinc-500 dark:text-zinc-400">
+                    {new Date(invitation.invitedAt).toLocaleDateString(
+                      "en-US",
+                      {
+                        year: "numeric",
+                        month: "short",
+                        day: "numeric",
+                      },
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {users?.length === 0 && (
+          <div className="py-12 text-center">
+            <p className="text-zinc-500 dark:text-zinc-400">
+              No invitations found
+            </p>
+          </div>
+        )}
+      </div>
+      <InviteTeamMemberModal
+        open={isInviteTeamMemberModalOpen}
+        onClose={() => setIsInviteTeamMemberModalOpen(false)}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/src/routes/dashboard/workspace/$workspaceId/team/members.tsx b/apps/web/src/routes/dashboard/workspace/$workspaceId/team/members.tsx
new file mode 100644
index 0000000..20c18c9
--- /dev/null
+++ b/apps/web/src/routes/dashboard/workspace/$workspaceId/team/members.tsx
@@ -0,0 +1,27 @@
+import TeamTable from "@/components/team/team-table";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute(
+  "/dashboard/workspace/$workspaceId/team/members",
+)({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return (
+    <>
+      <div className="flex-1 p-6">
+        <div className="w-full">
+          <div className="flex items-center justify-between mb-6">
+            <h1 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100">
+              Team Members
+            </h1>
+          </div>
+        </div>
+        <div className="bg-white dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-800 overflow-hidden">
+          <TeamTable />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/apps/web/src/routes/dashboard/workspace/$workspaceId/team/roles.tsx b/apps/web/src/routes/dashboard/workspace/$workspaceId/team/roles.tsx
new file mode 100644
index 0000000..040d367
--- /dev/null
+++ b/apps/web/src/routes/dashboard/workspace/$workspaceId/team/roles.tsx
@@ -0,0 +1,11 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute(
+  "/dashboard/workspace/$workspaceId/team/roles",
+)({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <div>Hello "/dashboard/workspace/$workspaceId/team/roles"!</div>;
+}
diff --git a/biome.json b/biome.json
index 9bdff9f..8bafada 100644
--- a/biome.json
+++ b/biome.json
@@ -13,7 +13,8 @@
 			"dist",
 			"cache",
 			"*.css",
-			"package.json"
+			"package.json",
+			".turbo"
 		]
 	},
 	"formatter": {