Build it

Add the search and the low-only filter to the stock screen, stored in the URL, and an adjustment panel driven by a reducer. This uses the Next.js 16 App Router; the rows come from a sample file for now, and Loading server data replaces it with a server fetch.

1. Pure helpers for the stock rows

   Keep the logic in plain functions, outside components, so you can test it without React.

   TypeScriptCopy

   // app/stock/stock.ts
   export type StockItem = {
     articleId: string; name: string; category: string;
     onHand: number; reorderLevel: number; priceCents: number; updatedAt: string;
   };
   export type Filters = { q: string; lowOnly: boolean };
   
   export const isLow = (item: StockItem) => item.onHand <= item.reorderLevel;
   
   // The URL is the source of the filters; this turns it into a typed object
   export function readFilters(params: { get(name: string): string | null }): Filters {
     return { q: params.get('q') ?? '', lowOnly: params.get('lowOnly') === '1' };
   }
   
   export function visibleItems(items: StockItem[], { q, lowOnly }: Filters): StockItem[] {
     const needle = q.trim().toLowerCase();
     return items
       .filter((item) => !lowOnly || isLow(item))
       .filter((item) => needle === ''
         || item.name.toLowerCase().includes(needle)
         || item.articleId.toLowerCase() === needle)
       .sort((a, b) => a.name.localeCompare(b.name)); // filter made a new array, so sorting it is safe
   }

2. The adjustment reducer

   TypeScriptCopy

   // app/stock/adjust.ts
   export type Reason = 'damaged' | 'expired' | 'count-correction' | 'theft' | 'received';
   export type Draft = { articleId: string; delta: number; reason: Reason; note: string };
   export type DraftAction =
     | { type: 'stepped'; by: number }
     | { type: 'reasonPicked'; reason: Reason }
     | { type: 'noteTyped'; note: string }
     | { type: 'reset' };
   
   export const MAX_DELTA = 500;
   export const emptyDraft = (articleId: string): Draft =>
     ({ articleId, delta: 0, reason: 'damaged', note: '' });
   
   export function adjustReducer(state: Draft, action: DraftAction): Draft {
     switch (action.type) {
       case 'stepped': {
         const delta = Math.max(-MAX_DELTA, Math.min(MAX_DELTA, state.delta + action.by));
         return { ...state, delta };                 // new object, so React sees the change
       }
       case 'reasonPicked':
         return { ...state, reason: action.reason };
       case 'noteTyped':
         return { ...state, note: action.note };
       case 'reset':
         return emptyDraft(state.articleId);         // clearing keeps the article
       default:
         return state;
     }
   }

3. Write the filters to the URL from the search bar

   The filters change because the user typed or ticked, so the URL is updated in the event handlers, with no effect. router.replace changes the URL without adding a history entry, so the back button does not step through every letter. scroll: false keeps the page where it is.

   TypeScriptCopy

   // app/stock/SearchBar.tsx
   'use client';
   import { usePathname, useRouter, useSearchParams } from 'next/navigation';
   
   export function SearchBar() {
     const searchParams = useSearchParams();
     const pathname = usePathname();
     const router = useRouter();
   
     function setParam(name: 'q' | 'lowOnly', value: string) {
       const params = new URLSearchParams(searchParams.toString());
       if (value) params.set(name, value);
       else params.delete(name);                       // default filters keep the link short
       const query = params.toString();
       router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
     }
   
     return (
       <div role="search">
         <label>
           Search
           <input type="search" defaultValue={searchParams.get('q') ?? ''}
             onChange={(e) => setParam('q', e.target.value)} />
         </label>
         <label>
           <input type="checkbox" defaultChecked={searchParams.get('lowOnly') === '1'}
             onChange={(e) => setParam('lowOnly', e.target.checked ? '1' : '')} />
           Low stock only
         </label>
       </div>
     );
   }

