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/courses/[id]/+page.svelte

@@ -10,7 +10,7 @@
   import { CourseContainer } from '$lib/components/CourseContainer';
   import { PageBody, PageNav } from '$lib/components/Page';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
+  import { RoleBasedSecurity } from '$lib/features/ui';
   import { snackbar } from '$lib/components/Snackbar/store';
   import { supabase } from '$lib/utils/functions/supabase';
   import { t } from '$lib/utils/functions/translations';
@@ -27,9 +27,9 @@
   import { currentOrg } from '$lib/utils/store/org';
   import { profile } from '$lib/utils/store/user';
   import type { Feed } from '$lib/utils/types/feed';
-  import type { CurrentOrg } from '$lib/utils/types/org';
   import PinIcon from '@lucide/svelte/icons/pin';
   import { onMount } from 'svelte';
+  import type { AccountOrg } from '$lib/features/app/types';
 
   let { data = $bindable() } = $props();
 
@@ -214,7 +214,7 @@
     }
   };
 
-  function getPageRoles(org: CurrentOrg) {
+  function getPageRoles(org: AccountOrg) {
     const roles: number[] = [1, 2];
 
     if (org.customization.course.newsfeed) {

apps/dashboard/src/routes/courses/[id]/certificates/+page.svelte

@@ -2,7 +2,7 @@
   import IssueCertificateModal from '$lib/components/Course/components/Ceritficate/IssueCertificateModal.svelte';
   import { CourseContainer } from '$lib/components/CourseContainer';
   import { PageBody, PageNav } from '$lib/components/Page';
-  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
+  import { RoleBasedSecurity } from '$lib/features/ui';
   // import DeleteConfirmation from '$lib/components/Course/components/People/DeleteConfirmation.svelte';
   import Design from '$lib/components/Course/components/Ceritficate/Design.svelte';
   // import Reports from '$lib/components/Course/components/Ceritficate/Reports.svelte';

apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte

@@ -14,7 +14,7 @@
   import { PageBody, PageNav } from '$lib/components/Page';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
+  import { RoleBasedSecurity } from '$lib/features/ui';
   import { t } from '$lib/utils/functions/translations';
   import { profile } from '$lib/utils/store/user';
   import type { Lesson } from '$lib/utils/types';

apps/dashboard/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte

@@ -29,7 +29,7 @@
   import { IconButton } from '$lib/components/IconButton';
   import { PageBody, PageNav } from '$lib/components/Page';
   import { CourseContainer } from '$lib/components/CourseContainer';
-  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
+  import { RoleBasedSecurity } from '$lib/features/ui';
   import Exercises from '$lib/components/Course/components/Lesson/Exercises/index.svelte';
   import Materials from '$lib/components/Course/components/Lesson/Materials/index.svelte';
 

apps/dashboard/src/routes/courses/[id]/marks/+page.svelte

@@ -13,7 +13,7 @@
   import type { GroupPerson } from '$lib/utils/types';
   import { t } from '$lib/utils/functions/translations';
   import { fetchMarks } from '$lib/utils/services/marks';
-  import type { CurrentOrg } from '$lib/utils/types/org';
+  import type { AccountOrg } from '$lib/features/app/types';
   import { snackbar } from '$lib/components/Snackbar/store';
   import { getLectureNo } from '$lib/components/Course/function.js';
   import { fetchExercisesByMarks } from '$lib/utils/services/courses';
@@ -22,7 +22,7 @@
   import { course } from '$lib/components/Course/store';
   import { PageBody, PageNav } from '$lib/components/Page';
   import { CourseContainer } from '$lib/components/CourseContainer';
-  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
+  import { RoleBasedSecurity } from '$lib/features/ui';
   import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
 
   let { data } = $props();
@@ -90,10 +90,10 @@
   }
   // TODO WRITE A REDIRECT FUNCTION FOR THIS THIS PAGE
 
-  function getPageRoles(org: CurrentOrg) {
+  function getPageRoles(org: AccountOrg) {
     const roles = [1, 2];
 
-    if (org.customization.course.grading) {
+    if (org.customization?.course?.grading) {
       roles.push(3);
     }
 

apps/dashboard/src/routes/courses/[id]/people/+layout.svelte

@@ -4,7 +4,7 @@
   import { IconButton } from '$lib/components/IconButton';
   import { PageBody, PageNav } from '$lib/components/Page';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
+  import { RoleBasedSecurity } from '$lib/features/ui';
   import { t } from '$lib/utils/functions/translations';
   import ArrowLeftIcon from '@lucide/svelte/icons/arrow-left';
   import { CourseContainer } from '$lib/components/CourseContainer';

apps/dashboard/src/routes/courses/[id]/people/+page.svelte

@@ -13,7 +13,7 @@
   import Avatar from '$lib/components/Avatar/index.svelte';
   import { ComingSoon } from '$lib/features/ui';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
+  import { RoleBasedSecurity } from '$lib/features/ui';
   import InvitationModal from '$lib/components/Course/components/People/InvitationModal.svelte';
   import DeleteConfirmation from '$lib/components/Course/components/People/DeleteConfirmation.svelte';
 

apps/dashboard/src/routes/courses/[id]/submissions/+page.svelte

@@ -24,7 +24,7 @@
   import Chip from '$lib/components/Chip/index.svelte';
   import { PageBody, PageNav } from '$lib/components/Page';
   import { CourseContainer } from '$lib/components/CourseContainer';
-  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
+  import { RoleBasedSecurity } from '$lib/features/ui';
   import MarkExerciseModal from '$lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte';
 
   let { data = $bindable() } = $props();