@pisell/private-materials 6.3.116 → 6.3.118

package/lib/plus/saasAttendance/settings/components/MapField.js

@@ -0,0 +1,670 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plus/saasAttendance/settings/components/MapField.tsx
+var MapField_exports = {};
+__export(MapField_exports, {
+  default: () => MapField_default
+});
+module.exports = __toCommonJS(MapField_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_materials = require("@pisell/materials");
+var import_utils = require("@pisell/utils");
+var import_useEngineContext = __toESM(require("../../../../hooks/useEngineContext"));
+var DEFAULT_CENTER = { lat: -37.8136, lng: 144.9631 };
+var DEFAULT_ZOOM = 14;
+var CIRCLE_STROKE_COLOR = "#5d3f9f";
+var CIRCLE_FILL_COLOR = "#5d3f9f";
+var COORDINATE_NUMBER_PATTERN = /^-?\d+(\.\d+)?$/;
+var getCurrentPosition = () => {
+  return new Promise((resolve) => {
+    if (!navigator.geolocation) {
+      resolve(null);
+      return;
+    }
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        resolve({
+          lat: position.coords.latitude,
+          lng: position.coords.longitude
+        });
+      },
+      () => {
+        resolve(null);
+      },
+      { enableHighAccuracy: true, timeout: 1e4, maximumAge: 0 }
+    );
+  });
+};
+var toMultiLangName = (input) => {
+  if (!input) return { original: "" };
+  if (typeof input === "string") return { original: input };
+  if (typeof input === "object") return input;
+  return { original: String(input) };
+};
+var getLocationNameText = (name) => {
+  const n = toMultiLangName(name);
+  return n.original || n["zh-CN"] || n["zh-HK"] || n.en || n.ja || n.pt || "";
+};
+var createLocationId = () => {
+  const anyCrypto = typeof crypto !== "undefined" ? crypto : void 0;
+  if (anyCrypto == null ? void 0 : anyCrypto.randomUUID) return anyCrypto.randomUUID();
+  return `${Date.now()}_${Math.random().toString(16).slice(2)}`;
+};
+var normalizeLocations = (input) => {
+  if (!Array.isArray(input)) return [];
+  return input.map((item) => {
+    var _a, _b;
+    if ((item == null ? void 0 : item.address) && ((_a = item.address) == null ? void 0 : _a.lat) != null && ((_b = item.address) == null ? void 0 : _b.lng) != null) {
+      const lat2 = typeof item.address.lat === "number" ? item.address.lat : parseFloat(item.address.lat) || 0;
+      const lng2 = typeof item.address.lng === "number" ? item.address.lng : parseFloat(item.address.lng) || 0;
+      return {
+        id: String((item == null ? void 0 : item.id) ?? createLocationId()),
+        name: toMultiLangName(item.name),
+        radius: item == null ? void 0 : item.radius,
+        address: { lat: lat2, lng: lng2 }
+      };
+    }
+    const lat = typeof (item == null ? void 0 : item.lat) === "number" ? item.lat : parseFloat(item == null ? void 0 : item.lat) || 0;
+    const lng = typeof (item == null ? void 0 : item.lng) === "number" ? item.lng : parseFloat(item == null ? void 0 : item.lng) || 0;
+    return {
+      id: String((item == null ? void 0 : item.id) ?? createLocationId()),
+      name: toMultiLangName(item == null ? void 0 : item.name),
+      radius: item == null ? void 0 : item.radius,
+      address: { lat, lng }
+    };
+  });
+};
+var LocationFormMap = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const { value, onChange, defaultRadius = 100 } = props;
+    const [form] = import_antd.Form.useForm();
+    const modalMapRef = (0, import_react.useRef)(null);
+    const [isModalMapReady, setIsModalMapReady] = (0, import_react.useState)(false);
+    const context = (0, import_useEngineContext.default)();
+    const GoogleMapComponent = (0, import_react.useMemo)(() => {
+      var _a, _b, _c;
+      const app = (_c = (_b = (_a = context == null ? void 0 : context.appHelper) == null ? void 0 : _a.utils) == null ? void 0 : _b.getApp) == null ? void 0 : _c.call(_b);
+      if (!app) return null;
+      return app.getPlugin("google-map") || null;
+    }, [context]);
+    const lat = import_antd.Form.useWatch("latitude", form);
+    const lng = import_antd.Form.useWatch("longitude", form);
+    const validRangeMeters = import_antd.Form.useWatch("validRangeMeters", form) ?? defaultRadius;
+    const [debouncedValidRangeMeters, setDebouncedValidRangeMeters] = (0, import_react.useState)(validRangeMeters);
+    (0, import_react.useEffect)(() => {
+      setDebouncedValidRangeMeters(validRangeMeters);
+    }, []);
+    (0, import_react.useEffect)(() => {
+      const timer = setTimeout(() => {
+        setDebouncedValidRangeMeters(validRangeMeters);
+      }, 200);
+      return () => clearTimeout(timer);
+    }, [validRangeMeters]);
+    (0, import_react.useEffect)(() => {
+      if (value) {
+        form.setFieldsValue(value);
+        if (value.latitude && value.longitude && modalMapRef.current) {
+          const center = {
+            lat: parseFloat(value.latitude),
+            lng: parseFloat(value.longitude)
+          };
+          modalMapRef.current.setCamera({
+            coordinate: center,
+            zoom: DEFAULT_ZOOM,
+            animate: true
+          });
+        }
+      } else {
+        form.resetFields();
+        form.setFieldsValue({ validRangeMeters: defaultRadius });
+      }
+    }, [value, form, defaultRadius]);
+    (0, import_react.useEffect)(() => {
+      if (!isModalMapReady || !modalMapRef.current) return;
+      const latNum = parseFloat(lat);
+      const lngNum = parseFloat(lng);
+      if (isNaN(latNum) || isNaN(lngNum)) return;
+      modalMapRef.current.setCamera({
+        coordinate: { lat: latNum, lng: lngNum },
+        zoom: DEFAULT_ZOOM,
+        animate: true
+      });
+    }, [isModalMapReady, lat, lng]);
+    (0, import_react.useImperativeHandle)(ref, () => ({
+      validate: () => form.validateFields()
+    }));
+    const handleMapClick = (0, import_react.useCallback)(
+      (coordinate) => {
+        const newValues = {
+          latitude: coordinate.lat.toFixed(6),
+          longitude: coordinate.lng.toFixed(6)
+        };
+        form.setFieldsValue(newValues);
+        const currentValues = form.getFieldsValue();
+        onChange == null ? void 0 : onChange({ ...currentValues, ...newValues });
+      },
+      [form, onChange]
+    );
+    const handleValuesChange = (changedValues, allValues) => {
+      onChange == null ? void 0 : onChange(allValues);
+    };
+    const mapVisualization = (0, import_react.useMemo)(() => {
+      const latNum = parseFloat(lat);
+      const lngNum = parseFloat(lng);
+      if (isNaN(latNum) || isNaN(lngNum)) {
+        return { markers: [], circles: [], center: DEFAULT_CENTER };
+      }
+      const coordinate = { lat: latNum, lng: lngNum };
+      const markers = [
+        {
+          id: "current-location",
+          coordinate,
+          draggable: false
+        }
+      ];
+      const circles = [
+        {
+          id: "current-range",
+          center: coordinate,
+          radius: debouncedValidRangeMeters,
+          strokeColor: CIRCLE_STROKE_COLOR,
+          strokeOpacity: 0.8,
+          strokeWeight: 2,
+          fillColor: CIRCLE_FILL_COLOR,
+          fillOpacity: 0.2
+        }
+      ];
+      return { markers, circles, center: coordinate };
+    }, [lat, lng, debouncedValidRangeMeters]);
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Form,
+      {
+        form,
+        layout: "vertical",
+        className: "saas-attendance-group-settings__modal-form",
+        onValuesChange: handleValuesChange,
+        initialValues: { validRangeMeters: defaultRadius }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Form.Item,
+        {
+          label: import_utils.locales.getText(
+            "pisell2.attendance.group-settings.clock-in-method.add-location-modal.location-name.label"
+          ),
+          name: "name",
+          required: true,
+          rules: [
+            {
+              validator: async (_rule, value2) => {
+                if (!value2) {
+                  throw new Error(
+                    import_utils.locales.getText(
+                      "pisell2.attendance.group-settings.clock-in-method.add-location-modal.location-name.validation"
+                    )
+                  );
+                }
+                if (typeof value2 === "string") {
+                  if (value2.trim()) return Promise.resolve();
+                } else if (typeof value2 === "object") {
+                  const texts = Object.values(value2).filter(
+                    (item) => typeof item === "string" && item.trim()
+                  );
+                  if (texts.length > 0) return Promise.resolve();
+                }
+                throw new Error(
+                  import_utils.locales.getText(
+                    "pisell2.attendance.group-settings.clock-in-method.add-location-modal.location-name.validation"
+                  )
+                );
+              }
+            }
+          ]
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_materials.BaseTranslation,
+          {
+            placeholder: import_utils.locales.getText(
+              "pisell2.attendance.group-settings.clock-in-method.add-location-modal.location-name.placeholder"
+            )
+          }
+        )
+      ),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-group-settings__modal-grid" }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Form.Item,
+        {
+          label: import_utils.locales.getText(
+            "pisell2.attendance.group-settings.clock-in-method.add-location-modal.latitude.label"
+          ),
+          name: "latitude",
+          required: true,
+          rules: [
+            { required: true },
+            {
+              validator: async (_rule, value2) => {
+                const text = String(value2 ?? "").trim();
+                if (!text) return Promise.resolve();
+                if (!COORDINATE_NUMBER_PATTERN.test(text)) {
+                  throw new Error(
+                    import_utils.locales.getText(
+                      "pisell2.attendance.group-settings.clock-in-method.add-location-modal.latitude.validation"
+                    )
+                  );
+                }
+                const latValue = parseFloat(text);
+                if (latValue < -90 || latValue > 90) {
+                  throw new Error(
+                    import_utils.locales.getText(
+                      "pisell2.attendance.group-settings.clock-in-method.add-location-modal.latitude.validation"
+                    )
+                  );
+                }
+                return Promise.resolve();
+              }
+            }
+          ]
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_antd.Input,
+          {
+            placeholder: import_utils.locales.getText(
+              "pisell2.attendance.group-settings.clock-in-method.add-location-modal.latitude.placeholder"
+            )
+          }
+        )
+      ), /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Form.Item,
+        {
+          label: import_utils.locales.getText(
+            "pisell2.attendance.group-settings.clock-in-method.add-location-modal.longitude.label"
+          ),
+          name: "longitude",
+          required: true,
+          rules: [
+            { required: true },
+            {
+              validator: async (_rule, value2) => {
+                const text = String(value2 ?? "").trim();
+                if (!text) return Promise.resolve();
+                if (!COORDINATE_NUMBER_PATTERN.test(text)) {
+                  throw new Error(
+                    import_utils.locales.getText(
+                      "pisell2.attendance.group-settings.clock-in-method.add-location-modal.longitude.validation"
+                    )
+                  );
+                }
+                const lngValue = parseFloat(text);
+                if (lngValue < -180 || lngValue > 180) {
+                  throw new Error(
+                    import_utils.locales.getText(
+                      "pisell2.attendance.group-settings.clock-in-method.add-location-modal.longitude.validation"
+                    )
+                  );
+                }
+                return Promise.resolve();
+              }
+            }
+          ]
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_antd.Input,
+          {
+            placeholder: import_utils.locales.getText(
+              "pisell2.attendance.group-settings.clock-in-method.add-location-modal.longitude.placeholder"
+            )
+          }
+        )
+      )),
+      /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Form.Item,
+        {
+          label: import_utils.locales.getText(
+            "pisell2.attendance.group-settings.clock-in-method.add-location-modal.valid-range.label"
+          ),
+          required: true
+        },
+        /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-group-settings__modal-slider-row" }, /* @__PURE__ */ import_react.default.createElement(
+          import_antd.Form.Item,
+          {
+            name: "validRangeMeters",
+            noStyle: true,
+            rules: [{ required: true }]
+          },
+          /* @__PURE__ */ import_react.default.createElement(import_antd.Slider, { min: 0, max: 1e3 })
+        ), /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-group-settings__slider-value" }, import_utils.locales.getText(
+          "pisell2.attendance.group-settings.clock-in-method.meters"
+        )(validRangeMeters)))
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Alert,
+        {
+          message: import_utils.locales.getText(
+            "pisell2.attendance.group-settings.clock-in-method.add-location-modal.tip.google-maps"
+          ),
+          type: "info",
+          showIcon: true
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: "saas-attendance-group-settings__map-placeholder saas-attendance-map-field__modal-map",
+          style: { marginTop: "10px" }
+        },
+        GoogleMapComponent && /* @__PURE__ */ import_react.default.createElement(
+          GoogleMapComponent,
+          {
+            ref: modalMapRef,
+            config: {
+              center: mapVisualization.center,
+              zoom: DEFAULT_ZOOM
+            },
+            markers: mapVisualization.markers,
+            circles: mapVisualization.circles,
+            onReady: () => setIsModalMapReady(true),
+            onMapClick: handleMapClick,
+            onError: (err) => console.error("Map Error:", err)
+          }
+        )
+      )
+    );
+  }
+);
+var MapField = (0, import_react.forwardRef)((props, ref) => {
+  const { value = [], onChange, defaultRadius = 100, className } = props;
+  const locations = (0, import_react.useMemo)(() => normalizeLocations(value), [value]);
+  const [addLocationOpen, setAddLocationOpen] = (0, import_react.useState)(false);
+  const [editingLocationValue, setEditingLocationValue] = (0, import_react.useState)(null);
+  const [editingLocationId, setEditingLocationId] = (0, import_react.useState)(
+    null
+  );
+  const locationFormMapRef = (0, import_react.useRef)(null);
+  const mapRef = (0, import_react.useRef)(null);
+  const [isMapReady, setIsMapReady] = (0, import_react.useState)(false);
+  const [activeLocationId, setActiveLocationId] = (0, import_react.useState)(null);
+  const context = (0, import_useEngineContext.default)();
+  (0, import_react.useEffect)(() => {
+    if (!onChange || !Array.isArray(value) || value.length === 0) return;
+    const needsNormalize = value.some(
+      (item) => !(item == null ? void 0 : item.address) || (item == null ? void 0 : item.lat) != null || (item == null ? void 0 : item.lng) != null || typeof (item == null ? void 0 : item.name) === "string" || (item == null ? void 0 : item.address) && typeof item.address === "object" && Object.keys(item.address).some((k) => k !== "lat" && k !== "lng")
+    );
+    if (!needsNormalize) return;
+    onChange(normalizeLocations(value));
+  }, [onChange, value]);
+  const GoogleMapComponent = (0, import_react.useMemo)(() => {
+    var _a, _b, _c;
+    const app = (_c = (_b = (_a = context == null ? void 0 : context.appHelper) == null ? void 0 : _a.utils) == null ? void 0 : _b.getApp) == null ? void 0 : _c.call(_b);
+    if (!app) return null;
+    return app.getPlugin("google-map") || null;
+  }, [context]);
+  (0, import_react.useEffect)(() => {
+    if (locations.length === 0) {
+      setActiveLocationId(null);
+      return;
+    }
+    if (activeLocationId && locations.some((loc) => loc.id === activeLocationId)) {
+      return;
+    }
+    setActiveLocationId(locations[0].id);
+  }, [locations, activeLocationId]);
+  const mapCenter = (0, import_react.useMemo)(() => {
+    if (locations.length === 0) return DEFAULT_CENTER;
+    const activeLocation = activeLocationId ? locations.find((loc) => loc.id === activeLocationId) : null;
+    if (activeLocation) {
+      return {
+        lat: activeLocation.address.lat,
+        lng: activeLocation.address.lng
+      };
+    }
+    return { lat: locations[0].address.lat, lng: locations[0].address.lng };
+  }, [locations, activeLocationId]);
+  const markers = (0, import_react.useMemo)(() => {
+    return locations.map((loc) => ({
+      id: loc.id,
+      coordinate: { lat: loc.address.lat, lng: loc.address.lng },
+      title: getLocationNameText(loc.name),
+      draggable: false
+    }));
+  }, [locations]);
+  const circles = (0, import_react.useMemo)(() => {
+    return locations.map((loc) => ({
+      id: `circle-${loc.id}`,
+      center: { lat: loc.address.lat, lng: loc.address.lng },
+      radius: loc.radius || defaultRadius,
+      strokeColor: CIRCLE_STROKE_COLOR,
+      strokeOpacity: 0.8,
+      strokeWeight: 2,
+      fillColor: CIRCLE_FILL_COLOR,
+      fillOpacity: 0.2
+    }));
+  }, [locations, defaultRadius]);
+  (0, import_react.useImperativeHandle)(
+    ref,
+    () => ({
+      onAddLocation: async () => {
+        const baseFormValue = {
+          name: { original: "", en: "", "zh-CN": "", "zh-HK": "", "ja": "", "pt": "" },
+          latitude: "",
+          longitude: "",
+          validRangeMeters: defaultRadius
+        };
+        setAddLocationOpen(true);
+        setEditingLocationId(null);
+        setEditingLocationValue(baseFormValue);
+        const currentPosition = await getCurrentPosition();
+        if (currentPosition) {
+          setEditingLocationValue({
+            ...baseFormValue,
+            latitude: currentPosition.lat.toFixed(6),
+            longitude: currentPosition.lng.toFixed(6)
+          });
+        }
+      }
+    }),
+    [defaultRadius]
+  );
+  const handleSubmitLocation = async () => {
+    if (!locationFormMapRef.current) return;
+    try {
+      const values = await locationFormMapRef.current.validate();
+      const nextLocation = {
+        id: editingLocationId ?? createLocationId(),
+        name: toMultiLangName(values.name),
+        radius: values.validRangeMeters,
+        address: {
+          lat: parseFloat(values.latitude) || 0,
+          lng: parseFloat(values.longitude) || 0
+        }
+      };
+      if (editingLocationId) {
+        const nextLocations = locations.map(
+          (loc) => loc.id === editingLocationId ? nextLocation : loc
+        );
+        onChange == null ? void 0 : onChange(nextLocations);
+        setActiveLocationId(editingLocationId);
+      } else {
+        const nextLocations = [nextLocation, ...locations];
+        onChange == null ? void 0 : onChange(nextLocations);
+        setActiveLocationId(nextLocation.id);
+      }
+      setAddLocationOpen(false);
+      setEditingLocationValue(null);
+      setEditingLocationId(null);
+    } catch (error) {
+      console.error("Validation failed:", error);
+    }
+  };
+  const handleEditLocation = (0, import_react.useCallback)(
+    (location) => {
+      setAddLocationOpen(true);
+      setEditingLocationId(location.id);
+      setEditingLocationValue({
+        name: toMultiLangName(location.name),
+        latitude: String(location.address.lat ?? ""),
+        longitude: String(location.address.lng ?? ""),
+        validRangeMeters: location.radius ?? defaultRadius
+      });
+    },
+    [defaultRadius]
+  );
+  const handleRemoveLocation = (locationId) => {
+    const nextLocations = locations.filter((loc) => loc.id !== locationId);
+    onChange == null ? void 0 : onChange(nextLocations);
+  };
+  const handleLocationItemClick = (0, import_react.useCallback)(
+    (location) => {
+      var _a;
+      setActiveLocationId(location.id);
+      (_a = mapRef.current) == null ? void 0 : _a.setCamera({
+        coordinate: { lat: location.address.lat, lng: location.address.lng },
+        zoom: DEFAULT_ZOOM,
+        animate: true
+      });
+    },
+    []
+  );
+  const handleMapReady = (0, import_react.useCallback)(() => {
+    setIsMapReady(true);
+  }, []);
+  const handleMarkerClick = (0, import_react.useCallback)(
+    (markerId, marker) => {
+      console.log("Marker clicked:", markerId, marker);
+    },
+    []
+  );
+  (0, import_react.useEffect)(() => {
+    if (!isMapReady || !mapRef.current || locations.length === 0) return;
+    const targetLocation = activeLocationId ? locations.find((loc) => loc.id === activeLocationId) : locations[0];
+    if (targetLocation) {
+      mapRef.current.setCamera({
+        coordinate: {
+          lat: targetLocation.address.lat,
+          lng: targetLocation.address.lng
+        },
+        zoom: DEFAULT_ZOOM,
+        animate: true
+      });
+    }
+  }, [isMapReady, activeLocationId, locations]);
+  const renderEmptyState = () => /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-group-settings__locations-empty" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-group-settings__locations-empty-icon" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: "pisell2-marker-pin-01", size: 48 })), /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-group-settings__locations-empty-title" }, import_utils.locales.getText(
+    "pisell2.attendance.group-settings.clock-in-method.approved-locations.empty.title"
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-group-settings__locations-empty-desc" }, import_utils.locales.getText(
+    "pisell2.attendance.group-settings.clock-in-method.approved-locations.empty.desc"
+  )));
+  const renderLocationsList = () => /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-group-settings__locations-list" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-map-field__map-container" }, /* @__PURE__ */ import_react.default.createElement(
+    GoogleMapComponent,
+    {
+      ref: mapRef,
+      config: {
+        center: mapCenter,
+        zoom: DEFAULT_ZOOM
+      },
+      markers,
+      circles,
+      onReady: handleMapReady,
+      onMarkerClick: handleMarkerClick,
+      onError: (err) => console.error("Map Error:", err)
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-map-field__locations" }, locations.map((location) => /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      key: location.id,
+      className: `saas-attendance-group-settings__location-item${activeLocationId === location.id ? " saas-attendance-group-settings__location-item--active" : ""}`,
+      onClick: () => handleLocationItemClick(location),
+      style: { cursor: "pointer" }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-map-field__location-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-group-settings__location-name" }, getLocationNameText(location.name)), /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-map-field__location-actions" }, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        type: "text",
+        size: "small",
+        icon: /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: "pisell2-edit-05", size: 16 }),
+        className: "saas-attendance-map-field__edit-btn",
+        onClick: (e) => {
+          e.stopPropagation();
+          handleEditLocation(location);
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        type: "text",
+        size: "small",
+        icon: /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: "pisell2-trash-01", size: 16 }),
+        className: "saas-attendance-map-field__delete-btn",
+        onClick: (e) => {
+          e.stopPropagation();
+          handleRemoveLocation(location.id);
+        }
+      }
+    ))),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-attendance-group-settings__location-meta" }, import_utils.locales.getText(
+      "pisell2.attendance.group-settings.clock-in-method.add-location-modal.valid-range.label"
+    ), ": ", /* @__PURE__ */ import_react.default.createElement("span", null, location.radius || defaultRadius))
+  ))));
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: `saas-attendance-group-settings__locations-box ${className || ""}`
+    },
+    locations.length === 0 ? renderEmptyState() : renderLocationsList()
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_materials.PisellModal,
+    {
+      open: addLocationOpen,
+      title: import_utils.locales.getText(
+        editingLocationId ? "pisell2.attendance.group-settings.clock-in-method.edit-location-modal.title" : "pisell2.attendance.group-settings.clock-in-method.add-location-modal.title"
+      ),
+      destroyOnHidden: true,
+      onCancel: () => {
+        setAddLocationOpen(false);
+        setEditingLocationValue(null);
+        setEditingLocationId(null);
+      },
+      okText: import_utils.locales.getText(
+        editingLocationId ? "pisell2.attendance.group-settings.actions.edit-location-confirm" : "pisell2.attendance.group-settings.actions.add-location-confirm"
+      ),
+      cancelText: import_utils.locales.getText(
+        "pisell2.attendance.group-settings.actions.cancel"
+      ),
+      onOk: handleSubmitLocation
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      LocationFormMap,
+      {
+        ref: locationFormMapRef,
+        value: editingLocationValue,
+        onChange: setEditingLocationValue,
+        defaultRadius
+      }
+    )
+  ));
+});
+MapField.displayName = "MapField";
+var MapField_default = MapField;

package/lib/plus/saasAttendance/settings/components/index.d.ts

@@ -0,0 +1,3 @@
+export { default as MapField } from './MapField';
+export type { MapFieldProps, MapFieldRef } from './MapField';
+export { default as MembersField } from './membersField';