Files
Crussell/obsidian/Crussell/Admin Manual.md
T
popertots 8574bf2221 feat: enriched edit request system with side-by-side snapshots, calendar preloading, and admin review UI
Backend:
- Add enriched response types (EditSnapshot, EnrichedEditRequest) with original vs proposed snapshots
- Add 4 new GET endpoints for viewing edit requests (user and admin scoped)
- Remove github.com/lib/pq dependency — use native PostgreSQL array scanning
- Clean up edit requests, time blockers, and notifications on booking cancellation
- Validate exceptional closed hours on admin approve (409 Conflict)
- Notification upsert on edit request replace (no duplicate admin notifications)

Frontend:
- New user EditRequestModal with time/services/both modes and lunch protection
- New admin EditRequestModal with side-by-side diff (date/time, services, notes)
- Integrate edit requests into PendingApprovals card and notifications page
- Preload 3 months of availability to prevent calendar snap-back
- Apply lunch protection to isDateUnavailable in BookingFlow and BookingCreateModal
- Fix accessibility: card list items use <button> instead of <div>

Dev & Docs:
- Seed edit requests in local-dev-2.sh
- Update all Obsidian manuals with enriched edit request documentation
- 42 new tests (438/441 passing)
2026-05-26 11:59:07 +01:00

27 KiB
Raw Blame History

Admin Manual

A practical guide for salon staff — how to use the admin side of the Crussell booking system for day-to-day operations.


Getting Started

Logging In

Go to the website and log in with your admin email and password. Once logged in as an admin, you'll see additional menu options that regular customers don't have access to — specifically the Today page and the Admin dashboard.

Two Main Admin Pages

  • Today — your daily operations hub. This is where you manage today's appointments, approve new bookings, and handle walk-ins.
  • Admin — the management dashboard. This is where you set up services, manage customers, adjust schedules, and handle the salon's settings.

Today Page

This is the page you'll use most often during the working day. It's divided into three main sections.

Current and Next Appointment

At the very top of the page, you'll see two cards:

Current Appointment (if one is happening right now):

  • Shows the customer's name
  • Lists the services they booked
  • Shows the start time and how long the appointment lasts
  • The appointment status updates automatically as time passes

Next Appointment (the one coming up after the current one):

  • Shows the customer's name and time
  • Shows how long until they arrive
  • Lists their services

Buttons on the Current Appointment Card

Edit — Opens a window where you can change which services are included in the appointment. You can add services, remove services, or swap them out. You can also adjust the price or duration of individual services if needed (for example, if a service took longer than expected last time). You can also update the appointment notes here.

Take Payment — Opens the payment modal where you can choose between Card (Square Terminal), Cash, or Gift Card payment. See the "Taking Payments" section below for full details.

Extend and Cancel — These buttons are placeholders and don't do anything yet.

Taking Payments

The Take Payment button on the Current Appointment card opens a multi-method payment modal:

Step 1: Review Services and Choose Payment Method

The modal shows each service on the booking with an editable price field. You can adjust individual service prices if needed (for example, if a service cost more or less than usual). Any changes are highlighted with a "was £X.XX" note. The subtotal updates automatically.

Below the services, you'll see three payment method buttons:

  • Card — Processes payment through the Square Terminal device. The customer taps their card on the Terminal.
  • Cash — Record a cash payment. You enter the amount received, the system calculates change due, and offers an option to keep the change as a tip.
  • Gift Card — Record a gift card payment. Enter the 12-digit gift card ID (formatted as XXXX XXXX XXXX as you type).

Step 2: Card Payment — Select Tip

If you chose Card, you'll be asked whether to add a tip:

  • Preset percentages: 10%, 15%, or 20% of the booking total
  • Custom amount: Enter any tip amount manually
  • The total with tip is shown before you confirm

Click Charge Card to initiate the Square Terminal checkout. The system polls for payment completion and updates the booking status automatically.

Step 3: Cash Payment — Enter Amount Received

If you chose Cash, enter the amount of cash the customer handed you:

  • The system calculates the change due automatically
  • If the customer gave more than the total, you can check "Keep [change] as tip" to record the excess as a tip
  • Click Confirm Cash to record the payment

Step 4: Gift Card Payment — Enter Card ID

If you chose Gift Card, enter the 12-digit ID printed on the gift card:

  • The ID is automatically formatted with spaces as you type (XXXX XXXX XXXX)
  • The field validates that all 12 digits are entered
  • Click Apply Gift Card to record the payment

Payment Confirmation

After any payment method succeeds, a receipt summary is shown with the payment amount, method, and a success indicator.

