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}