done for the day

src/components/default/profile/AvatarUpload.tsx

@@ -1,6 +1,6 @@
 import { useFileUpload } from '@/lib/hooks/useFileUpload';
 import { useAuth } from '@/components/context/auth';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui';
+import { Avatar, AvatarFallback, AvatarImage, CardContent } from '@/components/ui';
 import { Loader2, Pencil, Upload, User } from 'lucide-react';
 
 type AvatarUploadProps = {
@@ -43,6 +43,8 @@ export const AvatarUpload = ({ onAvatarUploaded }: AvatarUploadProps) => {
   };
 
   return (
+    <CardContent>
+
     <div className='flex flex-col items-center'>
       <div
         className='relative group cursor-pointer mb-4'
@@ -92,5 +94,6 @@ export const AvatarUpload = ({ onAvatarUploaded }: AvatarUploadProps) => {
         </div>
       )}
     </div>
+    </CardContent>
   );
 };

src/components/default/profile/ProfileForm.tsx

@@ -3,6 +3,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import {
   Button,
+  CardContent,
   Form,
   FormControl,
   FormDescription,
@@ -53,53 +54,55 @@ export const ProfileForm = ({onSubmit}: ProfileFormProps) => {
   };
 
   return (
-    <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'>
-          <Button type='submit' disabled={isLoading}>
-            {isLoading ? (
-              <>
-                <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                Saving...
-              </>
-            ) : (
-              'Save Changes'
+    <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>
             )}
-          </Button>
-        </div>
-      </form>
-    </Form>
+          />
+
+          <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'>
+            <Button type='submit' disabled={isLoading}>
+              {isLoading ? (
+                <>
+                  <Loader2 className='mr-2 h-4 w-4 animate-spin' />
+                  Saving...
+                </>
+              ) : (
+                'Save Changes'
+              )}
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </CardContent>
   );
 }

src/components/default/profile/ResetPasswordForm.tsx

@@ -2,7 +2,7 @@ import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import {
-  Button,
+  CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
@@ -15,8 +15,10 @@ import {
   FormMessage,
   Input,
 } from '@/components/ui';
-import { Loader2 } from 'lucide-react';
+import { SubmitButton } from '@/components/default';
 import { useState } from 'react';
+import { type Result } from '@/lib/actions';
+import { FormMessage as Pw } from '@/components/default';
 
 const formSchema = z
   .object({
@@ -31,7 +33,7 @@ const formSchema = z
   });
 
 type ResetPasswordFormProps = {
-  onSubmit: (values: z.infer<typeof formSchema>) => Promise<void>;
+  onSubmit: (formData: FormData) => Promise<Result<null>>;
   message?: string;
 };
 
@@ -50,14 +52,25 @@ export const ResetPasswordForm = ({
     },
   });
 
-  const handleSubmit = async (values: z.infer<typeof formSchema>) => {
+  const handleUpdatePassword = async (values: z.infer<typeof formSchema>) => {
     setIsLoading(true);
     try {
-      await onSubmit(values);
-      setStatusMessage('Password updated successfully');
-      form.reset();
+      // Convert form values to FormData for your server action
+      const formData = new FormData();
+      formData.append('password', values.password);
+      formData.append('confirmPassword', values.confirmPassword);
+
+      const result = await onSubmit(formData);
+      if (result?.success) {
+        setStatusMessage('Password updated successfully!');
+        form.reset(); // Clear the form on success
+      } else {
+        setStatusMessage('Error: Unable to update password!');
+      }
     } catch (error) {
-      setStatusMessage(error instanceof Error ? error.message : 'An error occurred');
+      setStatusMessage(
+        error instanceof Error ? error.message : 'Password was not updated!'
+      );
     } finally {
       setIsLoading(false);
     }
@@ -65,15 +78,19 @@ export const ResetPasswordForm = ({
 
   return (
     <div>
-    <CardHeader className='pb-5'>
-      <CardTitle className='text-xl'>Change Password</CardTitle>
-      <CardDescription>
-        Update your password to keep your account secure
-      </CardDescription>
-    </CardHeader>
-      
+      <CardHeader className='pb-5'>
+        <CardTitle className='text-2xl'>Change Password</CardTitle>
+        <CardDescription>
+          Update your password to keep your account secure
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+
       <Form {...form}>
-        <form onSubmit={form.handleSubmit(handleSubmit)} className='space-y-6'>
+        <form 
+          onSubmit={form.handleSubmit(handleUpdatePassword)}
+          className='space-y-6'
+        >
           <FormField
             control={form.control}
             name='password'
@@ -107,24 +124,27 @@ export const ResetPasswordForm = ({
             )}
           />
           {statusMessage && (
-            <div className={`text-sm text-center ${statusMessage.includes('error') || statusMessage.includes('failed') ? 'text-destructive' : 'text-green-600'}`}>
+            <div 
+              className={`text-sm text-center ${
+                statusMessage.includes('Error') || statusMessage.includes('failed') 
+                  ? 'text-destructive' 
+                  : 'text-green-600'
+              }`}
+            >
               {statusMessage}
             </div>
           )}
           <div className='flex justify-center'>
-            <Button type='submit' disabled={isLoading}>
-              {isLoading ? (
-                <>
-                  <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                  Updating Password...
-                </>
-              ) : (
-                'Update Password'
-              )}
-            </Button>
+            <SubmitButton
+              disabled={isLoading}
+              pendingText='Updating Password...'
+            >
+              Update Password
+            </SubmitButton>
           </div>
         </form>
       </Form>
+      </CardContent>
     </div>
   );
 };

src/components/default/submit-button.tsx

@@ -3,21 +3,31 @@
 import { Button } from '@/components/ui';
 import { type ComponentProps } from 'react';
 import { useFormStatus } from 'react-dom';
+import { Loader2 } from 'lucide-react';
 
 type Props = ComponentProps<typeof Button> & {
+  disabled?: boolean;
   pendingText?: string;
 };
 
 export const SubmitButton = ({
   children,
+  disabled = false,
   pendingText = 'Submitting...',
   ...props
 }: Props) => {
   const { pending } = useFormStatus();
 
   return (
-    <Button type='submit' aria-disabled={pending} {...props}>
-      {pending ? pendingText : children}
+    <Button type='submit' aria-disabled={pending} disabled={disabled} {...props}>
+      {pending || disabled ? (
+        <>
+          <Loader2 className='mr-2 h-4 w-4 animate-spin' />
+          {pendingText}
+        </>
+      ) : (
+        children
+      )}
     </Button>
   );
 };