added team route and project route, refactored dashboard, and setting…

…s page routes

apps/auth/app/apps/page.tsx

@@ -1,9 +1,11 @@
+import Link from "next/link";
+
 export default function AppsListPage() {
     return (
         <div>
             Select the app to open
             <div>
-                <a href="http://localhost:3004">Dashboard</a>
+                <Link href="http://localhost:3004">Dashboard</Link>
             </div>
         </div>
     );

apps/auth/middleware.ts

@@ -7,19 +7,24 @@ export default auth(async function (req) {
     // Your custom middleware logic goes here
     const { nextUrl } = req;
     const isLoggedIn = !!req.auth;
-    const publicRoutes = ["/auth", "/"];
+    const protectedRoutes = ["/", "/apps"];
+    console.log(nextUrl.pathname);
+    const path = nextUrl.pathname;
 
     const authRoutes = ["/login"];
-    const isPublicRoute = publicRoutes.includes(nextUrl.pathname);
+    const isProtectedRoute = protectedRoutes.includes(nextUrl.pathname);
     const isAuthRoute = authRoutes.includes(nextUrl.pathname);
     if (isAuthRoute) {
         if (isLoggedIn) {
             return NextResponse.redirect(new URL("/apps", nextUrl));
         }
         return;
     }
-    if (isPublicRoute) {
+    if (isProtectedRoute) {
         if (isLoggedIn) {
+            if (path === "/apps") {
+                return;
+            }
             return NextResponse.redirect(new URL("/apps", nextUrl));
         }
         if (!isLoggedIn) {

apps/dashboard/app/[teamId]/[projectId]/page.tsx

@@ -0,0 +1,3 @@
+export default function ProjectHomePage() {
+    return <div>ProjectHomePage</div>;
+}

apps/dashboard/app/[teamId]/[projectId]/settings/page.tsx

@@ -0,0 +1,3 @@
+export default function ProjectSettingsPage() {
+    return <div>ProjectSettingsPage</div>;
+}

apps/dashboard/app/[teamId]/layout.tsx

@@ -0,0 +1,7 @@
+export default function TeamRootLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return <div>{children}</div>;
+}

apps/dashboard/app/[teamId]/page.tsx

@@ -0,0 +1,10 @@
+import Dashboard from "@/components/dashboard";
+
+export default function TeamHomePage() {
+    return (
+        <div>
+            {" "}
+            <Dashboard />
+        </div>
+    );
+}

apps/dashboard/app/page.tsx

@@ -1,10 +1,8 @@
-import Dashboard from "@/components/dashboard";
 import { auth } from "@/lib/auth";
 export default async function Home() {
     const session = await auth();
     return (
         <main>
-            <Dashboard />
             {/* <Button>Login</Button>
             <Avatar>
                 <AvatarImage

apps/dashboard/app/products/[id]/page.tsx

@@ -0,0 +1,3 @@
+export default function ProductsDetailsPage() {
+    return <div>page</div>;
+}

apps/dashboard/components/dashboard/main-nav.tsx

@@ -1,10 +1,14 @@
+"use client";
 import { cn } from "@saroh/ui/lib/utils";
 import Link from "next/link";
+import { useParams } from "next/navigation";
 
 export function MainNav({
     className,
     ...props
 }: React.HTMLAttributes<HTMLElement>) {
+    const params = useParams();
+    const domain = params.teamId as string;
     return (
         <nav
             className={cn(
@@ -14,25 +18,25 @@ export function MainNav({
             {...props}
         >
             <Link
-                href="/"
+                href={`/${domain}`}
                 className="hover:text-primary text-sm font-medium transition-colors"
             >
                 Overview
             </Link>
             <Link
-                href="/"
+                href={`/${domain}`}
                 className="text-muted-foreground hover:text-primary text-sm font-medium transition-colors"
             >
                 Customers
             </Link>
             <Link
-                href="/products"
+                href={`/${domain}/products`}
                 className="text-muted-foreground hover:text-primary text-sm font-medium transition-colors"
             >
                 Products
             </Link>
             <Link
-                href="/settings"
+                href={`/${domain}/settings`}
                 className="text-muted-foreground hover:text-primary text-sm font-medium transition-colors"
             >
                 Settings

apps/dashboard/components/dashboard/user-nav.tsx

@@ -1,3 +1,5 @@
+"use client";
+import useCurrentUser from "@/lib/hooks/use-current-user";
 import { Avatar, AvatarFallback, AvatarImage } from "@saroh/ui/avatar";
 import { Button } from "@saroh/ui/button";
 import {
@@ -10,8 +12,20 @@ import {
     DropdownMenuShortcut,
     DropdownMenuTrigger,
 } from "@saroh/ui/dropdown-menu";
+import { Skeleton } from "@saroh/ui/skeleton";
+import { signOut } from "next-auth/react";
 
 export function UserNav() {
+    const { user, isLoading } = useCurrentUser();
+
+    if (isLoading)
+        return (
+            <div>
+                <Skeleton className="h-10 w-10 rounded-full" />
+            </div>
+        );
+    if (!user) return null;
+
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
@@ -20,19 +34,22 @@ export function UserNav() {
                     className="relative h-8 w-8 rounded-full"
                 >
                     <Avatar className="h-8 w-8">
-                        <AvatarImage src="/avatars/01.png" alt="@shadcn" />
-                        <AvatarFallback>SC</AvatarFallback>
+                        <AvatarImage
+                            src="/avatars/01.png"
+                            alt={user.name ?? "user profile pic"}
+                        />
+                        <AvatarFallback>{user?.name[0] ?? "U"}</AvatarFallback>
                     </Avatar>
                 </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56" align="end" forceMount>
                 <DropdownMenuLabel className="font-normal">
                     <div className="flex flex-col space-y-1">
                         <p className="text-sm font-medium leading-none">
-                            shadcn
+                            {user.name}
                         </p>
                         <p className="text-muted-foreground text-xs leading-none">
-                            [email protected]
+                            {user.email}
                         </p>
                     </div>
                 </DropdownMenuLabel>
@@ -53,7 +70,11 @@ export function UserNav() {
                     <DropdownMenuItem>New Team</DropdownMenuItem>
                 </DropdownMenuGroup>
                 <DropdownMenuSeparator />
-                <DropdownMenuItem>
+                <DropdownMenuItem
+                    onClick={async () => {
+                        await signOut();
+                    }}
+                >
                     Log out
                     <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
                 </DropdownMenuItem>

apps/dashboard/components/settings/sidebar-nav.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { useParams, usePathname } from "next/navigation";
 
 import { buttonVariants } from "@saroh/ui/button";
 import { cn } from "@saroh/ui/lib/utils";
@@ -15,6 +15,7 @@ interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
 
 export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
     const pathname = usePathname();
+    const params = useParams();
 
     return (
         <nav
@@ -27,7 +28,7 @@ export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
             {items.map((item) => (
                 <Link
                     key={item.href}
-                    href={item.href}
+                    href={`/${params.teamId}${item.href}`}
                     className={cn(
                         buttonVariants({ variant: "ghost" }),
                         pathname === item.href

apps/dashboard/lib/hooks/use-current-user.ts

@@ -0,0 +1,16 @@
+import { useSession } from "next-auth/react";
+
+export default function useCurrentUser() {
+    const { data, status } = useSession();
+    const user = data?.user;
+    if (status === "loading") return { isLoading: true };
+    if (status === "authenticated")
+        return {
+            user,
+            isLoading: false,
+        };
+    if (status === "unauthenticated" || status === "error")
+        return { isLoading: true, user: null };
+
+    return { isLoading: true, user: null };
+}

apps/dashboard/lib/utils/get-current-user.ts

@@ -0,0 +1,8 @@
+import { auth } from "../auth";
+
+export async function getCurrentUser() {
+    const session = await auth();
+    const user = session?.user;
+    if (user) return user;
+    return null;
+}

apps/dashboard/middleware.ts

@@ -5,29 +5,11 @@ import authConfig from "./lib/auth.config";
 const { auth } = NextAuth(authConfig);
 export default auth(async function (req) {
     // Your custom middleware logic goes here
-    const { nextUrl } = req;
     const isLoggedIn = !!req.auth;
-    const publicRoutes = ["/auth"];
-    const authRoutes = ["/login"];
-    const isPublicRoute = publicRoutes.includes(nextUrl.pathname);
-    const isAuthRoute = authRoutes.includes(nextUrl.pathname);
-
-    if (isAuthRoute) {
-        if (isLoggedIn) {
-            return NextResponse.redirect(new URL("/", nextUrl));
-        }
-        return;
-    }
-    if (isPublicRoute) {
-        if (isLoggedIn) {
-            return NextResponse.redirect(new URL("/", nextUrl));
-        }
-        return;
-    }
 
     if (!isLoggedIn) {
         return NextResponse.redirect(
-            new URL("/login", "http://localhost:3000"),
+            new URL("/login", process.env.NEXT_PUBLIC_AUTH_APP_DOMAIN),
         );
     }
     return;