FE-M0-11 · Each role on the local stack, the shell in the preview, then merge pack C

ID FE-M0-11 · Level L0 · Run order row 26

Goal

Each E2E login lands on its role's page and sees the menu its v1 role sees, a page outside the role shows the refusal page, the theme toggle sticks, /design-preview shows the shell, and pack C is merged.

Before

FE-M0-10 is Done. The local stack is running with the seed and the E2E logins (timeline rows 21 and 22), and apps/web/.env.local is in place (FE-M0-06). Nothing else runs on port 3000.

Run

1 · Copy the design preview with the shell, then typecheck and lint

cp -R ~/opleet-v2/packs/fe-pack-c/FE-M0-11/. .
pnpm --filter web typecheck
pnpm lint

2 · Start the app with the preview on and leave it running

NEXT_PUBLIC_DESIGN_PREVIEW=1 pnpm --filter web dev

3 · In a second terminal, in ~/opleet-v2/opleet: the emails of five E2E logins. The password is E2E_PASSWORD in the same file; never paste it anywhere

grep -E '^E2E_(SUPER_ADMIN|ADMIN_FLEET|FINANCE|BACKGROUND_CHECK|SATPAM)_EMAIL' .env.e2e

4 · In the browser, sign in at http://localhost:3000 as each of the five in turn. Note the page you land on and count the menu items, then sign out with Keluar. As satpam, also open http://localhost:3000/payments. As admin_fleet, press the moon in the top bar, reload, then press the sun.

5 · Open http://localhost:3000/design-preview and compare it with ~/opleet-v2/packs/fe-pack-c/expected/. Then stop the app with Ctrl+C in the first terminal.

6 · Commit, push, open the pull request, merge

git add -A apps/web
git commit -m "feat(web): show the shell on the design preview"
git push -u origin web/shell
gh pr create --title "feat(web): the app shell" --body "FE pack C (FE-M0-09 to FE-M0-11), timeline row 26."
gh pr checks --watch
gh pr merge --squash --delete-branch
git switch main
git pull

Expect

• Block 1: no type errors; “No fixes applied.”
• Block 3: five lines, E2E_SUPER_ADMIN_EMAIL to E2E_SATPAM_EMAIL.
• Block 4: super_admin lands on /dashboard with 27 menu items; admin_fleet on /dashboard with 14; finance on /collection with 7; background_check on /screening with 2; satpam on /gate with 2 (Gate, Log aktivitas). As satpam, /payments shows “Halaman ini bukan untuk peran Anda”. The moon turns the app dark, it stays dark after the reload, and the sun turns it back. Like expected/c-admin_fleet.png, c-satpam.png, c-refusal.png and c-dark.png.
• Block 5: two shell frames at the top, light then dark, as admin_fleet sees it at PML, then the components.
• Block 6: checks and pr-title pass, then “✓ Squashed and merged pull request #…”.

Check

git log --oneline -1

Expect: “feat(web): the app shell (#…)”.

If it fails

• A role lands elsewhere or sees a different menu: paste the role, the page and the menu items. lib/nav.test.ts holds what each role should see.
• An E2E login shows “Akun Anda belum punya akses”: my_permissions() returns no rows for it, so it has no role in the E2E organization. Tell the BE session.
• The page shows an error instead of the shell: paste the first terminal's last lines; “my_permissions failed (…)” names the database code.
• The pool shows as a code with no list: the login has one pool, so there is nothing to switch. That's expected while the E2E organization has one pool.

Undo

gh pr close --delete-branch
git switch main
git branch -D web/shell

Before merging. After merging: revert it with a new pull request.

Runs

Not run yet.