@weft-js/create 0.1.0 → 0.1.2

package/templates/admin/files/src/server/orders.ts

@@ -0,0 +1,193 @@
+import { mutation, query } from '@weft-js/start'
+import { and, asc, count, desc, eq, ilike, inArray, sql } from 'drizzle-orm'
+import { z } from 'zod'
+import { customers, orderItems, orders, products } from '#/db/schema'
+import { PAGE_SIZE, sortKeys, statuses } from '#/lib/orders'
+
+const status = z.enum(statuses)
+const sortColumns = {
+  id: orders.id,
+  customer: customers.name,
+  status: orders.status,
+  total: orders.totalCents,
+  created: orders.createdAt,
+}
+const like = (text: string) => `%${text.replace(/[\\%_]/g, '\\$&')}%`
+
+const listed = {
+  id: orders.id,
+  customer: customers.name,
+  status: orders.status,
+  totalCents: orders.totalCents,
+  createdAt: orders.createdAt,
+}
+const orderView = z.object({
+  page: z.number().int().min(1),
+  sort: z.enum(sortKeys),
+  dir: z.enum(['asc', 'desc']),
+  status: status.or(z.literal('')),
+  q: z.string().max(100),
+})
+
+const onTheWire = <T extends { createdAt: Date }>(row: T) => ({
+  ...row,
+  createdAt: row.createdAt.toISOString(),
+})
+
+export type OrderRow = ReturnType<
+  typeof onTheWire<{
+    id: number
+    customer: string
+    status: string
+    totalCents: number
+    createdAt: Date
+  }>
+>
+
+// Aggregates over every order: worth keeping for a minute, and a status change clears them through the tag.
+export const storeStats = query({
+  tags: ['orders', 'customers'],
+  auth: 'user',
+  cache: { life: 'minutes', scope: 'user' },
+  run: async ({ ctx }) => {
+    const [[sales], customerCount] = await Promise.all([
+      ctx.db
+        .select({
+          revenue:
+            sql<number>`coalesce(sum(${orders.totalCents}) filter (where ${orders.status} <> 'refunded'), 0)`.mapWith(
+              Number,
+            ),
+          refunded:
+            sql<number>`coalesce(sum(${orders.totalCents}) filter (where ${orders.status} = 'refunded'), 0)`.mapWith(
+              Number,
+            ),
+          orders: count(),
+        })
+        .from(orders),
+      ctx.db.$count(customers),
+    ])
+    return { ...sales!, customers: customerCount }
+  },
+})
+
+export const revenueByMonth = query({
+  tags: ['orders'],
+  auth: 'user',
+  cache: { life: 'minutes', scope: 'user' },
+  run: async ({ ctx }) => {
+    const month = sql`date_trunc('month', ${orders.createdAt} at time zone 'UTC')`
+    const rows = await ctx.db
+      .select({
+        month: sql<string>`to_char(${month}, 'Mon YYYY')`,
+        cents: sql<number>`sum(${orders.totalCents})`.mapWith(Number),
+      })
+      .from(orders)
+      .where(sql`${orders.status} <> 'refunded'`)
+      .groupBy(month)
+      .orderBy(desc(month))
+      .limit(12)
+    return rows.reverse().map((row) => ({ month: row.month, revenue: row.cents / 100 }))
+  },
+})
+
+export const latestOrders = query({
+  tags: ['orders', 'customers'],
+  auth: 'user',
+  run: async ({ ctx }) => {
+    const rows = await ctx.db
+      .select(listed)
+      .from(orders)
+      .innerJoin(customers, eq(customers.id, orders.customerId))
+      .orderBy(desc(orders.createdAt), desc(orders.id))
+      .limit(10)
+    return rows.map(onTheWire)
+  },
+})
+
+export const listOrders = query({
+  input: orderView,
+  tags: ['orders', 'customers'],
+  auth: 'user',
+  run: async ({ input, ctx }) => {
+    const where = and(
+      input.status ? eq(orders.status, input.status) : undefined,
+      input.q ? ilike(customers.name, like(input.q)) : undefined,
+    )
+    const direction = input.dir === 'asc' ? asc : desc
+    const [rows, [found]] = await Promise.all([
+      ctx.db
+        .select(listed)
+        .from(orders)
+        .innerJoin(customers, eq(customers.id, orders.customerId))
+        .where(where)
+        .orderBy(direction(sortColumns[input.sort]), direction(orders.id))
+        .limit(PAGE_SIZE)
+        .offset((input.page - 1) * PAGE_SIZE),
+      input.q
+        ? ctx.db
+            .select({ total: count() })
+            .from(orders)
+            .innerJoin(customers, eq(customers.id, orders.customerId))
+            .where(where)
+        : ctx.db.select({ total: count() }).from(orders).where(where),
+    ])
+    return { rows: rows.map(onTheWire), total: found!.total }
+  },
+})
+
+export const getOrder = query({
+  input: z.object({ id: z.number().int().positive() }),
+  tags: ['orders', 'customers', 'order_items', 'products'],
+  auth: 'user',
+  run: async ({ input, ctx }) => {
+    const [[order], items] = await Promise.all([
+      ctx.db
+        .select({ ...listed, email: customers.email, city: customers.city })
+        .from(orders)
+        .innerJoin(customers, eq(customers.id, orders.customerId))
+        .where(eq(orders.id, input.id)),
+      ctx.db
+        .select({
+          id: orderItems.id,
+          product: products.name,
+          quantity: orderItems.quantity,
+          priceCents: orderItems.priceCents,
+        })
+        .from(orderItems)
+        .innerJoin(products, eq(products.id, orderItems.productId))
+        .where(eq(orderItems.orderId, input.id))
+        .orderBy(asc(orderItems.id)),
+    ])
+    return order ? { ...onTheWire(order), items } : null
+  },
+})
+
+export const setOrderStatus = mutation({
+  input: z.object({ id: z.number().int().positive(), status }),
+  auth: 'user',
+  invalidates: ['orders'],
+  optimistic: ({ input }, cache) =>
+    cache.update(getOrder, { id: input.id }, (order) => {
+      if (order) order.status = input.status
+    }),
+  run: async ({ input, ctx }) => {
+    await ctx.db.update(orders).set({ status: input.status }).where(eq(orders.id, input.id))
+  },
+})
+
+export const markShipped = mutation({
+  // `view` names the list on screen, for the optimistic update; the server only reads `ids`.
+  input: z.object({
+    ids: z.array(z.number().int().positive()).min(1).max(PAGE_SIZE),
+    view: orderView,
+  }),
+  auth: 'user',
+  invalidates: ['orders'],
+  optimistic: ({ input }, cache) =>
+    cache.update(listOrders, input.view, (list) => {
+      for (const row of list.rows) if (input.ids.includes(row.id)) row.status = 'shipped'
+    }),
+  run: async ({ input, ctx }) => {
+    await ctx.db.update(orders).set({ status: 'shipped' }).where(inArray(orders.id, input.ids))
+  },
+})

