@pisell/private-materials 6.3.220 → 6.3.222

package/es/plus/panpacificTask/JobStatus.js

@@ -0,0 +1,29 @@
+import { displayStatus, displayStatuses, hasInvoice, jobStyle, statusColors } from "./model.js";
+import React from "react";
+//#region src/plus/panpacificTask/JobStatus.tsx
+function JobStatus({ job, getText }) {
+	const status = displayStatus(job);
+	return /* @__PURE__ */ React.createElement("span", {
+		className: "pp-task-status",
+		"data-status": status,
+		style: jobStyle(job)
+	}, getText(`pisell2.panpacific.task.${status}`), hasInvoice(job) && /* @__PURE__ */ React.createElement(InvoiceMark, { getText }));
+}
+function InvoiceMark({ getText }) {
+	return /* @__PURE__ */ React.createElement("svg", {
+		className: "pp-task-invoice",
+		width: "12",
+		height: "12",
+		viewBox: "0 0 16 16",
+		role: "img",
+		"aria-label": getText("pisell2.panpacific.task.invoice")
+	}, /* @__PURE__ */ React.createElement("path", {
+		fill: "currentColor",
+		d: "M3 1h10a1 1 0 0 1 1 1v12l-2-1.5L10 14l-2-1.5L6 14l-2-1.5L2 14V2a1 1 0 0 1 1-1zm1 3v1h8V4H4zm0 2v1h5V6H4zm0 2v1h8V8H4z"
+	}));
+}
+function StatusLegend({ getText }) {
+	return /* @__PURE__ */ React.createElement("div", { className: "pp-task-legend" }, displayStatuses.map((status) => /* @__PURE__ */ React.createElement("span", { key: status }, /* @__PURE__ */ React.createElement("i", { style: { background: statusColors[status] } }), getText(`pisell2.panpacific.task.${status}`), status === "invoice" && /* @__PURE__ */ React.createElement(InvoiceMark, { getText }))));
+}
+//#endregion
+export { InvoiceMark, JobStatus, StatusLegend };

package/es/plus/panpacificTask/PanpacificTask.d.ts

@@ -0,0 +1,7 @@
+import { PanpacificTaskProps } from "./types.js";
+import React from "react";
+//#region src/plus/panpacificTask/PanpacificTask.d.ts
+/** Complete #task workspace. All UI state belongs to this component, including its overlays. */
+declare function PanpacificTask(props: PanpacificTaskProps): React.JSX.Element;
+//#endregion
+export { PanpacificTask };

package/es/plus/panpacificTask/PanpacificTask.js

