8baddf1914
Some checks failed
CI / ci (push) Has been cancelled
- Navigation: 4 items (Home, Tracker, Finance, Settings) - Tracker page: tabs for Habits, Tasks, Stats - Finance: added Categories tab (CRUD) - AddTransactionModal: fixed mobile scroll with sticky button - Home: added finance balance widget - Legacy routes (/habits, /tasks, /stats) redirect to /tracker
221 lines
10 KiB
JavaScript
221 lines
10 KiB
JavaScript
import { useState, useEffect } from 'react'
|
||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||
import { motion, AnimatePresence } from 'framer-motion'
|
||
import { Plus, Settings, Flame, Calendar, ChevronRight, Archive, ArchiveRestore } from 'lucide-react'
|
||
import { format } from 'date-fns'
|
||
import { ru } from 'date-fns/locale'
|
||
import { habitsApi } from '../api/habits'
|
||
import CreateHabitModal from '../components/CreateHabitModal'
|
||
import EditHabitModal from '../components/EditHabitModal'
|
||
import Navigation from '../components/Navigation'
|
||
import clsx from 'clsx'
|
||
|
||
export default function Habits({ embedded = false }) {
|
||
const [showCreateModal, setShowCreateModal] = useState(false)
|
||
const [editingHabit, setEditingHabit] = useState(null)
|
||
const [showArchived, setShowArchived] = useState(false)
|
||
const [habitStats, setHabitStats] = useState({})
|
||
const queryClient = useQueryClient()
|
||
|
||
const { data: habits = [], isLoading } = useQuery({
|
||
queryKey: ['habits', showArchived],
|
||
queryFn: () => habitsApi.list().then(h => showArchived ? h : h.filter(x => !x.is_archived)),
|
||
})
|
||
|
||
const { data: archivedHabits = [] } = useQuery({
|
||
queryKey: ['habits-archived'],
|
||
queryFn: () => habitsApi.list().then(h => h.filter(x => x.is_archived)),
|
||
enabled: showArchived,
|
||
})
|
||
|
||
useEffect(() => {
|
||
if (habits.length > 0) loadStats()
|
||
}, [habits])
|
||
|
||
const loadStats = async () => {
|
||
const statsMap = {}
|
||
await Promise.all(habits.map(async (habit) => {
|
||
try {
|
||
const stats = await habitsApi.getHabitStats(habit.id)
|
||
statsMap[habit.id] = stats
|
||
} catch (e) {}
|
||
}))
|
||
setHabitStats(statsMap)
|
||
}
|
||
|
||
const archiveMutation = useMutation({
|
||
mutationFn: ({ id, archived }) => habitsApi.update(id, { is_archived: archived }),
|
||
onSuccess: () => {
|
||
queryClient.invalidateQueries({ queryKey: ['habits'] })
|
||
queryClient.invalidateQueries({ queryKey: ['habits-archived'] })
|
||
queryClient.invalidateQueries({ queryKey: ['stats'] })
|
||
},
|
||
})
|
||
|
||
const getFrequencyLabel = (habit) => {
|
||
if (habit.frequency === 'daily') return 'Ежедневно'
|
||
if (habit.frequency === 'weekly' && habit.target_days) {
|
||
const days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']
|
||
return habit.target_days.map(d => days[d - 1]).join(', ')
|
||
}
|
||
if (habit.frequency === 'interval') return `Каждые ${habit.target_count} дн.`
|
||
if (habit.frequency === 'custom') return `Каждые ${habit.target_count} дн.`
|
||
return habit.frequency
|
||
}
|
||
|
||
const activeHabits = habits.filter(h => !h.is_archived)
|
||
const archivedList = habits.filter(h => h.is_archived)
|
||
|
||
return (
|
||
<div className={embedded ? "" : "min-h-screen bg-surface-50 dark:bg-gray-950 gradient-mesh pb-24 transition-colors duration-300"}>
|
||
{!embedded && <header className="bg-white/70 dark:bg-gray-900/70 backdrop-blur-xl border-b border-gray-100/50 dark:border-gray-800 sticky top-0 z-10">
|
||
<div className="max-w-lg mx-auto px-4 py-4 flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-xl font-display font-bold text-gray-900 dark:text-white">Мои привычки</h1>
|
||
<p className="text-sm text-gray-500 dark:text-gray-400">{activeHabits.length} активных</p>
|
||
</div>
|
||
<button onClick={() => setShowCreateModal(true)} className="btn btn-primary flex items-center gap-2">
|
||
<Plus size={18} />
|
||
Новая
|
||
</button>
|
||
</div>
|
||
</header>}
|
||
|
||
<main className="max-w-lg mx-auto px-4 py-6 space-y-6">
|
||
{isLoading ? (
|
||
<div className="space-y-4">
|
||
{[1, 2, 3].map((i) => (
|
||
<div key={i} className="card p-5 animate-pulse">
|
||
<div className="flex items-center gap-4">
|
||
<div className="w-14 h-14 rounded-2xl bg-gray-200 dark:bg-gray-700" />
|
||
<div className="flex-1">
|
||
<div className="h-5 bg-gray-200 dark:bg-gray-700 rounded-lg w-1/2 mb-2" />
|
||
<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded-lg w-1/3" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : activeHabits.length === 0 && !showArchived ? (
|
||
<motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} className="card p-10 text-center">
|
||
<div className="w-20 h-20 rounded-3xl bg-gradient-to-br from-primary-100 to-accent-100 dark:from-primary-900/30 dark:to-accent-900/30 flex items-center justify-center mx-auto mb-5">
|
||
<Plus className="w-10 h-10 text-primary-600 dark:text-primary-400" />
|
||
</div>
|
||
<h3 className="text-xl font-display font-bold text-gray-900 dark:text-white mb-2">Нет привычек</h3>
|
||
<p className="text-gray-500 dark:text-gray-400 mb-6">Создай свою первую привычку!</p>
|
||
<button onClick={() => setShowCreateModal(true)} className="btn btn-primary">
|
||
<Plus size={20} className="mr-2" />
|
||
Создать привычку
|
||
</button>
|
||
</motion.div>
|
||
) : (
|
||
<>
|
||
<div className="space-y-3">
|
||
<AnimatePresence>
|
||
{activeHabits.map((habit, index) => (
|
||
<HabitListItem
|
||
key={habit.id}
|
||
habit={habit}
|
||
index={index}
|
||
stats={habitStats[habit.id]}
|
||
frequencyLabel={getFrequencyLabel(habit)}
|
||
onEdit={() => setEditingHabit(habit)}
|
||
onArchive={() => archiveMutation.mutate({ id: habit.id, archived: true })}
|
||
/>
|
||
))}
|
||
</AnimatePresence>
|
||
</div>
|
||
|
||
{archivedList.length > 0 && (
|
||
<div className="mt-8">
|
||
<button onClick={() => setShowArchived(!showArchived)} className="flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 mb-4">
|
||
<Archive size={18} />
|
||
<span className="font-medium">Архив ({archivedList.length})</span>
|
||
<ChevronRight size={18} className={clsx('transition-transform', showArchived && 'rotate-90')} />
|
||
</button>
|
||
|
||
<AnimatePresence>
|
||
{showArchived && (
|
||
<motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} exit={{ opacity: 0, height: 0 }} className="space-y-3">
|
||
{archivedList.map((habit, index) => (
|
||
<motion.div
|
||
key={habit.id}
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: index * 0.05 }}
|
||
className="card p-4 opacity-60"
|
||
>
|
||
<div className="flex items-center gap-4">
|
||
<div className="w-12 h-12 rounded-xl flex items-center justify-center text-xl" style={{ backgroundColor: habit.color + '20' }}>
|
||
{habit.icon || '✨'}
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<h3 className="font-semibold text-gray-600 dark:text-gray-400 truncate">{habit.name}</h3>
|
||
<p className="text-sm text-gray-400 dark:text-gray-500">{getFrequencyLabel(habit)}</p>
|
||
</div>
|
||
<button onClick={() => archiveMutation.mutate({ id: habit.id, archived: false })} className="p-2 text-gray-400 hover:text-green-500 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-xl transition-all" title="Восстановить">
|
||
<ArchiveRestore size={20} />
|
||
</button>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</main>
|
||
|
||
{!embedded && <Navigation />}
|
||
<CreateHabitModal open={showCreateModal} onClose={() => setShowCreateModal(false)} />
|
||
<EditHabitModal open={!!editingHabit} onClose={() => setEditingHabit(null)} habit={editingHabit} />
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function HabitListItem({ habit, index, stats, frequencyLabel, onEdit, onArchive }) {
|
||
return (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, x: -100 }}
|
||
transition={{ delay: index * 0.05 }}
|
||
onClick={onEdit}
|
||
className="card p-4 cursor-pointer hover:shadow-lg transition-all"
|
||
>
|
||
<div className="flex items-center gap-4">
|
||
<div className="w-14 h-14 rounded-2xl flex items-center justify-center text-2xl flex-shrink-0" style={{ backgroundColor: habit.color + '15' }}>
|
||
{habit.icon || '✨'}
|
||
</div>
|
||
|
||
<div className="flex-1 min-w-0">
|
||
<h3 className="font-semibold text-gray-900 dark:text-white truncate">{habit.name}</h3>
|
||
<div className="flex items-center gap-3 mt-1">
|
||
<span className="text-xs font-medium px-2 py-0.5 rounded-full" style={{ backgroundColor: habit.color + '15', color: habit.color }}>
|
||
{frequencyLabel}
|
||
</span>
|
||
{stats && stats.current_streak > 0 && (
|
||
<span className="text-xs text-orange-500 flex items-center gap-1">
|
||
<Flame size={14} />
|
||
{stats.current_streak} дн.
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2">
|
||
{stats && (
|
||
<div className="text-right">
|
||
<p className="text-sm font-semibold text-gray-900 dark:text-white">{stats.this_month}</p>
|
||
<p className="text-xs text-gray-400 dark:text-gray-500">в месяц</p>
|
||
</div>
|
||
)}
|
||
<ChevronRight size={20} className="text-gray-300 dark:text-gray-600" />
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
)
|
||
}
|