@mohasinac/appkit 4.10.0 → 4.11.0

package/dist/features/shell/StepForm.js

@@ -1,11 +1,12 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { Check } from "lucide-react";
 import { Button } from "../../ui/components/Button";
 import { classNames } from "../../ui/style.helper";
 import { Div, Nav, Row, Span, Stack, Text, useToast } from "../../ui";
 import { normalizeError } from "../../errors/normalize";
+import { FormSchemaContext } from "./FormShell";
 /** Standalone step nav bar — use as `renderBottomBar` in FormShell. */
 export function StepFormActions({ currentStep, totalSteps, onNext, onPrev, completeLabel = "Publish Now", isLoading = false, disabled = false, }) {
     const isFirst = currentStep === 0;
@@ -34,10 +35,52 @@ export function StepIndicator({ steps, currentStep, onStepClick, stepErrors, })
                             : "bg-[var(--appkit-color-border)]") }))] }, i));
         }) }));
 }
-export function StepForm({ steps, values, onChange, onComplete, completeLabel = "Publish Now", isLoading = false, formId, currentStep, onStepChange, hideActions = false, stepErrors, }) {
+export function StepForm({ steps, values, onChange, onComplete, completeLabel = "Publish Now", isLoading = false, formId, currentStep, onStepChange, hideActions = false, stepErrors, schema, onValidationChange, }) {
     const { showToast } = useToast();
-    const [fieldErrors, _setFieldErrors] = useState({});
+    const inheritedSchema = useContext(FormSchemaContext);
+    const [fieldErrors, setFieldErrors] = useState({});
     const [stepError, setStepError] = useState(null);
+    const fieldToStepIndex = useMemo(() => {
+        const map = {};
+        steps.forEach((step, i) => {
+            step.fields?.forEach((field) => { map[field] = i; });
+        });
+        return map;
+    }, [steps]);
+    const runValidation = useCallback((nextValues) => {
+        const activeSchema = steps[currentStep]?.schema ?? schema ?? inheritedSchema;
+        if (!activeSchema)
+            return;
+        // audit-unvalidated-safeparse-ok: bulk-replaces fieldErrors from the full
+        // parse result (clears fields that just became valid); applyZodIssues'
+        // incremental setFieldError-per-issue can't do that.
+        const parsed = activeSchema.safeParse(nextValues);
+        if (parsed.success) {
+            setFieldErrors({});
+            onValidationChange?.({}, fieldToStepIndex);
+            return;
+        }
+        const next = {};
+        for (const issue of parsed.error.issues) {
+            if (!issue.path || issue.path.length === 0)
+                continue;
+            next[issue.path.map(String).join(".")] = issue.message;
+        }
+        setFieldErrors(next);
+        onValidationChange?.(next, fieldToStepIndex);
+    }, [steps, currentStep, schema, inheritedSchema, fieldToStepIndex, onValidationChange]);
+    // Re-run validation whenever the active step or schema changes, so
+    // switching steps (or arriving with pre-filled values) shows accurate
+    // live errors immediately rather than only after the next keystroke.
+    useEffect(() => {
+        runValidation(values);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentStep, steps[currentStep]?.schema, schema, inheritedSchema]);
+    const handleFieldChange = useCallback((partial) => {
+        const merged = { ...values, ...partial };
+        onChange(partial);
+        runValidation(merged);
+    }, [values, onChange, runValidation]);
     // Persist step to localStorage if formId provided
     useEffect(() => {
         if (formId)
@@ -89,5 +132,5 @@ export function StepForm({ steps, values, onChange, onComplete, completeLabel =
     return (_jsxs(Stack, { children: [_jsx(StepIndicator, { steps: steps, currentStep: currentStep, stepErrors: stepErrors, onStepClick: (i) => { if (i !== currentStep) {
                     setStepError(null);
                     onStepChange(i);
-                } } }), _jsx(Div, { className: "flex-1", children: currentStepDef?.render({ values, onChange, errors: fieldErrors }) }), !hideActions && stepError && (_jsx(Text, { className: "mt-3 text-[var(--appkit-color-error)]", size: "sm", children: stepError })), !hideActions && (_jsx(StepFormActions, { currentStep: currentStep, totalSteps: steps.length, onNext: () => void goNext(), onPrev: currentStep > 0 ? goPrev : undefined, completeLabel: completeLabel, isLoading: isLoading && isLast, disabled: isLoading }))] }));
+                } } }), _jsx(Div, { className: "flex-1", children: currentStepDef?.render({ values, onChange: handleFieldChange, errors: fieldErrors }) }), !hideActions && stepError && (_jsx(Text, { className: "mt-3 text-[var(--appkit-color-error)]", size: "sm", children: stepError })), !hideActions && (_jsx(StepFormActions, { currentStep: currentStep, totalSteps: steps.length, onNext: () => void goNext(), onPrev: currentStep > 0 ? goPrev : undefined, completeLabel: completeLabel, isLoading: isLoading && isLast, disabled: isLoading }))] }));
 }

