From adba211a049c73cc77cf5c405a698948cfe6815e Mon Sep 17 00:00:00 2001
From: Camillalalala <camilla4clubs@gmail.com>
Date: Mon, 20 Apr 2026 21:25:14 -0700
Subject: [PATCH 01/10] Add alert for sign up and sign in auth pages

---
 app/(auth)/sign-up/page.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/(auth)/sign-up/page.tsx b/app/(auth)/sign-up/page.tsx
index 55d69f0b..6be9db3e 100644
--- a/app/(auth)/sign-up/page.tsx
+++ b/app/(auth)/sign-up/page.tsx
@@ -43,7 +43,8 @@ export default function SignUpPage() {
     });
     setIsLoading(false);
     if (error) {
-      console.error('Sign-up error:', error);
+      alert(error.message);
+      return;
     }
     router.push('/home');
   };

From 4c1214f227797cce90edd268b8873ebb434d8f9d Mon Sep 17 00:00:00 2001
From: Camillalalala <camilla4clubs@gmail.com>
Date: Thu, 23 Apr 2026 21:12:59 -0700
Subject: [PATCH 02/10] Create error handling for sign-in, sign-up,
 forgot-password, and donation form

---
 app/(auth)/forgot-password/page.tsx           | 128 ++++++++++--------
 app/(auth)/sign-in/page.tsx                   |  10 +-
 app/(auth)/sign-up/page.tsx                   |  12 +-
 .../components/LightweightDonationForm.tsx    |  62 ++++++---
 4 files changed, 131 insertions(+), 81 deletions(-)