@@ -0,0 +1,552 @@
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
+import { _asyncToGenerator } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js";
+import useEngineContext from "../../hooks/useEngineContext.js";
+import { request } from "../../utils/index.js";
+import { defaultPhotoUploader } from "./attachments.js";
+import { calendarItems, companyName, dateText, displayStatuses, draftFor, emptyBase, filterJobs, hasInvoice, jobRange, jobStyle, jobsOnDate, paymentTerm, scheduleText, shiftDates, statuses } from "./model.js";
+import { errorText, getJobBaseData, getJobs, removeJob, updateJob } from "./serve.js";
+import { JobForm } from "./JobForm.js";
+import { InvoiceMark, JobStatus, StatusLegend } from "./JobStatus.js";
+import { JobDrawer } from "./JobDrawer.js";
+import { JobCard } from "./JobCard.js";
+import locales$1 from "./locales.js";
+import dayjs from "dayjs";
+import React, { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
+import { Button, ConfigProvider, DatePicker, Empty, Input, Modal, Select, Switch, Table, Tabs } from "antd";
+import { locales } from "@pisell/utils";
+import { PisellCalendar, PisellGantt } from "@pisell/materials";
+import "./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.createElement(ConfigProvider, {
+		prefixCls: "pisell-lowcode",
+		componentSize: "middle",
+		theme: { token: {
+			colorPrimary: "#634db3",
+			controlHeight: 38,
+			controlHeightSM: 38
+		} }
+	}, /* @__PURE__ */ React.createElement(TaskWorkspace, props));
+}
+function TaskWorkspace(props) {
+	var _context$appHelper, _context$engine, _context$appHelper2;
+	const context = useEngineContext();
+	const utils = (context === null || context === void 0 || (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.utils) || {};
+	if (utils.request) 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";
+	locales.init(locales$1, locale);
+	const getText = locales.getText;
+	const client = useMemo(() => utils.request || 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 = useMemo(() => props.uploadPhoto || defaultPhotoUploader({
+		mediaUploadUrl,
+		getHeaders
+	}), [
+		props.uploadPhoto,
+		mediaUploadUrl,
+		getHeaders
+	]);
+	const [modal, modalContext] = Modal.useModal();
+	const [tab, setTab] = useState(props.defaultTab || "calendar");
+	const [jobs, setJobs] = useState([]);
+	const [base, setBase] = useState(emptyBase);
+	const [loading, setLoading] = useState(false);
+	const [busyId, setBusyId] = useState();
+	const [month, setMonth] = useState(dayjs().format("YYYY-MM"));
+	const [selectedDate, setSelectedDate] = useState(dateText(dayjs()));
+	const [period, setPeriod] = useState(false);
+	const [viewport, setViewport] = useState({
+		mode: "month",
+		month
+	});
+	const [ganttStatus, setGanttStatus] = useState();
+	const [hoveredJob, setHoveredJob] = useState();
+	const [collapsed, setCollapsed] = useState([]);
+	const [filters, setFilters] = useState({
+		search: "",
+		due: ""
+	});
+	const [page, setPage] = useState(1);
+	const [pageSize, setPageSize] = useState(10);
+	const [drawer, setDrawer] = useState();
+	const [draft, setDraft] = useState();
+	const [editorKey, setEditorKey] = useState(0);
+	const editorRef = useRef(null);
+	const disposed = useRef(false);
+	const readSequence = useRef(0);
+	const writing = useRef(false);
+	const changeCallback = useRef(props.onJobChange);
+	changeCallback.current = props.onJobChange;
+	const load = useCallback(_asyncToGenerator(function* () {
+		const token = ++readSequence.current;
+		setLoading(true);
+		try {
+			const result = yield 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]);
+	useEffect(() => {
+		disposed.current = false;
+		let cancelled = false;
+		load();
+		getJobBaseData(client).then((result) => {
+			if (!cancelled) setBase((previous) => _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 = 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 = _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) ? _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(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 = _asyncToGenerator(function* (job) {
+			if (yield confirm("removeConfirm")) {
+				if (yield mutate(job, () => 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 = _asyncToGenerator(function* (job) {
+			if (yield confirm("cancelConfirm")) yield mutate(job, () => updateJob(client, job.id, { status: "cancel" }), { status: "cancel" });
+		});
+		return function cancel(_x5) {
+			return _ref3.apply(this, arguments);
+		};
+	}();
+	const requestDates = function() {
+		var _ref4 = _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 = 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 = shiftDates(job, change.after, change.action);
+			const accepted = yield mutate(job, () => updateJob(client, job.id, patch), patch);
+			return _objectSpread2({ accepted }, accepted ? {} : { reason: getText("pisell2.panpacific.task.requestFailed") });
+		});
+		return function requestDates(_x6) {
+			return _ref4.apply(this, arguments);
+		};
+	}();
+	const statusOptions = displayStatuses.map((value) => ({
+		value,
+		label: getText(`pisell2.panpacific.task.${value}`)
+	}));
+	const statusSelect = (value, onChange) => /* @__PURE__ */ React.createElement(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 = useDeferredValue(filters);
+	const filtered = useMemo(() => filterJobs(jobs, deferredFilters, base), [
+		jobs,
+		deferredFilters,
+		base
+	]);
+	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 : _objectSpread2(_objectSpread2({}, previous), patch));
+		setPage(1);
+	};
+	const columns = [
+		{
+			key: "code",
+			title: getText("pisell2.panpacific.task.code"),
+			width: 230,
+			render: (_, job) => /* @__PURE__ */ React.createElement(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) => companyName(job) || "—"
+		},
+		{
+			key: "schedule",
+			title: getText("pisell2.panpacific.task.schedule"),
+			width: 310,
+			render: (_, job) => `${scheduleText(job)} · ${getText("pisell2.panpacific.task.due")} ${dateText(job.due_date)}`
+		},
+		{
+			key: "due",
+			title: getText("pisell2.panpacific.task.due"),
+			width: 130,
+			render: (_, job) => dateText(job.due_date) || "—"
+		},
+		{
+			key: "status",
+			title: getText("pisell2.panpacific.task.status"),
+			width: 140,
+			render: (_, job) => /* @__PURE__ */ React.createElement(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) => [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.createElement("div", {
+				className: "pp-task-row-actions",
+				onClick: (event) => event.stopPropagation()
+			}, /* @__PURE__ */ React.createElement(Button, {
+				size: "small",
+				onClick: () => openJob(job)
+			}, getText("pisell2.panpacific.task.view")), /* @__PURE__ */ React.createElement(Button, {
+				size: "small",
+				onClick: () => openJob(job, true)
+			}, getText("pisell2.panpacific.task.edit")), /* @__PURE__ */ React.createElement(Button, {
+				size: "small",
+				disabled: job.status === "cancel" || busyId != null,
+				onClick: () => cancel(job)
+			}, getText("pisell2.panpacific.task.cancelJob")), /* @__PURE__ */ React.createElement(Button, {
+				size: "small",
+				danger: true,
+				disabled: busyId != null,
+				onClick: () => remove(job)
+			}, getText("pisell2.panpacific.task.remove")))
+		}
+	];
+	const selectedJobs = useMemo(() => jobsOnDate(jobs, selectedDate, period), [
+		jobs,
+		selectedDate,
+		period
+	]);
+	const items = useMemo(() => calendarItems(jobs), [jobs]);
+	const ganttStart = viewport.mode === "month" ? viewport.month + "-01" : viewport.range.start;
+	const ganttEnd = viewport.mode === "month" ? dayjs(ganttStart).add(1, "month").format("YYYY-MM-DD") : viewport.range.endExclusive;
+	const ganttItems = useMemo(() => calendarItems(filterJobs(jobs, { status: ganttStatus }, base)).filter((item) => item.range.start < ganttEnd && item.range.endExclusive > ganttStart), [
+		jobs,
+		ganttStatus,
+		base,
+		ganttStart,
+		ganttEnd
+	]);
+	const calendar = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(StatusLegend, { getText }), /* @__PURE__ */ React.createElement("div", { className: "pp-task-calendar-layout" }, /* @__PURE__ */ React.createElement("div", { className: "pp-task-calendar-main" }, /* @__PURE__ */ React.createElement(PisellCalendar, {
+		items,
+		today: dateText(dayjs()),
+		month,
+		onMonthChange: setMonth,
+		selectedDate,
+		onSelectedDateChange: setSelectedDate,
+		displayMode: period ? "range" : "custom-date",
+		getDisplayDate: (item) => {
+			var _item$data;
+			return 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(draftFor(void 0, date));
+		},
+		selectedItemId: drawer && String(drawer.id),
+		density: "compact",
+		maxEventsPerDay: 4,
+		classNames: { overflowPanel: "pp-task-calendar-popup" },
+		locale,
+		toolbarExtra: /* @__PURE__ */ React.createElement("label", { className: "pp-task-period" }, /* @__PURE__ */ React.createElement(Switch, {
+			size: "small",
+			checked: period,
+			onChange: setPeriod
+		}), getText("pisell2.panpacific.task.period")),
+		styles: { event: (ctx) => _objectSpread2(_objectSpread2({}, 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.createElement("span", { className: "pp-task-event-content" }, /* @__PURE__ */ React.createElement("span", { title: item.title }, item.title), hasInvoice(item.data || {}) && /* @__PURE__ */ React.createElement(InvoiceMark, { getText }))
+	})), /* @__PURE__ */ React.createElement("aside", { className: "pp-task-calendar-side" }, /* @__PURE__ */ React.createElement("h2", null, selectedDate), /* @__PURE__ */ React.createElement("p", null, selectedJobs.length, " ", getText("pisell2.panpacific.task.job")), /* @__PURE__ */ React.createElement(Button, {
+		block: true,
+		type: "primary",
+		onClick: () => openCreate()
+	}, "＋ ", getText("pisell2.panpacific.task.createJob")), /* @__PURE__ */ React.createElement("div", {
+		className: "pp-task-job-cards pp-job-list",
+		role: "list"
+	}, selectedJobs.length ? selectedJobs.map((job) => /* @__PURE__ */ React.createElement("div", {
+		role: "listitem",
+		key: String(job.id)
+	}, /* @__PURE__ */ React.createElement(JobCard, {
+		job,
+		getText,
+		selected: String(drawer === null || drawer === void 0 ? void 0 : drawer.id) === String(job.id),
+		onOpen: () => openJob(job),
+		onHover: setHoveredJob
+	}))) : /* @__PURE__ */ React.createElement(Empty, {
+		image: Empty.PRESENTED_IMAGE_SIMPLE,
+		description: getText("pisell2.panpacific.task.noJobs")
+	})))));
+	const timeline = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(StatusLegend, { getText }), /* @__PURE__ */ React.createElement(PisellGantt, {
+		items: ganttItems,
+		today: dateText(dayjs()),
+		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: 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.createElement("label", { className: "pp-task-timeline-filter" }, /* @__PURE__ */ React.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.createElement(Button, {
+			type: "text",
+			onClick: () => item.data && openJob(item.data)
+		}, item.title),
+		styles: { taskBar: (ctx) => _objectSpread2(_objectSpread2({}, 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.createElement("div", { className: "pp-task-gantt-content" }, /* @__PURE__ */ React.createElement("strong", null, item.title), /* @__PURE__ */ React.createElement("small", null, ((_item$data3 = item.data) === null || _item$data3 === void 0 ? void 0 : _item$data3.company_contact) || "—", " · ", dateText((_item$data4 = item.data) === null || _item$data4 === void 0 ? void 0 : _item$data4.due_date), hasInvoice(item.data || {}) && /* @__PURE__ */ React.createElement(InvoiceMark, { getText })));
+		}
+	}));
+	const list = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "pp-task-filters" }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("span", null, getText("pisell2.panpacific.task.search")), /* @__PURE__ */ React.createElement(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.createElement("label", null, /* @__PURE__ */ React.createElement("span", null, getText("pisell2.panpacific.task.due")), /* @__PURE__ */ React.createElement(DatePicker, {
+		allowClear: true,
+		placeholder: getText("pisell2.panpacific.task.allDates"),
+		value: filters.due ? dayjs(filters.due) : null,
+		onChange: (value) => updateFilter({ due: dateText(value) })
+	})), /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("span", null, getText("pisell2.panpacific.task.status")), statusSelect(filters.status, (status) => updateFilter({ status }))), /* @__PURE__ */ React.createElement(Button, { onClick: () => {
+		setFilters({
+			search: "",
+			due: ""
+		});
+		setPage(1);
+	} }, getText("pisell2.panpacific.task.reset")), /* @__PURE__ */ React.createElement(Button, {
+		type: "primary",
+		onClick: () => openCreate()
+	}, "＋ ", getText("pisell2.panpacific.task.createJob"))), /* @__PURE__ */ React.createElement(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.createElement("div", {
+		className: ["pp-task", props.className].filter(Boolean).join(" "),
+		style: props.style
+	}, modalContext, /* @__PURE__ */ React.createElement("header", { className: "pp-task-heading" }, /* @__PURE__ */ React.createElement("h1", null, getText("pisell2.panpacific.task.job"))), /* @__PURE__ */ React.createElement(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.createElement(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.createElement(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 = jobRange(values)) === null || _jobRange === void 0 ? void 0 : _jobRange.start : 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.createElement(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
+export { PanpacificTask as default };

package/es/plus/panpacificTask/PhotoPreview.js

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