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": "Field Sales Order Form", "sourceFile": "sales/field-sales-order-form/template.jsx", "documentTitle": "Sales order template", "logo": "Project / Company Logo", "parties": [ { "title": "Customer Information", "fields": [ { "label": "Name", "value": "ABC Corp." }, { "label": "Address", "value": "111 Font St." }, { "label": "Contact", "value": "J. Lewis" }, { "label": "Phone", "value": "555-555-5555" }, { "label": "Email", "value": "J.Lewis@example.com" } ] }, { "title": "Vendor Information", "fields": [ { "label": "Name", "value": "Acme Parts" }, { "label": "Address", "value": "123 Smith Ave." }, { "label": "Contact", "value": "S. Jones" }, { "label": "Phone", "value": "555-555-5555" }, { "label": "Email", "value": "S.Jones@example.com" } ] } ], "orderMeta": [ { "label": "Sales Order Date", "value": "10/1/2026" }, { "label": "Sales Order Number", "value": "11111" }, { "label": "Delivery Address", "value": "111 Font St." }, { "label": "Delivery Date", "value": "11/11/2026" }, { "label": "Payment Terms", "value": "On delivery" } ], "items": { "columns": ["Item", "Description", "Qty", "Unit Price", "Total"], "rows": [ ["001", "Product or service description", "10", "$50.00", "$500.00"], ["002", "Product or service description", "4", "$120.00", "$480.00"] ], "totalLabel": "Order Total", "totalValue": "$980.00" }, "summary": { "title": "Sales Order", "body": "Use this template for clean customer/vendor sales orders, delivery terms, and itemized product or service lines." }, "checklist": { "title": "Order Checklist", "items": [ "Customer and vendor details verified", "Delivery date and address confirmed", "Payment terms approved" ] } } const templateStyles = ` :root{--green:#3f6f2b;--green2:#76b54d;--mint:#aee5cd;--mint2:#e9f8f1;--ink:#101418;--muted:#667085;--line:#d9e2dc;--dark:#203943;--lime:#b8ff00;--paper:#fff;--soft:#f4f7f2} *{box-sizing:border-box} html,body,#root{margin:0;min-width:0;background:#bfc3ce;color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.45} h1,h2,h3,p{margin-top:0} .dark-frame{background:#bfc3ce;padding:clamp(22px,5vw,60px);min-height:100%;} .device{background:#2c5863;border-radius:12px;padding:22px;box-shadow:0 18px 36px #1a303a44;max-width:1120px;margin:0 auto} .device-inner{background:#fff;padding:clamp(18px,4vw,38px);position:relative;overflow:hidden;border-radius:2px} .playbook-blob{position:absolute;right:0;top:0;width:42%;height:190px;background:radial-gradient(circle at 30% 30%,#53ec7eaa,#2ecf6c88 55%,transparent 56%),radial-gradient(circle at 70% 40%,#64f765aa,#2fce7b88 60%,transparent 61%);border-radius:0 0 0 36px;opacity:.85;pointer-events:none} .order-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;border-bottom:1px solid #e5e7eb;padding-bottom:18px;margin-bottom:26px;position:relative;z-index:1} .eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--green);font-size:12px;font-weight:800;margin-bottom:8px} .hero-title{font-size:clamp(40px,7vw,76px);line-height:.92;letter-spacing:-.06em;margin:0;max-width:720px} .logo-card{border:1px solid var(--line);background:#f8fbf7;padding:14px 16px;min-width:210px;text-align:right;color:var(--dark);font-weight:800} .section{margin-top:30px;position:relative;z-index:1} .section h2,.card h2{font-size:clamp(22px,3.5vw,34px);font-style:italic;letter-spacing:-.03em;border-bottom:3px solid #22b978;padding-bottom:9px;margin-bottom:16px;color:#15221a} .grid{display:grid;gap:18px}.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)} .card{border:1px solid var(--line);background:#fff;padding:18px;box-shadow:0 10px 22px #213b2810} .field{margin:0 0 12px}.field strong{display:block;color:var(--green);text-transform:uppercase;letter-spacing:.08em;font-size:11px;margin-bottom:2px}.field span{font-size:15px;color:#18231d} .meta-table td:first-child{font-weight:900;text-transform:uppercase;background:#d9f1e6;width:24%;color:#233a28;letter-spacing:.04em;font-size:12px} .table-wrap{overflow-x:auto;border:1px solid var(--line);background:#fff;box-shadow:0 10px 24px #213b2810} table{border-collapse:collapse;width:100%;min-width:720px;font-size:14px}th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}th{background:var(--mint);font-weight:900;color:#13261a}.num,.money{text-align:right}.total td,.grand td{font-weight:900;background:#eff7ea}.grand td:first-child{text-align:right;color:#1b3820} .summary-card{background:linear-gradient(135deg,#ffffff 0%,#f5faf2 100%);border-left:8px solid #82bd00} .summary-card p{font-size:17px;color:#35423a;max-width:820px} .checklist{background:#f7f7f7;border:10px solid #82bd00;border-radius:8px;padding:24px;margin-top:18px} .check{display:flex;gap:14px;align-items:flex-start;margin:16px 0;color:#1b2a20}.box{width:30px;height:30px;flex:0 0 30px;border-radius:5px;background:var(--lime);display:grid;place-items:center;font-weight:900;color:#12310d}.check span:last-child{padding-top:4px;font-weight:700} .note{font-size:12px;color:var(--muted);margin-top:16px}.pill{display:inline-block;padding:5px 10px;border-radius:999px;background:var(--mint2);color:#0e7c4c;font-weight:800;font-size:12px}.divider{height:3px;background:#22b978;margin:8px 0 24px}.kbd{font-family:Georgia,serif;letter-spacing:.12em} @media(max-width:820px){.dark-frame{padding:14px}.device{padding:10px;border-radius:10px}.device-inner{padding:16px}.grid.two,.grid.three{grid-template-columns:1fr}.order-head{display:block}.hero-title{font-size:42px}.logo-card{text-align:left;margin-top:18px;min-width:0}.playbook-blob{width:58%;height:130px;opacity:.45}table{font-size:12px;min-width:640px}.checklist{padding:16px;border-width:7px}} @media print{html,body,#root{background:#fff}.dark-frame{background:#fff;padding:0}.device{box-shadow:none;background:#fff;padding:0}.device-inner{padding:20px}.table-wrap{overflow:visible}table{font-size:10px;min-width:0}.section{break-inside:avoid}} ` function FieldList({ fields }) { return ( <div> {fields.map((field) => ( <p className="field" key={field.label}> <strong>{field.label}</strong> <span>{field.value}</span> </p> ))} </div> ) } export default function Template() { return ( <main className="dark-frame"> <title>Field Sales Order Form

Field sales document

{templateData.documentTitle}

{templateData.logo}

{templateData.parties.map((party) => (

{party.title}

))}

Order Details

{templateData.orderMeta.map((item) => ( ))}

{item.label}

{item.value}

Items Ordered

{templateData.items.columns.map((column) => )} {templateData.items.rows.map((row) => ( {row.map((cell, index) => ( ))} ))}

{column}
= 2 ? 'money' : undefined} key={`${row[0]}-${templateData.items.columns[index]}`}>{cell}
{templateData.items.totalLabel}	{templateData.items.totalValue}

Commercial summary

{templateData.summary.title}

{templateData.summary.body}

{templateData.checklist.title}

{templateData.checklist.items.map((item) => (

✓ {item}

))}

) }