im done for today but wooo we got a lot done

src/components/default/auth/cards/client/profile.tsx

@@ -2,3 +2,9 @@
 import { useAuth } from '@/lib/hooks/context';
 import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
+import {
+  AvatarUpload,
+  ProfileForm,
+  ResetPasswordForm,
+  SignOut,
+} from '@/components/default/auth/forms/client/profile';

src/components/default/auth/forms/client/profile/index.tsx

@@ -0,0 +1,4 @@
+export { AvatarUpload } from './avatar-upload';
+export { ProfileForm } from './profile-form';
+export { ResetPasswordForm } from './reset-password-form';
+export { SignOut } from './sign-out';

src/components/default/auth/forms/client/profile/profile-form.tsx

@@ -0,0 +1,100 @@
+'use client';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useAuth } from '@/lib/hooks/context';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { SubmitButton } from '@/components/default/forms';
+import {
+  CardContent,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+} from '@/components/ui';
+
+const formSchema = z.object({
+  full_name: z.string().min(5, {
+    message: 'Full name is required & must be at least 5 characters.',
+  }),
+  email: z.string().email(),
+});
+
+type ProfileFormProps = {
+  onSubmit: (values: z.infer<typeof formSchema>) => Promise<void>;
+};
+
+export const ProfileForm = ({
+  onSubmit,
+}: ProfileFormProps) => {
+  const { profile, loading } = useAuth();
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      full_name: profile?.full_name ?? '',
+      email: profile?.email ?? '',
+    },
+  });
+
+  useEffect(() => {
+    if (profile)
+      form.reset({
+        full_name: profile.full_name ?? '',
+        email: profile.email ?? '',
+      });
+  }, [profile, form]);
+
+  const handleSubmit = async (values: z.infer<typeof formSchema>) => {
+    await onSubmit(values);
+  };
+
+  return (
+    <CardContent>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(handleSubmit)} className='space-y-6'>
+          <FormField
+            control={form.control}
+            name='full_name'
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Full Name</FormLabel>
+                <FormControl>
+                  <Input {...field} />
+                </FormControl>
+                <FormDescription>Your public display name.</FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name='email'
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input {...field} />
+                </FormControl>
+                <FormDescription>
+                  Your email address associated with your account.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className='flex justify-center'>
+            <SubmitButton disabled={loading} pendingText='Saving...'>
+              Save Changes
+            </SubmitButton>
+          </div>
+        </form>
+      </Form>
+    </CardContent>
+  );
+};

src/components/default/auth/forms/client/profile/reset-password-form.tsx

@@ -0,0 +1,54 @@
+'use client';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useAuth } from '@/lib/hooks/context';
+import { useForm } from 'react-hook-form';
+import { useState } from 'react';
+import { StatusMessage, SubmitButton } from '@/components/default/forms';
+import { type Result } from '@/utils/supabase/types'
+
+const formSchema = z
+  .object({
+    password: z.string().min(8, {
+      message: 'Password must be at least 8 characters.',
+    }),
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: 'Passwords do not match.',
+    path: ['confirmPassword'],
+  });
+
+type ResetPasswordFormProps = {
+  onSubmit: (formData: FormData) => Promise<Result<null>>;
+  message?: string;
+};
+
+export const ResetPasswordForm = ({
+  onSubmit,
+  message,
+}: ResetPasswordFormProps) => {
+  const { loading } = useAuth();
+  const [statusMessage, setStatusMessage] = useState(message ?? '');
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      password: '',
+      confirmPassword: '',
+    },
+  });
+
+  const handleSubmit = async (values: z.infer<typeof formSchema>) => {
+    try {
+      const formData = new FormData();
+      formData.append('password', values.password);
+      formData.append('confirmPassword', values.confirmPassword);
+      await onSubmit(formData);
+
+    } catch (error) {
+
+    }
+  }
+
+};