feat: scaffold Antonym fashion store

Anonymous Bitcoin-only fashion e-commerce with:
- Vue 3 + Tailwind 4 frontend with glassmorphism dark/light design system
- Express 5 + SQLite backend with BTCPay Server integration
- Nostr identity (NIP-07/keypair) for anonymous purchase tracking
- ChaCha20-Poly1305 encrypted shipping addresses
- Admin panel with order/product/stock management
- SVG logo splash animation with clip-path reveal
- 5 seeded products across 4 categories

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/views/CartView.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { useCart } from '@/composables/useCart'
+import SatsDisplay from '@/components/ui/SatsDisplay.vue'
+import GlassButton from '@/components/ui/GlassButton.vue'
+
+const { items, totalSats, itemCount, removeItem, updateQuantity } = useCart()
+</script>
+
+<template>
+  <div class="cart-page">
+    <h1>Cart</h1>
+    <div v-if="itemCount === 0" class="empty">
+      <p>Your cart is empty.</p>
+      <router-link to="/" class="btn btn-ghost">Continue Shopping</router-link>
+    </div>
+    <div v-else class="cart-layout">
+      <div class="cart-items">
+        <div v-for="item in items" :key="`${item.productId}-${item.size}`" class="cart-item glass-card">
+          <div class="item-image">
+            <img v-if="item.image" :src="item.image" :alt="item.name" />
+            <div v-else class="item-placeholder">{{ item.name[0] }}</div>
+          </div>
+          <div class="item-info">
+            <router-link :to="`/product/${item.slug}`" class="item-name">{{ item.name }}</router-link>
+            <span class="item-size">Size: {{ item.size }}</span>
+            <SatsDisplay :sats="item.priceSats" />
+          </div>
+          <div class="item-actions">
+            <div class="quantity-control">
+              <button @click="updateQuantity(item.productId, item.size, item.quantity - 1)">-</button>
+              <span>{{ item.quantity }}</span>
+              <button @click="updateQuantity(item.productId, item.size, item.quantity + 1)">+</button>
+            </div>
+            <button class="remove-btn" @click="removeItem(item.productId, item.size)">Remove</button>
+          </div>
+        </div>
+      </div>
+      <div class="cart-summary glass-card">
+        <h3>Summary</h3>
+        <div class="summary-row"><span>Items</span><span>{{ itemCount }}</span></div>
+        <div class="summary-row total"><span>Total</span><SatsDisplay :sats="totalSats" /></div>
+        <router-link to="/checkout"><GlassButton class="checkout-btn">Proceed to Checkout</GlassButton></router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 1.5rem; }
+.empty { text-align: center; padding: 3rem 0; }
+.empty p { color: var(--text-muted); margin-bottom: 1rem; }
+.cart-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items: start; }
+@media (max-width: 768px) { .cart-layout { grid-template-columns: 1fr; } }
+.cart-items { display: flex; flex-direction: column; gap: 1rem; }
+.cart-item { display: flex; gap: 1rem; align-items: center; }
+.item-image { width: 80px; height: 100px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-tertiary); flex-shrink: 0; }
+.item-image img { width: 100%; height: 100%; object-fit: cover; }
+.item-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text-placeholder); }
+.item-info { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; }
+.item-name { font-weight: 600; color: var(--text-primary); text-decoration: none; }
+.item-name:hover { color: var(--accent); }
+.item-size { font-size: 0.8125rem; color: var(--text-muted); }
+.item-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
+.quantity-control { display: flex; align-items: center; gap: 0.75rem; }
+.quantity-control button { width: 28px; height: 28px; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: transparent; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
+.quantity-control span { min-width: 1.5rem; text-align: center; font-weight: 600; }
+.remove-btn { background: none; border: none; color: var(--error); font-size: 0.75rem; cursor: pointer; }
+.cart-summary { position: sticky; top: 80px; }
+.cart-summary h3 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }
+.summary-row { display: flex; justify-content: space-between; padding: 0.5rem 0; font-size: 0.875rem; color: var(--text-secondary); }
+.summary-row.total { border-top: 1px solid var(--glass-border); margin-top: 0.5rem; padding-top: 1rem; font-weight: 600; font-size: 1rem; color: var(--text-primary); }
+.checkout-btn { width: 100%; margin-top: 1.25rem; }
+</style>