package/templates/admin/files/src/server/reports.ts

@@ -0,0 +1,92 @@
+import { query } from '@weft-js/start'
+import { count, desc, eq, sql } from 'drizzle-orm'
+import { z } from 'zod'
+import { customers, orders } from '#/db/schema'
+
+const revenue = sql<number>`coalesce(sum(${orders.totalCents}), 0)`.mapWith(Number)
+
+/** The whole store, for the band above the regions. */
+export const reach = query({
+  tags: ['customers'],
+  auth: 'user',
+  run: async ({ ctx }) => {
+    const [row] = await ctx.db
+      .select({
+        customers: count(),
+        cities: sql<number>`count(distinct ${customers.city})`.mapWith(Number),
+      })
+      .from(customers)
+    return row!
+  },
+})
+
+export const topCities = query({
+  tags: ['orders', 'customers'],
+  auth: 'user',
+  run: ({ ctx }) =>
+    ctx.db
+      .select({ city: customers.city, orders: count(), revenue })
+      .from(orders)
+      .innerJoin(customers, eq(customers.id, orders.customerId))
+      .groupBy(customers.city)
+      .orderBy(desc(revenue)),
+})
+
+export const biggestCustomers = query({
+  tags: ['orders', 'customers'],
+  auth: 'user',
+  run: ({ ctx }) =>
+    ctx.db
+      .select({ id: customers.id, name: customers.name, city: customers.city, revenue })
+      .from(orders)
+      .innerJoin(customers, eq(customers.id, orders.customerId))
+      .groupBy(customers.id)
+      .orderBy(desc(revenue))
+      .limit(5),
+})
+
+export const recentOrderIds = query({
+  tags: ['orders'],
+  auth: 'user',
+  run: async ({ ctx }) => {
+    const rows = await ctx.db
+      .select({
+        id: orders.id,
+        customerId: orders.customerId,
+        status: orders.status,
+        totalCents: orders.totalCents,
+        createdAt: orders.createdAt,
+      })
+      .from(orders)
+      .orderBy(desc(orders.createdAt), desc(orders.id))
+      .limit(50)
+    return rows.map((row) => ({ ...row, createdAt: row.createdAt.toISOString() }))
+  },
+})
+
+export const getCustomer = query({
+  input: z.object({ id: z.number().int().positive() }),
+  tags: ['customers'],
+  auth: 'user',
+  run: async ({ input, ctx }) => {
+    const [customer] = await ctx.db
+      .select({ name: customers.name, city: customers.city })
+      .from(customers)
+      .where(eq(customers.id, input.id))
+    return customer ?? null
+  },
+})
+
+// The year's books take a while to add up.
+export const yearReport = query({
+  tags: ['orders'],
+  auth: 'user',
+  run: async ({ ctx }) => {
+    await ctx.db.execute(sql`select pg_sleep(2)`)
+    return ctx.db
+      .select({ status: orders.status, orders: count(), revenue })
+      .from(orders)
+      .groupBy(orders.status)
+      .orderBy(desc(revenue))
+  },
+})

