Add phone fields

app/(main)/administration/members/[userId]/page.tsx

@@ -63,11 +63,11 @@ export default async function TeamProfilePage({
             <div>
               <div className="two-col-row">
                 <div>
-                  <label className={styles.profileLabel}>First name</label>
+                  <label className={styles.profileLabel}>First Name</label>
                   <p className="form-control-plaintext">{user.first_name}</p>
                 </div>
                 <div>
-                  <label className={styles.profileLabel}>Last name</label>
+                  <label className={styles.profileLabel}>Last Name</label>
                   <p className="form-control-plaintext">{user.last_name}</p>
                 </div>
               </div>
@@ -78,6 +78,11 @@ export default async function TeamProfilePage({
               <p className="form-control-plaintext">{user.email}</p>
             </div>
 
+            <div>
+              <label className={styles.profileLabel}>Phone Number</label>
+              <p className="form-control-plaintext">{user.phone}</p>
+            </div>
+
             <div>
               <label className={styles.profileLabel}>Role</label>
               <Dropdown userId={userId} roleId={role?.role_id} />

app/(main)/profile/components/ProfileForm.tsx

@@ -14,6 +14,7 @@ type ProfileFormValues = {
   email: string;
   firstName: string;
   lastName: string;
+  phone: string;
 };
 
 export default function ProfileForm({ user }: { user: User }) {
@@ -40,6 +41,7 @@ export default function ProfileForm({ user }: { user: User }) {
       firstName: user.first_name,
       lastName: user.last_name,
       email: user.email,
+      phone: user.phone,
     },
   });
 
@@ -115,6 +117,7 @@ export default function ProfileForm({ user }: { user: User }) {
       if (data.email !== user.email) changes.email = data.email;
       if (selectedFile || isPendingDelete)
         changes.profile_photo_url = finalPhotoUrl;
+      if (data.phone != user.phone) changes.phone = data.phone;
 
       const result = await updateUser(user.user_id, changes);
 
@@ -129,6 +132,7 @@ export default function ProfileForm({ user }: { user: User }) {
           firstName: data.firstName,
           lastName: data.lastName,
           email: user.email,
+          phone: user.phone,
         });
         setIsEditing(false);
         if (data.email !== user.email) {
@@ -233,6 +237,23 @@ export default function ProfileForm({ user }: { user: User }) {
             )}
           </div>
 
+          <div>
+            <label className={styles.profileLabel}>Phone Number</label>
+            {isEditing ? (
+              <>
+                <input
+                  className="form-control"
+                  {...register('phone', { required: true })}
+                />
+                {errors.phone?.type === 'required' && (
+                  <p role="alert">Phone number is required.</p>
+                )}
+              </>
+            ) : (
+              <p className="form-control-plaintext">{watchedValues.phone}</p>
+            )}
+          </div>
+
           {isEditing && (
             <div className="btn-row">
               <button