@fluid-app/rep-widgets 0.1.0

package/dist/chunk-NCQQI2T2.cjs

@@ -0,0 +1,386 @@
+'use strict';
+
+var chunk3CUVGQQI_cjs = require('./chunk-3CUVGQQI.cjs');
+var chunkCM7D7WGL_cjs = require('./chunk-CM7D7WGL.cjs');
+var react = require('react');
+var reactQuery = require('@tanstack/react-query');
+var context = require('@fluid-app/rep-core/data-sources/context');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var activityKeys = {
+  all: ["activities"],
+  list: () => [...activityKeys.all, "list"]
+};
+function useActivities() {
+  const { baseUrl, getApiHeaders } = context.useDataSourceConfig();
+  return reactQuery.useQuery({
+    queryKey: activityKeys.list(),
+    queryFn: async ({ signal }) => {
+      const url = baseUrl ? `${baseUrl}/v2/activities.json` : "/v2/activities.json";
+      const response = await fetch(url, {
+        headers: {
+          "content-type": "application/json",
+          ...getApiHeaders?.()
+        },
+        signal
+      });
+      if (!response.ok) {
+        throw new Error(`Failed to fetch activities: ${response.status}`);
+      }
+      const data = await response.json();
+      return transformActivities(data);
+    }
+  });
+}
+function getUserName(contact, visitor) {
+  if (contact?.full_name) {
+    return contact.full_name;
+  }
+  if (contact?.first_name && contact?.last_name) {
+    return `${contact.first_name} ${contact.last_name}`;
+  }
+  if (visitor?.city && visitor?.state) {
+    return `Visitor from ${visitor.city}, ${visitor.state}`;
+  }
+  return "Unknown Visitor";
+}
+function transformActivities(rawData) {
+  const itemsObj = rawData[1];
+  if (!itemsObj?.items) return [];
+  return itemsObj.items.map((activity) => ({
+    id: activity.id,
+    userName: getUserName(activity.contact, activity.visitor),
+    avatarUrl: activity.contact?.avatar_url ?? null,
+    activityType: formatActivityType(activity.slug),
+    targetName: activity.description || activity.title,
+    timestamp: activity.created_at,
+    slug: activity.slug
+  })).sort(
+    (a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+  );
+}
+function formatActivityType(slug) {
+  return slug.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+var formatTimestamp = (timestamp) => {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true
+  });
+};
+var formatDateHeader = (timestamp) => {
+  const date = new Date(timestamp);
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric"
+  });
+};
+var getDateKey = (timestamp) => {
+  const date = new Date(timestamp);
+  return date.toISOString().split("T")[0] ?? timestamp;
+};
+var groupActivitiesByDate = (activities) => {
+  const grouped = /* @__PURE__ */ new Map();
+  for (const activity of activities) {
+    const dateKey = getDateKey(activity.timestamp);
+    const existing = grouped.get(dateKey);
+    if (existing) {
+      existing.push(activity);
+    } else {
+      grouped.set(dateKey, [activity]);
+    }
+  }
+  return grouped;
+};
+var ACTIVITY_ICON_MAP = {
+  // Orders/Cart
+  order_placed: lucideReact.ShoppingCart,
+  abandoned_cart: lucideReact.ShoppingCart,
+  cart_items_added: lucideReact.ShoppingCart,
+  new_cart_items_added: lucideReact.ShoppingCart,
+  // Messages
+  direct_message: lucideReact.MessageSquare,
+  comment_reply: lucideReact.MessageSquare,
+  message_received: lucideReact.MessageSquare,
+  message_sent: lucideReact.MessageSquare,
+  // Video
+  video: lucideReact.Play,
+  video_complete: lucideReact.Play,
+  video_contact: lucideReact.Play,
+  video_complete_contact: lucideReact.Play,
+  // Leads
+  new_lead: lucideReact.UserPlus,
+  page_views_contact: lucideReact.UserPlus,
+  smart_link_clicked: lucideReact.UserPlus,
+  // Page Views
+  page_views: lucideReact.Eye,
+  // Events
+  upcoming_event: lucideReact.Calendar,
+  // Reviews
+  review_left: lucideReact.Star,
+  // Tasks
+  tasks: lucideReact.CheckSquare,
+  // Announcements
+  announcements: lucideReact.Bell,
+  // Fantasy
+  fantasy_point: lucideReact.Trophy
+};
+var getActivityIcon = (slug) => ACTIVITY_ICON_MAP[slug] ?? lucideReact.User;
+function ActivityFeedItem({
+  activity,
+  accentColor,
+  textColor
+}) {
+  const Icon = getActivityIcon(activity.slug);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-start gap-1.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: activity.avatarUrl ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative size-8 overflow-hidden rounded-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: activity.avatarUrl,
+          alt: activity.userName,
+          className: "size-full object-cover"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full border border-black/[0.08]" })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `flex size-8 items-center justify-center rounded-full bg-muted`,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: `size-3.5 text-${textColor} opacity-60` })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: `flex-1 text-base font-semibold text-${textColor} truncate`,
+            children: activity.activityType
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-xs text-${textColor} shrink-0 opacity-50`, children: formatTimestamp(activity.timestamp) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: `text-sm text-${textColor} opacity-80`, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `font-medium text-${accentColor}`, children: activity.userName }),
+        " ",
+        activity.targetName
+      ] })
+    ] })
+  ] });
+}
+function RecentActivityWidget({
+  // Title defaults
+  titleEnabled = true,
+  titleText = "Recent Activity",
+  titleFontSize = "lg",
+  titleColor = "foreground",
+  // Styling defaults
+  background = {
+    type: "solid",
+    color: "background"
+  },
+  textColor = "foreground",
+  accentColor = "primary",
+  padding = 4,
+  borderRadius = "md",
+  // Activity defaults
+  maxItemsToShow = 5,
+  className,
+  ...props
+}) {
+  const backgroundColor = background.color || "background";
+  const backgroundImage = (background.resource?.image_url || background.resource?.imageUrl) && background.type === "image" ? `url(${background.resource.image_url || background.resource.imageUrl})` : "none";
+  const { data: activities = [], isLoading, isError } = useActivities();
+  const groupedActivities = react.useMemo(
+    () => groupActivitiesByDate(activities),
+    [activities]
+  );
+  const totalCount = Math.min(activities.length, maxItemsToShow);
+  const activitiesToShow = react.useMemo(() => {
+    const result = [];
+    let count = 0;
+    for (const [dateKey, items] of groupedActivities) {
+      if (count >= maxItemsToShow) break;
+      const remainingSlots = maxItemsToShow - count;
+      const itemsToAdd = items.slice(0, remainingSlots);
+      if (itemsToAdd.length > 0) {
+        result.push({
+          date: formatDateHeader(items[0]?.timestamp ?? dateKey),
+          items: itemsToAdd
+        });
+        count += itemsToAdd.length;
+      }
+    }
+    return result;
+  }, [groupedActivities, maxItemsToShow]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `@container overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} border border-muted ${className}`,
+      style: { backgroundImage },
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `p-${padding} flex flex-col gap-2`, children: [
+        titleEnabled && titleText && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-start gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: `flex-1 text-${titleFontSize} font-bold text-${titleColor}`,
+              children: titleText
+            }
+          ),
+          !isLoading && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: `text-4xl font-bold text-${textColor} leading-none`,
+              children: totalCount.toString().padStart(2, "0")
+            }
+          )
+        ] }),
+        isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[200px] items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent" }) }) : isError ? (
+          /* Error state */
+          /* @__PURE__ */ jsxRuntime.jsx(chunk3CUVGQQI_cjs.ErrorState, {})
+        ) : activities.length === 0 ? (
+          /* Empty state */
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-[200px] flex-col items-center justify-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: `size-12 text-${textColor} opacity-30` }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: `text-base font-semibold text-${textColor} opacity-50`,
+                children: "No Activity To Report"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-sm text-${textColor} opacity-40`, children: "You'll Do Great!" })
+          ] })
+        ) : (
+          /* Activity list */
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", children: activitiesToShow.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-base font-semibold text-${textColor}`, children: group.date }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", children: group.items.map((activity) => /* @__PURE__ */ jsxRuntime.jsx(
+              ActivityFeedItem,
+              {
+                activity,
+                accentColor,
+                textColor
+              },
+              activity.id
+            )) })
+          ] }, groupIndex)) })
+        )
+      ] })
+    }
+  );
+}
+var recentActivityWidgetPropertySchema = {
+  widgetType: "RecentActivityWidget",
+  displayName: "Recent Activity Widget",
+  tabsConfig: [{ id: "styling", label: "Styling" }],
+  fields: [
+    // Styling Tab - Title Group
+    {
+      key: "titleEnabled",
+      label: "Widget Title",
+      type: "boolean",
+      description: "Enable the title displayed above the activity feed",
+      defaultValue: true,
+      tab: "styling",
+      group: "Title"
+    },
+    {
+      key: "titleText",
+      label: "Title",
+      type: "text",
+      description: "Title text displayed above the activity feed",
+      defaultValue: "Recent Activity",
+      tab: "styling",
+      group: "Title",
+      requiresKeyToBeTrue: "titleEnabled"
+    },
+    chunkCM7D7WGL_cjs.getFontSizeField({
+      key: "titleFontSize",
+      label: "Title Font Size",
+      description: "Font size for the widget title",
+      defaultValue: "xl",
+      tab: "styling",
+      group: "Title",
+      requiresKeyToBeTrue: "titleEnabled"
+    }),
+    chunkCM7D7WGL_cjs.getColorField({
+      key: "titleColor",
+      label: "Title Color",
+      description: "Color for the widget title",
+      defaultValue: "foreground",
+      tab: "styling",
+      group: "Title",
+      requiresKeyToBeTrue: "titleEnabled"
+    }),
+    // Styling Tab - Design Group
+    {
+      type: "background",
+      key: "background",
+      label: "Background",
+      description: "Background for the widget container",
+      defaultValue: "background",
+      tab: "styling",
+      group: "Design"
+    },
+    chunkCM7D7WGL_cjs.getColorField({
+      key: "textColor",
+      label: "Text Color",
+      description: "Default text color for activity content",
+      defaultValue: "foreground",
+      tab: "styling",
+      group: "Design"
+    }),
+    chunkCM7D7WGL_cjs.getColorField({
+      key: "accentColor",
+      label: "Accent Color",
+      description: "Color used for links and highlights",
+      defaultValue: "primary",
+      tab: "styling",
+      group: "Design"
+    }),
+    {
+      key: "separator",
+      type: "separator",
+      label: "Separator",
+      tab: "styling",
+      group: "Design"
+    },
+    chunkCM7D7WGL_cjs.getPaddingField({
+      key: "padding",
+      label: "Padding",
+      description: "Padding around the widget container",
+      defaultValue: 4,
+      tab: "styling",
+      group: "Design"
+    }),
+    chunkCM7D7WGL_cjs.getBorderRadiusField({
+      key: "borderRadius",
+      label: "Border Radius",
+      description: "Border radius for the widget container",
+      defaultValue: "md",
+      tab: "styling",
+      group: "Design"
+    }),
+    // Styling Tab - Display Group
+    {
+      key: "maxItemsToShow",
+      label: "Max Items",
+      type: "number",
+      description: "Maximum number of activity items to display",
+      defaultValue: 5,
+      tab: "styling",
+      group: "Display"
+    }
+  ]
+};
+
+exports.RecentActivityWidget = RecentActivityWidget;
+exports.recentActivityWidgetPropertySchema = recentActivityWidgetPropertySchema;
+//# sourceMappingURL=chunk-NCQQI2T2.cjs.map
+//# sourceMappingURL=chunk-NCQQI2T2.cjs.map

