@universe-platform/ui 0.1.0-beta.11 → 0.1.0-beta.14

package/dist/index.js

@@ -83,6 +83,7 @@ __export(src_exports, {
   formatTimeInput: () => formatTimeInput,
   formatTimeIso: () => formatTimeIso,
   getDeterministicPastelBadge: () => getDeterministicPastelBadge,
+  getRolePermissions: () => getRolePermissions,
   isTextRepresentable: () => isTextRepresentable,
   measureTextWidth: () => measureTextWidth,
   normalizeRelationValue: () => normalizeRelationValue,
@@ -165,6 +166,30 @@ function getDeterministicPastelBadge(key) {
   return PASTEL_PALETTES[index];
 }
 
+// src/utils/permissions.ts
+function getRolePermissions(role) {
+  if (role === "VIEWER" || !role) {
+    return {
+      permissions: {
+        canCreate: false,
+        canRead: true,
+        canUpdate: false,
+        canDelete: false
+      },
+      readOnly: true
+    };
+  }
+  return {
+    permissions: {
+      canCreate: true,
+      canRead: true,
+      canUpdate: true,
+      canDelete: true
+    },
+    readOnly: false
+  };
+}
+
 // ../shared/src/columns.ts
 var COLUMN_TYPES = [
   "STRING",
@@ -442,7 +467,7 @@ var import_react8 = __toESM(require("react"));
 var import_react3 = __toESM(require("react"));
 var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function DrivePickerCell({ value, onChange, tableName, column, rowId, onMarkForDeletion, context }) {
+function DrivePickerCell({ value, onChange, tableName, column, rowId, onMarkForDeletion, context, readOnly = false }) {
   const [isOpening, setIsOpening] = (0, import_react3.useState)(false);
   const { showError } = useToast();
   const cellContextId = import_react3.default.useMemo(() => {
@@ -543,29 +568,33 @@ function DrivePickerCell({ value, onChange, tableName, column, rowId, onMarkForD
     const updated = fileList.filter((_, idx) => idx !== indexToRemove);
     onChange(updated);
   };
-  const renderUploadButton = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center w-full h-8 px-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "button",
-    {
-      type: "button",
-      onClick: openUploadPopup,
-      disabled: isOpening || !(context == null ? void 0 : context.executeAction),
-      className: "inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium text-slate-500 bg-slate-100 hover:bg-slate-200 hover:text-slate-700 transition-colors disabled:opacity-50",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Upload, { className: "w-3.5 h-3.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: isOpening ? "Loading..." : "Upload File" })
-      ]
-    }
-  ) });
+  const renderUploadButton = (iconOnly) => {
+    if (readOnly) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: openUploadPopup,
+        disabled: isOpening || !(context == null ? void 0 : context.executeAction),
+        className: `inline-flex items-center justify-center gap-1.5 rounded-md text-xs font-medium text-slate-500 bg-slate-100 hover:bg-slate-200 hover:text-slate-700 transition-colors disabled:opacity-50 ${iconOnly ? "w-7 h-7 shrink-0" : "px-2 py-1"}`,
+        title: "Upload File",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Upload, { className: "w-3.5 h-3.5 shrink-0" }),
+          !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "truncate", children: isOpening ? "Loading..." : "Upload File" })
+        ]
+      }
+    );
+  };
   if (fileList.length > 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col w-full py-1 gap-1", children: [
-      fileList.map((file, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center w-full h-8 px-2 gap-1", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-wrap items-center w-full py-1 px-2 gap-1.5", children: [
+      fileList.map((file, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-1 max-w-full", children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
           "a",
           {
             href: file.fileUrl || file.url,
             target: "_blank",
             rel: "noopener noreferrer",
-            className: "inline-flex items-center gap-1.5 max-w-[calc(100%-24px)] px-2 py-1 rounded-md text-xs font-medium text-blue-700 bg-blue-50 hover:bg-blue-100 transition-colors truncate",
+            className: `inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium text-blue-700 bg-blue-50 hover:bg-blue-100 transition-colors truncate ${readOnly ? "max-w-full" : "max-w-[calc(100%-28px)]"}`,
             title: file.fileName || "Open file",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.FileText, { className: "w-3.5 h-3.5 shrink-0" }),
@@ -573,21 +602,24 @@ function DrivePickerCell({ value, onChange, tableName, column, rowId, onMarkForD
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        !readOnly && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "button",
           {
             type: "button",
             onClick: () => handleRemoveFile(idx),
-            className: "shrink-0 p-0.5 rounded hover:bg-rose-100 text-slate-400 hover:text-rose-500 transition-colors",
+            className: "shrink-0 inline-flex items-center justify-center w-6 h-6 rounded hover:bg-rose-100 text-slate-400 hover:text-rose-500 transition-colors",
             title: "Remove file",
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.X, { className: "w-3.5 h-3.5" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.X, { className: "w-3.5 h-3.5 shrink-0" })
           }
         )
       ] }, file.fileId || idx)),
-      renderUploadButton()
+      renderUploadButton(true)
     ] });
   }
-  return renderUploadButton();
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "px-2 py-1 flex items-center h-full text-slate-300 text-xs italic", children: "-" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center w-full h-8 px-2", children: renderUploadButton(false) });
 }
 
 // src/components/TableBlock/fields/DatePickerCell.tsx
@@ -2154,11 +2186,19 @@ function getCurrencySymbol(code) {
   return CURRENCY_SYMBOLS[code.toUpperCase()] || code;
 }
 var FORM_INPUTS = {
-  DATE: ({ value, onChange, column }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerCell, { value, onChange, column }),
-  CURRENCY: ({ value, column, onChange }) => {
+  DATE: ({ value, onChange, column, readOnly }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerCell, { value, onChange, column, readOnly }),
+  CURRENCY: ({ value, column, onChange, readOnly }) => {
     var _a;
     const symbol = getCurrencySymbol((_a = column.config) == null ? void 0 : _a.currencySymbol);
     const [isFocused, setIsFocused] = import_react8.default.useState(false);
+    if (readOnly) {
+      const num = Number(value);
+      const formattedValue = value !== null && value !== void 0 && !isNaN(num) ? new Intl.NumberFormat("en-US").format(num) : "";
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "px-2 py-1 flex items-center h-full text-sm select-text truncate", children: [
+        symbol && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-slate-400 mr-1", children: symbol }),
+        formattedValue
+      ] });
+    }
     const displayValue = !isFocused && value !== void 0 && value !== null && !isNaN(Number(value)) ? new Intl.NumberFormat("en-US").format(Number(value)) : value !== void 0 && value !== null ? value : "";
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative w-full h-full", children: [
       symbol && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "absolute left-2 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none text-sm", children: symbol }),
@@ -2179,18 +2219,19 @@ var FORM_INPUTS = {
       )
     ] });
   },
-  TIME: ({ value, onChange, column }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TimePickerCell, { value, onChange, column }),
-  LINK: ({ value, onChange, column }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LinkPickerCell, { value, onChange, column }),
-  BOOLEAN: ({ value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-center justify-center w-full h-full p-2", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  TIME: ({ value, onChange, column, readOnly }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TimePickerCell, { value, onChange, column, readOnly }),
+  LINK: ({ value, onChange, column, readOnly }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LinkPickerCell, { value, onChange, column, readOnly }),
+  BOOLEAN: ({ value, onChange, readOnly }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-center justify-center w-full h-full p-2", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "input",
     {
       type: "checkbox",
       checked: !!value,
+      disabled: readOnly,
       onChange: (e) => onChange(e.target.checked),
-      className: "w-4 h-4 rounded border-slate-300 text-brand"
+      className: `w-4 h-4 rounded border-slate-300 text-brand ${readOnly ? "cursor-not-allowed opacity-70" : "cursor-pointer"}`
     }
   ) }),
