24:I[498676,["/_next/static/chunks/0ftkw0ag718te.js","/_next/static/chunks/05qsa4vhf9b3f.js","/_next/static/chunks/37-owrbjeirzi.js","/_next/static/chunks/2v-n1tk884g-7.js","/_next/static/chunks/3r_7ixk3y9q2-.js","/_next/static/chunks/3g5m1pyk9dmj0.js","/_next/static/chunks/16b-pvycxk30b.js","/_next/static/chunks/3w3sopl4rtd4f.js","/_next/static/chunks/1q1-qs1ttwlqs.js"],"default"] 25:I[967421,["/_next/static/chunks/0ftkw0ag718te.js","/_next/static/chunks/05qsa4vhf9b3f.js","/_next/static/chunks/37-owrbjeirzi.js","/_next/static/chunks/2v-n1tk884g-7.js","/_next/static/chunks/3r_7ixk3y9q2-.js","/_next/static/chunks/3g5m1pyk9dmj0.js","/_next/static/chunks/16b-pvycxk30b.js","/_next/static/chunks/3w3sopl4rtd4f.js","/_next/static/chunks/1q1-qs1ttwlqs.js"],"default"] 26:T1fe6,// Tạo style sheet cho toàn bộ ứng dụng export function applyGlobalStyles() { const styleSheet = document.createElement('style'); styleSheet.type = 'text/css'; styleSheet.innerHTML = ` body { font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; margin: 0; padding: 0; background: linear-gradient(135deg, #2C1810, #1a1108); color: #FFFFFF; overflow-x: hidden; } .reward-container { height: 100vh; overflow: auto; scroll-behavior: smooth; position: relative; scrollbar-width: thin; scrollbar-color: #FFD700 #2C1810; } .settings-button { background: linear-gradient(135deg, #FFD700, #FFA500); color: white; border: 1px solid #FFD700; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; font-size: 20px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.3); position: absolute; top: 70px; right: 20px; z-index: 100; } .sync-button { background: linear-gradient(135deg, #FFD700, #FFA500); color: #2C1810; border: 1px solid #FFD700; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; font-size: 20px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.3); position: absolute; top: 130px; right: 20px; z-index: 100; transition: all 0.3s ease; } .sync-button:hover { transform: rotate(180deg); background: linear-gradient(135deg, #FFA500, #FFD700); } .sync-button:active { transform: scale(0.95) rotate(180deg); } .settings-button.active { background: #FFFFFF; color: #2C1810; } .settings-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 50; padding: 20px; } .settings-content { background-color: #2C1810; border-radius: 12px; max-width: 600px; width: 100%; max-height: 90vh; overflow: auto; position: relative; padding: 25px; border: 1px solid #FFD700; box-shadow: 0 0 30px rgba(255, 215, 0, 0.3); } .close-button { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 24px; cursor: pointer; color: #FFD700; } .settings-title { color: #FFD700; margin-top: 0; margin-bottom: 20px; text-align: center; font-size: 24px; background: linear-gradient(135deg, #FFD700, #FFA500); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* CSS cho form cài đặt ClickUp */ .clickup-form-container { padding: 16px; background-color: rgba(61, 35, 18, 0.7); border-radius: 8px; margin-bottom: 20px; border: 1px solid rgba(255, 215, 0, 0.3); } .clickup-form-title { margin: 0 0 16px; color: #FFD700; font-size: 16px; } /* New styles for two-column layout */ .clickup-form-row { display: flex; gap: 20px; /* Khoảng cách giữa 2 cột */ margin-bottom: 16px; } /* Cập nhật clickup-form-group để chiếm 50% chiều rộng trong row */ .clickup-form-row .clickup-form-group { flex: 1; /* Cho phép các group co giãn đều */ min-width: 0; /* Ngăn chặn overflow */ margin-bottom: 0; /* Bỏ margin bottom mặc định vì đã có margin ở row */ } /* Responsive: Stack columns on smaller screens */ @media (max-width: 600px) { .clickup-form-row { flex-direction: column; gap: 16px; /* Giữ khoảng cách khi stack */ } } .clickup-form-label { display: block; margin-bottom: 6px; font-weight: 500; color: #FFD700; font-size: 14px; /* Cập nhật font size nếu cần */ } .clickup-form-input { width: 100%; padding: 10px 14px; /* Giảm padding một chút */ border-radius: 6px; border: 1px solid rgba(255, 215, 0, 0.3); background-color: rgba(0, 0, 0, 0.2); box-sizing: border-box; font-size: 14px; color: #FFFFFF; } /* Styles for List ID input group */ .clickup-list-input-group { /* Có thể thêm style riêng nếu cần */ } .clickup-list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; /* Giảm margin */ } .clickup-add-button { background: none; border: 1px solid #FFD700; color: #FFD700; cursor: pointer; font-size: 16px; /* Tăng kích thước */ font-weight: bold; padding: 0; border-radius: 50%; width: 24px; /* Kích thước nút tròn */ height: 24px; display: flex; align-items: center; justify-content: center; line-height: 1; } .clickup-list-item { display: flex; align-items: center; margin-bottom: 8px; /* Giảm margin */ } .clickup-list-input { flex: 1; /* Đảm bảo input chiếm phần lớn không gian */ padding: 10px 14px; border-radius: 6px; border: 1px solid rgba(255, 215, 0, 0.3); background-color: rgba(0, 0, 0, 0.2); box-sizing: border-box; font-size: 14px; color: #FFFFFF; margin-right: 8px; /* Giảm margin */ } .clickup-remove-button { background: none; border: none; color: #FF6B6B; cursor: pointer; font-size: 24px; /* Tăng kích thước */ width: 24px; /* Kích thước nút */ height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 4px; padding: 0; line-height: 1; } /* Remove help text styling */ /* .clickup-help-text { font-size: 12px; color: rgba(255, 215, 0, 0.7); margin-top: 6px; } */ .clickup-sync-button { background: linear-gradient(135deg, #FFD700, #FFA500); color: #2C1810; border: none; border-radius: 8px; padding: 12px 20px; font-weight: 600; cursor: pointer; width: 100%; font-size: 16px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: all 0.2s; } /* Media queries for timeline responsiveness */ @media (max-width: 768px) { .timeline-item { justify-content: flex-start !important; } .timeline-content { width: 80% !important; margin-left: 70px !important; margin-right: 0 !important; } .timeline-track { left: 15px !important; } .timeline-dot { left: 15px !important; } } /* Loading indicator styling */ .loading-indicator { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, rgba(44, 24, 16, 0.9), rgba(25, 14, 9, 0.95)); color: #FFD700; border-radius: 30px; padding: 10px 20px; font-size: 14px; font-weight: 500; z-index: 1000; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 215, 0, 0.2); border: 1px solid rgba(255, 215, 0, 0.3); backdrop-filter: blur(4px); animation: fadeInUp 0.5s ease-out; min-width: 160px; } .loading-spinner { width: 18px; height: 18px; border: 2px solid rgba(255, 215, 0, 0.3); border-top: 2px solid #FFD700; border-radius: 50%; margin-right: 10px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes fadeInUp { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } } `; document.head.appendChild(styleSheet); }27:T4708,import React, { useState, useEffect } from 'react'; import { GoalStats } from 'GoalStats'; import { TimelineMilestones } from 'TimelineMilestones'; import SyncForm from 'SyncForm'; import { clickupService } from 'clickupService'; import { getPageSpecificKey } from 'storageUtils'; import { ConfirmationModal } from 'ConfirmationModal'; export const RewardLadder = () => { const [showSettings, setShowSettings] = useState(false); const [showPasswordPrompt, setShowPasswordPrompt] = useState(false); const [password, setPassword] = useState(''); const [passwordError, setPasswordError] = useState(''); const [isAuthenticated, setIsAuthenticated] = useState(false); const [activeGoalTab, setActiveGoalTab] = useState('Ngày Quản Lý'); // State for tracking user progress const [userProgress, setUserProgress] = useState(() => { // Try to load cached data from localStorage on initial render const cachedDataKey = getPageSpecificKey('cachedClickUpData'); const cachedData = localStorage.getItem(cachedDataKey); if (cachedData) { try { const parsedData = JSON.parse(cachedData); // console.log('Loaded cached data on initial render:', parsedData); // Removed log return { totalDays: parsedData.totalDays || 0, isLoading: true // Set loading state even with cached data }; } catch (error) { console.error('Error parsing cached data:', error); } } // Default state if no cached data exists return { totalDays: 0, isLoading: true }; }); // State để trigger remount cho TimelineMilestones khi reset const [milestoneResetKey, setMilestoneResetKey] = useState(0); // State for confirmation modal const [showConfirmResetModal, setShowConfirmResetModal] = useState(false); // Effect to auto-load settings and sync data on page load useEffect(() => { const loadSettingsAndSync = async () => { try { // Try to load saved credentials from localStorage const storageKey = getPageSpecificKey('clickupCredentials'); const credentialsStr = localStorage.getItem(storageKey); if (credentialsStr) { // console.log('Found stored credentials, attempting to load'); // Removed log const credentials = JSON.parse(credentialsStr); // Check if we have all necessary credentials if (credentials.apiKey && credentials.listIds && credentials.listIds.length > 0 && credentials.listIds[0].trim() !== '') { // console.log('Valid credentials found, starting sync'); // Removed log await syncClickUpData(false); // Auto-sync on load, force = false } else { console.warn('Stored credentials missing required fields (apiKey or at least one listId)'); // Kept as warn setShowPasswordPrompt(true); // Show password prompt // setShowSettings(true); // Don't show settings yet setUserProgress(prev => ({ ...prev, isLoading: false })); // Ensure loading is off } } else { // console.log('No stored credentials found on page load'); // Removed log setShowPasswordPrompt(true); // Show password prompt // setShowSettings(true); // Don't show settings yet setUserProgress(prev => ({ ...prev, isLoading: false })); // Ensure loading is off } } catch (error) { console.error('Error loading settings or syncing data:', error); setShowPasswordPrompt(true); // Show password prompt on error // setShowSettings(true); // Don't show settings yet setUserProgress(prev => ({ ...prev, isLoading: false })); // Ensure loading is off } }; loadSettingsAndSync(); }, []); // Hàm xử lý khi quá trình đồng bộ hoàn tất function handleSyncComplete(data) { // console.log('handleSyncComplete called with data:', data); // Removed log let newTotalDays = userProgress.totalDays; // Default to existing if data is bad // Xử lý dữ liệu khi nhận được từ SyncForm // console.log('Received sync data in RewardLadder:', data); // Removed log // Cập nhật dữ liệu habit statistics từ dữ liệu thực if (data && data.habitStats && typeof data.habitStats.totalDays === 'number') { // console.log('Received habit stats:', data.habitStats); // Removed log newTotalDays = data.habitStats.totalDays; // console.log('Total Days received:', newTotalDays); // Removed log // Save the data to localStorage for future use const cachedDataKey = getPageSpecificKey('cachedClickUpData'); localStorage.setItem(cachedDataKey, JSON.stringify({ totalDays: newTotalDays, lastUpdated: new Date().toISOString() })); // Đóng modal settings // console.log('Scheduling to close settings modal'); // Removed log setTimeout(() => { // setShowSettings(false); // Settings modal will be controlled by password auth // console.log('Settings modal closed'); // Removed log }, 2000); } else { console.error('ERROR: Invalid or missing habitStats in received data for handleSyncComplete:', data); } // ALWAYS update userProgress and set isLoading to false setUserProgress({ totalDays: newTotalDays, isLoading: false }); } // Hàm để đồng bộ dữ liệu từ ClickUp const syncClickUpData = async (force = false) => { if (force) { setUserProgress(prev => ({ ...prev, isLoading: true })); } // Kiểm tra xem có thông tin đăng nhập đã lưu hay không const storageKey = getPageSpecificKey('clickupCredentials'); const credentialsStr = localStorage.getItem(storageKey); if (!credentialsStr) { // Nếu chưa có thông tin đăng nhập, mở modal cài đặt setShowPasswordPrompt(true); // setShowSettings(true); setUserProgress(prev => ({ ...prev, isLoading: false })); // Ensure loading is off return; } try { const credentials = JSON.parse(credentialsStr); // Verify credentials have the necessary fields if (!credentials.apiKey || !credentials.listIds || credentials.listIds.length === 0 || credentials.listIds[0].trim() === '') { console.warn('Invalid or incomplete credentials found, opening settings'); // Kept as warn setShowPasswordPrompt(true); // setShowSettings(true); setUserProgress(prev => ({ ...prev, isLoading: false })); // Ensure loading is off return; } // console.log(`Starting ${force ? 'forced' : 'scheduled'} sync with saved credentials`); // Removed log // Gọi API để lấy dữ liệu const data = await clickupService.fetchData(credentials, force); if (data) { // Xử lý dữ liệu nhận được như khi hoàn tất đồng bộ từ form handleSyncComplete(data); // This will set isLoading: false // Hiển thị thông báo thành công (chỉ khi là đồng bộ thủ công) if (force) { alert('Đồng bộ thành công!'); } } else { // Sync might have been skipped (if !force) or fetchData returned null setUserProgress(prev => ({ ...prev, isLoading: false })); // Ensure loading is off if (force) { // If forced and no data, fetchData might have handled it silently or it's an unexpected null // Consider if an alert is needed here or if fetchData should always throw on forced failure } } } catch (error) { console.error('Sync failed:', error); // Hiển thị thông báo lỗi (chỉ khi là đồng bộ thủ công) if (force) { alert(`Đồng bộ thất bại: ${error.message}`); } setUserProgress(prev => ({ ...prev, isLoading: false })); // Ensure loading is off on error } }; // Hàm xử lý đồng bộ thủ công khi người dùng nhấn nút const handleManualSync = () => { syncClickUpData(true); // Gọi với force=true để đồng bộ ngay lập tức }; // Hàm để mở modal xác nhận reset const handleResetMilestones = () => { // console.log('Opening reset confirmation modal'); // Removed log setShowConfirmResetModal(true); }; // Hàm thực hiện reset sau khi xác nhận const confirmResetMilestones = () => { // console.log('User confirmed reset via modal'); // Removed log try { const notifiedKey = getPageSpecificKey('notifiedMilestones'); // console.log(`Attempting to remove localStorage key: ${notifiedKey}`); // Removed log localStorage.removeItem(notifiedKey); // console.log(`localStorage key ${notifiedKey} removed.`); // Removed log alert('Lịch sử cột mốc đã được xóa. Bạn sẽ nhận lại thông báo khi đồng bộ tiếp theo.'); // Close settings modal after reset // setShowSettings(false); // Settings modal closure handled by its own logic // console.log('Settings modal closed'); // Removed log // Increment key to force TimelineMilestones remount setMilestoneResetKey(prevKey => { // console.log('Incrementing milestoneResetKey'); // Removed log return prevKey + 1; }); // Close the confirmation modal setShowConfirmResetModal(false); // console.log('Confirmation modal closed'); // Removed log } catch (error) { console.error('Lỗi khi xóa lịch sử cột mốc:', error); alert('Đã xảy ra lỗi khi xóa lịch sử cột mốc.'); setShowConfirmResetModal(false); // Đảm bảo đóng modal khi có lỗi } }; // Hàm hủy bỏ reset const cancelResetMilestones = () => { // console.log('User cancelled reset'); // Removed log setShowConfirmResetModal(false); }; // Removed tabsData const handlePasswordSubmit = (e) => { e.preventDefault(); if (password === "1") { // Your default password setIsAuthenticated(true); setShowPasswordPrompt(false); setShowSettings(true); // Now show the actual settings setPasswordError(''); setPassword(''); // Clear password after successful entry } else { setPasswordError("Mật khẩu không đúng. Vui lòng thử lại."); setIsAuthenticated(false); } }; const handleOpenSettings = () => { if (isAuthenticated) { setShowSettings(true); } else { setShowPasswordPrompt(true); } }; const handleCloseSettings = () => { setShowSettings(false); // Optionally, you might want to require password again next time: // setIsAuthenticated(false); }; return (

