Modern Quote

const accent = "#0F766E";
const muted = "#6B7280";
const light = "#F3F4F6";

const cols = [
  ["Category", "auto"],
  ["Description", "1fr"],
  ["Qty", "auto", "right"],
  ["Unit", "auto", "center"],
  ["Unit Price", "auto", "right"],
  ["Amount", "auto", "right"],
];

const template = doc(
  { size: "A4", title: "Quote {{quoteNumber}}", styles: { ".accent": { color: accent }, ".muted": { color: muted }, ".chip": { "background-color": light, padding: [3, 6, 3, 6], "border-radius": 3, "font-size": 8 } } },

  // Header band
  hdr(
    r({ padding: [0, 0, 10, 0], "border-color": accent, border: [0, 0, 2, 0] },
      col("60%",
        s({ "font-size": 22, "font-weight": "bold", color: accent }, "QUOTE"),
        gap(2),
        s({ "font-size": 10, color: muted }, "{{projectName}}"),
      ),
      col("40%", { align: "right" },
        s({ "font-size": 11, "font-weight": "bold" }, "{{vendor.name}}"),
        s({ "font-size": 9, color: muted }, "{{vendor.website}} · {{vendor.phone}}"),
        s({ "font-size": 9, color: muted }, "{{vendor.email}}"),
      ),
    ),
  ),

  // Quote meta strip
  r({ "background-color": light, padding: 10, margin: [8, 0, 10, 0], "border-radius": 4 },
    col("25%",
      s({ "font-size": 8, color: muted, "font-weight": "bold" }, "QUOTE #"),
      gap(2),
      s({ "font-size": 10, "font-weight": "bold" }, "{{quoteNumber}}"),
    ),
    col("25%",
      s({ "font-size": 8, color: muted, "font-weight": "bold" }, "REFERENCE"),
      gap(2),
      s({ "font-size": 10 }, "{{reference}}"),
    ),
    col("25%",
      s({ "font-size": 8, color: muted, "font-weight": "bold" }, "DATE"),
      gap(2),
      s({ "font-size": 10 }, "{{date}}"),
    ),
    col("25%",
      s({ "font-size": 8, color: muted, "font-weight": "bold" }, "VALID UNTIL ({{validityDays}} DAYS)"),
      gap(2),
      s({ "font-size": 10, "font-weight": "bold", color: accent }, "{{validUntil}}"),
    ),
  ),

  // From / To
  r(
    col("48%", { padding: [0, 8, 0, 0] },
      s({ "font-size": 8, color: accent, "font-weight": "bold" }, "FROM"),
      gap(3),
      s({ "font-size": 10, "font-weight": "bold" }, "{{vendor.name}}"),
      s({ "font-size": 9, color: muted, "line-height": 1.35 }, "{{vendor.address}}"),
      gap(3),
      s({ "font-size": 9 }, "{{vendor.contactName}} — {{vendor.contactTitle}}"),
      s({ "font-size": 9, color: muted }, "{{vendor.email}} · {{vendor.phone}}"),
      s({ "font-size": 8, color: muted }, "{{vendor.taxId}}"),
    ),
    col("4%"),
    col("48%", { padding: [0, 0, 0, 8], "border-color": light, border: [0, 0, 0, 1] },
      s({ "font-size": 8, color: accent, "font-weight": "bold" }, "PREPARED FOR"),
      gap(3),
      s({ "font-size": 10, "font-weight": "bold" }, "{{customer.name}}"),
      s({ "font-size": 9, color: muted, "line-height": 1.35 }, "{{customer.address}}"),
      gap(3),
      s({ "font-size": 9 }, "{{customer.contactName}} — {{customer.contactTitle}}"),
      s({ "font-size": 9, color: muted }, "{{customer.email}} · {{customer.phone}}"),
    ),
  ),

  gap(10),

  // Project summary
  r({ padding: [8, 10, 8, 10], "border-color": accent, border: [0, 0, 0, 2], "background-color": "#F0FDFA" },
    col("100%",
      s({ "font-size": 8, color: accent, "font-weight": "bold" }, "PROJECT SUMMARY"),
      gap(2),
      s({ "font-size": 9.5, "line-height": 1.35 }, "{{projectSummary}}"),
    ),
  ),

  gap(10),

  // Line items table
  s({ "font-size": 10, "font-weight": "bold", color: accent, margin: [0, 0, 4, 0] }, "Line Items"),
  table(cols, "item in items", [
    [s({ "font-size": 8, "font-weight": "bold", color: accent }, "{{item.category}}"), "auto"],
    ["{{item.description}}", "1fr"],
    ["{{item.qty}}", "auto", "right"],
    ["{{item.unit}}", "auto", "center"],
    ["${{item.unitPrice}}", "auto", "right"],
    ["${{item.total}}", "auto", "right"],
  ]),

  gap(6),

  // Category subtotals + totals
  r(
    col("50%", { padding: [6, 8, 6, 8], "background-color": light, "border-radius": 3 },
      s({ "font-size": 8, color: muted, "font-weight": "bold" }, "BY CATEGORY"),
      gap(3),
      r(col("60%", s({ "font-size": 9 }, "Labour")), col("40%", { align: "right" }, s({ "font-size": 9 }, "${{labourSubtotal}}"))),
      r(col("60%", s({ "font-size": 9 }, "Materials")), col("40%", { align: "right" }, s({ "font-size": 9 }, "${{materialsSubtotal}}"))),
      r(col("60%", s({ "font-size": 9 }, "Subscription")), col("40%", { align: "right" }, s({ "font-size": 9 }, "${{subscriptionsSubtotal}}"))),
    ),
    col("2%"),
    col("48%",
      totals([
        ["Subtotal", "${{subtotal}}"],
        ["{{discountLabel}}", "-${{discountAmount}}"],
        ["Taxable amount", "${{taxableAmount}}"],
        ["{{taxLabel}}", "${{taxAmount}}"],
        ["Total ({{currency}})", "${{total}}", true],
      ]),
    ),
  ),

  gap(8),

  // Payment schedule
  r({ padding: 10, "border-color": accent, border: 1, "border-radius": 4 },
    col("50%",
      s({ "font-size": 8, color: accent, "font-weight": "bold" }, "PAYMENT SCHEDULE"),
      gap(3),
      r(col("65%", s({ "font-size": 9 }, "{{depositLabel}}")), col("35%", { align: "right" }, s({ "font-size": 10, "font-weight": "bold" }, "${{depositAmount}}"))),
      r(col("65%", s({ "font-size": 9 }, "Balance on completion (Net 30)")), col("35%", { align: "right" }, s({ "font-size": 10, "font-weight": "bold" }, "${{balanceOnCompletion}}"))),
    ),
    col("4%"),
    col("46%",
      s({ "font-size": 8, color: accent, "font-weight": "bold" }, "PREPARED BY"),
      gap(3),
      s({ "font-size": 10, "font-weight": "bold" }, "{{preparedBy.name}}"),
      s({ "font-size": 9, color: muted }, "{{preparedBy.title}}"),
      s({ "font-size": 9 }, "{{preparedBy.email}}"),
      s({ "font-size": 9 }, "{{preparedBy.phone}}"),
    ),
  ),

  gap(10),

  // Scope
  s({ "font-size": 9, color: accent, "font-weight": "bold" }, "SCOPE"),
  gap(2),
  s({ "font-size": 9, "line-height": 1.35 }, "{{scope}}"),

  gap(8),

  // Terms
  s({ "font-size": 9, color: accent, "font-weight": "bold" }, "TERMS"),
  gap(2),
  s({ "font-size": 9, "line-height": 1.35 }, "{{terms}}"),

  gap(8),

  // Notes
  s({ "font-size": 9, color: accent, "font-weight": "bold" }, "NOTES"),
  gap(2),
  s({ "font-size": 9, "line-height": 1.35, "font-style": "italic", color: muted }, "{{notes}}"),

  gap(10),

  // Acceptance block
  r({ "background-color": "#F0FDFA", padding: 10, "border-radius": 4, "border-color": accent, border: [1, 1, 1, 1] },
    col("100%",
      s({ "font-size": 10, "font-weight": "bold", color: accent }, "Acceptance"),
      gap(3),
      s({ "font-size": 9, "line-height": 1.35 }, "{{acceptance.instruction}}"),
      gap(10),
      r(
        col("48%",
          r({ "border-color": "#111827", border: [0, 0, 1, 0], height: 22 }),
          s({ "font-size": 8, color: muted }, "{{acceptance.signatureLabel}}"),
        ),
        col("4%"),
        col("48%",
          r({ "border-color": "#111827", border: [0, 0, 1, 0], height: 22 }),
          s({ "font-size": 8, color: muted }, "{{acceptance.nameLabel}}"),
        ),
      ),
      gap(8),
      r(
        col("48%",
          r({ "border-color": "#111827", border: [0, 0, 1, 0], height: 22 }),
          s({ "font-size": 8, color: muted }, "{{acceptance.titleLabel}}"),
        ),
        col("4%"),
        col("48%",
          r({ "border-color": "#111827", border: [0, 0, 1, 0], height: 22 }),
          s({ "font-size": 8, color: muted }, "{{acceptance.dateLabel}}"),
        ),
      ),
    ),
  ),

  ftrPages("{{vendor.name}} · Quote {{quoteNumber}}"),
);

