feat: Add new secure index page and account switcher functionality

\

@@ -0,0 +1,44 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb"
+import { Separator } from "@/components/ui/separator"
+import {
+  SidebarInset,
+  SidebarTrigger,
+} from "@/components/ui/sidebar"
+
+export default function Index() {
+  return (
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                           </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+  )
+}

client/src/components/team-switcher.tsx → client/src/components/account-switcher.tsx

@@ -16,18 +16,11 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from "@/components/ui/sidebar"
-
-export function TeamSwitcher({
-  teams,
-}: {
-  teams: {
-    name: string
-    logo: React.ElementType
-    plan: string
-  }[]
-}) {
-  const { isMobile } = useSidebar()
-  const [activeTeam, setActiveTeam] = React.useState(teams[0])
+import { useUserData } from "./context/userData"
+export function AccountSwitcher() {
+  const { accounts } = useUserData(); 
+  const { isMobile } = useSidebar();
+  const [activeAccount, setActiveAccount] = React.useState(accounts[0]);
 
   return (
     <SidebarMenu>
@@ -38,15 +31,9 @@ export function TeamSwitcher({
               size="lg"
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
-              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-                <activeTeam.logo className="size-4" />
-              </div>
               <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-semibold">
-                  {activeTeam.name}
-                </span>
-                <span className="truncate text-xs">{activeTeam.plan}</span>
-              </div>
+                <span className="truncate font-semibold">{activeAccount?.AccountID}</span>
+                            </div>
               <ChevronsUpDown className="ml-auto" />
             </SidebarMenuButton>
           </DropdownMenuTrigger>
@@ -57,31 +44,28 @@ export function TeamSwitcher({
             sideOffset={4}
           >
             <DropdownMenuLabel className="text-xs text-muted-foreground">
-              Teams
+              Accounts
             </DropdownMenuLabel>
-            {teams.map((team, index) => (
+            {accounts.map((account) => (
               <DropdownMenuItem
-                key={team.name}
-                onClick={() => setActiveTeam(team)}
+                key={account.AccountID}
+                onClick={() => setActiveAccount(account)}
                 className="gap-2 p-2"
               >
-                <div className="flex size-6 items-center justify-center rounded-sm border">
-                  <team.logo className="size-4 shrink-0" />
-                </div>
-                {team.name}
-                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+                {account.AccountID}
+                <DropdownMenuShortcut>⌘{accounts.indexOf(account) + 1}</DropdownMenuShortcut>
               </DropdownMenuItem>
             ))}
             <DropdownMenuSeparator />
             <DropdownMenuItem className="gap-2 p-2">
               <div className="flex size-6 items-center justify-center rounded-md border bg-background">
                 <Plus className="size-4" />
               </div>
-              <div className="font-medium text-muted-foreground">Add team</div>
+              <div className="font-medium text-muted-foreground">Add account</div>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
       </SidebarMenuItem>
     </SidebarMenu>
-  )
+  );
 }

client/src/components/app-sidebar.tsx

@@ -12,7 +12,6 @@ import {
 import { NavMain } from "@/components/nav-main"
 import { NavProjects } from "@/components/nav-projects"
 import { NavUser } from "@/components/nav-user"
-import { TeamSwitcher } from "@/components/team-switcher"
 import {
   Sidebar,
   SidebarContent,
@@ -21,25 +20,10 @@ import {
   SidebarRail,
 } from "@/components/ui/sidebar"
 import { useUserData } from "./context/userData"
+import { AccountSwitcher } from "./account-switcher"
 
 const data = {
-   teams: [
-    {
-      name: "Acme Inc",
-      logo: GalleryVerticalEnd,
-      plan: "Enterprise",
-    },
-    {
-      name: "Acme Corp.",
-      logo: AudioWaveform,
-      plan: "Startup",
-    },
-    {
-      name: "Evil Corp.",
-      logo: Command,
-      plan: "Free",
-    },
-  ],
+
   navMain: [
     {
       title: "dashboard",
@@ -71,12 +55,13 @@ const data = {
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
 
-   const {userData }= useUserData();
+ const {  userData } = useUserData();
 
   return (
     <Sidebar collapsible="icon" {...props}>
       <SidebarHeader>
-        <TeamSwitcher teams={data.teams} />
+        <AccountSwitcher   />
+
       </SidebarHeader>
       <SidebarContent>
         <NavMain items={data.navMain} />

client/src/components/context/userData.tsx

@@ -5,14 +5,33 @@ import { useWebSocket } from "@/components/WebSocketProvidor";
 interface UserData {
   ID: string;
   FirstName: string;
-  LastName: string;
+LastName: string;
   Email: string;
   Country: string;
 }
+interface Account {
+ 	ID:             string,
+			UserID:         string,
+			AccountID:      string,
+			AccountBalance: number,
 
+}
+interface Transaction{
+    ID: string,
+			UserID:      string,
+			AccountID:  string, 
+			Amount:      number,
+			IsRecurring: boolean,
+
+
+}
 interface UserDataContextType {
   userData: UserData;
+  accounts: Account[];
+  transactions: Transaction[];
   setUserData: React.Dispatch<React.SetStateAction<UserData>>;
+  setAccounts: React.Dispatch<React.SetStateAction<Account[]>>;
+  setTransactions: React.Dispatch<React.SetStateAction<Transaction[]>>;
 }
 
 const UserDataContext = createContext<UserDataContextType | null>(null);
@@ -34,21 +53,47 @@ export const UserDataProvider = ({ children }: { children: React.ReactNode }) =>
     Email: "",
     Country: "",
   });
+
+const [accounts, setAccounts] = useState<Account[]>([]); 
+  const [transactions, setTransactions] = useState<Transaction[]>([]); 
+
+
+
   useEffect(()=>{
 
          if(socket && isReady){
-               socket.send( "getUser" );
+
+                socket.send("getUser");
+                socket.send("getAccounts")
 
         socket.onMessage((msg)=>{
+
     const response =  JSON.parse(msg)
+
     if (response.userData) {
 
      setUserData(response.userData)
     }
+    if (response.accounts){
+        setAccounts(response.accounts)
+                        socket.send("getTransactions")
+
+    if (response.transactions){
+        setTransactions(response.transactions)
+    }
+    }
     })}},[socket, isReady]) 
   return (
-    <UserDataContext.Provider value={{ userData, setUserData }}>
-      {children}
+    <UserDataContext.Provider
+      value={{
+        userData,
+        setUserData,
+        accounts,
+        setAccounts,
+        transactions,
+        setTransactions,
+      }}
+    >      {children}
     </UserDataContext.Provider>
   );
 };

client/src/pages/(secure)/index.tsx

@@ -9,7 +9,6 @@ import {
 import { Separator } from "@/components/ui/separator"
 import {
   SidebarInset,
-  SidebarProvider,
   SidebarTrigger,
 } from "@/components/ui/sidebar"
 
@@ -22,14 +21,9 @@ export default function Index() {
             <Separator orientation="vertical" className="mr-2 h-4" />
             <Breadcrumb>
               <BreadcrumbList>
-                <BreadcrumbItem className="hidden md:block">
-                  <BreadcrumbLink href="#">
-                    Building Your Application
-                  </BreadcrumbLink>
-                </BreadcrumbItem>
-                <BreadcrumbSeparator className="hidden md:block" />
+                             <BreadcrumbSeparator className="hidden md:block" />
                 <BreadcrumbItem>
-                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                  <BreadcrumbPage>Dashboard</BreadcrumbPage>
                 </BreadcrumbItem>
               </BreadcrumbList>
             </Breadcrumb>

handlers/Accounts.go

@@ -71,8 +71,7 @@ func GetAccounts(ws *websocket.Conn, data json.RawMessage, userID string) {
 
 	// Package the response
 	response := map[string]interface{}{
-		"Success":  "Fetched Accounts",
-		"Accounts": accountData,
+		"accounts": accountData,
 	}
 
 	responseData, _ := json.Marshal(response)

handlers/Transactions.go

@@ -247,7 +247,7 @@ func GetTransactions(ws *websocket.Conn, data json.RawMessage, userID string) {
 	}
 
 	response := map[string]interface{}{
-		"Success": transactionData,
+		"transactions": transactionData,
 	}
 
 	responseData, _ := json.Marshal(response)