1f:I[498676,["/_next/static/chunks/285pqllwvltjz.js","/_next/static/chunks/3g5m1pyk9dmj0.js","/_next/static/chunks/37-owrbjeirzi.js","/_next/static/chunks/1z5pbnwvqamty.js","/_next/static/chunks/05qsa4vhf9b3f.js","/_next/static/chunks/2v-n1tk884g-7.js","/_next/static/chunks/3uz6_-wu8idhq.js","/_next/static/chunks/3w3sopl4rtd4f.js","/_next/static/chunks/44now2hn6srwa.js"],"default"] 20:I[967421,["/_next/static/chunks/285pqllwvltjz.js","/_next/static/chunks/3g5m1pyk9dmj0.js","/_next/static/chunks/37-owrbjeirzi.js","/_next/static/chunks/1z5pbnwvqamty.js","/_next/static/chunks/05qsa4vhf9b3f.js","/_next/static/chunks/2v-n1tk884g-7.js","/_next/static/chunks/3uz6_-wu8idhq.js","/_next/static/chunks/3w3sopl4rtd4f.js","/_next/static/chunks/44now2hn6srwa.js"],"default"] 21:T2501,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)); }22:T21ae,import React, { useState, useEffect } from 'react'; import confetti from 'https://esm.sh/canvas-confetti@1.6.0'; export const MilestoneCelebration = ({ isOpen, milestone, onClose }) => { const [animationState, setAnimationState] = useState('entering'); // 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'); // Trigger confetti effect when popup is fully visible triggerConfetti(); }, 500); return () => { clearTimeout(enterTimer); }; } }, [isOpen]); // Confetti effect function const triggerConfetti = () => { const duration = 3000; const animationEnd = Date.now() + duration; const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 1001 }; function randomInRange(min, max) { return Math.random() * (max - min) + min; } const interval = setInterval(() => { const timeLeft = animationEnd - Date.now(); if (timeLeft <= 0) { return clearInterval(interval); } const particleCount = 50 * (timeLeft / duration); // Gold color scheme confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 }, colors: ['#FFD700', '#FFA500', '#FFFF00'], gravity: randomInRange(0.4, 0.6), scalar: randomInRange(0.8, 1.2), }); confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 }, colors: ['#FFD700', '#FFA500', '#FFFF00'], gravity: randomInRange(0.4, 0.6), scalar: randomInRange(0.8, 1.2), }); }, 250); }; if (!isOpen) return null; // Get the reward points for the specific milestone reached // Add default value 0 and format with commas const milestoneRewardPoints = (milestone?.reward ?? 0).toLocaleString('vi-VN'); 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ấp độ rèn luyện {milestone?.position || ''}!

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

)} {/* Gift Points information */}

Phần Thưởng Đặc Biệt

{milestoneRewardPoints} Điểm Đổi Quà

Wow! Bạn vừa mở khóa một kho báu đặc biệt. Hãy sử dụng số điểm này để đổi những phần quà hấp dẫn nhé!

