@burdenoff/microfe-movethewheels 2026.930.5 → 2026.1010.2

package/src/movethewheels/pages/StockBindingPage.tsx

@@ -0,0 +1,299 @@
+import { useRef, useState } from 'react';
+import { ClipboardList } from 'lucide-react';
+import { PageLayout } from '../components/PageLayout';
+import { Button } from '../components/ui';
+import { PinnedSelect, ReusePager, ReuseState, reuseCard } from '../components/ReuseControls';
+import { StockAssessmentDraft } from '../components/stock-binding/StockAssessmentDraft';
+import { StockAssessmentHistory } from '../components/stock-binding/StockAssessmentHistory';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { useConditionApi, useConditionQuery } from '../hooks/useContainerCondition';
+import { useEmptyReuseAction } from '../hooks/useEmptyReuseAction';
+import {
+  stockContextLabel,
+  stockDraftPin,
+  stockContextMatches,
+  inputForStockDraft,
+  type StockDraftPin,
+  type StockFactDraft,
+} from '../utils/stockBindingForm';
+import {
+  StockBindingInventoryDocument,
+  StockBindingContextDocument,
+  StockBindingHistoryDocument,
+  StockBindingExactDocument,
+  RecordStockBindingDocument,
+  type StockBindingInventoryQuery,
+  type StockBindingContextQuery,
+  type StockBindingHistoryQuery,
+  type StockBindingExactQuery,
+  type RecordStockBindingMutation,
+  type StockAssessmentFragment,
+} from '../../generated/stock-binding-operations';
+export default function StockBindingPage() {
+  const { workspaceId, tenantId, currentUser, apiGatewayUrl } = useMoveTheWheels();
+  return (
+    <PageLayout
+      title="Inventory source assessments"
+      subtitle="Recorded units, item labels and lot facts."
+      icon={<ClipboardList aria-hidden="true" />}
+    >
+      <StockBindingWorkbench
+        key={`${workspaceId}:${tenantId}:${currentUser?.id}:${apiGatewayUrl}`}
+      />
+    </PageLayout>
+  );
+}
+function StockBindingWorkbench() {
+  const [inventoryOffset, setInventoryOffset] = useState(0);
+  const [historyOffset, setHistoryOffset] = useState(0);
+  const [selection, setSelection] = useState<{ id: string; label: string } | null>(null);
+  const [pin, setPin] = useState<(StockDraftPin & { generation: string }) | null>(null);
+  const [mismatch, setMismatch] = useState(false);
+  const [selected, setSelected] = useState<StockAssessmentFragment | null>(null);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [checking, setChecking] = useState(false);
+  const checkingNow = useRef(false);
+  const [error, setError] = useState<string | null>(null);
+  const request = useConditionApi();
+  const actions = useEmptyReuseAction();
+  const inventory = useConditionQuery<StockBindingInventoryQuery>(
+    StockBindingInventoryDocument,
+    { pagination: { limit: 25, offset: inventoryOffset } },
+    actions.revision
+  );
+  const current = useConditionQuery<StockBindingContextQuery>(
+    StockBindingContextDocument,
+    selection ? { id: selection.id } : null,
+    actions.revision
+  );
+  const head = useConditionQuery<StockBindingHistoryQuery>(
+    StockBindingHistoryDocument,
+    selection ? { inventoryItemId: selection.id, pagination: { limit: 1, offset: 0 } } : null,
+    actions.revision
+  );
+  const history = useConditionQuery<StockBindingHistoryQuery>(
+    StockBindingHistoryDocument,
+    selection
+      ? { inventoryItemId: selection.id, pagination: { limit: 25, offset: historyOffset } }
+      : null,
+    actions.revision
+  );
+  const exact = useConditionQuery<StockBindingExactQuery>(
+    StockBindingExactDocument,
+    selection && selectedId ? { inventoryItemId: selection.id, id: selectedId } : null,
+    actions.revision
+  );
+  const row = current.data?.inventoryItem;
+  const predecessor = head.data?.mtwStockBindingAssessmentPage.items[0] ?? null;
+  const contextReady =
+    !!row && !!head.data && (!head.data.mtwStockBindingAssessmentPage.total || !!predecessor);
+  const busy = actions.busy || checking;
+  const displayedMismatch =
+    !!pin && !!current.data && !!head.data && !stockContextMatches(pin, row, predecessor);
+  const options =
+    inventory.data?.inventoryItems.map((item) => ({
+      id: item.id,
+      label: stockContextLabel(item),
+    })) ?? [];
+  if (selection && !options.some((item) => item.id === selection.id))
+    options.unshift({ ...selection, label: `${selection.label} — selected outside this page` });
+  const inventoryPage = inventory.data
+    ? {
+        total: inventory.data.inventoryItemsCount,
+        limit: 25,
+        offset: inventoryOffset,
+        hasMore:
+          inventoryOffset + inventory.data.inventoryItems.length <
+          inventory.data.inventoryItemsCount,
+        nextOffset: inventoryOffset + 25,
+      }
+    : undefined;
+  const record = async (draft: StockFactDraft) => {
+    if (checkingNow.current) return;
+    if (!pin || actions.uncertain)
+      throw new Error(
+        'Review a new draft context or resolve the original uncertain request first.'
+      );
+    const captured = pin;
+    checkingNow.current = true;
+    setChecking(true);
+    setError(null);
+    try {
+      const fresh = await request<StockBindingContextQuery>(StockBindingContextDocument, {
+        id: captured.inventoryItemId,
+      });
+      const latest = await request<StockBindingHistoryQuery>(StockBindingHistoryDocument, {
+        inventoryItemId: captured.inventoryItemId,
+        pagination: { limit: 1, offset: 0 },
+      });
+      const latestPage = latest.mtwStockBindingAssessmentPage;
+      if (latestPage.total > 0 && !latestPage.items[0])
+        throw new Error('Last recorded assessment is unavailable.');
+      const latestPredecessor = latestPage.items[0] ?? null;
+      if (!stockContextMatches(captured, fresh.inventoryItem, latestPredecessor)) setMismatch(true);
+      const input = inputForStockDraft(draft, captured, fresh.inventoryItem, latestPredecessor);
+      const result = await actions.run<RecordStockBindingMutation>(
+        RecordStockBindingDocument,
+        input,
+        'Reported facts recorded.'
+      );
+      if (result) {
+        setSelected(result.recordMtwStockBindingAssessment);
+        setSelectedId(null);
+        setHistoryOffset(0);
+        setPin(null);
+      }
+    } catch (failure) {
+      setError(
+        failure instanceof Error
+          ? failure.message
+          : 'Unable to verify the captured inventory context.'
+      );
+      throw failure;
+    } finally {
+      checkingNow.current = false;
+      setChecking(false);
+    }
+  };
+  const start = () => {
+    if (!contextReady || !row) return;
+    try {
+      setPin({ ...stockDraftPin(row, predecessor), generation: crypto.randomUUID() });
+      setMismatch(false);
+      setError(null);
+    } catch (failure) {
+      setError(failure instanceof Error ? failure.message : 'Current context is unavailable.');
+    }
+  };
+  return (
+    <div className="min-w-0 space-y-6 break-words">
+      <p className="rounded border p-4 text-sm">
+        Record the units, labels and lot facts reported for this stock line. Review any missing
+        facts before planning a pick. This page records source history; picking remains a separate
+        workflow.
+      </p>
+      <section className={reuseCard} aria-label="Choose current inventory context">
+        <h2 className="text-lg font-semibold">Inventory line and current owners</h2>
+        <PinnedSelect
+          label="Warehouse / cargo SKU / bin"
+          value={selection?.id ?? ''}
+          disabled={busy || actions.uncertain}
+          options={options}
+          onChange={(id) => {
+            const item = inventory.data?.inventoryItems.find((value) => value.id === id);
+            setSelection(item ? { id: item.id, label: stockContextLabel(item) } : null);
+            setPin(null);
+            setMismatch(false);
+            setSelected(null);
+            setSelectedId(null);
+            setHistoryOffset(0);
+            setError(null);
+            actions.discardAttempt();
+          }}
+        />
+        <ReuseState {...inventory} />
+        <ReusePager
+          page={inventoryPage}
+          offset={inventoryOffset}
+          onChange={setInventoryOffset}
+          busy={busy || inventory.loading}
+        />
+        <ReuseState {...current} />
+        <ReuseState {...head} />
+        {row && (
+          <div className="space-y-2">
+            <p>
+              {stockContextLabel(row)}. Warehouse status {row.warehouse?.status ?? 'UNKNOWN'}; bin
+              status{' '}
+              {row.locationId === null ? 'Unbinned' : (row.location?.status ?? 'Unavailable')}.
+            </p>
+            <p>
+              Current balance: on hand {row.onHand}, available {row.available}, allocated{' '}
+              {row.allocated}, damaged {row.damaged}.
+            </p>
+
+            <p>
+              Last recorded assessment{' '}
+              {predecessor
+                ? `version ${predecessor.version}, effective ${predecessor.effectiveAt}`
+                : 'none'}
+              . Future effective dates stay in recorded order.
+            </p>
+          </div>
+        )}
+        {selection && !row && !current.loading && (
+          <p>
+            This stock line is unavailable for new facts. You can still read its recorded history.
+          </p>
+        )}
+        <Button
+          type="button"
+          variant="outline"
+          disabled={busy}
+          onClick={() => {
+            setMismatch(false);
+            setError(null);
+            actions.refresh();
+          }}
+        >
+          Refresh current context and history
+        </Button>
+      </section>
+      {selection && (
+        <>
+          <StockAssessmentDraft
+            pin={pin}
+            mismatch={mismatch || displayedMismatch}
+            uncertain={actions.uncertain}
+            startDisabled={
+              busy ||
+              actions.uncertain ||
+              mismatch ||
+              current.loading ||
+              head.loading ||
+              !contextReady
+            }
+            formDisabled={
+              busy || actions.uncertain || current.loading || head.loading || !contextReady
+            }
+            onStart={start}
+            onSubmit={record}
+          />
+          <StockAssessmentHistory
+            current={current.loading || current.error ? null : row}
+            query={history}
+            offset={historyOffset}
+            onPage={setHistoryOffset}
+            busy={busy}
+            selected={selectedId ? (exact.data?.mtwStockBindingAssessment ?? null) : selected}
+            onSelect={(item) => {
+              setSelected(null);
+              setSelectedId(item.id);
+            }}
+          />
+          {selectedId && <ReuseState {...exact} />}
+        </>
+      )}
+      {error && <p role="alert">{error}</p>}
+      {actions.error && <p role="alert">{actions.error}</p>}
+      {actions.notice && <p role="status">{actions.notice}</p>}
+      {actions.uncertain && (
+        <div className="space-y-3 rounded border p-4">
+          <p>
+            Check refreshed history first. Retry sends the same submitted facts for the original
+            stock line. This retry is available until you leave or reload this page.
+          </p>
+          <Button type="button" variant="outline" disabled={busy} onClick={actions.refresh}>
+            Refresh assessment history
+          </Button>
+          <Button type="button" disabled={busy} onClick={actions.retryOriginal}>
+            Retry original request
+          </Button>
+          <Button type="button" variant="outline" disabled={busy} onClick={actions.discardAttempt}>
+            Discard retry after checking history
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/movethewheels/pages/StockObservationsPage.tsx

@@ -0,0 +1,181 @@
+import { useState } from 'react';
+import { ClipboardList } from 'lucide-react';
+import { PageLayout } from '../components/PageLayout';
+import { Button, Input } from '../components/ui';
+import { PinnedSelect, ReusePager, ReuseState, reuseCard } from '../components/ReuseControls';
+import { StockIssueForm } from '../components/stock-observation/StockIssueForm';
+import { StockIssueReadPanel } from '../components/stock-observation/StockIssueReadPanel';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { useConditionQuery } from '../hooks/useContainerCondition';
+import { useEmptyReuseAction } from '../hooks/useEmptyReuseAction';
+import {
+  ObservationInventoryDocument,
+  RecordStockIssueDocument,
+  type ObservationInventoryQuery,
+  type RecordStockIssueMutation,
+  type RecordMtwStockObservationInput,
+} from '../../generated/stock-observation-operations';
+
+export default function StockObservationsPage() {
+  const { workspaceId, tenantId, currentUser, apiGatewayUrl } = useMoveTheWheels();
+  return (
+    <PageLayout
+      title="Reported stock issues"
+      subtitle="Record an unresolved operational observation."
+      icon={<ClipboardList aria-hidden="true" />}
+    >
+      <p className="mb-4 text-sm">
+        Changing workspace or user clears this draft. Check recorded history before starting again.
+      </p>
+      <ObservationWorkbench
+        key={`${workspaceId}:${tenantId}:${currentUser?.id}:${apiGatewayUrl}`}
+      />
+    </PageLayout>
+  );
+}
+function ObservationWorkbench() {
+  const actions = useEmptyReuseAction();
+  const [offset, setOffset] = useState(0);
+  const [selection, setSelection] = useState<{ id: string; label: string } | null>(null);
+  const [knownId, setKnownId] = useState('');
+  const [generation, setGeneration] = useState(0);
+  const inventory = useConditionQuery<ObservationInventoryQuery>(
+    ObservationInventoryDocument,
+    { pagination: { limit: 25, offset } },
+    actions.revision
+  );
+  const locked = actions.busy || actions.uncertain;
+  const options =
+    inventory.data?.inventoryItems.map((item) => ({
+      id: item.id,
+      label: `${item.cargoItem?.name ?? 'Item name not recorded'} · ${item.cargoItem?.sku ?? 'SKU not recorded'} · ${item.warehouse?.name ?? 'Warehouse not recorded'} · ${item.location?.locationCode ?? 'No bin'} · line ${item.id}`,
+    })) ?? [];
+  if (selection && !options.some((item) => item.id === selection.id)) options.unshift(selection);
+  const select = (id: string) => {
+    if (locked) return;
+    const option = options.find((item) => item.id === id);
+    setSelection(id ? (option ?? { id, label: `Known inventory line ${id}` }) : null);
+    setGeneration((value) => value + 1);
+  };
+  const save = async (input: Omit<RecordMtwStockObservationInput, 'idempotencyKey'>) => {
+    if (!selection || input.inventoryItemId !== selection.id || locked) return;
+    const result = await actions.run<RecordStockIssueMutation>(
+      RecordStockIssueDocument,
+      { ...input },
+      'Unresolved issue recorded.'
+    );
+    if (result) {
+      setGeneration((value) => value + 1);
+    }
+  };
+  const inventoryPage = inventory.data
+    ? {
+        total: inventory.data.inventoryItemsCount,
+        limit: 25,
+        offset,
+        hasMore: offset + inventory.data.inventoryItems.length < inventory.data.inventoryItemsCount,
+        nextOffset: offset + 25,
+      }
+    : undefined;
+  return (
+    <div className="space-y-5">
+      <div className={reuseCard}>
+        <p>
+          Reports do not change stock quantities or authorize picking. Unknown fields can remain
+          blank, including while evidence services are unavailable.
+        </p>
+        <ReuseState loading={inventory.loading} error={inventory.error} />
+        <PinnedSelect
+          label="Inventory line"
+          value={selection?.id ?? ''}
+          options={options}
+          onChange={select}
+          disabled={locked}
+        />
+        <ReusePager page={inventoryPage} offset={offset} onChange={setOffset} busy={locked} />
+        <details>
+          <summary>Use a known inventory line reference</summary>
+          <p className="text-sm">
+            For an off-page or previously retired line, use its exact reference. This is not an
+            archive browser.
+          </p>
+          <label>
+            Exact inventory line reference
+            <Input
+              value={knownId}
+              maxLength={255}
+              disabled={locked}
+              onChange={(event) => setKnownId(event.target.value)}
+            />
+          </label>
+          <Button
+            type="button"
+            variant="outline"
+            disabled={locked || !knownId.trim()}
+            onClick={() => select(knownId.trim())}
+          >
+            Select known line
+          </Button>
+        </details>
+        {selection && (
+          <div className="text-sm space-y-1">
+            <p className="break-words">Selected: {selection.label}</p>
+            <p className="break-all">Exact inventory line reference: {selection.id}</p>
+          </div>
+        )}
+      </div>
+      {selection && (
+        <section className={reuseCard}>
+          <h2 className="text-lg font-semibold">Report an issue</h2>
+          <StockIssueForm
+            key={`${selection.id}:${generation}`}
+            inventoryItemId={selection.id}
+            disabled={locked}
+            onSubmit={save}
+          />
+        </section>
+      )}
+      <div className={reuseCard}>
+        {actions.error && <p role="alert">{actions.error}</p>}
+        {actions.notice && <p role="status">{actions.notice}</p>}
+        <Button type="button" variant="outline" disabled={actions.busy} onClick={actions.refresh}>
+          Refresh history
+        </Button>
+        {actions.uncertain && (
+          <div className="space-y-3">
+            <p>
+              The save result is uncertain. Check history, then retry the original request or
+              explicitly abandon it before starting a different report.
+            </p>
+            <Button
+              type="button"
+              disabled={actions.busy}
+              onClick={() => void actions.retryOriginal()}
+            >
+              Retry original request
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              disabled={actions.busy}
+              onClick={() => {
+                actions.discardAttempt();
+                setGeneration((value) => value + 1);
+              }}
+            >
+              Abandon original request
+            </Button>
+          </div>
+        )}
+      </div>
+      {selection && (
+        <StockIssueReadPanel
+          key={`${selection.id}:${generation}`}
+          inventoryItemId={selection.id}
+          revision={actions.revision}
+          busy={actions.busy}
+        />
+      )}
+    </div>
+  );
+}