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: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 */}

); };27:T1ad7,// Theme and style constants for the application export function applyGlobalStyles() { // Define color constants for consistency const colors = { darkBrown: '#2C1810', darkerBrown: '#1a1108', goldPrimary: '#FFD700', goldSecondary: '#FFA500', white: '#FFFFFF', darkOverlay: 'rgba(0,0,0,0.7)', lightOverlay: 'rgba(0,0,0,0.2)', goldOverlay: 'rgba(255, 215, 0, 0.3)', errorRed: '#FF6B6B' }; // Create a single stylesheet for all global styles const styleSheet = document.createElement('style'); styleSheet.type = 'text/css'; styleSheet.innerHTML = ` /* Base styles */ body { font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif; margin: 0; padding: 0; background: linear-gradient(135deg, ${colors.darkBrown}, ${colors.darkerBrown}); color: ${colors.white}; overflow-x: hidden; } /* Main container styles */ .reward-container { height: 100vh; overflow: auto; scroll-behavior: smooth; position: relative; scrollbar-width: thin; scrollbar-color: ${colors.goldPrimary} ${colors.darkBrown}; padding-top: 20px; } /* Settings controls */ .settings-button { background: linear-gradient(135deg, ${colors.goldPrimary}, ${colors.goldSecondary}); color: ${colors.white}; border: 1px solid ${colors.goldPrimary}; 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; transition: all 0.3s ease; } .settings-button.active { background: ${colors.white}; color: ${colors.darkBrown}; } .settings-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: ${colors.darkOverlay}; display: flex; justify-content: center; align-items: center; z-index: 1000; padding: 20px; } .settings-content { background-color: ${colors.darkBrown}; border-radius: 12px; max-width: 600px; width: 100%; max-height: 90vh; overflow: auto; position: relative; padding: 25px; border: 1px solid ${colors.goldPrimary}; box-shadow: 0 0 30px ${colors.goldOverlay}; } .close-button { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 24px; cursor: pointer; color: ${colors.goldPrimary}; transition: transform 0.2s ease; } .close-button:hover { transform: scale(1.1); } .settings-title { color: ${colors.goldPrimary}; margin-top: 0; margin-bottom: 20px; text-align: center; font-size: 24px; background: linear-gradient(135deg, ${colors.goldPrimary}, ${colors.goldSecondary}); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } /* Form styles */ .clickup-form-container { padding: 16px; background-color: rgba(61, 35, 18, 0.7); border-radius: 8px; margin-bottom: 20px; border: 1px solid ${colors.goldOverlay}; } .clickup-form-grid { /* Added styles for 2-column grid */ display: grid; grid-template-columns: repeat(2, 1fr); /* Two equal columns */ gap: 16px; /* Spacing between grid items */ } .clickup-form-group { margin-bottom: 10px; /* Reduced margin */ } .clickup-form-label { display: block; margin-bottom: 4px; /* Reduced margin */ font-weight: 500; color: ${colors.goldPrimary}; font-size: 13px; /* Reduced font size */ } .clickup-form-input { width: 100%; padding: 12px 16px; border-radius: 6px; border: 1px solid ${colors.goldOverlay}; background-color: ${colors.lightOverlay}; box-sizing: border-box; font-size: 14px; color: ${colors.white}; transition: border 0.3s ease; } .clickup-form-input:focus { border-color: ${colors.goldSecondary}; outline: none; } .clickup-help-text { font-size: 12px; color: ${colors.goldOverlay}; margin-top: 6px; } .clickup-sync-button { background: linear-gradient(135deg, ${colors.goldPrimary}, ${colors.goldSecondary}); color: ${colors.darkBrown}; 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; } .clickup-sync-button:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.4); } .clickup-sync-button:disabled { opacity: 0.7; cursor: not-allowed; } /* Sync status styles */ .sync-status-message { padding: 12px; border-radius: 8px; margin-top: 16px; display: flex; align-items: center; flex-direction: column; } .sync-status-icon { font-size: 18px; margin-bottom: 8px; } .sync-status-text { font-size: 14px; text-align: center; margin-bottom: 8px; } .sync-progress-bar { width: 100%; height: 6px; background-color: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; } .sync-progress-fill { height: 100%; background: linear-gradient(90deg, ${colors.goldPrimary}, ${colors.goldSecondary}); border-radius: 3px; transition: width 0.5s ease; } /* 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; } .settings-content { max-width: 90%; padding: 15px; } .settings-title { font-size: 20px; } .clickup-form-grid { /* Adjust grid to single column on smaller screens */ grid-template-columns: 1fr; } } /* Animation keyframes */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } `; document.head.appendChild(styleSheet); }28: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)); }29:T2bdc,import React, { useState } from 'react'; import { clickupService } from 'clickupService'; 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 }); // Helper to get truly unique page-specific storage key const getPageSpecificKey = (baseKey) => { // Get the full URL including search parameters for complete uniqueness const fullUrl = window.location.href; const uniqueId = fullUrl.replace(/[^a-zA-Z0-9]/g, '_'); 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: '', // Removed as per new logic pomoTaskId: '', // New: Task ID for Pomodoro count pomoCustomFieldId: '', // New: Custom Field ID for Pomodoro count milestoneTaskId: '', scholarshipFieldId: '', taskListId: '', // New: List ID for milestone tasks taskTagName: '', // New: Tag name for milestone tasks taskImageFieldId: '' // New: Custom Field ID for image URL }; } } // Return default credentials if nothing saved return { apiKey: '', workspace: '', // spaceId: '', // Removed as per new logic pomoTaskId: '', // New: Task ID for Pomodoro count pomoCustomFieldId: '', // New: Custom Field ID for Pomodoro count milestoneTaskId: '', scholarshipFieldId: '', // Thêm trường mới để lưu Custom Field ID của học bổng taskListId: '', // New: List ID for milestone tasks taskTagName: '', // New: Tag name for milestone tasks taskImageFieldId: '' // New: Custom Field ID for image URL }; }); // Handle form field changes const handleChange = (e) => { const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }; // Handle form submission and sync process const handleSync = async () => { // Check required fields for the new logic if (!formData.apiKey || !formData.workspace || !formData.pomoTaskId || !formData.pomoCustomFieldId) { setSyncState({ status: 'error', message: 'Vui lòng điền đầy đủ API Key, Workspace ID, Pomo Task ID và Pomo Custom Field ID', progress: 0 }); return; } // Save credentials to localStorage with page-specific key localStorage.setItem(storageKey, JSON.stringify(formData)); // 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 })); const data = await clickupService.fetchData(formData); setSyncState(prev => ({ ...prev, message: 'Đang xử lý dữ liệu...', progress: 70 })); // Cập nhật logs console.log('Received data from ClickUp:', data); 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 }); // 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 }); // Remove reference to setShowSettings since it's not defined in this component }, 5000); } 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 */}

