feat: redo settings and all org pages. (#601)

* feat: new components, deploy storybook

* refactor: simplify component field definitions and enhance button loading state

- Removed unnecessary type imports and simplified the FIELDS array definitions across multiple components in Storybook.
- Updated button component to use a loading state instead of isLoading, improving clarity and consistency in props.
- Adjusted button stories to reflect the new loading prop and enhanced the button's loading visual feedback.
- Minor CSS adjustments for better layout and styling consistency.

* chore: add field, card, password components

* feat: improve page component & update AuthUI path

* chore: update bits-ui to version 2.14.4 and all org related UI's

- Updated bits-ui dependency in pnpm-lock.yaml and package.json to version 2.14.4.
- Refactored imports for RoleBasedSecurity and UpgradeBanner components to use the new ui feature directory.
- Removed unused Course components and related files to clean up the codebase.
- Enhanced various components to improve consistency and maintainability.

* chore: move all setting buttons to the top and update auth ui styles

* chore: remove svelte-loading-spinners and replace with @cio/ui/base/spinner

- Removed all instances of svelte-loading-spinners from the project.
- Updated components to use the new Spinner from @cio/ui/base/spinner.
- Cleaned up pnpm-lock.yaml and package.json to reflect the removal of svelte-loading-spinners.
- Added new CSS animations for rocket launch effects in app.css.
- Enhanced email change flow with updated verification messages in translations.

* chore: remove supabase file upload from dashboard and move to r2

* chore: update organization API and UI components

- Added new API methods for organization plan operations and team management.
- Introduced middleware for API key authentication and organization admin checks.
- Refactored organization-related components to utilize the new API structure.
- Updated various UI components to improve consistency and maintainability.
- Enhanced error handling and validation for organization-related actions.
- Removed deprecated services and streamlined the codebase.

apps/dashboard/src/routes/invite/s/[hash]/+layout.server.ts

@@ -1,10 +1,5 @@
+import { OrgApiServer } from '$lib/features/org/api/org.server';
 import { redirect } from '@sveltejs/kit';
-import { getSupabase, supabase } from '$lib/utils/functions/supabase';
-import { getCurrentOrg } from '$lib/utils/services/org';
-
-if (!supabase) {
-  getSupabase();
-}
 
 export const load = async ({ params = { hash: '' } }) => {
   try {
@@ -16,7 +11,8 @@ export const load = async ({ params = { hash: '' } }) => {
     if (!id || !name || !description || !orgSiteName) {
       throw 'Validation failed';
     }
-    const currentOrg = await getCurrentOrg(orgSiteName, true);
+
+    const currentOrg = await OrgApiServer.getOrgBySiteName(orgSiteName);
 
     return {
       id,

apps/dashboard/src/routes/invite/s/[hash]/+page.svelte

@@ -3,11 +3,10 @@
   import { onMount } from 'svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { getSupabase } from '$lib/utils/functions/supabase';
-  import AuthUI from '$lib/components/AuthUI/index.svelte';
+  import { AuthUI } from '$lib/features/ui';
   import { currentOrg } from '$lib/utils/store/org';
   import { setTheme } from '$lib/utils/functions/theme';
   import { addGroupMember } from '$lib/utils/services/courses';
-  import type { CurrentOrg } from '$lib/utils/types/org.js';
   import { ROLE } from '@cio/utils/constants';
   import { profile } from '$lib/utils/store/user';
   import { triggerSendEmail, NOTIFICATION_NAME } from '$lib/utils/services/notification/notification';
@@ -21,7 +20,6 @@
   let loading = $state(false);
 
   let disableSubmit = false;
-  let formRef: HTMLFormElement | undefined = $state();
 
   async function handleSubmit() {
     loading = true;
@@ -104,11 +102,6 @@
     });
   }
 
-  function setCurOrg(cOrg: CurrentOrg) {
-    if (!cOrg) return;
-    currentOrg.set(cOrg);
-  }
-
   onMount(async () => {
     // check if user has session, if not redirect to sign up with redirect back to this page
     const {
@@ -118,8 +111,11 @@
       return goto(`/login?redirect=${page.url?.pathname || ''}`);
     }
 
+    if (!data.currentOrg) return;
+
     setTheme(data.currentOrg?.theme || '');
-    setCurOrg(data.currentOrg as CurrentOrg);
+
+    currentOrg.set(data.currentOrg);
   });
 </script>
 
@@ -127,15 +123,7 @@
   <title>Join {data.name} on ClassroomIO</title>
 </svelte:head>
 
-<AuthUI
-  {supabase}
-  isLogin={false}
-  {handleSubmit}
-  isLoading={loading || !$profile.id}
-  showOnlyContent={true}
-  showLogo={true}
-  bind:formRef
->
+<AuthUI isLogin={false} {handleSubmit} isLoading={loading || !$profile.id} showOnlyContent={true} showLogo={true}>
   <div class="mt-0 w-full">
     <h3 class="mb-4 mt-0 text-center text-lg font-medium dark:text-white">{data.name}</h3>
     <p class="text-center text-sm font-light dark:text-white">{data.description}</p>

apps/dashboard/src/routes/invite/t/[hash]/+layout.server.ts

@@ -1,11 +1,6 @@
-import { redirect } from '@sveltejs/kit';
-import { getCurrentOrg } from '$lib/utils/services/org';
-import { getSupabase, supabase } from '$lib/utils/functions/supabase';
+import { OrgApiServer } from '$lib/features/org/api/org.server';
 import { getProfile } from '$lib/utils/functions/user';
-
-if (!supabase) {
-  getSupabase();
-}
+import { redirect } from '@sveltejs/kit';
 
 // we need to know if the email exists or not.
 // with this we can only ask the user to accept
@@ -16,7 +11,7 @@ export const load = async ({ params = { hash: '' } }) => {
 
     const { orgId, email, orgSiteName } = JSON.parse(hashData);
 
-    const currentOrg = await getCurrentOrg(orgSiteName, true);
+    const currentOrg = await OrgApiServer.getOrgBySiteName(orgSiteName);
 
     const profile = await getProfile(email);
     console.log('profile data', profile);

apps/dashboard/src/routes/invite/t/[hash]/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { page } from '$app/state';
-  import AuthUI from '$lib/components/AuthUI/index.svelte';
+  import { AuthUI } from '$lib/features/ui';
   import type { Profile } from '$lib/components/Course/components/People/types';
   import TextField from '$lib/components/Form/TextField.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
@@ -13,7 +13,6 @@
   import { profile, user } from '$lib/utils/store/user';
   import { authValidation, getConfirmPasswordError, getDisableSubmit } from '$lib/utils/functions/validator';
   import { currentOrg, currentOrgPath } from '$lib/utils/store/org';
-  import type { CurrentOrg } from '$lib/utils/types/org';
   import { onMount, untrack } from 'svelte';
   import { snackbar } from '$lib/components/Snackbar/store.js';
 
@@ -32,12 +31,11 @@
   } = $state({});
 
   let submitError: string = $state('');
-  let formRef: HTMLFormElement | undefined = $state();
 
   const confirmPasswordError = $derived(getConfirmPasswordError(fields));
   const disableSubmit = $derived(getDisableSubmit(fields));
 
-  async function joinOrg(profileId: string, email: string) {
+  async function joinOrg(profileId: string, email: string | null) {
     if (!profileId || !email || !data.invite.currentOrg?.id) return;
 
     // Update member response
@@ -51,8 +49,6 @@
 
     console.log('Update member response', updateMemberRes);
 
-    formRef?.reset();
-
     window.location.href = $currentOrgPath;
   }
 
@@ -146,17 +142,12 @@
     }
   }
 
-  function setCurOrg(cOrg: CurrentOrg) {
-    if (!cOrg) return;
-
-    console.log(cOrg);
-    currentOrg.set(cOrg);
-  }
-
   onMount(async () => {
+    if (!data.invite.currentOrg) return;
+
     setTheme(data.invite.currentOrg?.theme || '');
 
-    setCurOrg(data.invite.currentOrg as CurrentOrg);
+    currentOrg.set(data.invite.currentOrg);
   });
 
   const isLoading = $derived(loading || $user.fetchingUser);
@@ -179,15 +170,7 @@
   <title>Join ClassroomIO</title>
 </svelte:head>
 
-<AuthUI
-  {supabase}
-  redirectPathname={page.url.pathname}
-  isLogin={false}
-  {handleSubmit}
-  {isLoading}
-  showLogo={true}
-  bind:formRef
->
+<AuthUI redirectPathname={page.url.pathname} isLogin={false} {handleSubmit} {isLoading} showLogo={true}>
   <div class="mt-4 w-full {shouldLogout ? 'hidden' : ''}">
     <p class="mb-6 text-lg font-semibold dark:text-white">
       {#if data.invite.profile}