spread

package app

import "html/template"

const pageCSS = `

@font-face{font-family:'Iosevka';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/iosevka-latin-400-normal.woff2') format('woff2')}

@font-face{font-family:'Iosevka';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/iosevka-latin-500-normal.woff2') format('woff2')}

@font-face{font-family:'Iosevka';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/iosevka-latin-600-normal.woff2') format('woff2')}

@font-face{font-family:'Iosevka';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/iosevka-latin-400-italic.woff2') format('woff2')}

@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2')}

@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2')}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{--bg:#0a0a0c;--surface:#18181c;--border:#2a2a2e;--border-strong:#3a3a40;

--text:#f5f4f0;--muted:#a8a6a0;--dim:#6a6864;--green:#5dd39e;--green-bg:#11201a;--green-dim:#1f3a2c;

--red:#ff8a7a;--red-bg:#2a1410;--serif:'Iosevka',ui-monospace,monospace;--sans:'IBM Plex Sans',system-ui,sans-serif;--mono:'Iosevka',ui-monospace,monospace}

html,body{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}

a{color:inherit;text-decoration:none}

.wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem}

.card{width:100%;max-width:400px;background:var(--surface);border:0.5px solid var(--border);border-radius:16px;padding:2.5rem}

.brand{font-family:var(--serif);font-size:22px;font-weight:500;letter-spacing:-0.5px}

.brand span{color:var(--green);font-size:13px}

.brand em{font-style:normal;color:var(--dim);font-size:16px}

h1{font-family:var(--serif);font-size:30px;font-weight:500;letter-spacing:-1px;margin-bottom:1.25rem}

label{display:block;font-size:12px;color:var(--muted);margin-bottom:1rem;letter-spacing:0.2px}

input,select{display:block;width:100%;margin-top:6px;padding:11px 13px;background:var(--bg);color:var(--text);

border:0.5px solid var(--border-strong);border-radius:9px;font-family:var(--sans);font-size:14px}

input:focus,select:focus{outline:none;border-color:var(--green)}

input[readonly]{color:var(--muted);border-style:dashed}

button{font-family:var(--sans);font-size:14px;font-weight:500;padding:12px 22px;border:none;border-radius:100px;

background:var(--green);color:#061a12;cursor:pointer;margin-top:6px}

button.ghost,a.btn-secondary{background:transparent;color:var(--text);border:0.5px solid var(--border-strong);display:inline-block}

.btn-sm{padding:6px 14px;font-size:12px;margin-top:0}

button.link{background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;padding:0;margin:0}

button.link:hover{color:var(--text)}

.btn-danger{background:transparent;color:var(--red);border:0.5px solid #4a2018;padding:6px 12px;font-size:12px;border-radius:100px;cursor:pointer;margin:0}

.muted{color:var(--muted);font-size:14px;line-height:1.55;margin-bottom:0.75rem}

.muted b{color:var(--text);font-weight:500}.muted a{color:var(--green)}

.err{background:var(--red-bg);color:var(--red);border:0.5px solid #4a2018;border-radius:9px;padding:10px 13px;font-size:13px;margin-bottom:1.25rem}

.notice{background:var(--green-bg);color:var(--green);border:0.5px solid var(--green-dim);border-radius:9px;padding:10px 13px;font-size:13px;margin-bottom:1.25rem}

/* admin */

.topbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;border-bottom:0.5px solid var(--border);position:sticky;top:0;background:rgba(10,10,12,.85);backdrop-filter:blur(10px);z-index:10}

.topnav{display:flex;align-items:center;gap:1.5rem}

.topnav a{font-size:13px;color:var(--muted)}.topnav a:hover{color:var(--text)}

.topnav form{margin:0}

.admin{max-width:900px;margin:0 auto;padding:2.5rem 2rem}

.admin h2{font-family:var(--serif);font-size:20px;font-weight:500;margin:2rem 0 1rem;letter-spacing:-.3px}

table.admin-t{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:1rem}

table.admin-t th{text-align:left;padding:9px 10px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--dim);border-bottom:0.5px solid var(--border)}

table.admin-t td{padding:10px;border-bottom:0.5px solid var(--border);color:var(--muted);vertical-align:middle}

table.admin-t td.mono{font-family:var(--mono);color:var(--text)}

.stat-row{display:flex;gap:12px;margin:1.5rem 0;flex-wrap:wrap}

.stat{flex:1;min-width:120px;background:var(--surface);border:0.5px solid var(--border);border-radius:12px;padding:1.1rem 1.25rem}

.stat .n{font-family:var(--serif);font-size:30px;font-weight:500;letter-spacing:-1px}

.stat .l{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--dim);margin-top:4px}

.form-inline{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;background:var(--surface);border:0.5px solid var(--border);border-radius:12px;padding:1.25rem;margin-bottom:1rem}

.form-inline label{margin:0;flex:1;min-width:140px}

.form-inline .btnwrap{display:flex;gap:8px;align-items:center}

.form-inline button{margin-top:0}

.pill{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:1px;padding:2px 9px;border-radius:100px;border:0.5px solid var(--border-strong);color:var(--dim);vertical-align:middle}

.pill.int{color:var(--green);border-color:var(--green-dim)}

a.editlink{color:var(--green);font-family:var(--mono);font-size:11px}

`

