more validation and redirects

src/app/[orgId]/components/Header.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import api from "@app/api";
 import { Avatar, AvatarFallback } from "@app/components/ui/avatar";
 import { Button } from "@app/components/ui/button";
 import {
@@ -19,15 +20,23 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@app/components/ui/select";
+import { useToast } from "@app/hooks/use-toast";
+import { ListOrgsResponse } from "@server/routers/org";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 
 type HeaderProps = {
     name?: string;
     email: string;
     orgName: string;
+    orgs: ListOrgsResponse["orgs"];
 };
 
-export default function Header({ email, orgName, name }: HeaderProps) {
+export default function Header({ email, orgName, name, orgs }: HeaderProps) {
+    const { toast } = useToast();
+
+    const router = useRouter();
+
     function getInitials() {
         if (name) {
             const [firstName, lastName] = name.split(" ");
@@ -36,6 +45,19 @@ export default function Header({ email, orgName, name }: HeaderProps) {
         return email.substring(0, 2).toUpperCase();
     }
 
+    function logout() {
+        api.post("/auth/logout")
+            .catch((e) => {
+                console.error("Error logging out", e);
+                toast({
+                    title: "Error logging out",
+                });
+            })
+            .then(() => {
+                router.push("/auth/login");
+            });
+    }
+
     return (
         <>
             <div className="flex items-center justify-between">
@@ -72,8 +94,9 @@ export default function Header({ email, orgName, name }: HeaderProps) {
                             </DropdownMenuLabel>
                             <DropdownMenuSeparator />
                             <DropdownMenuGroup>
-                                <DropdownMenuItem>Profile</DropdownMenuItem>
-                                <DropdownMenuItem>Log out</DropdownMenuItem>
+                                <DropdownMenuItem onClick={logout}>
+                                    Log out
+                                </DropdownMenuItem>
                             </DropdownMenuGroup>
                         </DropdownMenuContent>
                     </DropdownMenu>
@@ -106,9 +129,14 @@ export default function Header({ email, orgName, name }: HeaderProps) {
                         </SelectTrigger>
                         <SelectContent>
                             <SelectGroup>
-                                <SelectItem value={orgName}>
-                                    {orgName}
-                                </SelectItem>
+                                {orgs.map((org) => (
+                                    <SelectItem
+                                        value={org.name}
+                                        key={org.orgId}
+                                    >
+                                        {org.name}
+                                    </SelectItem>
+                                ))}
                             </SelectGroup>
                         </SelectContent>
                     </Select>

src/app/[orgId]/components/TopbarNav.tsx

@@ -40,8 +40,8 @@ export function TopbarNav({
                     className={cn(
                         "px-2 py-3 text-md",
                         pathname.startsWith(item.href.replace("{orgId}", orgId))
-                            ? "border-b-2 border-primary text-primary font-medium"
-                            : "hover:text-primary text-muted-foreground font-medium",
+                            ? "border-b-2 border-secondary text-secondary font-medium"
+                            : "hover:secondary-primary text-muted-foreground font-medium",
                         "whitespace-nowrap",
                         disabled && "cursor-not-allowed",
                     )}

src/app/[orgId]/layout.tsx

@@ -7,7 +7,7 @@ import { redirect } from "next/navigation";
 import { cache } from "react";
 import { internal } from "@app/api";
 import { AxiosResponse } from "axios";
-import { GetOrgResponse } from "@server/routers/org";
+import { GetOrgResponse, ListOrgsResponse } from "@server/routers/org";
 import { authCookieHeader } from "@app/api/cookies";
 
 export const metadata: Metadata = {
@@ -62,11 +62,28 @@ export default async function ConfigurationLaytout({
         redirect(`/`);
     }
 
+    let orgs: ListOrgsResponse["orgs"] = [];
+    try {
+        const res = await internal.get<AxiosResponse<ListOrgsResponse>>(
+            `/orgs`,
+            authCookieHeader(),
+        );
+        if (res && res.data.data.orgs) {
+            orgs = res.data.data.orgs;
+        }
+    } catch (e) {
+        console.error("Error fetching orgs", e);
+    }
+
     return (
         <>
             <div className="w-full bg-muted mb-6 select-none sm:px-0 px-3 pt-3">
                 <div className="container mx-auto flex flex-col content-between gap-4 ">
-                    <Header email={user.email} orgName={params.orgId} />
+                    <Header
+                        email={user.email}
+                        orgName={params.orgId}
+                        orgs={orgs}
+                    />
                     <TopbarNav items={topNavItems} orgId={params.orgId} />
                 </div>
             </div>