diff --git a/app/(auth)/forgot-password/page.tsx b/app/(auth)/forgot-password/page.tsx
index ed0471f6..41529a87 100644
--- a/app/(auth)/forgot-password/page.tsx
+++ b/app/(auth)/forgot-password/page.tsx
@@ -1,59 +1,69 @@
-'use client';
-import { useForm } from 'react-hook-form';
-import { createClient } from '@/app/lib/supabase/browser-client';
-
-type ForgotPasswordFormValues = {
-  email: string;
-};
-
-export default function ForgotPasswordPage() {
-  const supabase = createClient();
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<ForgotPasswordFormValues>({
-    defaultValues: { email: '' },
-    mode: 'onSubmit',
-  });
-
-  const onSubmit = async (values: ForgotPasswordFormValues) => {
-    const { error } = await supabase.auth.resetPasswordForEmail(values.email);
-
-    if (error) {
-      alert(error.message);
-      return;
-    }
-
-    alert('Instructions to reset your password have been sent to your email.');
-  };
-
-  return (
-    <div>
-      <h1>Reset Password</h1>
-
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <label htmlFor="email">Email</label>
-
-        <input
-          id="email"
-          type="email"
-          {...register('email', {
-            required: 'Email is required.',
-            pattern: {
-              value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
-              message: 'Please enter a valid email address.',
-            },
-          })}
-        />
-
-        {errors.email?.message ? <p>{errors.email.message}</p> : null}
-
-        <button type="submit" disabled={isSubmitting}>
-          {isSubmitting ? 'Sending' : 'Reset password'}
-        </button>
-      </form>
-    </div>
-  );
-}
+'use client';
+import { useForm } from 'react-hook-form';
+import { useState } from 'react';
+import { createClient } from '@/app/lib/supabase/browser-client';
+
+type ForgotPasswordFormValues = {
+  email: string;
+};
+
+export default function ForgotPasswordPage() {
+  const supabase = createClient();
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<ForgotPasswordFormValues>({
+    defaultValues: { email: '' },
+    mode: 'onSubmit',
+  });
+
+  const onSubmit = async (values: ForgotPasswordFormValues) => {
+    setErrorMessage('');
+    setSuccessMessage('');
+
+    const { error } = await supabase.auth.resetPasswordForEmail(values.email);
+
+    if (error) {
+      setErrorMessage('Failed to send reset password email: ' + error.message);
+      return;
+    }
+
+    setSuccessMessage(
+      'Instructions to reset your password have been sent to your email.',
+    );
+  };
+
+  return (
+    <div>
+      <h1>Reset Password</h1>
+
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <label htmlFor="email">Email</label>
+
+        <input
+          id="email"
+          type="email"
+          {...register('email', {
+            required: 'Email is required.',
+            pattern: {
+              value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+              message: 'Please enter a valid email address.',
+            },
+          })}
+        />
+
+        {errors.email?.message ? <p>{errors.email.message}</p> : null}
+
+        <button type="submit" disabled={isSubmitting}>
+          {isSubmitting ? 'Sending' : 'Reset password'}
+        </button>
+
+        {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
+        {successMessage && <p style={{ color: 'green' }}>{successMessage}</p>}
+      </form>
+    </div>
+  );
+}
diff --git a/app/(auth)/sign-in/page.tsx b/app/(auth)/sign-in/page.tsx
index e09aa9dd..7f23ef69 100644
--- a/app/(auth)/sign-in/page.tsx
+++ b/app/(auth)/sign-in/page.tsx
@@ -2,6 +2,7 @@
 
 import { createClient } from '@/app/lib/supabase/browser-client';
 import { useForm } from 'react-hook-form';
+import { useState } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
@@ -16,18 +17,23 @@ export default function SignInPage() {
     handleSubmit,
     formState: { errors },
   } = useForm<Inputs>();
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
   const router = useRouter();
   const supabase = createClient();
 
   const onSubmit = async (formData: Inputs) => {
+    setErrorMessage('');
+    setSuccessMessage('');
     const { error } = await supabase.auth.signInWithPassword({
       email: formData.email,
       password: formData.password,
     });
     if (error) {
-      alert(error.message);
+      setErrorMessage('Failed to sign in: ' + error.message);
       return;
     }
+    setSuccessMessage('Signed in successfully! Redirecting...');
     router.push('/home');
   };
 
@@ -61,6 +67,8 @@ export default function SignInPage() {
       <Link href="/forgot-password">Forgot password?</Link>
       <br />
       <Link href="/sign-up">Sign up</Link>
+      {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
+      {successMessage && <p style={{ color: 'green' }}>{successMessage}</p>}
     </form>
   );
 }
diff --git a/app/(auth)/sign-up/page.tsx b/app/(auth)/sign-up/page.tsx
index 6be9db3e..10e0bf0d 100644
--- a/app/(auth)/sign-up/page.tsx
+++ b/app/(auth)/sign-up/page.tsx
@@ -22,6 +22,8 @@ export default function SignUpPage() {
     formState: { errors },
   } = useForm<Inputs>();
   const [isLoading, setIsLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
   const supabase = createClient();
   const router = useRouter();
   const passwordValue = useWatch({
@@ -30,6 +32,8 @@ export default function SignUpPage() {
   });
 
   const onSubmit: SubmitHandler<Inputs> = async (formData) => {
+    setErrorMessage('');
+    setSuccessMessage('');
     setIsLoading(true);
     const { error } = await supabase.auth.signUp({
       email: formData.email,
@@ -43,10 +47,12 @@ export default function SignUpPage() {
     });
     setIsLoading(false);
     if (error) {
-      alert(error.message);
+      setErrorMessage('Failed to sign up: ' + error.message);
       return;
     }
-    router.push('/home');
+    setSuccessMessage(
+      'Account created successfully! Please check your email to confirm your account.',
+    );
   };
 
   return (
@@ -131,6 +137,8 @@ export default function SignUpPage() {
       </button>
       <br />
       <Link href="/sign-in">Sign in</Link>
+      {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
+      {successMessage && <p style={{ color: 'green' }}>{successMessage}</p>}
     </form>
   );
 }
diff --git a/app/(main)/home/donate/components/LightweightDonationForm.tsx b/app/(main)/home/donate/components/LightweightDonationForm.tsx
index 3555dd0b..8131cf6a 100644
--- a/app/(main)/home/donate/components/LightweightDonationForm.tsx
+++ b/app/(main)/home/donate/components/LightweightDonationForm.tsx
@@ -4,6 +4,7 @@ import { DonationInsert } from '@/app/types/donation';
 import { useForm, useWatch, Controller } from 'react-hook-form';
 import { PatternFormat } from 'react-number-format';
 import { createDonation } from '@/app/actions/donation';
+import { useState } from 'react';
 
 type FormData = {
   donor_type?: 'individual' | 'business';
@@ -32,7 +33,7 @@ export default function LightweightDonationForm() {
     control,
     reset,
     clearErrors,
-    formState: { errors, isSubmitSuccessful },
+    formState: { errors },
   } = useForm<FormData>({
     defaultValues: {
       donor_type: undefined,
@@ -40,6 +41,8 @@ export default function LightweightDonationForm() {
       estimated_value: '',
     },
   });
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
 
   const donorType = useWatch({
     control,
@@ -47,6 +50,8 @@ export default function LightweightDonationForm() {
   });
 
   const onSubmit = async (data: FormData) => {
+    setErrorMessage('');
+    setSuccessMessage('');
     const donation: DonationInsert = {
       donor_is_individual: data.donor_type === 'individual',
 
@@ -79,9 +84,10 @@ export default function LightweightDonationForm() {
     };
 
     const result = await createDonation(donation);
-
-    // Reset all fields to empty/default values
     if (result.success) {
+      setSuccessMessage(
+        'Donation submitted successfully! Thank you for your generosity.',
+      );
       reset({
         donor_type: undefined,
         individual_name: '',
@@ -99,7 +105,9 @@ export default function LightweightDonationForm() {
       });
       clearErrors();
     } else {
-      console.error('Failed to create donation:', result.error);
+      setErrorMessage(
+        'Failed to create donation: ' + (result.error || 'Unknown error'),
+      );
     }
   };
 
@@ -126,6 +134,36 @@ export default function LightweightDonationForm() {
       >
         <h1 style={{ margin: 0 }}>Donation Form</h1>
       </div>
+      {errorMessage && (
+        <div
+          style={{
+            backgroundColor: '#f8d7da',
+            color: '#721c24',
+            padding: '12px',
+            borderRadius: '5px',
+            marginBottom: '15px',
+            textAlign: 'center',
+            fontWeight: 'bold',
+          }}
+        >
+          {errorMessage}
+        </div>
+      )}
+      {successMessage && (
+        <div
+          style={{
+            backgroundColor: '#d4edda',
+            color: '#155724',
+            padding: '12px',
+            borderRadius: '5px',
+            marginBottom: '15px',
+            textAlign: 'center',
+            fontWeight: 'bold',
+          }}
+        >
+          {successMessage}
+        </div>
+      )}
       <form
         onSubmit={handleSubmit(onSubmit)}
         style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}
@@ -443,21 +481,7 @@ export default function LightweightDonationForm() {
           Submit
         </button>
 
-        {isSubmitSuccessful && (
-          <div
-            style={{
-              backgroundColor: '#d4edda',
-              color: '#155724',
-              padding: '12px',
-              borderRadius: '5px',
-              marginBottom: '15px',
-              textAlign: 'center',
-              fontWeight: 'bold',
-            }}
-          >
-            Form submitted successfully! Thank you for your donation.
-          </div>
-        )}
+        {/* Success message now handled above form */}
       </form>
     </div>
   );

From ee3847d055088c13b313702b2ba1ac8d131dd1ee Mon Sep 17 00:00:00 2001
From: Camillalalala <camilla4clubs@gmail.com>
Date: Thu, 23 Apr 2026 21:39:41 -0700
Subject: [PATCH 03/10] Create error handling for instock and outofstock item
 cards, removeTicketItem button, add instock to cart form, and add outofstock
 to cart form

---
 .../components/InStockTicketItemCard.tsx      |  9 ++-
 .../components/OutOfStockTicketItemCard.tsx   | 78 ++++++++++++++++---
 .../components/RemoveTicketItemButton.tsx     | 21 +++--
 .../components/AddInStockToCartForm.tsx       | 43 +++++++++-
 .../components/AddOutOfStockToCartForm.tsx    | 40 +++++++++-
 5 files changed, 169 insertions(+), 22 deletions(-)

diff --git a/app/(main)/components/InStockTicketItemCard.tsx b/app/(main)/components/InStockTicketItemCard.tsx
index 3b1b5287..19659f9f 100644
--- a/app/(main)/components/InStockTicketItemCard.tsx
+++ b/app/(main)/components/InStockTicketItemCard.tsx
@@ -28,6 +28,7 @@ export default function InStockTicketItemCard({
   const hasChanged = quantity !== savedQuantity;
 
   const handleSave = async () => {
+    setErrorMessage('');
     if (quantity < 1) {
       setErrorMessage('Please input a number greater than 0.');
       return;
@@ -36,7 +37,7 @@ export default function InStockTicketItemCard({
     const result = await updateTicketItemQuantity(ticketItemId, quantity);
 
     if (!result.success) {
-      console.error('Error changing ticket item quantity:', result.error);
+      setErrorMessage('Failed to update ticket item quantity.' + result.error);
       return;
     }
 
@@ -68,7 +69,11 @@ export default function InStockTicketItemCard({
           }}
         />
       </label>
-      {errorMessage && <p role="alert">{errorMessage}</p>}
+      {errorMessage && (
+        <p role="alert" style={{ color: 'red' }}>
+          {errorMessage}
+        </p>
+      )}
       {hasChanged && (
         <>
           <button onClick={handleSave}>Save</button>
diff --git a/app/(main)/components/OutOfStockTicketItemCard.tsx b/app/(main)/components/OutOfStockTicketItemCard.tsx
index 330a77e3..be9c66f4 100644
--- a/app/(main)/components/OutOfStockTicketItemCard.tsx
+++ b/app/(main)/components/OutOfStockTicketItemCard.tsx
@@ -1,4 +1,5 @@
 'use client';
+
 import { updateTicketItemDescription } from '@/app/actions/ticket';
 import { useState } from 'react';
 
@@ -9,33 +10,86 @@ interface OutOfStockTicketItemCardProps {
 
 export default function OutOfStockTicketItemCard({
   ticketItemId,
-  freeTextDescription,
+  freeTextDescription: initialDescription,
 }: OutOfStockTicketItemCardProps) {
-  const [description, setDescription] = useState(freeTextDescription);
+  const [description, setDescription] = useState(initialDescription);
   const [isChanged, setIsChanged] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [isSaving, setIsSaving] = useState(false);
 
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const newValue = e.target.value;
     setDescription(newValue);
-    setIsChanged(newValue !== freeTextDescription);
+    setIsChanged(newValue !== initialDescription);
   };
+
   const handleCancel = () => {
-    setDescription(freeTextDescription);
+    setDescription(initialDescription);
     setIsChanged(false);
+    setErrorMessage('');
   };
+
   const handleSave = async () => {
-    await updateTicketItemDescription(ticketItemId, description);
-    setIsChanged(false);
+    setErrorMessage('');
+    setIsSaving(true);
+
+    try {
+      const { error } = await updateTicketItemDescription(
+        ticketItemId,
+        description,
+      );
+
+      if (error) {
+        setErrorMessage('Failed to update description: ' + error);
+        setIsSaving(false);
+        return;
+      }
+
+      // Success Path
+      setIsChanged(false);
+    } catch (e) {
+      // Handle infrastructure/network errors
+      setErrorMessage('A critical connection error occurred.' + e);
+      return;
+    } finally {
+      setIsSaving(false);
+    }
   };
+
   return (
-    <div>
-      <textarea value={description} onChange={handleChange} rows={4} />
+    <div className="flex flex-col gap-2">
+      <textarea 
+        className="border p-2 rounded"
+        value={description} 
+        onChange={handleChange} 
+        rows={4} 
+        disabled={isSaving}
+      />
+      
       {isChanged && (
-        <div>
-          <button onClick={handleSave}>Save</button>
-          <button onClick={handleCancel}>Cancel</button>
+        <div className="flex gap-2">
+          <button 
+            onClick={handleSave} 
+            disabled={isSaving}
+            className="bg-blue-600 text-white px-3 py-1 rounded disabled:opacity-50"
+          >
+            {isSaving ? 'Saving...' : 'Save'}
+          </button>
+          <button 
+            onClick={handleCancel} 
+            disabled={isSaving}
+            className="bg-gray-200 px-3 py-1 rounded"
+          >
+            Cancel
+          </button>
         </div>
       )}
+
+      {errorMessage && (
+        <p role="alert" className="text-red-600 font-medium text-sm">
+          {errorMessage}
+        </p>
+      )}
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/app/(main)/components/RemoveTicketItemButton.tsx b/app/(main)/components/RemoveTicketItemButton.tsx
index 79e2cff5..3e49c006 100644
--- a/app/(main)/components/RemoveTicketItemButton.tsx
+++ b/app/(main)/components/RemoveTicketItemButton.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { deleteTicketItem } from '@/app/actions/ticket';
+import { useState } from 'react';
 
 type RemoveTicketItemButtonProps = {
   ticketItemId: string;
@@ -9,17 +10,27 @@ type RemoveTicketItemButtonProps = {
 export default function RemoveTicketItemButton({
   ticketItemId,
 }: RemoveTicketItemButtonProps) {
+  const [errorMessage, setErrorMessage] = useState('');
+
   const handleDelete = async () => {
+    setErrorMessage('');
     const { success, error } = await deleteTicketItem(ticketItemId);
     if (!success) {
-      alert('Failed to remove ticket item.');
-      console.error(error);
+      setErrorMessage('Failed to remove ticket item.' + error);
+      return;
     }
   };
 
   return (
-    <button type="button" onClick={handleDelete}>
-      Remove
-    </button>
+    <>
+      <button type="button" onClick={handleDelete}>
+        Remove
+      </button>
+      {errorMessage && (
+        <p role="alert" style={{ color: 'red' }}>
+          {errorMessage}
+        </p>
+      )}
+    </>
   );
 }
diff --git a/app/(main)/request/[storeId]/[storeItemId]/components/AddInStockToCartForm.tsx b/app/(main)/request/[storeId]/[storeItemId]/components/AddInStockToCartForm.tsx
index 9dcd9101..b32a62d6 100644
--- a/app/(main)/request/[storeId]/[storeItemId]/components/AddInStockToCartForm.tsx
+++ b/app/(main)/request/[storeId]/[storeItemId]/components/AddInStockToCartForm.tsx
@@ -1,18 +1,23 @@
 'use client';
 
 import Form from 'next/form';
+import { useState } from 'react';
 import { addToCart } from '@/app/actions/ticket';
 
 interface AddInStockToCartFormProps {
   storeId: string;
   storeItemId: string;
 }
-
 export default function AddInStockToCartForm({
   storeId,
   storeItemId,
 }: AddInStockToCartFormProps) {
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
+
   const handleSubmit = async (formData: FormData) => {
+    setErrorMessage('');
+    setSuccessMessage('');
     const actualQuantity = Number(formData.get('quantity'));
     const { error: err } = await addToCart(
       storeId,
@@ -20,7 +25,11 @@ export default function AddInStockToCartForm({
       actualQuantity,
     );
     if (err) {
-      console.error('Error fetching ticket:', err);
+      setErrorMessage('Failed to add in-stock item to cart: ' + err);
+      return;
+    } else {
+      setSuccessMessage('Item added to cart successfully!');
+      return;
     }
   };
 
@@ -41,6 +50,36 @@ export default function AddInStockToCartForm({
           Add to Cart
         </button>
       </Form>
+      {errorMessage && (
+        <div
+          style={{
+            backgroundColor: '#f8d7da',
+            color: '#721c24',
+            padding: '12px',
+            borderRadius: '5px',
+            marginBottom: '15px',
+            textAlign: 'center',
+            fontWeight: 'bold',
+          }}
+        >
+          {errorMessage}
+        </div>
+      )}
+      {successMessage && (
+        <div
+          style={{
+            backgroundColor: '#d4edda',
+            color: '#155724',
+            padding: '12px',
+            borderRadius: '5px',
+            marginBottom: '15px',
+            textAlign: 'center',
+            fontWeight: 'bold',
+          }}
+        >
+          {successMessage}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/app/(main)/request/components/AddOutOfStockToCartForm.tsx b/app/(main)/request/components/AddOutOfStockToCartForm.tsx
index b799afef..09d3e73c 100644
--- a/app/(main)/request/components/AddOutOfStockToCartForm.tsx
+++ b/app/(main)/request/components/AddOutOfStockToCartForm.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import Form from 'next/form';
+import { useState } from 'react';
 import { addToCart } from '@/app/actions/ticket';
 
 interface AddOutOfStockToCartFormProps {
@@ -10,7 +11,11 @@ interface AddOutOfStockToCartFormProps {
 export default function AddOutOfStockToCartForm({
   storeId,
 }: AddOutOfStockToCartFormProps) {
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
   const handleSubmit = async (formData: FormData) => {
+    setErrorMessage('');
+    setSuccessMessage('');
     const description = formData.get('description') as string;
     const { error: err } = await addToCart(
       storeId,
@@ -19,12 +24,45 @@ export default function AddOutOfStockToCartForm({
       description,
     );
     if (err) {
-      console.error('Error fetching ticket:', err);
+      setErrorMessage('Failed to add item to cart: ' + err);
+      return;
+    } else {
+      setSuccessMessage('Item added to cart successfully!');
     }
   };
 
   return (
     <div>
+      {errorMessage && (
+        <div
+          style={{
+            backgroundColor: '#f8d7da',
+            color: '#721c24',
+            padding: '12px',
+            borderRadius: '5px',
+            marginBottom: '15px',
+            textAlign: 'center',
+            fontWeight: 'bold',
+          }}
+        >
+          {errorMessage}
+        </div>
+      )}
+      {successMessage && (
+        <div
+          style={{
+            backgroundColor: '#d4edda',
+            color: '#155724',
+            padding: '12px',
+            borderRadius: '5px',
+            marginBottom: '15px',
+            textAlign: 'center',
+            fontWeight: 'bold',
+          }}
+        >
+          {successMessage}
+        </div>
+      )}
       <Form action={handleSubmit}>
         <input
           name="description"

From eb707d242631b0ab550869ff45bda9f86250dc9b Mon Sep 17 00:00:00 2001
From: Camillalalala <camilla4clubs@gmail.com>
Date: Thu, 23 Apr 2026 21:40:34 -0700
Subject: [PATCH 04/10] Update config so users need to confirm their email
 before signing in

---
 supabase/config.toml | 824 +++++++++++++++++++++----------------------
 1 file changed, 412 insertions(+), 412 deletions(-)

diff --git a/supabase/config.toml b/supabase/config.toml
index 50ea9efb..f22e2af2 100644
--- a/supabase/config.toml
+++ b/supabase/config.toml
@@ -1,412 +1,412 @@
-# For detailed configuration reference documentation, visit:
-# https://supabase.com/docs/guides/local-development/cli/config
-# A string used to distinguish different Supabase projects on the same host. Defaults to the
-# working directory name when running `supabase init`.
-project_id = "path-app"
-
-[api]
-enabled = true
-# Port to use for the API URL.
-port = 54321
-# Schemas to expose in your API. Tables, views and stored procedures in this schema will get API
-# endpoints. `public` and `graphql_public` schemas are included by default.
-schemas = ["public", "graphql_public"]
-# Extra schemas to add to the search_path of every request.
-extra_search_path = ["public", "extensions"]
-# The maximum number of rows returns from a view, table, or stored procedure. Limits payload size
-# for accidental or malicious requests.
-max_rows = 1000
-
-[api.tls]
-# Enable HTTPS endpoints locally using a self-signed certificate.
-enabled = false
-# Paths to self-signed certificate pair.
-# cert_path = "../certs/my-cert.pem"
-# key_path = "../certs/my-key.pem"
-
-[db]
-# Port to use for the local database URL.
-port = 54322
-# Port used by db diff command to initialize the shadow database.
-shadow_port = 54320
-# The database major version to use. This has to be the same as your remote database's. Run `SHOW
-# server_version;` on the remote database to check.
-major_version = 17
-
-[db.pooler]
-enabled = false
-# Port to use for the local connection pooler.
-port = 54329
-# Specifies when a server connection can be reused by other clients.
-# Configure one of the supported pooler modes: `transaction`, `session`.
-pool_mode = "transaction"
-# How many server connections to allow per user/database pair.
-default_pool_size = 20
-# Maximum number of client connections allowed.
-max_client_conn = 100
-
-# [db.vault]
-# secret_key = "env(SECRET_VALUE)"
-
-[db.migrations]
-# If disabled, migrations will be skipped during a db push or reset.
-enabled = true
-# Specifies an ordered list of schema files that describe your database.
-# Supports glob patterns relative to supabase directory: "./schemas/*.sql"
-schema_paths = [
-  "./schemas/roles.sql",
-  "./schemas/functions/can_assign_role.sql",
-  "./schemas/users.sql",
-  "./schemas/user_roles.sql",
-  "./schemas/functions/custom_access_token_hook.sql",
-  "./schemas/functions/handle_new_user.sql",
-  "./schemas/functions/handle_user_email_update.sql",
-  "./schemas/functions/handle_user_role_update.sql",
-  "./schemas/categories.sql",
-  "./schemas/subcategories.sql",
-  "./schemas/inventory_items.sql",
-  "./schemas/stores.sql",
-  "./schemas/functions/can_manage_store.sql",
-  "./schemas/functions/can_manage_store_public.sql",
-  "./schemas/store_admins.sql",
-  "./schemas/functions/handle_new_store_admin.sql",
-  "./schemas/store_items.sql",
-  "./schemas/tickets.sql",
-  "./schemas/ticket_items.sql",
-  "./schemas/donations.sql",
-  "./schemas/functions/handle_ticket_fulfillment.sql",
-  "./schemas/*.sql",
-  "./schemas/functions/*.sql"
-]
-
-[db.seed]
-# If enabled, seeds the database after migrations during a db reset.
-enabled = true
-# Specifies an ordered list of seed files to load during db reset.
-# Supports glob patterns relative to supabase directory: "./seeds/*.sql"
-sql_paths = [
-  "./seeds/roles.sql",
-  "./seeds/auth.sql",
-  "./seeds/user_roles.sql",
-  "./seeds/categories.sql",
-  "./seeds/subcategories.sql",
-  "./seeds/inventory_items.sql",
-  "./seeds/stores.sql",
-  "./seeds/store_admins.sql",
-  "./seeds/store_items.sql",
-  "./seeds/tickets.sql",
-  "./seeds/ticket_items.sql",
-  "./seeds/donations.sql",
-  "./seeds/*.sql"
-]
-
-[db.network_restrictions]
-# Enable management of network restrictions.
-enabled = false
-# List of IPv4 CIDR blocks allowed to connect to the database.
-# Defaults to allow all IPv4 connections. Set empty array to block all IPs.
-allowed_cidrs = ["0.0.0.0/0"]
-# List of IPv6 CIDR blocks allowed to connect to the database.
-# Defaults to allow all IPv6 connections. Set empty array to block all IPs.
-allowed_cidrs_v6 = ["::/0"]
-
-[realtime]
-enabled = true
-# Bind realtime via either IPv4 or IPv6. (default: IPv4)
-# ip_version = "IPv6"
-# The maximum length in bytes of HTTP request headers. (default: 4096)
-# max_header_length = 4096
-
-[studio]
-enabled = true
-# Port to use for Supabase Studio.
-port = 54323
-# External URL of the API server that frontend connects to.
-api_url = "http://127.0.0.1"
-# OpenAI API Key to use for Supabase AI in the Supabase Studio.
-openai_api_key = "env(OPENAI_API_KEY)"
-
-# Email testing server. Emails sent with the local dev setup are not actually sent - rather, they
-# are monitored, and you can view the emails that would have been sent from the web interface.
-[inbucket]
-enabled = true
-# Port to use for the email testing server web interface.
-port = 54324
-# Uncomment to expose additional ports for testing user applications that send emails.
-# smtp_port = 54325
-# pop3_port = 54326
-# admin_email = "admin@email.com"
-# sender_name = "Admin"
-
-[storage]
-enabled = true
-# The maximum file size allowed (e.g. "5MB", "500KB").
-file_size_limit = "50MiB"
-
-# Image transformation API is available to Supabase Pro plan.
-# [storage.image_transformation]
-# enabled = true
-
-# Uncomment to configure local storage buckets
-# [storage.buckets.images]
-# public = false
-# file_size_limit = "50MiB"
-# allowed_mime_types = ["image/png", "image/jpeg"]
-# objects_path = "./images"
-
-[storage.buckets.profile_photos]
-public = true
-file_size_limit = "200KB"
-allowed_mime_types = ["image/png", "image/jpeg"]
-
-[auth]
-enabled = true
-# The base URL of your website. Used as an allow-list for redirects and for constructing URLs used
-# in emails.
-site_url = "http://localhost:3000"
-# A list of *exact* URLs that auth providers are permitted to redirect to post authentication.
-additional_redirect_urls = ["https://localhost:3000"]
-# How long tokens are valid for, in seconds. Defaults to 3600 (1 hour), maximum 604,800 (1 week).
-jwt_expiry = 900
-# JWT issuer URL. If not set, defaults to the local API URL (http://127.0.0.1:<port>/auth/v1).
-# jwt_issuer = ""
-# Path to JWT signing key. DO NOT commit your signing keys file to git.
-# signing_keys_path = "./signing_keys.json"
-# If disabled, the refresh token will never expire.
-enable_refresh_token_rotation = true
-# Allows refresh tokens to be reused after expiry, up to the specified interval in seconds.
-# Requires enable_refresh_token_rotation = true.
-refresh_token_reuse_interval = 10
-# Allow/disallow new user signups to your project.
-enable_signup = true
-# Allow/disallow anonymous sign-ins to your project.
-enable_anonymous_sign_ins = false
-# Allow/disallow testing manual linking of accounts
-enable_manual_linking = false
-# Passwords shorter than this value will be rejected as weak. Minimum 6, recommended 8 or more.
-minimum_password_length = 8
-# Passwords that do not meet the following requirements will be rejected as weak. Supported values
-# are: `letters_digits`, `lower_upper_letters_digits`, `lower_upper_letters_digits_symbols`
-password_requirements = "lower_upper_letters_digits_symbols"
-
-[auth.rate_limit]
-# Number of emails that can be sent per hour. Requires auth.email.smtp to be enabled.
-email_sent = 2
-# Number of SMS messages that can be sent per hour. Requires auth.sms to be enabled.
-sms_sent = 30
-# Number of anonymous sign-ins that can be made per hour per IP address. Requires enable_anonymous_sign_ins = true.
-anonymous_users = 30
-# Number of sessions that can be refreshed in a 5 minute interval per IP address.
-token_refresh = 150
-# Number of sign up and sign-in requests that can be made in a 5 minute interval per IP address (excludes anonymous users).
-sign_in_sign_ups = 30
-# Number of OTP / Magic link verifications that can be made in a 5 minute interval per IP address.
-token_verifications = 30
-# Number of Web3 logins that can be made in a 5 minute interval per IP address.
-web3 = 30
-
-# Configure one of the supported captcha providers: `hcaptcha`, `turnstile`.
-# [auth.captcha]
-# enabled = true
-# provider = "hcaptcha"
-# secret = ""
-
-[auth.email]
-# Allow/disallow new user signups via email to your project.
-enable_signup = true
-# If enabled, a user will be required to confirm any email change on both the old, and new email
-# addresses. If disabled, only the new email is required to confirm.
-double_confirm_changes = true
-# If enabled, users need to confirm their email address before signing in.
-enable_confirmations = false
-# If enabled, users will need to reauthenticate or have logged in recently to change their password.
-secure_password_change = false
-# Controls the minimum amount of time that must pass before sending another signup confirmation or password reset email.
-max_frequency = "1s"
-# Number of characters used in the email OTP.
-otp_length = 6
-# Number of seconds before the email OTP expires (defaults to 1 hour).
-otp_expiry = 3600
-
-# Use a production-ready SMTP server
-# [auth.email.smtp]
-# enabled = true
-# host = "smtp.sendgrid.net"
-# port = 587
-# user = "apikey"
-# pass = "env(SENDGRID_API_KEY)"
-# admin_email = "admin@email.com"
-# sender_name = "Admin"
-
-# Uncomment to customize email template
-# [auth.email.template.invite]
-# subject = "You have been invited"
-# content_path = "./supabase/templates/invite.html"
-
-[auth.email.template.email_change]
-subject = "Confirm email change"
-content_path = "./supabase/templates/email-change.html"
-
-[auth.email.template.confirmation]
-subject = "Confirm sign-up"
-content_path = "./supabase/templates/sign-up.html"
-
-[auth.email.template.recovery]
-subject = "Confirm password reset"
-content_path = "./supabase/templates/password-reset.html"
-
-# Uncomment to customize notification email template
-# [auth.email.notification.password_changed]
-# enabled = true
-# subject = "Your password has been changed"
-# content_path = "./templates/password_changed_notification.html"
-
-[auth.sms]
-# Allow/disallow new user signups via SMS to your project.
-enable_signup = false
-# If enabled, users need to confirm their phone number before signing in.
-enable_confirmations = false
-# Template for sending OTP to users
-template = "Your code is {{ .Code }}"
-# Controls the minimum amount of time that must pass before sending another sms otp.
-max_frequency = "5s"
-
-# Use pre-defined map of phone number to OTP for testing.
-# [auth.sms.test_otp]
-# 4152127777 = "123456"
-
-# Configure logged in session timeouts.
-# [auth.sessions]
-# Force log out after the specified duration.
-# timebox = "24h"
-# Force log out if the user has been inactive longer than the specified duration.
-# inactivity_timeout = "8h"
-
-# This hook runs before a new user is created and allows developers to reject the request based on the incoming user object.
-# [auth.hook.before_user_created]
-# enabled = true
-# uri = "pg-functions://postgres/auth/before-user-created-hook"
-
-# This hook runs before a token is issued and allows you to add additional claims based on the authentication method used.
-[auth.hook.custom_access_token]
-enabled = true
-uri = "pg-functions://postgres/public/custom_access_token_hook"
-
-# Configure one of the supported SMS providers: `twilio`, `twilio_verify`, `messagebird`, `textlocal`, `vonage`.
-[auth.sms.twilio]
-enabled = false
-account_sid = ""
-message_service_sid = ""
-# DO NOT commit your Twilio auth token to git. Use environment variable substitution instead:
-auth_token = "env(SUPABASE_AUTH_SMS_TWILIO_AUTH_TOKEN)"
-
-# Multi-factor-authentication is available to Supabase Pro plan.
-[auth.mfa]
-# Control how many MFA factors can be enrolled at once per user.
-max_enrolled_factors = 10
-
-# Control MFA via App Authenticator (TOTP)
-[auth.mfa.totp]
-enroll_enabled = true
-verify_enabled = true
-
-# Configure MFA via Phone Messaging
-[auth.mfa.phone]
-enroll_enabled = true
-verify_enabled = true
-otp_length = 6
-template = "Your code is {{ .Code }}"
-max_frequency = "5s"
-
-# Configure MFA via WebAuthn
-# [auth.mfa.web_authn]
-# enroll_enabled = true
-# verify_enabled = true
-
-# Use an external OAuth provider. The full list of providers are: `apple`, `azure`, `bitbucket`,
-# `discord`, `facebook`, `github`, `gitlab`, `google`, `keycloak`, `linkedin_oidc`, `notion`, `twitch`,
-# `twitter`, `slack`, `spotify`, `workos`, `zoom`.
-[auth.external.apple]
-enabled = false
-client_id = ""
-# DO NOT commit your OAuth provider secret to git. Use environment variable substitution instead:
-secret = "env(SUPABASE_AUTH_EXTERNAL_APPLE_SECRET)"
-# Overrides the default auth redirectUrl.
-redirect_uri = ""
-# Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
-# or any other third-party OIDC providers.
-url = ""
-# If enabled, the nonce check will be skipped. Required for local sign in with Google auth.
-skip_nonce_check = false
-# If enabled, it will allow the user to successfully authenticate when the provider does not return an email address.
-email_optional = false
-
-# Allow Solana wallet holders to sign in to your project via the Sign in with Solana (SIWS, EIP-4361) standard.
-# You can configure "web3" rate limit in the [auth.rate_limit] section and set up [auth.captcha] if self-hosting.
-[auth.web3.solana]
-enabled = false
-
-# Use Firebase Auth as a third-party provider alongside Supabase Auth.
-[auth.third_party.firebase]
-enabled = false
-# project_id = "my-firebase-project"
-
-# Use Auth0 as a third-party provider alongside Supabase Auth.
-[auth.third_party.auth0]
-enabled = false
-# tenant = "my-auth0-tenant"
-# tenant_region = "us"
-
-# Use AWS Cognito (Amplify) as a third-party provider alongside Supabase Auth.
-[auth.third_party.aws_cognito]
-enabled = false
-# user_pool_id = "my-user-pool-id"
-# user_pool_region = "us-east-1"
-
-# Use Clerk as a third-party provider alongside Supabase Auth.
-[auth.third_party.clerk]
-enabled = false
-# Obtain from https://clerk.com/setup/supabase
-# domain = "example.clerk.accounts.dev"
-
-# OAuth server configuration
-[auth.oauth_server]
-# Enable OAuth server functionality
-enabled = false
-# Path for OAuth consent flow UI
-authorization_url_path = "/oauth/consent"
-# Allow dynamic client registration
-allow_dynamic_registration = false
-
-[edge_runtime]
-enabled = true
-# Supported request policies: `oneshot`, `per_worker`.
-# `per_worker` (default) — enables hot reload during local development.
-# `oneshot` — fallback mode if hot reload causes issues (e.g. in large repos or with symlinks).
-policy = "per_worker"
-# Port to attach the Chrome inspector for debugging edge functions.
-inspector_port = 8083
-# The Deno major version to use.
-deno_version = 2
-
-# [edge_runtime.secrets]
-# secret_key = "env(SECRET_VALUE)"
-
-[analytics]
-enabled = true
-port = 54327
-# Configure one of the supported backends: `postgres`, `bigquery`.
-backend = "postgres"
-
-# Experimental features may be deprecated any time
-[experimental]
-# Configures Postgres storage engine to use OrioleDB (S3)
-orioledb_version = ""
-# Configures S3 bucket URL, eg. <bucket_name>.s3-<region>.amazonaws.com
-s3_host = "env(S3_HOST)"
-# Configures S3 bucket region, eg. us-east-1
-s3_region = "env(S3_REGION)"
-# Configures AWS_ACCESS_KEY_ID for S3 bucket
-s3_access_key = "env(S3_ACCESS_KEY)"
-# Configures AWS_SECRET_ACCESS_KEY for S3 bucket
-s3_secret_key = "env(S3_SECRET_KEY)"
+# For detailed configuration reference documentation, visit:
+# https://supabase.com/docs/guides/local-development/cli/config
+# A string used to distinguish different Supabase projects on the same host. Defaults to the
+# working directory name when running `supabase init`.
+project_id = "path-app"
+
+[api]
+enabled = true
+# Port to use for the API URL.
+port = 54321
+# Schemas to expose in your API. Tables, views and stored procedures in this schema will get API
+# endpoints. `public` and `graphql_public` schemas are included by default.
+schemas = ["public", "graphql_public"]
+# Extra schemas to add to the search_path of every request.
+extra_search_path = ["public", "extensions"]
+# The maximum number of rows returns from a view, table, or stored procedure. Limits payload size
+# for accidental or malicious requests.
+max_rows = 1000
+
+[api.tls]
+# Enable HTTPS endpoints locally using a self-signed certificate.
+enabled = false
+# Paths to self-signed certificate pair.
+# cert_path = "../certs/my-cert.pem"
+# key_path = "../certs/my-key.pem"
+
+[db]
+# Port to use for the local database URL.
+port = 54322
+# Port used by db diff command to initialize the shadow database.
+shadow_port = 54320
+# The database major version to use. This has to be the same as your remote database's. Run `SHOW
+# server_version;` on the remote database to check.
+major_version = 17
+
+[db.pooler]
+enabled = false
+# Port to use for the local connection pooler.
+port = 54329
+# Specifies when a server connection can be reused by other clients.
+# Configure one of the supported pooler modes: `transaction`, `session`.
+pool_mode = "transaction"
+# How many server connections to allow per user/database pair.
+default_pool_size = 20
+# Maximum number of client connections allowed.
+max_client_conn = 100
+
+# [db.vault]
+# secret_key = "env(SECRET_VALUE)"
+
+[db.migrations]
+# If disabled, migrations will be skipped during a db push or reset.
+enabled = true
+# Specifies an ordered list of schema files that describe your database.
+# Supports glob patterns relative to supabase directory: "./schemas/*.sql"
+schema_paths = [
+  "./schemas/roles.sql",
+  "./schemas/functions/can_assign_role.sql",
+  "./schemas/users.sql",
+  "./schemas/user_roles.sql",
+  "./schemas/functions/custom_access_token_hook.sql",
+  "./schemas/functions/handle_new_user.sql",
+  "./schemas/functions/handle_user_email_update.sql",
+  "./schemas/functions/handle_user_role_update.sql",
+  "./schemas/categories.sql",
+  "./schemas/subcategories.sql",
+  "./schemas/inventory_items.sql",
+  "./schemas/stores.sql",
+  "./schemas/functions/can_manage_store.sql",
+  "./schemas/functions/can_manage_store_public.sql",
+  "./schemas/store_admins.sql",
+  "./schemas/functions/handle_new_store_admin.sql",
+  "./schemas/store_items.sql",
+  "./schemas/tickets.sql",
+  "./schemas/ticket_items.sql",
+  "./schemas/donations.sql",
+  "./schemas/functions/handle_ticket_fulfillment.sql",
+  "./schemas/*.sql",
+  "./schemas/functions/*.sql"
+]
+
+[db.seed]
+# If enabled, seeds the database after migrations during a db reset.
+enabled = true
+# Specifies an ordered list of seed files to load during db reset.
+# Supports glob patterns relative to supabase directory: "./seeds/*.sql"
+sql_paths = [
+  "./seeds/roles.sql",
+  "./seeds/auth.sql",
+  "./seeds/user_roles.sql",
+  "./seeds/categories.sql",
+  "./seeds/subcategories.sql",
+  "./seeds/inventory_items.sql",
+  "./seeds/stores.sql",
+  "./seeds/store_admins.sql",
+  "./seeds/store_items.sql",
+  "./seeds/tickets.sql",
+  "./seeds/ticket_items.sql",
+  "./seeds/donations.sql",
+  "./seeds/*.sql"
+]
+
+[db.network_restrictions]
+# Enable management of network restrictions.
+enabled = false
+# List of IPv4 CIDR blocks allowed to connect to the database.
+# Defaults to allow all IPv4 connections. Set empty array to block all IPs.
+allowed_cidrs = ["0.0.0.0/0"]
+# List of IPv6 CIDR blocks allowed to connect to the database.
+# Defaults to allow all IPv6 connections. Set empty array to block all IPs.
+allowed_cidrs_v6 = ["::/0"]
+
+[realtime]
+enabled = true
+# Bind realtime via either IPv4 or IPv6. (default: IPv4)
+# ip_version = "IPv6"
+# The maximum length in bytes of HTTP request headers. (default: 4096)
+# max_header_length = 4096
+
+[studio]
+enabled = true
+# Port to use for Supabase Studio.
+port = 54323
+# External URL of the API server that frontend connects to.
+api_url = "http://127.0.0.1"
+# OpenAI API Key to use for Supabase AI in the Supabase Studio.
+openai_api_key = "env(OPENAI_API_KEY)"
+
+# Email testing server. Emails sent with the local dev setup are not actually sent - rather, they
+# are monitored, and you can view the emails that would have been sent from the web interface.
+[inbucket]
+enabled = true
+# Port to use for the email testing server web interface.
+port = 54324
+# Uncomment to expose additional ports for testing user applications that send emails.
+# smtp_port = 54325
+# pop3_port = 54326
+# admin_email = "admin@email.com"
+# sender_name = "Admin"
+
+[storage]
+enabled = true
+# The maximum file size allowed (e.g. "5MB", "500KB").
+file_size_limit = "50MiB"
+
+# Image transformation API is available to Supabase Pro plan.
+# [storage.image_transformation]
+# enabled = true
+
+# Uncomment to configure local storage buckets
+# [storage.buckets.images]
+# public = false
+# file_size_limit = "50MiB"
+# allowed_mime_types = ["image/png", "image/jpeg"]
+# objects_path = "./images"
+
+[storage.buckets.profile_photos]
+public = true
+file_size_limit = "200KB"
+allowed_mime_types = ["image/png", "image/jpeg"]
+
+[auth]
+enabled = true
+# The base URL of your website. Used as an allow-list for redirects and for constructing URLs used
+# in emails.
+site_url = "http://localhost:3000"
+# A list of *exact* URLs that auth providers are permitted to redirect to post authentication.
+additional_redirect_urls = ["https://localhost:3000"]
+# How long tokens are valid for, in seconds. Defaults to 3600 (1 hour), maximum 604,800 (1 week).
+jwt_expiry = 900
+# JWT issuer URL. If not set, defaults to the local API URL (http://127.0.0.1:<port>/auth/v1).
+# jwt_issuer = ""
+# Path to JWT signing key. DO NOT commit your signing keys file to git.
+# signing_keys_path = "./signing_keys.json"
+# If disabled, the refresh token will never expire.
+enable_refresh_token_rotation = true
+# Allows refresh tokens to be reused after expiry, up to the specified interval in seconds.
+# Requires enable_refresh_token_rotation = true.
+refresh_token_reuse_interval = 10
+# Allow/disallow new user signups to your project.
+enable_signup = true
+# Allow/disallow anonymous sign-ins to your project.
+enable_anonymous_sign_ins = false
+# Allow/disallow testing manual linking of accounts
+enable_manual_linking = false
+# Passwords shorter than this value will be rejected as weak. Minimum 6, recommended 8 or more.
+minimum_password_length = 8
+# Passwords that do not meet the following requirements will be rejected as weak. Supported values
+# are: `letters_digits`, `lower_upper_letters_digits`, `lower_upper_letters_digits_symbols`
+password_requirements = "lower_upper_letters_digits_symbols"
+
+[auth.rate_limit]
+# Number of emails that can be sent per hour. Requires auth.email.smtp to be enabled.
+email_sent = 2
+# Number of SMS messages that can be sent per hour. Requires auth.sms to be enabled.
+sms_sent = 30
+# Number of anonymous sign-ins that can be made per hour per IP address. Requires enable_anonymous_sign_ins = true.
+anonymous_users = 30
+# Number of sessions that can be refreshed in a 5 minute interval per IP address.
+token_refresh = 150
+# Number of sign up and sign-in requests that can be made in a 5 minute interval per IP address (excludes anonymous users).
+sign_in_sign_ups = 30
+# Number of OTP / Magic link verifications that can be made in a 5 minute interval per IP address.
+token_verifications = 30
+# Number of Web3 logins that can be made in a 5 minute interval per IP address.
+web3 = 30
+
+# Configure one of the supported captcha providers: `hcaptcha`, `turnstile`.
+# [auth.captcha]
+# enabled = true
+# provider = "hcaptcha"
+# secret = ""
+
+[auth.email]
+# Allow/disallow new user signups via email to your project.
+enable_signup = true
+# If enabled, a user will be required to confirm any email change on both the old, and new email
+# addresses. If disabled, only the new email is required to confirm.
+double_confirm_changes = true
+# If enabled, users need to confirm their email address before signing in.
+enable_confirmations = true
+# If enabled, users will need to reauthenticate or have logged in recently to change their password.
+secure_password_change = false
+# Controls the minimum amount of time that must pass before sending another signup confirmation or password reset email.
+max_frequency = "1s"
+# Number of characters used in the email OTP.
+otp_length = 6
+# Number of seconds before the email OTP expires (defaults to 1 hour).
+otp_expiry = 3600
+
+# Use a production-ready SMTP server
+# [auth.email.smtp]
+# enabled = true
+# host = "smtp.sendgrid.net"
+# port = 587
+# user = "apikey"
+# pass = "env(SENDGRID_API_KEY)"
+# admin_email = "admin@email.com"
+# sender_name = "Admin"
+
+# Uncomment to customize email template
+# [auth.email.template.invite]
+# subject = "You have been invited"
+# content_path = "./supabase/templates/invite.html"
+
+[auth.email.template.email_change]
+subject = "Confirm email change"
+content_path = "./supabase/templates/email-change.html"
+
+[auth.email.template.confirmation]
+subject = "Confirm sign-up"
+content_path = "./supabase/templates/sign-up.html"
+
+[auth.email.template.recovery]
+subject = "Confirm password reset"
+content_path = "./supabase/templates/password-reset.html"
+
+# Uncomment to customize notification email template
+# [auth.email.notification.password_changed]
+# enabled = true
+# subject = "Your password has been changed"
+# content_path = "./templates/password_changed_notification.html"
+
+[auth.sms]
+# Allow/disallow new user signups via SMS to your project.
+enable_signup = false
+# If enabled, users need to confirm their phone number before signing in.
+enable_confirmations = false
+# Template for sending OTP to users
+template = "Your code is {{ .Code }}"
+# Controls the minimum amount of time that must pass before sending another sms otp.
+max_frequency = "5s"
+
+# Use pre-defined map of phone number to OTP for testing.
+# [auth.sms.test_otp]
+# 4152127777 = "123456"
+
+# Configure logged in session timeouts.
+# [auth.sessions]
+# Force log out after the specified duration.
+# timebox = "24h"
+# Force log out if the user has been inactive longer than the specified duration.
+# inactivity_timeout = "8h"
+
+# This hook runs before a new user is created and allows developers to reject the request based on the incoming user object.
+# [auth.hook.before_user_created]
+# enabled = true
+# uri = "pg-functions://postgres/auth/before-user-created-hook"
+
+# This hook runs before a token is issued and allows you to add additional claims based on the authentication method used.
+[auth.hook.custom_access_token]
+enabled = true
+uri = "pg-functions://postgres/public/custom_access_token_hook"
+
+# Configure one of the supported SMS providers: `twilio`, `twilio_verify`, `messagebird`, `textlocal`, `vonage`.
+[auth.sms.twilio]
+enabled = false
+account_sid = ""
+message_service_sid = ""
+# DO NOT commit your Twilio auth token to git. Use environment variable substitution instead:
+auth_token = "env(SUPABASE_AUTH_SMS_TWILIO_AUTH_TOKEN)"
+
+# Multi-factor-authentication is available to Supabase Pro plan.
+[auth.mfa]
+# Control how many MFA factors can be enrolled at once per user.
+max_enrolled_factors = 10
+
+# Control MFA via App Authenticator (TOTP)
+[auth.mfa.totp]
+enroll_enabled = true
+verify_enabled = true
+
+# Configure MFA via Phone Messaging
+[auth.mfa.phone]
+enroll_enabled = true
+verify_enabled = true
+otp_length = 6
+template = "Your code is {{ .Code }}"
+max_frequency = "5s"
+
+# Configure MFA via WebAuthn
+# [auth.mfa.web_authn]
+# enroll_enabled = true
+# verify_enabled = true
+
+# Use an external OAuth provider. The full list of providers are: `apple`, `azure`, `bitbucket`,
+# `discord`, `facebook`, `github`, `gitlab`, `google`, `keycloak`, `linkedin_oidc`, `notion`, `twitch`,
+# `twitter`, `slack`, `spotify`, `workos`, `zoom`.
+[auth.external.apple]
+enabled = false
+client_id = ""
+# DO NOT commit your OAuth provider secret to git. Use environment variable substitution instead:
+secret = "env(SUPABASE_AUTH_EXTERNAL_APPLE_SECRET)"
+# Overrides the default auth redirectUrl.
+redirect_uri = ""
+# Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
+# or any other third-party OIDC providers.
+url = ""
+# If enabled, the nonce check will be skipped. Required for local sign in with Google auth.
+skip_nonce_check = false
+# If enabled, it will allow the user to successfully authenticate when the provider does not return an email address.
+email_optional = false
+
+# Allow Solana wallet holders to sign in to your project via the Sign in with Solana (SIWS, EIP-4361) standard.
+# You can configure "web3" rate limit in the [auth.rate_limit] section and set up [auth.captcha] if self-hosting.
+[auth.web3.solana]
+enabled = false
+
+# Use Firebase Auth as a third-party provider alongside Supabase Auth.
+[auth.third_party.firebase]
+enabled = false
+# project_id = "my-firebase-project"
+
+# Use Auth0 as a third-party provider alongside Supabase Auth.
+[auth.third_party.auth0]
+enabled = false
+# tenant = "my-auth0-tenant"
+# tenant_region = "us"
+
+# Use AWS Cognito (Amplify) as a third-party provider alongside Supabase Auth.
+[auth.third_party.aws_cognito]
+enabled = false
+# user_pool_id = "my-user-pool-id"
+# user_pool_region = "us-east-1"
+
+# Use Clerk as a third-party provider alongside Supabase Auth.
+[auth.third_party.clerk]
+enabled = false
+# Obtain from https://clerk.com/setup/supabase
+# domain = "example.clerk.accounts.dev"
+
+# OAuth server configuration
+[auth.oauth_server]
+# Enable OAuth server functionality
+enabled = false
+# Path for OAuth consent flow UI
+authorization_url_path = "/oauth/consent"
+# Allow dynamic client registration
+allow_dynamic_registration = false
+
+[edge_runtime]
+enabled = true
+# Supported request policies: `oneshot`, `per_worker`.
+# `per_worker` (default) — enables hot reload during local development.
+# `oneshot` — fallback mode if hot reload causes issues (e.g. in large repos or with symlinks).
+policy = "per_worker"
+# Port to attach the Chrome inspector for debugging edge functions.
+inspector_port = 8083
+# The Deno major version to use.
+deno_version = 2
+
+# [edge_runtime.secrets]
+# secret_key = "env(SECRET_VALUE)"
+
+[analytics]
+enabled = true
+port = 54327
+# Configure one of the supported backends: `postgres`, `bigquery`.
+backend = "postgres"
+
+# Experimental features may be deprecated any time
+[experimental]
+# Configures Postgres storage engine to use OrioleDB (S3)
+orioledb_version = ""
+# Configures S3 bucket URL, eg. <bucket_name>.s3-<region>.amazonaws.com
+s3_host = "env(S3_HOST)"
+# Configures S3 bucket region, eg. us-east-1
+s3_region = "env(S3_REGION)"
+# Configures AWS_ACCESS_KEY_ID for S3 bucket
+s3_access_key = "env(S3_ACCESS_KEY)"
+# Configures AWS_SECRET_ACCESS_KEY for S3 bucket
+s3_secret_key = "env(S3_SECRET_KEY)"

From acd05f736c1166c6d7c9c6aedf7ca32b652e8cbd Mon Sep 17 00:00:00 2001
From: Camillalalala <camilla4clubs@gmail.com>
Date: Thu, 23 Apr 2026 22:01:01 -0700
Subject: [PATCH 05/10] Continue implementing  error and success handling for
 components and pages

---
 app/(main)/components/DeleteTicketButton.tsx  |  64 +++++----
 .../components/TicketStatusDropdown.tsx       | 129 +++++++++---------
 .../components/DeleteStoreItemButton.tsx      |  84 +++++++-----
 .../components/StoreItemForm.tsx              |   9 +-
 .../cart/components/SubmitTicketButton.tsx    |  76 ++++++-----
 5 files changed, 196 insertions(+), 166 deletions(-)

diff --git a/app/(main)/components/DeleteTicketButton.tsx b/app/(main)/components/DeleteTicketButton.tsx
index dbd352c0..d4d17595 100644
--- a/app/(main)/components/DeleteTicketButton.tsx
+++ b/app/(main)/components/DeleteTicketButton.tsx
@@ -1,27 +1,37 @@
-'use client';
-
-import { deleteTicket } from '@/app/actions/ticket';
-import { usePathname, useRouter } from 'next/navigation';
-
-export default function DeleteTicketButton({ ticketId }: { ticketId: string }) {
-  const pathname = usePathname();
-  const router = useRouter();
-
-  async function handleDelete() {
-    const result = await deleteTicket(ticketId);
-
-    if (!result.success) {
-      console.error('Failed to delete ticket:', result.error);
-      return;
-    }
-
-    const parentPath = pathname.split('/').slice(0, -1).join('/') || '/';
-    router.push(parentPath);
-  }
-
-  return (
-    <button type="button" onClick={handleDelete}>
-      Delete ticket
-    </button>
-  );
-}
+'use client';
+
+import { deleteTicket } from '@/app/actions/ticket';
+import { usePathname, useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+export default function DeleteTicketButton({ ticketId }: { ticketId: string }) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
+
+  async function handleDelete() {
+    setErrorMessage('');
+    setSuccessMessage('');
+    const result = await deleteTicket(ticketId);
+
+    if (!result.success) {
+      setErrorMessage('Failed to delete ticket.' + result.error);
+      return;
+    }
+
+    setSuccessMessage('Ticket deleted successfully!');
+    const parentPath = pathname.split('/').slice(0, -1).join('/') || '/';
+    router.push(parentPath);
+  }
+
+  return (
+    <>
+      {errorMessage && <div style={{ color: 'red' }}>{errorMessage}</div>}
+      {successMessage && <div style={{ color: 'green' }}>{successMessage}</div>}
+      <button type="button" onClick={handleDelete}>
+        Delete ticket
+      </button>
+    </>
+  );
+}
diff --git a/app/(main)/components/TicketStatusDropdown.tsx b/app/(main)/components/TicketStatusDropdown.tsx
index d8fed11f..8de720ce 100644
--- a/app/(main)/components/TicketStatusDropdown.tsx
+++ b/app/(main)/components/TicketStatusDropdown.tsx
@@ -1,64 +1,65 @@
-'use client';
-import { useState } from 'react';
-import { updateTicketStatus } from '@/app/actions/ticket';
-
-type TicketStatus = 'draft' | 'requested' | 'ready' | 'rejected' | 'fulfilled';
-
-export default function TicketStatusDropdown({
-  ticketId,
-  currentStatus,
-  statusOptions,
-}: {
-  ticketId: string;
-  currentStatus: TicketStatus;
-  statusOptions: TicketStatus[];
-}) {
-  const [selectedStatus, setSelectedStatus] =
-    useState<TicketStatus>(currentStatus);
-  const [originalStatus, setOriginalStatus] =
-    useState<TicketStatus>(currentStatus);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleCancel = () => {
-    setError(null);
-    setSelectedStatus(originalStatus);
-  };
-
-  const handleSave = async () => {
-    setError(null);
-
-    const result = await updateTicketStatus(selectedStatus, ticketId);
-    if (result.success) {
-      setOriginalStatus(selectedStatus);
-    } else {
-      setError('Error updating status. No changes were saved.');
-    }
-  };
-
-  return (
-    <div>
-      <select
-        value={selectedStatus}
-        onChange={(e) => setSelectedStatus(e.target.value as TicketStatus)}
-      >
-        {statusOptions.map((status) => (
-          <option key={status} value={status}>
-            {status}
-          </option>
-        ))}
-      </select>
-
-      {selectedStatus !== originalStatus && (
-        <div>
-          <button type="button" onClick={handleSave}>
-            Save
-          </button>
-          <button type="button" onClick={handleCancel}>
-            Cancel
-          </button>
-          {error && <div>{error}</div>}
-        </div>
-      )}
-    </div>
-  );
-}
+'use client';
+import { useState } from 'react';
+import { updateTicketStatus } from '@/app/actions/ticket';
+
+type TicketStatus = 'draft' | 'requested' | 'ready' | 'rejected' | 'fulfilled';
+
+export default function TicketStatusDropdown({
+  ticketId,
+  currentStatus,
+  statusOptions,
+}: {
+  ticketId: string;
+  currentStatus: TicketStatus;
+  statusOptions: TicketStatus[];
+}) {
+  const [selectedStatus, setSelectedStatus] =
+    useState<TicketStatus>(currentStatus);
+  const [originalStatus, setOriginalStatus] =
+    useState<TicketStatus>(currentStatus);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleCancel = () => {
+    setError(null);
+    setSelectedStatus(originalStatus);
+  };
+
+  const handleSave = async () => {
+    setError(null);
+
+    const result = await updateTicketStatus(selectedStatus, ticketId);
+    if (result.success) {
+      setOriginalStatus(selectedStatus);
+      return;
+    } else {
+      setError('Error updating status. No changes were saved.' + result.error);
+    }
+  };
+
+  return (
+    <div>
+      <select
+        value={selectedStatus}
+        onChange={(e) => setSelectedStatus(e.target.value as TicketStatus)}
+      >
+        {statusOptions.map((status) => (
+          <option key={status} value={status}>
+            {status}
+          </option>
+        ))}
+      </select>
+
+      {selectedStatus !== originalStatus && (
+        <div>
+          <button type="button" onClick={handleSave}>
+            Save
+          </button>
+          <button type="button" onClick={handleCancel}>
+            Cancel
+          </button>
+          {error && <div>{error}</div>}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/(main)/manage/[storeId]/[storeItemId]/components/DeleteStoreItemButton.tsx b/app/(main)/manage/[storeId]/[storeItemId]/components/DeleteStoreItemButton.tsx
index d44a0df8..d0c9ea2c 100644
--- a/app/(main)/manage/[storeId]/[storeItemId]/components/DeleteStoreItemButton.tsx
+++ b/app/(main)/manage/[storeId]/[storeItemId]/components/DeleteStoreItemButton.tsx
@@ -1,37 +1,47 @@
-'use client';
-
-import { deleteStoreItem } from '@/app/actions/store';
-import { usePathname, useRouter } from 'next/navigation';
-
-export default function DeleteStoreItemButton({
-  storeItemId,
-}: {
-  storeItemId: string;
-}) {
-  const pathname = usePathname();
-  const router = useRouter();
-
-  async function handleDelete() {
-    const result = await deleteStoreItem(storeItemId);
-
-    if (!result.success) {
-      console.error('Failed to delete store item:', result.error);
-      return;
-    }
-
-    const targetPath = pathname.split('/').slice(0, -1).join('/') || '/';
-
-    if (pathname === targetPath) {
-      router.refresh();
-      return;
-    }
-
-    router.push(targetPath);
-  }
-
-  return (
-    <button type="button" onClick={handleDelete}>
-      Remove item
-    </button>
-  );
-}
+'use client';
+
+import { deleteStoreItem } from '@/app/actions/store';
+import { usePathname, useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+export default function DeleteStoreItemButton({
+  storeItemId,
+}: {
+  storeItemId: string;
+}) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
+
+  async function handleDelete() {
+    setErrorMessage('');
+    setSuccessMessage('');
+    const result = await deleteStoreItem(storeItemId);
+
+    if (!result.success) {
+      setErrorMessage('Failed to delete store item.' + result.error);
+      return;
+    }
+
+    setSuccessMessage('Store item deleted successfully!');
+    const targetPath = pathname.split('/').slice(0, -1).join('/') || '/';
+
+    if (pathname === targetPath) {
+      router.refresh();
+      return;
+    }
+
+    router.push(targetPath);
+  }
+
+  return (
+    <>
+      {errorMessage && <div style={{ color: 'red' }}>{errorMessage}</div>}
+      {successMessage && <div style={{ color: 'green' }}>{successMessage}</div>}
+      <button type="button" onClick={handleDelete}>
+        Remove item
+      </button>
+    </>
+  );
+}
diff --git a/app/(main)/manage/[storeId]/[storeItemId]/components/StoreItemForm.tsx b/app/(main)/manage/[storeId]/[storeItemId]/components/StoreItemForm.tsx
index a1770cd1..2e6d7420 100644
--- a/app/(main)/manage/[storeId]/[storeItemId]/components/StoreItemForm.tsx
+++ b/app/(main)/manage/[storeId]/[storeItemId]/components/StoreItemForm.tsx
@@ -5,6 +5,7 @@ import {
   updateStoreItemQuantity,
   updateStoreItemIsHidden,
 } from '@/app/actions/store';
+import { useState } from 'react';
 
 export default function StoreItemForm({
   storeId,
@@ -29,10 +30,13 @@ export default function StoreItemForm({
     },
   });
 
+  const [errorMessage, setErrorMessage] = useState('');
+
   const onSubmit = async (values: {
     quantityAvailable: number;
     isHidden: boolean;
   }) => {
+    setErrorMessage('');
     const qtyRes = await updateStoreItemQuantity(
       storeId,
       storeItemId,
@@ -40,7 +44,7 @@ export default function StoreItemForm({
     );
 
     if (!qtyRes.success) {
-      alert(qtyRes.error ?? 'Failed to update quantity.');
+      setErrorMessage(qtyRes.error ?? 'Failed to update quantity.');
       return;
     }
 
@@ -51,7 +55,7 @@ export default function StoreItemForm({
     );
 
     if (!hiddenRes.success) {
-      alert(hiddenRes.error ?? 'Failed to update visibility.');
+      setErrorMessage(hiddenRes.error ?? 'Failed to update visibility.');
       return;
     }
 
@@ -60,6 +64,7 @@ export default function StoreItemForm({
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
+      {errorMessage && <div style={{ color: 'red' }}>{errorMessage}</div>}
       <div>
         <label>Quantity available: </label>
         <input
diff --git a/app/(main)/request/[storeId]/cart/components/SubmitTicketButton.tsx b/app/(main)/request/[storeId]/cart/components/SubmitTicketButton.tsx
index 36d6a489..3fde12ac 100644
--- a/app/(main)/request/[storeId]/cart/components/SubmitTicketButton.tsx
+++ b/app/(main)/request/[storeId]/cart/components/SubmitTicketButton.tsx
@@ -1,36 +1,40 @@
-'use client';
-import { useState, useTransition } from 'react';
-import { updateTicketStatus } from '@/app/actions/ticket';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-
-export default function SubmitTicketButton({ ticketId }: { ticketId: string }) {
-  const [isPending, startTransition] = useTransition();
-  const [error, setError] = useState<string | null>(null);
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-
-  const handleSubmit = async () => {
-    setError(null);
-    startTransition(async () => {
-      const result = await updateTicketStatus('requested', ticketId);
-      if (result.success) {
-        const params = new URLSearchParams(searchParams?.toString() || '');
-        params.set('submitted', '1');
-        params.set('ticketId', ticketId);
-        router.replace(`${pathname}?${params.toString()}`);
-      } else {
-        setError(result.error || 'Failed to submit ticket.');
-      }
-    });
-  };
-
-  return (
-    <div>
-      <button type="button" onClick={handleSubmit} disabled={isPending}>
-        {isPending ? 'Submitting...' : 'Submit ticket'}
-      </button>
-      {error && <p style={{ color: 'red' }}>{error}</p>}
-    </div>
-  );
-}
+'use client';
+import { useState, useTransition } from 'react';
+import { updateTicketStatus } from '@/app/actions/ticket';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+
+export default function SubmitTicketButton({ ticketId }: { ticketId: string }) {
+  const [isPending, startTransition] = useTransition();
+  const [error, setError] = useState<string | null>(null);
+  const [successMessage, setSuccessMessage] = useState('');
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const handleSubmit = async () => {
+    setError(null);
+    setSuccessMessage('');
+    startTransition(async () => {
+      const result = await updateTicketStatus('requested', ticketId);
+      if (result.success) {
+        setSuccessMessage('Ticket submitted successfully!');
+        const params = new URLSearchParams(searchParams?.toString() || '');
+        params.set('submitted', '1');
+        params.set('ticketId', ticketId);
+        router.replace(`${pathname}?${params.toString()}`);
+      } else {
+        setError(result.error || 'Failed to submit ticket.');
+      }
+    });
+  };
+
+  return (
+    <div>
+      <button type="button" onClick={handleSubmit} disabled={isPending}>
+        {isPending ? 'Submitting...' : 'Submit ticket'}
+      </button>
+      {error && <p style={{ color: 'red' }}>{error}</p>}
+      {successMessage && <p style={{ color: 'green' }}>{successMessage}</p>}
+    </div>
+  );
+}

From 03b6d8ee81ea3409462c2f9e30436b83db970ea3 Mon Sep 17 00:00:00 2001
From: cheyennelu17 <cheyennelu17@g.ucla.edu>
Date: Mon, 27 Apr 2026 14:27:10 -0700
Subject: [PATCH 06/10] temporary pushing signup/ signin transition

---
 app/(auth)/sign-in/page.tsx | 6 ++++--
 app/(auth)/sign-up/page.tsx | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/(auth)/sign-in/page.tsx b/app/(auth)/sign-in/page.tsx
index e09aa9dd..d20bc337 100644
--- a/app/(auth)/sign-in/page.tsx
+++ b/app/(auth)/sign-in/page.tsx
@@ -14,7 +14,7 @@ export default function SignInPage() {
   const {
     register,
     handleSubmit,
-    formState: { errors },
+    formState: { errors, isSubmitting },
   } = useForm<Inputs>();
   const router = useRouter();
   const supabase = createClient();
@@ -56,7 +56,9 @@ export default function SignInPage() {
         <p role="alert">Password is required.</p>
       )}
       <br />
-      <button type="submit">Sign in</button>
+      <button type="submit">
+        {isSubmitting ? 'Signing In...' : 'Sign In'}
+      </button>
       <br />
       <Link href="/forgot-password">Forgot password?</Link>
       <br />
diff --git a/app/(auth)/sign-up/page.tsx b/app/(auth)/sign-up/page.tsx
index 6be9db3e..d56984a2 100644
--- a/app/(auth)/sign-up/page.tsx
+++ b/app/(auth)/sign-up/page.tsx
@@ -19,7 +19,7 @@ export default function SignUpPage() {
     register,
     handleSubmit,
     control,
-    formState: { errors },
+    formState: { errors, isSubmitting },
   } = useForm<Inputs>();
   const [isLoading, setIsLoading] = useState(false);
   const supabase = createClient();

From 5ee932a75c664602106d5112833662d8e0337807 Mon Sep 17 00:00:00 2001
From: Camillalalala <camilla4clubs@gmail.com>
Date: Thu, 30 Apr 2026 21:11:34 -0700
Subject: [PATCH 07/10] Implemented rest of error handling to pages and
 components

---
 .vscode/settings.json                         |  9 +-
 .../hq/[storeId]/components/EditStoreForm.tsx | 40 +++++++--
 .../components/RemoveStoreButton.tsx          | 35 ++++++--
 app/(main)/hq/components/AddStoreForm.tsx     | 47 +++++++++--
 .../hq/components/DonationsExportForm.tsx     | 82 +++++++++++++------
 .../add/components/AddStoreItemSearch.tsx     |  6 ++
 .../add/components/StoreItemsDonationForm.tsx | 68 +++++++++------
 app/(main)/profile/components/ProfileForm.tsx | 41 ++++++++--
 .../profile/components/SignOutButton.tsx      | 32 ++++++--
 .../profile/components/UpdatePasswordForm.tsx | 39 +++++++--
 .../people/[userId]/components/Dropdown.tsx   | 29 ++++++-
 .../[storeId]/components/AddAdminSearch.tsx   | 39 ++++++++-
 .../components/DeleteStoreAdminButton.tsx     | 34 +++++++-
 13 files changed, 396 insertions(+), 105 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 9bf4d12b..cd908866 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,5 @@
-{
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true
-}
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "codeQL.githubDatabase.download": "never"
+}
diff --git a/app/(main)/hq/[storeId]/components/EditStoreForm.tsx b/app/(main)/hq/[storeId]/components/EditStoreForm.tsx
index 1796ec2f..6aeabced 100644
--- a/app/(main)/hq/[storeId]/components/EditStoreForm.tsx
+++ b/app/(main)/hq/[storeId]/components/EditStoreForm.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import type { Store } from '@/app/types/store';
 import { updateStore } from '@/app/actions/store';
@@ -10,6 +11,9 @@ type FormValues = {
 };
 
 export default function EditStoreForm({ store }: { store: Store }) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
   const { register, handleSubmit, formState, reset } = useForm<FormValues>({
     defaultValues: {
       name: store.name,
@@ -18,8 +22,24 @@ export default function EditStoreForm({ store }: { store: Store }) {
   });
 
   const onSubmit = async (data: FormValues) => {
-    await updateStore(store.store_id, data);
-    reset(data);
+    setIsSubmitting(true);
+    setErrorMessage('');
+    setSuccessMessage('');
+    try {
+      const result = await updateStore(store.store_id, data);
+      if (!result.success) {
+        setErrorMessage(result.error ?? 'Failed to update store.');
+        return;
+      }
+
+      reset(data);
+      setSuccessMessage('Store updated.');
+    } catch (error) {
+      console.error('Store update error:', error);
+      setErrorMessage('Failed to update store. Please try again.');
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   return (
@@ -33,17 +53,25 @@ export default function EditStoreForm({ store }: { store: Store }) {
         <input {...register('street_address')} />
       </div>
 
+      {errorMessage && <p role="alert">{errorMessage}</p>}
+      {successMessage && <p role="status">{successMessage}</p>}
+
       {formState.isDirty && (
         <>
-          <button type="submit">Save</button>
+          <button type="submit" disabled={isSubmitting}>
+            {isSubmitting ? 'Saving...' : 'Save'}
+          </button>
           <button
             type="button"
-            onClick={() =>
+            disabled={isSubmitting}
+            onClick={() => {
+              setErrorMessage('');
+              setSuccessMessage('');
               reset({
                 name: store.name,
                 street_address: store.street_address,
-              })
-            }
+              });
+            }}
           >
             Cancel
           </button>
diff --git a/app/(main)/hq/[storeId]/components/RemoveStoreButton.tsx b/app/(main)/hq/[storeId]/components/RemoveStoreButton.tsx
index 6041c496..8603bfa3 100644
--- a/app/(main)/hq/[storeId]/components/RemoveStoreButton.tsx
+++ b/app/(main)/hq/[storeId]/components/RemoveStoreButton.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { deleteStore } from '@/app/actions/store';
 
@@ -9,19 +10,37 @@ type RemoveStoreButtonProp = {
 
 export default function RemoveStoreButton({ storeId }: RemoveStoreButtonProp) {
   const router = useRouter();
+  const [isRemoving, setIsRemoving] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
   const handleDeletion = async () => {
-    const { success, error } = await deleteStore(storeId);
-    if (!success) {
-      alert('Failed to remove store.');
-      console.error(error);
-    } else {
+    setIsRemoving(true);
+    setErrorMessage('');
+    setSuccessMessage('');
+    try {
+      const { success, error } = await deleteStore(storeId);
+      if (!success) {
+        setErrorMessage(error ?? 'Failed to remove store.');
+        return;
+      }
+
+      setSuccessMessage('Store removed. Redirecting...');
       router.push('/hq');
+    } catch (error) {
+      console.error('Store deletion error:', error);
+      setErrorMessage('Failed to remove store. Please try again.');
+    } finally {
+      setIsRemoving(false);
     }
   };
 
   return (
-    <button type="button" onClick={handleDeletion}>
-      Remove store
-    </button>
+    <>
+      {errorMessage && <p role="alert">{errorMessage}</p>}
+      {successMessage && <p role="status">{successMessage}</p>}
+      <button type="button" onClick={handleDeletion} disabled={isRemoving}>
+        {isRemoving ? 'Removing...' : 'Remove store'}
+      </button>
+    </>
   );
 }
diff --git a/app/(main)/hq/components/AddStoreForm.tsx b/app/(main)/hq/components/AddStoreForm.tsx
index f294379b..5380901b 100644
--- a/app/(main)/hq/components/AddStoreForm.tsx
+++ b/app/(main)/hq/components/AddStoreForm.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { createStore } from '@/app/actions/store';
 
@@ -9,6 +10,9 @@ type FormValues = {
 };
 
 export default function AddStoreForm() {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
   const { register, handleSubmit, control, reset } = useForm<FormValues>({
     defaultValues: {
       storeName: '',
@@ -31,11 +35,28 @@ export default function AddStoreForm() {
     storeName.trim().length > 0 || storeStreetAddress.trim().length > 0;
 
   const onSubmit = async (data: FormValues) => {
-    await createStore({
-      name: data.storeName,
-      street_address: data.storeStreetAddress,
-    });
-    reset({ storeName: '', storeStreetAddress: '' });
+    setIsSubmitting(true);
+    setErrorMessage('');
+    setSuccessMessage('');
+    try {
+      const result = await createStore({
+        name: data.storeName,
+        street_address: data.storeStreetAddress,
+      });
+
+      if (!result.success) {
+        setErrorMessage(result.error ?? 'Failed to add store.');
+        return;
+      }
+
+      reset({ storeName: '', storeStreetAddress: '' });
+      setSuccessMessage('Store added.');
+    } catch (error) {
+      console.error('Store creation error:', error);
+      setErrorMessage('Failed to add store. Please try again.');
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   return (
@@ -50,12 +71,24 @@ export default function AddStoreForm() {
         <input {...register('storeStreetAddress')} />
       </div>
 
-      {bothFilled && <button type="submit">Save</button>}
+      {errorMessage && <p role="alert">{errorMessage}</p>}
+      {successMessage && <p role="status">{successMessage}</p>}
+
+      {bothFilled && (
+        <button type="submit" disabled={isSubmitting}>
+          {isSubmitting ? 'Saving...' : 'Save'}
+        </button>
+      )}
 
       {eitherFilled && (
         <button
           type="button"
-          onClick={() => reset({ storeName: '', storeStreetAddress: '' })}
+          onClick={() => {
+            setErrorMessage('');
+            setSuccessMessage('');
+            reset({ storeName: '', storeStreetAddress: '' });
+          }}
+          disabled={isSubmitting}
         >
           Cancel
         </button>
diff --git a/app/(main)/hq/components/DonationsExportForm.tsx b/app/(main)/hq/components/DonationsExportForm.tsx
index a4a3645f..5c5e3e66 100644
--- a/app/(main)/hq/components/DonationsExportForm.tsx
+++ b/app/(main)/hq/components/DonationsExportForm.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import {
   exportDonations,
@@ -13,6 +14,9 @@ type FormValues = {
 };
 
 export default function Donations() {
+  const [isExporting, setIsExporting] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
   const {
     register,
     control,
@@ -30,35 +34,55 @@ export default function Donations() {
     name: 'dateMode',
   });
 
-  const onSubmit = () => {
-    handleExport();
+  const downloadCsv = (csvString: string, filename: string) => {
+    const blob = new Blob([csvString], { type: 'text/csv' });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.setAttribute('href', url);
+    a.setAttribute('download', filename);
+    a.click();
+    window.URL.revokeObjectURL(url);
+  };
+
+  const onSubmit = async () => {
+    await handleExport();
   };
 
   const handleExport = async () => {
-    if (dateMode === 'range') {
-      const { startDate, endDate } = getValues();
-      const result = await exportDonationsInRange({
-        startDate: startDate || '',
-        endDate: endDate || '',
-      });
-      const csvString = result?.data;
-      const blob = new Blob([csvString || ''], { type: 'text/csv' });
-      const url = window.URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.setAttribute('href', url);
-      a.setAttribute('download', `donations_${startDate}_to_${endDate}.csv`);
-      a.click();
-      window.URL.revokeObjectURL(url);
-    } else {
-      const result = await exportDonations();
-      const csvString = result?.data;
-      const blob = new Blob([csvString || ''], { type: 'text/csv' });
-      const url = window.URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.setAttribute('href', url);
-      a.setAttribute('download', `donations.csv`);
-      a.click();
-      window.URL.revokeObjectURL(url);
+    setIsExporting(true);
+    setErrorMessage('');
+    setSuccessMessage('');
+    try {
+      if (dateMode === 'range') {
+        const { startDate, endDate } = getValues();
+        const result = await exportDonationsInRange({
+          startDate: startDate || '',
+          endDate: endDate || '',
+        });
+
+        if (!result?.success || !result.data) {
+          setErrorMessage(result?.error ?? 'Failed to export donations.');
+          return;
+        }
+
+        downloadCsv(result.data, `donations_${startDate}_to_${endDate}.csv`);
+      } else {
+        const result = await exportDonations();
+
+        if (!result?.success || !result.data) {
+          setErrorMessage(result?.error ?? 'Failed to export donations.');
+          return;
+        }
+
+        downloadCsv(result.data, 'donations.csv');
+      }
+
+      setSuccessMessage('Donations export downloaded.');
+    } catch (error) {
+      console.error('Donations export error:', error);
+      setErrorMessage('Failed to export donations. Please try again.');
+    } finally {
+      setIsExporting(false);
     }
   };
 
@@ -96,7 +120,11 @@ export default function Donations() {
         </div>
       )}
 
-      <button type="submit">Export</button>
+      {errorMessage && <p role="alert">{errorMessage}</p>}
+      {successMessage && <p role="status">{successMessage}</p>}
+      <button type="submit" disabled={isExporting}>
+        {isExporting ? 'Exporting...' : 'Export'}
+      </button>
     </form>
   );
 }
diff --git a/app/(main)/manage/[storeId]/add/components/AddStoreItemSearch.tsx b/app/(main)/manage/[storeId]/add/components/AddStoreItemSearch.tsx
index ea1883d1..2ab5e86a 100644
--- a/app/(main)/manage/[storeId]/add/components/AddStoreItemSearch.tsx
+++ b/app/(main)/manage/[storeId]/add/components/AddStoreItemSearch.tsx
@@ -26,11 +26,13 @@ export default function AddStoreItemSearch({
   const [results, setResults] = useState<ItemWithNames[]>([]);
   const [searchQuery, setSearchQuery] = useState('');
   const [selectedItems, setSelectedItems] = useState<ItemWithNames[]>([]);
+  const [errorMessage, setErrorMessage] = useState('');
 
   useEffect(() => {
     const fetch = async () => {
       if (!searchQuery) {
         setResults([]);
+        setErrorMessage('');
         return;
       }
       const { data, error } = await supabase
@@ -39,6 +41,8 @@ export default function AddStoreItemSearch({
         .ilike('name', `%${searchQuery}%`);
       if (error) {
         console.error(error);
+        setErrorMessage(error.message ?? 'Failed to search inventory items.');
+        setResults([]);
         return;
       } else {
         const items: ItemWithNames[] = [];
@@ -49,6 +53,7 @@ export default function AddStoreItemSearch({
             subcategory_name: item.subcategories?.name,
           });
         }
+        setErrorMessage('');
         setResults(items);
       }
     };
@@ -88,6 +93,7 @@ export default function AddStoreItemSearch({
         value={searchQuery}
         onChange={(e) => setSearchQuery(e.target.value)}
       />
+      {errorMessage && <p role="alert">{errorMessage}</p>}
       <ul>
         {results?.map((item) => (
           <div key={item.name}>
diff --git a/app/(main)/manage/[storeId]/add/components/StoreItemsDonationForm.tsx b/app/(main)/manage/[storeId]/add/components/StoreItemsDonationForm.tsx
index 717044ac..448b796e 100644
--- a/app/(main)/manage/[storeId]/add/components/StoreItemsDonationForm.tsx
+++ b/app/(main)/manage/[storeId]/add/components/StoreItemsDonationForm.tsx
@@ -67,6 +67,9 @@ export default function StoreItemsDonationForm({
     itemSettingsSelected.includes('addInventoryItems');
   const donorType = useWatch({ control: methods.control, name: 'donor_type' });
   const [autoFillItems, setAutoFillItems] = useState<ItemWithNames[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
   const setItemsDonated = (value: string) => {
     methods.setValue('items_donated', value, { shouldValidate: true });
   };
@@ -77,9 +80,12 @@ export default function StoreItemsDonationForm({
     }
   }, [isGiftSelected, isInventorySelected, autoFillItems, methods]);
   const onSubmit = async (data: CombinedFormData) => {
+    setIsSubmitting(true);
+    setErrorMessage('');
+    setSuccessMessage('');
     try {
-      let inventoryErrorOccurred = false;
-      let donationErrorOccurred = false;
+      const inventoryErrors: string[] = [];
+      let donationError = '';
 
       if (data.itemSettings?.includes('addInventoryItems')) {
         for (const item of data.items) {
@@ -88,7 +94,7 @@ export default function StoreItemsDonationForm({
             item.quantity,
             store.store_id,
           );
-          if (error) inventoryErrorOccurred = true;
+          if (error) inventoryErrors.push(error);
         }
       }
 
@@ -128,14 +134,19 @@ export default function StoreItemsDonationForm({
           store_street_address: store?.street_address,
         };
         const { error } = await createDonation(donation);
-        if (error) donationErrorOccurred = true;
+        if (error) donationError = error;
       }
-      if (inventoryErrorOccurred && donationErrorOccurred) {
-        alert('Both inventory update and donation submission failed.');
-      } else if (inventoryErrorOccurred) {
-        alert('Inventory update failed.');
-      } else if (donationErrorOccurred) {
-        alert('Donation submission failed.');
+
+      if (inventoryErrors.length > 0 && donationError) {
+        setErrorMessage(
+          `Inventory update and donation submission failed. ${donationError}`,
+        );
+      } else if (inventoryErrors.length > 0) {
+        setErrorMessage(
+          inventoryErrors[0] ?? 'One or more inventory updates failed.',
+        );
+      } else if (donationError) {
+        setErrorMessage(donationError);
       } else {
         // Reset all fields to empty/default values
         methods.reset({
@@ -157,9 +168,13 @@ export default function StoreItemsDonationForm({
         });
         setAutoFillItems([]);
         methods.clearErrors();
+        setSuccessMessage('Submission saved.');
       }
     } catch (error) {
       console.error('Failed to process form:', error);
+      setErrorMessage('Failed to process submission. Please try again.');
+    } finally {
+      setIsSubmitting(false);
     }
   };
   return (
@@ -196,20 +211,25 @@ export default function StoreItemsDonationForm({
         )}
         {(itemSettingsSelected?.includes('giftInKind') ||
           itemSettingsSelected?.includes('addInventoryItems')) && (
-          <button
-            type="submit"
-            style={{
-              marginTop: '20px',
-              padding: '10px',
-              borderRadius: '5px',
-              border: 'none',
-              backgroundColor: '#007bff',
-              color: '#fff',
-              fontWeight: 'bold',
-            }}
-          >
-            Submit
-          </button>
+          <>
+            {errorMessage && <p role="alert">{errorMessage}</p>}
+            {successMessage && <p role="status">{successMessage}</p>}
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              style={{
+                marginTop: '20px',
+                padding: '10px',
+                borderRadius: '5px',
+                border: 'none',
+                backgroundColor: '#007bff',
+                color: '#fff',
+                fontWeight: 'bold',
+              }}
+            >
+              {isSubmitting ? 'Submitting...' : 'Submit'}
+            </button>
+          </>
         )}
       </form>
     </FormProvider>
diff --git a/app/(main)/profile/components/ProfileForm.tsx b/app/(main)/profile/components/ProfileForm.tsx
index 5afcb779..30bf5905 100644
--- a/app/(main)/profile/components/ProfileForm.tsx
+++ b/app/(main)/profile/components/ProfileForm.tsx
@@ -17,6 +17,8 @@ type ProfileFormValues = {
 
 export default function ProfileForm({ user }: { user: User }) {
   const [isSaving, setIsSaving] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
   // photoUrl represents what is currently in the DB
   const [photoUrl, setPhotoUrl] = useState<string | null>(
     user.profile_photo_url,
@@ -44,9 +46,13 @@ export default function ProfileForm({ user }: { user: User }) {
   });
 
   const handleFileSelect = (file: File) => {
+    setErrorMessage('');
+    setSuccessMessage('');
     const maxSize = 200 * 1024; // 200 KB in bytes
     if (file.size > maxSize) {
-      alert('File is too large. Please select an image under 200 KB.');
+      setErrorMessage(
+        'File is too large. Please select an image under 200 KB.',
+      );
       return;
     }
     // Create a temporary local blob URL for immediate UI feedback
@@ -57,6 +63,8 @@ export default function ProfileForm({ user }: { user: User }) {
   };
 
   const handleRemovePhoto = () => {
+    setErrorMessage('');
+    setSuccessMessage('');
     setPreviewUrl(null);
     setSelectedFile(null);
     setIsPendingDelete(true);
@@ -64,6 +72,8 @@ export default function ProfileForm({ user }: { user: User }) {
   };
 
   const onCancel = () => {
+    setErrorMessage('');
+    setSuccessMessage('');
     if (previewUrl) URL.revokeObjectURL(previewUrl);
     setPreviewUrl(null);
     setSelectedFile(null);
@@ -75,6 +85,8 @@ export default function ProfileForm({ user }: { user: User }) {
 
   const onSubmit = async (data: ProfileFormValues) => {
     setIsSaving(true);
+    setErrorMessage('');
+    setSuccessMessage('');
     try {
       let finalPhotoUrl = photoUrl;
       const {
@@ -84,9 +96,15 @@ export default function ProfileForm({ user }: { user: User }) {
       if (authUser) {
         // Handle deletion if flagged
         if (isPendingDelete) {
-          await supabase.storage
+          const { error: deleteError } = await supabase.storage
             .from('profile_photos')
             .remove([`${authUser.id}/profile.jpg`]);
+          if (deleteError) {
+            setErrorMessage(
+              deleteError.message ?? 'Failed to remove profile photo.',
+            );
+            return;
+          }
           finalPhotoUrl = null;
         }
 
@@ -100,6 +118,10 @@ export default function ProfileForm({ user }: { user: User }) {
 
           if (uploadError) {
             console.error('Upload error:', uploadError.message);
+            setErrorMessage(
+              uploadError.message ?? 'Failed to upload profile photo.',
+            );
+            return;
           } else {
             const { data: publicData } = supabase.storage
               .from('profile_photos')
@@ -134,12 +156,18 @@ export default function ProfileForm({ user }: { user: User }) {
           lastName: data.lastName,
           email: user.email,
         });
-        if (data.email !== user.email) {
-          alert('Please check your new email address to verify the change.');
-        }
+        setSuccessMessage(
+          data.email !== user.email
+            ? 'Profile saved. Please check your new email address to verify the change.'
+            : 'Profile saved.',
+        );
+      } else {
+        setErrorMessage(result.error ?? 'Failed to save profile.');
+        return;
       }
     } catch (error) {
       console.error('Error saving profile:', error);
+      setErrorMessage('Failed to save profile. Please try again.');
     } finally {
       setIsSaving(false);
     }
@@ -194,6 +222,9 @@ export default function ProfileForm({ user }: { user: User }) {
       )}
       <br />
 
+      {errorMessage && <p role="alert">{errorMessage}</p>}
+      {successMessage && <p role="status">{successMessage}</p>}
+
       {hasDirtyTextOrImage && (
         <>
           <button type="submit" disabled={isSaving}>
diff --git a/app/(main)/profile/components/SignOutButton.tsx b/app/(main)/profile/components/SignOutButton.tsx
index 16d9a341..6aa9d39d 100644
--- a/app/(main)/profile/components/SignOutButton.tsx
+++ b/app/(main)/profile/components/SignOutButton.tsx
@@ -2,17 +2,39 @@
 
 import { createClient } from '@/app/lib/supabase/browser-client';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 
 export default function SignOutButton() {
   const router = useRouter();
   const supabase = createClient();
+  const [isSigningOut, setIsSigningOut] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+
   async function signOut() {
-    const { error } = await supabase.auth.signOut();
-    if (error) {
-      console.error('Sign-out error:', error.message);
+    setIsSigningOut(true);
+    setErrorMessage('');
+    try {
+      const { error } = await supabase.auth.signOut();
+      if (error) {
+        console.error('Sign-out error:', error.message);
+        setErrorMessage(error.message ?? 'Failed to sign out.');
+        return;
+      }
+      router.push('/home');
+    } catch (error) {
+      console.error('Sign-out error:', error);
+      setErrorMessage('Failed to sign out. Please try again.');
+    } finally {
+      setIsSigningOut(false);
     }
-    router.push('/home');
   }
 
-  return <button onClick={signOut}>Sign out</button>;
+  return (
+    <>
+      <button onClick={signOut} disabled={isSigningOut}>
+        {isSigningOut ? 'Signing out...' : 'Sign out'}
+      </button>
+      {errorMessage && <p role="alert">{errorMessage}</p>}
+    </>
+  );
 }
diff --git a/app/(main)/profile/components/UpdatePasswordForm.tsx b/app/(main)/profile/components/UpdatePasswordForm.tsx
index 3fac01d0..423501a0 100644
--- a/app/(main)/profile/components/UpdatePasswordForm.tsx
+++ b/app/(main)/profile/components/UpdatePasswordForm.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { createClient } from '@/app/lib/supabase/browser-client';
 
@@ -9,6 +10,9 @@ type FormValues = {
 };
 
 export default function UpdatePasswordForm() {
+  const [isSaving, setIsSaving] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
   const {
     register,
     handleSubmit,
@@ -40,16 +44,28 @@ export default function UpdatePasswordForm() {
     newPassword === newPasswordConfirmation;
 
   const onSubmit = async (formData: FormValues) => {
-    const { error } = await supabase.auth.updateUser({
-      password: formData.newPassword,
-    });
+    setIsSaving(true);
+    setErrorMessage('');
+    setSuccessMessage('');
+    try {
+      const { error } = await supabase.auth.updateUser({
+        password: formData.newPassword,
+      });
 
-    if (error) {
+      if (error) {
+        console.error('Password update error:', error);
+        setErrorMessage(error.message ?? 'Failed to update password.');
+        return;
+      }
+
+      setSuccessMessage('Password updated.');
+      reset();
+    } catch (error) {
       console.error('Password update error:', error);
-      return;
+      setErrorMessage('Failed to update password. Please try again.');
+    } finally {
+      setIsSaving(false);
     }
-
-    reset();
   };
 
   return (
@@ -86,11 +102,18 @@ export default function UpdatePasswordForm() {
               newPasswordConfirmation: '',
             })
           }
+          disabled={isSaving}
         >
           Cancel
         </button>
       )}
-      {passwordsMatch && <button type="submit">Save</button>}
+      {errorMessage && <p role="alert">{errorMessage}</p>}
+      {successMessage && <p role="status">{successMessage}</p>}
+      {passwordsMatch && (
+        <button type="submit" disabled={isSaving}>
+          {isSaving ? 'Saving...' : 'Save'}
+        </button>
+      )}
     </form>
   );
 }
diff --git a/app/(main)/team/people/[userId]/components/Dropdown.tsx b/app/(main)/team/people/[userId]/components/Dropdown.tsx
index 4f55fbcb..da8a4177 100644
--- a/app/(main)/team/people/[userId]/components/Dropdown.tsx
+++ b/app/(main)/team/people/[userId]/components/Dropdown.tsx
@@ -11,6 +11,9 @@ export default function Dropdown({
   roleId: number;
 }) {
   const [currentRoleId, setCurrentRoleId] = useState(roleId);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
   const allRoles = [
     {
       id: 1,
@@ -37,9 +40,23 @@ export default function Dropdown({
     <form
       onSubmit={async (e) => {
         e.preventDefault();
-        const res = await updateUserRole(userId, currentRoleId);
-        if (!res.success) {
-          alert('Insufficient privileges to update role');
+        setIsSubmitting(true);
+        setErrorMessage('');
+        setSuccessMessage('');
+        try {
+          const res = await updateUserRole(userId, currentRoleId);
+          if (!res.success) {
+            setErrorMessage(
+              res.error ?? 'Insufficient privileges to update role.',
+            );
+            return;
+          }
+          setSuccessMessage('Role updated.');
+        } catch (error) {
+          console.error('Role update error:', error);
+          setErrorMessage('Unable to update role. Please try again.');
+        } finally {
+          setIsSubmitting(false);
         }
       }}
     >
@@ -54,7 +71,11 @@ export default function Dropdown({
           </option>
         ))}
       </select>
-      <button type="submit">Update role</button>
+      <button type="submit" disabled={isSubmitting}>
+        {isSubmitting ? 'Updating...' : 'Update role'}
+      </button>
+      {errorMessage && <p role="alert">{errorMessage}</p>}
+      {successMessage && <p role="status">{successMessage}</p>}
     </form>
   );
 }
diff --git a/app/(main)/team/store-admins/[storeId]/components/AddAdminSearch.tsx b/app/(main)/team/store-admins/[storeId]/components/AddAdminSearch.tsx
index bc52929c..c90aa2b2 100644
--- a/app/(main)/team/store-admins/[storeId]/components/AddAdminSearch.tsx
+++ b/app/(main)/team/store-admins/[storeId]/components/AddAdminSearch.tsx
@@ -17,6 +17,9 @@ export default function AddAdminSearch({
 }) {
   const [search, setSearch] = useState('');
   const [searchData, setSearchData] = useState<User[]>([]);
+  const [isAddingUserId, setIsAddingUserId] = useState<string | null>(null);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
 
   // search filtering
   useEffect(() => {
@@ -24,6 +27,8 @@ export default function AddAdminSearch({
       const d = search.trim();
       if (!d) {
         setSearchData([]);
+        setErrorMessage('');
+        setSuccessMessage('');
         return;
       }
 
@@ -33,6 +38,7 @@ export default function AddAdminSearch({
         .ilike('full_name', `%${d}%`);
       if (error) {
         console.error('Error searching for admins:', error);
+        setErrorMessage(error.message ?? 'Failed to search for admins.');
         return;
       }
 
@@ -41,12 +47,35 @@ export default function AddAdminSearch({
       );
 
       setSearchData(filtered);
+      setErrorMessage('');
     }, 300);
 
     // returning a cleanup function to clear previous timeouts
     return () => clearTimeout(timeout);
   }, [search, existingAdminUserIds]);
 
+  const handleAddAdmin = async (userId: string) => {
+    setIsAddingUserId(userId);
+    setErrorMessage('');
+    setSuccessMessage('');
+    try {
+      const result = await createStoreAdmin({
+        user_id: userId,
+        store_id: storeId,
+      });
+      if (!result.success) {
+        setErrorMessage(result.error ?? 'Failed to add admin.');
+        return;
+      }
+      setSuccessMessage('Admin added.');
+    } catch (error) {
+      console.error('Store admin creation error:', error);
+      setErrorMessage('Failed to add admin. Please try again.');
+    } finally {
+      setIsAddingUserId(null);
+    }
+  };
+
   return (
     <div>
       {/* searching */}
@@ -60,17 +89,19 @@ export default function AddAdminSearch({
         />
       </div>
 
+      {errorMessage && <p role="alert">{errorMessage}</p>}
+      {successMessage && <p role="status">{successMessage}</p>}
+
       {/* search results */}
       {searchData.map((u) => (
         <div key={u.user_id} style={{ marginBottom: '40px' }}>
           <UserCard user={u} noBottomMargin></UserCard>
           <button
             type="button"
-            onClick={() =>
-              createStoreAdmin({ user_id: u.user_id, store_id: storeId })
-            }
+            onClick={() => handleAddAdmin(u.user_id)}
+            disabled={isAddingUserId === u.user_id}
           >
-            Add admin
+            {isAddingUserId === u.user_id ? 'Adding...' : 'Add admin'}
           </button>
         </div>
       ))}
diff --git a/app/(main)/team/store-admins/[storeId]/components/DeleteStoreAdminButton.tsx b/app/(main)/team/store-admins/[storeId]/components/DeleteStoreAdminButton.tsx
index f6932e63..b88f4e98 100644
--- a/app/(main)/team/store-admins/[storeId]/components/DeleteStoreAdminButton.tsx
+++ b/app/(main)/team/store-admins/[storeId]/components/DeleteStoreAdminButton.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import { deleteStoreAdmin } from '@/app/actions/store';
 
 export default function DeleteStoreAdminButton({
@@ -7,9 +8,36 @@ export default function DeleteStoreAdminButton({
 }: {
   storeAdminId: string;
 }) {
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+    setErrorMessage('');
+    setSuccessMessage('');
+    try {
+      const result = await deleteStoreAdmin(storeAdminId);
+      if (!result.success) {
+        setErrorMessage(result.error ?? 'Failed to remove admin.');
+        return;
+      }
+      setSuccessMessage('Admin removed.');
+    } catch (error) {
+      console.error('Store admin deletion error:', error);
+      setErrorMessage('Failed to remove admin. Please try again.');
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
   return (
-    <button type="button" onClick={() => deleteStoreAdmin(storeAdminId)}>
-      Remove admin
-    </button>
+    <>
+      <button type="button" onClick={handleDelete} disabled={isDeleting}>
+        {isDeleting ? 'Removing...' : 'Remove admin'}
+      </button>
+      {errorMessage && <p role="alert">{errorMessage}</p>}
+      {successMessage && <p role="status">{successMessage}</p>}
+    </>
   );
 }

From ef5acdb522882c67c09e64364170722fbd82f91e Mon Sep 17 00:00:00 2001
From: Camillalalala <camilla4clubs@gmail.com>
Date: Thu, 30 Apr 2026 21:44:17 -0700
Subject: [PATCH 08/10] Added SubmitButton component for reusability and
 implemented transition states

---
 app/(main)/components/DeleteTicketButton.tsx  | 25 ++++---
 .../components/InStockTicketItemCard.tsx      | 29 +++++---
 .../components/RemoveTicketItemButton.tsx     | 19 +++--
 .../components/TicketStatusDropdown.tsx       | 25 ++++---
 .../components/LightweightDonationForm.tsx    |  5 +-
 .../components/DeleteStoreItemButton.tsx      | 33 +++++----
 .../profile/components/UpdatePasswordForm.tsx | 14 ++--
 .../components/AddInStockToCartForm.tsx       |  8 +-
 .../components/AddOutOfStockToCartForm.tsx    |  8 +-
 .../request/components/SubmitButton.tsx       | 17 +++++
 .../people/[userId]/components/Dropdown.tsx   | 73 ++++++++++++-------
 11 files changed, 155 insertions(+), 101 deletions(-)
 create mode 100644 app/(main)/request/components/SubmitButton.tsx

diff --git a/app/(main)/components/DeleteTicketButton.tsx b/app/(main)/components/DeleteTicketButton.tsx
index d4d17595..ce20948a 100644
--- a/app/(main)/components/DeleteTicketButton.tsx
+++ b/app/(main)/components/DeleteTicketButton.tsx
@@ -2,35 +2,38 @@
 
 import { deleteTicket } from '@/app/actions/ticket';
 import { usePathname, useRouter } from 'next/navigation';
-import { useState } from 'react';
+import { useState, useTransition } from 'react';
 
 export default function DeleteTicketButton({ ticketId }: { ticketId: string }) {
   const pathname = usePathname();
   const router = useRouter();
   const [errorMessage, setErrorMessage] = useState('');
   const [successMessage, setSuccessMessage] = useState('');
+  const [isPending, startTransition] = useTransition();
 
   async function handleDelete() {
     setErrorMessage('');
     setSuccessMessage('');
-    const result = await deleteTicket(ticketId);
+    startTransition(async () => {
+      const result = await deleteTicket(ticketId);
 
-    if (!result.success) {
-      setErrorMessage('Failed to delete ticket.' + result.error);
-      return;
-    }
+      if (!result.success) {
+        setErrorMessage('Failed to delete ticket.' + result.error);
+        return;
+      }
 
-    setSuccessMessage('Ticket deleted successfully!');
-    const parentPath = pathname.split('/').slice(0, -1).join('/') || '/';
-    router.push(parentPath);
+      setSuccessMessage('Ticket deleted successfully!');
+      const parentPath = pathname.split('/').slice(0, -1).join('/') || '/';
+      router.push(parentPath);
+    });
   }
 
   return (
     <>
       {errorMessage && <div style={{ color: 'red' }}>{errorMessage}</div>}
       {successMessage && <div style={{ color: 'green' }}>{successMessage}</div>}
-      <button type="button" onClick={handleDelete}>
-        Delete ticket
+      <button type="button" onClick={handleDelete} disabled={isPending}>
+        {isPending ? 'Deleting...' : 'Delete ticket'}
       </button>
     </>
   );
diff --git a/app/(main)/components/InStockTicketItemCard.tsx b/app/(main)/components/InStockTicketItemCard.tsx
index 19659f9f..cb979209 100644
--- a/app/(main)/components/InStockTicketItemCard.tsx
+++ b/app/(main)/components/InStockTicketItemCard.tsx
@@ -24,6 +24,7 @@ export default function InStockTicketItemCard({
   const [quantity, setQuantity] = useState(quantityRequested);
   const [savedQuantity, setSavedQuantity] = useState(quantityRequested);
   const [errorMessage, setErrorMessage] = useState('');
+  const [isSaving, setIsSaving] = useState(false);
 
   const hasChanged = quantity !== savedQuantity;
 
@@ -34,15 +35,20 @@ export default function InStockTicketItemCard({
       return;
     }
 
-    const result = await updateTicketItemQuantity(ticketItemId, quantity);
+    setIsSaving(true);
+    try {
+      const result = await updateTicketItemQuantity(ticketItemId, quantity);
 
-    if (!result.success) {
-      setErrorMessage('Failed to update ticket item quantity.' + result.error);
-      return;
-    }
+      if (!result.success) {
+        setErrorMessage('Failed to update ticket item quantity.' + result.error);
+        return;
+      }
 
-    setSavedQuantity(quantity);
-    setErrorMessage('');
+      setSavedQuantity(quantity);
+      setErrorMessage('');
+    } finally {
+      setIsSaving(false);
+    }
   };
 
   const handleCancel = () => {
@@ -67,6 +73,7 @@ export default function InStockTicketItemCard({
             setQuantity(Number(e.target.value));
             setErrorMessage('');
           }}
+          disabled={isSaving}
         />
       </label>
       {errorMessage && (
@@ -76,8 +83,12 @@ export default function InStockTicketItemCard({
       )}
       {hasChanged && (
         <>
-          <button onClick={handleSave}>Save</button>
-          <button onClick={handleCancel}>Cancel</button>
+          <button onClick={handleSave} disabled={isSaving}>
+            {isSaving ? 'Saving...' : 'Save'}
+          </button>
+          <button onClick={handleCancel} disabled={isSaving}>
+            Cancel
+          </button>
         </>
       )}
     </div>
diff --git a/app/(main)/components/RemoveTicketItemButton.tsx b/app/(main)/components/RemoveTicketItemButton.tsx
index 3e49c006..2b5bd2b7 100644
--- a/app/(main)/components/RemoveTicketItemButton.tsx
+++ b/app/(main)/components/RemoveTicketItemButton.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { deleteTicketItem } from '@/app/actions/ticket';
-import { useState } from 'react';
+import { useState, useTransition } from 'react';
 
 type RemoveTicketItemButtonProps = {
   ticketItemId: string;
@@ -11,20 +11,23 @@ export default function RemoveTicketItemButton({
   ticketItemId,
 }: RemoveTicketItemButtonProps) {
   const [errorMessage, setErrorMessage] = useState('');
+  const [isPending, startTransition] = useTransition();
 
   const handleDelete = async () => {
     setErrorMessage('');
-    const { success, error } = await deleteTicketItem(ticketItemId);
-    if (!success) {
-      setErrorMessage('Failed to remove ticket item.' + error);
-      return;
-    }
+    startTransition(async () => {
+      const { success, error } = await deleteTicketItem(ticketItemId);
+      if (!success) {
+        setErrorMessage('Failed to remove ticket item.' + error);
+        return;
+      }
+    });
   };
 
   return (
     <>
-      <button type="button" onClick={handleDelete}>
-        Remove
+      <button type="button" onClick={handleDelete} disabled={isPending}>
+        {isPending ? 'Removing...' : 'Remove'}
       </button>
       {errorMessage && (
         <p role="alert" style={{ color: 'red' }}>
diff --git a/app/(main)/components/TicketStatusDropdown.tsx b/app/(main)/components/TicketStatusDropdown.tsx
index 8de720ce..b2709f21 100644
--- a/app/(main)/components/TicketStatusDropdown.tsx
+++ b/app/(main)/components/TicketStatusDropdown.tsx
@@ -18,6 +18,7 @@ export default function TicketStatusDropdown({
   const [originalStatus, setOriginalStatus] =
     useState<TicketStatus>(currentStatus);
   const [error, setError] = useState<string | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
 
   const handleCancel = () => {
     setError(null);
@@ -26,13 +27,18 @@ export default function TicketStatusDropdown({
 
   const handleSave = async () => {
     setError(null);
+    setIsSaving(true);
 
-    const result = await updateTicketStatus(selectedStatus, ticketId);
-    if (result.success) {
-      setOriginalStatus(selectedStatus);
-      return;
-    } else {
-      setError('Error updating status. No changes were saved.' + result.error);
+    try {
+      const result = await updateTicketStatus(selectedStatus, ticketId);
+      if (result.success) {
+        setOriginalStatus(selectedStatus);
+        return;
+      } else {
+        setError('Error updating status. No changes were saved.' + result.error);
+      }
+    } finally {
+      setIsSaving(false);
     }
   };
 
@@ -41,6 +47,7 @@ export default function TicketStatusDropdown({
       <select
         value={selectedStatus}
         onChange={(e) => setSelectedStatus(e.target.value as TicketStatus)}
+        disabled={isSaving}
       >
         {statusOptions.map((status) => (
           <option key={status} value={status}>
@@ -51,10 +58,10 @@ export default function TicketStatusDropdown({
 
       {selectedStatus !== originalStatus && (
         <div>
-          <button type="button" onClick={handleSave}>
-            Save
+          <button type="button" onClick={handleSave} disabled={isSaving}>
+            {isSaving ? 'Saving...' : 'Save'}
           </button>
-          <button type="button" onClick={handleCancel}>
+          <button type="button" onClick={handleCancel} disabled={isSaving}>
             Cancel
           </button>
           {error && <div>{error}</div>}
diff --git a/app/(main)/home/donate/components/LightweightDonationForm.tsx b/app/(main)/home/donate/components/LightweightDonationForm.tsx
index 8131cf6a..7b3c5695 100644
--- a/app/(main)/home/donate/components/LightweightDonationForm.tsx
+++ b/app/(main)/home/donate/components/LightweightDonationForm.tsx
@@ -33,7 +33,7 @@ export default function LightweightDonationForm() {
     control,
     reset,
     clearErrors,
-    formState: { errors },
+    formState: { errors, isSubmitting },
   } = useForm<FormData>({
     defaultValues: {
       donor_type: undefined,
@@ -468,6 +468,7 @@ export default function LightweightDonationForm() {
 
         <button
           type="submit"
+          disabled={isSubmitting}
           style={{
             marginTop: '20px',
             padding: '10px',
@@ -478,7 +479,7 @@ export default function LightweightDonationForm() {
             fontWeight: 'bold',
           }}
         >
-          Submit
+          {isSubmitting ? 'Submitting...' : 'Submit'}
         </button>
 
         {/* Success message now handled above form */}
diff --git a/app/(main)/manage/[storeId]/[storeItemId]/components/DeleteStoreItemButton.tsx b/app/(main)/manage/[storeId]/[storeItemId]/components/DeleteStoreItemButton.tsx
index d0c9ea2c..1dc8ff90 100644
--- a/app/(main)/manage/[storeId]/[storeItemId]/components/DeleteStoreItemButton.tsx
+++ b/app/(main)/manage/[storeId]/[storeItemId]/components/DeleteStoreItemButton.tsx
@@ -2,7 +2,7 @@
 
 import { deleteStoreItem } from '@/app/actions/store';
 import { usePathname, useRouter } from 'next/navigation';
-import { useState } from 'react';
+import { useState, useTransition } from 'react';
 
 export default function DeleteStoreItemButton({
   storeItemId,
@@ -13,34 +13,37 @@ export default function DeleteStoreItemButton({
   const router = useRouter();
   const [errorMessage, setErrorMessage] = useState('');
   const [successMessage, setSuccessMessage] = useState('');
+  const [isPending, startTransition] = useTransition();
 
   async function handleDelete() {
     setErrorMessage('');
     setSuccessMessage('');
-    const result = await deleteStoreItem(storeItemId);
+    startTransition(async () => {
+      const result = await deleteStoreItem(storeItemId);
 
-    if (!result.success) {
-      setErrorMessage('Failed to delete store item.' + result.error);
-      return;
-    }
+      if (!result.success) {
+        setErrorMessage('Failed to delete store item.' + result.error);
+        return;
+      }
 
-    setSuccessMessage('Store item deleted successfully!');
-    const targetPath = pathname.split('/').slice(0, -1).join('/') || '/';
+      setSuccessMessage('Store item deleted successfully!');
+      const targetPath = pathname.split('/').slice(0, -1).join('/') || '/';
 
-    if (pathname === targetPath) {
-      router.refresh();
-      return;
-    }
+      if (pathname === targetPath) {
+        router.refresh();
+        return;
+      }
 
-    router.push(targetPath);
+      router.push(targetPath);
+    });
   }
 
   return (
     <>
       {errorMessage && <div style={{ color: 'red' }}>{errorMessage}</div>}
       {successMessage && <div style={{ color: 'green' }}>{successMessage}</div>}
-      <button type="button" onClick={handleDelete}>
-        Remove item
+      <button type="button" onClick={handleDelete} disabled={isPending}>
+        {isPending ? 'Removing...' : 'Remove item'}
       </button>
     </>
   );
diff --git a/app/(main)/profile/components/UpdatePasswordForm.tsx b/app/(main)/profile/components/UpdatePasswordForm.tsx
index 423501a0..8df03190 100644
--- a/app/(main)/profile/components/UpdatePasswordForm.tsx
+++ b/app/(main)/profile/components/UpdatePasswordForm.tsx
@@ -93,6 +93,13 @@ export default function UpdatePasswordForm() {
         <p role="alert">Passwords do not match.</p>
       )}
       <br />
+      {errorMessage && <p role="alert">{errorMessage}</p>}
+      {successMessage && <p role="status">{successMessage}</p>}
+      {passwordsMatch && (
+        <button type="submit" disabled={isSaving}>
+          {isSaving ? 'Saving...' : 'Save'}
+        </button>
+      )}
       {(newPassword.length > 0 || newPasswordConfirmation.length > 0) && (
         <button
           type="button"
@@ -107,13 +114,6 @@ export default function UpdatePasswordForm() {
           Cancel
         </button>
       )}
-      {errorMessage && <p role="alert">{errorMessage}</p>}
-      {successMessage && <p role="status">{successMessage}</p>}
-      {passwordsMatch && (
-        <button type="submit" disabled={isSaving}>
-          {isSaving ? 'Saving...' : 'Save'}
-        </button>
-      )}
     </form>
   );
 }
diff --git a/app/(main)/request/[storeId]/[storeItemId]/components/AddInStockToCartForm.tsx b/app/(main)/request/[storeId]/[storeItemId]/components/AddInStockToCartForm.tsx
index b32a62d6..f8ae2d77 100644
--- a/app/(main)/request/[storeId]/[storeItemId]/components/AddInStockToCartForm.tsx
+++ b/app/(main)/request/[storeId]/[storeItemId]/components/AddInStockToCartForm.tsx
@@ -3,6 +3,7 @@
 import Form from 'next/form';
 import { useState } from 'react';
 import { addToCart } from '@/app/actions/ticket';
+import SubmitButton from '@/app/(main)/request/components/SubmitButton';
 
 interface AddInStockToCartFormProps {
   storeId: string;
@@ -43,12 +44,7 @@ export default function AddInStockToCartForm({
           required
         />
 
-        <button
-          type="submit"
-          className="bg-blue-500 text-white px-4 py-2 rounded"
-        >
-          Add to Cart
-        </button>
+        <SubmitButton />
       </Form>
       {errorMessage && (
         <div
diff --git a/app/(main)/request/components/AddOutOfStockToCartForm.tsx b/app/(main)/request/components/AddOutOfStockToCartForm.tsx
index 09d3e73c..8c12a9db 100644
--- a/app/(main)/request/components/AddOutOfStockToCartForm.tsx
+++ b/app/(main)/request/components/AddOutOfStockToCartForm.tsx
@@ -3,6 +3,7 @@
 import Form from 'next/form';
 import { useState } from 'react';
 import { addToCart } from '@/app/actions/ticket';
+import SubmitButton from './SubmitButton';
 
 interface AddOutOfStockToCartFormProps {
   storeId: string;
@@ -69,12 +70,7 @@ export default function AddOutOfStockToCartForm({
           type="text"
           placeholder="Description of item..."
         />
-        <button
-          type="submit"
-          className="bg-blue-500 text-white px-4 py-2 rounded"
-        >
-          Add to Cart
-        </button>
+        <SubmitButton />
       </Form>
     </div>
   );
diff --git a/app/(main)/request/components/SubmitButton.tsx b/app/(main)/request/components/SubmitButton.tsx
new file mode 100644
index 00000000..8f1cd1b7
--- /dev/null
+++ b/app/(main)/request/components/SubmitButton.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { useFormStatus } from 'react-dom';
+
+export default function SubmitButton() {
+  const { pending } = useFormStatus();
+
+  return (
+    <button
+      type="submit"
+      disabled={pending}
+      className="bg-blue-500 text-white px-4 py-2 rounded"
+    >
+      {pending ? 'Adding...' : 'Add to Cart'}
+    </button>
+  );
+}
diff --git a/app/(main)/team/people/[userId]/components/Dropdown.tsx b/app/(main)/team/people/[userId]/components/Dropdown.tsx
index da8a4177..c4fccfc7 100644
--- a/app/(main)/team/people/[userId]/components/Dropdown.tsx
+++ b/app/(main)/team/people/[userId]/components/Dropdown.tsx
@@ -11,9 +11,41 @@ export default function Dropdown({
   roleId: number;
 }) {
   const [currentRoleId, setCurrentRoleId] = useState(roleId);
+  const [originalRoleId, setOriginalRoleId] = useState(roleId);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
   const [successMessage, setSuccessMessage] = useState('');
+  
+  const hasChanged = currentRoleId !== originalRoleId;
+
+  const handleSave = async () => {
+    setIsSubmitting(true);
+    setErrorMessage('');
+    setSuccessMessage('');
+    try {
+      const res = await updateUserRole(userId, currentRoleId);
+      if (!res.success) {
+        setErrorMessage(
+          res.error ?? 'Insufficient privileges to update role.',
+        );
+        return;
+      }
+      setOriginalRoleId(currentRoleId);
+      setSuccessMessage('Role updated.');
+    } catch (error) {
+      console.error('Role update error:', error);
+      setErrorMessage('Unable to update role. Please try again.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setCurrentRoleId(originalRoleId);
+    setErrorMessage('');
+    setSuccessMessage('');
+  };
+
   const allRoles = [
     {
       id: 1,
@@ -37,33 +69,11 @@ export default function Dropdown({
     },
   ];
   return (
-    <form
-      onSubmit={async (e) => {
-        e.preventDefault();
-        setIsSubmitting(true);
-        setErrorMessage('');
-        setSuccessMessage('');
-        try {
-          const res = await updateUserRole(userId, currentRoleId);
-          if (!res.success) {
-            setErrorMessage(
-              res.error ?? 'Insufficient privileges to update role.',
-            );
-            return;
-          }
-          setSuccessMessage('Role updated.');
-        } catch (error) {
-          console.error('Role update error:', error);
-          setErrorMessage('Unable to update role. Please try again.');
-        } finally {
-          setIsSubmitting(false);
-        }
-      }}
-    >
+    <div>
       <select
-        name="role"
         value={currentRoleId}
         onChange={(e) => setCurrentRoleId(Number(e.target.value))}
+        disabled={isSubmitting}
       >
         {allRoles.map((r) => (
           <option key={r.id} value={r.id}>
@@ -71,11 +81,18 @@ export default function Dropdown({
           </option>
         ))}
       </select>
-      <button type="submit" disabled={isSubmitting}>
-        {isSubmitting ? 'Updating...' : 'Update role'}
-      </button>
+      {hasChanged && (
+        <div>
+          <button type="button" onClick={handleSave} disabled={isSubmitting}>
+            {isSubmitting ? 'Saving...' : 'Save'}
+          </button>
+          <button type="button" onClick={handleCancel} disabled={isSubmitting}>
+            Cancel
+          </button>
+        </div>
+      )}
       {errorMessage && <p role="alert">{errorMessage}</p>}
       {successMessage && <p role="status">{successMessage}</p>}
-    </form>
+    </div>
   );
 }

From fd9dbb11c159f613e4cd2847c7d2c01f2ac380f7 Mon Sep 17 00:00:00 2001
From: Camillalalala <camilla4clubs@gmail.com>
Date: Thu, 30 Apr 2026 21:55:50 -0700
Subject: [PATCH 09/10] Removed alerts and finalized transition states

---
 app/(auth)/reset-password/page.tsx            | 195 ++++++++++--------
 .../components/DeleteInventoryItemButton.tsx  |  33 ++-
 .../people/[userId]/components/Dropdown.tsx   |   1 -
 .../components/DonationsTestComponent.tsx     |   7 +-
 4 files changed, 133 insertions(+), 103 deletions(-)

diff --git a/app/(auth)/reset-password/page.tsx b/app/(auth)/reset-password/page.tsx
index c7e7ddfe..ffb8bea5 100644
--- a/app/(auth)/reset-password/page.tsx
+++ b/app/(auth)/reset-password/page.tsx
@@ -1,91 +1,104 @@
-'use client';
-
-import { useForm, useWatch } from 'react-hook-form';
-import { createClient } from '@/app/lib/supabase/browser-client';
-import { useRouter } from 'next/navigation';
-
-type ResetPasswordFormValues = {
-  password: string;
-  passwordConfirmation: string;
-};
-
-export default function ResetPasswordPage() {
-  const supabase = createClient();
-  const router = useRouter();
-
-  const {
-    register,
-    handleSubmit,
-    control,
-    formState: { errors, isSubmitting },
-  } = useForm<ResetPasswordFormValues>({
-    defaultValues: { password: '', passwordConfirmation: '' },
-    mode: 'onChange',
-  });
-
-  const passwordValue = useWatch({
-    control,
-    name: 'password',
-  });
-
-  const onSubmit = async (values: ResetPasswordFormValues) => {
-    const { error } = await supabase.auth.updateUser({
-      password: values.password,
-    });
-
-    if (error) {
-      alert(error.message);
-      return;
-    }
-
-    alert('Your password has been updated.');
-    router.push('/home');
-  };
-
-  return (
-    <div>
-      <h1>Reset Password</h1>
-
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <label htmlFor="password">New password</label>
-        <input
-          id="password"
-          type="password"
-          {...register('password', {
-            required: 'New password is required.',
-            minLength: 8,
-            pattern: {
-              value:
-                /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
-              message:
-                'Password must be at least 8 characters and include an uppercase letter, a lowercase letter, a number, and a symbol.',
-            },
-          })}
-        />
-        {errors.password?.message ? <p>{errors.password.message}</p> : null}
-
-        <br />
-
-        <label htmlFor="passwordConfirmation">Confirm new password</label>
-        <input
-          id="passwordConfirmation"
-          type="password"
-          {...register('passwordConfirmation', {
-            required: 'Please confirm your new password.',
-            validate: (value) =>
-              value === passwordValue || 'Passwords do not match.',
-          })}
-        />
-        {errors.passwordConfirmation?.message ? (
-          <p>{errors.passwordConfirmation.message}</p>
-        ) : null}
-
-        <br />
-
-        <button type="submit" disabled={isSubmitting}>
-          {isSubmitting ? 'Saving...' : 'Save'}
-        </button>
-      </form>
-    </div>
-  );
-}
+'use client';
+
+import { useForm, useWatch } from 'react-hook-form';
+import { createClient } from '@/app/lib/supabase/browser-client';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+type ResetPasswordFormValues = {
+  password: string;
+  passwordConfirmation: string;
+};
+
+export default function ResetPasswordPage() {
+  const supabase = createClient();
+  const router = useRouter();
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<ResetPasswordFormValues>({
+    defaultValues: { password: '', passwordConfirmation: '' },
+    mode: 'onChange',
+  });
+
+  const passwordValue = useWatch({
+    control,
+    name: 'password',
+  });
+
+  const onSubmit = async (values: ResetPasswordFormValues) => {
+    setErrorMessage('');
+    setSuccessMessage('');
+    
+    const { error } = await supabase.auth.updateUser({
+      password: values.password,
+    });
+
+    if (error) {
+      setErrorMessage(error.message);
+      return;
+    }
+
+    setSuccessMessage('Your password has been updated.');
+    router.push('/home');
+  };
+
+  return (
+    <div>
+      <h1>Reset Password</h1>
+
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <label htmlFor="password">New password</label>
+        <input
+          id="password"
+          type="password"
+          {...register('password', {
+            required: 'New password is required.',
+            minLength: 8,
+            pattern: {
+              value:
+                /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
+              message:
+                'Password must be at least 8 characters and include an uppercase letter, a lowercase letter, a number, and a symbol.',
+            },
+          })}
+        />
+        {errors.password?.message ? <p>{errors.password.message}</p> : null}
+
+        <br />
+
+        <label htmlFor="passwordConfirmation">Confirm new password</label>
+        <input
+          id="passwordConfirmation"
+          type="password"
+          {...register('passwordConfirmation', {
+            required: 'Please confirm your new password.',
+            validate: (value) =>
+              value === passwordValue || 'Passwords do not match.',
+          })}
+        />
+        {errors.passwordConfirmation?.message ? (
+          <p>{errors.passwordConfirmation.message}</p>
+        ) : null}
+
+        <br />
+
+        {errorMessage && (
+          <p style={{ color: 'red' }}>{errorMessage}</p>
+        )}
+        {successMessage && (
+          <p style={{ color: 'green' }}>{successMessage}</p>
+        )}
+
+        <button type="submit" disabled={isSubmitting}>
+          {isSubmitting ? 'Saving...' : 'Save'}
+        </button>
+      </form>
+    </div>
+  );
+}
diff --git a/app/(main)/manage/inventory/[inventoryItemId]/components/DeleteInventoryItemButton.tsx b/app/(main)/manage/inventory/[inventoryItemId]/components/DeleteInventoryItemButton.tsx
index 72ba8b30..8185212b 100644
--- a/app/(main)/manage/inventory/[inventoryItemId]/components/DeleteInventoryItemButton.tsx
+++ b/app/(main)/manage/inventory/[inventoryItemId]/components/DeleteInventoryItemButton.tsx
@@ -2,6 +2,7 @@
 
 import { deleteItem } from '@/app/actions/inventory';
 import { useRouter } from 'next/navigation';
+import { useState, useTransition } from 'react';
 
 export default function DeleteInventoryItemButton({
   inventoryItemId,
@@ -9,22 +10,34 @@ export default function DeleteInventoryItemButton({
   inventoryItemId: string;
 }) {
   const router = useRouter();
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
+  const [isPending, startTransition] = useTransition();
 
   async function handleDelete() {
-    const result = await deleteItem(inventoryItemId);
+    setErrorMessage('');
+    setSuccessMessage('');
+    startTransition(async () => {
+      const result = await deleteItem(inventoryItemId);
 
-    if (!result.success) {
-      alert('Failed to remove item.');
-      console.error('Failed to delete inventory item:', result.error);
-      return;
-    }
+      if (!result.success) {
+        setErrorMessage('Failed to remove item.');
+        console.error('Failed to delete inventory item:', result.error);
+        return;
+      }
 
-    router.push('/manage/inventory');
+      setSuccessMessage('Item removed successfully!');
+      router.push('/manage/inventory');
+    });
   }
 
   return (
-    <button type="button" onClick={handleDelete}>
-      Remove item
-    </button>
+    <>
+      {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
+      {successMessage && <p style={{ color: 'green' }}>{successMessage}</p>}
+      <button type="button" onClick={handleDelete} disabled={isPending}>
+        {isPending ? 'Removing...' : 'Remove item'}
+      </button>
+    </>
   );
 }
diff --git a/app/(main)/team/people/[userId]/components/Dropdown.tsx b/app/(main)/team/people/[userId]/components/Dropdown.tsx
index c4fccfc7..49f62122 100644
--- a/app/(main)/team/people/[userId]/components/Dropdown.tsx
+++ b/app/(main)/team/people/[userId]/components/Dropdown.tsx
@@ -33,7 +33,6 @@ export default function Dropdown({
       setOriginalRoleId(currentRoleId);
       setSuccessMessage('Role updated.');
     } catch (error) {
-      console.error('Role update error:', error);
       setErrorMessage('Unable to update role. Please try again.');
     } finally {
       setIsSubmitting(false);
diff --git a/app/(main)/test/components/DonationsTestComponent.tsx b/app/(main)/test/components/DonationsTestComponent.tsx
index e180fb13..84dfdc5b 100644
--- a/app/(main)/test/components/DonationsTestComponent.tsx
+++ b/app/(main)/test/components/DonationsTestComponent.tsx
@@ -5,6 +5,7 @@ import { useState } from 'react';
 
 export default function DonationsTestComponent() {
   const [idToDelete, setIdToDelete] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
 
   const handleCreate = async () => {
     try {
@@ -38,8 +39,9 @@ export default function DonationsTestComponent() {
   };
 
   const handleDelete = async () => {
+    setErrorMessage('');
     if (!idToDelete) {
-      alert('Please enter a valid UUID to delete');
+      setErrorMessage('Please enter a valid UUID to delete');
       return;
     }
 
@@ -58,6 +60,9 @@ export default function DonationsTestComponent() {
       <button onClick={handleDelete} style={{ marginLeft: 10 }}>
         Delete Donation
       </button>
+      {errorMessage && (
+        <p style={{ color: 'red', marginTop: 10 }}>{errorMessage}</p>
+      )}
     </div>
   );
 }

From 74efd727b63be061936e07adadbd615b506455ce Mon Sep 17 00:00:00 2001
From: joy-y-cheng <joycheng@ucla.edu>
Date: Mon, 11 May 2026 12:09:50 -0700
Subject: [PATCH 10/10] Minor cleanup

---
 .vscode/settings.json                         |   9 +-
 app/(auth)/forgot-password/page.tsx           | 138 ++++++------
 app/(auth)/reset-password/page.tsx            | 204 +++++++++---------
 app/(auth)/sign-in/page.tsx                   |   2 +-
 app/(auth)/sign-up/page.tsx                   |   6 +-
 app/(main)/components/DeleteTicketButton.tsx  |  80 +++----
 .../components/InStockTicketItemCard.tsx      |   4 +-
 .../components/OutOfStockTicketItemCard.tsx   |  35 +--
 .../components/TicketStatusDropdown.tsx       | 144 ++++++-------
 .../components/LightweightDonationForm.tsx    |  41 +---
 .../hq/[storeId]/components/EditStoreForm.tsx |   5 +-
 .../components/RemoveStoreButton.tsx          |   9 +-
 app/(main)/hq/components/AddStoreForm.tsx     |   5 +-
 .../hq/components/DonationsExportForm.tsx     |   7 +-
 .../components/DeleteStoreItemButton.tsx      | 100 ++++-----
 .../add/components/StoreItemsDonationForm.tsx |  19 +-
 .../components/DeleteInventoryItemButton.tsx  |   3 +-
 app/(main)/profile/components/ProfileForm.tsx |   4 +-
 .../profile/components/SignOutButton.tsx      |   2 +-
 .../components/AddInStockToCartForm.tsx       |  32 +--
 .../cart/components/SubmitTicketButton.tsx    |  80 +++----
 .../components/AddOutOfStockToCartForm.tsx    |  34 +--
 .../request/components/SubmitButton.tsx       |   6 +-
 .../people/[userId]/components/Dropdown.tsx   |   7 +-
 .../[storeId]/components/AddAdminSearch.tsx   |   2 +-
 .../components/DeleteStoreAdminButton.tsx     |   2 +-
 26 files changed, 425 insertions(+), 555 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index cd908866..9bf4d12b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,4 @@
-{
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true,
-  "codeQL.githubDatabase.download": "never"
-}
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
+}
diff --git a/app/(auth)/forgot-password/page.tsx b/app/(auth)/forgot-password/page.tsx
index 41529a87..97ba826d 100644
--- a/app/(auth)/forgot-password/page.tsx
+++ b/app/(auth)/forgot-password/page.tsx
@@ -1,69 +1,69 @@
-'use client';
-import { useForm } from 'react-hook-form';
-import { useState } from 'react';
-import { createClient } from '@/app/lib/supabase/browser-client';
-
-type ForgotPasswordFormValues = {
-  email: string;
-};
-
-export default function ForgotPasswordPage() {
-  const supabase = createClient();
-  const [errorMessage, setErrorMessage] = useState('');
-  const [successMessage, setSuccessMessage] = useState('');
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<ForgotPasswordFormValues>({
-    defaultValues: { email: '' },
-    mode: 'onSubmit',
-  });
-
-  const onSubmit = async (values: ForgotPasswordFormValues) => {
-    setErrorMessage('');
-    setSuccessMessage('');
-
-    const { error } = await supabase.auth.resetPasswordForEmail(values.email);
-
-    if (error) {
-      setErrorMessage('Failed to send reset password email: ' + error.message);
-      return;
-    }
-
-    setSuccessMessage(
-      'Instructions to reset your password have been sent to your email.',
-    );
-  };
-
-  return (
-    <div>
-      <h1>Reset Password</h1>
-
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <label htmlFor="email">Email</label>
-
-        <input
-          id="email"
-          type="email"
-          {...register('email', {
-            required: 'Email is required.',
-            pattern: {
-              value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
-              message: 'Please enter a valid email address.',
-            },
-          })}
-        />
-
-        {errors.email?.message ? <p>{errors.email.message}</p> : null}
-
-        <button type="submit" disabled={isSubmitting}>
-          {isSubmitting ? 'Sending' : 'Reset password'}
-        </button>
-
-        {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
-        {successMessage && <p style={{ color: 'green' }}>{successMessage}</p>}
-      </form>
-    </div>
-  );
-}
+'use client';
+import { useForm } from 'react-hook-form';
+import { useState } from 'react';
+import { createClient } from '@/app/lib/supabase/browser-client';
+
+type ForgotPasswordFormValues = {
+  email: string;
+};
+
+export default function ForgotPasswordPage() {
+  const supabase = createClient();
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<ForgotPasswordFormValues>({
+    defaultValues: { email: '' },
+    mode: 'onSubmit',
+  });
+
+  const onSubmit = async (values: ForgotPasswordFormValues) => {
+    setErrorMessage('');
+    setSuccessMessage('');
+
+    const { error } = await supabase.auth.resetPasswordForEmail(values.email);
+
+    if (error) {
+      setErrorMessage('Failed to send reset password email: ' + error.message);
+      return;
+    }
+
+    setSuccessMessage(
+      'Instructions to reset your password have been sent to your email.',
+    );
+  };
+
+  return (
+    <div>
+      <h1>Reset Password</h1>
+
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <label htmlFor="email">Email</label>
+
+        <input
+          id="email"
+          type="email"
+          {...register('email', {
+            required: 'Email is required.',
+            pattern: {
+              value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+              message: 'Please enter a valid email address.',
+            },
+          })}
+        />
+
+        {errors.email?.message ? <p>{errors.email.message}</p> : null}
+
+        <button type="submit" disabled={isSubmitting}>
+          {isSubmitting ? 'Sending' : 'Reset password'}
+        </button>
+
+        {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
+        {successMessage && <p style={{ color: 'green' }}>{successMessage}</p>}
+      </form>
+    </div>
+  );
+}
diff --git a/app/(auth)/reset-password/page.tsx b/app/(auth)/reset-password/page.tsx
index ffb8bea5..98bd3374 100644
--- a/app/(auth)/reset-password/page.tsx
+++ b/app/(auth)/reset-password/page.tsx
@@ -1,104 +1,100 @@
-'use client';
-
-import { useForm, useWatch } from 'react-hook-form';
-import { createClient } from '@/app/lib/supabase/browser-client';
-import { useRouter } from 'next/navigation';
-import { useState } from 'react';
-
-type ResetPasswordFormValues = {
-  password: string;
-  passwordConfirmation: string;
-};
-
-export default function ResetPasswordPage() {
-  const supabase = createClient();
-  const router = useRouter();
-  const [errorMessage, setErrorMessage] = useState('');
-  const [successMessage, setSuccessMessage] = useState('');
-
-  const {
-    register,
-    handleSubmit,
-    control,
-    formState: { errors, isSubmitting },
-  } = useForm<ResetPasswordFormValues>({
-    defaultValues: { password: '', passwordConfirmation: '' },
-    mode: 'onChange',
-  });
-
-  const passwordValue = useWatch({
-    control,
-    name: 'password',
-  });
-
-  const onSubmit = async (values: ResetPasswordFormValues) => {
-    setErrorMessage('');
-    setSuccessMessage('');
-    
-    const { error } = await supabase.auth.updateUser({
-      password: values.password,
-    });
-
-    if (error) {
-      setErrorMessage(error.message);
-      return;
-    }
-
-    setSuccessMessage('Your password has been updated.');
-    router.push('/home');
-  };
-
-  return (
-    <div>
-      <h1>Reset Password</h1>
-
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <label htmlFor="password">New password</label>
-        <input
-          id="password"
-          type="password"
-          {...register('password', {
-            required: 'New password is required.',
-            minLength: 8,
-            pattern: {
-              value:
-                /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
-              message:
-                'Password must be at least 8 characters and include an uppercase letter, a lowercase letter, a number, and a symbol.',
-            },
-          })}
-        />
-        {errors.password?.message ? <p>{errors.password.message}</p> : null}
-
-        <br />
-
-        <label htmlFor="passwordConfirmation">Confirm new password</label>
-        <input
-          id="passwordConfirmation"
-          type="password"
-          {...register('passwordConfirmation', {
-            required: 'Please confirm your new password.',
-            validate: (value) =>
-              value === passwordValue || 'Passwords do not match.',
-          })}
-        />
-        {errors.passwordConfirmation?.message ? (
-          <p>{errors.passwordConfirmation.message}</p>
-        ) : null}
-
-        <br />
-
-        {errorMessage && (
-          <p style={{ color: 'red' }}>{errorMessage}</p>
-        )}
-        {successMessage && (
-          <p style={{ color: 'green' }}>{successMessage}</p>
-        )}
-
-        <button type="submit" disabled={isSubmitting}>
-          {isSubmitting ? 'Saving...' : 'Save'}
-        </button>
-      </form>
-    </div>
-  );
-}
+'use client';
+
+import { useForm, useWatch } from 'react-hook-form';
+import { createClient } from '@/app/lib/supabase/browser-client';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+type ResetPasswordFormValues = {
+  password: string;
+  passwordConfirmation: string;
+};
+
+export default function ResetPasswordPage() {
+  const supabase = createClient();
+  const router = useRouter();
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<ResetPasswordFormValues>({
+    defaultValues: { password: '', passwordConfirmation: '' },
+    mode: 'onChange',
+  });
+
+  const passwordValue = useWatch({
+    control,
+    name: 'password',
+  });
+
+  const onSubmit = async (values: ResetPasswordFormValues) => {
+    setErrorMessage('');
+    setSuccessMessage('');
+
+    const { error } = await supabase.auth.updateUser({
+      password: values.password,
+    });
+
+    if (error) {
+      setErrorMessage(error.message);
+      return;
+    }
+
+    setSuccessMessage('Your password has been updated.');
+    router.push('/home');
+  };
+
+  return (
+    <div>
+      <h1>Reset Password</h1>
+
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <label htmlFor="password">New password</label>
+        <input
+          id="password"
+          type="password"
+          {...register('password', {
+            required: 'New password is required.',
+            minLength: 8,
+            pattern: {
+              value:
+                /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
+              message:
+                'Password must be at least 8 characters and include an uppercase letter, a lowercase letter, a number, and a symbol.',
+            },
+          })}
+        />
+        {errors.password?.message ? <p>{errors.password.message}</p> : null}
+
+        <br />
+
+        <label htmlFor="passwordConfirmation">Confirm new password</label>
+        <input
+          id="passwordConfirmation"
+          type="password"
+          {...register('passwordConfirmation', {
+            required: 'Please confirm your new password.',
+            validate: (value) =>
+              value === passwordValue || 'Passwords do not match.',
+          })}
+        />
+        {errors.passwordConfirmation?.message ? (
+          <p>{errors.passwordConfirmation.message}</p>
+        ) : null}
+
+        <br />
+
+        {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
+        {successMessage && <p style={{ color: 'green' }}>{successMessage}</p>}
+
+        <button type="submit" disabled={isSubmitting}>
+          {isSubmitting ? 'Saving...' : 'Save'}
+        </button>
+      </form>
+    </div>
+  );
+}
diff --git a/app/(auth)/sign-in/page.tsx b/app/(auth)/sign-in/page.tsx
index b8a696f2..3c8a4283 100644
--- a/app/(auth)/sign-in/page.tsx
+++ b/app/(auth)/sign-in/page.tsx
@@ -63,7 +63,7 @@ export default function SignInPage() {
       )}
       <br />
       <button type="submit">
-        {isSubmitting ? 'Signing In...' : 'Sign In'}
+        {isSubmitting ? 'Signing in...' : 'Sign In'}
       </button>
       <br />
       <Link href="/forgot-password">Forgot password?</Link>
diff --git a/app/(auth)/sign-up/page.tsx b/app/(auth)/sign-up/page.tsx
index 930625ad..87d18dd2 100644
--- a/app/(auth)/sign-up/page.tsx
+++ b/app/(auth)/sign-up/page.tsx
@@ -4,7 +4,6 @@ import { useForm, useWatch, SubmitHandler } from 'react-hook-form';
 import { createClient } from '@/app/lib/supabase/browser-client';
 import { useState } from 'react';
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 
 type Inputs = {
   firstName: string;
@@ -19,13 +18,12 @@ export default function SignUpPage() {
     register,
     handleSubmit,
     control,
-    formState: { errors, isSubmitting },
+    formState: { errors },
   } = useForm<Inputs>();
   const [isLoading, setIsLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
   const [successMessage, setSuccessMessage] = useState('');
   const supabase = createClient();
-  const router = useRouter();
   const passwordValue = useWatch({
     control,
     name: 'password',
@@ -133,7 +131,7 @@ export default function SignUpPage() {
       )}
       <br />
       <button type="submit" disabled={isLoading}>
-        {isLoading ? 'Creating account...' : 'Sign up'}
+        {isLoading ? 'Creating account...' : 'Sign Up'}
       </button>
       <br />
       <Link href="/sign-in">Sign in</Link>
diff --git a/app/(main)/components/DeleteTicketButton.tsx b/app/(main)/components/DeleteTicketButton.tsx
index ce20948a..d0ce3fad 100644
--- a/app/(main)/components/DeleteTicketButton.tsx
+++ b/app/(main)/components/DeleteTicketButton.tsx
@@ -1,40 +1,40 @@
-'use client';
-
-import { deleteTicket } from '@/app/actions/ticket';
-import { usePathname, useRouter } from 'next/navigation';
-import { useState, useTransition } from 'react';
-
-export default function DeleteTicketButton({ ticketId }: { ticketId: string }) {
-  const pathname = usePathname();
-  const router = useRouter();
-  const [errorMessage, setErrorMessage] = useState('');
-  const [successMessage, setSuccessMessage] = useState('');
-  const [isPending, startTransition] = useTransition();
-
-  async function handleDelete() {
-    setErrorMessage('');
-    setSuccessMessage('');
-    startTransition(async () => {
-      const result = await deleteTicket(ticketId);
-
-      if (!result.success) {
-        setErrorMessage('Failed to delete ticket.' + result.error);
-        return;
-      }
-
-      setSuccessMessage('Ticket deleted successfully!');
-      const parentPath = pathname.split('/').slice(0, -1).join('/') || '/';
-      router.push(parentPath);
-    });
-  }
-
-  return (
-    <>
-      {errorMessage && <div style={{ color: 'red' }}>{errorMessage}</div>}
-      {successMessage && <div style={{ color: 'green' }}>{successMessage}</div>}
-      <button type="button" onClick={handleDelete} disabled={isPending}>
-        {isPending ? 'Deleting...' : 'Delete ticket'}
-      </button>
-    </>
-  );
-}
+'use client';
+
+import { deleteTicket } from '@/app/actions/ticket';
+import { usePathname, useRouter } from 'next/navigation';
+import { useState, useTransition } from 'react';
+
+export default function DeleteTicketButton({ ticketId }: { ticketId: string }) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
+  const [isPending, startTransition] = useTransition();
+
+  async function handleDelete() {
+    setErrorMessage('');
+    setSuccessMessage('');
+    startTransition(async () => {
+      const result = await deleteTicket(ticketId);
+
+      if (!result.success) {
+        setErrorMessage('Failed to delete ticket.' + result.error);
+        return;
+      }
+
+      setSuccessMessage('Ticket deleted successfully!');
+      const parentPath = pathname.split('/').slice(0, -1).join('/') || '/';
+      router.push(parentPath);
+    });
+  }
+
+  return (
+    <>
+      {errorMessage && <div style={{ color: 'red' }}>{errorMessage}</div>}
+      {successMessage && <div style={{ color: 'green' }}>{successMessage}</div>}
+      <button type="button" onClick={handleDelete} disabled={isPending}>
+        {isPending ? 'Removing...' : 'Remove'}
+      </button>
+    </>
+  );
+}
diff --git a/app/(main)/components/InStockTicketItemCard.tsx b/app/(main)/components/InStockTicketItemCard.tsx
index cb979209..a7a5439c 100644
--- a/app/(main)/components/InStockTicketItemCard.tsx
+++ b/app/(main)/components/InStockTicketItemCard.tsx
@@ -40,7 +40,9 @@ export default function InStockTicketItemCard({
       const result = await updateTicketItemQuantity(ticketItemId, quantity);
 
       if (!result.success) {
-        setErrorMessage('Failed to update ticket item quantity.' + result.error);
+        setErrorMessage(
+          'Failed to update ticket item quantity.' + result.error,
+        );
         return;
       }
 
diff --git a/app/(main)/components/OutOfStockTicketItemCard.tsx b/app/(main)/components/OutOfStockTicketItemCard.tsx
index be9c66f4..eebb25b7 100644
--- a/app/(main)/components/OutOfStockTicketItemCard.tsx
+++ b/app/(main)/components/OutOfStockTicketItemCard.tsx
@@ -49,7 +49,7 @@ export default function OutOfStockTicketItemCard({
       setIsChanged(false);
     } catch (e) {
       // Handle infrastructure/network errors
-      setErrorMessage('A critical connection error occurred.' + e);
+      setErrorMessage('A critical connection error occurred. ' + e);
       return;
     } finally {
       setIsSaving(false);
@@ -58,38 +58,25 @@ export default function OutOfStockTicketItemCard({
 
   return (
     <div className="flex flex-col gap-2">
-      <textarea 
-        className="border p-2 rounded"
-        value={description} 
-        onChange={handleChange} 
-        rows={4} 
+      <textarea
+        value={description}
+        onChange={handleChange}
+        rows={4}
         disabled={isSaving}
       />
-      
+
       {isChanged && (
-        <div className="flex gap-2">
-          <button 
-            onClick={handleSave} 
-            disabled={isSaving}
-            className="bg-blue-600 text-white px-3 py-1 rounded disabled:opacity-50"
-          >
+        <div>
+          <button onClick={handleSave} disabled={isSaving}>
             {isSaving ? 'Saving...' : 'Save'}
           </button>
-          <button 
-            onClick={handleCancel} 
-            disabled={isSaving}
-            className="bg-gray-200 px-3 py-1 rounded"
-          >
+          <button onClick={handleCancel} disabled={isSaving}>
             Cancel
           </button>
         </div>
       )}
 
-      {errorMessage && (
-        <p role="alert" className="text-red-600 font-medium text-sm">
-          {errorMessage}
-        </p>
-      )}
+      {errorMessage && <p role="alert">{errorMessage}</p>}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/app/(main)/components/TicketStatusDropdown.tsx b/app/(main)/components/TicketStatusDropdown.tsx
index b2709f21..5009872f 100644
--- a/app/(main)/components/TicketStatusDropdown.tsx
+++ b/app/(main)/components/TicketStatusDropdown.tsx
@@ -1,72 +1,72 @@
-'use client';
-import { useState } from 'react';
-import { updateTicketStatus } from '@/app/actions/ticket';
-
-type TicketStatus = 'draft' | 'requested' | 'ready' | 'rejected' | 'fulfilled';
-
-export default function TicketStatusDropdown({
-  ticketId,
-  currentStatus,
-  statusOptions,
-}: {
-  ticketId: string;
-  currentStatus: TicketStatus;
-  statusOptions: TicketStatus[];
-}) {
-  const [selectedStatus, setSelectedStatus] =
-    useState<TicketStatus>(currentStatus);
-  const [originalStatus, setOriginalStatus] =
-    useState<TicketStatus>(currentStatus);
-  const [error, setError] = useState<string | null>(null);
-  const [isSaving, setIsSaving] = useState(false);
-
-  const handleCancel = () => {
-    setError(null);
-    setSelectedStatus(originalStatus);
-  };
-
-  const handleSave = async () => {
-    setError(null);
-    setIsSaving(true);
-
-    try {
-      const result = await updateTicketStatus(selectedStatus, ticketId);
-      if (result.success) {
-        setOriginalStatus(selectedStatus);
-        return;
-      } else {
-        setError('Error updating status. No changes were saved.' + result.error);
-      }
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  return (
-    <div>
-      <select
-        value={selectedStatus}
-        onChange={(e) => setSelectedStatus(e.target.value as TicketStatus)}
-        disabled={isSaving}
-      >
-        {statusOptions.map((status) => (
-          <option key={status} value={status}>
-            {status}
-          </option>
-        ))}
-      </select>
-
-      {selectedStatus !== originalStatus && (
-        <div>
-          <button type="button" onClick={handleSave} disabled={isSaving}>
-            {isSaving ? 'Saving...' : 'Save'}
-          </button>
-          <button type="button" onClick={handleCancel} disabled={isSaving}>
-            Cancel
-          </button>
-          {error && <div>{error}</div>}
-        </div>
-      )}
-    </div>
-  );
-}
+'use client';
+import { useState } from 'react';
+import { updateTicketStatus } from '@/app/actions/ticket';
+
+type TicketStatus = 'draft' | 'requested' | 'ready' | 'rejected' | 'fulfilled';
+
+export default function TicketStatusDropdown({
+  ticketId,
+  currentStatus,
+  statusOptions,
+}: {
+  ticketId: string;
+  currentStatus: TicketStatus;
+  statusOptions: TicketStatus[];
+}) {
+  const [selectedStatus, setSelectedStatus] =
+    useState<TicketStatus>(currentStatus);
+  const [originalStatus, setOriginalStatus] =
+    useState<TicketStatus>(currentStatus);
+  const [error, setError] = useState<string | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const handleCancel = () => {
+    setError(null);
+    setSelectedStatus(originalStatus);
+  };
+
+  const handleSave = async () => {
+    setError(null);
+    setIsSaving(true);
+
+    try {
+      const result = await updateTicketStatus(selectedStatus, ticketId);
+      if (result.success) {
+        setOriginalStatus(selectedStatus);
+        return;
+      } else {
+        setError('Failed to update status: ' + result.error);
+      }
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <div>
+      <select
+        value={selectedStatus}
+        onChange={(e) => setSelectedStatus(e.target.value as TicketStatus)}
+        disabled={isSaving}
+      >
+        {statusOptions.map((status) => (
+          <option key={status} value={status}>
+            {status}
+          </option>
+        ))}
+      </select>
+
+      {selectedStatus !== originalStatus && (
+        <div>
+          <button type="button" onClick={handleSave} disabled={isSaving}>
+            {isSaving ? 'Saving...' : 'Save'}
+          </button>
+          <button type="button" onClick={handleCancel} disabled={isSaving}>
+            Cancel
+          </button>
+          {error && <div>{error}</div>}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/(main)/home/donate/components/LightweightDonationForm.tsx b/app/(main)/home/donate/components/LightweightDonationForm.tsx
index 7b3c5695..1445c770 100644
--- a/app/(main)/home/donate/components/LightweightDonationForm.tsx
+++ b/app/(main)/home/donate/components/LightweightDonationForm.tsx
@@ -85,9 +85,7 @@ export default function LightweightDonationForm() {
 
     const result = await createDonation(donation);
     if (result.success) {
-      setSuccessMessage(
-        'Donation submitted successfully! Thank you for your generosity.',
-      );
+      setSuccessMessage('Donation submitted successfully!');
       reset({
         donor_type: undefined,
         individual_name: '',
@@ -134,40 +132,9 @@ export default function LightweightDonationForm() {
       >
         <h1 style={{ margin: 0 }}>Donation Form</h1>
       </div>
-      {errorMessage && (
-        <div
-          style={{
-            backgroundColor: '#f8d7da',
-            color: '#721c24',
-            padding: '12px',
-            borderRadius: '5px',
-            marginBottom: '15px',
-            textAlign: 'center',
-            fontWeight: 'bold',
-          }}
-        >
-          {errorMessage}
-        </div>
-      )}
-      {successMessage && (
-        <div
-          style={{
-            backgroundColor: '#d4edda',
-            color: '#155724',
-            padding: '12px',
-            borderRadius: '5px',
-            marginBottom: '15px',
-            textAlign: 'center',
-            fontWeight: 'bold',
-          }}
-        >
-          {successMessage}
-        </div>
-      )}
-      <form
-        onSubmit={handleSubmit(onSubmit)}
-        style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}
-      >
+      {errorMessage && <p>{errorMessage}</p>}
+      {successMessage && <div>{successMessage}</div>}
+      <form onSubmit={handleSubmit(onSubmit)}>
         {/* Receiving Site */}
         <div style={{ display: 'flex', flexDirection: 'column' }}>
           <label style={{ fontWeight: 'bold', marginBottom: '5px' }}>
diff --git a/app/(main)/hq/[storeId]/components/EditStoreForm.tsx b/app/(main)/hq/[storeId]/components/EditStoreForm.tsx
index 6aeabced..d581e350 100644
--- a/app/(main)/hq/[storeId]/components/EditStoreForm.tsx
+++ b/app/(main)/hq/[storeId]/components/EditStoreForm.tsx
@@ -28,15 +28,14 @@ export default function EditStoreForm({ store }: { store: Store }) {
     try {
       const result = await updateStore(store.store_id, data);
       if (!result.success) {
-        setErrorMessage(result.error ?? 'Failed to update store.');
+        setErrorMessage('Failed to update store: ' + result.error);
         return;
       }
 
       reset(data);
       setSuccessMessage('Store updated.');
     } catch (error) {
-      console.error('Store update error:', error);
-      setErrorMessage('Failed to update store. Please try again.');
+      setErrorMessage('Failed to update store: ' + error);
     } finally {
       setIsSubmitting(false);
     }
diff --git a/app/(main)/hq/[storeId]/components/RemoveStoreButton.tsx b/app/(main)/hq/[storeId]/components/RemoveStoreButton.tsx
index 8603bfa3..be526e16 100644
--- a/app/(main)/hq/[storeId]/components/RemoveStoreButton.tsx
+++ b/app/(main)/hq/[storeId]/components/RemoveStoreButton.tsx
@@ -20,15 +20,14 @@ export default function RemoveStoreButton({ storeId }: RemoveStoreButtonProp) {
     try {
       const { success, error } = await deleteStore(storeId);
       if (!success) {
-        setErrorMessage(error ?? 'Failed to remove store.');
+        setErrorMessage('Failed to remove store: ' + error);
         return;
       }
 
-      setSuccessMessage('Store removed. Redirecting...');
+      setSuccessMessage('Store removed.');
       router.push('/hq');
     } catch (error) {
-      console.error('Store deletion error:', error);
-      setErrorMessage('Failed to remove store. Please try again.');
+      setErrorMessage('Failed to remove store: ' + error);
     } finally {
       setIsRemoving(false);
     }
@@ -39,7 +38,7 @@ export default function RemoveStoreButton({ storeId }: RemoveStoreButtonProp) {
       {errorMessage && <p role="alert">{errorMessage}</p>}
       {successMessage && <p role="status">{successMessage}</p>}
       <button type="button" onClick={handleDeletion} disabled={isRemoving}>
-        {isRemoving ? 'Removing...' : 'Remove store'}
+        {isRemoving ? 'Removing...' : 'Remove'}
       </button>
     </>
   );
diff --git a/app/(main)/hq/components/AddStoreForm.tsx b/app/(main)/hq/components/AddStoreForm.tsx
index 5380901b..8707e43c 100644
--- a/app/(main)/hq/components/AddStoreForm.tsx
+++ b/app/(main)/hq/components/AddStoreForm.tsx
@@ -45,15 +45,14 @@ export default function AddStoreForm() {
       });
 
       if (!result.success) {
-        setErrorMessage(result.error ?? 'Failed to add store.');
+        setErrorMessage('Failed to add store: ' + result.error);
         return;
       }
 
       reset({ storeName: '', storeStreetAddress: '' });
       setSuccessMessage('Store added.');
     } catch (error) {
-      console.error('Store creation error:', error);
-      setErrorMessage('Failed to add store. Please try again.');
+      setErrorMessage('Failed to add store: ' + error);
     } finally {
       setIsSubmitting(false);
     }
diff --git a/app/(main)/hq/components/DonationsExportForm.tsx b/app/(main)/hq/components/DonationsExportForm.tsx
index 5c5e3e66..cf53c736 100644
--- a/app/(main)/hq/components/DonationsExportForm.tsx
+++ b/app/(main)/hq/components/DonationsExportForm.tsx
@@ -61,7 +61,7 @@ export default function Donations() {
         });
 
         if (!result?.success || !result.data) {
-          setErrorMessage(result?.error ?? 'Failed to export donations.');
+          setErrorMessage('Failed to export donations.');
           return;
         }
 
@@ -70,7 +70,7 @@ export default function Donations() {
         const result = await exportDonations();
 
         if (!result?.success || !result.data) {
-          setErrorMessage(result?.error ?? 'Failed to export donations.');
+          setErrorMessage('Failed to export donations.');
           return;
         }
 
@@ -79,8 +79,7 @@ export default function Donations() {
 
       setSuccessMessage('Donations export downloaded.');
     } catch (error) {
-      console.error('Donations export error:', error);
-      setErrorMessage('Failed to export donations. Please try again.');
+      setErrorMessage('Donations export error: ' + error);
     } finally {
       setIsExporting(false);
     }
diff --git a/app/(main)/manage/[storeId]/[storeItemId]/components/DeleteStoreItemButton.tsx b/app/(main)/manage/[storeId]/[storeItemId]/components/DeleteStoreItemButton.tsx
index 1dc8ff90..c0002348 100644
--- a/app/(main)/manage/[storeId]/[storeItemId]/components/DeleteStoreItemButton.tsx
+++ b/app/(main)/manage/[storeId]/[storeItemId]/components/DeleteStoreItemButton.tsx
@@ -1,50 +1,50 @@
-'use client';
-
-import { deleteStoreItem } from '@/app/actions/store';
-import { usePathname, useRouter } from 'next/navigation';
-import { useState, useTransition } from 'react';
-
-export default function DeleteStoreItemButton({
-  storeItemId,
-}: {
-  storeItemId: string;
-}) {
-  const pathname = usePathname();
-  const router = useRouter();
-  const [errorMessage, setErrorMessage] = useState('');
-  const [successMessage, setSuccessMessage] = useState('');
-  const [isPending, startTransition] = useTransition();
-
-  async function handleDelete() {
-    setErrorMessage('');
-    setSuccessMessage('');
-    startTransition(async () => {
-      const result = await deleteStoreItem(storeItemId);
-
-      if (!result.success) {
-        setErrorMessage('Failed to delete store item.' + result.error);
-        return;
-      }
-
-      setSuccessMessage('Store item deleted successfully!');
-      const targetPath = pathname.split('/').slice(0, -1).join('/') || '/';
-
-      if (pathname === targetPath) {
-        router.refresh();
-        return;
-      }
-
-      router.push(targetPath);
-    });
-  }
-
-  return (
-    <>
-      {errorMessage && <div style={{ color: 'red' }}>{errorMessage}</div>}
-      {successMessage && <div style={{ color: 'green' }}>{successMessage}</div>}
-      <button type="button" onClick={handleDelete} disabled={isPending}>
-        {isPending ? 'Removing...' : 'Remove item'}
-      </button>
-    </>
-  );
-}
+'use client';
+
+import { deleteStoreItem } from '@/app/actions/store';
+import { usePathname, useRouter } from 'next/navigation';
+import { useState, useTransition } from 'react';
+
+export default function DeleteStoreItemButton({
+  storeItemId,
+}: {
+  storeItemId: string;
+}) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
+  const [isPending, startTransition] = useTransition();
+
+  async function handleDelete() {
+    setErrorMessage('');
+    setSuccessMessage('');
+    startTransition(async () => {
+      const result = await deleteStoreItem(storeItemId);
+
+      if (!result.success) {
+        setErrorMessage('Failed to delete store item: ' + result.error);
+        return;
+      }
+
+      setSuccessMessage('Store item deleted successfully!');
+      const targetPath = pathname.split('/').slice(0, -1).join('/') || '/';
+
+      if (pathname === targetPath) {
+        router.refresh();
+        return;
+      }
+
+      router.push(targetPath);
+    });
+  }
+
+  return (
+    <>
+      {errorMessage && <div style={{ color: 'red' }}>{errorMessage}</div>}
+      {successMessage && <div style={{ color: 'green' }}>{successMessage}</div>}
+      <button type="button" onClick={handleDelete} disabled={isPending}>
+        {isPending ? 'Removing...' : 'Remove'}
+      </button>
+    </>
+  );
+}
diff --git a/app/(main)/manage/[storeId]/add/components/StoreItemsDonationForm.tsx b/app/(main)/manage/[storeId]/add/components/StoreItemsDonationForm.tsx
index 448b796e..6052c1ea 100644
--- a/app/(main)/manage/[storeId]/add/components/StoreItemsDonationForm.tsx
+++ b/app/(main)/manage/[storeId]/add/components/StoreItemsDonationForm.tsx
@@ -139,7 +139,7 @@ export default function StoreItemsDonationForm({
 
       if (inventoryErrors.length > 0 && donationError) {
         setErrorMessage(
-          `Inventory update and donation submission failed. ${donationError}`,
+          'Inventory update and donation submission failed: ' + donationError,
         );
       } else if (inventoryErrors.length > 0) {
         setErrorMessage(
@@ -171,8 +171,7 @@ export default function StoreItemsDonationForm({
         setSuccessMessage('Submission saved.');
       }
     } catch (error) {
-      console.error('Failed to process form:', error);
-      setErrorMessage('Failed to process submission. Please try again.');
+      setErrorMessage('Failed to process submission: ' + error);
     } finally {
       setIsSubmitting(false);
     }
@@ -214,19 +213,7 @@ export default function StoreItemsDonationForm({
           <>
             {errorMessage && <p role="alert">{errorMessage}</p>}
             {successMessage && <p role="status">{successMessage}</p>}
-            <button
-              type="submit"
-              disabled={isSubmitting}
-              style={{
-                marginTop: '20px',
-                padding: '10px',
-                borderRadius: '5px',
-                border: 'none',
-                backgroundColor: '#007bff',
-                color: '#fff',
-                fontWeight: 'bold',
-              }}
-            >
+            <button type="submit" disabled={isSubmitting}>
               {isSubmitting ? 'Submitting...' : 'Submit'}
             </button>
           </>
diff --git a/app/(main)/manage/inventory/[inventoryItemId]/components/DeleteInventoryItemButton.tsx b/app/(main)/manage/inventory/[inventoryItemId]/components/DeleteInventoryItemButton.tsx
index 8185212b..5b925e98 100644
--- a/app/(main)/manage/inventory/[inventoryItemId]/components/DeleteInventoryItemButton.tsx
+++ b/app/(main)/manage/inventory/[inventoryItemId]/components/DeleteInventoryItemButton.tsx
@@ -22,7 +22,6 @@ export default function DeleteInventoryItemButton({
 
       if (!result.success) {
         setErrorMessage('Failed to remove item.');
-        console.error('Failed to delete inventory item:', result.error);
         return;
       }
 
@@ -36,7 +35,7 @@ export default function DeleteInventoryItemButton({
       {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
       {successMessage && <p style={{ color: 'green' }}>{successMessage}</p>}
       <button type="button" onClick={handleDelete} disabled={isPending}>
-        {isPending ? 'Removing...' : 'Remove item'}
+        {isPending ? 'Removing...' : 'Remove'}
       </button>
     </>
   );
diff --git a/app/(main)/profile/components/ProfileForm.tsx b/app/(main)/profile/components/ProfileForm.tsx
index 30bf5905..98bf112c 100644
--- a/app/(main)/profile/components/ProfileForm.tsx
+++ b/app/(main)/profile/components/ProfileForm.tsx
@@ -158,7 +158,7 @@ export default function ProfileForm({ user }: { user: User }) {
         });
         setSuccessMessage(
           data.email !== user.email
-            ? 'Profile saved. Please check your new email address to verify the change.'
+            ? 'Profile saved. Please check both your new and old email addresses to verify the change.'
             : 'Profile saved.',
         );
       } else {
@@ -167,7 +167,7 @@ export default function ProfileForm({ user }: { user: User }) {
       }
     } catch (error) {
       console.error('Error saving profile:', error);
-      setErrorMessage('Failed to save profile. Please try again.');
+      setErrorMessage('Failed to save profile.');
     } finally {
       setIsSaving(false);
     }
diff --git a/app/(main)/profile/components/SignOutButton.tsx b/app/(main)/profile/components/SignOutButton.tsx
index 6aa9d39d..fc283632 100644
--- a/app/(main)/profile/components/SignOutButton.tsx
+++ b/app/(main)/profile/components/SignOutButton.tsx
@@ -32,7 +32,7 @@ export default function SignOutButton() {
   return (
     <>
       <button onClick={signOut} disabled={isSigningOut}>
-        {isSigningOut ? 'Signing out...' : 'Sign out'}
+        {isSigningOut ? 'Signing out...' : 'Sign Out'}
       </button>
       {errorMessage && <p role="alert">{errorMessage}</p>}
     </>
diff --git a/app/(main)/request/[storeId]/[storeItemId]/components/AddInStockToCartForm.tsx b/app/(main)/request/[storeId]/[storeItemId]/components/AddInStockToCartForm.tsx
index f8ae2d77..7a4f9868 100644
--- a/app/(main)/request/[storeId]/[storeItemId]/components/AddInStockToCartForm.tsx
+++ b/app/(main)/request/[storeId]/[storeItemId]/components/AddInStockToCartForm.tsx
@@ -46,36 +46,8 @@ export default function AddInStockToCartForm({
 
         <SubmitButton />
       </Form>
-      {errorMessage && (
-        <div
-          style={{
-            backgroundColor: '#f8d7da',
-            color: '#721c24',
-            padding: '12px',
-            borderRadius: '5px',
-            marginBottom: '15px',
-            textAlign: 'center',
-            fontWeight: 'bold',
-          }}
-        >
-          {errorMessage}
-        </div>
-      )}
-      {successMessage && (
-        <div
-          style={{
-            backgroundColor: '#d4edda',
-            color: '#155724',
-            padding: '12px',
-            borderRadius: '5px',
-            marginBottom: '15px',
-            textAlign: 'center',
-            fontWeight: 'bold',
-          }}
-        >
-          {successMessage}
-        </div>
-      )}
+      {errorMessage && <p>{errorMessage}</p>}
+      {successMessage && <p>{successMessage}</p>}
     </div>
   );
 }
diff --git a/app/(main)/request/[storeId]/cart/components/SubmitTicketButton.tsx b/app/(main)/request/[storeId]/cart/components/SubmitTicketButton.tsx
index 3fde12ac..a70d0bc8 100644
--- a/app/(main)/request/[storeId]/cart/components/SubmitTicketButton.tsx
+++ b/app/(main)/request/[storeId]/cart/components/SubmitTicketButton.tsx
@@ -1,40 +1,40 @@
-'use client';
-import { useState, useTransition } from 'react';
-import { updateTicketStatus } from '@/app/actions/ticket';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-
-export default function SubmitTicketButton({ ticketId }: { ticketId: string }) {
-  const [isPending, startTransition] = useTransition();
-  const [error, setError] = useState<string | null>(null);
-  const [successMessage, setSuccessMessage] = useState('');
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-
-  const handleSubmit = async () => {
-    setError(null);
-    setSuccessMessage('');
-    startTransition(async () => {
-      const result = await updateTicketStatus('requested', ticketId);
-      if (result.success) {
-        setSuccessMessage('Ticket submitted successfully!');
-        const params = new URLSearchParams(searchParams?.toString() || '');
-        params.set('submitted', '1');
-        params.set('ticketId', ticketId);
-        router.replace(`${pathname}?${params.toString()}`);
-      } else {
-        setError(result.error || 'Failed to submit ticket.');
-      }
-    });
-  };
-
-  return (
-    <div>
-      <button type="button" onClick={handleSubmit} disabled={isPending}>
-        {isPending ? 'Submitting...' : 'Submit ticket'}
-      </button>
-      {error && <p style={{ color: 'red' }}>{error}</p>}
-      {successMessage && <p style={{ color: 'green' }}>{successMessage}</p>}
-    </div>
-  );
-}
+'use client';
+import { useState, useTransition } from 'react';
+import { updateTicketStatus } from '@/app/actions/ticket';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+
+export default function SubmitTicketButton({ ticketId }: { ticketId: string }) {
+  const [isPending, startTransition] = useTransition();
+  const [error, setError] = useState<string | null>(null);
+  const [successMessage, setSuccessMessage] = useState('');
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const handleSubmit = async () => {
+    setError(null);
+    setSuccessMessage('');
+    startTransition(async () => {
+      const result = await updateTicketStatus('requested', ticketId);
+      if (result.success) {
+        setSuccessMessage('Ticket submitted successfully!');
+        const params = new URLSearchParams(searchParams?.toString() || '');
+        params.set('submitted', '1');
+        params.set('ticketId', ticketId);
+        router.replace(`${pathname}?${params.toString()}`);
+      } else {
+        setError(result.error || 'Failed to submit ticket.');
+      }
+    });
+  };
+
+  return (
+    <div>
+      <button type="button" onClick={handleSubmit} disabled={isPending}>
+        {isPending ? 'Submitting...' : 'Submit ticket'}
+      </button>
+      {error && <p style={{ color: 'red' }}>{error}</p>}
+      {successMessage && <p style={{ color: 'green' }}>{successMessage}</p>}
+    </div>
+  );
+}
diff --git a/app/(main)/request/components/AddOutOfStockToCartForm.tsx b/app/(main)/request/components/AddOutOfStockToCartForm.tsx
index 8c12a9db..77d66030 100644
--- a/app/(main)/request/components/AddOutOfStockToCartForm.tsx
+++ b/app/(main)/request/components/AddOutOfStockToCartForm.tsx
@@ -3,7 +3,7 @@
 import Form from 'next/form';
 import { useState } from 'react';
 import { addToCart } from '@/app/actions/ticket';
-import SubmitButton from './SubmitButton';
+import SubmitButton from '@/app/(main)/request/components/SubmitButton';
 
 interface AddOutOfStockToCartFormProps {
   storeId: string;
@@ -34,36 +34,8 @@ export default function AddOutOfStockToCartForm({
 
   return (
     <div>
-      {errorMessage && (
-        <div
-          style={{
-            backgroundColor: '#f8d7da',
-            color: '#721c24',
-            padding: '12px',
-            borderRadius: '5px',
-            marginBottom: '15px',
-            textAlign: 'center',
-            fontWeight: 'bold',
-          }}
-        >
-          {errorMessage}
-        </div>
-      )}
-      {successMessage && (
-        <div
-          style={{
-            backgroundColor: '#d4edda',
-            color: '#155724',
-            padding: '12px',
-            borderRadius: '5px',
-            marginBottom: '15px',
-            textAlign: 'center',
-            fontWeight: 'bold',
-          }}
-        >
-          {successMessage}
-        </div>
-      )}
+      {errorMessage && <p>{errorMessage}</p>}
+      {successMessage && <p>{successMessage}</p>}
       <Form action={handleSubmit}>
         <input
           name="description"
diff --git a/app/(main)/request/components/SubmitButton.tsx b/app/(main)/request/components/SubmitButton.tsx
index 8f1cd1b7..7a67fac6 100644
--- a/app/(main)/request/components/SubmitButton.tsx
+++ b/app/(main)/request/components/SubmitButton.tsx
@@ -6,11 +6,7 @@ export default function SubmitButton() {
   const { pending } = useFormStatus();
 
   return (
-    <button
-      type="submit"
-      disabled={pending}
-      className="bg-blue-500 text-white px-4 py-2 rounded"
-    >
+    <button type="submit" disabled={pending}>
       {pending ? 'Adding...' : 'Add to Cart'}
     </button>
   );
diff --git a/app/(main)/team/people/[userId]/components/Dropdown.tsx b/app/(main)/team/people/[userId]/components/Dropdown.tsx
index 49f62122..5ae13ebb 100644
--- a/app/(main)/team/people/[userId]/components/Dropdown.tsx
+++ b/app/(main)/team/people/[userId]/components/Dropdown.tsx
@@ -15,7 +15,7 @@ export default function Dropdown({
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
   const [successMessage, setSuccessMessage] = useState('');
-  
+
   const hasChanged = currentRoleId !== originalRoleId;
 
   const handleSave = async () => {
@@ -25,14 +25,13 @@ export default function Dropdown({
     try {
       const res = await updateUserRole(userId, currentRoleId);
       if (!res.success) {
-        setErrorMessage(
-          res.error ?? 'Insufficient privileges to update role.',
-        );
+        setErrorMessage(res.error ?? 'Insufficient privileges to update role.');
         return;
       }
       setOriginalRoleId(currentRoleId);
       setSuccessMessage('Role updated.');
     } catch (error) {
+      console.error('Role update error:', error);
       setErrorMessage('Unable to update role. Please try again.');
     } finally {
       setIsSubmitting(false);
diff --git a/app/(main)/team/store-admins/[storeId]/components/AddAdminSearch.tsx b/app/(main)/team/store-admins/[storeId]/components/AddAdminSearch.tsx
index c90aa2b2..bd95843b 100644
--- a/app/(main)/team/store-admins/[storeId]/components/AddAdminSearch.tsx
+++ b/app/(main)/team/store-admins/[storeId]/components/AddAdminSearch.tsx
@@ -70,7 +70,7 @@ export default function AddAdminSearch({
       setSuccessMessage('Admin added.');
     } catch (error) {
       console.error('Store admin creation error:', error);
-      setErrorMessage('Failed to add admin. Please try again.');
+      setErrorMessage('Failed to add admin.');
     } finally {
       setIsAddingUserId(null);
     }
diff --git a/app/(main)/team/store-admins/[storeId]/components/DeleteStoreAdminButton.tsx b/app/(main)/team/store-admins/[storeId]/components/DeleteStoreAdminButton.tsx
index b88f4e98..39d95b66 100644
--- a/app/(main)/team/store-admins/[storeId]/components/DeleteStoreAdminButton.tsx
+++ b/app/(main)/team/store-admins/[storeId]/components/DeleteStoreAdminButton.tsx
@@ -25,7 +25,7 @@ export default function DeleteStoreAdminButton({
       setSuccessMessage('Admin removed.');
     } catch (error) {
       console.error('Store admin deletion error:', error);
-      setErrorMessage('Failed to remove admin. Please try again.');
+      setErrorMessage('Failed to remove admin.');
     } finally {
       setIsDeleting(false);
     }