{showPasswordPrompt && !isAuthenticated && (

Xác Thực

)} {isAuthenticated && showSettings && (

Cài đặt Đồng bộ

{ handleSyncComplete(data); // Consider closing settings modal automatically on successful sync from form // setShowSettings(false); }} />

Xóa để nhận lại thông báo cho các cột mốc đã đạt.

)}

{/* Loading indicator removed from here */} {/* Include the GoalStats component with totalDays prop */}

{/* New tabs for Time section */}

{['Ngày Quản Lý'].map((tabName, index) => (

setActiveGoalTab(tabName)} style={{ padding: '10px 16px', border: '1px solid rgba(255, 215, 0, 0.3)', borderRadius: '8px', background: 'linear-gradient(135deg, #FFD700, #FFA500)', color: '#2C1810', fontSize: '12px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.5px', boxShadow: '0 4px 12px rgba(255, 215, 0, 0.4)', minWidth: '160px', whiteSpace: 'nowrap', textAlign: 'center', cursor: 'pointer' }} > {tabName}

))}

{/* Content for the selected goal tab */}

{/* Loading indicator overlay - moved to bottom of page */} {userProgress.isLoading && (

Đang cập nhật...

)} {/* Confirmation Modal for Reset */}

); }28:T68f5,// Service for handling ClickUp API calls // Helper to generate truly unique page-specific storage keys const getPageSpecificKey = (baseKey) => { // Get only the path part of the URL for better uniqueness without exposing sensitive parameters const path = window.location.pathname; // Add optional hash or query parameters if they're important for distinguishing pages const hash = window.location.hash ? window.location.hash : ''; // Create a unique identifier from the URL parts const uniqueId = `${path}${hash}`.replace(/[^a-zA-Z0-9]/g, '_'); return `${baseKey}_${uniqueId}`; }; // Track last sync time for automatic sync features let lastSyncTime = 0; const SYNC_INTERVAL = 2 * 60 * 60 * 1000; // 2 hours in milliseconds export const clickupService = { // Get data from ClickUp API async fetchData(credentials, force = false) { // If not forcing a sync, check if we should sync based on time elapsed if (!force) { const currentTime = Date.now(); if (currentTime - lastSyncTime < SYNC_INTERVAL) { return null; // Return null to indicate sync was skipped } } // Update last sync time lastSyncTime = Date.now(); if (!credentials.apiKey) { throw new Error('API Key is required'); } // Check if we have scholarship field ID to update const hasScholarshipFieldId = credentials.scholarshipFieldId && credentials.scholarshipFieldId.trim() && credentials.milestoneTaskId && credentials.milestoneTaskId.trim(); const headers = { 'Authorization': credentials.apiKey, 'Content-Type': 'application/json' }; try { // Get workspace data first if needed if (!credentials.workspace) { const workspaces = await this.getWorkspaces(headers); if (workspaces.length > 0) { credentials.workspace = workspaces[0].id; } else { throw new Error('No workspaces found'); } } // Process task data from list IDs let habitStatsData = { daysFollowingHabits: 0, trainingLevel: 0, averageHappiness: 0, scholarshipUpdated: false }; if (credentials.listIds && credentials.listIds.length > 0 && credentials.listIds[0].trim() !== '') { // Filter out empty list IDs const validListIds = credentials.listIds.filter(id => id && id.trim() !== ''); if (validListIds.length === 0) { throw new Error('Vui lòng cung cấp ít nhất một List ID hợp lệ'); } // Get tasks from specified lists const listTasks = await this.getTasksFromLists(headers, validListIds); habitStatsData = this.processTasksForStats(listTasks); } else { throw new Error('Vui lòng cung cấp ít nhất một List ID'); } // If we have scholarship field ID and milestone task ID, update the scholarship value if (hasScholarshipFieldId && habitStatsData.totalDays > 0) { try { // Thực hiện cập nhật trường học bổng await this.updateScholarshipField( credentials, credentials.milestoneTaskId, credentials.scholarshipFieldId, habitStatsData.scholarshipAmount ); // Set flag to indicate scholarship was updated habitStatsData.scholarshipUpdated = true; } catch (updateError) { // We don't want to fail the entire fetch operation if just the update fails // Just continue without throwing an error } } return { habitStats: habitStatsData }; } catch (error) { throw new Error(`Failed to fetch data from ClickUp: ${error.message}`); } }, // Get workspaces for the user async getWorkspaces(headers) { // Use page-specific storage when needed const storageKey = getPageSpecificKey('clickupCredentials'); const response = await fetch('https://api.clickup.com/api/v2/team', { method: 'GET', headers }); if (!response.ok) { throw new Error(`Failed to get workspaces: ${response.status} ${response.statusText}`); } const data = await response.json(); return data.teams || []; }, // Get tasks from a space async getTasksFromSpace(headers, spaceId) { let allTasks = []; try { // Step 1: First get all folders in the space const foldersResponse = await fetch(`https://api.clickup.com/api/v2/space/${spaceId}/folder?archived=false`, { method: 'GET', headers }); if (!foldersResponse.ok) { throw new Error(`Failed to get folders: ${foldersResponse.status} ${foldersResponse.statusText}`); } const foldersData = await foldersResponse.json(); const folders = foldersData.folders || []; // Step 2: Get lists from each folder for (const folder of folders) { try { const folderListsResponse = await fetch(`https://api.clickup.com/api/v2/folder/${folder.id}/list?archived=false`, { method: 'GET', headers }); if (!folderListsResponse.ok) { continue; } const folderListsData = await folderListsResponse.json(); const folderLists = folderListsData.lists || []; // Get tasks from each list in the folder for (const list of folderLists) { try { const tasks = await this.getTasksFromList(headers, list.id); allTasks = [...allTasks, ...tasks]; } catch (error) { // Continue with other lists even if one fails } } } catch (error) { // Continue with other folders even if one fails } } // Step 3: Get lists that are directly in the space (not in any folder) const listsResponse = await fetch(`https://api.clickup.com/api/v2/space/${spaceId}/list?archived=false`, { method: 'GET', headers }); if (!listsResponse.ok) { throw new Error(`Failed to get lists: ${listsResponse.status} ${listsResponse.statusText}`); } const listsData = await listsResponse.json(); const lists = listsData.lists || []; // Get tasks from each list in the space for (const list of lists) { try { const tasks = await this.getTasksFromList(headers, list.id); allTasks = [...allTasks, ...tasks]; } catch (error) { // Continue with other lists even if one fails } } return allTasks; } catch (error) { throw error; } }, // Get tasks from specific lists async getTasksFromLists(headers, listIds) { let allTasks = []; let successCount = 0; let totalLists = listIds.length; // Update the progress as we go for (let i = 0; i < listIds.length; i++) { const listId = listIds[i]; if (!listId || listId.trim() === '') continue; try { // console.log(`Fetching tasks from list ID: ${listId}`); // Removed log const tasks = await this.getTasksFromList(headers, listId); // console.log(`Successfully fetched ${tasks.length} tasks from list ${listId}`); // Removed log allTasks = [...allTasks, ...tasks]; successCount++; } catch (error) { console.error(`Error fetching tasks from list ${listId}:`, error); // Continue with other lists even if one fails } } // console.log(`Successfully fetched tasks from ${successCount}/${totalLists} lists`); // Removed log if (successCount === 0 && totalLists > 0) { throw new Error('Không thể truy cập dữ liệu từ bất kỳ danh sách nào. Vui lòng kiểm tra lại List ID của bạn.'); } return allTasks; }, // Get tasks from a single list async getTasksFromList(headers, listId) { // Ensure we get all tasks, not just the first page let allTasks = []; let hasMoreTasks = true; let startIndex = 0; const PAGE_SIZE = 100; while (hasMoreTasks) { const url = `https://api.clickup.com/api/v2/list/${listId}/task?archived=false&subtasks=true&include_closed=true&page=${startIndex/PAGE_SIZE}&order_by=created&reverse=true&limit=${PAGE_SIZE}`; const tasksResponse = await fetch(url, { method: 'GET', headers }); if (!tasksResponse.ok) { throw new Error(`Failed to get tasks: ${tasksResponse.status} ${tasksResponse.statusText}`); } const tasksData = await tasksResponse.json(); const tasks = tasksData.tasks || []; allTasks = [...allTasks, ...tasks]; // Check if we need to fetch more pages if (tasks.length < PAGE_SIZE) { hasMoreTasks = false; } else { startIndex += PAGE_SIZE; } } return allTasks; }, // Process tasks to extract statistics processTasksForStats(tasks) { // Count tasks with status "DONE" or in "CLOSED" status for total days managed // Filter main tasks with DONE status or in CLOSED status (excluding subtasks) const managedDaysTasks = tasks.filter(task => { if (!task.status) return false; // Check if it's a subtask const isSubtask = task.parent !== undefined && task.parent !== null; // Skip if it's a subtask if (isSubtask) return false; // Get statusName and ensure it's a string to avoid errors let statusName = ''; if (task.status) { if (typeof task.status === 'object' && task.status.status) { statusName = task.status.status.toString().toLowerCase(); } else if (typeof task.status === 'string') { statusName = task.status.toString().toLowerCase(); } else { statusName = ''; } } // Check if status is "DONE" or "CLOSED" const isDoneOrClosed = statusName.includes('done') || statusName.includes('closed'); return isDoneOrClosed; }); // Tính toán học bổng dựa trên số ngày đã hoàn thành const totalDays = managedDaysTasks.length; // Tính toán học bổng dựa trên số ngày đã hoàn thành // Sử dụng cách tính tổng học bổng giống như trong GoalStats.js const calculateTotalScholarship = (days) => { // Define milestones and their corresponding scholarship amounts const milestones = [ { threshold: 10, amount: 400000 }, { threshold: 30, amount: 600000 }, { threshold: 60, amount: 1000000 }, { threshold: 90, amount: 2000000 }, { threshold: 120, amount: 4000000 }, { threshold: 180, amount: 6000000 }, ]; // Sort milestones by threshold in ascending order to ensure correct calculation const sortedMilestones = [...milestones].sort((a, b) => a.threshold - b.threshold); // Calculate total scholarship by adding up all achieved milestone amounts let totalScholarship = 0; for (const milestone of sortedMilestones) { if (days >= milestone.threshold) { totalScholarship += milestone.amount; } } return totalScholarship; }; const scholarshipAmount = calculateTotalScholarship(totalDays); // Trả về cả số ngày và số tiền học bổng return { totalDays: totalDays, scholarshipAmount: scholarshipAmount }; }, // Add comment to a specific task when a milestone is completed async addMilestoneComment(credentials, taskId, milestone) { if (!credentials.apiKey || !taskId) { throw new Error('API Key and Task ID are required for commenting'); } const headers = { 'Authorization': credentials.apiKey, 'Content-Type': 'application/json' }; try { // Format milestone data for the comment const calculateScholarship = (days) => { if (days >= 180) return '6.000.000'; if (days >= 120) return '4.000.000'; if (days >= 90) return '2.000.000'; if (days >= 60) return '1.000.000'; if (days >= 30) return '600.000'; if (days >= 10) return '400.000'; return '0'; }; const scholarshipAmount = calculateScholarship(milestone.days); // Create a nicely formatted comment const commentText = `🎉 **MILESTONE ACHIEVED!** 🎉\n\n` + `👉 **${milestone.days} days** of habit compliance completed!\n` + `💰 Scholarship amount: **${scholarshipAmount} VND**\n` + `📅 Achieved on: ${new Date().toLocaleString('vi-VN')}\n\n` + `Congratulations on this achievement! Keep up the great work.`; // Make API request to add comment const response = await fetch(`https://api.clickup.com/api/v2/task/${taskId}/comment`, { method: 'POST', headers, body: JSON.stringify({ comment_text: commentText, notify_all: true }) }); if (!response.ok) { const errorData = await response.json(); throw new Error(`Failed to add comment: ${response.status} ${response.statusText} - ${JSON.stringify(errorData)}`); } const data = await response.json(); return data; } catch (error) { throw new Error(`Failed to add milestone comment: ${error.message}`); } }, // Start automatic background sync process // Cập nhật giá trị trường tùy chỉnh (custom field) cho task async updateScholarshipField(credentials, taskId, fieldId, scholarshipAmount) { if (!credentials.apiKey || !taskId || !fieldId) { throw new Error('API Key, Task ID và Custom Field ID đều yêu cầu để cập nhật'); } const headers = { 'Authorization': credentials.apiKey, 'Content-Type': 'application/json' }; try { // Tạo dữ liệu cập nhật trường tùy chỉnh // Chuyển đổi số học bổng thành chuỗi có định dạng để ClickUp hiển thị tốt hơn const formattedScholarship = scholarshipAmount.toLocaleString('vi-VN'); // Sử dụng endpoint và phương thức API đúng để cập nhật trường tùy chỉnh // Đây là cấu trúc API đúng cho việc cập nhật field const response = await fetch(`https://api.clickup.com/api/v2/task/${taskId}/field/${fieldId}`, { method: 'POST', headers, body: JSON.stringify({ value: scholarshipAmount }) }); if (!response.ok) { const errorData = await response.json(); throw new Error(`Cập nhật trường học bổng thất bại: ${response.status} ${response.statusText} - ${JSON.stringify(errorData)}`); } const data = await response.json(); return data; } catch (error) { throw new Error(`Cập nhật trường học bổng thất bại: ${error.message}`); } }, startAutoSync(onSyncComplete) { // Function to perform a sync operation const performSync = async () => { try { // Get credentials from storage const storageKey = getPageSpecificKey('clickupCredentials'); const credentialsStr = localStorage.getItem(storageKey); if (!credentialsStr) { return; } const credentials = JSON.parse(credentialsStr); // Only proceed if we have the necessary credentials if (credentials.apiKey && credentials.listIds && credentials.listIds.length > 0 && credentials.listIds[0].trim() !== '') { const data = await this.fetchData(credentials, false); // If data is null, it means sync was skipped due to time interval if (data === null) { return; } // Call the completion handler with the data if (onSyncComplete && typeof onSyncComplete === 'function') { onSyncComplete(data); } } } catch (error) { // Silently handle auto-sync errors } }; // Perform an initial sync immediately performSync(); // Set up interval for regular syncing const intervalId = setInterval(performSync, SYNC_INTERVAL); // Return function to stop auto-sync if needed return () => { clearInterval(intervalId); }; }, // Check if credentials exist and are valid for auto-sync hasValidCredentials() { try { const storageKey = getPageSpecificKey('clickupCredentials'); const credentialsStr = localStorage.getItem(storageKey); if (!credentialsStr) { return false; } const credentials = JSON.parse(credentialsStr); // Check if we have API key and at least one list ID return !!(credentials.apiKey && credentials.listIds && credentials.listIds.length > 0 && credentials.listIds[0].trim() !== ''); } catch (error) { console.error('Error checking credentials:', error); return false; } }, // Create a new task for a completed milestone async createMilestoneTask(credentials, milestone) { const { apiKey, newListIdForMilestones, milestoneTagName, milestoneImageFieldId } = credentials; // Check if necessary credentials for creating milestone tasks are provided if (!apiKey || !newListIdForMilestones || !milestoneTagName || !milestoneImageFieldId) { console.warn('Skipping milestone task creation: Missing required credentials (newListIdForMilestones, milestoneTagName, milestoneImageFieldId)'); // Keep warn return; // Don't throw an error, just skip if not configured } if (!milestone || !milestone.days || !milestone.imageUrl) { console.error('Cannot create milestone task: Invalid milestone data provided.'); // Keep error return; } const headers = { 'Authorization': apiKey, 'Content-Type': 'application/json' }; const currentTime = new Date().toLocaleString('vi-VN', { dateStyle: 'short', timeStyle: 'short' }); const taskName = `TM - Cột Mốc ${milestone.days} Ngày Quản Ly Time - ${currentTime}`; const taskDescription = `Đã đạt được cột mốc ${milestone.days} ngày vào ${new Date().toLocaleString('vi-VN')}. Học bổng tích lũy: ${milestone.scholarship?.toLocaleString() || 'N/A'} VND.`; try { // 1. Create the task // console.log(`Creating milestone task in list ${newListIdForMilestones}...`); // Removed log const createTaskResponse = await fetch(`https://api.clickup.com/api/v2/list/${newListIdForMilestones}/task`, { method: 'POST', headers, body: JSON.stringify({ name: taskName, description: taskDescription, // Removed status: 'open'. ClickUp will use the list's default status. // You can add more fields like due_date, priority, assignees etc. if needed }) }); if (!createTaskResponse.ok) { const errorData = await createTaskResponse.json(); throw new Error(`Failed to create task: ${createTaskResponse.status} ${createTaskResponse.statusText} - ${JSON.stringify(errorData)}`); } const newTask = await createTaskResponse.json(); // console.log(`Successfully created task with ID: ${newTask.id}`); // Removed log // Store the new task ID for subsequent operations const newTaskId = newTask.id; // --- Add Tag --- try { // console.log(`Attempting to add tag '${milestoneTagName}' to task ${newTaskId}...`); // Removed log // ClickUp's API for adding a tag uses the tag *name* directly in the URL, not the ID. // Ensure the tag name is properly URL-encoded. await this.addTagToTask(headers, newTaskId, milestoneTagName); // console.log(`Successfully added tag '${milestoneTagName}' to task ${newTaskId}`); // Removed log } catch (tagError) { console.error(`Error adding tag '${milestoneTagName}' to task ${newTaskId}: ${tagError.message}`); // Keep error // Continue even if adding tag fails, as it might already exist or the tag name might be wrong } // --- Set Custom Field (Image URL) --- try { // console.log(`Attempting to set custom field '${milestoneImageFieldId}' for task ${newTaskId}...`); // Removed log // Check if we have the image URL if (milestone.imageUrl) { await this.setCustomFieldValue(headers, newTaskId, milestoneImageFieldId, milestone.imageUrl); // console.log(`Successfully set image URL in custom field '${milestoneImageFieldId}' for task ${newTaskId}`); // Removed log } else { console.warn(`Milestone image URL is missing for milestone ${milestone.days}. Skipping custom field update.`); // Keep warn } } catch(fieldError) { console.error(`Error setting custom field '${milestoneImageFieldId}' for task ${newTaskId}: ${fieldError.message}`); // Keep error // Continue even if setting field fails } return newTask; } catch (error) { console.error(`Failed to create milestone task: ${error.message}`); // Don't re-throw the error to avoid breaking the main flow if milestone task creation fails } }, // Helper function to set the value of a custom field for a task async setCustomFieldValue(headers, taskId, fieldId, value) { // ClickUp API requires specific types for certain fields. // For a URL field, the value should just be the URL string. // For number/currency fields, it should be a number. // For text fields, it's a string. // Basic validation if (!fieldId) { console.warn(`Custom Field ID is missing. Cannot set value for task ${taskId}.`); // Keep warn return; } if (value === undefined || value === null) { console.warn(`Value for custom field ${fieldId} is undefined or null. Cannot set value for task ${taskId}.`); // Keep warn return; } try { // console.log(`Setting value for custom field ID: ${fieldId} on task ID: ${taskId} with value: ${value}`); // Removed log const response = await fetch(`https://api.clickup.com/api/v2/task/${taskId}/field/${fieldId}`, { method: 'POST', headers, body: JSON.stringify({ value: value // Send the value directly }) }); if (!response.ok) { const errorData = await response.json(); throw new Error(`Failed to set custom field value: ${response.status} ${response.statusText} - ${JSON.stringify(errorData)}`); } // console.log(`Successfully initiated setting custom field ${fieldId} for task ${taskId}.`); // Removed log // No meaningful data returned on success usually for this endpoint } catch (error) { console.error(`Error setting custom field ${fieldId} for task ${taskId}:`, error); // Keep error throw error; // Re-throw error } }, // Get all tags for a workspace async getTags(headers, workspaceId) { if (!workspaceId) { throw new Error('Workspace ID is required to get tags'); } try { // console.log(`Fetching tags for workspace ID: ${workspaceId}`); // Removed log const response = await fetch(`https://api.clickup.com/api/v2/team/${workspaceId}/tag`, { method: 'GET', headers }); if (!response.ok) { const errorData = await response.json(); throw new Error(`Failed to get tags: ${response.status} ${response.statusText} - ${JSON.stringify(errorData)}`); } const data = await response.json(); // console.log(`Successfully fetched ${data.tags?.length || 0} tags`); // Removed log return data.tags || []; } catch (error) { console.error(`Error fetching tags: ${error.message}`); // Keep error throw new Error(`Failed to fetch tags: ${error.message}`); } }, // Add a tag to a task async addTagToTask(headers, taskId, tagName) { if (!taskId || !tagName) { throw new Error('Task ID and Tag Name are required to add a tag'); } try { // ClickUp API uses the tag name in the URL, not the tag ID for this specific endpoint. // The tag must already exist in the workspace. // console.log(`Adding tag '${tagName}' to task ID: ${taskId}`); // Removed log const response = await fetch(`https://api.clickup.com/api/v2/task/${taskId}/tag/${encodeURIComponent(tagName)}`, { method: 'POST', headers // No body is required for this specific ClickUp API endpoint }); if (!response.ok) { const errorData = await response.json(); // console.error(`ClickUp API Error Response: Status ${response.status}, Body: ${JSON.stringify(errorData)}`); // Removed log let errorMessage = `Failed to add tag: ${response.status} ${response.statusText}`; if (errorData && errorData.err) { errorMessage += ` - ClickUp Error: ${errorData.err}`; if (errorData.ECODE) { errorMessage += ` (Code: ${errorData.ECODE})`; } } else if (errorData) { errorMessage += ` - ${JSON.stringify(errorData)}`; } // Specific error for tag not found, though ClickUp might return a generic error if (response.status === 404 || (errorData && (errorData.ECODE === 'TAG_003' || errorData.err?.toLowerCase().includes("can't find tag")))) { console.warn(`Tag '${tagName}' not found in workspace or already on task. Or, task ID '${taskId}' not found.`); // Keep warn } throw new Error(errorMessage); } // console.log(`Successfully added tag '${tagName}' to task ID: ${taskId}`); // Removed log // This endpoint typically returns a 200 OK with an empty body or minimal response return { success: true, message: `Tag '${tagName}' added to task '${taskId}'.` }; } catch (error) { console.error(`Error adding tag '${tagName}' to task '${taskId}': ${error.message}`); // Keep error // Avoid re-throwing if it's a specific "tag not found" or "already on task" scenario handled by ClickUp, // unless we want to bubble it up. For now, just log and let it proceed if it's a non-critical warning. // However, if the API call itself fails (non-200), we should throw. if (!error.message.includes("Tag") || !error.message.includes("not found")){ // throw new Error(`Failed to add tag to task: ${error.message}`); // Decided to not re-throw to prevent breaking the main flow if only tagging fails for an existing tag, // but this might hide underlying issues. Let's re-throw to make it explicit. throw new Error(`Failed to add tag '${tagName}' to task '${taskId}': ${error.message}`); } return { success: false, message: error.message }; // Return a failure object if not re-throwing } }, };29:T339a,import React, { useState } from 'react'; import { clickupService } from 'clickupService'; import { ScholarshipUpdateNotification } from 'ScholarshipUpdateNotification'; export const SyncForm = ({ onSyncComplete }) => { // Remove the local showSettings state since it's now controlled from parent const [syncState, setSyncState] = useState({ status: 'idle', // idle, syncing, success, error message: '', progress: 0 }); // State for scholarship update notification const [scholarshipNotification, setScholarshipNotification] = useState({ show: false, amount: 0 }); // Helper to get truly unique page-specific storage key const getPageSpecificKey = (baseKey) => { // Get only the path part of the URL for better uniqueness without exposing sensitive parameters const path = window.location.pathname; // Add optional hash or query parameters if they're important for distinguishing pages const hash = window.location.hash ? window.location.hash : ''; // Create a unique identifier from the URL parts const uniqueId = `${path}${hash}`.replace(/[^a-zA-Z0-9]/g, '_'); // console.log('Generated unique ID for storage:', uniqueId); // Removed log return `${baseKey}_${uniqueId}`; }; const storageKey = getPageSpecificKey('clickupCredentials'); const [formData, setFormData] = useState(() => { // Try to load saved credentials from localStorage with page-specific key const savedCredentials = localStorage.getItem(storageKey); if (savedCredentials) { try { return JSON.parse(savedCredentials); } catch (e) { console.error("Error parsing saved credentials:", e); return { apiKey: '', workspace: '', spaceId: '' }; } } // Return default credentials if nothing saved return { apiKey: '', workspace: '', spaceId: '', milestoneTaskId: '', // Task ID for milestone *comments* scholarshipFieldId: '', // Custom field ID for scholarship amount newListIdForMilestones: '', // List ID for creating *new* milestone tasks milestoneTagName: '', // Tag name for new milestone tasks milestoneImageFieldId: '' // Custom field ID (URL type) for milestone image }; }); // State cho quản lý danh sách List IDs const [listIds, setListIds] = useState(() => { // Cố gắng tải danh sách List IDs từ dữ liệu đã lưu const savedCredentials = localStorage.getItem(storageKey); if (savedCredentials) { try { const credentials = JSON.parse(savedCredentials); return credentials.listIds || ['']; } catch (e) { console.error("Lỗi khi xử lý danh sách List IDs đã lưu:", e); return ['']; } } return ['']; }); // Handle form field changes const handleChange = (e) => { const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }; // Xử lý thay đổi cho các List ID const handleListIdChange = (index, value) => { const newListIds = [...listIds]; newListIds[index] = value; setListIds(newListIds); // Cập nhật formData với listIds mới setFormData({ ...formData, listIds: newListIds }); }; // Thêm một trường List ID mới const handleAddListId = () => { setListIds([...listIds, '']); }; // Xóa một trường List ID const handleRemoveListId = (index) => { if (listIds.length > 1) { const newListIds = listIds.filter((_, i) => i !== index); setListIds(newListIds); // Cập nhật formData với listIds mới setFormData({ ...formData, listIds: newListIds }); } }; // Handle form submission and sync process const handleSync = async () => { // Kiểm tra các trường bắt buộc if (!formData.apiKey || !listIds[0].trim()) { setSyncState({ status: 'error', message: 'Vui lòng điền đầy đủ API Key và ít nhất một List ID', progress: 0 }); return; } // Cập nhật formData với listIds mới nhất trước khi lưu const updatedFormData = { ...formData, listIds: listIds.filter(id => id.trim() !== '') // Lọc bỏ các ID trống }; // Save credentials to localStorage with page-specific key localStorage.setItem(storageKey, JSON.stringify(updatedFormData)); // Bắt đầu quá trình đồng bộ setSyncState({ status: 'syncing', message: 'Đang kết nối với ClickUp...', progress: 10 }); try { // Gọi API thực tế đến ClickUp setSyncState(prev => ({ ...prev, message: 'Đang xác thực với ClickUp API...', progress: 20 })); // Lấy dữ liệu từ ClickUp setSyncState(prev => ({ ...prev, message: `Đang lấy dữ liệu từ ClickUp...`, progress: 40 })); // Sử dụng formData với listIds đã cập nhật const data = await clickupService.fetchData({ ...formData, listIds: listIds.filter(id => id.trim() !== '') }); setSyncState(prev => ({ ...prev, message: 'Đang xử lý dữ liệu...', progress: 70 })); // console.log('Received data from ClickUp:', data); // Removed log setSyncState(prev => ({ ...prev, message: 'Đang hoàn tất quá trình...', progress: 90 })); // Thông báo thành công setSyncState({ status: 'success', message: 'Đồng bộ hóa thành công!', progress: 100 }); // Hiển thị thông báo cập nhật học bổng nếu đã cập nhật if (data?.habitStats?.scholarshipUpdated && data.habitStats.scholarshipAmount > 0) { setScholarshipNotification({ show: true, amount: data.habitStats.scholarshipAmount }); } // Pass data back to parent component if (onSyncComplete && typeof onSyncComplete === 'function') { onSyncComplete(data); } // Tự động ẩn thông báo sau 5 giây setTimeout(() => { setSyncState({ status: 'idle', message: '', progress: 0 }); // No need to call setShowSettings here, as the parent RewardLadder controls it }, 3000); // Shortened timeout for success/error messages within form } catch (error) { console.error('Error during sync:', error); setSyncState({ status: 'error', message: error.message || 'Đồng bộ hóa thất bại. Vui lòng thử lại.', progress: 0 }); } }; return (

