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/features/ui/navigation/org-navigation.ts

@@ -31,6 +31,7 @@ export interface NavItemConfig {
   useHashUrl?: boolean; // Use '#' as URL (for collapsible items like settings)
   nestedRoutes?: NestedRouteConfig[]; // Static nested routes
   supportsDynamicSegment?: boolean; // Supports dynamic segments (like [slug])
+  matchPattern?: string | ((orgSlug: string) => string); // Regex pattern for route matching
 }
 
 export interface NestedRouteConfig {
@@ -43,18 +44,21 @@ const baseNavConfig: NavItemConfig[] = [
   {
     titleKey: 'org_navigation.dashboard',
     path: '',
-    icon: LayoutDashboardIcon
+    icon: LayoutDashboardIcon,
+    matchPattern: '^/org/[^/]+/?$' // Exact match only
   },
   {
     titleKey: 'org_navigation.courses',
     path: '/courses',
-    icon: LibraryBigIcon
+    icon: LibraryBigIcon,
+    matchPattern: '^/org/[^/]+/courses(/.*)?$' // Matches nested routes
   },
   {
     titleKey: 'org_navigation.community',
     path: '/community',
     icon: MessageSquareMoreIcon,
     supportsDynamicSegment: true, // Supports /community/[slug]
+    matchPattern: '^/org/[^/]+/community(/.*)?$', // Matches nested routes
     nestedRoutes: [
       {
         path: 'ask',
@@ -65,19 +69,22 @@ const baseNavConfig: NavItemConfig[] = [
   {
     titleKey: 'org_navigation.audience',
     path: '/audience',
-    icon: UsersIcon
+    icon: UsersIcon,
+    matchPattern: '^/org/[^/]+/audience(/.*)?$' // Matches nested routes
   },
   {
     titleKey: 'org_navigation.setup',
     path: '/setup',
     icon: Settings2Icon,
-    requiresAdmin: true
+    requiresAdmin: true,
+    matchPattern: '^/org/[^/]+/setup(/.*)?$' // Matches nested routes
   },
   {
     titleKey: 'org_navigation.settings',
     path: '/settings',
     icon: CogIcon,
     useHashUrl: true, // Use '#' for collapsible parent
+    matchPattern: '^/org/[^/]+/settings(/.*)?$', // Matches nested routes
     items: [
       {
         titleKey: 'Profile',
@@ -85,16 +92,20 @@ const baseNavConfig: NavItemConfig[] = [
       },
       {
         titleKey: 'Organization',
-        path: '/settings?tab=org'
+        path: '/settings/org'
       },
       {
         titleKey: 'Landing Page',
-        path: '/settings?tab=landingpage'
+        path: '/settings/landingpage'
       },
       {
         titleKey: 'Billing',
-        path: '/settings?tab=billing'
+        path: '/settings/billing'
       }
+      // {
+      //   titleKey: 'Integrations',
+      //   path: '/settings/integrations'
+      // }
     ],
     nestedRoutes: [
       {
@@ -134,13 +145,17 @@ export function getOrgNavigationItems(
     const url = config.path === '' ? currentOrgPath : `${currentOrgPath}${config.path}`;
     const fullPath = config.path === '' ? `/org/${currentOrg.siteName}` : `/org/${currentOrg.siteName}${config.path}`;
 
+    // Extract match pattern (handle function case)
+    const matchPattern =
+      typeof config.matchPattern === 'function' ? config.matchPattern(currentOrg.siteName) : config.matchPattern;
+
     const item: NavItem = {
       title: t(config.titleKey),
       url: config.useHashUrl ? '#' : url,
       path: config.path, // Store actual path for breadcrumb generation
       icon: config.icon,
-      isActive: isActive(pagePathname, fullPath),
-      isExpanded: config.items ? isActive(pagePathname, fullPath) : undefined,
+      isActive: isActive(pagePathname, fullPath, matchPattern),
+      isExpanded: config.items ? isActive(pagePathname, fullPath, matchPattern) : undefined,
       useHashUrl: config.useHashUrl,
       nestedRoutes: config.nestedRoutes,
       supportsDynamicSegment: config.supportsDynamicSegment