Bread Plus Outlet wholesale portal development

I’m continuing work on my Bread Plus Outlet wholesale bakery portal. I have an HTML file with everything built so far — 64 customers, 108 products, invoice generator, analytics, and more. I need to upload the current HTML file and continue building.”

6:16 AM

Please go ahead and upload your HTML file and I'll take a look at what you've built so far and help you continue!

<!DOCTYPE html>

<html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Bread Plus Outlet — Wholesale Portal</title> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Jost:wght@300;400;500;600&display=swap'); :root{ --cream:#faf6f0;--warm:#f5ede0;--brown:#3d2b1f;--brown2:#6b4c3b; --tan:#c8a882;--gold:#d4a843;--red:#c0392b;--green:#2d6a4f; --border:#e8ddd0;--surface:#fff;--radius:8px; } *{margin:0;padding:0;box-sizing:border-box;} body{background:var(--cream);color:var(--brown);font-family:'Jost',sans-serif;min-height:100vh;} header{background:var(--brown);padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:62px;position:sticky;top:0;z-index:200;} .logo{display:flex;align-items:center;gap:.65rem;} .logo-icon{width:36px;height:36px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;} .logo-text{font-family:Playfair Display,serif;color:#faf6f0;font-size:1.1rem;font-weight:700;line-height:1.1;} .logo-sub{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tan);font-weight:300;} nav{display:flex;gap:2px;align-items:center;} nav button{background:none;border:none;color:rgba(250,246,240,.45);font-family:'Jost',sans-serif;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;padding:.45rem .9rem;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;} nav button:hover{color:rgba(250,246,240,.8);} nav button.active{color:#faf6f0;border-bottom-color:var(--gold);} .session-badge{font-size:.65rem;padding:.2rem .75rem;border-radius:20px;font-weight:600;letter-spacing:.04em;cursor:pointer;} .badge-owner{background:var(--gold);color:var(--brown);} .badge-customer{background:rgba(250,246,240,.15);color:#faf6f0;} main{max-width:1300px;margin:0 auto;padding:2rem;} .view{display:none;} .view.active{display:block;animation:up .2s ease;} @keyframes up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* LOGIN */ .login-wrap{min-height:78vh;display:flex;align-items:center;justify-content:center;} .login-card{background:var(–surface);border:1px solid var(–border);border-radius:var(–radius);padding:2.5rem 2rem;width:100%;max-width:400px;text-align:center;box-shadow:0 4px 24px rgba(61,43,31,.08);} .login-icon{font-size:2.5rem;display:block;margin-bottom:1rem;} .login-title{font-family:Playfair Display,serif;font-size:1.6rem;font-weight:900;margin-bottom:.4rem;} .login-sub{font-size:.82rem;color:var(–brown2);margin-bottom:1.75rem;line-height:1.6;} .pin-input{width:100%;text-align:center;font-family:Playfair Display,serif;font-size:2rem;font-weight:700;letter-spacing:.5em;background:var(–cream);border:2px solid var(–border);color:var(–brown);padding:.75rem 1rem;border-radius:6px;outline:none;transition:border-color .15s;margin-bottom:1rem;} .pin-input:focus{border-color:var(–gold);} .login-error{color:var(–red);font-size:.78rem;margin-bottom:.75rem;min-height:1.2em;} .login-hint{font-size:.68rem;color:var(–tan);margin-top:.75rem;}

/* CARDS */ .card{background:var(–surface);border:1px solid var(–border);border-radius:var(–radius);padding:1.6rem;margin-bottom:1.5rem;box-shadow:0 2px 8px rgba(61,43,31,.04);} .card-title{font-family:Playfair Display,serif;font-size:1.05rem;font-weight:700;color:var(–brown);margin-bottom:1.2rem;padding-bottom:.7rem;border-bottom:1px solid var(–border);display:flex;align-items:center;gap:.55rem;} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:.9rem;} .form-grid.full{grid-template-columns:1fr;} .field{display:flex;flex-direction:column;gap:.38rem;} .field label{font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(–brown2);font-weight:600;} .field input,.field select,.field textarea{background:var(–cream);border:1.5px solid var(–border);color:var(–brown);font-family:‘Jost’,sans-serif;font-size:.84rem;padding:.55rem .85rem;border-radius:6px;outline:none;transition:border-color .15s;width:100%;} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(–gold);} .field textarea{resize:vertical;min-height:70px;}

