428 lines
22 KiB
JavaScript
428 lines
22 KiB
JavaScript
// SchedulesPage — mirrors the Tasks 3-pane shell: list | detail | history
|
|
// Data model derives from ui/src/pages/SchedulesPage.tsx.
|
|
|
|
const DAYS = ['日', '月', '火', '水', '木', '金', '土'];
|
|
|
|
function parseCronToDisplay(cron) {
|
|
if (cron === 'once') return '一回のみ';
|
|
const parts = (cron || '').split(' ');
|
|
if (parts.length !== 5) return cron;
|
|
const [min, hour, dom, , dow] = parts;
|
|
const hhmm = `${hour}:${String(min).padStart(2, '0')}`;
|
|
if (dom !== '*' && dow === '*') return `毎月${dom}日 ${hhmm}`;
|
|
if (dow !== '*' && dom === '*') return `毎週${DAYS[Number(dow)] ?? dow}曜 ${hhmm}`;
|
|
if (dom === '*' && dow === '*') return `毎日 ${hhmm}`;
|
|
return cron;
|
|
}
|
|
|
|
function formatDateShort(iso) {
|
|
if (!iso) return '—';
|
|
const d = new Date(iso);
|
|
return d.toLocaleString('ja-JP', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' });
|
|
}
|
|
|
|
function relativeFromNow(iso) {
|
|
if (!iso) return '—';
|
|
const diff = new Date(iso).getTime() - Date.now();
|
|
const abs = Math.abs(diff);
|
|
const mins = Math.round(abs / 60000);
|
|
const hrs = Math.round(mins / 60);
|
|
const days = Math.round(hrs / 24);
|
|
const unit = mins < 60 ? `${mins}分` : hrs < 24 ? `${hrs}時間` : `${days}日`;
|
|
return diff >= 0 ? `${unit}後` : `${unit}前`;
|
|
}
|
|
|
|
// ── Left: list of schedules ──────────────────────────────────────────────
|
|
function ScheduleListItem({ sch, active, onClick }) {
|
|
return (
|
|
<button onClick={onClick} style={{
|
|
width: '100%', textAlign: 'left', padding: '10px 12px', borderRadius: 12,
|
|
border: '1px solid ' + (active ? '#3b82f6' : '#e2e8f0'),
|
|
background: active ? '#eff6ff' : '#fff',
|
|
cursor: 'pointer', transition: 'background .15s', fontFamily: 'inherit',
|
|
}}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
|
|
<span style={{
|
|
width: 8, height: 8, borderRadius: 9999, flexShrink: 0,
|
|
background: sch.isActive ? '#22c55e' : '#cbd5e1',
|
|
}} />
|
|
<div style={{
|
|
flex: 1, minWidth: 0,
|
|
fontSize: 13, fontWeight: 700, color: sch.isActive ? '#0f172a' : '#64748b',
|
|
overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
|
|
}}>{sch.title || 'タイトルなし'}</div>
|
|
{sch.triggerKind === 'event' && (
|
|
<span style={{
|
|
fontSize: 10, fontWeight: 700, color: '#5b21b6', background: '#ede9fe',
|
|
padding: '2px 6px', borderRadius: 4, flexShrink: 0,
|
|
}}>event</span>
|
|
)}
|
|
</div>
|
|
<div style={{ marginTop: 4, fontSize: 11, color: '#64748b', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
|
{sch.triggerKind === 'event' ? sch.eventSource : parseCronToDisplay(sch.cronExpression)}
|
|
</div>
|
|
<div style={{ marginTop: 2, fontSize: 10, color: '#94a3b8' }}>
|
|
{sch.isActive
|
|
? (sch.nextRunAt ? `次回 ${formatDateShort(sch.nextRunAt)} (${relativeFromNow(sch.nextRunAt)})` : '次回未定')
|
|
: '停止中'}
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
function ScheduleListPane({ items, activeId, onSelect, filter, setFilter, search, setSearch, onOpenCreate }) {
|
|
const filtered = items.filter(s => {
|
|
if (filter === 'active' && !s.isActive) return false;
|
|
if (filter === 'paused' && s.isActive) return false;
|
|
if (filter === 'event' && s.triggerKind !== 'event') return false;
|
|
if (search && !(s.title + s.body).toLowerCase().includes(search.toLowerCase())) return false;
|
|
return true;
|
|
});
|
|
const counts = {
|
|
all: items.length,
|
|
active: items.filter(s => s.isActive).length,
|
|
paused: items.filter(s => !s.isActive).length,
|
|
event: items.filter(s => s.triggerKind === 'event').length,
|
|
};
|
|
const chipStyle = (on) => ({
|
|
flexShrink: 0, padding: '6px 10px', borderRadius: 9999,
|
|
fontSize: 11, fontWeight: 700, whiteSpace: 'nowrap', cursor: 'pointer',
|
|
border: '1px solid ' + (on ? '#2563eb' : '#e2e8f0'),
|
|
background: on ? '#eff6ff' : '#fff',
|
|
color: on ? '#1d4ed8' : '#64748b', fontFamily: 'inherit',
|
|
});
|
|
return (
|
|
<div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
|
|
<button onClick={onOpenCreate} style={{
|
|
width: '100%', padding: '10px 14px', marginBottom: 10, background: '#2563eb',
|
|
color: '#fff', borderRadius: 12, fontSize: 13, fontWeight: 700, border: 'none',
|
|
cursor: 'pointer', fontFamily: 'inherit', display: 'inline-flex', alignItems: 'center',
|
|
justifyContent: 'center', gap: 6, boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
|
}}>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
|
|
新しいスケジュール
|
|
</button>
|
|
<div style={{
|
|
display: 'flex', alignItems: 'center', gap: 10, fontSize: 11,
|
|
color: '#64748b', padding: '0 2px 10px',
|
|
}}>
|
|
<span><b style={{ color: '#334155', fontWeight: 700 }}>{counts.all}</b> 件</span>
|
|
<span style={{ color: '#cbd5e1' }}>·</span>
|
|
<span><b style={{ color: '#16a34a', fontWeight: 700 }}>{counts.active}</b> 有効</span>
|
|
{counts.paused > 0 && <span><b style={{ color: '#64748b', fontWeight: 700 }}>{counts.paused}</b> 停止</span>}
|
|
</div>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 8, paddingBottom: 12, borderBottom: '1px solid #e2e8f0' }}>
|
|
<div style={{
|
|
display: 'flex', alignItems: 'center', gap: 8, background: '#fff', border: '1px solid #e2e8f0',
|
|
borderRadius: 12, padding: '6px 12px', boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
|
}}>
|
|
<IconSearch width={14} height={14} style={{ color: '#94a3b8', flexShrink: 0 }} />
|
|
<input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="検索..."
|
|
style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontSize: 13, fontFamily: 'inherit', color: '#0f172a', minWidth: 0 }} />
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 6, overflowX: 'auto', paddingBottom: 4 }}>
|
|
<button style={chipStyle(filter === 'all')} onClick={() => setFilter('all')}>All <span style={{ color: '#94a3b8', marginLeft: 2 }}>{counts.all}</span></button>
|
|
<button style={chipStyle(filter === 'active')} onClick={() => setFilter('active')}>有効 <span style={{ color: '#94a3b8', marginLeft: 2 }}>{counts.active}</span></button>
|
|
<button style={chipStyle(filter === 'paused')} onClick={() => setFilter('paused')}>停止 <span style={{ color: '#94a3b8', marginLeft: 2 }}>{counts.paused}</span></button>
|
|
<button style={chipStyle(filter === 'event')} onClick={() => setFilter('event')}>Event <span style={{ color: '#94a3b8', marginLeft: 2 }}>{counts.event}</span></button>
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 8, overflowY: 'auto', flex: 1, minHeight: 0 }}>
|
|
{filtered.map(s => <ScheduleListItem key={s.id} sch={s} active={activeId === s.id} onClick={() => onSelect(s.id)} />)}
|
|
{filtered.length === 0 && (
|
|
(search || filter !== 'all') ? (
|
|
<EmptyState
|
|
compact
|
|
icon={<IconSearch width={18} height={18} />}
|
|
title="該当するスケジュールはありません"
|
|
hint="検索やフィルタを変えてみてください。"
|
|
action={
|
|
<button onClick={() => { setSearch(''); setFilter('all'); }} style={{
|
|
padding: '6px 12px', borderRadius: 8, fontSize: 12, fontWeight: 700,
|
|
background: '#fff', border: '1px solid #e2e8f0', color: '#334155',
|
|
cursor: 'pointer', fontFamily: 'inherit',
|
|
}}>フィルタをクリア</button>
|
|
}
|
|
/>
|
|
) : (
|
|
<EmptyState
|
|
compact
|
|
icon={<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>}
|
|
title="スケジュールがありません"
|
|
hint="定期実行やイベントトリガーを登録するとここに表示されます。"
|
|
/>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Center: schedule detail editor ───────────────────────────────────────
|
|
function FormRow({ label, help, children }) {
|
|
return (
|
|
<label style={{ display: 'block', marginBottom: 14 }}>
|
|
<div style={{ fontSize: 11, fontWeight: 600, color: '#475569', marginBottom: 4 }}>{label}</div>
|
|
{children}
|
|
{help && <div style={{ fontSize: 10, color: '#94a3b8', marginTop: 4 }}>{help}</div>}
|
|
</label>
|
|
);
|
|
}
|
|
|
|
function TextInput(props) {
|
|
return <input {...props} style={{
|
|
width: '100%', padding: '8px 12px', fontSize: 13, fontFamily: 'inherit',
|
|
background: '#fff', border: '1px solid #e2e8f0', borderRadius: 10,
|
|
outline: 'none', color: '#0f172a',
|
|
...(props.style || {}),
|
|
}} />;
|
|
}
|
|
|
|
function SelectInput({ children, ...props }) {
|
|
return <select {...props} style={{
|
|
width: '100%', padding: '8px 12px', fontSize: 13, fontFamily: 'inherit',
|
|
background: '#fff', border: '1px solid #e2e8f0', borderRadius: 10,
|
|
outline: 'none', color: '#0f172a',
|
|
}}>{children}</select>;
|
|
}
|
|
|
|
function ScheduleDetail({ sch, onPatch, onTrigger, onDelete }) {
|
|
if (!sch) {
|
|
return (
|
|
<div style={{ padding: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
|
|
<EmptyState
|
|
icon={<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>}
|
|
title="スケジュールを選択してください"
|
|
hint="左のリストから編集したいスケジュールを開きます。"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const isEvent = sch.triggerKind === 'event';
|
|
|
|
return (
|
|
<div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
|
|
{/* Header */}
|
|
<div style={{
|
|
flexShrink: 0, padding: '14px 20px', borderBottom: '1px solid #e2e8f0', background: '#fff',
|
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
|
|
}}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
|
|
<span style={{
|
|
width: 10, height: 10, borderRadius: 9999,
|
|
background: sch.isActive ? '#22c55e' : '#cbd5e1',
|
|
}} />
|
|
<div style={{ fontSize: 10, fontWeight: 700, color: '#64748b', letterSpacing: '.08em', textTransform: 'uppercase' }}>SCHEDULE #{sch.id}</div>
|
|
<div style={{ fontSize: 15, fontWeight: 700, color: '#0f172a', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
|
{sch.title || 'タイトルなし'}
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
|
|
<button onClick={() => onTrigger(sch.id)} style={{
|
|
padding: '6px 12px', background: '#fff', border: '1px solid #bfdbfe', color: '#1d4ed8',
|
|
borderRadius: 8, fontSize: 12, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit',
|
|
display: 'inline-flex', alignItems: 'center', gap: 4,
|
|
}}>
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
|
|
今すぐ実行
|
|
</button>
|
|
<button onClick={() => onPatch(sch.id, { isActive: !sch.isActive })} style={{
|
|
padding: '6px 12px', background: '#fff', border: '1px solid #e2e8f0', color: '#475569',
|
|
borderRadius: 8, fontSize: 12, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit',
|
|
}}>{sch.isActive ? '停止' : '再開'}</button>
|
|
<button onClick={() => onDelete(sch.id)} style={{
|
|
padding: '6px 12px', background: '#fff', border: '1px solid #fecaca', color: '#dc2626',
|
|
borderRadius: 8, fontSize: 12, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit',
|
|
}}>削除</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Body */}
|
|
<div style={{ flex: 1, overflowY: 'auto', padding: '20px 24px', background: '#f8fafc' }}>
|
|
<div style={{ maxWidth: 640, margin: '0 auto' }}>
|
|
{/* Summary strip */}
|
|
<div style={{
|
|
display: 'flex', gap: 10, marginBottom: 20, flexWrap: 'wrap',
|
|
}}>
|
|
<StatChip label="トリガー" value={isEvent ? 'Event' : 'Cron'} />
|
|
<StatChip label={isEvent ? 'ソース' : 'スケジュール'} value={isEvent ? sch.eventSource : parseCronToDisplay(sch.cronExpression)} />
|
|
<StatChip label="ピース" value={sch.pieceName} color="#2563eb" />
|
|
{sch.isActive
|
|
? <StatChip label="次回実行" value={sch.nextRunAt ? relativeFromNow(sch.nextRunAt) : '—'} />
|
|
: <StatChip label="ステータス" value="停止中" color="#64748b" />}
|
|
</div>
|
|
|
|
{/* Form card */}
|
|
<div style={{
|
|
background: '#fff', border: '1px solid #e2e8f0', borderRadius: 16, padding: 20,
|
|
boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
|
}}>
|
|
<div style={{ fontSize: 11, fontWeight: 700, color: '#64748b', letterSpacing: '.08em', textTransform: 'uppercase', marginBottom: 14 }}>
|
|
基本情報
|
|
</div>
|
|
|
|
<FormRow label="タイトル">
|
|
<TextInput value={sch.title || ''} onChange={e => onPatch(sch.id, { title: e.target.value })} placeholder="週次ニュースまとめ" />
|
|
</FormRow>
|
|
|
|
<FormRow label="プロンプト" help="エージェントに送るメッセージ">
|
|
<textarea value={sch.body} onChange={e => onPatch(sch.id, { body: e.target.value })} rows={4} style={{
|
|
width: '100%', padding: '8px 12px', fontSize: 13, fontFamily: 'inherit',
|
|
background: '#fff', border: '1px solid #e2e8f0', borderRadius: 10,
|
|
outline: 'none', color: '#0f172a', resize: 'vertical', lineHeight: 1.55,
|
|
}} />
|
|
</FormRow>
|
|
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
|
|
<FormRow label="ピース">
|
|
<SelectInput value={sch.pieceName} onChange={e => onPatch(sch.id, { pieceName: e.target.value })}>
|
|
<option value="auto">auto</option>
|
|
<option value="chat">chat</option>
|
|
<option value="research">research</option>
|
|
<option value="general">general</option>
|
|
<option value="x-ai-digest">x-ai-digest</option>
|
|
</SelectInput>
|
|
</FormRow>
|
|
<FormRow label="出力フォーマット">
|
|
<SelectInput value={sch.outputFormat || 'markdown'} onChange={e => onPatch(sch.id, { outputFormat: e.target.value })}>
|
|
<option value="markdown">markdown</option>
|
|
<option value="plain">plain</option>
|
|
<option value="json">json</option>
|
|
</SelectInput>
|
|
</FormRow>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Trigger card */}
|
|
<div style={{
|
|
background: '#fff', border: '1px solid #e2e8f0', borderRadius: 16, padding: 20,
|
|
marginTop: 16, boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
|
}}>
|
|
<div style={{ fontSize: 11, fontWeight: 700, color: '#64748b', letterSpacing: '.08em', textTransform: 'uppercase', marginBottom: 14 }}>
|
|
トリガー
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
|
|
{['cron', 'event'].map(k => (
|
|
<button key={k} onClick={() => onPatch(sch.id, { triggerKind: k })} style={{
|
|
flex: 1, padding: '10px 12px', borderRadius: 10,
|
|
border: '1px solid ' + (sch.triggerKind === k ? '#2563eb' : '#e2e8f0'),
|
|
background: sch.triggerKind === k ? '#eff6ff' : '#fff',
|
|
color: sch.triggerKind === k ? '#1d4ed8' : '#64748b',
|
|
fontWeight: 700, fontSize: 12, cursor: 'pointer', fontFamily: 'inherit',
|
|
textAlign: 'left', display: 'flex', flexDirection: 'column', gap: 2,
|
|
}}>
|
|
<span>{k === 'cron' ? '定期実行 (Cron)' : 'イベントトリガー'}</span>
|
|
<span style={{ fontSize: 10, color: sch.triggerKind === k ? '#3b82f6' : '#94a3b8', fontWeight: 500 }}>
|
|
{k === 'cron' ? '毎日 / 毎週 / カスタム' : 'GitHub / Mail / Webhook'}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{!isEvent && (
|
|
<>
|
|
<FormRow label="Cron 式" help="分 時 日 月 曜日 · 例: 0 7 * * * = 毎日 07:00 (UTC)">
|
|
<TextInput value={sch.cronExpression} onChange={e => onPatch(sch.id, { cronExpression: e.target.value })}
|
|
style={{ fontFamily: 'IBM Plex Mono, monospace' }} placeholder="0 7 * * *" />
|
|
</FormRow>
|
|
<div style={{ padding: '10px 12px', background: '#f8fafc', border: '1px solid #e2e8f0', borderRadius: 10, fontSize: 12, color: '#475569' }}>
|
|
<b style={{ color: '#0f172a' }}>{parseCronToDisplay(sch.cronExpression)}</b>
|
|
{sch.nextRunAt && <span> · 次回 {formatDateShort(sch.nextRunAt)} ({relativeFromNow(sch.nextRunAt)})</span>}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{isEvent && (
|
|
<>
|
|
<FormRow label="イベントソース">
|
|
<SelectInput value={sch.eventSource || ''} onChange={e => onPatch(sch.id, { eventSource: e.target.value })}>
|
|
<option value="github.issue.opened">github.issue.opened</option>
|
|
<option value="github.pr.opened">github.pr.opened</option>
|
|
<option value="gitea.push">gitea.push</option>
|
|
<option value="mail.received">mail.received</option>
|
|
<option value="webhook.custom">webhook.custom</option>
|
|
</SelectInput>
|
|
</FormRow>
|
|
<FormRow label="フィルタ条件" help="該当イベントが発火した時のみ実行">
|
|
<TextInput value={sch.eventFilter || ''} onChange={e => onPatch(sch.id, { eventFilter: e.target.value })}
|
|
style={{ fontFamily: 'IBM Plex Mono, monospace' }} placeholder='repo == "agent-orchestrator" && label == "bug"' />
|
|
</FormRow>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* History */}
|
|
<div style={{
|
|
background: '#fff', border: '1px solid #e2e8f0', borderRadius: 16, padding: 20,
|
|
marginTop: 16, boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
|
}}>
|
|
<div style={{
|
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14,
|
|
}}>
|
|
<div style={{ fontSize: 11, fontWeight: 700, color: '#64748b', letterSpacing: '.08em', textTransform: 'uppercase' }}>
|
|
実行履歴
|
|
</div>
|
|
<span style={{ fontSize: 11, color: '#94a3b8' }}>直近 {sch.history?.length || 0} 件</span>
|
|
</div>
|
|
|
|
{(sch.history || []).length === 0 && (
|
|
<EmptyState
|
|
compact
|
|
icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>}
|
|
title="まだ実行されていません"
|
|
hint={sch.isActive ? '次回の実行後にここに履歴が追加されます。' : 'スケジュールは停止中です。「再開」で有効化できます。'}
|
|
/>
|
|
)}
|
|
|
|
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
|
{(sch.history || []).map((h, i) => (
|
|
<div key={i} style={{
|
|
display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0',
|
|
borderTop: i === 0 ? 'none' : '1px solid #f1f5f9',
|
|
}}>
|
|
<StatusBadge status={h.status} small />
|
|
<div style={{ flex: 1, fontSize: 12, color: '#334155' }}>
|
|
<a href="#" style={{ color: '#2563eb', fontWeight: 700, textDecoration: 'none' }}>#{h.taskId}</a>
|
|
{' · '}{h.summary || '—'}
|
|
</div>
|
|
<div style={{ fontSize: 11, color: '#94a3b8', whiteSpace: 'nowrap' }}>{formatDateShort(h.at)}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ height: 40 }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SchedulesPage({ schedules, activeId, setActiveId, onPatch, onTrigger, onDelete, onOpenCreate }) {
|
|
const [filter, setFilter] = React.useState('all');
|
|
const [search, setSearch] = React.useState('');
|
|
const active = schedules.find(s => s.id === activeId) || schedules[0];
|
|
return (
|
|
<div style={{
|
|
flex: 1, minHeight: 0, display: 'grid',
|
|
gridTemplateColumns: '320px 1fr',
|
|
background: '#f1f5f9', gap: 1,
|
|
}}>
|
|
<div style={{ background: '#fff', padding: 12, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
|
|
<ScheduleListPane
|
|
items={schedules} activeId={active?.id} onSelect={setActiveId}
|
|
filter={filter} setFilter={setFilter} search={search} setSearch={setSearch}
|
|
onOpenCreate={onOpenCreate}
|
|
/>
|
|
</div>
|
|
<div style={{ background: '#fff', minWidth: 0 }}>
|
|
<ScheduleDetail sch={active} onPatch={onPatch} onTrigger={onTrigger} onDelete={onDelete} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
window.SchedulesPage = SchedulesPage;
|