// Variation 2: "Site Timeline" — Notion-inspired, calm, document-style, timeline-first (function(){ const { useState } = React; const V2Shell = ({ children, onNav, onBack, title, subtitle, right, active }) => (
{onBack && ( )}

{title}

{subtitle &&
{subtitle}
}
{right}
{children}
); const V2ProjectsList = ({ onOpenProject }) => { const projects = YBP_DATA.projects; return ( {}} title="הפרויקטים" subtitle={`${projects.length} פרויקטים • מסעדות, משרדים, מסחרי`} right={ } >
{projects.map(p => (
onOpenProject(p.id)} style={{ background: '#fff', border: '1px solid #e8e5dc', borderRadius: 10, overflow: 'hidden', cursor: 'pointer', transition: 'transform 0.15s, box-shadow 0.15s', }} onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 6px 20px rgba(0,0,0,0.06)'; }} onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}>
{p.name}
{p.client}
{p.progress}%
{p.daysLeft === 0 ? 'הושלם' : p.daysLeft + ' ימים'}
{p.team}
{fmtMoney(p.budget)}
{p.openIssues > 0 &&
{p.openIssues}
}
))}
); }; const V2ProjectDetail = ({ projectId, onBack, onOpenClient }) => { const project = YBP_DATA.projects.find(p => p.id === projectId) || YBP_DATA.projects[0]; const detail = YBP_DATA.projectDetail; return ( {}} onBack={onBack} title={project.name} subtitle={`${project.client} • ${project.address}`} right={
} > {/* Meta row */}
{[ ['סטטוס', ], ['התקדמות', `${project.progress}%`], ['תקציב', `${fmtMoney(project.spent)} / ${fmtMoney(project.budget)}`], ['ימים שנותרו', project.daysLeft], ['אבן דרך', project.nextMilestone], ].map(([label, val], i) => (
{label}
{val}
))}
{/* Timeline section */}

ציר הזמן של הפרויקט

{project.phases.map((ph, i) => (
{ph.name}
{ph.progress}%
{ph.status === 'active' && (
{detail.tasks.filter(t => t.phase === ph.name.split(' ')[0] || ph.name.includes(t.phase)).slice(0, 3).map(t => (
{t.title}
))}
)}
))}
{/* Two col: tasks + updates */}

משימות פתוחות

{detail.tasks.filter(t => t.status !== 'done').slice(0, 6).map((t, i) => (
0 ? '1px solid #f2f0ea' : 'none', }}>
{t.title}
{t.due.slice(5)}
))}

יומן פרויקט

{detail.updates.slice(0, 4).map(u => (
{u.author} {u.time}
{u.text}
))}
{/* Docs */}

מסמכים

{detail.documents.map(d => (
{d.type === 'folder' ? : d.type.toUpperCase()}
{d.name}
{d.updated.slice(5)} • {d.size}
))}
); }; const V2ClientView = ({ projectId, onBack, onOpenBudget }) => { const { useState: useLocalState } = React; const [showBudgetDetail, setShowBudgetDetail] = React.useState(false); const project = YBP_DATA.projects.find(p => p.id === projectId) || YBP_DATA.projects[0]; const detail = YBP_DATA.projectDetail; return (
YBP
פורטל לקוחות • {project.client}
דוח סטטוס שבועי

{project.name}

{project.address} • עדכון ל-{new Date().toLocaleDateString('he-IL')}
{project.progress}%
הפרויקט מתקדם לפי לוח הזמנים
מתוכנן להסתיים בתאריך {project.endDate} — נותרו {project.daysLeft} ימים

איפה אנחנו בפרויקט

{project.phases.map((ph, i) => (
0 ? '1px solid #e8e5dc' : 'none' }}>
{ph.status === 'done' ? : i + 1}
{ph.name}
{ph.status === 'done' ? 'הושלם ✓' : ph.status === 'active' ? ph.progress + '%' : 'ממתין'}
))}

ממה אנחנו עסוקים השבוע

{detail.updates.slice(0, 3).map(u => (
{u.time} • צוות {u.team}
{u.text}
))}
{/* Budget summary for client */}

סיכום תקציב

{[ { label: 'אומדן תקציב', value: project.budget, color: '#1a2c4a' }, { label: 'הצעות מחיר', value: project.spent, color: '#d97706' }, { label: 'עלות בפועל', value: project.budget - project.spent, color: project.budget - project.spent < 0 ? '#dc2626' : '#047857' }, ].map(({ label, value, color }) => (
{label}
{value.toLocaleString('he-IL')} ₪
))}
0 ? Math.min(100, (project.spent / project.budget) * 100) : 0}%`, background: project.spent > project.budget ? '#dc2626' : '#1a2c4a', borderRadius: 4, }}/>
0 {project.budget > 0 ? Math.round((project.spent/project.budget)*100) : 0}% נוצל {project.budget.toLocaleString('he-IL')} ₪
{showBudgetDetail && (
{(() => { const budgetData = (() => { try { return JSON.parse(localStorage.getItem('ybp_budget_' + projectId)); } catch(e) { return null; } })(); if (!budgetData) return (
פירוט תקציב יהיה זמין לאחר עדכון ראשוני מהצוות.
); return budgetData.sections.map(s => { const total = s.items.reduce((acc, it) => ({ estimate: acc.estimate + (Number(it.estimate)||0), offer: acc.offer + (Number(it.offer)||0), actual: acc.actual + (Number(it.actual)||0), }), {estimate:0, offer:0, actual:0}); if (total.estimate === 0 && total.offer === 0 && total.actual === 0) return null; return (
{s.icon} {s.name} {total.estimate > 0 && א׳ {total.estimate.toLocaleString('he-IL')}} {total.offer > 0 && הצ׳ {total.offer.toLocaleString('he-IL')}} {total.actual > 0 && פ׳ {total.actual.toLocaleString('he-IL')}}
); }); })()}
)}
מנהל הפרויקט
{YBP_DATA.user.name}
); }; Object.assign(window, { V2ProjectsList, V2ProjectDetail, V2ClientView }); })();