{/* Form content is shown directly without additional button or modal */}

API Key *

Workspace ID *

List ID (Chứa Task Ngày QL)

{listIds.map((listId, index) => (

handleListIdChange(index, e.target.value)} required={index === 0} /> {listIds.length > 1 && ( )}

))}

List ID (Nơi Lưu Task Mới Tạo)

Task ID (Lưu & Nhận Thông Báo)

Custom Field ID (Lưu Học Bổng)

Tag Name (Tên Người Chơi)

Custom Field ID (Lưu URL Huy Hiệu)

{syncState.status !== 'idle' && (

{syncState.status === 'syncing' && '⏳'} {syncState.status === 'success' && '✅'} {syncState.status === 'error' && '❌'}

{syncState.message}

{syncState.status === 'syncing' && (

)}

)} {/* Notification for scholarship update */} setScholarshipNotification({ show: false, amount: 0 })} />

); }; export default SyncForm;2a:T7330,import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react'; import confetti from 'https://esm.sh/canvas-confetti@1.6.0'; import { MilestoneCelebration } from 'MilestoneCelebration'; import { clickupService } from 'clickupService'; import { getFromPageStorage } from 'storageUtils'; // Sample daily goals array const sampleDailyGoals = [ { id: 1, title: "Meditation", description: "15 minutes of mindfulness", completed: false }, { id: 2, title: "Exercise", description: "30 minutes cardio", completed: true }, { id: 3, title: "Reading", description: "Read 20 pages", completed: false }, { id: 4, title: "Coding", description: "Solve 2 coding problems", completed: true }, { id: 5, title: "Journaling", description: "Write daily reflection", completed: false } ]; // Tối ưu bằng cách trích xuất các inline styles thành các biến có thể tái sử dụng const styles = { container: { position: 'relative', margin: '20px auto', padding: '15px 0', width: '100%', maxWidth: '700px', display: 'flex', flexDirection: 'column' }, timelineTrack: { position: 'absolute', top: 0, bottom: 0, left: '50%', width: '4px', backgroundColor: 'rgba(255, 215, 0, 0.3)', transform: 'translateX(-50%)', zIndex: 1 }, glowEffect: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, boxShadow: '0 0 15px rgba(255, 215, 0, 0.5)', zIndex: 0 }, timelineItem: (isLeft, index) => ({ display: 'flex', justifyContent: isLeft ? 'flex-start' : 'flex-end', padding: '18px 10px', position: 'relative', zIndex: 2, marginTop: index === 0 ? '0' : `${index === 1 ? '20px' : '30px'}` }), timelineDot: (isCompleted) => ({ position: 'absolute', left: '50%', width: '16px', height: '16px', borderRadius: '50%', background: isCompleted ? 'linear-gradient(135deg, #FFD700, #FFA500)' : 'rgba(255, 255, 255, 0.2)', border: isCompleted ? '2px solid #FFD700' : '1px solid rgba(255, 215, 0, 0.3)', transform: 'translateX(-50%)', boxShadow: isCompleted ? '0 0 8px rgba(255, 215, 0, 0.7)' : 'none', zIndex: 5 }) }; export const TimelineMilestones = ({ totalDays = 0 }) => { // State to track which milestones have been notified const [notifiedMilestones, setNotifiedMilestones] = useState(() => { return getFromPageStorage('notifiedMilestones', []); }); // Function to get the appropriate image for each milestone const getMilestoneImage = (index) => { const imageMap = { 0: "https://play.rosebud.ai/assets/Lv1.gif?LuCK", 1: "https://play.rosebud.ai/assets/lv2.gif?ZReK", 2: "https://play.rosebud.ai/assets/Lv3.gif?KYhg", 3: "https://play.rosebud.ai/assets/Lv4.gif?APNg", 4: "https://play.rosebud.ai/assets/lv5.gif?6OKX", 5: "https://play.rosebud.ai/assets/Lv6.gif?R7R5" }; return imageMap[index] || "https://play.rosebud.ai/assets/Lv1.gif?LuCK"; }; // State for celebration popup const [celebrationOpen, setCelebrationOpen] = useState(false); const [celebratedMilestone, setCelebratedMilestone] = useState(null); // Define milestones with useMemo to prevent recreating on each render const milestones = useMemo(() => [ { days: 10, position: 0, scholarship: 400000 }, // First milestone at position 0 { days: 30, position: 30, scholarship: 600000 }, // Second milestone { days: 60, position: 60, scholarship: 1000000 }, // Third milestone { days: 90, position: 90, scholarship: 2000000 }, // Fourth milestone { days: 120, position: 120, scholarship: 4000000 },// Fifth milestone { days: 180, position: 180, scholarship: 6000000 } // Sixth milestone ], []); // Remove all useEffect hooks related to pomodoro calculations // Close celebration popup handler with useCallback const handleCloseCelebration = useCallback(() => { setCelebrationOpen(false); }, []); // Effect to check if any new milestone has been reached and notify // Reference to the timeline container for scrolling const timelineContainerRef = useRef(null); useEffect(() => { if (totalDays > 0) { // Check each milestone to see if it's been reached and not yet notified const reachedMilestones = milestones.filter(milestone => totalDays >= milestone.days && !notifiedMilestones.includes(milestone.days) ); if (reachedMilestones.length > 0) { // Sort milestones by days (highest first) to notify the biggest achievement const sortedMilestones = [...reachedMilestones].sort((a, b) => b.days - a.days); const highestMilestone = sortedMilestones[0]; // Get credentials from storage to access ClickUp API const storageKey = 'clickupCredentials_' + window.location.pathname.replace(/[^a-zA-Z0-9]/g, '_'); const credentials = JSON.parse(localStorage.getItem(storageKey) || '{}'); // Only proceed if we have credentials if (credentials && credentials.apiKey) { // Determine if we should add a comment or create a task (or both) const shouldAddComment = !!credentials.milestoneTaskId; const shouldCreateTask = !!credentials.newListIdForMilestones && !!credentials.milestoneTagName && !!credentials.milestoneImageFieldId; const milestoneDataForApi = { days: highestMilestone.days, scholarship: highestMilestone.scholarship, imageUrl: getMilestoneImage(milestones.findIndex(m => m.days === highestMilestone.days)) }; // Promise array to handle async operations const apiPromises = []; // 1. Add comment if configured if (shouldAddComment) { apiPromises.push( clickupService.addMilestoneComment( credentials, credentials.milestoneTaskId, milestoneDataForApi // Pass full milestone data ).then(() => {/* console.log(`Added comment for milestone: ${highestMilestone.days} days`) */}) // Removed log .catch(err => console.error('Failed to add milestone comment:', err)) // Catch comment error ); } // 2. Create task if configured if (shouldCreateTask) { apiPromises.push( clickupService.createMilestoneTask(credentials, milestoneDataForApi) .then((newTask) => { if (newTask) { // console.log(`Created task for milestone: ${highestMilestone.days} days (Task ID: ${newTask.id})`); // Removed log } }) .catch(err => console.error('Failed to create milestone task:', err)) // Catch task creation error ); } // Execute all API calls concurrently Promise.all(apiPromises).then(() => { // This block runs after all API calls (comment/task creation) attempt to complete // Update notified milestones const updatedNotifiedMilestones = [...notifiedMilestones, highestMilestone.days]; setNotifiedMilestones(updatedNotifiedMilestones); // Save to storage localStorage.setItem( 'notifiedMilestones_' + window.location.pathname.replace(/[^a-zA-Z0-9]/g, '_'), JSON.stringify(updatedNotifiedMilestones) ); // Display celebration popup setCelebratedMilestone(highestMilestone); setCelebrationOpen(true); // Update notified milestones state regardless of API success/failure, // as the milestone *was* reached. // The variable 'updatedNotifiedMilestones' was already declared above, no need to redeclare setNotifiedMilestones(updatedNotifiedMilestones); // Use the existing variable // Save to storage localStorage.setItem( 'notifiedMilestones_' + window.location.pathname.replace(/[^a-zA-Z0-9]/g, '_'), JSON.stringify(updatedNotifiedMilestones) ); // Display celebration popup setCelebratedMilestone(highestMilestone); setCelebrationOpen(true); }); // End of Promise.all().then() } else { console.warn('No valid ClickUp credentials found for milestone actions. Skipping API calls.'); // Kept as warn // Still mark as notified and show celebration even if API calls can't be made const updatedNotifiedMilestones = [...notifiedMilestones, highestMilestone.days]; setNotifiedMilestones(updatedNotifiedMilestones); localStorage.setItem( 'notifiedMilestones_' + window.location.pathname.replace(/[^a-zA-Z0-9]/g, '_'), JSON.stringify(updatedNotifiedMilestones) ); setCelebratedMilestone(highestMilestone); setCelebrationOpen(true); } } } }, [totalDays, milestones, notifiedMilestones, getMilestoneImage]); // Added getMilestoneImage dependency const launchConfettiEffect = () => { const count = 250; // More particles for a bigger celebration const defaults = { origin: { y: 0.6 }, // Start from slightly below the vertical center zIndex: 10000, // Ensure it's on top of other elements disableForReducedMotion: true }; // Theme-consistent colors: Gold, Orange, White, Lighter Gold, Darker Gold const themeColors = ['#FFD700', '#FFA500', '#FFFFFF', '#F0B429', '#E6A11D', '#FFC0CB']; function fire(particleRatio, opts) { confetti(Object.assign({}, defaults, opts, { particleCount: Math.floor(count * particleRatio), colors: themeColors })); } // A sequence of bursts for a more dynamic "fireworks" feel setTimeout(() => { fire(0.3, { spread: 35, startVelocity: 60, angle: 90, drift: -0.5 }); // Center-ish up fire(0.25, { spread: 80, startVelocity: 50, angle: 60, origin: { x: 0.3, y: 0.7 }, drift: -0.2 }); // Left-ish up fire(0.25, { spread: 80, startVelocity: 50, angle: 120, origin: { x: 0.7, y: 0.7 }, drift: 0.2 }); // Right-ish up }, 0); setTimeout(() => { fire(0.20, { spread: 130, decay: 0.92, scalar: 1.2, startVelocity: 35, angle: 90, drift: 0.5 }); // Wider, slower center fire(0.15, { spread: 100, decay: 0.91, scalar: 0.9, angle: 45, origin: {x: 0.2, y: 0.8}, startVelocity: 40 }); // Bottom left fire(0.15, { spread: 100, decay: 0.91, scalar: 0.9, angle: 135, origin: {x: 0.8, y: 0.8}, startVelocity: 40}); // Bottom right }, 200); // Staggered launch }; // Effect to trigger confetti when celebrationOpen is true useEffect(() => { if (celebrationOpen) { launchConfettiEffect(); } }, [celebrationOpen]); // Effect to scroll to active milestone on page load useEffect(() => { if (totalDays > 0 && timelineContainerRef.current) { // Find the active milestone (first uncompleted milestone after the last completed one) let activeMilestoneIndex = -1; for (let i = 0; i < milestones.length; i++) { if (totalDays < milestones[i].days) { activeMilestoneIndex = i; break; } } // If all milestones are completed, scroll to the last one if (activeMilestoneIndex === -1 && totalDays >= milestones[milestones.length - 1].days) { activeMilestoneIndex = milestones.length - 1; } // Scroll to the active milestone with a slight delay to ensure DOM is ready if (activeMilestoneIndex !== -1) { setTimeout(() => { const timelineItems = timelineContainerRef.current.querySelectorAll('.timeline-item'); if (timelineItems[activeMilestoneIndex]) { timelineItems[activeMilestoneIndex].scrollIntoView({ behavior: 'smooth', block: 'center' }); } }, 500); } } }, [totalDays, milestones]); return (

