{"id":7,"date":"2025-07-13T07:03:15","date_gmt":"2025-07-13T06:03:15","guid":{"rendered":"https:\/\/treker.cboost.ru\/?page_id=7"},"modified":"2025-07-13T07:03:15","modified_gmt":"2025-07-13T06:03:15","slug":"home","status":"publish","type":"page","link":"https:\/\/treker.cboost.ru\/?page_id=7","title":{"rendered":"home"},"content":{"rendered":"<p>[et_pb_section fb_built=&#187;1&#8243; theme_builder_area=&#187;post_content&#187; _builder_version=&#187;4.27.4&#8243; _module_preset=&#187;default&#187;][et_pb_row _builder_version=&#187;4.27.4&#8243; _module_preset=&#187;default&#187; theme_builder_area=&#187;post_content&#187;][et_pb_column _builder_version=&#187;4.27.4&#8243; _module_preset=&#187;default&#187; type=&#187;4_4&#8243; theme_builder_area=&#187;post_content&#187;][et_pb_code _builder_version=&#187;4.27.4&#8243; _module_preset=&#187;default&#187; theme_builder_area=&#187;post_content&#187; hover_enabled=&#187;0&#8243; sticky_enabled=&#187;0&#8243;]import React, { useState, useEffect, useCallback } from &#8216;react&#8217;;<!-- [et_pb_line_break_holder] -->import { initializeApp } from &#8216;firebase\/app&#8217;;<!-- [et_pb_line_break_holder] -->import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from &#8216;firebase\/auth&#8217;;<!-- [et_pb_line_break_holder] -->import { getFirestore, doc, getDoc, setDoc, updateDoc, onSnapshot, collection, query, addDoc, deleteDoc, getDocs } from &#8216;firebase\/firestore&#8217;;<!-- [et_pb_line_break_holder] -->import { CalendarDays, Plus, X, Settings, BarChart, Sun, Moon, Briefcase, Heart, Users, BookOpen, Brush, Lightbulb, DollarSign, TrendingUp, ChevronLeft, ChevronRight, Brain, Dumbbell, Utensils, Coffee, Newspaper } from &#8216;lucide-react&#8217;;<!-- [et_pb_line_break_holder] -->import { Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from &#8216;recharts&#8217;;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/\/ Tailwind CSS is assumed to be available<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/\/ Global variables for Firebase configuration (provided by the environment)<!-- [et_pb_line_break_holder] -->const appId = typeof __app_id !== &#8216;undefined&#8217; ? __app_id : &#8216;default-app-id&#8217;;<!-- [et_pb_line_break_holder] -->const firebaseConfig = typeof __firebase_config !== &#8216;undefined&#8217; ? JSON.parse(__firebase_config) : {};<!-- [et_pb_line_break_holder] -->const initialAuthToken = typeof __initial_auth_token !== &#8216;undefined&#8217; ? initialAuthToken : null;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/\/ Initialize Firebase outside of the component to avoid re-initialization<!-- [et_pb_line_break_holder] -->let app, db, auth;<!-- [et_pb_line_break_holder] -->if (Object.keys(firebaseConfig).length > 0) {<!-- [et_pb_line_break_holder] -->    app = initializeApp(firebaseConfig);<!-- [et_pb_line_break_holder] -->    db = getFirestore(app);<!-- [et_pb_line_break_holder] -->    auth = getAuth(app);<!-- [et_pb_line_break_holder] -->} else {<!-- [et_pb_line_break_holder] -->    console.error(&#171;Firebase configuration is missing. Please ensure __firebase_config is provided.&#187;);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/\/ Helper function to get the start of the day in UTC to avoid timezone issues<!-- [et_pb_line_break_holder] -->const getStartOfDay = (date) => {<!-- [et_pb_line_break_holder] -->    const d = new Date(date);<!-- [et_pb_line_break_holder] -->    d.setUTCHours(0, 0, 0, 0);<!-- [et_pb_line_break_holder] -->    return d.toISOString().split(&#8216;T&#8217;)[0]; \/\/ YYYY-MM-DD format<!-- [et_pb_line_break_holder] -->};<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/\/ Helper function to get a unique ID for a document<!-- [et_pb_line_break_holder] -->const generateUniqueId = () => {<!-- [et_pb_line_break_holder] -->    return Date.now().toString(36) + Math.random().toString(36).substring(2);<!-- [et_pb_line_break_holder] -->};<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->const App = () => {<!-- [et_pb_line_break_holder] -->    const [userId, setUserId] = useState(null);<!-- [et_pb_line_break_holder] -->    const [isAuthReady, setIsAuthReady] = useState(false);<!-- [et_pb_line_break_holder] -->    const [categories, setCategories] = useState([]);<!-- [et_pb_line_break_holder] -->    const [dailyEntries, setDailyEntries] = useState({}); \/\/ { &#8216;YYYY-MM-DD&#8217;: { category: score, &#8230; } }<!-- [et_pb_line_break_holder] -->    const [selectedDate, setSelectedDate] = useState(getStartOfDay(new Date()));<!-- [et_pb_line_break_holder] -->    const [currentMonth, setCurrentMonth] = useState(new Date()); \/\/ For calendar navigation<!-- [et_pb_line_break_holder] -->    const [showEntryModal, setShowEntryModal] = useState(false);<!-- [et_pb_line_break_holder] -->    const [showCategoryModal, setShowCategoryModal] = useState(false);<!-- [et_pb_line_break_holder] -->    const [newCategoryName, setNewCategoryName] = useState(&#187;);<!-- [et_pb_line_break_holder] -->    const [currentEntry, setCurrentEntry] = useState({}); \/\/ For the form inputs<!-- [et_pb_line_break_holder] -->    const [dailyNote, setDailyNote] = useState(&#187;);<!-- [et_pb_line_break_holder] -->    const [workingHours, setWorkingHours] = useState(&#187;);<!-- [et_pb_line_break_holder] -->    const [loading, setLoading] = useState(true);<!-- [et_pb_line_break_holder] -->    const [error, setError] = useState(null);<!-- [et_pb_line_break_holder] -->    const [viewMode, setViewMode] = useState(&#8216;month&#8217;); \/\/ &#8216;day&#8217;, &#8216;week&#8217;, &#8216;month&#8217;, &#8216;year&#8217;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ &#8212; Firebase Authentication and Initialization &#8212;<!-- [et_pb_line_break_holder] -->    useEffect(() => {<!-- [et_pb_line_break_holder] -->        if (!app) {<!-- [et_pb_line_break_holder] -->            setError(&#171;Firebase is not initialized. Check configuration.&#187;);<!-- [et_pb_line_break_holder] -->            setLoading(false);<!-- [et_pb_line_break_holder] -->            return;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const unsubscribe = onAuthStateChanged(auth, async (user) => {<!-- [et_pb_line_break_holder] -->            if (user) {<!-- [et_pb_line_break_holder] -->                setUserId(user.uid);<!-- [et_pb_line_break_holder] -->            } else {<!-- [et_pb_line_break_holder] -->                try {<!-- [et_pb_line_break_holder] -->                    if (initialAuthToken) {<!-- [et_pb_line_break_holder] -->                        await signInWithCustomToken(auth, initialAuthToken);<!-- [et_pb_line_break_holder] -->                    } else {<!-- [et_pb_line_break_holder] -->                        await signInAnonymously(auth);<!-- [et_pb_line_break_holder] -->                    }<!-- [et_pb_line_break_holder] -->                    setUserId(auth.currentUser.uid);<!-- [et_pb_line_break_holder] -->                } catch (e) {<!-- [et_pb_line_break_holder] -->                    console.error(&#171;Error signing in:&#187;, e);<!-- [et_pb_line_break_holder] -->                    setError(&#171;\u041e\u0448\u0438\u0431\u043a\u0430 \u0432\u0445\u043e\u0434\u0430 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443.&#187;);<!-- [et_pb_line_break_holder] -->                }<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            setIsAuthReady(true);<!-- [et_pb_line_break_holder] -->            setLoading(false);<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        return () => unsubscribe();<!-- [et_pb_line_break_holder] -->    }, []);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ &#8212; Fetch Categories and Daily Entries &#8212;<!-- [et_pb_line_break_holder] -->    useEffect(() => {<!-- [et_pb_line_break_holder] -->        if (!isAuthReady || !userId || !db) return;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Fetch Categories<!-- [et_pb_line_break_holder] -->        const categoriesColRef = collection(db, `artifacts\/${appId}\/users\/${userId}\/categories`);<!-- [et_pb_line_break_holder] -->        const unsubscribeCategories = onSnapshot(categoriesColRef, (snapshot) => {<!-- [et_pb_line_break_holder] -->            const fetchedCategories = snapshot.docs.map(doc => ({ id: doc.id, &#8230;doc.data() }));<!-- [et_pb_line_break_holder] -->            if (fetchedCategories.length === 0) {<!-- [et_pb_line_break_holder] -->                \/\/ If no categories, add default ones<!-- [et_pb_line_break_holder] -->                addDefaultCategories(userId);<!-- [et_pb_line_break_holder] -->            } else {<!-- [et_pb_line_break_holder] -->                setCategories(fetchedCategories.sort((a, b) => a.order &#8212; b.order));<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->        }, (err) => {<!-- [et_pb_line_break_holder] -->            console.error(&#171;Error fetching categories:&#187;, err);<!-- [et_pb_line_break_holder] -->            setError(&#171;\u041e\u0448\u0438\u0431\u043a\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439.&#187;);<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Fetch Daily Entries<!-- [et_pb_line_break_holder] -->        const entriesColRef = collection(db, `artifacts\/${appId}\/users\/${userId}\/dailyEntries`);<!-- [et_pb_line_break_holder] -->        const unsubscribeEntries = onSnapshot(entriesColRef, (snapshot) => {<!-- [et_pb_line_break_holder] -->            const fetchedEntries = {};<!-- [et_pb_line_break_holder] -->            snapshot.docs.forEach(doc => {<!-- [et_pb_line_break_holder] -->                fetchedEntries[doc.id] = doc.data(); \/\/ doc.id is the YYYY-MM-DD date string<!-- [et_pb_line_break_holder] -->            });<!-- [et_pb_line_break_holder] -->            setDailyEntries(fetchedEntries);<!-- [et_pb_line_break_holder] -->        }, (err) => {<!-- [et_pb_line_break_holder] -->            console.error(&#171;Error fetching daily entries:&#187;, err);<!-- [et_pb_line_break_holder] -->            setError(&#171;\u041e\u0448\u0438\u0431\u043a\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0435\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u044b\u0445 \u0437\u0430\u043f\u0438\u0441\u0435\u0439.&#187;);<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        return () => {<!-- [et_pb_line_break_holder] -->            unsubscribeCategories();<!-- [et_pb_line_break_holder] -->            unsubscribeEntries();<!-- [et_pb_line_break_holder] -->        };<!-- [et_pb_line_break_holder] -->    }, [isAuthReady, userId, db]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ &#8212; Default Categories &#8212;<!-- [et_pb_line_break_holder] -->    const addDefaultCategories = async (uid) => {<!-- [et_pb_line_break_holder] -->        if (!db || !uid) return;<!-- [et_pb_line_break_holder] -->        const defaultCats = [<!-- [et_pb_line_break_holder] -->            { name: &#171;\u0420\u0430\u0431\u043e\u0442\u0430&#187;, icon: &#171;Briefcase&#187;, order: 1, type: &#171;work&#187;, description: &#171;\u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0438\u0432\u043d\u043e \u0432\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0441\u0435\u0433\u043e\u0434\u043d\u044f? (1-4)&#187; },<!-- [et_pb_line_break_holder] -->            { name: &#171;\u0420\u0430\u0437\u0432\u0438\u0442\u0438\u0435&#187;, icon: &#171;BookOpen&#187;, order: 2, description: &#171;\u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u044b \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u043b\u0438\u0441\u044c \u0432 \u043b\u0438\u0447\u043d\u043e\u043c \u0438\u043b\u0438 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0438? (1-4)&#187; },<!-- [et_pb_line_break_holder] -->            { name: &#171;\u041d\u0435\u0442\u0432\u043e\u0440\u043a\u0438\u043d\u0433&#187;, icon: &#171;Users&#187;, order: 3, description: &#171;\u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0432\u044b \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0438 \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 \u043b\u044e\u0434\u044c\u043c\u0438 \u0438\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u043b\u0438 \u0441\u0432\u044f\u0437\u0438? (1-4)&#187; },<!-- [et_pb_line_break_holder] -->            { name: &#171;\u041c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u0435&#187;, icon: &#171;Brain&#187;, order: 4, description: &#171;\u041a\u0430\u043a \u0432\u044b \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0435\u0442\u0435 \u0441\u0432\u043e\u0435 \u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u0435\u0433\u043e\u0434\u043d\u044f? (1-4)&#187; },<!-- [et_pb_line_break_holder] -->            { name: &#171;\u0424\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u0435&#187;, icon: &#171;Heart&#187;, order: 5, description: &#171;\u041a\u0430\u043a \u0432\u044b \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0435\u0442\u0435 \u0441\u0432\u043e\u0435 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u0430\u043c\u043e\u0447\u0443\u0432\u0441\u0442\u0432\u0438\u0435 \u0441\u0435\u0433\u043e\u0434\u043d\u044f? (1-4)&#187; },<!-- [et_pb_line_break_holder] -->            { name: &#171;\u0421\u043f\u043e\u0440\u0442&#187;, icon: &#171;Dumbbell&#187;, order: 6, description: &#171;\u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u044b \u0431\u044b\u043b\u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u044b \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438? (1-4)&#187; },<!-- [et_pb_line_break_holder] -->            { name: &#171;\u041f\u0438\u0442\u0430\u043d\u0438\u0435&#187;, icon: &#171;Utensils&#187;, order: 7, description: &#171;\u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u0432\u044b \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u0437\u0434\u043e\u0440\u043e\u0432\u043e\u0433\u043e \u043f\u0438\u0442\u0430\u043d\u0438\u044f? (1-4)&#187; },<!-- [et_pb_line_break_holder] -->            { name: &#171;\u041e\u0442\u0434\u044b\u0445\/\u0414\u043e\u0441\u0443\u0433&#187;, icon: &#171;Coffee&#187;, order: 8, description: &#171;\u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u044b \u043e\u0442\u0434\u043e\u0445\u043d\u0443\u043b\u0438 \u0438 \u043f\u0440\u043e\u0432\u0435\u043b\u0438 \u0434\u043e\u0441\u0443\u0433? (1-4)&#187; },<!-- [et_pb_line_break_holder] -->            { name: &#171;\u0418\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439&#187;, icon: &#171;Newspaper&#187;, order: 9, description: &#171;\u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u043d\u043e\u0432\u043e\u0441\u0442\u0438 \u0432\u044b \u0438\u0437\u0443\u0447\u0438\u043b\u0438 \u0438 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0432\u044b\u0432\u043e\u0434\u044b? (1-4)&#187; },<!-- [et_pb_line_break_holder] -->            { name: &#171;\u041f\u043b\u0430\u043d\u044b&#187;, icon: &#171;Lightbulb&#187;, order: 10, description: &#171;\u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u0432\u044b \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043b\u0438 \u0441\u0432\u043e\u0438\u043c \u043f\u043b\u0430\u043d\u0430\u043c \u0438 \u0446\u0435\u043b\u044f\u043c? (1-4)&#187; },<!-- [et_pb_line_break_holder] -->            { name: &#171;\u0421\u0435\u043c\u044c\u044f&#187;, icon: &#171;Users&#187;, order: 11, description: &#171;\u0421\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0432\u044b \u043f\u0440\u043e\u0432\u0435\u043b\u0438 \u0441 \u0441\u0435\u043c\u044c\u0435\u0439? (1-4)&#187; },<!-- [et_pb_line_break_holder] -->            { name: &#171;\u0425\u043e\u0431\u0431\u0438&#187;, icon: &#171;Brush&#187;, order: 12, description: &#171;\u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u044b \u0431\u044b\u043b\u0438 \u0432\u043e\u0432\u043b\u0435\u0447\u0435\u043d\u044b \u0432 \u0441\u0432\u043e\u0438 \u0445\u043e\u0431\u0431\u0438 \u0438 \u0442\u0432\u043e\u0440\u0447\u0435\u0441\u0442\u0432\u043e? (1-4)&#187; },<!-- [et_pb_line_break_holder] -->            { name: &#171;\u0421\u043e\u043d&#187;, icon: &#171;Moon&#187;, order: 13, description: &#171;\u041a\u0430\u043a \u0432\u044b \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0435\u0442\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u043d\u0430? (1-4)&#187; }<!-- [et_pb_line_break_holder] -->        ];<!-- [et_pb_line_break_holder] -->        const batch = [];<!-- [et_pb_line_break_holder] -->        for (const cat of defaultCats) {<!-- [et_pb_line_break_holder] -->            const docRef = doc(collection(db, `artifacts\/${appId}\/users\/${uid}\/categories`), generateUniqueId());<!-- [et_pb_line_break_holder] -->            batch.push(setDoc(docRef, cat));<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        try {<!-- [et_pb_line_break_holder] -->            await Promise.all(batch);<!-- [et_pb_line_break_holder] -->            console.log(&#171;Default categories added.&#187;);<!-- [et_pb_line_break_holder] -->        } catch (e) {<!-- [et_pb_line_break_holder] -->            console.error(&#171;Error adding default categories:&#187;, e);<!-- [et_pb_line_break_holder] -->            setError(&#171;\u041e\u0448\u0438\u0431\u043a\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.&#187;);<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->    };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ &#8212; Calendar Navigation &#8212;<!-- [et_pb_line_break_holder] -->    const changeMonth = (offset) => {<!-- [et_pb_line_break_holder] -->        setCurrentMonth(prev => {<!-- [et_pb_line_break_holder] -->            const newMonth = new Date(prev);<!-- [et_pb_line_break_holder] -->            newMonth.setMonth(prev.getMonth() + offset);<!-- [et_pb_line_break_holder] -->            return newMonth;<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] -->    };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ &#8212; Daily Entry Logic &#8212;<!-- [et_pb_line_break_holder] -->    const handleDayClick = (dateString) => {<!-- [et_pb_line_break_holder] -->        setSelectedDate(dateString);<!-- [et_pb_line_break_holder] -->        const entry = dailyEntries[dateString];<!-- [et_pb_line_break_holder] -->        if (entry) {<!-- [et_pb_line_break_holder] -->            setCurrentEntry(entry.scores || {});<!-- [et_pb_line_break_holder] -->            setDailyNote(entry.note || &#187;);<!-- [et_pb_line_break_holder] -->            setWorkingHours(entry.workingHours || &#187;);<!-- [et_pb_line_break_holder] -->        } else {<!-- [et_pb_line_break_holder] -->            setCurrentEntry({});<!-- [et_pb_line_break_holder] -->            setDailyNote(&#187;);<!-- [et_pb_line_break_holder] -->            setWorkingHours(&#187;);<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        setShowEntryModal(true);<!-- [et_pb_line_break_holder] -->    };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const handleScoreChange = (categoryName, score) => {<!-- [et_pb_line_break_holder] -->        setCurrentEntry(prev => ({ &#8230;prev, [categoryName]: score }));<!-- [et_pb_line_break_holder] -->    };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const saveDailyEntry = async () => {<!-- [et_pb_line_break_holder] -->        if (!userId || !db) {<!-- [et_pb_line_break_holder] -->            setError(&#171;\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d \u0438\u043b\u0438 \u0431\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430.&#187;);<!-- [et_pb_line_break_holder] -->            return;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const entryRef = doc(db, `artifacts\/${appId}\/users\/${userId}\/dailyEntries`, selectedDate);<!-- [et_pb_line_break_holder] -->        const dataToSave = {<!-- [et_pb_line_break_holder] -->            date: selectedDate,<!-- [et_pb_line_break_holder] -->            scores: currentEntry,<!-- [et_pb_line_break_holder] -->            note: dailyNote,<!-- [et_pb_line_break_holder] -->            workingHours: workingHours,<!-- [et_pb_line_break_holder] -->            timestamp: new Date().toISOString()<!-- [et_pb_line_break_holder] -->        };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        try {<!-- [et_pb_line_break_holder] -->            await setDoc(entryRef, dataToSave, { merge: true });<!-- [et_pb_line_break_holder] -->            console.log(&#171;Daily entry saved for&#187;, selectedDate);<!-- [et_pb_line_break_holder] -->            setShowEntryModal(false);<!-- [et_pb_line_break_holder] -->        } catch (e) {<!-- [et_pb_line_break_holder] -->            console.error(&#171;Error saving daily entry:&#187;, e);<!-- [et_pb_line_break_holder] -->            setError(&#171;\u041e\u0448\u0438\u0431\u043a\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0438\u0441\u0438.&#187;);<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->    };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ &#8212; Category Management Logic &#8212;<!-- [et_pb_line_break_holder] -->    const addCategory = async () => {<!-- [et_pb_line_break_holder] -->        if (!newCategoryName.trim() || !userId || !db) return;<!-- [et_pb_line_break_holder] -->        const newCat = {<!-- [et_pb_line_break_holder] -->            name: newCategoryName.trim(),<!-- [et_pb_line_break_holder] -->            icon: &#171;Lightbulb&#187;, \/\/ Default icon, can be improved later<!-- [et_pb_line_break_holder] -->            order: categories.length + 1,<!-- [et_pb_line_break_holder] -->            description: `\u041a\u0430\u043a \u0432\u044b \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0435\u0442\u0435 &#171;${newCategoryName.trim()}&#187; \u0441\u0435\u0433\u043e\u0434\u043d\u044f? (1-4)`<!-- [et_pb_line_break_holder] -->        };<!-- [et_pb_line_break_holder] -->        try {<!-- [et_pb_line_break_holder] -->            await addDoc(collection(db, `artifacts\/${appId}\/users\/${userId}\/categories`), newCat);<!-- [et_pb_line_break_holder] -->            setNewCategoryName(&#187;);<!-- [et_pb_line_break_holder] -->        } catch (e) {<!-- [et_pb_line_break_holder] -->            console.error(&#171;Error adding category:&#187;, e);<!-- [et_pb_line_break_holder] -->            setError(&#171;\u041e\u0448\u0438\u0431\u043a\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438.&#187;);<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->    };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const deleteCategory = async (id) => {<!-- [et_pb_line_break_holder] -->        if (!userId || !db) return;<!-- [et_pb_line_break_holder] -->        try {<!-- [et_pb_line_break_holder] -->            await deleteDoc(doc(db, `artifacts\/${appId}\/users\/${userId}\/categories`, id));<!-- [et_pb_line_break_holder] -->        } catch (e) {<!-- [et_pb_line_break_holder] -->            console.error(&#171;Error deleting category:&#187;, e);<!-- [et_pb_line_break_holder] -->            setError(&#171;\u041e\u0448\u0438\u0431\u043a\u0430 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438.&#187;);<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->    };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ &#8212; Statistics Calculation &#8212;<!-- [et_pb_line_break_holder] -->    const calculateDailyAverage = useCallback((dateString) => {<!-- [et_pb_line_break_holder] -->        const entry = dailyEntries[dateString];<!-- [et_pb_line_break_holder] -->        if (!entry || !entry.scores) return 0;<!-- [et_pb_line_break_holder] -->        const scores = Object.values(entry.scores).filter(score => typeof score === &#8216;number&#8217; &#038;&#038; score > 0);<!-- [et_pb_line_break_holder] -->        if (scores.length === 0) return 0;<!-- [et_pb_line_break_holder] -->        return scores.reduce((sum, score) => sum + score, 0) \/ scores.length;<!-- [et_pb_line_break_holder] -->    }, [dailyEntries]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const getMonthData = useCallback(() => {<!-- [et_pb_line_break_holder] -->        const year = currentMonth.getFullYear();<!-- [et_pb_line_break_holder] -->        const month = currentMonth.getMonth();<!-- [et_pb_line_break_holder] -->        const firstDayOfMonth = new Date(year, month, 1);<!-- [et_pb_line_break_holder] -->        const lastDayOfMonth = new Date(year, month + 1, 0);<!-- [et_pb_line_break_holder] -->        const daysInMonth = lastDayOfMonth.getDate();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const calendarDays = [];<!-- [et_pb_line_break_holder] -->        \/\/ Add leading empty days for the start of the week<!-- [et_pb_line_break_holder] -->        const startDayOfWeek = firstDayOfMonth.getDay(); \/\/ 0 for Sunday, 1 for Monday<!-- [et_pb_line_break_holder] -->        const offset = startDayOfWeek === 0 ? 6 : startDayOfWeek &#8212; 1; \/\/ Adjust for Monday start<!-- [et_pb_line_break_holder] -->        for (let i = 0; i < offset; i++) {<!-- [et_pb_line_break_holder] -->            calendarDays.push(null);<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        for (let i = 1; i <= daysInMonth; i++) {<!-- [et_pb_line_break_holder] -->            const date = new Date(year, month, i);<!-- [et_pb_line_break_holder] -->            calendarDays.push(getStartOfDay(date));<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        return calendarDays;<!-- [et_pb_line_break_holder] -->    }, [currentMonth]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const getScoreColor = (score) => {<!-- [et_pb_line_break_holder] -->        if (score === 0) return &#8216;bg-gray-200&#8217;;<!-- [et_pb_line_break_holder] -->        if (score > 3.5) return &#8216;bg-green-400&#8217;;<!-- [et_pb_line_break_holder] -->        if (score > 2.5) return &#8216;bg-yellow-400&#8217;;<!-- [et_pb_line_break_holder] -->        if (score > 1.5) return &#8216;bg-orange-400&#8217;;<!-- [et_pb_line_break_holder] -->        return &#8216;bg-red-400&#8217;;<!-- [et_pb_line_break_holder] -->    };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const getIconComponent = (iconName) => {<!-- [et_pb_line_break_holder] -->        switch (iconName) {<!-- [et_pb_line_break_holder] -->            case &#8216;CalendarDays&#8217;: return <CalendarDays size={16} \/>;<!-- [et_pb_line_break_holder] -->            case &#8216;Plus&#8217;: return <Plus size={16} \/>;<!-- [et_pb_line_break_holder] -->            case &#8216;X&#8217;: return <X size={16} \/>;<!-- [et_pb_line_break_holder] -->            case &#8216;Settings&#8217;: return <Settings size={16} \/>;<!-- [et_pb_line_break_holder] -->            case &#8216;BarChart&#8217;: return <BarChart size={16} \/>;<!-- [et_pb_line_break_holder] -->            case &#8216;Sun&#8217;: return <Sun size={16} \/>;<!-- [et_pb_line_break_holder] -->            case &#8216;Moon&#8217;: return <Moon size={16} \/>;<!-- [et_pb_line_break_holder] -->            case &#8216;Briefcase&#8217;: return <Briefcase size={16} \/>;<!-- [et_pb_line_break_holder] -->            case &#8216;Heart&#8217;: return <Heart size={16} \/>; \/\/ \u0424\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u0435<!-- [et_pb_line_break_holder] -->            case &#8216;Brain&#8217;: return <Brain size={16} \/>; \/\/ \u041c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u0435<!-- [et_pb_line_break_holder] -->            case &#8216;Dumbbell&#8217;: return <Dumbbell size={16} \/>; \/\/ \u0421\u043f\u043e\u0440\u0442<!-- [et_pb_line_break_holder] -->            case &#8216;Utensils&#8217;: return <Utensils size={16} \/>; \/\/ \u041f\u0438\u0442\u0430\u043d\u0438\u0435<!-- [et_pb_line_break_holder] -->            case &#8216;Coffee&#8217;: return <Coffee size={16} \/>; \/\/ \u041e\u0442\u0434\u044b\u0445\/\u0414\u043e\u0441\u0443\u0433 (\u0438\u043b\u0438 Relax, but Coffee is available in Lucide)<!-- [et_pb_line_break_holder] -->            case &#8216;Newspaper&#8217;: return <Newspaper size={16} \/>; \/\/ \u0418\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439<!-- [et_pb_line_break_holder] -->            case &#8216;Users&#8217;: return <Users size={16} \/>;<!-- [et_pb_line_break_holder] -->            case &#8216;BookOpen&#8217;: return <BookOpen size={16} \/>;<!-- [et_pb_line_break_holder] -->            case &#8216;Brush&#8217;: return <Brush size={16} \/>;<!-- [et_pb_line_break_holder] -->            case &#8216;Lightbulb&#8217;: return <Lightbulb size={16} \/>;<!-- [et_pb_line_break_holder] -->            case &#8216;DollarSign&#8217;: return <DollarSign size={16} \/>;<!-- [et_pb_line_break_holder] -->            case &#8216;TrendingUp&#8217;: return <TrendingUp size={16} \/>;<!-- [et_pb_line_break_holder] -->            default: return <Lightbulb size={16} \/>; \/\/ Default icon<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->    };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ &#8212; Render Statistics based on ViewMode &#8212;<!-- [et_pb_line_break_holder] -->    const renderStatistics = () => {<!-- [et_pb_line_break_holder] -->        if (Object.keys(dailyEntries).length === 0) {<!-- [et_pb_line_break_holder] -->            return <pee className=\"text-center text-gray-600 mt-4\">\u041d\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0438.<\/pee>;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Helper to filter entries for a given period<!-- [et_pb_line_break_holder] -->        const filterEntriesByPeriod = (startDate, endDate) => {<!-- [et_pb_line_break_holder] -->            return Object.entries(dailyEntries).filter(([dateString, entry]) => {<!-- [et_pb_line_break_holder] -->                const entryDate = new Date(dateString);<!-- [et_pb_line_break_holder] -->                return entryDate >= startDate &#038;&#038; entryDate <= endDate;<!-- [et_pb_line_break_holder] -->            });<!-- [et_pb_line_break_holder] -->        };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Calculate average scores for a given set of entries<!-- [et_pb_line_break_holder] -->        const calculateAverages = (entries) => {<!-- [et_pb_line_break_holder] -->            const categorySums = {};<!-- [et_pb_line_break_holder] -->            const categoryCounts = {};<!-- [et_pb_line_break_holder] -->            let totalOverallScore = 0;<!-- [et_pb_line_break_holder] -->            let totalOverallCount = 0;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            entries.forEach(([dateString, entry]) => {<!-- [et_pb_line_break_holder] -->                if (entry.scores) {<!-- [et_pb_line_break_holder] -->                    Object.entries(entry.scores).forEach(([categoryName, score]) => {<!-- [et_pb_line_break_holder] -->                        if (typeof score === &#8216;number&#8217; &#038;&#038; score > 0) {<!-- [et_pb_line_break_holder] -->                            categorySums[categoryName] = (categorySums[categoryName] || 0) + score;<!-- [et_pb_line_break_holder] -->                            categoryCounts[categoryName] = (categoryCounts[categoryName] || 0) + 1;<!-- [et_pb_line_break_holder] -->                            totalOverallScore += score;<!-- [et_pb_line_break_holder] -->                            totalOverallCount++;<!-- [et_pb_line_break_holder] -->                        }<!-- [et_pb_line_break_holder] -->                    });<!-- [et_pb_line_break_holder] -->                }<!-- [et_pb_line_break_holder] -->            });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            const averages = {};<!-- [et_pb_line_break_holder] -->            for (const cat of categories) {<!-- [et_pb_line_break_holder] -->                averages[cat.name] = categoryCounts[cat.name] ? (categorySums[cat.name] \/ categoryCounts[cat.name]).toFixed(2) : &#8216;N\/A&#8217;;<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            const overallAverage = totalOverallCount ? (totalOverallScore \/ totalOverallCount).toFixed(2) : &#8216;N\/A&#8217;;<!-- [et_pb_line_break_holder] -->            return { averages, overallAverage };<!-- [et_pb_line_break_holder] -->        };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        let periodEntries = [];<!-- [et_pb_line_break_holder] -->        let periodTitle = &#187;;<!-- [et_pb_line_break_holder] -->        let overallPeriodAverage = &#8216;N\/A&#8217;;<!-- [et_pb_line_break_holder] -->        let categoryPeriodAverages = {};<!-- [et_pb_line_break_holder] -->        let lineChartData = []; \/\/ Data for line chart<!-- [et_pb_line_break_holder] -->        let radarChartData = []; \/\/ Data for radar chart<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        switch (viewMode) {<!-- [et_pb_line_break_holder] -->            case &#8216;day&#8217;:<!-- [et_pb_line_break_holder] -->                periodTitle = `\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u0437\u0430 ${selectedDate}`;<!-- [et_pb_line_break_holder] -->                periodEntries = dailyEntries[selectedDate] ? [[selectedDate, dailyEntries[selectedDate]]] : [];<!-- [et_pb_line_break_holder] -->                break;<!-- [et_pb_line_break_holder] -->            case &#8216;week&#8217;:<!-- [et_pb_line_break_holder] -->                const selectedDateObj = new Date(selectedDate);<!-- [et_pb_line_break_holder] -->                const startOfWeek = new Date(selectedDateObj);<!-- [et_pb_line_break_holder] -->                startOfWeek.setDate(selectedDateObj.getDate() &#8212; (selectedDateObj.getDay() === 0 ? 6 : selectedDateObj.getDay() &#8212; 1)); \/\/ Monday start<!-- [et_pb_line_break_holder] -->                startOfWeek.setUTCHours(0, 0, 0, 0);<!-- [et_pb_line_break_holder] -->                const endOfWeek = new Date(startOfWeek);<!-- [et_pb_line_break_holder] -->                endOfWeek.setDate(startOfWeek.getDate() + 6);<!-- [et_pb_line_break_holder] -->                endOfWeek.setUTCHours(23, 59, 59, 999);<!-- [et_pb_line_break_holder] -->                periodTitle = `\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u0437\u0430 \u043d\u0435\u0434\u0435\u043b\u044e (${getStartOfDay(startOfWeek)} &#8212; ${getStartOfDay(endOfWeek)})`;<!-- [et_pb_line_break_holder] -->                periodEntries = filterEntriesByPeriod(startOfWeek, endOfWeek);<!-- [et_pb_line_break_holder] -->                break;<!-- [et_pb_line_break_holder] -->            case &#8216;month&#8217;:<!-- [et_pb_line_break_holder] -->                const startOfMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 1);<!-- [et_pb_line_break_holder] -->                startOfMonth.setUTCHours(0, 0, 0, 0);<!-- [et_pb_line_break_holder] -->                const endOfMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 0);<!-- [et_pb_line_break_holder] -->                endOfMonth.setUTCHours(23, 59, 59, 999);<!-- [et_pb_line_break_holder] -->                periodTitle = `\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u0437\u0430 ${currentMonth.toLocaleString(&#8216;ru-RU&#8217;, { month: &#8216;long&#8217;, year: &#8216;numeric&#8217; })}`;<!-- [et_pb_line_break_holder] -->                periodEntries = filterEntriesByPeriod(startOfMonth, endOfMonth);<!-- [et_pb_line_break_holder] -->                break;<!-- [et_pb_line_break_holder] -->            case &#8216;year&#8217;:<!-- [et_pb_line_break_holder] -->                const startOfYear = new Date(currentMonth.getFullYear(), 0, 1);<!-- [et_pb_line_break_holder] -->                startOfYear.setUTCHours(0, 0, 0, 0);<!-- [et_pb_line_break_holder] -->                const endOfYear = new Date(currentMonth.getFullYear(), 11, 31);<!-- [et_pb_line_break_holder] -->                endOfYear.setUTCHours(23, 59, 59, 999);<!-- [et_pb_line_break_holder] -->                periodTitle = `\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u0437\u0430 ${currentMonth.getFullYear()} \u0433\u043e\u0434`;<!-- [et_pb_line_break_holder] -->                periodEntries = filterEntriesByPeriod(startOfYear, endOfYear);<!-- [et_pb_line_break_holder] -->                break;<!-- [et_pb_line_break_holder] -->            default:<!-- [et_pb_line_break_holder] -->                break;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const { averages, overallAverage } = calculateAverages(periodEntries);<!-- [et_pb_line_break_holder] -->        overallPeriodAverage = overallAverage;<!-- [et_pb_line_break_holder] -->        categoryPeriodAverages = averages;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Prepare data for Radar Chart<!-- [et_pb_line_break_holder] -->        radarChartData = categories.map(cat => ({<!-- [et_pb_line_break_holder] -->            category: cat.name,<!-- [et_pb_line_break_holder] -->            score: parseFloat(categoryPeriodAverages[cat.name] || 0)<!-- [et_pb_line_break_holder] -->        }));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ Prepare data for Line Chart (Daily Averages over the period)<!-- [et_pb_line_break_holder] -->        const sortedEntries = periodEntries.sort((a, b) => new Date(a[0]) &#8212; new Date(b[0]));<!-- [et_pb_line_break_holder] -->        lineChartData = sortedEntries.map(([dateString, entry]) => ({<!-- [et_pb_line_break_holder] -->            date: dateString,<!-- [et_pb_line_break_holder] -->            average: calculateDailyAverage(dateString)<!-- [et_pb_line_break_holder] -->        }));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        return (<!-- [et_pb_line_break_holder] -->            <\/p>\n<div className=\"mt-6 p-4 bg-white rounded-lg shadow-md\"><!-- [et_pb_line_break_holder] -->                <\/p>\n<h3 className=\"text-xl font-semibold text-gray-800 mb-4\">{periodTitle}<\/h3>\n<p><!-- [et_pb_line_break_holder] -->                {periodEntries.length === 0 ? (<!-- [et_pb_line_break_holder] -->                    <pee className=\"text-gray-600\">\u041d\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0445 \u0437\u0430 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u043f\u0435\u0440\u0438\u043e\u0434.<\/pee><!-- [et_pb_line_break_holder] -->                ) : (<!-- [et_pb_line_break_holder] -->                    <><!-- [et_pb_line_break_holder] -->                        <\/p>\n<div className=\"mb-6 p-4 bg-blue-50 rounded-lg\"><!-- [et_pb_line_break_holder] -->                            <pee className=\"text-lg font-medium text-gray-700\">\u041e\u0431\u0449\u0430\u044f \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u043e\u0446\u0435\u043d\u043a\u0430: <span className=\"font-bold text-blue-600\">{overallPeriodAverage}<\/span><\/pee><!-- [et_pb_line_break_holder] -->                        <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                        <\/p>\n<h4 className=\"text-lg font-semibold text-gray-700 mb-3\">\u0421\u0440\u0435\u0434\u043d\u0438\u0435 \u043e\u0446\u0435\u043d\u043a\u0438 \u043f\u043e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u043c:<\/h4>\n<p><!-- [et_pb_line_break_holder] -->                        <\/p>\n<div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8\"><!-- [et_pb_line_break_holder] -->                            {categories.map(cat => (<!-- [et_pb_line_break_holder] -->                                <\/p>\n<div key={cat.id} className=\"flex items-center justify-between p-3 bg-gray-50 rounded-md shadow-sm\"><!-- [et_pb_line_break_holder] -->                                    <\/p>\n<div className=\"flex items-center\"><!-- [et_pb_line_break_holder] -->                                        {getIconComponent(cat.icon)}<!-- [et_pb_line_break_holder] -->                                        <span className=\"ml-2 text-gray-700 font-medium\">{cat.name}:<\/span><!-- [et_pb_line_break_holder] -->                                    <\/div>\n<p><!-- [et_pb_line_break_holder] -->                                    <span className={`font-bold text-lg ${getScoreColor(parseFloat(categoryPeriodAverages[cat.name]))}`}>{categoryPeriodAverages[cat.name]}<\/span><!-- [et_pb_line_break_holder] -->                                <\/div>\n<p><!-- [et_pb_line_break_holder] -->                            ))}<!-- [et_pb_line_break_holder] -->                        <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                        {\/* Radar Chart *\/}<!-- [et_pb_line_break_holder] -->                        {viewMode !== &#8216;day&#8217; &#038;&#038; radarChartData.length > 0 &#038;&#038; (<!-- [et_pb_line_break_holder] -->                            <\/p>\n<div className=\"mb-8 p-4 bg-gray-50 rounded-lg shadow-sm\"><!-- [et_pb_line_break_holder] -->                                <\/p>\n<h4 className=\"text-lg font-semibold text-gray-700 mb-3\">\u0411\u0430\u043b\u0430\u043d\u0441 \u043f\u043e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u043c (\u0420\u0430\u0434\u0430\u0440\u043d\u0430\u044f \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430):<\/h4>\n<p><!-- [et_pb_line_break_holder] -->                                <ResponsiveContainer width=\"100%\" height={300}><!-- [et_pb_line_break_holder] -->                                    <RadarChart outerRadius={90} width={730} height={250} data={radarChartData}><!-- [et_pb_line_break_holder] -->                                        <PolarGrid \/><!-- [et_pb_line_break_holder] -->                                        <PolarAngleAxis dataKey=\"category\" \/><!-- [et_pb_line_break_holder] -->                                        <PolarRadiusAxis angle={90} domain={[0, 4]} \/><!-- [et_pb_line_break_holder] -->                                        <Radar name=\"\u0421\u0440\u0435\u0434\u043d\u0438\u0439 \u0431\u0430\u043b\u043b\" dataKey=\"score\" stroke=\"#8884d8\" fill=\"#8884d8\" fillOpacity={0.6} \/><!-- [et_pb_line_break_holder] -->                                        <Tooltip \/><!-- [et_pb_line_break_holder] -->                                    <\/RadarChart><!-- [et_pb_line_break_holder] -->                                <\/ResponsiveContainer><!-- [et_pb_line_break_holder] -->                            <\/div>\n<p><!-- [et_pb_line_break_holder] -->                        )}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                        {\/* Line Chart for Daily Averages *\/}<!-- [et_pb_line_break_holder] -->                        {viewMode !== &#8216;day&#8217; &#038;&#038; lineChartData.length > 0 &#038;&#038; (<!-- [et_pb_line_break_holder] -->                            <\/p>\n<div className=\"p-4 bg-gray-50 rounded-lg shadow-sm\"><!-- [et_pb_line_break_holder] -->                                <\/p>\n<h4 className=\"text-lg font-semibold text-gray-700 mb-3\">\u0414\u0438\u043d\u0430\u043c\u0438\u043a\u0430 \u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e \u0431\u0430\u043b\u043b\u0430 \u0437\u0430 \u043f\u0435\u0440\u0438\u043e\u0434:<\/h4>\n<p><!-- [et_pb_line_break_holder] -->                                <ResponsiveContainer width=\"100%\" height={300}><!-- [et_pb_line_break_holder] -->                                    <LineChart data={lineChartData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}><!-- [et_pb_line_break_holder] -->                                        <CartesianGrid strokeDasharray=\"3 3\" \/><!-- [et_pb_line_break_holder] -->                                        <XAxis dataKey=\"date\" \/><!-- [et_pb_line_break_holder] -->                                        <YAxis domain={[0, 4]} \/><!-- [et_pb_line_break_holder] -->                                        <Tooltip \/><!-- [et_pb_line_break_holder] -->                                        <Legend \/><!-- [et_pb_line_break_holder] -->                                        <Line type=\"monotone\" dataKey=\"average\" stroke=\"#82ca9d\" activeDot={{ r: 8 }} name=\"\u0421\u0440\u0435\u0434\u043d\u0438\u0439 \u0431\u0430\u043b\u043b\" \/><!-- [et_pb_line_break_holder] -->                                    <\/LineChart><!-- [et_pb_line_break_holder] -->                                <\/ResponsiveContainer><!-- [et_pb_line_break_holder] -->                            <\/div>\n<p><!-- [et_pb_line_break_holder] -->                        )}<!-- [et_pb_line_break_holder] -->                    <\/><!-- [et_pb_line_break_holder] -->                )}<!-- [et_pb_line_break_holder] -->            <\/div>\n<p><!-- [et_pb_line_break_holder] -->        );<!-- [et_pb_line_break_holder] -->    };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    if (loading) {<!-- [et_pb_line_break_holder] -->        return (<!-- [et_pb_line_break_holder] -->            <\/p>\n<div className=\"min-h-screen flex items-center justify-center bg-gray-100\"><!-- [et_pb_line_break_holder] -->                <\/p>\n<div className=\"text-blue-600 text-xl font-semibold\">\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f&#8230;<\/div>\n<p><!-- [et_pb_line_break_holder] -->            <\/div>\n<p><!-- [et_pb_line_break_holder] -->        );<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    if (error) {<!-- [et_pb_line_break_holder] -->        return (<!-- [et_pb_line_break_holder] -->            <\/p>\n<div className=\"min-h-screen flex items-center justify-center bg-red-100 text-red-800 p-4 rounded-md\"><!-- [et_pb_line_break_holder] -->                <pee>\u041e\u0448\u0438\u0431\u043a\u0430: {error}<\/pee><!-- [et_pb_line_break_holder] -->            <\/div>\n<p><!-- [et_pb_line_break_holder] -->        );<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    return (<!-- [et_pb_line_break_holder] -->        <\/p>\n<div className=\"min-h-screen bg-gray-100 font-sans text-gray-900 p-4 sm:p-6 lg:p-8\"><!-- [et_pb_line_break_holder] -->            <\/p>\n<div className=\"max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden\"><!-- [et_pb_line_break_holder] -->                {\/* Header *\/}<!-- [et_pb_line_break_holder] -->                <\/p>\n<div className=\"bg-gradient-to-r from-blue-600 to-purple-600 p-6 text-white flex justify-between items-center rounded-t-xl\"><!-- [et_pb_line_break_holder] -->                    <\/p>\n<h1 className=\"text-3xl font-bold\">\u041c\u043e\u0439 \u0422\u0440\u0435\u043a\u0435\u0440 \u041f\u0440\u043e\u0434\u0443\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438<\/h1>\n<p><!-- [et_pb_line_break_holder] -->                    {\/* User ID display removed *\/}<!-- [et_pb_line_break_holder] -->                <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                {\/* Main Content *\/}<!-- [et_pb_line_break_holder] -->                <\/p>\n<div className=\"p-6\"><!-- [et_pb_line_break_holder] -->                    {\/* Control Buttons *\/}<!-- [et_pb_line_break_holder] -->                    <\/p>\n<div className=\"flex flex-wrap gap-3 mb-6 justify-center\"><!-- [et_pb_line_break_holder] -->                        <button<!-- [et_pb_line_break_holder] -->                            onClick={() => setShowCategoryModal(true)}<!-- [et_pb_line_break_holder] -->                            className=&#187;flex items-center px-4 py-2 bg-blue-500 text-white rounded-lg shadow-md hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105&#8243;<!-- [et_pb_line_break_holder] -->                        ><!-- [et_pb_line_break_holder] -->                            <Settings size={20} className=\"mr-2\" \/> \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u043c\u0438<!-- [et_pb_line_break_holder] -->                        <\/button><!-- [et_pb_line_break_holder] -->                        <button<!-- [et_pb_line_break_holder] -->                            onClick={() => setViewMode(&#8216;month&#8217;)}<!-- [et_pb_line_break_holder] -->                            className={`flex items-center px-4 py-2 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105 ${viewMode === &#8216;month&#8217; ? &#8216;bg-purple-500 text-white&#8217; : &#8216;bg-gray-200 text-gray-800 hover:bg-gray-300&#8217;}`}<!-- [et_pb_line_break_holder] -->                        ><!-- [et_pb_line_break_holder] -->                            <CalendarDays size={20} className=\"mr-2\" \/> \u041a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c<!-- [et_pb_line_break_holder] -->                        <\/button><!-- [et_pb_line_break_holder] -->                        <button<!-- [et_pb_line_break_holder] -->                            onClick={() => setViewMode(&#8216;day&#8217;)}<!-- [et_pb_line_break_holder] -->                            className={`flex items-center px-4 py-2 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105 ${viewMode === &#8216;day&#8217; ? &#8216;bg-purple-500 text-white&#8217; : &#8216;bg-gray-200 text-gray-800 hover:bg-gray-300&#8217;}`}<!-- [et_pb_line_break_holder] -->                        ><!-- [et_pb_line_break_holder] -->                            <Sun size={20} className=\"mr-2\" \/> \u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u0437\u0430 \u0434\u0435\u043d\u044c<!-- [et_pb_line_break_holder] -->                        <\/button><!-- [et_pb_line_break_holder] -->                        <button<!-- [et_pb_line_break_holder] -->                            onClick={() => setViewMode(&#8216;week&#8217;)}<!-- [et_pb_line_break_holder] -->                            className={`flex items-center px-4 py-2 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105 ${viewMode === &#8216;week&#8217; ? &#8216;bg-purple-500 text-white&#8217; : &#8216;bg-gray-200 text-gray-800 hover:bg-gray-300&#8217;}`}<!-- [et_pb_line_break_holder] -->                        ><!-- [et_pb_line_break_holder] -->                            <BarChart size={20} className=\"mr-2\" \/> \u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u0437\u0430 \u043d\u0435\u0434\u0435\u043b\u044e<!-- [et_pb_line_break_holder] -->                        <\/button><!-- [et_pb_line_break_holder] -->                        <button<!-- [et_pb_line_break_holder] -->                            onClick={() => setViewMode(&#8216;year&#8217;)}<!-- [et_pb_line_break_holder] -->                            className={`flex items-center px-4 py-2 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105 ${viewMode === &#8216;year&#8217; ? &#8216;bg-purple-500 text-white&#8217; : &#8216;bg-gray-200 text-gray-800 hover:bg-gray-300&#8217;}`}<!-- [et_pb_line_break_holder] -->                        ><!-- [et_pb_line_break_holder] -->                            <TrendingUp size={20} className=\"mr-2\" \/> \u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u0437\u0430 \u0433\u043e\u0434<!-- [et_pb_line_break_holder] -->                        <\/button><!-- [et_pb_line_break_holder] -->                    <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                    {\/* Calendar View *\/}<!-- [et_pb_line_break_holder] -->                    {viewMode === &#8216;month&#8217; &#038;&#038; (<!-- [et_pb_line_break_holder] -->                        <\/p>\n<div className=\"bg-gray-50 p-4 rounded-lg shadow-md\"><!-- [et_pb_line_break_holder] -->                            <\/p>\n<div className=\"flex justify-between items-center mb-4\"><!-- [et_pb_line_break_holder] -->                                <button onClick={() => changeMonth(-1)} className=&#187;p-2 rounded-full bg-gray-200 hover:bg-gray-300 transition&#187;><ChevronLeft size={24} \/><\/button><!-- [et_pb_line_break_holder] -->                                <\/p>\n<h2 className=\"text-2xl font-semibold text-gray-800\"><!-- [et_pb_line_break_holder] -->                                    {currentMonth.toLocaleString(&#8216;ru-RU&#8217;, { month: &#8216;long&#8217;, year: &#8216;numeric&#8217; })}<!-- [et_pb_line_break_holder] -->                                <\/h2>\n<p><!-- [et_pb_line_break_holder] -->                                <button onClick={() => changeMonth(1)} className=&#187;p-2 rounded-full bg-gray-200 hover:bg-gray-300 transition&#187;><ChevronRight size={24} \/><\/button><!-- [et_pb_line_break_holder] -->                            <\/div>\n<p><!-- [et_pb_line_break_holder] -->                            <\/p>\n<div className=\"grid grid-cols-7 gap-2 text-center text-sm font-medium text-gray-600 mb-2\"><!-- [et_pb_line_break_holder] -->                                <\/p>\n<div>\u041f\u043d<\/div>\n<div>\u0412\u0442<\/div>\n<div>\u0421\u0440<\/div>\n<div>\u0427\u0442<\/div>\n<div>\u041f\u0442<\/div>\n<div>\u0421\u0431<\/div>\n<div>\u0412\u0441<\/div>\n<p><!-- [et_pb_line_break_holder] -->                            <\/div>\n<p><!-- [et_pb_line_break_holder] -->                            <\/p>\n<div className=\"grid grid-cols-7 gap-2\"><!-- [et_pb_line_break_holder] -->                                {getMonthData().map((dateString, index) => {<!-- [et_pb_line_break_holder] -->                                    const day = dateString ? new Date(dateString).getDate() : &#187;;<!-- [et_pb_line_break_holder] -->                                    const avgScore = dateString ? calculateDailyAverage(dateString) : 0;<!-- [et_pb_line_break_holder] -->                                    const isToday = dateString === getStartOfDay(new Date());<!-- [et_pb_line_break_holder] -->                                    const hasEntry = dailyEntries[dateString];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                                    return (<!-- [et_pb_line_break_holder] -->                                        <div<!-- [et_pb_line_break_holder] -->                                            key={index}<!-- [et_pb_line_break_holder] -->                                            className={`<!-- [et_pb_line_break_holder] -->                                                p-2 rounded-lg flex flex-col items-center justify-center cursor-pointer<!-- [et_pb_line_break_holder] -->                                                ${dateString ? getScoreColor(avgScore) : &#8216;bg-gray-100&#8217;}<!-- [et_pb_line_break_holder] -->                                                ${isToday ? &#8216;border-2 border-blue-500&#8217; : &#187;}<!-- [et_pb_line_break_holder] -->                                                ${dateString ? &#8216;hover:bg-opacity-80 transition&#8217; : &#187;}<!-- [et_pb_line_break_holder] -->                                                ${!dateString ? &#8216;opacity-50&#8217; : &#187;}<!-- [et_pb_line_break_holder] -->                                            `}<!-- [et_pb_line_break_holder] -->                                            onClick={() => dateString &#038;&#038; handleDayClick(dateString)}<!-- [et_pb_line_break_holder] -->                                        ><!-- [et_pb_line_break_holder] -->                                            <span className=\"font-semibold text-gray-800\">{day}<\/span><!-- [et_pb_line_break_holder] -->                                            {hasEntry &#038;&#038; avgScore > 0 &#038;&#038; (<!-- [et_pb_line_break_holder] -->                                                <span className=\"text-xs text-gray-700 font-medium mt-1\">{avgScore.toFixed(1)}<\/span><!-- [et_pb_line_break_holder] -->                                            )}<!-- [et_pb_line_break_holder] -->                                        <\/div>\n<p><!-- [et_pb_line_break_holder] -->                                    );<!-- [et_pb_line_break_holder] -->                                })}<!-- [et_pb_line_break_holder] -->                            <\/div>\n<p><!-- [et_pb_line_break_holder] -->                        <\/div>\n<p><!-- [et_pb_line_break_holder] -->                    )}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                    {\/* Statistics View *\/}<!-- [et_pb_line_break_holder] -->                    {viewMode !== &#8216;month&#8217; &#038;&#038; renderStatistics()}<!-- [et_pb_line_break_holder] -->                <\/div>\n<p><!-- [et_pb_line_break_holder] -->            <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            {\/* Daily Entry Modal *\/}<!-- [et_pb_line_break_holder] -->            {showEntryModal &#038;&#038; (<!-- [et_pb_line_break_holder] -->                <\/p>\n<div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50\"><!-- [et_pb_line_break_holder] -->                    <\/p>\n<div className=\"bg-white rounded-xl shadow-2xl p-6 w-full max-w-md max-h-[90vh] overflow-y-auto\"><!-- [et_pb_line_break_holder] -->                        <\/p>\n<div className=\"flex justify-between items-center mb-6\"><!-- [et_pb_line_break_holder] -->                            <\/p>\n<h2 className=\"text-2xl font-bold text-gray-800\">\u041e\u0446\u0435\u043d\u043a\u0430 \u0437\u0430 {selectedDate}<\/h2>\n<p><!-- [et_pb_line_break_holder] -->                            <button onClick={() => setShowEntryModal(false)} className=&#187;text-gray-500 hover:text-gray-700 transition&#187;><X size={24} \/><\/button><!-- [et_pb_line_break_holder] -->                        <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                        <\/p>\n<div className=\"space-y-4 mb-6\"><!-- [et_pb_line_break_holder] -->                            {categories.map(cat => (<!-- [et_pb_line_break_holder] -->                                <\/p>\n<div key={cat.id} className=\"flex flex-col\"><!-- [et_pb_line_break_holder] -->                                    <label className=\"block text-gray-700 font-medium mb-1 flex items-center\"><!-- [et_pb_line_break_holder] -->                                        {getIconComponent(cat.icon)}<!-- [et_pb_line_break_holder] -->                                        <span className=\"ml-2\">{cat.name}:<\/span><!-- [et_pb_line_break_holder] -->                                    <\/label><!-- [et_pb_line_break_holder] -->                                    {cat.description &#038;&#038; (<!-- [et_pb_line_break_holder] -->                                        <pee className=\"text-sm text-gray-500 mb-2 ml-6\">{cat.description}<\/pee><!-- [et_pb_line_break_holder] -->                                    )}<!-- [et_pb_line_break_holder] -->                                    <\/p>\n<div className=\"flex space-x-2\"><!-- [et_pb_line_break_holder] -->                                        {[1, 2, 3, 4].map(score => (<!-- [et_pb_line_break_holder] -->                                            <button<!-- [et_pb_line_break_holder] -->                                                key={score}<!-- [et_pb_line_break_holder] -->                                                onClick={() => handleScoreChange(cat.name, score)}<!-- [et_pb_line_break_holder] -->                                                className={`flex-1 py-2 rounded-lg border-2 font-semibold transition-all duration-200<!-- [et_pb_line_break_holder] -->                                                    ${currentEntry[cat.name] === score ? &#8216;bg-blue-600 text-white border-blue-600 shadow-md&#8217; : &#8216;bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200&#8217;}<!-- [et_pb_line_break_holder] -->                                                `}<!-- [et_pb_line_break_holder] -->                                            ><!-- [et_pb_line_break_holder] -->                                                {score}<!-- [et_pb_line_break_holder] -->                                            <\/button><!-- [et_pb_line_break_holder] -->                                        ))}<!-- [et_pb_line_break_holder] -->                                    <\/div>\n<p><!-- [et_pb_line_break_holder] -->                                <\/div>\n<p><!-- [et_pb_line_break_holder] -->                            ))}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                            {\/* Working Hours for &#171;\u0420\u0430\u0431\u043e\u0442\u0430&#187; *\/}<!-- [et_pb_line_break_holder] -->                            {categories.some(cat => cat.name === &#171;\u0420\u0430\u0431\u043e\u0442\u0430&#187; &#038;&#038; cat.type === &#171;work&#187;) &#038;&#038; (<!-- [et_pb_line_break_holder] -->                                <\/p>\n<div className=\"flex flex-col\"><!-- [et_pb_line_break_holder] -->                                    <label htmlFor=\"workingHours\" className=\"block text-gray-700 font-medium mb-2 flex items-center\"><!-- [et_pb_line_break_holder] -->                                        <Briefcase size={16} className=\"mr-2\" \/> \u0420\u0430\u0431\u043e\u0447\u0438\u0435 \u0447\u0430\u0441\u044b (\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e):<!-- [et_pb_line_break_holder] -->                                    <\/label><!-- [et_pb_line_break_holder] -->                                    <input<!-- [et_pb_line_break_holder] -->                                        type=&#187;number&#187;<!-- [et_pb_line_break_holder] -->                                        id=&#187;workingHours&#187;<!-- [et_pb_line_break_holder] -->                                        value={workingHours}<!-- [et_pb_line_break_holder] -->                                        onChange={(e) => setWorkingHours(e.target.value)}<!-- [et_pb_line_break_holder] -->                                        className=&#187;w-full p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500&#8243;<!-- [et_pb_line_break_holder] -->                                        placeholder=&#187;\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, 8&#8243;<!-- [et_pb_line_break_holder] -->                                    \/><!-- [et_pb_line_break_holder] -->                                <\/div>\n<p><!-- [et_pb_line_break_holder] -->                            )}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                            {\/* Daily Note *\/}<!-- [et_pb_line_break_holder] -->                            <\/p>\n<div className=\"flex flex-col\"><!-- [et_pb_line_break_holder] -->                                <label htmlFor=\"dailyNote\" className=\"block text-gray-700 font-medium mb-2\">\u0417\u0430\u043c\u0435\u0442\u043a\u0438 \u043d\u0430 \u0434\u0435\u043d\u044c:<\/label><!-- [et_pb_line_break_holder] -->                                <textarea<!-- [et_pb_line_break_holder] -->                                    id=&#187;dailyNote&#187;<!-- [et_pb_line_break_holder] -->                                    value={dailyNote}<!-- [et_pb_line_break_holder] -->                                    onChange={(e) => setDailyNote(e.target.value)}<!-- [et_pb_line_break_holder] -->                                    rows=&#187;3&#8243;<!-- [et_pb_line_break_holder] -->                                    className=&#187;w-full p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 resize-y&#187;<!-- [et_pb_line_break_holder] -->                                    placeholder=&#187;\u0427\u0442\u043e \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0431\u044b\u043b\u043e \u0432\u0430\u0436\u043d\u043e\u0433\u043e?&#187;<!-- [et_pb_line_break_holder] -->                                ><\/textarea><!-- [et_pb_line_break_holder] -->                            <\/div>\n<p><!-- [et_pb_line_break_holder] -->                        <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                        <button<!-- [et_pb_line_break_holder] -->                            onClick={saveDailyEntry}<!-- [et_pb_line_break_holder] -->                            className=&#187;w-full py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg font-semibold text-lg shadow-lg hover:from-blue-700 hover:to-purple-700 transition duration-300 ease-in-out transform hover:scale-105&#8243;<!-- [et_pb_line_break_holder] -->                        ><!-- [et_pb_line_break_holder] -->                            \u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0437\u0430\u043f\u0438\u0441\u044c<!-- [et_pb_line_break_holder] -->                        <\/button><!-- [et_pb_line_break_holder] -->                    <\/div>\n<p><!-- [et_pb_line_break_holder] -->                <\/div>\n<p><!-- [et_pb_line_break_holder] -->            )}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            {\/* Category Management Modal *\/}<!-- [et_pb_line_break_holder] -->            {showCategoryModal &#038;&#038; (<!-- [et_pb_line_break_holder] -->                <\/p>\n<div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50\"><!-- [et_pb_line_break_holder] -->                    <\/p>\n<div className=\"bg-white rounded-xl shadow-2xl p-6 w-full max-w-md max-h-[90vh] overflow-y-auto\"><!-- [et_pb_line_break_holder] -->                        <\/p>\n<div className=\"flex justify-between items-center mb-6\"><!-- [et_pb_line_break_holder] -->                            <\/p>\n<h2 className=\"text-2xl font-bold text-gray-800\">\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u043c\u0438<\/h2>\n<p><!-- [et_pb_line_break_holder] -->                            <button onClick={() => setShowCategoryModal(false)} className=&#187;text-gray-500 hover:text-gray-700 transition&#187;><X size={24} \/><\/button><!-- [et_pb_line_break_holder] -->                        <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                        <\/p>\n<div className=\"mb-6\"><!-- [et_pb_line_break_holder] -->                            <\/p>\n<h3 className=\"text-lg font-semibold text-gray-700 mb-3\">\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044e:<\/h3>\n<p><!-- [et_pb_line_break_holder] -->                            <\/p>\n<div className=\"flex gap-2\"><!-- [et_pb_line_break_holder] -->                                <input<!-- [et_pb_line_break_holder] -->                                    type=&#187;text&#187;<!-- [et_pb_line_break_holder] -->                                    value={newCategoryName}<!-- [et_pb_line_break_holder] -->                                    onChange={(e) => setNewCategoryName(e.target.value)}<!-- [et_pb_line_break_holder] -->                                    className=&#187;flex-grow p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500&#8243;<!-- [et_pb_line_break_holder] -->                                    placeholder=&#187;\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438&#187;<!-- [et_pb_line_break_holder] -->                                \/><!-- [et_pb_line_break_holder] -->                                <button<!-- [et_pb_line_break_holder] -->                                    onClick={addCategory}<!-- [et_pb_line_break_holder] -->                                    className=&#187;px-4 py-3 bg-green-500 text-white rounded-lg shadow-md hover:bg-green-600 transition duration-300 ease-in-out&#187;<!-- [et_pb_line_break_holder] -->                                ><!-- [et_pb_line_break_holder] -->                                    <Plus size={20} \/><!-- [et_pb_line_break_holder] -->                                <\/button><!-- [et_pb_line_break_holder] -->                            <\/div>\n<p><!-- [et_pb_line_break_holder] -->                        <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                        <\/p>\n<div><!-- [et_pb_line_break_holder] -->                            <\/p>\n<h3 className=\"text-lg font-semibold text-gray-700 mb-3\">\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438:<\/h3>\n<p><!-- [et_pb_line_break_holder] -->                            <\/p>\n<ul className=\"space-y-3\"><!-- [et_pb_line_break_holder] -->                                {categories.map(cat => (<!-- [et_pb_line_break_holder] -->                                    <\/p>\n<li key={cat.id} className=\"flex items-center justify-between bg-gray-50 p-3 rounded-lg shadow-sm\"><!-- [et_pb_line_break_holder] -->\n<div className=\"flex items-center\"><!-- [et_pb_line_break_holder] -->                                            {getIconComponent(cat.icon)}<!-- [et_pb_line_break_holder] -->                                            <span className=\"ml-2 text-gray-700 font-medium\">{cat.name}<\/span><!-- [et_pb_line_break_holder] -->                                        <\/div>\n<p><!-- [et_pb_line_break_holder] -->                                        <button<!-- [et_pb_line_break_holder] -->                                            onClick={() => deleteCategory(cat.id)}<!-- [et_pb_line_break_holder] -->                                            className=&#187;p-2 bg-red-100 text-red-600 rounded-full hover:bg-red-200 transition duration-300 ease-in-out&#187;<!-- [et_pb_line_break_holder] -->                                        ><!-- [et_pb_line_break_holder] -->                                            <X size={16} \/><!-- [et_pb_line_break_holder] -->                                        <\/button><!-- [et_pb_line_break_holder] -->                                    <\/li>\n<p><!-- [et_pb_line_break_holder] -->                                ))}<!-- [et_pb_line_break_holder] -->                            <\/ul>\n<p><!-- [et_pb_line_break_holder] -->                        <\/div>\n<p><!-- [et_pb_line_break_holder] -->                    <\/div>\n<p><!-- [et_pb_line_break_holder] -->                <\/div>\n<p><!-- [et_pb_line_break_holder] -->            )}<!-- [et_pb_line_break_holder] -->        <\/div>\n<p><!-- [et_pb_line_break_holder] -->    );<!-- [et_pb_line_break_holder] -->};<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->export default App;<!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/treker.cboost.ru\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/treker.cboost.ru\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/treker.cboost.ru\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/treker.cboost.ru\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/treker.cboost.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":2,"href":"https:\/\/treker.cboost.ru\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":10,"href":"https:\/\/treker.cboost.ru\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/10"}],"wp:attachment":[{"href":"https:\/\/treker.cboost.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}