-  GOOGLE_DRIVE_FILE: ({ value, onChange, column, rowId, context }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  GOOGLE_DRIVE_FILE: ({ value, onChange, column, rowId, context, readOnly }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     DrivePickerCell,
     {
       value: value || [],
@@ -2199,34 +2240,60 @@ var FORM_INPUTS = {
       rowId,
       tableName: context == null ? void 0 : context.tableName,
       onMarkForDeletion: context == null ? void 0 : context.onMarkForDeletion,
-      context
+      context,
+      readOnly
     }
   ),
-  RELATION: ({ value, onChange, column, context, rowId }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  RELATION: ({ value, onChange, column, context, rowId, readOnly }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     RelationPickerCell,
     {
       value,
       onChange,
       column,
       context,
-      rowId
+      rowId,
+      readOnly
     }
   ),
-  NUMBER: ({ value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "input",
-    {
-      type: "number",
-      className: "w-full h-8 px-2 bg-transparent focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-400 text-sm",
-      value: value !== void 0 && value !== null ? value : "",
-      onChange: (e) => {
-        const val = e.target.value;
-        onChange(val === "" ? null : Number(val));
-      }
+  NUMBER: ({ value, onChange, readOnly }) => {
+    if (readOnly) {
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "px-2 py-1 flex items-center h-full text-sm select-text truncate", children: value !== void 0 && value !== null ? value : "" });
     }
-  ),
-  PHONE: ({ value, onChange, column }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "input",
+      {
+        type: "number",
+        className: "w-full h-8 px-2 bg-transparent focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-400 text-sm",
+        value: value !== void 0 && value !== null ? value : "",
+        onChange: (e) => {
+          const val = e.target.value;
+          onChange(val === "" ? null : Number(val));
+        }
+      }
+    );
+  },
+  PHONE: ({ value, onChange, column, readOnly }) => {
     var _a;
     const enableWhatsApp = (_a = column == null ? void 0 : column.config) == null ? void 0 : _a.enableWhatsApp;
+    const formatted = value ? formatPhoneDisplay(String(value)) : "";
+    if (readOnly) {
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between w-full h-full px-2 gap-1.5 overflow-hidden", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "truncate text-sm", dir: "ltr", children: formatted }),
+        enableWhatsApp && value && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "text-emerald-500 cursor-pointer hover:opacity-80 transition-opacity shrink-0 p-1 rounded hover:bg-emerald-50",
+            title: "\u05E4\u05EA\u05D9\u05D7\u05EA \u05D5\u05D5\u05D0\u05D8\u05E1\u05D0\u05E4",
+            onClick: (e) => {
+              e.stopPropagation();
+              openWhatsAppChat(String(value));
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a5.816 5.816 0 00-.571-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) })
+          }
+        )
+      ] });
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center w-full h-full px-2 gap-1.5 overflow-hidden", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "input",
@@ -2253,85 +2320,9 @@ var FORM_INPUTS = {
       )
     ] });
   },
