studio-os 0.2.0

package/views/admin/rules.ejs

@@ -0,0 +1,71 @@
+<%- include('../partials/head') %>
+<h3>Weekly schedule rules</h3>
+<p><small>Rules materialize into bookable class instances on a rolling 8-week horizon (at boot, daily, and whenever a rule changes).</small></p>
+<% const days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; %>
+<details open>
+  <summary role="button" class="outline">Add weekly rule</summary>
+  <form method="post" action="/admin/rules"><input type="hidden" name="_csrf" value="<%= csrfToken %>">
+    <div class="grid">
+      <label>Class
+        <select name="class_type_id" required>
+          <% for (const t of types) { %><option value="<%= t.id %>"><%= t.name %></option><% } %>
+        </select>
+      </label>
+      <label>Instructor
+        <select name="instructor_id">
+          <option value="">—</option>
+          <% for (const i of instructors) { %><option value="<%= i.id %>"><%= i.name %></option><% } %>
+        </select>
+      </label>
+      <label>Day
+        <select name="weekday"><% days.forEach((d, idx) => { %><option value="<%= idx %>"><%= d %></option><% }) %></select>
+      </label>
+      <label>Start (HH:MM) <input name="start_time" required pattern="[0-2][0-9]:[0-5][0-9]" placeholder="09:00"></label>
+    </div>
+    <div class="grid">
+      <label>Capacity override <input type="number" name="capacity_override" min="1" placeholder="(class default)"></label>
+      <label>Active from <input type="date" name="active_from"></label>
+      <label>Active until <input type="date" name="active_until"></label>
+    </div>
+    <button>Add rule</button>
+  </form>
+</details>
+<% if (!rules.length) { %><p>No rules yet.</p><% } %>
+<% for (const rule of rules) { %>
+  <details>
+    <summary>
+      <strong><%= days[rule.weekday] %> <%= rule.start_time %></strong> — <%= rule.class_name %>
+      <% if (rule.instructor_name) { %><small>(<%= rule.instructor_name %>)</small><% } %>
+      <%= rule.active ? '' : ' · INACTIVE' %>
+    </summary>
+    <form method="post" action="/admin/rules/<%= rule.id %>"><input type="hidden" name="_csrf" value="<%= csrfToken %>">
+      <div class="grid">
+        <label>Class
+          <select name="class_type_id">
+            <% for (const t of types) { %><option value="<%= t.id %>" <%= t.id === rule.class_type_id ? 'selected' : '' %>><%= t.name %></option><% } %>
+          </select>
+        </label>
+        <label>Instructor
+          <select name="instructor_id">
+            <option value="">—</option>
+            <% for (const i of instructors) { %><option value="<%= i.id %>" <%= i.id === rule.instructor_id ? 'selected' : '' %>><%= i.name %></option><% } %>
+          </select>
+        </label>
+        <label>Day
+          <select name="weekday"><% days.forEach((d, idx) => { %><option value="<%= idx %>" <%= idx === rule.weekday ? 'selected' : '' %>><%= d %></option><% }) %></select>
+        </label>
+        <label>Start <input name="start_time" value="<%= rule.start_time %>"></label>
+      </div>
+      <div class="grid">
+        <label>Capacity override <input type="number" name="capacity_override" value="<%= rule.capacity_override || '' %>"></label>
+        <label>Active from <input type="date" name="active_from" value="<%= rule.active_from || '' %>"></label>
+        <label>Active until <input type="date" name="active_until" value="<%= rule.active_until || '' %>"></label>
+      </div>
+      <div class="grid">
+        <button>Save &amp; regenerate</button>
+        <button name="action" value="delete" class="outline secondary" onclick="return confirm('Deactivate this rule? Future empty classes will be removed.')">Deactivate</button>
+      </div>
+    </form>
+  </details>
+<% } %>
+<%- include('../partials/foot') %>

package/views/admin/schedule.ejs

