import React from 'react' // Data-first saved.md template source. // Edit values in templateData first; repeated regions are semantic arrays rendered with .map. // Browser-tab titles are literal strings; do not replace with JSX variables. const templateData = { "title": "Small Business Cashbook Ledger", "sourceFile": "accounting/small-business-cashbook-ledger/template.jsx", "documentTitle": "Excel Small Business Accounting Template Example", "meta": [ { "label": "Company Name", "value": "Acme Studio" }, { "label": "Manager Name", "value": "Manager Name" }, { "label": "Completed By", "value": "Bookkeeper" }, { "label": "Date Completed", "value": "Jan 31, 2026" } ], "table": { "firstColumn": "Description", "columns": [ "Current Period", "Previous Period", "Increase (or Decrease)" ], "sections": [ { "heading": "( + ) Inward Payments", "rows": [ { "label": "Cash Sales", "values": [ "$25,000.00", "$15,000.00", "$10,000.00" ] }, { "label": "Customer Account Collections", "values": [ "$32,000.00", "$32,000.00", "$ -" ] }, { "label": "Loan / Cash Injection", "values": [ "$150,000.00", "$18,000.00", "$132,000.00" ] }, { "label": "Interest Income", "values": [ "$ -", "$ -", "$ -" ] }, { "label": "Total", "values": [ "$207,000.00", "$65,000.00", "$142,000.00" ], "className": "total" } ] }, { "heading": "( − ) Outward Payments", "rows": [ { "label": "Direct Product / Service Costs", "values": [ "$10,000.00", "$4,000.00", "$6,000.00" ] }, { "label": "Payroll Taxes / Benefits - Direct", "values": [ "$80,000.00", "$22,000.00", "$58,000.00" ] }, { "label": "Salaries - Direct", "values": [ "$ -", "$ -", "$ -" ] }, { "label": "Supplies", "values": [ "$ -", "$ -", "$ -" ] }, { "label": "Total", "values": [ "$90,000.00", "$26,000.00", "$64,000.00" ], "className": "total" } ] } ] }, "note": "Small business accounting template — replace sample rows with real inflows, outflows, dates, and period values." } const templateStyles = ":root{--ink:#111827;--muted:#5b6778;--grid:#c9d1db;--blue:#2f6fb3;--blue2:#93b4d7;--navy:#14243a;--paper:#fff;--soft:#edf3fa;--yellow:#ffd966;--gold:#bf9000;--gray:#666;} *{box-sizing:border-box} html{background:#e9edf2} body{margin:0;background:#e9edf2;color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.35}.sheet{width:min(1120px,100%);margin:0 auto;background:var(--paper);min-height:100vh;padding:clamp(18px,3vw,34px)}.doc-title{margin:0 0 18px;font-size:clamp(26px,4vw,44px);letter-spacing:-.03em}.topbar{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding:18px 20px;background:var(--blue2);color:white}.topbar h1{margin:0;font-size:clamp(24px,4vw,40px);line-height:1}.topbar p{margin:4px 0 0}.meta{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--grid);border-top:0;margin-bottom:24px}.meta div{padding:10px;border-right:1px solid var(--grid);min-height:42px}.meta div:last-child{border-right:0}.label{font-size:12px;font-weight:800;text-transform:uppercase;color:#1f2937}.value{font-size:13px;color:#111827;margin-top:4px}.section-title{background:var(--blue);color:white;font-weight:800;padding:8px 10px;margin-top:16px}.table-wrap{overflow-x:auto;border:1px solid var(--grid);border-top:0}table{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}th,td{border-bottom:1px solid var(--grid);border-right:1px solid var(--grid);padding:7px 8px;text-align:right;white-space:nowrap}th:first-child,td:first-child{text-align:left}tr:last-child td{border-bottom:0}th{background:#e8f0fa;color:#1f2937;font-weight:800}.subhead td{background:#d8e8f7;font-weight:800;color:#16375d}.total td{font-weight:900;background:#eef4fb;border-top:2px solid #829ab5}.grand td{font-weight:900;background:#d9e7f5;border-top:3px double #111}.note{font-size:12px;color:var(--muted);margin-top:18px}.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}.card{border:1px solid var(--grid);padding:16px;background:#fff}.dark{background:var(--navy);color:#fff}.yellow{background:var(--yellow)!important}.gold{background:var(--gold)!important;color:white}.right{text-align:right}.center{text-align:center}.blue-text{color:#17148a}.spacer{height:18px}@media(max-width:760px){.sheet{padding:14px}.topbar{display:block}.meta{grid-template-columns:1fr 1fr}.two{grid-template-columns:1fr}.doc-title{font-size:28px}table{font-size:12px;min-width:680px}.section-title{position:sticky;left:0}}@media print{html,body{background:white}.sheet{padding:14px;min-height:0}.table-wrap{overflow:visible}table{font-size:10px;min-width:0}.section-title,.topbar,.dark,.yellow,.gold{-webkit-print-color-adjust:exact;print-color-adjust:exact}}" export default function Template() { return ( <main> <title>Small Business Cashbook Ledger

{templateData.documentTitle}

{templateData.meta.map((item) =>

{item.label}

{item.value}

)}

{templateData.table.columns.map((column) => )}{templateData.table.sections.map((section) => {section.rows.map((row) => {row.values.map((value, index) => )})})}

{templateData.table.firstColumn}	{column}
{section.heading}
{row.label}	{value}

{templateData.note &&

{templateData.note}

}

) }