src/views/CheckoutView.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { api } from '@/api/client'
+import { useCart } from '@/composables/useCart'
+import { useNostr } from '@/composables/useNostr'
+import type { CreateOrderRequest, CreateOrderResponse, ApiError } from '@shared/types'
+import GlassInput from '@/components/ui/GlassInput.vue'
+import GlassButton from '@/components/ui/GlassButton.vue'
+import SatsDisplay from '@/components/ui/SatsDisplay.vue'
+import NostrIdentity from '@/components/checkout/NostrIdentity.vue'
+
+const { items, totalSats, clearCart } = useCart()
+const { pubkey } = useNostr()
+
+const name = ref('')
+const line1 = ref('')
+const line2 = ref('')
+const city = ref('')
+const state = ref('')
+const postalCode = ref('')
+const country = ref('')
+const email = ref('')
+const note = ref('')
+const isSubmitting = ref(false)
+const errorMessage = ref('')
+
+const canSubmit = computed(() => name.value && line1.value && city.value && postalCode.value && country.value && items.value.length > 0)
+
+async function handleCheckout() {
+  if (!canSubmit.value) return
+  isSubmitting.value = true
+  errorMessage.value = ''
+
+  const order: CreateOrderRequest = {
+    items: items.value.map((i) => ({ productId: i.productId, size: i.size, quantity: i.quantity })),
+    shippingAddress: { name: name.value, line1: line1.value, line2: line2.value || undefined, city: city.value, state: state.value || undefined, postalCode: postalCode.value, country: country.value },
+    email: email.value || undefined,
+    nostrPubkey: pubkey.value || undefined,
+    note: note.value || undefined,
+  }
+
+  try {
+    const res = await api.post('/api/orders', order)
+    if (res.ok) {
+      const data = await api.json<CreateOrderResponse>(res)
+      clearCart()
+      window.location.href = data.invoiceUrl
+    } else {
+      const err = await api.json<ApiError>(res)
+      errorMessage.value = err.error.message
+    }
+  } catch {
+    errorMessage.value = 'Failed to create order. Please try again.'
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="checkout-page">
+    <h1>Checkout</h1>
+    <div v-if="items.length === 0" class="empty"><p>Your cart is empty.</p><router-link to="/" class="btn btn-ghost">Continue Shopping</router-link></div>
+    <form v-else @submit.prevent="handleCheckout" class="checkout-layout">
+      <div class="checkout-form">
+        <section class="form-section glass-card">
+          <h3>Shipping Address</h3>
+          <div class="field"><label>Full Name</label><GlassInput v-model="name" placeholder="Name" is-required /></div>
+          <div class="field"><label>Address Line 1</label><GlassInput v-model="line1" placeholder="Street address" is-required /></div>
+          <div class="field"><label>Address Line 2</label><GlassInput v-model="line2" placeholder="Apartment, unit, etc. (optional)" /></div>
+          <div class="field-row">
+            <div class="field"><label>City</label><GlassInput v-model="city" placeholder="City" is-required /></div>
+            <div class="field"><label>State/Province</label><GlassInput v-model="state" placeholder="State (optional)" /></div>
+          </div>
+          <div class="field-row">
+            <div class="field"><label>Postal Code</label><GlassInput v-model="postalCode" placeholder="Postal code" is-required /></div>
+            <div class="field"><label>Country</label><GlassInput v-model="country" placeholder="Country" is-required /></div>
+          </div>
+        </section>
+        <section class="form-section glass-card">
+          <h3>Contact (optional)</h3>
+          <p class="hint">Provide email and/or Nostr for order updates. Neither is required.</p>
+          <div class="field"><label>Email</label><GlassInput v-model="email" type="email" placeholder="For shipping updates (optional)" /></div>
+          <NostrIdentity />
+        </section>
+        <section class="form-section glass-card">
+          <h3>Note (optional)</h3>
+          <div class="field"><textarea v-model="note" class="glass-input note-input" placeholder="Any special instructions..." rows="3" /></div>
+        </section>
+      </div>
+      <div class="checkout-summary glass-card">
+        <h3>Order Summary</h3>
+        <div v-for="item in items" :key="`${item.productId}-${item.size}`" class="summary-item">
+          <span>{{ item.name }} ({{ item.size }}) x{{ item.quantity }}</span>
+          <SatsDisplay :sats="item.priceSats * item.quantity" />
+        </div>
+        <div class="summary-total"><span>Total</span><SatsDisplay :sats="totalSats" /></div>
+        <div v-if="errorMessage" class="error-msg">{{ errorMessage }}</div>
+        <GlassButton type="submit" :is-disabled="!canSubmit || isSubmitting" class="pay-btn">{{ isSubmitting ? 'Creating order...' : 'Pay with Bitcoin' }}</GlassButton>
+        <p class="payment-note">You will be redirected to BTCPay Server to complete payment.</p>
+      </div>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 1.5rem; }
+.empty { text-align: center; padding: 3rem 0; }
+.empty p { color: var(--text-muted); margin-bottom: 1rem; }
+.checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; align-items: start; }
+@media (max-width: 768px) { .checkout-layout { grid-template-columns: 1fr; } }
+.checkout-form { display: flex; flex-direction: column; gap: 1.5rem; }
+.form-section h3 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }
+.hint { font-size: 0.8125rem; color: var(--text-muted); margin: -0.5rem 0 1rem; }
+.field { margin-bottom: 0.75rem; }
+.field label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.375rem; }
+.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
+.note-input { resize: vertical; min-height: 80px; font-family: inherit; }
+.checkout-summary { position: sticky; top: 80px; }
+.checkout-summary h3 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }
+.summary-item { display: flex; justify-content: space-between; font-size: 0.8125rem; padding: 0.375rem 0; color: var(--text-secondary); }
+.summary-total { display: flex; justify-content: space-between; border-top: 1px solid var(--glass-border); margin-top: 0.75rem; padding-top: 0.75rem; font-weight: 600; }
+.error-msg { margin-top: 1rem; padding: 0.5rem 0.75rem; background: rgba(239, 68, 68, 0.1); border-radius: var(--radius-sm); color: var(--error); font-size: 0.8125rem; }
+.pay-btn { width: 100%; margin-top: 1.25rem; }
+.payment-note { font-size: 0.75rem; color: var(--text-muted); text-align: center; margin-top: 0.75rem; }
+</style>