@@ -0,0 +1,50 @@
+<%- include('../partials/head') %>
+<h3>Schedule — next 14 days</h3>
+<details>
+  <summary role="button" class="outline">Add one-off class</summary>
+  <form method="post" action="/admin/schedule"><input type="hidden" name="_csrf" value="<%= csrfToken %>">
+    <div class="grid">
+      <label>Class
+        <select name="class_type_id" required>
+          <% for (const t of types) { %><option value="<%= t.id %>"><%= t.name %></option><% } %>
+        </select>
+      </label>
+      <label>Instructor
+        <select name="instructor_id"><option value="">—</option>
+          <% for (const i of instructors) { %><option value="<%= i.id %>"><%= i.name %></option><% } %>
+        </select>
+      </label>
+      <label>Date <input type="date" name="date" required></label>
+      <label>Time <input name="time" required pattern="[0-2][0-9]:[0-5][0-9]" placeholder="18:30"></label>
+      <label>Capacity <input type="number" name="capacity" min="1" placeholder="(class default)"></label>
+    </div>
+    <label>Notes <input name="notes"></label>
+    <button>Create class</button>
+  </form>
+</details>
+<%
+  let lastDay = '';
+  for (const inst of instances) {
+    const day = fmtDt(inst.starts_at, { weekday: 'long', day: 'numeric', month: 'long', hour: undefined, minute: undefined });
+%>
+  <% if (day !== lastDay) { lastDay = day; %><h5 class="day-header"><%= day %></h5><% } %>
+  <article class="class-row <%= inst.status === 'cancelled' ? 'cancelled' : '' %>" style="border-left: 6px solid <%= inst.color %>">
+    <div class="grid">
+      <div>
+        <strong><%= fmtDt(inst.starts_at, { weekday: undefined, day: undefined, month: undefined }) %></strong>
+        · <a href="/admin/instances/<%= inst.id %>"><%= inst.class_name %></a>
+        <% if (inst.instructor_name) { %><small>(<%= inst.instructor_name %>)</small><% } %>
+        <% if (inst.status === 'cancelled') { %><mark>cancelled</mark><% } %>
+      </div>
+      <div class="right">
+        <%= inst.booked_count %>/<%= inst.capacity %><% if (inst.waitlist_count) { %> +<%= inst.waitlist_count %> WL<% } %>
+        <% if (inst.status === 'scheduled') { %>
+          <form method="post" action="/admin/instances/<%= inst.id %>/cancel" class="inline-form"><input type="hidden" name="_csrf" value="<%= csrfToken %>">
+            <button class="slim outline secondary" onclick="return confirm('Cancel this class? All bookings are refunded and notified.')">Cancel</button>
+          </form>
+        <% } %>
+      </div>
+    </div>
+  </article>
+<% } %>
+<%- include('../partials/foot') %>

package/views/admin/settings.ejs

