bert.hausmans ac36dfe9b7 feat(layout): Plan 2.5 P5 — shell parity fixes 1–5 + useBreadcrumb retire
Per RFC-WS-PRIMEVUE-PLAN-2-5 §5.1–§5.5 plus the AD-2.5-W1 option-A
supersession (no sub on dropdown items either, accepted divergence).

Atomic changes:
- AppTopbar: brand block (gradient "C" mark + Crewli wordmark) removed
  per Fix 1; the #start slot now renders <AppBreadcrumb /> per Fix 2.
  Legacy meta-based useBreadcrumb consumption (breadcrumbModel computed,
  vue-router useRouter import, command-based PrimeVue Breadcrumb model)
  is gone; AppBreadcrumb owns the registry-driven path. Dead
  topbar-mark-shadow scoped CSS rule deleted.
- AppBreadcrumb: import updated to the renamed useBreadcrumb.
- AppSidebar: docstring updated to make the Fix 3 vertical order
  (Header → Nav → Switcher, switcher bottom-anchored) explicit. No
  template change needed: SidebarNav's root <nav class="flex-1"> already
  fills available column space, naturally pushing WorkspaceSwitcher to
  the bottom (two flex-1 siblings would split the column 50/50 and
  compress the nav — a separate spacer element is structurally wrong).
- WorkspaceSwitcher: dropdown panel restructured per crewli-starter
  reference. Semantic class markers (.popover-head/.title/.link/.list/
  .opt/.is-current/.ws-logo/.name/.check-mark/.foot) added alongside
  Tailwind utilities so specs assert structure with stable selectors.
  Footer buttons wired to placeholder createWorkspace / inviteUser
  handlers (console.warn + TODO) until the flows ship. Manage link
  stays a non-navigating label (no v2-workspaces-manage route yet).
  No sub line on any dropdown row (AD-2.5-W1 option A).

Atomic legacy useBreadcrumb retirement (planned since P1):
- Legacy route-meta-driven useBreadcrumb + toBreadcrumbItems +
  BreadcrumbRouteRecord types deleted entirely (only AppTopbar
  consumed it, and that consumption is gone after Fix 2).
- useNavBreadcrumb → useBreadcrumb (single SoT for breadcrumb chain).
- NavBreadcrumbItem → BreadcrumbItem.
- AppBreadcrumb.vue import updated to the new name.
- SidebarNav.vue docstring reference scrubbed to the new name.
- useBreadcrumb.spec.ts: 10 legacy toBreadcrumbItems specs removed;
  4 walkNavTree specs retained.

AppTopbar.spec.ts:
- vue-router mock simplified (route.matched no longer relevant).
- AppBreadcrumb stubbed in #start; legacy command-vs-route assertion
  removed; new spec verifies AppBreadcrumb is rendered.

WorkspaceSwitcher.spec.ts: 5 new dropdown specs (header / row count /
current-row checkmark / footer buttons / no-sub on rows).

Suite delta: 557 → 552 (−5 net: −10 legacy toBreadcrumbItems specs,
+5 Fix 5 dropdown specs, −1 obsolete AppTopbar breadcrumb-model spec,
+1 new AppTopbar AppBreadcrumb-presence spec).

vue-tsc clean. Scoped ESLint clean (0 errors). All 3 re-grep checks
returned 0 hits (useNavBreadcrumb/NavBreadcrumbItem, topbar brand
selectors, standalone "sub" identifier in WorkspaceSwitcher — only
documentation comments referencing the no-sub state remain, which
describe absence by design).

Manual smoke skipped (Auto Mode); coverage from the post-edit specs
includes AppBreadcrumb-in-#start, dropdown structure, and trigger
no-sub. Recommend Bert run `pnpm --filter crewli-app dev` and verify
the 6 checks listed in the prompt before merging.

Known divergence from crewli-starter (accepted):
- Dropdown rows are ~16px shorter than crewli-starter (no sub line).
  Tracked as WORKSPACE-DROPDOWN-SUB-CONTENT for a future RFC with
  the required backend scope (organisations.type enum + metrics).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-20 20:22:33 +02:00

Crewli

Multi-tenant SaaS platform for event and festival operations: planning, people, accreditation, artist advancing, volunteer shifts, briefings, and show-day tooling (Mission Control). The backend is a JSON-only Laravel API; all user interfaces are Vue 3 single-page apps.