{/* Continue button */}

); };23:T2f42,// Service for handling ClickUp API calls export const clickupService = { // Get data from ClickUp API async fetchData(credentials) { if (!credentials.apiKey) { throw new Error('API Key is required'); } // Check for the new required fields for Pomo data if (!credentials.pomoTaskId) { throw new Error('Pomo Task ID is required'); } if (!credentials.pomoCustomFieldId) { throw new Error('Pomo Custom Field ID is required'); } const headers = { 'Authorization': credentials.apiKey, 'Content-Type': 'application/json' }; try { // Fetch the specific task containing the Pomo data console.log(`Fetching Pomo task: ${credentials.pomoTaskId}`); const pomoTask = await this.getTaskWithCustomField(headers, credentials.pomoTaskId); // Find the custom field and extract its value let pomoDaysAchieved = 0; const customField = pomoTask.custom_fields?.find( (field) => field.id === credentials.pomoCustomFieldId ); if (customField && customField.value !== undefined) { // Attempt to parse the value as a number const parsedValue = parseInt(customField.value, 10); if (!isNaN(parsedValue)) { pomoDaysAchieved = parsedValue; console.log(`Found Pomo custom field '${customField.name}' with value: ${pomoDaysAchieved}`); } else { console.warn(`Could not parse Pomo custom field value ('${customField.value}') as a number. Defaulting to 0.`); } } else { console.warn(`Pomo custom field with ID ${credentials.pomoCustomFieldId} not found or has no value on task ${credentials.pomoTaskId}. Defaulting to 0.`); } // Return the extracted Pomo data return { pomoDaysAchieved: pomoDaysAchieved, // Keep habitStats structure for potential compatibility or future use, but populate with Pomo data habitStats: { // daysFollowingHabits: 0, // This is no longer calculated here // trainingLevel: 0, // This is no longer calculated here pomoDaysAchieved: pomoDaysAchieved, // Add the new metric here // averageHappiness: 0, // Placeholder if needed later // scholarshipAmount: 0 // Placeholder if needed later } }; } catch (error) { console.error('Error fetching Pomo data from ClickUp:', error); throw new Error(`Failed to fetch Pomo data: ${error.message}`); } }, // Get workspaces for the user async getWorkspaces(headers) { 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 || []; }, // Removed getTasksFromList function // Removed processTasksForStats function // Helper function to get a single task with its custom fields async getTaskWithCustomField(headers, taskId) { const url = `https://api.clickup.com/api/v2/task/${taskId}?custom_task_ids=true&include_subtasks=true&include_custom_fields=true`; console.log(`Fetching task details from URL: ${url}`); // Log the URL being fetched try { const response = await fetch(url, { method: 'GET', headers }); if (!response.ok) { let errorMessage = `${response.status} ${response.statusText}`; try { const errorBody = await response.text(); // Get raw response body console.error('Error response body from ClickUp:', errorBody); const errorData = JSON.parse(errorBody); // Try to parse errorMessage += ` - ${JSON.stringify(errorData)}`; } catch (e) { console.error('Could not parse error response for getTaskWithCustomField'); } throw new Error(`Failed to get task ${taskId}: ${errorMessage}`); } const taskData = await response.json(); console.log(`Successfully fetched task ${taskId} details:`, taskData); // Log successful fetch return taskData; } catch (error) { console.error(`Error in getTaskWithCustomField for task ${taskId}:`, error); throw error; // Re-throw the error after logging } }, // Add comment to a specific task when a milestone is completed, including total points async addMilestoneComment(credentials, taskId, milestone, totalPoints) { if (!credentials.apiKey || !taskId) { throw new Error('API Key và Task ID là bắt buộc để thêm bình luận'); } const headers = { 'Authorization': credentials.apiKey, 'Content-Type': 'application/json' }; try { // Use the passed totalPoints, ensure it's a number, and format it const formattedTotalPoints = (typeof totalPoints === 'number' ? totalPoints : 0).toLocaleString('vi-VN'); // Create a nicely formatted comment using the totalPoints const commentText = `🎉 **CỘT MỐC ĐÃ ĐẠT ĐƯỢC!** 🎉\n\n` + `👉 Đã đạt cột mốc **${milestone.days} ngày**!\n` + `💰 Tổng điểm đổi quà tích lũy: **${formattedTotalPoints} điểm**\n` + // Use total points `📅 Đạt được vào: ${new Date().toLocaleString('vi-VN')}\n\n` + `Chúc mừng bạn đã đạt được cột mốc này! Hãy tiếp tục cố gắng nhé.`; // Make API request to add comment const url = `https://api.clickup.com/api/v2/task/${taskId}/comment`; const response = await fetch(url, { method: 'POST', headers, body: JSON.stringify({ comment_text: commentText, notify_all: true }) }); if (!response.ok) { let errorMessage = `${response.status} ${response.statusText}`; try { const errorData = await response.json(); errorMessage += ` - ${JSON.stringify(errorData)}`; console.error('Error response from ClickUp:', errorData); } catch (e) { console.error('Could not parse error response'); } throw new Error(`Failed to add comment: ${errorMessage}`); } const data = await response.json(); return data; } catch (error) { console.error('Error adding milestone comment:', error); // Thử tìm hiểu lỗi chi tiết hơn if (error.message.includes('Failed to fetch')) { console.error('Network error: Could not connect to ClickUp API'); } else if (error.message.includes('401')) { console.error('Authentication error: Invalid API key'); } else if (error.message.includes('403')) { console.error('Permission error: No access to this task'); } else if (error.message.includes('404')) { console.error('Not found error: Task ID may be invalid'); } throw new Error(`Failed to add milestone comment: ${error.message}`); } }, // Update custom field in ClickUp task async updateCustomField(credentials, taskId, fieldId, value) { if (!credentials.apiKey || !taskId || !fieldId) { throw new Error('API Key, Task ID and Field ID are required'); } const headers = { 'Authorization': credentials.apiKey, 'Content-Type': 'application/json' }; try { const url = `https://api.clickup.com/api/v2/task/${taskId}/field/${fieldId}`; console.log('Making API call to update custom field:', { url, method: 'POST', body: JSON.stringify({ value }) }); const response = await fetch(url, { method: 'POST', headers, body: JSON.stringify({ value }) }); console.log('Received raw response:', response.status, response.statusText); if (!response.ok) { // Log the raw text response first, as it might not be JSON const errorText = await response.text(); console.error('ClickUp API Error Response Text:', errorText); let errorData = {}; try { // Attempt to parse as JSON errorData = JSON.parse(errorText); } catch (parseError) { console.error('Could not parse error response as JSON.'); errorData = { message: errorText || `HTTP ${response.status} ${response.statusText}` }; } console.error('API error details:', { status: response.status, statusText: response.statusText, error: errorData, }); // Use message from parsed JSON if available, otherwise use the raw text or status throw new Error(errorData.err || errorData.message || `Failed to update custom field: ${response.statusText}`); } // If response IS ok, parse JSON and log success const responseData = await response.json(); console.log('API success response:', responseData); return responseData; } catch (error) { console.error('Error updating custom field:', error); throw error; } }, // Create a new task in a specific list, optionally adding a tag and image URL to a custom field async createMilestoneTask(credentials, listId, taskName, tagName = null, imageUrl = null, imageCustomFieldId = null) { if (!credentials.apiKey || !listId || !taskName) { throw new Error('API Key, List ID, and Task Name are required to create a task.'); } const headers = { 'Authorization': credentials.apiKey, 'Content-Type': 'application/json' }; const url = `https://api.clickup.com/api/v2/list/${listId}/task`; const body = { name: taskName, }; // Add tags only if tagName is provided and not empty if (tagName && tagName.trim() !== '') { body.tags = [tagName.trim()]; } try { console.log(`Attempting to create task at URL: ${url} with body:`, JSON.stringify(body)); const response = await fetch(url, { method: 'POST', headers, body: JSON.stringify(body) }); console.log(`Received response for task creation: ${response.status} ${response.statusText}`); if (!response.ok) { let errorMessage = `${response.status} ${response.statusText}`; try { const errorBody = await response.text(); console.error('Error response body from ClickUp (createTask):', errorBody); const errorData = JSON.parse(errorBody); errorMessage += ` - ${JSON.stringify(errorData)}`; } catch (e) { console.error('Could not parse error response for createTask'); } throw new Error(`Failed to create task: ${errorMessage}`); } const createdTask = await response.json(); console.log('Successfully created task:', createdTask); // After creating the task, update the custom field with the image URL if provided if (createdTask.id && imageCustomFieldId && imageUrl) { console.log(`Attempting to update custom field ${imageCustomFieldId} on task ${createdTask.id} with image URL: ${imageUrl}`); try { await this.updateCustomField( credentials, createdTask.id, imageCustomFieldId, imageUrl ); console.log(`Successfully updated custom field ${imageCustomFieldId} with image URL on task ${createdTask.id}.`); } catch (updateError) { console.error(`Failed to update image custom field for task ${createdTask.id}:`, updateError); // We don't throw here, as the task was created successfully. // Log the error and continue. } } else { console.log('Skipping image custom field update (missing ID or URL).'); } return createdTask; } catch (error) { console.error(`Error creating milestone task in list ${listId}:`, error); throw new Error(`Failed to create milestone task: ${error.message}`); } } };24:T2e2b,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 }); const [formData, setFormData] = useState(() => { // Generate a unique identifier for this page const pageId = window.location.pathname; // Try to load saved credentials from page-specific localStorage key ONLY // Sử dụng localStorage thay vì sessionStorage const savedCredentials = localStorage.getItem(`clickupCredentials_${pageId}`); if (savedCredentials) { try { // Ensure all expected fields exist, provide defaults if not const parsed = JSON.parse(savedCredentials); return { apiKey: parsed.apiKey || '', workspace: parsed.workspace || '', // listId: parsed.listId || '', // Removed listId milestoneTaskId: parsed.milestoneTaskId || '', customFieldId: parsed.customFieldId || '', // Keep this for gift points pomoTaskId: parsed.pomoTaskId || '', // Add Pomo Task ID pomoCustomFieldId: parsed.pomoCustomFieldId || '', // Add Pomo Custom Field ID taskListId: parsed.taskListId || '', // Add Task List ID for milestone task creation tagName: parsed.tagName || '', // Add Tag Name for milestone task creation imageCustomFieldId: parsed.imageCustomFieldId || '' // Load Image Custom Field ID }; } catch (e) { console.error(`Error parsing saved credentials for page ${pageId}:`, e); // Fallback to empty credentials if parsing fails } } // Return default empty credentials if nothing saved for this specific page return { apiKey: '', workspace: '', // listId: '', // Removed listId milestoneTaskId: '', customFieldId: '', // Keep this for gift points pomoTaskId: '', // Add Pomo Task ID pomoCustomFieldId: '', // Add Pomo Custom Field ID taskListId: '', // Add Task List ID tagName: '', // Add Tag Name imageCustomFieldId: '' // Add Image Custom Field ID }; }); // 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 () => { // Kiểm tra các trường bắt buộc (API Key và Workspace ID - Task IDs are now more specific) if (!formData.apiKey || !formData.workspace) { setSyncState({ status: 'error', message: 'Vui lòng điền đầy đủ API Key và Workspace ID', progress: 0 }); return; } // Generate a unique identifier for this page const pageId = window.location.pathname; console.log('Saving credentials to localStorage:', { pageId, formData, hasCustomField: !!formData.customFieldId, hasTaskId: !!formData.milestoneTaskId, fullFormData: formData }); // Save credentials ONLY to the page-specific localStorage key // Sử dụng localStorage thay vì sessionStorage localStorage.setItem(`clickupCredentials_${pageId}`, JSON.stringify({ ...formData, // Keep existing fields like apiKey, workspace, milestoneTaskId, etc. // listId is removed customFieldId: formData.customFieldId || undefined, // Keep gift points field ID pomoTaskId: formData.pomoTaskId || undefined, // Save Pomo Task ID pomoCustomFieldId: formData.pomoCustomFieldId || undefined, // Save Pomo Custom Field ID taskListId: formData.taskListId || undefined, // Save Task List ID tagName: formData.tagName || undefined, // Save Tag Name giftPoints: formData.giftPoints, // Preserve giftPoints if it exists imageCustomFieldId: formData.imageCustomFieldId || undefined // Save Image Custom Field ID })); // 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 })); // Pass in the credentials for milestone comments const data = await clickupService.fetchData(formData); // Add the clickupCredentials to the response data data.clickupCredentials = 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 (

