From 8dfbace53c0186d7a9a7043a8d0b588dd34a3428 Mon Sep 17 00:00:00 2001
From: SomiVista <somayerohani06@gmail.com>
Date: Fri, 11 Jul 2025 13:47:36 +0300
Subject: [PATCH 01/11] #86et9akm3 - Enhance profile settings page with new
 fields. Update localization for new profile options and improve layout for
 better user experience.

---
 frontend/locales/en.json            |  7 +++-
 frontend/pages/settings/profile.vue | 54 ++++++++++++++++++++++++++---
 2 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 9102939..1af001e 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -174,7 +174,12 @@
         "start-new-session": "Start New Session"
     },
     "profile": {
-        "profile": "Profile"
+        "profile": "Profile",
+        "receive-daily-practice-email-reminders": "Receive daily practice email reminders?",
+        "full-name": "Full Name",
+        "email": "Email",
+        "password": "Password",
+        "reset-password": "Reset Password"
     },
     "billing": {
         "billing": "Billing",
diff --git a/frontend/pages/settings/profile.vue b/frontend/pages/settings/profile.vue
index a3f1acc..33a7139 100644
--- a/frontend/pages/settings/profile.vue
+++ b/frontend/pages/settings/profile.vue
@@ -1,12 +1,49 @@
 <template>
-    <div class="p-4">
-        <div class="flex gap-8">
-            <h1 class="text-2xl font-bold">{{ t('profile.profile') }}</h1>
-        </div>
+    <div class="p-6">
+        <h1 class="mb-6 text-lg font-bold">{{ t('profile.profile') }}</h1>
+        <!-- User Details Section -->
+        <Card class="shadow-none">
+            <form @submit.prevent>
+                <div class="flex flex-col sm:flex-row">
+                    <div class="mb-5 w-full sm:w-2/12 ltr:sm:mr-4 rtl:sm:ml-4">
+                        <img :src="profilePhotoPreview" alt="Profile Photo" class="h-24 w-24 rounded-full border border-gray-200 object-cover" />
+                    </div>
+                    <div class="grid flex-1 grid-cols-1 gap-5 sm:grid-cols-2">
+                        <Input :label="t('profile.full-name')" :model-value="name" type="text" :placeholder="t('Placeholder')" required />
+                        <Input :label="t('profile.email')" :model-value="email" type="email" :placeholder="t('Placeholder')" required disabled />
+                        <Input
+                            :label="t('profile.password')"
+                            type="password"
+                            :placeholder="t('Placeholder')"
+                            iconName="IconLock"
+                            iconOppositePosition
+                            required
+                            disabled
+                        />
+                        <Button class="items-end justify-start !border-none !text-primary">
+                            {{ t('profile.reset-password') }}
+                        </Button>
+                        <label class="col-span-2 inline-flex items-center">
+                            <input type="checkbox" />
+                            <span>{{ t('profile.receive-daily-practice-email-reminders') }}</span>
+                        </label>
+                        <div class="col-span-2 mt-3">
+                            <Button type="submit" color="primary">
+                                {{ t('save') }}
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </Card>
     </div>
 </template>
 
 <script lang="ts" setup>
+    import { ref, computed, onMounted } from 'vue';
+    import { useProfileStore } from '~/stores/profile';
+    import { Card, Input, Button } from '@codebridger/lib-vue-components/elements.ts';
+    const profileStore = useProfileStore();
     const { t } = useI18n();
 
     definePageMeta({
@@ -15,4 +52,13 @@
         // @ts-ignore
         middleware: ['auth'],
     });
+
+    const name = ref('');
+    const email = computed(() => profileStore.email || '');
+    const profilePhotoPreview = computed(() => profileStore.userDetail?.gPicture || '');
+
+    onMounted(async () => {
+        await profileStore.getProfileInfo();
+        name.value = profileStore.userDetail?.name || '';
+    });
 </script>

From 6e36912c55ac2c7e35b3b84e89f2e240f43f4f01 Mon Sep 17 00:00:00 2001
From: SomiVista <somayerohani06@gmail.com>
Date: Fri, 11 Jul 2025 20:31:51 +0300
Subject: [PATCH 02/11] #86et9akm3 - Update profile settings page to include a
 checkbox for daily email reminders and improve password input visibility.
 Enhance localization and component imports for better functionality.

---
 frontend/pages/settings/profile.vue | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/pages/settings/profile.vue b/frontend/pages/settings/profile.vue
index 33a7139..139a83f 100644
--- a/frontend/pages/settings/profile.vue
+++ b/frontend/pages/settings/profile.vue
@@ -14,8 +14,8 @@
                         <Input
                             :label="t('profile.password')"
                             type="password"
-                            :placeholder="t('Placeholder')"
-                            iconName="IconLock"
+                            placeholder="*************"
+                            iconName="IconEyeOff"
                             iconOppositePosition
                             required
                             disabled
@@ -23,10 +23,13 @@
                         <Button class="items-end justify-start !border-none !text-primary">
                             {{ t('profile.reset-password') }}
                         </Button>
-                        <label class="col-span-2 inline-flex items-center">
-                            <input type="checkbox" />
-                            <span>{{ t('profile.receive-daily-practice-email-reminders') }}</span>
-                        </label>
+                        <CheckboxInput
+                            v-for="option in options"
+                            :key="option.value"
+                            v-model="selectedValues[option.value]"
+                            :text="option.label"
+                            :value="option.value"
+                        />
                         <div class="col-span-2 mt-3">
                             <Button type="submit" color="primary">
                                 {{ t('save') }}
@@ -42,7 +45,7 @@
 <script lang="ts" setup>
     import { ref, computed, onMounted } from 'vue';
     import { useProfileStore } from '~/stores/profile';
-    import { Card, Input, Button } from '@codebridger/lib-vue-components/elements.ts';
+    import { Card, Input, Button, CheckboxInput } from '@codebridger/lib-vue-components/elements.ts';
     const profileStore = useProfileStore();
     const { t } = useI18n();
 
@@ -56,6 +59,9 @@
     const name = ref('');
     const email = computed(() => profileStore.email || '');
     const profilePhotoPreview = computed(() => profileStore.userDetail?.gPicture || '');
+    const options = [{ label: t('profile.receive-daily-practice-email-reminders'), value: 'dailyReminders' }];
+
+    const selectedValues = ref<Record<string, boolean>>({});
 
     onMounted(async () => {
         await profileStore.getProfileInfo();

From 82fc7d5f28bb87edbfeb666a493fb511c0167866 Mon Sep 17 00:00:00 2001
From: SomiVista <somayerohani06@gmail.com>
Date: Sat, 12 Jul 2025 00:24:33 +0300
Subject: [PATCH 03/11] #86et9akm3 - Implement profile picture upload
 functionality and enhance profile update process. Add validation for file
 type and size, and improve user feedback with success/error messages. Update
 localization for new UI elements.

---
 frontend/locales/en.json                |   3 +-
 frontend/pages/settings/profile.vue     | 103 +++++++++++++++++++--
 frontend/stores/profile.ts              |  64 +++++++++++++-
 server/src/modules/profile/functions.ts | 113 +++++++++++++++++++++++-
 4 files changed, 272 insertions(+), 11 deletions(-)

diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 1af001e..6a99962 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -179,7 +179,8 @@
         "full-name": "Full Name",
         "email": "Email",
         "password": "Password",
-        "reset-password": "Reset Password"
+        "reset-password": "Reset Password",
+        "uploading": "Uploading..."
     },
     "billing": {
         "billing": "Billing",
diff --git a/frontend/pages/settings/profile.vue b/frontend/pages/settings/profile.vue
index 139a83f..14c7675 100644
--- a/frontend/pages/settings/profile.vue
+++ b/frontend/pages/settings/profile.vue
@@ -3,15 +3,50 @@
         <h1 class="mb-6 text-lg font-bold">{{ t('profile.profile') }}</h1>
         <!-- User Details Section -->
         <Card class="shadow-none">
-            <form @submit.prevent>
+            <form @submit.prevent="handleSubmit">
                 <div class="flex flex-col sm:flex-row">
-                    <div class="mb-5 w-full sm:w-2/12 ltr:sm:mr-4 rtl:sm:ml-4">
-                        <img :src="profilePhotoPreview" alt="Profile Photo" class="h-24 w-24 rounded-full border border-gray-200 object-cover" />
+                    <div class="mb-5 w-full items-center justify-center sm:w-2/12 ltr:sm:mr-4 rtl:sm:ml-4">
+                        <div class="group relative h-24 w-24">
+                            <img
+                                :src="profilePhotoPreview"
+                                alt="Profile Photo"
+                                class="h-24 w-24 cursor-pointer rounded-full border border-gray-200 object-cover transition-opacity group-hover:opacity-80"
+                            />
+                            <div
+                                class="absolute inset-0 flex items-center justify-center rounded-full bg-black bg-opacity-0 transition-all duration-200 group-hover:bg-opacity-30"
+                            >
+                                <svg
+                                    class="h-6 w-6 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                >
+                                    <path
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
+                                    ></path>
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                                </svg>
+                            </div>
+                            <input
+                                ref="fileInput"
+                                type="file"
+                                accept="image/*"
+                                class="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+                                @change="handleFileUpload"
+                                :disabled="isUploading"
+                            />
+                        </div>
+                        <div v-if="isUploading" class="mt-2 text-center text-sm text-gray-500">
+                            {{ t('profile.uploading') }}
+                        </div>
                     </div>
                     <div class="grid flex-1 grid-cols-1 gap-5 sm:grid-cols-2">
-                        <Input :label="t('profile.full-name')" :model-value="name" type="text" :placeholder="t('Placeholder')" required />
+                        <Input :label="t('profile.full-name')" v-model="name" type="text" :placeholder="t('Placeholder')" required :disabled="isSubmitting" />
                         <Input :label="t('profile.email')" :model-value="email" type="email" :placeholder="t('Placeholder')" required disabled />
-                        <Input
+                        <!-- <Input
                             :label="t('profile.password')"
                             type="password"
                             placeholder="*************"
@@ -22,16 +57,17 @@
                         />
                         <Button class="items-end justify-start !border-none !text-primary">
                             {{ t('profile.reset-password') }}
-                        </Button>
+                        </Button> -->
                         <CheckboxInput
                             v-for="option in options"
                             :key="option.value"
                             v-model="selectedValues[option.value]"
                             :text="option.label"
                             :value="option.value"
+                            :disabled="isSubmitting"
                         />
                         <div class="col-span-2 mt-3">
-                            <Button type="submit" color="primary">
+                            <Button type="submit" color="primary" :loading="isSubmitting" :disabled="isSubmitting || isUploading">
                                 {{ t('save') }}
                             </Button>
                         </div>
@@ -46,6 +82,8 @@
     import { ref, computed, onMounted } from 'vue';
     import { useProfileStore } from '~/stores/profile';
     import { Card, Input, Button, CheckboxInput } from '@codebridger/lib-vue-components/elements.ts';
+    import { toastSuccess, toastError } from '@codebridger/lib-vue-components/toast.ts';
+
     const profileStore = useProfileStore();
     const { t } = useI18n();
 
@@ -62,9 +100,60 @@
     const options = [{ label: t('profile.receive-daily-practice-email-reminders'), value: 'dailyReminders' }];
 
     const selectedValues = ref<Record<string, boolean>>({});
+    const isSubmitting = ref(false);
+    const isUploading = ref(false);
+    const fileInput = ref<HTMLInputElement>();
 
     onMounted(async () => {
         await profileStore.getProfileInfo();
         name.value = profileStore.userDetail?.name || '';
     });
+
+    const handleSubmit = async () => {
+        isSubmitting.value = true;
+
+        try {
+            await profileStore.updateProfile({
+                name: name.value,
+            });
+        } catch (error) {
+            console.error('Error updating profile:', error);
+        } finally {
+            isSubmitting.value = false;
+        }
+    };
+
+    const handleFileUpload = async (event: Event) => {
+        const target = event.target as HTMLInputElement;
+        const file = target.files?.[0];
+
+        if (!file) return;
+
+        // Validate file type
+        if (!file.type.startsWith('image/')) {
+            toastError('Please select an image file', { position: 'top-end' });
+            return;
+        }
+
+        // Validate file size (max 5MB)
+        const maxSize = 5 * 1024 * 1024; // 5MB
+        if (file.size > maxSize) {
+            toastError('File size must be less than 5MB', { position: 'top-end' });
+            return;
+        }
+
+        isUploading.value = true;
+
+        try {
+            await profileStore.uploadProfilePicture(file);
+            // Clear the input
+            if (fileInput.value) {
+                fileInput.value.value = '';
+            }
+        } catch (error) {
+            console.error('Error uploading file:', error);
+        } finally {
+            isUploading.value = false;
+        }
+    };
 </script>
diff --git a/frontend/stores/profile.ts b/frontend/stores/profile.ts
index 5bcff7e..96df965 100644
--- a/frontend/stores/profile.ts
+++ b/frontend/stores/profile.ts
@@ -1,5 +1,5 @@
 import { authentication, dataProvider, functionProvider } from '@modular-rest/client';
-import { toastError } from '@codebridger/lib-vue-components/toast.ts';
+import { toastError, toastSuccess } from '@codebridger/lib-vue-components/toast.ts';
 import { defineStore } from 'pinia';
 
 import { COLLECTIONS, DATABASE, type FreemiumAllocationType, type ProfileType, type SubscriptionType } from '~/types/database.type';
@@ -70,6 +70,66 @@ export const useProfileStore = defineStore('profile', () => {
             });
     }
 
+    function updateProfile(profileData: { name?: string; gPicture?: string }) {
+        return functionProvider
+            .run({
+                name: 'updateProfile',
+                args: {
+                    userId: authUser.value?.id,
+                    ...profileData,
+                },
+            })
+            .then(() => {
+                // Refresh profile info after update
+                return getProfileInfo();
+            })
+            .then(() => {
+                toastSuccess('Profile updated successfully', { position: 'top-end' });
+            })
+            .catch((error) => {
+                toastError(error.error || 'Unable to update profile', { position: 'top-end' });
+                throw error;
+            });
+    }
+
+    function uploadProfilePicture(file: File) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+
+            reader.onload = async () => {
+                try {
+                    const result = await functionProvider.run({
+                        name: 'uploadProfilePicture',
+                        args: {
+                            userId: authUser.value?.id,
+                            file: {
+                                buffer: Array.from(new Uint8Array(reader.result as ArrayBuffer)),
+                                mimetype: file.type,
+                                originalname: file.name,
+                            },
+                        },
+                    });
+
+                    // Refresh profile info after upload
+                    await getProfileInfo();
+                    toastSuccess('Profile picture uploaded successfully', { position: 'top-end' });
+                    resolve(result);
+                } catch (error: any) {
+                    toastError(error.error || 'Unable to upload profile picture', { position: 'top-end' });
+                    reject(error);
+                }
+            };
+
+            reader.onerror = () => {
+                const error = new Error('Failed to read file');
+                toastError('Failed to read file', { position: 'top-end' });
+                reject(error);
+            };
+
+            reader.readAsArrayBuffer(file);
+        });
+    }
+
     // bootstrap the profile store
     function bootstrap() {
         return Promise.all([
@@ -104,6 +164,8 @@ export const useProfileStore = defineStore('profile', () => {
 
         logout,
         getProfileInfo,
+        updateProfile,
+        uploadProfilePicture,
         loginWithLastSession,
         bootstrap,
     };
diff --git a/server/src/modules/profile/functions.ts b/server/src/modules/profile/functions.ts
index 0a8cd9d..a9f3c66 100644
--- a/server/src/modules/profile/functions.ts
+++ b/server/src/modules/profile/functions.ts
@@ -1,9 +1,114 @@
-import { defineFunction, reply } from "@modular-rest/server";
+import { defineFunction, reply, getCollection } from "@modular-rest/server";
 import {
   clearUserSubscriptions,
   clearUserFreemiumAllocations,
   clearUserUsageRecords,
 } from "../subscription/service";
+import { updateUserProfile } from "./service";
+import { DATABASE, PROFILE_COLLECTION } from "../../config";
+import * as fs from "fs";
+import * as path from "path";
+
+/**
+ * Upload profile picture
+ */
+const uploadProfilePicture = defineFunction({
+  name: "uploadProfilePicture",
+  permissionTypes: ["user_access"],
+  callback: async (params) => {
+    const { file, userId } = params;
+
+    if (!userId) {
+      throw new Error("User ID is required");
+    }
+
+    if (!file || !file.buffer || !file.mimetype) {
+      throw new Error("Invalid file data");
+    }
+
+    // Validate file type
+    if (!file.mimetype.startsWith("image/")) {
+      throw new Error("Only image files are allowed");
+    }
+
+    // Validate file size (max 5MB)
+    const maxSize = 5 * 1024 * 1024; // 5MB
+    if (file.buffer.length > maxSize) {
+      throw new Error("File size must be less than 5MB");
+    }
+
+    try {
+      // Generate unique filename
+      const fileExtension = path.extname(file.originalname || "image.jpg");
+      const fileName = `profile_${userId}_${Date.now()}${fileExtension}`;
+
+      // Create uploads directory in public folder if it doesn't exist
+      const uploadsDir = path.join(__dirname, "../../../public/uploads");
+      if (!fs.existsSync(uploadsDir)) {
+        fs.mkdirSync(uploadsDir, { recursive: true });
+      }
+
+      // Save file to uploads directory
+      const filePath = path.join(uploadsDir, fileName);
+      fs.writeFileSync(filePath, file.buffer);
+
+      // Generate public URL
+      const publicUrl = `/uploads/${fileName}`;
+
+      // Update profile with new picture URL
+      const profileCollection = getCollection(DATABASE, PROFILE_COLLECTION);
+      await profileCollection.updateOne(
+        { refId: userId },
+        { $set: { gPicture: publicUrl } },
+        { upsert: true }
+      );
+
+      reply.create("s", {
+        message: "Profile picture uploaded successfully",
+        url: publicUrl,
+      });
+    } catch (error: any) {
+      reply.create("e", {
+        message: `Failed to upload profile picture: ${error.message}`,
+      });
+    }
+  },
+});
+
+/**
+ * Update user profile information
+ */
+const updateProfile = defineFunction({
+  name: "updateProfile",
+  permissionTypes: ["user_access"],
+  callback: async (params) => {
+    const { name, gPicture } = params;
+    const userId = params.userId || params.user?.id;
+
+    if (!userId) {
+      throw new Error("User ID is required");
+    }
+
+    try {
+      await updateUserProfile(
+        {
+          refId: userId,
+          name,
+          gPicture,
+        },
+        true
+      );
+
+      reply.create("s", {
+        message: "Profile updated successfully",
+      });
+    } catch (error: any) {
+      reply.create("e", {
+        message: `Failed to update profile: ${error.message}`,
+      });
+    }
+  },
+});
 
 /**
  * Remove subscription and freemium allocation for a user
@@ -48,4 +153,8 @@ const clearSubscriptionAndFreemium = defineFunction({
   },
 });
 
-module.exports.functions = [clearSubscriptionAndFreemium];
+module.exports.functions = [
+  uploadProfilePicture,
+  updateProfile,
+  clearSubscriptionAndFreemium,
+];

From e48bb751e6969d0fd3297310f49067c5f677e24a Mon Sep 17 00:00:00 2001
From: SomiVista <somayerohani06@gmail.com>
Date: Sun, 13 Jul 2025 12:33:51 +0300
Subject: [PATCH 04/11] #86et9akm3 - management: Restore profile navigation
 item, remove unused profile update and upload functions, and clean up profile
 page form handling. This simplifies the profile settings functionality and
 improves code maintainability.

---
 .../composables/useDashboardNavigatorItems.ts |  10 +-
 frontend/pages/settings/profile.vue           |  52 +-------
 frontend/stores/profile.ts                    |  64 +---------
 server/src/modules/profile/functions.ts       | 113 +-----------------
 4 files changed, 10 insertions(+), 229 deletions(-)

diff --git a/frontend/composables/useDashboardNavigatorItems.ts b/frontend/composables/useDashboardNavigatorItems.ts
index e2fa22e..f0b8e67 100644
--- a/frontend/composables/useDashboardNavigatorItems.ts
+++ b/frontend/composables/useDashboardNavigatorItems.ts
@@ -37,11 +37,11 @@ export const useDashboardNavigatorItems = (): Array<SidebarGroupType> => {
         {
             title: t('settings'),
             children: [
-                // {
-                //     title: t('profile.profile'),
-                //     icon: 'IconUser',
-                //     to: '/settings/profile',
-                // },
+                {
+                    title: t('profile.profile'),
+                    icon: 'IconUser',
+                    to: '/settings/profile',
+                },
                 {
                     title: t('subscription.title'),
                     icon: 'IconCreditCard',
diff --git a/frontend/pages/settings/profile.vue b/frontend/pages/settings/profile.vue
index 14c7675..67eefac 100644
--- a/frontend/pages/settings/profile.vue
+++ b/frontend/pages/settings/profile.vue
@@ -3,7 +3,7 @@
         <h1 class="mb-6 text-lg font-bold">{{ t('profile.profile') }}</h1>
         <!-- User Details Section -->
         <Card class="shadow-none">
-            <form @submit.prevent="handleSubmit">
+            <form @submit.prevent="">
                 <div class="flex flex-col sm:flex-row">
                     <div class="mb-5 w-full items-center justify-center sm:w-2/12 ltr:sm:mr-4 rtl:sm:ml-4">
                         <div class="group relative h-24 w-24">
@@ -35,7 +35,7 @@
                                 type="file"
                                 accept="image/*"
                                 class="absolute inset-0 h-full w-full cursor-pointer opacity-0"
-                                @change="handleFileUpload"
+                                @change=""
                                 :disabled="isUploading"
                             />
                         </div>
@@ -108,52 +108,4 @@
         await profileStore.getProfileInfo();
         name.value = profileStore.userDetail?.name || '';
     });
-
-    const handleSubmit = async () => {
-        isSubmitting.value = true;
-
-        try {
-            await profileStore.updateProfile({
-                name: name.value,
-            });
-        } catch (error) {
-            console.error('Error updating profile:', error);
-        } finally {
-            isSubmitting.value = false;
-        }
-    };
-
-    const handleFileUpload = async (event: Event) => {
-        const target = event.target as HTMLInputElement;
-        const file = target.files?.[0];
-
-        if (!file) return;
-
-        // Validate file type
-        if (!file.type.startsWith('image/')) {
-            toastError('Please select an image file', { position: 'top-end' });
-            return;
-        }
-
-        // Validate file size (max 5MB)
-        const maxSize = 5 * 1024 * 1024; // 5MB
-        if (file.size > maxSize) {
-            toastError('File size must be less than 5MB', { position: 'top-end' });
-            return;
-        }
-
-        isUploading.value = true;
-
-        try {
-            await profileStore.uploadProfilePicture(file);
-            // Clear the input
-            if (fileInput.value) {
-                fileInput.value.value = '';
-            }
-        } catch (error) {
-            console.error('Error uploading file:', error);
-        } finally {
-            isUploading.value = false;
-        }
-    };
 </script>
diff --git a/frontend/stores/profile.ts b/frontend/stores/profile.ts
index 96df965..5bcff7e 100644
--- a/frontend/stores/profile.ts
+++ b/frontend/stores/profile.ts
@@ -1,5 +1,5 @@
 import { authentication, dataProvider, functionProvider } from '@modular-rest/client';
-import { toastError, toastSuccess } from '@codebridger/lib-vue-components/toast.ts';
+import { toastError } from '@codebridger/lib-vue-components/toast.ts';
 import { defineStore } from 'pinia';
 
 import { COLLECTIONS, DATABASE, type FreemiumAllocationType, type ProfileType, type SubscriptionType } from '~/types/database.type';
@@ -70,66 +70,6 @@ export const useProfileStore = defineStore('profile', () => {
             });
     }
 
-    function updateProfile(profileData: { name?: string; gPicture?: string }) {
-        return functionProvider
-            .run({
-                name: 'updateProfile',
-                args: {
-                    userId: authUser.value?.id,
-                    ...profileData,
-                },
-            })
-            .then(() => {
-                // Refresh profile info after update
-                return getProfileInfo();
-            })
-            .then(() => {
-                toastSuccess('Profile updated successfully', { position: 'top-end' });
-            })
-            .catch((error) => {
-                toastError(error.error || 'Unable to update profile', { position: 'top-end' });
-                throw error;
-            });
-    }
-
-    function uploadProfilePicture(file: File) {
-        return new Promise((resolve, reject) => {
-            const reader = new FileReader();
-
-            reader.onload = async () => {
-                try {
-                    const result = await functionProvider.run({
-                        name: 'uploadProfilePicture',
-                        args: {
-                            userId: authUser.value?.id,
-                            file: {
-                                buffer: Array.from(new Uint8Array(reader.result as ArrayBuffer)),
-                                mimetype: file.type,
-                                originalname: file.name,
-                            },
-                        },
-                    });
-
-                    // Refresh profile info after upload
-                    await getProfileInfo();
-                    toastSuccess('Profile picture uploaded successfully', { position: 'top-end' });
-                    resolve(result);
-                } catch (error: any) {
-                    toastError(error.error || 'Unable to upload profile picture', { position: 'top-end' });
-                    reject(error);
-                }
-            };
-
-            reader.onerror = () => {
-                const error = new Error('Failed to read file');
-                toastError('Failed to read file', { position: 'top-end' });
-                reject(error);
-            };
-
-            reader.readAsArrayBuffer(file);
-        });
-    }
-
     // bootstrap the profile store
     function bootstrap() {
         return Promise.all([
@@ -164,8 +104,6 @@ export const useProfileStore = defineStore('profile', () => {
 
         logout,
         getProfileInfo,
-        updateProfile,
-        uploadProfilePicture,
         loginWithLastSession,
         bootstrap,
     };
diff --git a/server/src/modules/profile/functions.ts b/server/src/modules/profile/functions.ts
index a9f3c66..0a8cd9d 100644
--- a/server/src/modules/profile/functions.ts
+++ b/server/src/modules/profile/functions.ts
@@ -1,114 +1,9 @@
-import { defineFunction, reply, getCollection } from "@modular-rest/server";
+import { defineFunction, reply } from "@modular-rest/server";
 import {
   clearUserSubscriptions,
   clearUserFreemiumAllocations,
   clearUserUsageRecords,
 } from "../subscription/service";
-import { updateUserProfile } from "./service";
-import { DATABASE, PROFILE_COLLECTION } from "../../config";
-import * as fs from "fs";
-import * as path from "path";
-
-/**
- * Upload profile picture
- */
-const uploadProfilePicture = defineFunction({
-  name: "uploadProfilePicture",
-  permissionTypes: ["user_access"],
-  callback: async (params) => {
-    const { file, userId } = params;
-
-    if (!userId) {
-      throw new Error("User ID is required");
-    }
-
-    if (!file || !file.buffer || !file.mimetype) {
-      throw new Error("Invalid file data");
-    }
-
-    // Validate file type
-    if (!file.mimetype.startsWith("image/")) {
-      throw new Error("Only image files are allowed");
-    }
-
-    // Validate file size (max 5MB)
-    const maxSize = 5 * 1024 * 1024; // 5MB
-    if (file.buffer.length > maxSize) {
-      throw new Error("File size must be less than 5MB");
-    }
-
-    try {
-      // Generate unique filename
-      const fileExtension = path.extname(file.originalname || "image.jpg");
-      const fileName = `profile_${userId}_${Date.now()}${fileExtension}`;
-
-      // Create uploads directory in public folder if it doesn't exist
-      const uploadsDir = path.join(__dirname, "../../../public/uploads");
-      if (!fs.existsSync(uploadsDir)) {
-        fs.mkdirSync(uploadsDir, { recursive: true });
-      }
-
-      // Save file to uploads directory
-      const filePath = path.join(uploadsDir, fileName);
-      fs.writeFileSync(filePath, file.buffer);
-
-      // Generate public URL
-      const publicUrl = `/uploads/${fileName}`;
-
-      // Update profile with new picture URL
-      const profileCollection = getCollection(DATABASE, PROFILE_COLLECTION);
-      await profileCollection.updateOne(
-        { refId: userId },
-        { $set: { gPicture: publicUrl } },
-        { upsert: true }
-      );
-
-      reply.create("s", {
-        message: "Profile picture uploaded successfully",
-        url: publicUrl,
-      });
-    } catch (error: any) {
-      reply.create("e", {
-        message: `Failed to upload profile picture: ${error.message}`,
-      });
-    }
-  },
-});
-
-/**
- * Update user profile information
- */
-const updateProfile = defineFunction({
-  name: "updateProfile",
-  permissionTypes: ["user_access"],
-  callback: async (params) => {
-    const { name, gPicture } = params;
-    const userId = params.userId || params.user?.id;
-
-    if (!userId) {
-      throw new Error("User ID is required");
-    }
-
-    try {
-      await updateUserProfile(
-        {
-          refId: userId,
-          name,
-          gPicture,
-        },
-        true
-      );
-
-      reply.create("s", {
-        message: "Profile updated successfully",
-      });
-    } catch (error: any) {
-      reply.create("e", {
-        message: `Failed to update profile: ${error.message}`,
-      });
-    }
-  },
-});
 
 /**
  * Remove subscription and freemium allocation for a user
@@ -153,8 +48,4 @@ const clearSubscriptionAndFreemium = defineFunction({
   },
 });
 
-module.exports.functions = [
-  uploadProfilePicture,
-  updateProfile,
-  clearSubscriptionAndFreemium,
-];
+module.exports.functions = [clearSubscriptionAndFreemium];

From 141bd8b2ad615bf81e2319bd0bb8510f8dcc4a22 Mon Sep 17 00:00:00 2001
From: SomiVista <somayerohani06@gmail.com>
Date: Sun, 13 Jul 2025 20:15:38 +0300
Subject: [PATCH 05/11] #86et9akm3 - Implement profile update and image upload
 functionality with validation and user feedback. Enhance profile settings
 page by integrating new methods for updating user details and handling image
 uploads, including error handling and success notifications.

---
 frontend/pages/settings/profile.vue     | 81 ++++++++++++++++++++++++-
 frontend/stores/profile.ts              | 56 ++++++++++++++++-
 server/src/modules/profile/functions.ts | 46 +++++++++++++-
 3 files changed, 178 insertions(+), 5 deletions(-)

diff --git a/frontend/pages/settings/profile.vue b/frontend/pages/settings/profile.vue
index 67eefac..e94d042 100644
--- a/frontend/pages/settings/profile.vue
+++ b/frontend/pages/settings/profile.vue
@@ -3,7 +3,7 @@
         <h1 class="mb-6 text-lg font-bold">{{ t('profile.profile') }}</h1>
         <!-- User Details Section -->
         <Card class="shadow-none">
-            <form @submit.prevent="">
+            <form @submit.prevent="handleSubmit">
                 <div class="flex flex-col sm:flex-row">
                     <div class="mb-5 w-full items-center justify-center sm:w-2/12 ltr:sm:mr-4 rtl:sm:ml-4">
                         <div class="group relative h-24 w-24">
@@ -35,7 +35,7 @@
                                 type="file"
                                 accept="image/*"
                                 class="absolute inset-0 h-full w-full cursor-pointer opacity-0"
-                                @change=""
+                                @change="handleImageUpload"
                                 :disabled="isUploading"
                             />
                         </div>
@@ -96,7 +96,22 @@
 
     const name = ref('');
     const email = computed(() => profileStore.email || '');
-    const profilePhotoPreview = computed(() => profileStore.userDetail?.gPicture || '');
+    const profilePhotoPreview = computed(() => {
+        // Check if there are uploaded images first, then fallback to gPicture
+        if (profileStore.userDetail?.images && profileStore.userDetail.images.length > 0) {
+            // For now, use the first image. We'll need to check what property has the URL
+            const firstImage = profileStore.userDetail.images[0];
+            // Common properties that might contain the URL
+            return (
+                (firstImage as any)?.url ||
+                (firstImage as any)?.path ||
+                (firstImage as any)?.src ||
+                profileStore.userDetail.gPicture ||
+                '/assets/images/user.png'
+            );
+        }
+        return profileStore.userDetail?.gPicture || '/assets/images/user.png';
+    });
     const options = [{ label: t('profile.receive-daily-practice-email-reminders'), value: 'dailyReminders' }];
 
     const selectedValues = ref<Record<string, boolean>>({});
@@ -104,6 +119,66 @@
     const isUploading = ref(false);
     const fileInput = ref<HTMLInputElement>();
 
+    const handleSubmit = async () => {
+        if (isSubmitting.value) return;
+
+        const trimmedName = name.value.trim();
+        if (!trimmedName) {
+            toastError('Please enter your full name', { position: 'top-end' });
+            return;
+        }
+
+        isSubmitting.value = true;
+
+        try {
+            await profileStore.updateProfile({
+                name: trimmedName,
+            });
+            // The success message is handled by the store
+        } catch (error) {
+            // Error message is handled by the store
+            console.error('Profile update failed:', error);
+        } finally {
+            isSubmitting.value = false;
+        }
+    };
+
+    const handleImageUpload = async (event: Event) => {
+        const target = event.target as HTMLInputElement;
+        const file = target.files?.[0];
+
+        if (!file) return;
+
+        // Validate file type
+        if (!file.type.startsWith('image/')) {
+            toastError('Please select a valid image file', { position: 'top-end' });
+            return;
+        }
+
+        // Validate file size (e.g., 5MB limit)
+        const maxSize = 5 * 1024 * 1024; // 5MB in bytes
+        if (file.size > maxSize) {
+            toastError('Image file size should be less than 5MB', { position: 'top-end' });
+            return;
+        }
+
+        isUploading.value = true;
+
+        try {
+            await profileStore.uploadProfileImage(file);
+            // The success message is handled by the store
+        } catch (error) {
+            // Error message is handled by the store
+            console.error('Image upload failed:', error);
+        } finally {
+            isUploading.value = false;
+            // Reset the file input
+            if (fileInput.value) {
+                fileInput.value.value = '';
+            }
+        }
+    };
+
     onMounted(async () => {
         await profileStore.getProfileInfo();
         name.value = profileStore.userDetail?.name || '';
diff --git a/frontend/stores/profile.ts b/frontend/stores/profile.ts
index 5bcff7e..87e82d8 100644
--- a/frontend/stores/profile.ts
+++ b/frontend/stores/profile.ts
@@ -1,5 +1,5 @@
 import { authentication, dataProvider, functionProvider } from '@modular-rest/client';
-import { toastError } from '@codebridger/lib-vue-components/toast.ts';
+import { toastError, toastSuccess } from '@codebridger/lib-vue-components/toast.ts';
 import { defineStore } from 'pinia';
 
 import { COLLECTIONS, DATABASE, type FreemiumAllocationType, type ProfileType, type SubscriptionType } from '~/types/database.type';
@@ -70,6 +70,58 @@ export const useProfileStore = defineStore('profile', () => {
             });
     }
 
+    function updateProfile(profileData: { name: string; gPicture?: string }) {
+        return functionProvider
+            .run({
+                name: 'updateProfile',
+                args: {
+                    userId: authUser.value?.id,
+                    name: profileData.name,
+                    ...(profileData.gPicture && { gPicture: profileData.gPicture }),
+                },
+            })
+            .then((response) => {
+                // Update the local userDetail with the new data
+                if (userDetail.value) {
+                    userDetail.value.name = profileData.name;
+                    if (profileData.gPicture) {
+                        userDetail.value.gPicture = profileData.gPicture;
+                    }
+                }
+                toastSuccess('Profile updated successfully', { position: 'top-end' });
+                return response;
+            })
+            .catch((error) => {
+                toastError(error.error || 'Unable to update profile', { position: 'top-end' });
+                throw error;
+            });
+    }
+
+    function uploadProfileImage(file: File) {
+        return dataProvider
+            .updateOne({
+                database: DATABASE.USER_CONTENT,
+                collection: COLLECTIONS.PROFILE,
+                query: {
+                    refId: authentication.user?.id,
+                },
+                update: {
+                    images: [file],
+                },
+            })
+            .then((response) => {
+                // Refresh profile info to get the updated image URL
+                return getProfileInfo();
+            })
+            .then(() => {
+                toastSuccess('Profile image updated successfully', { position: 'top-end' });
+            })
+            .catch((error) => {
+                toastError(error.error || 'Unable to upload profile image', { position: 'top-end' });
+                throw error;
+            });
+    }
+
     // bootstrap the profile store
     function bootstrap() {
         return Promise.all([
@@ -104,6 +156,8 @@ export const useProfileStore = defineStore('profile', () => {
 
         logout,
         getProfileInfo,
+        updateProfile,
+        uploadProfileImage,
         loginWithLastSession,
         bootstrap,
     };
diff --git a/server/src/modules/profile/functions.ts b/server/src/modules/profile/functions.ts
index 0a8cd9d..5c0bcec 100644
--- a/server/src/modules/profile/functions.ts
+++ b/server/src/modules/profile/functions.ts
@@ -4,6 +4,7 @@ import {
   clearUserFreemiumAllocations,
   clearUserUsageRecords,
 } from "../subscription/service";
+import { updateUserProfile } from "./service";
 
 /**
  * Remove subscription and freemium allocation for a user
@@ -48,4 +49,47 @@ const clearSubscriptionAndFreemium = defineFunction({
   },
 });
 
-module.exports.functions = [clearSubscriptionAndFreemium];
+/**
+ * Update user profile information
+ */
+const updateProfile = defineFunction({
+  name: "updateProfile",
+  permissionTypes: ["user_access"],
+  callback: async (params) => {
+    const { userId, name, gPicture } = params;
+
+    if (!userId) {
+      throw new Error("User ID is required");
+    }
+
+    if (!name || name.trim() === "") {
+      throw new Error("Name is required");
+    }
+
+    try {
+      // Update user profile using the service
+      await updateUserProfile(
+        {
+          refId: userId,
+          name: name.trim(),
+          ...(gPicture && { gPicture }),
+        },
+        true // rewrite = true to update existing profile
+      );
+
+      reply.create("s", {
+        message: "Profile updated successfully",
+        data: {
+          name: name.trim(),
+          ...(gPicture && { gPicture }),
+        },
+      });
+    } catch (error: any) {
+      reply.create("e", {
+        message: `Failed to update profile: ${error.message}`,
+      });
+    }
+  },
+});
+
+module.exports.functions = [clearSubscriptionAndFreemium, updateProfile];

From 53c14cfe21dc1c7df7e565a137de382b719e5479 Mon Sep 17 00:00:00 2001
From: SomiVista <somayerohani06@gmail.com>
Date: Mon, 14 Jul 2025 13:49:05 +0300
Subject: [PATCH 06/11] #86et9akm3 - Update profile functionality to support
 new data structure and improve user feedback. Refactor profile update logic
 to handle name, profile image, and preferences. Enhance profile settings page
 with improved file upload handling and localization updates for success/error
 messages.

---
 frontend/locales/en.json                |   4 +-
 frontend/pages/settings/profile.vue     | 127 +++++++++++-------------
 frontend/stores/profile.ts              |  95 ++++++++----------
 server/src/modules/profile/functions.ts |  46 +--------
 4 files changed, 104 insertions(+), 168 deletions(-)

diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 6a99962..039d8f5 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -180,7 +180,9 @@
         "email": "Email",
         "password": "Password",
         "reset-password": "Reset Password",
-        "uploading": "Uploading..."
+        "uploading": "Uploading...",
+        "profile-updated": "Profile updated successfully",
+        "profile-update-failed": "Failed to update profile"
     },
     "billing": {
         "billing": "Billing",
diff --git a/frontend/pages/settings/profile.vue b/frontend/pages/settings/profile.vue
index e94d042..6830b25 100644
--- a/frontend/pages/settings/profile.vue
+++ b/frontend/pages/settings/profile.vue
@@ -35,7 +35,7 @@
                                 type="file"
                                 accept="image/*"
                                 class="absolute inset-0 h-full w-full cursor-pointer opacity-0"
-                                @change="handleImageUpload"
+                                @change="handleFileUpload"
                                 :disabled="isUploading"
                             />
                         </div>
@@ -44,8 +44,15 @@
                         </div>
                     </div>
                     <div class="grid flex-1 grid-cols-1 gap-5 sm:grid-cols-2">
-                        <Input :label="t('profile.full-name')" v-model="name" type="text" :placeholder="t('Placeholder')" required :disabled="isSubmitting" />
-                        <Input :label="t('profile.email')" :model-value="email" type="email" :placeholder="t('Placeholder')" required disabled />
+                        <Input
+                            :label="t('profile.full-name')"
+                            v-model="name"
+                            type="text"
+                            :placeholder="t('profile.full-name')"
+                            required
+                            :disabled="isSubmitting"
+                        />
+                        <Input :label="t('profile.email')" :model-value="email" type="email" :placeholder="t('profile.email')" required disabled />
                         <!-- <Input
                             :label="t('profile.password')"
                             type="password"
@@ -94,93 +101,79 @@
         middleware: ['auth'],
     });
 
-    const name = ref('');
-    const email = computed(() => profileStore.email || '');
-    const profilePhotoPreview = computed(() => {
-        // Check if there are uploaded images first, then fallback to gPicture
-        if (profileStore.userDetail?.images && profileStore.userDetail.images.length > 0) {
-            // For now, use the first image. We'll need to check what property has the URL
-            const firstImage = profileStore.userDetail.images[0];
-            // Common properties that might contain the URL
-            return (
-                (firstImage as any)?.url ||
-                (firstImage as any)?.path ||
-                (firstImage as any)?.src ||
-                profileStore.userDetail.gPicture ||
-                '/assets/images/user.png'
-            );
-        }
-        return profileStore.userDetail?.gPicture || '/assets/images/user.png';
-    });
+    const name = ref(profileStore.userDetail?.name || '');
+    const email = ref(profileStore.email);
+    const profilePicture = ref(profileStore.profilePicture);
+    const selectedFile = ref<File | null>(null);
+    const filePreviewUrl = ref<string | null>(null);
     const options = [{ label: t('profile.receive-daily-practice-email-reminders'), value: 'dailyReminders' }];
-
     const selectedValues = ref<Record<string, boolean>>({});
     const isSubmitting = ref(false);
     const isUploading = ref(false);
     const fileInput = ref<HTMLInputElement>();
 
-    const handleSubmit = async () => {
-        if (isSubmitting.value) return;
+    const handleFileUpload = (event: Event) => {
+        const target = event.target as HTMLInputElement;
+        const file = target.files?.[0];
 
-        const trimmedName = name.value.trim();
-        if (!trimmedName) {
-            toastError('Please enter your full name', { position: 'top-end' });
-            return;
+        if (file) {
+            selectedFile.value = file;
+
+            // Create preview URL for immediate UI feedback
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                filePreviewUrl.value = e.target?.result as string;
+            };
+            reader.readAsDataURL(file);
         }
+    };
 
-        isSubmitting.value = true;
+    const profilePhotoPreview = computed(() => {
+        // Show local preview if available
+        if (filePreviewUrl.value) {
+            return filePreviewUrl.value;
+        }
+        return profilePicture.value;
+    });
 
+    const handleSubmit = async () => {
         try {
-            await profileStore.updateProfile({
-                name: trimmedName,
-            });
-            // The success message is handled by the store
-        } catch (error) {
-            // Error message is handled by the store
-            console.error('Profile update failed:', error);
-        } finally {
-            isSubmitting.value = false;
-        }
-    };
+            isSubmitting.value = true;
 
-    const handleImageUpload = async (event: Event) => {
-        const target = event.target as HTMLInputElement;
-        const file = target.files?.[0];
+            const profileData: {
+                name?: string;
+                profileImage?: File;
+                preferences?: Record<string, boolean>;
+            } = {};
 
-        if (!file) return;
+            // Include name if it has changed
+            if (name.value !== profileStore.userDetail?.name) {
+                profileData.name = name.value;
+            }
 
-        // Validate file type
-        if (!file.type.startsWith('image/')) {
-            toastError('Please select a valid image file', { position: 'top-end' });
-            return;
-        }
+            // Include profile image if a new one was selected
+            if (selectedFile.value) {
+                profileData.profileImage = selectedFile.value;
+            }
 
-        // Validate file size (e.g., 5MB limit)
-        const maxSize = 5 * 1024 * 1024; // 5MB in bytes
-        if (file.size > maxSize) {
-            toastError('Image file size should be less than 5MB', { position: 'top-end' });
-            return;
-        }
+            // Include preferences
+            profileData.preferences = { ...selectedValues.value };
 
-        isUploading.value = true;
+            // Call the store function
+            await profileStore.updateProfile(profileData);
 
-        try {
-            await profileStore.uploadProfileImage(file);
-            // The success message is handled by the store
+            console.log('Profile update completed successfully');
+            toastSuccess(t('profile.profile-updated'));
         } catch (error) {
-            // Error message is handled by the store
-            console.error('Image upload failed:', error);
+            console.error('Error updating profile:', error);
+            toastError(t('profile.profile-update-failed'));
         } finally {
-            isUploading.value = false;
-            // Reset the file input
-            if (fileInput.value) {
-                fileInput.value.value = '';
-            }
+            isSubmitting.value = false;
         }
     };
 
     onMounted(async () => {
+        //profile
         await profileStore.getProfileInfo();
-        name.value = profileStore.userDetail?.name || '';
     });
 </script>
diff --git a/frontend/stores/profile.ts b/frontend/stores/profile.ts
index 87e82d8..64a3ad8 100644
--- a/frontend/stores/profile.ts
+++ b/frontend/stores/profile.ts
@@ -1,5 +1,5 @@
 import { authentication, dataProvider, functionProvider } from '@modular-rest/client';
-import { toastError, toastSuccess } from '@codebridger/lib-vue-components/toast.ts';
+import { toastError } from '@codebridger/lib-vue-components/toast.ts';
 import { defineStore } from 'pinia';
 
 import { COLLECTIONS, DATABASE, type FreemiumAllocationType, type ProfileType, type SubscriptionType } from '~/types/database.type';
@@ -70,58 +70,6 @@ export const useProfileStore = defineStore('profile', () => {
             });
     }
 
-    function updateProfile(profileData: { name: string; gPicture?: string }) {
-        return functionProvider
-            .run({
-                name: 'updateProfile',
-                args: {
-                    userId: authUser.value?.id,
-                    name: profileData.name,
-                    ...(profileData.gPicture && { gPicture: profileData.gPicture }),
-                },
-            })
-            .then((response) => {
-                // Update the local userDetail with the new data
-                if (userDetail.value) {
-                    userDetail.value.name = profileData.name;
-                    if (profileData.gPicture) {
-                        userDetail.value.gPicture = profileData.gPicture;
-                    }
-                }
-                toastSuccess('Profile updated successfully', { position: 'top-end' });
-                return response;
-            })
-            .catch((error) => {
-                toastError(error.error || 'Unable to update profile', { position: 'top-end' });
-                throw error;
-            });
-    }
-
-    function uploadProfileImage(file: File) {
-        return dataProvider
-            .updateOne({
-                database: DATABASE.USER_CONTENT,
-                collection: COLLECTIONS.PROFILE,
-                query: {
-                    refId: authentication.user?.id,
-                },
-                update: {
-                    images: [file],
-                },
-            })
-            .then((response) => {
-                // Refresh profile info to get the updated image URL
-                return getProfileInfo();
-            })
-            .then(() => {
-                toastSuccess('Profile image updated successfully', { position: 'top-end' });
-            })
-            .catch((error) => {
-                toastError(error.error || 'Unable to upload profile image', { position: 'top-end' });
-                throw error;
-            });
-    }
-
     // bootstrap the profile store
     function bootstrap() {
         return Promise.all([
@@ -141,6 +89,44 @@ export const useProfileStore = defineStore('profile', () => {
             .catch((error) => null);
     }
 
+    function updateProfile(profileData: { name?: string; profileImage?: File; preferences?: Record<string, boolean> }) {
+        console.log('updateProfile called with:', profileData);
+
+        // For now, return a resolved promise with local state updates
+        // In the future, this would use dataProvider.updateOne() or functionProvider.run()
+        return Promise.resolve(profileData)
+            .then((data) => {
+                if (userDetail.value) {
+                    // Update name if provided
+                    if (data.name !== undefined) {
+                        console.log('Updating name from:', userDetail.value.name, 'to:', data.name);
+                        userDetail.value.name = data.name;
+                    }
+
+                    // Handle profile image update (placeholder for now)
+                    if (data.profileImage) {
+                        console.log('Profile image update requested:', data.profileImage.name);
+                        // TODO: In future, this would upload the image and update userDetail.value.images
+                    }
+
+                    // Handle preferences update
+                    if (data.preferences) {
+                        console.log('Preferences update:', data.preferences);
+                        // TODO: Add preferences to ProfileType schema if needed
+                    }
+
+                    console.log('Updated userDetail:', userDetail.value);
+                }
+
+                return userDetail.value;
+            })
+            .catch((error) => {
+                console.error('Error updating profile:', error);
+                toastError(error.error || 'Unable to update profile', { position: 'top-end' });
+                throw error;
+            });
+    }
+
     return {
         authUser,
         userDetail,
@@ -156,9 +142,8 @@ export const useProfileStore = defineStore('profile', () => {
 
         logout,
         getProfileInfo,
-        updateProfile,
-        uploadProfileImage,
         loginWithLastSession,
         bootstrap,
+        updateProfile,
     };
 });
diff --git a/server/src/modules/profile/functions.ts b/server/src/modules/profile/functions.ts
index 5c0bcec..0a8cd9d 100644
--- a/server/src/modules/profile/functions.ts
+++ b/server/src/modules/profile/functions.ts
@@ -4,7 +4,6 @@ import {
   clearUserFreemiumAllocations,
   clearUserUsageRecords,
 } from "../subscription/service";
-import { updateUserProfile } from "./service";
 
 /**
  * Remove subscription and freemium allocation for a user
@@ -49,47 +48,4 @@ const clearSubscriptionAndFreemium = defineFunction({
   },
 });
 
-/**
- * Update user profile information
- */
-const updateProfile = defineFunction({
-  name: "updateProfile",
-  permissionTypes: ["user_access"],
-  callback: async (params) => {
-    const { userId, name, gPicture } = params;
-
-    if (!userId) {
-      throw new Error("User ID is required");
-    }
-
-    if (!name || name.trim() === "") {
-      throw new Error("Name is required");
-    }
-
-    try {
-      // Update user profile using the service
-      await updateUserProfile(
-        {
-          refId: userId,
-          name: name.trim(),
-          ...(gPicture && { gPicture }),
-        },
-        true // rewrite = true to update existing profile
-      );
-
-      reply.create("s", {
-        message: "Profile updated successfully",
-        data: {
-          name: name.trim(),
-          ...(gPicture && { gPicture }),
-        },
-      });
-    } catch (error: any) {
-      reply.create("e", {
-        message: `Failed to update profile: ${error.message}`,
-      });
-    }
-  },
-});
-
-module.exports.functions = [clearSubscriptionAndFreemium, updateProfile];
+module.exports.functions = [clearSubscriptionAndFreemium];

From 88e8a1f36f944d1ce3a61773233c31391eddd2f8 Mon Sep 17 00:00:00 2001
From: SomiVista <somayerohani06@gmail.com>
Date: Wed, 16 Jul 2025 23:06:16 +0300
Subject: [PATCH 07/11] #86et9akm3 - Update user details section for better
 responsiveness and visual consistency. Enhance button styles for improved
 user interaction.

---
 frontend/pages/settings/profile.vue | 136 ++++++++++++++--------------
 frontend/pages/statistic.vue        |   2 +-
 2 files changed, 70 insertions(+), 68 deletions(-)

diff --git a/frontend/pages/settings/profile.vue b/frontend/pages/settings/profile.vue
index 6830b25..5abbdfe 100644
--- a/frontend/pages/settings/profile.vue
+++ b/frontend/pages/settings/profile.vue
@@ -1,59 +1,60 @@
 <template>
-    <div class="p-6">
+    <div class="p-4">
         <h1 class="mb-6 text-lg font-bold">{{ t('profile.profile') }}</h1>
-        <!-- User Details Section -->
-        <Card class="shadow-none">
-            <form @submit.prevent="handleSubmit">
-                <div class="flex flex-col sm:flex-row">
-                    <div class="mb-5 w-full items-center justify-center sm:w-2/12 ltr:sm:mr-4 rtl:sm:ml-4">
-                        <div class="group relative h-24 w-24">
-                            <img
-                                :src="profilePhotoPreview"
-                                alt="Profile Photo"
-                                class="h-24 w-24 cursor-pointer rounded-full border border-gray-200 object-cover transition-opacity group-hover:opacity-80"
-                            />
-                            <div
-                                class="absolute inset-0 flex items-center justify-center rounded-full bg-black bg-opacity-0 transition-all duration-200 group-hover:bg-opacity-30"
-                            >
-                                <svg
-                                    class="h-6 w-6 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
+        <section class="">
+            <!-- User Details Section -->
+            <Card class="shadow-none">
+                <form @submit.prevent="handleSubmit">
+                    <div class="my-5 flex flex-col sm:flex-row">
+                        <div class="mb-5 w-full sm:w-2/12 ltr:sm:mr-4 rtl:sm:ml-4">
+                            <div class="group relative mx-auto h-20 w-20 md:h-32 md:w-32">
+                                <img
+                                    :src="profilePhotoPreview"
+                                    alt="Profile Photo"
+                                    class="h-20 w-20 cursor-pointer rounded-full border border-gray-200 object-cover transition-opacity group-hover:opacity-80 md:h-32 md:w-32"
+                                />
+                                <div
+                                    class="absolute inset-0 flex items-center justify-center rounded-full bg-black bg-opacity-0 transition-all duration-200 group-hover:bg-opacity-30"
                                 >
-                                    <path
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                        stroke-width="2"
-                                        d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
-                                    ></path>
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
-                                </svg>
+                                    <svg
+                                        class="h-6 w-6 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        viewBox="0 0 24 24"
+                                    >
+                                        <path
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            stroke-width="2"
+                                            d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
+                                        ></path>
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                                    </svg>
+                                </div>
+                                <input
+                                    ref="fileInput"
+                                    type="file"
+                                    accept="image/*"
+                                    class="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+                                    @change="handleFileUpload"
+                                    :disabled="isUploading"
+                                />
+                            </div>
+                            <div v-if="isUploading" class="mt-2 text-center text-sm text-gray-500">
+                                {{ t('profile.uploading') }}
                             </div>
-                            <input
-                                ref="fileInput"
-                                type="file"
-                                accept="image/*"
-                                class="absolute inset-0 h-full w-full cursor-pointer opacity-0"
-                                @change="handleFileUpload"
-                                :disabled="isUploading"
-                            />
-                        </div>
-                        <div v-if="isUploading" class="mt-2 text-center text-sm text-gray-500">
-                            {{ t('profile.uploading') }}
                         </div>
-                    </div>
-                    <div class="grid flex-1 grid-cols-1 gap-5 sm:grid-cols-2">
-                        <Input
-                            :label="t('profile.full-name')"
-                            v-model="name"
-                            type="text"
-                            :placeholder="t('profile.full-name')"
-                            required
-                            :disabled="isSubmitting"
-                        />
-                        <Input :label="t('profile.email')" :model-value="email" type="email" :placeholder="t('profile.email')" required disabled />
-                        <!-- <Input
+                        <div class="grid flex-1 grid-cols-1 gap-5 sm:grid-cols-2">
+                            <Input
+                                :label="t('profile.full-name')"
+                                v-model="name"
+                                type="text"
+                                :placeholder="t('profile.full-name')"
+                                required
+                                :disabled="isSubmitting"
+                            />
+                            <Input :label="t('profile.email')" :model-value="email" type="email" :placeholder="t('profile.email')" required disabled />
+                            <!-- <Input
                             :label="t('profile.password')"
                             type="password"
                             placeholder="*************"
@@ -65,23 +66,24 @@
                         <Button class="items-end justify-start !border-none !text-primary">
                             {{ t('profile.reset-password') }}
                         </Button> -->
-                        <CheckboxInput
-                            v-for="option in options"
-                            :key="option.value"
-                            v-model="selectedValues[option.value]"
-                            :text="option.label"
-                            :value="option.value"
-                            :disabled="isSubmitting"
-                        />
-                        <div class="col-span-2 mt-3">
-                            <Button type="submit" color="primary" :loading="isSubmitting" :disabled="isSubmitting || isUploading">
-                                {{ t('save') }}
-                            </Button>
+                            <CheckboxInput
+                                v-for="option in options"
+                                :key="option.value"
+                                v-model="selectedValues[option.value]"
+                                :text="option.label"
+                                :value="option.value"
+                                :disabled="isSubmitting"
+                            />
+                            <div class="col-span-2 mt-3">
+                                <Button type="submit" size="lg" shadow color="primary" :loading="isSubmitting" :disabled="isSubmitting || isUploading">
+                                    {{ t('save') }}
+                                </Button>
+                            </div>
                         </div>
                     </div>
-                </div>
-            </form>
-        </Card>
+                </form>
+            </Card>
+        </section>
     </div>
 </template>
 
@@ -133,7 +135,7 @@
         if (filePreviewUrl.value) {
             return filePreviewUrl.value;
         }
-        return profilePicture.value;
+        return profilePicture.value || '/assets/images/user.png';
     });
 
     const handleSubmit = async () => {
diff --git a/frontend/pages/statistic.vue b/frontend/pages/statistic.vue
index f1e138e..b0f5d2e 100644
--- a/frontend/pages/statistic.vue
+++ b/frontend/pages/statistic.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="p-6">
+    <div class="p-4">
         <h1 class="mb-6 text-lg font-bold">{{ t('statistic.your-statistic') }}</h1>
         <section class="mb-6 grid grid-cols-1 gap-6 lg:grid-cols-4">
             <Card class="col-span-1 rounded-md shadow-none lg:col-span-3">

From f3a875b6135c0f1de89b8782f869a3cd70fa5a50 Mon Sep 17 00:00:00 2001
From: SomiVista <somayerohani06@gmail.com>
Date: Wed, 16 Jul 2025 23:27:56 +0300
Subject: [PATCH 08/11] #86et9akm3 - Enhance profile settings page layout and
 responsiveness. Add 'Save Changes' localization string and improve user
 interface elements for better usability.

---
 frontend/locales/en.json            |   3 +-
 frontend/pages/settings/profile.vue | 122 +++++++++++++++-------------
 2 files changed, 69 insertions(+), 56 deletions(-)

diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 039d8f5..6d42a01 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -217,5 +217,6 @@
     "logout": "Log out",
     "sign-out": "Sign Out",
     "confirm-sign-out": "Confirm Sign Out",
-    "confirm-sign-out-message": "Are you sure you want to sign out of your account?"
+    "confirm-sign-out-message": "Are you sure you want to sign out of your account?",
+    "save-changes": "Save Changes"
 }
diff --git a/frontend/pages/settings/profile.vue b/frontend/pages/settings/profile.vue
index 5abbdfe..4478f6e 100644
--- a/frontend/pages/settings/profile.vue
+++ b/frontend/pages/settings/profile.vue
@@ -1,50 +1,63 @@
 <template>
     <div class="p-4">
         <h1 class="mb-6 text-lg font-bold">{{ t('profile.profile') }}</h1>
-        <section class="">
+        <section class="mx-auto max-w-3xl space-y-4 p-4">
             <!-- User Details Section -->
             <Card class="shadow-none">
-                <form @submit.prevent="handleSubmit">
-                    <div class="my-5 flex flex-col sm:flex-row">
-                        <div class="mb-5 w-full sm:w-2/12 ltr:sm:mr-4 rtl:sm:ml-4">
-                            <div class="group relative mx-auto h-20 w-20 md:h-32 md:w-32">
-                                <img
-                                    :src="profilePhotoPreview"
-                                    alt="Profile Photo"
-                                    class="h-20 w-20 cursor-pointer rounded-full border border-gray-200 object-cover transition-opacity group-hover:opacity-80 md:h-32 md:w-32"
-                                />
-                                <div
-                                    class="absolute inset-0 flex items-center justify-center rounded-full bg-black bg-opacity-0 transition-all duration-200 group-hover:bg-opacity-30"
+                <form @submit.prevent="handleSubmit" class="flex flex-col items-center p-4">
+                    <!-- Avatar Section -->
+                    <div class="mb-6">
+                        <div class="group relative mx-auto h-24 w-24 md:h-32 md:w-32">
+                            <img
+                                :src="profilePhotoPreview"
+                                alt="Profile Photo"
+                                class="h-24 w-24 cursor-pointer rounded-full border border-gray-200 object-cover transition-opacity group-hover:opacity-80 md:h-32 md:w-32"
+                            />
+                            <div
+                                class="absolute inset-0 flex items-center justify-center rounded-full bg-black bg-opacity-0 transition-all duration-200 group-hover:bg-opacity-30"
+                            >
+                                <svg
+                                    class="h-6 w-6 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
                                 >
-                                    <svg
-                                        class="h-6 w-6 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        viewBox="0 0 24 24"
-                                    >
-                                        <path
-                                            stroke-linecap="round"
-                                            stroke-linejoin="round"
-                                            stroke-width="2"
-                                            d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
-                                        ></path>
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
-                                    </svg>
-                                </div>
-                                <input
-                                    ref="fileInput"
-                                    type="file"
-                                    accept="image/*"
-                                    class="absolute inset-0 h-full w-full cursor-pointer opacity-0"
-                                    @change="handleFileUpload"
-                                    :disabled="isUploading"
-                                />
-                            </div>
-                            <div v-if="isUploading" class="mt-2 text-center text-sm text-gray-500">
-                                {{ t('profile.uploading') }}
+                                    <path
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
+                                    ></path>
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                                </svg>
                             </div>
+                            <input
+                                ref="fileInput"
+                                type="file"
+                                accept="image/*"
+                                class="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+                                @change="handleFileUpload"
+                                :disabled="isUploading"
+                            />
+                        </div>
+                        <div v-if="isUploading" class="mt-2 text-center text-sm text-gray-500">
+                            {{ t('profile.uploading') }}
                         </div>
-                        <div class="grid flex-1 grid-cols-1 gap-5 sm:grid-cols-2">
+                    </div>
+
+                    <!-- User Info Section -->
+                    <div class="mb-6 text-center">
+                        <h2 class="mb-1 text-xl font-bold text-gray-800">{{ name || t('profile.full-name') }}</h2>
+                    </div>
+
+                    <!-- Personal Information Section -->
+                    <div class="w-full">
+                        <div class="mb-4 border-t border-gray-200"></div>
+                        <h3 class="mb-4 text-lg font-bold text-gray-800">Personal Information</h3>
+
+                        <!-- Form Fields Section -->
+
+                        <div class="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2">
                             <Input
                                 :label="t('profile.full-name')"
                                 v-model="name"
@@ -54,18 +67,8 @@
                                 :disabled="isSubmitting"
                             />
                             <Input :label="t('profile.email')" :model-value="email" type="email" :placeholder="t('profile.email')" required disabled />
-                            <!-- <Input
-                            :label="t('profile.password')"
-                            type="password"
-                            placeholder="*************"
-                            iconName="IconEyeOff"
-                            iconOppositePosition
-                            required
-                            disabled
-                        />
-                        <Button class="items-end justify-start !border-none !text-primary">
-                            {{ t('profile.reset-password') }}
-                        </Button> -->
+                        </div>
+                        <div class="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2">
                             <CheckboxInput
                                 v-for="option in options"
                                 :key="option.value"
@@ -74,10 +77,19 @@
                                 :value="option.value"
                                 :disabled="isSubmitting"
                             />
-                            <div class="col-span-2 mt-3">
-                                <Button type="submit" size="lg" shadow color="primary" :loading="isSubmitting" :disabled="isSubmitting || isUploading">
-                                    {{ t('save') }}
-                                </Button>
+                        </div>
+
+                        <div class="border-t border-gray-200 pt-4">
+                            <div class="flex justify-end">
+                                <Button
+                                    :label="t('save-changes')"
+                                    type="submit"
+                                    size="lg"
+                                    shadow
+                                    color="primary"
+                                    :loading="isSubmitting"
+                                    :disabled="isSubmitting || isUploading"
+                                />
                             </div>
                         </div>
                     </div>

From 9e527da87f8e0f1d57fe209d227c08a32e0692f9 Mon Sep 17 00:00:00 2001
From: SomiVista <somayerohani06@gmail.com>
Date: Thu, 17 Jul 2025 09:36:32 +0300
Subject: [PATCH 09/11] #86et9akm3 - Update profile settings page to include
 'Coming soon' label for checkbox options and implement change detection for
 user input. Enhance styles for disabled checkboxes to improve user
 experience.

---
 frontend/locales/en.json            |  3 +-
 frontend/pages/settings/profile.vue | 44 +++++++++++++++++++++++++----
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 6d42a01..9088304 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -218,5 +218,6 @@
     "sign-out": "Sign Out",
     "confirm-sign-out": "Confirm Sign Out",
     "confirm-sign-out-message": "Are you sure you want to sign out of your account?",
-    "save-changes": "Save Changes"
+    "save-changes": "Save Changes",
+    "coming-soon": "Coming soon"
 }
diff --git a/frontend/pages/settings/profile.vue b/frontend/pages/settings/profile.vue
index 4478f6e..c31dbc5 100644
--- a/frontend/pages/settings/profile.vue
+++ b/frontend/pages/settings/profile.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="p-4">
-        <h1 class="mb-6 text-lg font-bold">{{ t('profile.profile') }}</h1>
+        <!-- <h1 class="mb-6 text-lg font-bold">{{ t('profile.profile') }}</h1> -->
         <section class="mx-auto max-w-3xl space-y-4 p-4">
             <!-- User Details Section -->
             <Card class="shadow-none">
@@ -68,14 +68,14 @@
                             />
                             <Input :label="t('profile.email')" :model-value="email" type="email" :placeholder="t('profile.email')" required disabled />
                         </div>
-                        <div class="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2">
+                        <div class="pointer-events-none mb-6">
                             <CheckboxInput
                                 v-for="option in options"
                                 :key="option.value"
                                 v-model="selectedValues[option.value]"
-                                :text="option.label"
+                                :text="`${option.label} (${t('coming-soon')})`"
                                 :value="option.value"
-                                :disabled="isSubmitting"
+                                :disabled="true"
                             />
                         </div>
 
@@ -85,10 +85,10 @@
                                     :label="t('save-changes')"
                                     type="submit"
                                     size="lg"
-                                    shadow
+                                    :shadow="!(isSubmitting || isUploading || !hasChanges)"
                                     color="primary"
                                     :loading="isSubmitting"
-                                    :disabled="isSubmitting || isUploading"
+                                    :disabled="isSubmitting || isUploading || !hasChanges"
                                 />
                             </div>
                         </div>
@@ -126,6 +126,17 @@
     const isUploading = ref(false);
     const fileInput = ref<HTMLInputElement>();
 
+    // Track initial values for change detection
+    const initialName = ref('');
+    const initialSelectedValues = ref<Record<string, boolean>>({});
+    const hasChanges = computed(() => {
+        const nameChanged = name.value !== initialName.value;
+        const preferencesChanged = JSON.stringify(selectedValues.value) !== JSON.stringify(initialSelectedValues.value);
+        const fileChanged = selectedFile.value !== null;
+
+        return nameChanged || preferencesChanged || fileChanged;
+    });
+
     const handleFileUpload = (event: Event) => {
         const target = event.target as HTMLInputElement;
         const file = target.files?.[0];
@@ -189,5 +200,26 @@
     onMounted(async () => {
         //profile
         await profileStore.getProfileInfo();
+
+        // Initialize initial values for change detection
+        initialName.value = profileStore.userDetail?.name || '';
+        initialSelectedValues.value = { ...selectedValues.value };
     });
 </script>
+
+<style scoped>
+    /* Override hover styles for disabled checkboxes */
+    :deep(.checkbox-input:has(input:disabled)) {
+        cursor: not-allowed;
+    }
+
+    :deep(.checkbox-input:has(input:disabled) .checkbox-label) {
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+
+    :deep(.checkbox-input:has(input:disabled):hover .checkbox-label) {
+        color: inherit;
+        text-decoration: none;
+    }
+</style>

From 4ecf543d5e3673ffb69d2224762f271c976762c6 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Sat, 26 Jul 2025 14:20:33 +0300
Subject: [PATCH 10/11] #86et9akm3 - Update profile navigation and
 functionality: Change 'Membership' button to 'Profile Settings', update
 routing, and enhance profile update logic to handle name changes. Remove
 console logs and disable file upload during profile updates for improved user
 experience.

---
 frontend/components/partial/ProfileButton.vue | 10 ++--
 .../composables/useDashboardNavigatorItems.ts | 10 ++--
 frontend/pages/settings/profile.vue           |  3 +-
 frontend/stores/profile.ts                    | 48 +++++++------------
 frontend/yarn.lock                            |  8 ++--
 5 files changed, 31 insertions(+), 48 deletions(-)

diff --git a/frontend/components/partial/ProfileButton.vue b/frontend/components/partial/ProfileButton.vue
index d09715d..5cf644b 100644
--- a/frontend/components/partial/ProfileButton.vue
+++ b/frontend/components/partial/ProfileButton.vue
@@ -27,11 +27,11 @@
                         class="dark:hover:text-white"
                         @click="
                             close();
-                            goToMembership();
+                            goToProfileSettings();
                         "
                     >
-                        <Icon name="IconDollarSignCircle" class="h-4.5 w-4.5 shrink-0 ltr:mr-2 rtl:ml-2" />
-                        {{ t('subscription.title') }}
+                        <Icon name="IconUser" class="h-4.5 w-4.5 shrink-0 ltr:mr-2 rtl:ml-2" />
+                        {{ t('profile.profile') }}
                     </a>
                 </li>
                 <li class="cursor-pointer border-t border-white-light dark:border-white-light/10">
@@ -88,7 +88,7 @@
         logout();
     }
 
-    function goToMembership() {
-        router.push('/settings/subscription');
+    function goToProfileSettings() {
+        router.push('/settings/profile');
     }
 </script>
diff --git a/frontend/composables/useDashboardNavigatorItems.ts b/frontend/composables/useDashboardNavigatorItems.ts
index f0b8e67..e2fa22e 100644
--- a/frontend/composables/useDashboardNavigatorItems.ts
+++ b/frontend/composables/useDashboardNavigatorItems.ts
@@ -37,11 +37,11 @@ export const useDashboardNavigatorItems = (): Array<SidebarGroupType> => {
         {
             title: t('settings'),
             children: [
-                {
-                    title: t('profile.profile'),
-                    icon: 'IconUser',
-                    to: '/settings/profile',
-                },
+                // {
+                //     title: t('profile.profile'),
+                //     icon: 'IconUser',
+                //     to: '/settings/profile',
+                // },
                 {
                     title: t('subscription.title'),
                     icon: 'IconCreditCard',
diff --git a/frontend/pages/settings/profile.vue b/frontend/pages/settings/profile.vue
index c31dbc5..b45ba8f 100644
--- a/frontend/pages/settings/profile.vue
+++ b/frontend/pages/settings/profile.vue
@@ -37,7 +37,7 @@
                                 accept="image/*"
                                 class="absolute inset-0 h-full w-full cursor-pointer opacity-0"
                                 @change="handleFileUpload"
-                                :disabled="isUploading"
+                                :disabled="true"
                             />
                         </div>
                         <div v-if="isUploading" class="mt-2 text-center text-sm text-gray-500">
@@ -187,7 +187,6 @@
             // Call the store function
             await profileStore.updateProfile(profileData);
 
-            console.log('Profile update completed successfully');
             toastSuccess(t('profile.profile-updated'));
         } catch (error) {
             console.error('Error updating profile:', error);
diff --git a/frontend/stores/profile.ts b/frontend/stores/profile.ts
index 64a3ad8..7edd7ef 100644
--- a/frontend/stores/profile.ts
+++ b/frontend/stores/profile.ts
@@ -90,40 +90,24 @@ export const useProfileStore = defineStore('profile', () => {
     }
 
     function updateProfile(profileData: { name?: string; profileImage?: File; preferences?: Record<string, boolean> }) {
-        console.log('updateProfile called with:', profileData);
-
-        // For now, return a resolved promise with local state updates
-        // In the future, this would use dataProvider.updateOne() or functionProvider.run()
-        return Promise.resolve(profileData)
-            .then((data) => {
-                if (userDetail.value) {
-                    // Update name if provided
-                    if (data.name !== undefined) {
-                        console.log('Updating name from:', userDetail.value.name, 'to:', data.name);
-                        userDetail.value.name = data.name;
-                    }
-
-                    // Handle profile image update (placeholder for now)
-                    if (data.profileImage) {
-                        console.log('Profile image update requested:', data.profileImage.name);
-                        // TODO: In future, this would upload the image and update userDetail.value.images
-                    }
-
-                    // Handle preferences update
-                    if (data.preferences) {
-                        console.log('Preferences update:', data.preferences);
-                        // TODO: Add preferences to ProfileType schema if needed
-                    }
-
-                    console.log('Updated userDetail:', userDetail.value);
-                }
+        if (!profileData.name) {
+            return Promise.resolve(userDetail.value);
+        }
 
-                return userDetail.value;
+        return dataProvider
+            .updateOne({
+                database: DATABASE.USER_CONTENT,
+                collection: COLLECTIONS.PROFILE,
+                query: {
+                    refId: authentication.user?.id,
+                },
+                update: {
+                    name: profileData.name,
+                },
             })
-            .catch((error) => {
-                console.error('Error updating profile:', error);
-                toastError(error.error || 'Unable to update profile', { position: 'top-end' });
-                throw error;
+            .then((res) => {
+                userDetail.value!.name = profileData.name || '';
+                return res;
             });
     }
 
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index a55211c..21d3a1b 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -283,10 +283,10 @@
   dependencies:
     mime "^3.0.0"
 
-"@codebridger/lib-vue-components@^1.19.0":
-  version "1.19.0"
-  resolved "https://npm.pkg.github.com/download/@codebridger/lib-vue-components/1.19.0/29d9e6a35318149450b61ab9812e0c879a8c8eb1#29d9e6a35318149450b61ab9812e0c879a8c8eb1"
-  integrity sha512-zWUPUNpu/kb1iOVM0zF0Egj1sKZ2/Uy26cGFxznSjzM4eLqy0UeyWnxx7OGf3BHcWJWyDCS2X3ZtDuWJXnJVHQ==
+"@codebridger/lib-vue-components@^1.20.0":
+  version "1.20.0"
+  resolved "https://npm.pkg.github.com/download/@codebridger/lib-vue-components/1.20.0/bd7f4c0f755eb572b2345f5580b7f59b3f8c9935#bd7f4c0f755eb572b2345f5580b7f59b3f8c9935"
+  integrity sha512-u5cSYCagjpsbAdGQh/zDXV82nzdOpXoBOYmeGPlT36fy/D2RnQCGoy8diczXbmVOkaNX/0tF0+jzn8dcRdckbQ==
   dependencies:
     "@headlessui/vue" "^1.7.23"
     "@storybook/builder-vite" "^8.4.5"

From f29ff13aeb8609f81c5cd77de62d20d92964d0ec Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Sat, 26 Jul 2025 14:20:43 +0300
Subject: [PATCH 11/11] #86et9akm3 - Update @codebridger/lib-vue-components
 dependency to version 1.20.0 in package.json

---
 frontend/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 2a82a3f..01e5e40 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -30,7 +30,7 @@
         "vue-tsc": "^0.40.4"
     },
     "dependencies": {
-        "@codebridger/lib-vue-components": "^1.19.0",
+        "@codebridger/lib-vue-components": "^1.20.0",
         "@modular-rest/client": "^1.11.0",
         "@pinia/nuxt": "^0.4.6",
         "apexcharts": "^4.4.0",
@@ -45,4 +45,4 @@
         "vue3-popper": "^1.5.0",
         "yup": "^1.6.1"
     }
-}
+}
\ No newline at end of file