fix: remove router reference

web/apps/admin/src/pages/organizations/details/index.tsx

@@ -2,7 +2,7 @@ import {
   OrganizationDetails,
 } from "@raystack/frontier/admin";
 import { useCallback, useContext, useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { AppContext } from "~/contexts/App";
 import { clients } from "~/connect/clients";
 import { exportCsvFromStream } from "~/utils/helper";
@@ -16,6 +16,8 @@ async function loadCountries(): Promise<string[]> {
 
 export function OrganizationDetailsPage() {
   const { organizationId } = useParams<{ organizationId: string }>();
+  const location = useLocation();
+  const navigate = useNavigate();
   const { config } = useContext(AppContext);
   const [countries, setCountries] = useState<string[]>([]);
 
@@ -60,6 +62,8 @@ export function OrganizationDetailsPage() {
       onExportMembers={onExportMembers}
       onExportProjects={onExportProjects}
       onExportTokens={onExportTokens}
+      currentPath={location.pathname}
+      onNavigate={navigate}
     />
   );
 }

web/sdk/admin/views/organizations/details/index.tsx

@@ -27,6 +27,8 @@ export type OrganizationDetailsProps = {
   tokenProductId?: string;
   countries?: string[];
   organizationTypes?: string[];
+  currentPath: string;
+  onNavigate: (path: string) => void;
 };
 
 export const OrganizationDetails = ({
@@ -38,6 +40,8 @@ export const OrganizationDetails = ({
   tokenProductId,
   countries,
   organizationTypes,
+  currentPath,
+  onNavigate,
 }: OrganizationDetailsProps) => {
   const [isSearchVisible, setIsSearchVisible] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
@@ -284,6 +288,8 @@ export const OrganizationDetails = ({
         onExportMembers={onExportMembers}
         onExportProjects={onExportProjects}
         onExportTokens={onExportTokens}
+        currentPath={currentPath}
+        onNavigate={onNavigate}
       >
         {organization?.id ? (
           <Outlet context={{ organization } satisfies OutletContext} />

web/sdk/admin/views/organizations/details/layout/index.tsx

@@ -17,6 +17,8 @@ interface OrganizationDetailsLayoutProps {
   onExportMembers?: () => Promise<void>;
   onExportProjects?: () => Promise<void>;
   onExportTokens?: () => Promise<void>;
+  currentPath: string;
+  onNavigate: (path: string) => void;
 }
 
 export const OrganizationDetailsLayout = ({
@@ -26,6 +28,8 @@ export const OrganizationDetailsLayout = ({
   onExportMembers,
   onExportProjects,
   onExportTokens,
+  currentPath,
+  onNavigate,
 }: OrganizationDetailsLayoutProps) => {
   const [showSidePanel, setShowSidePanel] = useState(true);
   const [showKYCPanel, setShowKYCPanel] = useState(false);
@@ -78,6 +82,8 @@ export const OrganizationDetailsLayout = ({
         onExportMembers={onExportMembers}
         onExportProjects={onExportProjects}
         onExportTokens={onExportTokens}
+        currentPath={currentPath}
+        onNavigate={onNavigate}
       />
       <Flex justify="between" style={{ height: "100%" }}>
         <Flex

web/sdk/admin/views/organizations/details/layout/navbar.tsx

@@ -15,7 +15,6 @@ import {
 
 import styles from "./layout.module.css";
 import { DotsHorizontalIcon } from "@radix-ui/react-icons";
-import { NavLink, useLocation } from "react-router-dom";
 import { InviteUsersDialog } from "./invite-users-dialog";
 import { AddTokensDialog } from "./add-tokens-dialog";
 import type React from "react";
@@ -218,17 +217,21 @@ const NavbarActionMenu = ({
   );
 };
 
-const NavLinks = ({ organizationId }: { organizationId: string }) => {
-  const location = useLocation();
-  const currentPath = location.pathname;
-
+const NavLinks = ({
+  organizationId,
+  currentPath,
+  onNavigate,
+}: {
+  organizationId: string;
+  currentPath: string;
+  onNavigate: (path: string) => void;
+}) => {
   const links = [
     { name: "Members", path: `/organizations/${organizationId}/members` },
     { name: "Projects", path: `/organizations/${organizationId}/projects` },
     { name: "Invoices", path: `/organizations/${organizationId}/invoices` },
     { name: "Tokens", path: `/organizations/${organizationId}/tokens` },
     { name: "API", path: `/organizations/${organizationId}/apis` },
-    // { name: "Audit log", path: `/organizations/${organizationId}/#` },
     { name: "Security", path: `/organizations/${organizationId}/security` },
   ];
 
@@ -241,15 +244,15 @@ const NavLinks = ({ organizationId }: { organizationId: string }) => {
       {links.map((link, i) => {
         const isActive = checkActive(link.path);
         return (
-          <NavLink to={link.path} key={link.path + i}>
-            <Chip
-              data-state={isActive ? "active" : ""}
-              variant={"filled"}
-              className={styles["nav-chip"]}
-            >
-              {link.name}
-            </Chip>
-          </NavLink>
+          <Chip
+            key={link.path + i}
+            data-state={isActive ? "active" : ""}
+            variant={"filled"}
+            className={styles["nav-chip"]}
+            onClick={() => onNavigate(link.path)}
+          >
+            {link.name}
+          </Chip>
         );
       })}
     </Flex>
@@ -265,6 +268,8 @@ interface OrganizationDetailsNavbarProps {
   onExportMembers?: () => Promise<void>;
   onExportProjects?: () => Promise<void>;
   onExportTokens?: () => Promise<void>;
+  currentPath: string;
+  onNavigate: (path: string) => void;
 }
 
 export const OrganizationsDetailsNavabar = ({
@@ -276,6 +281,8 @@ export const OrganizationsDetailsNavabar = ({
   onExportMembers,
   onExportProjects,
   onExportTokens,
+  currentPath,
+  onNavigate,
 }: OrganizationDetailsNavbarProps) => {
   const { search } = useContext(OrganizationContext);
 
@@ -319,7 +326,11 @@ export const OrganizationsDetailsNavabar = ({
           onExportProjects={onExportProjects}
           onExportTokens={onExportTokens}
         />
-        <NavLinks organizationId={organization?.id || ""} />
+        <NavLinks
+          organizationId={organization?.id || ""}
+          currentPath={currentPath}
+          onNavigate={onNavigate}
+        />
       </Flex>
       <Flex align="center" gap={4}>
         {search.isVisible ? (