package/templates/admin/files/src/server/session.ts

@@ -0,0 +1,42 @@
+import { mutation, query, redirect } from '@weft-js/start'
+import { forward } from '@weft-js/start/auth'
+import { z } from 'zod'
+import auth from '#/auth.server'
+
+const credentials = z.object({ email: z.email(), password: z.string().min(8) })
+
+/** Who is signed in, or null. */
+export const me = query({
+  tags: ['session'],
+  run: ({ ctx }) =>
+    ctx.user ? { id: ctx.user.id, name: ctx.user.name, email: ctx.user.email } : null,
+})
+
+export const signUp = mutation({
+  input: credentials.extend({ name: z.string().trim().min(1) }),
+  run: async ({ input, ctx }) => {
+    await forward(
+      ctx,
+      auth.api.signUpEmail({ body: input, headers: ctx.request.headers, asResponse: true }),
+    )
+    redirect('/admin')
+  },
+})
+
+export const signIn = mutation({
+  input: credentials,
+  run: async ({ input, ctx }) => {
+    await forward(
+      ctx,
+      auth.api.signInEmail({ body: input, headers: ctx.request.headers, asResponse: true }),
+    )
+    redirect('/admin')
+  },
+})
+
+export const signOut = mutation({
+  run: async ({ ctx }) => {
+    await forward(ctx, auth.api.signOut({ headers: ctx.request.headers, asResponse: true }))
+    redirect('/login')
+  },
+})

package/templates/admin/files/src/theme.css

