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:T2533,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('Đang đồng bộ với thông tin xác thực:', credentials); // Kiểm tra xác thực - phải có Space ID hoặc ít nhất một List ID 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)); }27:T2144,import React, { useState, useEffect, useMemo } from 'react'; export const MilestoneCelebration = ({ isOpen, milestone, onClose }) => { const [animationState, setAnimationState] = useState('entering'); // Typography constants for consistency const typography = useMemo(() => ({ 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) { setAnimationState('entering'); const enterTimer = setTimeout(() => { setAnimationState('active'); }, 500); return () => clearTimeout(enterTimer); } }, [isOpen]); // Define milestones with useMemo to prevent recreating on each render const milestones = useMemo(() => [ { days: 3, giftPoints: 500, scholarship: 500000 }, { days: 5, giftPoints: 1000, scholarship: 1000000 }, { days: 7, giftPoints: 2000, scholarship: 2000000 }, { days: 10, giftPoints: 3000, scholarship: 4000000 }, { days: 15, giftPoints: 4000, scholarship: 6000000 }, { days: 20, giftPoints: 5000, scholarship: 8000000 }, { days: 30, giftPoints: 6000, scholarship: 10000000 }, { days: 45, giftPoints: 8000, scholarship: 20000000 } ], []); // Find the current milestone based on the number of days const currentMilestone = useMemo(() => { if (!milestone) return milestones[0]; return milestones.reduce((prev, curr) => { return (milestone.days >= curr.days) ? curr : prev; }, milestones[0]); }, [milestone, milestones]); const scholarshipAmount = currentMilestone.scholarship.toLocaleString(); const giftPoints = currentMilestone.giftPoints; if (!isOpen) return null; 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 {milestone?.days || '0'} huy hiệu!

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

)} {/* Combined Reward Information */}

Phần thưởng của bạn

Học Bổng Chiến Thắng: {scholarshipAmount} VND

Điểm Đổi Quà: {giftPoints} điểm

Phần thưởng đã được ghi nhận vào tài khoản của bạn!

{/* Continue button */}

); };28:T32a7,import React, { useState } from 'react'; import { clickupService, getPageSpecificKey } 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 }); // Use the imported getPageSpecificKey function const storageKey = getPageSpecificKey('clickupCredentials'); const [formData, setFormData] = useState(() => { // Try to load saved credentials from localStorage with page-specific key const savedCredentials = localStorage.getItem(storageKey); if (savedCredentials) { try { return JSON.parse(savedCredentials); } catch (e) { // Error parsing saved credentials return { apiKey: '', apiKey: '', workspace: '', badgeListId: '', // List ID for badges // badgeRelationshipFieldId removed milestoneListId: '', milestoneImageFieldId: '', milestoneTagName: '' // Consolidated Tag Name }; } } // Return default credentials if nothing saved return { apiKey: '', workspace: '', badgeListId: '', // List ID for badges // badgeRelationshipFieldId removed milestoneTaskId: '', giftPointsFieldId: '', scholarshipFieldId: '', milestoneListId: '', milestoneImageFieldId: '', milestoneTagName: '' // Consolidated Tag Name }; }); // 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 () => { // Update validation: Removed badgeTagName requirement, will use milestoneTagName // Now require milestoneTagName if milestoneListId and milestoneImageFieldId are provided if (!formData.apiKey || !formData.workspace || !formData.badgeListId) { setSyncState({ status: 'error', message: 'Vui lòng điền đầy đủ API Key, Workspace ID, và List ID (Huy hiệu)', progress: 0 }); return; } // Optional check: If milestone creation fields are filled, require the tag name if (formData.milestoneListId && formData.milestoneImageFieldId && !formData.milestoneTagName) { setSyncState({ status: 'error', message: 'Vui lòng cung cấp Tên Tag Cột mốc nếu bạn đã điền List ID và Field ID cho Task Cột mốc.', progress: 0 }); return; } // Save credentials to localStorage with page-specific key const storageKey = getPageSpecificKey('clickupCredentials'); localStorage.setItem(storageKey, JSON.stringify(formData)); // Bắt đầu quá trình đồng bộ setSyncState({ status: 'syncing', message: 'Đang kết nối với ClickUp...', progress: 10 }); try { // Gọi API thực tế đến ClickUp setSyncState(prev => ({ ...prev, message: 'Đang xác thực với ClickUp API...', progress: 20 })); // Lấy dữ liệu từ ClickUp setSyncState(prev => ({ ...prev, message: `Đang lấy dữ liệu từ ClickUp...`, progress: 40 })); const data = await clickupService.fetchData(formData); setSyncState(prev => ({ ...prev, message: 'Đang xử lý dữ liệu...', progress: 70 })); // Cập nhật logs với dữ liệu nhận được từ ClickUp // Received data from ClickUp 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) { // Error occurred during sync setSyncState({ status: 'error', message: error.message || 'Đồng bộ hóa thất bại. Vui lòng thử lại.', progress: 0 }); } }; return (

{/* Form content is shown directly without additional button or modal */} {/* Apply flex container styles here */}

{/* Reduced gap */} {/* API Key */}

{/* Adjusted flex basis calculation */} API Key *

{/* Workspace ID */}

{/* Adjusted flex basis calculation */} Workspace ID *

{/* List ID (Lấy Task Huy hiệu) */}

{/* Adjusted flex basis calculation */} List ID (Lấy Task Huy hiệu) *

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

{/* Adjusted flex basis calculation */} List ID (Nơi Lưu Task Mới Tạo)

{/* Custom Field ID (Lưu Điểm Đổi Quà) */}

{/* Adjusted flex basis calculation */} Custom Field ID (Lưu Điểm Đổi Quà)

{/* Custom Field ID (Học Bổng) */}

{/* Adjusted flex basis calculation */} Custom Field ID (Học Bổng)

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

{/* Adjusted flex basis calculation */} Task ID (Lưu & Nhận Thông Báo)

{/* Tag Name (Tên Người Chơi) */}

{/* Adjusted flex basis calculation */} Tag Name (Tên Người Chơi)

{/* Custom Field ID (Lưu URL Huy Hiệu) */}

{/* Adjusted flex basis calculation */} Custom Field ID (Lưu URL Huy Hiệu)

{/* Empty div to align button */}

{/* Adjusted flex basis calculation */}

