@@ -16,7 +13,7 @@ const Home = () => {
diff --git a/app/global-error.tsx b/app/global-error.tsx
new file mode 100644
index 0000000..9bda5fe
--- /dev/null
+++ b/app/global-error.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import NextError from "next/error";
+import { useEffect } from "react";
+
+export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
+ useEffect(() => {
+ Sentry.captureException(error);
+ }, [error]);
+
+ return (
+
+
+ {/* `NextError` is the default Next.js error page component. Its type
+ definition requires a `statusCode` prop. However, since the App Router
+ does not expose status codes for errors, we simply pass 0 to render a
+ generic error message. */}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/components/AuthForm.tsx b/components/AuthForm.tsx
new file mode 100644
index 0000000..7fa0019
--- /dev/null
+++ b/components/AuthForm.tsx
@@ -0,0 +1,207 @@
+"use client";
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import {
+ Form,
+ FormControl,
+ FormDescription,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { authFormSchema } from "@/lib/utils";
+import CustomInput from "./CustomInput";
+import { Loader2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { getLoggedInUser, signIn, signUp } from "@/lib/actions/user.actions";
+
+interface propsType {
+ type: string;
+}
+
+const AuthForm = ({ type }: propsType) => {
+ const router = useRouter();
+ const [user, setUser] = useState(null);
+ const [isLoading, setIsLoading] = useState(false);
+
+ const formSchema = authFormSchema(type);
+
+ const form = useForm
>({
+ resolver: zodResolver(formSchema),
+ defaultValues: {
+ email: "",
+ password: "",
+ },
+ });
+
+ // 2. Define a submit handler.
+ const onSubmit = async (values: z.infer) => {
+ setIsLoading(true);
+ try {
+ // Sign up with Appwrite and create plaid token
+ if (type === "sign-up") {
+ const newUser = await signUp(values);
+ setUser(newUser);
+ }
+
+ if (type === "sign-in") {
+ const response = await signIn({
+ email: values.email,
+ password: values.password,
+ });
+ if (response) router.push("/");
+ }
+ } catch (error) {
+ console.log(error);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ return (
+
+
+ {user ? (
+ {/* PlaidLink */}
+ ) : (
+ <>
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default AuthForm;
diff --git a/components/BankCard.tsx b/components/BankCard.tsx
index 5d92c08..ff8d046 100644
--- a/components/BankCard.tsx
+++ b/components/BankCard.tsx
@@ -12,7 +12,7 @@ const BankCard = ({
-
{account.name}
+
{userName}
{formatAmount(account.currentBalance)}
diff --git a/components/CustomInput.tsx b/components/CustomInput.tsx
new file mode 100644
index 0000000..f58a827
--- /dev/null
+++ b/components/CustomInput.tsx
@@ -0,0 +1,42 @@
+import { FormControl, FormField, FormLabel, FormMessage } from "./ui/form";
+import { Input } from "./ui/input";
+
+import { Control, FieldPath } from "react-hook-form";
+import { z } from "zod";
+import { authFormSchema } from "@/lib/utils";
+
+const formSchema = authFormSchema("sign-up");
+
+interface CustomInput {
+ control: Control
>;
+ name: FieldPath>;
+ label: string;
+ placeholder: string;
+}
+
+const CustomInput = ({ control, name, label, placeholder }: CustomInput) => {
+ return (
+ (
+
+ )}
+ />
+ );
+};
+
+export default CustomInput;
diff --git a/components/Footer.tsx b/components/Footer.tsx
new file mode 100644
index 0000000..af73db2
--- /dev/null
+++ b/components/Footer.tsx
@@ -0,0 +1,37 @@
+import { logoutAccount } from "@/lib/actions/user.actions";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import React from "react";
+
+const Footer = ({ user, type = "desktop" }: FooterProps) => {
+ const router = useRouter();
+
+ const handleLogOut = async () => {
+ const loggedOut = await logoutAccount();
+
+ if (loggedOut) router.push("/sign-in");
+ };
+ return (
+
+ );
+};
+
+export default Footer;
diff --git a/components/MobileNav.tsx b/components/MobileNav.tsx
index fc9690e..5d0693b 100644
--- a/components/MobileNav.tsx
+++ b/components/MobileNav.tsx
@@ -13,6 +13,7 @@ import Image from "next/image";
import Link from "next/link";
import { cn } from "@/lib/utils";
import { sidebarLinks } from "@/constants";
+import Footer from "./Footer";
const MobileNav = ({ user }: MobileNavProps) => {
const pathname = usePathname();
@@ -85,7 +86,7 @@ const MobileNav = ({ user }: MobileNavProps) => {
- {/* */}
+
diff --git a/components/RightSidebar.tsx b/components/RightSidebar.tsx
index 0054b6f..a4442cc 100644
--- a/components/RightSidebar.tsx
+++ b/components/RightSidebar.tsx
@@ -10,13 +10,11 @@ const RightSidebar = ({ user, transactions, banks }: RightSidebarProps) => {
- {user.firstName[0]}
+ {user.name[0]}
-
- {user.firstName} {user.lastName}
-
+
{user.name}
{user.email}
@@ -37,7 +35,7 @@ const RightSidebar = ({ user, transactions, banks }: RightSidebarProps) => {
@@ -46,7 +44,7 @@ const RightSidebar = ({ user, transactions, banks }: RightSidebarProps) => {