// 共用 React 元件
const { useState, useEffect, useRef } = React;
// ── Icons ─────────────────────────────────────────────────────────────────────
const Icon = {
Edit: () => (
),
ArrowRight: () => (
),
Undo: () => (
),
More: () => (
),
Eye: () => (
),
Plus: () => (
),
Check: () => (
),
Trash: () => (
),
Printer: () => (
),
Warning: () => (
),
Refresh: () => (
),
Table: () => (
),
Card: () => (
),
Settings: () => (
),
Tv: () => (
),
Print: () => (
),
};
// ── Status helpers ─────────────────────────────────────────────────────────────
const STATUS_LABEL = { pending: '未完成', inprogress: '製作中', done: '已完成', urgent: '緊急' };
function StatusPill({ status, manualOverride }) {
return (
{STATUS_LABEL[status]}
{manualOverride && ·手動}
);
}
// ── Modal shell ────────────────────────────────────────────────────────────────
function Modal({ size = 'md', title, onClose, footer, children }) {
useEffect(() => {
const h = (e) => { if (e.key === 'Escape') onClose && onClose(); };
window.addEventListener('keydown', h);
return () => window.removeEventListener('keydown', h);
}, [onClose]);
return (
{ if (e.target === e.currentTarget) onClose && onClose(); }}>
{children}
{footer &&
{footer}
}
{onDeleteOption && (
)}
{showManage && onDeleteOption && (
管理選項（點 × 刪除）
{options.length === 0 &&
尚無自訂選項
}
{options.map(o => (
{o}
))}
)}
);
}
// ── Print qty input ────────────────────────────────────────────────────────────
function PrintQtyRow({ value, onChange, presets = [] }) {
return (
onChange(Math.max(0, parseInt(e.target.value || '0', 10)))}
/>
份
{presets.length > 0 && (
{presets.map(p => )}
)}
);
}
// ── Item cell (table) ──────────────────────────────────────────────────────────
function ItemCell({ itemKey, item, onClick }) {
const label = window.PRODUCTION_ITEM_SHORT[itemKey];
const isProcess = itemKey === 'process';
const isPrintable = window.IS_PRINTABLE(itemKey);
const notNeeded = !!item.notNeeded;
const state = notNeeded ? 'not-needed' : (item.done ? 'done' : '');
const tooltip = notNeeded
? '標記為不需製作'
: (item.done ? `完成於 ${item.date}${isPrintable ? ` · 印刷 ${item.printQty} 份` : ''}` : `點擊標記 ${label} 完成`);
return (
);
}
// ── Confirm complete dialog ────────────────────────────────────────────────────
function ConfirmCompleteDialog({ caseItem, itemKey, onCancel, onConfirm }) {
const today = window.todayISO();
const [date, setDate] = useState(today);
const isPrintable = window.IS_PRINTABLE(itemKey);
const defaultQty = itemKey === 'calendar' ? 80 : (itemKey === 'photo' ? 2 : 1);
const [qty, setQty] = useState(defaultQty);
const label = window.PRODUCTION_ITEM_LABELS[itemKey];
const presets = itemKey === 'calendar' ? [50, 80, 100, 150] : (itemKey === 'photo' ? [1, 2, 3] : [1, 2]);
return (
}
>
是否確定「{label}」已完成?
- 案件編號
- {caseItem.id}
- 案名
- {caseItem.name}
- 禮儀師
- {caseItem.director}
- 告別式
- {caseItem.funeralDate}
setDate(e.target.value)} style={{ minWidth: 160 }} />
{isPrintable && }
);
}
// ── Process picker dialog ──────────────────────────────────────────────────────
function ProcessPickerDialog({ caseItem, onCancel, onConfirm }) {
const today = window.todayISO();
const existing = caseItem.items.process;
const getInitialMode = () =>
(existing.value === '合一' || existing.value === '致謝+流程') ? 'print' : 'tv';
const getInitialSub = () =>
existing.value === '致謝+流程' ? '致謝+流程' : '合一';
const [mode, setMode] = useState(getInitialMode());
const [printSub, setPrintSub] = useState(getInitialSub());
const [date, setDate] = useState(today);
const [qty, setQty] = useState(existing.printQty || 1);
const isPrint = mode === 'print';
const finalValue = isPrint ? printSub : '小電視';
return (
}
>
{isPrint && (
印刷類型
{['合一', '致謝+流程'].map(opt => (
))}
)}
setDate(e.target.value)} style={{ minWidth: 160 }} />
{isPrint && }
);
}
// ── Edit date dialog ───────────────────────────────────────────────────────────
function EditDateDialog({ caseItem, itemKey, onCancel, onSave, onUndo, onToggleNotNeeded }) {
const item = caseItem.items[itemKey];
const [date, setDate] = useState(item.date || window.todayISO());
const isPrintable = window.IS_PRINTABLE(itemKey);
const [qty, setQty] = useState(item.printQty || 0);
const label = window.PRODUCTION_ITEM_LABELS[itemKey];
const notNeeded = !!item.notNeeded;
const presets = itemKey === 'calendar' ? [50, 80, 100, 150] : (itemKey === 'photo' ? [1, 2, 3] : [1, 2]);
return (
{!notNeeded && }
}
>
{caseItem.name} · 「{label}」
目前標記為 {notNeeded ? 不需製作 : 已完成}。
{!notNeeded && (<>
setDate(e.target.value)} style={{ minWidth: 160 }} />
{isPrintable && }
)}
);
}
// ── Context menu ───────────────────────────────────────────────────────────────
function ContextMenu({ x, y, caseItem, onAction, onClose }) {
const ref = useRef();
useEffect(() => {
const h = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); };
document.addEventListener('mousedown', h);
return () => document.removeEventListener('mousedown', h);
}, [onClose]);
const adjX = Math.min(x, window.innerWidth - 220);
const adjY = Math.min(y, window.innerHeight - 280);
const status = window.effectiveStatus(caseItem);
return (
案件 {caseItem.id}
變更狀態
{status !== 'pending' && (
)}
{status !== 'inprogress' && (
)}
{status !== 'done' && (
)}
{caseItem.manualStatus && (
)}
);
}
// ── Conflict modal ─────────────────────────────────────────────────────────────
function ConflictModal({ caseName, onReload, onCancel }) {
return (
資料衝突}
onClose={onCancel}
footer={<>
}
>
⚠ 此案件已被其他使用者修改
「{caseName}」在您編輯期間已被更新。
點擊「重新載入」可取得最新版本，
您未儲存的變更將會遺失。
);
}
Object.assign(window, {
Icon, StatusPill, Modal, ItemCell,
ConfirmCompleteDialog, ProcessPickerDialog, EditDateDialog,
ContextMenu, ConflictModal,
STATUS_LABEL, EditableSelect, PrintQtyRow,
});