{/* Row 1 */}

API Key *

Workspace ID *

{/* Row 2 */}

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

Custom Field ID (Lưu Điểm Đổi Quà)

{/* Row 3 */}

Task ID (Ngày Đạt MT) {/* Updated label text */}

Custom Field ID (Ngày Đạt MT Pomo) {/* Corrected label */}

{/* Row 4 (Single Column) */}

{/* Spans full width */} List ID (Vị Trí 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)

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

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

{syncState.message}

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

)}

); }; export default SyncForm;25:T467a,import React from 'react'; // Removed onMilestoneReached prop as logic is handled in parent RewardLadder.js export const TrainingLevelMilestones = ({ currentDays = 0 }) => { // Define milestones based on Pomo Days Achieved const dayMilestones = [ { days: 10, reward: 200, description: "Cột mốc 10 ngày", imageUrl: "https://play.rosebud.ai/assets/Lv5.gif?ZyKH", key: 'milestone_days_10' }, { days: 30, reward: 400, description: "Cột mốc 30 ngày", imageUrl: "https://play.rosebud.ai/assets/Lv10.gif?tz93", key: 'milestone_days_30' }, { days: 60, reward: 600, description: "Cột mốc 60 ngày", imageUrl: "https://play.rosebud.ai/assets/Lv15.gif?mhhb", key: 'milestone_days_60' }, { days: 90, reward: 1000, description: "Cột mốc 90 ngày", imageUrl: "https://play.rosebud.ai/assets/Lv25.gif?wLDq", key: 'milestone_days_90' }, { days: 120, reward: 2000, description: "Cột mốc 120 ngày", imageUrl: "https://play.rosebud.ai/assets/Lv40.gif?zpiV", key: 'milestone_days_120' }, { days: 180, reward: 4000, description: "Cột mốc 180 ngày", imageUrl: "https://play.rosebud.ai/assets/Lv40.gif?zpiV", key: 'milestone_days_180' }, // Reusing image { days: 240, reward: 6000, description: "Cột mốc 240 ngày", imageUrl: "https://play.rosebud.ai/assets/Lv40.gif?zpiV", key: 'milestone_days_240' }, // Reusing image { days: 300, reward: 10000, description: "Cột mốc 300 ngày", imageUrl: "https://play.rosebud.ai/assets/Lv40.gif?zpiV", key: 'milestone_days_300' }, // Reusing image { days: 360, reward: 15000, description: "Cột mốc 360 ngày", imageUrl: "https://play.rosebud.ai/assets/Lv40.gif?zpiV", key: 'milestone_days_360' } // Reusing image ]; // Removed useEffect hook for onMilestoneReached callback return (

{/* Central Timeline */}

{/* Gold glow effect */}

{/* Milestone Items */} {dayMilestones.map((milestone, index) => { // Use dayMilestones const isLeft = index % 2 === 0; const isCompleted = currentDays >= milestone.days; // Use currentDays and milestone.days const isActive = currentDays < milestone.days; // Use currentDays and milestone.days return (

{/* Circle on the timeline */}

{/* Content card */}

{/* Two-column layout container */}

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

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

🔒

)}

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

{/* Level number with black background and gold border */}

{/* Content above the number */}

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

{milestone.days} {/* Display milestone.days */}

NGÀY {/* Changed label to NGÀY */} {isCompleted && (

🏅

)}

{/* Progress bar in separate row */}

{/* Progress bar with percentage inside */}

{/* Percentage text inside progress bar */}

{`${Math.min(100, Math.round((currentDays / milestone.days) * 100))}%`} {/* Use currentDays and milestone.days for percentage */}

{/* Enhanced Reward information */}

{/* Reward image with enhanced styling */}

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

)}

{/* Reward description with enhanced styling */}

{/* Reward description */}

{/* Reward value */}

{milestone.reward.toLocaleString('vi-VN')} Điểm {/* Format reward */}

