feat: Add account creation form and functionality

client/src/components/account-switcher.tsx

@@ -1,6 +1,5 @@
-import * as React from "react"
-import { ChevronsUpDown, Plus } from "lucide-react"
-
+import * as React from "react";
+import { ChevronsUpDown, Plus } from "lucide-react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -9,21 +8,81 @@ import {
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from "@/components/ui/sidebar"
-import { useUserData } from "./context/userData"
+} from "@/components/ui/sidebar";
+import { useUserData } from "./context/userData";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
+import { useWebSocket } from "./WebSocketProvidor";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { Button } from "@/components/ui/button";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { toast } from "react-toastify";
+
 export function AccountSwitcher() {
-  const { accounts } = useUserData(); 
+  const { accounts, setAccounts } = useUserData();
   const { isMobile } = useSidebar();
   const [activeAccount, setActiveAccount] = React.useState(accounts[0]);
+  const [open, setOpen] = React.useState(false);
+
+
+  const { socket, isReady } = useWebSocket();
+
+  const formSchema = z.object({
+    Type: z.string().min(1, "Account type is required"),
+  });
+
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      Type: "",
+    },
+  });
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    try {
+      console.log(values);
+
+      if (socket && isReady) {
+        socket.send("createAccount", {
+          Type: values.Type,
+        });
+
+        socket.onMessage((msg) => {
+          const response = JSON.parse(msg);
+
+          if (response.account) {
+
+                          setOpen(false)
+            setAccounts((prevAccounts) => [
+              ...prevAccounts,
+              { ...response.account, Type: values.Type },
+
+            ]);
+
+          }
+
+          if (response.Error) {
+            toast.error(response.Error);
+          }
+        });
+      }
+    } catch (error) {
+      console.error("Form submission error", error);
+      toast.error("Failed to submit the form. Please try again.");
+    }
+  }
 
   return (
     <SidebarMenu>
+    <Dialog  open={open} onOpenChange={setOpen}>
       <SidebarMenuItem>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -32,8 +91,8 @@ export function AccountSwitcher() {
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
               <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-semibold">{activeAccount?.AccountID}</span>
-                            </div>
+                <span className="truncate font-semibold">{activeAccount?.Type}</span>
+              </div>
               <ChevronsUpDown className="ml-auto" />
             </SidebarMenuButton>
           </DropdownMenuTrigger>
@@ -52,7 +111,7 @@ export function AccountSwitcher() {
                 onClick={() => setActiveAccount(account)}
                 className="gap-2 p-2"
               >
-                {account.AccountID}
+                {account.Type}
                 <DropdownMenuShortcut>⌘{accounts.indexOf(account) + 1}</DropdownMenuShortcut>
               </DropdownMenuItem>
             ))}
@@ -61,11 +120,44 @@ export function AccountSwitcher() {
               <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 account</div>
+              <DialogTrigger>Add account</DialogTrigger>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
       </SidebarMenuItem>
+
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Add New Account</DialogTitle>
+            <DialogDescription>
+              <Form {...form}>
+                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+                  <FormField
+                    control={form.control}
+                    name="Type"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Account Type</FormLabel>
+                        <FormControl>
+                          <Input placeholder="Account Type" type="text" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                <DialogFooter>
+                  <Button variant="default" className="mt-5" type="submit">
+                    Add!
+                  </Button>
+
+                </DialogFooter>
+                  </form>
+              </Form>
+            </DialogDescription>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
     </SidebarMenu>
   );
 }
+

client/src/components/context/userData.tsx

@@ -14,6 +14,7 @@ interface Account {
 			UserID:         string,
 			AccountID:      string,
 			AccountBalance: number,
+            Type: string,
 
 }
 interface Transaction{

client/src/components/ui/addAccount.tsx

@@ -0,0 +1,29 @@
+import { Button } from './button'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from './dialog'
+
+export const addAccount = (props : {}) => {
+    return (
+        <div>
+
+<Dialog>
+
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Are you absolutely sure?</DialogTitle>
+      <DialogDescription>
+        This action cannot be undone. This will permanently delete your account
+        and remove your data from our servers. <br/>
+            <Button variant="destructive" className="mt-5" >
+
+
+  Im Sure!
+  </Button>
+
+      </DialogDescription>
+    </DialogHeader>
+  </DialogContent>
+</Dialog>
+
+        </div>
+    )
+}

client/src/components/ui/button.tsx

@@ -13,7 +13,7 @@ const buttonVariants = cva(
           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
         destructive:
           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
+               outline:
           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",