const App = () => {
const [activeTab, setActiveTab] = useState('dashboard');
const [currentTime, setCurrentTime] = useState(new Date());
const [user] = useState({
name: 'Анна',
level: 'Младший Менеджер',
avatar: 'А'
});
const [mentor] = useState({
name: 'Елена Кузнецова',
level: 'Лидер Организации',
telegram: '@elena_lr_pro',
whatsapp: '79990000000',
avatar: 'Е'
});
const [isAnimating, setIsAnimating] = useState(false);
const STORAGE_KEY = 'lr_tracker_v2_final';
const motivations = [
"Ты — суперзвезда здоровья! ✨",
"Тело говорит тебе «Спасибо» ❤️",
"Заряд бодрости активирован! ????",
"Минус один шаг к цели ????",
"Красота начинается изнутри ????",
"Дисциплина — твоя суперсила ????♀️",
"LR: Сила Алоэ в действии ????",
"Ты сегодня просто сияешь! ????"
];
const successQuotes = [
"Твой успех завтра начинается с твоих привычек сегодня.",
"Маленькие шаги ведут к большим результатам.",
"Здоровье — это не цель, это путь.",
"Забота о себе — это лучшая инвестиция.",
"Каждый глоток алоэ — это вклад в твое долголетие.",
"Дисциплина — это мост между целями и достижениями.",
"Успех в LR — это 1% таланта и 99% дисциплины."
];
const [dashboardQuote, setDashboardQuote] = useState(motivations[0]);
const [statsQuote, setStatsQuote] = useState(successQuotes[0]);
const [myVitamins, setMyVitamins] = useState(() => {
const saved = localStorage.getItem(STORAGE_KEY);
if (saved) {
try { return JSON.parse(saved); } catch (e) { return []; }
}
return [
{ id: 1, name: 'Алоэ Вера Сивера', time: '08:00', dosage: '30 мл', taken: false, icon: '????' },
{ id: 2, name: 'Супер Омега 3', time: '13:00', dosage: '1 капс.', taken: false, icon: '????' },
{ id: 3, name: 'ПроБаланс', time: '14:00', dosage: '4 таб.', taken: false, icon: '⚖️' }
];
});
const lrCatalog = [
{ category: "Гели Алоэ", name: "Алоэ Вера Мед", defaultDosage: "30 мл", icon: "????" },
{ category: "Гели Алоэ", name: "Алоэ Вера Сивера", defaultDosage: "30 мл", icon: "????" },
{ category: "Lifetakt", name: "ПроБаланс", defaultDosage: "4 таб.", icon: "⚖️" },
{ category: "Lifetakt", name: "Супер Омега 3", defaultDosage: "1 капсула", icon: "????" },
{ category: "Lifetakt", name: "Майнд Мастер", defaultDosage: "80 мл", icon: "????" }
];
const [searchQuery, setSearchQuery] = useState("");
useEffect(() => {
localStorage.setItem(STORAGE_KEY, JSON.stringify(myVitamins));
}, [myVitamins]);
useEffect(() => {
const timer = setInterval(() => setCurrentTime(new Date()), 1000);
return () => clearInterval(timer);
}, []);
const progress = useMemo(() => {
return myVitamins.length > 0
? Math.round((myVitamins.filter(v => v.taken).length / myVitamins.length) * 100)
: 0;
}, [myVitamins]);
const toggleStatus = (id) => {
setIsAnimating(true);
setMyVitamins(myVitamins.map(v =>
v.id === id ? { ...v, taken: !v.taken } : v
));
setDashboardQuote(motivations[Math.floor(Math.random() * motivations.length)]);
setTimeout(() => setIsAnimating(false), 500);
};
const changeTab = (tab) => {
if (tab === 'stats') {
setStatsQuote(successQuotes[Math.floor(Math.random() * successQuotes.length)]);
}
setActiveTab(tab);
};
// --- Screens ---
const Dashboard = () => (
Привет, {user.name}
{currentTime.toLocaleDateString('ru-RU', { weekday: 'long', day: 'numeric', month: 'long' })}
setActiveTab('settings')}>
{progress}% Здоровье активно
{dashboardQuote}
{myVitamins.map(v => (
{v.icon}
{v.name}
{v.time} • {v.dosage}
))}
);
const StatsScreen = () => (
Успехи
Активность недели
{[40, 70, 50, 90, 60, 30, 100].map((h, i) => (
{['П','В','С','Ч','П','С','В'][i]}
))}
);
const CatalogScreen = () => (
Каталог LR
setSearchQuery(e.target.value)}
/>
{lrCatalog.filter(p => p.name.toLowerCase().includes(searchQuery.toLowerCase())).map((item, idx) => (
{item.icon} {item.name}
{item.category}
))}
);
const MentorScreen = () => (
{mentor.avatar}
{mentor.name}
{mentor.level}
"Помогу составить план приемов и отвечу на любые вопросы по продукции LR. Я на связи!"
);
return (
{currentTime.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })}
{activeTab === 'dashboard' && }
{activeTab === 'stats' && }
{activeTab === 'vitamins' && }
{activeTab === 'mentor' && }
{activeTab === 'settings' && (
)}
);
};
export default App;