Gift Points

); })}

); };26:T90f2,import React, { useState, useEffect } from 'react'; import { HabitStats } from 'HabitStats'; import { TrainingLevelMilestones } from 'TrainingLevelMilestones'; import SyncForm from 'SyncForm'; import { clickupService } from 'clickupService'; import { MilestoneCelebration } from 'MilestoneCelebration'; import confetti from 'https://esm.sh/canvas-confetti@1.6.0'; // Define milestones directly in RewardLadder for easier access const dayMilestones = [ { days: 10, reward: 200, description: "Cột mốc 10 ngày", imageUrl: "https://play.rosebud.ai/assets/Lv5.gif?ZyKH", key: 'milestone_days_10' }, { days: 30, reward: 400, description: "Cột mốc 30 ngày", imageUrl: "https://play.rosebud.ai/assets/Lv10.gif?tz93", key: 'milestone_days_30' }, { days: 60, reward: 600, description: "Cột mốc 60 ngày", imageUrl: "https://play.rosebud.ai/assets/Lv15.gif?mhhb", key: 'milestone_days_60' }, { days: 90, reward: 1000, description: "Cột mốc 90 ngày", imageUrl: "https://play.rosebud.ai/assets/Lv25.gif?wLDq", key: 'milestone_days_90' }, { days: 120, reward: 2000, description: "Cột mốc 120 ngày", imageUrl: "https://play.rosebud.ai/assets/Lv40.gif?zpiV", key: 'milestone_days_120' }, { days: 180, reward: 4000, description: "Cột mốc 180 ngày", imageUrl: "https://play.rosebud.ai/assets/Lv40.gif?zpiV", key: 'milestone_days_180' }, // Reusing image { days: 240, reward: 6000, description: "Cột mốc 240 ngày", imageUrl: "https://play.rosebud.ai/assets/Lv40.gif?zpiV", key: 'milestone_days_240' }, // Reusing image { days: 300, reward: 10000, description: "Cột mốc 300 ngày", imageUrl: "https://play.rosebud.ai/assets/Lv40.gif?zpiV", key: 'milestone_days_300' }, // Reusing image { days: 360, reward: 15000, description: "Cột mốc 360 ngày", imageUrl: "https://play.rosebud.ai/assets/Lv40.gif?zpiV", key: 'milestone_days_360' } // Reusing image ]; export const RewardLadder = () => { const [activeTab, setActiveTab] = useState('habits'); const [activeSubTab, setActiveSubTab] = useState('aa'); const [giftPoints, setGiftPoints] = useState(() => { // Priority 1: Check for page-specific credentials first const pageId = window.location.pathname; // Sử dụng localStorage const pageSpecificCreds = localStorage.getItem(`clickupCredentials_${pageId}`); if (pageSpecificCreds) { try { const parsed = JSON.parse(pageSpecificCreds); if (parsed.giftPoints !== undefined) { return parsed.giftPoints; } } catch (error) { console.error('Error parsing page-specific credentials:', error); } } // Restore closing brace for the 'if (pageSpecificCreds)' block // If page-specific credentials were not found or giftPoints were missing, default to 0 return 0; }); // This closing parenthesis and brace belong to useState const [showSettings, setShowSettings] = useState(false); const [syncState, setSyncState] = useState({ status: 'idle', // idle, syncing, success, error message: '', progress: 0 }); const [habitStats, setHabitStats] = useState({ // daysFollowingHabits: 0, // Removed, not directly calculated anymore // trainingLevel: 0, // Replaced by pomoDaysAchieved pomoDaysAchieved: 0, // Add the new Pomo metric averageHappiness: 0, // Keep for potential future use scholarshipAmount: 0, // Keep for potential future use giftPoints: 0 // Keep for gift points logic }); const [showMilestone, setShowMilestone] = useState(false); const [currentMilestone, setCurrentMilestone] = useState(null); const [clickupCredentials, setClickupCredentials] = useState(null); const [giftPointsUpdateStatus, setGiftPointsUpdateStatus] = useState({ status: 'idle', message: '' }); // idle, updating, success, error // State for password protection const [passwordInput, setPasswordInput] = useState(''); const [isPasswordVerified, setIsPasswordVerified] = useState(false); const [passwordError, setPasswordError] = useState(''); // --- Move Ref and Effect for previous gift points here --- const prevGiftPointsRef = React.useRef(); React.useEffect(() => { // Store the current gift points in the ref after each render // so we can access the previous value in the next effect run prevGiftPointsRef.current = habitStats.giftPoints; }); // --- End moved code --- useEffect(() => { const loadSettings = () => { const pageId = window.location.pathname; // Get page-specific ID // Sử dụng localStorage const savedCredentials = localStorage.getItem(`clickupCredentials_${pageId}`); // ONLY use page-specific key if (savedCredentials) { try { const parsedCredentials = JSON.parse(savedCredentials); setClickupCredentials(parsedCredentials); console.log(`Loaded page-specific settings from localStorage (${pageId}):`, parsedCredentials); // Automatically sync data when credentials are loaded (Check for pomoTaskId and pomoCustomFieldId) if (parsedCredentials.apiKey && parsedCredentials.pomoTaskId && parsedCredentials.pomoCustomFieldId) { console.log('Tự động đồng bộ dữ liệu Pomo khi tải trang...'); syncClickUpData(parsedCredentials); // Pass the credentials // Thiết lập đồng bộ dữ liệu tự động sau mỗi 2 giờ // Lưu thời gian đồng bộ vào key riêng biệt theo pageId để tránh xung đột const lastSyncTimeKey = `lastSyncTime_${pageId}`; // Sử dụng localStorage const lastSyncTime = localStorage.getItem(lastSyncTimeKey); console.log('Thời gian đồng bộ trước đó:', lastSyncTime ? new Date(parseInt(lastSyncTime)).toLocaleString() : 'chưa có'); // Lưu thời gian đồng bộ hiện tại vào key riêng // Sử dụng localStorage localStorage.setItem(lastSyncTimeKey, Date.now().toString()); } } catch (error) { console.error(`Error parsing saved page-specific credentials (${pageId}):`, error); } } }; loadSettings(); // Thiết lập interval cho việc đồng bộ định kỳ mỗi 2 giờ const SYNC_INTERVAL = 2 * 60 * 60 * 1000; // 2 giờ tính bằng milliseconds // Thiết lập interval đồng bộ const intervalId = setInterval(() => { // Sử dụng clickupCredentials từ state (Check for Pomo fields) if (clickupCredentials && clickupCredentials.apiKey && clickupCredentials.pomoTaskId && clickupCredentials.pomoCustomFieldId) { const pageId = window.location.pathname; const lastSyncTimeKey = `lastSyncTime_${pageId}`; // Sử dụng localStorage const lastSyncTime = localStorage.getItem(lastSyncTimeKey); const currentTime = Date.now(); // Nếu chưa có lần đồng bộ nào hoặc đã qua 2 giờ kể từ lần đồng bộ trước if (!lastSyncTime || (currentTime - parseInt(lastSyncTime)) >= SYNC_INTERVAL) { console.log('Đồng bộ tự động định kỳ sau 2 giờ...'); console.log('Thời gian hiện tại:', new Date(currentTime).toLocaleString()); console.log('Thời gian đồng bộ trước đó:', lastSyncTime ? new Date(parseInt(lastSyncTime)).toLocaleString() : 'chưa có'); // Thực hiện đồng bộ syncClickUpData(clickupCredentials); // Cập nhật thời gian đồng bộ vào key riêng // Sử dụng localStorage localStorage.setItem(lastSyncTimeKey, currentTime.toString()); } } }, 60000); // Kiểm tra mỗi phút một lần để tránh bỏ lỡ khoảng thời gian chính xác // Dọn dẹp interval khi component unmount return () => { clearInterval(intervalId); }; }, []); // Function to sync data with ClickUp const syncClickUpData = async (credentials) => { // Set syncing state setSyncState({ status: 'syncing', message: 'Đang tự động đồng bộ dữ liệu...', progress: 10 }); // Call the ClickUp service to fetch data clickupService.fetchData(credentials) .then(data => { console.log('Đồng bộ tự động hoàn tất:', data); // Check if data and the new pomoDaysAchieved exist if (data && data.pomoDaysAchieved !== undefined) { const { pomoDaysAchieved } = data; // Get the value directly // TODO: Update calculateGiftPoints function to use pomoDaysAchieved let calculatedGiftPoints = calculateGiftPoints(pomoDaysAchieved); // Pass pomoDaysAchieved // Ensure calculatedGiftPoints is always a valid number if (isNaN(calculatedGiftPoints) || calculatedGiftPoints === undefined) { console.warn('Invalid gift points calculated, defaulting to 0. Pomo Days:', pomoDaysAchieved); calculatedGiftPoints = 0; } // Save giftPoints to sessionStorage immediately const pageId = window.location.pathname; const currentCreds = JSON.parse(localStorage.getItem(`clickupCredentials_${pageId}`) || '{}'); localStorage.setItem(`clickupCredentials_${pageId}`, JSON.stringify({ ...currentCreds, giftPoints: calculatedGiftPoints })); // Ensure giftPoints is never undefined const safeGiftPoints = calculatedGiftPoints ?? 0; // Update local state with the new structure setHabitStats(prev => ({ ...prev, // daysFollowingHabits: 0, // Remove // trainingLevel: 0, // Remove pomoDaysAchieved: pomoDaysAchieved || 0, // Update with new value averageHappiness: prev.averageHappiness, // Keep existing or update if needed scholarshipAmount: prev.scholarshipAmount, // Keep existing or update if needed giftPoints: safeGiftPoints // Use the checked value })); console.log('Habit stats state updated in syncClickUpData. New Pomo Days:', pomoDaysAchieved, 'New Gift Points:', safeGiftPoints); } else { console.warn('Sync completed but pomoDaysAchieved data is missing:', data); } // Cập nhật thời gian đồng bộ lần cuối vào key riêng const pageId = window.location.pathname; const lastSyncTimeKey = `lastSyncTime_${pageId}`; // Sử dụng localStorage localStorage.setItem(lastSyncTimeKey, Date.now().toString()); setSyncState({ status: 'success', message: 'Đồng bộ tự động thành công!', progress: 100 }); // Clear the sync status after 3 seconds setTimeout(() => { setSyncState({ status: 'idle', message: '', progress: 0 }); }, 3000); } // Moved this brace down to correctly close the .then block ) .catch(error => { console.error('Lỗi đồng bộ tự động:', error); setSyncState({ status: 'error', message: 'Đồng bộ tự động thất bại: ' + error.message, progress: 0 }); // Clear the error after 5 seconds setTimeout(() => { setSyncState({ status: 'idle', message: '', progress: 0 }); }, 5000); }); }; const handleSyncComplete = async (data) => { console.log('Received sync data in RewardLadder:', data); // Check if data and the new pomoDaysAchieved exist if (data && data.pomoDaysAchieved !== undefined) { const { pomoDaysAchieved } = data; // Get the value directly // TODO: Update calculateGiftPoints if needed for initial sync as well let calculatedGiftPoints = calculateGiftPoints(pomoDaysAchieved); if (isNaN(calculatedGiftPoints) || calculatedGiftPoints === undefined) { calculatedGiftPoints = 0; } const safeGiftPoints = calculatedGiftPoints ?? 0; // Update local state with the new structure setHabitStats({ // daysFollowingHabits: 0, // Remove // trainingLevel: 0, // Remove pomoDaysAchieved: pomoDaysAchieved || 0, // Update with new value averageHappiness: 0, // Reset or use previous if needed scholarshipAmount: 0, // Reset or use previous if needed giftPoints: safeGiftPoints // Update gift points }); // Save ClickUp credentials setClickupCredentials(data.clickupCredentials); setSyncState({ status: 'success', message: 'Đồng bộ hóa thành công!', progress: 100 }); setTimeout(() => { setShowSettings(false); setSyncState({ status: 'idle', message: '', progress: 0 }); setIsPasswordVerified(false); // Reset password verification setPasswordInput(''); // Clear password input setPasswordError(''); // Clear password error }, 2000); } else { setSyncState({ status: 'error', message: 'Đồng bộ hóa thất bại. Dữ liệu không hợp lệ.', progress: 0 }); } }; // Kiểm tra cột mốc đã đạt được useEffect(() => { const checkMilestones = async () => { // Use the new dayMilestones array defined at the top const currentPomoDays = habitStats.pomoDaysAchieved || 0; console.log(`Checking milestones with Pomo Days: ${currentPomoDays}`); // Iterate through the new milestones to find the highest *newly* reached one let highestNewlyReachedMilestone = null; for (const milestone of dayMilestones) { if (currentPomoDays >= milestone.days) { const pageId = window.location.pathname; const milestoneKey = `milestone_processed_days_${milestone.days}_${pageId}`; // Key for processing (comment/points) const hasBeenProcessed = localStorage.getItem(milestoneKey); if (!hasBeenProcessed) { // This is the highest milestone reached *that hasn't been processed yet* highestNewlyReachedMilestone = milestone; console.log(`Highest *unprocessed* milestone found: ${milestone.days} days`); } else { console.log(`Milestone ${milestone.days} days already processed.`); } } else { // Stop checking once a milestone is not reached console.log(`Milestone ${milestone.days} days not reached yet.`); break; } } // Process the highest newly reached milestone, if any if (highestNewlyReachedMilestone) { const milestone = highestNewlyReachedMilestone; console.log(`Processing new milestone: ${milestone.days} days`); // Show popup (MilestoneCelebration will handle confetti) setCurrentMilestone(milestone); // Pass the full milestone object setShowMilestone(true); // Mark this milestone as processed (for points/comment) in sessionStorage const pageId = window.location.pathname; const milestoneKey = `milestone_processed_days_${milestone.days}_${pageId}`; localStorage.setItem(milestoneKey, 'true'); // Create task, add comment, and update gift points if credentials are set if (clickupCredentials) { console.log(`Processing actions for ${milestone.days} days milestone with credentials:`, clickupCredentials); // 1. Create Milestone Task (if listId and tagName are provided) if (clickupCredentials.taskListId) { const currentTime = new Date().toLocaleString('vi-VN'); const taskName = `2.SP - Cột Mốc ${milestone.days} Ngày Đạt Mục Tiêu Pomo - ${currentTime}`; const tagName = clickupCredentials.tagName || null; // Use provided tag name or null try { console.log(`Attempting to create task in List ${clickupCredentials.taskListId} with name "${taskName}" and tag "${tagName}"`); await clickupService.createMilestoneTask( clickupCredentials, clickupCredentials.taskListId, taskName, tagName, milestone.imageUrl, // Pass the image URL from the milestone clickupCredentials.imageCustomFieldId // Pass the custom field ID from credentials ); console.log(`Successfully created milestone task for ${milestone.days} days.`); } catch (error) { console.error(`Error creating milestone task for ${milestone.days} days:`, error); // Optional: Add user-facing error handling here if needed } } else { console.log('taskListId missing in credentials, skipping task creation.'); } // 2. Add Comment and Update Gift Points (if milestoneTaskId is provided) if (clickupCredentials.milestoneTaskId) { console.log(`Adding comment and updating points for ${milestone.days} days milestone.`); const totalCalculatedPoints = calculateGiftPoints(currentPomoDays); await addMilestoneComment(milestone, clickupCredentials, totalCalculatedPoints); setHabitStats(prev => ({ ...prev, giftPoints: totalCalculatedPoints })); console.log(`Pomo Milestone ${milestone.days} days processed. Added comment with total points: ${totalCalculatedPoints}. Updated state.`); } else { console.log('milestoneTaskId missing, skipping comment and points update.'); } } else { console.log('Credentials missing, skipping task creation, comment, and points update for milestone.'); // Still mark as processed to prevent repeated popups localStorage.setItem(milestoneKey, 'true'); } } else { console.log("No new milestones reached or all reached milestones already processed."); } }; checkMilestones(); }, [habitStats.pomoDaysAchieved, clickupCredentials]); // Update dependency array // Watch for gift points changes and update ClickUp + sessionStorage useEffect(() => { // Add more detailed logging here console.log(`[Effect Check] Gift points effect triggered. Current points: ${habitStats.giftPoints}`, { credentials: !!clickupCredentials }); // Access the previous value from the ref moved outside this effect const prevGiftPoints = prevGiftPointsRef.current; if (prevGiftPoints !== habitStats.giftPoints) { console.log(`[Effect Check] Gift points changed from ${prevGiftPoints} to ${habitStats.giftPoints}`); } else { console.log(`[Effect Check] Gift points effect ran, but points (${habitStats.giftPoints}) seem unchanged compared to the previous render.`); } console.log('Gift points effect triggered:', { giftPoints: habitStats.giftPoints, credentials: clickupCredentials }); // Save to localStorage whenever giftPoints change if (clickupCredentials) { const pageId = window.location.pathname; // ONLY read from page-specific key when preparing to save // Sử dụng localStorage const currentCreds = JSON.parse(localStorage.getItem(`clickupCredentials_${pageId}`) || '{}'); localStorage.setItem(`clickupCredentials_${pageId}`, JSON.stringify({ ...currentCreds, giftPoints: habitStats.giftPoints ?? 0 // Ensure giftPoints is never undefined when saving })); } const updateGiftPointsInClickUp = async () => { console.log('[Effect Check] Entering updateGiftPointsInClickUp function.'); console.log('Checking credentials for gift points update:', { hasFieldId: !!clickupCredentials?.customFieldId, hasTaskId: !!clickupCredentials?.milestoneTaskId, giftPoints: habitStats.giftPoints, fullCredentials: clickupCredentials // Be cautious logging full credentials in production }); // Check if all required credentials and custom field ID are available if ( clickupCredentials?.apiKey && clickupCredentials?.milestoneTaskId && clickupCredentials?.customFieldId && habitStats.giftPoints !== undefined // Ensure giftPoints has a value ) { const giftPointsToUpdate = habitStats.giftPoints ?? 0; // Validate if giftPoints is a number if (isNaN(giftPointsToUpdate)) { console.error('Invalid gift points value, cannot update ClickUp:', giftPointsToUpdate); return; // Stop if value is not a number } setGiftPointsUpdateStatus({ status: 'updating', message: 'Đang cập nhật điểm đổi quà lên ClickUp...' }); try { console.log('[Effect Check] Credentials seem valid. Attempting API call.', { taskId: clickupCredentials.milestoneTaskId, fieldId: clickupCredentials.customFieldId, value: giftPointsToUpdate }); const response = await clickupService.updateCustomField( clickupCredentials, clickupCredentials.milestoneTaskId, clickupCredentials.customFieldId, giftPointsToUpdate ); console.log('[Effect Check] ClickUp API call successful:', response); setGiftPointsUpdateStatus({ status: 'success', message: 'Cập nhật điểm đổi quà thành công!' }); // Reset status after 3 seconds setTimeout(() => setGiftPointsUpdateStatus({ status: 'idle', message: '' }), 3000); } catch (error) { console.error('Failed to update gift points:', { error: error.message, status: error.response?.status, response: error.response?.data, stack: error.stack }); setGiftPointsUpdateStatus({ status: 'error', message: `Lỗi cập nhật điểm: ${error.message}` }); // Reset status after 5 seconds setTimeout(() => setGiftPointsUpdateStatus({ status: 'idle', message: '' }), 5000); // Keep the general sync state separate if needed, or decide if this replaces it // setSyncState({ // status: 'error', // message: `Lỗi cập nhật điểm: ${error.message}`, // progress: 0 // }); // // Clear error message after a delay // setTimeout(() => { // setSyncState(prev => prev.status === 'error' ? { status: 'idle', message: '', progress: 0 } : prev); // }, 5000); } } else { // Log why the update is not happening console.log('[Effect Check] Skipping ClickUp update. Reason:'); if (!clickupCredentials?.apiKey) { console.log('- API Key is missing.'); } if (!clickupCredentials?.milestoneTaskId) { console.log('- Milestone Task ID is missing.'); } if (!clickupCredentials?.customFieldId) { console.log('- Custom Field ID is missing.'); } if (habitStats.giftPoints === undefined) { console.log('- Gift points value is undefined.'); } else if (isNaN(habitStats.giftPoints)) { console.log(`- Gift points value is not a number (${habitStats.giftPoints}).`); } if (!clickupCredentials) { console.log('- clickupCredentials object is missing.'); } } }; // Only call the update function if credentials are set if (clickupCredentials) { console.log('[Effect Check] Credentials exist, calling updateGiftPointsInClickUp.'); updateGiftPointsInClickUp(); } else { console.log('[Effect Check] Credentials do not exist, skipping update call.'); } }, [habitStats.giftPoints, clickupCredentials]); // Function to trigger confetti effect const triggerConfetti = () => { const duration = 3000; const animationEnd = Date.now() + duration; const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 1001 }; function randomInRange(min, max) { return Math.random() * (max - min) + min; } const interval = setInterval(() => { const timeLeft = animationEnd - Date.now(); if (timeLeft <= 0) { return clearInterval(interval); } const particleCount = 50 * (timeLeft / duration); // Gold color scheme confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 }, colors: ['#FFD700', '#FFA500', '#FFFF00'], gravity: randomInRange(0.4, 0.6), scalar: randomInRange(0.8, 1.2), }); confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 }, colors: ['#FFD700', '#FFA500', '#FFFF00'], gravity: randomInRange(0.4, 0.6), scalar: randomInRange(0.8, 1.2), }); }, 250); }; const addMilestoneComment = async (milestone, credentials) => { try { await clickupService.addMilestoneComment(credentials, credentials.milestoneTaskId, milestone); console.log('Milestone comment added successfully'); } catch (error) { console.error('Error adding milestone comment:', error); } }; const handleCloseMilestone = () => { setShowMilestone(false); }; // Removed hasMilestoneBeenProcessed and markMilestoneAsProcessed as simplified logic is in useEffect // Function to get points awarded FOR REACHING a specific milestone (Not used for total calculation anymore) // Kept for potential future use, but the main logic relies on calculateGiftPoints const getGiftPointsForMilestone = (milestone) => { // Returns the reward defined in the milestone object const points = milestone.reward || 0; console.log(`Reward points defined for ${milestone.days} days milestone: ${points}`); return points; }; // Function to calculate the TOTAL accumulated gift points based on ALL achieved Pomo milestones const calculateGiftPoints = (pomoDaysAchieved) => { pomoDaysAchieved = parseInt(pomoDaysAchieved) || 0; let totalGiftPoints = 0; // Iterate through the new dayMilestones defined at the top for (const milestone of dayMilestones) { if (pomoDaysAchieved >= milestone.days) { // Add the reward for this achieved milestone to the total totalGiftPoints += milestone.reward || 0; } else { // Stop accumulating points once a milestone is not reached break; } } console.log('Calculated TOTAL accumulated gift points based on Pomo days:', { pomoDaysAchieved, totalGiftPoints }); return totalGiftPoints || 0; // Ensure we never return undefined or NaN }; const handlePasswordVerify = () => { if (passwordInput === '1') { // Hardcoded password setIsPasswordVerified(true); setPasswordError(''); } else { setPasswordError('Mật khẩu không đúng. Vui lòng thử lại.'); setIsPasswordVerified(false); } }; // Dữ liệu cơ bản cho tabs (Remains unchanged) const tabsData = { discipline: { title: 'Cấp Độ', rewards: [] }, habits: { title: 'Thói Quen', rewards: [] }, goals: { title: 'Mục Tiêu', rewards: [] }, focus: { title: 'Tập Trung', rewards: [] }, time: { title: 'Thời Gian', rewards: [] } }; return (

