@pisell/private-materials 6.3.220 → 6.3.222

package/lib/plus/panpacificTask/PanpacificTask.js

@@ -0,0 +1,555 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_objectSpread2 = require("../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
+const require_asyncToGenerator = require("../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js");
+const require_useEngineContext = require("../../hooks/useEngineContext.js");
+const require_index = require("../../utils/index.js");
+const require_attachments = require("./attachments.js");
+const require_model = require("./model.js");
+const require_serve = require("./serve.js");
+const require_JobForm = require("./JobForm.js");
+const require_JobStatus = require("./JobStatus.js");
+const require_JobDrawer = require("./JobDrawer.js");
+const require_JobCard = require("./JobCard.js");
+const require_locales = require("./locales.js");
+let dayjs = require("dayjs");
+dayjs = require_runtime.__toESM(dayjs);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let antd = require("antd");
+let _pisell_utils = require("@pisell/utils");
+let _pisell_materials = require("@pisell/materials");
+require("./index.less");
+//#region src/plus/panpacificTask/PanpacificTask.tsx
+/** Complete #task workspace. All UI state belongs to this component, including its overlays. */
+function PanpacificTask(props) {
+	return /* @__PURE__ */ react.default.createElement(antd.ConfigProvider, {
+		prefixCls: "pisell-lowcode",
+		componentSize: "middle",
+		theme: { token: {
+			colorPrimary: "#634db3",
+			controlHeight: 38,
+			controlHeightSM: 38
+		} }
+	}, /* @__PURE__ */ react.default.createElement(TaskWorkspace, props));
+}
+function TaskWorkspace(props) {
+	var _context$appHelper, _context$engine, _context$appHelper2;
+	const context = require_useEngineContext.default();
+	const utils = (context === null || context === void 0 || (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.utils) || {};
+	if (utils.request) require_index.request.setRequest(utils.request);
+	const locale = (context === null || context === void 0 || (_context$engine = context.engine) === null || _context$engine === void 0 || (_context$engine = _context$engine.props) === null || _context$engine === void 0 ? void 0 : _context$engine.locale) || "en";
+	_pisell_utils.locales.init(require_locales.default, locale);
+	const getText = _pisell_utils.locales.getText;
+	const client = (0, react.useMemo)(() => utils.request || require_index.request.getRequest(), [utils.request]);
+	const { mediaUploadUrl, getHeaders } = (context === null || context === void 0 || (_context$appHelper2 = context.appHelper) === null || _context$appHelper2 === void 0 ? void 0 : _context$appHelper2.constants) || {};
+	const uploadPhoto = (0, react.useMemo)(() => props.uploadPhoto || require_attachments.defaultPhotoUploader({
+		mediaUploadUrl,
+		getHeaders
+	}), [
+		props.uploadPhoto,
+		mediaUploadUrl,
+		getHeaders
+	]);
+	const [modal, modalContext] = antd.Modal.useModal();
+	const [tab, setTab] = (0, react.useState)(props.defaultTab || "calendar");
+	const [jobs, setJobs] = (0, react.useState)([]);
+	const [base, setBase] = (0, react.useState)(require_model.emptyBase);
+	const [loading, setLoading] = (0, react.useState)(false);
+	const [busyId, setBusyId] = (0, react.useState)();
+	const [month, setMonth] = (0, react.useState)((0, dayjs.default)().format("YYYY-MM"));
+	const [selectedDate, setSelectedDate] = (0, react.useState)(require_model.dateText((0, dayjs.default)()));
+	const [period, setPeriod] = (0, react.useState)(false);
+	const [viewport, setViewport] = (0, react.useState)({
+		mode: "month",
+		month
+	});
+	const [ganttStatus, setGanttStatus] = (0, react.useState)();
+	const [hoveredJob, setHoveredJob] = (0, react.useState)();
+	const [collapsed, setCollapsed] = (0, react.useState)([]);
+	const [filters, setFilters] = (0, react.useState)({
+		search: "",
+		due: ""
+	});
+	const [page, setPage] = (0, react.useState)(1);
+	const [pageSize, setPageSize] = (0, react.useState)(10);
+	const [drawer, setDrawer] = (0, react.useState)();
+	const [draft, setDraft] = (0, react.useState)();
+	const [editorKey, setEditorKey] = (0, react.useState)(0);
+	const editorRef = (0, react.useRef)(null);
+	const disposed = (0, react.useRef)(false);
+	const readSequence = (0, react.useRef)(0);
+	const writing = (0, react.useRef)(false);
+	const changeCallback = (0, react.useRef)(props.onJobChange);
+	changeCallback.current = props.onJobChange;
+	const load = (0, react.useCallback)(require_asyncToGenerator._asyncToGenerator(function* () {
+		const token = ++readSequence.current;
+		setLoading(true);
+		try {
+			const result = yield require_serve.getJobs(client);
+			if (!disposed.current && token === readSequence.current) setJobs(result);
+		} catch (error) {
+			console.warn("[PanpacificTask] Job list load failed", error);
+		} finally {
+			if (!disposed.current && token === readSequence.current) setLoading(false);
+		}
+	}), [client]);
+	(0, react.useEffect)(() => {
+		disposed.current = false;
+		let cancelled = false;
+		load();
+		require_serve.getJobBaseData(client).then((result) => {
+			if (!cancelled) setBase((previous) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, previous), result));
+		});
+		return () => {
+			cancelled = true;
+			disposed.current = true;
+			readSequence.current++;
+		};
+	}, [client, load]);
+	const confirm = (key) => new Promise((resolve) => modal.confirm({
+		title: getText(`pisell2.panpacific.task.${key}`),
+		okText: getText(`pisell2.panpacific.task.${key === "discardConfirm" ? "discard" : key === "removeConfirm" ? "remove" : "cancelJob"}`),
+		cancelText: getText("pisell2.panpacific.task.cancelAction"),
+		okButtonProps: { danger: true },
+		onOk: () => resolve(true),
+		onCancel: () => resolve(false)
+	}));
+	const changed = (id) => {
+		var _changeCallback$curre;
+		load();
+		(_changeCallback$curre = changeCallback.current) === null || _changeCallback$curre === void 0 || _changeCallback$curre.call(changeCallback, id);
+	};
+	const openCreate = (initial = require_model.draftFor(void 0, selectedDate)) => {
+		setEditorKey((value) => value + 1);
+		setDraft(initial);
+	};
+	const openJob = (job, edit = false) => {
+		if (!writing.current && !draft) setDrawer({
+			id: job.id,
+			edit
+		});
+	};
+	const mutate = function() {
+		var _ref = require_asyncToGenerator._asyncToGenerator(function* (job, operation, patch) {
+			if (writing.current) return false;
+			writing.current = true;
+			setBusyId(job.id);
+			try {
+				yield operation();
+				if (!disposed.current) {
+					var _changeCallback$curre2;
+					if (patch) setJobs((previous) => previous.map((row) => String(row.id) === String(job.id) ? require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, row), patch) : row));
+					yield load();
+					(_changeCallback$curre2 = changeCallback.current) === null || _changeCallback$curre2 === void 0 || _changeCallback$curre2.call(changeCallback, job.id);
+				}
+				return true;
+			} catch (error) {
+				if (!disposed.current) modal.error({ title: getText(require_serve.errorText(error)) });
+				return false;
+			} finally {
+				writing.current = false;
+				if (!disposed.current) setBusyId(void 0);
+			}
+		});
+		return function mutate(_x, _x2, _x3) {
+			return _ref.apply(this, arguments);
+		};
+	}();
+	const remove = function() {
+		var _ref2 = require_asyncToGenerator._asyncToGenerator(function* (job) {
+			if (yield confirm("removeConfirm")) {
+				if (yield mutate(job, () => require_serve.removeJob(client, job.id))) setJobs((previous) => previous.filter((row) => String(row.id) !== String(job.id)));
+			}
+		});
+		return function remove(_x4) {
+			return _ref2.apply(this, arguments);
+		};
+	}();
+	const cancel = function() {
+		var _ref3 = require_asyncToGenerator._asyncToGenerator(function* (job) {
+			if (yield confirm("cancelConfirm")) yield mutate(job, () => require_serve.updateJob(client, job.id, { status: "cancel" }), { status: "cancel" });
+		});
+		return function cancel(_x5) {
+			return _ref3.apply(this, arguments);
+		};
+	}();
+	const requestDates = function() {
+		var _ref4 = require_asyncToGenerator._asyncToGenerator(function* (change) {
+			const job = jobs.find((row) => String(row.id) === change.item.id);
+			if (!job || writing.current) return {
+				accepted: false,
+				reason: getText("pisell2.panpacific.task.requestFailed")
+			};
+			const currentRange = require_model.jobRange(job);
+			if (!currentRange || currentRange.start !== change.before.start || currentRange.endExclusive !== change.before.endExclusive) return {
+				accepted: false,
+				reason: getText("pisell2.panpacific.task.requestFailed")
+			};
+			const patch = require_model.shiftDates(job, change.after, change.action);
+			const accepted = yield mutate(job, () => require_serve.updateJob(client, job.id, patch), patch);
+			return require_objectSpread2._objectSpread2({ accepted }, accepted ? {} : { reason: getText("pisell2.panpacific.task.requestFailed") });
+		});
+		return function requestDates(_x6) {
+			return _ref4.apply(this, arguments);
+		};
+	}();
+	const statusOptions = require_model.displayStatuses.map((value) => ({
+		value,
+		label: getText(`pisell2.panpacific.task.${value}`)
+	}));
+	const statusSelect = (value, onChange) => /* @__PURE__ */ react.default.createElement(antd.Select, {
+		size: "small",
+		allowClear: true,
+		showSearch: true,
+		optionFilterProp: "label",
+		className: "pp-task-filter-status",
+		"aria-label": getText("pisell2.panpacific.task.status"),
+		placeholder: getText("pisell2.panpacific.task.allStatuses"),
+		options: [{
+			value: "",
+			label: getText("pisell2.panpacific.task.allStatuses")
+		}, ...statusOptions],
+		value: value || "",
+		onChange: (next) => onChange(next || void 0)
+	});
+	const deferredFilters = (0, react.useDeferredValue)(filters);
+	const filtered = (0, react.useMemo)(() => require_model.filterJobs(jobs, deferredFilters, base), [
+		jobs,
+		deferredFilters,
+		base
+	]);
+	(0, react.useEffect)(() => {
+		const last = Math.max(1, Math.ceil(filtered.length / pageSize));
+		if (page > last) setPage(last);
+	}, [
+		filtered.length,
+		page,
+		pageSize
+	]);
+	const updateFilter = (patch) => {
+		setFilters((previous) => Object.keys(patch).every((key) => previous[key] === patch[key]) ? previous : require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, previous), patch));
+		setPage(1);
+	};
+	const columns = [
+		{
+			key: "code",
+			title: getText("pisell2.panpacific.task.code"),
+			width: 230,
+			render: (_, job) => /* @__PURE__ */ react.default.createElement(antd.Button, {
+				type: "link",
+				className: "pp-task-code-link",
+				onClick: () => openJob(job)
+			}, job.job_number)
+		},
+		{
+			key: "supplier",
+			title: getText("pisell2.panpacific.task.supplier"),
+			width: 210,
+			render: (_, job) => require_model.companyName(job) || "—"
+		},
+		{
+			key: "schedule",
+			title: getText("pisell2.panpacific.task.schedule"),
+			width: 310,
+			render: (_, job) => `${require_model.scheduleText(job)} · ${getText("pisell2.panpacific.task.due")} ${require_model.dateText(job.due_date)}`
+		},
+		{
+			key: "due",
+			title: getText("pisell2.panpacific.task.due"),
+			width: 130,
+			render: (_, job) => require_model.dateText(job.due_date) || "—"
+		},
+		{
+			key: "status",
+			title: getText("pisell2.panpacific.task.status"),
+			width: 140,
+			render: (_, job) => /* @__PURE__ */ react.default.createElement(require_JobStatus.JobStatus, {
+				job,
+				getText
+			})
+		},
+		{
+			key: "items",
+			title: getText("pisell2.panpacific.task.items"),
+			width: 90,
+			render: (_, job) => {
+				var _job$job_materials$fi, _job$job_materials;
+				return (_job$job_materials$fi = (_job$job_materials = job.job_materials) === null || _job$job_materials === void 0 ? void 0 : _job$job_materials.filter((row) => row.deleted_at == null).length) !== null && _job$job_materials$fi !== void 0 ? _job$job_materials$fi : "—";
+			}
+		},
+		{
+			key: "payment",
+			title: getText("pisell2.panpacific.task.payment"),
+			width: 170,
+			render: (_, job) => [require_model.paymentTerm(job, base), job.payment_term_days != null ? `${job.payment_term_days} ${getText("pisell2.panpacific.task.dayUnit")}` : ""].filter(Boolean).join(" · ") || "—"
+		},
+		{
+			key: "actions",
+			fixed: "right",
+			title: getText("pisell2.panpacific.task.actions"),
+			width: 260,
+			render: (_, job) => /* @__PURE__ */ react.default.createElement("div", {
+				className: "pp-task-row-actions",
+				onClick: (event) => event.stopPropagation()
+			}, /* @__PURE__ */ react.default.createElement(antd.Button, {
+				size: "small",
+				onClick: () => openJob(job)
+			}, getText("pisell2.panpacific.task.view")), /* @__PURE__ */ react.default.createElement(antd.Button, {
+				size: "small",
+				onClick: () => openJob(job, true)
+			}, getText("pisell2.panpacific.task.edit")), /* @__PURE__ */ react.default.createElement(antd.Button, {
+				size: "small",
+				disabled: job.status === "cancel" || busyId != null,
+				onClick: () => cancel(job)
+			}, getText("pisell2.panpacific.task.cancelJob")), /* @__PURE__ */ react.default.createElement(antd.Button, {
+				size: "small",
+				danger: true,
+				disabled: busyId != null,
+				onClick: () => remove(job)
+			}, getText("pisell2.panpacific.task.remove")))
+		}
+	];
+	const selectedJobs = (0, react.useMemo)(() => require_model.jobsOnDate(jobs, selectedDate, period), [
+		jobs,
+		selectedDate,
+		period
+	]);
+	const items = (0, react.useMemo)(() => require_model.calendarItems(jobs), [jobs]);
+	const ganttStart = viewport.mode === "month" ? viewport.month + "-01" : viewport.range.start;
+	const ganttEnd = viewport.mode === "month" ? (0, dayjs.default)(ganttStart).add(1, "month").format("YYYY-MM-DD") : viewport.range.endExclusive;
+	const ganttItems = (0, react.useMemo)(() => require_model.calendarItems(require_model.filterJobs(jobs, { status: ganttStatus }, base)).filter((item) => item.range.start < ganttEnd && item.range.endExclusive > ganttStart), [
+		jobs,
+		ganttStatus,
+		base,
+		ganttStart,
+		ganttEnd
+	]);
+	const calendar = /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(require_JobStatus.StatusLegend, { getText }), /* @__PURE__ */ react.default.createElement("div", { className: "pp-task-calendar-layout" }, /* @__PURE__ */ react.default.createElement("div", { className: "pp-task-calendar-main" }, /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellCalendar, {
+		items,
+		today: require_model.dateText((0, dayjs.default)()),
+		month,
+		onMonthChange: setMonth,
+		selectedDate,
+		onSelectedDateChange: setSelectedDate,
+		displayMode: period ? "range" : "custom-date",
+		getDisplayDate: (item) => {
+			var _item$data;
+			return require_model.dateText((_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.due_date);
+		},
+		loading,
+		interaction: { move: true },
+		moveAnchor: "grabbed-date",
+		canStartInteraction: () => ({ allowed: !writing.current }),
+		onRequestChange: requestDates,
+		onChangeCommitted: (change) => setSelectedDate(change.target.date),
+		onItemClick: ({ item }) => item.data && openJob(item.data),
+		onDateDoubleClick: ({ date }) => {
+			setSelectedDate(date);
+			openCreate(require_model.draftFor(void 0, date));
+		},
+		selectedItemId: drawer && String(drawer.id),
+		density: "compact",
+		maxEventsPerDay: 4,
+		classNames: { overflowPanel: "pp-task-calendar-popup" },
+		locale,
+		toolbarExtra: /* @__PURE__ */ react.default.createElement("label", { className: "pp-task-period" }, /* @__PURE__ */ react.default.createElement(antd.Switch, {
+			size: "small",
+			checked: period,
+			onChange: setPeriod
+		}), getText("pisell2.panpacific.task.period")),
+		styles: { event: (ctx) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, require_model.jobStyle((ctx === null || ctx === void 0 ? void 0 : ctx.item.data) || {})), (ctx === null || ctx === void 0 ? void 0 : ctx.item.id) === hoveredJob ? {
+			outline: "2px solid #634db3",
+			outlineOffset: "-2px"
+		} : {}) },
+		renderEventContent: ({ item }) => /* @__PURE__ */ react.default.createElement("span", { className: "pp-task-event-content" }, /* @__PURE__ */ react.default.createElement("span", { title: item.title }, item.title), require_model.hasInvoice(item.data || {}) && /* @__PURE__ */ react.default.createElement(require_JobStatus.InvoiceMark, { getText }))
+	})), /* @__PURE__ */ react.default.createElement("aside", { className: "pp-task-calendar-side" }, /* @__PURE__ */ react.default.createElement("h2", null, selectedDate), /* @__PURE__ */ react.default.createElement("p", null, selectedJobs.length, " ", getText("pisell2.panpacific.task.job")), /* @__PURE__ */ react.default.createElement(antd.Button, {
+		block: true,
+		type: "primary",
+		onClick: () => openCreate()
+	}, "＋ ", getText("pisell2.panpacific.task.createJob")), /* @__PURE__ */ react.default.createElement("div", {
+		className: "pp-task-job-cards pp-job-list",
+		role: "list"
+	}, selectedJobs.length ? selectedJobs.map((job) => /* @__PURE__ */ react.default.createElement("div", {
+		role: "listitem",
+		key: String(job.id)
+	}, /* @__PURE__ */ react.default.createElement(require_JobCard.JobCard, {
+		job,
+		getText,
+		selected: String(drawer === null || drawer === void 0 ? void 0 : drawer.id) === String(job.id),
+		onOpen: () => openJob(job),
+		onHover: setHoveredJob
+	}))) : /* @__PURE__ */ react.default.createElement(antd.Empty, {
+		image: antd.Empty.PRESENTED_IMAGE_SIMPLE,
+		description: getText("pisell2.panpacific.task.noJobs")
+	})))));
+	const timeline = /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(require_JobStatus.StatusLegend, { getText }), /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellGantt, {
+		items: ganttItems,
+		today: require_model.dateText((0, dayjs.default)()),
+		viewport,
+		onViewportChange: setViewport,
+		loading,
+		locale,
+		rowHeight: 60,
+		getGroupKey: (item) => {
+			var _item$data2;
+			return ((_item$data2 = item.data) === null || _item$data2 === void 0 ? void 0 : _item$data2.status) || "create";
+		},
+		groups: require_model.statuses.filter((id) => ganttItems.some((item) => item.data.status === id)).map((id) => ({
+			id,
+			title: getText(`pisell2.panpacific.task.${id}`)
+		})),
+		collapsedGroupIds: collapsed,
+		onCollapsedGroupIdsChange: setCollapsed,
+		toolbarExtra: /* @__PURE__ */ react.default.createElement("label", { className: "pp-task-timeline-filter" }, /* @__PURE__ */ react.default.createElement("span", null, getText("pisell2.panpacific.task.status")), statusSelect(ganttStatus, setGanttStatus)),
+		selectedItemId: drawer && String(drawer.id),
+		onItemClick: ({ item }) => item.data && openJob(item.data),
+		interaction: {
+			move: true,
+			resizeStart: true,
+			resizeEnd: true
+		},
+		canStartInteraction: () => ({ allowed: !writing.current }),
+		onRequestChange: requestDates,
+		renderRowLabel: ({ item }) => /* @__PURE__ */ react.default.createElement(antd.Button, {
+			type: "text",
+			onClick: () => item.data && openJob(item.data)
+		}, item.title),
+		styles: { taskBar: (ctx) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, require_model.jobStyle((ctx === null || ctx === void 0 ? void 0 : ctx.item.data) || {})), {}, { border: "1px solid #d1d5db" }) },
+		renderTaskContent: ({ item }) => {
+			var _item$data3, _item$data4;
+			return /* @__PURE__ */ react.default.createElement("div", { className: "pp-task-gantt-content" }, /* @__PURE__ */ react.default.createElement("strong", null, item.title), /* @__PURE__ */ react.default.createElement("small", null, ((_item$data3 = item.data) === null || _item$data3 === void 0 ? void 0 : _item$data3.company_contact) || "—", " · ", require_model.dateText((_item$data4 = item.data) === null || _item$data4 === void 0 ? void 0 : _item$data4.due_date), require_model.hasInvoice(item.data || {}) && /* @__PURE__ */ react.default.createElement(require_JobStatus.InvoiceMark, { getText })));
+		}
+	}));
+	const list = /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", { className: "pp-task-filters" }, /* @__PURE__ */ react.default.createElement("label", null, /* @__PURE__ */ react.default.createElement("span", null, getText("pisell2.panpacific.task.search")), /* @__PURE__ */ react.default.createElement(antd.Input, {
+		allowClear: true,
+		placeholder: getText("pisell2.panpacific.task.searchHint"),
+		value: filters.search,
+		"aria-label": getText("pisell2.panpacific.task.search"),
+		onInput: (event) => updateFilter({ search: event.currentTarget.value }),
+		onChange: (event) => updateFilter({ search: event.target.value })
+	})), /* @__PURE__ */ react.default.createElement("label", null, /* @__PURE__ */ react.default.createElement("span", null, getText("pisell2.panpacific.task.due")), /* @__PURE__ */ react.default.createElement(antd.DatePicker, {
+		allowClear: true,
+		placeholder: getText("pisell2.panpacific.task.allDates"),
+		value: filters.due ? (0, dayjs.default)(filters.due) : null,
+		onChange: (value) => updateFilter({ due: require_model.dateText(value) })
+	})), /* @__PURE__ */ react.default.createElement("label", null, /* @__PURE__ */ react.default.createElement("span", null, getText("pisell2.panpacific.task.status")), statusSelect(filters.status, (status) => updateFilter({ status }))), /* @__PURE__ */ react.default.createElement(antd.Button, { onClick: () => {
+		setFilters({
+			search: "",
+			due: ""
+		});
+		setPage(1);
+	} }, getText("pisell2.panpacific.task.reset")), /* @__PURE__ */ react.default.createElement(antd.Button, {
+		type: "primary",
+		onClick: () => openCreate()
+	}, "＋ ", getText("pisell2.panpacific.task.createJob"))), /* @__PURE__ */ react.default.createElement(antd.Table, {
+		size: "small",
+		rowKey: (job) => String(job.id),
+		columns,
+		dataSource: filtered,
+		loading,
+		scroll: { x: 1640 },
+		locale: { emptyText: getText("pisell2.panpacific.task.noJobs") },
+		pagination: {
+			current: page,
+			pageSize,
+			showSizeChanger: true,
+			onChange: (next, size) => {
+				setPage(size !== pageSize ? 1 : next);
+				setPageSize(size);
+			}
+		},
+		onRow: (job) => ({ onClick: (event) => {
+			if (!event.target.closest("button, a, input")) openJob(job);
+		} })
+	}));
+	return /* @__PURE__ */ react.default.createElement("div", {
+		className: ["pp-task", props.className].filter(Boolean).join(" "),
+		style: props.style
+	}, modalContext, /* @__PURE__ */ react.default.createElement("header", { className: "pp-task-heading" }, /* @__PURE__ */ react.default.createElement("h1", null, getText("pisell2.panpacific.task.job"))), /* @__PURE__ */ react.default.createElement(antd.Tabs, {
+		activeKey: tab,
+		onChange: (value) => setTab(value),
+		destroyInactiveTabPane: true,
+		items: [
+			{
+				key: "calendar",
+				label: getText("pisell2.panpacific.task.calendar"),
+				children: calendar
+			},
+			{
+				key: "timeline",
+				label: getText("pisell2.panpacific.task.timeline"),
+				children: timeline
+			},
+			{
+				key: "list",
+				label: getText("pisell2.panpacific.task.list"),
+				children: list
+			}
+		]
+	}), /* @__PURE__ */ react.default.createElement(antd.Modal, {
+		open: !!draft,
+		title: getText("pisell2.panpacific.task.createJob"),
+		width: "min(1100px, 96vw)",
+		wrapClassName: "pp-task-overlay pp-task-modal",
+		footer: null,
+		destroyOnClose: true,
+		maskClosable: false,
+		onCancel: () => {
+			var _editorRef$current;
+			return (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.close();
+		},
+		bodyStyle: {
+			maxHeight: "76vh",
+			overflowY: "auto",
+			position: "relative"
+		}
+	}, draft && /* @__PURE__ */ react.default.createElement(require_JobForm.JobForm, {
+		key: editorKey,
+		ref: editorRef,
+		initial: draft,
+		jobs,
+		base,
+		request: client,
+		getText,
+		confirmDiscard: () => confirm("discardConfirm"),
+		onCancel: () => {
+			setDraft(void 0);
+			load();
+		},
+		onSaved: (id, values) => {
+			var _jobRange;
+			const date = period ? (_jobRange = require_model.jobRange(values)) === null || _jobRange === void 0 ? void 0 : _jobRange.start : require_model.dateText(values.due_date);
+			if (date) {
+				setSelectedDate(date);
+				setMonth(date.slice(0, 7));
+				setViewport({
+					mode: "month",
+					month: date.slice(0, 7)
+				});
+			}
+			setDraft(void 0);
+			changed(id);
+		}
+	})), drawer && /* @__PURE__ */ react.default.createElement(require_JobDrawer.JobDrawer, {
+		key: `${drawer.id}:${!!drawer.edit}`,
+		id: drawer.id,
+		startEditing: drawer.edit,
+		jobs,
+		base,
+		request: client,
+		getText,
+		uploadPhoto,
+		confirm,
+		onClose: () => {
+			setDrawer(void 0);
+			load();
+		},
+		onChanged: changed,
+		onDuplicate: (initial) => {
+			setDrawer(void 0);
+			openCreate(initial);
+		}
+	}));
+}
+//#endregion
+exports.default = PanpacificTask;

