{new Date().toLocaleDateString(getLang()==='es'?'es-ES':'en-US',{weekday:'long'})}
{new Date().toLocaleDateString(getLang()==='es'?'es-ES':'en-US',{month:'long',day:'numeric',year:'numeric'})}
{[
{label:tr('overview.habitsToday'),val:habits.length?`${habitsDoneToday}/${habits.length}`:'—',color:C.sand},
{label:tr('overview.tasksDone'),val:tasks.length?`${doneTasks}/${tasks.length}`:'—',color:C.sage},
{label:tr('overview.workouts'),val:`${workoutsDone}/7`,color:C.sandLight},
{label:tr('overview.mood'),val:moodToday?`${moodToday}/5`:'—',color:C.sageLight},
].map(s=>(
))}
{days.map((d,i)=>{
const dayHabits = habits.filter(h=>h.checkIns[wk[i]]).length;
const pct = habits.length ? dayHabits/habits.length : 0;
return (
{d}
0?`rgba(160,138,86,${0.15+pct*0.5})`:'transparent',
display:'flex',alignItems:'center',justifyContent:'center',position:'relative'}}>
{pct>=1 &&
}
{i===tIdx && pct<1 &&
}
);
})}
);
};
// ─── Priorities (overview) ─────────────────────────────────────
const PrioritiesWidget = ({ store, onOpen }) => {
const tr = useT();
const urgent = store.state.tasks.filter(t=>t.pri==='urgent'&&!t.done).slice(0,3);
const topPri = urgent.length ? urgent : store.state.tasks.filter(t=>!t.done).slice(0,3);
return (
{tr('overview.topPriorities')}
{topPri.length === 0 ? (
) : (
{topPri.map((t,i)=>(
{i+1}
{t.text}
{t.pri==='urgent' &&
{tr('overview.urgent')}
}
))}
);
};
// ─── Mini: Habits completed today ──────────────────────────────
// Compact "X / Y completados" card. Counts today-scheduled habits and how
// many are checked in for today. Calm by default; warm gold once any are
// done; subtle "complete" state when all planned habits are finished.
const HabitsTodayMini = ({ store, onOpen }) => {
const tr = useT();
const today = todayKey();
const todayDate = React.useMemo(() => new Date(), []);
const isSched = window.isHabitScheduledOn || (() => true);
const planned = (store.state.habits || []).filter(h => isSched(h, todayDate));
const total = planned.length;
const completed = planned.filter(h => h.checkIns && h.checkIns[today]).length;
const pct = total ? completed / total : 0;
const allDone = total > 0 && completed === total;
// Ring geometry — keep the SVG itself responsive (viewBox scales).
const SIZE = 100;
const STROKE = 9;
const R = (SIZE / 2) - (STROKE / 2);
const CIRC = 2 * Math.PI * R;
const offset = CIRC * (1 - pct);
// Render size: bigger on desktop so the ring fills the card properly.
const [_isMobile, _setIsMobile] = React.useState(() =>
typeof window !== 'undefined' && window.matchMedia
? window.matchMedia('(max-width: 768px)').matches : false);
React.useEffect(() => {
if (typeof window === 'undefined' || !window.matchMedia) return;
const mq = window.matchMedia('(max-width: 768px)');
const h = (e) => _setIsMobile(e.matches);
mq.addEventListener ? mq.addEventListener('change', h) : mq.addListener(h);
return () => mq.removeEventListener ? mq.removeEventListener('change', h) : mq.removeListener(h);
}, []);
const ringPx = _isMobile ? 108 : 156;
const numPx = _isMobile ? 30 : 44;
const totalPx = _isMobile ? 18 : 24;
// Color palette: sand by default, brighter gold when fully completed.
const ringTrack = 'rgba(255,255,255,0.06)';
const ringStart = allDone ? '#E8C97A' : C.sand;
const ringEnd = allDone ? '#F5DD9B' : C.sandLight;
const numColor = allDone ? '#F5DD9B' : C.sandLight;
const totalColor = C.textFaint;
// Subtle warm glow on completion. Kept refined — no animation, no confetti.
const completedGlow = allDone
? '0 0 0 1px rgba(232,201,122,0.35), 0 0 32px -8px rgba(232,201,122,0.45)'
: undefined;
const completedBorder = allDone ? 'rgba(232,201,122,0.45)' : undefined;
return (
{total === 0 ? (
{tr('overviewMini.habitsTodayNone')}
) : (
)}
);
};
// ─── Mini: Pending tasks ───────────────────────────────────────
// Counts open (not done) tasks. Tap → /tasks.
const PendingTasksMini = ({ store, onOpen }) => {
const tr = useT();
const open = (store.state.tasks || []).filter(t => t && !t.done).length;
const accent = open > 0 ? C.sandLight : C.textFaint;
return (
{open}
{tr('overviewMini.pendingTasksOpenShort','open')}
{tr('overviewMini.pendingTasksHelper')}
);
};
// ─── Mood widget ───────────────────────────────────────────────
const MoodWidget = ({ store, onOpen }) => {
const tr = useT();
const today = todayKey();
const wk = weekKeys();
const tIdx = todayDow();
const todayMood = store.state.mood[today];
const quickSet = (v) => store.setMoodDay(today, { mood: v });
const moods = [{v:1,icon:'cloud-rain'},{v:2,icon:'meh'},{v:3,icon:'smile'},{v:4,icon:'sun'},{v:5,icon:'zap'}];
return (
{tr('overview.moodEnergy')}
{tr('overview.howAreYou')}
{moods.map(m=>(
{e.stopPropagation();quickSet(m.v);}}
style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',gap:5,padding:'10px 4px',borderRadius:10,cursor:'pointer',
border:`1px solid ${todayMood?.mood===m.v?C.sand:C.border}`,
background:todayMood?.mood===m.v?C.sandFaint:'transparent',transition:'all 0.2s'}}>
{m.v}
))}
{tr('overview.thisWeek')}
{wk.map((k,i)=>{
const v = store.state.mood[k]?.mood;
return (
);
})}
);
};
// ─── Habits widget ─────────────────────────────────────────────
// Daily-only checklist for the Overview command center: one row per habit,
// grouped by category, completable in-place. Reuses store.toggleHabit so
// changes round-trip with the Habits view (no duplicate state).
const HabitsWidget = ({ store, onOpen }) => {
const tr = useT();
const { habits, habitCategories=[] } = store.state;
const today = todayKey();
const doneToday = habits.filter(h=>h.checkIns[today]).length;
const pct = habits.length ? Math.round(doneToday/habits.length*100) : 0;
// Group habits by category, preserving the user's category order.
const grouped = React.useMemo(() => {
const byId = new Map();
for (const c of habitCategories) byId.set(c.id, { cat: c, items: [] });
const orphan = { cat: { id: '__none__', name: window.dl ? window.dl('ideaCat','other') : 'Other', icon: 'target' }, items: [] };
for (const h of habits) {
const bucket = byId.get(h.categoryId) || orphan;
bucket.items.push(h);
}
const out = [...byId.values()].filter(g => g.items.length);
if (orphan.items.length) out.push(orphan);
return out;
}, [habits, habitCategories]);
return (
{tr('overview.dailyHabits')}
{tr('overview.smallActions')} {habits.length>0 && ({tr('overview.doneOfTotal').replace('{done}', String(doneToday)).replace('{total}', String(habits.length))})}
{pct}%
{habits.length === 0 ? (
{tr('overview.openHabits')}
}/>
) : (
{grouped.map(g => (
{g.cat.name}
{g.items.map(h => {
const done = !!h.checkIns[today];
const streak = calcStreak(h.checkIns);
return (
store.toggleHabit(h.id, today)}
role="button" tabIndex={0}
onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); store.toggleHabit(h.id, today); } }}
aria-pressed={done}
style={{display:'flex',alignItems:'center',gap:12,padding:'9px 10px',borderRadius:10,
cursor:'pointer',transition:'background 0.15s',
background:done?'rgba(160,138,86,0.06)':'transparent'}}
onMouseEnter={e=>{ if(!done) e.currentTarget.style.background='rgba(255,255,255,0.025)'; }}
onMouseLeave={e=>{ if(!done) e.currentTarget.style.background='transparent'; }}>
{done && }
{h.name}
{streak > 0 && (
{streak}d
)}
);
})}
))}
);
};
// ─── Workouts widget ───────────────────────────────────────────
const WorkoutsWidget = ({ store, onOpen }) => {
const tr = useT();
const wk = weekKeys();
const tIdx = todayDow();
const days = [tr('weekday.shortMon'),tr('weekday.shortTue'),tr('weekday.shortWed'),tr('weekday.shortThu'),tr('weekday.shortFri'),tr('weekday.shortSat'),tr('weekday.shortSun')];
const doneCount = wk.filter(k=>store.state.workouts[k]?.done).length;
const planCount = wk.filter(k=>store.state.workouts[k]?.type).length;
return (
{tr('overview.workouts')}
{doneCount}/{planCount||7}
{tr('overview.sessions')}
{wk.map((k,i)=>{
const w = store.state.workouts[k];
const isToday = i===tIdx;
return (
{days[i]}
{w?.type ? (
{w.type}{w.duration?` · ${w.duration} min`:''}
) : (
{tr('overview.restDay')}
)}
{w?.intensity>0 &&
{[1,2,3,4,5].map(n=>
)}
}
{w?.done &&
}
);
})}
);
};
// ─── Reading widget ────────────────────────────────────────────
// Hero card for the current book. Reuses the Reading view's BookCover
// component (with its premium 3D hover) and deep-links into Reading
// Detail via a window-scoped pending-bookId handoff.
const ReadingWidget = ({ store, onOpen }) => {
const tr = useT();
const BookCover = window.BookCover; // Defined in dashboard-views-a.jsx; available at render time.
const active = store.state.books.find(b => b.status === 'reading') || null;
const pct = active && active.totalPages
? Math.min(100, Math.round(active.currentPage/active.totalPages*100))
: 0;
const latestNote = active && active.entries && active.entries[0];
const openInReading = React.useCallback((id) => {
if (id != null) window.__vybOpenBook = id;
onOpen && onOpen();
}, [onOpen]);
return (
{tr('overview.reading')}
{tr('overview.keepPageMoving')}
{!active ? (
onOpen && onOpen()}
style={{background:C.sand,color:C.bg,border:'none',borderRadius:8,padding:'8px 14px',
fontFamily:'Montserrat,sans-serif',fontSize:10,fontWeight:700,letterSpacing:'0.14em',textTransform:'uppercase',cursor:'pointer'}}>
{tr('overview.openReading')}
}/>
) : (
<>
{BookCover ? (
openInReading(active.id)}/>
) : (
openInReading(active.id)}>
)}
{active.title || tr('overview.untitled')}
{active.author &&
{active.author}
}
{tr('overview.progress')}
{pct}%
{tr('overview.pageOf').replace('{x}', String(active.currentPage)).replace('{y}', String(active.totalPages || '—'))}
{latestNote && (
{tr('overview.latestEntry')}
{latestNote.text}
)}
)}
);
};
// ─── Ideas widget ──────────────────────────────────────────────
const IdeasWidget = ({ store, onOpen }) => {
const tr = useT();
const active = store.state.ideas.filter(i=>!i.archived).slice(0,2);
return (
{tr('overview.contentIdeas')}
{active.length === 0 ? (
) : (
{active.map(idea=>(
{idea.text}
{window.dl ? window.dl('ideaCat', idea.tag) : idea.tag}
))}
);
};
// ─── Tasks widget ──────────────────────────────────────────────
const TasksWidget = ({ store, onOpen }) => {
const tr = useT();
const { tasks } = store.state;
const PRIS = [{key:'urgent',color:C.clay},{key:'important',color:C.sand},{key:'later',color:C.textMuted}];
const total = tasks.length;
const done = tasks.filter(t=>t.done).length;
return (
{tr('overview.tasks')}
{done}/{total||0}
{tr('overview.done')}
{total === 0 ? (
) : (
{PRIS.map(({key,color})=>{
const items = tasks.filter(t=>t.pri===key).slice(0,4);
return (
{window.dl ? window.dl('priority', key) : key}
{items.length===0 ?
{tr('overview.noneDash')}
:
items.map(t=>(
{e.stopPropagation();store.toggleTask(t.id);}}
style={{display:'flex',alignItems:'center',gap:8,padding:'8px 10px',borderRadius:6,cursor:'pointer',
border:`1px solid ${C.border}`,background:'rgba(255,255,255,0.02)',transition:'all 0.2s',opacity:t.done?0.4:1}}>
{t.done&&}
{t.text}
))}
);
})}
)}
);
};
// ─── Quick Notes widget ────────────────────────────────────────
const QuickNotesWidget = ({ store }) => {
const tr = useT();
return (
{tr('overview.quickNotes')}