-  GOOGLE_CONTACT: ({ value, column, rowId, onChange, context }) => {
+  GOOGLE_CONTACT: ({ value, column, rowId, onChange, context, readOnly }) => {
     const [isSyncing, setIsSyncing] = import_react8.default.useState(false);
     const { addToast } = useToast();
-    const googleClientIdRef = import_react8.default.useRef(null);
-    const ensureGisScript = import_react8.default.useCallback(() => {
-      return new Promise((resolve, reject) => {
-        var _a, _b, _c;
-        if ((_c = (_b = (_a = window.google) == null ? void 0 : _a.accounts) == null ? void 0 : _b.oauth2) == null ? void 0 : _c.initTokenClient) {
-          resolve();
-          return;
-        }
-        if (document.querySelector('script[src*="accounts.google.com/gsi/client"]')) {
-          const waitForLoad = setInterval(() => {
-            var _a2, _b2, _c2;
-            if ((_c2 = (_b2 = (_a2 = window.google) == null ? void 0 : _a2.accounts) == null ? void 0 : _b2.oauth2) == null ? void 0 : _c2.initTokenClient) {
-              clearInterval(waitForLoad);
-              resolve();
-            }
-          }, 100);
-          setTimeout(() => {
-            clearInterval(waitForLoad);
-            reject(new Error("GIS script load timeout"));
-          }, 1e4);
-          return;
-        }
-        const script = document.createElement("script");
-        script.src = "https://accounts.google.com/gsi/client";
-        script.async = true;
-        script.onload = () => resolve();
-        script.onerror = () => reject(new Error("Failed to load Google Identity Services"));
-        document.head.appendChild(script);
-      });
-    }, []);
-    const requestGisToken = import_react8.default.useCallback(async (hint) => {
-      await ensureGisScript();
-      if (!googleClientIdRef.current && (context == null ? void 0 : context.executeAction)) {
-        try {
-          const config = await context.executeAction("GET_GOOGLE_CONFIG", {});
-          googleClientIdRef.current = (config == null ? void 0 : config.clientId) || "";
-        } catch (e) {
-          throw new Error("Failed to fetch Google configuration");
-        }
-      }
-      const clientId = googleClientIdRef.current;
-      if (!clientId) {
-        throw new Error("Google Client ID is not configured");
-      }
-      const accessToken = await new Promise((resolve, reject) => {
-        const tokenClient = window.google.accounts.oauth2.initTokenClient({
-          client_id: clientId,
-          scope: "https://www.googleapis.com/auth/contacts https://www.googleapis.com/auth/userinfo.email",
-          prompt: hint ? "" : "select_account",
-          hint: hint || void 0,
-          callback: (tokenResponse) => {
-            if (tokenResponse == null ? void 0 : tokenResponse.access_token) {
-              resolve(tokenResponse.access_token);
-            } else {
-              reject(new Error("Google authorization was cancelled or failed"));
-            }
-          },
-          error_callback: (err) => {
-            reject(new Error((err == null ? void 0 : err.message) || "Google authorization error"));
-          }
-        });
-        tokenClient.requestAccessToken({ hint: hint || void 0 });
-      });
-      let email = "";
-      try {
-        const res = await fetch("https://www.googleapis.com/oauth2/v3/userinfo", {
-          headers: { Authorization: `Bearer ${accessToken}` }
-        });
-        if (res.ok) {
-          const info = await res.json();
-          email = info.email || "";
-        }
-      } catch (e) {
-      }
-      return { accessToken, email };
-    }, [ensureGisScript, context]);
     const handleSync = async () => {
       var _a, _b, _c, _d, _e, _f;
       if (!(context == null ? void 0 : context.executeAction)) return;
@@ -2366,17 +2357,6 @@ var FORM_INPUTS = {
           setIsSyncing(false);
           return;
         }
-        let accessToken;
-        let userEmail = "";
-        try {
-          const gisResult = await requestGisToken();
-          accessToken = gisResult.accessToken;
-          userEmail = gisResult.email;
-        } catch (gisError) {
-          addToast({ type: "warning", message: gisError.message || "\u05D4\u05D4\u05E8\u05E9\u05D0\u05D4 \u05DC\u05D2\u05D5\u05D2\u05DC \u05E0\u05DB\u05E9\u05DC\u05D4" });
-          setIsSyncing(false);
-          return;
-        }
         const payload = {
           nameParts: mapping.nameParts || [],
           phoneCol: mapping.phoneCol,
@@ -2386,9 +2366,7 @@ var FORM_INPUTS = {
           tableMetaId: targetTableMetaId,
           tableId: targetTableMetaId,
           recordId: rowId,
-          orgId: targetOrgId,
-          accessToken,
-          userEmail
+          orgId: targetOrgId
         };
         const res = await context.executeAction("SYNC_GOOGLE_CONTACT", payload);
         if (res && res.synced) {
@@ -2408,39 +2386,44 @@ var FORM_INPUTS = {
           }
         }
       } catch (error) {
-        console.error("Failed to sync contact:", error);
-        addToast({ type: "warning", message: "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E1\u05E0\u05DB\u05E8\u05D5\u05DF \u05D0\u05D9\u05E9 \u05E7\u05E9\u05E8: " + error.message });
+        const errorMessage = (error == null ? void 0 : error.message) || (error == null ? void 0 : error.error) || (typeof error === "string" ? error : "");
+        if (errorMessage.includes("OAUTH_REQUIRED") || errorMessage.includes("Access Denied") || errorMessage.includes("No refresh token")) {
+          addToast({
+            type: "warning",
+            message: "\u05D8\u05E8\u05DD \u05D4\u05D5\u05D2\u05D3\u05E8 \u05D7\u05E9\u05D1\u05D5\u05DF \u05D2\u05D5\u05D2\u05DC \u05D0\u05E8\u05D2\u05D5\u05E0\u05D9. \u05D9\u05E9 \u05DC\u05E4\u05E0\u05D5\u05EA \u05DC\u05DE\u05E0\u05D4\u05DC \u05D4\u05DE\u05E2\u05E8\u05DB\u05EA \u05DC\u05D7\u05D9\u05D1\u05D5\u05E8 \u05D4\u05D7\u05E9\u05D1\u05D5\u05DF \u05D1\u05D4\u05D2\u05D3\u05E8\u05D5\u05EA \u05D4\u05D0\u05E8\u05D2\u05D5\u05DF."
+          });
+        } else {
+          console.error("Failed to sync contact:", error);
+          addToast({
+            type: "warning",
+            message: "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E1\u05E0\u05DB\u05E8\u05D5\u05DF \u05D0\u05D9\u05E9 \u05E7\u05E9\u05E8: " + error.message
+          });
+        }
       } finally {
         setIsSyncing(false);
       }
     };
     const handleUnlink = async () => {
-      let accessToken;
       const targetTableMetaId = (context == null ? void 0 : context.tableMetaId) || (context == null ? void 0 : context.tableId);
       const targetOrgId = context == null ? void 0 : context.orgId;
       try {
-        let emailHint = value == null ? void 0 : value.userEmail;
-        if (!emailHint && (value == null ? void 0 : value.url)) {
-          try {
-            const parsed = new URL(value.url);
-            emailHint = parsed.searchParams.get("authuser") || void 0;
-          } catch (e) {
-          }
+        if ((value == null ? void 0 : value.resourceName) && (context == null ? void 0 : context.executeAction)) {
+          await context.executeAction("DELETE_GOOGLE_CONTACT", {
+            resourceName: value.resourceName,
+            tableMetaId: targetTableMetaId,
+            tableId: targetTableMetaId,
+            recordId: rowId,
+            orgId: targetOrgId
+          });
         }
-        const auth = await requestGisToken(emailHint);
-        accessToken = auth.accessToken;
-      } catch (err) {
-        console.warn("[handleUnlink] Could not obtain token via GIS, falling back to server default token:", err);
-      }
-      if ((value == null ? void 0 : value.resourceName) && (context == null ? void 0 : context.executeAction)) {
-        await context.executeAction("DELETE_GOOGLE_CONTACT", {
-          resourceName: value.resourceName,
-          accessToken,
-          tableMetaId: targetTableMetaId,
-          tableId: targetTableMetaId,
-          recordId: rowId,
-          orgId: targetOrgId
-        });
+      } catch (error) {
+        if (error.message === "OAUTH_REQUIRED" || error.error === "OAUTH_REQUIRED") {
+          addToast({ type: "warning", message: "\u05D8\u05E8\u05DD \u05D4\u05D5\u05D2\u05D3\u05E8 \u05D7\u05E9\u05D1\u05D5\u05DF \u05D2\u05D5\u05D2\u05DC \u05D0\u05E8\u05D2\u05D5\u05E0\u05D9. \u05D9\u05E9 \u05DC\u05E4\u05E0\u05D5\u05EA \u05DC\u05DE\u05E0\u05D4\u05DC \u05D4\u05DE\u05E2\u05E8\u05DB\u05EA \u05DC\u05D7\u05D9\u05D1\u05D5\u05E8 \u05D4\u05D7\u05E9\u05D1\u05D5\u05DF \u05D1\u05D4\u05D2\u05D3\u05E8\u05D5\u05EA \u05D4\u05D0\u05E8\u05D2\u05D5\u05DF." });
+          return;
+        }
+        console.error("Failed to unlink contact:", error);
+        addToast({ type: "warning", message: "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05D4\u05E1\u05E8\u05EA \u05D0\u05D9\u05E9 \u05E7\u05E9\u05E8: " + error.message });
+        return;
       }
       if (context == null ? void 0 : context.updateQuietly) {
         context.updateQuietly(rowId, column.name, null);
@@ -2460,7 +2443,7 @@ var FORM_INPUTS = {
     if (value && value.synced && value.url) {
       return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1.5 h-8 px-2 group whitespace-nowrap overflow-hidden max-w-full", children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("a", { href: value.url, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:underline flex-1 truncate text-xs whitespace-nowrap", children: "\u05D0\u05D9\u05E9 \u05E7\u05E9\u05E8 \u05D2\u05D5\u05D2\u05DC" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        !readOnly && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "button",
           {
             type: "button",
@@ -2472,6 +2455,9 @@ var FORM_INPUTS = {
         )
       ] });
     }
+    if (readOnly) {
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "px-2 py-1 flex items-center h-full text-slate-300 text-xs italic", children: "\u05DC\u05D0 \u05DE\u05E1\u05D5\u05E0\u05DB\u05E8\u05DF" });
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-center h-8 px-2 whitespace-nowrap overflow-hidden max-w-full", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "button",
       {
@@ -2489,15 +2475,20 @@ var FORM_INPUTS = {
       }
     ) });
   },
-  DEFAULT: ({ value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "input",
-    {
-      type: "text",
-      className: "w-full h-8 px-2 bg-transparent focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-400 text-sm",
-      value: value !== void 0 && value !== null ? String(value) : "",
-      onChange: (e) => onChange(e.target.value)
+  DEFAULT: ({ value, onChange, readOnly }) => {
+    if (readOnly) {
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "px-2 py-1 flex items-center h-full text-sm select-text truncate", children: value !== void 0 && value !== null ? String(value) : "" });
     }
-  ),
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "input",
+      {
+        type: "text",
+        className: "w-full h-8 px-2 bg-transparent focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-400 text-sm",
+        value: value !== void 0 && value !== null ? String(value) : "",
+        onChange: (e) => onChange(e.target.value)
+      }
+    );
+  },
   SUB_TABLE: ({ value, column }) => {
     var _a, _b, _c;
     if (!Array.isArray(value)) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "px-2 py-1 flex items-center h-full text-slate-300 text-xs italic", children: "\u05E8\u05D9\u05E7" });
