(() => {
const { Card, Button, IconButton, Badge, StatusPill, EmptyState, Icon, Avatar } = window.TaskFlowDesignSystem_dd53c2;
const CARD_TONE = {
done: ["rgba(125,194,66,.16)", "var(--leaf-500)"],
in_progress: ["rgba(37,99,235,.13)", "#2563EB"],
on_verification: ["rgba(224,168,28,.16)", "var(--gold-500)"],
revision: ["rgba(249,115,22,.16)", "#F97316"],
};
const cardTone = (s) => CARD_TONE[s] || ["var(--surface-glass-strong)", "var(--border-glass)"];
const MONTHS = ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];
const DAYS = ["Sen","Sel","Rab","Kam","Jum","Sab","Min"];
const LONG_DAYS = ["Senin","Selasa","Rabu","Kamis","Jumat","Sabtu","Minggu"];
const TONE = {
todo: ["var(--neutral-100)", "var(--neutral-600)"],
in_progress: ["var(--mint-50)", "var(--mint-600)"],
on_verification: ["var(--gold-50)", "var(--gold-600)"],
revision: ["var(--coral-50)", "var(--coral-600)"],
done: ["var(--leaf-50)", "var(--leaf-600)"],
};
function CalendarScreen({ tasks = [], userId, range }) {
const bp = useBreakpoint();
const startMonth = range ? Number(String(range.from).split("-")[1]) - 1 : 7;
const [month, setMonth] = React.useState(startMonth);
const [view, setView] = React.useState("kanban");
const year = 2026;
const mine = userId ? tasks.filter((t) => t.user === userId) : tasks;
const [picked, setPicked] = React.useState(null);
const inMonth = mine.filter((t) => { const d = parseId(t.target); return d.getFullYear() === year && d.getMonth() === month; });
const byDay = {};
inMonth.forEach((t) => { const k = parseId(t.target).getDate(); (byDay[k] = byDay[k] || []).push(t); });
const first = new Date(year, month, 1);
const lead = (first.getDay() + 6) % 7; // Monday-first
const days = new Date(year, month + 1, 0).getDate();
const cells = [...Array(lead).fill(null), ...Array.from({ length: days }, (_, i) => i + 1)];
const today = parseId(TODAY);
const isToday = (d) => today.getFullYear() === year && today.getMonth() === month && today.getDate() === d;
const weekdayOf = (d) => (new Date(year, month, d).getDay() + 6) % 7; // 0 = Senin, 6 = Minggu
const isSunday = (d) => weekdayOf(d) === 6;
const list = picked ? (byDay[picked] || []) : [];
const header = (
{MONTHS[month]} {year}
{inMonth.length} target
{[["kanban", "Minggu", "columns-3"], ["month", "Bulan", "calendar-days"]].map(([id, label, icon]) => (
))}
{ setMonth((m) => (m + 11) % 12); setPicked(null); }} />
{ setMonth((m) => (m + 1) % 12); setPicked(null); }} />
);
const kanban = (
{LONG_DAYS.map((label, wd) => {
const dayNums = Array.from({ length: days }, (_, i) => i + 1).filter((d) => weekdayOf(d) === wd);
const items = dayNums.flatMap((d) => (byDay[d] || []).map((t) => ({ ...t, day: d })));
const sunday = wd === 6;
return (
{label}
{items.length}
{items.length === 0 ? (
{sunday ? "Libur" : "Tidak ada target"}
) : items.map((t) => {
const [bg2, fg2] = TONE[t.status] || TONE.todo;
return (
);
})}
);
})}
{DAYS.map((d, i) => (
{d}
))}
{cells.map((d, i) => {
if (!d) return ;
const items = byDay[d] || [];
const active = picked === d;
const sunday = isSunday(d);
return (
);
})}
);
return (
{header}
{view === "kanban" ? kanban : monthGrid}
{picked &&
{picked} {MONTHS[month]}
{list.length === 0 ? (
) : (
{list.map((t) => (
{t.type}
{t.target}
{t.category}
))}
}
);
}
Object.assign(window, { CalendarScreen });
})();