Merge pull request #316 from shawakash/account_ui

fix: the sidenav bar select tab and added new layouts to /account/[id]

apps/web/app/account/[id]/page.tsx

@@ -0,0 +1,4 @@
+export default function Page({ params }: { params: { id: string } }) {
+    console.log(params)
+    return <div>From /: {params.id}</div>
+}

apps/web/app/account/[id]/privatekey/page.tsx

@@ -0,0 +1,5 @@
+export default function Page({ params }: { params: { id: string } }) {
+    console.log(params);
+    //TODO: FETCH THE TXN DATA FOR THIS FOR THIS ACCOUNT
+    return <div>From Private key: {params.id}</div>
+}

apps/web/app/account/[id]/remove/page.tsx

@@ -0,0 +1,5 @@
+export default function Page({ params }: { params: { id: string } }) {
+    console.log(params);
+    //TODO: FETCH THE TXN DATA FOR THIS FOR THIS ACCOUNT
+    return <div>From remove account: {params.id}</div>
+}

apps/web/app/account/[id]/secretPhrase/page.tsx

@@ -0,0 +1,5 @@
+export default function Page({ params }: { params: { id: string } }) {
+    console.log(params);
+    //TODO: FETCH THE TXN DATA FOR THIS FOR THIS ACCOUNT
+    return <div>From secret phrase: {params.id}</div>
+}

apps/web/app/account/[id]/statements/page.tsx

@@ -0,0 +1,5 @@
+export default function Page({ params }: { params: { id: string } }) {
+    console.log(params);
+    //TODO: FETCH THE TXN DATA FOR THIS FOR THIS ACCOUNT
+    return <div>From statements: {params.id}</div>
+}

apps/web/app/account/[id]/update/page.tsx

@@ -0,0 +1,4 @@
+export default function Page({ params }: { params: { id: string } }) {
+    console.log(params)
+    return <div>My Post: {params.id}</div>
+}

apps/web/app/account/components/accountLayout.tsx

@@ -8,13 +8,14 @@ import {
     ResizablePanelGroup,
 } from "@/components/ui/resizable";
 import { cn } from "@/lib/utils";
-import { Archive, ArchiveX, Inbox, Send, Trash2, File, Wallet } from "lucide-react";
-import { LinksProps, Sidenav } from "./sidebar";
+
+import { LinksProps, Sidenav } from "@/app/account/components/sidebar";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Separator } from "@/components/ui/separator";
 import { AccountSwitcher } from "@/app/account/components/account-switcher";
 import { AccountType } from "@paybox/common";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