@@ -0,0 +1,43 @@
+/*
+ * Backroom's own CSS, over warp's tokens. The indigo, the cool greys, the compact density and the soft corners are warp()
+ * options in weft.config.ts; this file is the layout of the pages and the tabular figures. Change those options first.
+ */
+body { margin: 0; }
+
+/* AuthScreen fills its parent, and here its parent is the page */
+[data-scope="auth"], [data-scope="auth"] > [data-part="layout"] { min-block-size: 100dvh; }
+
+/* the brand panel only shows from 1000 up, so narrower pages carry the name themselves */
+.auth-mark { display: flex; align-items: center; gap: var(--warp-space-tight); font-weight: var(--warp-text-heading-weight); }
+@container auth (min-width: 1000px) { .auth-mark { display: none; } }
+
+.logo { display: block; inline-size: 1.5rem; block-size: 1.5rem; flex: none; }
+
+.form-error { margin: 0; color: var(--warp-color-critical-text); font-size: var(--warp-text-caption-size); }
+.form-error:empty { display: none; }
+
+.page {
+  inline-size: 100%;
+  max-inline-size: 76rem;
+  margin-inline: auto;
+  padding-block: var(--warp-space-group) var(--warp-space-page);
+}
+
+.flow { display: grid; gap: var(--warp-space-group); }
+
+.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--warp-space-related); }
+
+.stat { font-variant-numeric: tabular-nums; }
+
+/* the status words are lower case in the data and the select: this is only how they read */
+[data-scope="badge"], .filters option, [data-scope="field"] select { text-transform: capitalize; }
+
+[data-scope="table"] { font-variant-numeric: tabular-nums; }
+
+.filters { display: grid; grid-template-columns: minmax(0, 24rem) minmax(9rem, 12rem); gap: var(--warp-space-related); align-items: end; }
+@media (max-width: 560px) { .filters { grid-template-columns: 1fr; } }
+
+.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--warp-space-related); }
+.pager [aria-disabled="true"] { color: var(--warp-color-text-subtle); }
+
+.system-page { display: grid; place-items: center; min-block-size: 100dvh; background: var(--warp-color-page); }

package/templates/admin/files/weft.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig } from '@weft-js/core/config'
+import { warp } from '@weft-js/warp/plugin'
+
+export default defineConfig({
+  site: {
+    name: 'Backroom',
+    locale: 'en_US',
+    title: '%s · Backroom',
+    description: 'Backroom is where you run the shop: orders, customers and revenue in one place.',
+    head: '<link rel="icon" href="/favicon.svg" type="image/svg+xml">',
+  },
+  plugins: [
+    warp({
+      seed: { accent: '#4f46e5' },
+      dials: { expression: 'balanced', density: 'compact' },
+      radius: 'soft',
+      fields: 'classic',
+      fonts: {
+        display: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
+        body: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
+        mono: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace',
+      },
+      tokens: {
+        '--warp-color-page': 'light-dark(#eceef5, #0e1020)',
+        '--warp-color-surface': 'light-dark(#fbfbfe, #161a2e)',
+        '--warp-color-surface-raised': 'light-dark(#ffffff, #1b2036)',
+        '--warp-color-surface-sunken': 'light-dark(#f1f2f8, #0a0c18)',
+      },
+    }),
+  ],
+})

package/templates/admin/template.json

@@ -0,0 +1,22 @@
+{
+  "requires": { "db": "postgres", "auth": true },
+  "pages": ["/", "/login", "/signup", "/admin", "/admin/orders", "/admin/orders/[id]", "/admin/nested", "/admin/per-row", "/admin/slow"],
+  "dependencies": { "@weft-js/warp-icons": "0.0.0" },
+  "warp": {
+    "seed": { "accent": "#4f46e5" },
+    "dials": { "expression": "balanced", "density": "compact" },
+    "radius": "soft",
+    "fields": "classic",
+    "fonts": {
+      "display": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
+      "body": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
+      "mono": "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace"
+    },
+    "tokens": {
+      "--warp-color-page": "light-dark(#eceef5, #0e1020)",
+      "--warp-color-surface": "light-dark(#fbfbfe, #161a2e)",
+      "--warp-color-surface-raised": "light-dark(#ffffff, #1b2036)",
+      "--warp-color-surface-sunken": "light-dark(#f1f2f8, #0a0c18)"
+    }
+  }
+}