/* CATALOG */ .search-bar{width:100%;background:var(–cream);border:1.5px solid var(–border);color:var(–brown);font-family:‘Jost’,sans-serif;font-size:.84rem;padding:.55rem 1rem;border-radius:6px;outline:none;transition:border-color .15s;margin-bottom:1rem;} .search-bar:focus{border-color:var(–gold);} .cat-tabs{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.5rem;} .cat-tab{background:none;border:1.5px solid var(–border);color:var(–brown2);font-family:‘Jost’,sans-serif;font-size:.71rem;font-weight:500;padding:.35rem .9rem;border-radius:20px;cursor:pointer;transition:all .15s;} .cat-tab:hover{border-color:var(–tan);} .cat-tab.active{background:var(–brown);border-color:var(–brown);color:#faf6f0;}

/* DEPARTMENT SECTIONS */ .dept-section{margin-bottom:2.5rem;} .dept-header{ font-family:Playfair Display,serif;font-size:1.05rem;font-weight:700; color:#faf6f0;background:var(–brown2); padding:.65rem 1.1rem;border-radius:6px; margin-bottom:1rem;display:flex;align-items:center; justify-content:space-between; } .dept-header-left{display:flex;align-items:center;gap:.5rem;} .dept-header::before{content:none;} .dept-arrow{color:var(–gold);font-size:.9rem;} .dept-count{font-size:.65rem;background:rgba(250,246,240,.2);padding:.15rem .55rem;border-radius:20px;font-family:‘Jost’,sans-serif;font-weight:500;} .dept-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.85rem;}

/* PRODUCT CARDS */ .product-card{background:var(–surface);border:1.5px solid var(–border);border-radius:6px;padding:.9rem;cursor:pointer;transition:all .15s;position:relative;} .product-card:hover{border-color:var(–gold);background:#fffdf8;} .product-card.selected{border-color:var(–gold);background:rgba(212,168,67,.07);} .product-card.selected::after{content:‘✓’;position:absolute;top:.45rem;right:.45rem;background:var(–gold);color:#fff;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;} .prod-name{font-family:Playfair Display,serif;font-size:.9rem;font-weight:600;color:var(–brown);margin-bottom:.25rem;line-height:1.3;padding-right:1.2rem;} .prod-pack{font-size:.68rem;color:var(–tan);margin-bottom:.5rem;font-weight:500;} .prod-price{font-size:.9rem;font-weight:600;color:var(–green);} .qty-row{display:flex;align-items:center;gap:.45rem;margin-top:.65rem;} .qty-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(–brown2);font-weight:600;} .qty-ctrl{display:flex;align-items:center;gap:.35rem;} .qty-btn{width:24px;height:24px;border-radius:50%;border:1.5px solid var(–border);background:var(–cream);color:var(–brown);font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;line-height:1;} .qty-btn:hover{border-color:var(–gold);background:var(–gold);color:#fff;} .qty-num{width:28px;text-align:center;font-size:.85rem;font-weight:600;}

/* ORDER SUMMARY */ .order-summary{background:var(–warm);border:1.5px solid var(–border);border-radius:var(–radius);padding:1.2rem;margin-bottom:1.4rem;position:sticky;bottom:1rem;z-index:50;box-shadow:0 4px 20px rgba(61,43,31,.1);} .summary-title{font-family:Playfair Display,serif;font-size:.95rem;font-weight:700;margin-bottom:.9rem;display:flex;align-items:center;justify-content:space-between;} .summary-empty{text-align:center;color:var(–tan);font-size:.76rem;padding:.75rem 0;} .summary-items-list{max-height:160px;overflow-y:auto;margin-bottom:.75rem;} .summary-item{display:flex;justify-content:space-between;align-items:flex-start;padding:.38rem 0;border-bottom:1px solid var(–border);font-size:.78rem;} .summary-item:last-of-type{border-bottom:none;} .summary-item-name{color:var(–brown);font-weight:500;flex:1;} .summary-item-detail{color:var(–brown2);font-size:.68rem;} .summary-item-price{color:var(–green);font-weight:600;white-space:nowrap;margin-left:.5rem;} .summary-total{display:flex;justify-content:space-between;padding-top:.7rem;border-top:2px solid var(–border);font-family:Playfair Display,serif;font-size:1.05rem;font-weight:700;}

/* BUTTONS */ .btn{font-family:‘Jost’,sans-serif;font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.5rem 1.2rem;border-radius:6px;cursor:pointer;transition:all .15s;border:2px solid;} .btn-primary{background:var(–brown);border-color:var(–brown);color:#faf6f0;} .btn-primary:hover{background:var(–brown2);} .btn-gold{background:var(–gold);border-color:var(–gold);color:#fff;} .btn-gold:hover{background:#c09030;} .btn-ghost{background:none;border-color:var(–border);color:var(–brown2);} .btn-ghost:hover{border-color:var(–brown);color:var(–brown);} .btn-sm{padding:.32rem .75rem;font-size:.68rem;} .btn-danger{background:none;border:none;color:var(–red);font-size:.7rem;cursor:pointer;font-family:‘Jost’,sans-serif;} .btn-danger:hover{text-decoration:underline;} .btn-full{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem;}

/* SUCCESS */ .success-screen{display:none;text-align:center;padding:3rem 1rem;} .success-screen.active{display:block;} .success-icon{font-size:3rem;display:block;margin-bottom:.9rem;} .success-title{font-family:Playfair Display,serif;font-size:1.7rem;font-weight:900;margin-bottom:.6rem;} .success-sub{font-size:.85rem;color:var(–brown2);line-height:1.7;max-width:400px;margin:0 auto 1.5rem;} .order-ref-badge{display:inline-block;background:var(–warm);border:1px solid var(–border);border-radius:6px;padding:.5rem 1.5rem;font-family:Playfair Display,serif;font-size:1.1rem;font-weight:700;color:var(–gold);margin-bottom:1.5rem;}

/* DASHBOARD STATS */ .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(–border);border-radius:var(–radius);overflow:hidden;margin-bottom:2rem;} .stat{background:var(–surface);padding:1.2rem 1.4rem;border-right:1px solid var(–border);} .stat:last-child{border-right:none;} .stat-label{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(–tan);margin-bottom:.45rem;font-weight:600;} .stat-val{font-family:Playfair Display,serif;font-size:1.9rem;font-weight:700;color:var(–brown);} .stat-val.green{color:var(–green);} .stat-val.red{color:var(–red);}

/* ORDER CARDS */ .orders-list{display:flex;flex-direction:column;gap:.85rem;} .order-card{background:var(–surface);border:1.5px solid var(–border);border-radius:var(–radius);overflow:hidden;} .order-card:hover{border-color:var(–tan);} .order-card-header{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.2rem;cursor:pointer;} .order-num{font-family:Playfair Display,serif;font-size:.95rem;font-weight:700;} .order-meta{font-size:.72rem;color:var(–brown2);margin-top:.15rem;} .status-badge{font-size:.62rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:.22rem .7rem;border-radius:20px;} .status-new{background:rgba(212,168,67,.15);color:#9a7020;} .status-processing{background:rgba(44,74,124,.1);color:#2c4a7c;} .status-ready{background:rgba(45,106,79,.1);color:var(–green);} .status-delivered{background:rgba(61,43,31,.08);color:var(–brown2);} .status-paid{background:rgba(45,106,79,.2);color:var(–green);} .status-unpaid{background:rgba(192,57,43,.1);color:var(–red);} .order-card-body{display:none;border-top:1px solid var(–border);padding:1.2rem;} .order-card-body.open{display:block;} .order-items-tbl{width:100%;border-collapse:collapse;font-size:.76rem;margin-bottom:1rem;} .order-items-tbl th{text-align:left;padding:.45rem .7rem;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(–tan);font-weight:600;border-bottom:1px solid var(–border);} .order-items-tbl td{padding:.45rem .7rem;border-bottom:1px solid rgba(232,221,208,.5);} .order-items-tbl tr:last-child td{border-bottom:none;} .order-actions{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;} .order-notes-box{background:var(–warm);border-radius:4px;padding:.7rem .9rem;font-size:.76rem;color:var(–brown2);margin-bottom:.9rem;line-height:1.6;}

/* WORK ORDER */ .work-order-wrap{background:var(–surface);border:1.5px solid var(–gold);border-radius:var(–radius);padding:1.5rem;margin-bottom:2rem;} .work-order-title{font-family:Playfair Display,serif;font-size:1.2rem;font-weight:700;color:var(–brown);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;} .work-dept{margin-bottom:1.25rem;} .work-dept-title{font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(–tan);font-weight:700;margin-bottom:.5rem;padding-bottom:.35rem;border-bottom:1px solid var(–border);} .work-item-row{display:flex;justify-content:space-between;align-items:center;padding:.35rem 0;font-size:.82rem;border-bottom:1px dashed rgba(232,221,208,.6);} .work-item-row:last-child{border-bottom:none;} .work-item-name{color:var(–brown);font-weight:500;} .work-item-qty{font-family:Playfair Display,serif;font-size:1.1rem;font-weight:700;color:var(–gold);min-width:3rem;text-align:right;} .work-item-pack{font-size:.68rem;color:var(–tan);}

/* FILTER */ .filter-row{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap;margin-bottom:1.1rem;} .filter-row select,.filter-row input{background:var(–surface);border:1.5px solid var(–border);color:var(–brown);font-family:‘Jost’,sans-serif;font-size:.78rem;padding:.42rem .8rem;border-radius:6px;outline:none;}

/* TABLE */ .table-wrap{background:var(–surface);border:1px solid var(–border);border-radius:var(–radius);overflow:hidden;margin-bottom:1.5rem;} table{width:100%;border-collapse:collapse;font-size:.76rem;} th{background:var(–brown);color:rgba(250,246,240,.75);text-align:left;padding:.6rem .9rem;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;} td{padding:.65rem .9rem;border-bottom:1px solid var(–border);vertical-align:middle;} tr:last-child td{border-bottom:none;} tr:hover td{background:#fffdf8;} .amount{color:var(–green);font-weight:600;} .amount-red{color:var(–red);font-weight:600;} .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem;} .section-title{font-family:Playfair Display,serif;font-size:1.15rem;font-weight:700;} .pill{background:var(–brown);color:#faf6f0;font-size:.6rem;padding:.18rem .6rem;border-radius:20px;font-weight:600;} .empty-state{text-align:center;padding:2.5rem;color:var(–tan);font-size:.78rem;} .empty-state span{font-size:1.8rem;display:block;margin-bottom:.5rem;}

/* ALERT */ .alert{display:none;padding:.7rem 1rem;border-radius:6px;margin-bottom:.9rem;font-size:.76rem;align-items:center;gap:.65rem;} .alert.active{display:flex;} .alert-success{background:#d8f3dc;color:#1b4332;} .alert-error{background:#ffe0dc;color:#7f1d1d;}

/* INVOICE MODAL */ .modal-bg{display:none;position:fixed;inset:0;background:rgba(61,43,31,.6);z-index:500;align-items:center;justify-content:center;backdrop-filter:blur(4px);} .modal-bg.active{display:flex;} .modal{background:var(–surface);border-radius:var(–radius);width:600px;max-height:85vh;overflow-y:auto;padding:2rem;position:relative;box-shadow:0 24px 60px rgba(0,0,0,.18);} .modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.1rem;cursor:pointer;color:var(–tan);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;} .modal-close:hover{background:var(–warm);color:var(–brown);}

/* CUSTOMER PRICING */ .price-override-row{display:flex;align-items:center;justify-content:space-between;padding:.42rem .7rem;background:var(–cream);border:1px solid var(–border);border-radius:5px;font-size:.75rem;margin-bottom:.35rem;} .price-override-row input{width:80px;background:var(–surface);border:1.5px solid var(–border);color:var(–brown);font-family:‘Jost’,sans-serif;font-size:.75rem;padding:.28rem .55rem;border-radius:4px;outline:none;text-align:right;} .price-override-row input:focus{border-color:var(–gold);}

@media(max-width:768px){ .stats-row{grid-template-columns:1fr 1fr;} .form-grid{grid-template-columns:1fr;} .dept-grid{grid-template-columns:repeat(2,1fr);} nav button{padding:.45rem .55rem;font-size:.65rem;} }

/* NOTIFICATION TOAST */ .toast{ position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999; background:var(–brown);color:#faf6f0; border-left:4px solid var(–gold); border-radius:var(–radius); padding:1rem 1.25rem; box-shadow:0 8px 32px rgba(0,0,0,.25); max-width:320px;font-size:.82rem;line-height:1.5; animation:slideIn .3s ease; display:none; } .toast.active{display:block;} .toast-title{font-family:Playfair Display,serif;font-weight:700;font-size:.95rem;margin-bottom:.25rem;color:var(–gold);} .toast-close{float:right;background:none;border:none;color:rgba(250,246,240,.5);cursor:pointer;font-size:1rem;margin-left:.5rem;line-height:1;} @keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

/* ANALYTICS */ .analytics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-bottom:1.5rem;} .analytics-card{background:var(–surface);border:1px solid var(–border);border-radius:var(–radius);padding:1.25rem;} .analytics-card-title{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(–tan);font-weight:600;margin-bottom:.75rem;display:flex;align-items:center;justify-content:space-between;} .trend-up{color:var(–green);font-size:.72rem;font-weight:600;} .trend-down{color:var(–red);font-size:.72rem;font-weight:600;} .trend-flat{color:var(–tan);font-size:.72rem;} .analytics-row{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0;border-bottom:1px solid rgba(232,221,208,.5);font-size:.78rem;} .analytics-row:last-child{border-bottom:none;} .analytics-bar-wrap{background:var(–warm);border-radius:20px;height:6px;flex:1;margin:0 .75rem;overflow:hidden;} .analytics-bar{background:var(–gold);height:100%;border-radius:20px;transition:width .3s;} .analytics-val{font-weight:600;color:var(–brown);min-width:3rem;text-align:right;font-size:.78rem;} .period-tabs{display:flex;gap:.35rem;margin-bottom:1.25rem;flex-wrap:wrap;} .period-tab{background:none;border:1.5px solid var(–border);color:var(–brown2);font-family:‘Jost’,sans-serif;font-size:.72rem;font-weight:500;padding:.32rem .85rem;border-radius:20px;cursor:pointer;transition:all .15s;} .period-tab.active{background:var(–brown);border-color:var(–brown);color:#faf6f0;} .big-stat{font-family:Playfair Display,serif;font-size:2rem;font-weight:700;color:var(–brown);line-height:1;} .big-stat-label{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(–tan);margin-top:.3rem;} .summary-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(–border);border-radius:var(–radius);overflow:hidden;margin-bottom:1.5rem;} .summary-card{background:var(–surface);padding:1rem 1.25rem;border-right:1px solid var(–border);} .summary-card:last-child{border-right:none;}

/* PRINT STYLES */ @media print { header, nav, .filter-row, .order-actions, .btn, .stats-row, .order-card-header .dept-arrow, #inv-modal .modal > div:last-child, .modal-close { display:none !important; } body { background:#fff !important; } .modal-bg { position:static !important; background:none !important; display:block !important; } .modal { box-shadow:none !important; width:100% !important; max-height:none !important; padding:0 !important; } #invoice-preview { padding:0 !important; } } </style>

</head> <body>

<header> <div class="logo"> <div class="logo-icon">🍞</div> <div> <div class="logo-text">Bread Plus Outlet</div> <div class="logo-sub">Wholesale Portal</div> </div> </div> <nav id="main-nav"> <button class="active" onclick="showView('login',this)">Order Portal</button> <button onclick="ownerLogin()">Owner Dashboard</button> </nav> </header>

<main>

<div class="view active" id="view-login"> <div class="login-wrap"> <div class="login-card"> <span class="login-icon">🥐</span> <div class="login-title">Welcome Back</div> <div class="login-sub">Enter your account code to place a wholesale order with Bread Plus Outlet.</div> <input class="pin-input" type="password" id="pin-input" maxlength="6" placeholder="••••" onkeydown="if(event.key==='Enter')doLogin()"/> <div class="login-error" id="login-error"></div> <button class="btn btn-gold btn-full" onclick="doLogin()">Enter Portal</button> <div class="login-hint">No code? Contact Bread Plus Outlet to set up your wholesale account.<br/>Tel: 1 (347) 462-3838</div> </div> </div> </div>

<div class="view" id="view-order"> <div id="order-form-wrap"> <div style="background:var(--warm);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.5rem;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;"> <div> <div style="font-family:Playfair Display,serif;font-size:1.1rem;font-weight:700;" id="welcome-name"></div> <div style="font-size:.72rem;color:var(--brown2);">Your custom wholesale prices are loaded. Browse by department below.</div> </div> <button class="btn btn-ghost btn-sm" onclick="logout()">Sign Out</button> </div>

<div class="alert alert-error" id="form-error"><span>⚠️</span><span id="form-error-text"></span></div>



<div class="card">
  <div class="card-title"><span>🧁</span>Select Products</div>
  <input class="search-bar" type="text" placeholder="Search products…" oninput="searchProducts(this.value)" id="prod-search"/>
  <div class="cat-tabs" id="cat-tabs"></div>
  <div id="products-grid"></div>
</div>

<div class="order-summary">
  <div class="summary-title">
    <span>Order Summary</span>
    <span id="item-count" style="font-size:.72rem;color:var(--tan);font-family:'Jost',sans-serif;font-weight:500;"></span>
  </div>
  <div class="summary-items-list" id="summary-items"><div class="summary-empty">No items selected yet</div></div>
  <div class="summary-total" id="summary-total" style="display:none">
    <span>Order Total</span><span id="total-amount">$0.00</span>
  </div>
</div>

<div class="card">
  <div class="card-title"><span>📝</span>Special Instructions</div>
  <div class="field"><textarea id="o-notes" placeholder="Special requests, substitutions, delivery notes…"></textarea></div>
</div>

<button class="btn btn-gold btn-full" onclick="submitOrder()">📨 Submit Wholesale Order</button>

</div>

<div class="success-screen" id="success-screen"> <span class="success-icon">🎉</span> <div class="success-title">Order Received!</div> <div class="order-ref-badge" id="success-ref">BPO-0000</div> <div class="success-sub">Your order has been submitted to Bread Plus Outlet. We'll confirm delivery details shortly.</div> <button class="btn btn-primary" onclick="resetOrder()">Place Another Order</button> </div> </div>

<div class="view" id="view-dashboard"> <div class="stats-row"> <div class="stat"><div class="stat-label">Total Orders</div><div class="stat-val" id="d-orders">0</div></div> <div class="stat"><div class="stat-label">This Week</div><div class="stat-val" id="d-week">0</div></div> <div class="stat"><div class="stat-label">Open Invoices</div><div class="stat-val red" id="d-open">0</div></div> <div class="stat"><div class="stat-label">Revenue (Paid)</div><div class="stat-val green" id="d-rev">$0</div></div> </div>

<div class="filter-row"> <select id="f-status" onchange="renderDashboard()"> <option value="">All Statuses</option> <option value="new">New</option> <option value="processing">Processing</option> <option value="ready">Ready</option> <option value="delivered">Delivered</option> </select> <select id="f-payment" onchange="renderDashboard()"> <option value="">All Payments</option> <option value="unpaid">Unpaid / Open</option> <option value="paid">Paid / Closed</option> </select> <select id="f-customer" onchange="renderDashboard()"><option value="">All Customers</option></select> <input type="date" id="f-from" onchange="renderDashboard()"/> <input type="date" id="f-to" onchange="renderDashboard()"/> <button class="btn btn-ghost btn-sm" onclick="exportCSV()">⬇ CSV</button> </div>

<div class="section-header"> <div class="section-title">Orders</div> <button class="btn btn-ghost btn-sm" onclick="renderCutoffSettings()" style="margin-left:auto">⏰ Order Cutoff</button> <span class="pill" id="d-badge">0</span> </div> <div class="orders-list" id="orders-list"> <div class="empty-state"><span>📭</span>No orders yet</div> </div> </div>

<div class="view" id="view-workorders"> <div class="card"> <div class="card-title"><span>📋</span>Generate Work Order / Production List</div> <div class="form-grid"> <div class="field"><label>Delivery Date</label><input type="date" id="wo-date" onchange="renderWorkOrder()"/></div> <div class="field"><label>Customer (optional)</label><select id="wo-customer" onchange="renderWorkOrder()"><option value="">All Customers</option></select></div> </div> </div> <div id="work-order-output"> <div class="empty-state"><span>📋</span>Select a delivery date above to generate the production list</div> </div> </div>

<div class="view" id="view-customers"> <div class="section-header"> <div class="section-title">Customer Accounts & Pricing</div> <button class="btn btn-primary btn-sm" onclick="showAddCustomer()">+ Add Customer</button> </div> <div class="alert alert-success" id="cust-alert"><span>✅</span><span id="cust-alert-text"></span></div> <div class="card" id="add-customer-card" style="display:none"> <div class="card-title"><span>➕</span>New Customer</div> <div class="form-grid"> <div class="field"><label>Business Name *</label><input type="text" id="nc-name"/></div> <div class="field"><label>Access PIN *</label><input type="text" id="nc-pin" maxlength="6" placeholder="e.g. 1006"/></div> <div class="field"><label>Contact Name</label><input type="text" id="nc-contact"/></div> <div class="field"><label>Phone</label><input type="tel" id="nc-phone"/></div> </div> <div style="display:flex;gap:.5rem;"> <button class="btn btn-primary btn-sm" onclick="addCustomer()">Save</button> <button class="btn btn-ghost btn-sm" onclick="document.getElementById('add-customer-card').style.display='none'">Cancel</button> </div> </div> <div id="customers-list"></div> </div>

<div class="view" id="view-products"> <div class="section-header"> <div class="section-title">Product Catalog</div> <span class="pill" id="prod-count-badge">0</span> </div> <div class="card"> <div class="card-title"><span>➕</span>Add Product</div> <div class="form-grid"> <div class="field"><label>Product Name *</label><input type="text" id="np-name"/></div> <div class="field"><label>Department</label> <select id="np-cat"> <option>Donuts & Frozen</option> <option>Cookies (Small Pack)</option> <option>Bulk Cookies</option> <option>Biscotti</option> <option>Cookies (12 lb.)</option> <option>Taralli & Breadsticks</option> <option>Danishes</option> <option>Cakes</option> <option>Cheesecakes</option> <option>Mini Pastries & Brownies</option> </select> </div> <div class="field"><label>Pack Size</label><input type="text" id="np-unit" placeholder="e.g. 12pc. bag, each, 12 lb."/></div> <div class="field"><label>Default Price ($)</label><input type="number" id="np-price" step="0.01"/></div> </div> <button class="btn btn-primary btn-sm" onclick="addProduct()">Add to Catalog</button> </div> <div class="table-wrap"> <table><thead><tr><th>Product</th><th>Department</th><th>Pack Size</th><th>Default Price</th><th></th><th></th></tr></thead> <tbody id="prod-tbody"></tbody></table> </div> </div>

<div class="filter-bar" style="margin-bottom:1.25rem;"> <div class="period-tabs" id="period-tabs" style="margin:0"> <button class="period-tab active" onclick="setPeriod('week',this)">This Week</button> <button class="period-tab" onclick="setPeriod('month',this)">This Month</button> <button class="period-tab" onclick="setPeriod('quarter',this)">3 Months</button> <button class="period-tab" onclick="setPeriod('year',this)">This Year</button> <button class="period-tab" onclick="setPeriod('all',this)">All Time</button> </div> <div class="filter-group" style="margin-left:auto"> <span class="filter-label">Customer</span> <select id="a-customer" onchange="renderAnalytics()"><option value="">All</option></select> </div> <div class="filter-group"> <span class="filter-label">Item</span> <select id="a-item" onchange="renderAnalytics()"><option value="">All</option></select> </div> <button class="btn btn-ghost btn-sm" onclick="exportAnalyticsCSV()">⬇ Export</button> </div>

<!-- TOP ITEMS BY QTY -->
<div class="analytics-card" style="grid-column: span 2">
  <div class="analytics-card-title">
    <span>📦 Top Items by Quantity Sold</span>
    <span id="a-items-period" style="color:var(--tan);font-size:.65rem;"></span>
  </div>
  <div id="a-top-items"></div>
</div>

<!-- TOP ITEMS BY REVENUE -->
<div class="analytics-card" style="grid-column: span 2">
  <div class="analytics-card-title">
    <span>💰 Top Items by Revenue</span>
  </div>
  <div id="a-top-items-rev"></div>
</div>

<!-- TOP CUSTOMERS -->
<div class="analytics-card" style="grid-column: span 2">
  <div class="analytics-card-title">
    <span>👥 Top Customers by Revenue</span>
  </div>
  <div id="a-top-customers"></div>
</div>

<!-- TOP CUSTOMERS BY QTY -->
<div class="analytics-card" style="grid-column: span 2">
  <div class="analytics-card-title">
    <span>🛒 Top Customers by Items Ordered</span>
  </div>
  <div id="a-top-customers-qty"></div>
</div>

</div>

<div class="section-header"> <div class="section-title">Customer × Item Detail</div> <span class="pill" id="a-ci-count">0 rows</span> </div> <div class="table-wrap"> <table> <thead><tr><th>Customer</th><th>Item</th><th>Total Qty</th><th>Orders</th><th>Total Revenue</th><th>Avg per Order</th></tr></thead> <tbody id="a-ci-tbody"></tbody> </table> </div>

<div class="section-header" style="margin-top:1rem"> <div class="section-title">Orders by Week</div> </div> <div class="table-wrap"> <table> <thead><tr><th>Week</th><th>Orders</th><th>Items Sold</th><th>Revenue</th><th>vs Prior Week</th></tr></thead> <tbody id="a-weekly-tbody"></tbody> </table> </div>

<div class="section-header" style="margin-top:1rem"> <div class="section-title">Orders by Month</div> </div> <div class="table-wrap"> <table> <thead><tr><th>Month</th><th>Orders</th><th>Items Sold</th><th>Revenue</th><th>vs Prior Month</th></tr></thead> <tbody id="a-monthly-tbody"></tbody> </table> </div>

<div class="section-header" style="margin-top:1rem"> <div class="section-title">⏰ Invoice Aging — Unpaid Balances</div> <span class="pill" id="aging-total-badge">$0.00 outstanding</span> </div> <div class="table-wrap"> <table> <thead><tr><th>Customer</th><th>Invoice #</th><th>Order Date</th><th>Days Outstanding</th><th>Amount Due</th><th>Age</th></tr></thead> <tbody id="a-aging-tbody"></tbody> </table> </div>

</div>

<div class="view" id="view-cust-history"> <div style="background:var(--warm);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.5rem;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;"> <div> <div style="font-family:Playfair Display,serif;font-size:1.1rem;font-weight:700;" id="history-welcome"></div> <div style="font-size:.72rem;color:var(--brown2);">Your order history with Bread Plus Outlet</div> </div> <button class="btn btn-ghost btn-sm" onclick="logout()">Sign Out</button> </div> <div id="cust-history-list"> <div class="empty-state"><span>📋</span>No orders yet</div> </div> </div>

<div class="view" id="view-aging"> <div class="section-header"> <div class="section-title">Invoice Aging Report</div> <span style="font-size:.72rem;color:var(--tan);">Unpaid invoices by age</span> </div> <div id="aging-body"><div class="empty-state"><span>⏳</span>Loading...</div></div> </div>

<div class="view" id="view-bi"> <div class="section-header"> <div class="section-title">Business Insights</div> <span style="font-size:.72rem;color:var(--tan);">Trends, retention & year over year</span> </div> <div id="bi-body"><div class="empty-state"><span>🧠</span>Loading...</div></div> </div>

<div class="modal-bg" id="cutoff-modal"> <div class="modal" style="width:420px"> <button class="modal-close" onclick="document.getElementById('cutoff-modal').classList.remove('active')">✕</button> <div style="font-family:Playfair Display,serif;font-size:1.1rem;font-weight:700;margin-bottom:1rem;">⏰ Order Cutoff Settings</div> <div style="display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;"> <input type="checkbox" id="cutoff-enabled" style="width:1.1rem;height:1.1rem;accent-color:var(--brown);"/> <label style="font-size:.82rem;font-weight:600;">Enable order cutoff time</label> </div> <div class="field" style="margin-bottom:.75rem;"> <label>Cutoff Time</label> <input type="time" id="cutoff-time" value="17:00"/> </div> <div class="field" style="margin-bottom:1rem;"> <label>Message shown to customers after cutoff</label> <textarea id="cutoff-message" rows="2">Orders are closed for today. Please contact us directly.</textarea> </div> <div style="display:flex;gap:.5rem;"> <button class="btn btn-primary btn-sm" onclick="saveCutoffSettings()">💾 Save</button> <button class="btn btn-ghost btn-sm" onclick="document.getElementById('cutoff-modal').classList.remove('active')">Cancel</button> </div> </div> </div>

</main>

<div class="toast" id="order-toast"> <button class="toast-close" onclick="closeToast()">✕</button> <div class="toast-title">🛒 New Order!</div> <div id="toast-msg"></div> </div>

<div class="modal-bg" id="inv-modal"> <div class="modal" style="width:700px;max-width:95vw;"> <button class="modal-close" onclick="document.getElementById('inv-modal').classList.remove('active')">✕</button> <div id="inv-modal-body"></div> <div style="display:flex;gap:.5rem;margin-top:1.25rem;flex-wrap:wrap;"> <button class="btn btn-gold btn-sm" onclick="printInvoice()">🖨 Print Invoice</button> <button class="btn btn-ghost btn-sm" onclick="downloadInvoicePDF()">⬇ Download PDF</button> <button class="btn btn-ghost btn-sm" onclick="shareInvoice('email')">✉️ Email Invoice</button> <button class="btn btn-ghost btn-sm" onclick="shareInvoice('sms')">💬 Text Invoice</button> <button class="btn btn-primary btn-sm" id="inv-pay-btn">✓ Mark as Paid</button> <button class="btn btn-ghost btn-sm" onclick="document.getElementById('inv-modal').classList.remove('active')">Close</button> </div> </div> </div>

<div class="modal-bg" id="fee-modal"> <div class="modal" style="width:420px"> <button class="modal-close" onclick="document.getElementById('fee-modal').classList.remove('active')">✕</button> <div style="font-family:Playfair Display,serif;font-size:1.1rem;font-weight:700;margin-bottom:1rem;">Add Extra Charge</div> <div class="field" style="margin-bottom:.75rem"><label>Description</label><input type="text" id="fee-desc" placeholder="e.g. Bounce Check Fee"/></div> <div class="field" style="margin-bottom:1rem"><label>Amount ($)</label><input type="number" id="fee-amount" placeholder="50.00" step="0.01"/></div> <div style="display:flex;gap:.5rem"> <button class="btn btn-primary btn-sm" onclick="addFeeToInvoice()">Add Charge</button> <button class="btn btn-ghost btn-sm" onclick="document.getElementById('fee-modal').classList.remove('active')">Cancel</button> </div> </div> </div>

let orders = load(K.orders) || []; let products = load(K.products) || buildProducts(); let customers = load(K.customers) || buildCustomers();

// ══════════════════════════════════════════════ // PRODUCT CATALOG — ALL 106 ITEMS // ══════════════════════════════════════════════ function buildProducts() { return [ // ── DONUTS & FROZEN ── {id:'p1', cat:'Donuts & Frozen', name:'7 Layer Donuts', pack:'10pc. per case', price:35.00}, {id:'p2', cat:'Donuts & Frozen', name:'Iris (Frozen)', pack:'12pc. per case', price:24.00}, {id:'p3', cat:'Donuts & Frozen', name:'Iris Cooked', pack:'each', price:3.50}, {id:'p4', cat:'Donuts & Frozen', name:'Hamantash', pack:'18pc. per case', price:36.00}, {id:'p5', cat:'Donuts & Frozen', name:'Frozen Cassatelle', pack:'45pc. per case', price:67.50}, {id:'p6', cat:'Donuts & Frozen', name:'Cassatelle Cooked', pack:'12pc. per case', price:21.00}, {id:'p6b', cat:'Donuts & Frozen', name:'Mini Brownie', pack:'20pc.', price:33.00}, // ── COOKIES SMALL PACK ── {id:'p7', cat:'Cookies (Small Pack)', name:'Large Cookie', pack:'12pc.', price:24.00}, {id:'p8', cat:'Cookies (Small Pack)', name:'Large Linzer Tart', pack:'20pc.', price:35.00}, // ── BULK COOKIES ── {id:'p9', cat:'Bulk Cookies', name:'Chocolate Moon Cookies', pack:'5 lb.', price:27.50}, {id:'p10', cat:'Bulk Cookies', name:'Lemon Cream', pack:'5 lb.', price:25.00}, {id:'p11', cat:'Bulk Cookies', name:'Mini Linzer Tart', pack:'5 lb.', price:23.75}, {id:'p12', cat:'Bulk Cookies', name:'Mini Nutella Linzer', pack:'5 lb.', price:25.00}, {id:'p13', cat:'Bulk Cookies', name:'Raspberry Moon Cookies', pack:'5 lb.', price:23.75}, {id:'p14', cat:'Bulk Cookies', name:'Triple Chocolate Linzer Tart', pack:'5 lb.', price:23.75}, {id:'p15', cat:'Bulk Cookies', name:'Raspberry Rugulach', pack:'10 lb. case', price:85.00}, {id:'p16', cat:'Bulk Cookies', name:'Chocolate Ruggalah', pack:'10 lb. case', price:85.00}, // ── BISCOTTI ── {id:'p17', cat:'Biscotti', name:'Almond Biscotti', pack:'12pc. bag', price:57.00}, {id:'p18', cat:'Biscotti', name:'Cappuccino Biscotti', pack:'12pc. bag', price:57.00}, {id:'p19', cat:'Biscotti', name:'Chocolate Biscotti', pack:'12pc. bag', price:57.00}, {id:'p20', cat:'Biscotti', name:'Lemon Biscotti', pack:'12pc. bag', price:57.00}, {id:'p21', cat:'Biscotti', name:'Half Dipped Chocolate Biscotti', pack:'12pc. bag', price:57.00}, {id:'p22', cat:'Biscotti', name:'Naplitano Biscotti', pack:'12pc. bag', price:57.00}, {id:'p23', cat:'Biscotti', name:'Pistachio Biscotti', pack:'12pc. bag', price:57.00}, {id:'p24', cat:'Biscotti', name:'Anisette Biscotti', pack:'12pc. bag', price:57.00}, // ── COOKIES 12 LB ── {id:'p25', cat:'Cookies (12 lb.)', name:'1/2 Dip Chocolate Chip Cookie', pack:'12 lb. case', price:60.00}, {id:'p26', cat:'Cookies (12 lb.)', name:'Pignoli Cookie', pack:'6pc. (0.5 lb.)', price:84.00}, {id:'p27', cat:'Cookies (12 lb.)', name:'Anise Bites Cookie', pack:'12 lb. case', price:60.00}, {id:'p28', cat:'Cookies (12 lb.)', name:'Assorted Cookie', pack:'12 lb. case', price:57.00}, {id:'p29', cat:'Cookies (12 lb.)', name:'Cannoli Cookie', pack:'12 lb. case', price:57.00}, {id:'p30', cat:'Cookies (12 lb.)', name:'Cannoli Cookie Choc Chip', pack:'12 lb. case', price:57.00}, {id:'p31', cat:'Cookies (12 lb.)', name:'Cappuccino S Cookie', pack:'12 lb. case', price:60.00}, {id:'p32', cat:'Cookies (12 lb.)', name:'Cheesecake Cookie', pack:'12 lb. case', price:60.00}, {id:'p33', cat:'Cookies (12 lb.)', name:'Chocolate Dunkers Cookie', pack:'12 lb. case', price:60.00}, {id:'p34', cat:'Cookies (12 lb.)', name:'Chocolate Fudge Cookie', pack:'12 lb. case', price:60.00}, {id:'p35', cat:'Cookies (12 lb.)', name:'Chocolate Horseshoe Cookie', pack:'12 lb. case', price:102.00}, {id:'p36', cat:'Cookies (12 lb.)', name:'Chocolate Moon Cookie', pack:'12 lb. case', price:66.00}, {id:'p37', cat:'Cookies (12 lb.)', name:'Italian Fig Cookie', pack:'12 lb. case', price:102.00}, {id:'p38', cat:'Cookies (12 lb.)', name:'Lemon Bite Cookie', pack:'12 lb. case', price:57.00}, {id:'p39', cat:'Cookies (12 lb.)', name:'Mini Linzer Tart Cookie', pack:'12 lb. case', price:57.00}, {id:'p40', cat:'Cookies (12 lb.)', name:'Pocket Cookie', pack:'12 lb. case', price:60.00}, {id:'p41', cat:'Cookies (12 lb.)', name:'Pistachio Bite Cookie', pack:'12 lb. case', price:60.00}, {id:'p42', cat:'Cookies (12 lb.)', name:'Raspberry Moon Cookie', pack:'12 lb. case', price:66.00}, {id:'p43', cat:'Cookies (12 lb.)', name:'Raspberry Nut Cookie', pack:'12 lb. case', price:57.00}, {id:'p44', cat:'Cookies (12 lb.)', name:'Raspberry Sandwich Sprinkle Cookie', pack:'12 lb. case', price:60.00}, {id:'p45', cat:'Cookies (12 lb.)', name:'Red Velvet Cookie', pack:'12 lb. case', price:60.00}, {id:'p46', cat:'Cookies (12 lb.)', name:'Sesame S Cookie', pack:'12 lb. case', price:57.00}, {id:'p47', cat:'Cookies (12 lb.)', name:'Seven Layer Cookie', pack:'12 lb. case', price:102.00}, {id:'p48', cat:'Cookies (12 lb.)', name:'Seven Layer Donut Hole', pack:'12 lb. case', price:66.00}, {id:'p49', cat:'Cookies (12 lb.)', name:'Sicilian Cookie', pack:'12 lb. case', price:57.00}, {id:'p50', cat:'Cookies (12 lb.)', name:'Sugar Free Cookie', pack:'12 lb. case', price:60.00}, {id:'p51', cat:'Cookies (12 lb.)', name:'Sugar Horseshoe Cookie', pack:'12 lb. case', price:102.00}, // ── TARALLI & BREADSTICKS ── {id:'p52', cat:'Taralli & Breadsticks', name:'Taralli Plain', pack:'12 lb. case', price:57.00}, {id:'p53', cat:'Taralli & Breadsticks', name:'Taralli Red Pepper', pack:'12 lb. case', price:57.00}, {id:'p54', cat:'Taralli & Breadsticks', name:'Taralli Black Pepper', pack:'12 lb. case', price:57.00}, {id:'p55', cat:'Taralli & Breadsticks', name:'Taralli Fennel', pack:'12 lb. case', price:57.00}, {id:'p56', cat:'Taralli & Breadsticks', name:'Sesame Breadsticks', pack:'12pc. case', price:51.00}, {id:'p57', cat:'Taralli & Breadsticks', name:'Plain Breadsticks', pack:'12pc. case', price:51.00}, {id:'p58', cat:'Taralli & Breadsticks', name:'Everything Breadsticks', pack:'12pc. case', price:51.00}, // ── DANISHES ── {id:'p59', cat:'Danishes', name:'Cheese Danish', pack:'each', price:7.50}, {id:'p60', cat:'Danishes', name:'Walnut Danish', pack:'each', price:7.50}, {id:'p61', cat:'Danishes', name:'Almond Danish', pack:'each', price:7.50}, {id:'p62', cat:'Danishes', name:'Plain Danish', pack:'each', price:7.50}, // ── CAKES ── {id:'p63', cat:'Cakes', name:'7 Layer Mousse Cake', pack:'each', price:17.50}, {id:'p64', cat:'Cakes', name:'Birthday Cake', pack:'each', price:17.50}, {id:'p65', cat:'Cakes', name:'Blackout Cake', pack:'each', price:17.50}, {id:'p66', cat:'Cakes', name:'Cannoli Cake', pack:'each', price:17.50}, {id:'p67', cat:'Cakes', name:'Carrot Cake', pack:'each', price:17.50}, {id:'p68', cat:'Cakes', name:'Day & Night Cake', pack:'each', price:17.50}, {id:'p69', cat:'Cakes', name:'Chocolate Fudge Cake', pack:'each', price:17.50}, {id:'p70', cat:'Cakes', name:'Chocolate Mousse Cake', pack:'each', price:17.50}, {id:'p71', cat:'Cakes', name:'Chocolate Raspberry Cake', pack:'each', price:17.50}, {id:'p72', cat:'Cakes', name:'Chocolate Seven Layer Cake', pack:'each', price:17.50}, {id:'p73', cat:'Cakes', name:'Choc. Strawberry Shortcake Naked', pack:'each', price:17.50}, {id:'p74', cat:'Cakes', name:'Funfetti Cake', pack:'each', price:17.50}, {id:'p75', cat:'Cakes', name:'Livoti Cake', pack:'each', price:17.50}, {id:'p76', cat:'Cakes', name:'Napoleon Cake', pack:'each', price:17.50}, {id:'p77', cat:'Cakes', name:'Nutella Cake', pack:'each', price:17.50}, {id:'p78', cat:'Cakes', name:'Oreo Cake', pack:'each', price:17.50}, {id:'p79', cat:'Cakes', name:'Red Velvet Cake', pack:'each', price:17.50}, {id:'p80', cat:'Cakes', name:'Seven Layer Cake', pack:'each', price:17.50}, {id:'p81', cat:'Cakes', name:'Strawberry Shortcake Naked', pack:'each', price:17.50}, {id:'p82', cat:'Cakes', name:'Tiramisu Cake', pack:'each', price:17.50}, {id:'p83', cat:'Cakes', name:'Small Birthday Cake', pack:'each', price:12.00}, {id:'p84', cat:'Cakes', name:'Small Cannoli Cake', pack:'each', price:12.00}, {id:'p85', cat:'Cakes', name:'Small Chocolate Mousse Cake', pack:'each', price:12.00}, {id:'p86', cat:'Cakes', name:'Small Livoti Cake', pack:'each', price:12.00}, {id:'p87', cat:'Cakes', name:'Small Oreo Cake', pack:'each', price:12.00}, {id:'p87b',cat:'Cakes', name:'Small Tiramisu Cake', pack:'each', price:12.00}, // ── CHEESECAKES ── {id:'p88', cat:'Cheesecakes', name:'7 Layer Cheesecake', pack:'each', price:17.50}, {id:'p89', cat:'Cheesecakes', name:'Blueberry Cheesecake', pack:'each', price:17.50}, {id:'p90', cat:'Cheesecakes', name:'Brownie Cheesecake', pack:'each', price:17.50}, {id:'p91', cat:'Cheesecakes', name:'Nutella Cheesecake', pack:'each', price:17.50}, {id:'p92', cat:'Cheesecakes', name:'Oreo Cheesecake', pack:'each', price:17.50}, {id:'p93', cat:'Cheesecakes', name:'Plain Cheesecake', pack:'each', price:17.50}, {id:'p94', cat:'Cheesecakes', name:'Strawberry Cheesecake', pack:'each', price:17.50}, {id:'p95', cat:'Cheesecakes', name:'Lemon Cheesecake', pack:'each', price:17.50}, // ── MINI PASTRIES & BROWNIES ── {id:'p96', cat:'Mini Pastries & Brownies',name:'Mini Pastry Strawberry Shortcake', pack:'20pc.', price:33.00}, {id:'p97', cat:'Mini Pastries & Brownies',name:'Mini Pastry Chocolate Mousse', pack:'20pc.', price:33.00}, {id:'p98', cat:'Mini Pastries & Brownies',name:'Mini Pastry Carrot Cake', pack:'20pc.', price:33.00}, {id:'p99', cat:'Mini Pastries & Brownies',name:'Mini Pastry Red Velvet', pack:'20pc.', price:33.00}, {id:'p100',cat:'Mini Pastries & Brownies',name:'Mini Pastry Lemon', pack:'20pc.', price:33.00}, {id:'p101',cat:'Mini Pastries & Brownies',name:'Mini Pastry Pistachio', pack:'20pc.', price:33.00}, {id:'p102',cat:'Mini Pastries & Brownies',name:'Mini Pastry Plain Brownie', pack:'20pc.', price:33.00}, {id:'p103',cat:'Mini Pastries & Brownies',name:'Mini Pastry Brownie 7 Layer', pack:'20pc.', price:35.00}, {id:'p104',cat:'Mini Pastries & Brownies',name:'Mini Pastry Brownie Peanut Butter', pack:'20pc.', price:35.00}, {id:'p105',cat:'Mini Pastries & Brownies',name:'Mini Pastry Brownie Coffee Cake', pack:'20pc.', price:35.00}, {id:'p106',cat:'Mini Pastries & Brownies',name:'Mini Pastry Brownie Chocolate Chip', pack:'20pc.', price:35.00}, ]; }

// ═════════════ // CUSTOMERS // ═════════════ function buildCustomers() { return [ // LIVOTI LOCATIONS {id:'c1', name:"Livoti Old World Market Brick", {id:'c2', name:"Livoti Old World {id:'c3', name:"Livoti Old World {id:'c4', name:"Livoti Old World {id:'c5', name:"Livoti Old World // NEW CUSTOMERS {id:'c6', name:"A. Letteri", {id:'c7', name:"Adam Feast", {id:'c8', name:"Aiello's Old Bridge", {id:'c9', name:"Aldo's Italian Kitchen", {id:'c10', name:"Ana's Corner", {id:'c11', name:"Angelo Bonsignore", {id:'c12', name:"Anthony Distribution", {id:'c13', name:"Bagel Factory", {id:'c14', name:"Bagel Hole", {id:'c15', name:"Caraluzzi Bethel", {id:'c16', name:"Caraluzzi Danbury", {id:'c17', name:"Caraluzzi Georgetown", {id:'c18', name:"Caraluzzi Newtown", {id:'c19', name:"Carfagna's Market", {id:'c20', name:"D'Angelo Italian {id:'c21', name:"Elio's Bakery", {id:'c22', name:"Food Emporium Marlboro", {id:'c23', name:"Hess'", {id:'c24', name:"Kawsar Sweet House", {id:'c25', name:"Key Food Staten Island", {id:'c26', name:"La Bottiglia", {id:'c27', name:"Landi Pork Store", {id:'c28', name:"Lincoln Marcy Avenue", {id:'c29', name:"Lincoln Market 31st", {id:'c30', name:"Lincoln Market 6th Ave", {id:'c31', name:"Lincoln Market Fulton Street", {id:'c32', name:"Lincoln Market Lincoln Rd", {id:'c33', name:"Lincoln Market Manhattan Ave", {id:'c34', name:"Lincoln Market Roger Avenue", {id:'c35', name:"Mama Raos", {id:'c36', name:"Mario Fiorio", {id:'c37', name:"Mazzella's of Mountainside", {id:'c38', name:"Mercatino Italiano Quakertown", {id:'c39', name:"Meyers House of Sweets", {id:'c40', name:"Milano's", {id:'c41', name:"Palermo Italian Deli", {id:'c42', name:"Pastosa Cranford", {id:'c43', name:"Pastosa Eatontown", {id:'c44', name:"Pastosa Florham Park", {id:'c45', name:"Pastosa Manasquan", {id:'c46', name:"Pastosa New Utrecht", {id:'c47', name:"Perrone Farms", {id:'c48', name:"Phil Bagels", {id:'c49', name:"Pulaski Meat", {id:'c50', name:"Redberry Market", {id:'c51', name:"Rubino's Italian Foods", {id:'c52', name:"Russo Gourmet Foods And Market", {id:'c53', name:"Santoni's Marketplace {id:'c54', name:"Scotty's Supermarket", {id:'c55', name:"Soprano's Market", {id:'c56', name:"Steve's Butcher Shop", {id:'c57', name:"T&F Farmers Pride", {id:'c58', name:"The Italian {id:'c59', name:"The Meat Market", {id:'c60', name:"Trinacria Baltimore", {id:'c61', name:"Tuscany Old Bridge", {id:'c62', name:"Tuscany Unionhill", {id:'c63', name:"Van Holtens Chocolates", {id:'c64', name:"West Point Deli", ]; } ═════════════════════════════════ ═════════════════════════════════ pin:'Q52Hpwz3', contact:'Antonio', phone:'', address:'1930 Route 88, Brick, NJ 08724', priceOverrides:{}}, Market Place Freehold", pin:'i5yL7jG4', contact:'', phone:'', address:'200 Mounts Corner Dr, Freehold, NJ 07728', priceOverrides:{}}, Market Englishtown", pin:'c51mIhD9', contact:'', phone:'', address:'160 US Highway 9, Englishtown, NJ 07726', priceOverrides:{}}, Market Aberdeen", pin:'x93oXw8T', contact:'', phone:'', address:'1077 NJ-34, Aberdeen, NJ 07747', priceOverrides:{}}, Market Middletown", pin:'Uo227Zpv', contact:'', phone:'', address:'1151 Route 35, Middletown, NJ 07748', priceOverrides:{}}, pin:'U00r9tEv', contact:'', phone:'', address:'517 Morse St. NE, Washington D.C., DC 20002', priceOverrides:{}}, pin:'c09Mj2fE', contact:'', phone:'', address:'', priceOverrides:{}}, pin:'rydI271R', contact:'', phone:'', address:'2595 County Rd 516, Old Bridge, NJ 08857', priceOverrides:{}}, pin:'S462zIro', contact:'', phone:'', address:'', priceOverrides:{}}, pin:'Zz5si8C0', contact:'', phone:'', address:'3310 N Wales Rd, East Norriton, PA 19403', priceOverrides:{}}, pin:'hxaD248C', contact:'', phone:'', address:'', priceOverrides:{}}, pin:'C0o6w7Xf', contact:'', phone:'', address:'305 Van Ave, Brick, NJ 08724', priceOverrides:{}}, pin:'Duhy546O', contact:'', phone:'', address:'4 Cliffwood Ave, Old Bridge, NJ 08857', priceOverrides:{}}, pin:'Cjb73wP6', contact:'', phone:'', address:'400 Seventh Ave, Brooklyn, NY 11215', priceOverrides:{}}, pin:'u5Bgb4T5', contact:'', phone:'', address:'98 Greenwood Ave, Bethel, CT 06801', priceOverrides:{}}, pin:'e92Kd6Ci', contact:'', phone:'', address:'102 Mill Plain Road, Danbury, CT 06811', priceOverrides:{}}, pin:'Uw98ltD0', contact:'', phone:'', address:'920 Danbury Road, Wilton, CT 06897', priceOverrides:{}}, pin:'Xj58E2tx', contact:'', phone:'', address:'5 Queen Street, Newtown, CT 06470', priceOverrides:{}}, pin:'F0de9qJ3', contact:'', phone:'', address:'1440 Gemini Place, Columbus, OH 43240', priceOverrides:{}}, Market Freehold", pin:'qe2y8E7L', contact:'', phone:'', address:'177 Elton Adelphia Road, Freehold, NJ 07728', priceOverrides:{}}, pin:'o11Y5kiT', contact:'', phone:'', address:'442 W Side Ave, Jersey City, NJ 07304', priceOverrides:{}}, pin:'nR1pd24R', contact:'', phone:'', address:'460 County Rd 520, Marlboro, NJ 07746', priceOverrides:{}}, pin:'n5XN0w3i', contact:'', phone:'', address:'36 Kingston Ave, Port Jervis, NY 12771', priceOverrides:{}}, pin:'jrP2o01J', contact:'', phone:'', address:'78-06 101st Ave, Ozone Park, NY 11416', priceOverrides:{}}, pin:'Evc937Tm', contact:'', phone:'', address:'300 Sand Ln, Staten Island, NY 10305', notes:'', minOrder:0, priceOverrides:{}}, pin:'Zolf4Z75', contact:'John', phone:'', address:'293 Port Richmond Ave, Staten Island, NY 10302', notes:'', minOrder:0, priceOverrides:{}}, pin:'B4cq2vB4', contact:'', phone:'', address:'5909 Avenue N, Brooklyn, NY 11234', notes:'', minOrder:0, priceOverrides:{}}, pin:'C7T3m3pf', contact:'', phone:'', address:'633 Marcy Ave, Brooklyn, NY 11206', notes:'', minOrder:0, priceOverrides:{}}, pin:'e7jsM92X', contact:'', phone:'', address:'21-21 31st St, Astoria, NY 11105', notes:'', minOrder:0, priceOverrides:{}}, pin:'st4w94YD', contact:'', phone:'', address:'501 Sixth Avenue, New York, NY 10011', notes:'', minOrder:0, priceOverrides:{}}, pin:'o60J6Lwq', contact:'', phone:'', address:'1134 Fulton St, Brooklyn, NY 11216', notes:'', minOrder:0, priceOverrides:{}}, pin:'hBRf30i9', contact:'', phone:'', address:'33 Lincoln Rd, Brooklyn, NY 11225', notes:'', minOrder:0, priceOverrides:{}}, pin:'nSs93v7H', contact:'', phone:'', address:'1133 Manhattan Ave, Brooklyn, NY 11222', notes:'', minOrder:0, priceOverrides:{}}, pin:'K8anFm67', contact:'', phone:'', address:'671 Rogers Ave, Brooklyn, NY 11226', notes:'', minOrder:0, priceOverrides:{}}, pin:'oT7Uf81u', contact:'', phone:'', address:'6408 11th Ave, Brooklyn, NY 11219', notes:'', minOrder:0, priceOverrides:{}}, pin:'ynw6H2W4', contact:'', phone:'', address:'', notes:'', minOrder:0, priceOverrides:{}}, pin:'ox60DW5v', contact:'', phone:'', address:'856 Mountain Avenue, Mountainside, NJ 07092', notes:'', minOrder:0, priceOverrides:{}}, pin:'Xhp5lD80', contact:'', phone:'', address:"Trainer's Corner Shopping Center, 220 N West End Blvd, Quakertown, PA", notes:'', minOrder:0, priceOverrides:{}}, pin:'M85tOx5s', contact:'', phone:'', address:'637 Wyckoff Ave, Wyckoff, NJ 07481', notes:'', minOrder:0, priceOverrides:{}}, pin:'Qlv79pD6', contact:'', phone:'', address:'3401A Tremley Point Rd, Linden, NJ 07036', notes:'', minOrder:0, priceOverrides:{}}, pin:'rj142ZPe', contact:'', phone:'', address:'82 Avenue C, Bayonne, NJ 07002', notes:'', minOrder:0, priceOverrides:{}}, pin:'fCE7h87u', contact:'', phone:'', address:'200 South Ave, Cranford, NJ 07016', notes:'', minOrder:0, priceOverrides:{}}, pin:'z9OkTl61', contact:'', phone:'', address:'315 NJ-35, Eatontown, NJ 07724', notes:'', minOrder:0, priceOverrides:{}}, pin:'N5wm1gR6', contact:'', phone:'', address:'186 Columbia Tpke, Florham Park, NJ 07932', notes:'', minOrder:0, priceOverrides:{}}, pin:'t5Vqv18Q', contact:'', phone:'', address:'2410 NJ-35, Manasquan, NJ 08736', notes:'', minOrder:0, priceOverrides:{}}, pin:'tO7c3sN7', contact:'', phone:'', address:'7425 New Utrecht Ave, Brooklyn, NY 11204', notes:'', minOrder:0, priceOverrides:{}}, pin:'hsB985Ee', contact:'', phone:'', address:'73-25 68th Rd, Middle Village, NY 11379', notes:'', minOrder:0, priceOverrides:{}}, pin:'i4CL1mw0', contact:'', phone:'', address:'', notes:'', minOrder:0, priceOverrides:{}}, pin:'N57F8xhp', contact:'', phone:'', address:'123 N Wood Ave, Linden, NJ 07036', notes:'', minOrder:0, priceOverrides:{}}, pin:'v8J1I8vf', contact:'', phone:'', address:'575 4th Ave, Brooklyn, NY 11215', notes:'', minOrder:0, priceOverrides:{}}, pin:'vod4X79S', contact:'', phone:'', address:'1304 East Ridge Road, Rochester, NY 14621', notes:'', minOrder:0, priceOverrides:{}}, pin:'uItQ43k8', contact:'', phone:'', address:'1150 Bern Rd, Wyomissing, PA 19610', notes:'', minOrder:0, priceOverrides:{}}, & Catering", pin:'eOs666Wp', contact:'', phone:'', address:'4854 Butler Rd, Glyndon, MD 21071', notes:'', minOrder:0, priceOverrides:{}}, pin:'z3Yi2i5M', contact:'', phone:'718-608-0044', address:'240 Page Ave, Staten Island, NY 10307', notes:'', minOrder:0, priceOverrides:{}}, pin:'VD6m7q1y', contact:'', phone:'', address:'607 Cayuta Ave, Waverly, NY 14892', notes:'', minOrder:0, priceOverrides:{}}, pin:'CPk02f3i', contact:'', phone:'718-331-3703', address:'1602 Bath Ave, Brooklyn, NY 11214', notes:'', minOrder:0, priceOverrides:{}}, pin:'l7U2s6Nk', contact:'', phone:'', address:'8101 Ridge Ave, Philadelphia, PA 19128', notes:'', minOrder:0, priceOverrides:{}}, Market of Manchester", pin:'DvvL15j5', contact:'', phone:'', address:'4964 Main St, Manchester Center, VT 05255', notes:'', minOrder:0, priceOverrides:{}}, pin:'QvCvr341', contact:'', phone:'', address:'161-10 Cross Bay Blvd, Howard Beach, NY 11414', notes:'', minOrder:0, priceOverrides:{}}, pin:'g8fHD89e', contact:'', phone:'', address:'406 N Paca St, Baltimore, MD 21201', notes:'', minOrder:0, priceOverrides:{}}, pin:'E0ykzS64', contact:'', phone:'', address:'155 Texas Road, Old Bridge, NJ', notes:'', minOrder:0, priceOverrides:{}}, pin:'SS1cm34n', contact:'', phone:'', address:'346 Union Hill Rd, Manalapan, NJ 07726', notes:'', minOrder:0, priceOverrides:{}}, pin:'Z193dihY', contact:'', phone:'', address:'1893 Rt 88, Brick, NJ 08724', notes:'', minOrder:0, priceOverrides:{}}, pin:'rQ31Wh8f', contact:'', phone:'', address:'', notes:'', minOrder:0, priceOverrides:{}},

const CAT_ORDER = [ 'Donuts & Frozen','Cookies (Small Pack)','Bulk Cookies','Biscotti', 'Cookies (12 lb.)','Taralli & Breadsticks','Danishes','Cakes', 'Cheesecakes','Mini Pastries & Brownies' ];

const OWNER_PIN = '0000'; let currentCustomer = null; let isOwner = false; let selectedItems = {};

// ══════════════════════════════════════════════ // NAV // ══════════════════════════════════════════════ function showView(name, btn) { document.querySelectorAll('.view').forEach(v=>v.classList.remove('active')); if(btn){ document.querySelectorAll('nav button').forEach(b=>b.classList.remove('active')); btn.classList.add('active'); } document.getElementById('view-'+name).classList.add('active'); }

// ══════════════════════════════════════════════ // SESSION // ══════════════════════════════════════════════ function doLogin() { const pin = document.getElementById('pin-input').value.trim(); const err = document.getElementById('login-error'); if(pin === OWNER_PIN) { isOwner=true; err.textContent=''; showOwnerUI(); return; } const c = customers.find(x=>x.pin===pin); if(c) { currentCustomer=c; err.textContent=''; document.getElementById('pin-input').value=''; showCustomerUI(c); } else { err.textContent='Invalid code. Please contact Bread Plus Outlet.'; } }

function showOwnerUI() { document.getElementById('main-nav').innerHTML=<button onclick="showView('dashboard',this);renderDashboard()">📋 Orders</button> <button onclick="showView('analytics',this);renderAnalyticsPage()">📊 Analytics</button> <button onclick="showView('aging',this);renderAgingReport()">⏳ Aging</button> <button onclick="showView('bi',this);renderBI()">🧠 Insights</button> <button onclick="showView('workorders',this);renderWorkOrderPage()">🧾 Work Orders</button> <button onclick="showView('customers',this);renderCustomers()">👥 Customers</button> <button onclick="showView('products',this);renderProducts()">📦 Products</button> <span class="session-badge badge-owner" onclick="ownerLogout()" title="Click to sign out" style="cursor:pointer">OWNER ✕</span>; renderDashboard(); showView('dashboard',document.querySelector('#main-nav button')); document.querySelector('#main-nav button').classList.add('active'); requestNotificationPermission(); }

// ══════════════════════════════════════════════ // CATALOG // ══════════════════════════════════════════════ function getPrice(p) { if(!currentCustomer) return p.price; const ov=currentCustomer.priceOverrides[p.id]; return (ov!==undefined&&ov!=='') ? parseFloat(ov) : p.price; }

function initCatalog() { document.getElementById('cat-tabs').innerHTML= <button class="cat-tab active" onclick="filterCat('all',this)">All</button>+ CAT_ORDER.filter(c=>products.some(p=>p.cat===c)) .map(c=><button class="cat-tab" onclick="filterCat('${esc(c)}',this)">${esc(c)}</button>).join(''); renderCards(products); }

function filterCat(cat,btn) { document.querySelectorAll('.cat-tab').forEach(b=>b.classList.remove('active')); btn.classList.add('active'); document.getElementById('prod-search').value=''; renderCards(cat==='all'?products:products.filter(p=>p.cat===cat)); }

function searchProducts(q) { document.querySelectorAll('.cat-tab').forEach(b=>b.classList.remove('active')); document.querySelector('.cat-tab').classList.add('active'); renderCards(q?products.filter(p=>p.name.toLowerCase().includes(q.toLowerCase())):products); }

// Categories that use half/full case selector const CASE_CATS = ['Cookies (12 lb.)', 'Biscotti']; const CASE_STEPS = [0.5, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; function isCaseCat(cat) { return CASE_CATS.includes(cat); } function caseLabel(qty) { return qty === 0.5 ? '\u00bd case' : qty + (qty === 1 ? ' case' : ' cases'); }

// ══════════════════════════════════════════════ // SUBMIT ORDER // ══════════════════════════════════════════════ function submitOrder() { const errEl=document.getElementById('form-error'); const errTx=document.getElementById('form-error-text'); if(!Object.keys(selectedItems).length){errTx.textContent='Please select at least one product.';errEl.classList.add('active');return;} // Minimum order check const minOrd = currentCustomer.minOrder||0; if(minOrd > 0) { const previewTotal = Object.entries(selectedItems).reduce((s,[id,qty])=>{ const p=products.find(x=>x.id===id); return s+(getPrice(p)*qty); },0); if(previewTotal < minOrd){ errTx.textContent='Minimum order for your account is $'+minOrd.toFixed(2)+'. Current total: $'+previewTotal.toFixed(2)+'.'; errEl.classList.add('active');return; } } errEl.classList.remove('active'); const items=Object.entries(selectedItems).map(([id,qty])=>{ const p=products.find(x=>x.id===id); const price=getPrice(p); return {id,name:p.name,cat:p.cat,pack:p.pack,qty,unitPrice:price,amount:price*qty}; }); const total=items.reduce((s,i)=>s+i.amount,0); const ref='BPO-'+String(orders.length+1).padStart(4,'0'); orders.unshift({ id:Date.now(),ref,status:'new',paymentStatus:'unpaid', createdAt:new Date().toISOString(), customer:currentCustomer.name,customerId:currentCustomer.id, contact:currentCustomer.contact||currentCustomer.name, phone:currentCustomer.phone||'', notes:document.getElementById('o-notes').value.trim(), items,total }); save(K.orders,orders); if(typeof sendOrderConfirmation === 'function') sendOrderConfirmation(orders[0]); // Notify owner showToast(currentCustomer.name + ' placed an order — ' + items.length + ' item' + (items.length!==1?'s':'') + ' · $' + total.toFixed(2)); document.getElementById('success-ref').textContent=ref; document.getElementById('order-form-wrap').style.display='none'; document.getElementById('success-screen').classList.add('active'); }

function resetOrder() { selectedItems={}; document.getElementById('o-notes').value=''; document.getElementById('order-form-wrap').style.display='block'; document.getElementById('success-screen').classList.remove('active'); initCatalog();updateSummary(); }

// ══════════════════════════════════════════════ // DASHBOARD // ══════════════════════════════════════════════ function renderDashboard() { const cSel=document.getElementById('f-customer'); const cur=cSel.value; cSel.innerHTML='<option value="">All Customers</option>'+customers.map(c=><option value="${esc(c.name)}"${c.name===cur?'selected':''}>${esc(c.name)}</option>).join(''); const sf=document.getElementById('f-status').value; const pf=document.getElementById('f-payment').value; const cf=cSel.value; const from=document.getElementById('f-from').value; const to=document.getElementById('f-to').value; const filt=orders.filter(o=>{ const d=o.createdAt.slice(0,10); if(sf&&o.status!==sf)return false; if(pf&&(o.paymentStatus||'unpaid')!==pf)return false; if(cf&&o.customer!==cf)return false; if(from&&d<from)return false; if(to&&d>to)return false; return true; }); const wk=new Date();wk.setDate(wk.getDate()-7); const wkStr=wk.toISOString().slice(0,10); const paidRev=orders.filter(o=>o.paymentStatus==='paid').reduce((s,o)=>s+o.total,0); const openCount=orders.filter(o=>(o.paymentStatus||'unpaid')==='unpaid').length; document.getElementById('d-orders').textContent=orders.length; document.getElementById('d-week').textContent=orders.filter(o=>o.createdAt.slice(0,10)>=wkStr).length; document.getElementById('d-open').textContent=openCount; document.getElementById('d-rev').textContent='$'+paidRev.toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2}); document.getElementById('d-badge').textContent=filt.length; const list=document.getElementById('orders-list'); if(!filt.length){list.innerHTML=<div class="empty-state"><span>📭</span>No orders match filters</div>;return;} list.innerHTML=filt.map(o=>{ const ps=o.paymentStatus||'unpaid'; return <div class="order-card"> <div class="order-card-header" onclick="toggleOC('${o.id}')"> <div> <div class="order-num">${o.ref} · ${esc(o.customer)}</div> <div class="order-meta">${esc(o.contact||'')} · ${o.createdAt.slice(0,10)} · Delivery: ${o.deliveryDate||'TBD'} · ${o.orderType}</div> </div> <div style="display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:flex-end"> <span class="status-badge status-${o.status}">${o.status}</span> <span class="status-badge status-${ps}">${ps==='paid'?'✓ Paid':'⚠ Unpaid'}</span> <span style="color:var(--green);font-family:Playfair Display,serif;font-weight:700;">$${o.total.toFixed(2)}</span> <span style="color:var(--tan);">▾</span> </div> </div> <div class="order-card-body" id="ob-${o.id}"> ${o.notes?<div class="order-notes-box"><b style="font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tan)">Notes</b><br/>${esc(o.notes)}</div>:''} <table class="order-items-tbl"> <thead><tr><th>Product</th><th>Department</th><th>Pack Size</th><th>Qty</th><th>Unit Price</th><th>Amount</th></tr></thead> <tbody>${o.items.map(it=><tr> <td><strong>${esc(it.name)}</strong></td> <td style="color:var(--tan);font-size:.7rem">${esc(it.cat)}</td> <td style="color:var(--brown2)">${esc(it.pack)}</td> <td><strong>${it.qty}</strong></td> <td>$${it.unitPrice.toFixed(2)}</td> <td class="amount">$${it.amount.toFixed(2)}</td> </tr>).join('')}</tbody> </table> <div style="text-align:right;font-family:Playfair Display,serif;font-weight:700;font-size:1rem;color:var(--green);padding:.25rem 0 .85rem">Total: $${o.total.toFixed(2)}</div> <div class="order-actions"> <span style="font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tan);font-weight:600;">Status:</span> ${['new','processing','ready','delivered'].map(s=><button class="btn btn-ghost btn-sm" style="${o.status===s?'border-color:var(--gold);color:var(--gold)':''}" onclick="setStatus('${o.id}','${s}')">${s}</button>).join('')} <span style="font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tan);font-weight:600;margin-left:.5rem;">Payment:</span> <button class="btn btn-ghost btn-sm" style="${(o.paymentStatus||'unpaid')==='unpaid'?'border-color:var(--red);color:var(--red)':''}" onclick="setPayment('${o.id}','unpaid')">Unpaid</button> <button class="btn btn-ghost btn-sm" style="${o.paymentStatus==='paid'?'border-color:var(--green);color:var(--green)':''}" onclick="setPayment('${o.id}','paid')">Paid</button> <button class="btn btn-danger" onclick="delOrder('${o.id}')">🗑 Delete</button> </div> <div style="margin-top:.65rem;font-size:.7rem;color:var(--tan)">${o.phone?'📞 '+esc(o.phone):''}</div> </div> </div>; }).join(''); }

// ══════════════════════════════════════════════ // CUSTOMER ORDER HISTORY + REORDER // ══════════════════════════════════════════════ function renderCustHistory() { if(!currentCustomer) return; document.getElementById('history-welcome').textContent = currentCustomer.name + ' — Order History'; const myOrders = orders.filter(o => o.customerId === currentCustomer.id) .sort((a,b) => b.createdAt.localeCompare(a.createdAt)); const list = document.getElementById('cust-history-list'); if(!myOrders.length) { list.innerHTML = '<div class="empty-state"><span>📋</span>No orders yet</div>'; return; } list.innerHTML = myOrders.map((o,idx) => { const date = new Date(o.createdAt).toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'}); const paid = (o.paymentStatus||'unpaid') === 'paid'; return <div class="card" style="margin-bottom:1rem"> <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem"> <div> <div style="font-family:Playfair Display,serif;font-size:1rem;font-weight:700">${esc(o.ref||'Order')}</div> <div style="font-size:.72rem;color:var(--tan)">${date}  ·  ${o.items.length} items  ·  <strong>$${o.total.toFixed(2)}</strong></div> </div> <div style="display:flex;gap:.5rem;align-items:center"> <span class="badge ${paid?'badge-paid':'badge-unpaid'}">${paid?'Paid':'Unpaid'}</span> ${idx===0 ?<button class="btn btn-gold btn-sm" onclick="reorderLast()">↺ Reorder This</button> : <button class="btn btn-ghost btn-sm" onclick="reorderOrder('${o.id}')">↺ Reorder</button>} </div> </div> <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.3rem"> ${o.items.map(i=> <div style="display:flex;justify-content:space-between;font-size:.74rem;padding:.3rem .5rem;background:var(--warm);border-radius:4px"> <span style="color:var(--brown)">${esc(i.name)}</span> <span style="color:var(--brown2);font-weight:600">× ${i.qty}</span> </div>).join('')} </div> </div>; }).join(''); }

function reorderLast() { const myOrders = orders.filter(o=>o.customerId===currentCustomer.id) .sort((a,b)=>b.createdAt.localeCompare(a.createdAt)); if(myOrders.length) reorderOrder(myOrders[0].id); }

// ══════════════════════════════════════════════ // SHARE INVOICE // ══════════════════════════════════════════════ function shareInvoice(method) { const o = orders.find(x => String(x.id) === String(currentInvoiceOrderId)); if(!o) return; const invNum = o.invoiceNumber || 'INV-0000'; const c = customers.find(x => x.id === o.customerId) || {}; const memo = document.getElementById('inv-memo')?.value?.trim() || ''; const feesTotal = currentInvoiceFees.reduce((s,f)=>s+f.amount,0); const total = o.items.reduce((s,i)=>s+i.amount,0) + feesTotal; const itemLines = o.items.map(i=>i.name+' x'+i.qty+' @ $'+i.unitPrice.toFixed(2)+' = $'+i.amount.toFixed(2)).join('%0A'); const feeLines = currentInvoiceFees.map(f=>f.desc+': $'+f.amount.toFixed(2)).join('%0A'); const dateStr = new Date().toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'}); const body = 'BREAD PLUS OUTLET%0A2841 Harway Ave, Brooklyn NY 11214%0A(347) 462-3838%0A%0A' + 'INVOICE: '+invNum+'%0ADATE: '+dateStr+'%0A%0A' + 'BILL TO: '+o.customer+(c.address?'%0A'+c.address:'')+'%0A%0A' + '─────────────────────────%0A' + itemLines + (feeLines?'%0A'+feeLines:'') + '%0A' + '─────────────────────────%0A' + 'TOTAL DUE: $'+total.toFixed(2)+'%0A%0A' + (memo?'NOTE: '+memo+'%0A%0A':'') + 'No Returns | breadplusoutlet@gmail.com'; const subject = 'Invoice+'+invNum+'+from+Bread+Plus+Outlet'; if(method==='email') window.open('mailto:?subject='+subject+'&body='+body); else window.open('sms:?&body='+body); }

// ══════════════════════════════════════════════ // ORDER CUTOFF // ══════════════════════════════════════════════ function getCutoffSettings() { try { return JSON.parse(localStorage.getItem('bpo_cutoff') || 'null') || {enabled:false,time:'17:00',message:'Orders are closed for today. Please contact us directly.'}; } catch(e) { return {enabled:false,time:'17:00',message:'Orders are closed for today.'}; } } function saveCutoffSettings() { const s = { enabled: document.getElementById('cutoff-enabled').checked, time: document.getElementById('cutoff-time').value, message: document.getElementById('cutoff-message').value }; localStorage.setItem('bpo_cutoff', JSON.stringify(s)); document.getElementById('cutoff-modal').classList.remove('active'); showToast('Cutoff settings saved.'); } function isOrderClosed() { const s = getCutoffSettings(); if(!s.enabled) return false; const now = new Date(); const [h,m] = s.time.split(':').map(Number); const cutoff = new Date(); cutoff.setHours(h,m,0,0); return now >= cutoff; } function renderCutoffSettings() { const s = getCutoffSettings(); document.getElementById('cutoff-enabled').checked = s.enabled; document.getElementById('cutoff-time').value = s.time; document.getElementById('cutoff-message').value = s.message; document.getElementById('cutoff-modal').classList.add('active'); }

// ══════════════════════════════════════════════ // CUSTOMER HISTORY & OPEN INVOICES // ══════════════════════════════════════════════ function renderCustHistory() { if(!currentCustomer) return; document.getElementById('history-welcome').textContent = currentCustomer.name; const myOrders = orders.filter(o=>o.customerId===currentCustomer.id) .sort((a,b)=>new Date(b.createdAt)-new Date(a.createdAt));

if(!myOrders.length) { document.getElementById('cust-history-list').innerHTML='<div class="empty-state"><span>📋</span>No orders yet</div>'; return; }

const unpaidOrders = myOrders.filter(o=>(o.paymentStatus||'unpaid')==='unpaid'); const unpaidTotal = unpaidOrders.reduce((s,o)=>s+o.total,0); let html = '';

// Outstanding balance banner if(unpaidTotal > 0) { html += '<div style="background:#fff4e6;border:1.5px solid var(--gold);border-radius:var(--radius);padding:1rem 1.25rem;margin-bottom:1.25rem;display:flex;align-items:center;justify-content:space-between;">' +'<div><div style="font-weight:700;font-size:.9rem;color:var(--brown);">Outstanding Balance</div>' +'<div style="font-size:.72rem;color:var(--brown2);">'+unpaidOrders.length+' unpaid invoice'+(unpaidOrders.length!==1?'s':'')+' with Bread Plus Outlet</div></div>' +'<div style="font-family:Playfair Display,serif;font-size:1.5rem;font-weight:700;color:var(--red);">$'+unpaidTotal.toFixed(2)+'</div>' +'</div>'; }

// Filter tabs html += '<div style="display:flex;gap:.5rem;margin-bottom:1rem;">' +'<button class="period-tab active" onclick="filterCustHistory(\"all\",this)">All Orders</button>' +'<button class="period-tab" onclick="filterCustHistory(\"unpaid\",this)">Open Invoices</button>' +'<button class="period-tab" onclick="filterCustHistory(\"paid\",this)">Paid</button>' +'</div>';

html += '<div id="cust-hist-orders">'; html += buildCustOrderCards(myOrders, 'all'); html += '</div>';

document.getElementById('cust-history-list').innerHTML = html; }

function filterCustHistory(filter, btn) { document.querySelectorAll('#cust-history-list .period-tab').forEach(b=>b.classList.remove('active')); if(btn) btn.classList.add('active'); const myOrders = orders.filter(o=>o.customerId===currentCustomer.id) .sort((a,b)=>new Date(b.createdAt)-new Date(a.createdAt)); document.getElementById('cust-hist-orders').innerHTML = buildCustOrderCards(myOrders, filter); }

// ══════════════════════════════════════════════ // INVOICE AGING REPORT // ══════════════════════════════════════════════ function renderAgingReport() { const unpaid = orders.filter(o=>(o.paymentStatus||'unpaid')==='unpaid'); const now = new Date(); const buckets = {'0-7 days':[],'8-14 days':[],'15-30 days':[],'31-60 days':[],'60+ days':[]};

unpaid.forEach(o => { const days = Math.floor((now - new Date(o.createdAt)) / (1000*60*60*24)); if(days<=7) buckets['0-7 days'].push({...o,days}); else if(days<=14) buckets['8-14 days'].push({...o,days}); else if(days<=30) buckets['15-30 days'].push({...o,days}); else if(days<=60) buckets['31-60 days'].push({...o,days}); else buckets['60+ days'].push({...o,days}); });

const totalUnpaid = unpaid.reduce((s,o)=>s+o.total,0); let html = '<div class="summary-cards" style="margin-bottom:1.5rem;">' + Object.entries(buckets).map(([label,items])=>{ const total = items.reduce((s,o)=>s+o.total,0); const isOld = label==='60+ days'; return '<div class="summary-card">' +'<div class="big-stat" style="color:'+(isOld?'var(--red)':'var(--brown)')+'">$'+total.toFixed(0)+'</div>' +'<div class="big-stat-label">'+label+' ('+items.length+')</div>' +'</div>'; }).join('') + '</div>';

// Detail table html += '<div class="table-wrap"><table><thead><tr>' +'<th>Customer</th><th>Invoice</th><th>Date</th><th>Days Out</th><th>Amount</th><th>Action</th>' +'</tr></thead><tbody>';

// ══════════════════════════════════════════════ // BUSINESS INTELLIGENCE // ══════════════════════════════════════════════ function renderBI() { const now = new Date(); const allOrders = orders;

// Days of week const dowMap = {0:'Sun',1:'Mon',2:'Tue',3:'Wed',4:'Thu',5:'Fri',6:'Sat'}; const dowCount = {0:0,1:0,2:0,3:0,4:0,5:0,6:0}; const dowRev = {0:0,1:0,2:0,3:0,4:0,5:0,6:0}; allOrders.forEach(o => { const d = new Date(o.createdAt).getDay(); dowCount[d]++; dowRev[d]+=o.total; }); const maxDow = Math.max(...Object.values(dowRev))||1; let biHtml = '<div class="analytics-grid">';

// Best day of week biHtml += '<div class="analytics-card" style="grid-column:span 2">' +'<div class="analytics-card-title">📅 Orders by Day of Week</div>' + Object.entries(dowMap).map(([d,label])=>{ const rev = dowRev[d], cnt = dowCount[d]; return '<div class="analytics-row">' +'<span style="flex:1;font-size:.76rem;color:var(--brown);font-weight:600;">'+label+'</span>' +'<div class="analytics-bar-wrap"><div class="analytics-bar" style="width:'+(rev/maxDow*100).toFixed(0)+'%;background:var(--gold)"></div></div>' +'<span class="analytics-val">'+cnt+' orders · $'+rev.toFixed(0)+'</span>' +'</div>'; }).join('') +'</div>';

// Customers who haven't ordered in 30/60/90 days const custLastOrder = {}; allOrders.forEach(o => { const d = new Date(o.createdAt); if(!custLastOrder[o.customer] || d > custLastOrder[o.customer]) custLastOrder[o.customer] = d; }); const inactive30=[], inactive60=[], inactive90=[]; customers.forEach(c => { const last = custLastOrder[c.name]; if(!last) return; const days = Math.floor((now-last)/(1000*60*60*24)); if(days>=90) inactive90.push({name:c.name,days}); else if(days>=60) inactive60.push({name:c.name,days}); else if(days>=30) inactive30.push({name:c.name,days}); });

biHtml += '<div class="analytics-card" style="grid-column:span 2">' +'<div class="analytics-card-title">⚠️ Customer Retention — Hasn\'t Ordered Recently</div>' +'<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.75rem;">' +'<div class="summary-card" style="border-radius:6px;border:1px solid var(--border)"><div class="big-stat" style="color:#e67e22;font-size:1.4rem">'+inactive30.length+'</div><div class="big-stat-label">30+ days</div></div>' +'<div class="summary-card" style="border-radius:6px;border:1px solid var(--border)"><div class="big-stat" style="color:var(--red);font-size:1.4rem">'+inactive60.length+'</div><div class="big-stat-label">60+ days</div></div>' +'<div class="summary-card" style="border-radius:6px;border:1px solid var(--border)"><div class="big-stat" style="color:var(--red);font-size:1.4rem">'+inactive90.length+'</div><div class="big-stat-label">90+ days</div></div>' +'</div>' + (inactive90.concat(inactive60).concat(inactive30)).slice(0,15).map(c=> '<div class="analytics-row"><span style="flex:2;font-size:.76rem;color:var(--brown)">'+esc(c.name)+'</span>' +'<span style="font-size:.72rem;color:'+(c.days>=60?'var(--red)':'#e67e22')+'">'+c.days+' days ago</span></div>' ).join('') +(inactive90.concat(inactive60).concat(inactive30)).length===0?'<div class="empty-state" style="padding:.75rem"><span>✅</span>All customers are active</div>':'' +'</div>';

// Year over year comparison const thisYear = now.getFullYear(); const lastYear = thisYear - 1; const tyRev = allOrders.filter(o=>new Date(o.createdAt).getFullYear()===thisYear).reduce((s,o)=>s+o.total,0); const lyRev = allOrders.filter(o=>new Date(o.createdAt).getFullYear()===lastYear).reduce((s,o)=>s+o.total,0); const tyOrders = allOrders.filter(o=>new Date(o.createdAt).getFullYear()===thisYear).length; const lyOrders = allOrders.filter(o=>new Date(o.createdAt).getFullYear()===lastYear).length;

biHtml += '<div class="analytics-card" style="grid-column:span 2">' +'<div class="analytics-card-title">📈 Year Over Year</div>' +'<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">' +'<div style="text-align:center;padding:.75rem;background:var(--warm);border-radius:6px;">' +'<div style="font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tan);margin-bottom:.4rem;">'+thisYear+' Revenue</div>' +'<div style="font-family:Playfair Display,serif;font-size:1.6rem;font-weight:700;color:var(--green);">$'+tyRev.toFixed(0)+'</div>' +'<div style="font-size:.72rem;color:var(--tan);">'+tyOrders+' orders</div>' +'</div>' +'<div style="text-align:center;padding:.75rem;background:var(--warm);border-radius:6px;">' +'<div style="font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tan);margin-bottom:.4rem;">'+lastYear+' Revenue</div>' +'<div style="font-family:Playfair Display,serif;font-size:1.6rem;font-weight:700;color:var(--brown2);">$'+lyRev.toFixed(0)+'</div>' +'<div style="font-size:.72rem;color:var(--tan);">'+lyOrders+' orders</div>' +'</div>' +'</div>' +(lyRev>0?'<div style="text-align:center;margin-top:.75rem;font-size:.82rem;">' +(tyRev>=lyRev ?'<span class="trend-up">▲ '+((tyRev-lyRev)/lyRev*100).toFixed(1)+'% vs last year</span>' :'<span class="trend-down">▼ '+((lyRev-tyRev)/lyRev*100).toFixed(1)+'% vs last year</span>') +'</div>':'') +'</div>';

biHtml += '</div>'; document.getElementById('bi-body').innerHTML = biHtml; }

// ══════════════════════════════════════════════ // ANALYTICS ENGINE // ══════════════════════════════════════════════ let currentPeriod = 'week';

function setPeriod(period, btn) { currentPeriod = period; document.querySelectorAll('.period-tab').forEach(b=>b.classList.remove('active')); if(btn) btn.classList.add('active'); renderAnalytics(); }

function getAnalyticsOrders() { const start = getPeriodStart(currentPeriod); const cf = document.getElementById('a-customer')?.value || ''; const itf = document.getElementById('a-item')?.value || ''; return orders.filter(o => { const d = o.createdAt.slice(0,10); if(start && d < start) return false; if(cf && o.customer !== cf) return false; if(itf && !o.items.some(i=>i.name===itf)) return false; return true; }); }

function renderAnalytics() { const filtered = getAnalyticsOrders(); const itf = document.getElementById('a-item')?.value || '';

// Get items within filtered orders (apply item filter within orders) const allLineItems = filtered.flatMap(o => itf ? o.items.filter(i=>i.name===itf) : o.items);

const totalRev = filtered.reduce((s,o) => { if(!itf) return s + o.total; return s + o.items.filter(i=>i.name===itf).reduce((s2,i)=>s2+i.amount,0); }, 0); const totalQty = allLineItems.reduce((s,i)=>s+(i.qty||0),0); const uniqueCustomers = new Set(filtered.map(o=>o.customer)).size;

// SUMMARY CARDS document.getElementById('a-summary').innerHTML = [ ['Total Revenue', '$'+totalRev.toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2}), 'var(--green)'], ['Orders', filtered.length, 'var(--brown)'], ['Units Sold', totalQty, 'var(--brown)'], ['Customers', uniqueCustomers, 'var(--brown)'], ].map(([label,val,color])=><div class="summary-card"> <div class="big-stat" style="color:${color}">${val}</div> <div class="big-stat-label">${label}</div> </div>).join('');

// AGGREGATE BY ITEM const itemMap = {}; allLineItems.forEach(i => { if(!itemMap[i.name]) itemMap[i.name]={qty:0,rev:0,orders:0}; itemMap[i.name].qty += i.qty||0; itemMap[i.name].rev += i.amount||0; itemMap[i.name].orders++; });

// TOP ITEMS BY QTY const byQty = Object.entries(itemMap).sort((a,b)=>b[1].qty-a[1].qty).slice(0,20); const maxQty = byQty[0]?.[1].qty||1; const topItemsEl = document.getElementById('a-top-items'); if(topItemsEl) topItemsEl.innerHTML = byQty.length ? byQty.map(([n,d])=>barRow(n, d.qty, maxQty, d.qty+' units', 'var(--gold)')).join('') : '<div class="empty-state" style="padding:1rem;"><span>📦</span>No data for this period</div>';

// TOP ITEMS BY REVENUE const byRev = Object.entries(itemMap).sort((a,b)=>b[1].rev-a[1].rev).slice(0,20); const maxRev = byRev[0]?.[1].rev||1; const topRevEl = document.getElementById('a-top-items-rev'); if(topRevEl) topRevEl.innerHTML = byRev.length ? byRev.map(([n,d])=>barRow(n, d.rev, maxRev, '$'+d.rev.toFixed(0), 'var(--green)')).join('') : '<div class="empty-state" style="padding:1rem;"><span>💰</span>No data</div>';

// AGGREGATE BY CUSTOMER const custMap = {}; filtered.forEach(o => { if(!custMap[o.customer]) custMap[o.customer]={rev:0,qty:0,orders:0}; const oRev = itf ? o.items.filter(i=>i.name===itf).reduce((s,i)=>s+i.amount,0) : o.total; const oQty = itf ? o.items.filter(i=>i.name===itf).reduce((s,i)=>s+(i.qty||0),0) : o.items.reduce((s,i)=>s+(i.qty||0),0); custMap[o.customer].rev += oRev; custMap[o.customer].qty += oQty; custMap[o.customer].orders++; });

// TOP CUSTOMERS BY REVENUE const topCustRev = Object.entries(custMap).sort((a,b)=>b[1].rev-a[1].rev).slice(0,20); const maxCustRev = topCustRev[0]?.[1].rev||1; const topCustRevEl = document.getElementById('a-top-customers'); if(topCustRevEl) topCustRevEl.innerHTML = topCustRev.length ? topCustRev.map(([n,d])=>barRow(n, d.rev, maxCustRev, '$'+d.rev.toFixed(0), 'var(--green)')).join('') : '<div class="empty-state" style="padding:1rem;"><span>👥</span>No data</div>';

// TOP CUSTOMERS BY QTY const topCustQty = Object.entries(custMap).sort((a,b)=>b[1].qty-a[1].qty).slice(0,20); const maxCustQty = topCustQty[0]?.[1].qty||1; const topCustQtyEl = document.getElementById('a-top-customers-qty'); if(topCustQtyEl) topCustQtyEl.innerHTML = topCustQty.length ? topCustQty.map(([n,d])=>barRow(n, d.qty, maxCustQty, d.qty+' units', 'var(--gold)')).join('') : '<div class="empty-state" style="padding:1rem;"><span>🛒</span>No data</div>';

// CUSTOMER x ITEM DETAIL TABLE const ciMap = {}; filtered.forEach(o => { const lineItems = itf ? o.items.filter(i=>i.name===itf) : o.items; lineItems.forEach(i => { const key = o.customer + '|||' + i.name; if(!ciMap[key]) ciMap[key]={customer:o.customer,item:i.name,qty:0,rev:0,orders:0}; ciMap[key].qty += i.qty||0; ciMap[key].rev += i.amount||0; ciMap[key].orders++; }); }); const ciRows = Object.values(ciMap).sort((a,b)=>b.qty-a.qty); document.getElementById('a-ci-count').textContent = ciRows.length + ' rows'; const ciTbody = document.getElementById('a-ci-tbody'); if(ciTbody) ciTbody.innerHTML = ciRows.length ? ciRows.map(r=><tr> <td><span style="font-size:.75rem;font-weight:600">${esc(r.customer)}</span></td> <td style="color:var(--brown2);font-size:.75rem">${esc(r.item)}</td> <td style="font-family:Playfair Display,serif;font-size:1.1rem;font-weight:700;color:var(--gold)">${r.qty}</td> <td>${r.orders}</td> <td class="amount">$${r.rev.toFixed(2)}</td> <td style="color:var(--brown2)">${(r.rev/r.orders).toFixed(2)}/order</td> </tr>).join('') : <tr><td colspan="6"><div class="empty-state"><span>📊</span>No data for this period</div></td></tr>;

// WEEKLY BREAKDOWN const weekMap = {}; filtered.forEach(o => { const d = new Date(o.createdAt); const monday = new Date(d); monday.setDate(d.getDate() - ((d.getDay()+6)%7)); const wk = monday.toISOString().slice(0,10); if(!weekMap[wk]) weekMap[wk]={orders:0,qty:0,rev:0}; weekMap[wk].orders++; weekMap[wk].qty += o.items.reduce((s,i)=>s+(i.qty||0),0); weekMap[wk].rev += o.total; }); const weeks = Object.entries(weekMap).sort((a,b)=>b[0].localeCompare(a[0])); const wTbody = document.getElementById('a-weekly-tbody'); if(wTbody) wTbody.innerHTML = weeks.length ? weeks.map(([wk,d],idx)=>{ const prev = weeks[idx+1]?.[1]; return <tr> <td>Week of ${wk}</td> <td>${d.orders}</td> <td>${d.qty} units</td> <td class="amount">$${d.rev.toFixed(2)}</td> <td>${prev ? trendBadge(d.rev, prev.rev) : '<span class="trend-flat">—</span>'}</td> </tr>; }).join('') : <tr><td colspan="5"><div class="empty-state"><span>📅</span>No data</div></td></tr>;

// MONTHLY BREAKDOWN const monthMap = {}; filtered.forEach(o => { const mo = o.createdAt.slice(0,7); if(!monthMap[mo]) monthMap[mo]={orders:0,qty:0,rev:0}; monthMap[mo].orders++; monthMap[mo].qty += o.items.reduce((s,i)=>s+(i.qty||0),0); monthMap[mo].rev += o.total; }); const months = Object.entries(monthMap).sort((a,b)=>b[0].localeCompare(a[0])); const mTbody = document.getElementById('a-monthly-tbody'); if(mTbody) mTbody.innerHTML = months.length ? months.map(([mo,d],idx)=>{ const prev = months[idx+1]?.[1]; const label = new Date(mo+'-01').toLocaleDateString('en-US',{month:'long',year:'numeric'}); return <tr> <td>${label}</td> <td>${d.orders}</td> <td>${d.qty} units</td> <td class="amount">$${d.rev.toFixed(2)}</td> <td>${prev ? trendBadge(d.rev, prev.rev) : '<span class="trend-flat">—</span>'}</td> </tr>; }).join('') : <tr><td colspan="5"><div class="empty-state"><span>📅</span>No data</div></td></tr>;

// Render aging report renderAgingReport(); }

// ── INVOICE AGING ── function renderAgingReport() { const unpaid = orders.filter(o => (o.paymentStatus||'unpaid') === 'unpaid' && o.total > 0) .sort((a,b) => a.createdAt.localeCompare(b.createdAt)); const totalOut = unpaid.reduce((s,o)=>s+o.total,0); const badge = document.getElementById('aging-total-badge'); if(badge) badge.textContent = '$'+totalOut.toFixed(2)+' outstanding'; const tbody = document.getElementById('a-aging-tbody'); if(!tbody) return; if(!unpaid.length) { tbody.innerHTML = '<tr><td colspan="6"><div class="empty-state"><span>✅</span>No outstanding invoices</div></td></tr>'; return; } tbody.innerHTML = unpaid.map(o => { const days = Math.floor((Date.now() - new Date(o.createdAt))/(1000*60*60*24)); const ageCls = days > 60 ? 'color:var(--red);font-weight:700' : days > 30 ? 'color:var(--gold);font-weight:600' : 'color:var(--brown2)'; const ageLbl = days > 60 ? '🔴 60+ days' : days > 30 ? '🟡 30–60 days' : '🟢 Under 30'; const date = new Date(o.createdAt).toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'}); return <tr> <td style="font-weight:600">${esc(o.customer)}</td> <td style="color:var(--tan);font-size:.72rem">${esc(o.invoiceNumber||o.ref||'—')}</td> <td style="font-size:.72rem">${date}</td> <td style="font-style:italic;${ageCls}">${days} days</td> <td class="amount" style="font-weight:700">$${o.total.toFixed(2)}</td> <td><span style="${ageCls}">${ageLbl}</span></td> </tr>; }).join(''); }

// ══════════════════════════════════════════════ // WORK ORDERS // ══════════════════════════════════════════════ function renderWorkOrderPage() { const cSel=document.getElementById('wo-customer'); cSel.innerHTML='<option value="">All Customers</option>'+customers.map(c=><option value="${esc(c.name)}">${esc(c.name)}</option>).join(''); }

function printWorkOrder(){window.print();}

// ══════════════════════════════════════════════ // CUSTOMERS // ══════════════════════════════════════════════ function renderCustomers() { const list=document.getElementById('customers-list'); if(!customers.length){list.innerHTML=<div class="empty-state"><span>👥</span>No customers yet</div>;return;} list.innerHTML=customers.map(c=><div class="card" id="cust-card-${c.id}"> <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem"> <div> <div style="font-family:Playfair Display,serif;font-size:1.05rem;font-weight:700">${esc(c.name)}</div> <div style="font-size:.72rem;color:var(--tan);margin-top:.15rem"> PIN: <strong style="color:var(--brown);letter-spacing:.15em">${esc(c.pin)}</strong> ${c.minOrder>0? ·  <span style="color:var(--gold);font-weight:600">Min order: $${c.minOrder.toFixed(2)}</span>`:''}  ·  ${orders.filter(o=>o.customerId===c.id).length} orders  ·  $${orders.filter(o=>o.customerId===c.id).reduce((s,o)=>s+o.total,0).toFixed(2)} total  ·  <span style="color:var(--red)">${orders.filter(o=>o.customerId===c.id&&(o.paymentStatus||'unpaid')==='unpaid').length} open</span> </div> </div> <div style="display:flex;gap:.4rem;flex-wrap:wrap"> <button class="btn btn-ghost btn-sm" onclick="toggleEditCust('edit-${c.id}')">✏️ Edit Info</button> <button class="btn btn-ghost btn-sm" onclick="togglePricing('cp-${c.id}')">💲 Pricing</button> <button class="btn btn-danger" onclick="deleteCust('${c.id}')">Remove</button> </div> </div>

<div id="edit-${c.id}" style="display:none;background:var(--warm);border-radius:6px;padding:1rem;margin-bottom:.75rem;"> <div style="font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brown2);font-weight:600;margin-bottom:.75rem">Edit Customer Info</div> <div style="display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.75rem"> <div class="field"><label>Business Name</label><input type="text" id="en-${c.id}" value="${esc(c.name)}"/></div> <div class="field"><label>PIN / Access Code</label><input type="text" id="ep-${c.id}" value="${esc(c.pin)}" maxlength="6"/></div> <div class="field"><label>Contact Name</label><input type="text" id="ec-${c.id}" value="${esc(c.contact||'')}"/></div> <div class="field"><label>Phone</label><input type="tel" id="eph-${c.id}" value="${esc(c.phone||'')}"/></div> </div> <div class="field" style="margin-bottom:.75rem"><label>Address</label><input type="text" id="ea-${c.id}" value="${esc(c.address||'')}"/></div> <div class="field" style="margin-bottom:.75rem"><label>Minimum Order ($) <span style="color:var(--tan);font-weight:400">— 0 = no minimum</span></label><input type="number" id="emo-${c.id}" value="${c.minOrder||0}" step="0.01" min="0"/></div> <div style="display:flex;gap:.5rem"> <button class="btn btn-primary btn-sm" onclick="saveEditCust('${c.id}')">💾 Save Changes</button> <button class="btn btn-ghost btn-sm" onclick="toggleEditCust('edit-${c.id}')">Cancel</button> </div> </div>

<div id="cp-${c.id}" style="display:none"> <div style="font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tan);font-weight:600;margin-bottom:.75rem"> Custom Prices for ${esc(c.name)} — leave blank to use default price </div> ${CAT_ORDER.filter(cat=>products.some(p=>p.cat===cat)).map(cat=><div style="font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brown2);font-weight:600;margin:.85rem 0 .45rem;padding-bottom:.3rem;border-bottom:1px solid var(--border)">${esc(cat)}</div> <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.35rem;"> ${products.filter(p=>p.cat===cat).map(p=>{ const ov=c.priceOverrides[p.id]; return<div class="price-override-row"> <div> <div style="font-weight:500;font-size:.76rem">${esc(p.name)}</div> <div style="font-size:.63rem;color:var(--tan)">${esc(p.pack)} · Default: $${p.price.toFixed(2)}</div> </div> <input type="number" step="0.01" min="0" placeholder="${p.price.toFixed(2)}" value="${ov!==undefined&&ov!==''?ov:''}" id="ov-${c.id}-${p.id}"/> </div>; }).join('')} </div>).join('')} <div style="display:flex;gap:.5rem;margin-top:1rem"> <button class="btn btn-primary btn-sm" onclick="savePricing('${c.id}')">💾 Save All Pricing</button> <button class="btn btn-ghost btn-sm" onclick="togglePricing('cp-${c.id}')">Close</button> </div> </div> </div>`).join(''); }

function toggleEditCust(id){const el=document.getElementById(id);el.style.display=el.style.display==='none'?'block':'none';}

function togglePricing(id){const el=document.getElementById(id);el.style.display=el.style.display==='none'?'block':'none';}

function showAddCustomer(){document.getElementById('add-customer-card').style.display='block';document.getElementById('nc-name').focus();}

function deleteCust(id){if(!confirm('Remove customer?'))return;customers=customers.filter(c=>c.id!==id);save(K.customers,customers);renderCustomers();}

// ══════════════════════════════════════════════ // PRODUCTS // ══════════════════════════════════════════════ function renderProducts() { document.getElementById('prod-count-badge').textContent=products.length+' products'; const tbody=document.getElementById('prod-tbody'); if(!products.length){tbody.innerHTML=<tr><td colspan="6"><div class="empty-state"><span>📦</span>No products</div></td></tr>;return;} tbody.innerHTML=products.map(p=><tr id="prod-row-${p.id}"> <td><strong>${esc(p.name)}</strong></td> <td style="color:var(--tan);font-size:.7rem">${esc(p.cat)}</td> <td style="color:var(--brown2)">${esc(p.pack)}</td> <td class="amount">$${p.price.toFixed(2)}</td> <td> <button class="btn btn-ghost btn-sm" onclick="showEditProduct('${p.id}')">✏️ Edit</button> </td> <td><button class="btn btn-danger" onclick="delProduct('${p.id}')">Remove</button></td> </tr> <tr id="prod-edit-${p.id}" style="display:none;background:var(--warm);"> <td colspan="6" style="padding:.85rem 1rem;"> <div style="display:grid;grid-template-columns:2fr 1.5fr 1fr 1fr auto;gap:.6rem;align-items:end;flex-wrap:wrap"> <div class="field"><label>Product Name</label><input type="text" id="pe-name-${p.id}" value="${esc(p.name)}"/></div> <div class="field"><label>Department</label> <select id="pe-cat-${p.id}"> ${CAT_ORDER.map(c=><option value="${esc(c)}"${c===p.cat?' selected':''}>${esc(c)}</option>).join('')} </select> </div> <div class="field"><label>Pack Size</label><input type="text" id="pe-pack-${p.id}" value="${esc(p.pack)}"/></div> <div class="field"><label>Default Price ($)</label><input type="number" step="0.01" id="pe-price-${p.id}" value="${p.price}"/></div> <div class="field"><label> </label> <div style="display:flex;gap:.4rem"> <button class="btn btn-primary btn-sm" onclick="saveEditProduct('${p.id}')">Save</button> <button class="btn btn-ghost btn-sm" onclick="hideEditProduct('${p.id}')">Cancel</button> </div> </div> </div> </td> </tr>).join(''); }

// ══════════════════════════════════════════════ // INVOICE GENERATOR // ══════════════════════════════════════════════ let currentInvoiceOrderId = null; let currentInvoiceFees = [];

function openInvoiceModal(orderId) { currentInvoiceOrderId = orderId; currentInvoiceFees = []; renderInvoicePreview(); document.getElementById('inv-modal').classList.add('active'); }

function renderInvoicePreview() { const o = orders.find(x => String(x.id) === String(currentInvoiceOrderId)); if(!o) return; const c = customers.find(x => x.id === o.customerId) || {}; const invNum = o.invoiceNumber || (o.invoiceNumber = getNextInvNum()); o.invoiceNumber = invNum; save(K.orders, orders);

const itemsTotal = o.items.reduce((s,i) => s + i.amount, 0); const feesTotal = currentInvoiceFees.reduce((s,f) => s + f.amount, 0); const grandTotal = itemsTotal + feesTotal; const today = new Date().toLocaleDateString('en-US', {month:'short', day:'numeric', year:'numeric'});

if(currentInvoiceFees.length) { rows += currentInvoiceFees.map(f => <tr> <td style="padding:.6rem .75rem;border-bottom:1px dashed #ddd;font-size:.82rem;color:#c0392b;">${esc(f.desc)}</td> <td style="padding:.6rem .75rem;border-bottom:1px dashed #ddd;font-size:.82rem;text-align:right;color:#c0392b;">$${f.amount.toFixed(2)}</td> <td style="padding:.6rem .75rem;border-bottom:1px dashed #ddd;font-size:.82rem;text-align:right;">1</td> <td style="padding:.6rem .75rem;border-bottom:1px dashed #ddd;font-size:.82rem;text-align:right;color:#c0392b;">$${f.amount.toFixed(2)}</td> </tr>).join(''); }

document.getElementById('inv-modal-body').innerHTML = ` <div id="invoice-preview" style="background:#fff;font-family:Arial,sans-serif;color:#222;padding:1.5rem;">

<table width="100%" style="margin-bottom:1rem;"> <tr> <td width="60%" style="vertical-align:top;"> <div style="font-size:1.3rem;font-weight:700;margin-bottom:.15rem;">Bread Plus Outlet</div> <div style="font-size:.78rem;margin-bottom:.1rem;"><strong>Business Number</strong> 1 (347) 462-3838</div> <div style="font-size:.78rem;margin-bottom:.1rem;">2841 Harway Ave.</div> <div style="font-size:.78rem;margin-bottom:.1rem;">Brooklyn, NY 11214</div> <div style="font-size:.78rem;">breadplusoutlet@gmail.com</div> </td> <td width="40%" style="vertical-align:top;text-align:right;"> <div style="font-size:.7rem;font-weight:700;letter-spacing:.1em;color:#666;">INVOICE</div> <div style="font-size:.95rem;font-weight:700;margin-bottom:.5rem;">${esc(invNum)}</div> <div style="font-size:.7rem;font-weight:700;letter-spacing:.1em;color:#666;">DATE</div> <div style="font-size:.82rem;margin-bottom:.5rem;">${today}</div> <div style="font-size:.7rem;font-weight:700;letter-spacing:.1em;color:#666;">BALANCE DUE</div> <div style="font-size:.95rem;font-weight:700;">USD $${grandTotal.toFixed(2)}</div> </td> </tr> </table>

<div style="margin-bottom:1rem;"> <div style="font-size:.7rem;font-weight:700;letter-spacing:.1em;color:#666;margin-bottom:.35rem;">BILL TO</div> <div style="font-size:.95rem;font-weight:700;">${esc(o.customer)}</div> <div style="font-size:.78rem;color:#444;margin-top:.15rem;">${esc(c.address||'')}</div> </div>

<table width="100%" style="border-collapse:collapse;"> <thead> <tr style="background:#fff;"> <th style="padding:.6rem .75rem;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-align:left;border-bottom:2px solid #222;">DESCRIPTION</th> <th style="padding:.6rem .75rem;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-align:right;border-bottom:2px solid #222;">RATE</th> <th style="padding:.6rem .75rem;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-align:right;border-bottom:2px solid #222;">QTY</th> <th style="padding:.6rem .75rem;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-align:right;border-bottom:2px solid #222;">AMOUNT</th> </tr> </thead> <tbody>${rows}</tbody> </table>

<table width="100%" style="margin-top:.5rem;"> <tr> <td width="60%"></td> <td width="40%"> <table width="100%"> <tr> <td style="padding:.4rem .75rem;font-size:.82rem;font-weight:700;">TOTAL</td> <td style="padding:.4rem .75rem;font-size:.82rem;text-align:right;">$${grandTotal.toFixed(2)}</td> </tr> <tr style="border-top:1px solid #ccc;"> <td style="padding:.4rem .75rem;font-size:.82rem;font-weight:700;">BALANCE DUE</td> <td style="padding:.4rem .75rem;font-size:.95rem;font-weight:700;text-align:right;">USD $${grandTotal.toFixed(2)}</td> </tr> </table> </td> </tr> </table>

\${(()=>{const m=document.getElementById('inv-memo')?.value?.trim();if(!m)return '';return '<div style="background:#f9f6f0;border-left:3px solid #c8a96e;padding:.6rem .85rem;margin-bottom:.75rem;font-size:.78rem;color:#555;font-style:italic;">'+esc(m)+'</div>';})()}

<div style="font-size:.72rem;color:#666;text-align:center;line-height:1.7;"> Bread Plus is a full-service bakery that provides wholesale items, including frozen ready-to-bake, dry ready-to-fill, and packaged ready-to-sell products. Feel free to contact us with any questions or special requests.<br/> 1 (347) 462-3838  |  <strong>No Returns</strong> </div> </div>

<div style="margin-top:.85rem;"> <div class="field" style="margin-bottom:.5rem"> <label>Invoice Memo (optional)</label> <textarea id="inv-memo" rows="2" placeholder="Add a note to this invoice e.g. Thank you for your business!" style="font-size:.78rem;resize:vertical;" oninput="renderInvoicePreview()"></textarea>

  </div>
  <div style="display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;">
    <button class="btn btn-ghost btn-sm" onclick="document.getElementById('fee-modal').classList.add('active')">+ Add Extra Charge</button>
    <span style="font-size:.72rem;color:var(--tan);">Add fees or notes before downloading</span>
  </div>
</div>`;

document.getElementById(‘inv-pay-btn’).onclick = () => { const ord = orders.find(x => String(x.id) === String(currentInvoiceOrderId)); if(ord) { ord.paymentStatus=‘paid’; save(K.orders,orders); renderDashboard(); } document.getElementById(‘inv-modal’).classList.remove(‘active’); }; }

// Open print window with just the invoice const win = window.open(’’, ‘_blank’); win.document.write(`<!DOCTYPE html><html><head><title>${invNum}</title> <style> body { margin:0; padding:20px; font-family:Arial,sans-serif; } @media print { body { padding:0; } } </style>

</head><body>${preview.outerHTML} <scr'+'ipt>window.onload=function(){window.print();}<\/scr'+'ipt> </body></html>`); win.document.close(); }

// ══════════════════════════════════════════════ // NOTIFICATIONS // ══════════════════════════════════════════════ function showToast(msg) { document.getElementById(‘toast-msg’).textContent = msg; const toast = document.getElementById(‘order-toast’); toast.classList.add(‘active’); setTimeout(() => toast.classList.remove(‘active’), 8000); // Browser notification if permission granted if(Notification.permission === ‘granted’) { new Notification(‘🍞 Bread Plus Outlet’, { body: msg, icon: ‘’ }); } } function closeToast() { document.getElementById(‘order-toast’).classList.remove(‘active’); }

function requestNotificationPermission() { if(‘Notification’ in window && Notification.permission === ‘default’) { Notification.requestPermission(); } }

// ══════════════════════════════════════════════ // PRINT INVOICE // ══════════════════════════════════════════════ function printInvoice() { const preview = document.getElementById(‘invoice-preview’); if(!preview) return; const o = orders.find(x => String(x.id) === String(currentInvoiceOrderId)); const invNum = o?.invoiceNumber || ‘INV-0000’; const win = window.open(’’, ‘_blank’, ‘width=800,height=1000’); const tag = ‘script’; win.document.write(’<!DOCTYPE html><html><head>’ + ‘<title>’ + invNum + ’ - Bread Plus Outlet</title>’ + ‘<style>body{margin:20px;font-family:Arial,sans-serif;color:#222;}table{width:100%;border-collapse:collapse;}@media print{body{margin:0;}}</style>’ + ‘</head><body>’ + preview.innerHTML + ‘<’ + tag + ‘>window.onload=function(){window.focus();window.print();}</’ + tag + ‘>’ + ‘</body></html>’); win.document.close(); }

// ══════════════════════════════════════════════ // CSV EXPORT // ══════════════════════════════════════════════ function exportCSV() { const rows=[[‘Ref’,‘Date’,‘Customer’,‘Contact’,‘Delivery Date’,‘Type’,‘Items’,‘Total’,‘Status’,‘Payment’]]; orders.forEach(o=>rows.push([o.ref,o.createdAt.slice(0,10),o.customer,o.contact||’’,o.deliveryDate||’’,o.orderType,o.items.length,o.total.toFixed(2),o.status,o.paymentStatus||‘unpaid’])); const csv=rows.map(r=>r.map(c=>"${String(c).replace(/"/g,'""')}").join(’,’)).join(’\n’); const a=document.createElement(‘a’);a.href=URL.createObjectURL(new Blob([csv],{type:‘text/csv’}));a.download=‘bpo-orders.csv’;a.click(); }

// ══════════════════════════════════════════════ // HELPERS // ══════════════════════════════════════════════ function esc(s){return String(s||’’).replace(/&/g,’&’).replace(/</g,’<’).replace(/>/g,’>’).replace(/”/g,’"’);}

// Init save(K.products,products); save(K.customers,customers); </script>

</body> </html>

6:19 AM

I've reviewed your full portal — it's a seriously impressive build! Here's what I can see you have working:

Current Features:

Login system (64 customers with individual PINs + owner dashboard)
Full product catalog (108 items across 10 departments) with quantity controls and case selectors
Customer-specific price overrides
Order submission with success screen and reorder functionality
Owner dashboard with filtering, status/payment management, CSV export
Invoice generator with extra charges, memo, print/PDF/email/SMS sharing
Analytics engine with period filters, top items/customers, weekly/monthly breakdowns
Invoice aging report + Business Intelligence view (day-of-week, retention, YoY)
Work order/production list generator
Order cutoff settings
Toast notifications

What would you like to build next?

What else is on your wishlist? Feel free to describe anything specific — new features, things that aren't working right, or UI improvements — and I'll get started.

Q: What would you like to work on? A: Fix bugs / polish existing features, Build a customer statement / account balance view, and Add SMS/email notification integration

6:20 AM

Let me look at the code carefully before making changes.

Now let me carefully analyze the bugs in the existing code and plan all three features before writing anything.

The bugs I can see:

CSS variables use – (en-dash) instead of -- (double hyphen) throughout the login card and many elements — they'll render broken
renderOrderForm() and renderOrder() are called but never defined
renderCustHistory() is defined twice (overwritten)
The invoice memo template literal uses a broken ${} inside a string
The esc() function HTML entities use wrong characters (& instead of & etc.)
f-customer dropdown in dashboard loses selection on re-render
Order form missing orderType and deliveryDate fields (referenced in dashboard render but never collected)
openInvoiceModal called from aging view but only works in dashboard context

Now building the complete fixed file with all three additions:

Here's what was done in this update:

🐛 Bugs Fixed

CSS variables were broken throughout (en-dashes – instead of --) — the login card, fields, and many elements were rendering with no styles
esc() function was broken — HTML entities weren't encoding correctly, leaving XSS risk
renderOrderForm() / renderOrder() were called but never existed — replaced with proper initCatalog() / updateSummary() calls
renderCustHistory() was defined twice — the first definition was silently overwritten
Invoice memo template literal was broken (embedded ${} inside a string)
Order form was missing deliveryDate and orderType fields — orders showed "TBD / undefined" in the dashboard
Dashboard customer filter lost its selection on every re-render
openInvoiceModal() now works from Aging, Statements, and Dashboard views

📄 Customer Statements (new)

Full account statement per customer with period filter (All Time / 90 / 60 / 30 days)
Summary tiles: Total Billed, Total Paid, Outstanding, Open Invoices
Transaction table with invoice links and age-coded payment status
Aging breakdown (0–7 / 8–30 / 31–60 / 60+ days buckets)
Print, Email, and SMS buttons that pre-fill native apps with the full statement text

📢 Notifications (new)

Recipient targeting: All Customers, Unpaid Invoices, Inactive 30+ days, or One specific customer
6 message templates (invoice reminder, new products, delivery update, seasonal, balance statement, custom)
{name}, {balance}, {ref} placeholders auto-filled per recipient
Live preview, character count with SMS segment counter
Per-recipient SMS and copy buttons in the recipient table
Bulk open-in-email / open-in-SMS for the first recipient

Bread plus outlet

Code · HTML

Will I have some kind of layout like this

6:37 AM

Yes! You already have something very close to this. The Aging Report and Statements views in your portal work similarly — a list of customers with invoice numbers and amounts.

But I can add a dedicated Invoices list view that matches this layout exactly: clean rows with customer name, invoice number, amount, and date — with All / Outstanding / Paid tabs at the top, just like the screenshot.

Let me know your picks and I'll build it in!

Q: Where should this invoices list live? A: Add as a new 'Invoices' tab in the owner dashboard

Q: Tapping an invoice row should… A: Open the full statement for that customer

6:38 AM

On it! Let me update the file to add the Invoices tab.

Good, I have the file. Let me find the right insertion points.

Now let me find where to add the CSS and the closing script tag:

Now I have everything I need. I'll add the CSS, HTML view, nav button, and JS function:

Now add the JS functions. Find the renderAgingReport2 function as an anchor:

All 21 references are in place.

Done! Here's what was added:

🧾 New Invoices Tab — sits right after Orders in the owner nav, matching the layout in your screenshot:

Three tabs — All / Outstanding / Paid — with a live count badge
Each row shows customer name, invoice number, amount, and date — exactly like the app in your screenshot
Overdue invoices (30+ days) show a colored age indicator inline (e.g. "· 45d overdue" in orange/red)
A totals footer bar at the bottom shows the count and total value for whatever tab/search is active
Search bar filters by customer name or invoice number in real time
Tapping any row takes you straight to that customer's full Statement, pre-loaded and scrolled into view

Bread plus outlet

Code · HTML

For the analytics, can I see which customer uses what items how many they use per term selected Beside the point of seeing in general, how many items I sell a year

6:50 AM

You already have both of those — let me show you where they live:

Customer × Item breakdown — it's already in the Analytics tab, scroll down past the bar charts. It's a table with columns: Customer · Item · Total Qty · Orders · Total Revenue · Avg per Order. You can filter it by period (This Week / Month / 3 Months / Year / All Time) and also filter to one specific customer or one specific item using the dropdowns at the top.

Total items sold per year — also already there. The "Orders by Month" table at the bottom of Analytics has an Items Sold column for every month, and the summary tiles at the top show Units Sold for whatever period you've selected. Switch to "This Year" to see the full year total.

The one thing that's not there yet that might be useful: a per-customer summary — one row per customer showing their total qty and spend across all items for the selected period, so you can quickly rank who orders the most volume. Want me to add that as an extra card in Analytics?

This is the Bread Plus Outlet wholesale bakery portal. Built so far: 64 customers with secure access codes, 108 products in 10 departments, PDF invoice generator, print invoices, email/text invoice sharing, invoice memo field, order cutoff settings, customer order history with reorder button, analytics dashboard, aging report, business intelligence tab, and full self-managed owner dashboard. Owner PIN is 0000. Next steps are: item descriptions under products, delivery route sheet, go live on breadplusoutlet.com with Netlify and Supabase, separate owner and customer portals, and real database.

6:55 AM

That's a seriously impressive build for a wholesale bakery operation. Here's a clean summary of where things stand and what's next:

✅ Built 64 customers · 108 products · 10 departments · Secure PINs · Custom pricing per customer · Order portal with reorder · Delivery date + order type · Order cutoff timer · Invoice generator (print, PDF, email, SMS) · Invoice aging · Customer statements · Analytics (items, revenue, customers, weekly/monthly) · Business intelligence (retention, YoY, day-of-week) · Work order / production list · Notifications composer · Owner dashboard (0000)

🔜 Next Steps — Ranked by impact

1. Go live on breadplusoutlet.com — Netlify deploy is straightforward for a single HTML file. The big architectural decision is Supabase: right now everything lives in localStorage, which means orders placed by a customer on their phone don't show up in your owner dashboard unless it's the same device/browser. Supabase fixes that — orders, customers, and products all live in a real database that syncs everywhere.

2. Separate portals — Once you have Supabase, splitting into breadplusoutlet.com (customer) and breadplusoutlet.com/owner (you) becomes clean and secure. Right now the owner PIN is embedded in the HTML which any customer could find.

3. Delivery route sheet — Group orders by delivery date, sort by geography/zip code, print a driver sheet. Straightforward to add now.

4. Item descriptions — A short description field per product, shown on the product card. Useful for new customers who don't know your catalog.

What do you want to tackle next — the Netlify/Supabase migration, or keep building features first?

<!DOCTYPE html>

<html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/> <meta name="theme-color" content="#3d2b1f"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> <meta name="apple-mobile-web-app-title" content="Bread Plus"/> <meta name="description" content="Bread Plus Outlet Wholesale Ordering Portal"/> <link rel="manifest" id="pwa-manifest"/> <link rel="apple-touch-icon" id="pwa-icon"/> <title>Bread Plus Outlet — Wholesale Portal</title> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Jost:wght@300;400;500;600&display=swap'); :root{ --cream:#faf6f0;--warm:#f5ede0;--brown:#3d2b1f;--brown2:#6b4c3b; --tan:#c8a882;--gold:#d4a843;--red:#c0392b;--green:#2d6a4f; --border:#e8ddd0;--surface:#fff;--radius:8px; } *{margin:0;padding:0;box-sizing:border-box;} body{background:var(--cream);color:var(--brown);font-family:'Jost',sans-serif;min-height:100vh;} header{background:var(--brown);padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:62px;position:sticky;top:0;z-index:200;} .logo{display:flex;align-items:center;gap:.65rem;} .logo-icon{width:36px;height:36px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;} .logo-text{font-family:Playfair Display,serif;color:#faf6f0;font-size:1.1rem;font-weight:700;line-height:1.1;} .logo-sub{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tan);font-weight:300;} nav{display:flex;gap:2px;align-items:center;} nav button{background:none;border:none;color:rgba(250,246,240,.45);font-family:'Jost',sans-serif;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;padding:.45rem .9rem;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;} nav button:hover{color:rgba(250,246,240,.8);} nav button.active{color:#faf6f0;border-bottom-color:var(--gold);} .session-badge{font-size:.65rem;padding:.2rem .75rem;border-radius:20px;font-weight:600;letter-spacing:.04em;cursor:pointer;} .badge-owner{background:var(--gold);color:var(--brown);} .badge-customer{background:rgba(250,246,240,.15);color:#faf6f0;} main{max-width:1300px;margin:0 auto;padding:2rem;} .view{display:none;} .view.active{display:block;animation:up .2s ease;} @keyframes up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

</head> <body>

<main>

<div class="alert alert-error" id="form-error"><span>⚠️</span><span id="form-error-text"></span></div>



<div class="card">
  <div class="card-title"><span>🧁</span>Select Products</div>
  <input class="search-bar" type="text" placeholder="Search products…" oninput="searchProducts(this.value)" id="prod-search"/>
  <div class="cat-tabs" id="cat-tabs"></div>
  <div id="products-grid"></div>
</div>

<div class="order-summary">
  <div class="summary-title">
    <span>Order Summary</span>
    <span id="item-count" style="font-size:.72rem;color:var(--tan);font-family:'Jost',sans-serif;font-weight:500;"></span>
  </div>
  <div class="summary-items-list" id="summary-items"><div class="summary-empty">No items selected yet</div></div>
  <div class="summary-total" id="summary-total" style="display:none">
    <span>Order Total</span><span id="total-amount">$0.00</span>
  </div>
</div>

<div class="card">
  <div class="card-title"><span>📝</span>Special Instructions</div>
  <div class="field"><textarea id="o-notes" placeholder="Special requests, substitutions, delivery notes…"></textarea></div>
</div>

<button class="btn btn-gold btn-full" onclick="submitOrder()">📨 Submit Wholesale Order</button>

</div>

<!-- TOP ITEMS BY QTY -->
<div class="analytics-card" style="grid-column: span 2">
  <div class="analytics-card-title">
    <span>📦 Top Items by Quantity Sold</span>
    <span id="a-items-period" style="color:var(--tan);font-size:.65rem;"></span>
  </div>
  <div id="a-top-items"></div>
</div>

<!-- TOP ITEMS BY REVENUE -->
<div class="analytics-card" style="grid-column: span 2">
  <div class="analytics-card-title">
    <span>💰 Top Items by Revenue</span>
  </div>
  <div id="a-top-items-rev"></div>
</div>

<!-- TOP CUSTOMERS -->
<div class="analytics-card" style="grid-column: span 2">
  <div class="analytics-card-title">
    <span>👥 Top Customers by Revenue</span>
  </div>
  <div id="a-top-customers"></div>
</div>

<!-- TOP CUSTOMERS BY QTY -->
<div class="analytics-card" style="grid-column: span 2">
  <div class="analytics-card-title">
    <span>🛒 Top Customers by Items Ordered</span>
  </div>
  <div id="a-top-customers-qty"></div>
</div>

</div>

</div>

</main>

<div class="toast" id="order-toast"> <button class="toast-close" onclick="closeToast()">✕</button> <div class="toast-title">🛒 New Order!</div> <div id="toast-msg"></div> </div>

<div class="modal-bg" id="inv-modal"> <div class="modal" style="width:700px;max-width:95vw;"> <button class="modal-close" onclick="document.getElementById('inv-modal').classList.remove('active')">✕</button> <div id="inv-modal-body"></div> <div style="display:flex;gap:.5rem;margin-top:1.25rem;flex-wrap:wrap;"> <button class="btn btn-gold btn-sm" onclick="printInvoice()">🖨 Print Invoice</button> <button class="btn btn-ghost btn-sm" onclick="generateRealPDF()">⬇ Download PDF</button> <button class="btn btn-ghost btn-sm" onclick="shareInvoice('email')">✉️ Email Invoice</button> <button class="btn btn-ghost btn-sm" onclick="shareInvoice('sms')">💬 Text Invoice</button> <button class="btn btn-primary btn-sm" id="inv-pay-btn">✓ Mark as Paid</button> <button class="btn btn-ghost btn-sm" onclick="document.getElementById('inv-modal').classList.remove('active')">Close</button> </div> </div> </div>

let orders = load(K.orders) || []; let products = load(K.products) || buildProducts(); let customers = load(K.customers) || buildCustomers();

// ══════════════════════════════════════════════ // CUSTOMERS // ══════════════════════════════════════════════ function buildCustomers() { return [ // LIVOTI LOCATIONS {id:'c1', name:"Livoti Old World Market Brick", pin:'Q52Hpwz3', contact:'Antonio', phone:'', address:'1930 Route 88, Brick, NJ 08724', priceOverrides:{}}, {id:'c2', name:"Livoti Old World Market Place Freehold", pin:'i5yL7jG4', contact:'', phone:'', address:'200 Mounts Corner Dr, Freehold, NJ 07728', priceOverrides:{}}, {id:'c3', name:"Livoti Old World Market Englishtown", pin:'c51mIhD9', contact:'', phone:'', address:'160 US Highway 9, Englishtown, NJ 07726', priceOverrides:{}}, {id:'c4', name:"Livoti Old World Market Aberdeen", pin:'x93oXw8T', contact:'', phone:'', address:'1077 NJ-34, Aberdeen, NJ 07747', priceOverrides:{}}, {id:'c5', name:"Livoti Old World Market Middletown", pin:'Uo227Zpv', contact:'', phone:'', address:'1151 Route 35, Middletown, NJ 07748', priceOverrides:{}}, // NEW CUSTOMERS {id:'c6', name:"A. Letteri", pin:'U00r9tEv', contact:'', phone:'', address:'517 Morse St. NE, Washington D.C., DC 20002', priceOverrides:{}}, {id:'c7', name:"Adam Feast", pin:'c09Mj2fE', contact:'', phone:'', address:'', priceOverrides:{}}, {id:'c8', name:"Aiello's Old Bridge", pin:'rydI271R', contact:'', phone:'', address:'2595 County Rd 516, Old Bridge, NJ 08857', priceOverrides:{}}, {id:'c9', name:"Aldo's Italian Kitchen", pin:'S462zIro', contact:'', phone:'', address:'', priceOverrides:{}}, {id:'c10', name:"Ana's Corner", pin:'Zz5si8C0', contact:'', phone:'', address:'3310 N Wales Rd, East Norriton, PA 19403', priceOverrides:{}}, {id:'c11', name:"Angelo Bonsignore", pin:'hxaD248C', contact:'', phone:'', address:'', priceOverrides:{}}, {id:'c12', name:"Anthony Distribution", pin:'C0o6w7Xf', contact:'', phone:'', address:'305 Van Ave, Brick, NJ 08724', priceOverrides:{}}, {id:'c13', name:"Bagel Factory", pin:'Duhy546O', contact:'', phone:'', address:'4 Cliffwood Ave, Old Bridge, NJ 08857', priceOverrides:{}}, {id:'c14', name:"Bagel Hole", pin:'Cjb73wP6', contact:'', phone:'', address:'400 Seventh Ave, Brooklyn, NY 11215', priceOverrides:{}}, {id:'c15', name:"Caraluzzi Bethel", pin:'u5Bgb4T5', contact:'', phone:'', address:'98 Greenwood Ave, Bethel, CT 06801', priceOverrides:{}}, {id:'c16', name:"Caraluzzi Danbury", pin:'e92Kd6Ci', contact:'', phone:'', address:'102 Mill Plain Road, Danbury, CT 06811', priceOverrides:{}}, {id:'c17', name:"Caraluzzi Georgetown", pin:'Uw98ltD0', contact:'', phone:'', address:'920 Danbury Road, Wilton, CT 06897', priceOverrides:{}}, {id:'c18', name:"Caraluzzi Newtown", pin:'Xj58E2tx', contact:'', phone:'', address:'5 Queen Street, Newtown, CT 06470', priceOverrides:{}}, {id:'c19', name:"Carfagna's Market", pin:'F0de9qJ3', contact:'', phone:'', address:'1440 Gemini Place, Columbus, OH 43240', priceOverrides:{}}, {id:'c20', name:"D'Angelo Italian Market Freehold", pin:'qe2y8E7L', contact:'', phone:'', address:'177 Elton Adelphia Road, Freehold, NJ 07728', priceOverrides:{}}, {id:'c21', name:"Elio's Bakery", pin:'o11Y5kiT', contact:'', phone:'', address:'442 W Side Ave, Jersey City, NJ 07304', priceOverrides:{}}, {id:'c22', name:"Food Emporium Marlboro", pin:'nR1pd24R', contact:'', phone:'', address:'460 County Rd 520, Marlboro, NJ 07746', priceOverrides:{}}, {id:'c23', name:"Hess'", pin:'n5XN0w3i', contact:'', phone:'', address:'36 Kingston Ave, Port Jervis, NY 12771', priceOverrides:{}}, {id:'c24', name:"Kawsar Sweet House", pin:'jrP2o01J', contact:'', phone:'', address:'78-06 101st Ave, Ozone Park, NY 11416', priceOverrides:{}}, {id:'c25', name:"Key Food Staten Island", pin:'Evc937Tm', contact:'', phone:'', address:'300 Sand Ln, Staten Island, NY 10305', notes:'', minOrder:0, priceOverrides:{}}, {id:'c26', name:"La Bottiglia", pin:'Zolf4Z75', contact:'John', phone:'', address:'293 Port Richmond Ave, Staten Island, NY 10302', notes:'', minOrder:0, priceOverrides:{}}, {id:'c27', name:"Landi Pork Store", pin:'B4cq2vB4', contact:'', phone:'', address:'5909 Avenue N, Brooklyn, NY 11234', notes:'', minOrder:0, priceOverrides:{}}, {id:'c28', name:"Lincoln Marcy Avenue", pin:'C7T3m3pf', contact:'', phone:'', address:'633 Marcy Ave, Brooklyn, NY 11206', notes:'', minOrder:0, priceOverrides:{}}, {id:'c29', name:"Lincoln Market 31st", pin:'e7jsM92X', contact:'', phone:'', address:'21-21 31st St, Astoria, NY 11105', notes:'', minOrder:0, priceOverrides:{}}, {id:'c30', name:"Lincoln Market 6th Ave", pin:'st4w94YD', contact:'', phone:'', address:'501 Sixth Avenue, New York, NY 10011', notes:'', minOrder:0, priceOverrides:{}}, {id:'c31', name:"Lincoln Market Fulton Street", pin:'o60J6Lwq', contact:'', phone:'', address:'1134 Fulton St, Brooklyn, NY 11216', notes:'', minOrder:0, priceOverrides:{}}, {id:'c32', name:"Lincoln Market Lincoln Rd", pin:'hBRf30i9', contact:'', phone:'', address:'33 Lincoln Rd, Brooklyn, NY 11225', notes:'', minOrder:0, priceOverrides:{}}, {id:'c33', name:"Lincoln Market Manhattan Ave", pin:'nSs93v7H', contact:'', phone:'', address:'1133 Manhattan Ave, Brooklyn, NY 11222', notes:'', minOrder:0, priceOverrides:{}}, {id:'c34', name:"Lincoln Market Roger Avenue", pin:'K8anFm67', contact:'', phone:'', address:'671 Rogers Ave, Brooklyn, NY 11226', notes:'', minOrder:0, priceOverrides:{}}, {id:'c35', name:"Mama Raos", pin:'oT7Uf81u', contact:'', phone:'', address:'6408 11th Ave, Brooklyn, NY 11219', notes:'', minOrder:0, priceOverrides:{}}, {id:'c36', name:"Mario Fiorio", pin:'ynw6H2W4', contact:'', phone:'', address:'', notes:'', minOrder:0, priceOverrides:{}}, {id:'c37', name:"Mazzella's of Mountainside", pin:'ox60DW5v', contact:'', phone:'', address:'856 Mountain Avenue, Mountainside, NJ 07092', notes:'', minOrder:0, priceOverrides:{}}, {id:'c38', name:"Mercatino Italiano Quakertown", pin:'Xhp5lD80', contact:'', phone:'', address:"Trainer's Corner Shopping Center, 220 N West End Blvd, Quakertown, PA", notes:'', minOrder:0, priceOverrides:{}}, {id:'c39', name:"Meyers House of Sweets", pin:'M85tOx5s', contact:'', phone:'', address:'637 Wyckoff Ave, Wyckoff, NJ 07481', notes:'', minOrder:0, priceOverrides:{}}, {id:'c40', name:"Milano's", pin:'Qlv79pD6', contact:'', phone:'', address:'3401A Tremley Point Rd, Linden, NJ 07036', notes:'', minOrder:0, priceOverrides:{}}, {id:'c41', name:"Palermo Italian Deli", pin:'rj142ZPe', contact:'', phone:'', address:'82 Avenue C, Bayonne, NJ 07002', notes:'', minOrder:0, priceOverrides:{}}, {id:'c42', name:"Pastosa Cranford", pin:'fCE7h87u', contact:'', phone:'', address:'200 South Ave, Cranford, NJ 07016', notes:'', minOrder:0, priceOverrides:{}}, {id:'c43', name:"Pastosa Eatontown", pin:'z9OkTl61', contact:'', phone:'', address:'315 NJ-35, Eatontown, NJ 07724', notes:'', minOrder:0, priceOverrides:{}}, {id:'c44', name:"Pastosa Florham Park", pin:'N5wm1gR6', contact:'', phone:'', address:'186 Columbia Tpke, Florham Park, NJ 07932', notes:'', minOrder:0, priceOverrides:{}}, {id:'c45', name:"Pastosa Manasquan", pin:'t5Vqv18Q', contact:'', phone:'', address:'2410 NJ-35, Manasquan, NJ 08736', notes:'', minOrder:0, priceOverrides:{}}, {id:'c46', name:"Pastosa New Utrecht", pin:'tO7c3sN7', contact:'', phone:'', address:'7425 New Utrecht Ave, Brooklyn, NY 11204', notes:'', minOrder:0, priceOverrides:{}}, {id:'c47', name:"Perrone Farms", pin:'hsB985Ee', contact:'', phone:'', address:'73-25 68th Rd, Middle Village, NY 11379', notes:'', minOrder:0, priceOverrides:{}}, {id:'c48', name:"Phil Bagels", pin:'i4CL1mw0', contact:'', phone:'', address:'', notes:'', minOrder:0, priceOverrides:{}}, {id:'c49', name:"Pulaski Meat", pin:'N57F8xhp', contact:'', phone:'', address:'123 N Wood Ave, Linden, NJ 07036', notes:'', minOrder:0, priceOverrides:{}}, {id:'c50', name:"Redberry Market", pin:'v8J1I8vf', contact:'', phone:'', address:'575 4th Ave, Brooklyn, NY 11215', notes:'', minOrder:0, priceOverrides:{}}, {id:'c51', name:"Rubino's Italian Foods", pin:'vod4X79S', contact:'', phone:'', address:'1304 East Ridge Road, Rochester, NY 14621', notes:'', minOrder:0, priceOverrides:{}}, {id:'c52', name:"Russo Gourmet Foods And Market", pin:'uItQ43k8', contact:'', phone:'', address:'1150 Bern Rd, Wyomissing, PA 19610', notes:'', minOrder:0, priceOverrides:{}}, {id:'c53', name:"Santoni's Marketplace & Catering", pin:'eOs666Wp', contact:'', phone:'', address:'4854 Butler Rd, Glyndon, MD 21071', notes:'', minOrder:0, priceOverrides:{}}, {id:'c54', name:"Scotty's Supermarket", pin:'z3Yi2i5M', contact:'', phone:'718-608-0044', address:'240 Page Ave, Staten Island, NY 10307', notes:'', minOrder:0, priceOverrides:{}}, {id:'c55', name:"Soprano's Market", pin:'VD6m7q1y', contact:'', phone:'', address:'607 Cayuta Ave, Waverly, NY 14892', notes:'', minOrder:0, priceOverrides:{}}, {id:'c56', name:"Steve's Butcher Shop", pin:'CPk02f3i', contact:'', phone:'718-331-3703', address:'1602 Bath Ave, Brooklyn, NY 11214', notes:'', minOrder:0, priceOverrides:{}}, {id:'c57', name:"T&F Farmers Pride", pin:'l7U2s6Nk', contact:'', phone:'', address:'8101 Ridge Ave, Philadelphia, PA 19128', notes:'', minOrder:0, priceOverrides:{}}, {id:'c58', name:"The Italian Market of Manchester", pin:'DvvL15j5', contact:'', phone:'', address:'4964 Main St, Manchester Center, VT 05255', notes:'', minOrder:0, priceOverrides:{}}, {id:'c59', name:"The Meat Market", pin:'QvCvr341', contact:'', phone:'', address:'161-10 Cross Bay Blvd, Howard Beach, NY 11414', notes:'', minOrder:0, priceOverrides:{}}, {id:'c60', name:"Trinacria Baltimore", pin:'g8fHD89e', contact:'', phone:'', address:'406 N Paca St, Baltimore, MD 21201', notes:'', minOrder:0, priceOverrides:{}}, {id:'c61', name:"Tuscany Old Bridge", pin:'E0ykzS64', contact:'', phone:'', address:'155 Texas Road, Old Bridge, NJ', notes:'', minOrder:0, priceOverrides:{}}, {id:'c62', name:"Tuscany Unionhill", pin:'SS1cm34n', contact:'', phone:'', address:'346 Union Hill Rd, Manalapan, NJ 07726', notes:'', minOrder:0, priceOverrides:{}}, {id:'c63', name:"Van Holtens Chocolates", pin:'Z193dihY', contact:'', phone:'', address:'1893 Rt 88, Brick, NJ 08724', notes:'', minOrder:0, priceOverrides:{}}, {id:'c64', name:"West Point Deli", pin:'rQ31Wh8f', contact:'', phone:'', address:'', notes:'', minOrder:0, priceOverrides:{}}, ]; }