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/lib/utils/services/api/index.ts

@@ -4,6 +4,8 @@ import { DEFAULT_CONFIG } from './constants';
 import { delay } from './utils';
 import { env } from '$env/dynamic/public';
 import { hcWithType } from '@cio/api/rpc-types';
+import { get } from 'svelte/store';
+import { currentOrg } from '$lib/utils/store/org';
 
 class ApiClient {
   private config: Required<ApiClientConfig>;
@@ -26,9 +28,17 @@ class ApiClient {
       headers.set('Accept', 'application/json');
     }
 
+    // Add organization ID header if available
+    const org = get(currentOrg);
+    if (org?.id) {
+      headers.set('cio-org-id', org.id);
+    }
+
     // Handle body serialization and content-type
     let requestBody = fetchConfig.body;
-    if (fetchConfig.body && typeof fetchConfig.body === 'object' && !(fetchConfig.body instanceof FormData)) {
+    const isFormData = fetchConfig.body instanceof FormData;
+
+    if (fetchConfig.body && typeof fetchConfig.body === 'object' && !isFormData) {
       // Auto-stringify objects (except FormData)
       requestBody = JSON.stringify(fetchConfig.body);
       if (!headers.has('Content-Type')) {
@@ -47,7 +57,7 @@ class ApiClient {
 
     const requestInit: RequestInit = {
       ...fetchConfig,
-      headers,
+      headers: isFormData ? undefined : headers,
       body: requestBody,
       signal: controller.signal
     };

apps/dashboard/src/lib/utils/services/api/server.ts

@@ -0,0 +1,28 @@
+import { env } from '$env/dynamic/private';
+
+/**
+ * Server-side helper to get API key headers for RPC client calls
+ * Use this in server-side files (+layout.server.ts, +page.server.ts, +server.ts)
+ * when making API calls that don't have user session cookies
+ *
+ * @returns Headers object with Authorization Bearer token
+ *
+ * @example
+ * ```typescript
+ * const response = await classroomio.organization.$get(
+ *   { query: { siteName } },
+ *   getApiKeyHeaders()
+ * );
+ * ```
+ */
+export function getApiKeyHeaders(): { headers: { Authorization: string } } {
+  if (!env.PRIVATE_SERVER_KEY) {
+    throw new Error('PRIVATE_SERVER_KEY is not configured in environment variables');
+  }
+
+  return {
+    headers: {
+      Authorization: `Bearer ${env.PRIVATE_SERVER_KEY}`
+    }
+  };
+}