package/lib/plus/panpacificTask/PhotoPreview.js

@@ -0,0 +1,39 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_attachments = require("./attachments.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let antd = require("antd");
+let _ant_design_icons = require("@ant-design/icons");
+//#region src/plus/panpacificTask/PhotoPreview.tsx
+function PhotoPreview({ value, label, compact, disabled, getText, onRemove }) {
+	const [visible, setVisible] = (0, react.useState)(false);
+	const images = require_attachments.attachments(value);
+	const remove = (index) => {
+		if (disabled || !onRemove) return;
+		setVisible(false);
+		onRemove(index);
+	};
+	const removeLabel = getText("pisell2.panpacific.task.removePhoto");
+	return /* @__PURE__ */ react.default.createElement(antd.Image.PreviewGroup, { preview: {
+		visible,
+		onVisibleChange: setVisible,
+		rootClassName: "pp-task-photo-preview",
+		toolbarRender: (toolbar, { current }) => /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, toolbar, onRemove && /* @__PURE__ */ react.default.createElement(antd.Button, {
+			className: "pp-task-photo-preview-remove",
+			danger: true,
+			icon: /* @__PURE__ */ react.default.createElement(_ant_design_icons.DeleteOutlined, null),
+			disabled,
+			onClick: () => remove(current)
+		}, removeLabel))
+	} }, images.map((item, index) => /* @__PURE__ */ react.default.createElement("figure", {
+		className: "pp-task-photo",
+		key: `${item.url}-${index}`
+	}, /* @__PURE__ */ react.default.createElement(antd.Image, {
+		width: compact ? 38 : 92,
+		height: compact ? 38 : 72,
+		src: item.url,
+		alt: item.name || label || getText("pisell2.panpacific.task.photo")
+	}), !compact && /* @__PURE__ */ react.default.createElement("figcaption", null, label || item.name))));
+}
+//#endregion
+exports.PhotoPreview = PhotoPreview;