src/views/HomeView.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { api } from '@/api/client'
+import type { Product } from '@shared/types'
+import ProductGrid from '@/components/product/ProductGrid.vue'
+import LoadingSpinner from '@/components/ui/LoadingSpinner.vue'
+
+const products = ref<Product[]>([])
+const isLoading = ref(true)
+const activeCategory = ref<string | null>(null)
+
+const categories = computed(() => {
+  const cats = new Set(products.value.map((p) => p.category))
+  return Array.from(cats).sort()
+})
+
+const filtered = computed(() => {
+  if (!activeCategory.value) return products.value
+  return products.value.filter((p) => p.category === activeCategory.value)
+})
+
+onMounted(async () => {
+  try {
+    const res = await api.get('/api/products')
+    products.value = await api.json<Product[]>(res)
+  } finally {
+    isLoading.value = false
+  }
+})
+</script>
+
+<template>
+  <div class="home">
+    <section class="hero">
+      <h1>Antonym</h1>
+      <p class="tagline">Fashion for the sovereign individual. Bitcoin only.</p>
+    </section>
+
+    <div v-if="categories.length > 1" class="category-filter">
+      <button class="filter-btn" :class="{ active: !activeCategory }" @click="activeCategory = null">All</button>
+      <button v-for="cat in categories" :key="cat" class="filter-btn" :class="{ active: activeCategory === cat }" @click="activeCategory = cat">{{ cat }}</button>
+    </div>
+
+    <LoadingSpinner v-if="isLoading" />
+    <ProductGrid v-else :products="filtered" />
+  </div>
+</template>
+
+<style scoped>
+.hero { text-align: center; padding: 3rem 0 2.5rem; }
+.hero h1 { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
+.tagline { color: var(--text-muted); font-size: 1rem; }
+.category-filter { display: flex; gap: 0.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
+.filter-btn {
+  padding: 0.375rem 1rem;
+  border: 1px solid var(--glass-border);
+  border-radius: 9999px;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  text-transform: capitalize;
+}
+.filter-btn:hover { border-color: var(--text-muted); }
+.filter-btn.active { background: var(--accent); border-color: var(--accent); color: #000; }
+</style>

src/views/OrderView.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { api } from '@/api/client'
+import type { Order, OrderEvent } from '@shared/types'
+import StatusBadge from '@/components/ui/StatusBadge.vue'
+import SatsDisplay from '@/components/ui/SatsDisplay.vue'
+import LoadingSpinner from '@/components/ui/LoadingSpinner.vue'
+
+const route = useRoute()
+const order = ref<(Order & { events: OrderEvent[] }) | null>(null)
+const isLoading = ref(true)
+
+onMounted(async () => {
+  try {
+    const res = await api.get(`/api/orders/${route.params.id}`)
+    if (res.ok) order.value = await api.json<Order & { events: OrderEvent[] }>(res)
+  } finally {
+    isLoading.value = false
+  }
+})
+</script>
+
+<template>
+  <div class="order-page">
+    <h1>Order Tracking</h1>
+    <LoadingSpinner v-if="isLoading" />
+    <div v-else-if="order" class="order-detail">
+      <div class="order-header glass-card">
+        <div class="order-id"><span class="label">Order</span><code>{{ order.id }}</code></div>
+        <StatusBadge :status="order.status" />
+      </div>
+      <div class="order-body">
+        <section class="glass-card">
+          <h3>Items</h3>
+          <div v-for="item in order.items" :key="item.productId + item.size" class="order-item">
+            <span>{{ item.productName }} ({{ item.size }}) x{{ item.quantity }}</span>
+            <SatsDisplay :sats="item.priceSats * item.quantity" />
+          </div>
+          <div class="order-total"><span>Total</span><SatsDisplay :sats="order.totalSats" /></div>
+        </section>
+        <section v-if="order.events.length" class="glass-card">
+          <h3>Timeline</h3>
+          <div class="timeline">
+            <div v-for="event in order.events" :key="event.id" class="timeline-item">
+              <div class="timeline-dot" />
+              <div class="timeline-content">
+                <StatusBadge :status="event.status" />
+                <span v-if="event.note" class="timeline-note">{{ event.note }}</span>
+                <time class="timeline-time">{{ new Date(event.createdAt).toLocaleString() }}</time>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+    <div v-else class="not-found"><h2>Order not found</h2><p>Check the order ID and try again.</p></div>
+  </div>
+</template>
+
+<style scoped>
+h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 1.5rem; }
+.order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
+.order-id { display: flex; align-items: center; gap: 0.5rem; }
+.label { color: var(--text-muted); font-size: 0.875rem; }
+.order-id code { font-size: 0.8125rem; color: var(--accent); }
+.order-body { display: flex; flex-direction: column; gap: 1.5rem; }
+.order-body h3 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }
+.order-item { display: flex; justify-content: space-between; padding: 0.375rem 0; font-size: 0.875rem; color: var(--text-secondary); }
+.order-total { display: flex; justify-content: space-between; border-top: 1px solid var(--glass-border); margin-top: 0.5rem; padding-top: 0.75rem; font-weight: 600; }
+.timeline { display: flex; flex-direction: column; gap: 1rem; position: relative; padding-left: 1.5rem; }
+.timeline::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--glass-border); }
+.timeline-item { position: relative; display: flex; gap: 1rem; }
+.timeline-dot { position: absolute; left: -1.5rem; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-primary); }
+.timeline-content { display: flex; flex-direction: column; gap: 0.25rem; }
+.timeline-note { font-size: 0.8125rem; color: var(--text-secondary); }
+.timeline-time { font-size: 0.75rem; color: var(--text-muted); }
+.not-found { text-align: center; padding: 4rem 0; }
+.not-found p { color: var(--text-muted); margin-top: 0.5rem; }
+</style>

