SANC-108: Made agency name dynamic

src/app/_components/common/navbar.tsx

@@ -16,7 +16,6 @@ type NavbarView = "admin" | "agency" | "driver";
 
 interface NavbarProps {
   view: NavbarView;
-  agencyName?: string;
 }
 
 interface NavLinkProps {
@@ -35,9 +34,14 @@ function NavLink({ href, children }: NavLinkProps) {
   );
 }
 
-export default function Navbar({ view, agencyName }: NavbarProps) {
+export default function Navbar({ view }: NavbarProps) {
   const [inviteModalOpen, setInviteModalOpen] = useState(false);
   const router = useRouter();
+
+  const agencyName = api.organization.getUserOrgName.useQuery(undefined, {
+    enabled: view === "agency",
+  }).data;
+
   const { mutate } = api.organization.redirectToDashboard.useMutation({
     onSuccess: (data) => {
       router.replace(data.redirectUrl);
@@ -53,7 +57,7 @@ export default function Navbar({ view, agencyName }: NavbarProps) {
           color="blue"
           transparent={true}
         ></IconButton>
-        <Text>{view === "agency" ? `${agencyName ?? "[Agency name]"} Home` : ""}</Text>
+        <Text>{view === "agency" ? (agencyName ? `${agencyName} Home` : "Loading...") : ""}</Text>
       </Group>
 
       {view === "admin" && (

src/app/_components/common/profile/profile.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Menu } from "@mantine/core";
+import { useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 import Arrow from "@/assets/icons/arrow";
 import User from "@/assets/icons/user";
@@ -13,11 +14,13 @@ import styles from "./Profile.module.scss";
 export default function Profile() {
   const { data: session } = useSession();
   const router = useRouter();
+  const queryClient = useQueryClient();
   function logout() {
     authClient
       .signOut()
       .then(() => {
         router.push("/logout");
+        queryClient.clear();
       })
       .catch((err) => {
         console.error("Logout failed:", err);

src/server/api/routers/organizations.ts

@@ -14,6 +14,29 @@ import { OrganizationRole, Role } from "@/types/types";
 import { nameRegex, passwordSchema, phoneNumberSchema } from "@/types/validation";
 
 export const organizationRouter = createTRPCRouter({
+  getUserOrgName: protectedProcedure.query(async ({ ctx }) => {
+    const orgId = ctx.session.session.activeOrganizationId;
+
+    if (!orgId) {
+      throw new TRPCError({
+        code: "BAD_REQUEST",
+        message: "No active organization ID set",
+      });
+    }
+
+    const org = await ctx.db.query.organization.findFirst({
+      where: (organization, { eq }) => eq(organization.id, orgId),
+    });
+
+    if (!org) {
+      throw new TRPCError({
+        code: "NOT_FOUND",
+        message: "Organization not found in database",
+      });
+    }
+
+    return org.name;
+  }),
   redirectToDashboard: protectedProcedure.mutation(async ({ ctx }) => {
     const userId = ctx.session.user.id;