{/* Sync Button */} {/* Status Message - Positioned below the button */} {syncState.status !== 'idle' && (

{/* Add margin-top */}

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

{syncState.message}

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

)}

); }; export default SyncForm;29:T4271,import React, { useState, useEffect } from 'react'; import { GoalStats } from 'GoalStats'; import { TimelineMilestones, SyncLoadingOverlay } from 'TimelineMilestones'; import SyncForm from 'SyncForm'; import { clickupService, getPageSpecificKey } from 'clickupService'; // Define mapping for milestone days to image URLs const MILESTONE_IMAGES = { 3: 'https://play.rosebud.ai/assets/1.gif?Y815', // 1.gif 5: 'https://play.rosebud.ai/assets/1.1.gif?HeG4', // 1.1.gif 7: 'https://play.rosebud.ai/assets/2.1.gif?30dC', // 2.1.gif 10: 'https://play.rosebud.ai/assets/3.1.gif?plJz', // 3.1.gif 15: 'https://play.rosebud.ai/assets/4.1.gif?sekb', // 4.1.gif 20: 'https://play.rosebud.ai/assets/5.1.gif?RJhA', // 5.1.gif 30: 'https://play.rosebud.ai/assets/6.1.gif?estv', // 6.1.gif 45: 'https://play.rosebud.ai/assets/7.1-ezgif.com-optimize.gif?jsLY', // 7.1-ezgif.com-optimize.gif // Add more milestones and images as needed // e.g., 60: 'https://play.rosebud.ai/assets/8.1.gif?sk6v' }; export const RewardLadder = () => { const [activeGoalTab, setActiveGoalTab] = useState('Tổng số huy hiệu'); const [showSettings, setShowSettings] = useState(false); const [passwordInput, setPasswordInput] = useState(''); const [passwordVerified, setPasswordVerified] = useState(false); const [passwordError, setPasswordError] = useState(''); const [lastSyncTime, setLastSyncTime] = useState(() => { // Try to load last sync time from localStorage const storageKey = getPageSpecificKey('lastSyncTime'); const savedTime = localStorage.getItem(storageKey); return savedTime ? new Date(JSON.parse(savedTime)) : null; }); // Add state for sync loading status const [syncLoading, setSyncLoading] = useState(false); // Add this new function for auto-sync const autoSync = async () => { try { // Set loading state to true when starting sync setSyncLoading(true); const storageKey = getPageSpecificKey('clickupCredentials'); const savedCredentials = localStorage.getItem(storageKey); if (savedCredentials) { const credentials = JSON.parse(savedCredentials); const data = await clickupService.fetchData(credentials); handleSyncComplete(data); const now = new Date(); setLastSyncTime(now); // Save to localStorage const storageKey = getPageSpecificKey('lastSyncTime'); localStorage.setItem(storageKey, JSON.stringify(now.toISOString())); // Auto-sync completed } } catch (error) { // Auto-sync failed } finally { // Always set loading state back to false when sync completes or fails setSyncLoading(false); } }; // Add this useEffect for setting up the interval useEffect(() => { const syncInterval = setInterval(autoSync, 60 * 60 * 1000); // Run every 60 minutes (1 hour) return () => clearInterval(syncInterval); }, []); // Add new useEffect to automatically sync data when page loads useEffect(() => { // Check if credentials exist and contain required fields const storageKey = getPageSpecificKey('clickupCredentials'); const savedCredentials = localStorage.getItem(storageKey); if (savedCredentials) { try { const credentials = JSON.parse(savedCredentials); // Update check: Now checks for apiKey, workspace, badgeListId, and the consolidated milestoneTagName if (credentials.apiKey && credentials.workspace && credentials.badgeListId && credentials.milestoneTagName) { // Found valid credentials, auto-syncing // Show sync status and perform sync setSyncLoading(true); // Delay sync slightly to ensure component is fully mounted setTimeout(() => { autoSync(); }, 1000); } else { // Credentials missing required fields } } catch (error) { // Error parsing credentials } } else { // No credentials found } }, []); // Handle tab switching const handleTabSwitch = (tab) => { setActiveTab(tab); // Reset activeGoalTab when switching to the 'goals' tab if (tab === 'goals') { setActiveGoalTab('Level'); } }; // State for tracking user progress const [userProgress, setUserProgress] = useState(() => { // Tìm kiếm dữ liệu đã đồng bộ trong localStorage const storageKey = getPageSpecificKey('syncedUserProgress'); const savedProgress = localStorage.getItem(storageKey); if (savedProgress) { try { const parsedData = JSON.parse(savedProgress); // Loaded previous synced data return parsedData; } catch (error) { // Error parsing user progress } } // Trả về giá trị mặc định nếu không tìm thấy dữ liệu đã lưu return { daysFollowingHabits: 0, trainingLevel: 0, totalBadges: 0 }; }); // State to track milestones for which tasks have been created const [processedMilestones, setProcessedMilestones] = useState(() => { const storageKey = getPageSpecificKey('processedMilestones'); const saved = localStorage.getItem(storageKey); return saved ? new Set(JSON.parse(saved)) : new Set(); }); // Function to update processed milestones in state and localStorage const markMilestoneAsProcessed = (milestoneDays) => { setProcessedMilestones(prev => { const newSet = new Set(prev); newSet.add(milestoneDays); const storageKey = getPageSpecificKey('processedMilestones'); localStorage.setItem(storageKey, JSON.stringify(Array.from(newSet))); return newSet; }); }; // Dữ liệu cơ bản cho tabs return (

{/* Add global loading overlay for sync operations */}

{/* Loading indicator when syncing - Removed because we now use the compact bottom-right overlay */} {lastSyncTime && (

Cập nhật lần cuối: {lastSyncTime.toLocaleTimeString('vi-VN', { hour: '2-digit', minute: '2-digit', hour12: false })} {lastSyncTime.toLocaleDateString('vi-VN')}

)}