@@ -0,0 +1,53 @@
+<%- include('../partials/head') %>
+<h3>Settings</h3>
+<form method="post" action="/admin/settings"><input type="hidden" name="_csrf" value="<%= csrfToken %>">
+  <div class="grid">
+    <label>Studio name <input name="studio_name" value="<%= settings.studio_name %>"></label>
+    <label>Timezone <input name="timezone" value="<%= settings.timezone %>" placeholder="Asia/Hong_Kong"></label>
+    <label>Currency <input name="currency" maxlength="3" value="<%= settings.currency %>"></label>
+  </div>
+  <div class="grid">
+    <label>Cancellation window (hours)
+      <input type="number" name="cancellation_window_hours" min="0" value="<%= settings.cancellation_window_hours %>">
+    </label>
+    <label>Late-cancel policy
+      <select name="late_cancel_policy">
+        <option value="forfeit" <%= settings.late_cancel_policy === 'forfeit' ? 'selected' : '' %>>Forfeit credit (default)</option>
+        <option value="refund" <%= settings.late_cancel_policy === 'refund' ? 'selected' : '' %>>Refund credit anyway</option>
+      </select>
+    </label>
+  </div>
+  <label>Waiver text (Markdown)
+    <textarea name="waiver_markdown" rows="8"><%= settings.waiver_markdown %></textarea>
+  </label>
+  <button>Save settings</button>
+</form>
+<div class="grid">
+  <article>
+    <h5>Integrations (set via environment / .env)</h5>
+    <p><small>
+      Stripe secret key: <strong><%= stripeConfigured ? 'set' : 'not set' %></strong><br>
+      Stripe webhook secret: <strong><%= locals.services ? '' : '' %><%= stripeConfigured ? (settings.stripe_webhook_hint || 'see .env') : '—' %></strong><br>
+      SMTP: <strong><%= smtpConfigured ? 'configured' : 'not set (emails go to data/outbox/, links shown on screen)' %></strong>
+    </small></p>
+  </article>
+  <article>
+    <h5>Backup</h5>
+    <p><small>Downloads a consistent snapshot of the SQLite database (VACUUM INTO).</small></p>
+    <a href="/admin/backup" role="button" class="outline">Download backup</a>
+  </article>
+</div>
+<% if (user && user.role === 'owner') { %>
+<article>
+  <h5>Add staff account</h5>
+  <form method="post" action="/admin/staff"><input type="hidden" name="_csrf" value="<%= csrfToken %>">
+    <div class="grid">
+      <label>Name <input name="name"></label>
+      <label>Email <input type="email" name="email" required></label>
+      <label>Password <input type="password" name="password" minlength="8" required></label>
+    </div>
+    <button class="slim">Create staff login</button>
+  </form>
+</article>
+<% } %>
+<%- include('../partials/foot') %>

package/views/error.ejs

@@ -0,0 +1,7 @@
+<%- include('partials/head') %>
+<article>
+  <h2><%= title %></h2>
+  <p><%= message %></p>
+  <a href="/">Back to schedule</a>
+</article>
+<%- include('partials/foot') %>

package/views/instructor/roster.ejs

@@ -0,0 +1,27 @@
+<%- include('../partials/head') %>
+<hgroup>
+  <h3><%= inst.class_name %> roster</h3>
+  <p><%= fmtDt(inst.starts_at) %> · <%= inst.duration_min %> min · capacity <%= inst.capacity %>
+     <% if (inst.status === 'cancelled') { %> · <mark>CANCELLED</mark><% } %></p>
+</hgroup>
+<p><a href="/instructor/schedule">&larr; Back to my schedule</a></p>
+<table>
+  <thead><tr><th>Attendee</th><th>Status</th><th></th></tr></thead>
+  <tbody>
+  <% for (const b of roster) { %>
+    <tr>
+      <td><%= b.client_name %></td>
+      <td><%= b.status === 'attended' ? 'checked-in' : b.status.replace(/_/g, ' ') %></td>
+      <td>
+        <% if (b.status === 'booked') { %>
+          <form method="post" action="/instructor/classes/<%= inst.id %>/checkin/<%= b.id %>" class="inline-form"><input type="hidden" name="_csrf" value="<%= csrfToken %>">
+            <button class="slim">Check in</button>
+          </form>
+        <% } %>
+      </td>
+    </tr>
+  <% } %>
+  <% if (!roster.length) { %><tr><td colspan="3">No bookings yet.</td></tr><% } %>
+  </tbody>
+</table>
+<%- include('../partials/foot') %>

package/views/instructor/schedule.ejs

