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:T31c4,// 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'); } const headers = { 'Authorization': credentials.apiKey, 'Content-Type': 'application/json' }; try { // Workspace fetching logic remains the same (if needed for other purposes) if (!credentials.workspace) { const workspaces = await this.getWorkspaces(headers); if (workspaces.length > 0) { credentials.workspace = workspaces[0].id; } else { throw new Error('No workspaces found'); } } // Initialize habit stats let habitStatsData = { daysFollowingHabits: 0, trainingLevel: 0, scholarshipAmount: 0 }; // Check if listIds are provided if (credentials.listIds && credentials.listIds.length > 0) { // Get tasks directly from the provided list IDs const listTasks = await this.getTasksFromLists(headers, credentials.listIds); habitStatsData = this.processTasksForStats(listTasks); } else { // Handle the case where no list IDs are provided // Optionally, you could throw an error or return default stats // throw new Error('At least one List ID is required'); } return { habitStats: habitStatsData // Return calculated stats }; } catch (error) { throw new Error(`Failed to fetch data from ClickUp: ${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 || []; }, // (getTasksFromSpace function is no longer directly called by fetchData, // but kept here in case it's needed elsewhere or for reference) // async getTasksFromSpace(headers, spaceId) { ... existing code ... } // Get tasks from specific lists (Handles multiple list IDs) async getTasksFromLists(headers, listIds) { let allTasks = []; const failedListIds = []; // Use Promise.allSettled to fetch from all lists concurrently and handle errors gracefully const results = await Promise.allSettled( listIds.map(listId => { // Ensure listId is not empty or null before fetching if (listId && listId.trim() !== '') { return this.getTasksFromList(headers, listId.trim()); } return Promise.resolve([]); // Resolve with empty array for invalid IDs }) ); results.forEach((result, index) => { const listId = listIds[index]; if (result.status === 'fulfilled') { allTasks = [...allTasks, ...result.value]; } else { failedListIds.push(listId); // Decide if you want to throw an error or just log it // throw new Error(`Failed to fetch tasks from list ${listId}: ${result.reason.message}`); } }); if (failedListIds.length > 0) { } // Optional: Throw an error if all fetches failed // if (failedListIds.length === listIds.length && listIds.length > 0) { // throw new Error(`Failed to fetch tasks from all provided lists.`); // } return allTasks; }, // Get tasks from a single list (Handles pagination) async getTasksFromList(headers, listId) { let allTasks = []; let page = 0; let hasMore = true; const PAGE_SIZE = 100; // ClickUp API page size limit while (hasMore) { const url = `https://api.clickup.com/api/v2/list/${listId}/task?archived=false&page=${page}&order_by=created&reverse=true&subtasks=true&include_closed=true`; // Note: Removed limit=PAGE_SIZE as ClickUp might ignore it with pagination. // The presence of more tasks is determined by the response. try { const response = await fetch(url, { method: 'GET', headers }); if (!response.ok) { // Attempt to read error body for more details let errorBody = ''; try { errorBody = await response.text(); } catch (e) { /* Ignore if reading body fails */ } throw new Error(`Failed to get tasks from list ${listId} (Page ${page}): ${response.status} ${response.statusText}. Body: ${errorBody}`); } const data = await response.json(); const tasks = data.tasks || []; allTasks = [...allTasks, ...tasks]; // ClickUp's pagination: if 'last_page' is false or tasks count equals expected, assume more pages. // A safer check might be just checking if the returned task count is less than expected, // but ClickUp docs suggest checking a 'last_page' field (if it exists) or similar. // Let's assume if fewer than PAGE_SIZE tasks are returned, it's the last page. if (!data.tasks || tasks.length < PAGE_SIZE) { // Adjust if ClickUp API provides a better indicator hasMore = false; } else { page++; } } catch (error) { // Stop pagination for this list on error to prevent infinite loops hasMore = false; // Re-throw the error so it's caught by getTasksFromLists throw error; } } return allTasks; }, processTasksForStats(tasks) { const tasksWithStatus = tasks.filter(task => task.status); // Đếm các task có status "🌼 UPLEVEL" cho training level // Lọc các task chính có status UPLEVEL (không bao gồm subtask) const uplevelTasks = tasks.filter(task => { if (!task.status) return false; // Kiểm tra xem có phải subtask không const isSubtask = task.parent !== undefined && task.parent !== null; // Nếu là subtask thì bỏ qua if (isSubtask) return false; const statusName = (task.status.status || task.status || '').toLowerCase(); return statusName.includes('uplevel'); }); // Đếm các task có status "🌼 DONE" cho số ngày tuân thủ // Lọc các task chính có status DONE (không bao gồm subtask) const doneTasks = tasks.filter(task => { if (!task.status) return false; // Kiểm tra xem có phải subtask không const isSubtask = task.parent !== undefined && task.parent !== null; // Nếu là subtask thì bỏ qua if (isSubtask) return false; // Lấy statusName và đảm bảo nó là string để tránh lỗi 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 = ''; } } // Tìm kiếm cụ thể status có chứa "DONE" hoặc "CLOSED" (không phân biệt chữ hoa/thường) const isDone = statusName.includes('done') || statusName.includes('closed'); return isDone; }); // Đảm bảo trainingLevel không vượt quá 10 và là số nguyên // Sử dụng độ dài của mảng uplevelTasks để tính toán cấp độ rèn luyện const uplevelTaskCount = uplevelTasks.length; // Cấp độ rèn luyện = chính xác số lượng task UPLEVEL const trainingLevel = uplevelTaskCount; // Số ngày tuân thủ = số lượng task chính có status chứa "done" const daysFollowingHabits = doneTasks.length; return { daysFollowingHabits: daysFollowingHabits, // Số lượng task chính có status chứa "done" trainingLevel: trainingLevel, // Số lượng task chính có status chứa "uplevel" scholarshipAmount: daysFollowingHabits * 10000 // Tính học bổng dựa theo số ngày (10,000 VND mỗi ngày) - Logic này có thể cần xem xét lại sau }; }, // Add comment to a specific task when a milestone is completed async addMilestoneComment(credentials, taskId, milestone) { if (!credentials.apiKey || !taskId) { throw new Error('API Key and Task ID are required for commenting'); } const headers = { 'Authorization': credentials.apiKey, 'Content-Type': 'application/json' }; try { // Format milestone data for the comment // Updated milestone check for 365 days const scholarshipAmount = milestone.days >= 365 ? '10.000.000' : milestone.days >= 240 ? '5.000.000' : milestone.days >= 180 ? '3.000.000' : milestone.days >= 120 ? '2.000.000' : milestone.days >= 90 ? '1.000.000' : milestone.days >= 60 ? '600.000' : milestone.days >= 30 ? '400.000' : '200.000'; // Create a nicely formatted comment const commentText = `🎉 **MILESTONE ACHIEVED!** 🎉\n\n` + `👉 **${milestone.days} days** of habit compliance completed!\n` + `💰 Scholarship amount: **${scholarshipAmount} VND**\n` + `📅 Achieved on: ${new Date().toLocaleString('vi-VN')}\n\n` + `Congratulations on this achievement! Keep up the great work.`; // Make API request to add comment const response = await fetch(`https://api.clickup.com/api/v2/task/${taskId}/comment`, { method: 'POST', headers, body: JSON.stringify({ comment_text: commentText, notify_all: true }) }); if (!response.ok) { const errorData = await response.json(); throw new Error(`Failed to add comment: ${response.status} ${response.statusText} - ${JSON.stringify(errorData)}`); } const data = await response.json(); return data; } catch (error) { throw new Error(`Failed to add milestone comment: ${error.message}`); } }, // Update custom field value for a 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 response = await fetch(`https://api.clickup.com/api/v2/task/${taskId}/field/${fieldId}`, { method: 'POST', headers, body: JSON.stringify({ value }) }); if (!response.ok) { const errorData = await response.json(); throw new Error(`Failed to update field: ${response.status} ${response.statusText} - ${JSON.stringify(errorData)}`); } const data = await response.json(); return data; } catch (error) { throw new Error(`Failed to update custom field: ${error.message}`); } }, // Create a new task with tags and custom fields async createTaskWithDetails(credentials, listId, taskName, taskDescription, tagName, customFieldId, customFieldValue) { if (!credentials.apiKey || !listId || !taskName) { throw new Error('API Key, List ID, and Task Name are required for creating a task'); } const headers = { 'Authorization': credentials.apiKey, 'Content-Type': 'application/json' }; const taskData = { name: taskName, description: taskDescription || '', // Optional description tags: tagName ? [tagName] : [], // Add tag if provided custom_fields: [] }; if (customFieldId && customFieldValue) { taskData.custom_fields.push({ id: customFieldId, value: customFieldValue }); } try { const response = await fetch(`https://api.clickup.com/api/v2/list/${listId}/task`, { method: 'POST', headers, body: JSON.stringify(taskData) }); const responseBodyText = await response.text(); if (!response.ok) { let errorData; try { errorData = JSON.parse(responseBodyText); } catch (e) { errorData = responseBodyText; } throw new Error(`Failed to create task: ${response.status} ${response.statusText} - ${JSON.stringify(errorData)}`); } let data; try { data = JSON.parse(responseBodyText); } catch (e) { throw new Error('Failed to parse successful task creation response from ClickUp.'); } return data; } catch (error) { throw new Error(`Failed to create task with details: ${error.message}`); } } };27:T525,import React from 'react'; import ReactDOM from 'react-dom/client'; import { RewardLadder } from 'RewardLadder'; import { applyGlobalStyles } from 'styles'; // Add custom font styles const fontStyles = document.createElement('style'); fontStyles.textContent = ` @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Open+Sans:wght@400;600&display=swap'); `; document.head.appendChild(fontStyles); // Apply global styles applyGlobalStyles(); // Tạo container nếu chưa tồn tại let container = document.getElementById('renderDiv'); if (!container) { container = document.createElement('div'); container.id = 'renderDiv'; document.body.appendChild(container); } // Render ứng dụng const root = ReactDOM.createRoot(container); // Check for saved credentials to determine if we should auto-sync const hasValidCredentials = () => { try { const savedCredentials = localStorage.getItem('clickupCredentials'); if (!savedCredentials) return false; const credentials = JSON.parse(savedCredentials); return credentials.apiKey && (credentials.spaceId || credentials.listIds?.length > 0); } catch (e) { // console.error('Error checking credentials:', e); return false; } }; root.render();28: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} ); }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:T3a88,import React, { useState, useEffect } from 'react'; import { clickupService } from 'clickupService'; export const SyncForm = ({ onSyncComplete, onMilestoneHistoryReset }) => { const [password, setPassword] = useState(''); const [isAuthenticated, setIsAuthenticated] = useState(false); const [passwordError, setPasswordError] = useState(''); // Load sync state from localStorage if available const [syncState, setSyncState] = useState(() => { const savedSyncState = localStorage.getItem('clickupSyncState'); return savedSyncState ? JSON.parse(savedSyncState) : { status: 'idle', message: '', // progress: 0 // Progress bar removed }; }); const [formData, setFormData] = useState(() => { // Try to load saved credentials from localStorage const savedCredentials = localStorage.getItem('clickupCredentials'); if (savedCredentials) { try { return JSON.parse(savedCredentials); } catch (e) { return { apiKey: '', workspace: '', listIds: [''], milestoneTaskId: '', scholarshipFieldId: '', newTaskListId: '', tagName: '', imageUrlCustomFieldId: '' }; } } // Return default credentials if nothing saved return { apiKey: '', workspace: '', listIds: [''], milestoneTaskId: '', scholarshipFieldId: '', newTaskListId: '', tagName: '', imageUrlCustomFieldId: '' }; }); const handlePasswordChange = (e) => { setPassword(e.target.value); if (passwordError) { setPasswordError(''); } }; const handlePasswordSubmit = () => { if (password === '1') { setIsAuthenticated(true); setPasswordError(''); } else { setPasswordError('Mật khẩu không đúng. Vui lòng thử lại.'); } }; // Handle form field changes const handleChange = (e) => { const { name, value } = e.target; // Special handling for List ID array if (name.startsWith('listId-')) { const index = parseInt(name.split('-')[1], 10); const newListIds = [...formData.listIds]; newListIds[index] = value; setFormData({ ...formData, listIds: newListIds }); } else { // Handle other form fields normally setFormData({ ...formData, [name]: value }); } }; // Add a new List ID input field const handleAddListId = () => { setFormData({ ...formData, listIds: [...formData.listIds, ''] }); }; // Remove a List ID input field const handleRemoveListId = (index) => { // Prevent removing the last input field if (formData.listIds.length <= 1) return; const newListIds = formData.listIds.filter((_, i) => i !== index); setFormData({ ...formData, listIds: newListIds }); }; // Handle form submission and sync process const handleSync = async () => { // Filter out empty list IDs before validation const validListIds = formData.listIds.filter(id => id.trim() !== ''); // Kiểm tra các trường bắt buộc (API Key and at least one List ID) if (!formData.apiKey || validListIds.length === 0) { setSyncState({ status: 'error', message: 'Vui lòng điền API Key và ít nhất một List ID', // progress: 0 // Progress bar removed }); return; } // Save credentials (including the filtered list IDs) to localStorage const credentialsToSave = { ...formData, listIds: validListIds }; localStorage.setItem('clickupCredentials', JSON.stringify(credentialsToSave)); // Bắt đầu quá trình đồng bộ setSyncState({ status: 'syncing', message: 'Đang tải dữ liệu mới...', // Changed message // progress: 10 // Progress bar removed }); try { // Gọi API thực tế đến ClickUp setSyncState(prev => ({ ...prev, message: 'Đang xác thực với ClickUp API...', // progress: 20 // Progress bar removed })); // Lấy dữ liệu từ ClickUp setSyncState(prev => ({ ...prev, message: `Đang lấy dữ liệu từ ClickUp...`, // progress: 40 // Progress bar removed })); // Pass the credentials with potentially multiple list IDs const data = await clickupService.fetchData(credentialsToSave); setSyncState(prev => ({ ...prev, message: 'Đang xử lý dữ liệu...', // progress: 70 // Progress bar removed })); // Data received, now update state setSyncState(prev => ({ ...prev, message: 'Đang hoàn tất quá trình...', // progress: 90 // Progress bar removed })); // Thông báo thành công setSyncState({ status: 'success', message: 'Đồng bộ hóa thành công!', // progress: 100 // Progress bar removed }); // Save sync state to localStorage localStorage.setItem('clickupSyncState', JSON.stringify({ status: 'success', message: 'Đồng bộ hóa thành công!', // progress: 100 // Progress bar removed })); // 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 // Progress bar removed }); // Remove reference to setShowSettings since it's not defined in this component }, 5000); } catch (error) { const errorState = { status: 'error', message: error.message || 'Đồng bộ hóa thất bại. Vui lòng thử lại.', // progress: 0 // Progress bar removed }; setSyncState(errorState); // Save error state to localStorage localStorage.setItem('clickupSyncState', JSON.stringify(errorState)); } }; if (!isAuthenticated) { return (