{/* Central Timeline */}

{/* Gold glow effect */}

{/* Milestone Items */} {milestones.map((milestone, index) => { const isLeft = index % 2 === 0; const isCompleted = totalDays >= milestone.days; const isActive = totalDays > 0 && totalDays < milestone.days && (index === 0 || totalDays >= milestones[index-1].days); // Calculate top position based on the position property const topPosition = `${milestone.position}px`; // Calculate progress for the current active milestone let progress = 0; if (isActive && index > 0) { const prevMilestone = milestones[index-1].days; const range = milestone.days - prevMilestone; const current = totalDays - prevMilestone; progress = (current / range) * 100; } else if (isActive && index === 0) { progress = (totalDays / milestone.days) * 100; } return (

{/* Circle on the timeline */}

{/* Content card */}

{/* Banner image */} {/* Two-column layout container */}

{/* Image column (2/3 width) */}

{/* Lock icon overlay for locked milestones */} {!isCompleted && !isActive && (

🔒

)}

{/* Day counter column (1/3 width) */}

{/* Day number with black background and gold border - matched to image height */}

{/* Content above the number */}

{isCompleted ? ✨ : <> {isActive ? '🏆' : '🏆'} ĐIỀU KIỆN }

{milestone.days}

NGÀY

{/* Content below the number */}

{isCompleted ? '⭐' : ''}

{/* Progress bar in separate row */}

{/* Progress bar with percentage inside */}

{/* Percentage text inside progress bar */}

{isCompleted ? '100%' : isActive ? `${Math.round(progress)}%` : '0%'}

{/* Enhanced Reward information */}

{/* Reward image with enhanced styling */}

{/* Gold overlay for completed milestones */} {isCompleted && (

)}

{/* Reward description with enhanced styling */}

{/* Reward value */}

{milestone.scholarship.toLocaleString()} VND

{/* Reward description */}

Học Bổng Chiến Thắng

{/* Status badge for completed milestones only - removed for simplicity */}

); })} {/* Celebration popup */} m.days === celebratedMilestone?.days)) }} onClose={handleCloseCelebration} />

); }; // Export styles for possible reuse in other components export const timelineStyles = styles; // Add a fallback function to calculate scholarship amount based on days export const calculateScholarshipAmount = (days) => { // Find highest milestone achieved and get corresponding scholarship amount const milestones = [10, 30, 60, 90, 120, 180]; const scholarshipAmounts = [400000, 600000, 1000000, 2000000, 4000000, 6000000]; let amount = 0; for (let i = milestones.length - 1; i >= 0; i--) { if (days >= milestones[i]) { amount = scholarshipAmounts[i]; break; } } return amount; }; // DailyGoalItem component const DailyGoalItem = ({ goal, isCompleted }) => { return (