package/dist/features/shell/index.d.ts

@@ -1,5 +1,5 @@
 export type { FormShellSection, FormShellProps, UseFormShellResult } from "./FormShell";
-export { FormShell, useFormShell } from "./FormShell";
+export { FormShell, useFormShell, FormSchemaContext } from "./FormShell";
 export type { CommandPaletteGroup, CommandPaletteProps } from "./CommandPalette";
 export { CommandPalette, useCommandPaletteHotkey } from "./CommandPalette";
 export type { QuickFieldType, QuickFieldDef, QuickFormDrawerProps } from "./QuickFormDrawer";

package/dist/features/shell/index.js

@@ -1,4 +1,4 @@
-export { FormShell, useFormShell } from "./FormShell";
+export { FormShell, useFormShell, FormSchemaContext } from "./FormShell";
 export { CommandPalette, useCommandPaletteHotkey } from "./CommandPalette";
 export { QuickFormDrawer } from "./QuickFormDrawer";
 export { StepForm, StepFormActions, StepIndicator } from "./StepForm";

package/dist/features/shipments/components/AdminShipmentEditorView.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from "react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useApiMutation } from "@mohasinac/appkit/client";
-import { Alert, Button, Div, Form, FieldInput, FieldSelect, FieldTextarea, Grid, Heading, Stack, Table, Thead, Tbody, Tr, Th, Td, Text, TextLink, } from "../../../ui";
+import { Alert, Button, Div, Form, FieldInput, FieldSelect, FieldTextarea, Grid, Heading, Stack, Table, Thead, Tbody, Tr, Th, Td, Text, TextLink, FormErrorSummary, } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ROUTES } from "../../../next/routing/route-map";
@@ -77,7 +77,7 @@ export function AdminShipmentEditorView({ shipmentId, onSaved }) {
             onSaved?.(saved.id);
         },
     });