var tmpl = template.Must(template.New("").Parse(`

{{define "head"}}<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1"><title>{{.Title}} · Spread</title><style>` + pageCSS + `</style></head><body><div class="wrap">{{end}}

{{define "foot"}}</div></body></html>{{end}}

{{define "ahead"}}<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1"><title>{{.Title}} · Spread admin</title><style>` + pageCSS + `</style></head><body>

<div class="topbar">

  <div class="brand">Spread<span>●</span> <em>· admin</em></div>

  <nav class="topnav">

    <a href="/admin">Overview</a>

    <a href="/admin/catalog">Catalog</a>

    <a href="/admin/subscribers">Subscribers</a>

    <a href="/admin/boms">BOMs</a>

    <form method="post" action="/logout"><input type="hidden" name="csrf_token" value="{{.CSRF}}"><button class="link">Log out</button></form>

  </nav>

</div>

<main class="admin">{{end}}

{{define "afoot"}}</main></body></html>{{end}}

{{define "login"}}{{template "head" .}}

<div class="card">

  <div class="brand">Spread<span>●</span></div>

  <h1>Sign in</h1>

  {{if .Error}}<div class="err">{{.Error}}</div>{{end}}

  <form method="post" action="/login">

    <input type="hidden" name="csrf_token" value="{{.CSRF}}">

    <label>Email<input type="email" name="email" value="{{.Email}}" required autofocus></label>

    <label>Password<input type="password" name="password" required></label>

    <button type="submit">Sign in →</button>

  </form>

  <p class="muted" style="margin-top:1rem"><a href="/forgot">Forgot your password?</a></p>

</div>{{template "foot" .}}{{end}}

{{define "chead"}}<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1"><title>{{.Title}} · Spread</title>

<style>` + pageCSS + `</style></head><body>

<div class="topbar">

  <div class="brand">Spread<span>●</span></div>

  <nav class="topnav">

    <a href="/app">Your BOMs</a>

    <a href="/">Public demo</a>

    <form method="post" action="/logout"><input type="hidden" name="csrf_token" value="{{.CSRF}}"><button class="link">Log out</button></form>

  </nav>

</div>

<main class="admin">{{end}}

{{define "cfoot"}}</main></body></html>{{end}}

{{define "app"}}{{template "chead" .}}

<h1>Your BOMs</h1>

{{if .Notice}}<div class="notice">{{.Notice}}</div>{{end}}

{{if .Error}}<div class="err">{{.Error}}</div>{{end}}

<form class="form-inline" method="post" action="/app/analyze" enctype="multipart/form-data">

  <input type="hidden" name="csrf_token" value="{{.CSRF}}">

  <label>Upload a BOM (.csv or .xlsx)<input type="file" name="bom" accept=".csv,.tsv,.txt,.xlsx" required></label>

  <div class="btnwrap"><button type="submit">Re-quote →</button></div>

</form>

<p class="muted">Signed in as <b>{{.User.Email}}</b> — <b>{{.Sub.Name}}</b>. Uploads are re-quoted against the live catalog and saved here.</p>

<table class="admin-t">

  <thead><tr><th>BOM</th><th>Uploaded</th><th>Parts</th><th>Total savings</th><th>Net</th><th></th></tr></thead>

  <tbody>

  {{range .BOMs}}

    <tr>

      <td class="mono">{{.Ref}}</td>

      <td>{{.CreatedAt}}</td>

      <td>{{.Lines}}</td>

      <td class="mono">{{printf "$%.2f" .TotalSavings}}</td>

      <td class="mono" style="color:var(--green)">{{printf "$%.2f" .NetSavings}}</td>

      <td style="text-align:right"><a class="editlink" href="/app/bom/{{.ID}}">view</a></td>

    </tr>

  {{else}}

    <tr><td colspan="6" style="color:var(--dim)">No BOMs yet — upload one above to see it re-quoted.</td></tr>

  {{end}}

  </tbody>

</table>

{{template "cfoot" .}}{{end}}

{{define "bom"}}{{template "chead" .}}

{{with .BOM}}

<p class="muted"><a href="{{$.BackURL}}">← back</a></p>

<h1>{{.Ref}}</h1>

<p class="muted">{{.SubscriberName}} · {{.CreatedAt}} · {{.Lines}} parts{{if .Filename}} · {{.Filename}}{{end}}</p>

<div class="stat-row">

  <div class="stat"><div class="n">{{printf "$%.2f" .TotalSavings}}</div><div class="l">Total savings</div></div>

  <div class="stat"><div class="n">{{printf "$%.2f" .OurCut}}</div><div class="l">Our cut (20%)</div></div>

  <div class="stat"><div class="n" style="color:var(--green)">{{printf "$%.2f" .NetSavings}}</div><div class="l">Net savings</div></div>

</div>

<table class="admin-t">

  <thead><tr><th>Part</th><th>Qty</th><th>Market</th><th>Spread price</th><th>You save</th></tr></thead>

  <tbody>

  {{range .Items}}

    <tr>

      <td>{{.Description}}<br><span class="mono" style="font-size:11px;color:var(--dim)">{{.PartNumber}}{{if not .Matched}} · est.{{end}}</span></td>

      <td class="mono">{{printf "%.0f" .Quantity}}</td>

      <td class="mono">{{printf "$%.4f" .UnitPrice}}</td>

      <td class="mono">{{printf "$%.4f" .SpreadPrice}}</td>

      <td class="mono" style="color:var(--green)">{{printf "$%.2f" .LineSaving}}</td>

    </tr>

  {{end}}

  </tbody>

</table>

{{end}}

{{template "cfoot" .}}{{end}}

{{define "boms"}}{{template "ahead" .}}

<h1>Uploaded BOMs</h1>

<table class="admin-t">

  <thead><tr><th>BOM</th><th>Subscriber</th><th>Uploaded by</th><th>When</th><th>Parts</th><th>Savings</th><th></th></tr></thead>

  <tbody>

  {{range .BOMs}}

    <tr>

      <td class="mono">{{.Ref}}</td>

      <td>{{.SubscriberName}}</td>

      <td class="mono">{{.UploadedByEmail}}</td>

      <td>{{.CreatedAt}}</td>

      <td>{{.Lines}}</td>

      <td class="mono">{{printf "$%.2f" .TotalSavings}}</td>

      <td style="text-align:right"><a class="editlink" href="/app/bom/{{.ID}}">view</a></td>

    </tr>

  {{else}}

    <tr><td colspan="7" style="color:var(--dim)">No BOMs uploaded yet.</td></tr>

  {{end}}

  </tbody>

</table>

{{template "afoot" .}}{{end}}

{{define "admin"}}{{template "ahead" .}}

<h1>Overview</h1>

<p class="muted">Signed in as <b>{{.User.Email}}</b> — <b>{{.Sub.Name}}</b>.</p>

<div class="stat-row">

  <div class="stat"><div class="n">{{.Counts.Catalog}}</div><div class="l">Catalog parts</div></div>

  <div class="stat"><div class="n">{{.Counts.Subs}}</div><div class="l">Subscribers</div></div>

  <div class="stat"><div class="n">{{.Counts.Users}}</div><div class="l">Users</div></div>

  <div class="stat"><div class="n">{{.Counts.Boms}}</div><div class="l">BOMs uploaded</div></div>

</div>

<p class="muted"><a href="/admin/catalog">Manage catalog →</a></p>

<p class="muted"><a href="/admin/subscribers">Manage subscribers &amp; users →</a></p>

<p class="muted"><a href="/admin/boms">Review uploaded BOMs →</a></p>

{{template "afoot" .}}{{end}}

{{define "catalog"}}{{template "ahead" .}}

<h1>Catalog</h1>

{{if .Notice}}<div class="notice">{{.Notice}}</div>{{end}}

{{if .Error}}<div class="err">{{.Error}}</div>{{end}}

<form class="form-inline" method="post" action="/admin/catalog">

  <input type="hidden" name="csrf_token" value="{{.CSRF}}">

  <label>Part number<input name="part_number" value="{{with .Edit}}{{.PartNumber}}{{end}}"{{if .Edit}} readonly{{end}} required></label>

  <label>Description<input name="description" value="{{with .Edit}}{{.Description}}{{end}}"></label>

  <label>Spread price<input name="spread_price" type="number" step="0.0001" min="0" value="{{with .Edit}}{{printf "%.4f" .SpreadPrice}}{{end}}" required></label>

  <div class="btnwrap">

    <button type="submit">{{if .Edit}}Update{{else}}Add part{{end}}</button>

    {{if .Edit}}<a class="btn-secondary btn-sm" href="/admin/catalog">Cancel</a>{{end}}

  </div>

</form>

<table class="admin-t">

  <thead><tr><th>Part number</th><th>Description</th><th>Spread price</th><th></th></tr></thead>

  <tbody>

  {{range .Catalog}}

    <tr>

      <td class="mono">{{.PartNumber}}</td>

      <td>{{.Description}}</td>

      <td class="mono">{{printf "$%.4f" .SpreadPrice}}</td>

      <td style="text-align:right;white-space:nowrap">

        <a class="editlink" href="/admin/catalog?edit={{.PartNumber}}">edit</a>

        <form method="post" action="/admin/catalog/delete" style="display:inline;margin-left:12px">

          <input type="hidden" name="csrf_token" value="{{$.CSRF}}">

          <input type="hidden" name="part_number" value="{{.PartNumber}}">

          <button class="btn-danger" type="submit">delete</button>

        </form>

      </td>

    </tr>

  {{else}}

    <tr><td colspan="4" style="color:var(--dim)">No catalog entries yet.</td></tr>

  {{end}}

  </tbody>

</table>

<form method="post" action="/admin/catalog/seed"><input type="hidden" name="csrf_token" value="{{.CSRF}}"><button class="btn-secondary btn-sm">{{if .Catalog}}Re-seed demo parts{{else}}Seed demo catalog{{end}}</button></form>

{{template "afoot" .}}{{end}}

{{define "subscribers"}}{{template "ahead" .}}

<h1>Subscribers &amp; users</h1>

{{if .Notice}}<div class="notice">{{.Notice}}</div>{{end}}

{{if .Error}}<div class="err">{{.Error}}</div>{{end}}

<h2>Add a subscriber</h2>

<form class="form-inline" method="post" action="/admin/subscribers">

  <input type="hidden" name="csrf_token" value="{{.CSRF}}">

  <label>Company / subscriber name<input name="name" required></label>

  <div class="btnwrap"><button type="submit">Create subscriber</button></div>

</form>

<h2>Add a user</h2>

<form class="form-inline" method="post" action="/admin/users">

  <input type="hidden" name="csrf_token" value="{{.CSRF}}">

  <label>Subscriber<select name="subscriber_id" required>{{range .Subs}}<option value="{{.ID}}">{{.Name}}{{if .IsInternal}} (internal){{end}}</option>{{end}}</select></label>

  <label>Email<input type="email" name="email" required></label>

  <label>Name<input name="name"></label>

  <label>Password <span style="color:var(--dim)">(blank = email an invite)</span><input type="password" name="password" minlength="8"></label>

  <div class="btnwrap"><button type="submit">Create user</button></div>

</form>

{{range .Subs}}

<h2>{{.Name}} {{if .IsInternal}}<span class="pill int">internal</span>{{else}}<span class="pill">customer</span>{{end}}</h2>

<table class="admin-t">

  <thead><tr><th>Email</th><th>Name</th><th>User ID</th></tr></thead>

  <tbody>

  {{range .Users}}<tr><td class="mono">{{.Email}}</td><td>{{.Name}}</td><td class="mono">{{.ID}}</td></tr>

  {{else}}<tr><td colspan="3" style="color:var(--dim)">No users yet.</td></tr>{{end}}

  </tbody>

</table>

{{end}}

{{template "afoot" .}}{{end}}

{{define "forgot"}}{{template "head" .}}

<div class="card">

  <div class="brand">Spread<span>●</span></div>

  <h1>Reset password</h1>

  {{if .Notice}}<div class="notice">{{.Notice}}</div>{{end}}

  <form method="post" action="/forgot">

    <input type="hidden" name="csrf_token" value="{{.CSRF}}">

    <label>Email<input type="email" name="email" required autofocus></label>

    <button type="submit">Send reset link →</button>

  </form>

  <p class="muted" style="margin-top:1rem"><a href="/login">Back to sign in</a></p>

</div>{{template "foot" .}}{{end}}

{{define "setpassword"}}{{template "head" .}}

<div class="card">

  <div class="brand">Spread<span>●</span></div>

  <h1>Set your password</h1>

  {{if .Error}}<div class="err">{{.Error}}</div>{{end}}

  <form method="post" action="/set-password">

    <input type="hidden" name="csrf_token" value="{{.CSRF}}">

    <input type="hidden" name="token" value="{{.Token}}">

    <label>New password<input type="password" name="password" required minlength="8" autofocus></label>

    <label>Confirm password<input type="password" name="confirm" required minlength="8"></label>

    <button type="submit">Set password →</button>

  </form>

</div>{{template "foot" .}}{{end}}

{{define "tokenerror"}}{{template "head" .}}

<div class="card">

  <div class="brand">Spread<span>●</span></div>

  <h1>Link expired</h1>

  <p class="muted">This link is invalid or has already been used. Ask an admin to re-send your invite, or <a href="/forgot">request a new reset link</a>.</p>

</div>{{template "foot" .}}{{end}}

`))