@@ -0,0 +1,21 @@
+<%- include('../partials/head') %>
+<hgroup>
+  <h3>My schedule</h3>
+  <p>Classes you are assigned to teach, from today onward.</p>
+</hgroup>
+<table>
+  <thead><tr><th>When</th><th>Class</th><th>Booked</th><th></th></tr></thead>
+  <tbody>
+  <% for (const c of classes) { %>
+    <tr>
+      <td><%= fmtDt(c.starts_at) %></td>
+      <td><span class="dot" style="background:<%= c.color %>"></span> <%= c.class_name %>
+        <% if (c.status === 'cancelled') { %> <mark>CANCELLED</mark><% } %></td>
+      <td><%= c.booked_count %>/<%= c.capacity %></td>
+      <td><a href="/instructor/classes/<%= c.id %>/roster" role="button" class="slim outline">Roster</a></td>
+    </tr>
+  <% } %>
+  <% if (!classes.length) { %><tr><td colspan="4">No upcoming classes assigned to you yet — ask the studio admin.</td></tr><% } %>
+  </tbody>
+</table>
+<%- include('../partials/foot') %>

package/views/login.ejs

@@ -0,0 +1,11 @@
+<%- include('partials/head', { adminNav: false }) %>
+<article class="narrow">
+  <h2>Staff login</h2>
+  <% if (error) { %><p class="flash error" role="alert"><%= error %></p><% } %>
+  <form method="post" action="/admin/login"><input type="hidden" name="_csrf" value="<%= csrfToken %>">
+    <label>Email <input type="email" name="email" required autofocus></label>
+    <label>Password <input type="password" name="password" required></label>
+    <button type="submit">Log in</button>
+  </form>
+</article>
+<%- include('partials/foot') %>

package/views/partials/foot.ejs

@@ -0,0 +1,11 @@
+</main>
+<footer class="container">
+  <small><%= settings.studio_name || 'Studio OS' %> · powered by <a href="https://github.com/studio-os">Studio OS</a> (self-hosted)</small>
+</footer>
+<script>
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/js/sw.js').catch(function () {});
+}
+</script>
+</body>
+</html>

package/views/partials/head.ejs

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title><%= title %> — <%= settings.studio_name || 'Studio OS' %></title>
+  <link rel="stylesheet" href="/vendor/pico.min.css">
+  <link rel="stylesheet" href="/css/custom.css">
+  <link rel="manifest" href="/manifest.json">
+  <meta name="theme-color" content="#4f7cac">
+  <script src="/vendor/htmx.min.js" defer></script>
+</head>
+<body>
+<nav class="container">
+  <ul>
+    <li><strong><a href="/" class="brand"><%= settings.studio_name || 'Studio OS' %></a></strong></li>
+  </ul>
+  <ul>
+    <li><a href="/">Schedule</a></li>
+    <li><a href="/buy">Passes</a></li>
+    <li><a href="/magic-link">My bookings</a></li>
+    <% if (user && user.role === 'instructor') { %>
+      <li><a href="/instructor/schedule" role="button" class="outline">My classes</a></li>
+    <% } else if (user) { %>
+      <li><a href="/admin" role="button" class="outline">Admin</a></li>
+    <% } %>
+  </ul>
+</nav>
+<% if (user && user.role === 'instructor' && (typeof adminNav !== 'undefined' ? adminNav : true)) { %>
+<nav class="container admin-nav">
+  <ul>
+    <li><a href="/instructor/schedule">My schedule</a></li>
+    <li><form method="post" action="/admin/logout" class="inline-form"><input type="hidden" name="_csrf" value="<%= csrfToken %>"><button class="outline secondary slim">Log out</button></form></li>
+  </ul>
+</nav>
+<% } else if (user && (typeof adminNav !== 'undefined' ? adminNav : true)) { %>
+<nav class="container admin-nav">
+  <ul>
+    <li><a href="/admin">Dashboard</a></li>
+    <li><a href="/admin/schedule">Schedule</a></li>
+    <li><a href="/admin/rules">Rules</a></li>
+    <li><a href="/admin/class-types">Classes</a></li>
+    <li><a href="/admin/instructors">Instructors</a></li>
+    <li><a href="/admin/clients">Clients</a></li>
+    <li><a href="/admin/products">Products</a></li>
+    <li><a href="/admin/reports">Reports</a></li>
+    <li><a href="/admin/import">Import</a></li>
+    <li><a href="/admin/settings">Settings</a></li>
+    <li><form method="post" action="/admin/logout" class="inline-form"><input type="hidden" name="_csrf" value="<%= csrfToken %>"><button class="outline secondary slim">Log out</button></form></li>
+  </ul>
+</nav>
+<% } %>
+<main class="container">
+<% if (flash) { %><article class="flash" role="alert"><%= flash %></article><% } %>

