@universe-platform/ui 0.1.0-beta.26 → 0.1.0-beta.27

package/dist/index.mjs

@@ -8677,7 +8677,8 @@ var PlacementBlock = (props) => {
 };
 
 // src/components/WhatsAppComponent/WhatsAppComponent.tsx
-import { CheckCircle2 as CheckCircle24, AlertCircle as AlertCircle5, X as X12, Loader2 as Loader27, Phone as Phone4, Send as Send2, Image as ImageIcon3, FileText as FileText4, Video as Video3 } from "lucide-react";
+import React18 from "react";
+import { CheckCircle2 as CheckCircle24, AlertCircle as AlertCircle5, X as X12, Loader2 as Loader28, Phone as Phone4, Send as Send3, Image as ImageIcon3, FileText as FileText4, Video as Video3 } from "lucide-react";
 
 // src/components/WhatsAppComponent/CreateTemplateModal.tsx
 import { useState as useState15, useEffect as useEffect13, useRef as useRef12, useMemo as useMemo8 } from "react";
@@ -13601,367 +13602,678 @@ function SettingsAndActionsBlock({
   ] });
 }
 
+// src/components/WhatsAppComponent/inbox/useInboxState.ts
+import { useState as useState17, useEffect as useEffect15, useCallback as useCallback14, useRef as useRef15 } from "react";
+function useInboxState(orgId, actions) {
+  const [conversations, setConversations] = useState17([]);
+  const [activeConversationId, setActiveConversationId] = useState17(null);
+  const [messages, setMessages] = useState17([]);
+  const [isLoading, setIsLoading] = useState17(false);
+  const [isSending, setIsSending] = useState17(false);
+  const [error, setError] = useState17(null);
+  const actionsRef = useRef15(actions);
+  useEffect15(() => {
+    actionsRef.current = actions;
+  });
+  const fetchConversations = useCallback14(async () => {
+    if (!orgId) return;
+    const res = await actionsRef.current.getConversations(orgId);
+    if (res.success && res.data) {
+      setConversations(res.data);
+    } else if (res.error) {
+      setError(res.error);
+    }
+  }, [orgId]);
+  const fetchMessages = useCallback14(async (conversationId) => {
+    setIsLoading(true);
+    const res = await actionsRef.current.getMessages(conversationId);
+    if (res.success && res.data) {
+      setMessages(res.data);
+      setConversations(
+        (prev) => prev.map((c) => c.id === conversationId ? __spreadProps(__spreadValues({}, c), { unreadCount: 0 }) : c)
+      );
+    } else if (res.error) {
+      setError(res.error);
+    }
+    setIsLoading(false);
+  }, []);
+  useEffect15(() => {
+    fetchConversations();
+    const interval = setInterval(() => {
+      fetchConversations();
+      if (activeConversationId) {
+        fetchMessages(activeConversationId);
+      }
+    }, 5e3);
+    return () => clearInterval(interval);
+  }, [fetchConversations, activeConversationId, fetchMessages]);
+  const handleSelectConversation = (id) => {
+    setActiveConversationId(id);
+    fetchMessages(id);
+  };
+  const handleSendMessage = async (text) => {
+    if (!activeConversationId || !text.trim()) return;
+    setIsSending(true);
+    const tempMsg = {
+      id: Date.now().toString(),
+      direction: "OUTBOUND",
+      content: text,
+      status: "SENDING",
+      createdAt: /* @__PURE__ */ new Date()
+    };
+    setMessages((prev) => [...prev, tempMsg]);
+    const res = await actions.sendMessage(activeConversationId, text, orgId);
+    if (res.success && res.data) {
+      setMessages((prev) => prev.map((m) => m.id === tempMsg.id ? res.data : m));
+      fetchConversations();
+    } else {
+      setError("\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E9\u05DC\u05D9\u05D7\u05EA \u05D4\u05D5\u05D3\u05E2\u05D4");
+      setMessages((prev) => prev.filter((m) => m.id !== tempMsg.id));
+    }
+    setIsSending(false);
+  };
+  return {
+    conversations,
+    activeConversationId,
+    messages,
+    isLoading,
+    isSending,
+    error,
+    handleSelectConversation,
+    handleSendMessage
+  };
+}
+
+// src/components/WhatsAppComponent/inbox/ConversationList.tsx
+import { Search as Search4, User } from "lucide-react";
+import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+function ConversationList({ conversations, activeId, onSelect }) {
+  return /* @__PURE__ */ jsxs19("div", { className: "w-80 border-l border-slate-200 bg-white flex flex-col h-full shrink-0", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "p-4 border-b border-slate-100 bg-slate-50", children: [
+      /* @__PURE__ */ jsx20("h2", { className: "text-lg font-bold text-slate-800 mb-3", children: "\u05E9\u05D9\u05D7\u05D5\u05EA \u05E0\u05DB\u05E0\u05E1\u05D5\u05EA" }),
+      /* @__PURE__ */ jsxs19("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx20(Search4, { className: "w-4 h-4 absolute right-3 top-1/2 -translate-y-1/2 text-slate-400" }),
+        /* @__PURE__ */ jsx20(
+          "input",
+          {
+            type: "text",
+            placeholder: "\u05D7\u05D9\u05E4\u05D5\u05E9 \u05DC\u05E4\u05D9 \u05E9\u05DD \u05D0\u05D5 \u05DE\u05E1\u05E4\u05E8...",
+            className: "w-full pl-3 pr-9 py-2 bg-white border border-slate-200 rounded-xl text-xs focus:outline-none focus:border-emerald-500"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx20("div", { className: "flex-1 overflow-y-auto", children: (() => {
+      const sortedConversations = [...conversations].sort(
+        (a, b) => new Date(b.lastMessageAt).getTime() - new Date(a.lastMessageAt).getTime()
+      );
+      return sortedConversations.length === 0 ? /* @__PURE__ */ jsx20("div", { className: "p-6 text-center text-sm text-slate-400", children: "\u05D0\u05D9\u05DF \u05E9\u05D9\u05D7\u05D5\u05EA \u05E4\u05E2\u05D9\u05DC\u05D5\u05EA" }) : sortedConversations.map((conv) => {
+        var _a, _b;
+        return /* @__PURE__ */ jsxs19(
+          "button",
+          {
+            onClick: () => onSelect(conv.id),
+            className: `w-full text-right p-4 border-b border-slate-100 transition-colors hover:bg-slate-50 flex items-start gap-3 ${activeId === conv.id ? "bg-emerald-50/50 border-r-4 border-r-emerald-500" : "border-r-4 border-r-transparent"}`,
+            children: [
+              /* @__PURE__ */ jsx20("div", { className: "w-10 h-10 rounded-full bg-slate-200 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx20(User, { className: "w-5 h-5 text-slate-500" }) }),
+              /* @__PURE__ */ jsxs19("div", { className: "flex-1 overflow-hidden", children: [
+                /* @__PURE__ */ jsxs19("div", { className: "flex justify-between items-center mb-1", children: [
+                  /* @__PURE__ */ jsx20("span", { className: "font-semibold text-slate-800 text-sm truncate", children: conv.contactName || conv.contactPhone }),
+                  /* @__PURE__ */ jsx20("span", { className: "text-[10px] text-slate-400", children: new Date(conv.lastMessageAt).toLocaleTimeString("he-IL", { hour: "2-digit", minute: "2-digit" }) })
+                ] }),
+                /* @__PURE__ */ jsxs19("div", { className: "flex justify-between items-center", children: [
+                  /* @__PURE__ */ jsx20("p", { className: "text-xs text-slate-500 truncate w-4/5", children: ((_b = (_a = conv.messages) == null ? void 0 : _a[0]) == null ? void 0 : _b.content) || "\u05D0\u05D9\u05DF \u05D4\u05D5\u05D3\u05E2\u05D5\u05EA" }),
+                  conv.unreadCount > 0 && /* @__PURE__ */ jsx20("span", { className: "bg-emerald-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full min-w-[20px] text-center", children: conv.unreadCount })
+                ] })
+              ] })
+            ]
+          },
+          conv.id
+        );
+      });
+    })() })
+  ] });
+}
+
+// src/components/WhatsAppComponent/inbox/ChatWindow.tsx
+import { useState as useState18, useRef as useRef16, useEffect as useEffect16 } from "react";
+import { Send as Send2, User as User2, Loader2 as Loader27 } from "lucide-react";
+import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+function ChatWindow({ activeConversation, messages, isLoading, isSending, onSendMessage }) {
+  const [inputText, setInputText] = useState18("");
+  const messagesEndRef = useRef16(null);
+  const scrollToBottom = () => {
+    var _a;
+    (_a = messagesEndRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+  };
+  useEffect16(() => {
+    scrollToBottom();
+  }, [messages]);
+  const handleSend = (e) => {
+    e.preventDefault();
+    if (!inputText.trim() || isSending) return;
+    onSendMessage(inputText);
+    setInputText("");
+  };
+  if (!activeConversation) {
+    return /* @__PURE__ */ jsxs20("div", { className: "flex-1 bg-slate-50 flex items-center justify-center flex-col gap-4 text-slate-400", children: [
+      /* @__PURE__ */ jsx21("div", { className: "w-16 h-16 rounded-full bg-slate-200 flex items-center justify-center", children: /* @__PURE__ */ jsx21("svg", { className: "w-8 h-8 text-slate-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx21("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }) }),
+      /* @__PURE__ */ jsx21("p", { children: "\u05D1\u05D7\u05E8 \u05E9\u05D9\u05D7\u05D4 \u05DE\u05D4\u05E8\u05E9\u05D9\u05DE\u05D4 \u05DB\u05D3\u05D9 \u05DC\u05D4\u05EA\u05D7\u05D9\u05DC" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs20("div", { className: "flex-1 flex flex-col bg-[#efeae2] h-full relative", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "h-16 bg-white border-b border-slate-200 px-6 flex items-center gap-3 shrink-0 z-10 shadow-sm", children: [
+      /* @__PURE__ */ jsx21("div", { className: "w-10 h-10 rounded-full bg-slate-200 flex items-center justify-center", children: /* @__PURE__ */ jsx21(User2, { className: "w-5 h-5 text-slate-500" }) }),
+      /* @__PURE__ */ jsxs20("div", { children: [
+        /* @__PURE__ */ jsx21("h3", { className: "font-bold text-slate-800", children: activeConversation.contactName || activeConversation.contactPhone }),
+        /* @__PURE__ */ jsx21("p", { className: "text-xs text-slate-500", dir: "ltr", children: activeConversation.contactPhone })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs20("div", { className: "flex-1 overflow-y-auto p-6 space-y-4", children: [
+      isLoading ? /* @__PURE__ */ jsx21("div", { className: "flex justify-center py-10", children: /* @__PURE__ */ jsx21(Loader27, { className: "w-6 h-6 animate-spin text-emerald-600" }) }) : messages.map((msg, idx) => {
+        const isOutbound = msg.direction === "OUTBOUND";
+        return /* @__PURE__ */ jsx21("div", { className: `flex ${isOutbound ? "justify-start" : "justify-end"}`, children: /* @__PURE__ */ jsxs20("div", { className: `max-w-[70%] rounded-2xl px-4 py-2 shadow-sm relative ${isOutbound ? "bg-[#d9fdd3] text-slate-900 rounded-tr-none" : "bg-white text-slate-900 rounded-tl-none"}`, children: [
+          /* @__PURE__ */ jsx21("p", { className: "text-sm whitespace-pre-wrap", children: msg.content }),
+          /* @__PURE__ */ jsxs20("div", { className: "text-[10px] text-slate-400 mt-1 text-left flex items-center justify-end gap-1", children: [
+            new Date(msg.createdAt).toLocaleTimeString("he-IL", { hour: "2-digit", minute: "2-digit" }),
+            isOutbound && /* @__PURE__ */ jsx21("span", { className: msg.status === "READ" || msg.status === "DELIVERED" ? "text-blue-500" : "text-slate-400", children: msg.status === "READ" ? "\u2713\u2713" : msg.status === "DELIVERED" ? "\u2713\u2713" : "\u2713" })
+          ] })
+        ] }) }, msg.id || idx);
+      }),
+      /* @__PURE__ */ jsx21("div", { ref: messagesEndRef })
+    ] }),
+    /* @__PURE__ */ jsx21("div", { className: "bg-slate-50 p-4 border-t border-slate-200 shrink-0", children: /* @__PURE__ */ jsxs20("form", { onSubmit: handleSend, className: "flex items-end gap-2 max-w-4xl mx-auto", children: [
+      /* @__PURE__ */ jsx21("div", { className: "flex-1 bg-white border border-slate-300 rounded-2xl overflow-hidden focus-within:border-emerald-500 focus-within:ring-1 focus-within:ring-emerald-500", children: /* @__PURE__ */ jsx21(
+        "textarea",
+        {
+          rows: 1,
+          value: inputText,
+          onChange: (e) => setInputText(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              handleSend(e);
+            }
+          },
+          placeholder: "\u05D4\u05E7\u05DC\u05D3 \u05D4\u05D5\u05D3\u05E2\u05D4...",
+          className: "w-full max-h-32 min-h-[44px] p-3 text-sm bg-transparent outline-none resize-none"
+        }
+      ) }),
+      /* @__PURE__ */ jsx21(
+        "button",
+        {
+          type: "submit",
+          disabled: !inputText.trim() || isSending,
+          className: `w-11 h-11 rounded-full flex items-center justify-center shrink-0 transition-colors ${!inputText.trim() || isSending ? "bg-slate-200 text-slate-400" : "bg-emerald-600 hover:bg-emerald-700 text-white shadow-md"}`,
+          children: isSending ? /* @__PURE__ */ jsx21(Loader27, { className: "w-5 h-5 animate-spin" }) : /* @__PURE__ */ jsx21(Send2, { className: "w-5 h-5 -ml-1" })
+        }
+      )
+    ] }) })
+  ] });
+}
+
+// src/components/WhatsAppComponent/inbox/WhatsAppInbox.tsx
+import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+function WhatsAppInbox({
+  orgId,
+  getConversationsAction,
+  getMessagesAction,
+  sendInboxMessageAction
+}) {
+  const {
+    conversations,
+    activeConversationId,
+    messages,
+    isLoading,
+    isSending,
+    handleSelectConversation,
+    handleSendMessage
+  } = useInboxState(orgId, {
+    getConversations: getConversationsAction,
+    getMessages: getMessagesAction,
+    sendMessage: sendInboxMessageAction
+  });
+  const activeConversation = conversations.find((c) => c.id === activeConversationId);
+  return /* @__PURE__ */ jsxs21("div", { className: "flex h-[calc(100vh-140px)] min-h-[600px] w-full border border-slate-200 rounded-2xl overflow-hidden bg-white shadow-xs", dir: "rtl", children: [
+    /* @__PURE__ */ jsx22(
+      ConversationList,
+      {
+        conversations,
+        activeId: activeConversationId,
+        onSelect: handleSelectConversation
+      }
+    ),
+    /* @__PURE__ */ jsx22(
+      ChatWindow,
+      {
+        activeConversation,
+        messages,
+        isLoading,
+        isSending,
+        onSendMessage: handleSendMessage
+      }
+    )
+  ] });
+}
+
 // src/components/WhatsAppComponent/WhatsAppComponent.tsx
-import { Fragment as Fragment8, jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
 function WhatsAppComponent(props) {
   var _a;
   const { className = "", settings, orgId, componentId, executeAction } = props;
   const state = useWhatsAppState(props);
-  return /* @__PURE__ */ jsxs19(
+  const [activeTab, setActiveTab] = React18.useState("broadcast");
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       className: `w-full flex flex-col bg-white border border-slate-200 rounded-2xl shadow-xs overflow-hidden ${className}`,
       "data-testid": "whatsapp-component",
       dir: "rtl",
       children: [
-        state.feedback && /* @__PURE__ */ jsxs19(
-          "div",
-          {
-            className: `px-6 py-3 border-b text-xs flex items-center justify-between gap-3 ${state.feedback.type === "success" ? "bg-emerald-50 border-emerald-200 text-emerald-800" : "bg-rose-50 border-rose-200 text-rose-800"}`,
-            children: [
-              /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
-                state.feedback.type === "success" ? /* @__PURE__ */ jsx20(CheckCircle24, { className: "w-4 h-4 text-emerald-600 shrink-0" }) : /* @__PURE__ */ jsx20(AlertCircle5, { className: "w-4 h-4 text-rose-600 shrink-0" }),
-                /* @__PURE__ */ jsx20("span", { children: state.feedback.message })
-              ] }),
-              /* @__PURE__ */ jsx20(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => state.setFeedback(null),
-                  className: "text-slate-400 hover:text-slate-700 cursor-pointer",
-                  children: /* @__PURE__ */ jsx20(X12, { className: "w-4 h-4" })
-                }
-              )
-            ]
-          }
-        ),
-        state.fetchError && !state.isLoadingTemplates && /* @__PURE__ */ jsxs19("div", { className: "px-6 py-3 bg-amber-50 border-b border-amber-200 text-xs text-amber-900 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx20(AlertCircle5, { className: "w-4 h-4 text-amber-600 shrink-0" }),
-            /* @__PURE__ */ jsxs19("span", { children: [
-              "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05D8\u05E2\u05D9\u05E0\u05EA \u05EA\u05D1\u05E0\u05D9\u05D5\u05EA \u05DE-Meta: ",
-              state.fetchError
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsxs22("div", { className: "flex border-b border-slate-200 bg-slate-50 px-6 pt-3 gap-4 shrink-0", children: [
+          /* @__PURE__ */ jsx23(
+            "button",
+            {
+              type: "button",
+              onClick: () => setActiveTab("broadcast"),
+              className: `pb-3 text-sm font-bold border-b-2 transition-colors cursor-pointer ${activeTab === "broadcast" ? "border-emerald-600 text-emerald-700" : "border-transparent text-slate-500 hover:text-slate-800"}`,
+              children: "\u{1F4E4} \u05E9\u05DC\u05D9\u05D7\u05EA \u05D4\u05D5\u05D3\u05E2\u05D5\u05EA \u05D5\u05EA\u05E4\u05D5\u05E6\u05D4"
+            }
+          ),
+          /* @__PURE__ */ jsx23(
             "button",
             {
               type: "button",
-              onClick: state.loadTemplates,
-              className: "font-bold underline cursor-pointer",
-              children: "\u05E0\u05E1\u05D4 \u05E9\u05D5\u05D1"
+              onClick: () => setActiveTab("inbox"),
+              className: `pb-3 text-sm font-bold border-b-2 transition-colors cursor-pointer ${activeTab === "inbox" ? "border-emerald-600 text-emerald-700" : "border-transparent text-slate-500 hover:text-slate-800"}`,
+              children: "\u{1F4AC} \u05EA\u05D9\u05D1\u05EA \u05D4\u05D5\u05D3\u05E2\u05D5\u05EA (Inbox)"
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs19("div", { className: "p-4 flex flex-col gap-4", children: [
-          /* @__PURE__ */ jsxs19("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-4 shrink-0 items-stretch", children: [
-            /* @__PURE__ */ jsx20(
-              TemplateSelectionBlock,
-              {
-                selectedTemplate: state.selectedTemplate,
-                selectedTemplateId: state.selectedTemplateId,
-                setSelectedTemplateId: state.setSelectedTemplateId,
-                templates: state.templates,
-                isLoadingTemplates: state.isLoadingTemplates,
-                isDropdownOpen: state.isDropdownOpen,
-                setIsDropdownOpen: state.setIsDropdownOpen,
-                templateBodyText: state.templateBodyText,
-                templateHeaderComp: state.templateHeaderComp,
-                headerMediaUrl: state.headerMediaUrl,
-                handleHeaderMediaUrlChange: state.handleHeaderMediaUrlChange,
-                handleResetHeaderMediaUrl: state.handleResetHeaderMediaUrl,
-                templateVariables: state.templateVariables,
-                variableMapping: state.variableMapping,
-                handleVariableTypeChange: state.handleVariableTypeChange,
-                handleVariableValueChange: state.handleVariableValueChange,
-                textableColumnOptions: state.textableColumnOptions,
-                handleDeleteTemplate: state.handleDeleteTemplate,
-                isDeleting: state.isDeleting,
-                setIsModalOpen: state.setIsModalOpen,
-                setFeedback: state.setFeedback,
-                isUploadingMedia: state.isUploadingMedia,
-                handleFileUpload: state.handleFileUpload
+        activeTab === "inbox" ? /* @__PURE__ */ jsx23("div", { className: "p-4 flex-1", children: /* @__PURE__ */ jsx23(
+          WhatsAppInbox,
+          {
+            orgId: orgId || props.organizationId || "",
+            getConversationsAction: async (id) => {
+              if (!executeAction) return { success: false, error: "executeAction missing" };
+              try {
+                const data = await executeAction("GET_WHATSAPP_CONVERSATIONS", { orgId: id });
+                return { success: true, data };
+              } catch (e) {
+                return { success: false, error: (e == null ? void 0 : e.message) || "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05D8\u05E2\u05D9\u05E0\u05EA \u05E9\u05D9\u05D7\u05D5\u05EA" };
               }
-            ),
-            /* @__PURE__ */ jsx20(
-              DynamicFiltersBlock,
-              {
-                filterableColumns: state.filterableColumns,
-                filters: state.filters,
-                handleFilterChange: state.handleFilterChange,
-                handleClearFilters: state.handleClearFilters,
-                activeFiltersCount: state.activeFiltersCount,
-                relationOptions: state.relationOptions,
-                getRelationOptionsForCol: state.getRelationOptionsForCol,
-                selectedRowIds: state.selectedRowIds,
-                filteredRecordsCount: state.filteredRecords.length,
-                rawRecordsCount: state.rawRecords.length,
-                loadTableData: state.loadTableData,
-                isLoadingTableData: state.isLoadingTableData
+            },
+            getMessagesAction: async (convId) => {
+              if (!executeAction) return { success: false, error: "executeAction missing" };
+              try {
+                const data = await executeAction("GET_WHATSAPP_MESSAGES", {
+                  conversationId: convId,
+                  orgId: orgId || props.organizationId || ""
+                });
+                return { success: true, data };
+              } catch (e) {
+                return { success: false, error: (e == null ? void 0 : e.message) || "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05D8\u05E2\u05D9\u05E0\u05EA \u05D4\u05D5\u05D3\u05E2\u05D5\u05EA" };
               }
-            ),
-            /* @__PURE__ */ jsx20(
-              SettingsAndActionsBlock,
+            },
+            sendInboxMessageAction: async (convId, text, currentOrgId) => {
+              const res = await fetch(`/api/whatsapp/inbox/send`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ conversationId: convId, text, orgId: currentOrgId })
+              });
+              return res.json();
+            }
+          }
+        ) }) : /* @__PURE__ */ jsxs22(Fragment8, { children: [
+          state.feedback && /* @__PURE__ */ jsxs22(
+            "div",
+            {
+              className: `px-6 py-3 border-b text-xs flex items-center justify-between gap-3 ${state.feedback.type === "success" ? "bg-emerald-50 border-emerald-200 text-emerald-800" : "bg-rose-50 border-rose-200 text-rose-800"}`,
+              children: [
+                /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
+                  state.feedback.type === "success" ? /* @__PURE__ */ jsx23(CheckCircle24, { className: "w-4 h-4 text-emerald-600 shrink-0" }) : /* @__PURE__ */ jsx23(AlertCircle5, { className: "w-4 h-4 text-rose-600 shrink-0" }),
+                  /* @__PURE__ */ jsx23("span", { children: state.feedback.message })
+                ] }),
+                /* @__PURE__ */ jsx23(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => state.setFeedback(null),
+                    className: "text-slate-400 hover:text-slate-700 cursor-pointer",
+                    children: /* @__PURE__ */ jsx23(X12, { className: "w-4 h-4" })
+                  }
+                )
+              ]
+            }
+          ),
+          state.fetchError && !state.isLoadingTemplates && /* @__PURE__ */ jsxs22("div", { className: "px-6 py-3 bg-amber-50 border-b border-amber-200 text-xs text-amber-900 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx23(AlertCircle5, { className: "w-4 h-4 text-amber-600 shrink-0" }),
+              /* @__PURE__ */ jsxs22("span", { children: [
+                "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05D8\u05E2\u05D9\u05E0\u05EA \u05EA\u05D1\u05E0\u05D9\u05D5\u05EA \u05DE-Meta: ",
+                state.fetchError
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx23(
+              "button",
               {
-                isScanningPhoneColumns: state.isScanningPhoneColumns,
-                targetPhoneOptions: state.targetPhoneOptions,
-                phoneColumnId: state.phoneColumnId,
-                setPhoneColumnId: state.setPhoneColumnId,
-                selectedPhoneOption: state.selectedPhoneOption,
-                autoSelectCount: state.autoSelectCount,
-                setAutoSelectCount: state.setAutoSelectCount,
-                subtableFilterColumn: state.subtableFilterColumn,
-                setSubtableFilterColumn: state.setSubtableFilterColumn,
-                subtableFilterValue: state.subtableFilterValue,
-                setSubtableFilterValue: state.setSubtableFilterValue,
-                subtableSendLimit: state.subtableSendLimit,
-                setSubtableSendLimit: state.setSubtableSendLimit,
-                subtableFilterableColumns: state.subtableFilterableColumns,
-                selectedSubtableFilterCol: state.selectedSubtableFilterCol,
-                getRelationOptionsForCol: state.getRelationOptionsForCol,
-                relationOptions: state.relationOptions,
-                enablePostSendAction: state.enablePostSendAction,
-                setEnablePostSendAction: state.setEnablePostSendAction,
-                postSendActionColumn: state.postSendActionColumn,
-                setPostSendActionColumn: state.setPostSendActionColumn,
-                postSendActionValue: state.postSendActionValue,
-                setPostSendActionValue: state.setPostSendActionValue,
-                postSendActionTargetType: state.postSendActionTargetType,
-                setPostSendActionTargetType: state.setPostSendActionTargetType,
-                postSendActionTargetOptions: state.postSendActionTargetOptions,
-                selectedPostSendOption: state.selectedPostSendCol,
-                isTestDisabled: state.isTestDisabled,
-                testButtonTitle: state.testButtonTitle,
-                setIsTestPromptOpen: state.setIsTestPromptOpen,
-                isSendDisabled: state.isSendDisabled,
-                sendButtonTitle: state.sendButtonTitle,
-                handleSendMessages: state.handleSendMessages,
-                selectedRowIdsCount: state.selectedRowIds.length,
-                finalRecipientCount: state.finalRecipientCount,
-                validMainRowsCount: state.validMainRowsCount,
-                isSendingBroadcast: state.isSendingBroadcast,
-                broadcastProgress: state.broadcastProgress,
-                broadcastSummary: state.broadcastSummary,
-                clearBroadcastSummary: state.clearBroadcastSummary
+                type: "button",
+                onClick: state.loadTemplates,
+                className: "font-bold underline cursor-pointer",
+                children: "\u05E0\u05E1\u05D4 \u05E9\u05D5\u05D1"
               }
             )
           ] }),
-          /* @__PURE__ */ jsx20("div", { className: "w-full h-[calc(100vh-420px)] min-h-[320px] overflow-hidden border border-slate-200 rounded-2xl shadow-xs bg-white flex flex-col", children: state.isLoadingTableData && state.rawRecords.length === 0 ? /* @__PURE__ */ jsxs19("div", { className: "flex-1 flex flex-col items-center justify-center p-12 text-center text-xs text-slate-400 gap-2", children: [
-            /* @__PURE__ */ jsx20(Loader27, { className: "w-6 h-6 animate-spin text-emerald-600" }),
-            /* @__PURE__ */ jsx20("span", { children: "\u05D8\u05D5\u05E2\u05DF \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05DE\u05D4\u05D8\u05D1\u05DC\u05D4..." })
-          ] }) : state.tableError ? /* @__PURE__ */ jsxs19("div", { className: "flex-1 flex items-center justify-center p-6 text-center text-xs text-rose-600 bg-rose-50 gap-2", children: [
-            /* @__PURE__ */ jsx20(AlertCircle5, { className: "w-4 h-4 text-rose-500 shrink-0" }),
-            /* @__PURE__ */ jsx20("span", { children: state.tableError })
-          ] }) : !(settings == null ? void 0 : settings.tableMetaId) ? /* @__PURE__ */ jsx20("div", { className: "flex-1 flex items-center justify-center p-10 text-center text-xs text-slate-400", children: "\u05DC\u05D0 \u05E0\u05D1\u05D7\u05E8\u05D4 \u05D8\u05D1\u05DC\u05EA \u05DE\u05E7\u05D5\u05E8 \u05E2\u05D1\u05D5\u05E8 \u05E8\u05DB\u05D9\u05D1 WhatsApp \u05D6\u05D4" }) : /* @__PURE__ */ jsx20(
-            TableBlockClient,
+          /* @__PURE__ */ jsxs22("div", { className: "p-4 flex flex-col gap-4", children: [
+            /* @__PURE__ */ jsxs22("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-4 shrink-0 items-stretch", children: [
+              /* @__PURE__ */ jsx23(
+                TemplateSelectionBlock,
+                {
+                  selectedTemplate: state.selectedTemplate,
+                  selectedTemplateId: state.selectedTemplateId,
+                  setSelectedTemplateId: state.setSelectedTemplateId,
+                  templates: state.templates,
+                  isLoadingTemplates: state.isLoadingTemplates,
+                  isDropdownOpen: state.isDropdownOpen,
+                  setIsDropdownOpen: state.setIsDropdownOpen,
+                  templateBodyText: state.templateBodyText,
+                  templateHeaderComp: state.templateHeaderComp,
+                  headerMediaUrl: state.headerMediaUrl,
+                  handleHeaderMediaUrlChange: state.handleHeaderMediaUrlChange,
+                  handleResetHeaderMediaUrl: state.handleResetHeaderMediaUrl,
+                  templateVariables: state.templateVariables,
+                  variableMapping: state.variableMapping,
+                  handleVariableTypeChange: state.handleVariableTypeChange,
+                  handleVariableValueChange: state.handleVariableValueChange,
+                  textableColumnOptions: state.textableColumnOptions,
+                  handleDeleteTemplate: state.handleDeleteTemplate,
+                  isDeleting: state.isDeleting,
+                  setIsModalOpen: state.setIsModalOpen,
+                  setFeedback: state.setFeedback,
+                  isUploadingMedia: state.isUploadingMedia,
+                  handleFileUpload: state.handleFileUpload
+                }
+              ),
+              /* @__PURE__ */ jsx23(
+                DynamicFiltersBlock,
+                {
+                  filterableColumns: state.filterableColumns,
+                  filters: state.filters,
+                  handleFilterChange: state.handleFilterChange,
+                  handleClearFilters: state.handleClearFilters,
+                  activeFiltersCount: state.activeFiltersCount,
+                  relationOptions: state.relationOptions,
+                  getRelationOptionsForCol: state.getRelationOptionsForCol,
+                  selectedRowIds: state.selectedRowIds,
+                  filteredRecordsCount: state.filteredRecords.length,
+                  rawRecordsCount: state.rawRecords.length,
+                  loadTableData: state.loadTableData,
+                  isLoadingTableData: state.isLoadingTableData
+                }
+              ),
+              /* @__PURE__ */ jsx23(
+                SettingsAndActionsBlock,
+                {
+                  isScanningPhoneColumns: state.isScanningPhoneColumns,
+                  targetPhoneOptions: state.targetPhoneOptions,
+                  phoneColumnId: state.phoneColumnId,
+                  setPhoneColumnId: state.setPhoneColumnId,
+                  selectedPhoneOption: state.selectedPhoneOption,
+                  autoSelectCount: state.autoSelectCount,
+                  setAutoSelectCount: state.setAutoSelectCount,
+                  subtableFilterColumn: state.subtableFilterColumn,
+                  setSubtableFilterColumn: state.setSubtableFilterColumn,
+                  subtableFilterValue: state.subtableFilterValue,
+                  setSubtableFilterValue: state.setSubtableFilterValue,
+                  subtableSendLimit: state.subtableSendLimit,
+                  setSubtableSendLimit: state.setSubtableSendLimit,
+                  subtableFilterableColumns: state.subtableFilterableColumns,
+                  selectedSubtableFilterCol: state.selectedSubtableFilterCol,
+                  getRelationOptionsForCol: state.getRelationOptionsForCol,
+                  relationOptions: state.relationOptions,
+                  enablePostSendAction: state.enablePostSendAction,
+                  setEnablePostSendAction: state.setEnablePostSendAction,
+                  postSendActionColumn: state.postSendActionColumn,
+                  setPostSendActionColumn: state.setPostSendActionColumn,
+                  postSendActionValue: state.postSendActionValue,
+                  setPostSendActionValue: state.setPostSendActionValue,
+                  postSendActionTargetType: state.postSendActionTargetType,
+                  setPostSendActionTargetType: state.setPostSendActionTargetType,
+                  postSendActionTargetOptions: state.postSendActionTargetOptions,
+                  selectedPostSendOption: state.selectedPostSendCol,
+                  isTestDisabled: state.isTestDisabled,
+                  testButtonTitle: state.testButtonTitle,
+                  setIsTestPromptOpen: state.setIsTestPromptOpen,
+                  isSendDisabled: state.isSendDisabled,
+                  sendButtonTitle: state.sendButtonTitle,
+                  handleSendMessages: state.handleSendMessages,
+                  selectedRowIdsCount: state.selectedRowIds.length,
+                  finalRecipientCount: state.finalRecipientCount,
+                  validMainRowsCount: state.validMainRowsCount,
+                  isSendingBroadcast: state.isSendingBroadcast,
+                  broadcastProgress: state.broadcastProgress,
+                  broadcastSummary: state.broadcastSummary,
+                  clearBroadcastSummary: state.clearBroadcastSummary
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx23("div", { className: "w-full h-[calc(100vh-420px)] min-h-[320px] overflow-hidden border border-slate-200 rounded-2xl shadow-xs bg-white flex flex-col", children: state.isLoadingTableData && state.rawRecords.length === 0 ? /* @__PURE__ */ jsxs22("div", { className: "flex-1 flex flex-col items-center justify-center p-12 text-center text-xs text-slate-400 gap-2", children: [
+              /* @__PURE__ */ jsx23(Loader28, { className: "w-6 h-6 animate-spin text-emerald-600" }),
+              /* @__PURE__ */ jsx23("span", { children: "\u05D8\u05D5\u05E2\u05DF \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05DE\u05D4\u05D8\u05D1\u05DC\u05D4..." })
+            ] }) : state.tableError ? /* @__PURE__ */ jsxs22("div", { className: "flex-1 flex items-center justify-center p-6 text-center text-xs text-rose-600 bg-rose-50 gap-2", children: [
+              /* @__PURE__ */ jsx23(AlertCircle5, { className: "w-4 h-4 text-rose-500 shrink-0" }),
+              /* @__PURE__ */ jsx23("span", { children: state.tableError })
+            ] }) : !(settings == null ? void 0 : settings.tableMetaId) ? /* @__PURE__ */ jsx23("div", { className: "flex-1 flex items-center justify-center p-10 text-center text-xs text-slate-400", children: "\u05DC\u05D0 \u05E0\u05D1\u05D7\u05E8\u05D4 \u05D8\u05D1\u05DC\u05EA \u05DE\u05E7\u05D5\u05E8 \u05E2\u05D1\u05D5\u05E8 \u05E8\u05DB\u05D9\u05D1 WhatsApp \u05D6\u05D4" }) : /* @__PURE__ */ jsx23(
+              TableBlockClient,
+              {
+                settings: {
+                  tableMetaId: settings.tableMetaId,
+                  tableId: settings.tableMetaId,
+                  title: "",
+                  columns: state.tableColumns
+                },
+                data: state.filteredRecords,
+                readOnly: true,
+                selectedRowIds: state.selectedRowIds,
+                onSelectionChange: state.handleSelectionChange,
+                onRowToggle: state.handleRowToggle,
+                executeAction: state.embeddedTableExecuteAction,
+                orgId,
+                componentId: `${componentId || "whatsapp"}-embedded-table`,
+                className: "h-full flex-1 border-0 rounded-2xl shadow-none",
+                rowStatusMap: state.rowStatusMap
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx23(
+            CreateTemplateModal,
             {
-              settings: {
-                tableMetaId: settings.tableMetaId,
-                tableId: settings.tableMetaId,
-                title: "",
-                columns: state.tableColumns
+              isOpen: state.isModalOpen,
+              onClose: () => state.setIsModalOpen(false),
+              onSuccess: () => {
+                state.loadTemplates();
               },
-              data: state.filteredRecords,
-              readOnly: true,
-              selectedRowIds: state.selectedRowIds,
-              onSelectionChange: state.handleSelectionChange,
-              onRowToggle: state.handleRowToggle,
-              executeAction: state.embeddedTableExecuteAction,
-              orgId,
-              componentId: `${componentId || "whatsapp"}-embedded-table`,
-              className: "h-full flex-1 border-0 rounded-2xl shadow-none",
-              rowStatusMap: state.rowStatusMap
+              existingTemplates: state.templates,
+              existingTemplateNames: state.existingTemplateNames,
+              executeAction,
+              orgId: state.orgId || orgId
             }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx20(
-          CreateTemplateModal,
-          {
-            isOpen: state.isModalOpen,
-            onClose: () => state.setIsModalOpen(false),
-            onSuccess: () => {
-              state.loadTemplates();
-            },
-            existingTemplates: state.templates,
-            existingTemplateNames: state.existingTemplateNames,
-            executeAction,
-            orgId: state.orgId || orgId
-          }
-        ),
-        state.isTestPromptOpen && /* @__PURE__ */ jsx20(
-          "div",
-          {
-            className: "fixed inset-0 bg-slate-900/60 backdrop-blur-xs z-50 flex items-center justify-center p-4 overflow-y-auto animate-in fade-in duration-150",
-            dir: "rtl",
-            onClick: () => {
-              state.setIsTestPromptOpen(false);
-              state.setTestFeedback(null);
-            },
-            children: /* @__PURE__ */ jsxs19(
-              "div",
-              {
-                className: "bg-white rounded-2xl border border-slate-200 shadow-2xl w-full max-w-md flex flex-col overflow-hidden animate-in zoom-in-95 duration-150",
-                role: "dialog",
-                "aria-modal": "true",
-                "aria-labelledby": "test-modal-title",
-                onClick: (e) => e.stopPropagation(),
-                children: [
-                  /* @__PURE__ */ jsxs19("div", { className: "px-5 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50/70", children: [
-                    /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2.5", children: [
-                      /* @__PURE__ */ jsx20("div", { className: "w-8 h-8 rounded-lg bg-emerald-100 text-emerald-700 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx20(Phone4, { className: "w-4 h-4" }) }),
-                      /* @__PURE__ */ jsxs19("div", { children: [
-                        /* @__PURE__ */ jsx20("h3", { id: "test-modal-title", className: "text-sm font-bold text-slate-900", children: "\u05E9\u05DC\u05D9\u05D7\u05EA \u05D4\u05D5\u05D3\u05E2\u05EA \u05D1\u05D3\u05D9\u05E7\u05D4 (\u05D8\u05E1\u05D8)" }),
-                        /* @__PURE__ */ jsx20("p", { className: "text-[11px] text-slate-500", children: "\u05D1\u05D3\u05D9\u05E7\u05EA \u05D4\u05EA\u05D1\u05E0\u05D9\u05EA \u05DE\u05D5\u05DC \u05E0\u05DE\u05E2\u05DF \u05D1\u05D5\u05D3\u05D3 \u05DC\u05E4\u05E0\u05D9 \u05E9\u05D9\u05D3\u05D5\u05E8 \u05E8\u05D7\u05D1" })
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsx20(
-                      "button",
-                      {
-                        type: "button",
-                        disabled: state.isSendingTest,
-                        onClick: () => {
-                          if (state.isSendingTest) return;
-                          state.setIsTestPromptOpen(false);
-                          state.setTestFeedback(null);
-                        },
-                        className: `w-8 h-8 rounded-lg flex items-center justify-center transition-colors ${state.isSendingTest ? "text-slate-300 cursor-not-allowed" : "text-slate-400 hover:text-slate-700 hover:bg-slate-200/50 cursor-pointer"}`,
-                        title: "\u05E1\u05D2\u05D5\u05E8",
-                        children: /* @__PURE__ */ jsx20(X12, { className: "w-4 h-4" })
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxs19("div", { className: "p-5 space-y-4", children: [
-                    /* @__PURE__ */ jsxs19("div", { className: "p-2.5 bg-slate-50 border border-slate-200/80 rounded-xl flex items-center justify-between text-xs", children: [
-                      /* @__PURE__ */ jsx20("span", { className: "text-slate-500 font-medium", children: "\u05EA\u05D1\u05E0\u05D9\u05EA \u05E0\u05D1\u05D7\u05E8\u05EA:" }),
-                      /* @__PURE__ */ jsx20("span", { className: "font-bold text-slate-800 font-mono", children: ((_a = state.selectedTemplate) == null ? void 0 : _a.name) || "\u05DC\u05D0 \u05E0\u05D1\u05D7\u05E8\u05D4 \u05EA\u05D1\u05E0\u05D9\u05EA" })
-                    ] }),
-                    state.selectedPhoneOption && /* @__PURE__ */ jsxs19("div", { className: "p-2 bg-emerald-50/50 border border-emerald-200/60 rounded-xl flex items-center justify-between text-[11px]", children: [
-                      /* @__PURE__ */ jsx20("span", { className: "text-emerald-800 font-medium", children: "\u05E2\u05DE\u05D5\u05D3\u05EA \u05D9\u05E2\u05D3:" }),
-                      /* @__PURE__ */ jsx20("span", { className: "font-bold text-emerald-950 font-mono", children: state.selectedPhoneOption.label })
+          ),
+          state.isTestPromptOpen && /* @__PURE__ */ jsx23(
+            "div",
+            {
+              className: "fixed inset-0 bg-slate-900/60 backdrop-blur-xs z-50 flex items-center justify-center p-4 overflow-y-auto animate-in fade-in duration-150",
+              dir: "rtl",
+              onClick: () => {
+                state.setIsTestPromptOpen(false);
+                state.setTestFeedback(null);
+              },
+              children: /* @__PURE__ */ jsxs22(
+                "div",
+                {
+                  className: "bg-white rounded-2xl border border-slate-200 shadow-2xl w-full max-w-md flex flex-col overflow-hidden animate-in zoom-in-95 duration-150",
+                  role: "dialog",
+                  "aria-modal": "true",
+                  "aria-labelledby": "test-modal-title",
+                  onClick: (e) => e.stopPropagation(),
+                  children: [
+                    /* @__PURE__ */ jsxs22("div", { className: "px-5 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50/70", children: [
+                      /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2.5", children: [
+                        /* @__PURE__ */ jsx23("div", { className: "w-8 h-8 rounded-lg bg-emerald-100 text-emerald-700 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx23(Phone4, { className: "w-4 h-4" }) }),
+                        /* @__PURE__ */ jsxs22("div", { children: [
+                          /* @__PURE__ */ jsx23("h3", { id: "test-modal-title", className: "text-sm font-bold text-slate-900", children: "\u05E9\u05DC\u05D9\u05D7\u05EA \u05D4\u05D5\u05D3\u05E2\u05EA \u05D1\u05D3\u05D9\u05E7\u05D4 (\u05D8\u05E1\u05D8)" }),
+                          /* @__PURE__ */ jsx23("p", { className: "text-[11px] text-slate-500", children: "\u05D1\u05D3\u05D9\u05E7\u05EA \u05D4\u05EA\u05D1\u05E0\u05D9\u05EA \u05DE\u05D5\u05DC \u05E0\u05DE\u05E2\u05DF \u05D1\u05D5\u05D3\u05D3 \u05DC\u05E4\u05E0\u05D9 \u05E9\u05D9\u05D3\u05D5\u05E8 \u05E8\u05D7\u05D1" })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsx23(
+                        "button",
+                        {
+                          type: "button",
+                          disabled: state.isSendingTest,
+                          onClick: () => {
+                            if (state.isSendingTest) return;
+                            state.setIsTestPromptOpen(false);
+                            state.setTestFeedback(null);
+                          },
+                          className: `w-8 h-8 rounded-lg flex items-center justify-center transition-colors ${state.isSendingTest ? "text-slate-300 cursor-not-allowed" : "text-slate-400 hover:text-slate-700 hover:bg-slate-200/50 cursor-pointer"}`,
+                          title: "\u05E1\u05D2\u05D5\u05E8",
+                          children: /* @__PURE__ */ jsx23(X12, { className: "w-4 h-4" })
+                        }
+                      )
                     ] }),
-                    state.templateHeaderComp && (() => {
-                      const headerFormat = (state.templateHeaderComp.format || "").toUpperCase();
-                      const docFilename = resolveDocumentFilename(state.templateHeaderComp, state.headerMediaUrl);
-                      return /* @__PURE__ */ jsxs19("div", { className: "p-2.5 bg-slate-50 border border-slate-200/80 rounded-xl flex items-center justify-between text-xs", children: [
-                        /* @__PURE__ */ jsx20("div", { className: "flex items-center gap-2 overflow-hidden", children: headerFormat === "IMAGE" ? /* @__PURE__ */ jsxs19(Fragment8, { children: [
-                          /* @__PURE__ */ jsx20("div", { className: "w-7 h-7 rounded-md overflow-hidden border border-slate-200 shrink-0 bg-slate-100 flex items-center justify-center", children: state.headerMediaUrl && state.headerMediaUrl.startsWith("http") ? /* @__PURE__ */ jsx20(
-                            "img",
-                            {
-                              src: state.headerMediaUrl,
-                              alt: "\u05EA\u05DE\u05D5\u05E0\u05EA \u05DB\u05D5\u05EA\u05E8\u05EA",
-                              className: "w-full h-full object-cover",
-                              onError: (e) => {
-                                e.currentTarget.style.display = "none";
-                              }
-                            }
-                          ) : /* @__PURE__ */ jsx20(ImageIcon3, { className: "w-3.5 h-3.5 text-emerald-600" }) }),
-                          /* @__PURE__ */ jsx20("span", { className: "font-semibold text-slate-800 truncate", children: "\u05EA\u05DE\u05D5\u05E0\u05EA \u05DB\u05D5\u05EA\u05E8\u05EA" })
-                        ] }) : headerFormat === "DOCUMENT" ? /* @__PURE__ */ jsxs19(Fragment8, { children: [
-                          /* @__PURE__ */ jsx20("div", { className: "w-7 h-7 rounded-md bg-rose-50 text-rose-600 border border-rose-100 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx20(FileText4, { className: "w-3.5 h-3.5" }) }),
-                          /* @__PURE__ */ jsxs19("div", { className: "overflow-hidden", children: [
-                            /* @__PURE__ */ jsx20("span", { className: "font-semibold text-slate-800 block truncate", children: "\u05DE\u05E1\u05DE\u05DA \u05DB\u05D5\u05EA\u05E8\u05EA (PDF)" }),
-                            /* @__PURE__ */ jsx20("span", { className: "text-[10px] text-slate-500 font-mono block truncate", title: docFilename, children: docFilename })
-                          ] })
-                        ] }) : /* @__PURE__ */ jsxs19(Fragment8, { children: [
-                          /* @__PURE__ */ jsx20("div", { className: "w-7 h-7 rounded-md bg-indigo-50 text-indigo-600 border border-indigo-100 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx20(Video3, { className: "w-3.5 h-3.5" }) }),
-                          /* @__PURE__ */ jsx20("span", { className: "font-semibold text-slate-800 truncate", children: "\u05E1\u05E8\u05D8\u05D5\u05DF \u05DB\u05D5\u05EA\u05E8\u05EA" })
-                        ] }) }),
-                        state.headerMediaUrl && state.headerMediaUrl.startsWith("http") ? /* @__PURE__ */ jsx20("span", { className: "text-[10px] text-emerald-700 bg-emerald-50 border border-emerald-200 px-1.5 py-0.5 rounded font-medium shrink-0", children: "\u05E7\u05D5\u05D1\u05E5 \u05DE\u05E6\u05D5\u05E8\u05E3 \u05EA\u05E7\u05D9\u05DF" }) : /* @__PURE__ */ jsx20("span", { className: "text-[10px] text-amber-700 bg-amber-50 border border-amber-200 px-1.5 py-0.5 rounded font-medium shrink-0", children: "\u05E0\u05D3\u05E8\u05E9 \u05E6\u05D9\u05E8\u05D5\u05E3 \u05E7\u05D5\u05D1\u05E5 \u05DC\u05EA\u05D1\u05E0\u05D9\u05EA \u05D6\u05D5" })
-                      ] });
-                    })(),
-                    /* @__PURE__ */ jsxs19("div", { className: "space-y-1.5", children: [
-                      /* @__PURE__ */ jsxs19("label", { className: "text-xs font-semibold text-slate-700 block", children: [
-                        "\u05DE\u05E1\u05E4\u05E8 \u05D8\u05DC\u05E4\u05D5\u05DF \u05DC\u05D8\u05E1\u05D8 ",
-                        /* @__PURE__ */ jsx20("span", { className: "text-rose-500", children: "*" })
+                    /* @__PURE__ */ jsxs22("div", { className: "p-5 space-y-4", children: [
+                      /* @__PURE__ */ jsxs22("div", { className: "p-2.5 bg-slate-50 border border-slate-200/80 rounded-xl flex items-center justify-between text-xs", children: [
+                        /* @__PURE__ */ jsx23("span", { className: "text-slate-500 font-medium", children: "\u05EA\u05D1\u05E0\u05D9\u05EA \u05E0\u05D1\u05D7\u05E8\u05EA:" }),
+                        /* @__PURE__ */ jsx23("span", { className: "font-bold text-slate-800 font-mono", children: ((_a = state.selectedTemplate) == null ? void 0 : _a.name) || "\u05DC\u05D0 \u05E0\u05D1\u05D7\u05E8\u05D4 \u05EA\u05D1\u05E0\u05D9\u05EA" })
                       ] }),
-                      /* @__PURE__ */ jsxs19("div", { className: "relative", children: [
-                        /* @__PURE__ */ jsx20(
-                          "input",
-                          {
-                            type: "tel",
-                            dir: "ltr",
-                            autoFocus: true,
-                            disabled: state.isSendingTest,
-                            value: state.testPhoneNumber,
-                            onChange: (e) => {
-                              state.handleTestPhoneChange(e.target.value);
-                              if (state.testFeedback) state.setTestFeedback(null);
-                            },
-                            onKeyDown: (e) => {
-                              if (e.key === "Enter" && state.testPhoneNumber.trim() && !state.isSendingTest) {
-                                e.preventDefault();
-                                state.handleSendTest();
+                      state.selectedPhoneOption && /* @__PURE__ */ jsxs22("div", { className: "p-2 bg-emerald-50/50 border border-emerald-200/60 rounded-xl flex items-center justify-between text-[11px]", children: [
+                        /* @__PURE__ */ jsx23("span", { className: "text-emerald-800 font-medium", children: "\u05E2\u05DE\u05D5\u05D3\u05EA \u05D9\u05E2\u05D3:" }),
+                        /* @__PURE__ */ jsx23("span", { className: "font-bold text-emerald-950 font-mono", children: state.selectedPhoneOption.label })
+                      ] }),
+                      state.templateHeaderComp && (() => {
+                        const headerFormat = (state.templateHeaderComp.format || "").toUpperCase();
+                        const docFilename = resolveDocumentFilename(state.templateHeaderComp, state.headerMediaUrl);
+                        return /* @__PURE__ */ jsxs22("div", { className: "p-2.5 bg-slate-50 border border-slate-200/80 rounded-xl flex items-center justify-between text-xs", children: [
+                          /* @__PURE__ */ jsx23("div", { className: "flex items-center gap-2 overflow-hidden", children: headerFormat === "IMAGE" ? /* @__PURE__ */ jsxs22(Fragment8, { children: [
+                            /* @__PURE__ */ jsx23("div", { className: "w-7 h-7 rounded-md overflow-hidden border border-slate-200 shrink-0 bg-slate-100 flex items-center justify-center", children: state.headerMediaUrl && state.headerMediaUrl.startsWith("http") ? /* @__PURE__ */ jsx23(
+                              "img",
+                              {
+                                src: state.headerMediaUrl,
+                                alt: "\u05EA\u05DE\u05D5\u05E0\u05EA \u05DB\u05D5\u05EA\u05E8\u05EA",
+                                className: "w-full h-full object-cover",
+                                onError: (e) => {
+                                  e.currentTarget.style.display = "none";
+                                }
                               }
-                            },
-                            placeholder: "\u05DC\u05D3\u05D5\u05D2\u05DE\u05D4: 0501234567",
-                            className: "w-full h-10 px-3 pr-3 pl-8 text-sm rounded-xl border border-slate-200 bg-white text-slate-900 placeholder:text-slate-400 focus:outline-hidden focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 transition-all font-mono disabled:opacity-60 disabled:cursor-not-allowed"
-                          }
-                        ),
-                        /* @__PURE__ */ jsx20(Phone4, { className: "w-4 h-4 text-slate-400 absolute left-2.5 top-1/2 -translate-y-1/2 pointer-events-none" })
+                            ) : /* @__PURE__ */ jsx23(ImageIcon3, { className: "w-3.5 h-3.5 text-emerald-600" }) }),
+                            /* @__PURE__ */ jsx23("span", { className: "font-semibold text-slate-800 truncate", children: "\u05EA\u05DE\u05D5\u05E0\u05EA \u05DB\u05D5\u05EA\u05E8\u05EA" })
+                          ] }) : headerFormat === "DOCUMENT" ? /* @__PURE__ */ jsxs22(Fragment8, { children: [
+                            /* @__PURE__ */ jsx23("div", { className: "w-7 h-7 rounded-md bg-rose-50 text-rose-600 border border-rose-100 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx23(FileText4, { className: "w-3.5 h-3.5" }) }),
+                            /* @__PURE__ */ jsxs22("div", { className: "overflow-hidden", children: [
+                              /* @__PURE__ */ jsx23("span", { className: "font-semibold text-slate-800 block truncate", children: "\u05DE\u05E1\u05DE\u05DA \u05DB\u05D5\u05EA\u05E8\u05EA (PDF)" }),
+                              /* @__PURE__ */ jsx23("span", { className: "text-[10px] text-slate-500 font-mono block truncate", title: docFilename, children: docFilename })
+                            ] })
+                          ] }) : /* @__PURE__ */ jsxs22(Fragment8, { children: [
+                            /* @__PURE__ */ jsx23("div", { className: "w-7 h-7 rounded-md bg-indigo-50 text-indigo-600 border border-indigo-100 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx23(Video3, { className: "w-3.5 h-3.5" }) }),
+                            /* @__PURE__ */ jsx23("span", { className: "font-semibold text-slate-800 truncate", children: "\u05E1\u05E8\u05D8\u05D5\u05DF \u05DB\u05D5\u05EA\u05E8\u05EA" })
+                          ] }) }),
+                          state.headerMediaUrl && state.headerMediaUrl.startsWith("http") ? /* @__PURE__ */ jsx23("span", { className: "text-[10px] text-emerald-700 bg-emerald-50 border border-emerald-200 px-1.5 py-0.5 rounded font-medium shrink-0", children: "\u05E7\u05D5\u05D1\u05E5 \u05DE\u05E6\u05D5\u05E8\u05E3 \u05EA\u05E7\u05D9\u05DF" }) : /* @__PURE__ */ jsx23("span", { className: "text-[10px] text-amber-700 bg-amber-50 border border-amber-200 px-1.5 py-0.5 rounded font-medium shrink-0", children: "\u05E0\u05D3\u05E8\u05E9 \u05E6\u05D9\u05E8\u05D5\u05E3 \u05E7\u05D5\u05D1\u05E5 \u05DC\u05EA\u05D1\u05E0\u05D9\u05EA \u05D6\u05D5" })
+                        ] });
+                      })(),
+                      /* @__PURE__ */ jsxs22("div", { className: "space-y-1.5", children: [
+                        /* @__PURE__ */ jsxs22("label", { className: "text-xs font-semibold text-slate-700 block", children: [
+                          "\u05DE\u05E1\u05E4\u05E8 \u05D8\u05DC\u05E4\u05D5\u05DF \u05DC\u05D8\u05E1\u05D8 ",
+                          /* @__PURE__ */ jsx23("span", { className: "text-rose-500", children: "*" })
+                        ] }),
+                        /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
+                          /* @__PURE__ */ jsx23(
+                            "input",
+                            {
+                              type: "tel",
+                              dir: "ltr",
+                              autoFocus: true,
+                              disabled: state.isSendingTest,
+                              value: state.testPhoneNumber,
+                              onChange: (e) => {
+                                state.handleTestPhoneChange(e.target.value);
+                                if (state.testFeedback) state.setTestFeedback(null);
+                              },
+                              onKeyDown: (e) => {
+                                if (e.key === "Enter" && state.testPhoneNumber.trim() && !state.isSendingTest) {
+                                  e.preventDefault();
+                                  state.handleSendTest();
+                                }
+                              },
+                              placeholder: "\u05DC\u05D3\u05D5\u05D2\u05DE\u05D4: 0501234567",
+                              className: "w-full h-10 px-3 pr-3 pl-8 text-sm rounded-xl border border-slate-200 bg-white text-slate-900 placeholder:text-slate-400 focus:outline-hidden focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 transition-all font-mono disabled:opacity-60 disabled:cursor-not-allowed"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx23(Phone4, { className: "w-4 h-4 text-slate-400 absolute left-2.5 top-1/2 -translate-y-1/2 pointer-events-none" })
+                        ] }),
+                        /* @__PURE__ */ jsx23("p", { className: "text-[11px] text-slate-500 leading-normal", children: "\u05D4\u05D5\u05D3\u05E2\u05EA \u05D4\u05D1\u05D3\u05D9\u05E7\u05D4 \u05EA\u05D9\u05E9\u05DC\u05D7 \u05D9\u05E9\u05D9\u05E8\u05D5\u05EA \u05DC\u05DE\u05E1\u05E4\u05E8 \u05D6\u05D4 \u05DC\u05E6\u05D5\u05E8\u05DA \u05D5\u05D9\u05D3\u05D5\u05D0 \u05EA\u05E7\u05D9\u05E0\u05D5\u05EA \u05EA\u05D5\u05DB\u05DF \u05D4\u05D4\u05D5\u05D3\u05E2\u05D4 \u05D5\u05D4\u05E2\u05D9\u05E6\u05D5\u05D1." })
                       ] }),
-                      /* @__PURE__ */ jsx20("p", { className: "text-[11px] text-slate-500 leading-normal", children: "\u05D4\u05D5\u05D3\u05E2\u05EA \u05D4\u05D1\u05D3\u05D9\u05E7\u05D4 \u05EA\u05D9\u05E9\u05DC\u05D7 \u05D9\u05E9\u05D9\u05E8\u05D5\u05EA \u05DC\u05DE\u05E1\u05E4\u05E8 \u05D6\u05D4 \u05DC\u05E6\u05D5\u05E8\u05DA \u05D5\u05D9\u05D3\u05D5\u05D0 \u05EA\u05E7\u05D9\u05E0\u05D5\u05EA \u05EA\u05D5\u05DB\u05DF \u05D4\u05D4\u05D5\u05D3\u05E2\u05D4 \u05D5\u05D4\u05E2\u05D9\u05E6\u05D5\u05D1." })
+                      state.testFeedback && /* @__PURE__ */ jsxs22("div", { className: "p-2.5 bg-rose-50 border border-rose-200 rounded-xl text-xs text-rose-700 flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsx23(AlertCircle5, { className: "w-4 h-4 text-rose-500 shrink-0" }),
+                        /* @__PURE__ */ jsx23("span", { children: state.testFeedback })
+                      ] })
                     ] }),
-                    state.testFeedback && /* @__PURE__ */ jsxs19("div", { className: "p-2.5 bg-rose-50 border border-rose-200 rounded-xl text-xs text-rose-700 flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsx20(AlertCircle5, { className: "w-4 h-4 text-rose-500 shrink-0" }),
-                      /* @__PURE__ */ jsx20("span", { children: state.testFeedback })
+                    /* @__PURE__ */ jsxs22("div", { className: "px-5 py-3.5 bg-slate-50/70 border-t border-slate-100 flex items-center justify-end gap-2", children: [
+                      /* @__PURE__ */ jsx23(
+                        "button",
+                        {
+                          type: "button",
+                          disabled: state.isSendingTest,
+                          onClick: () => {
+                            if (state.isSendingTest) return;
+                            state.setIsTestPromptOpen(false);
+                            state.setTestFeedback(null);
+                          },
+                          className: `px-4 py-2 text-xs font-semibold text-slate-600 rounded-xl transition-colors ${state.isSendingTest ? "opacity-50 cursor-not-allowed" : "hover:text-slate-800 hover:bg-slate-200/50 cursor-pointer"}`,
+                          children: "\u05D1\u05D9\u05D8\u05D5\u05DC"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx23(
+                        "button",
+                        {
+                          type: "button",
+                          disabled: !state.testPhoneNumber.trim() || state.isSendingTest || state.isTestDisabled,
+                          onClick: state.handleSendTest,
+                          title: state.testButtonTitle,
+                          className: `px-4 py-2 text-xs font-bold rounded-xl transition-all flex items-center gap-1.5 ${!state.testPhoneNumber.trim() || state.isSendingTest || state.isTestDisabled ? "bg-emerald-600/40 text-white/70 cursor-not-allowed" : "bg-emerald-600 hover:bg-emerald-700 active:scale-[0.98] text-white shadow-xs cursor-pointer"}`,
+                          children: state.isSendingTest ? /* @__PURE__ */ jsxs22(Fragment8, { children: [
+                            /* @__PURE__ */ jsx23(Loader28, { className: "w-3.5 h-3.5 animate-spin" }),
+                            /* @__PURE__ */ jsx23("span", { children: "\u05E9\u05D5\u05DC\u05D7..." })
+                          ] }) : /* @__PURE__ */ jsxs22(Fragment8, { children: [
+                            /* @__PURE__ */ jsx23(Send3, { className: "w-3.5 h-3.5" }),
+                            /* @__PURE__ */ jsx23("span", { children: "\u05E9\u05DC\u05D7 \u05E2\u05DB\u05E9\u05D9\u05D5" })
+                          ] })
+                        }
+                      )
                     ] })
-                  ] }),
-                  /* @__PURE__ */ jsxs19("div", { className: "px-5 py-3.5 bg-slate-50/70 border-t border-slate-100 flex items-center justify-end gap-2", children: [
-                    /* @__PURE__ */ jsx20(
-                      "button",
-                      {
-                        type: "button",
-                        disabled: state.isSendingTest,
-                        onClick: () => {
-                          if (state.isSendingTest) return;
-                          state.setIsTestPromptOpen(false);
-                          state.setTestFeedback(null);
-                        },
-                        className: `px-4 py-2 text-xs font-semibold text-slate-600 rounded-xl transition-colors ${state.isSendingTest ? "opacity-50 cursor-not-allowed" : "hover:text-slate-800 hover:bg-slate-200/50 cursor-pointer"}`,
-                        children: "\u05D1\u05D9\u05D8\u05D5\u05DC"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx20(
-                      "button",
-                      {
-                        type: "button",
-                        disabled: !state.testPhoneNumber.trim() || state.isSendingTest || state.isTestDisabled,
-                        onClick: state.handleSendTest,
-                        title: state.testButtonTitle,
-                        className: `px-4 py-2 text-xs font-bold rounded-xl transition-all flex items-center gap-1.5 ${!state.testPhoneNumber.trim() || state.isSendingTest || state.isTestDisabled ? "bg-emerald-600/40 text-white/70 cursor-not-allowed" : "bg-emerald-600 hover:bg-emerald-700 active:scale-[0.98] text-white shadow-xs cursor-pointer"}`,
-                        children: state.isSendingTest ? /* @__PURE__ */ jsxs19(Fragment8, { children: [
-                          /* @__PURE__ */ jsx20(Loader27, { className: "w-3.5 h-3.5 animate-spin" }),
-                          /* @__PURE__ */ jsx20("span", { children: "\u05E9\u05D5\u05DC\u05D7..." })
-                        ] }) : /* @__PURE__ */ jsxs19(Fragment8, { children: [
-                          /* @__PURE__ */ jsx20(Send2, { className: "w-3.5 h-3.5" }),
-                          /* @__PURE__ */ jsx20("span", { children: "\u05E9\u05DC\u05D7 \u05E2\u05DB\u05E9\u05D9\u05D5" })
-                        ] })
-                      }
-                    )
-                  ] })
-                ]
-              }
-            )
-          }
-        )
+                  ]
+                }
+              )
+            }
+          )
+        ] })
       ]
     }
   );
 }
 
 // src/components/FormBlock/FormBlock.tsx
-import { useState as useState17, useEffect as useEffect15 } from "react";
-import { Loader2 as Loader28, CheckCircle2 as CheckCircle25 } from "lucide-react";
-import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+import { useState as useState19, useEffect as useEffect17 } from "react";
+import { Loader2 as Loader29, CheckCircle2 as CheckCircle25 } from "lucide-react";
+import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
 function FormBlock({ settings: schema, executeAction, componentId, className = "", onSuccess }) {
   const { showError, addToast } = useToast();
-  const [formData, setFormData] = useState17({});
-  const [isSubmitting, setIsSubmitting] = useState17(false);
-  const [isSubmitted, setIsSubmitted] = useState17(false);
-  const [columns, setColumns] = useState17((schema == null ? void 0 : schema.columns) || []);
-  const [isLoadingSchema, setIsLoadingSchema] = useState17(false);
+  const [formData, setFormData] = useState19({});
+  const [isSubmitting, setIsSubmitting] = useState19(false);
+  const [isSubmitted, setIsSubmitted] = useState19(false);
+  const [columns, setColumns] = useState19((schema == null ? void 0 : schema.columns) || []);
+  const [isLoadingSchema, setIsLoadingSchema] = useState19(false);
   const targetTableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
-  useEffect15(() => {
+  useEffect17(() => {
     let isMounted = true;
     if ((!(schema == null ? void 0 : schema.columns) || schema.columns.length === 0) && targetTableId && executeAction) {
       setIsLoadingSchema(true);
@@ -14043,21 +14355,21 @@ function FormBlock({ settings: schema, executeAction, componentId, className = "
     }
   };
   if (isLoadingSchema) {
-    return /* @__PURE__ */ jsxs20("div", { className: "p-8 flex items-center justify-center gap-2 text-slate-500", children: [
-      /* @__PURE__ */ jsx21(Loader28, { className: "w-5 h-5 animate-spin text-brand" }),
-      /* @__PURE__ */ jsx21("span", { className: "text-sm", children: "\u05D8\u05D5\u05E2\u05DF \u05E9\u05D3\u05D5\u05EA \u05D8\u05D5\u05E4\u05E1..." })
+    return /* @__PURE__ */ jsxs23("div", { className: "p-8 flex items-center justify-center gap-2 text-slate-500", children: [
+      /* @__PURE__ */ jsx24(Loader29, { className: "w-5 h-5 animate-spin text-brand" }),
+      /* @__PURE__ */ jsx24("span", { className: "text-sm", children: "\u05D8\u05D5\u05E2\u05DF \u05E9\u05D3\u05D5\u05EA \u05D8\u05D5\u05E4\u05E1..." })
     ] });
   }
   if (!formColumns || formColumns.length === 0) {
-    return /* @__PURE__ */ jsx21("div", { className: "p-4 text-center text-slate-500", children: "\u05DC\u05D0 \u05D4\u05D5\u05D2\u05D3\u05E8\u05D5 \u05E9\u05D3\u05D5\u05EA \u05DC\u05D8\u05D5\u05E4\u05E1 \u05D6\u05D4." });
+    return /* @__PURE__ */ jsx24("div", { className: "p-4 text-center text-slate-500", children: "\u05DC\u05D0 \u05D4\u05D5\u05D2\u05D3\u05E8\u05D5 \u05E9\u05D3\u05D5\u05EA \u05DC\u05D8\u05D5\u05E4\u05E1 \u05D6\u05D4." });
   }
   if (isSubmitted) {
     const customMessage = (schema == null ? void 0 : schema.successMessage) || "\u05EA\u05D5\u05D3\u05D4 \u05E8\u05D1\u05D4! \u05D4\u05E4\u05E8\u05D8\u05D9\u05DD \u05D4\u05EA\u05E7\u05D1\u05DC\u05D5 \u05D1\u05D4\u05E6\u05DC\u05D7\u05D4.";
-    return /* @__PURE__ */ jsxs20("div", { id: componentId, className: `bg-white p-8 rounded-xl shadow-xs border border-slate-200 text-center dir-rtl ${className}`, children: [
-      /* @__PURE__ */ jsx21("div", { className: "w-16 h-16 bg-emerald-50 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4 animate-in zoom-in duration-200", children: /* @__PURE__ */ jsx21(CheckCircle25, { className: "w-8 h-8" }) }),
-      /* @__PURE__ */ jsx21("h3", { className: "text-2xl font-bold text-slate-800 mb-2", children: "\u05D4\u05D5\u05D3\u05E2\u05D4 \u05E0\u05E9\u05DC\u05D7\u05D4" }),
-      /* @__PURE__ */ jsx21("p", { className: "text-slate-600 text-base max-w-md mx-auto whitespace-pre-wrap", children: customMessage }),
-      /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsxs23("div", { id: componentId, className: `bg-white p-8 rounded-xl shadow-xs border border-slate-200 text-center dir-rtl ${className}`, children: [
+      /* @__PURE__ */ jsx24("div", { className: "w-16 h-16 bg-emerald-50 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4 animate-in zoom-in duration-200", children: /* @__PURE__ */ jsx24(CheckCircle25, { className: "w-8 h-8" }) }),
+      /* @__PURE__ */ jsx24("h3", { className: "text-2xl font-bold text-slate-800 mb-2", children: "\u05D4\u05D5\u05D3\u05E2\u05D4 \u05E0\u05E9\u05DC\u05D7\u05D4" }),
+      /* @__PURE__ */ jsx24("p", { className: "text-slate-600 text-base max-w-md mx-auto whitespace-pre-wrap", children: customMessage }),
+      /* @__PURE__ */ jsx24(
         "button",
         {
           type: "button",
@@ -14068,20 +14380,20 @@ function FormBlock({ settings: schema, executeAction, componentId, className = "
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs20("div", { id: componentId, className: `bg-white p-6 rounded-xl shadow-xs border border-slate-200 dir-rtl ${className}`, children: [
-    (schema == null ? void 0 : schema.title) && /* @__PURE__ */ jsx21("h2", { className: "text-xl font-bold text-slate-800 mb-6", children: schema.title }),
-    /* @__PURE__ */ jsxs20("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+  return /* @__PURE__ */ jsxs23("div", { id: componentId, className: `bg-white p-6 rounded-xl shadow-xs border border-slate-200 dir-rtl ${className}`, children: [
+    (schema == null ? void 0 : schema.title) && /* @__PURE__ */ jsx24("h2", { className: "text-xl font-bold text-slate-800 mb-6", children: schema.title }),
+    /* @__PURE__ */ jsxs23("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
       formColumns.map((col) => {
         var _a, _b;
         const colType = ((_a = col.type) == null ? void 0 : _a.toUpperCase()) || "DEFAULT";
         const InputComponent = FORM_INPUTS[colType] || FORM_INPUTS.DEFAULT;
-        return /* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-1.5", children: [
-          /* @__PURE__ */ jsxs20("label", { className: "text-sm font-semibold text-slate-700", children: [
+        return /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsxs23("label", { className: "text-sm font-semibold text-slate-700", children: [
             col.name,
             " ",
-            col.isRequired && /* @__PURE__ */ jsx21("span", { className: "text-rose-500", children: "*" })
+            col.isRequired && /* @__PURE__ */ jsx24("span", { className: "text-rose-500", children: "*" })
           ] }),
-          /* @__PURE__ */ jsx21("div", { className: "border border-slate-200 rounded-lg min-h-[40px] relative", children: /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx24("div", { className: "border border-slate-200 rounded-lg min-h-[40px] relative", children: /* @__PURE__ */ jsx24(
             InputComponent,
             {
               column: col,
@@ -14096,15 +14408,15 @@ function FormBlock({ settings: schema, executeAction, componentId, className = "
           ) })
         ] }, col.name);
       }),
-      /* @__PURE__ */ jsx21("div", { className: "pt-4 border-t border-slate-100 flex justify-end", children: /* @__PURE__ */ jsxs20(
+      /* @__PURE__ */ jsx24("div", { className: "pt-4 border-t border-slate-100 flex justify-end", children: /* @__PURE__ */ jsxs23(
         "button",
         {
           type: "submit",
           disabled: isSubmitting,
           className: "flex items-center gap-2 px-6 py.2.5 bg-brand hover:bg-brand-hover text-white font-bold rounded-lg shadow-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
           children: [
-            isSubmitting && /* @__PURE__ */ jsx21(Loader28, { className: "w-4 h-4 animate-spin" }),
-            /* @__PURE__ */ jsx21("span", { children: isSubmitting ? "\u05E9\u05D5\u05DE\u05E8..." : "\u05E9\u05DC\u05D9\u05D7\u05D4" })
+            isSubmitting && /* @__PURE__ */ jsx24(Loader29, { className: "w-4 h-4 animate-spin" }),
+            /* @__PURE__ */ jsx24("span", { children: isSubmitting ? "\u05E9\u05D5\u05DE\u05E8..." : "\u05E9\u05DC\u05D9\u05D7\u05D4" })
           ]
         }
       ) })