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/api/src/middlewares/api-key.ts

@@ -0,0 +1,58 @@
+import { Context, Next } from 'hono';
+
+import { env } from '@api/config/env';
+
+/**
+ * Middleware to authenticate requests using API key
+ * Checks for Authorization: Bearer <api-key> header
+ * Used for server-to-server communication (webhooks, etc.)
+ */
+export const apiKeyMiddleware = async (c: Context, next: Next) => {
+  try {
+    const authHeader = c.req.header('Authorization');
+    if (!authHeader || !authHeader.startsWith('Bearer ')) {
+      return c.json(
+        {
+          success: false,
+          message: 'Unauthorized: Missing or invalid API key'
+        },
+        401
+      );
+    }
+
+    const apiKey = authHeader.replace('Bearer ', '').trim();
+    const expectedApiKey = env.SERVER_KEY;
+
+    if (!expectedApiKey) {
+      console.error('SERVER_KEY not configured in environment');
+      return c.json(
+        {
+          success: false,
+          message: 'Server configuration error'
+        },
+        500
+      );
+    }
+
+    if (apiKey !== expectedApiKey) {
+      return c.json(
+        {
+          success: false,
+          message: 'Unauthorized: Invalid API key'
+        },
+        401
+      );
+    }
+
+    // API key is valid, continue
+    await next();
+  } catch (error) {
+    return c.json(
+      {
+        success: false,
+        message: 'Unauthorized'
+      },
+      401
+    );
+  }
+};

apps/api/src/middlewares/auth-or-api-key.ts

@@ -0,0 +1,34 @@
+import { Context, Next } from 'hono';
+
+import { apiKeyMiddleware } from './api-key';
+import { authMiddleware } from './auth';
+
+/**
+ * Middleware that accepts either user authentication OR API key
+ * Used for endpoints that can be accessed by:
+ * 1. Authenticated users (via session cookies)
+ * 2. Server-to-server calls (via API key)
+ */
+export const authOrApiKeyMiddleware = async (c: Context, next: Next) => {
+  const user = c.get('user');
+  const session = c.get('session');
+
+  if (user && session) {
+    await next();
+    return;
+  }
+
+  const authHeader = c.req.header('Authorization');
+
+  if (authHeader && authHeader.startsWith('Bearer ')) {
+    return apiKeyMiddleware(c, next);
+  }
+
+  return c.json(
+    {
+      success: false,
+      message: 'Unauthorized: Authentication required (session or API key)'
+    },
+    401
+  );
+};

apps/api/src/middlewares/org-admin.ts

@@ -0,0 +1,62 @@
+import { Context, Next } from 'hono';
+
+import { ErrorCodes } from '@api/utils/errors';
+import { isUserOrgAdmin } from '@cio/db/queries/organization';
+
+/**
+ * Middleware to check if the authenticated user is an admin of the organization
+ * Requires authMiddleware to be applied first
+ * Expects orgId in the 'cio-org-id' header
+ */
+export const orgAdminMiddleware = async (c: Context, next: Next) => {
+  try {
+    const user = c.get('user');
+    if (!user) {
+      return c.json(
+        {
+          success: false,
+          error: 'Unauthorized',
+          code: 'UNAUTHORIZED'
+        },
+        401
+      );
+    }
+
+    const orgId = c.req.header('cio-org-id');
+
+    if (!orgId) {
+      return c.json(
+        {
+          success: false,
+          error: 'Organization ID is required',
+          code: 'ORG_ID_REQUIRED'
+        },
+        400
+      );
+    }
+
+    const isAdmin = await isUserOrgAdmin(orgId, user.id);
+    if (!isAdmin) {
+      return c.json(
+        {
+          success: false,
+          error: 'Only organization admins can perform this action',
+          code: ErrorCodes.ORG_TEAM_NOT_AUTHORIZED
+        },
+        403
+      );
+    }
+
+    await next();
+  } catch (error) {
+    console.error('Error in orgAdminMiddleware:', error);
+    return c.json(
+      {
+        success: false,
+        error: 'Failed to verify organization admin status',
+        code: 'ORG_ADMIN_CHECK_FAILED'
+      },
+      500
+    );
+  }
+};