Merge pull request #2 from H1D/feat/item-notes-custom-columns

Add per-item notes and custom columns

Author: H1D

netlify.toml

@@ -0,0 +1,37 @@
+[build]
+  command = "curl -fsSL https://bun.sh/install | bash && ~/.bun/bin/bun install --frozen-lockfile && ~/.bun/bin/bun run build"
+  publish = "public"
+
+[build.environment]
+  NODE_VERSION = "20"
+
+# SPA fallback - route all paths to index.html
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
+
+# Cache static assets
+[[headers]]
+  for = "/js/vendor/*"
+  [headers.values]
+    Cache-Control = "public, max-age=31536000, immutable"
+
+[[headers]]
+  for = "/fonts/*"
+  [headers.values]
+    Cache-Control = "public, max-age=31536000, immutable"
+
+[[headers]]
+  for = "/css/*"
+  [headers.values]
+    Cache-Control = "public, max-age=604800"
+
+# Security headers (matching server.ts)
+[[headers]]
+  for = "/*"
+  [headers.values]
+    X-Content-Type-Options = "nosniff"
+    X-Frame-Options = "DENY"
+    Referrer-Policy = "strict-origin-when-cross-origin"
+    Permissions-Policy = "camera=(), microphone=(), geolocation=()"

public/css/style.css

@@ -704,6 +704,40 @@ input[type="file"] {
 }
 
 .item-field[data-col="name"] { grid-column: span 2; }
+.item-field[data-col="itemNotes"] { grid-column: 1 / -1; }
+.item-field[data-col="itemNotes"] textarea {
+  width: 100%;
+  padding: 6px 8px;
+  font-size: 0.82rem;
+  border: 1px solid var(--border-light);
+  border-radius: var(--r-sm);
+  background: var(--card);
+  box-shadow: var(--shadow-inset);
+  resize: vertical;
+  line-height: 1.5;
+  font-family: var(--font-body);
+}
+
+/* === Custom Column Toggles === */
+.custom-column-toggles { position: relative; }
+.custom-column-toggles:empty { display: none; }
+.custom-col-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+.btn-remove-custom-col {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+  color: var(--ink-faint);
+  padding: 0 2px;
+  line-height: 1;
+  transition: color 0.15s;
+}
+.btn-remove-custom-col:hover { color: var(--danger); }
+.btn-add-column { margin-bottom: 10px; }
 
 /* === Total Row === */
 .total-row {

public/index.html

@@ -321,8 +321,13 @@ <h1 class="logo">EasyPDF <span class="logo-lite">Lite</span></h1>
               <label class="toggle-label"><input type="checkbox" id="toggle-netAmount" checked data-testid="toggle-net-amount"> Net Amount</label>
               <label class="toggle-label"><input type="checkbox" id="toggle-vatAmount" checked data-testid="toggle-vat-amount"> VAT Amount</label>
               <label class="toggle-label"><input type="checkbox" id="toggle-preTaxAmount" checked data-testid="toggle-pre-tax-amount"> Pre-tax</label>
+              <label class="toggle-label"><input type="checkbox" id="toggle-itemNotes" data-testid="toggle-item-notes"> Notes</label>
             </div>
 
+            <!-- Custom column toggles -->
+            <div id="custom-column-toggles" class="field-toggles custom-column-toggles hidden" data-testid="custom-column-toggles"></div>
+            <button type="button" id="btn-add-column" class="btn btn-sm btn-outline btn-add-column" data-testid="add-column-button">+ Add Column</button>
+
             <!-- VAT Summary toggle -->
             <div class="field-toggles vat-summary-toggles">
               <label class="toggle-label">
@@ -435,6 +440,10 @@ <h1 class="logo">EasyPDF <span class="logo-lite">Lite</span></h1>
           <label>Pre-tax Amount</label>
           <span class="item-pre-tax-amount" data-testid="item-pre-tax-amount">0.00</span>
         </div>
+        <div class="item-field" data-col="itemNotes">
+          <label>Notes</label>
+          <textarea class="item-notes" maxlength="500" rows="2" placeholder="Item notes..." data-testid="item-notes-input"></textarea>
+        </div>
       </div>
     </div>
   </template>

public/js/app.ts

@@ -11,6 +11,7 @@ import {
   setupSellerProfiles,
   setupBuyerProfiles,
   updateColumnVisibility,
+  addCustomColumn,
 } from "./form";
 import { saveInvoiceData, loadInvoiceData, loadSellers, saveSellers, loadBuyers, saveBuyers, saveAccordionState, loadAccordionState, saveLogo, loadLogo, removeLogo } from "./storage";
 import { generateShareUrl, loadFromUrl } from "./url-sharing";
@@ -292,6 +293,16 @@ function setupFormListeners() {
       recalculateTotal();
     });
   }
+
+  const addColumnBtn = document.getElementById("btn-add-column");
+  if (addColumnBtn) {
+    addColumnBtn.addEventListener("click", () => {
+      const header = prompt("Column name:");
+      if (header && header.trim()) {
+        addCustomColumn(header.trim());
+      }
+    });
+  }
 }
 
 // === Seller/Buyer profile management ===