Andrew Gundersen
fd2d498141
- Re-enable ActiveRecord pointing at Neon Postgres - Add Customer model with stripe_customer_id, email, slug, status - Add dashboard controller and Apple ID-style device view - Redirect checkout success to /dashboard - Webhook now calls /instances, parses response, creates Customer in Rails DB - Add MIT License Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
126 lines
4 KiB
Text
126 lines
4 KiB
Text
<% content_for :title, "My Devices — Crimata" %>
|
|
|
|
<style>
|
|
.dashboard-header { margin-bottom: 2.5rem; }
|
|
.dashboard-header h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.5px; }
|
|
.dashboard-header p { color: #666; margin-top: 0.4rem; font-size: 0.95rem; }
|
|
|
|
.devices { display: grid; gap: 1rem; }
|
|
|
|
.device-card {
|
|
border: 1px solid #e5e5e5;
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.25rem;
|
|
background: #fafafa;
|
|
}
|
|
.device-card:hover { border-color: #ccc; background: #fff; }
|
|
|
|
.device-icon {
|
|
width: 52px; height: 52px;
|
|
background: #111;
|
|
border-radius: 10px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.device-icon svg { width: 28px; height: 28px; fill: #fff; }
|
|
|
|
.device-info { flex: 1; min-width: 0; }
|
|
.device-name { font-weight: 600; font-size: 1rem; margin-bottom: 0.2rem; }
|
|
.device-meta { font-size: 0.85rem; color: #888; display: flex; gap: 1rem; flex-wrap: wrap; }
|
|
.device-meta span { display: flex; align-items: center; gap: 0.3rem; }
|
|
|
|
.device-status { flex-shrink: 0; }
|
|
.badge {
|
|
display: inline-flex; align-items: center; gap: 0.4rem;
|
|
font-size: 0.78rem; font-weight: 600;
|
|
padding: 0.3rem 0.75rem;
|
|
border-radius: 20px;
|
|
}
|
|
.badge.provisioning { background: #fff3cd; color: #856404; }
|
|
.badge.active { background: #d1fae5; color: #065f46; }
|
|
.badge .dot {
|
|
width: 6px; height: 6px; border-radius: 50%;
|
|
background: currentColor;
|
|
}
|
|
|
|
.device-action { flex-shrink: 0; }
|
|
.device-action a {
|
|
font-size: 0.85rem; color: #2563eb; text-decoration: none; font-weight: 500;
|
|
}
|
|
.device-action a:hover { text-decoration: underline; }
|
|
.device-action .disabled { color: #bbb; cursor: default; font-size: 0.85rem; }
|
|
|
|
.empty-state {
|
|
text-align: center; padding: 4rem 0; color: #888;
|
|
}
|
|
.empty-state h2 { font-size: 1.25rem; font-weight: 600; color: #333; margin-bottom: 0.5rem; }
|
|
|
|
.setup-card {
|
|
border: 1px dashed #e5e5e5;
|
|
border-radius: 12px;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
color: #888;
|
|
}
|
|
.setup-card .spinner {
|
|
width: 32px; height: 32px;
|
|
border: 3px solid #eee;
|
|
border-top-color: #111;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
margin: 0 auto 1rem;
|
|
}
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
.setup-card p { font-size: 0.9rem; margin-top: 0.4rem; }
|
|
</style>
|
|
|
|
<div class="dashboard-header">
|
|
<h1>My Devices</h1>
|
|
<p><%= @customer&.email %></p>
|
|
</div>
|
|
|
|
<div class="devices">
|
|
<% if @customer.nil? %>
|
|
<div class="setup-card">
|
|
<div class="spinner"></div>
|
|
<strong>Setting up your device…</strong>
|
|
<p>This usually takes a minute. Refresh to check progress.</p>
|
|
</div>
|
|
<% else %>
|
|
<div class="device-card">
|
|
<div class="device-icon">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20 3H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h7v2H8v2h8v-2h-3v-2h7a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm-1 12H5V5h14v10z"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="device-info">
|
|
<div class="device-name"><%= @customer.slug || "Your device" %></div>
|
|
<div class="device-meta">
|
|
<% if @customer.slug.present? %>
|
|
<span>🌎 <%= @customer.slug %>.crimata.com</span>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="device-status">
|
|
<% badge_class = @customer.status == "active" ? "active" : "provisioning" %>
|
|
<% badge_label = { "active" => "Active", "provisioning" => "Provisioning", "failed" => "Failed" }.fetch(@customer.status, "Pending") %>
|
|
<span class="badge <%= badge_class %>">
|
|
<span class="dot"></span><%= badge_label %>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="device-action">
|
|
<% if @customer.slug.present? %>
|
|
<a href="https://<%= @customer.slug %>.crimata.com" target="_blank">Open →</a>
|
|
<% else %>
|
|
<span class="disabled">Not ready yet</span>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|