{isCompleted && ✓}

{goal.title}

{goal.description}

); };2b:T271c,import React, { useState } from 'react'; import SyncForm from 'SyncForm'; import SyncStatus from 'SyncStatus'; import Header from 'Header'; import { ThemeProvider, useTheme } from 'ThemeContext'; export default function App() { const [showSettings, setShowSettings] = useState(false); const [syncState, setSyncState] = useState({ status: 'idle', // idle, syncing, success, error message: '', progress: 0, }); const handleSync = async (credentials) => { // Start sync process setSyncState({ status: 'syncing', message: 'Connecting to ClickUp...', progress: 10 }); try { console.log('Syncing with credentials:', credentials); // Validate if we have at least Space ID or List IDs if (!credentials.spaceId && (!credentials.listIds || credentials.listIds.every(id => !id.trim()))) { throw new Error('Vui lòng cung cấp Space ID hoặc ít nhất một List ID'); } // Ưu tiên sử dụng Space ID nếu có const usesSpaceId = !!credentials.spaceId; console.log(`Sync using: ${usesSpaceId ? 'Space ID' : 'List IDs'}`); // Simulate API calls with timeouts await simulateSyncProcess(setSyncState, credentials); setSyncState({ status: 'success', message: 'Data successfully synchronized with ClickUp!', progress: 100 }); } catch (error) { setSyncState({ status: 'error', message: error.message || 'Failed to sync data. Please try again.', progress: 0 }); } }; return ( ); } function AppContent({ showSettings, setShowSettings, syncState, setSyncState, handleSync }) { const { colors } = useTheme(); return (

{showSettings && (

)}

{['Kỷ Luật Tích Lũy', 'Tuân Thủ Thói Quen', 'Hoàn Thành Mục Tiêu', 'Quản Lý Thời Gian', 'Quản Lý Tập Trung'].map((tab, index) => (

{tab}

))}

Kỷ Luật Tích Lũy

Nội dung về Kỷ Luật Tích Lũy sẽ được hiển thị tại đây. Để thiết lập đồng bộ hóa dữ liệu với ClickUp, vui lòng nhấn vào biểu tượng cài đặt ở góc phải màn hình.

); } // Simulate the sync process for demo purposes async function simulateSyncProcess(setSyncState, credentials) { // Step 1: Authenticate await new Promise(resolve => setTimeout(resolve, 1000)); setSyncState(prev => ({ ...prev, message: 'Xác thực với ClickUp API...', progress: 20 })); // Step 2: Fetching data based on Space ID or List IDs await new Promise(resolve => setTimeout(resolve, 1000)); if (credentials.spaceId) { setSyncState(prev => ({ ...prev, message: `Đang lấy dữ liệu từ Space ID: ${credentials.spaceId}...`, progress: 40 })); // Mô phỏng việc lấy dữ liệu từ tất cả các list trong space await new Promise(resolve => setTimeout(resolve, 800)); setSyncState(prev => ({ ...prev, message: `Đã tìm thấy nhiều list trong Space, đang phân tích...`, progress: 45 })); await new Promise(resolve => setTimeout(resolve, 800)); setSyncState(prev => ({ ...prev, message: `Đang chuẩn bị dữ liệu từ Space ID: ${credentials.spaceId}...`, progress: 50 })); } else { const validListIds = credentials.listIds.filter(id => id.trim()); setSyncState(prev => ({ ...prev, message: `Đang lấy dữ liệu từ ${validListIds.length} List...`, progress: 40 })); // Mô phỏng việc lấy dữ liệu từ từng list một for (let i = 0; i < validListIds.length; i++) { await new Promise(resolve => setTimeout(resolve, 500)); setSyncState(prev => ({ ...prev, message: `Đang lấy dữ liệu từ List ID: ${validListIds[i]}...`, progress: 40 + (10 * (i + 1) / validListIds.length) })); } } // Step 3: Processing data await new Promise(resolve => setTimeout(resolve, 1000)); setSyncState(prev => ({ ...prev, message: 'Đang xử lý dữ liệu đồng bộ hóa...', progress: 60 })); // Thêm thông tin chi tiết hơn về quá trình xử lý await new Promise(resolve => setTimeout(resolve, 800)); setSyncState(prev => ({ ...prev, message: credentials.spaceId ? 'Đang áp dụng dữ liệu từ Space vào hệ thống...' : 'Đang áp dụng dữ liệu từ Lists vào hệ thống...', progress: 65 })); // Step 4: Uploading await new Promise(resolve => setTimeout(resolve, 1000)); setSyncState(prev => ({ ...prev, message: 'Đang tải dữ liệu lên ClickUp...', progress: 80 })); // Step 5: Finishing up await new Promise(resolve => setTimeout(resolve, 1000)); setSyncState(prev => ({ ...prev, message: 'Hoàn tất quá trình đồng bộ hóa...', progress: 95 })); // Thông báo kết quả cuối cùng await new Promise(resolve => setTimeout(resolve, 500)); }2c:T1da8,import React, { useState, useEffect } from 'react'; export const MilestoneCelebration = ({ isOpen, milestone, onClose }) => { const [animationState, setAnimationState] = useState('entering'); // Function to calculate scholarship amount based on pomodoros const calculateScholarshipAmount = (pomodoros) => { if (pomodoros >= 2400) return 6000000; if (pomodoros >= 1600) return 4000000; if (pomodoros >= 1000) return 2000000; if (pomodoros >= 500) return 1000000; if (pomodoros >= 200) return 600000; if (pomodoros >= 50) return 400000; return 200000; }; // Typography constants for consistency const typography = { heading: { fontSize: '26px', fontWeight: 'bold', color: '#FFD700', lineHeight: '1.2', textShadow: '0 2px 4px rgba(0,0,0,0.5)', marginBottom: '8px' }, subheading: { fontSize: '18px', fontWeight: 'bold', color: '#FFD700', lineHeight: '1.3', textTransform: 'uppercase', marginBottom: '8px' }, normal: { fontSize: '16px', fontWeight: 'normal', color: 'white', lineHeight: '1.5' }, emphasis: { fontSize: '20px', fontWeight: 'bold', color: '#FFD700' }, button: { fontSize: '16px', fontWeight: 'bold' } }; useEffect(() => { if (isOpen) { // Start with entering animation setAnimationState('entering'); // After entering is complete, change to active state const enterTimer = setTimeout(() => { setAnimationState('active'); }, 500); return () => { clearTimeout(enterTimer); }; } }, [isOpen]); if (!isOpen) return null; // Calculate appropriate scholarship amount based on milestone pomodoros const scholarshipAmount = calculateScholarshipAmount(milestone?.pomodoros || 0).toLocaleString(); const handleClose = () => { setAnimationState('exiting'); setTimeout(() => onClose(), 500); }; return (

{/* Close button */} {/* Trophy icon */}

🏆

{/* Combined celebration title and message */}

Chúc Mừng!

Bạn đã đạt được cột mốc {milestone?.pomodoros || ''} pomodoros!

{/* Image after the title and message */} {milestone?.imageUrl && (

)} {/* Scholarship information */}

Học Bổng Chiến Thắng

{scholarshipAmount} VND

Học bổng đã được ghi nhận vào tài khoản của bạn!

{/* Continue button */}

); };2d:T403,import React, { createContext, useContext } from 'react'; const ThemeContext = createContext(); export function useTheme() { return useContext(ThemeContext); } export function ThemeProvider({ children }) { const theme = { colors: { primary: '#F0B429', secondary: '#DE911D', gradient: 'linear-gradient(90deg, #F0B429 0%, #F6AD55 100%)', gradientHover: 'linear-gradient(90deg, #DE911D 0%, #ED8936 100%)', buttonGradient: 'linear-gradient(90deg, #F0B429 0%, #F6AD55 100%)', textPrimary: '#FFFFFF', textSecondary: '#B3B3B3', cardBg: '#222222', pageBg: '#111111', border: '#333333', inputBg: '#2A2A2A', info: '#3182CE', infoBg: '#1A365D', success: '#38A169', successBg: '#1C4532', error: '#C53030', errorBg: '#461818', progressBg: '#333333', highlight: '#F0B429', goldText: '#F0B429' } }; return ( {children} ); }2e:T6d8,import React from 'react'; import { useTheme } from 'ThemeContext'; export default function SyncStatus({ state }) { const { status, message, progress } = state; const { colors } = useTheme(); if (status === 'idle') return null; const statusColors = { syncing: { bg: colors.infoBg, border: colors.info, icon: '⏳' }, success: { bg: colors.successBg, border: colors.success, icon: '✓' }, error: { bg: colors.errorBg, border: colors.error, icon: '✗' } }; const currentColor = statusColors[status]; return (

{currentColor.icon} {message}

{status === 'syncing' && (

)}

); }2f:Tf1e,import React, { useState, useEffect } from 'react'; export const ScholarshipUpdateNotification = ({ isVisible, amount, onClose }) => { const [animation, setAnimation] = useState('slide-in'); useEffect(() => { let timer; if (isVisible) { // Bắt đầu với animation slide-in setAnimation('slide-in'); // Sau 5 giây, chuyển sang animation slide-out timer = setTimeout(() => { setAnimation('slide-out'); // Sau khi animation slide-out kết thúc, gọi onClose setTimeout(() => { onClose(); }, 500); // Đợi animation slide-out kết thúc (500ms) }, 5000); } return () => { if (timer) clearTimeout(timer); }; }, [isVisible, onClose]); if (!isVisible) return null; return (

✅

Cập nhật học bổng thành công!

Đã cập nhật số tiền học bổng {amount.toLocaleString()} VND vào ClickUp.

); };30:Tf22,import React from 'react'; /** * A custom confirmation modal component. * * @param {object} props - The component props. * @param {boolean} props.isOpen - Whether the modal is open. * @param {function} props.onConfirm - Callback function when confirm button is clicked. * @param {function} props.onCancel - Callback function when cancel button or close button is clicked. * @param {string} props.title - The title of the modal. * @param {string} props.message - The confirmation message to display. */ export const ConfirmationModal = ({ isOpen, onConfirm, onCancel, title = "Xác nhận", message }) => { if (!isOpen) return null; const modalStyle = { position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0, 0, 0, 0.75)', display: 'flex', justifyContent: 'center', alignItems: 'center', zIndex: 1050, // Ensure it's above other elements like settings modal padding: '20px', }; const contentStyle = { backgroundColor: '#2C1810', // Dark brown background borderRadius: '12px', padding: '30px', maxWidth: '450px', width: '100%', boxShadow: '0 5px 25px rgba(0, 0, 0, 0.5)', border: '1px solid #FFD700', // Gold border position: 'relative', textAlign: 'center', }; const titleStyle = { color: '#FFD700', // Gold color for title marginTop: '0', marginBottom: '15px', fontSize: '20px', fontWeight: 'bold', }; const messageStyle = { color: '#FFFFFF', // White text for message marginBottom: '30px', fontSize: '16px', lineHeight: '1.6', }; const buttonContainerStyle = { display: 'flex', justifyContent: 'center', // Center buttons gap: '15px', // Add space between buttons }; const buttonBaseStyle = { border: 'none', borderRadius: '8px', padding: '12px 25px', fontWeight: '600', cursor: 'pointer', fontSize: '14px', transition: 'all 0.2s ease', minWidth: '120px', }; const confirmButtonStyle = { ...buttonBaseStyle, background: 'linear-gradient(135deg, #B22222, #8B0000)', // Red gradient for confirm color: 'white', border: '1px solid #FF6B6B', // Light red border boxShadow: '0 2px 5px rgba(139, 0, 0, 0.4)', }; const cancelButtonStyle = { ...buttonBaseStyle, background: 'linear-gradient(135deg, #4a4a4a, #333333)', // Dark gray gradient for cancel color: 'white', border: '1px solid #666666', boxShadow: '0 2px 5px rgba(0, 0, 0, 0.3)', }; const closeButtonStyle = { position: 'absolute', top: '10px', right: '15px', background: 'none', border: 'none', fontSize: '28px', cursor: 'pointer', color: '#FFD700', // Gold color lineHeight: '1', }; return (

e.stopPropagation()}>

{title}

{message}

); };31:T812,// Centralized storage utility functions /** * Generates a unique storage key based on the current page URL * This ensures each page has its own isolated storage * * @param {string} baseKey - The base key name * @returns {string} - A unique storage key specific to the current page */ export const getPageSpecificKey = (baseKey) => { // Get only the path part of the URL for better uniqueness const path = window.location.pathname; // Add optional hash or query parameters if they're important for distinguishing pages const hash = window.location.hash ? window.location.hash : ''; // Create a unique identifier from the URL parts without exposing full URL (which might contain sensitive info) const uniqueId = `${path}${hash}`.replace(/[^a-zA-Z0-9]/g, '_'); console.log('Generated unique storage key:', `${baseKey}_${uniqueId}`); return `${baseKey}_${uniqueId}`; }; /** * Saves data to localStorage with a page-specific key * * @param {string} baseKey - The base key name * @param {any} data - The data to store (will be JSON stringified) */ export const saveToPageStorage = (baseKey, data) => { const pageKey = getPageSpecificKey(baseKey); try { localStorage.setItem(pageKey, JSON.stringify(data)); console.log(`Data saved to page-specific storage: ${pageKey}`); } catch (error) { console.error('Error saving to localStorage:', error); } }; /** * Retrieves data from localStorage with a page-specific key * * @param {string} baseKey - The base key name * @param {any} defaultValue - The default value to return if storage is empty * @returns {any} - The retrieved data (JSON parsed) or defaultValue */ export const getFromPageStorage = (baseKey, defaultValue = null) => { const pageKey = getPageSpecificKey(baseKey); try { const storedData = localStorage.getItem(pageKey); if (storedData === null) { return defaultValue; } return JSON.parse(storedData); } catch (error) { console.error('Error retrieving from localStorage:', error); return defaultValue; } };32:T4df,import React from 'react'; import { useTheme } from 'ThemeContext'; export default function Header() { const { colors } = useTheme(); return (

