/* Clear Mint — Family Wealth Hub pages 2: Assets & Liabilities, Children, Shared Expenses, Documents, Permissions. Exposes window.FwhAssets / FwhChildren / FwhExpenses / FwhDocuments / FwhPermissions. Uses the themed FH kit + CMFamily. */ (function(){ const I = window.CMIcon; const useC = () => React.useContext(window.FHTheme); const hexA = window.FHhexA || ((h,a)=>h); const money = n => '$' + Math.round(+n||0).toLocaleString(); const compact = window.fwhCompact || (n=>'$'+Math.round(n)); const Kpi = ({k}) => window.FwhKpi ? React.createElement(window.FwhKpi,{k}) : null; const Avatar = (p) => window.FwhAvatar ? React.createElement(window.FwhAvatar,p) : null; const btn = (C,primary) => window.fwhBtnStyle ? window.fwhBtnStyle(C,primary) : {}; const Pill = ({children,color}) => { const C=useC(); return {children}; }; const fmtMoneyDec = n => '$'+(+n||0).toLocaleString('en-CA',{minimumFractionDigits:2,maximumFractionDigits:2}); /* ===================== ASSETS & LIABILITIES ===================== */ function FwhAssets({ D }){ const C = useC(); const { FHCard, FHLine, FHBar } = window; const a = D.assets; const Row = ({ r, total, neg }) => (
{React.createElement(window.FHIcon,{name:r.icon,size:18})}
{r.label}
{r.sub}
{money(r.value)}
{r.pct}%
); return (
{a.kpis.map((k,i)=>)}
{money(a.assetTotal)}}>
Amount% of Assets
{a.assetRows.map((r,i)=>)}
location.hash='#/assets'}>View all assets →
 {money(a.liabTotal)}}>
Amount% of Liabilities
{a.liabRows.map((r,i)=>)}
location.hash='#/liabilities'}>View all liabilities →
{}}/>}>
{money(a.nwTrend.series[a.nwTrend.series.length-1])}↑ 8.7% ({a.nwTrend.abs})
{window.CMChart && window.CMChart.CMDonut &&
}
{[['Total Assets',a.assetTotal,'80.5%',C.emerald],['Total Liabilities',a.liabTotal,'19.5%',C.red],['Net Worth',a.kpis[2].raw,'100%',C.sub]].map((r,i)=>(
{r[0]} {money(r[1])} {r[2]}
))}
); } window.FwhAssets = FwhAssets; /* ===================== CHILDREN ===================== */ function FwhChildren({ D }){ const C = useC(); const { FHCard, FHLine, FHBar } = window; const ch = D.children; const [sel,setSel] = React.useState(0); const kid = ch.children[sel] || ch.children[0]; return (
{ch.kpis.map((k,i)=>)}
+ Add Child}>
{ch.children.map((k,i)=>( ))}
Edit}>
Age {kid.age} · {kid.grade} · {kid.goal}
Education Fund Progress
{money(kid.fund)}
Goal: {money(kid.target)}
{kid.pct}% of goal
{kid.change!=null &&
↑ {money(kid.change)} ({kid.changePct}%) this month
}
{[['Projected at Age 18',money(kid.proj18),'At 6% average return'],['Years to Goal',kid.yearsToGoal+' years','On track'],['Monthly Contribution',money(kid.monthly),'Automatic transfer']].map((m,i)=>(
{m[0]}
{m[1]}
{m[2]}
))}
+ Add Goal}>
{ch.eduGoals.map((g,i)=>(
{React.createElement(window.FHIcon,{name:g.icon,size:16})}
{g.name}{money(g.saved)}
Target: {money(g.target)}
{g.pct}%
))}
{}}/>}> {ch.activity.map((a,i)=>(
{React.createElement(window.FHIcon,{name:a.icon,size:15})}
{a.desc}
{a.when}
+{money(a.amount)}
))} {ch.milestones.map((m,i)=>(
{React.createElement(window.FHIcon,{name:m.icon,size:15})}
{m.name}
{m.when}
{m.tag&&{m.tag}}
))}
); } window.FwhChildren = FwhChildren; /* ===================== SHARED EXPENSES ===================== */ function FwhExpenses({ D }){ const C = useC(); const { FHCard, FHLine, FHBar, FHDonut } = window; const e = D.expenses; const STATUSC = { Paid:C.emerald, Outstanding:C.amber, Owed:C.red }; const CATC = { Housing:'#7848C0', Groceries:C.emerald, Utilities:C.blue, Transportation:C.amber, Insurance:C.teal, Other:C.sub }; return (
{e.kpis.map((k,i)=>)}
{window.CMChart&&window.CMChart.CMDonut&&
({value:c.value,label:c.label,color:c.color}))}/>
}
{e.cats.map((c,i)=>(
{c.label} {fmtMoneyDec(c.value)} {c.pct}%
))}
{}}/>}> {}}/>}>
{[['Spent',e.budget.spent,C.emerald],['Remaining',e.budget.remaining,C.sub],['Budget',e.budget.budget,C.blue]].map((r,i)=>(
{r[0]}{fmtMoneyDec(r[1])}
))}
Add Expense}>
All shared expenses tracked for your family.
{['Date','Description','Category','Paid By','Amount','Split','Status',''].map((h,i)=>)} {e.rows.map((r,i)=>( ))}
{h}
{r.date} {r.desc} {r.cat}
{r.by}
 {fmtMoneyDec(r.amount)} {r.split} {r.status}
