refactor: remove all instances of react-router-dom

web/apps/admin/src/pages/admins/AdminsPage.tsx

@@ -1,5 +1,12 @@
 import { AdminsView } from "@raystack/frontier/admin";
+import { useNavigate } from "react-router-dom";
 
 export function AdminsPage() {
-  return <AdminsView />;
+  const navigate = useNavigate();
+
+  return (
+    <AdminsView
+      onNavigateToOrg={(orgId: string) => navigate(`/organizations/${orgId}`)}
+    />
+  );
 }

web/apps/admin/src/pages/plans/PlansPage.tsx

@@ -9,6 +9,7 @@ export function PlansPage() {
     <PlansView
       selectedPlanId={planId}
       onCloseDetail={() => navigate("/plans")}
+      onSelectPlan={(id: string) => navigate(`/plans/${id}`)}
     />
   );
 }

web/apps/admin/src/pages/preferences/PreferencesPage.tsx

@@ -9,6 +9,7 @@ export function PreferencesPage() {
     <PreferencesView
       selectedPreferenceName={name}
       onCloseDetail={() => navigate("/preferences")}
+      onSelectPreference={(prefName: string) => navigate(`/preferences/${prefName}`)}
     />
   );
 }

web/apps/admin/src/pages/users/UsersPage.tsx

@@ -1,6 +1,6 @@
 import { UsersView } from "@raystack/frontier/admin";
 import { useCallback } from "react";
-import { useParams, useNavigate } from "react-router-dom";
+import { useParams, useNavigate, useLocation } from "react-router-dom";
 import { clients } from "~/connect/clients";
 import { exportCsvFromStream } from "~/utils/helper";
 