{/* Row 1: API Key & Workspace ID */}

API Key *

Workspace ID *

{/* Row 2: Task ID (Lưu & Nhận Thông Báo) & Custom Field ID (Lưu Học Bổng) */}

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

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

{/* Row 3: Task ID (Tổng Số Pomo) & Custom Field ID (Tổng Số Pomo) */}

Task ID (Tổng Số Pomo) *

Custom Field ID (Tổng Số Pomo) *

{/* Row 4: List ID (Nơi Lưu Task Mới Được Tạo) */}

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

{/* Row 5: Tag Name (Tên Người Chơi) & Custom Field ID (Lưu URL Huy Hiệu) */}

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' && (

)}

); }; export default SyncForm;2a:T3f6d,// Service for handling ClickUp API calls // Helper to generate truly unique page-specific storage keys const getPageSpecificKey = (baseKey) => { // Get the full URL including search parameters for complete uniqueness const fullUrl = window.location.href; const uniqueId = fullUrl.replace(/[^a-zA-Z0-9]/g, '_'); return `${baseKey}_${uniqueId}`; }; export const clickupService = { // Get data from ClickUp API async fetchData(credentials) { // Validate required credentials for the new logic if (!credentials.apiKey || !credentials.workspace || !credentials.pomoTaskId || !credentials.pomoCustomFieldId) { throw new Error('API Key, Workspace ID, Pomo Task ID, and Pomo Custom Field ID are required'); } const headers = { 'Authorization': credentials.apiKey, 'Content-Type': 'application/json' }; try { // Fetch the specific task containing the Pomodoro count const taskUrl = `https://api.clickup.com/api/v2/task/${credentials.pomoTaskId}?custom_task_ids=true&team_id=${credentials.workspace}`; const taskResponse = await fetch(taskUrl, { method: 'GET', headers }); if (!taskResponse.ok) { const errorData = await taskResponse.json().catch(() => ({})); // Attempt to parse error, fallback if no body console.error('ClickUp API Error Response:', errorData); throw new Error(`Failed to fetch task ${credentials.pomoTaskId}: ${taskResponse.status} ${taskResponse.statusText}`); } const taskData = await taskResponse.json(); // Find the custom field value let totalPomodoros = 0; const customField = taskData.custom_fields?.find(field => field.id === credentials.pomoCustomFieldId); if (customField && customField.value !== undefined) { // Assuming the value is numeric or a string representation of a number const parsedValue = parseFloat(customField.value); if (!isNaN(parsedValue)) { totalPomodoros = parsedValue; } else { console.warn(`Custom field ${credentials.pomoCustomFieldId} value (${customField.value}) is not a valid number.`); } } else { console.warn(`Custom field ${credentials.pomoCustomFieldId} not found or has no value on task ${credentials.pomoTaskId}.`); // Optionally throw an error or keep totalPomodoros as 0 // throw new Error(`Custom field ${credentials.pomoCustomFieldId} not found on task ${credentials.pomoTaskId}`); } return { habitStats: { totalPomodoros: totalPomodoros } }; } catch (error) { console.error('Error fetching ClickUp Pomodoro data:', error); throw new Error(`Failed to fetch Pomodoro 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) { // Remove debug log let allTasks = []; try { // Step 1: First get all folders in the space // Remove debug log 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 || []; // Remove debug log // Step 2: Get lists from each folder for (const folder of folders) { // Remove debug log try { const folderListsResponse = await fetch(`https://api.clickup.com/api/v2/folder/${folder.id}/list?archived=false`, { method: 'GET', headers }); if (!folderListsResponse.ok) { // Log error silently continue; } const folderListsData = await folderListsResponse.json(); const folderLists = folderListsData.lists || []; // Remove debug log // 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) { // Log error silently // Continue with other lists even if one fails } } } catch (error) { // Log error silently // Continue with other folders even if one fails } } // Step 3: Get lists that are directly in the space (not in any folder) // Remove debug log 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 || []; // Remove debug log // 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) { // Log error silently // Continue with other lists even if one fails } } // Remove debug log return allTasks; } catch (error) { // Log error silently throw error; } }, // Get tasks from specific lists async getTasksFromLists(headers, listIds) { // Remove debug log let allTasks = []; let successCount = 0; for (const listId of listIds) { try { const tasks = await this.getTasksFromList(headers, listId); allTasks = [...allTasks, ...tasks]; successCount++; } catch (error) { // Log error silently // Continue with other lists even if one fails } } // Remove debug log 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; }, // NOTE: The functions getTasksFromSpace, getTasksFromLists, getTasksFromList, // and processTasksForStats are no longer used for fetching the main Pomodoro count. // They are kept in case they are needed for other features in the future. // If they are definitely not needed, they could be removed. // Process tasks to extract statistics (Kept for potential future use, not used for main Pomo count now) processTasksForStats(tasks) { // ... existing implementation ... // Count tasks with status "WIN" or "DONE" for total pomodoros const tasksWithStatus = tasks.filter(task => task.status); const uniqueStatuses = new Set(); tasksWithStatus.forEach(task => { const statusName = task.status.status || task.status || ''; uniqueStatuses.add(statusName); }); // Filter main tasks with WIN or DONE status (excluding subtasks) const winAndDoneTasks = 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 contains "WIN" or "DONE" const isWinOrDone = statusName.includes('win') || statusName.includes('done'); return isWinOrDone; }); // Each WIN or DONE task is counted as a completed pomodoro return { totalPomodoros: winAndDoneTasks.length }; }, // 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 { // Remove debug log // Format milestone data for the comment const calculateScholarshipAmount = (pomodoros) => { // Calculate total accumulated scholarship from all achieved milestones const milestones = [ { threshold: 50, amount: 400000 }, { threshold: 200, amount: 600000 }, { threshold: 500, amount: 1000000 }, { threshold: 1000, amount: 2000000 }, { threshold: 1600, amount: 4000000 }, { threshold: 2400, 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 (pomodoros >= milestone.threshold) { totalScholarship += milestone.amount; } } // Format with thousands separators for Vietnamese currency return totalScholarship.toLocaleString('vi-VN'); }; const scholarshipAmount = calculateScholarshipAmount(milestone.pomodoros); // Create a nicely formatted comment const commentText = `🎉 **MILESTONE ACHIEVED!** 🎉\n\n` + `👉 **${milestone.pomodoros} pomodoros** 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(); // Remove debug log return data; } catch (error) { // Log error silently throw new Error(`Failed to add milestone comment: ${error.message}`); } }, // Cập nhật giá trị của custom field cho điểm học bổng async updateScholarshipField(credentials, taskId, scholarshipFieldId, scholarshipAmount) { if (!credentials.apiKey || !taskId || !scholarshipFieldId) { throw new Error('API Key, Task ID, và Custom Field ID là bắt buộc để cập nhật điểm học bổng'); } const headers = { 'Authorization': credentials.apiKey, 'Content-Type': 'application/json' }; // Remove debug logs try { // Remove debug log // Chuẩn bị dữ liệu gửi đi - Đảm bảo nghiêm ngặt theo định dạng của ClickUp API task/field endpoint const requestBody = { value: scholarshipAmount.toString() }; // Thực hiện cuộc gọi API với xử lý lỗi chi tiết hơn - sử dụng endpoint và phương thức đúng try { const response = await fetch(`https://api.clickup.com/api/v2/task/${taskId}/field/${scholarshipFieldId}`, { method: 'POST', headers, body: JSON.stringify(requestBody) }); // Xử lý phản hồi kỹ lưỡng hơn const responseText = await response.text(); let data; try { // Chỉ parse JSON nếu response có nội dung if (responseText) { data = JSON.parse(responseText); } } catch (jsonError) { // Log error silently data = { rawText: responseText }; } if (!response.ok) { throw new Error(`Không thể cập nhật custom field: ${response.status} ${response.statusText} - ${JSON.stringify(data)}`); } // Remove success log return data; } catch (fetchError) { // Log error silently throw fetchError; } } catch (error) { // Log error silently throw new Error(`Không thể cập nhật điểm học bổng: ${error.message}`); } }, // Create a new task when a milestone is achieved async createMilestoneTask(credentials, listId, taskName, tagName, imageFieldId, imageUrl) { if (!credentials.apiKey || !listId || !taskName || !tagName || !imageFieldId || !imageUrl) { throw new Error('API Key, List ID, Task Name, Tag Name, Image Field ID, and Image URL are required to create a milestone task'); } const headers = { 'Authorization': credentials.apiKey, 'Content-Type': 'application/json' }; const body = { name: taskName, tags: [tagName], // ClickUp expects an array of tag names custom_fields: [ { id: imageFieldId, value: imageUrl } ] // Add other fields like description, assignees, priority if needed later }; try { const response = await fetch(`https://api.clickup.com/api/v2/list/${listId}/task`, { method: 'POST', headers, body: JSON.stringify(body) }); const responseText = await response.text(); let data; try { if (responseText) { data = JSON.parse(responseText); } } catch (jsonError) { data = { rawText: responseText }; } if (!response.ok) { throw new Error(`Failed to create milestone task: ${response.status} ${response.statusText} - ${JSON.stringify(data)}`); } console.log(`Successfully created milestone task: ${taskName}`, data); return data; // Return the created task data } catch (error) { console.error('Error creating milestone task:', error); throw new Error(`Failed to create milestone task: ${error.message}`); } } };2b:T4310,import React, { useState, useEffect } from 'react'; import { GoalStats } from 'GoalStats'; import { TimelineMilestones } from 'TimelineMilestones'; import SyncForm from 'SyncForm'; import { clickupService } from 'clickupService'; export const RewardLadder = () => { // Removed activeTab state since we no longer have tabs const [activeGoalTab, setActiveGoalTab] = useState('Pomodoro'); const [showSettings, setShowSettings] = useState(false); const [passwordInput, setPasswordInput] = useState(''); const [isPasswordVerified, setIsPasswordVerified] = useState(false); const [passwordError, setPasswordError] = useState(''); const [isLoading, setIsLoading] = useState(false); const [syncMessage, setSyncMessage] = useState(''); const [lastUpdateTime, setLastUpdateTime] = useState(null); const AUTO_REFRESH_INTERVAL = 10 * 60 * 1000; // 10 phút tính bằng mili giây // Function to handle manual data update const handleManualUpdate = async () => { try { const credentials = JSON.parse(localStorage.getItem(getPageSpecificKey('clickupCredentials'))); if (credentials && credentials.apiKey && credentials.workspace) { // Adjusted condition to check for workspace instead of spaceId setIsLoading(true); setSyncMessage('Đang cập nhật dữ liệu từ ClickUp...'); const data = await clickupService.fetchData(credentials); handleSyncComplete(data); setLastUpdateTime(new Date()); } else { setSyncMessage('Vui lòng cấu hình API Key và Workspace ID trong cài đặt.'); // Optionally, open settings if not configured // setShowSettings(true); } } catch (error) { setSyncMessage(`Lỗi cập nhật: ${error.message}`); } finally { setIsLoading(false); // Clear message after a few seconds setTimeout(() => setSyncMessage(''), 3000); } }; // Hook để cập nhật dữ liệu tự động mỗi 10 phút useEffect(() => { // Khởi tạo hàm cập nhật dữ liệu const refreshData = async () => { try { const credentials = JSON.parse(localStorage.getItem(getPageSpecificKey('clickupCredentials'))); if (credentials && credentials.apiKey && credentials.workspace) { // Adjusted condition // Silent update setIsLoading(true); setSyncMessage('Đang tự động cập nhật dữ liệu từ ClickUp...'); const data = await clickupService.fetchData(credentials); handleSyncComplete(data); setLastUpdateTime(new Date()); } } catch (error) { // Error silently } finally { setIsLoading(false); setSyncMessage(''); } }; // Thiết lập interval để cập nhật dữ liệu const intervalId = setInterval(refreshData, AUTO_REFRESH_INTERVAL); // Dọn dẹp interval khi component unmount return () => clearInterval(intervalId); }, []); // Chỉ chạy một lần khi component mount // Hook to reset password verification when settings modal is closed useEffect(() => { if (!showSettings) { setIsPasswordVerified(false); setPasswordInput(''); setPasswordError(''); } }, [showSettings]); // Hook cho việc đồng bộ dữ liệu ban đầu useEffect(() => { const performInitialSync = async () => { try { setIsLoading(true); setSyncMessage('Đang tải dữ liệu ban đầu từ ClickUp...'); const credentials = JSON.parse(localStorage.getItem(getPageSpecificKey('clickupCredentials'))); if (credentials && credentials.apiKey && credentials.workspace) { // Adjusted condition const data = await clickupService.fetchData(credentials); handleSyncComplete(data); } } catch (error) { // Error silently } finally { setIsLoading(false); setSyncMessage(''); } }; performInitialSync(); }, []); // Helper to get page-specific storage key const getPageSpecificKey = (baseKey) => { const fullUrl = window.location.href; const uniqueId = fullUrl.replace(/[^a-zA-Z0-9]/g, '_'); return `${baseKey}_${uniqueId}`; }; // Handle tab switching // No longer need the tab switching function since we removed tabs // State for tracking user progress const [userProgress, setUserProgress] = useState({ totalPomodoros: 0 }); // Tải dữ liệu đã lưu từ localStorage khi component mount useEffect(() => { const savedProgressKey = getPageSpecificKey('userProgress'); const savedProgress = localStorage.getItem(savedProgressKey); if (savedProgress) { try { const parsedProgress = JSON.parse(savedProgress); setUserProgress(parsedProgress); } catch (error) { console.error('Lỗi khi đọc dữ liệu đã lưu:', error); } } }, []); // Dữ liệu cơ bản cho tabs - empty since we're removing tabs const tabsData = {}; // Handle password input change const handlePasswordChange = (e) => { setPasswordInput(e.target.value); if (passwordError) { setPasswordError(''); // Clear error when user starts typing } }; // Handle password submission const handlePasswordSubmit = () => { if (passwordInput === '1') { // Default password is "1" setIsPasswordVerified(true); setPasswordError(''); } else { setPasswordError('Mật khẩu không đúng. Vui lòng thử lại.'); setPasswordInput(''); // Clear incorrect password } }; return (