{showSettings && (

{passwordVerified ? 'Cài đặt Đồng bộ' : 'Xác thực'}

{!passwordVerified ? (

{ setPasswordInput(e.target.value); setPasswordError(''); // Clear error on new input }} style={{ padding: '10px', fontSize: '16px', border: '1px solid #ccc', borderRadius: '4px', marginRight: '10px', width: '60%' }} /> {passwordError && (

{passwordError}

)}

) : (

)}

{['Tổng số huy hiệu'].map((tabName, index) => (

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

))}

{activeGoalTab === 'Tổng số huy hiệu' && ( // Pass the totalBadges from userProgress to TimelineMilestones )}

); // Hàm xử lý khi quá trình đồng bộ hoàn tất function handleSyncComplete(data) { // Xử lý dữ liệu khi nhận được từ SyncForm // Process sync data // Kiểm tra dữ liệu trực tiếp từ API response if (data && data.processedData) { // Process data received from ClickUp // Lấy trực tiếp dữ liệu từ processedData // Lấy số huy hiệu từ dữ liệu đồng bộ const daysFollowingHabits = data.processedData.daysFollowingHabits || 0; const totalBadges = data.processedData.totalBadges || 0; const previousTotalBadges = userProgress.totalBadges; // Get badges before sync // Cập nhật state với dữ liệu mới const updatedProgress = { daysFollowingHabits: daysFollowingHabits, trainingLevel: 0, // Default value for now totalBadges: totalBadges }; setUserProgress(updatedProgress); // Lưu dữ liệu vào localStorage để sử dụng cho lần tải trang tiếp theo const userProgressStorageKey = getPageSpecificKey('syncedUserProgress'); localStorage.setItem(userProgressStorageKey, JSON.stringify(updatedProgress)); // Synced data saved to localStorage // --- Milestone Task Creation Logic --- const credStorageKey = getPageSpecificKey('clickupCredentials'); const savedCredentials = localStorage.getItem(credStorageKey); if (savedCredentials) { try { const credentials = JSON.parse(savedCredentials); const { apiKey, milestoneListId, milestoneImageFieldId } = credentials; // Only proceed if necessary settings are available if (apiKey && milestoneListId && milestoneImageFieldId) { // Check each milestone defined in MILESTONE_IMAGES Object.entries(MILESTONE_IMAGES).forEach(async ([daysStr, imageUrl]) => { const days = parseInt(daysStr, 10); // Check if: // 1. Current total badges meet or exceed the milestone days // 2. This milestone hasn't been processed yet if (totalBadges >= days && !processedMilestones.has(days)) { console.log(`Reached milestone ${days}. Creating task...`); const now = new Date(); const formattedTimestamp = `${String(now.getDate()).padStart(2, '0')}/${String(now.getMonth() + 1).padStart(2, '0')}/${now.getFullYear()} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`; const milestoneData = { title: `1.CORE - Cột Mốc ${days} Huy Hiệu - ${formattedTimestamp}`, imageUrl: imageUrl, days: days // Include days for potential use in description or elsewhere }; try { await clickupService.createMilestoneTask( credentials, milestoneListId, milestoneImageFieldId, milestoneData ); // Mark this milestone as processed only after successful task creation markMilestoneAsProcessed(days); console.log(`Successfully created and marked milestone task for ${days} days.`); } catch (error) { console.error(`Failed to create milestone task for ${days} days:`, error); // Optional: Show an error message to the user } } }); } else { console.log("Milestone task creation skipped: Missing List ID or Image Field ID settings."); } } catch (parseError) { console.error("Error parsing credentials for milestone task creation:", parseError); } } else { console.log("Milestone task creation skipped: Credentials not found."); } // --- End Milestone Task Creation Logic --- // Đóng modal settings setTimeout(() => { setShowSettings(false); }, 2000); } else { // Show error in user interface instead of console setSyncLoading(false); const syncErrorMessage = document.createElement('div'); syncErrorMessage.className = 'sync-status-message error'; syncErrorMessage.innerHTML = `

❌

Không nhận được dữ liệu hợp lệ từ máy chủ. Vui lòng thử lại sau.

`; document.querySelector('.reward-container').appendChild(syncErrorMessage); // Auto-remove after 5 seconds setTimeout(() => { if (syncErrorMessage.parentNode) { syncErrorMessage.parentNode.removeChild(syncErrorMessage); } }, 5000); } } } export default RewardLadder;2a:T1eaf,// 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-y: auto; overflow-x: hidden; 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; } .auto-sync-button-circle { 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: 130px; right: 20px; z-index: 100; transition: all 0.2s ease-in-out; } .auto-sync-button-circle:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.4); } .auto-sync-button-circle.syncing { background: #666; animation: pulse 1.5s infinite; color: #ccc; cursor: not-allowed; } @keyframes pulse { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 0.7; } } .last-sync-time { position: absolute; top: 175px; right: 20px; font-size: 10px; color: rgba(255, 255, 255, 0.7); text-align: right; } .settings-button.active { background: #FFFFFF; color: #2C1810; } .settings-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 50; padding: 20px; } .settings-content { background-color: #2C1810; border-radius: 12px; max-width: 600px; width: 100%; max-height: 90vh; overflow: auto; position: relative; padding: 25px; border: 1px solid #FFD700; box-shadow: 0 0 30px rgba(255, 215, 0, 0.3); } .close-button { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 24px; cursor: pointer; color: #FFD700; } .settings-title { color: #FFD700; margin-top: 0; margin-bottom: 20px; text-align: center; font-size: 24px; background: linear-gradient(135deg, #FFD700, #FFA500); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* CSS cho form cài đặt ClickUp */ .clickup-form-container { padding: 16px; background-color: rgba(61, 35, 18, 0.7); border-radius: 8px; margin-bottom: 20px; border: 1px solid rgba(255, 215, 0, 0.3); } .clickup-form-title { margin: 0 0 16px; color: #FFD700; font-size: 16px; } .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; } .sync-loading-indicator { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.8); color: #FFD700; padding: 12px 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); display: flex; align-items: center; gap: 12px; z-index: 1000; border: 1px solid rgba(255, 215, 0, 0.5); animation: fadeIn 0.3s ease-in-out; } .sync-loading-message { font-size: 14px; font-weight: 500; } .sync-loading-spinner { width: 18px; height: 18px; border: 2px solid rgba(255, 215, 0, 0.3); border-top: 2px solid #FFD700; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes fadeIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes progressPulse { 0% { background-position: 0% 50%; background-size: 150% 150%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; background-size: 150% 150%; } } .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); }2b:T42a3,// Service for handling ClickUp API calls // Helper to generate page-specific storage keys const getPageSpecificKey = (baseKey) => { // Get a unique identifier for the current page const fullPath = window.location.pathname + window.location.search + window.location.hash; const pageId = fullPath.replace(/[^a-zA-Z0-9]/g, '_').replace(/__+/g, '_') || '_default'; // Use a combination of pageId and baseKey for uniqueness, without timestamp return `clickup_${baseKey}_${pageId}`; }; export { getPageSpecificKey }; 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 { // Check for required badge fields using the consolidated tag name if (!credentials.badgeListId || !credentials.milestoneTagName) { throw new Error('List ID (Huy hiệu) và Tên Tag Cột mốc là bắt buộc để đếm huy hiệu'); } // No longer need workspace fetch here if not required for other operations 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'); } } // Fetch tasks from the specified badge list ID const badgeTasks = await this.getTasksFromList(headers, credentials.badgeListId); // Calculate the badge count based on the consolidated milestone tag name const processedData = this.calculateBadgeCountFromList(badgeTasks, credentials.milestoneTagName); // Return structure using the new processed data return { rawTaskData: badgeTasks, // Return the list of tasks as raw data processedData: processedData // Contains totalBadges based on tag count }; } catch (error) { console.error('Error fetching ClickUp data:', error); throw new Error(`Failed to fetch data from ClickUp: ${error.message}`); } }, // Get workspaces for the user async getWorkspaces(headers) { // Use page-specific storage when needed const storageKey = getPageSpecificKey('clickupCredentials'); const response = await fetch('https://api.clickup.com/api/v2/team', { method: 'GET', headers }); if (!response.ok) { throw new Error(`Failed to get workspaces: ${response.status} ${response.statusText}`); } const data = await response.json(); return data.teams || []; }, // Get tasks from a space async getTasksFromSpace(headers, spaceId) { let allTasks = []; try { // Step 1: First get all folders in the space const foldersResponse = await fetch(`https://api.clickup.com/api/v2/space/${spaceId}/folder?archived=false`, { method: 'GET', headers }); if (!foldersResponse.ok) { throw new Error(`Failed to get folders: ${foldersResponse.status} ${foldersResponse.statusText}`); } const foldersData = await foldersResponse.json(); const folders = foldersData.folders || []; // Step 2: Get lists from each folder for (const folder of folders) { try { const folderListsResponse = await fetch(`https://api.clickup.com/api/v2/folder/${folder.id}/list?archived=false`, { method: 'GET', headers }); if (!folderListsResponse.ok) { console.error(`Error fetching lists from folder ${folder.id}: ${folderListsResponse.status}`); continue; } const folderListsData = await folderListsResponse.json(); const folderLists = folderListsData.lists || []; // Get tasks from each list in the folder for (const list of folderLists) { try { const tasks = await this.getTasksFromList(headers, list.id); allTasks = [...allTasks, ...tasks]; } catch (error) { console.error(`Error fetching tasks from list ${list.id} in folder:`, error); // Continue with other lists even if one fails } } } catch (error) { console.error(`Error processing folder ${folder.id}:`, error); // Continue with other folders even if one fails } } // Step 3: Get lists that are directly in the space (not in any folder) const listsResponse = await fetch(`https://api.clickup.com/api/v2/space/${spaceId}/list?archived=false`, { method: 'GET', headers }); if (!listsResponse.ok) { throw new Error(`Failed to get lists: ${listsResponse.status} ${listsResponse.statusText}`); } const listsData = await listsResponse.json(); const lists = listsData.lists || []; // Get tasks from each list in the space for (const list of lists) { try { const tasks = await this.getTasksFromList(headers, list.id); allTasks = [...allTasks, ...tasks]; } catch (error) { console.error(`Error fetching tasks from list ${list.id}:`, error); // Continue with other lists even if one fails } } return allTasks; } catch (error) { console.error(`Error fetching data from space ${spaceId}:`, error); throw error; } }, // Get tasks from specific lists async getTasksFromLists(headers, listIds) { let allTasks = []; let successCount = 0; for (const listId of listIds) { try { const tasks = await this.getTasksFromList(headers, listId); allTasks = [...allTasks, ...tasks]; successCount++; } catch (error) { console.error(`Error fetching tasks from list ${listId}:`, error); // Continue with other lists even if one fails } } return allTasks; }, // Get tasks from a single list async getTasksFromList(headers, listId) { // Ensure we get all tasks, not just the first page let allTasks = []; let hasMoreTasks = true; let startIndex = 0; const PAGE_SIZE = 100; while (hasMoreTasks) { const url = `https://api.clickup.com/api/v2/list/${listId}/task?archived=false&subtasks=true&include_closed=true&page=${startIndex/PAGE_SIZE}&order_by=created&reverse=true&limit=${PAGE_SIZE}`; const tasksResponse = await fetch(url, { method: 'GET', headers }); if (!tasksResponse.ok) { throw new Error(`Failed to get tasks: ${tasksResponse.status} ${tasksResponse.statusText}`); } const tasksData = await tasksResponse.json(); const tasks = tasksData.tasks || []; allTasks = [...allTasks, ...tasks]; // Check if we need to fetch more pages if (tasks.length < PAGE_SIZE) { hasMoreTasks = false; } else { startIndex += PAGE_SIZE; } } return allTasks; }, // New function to get details for a single task async getTaskDetails(headers, taskId) { const url = `https://api.clickup.com/api/v2/task/${taskId}`; const response = await fetch(url, { method: 'GET', headers }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); // Try to parse error, default to empty object console.error(`Failed to get task details for ${taskId}: ${response.status} ${response.statusText}`, errorData); throw new Error(`Failed to get task details: ${response.status} ${response.statusText}`); } const taskData = await response.json(); // Log the full task details received from API return taskData; }, // NEW: Calculate badge count from a list of tasks based on a tag name calculateBadgeCountFromList(tasks, tagName) { if (!Array.isArray(tasks) || !tagName) { console.warn('Invalid input for calculateBadgeCountFromList. Tasks must be an array and tagName must be provided.'); return { totalBadges: 0, daysFollowingHabits: 0 }; } const lowerCaseTagName = tagName.toLowerCase().trim(); if (!lowerCaseTagName) { console.warn('Badge tag name is empty.'); return { totalBadges: 0, daysFollowingHabits: 0 }; } let badgeCount = 0; tasks.forEach(task => { // Check if the task has tags and if any tag name matches (case-insensitive) if (task.tags && Array.isArray(task.tags)) { const hasMatchingTag = task.tags.some(tag => tag.name.toLowerCase() === lowerCaseTagName); if (hasMatchingTag) { badgeCount++; } } }); // Return the count // daysFollowingHabits is currently tied to totalBadges. Maintain this link. return { daysFollowingHabits: badgeCount, totalBadges: badgeCount }; }, // 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 { // Use scholarship amount directly from milestone object if available const scholarshipAmount = milestone.scholarship || ( milestone.days >= 45 ? '20.000.000' : milestone.days >= 30 ? '10.000.000' : milestone.days >= 20 ? '8.000.000' : milestone.days >= 15 ? '6.000.000' : milestone.days >= 10 ? '4.000.000' : milestone.days >= 7 ? '2.000.000' : milestone.days >= 5 ? '1.000.000' : '500.000' ); // Use gift points from milestone object if available const giftPoints = milestone.giftPoints || ( milestone.days >= 45 ? '8000' : milestone.days >= 30 ? '6000' : milestone.days >= 20 ? '5000' : milestone.days >= 15 ? '4000' : milestone.days >= 10 ? '3000' : milestone.days >= 7 ? '2000' : milestone.days >= 5 ? '1000' : '500' ); // Create a more detailed and visually appealing formatted comment const commentText = `# 🎉 CỘT MỐC ĐẠT ĐƯỢC! 🎉\n\n` + `## 🏆 **${milestone.days} huy hiệu** đã đạt được!\n\n` + `### Phần thưởng của bạn:\n` + `- 💰 **Học Bổng Chiến Thắng**: ${scholarshipAmount} VNĐ\n` + `- 🎁 **Điểm Đổi Quà**: ${giftPoints} điểm\n` + `- 📅 Đạt được vào: ${new Date().toLocaleString('vi-VN')}\n\n` + `**Chúc mừng thành tích này! Hãy tiếp tục phát huy.**`; // 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) { console.error('Error adding milestone comment:', error); throw new Error(`Failed to add milestone comment: ${error.message}`); } }, // NOTE: processRawTaskData is now replaced by calculateBadgeCountFromList // You can remove the old processRawTaskData function if desired, or keep it commented out. // Hàm cập nhật điểm đổi quà vào custom field trong ClickUp async updateGiftPoints(credentials, taskId, giftPoints) { if (!credentials.apiKey || !taskId || !credentials.giftPointsFieldId) { throw new Error('API Key, Task ID và Custom Field ID cho điểm đổi quà là bắt buộc'); } const headers = { 'Authorization': credentials.apiKey, 'Content-Type': 'application/json' }; try { // Tạo đối tượng dữ liệu để cập nhật custom field const fieldData = {}; fieldData[credentials.giftPointsFieldId] = giftPoints; // Gọi API để cập nhật custom field const response = await fetch(`https://api.clickup.com/api/v2/task/${taskId}/field/${credentials.giftPointsFieldId}`, { method: 'POST', headers, body: JSON.stringify({ value: giftPoints }) }); if (!response.ok) { const errorData = await response.json(); throw new Error(`Không thể cập nhật điểm đổi quà: ${response.status} ${response.statusText} - ${JSON.stringify(errorData)}`); } const data = await response.json(); return data; } catch (error) { console.error('Lỗi khi cập nhật điểm đổi quà:', error); throw new Error(`Không thể cập nhật điểm đổi quà: ${error.message}`); } }, // Hàm cập nhật điểm học bổng vào custom field trong ClickUp async updateScholarship(credentials, taskId, scholarship) { if (!credentials.apiKey || !taskId || !credentials.scholarshipFieldId) { throw new Error('API Key, Task ID và Custom Field ID cho học bổng là bắt buộc'); } const headers = { 'Authorization': credentials.apiKey, 'Content-Type': 'application/json' }; try { // Tạo đối tượng dữ liệu để cập nhật custom field const fieldData = {}; fieldData[credentials.scholarshipFieldId] = scholarship; // Gọi API để cập nhật custom field const response = await fetch(`https://api.clickup.com/api/v2/task/${taskId}/field/${credentials.scholarshipFieldId}`, { method: 'POST', headers, body: JSON.stringify({ value: scholarship }) }); if (!response.ok) { const errorData = await response.json(); throw new Error(`Không thể cập nhật học bổng: ${response.status} ${response.statusText} - ${JSON.stringify(errorData)}`); } const data = await response.json(); return data; } catch (error) { console.error('Lỗi khi cập nhật học bổng:', error); throw new Error(`Không thể cập nhật học bổng: ${error.message}`); } }, // New function to create a milestone task async createMilestoneTask(credentials, listId, imageFieldId, milestoneData) { if (!credentials.apiKey || !listId || !imageFieldId || !milestoneData) { throw new Error('API Key, List ID, Image Field ID, and Milestone Data are required to create a milestone task'); } if (!milestoneData.title || !milestoneData.imageUrl) { throw new Error('Milestone title and image URL are required in milestoneData'); } const headers = { 'Authorization': credentials.apiKey, 'Content-Type': 'application/json' }; const taskPayload = { name: milestoneData.title, // e.g., "Cột mốc 5 Huy hiệu Đạt được!" description: `Chúc mừng bạn đã đạt được cột mốc ${milestoneData.days || milestoneData.title}!`, // Add more details if needed custom_fields: [ { id: imageFieldId, value: milestoneData.imageUrl // Set the image URL } ], // You might want to add other task details like assignee, priority, etc. // assignee: [userId], // Optional: Assign the task // priority: 3, // Optional: Set priority (1=Urgent, 2=High, 3=Normal, 4=Low) notify_all: true // Notify watchers }; // Add tag if milestoneTagName is provided in credentials if (credentials.milestoneTagName && credentials.milestoneTagName.trim() !== '') { taskPayload.tags = [{ name: credentials.milestoneTagName.trim() }]; } try { const response = await fetch(`https://api.clickup.com/api/v2/list/${listId}/task`, { method: 'POST', headers, body: JSON.stringify(taskPayload) }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); console.error(`Failed to create milestone task: ${response.status} ${response.statusText}`, errorData); throw new Error(`Failed to create milestone task: ${response.status} ${response.statusText} - ${JSON.stringify(errorData)}`); } const createdTask = await response.json(); console.log('Successfully created milestone task:', createdTask); return createdTask; // Return the newly created task object } catch (error) { console.error('Error creating milestone task:', error); throw new Error(`Failed to create milestone task: ${error.message}`); } } };2c:T8b6b,import React, { useState, useEffect, useMemo, useCallback } from 'react'; import { MilestoneCelebration } from 'MilestoneCelebration'; // Add this line to import localStorage utility import { getPageSpecificKey } from 'clickupService'; // Import canvas-confetti import confetti from 'https://esm.sh/canvas-confetti@1.6.0'; // Sample daily goals array const sampleDailyGoals = [ { id: 1, title: "Meditation", description: "15 minutes of mindfulness", completed: false }, { id: 2, title: "Exercise", description: "30 minutes cardio", completed: true }, { id: 3, title: "Reading", description: "Read 20 pages", completed: false }, { id: 4, title: "Coding", description: "Solve 2 coding problems", completed: true }, { id: 5, title: "Journaling", description: "Write daily reflection", completed: false } ]; // Tối ưu bằng cách trích xuất các inline styles thành các biến có thể tái sử dụng const styles = { container: { position: 'relative', margin: '20px auto', padding: '15px 0', width: '100%', maxWidth: '700px', display: 'flex', flexDirection: 'column' }, timelineTrack: { position: 'absolute', top: 0, bottom: 0, left: '50%', width: '4px', backgroundColor: 'rgba(255, 215, 0, 0.3)', transform: 'translateX(-50%)', zIndex: 1 }, glowEffect: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, boxShadow: '0 0 15px rgba(255, 215, 0, 0.5)', zIndex: 0 }, timelineItem: (isLeft, index) => ({ display: 'flex', justifyContent: isLeft ? 'flex-start' : 'flex-end', padding: '18px 10px', position: 'relative', zIndex: 2, marginTop: index === 0 ? '0' : `${index === 1 ? '20px' : '30px'}` }), timelineDot: (isCompleted) => ({ position: 'absolute', left: '50%', width: '16px', height: '16px', borderRadius: '50%', background: isCompleted ? 'linear-gradient(135deg, #FFD700, #FFA500)' : 'rgba(255, 255, 255, 0.2)', border: isCompleted ? '2px solid #FFD700' : '1px solid rgba(255, 215, 0, 0.3)', transform: 'translateX(-50%)', boxShadow: isCompleted ? '0 0 8px rgba(255, 215, 0, 0.7)' : 'none', zIndex: 5 }) }; export const TimelineMilestones = ({ currentDays = 0 }) => { // Accept currentDays prop const [commentedMilestones, setCommentedMilestones] = useState(() => { const storageKey = getPageSpecificKey('commentedMilestones'); const savedMilestones = localStorage.getItem(storageKey); return savedMilestones ? JSON.parse(savedMilestones) : []; }); // State to track which milestones have had their celebration popup shown const [celebratedMilestonesPopup, setCelebratedMilestonesPopup] = useState(() => { const storageKey = getPageSpecificKey('celebratedMilestonesPopup'); const savedCelebrated = localStorage.getItem(storageKey); return savedCelebrated ? JSON.parse(savedCelebrated) : []; }); // Function to get the appropriate image for each milestone const getMilestoneImage = (index) => { const imageMap = { 0: "https://play.rosebud.ai/assets/1.1.gif?HeG4", 1: "https://play.rosebud.ai/assets/2.1.gif?30dC", 2: "https://play.rosebud.ai/assets/3.1.gif?plJz", 3: "https://play.rosebud.ai/assets/4.1.gif?sekb", 4: "https://play.rosebud.ai/assets/5.1.gif?RJhA", 5: "https://play.rosebud.ai/assets/6.1.gif?estv", 6: "https://play.rosebud.ai/assets/7.1-ezgif.com-optimize.gif?jsLY", 7: "https://play.rosebud.ai/assets/8.1.gif?sk6v" }; return imageMap[index] || "https://play.rosebud.ai/assets/1.1.gif?HeG4"; }; // State for celebration popup const [celebrationOpen, setCelebrationOpen] = useState(false); const [celebratedMilestone, setCelebratedMilestone] = useState(null); const [lastCelebratedDay, setLastCelebratedDay] = useState(0); // Define milestones with useMemo to prevent recreating on each render const milestones = useMemo(() => [ { days: 3, position: 0, scholarship: 500000, giftPoints: 500 }, // Milestone: 3 huy hiệu { days: 5, position: 30, scholarship: 1000000, giftPoints: 1000 }, // Milestone: 5 huy hiệu { days: 7, position: 60, scholarship: 2000000, giftPoints: 2000 }, // Milestone: 7 huy hiệu { days: 10, position: 90, scholarship: 4000000, giftPoints: 3000 }, // Milestone: 10 huy hiệu { days: 15, position: 120, scholarship: 6000000, giftPoints: 4000 },// Milestone: 15 huy hiệu { days: 20, position: 150, scholarship: 8000000, giftPoints: 5000 },// Milestone: 20 huy hiệu { days: 30, position: 180, scholarship: 10000000, giftPoints: 6000 },// Milestone: 30 huy hiệu { days: 45, position: 210, scholarship: 20000000, giftPoints: 8000 }// Milestone: 45 huy hiệu ], []); // Function to add milestone comment to ClickUp const addMilestoneCommentToClickUp = useCallback((milestone) => { // Check if this milestone has already been commented if (commentedMilestones.includes(milestone.days)) { // Skip already commented milestone return; } try { // Helper to get page-specific storage key const getPageSpecificKey = (baseKey) => { const fullPath = window.location.pathname + window.location.search + window.location.hash; const pageId = fullPath.replace(/[^a-zA-Z0-9]/g, '_').replace(/__+/g, '_') || '_default'; return `${baseKey}_${pageId}`; }; // Get ClickUp credentials from localStorage with page-specific key const storageKey = getPageSpecificKey('clickupCredentials'); const savedCredentials = localStorage.getItem(storageKey); if (savedCredentials) { const credentials = JSON.parse(savedCredentials); if (credentials.apiKey && credentials.milestoneTaskId) { // Send milestone notification to ClickUp // Format scholarship amount for the comment const scholarshipAmount = milestone.scholarship.toLocaleString(); // Create the milestone data object with formatted scholarship const milestoneData = { days: milestone.days, scholarship: scholarshipAmount, giftPoints: milestone.giftPoints, imageUrl: getMilestoneImage(milestones.findIndex(m => m.days === milestone.days)) }; // Call the ClickUp service to add a comment import('clickupService').then(({ clickupService }) => { clickupService.addMilestoneComment(credentials, credentials.milestoneTaskId, milestoneData) .then(response => { // Milestone notification sent successfully }) .catch(error => { console.error('Failed to send milestone notification to ClickUp'); }); }); } else { // Missing required ClickUp credentials } } else { // No credentials found in storage } } catch (error) { console.error('Error sending milestone notification to ClickUp'); } // Add the milestone to the commented list and save to localStorage const updatedCommentedMilestones = [...commentedMilestones, milestone.days]; setCommentedMilestones(updatedCommentedMilestones); const storageKey = getPageSpecificKey('commentedMilestones'); localStorage.setItem(storageKey, JSON.stringify(updatedCommentedMilestones)); }, [milestones, getMilestoneImage, commentedMilestones]); // Removed currentDays, lastCelebratedDay - already handled // Check if we need to show celebration when currentDays changes useEffect(() => { // Only check if we should show celebration when currentDays changes and is greater than zero if (currentDays <= 0 || currentDays <= lastCelebratedDay) return; // Tìm cột mốc huy hiệu cao nhất đã đạt được const highestCompletedMilestone = [...milestones] .filter(m => currentDays >= m.days) .sort((a, b) => b.days - a.days)[0]; // Check if a new, higher milestone has been reached AND if its celebration hasn't been shown yet if (highestCompletedMilestone && highestCompletedMilestone.days > lastCelebratedDay && !celebratedMilestonesPopup.includes(highestCompletedMilestone.days)) { // Show celebration popup setCelebratedMilestone(highestCompletedMilestone); setCelebrationOpen(true); setLastCelebratedDay(highestCompletedMilestone.days); // Update the highest day celebrated // Mark this milestone's popup as shown and save to localStorage const updatedCelebratedPopups = [...celebratedMilestonesPopup, highestCompletedMilestone.days]; setCelebratedMilestonesPopup(updatedCelebratedPopups); const popupStorageKey = getPageSpecificKey('celebratedMilestonesPopup'); localStorage.setItem(popupStorageKey, JSON.stringify(updatedCelebratedPopups)); // Log that the popup is being activated // Celebration popup activated for milestone // Send notification comment to ClickUp (this can still happen even if the popup doesn't show again) addMilestoneCommentToClickUp(highestCompletedMilestone); } else if (highestCompletedMilestone && currentDays >= highestCompletedMilestone.days && !commentedMilestones.includes(highestCompletedMilestone.days)) { // Ensure comment is sent even if popup was already shown but comment failed previously addMilestoneCommentToClickUp(highestCompletedMilestone); } }, [currentDays, lastCelebratedDay, milestones, addMilestoneCommentToClickUp, celebratedMilestonesPopup, commentedMilestones]); // Added dependencies // Trigger confetti when celebration opens useEffect(() => { if (celebrationOpen) { // Fire confetti from multiple origins const duration = 3 * 1000; // 3 seconds const animationEnd = Date.now() + duration; const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 1100 }; // Ensure confetti is above modal function randomInRange(min, max) { return Math.random() * (max - min) + min; } const interval = setInterval(function() { const timeLeft = animationEnd - Date.now(); if (timeLeft <= 0) { return clearInterval(interval); } const particleCount = 50 * (timeLeft / duration); // since particles fall down, start a bit higher than random confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } })); confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } })); }, 250); // Cleanup interval on component unmount or when celebration closes return () => clearInterval(interval); } }, [celebrationOpen]); // Auto-scroll to active milestone when component loads useEffect(() => { if (currentDays > 0) { // Find the active milestone const activeMilestoneIndex = milestones.findIndex((milestone, index) => { return currentDays < milestone.days && (index === 0 || currentDays >= milestones[index-1].days); }); // If we have an active milestone, scroll to it if (activeMilestoneIndex >= 0) { setTimeout(() => { const timelineItems = document.querySelectorAll('.timeline-item'); if (timelineItems && timelineItems[activeMilestoneIndex]) { timelineItems[activeMilestoneIndex].scrollIntoView({ behavior: 'smooth', block: 'center' }); } }, 500); // Small delay to ensure DOM is ready } } }, [currentDays, milestones]); // Close celebration popup handler with useCallback const handleCloseCelebration = useCallback(() => { setCelebrationOpen(false); }, []); return (

{/* Central Timeline */}

{/* Gold glow effect */}

{/* Milestone Items */} {milestones.map((milestone, index) => { const isLeft = index % 2 === 0; // Use the passed currentDays prop to determine completion and active state 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 ? '🎖️' : '🎖️'} ĐIỀU KIỆN }

{milestone.days}

HUY HIỆU

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

{/* Học Bổng Chiến Thắng */}

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

{/* Điểm Đổi Quà */}

{/* Gift points image */}

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

)}

{/* Gift points description */}

{/* Gift points value */}

{milestone.giftPoints} Điểm

{/* Gift points description */}

Gift Points

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

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

); }; // Export styles for possible reuse in other components export const timelineStyles = styles; // Add compact loading status bar component for synchronization export const SyncLoadingOverlay = ({ isVisible }) => { if (!isVisible) return null; return (

Đang đồng bộ dữ liệu

); }; // Add a fallback function to calculate scholarship amount based on days export const calculateScholarshipAmount = (days) => { // Find highest milestone achieved and get corresponding scholarship amount const milestones = [10, 30, 60, 90, 120, 180, 240, 360]; const scholarshipAmounts = [200000, 400000, 600000, 1000000, 2000000, 3000000, 5000000, 10000000]; let amount = 0; for (let i = milestones.length - 1; i >= 0; i--) { if (days >= milestones[i]) { amount = scholarshipAmounts[i]; break; } } return amount; }; // DailyGoalItem component const DailyGoalItem = ({ goal, isCompleted }) => { return (