+import { commonNavLinks, getNavLinks } from "./navLinks";
 
 interface AccountLayoutProps {
     defaultLayout: number[] | undefined;
@@ -24,50 +25,7 @@ interface AccountLayoutProps {
     accounts: AccountType[]
 }
 
-const sidenavLinks = [
-    {
-        title: "Inbox",
-        label: "128",
-        icon: Inbox,
-        variant: "default",
-        link: "/account/create",
-    },
-    {
-        title: "Drafts",
-        label: "9",
-        icon: File,
-        variant: "ghost",
-        link: "/account/create",
-    },
-    {
-        title: "Sent",
-        label: "",
-        icon: Send,
-        variant: "ghost",
-        link: "/account/create",
-    },
-    {
-        title: "Junk",
-        label: "23",
-        icon: ArchiveX,
-        variant: "ghost",
-        link: "/account/create",
-    },
-    {
-        title: "Trash",
-        label: "",
-        icon: Trash2,
-        variant: "ghost",
-        link: "/account/create",
-    },
-    {
-        title: "Archive",
-        label: "",
-        icon: Archive,
-        variant: "ghost",
-        link: "/account/create",
-    },
-]
+
 
 export function AccountLayout({
     defaultLayout = [100, 480],
@@ -83,7 +41,9 @@ export function AccountLayout({
         accounts[0].id
     );
 
+    const path = usePathname()
     const router = useRouter();
+    const [selectedTab, setSelectedTab] = React.useState<string>(path.split('/')[path.split('/').length - 1]);
 
     useEffect(() => {
         const checkScreenWidth = () => {
@@ -100,8 +60,20 @@ export function AccountLayout({
     }, []);
 
     useEffect(() => {
-        router.push(`/account?id=${selectedAccount}`);
-    }, [selectedAccount]);
+        setSelectedTab(path.split("/")[3] || "dashboard")
+        router.push(`/account/${selectedAccount}/${path.split("/")[3] || ""}`)
+    }, [selectedAccount])
+
+    useEffect(() => {
+        if (path.split("/").length === 2) {
+            setSelectedTab(path.split("/")[2] || "");
+            router.push(path)
+        }
+        if (path.split("/").length === 3) {
+            setSelectedTab(path.split("/")[3] || "dashboard");
+            router.push(path)
+        }
+    }, [path]);
 
     return (
         <TooltipProvider delayDuration={0}>
@@ -127,8 +99,8 @@ export function AccountLayout({
                     defaultSize={defaultLayout[0]}
                     collapsedSize={navCollapsedSize}
                     collapsible={true}
-                    minSize={isMobile ? 0 : 14}
-                    maxSize={isMobile ? 14 : 20}
+                    minSize={isMobile ? 0 : 18}
+                    maxSize={isMobile ? 18 : 25}
                     onCollapse={() => {
                         setIsCollapsed(true);
                         document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(
@@ -161,12 +133,16 @@ export function AccountLayout({
                     <Separator />
                     <Sidenav
                         isCollapsed={isCollapsed}
-                        links={sidenavLinks as LinksProps[]}
+                        links={getNavLinks(selectedAccount) as LinksProps[]}
+                        selectedTab={selectedTab}
+                        setSelectedTab={setSelectedTab}
                     />
                     <Separator />
                     <Sidenav
                         isCollapsed={isCollapsed}
-                        links={sidenavLinks as LinksProps[]}
+                        links={commonNavLinks as LinksProps[]}
+                        selectedTab={selectedTab}
+                        setSelectedTab={setSelectedTab}
                     />
                 </ResizablePanel>
                 <ResizableHandle withHandle />

apps/web/app/account/components/navLinks.tsx

@@ -0,0 +1,107 @@
+
+import {
+    Archive,
+    ArchiveX,
+    Inbox,
+    Send,
+    Trash2,
+    File,
+    Wallet,
+    LayoutDashboard,
+    Lock,
+    VenetianMask,
+    Bitcoin,
+    PencilLine,
+    FilePlus,
+    FilePlus2Icon,
+    GanttChart
+} from "lucide-react";
+
+export const commonNavLinks = [
+    {
+        id: "",
+        title: "Manage Accounts",
+        label: "",
+        icon: GanttChart,
+        variant: "ghost",
+        link: "/account",
+    },
+    {
+        id: "create",
+        title: "Create Account",
+        label: "128",
+        icon: FilePlus2Icon,
+        variant: "ghost",
+        link: "/account/create",
+    },
+    {
+        id: "importSecretPhrase",
+        title: "Import Secret Recovery",
+        label: "9",
+        icon: FilePlus,
+        variant: "ghost",
+        link: "/account/importSecretPhrase",
+    },
+    {
+        id: "importPrivate",
+        title: "Import From Private-Key",
+        label: "",
+        icon: Lock,
+        variant: "ghost",
+        link: "importPrivate",
+    },
+
+]
+
+export const getNavLinks = (id: string) => {
+    return [
+        {
+            id: "dashboard",
+            title: "Dashboard",
+            label: "128",
+            icon: LayoutDashboard,
+            variant: "ghost",
+            link: `/account/${id}/#`,
+        },
+        {
+            id: "statements",
+            title: "Statements",
+            label: "9",
+            icon: Bitcoin,
+            variant: "ghost",
+            link: `/account/${id}/statements`,
+        },
+        {
+            id: "privatekey",
+            title: "Private-Key",
+            label: "",
+            icon: Lock,
+            variant: "ghost",
+            link: `/account/${id}/privatekey`,
+        },
+        {
+            id: "secretPhrase",
+            title: "Secret",
+            label: "23",
+            icon: VenetianMask,
+            variant: "ghost",
+            link: `/account/${id}/secretPhrase`,
+        },
+        {
+            id: "update",
+            title: "Update",
+            label: "",
+            icon: PencilLine,
+            variant: "ghost",
+            link: `/account/${id}/update`,
+        },
+        {
+            id: "remove",
+            title: "Remove",
+            label: "",
+            icon: Trash2,
+            variant: "ghost",
+            link: `/account/${id}/remove`,
+        },
+    ]
+}

apps/web/app/account/components/sidebar.tsx

@@ -10,8 +10,12 @@ import {
     TooltipContent,
     TooltipTrigger,
 } from "@/components/ui/tooltip"
+import React, { use } from "react"
+import { usePathname, useSearchParams, useParams } from 'next/navigation'
+
 
 export interface LinksProps {
+    id: string
     title: string
     label?: string
     icon: LucideIcon
@@ -22,9 +26,11 @@ export interface LinksProps {
 interface NavProps {
     isCollapsed: boolean
     links: LinksProps[]
+    selectedTab: string
+    setSelectedTab: (tab: string) => void
 }
 
-export function Sidenav({ links, isCollapsed }: NavProps) {
+export function Sidenav({ links, isCollapsed, selectedTab, setSelectedTab }: NavProps) {
     return (
         <div
             data-collapsed={isCollapsed}
@@ -36,11 +42,12 @@ export function Sidenav({ links, isCollapsed }: NavProps) {
                         <Tooltip key={index} delayDuration={0}>
                             <TooltipTrigger asChild>
                                 <Link
-                                    href={link.link}
+                                    href={`${link.link}`}
+                                    onClick={() => setSelectedTab(link.id)}
                                     className={cn(
                                         buttonVariants({ variant: link.variant, size: "icon" }),
                                         "h-10 w-10",
-                                        link.variant === "default" &&
+                                        link.id === selectedTab &&
                                         "dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white "
                                     )}
                                 >
@@ -61,9 +68,10 @@ export function Sidenav({ links, isCollapsed }: NavProps) {
                         <Link
                             key={index}
                             href={link.link}
+                            onClick={() => setSelectedTab(link.id)}
                             className={cn(
                                 buttonVariants({ variant: link.variant, size: "sm" }),
-                                link.variant === "default" &&
+                                link.id === selectedTab &&
                                 "dark:bg-muted dark:text-white dark:hover:bg-muted dark:hover:text-white",
                                 "justify-start",
                                 "h-10 flex gap-x-2"

apps/web/app/account/importPrivate/page.tsx

@@ -0,0 +1,4 @@
+export default function Page({ params }: { params: { id: string } }) {
+    console.log(params)
+    return <div>From import Private: {params.id}</div>
+}

apps/web/app/account/importSecretPhrase/page.tsx

@@ -0,0 +1,4 @@
+export default function Page({ params }: { params: { id: string } }) {
+    console.log(params)
+    return <div>From Import Secret: {params.id}</div>
+}

apps/web/app/account/layout.tsx

@@ -37,7 +37,9 @@ const getAccounts = async (jwt: string): Promise<AccountType[] | null> => {
   }
 }
 
-export default async function AccountMainLayout({ children }: AccountLayoutProps) {
+export default async function AccountMainLayout({
+  children,
+}: AccountLayoutProps) {
   const layout = cookies().get("react-resizable-panels:layout");
   const defaultLayout = layout ? JSON.parse(layout.value) : undefined;
 
@@ -48,7 +50,6 @@ export default async function AccountMainLayout({ children }: AccountLayoutProps
 
   //@ts-ignore
   const accounts = await getAccounts(session.user.jwt);
-
 
   return (
     <>