-    return (_jsx(Form, { schema: createShipmentSchema, spacing: "md", children: ({ setFieldError }) => (_jsxs(_Fragment, { children: [_jsxs(Grid, { cols: 2, gap: "md", children: [_jsx(FieldInput, { name: "shipmentNumber", label: "Shipment Number", required: true, value: shipmentNumber, onChange: setShipmentNumber, placeholder: "SH-2026-0001" }), _jsx(FieldInput, { name: "supplierName", label: "Supplier Name", required: true, value: supplierName, onChange: setSupplierName }), _jsx(FieldInput, { name: "originCountry", label: "Origin Country", value: originCountry, onChange: setOriginCountry }), _jsx(FieldSelect, { name: "status", label: "Status", required: true, value: status, onChange: setStatus, options: STATUS_OPTIONS }), _jsx(FieldInput, { name: "trackingNumber", label: "Tracking Number", value: trackingNumber, onChange: setTrackingNumber }), _jsx(FieldInput, { name: "carrier", label: "Carrier", value: carrier, onChange: setCarrier }), _jsx(FieldInput, { name: "etaDate", label: "ETA Date", type: "date", value: etaDate, onChange: setEtaDate }), _jsx(FieldInput, { name: "laborHoursSpent", label: "Labor Hours Spent", type: "number", min: "0", value: laborHoursSpent, onChange: setLaborHoursSpent }), _jsx(FieldInput, { name: "customsTotal", label: "Customs Total (\u20B9)", type: "number", min: "0", value: customsTotalRupees, onChange: setCustomsTotalRupees, hint: "Split across lots by declared value" }), _jsx(FieldInput, { name: "shippingTotal", label: "Shipping Total (\u20B9)", type: "number", min: "0", value: shippingTotalRupees, onChange: setShippingTotalRupees, hint: "Split across lots by weight" })] }), _jsx(FieldTextarea, { name: "notes", label: "Notes", value: notes, onChange: setNotes, rows: 3 }), _jsx(Button, { type: "button", isLoading: saveMutation.isPending, onClick: () => {
+    return (_jsx(Form, { schema: createShipmentSchema, spacing: "md", children: ({ setFieldError }) => (_jsxs(_Fragment, { children: [_jsxs(Grid, { cols: 2, gap: "md", children: [_jsx(FieldInput, { name: "shipmentNumber", label: "Shipment Number", required: true, value: shipmentNumber, onChange: setShipmentNumber, placeholder: "SH-2026-0001" }), _jsx(FieldInput, { name: "supplierName", label: "Supplier Name", required: true, value: supplierName, onChange: setSupplierName }), _jsx(FieldInput, { name: "originCountry", label: "Origin Country", value: originCountry, onChange: setOriginCountry }), _jsx(FieldSelect, { name: "status", label: "Status", required: true, value: status, onChange: setStatus, options: STATUS_OPTIONS }), _jsx(FieldInput, { name: "trackingNumber", label: "Tracking Number", value: trackingNumber, onChange: setTrackingNumber }), _jsx(FieldInput, { name: "carrier", label: "Carrier", value: carrier, onChange: setCarrier }), _jsx(FieldInput, { name: "etaDate", label: "ETA Date", type: "date", value: etaDate, onChange: setEtaDate }), _jsx(FieldInput, { name: "laborHoursSpent", label: "Labor Hours Spent", type: "number", min: "0", value: laborHoursSpent, onChange: setLaborHoursSpent }), _jsx(FieldInput, { name: "customsTotal", label: "Customs Total (\u20B9)", type: "number", min: "0", value: customsTotalRupees, onChange: setCustomsTotalRupees, hint: "Split across lots by declared value" }), _jsx(FieldInput, { name: "shippingTotal", label: "Shipping Total (\u20B9)", type: "number", min: "0", value: shippingTotalRupees, onChange: setShippingTotalRupees, hint: "Split across lots by weight" })] }), _jsx(FieldTextarea, { name: "notes", label: "Notes", value: notes, onChange: setNotes, rows: 3 }), _jsx(FormErrorSummary, {}), _jsx(Button, { type: "button", isLoading: saveMutation.isPending, onClick: () => {
                         const parsed = createShipmentSchema.safeParse({
                             shipmentNumber,
                             supplierName,

package/dist/features/shipments/schemas/validation.d.ts

@@ -22,9 +22,9 @@ export declare const createShipmentSchema: z.ZodObject<{
     shippingTotal: number;
     notes?: string | undefined;
     trackingNumber?: string | undefined;
+    carrier?: string | undefined;
     etaDate?: string | Date | undefined;
     originCountry?: string | undefined;
-    carrier?: string | undefined;
     receivedDate?: string | Date | undefined;
     laborHoursSpent?: number | undefined;
     laborRatePerHour?: number | undefined;
@@ -36,9 +36,9 @@ export declare const createShipmentSchema: z.ZodObject<{
     shippingTotal: number;
     notes?: string | undefined;
     trackingNumber?: string | undefined;
+    carrier?: string | undefined;
     etaDate?: string | Date | undefined;
     originCountry?: string | undefined;
-    carrier?: string | undefined;
     receivedDate?: string | Date | undefined;
     laborHoursSpent?: number | undefined;
     laborRatePerHour?: number | undefined;
@@ -61,11 +61,11 @@ export declare const updateShipmentSchema: z.ZodObject<{
     status?: "received" | "cancelled" | "processing" | "completed" | "ordered" | "planning" | "in_transit" | "customs" | undefined;
     notes?: string | undefined;
     trackingNumber?: string | undefined;
+    carrier?: string | undefined;
     shipmentNumber?: string | undefined;
     etaDate?: string | Date | undefined;
     supplierName?: string | undefined;
     originCountry?: string | undefined;
-    carrier?: string | undefined;
     receivedDate?: string | Date | undefined;
     customsTotal?: number | undefined;
     shippingTotal?: number | undefined;
@@ -75,11 +75,11 @@ export declare const updateShipmentSchema: z.ZodObject<{
     status?: "received" | "cancelled" | "processing" | "completed" | "ordered" | "planning" | "in_transit" | "customs" | undefined;
     notes?: string | undefined;
     trackingNumber?: string | undefined;
+    carrier?: string | undefined;
     shipmentNumber?: string | undefined;
     etaDate?: string | Date | undefined;
     supplierName?: string | undefined;
     originCountry?: string | undefined;
-    carrier?: string | undefined;
     receivedDate?: string | Date | undefined;
     customsTotal?: number | undefined;
     shippingTotal?: number | undefined;
@@ -98,6 +98,7 @@ export declare const createShipmentLotSchema: z.ZodObject<{
         thumbnailUrl: z.ZodOptional<z.ZodString>;
         source: z.ZodOptional<z.ZodEnum<["upload", "youtube", "external"]>>;
         youtubeId: z.ZodOptional<z.ZodString>;
+        duration: z.ZodOptional<z.ZodNumber>;
     }, "strip", z.ZodTypeAny, {
         type: "video" | "image" | "file";
         url: string;
@@ -105,6 +106,7 @@ export declare const createShipmentLotSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }, {
         type: "video" | "image" | "file";
         url: string;
@@ -112,6 +114,7 @@ export declare const createShipmentLotSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }>, "many">>>;
     remainderItemCount: z.ZodOptional<z.ZodNumber>;
     remainderEstimatedValue: z.ZodOptional<z.ZodNumber>;
@@ -123,6 +126,7 @@ export declare const createShipmentLotSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }[];
     lotName: string;
     weightGrams: number;
@@ -141,6 +145,7 @@ export declare const createShipmentLotSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }[] | undefined;
     supplierOrderRef?: string | undefined;
     remainderItemCount?: number | undefined;
@@ -158,6 +163,7 @@ export declare const updateShipmentLotSchema: z.ZodObject<{
         thumbnailUrl: z.ZodOptional<z.ZodString>;
         source: z.ZodOptional<z.ZodEnum<["upload", "youtube", "external"]>>;
         youtubeId: z.ZodOptional<z.ZodString>;
+        duration: z.ZodOptional<z.ZodNumber>;
     }, "strip", z.ZodTypeAny, {
         type: "video" | "image" | "file";
         url: string;
@@ -165,6 +171,7 @@ export declare const updateShipmentLotSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }, {
         type: "video" | "image" | "file";
         url: string;
@@ -172,6 +179,7 @@ export declare const updateShipmentLotSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }>, "many">>>>;
     remainderItemCount: z.ZodOptional<z.ZodOptional<z.ZodNumber>>;
     remainderEstimatedValue: z.ZodOptional<z.ZodOptional<z.ZodNumber>>;
@@ -183,6 +191,7 @@ export declare const updateShipmentLotSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }[] | undefined;
     lotName?: string | undefined;
     supplierOrderRef?: string | undefined;
@@ -198,6 +207,7 @@ export declare const updateShipmentLotSchema: z.ZodObject<{
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
+        duration?: number | undefined;
     }[] | undefined;
     lotName?: string | undefined;
     supplierOrderRef?: string | undefined;

package/dist/features/tester/components/AdminTesterFeedbackListView.js

@@ -4,8 +4,9 @@ import { useApiMutation } from "../../../client";
 import { SIEVE_OP, sieveFilter } from "../../../utils/sieve-builder";
 import { sortBy } from "../../../constants/sort";
 import { TESTER_CHECKLIST_RESPONSE_FIELDS } from "../schemas/firestore";
+import React from "react";
 import { useQueryClient } from "@tanstack/react-query";
-import { FilterChipGroup, RowActionMenu, Stack, Text } from "../../../ui";
+import { FilterChipGroup, RecordDetailModal, RowActionMenu, Stack, Text } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { toRecordArray, toRelativeDate, toStringValue, } from "../../admin/hooks/useAdminListingData";
@@ -39,6 +40,7 @@ const COLUMNS = [
 ];
 export function AdminTesterFeedbackListView(_props) {
     const queryClient = useQueryClient();
+    const [selected, setSelected] = React.useState(null);
     const patchMutation = useApiMutation({
         mutationFn: async (id) => {
             await apiClient.patch(ADMIN_ENDPOINTS.TESTER_FEEDBACK_BY_ID(id), {});
@@ -78,6 +80,7 @@ export function AdminTesterFeedbackListView(_props) {
             status: toStringValue(item.status, "new"),
             updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
             screenshotUrl: item.screenshotUrl ? toStringValue(item.screenshotUrl, "") : undefined,
+            _raw: item,
         })),
         getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
         buildFilters: (state) => {
@@ -97,7 +100,14 @@ export function AdminTesterFeedbackListView(_props) {
                         { id: "new", label: "New" },
                         { id: "reviewed", label: "Reviewed" },
                     ], value: pendingFilters.status || "", onChange: (v) => setPendingFilters((p) => ({ ...p, status: v })) })] })),
+        // "Confirm bug" used to be reachable without ever reading the tester's
+        // own comment or opening their screenshot — the row truncates both.
+        onRowClick: (row) => setSelected(row),
         renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
+                {
+                    label: "View details",
+                    onClick: () => setSelected(row),
+                },
                 {
                     label: ACTIONS.ADMIN["mark-feedback-reviewed"].label,
                     disabled: row.status === "reviewed",
@@ -110,5 +120,16 @@ export function AdminTesterFeedbackListView(_props) {
                 },
             ] })),
     };
-    return _jsx(DataListingView, { config: config });
+    const raw = selected?._raw ?? {};
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(RecordDetailModal, { isOpen: Boolean(selected), onClose: () => setSelected(null), title: selected?.primary ?? "Tester Feedback", badges: [
+                    { label: selected?.answer === "no" ? "Reported a problem" : "Passed", variant: selected?.answer === "no" ? "danger" : "success" },
+                    { label: selected?.status ?? "new", variant: "default" },
+                ], description: toStringValue(raw.comment, "") || undefined, fields: [
+                    { label: "Checklist item", value: toStringValue(raw.checklistItemId, "—") },
+                    { label: "Phase", value: toStringValue(raw.phase, "—") },
+                    { label: "Group / page", value: `${toStringValue(raw.groupKey, "—")} / ${toStringValue(raw.pageKey, "—")}` },
+                    { label: "Answered", value: selected?.updatedAt ?? "—" },
+                ], items: selected?.screenshotUrl
+                    ? { heading: "Screenshot", entries: [{ image: selected.screenshotUrl, title: "Tester screenshot" }] }
+                    : undefined })] }));
 }

package/dist/features/tester/components/TesterChecklistStepRow.js

@@ -25,5 +25,5 @@ export function TesterChecklistStepRow({ item, testerDisplayName, onAnswer, onSa
             setSaving(false);
         }
     };
-    return (_jsxs(Stack, { gap: "xs", padding: "sm", border: "default", rounded: "md", children: [_jsxs(Row, { gap: "sm", justify: "between", align: "center", wrap: true, children: [_jsxs(Stack, { gap: "none", className: "min-w-0", children: [_jsx(Text, { weight: "medium", children: item.label }), item.description && (_jsx(Text, { size: "xs", color: "muted", children: item.description })), item.href && (_jsx(Anchor, { href: item.href, tone: "brand", underline: "hover", children: "Go test this \u2192" }))] }), _jsxs(Row, { gap: "xs", children: [_jsx(Button, { type: "button", size: "sm", variant: item.answer === "yes" ? "primary" : "outline", onClick: () => onAnswer(item.checklistItemId, "yes"), children: "Yes" }), _jsx(Button, { type: "button", size: "sm", variant: item.answer === "no" ? "danger" : "outline", onClick: () => onAnswer(item.checklistItemId, "no"), children: "No" }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => setExpanded((v) => !v), children: expanded ? "Hide note" : "Add note" })] })] }), expanded && (_jsx(Div, { padding: "t-sm", border: "default", className: "border-t", children: _jsxs(Stack, { gap: "sm", children: [_jsx(FieldTextarea, { name: `comment-${item.checklistItemId}`, label: "Comment", value: comment, onChange: setComment, placeholder: "What did you notice? Colors, styles, readability, bugs..." }), _jsx(MediaUploadField, { label: "Screenshot (optional)", value: screenshotUrl, onChange: setScreenshotUrl, onUpload: handleUpload, kind: "image" }), _jsx(Row, { children: _jsx(Button, { type: "button", action: ACTIONS.TESTER["save-note"], isLoading: saving, onClick: handleSave }) })] }) }))] }));
+    return (_jsxs(Stack, { gap: "xs", padding: "sm", border: "default", rounded: "md", children: [_jsxs(Row, { gap: "sm", justify: "between", align: "center", wrap: true, children: [_jsxs(Stack, { gap: "none", className: "min-w-0", children: [_jsx(Text, { weight: "medium", children: item.label }), item.description && (_jsx(Text, { size: "xs", color: "muted", children: item.description })), item.href && (_jsx(Anchor, { href: item.href, tone: "brand", underline: "hover", target: "_blank", rel: "noopener noreferrer", children: "Go test this \u2192" }))] }), _jsxs(Row, { gap: "xs", children: [_jsx(Button, { type: "button", size: "sm", variant: item.answer === "yes" ? "primary" : "outline", onClick: () => onAnswer(item.checklistItemId, "yes"), children: "Yes" }), _jsx(Button, { type: "button", size: "sm", variant: item.answer === "no" ? "danger" : "outline", onClick: () => onAnswer(item.checklistItemId, "no"), children: "No" }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => setExpanded((v) => !v), children: expanded ? "Hide note" : "Add note" })] })] }), expanded && (_jsx(Div, { padding: "t-sm", border: "default", className: "border-t", children: _jsxs(Stack, { gap: "sm", children: [_jsx(FieldTextarea, { name: `comment-${item.checklistItemId}`, label: "Comment", value: comment, onChange: setComment, placeholder: "What did you notice? Colors, styles, readability, bugs..." }), _jsx(MediaUploadField, { label: "Screenshot (optional)", value: screenshotUrl, onChange: setScreenshotUrl, onUpload: handleUpload, kind: "image" }), _jsx(Row, { children: _jsx(Button, { type: "button", action: ACTIONS.TESTER["save-note"], isLoading: saving, onClick: handleSave }) })] }) }))] }));
 }

package/dist/features/tester/components/TesterHubView.js

@@ -2,11 +2,12 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { Alert, Details, Div, FieldInput, Heading, Stack, Summary, Text } from "../../../ui";
+import { Alert, Details, Div, FieldInput, Heading, Stack, Summary, Text, TextLink } from "../../../ui";
 import { apiClient } from "../../../http";
 import { useApiMutation } from "../../../client";
 import { useSession } from "../../../react";
 import { ACCOUNT_ENDPOINTS } from "../../../constants/api-endpoints";
+import { ROUTES } from "../../../next/routing/route-map";
 import { TesterChecklistStepRow } from "./TesterChecklistStepRow";
 function matchesQuery(item, query) {
     if (!query)
@@ -88,7 +89,7 @@ export function TesterHubView({ sandboxExpiresAt }) {
     const handleSaveNote = async (checklistItemId, comment, screenshotUrl) => {
         await upsertMutation.mutateAsync({ checklistItemId, patch: { comment, screenshotUrl } });
     };
-    return (_jsxs(Stack, { gap: "lg", children: [_jsx(Heading, { level: 1, children: "Tester Hub" }), _jsx(Text, { color: "muted", children: "Work through the checklist below and answer Yes/No for each test case. Add a comment and screenshot wherever something looks off \u2014 colors, styles, readability, bugs. Your answers save automatically." }), sandboxExpiresAt && (_jsxs(Alert, { variant: "info", title: "Shared test sandbox", children: ["The shared test store/products/categories expire on ", new Date(sandboxExpiresAt).toLocaleDateString(), "."] })), _jsx(FieldInput, { name: "checklist-search", label: "Search test cases", value: search, onChange: setSearch, placeholder: "Search by title or route, e.g. checkout, /store/payouts..." }), sortedPhaseNumbers.map((phaseNumber) => {
+    return (_jsxs(Stack, { gap: "lg", children: [_jsx(Heading, { level: 1, children: "Tester Hub" }), _jsx(Text, { color: "muted", children: "Work through the checklist below and answer Yes/No for each test case. Add a comment and screenshot wherever something looks off \u2014 colors, styles, readability, bugs. Your answers save automatically." }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.BUG_HUNTERS), variant: "underline", weight: "medium", children: "View Bug Hunters Leaderboard \u2192" }), sandboxExpiresAt && (_jsxs(Alert, { variant: "info", title: "Shared test sandbox", children: ["The shared test store/products/categories expire on ", new Date(sandboxExpiresAt).toLocaleDateString(), "."] })), _jsx(FieldInput, { name: "checklist-search", label: "Search test cases", value: search, onChange: setSearch, placeholder: "Search by title or route, e.g. checkout, /store/payouts..." }), sortedPhaseNumbers.map((phaseNumber) => {
                 const groups = phases.get(phaseNumber);
                 const phaseItemCount = Array.from(groups.values())
                     .flatMap((g) => Array.from(g.pages.values()))

package/dist/features/tester/seed-data/orders-tester-seed-data.js

@@ -82,7 +82,15 @@ const _rawOrdersTesterSeedData = [
         key: "shipped",
         status: "shipped",
         paymentStatus: "paid",
-        extra: { trackingNumber: "TEST-TRACK-001", shippingCarrier: "Test Carrier", shippingDate: daysAgo(1) },
+        extra: {
+            trackingNumber: "TEST-TRACK-001",
+            shippingCarrier: "Test Carrier",
+            shippingDate: daysAgo(1),
+            // Real-looking passthrough URL — exercises the "opens in new tab"
+            // tracking-link case on /user/orders/[id]/track (no live courier
+            // API integration; this is exactly what a seller/admin would type in).
+            trackingUrl: "https://www.example.com/track/TEST-TRACK-001",
+        },
     }),
     standardOrder({
         key: "delivered",

package/dist/features/tester/seed-data/products-tester-seed-data.js

@@ -5,9 +5,12 @@
  *      pre-ordering against real code paths — including navigating every entry of the store
  *      detail page's listing-type dropdown (see StoreNavTabs). Auto-expires after 7 days
  *      (testerSandboxCleanup cascades into any bids on the auction).
- * WHAT: Exports productsTesterSeedData — 2 standard + 2 auction + 1 pre-order + 1 prize-draw +
+ * WHAT: Exports productsTesterSeedData — 2 standard + 4 auction (3 staggered 1h/2h/3h "still
+ *       open" cycling fixtures + 1 already-ended "won" fixture) + 1 pre-order + 1 prize-draw +
  *       1 classified + 1 digital-code + 1 live + 1 art + 1 stickers product + 1 product-group
  *       ("Set") parent (product-tester-standard-1/2 are its children, linked via groupId).
+ *       The 3 staggered auction ids/end-dates are recomputed on every seed run (including the
+ *       testerSandboxRefresh job, every 4h) so testers can watch one actually end mid-session.
  *
  * EXPORTS:
  *   productsTesterSeedData — Array of Partial<ProductDocument> for the seed runner
@@ -42,7 +45,46 @@ function withTokens(p) {
         searchTokens: buildSearchTokens(p.title, p.description, p.brand, p.brandSlug, p.categoryNames, p.tags),
     };
 }
+// Staggered, incrementing-id auction fixtures so testers can watch a live
+// auction actually cross its end time within a single sandbox refresh cycle
+// (testerSandboxRefresh re-imports this module every 4 hours, recomputing
+// these Date.now()-relative offsets fresh each time) instead of the old
+// single fixture that always sat 5 days out. A loop (not hand-typed ids)
+// avoids id collisions if the stagger list is ever extended.
+const AUCTION_CYCLE_STAGGER_HOURS = [1, 2, 3];
+const stagedAuctions = AUCTION_CYCLE_STAGGER_HOURS.map((hours, i) => withTokens({
+    id: `auction-tester-sandbox-cycle-${i + 1}`,
+    slug: `auction-tester-sandbox-cycle-${i + 1}`,
+    title: `Test Auction — Ends in ~${hours}h`,
+    description: `Disposable test auction for the tester QA program, staggered to end roughly ${hours} hour(s) after the last sandbox refresh so testers can watch the end-of-auction flow live. Place a bid — it auto-expires in 7 days, cascading to any bids.`,
+    categorySlugs: COLLECTIBLES_CATEGORY_SLUGS,
+    categoryNames: COLLECTIBLES_CATEGORY_NAMES,
+    brandSlug: "brand-tester-sandbox",
+    brand: "TestBrand",
+    startingBid: 15000,
+    currentBid: 15000,
+    currency: "INR",
+    price: 150,
+    stockQuantity: 1,
+    availableQuantity: 1,
+    auctionEndDate: new Date(Date.now() + hours * 60 * 60 * 1000),
+    bidCount: 0,
+    bidsHaveStarted: false,
+    isSold: false,
+    mainImage: seedExtMedia(`https://picsum.photos/seed/auction-image-tester-sandbox-cycle-${i + 1}-20260101/900/900`),
+    images: [seedExtMedia(`https://picsum.photos/seed/auction-image-tester-sandbox-cycle-${i + 1}-20260101/900/900`)],
+    status: PRODUCT_FIELDS.STATUS_VALUES.PUBLISHED,
+    condition: PRODUCT_FIELDS.CONDITION_VALUES.NEW,
+    listingType: "auction",
+    customFields: [],
+    customSections: [],
+    isPromoted: false,
+    isOnSale: false,
+    createdAt: new Date(),
+    updatedAt: new Date(),
+}));
 export const productsTesterSeedData = [
+    ...stagedAuctions,
     withTokens({
         id: "product-tester-standard-1",
         slug: "product-tester-standard-1",
@@ -131,37 +173,6 @@ export const productsTesterSeedData = [
         createdAt: new Date(),
         updatedAt: new Date(),
     }),
-    withTokens({
-        id: "auction-tester-sandbox-1",
-        slug: "auction-tester-sandbox-1",
-        title: "Test Auction — Bid Me!",
-        description: "Disposable test auction for the tester QA program. Place a bid — it auto-expires in 7 days, cascading to any bids.",
-        categorySlugs: COLLECTIBLES_CATEGORY_SLUGS,
-        categoryNames: COLLECTIBLES_CATEGORY_NAMES,
-        brandSlug: "brand-tester-sandbox",
-        brand: "TestBrand",
-        startingBid: 15000,
-        currentBid: 15000,
-        currency: "INR",
-        price: 150,
-        stockQuantity: 1,
-        availableQuantity: 1,
-        auctionEndDate: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000),
-        bidCount: 0,
-        bidsHaveStarted: false,
-        isSold: false,
-        mainImage: seedExtMedia("https://picsum.photos/seed/auction-image-tester-sandbox-1-20260101/900/900"),
-        images: [seedExtMedia("https://picsum.photos/seed/auction-image-tester-sandbox-1-20260101/900/900")],
-        status: PRODUCT_FIELDS.STATUS_VALUES.PUBLISHED,
-        condition: PRODUCT_FIELDS.CONDITION_VALUES.NEW,
-        listingType: "auction",
-        customFields: [],
-        customSections: [],
-        isPromoted: false,
-        isOnSale: false,
-        createdAt: new Date(),
-        updatedAt: new Date(),
-    }),
     withTokens({
         id: "auction-tester-sandbox-won",
         slug: "auction-tester-sandbox-won",