View all expenses →
This Month}> {e.contributors.map((c,i)=>(
{c.name}
{fmtMoneyDec(c.amount)}
{c.pct}%
))}
View all contributors →
 View all}> {[['Groceries - Walmart marked as paid','May 20, 2024 at 6:45 PM','By Sarah',C.emerald,'Check'],['New expense added: Electricity Bill','May 19, 2024 at 9:12 AM','By Alex',C.blue,'Plus'],['Water Bill payment is outstanding','May 8, 2024 at 8:30 AM','By System',C.amber,'Info']].map((r,i)=>(
{React.createElement(I[r[4]]||I.Info,{size:15})}
{r[0]}
{r[1]} · {r[2]}
))}
); } window.FwhExpenses = FwhExpenses; /* ===================== DOCUMENTS ===================== */ function FwhDocuments({ D }){ const C = useC(); const { FHCard, FHBar } = window; const d = D.documents; const EXTC = { pdf:C.red, xls:C.emerald, doc:C.blue, img:C.purple }; const FileIcon = ({ext}) => ; const CATC = { Mortgages:C.amber, Investments:C.blue, Insurance:C.purple, Legal:C.emerald, Taxes:C.teal, Planning:C.blue, Debts:C.red, Property:C.pink||'#E0568A' }; return (
{d.kpis.map((k,i)=>)}
}>
Store, organize, and manage important family documents.
{['All Categories','All Owners','All Tags'].map((t,i)=>{t})}
{['Name','Category','Uploaded By','Date Added','Expiry Date','Shared With',''].map((h,i)=>)} {d.rows.map((r,i)=>( ))}
{h}
{r.name}
{r.size}
 {r.cat}
{r.by}
 {r.added}
{r.time}
 {r.expiry||'—'} {r.shared}
{['‹','1','2','3','…','6','›'].map((p,i)=>{p})}
Showing 1 to 8 of 48 documents
Manage and browse by category.
{d.cats.map((c,i)=>(
{React.createElement(window.FHIcon,{name:c.icon,size:14})} {c.label} {c.count}
))}
View all categories →
You're using {d.storage.used} GB of {d.storage.total} GB ({d.storage.pct}%)
Manage Storage →
 View all}> {d.recent.map((r,i)=>(
{r.name}
{r.sub||('Uploaded by '+r.by)}
{r.when}
))}
); } window.FwhDocuments = FwhDocuments; /* ===================== PERMISSIONS ===================== */ function FwhPermissions({ D }){ const C = useC(); const { FHCard, FHBar } = window; const p = D.permissions; const accessColor = a => a==='Full Access'?C.emerald:a==='View Only'?C.blue:a==='Invitation Sent'?C.amber:C.sub; return (
{p.kpis.map((k,i)=>)}
Manage Roles}>
Manage access levels and what each member can see and do.
{['Member','Role','Access Level','Last Active','',''].map((h,i)=>)} {p.rows.map((r,i)=>( ))}
{h}
{r.name}{r.you&&You}
{r.email}
{r.role}
{r.sub}
{r.access==='Full Access'?:r.access==='View Only'?:}{r.access}
 {r.online?Online:r.invited?Pending:{r.last}}
{r.online?r.last:(r.expires||'')}
 {r.invited?:null}
View all roles}> {p.accessGuide.map((g,i)=>(
{React.createElement(window.FHIcon,{name:g.icon,size:15})}
{g.name}
{g.desc}
))} View all}> {p.activity.map((a,i)=>(
{a.type==='grant'?:a.type==='invite'?:}
{a.text}
{a.when}
By {a.by}
))} All Secure}>
Your family data is encrypted and access is secured with bank-level protection.
Overview of permissions across key areas.
{p.whatAccess.map((w,i)=>(
{React.createElement(window.FHIcon,{name:w.icon,size:18})}
{w.label}
{w.members}/{w.total} members
))}
); } window.FwhPermissions = FwhPermissions; })();