package/views/public/book_result.ejs

@@ -0,0 +1,26 @@
+<%- include('../partials/head', { adminNav: false }) %>
+<article>
+  <% if (result.waitlisted) { %>
+    <h2>You're on the waitlist</h2>
+    <p><strong><%= inst.class_name %></strong> on <%= fmtDt(inst.starts_at) %> is currently full.
+       You're #<%= result.booking.id ? '' : '' %> in line — if a spot opens we'll book you in automatically<%= smtpConfigured ? ' and email you' : '' %>.</p>
+  <% } else { %>
+    <h2>You're booked!</h2>
+    <p><strong><%= inst.class_name %></strong> · <%= fmtDt(inst.starts_at) %></p>
+    <p>Payment:
+      <% if (result.booking.paid_with === 'pack') { %>1 credit deducted from your class pack.
+      <% } else if (result.booking.paid_with === 'membership') { %>covered by your membership.
+      <% } else if (result.paymentId) { %>please pay <%= fmtMoney(inst.drop_in_price_cents) %> at the studio (cash/FPS) before class.
+      <% } else { %>drop-in.
+      <% } %>
+    </p>
+  <% } %>
+  <p>Manage or cancel your bookings any time:</p>
+  <p><a href="<%= magicUrl %>" role="button" class="outline">My bookings</a></p>
+  <% if (!smtpConfigured) { %>
+    <p><small>Save that link — it's your personal booking manager (valid 7 days; you can request a new one from “My bookings” in the menu).</small></p>
+  <% } else { %>
+    <p><small>A confirmation email with your personal link is on its way.</small></p>
+  <% } %>
+</article>
+<%- include('../partials/foot') %>

package/views/public/buy.ejs

@@ -0,0 +1,37 @@
+<%- include('../partials/head', { adminNav: false }) %>
+<hgroup>
+  <h2>Passes &amp; memberships</h2>
+  <p><%= stripeConfigured ? 'Pay securely online, or at the studio.' : 'Purchases are completed at the studio (cash / FPS / bank transfer).' %></p>
+</hgroup>
+<% if (error) { %><p class="flash error" role="alert"><%= error %></p><% } %>
+<div class="grid">
+  <section>
+    <h4>Class packs</h4>
+    <% if (!packs.length) { %><p>No packs available right now.</p><% } %>
+    <% for (const p of packs) { %>
+      <article>
+        <strong><%= p.name %></strong> — <%= fmtMoney(p.price_cents) %>
+        <br><small><%= p.credits %> classes<% if (p.validity_days) { %> · valid <%= p.validity_days %> days<% } %></small>
+        <form method="post" action="/buy/pack/<%= p.id %>"><input type="hidden" name="_csrf" value="<%= csrfToken %>">
+          <input type="email" name="email" required placeholder="you@example.com">
+          <button type="submit" class="slim"><%= stripeConfigured ? 'Buy online' : 'Reserve — pay at studio' %></button>
+        </form>
+      </article>
+    <% } %>
+  </section>
+  <section>
+    <h4>Memberships</h4>
+    <% if (!plans.length) { %><p>No membership plans right now.</p><% } %>
+    <% for (const p of plans) { %>
+      <article>
+        <strong><%= p.name %></strong> — <%= fmtMoney(p.price_cents) %>/month
+        <br><small><%= p.unlimited ? 'Unlimited classes' : `${p.credits_per_month} classes per month` %></small>
+        <form method="post" action="/buy/membership/<%= p.id %>"><input type="hidden" name="_csrf" value="<%= csrfToken %>">
+          <input type="email" name="email" required placeholder="you@example.com">
+          <button type="submit" class="slim"><%= (stripeConfigured && p.stripe_price_id) ? 'Subscribe online' : 'Reserve — arrange at studio' %></button>
+        </form>
+      </article>
+    <% } %>
+  </section>
+</div>
+<%- include('../partials/foot') %>

