feat: Business Production Cookbook dashboard (production-cookbook/) - #243
feat: Business Production Cookbook dashboard (production-cookbook/)#243Tarik Skalić (tarikskalic33) wants to merge 2 commits into
Conversation
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
aegisomega | c3801ff | Commit Preview URL Branch Preview URL |
Jul 28 2026, 04:26 PM |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
PR Summary by QodoAdd standalone Production Cookbook dashboard (React/Vite) under production-cookbook/
AI Description
Diagram
High-Level Assessment
Files changed (8)
|
Code Review by Qodo
Context used✅ Compliance rules (platform):
11 rules 1. Batchbook scripts won't run
|
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
| "dev:batchbook": "npm run dev --prefix production-cookbook", | ||
| "build:batchbook": "npm run build --prefix production-cookbook", | ||
| "preview:batchbook": "npm run preview --prefix production-cookbook" |
There was a problem hiding this comment.
2. Batchbook scripts won't run 🐞 Bug ☼ Reliability
The new root scripts (dev:batchbook/build:batchbook/preview:batchbook) run `npm ... --prefix production-cookbook, but a standard repo-root npm ci/install` will not install production-cookbook dependencies because it is not part of the root workspace set, so these scripts can fail with missing vite/React modules on a clean checkout.
Agent Prompt
### Issue description
Root-level scripts invoke `production-cookbook` via `--prefix`, but the repo-root install does not install `production-cookbook/node_modules` because it is not part of the root workspace set. This makes `npm run dev:batchbook` / `build:batchbook` / `preview:batchbook` unreliable on a clean checkout.
### Issue Context
- Root `package.json` only lists `backend` in `workspaces`.
- The new scripts run in `production-cookbook/`, which has its own `package.json` and dependencies.
### Fix
Choose one:
1) **Recommended:** add `production-cookbook` to root `workspaces` and regenerate the **root** `package-lock.json` so `npm ci` at the repo root installs it.
2) Alternatively, make the root scripts install before running, e.g. `npm ci --prefix production-cookbook && npm run dev --prefix production-cookbook` (slower, but self-contained).
### Fix Focus Areas
- package.json[1-10]
- package-lock.json[6-15]
- production-cookbook/package.json[1-20]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
| const notify = (message) => { | ||
| setNotice(message); | ||
| window.setTimeout(() => setNotice(""), 2800); | ||
| }; |
There was a problem hiding this comment.
3. Toast timeout race 🐞 Bug ≡ Correctness
notify() schedules a new timeout on every call without canceling prior timeouts, so a later toast
can be cleared early by an earlier timer and multiple timers will keep firing redundant
setNotice("") updates.
Agent Prompt
### Issue description
The toast notification logic schedules overlapping timers. If the user triggers notifications quickly, an older timer can clear a newer message early.
### Issue Context
`notify()` calls `window.setTimeout(() => setNotice(""), 2800)` but does not retain/clear the timeout id.
### Fix
- Store the timeout id in a `useRef`.
- On each `notify()`, `clearTimeout(ref.current)` before scheduling a new timeout.
- Add an effect cleanup to clear any pending timeout on unmount.
### Fix Focus Areas
- production-cookbook/src/main.jsx[150-160]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: c3801ff141
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "Codex (@codex) review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "Codex (@codex) address that feedback".
| "dev:batchbook": "npm run dev --prefix production-cookbook", | ||
| "build:batchbook": "npm run build --prefix production-cookbook", | ||
| "preview:batchbook": "npm run preview --prefix production-cookbook" |
There was a problem hiding this comment.
In a fresh checkout where contributors run the normal root install, these new root entrypoints don't have Batchbook's dependencies available because production-cookbook is not included in the root workspaces (the workspace list is still only backend) and the root lockfile does not include it. I verified the root entrypoint exits with sh: 1: vite: not found when production-cookbook/node_modules is absent, so the advertised npm run build:batchbook/dev/preview commands require an undocumented second install inside the subdirectory. Please add this app to the root workspace/update the root lock, or make the scripts bootstrap/use the subproject dependencies explicitly.
Useful? React with 👍 / 👎.
| return ( | ||
| <> | ||
| {open && <button className="scrim" aria-label="Close navigation" onClick={onClose} />} | ||
| <aside className={`sidebar ${open ? "sidebar--open" : ""}`}> |
There was a problem hiding this comment.
On mobile widths the CSS hides .sidebar only with transform: translateX(-100%) (production-cookbook/src/styles.css:89), but this aside stays mounted and its nav buttons remain focusable when open is false. Keyboard and screen-reader users can therefore tab into an invisible navigation panel before reaching the page content; make the closed sidebar inert/aria-hidden or unmount/disable its controls until it is opened.
Useful? React with 👍 / 👎.
ghost
mentioned this pull request
| "devDependencies": { | ||
| "@vitejs/plugin-react": "^4.3.4", | ||
| "vite": "^6.0.5" |
There was a problem hiding this comment.
1. React plugin not wired 🐞 Bug ⚙ Maintainability
production-cookbook declares @vitejs/plugin-react but does not introduce a Vite config to register react(), so the added dependency is effectively unused and React-specific dev features (notably Fast Refresh) won’t be enabled for this app. This is configuration/dependency drift that will confuse maintenance and inflate installs.
Agent Prompt
## Issue description
`production-cookbook/package.json` adds `@vitejs/plugin-react`, but this PR does not add a `vite.config.*` for the package to register `react()`.
## Issue Context
Other Vite apps in this repo explicitly register `@vitejs/plugin-react` in `vite.config.ts`, so this new app is inconsistent and likely missing expected React dev tooling.
## Fix Focus Areas
- production-cookbook/package.json[6-19]
- production-cookbook/vite.config.js[1-25]
## Suggested fix
Either:
1) Add `production-cookbook/vite.config.js` (or `.ts`) with:
```js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
})
```
OR
2) If you intentionally don’t want the plugin, remove `@vitejs/plugin-react` from `devDependencies` (and update the lockfile accordingly).
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
| function Status({ value }) { | ||
| const variant = value.toLowerCase().replace(" ", "-"); | ||
| return <span className={`status status--${variant}`}>{value === "Completed" ? <CheckCircle2 size={15} /> : value === "Planned" ? <Clock3 size={15} /> : <Circle size={15} />} {value}</span>; |
There was a problem hiding this comment.
2. Status class normalization 🐞 Bug ≡ Correctness
Status() normalizes the status label with value.toLowerCase().replace(" ", "-"), which only replaces
the first space; any future multi-word status will yield extra whitespace-separated class tokens and
won’t match the intended status--* selector. This is latent today because the seeded statuses
contain at most one space.
Agent Prompt
## Issue description
`Status()` derives a CSS variant using `replace(" ", "-")`, which only replaces the first space, causing incorrect class tokenization for statuses with more than one whitespace.
## Issue Context
CSS styling depends on exact `status--<variant>` class names.
## Fix Focus Areas
- production-cookbook/src/main.jsx[108-111]
## Suggested fix
Use a safer normalizer, e.g.:
```js
const variant = value.toLowerCase().trim().replace(/\s+/g, "-");
```
Optionally, prefer an explicit mapping (e.g., `{ "In progress": "in-progress", ... }`) to decouple display text from CSS identifiers.
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
|
Code review by qodo was updated up to the latest commit c3801ff |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: c3801ff141
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "Codex (@codex) review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "Codex (@codex) address that feedback".
| <main> | ||
| <header className="topbar"> | ||
| <div className="heading"> | ||
| <button className="menu-button" onClick={() => setNavOpen(true)} aria-label="Open navigation"><Menu /></button> |
There was a problem hiding this comment.
On mobile widths, activating this button leaves focus on the opener while <Sidebar> is rendered before <main> in DOM order, so pressing Tab moves forward into the page controls behind the scrim instead of into the open navigation. Keyboard users can miss or be unable to operate the drawer unless they reverse-tab; move focus to the first drawer control when opening and keep background content out of the tab order while the drawer is open.
Useful? React with 👍 / 👎.
1 participant
Standalone React/Vite production-management dashboard under
production-cookbook/, driven from the repo root vianpm run dev:batchbook/build:batchbook/preview:batchbook.What's on the branch
2229insertions across 8 files (origin/main...c3801ff1):production-cookbook/src/main.jsxproduction-cookbook/src/styles.cssproduction-cookbook/package-lock.jsonproduction-cookbook/package.jsonproduction-cookbook/index.htmlproduction-cookbook/public/favicon.svgpackage.json.claude.jsonTwo commits:
9072f39a feat: add Business Production Cookbook dashboardandc3801ff1 chore(manifest): refresh cognitive-state anchors.Known conflict — one file, generated
The branch is 14 commits behind and 2 ahead of
main, andgit merge-treereports a single conflict:Every
production-cookbook/**file and the rootpackage.jsonmerge cleanly..claude.jsonis the generated cognitive manifest (scripts/build-cognitive-manifest.py);mainand this branch each rewrote the samesource_ref/parent_state_hash/state_hashlines. The fix is to regenerate the manifest on top of currentmainrather than hand-resolve the hashes — deliberately not done here, since it requires a merge/rebase that needs operator authorization.Verification provenance
Reported by the prior session, not independently re-run in this one:
npm installclean,npm run buildpassing, desktop and mobile render, batch filtering, new-batch notification, no console errors.Independently verified here, by command:
9072f39aandc3801ff1both resolve viagit cat-fileafter fetchc3801ff1, one commit ahead of the9072f39anamed in the handoffproduction-cookbook/src/main.jsxis 11,358 bytes with 14 component/hook definitions — real implementation, not a stub*:batchbookscripts are present in the rootpackage.jsonat the tipNo deployment or merge is claimed.
🤖 Generated with Claude Code