{isCompleted && ✓}

{goal.title}

{goal.description}

); };2d:T25c4,import React, { useMemo, useEffect, useState } from 'react'; import { clickupService, getPageSpecificKey } from 'clickupService'; export const GoalStats = ({ userProgress = {} }) => { const totalBadges = userProgress.totalBadges || 0; // Calculate reward points based on current badges const { totalGiftPoints, totalScholarship } = useMemo(() => { // Danh sách các cột mốc huy hiệu và phần thưởng tương ứng const milestones = [ { days: 3, giftPoints: 500, scholarship: 500000 }, // 3 huy hiệu { days: 5, giftPoints: 1000, scholarship: 1000000 }, // 5 huy hiệu { days: 7, giftPoints: 2000, scholarship: 2000000 }, // 7 huy hiệu { days: 10, giftPoints: 3000, scholarship: 4000000 },// 10 huy hiệu { days: 15, giftPoints: 4000, scholarship: 6000000 },// 15 huy hiệu { days: 20, giftPoints: 5000, scholarship: 8000000 },// 20 huy hiệu { days: 30, giftPoints: 6000, scholarship: 10000000 },// 30 huy hiệu { days: 45, giftPoints: 8000, scholarship: 20000000 } // 45 huy hiệu ]; let totalGiftPoints = 0; let totalScholarship = 0; for (const milestone of milestones) { if (totalBadges >= milestone.days) { totalGiftPoints += milestone.giftPoints; totalScholarship += milestone.scholarship; } else { break; } } // Return calculated values return { totalGiftPoints, totalScholarship }; }, [totalBadges]); // State để theo dõi giá trị trước đó của totalGiftPoints và totalScholarship const [prevGiftPoints, setPrevGiftPoints] = useState(0); const [prevScholarship, setPrevScholarship] = useState(0); // Effect để đồng bộ điểm đổi quà vào ClickUp khi có thay đổi useEffect(() => { // Kiểm tra nếu điểm đổi quà đã thay đổi và khác 0 if (totalGiftPoints !== prevGiftPoints && totalGiftPoints > 0) { // Lấy thông tin xác thực từ localStorage const storageKey = getPageSpecificKey('clickupCredentials'); const savedCredentials = localStorage.getItem(storageKey); if (savedCredentials) { try { const credentials = JSON.parse(savedCredentials); // Kiểm tra xem có đủ thông tin cần thiết để đồng bộ không if (credentials.apiKey && credentials.milestoneTaskId && credentials.giftPointsFieldId) { // Sync gift points to ClickUp // Gọi API để cập nhật điểm đổi quà clickupService.updateGiftPoints(credentials, credentials.milestoneTaskId, totalGiftPoints) .then(response => { // Gift points sync successful }) .catch(error => { console.error('Lỗi khi đồng bộ điểm đổi quà:', error); }); } else { // Missing required credentials for gift points sync } } catch (error) { console.error('Lỗi khi xử lý thông tin xác thực:', error); } } else { // No ClickUp credentials found } } // Cập nhật giá trị trước đó sau khi xử lý setPrevGiftPoints(totalGiftPoints); }, [totalGiftPoints, prevGiftPoints]); // Effect để đồng bộ học bổng vào ClickUp khi có thay đổi useEffect(() => { // Kiểm tra nếu học bổng đã thay đổi và khác 0 if (totalScholarship !== prevScholarship && totalScholarship > 0) { // Lấy thông tin xác thực từ localStorage const storageKey = getPageSpecificKey('clickupCredentials'); const savedCredentials = localStorage.getItem(storageKey); if (savedCredentials) { try { const credentials = JSON.parse(savedCredentials); // Kiểm tra xem có đủ thông tin cần thiết để đồng bộ không if (credentials.apiKey && credentials.milestoneTaskId && credentials.scholarshipFieldId) { // Sync scholarship to ClickUp // Gọi API để cập nhật học bổng clickupService.updateScholarship(credentials, credentials.milestoneTaskId, totalScholarship) .then(response => { // Scholarship sync successful }) .catch(error => { console.error('Lỗi khi đồng bộ học bổng:', error); }); } else { // Missing required credentials for scholarship sync } } catch (error) { console.error('Lỗi khi xử lý thông tin xác thực:', error); } } else { // No ClickUp credentials found } } // Cập nhật giá trị trước đó sau khi xử lý setPrevScholarship(totalScholarship); }, [totalScholarship, prevScholarship]); return (

{/* Gold accent line at top */}

{/* Goals Completed */} {/* Gift Points */} } title="Điểm Đổi Quà" value={totalGiftPoints} /> {/* Total Points */} } title="Học Bổng Chiến Thắng" value={`${totalScholarship.toLocaleString()}`} />