package/templates/catalog/files/drizzle/.schema-hash

@@ -0,0 +1 @@
+811665ce6d284c37

package/templates/catalog/files/drizzle/0000_catalog.sql

@@ -0,0 +1,47 @@
+CREATE TABLE IF NOT EXISTS "cart_items" (
+	"cart_id" uuid NOT NULL,
+	"product_id" integer NOT NULL,
+	"quantity" integer NOT NULL,
+	CONSTRAINT "cart_items_cart_id_product_id_pk" PRIMARY KEY("cart_id","product_id")
+);
+--> statement-breakpoint
+CREATE TABLE IF NOT EXISTS "carts" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE IF NOT EXISTS "categories" (
+	"id" serial PRIMARY KEY NOT NULL,
+	"slug" text NOT NULL,
+	"name" text NOT NULL,
+	CONSTRAINT "categories_slug_unique" UNIQUE("slug")
+);
+--> statement-breakpoint
+CREATE TABLE IF NOT EXISTS "products" (
+	"id" serial PRIMARY KEY NOT NULL,
+	"slug" text NOT NULL,
+	"name" text NOT NULL,
+	"description" text NOT NULL,
+	"category_id" integer NOT NULL,
+	"price_cents" integer NOT NULL,
+	"stock" integer NOT NULL,
+	"featured" boolean DEFAULT false NOT NULL,
+	CONSTRAINT "products_slug_unique" UNIQUE("slug")
+);
+--> statement-breakpoint
+DO $$ BEGIN
+  IF NOT EXISTS (SELECT 1 FROM pg_constraint c JOIN pg_attribute a ON a.attrelid = c.conrelid AND a.attnum = c.conkey[1] WHERE c.conrelid = '"cart_items"'::regclass AND c.contype = 'f' AND a.attname = 'cart_id') THEN
+    ALTER TABLE "cart_items" ADD CONSTRAINT "cart_items_cart_id_carts_id_fk" FOREIGN KEY ("cart_id") REFERENCES "public"."carts"("id") ON DELETE cascade ON UPDATE no action;
+  END IF;
+END $$;--> statement-breakpoint
+DO $$ BEGIN
+  IF NOT EXISTS (SELECT 1 FROM pg_constraint c JOIN pg_attribute a ON a.attrelid = c.conrelid AND a.attnum = c.conkey[1] WHERE c.conrelid = '"cart_items"'::regclass AND c.contype = 'f' AND a.attname = 'product_id') THEN
+    ALTER TABLE "cart_items" ADD CONSTRAINT "cart_items_product_id_products_id_fk" FOREIGN KEY ("product_id") REFERENCES "public"."products"("id") ON DELETE no action ON UPDATE no action;
+  END IF;
+END $$;--> statement-breakpoint
+DO $$ BEGIN
+  IF NOT EXISTS (SELECT 1 FROM pg_constraint c JOIN pg_attribute a ON a.attrelid = c.conrelid AND a.attnum = c.conkey[1] WHERE c.conrelid = '"products"'::regclass AND c.contype = 'f' AND a.attname = 'category_id') THEN
+    ALTER TABLE "products" ADD CONSTRAINT "products_category_id_categories_id_fk" FOREIGN KEY ("category_id") REFERENCES "public"."categories"("id") ON DELETE no action ON UPDATE no action;
+  END IF;
+END $$;--> statement-breakpoint
+CREATE INDEX IF NOT EXISTS "products_category" ON "products" USING btree ("category_id","price_cents","id");