@@ -2907,7 +2898,8 @@ function SubTableCell({
   refetchRelation,
   onCommit,
   onQuietUpdate,
-  width
+  width,
+  readOnly
 }) {
   var _a, _b, _c, _d, _e;
   const colType = ((_a = column.type) == null ? void 0 : _a.toUpperCase()) || "DEFAULT";
@@ -2942,6 +2934,7 @@ function SubTableCell({
     }
   }, [serverValue]);
   const commit = (0, import_react12.useCallback)(async (valToCommit) => {
+    if (readOnly) return true;
     if (isCommittingRef.current) return false;
     if (!isDirtyRef.current) return true;
     if (valToCommit === serverValueRef.current) {
@@ -3058,7 +3051,9 @@ function SubTableCell({
           column,
           rowId: record.id,
           onChange: handleChange,
+          readOnly,
           context: __spreadProps(__spreadValues({}, context), {
+            readOnly,
             tableName: (targetSchema == null ? void 0 : targetSchema.name) || (targetSchema == null ? void 0 : targetSchema.tableName) || (targetSchema == null ? void 0 : targetSchema.title) || (targetSchema == null ? void 0 : targetSchema.id) || "Table",
             relationOptions,
             updateRelationOptions: (name, opts) => setRelationOptions((prev) => __spreadProps(__spreadValues({}, prev), { [name]: opts })),
@@ -3088,8 +3083,9 @@ function SubTableCell({
     }
   );
 }
-function SubTableViewer({ rowId, column, value, onChange, context }) {
+function SubTableViewer({ rowId, column, value, onChange, context, readOnly }) {
   var _a, _b, _c, _d, _e, _f;
+  const isReadOnly = readOnly != null ? readOnly : Boolean(context == null ? void 0 : context.readOnly);
   const { addToast } = useToast();
   const entries = Array.isArray(value) ? value : [];
   const [linkedRecords, setLinkedRecords] = (0, import_react12.useState)(() => {
@@ -3616,7 +3612,7 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "p-3 animate-in fade-in slide-in-from-top-2 duration-200", dir: "rtl", children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-4 mb-2.5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-bold text-slate-600", children: (_e = targetSchema == null ? void 0 : targetSchema.name) != null ? _e : (_d = column.config) == null ? void 0 : _d.referencedTableName }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+      !isReadOnly && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative", ref: searchRef, children: [
           /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
             "button",
@@ -3681,13 +3677,13 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
         )
       ] })
     ] }),
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "w-5 h-5 border-2 border-blue-400 border-t-transparent rounded-full animate-spin" }) }) : entries.length === 0 && !isCreating ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-center py-6 text-xs text-slate-400", children: "\u05D0\u05D9\u05DF \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05DE\u05E7\u05D5\u05E9\u05E8\u05D5\u05EA. \u05D4\u05E9\u05EA\u05DE\u05E9 \u05D1\u05D7\u05D9\u05E4\u05D5\u05E9 \u05DB\u05D3\u05D9 \u05DC\u05E7\u05E9\u05E8 \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05E7\u05D9\u05D9\u05DE\u05D5\u05EA, \u05D0\u05D5 \u05D4\u05D5\u05E1\u05E3 \u05E8\u05E9\u05D5\u05DE\u05D4 \u05D7\u05D3\u05E9\u05D4." }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "overflow-x-auto pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("table", { className: "w-full text-xs border-collapse table-auto", children: [
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "w-5 h-5 border-2 border-blue-400 border-t-transparent rounded-full animate-spin" }) }) : entries.length === 0 && !isCreating ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-center py-6 text-xs text-slate-400", children: isReadOnly ? "\u05D0\u05D9\u05DF \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05DE\u05E7\u05D5\u05E9\u05E8\u05D5\u05EA \u05DC\u05D4\u05E6\u05D2\u05D4." : "\u05D0\u05D9\u05DF \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05DE\u05E7\u05D5\u05E9\u05E8\u05D5\u05EA. \u05D4\u05E9\u05EA\u05DE\u05E9 \u05D1\u05D7\u05D9\u05E4\u05D5\u05E9 \u05DB\u05D3\u05D9 \u05DC\u05E7\u05E9\u05E8 \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05E7\u05D9\u05D9\u05DE\u05D5\u05EA, \u05D0\u05D5 \u05D4\u05D5\u05E1\u05E3 \u05E8\u05E9\u05D5\u05DE\u05D4 \u05D7\u05D3\u05E9\u05D4." }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "overflow-x-auto pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("table", { className: "w-full text-xs border-collapse table-auto", children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("tr", { className: "bg-slate-100/80 h-12 min-h-[48px]", children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("th", { className: "border border-slate-200 px-2 py-1.5 text-center w-10 font-semibold text-slate-500 h-12 min-h-[48px] align-middle", style: { width: 40, minWidth: 40, maxWidth: 40 }, children: "\u05E0\u05D1\u05D7\u05E8" }),
         targetColumns.map((col) => {
-          const dragProps = getHeaderDragProps(col.name);
-          const isDragging = draggedColName === col.name;
-          const isDragOver = dragOverColName === col.name;
+          const dragProps = isReadOnly ? {} : getHeaderDragProps(col.name);
+          const isDragging = !isReadOnly && draggedColName === col.name;
+          const isDragOver = !isReadOnly && dragOverColName === col.name;
           const colMinWidth = calculateMinColumnWidth(col.name, true, col.type);
           const currentWidth = Math.max(colMinWidth, columnWidths[col.name] || 150);
           return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
@@ -3696,7 +3692,7 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
               style: { width: currentWidth, minWidth: currentWidth, maxWidth: currentWidth },
               title: col.name
             }, dragProps), {
-              className: `relative border border-slate-200 px-3 py-1.5 font-semibold text-slate-600 select-none cursor-grab active:cursor-grabbing transition-colors h-12 min-h-[48px] align-middle ${isDragging ? "opacity-40 bg-slate-200 border-dashed border-2 border-brand" : ""} ${isDragOver ? "bg-blue-50 border-r-4 border-r-brand text-brand font-bold" : "hover:bg-slate-200/60"}`,
+              className: `relative border border-slate-200 px-3 py-1.5 font-semibold text-slate-600 select-none ${isReadOnly ? "cursor-default" : "cursor-grab active:cursor-grabbing"} transition-colors h-12 min-h-[48px] align-middle ${isDragging ? "opacity-40 bg-slate-200 border-dashed border-2 border-brand" : ""} ${isDragOver ? "bg-blue-50 border-r-4 border-r-brand text-brand font-bold" : isReadOnly ? "" : "hover:bg-slate-200/60"}`,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "div",
@@ -3712,7 +3708,7 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between gap-1.5 group overflow-hidden w-full", title: col.name, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColumnHeaderTitle, { name: col.name, width: currentWidth, isSubTable: true }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  !isReadOnly && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     "svg",
                     {
                       className: "w-3.5 h-3.5 text-slate-400 opacity-40 group-hover:opacity-100 transition-opacity shrink-0 cursor-grab",
@@ -3741,8 +3737,9 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
               {
                 type: "checkbox",
                 checked: entry.isSelected,
+                disabled: isReadOnly,
                 onChange: () => handleToggleSelected(entry.recordId),
-                className: "w-3.5 h-3.5 rounded border-slate-300 text-blue-600 cursor-pointer"
+                className: `w-3.5 h-3.5 rounded border-slate-300 text-blue-600 ${isReadOnly ? "cursor-not-allowed opacity-60" : "cursor-pointer"}`
               }
             ) }),
             targetColumns.map((col) => {
@@ -3772,7 +3769,8 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
                   refetchRelation,
                   onCommit: handleCommitRecordCell,
                   onQuietUpdate: handleQuietSubTableCellChange,
-                  width: currentWidth
+                  width: currentWidth,
+                  readOnly: isReadOnly
                 },
                 `${record.id}_${col.name}`
               );
@@ -3799,7 +3797,7 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
                 }
                 return null;
               })(),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              !isReadOnly && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "button",
                 {
                   type: "button",
@@ -3816,7 +3814,7 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
             /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { className: "border border-slate-200 bg-white pointer-events-none" })
           ] }, entry.recordId);
         }),