src/views/ProductView.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { api } from '@/api/client'
+import { useCart } from '@/composables/useCart'
+import type { Product } from '@shared/types'
+import SizeSelector from '@/components/product/SizeSelector.vue'
+import SatsDisplay from '@/components/ui/SatsDisplay.vue'
+import GlassButton from '@/components/ui/GlassButton.vue'
+import LoadingSpinner from '@/components/ui/LoadingSpinner.vue'
+
+const route = useRoute()
+const { addItem } = useCart()
+
+const product = ref<Product | null>(null)
+const selectedSize = ref<string>('')
+const isLoading = ref(true)
+const isAdded = ref(false)
+
+onMounted(async () => {
+  try {
+    const res = await api.get(`/api/products/${route.params.slug}`)
+    if (res.ok) product.value = await api.json<Product>(res)
+  } finally {
+    isLoading.value = false
+  }
+})
+
+function handleAddToCart() {
+  if (!product.value || !selectedSize.value) return
+  addItem({ id: product.value.id, slug: product.value.slug, name: product.value.name, priceSats: product.value.priceSats, images: product.value.images }, selectedSize.value)
+  isAdded.value = true
+  setTimeout(() => { isAdded.value = false }, 2000)
+}
+</script>
+
+<template>
+  <LoadingSpinner v-if="isLoading" />
+  <div v-else-if="product" class="product-detail">
+    <div class="product-image">
+      <img v-if="product.images[0]" :src="product.images[0]" :alt="product.name" />
+      <div v-else class="placeholder"><span>{{ product.name[0] }}</span></div>
+    </div>
+    <div class="product-info">
+      <span class="category">{{ product.category }}</span>
+      <h1>{{ product.name }}</h1>
+      <SatsDisplay :sats="product.priceSats" class="price" />
+      <p class="description">{{ product.description }}</p>
+      <div class="size-section">
+        <label>Size</label>
+        <SizeSelector v-model="selectedSize" :sizes="product.sizes" />
+      </div>
+      <GlassButton :is-disabled="!selectedSize" @click="handleAddToCart">{{ isAdded ? 'Added!' : 'Add to Cart' }}</GlassButton>
+    </div>
+  </div>
+  <div v-else class="not-found"><h2>Product not found</h2><router-link to="/">Back to shop</router-link></div>
+</template>
+
+<style scoped>
+.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
+@media (max-width: 768px) { .product-detail { grid-template-columns: 1fr; gap: 1.5rem; } }
+.product-image { aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-tertiary); }
+.product-image img { width: 100%; height: 100%; object-fit: cover; }
+.placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 5rem; font-weight: 700; color: var(--text-placeholder); }
+.category { text-transform: uppercase; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; color: var(--accent); }
+h1 { font-size: 2rem; font-weight: 700; margin: 0.25rem 0 0.75rem; }
+.price { font-size: 1.25rem; }
+.description { color: var(--text-secondary); margin: 1.25rem 0; line-height: 1.7; }
+.size-section { margin-bottom: 1.5rem; }
+.size-section label { display: block; font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-secondary); }
+.not-found { text-align: center; padding: 4rem 0; }
+.not-found a { color: var(--accent); }
+</style>

