💈 ClipBook Build — Day 13A: Admin Dashboard · Full-Stack AI Prompt Web Apps

💈 ClipBook Build — Day 13A: Admin Dashboard

We're in the home stretch — the customer and barber sides are built. Today we add the control room: an admin-only dashboard so you can see the whole marketplace at a glance — users, bookings, revenue — and keep it safe behind a role check. 👇

Paste this into Claude Code / Cursor (agent mode):

Build the admin dashboard for ClipBook. It is only for users with role=admin.

1. Protect the route:

- Create /admin as an admin-only page. If the logged-in user is not role=admin, redirect them to /dashboard.

- Add the role check to the existing Supabase middleware (Day 2B) so /admin/* is blocked server-side, not just hidden in the nav.

2. KPI cards at the top of /admin (all computed from Supabase):

- Total users (count of users)

- Total bookings (count of bookings)

- GMV (sum of total_price on bookings with status 'completed')

- Take-rate revenue (GMV x PLATFORM_FEE_PERCENT from lib/money.ts, Day 11B)

Each card shows the number plus a small label — no charts needed yet.

3. Recent bookings table:

- The 20 most recent bookings, newest first.

- Columns: customer name, barber name, service, booking type (shop/home badge), date/time, status badge, total price.

- Clicking a row opens /bookings/[id].

4. User list:

- A searchable list of users: name, email, role badge (Customer / Barber / Admin), joined date.

- Add a search input that filters by name or email.

5. Admin access:

- Seed one admin user for testing: create a user with role=admin in the database (document the exact SQL or dashboard steps in a comment at the top of app/admin/page.tsx — do NOT hardcode credentials in the code).

- Show an "Admin" link in the nav ONLY when the logged-in user is role=admin.

Acceptance criteria:

- A customer or barber visiting /admin is redirected to /dashboard, even with the URL typed directly.

- The KPI numbers match the database (test with at least 5 seeded bookings, including one completed booking, so GMV and take-rate revenue are non-zero).

- The bookings table and user list render correctly with real data, and the search filter works.

- `npm run build` passes with no errors.

What you'll get when it works 👇

0 comments

💈 ClipBook Build — Day 13A: Admin Dashboard