4. The panel with useReducer

   The third argument of useReducer builds the first state from the article id. "After this change" is derived, never stored. Saving the draft is Forms that people can trust.

   TypeScriptCopy

   // app/stock/AdjustPanel.tsx
   'use client';
   import { useReducer } from 'react';
   import { adjustReducer, emptyDraft, type Reason } from './adjust';
   import type { StockItem } from './stock';
   
   const REASONS: Reason[] = ['damaged', 'expired', 'count-correction', 'theft', 'received'];
   
   export function AdjustPanel({ item, onClose }: { item: StockItem; onClose: () => void }) {
     const [draft, dispatch] = useReducer(adjustReducer, item.articleId, emptyDraft);
     const after = item.onHand + draft.delta;                          // derived
     const needsNote = draft.reason === 'count-correction' || draft.reason === 'theft';
   
     return (
       <section aria-label={`Adjust ${item.name}`}>
         <h2>{item.name}</h2>
         <p>On hand {item.onHand}, after this change {after}</p>
         {[-10, -1, 1, 10].map((by) => (
           <button key={by} type="button" onClick={() => dispatch({ type: 'stepped', by })}>
             {by > 0 ? `+${by}` : by}
           </button>
         ))}
         <select aria-label="Reason" value={draft.reason}
           onChange={(e) => dispatch({ type: 'reasonPicked', reason: e.target.value as Reason })}>
           {REASONS.map((r) => <option key={r} value={r}>{r}</option>)}
         </select>
         {needsNote && (
           <textarea aria-label="Note" value={draft.note}
             onChange={(e) => dispatch({ type: 'noteTyped', note: e.target.value })} />
         )}
         <button type="button" onClick={() => dispatch({ type: 'reset' })}>Clear</button>
         <button type="button" onClick={onClose}>Close</button>
       </section>
     );
   }

5. The screen: URL state, local state, derived values

   The selection is stored as an id, so the panel always shows the current row from the server data, never an old copy. The key gives each article a fresh draft.

   TypeScriptCopy

   // app/stock/StockScreen.tsx
   'use client';
   import { useState } from 'react';
   import { useSearchParams } from 'next/navigation';
   import { readFilters, visibleItems, isLow, type StockItem } from './stock';
   import { SearchBar } from './SearchBar';
   import { AdjustPanel } from './AdjustPanel';
   
   export function StockScreen({ items }: { items: StockItem[] }) {
     const searchParams = useSearchParams();
     const filters = readFilters(searchParams);                          // URL state
     const [selectedId, setSelectedId] = useState<string | null>(null); // local state
   
     const rows = visibleItems(items, filters);                          // derived
     const lowCount = items.filter(isLow).length;                        // derived
     const selected = items.find((i) => i.articleId === selectedId) ?? null;
   
     return (
       <main>
         <h1>Stock: {lowCount} low</h1>
         <SearchBar />
         <table>
           <thead><tr><th>Item</th><th>On hand</th><th>Reorder at</th><th></th></tr></thead>
           <tbody>
             {rows.map((item) => (
               <tr key={item.articleId} className={item.articleId === selectedId ? 'selected' : undefined}>
                 <td>{item.name}</td><td>{item.onHand}</td><td>{item.reorderLevel}</td>
                 <td><button type="button" onClick={() => setSelectedId(item.articleId)}>Adjust</button></td>
               </tr>
             ))}
           </tbody>
         </table>
         {selected && (
           <AdjustPanel key={selected.articleId} item={selected} onClose={() => setSelectedId(null)} />
         )}
       </main>
     );
   }

6. The page, with a Suspense boundary

   The page is a Server Component. A Client Component that calls useSearchParams on a prerendered page must sit inside <Suspense>; without it, the production build fails with "Missing Suspense boundary with useSearchParams". In development it works either way, so add the boundary now.

   TypeScriptCopy

   // app/stock/page.tsx
   import { Suspense } from 'react';
   import { StockScreen } from './StockScreen';
   import { sampleStock } from './sample-stock';   // a dozen StockItem rows; fe-03 fetches real ones
   
   export default function StockPage() {
     return (
       <Suspense fallback={<p>Loading stock…</p>}>
         <StockScreen items={sampleStock} />
       </Suspense>
     );
   }

7. Try it

   Run npm run dev and open /stock. Type oil and tick "Low stock only": the address bar becomes /stock?q=oil&lowOnly=1. Copy it into a new tab, and the same view opens. Open the panel for one item, press +10 twice, then open another item: the draft starts at 0, thanks to the key. Press reload: the filters survive, because they were never component state.