Files
check-printing/public/index.html
T
steve 35a5d576ea Add QuickBooks Online CSV importer for checks and deposits
Two-tab modal: "Checks to Print" parses QBO Transaction List / Check
Detail CSV exports; "Deposits" parses QBO Deposit Detail CSV exports
and groups by date. Both tabs show a preview before confirming import.
2026-03-18 14:55:21 -06:00

542 lines
23 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ezcheck</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<div class="header-left">
<span class="header-brand" id="company-name">ezcheck</span>
<select id="account-switcher" class="account-switcher" title="Switch account"></select>
<button id="btn-account-settings" class="btn-header-icon" title="Account settings"></button>
</div>
<span class="header-info">Next check: <strong id="current-check-no"></strong><button id="btn-set-check-no" class="btn-header-inline" title="Set next check number"></button></span>
</header>
<!-- View nav tabs -->
<nav class="view-nav">
<button class="view-tab active" data-view="checks">Checks</button>
<button class="view-tab" data-view="deposits">Deposits</button>
</nav>
<!-- Checks view -->
<div id="view-checks" class="view-pane">
<div class="toolbar">
<div class="toolbar-left">
<input type="search" id="filter-payee" placeholder="Search payee…" style="width:160px">
<input type="date" id="filter-date-from" title="From date">
<span style="color:var(--text-muted)"></span>
<input type="date" id="filter-date-to" title="To date">
<select id="filter-status">
<option value="" selected>All</option>
<option value="0">Unprinted</option>
<option value="1">Printed</option>
</select>
</div>
<div class="toolbar-right">
<button id="btn-generate-pdf" class="btn-primary" disabled>
Generate PDF <span id="selected-count" class="badge">0</span>
</button>
<button id="btn-new-check" class="btn-secondary">+ New Check</button>
<button id="btn-import" class="btn-secondary">Import .mdb</button>
<button class="btn-secondary" data-open-qbo="checks">Import QBO</button>
</div>
</div>
<div id="checks-summary" class="checks-summary"></div>
<div class="table-wrap">
<table id="checks-table">
<thead>
<tr>
<th class="col-select"><input type="checkbox" id="select-all-checks" title="Select all"></th>
<th class="col-no sortable" data-col="check_no"># <span class="sort-indicator"></span></th>
<th class="col-date sortable" data-col="check_date">Date <span class="sort-indicator"></span></th>
<th class="col-payee sortable" data-col="payee">Payee <span class="sort-indicator"></span></th>
<th class="col-amount sortable" data-col="amount">Amount <span class="sort-indicator"></span></th>
<th class="col-memo">Memo</th>
<th class="col-status">Status</th>
<th class="col-actions"></th>
</tr>
</thead>
<tbody id="checks-tbody">
<tr class="loading-row"><td colspan="8">Loading…</td></tr>
</tbody>
</table>
</div>
</div><!-- /view-checks -->
<!-- Deposits view -->
<div id="view-deposits" class="view-pane" hidden>
<div class="toolbar">
<div class="toolbar-left">
<input type="date" id="dep-filter-from" title="From date">
<span style="color:var(--text-muted)"></span>
<input type="date" id="dep-filter-to" title="To date">
<select id="dep-filter-status">
<option value="" selected>All</option>
<option value="0">Unprinted</option>
<option value="1">Printed</option>
</select>
</div>
<div class="toolbar-right">
<button id="btn-new-deposit" class="btn-secondary">+ New Deposit</button>
<button class="btn-secondary" data-open-qbo="deposits">Import QBO</button>
</div>
</div>
<div class="table-wrap">
<table id="deposits-table">
<thead>
<tr>
<th class="col-date">Date</th>
<th class="col-amount" style="text-align:right">Checks Total</th>
<th class="col-amount" style="text-align:right">Cash</th>
<th class="col-amount" style="text-align:right">Cash Back</th>
<th class="col-amount" style="text-align:right">Deposit Total</th>
<th style="width:50px;text-align:center">Items</th>
<th class="col-status">Status</th>
<th class="col-actions"></th>
</tr>
</thead>
<tbody id="deposits-tbody">
<tr class="loading-row"><td colspan="8">Loading…</td></tr>
</tbody>
</table>
</div>
</div><!-- /view-deposits -->
<!-- Slide-in panel -->
<div id="panel-overlay"></div>
<aside id="check-panel">
<div class="panel-header">
<h2 id="panel-title">New Check</h2>
<button id="btn-close-panel" class="btn-icon" title="Close">×</button>
</div>
<form id="check-form" novalidate>
<div class="form-group required">
<label for="f-payee">Payee</label>
<input type="text" id="f-payee" name="payee" required autocomplete="off">
</div>
<div class="form-row">
<div class="form-group required">
<label for="f-amount">Amount ($)</label>
<input type="number" id="f-amount" name="amount" required min="0.01" step="0.01" placeholder="0.00">
</div>
<div class="form-group required">
<label for="f-date">Date</label>
<input type="date" id="f-date" name="check_date" required>
</div>
</div>
<div class="form-group">
<label for="f-memo">Memo</label>
<input type="text" id="f-memo" name="memo">
</div>
<div class="form-row">
<div class="form-group">
<label for="f-note1">Note 1</label>
<input type="text" id="f-note1" name="note1">
</div>
<div class="form-group">
<label for="f-note2">Note 2</label>
<input type="text" id="f-note2" name="note2">
</div>
</div>
<details class="address-section">
<summary>Payee Address</summary>
<div class="address-fields">
<div class="form-group">
<label for="f-addr1">Line 1</label>
<input type="text" id="f-addr1" name="payee_address1">
</div>
<div class="form-group">
<label for="f-addr2">Line 2</label>
<input type="text" id="f-addr2" name="payee_address2">
</div>
<div class="form-group">
<label for="f-addr3">Line 3</label>
<input type="text" id="f-addr3" name="payee_address3">
</div>
<div class="form-group">
<label for="f-addr4">Line 4</label>
<input type="text" id="f-addr4" name="payee_address4">
</div>
</div>
</details>
<div class="form-actions">
<button type="submit" class="btn-primary" id="btn-save">Save Check</button>
<button type="button" class="btn-ghost" id="btn-cancel">Cancel</button>
</div>
</form>
</aside>
<!-- Setup wizard -->
<div id="wizard-overlay" class="modal-overlay"></div>
<div id="wizard-modal" class="modal wizard-modal" role="dialog" aria-labelledby="wizard-title">
<div class="modal-header">
<h2 id="wizard-title">Account Setup</h2>
</div>
<div class="wizard-steps-indicator">
<div class="wizard-step-dot active" data-step="1"><span>1</span><label>Checkwriter</label></div>
<div class="wizard-step-line"></div>
<div class="wizard-step-dot" data-step="2"><span>2</span><label>Bank</label></div>
<div class="wizard-step-line"></div>
<div class="wizard-step-dot" data-step="3"><span>3</span><label>Account</label></div>
</div>
<div class="modal-body wizard-body">
<!-- Step 1: Checkwriter -->
<div class="wizard-step" id="wizard-step-1">
<div class="form-group required">
<label for="w-company1">Organization Name</label>
<input type="text" id="w-company1" autocomplete="organization">
</div>
<div class="form-group">
<label for="w-addr1">Address</label>
<input type="text" id="w-addr1" autocomplete="street-address">
</div>
<div class="form-row form-row-3">
<div class="form-group">
<label for="w-city">City</label>
<input type="text" id="w-city" autocomplete="address-level2">
</div>
<div class="form-group form-group-sm">
<label for="w-state">State</label>
<input type="text" id="w-state" maxlength="2" autocomplete="address-level1" placeholder="MT">
</div>
<div class="form-group form-group-sm">
<label for="w-zip">ZIP</label>
<input type="text" id="w-zip" maxlength="10" autocomplete="postal-code">
</div>
</div>
<div class="form-group">
<label for="w-contact">Phone / Website / Email</label>
<input type="text" id="w-contact" placeholder="e.g. 406-555-0100">
</div>
</div>
<!-- Step 2: Bank -->
<div class="wizard-step" id="wizard-step-2" hidden>
<div class="form-group required">
<label for="w-bank-name">Bank Name</label>
<input type="text" id="w-bank-name">
</div>
<div class="form-group">
<label for="w-bank-addr">Bank Address</label>
<input type="text" id="w-bank-addr">
</div>
<div class="form-group">
<label for="w-transit">Transit Code</label>
<input type="text" id="w-transit" placeholder="e.g. 092900383">
</div>
<div class="form-group">
<label for="w-bank-contact">Phone / Website</label>
<input type="text" id="w-bank-contact">
</div>
</div>
<!-- Step 3: Account -->
<div class="wizard-step" id="wizard-step-3" hidden>
<div class="form-group required">
<label for="w-routing">Routing Number</label>
<input type="text" id="w-routing" inputmode="numeric" maxlength="9">
</div>
<div class="form-group required">
<label for="w-account">Account Number</label>
<input type="text" id="w-account" inputmode="numeric">
</div>
<div class="form-group required">
<label for="w-start-check">Starting Check Number</label>
<input type="number" id="w-start-check" min="1" step="1" value="1001">
</div>
<div class="form-group">
<label for="w-logo">Logo (optional)</label>
<input type="file" id="w-logo" accept="image/*">
<span class="field-hint">Printed top-left of each check. PNG or GIF recommended.</span>
</div>
</div>
<div id="wizard-error" class="wizard-error" hidden></div>
</div>
<div class="modal-footer wizard-footer">
<button id="btn-wizard-prev" class="btn-secondary" hidden>← Back</button>
<button id="btn-wizard-next" class="btn-primary">Next →</button>
<button id="btn-wizard-finish" class="btn-primary" hidden>Save &amp; Start</button>
<button id="btn-wizard-skip" class="btn-ghost">Use Import instead</button>
</div>
</div>
<!-- Import modal -->
<div id="import-modal-overlay" class="modal-overlay"></div>
<div id="import-modal" class="modal" role="dialog" aria-labelledby="import-modal-title">
<div class="modal-header">
<h2 id="import-modal-title">Import from .mdb</h2>
<button id="btn-close-import" class="btn-icon" title="Close">×</button>
</div>
<div class="modal-body">
<p class="modal-desc">Select an ezCheckPrinting <code>.mdb</code> file to import account settings, check layout, and check history. This will replace existing data.</p>
<div class="form-group">
<label for="import-file">File</label>
<input type="file" id="import-file" accept=".mdb">
</div>
<div id="import-log" class="import-log" hidden></div>
</div>
<div class="modal-footer">
<button id="btn-run-import" class="btn-primary">Import</button>
<button id="btn-cancel-import" class="btn-ghost">Cancel</button>
</div>
</div>
<!-- Account settings modal -->
<div id="acct-settings-overlay" class="modal-overlay"></div>
<div id="acct-settings-modal" class="modal" role="dialog" aria-labelledby="acct-settings-title">
<div class="modal-header">
<h2 id="acct-settings-title">Account Settings</h2>
<button id="btn-close-acct-settings" class="btn-icon" title="Close">×</button>
</div>
<div class="modal-body">
<form id="acct-settings-form" novalidate>
<p class="settings-section-label">Organization</p>
<div class="form-group required">
<label for="as-company1">Name</label>
<input type="text" id="as-company1" name="company1">
</div>
<div class="form-group">
<label for="as-company2">Address</label>
<input type="text" id="as-company2" name="company2">
</div>
<div class="form-group">
<label for="as-company3">City / State / ZIP</label>
<input type="text" id="as-company3" name="company3">
</div>
<div class="form-group">
<label for="as-company4">Phone / Web / Email</label>
<input type="text" id="as-company4" name="company4">
</div>
<p class="settings-section-label">Bank</p>
<div class="form-group">
<label for="as-bank-name">Bank Name</label>
<input type="text" id="as-bank-name" name="bank_name">
</div>
<div class="form-group">
<label for="as-bank-info1">Bank Address</label>
<input type="text" id="as-bank-info1" name="bank_info1">
</div>
<div class="form-group">
<label for="as-bank-info2">Bank Phone / Web</label>
<input type="text" id="as-bank-info2" name="bank_info2">
</div>
<div class="form-group">
<label for="as-transit">Transit Code</label>
<input type="text" id="as-transit" name="transit_code">
</div>
<p class="settings-section-label">Account</p>
<div class="form-row">
<div class="form-group required">
<label for="as-routing">Routing Number</label>
<input type="text" id="as-routing" name="routing_number" inputmode="numeric" maxlength="9">
</div>
<div class="form-group required">
<label for="as-account">Account Number</label>
<input type="text" id="as-account" name="account_number" inputmode="numeric">
</div>
</div>
<p class="settings-section-label">Signature</p>
<div class="form-group form-group-check">
<label><input type="checkbox" id="as-second-sig" name="second_signature"> Add second signature line (0.25&quot; above primary)</label>
</div>
<p class="settings-section-label">Logo</p>
<div class="form-group">
<label for="as-logo">Upload new logo</label>
<input type="file" id="as-logo" accept="image/*">
<span class="field-hint">Replaces existing logo. PNG or GIF recommended.</span>
</div>
<div id="as-logo-preview" class="logo-preview" hidden></div>
<p class="settings-section-label">Printer Offset <span class="field-hint">(inches — adjust if checks print misaligned)</span></p>
<div class="form-row form-row-4">
<div class="form-group">
<label for="as-off-left">Left</label>
<input type="number" id="as-off-left" name="offset_left" step="0.01" placeholder="0">
</div>
<div class="form-group">
<label for="as-off-right">Right</label>
<input type="number" id="as-off-right" name="offset_right" step="0.01" placeholder="0">
</div>
<div class="form-group">
<label for="as-off-up">Up</label>
<input type="number" id="as-off-up" name="offset_up" step="0.01" placeholder="0">
</div>
<div class="form-group">
<label for="as-off-down">Down</label>
<input type="number" id="as-off-down" name="offset_down" step="0.01" placeholder="0">
</div>
</div>
<div id="acct-settings-error" class="wizard-error" hidden></div>
</form>
</div>
<div class="modal-footer">
<button id="btn-save-acct-settings" class="btn-primary">Save Changes</button>
<button id="btn-cancel-acct-settings" class="btn-ghost">Cancel</button>
</div>
</div>
<!-- Set next check number modal -->
<div id="set-check-no-overlay" class="modal-overlay"></div>
<div id="set-check-no-modal" class="modal" role="dialog" aria-labelledby="set-check-no-title">
<div class="modal-header">
<h2 id="set-check-no-title">Set Next Check Number</h2>
<button id="btn-close-set-check-no" class="btn-icon" title="Close">×</button>
</div>
<div class="modal-body">
<div class="warning-box">
<strong>Warning:</strong> Changing the next check number can create duplicate check numbers or gaps in your sequence. Only do this if checks were printed outside this system or your book was restarted.
</div>
<div class="form-group" style="margin-top:12px">
<label for="set-check-no-input">Next check number</label>
<input type="number" id="set-check-no-input" min="1" step="1" style="width:120px">
</div>
<div id="set-check-no-error" class="wizard-error" hidden></div>
</div>
<div class="modal-footer">
<button id="btn-confirm-set-check-no" class="btn-primary">Set Number</button>
<button id="btn-cancel-set-check-no" class="btn-ghost">Cancel</button>
</div>
</div>
<!-- QBO Import modal -->
<div id="qbo-import-overlay" class="modal-overlay"></div>
<div id="qbo-import-modal" class="modal modal-wide" role="dialog" aria-labelledby="qbo-import-title">
<div class="modal-header">
<h2 id="qbo-import-title">Import from QuickBooks Online</h2>
<button id="btn-close-qbo-import" class="btn-icon" title="Close">×</button>
</div>
<div class="qbo-tabs">
<button class="qbo-tab active" data-tab="checks">Checks to Print</button>
<button class="qbo-tab" data-tab="deposits">Deposits</button>
</div>
<!-- Checks pane -->
<div class="qbo-pane" id="qbo-pane-checks">
<div class="modal-body">
<p class="modal-desc">Export a <strong>Transaction List</strong> or <strong>Check Detail</strong> report from QBO (filtered to checks) as CSV, then upload it here. Checks will be imported as unprinted.</p>
<div class="form-group">
<label for="qbo-checks-file">QBO CSV export</label>
<input type="file" id="qbo-checks-file" accept=".csv,.txt">
</div>
<div id="qbo-checks-preview" hidden></div>
<div id="qbo-checks-result" class="import-result" hidden></div>
<div id="qbo-checks-error" class="wizard-error" hidden></div>
</div>
<div class="modal-footer">
<button id="btn-qbo-checks-parse" class="btn-secondary">Preview</button>
<button id="btn-qbo-checks-import" class="btn-primary" hidden disabled>Import</button>
<button id="btn-qbo-checks-cancel" class="btn-ghost">Cancel</button>
</div>
</div>
<!-- Deposits pane -->
<div class="qbo-pane" id="qbo-pane-deposits" hidden>
<div class="modal-body">
<p class="modal-desc">Export a <strong>Deposit Detail</strong> report from QBO as CSV. Deposits are grouped by date — one deposit record per day.</p>
<div class="form-group">
<label for="qbo-deposits-file">QBO CSV export</label>
<input type="file" id="qbo-deposits-file" accept=".csv,.txt">
</div>
<div id="qbo-deposits-preview" hidden></div>
<div id="qbo-deposits-result" class="import-result" hidden></div>
<div id="qbo-deposits-error" class="wizard-error" hidden></div>
</div>
<div class="modal-footer">
<button id="btn-qbo-deposits-parse" class="btn-secondary">Preview</button>
<button id="btn-qbo-deposits-import" class="btn-primary" hidden disabled>Import</button>
<button id="btn-qbo-deposits-cancel" class="btn-ghost">Cancel</button>
</div>
</div>
</div>
<!-- Deposit slide-in panel -->
<div id="dep-panel-overlay"></div>
<aside id="deposit-panel">
<div class="panel-header">
<h2 id="dep-panel-title">New Deposit</h2>
<button id="btn-close-dep-panel" class="btn-icon" title="Close">×</button>
</div>
<div id="deposit-panel-body">
<!-- Top section: date + cash fields -->
<div class="dep-summary">
<div class="form-row">
<div class="form-group required">
<label for="dep-date">Deposit Date</label>
<input type="date" id="dep-date">
</div>
<div class="form-group">
<label for="dep-currency">Currency ($)</label>
<input type="number" id="dep-currency" min="0" step="0.01" placeholder="0.00">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="dep-coin">Coin ($)</label>
<input type="number" id="dep-coin" min="0" step="0.01" placeholder="0.00">
</div>
<div class="form-group">
<label for="dep-cashback">Cash Back ($)</label>
<input type="number" id="dep-cashback" min="0" step="0.01" placeholder="0.00">
</div>
</div>
<div class="dep-totals">
<div class="dep-total-row"><span>Cash Total</span><span id="dep-cash-total">$0.00</span></div>
<div class="dep-total-row"><span>Checks Total</span><span id="dep-checks-total">$0.00</span></div>
<div class="dep-total-row"><span>Subtotal</span><span id="dep-subtotal">$0.00</span></div>
<div class="dep-total-row"><span>Cash Back</span><span id="dep-cashback-display">$0.00</span></div>
<div class="dep-total-row dep-total-grand"><span>Deposit Total</span><span id="dep-grand-total">$0.00</span></div>
</div>
</div>
<!-- Check items grid -->
<div class="dep-checks-section">
<div class="dep-checks-header">
<span>Checks</span>
<button type="button" id="btn-add-dep-item" class="btn-sm btn-secondary">+ Add Row</button>
</div>
<table class="dep-items-table">
<thead>
<tr>
<th>Check #</th>
<th>Payee</th>
<th>Memo</th>
<th style="text-align:right">Amount</th>
<th></th>
</tr>
</thead>
<tbody id="dep-items-tbody"></tbody>
</table>
</div>
<div id="dep-panel-error" class="wizard-error" hidden></div>
<div class="form-actions dep-form-actions">
<div class="dep-pdf-btns">
<button type="button" id="btn-dep-slip" class="btn-secondary" disabled>Deposit Slip</button>
<button type="button" id="btn-dep-report" class="btn-secondary" disabled>Report</button>
</div>
<div>
<button type="button" id="btn-save-deposit" class="btn-primary">Save Deposit</button>
<button type="button" id="btn-cancel-deposit" class="btn-ghost">Cancel</button>
</div>
</div>
</div>
</aside>
<script src="/js/app.js"></script>
</body>
</html>