Nhập mật khẩu để tiếp tục: e.key === 'Enter' && handlePasswordSubmit()} style={{ padding: '10px', marginRight: '10px', borderRadius: '4px', border: '1px solid #FFD700', backgroundColor: 'rgba(255,255,255,0.1)', color: '#FFFFFF' }} /> {passwordError && (

{passwordError}

)}

); } return (

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

API Key *

Workspace ID *

List ID (Task Thói Quen) {/* Remove Add Button */}

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

{formData.listIds.length > 1 && ( )}

))}

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

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

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

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

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

{/* Temporary button to reset milestone task creation history */} {syncState.status !== 'idle' && (

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

{syncState.message}

{syncState.status === 'syncing' && ( <>{/* Progress bar removed */} )} {/* Removed sync-progress-bar and sync-progress-fill */}

)}

); }; export default SyncForm;2b:T152a,import React, { useState, useEffect } from 'react'; export const HabitStats = ({ stats = {} }) => { // Always get the most current stats from props with fallbacks const { daysFollowingHabits = 0, scholarshipAmount = 0 } = stats; // Calculate and format scholarship amount based on milestones const milestones = [10, 30, 60, 90, 120, 180, 240, 360]; const scholarshipAmounts = [200000, 400000, 600000, 1000000, 2000000, 3000000, 5000000, 10000000]; // Calculate total scholarship amount from all achieved milestones let calculatedScholarshipAmount = 0; for (let i = 0; i < milestones.length; i++) { if (daysFollowingHabits >= milestones[i]) { calculatedScholarshipAmount += scholarshipAmounts[i]; } } const formattedScholarshipAmount = calculatedScholarshipAmount.toLocaleString('vi-VN'); return (

{/* Gold accent line at top */}

{/* Training Level - Now centered */} {/* Days Following Habits */}

{/* Calendar Icon */}

📅

Số Ngày Tuân Thủ

{daysFollowingHabits}

{/* Vertical Divider */}

{/* Scholarship Amount */}

{/* Money Icon */}

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

{formattedScholarshipAmount} VND

{/* Gold accent line at bottom */}

); };2c:T4e3f,import React, { useState, useEffect, useCallback } from 'react'; import { HabitStats } from 'HabitStats'; import { TimelineMilestones } from 'TimelineMilestones'; import SyncForm from 'SyncForm'; import { clickupService } from 'clickupService'; export const RewardLadder = ({ autoSync = false }) => { const [activeTab, setActiveTab] = useState('habits'); const [activeSubTab, setActiveSubTab] = useState('days'); const [showSettings, setShowSettings] = useState(false); const [timelineKey, setTimelineKey] = useState(0); // State for TimelineMilestones key const [syncState, setSyncState] = useState({ status: 'idle', message: '', progress: 0 }); const [lastSyncTime, setLastSyncTime] = useState(null); const [settings, setSettings] = useState(null); const [habitStats, setHabitStats] = useState({ daysFollowingHabits: 0, trainingLevel: 0, averageHappiness: 0, scholarshipAmount: 0, }); // State to track the last successfully synced scholarship amount to ClickUp const [lastSyncedScholarshipToClickUp, setLastSyncedScholarshipToClickUp] = useState(() => { return localStorage.getItem('lastSyncedScholarshipToClickUp') || null; }); const syncClickUpData = useCallback(async (isInitialSync = false) => { if (!settings) { // console.error('No settings available for sync'); return; } setSyncState({ status: 'syncing', message: 'Đang tải dữ liệu mới...', // progress: 10 // Progress bar removed }); try { const data = await clickupService.fetchData(settings); handleSyncComplete(data); const now = new Date(); setLastSyncTime(now); localStorage.setItem('lastSyncTime', now.toISOString()); setSyncState({ status: 'success', message: 'Sync completed successfully!', // progress: 100 // Progress bar removed }); setTimeout(() => { setSyncState({ status: 'idle', message: ''}); // Progress bar removed }, 3000); } catch (error) { // console.error('Sync failed:', error); setSyncState({ status: 'error', message: error.message || 'Sync failed. Please try again.', // progress: 0 // Progress bar removed }); } }, [settings]); useEffect(() => { const loadSavedData = () => { const savedHabitStats = localStorage.getItem('habitStats'); // Luôn hiển thị dữ liệu từ localStorage ngay lập tức để UX mượt mà if (savedHabitStats) { try { const parsedStats = JSON.parse(savedHabitStats); setHabitStats(parsedStats); // console.log('Loaded habit stats from localStorage:', parsedStats); } catch (error) { // console.error('Failed to parse saved habit stats:', error); } } // Kiểm tra điều kiện đồng bộ mới: // 1. Có bật autoSync // 2. Có thông tin xác thực hợp lệ const hasValidCredentials = () => { const savedCredentials = localStorage.getItem('clickupCredentials'); if (!savedCredentials) return false; try { const credentials = JSON.parse(savedCredentials); return credentials.apiKey && (credentials.spaceId || credentials.listIds?.length > 0); } catch (e) { return false; } }; if (autoSync && hasValidCredentials()) { const lastSyncTime = localStorage.getItem('lastSyncTime'); const now = new Date(); const shouldSync = !lastSyncTime || (now - new Date(lastSyncTime)) > 3600000; // 1 giờ if (shouldSync) { // console.log('Auto-syncing data...'); syncClickUpData(true); } else { // console.log(`Last sync was at ${lastSyncTime}, skip auto-sync`); } } }; loadSavedData(); // Always try to sync if we have valid credentials const hasValidCredentials = () => { const savedCredentials = localStorage.getItem('clickupCredentials'); if (!savedCredentials) return false; try { const credentials = JSON.parse(savedCredentials); return credentials.apiKey && credentials.spaceId; } catch (e) { return false; } }; if (autoSync && hasValidCredentials()) { // console.log('Auto-syncing data on load...'); syncClickUpData(true); } }, [autoSync, syncClickUpData]); useEffect(() => { const loadSettings = () => { const savedSettings = localStorage.getItem('clickupCredentials'); if (savedSettings) { try { const parsedSettings = JSON.parse(savedSettings); setSettings(parsedSettings); // console.log('Settings loaded:', parsedSettings); return parsedSettings; } catch (error) { // console.error('Failed to parse saved settings:', error); } } return null; }; const initialSettings = loadSettings(); if (autoSync) { if (initialSettings?.apiKey && (initialSettings?.spaceId || initialSettings?.listIds?.length > 0)) { // console.log('Auto-syncing data on load with settings:', { // hasApiKey: !!initialSettings.apiKey, // hasSpaceId: !!initialSettings.spaceId, // hasListIds: initialSettings.listIds?.length > 0 // }); syncClickUpData(true); } else { // console.log('Auto-sync skipped. Missing required settings:', { // hasApiKey: !!initialSettings?.apiKey, // hasSpaceId: !!initialSettings?.spaceId, // hasListIds: initialSettings?.listIds?.length > 0 // }); } } }, [autoSync]); useEffect(() => { if (autoSync) { const syncInterval = setInterval(() => { const currentTime = new Date(); if (!lastSyncTime || (currentTime - lastSyncTime) >= 3600000) { // 3600000 ms = 1 hour // console.log('Auto-syncing after 1 hour interval'); syncClickUpData(false); } }, 3600000); return () => clearInterval(syncInterval); } }, [autoSync, lastSyncTime, syncClickUpData]); // Added syncClickUpData to dependency array // useEffect to sync scholarshipAmount to ClickUp whenever it changes useEffect(() => { const updateScholarshipToClickUp = async () => { if (!settings || !settings.apiKey || !settings.milestoneTaskId || !settings.scholarshipFieldId) { // console.log('Skipping scholarship update to ClickUp: Missing credentials or config.'); return; } const currentScholarship = habitStats.scholarshipAmount; // Only update if the scholarship amount has changed from the last synced value if (currentScholarship !== null && currentScholarship.toString() !== lastSyncedScholarshipToClickUp) { // console.log(`New scholarship amount detected: ${currentScholarship}. Last synced: ${lastSyncedScholarshipToClickUp}. Updating ClickUp.`); try { await clickupService.updateCustomField( settings, settings.milestoneTaskId, settings.scholarshipFieldId, currentScholarship ); // console.log(`Successfully updated scholarship field in ClickUp to ${currentScholarship} VND`); localStorage.setItem('lastSyncedScholarshipToClickUp', currentScholarship.toString()); setLastSyncedScholarshipToClickUp(currentScholarship.toString()); } catch (error) { // console.error('Error updating scholarship field in ClickUp:', error); // Optionally, you might want to retry or notify the user } } else { // console.log(`Scholarship amount (${currentScholarship}) has not changed or is null. No ClickUp update needed.`); } }; // Debounce the update to avoid rapid firing if scholarshipAmount changes quickly const debounceTimeout = setTimeout(() => { if (habitStats.scholarshipAmount !== null && habitStats.scholarshipAmount !== undefined) { updateScholarshipToClickUp(); } }, 1000); // 1-second debounce return () => clearTimeout(debounceTimeout); }, [habitStats.scholarshipAmount, settings, lastSyncedScholarshipToClickUp]); // Hàm xử lý đồng bộ thủ công const handleManualSync = () => { // console.log('Bắt đầu đồng bộ thủ công'); // Kiểm tra xem có thông tin xác thực đã lưu không const savedCredentials = localStorage.getItem('clickupCredentials'); if (!savedCredentials) { alert('Bạn cần cài đặt thông tin ClickUp trước. Vui lòng nhấn vào nút Cài đặt.'); return; } // Mở modal cài đặt nếu chưa có thông tin try { const credentials = JSON.parse(savedCredentials); // Bắt đầu quá trình đồng bộ setSyncState({ status: 'syncing', message: 'Đang tải dữ liệu mới...', // progress: 10 // Progress bar removed }); // Gọi clickupService để lấy dữ liệu clickupService.fetchData(credentials) .then(data => { // console.log('Nhận dữ liệu từ ClickUp:', data); // Xử lý dữ liệu nhận được handleSyncComplete(data); // Cập nhật trạng thái thành công setSyncState({ status: 'success', message: 'Đồng bộ hóa thành công!', // progress: 100 // Progress bar removed }); // Tự động ẩn thông báo sau 5 giây setTimeout(() => { setSyncState({ status: 'idle', message: '', // progress: 0 // Progress bar removed }); }, 5000); }) .catch(error => { // console.error('Lỗi khi đồng bộ:', error); setSyncState({ status: 'error', message: error.message || 'Đồng bộ hóa thất bại. Vui lòng thử lại.', // progress: 0 // Progress bar removed }); }); } catch (error) { // console.error('Lỗi khi phân tích thông tin xác thực:', error); setSyncState({ status: 'error', message: 'Thông tin xác thực không hợp lệ. Vui lòng cấu hình lại.', // progress: 0 // Progress bar removed }); } }; const handleMilestoneHistoryReset = () => { // Items are already cleared by SyncForm, but this ensures they are cleared // if called from elsewhere or if SyncForm's part is removed later. localStorage.removeItem('createdMilestoneTasks'); localStorage.removeItem('commentedMilestones'); localStorage.removeItem('shownMilestonePopups'); // Change the key of TimelineMilestones to force a re-mount setTimelineKey(prevKey => prevKey + 1); // Optionally, trigger a message or a re-sync if necessary setSyncState({ // Show a temporary message on RewardLadder's sync status status: 'success', message: 'Lịch sử cột mốc đã được làm mới.', // progress: 100 // Progress bar removed }); setTimeout(() => { setSyncState(prev => ({ ...prev, status: 'idle', message: '' })); // Progress bar removed }, 3000); }; return (

{showSettings && (

Cài đặt Đồng bộ

{/* SyncForm component is called directly here, without container and title */}

)} {/* Hiển thị thông báo trạng thái đồng bộ */} {syncState.status !== 'idle' && (

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

{syncState.message}

{syncState.status === 'syncing' && ( <> {/* Progress bar removed */} )} {/* Removed sync-progress-bar and sync-progress-fill */}

)}

{/* Content title removed as requested */}

{/* Include the HabitStats component */}

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

setActiveSubTab('days')} style={{ padding: '10px 16px', border: activeSubTab === 'days' ? 'none' : '1px solid rgba(255, 215, 0, 0.3)', borderRadius: '8px', background: activeSubTab === 'days' ? 'linear-gradient(135deg, #FFD700, #FFA500)' : 'rgba(0,0,0,0.2)', color: activeSubTab === 'days' ? '#2C1810' : '#FFD700', fontSize: '12px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.5px', boxShadow: activeSubTab === 'days' ? '0 4px 12px rgba(255, 215, 0, 0.4)' : 'none', minWidth: '160px', whiteSpace: 'nowrap', textAlign: 'center', cursor: 'pointer' }} > Số Ngày Tuân Thủ

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