{/* Gold accent line at bottom */}

); }; const StatItem = ({ icon, title, value }) => { let formattedValue = value; if (title === "Học Bổng Chiến Thắng" && typeof value === 'string') { // Extract VNĐ and apply formatting to the numeric part if (value.includes('VNĐ')) { const parts = value.split('VNĐ'); formattedValue = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, "."); } else { formattedValue = value.replace(/\B(?=(\d{3})+(?!\d))/g, "."); } } return (

{typeof icon === 'string' ? icon : icon}

{title}

{formattedValue} {title === "Điểm Đổi Quà" && ( Gift Points )} {title === "Học Bổng Chiến Thắng" && ( VNĐ )}

); };2e:T403,import React, { createContext, useContext } from 'react'; const ThemeContext = createContext(); export function useTheme() { return useContext(ThemeContext); } export function ThemeProvider({ children }) { const theme = { colors: { primary: '#F0B429', secondary: '#DE911D', gradient: 'linear-gradient(90deg, #F0B429 0%, #F6AD55 100%)', gradientHover: 'linear-gradient(90deg, #DE911D 0%, #ED8936 100%)', buttonGradient: 'linear-gradient(90deg, #F0B429 0%, #F6AD55 100%)', textPrimary: '#FFFFFF', textSecondary: '#B3B3B3', cardBg: '#222222', pageBg: '#111111', border: '#333333', inputBg: '#2A2A2A', info: '#3182CE', infoBg: '#1A365D', success: '#38A169', successBg: '#1C4532', error: '#C53030', errorBg: '#461818', progressBg: '#333333', highlight: '#F0B429', goldText: '#F0B429' } }; return ( {children} ); }2f: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ộ.

); }30: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":"fd903973-d6fe-4b59-ae84-3b2c3d687c3a"}],["$","$L25",null,{"mode":"Multifile","files":[{"id":"656e5387-7fe6-4d10-bc7b-c9ccedae2802","name":"App.jsx","path":"/","permissions":"rw","content":"$26","metadata":{},"revision":"20396850-25e2-4e4b-834b-7235d911fa96","created":"2025-05-13T19:27:10.961659Z","modified":"2025-05-13T19:27:10.961672Z","in_llm_context":false},{"id":"0c63f9b0-60f9-424a-b247-a18ee0e3f38c","name":"MilestoneCelebration.js","path":"/","permissions":"rw","content":"$27","metadata":{},"revision":"20396850-25e2-4e4b-834b-7235d911fa96","created":"2025-05-13T19:27:10.961699Z","modified":"2025-05-13T19:27:10.961704Z","in_llm_context":false},{"id":"678c6ea5-7402-4808-b241-6574ba399b41","name":"SyncForm.jsx","path":"/","permissions":"rw","content":"$28","metadata":{},"revision":"20396850-25e2-4e4b-834b-7235d911fa96","created":"2025-05-13T19:27:10.961719Z","modified":"2025-05-13T19:27:10.961723Z","in_llm_context":true},{"id":"07759d46-6730-450f-95e7-18070b2ec166","name":"RewardLadder.js","path":"/","permissions":"rw","content":"$29","metadata":{},"revision":"20396850-25e2-4e4b-834b-7235d911fa96","created":"2025-05-13T19:27:10.961737Z","modified":"2025-05-13T19:27:10.961741Z","in_llm_context":true},{"id":"9920f10b-512c-4a9b-b4ad-f2b492d5aaaf","name":"styles.js","path":"/","permissions":"rw","content":"$2a","metadata":{},"revision":"20396850-25e2-4e4b-834b-7235d911fa96","created":"2025-05-13T19:27:10.961754Z","modified":"2025-05-13T19:27:10.961758Z","in_llm_context":false},{"id":"09d97914-ef43-4267-9018-49b4bfa27401","name":"clickupService.js","path":"/","permissions":"rw","content":"$2b","metadata":{},"revision":"20396850-25e2-4e4b-834b-7235d911fa96","created":"2025-05-13T19:27:10.961771Z","modified":"2025-05-13T19:27:10.961774Z","in_llm_context":true},{"id":"928392bc-e2a0-4466-ab4c-130f85257924","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// Render ứng dụng\nconst root = ReactDOM.createRoot(container);\nroot.render();","metadata":{},"revision":"20396850-25e2-4e4b-834b-7235d911fa96","created":"2025-05-13T19:27:10.961787Z","modified":"2025-05-13T19:27:10.961791Z","in_llm_context":true},{"id":"ed96b51a-cd75-430a-ae6c-832ae79013c7","name":"TimelineMilestones.js","path":"/","permissions":"rw","content":"$2c","metadata":{},"revision":"20396850-25e2-4e4b-834b-7235d911fa96","created":"2025-05-13T19:27:10.961805Z","modified":"2025-05-13T19:27:10.961808Z","in_llm_context":true},{"id":"a6c237ac-5a70-4d39-afc5-23f423fe091f","name":"GoalStats.js","path":"/","permissions":"rw","content":"$2d","metadata":{},"revision":"20396850-25e2-4e4b-834b-7235d911fa96","created":"2025-05-13T19:27:10.961821Z","modified":"2025-05-13T19:27:10.961825Z","in_llm_context":false},{"id":"caab2eb1-cbda-4f19-845c-6166bb7f4526","name":"ThemeContext.jsx","path":"/","permissions":"rw","content":"$2e","metadata":{},"revision":"20396850-25e2-4e4b-834b-7235d911fa96","created":"2025-05-13T19:27:10.961838Z","modified":"2025-05-13T19:27:10.961842Z","in_llm_context":true},{"id":"208886a7-f1ce-44bc-a308-8fcabeedb107","name":"Header.jsx","path":"/","permissions":"rw","content":"$2f","metadata":{},"revision":"20396850-25e2-4e4b-834b-7235d911fa96","created":"2025-05-13T19:27:10.961855Z","modified":"2025-05-13T19:27:10.961858Z","in_llm_context":false},{"id":"65966a90-b357-4134-9d98-09b1a2babe9d","name":"SyncStatus.jsx","path":"/","permissions":"rw","content":"$30","metadata":{},"revision":"20396850-25e2-4e4b-834b-7235d911fa96","created":"2025-05-13T19:27:10.961872Z","modified":"2025-05-13T19:27:10.961876Z","in_llm_context":true}],"projectId":"fd903973-d6fe-4b59-ae84-3b2c3d687c3a"}]]}]