feat: implement automation feature

apps/dashboard/src/lib/features/ui/analytics/activity-card.svelte

@@ -14,15 +14,23 @@
   interface Props {
     activity: Activity;
     className?: string;
+    classes?: {
+      container?: string;
+      icon?: string;
+      title?: string;
+      percentage?: string;
+      description?: string;
+    };
   }
 
-  let { activity, className = '' }: Props = $props();
+  let { activity, className = '', classes = {} }: Props = $props();
 </script>
 
 <div
   class={cn(
-    'flex w-full flex-col items-center justify-evenly gap-2 rounded-xl border p-3 md:flex-row md:p-5',
-    className
+    'flex w-full flex-col items-center justify-evenly gap-2 rounded-xl border p-3 md:flex-row md:px-5 md:py-3',
+    className,
+    classes.container
   )}
 >
   <div class="bg-primary-200 w-fit rounded-full p-4 text-black">
@@ -30,17 +38,19 @@
   </div>
 
   <div>
-    <p class="text-center text-sm font-medium text-gray-600 md:text-left dark:text-gray-200">
+    <p class={cn('text-center text-sm font-medium text-gray-600 md:text-left dark:text-gray-200', classes.title)}>
       {activity.title}
     </p>
-    <p class="text-center text-2xl md:text-left">
+    <p class={cn('text-center text-2xl md:text-left', classes.percentage)}>
       {activity.percentage}
       {#if !activity.hidePercentage}
         %
       {/if}
     </p>
     {#if activity.description}
-      <p class="text-center text-xs text-gray-500 md:text-left md:text-sm dark:text-gray-300">
+      <p
+        class={cn('text-center text-xs text-gray-500 md:text-left md:text-sm dark:text-gray-300', classes.description)}
+      >
         {activity.description}
       </p>
     {/if}

apps/dashboard/src/lib/features/ui/auth-ui.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import { page } from '$app/state';
   import * as Avatar from '@cio/ui/base/avatar';
   import { t } from '$lib/utils/functions/translations';
@@ -19,7 +20,8 @@
     hideGoogleAuth?: boolean;
     redirectPathname?: string;
     handleSubmit?: () => void;
-    children?: import('svelte').Snippet;
+    children?: Snippet;
+    getPasswordAuthAlternative?: Snippet;
   }
 
   let {
@@ -30,7 +32,8 @@
     hideGoogleAuth = false,
     redirectPathname = '',
     handleSubmit = () => {},
-    children
+    children,
+    getPasswordAuthAlternative
   }: Props = $props();
 
   async function signInWithGoogle() {
@@ -100,12 +103,17 @@
             <Separator />
             <span class="ui:bg-card ui:text-muted-foreground absolute px-2 text-sm"> Or continue With </span>
           </div>
-          <Button variant="outline" onclick={signInWithGoogle} disabled={isLoading} class="w-full">
-            <GoogleIconColored />
-            <span>
-              {isLogin ? $t('login.login_with_google') : $t('login.signup_with_google')}
-            </span>
-          </Button>
+
+          {#if getPasswordAuthAlternative}
+            {@render getPasswordAuthAlternative()}
+          {:else}
+            <Button variant="outline" onclick={signInWithGoogle} disabled={isLoading} class="w-full">
+              <GoogleIconColored />
+              <span>
+                {isLogin ? $t('login.login_with_google') : $t('login.signup_with_google')}
+              </span>
+            </Button>
+          {/if}
         </div>
       {/if}
     </Card.Content>

apps/dashboard/src/lib/features/ui/code-snippet.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { sanitizeHtml } from '@cio/ui/tools/sanitize';
+  import { SafeHtmlContent } from '@cio/ui/custom/safe-html-content';
+
   interface Props {
     code?: string;
   }
@@ -8,5 +9,5 @@
 </script>
 
 <div class="mb-3 rounded-md bg-gray-200 p-5 dark:bg-gray-500">
-  {@html sanitizeHtml(code)}
+  <SafeHtmlContent content={code} />
 </div>

apps/dashboard/src/lib/features/ui/course-landing-page/components/editor/editor.svelte

@@ -32,6 +32,7 @@
   import { Button } from '@cio/ui/base/button';
   import { courseApi } from '$features/course/api';
   import { generateSlug } from '@cio/utils/functions';
+  import { openCoursePreview } from '$features/course/utils/course-preview';
   import * as Sidebar from '@cio/ui/base/sidebar';
   import { useSidebar } from '@cio/ui/base/sidebar';
 
@@ -164,9 +165,12 @@
     syncCourseStore(course);
   }
 
-  async function handlePreview() {
-    const link = `${$currentOrgDomain}/course/${course.slug}`;
-    window.open(link, '_blank');
+  function handlePreview() {
+    openCoursePreview({
+      courseId,
+      courseSlug: course.slug,
+      currentOrgDomain: $currentOrgDomain
+    });
   }
 
   function setter(value: any, setterKey: string) {
@@ -193,7 +197,7 @@
         </Button>
         <HoverableItem>
           {#snippet children(isHovered)}
-            <IconButton onclick={handlePreview} disabled={loading || !course.slug}>
+            <IconButton onclick={handlePreview} disabled={loading} aria-label={$t('course.header.preview')}>
               <PreviewIcon {isHovered} size={16} />
             </IconButton>
           {/snippet}

apps/dashboard/src/lib/features/ui/course-landing-page/components/pricing-section.svelte

@@ -5,7 +5,7 @@
   import { isCourseFree, calcCourseDiscount } from '$lib/utils/functions/course';
   import { currentOrg } from '$lib/utils/store/org';
   import { goto } from '$app/navigation';
-  import { sanitizeHtml } from '@cio/ui/tools/sanitize';
+  import { SafeHtmlContent } from '@cio/ui/custom/safe-html-content';
   import HTMLRender from '$features/ui/html-render.svelte';
   import PaymentModal from './payment-modal.svelte';
   import type { Course } from '$features/course/utils/types';
@@ -175,7 +175,9 @@
     <!-- Gift Container -->
     {#if courseData?.metadata?.reward?.show}
       <div class="flex flex-col items-center border-t border-b border-gray-300 p-10">
-        <HTMLRender>{@html sanitizeHtml(get(courseData, 'metadata.reward.description', '') as string)}</HTMLRender>
+        <HTMLRender
+          ><SafeHtmlContent content={get(courseData, 'metadata.reward.description', '') as string} /></HTMLRender
+        >
       </div>
     {/if}
   </aside>

apps/dashboard/src/lib/features/ui/course-landing-page/course-landing-page.svelte

@@ -4,7 +4,7 @@
   import { page } from '$app/state';
   import { onMount, onDestroy } from 'svelte';
   import { resolve } from '$app/paths';
-  import { sanitizeHtml } from '@cio/ui/tools/sanitize';
+  import { SafeHtmlContent } from '@cio/ui/custom/safe-html-content';
   import PlayIcon from '@lucide/svelte/icons/play';
 
   import { getLectureNo } from '$features/course/utils/functions';
@@ -215,7 +215,7 @@
             </h3>
 
             <ul class="list font-light">
-              <HTMLRender>{@html sanitizeHtml(get(courseData, 'metadata.requirements', ''))}</HTMLRender>
+              <HTMLRender><SafeHtmlContent content={get(courseData, 'metadata.requirements', '')} /></HTMLRender>
             </ul>
           </NavSection>
         {/if}
@@ -228,7 +228,7 @@
             </h3>
 
             <HTMLRender className="dark:text-white text-sm font-light">
-              {@html sanitizeHtml(get(courseData, 'metadata.description', ''))}
+              <SafeHtmlContent content={get(courseData, 'metadata.description', '')} />
             </HTMLRender>
           </NavSection>
         {/if}
@@ -238,7 +238,7 @@
           <NavSection id="goals">
             <h3 class="mt-0 mb-3 text-2xl">{$t('course.navItem.landing_page.learn')}</h3>
             <ul class="list font-light">
-              <HTMLRender>{@html sanitizeHtml(get(courseData, 'metadata.goals', ''))}</HTMLRender>
+              <HTMLRender><SafeHtmlContent content={get(courseData, 'metadata.goals', '')} /></HTMLRender>
             </ul>
           </NavSection>
         {/if}

apps/dashboard/src/lib/features/ui/index.ts

@@ -17,6 +17,7 @@ export * from './question';
 export { default as UploadWidget } from './upload-widget/upload-widget.svelte';
 export { default as PageLoadProgress } from './page-load-progress.svelte';
 export { default as PoweredBy } from './upgrade-powered-by.svelte';
+export { default as RefreshPageData } from './refresh-page-data.svelte';
 export { default as RoleBasedSecurity } from './role-based-security.svelte';
 export { default as Search } from './search.svelte';
 export { default as SenjaEmbed } from './senja-embed.svelte';

apps/dashboard/src/lib/features/ui/navigation/org-navigation.ts

@@ -108,7 +108,36 @@ const baseNavConfig: NavItemConfig[] = [
     icon: BracesIcon,
     requiresAdmin: true,
     disableWhenNotAdmin: true,
-    matchPattern: '^/org/[^/]+/automation(/.*)?$'
+    useHashUrl: true,
+    matchPattern: '^/org/[^/]+/automation(/.*)?$',
+    items: [
+      {
+        titleKey: 'automation.tabs.mcp',
+        path: '/automation/mcp'
+      },
+      {
+        titleKey: 'automation.tabs.zapier',
+        path: '/automation/zapier'
+      },
+      {
+        titleKey: 'automation.tabs.api',
+        path: '/automation/api'
+      }
+    ],
+    nestedRoutes: [
+      {
+        path: 'mcp',
+        titleKey: 'automation.tabs.mcp'
+      },
+      {
+        path: 'zapier',
+        titleKey: 'automation.tabs.zapier'
+      },
+      {
+        path: 'api',
+        titleKey: 'automation.tabs.api'
+      }
+    ]
   },
   {
     titleKey: 'org_navigation.settings',

apps/dashboard/src/lib/features/ui/refresh-page-data.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { invalidateAll } from '$app/navigation';
+  import RefreshCcwIcon from '@lucide/svelte/icons/refresh-ccw';
+
+  import { IconButton } from '@cio/ui/custom/icon-button';
+  import { t } from '$lib/utils/functions/translations';
+
+  interface Props {
+    disabled?: boolean;
+    onRefresh?: () => Promise<unknown> | unknown;
+  }
+
+  let { disabled = false, onRefresh }: Props = $props();
+
+  let isRefreshing = $state(false);
+
+  async function handleRefresh() {
+    if (disabled || isRefreshing) return;
+
+    isRefreshing = true;
+
+    try {
+      if (onRefresh) {
+        await onRefresh();
+        return;
+      }
+
+      await invalidateAll();
+    } finally {
+      isRefreshing = false;
+    }
+  }
+</script>
+
+<IconButton
+  onclick={handleRefresh}
+  disabled={disabled || isRefreshing}
+  tooltip={t.get('common.refresh')}
+  tooltipSide="bottom"
+  aria-label={t.get('common.refresh')}
+>
+  <RefreshCcwIcon class={isRefreshing ? 'animate-spin' : ''} size={16} />
+</IconButton>