{activeSubTab === 'days' ? ( ) : activeSubTab === 'badges' ? (

Huy Hiệu Đặc Biệt

Tab này hiện đang trống theo yêu cầu.

) : (

AA Tab Content

This tab is currently empty as requested.

)}

); // Hàm xử lý khi quá trình đồng bộ hoàn tất async function handleSyncComplete(data) { // console.log('Received sync data in RewardLadder:', data); if (data && data.habitStats) { // console.log('Received habit stats:', data.habitStats); if (Object.keys(data.habitStats).length > 0) { const daysFollowingHabits = data.habitStats.daysFollowingHabits || 0; const trainingLevel = data.habitStats.trainingLevel || 0; // Calculate scholarship amount based on milestones const milestones = [10, 30, 60, 90, 120, 180, 240, 360]; const scholarshipAmounts = [200000, 400000, 600000, 1000000, 2000000, 3000000, 5000000, 10000000]; let totalScholarship = 0; for (let i = 0; i < milestones.length; i++) { if (daysFollowingHabits >= milestones[i]) { totalScholarship += scholarshipAmounts[i]; } else { break; } } const updatedHabitStats = { daysFollowingHabits: daysFollowingHabits, trainingLevel: trainingLevel, averageHappiness: data.habitStats.averageHappiness || 0, scholarshipAmount: totalScholarship }; // Lưu dữ liệu vào localStorage localStorage.setItem('habitStats', JSON.stringify(updatedHabitStats)); setHabitStats(updatedHabitStats); // console.log('Updated habit stats:', updatedHabitStats); setTimeout(() => { setShowSettings(false); }, 2000); } else { // console.error('ERROR: Không nhận được dữ liệu habitStats hợp lệ:', data); } } else { // console.error('ERROR: Dữ liệu đồng bộ không hợp lệ hoặc thiếu habitStats:', data); } // The scholarship update to ClickUp is now handled by the new useEffect. // We can remove the direct call to updateCustomField from here to avoid duplication. } };2d:T7b94,import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react'; import { MilestoneCelebration } from 'MilestoneCelebration'; // 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 = ({ currentDays = 0 }) => { const containerRef = useRef(null); // Function to get the appropriate image for each milestone const getMilestoneImage = (index) => { const imageMap = { 0: "https://play.rosebud.ai/assets/1.gif?Y815", 1: "https://play.rosebud.ai/assets/2.gif?AZmZ", 2: "https://play.rosebud.ai/assets/3.gif?pZcc", 3: "https://play.rosebud.ai/assets/4.gif?fkGc", 4: "https://play.rosebud.ai/assets/5.gif?o8ne", 5: "https://play.rosebud.ai/assets/6.gif?TRC6", 6: "https://play.rosebud.ai/assets/7.gif?z2hl", 7: "https://play.rosebud.ai/assets/8.gif?Mr4K" }; return imageMap[index] || "https://play.rosebud.ai/assets/1.gif?Y815"; }; // State for celebration popup const [celebrationOpen, setCelebrationOpen] = useState(false); const [celebratedMilestone, setCelebratedMilestone] = useState(null); const [shownMilestonePopups, setShownMilestonePopups] = useState(() => { const saved = localStorage.getItem('shownMilestonePopups'); return saved ? JSON.parse(saved) : []; }); // Define milestones with useMemo to prevent recreating on each render const milestones = useMemo(() => [ { days: 10, position: 0, scholarship: 200000 }, // First milestone at position 0 { days: 30, position: 30, scholarship: 400000 }, // Second milestone { days: 60, position: 60, scholarship: 600000 }, // Third milestone { days: 90, position: 90, scholarship: 1000000 }, // Fourth milestone { days: 120, position: 120, scholarship: 2000000 },// Fifth milestone { days: 180, position: 150, scholarship: 3000000 },// Sixth milestone { days: 240, position: 180, scholarship: 5000000 },// Seventh milestone { days: 360, position: 210, scholarship: 10000000 }// Eighth milestone ], []); // Check if we need to show celebration when currentDays changes useEffect(() => { if (currentDays <= 0) return; // Find all milestones achieved but not yet shown in popup const newlyAchievedUnshownMilestones = milestones.filter( m => currentDays >= m.days && !shownMilestonePopups.includes(m.days) ); if (newlyAchievedUnshownMilestones.length > 0) { // Get the highest (most recent) of these to celebrate const milestoneToCelebrate = newlyAchievedUnshownMilestones.sort((a, b) => b.days - a.days)[0]; console.log('[TimelineMilestones] Milestone to celebrate:', milestoneToCelebrate); setCelebratedMilestone(milestoneToCelebrate); setCelebrationOpen(true); // Add to shown list and update localStorage const updatedShownPopups = [...shownMilestonePopups, milestoneToCelebrate.days]; setShownMilestonePopups(updatedShownPopups); localStorage.setItem('shownMilestonePopups', JSON.stringify(updatedShownPopups)); // Add level up effect const levelUpEffect = () => { // Create confetti particles const colors = ['#FFD700', '#FFA500', '#FFFFFF', '#FFE55C']; const particleCount = 100; for (let i = 0; i < particleCount; i++) { const particle = document.createElement('div'); particle.style.position = 'fixed'; particle.style.width = `${Math.random() * 8 + 4}px`; particle.style.height = particle.style.width; particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; particle.style.borderRadius = '50%'; particle.style.left = `${50 + (Math.random() - 0.5) * 20}%`; particle.style.top = '50%'; particle.style.zIndex = '9999'; particle.style.opacity = '0'; particle.style.transform = 'translate(-50%, -50%) scale(0)'; particle.style.boxShadow = '0 0 5px rgba(255, 215, 0, 0.8)'; document.body.appendChild(particle); // Animate particle const angle = Math.random() * Math.PI * 2; const velocity = 5 + Math.random() * 10; const lifetime = 2000 + Math.random() * 1000; particle.animate([ { opacity: 0, transform: 'translate(-50%, -50%) scale(0)', offset: 0 }, { opacity: 1, transform: 'translate(-50%, -50%) scale(1)', offset: 0.1 }, { opacity: 1, transform: `translate( calc(-50% + ${Math.cos(angle) * velocity}vw), calc(-50% + ${Math.sin(angle) * velocity}vh) ) scale(0.5)`, offset: 0.8 }, { opacity: 0, transform: `translate( calc(-50% + ${Math.cos(angle) * velocity * 1.5}vw), calc(-50% + ${Math.sin(angle) * velocity * 1.5}vh) ) scale(0)`, offset: 1 } ], { duration: lifetime, easing: 'cubic-bezier(0.1, 0.8, 0.2, 1)' }); // Remove particle after animation setTimeout(() => { particle.remove(); }, lifetime); } // Add glow effect const glow = document.createElement('div'); glow.style.position = 'fixed'; glow.style.left = '50%'; glow.style.top = '50%'; glow.style.width = '0'; glow.style.height = '0'; glow.style.borderRadius = '50%'; glow.style.backgroundColor = 'rgba(255, 215, 0, 0.2)'; glow.style.transform = 'translate(-50%, -50%)'; glow.style.zIndex = '9998'; glow.style.boxShadow = '0 0 50px 30px rgba(255, 215, 0, 0.3)'; document.body.appendChild(glow); glow.animate([ { width: '0', height: '0', opacity: 1 }, { width: '200vw', height: '200vh', opacity: 0 } ], { duration: 1000, easing: 'ease-out' }); setTimeout(() => glow.remove(), 1000); // TODO: Add sound effect here // new Audio('level-up.mp3').play(); }; levelUpEffect(); // console.log('Celebration popup triggered for days:', currentDays); // ClickUp Integrations: Comment and Task Creation const highestCompletedMilestone = milestoneToCelebrate; // Use the celebrated milestone console.log('[TimelineMilestones] Highest completed milestone for ClickUp integration:', highestCompletedMilestone); try { const savedCredentials = localStorage.getItem('clickupCredentials'); console.log('[TimelineMilestones] Raw saved credentials from localStorage:', savedCredentials); if (savedCredentials) { const credentials = JSON.parse(savedCredentials); console.log('[TimelineMilestones] Parsed credentials for ClickUp:', credentials); if (credentials.apiKey) { const milestoneImageIndex = milestones.findIndex(m => m.days === highestCompletedMilestone.days); const milestoneImageUrl = getMilestoneImage(milestoneImageIndex); console.log('[TimelineMilestones] Milestone image URL:', milestoneImageUrl); // 1. Add Comment to specified task if (credentials.milestoneTaskId) { console.log('[TimelineMilestones] Attempting to add comment. Task ID:', credentials.milestoneTaskId); const milestoneDataForComment = { days: highestCompletedMilestone.days, imageUrl: milestoneImageUrl }; const commentedMilestones = JSON.parse(localStorage.getItem('commentedMilestones') || '[]'); console.log('[TimelineMilestones] Previously commented milestones:', commentedMilestones); if (!commentedMilestones.includes(highestCompletedMilestone.days)) { console.log('[TimelineMilestones] Adding new comment for milestone:', highestCompletedMilestone.days); import('clickupService').then(({ clickupService }) => { clickupService.addMilestoneComment(credentials, credentials.milestoneTaskId, milestoneDataForComment) .then(response => { console.log('[TimelineMilestones] Successfully added milestone comment to ClickUp task:', response); commentedMilestones.push(highestCompletedMilestone.days); localStorage.setItem('commentedMilestones', JSON.stringify(commentedMilestones)); }) .catch(error => { console.error('[TimelineMilestones] Failed to add milestone comment to ClickUp task:', error); }); }); } else { console.log('[TimelineMilestones] Milestone comment already added for:', highestCompletedMilestone.days); } } else { console.log('[TimelineMilestones] Milestone Task ID for comments not configured. Skipping comment.'); } // 2. Create a new Task for the milestone if (credentials.newTaskListId) { console.log('[TimelineMilestones] Attempting to create task. New Task List ID:', credentials.newTaskListId); const now = new Date(); const formattedTime = `${now.getHours()}:${String(now.getMinutes()).padStart(2, '0')} ${String(now.getSeconds()).padStart(2, '0')}s ${now.getDate()}/${now.getMonth() + 1}/${now.getFullYear()}`; const taskName = `2.HOC - Cột Mốc ${highestCompletedMilestone.days} Ngày Tuân Thủ - ${formattedTime}`; const taskDescription = `Congratulations on achieving the ${highestCompletedMilestone.days}-day milestone!\n` + `Scholarship: ${highestCompletedMilestone.scholarship.toLocaleString()} VND.\n` + `Image: ${milestoneImageUrl}\n\n` + `This task was automatically created upon reaching the milestone.`; const createdMilestoneTasks = JSON.parse(localStorage.getItem('createdMilestoneTasks') || '[]'); console.log('[TimelineMilestones] Previously created milestone tasks:', createdMilestoneTasks); if (!createdMilestoneTasks.includes(highestCompletedMilestone.days)) { console.log('[TimelineMilestones] Creating new task for milestone:', highestCompletedMilestone.days); import('clickupService').then(({ clickupService }) => { clickupService.createTaskWithDetails( credentials, credentials.newTaskListId, taskName, taskDescription, credentials.tagName || null, credentials.imageUrlCustomFieldId || null, milestoneImageUrl ) .then(response => { console.log('[TimelineMilestones] Successfully created milestone task in ClickUp:', response); createdMilestoneTasks.push(highestCompletedMilestone.days); localStorage.setItem('createdMilestoneTasks', JSON.stringify(createdMilestoneTasks)); }) .catch(error => { console.error('[TimelineMilestones] Failed to create milestone task in ClickUp:', error); }); }); } else { console.log('[TimelineMilestones] Milestone task already created for:', highestCompletedMilestone.days); } } else { console.log('[TimelineMilestones] New Task List ID for milestone task creation not configured. Skipping task creation.'); } } else { console.log('[TimelineMilestones] ClickUp API Key not found in credentials. Skipping ClickUp integrations.'); } } else { console.log('[TimelineMilestones] No ClickUp credentials found in localStorage. Skipping ClickUp integrations.'); } } catch (error) { console.error('[TimelineMilestones] Error during ClickUp integrations (comment/task):', error); } } }, [currentDays, milestones, shownMilestonePopups]); // Add this useEffect to log when the component re-renders useEffect(() => { // console.log('TimelineMilestones component re-rendered with currentDays:', currentDays); }); // Close celebration popup handler with useCallback const handleCloseCelebration = useCallback(() => { setCelebrationOpen(false); }, []); // Auto-scroll to nearest milestone on mount and when currentDays changes useEffect(() => { if (!containerRef.current) return; // Find the active milestone (next one to achieve) const nextMilestoneIndex = milestones.findIndex(m => currentDays < m.days); // If player has completed all milestones, target the last one // Otherwise, target the next milestone they're working towards const targetIndex = nextMilestoneIndex === -1 ? milestones.length - 1 : Math.max(0, nextMilestoneIndex); // Get the element that corresponds to this milestone // The timeline-track is child 0, so the milestone item for targetIndex is at child targetIndex + 1 const targetElement = containerRef.current.children[targetIndex + 1]; if (targetElement) { // Delay the scroll slightly to ensure the DOM is fully loaded setTimeout(() => { // Use scrollIntoView with smooth behavior for better UX targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' }); // Add a slight highlight effect to make it clear which milestone is targeted targetElement.style.transition = 'box-shadow 0.5s ease-in-out'; targetElement.style.boxShadow = '0 0 15px rgba(255, 215, 0, 0.7)'; // Remove the highlight effect after a moment setTimeout(() => { targetElement.style.boxShadow = 'none'; }, 1500); }, 500); // Increased delay for more reliable scrolling } }, [currentDays, milestones]); return (