{/* Sync status indicator */} {syncState.status !== 'idle' && (

{/* Smaller icon margin and size */} {syncState.status === 'syncing' ? '⏳' : syncState.status === 'success' ? '✅' : '❌'}

{/* Reduced margin */} {syncState.status === 'syncing' ? 'Đang tải dữ liệu mới...' : syncState.message}

{/* Progress bar removed */} {/* Removed the "Đồng bộ tiếp theo" message block */}

)} {showSettings && (

Cài đặt Đồng bộ

{!isPasswordVerified ? (

setPasswordInput(e.target.value)} onKeyPress={(e) => { if (e.key === 'Enter') handlePasswordVerify(); }} placeholder="Nhập mật khẩu" style={{ padding: '12px', marginRight: '10px', borderRadius: '8px', border: '1px solid #555', background: '#222', color: '#fff', fontSize: '16px' }} /> {passwordError &&

{passwordError}

}

) : (

)}

{/* Tab navigation removed */}

{/* Content title removed as requested */}

{/* Content previously under 'Thói quen' tab is now always visible */}

{/* Include the HabitStats component */}

{/* Sub-tabs for habits section */}

setActiveSubTab('aa')} style={{ padding: '10px 16px', border: activeSubTab === 'aa' ? 'none' : '1px solid rgba(255, 215, 0, 0.3)', borderRadius: '8px', background: activeSubTab === 'aa' ? 'linear-gradient(135deg, #FFD700, #FFA500)' : 'rgba(0,0,0,0.2)', color: activeSubTab === 'aa' ? '#2C1810' : '#FFD700', fontSize: '12px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.5px', minWidth: '160px', whiteSpace: 'nowrap', textAlign: 'center', cursor: 'pointer', boxShadow: activeSubTab === 'aa' ? '0 4px 12px rgba(255, 215, 0, 0.4)' : 'none' }} > NGÀY ĐẠT MỤC TIÊU