-        isCreating && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("tr", { className: "bg-emerald-50/40", children: [
+        isCreating && !isReadOnly && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("tr", { className: "bg-emerald-50/40", children: [
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { className: "border border-emerald-200 px-2 py-1 text-center", style: { width: 40, minWidth: 40, maxWidth: 40 }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-emerald-500 font-bold text-[10px]", children: "\u05D7\u05D3\u05E9" }) }),
           targetColumns.map((col) => {
             var _a2, _b2, _c2, _d2, _e2;
@@ -4331,10 +4329,21 @@ function TableBlockClient({
   componentId,
   orgId,
   className = "",
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  role,
+  permissions,
+  readOnly
 }) {
   const { showError, addToast } = useToast();
   const [isExporting, setIsExporting] = (0, import_react14.useState)(false);
+  const resolvedRole = role ? getRolePermissions(role) : void 0;
+  const effectivePermissions = permissions || (resolvedRole == null ? void 0 : resolvedRole.permissions) || {
+    canCreate: !readOnly,
+    canRead: true,
+    canUpdate: !readOnly,
+    canDelete: !readOnly
+  };
+  const effectiveReadOnly = readOnly != null ? readOnly : resolvedRole ? resolvedRole.readOnly : !effectivePermissions.canUpdate && !effectivePermissions.canCreate && !effectivePermissions.canDelete;
   const tableKey = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id) || (schema == null ? void 0 : schema.name) || "default";
   const { columnWidths, startResize } = useColumnResize({
     storageKey: `table_widths_${tableKey}`,
@@ -4345,6 +4354,10 @@ function TableBlockClient({
       return calculateMinColumnWidth(colName, false, col == null ? void 0 : col.type);
     }
   });
+  const executeActionRef = (0, import_react14.useRef)(executeAction);
+  (0, import_react14.useEffect)(() => {
+    executeActionRef.current = executeAction;
+  }, [executeAction]);
   const [isMounted, setIsMounted] = (0, import_react14.useState)(false);
   const [isInitialLoading, setIsInitialLoading] = (0, import_react14.useState)(true);
   const [page, setPage] = (0, import_react14.useState)(1);
@@ -4447,6 +4460,7 @@ function TableBlockClient({
   }, []);
   const [data, setData] = (0, import_react14.useState)(() => normalizeRecords(initialRecords));
   const [serverRecords, setServerRecords] = (0, import_react14.useState)(() => normalizeRecords(initialRecords));
+  const filteredData = data;
   (0, import_react14.useEffect)(() => {
     if (initialRecords) {
       const norm = normalizeRecords(initialRecords);
@@ -4484,6 +4498,8 @@ function TableBlockClient({
   const [relationTriggerRect, setRelationTriggerRect] = (0, import_react14.useState)(null);
   const filterButtonRefs = (0, import_react14.useRef)({});
   const [relationOptions, setRelationOptions] = (0, import_react14.useState)({});
+  const [relationFilterOptions, setRelationFilterOptions] = (0, import_react14.useState)({});
+  const [loadingFilterCol, setLoadingFilterCol] = (0, import_react14.useState)(null);
   const relationDictionaryRef = (0, import_react14.useRef)({});
   const mergeRelationOptions = (0, import_react14.useCallback)((colName, newOptions) => {
     if (!Array.isArray(newOptions) || newOptions.length === 0) return;
@@ -4548,7 +4564,8 @@ function TableBlockClient({
   const fetchRequestIdRef = (0, import_react14.useRef)(0);
   const fetchTableData = (0, import_react14.useCallback)((targetPage, targetLimit, targetSearch, targetFiltersKey) => {
     const tableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
-    if (!tableId || !executeAction) return Promise.resolve();
+    const action = executeActionRef.current;
+    if (!tableId || !action) return Promise.resolve();
     const currentRequestId = ++fetchRequestIdRef.current;
     setIsFetching(true);
     let activeFilters = {};
@@ -4557,7 +4574,7 @@ function TableBlockClient({
     } catch (e) {
     }
     const skip = (targetPage - 1) * targetLimit;
-    return executeAction("FETCH_TABLE_DATA", {
+    return action("FETCH_TABLE_DATA", {
       tableId,
       page: targetPage,
       limit: targetLimit,
@@ -4606,7 +4623,7 @@ function TableBlockClient({
         setIsInitialLoading(false);
       }
     });
-  }, [schema == null ? void 0 : schema.tableMetaId, schema == null ? void 0 : schema.tableId, schema == null ? void 0 : schema.id, executeAction, mergeColumnDefs, mergeWithDirty, mergeRelationOptions]);
+  }, [schema == null ? void 0 : schema.tableMetaId, schema == null ? void 0 : schema.tableId, schema == null ? void 0 : schema.id, mergeColumnDefs, mergeWithDirty, mergeRelationOptions]);
   (0, import_react14.useEffect)(() => {
     fetchTableData(page, limit, debouncedSearch, filtersKey);
   }, [page, limit, debouncedSearch, filtersKey, fetchTableData]);
@@ -4684,6 +4701,42 @@ function TableBlockClient({
     }
     return [];
   }, [schemaColsString, executeAction, mergeRelationOptions]);
+  const fetchRelationFilterOptions = (0, import_react14.useCallback)(async (colName) => {
+    var _a;
+    let parsedCols = [];
+    try {
+      parsedCols = JSON.parse(schemaColsString);
+    } catch (e) {
+    }
+    const col = parsedCols.find((c) => {
+      var _a2;
+      return c.name === colName && ((_a2 = c.type) == null ? void 0 : _a2.toUpperCase()) === "RELATION";
+    });
+    if (!col || !((_a = col.config) == null ? void 0 : _a.referencedTableId) || !executeAction) return;
+    const currentTableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
+    setLoadingFilterCol(colName);
+    try {
+      const res = await executeAction("FETCH_RELATION", {
+        referencedTableId: col.config.referencedTableId,
+        currentTableId,
+        columnName: colName,
+        isFilter: true,
+        displayField: col.config.displayField,
+        take: 1e3
+      });
+      const list = Array.isArray(res) ? res : (res == null ? void 0 : res.data) && Array.isArray(res.data) ? res.data : [];
+      setRelationFilterOptions((prev) => __spreadProps(__spreadValues({}, prev), {
+        [colName]: list
+      }));
+      if (list.length > 0) {
+        mergeRelationOptions(colName, list);
+      }
+    } catch (err) {
+      console.warn(`[TableBlock] Failed to fetch distinct relation filter options for ${colName}:`, err);
+    } finally {
+      setLoadingFilterCol(null);
+    }
+  }, [schemaColsString, schema == null ? void 0 : schema.tableMetaId, schema == null ? void 0 : schema.tableId, schema == null ? void 0 : schema.id, executeAction, mergeRelationOptions]);
   const requestedRelationIdsRef = (0, import_react14.useRef)({});
   (0, import_react14.useEffect)(() => {
     if (!executeAction || !data || data.length === 0) return;
@@ -4986,39 +5039,38 @@ function TableBlockClient({
     setData((prev) => [newRow, ...prev]);
     setDirty((prev) => __spreadProps(__spreadValues({}, prev), { added: [newRow, ...prev.added] }));
   };
-  const handleCellChange = (rowId, colName, value) => {
+  const handleCellChange = (0, import_react14.useCallback)((rowId, colName, value) => {
     setData((prev) => prev.map(
       (row) => row.id === rowId ? __spreadProps(__spreadValues({}, row), { data: __spreadProps(__spreadValues({}, row.data), { [colName]: value }) }) : row
     ));
-    const isAdded = dirty.added.some((r) => r.id === rowId);
-    if (isAdded) {
-      setDirty((prev) => __spreadProps(__spreadValues({}, prev), {
-        added: prev.added.map(
-          (r) => r.id === rowId ? __spreadProps(__spreadValues({}, r), { data: __spreadProps(__spreadValues({}, r.data), { [colName]: value }) }) : r
-        )
-      }));
-    } else {
-      const origData = baseRecordsMap.get(rowId) || {};
-      const origValue = origData[colName];
-      setDirty((prev) => {
-        const currentMods = __spreadValues({}, prev.modified[rowId] || {});
-        if (isEqualValues(value, origValue)) {
-          delete currentMods[colName];
-        } else {
-          currentMods[colName] = value;
-        }
-        const nextModified = __spreadValues({}, prev.modified);
-        if (Object.keys(currentMods).length === 0) {
-          delete nextModified[rowId];
-        } else {
-          nextModified[rowId] = currentMods;
-        }
+    setDirty((prev) => {
+      const isAdded = prev.added.some((r) => r.id === rowId);
+      if (isAdded) {
         return __spreadProps(__spreadValues({}, prev), {
-          modified: nextModified
+          added: prev.added.map(
+            (r) => r.id === rowId ? __spreadProps(__spreadValues({}, r), { data: __spreadProps(__spreadValues({}, r.data), { [colName]: value }) }) : r
+          )
         });
+      }
+      const origData = baseRecordsMap.get(rowId) || {};
+      const origValue = origData[colName];
+      const currentMods = __spreadValues({}, prev.modified[rowId] || {});
+      if (isEqualValues(value, origValue)) {
+        delete currentMods[colName];
+      } else {
+        currentMods[colName] = value;
+      }
+      const nextModified = __spreadValues({}, prev.modified);
+      if (Object.keys(currentMods).length === 0) {
+        delete nextModified[rowId];
+      } else {
+        nextModified[rowId] = currentMods;
+      }
+      return __spreadProps(__spreadValues({}, prev), {
+        modified: nextModified
       });
-    }
-  };
+    });
+  }, [baseRecordsMap]);
   const triggerSaveSuccess = (0, import_react14.useCallback)(() => {
     setIsSaveSuccess(true);
     setTimeout(() => {
@@ -5049,22 +5101,28 @@ function TableBlockClient({
       });
     }
   }, []);
-  const toggleSelectAll = (checked) => {
-    const nextSelected = checked ? new Set(filteredData.map((r) => r.id)) : /* @__PURE__ */ new Set();
-    setSelectedIds(nextSelected);
-    if (emitEvent) {
-      emitEvent("SELECTION_CHANGE", { selectedIds: Array.from(nextSelected), componentId });
-    }
-  };
-  const toggleSelectRow = (rowId, checked) => {
-    const newSelected = new Set(selectedIds);
-    if (checked) newSelected.add(rowId);
-    else newSelected.delete(rowId);
-    setSelectedIds(newSelected);
-    if (emitEvent) {
-      emitEvent("SELECTION_CHANGE", { selectedIds: Array.from(newSelected), componentId });
-    }
-  };
+  const toggleSelectAll = (0, import_react14.useCallback)((checked) => {
+    setSelectedIds(checked ? new Set(filteredData.map((r) => r.id)) : /* @__PURE__ */ new Set());
+  }, [filteredData]);
+  const toggleSelectRow = (0, import_react14.useCallback)((rowId, checked) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (checked) next.add(rowId);
+      else next.delete(rowId);
+      return next;
+    });
+  }, []);
+  const handleToggleExpand = (0, import_react14.useCallback)((rowId) => {
+    setExpandedRowIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(rowId)) next.delete(rowId);
+      else next.add(rowId);
+      return next;
+    });
+  }, []);
+  const handleMarkForDeletion = (0, import_react14.useCallback)((fileId) => {
+    setPendingDeletions((prev) => [...prev, fileId]);
+  }, []);
   const handleDeleteSelected = () => {
     const idsToDelete = Array.from(selectedIds);
     if (idsToDelete.length === 0) return;
@@ -5143,9 +5201,6 @@ function TableBlockClient({
     setData(serverRecords.map((r) => __spreadProps(__spreadValues({}, r), { data: __spreadValues({}, r.data) })));
     setSelectedIds(/* @__PURE__ */ new Set());
     setPendingDeletions([]);
-    if (emitEvent) {
-      emitEvent("SELECTION_CHANGE", { selectedIds: [], componentId });
-    }
   };
   const handleSave = async () => {
     var _a, _b;
@@ -5313,26 +5368,13 @@ function TableBlockClient({
     }).filter(Boolean);
   }, [relationOptions]);
   const getUniqueRelationOptions = (0, import_react14.useCallback)((col) => {
+    if (relationFilterOptions[col.name]) {
+      return relationFilterOptions[col.name];
+    }
     const seenIds = /* @__PURE__ */ new Set();
     const seenLabels = /* @__PURE__ */ new Set();
     const results = [];
     const options = relationOptions[col.name] || [];
-    options.forEach((opt) => {
-      const id = String(opt.id || opt._id || "");
-      if (!id) return;
-      let label = resolveRelationLabel(opt, col);
-      if (!label) {
-        const fallback = opt.label || opt.name || opt.title;
-        if (fallback && typeof fallback === "string" && !isRawObjectId(fallback)) {
-          label = fallback.trim();
-        }
-      }
-      if (label && label.trim() && !isRawObjectId(label) && !seenLabels.has(label.trim())) {
-        seenIds.add(id);
-        seenLabels.add(label.trim());
-        results.push({ id, label: label.trim() });
-      }
-    });
     data.forEach((row) => {
       if (!(row == null ? void 0 : row.data)) return;
       const ids = normalizeRelationValue(row.data[col.name]);
@@ -5355,8 +5397,7 @@ function TableBlockClient({
       });
     });
     return results.sort((a, b) => a.label.localeCompare(b.label));
-  }, [data, relationOptions]);
-  const filteredData = data;
+  }, [data, relationOptions, relationFilterOptions]);
   const errorMessage = error ? typeof error === "string" ? error : error.message || String(error) : null;
   const columnTotals = (0, import_react14.useMemo)(() => {
     const totals = {};
@@ -5447,6 +5488,13 @@ function TableBlockClient({
       link.click();
       document.body.removeChild(link);
       URL.revokeObjectURL(url);
+      if (result == null ? void 0 : result.isTruncated) {
+        addToast({
+          message: "\u05D9\u05D5\u05E6\u05D0\u05D5 10,000 \u05D4\u05E9\u05D5\u05E8\u05D5\u05EA \u05D4\u05E8\u05D0\u05E9\u05D5\u05E0\u05D5\u05EA. \u05DE\u05D5\u05DE\u05DC\u05E5 \u05DC\u05E1\u05E0\u05DF \u05D0\u05EA \u05D4\u05D8\u05D1\u05DC\u05D4 \u05DB\u05D3\u05D9 \u05DC\u05E6\u05DE\u05E6\u05DD \u05D0\u05EA \u05D4\u05DB\u05DE\u05D5\u05EA",
+          type: "warning",
+          duration: 5e3
+        });
+      }
     } catch (err) {
       console.error("[TableBlock] Export to CSV failed:", err);
       showError((err == null ? void 0 : err.message) || String(err), "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05D9\u05D9\u05E6\u05D5\u05D0 \u05D4\u05E0\u05EA\u05D5\u05E0\u05D9\u05DD");
@@ -5469,7 +5517,7 @@ function TableBlockClient({
         /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 p-3.5 sm:p-4 bg-slate-50 border-b border-slate-200 shrink-0", children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-wrap items-center gap-2.5", children: [
             ((schema == null ? void 0 : schema.title) || (schema == null ? void 0 : schema.name)) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "font-bold text-slate-800 text-sm sm:text-base border-l border-slate-300 pl-3 ml-1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: schema.title || schema.name }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            !effectiveReadOnly && effectivePermissions.canCreate && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "button",
               {
                 onClick: handleAddRow,
@@ -5479,7 +5527,7 @@ function TableBlockClient({
                 children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "w-4.5 h-4.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M12 4v16m8-8H4" }) })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            !effectiveReadOnly && effectivePermissions.canCreate && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "button",
               {
                 onClick: handleDuplicateRow,
@@ -5489,7 +5537,7 @@ function TableBlockClient({
                 children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react8.Copy, { className: "w-4 h-4 text-blue-600 shrink-0" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            !effectiveReadOnly && effectivePermissions.canDelete && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
               "button",
               {
                 onClick: handleDeleteSelected,
@@ -5515,7 +5563,7 @@ function TableBlockClient({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
+            !effectiveReadOnly && effectivePermissions.canUpdate && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
               /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                 "button",
                 {
@@ -5653,7 +5701,7 @@ function TableBlockClient({
             ] }) : isSaveSuccess ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "text-xs text-emerald-700 font-semibold flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 px-3 py-1.5 rounded-lg animate-in fade-in duration-200", children: [
               /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "w-4 h-4 text-emerald-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M5 13l4 4L19 7" }) }),
               "\u05E2\u05D5\u05D3\u05DB\u05DF \u05D1\u05D4\u05E6\u05DC\u05D7\u05D4"
-            ] }) : hasChanges ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-1.5 animate-in fade-in", children: [
+            ] }) : !effectiveReadOnly && effectivePermissions.canUpdate && hasChanges ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-1.5 animate-in fade-in", children: [
               /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-xs font-semibold text-amber-700", children: "\u05E9\u05D9\u05E0\u05D5\u05D9\u05D9\u05DD \u05E9\u05DC\u05D0 \u05E0\u05E9\u05DE\u05E8\u05D5" }),
               /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 "button",
@@ -5668,7 +5716,7 @@ function TableBlockClient({
                 }
               )
             ] }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            !effectiveReadOnly && effectivePermissions.canUpdate && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "button",
               {
                 onClick: handleSave,
@@ -5706,9 +5754,10 @@ function TableBlockClient({
               filteredColumns.map((col) => {
                 var _a, _b;
                 const isSearching = activeSearchCol === col.name;
-                const dragProps = isSearching ? {} : getHeaderDragProps(col.name);
-                const isDragging = !isSearching && draggedColName === col.name;
-                const isDragOver = !isSearching && dragOverColName === col.name;
+                const canReorderColumns = !effectiveReadOnly && effectivePermissions.canUpdate && !isSearching;
+                const dragProps = canReorderColumns ? getHeaderDragProps(col.name) : {};
+                const isDragging = canReorderColumns && draggedColName === col.name;
+                const isDragOver = canReorderColumns && dragOverColName === col.name;
                 const colMinWidth = calculateMinColumnWidth(col.name, false, col.type);
                 const currentWidth = Math.max(colMinWidth, columnWidths[col.name] || 200);
                 const isRelation = ((_a = col.type) == null ? void 0 : _a.toUpperCase()) === "RELATION";
@@ -5728,7 +5777,7 @@ function TableBlockClient({
                     style: { width: currentWidth, minWidth: currentWidth, maxWidth: currentWidth },
                     title: isSearching ? void 0 : col.name
                   }, dragProps), {
-                    className: `group relative border-b border-l border-slate-200 px-2 py-1 font-semibold text-slate-700 select-none transition-colors h-12 min-h-[48px] align-middle bg-white ${isSearching ? "cursor-default bg-blue-50/40" : "cursor-grab active:cursor-grabbing hover:bg-slate-100"} ${isDragging ? "opacity-40 bg-slate-200 border-dashed border-2 border-brand" : ""} ${isDragOver ? "bg-blue-50 border-r-4 border-r-brand text-brand font-bold" : ""}`,
+                    className: `group relative border-b border-l border-slate-200 px-2 py-1 font-semibold text-slate-700 select-none transition-colors h-12 min-h-[48px] align-middle bg-white ${isSearching ? "cursor-default bg-blue-50/40" : canReorderColumns ? "cursor-grab active:cursor-grabbing hover:bg-slate-100" : "cursor-default"} ${isDragging ? "opacity-40 bg-slate-200 border-dashed border-2 border-brand" : ""} ${isDragOver ? "bg-blue-50 border-r-4 border-r-brand text-brand font-bold" : ""}`,
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                         "div",
@@ -5809,9 +5858,7 @@ function TableBlockClient({
                                     setRelationTriggerRect(btn.getBoundingClientRect());
                                   }
                                   setActiveRelationCol(col.name);
-                                  if (!relationOptions[col.name] || relationOptions[col.name].length < 100) {
-                                    refetchRelation(col.name, { take: 1e3 });
-                                  }
+                                  fetchRelationFilterOptions(col.name);
                                 }
                               } else {
                                 setActiveSearchCol(col.name);
@@ -5844,106 +5891,39 @@ function TableBlockClient({
                 var _a;
                 return ((_a = c.type) == null ? void 0 : _a.toUpperCase()) === "SUB_TABLE";
               });
-              return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react14.default.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("tr", { className: "hover:bg-blue-50/30 transition-colors group", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { className: "border-b border-l border-slate-200 p-1.5 text-center bg-white group-hover:bg-transparent", style: { width: 72, minWidth: 72, maxWidth: 72 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-center gap-1.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                      "input",
-                      {
-                        type: "checkbox",
-                        checked: selectedIds.has(row.id),
-                        onChange: (e) => toggleSelectRow(row.id, e.target.checked),
-                        disabled: isLoading || isUpdatingActive,
-                        className: "w-4 h-4 rounded border-slate-300 text-brand"
-                      }
-                    ),
-                    hasSubTableCols && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => setExpandedRowIds((prev) => {
-                          const next = new Set(prev);
-                          if (next.has(row.id)) next.delete(row.id);
-                          else next.add(row.id);
-                          return next;
-                        }),
-                        className: "w-5 h-5 rounded-full bg-slate-500 hover:bg-slate-600 text-white flex items-center justify-center transition-colors cursor-pointer shrink-0 shadow-sm",
-                        title: isExpanded ? "\u05E1\u05D2\u05D5\u05E8 \u05EA\u05EA-\u05D8\u05D1\u05DC\u05D4" : "\u05E4\u05EA\u05D7 \u05EA\u05EA-\u05D8\u05D1\u05DC\u05D4",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: `w-3 h-3 transition-transform duration-150 ${isExpanded ? "rotate-90" : "rotate-180"}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "3", d: "M9 5l7 7-7 7" }) })
-                      }
-                    )
-                  ] }) }),
-                  filteredColumns.map((col) => {
-                    var _a;
-                    const colType = ((_a = col.type) == null ? void 0 : _a.toUpperCase()) || "DEFAULT";
-                    const InputComponent = FORM_INPUTS[colType] || FORM_INPUTS.DEFAULT;
-                    const colMinWidth = calculateMinColumnWidth(col.name, false, col.type);
-                    const currentWidth = Math.max(colMinWidth, columnWidths[col.name] || 200);
-                    let value = (row == null ? void 0 : row.data) ? row.data[col.name] : void 0;
-                    if (value === void 0 && col.defaultValue !== void 0) {
-                      value = colType === "CURRENCY" || colType === "NUMBER" ? parseFloat(col.defaultValue) : col.defaultValue;
-                      if (colType === "CURRENCY" || colType === "NUMBER") {
-                        if (isNaN(value)) value = null;
-                      }
-                    }
-                    if (value === void 0) value = null;
-                    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                      "td",
-                      {
-                        className: `border-b border-l border-slate-200 p-0 relative ${colType === "RELATION" ? "overflow-visible" : "overflow-hidden"}`,
-                        style: { width: currentWidth, minWidth: currentWidth, maxWidth: currentWidth },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                          InputComponent,
-                          {
-                            value,
-                            column: col,
-                            rowId: row.id,
-                            onChange: (v) => handleCellChange(row.id, col.name, v),
-                            context: {
-                              tableName: (schema == null ? void 0 : schema.name) || (schema == null ? void 0 : schema.tableName) || (schema == null ? void 0 : schema.title) || (schema == null ? void 0 : schema.id) || "Table",
-                              tableId: (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id),
-                              onMarkForDeletion: (fileId) => setPendingDeletions((prev) => [...prev, fileId]),
-                              relationOptions,
-                              relationDictionaryRef,
-                              refetchRelation,
-                              executeAction,
-                              emitEvent,
-                              pageState,
-                              componentId,
-                              orgId,
-                              updateQuietly: handleQuietCellChange,
-                              triggerSaveSuccess,
-                              rowData: row.data
-                            }
-                          }
-                        )
-                      },
-                      col.name
-                    );
-                  }),
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { className: "border-b border-slate-200 bg-white pointer-events-none" })
-                ] }),
-                isExpanded && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                  ExpandedSubTables,
-                  {
-                    rowId: row.id,
-                    rowData: row.data,
-                    subTableColumns,
-                    filteredColumnsLength: filteredColumns.length,
-                    handleCellChange,
-                    context: {
-                      executeAction,
-                      orgId,
-                      parentTableId: (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id),
-                      tableId: (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id),
-                      rowData: row.data,
-                      updateQuietly: handleQuietCellChange,
-                      triggerSaveSuccess,
-                      onUpdateColumnConfig: handleUpdateColumnConfig
-                    }
-                  }
-                )
-              ] }, row.id);
+              return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                TableRow,
+                {
+                  row,
+                  isSelected: selectedIds.has(row.id),
+                  isExpanded,
+                  filteredColumns,
+                  columnWidths,
+                  hasSubTableCols,
+                  subTableColumns,
+                  isLoading: isLoading || isFetching,
+                  isUpdatingActive,
+                  onToggleSelect: toggleSelectRow,
+                  onToggleExpand: handleToggleExpand,
+                  handleCellChange,
+                  handleQuietCellChange,
+                  handleUpdateColumnConfig,
+                  onMarkForDeletion: handleMarkForDeletion,
+                  triggerSaveSuccess,
+                  schema,
+                  orgId,
+                  componentId,
+                  pageState,
+                  relationOptions,
+                  relationDictionaryRef,
+                  refetchRelation,
+                  executeAction,
+                  emitEvent,
+                  readOnly: effectiveReadOnly || !effectivePermissions.canUpdate,
+                  permissions: effectivePermissions
+                },
+                row.id
+              );
             }) }),
             showSummary && filteredData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tfoot", { className: "bg-slate-50 border-t-2 border-slate-300 sticky bottom-0 z-10 shadow-[0_-2px_4px_rgba(0,0,0,0.02)]", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("tr", { children: [
               /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { className: "border-b border-l border-slate-200 p-1.5 text-center font-bold text-slate-600 text-xs", children: '\u05E1\u05D4"\u05DB' }),
@@ -6039,7 +6019,8 @@ function TableBlockClient({
               filterValue: currentSelected,
               onSelectionChange: (newSelected) => {
                 handleApplyColumnFilter(activeRelationCol, newSelected);
-              }
+              },
+              isLoading: loadingFilterCol === activeRelationCol
             }
           );
         })()
@@ -6090,12 +6071,143 @@ function ExpandedSubTables({
         column: activeCol,
         value: (rowData == null ? void 0 : rowData[activeCol.name]) || [],
         onChange: (newVal) => handleCellChange(rowId, activeCol.name, newVal),
-        context
+        context,
+        readOnly: context == null ? void 0 : context.readOnly
       },
       activeCol.name
     ) })
   ] }) });
 }
+var TableRow = import_react14.default.memo(function TableRow2({
+  row,
+  isSelected,
+  isExpanded,
+  filteredColumns,
+  columnWidths,
+  hasSubTableCols,
+  subTableColumns,
+  isLoading,
+  isUpdatingActive,
+  onToggleSelect,
+  onToggleExpand,
+  handleCellChange,
+  handleQuietCellChange,
+  handleUpdateColumnConfig,
+  onMarkForDeletion,
+  triggerSaveSuccess,
+  schema,
+  orgId,
+  componentId,
+  pageState,
+  relationOptions,
+  relationDictionaryRef,
+  refetchRelation,
+  executeAction,
+  emitEvent,
+  readOnly,
+  permissions
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react14.default.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("tr", { className: `hover:bg-blue-50/30 transition-colors group ${isSelected ? "bg-blue-50/40" : ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { className: "border-b border-l border-slate-200 p-1.5 text-center bg-white group-hover:bg-transparent", style: { width: 72, minWidth: 72, maxWidth: 72 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-center gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            checked: isSelected,
+            onChange: (e) => onToggleSelect(row.id, e.target.checked),
+            disabled: isLoading || isUpdatingActive,
+            className: "w-4 h-4 rounded border-slate-300 text-brand"
+          }
+        ),
+        hasSubTableCols && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => onToggleExpand(row.id),
+            className: "w-5 h-5 rounded-full bg-slate-500 hover:bg-slate-600 text-white flex items-center justify-center transition-colors cursor-pointer shrink-0 shadow-sm",
+            title: isExpanded ? "\u05E1\u05D2\u05D5\u05E8 \u05EA\u05EA-\u05D8\u05D1\u05DC\u05D4" : "\u05E4\u05EA\u05D7 \u05EA\u05EA-\u05D8\u05D1\u05DC\u05D4",
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: `w-3 h-3 transition-transform duration-150 ${isExpanded ? "rotate-90" : "rotate-180"}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "3", d: "M9 5l7 7-7 7" }) })
+          }
+        )
+      ] }) }),
+      filteredColumns.map((col) => {
+        var _a;
+        const colType = ((_a = col.type) == null ? void 0 : _a.toUpperCase()) || "DEFAULT";
+        const InputComponent = FORM_INPUTS[colType] || FORM_INPUTS.DEFAULT;
+        const colMinWidth = calculateMinColumnWidth(col.name, false, col.type);
+        const currentWidth = Math.max(colMinWidth, columnWidths[col.name] || 200);
+        let value = (row == null ? void 0 : row.data) ? row.data[col.name] : void 0;
+        if (value === void 0 && col.defaultValue !== void 0) {
+          value = colType === "CURRENCY" || colType === "NUMBER" ? parseFloat(col.defaultValue) : col.defaultValue;
+          if (colType === "CURRENCY" || colType === "NUMBER") {
+            if (isNaN(value)) value = null;
+          }
+        }
+        if (value === void 0) value = null;
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "td",
+          {
+            className: `border-b border-l border-slate-200 p-0 relative ${colType === "RELATION" ? "overflow-visible" : "overflow-hidden"}`,
+            style: { width: currentWidth, minWidth: currentWidth, maxWidth: currentWidth },
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              InputComponent,
+              {
+                value,
+                column: col,
+                rowId: row.id,
+                onChange: (v) => handleCellChange(row.id, col.name, v),
+                readOnly,
+                context: {
+                  tableName: (schema == null ? void 0 : schema.name) || (schema == null ? void 0 : schema.tableName) || (schema == null ? void 0 : schema.title) || (schema == null ? void 0 : schema.id) || "Table",
+                  tableId: (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id),
+                  onMarkForDeletion,
+                  relationOptions,
+                  relationDictionaryRef,
+                  refetchRelation,
+                  executeAction,
+                  emitEvent,
+                  pageState,
+                  componentId,
+                  orgId,
+                  updateQuietly: handleQuietCellChange,
+                  triggerSaveSuccess,
+                  rowData: row.data,
+                  readOnly,
+                  permissions
+                }
+              }
+            )
+          },
+          col.name
+        );
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { className: "border-b border-slate-200 bg-white pointer-events-none" })
+    ] }),
+    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      ExpandedSubTables,
+      {
+        rowId: row.id,
+        rowData: row.data,
+        subTableColumns,
+        filteredColumnsLength: filteredColumns.length,
+        handleCellChange,
+        context: {
+          executeAction,
+          orgId,
+          parentTableId: (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id),
+          tableId: (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id),
+          rowData: row.data,
+          updateQuietly: handleQuietCellChange,
+          triggerSaveSuccess,
+          onUpdateColumnConfig: handleUpdateColumnConfig,
+          readOnly,
+          permissions
+        }
+      }
+    )
+  ] });
+});
 
 // src/components/TableBlock/TableBlock.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
@@ -6132,6 +6244,7 @@ var UNIVERSE_COMPONENTS = {
   formatTimeInput,
   formatTimeIso,
   getDeterministicPastelBadge,
+  getRolePermissions,
   isTextRepresentable,
   measureTextWidth,
   normalizeRelationValue,