feat: implement dynamic sidebar attribute injection based on selected campaign rule events and add UI component library.

src/context/CampaignRuleContext.tsx

@@ -1,5 +1,6 @@
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useState, useEffect } from "react";
 import type { ReactNode } from "react";
+import type { Event } from "../types/event";
 
 export type RuleCondition = {
   id: string;
@@ -29,6 +30,9 @@ export type CampaignRuleState = {
   };
   formula: any;
   notification: any;
+  availableEvents: Event[];
+  isLoadingEvents: boolean;
+  eventsError: string | null;
 };
 
 type CampaignRuleContextType = {
@@ -52,6 +56,9 @@ const initialState: CampaignRuleState = {
   },
   formula: {},
   notification: {},
+  availableEvents: [],
+  isLoadingEvents: false,
+  eventsError: null,
 };
 
 const CampaignRuleContext = createContext<CampaignRuleContextType | undefined>(undefined);
@@ -60,6 +67,21 @@ export const CampaignRuleProvider = ({ children }: { children: ReactNode }) => {
   const [state, setState] = useState<CampaignRuleState>(initialState);
   const [currentStep, setCurrentStep] = useState(0);
 
+  useEffect(() => {
+    const fetchEvents = async () => {
+      setState((prev) => ({ ...prev, isLoadingEvents: true, eventsError: null }));
+      try {
+        const res = await fetch('/api/v1/events');
+        if (!res.ok) throw new Error('Failed to fetch events');
+        const data = await res.json();
+        setState((prev) => ({ ...prev, availableEvents: data, isLoadingEvents: false }));
+      } catch (err: any) {
+        setState((prev) => ({ ...prev, eventsError: err.message, isLoadingEvents: false }));
+      }
+    };
+    fetchEvents();
+  }, []);
+
   const updateState = (section: keyof CampaignRuleState, payload: any) => {
     setState((prev) => ({
       ...prev,