Today's Appointments

Below the current/next cards is a full list of every appointment scheduled for today, in chronological order.

Each appointment shows:

  • The customer's name
  • The time
  • The services
  • A colour-coded status indicator:
    • Pending — waiting for you to review and confirm
    • Confirmed — locked in and ready to go
    • In Progress — the appointment has started (this happens automatically when the start time arrives)
    • Completed — the appointment has finished (this happens automatically when the appointment duration has elapsed)
    • Cancelled — the appointment was cancelled

Tap or click any appointment to open its full details window, where you can see everything about that booking and take actions like approving or cancelling it.

Pending Approvals

This section shows all bookings that are waiting for your review. When a customer books online, their booking starts as "pending" — it won't appear in the main schedule until you confirm it.

For each pending booking, you'll see:

  • The customer's name
  • The requested date and time
  • The services they want

Confirm — Accepts the booking. It moves from "pending" to "confirmed" and appears in the main schedule.

Decline — Cancels the booking. The customer's appointment is removed and marked as cancelled by the salon.


Edit Booking Window

You reach this by going to TodayNext AppointmentEdit.

This window lets you change the services on an appointment that's currently happening or coming up.

What You Can Do

  • Add services — Tap to add extra treatments to the appointment
  • Remove services — Remove treatments the customer no longer wants
  • Swap services — Replace one service with another
  • Adjust prices — If a service needs a different price than usual (for example, extra-long nails), you can set a custom price for that specific service on this booking
  • Adjust durations — Similarly, you can set a custom duration for a service on this booking only
  • Edit notes — Add or change the notes on the booking

What the System Checks

  • You can't edit appointments that are already completed or cancelled
  • The system checks that your changes don't clash with the next appointment of the day
  • If the appointment falls during a special hours period (like a holiday schedule), you'll see a warning but can still proceed
  • If the customer had previously requested a reschedule, your edit clears their request

Admin Dashboard

The Admin page is your management centre. It has several sections, each handling a different part of the salon's operations.

Services

This is where you manage the list of treatments the salon offers.