package/views/public/buy_manual.ejs

@@ -0,0 +1,17 @@
+<%- include('../partials/head', { adminNav: false }) %>
+<article>
+  <% if (error) { %><p class="flash error" role="alert"><%= error %></p><% } %>
+  <h2>Almost there</h2>
+  <% const item = product || plan; %>
+  <% if (item) { %>
+    <p>You're reserving: <strong><%= item.name %></strong>
+       — <%= fmtMoney(item.price_cents) %><%= plan ? '/month' : '' %></p>
+  <% } %>
+  <p>Online payment isn't enabled<%= plan && stripeConfigured ? ' for this plan' : '' %>, so to complete your purchase:</p>
+  <ol>
+    <li>Pay at the studio (cash / FPS / bank transfer) or contact us to arrange payment.</li>
+    <li>Mention the email you entered<%= email ? ` (${email})` : '' %> — we'll activate it on your account right away.</li>
+  </ol>
+  <p><a href="/buy">Back to passes</a> · <a href="/">Schedule</a></p>
+</article>
+<%- include('../partials/foot') %>

package/views/public/buy_thanks.ejs

@@ -0,0 +1,7 @@
+<%- include('../partials/head', { adminNav: false }) %>
+<article>
+  <h2>Thank you!</h2>
+  <p>Your payment was received. Your pass or membership is now active on your account — just book with the same email.</p>
+  <p><a href="/" role="button">Browse the schedule</a></p>
+</article>
+<%- include('../partials/foot') %>

package/views/public/class.ejs

@@ -0,0 +1,29 @@
+<%- include('../partials/head', { adminNav: false }) %>
+<article style="border-top: 6px solid <%= inst.color %>">
+  <hgroup>
+    <h2><%= inst.class_name %></h2>
+    <p><%= fmtDt(inst.starts_at) %> · <%= inst.duration_min %> min<% if (inst.instructor_name) { %> · <%= inst.instructor_name %><% } %></p>
+  </hgroup>
+  <% if (inst.class_description) { %><p><%= inst.class_description %></p><% } %>
+  <p>
+    <% const left = inst.capacity - inst.booked_count; %>
+    <% if (full) { %><mark>This class is full — you can join the waitlist.</mark>
+    <% } else { %><small><%= left %> of <%= inst.capacity %> spots available.</small><% } %>
+    <% if (inst.drop_in_price_cents > 0) { %><br><small>Drop-in price: <%= fmtMoney(inst.drop_in_price_cents) %> · uses <%= inst.credits_required %> credit<%= inst.credits_required === 1 ? '' : 's' %> from a pass</small><% } %>
+  </p>
+  <% if (error) { %><p class="flash error" role="alert"><%= error %></p><% } %>
+  <form method="post" action="/class/<%= inst.id %>/book"><input type="hidden" name="_csrf" value="<%= csrfToken %>">
+    <div class="grid">
+      <label>Your name <input name="name" value="<%= form.name || '' %>" placeholder="Jane Chan"></label>
+      <label>Email <input type="email" name="email" required value="<%= form.email || '' %>" placeholder="you@example.com"></label>
+    </div>
+    <details>
+      <summary>Liability waiver (required for first booking)</summary>
+      <div class="waiver-box"><%- waiverHtml %></div>
+      <label><input type="checkbox" name="waiver_agree" value="1"> I have read and agree to the waiver</label>
+    </details>
+    <button type="submit"><%= full ? 'Join waitlist' : 'Book this class' %></button>
+  </form>
+  <p><small>Already booked with us before? Just use the same email — membership or class-pack credits are applied automatically.</small></p>
+</article>
+<%- include('../partials/foot') %>

package/views/public/magic_request.ejs

