isAdmin && onEdit(task)} className={`relative flex-1 z-0 rounded-[20px] py-2 px-3 transition-all border shadow-sm group overflow-hidden ${isAdmin ? 'active:scale-[0.98] cursor-pointer' : ''} bg-white/90`} style={{ backgroundColor: (task.status === 'done' || task.status === 'cancelled') ? 'rgba(255,255,255,0.6)' : 'rgba(255,255,255,0.95)', borderColor: ((task.status === 'done' || task.status === 'cancelled') ? 'transparent' : COLORS.white), opacity: (task.status === 'done' || task.status === 'cancelled') ? 0.7 : 1 }}>
{task.email}
{isAdmin && (task.firstPassword || task.currentPassword) && (
āļāļēāļŠ 1: {task.firstPassword || '-'}
āļāļąāļāļāļļāļāļąāļ: {task.currentPassword || '-'}
)}
{statusBadge}
{new Date(task.dueDate).toLocaleDateString('th-TH', { day: '2-digit', month: '2-digit', year: '2-digit' })}
{task.app}
{isAdmin ? (
e.stopPropagation()}>
) : (
{task.status === 'done' && āļāđāļāļāļēāļĒāļļāđāļĨāđāļ§}
{task.status === 'cancelled' && āđāļĄāđāļāđāļāļāļēāļĒāļļ}
)}
);
});
const CalendarView = React.memo(({ currentMonth, setCurrentMonth, selectedDate, setSelectedDate, today, tasks }) => {
const year = currentMonth.getFullYear();
const month = currentMonth.getMonth();
const daysInMonth = new Date(year, month + 1, 0).getDate();
const firstDay = new Date(year, month, 1).getDay();
const days = [];
for (let i = 0; i < firstDay; i++) days.push(null);
for (let i = 1; i <= daysInMonth; i++) days.push(i);
const monthNames = ["āļĄāļāļĢāļēāļāļĄ", "āļāļļāļĄāļ āļēāļāļąāļāļāđ", "āļĄāļĩāļāļēāļāļĄ", "āđāļĄāļĐāļēāļĒāļ", "āļāļĪāļĐāļ āļēāļāļĄ", "āļĄāļīāļāļļāļāļēāļĒāļ", "āļāļĢāļāļāļēāļāļĄ", "āļŠāļīāļāļŦāļēāļāļĄ", "āļāļąāļāļĒāļēāļĒāļ", "āļāļļāļĨāļēāļāļĄ", "āļāļĪāļĻāļāļīāļāļēāļĒāļ", "āļāļąāļāļ§āļēāļāļĄ"];
return (
{monthNames[month]} {year}
{['āļāļē', 'āļ', 'āļ', 'āļ', 'āļāļĪ', 'āļĻ', 'āļŠ'].map(d => (
{d}
))}
{days.map((day, index) => {
if (!day) return
;
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
const isSelected = selectedDate === dateStr;
const isToday = today === dateStr;
const hasTasks = tasks.some(t => t.dueDate === dateStr);
return (
setSelectedDate(dateStr)}
className={`relative w-10 h-10 flex flex-col items-center justify-center cursor-pointer transition-all ${
isSelected
? 'bg-[#ED6D5D] text-white rounded-full font-black shadow-md scale-105'
: isToday
? 'text-[#7A5B53] font-black bg-[#FFFDF2] rounded-full border-[2px] border-[#ED6D5D]'
: 'text-[#B39A94] font-bold hover:bg-[#FFFDF2] hover:border-[2px] hover:border-white hover:shadow-sm rounded-full'
}`}
>
{day}
{hasTasks && (
)}
);
})}
);
});
function App() {
const [tasks, setTasks] = useState([]);
const [appTypes, setAppTypes] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [isSaving, setIsSaving] = useState(false);
const [view, setView] = useState('dashboard');
const [isCalendarView, setIsCalendarView] = useState(false);
const [currentMonth, setCurrentMonth] = useState(new Date());
const [selectedDate, setSelectedDate] = useState(() => {
const d = new Date();
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
});
const [showModal, setShowModal] = useState(false);
const [editingTask, setEditingTask] = useState(null);
const [taskToDelete, setTaskToDelete] = useState(null);
const [showAuthModal, setShowAuthModal] = useState(false);
const [showBannerModal, setShowBannerModal] = useState(false);
const [showImageModal, setShowImageModal] = useState(false);
const [showDaysModal, setShowDaysModal] = useState(false);
const [showRenewModal, setShowRenewModal] = useState(false);
const [renewingTask, setRenewingTask] = useState(null);
const [newDueDate, setNewDueDate] = useState('');
const [searchQuery, setSearchQuery] = useState('');
const [filterType, setFilterType] = useState('all');
const [todayFilter, setTodayFilter] = useState('all');
const [isAdmin, setIsAdmin] = useState(false);
const [password, setPassword] = useState('');
const [rememberDevice, setRememberDevice] = useState(false);
const [profileImage, setProfileImage] = useState(null);
const [bannerImage, setBannerImage] = useState(null);
const [isBannerVisible, setIsBannerVisible] = useState(true);
const [tempImageUrl, setTempImageUrl] = useState('');
const [checkDays, setCheckDays] = useState(3);
const [tempDays, setTempDays] = useState(3);
const [isViewingAdvance, setIsViewingAdvance] = useState(false);
const [isBouncing, setIsBouncing] = useState(false);
// asAdmin = true āļāļ°āļĒāļīāļāđāļāļ POST āļāļĢāđāļāļĄ token āđāļāļ·āđāļāđāļŦāđāđāļāđāļĢāļŦāļąāļŠāļāđāļēāļ (āļāļāļĨāļąāļĄāļāđ K/L) āļāļīāļāļĄāļēāļāđāļ§āļĒ
// āļāļģāļāļāļŠāļēāļāļēāļĢāļāļ°āļāļ°āđāļāļ /api/data āļāļąāļāļĢāļŦāļąāļŠāļāđāļēāļāļāļīāđāļāļāđāļāļāļāļķāļāđāļāļĢāļēāļ§āđāđāļāļāļĢāđāđāļŠāļĄāļ
const loadData = async (asAdmin) => {
try {
const result = asAdmin
? await postAPI({ action: 'getInitialData' })
: await (await fetch(API_DATA + "?action=getInitialData")).json();
if (result.status === 'success') {
setTasks(result.data.tasks || []);
if(result.data.appTypes && result.data.appTypes.length > 0) setAppTypes(result.data.appTypes);
setProfileImage(result.data.profileImage);
setBannerImage(result.data.bannerImage);
setIsBannerVisible(result.data.bannerVisible);
}
} catch (e) {
console.error("Error loading data:", e);
} finally {
setIsLoading(false);
}
};
useEffect(() => {
document.title = "namnuengstore";
const admin = isTokenValid();
if (admin) setIsAdmin(true); else clearToken();
loadData(admin);
}, []);
const handleAdminLogin = async (e) => {
e.preventDefault();
setIsSaving(true);
try {
const res = await fetch(API_LOGIN, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ password: password, remember: rememberDevice })
});
if (res.status === 429) { alert("āļĨāļāļāļāđāļāļĒāđāļāļīāļāđāļ āļĢāļāļŠāļąāļāļāļĢāļđāđāđāļĨāđāļ§āļĨāļāļāđāļŦāļĄāđ"); return; }
if (!res.ok) { alert("āļĢāļŦāļąāļŠāļāđāļēāļāđāļĄāđāļāļđāļāļāđāļāļ!"); return; }
const result = await res.json();
if (!result || !result.token) { alert("āļĢāļŦāļąāļŠāļāđāļēāļāđāļĄāđāļāļđāļāļāđāļāļ!"); return; }
saveToken(result.token);
setIsAdmin(true);
setShowAuthModal(false);
setPassword('');
loadData(true);
} catch (e) {
alert("āđāļāļīāļāļāđāļāļāļīāļāļāļĨāļēāļāđāļāļāļēāļĢāļāļĢāļ§āļāļŠāļāļāļĢāļŦāļąāļŠāļāđāļēāļ");
} finally {
setIsSaving(false);
}
};
const handleLogout = useCallback(() => {
clearToken();
setIsAdmin(false);
// āļĨāđāļēāļāļĢāļŦāļąāļŠāļāđāļēāļāļāļĩāđāđāļŦāļĨāļāļĄāļēāļāļāļāđāļāđāļāđāļāļāļĄāļīāļāļāļāļāļāļēāļāļŦāļāđāļ§āļĒāļāļ§āļēāļĄāļāļģ
setTasks(prev => prev.map(({ firstPassword, currentPassword, ...rest }) => rest));
}, []);
const todayStr = useMemo(() => {
const d = new Date();
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
}, []);
const overdueTasks = useMemo(() => {
const tObj = new Date(); tObj.setHours(0,0,0,0);
return tasks.filter(t => {
if(!t.dueDate) return false;
const dObj = new Date(t.dueDate); dObj.setHours(0,0,0,0);
return dObj < tObj && t.status !== 'done' && t.status !== 'cancelled';
});
}, [tasks]);
const dueInXTasks = useMemo(() => {
const tObj = new Date(); tObj.setHours(0,0,0,0);
return tasks.filter(t => {
if(!t.dueDate) return false;
const dObj = new Date(t.dueDate); dObj.setHours(0,0,0,0);
const diff = Math.ceil((dObj - tObj) / (1000 * 60 * 60 * 24));
return diff === checkDays && t.status !== 'done' && t.status !== 'cancelled';
});
}, [tasks, checkDays]);
const currentDashboardTasks = useMemo(() => {
let base = isViewingAdvance ? dueInXTasks : tasks.filter(t => t.dueDate === todayStr);
if (todayFilter !== 'all') {
base = base.filter(t => t.app === todayFilter);
}
return base;
}, [isViewingAdvance, dueInXTasks, tasks, todayStr, todayFilter]);
const changeTaskStatus = useCallback((e, task, newStatus) => {
e.stopPropagation();
if (newStatus === 'done' && task.status !== 'done') {
setRenewingTask(task);
let currentDue = new Date();
if(task.dueDate) currentDue = new Date(task.dueDate);
currentDue.setMonth(currentDue.getMonth() + 1);
const nextMonthStr = `${currentDue.getFullYear()}-${String(currentDue.getMonth() + 1).padStart(2, '0')}-${String(currentDue.getDate()).padStart(2, '0')}`;
setNewDueDate(nextMonthStr);
setShowRenewModal(true);
} else {
setTasks(prev => prev.map(t => t.id === task.id ? { ...t, status: newStatus } : t));
postAPI({ action: 'updateTaskStatus', taskId: task.id, newStatus: newStatus }).catch(() => {});
}
}, []);
const handleRenewSubmit = async () => {
setIsSaving(true);
const updatedTask = { ...renewingTask, dueDate: newDueDate, status: 'done' };
setTasks(prev => prev.map(t => t.id === updatedTask.id ? updatedTask : t));
setShowRenewModal(false);
setRenewingTask(null);
await postAPI({ action: 'saveOrUpdateTask', task: updatedTask });
setIsSaving(false);
};
const handleEditTask = useCallback((task) => {
setEditingTask(task);
setShowModal(true);
}, []);
const handleSaveTask = async (e) => {
e.preventDefault();
setIsSaving(true);
const formData = new FormData(e.target);
const taskData = {
id: editingTask ? editingTask.id : Date.now(),
email: formData.get('email'),
firstPassword: formData.get('firstPassword'),
currentPassword: formData.get('currentPassword'),
app: formData.get('app'),
dueDate: formData.get('dueDate'),
details: formData.get('details'),
status: editingTask ? editingTask.status : 'todo'
};
try {
await postAPI({ action: 'saveOrUpdateTask', task: taskData });
setTasks(prev => editingTask ? prev.map(t => t.id === taskData.id ? taskData : t) : [...prev, taskData]);
} catch(e) {
console.error(e);
} finally {
setIsSaving(false); setShowModal(false); setEditingTask(null);
}
};
const executeDeleteTask = async () => {
if (!taskToDelete) return;
setIsSaving(true);
try {
await postAPI({ action: 'deleteTask', taskId: taskToDelete });
setTasks(prev => prev.filter(t => t.id !== taskToDelete));
} catch(e) {
console.error(e);
} finally {
setIsSaving(false); setShowModal(false); setEditingTask(null); setTaskToDelete(null);
}
};
const toggleBannerVisibility = (visible) => {
setIsBannerVisible(visible);
postAPI({ action: 'saveBannerVisibility', isVisible: visible }).catch(() => {});
};
const triggerBounce = useCallback(() => { setIsBouncing(true); setTimeout(() => setIsBouncing(false), 500); }, []);
const handleImageUpload = useCallback(() => {
setTempImageUrl(profileImage || "");
setShowImageModal(true);
}, [profileImage]);
const handleBannerUpload = useCallback(() => {
setTempImageUrl(bannerImage || "");
setShowBannerModal(true);
}, [bannerImage]);
const handleDaysSubmit = () => {
setCheckDays(Number(tempDays));
setShowDaysModal(false);
setIsViewingAdvance(true);
};
const filteredAllTasks = useMemo(() => tasks.filter(t => {
const appStr = (t.app || "").toLowerCase();
const emailStr = (t.email || "").toLowerCase();
const queryStr = (searchQuery || "").toLowerCase();
const matchSearch = appStr.includes(queryStr) || emailStr.includes(queryStr);
const todayObj = new Date(); todayObj.setHours(0,0,0,0);
const dueObj = t.dueDate ? new Date(t.dueDate) : new Date();
dueObj.setHours(0,0,0,0);
let matchFilter = false;
if (filterType === 'all') matchFilter = true;
else if (filterType === 'done') matchFilter = t.status === 'done';
else if (filterType === 'overdue') matchFilter = (dueObj < todayObj && t.status !== 'done' && t.status !== 'cancelled');
return matchSearch && matchFilter;
}), [tasks, searchQuery, filterType]);
const displayedTasks = isCalendarView
? filteredAllTasks.filter(t => t.dueDate === selectedDate)
: filteredAllTasks;
if (isLoading) {
return (
) : (
<>
ð°
)}