const sampleData = {
  quoteNumber: "QT-2026-00318",
  reference: "RFQ-RIV-2026-017",
  date: "18 April 2026",
  validUntil: "18 May 2026",
  validityDays: 30,
  currency: "USD",
  projectName: "Warehouse Management System — Phase 2",
  projectSummary: "Design and implementation of a bar-code-driven inventory workflow across three distribution centres, including integration with the existing ERP and driver-tablet app.",
  vendor: {
    name: "Northline Integration Co.",
    address: "88 Mercer Street, 4th Floor\nNew York, NY 10012\nUnited States",
    phone: "(212) 555-0177",
    email: "sales@northline.example.com",
    website: "northline.example.com",
    taxId: "EIN 32-7781942",
    contactName: "Priya Shah",
    contactTitle: "Solutions Architect",
  },
  customer: {
    name: "Riverside Manufacturing Holdings, LLC",
    address: "1200 Industrial Boulevard, Building C\nPortland, OR 97201\nUnited States",
    contactName: "Sarah Chen",
    contactTitle: "Director of Operations",
    email: "sarah.chen@riverside.example.com",
    phone: "(503) 555-0233",
  },
  items: [
    { category: "Labour", description: "Discovery & process mapping — on-site workshops across the three distribution centres, stakeholder interviews, current-state documentation.", qty: 48, unit: "hours", unitPrice: "195.00", total: "9,360.00" },
    { category: "Labour", description: "Solution design & ERP integration blueprint — API contracts, data-mapping, acceptance criteria.", qty: 72, unit: "hours", unitPrice: "210.00", total: "15,120.00" },
    { category: "Labour", description: "Implementation & configuration — barcode workflow build, ERP adapter, driver-tablet app integration.", qty: 160, unit: "hours", unitPrice: "185.00", total: "29,600.00" },
    { category: "Labour", description: "User training (three two-day on-site sessions, up to 15 attendees per cohort).", qty: 6, unit: "days", unitPrice: "1,800.00", total: "10,800.00" },
    { category: "Materials", description: "Rugged handheld barcode scanners — Zebra TC22, includes charging cradle and 3-year warranty.", qty: 18, unit: "units", unitPrice: "845.00", total: "15,210.00" },
    { category: "Materials", description: "Wi-Fi access-point upgrade kit for cold-storage bays (ruggedised enclosure, PoE).", qty: 6, unit: "units", unitPrice: "620.00", total: "3,720.00" },
    { category: "Subscription", description: "Northline Connect — annual platform subscription, unlimited users, 99.9% SLA.", qty: 1, unit: "year", unitPrice: "9,600.00", total: "9,600.00" },
  ],
  labourSubtotal: "64,880.00",
  materialsSubtotal: "18,930.00",
  subscriptionsSubtotal: "9,600.00",
  subtotal: "93,410.00",
  discountLabel: "Multi-site commitment discount (4%)",
  discountAmount: "3,736.40",
  taxableAmount: "89,673.60",
  taxRate: 0.08,
  taxLabel: "Sales Tax (NY 8%)",
  taxAmount: "7,173.89",
  total: "96,847.49",
  depositLabel: "30% deposit on acceptance",
  depositAmount: "29,054.25",
  balanceOnCompletion: "67,793.24",
  terms: "This quote is valid for 30 days from the date of issue. Prices are held in USD and exclude shipping and on-site travel expenses, which will be billed at cost with receipts. A 30% deposit is required on acceptance; the balance is invoiced on project completion and payable Net 30. Work commences within ten business days of deposit receipt and signed statement of work. Either party may terminate with fourteen days' written notice; billed work to date is payable on termination.",
  scope: "Included: requirements discovery, solution design, barcode workflow implementation, ERP adapter, driver-app integration, user training, one year of platform subscription and standard support. Not included: hardware beyond the items listed, ongoing managed services past the first year, changes to the existing ERP outside the documented integration points.",
  notes: "Pricing assumes access to non-production ERP and VPN credentials within five business days of kick-off. Delays to access will shift delivery dates by the equivalent duration.",
  preparedBy: {
    name: "Priya Shah",
    title: "Solutions Architect",
    email: "priya.shah@northline.example.com",
    phone: "(212) 555-0179",
  },
  acceptance: {
    instruction: "To accept this quote, please sign below and return by email to sales@northline.example.com, or reply with written confirmation referencing the quote number.",
    signatureLabel: "Authorised signature",
    nameLabel: "Printed name",
    titleLabel: "Title",
    dateLabel: "Date",
  },
};