{lastUpdateTime && (

Cập nhật lần cuối:
{lastUpdateTime.toLocaleTimeString()}

)}

{showSettings && (

{isPasswordVerified ? 'Cài đặt Đồng bộ' : 'Xác thực Quyền Truy Cập'}

{!isPasswordVerified ? (

Vui lòng nhập mật khẩu để truy cập cài đặt:

{passwordError && (

{passwordError}

)}

) : (

)}

{/* Banner removed */}

{/* Display content directly without tab conditions */} <>

{/* Include the GoalStats component with totalPomodoros prop */}

{/* Hiển thị thông báo loading ở dưới cùng */} {isLoading && (

{syncMessage || 'Đang cập nhật dữ liệu...'}

)} {/* Pomodoro tab */}

{['Pomodoro'].map((tabName, index) => (

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

))}

{/* Content for the selected goal tab */} {activeGoalTab === 'Pomodoro' ? ( ) : activeGoalTab === 'Huy Hiệu Đặc Biệt' ? (

Huy Hiệu Đặc Biệt

Nội dung về Huy Hiệu Đặc Biệt sẽ được hiển thị tại đây.

) : (

{activeGoalTab}

Nội dung cho {activeGoalTab} sẽ được hiển thị tại đây.

)}

); // Hàm xử lý khi quá trình đồng bộ hoàn tất function handleSyncComplete(data) { // Xử lý dữ liệu khi nhận được từ SyncForm // Cập nhật dữ liệu habit statistics từ dữ liệu thực if (data && data.habitStats) { // Đảm bảo cập nhật đúng dữ liệu if (Object.keys(data.habitStats).length > 0) { // Lấy tổng số pomodoros const totalPomodoros = data.habitStats.totalPomodoros || 0; // Cập nhật state với dữ liệu mới const newUserProgress = { totalPomodoros: totalPomodoros }; setUserProgress(newUserProgress); // Lưu dữ liệu mới vào localStorage để sử dụng cho lần sau const savedProgressKey = getPageSpecificKey('userProgress'); localStorage.setItem(savedProgressKey, JSON.stringify(newUserProgress)); // Đóng modal settings setTimeout(() => { setShowSettings(false); }, 2000); } else { // Error silently } } else { // Error silently } } };2c:T8bf5,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 ToastNotification from 'ToastNotification'; // 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 = ({ totalPomodoros = 0 }) => { // Helper to get truly unique page-specific storage key const getPageSpecificKey = (baseKey) => { const fullUrl = window.location.href; const uniqueId = fullUrl.replace(/[^a-zA-Z0-9]/g, '_'); return `${baseKey}_${uniqueId}`; }; // Refs để truy cập đến các phần tử DOM cột mốc const milestoneRefs = useRef([]); // Function to get the appropriate image for each milestone const getMilestoneImage = (index) => { const imageMap = { 0: "https://play.rosebud.ai/assets/1.gif?ooEU", 1: "https://play.rosebud.ai/assets/2.gif?RXjL", 2: "https://play.rosebud.ai/assets/3.gif?jI0Q", 3: "https://play.rosebud.ai/assets/4.gif?50EN", 4: "https://play.rosebud.ai/assets/5.gif?vIYK", 5: "https://play.rosebud.ai/assets/6.gif?4l5x" }; return imageMap[index] || "https://play.rosebud.ai/assets/1.gif?ooEU"; }; // State for celebration popup and toast notifications const [celebrationOpen, setCelebrationOpen] = useState(false); const [celebratedMilestone, setCelebratedMilestone] = useState(null); const [lastCelebratedDay, setLastCelebratedDay] = useState(() => { // Load last celebrated day from localStorage on initial render const savedLastDayKey = getPageSpecificKey('lastCelebratedMilestoneDay'); const savedDay = localStorage.getItem(savedLastDayKey); return savedDay ? parseInt(savedDay, 10) : 0; }); const [toast, setToast] = useState(null); // Define milestones with useMemo to prevent recreating on each render const milestones = useMemo(() => [ { days: 50, position: 0, scholarship: 400000 }, // First milestone at position 0 { days: 200, position: 30, scholarship: 600000 }, // Second milestone { days: 500, position: 60, scholarship: 1000000 }, // Third milestone { days: 1000, position: 90, scholarship: 2000000 }, // Fourth milestone { days: 1600, position: 120, scholarship: 4000000 },// Fifth milestone { days: 2400, position: 180, scholarship: 6000000 } // Sixth milestone ], []); // Hàm xác định cột mốc hiện tại đang chinh phục const getCurrentMilestoneIndex = useCallback(() => { if (totalPomodoros <= 0) return -1; // Tìm cột mốc cuối cùng đã hoàn thành const completedIndex = milestones.findIndex( (m, index, array) => totalPomodoros >= m.days && (index === array.length - 1 || totalPomodoros < array[index + 1].days) ); // Nếu chưa hoàn thành cột mốc nào, trả về cột mốc đầu tiên if (completedIndex === -1) { return 0; // Cột mốc đầu tiên } // Nếu đã hoàn thành cột mốc cuối cùng, trả về cột mốc đó if (completedIndex === milestones.length - 1) { return completedIndex; } // Nếu đang tiến tới cột mốc tiếp theo, trả về cột mốc tiếp theo return completedIndex + 1; }, [totalPomodoros, milestones]); // Effect để cuộn đến cột mốc hiện tại khi component mount hoặc totalPomodoros thay đổi useEffect(() => { const currentIndex = getCurrentMilestoneIndex(); if (currentIndex >= 0 && milestoneRefs.current[currentIndex]) { // Timeout nhỏ để đảm bảo DOM đã render xong setTimeout(() => { milestoneRefs.current[currentIndex].scrollIntoView({ behavior: 'smooth', block: 'center' }); }, 500); } }, [totalPomodoros, getCurrentMilestoneIndex]); // Check if we need to show celebration when totalPomodoros changes useEffect(() => { // Only check if we should show celebration when totalPomodoros changes and is greater than zero if (totalPomodoros <= 0 || totalPomodoros <= lastCelebratedDay) return; // Find the highest completed milestone const highestCompletedMilestone = [...milestones] .filter(m => totalPomodoros >= m.days) .sort((a, b) => b.days - a.days)[0]; // Only show celebration if we've reached a new milestone higher than previously celebrated if (highestCompletedMilestone && highestCompletedMilestone.days > lastCelebratedDay) { setCelebratedMilestone(highestCompletedMilestone); setCelebrationOpen(true); // Update state and save to localStorage setLastCelebratedDay(highestCompletedMilestone.days); const savedLastDayKey = getPageSpecificKey('lastCelebratedMilestoneDay'); localStorage.setItem(savedLastDayKey, highestCompletedMilestone.days.toString()); // Trigger confetti explosion confetti({ particleCount: 200, // More particles for a bigger celebration spread: 160, // Wider spread origin: { y: 0.5 }, // Start slightly lower for a fountain effect angle: 90, startVelocity: 45, gravity: 0.8, drift: 0, // No sideways drift initially ticks: 300, // Longer duration colors: ['#FFD700', '#FFA500', '#FF6347', '#FF4500', '#FFFFFF'] // Gold, orange, and white theme }); // A second burst for more impact setTimeout(() => { confetti({ particleCount: 100, spread: 120, origin: { y: 0.6 }, angle: 90, startVelocity: 30, gravity: 0.7, ticks: 250, colors: ['#FFD700', '#FFA500', '#FFFFFF'] }); }, 200); // Send a comment to ClickUp when milestone is reached try { // getPageSpecificKey is now defined at the component level // Get ClickUp credentials from localStorage with page-specific key const savedCredentials = localStorage.getItem(getPageSpecificKey('clickupCredentials')); if (savedCredentials) { const credentials = JSON.parse(savedCredentials); if (credentials.apiKey && credentials.milestoneTaskId) { // Create the milestone data object const milestoneData = { days: highestCompletedMilestone.days, imageUrl: getMilestoneImage(milestones.findIndex(m => m.days === highestCompletedMilestone.days)) }; // Get milestone comment status storage key const milestoneCommentKey = getPageSpecificKey('milestoneComments'); // Check if we've already sent a notification for this milestone // We use a separate storage key specifically for tracking comments const commentedMilestones = JSON.parse(localStorage.getItem(milestoneCommentKey) || '[]'); if (!commentedMilestones.includes(highestCompletedMilestone.days)) { // Immediately add to the commented list to prevent double comments // This flag prevents duplicate comments even if the API call is still processing commentedMilestones.push(highestCompletedMilestone.days); localStorage.setItem(milestoneCommentKey, JSON.stringify(commentedMilestones)); // Call the ClickUp service to add a comment import('clickupService').then(({ clickupService }) => { clickupService.addMilestoneComment(credentials, credentials.milestoneTaskId, { pomodoros: highestCompletedMilestone.days, imageUrl: getMilestoneImage(milestones.findIndex(m => m.days === highestCompletedMilestone.days)) }) .then(response => { // Remove debug log }) .catch(error => { // Error silently // If the API call fails, we could optionally remove the milestone from the tracked list // to allow retry, but we're keeping it to avoid potential duplicate comments }); }); } else { // Milestone already sent, do nothing } } else { // Credentials missing, do nothing } } else { // No credentials, do nothing } } catch (error) { // Error silently console.error("Error adding milestone comment:", error); } // --- Create Milestone Task --- try { // getPageSpecificKey is now defined at the component level // No need for getPageSpecificKeyForTask, use getPageSpecificKey directly // Get ClickUp credentials and new config from localStorage const credentialsKey = getPageSpecificKey('clickupCredentials'); const savedCredentials = localStorage.getItem(credentialsKey); if (savedCredentials) { const credentials = JSON.parse(savedCredentials); // Check if necessary config for task creation exists if (credentials.apiKey && credentials.taskListId && credentials.taskTagName && credentials.taskImageFieldId) { // Get task creation tracking status storage key const taskCreatedKey = getPageSpecificKey('milestoneTasksCreated'); // Check if we've already created a task for this milestone const createdTasks = JSON.parse(localStorage.getItem(taskCreatedKey) || '[]'); if (!createdTasks.includes(highestCompletedMilestone.days)) { // Immediately mark as created to prevent duplicates createdTasks.push(highestCompletedMilestone.days); localStorage.setItem(taskCreatedKey, JSON.stringify(createdTasks)); // Construct task details const now = new Date(); const formattedDateTime = now.toLocaleString('vi-VN', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }); const taskName = `1.SP - Cột Mốc ${highestCompletedMilestone.days} Pomododo - ${formattedDateTime}`; const imageUrl = getMilestoneImage(milestones.findIndex(m => m.days === highestCompletedMilestone.days)); // Call the service function to create the task import('clickupService').then(({ clickupService }) => { clickupService.createMilestoneTask( credentials, credentials.taskListId, taskName, credentials.taskTagName, credentials.taskImageFieldId, imageUrl ) .then(response => { console.log(`Successfully created task for milestone ${highestCompletedMilestone.days}`); // Optionally show a success toast (consider if too many notifications) // setToast({ message: `Đã tạo task cho mốc ${highestCompletedMilestone.days}`, type: 'success' }); }) .catch(error => { console.error(`Error creating task for milestone ${highestCompletedMilestone.days}:`, error); // Optionally show an error toast // setToast({ message: `Lỗi tạo task mốc ${highestCompletedMilestone.days}: ${error.message}`, type: 'error' }); // Optional: If creation failed, remove from createdTasks list to allow retry later? // const updatedCreatedTasks = createdTasks.filter(day => day !== highestCompletedMilestone.days); // localStorage.setItem(taskCreatedKey, JSON.stringify(updatedCreatedTasks)); }); }); } else { console.log(`Task creation skipped for milestone ${highestCompletedMilestone.days}: Already created.`); } } else { console.log("Task creation skipped: Missing List ID, Tag Name, or Image Field ID in settings."); } } else { console.log("Task creation skipped: ClickUp credentials not found."); } } catch (error) { // Error silently console.error("Error creating milestone task:", error); } // --- End Create Milestone Task --- } }, [totalPomodoros, lastCelebratedDay, milestones, getMilestoneImage]); // Added getMilestoneImage to dependency array // Effect to update scholarship field in ClickUp when totalPomodoros changes useEffect(() => { // If there are no pomodoros yet, don't do anything if (totalPomodoros <= 0) return; // Calculate the total scholarship amount based on achieved milestones const calculateTotalScholarship = (pomodoros) => { const milestoneValues = [ { threshold: 50, amount: 400000 }, { threshold: 200, amount: 600000 }, { threshold: 500, amount: 1000000 }, { threshold: 1000, amount: 2000000 }, { threshold: 1600, amount: 4000000 }, { threshold: 2400, amount: 6000000 }, ]; let totalScholarship = 0; for (const milestone of milestoneValues) { if (pomodoros >= milestone.threshold) { totalScholarship += milestone.amount; } } return totalScholarship; }; // Get the scholarship amount based on completed pomodoros const scholarshipAmount = calculateTotalScholarship(totalPomodoros); // getPageSpecificKey is now defined at the component level const credentialsKey = getPageSpecificKey('clickupCredentials'); const savedCredentials = localStorage.getItem(credentialsKey); if (savedCredentials) { try { const credentials = JSON.parse(savedCredentials); // Check if we have the task ID and scholarship field ID if (credentials.milestoneTaskId && credentials.scholarshipFieldId) { // Remove debug logs // Fix: Don't use dynamic import to avoid potential loading issues clickupService.updateScholarshipField( credentials, credentials.milestoneTaskId, credentials.scholarshipFieldId, scholarshipAmount ) .then(response => { // Remove debug log // Add visual log to confirm update to user const updateLogKey = getPageSpecificKey('scholarshipUpdates'); const updates = JSON.parse(localStorage.getItem(updateLogKey) || '[]'); updates.push({ timestamp: new Date().toISOString(), amount: scholarshipAmount, success: true }); localStorage.setItem(updateLogKey, JSON.stringify(updates)); // Ghi log thành công vào console nhưng không hiển thị toast console.log(`Đã cập nhật điểm học bổng: ${scholarshipAmount.toLocaleString('vi-VN')} VND`); // Không hiển thị toast thông báo thành công }) .catch(error => { // Error silently // Show toast notification for error setToast({ message: `Không thể cập nhật điểm học bổng: ${error.message || 'Đã xảy ra lỗi'}`, type: 'error' }); }); } else { // Missing credentials, do nothing } } catch (error) { // Error silently } } else { // No credentials, do nothing } }, [totalPomodoros]); // Keep dependencies minimal for scholarship update // Remove component re-render logging // Close celebration popup handler with useCallback const handleCloseCelebration = useCallback(() => { setCelebrationOpen(false); }, []); return (

{/* Central Timeline */}

{/* Gold glow effect */}

{/* Milestone Items */} {milestones.map((milestone, index) => { const isLeft = index % 2 === 0; const isCompleted = totalPomodoros >= milestone.days; const isActive = totalPomodoros > 0 && totalPomodoros < milestone.days && (index === 0 || totalPomodoros >= 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 = totalPomodoros - prevMilestone; progress = (current / range) * 100; } else if (isActive && index === 0) { progress = (totalPomodoros / milestone.days) * 100; } return (

milestoneRefs.current[index] = el} > {/* 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}

POMO

{/* 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} /> {/* Toast notification */} {toast && ( setToast(null)} /> )}

); }; // 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 = [50, 200, 500, 1000, 1600, 2400]; const scholarshipAmounts = [200000, 400000, 600000, 1000000, 2000000, 3000000]; 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}

); };2d:Tbe6,import React, { useState, useEffect } from 'react'; export const ToastNotification = ({ message, type = 'success', duration = 5000, onClose }) => { const [isVisible, setIsVisible] = useState(true); useEffect(() => { const timer = setTimeout(() => { setIsVisible(false); if (onClose) onClose(); }, duration); return () => clearTimeout(timer); }, [duration, onClose]); // Định nghĩa styles dựa trên loại thông báo const getTypeStyles = () => { switch (type) { case 'success': return { background: 'linear-gradient(135deg, #38A169, #2F855A)', borderLeft: '5px solid #2F855A', icon: '✅' }; case 'error': return { background: 'linear-gradient(135deg, #E53E3E, #C53030)', borderLeft: '5px solid #C53030', icon: '❌' }; case 'warning': return { background: 'linear-gradient(135deg, #ECC94B, #D69E2E)', borderLeft: '5px solid #D69E2E', icon: '⚠️' }; case 'info': return { background: 'linear-gradient(135deg, #4299E1, #3182CE)', borderLeft: '5px solid #3182CE', icon: 'ℹ️' }; default: return { background: 'linear-gradient(135deg, #38A169, #2F855A)', borderLeft: '5px solid #2F855A', icon: '✅' }; } }; const typeStyles = getTypeStyles(); if (!isVisible) return null; return (

{typeStyles.icon}

{type === 'success' ? 'Thành công!' : type === 'error' ? 'Lỗi!' : type === 'warning' ? 'Cảnh báo!' : 'Thông báo!'}

{message}

); }; export default ToastNotification;2e: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} ); }2f: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' && (

)}

); }30: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ộ.

); }31:T16b4,import React from 'react'; import { calculateScholarshipAmount } from 'TimelineMilestones'; export const GoalStats = ({ totalPomodoros = 0 }) => { // Calculate total accumulated scholarship from all achieved milestones const calculateTotalScholarship = (pomodoros) => { // Define milestones and their corresponding scholarship amounts const milestones = [ { threshold: 50, amount: 400000 }, { threshold: 200, amount: 600000 }, { threshold: 500, amount: 1000000 }, { threshold: 1000, amount: 2000000 }, { threshold: 1600, amount: 4000000 }, { threshold: 2400, 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 (pomodoros >= milestone.threshold) { totalScholarship += milestone.amount; } } return totalScholarship; }; const scholarshipAmount = calculateTotalScholarship(totalPomodoros); // Format the scholarship amount with thousands separators const formattedScholarshipAmount = scholarshipAmount.toLocaleString(); return (

{/* Gold accent line at top */}

{/* Goals Completed */}

🍅

Tổng Số Pomodoro

{totalPomodoros}

{/* 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":"8ab5ef53-1e1d-4e5c-9dbe-768c93f447fb"}],["$","$L25",null,{"mode":"Multifile","files":[{"id":"1183b090-8db1-4286-8261-96d8fb6190a1","name":"MilestoneCelebration.js","path":"/","permissions":"rw","content":"$26","metadata":{},"revision":"0c4919de-cac8-4d20-a20d-55438ffcb652","created":"2025-05-13T19:33:28.669711Z","modified":"2025-05-13T19:33:28.669726Z","in_llm_context":false},{"id":"974b59d3-5430-4709-831e-b6afbcccff45","name":"styles.js","path":"/","permissions":"rw","content":"$27","metadata":{},"revision":"0c4919de-cac8-4d20-a20d-55438ffcb652","created":"2025-05-13T19:33:28.669759Z","modified":"2025-05-13T19:33:28.669764Z","in_llm_context":true},{"id":"276f812c-2eee-4785-bc2c-11c8c05a2d7f","name":"App.jsx","path":"/","permissions":"rw","content":"$28","metadata":{},"revision":"0c4919de-cac8-4d20-a20d-55438ffcb652","created":"2025-05-13T19:33:28.669782Z","modified":"2025-05-13T19:33:28.669786Z","in_llm_context":false},{"id":"d4c16f6d-6572-4f31-bc41-3c1c7c013d55","name":"SyncForm.jsx","path":"/","permissions":"rw","content":"$29","metadata":{},"revision":"0c4919de-cac8-4d20-a20d-55438ffcb652","created":"2025-05-13T19:33:28.669801Z","modified":"2025-05-13T19:33:28.669805Z","in_llm_context":true},{"id":"7c85c83a-6ae6-4bee-9a88-f57e8d199a58","name":"clickupService.js","path":"/","permissions":"rw","content":"$2a","metadata":{},"revision":"0c4919de-cac8-4d20-a20d-55438ffcb652","created":"2025-05-13T19:33:28.669821Z","modified":"2025-05-13T19:33:28.669825Z","in_llm_context":false},{"id":"1accf8cd-5687-4027-8d5f-b6dfca26da5f","name":"RewardLadder.js","path":"/","permissions":"rw","content":"$2b","metadata":{},"revision":"0c4919de-cac8-4d20-a20d-55438ffcb652","created":"2025-05-13T19:33:28.669841Z","modified":"2025-05-13T19:33:28.669845Z","in_llm_context":true},{"id":"0cd8908d-e2fc-4bbc-acc5-1be57a8d66a1","name":"TimelineMilestones.js","path":"/","permissions":"rw","content":"$2c","metadata":{},"revision":"0c4919de-cac8-4d20-a20d-55438ffcb652","created":"2025-05-13T19:33:28.669860Z","modified":"2025-05-13T19:33:28.669864Z","in_llm_context":true},{"id":"905303ad-3dda-4bdf-ab12-542760e82026","name":"ToastNotification.js","path":"/","permissions":"rw","content":"$2d","metadata":{},"revision":"0c4919de-cac8-4d20-a20d-55438ffcb652","created":"2025-05-13T19:33:28.669880Z","modified":"2025-05-13T19:33:28.669885Z","in_llm_context":true},{"id":"589dc890-278f-475f-bf0c-999bed1cfa97","name":"ThemeContext.jsx","path":"/","permissions":"rw","content":"$2e","metadata":{},"revision":"0c4919de-cac8-4d20-a20d-55438ffcb652","created":"2025-05-13T19:33:28.669900Z","modified":"2025-05-13T19:33:28.669905Z","in_llm_context":true},{"id":"c8f4c086-8056-4b7e-8107-dd4ab8eb1860","name":"SyncStatus.jsx","path":"/","permissions":"rw","content":"$2f","metadata":{},"revision":"0c4919de-cac8-4d20-a20d-55438ffcb652","created":"2025-05-13T19:33:28.669921Z","modified":"2025-05-13T19:33:28.669925Z","in_llm_context":true},{"id":"85be96e8-dac8-4de2-9a55-cfc6e66dc161","name":"Header.jsx","path":"/","permissions":"rw","content":"$30","metadata":{},"revision":"0c4919de-cac8-4d20-a20d-55438ffcb652","created":"2025-05-13T19:33:28.669940Z","modified":"2025-05-13T19:33:28.669944Z","in_llm_context":false},{"id":"d9f532f5-2b56-4053-a4e2-a445c25c211a","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// Tạo container nếu chưa tồn tại\nlet container = document.getElementById('renderDiv');\nif (!container) {\n container = document.createElement('div');\n container.id = 'renderDiv';\n document.body.appendChild(container);\n}\n// In ra thông báo để debug\nconsole.log('Container:', container);\nconsole.log('Rendering RewardLadder component');\n// Render ứng dụng\nconst root = ReactDOM.createRoot(container);\nroot.render();","metadata":{},"revision":"0c4919de-cac8-4d20-a20d-55438ffcb652","created":"2025-05-13T19:33:28.669959Z","modified":"2025-05-13T19:33:28.669963Z","in_llm_context":false},{"id":"3240ce84-7421-45a9-87fa-3538138e0d60","name":"GoalStats.js","path":"/","permissions":"rw","content":"$31","metadata":{},"revision":"0c4919de-cac8-4d20-a20d-55438ffcb652","created":"2025-05-13T19:33:28.669979Z","modified":"2025-05-13T19:33:28.669983Z","in_llm_context":true}],"projectId":"8ab5ef53-1e1d-4e5c-9dbe-768c93f447fb"}]]}]