src/views/admin/AdminLoginView.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAdmin } from '@/composables/useAdmin'
+import GlassInput from '@/components/ui/GlassInput.vue'
+import GlassButton from '@/components/ui/GlassButton.vue'
+
+const router = useRouter()
+const { login, isLoading } = useAdmin()
+const password = ref('')
+const errorMessage = ref('')
+
+async function handleLogin() {
+  errorMessage.value = ''
+  const success = await login(password.value)
+  if (success) { router.push({ name: 'admin-orders' }) }
+  else { errorMessage.value = 'Invalid password'; password.value = '' }
+}
+</script>
+
+<template>
+  <div class="login-page">
+    <form class="login-form glass-card" @submit.prevent="handleLogin">
+      <h1>Admin</h1>
+      <div class="field"><GlassInput v-model="password" type="password" placeholder="Password" is-required /></div>
+      <div v-if="errorMessage" class="error">{{ errorMessage }}</div>
+      <GlassButton :is-disabled="isLoading || !password" class="login-btn">{{ isLoading ? 'Signing in...' : 'Sign In' }}</GlassButton>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.login-page { min-height: 80vh; display: flex; align-items: center; justify-content: center; }
+.login-form { width: 100%; max-width: 360px; text-align: center; }
+h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
+.field { margin-bottom: 1rem; }
+.error { color: var(--error); font-size: 0.8125rem; margin-bottom: 1rem; }
+.login-btn { width: 100%; }
+</style>