{/* Central Timeline */}

{/* Gold glow effect */}

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

{/* Circle on the timeline */}

{/* Content card */}

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

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

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

🔒

)}

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

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

{/* Content above the number */}

{isCompleted ? ✨ : <> {isActive ? '🔥' : '🔥'} Mục tiêu }

{milestone.days}

Ngày

{/* Content below the number */}

{isCompleted ? '⭐' : ''}

{/* Progress bar in separate row */}

{/* Progress bar with percentage inside */}

{/* Percentage text inside progress bar */}

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

{/* Enhanced Reward information */}

{/* Reward image with enhanced styling */}

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

)}

{/* Reward description with enhanced styling */}

{/* Reward value */}

{milestone.scholarship.toLocaleString()} VND

{/* Reward description */}

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

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

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

); }; // Export styles for possible reuse in other components export const timelineStyles = styles;2e:T1d14,import React, { useState, useEffect } from 'react'; 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'); }, 500); return () => { clearTimeout(enterTimer); }; } }, [isOpen]); if (!isOpen) return null; // Calculate appropriate scholarship amount based on milestone days const scholarshipAmount = (milestone?.days >= 360 ? '10.000.000' : milestone?.days >= 240 ? '5.000.000' : milestone?.days >= 180 ? '3.000.000' : milestone?.days >= 120 ? '2.000.000' : milestone?.days >= 90 ? '1.000.000' : milestone?.days >= 60 ? '600.000' : milestone?.days >= 30 ? '400.000' : '200.000' ); 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?.days || ''} ngày tuân thủ thói quen!

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

); };2f: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)); }30:T22ad,// 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; } .sync-button:hover { transform: rotate(180deg); background: linear-gradient(135deg, #FFA500, #FFD700); } .sync-button:active { transform: scale(0.95) rotate(180deg); } .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-row { display: flex; gap: 16px; /* Space between columns */ margin-bottom: 10px; /* Reduced row spacing */ } .clickup-form-group { flex: 1; /* Each group takes equal width in a row */ display: flex; flex-direction: column; } .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; /* This will now just push the label left */ align-items: center; margin-bottom: 6px; /* Slightly reduce bottom margin */ } .clickup-list-label { font-weight: 500; color: #FFD700; } /* Removed .clickup-add-button styles as the button is removed */ .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; } /* Removed .clickup-help-text as per request */ .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; } /* Keyframes for level-up animations */ @keyframes particleFadeIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0); } 10% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes particleFly { 0% { transform: translate(-50%, -50%); } 100% { transform: translate( calc(-50% + var(--particle-distance-x)), calc(-50% + var(--particle-distance-y)) ) scale(0.5); } } @keyframes particleFadeOut { 0% { opacity: 1; transform: translate( calc(-50% + var(--particle-distance-x)), calc(-50% + var(--particle-distance-y)) ) scale(0.5); } 100% { opacity: 0; transform: translate( calc(-50% + var(--particle-distance-x) * 1.5), calc(-50% + var(--particle-distance-y) * 1.5) ) scale(0); } } @keyframes glowPulse { 0% { width: 0; height: 0; opacity: 0.5; } 50% { opacity: 0.8; } 100% { width: 200vw; height: 200vh; opacity: 0; } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 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; } } /* CSS cho thông báo đồng bộ nổi */ .sync-status-message-floating { position: fixed; bottom: 20px; right: 20px; padding: 16px 20px; border-radius: 8px; transition: all 0.3s ease; animation: fadeIn 0.5s; z-index: 1000; max-width: 300px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); } .sync-status-message-floating.syncing { background-color: rgba(0, 0, 0, 0.5); /* Black with 50% opacity */ border-left: 4px solid #FFD700; /* Gold border */ } .sync-status-message-floating.success { background-color: rgba(56, 161, 105, 0.9); border-left: 4px solid #38A169; } .sync-status-message-floating.error { background-color: rgba(197, 48, 48, 0.9); border-left: 4px solid #C53030; } .sync-status-icon { margin-right: 12px; font-size: 20px; width: 24px; text-align: center; float: left; display: inline-block; /* Required for transform */ } .sync-status-message-floating.syncing .sync-status-icon { animation: spin 1s linear infinite; } .sync-status-text { font-weight: 500; color: white; /* Default color */ white-space: nowrap; /* Prevent text from wrapping to new line */ } .sync-status-message-floating.syncing .sync-status-text { color: #FFD700; /* Yellow text for syncing state */ } /* Removed .sync-progress-bar and .sync-progress-fill */ `; document.head.appendChild(styleSheet); }31: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ộ.

); }32: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' && (

)}

); }1c:["$","div",null,{"className":"h_[100dvh] d_flex","children":[["$","$L24",null,{"projectId":"c25cc9d6-dca5-4217-9965-c66638185064"}],["$","$L25",null,{"mode":"Multifile","files":[{"id":"a9618301-423a-4e43-ae8c-59900902ec95","name":"clickupService.js","path":"/","permissions":"rw","content":"$26","metadata":{},"revision":"afb7a76a-b704-4a4c-889b-1ad71d3de68f","created":"2025-05-13T19:32:21.647800Z","modified":"2025-05-13T19:32:21.647824Z","in_llm_context":true},{"id":"9496ba4c-ce97-4a51-bc3c-41a985a028dc","name":"main.js","path":"/","permissions":"rw","content":"$27","metadata":{},"revision":"afb7a76a-b704-4a4c-889b-1ad71d3de68f","created":"2025-05-13T19:32:21.647857Z","modified":"2025-05-13T19:32:21.647863Z","in_llm_context":true},{"id":"73afa28e-8cd9-494b-bd83-1d4b97ea771f","name":"ThemeContext.jsx","path":"/","permissions":"rw","content":"$28","metadata":{},"revision":"afb7a76a-b704-4a4c-889b-1ad71d3de68f","created":"2025-05-13T19:32:21.647881Z","modified":"2025-05-13T19:32:21.647886Z","in_llm_context":false},{"id":"3380fdb8-23d1-41cb-9346-bfe936b002ba","name":"keyframes.js","path":"/","permissions":"rw","content":"$29","metadata":{},"revision":"afb7a76a-b704-4a4c-889b-1ad71d3de68f","created":"2025-05-13T19:32:21.647902Z","modified":"2025-05-13T19:32:21.647907Z","in_llm_context":false},{"id":"05e30dd8-c6ed-46f0-8717-1ef6e0439de4","name":"SyncForm.jsx","path":"/","permissions":"rw","content":"$2a","metadata":{},"revision":"afb7a76a-b704-4a4c-889b-1ad71d3de68f","created":"2025-05-13T19:32:21.647923Z","modified":"2025-05-13T19:32:21.647927Z","in_llm_context":true},{"id":"4bf66b41-71aa-49a4-8ff8-7e9e4733323a","name":"HabitStats.js","path":"/","permissions":"rw","content":"$2b","metadata":{},"revision":"afb7a76a-b704-4a4c-889b-1ad71d3de68f","created":"2025-05-13T19:32:21.647942Z","modified":"2025-05-13T19:32:21.647947Z","in_llm_context":false},{"id":"77911c23-b6b2-4277-9a66-ff78b8a9aa1f","name":"RewardLadder.js","path":"/","permissions":"rw","content":"$2c","metadata":{},"revision":"afb7a76a-b704-4a4c-889b-1ad71d3de68f","created":"2025-05-13T19:32:21.647962Z","modified":"2025-05-13T19:32:21.647967Z","in_llm_context":true},{"id":"a903923d-c457-4110-b40d-1e7153663b9d","name":"TimelineMilestones.js","path":"/","permissions":"rw","content":"$2d","metadata":{},"revision":"afb7a76a-b704-4a4c-889b-1ad71d3de68f","created":"2025-05-13T19:32:21.647983Z","modified":"2025-05-13T19:32:21.647987Z","in_llm_context":true},{"id":"e899276e-ebe7-4155-8e22-1eca4a14fb52","name":"NavigationLink.js","path":"/","permissions":"rw","content":"import React from 'react';\n\nexport const NavigationLink = ({ to, children, className, style }) => {\n const handleClick = (e) => {\n e.preventDefault();\n window.open(to, '_blank');\n };\n\n return (\n

\n {children}\n

\n );\n};","metadata":{},"revision":"afb7a76a-b704-4a4c-889b-1ad71d3de68f","created":"2025-05-13T19:32:21.648003Z","modified":"2025-05-13T19:32:21.648008Z","in_llm_context":false},{"id":"b2f26e41-4e81-4583-94bf-d8c7ab0b9001","name":"MilestoneCelebration.js","path":"/","permissions":"rw","content":"$2e","metadata":{},"revision":"afb7a76a-b704-4a4c-889b-1ad71d3de68f","created":"2025-05-13T19:32:21.648023Z","modified":"2025-05-13T19:32:21.648028Z","in_llm_context":false},{"id":"6e8a2bf4-8b73-4e50-88f4-d4828f45b248","name":"App.jsx","path":"/","permissions":"rw","content":"$2f","metadata":{},"revision":"afb7a76a-b704-4a4c-889b-1ad71d3de68f","created":"2025-05-13T19:32:21.648043Z","modified":"2025-05-13T19:32:21.648047Z","in_llm_context":false},{"id":"55e1970c-b8a9-47c1-b17a-f8b3c9edb03c","name":"styles.js","path":"/","permissions":"rw","content":"$30","metadata":{},"revision":"afb7a76a-b704-4a4c-889b-1ad71d3de68f","created":"2025-05-13T19:32:21.648062Z","modified":"2025-05-13T19:32:21.648067Z","in_llm_context":true},{"id":"8915a7f8-5d46-488f-81f6-4f70d420c9c3","name":"Header.jsx","path":"/","permissions":"rw","content":"$31","metadata":{},"revision":"afb7a76a-b704-4a4c-889b-1ad71d3de68f","created":"2025-05-13T19:32:21.648082Z","modified":"2025-05-13T19:32:21.648086Z","in_llm_context":false},{"id":"b716070e-a735-45cd-94c3-ca9ae061e0b0","name":"SyncStatus.jsx","path":"/","permissions":"rw","content":"$32","metadata":{},"revision":"afb7a76a-b704-4a4c-889b-1ad71d3de68f","created":"2025-05-13T19:32:21.648101Z","modified":"2025-05-13T19:32:21.648105Z","in_llm_context":false}],"projectId":"c25cc9d6-dca5-4217-9965-c66638185064"}]]}]