{/* Content based on sub-tab selection */}

{/* Update props passed to TrainingLevelMilestones */} { console.log("Milestone reached callback (now based on days):", milestone); setCurrentMilestone(milestone); setShowMilestone(true); triggerConfetti(); }} />

{/* Milestone Celebration Popup */}

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

); }29:T5d8,// Define keyframe animations const styleSheet = document.createElement('style'); styleSheet.type = 'text/css'; styleSheet.innerHTML = ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes pulse { 0% { filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6)) brightness(1.3) contrast(1.2) saturate(1.5); } 50% { filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.9)) brightness(1.5) contrast(1.4) saturate(1.8); } 100% { filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6)) brightness(1.3) contrast(1.2) saturate(1.5); } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes scaleIn { 0% { transform: scale(0.7); opacity: 0; } 70% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } @keyframes confetti { 0% { transform: translateY(0) rotate(0deg); opacity: 0.8; } 50% { transform: translateY(50vh) rotate(180deg); opacity: 0.9; } 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } } @keyframes shimmer { 0% { background-position: -100% 0; } 100% { background-position: 200% 0; } } `; document.head.appendChild(styleSheet);2a: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' && (

)}

); }2b:T1769,// 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; } .settings-button.active { background: #FFFFFF; color: #2C1810; } .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, #FF8C00); box-shadow: 0 6px 15px rgba(255,215,0,0.4); } .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; } .clickup-form-group { margin-bottom: 16px; } .clickup-form-label { display: block; margin-bottom: 6px; font-weight: 500; color: #FFD700; } .clickup-form-input { width: 100%; padding: 12px 16px; 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; } .clickup-list-container { margin-bottom: 20px; } .clickup-list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .clickup-list-label { font-weight: 500; color: #FFD700; } .clickup-add-button { background: none; border: none; color: #FFD700; cursor: pointer; font-size: 14px; font-weight: 500; padding: 4px 8px; border-radius: 4px; } .clickup-list-item { display: flex; align-items: center; margin-bottom: 10px; } .clickup-list-input { width: 100%; padding: 12px 16px; 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: 10px; flex: 1; } .clickup-remove-button { background: none; border: none; color: #FF6B6B; cursor: pointer; font-size: 20px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 4px; } .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; } } `; document.head.appendChild(styleSheet); }2c:T13ed,import React, { useState, useEffect } from 'react'; export const HabitStats = ({ stats = {} }) => { // Always get the most current stats from props with fallbacks // Extract relevant stats with defaults const { pomoDaysAchieved = 0, // Use pomoDaysAchieved giftPoints = 0 // Use giftPoints directly from parent // scholarshipAmount = 0 // Keep if needed later } = stats; // Format the gift points passed from the parent const formattedGiftPoints = (giftPoints || 0).toLocaleString('vi-VN'); // Log stats for debugging useEffect(() => { console.log('Current stats received by HabitStats:', { pomoDaysAchieved, giftPoints }); }, [stats]); // Keep dependency on the whole stats object return (