Add a New Service:

  • Enter the service name (for example, "Gel Manicure")
  • Add a description (optional — shown to customers during booking)
  • Set the price
  • Set how long the service takes (in minutes)
  • Set a minimum age requirement (if the service isn't suitable for under-16s, for example)

Edit a Service:

  • Click on any service to change its name, description, price, duration, or age requirement

Delete a Service:

  • Removes the service from the list. Note: if the service has ever been used in a past booking, it can't be deleted (this keeps historical records accurate). You can deactivate it instead.

Activate / Deactivate:

  • Each service has an on/off toggle. Turning a service off hides it from the customer booking page, but keeps it in your system for records. Turn it back on when you want customers to be able to book it again.

Patch Test Configuration:

  • Some services require a patch test before booking. You can configure which services need one and set up the patch test details (how long the customer must wait after the test, and how long the test is valid for).

Customers

This section shows a searchable list of everyone who has booked with the salon.

What You See:

  • Each customer's name, email address, and account type
  • You can filter the list by account type (admin, verified, unverified, guest, affiliate)

Click on Any Customer to open their full profile (see the Customer Profile section below for details).

Bookings List

A chronological list of every booking in the system — past, present, and future.

What You Can Do:

  • Browse all bookings by date
  • Search for a specific booking (by customer name, date, or other details)
  • Filter by status (pending, confirmed, completed, cancelled, etc.)
  • Click any booking to see its full details and take actions

Holiday Hours

This is where you set up special opening hours for holidays, bank holidays, or any period when your normal schedule changes.

How It Works:

  1. Create a schedule group — Give it a name like "Christmas Week" or "August Bank Holiday"
  2. Set the hours for each day of the week — For example, during Christmas week you might want MondayFriday to be 10am2pm instead of your usual 9am5pm, and Saturday to be closed
  3. Apply the group to specific weeks — Choose which Monday-starting weeks this schedule applies to. The system uses the Monday of each week as the reference point

Example: If you create a "Christmas Schedule" group with reduced hours and apply it to the week starting Monday 22nd December, those hours will be used for that entire week (Monday 22nd through Sunday 28th).

To Remove: Delete the schedule group when it's no longer needed.

Weekly Schedule

This is where you set your regular, week-to-week opening hours.

  • For each day of the week (Monday through Sunday), set the opening time and closing time
  • Toggle any day on or off — for example, if you decide to start opening on Saturdays, just turn Saturday on and set the hours
  • Changes take effect immediately — customers will see the updated availability right away

Discount Campaigns

This is where you set up promotional discounts.

Time-Based Campaigns:

  • Set a start date and end date
  • Choose a discount percentage (for example, 5% off)
  • Choose who it applies to: all bookings, first-time bookings only, or new customers only
  • The discount automatically applies to eligible bookings during the campaign period

Milestone Campaigns:

  • These trigger when a customer reaches a certain milestone — for example, their 5th booking, or the anniversary of their first booking
  • Set the milestone type and value
  • The discount applies automatically when the milestone is reached

Viewing Campaign Stats:

  • For each campaign, you can see how many times it's been used and how much discount has been given out

Campaign Statuses:

  • Draft — set up but not yet active
  • Active — currently running
  • Completed — the campaign period has ended
  • Cancelled — you've stopped the campaign early

Walk-In Bookings

For customers who arrive at the salon without a prior appointment.

How to Book a Walk-In

  1. Open the Walk-In booking tool from the Today page or Admin dashboard
  2. Select the services the customer wants — the same service list appears as for online bookings, showing prices and durations. The system will show which services the customer is eligible for based on their age and patch test history
  3. Choose a time slot — the system shows available slots. When you pick one, it's temporarily held for 5 minutes while you complete the booking. This is a shorter hold than other booking types because walk-ins are happening right now
  4. Select or create the customer:
    • If they're an existing customer, search for them by name or email
    • If they're new, fill in their details (name, email, phone number). A guest account will be created for them
    • If you leave the phone number blank, it defaults to a standard UK number
  5. Confirm the date and time and add any notes
  6. Submit the booking — it's created immediately

Call-In / Message-In Bookings

For customers who phone or message to book an appointment.

How to Book a Call-In

  1. Open the Call-In booking tool from the Admin dashboard
  2. Find or create the customer — search for an existing customer, or fill in details for a new one
  3. Select the services they want — again, eligibility is checked based on their age and patch test records
  4. Choose a date and time — the system shows available slots. When you pick one, it's held for 60 minutes while you complete the booking. This is longer than walk-in because you're still on the phone or in conversation with the customer
  5. Review the booking — check all the details are correct
  6. Submit — the booking is created

The Difference Between Walk-In and Call-In

The only real difference is the hold time on the slot:

  • Walk-in: 5 minutes (the customer is standing right there, so you'll be quick)
  • Call-in: 60 minutes (you might need time to discuss options with the customer on the phone)

Customer Profile

When you click on a customer's name (from the Customers list or from a booking), their full profile opens. This is your complete view of everything about that customer.

Personal Details

  • Name, email, phone number, date of birth
  • Profile photo (if they've uploaded one)
  • When they registered and when they last logged in
  • A notes field where you can add any information about the customer (allergies, preferences, etc.)

Appointment History

A complete list of every appointment this customer has ever had with the salon — past and upcoming. For each one, you can see:

  • Date and time
  • Services
  • Price
  • Current status

Customer Relationship Summary

This section gives you a quick overview of the customer's history with the salon:

  • Total spend — how much they've paid across all completed appointments
  • Total visits — how many appointments they've completed
  • First visit and last visit dates
  • Average visits per month — how regularly they come in
  • Top 5 most booked services — which treatments they get most often
  • Notes history — a log of changes you've made to the customer's notes over time

Patch Tests

This section shows the customer's patch test history.

View existing patch tests:

  • See which patch tests the customer has had and when they were done

Record a new patch test:

  • Select which patch test was completed (for example, "Gel Allergy Test")
  • Add notes if needed (for example, "2-minute walk-in patch test — no reaction")
  • This is especially useful for walk-in customers who get a quick patch test done on the spot

Why this matters:

  • When you're booking for this customer, the system uses their patch test records to determine which services they're eligible for. If they need a patch test for a service and don't have one on record, that service will be greyed out.

Loyalty and Referrals

  • Loyalty stamps — their current stamp count
  • Referral code — their unique code they can share with friends
  • Referral history — who they've referred and who referred them
  • Whether the customer has agreed to the privacy policy and terms
  • Whether they've agreed to data retention
  • When these consents were last updated

Booking Details Window

When you click on any booking (from the Bookings list or from Today's appointments), a window opens showing everything about that booking.

What You See

  • Customer name and contact details
  • Date and time of the appointment
  • How long it lasts
  • The services included and their prices
  • The total price
  • Any notes on the booking
  • The current status

Actions You Can Take

Approve — If the booking is pending, this confirms it. The appointment moves into the confirmed schedule.

Cancel — Cancels the booking. If the booking was pending, it's simply removed. If it was already confirmed, it's marked as cancelled by the salon and a note is made of the cancellation.

Edit — Opens the Edit Booking window (described above) where you can change the services, prices, durations, and notes.


Approval Window

When you click Decline on a pending booking, or when you choose to confirm one, the Approval window appears.

Confirm — Accepts the booking. It becomes confirmed and appears in the schedule.

Decline — Rejects the booking. It's cancelled and marked as cancelled by the salon.

The window shows the full booking details so you can review them before making your decision.


Notifications

The notifications page keeps you informed about everything happening with your bookings and customers. You'll find a bell icon in the top-right corner of the navigation bar — if there's a red dot on it, you have unread notifications.

How to Access

Click the bell icon in the top-right corner of the website to go to the Notifications page. The bell shows a number indicating how many unread notifications you have.

What You'll See

Notifications are sorted by importance, with the most urgent at the top:

  1. Booking Pending Approval — A booking needs your review and approval
  2. Booking Cancelled — A booking was cancelled
  3. Late Cancellation (< 24h) — A customer cancelled less than 24 hours before their appointment
  4. Deposit Issue — A deposit-related problem
  5. Deposit Payment Received — A deposit payment came through
  6. Affiliate Referral Claimed — Someone used a referral code
  7. Booking Edit Requested — A customer wants to change their booking
  8. New Booking Received — A new booking was made online
  9. No Payments in 1 Month — No payments recorded in the last month
  10. No Payments in 1 Week — No payments recorded in the last week

Within each priority level, older notifications appear first so you see the ones that have been waiting longest.

What Each Notification Does

Booking Pending Approval:

  • Shows "Approve Booking" button
  • Opens the approval window where you can confirm or decline the booking
  • You can also adjust the price, duration, and add notes before confirming

New Booking Received / Booking Edit Requested:

  • Shows "See Booking" button
  • Opens a read-only view of the booking details
  • No approval needed — just for your awareness

Late Cancellation / Deposit Issue / No Payments:

  • Shows "See User" button
  • Opens the customer's full profile so you can review their history, spending, and notes

All other notifications:

  • Show only the "Acknowledge" button
  • These are informational — no further action needed

Acknowledging Notifications

Every notification has an "Acknowledge" button. Clicking it marks the notification as seen and removes it from the default view.

When you click "Approve Booking", "See Booking", or "See User", the notification is automatically acknowledged for you — you don't need to click Acknowledge separately.

Viewing Old Notifications

At the top of the Notifications page, there's a "Show acknowledged" toggle. Turn it on to see all notifications you've already acknowledged, sorted newest first. This is useful if you need to look back at something you've already dealt with.

Pagination

If you have many notifications, they're split into pages of 20. Use the Previous and Next buttons at the bottom to navigate.

How Notifications Are Created

  • Every booking made through the website creates a "New Booking Received" notification
  • If a booking has notes attached or is for today, an additional "Booking Pending Approval" notification is also created so you know it needs your attention
  • Edit requests from customers create a "Booking Edit Requested" notification
  • If the booking being edited is still pending, an additional "Booking Pending Approval" notification is also created
  • Admin-created bookings (walk-ins, call-ins) do not create notifications — you already know about them because you created them

Uploading Portfolio Images

The portfolio is the salon's gallery of nail art photos that customers can browse on the website.

How to Upload

  1. Go to the Admin dashboard
  2. Find the image upload section
  3. Drag and drop an image file, or click to select one from your device
  4. A preview of the image appears so you can check it looks right
  5. Add tags — type keywords that describe the image (for example, "french tip", "red", "summer", "glitter"). As you type, the system suggests tags that have been used before, so you can keep tags consistent
  6. A confirmation window appears before the image is uploaded — this is your last chance to double-check
  7. Confirm — the image is uploaded and appears in the portfolio gallery

Tips for Tagging

  • Use consistent tag names — the system suggests previously used tags to help with this
  • You can use the keyboard to navigate tag suggestions quickly
  • Tags are how customers find images in the gallery, so be descriptive

Time Blockers

Time blockers are periods when the salon is unavailable for bookings — for example, a staff meeting, a personal appointment, or a lunch break.

How to Add a Time Blocker

  1. Go to the Admin dashboard
  2. Find the time blockers section
  3. Set the start date and time
  4. Set the duration (how long the block lasts)
  5. Add a description (for example, "Staff meeting" or "Lunch break")
  6. Save

The blocked period will no longer appear as available when customers or you are booking appointments.

One-Off vs. Recurring

  • One-off blockers happen once — for example, "Dentist appointment on 15th March at 2pm"
  • Recurring blockers happen on a schedule — for example, "Lunch break every Wednesday from 1pm to 2pm". You set a pattern and the system applies it automatically

Removing a Time Blocker

Simply delete it from the list. The time slot becomes available for booking again.


How Booking Statuses Work

Every booking has a status that tells you where it is in its lifecycle. Here's what each one means and how it changes.

The Status Flow

Pending → Confirmed → In Progress → Completed

A booking can also branch off to:

  • Cancelled by customer — the customer cancelled
  • Cancelled by salon — you cancelled
  • No-show — the customer cancelled less than 24 hours before the appointment
  • Re-schedule — the booking time was changed

Automatic Status Changes

Some statuses change on their own:

  • Pending → Confirmed: This doesn't happen automatically — you need to approve pending bookings
  • Confirmed → In Progress: Happens automatically when the appointment's start time arrives
  • In Progress → Completed: Happens automatically when the appointment's duration has elapsed

Manual Status Changes

You change statuses by taking action:

  • Approve a pending booking → it becomes confirmed
  • Decline a pending booking → it's cancelled by the salon
  • Cancel a confirmed booking → it's cancelled by the salon
  • A customer cancelling more than 24 hours before → cancelled by customer
  • A customer cancelling less than 24 hours before → no-show (unless you forgive it)

What Happens When You Cancel

  • If the booking was pending: It's simply deleted. No record is kept.
  • If the booking was confirmed or in progress: It's marked as cancelled by the salon, and a note is made of the cancellation.

Reschedule Requests from Customers

When a customer wants to change their appointment time, they can submit a reschedule request from their account page.

What You'll See

The request appears in the Pending Approvals section on the Today page. You'll see:

  • The customer's name
  • Their current appointment time
  • The new time they're requesting
  • Any notes they've added
  • Any services they want to change

The system shows a side-by-side comparison of the original booking versus the proposed changes:

  • Original snapshot: current start time, end time, services (with prices and durations), and notes
  • Proposed snapshot: the new start time, recalculated end time, updated services, and new notes

This lets you see exactly what will change before you approve or decline.

What You Can Do

Approve — The booking is updated to the new time and services. The customer's request is cleared.

Decline — The booking stays as it is. The customer's request is cleared and their original appointment remains unchanged.

Things to Check Before Approving

  • The new time doesn't clash with another appointment
  • The new time falls within your working hours
  • The new time doesn't fall during a holiday/closed period — the system will block approval if the proposed time is during exceptional closed hours
  • If the customer is changing services, the new total duration fits in the slot

Can the Customer Withdraw Their Request?

Yes — a customer can cancel their own reschedule request at any time before you've reviewed it.

What Happens When a Booking is Cancelled

If a customer cancels their booking entirely, any pending reschedule request for that booking is automatically removed, along with the associated time block and notification.


The Deposit System (Admin View)

How Deposits Work

When a customer cancels less than 24 hours before their appointment (and you don't forgive it), they receive 3 deposit obligations. This is tracked on their account.

What This Means

  • Customers with outstanding deposits can only book appointments that are at least 24 hours away
  • They can only have one active booking at a time
  • Each time they complete an appointment and pay, their deposit count goes down by 1
  • Once all deposits are cleared, they can book normally again

When Creating a Booking Manually

When you create a booking for a customer (walk-in or call-in), the system checks whether they have outstanding deposits. If they do, it applies the same restrictions.

However, you can bypass deposit checks when creating a booking manually. There's an option to override the deposit rules — useful if you want to book a customer in despite them having outstanding deposits (for example, if you've spoken to them and agreed on an arrangement).

Forgiving a Late Cancellation

When a customer cancels late, you can choose to forgive the penalty. If you do:

  • The cancellation is treated as a normal cancellation (no deposit obligations)
  • The booking is marked as "cancelled by customer" rather than "no-show"

Loyalty Stamps (Admin View)

How Stamps Are Earned

  • Customers earn 1 stamp for each completed appointment
  • Maximum 1 stamp per day — even if a customer has multiple appointments on the same day, they only get one stamp
  • Appointments with a total price of £0 don't earn stamps

How Discounts Are Applied

  • At 10 stamps, a discount is automatically set up
  • The discount is 10% off the customer's next completed appointment
  • After the discount is used, stamps reset to 0 and the cycle starts again
  • Discounts expire after 6 months if not used

What You Can See

On a customer's profile, you can see their current stamp count and any pending or applied discounts.