{
  "quoteNumber": "QT-2026-00318",
  "reference": "RFQ-RIV-2026-017",
  "date": "18 April 2026",
  "validUntil": "18 May 2026",
  "validityDays": 30,
  "currency": "USD",
  "projectName": "Warehouse Management System — Phase 2",
  "projectSummary": "Design and implementation of a bar-code-driven inventory workflow across three distribution centres, including integration with the existing ERP and driver-tablet app.",
  "vendor": {
    "name": "Northline Integration Co.",
    "address": "88 Mercer Street, 4th Floor\nNew York, NY 10012\nUnited States",
    "phone": "(212) 555-0177",
    "email": "sales@northline.example.com",
    "website": "northline.example.com",
    "taxId": "EIN 32-7781942",
    "contactName": "Priya Shah",
    "contactTitle": "Solutions Architect"
  },
  "customer": {
    "name": "Riverside Manufacturing Holdings, LLC",
    "address": "1200 Industrial Boulevard, Building C\nPortland, OR 97201\nUnited States",
    "contactName": "Sarah Chen",
    "contactTitle": "Director of Operations",
    "email": "sarah.chen@riverside.example.com",
    "phone": "(503) 555-0233"
  },
  "items": [
    {
      "category": "Labour",
      "description": "Discovery & process mapping — on-site workshops across the three distribution centres, stakeholder interviews, current-state documentation.",
      "qty": 48,
      "unit": "hours",
      "unitPrice": "195.00",
      "total": "9,360.00"
    },
    {
      "category": "Labour",
      "description": "Solution design & ERP integration blueprint — API contracts, data-mapping, acceptance criteria.",
      "qty": 72,
      "unit": "hours",
      "unitPrice": "210.00",
      "total": "15,120.00"
    },
    {
      "category": "Labour",
      "description": "Implementation & configuration — barcode workflow build, ERP adapter, driver-tablet app integration.",
      "qty": 160,
      "unit": "hours",
      "unitPrice": "185.00",
      "total": "29,600.00"
    },
    {
      "category": "Labour",
      "description": "User training (three two-day on-site sessions, up to 15 attendees per cohort).",
      "qty": 6,
      "unit": "days",
      "unitPrice": "1,800.00",
      "total": "10,800.00"
    },
    {
      "category": "Materials",
      "description": "Rugged handheld barcode scanners — Zebra TC22, includes charging cradle and 3-year warranty.",
      "qty": 18,
      "unit": "units",
      "unitPrice": "845.00",
      "total": "15,210.00"
    },
    {
      "category": "Materials",
      "description": "Wi-Fi access-point upgrade kit for cold-storage bays (ruggedised enclosure, PoE).",
      "qty": 6,
      "unit": "units",
      "unitPrice": "620.00",
      "total": "3,720.00"
    },
    {
      "category": "Subscription",
      "description": "Northline Connect — annual platform subscription, unlimited users, 99.9% SLA.",
      "qty": 1,
      "unit": "year",
      "unitPrice": "9,600.00",
      "total": "9,600.00"
    }
  ],
  "labourSubtotal": "64,880.00",
  "materialsSubtotal": "18,930.00",
  "subscriptionsSubtotal": "9,600.00",
  "subtotal": "93,410.00",
  "discountLabel": "Multi-site commitment discount (4%)",
  "discountAmount": "3,736.40",
  "taxableAmount": "89,673.60",
  "taxRate": 0.08,
  "taxLabel": "Sales Tax (NY 8%)",
  "taxAmount": "7,173.89",
  "total": "96,847.49",
  "depositLabel": "30% deposit on acceptance",
  "depositAmount": "29,054.25",
  "balanceOnCompletion": "67,793.24",
  "terms": "This quote is valid for 30 days from the date of issue. Prices are held in USD and exclude shipping and on-site travel expenses, which will be billed at cost with receipts. A 30% deposit is required on acceptance; the balance is invoiced on project completion and payable Net 30. Work commences within ten business days of deposit receipt and signed statement of work. Either party may terminate with fourteen days' written notice; billed work to date is payable on termination.",
  "scope": "Included: requirements discovery, solution design, barcode workflow implementation, ERP adapter, driver-app integration, user training, one year of platform subscription and standard support. Not included: hardware beyond the items listed, ongoing managed services past the first year, changes to the existing ERP outside the documented integration points.",
  "notes": "Pricing assumes access to non-production ERP and VPN credentials within five business days of kick-off. Delays to access will shift delivery dates by the equivalent duration.",
  "preparedBy": {
    "name": "Priya Shah",
    "title": "Solutions Architect",
    "email": "priya.shah@northline.example.com",
    "phone": "(212) 555-0179"
  },
  "acceptance": {
    "instruction": "To accept this quote, please sign below and return by email to sales@northline.example.com, or reply with written confirmation referencing the quote number.",
    "signatureLabel": "Authorised signature",
    "nameLabel": "Printed name",
    "titleLabel": "Title",
    "dateLabel": "Date"
  }
}

curl -X POST https://makespdf.com/api/v1/render \
  -H "Authorization: Bearer $MAKESPDF_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"templateId": "quote-modern"}' \
  -o output.pdf