src/views/admin/OrderDetailView.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { api } from '@/api/client'
+import type { Order, OrderEvent, OrderStatus, ShippingAddress } from '@shared/types'
+import StatusBadge from '@/components/ui/StatusBadge.vue'
+import SatsDisplay from '@/components/ui/SatsDisplay.vue'
+import GlassButton from '@/components/ui/GlassButton.vue'
+import GlassInput from '@/components/ui/GlassInput.vue'
+import LoadingSpinner from '@/components/ui/LoadingSpinner.vue'
+
+const route = useRoute()
+type AdminOrder = Order & { shippingAddress: ShippingAddress | null; events: OrderEvent[] }
+const order = ref<AdminOrder | null>(null)
+const isLoading = ref(true)
+const newStatus = ref<OrderStatus>('confirmed')
+const statusNote = ref('')
+const isUpdating = ref(false)
+const statuses: OrderStatus[] = ['pending', 'paid', 'confirmed', 'shipped', 'delivered', 'cancelled']
+
+onMounted(async () => {
+  try {
+    const res = await api.get(`/api/admin/orders/${route.params.id}`)
+    if (res.ok) order.value = await api.json<AdminOrder>(res)
+  } finally { isLoading.value = false }
+})
+
+async function updateStatus() {
+  if (!order.value) return
+  isUpdating.value = true
+  try {
+    const res = await api.patch(`/api/admin/orders/${order.value.id}/status`, { status: newStatus.value, note: statusNote.value || undefined })
+    if (res.ok) {
+      order.value.status = newStatus.value
+      order.value.events.push({ id: Date.now(), orderId: order.value.id, status: newStatus.value, note: statusNote.value || null, createdAt: new Date().toISOString() })
+      statusNote.value = ''
+    }
+  } finally { isUpdating.value = false }
+}
+</script>
+
+<template>
+  <div>
+    <router-link :to="{ name: 'admin-orders' }" class="back-link">&larr; Orders</router-link>
+    <LoadingSpinner v-if="isLoading" />
+    <div v-else-if="order" class="order-detail">
+      <div class="detail-header"><h1>Order <code>{{ order.id }}</code></h1><StatusBadge :status="order.status" /></div>
+      <div class="detail-grid">
+        <section class="glass-card">
+          <h3>Items</h3>
+          <div v-for="item in order.items" :key="item.productId + item.size" class="line-item"><span>{{ item.productName }} ({{ item.size }}) x{{ item.quantity }}</span><SatsDisplay :sats="item.priceSats * item.quantity" /></div>
+          <div class="total-row"><span>Total</span><SatsDisplay :sats="order.totalSats" /></div>
+        </section>
+        <section class="glass-card">
+          <h3>Shipping Address</h3>
+          <div v-if="order.shippingAddress" class="address">
+            <p>{{ order.shippingAddress.name }}</p><p>{{ order.shippingAddress.line1 }}</p>
+            <p v-if="order.shippingAddress.line2">{{ order.shippingAddress.line2 }}</p>
+            <p>{{ order.shippingAddress.city }}<span v-if="order.shippingAddress.state">, {{ order.shippingAddress.state }}</span> {{ order.shippingAddress.postalCode }}</p>
+            <p>{{ order.shippingAddress.country }}</p>
+          </div>
+          <p v-else class="muted">Address could not be decrypted</p>
+        </section>
+        <section class="glass-card">
+          <h3>Contact</h3>
+          <div class="contact-info">
+            <div v-if="order.email" class="contact-row"><span class="contact-label">Email</span><span>{{ order.email }}</span></div>
+            <div v-if="order.nostrPubkey" class="contact-row"><span class="contact-label">Nostr</span><code class="pubkey">{{ order.nostrPubkey.slice(0, 16) }}...</code></div>
+            <p v-if="!order.email && !order.nostrPubkey" class="muted">No contact info provided</p>
+          </div>
+        </section>
+        <section class="glass-card">
+          <h3>Update Status</h3>
+          <div class="status-form">
+            <select v-model="newStatus" class="glass-input"><option v-for="s in statuses" :key="s" :value="s">{{ s }}</option></select>
+            <GlassInput v-model="statusNote" placeholder="Note (optional)" />
+            <GlassButton :is-disabled="isUpdating" @click="updateStatus">{{ isUpdating ? 'Updating...' : 'Update Status' }}</GlassButton>
+          </div>
+        </section>
+        <section v-if="order.events.length" class="glass-card full-width">
+          <h3>Timeline</h3>
+          <div v-for="event in order.events" :key="event.id" class="event-row">
+            <StatusBadge :status="event.status" />
+            <span v-if="event.note" class="event-note">{{ event.note }}</span>
+            <time class="event-time">{{ new Date(event.createdAt).toLocaleString() }}</time>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.back-link { color: var(--text-muted); text-decoration: none; font-size: 0.8125rem; display: inline-block; margin-bottom: 1rem; }
+.back-link:hover { color: var(--text-primary); }
+.detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
+h1 { font-size: 1.25rem; font-weight: 700; }
+h1 code { color: var(--accent); font-size: 0.875rem; }
+h3 { font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.75rem; }
+.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
+.full-width { grid-column: 1 / -1; }
+.line-item { display: flex; justify-content: space-between; font-size: 0.8125rem; padding: 0.25rem 0; color: var(--text-secondary); }
+.total-row { display: flex; justify-content: space-between; border-top: 1px solid var(--glass-border); margin-top: 0.5rem; padding-top: 0.5rem; font-weight: 600; }
+.address p { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; }
+.muted { color: var(--text-muted); font-size: 0.8125rem; }
+.contact-row { display: flex; gap: 0.75rem; font-size: 0.875rem; padding: 0.25rem 0; }
+.contact-label { color: var(--text-muted); min-width: 60px; }
+.pubkey { font-size: 0.75rem; color: var(--accent); }
+.status-form { display: flex; flex-direction: column; gap: 0.75rem; }
+.status-form select { text-transform: capitalize; }
+.event-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--glass-border); }
+.event-row:last-child { border-bottom: none; }
+.event-note { flex: 1; font-size: 0.8125rem; color: var(--text-secondary); }
+.event-time { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
+</style>

src/views/admin/OrdersView.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { api } from '@/api/client'
+import type { Order, OrderStatus } from '@shared/types'
+import StatusBadge from '@/components/ui/StatusBadge.vue'
+import SatsDisplay from '@/components/ui/SatsDisplay.vue'
+import LoadingSpinner from '@/components/ui/LoadingSpinner.vue'
+
+const orders = ref<Order[]>([])
+const isLoading = ref(true)
+const filterStatus = ref<OrderStatus | ''>('')
+const statuses: OrderStatus[] = ['pending', 'paid', 'confirmed', 'shipped', 'delivered', 'cancelled']
+
+const filtered = computed(() => {
+  if (!filterStatus.value) return orders.value
+  return orders.value.filter((o) => o.status === filterStatus.value)
+})
+
+onMounted(async () => {
+  try {
+    const res = await api.get('/api/admin/orders')
+    if (res.ok) orders.value = await api.json<Order[]>(res)
+  } finally { isLoading.value = false }
+})
+</script>
+
+<template>
+  <div>
+    <div class="page-header">
+      <h1>Orders</h1>
+      <select v-model="filterStatus" class="glass-input filter-select">
+        <option value="">All statuses</option>
+        <option v-for="s in statuses" :key="s" :value="s">{{ s }}</option>
+      </select>
+    </div>
+    <LoadingSpinner v-if="isLoading" />
+    <div v-else-if="filtered.length === 0" class="empty">No orders found.</div>
+    <table v-else class="orders-table">
+      <thead><tr><th>Order</th><th>Status</th><th>Items</th><th>Total</th><th>Date</th></tr></thead>
+      <tbody>
+        <tr v-for="order in filtered" :key="order.id" class="order-row" @click="$router.push({ name: 'admin-order', params: { id: order.id } })">
+          <td><code class="order-id">{{ order.id.slice(0, 10) }}...</code></td>
+          <td><StatusBadge :status="order.status" /></td>
+          <td>{{ order.items.reduce((s, i) => s + i.quantity, 0) }}</td>
+          <td><SatsDisplay :sats="order.totalSats" /></td>
+          <td class="date">{{ new Date(order.createdAt).toLocaleDateString() }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
+h1 { font-size: 1.5rem; font-weight: 700; }
+.filter-select { width: auto; min-width: 160px; text-transform: capitalize; }
+.empty { color: var(--text-muted); text-align: center; padding: 3rem 0; }
+.orders-table { width: 100%; border-collapse: collapse; }
+.orders-table th { text-align: left; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 0.75rem 1rem; border-bottom: 1px solid var(--glass-border); }
+.orders-table td { padding: 0.75rem 1rem; font-size: 0.875rem; border-bottom: 1px solid var(--glass-border); }
+.order-row { cursor: pointer; transition: background var(--transition-fast); }
+.order-row:hover { background: var(--glass-bg); }
+.order-id { font-size: 0.8125rem; color: var(--accent); }
+.date { color: var(--text-muted); font-size: 0.8125rem; }
+</style>

src/views/admin/ProductFormView.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { api } from '@/api/client'
+import type { Product, SizeStock, ApiError } from '@shared/types'
+import GlassInput from '@/components/ui/GlassInput.vue'
+import GlassButton from '@/components/ui/GlassButton.vue'
+import LoadingSpinner from '@/components/ui/LoadingSpinner.vue'
+
+const route = useRoute()
+const router = useRouter()
+const isEdit = computed(() => route.name === 'admin-product-edit')
+const isLoading = ref(false)
+const isSaving = ref(false)
+const errorMessage = ref('')
+const name = ref('')
+const slug = ref('')
+const description = ref('')
+const priceSats = ref(0)
+const category = ref('general')
+const sizes = ref<SizeStock[]>([{ size: 'S', stock: 0 }, { size: 'M', stock: 0 }, { size: 'L', stock: 0 }, { size: 'XL', stock: 0 }])
+
+onMounted(async () => {
+  if (isEdit.value && route.params.id) {
+    isLoading.value = true
+    try {
+      const res = await api.get(`/api/admin/products`)
+      if (res.ok) {
+        const products = await api.json<Product[]>(res)
+        const product = products.find((p) => p.id === route.params.id)
+        if (product) { name.value = product.name; slug.value = product.slug; description.value = product.description; priceSats.value = product.priceSats; category.value = product.category; sizes.value = product.sizes }
+      }
+    } finally { isLoading.value = false }
+  }
+})
+
+function addSize() { sizes.value.push({ size: '', stock: 0 }) }
+function removeSize(index: number) { sizes.value.splice(index, 1) }
+function autoSlug() { if (!isEdit.value) slug.value = name.value.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') }
+
+async function handleSave() {
+  isSaving.value = true; errorMessage.value = ''
+  const data = { name: name.value, slug: slug.value, description: description.value, priceSats: priceSats.value, category: category.value, sizes: sizes.value, images: [] }
+  try {
+    const res = isEdit.value ? await api.put(`/api/admin/products/${route.params.id}`, data) : await api.post('/api/admin/products', data)
+    if (res.ok) router.push({ name: 'admin-products' })
+    else { const err = await api.json<ApiError>(res); errorMessage.value = err.error.message }
+  } catch { errorMessage.value = 'Failed to save product' }
+  finally { isSaving.value = false }
+}
+</script>
+
+<template>
+  <div>
+    <router-link :to="{ name: 'admin-products' }" class="back-link">&larr; Products</router-link>
+    <h1>{{ isEdit ? 'Edit Product' : 'New Product' }}</h1>
+    <LoadingSpinner v-if="isLoading" />
+    <form v-else class="product-form" @submit.prevent="handleSave">
+      <div class="form-grid">
+        <div class="field"><label>Name</label><GlassInput v-model="name" placeholder="Product name" is-required @blur="autoSlug" /></div>
+        <div class="field"><label>Slug</label><GlassInput v-model="slug" placeholder="url-friendly-name" is-required /></div>
+        <div class="field"><label>Price (sats)</label><input v-model.number="priceSats" type="number" min="1" step="1" class="glass-input" required /></div>
+        <div class="field"><label>Category</label><GlassInput v-model="category" placeholder="e.g. tops, bottoms, accessories" /></div>
+      </div>
+      <div class="field"><label>Description</label><textarea v-model="description" class="glass-input" rows="4" placeholder="Product description..." /></div>
+      <div class="field">
+        <div class="sizes-header"><label>Sizes & Stock</label><button type="button" class="add-size-btn" @click="addSize">+ Add Size</button></div>
+        <div v-for="(s, i) in sizes" :key="i" class="size-row">
+          <input v-model="s.size" class="glass-input size-input" placeholder="Size" />
+          <input v-model.number="s.stock" type="number" min="0" step="1" class="glass-input stock-input" placeholder="Stock" />
+          <button type="button" class="remove-btn" @click="removeSize(i)">x</button>
+        </div>
+      </div>
+      <div v-if="errorMessage" class="error">{{ errorMessage }}</div>
+      <GlassButton :is-disabled="isSaving">{{ isSaving ? 'Saving...' : (isEdit ? 'Update Product' : 'Create Product') }}</GlassButton>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.back-link { color: var(--text-muted); text-decoration: none; font-size: 0.8125rem; display: inline-block; margin-bottom: 1rem; }
+.back-link:hover { color: var(--text-primary); }
+h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
+.product-form { max-width: 640px; }
+.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
+.field { margin-bottom: 1rem; }
+.field label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.375rem; }
+.field textarea { resize: vertical; font-family: inherit; }
+.sizes-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.375rem; }
+.add-size-btn { background: none; border: none; color: var(--accent); font-size: 0.8125rem; cursor: pointer; }
+.size-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; }
+.size-input { flex: 1; }
+.stock-input { width: 100px; }
+.remove-btn { background: none; border: none; color: var(--error); cursor: pointer; font-size: 1rem; padding: 0.25rem 0.5rem; }
+.error { color: var(--error); font-size: 0.8125rem; margin-bottom: 1rem; }
+</style>

