fix: display modal url

src/app/(light)/dashboard/components/auth-component/auth-dropdown-profiles-list.tsx

@@ -1,12 +1,14 @@
 'use client';
 import { useSession } from 'next-auth/react';
-import { useState } from 'react';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/navigation';
 
 import GTWAvatar from '@/components/gtw-avatar/gtw-avatar';
 import MenuItemLink from '@/components/menu-item-link/menu-item-link';
 import routes from '@/constants/routes';
 import useOrganization from '@/hooks/use-organization';
 import { auth } from '@/locale/en/auth';
+import { useToggle } from '@react-hookz/web';
 
 import AddIcon from '@mui/icons-material/Add';
 import {
@@ -20,17 +22,30 @@ import {
   alpha,
 } from '@mui/material';
 
-import CreateOrgDialog from '../create-layout-dialog';
+const CreateOrgDialog = dynamic(() => import('../create-layout-dialog'), {
+  ssr: false,
+});
 
 type Props = {
   onClose: () => void;
 };
 
 export default function AuthDropdownProfilesList({ onClose }: Props) {
+  const router = useRouter();
   const { data: session } = useSession();
 
   const { isOrg, organization } = useOrganization();
-  const [isCreateOrgDialog, setCreateOrgDialog] = useState(false);
+  const [isCreateOrgDialog, toggleDialog] = useToggle(false);
+
+  const toggleCreateOrgDialog = (value: boolean) => {
+    if (!value) {
+      toggleDialog(value);
+      router.push('');
+    } else {
+      router.push('#create-org');
+      toggleDialog(value);
+    }
+  };
 
   if (!session) return null;
 
@@ -47,7 +62,10 @@ export default function AuthDropdownProfilesList({ onClose }: Props) {
 
   return (
     <>
-      <CreateOrgDialog open={isCreateOrgDialog} setOpen={setCreateOrgDialog} />
+      <CreateOrgDialog
+        open={isCreateOrgDialog}
+        onClose={() => toggleCreateOrgDialog(false)}
+      />
       {accessess?.map(({ organization }) => (
         <MenuItemLink
           href={routes.dashboard.org.home(organization.gatewayId)}
@@ -93,7 +111,7 @@ export default function AuthDropdownProfilesList({ onClose }: Props) {
       )}
       <MenuItem
         onClick={() => {
-          setCreateOrgDialog(true);
+          toggleCreateOrgDialog(true);
         }}
       >
         <ListItemIcon>

src/app/(light)/dashboard/components/create-layout-dialog/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useSession } from 'next-auth/react';
-import { Dispatch, SetStateAction, useState } from 'react';
+import { useState } from 'react';
 
 import { LoadingButton } from '@/components/buttons/loading-button/loading-button';
 import AvatarPicker from '@/components/form/avatar-picker/avatar-picker';
@@ -33,15 +33,16 @@ import CreateOrgLayout from './create-org-layout';
 
 type Props = {
   open: boolean;
-  setOpen: Dispatch<SetStateAction<boolean>>;
+  onClose: () => void;
+  // setOpen: Dispatch<SetStateAction<boolean>>;
 };
 
 type UploadImageProps = {
   profilePictureUrl: Blob | null;
   org_id: string;
 };
 
-export default function CreateOrgDialog({ open, setOpen }: Props) {
+export default function CreateOrgDialog({ open, onClose }: Props) {
   const { update } = useSession();
   const { enqueueSnackbar } = useSnackbar();
   const [image, setImage] = useState<Blob | null>(null);
@@ -103,7 +104,7 @@ export default function CreateOrgDialog({ open, setOpen }: Props) {
     if (avaibility !== 'success') return;
     try {
       await createOrg.mutateAsync(data);
-      setOpen(false);
+      onClose();
       enqueueSnackbar(org.success, {
         variant: 'success',
       });
@@ -124,7 +125,7 @@ export default function CreateOrgDialog({ open, setOpen }: Props) {
     <Dialog fullScreen open={open}>
       <CreateOrgLayout
         closeButonProps={{
-          onClick: () => setOpen(false),
+          onClick: () => onClose(),
         }}
       >
         <Stack

src/app/(light)/dashboard/components/wallet/transactions-section/transactions-table.tsx

@@ -1,14 +1,13 @@
 'use client';
 
-import { useRouter } from 'next-nprogress-bar';
+import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 
 import {
   defaultGridConfiguration,
   defaultGridCustomization,
 } from '@/components/data-grid/grid-default';
 import { DATE_FORMAT } from '@/constants/date';
-import routes from '@/constants/routes';
 import { transaction } from '@/locale/en/transaction';
 import { numberToMoneyString } from '@/utils/money';
 import { useToggle } from '@react-hookz/web';
@@ -83,7 +82,7 @@ export default function TransactionsTable({
   const toggleTransactionModal = (value: boolean) => {
     if (!value) {
       toggleTransaction(value);
-      router.push(routes.dashboard.user.wallet, { scroll: false });
+      router.push('', { scroll: false });
     } else {
       toggleTransaction(value);
       router.push('#transaction', { scroll: false });

src/app/(light)/dashboard/user/home/components/home-structure.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { useState } from 'react';
+import { useRouter } from 'next/navigation';
 
 import GatewayDarkBanner from '@/components/icons/gateway-dark-banner';
 import { home } from '@/locale/en/home';
+import { useToggle } from '@react-hookz/web';
 
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { Box } from '@mui/material';
@@ -17,10 +18,24 @@ type Props = {
 };
 
 export default function HomeStructure({ username }: Props) {
-  const [isCreateOrgDialog, setCreateOrgDialog] = useState(false);
+  const [isCreateOrgDialog, toggleDialog] = useToggle(false);
+  const router = useRouter();
+
+  const toggleCreateOrgDialog = (value: boolean) => {
+    if (!value) {
+      toggleDialog(value);
+      router.push('');
+    } else {
+      router.push('#create-org');
+      toggleDialog(value);
+    }
+  };
   return (
     <>
-      <CreateOrgDialog open={isCreateOrgDialog} setOpen={setCreateOrgDialog} />
+      <CreateOrgDialog
+        open={isCreateOrgDialog}
+        onClose={() => toggleCreateOrgDialog(false)}
+      />
       <Typography variant="h3" marginBottom={4} gutterBottom>
         {home.greeting} {username}
       </Typography>
@@ -96,7 +111,7 @@ export default function HomeStructure({ username }: Props) {
             }}
             onClick={() => {
               if (details.title == home.sub_banner[0].title) {
-                setCreateOrgDialog(true);
+                toggleCreateOrgDialog(true);
               }
             }}
           >

src/constants/routes.js

@@ -1,5 +1,5 @@
 const dashboardUser = '/dashboard/user';
-const dashboardOrg = 'dashboard/org';
+const dashboardOrg = '/dashboard/org';
 const explorer = '/explorer';
 const routes = {
   home: '/',