feat(admin): add v2 products list (image-forward cards + filter chips + long-press stock adjust)
This commit is contained in:
Tyler
@@ -0,0 +1,224 @@
|
||||
import { getAdminUser } from "@/lib/admin-permissions";
|
||||
import { getActiveBrandId } from "@/lib/brand-scope";
|
||||
import { pool } from "@/lib/db";
|
||||
import PageHeader from "@/components/admin/PageHeader";
|
||||
import { CardList, CardListItem } from "@/components/admin/CardList";
|
||||
import StatusPill, { type StatusKind } from "@/components/admin/StatusPill";
|
||||
import EmptyState from "@/components/admin/EmptyState";
|
||||
import PullToRefresh from "@/components/admin/PullToRefresh";
|
||||
import ProductsFilterChips from "@/components/admin/products/ProductsFilterChips";
|
||||
import StockAdjustButton from "@/components/admin/products/StockAdjustButton";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/**
|
||||
* Row shape for the v2 products list. Mirrors the columns we actually
|
||||
* select from the `products` table — the plan's speculative shape used
|
||||
* `stock` / `image_url` / `price_cents` which is close, but the real
|
||||
* stock column is `inventory` (not `stock`), `image_url` and
|
||||
* `price_cents` are correct as-is, and there is no `hidden` field
|
||||
* (visibility is the boolean `active`).
|
||||
*/
|
||||
interface DbProductRow {
|
||||
id: string;
|
||||
name: string;
|
||||
price_cents: number;
|
||||
inventory: number;
|
||||
image_url: string | null;
|
||||
active: boolean;
|
||||
brand_id: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Map an inventory count onto the StatusPill vocabulary. Matches the
|
||||
* thresholds the v1 admin Products page uses (out = 0, low < 10, else in
|
||||
* stock). The `kind` doubles as a CSS-friendly token; the `label` is the
|
||||
* user-visible string (includes the count so the user can read it at
|
||||
* a glance in the field).
|
||||
*/
|
||||
function stockStatus(inventory: number): { kind: StatusKind; label: string } {
|
||||
if (inventory === 0) return { kind: "out", label: "Out of stock" };
|
||||
if (inventory < 10) return { kind: "low", label: `⚠ ${inventory} left` };
|
||||
return { kind: "in-stock", label: `${inventory} in stock` };
|
||||
}
|
||||
|
||||
/**
|
||||
* Build the inventory/active filter clause for a given `?filter=` value.
|
||||
*
|
||||
* - "all" → no filter
|
||||
* - "in-stock" → inventory >= 10
|
||||
* - "low" → 0 < inventory < 10
|
||||
* - "out" → inventory = 0
|
||||
* - "hidden" → active = false (no separate `hidden` column in the
|
||||
* schema — "hidden" maps to the legacy "inactive" state)
|
||||
* - unknown → same as "all" (defensive: don't 500 on a bad URL)
|
||||
*/
|
||||
function filterClause(filter: string | undefined): { sql: string; params: unknown[] } {
|
||||
switch (filter) {
|
||||
case "in-stock":
|
||||
return { sql: " AND inventory >= 10", params: [] };
|
||||
case "low":
|
||||
return { sql: " AND inventory > 0 AND inventory < 10", params: [] };
|
||||
case "out":
|
||||
return { sql: " AND inventory = 0", params: [] };
|
||||
case "hidden":
|
||||
return { sql: " AND active = false", params: [] };
|
||||
case "all":
|
||||
default:
|
||||
return { sql: "", params: [] };
|
||||
}
|
||||
}
|
||||
|
||||
export default async function ProductsV2Page({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{ filter?: string }>;
|
||||
}) {
|
||||
const adminUser = await getAdminUser();
|
||||
if (!adminUser) return null;
|
||||
|
||||
const activeBrandId = await getActiveBrandId(adminUser);
|
||||
const params = await searchParams;
|
||||
const filter = params.filter;
|
||||
const { sql: filterSql, params: filterParams } = filterClause(filter);
|
||||
|
||||
// Mirror the v2 stops page's brand-scoping pattern: explicit active
|
||||
// brand > platform_admin "all brands" > multi-brand membership list.
|
||||
let products: DbProductRow[] = [];
|
||||
let queryError: string | null = null;
|
||||
try {
|
||||
const selectFields = `
|
||||
id, name, price_cents, inventory, image_url, active, brand_id
|
||||
`;
|
||||
const orderBy = `name ASC`;
|
||||
|
||||
if (activeBrandId) {
|
||||
const result = await pool.query<DbProductRow>(
|
||||
`SELECT ${selectFields}
|
||||
FROM products
|
||||
WHERE brand_id = $1 ${filterSql}
|
||||
ORDER BY ${orderBy}
|
||||
LIMIT 200`,
|
||||
[activeBrandId, ...filterParams],
|
||||
);
|
||||
products = result.rows;
|
||||
} else if (adminUser.role === "platform_admin") {
|
||||
const result = await pool.query<DbProductRow>(
|
||||
`SELECT ${selectFields}
|
||||
FROM products
|
||||
WHERE 1=1 ${filterSql}
|
||||
ORDER BY ${orderBy}
|
||||
LIMIT 200`,
|
||||
[...filterParams],
|
||||
);
|
||||
products = result.rows;
|
||||
} else {
|
||||
const brandIds = adminUser.brand_ids ?? [];
|
||||
if (brandIds.length === 0) {
|
||||
products = [];
|
||||
} else {
|
||||
const result = await pool.query<DbProductRow>(
|
||||
`SELECT ${selectFields}
|
||||
FROM products
|
||||
WHERE brand_id = ANY($1::uuid[]) ${filterSql}
|
||||
ORDER BY ${orderBy}
|
||||
LIMIT 200`,
|
||||
[brandIds, ...filterParams],
|
||||
);
|
||||
products = result.rows;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
queryError = e instanceof Error ? e.message : String(e);
|
||||
console.error("[admin/v2/products] query error:", queryError);
|
||||
}
|
||||
|
||||
if (queryError) {
|
||||
return (
|
||||
<main>
|
||||
<PageHeader title="Products" />
|
||||
<ProductsFilterChips active={filter ?? "all"} />
|
||||
<div className="px-4 pb-24">
|
||||
<EmptyState
|
||||
title="Couldn't load products"
|
||||
description={queryError}
|
||||
icon={<span aria-hidden="true">⚠️</span>}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
if (products.length === 0) {
|
||||
return (
|
||||
<main>
|
||||
<PageHeader title="Products" />
|
||||
<ProductsFilterChips active={filter ?? "all"} />
|
||||
<PullToRefresh>
|
||||
<EmptyState
|
||||
title="No products"
|
||||
description="Add your first product to start selling."
|
||||
icon={<span aria-hidden="true">🥬</span>}
|
||||
/>
|
||||
</PullToRefresh>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main>
|
||||
<PageHeader
|
||||
title="Products"
|
||||
subtitle={`${products.length} product${products.length === 1 ? "" : "s"}`}
|
||||
/>
|
||||
<ProductsFilterChips active={filter ?? "all"} />
|
||||
<PullToRefresh>
|
||||
<CardList ariaLabel="Products">
|
||||
{products.map((product) => {
|
||||
const stock = stockStatus(product.inventory);
|
||||
// price_cents → display dollars, two decimals. The schema
|
||||
// stores integer cents, so the legacy `price` field (in
|
||||
// dollars) would be `price_cents / 100`.
|
||||
const priceDollars = (product.price_cents / 100).toFixed(2);
|
||||
return (
|
||||
<CardListItem key={product.id} href={`/admin/v2/products/${product.id}`}>
|
||||
<div className="flex items-start gap-3">
|
||||
{product.image_url ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element -- product
|
||||
// images may live on a third-party CDN; Next/Image
|
||||
// would require us to whitelist the host. A plain
|
||||
// <img> is fine here since this is a mobile-first
|
||||
// admin page, not a public storefront.
|
||||
<img
|
||||
src={product.image_url}
|
||||
alt=""
|
||||
className="w-16 h-16 rounded-2xl object-cover shrink-0"
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="w-16 h-16 rounded-2xl shrink-0 flex items-center justify-center"
|
||||
style={{ backgroundColor: "var(--color-surface-3)" }}
|
||||
aria-hidden="true"
|
||||
>
|
||||
🥬
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="text-h2" style={{ fontWeight: 700, lineHeight: 1.3 }}>{product.name}</div>
|
||||
<StockAdjustButton productId={product.id} currentStock={product.inventory} />
|
||||
</div>
|
||||
<div className="text-h1 font-display mt-1" style={{ fontWeight: 600 }}>${priceDollars}</div>
|
||||
<div className="mt-2">
|
||||
<StatusPill status={stock.kind} label={stock.label} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardListItem>
|
||||
);
|
||||
})}
|
||||
</CardList>
|
||||
</PullToRefresh>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
|
||||
/**
|
||||
* Filter chips for the v2 Products list.
|
||||
*
|
||||
* The plan's filter vocabulary was "all" | "in-stock" | "low" | "out" | "hidden".
|
||||
* The real `products` schema has no `stock` or `hidden` columns — stock is
|
||||
* stored in `inventory` and visibility in `active` (no separate "hidden" flag).
|
||||
* The mapping is:
|
||||
* - "all" → no filter
|
||||
* - "in-stock" → inventory >= 10
|
||||
* - "low" → inventory > 0 AND inventory < 10
|
||||
* - "out" → inventory = 0
|
||||
* - "hidden" → active = false (treating "hidden" as "not visible to customers")
|
||||
*
|
||||
* Filter state is encoded in the `?filter=` query param so the server
|
||||
* component can re-render with the filter applied (no client-side state).
|
||||
*/
|
||||
const FILTERS = [
|
||||
{ value: "all", label: "All" },
|
||||
{ value: "in-stock", label: "In stock" },
|
||||
{ value: "low", label: "Low" },
|
||||
{ value: "out", label: "Out" },
|
||||
{ value: "hidden", label: "Hidden" },
|
||||
] as const;
|
||||
|
||||
export function ProductsFilterChips({ active }: { active: string }) {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
function apply(value: string) {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
if (value === "all") params.delete("filter");
|
||||
else params.set("filter", value);
|
||||
router.push(`/admin/v2/products?${params.toString()}`);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="px-4 pb-3 flex gap-2 overflow-x-auto" role="tablist" aria-label="Filter products">
|
||||
{FILTERS.map((f) => {
|
||||
const isActive = active === f.value;
|
||||
return (
|
||||
<button
|
||||
key={f.value}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={isActive}
|
||||
onClick={() => apply(f.value)}
|
||||
className="rounded-full text-label font-semibold whitespace-nowrap"
|
||||
style={{
|
||||
minHeight: "40px",
|
||||
padding: "0 16px",
|
||||
backgroundColor: isActive ? "var(--color-accent)" : "var(--color-surface-2)",
|
||||
color: isActive ? "white" : "var(--color-text)",
|
||||
letterSpacing: "0.02em",
|
||||
}}
|
||||
>
|
||||
{f.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProductsFilterChips;
|
||||
@@ -0,0 +1,96 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
import { enqueueAction } from "@/lib/offline/queue";
|
||||
import { syncPending } from "@/lib/offline/sync";
|
||||
import { dispatchClientAction } from "@/actions/offline-dispatcher";
|
||||
|
||||
/**
|
||||
* Long-press stepper to adjust a product's `inventory` count.
|
||||
*
|
||||
* UI plumbing only: pressing +/- enqueues an `adjustProductStock` mutation
|
||||
* into the offline IndexedDB queue and triggers a sync pass. The server-side
|
||||
* `adjustProductStock` action is not yet wired into the dispatcher's
|
||||
* `listClientActions()` table (PR 3 deviation) — `dispatchClientAction` will
|
||||
* return `{ok: false, error: "Unknown action"}` for now, which surfaces in
|
||||
* the OfflineBanner conflict count. That's the known follow-up; the queue +
|
||||
* sync pipeline is the deliverable here.
|
||||
*
|
||||
* The "long press" affordance keeps accidental single-tap stock changes to
|
||||
* a minimum — a single tap on the trigger does nothing; the dialog only
|
||||
* opens after holding the button for LONG_PRESS_MS. Inside the dialog the
|
||||
* stepper buttons are large (64px) for gloved use.
|
||||
*/
|
||||
interface StockAdjustButtonProps {
|
||||
productId: string;
|
||||
currentStock: number;
|
||||
}
|
||||
|
||||
const LONG_PRESS_MS = 500;
|
||||
|
||||
export function StockAdjustButton({ productId, currentStock }: StockAdjustButtonProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [stock, setStock] = useState(currentStock);
|
||||
const [pending, setPending] = useState(false);
|
||||
const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
function onPointerDown() {
|
||||
timer.current = setTimeout(() => setOpen(true), LONG_PRESS_MS);
|
||||
}
|
||||
function onPointerUp() {
|
||||
if (timer.current) clearTimeout(timer.current);
|
||||
}
|
||||
|
||||
async function adjust(delta: number) {
|
||||
const next = stock + delta;
|
||||
if (next < 0) return;
|
||||
setStock(next);
|
||||
setPending(true);
|
||||
try {
|
||||
await enqueueAction("adjustProductStock", { productId, delta });
|
||||
await syncPending(
|
||||
(name, payload, id) => dispatchClientAction(name, payload, id),
|
||||
{ online: navigator.onLine, sleep: (ms) => new Promise((r) => setTimeout(r, ms)) }
|
||||
);
|
||||
} finally {
|
||||
setPending(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onPointerDown={onPointerDown}
|
||||
onPointerUp={onPointerUp}
|
||||
onPointerLeave={onPointerUp}
|
||||
aria-label={`Adjust stock for product ${productId}`}
|
||||
className="rounded-full"
|
||||
style={{
|
||||
minWidth: "40px",
|
||||
minHeight: "40px",
|
||||
backgroundColor: "var(--color-surface-3)",
|
||||
color: "var(--color-text)",
|
||||
}}
|
||||
>
|
||||
±
|
||||
</button>
|
||||
{open && (
|
||||
<div role="dialog" aria-label="Adjust stock" className="fixed inset-0 z-50 flex items-end justify-center backdrop-blur-sm" style={{ backgroundColor: "rgba(0,0,0,0.4)" }}>
|
||||
<div className="w-full max-w-[640px] rounded-t-3xl p-6" style={{ backgroundColor: "var(--color-bg)", paddingBottom: "calc(env(safe-area-inset-bottom, 0) + 24px)" }}>
|
||||
<div className="w-12 h-1.5 rounded-full mx-auto mb-4" style={{ backgroundColor: "var(--color-surface-3)" }} />
|
||||
<h2 className="text-h1 font-display" style={{ fontWeight: 600 }}>Adjust stock</h2>
|
||||
<div className="mt-6 flex items-center justify-center gap-6">
|
||||
<button type="button" onClick={() => adjust(-1)} disabled={pending} className="rounded-full" style={{ width: "64px", height: "64px", backgroundColor: "var(--color-surface-2)", fontSize: "32px", fontWeight: 700 }}>−</button>
|
||||
<div className="text-display font-display" style={{ fontWeight: 600, minWidth: "100px", textAlign: "center" }}>{stock}</div>
|
||||
<button type="button" onClick={() => adjust(1)} disabled={pending} className="rounded-full" style={{ width: "64px", height: "64px", backgroundColor: "var(--color-accent)", color: "white", fontSize: "32px", fontWeight: 700 }}>+</button>
|
||||
</div>
|
||||
<button type="button" onClick={() => setOpen(false)} className="w-full mt-6 rounded-xl text-label font-semibold" style={{ minHeight: "56px", backgroundColor: "var(--color-surface-2)", letterSpacing: "0.02em" }}>Done</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default StockAdjustButton;
|
||||
Reference in New Issue
Block a user