package/dist/chunk-NCQQI2T2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-activities.ts","../src/widgets/RecentActivityWidget.tsx"],"names":["useDataSourceConfig","useQuery","ShoppingCart","MessageSquare","Play","UserPlus","Eye","Calendar","Star","CheckSquare","Bell","Trophy","User","jsxs","jsx","useMemo","ErrorState","getFontSizeField","getColorField","getPaddingField","getBorderRadiusField"],"mappings":";;;;;;;;;;AAIO,IAAM,YAAA,GAAe;AAAA,EAC1B,GAAA,EAAK,CAAC,YAAY,CAAA;AAAA,EAClB,MAAM,MAAM,CAAC,GAAG,YAAA,CAAa,KAAK,MAAM;AAC1C,CAAA;AAuFO,SAAS,aAAA,GAAgB;AAC9B,EAAA,MAAM,EAAE,OAAA,EAAS,aAAA,EAAc,GAAIA,2BAAA,EAAoB;AAEvD,EAAA,OAAOC,mBAAA,CAAS;AAAA,IACd,QAAA,EAAU,aAAa,IAAA,EAAK;AAAA,IAC5B,OAAA,EAAS,OAAO,EAAE,MAAA,EAAO,KAA2B;AAClD,MAAA,MAAM,GAAA,GAAM,OAAA,GACR,CAAA,EAAG,OAAO,CAAA,mBAAA,CAAA,GACV,qBAAA;AACJ,MAAA,MAAM,QAAA,GAAW,MAAM,KAAA,CAAM,GAAA,EAAK;AAAA,QAChC,OAAA,EAAS;AAAA,UACP,cAAA,EAAgB,kBAAA;AAAA,UAChB,GAAG,aAAA;AAAgB,SACrB;AAAA,QACA;AAAA,OACD,CAAA;AAED,MAAA,IAAI,CAAC,SAAS,EAAA,EAAI;AAChB,QAAA,MAAM,IAAI,KAAA,CAAM,CAAA,4BAAA,EAA+B,QAAA,CAAS,MAAM,CAAA,CAAE,CAAA;AAAA,MAClE;AAEA,MAAA,MAAM,IAAA,GAAoB,MAAM,QAAA,CAAS,IAAA,EAAK;AAC9C,MAAA,OAAO,oBAAoB,IAAI,CAAA;AAAA,IACjC;AAAA,GACD,CAAA;AACH;AAGA,SAAS,WAAA,CACP,SACA,OAAA,EACQ;AACR,EAAA,IAAI,SAAS,SAAA,EAAW;AACtB,IAAA,OAAO,OAAA,CAAQ,SAAA;AAAA,EACjB;AACA,EAAA,IAAI,OAAA,EAAS,UAAA,IAAc,OAAA,EAAS,SAAA,EAAW;AAC7C,IAAA,OAAO,CAAA,EAAG,OAAA,CAAQ,UAAU,CAAA,CAAA,EAAI,QAAQ,SAAS,CAAA,CAAA;AAAA,EACnD;AACA,EAAA,IAAI,OAAA,EAAS,IAAA,IAAQ,OAAA,EAAS,KAAA,EAAO;AACnC,IAAA,OAAO,CAAA,aAAA,EAAgB,OAAA,CAAQ,IAAI,CAAA,EAAA,EAAK,QAAQ,KAAK,CAAA,CAAA;AAAA,EACvD;AACA,EAAA,OAAO,iBAAA;AACT;AAEA,SAAS,oBAAoB,OAAA,EAAkC;AAC7D,EAAA,MAAM,QAAA,GAAW,QAAQ,CAAC,CAAA;AAC1B,EAAA,IAAI,CAAC,QAAA,EAAU,KAAA,EAAO,OAAO,EAAC;AAE9B,EAAA,OAAO,QAAA,CAAS,KAAA,CACb,GAAA,CAAI,CAAC,QAAA,MAAc;AAAA,IAClB,IAAI,QAAA,CAAS,EAAA;AAAA,IACb,QAAA,EAAU,WAAA,CAAY,QAAA,CAAS,OAAA,EAAS,SAAS,OAAO,CAAA;AAAA,IACxD,SAAA,EAAW,QAAA,CAAS,OAAA,EAAS,UAAA,IAAc,IAAA;AAAA,IAC3C,YAAA,EAAc,kBAAA,CAAmB,QAAA,CAAS,IAAI,CAAA;AAAA,IAC9C,UAAA,EAAY,QAAA,CAAS,WAAA,IAAe,QAAA,CAAS,KAAA;AAAA,IAC7C,WAAW,QAAA,CAAS,UAAA;AAAA,IACpB,MAAM,QAAA,CAAS;AAAA,IACf,CAAA,CACD,IAAA;AAAA,IACC,CAAC,CAAA,EAAG,CAAA,KACF,IAAI,KAAK,CAAA,CAAE,SAAS,CAAA,CAAE,OAAA,KAAY,IAAI,IAAA,CAAK,CAAA,CAAE,SAAS,EAAE,OAAA;AAAQ,GACpE;AACJ;AAEA,SAAS,mBAAmB,IAAA,EAAsB;AAChD,EAAA,OAAO,KACJ,KAAA,CAAM,GAAG,EACT,GAAA,CAAI,CAAC,SAAS,IAAA,CAAK,MAAA,CAAO,CAAC,CAAA,CAAE,WAAA,KAAgB,IAAA,CAAK,KAAA,CAAM,CAAC,CAAC,CAAA,CAC1D,KAAK,GAAG,CAAA;AACb;AC/HA,IAAM,eAAA,GAAkB,CAAC,SAAA,KAA8B;AACrD,EAAA,MAAM,IAAA,GAAO,IAAI,IAAA,CAAK,SAAS,CAAA;AAC/B,EAAA,OAAO,IAAA,CAAK,mBAAmB,OAAA,EAAS;AAAA,IACtC,IAAA,EAAM,SAAA;AAAA,IACN,MAAA,EAAQ,SAAA;AAAA,IACR,MAAA,EAAQ;AAAA,GACT,CAAA;AACH,CAAA;AAGA,IAAM,gBAAA,GAAmB,CAAC,SAAA,KAA8B;AACtD,EAAA,MAAM,IAAA,GAAO,IAAI,IAAA,CAAK,SAAS,CAAA;AAC/B,EAAA,OAAO,IAAA,CAAK,mBAAmB,OAAA,EAAS;AAAA,IACtC,KAAA,EAAO,MAAA;AAAA,IACP,GAAA,EAAK;AAAA,GACN,CAAA;AACH,CAAA;AAGA,IAAM,UAAA,GAAa,CAAC,SAAA,KAA8B;AAChD,EAAA,MAAM,IAAA,GAAO,IAAI,IAAA,CAAK,SAAS,CAAA;AAC/B,EAAA,OAAO,KAAK,WAAA,EAAY,CAAE,MAAM,GAAG,CAAA,CAAE,CAAC,CAAA,IAAK,SAAA;AAC7C,CAAA;AAGA,IAAM,qBAAA,GAAwB,CAC5B,UAAA,KAC4B;AAC5B,EAAA,MAAM,OAAA,uBAAc,GAAA,EAAwB;AAE5C,EAAA,KAAA,MAAW,YAAY,UAAA,EAAY;AACjC,IAAA,MAAM,OAAA,GAAU,UAAA,CAAW,QAAA,CAAS,SAAS,CAAA;AAC7C,IAAA,MAAM,QAAA,GAAW,OAAA,CAAQ,GAAA,CAAI,OAAO,CAAA;AACpC,IAAA,IAAI,QAAA,EAAU;AACZ,MAAA,QAAA,CAAS,KAAK,QAAQ,CAAA;AAAA,IACxB,CAAA,MAAO;AACL,MAAA,OAAA,CAAQ,GAAA,CAAI,OAAA,EAAS,CAAC,QAAQ,CAAC,CAAA;AAAA,IACjC;AAAA,EACF;AAEA,EAAA,OAAO,OAAA;AACT,CAAA;AAGA,IAAM,iBAAA,GAAuD;AAAA;AAAA,EAE3D,YAAA,EAAcC,wBAAA;AAAA,EACd,cAAA,EAAgBA,wBAAA;AAAA,EAChB,gBAAA,EAAkBA,wBAAA;AAAA,EAClB,oBAAA,EAAsBA,wBAAA;AAAA;AAAA,EAEtB,cAAA,EAAgBC,yBAAA;AAAA,EAChB,aAAA,EAAeA,yBAAA;AAAA,EACf,gBAAA,EAAkBA,yBAAA;AAAA,EAClB,YAAA,EAAcA,yBAAA;AAAA;AAAA,EAEd,KAAA,EAAOC,gBAAA;AAAA,EACP,cAAA,EAAgBA,gBAAA;AAAA,EAChB,aAAA,EAAeA,gBAAA;AAAA,EACf,sBAAA,EAAwBA,gBAAA;AAAA;AAAA,EAExB,QAAA,EAAUC,oBAAA;AAAA,EACV,kBAAA,EAAoBA,oBAAA;AAAA,EACpB,kBAAA,EAAoBA,oBAAA;AAAA;AAAA,EAEpB,UAAA,EAAYC,eAAA;AAAA;AAAA,EAEZ,cAAA,EAAgBC,oBAAA;AAAA;AAAA,EAEhB,WAAA,EAAaC,gBAAA;AAAA;AAAA,EAEb,KAAA,EAAOC,uBAAA;AAAA;AAAA,EAEP,aAAA,EAAeC,gBAAA;AAAA;AAAA,EAEf,aAAA,EAAeC;AACjB,CAAA;AAEA,IAAM,eAAA,GAAkB,CAAC,IAAA,KAAuB,iBAAA,CAAkB,IAAI,CAAA,IAAKC,gBAAA;AAS3E,SAAS,gBAAA,CAAiB;AAAA,EACxB,QAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,IAAA,GAAO,eAAA,CAAgB,QAAA,CAAS,IAAI,CAAA;AAE1C,EAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iCAAA,EAEb,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,UAAA,EACZ,QAAA,EAAA,QAAA,CAAS,4BACRD,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,8CAAA,EACb,QAAA,EAAA;AAAA,sBAAAC,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,KAAK,QAAA,CAAS,SAAA;AAAA,UACd,KAAK,QAAA,CAAS,QAAA;AAAA,UACd,SAAA,EAAU;AAAA;AAAA,OACZ;AAAA,sBACAA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0DAAA,EAA2D;AAAA,KAAA,EAC5E,CAAA,mBAEAA,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,CAAA,6DAAA,CAAA;AAAA,QAEX,QAAA,kBAAAA,cAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAW,CAAA,cAAA,EAAiB,SAAS,CAAA,WAAA,CAAA,EAAe;AAAA;AAAA,KAC5D,EAEJ,CAAA;AAAA,oBAGAD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACb,QAAA,EAAA;AAAA,sBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,kCAAA,EACb,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,uCAAuC,SAAS,CAAA,SAAA,CAAA;AAAA,YAE1D,QAAA,EAAA,QAAA,CAAS;AAAA;AAAA,SACZ;AAAA,wBACAA,cAAA,CAAC,OAAE,SAAA,EAAW,CAAA,aAAA,EAAgB,SAAS,CAAA,oBAAA,CAAA,EACpC,QAAA,EAAA,eAAA,CAAgB,QAAA,CAAS,SAAS,CAAA,EACrC;AAAA,OAAA,EACF,CAAA;AAAA,sBACAD,eAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAW,CAAA,aAAA,EAAgB,SAAS,CAAA,WAAA,CAAA,EACrC,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,UAAK,SAAA,EAAW,CAAA,iBAAA,EAAoB,WAAW,CAAA,CAAA,EAC7C,mBAAS,QAAA,EACZ,CAAA;AAAA,QAAQ,GAAA;AAAA,QACP,QAAA,CAAS;AAAA,OAAA,EACZ;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;AAoBO,SAAS,oBAAA,CAAqB;AAAA;AAAA,EAEnC,YAAA,GAAe,IAAA;AAAA,EACf,SAAA,GAAY,iBAAA;AAAA,EACZ,aAAA,GAAgB,IAAA;AAAA,EAChB,UAAA,GAAa,YAAA;AAAA;AAAA,EAGb,UAAA,GAAa;AAAA,IACX,IAAA,EAAM,OAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACT;AAAA,EACA,SAAA,GAAY,YAAA;AAAA,EACZ,WAAA,GAAc,SAAA;AAAA,EACd,OAAA,GAAU,CAAA;AAAA,EACV,YAAA,GAAe,IAAA;AAAA;AAAA,EAGf,cAAA,GAAiB,CAAA;AAAA,EAEjB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA8B;AAC5B,EAAA,MAAM,eAAA,GAAkB,WAAW,KAAA,IAAS,YAAA;AAC5C,EAAA,MAAM,mBACH,UAAA,CAAW,QAAA,EAAU,SAAA,IAAa,UAAA,CAAW,UAAU,QAAA,KACxD,UAAA,CAAW,IAAA,KAAS,OAAA,GAChB,OAAO,UAAA,CAAW,QAAA,CAAS,aAAa,UAAA,CAAW,QAAA,CAAS,QAAQ,CAAA,CAAA,CAAA,GACpE,MAAA;AACN,EAAA,MAAM,EAAE,MAAM,UAAA,GAAa,IAAI,SAAA,EAAW,OAAA,KAAY,aAAA,EAAc;AAEpE,EAAA,MAAM,iBAAA,GAAoBC,aAAA;AAAA,IACxB,MAAM,sBAAsB,UAAU,CAAA;AAAA,IACtC,CAAC,UAAU;AAAA,GACb;AAEA,EAAA,MAAM,UAAA,GAAa,IAAA,CAAK,GAAA,CAAI,UAAA,CAAW,QAAQ,cAAc,CAAA;AAG7D,EAAA,MAAM,gBAAA,GAAmBA,cAAQ,MAAM;AACrC,IAAA,MAAM,SAAgD,EAAC;AACvD,IAAA,IAAI,KAAA,GAAQ,CAAA;AAEZ,IAAA,KAAA,MAAW,CAAC,OAAA,EAAS,KAAK,CAAA,IAAK,iBAAA,EAAmB;AAChD,MAAA,IAAI,SAAS,cAAA,EAAgB;AAE7B,MAAA,MAAM,iBAAiB,cAAA,GAAiB,KAAA;AACxC,MAAA,MAAM,UAAA,GAAa,KAAA,CAAM,KAAA,CAAM,CAAA,EAAG,cAAc,CAAA;AAEhD,MAAA,IAAI,UAAA,CAAW,SAAS,CAAA,EAAG;AACzB,QAAA,MAAA,CAAO,IAAA,CAAK;AAAA,UACV,MAAM,gBAAA,CAAiB,KAAA,CAAM,CAAC,CAAA,EAAG,aAAa,OAAO,CAAA;AAAA,UACrD,KAAA,EAAO;AAAA,SACR,CAAA;AACD,QAAA,KAAA,IAAS,UAAA,CAAW,MAAA;AAAA,MACtB;AAAA,IACF;AAEA,IAAA,OAAO,MAAA;AAAA,EACT,CAAA,EAAG,CAAC,iBAAA,EAAmB,cAAc,CAAC,CAAA;AAEtC,EAAA,uBACED,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,sCAAsC,YAAY,CAAA,IAAA,EAAO,eAAe,CAAA,MAAA,EAAS,SAAS,wBAAwB,SAAS,CAAA,CAAA;AAAA,MACtI,KAAA,EAAO,EAAE,eAAA,EAAgB;AAAA,MACxB,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAAD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,CAAA,EAAA,EAAK,OAAO,CAAA,oBAAA,CAAA,EAEzB,QAAA,EAAA;AAAA,QAAA,YAAA,IAAgB,SAAA,oBACfA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+BAAA,EACb,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,CAAA,YAAA,EAAe,aAAa,CAAA,gBAAA,EAAmB,UAAU,CAAA,CAAA;AAAA,cAEnE,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UACC,CAAC,SAAA,oBACAA,cAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,2BAA2B,SAAS,CAAA,aAAA,CAAA;AAAA,cAE9C,QAAA,EAAA,UAAA,CAAW,QAAA,EAAS,CAAE,QAAA,CAAS,GAAG,GAAG;AAAA;AAAA;AACxC,SAAA,EAEJ,CAAA;AAAA,QAID,SAAA,mBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gDAAA,EACb,yCAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gFAAA,EAAiF,CAAA,EAClG,CAAA,GACE,OAAA;AAAA;AAAA,yCAEDE,4BAAA,EAAA,EAAW;AAAA,YACV,WAAW,MAAA,KAAW,CAAA;AAAA;AAAA,0BAExBH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+DAAA,EACb,QAAA,EAAA;AAAA,4BAAAC,cAAA,CAACF,gBAAA,EAAA,EAAK,SAAA,EAAW,CAAA,aAAA,EAAgB,SAAS,CAAA,WAAA,CAAA,EAAe,CAAA;AAAA,4BACzDE,cAAA;AAAA,cAAC,GAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,gCAAgC,SAAS,CAAA,WAAA,CAAA;AAAA,gBACrD,QAAA,EAAA;AAAA;AAAA,aAED;AAAA,2CACC,GAAA,EAAA,EAAE,SAAA,EAAW,CAAA,aAAA,EAAgB,SAAS,eAAe,QAAA,EAAA,kBAAA,EAEtD;AAAA,WAAA,EACF;AAAA;AAAA;AAAA,0BAGAA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EACZ,QAAA,EAAA,gBAAA,CAAiB,GAAA,CAAI,CAAC,KAAA,EAAO,UAAA,qBAC5BD,eAAA,CAAC,KAAA,EAAA,EAAqB,SAAA,EAAU,qBAAA,EAE9B,QAAA,EAAA;AAAA,4BAAAC,cAAA,CAAC,OAAE,SAAA,EAAW,CAAA,6BAAA,EAAgC,SAAS,CAAA,CAAA,EACpD,gBAAM,IAAA,EACT,CAAA;AAAA,4BAGAA,cAAA,CAAC,SAAI,SAAA,EAAU,qBAAA,EACZ,gBAAM,KAAA,CAAM,GAAA,CAAI,CAAC,QAAA,qBAChBA,cAAA;AAAA,cAAC,gBAAA;AAAA,cAAA;AAAA,gBAEC,QAAA;AAAA,gBACA,WAAA;AAAA,gBACA;AAAA,eAAA;AAAA,cAHK,QAAA,CAAS;AAAA,aAKjB,CAAA,EACH;AAAA,WAAA,EAAA,EAhBQ,UAiBV,CACD,CAAA,EACH;AAAA;AAAA,OAAA,EAEJ;AAAA;AAAA,GACF;AAEJ;AAEO,IAAM,kCAAA,GAA2D;AAAA,EACtE,UAAA,EAAY,sBAAA;AAAA,EACZ,WAAA,EAAa,wBAAA;AAAA,EACb,YAAY,CAAC,EAAE,IAAI,SAAA,EAAW,KAAA,EAAO,WAAW,CAAA;AAAA,EAChD,MAAA,EAAQ;AAAA;AAAA,IAEN;AAAA,MACE,GAAA,EAAK,cAAA;AAAA,MACL,KAAA,EAAO,cAAA;AAAA,MACP,IAAA,EAAM,SAAA;AAAA,MACN,WAAA,EAAa,oDAAA;AAAA,MACb,YAAA,EAAc,IAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA,IACA;AAAA,MACE,GAAA,EAAK,WAAA;AAAA,MACL,KAAA,EAAO,OAAA;AAAA,MACP,IAAA,EAAM,MAAA;AAAA,MACN,WAAA,EAAa,8CAAA;AAAA,MACb,YAAA,EAAc,iBAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO,OAAA;AAAA,MACP,mBAAA,EAAqB;AAAA,KACvB;AAAA,IACAG,kCAAA,CAAiB;AAAA,MACf,GAAA,EAAK,eAAA;AAAA,MACL,KAAA,EAAO,iBAAA;AAAA,MACP,WAAA,EAAa,gCAAA;AAAA,MACb,YAAA,EAAc,IAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO,OAAA;AAAA,MACP,mBAAA,EAAqB;AAAA,KACtB,CAAA;AAAA,IACDC,+BAAA,CAAc;AAAA,MACZ,GAAA,EAAK,YAAA;AAAA,MACL,KAAA,EAAO,aAAA;AAAA,MACP,WAAA,EAAa,4BAAA;AAAA,MACb,YAAA,EAAc,YAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO,OAAA;AAAA,MACP,mBAAA,EAAqB;AAAA,KACtB,CAAA;AAAA;AAAA,IAGD;AAAA,MACE,IAAA,EAAM,YAAA;AAAA,MACN,GAAA,EAAK,YAAA;AAAA,MACL,KAAA,EAAO,YAAA;AAAA,MACP,WAAA,EAAa,qCAAA;AAAA,MACb,YAAA,EAAc,YAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA,IACAA,+BAAA,CAAc;AAAA,MACZ,GAAA,EAAK,WAAA;AAAA,MACL,KAAA,EAAO,YAAA;AAAA,MACP,WAAA,EAAa,yCAAA;AAAA,MACb,YAAA,EAAc,YAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACR,CAAA;AAAA,IACDA,+BAAA,CAAc;AAAA,MACZ,GAAA,EAAK,aAAA;AAAA,MACL,KAAA,EAAO,cAAA;AAAA,MACP,WAAA,EAAa,qCAAA;AAAA,MACb,YAAA,EAAc,SAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACR,CAAA;AAAA,IACD;AAAA,MACE,GAAA,EAAK,WAAA;AAAA,MACL,IAAA,EAAM,WAAA;AAAA,MACN,KAAA,EAAO,WAAA;AAAA,MACP,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA,IACAC,iCAAA,CAAgB;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO,SAAA;AAAA,MACP,WAAA,EAAa,qCAAA;AAAA,MACb,YAAA,EAAc,CAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACR,CAAA;AAAA,IACDC,sCAAA,CAAqB;AAAA,MACnB,GAAA,EAAK,cAAA;AAAA,MACL,KAAA,EAAO,eAAA;AAAA,MACP,WAAA,EAAa,wCAAA;AAAA,MACb,YAAA,EAAc,IAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACR,CAAA;AAAA;AAAA,IAGD;AAAA,MACE,GAAA,EAAK,gBAAA;AAAA,MACL,KAAA,EAAO,WAAA;AAAA,MACP,IAAA,EAAM,QAAA;AAAA,MACN,WAAA,EAAa,6CAAA;AAAA,MACb,YAAA,EAAc,CAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA;AACT;AAEJ","file":"chunk-NCQQI2T2.cjs","sourcesContent":["import { useQuery } from \"@tanstack/react-query\";\nimport { useDataSourceConfig } from \"@fluid-app/rep-core/data-sources/context\";\n\n// Query key factory\nexport const activityKeys = {\n  all: [\"activities\"] as const,\n  list: () => [...activityKeys.all, \"list\"] as const,\n};\n\n// API types\nexport type ActivityContact = {\n  id: number;\n  token: string | null;\n  first_name: string | null;\n  last_name: string | null;\n  avatar_url: string | null;\n  full_name: string | null;\n  email: string | null;\n  phone: string | null;\n  city: string | null;\n  state: string | null;\n};\n\nexport type ActivityVisitor = {\n  id: number;\n  ip_address: string | null;\n  city: string | null;\n  state: string | null;\n  country: string | null;\n  utm_source: string | null;\n  utm_campaign: string | null;\n};\n\nexport type ActivitySlug =\n  | \"abandoned_cart\"\n  | \"announcements\"\n  | \"cart_items_added\"\n  | \"comment_reply\"\n  | \"direct_message\"\n  | \"fantasy_point\"\n  | \"new_lead\"\n  | \"order_placed\"\n  | \"page_views\"\n  | \"page_views_contact\"\n  | \"tasks\"\n  | \"upcoming_event\"\n  | \"video\"\n  | \"video_complete\"\n  | \"video_complete_contact\"\n  | \"video_contact\"\n  | \"message_received\"\n  | \"message_sent\"\n  | \"new_cart_items_added\"\n  | \"smart_link_clicked\"\n  | \"review_left\";\n\nexport type ApiActivity = {\n  id: number;\n  user_id: number;\n  title: string;\n  description: string | null;\n  read_at: string | null;\n  created_at: string;\n  relation_type: string;\n  company_id: number;\n  state: \"new\" | \"earlier\";\n  slug: ActivitySlug;\n  relation: Record<string, unknown>;\n  contact: ActivityContact | null;\n  visitor: ActivityVisitor | null;\n};\n\ntype PaginationInfo = {\n  current: number;\n  previous: number | null;\n  next: number | null;\n  per_page: number;\n  pages: number;\n  count: number;\n};\n\ntype ApiResponse = [{ pagination: PaginationInfo }, { items: ApiActivity[] }];\n\n// Transformed activity for display\nexport type Activity = {\n  id: number;\n  userName: string;\n  avatarUrl: string | null;\n  activityType: string;\n  targetName: string;\n  timestamp: string;\n  slug: ActivitySlug;\n};\n\nexport function useActivities() {\n  const { baseUrl, getApiHeaders } = useDataSourceConfig();\n\n  return useQuery({\n    queryKey: activityKeys.list(),\n    queryFn: async ({ signal }): Promise<Activity[]> => {\n      const url = baseUrl\n        ? `${baseUrl}/v2/activities.json`\n        : \"/v2/activities.json\";\n      const response = await fetch(url, {\n        headers: {\n          \"content-type\": \"application/json\",\n          ...getApiHeaders?.(),\n        },\n        signal,\n      });\n\n      if (!response.ok) {\n        throw new Error(`Failed to fetch activities: ${response.status}`);\n      }\n\n      const data: ApiResponse = await response.json();\n      return transformActivities(data);\n    },\n  });\n}\n\n// Transform and format helpers\nfunction getUserName(\n  contact: ActivityContact | null,\n  visitor: ActivityVisitor | null,\n): string {\n  if (contact?.full_name) {\n    return contact.full_name;\n  }\n  if (contact?.first_name && contact?.last_name) {\n    return `${contact.first_name} ${contact.last_name}`;\n  }\n  if (visitor?.city && visitor?.state) {\n    return `Visitor from ${visitor.city}, ${visitor.state}`;\n  }\n  return \"Unknown Visitor\";\n}\n\nfunction transformActivities(rawData: ApiResponse): Activity[] {\n  const itemsObj = rawData[1];\n  if (!itemsObj?.items) return [];\n\n  return itemsObj.items\n    .map((activity) => ({\n      id: activity.id,\n      userName: getUserName(activity.contact, activity.visitor),\n      avatarUrl: activity.contact?.avatar_url ?? null,\n      activityType: formatActivityType(activity.slug),\n      targetName: activity.description || activity.title,\n      timestamp: activity.created_at,\n      slug: activity.slug,\n    }))\n    .sort(\n      (a, b) =>\n        new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime(),\n    );\n}\n\nfunction formatActivityType(slug: string): string {\n  return slug\n    .split(\"_\")\n    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n    .join(\" \");\n}\n","import { useMemo, type ComponentProps } from \"react\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n} from \"@fluid-app/rep-core/types\";\nimport type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport {\n  getBorderRadiusField,\n  getColorField,\n  getFontSizeField,\n  getPaddingField,\n} from \"../core/fields\";\nimport {\n  useActivities,\n  type Activity,\n  type ActivitySlug,\n} from \"../hooks/use-activities\";\nimport { ErrorState } from \"../components/error-state\";\nimport {\n  Bell,\n  Calendar,\n  CheckSquare,\n  Eye,\n  MessageSquare,\n  Play,\n  ShoppingCart,\n  Star,\n  Trophy,\n  User,\n  UserPlus,\n} from \"lucide-react\";\n\n// Format timestamp to time string\nconst formatTimestamp = (timestamp: string): string => {\n  const date = new Date(timestamp);\n  return date.toLocaleTimeString(\"en-US\", {\n    hour: \"numeric\",\n    minute: \"2-digit\",\n    hour12: true,\n  });\n};\n\n// Format date for grouping header\nconst formatDateHeader = (timestamp: string): string => {\n  const date = new Date(timestamp);\n  return date.toLocaleDateString(\"en-US\", {\n    month: \"long\",\n    day: \"numeric\",\n  });\n};\n\n// Get date string for grouping (without time)\nconst getDateKey = (timestamp: string): string => {\n  const date = new Date(timestamp);\n  return date.toISOString().split(\"T\")[0] ?? timestamp;\n};\n\n// Group activities by date\nconst groupActivitiesByDate = (\n  activities: Activity[],\n): Map<string, Activity[]> => {\n  const grouped = new Map<string, Activity[]>();\n\n  for (const activity of activities) {\n    const dateKey = getDateKey(activity.timestamp);\n    const existing = grouped.get(dateKey);\n    if (existing) {\n      existing.push(activity);\n    } else {\n      grouped.set(dateKey, [activity]);\n    }\n  }\n\n  return grouped;\n};\n\n// Activity slug to icon mapping\nconst ACTIVITY_ICON_MAP: Record<ActivitySlug, typeof User> = {\n  // Orders/Cart\n  order_placed: ShoppingCart,\n  abandoned_cart: ShoppingCart,\n  cart_items_added: ShoppingCart,\n  new_cart_items_added: ShoppingCart,\n  // Messages\n  direct_message: MessageSquare,\n  comment_reply: MessageSquare,\n  message_received: MessageSquare,\n  message_sent: MessageSquare,\n  // Video\n  video: Play,\n  video_complete: Play,\n  video_contact: Play,\n  video_complete_contact: Play,\n  // Leads\n  new_lead: UserPlus,\n  page_views_contact: UserPlus,\n  smart_link_clicked: UserPlus,\n  // Page Views\n  page_views: Eye,\n  // Events\n  upcoming_event: Calendar,\n  // Reviews\n  review_left: Star,\n  // Tasks\n  tasks: CheckSquare,\n  // Announcements\n  announcements: Bell,\n  // Fantasy\n  fantasy_point: Trophy,\n};\n\nconst getActivityIcon = (slug: ActivitySlug) => ACTIVITY_ICON_MAP[slug] ?? User;\n\n// Activity feed item component\ntype ActivityFeedItemProps = {\n  activity: Activity;\n  accentColor: ColorOptions;\n  textColor: ColorOptions;\n};\n\nfunction ActivityFeedItem({\n  activity,\n  accentColor,\n  textColor,\n}: ActivityFeedItemProps) {\n  const Icon = getActivityIcon(activity.slug);\n\n  return (\n    <div className=\"flex w-full items-start gap-1.5\">\n      {/* Avatar */}\n      <div className=\"shrink-0\">\n        {activity.avatarUrl ? (\n          <div className=\"relative size-8 overflow-hidden rounded-full\">\n            <img\n              src={activity.avatarUrl}\n              alt={activity.userName}\n              className=\"size-full object-cover\"\n            />\n            <div className=\"absolute inset-0 rounded-full border border-black/[0.08]\" />\n          </div>\n        ) : (\n          <div\n            className={`flex size-8 items-center justify-center rounded-full bg-muted`}\n          >\n            <Icon className={`size-3.5 text-${textColor} opacity-60`} />\n          </div>\n        )}\n      </div>\n\n      {/* Content */}\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"flex w-full items-center gap-1.5\">\n          <p\n            className={`flex-1 text-base font-semibold text-${textColor} truncate`}\n          >\n            {activity.activityType}\n          </p>\n          <p className={`text-xs text-${textColor} shrink-0 opacity-50`}>\n            {formatTimestamp(activity.timestamp)}\n          </p>\n        </div>\n        <p className={`text-sm text-${textColor} opacity-80`}>\n          <span className={`font-medium text-${accentColor}`}>\n            {activity.userName}\n          </span>{\" \"}\n          {activity.targetName}\n        </p>\n      </div>\n    </div>\n  );\n}\n\ntype RecentActivityWidgetProps = ComponentProps<\"div\"> & {\n  // Title\n  titleEnabled?: boolean;\n  titleText?: string;\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n\n  // Styling\n  background?: BackgroundValue;\n  textColor?: ColorOptions;\n  accentColor?: ColorOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n\n  // Activity settings\n  maxItemsToShow?: number;\n};\n\nexport function RecentActivityWidget({\n  // Title defaults\n  titleEnabled = true,\n  titleText = \"Recent Activity\",\n  titleFontSize = \"lg\",\n  titleColor = \"foreground\",\n\n  // Styling defaults\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  textColor = \"foreground\",\n  accentColor = \"primary\",\n  padding = 4,\n  borderRadius = \"md\",\n\n  // Activity defaults\n  maxItemsToShow = 5,\n\n  className,\n  ...props\n}: RecentActivityWidgetProps) {\n  const backgroundColor = background.color || \"background\";\n  const backgroundImage =\n    (background.resource?.image_url || background.resource?.imageUrl) &&\n    background.type === \"image\"\n      ? `url(${background.resource.image_url || background.resource.imageUrl})`\n      : \"none\";\n  const { data: activities = [], isLoading, isError } = useActivities();\n\n  const groupedActivities = useMemo(\n    () => groupActivitiesByDate(activities),\n    [activities],\n  );\n\n  const totalCount = Math.min(activities.length, maxItemsToShow);\n\n  // Get activities to display (limited by maxItemsToShow)\n  const activitiesToShow = useMemo(() => {\n    const result: { date: string; items: Activity[] }[] = [];\n    let count = 0;\n\n    for (const [dateKey, items] of groupedActivities) {\n      if (count >= maxItemsToShow) break;\n\n      const remainingSlots = maxItemsToShow - count;\n      const itemsToAdd = items.slice(0, remainingSlots);\n\n      if (itemsToAdd.length > 0) {\n        result.push({\n          date: formatDateHeader(items[0]?.timestamp ?? dateKey),\n          items: itemsToAdd,\n        });\n        count += itemsToAdd.length;\n      }\n    }\n\n    return result;\n  }, [groupedActivities, maxItemsToShow]);\n\n  return (\n    <div\n      className={`@container overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} border border-muted ${className}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      <div className={`p-${padding} flex flex-col gap-2`}>\n        {/* Header */}\n        {titleEnabled && titleText && (\n          <div className=\"flex w-full items-start gap-2\">\n            <h2\n              className={`flex-1 text-${titleFontSize} font-bold text-${titleColor}`}\n            >\n              {titleText}\n            </h2>\n            {!isLoading && (\n              <span\n                className={`text-4xl font-bold text-${textColor} leading-none`}\n              >\n                {totalCount.toString().padStart(2, \"0\")}\n              </span>\n            )}\n          </div>\n        )}\n\n        {/* Loading state */}\n        {isLoading ? (\n          <div className=\"flex min-h-[200px] items-center justify-center\">\n            <div className=\"h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n          </div>\n        ) : isError ? (\n          /* Error state */\n          <ErrorState />\n        ) : activities.length === 0 ? (\n          /* Empty state */\n          <div className=\"flex min-h-[200px] flex-col items-center justify-center gap-2\">\n            <User className={`size-12 text-${textColor} opacity-30`} />\n            <p\n              className={`text-base font-semibold text-${textColor} opacity-50`}\n            >\n              No Activity To Report\n            </p>\n            <p className={`text-sm text-${textColor} opacity-40`}>\n              You&apos;ll Do Great!\n            </p>\n          </div>\n        ) : (\n          /* Activity list */\n          <div className=\"flex flex-col gap-4\">\n            {activitiesToShow.map((group, groupIndex) => (\n              <div key={groupIndex} className=\"flex flex-col gap-4\">\n                {/* Date header */}\n                <p className={`text-base font-semibold text-${textColor}`}>\n                  {group.date}\n                </p>\n\n                {/* Activity items */}\n                <div className=\"flex flex-col gap-4\">\n                  {group.items.map((activity) => (\n                    <ActivityFeedItem\n                      key={activity.id}\n                      activity={activity}\n                      accentColor={accentColor}\n                      textColor={textColor}\n                    />\n                  ))}\n                </div>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport const recentActivityWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"RecentActivityWidget\",\n  displayName: \"Recent Activity Widget\",\n  tabsConfig: [{ id: \"styling\", label: \"Styling\" }],\n  fields: [\n    // Styling Tab - Title Group\n    {\n      key: \"titleEnabled\",\n      label: \"Widget Title\",\n      type: \"boolean\",\n      description: \"Enable the title displayed above the activity feed\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Title\",\n    },\n    {\n      key: \"titleText\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"Title text displayed above the activity feed\",\n      defaultValue: \"Recent Activity\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    },\n    getFontSizeField({\n      key: \"titleFontSize\",\n      label: \"Title Font Size\",\n      description: \"Font size for the widget title\",\n      defaultValue: \"xl\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    getColorField({\n      key: \"titleColor\",\n      label: \"Title Color\",\n      description: \"Color for the widget title\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n\n    // Styling Tab - Design Group\n    {\n      type: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background for the widget container\",\n      defaultValue: \"background\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getColorField({\n      key: \"textColor\",\n      label: \"Text Color\",\n      description: \"Default text color for activity content\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"accentColor\",\n      label: \"Accent Color\",\n      description: \"Color used for links and highlights\",\n      defaultValue: \"primary\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    {\n      key: \"separator\",\n      type: \"separator\",\n      label: \"Separator\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Padding around the widget container\",\n      defaultValue: 4,\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Border radius for the widget container\",\n      defaultValue: \"md\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n\n    // Styling Tab - Display Group\n    {\n      key: \"maxItemsToShow\",\n      label: \"Max Items\",\n      type: \"number\",\n      description: \"Maximum number of activity items to display\",\n      defaultValue: 5,\n      tab: \"styling\",\n      group: \"Display\",\n    },\n  ],\n} as const satisfies WidgetPropertySchema;\n"]}