feat: final fixes

src/main/frontend/package.json

@@ -15,7 +15,9 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
@@ -26,6 +28,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.1",
     "react-router-dom": "^6.27.0",
+    "recharts": "^2.13.3",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"

src/main/frontend/src/App.tsx

@@ -66,7 +66,7 @@ function App() {
                     {accounts.map((account) => (
                         <TableRow key={account.id} onClick={() => {navigate(`/account/${account.id}`)}} className={"cursor-pointer"}>
                             <TableCell>{account.id}</TableCell>
-                            <TableCell>{account.userType}</TableCell>
+                            <TableCell>{account.isAdmin}</TableCell>
                             <TableCell>{account.username}</TableCell>
                             <TableCell>{account.password}</TableCell>
                             <TableCell>{account.email}</TableCell>

src/main/frontend/src/components/CreateAccountDialog.tsx

@@ -0,0 +1,134 @@
+import {
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog.tsx";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@/components/ui/form.tsx";
+import {Button} from "@/components/ui/button.tsx";
+import {z} from "zod";
+import {zodResolver} from "@hookform/resolvers/zod";
+import {useForm} from "react-hook-form";
+import {Input} from "@/components/ui/input.tsx";
+
+const formSchema = z.object({
+    firstName: z.string(),
+    lastName: z.string(),
+    email: z.string().email(),
+    password: z.string(),
+});
+
+function CreateAccountDialog({toggle}: { toggle?: () => void }) {
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            firstName: "",
+            lastName: "",
+            email: "",
+            password: "",
+        },
+    });
+
+    const onSubmit = (data: z.infer<typeof formSchema>) => {
+        fetch("/api/account", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+                email: data.email,
+                password: data.password,
+                username: `${data.firstName} ${data.lastName}`,
+            }),
+        }).then((response) => {
+            if (response.ok) {
+                form.reset();
+                if (toggle) {
+                    toggle();
+                }
+            } else {
+                console.error(response);
+            }
+        }).catch((error) => console.error(error));
+    };
+
+
+    return (
+                    <Form {...form}>
+                        <form onSubmit={form.handleSubmit(onSubmit)}>
+                            <DialogHeader className={"mb-5"}>
+                                <DialogTitle>New Account</DialogTitle>
+                                <DialogDescription>
+                                    Create a new account by filling out the form below.
+                                </DialogDescription>
+                            </DialogHeader>
+                            <FormField
+                                control={form.control}
+                                name="firstName"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>First Name</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="Joe" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="lastName"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Last Name</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="Smith" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="email"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Email</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="password"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Password</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                            <DialogFooter className={"mt-2"}>
+                                <Button>Submit</Button>
+                                <Button type={"button"} variant="outline" onClick={toggle}>Cancel</Button>
+                            </DialogFooter>
+                        </form>
+                    </Form>
+    )
+}
+
+export default CreateAccountDialog;

src/main/frontend/src/components/CreateLoanDialog.tsx

@@ -1,15 +1,12 @@
 import {
-    Dialog,
     DialogClose,
-    DialogContent,
     DialogDescription,
     DialogFooter,
     DialogHeader,
     DialogTitle,
-    DialogTrigger
 } from "@/components/ui/dialog.tsx";
 import {Button} from "@/components/ui/button.tsx";
-import {CalendarIcon, FilePlus2} from "lucide-react";
+import {CalendarIcon} from "lucide-react";
 import {Form, FormControl, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form.tsx";
 import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover.tsx";
 import {cn} from "@/lib/utils.ts";
@@ -31,7 +28,7 @@ const formSchema = z.object({
     date: z.date(),
 });
 
-function CreateLoanDialog() {
+function CreateLoanDialog({ toggle, submit }: { toggle?: () => void, submit?: () => void }) {
     const [accountPopOverOpen, setAccountPopOverOpen] = useState(false);
 
     const form = useForm<z.infer<typeof formSchema>>({
@@ -65,7 +62,7 @@ function CreateLoanDialog() {
                 throw new Error("Failed to create loan");
             }
         }).then(() => {
-        //  Do something
+            submit && submit();
         }).catch((error) => {
             console.error(error);
         });
@@ -80,19 +77,14 @@ function CreateLoanDialog() {
     }, []);
 
     return (
-        <Dialog>
-            <DialogTrigger asChild>
-                <Button variant={"outline"}>Create Loan<FilePlus2/></Button>
-            </DialogTrigger>
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle>New Loan</DialogTitle>
-                    <DialogDescription>
-                        Create a new loan by filling out the form below.
-                    </DialogDescription>
-                </DialogHeader>
                 <Form {...form}>
                     <form onSubmit={form.handleSubmit(onSubmit)}>
+                        <DialogHeader className={"mb-5"}>
+                            <DialogTitle>New Loan</DialogTitle>
+                            <DialogDescription>
+                                Create a new loan by filling out the form below.
+                            </DialogDescription>
+                        </DialogHeader>
                         <FormField
                             control={form.control}
                             name={"id"}
@@ -123,7 +115,7 @@ function CreateLoanDialog() {
                                                     placeholder="Search for an account..."
                                                     className="w-full"
                                                 />
-                                                <Button className=" my-1 mx-1" variant="outline" size={"sm"}>
+                                                <Button className=" my-1 mx-1" variant="outline" size={"sm"} onClick={toggle}>
                                                     Create Account
                                                 </Button>
                                                 <CommandList>
@@ -244,8 +236,6 @@ function CreateLoanDialog() {
                         </DialogFooter>
                     </form>
                 </Form>
-            </DialogContent>
-        </Dialog>
     )
 }
 

src/main/frontend/src/components/DialogSwitcher.tsx

@@ -0,0 +1,32 @@
+import React, {cloneElement} from "react";
+import {
+    Dialog,
+    DialogContent,
+    DialogTrigger
+} from "@/components/ui/dialog.tsx";
+import {Button} from "@/components/ui/button.tsx";
+import {FilePlus2} from "lucide-react";
+
+
+function DialogSwitcher({ children }: { children: React.ReactNode }) {
+    const [content, setContent] = React.useState(true);
+
+    const toggleContent = () => {
+        setContent(prev => !prev);
+    };
+
+    const validChildren = React.Children.toArray(children).filter(React.isValidElement);
+
+    return (
+        <Dialog>
+            <DialogTrigger asChild>
+                <Button variant={"outline"}>Create Loan<FilePlus2/></Button>
+            </DialogTrigger>
+            <DialogContent>
+                {content ? cloneElement(validChildren[0] as React.ReactElement, { toggle: toggleContent }) : cloneElement(validChildren[1] as React.ReactElement, { toggle: toggleContent })}
+            </DialogContent>
+        </Dialog>
+    )
+}
+
+export default DialogSwitcher;