feat(admin): add v2 order detail page with StickyActionBar + offline queue integration
This commit is contained in:
Tyler
@@ -0,0 +1,189 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import { getAdminUser } from "@/lib/admin-permissions";
|
||||
import { getAdminOrderDetail, type AdminOrder } from "@/actions/orders";
|
||||
import { formatDate } from "@/lib/format-date";
|
||||
import PageHeader from "@/components/admin/PageHeader";
|
||||
import StatusPill, { type StatusKind } from "@/components/admin/StatusPill";
|
||||
import StickyActionBar from "@/components/admin/StickyActionBar";
|
||||
import OrderActionButtons from "@/components/admin/orders/OrderActionButtons";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/**
|
||||
* Map the legacy `orders.status` + `pickup_complete` pair onto the
|
||||
* StatusPill's `StatusKind` union. Must match the helper in
|
||||
* `orders/page.tsx` so the list and detail pages agree on the
|
||||
* pill vocabulary. Kept inlined here to avoid a shared-types file
|
||||
* until we know the mapping is stable.
|
||||
*/
|
||||
type OrderStatusKind = "placed" | "ready" | "picked-up" | "cancelled";
|
||||
|
||||
function statusKind(o: { status: string; pickup_complete: boolean }): OrderStatusKind {
|
||||
if (o.status === "canceled") return "cancelled";
|
||||
if (o.pickup_complete || o.status === "fulfilled") return "picked-up";
|
||||
if (o.status === "confirmed") return "ready";
|
||||
return "placed";
|
||||
}
|
||||
|
||||
export default async function OrderDetailV2Page({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
const { id } = await params;
|
||||
const adminUser = await getAdminUser();
|
||||
if (!adminUser) return null;
|
||||
|
||||
const order = await getAdminOrderDetail(id);
|
||||
if (!order) notFound();
|
||||
|
||||
const kind = statusKind(order);
|
||||
const subtotal = Number(order.subtotal ?? 0);
|
||||
const taxAmount = Number(order.tax_amount ?? 0);
|
||||
const discountAmount = Number(order.discount_amount ?? 0);
|
||||
const total = subtotal + taxAmount - discountAmount;
|
||||
const itemCount = order.order_items?.length ?? 0;
|
||||
|
||||
return (
|
||||
<main className="pb-40">
|
||||
<PageHeader
|
||||
title={`Order #${order.id.slice(0, 8).toUpperCase()}`}
|
||||
subtitle={formatDate(order.created_at)}
|
||||
actions={<StatusPill status={kind as StatusKind} />}
|
||||
/>
|
||||
<div className="px-4 space-y-4">
|
||||
<section
|
||||
className="rounded-2xl p-4"
|
||||
style={{ backgroundColor: "var(--color-surface-2)" }}
|
||||
>
|
||||
<h2
|
||||
className="text-h1 font-display"
|
||||
style={{ fontWeight: 600 }}
|
||||
>
|
||||
{order.customer_name}
|
||||
</h2>
|
||||
<div className="mt-2 space-y-1">
|
||||
{order.customer_phone && (
|
||||
<a
|
||||
href={`tel:${order.customer_phone}`}
|
||||
className="block text-body"
|
||||
style={{ color: "var(--color-accent)" }}
|
||||
>
|
||||
{order.customer_phone}
|
||||
</a>
|
||||
)}
|
||||
{order.customer_email && (
|
||||
<a
|
||||
href={`mailto:${order.customer_email}`}
|
||||
className="block text-body"
|
||||
style={{ color: "var(--color-accent)" }}
|
||||
>
|
||||
{order.customer_email}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{order.stops && (
|
||||
<section
|
||||
className="rounded-2xl p-4"
|
||||
style={{ backgroundColor: "var(--color-surface-2)" }}
|
||||
>
|
||||
<h3
|
||||
className="text-label font-semibold mb-1"
|
||||
style={{ color: "var(--color-text-muted)", letterSpacing: "0.02em" }}
|
||||
>
|
||||
PICKUP
|
||||
</h3>
|
||||
<div className="text-h2" style={{ fontWeight: 700, lineHeight: 1.3 }}>
|
||||
{order.stops.city}, {order.stops.state}
|
||||
</div>
|
||||
{order.stops.date && (
|
||||
<div
|
||||
className="text-meta mt-1"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
>
|
||||
{formatDate(order.stops.date)}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section
|
||||
className="rounded-2xl p-4"
|
||||
style={{ backgroundColor: "var(--color-surface-2)" }}
|
||||
>
|
||||
<h3
|
||||
className="text-label font-semibold mb-3"
|
||||
style={{ color: "var(--color-text-muted)", letterSpacing: "0.02em" }}
|
||||
>
|
||||
ITEMS ({itemCount})
|
||||
</h3>
|
||||
{itemCount > 0 ? (
|
||||
<ul className="space-y-3">
|
||||
{order.order_items?.map((item: NonNullable<AdminOrder["order_items"]>[number]) => {
|
||||
const unitPrice = Number(item.price ?? 0);
|
||||
const lineTotal = unitPrice * item.quantity;
|
||||
return (
|
||||
<li key={item.id} className="flex items-center gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-h2" style={{ fontWeight: 700 }}>
|
||||
{item.products?.name ?? "Unknown product"}
|
||||
</div>
|
||||
<div
|
||||
className="text-meta"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
>
|
||||
{item.quantity} × ${unitPrice.toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-body font-semibold">
|
||||
${lineTotal.toFixed(2)}
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
) : (
|
||||
<div
|
||||
className="text-body"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
>
|
||||
No items
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className="mt-4 pt-3 border-t flex items-center justify-between"
|
||||
style={{ borderColor: "var(--color-surface-3)" }}
|
||||
>
|
||||
<span
|
||||
className="text-label font-semibold"
|
||||
style={{ color: "var(--color-text-muted)", letterSpacing: "0.02em" }}
|
||||
>
|
||||
TOTAL
|
||||
</span>
|
||||
<span
|
||||
className="text-h1 font-display"
|
||||
style={{ fontWeight: 600 }}
|
||||
>
|
||||
${total.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{order.internal_notes && (
|
||||
<section
|
||||
className="rounded-2xl p-4 italic"
|
||||
style={{ backgroundColor: "var(--color-surface-2)" }}
|
||||
>
|
||||
<p className="text-body">“{order.internal_notes}”</p>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<StickyActionBar>
|
||||
<OrderActionButtons orderId={order.id} status={kind} />
|
||||
</StickyActionBar>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { enqueueAction } from "@/lib/offline/queue";
|
||||
import { syncPending } from "@/lib/offline/sync";
|
||||
import { dispatchClientAction } from "@/actions/offline-dispatcher";
|
||||
|
||||
interface OrderActionButtonsProps {
|
||||
orderId: string;
|
||||
status: "placed" | "ready" | "picked-up" | "cancelled";
|
||||
}
|
||||
|
||||
/**
|
||||
* Sticky action bar buttons for the v2 order detail page.
|
||||
*
|
||||
* Maps the v2 status vocabulary to the v2 action vocabulary:
|
||||
* - placed → enqueue "markOrderReady" → backend: toggle pickup_complete=false
|
||||
* - ready → enqueue "markOrderPickedUp" → backend: toggle pickup_complete=true
|
||||
* - picked-up → render "View Receipt" (outlined) — links to the v1 receipt page
|
||||
* - cancelled → render the "View Receipt" fallback (no primary action)
|
||||
*
|
||||
* The action is enqueued to IndexedDB and replayed via the
|
||||
* `syncPending` engine, which calls `dispatchClientAction` for each
|
||||
* pending record. The StickyActionBar's `pendingSync` badge is shown
|
||||
* while the queue has work, and the page is `router.refresh()`-ed on
|
||||
* success so the server component re-renders with the new status.
|
||||
*
|
||||
* NOTE: the dispatcher (`src/actions/offline-dispatcher.ts`) currently
|
||||
* returns "Unknown action" for both markOrderReady and markOrderPickedUp
|
||||
* because the matching server actions don't ship in PR 3. The UI
|
||||
* surface (queue, conflict, refresh) is in place — wiring the real
|
||||
* handlers is a follow-up. Until then, clicks will surface in the
|
||||
* OfflineBanner's "failed" count and the user sees a brief "Marking…"
|
||||
* state. This matches the plan: PR 3 is structure, not the full
|
||||
* happy path.
|
||||
*/
|
||||
export function OrderActionButtons({ orderId, status }: OrderActionButtonsProps) {
|
||||
const router = useRouter();
|
||||
const [pending, setPending] = useState(false);
|
||||
const [conflict, setConflict] = useState<string | null>(null);
|
||||
const [pendingSync, setPendingSync] = useState(false);
|
||||
|
||||
async function handleAction(actionName: string) {
|
||||
setPending(true);
|
||||
setConflict(null);
|
||||
setPendingSync(true);
|
||||
try {
|
||||
await enqueueAction(actionName, { orderId });
|
||||
const result = await syncPending(
|
||||
(name, payload, id) => dispatchClientAction(name, payload, id),
|
||||
{ online: navigator.onLine, sleep: (ms) => new Promise((r) => setTimeout(r, ms)) },
|
||||
);
|
||||
if (result.conflicts > 0) {
|
||||
setConflict("This order changed elsewhere. Refresh to see the latest.");
|
||||
} else if (result.synced > 0) {
|
||||
// Successful replay — the server invalidated the path; pull fresh data.
|
||||
router.refresh();
|
||||
}
|
||||
// result.failed: the action wasn't recognized. The OfflineBanner will
|
||||
// surface the failure count; we don't inline an error here.
|
||||
} finally {
|
||||
setPending(false);
|
||||
setPendingSync(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (conflict) {
|
||||
return (
|
||||
<div className="text-body" style={{ color: "var(--color-danger)" }}>
|
||||
{conflict}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (status === "placed") {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleAction("markOrderReady")}
|
||||
disabled={pending}
|
||||
className="w-full rounded-xl text-label font-semibold active:opacity-80 transition-opacity"
|
||||
style={{
|
||||
backgroundColor: "var(--color-accent)",
|
||||
color: "white",
|
||||
minHeight: "56px",
|
||||
letterSpacing: "0.02em",
|
||||
}}
|
||||
data-pending-sync={pendingSync ? "true" : "false"}
|
||||
>
|
||||
{pending ? "Marking…" : "Mark Ready"}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
if (status === "ready") {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleAction("markOrderPickedUp")}
|
||||
disabled={pending}
|
||||
className="w-full rounded-xl text-label font-semibold active:opacity-80 transition-opacity"
|
||||
style={{
|
||||
backgroundColor: "var(--color-accent)",
|
||||
color: "white",
|
||||
minHeight: "56px",
|
||||
letterSpacing: "0.02em",
|
||||
}}
|
||||
data-pending-sync={pendingSync ? "true" : "false"}
|
||||
>
|
||||
{pending ? "Marking…" : "Mark Picked Up"}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<a
|
||||
href={`/admin/orders/${orderId}/receipt`}
|
||||
className="block w-full text-center rounded-xl text-label font-semibold active:opacity-80 transition-opacity"
|
||||
style={{
|
||||
border: "1px solid var(--color-surface-3)",
|
||||
minHeight: "56px",
|
||||
lineHeight: "56px",
|
||||
letterSpacing: "0.02em",
|
||||
}}
|
||||
>
|
||||
View Receipt
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
export default OrderActionButtons;
|
||||
Reference in New Issue
Block a user