What Crewli covers

  • Organisations & events — Multi-tenant data with organisation-scoped access; events move through a defined lifecycle (draft → published → registration → buildup → show day → teardown → closed).
  • Festival structure — Sections, time slots, shifts, assignments, claiming/approval flows for volunteers and crew.
  • People & crowds — Crowd types (crew, volunteers, artists, guests, press, partners, suppliers), persons, lists, and (planned) rich accreditation (items, zones, hand-out).
  • Artists & advancing — Booking status, stages/timetable concepts, advance sections and token-based portal access for external artists.
  • Communication — Briefings, campaigns, and operational messaging (see architecture doc for target modules).
  • Portal (external users) — One portal app, two modes: login (Sanctum) for long-term users such as volunteers, and token access for per-event links (e.g. artists, suppliers).

Implementation is phased; the authoritative feature and schema list lives in the architecture and design references below.


Applications

App Path Port Role
SPA apps/app/ 5174 Single-SPA product covering organizers, volunteers, crew, super admins (context-routed in-app), plus token-based access for artists, suppliers, press. Includes Platform Admin section for super admins (/platform/*).

The SPA talks to the API over CORS with Laravel Sanctum tokens.


Tech stack

Layer Technology
API PHP 8.2+, Laravel 12, Sanctum, Spatie Permission (and Activity Log / Media Library where used)
Data MySQL 8, Redis (cache/queues)
Frontends Vue 3, TypeScript, Vite, Vuexy + Vuetify, Pinia, TanStack Query, VeeValidate + Zod
Local services Docker Compose (MySQL, Redis, Mailpit)

Rule of thumb: business tables use ULID primary keys; event-related data is scoped by organisation (global scopes + policies), not ad hoc where clauses in controllers.


Project structure

crewli/
├── api/                 # Laravel 12 REST API (JSON only)
├── apps/
│   ├── app/             # Organizer SPA (primary UI + platform admin)
│   └── portal/          # External portal SPA
├── docker/              # Docker / Compose assets
├── docs/                # SETUP, API notes, schema notes
├── resources/
│   ├── design/          # Product source of truth (design docs, see table below)
│   └── vuexy-admin-*/   # Vuexy template reference (bundled kit)
├── .cursor/             # ARCHITECTURE.md, instructions.md, rules for AI/helpers
└── Makefile             # Dev commands

Vuexy @core/ and @layouts/ in each app should stay untouched; customize via app config, navigation, and app-level components.


Quick start

# 1. Infrastructure
make services

# 2. API env, dependencies, database (see docs/SETUP.md)
cd api && cp .env.example .env && composer install && php artisan key:generate && php artisan migrate

# 3. Run API + the SPAs you need (separate terminals)
make api
make app
make portal

Detailed setup: docs/SETUP.md.


Development URLs

Service Development Env / notes
API http://localhost:8000/api/v1 Base path /api/v1
Organizer http://localhost:5174 FRONTEND_APP_URL
Portal http://localhost:5175 FRONTEND_PORTAL_URL
Mailpit http://localhost:8025 Local mail capture

Production (crewli.app)

Domains: crewli.app is this product (API + organizer + portal SPAs, transactional email from the app, seeds, etc.). crewli.nl is reserved for a future public marketing site only — do not point this codebase's APP_URL, CORS, Sanctum, or app mail at crewli.nl.

Typical layout (configure the same values in api/.env — see api/.env.example):

Service URL Env variable
API https://api.crewli.app APP_URL
Organizer https://crewli.app FRONTEND_APP_URL
Portal https://portal.crewli.app FRONTEND_PORTAL_URL

Frontends: set VITE_API_URL=https://api.crewli.app/api/v1 in each app's env for production builds. SANCTUM_STATEFUL_DOMAINS must list the hostnames only of the two SPAs (e.g. crewli.app,portal.crewli.app).


Makefile commands

make services       # MySQL, Redis, Mailpit
make services-stop
make api            # Laravel on :8000
make app            # Organizer on :5174
make portal         # Portal on :5175
make migrate
make fresh          # migrate:fresh --seed
make db-shell

Documentation

Resource Contents
CLAUDE.md Project conventions, vibe-coding principles, Vuexy-first decision tree (auto-loaded by Claude Code).
.cursor/rules/ Workspace, Laravel, Vue, testing conventions.
dev-docs/SETUP.md Environment and local setup.
dev-docs/SCHEMA.md Database schema (kept in sync with migrations).
dev-docs/API.md API contract.
dev-docs/design-document.md Product specification.

Testing

cd api && php artisan test

Feature tests should cover happy paths plus 401 (unauthenticated), 403 (wrong organisation), and 422 (validation) where applicable.

Description
No description provided
Readme 328 MiB
Languages
HTML 54.4%
JavaScript 15.2%
Vue 11.8%
TypeScript 7.2%
SCSS 3.7%
Other 7.6%