src/views/admin/ProductsView.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { api } from '@/api/client'
+import type { Product } from '@shared/types'
+import SatsDisplay from '@/components/ui/SatsDisplay.vue'
+import GlassButton from '@/components/ui/GlassButton.vue'
+import LoadingSpinner from '@/components/ui/LoadingSpinner.vue'
+
+const products = ref<Product[]>([])
+const isLoading = ref(true)
+
+onMounted(async () => {
+  try {
+    const res = await api.get('/api/admin/products')
+    if (res.ok) products.value = await api.json<Product[]>(res)
+  } finally { isLoading.value = false }
+})
+
+async function toggleActive(product: Product) {
+  const res = await api.put(`/api/admin/products/${product.id}`, { isActive: !product.isActive })
+  if (res.ok) product.isActive = !product.isActive
+}
+</script>
+
+<template>
+  <div>
+    <div class="page-header">
+      <h1>Products</h1>
+      <router-link :to="{ name: 'admin-product-new' }"><GlassButton>Add Product</GlassButton></router-link>
+    </div>
+    <LoadingSpinner v-if="isLoading" />
+    <table v-else class="products-table">
+      <thead><tr><th>Name</th><th>Category</th><th>Price</th><th>Stock</th><th>Active</th><th></th></tr></thead>
+      <tbody>
+        <tr v-for="product in products" :key="product.id" :class="{ inactive: !product.isActive }">
+          <td class="product-name">{{ product.name }}</td>
+          <td class="category">{{ product.category }}</td>
+          <td><SatsDisplay :sats="product.priceSats" /></td>
+          <td>{{ product.sizes.reduce((s, sz) => s + sz.stock, 0) }}</td>
+          <td><button class="toggle-btn" @click="toggleActive(product)">{{ product.isActive ? 'Active' : 'Hidden' }}</button></td>
+          <td><router-link :to="{ name: 'admin-product-edit', params: { id: product.id } }" class="edit-link">Edit</router-link></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
+h1 { font-size: 1.5rem; font-weight: 700; }
+.products-table { width: 100%; border-collapse: collapse; }
+.products-table th { text-align: left; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 0.75rem 1rem; border-bottom: 1px solid var(--glass-border); }
+.products-table td { padding: 0.75rem 1rem; font-size: 0.875rem; border-bottom: 1px solid var(--glass-border); }
+.inactive { opacity: 0.5; }
+.product-name { font-weight: 600; }
+.category { text-transform: capitalize; color: var(--text-muted); }
+.toggle-btn { background: none; border: none; color: var(--text-secondary); font-size: 0.8125rem; cursor: pointer; }
+.toggle-btn:hover { color: var(--accent); }
+.edit-link { color: var(--accent); font-size: 0.8125rem; text-decoration: none; }
+.edit-link:hover { text-decoration: underline; }
+</style>