{/* Gold accent line at top */}

{/* Training Level */}

{/* Trophy Icon */}

🏆

Ngày Đạt MT Pomo {/* Changed Label */}

{pomoDaysAchieved} {/* Changed Value */}

{/* Vertical Divider */}

{/* Scholarship Amount */}

{/* Gift Icon */}

ĐIỂM ĐỔI QUÀ

{formattedGiftPoints} ĐIỂM

{/* Gold accent line at bottom */}

); };17:["$","div",null,{"className":"h_[100dvh] d_flex","children":[["$","$L1f",null,{"projectId":"6dea78f8-9f2a-410c-8dd9-87f01481486c"}],["$","$L20",null,{"mode":"Multifile","files":[{"id":"db41de2c-9cac-4614-b4b6-a603f62bb43a","name":"App.jsx","path":"/","permissions":"rw","content":"$21","metadata":{},"revision":"80eaf426-5b35-43bf-9cd3-3d6f8493e98a","created":"2025-05-13T19:33:49.615757Z","modified":"2025-05-13T19:33:49.615775Z","in_llm_context":true},{"id":"ff74e5df-1af4-4f14-9d9c-9ad1ce3cb608","name":"MilestoneCelebration.js","path":"/","permissions":"rw","content":"$22","metadata":{},"revision":"80eaf426-5b35-43bf-9cd3-3d6f8493e98a","created":"2025-05-13T19:33:49.615808Z","modified":"2025-05-13T19:33:49.615813Z","in_llm_context":false},{"id":"b376f155-f468-4405-8607-701755ba0022","name":"clickupService.js","path":"/","permissions":"rw","content":"$23","metadata":{},"revision":"80eaf426-5b35-43bf-9cd3-3d6f8493e98a","created":"2025-05-13T19:33:49.615830Z","modified":"2025-05-13T19:33:49.615834Z","in_llm_context":true},{"id":"598b4ec3-3702-4d7d-8a22-fa0debd0ff13","name":"SyncForm.jsx","path":"/","permissions":"rw","content":"$24","metadata":{},"revision":"80eaf426-5b35-43bf-9cd3-3d6f8493e98a","created":"2025-05-13T19:33:49.615851Z","modified":"2025-05-13T19:33:49.615855Z","in_llm_context":true},{"id":"93916a87-5ca7-4a43-9051-f6f0e980c40c","name":"TrainingLevelMilestones.js","path":"/","permissions":"rw","content":"$25","metadata":{},"revision":"80eaf426-5b35-43bf-9cd3-3d6f8493e98a","created":"2025-05-13T19:33:49.615871Z","modified":"2025-05-13T19:33:49.615876Z","in_llm_context":true},{"id":"c1a43225-f6db-40b6-90a0-17ba4290f862","name":"RewardLadder.js","path":"/","permissions":"rw","content":"$26","metadata":{},"revision":"80eaf426-5b35-43bf-9cd3-3d6f8493e98a","created":"2025-05-13T19:33:49.615891Z","modified":"2025-05-13T19:33:49.615896Z","in_llm_context":true},{"id":"50cfc0d7-54ff-433a-9763-50c538406784","name":"ThemeContext.jsx","path":"/","permissions":"rw","content":"$27","metadata":{},"revision":"80eaf426-5b35-43bf-9cd3-3d6f8493e98a","created":"2025-05-13T19:33:49.615912Z","modified":"2025-05-13T19:33:49.615916Z","in_llm_context":false},{"id":"23c7ebf0-650f-4124-a818-5e4e0d908cd6","name":"Header.jsx","path":"/","permissions":"rw","content":"$28","metadata":{},"revision":"80eaf426-5b35-43bf-9cd3-3d6f8493e98a","created":"2025-05-13T19:33:49.615931Z","modified":"2025-05-13T19:33:49.615935Z","in_llm_context":false},{"id":"b4c3a2e7-184b-43bf-bb62-7008f35fddf1","name":"keyframes.js","path":"/","permissions":"rw","content":"$29","metadata":{},"revision":"80eaf426-5b35-43bf-9cd3-3d6f8493e98a","created":"2025-05-13T19:33:49.615956Z","modified":"2025-05-13T19:33:49.615960Z","in_llm_context":false},{"id":"6863b9ef-092e-4f65-8407-dae1915803ca","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":"80eaf426-5b35-43bf-9cd3-3d6f8493e98a","created":"2025-05-13T19:33:49.615979Z","modified":"2025-05-13T19:33:49.615983Z","in_llm_context":false},{"id":"85c90e06-2b61-4c61-9cd6-fe7806dd8a8f","name":"SyncStatus.jsx","path":"/","permissions":"rw","content":"$2a","metadata":{},"revision":"80eaf426-5b35-43bf-9cd3-3d6f8493e98a","created":"2025-05-13T19:33:49.615999Z","modified":"2025-05-13T19:33:49.616003Z","in_llm_context":false},{"id":"8ef3a0ec-9d13-4c93-8712-e7901684fd2b","name":"styles.js","path":"/","permissions":"rw","content":"$2b","metadata":{},"revision":"80eaf426-5b35-43bf-9cd3-3d6f8493e98a","created":"2025-05-13T19:33:49.616019Z","modified":"2025-05-13T19:33:49.616024Z","in_llm_context":false},{"id":"b811c3bc-b96e-4cdb-97a9-c93cccd59c64","name":"HabitStats.js","path":"/","permissions":"rw","content":"$2c","metadata":{},"revision":"80eaf426-5b35-43bf-9cd3-3d6f8493e98a","created":"2025-05-13T19:33:49.616039Z","modified":"2025-05-13T19:33:49.616043Z","in_llm_context":false}],"projectId":"6dea78f8-9f2a-410c-8dd9-87f01481486c"}]]}]