@@ -0,0 +1,21 @@
+<%- include('../partials/head', { adminNav: false }) %>
+<article class="narrow">
+  <h2>My bookings</h2>
+  <% if (error) { %><p class="flash error" role="alert"><%= error %></p><% } %>
+  <% if (sent) { %>
+    <% if (magicUrl) { %>
+      <p>Here's your personal booking link:</p>
+      <p><a href="<%= magicUrl %>" role="button">Open my bookings</a></p>
+      <p><small>(Email sending is not configured on this studio, so the link is shown here. It's valid for 7 days.)</small></p>
+    <% } else { %>
+      <p>If that email has an account with us, a booking-management link is on its way to your inbox.</p>
+    <% } %>
+  <% } else { %>
+    <p>Enter your email and we'll give you a secure link to view and manage your bookings. No password needed.</p>
+    <form method="post" action="/magic-link"><input type="hidden" name="_csrf" value="<%= csrfToken %>">
+      <label>Email <input type="email" name="email" required placeholder="you@example.com"></label>
+      <button type="submit">Send me my link</button>
+    </form>
+  <% } %>
+</article>
+<%- include('../partials/foot') %>

package/views/public/me.ejs

@@ -0,0 +1,47 @@
+<%- include('../partials/head', { adminNav: false }) %>
+<hgroup>
+  <h2>Hi <%= clientInfo.name %></h2>
+  <p><%= clientInfo.email %></p>
+</hgroup>
+<section>
+  <h4>Upcoming bookings</h4>
+  <% if (!bookings.length) { %><p>No upcoming bookings. <a href="/">Browse the schedule</a></p><% } %>
+  <% for (const b of bookings) { %>
+    <article class="class-row">
+      <div class="grid">
+        <div>
+          <strong><%= b.class_name %></strong> · <%= fmtDt(b.starts_at) %>
+          <% if (b.instructor_name) { %><small>with <%= b.instructor_name %></small><% } %>
+          <% if (b.status === 'waitlist') { %><mark>waitlist</mark><% } %>
+        </div>
+        <div class="right">
+          <form method="post" action="/me/cancel/<%= b.id %>"><input type="hidden" name="_csrf" value="<%= csrfToken %>">
+            <input type="hidden" name="token" value="<%= token %>">
+            <button class="slim outline secondary"
+              onclick="return confirm('Cancel this booking?')">Cancel</button>
+          </form>
+        </div>
+      </div>
+    </article>
+  <% } %>
+  <p><small>Cancel at least <%= windowHours %> hours before class starts to get your credit back.</small></p>
+</section>
+<div class="grid">
+  <section>
+    <h4>Class packs</h4>
+    <% if (!passes.length) { %><p><small>No active packs. <a href="/buy">Buy one</a></small></p><% } %>
+    <% for (const p of passes) { %>
+      <p><strong><%= p.name %></strong>: <%= p.credits_remaining %>/<%= p.credits_total %> credits left
+      <% if (p.expires_on) { %><small>· expires <%= p.expires_on %></small><% } %></p>
+    <% } %>
+  </section>
+  <section>
+    <h4>Memberships</h4>
+    <% if (!memberships.length) { %><p><small>No active membership.</small></p><% } %>
+    <% for (const m of memberships) { %>
+      <p><strong><%= m.plan_name %></strong> —
+      <%= m.unlimited ? 'unlimited' : `${Math.max(0, (m.credits_per_month || 0) - m.credits_used_this_cycle)} of ${m.credits_per_month} classes left this cycle` %></p>
+    <% } %>
+  </section>
+</div>
+<%- include('../partials/foot') %>

package/views/public/schedule.ejs

@@ -0,0 +1,49 @@
+<%- include('../partials/head', { adminNav: false }) %>
+<hgroup>
+  <h2>Class schedule</h2>
+  <p>Next 14 days</p>
+</hgroup>
+<form method="get" action="/" class="grid filters">
+  <select name="type" onchange="this.form.submit()">
+    <option value="">All classes</option>
+    <% for (const t of types) { %>
+      <option value="<%= t.id %>" <%= filterType === t.id ? 'selected' : '' %>><%= t.name %></option>
+    <% } %>
+  </select>
+  <select name="instructor" onchange="this.form.submit()">
+    <option value="">All instructors</option>
+    <% for (const i of instructors) { %>
+      <option value="<%= i.id %>" <%= filterInstructor === i.id ? 'selected' : '' %>><%= i.name %></option>
+    <% } %>
+  </select>
+</form>
+<% if (!instances.length) { %>
+  <article>No upcoming classes match. Check back soon!</article>
+<% } %>
+<%
+  let lastDay = '';
+  for (const inst of instances) {
+    const day = fmtDt(inst.starts_at, { weekday: 'long', day: 'numeric', month: 'long', hour: undefined, minute: undefined });
+%>
+  <% if (day !== lastDay) { lastDay = day; %><h4 class="day-header"><%= day %></h4><% } %>
+  <article class="class-row" style="border-left: 6px solid <%= inst.color %>">
+    <div class="grid">
+      <div>
+        <strong><%= fmtDt(inst.starts_at, { weekday: undefined, day: undefined, month: undefined }) %></strong>
+        · <a href="/class/<%= inst.id %>"><%= inst.class_name %></a>
+        <% if (inst.instructor_name) { %><small>with <%= inst.instructor_name %></small><% } %>
+      </div>
+      <div class="right">
+        <% const left = inst.capacity - inst.booked_count; %>
+        <% if (left > 0) { %>
+          <small><%= left %> spot<%= left === 1 ? '' : 's' %> left</small>
+          <a href="/class/<%= inst.id %>" role="button" class="slim">Book</a>
+        <% } else { %>
+          <small>Full<% if (inst.waitlist_count) { %> · <%= inst.waitlist_count %> waitlisted<% } %></small>
+          <a href="/class/<%= inst.id %>" role="button" class="slim outline">Join waitlist</a>
+        <% } %>
+      </div>
+    </div>
+  </article>
+<% } %>
+<%- include('../partials/foot') %>

package/views/setup.ejs

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Welcome — Studio OS setup</title>
+  <link rel="stylesheet" href="/vendor/pico.min.css">
+  <link rel="stylesheet" href="/css/custom.css">
+</head>
+<body>
+<main class="container narrow">
+  <hgroup>
+    <h1>Welcome to Studio OS</h1>
+    <p>Two minutes of setup and your studio is online.</p>
+  </hgroup>
+  <% if (error) { %><article class="flash error" role="alert"><%= error %></article><% } %>
+  <form method="post" action="/setup"><input type="hidden" name="_csrf" value="<%= csrfToken %>">
+    <label>Studio name
+      <input name="studio_name" required placeholder="Harbour Yoga" value="<%= form.studio_name || '' %>">
+    </label>
+    <div class="grid">
+      <label>Timezone
+        <select name="timezone">
+          <% for (const tzName of timezones) { %>
+            <option value="<%= tzName %>" <%= (form.timezone || 'Asia/Hong_Kong') === tzName ? 'selected' : '' %>><%= tzName %></option>
+          <% } %>
+        </select>
+      </label>
+      <label>Currency (ISO code)
+        <input name="currency" maxlength="3" value="<%= form.currency || 'HKD' %>">
+      </label>
+    </div>
+    <h4>Owner account</h4>
+    <label>Email
+      <input type="email" name="email" required value="<%= form.email || '' %>">
+    </label>
+    <div class="grid">
+      <label>Password (min 8 chars)
+        <input type="password" name="password" minlength="8" required>
+      </label>
+      <label>Repeat password
+        <input type="password" name="password2" minlength="8" required>
+      </label>
+    </div>
+    <label>
+      <input type="checkbox" name="seed_examples" value="1" checked>
+      Create two example class types to explore with
+    </label>
+    <button type="submit">Create my studio</button>
+  </form>
+</main>
+</body>
+</html>