@@ -9,6 +9,7 @@ const adminClient = clients.admin({ useBinary: true });
 export function UsersPage() {
   const { userId } = useParams();
   const navigate = useNavigate();
+  const location = useLocation();
 
   const onExportUsers = useCallback(async () => {
     await exportCsvFromStream(adminClient.exportUsers, {}, "users.csv");
@@ -27,6 +28,8 @@ export function UsersPage() {
       onCloseDetail={() => navigate("/users")}
       onExportUsers={onExportUsers}
       onNavigateToUser={onNavigateToUser}
+      currentPath={location.pathname}
+      onNavigate={navigate}
     />
   );
 }

web/sdk/admin/views/admins/columns.tsx

@@ -1,11 +1,12 @@
-import type { DataTableColumnDef } from "@raystack/apsara";
+import { Text, type DataTableColumnDef } from "@raystack/apsara";
 import type { ServiceUser, User } from "@raystack/proton/frontier";
-import { Link } from "react-router-dom";
 
-export const getColumns: () => DataTableColumnDef<
+export const getColumns: (options?: {
+  onNavigateToOrg?: (orgId: string) => void;
+}) => DataTableColumnDef<
   User | ServiceUser,
   unknown
->[] = () => {
+>[] = ({ onNavigateToOrg } = {}) => {
   return [
     {
       header: "Title",
@@ -40,7 +41,12 @@
       cell: (info) => {
         const org_id = info.getValue() as string;
         return org_id ? (
-          <Link to={`/organizations/${org_id}`}>{org_id}</Link>
+          <Text
+            style={{ cursor: "pointer" }}
+            onClick={() => onNavigateToOrg?.(org_id)}
+          >
+            {org_id}
+          </Text>
         ) : (
           "-"
         );

web/sdk/admin/views/admins/index.tsx

@@ -21,7 +21,11 @@
   );
 };
 
-export default function AdminsView() {
+export type AdminsViewProps = {
+  onNavigateToOrg?: (orgId: string) => void;
+};
+
+export default function AdminsView({ onNavigateToOrg }: AdminsViewProps = {}) {
   const {
     data: platformUsersData,
     isLoading,
@@ -31,7 +35,7 @@
     staleTime: Infinity,
   });
 
-  const columns = getColumns();
+  const columns = getColumns({ onNavigateToOrg });
   const data = [
     ...(platformUsersData?.users || []),
     ...(platformUsersData?.serviceusers || []),

web/sdk/admin/views/plans/columns.tsx

@@ -1,20 +1,29 @@
-import { Link } from "react-router-dom";
-import { type DataTableColumnDef } from "@raystack/apsara";
+import { Text, type DataTableColumnDef } from "@raystack/apsara";
 import type { Plan } from "@raystack/proton/frontier";
 import { timestampToDate, type TimeStamp } from "../../utils/connect-timestamp";
 
-export const getColumns: () => DataTableColumnDef<
+export const getColumns: (options?: {
+  onSelectPlan?: (planId: string) => void;
+}) => DataTableColumnDef<
   Plan,
   unknown
->[] = () => {
+>[] = ({ onSelectPlan } = {}) => {
   return [
     {
       header: "ID",
       accessorKey: "id",
       filterVariant: "text",
-      cell: ({ row, getValue }) => (
-        <Link to={`/plans/${row.getValue("id")}`}>{getValue() as string}</Link>
-      ),
+      cell: ({ getValue }) => {
+        const id = getValue() as string;
+        return (
+          <Text
+            style={{ cursor: "pointer" }}
+            onClick={() => onSelectPlan?.(id)}
+          >
+            {id}
+          </Text>
+        );
+      },
     },
     {
       header: "Title",

web/sdk/admin/views/plans/index.tsx

@@ -19,12 +19,14 @@ const pageHeader = {
 export type PlansViewProps = {
   selectedPlanId?: string;
   onCloseDetail?: () => void;
+  onSelectPlan?: (planId: string) => void;
   appName?: string;
 };
 
 export default function PlansView({
   selectedPlanId,
   onCloseDetail,
+  onSelectPlan,
   appName,
 }: PlansViewProps = {}) {
   const {
@@ -38,7 +40,7 @@ export default function PlansView({
 
   const plans = plansResponse?.plans || [];
   const planMapById = reduceByKey(plans ?? [], "id");
-  const columns = getColumns();
+  const columns = getColumns({ onSelectPlan });
 
   if (isError) {
     console.error("ConnectRPC Error:", error);

web/sdk/admin/views/preferences/PreferencesView.tsx

@@ -17,11 +17,13 @@ import PreferenceDetails from "./details";
 export type PreferencesViewProps = {
   selectedPreferenceName?: string;
   onCloseDetail?: () => void;
+  onSelectPreference?: (name: string) => void;
 };
 
 export default function PreferencesView({
   selectedPreferenceName,
   onCloseDetail,
+  onSelectPreference,
 }: PreferencesViewProps = {}) {
   const transport = useTransport();
 
@@ -80,6 +82,7 @@ export default function PreferencesView({
         preferences={preferences}
         traits={traits}
         isLoading={isLoading}
+        onSelectPreference={onSelectPreference}
       />
     </Flex>
   );

web/sdk/admin/views/preferences/columns.tsx

@@ -1,18 +1,19 @@
-import type { DataTableColumnDef } from "@raystack/apsara";
+import { Text, type DataTableColumnDef } from "@raystack/apsara";
 import { Preference, PreferenceTrait } from "@raystack/proton/frontier";
-import { Link } from "react-router-dom";
 import styles from "./preferences.module.css";
 
 interface getColumnsOptions {
   traits: PreferenceTrait[];
   preferences: Preference[];
+  onSelectPreference?: (name: string) => void;
 }
 
 export const getColumns: (
   options: getColumnsOptions,
 ) => DataTableColumnDef<PreferenceTrait, unknown>[] = ({
   traits,
   preferences,
+  onSelectPreference,
 }) => {
   return [
     {
@@ -25,7 +26,19 @@ export const getColumns: (
     {
       header: "Action",
       accessorKey: "name",
-      cell: (info) => <Link to={`/preferences/${info.getValue()}`}>Edit</Link>,
+      cell: (info) => {
+        const name = info.getValue() as string;
+        return (
+          <Text
+            style={{ cursor: "pointer" }}
+            data-test-id="admin-edit-preference-btn"
+            role="button"
+            onClick={() => onSelectPreference?.(name)}
+          >
+            Edit
+          </Text>
+        );
+      },
       footer: (props) => props.column.id,
     },
     {

web/sdk/admin/views/preferences/index.tsx

@@ -14,16 +14,19 @@ export type PreferencesListProps = {
   preferences: Preference[];
   traits: PreferenceTrait[];
   isLoading: boolean;
+  onSelectPreference?: (name: string) => void;
 };
 
 export default function PreferencesList({
   preferences,
   traits,
   isLoading,
+  onSelectPreference,
 }: PreferencesListProps) {
   const columns = getColumns({
     traits,
     preferences,
+    onSelectPreference,
   });
 
   return (

web/sdk/admin/views/users/UsersView.tsx

@@ -6,16 +6,20 @@ export type UsersViewProps = {
   onCloseDetail?: () => void;
   onExportUsers?: () => Promise<void>;
   onNavigateToUser?: (userId: string) => void;
+  currentPath?: string;
+  onNavigate?: (path: string) => void;
 };
 
 export default function UsersView({
   selectedUserId,
   onCloseDetail,
   onExportUsers,
   onNavigateToUser,
+  currentPath,
+  onNavigate,
 }: UsersViewProps = {}) {
   if (selectedUserId) {
-    return <UserDetailsByUserId userId={selectedUserId} />;
+    return <UserDetailsByUserId userId={selectedUserId} currentPath={currentPath} onNavigate={onNavigate} />;
   }
 
   return (

web/sdk/admin/views/users/details/layout/layout.tsx

@@ -6,9 +6,11 @@ import { UserDetailsNavbar } from "./navbar";
 
 interface UserDetailsLayoutProps {
   children: ReactNode;
+  currentPath?: string;
+  onNavigate?: (path: string) => void;
 }
 
-export const UserDetailsLayout = ({ children }: UserDetailsLayoutProps) => {
+export const UserDetailsLayout = ({ children, currentPath, onNavigate }: UserDetailsLayoutProps) => {
   const [showSidePanel, setShowSidePanel] = useState(true);
 
   function toggleSidePanel() {
@@ -17,7 +19,7 @@ export const UserDetailsLayout = ({ children }: UserDetailsLayoutProps) => {
 
   return (
     <Flex direction="column" className={styles.page}>
-      <UserDetailsNavbar toggleSidePanel={toggleSidePanel} />
+      <UserDetailsNavbar toggleSidePanel={toggleSidePanel} currentPath={currentPath} onNavigate={onNavigate} />
       <Flex justify="between" style={{ height: "100%" }}>
         <Flex
           className={

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

@@ -6,7 +6,6 @@ import {
   IconButton,
   getAvatarColor,
 } from "@raystack/apsara";
-import { NavLink } from "react-router-dom";
 import { SidebarIcon } from "@raystack/apsara/icons";
 import UserIcon from "../../../../assets/icons/UsersIcon";
 import styles from "./navbar.module.css";
@@ -15,10 +14,14 @@ import { useUser } from "../user-context";
 
 interface UserDetailsNavbarProps {
   toggleSidePanel: () => void;
+  currentPath?: string;
+  onNavigate?: (path: string) => void;
 }
 
 export const UserDetailsNavbar = ({
   toggleSidePanel,
+  currentPath = "",
+  onNavigate,
 }: UserDetailsNavbarProps) => {
   const { user } = useUser();
 
@@ -50,18 +53,19 @@ export const UserDetailsNavbar = ({
           </Breadcrumb.Item>
         </Breadcrumb>
         <Flex gap="small">
-          {links.map((link, index) => (
-            <NavLink to={link.path} key={link.path + index}>
-              {({ isActive }) => (
-                <Chip
-                  data-state={isActive ? "active" : undefined}
-                  variant="filled"
-                  className={styles["nav-chip"]}>
-                  {link.name}
-                </Chip>
-              )}
-            </NavLink>
-          ))}
+          {links.map((link, index) => {
+            const isActive = currentPath.startsWith(link.path);
+            return (
+              <Chip
+                key={link.path + index}
+                data-state={isActive ? "active" : undefined}
+                variant="filled"
+                className={styles["nav-chip"]}
+                onClick={() => onNavigate?.(link.path)}>
+                {link.name}
+              </Chip>
+            );
+          })}
         </Flex>
       </Flex>
       <Flex align="center" gap={4}>

web/sdk/admin/views/users/details/user-details.tsx

@@ -11,12 +11,14 @@ import { UserDetailsSecurityContent } from "./security/security";
 interface UserDetailContentProps {
   user: User;
   refetch: () => void;
+  currentPath?: string;
+  onNavigate?: (path: string) => void;
 }
 
-export const UserDetailContent = ({ user, refetch }: UserDetailContentProps) => {
+export const UserDetailContent = ({ user, refetch, currentPath, onNavigate }: UserDetailContentProps) => {
   return (
     <UserProvider value={{ user, reset: refetch }}>
-      <UserDetailsLayout>
+      <UserDetailsLayout currentPath={currentPath} onNavigate={onNavigate}>
         <UserDetailsSecurityContent />
       </UserDetailsLayout>
     </UserProvider>
@@ -25,9 +27,11 @@ export const UserDetailContent = ({ user, refetch }: UserDetailContentProps) =>
 
 interface UserDetailsByUserIdProps {
   userId: string;
+  currentPath?: string;
+  onNavigate?: (path: string) => void;
 }
 
-export const UserDetailsByUserId = ({ userId }: UserDetailsByUserIdProps) => {
+export const UserDetailsByUserId = ({ userId, currentPath, onNavigate }: UserDetailsByUserIdProps) => {
   const { data, isLoading, refetch } = useQuery(
     AdminServiceQueries.searchUsers,
     { query: { search: userId } },
@@ -66,5 +70,5 @@ export const UserDetailsByUserId = ({ userId }: UserDetailsByUserIdProps) => {
     );
   }
 
-  return <UserDetailContent user={user} refetch={refetch} />;
+  return <UserDetailContent user={user} refetch={refetch} currentPath={currentPath} onNavigate={onNavigate} />;
 };