feat: support custom domain (#462)

* feat: add custom domain CRUD

* chore: fetch organization in layout in server before render

* debugging

* update log

apps/dashboard/src/lib/components/UploadImage/index.svelte

@@ -7,22 +7,33 @@
   export let widthHeight = '';
   export let shape = 'rounded-full';
   export let errorMessage: string | null = null;
+  export let isDisabled = false;
+  export let maxFileSizeInMb: number = 2; // Default max file size 2MB
+  export let flexDirection = 'flex-col';
 
   let fileinput: HTMLInputElement;
 
   const onFileSelected = (e: Event<HTMLInputElement>) => {
     const image = e.target.files[0];
+    const maxFileSize = maxFileSizeInMb * 1024 * 1024;
+    if (image.size > maxFileSize) {
+      errorMessage = `${$t('settings.profile.profile_picture.validation_error')} ${
+        maxFileSize / (1024 * 1024)
+      } MB`;
+      return;
+    }
     let reader = new FileReader();
     reader.readAsDataURL(image);
     reader.onload = (e) => {
       avatar = image;
       // @ts-ignore
       src = e.target?.result || undefined;
+      errorMessage = null; // Clear error message on successful load
     };
   };
 </script>
 
-<section class="width-fit p-3 flex flex-col items-center">
+<section class="width-fit p-3 flex {flexDirection} items-center justify-between gap-5">
   <div
     class="avatar-container {widthHeight ||
       'setwidthheight'} pointer border-2 border-gray-200 dark:border-neutral-600 relative {shape}"
@@ -40,18 +51,30 @@
     {/if}
   </div>
 
-  <button
-    class="width-fit text-primary-700 flex items-center cursor-pointer text-sm mt-3"
-    on:click={() => {
-      fileinput.click();
-    }}
-  >
-    <Camera size={20} />
-    <span class="ml-2">{$t('settings.profile.profile_picture.upload_image')}</span>
-  </button>
-  {#if errorMessage}
-    <p class="text-sm text-red-500">{errorMessage}</p>
-  {/if}
+  <div class="flex flex-col items-center">
+    <button
+      class="width-fit text-primary-700 flex flex-col items-center text-sm {isDisabled
+        ? 'opacity-50 cursor-not-allowed'
+        : 'cursor-pointer'}"
+      on:click={() => {
+        if (!isDisabled) {
+          fileinput.click();
+        }
+      }}
+      disabled={isDisabled}
+    >
+      <Camera size={20} />
+      <span class="ml-2">{$t('settings.profile.profile_picture.upload_image')}</span>
+    </button>
+    <p class="text-xs text-center text-gray-500">
+      {$t('settings.profile.profile_picture.file_size')}
+      {maxFileSizeInMb}MB<br />
+      {$t('settings.profile.profile_picture.accepted')}: jpeg, jpg, png, webp
+    </p>
+    {#if errorMessage}
+      <p class="text-sm text-red-500">{errorMessage}</p>
+    {/if}
+  </div>
 
   <input
     style="display:none"