Đồng bộ Dữ liệu

Đồng bộ dữ liệu của bạn. Nhập thông tin xác thực API bên dưới để bắt đầu quá trình đồng bộ.

); }33:T1689,import React from 'react'; import { calculateScholarshipAmount } from 'TimelineMilestones'; export const GoalStats = ({ totalDays = 0 }) => { // Calculate total accumulated scholarship from all achieved milestones const calculateTotalScholarship = (days) => { // Define milestones and their corresponding scholarship amounts const milestones = [ { threshold: 10, amount: 400000 }, { threshold: 30, amount: 600000 }, { threshold: 60, amount: 1000000 }, { threshold: 90, amount: 2000000 }, { threshold: 120, amount: 4000000 }, { threshold: 180, amount: 6000000 }, ]; // Sort milestones by threshold in ascending order to ensure correct calculation const sortedMilestones = [...milestones].sort((a, b) => a.threshold - b.threshold); // Calculate total scholarship by adding up all achieved milestone amounts let totalScholarship = 0; for (const milestone of sortedMilestones) { if (days >= milestone.threshold) { totalScholarship += milestone.amount; } } return totalScholarship; }; const scholarshipAmount = calculateTotalScholarship(totalDays); // Format the scholarship amount with thousands separators const formattedScholarshipAmount = scholarshipAmount.toLocaleString(); return (

{/* Gold accent line at top */}

{/* Days Managed */}

📅

SỐ NGÀY QUẢN LÝ

{totalDays}

{/* Vertical Divider */}

{/* Success Rate section removed */} {/* Total Points */}

Học Bổng Chiến Thắng

{formattedScholarshipAmount} VNĐ

{/* Gold accent line at bottom */}

); };1c:["$","div",null,{"className":"h_[100dvh] d_flex","children":[["$","$L24",null,{"projectId":"b7f2a42e-128e-4449-950c-7b9a035e36ac"}],["$","$L25",null,{"mode":"Multifile","files":[{"id":"aa09a388-fa91-4e2e-a37e-c9c594702d46","name":"styles.js","path":"/","permissions":"rw","content":"$26","metadata":{},"revision":"65f8095b-8f2d-4e72-855e-7504d54868df","created":"2025-05-13T19:47:31.024204Z","modified":"2025-05-13T19:47:31.024221Z","in_llm_context":false},{"id":"1542de62-df58-4915-9f03-b44efd6ab239","name":"RewardLadder.js","path":"/","permissions":"rw","content":"$27","metadata":{},"revision":"65f8095b-8f2d-4e72-855e-7504d54868df","created":"2025-05-13T19:47:31.024261Z","modified":"2025-05-13T19:47:31.024268Z","in_llm_context":true},{"id":"abcda48e-2335-43ea-a86e-6393966cfb1c","name":"clickupService.js","path":"/","permissions":"rw","content":"$28","metadata":{},"revision":"65f8095b-8f2d-4e72-855e-7504d54868df","created":"2025-05-13T19:47:31.024289Z","modified":"2025-05-13T19:47:31.024294Z","in_llm_context":true},{"id":"f3350576-3a58-499a-920d-afaad1e7f0c7","name":"SyncForm.jsx","path":"/","permissions":"rw","content":"$29","metadata":{},"revision":"65f8095b-8f2d-4e72-855e-7504d54868df","created":"2025-05-13T19:47:31.024313Z","modified":"2025-05-13T19:47:31.024318Z","in_llm_context":true},{"id":"eb72a238-50b7-437f-bafa-8764463cc843","name":"TimelineMilestones.js","path":"/","permissions":"rw","content":"$2a","metadata":{},"revision":"65f8095b-8f2d-4e72-855e-7504d54868df","created":"2025-05-13T19:47:31.024337Z","modified":"2025-05-13T19:47:31.024342Z","in_llm_context":true},{"id":"dd63a1fa-453e-40ad-b466-bbbc6732f13f","name":"App.jsx","path":"/","permissions":"rw","content":"$2b","metadata":{},"revision":"65f8095b-8f2d-4e72-855e-7504d54868df","created":"2025-05-13T19:47:31.024362Z","modified":"2025-05-13T19:47:31.024367Z","in_llm_context":false},{"id":"0b157852-3017-467d-9014-afb1d6d14e9f","name":"MilestoneCelebration.js","path":"/","permissions":"rw","content":"$2c","metadata":{},"revision":"65f8095b-8f2d-4e72-855e-7504d54868df","created":"2025-05-13T19:47:31.024395Z","modified":"2025-05-13T19:47:31.024400Z","in_llm_context":false},{"id":"1d1ad6c4-2f73-4a8e-b4c4-4aeda6d5758e","name":"ThemeContext.jsx","path":"/","permissions":"rw","content":"$2d","metadata":{},"revision":"65f8095b-8f2d-4e72-855e-7504d54868df","created":"2025-05-13T19:47:31.024540Z","modified":"2025-05-13T19:47:31.024545Z","in_llm_context":true},{"id":"621d4a37-a86b-48dc-9767-1bc1ff659fa3","name":"SyncStatus.jsx","path":"/","permissions":"rw","content":"$2e","metadata":{},"revision":"65f8095b-8f2d-4e72-855e-7504d54868df","created":"2025-05-13T19:47:31.024419Z","modified":"2025-05-13T19:47:31.024424Z","in_llm_context":true},{"id":"3ac13355-61aa-46b4-8739-358de6267d24","name":"ScholarshipUpdateNotification.jsx","path":"/","permissions":"rw","content":"$2f","metadata":{},"revision":"65f8095b-8f2d-4e72-855e-7504d54868df","created":"2025-05-13T19:47:31.024444Z","modified":"2025-05-13T19:47:31.024449Z","in_llm_context":false},{"id":"0f16f2e2-3327-4443-ba07-4ae78b8f0069","name":"ConfirmationModal.js","path":"/","permissions":"rw","content":"$30","metadata":{},"revision":"65f8095b-8f2d-4e72-855e-7504d54868df","created":"2025-05-13T19:47:31.024468Z","modified":"2025-05-13T19:47:31.024473Z","in_llm_context":false},{"id":"33d72b09-0da1-43c7-a36c-1ad19f386d6b","name":"main.js","path":"/","permissions":"rw","content":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { RewardLadder } from 'RewardLadder';\nimport { applyGlobalStyles } from 'styles';\n// Add custom font styles\nconst fontStyles = document.createElement('style');\nfontStyles.textContent = `\n @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Open+Sans:wght@400;600&display=swap');\n`;\ndocument.head.appendChild(fontStyles);\n// Apply global styles\napplyGlobalStyles();\n// Get the container\nconst container = document.getElementById('renderDiv');\n// Render the application\nconst root = ReactDOM.createRoot(container);\nroot.render();","metadata":{},"revision":"65f8095b-8f2d-4e72-855e-7504d54868df","created":"2025-05-13T19:47:31.024492Z","modified":"2025-05-13T19:47:31.024497Z","in_llm_context":false},{"id":"6b313e35-f67b-4582-baa2-bfe5a8f92edc","name":"storageUtils.js","path":"/","permissions":"rw","content":"$31","metadata":{},"revision":"65f8095b-8f2d-4e72-855e-7504d54868df","created":"2025-05-13T19:47:31.024516Z","modified":"2025-05-13T19:47:31.024521Z","in_llm_context":false},{"id":"930362d9-5d05-4ba0-96d7-8f870bf7e689","name":"Header.jsx","path":"/","permissions":"rw","content":"$32","metadata":{},"revision":"65f8095b-8f2d-4e72-855e-7504d54868df","created":"2025-05-13T19:47:31.024564Z","modified":"2025-05-13T19:47:31.024569Z","in_llm_context":false},{"id":"ad50010b-b7f2-48c4-b04a-b8e706a70601","name":"GoalStats.js","path":"/","permissions":"rw","content":"$33","metadata":{},"revision":"65f8095b-8f2d-4e72-855e-7504d54868df","created":"2025-05-13T19:47:31.024588Z","modified":"2025-05-13T19:47:31.024593Z","in_llm_context":false}],"projectId":"b7f2a42e-128e-4449-950c-7b9a035e36ac"}]]}]