Overview

The HairShop website shows the salon's services and prices, the stylists, a gallery of recent work, and lets guests book a visit online: they choose a service, a stylist (or Any stylist), a day and a free time. There is no deposit and no card online; guests pay at the salon after the visit, by card or cash, and can add a tip.

The staff area is where the salon runs the day. Every visit moves through four steps: booked, checked in (arrived), done and paid. Each guest has one record in the guest book with notes and their full visit history, and the tips report shows what each stylist earned in tips. Managers keep services, prices, stylists' working hours, website pages and settings up to date. Every change is written to an activity log.

How the pieces fit together

Guests write bookings and messages; staff run the visits and keep the services, hours and pages the website shows.

Who does what

A manager sets what each person can see and do, area by area. See 14.2.

1. Getting Started

1.1 Signing in

Click Staff sign in at the bottom of any page of the website, or go to /AdminLogin. Enter your User name and Password and click Sign in.

The sign-in card.

• A wrong user name or password shows That user name and password do not match.
• After 6 wrong tries within 5 minutes the page answers Too many wrong passwords. Wait five minutes and try again.
• An account that is switched off cannot sign in.

1.2 Choosing your own password

A new account, or one whose password a manager has reset, starts with a temporary password. The first time you sign in with it, the card asks you to choose your own: type it twice in New password and New password again and click Save and sign in. It must be at least 8 characters and different from the one you were given.

1.3 The staff screen

A: the salon name. B: the menu, grouped Salon, Setup, Website, Admin and You, with counts. C: your name, View site (opens the website in a new tab) and Sign out. D: views, dates and filters. E: the page itself; click a row or a visit to open it.

• The menu shows only the areas you have rights to. Without the Activity log right you see My activity instead.
• The number next to Bookings counts guests in the chair today; next to Checkout, visits done and waiting to pay; next to Messages, unread messages.
• Windows close with Cancel, the × button or Esc. If you changed something and did not save, the site asks Leave without saving? first.

1.4 Confirmations

Every step that changes a visit, a payment or a record asks first. The right-hand button goes ahead; the left-hand button, Esc or a click outside the box steps back without changing anything. Some confirmations have an optional box for a reason or a note.

Marking a visit done, and a no-show with an optional note.

1.5 What you can see

A manager decides, area by area, whether you can View, Edit and use the area's Extra right. A stylist's account can also be limited to own records only: then Bookings, Checkout, Guests and the Tips report show only that stylist's visits.

Theo, a stylist with own records only: a shorter menu, and only his visits and tips.

His Bookings page shows one column: his own day.

If you open an area you have no right to, the page says No access. If you try a step you are not allowed to do, a short message explains it, for example You are not allowed to cancel, restore or mark no-shows., and the attempt is written to the activity log as Refused.

1.6 On a phone

The staff area works on phones and tablets. The menu folds behind the ☰ button at the top left.

1.7 Staying signed in and signing out

• A sign-in lasts 8 hours and renews while you keep working. When it runs out, the next click takes you back to the sign-in page.
• Click Sign out at the top right when you leave a shared computer.
• If a manager switches your account off or resets your password, you are signed out everywhere.

2. Today

Today opens after you sign in: a greeting, today's date and a New booking button.

2.1 The four numbers

A stylist with own records only sees these numbers for their own visits.

2.2 Today's visits and shortcuts

Today's visits lists, in time order, today's visits that are still booked, in the chair, or done and not yet paid, with the guest, service, stylist and status. Click a guest's name to open the guest record, or Day view to open Bookings. Shortcuts lists every area you can use.

3. Bookings

Bookings shows every visit, as a Day view with one column per stylist or as a List. Online bookings arrive here on their own; staff add phone bookings and walk-ins.

3.1 The visit flow

Solid arrows move a visit forward; dashed arrows step it back. No-show, cancel and restore need the Extra right.

3.2 The day view

• Use ← and → to change day, the date box to jump, and Today to come back. All stylists narrows the view to one stylist.
• Each column is one active stylist. Grey areas are outside their working hours, breaks and days off, or when the salon is closed.
• Each visit shows the time, the guest, the service and the status (Paid once paid). Cancelled visits and no-shows are not drawn here; the heading counts them and they appear in the List.
• With the Edit right, click an empty spot in a column to start a booking for that stylist at that time.

3.3 Opening a visit

Click a visit. The window shows the reference (such as HS-CUHCD), status, when, service and price, stylist, the guest with their number of visits done and their notes, phone, email, the booking note, how and when it was booked, and the arrival and finish times.

The buttons depend on the status and your rights:

3.4 Checking in and finishing

1. When the guest arrives, open the visit and click Check in, then Check in again to confirm. The visit becomes Arrived and counts as in the salon.
2. When the service is finished, click Mark done and confirm. The visit moves to Checkout, waiting for payment; the toast says Marked done. Ready to check out.
3. Click Check out to take payment (see 4.2).

Clicked too soon? Undo check-in puts an arrived visit back to Booked, and Back to in the chair puts a done visit back to Arrived. A paid visit cannot change; reopen its payment in Checkout first.

3.5 Adding a phone booking or walk-in

1. Click New booking, or click an empty spot in the day view.
2. Under Find a guest, type part of a name, phone number or email and choose the guest from the list. For a new guest, fill in Name, Phone and, if you have it, Email; the guest record is made when you save, or matched to an existing guest with the same phone or email.
3. Choose the Service and the Stylist. Only stylists who offer that service are listed.
4. Choose the Day and a Time. The time list shows only free starts, with how many there are.
5. Choose How was it booked? (By phone, Walk-in or Online), add a note if needed, and click Save booking.

The server checks the time again when you save, with the same rules as online booking except that staff can book up to 15 minutes into the past (for a walk-in who has just sat down) and beyond the online booking range. If the time is no longer free, the form says why, for example That time was just taken. Please choose another time.

3.6 Changing, cancelling and restoring

• Change (booked or arrived visits) opens the same form to move the visit to another service, stylist, day or time. Click Save changes.
• Cancel booking asks for an optional reason. The time becomes free for others and the reason is kept on the visit.
• No-show asks for an optional note and frees the time.
• Restore booking puts a cancelled visit or no-show back to Booked, but only while the time is still free; otherwise make a new booking.
• Book again starts a new booking for the same guest.

The website does not send emails or texts. Phone the guest when you change or cancel their visit.

3.7 The list view

Click List to see bookings between two dates (From and To, 30 days by default), 20 a page. Filter by status, including Done, not paid, and search by name, phone, email or reference. Click a guest's name to open the guest record, or the row to open the visit.

4. Checkout

Checkout is the till: when a visit is done, take payment for the services, add a tip, and record card or cash. There is no online payment and no deposit.

4.1 The queue

The left column has three lists:

• Waiting to pay: visits marked done and not paid, with the price list amount. The number also shows next to Checkout in the menu.
• In the chair: guests checked in today. Open one and click Visit done, check out to finish the visit and take payment in one go.
• Paid today: today's payments, with totals for services, tips, card and cash underneath.

4.2 Taking payment

1. Click the guest under Waiting to pay (or Check out on the visit in Bookings).
2. Check the Services. The visit's service is there at its price-list price. For a from-priced service (for example balayage or long hair), type the final price in its box; it cannot be lower than the list price.
3. To add another service done in the same visit, choose it under Add another service… and click Add. Remove a line with ×. A bill holds 1 to 10 services.
4. If you give a discount, type the amount in Discount (optional). It is taken off the services and cannot be more than the services.
5. Choose the tip: No tip, one of the three percentage buttons (15%, 18% and 20% unless a manager changed them), or Custom and type an amount from $0 to $1,000.
6. Choose Card or Cash under Paid by.
7. Check Total to pay, take the money, then click Take payment and confirm with Payment taken.

4.3 How the total is worked out

The same numbers appear in the tips report: average tip % is tips divided by services before discount.

4.4 Receipts and reopening a payment

After payment the visit is locked and shows a receipt: each service, the services total, any discount, the tip, Total paid and how it was paid. Print receipt prints it. You can open any paid visit again from Paid today, from the guest record or with See receipt in Bookings.

Made a mistake? Staff with the Extra right Reopen a paid visit can click Reopen payment, add an optional reason and confirm. The payment is removed (the old amount and the reason are written to the activity log) and the visit is back under Waiting to pay to be taken again.

5. Guests

The guest book keeps one record per guest, matched by phone or email. Online bookings and staff bookings add a guest automatically the first time, and every later booking with the same phone or email joins the same record.

5.1 Finding a guest

Search by name, phone or email, and sort by Most recent visit, Name A–Z, Most spent, Next visit or Newest guests. The list shows contact details, visits done, last and next visit, money spent and tips given, 20 a page.

5.2 The guest record

Click a guest to open their record:

• Totals: visits done, money spent on services, tips given and no-shows.
• New booking for … starts a booking for this guest; Call and Email open your phone or mail program.
• Name, phone, email and Notes (up to 1,000 characters): hair preferences, color formulas, how they like their coffee. Click Save guest.
• Upcoming and open and Past visits, each with the service, stylist, status and the steps Booked, In and Paid, the amount paid, the tip and card or cash. Click a date to open that visit in Bookings, or Check out on a done visit.

5.3 Adding, merging and deleting

• Add a guest adds someone before their first booking. A guest needs a name and a phone number or an email. If another guest already has that phone or email, the form says so and nothing is saved.
• Delete guest (Extra right Delete a guest) is only possible for a guest with no visits on record.
• A stylist with own records only sees just the guests who have booked with them.

6. Tips Report

The tips report shows tips from paid visits by the day they were paid, for each stylist.

6.1 Reading the report

1. Choose a period with Today, This week, This month or Last month, or set From and To. It opens on this month.
2. Pick one stylist or All stylists.

The boxes show tips in total, tips by card, tips in cash and the average tip. The table has, per stylist, paid visits, services (after discounts), tips by card, tips in cash, tips total and average tip %. Below it, Each payment lists the latest 300 payments.

6.2 Downloading the CSV

Download CSV saves every payment in the period as a spreadsheet file with the paid time, reference, guest, stylist, services, discount, tip type, tip, total and method, ready for payroll.

7. Services

Services are the price list on the website and in Checkout, grouped by category.

7.1 Adding or changing a service

Click Add a service, or click a service to change it, then Save.

The window also says which stylists offer the service. Who offers what is set on each stylist (see 8.1). A service with bookings on record cannot be deleted; untick On sale to hide it instead.

7.2 Categories

Categories renames, reorders or adds price-list sections. A category that still has services cannot be removed. Click Save categories.

8. Stylists

Stylists are the profiles on the website, the services each person does, and their working hours. Online booking only offers times inside these hours.

8.1 Profile and services

Click a stylist (or Add a stylist). Set the Name, Role, Short bio (up to 500 characters), Specialties and Order, choose a photo from the media library with Choose photo, and tick the services they offer. Taking bookings and shown on the website switches the stylist on or off without losing their history.

8.2 Working hours, breaks and days off

Changing hours needs the Extra right Working hours and days off.

• For each weekday, tick the day and set From, To and an optional break (Break from, Break to). Leave the break empty if there is none. Days when the salon is closed are marked (salon closed).
• Hours are always limited by the salon's opening hours in Settings.
• Add days off adds a holiday or sick day: a first day, a last day and a note. Up to 60 periods.

When you save new hours, the site warns if upcoming bookings now fall outside them and names the first one; move those visits in Bookings.

A stylist with bookings on record cannot be deleted; untick Taking bookings instead.

9. Pages

Pages edits the words and pictures of the six public pages: Home, Services & prices, Stylists, Gallery, Book online and Contact. Each page is a list of blocks, edited in place.

9.1 Editing text and pictures

• Pick the page with the tabs at the top.
• Click any text to change it. In longer text, select words to use the small toolbar: bold, italic, link, list and clear.
• Click Change on a picture to choose another photo or video from the media library, or Remove.
• Write {name} to show the salon name from Settings.

9.2 Moving, hiding and adding blocks

• Drag a block by its handle, or use the up and down arrows. Hide keeps a block but takes it off the website.
• Add a block at the bottom: Page top, Text, Picture and text, Cards, Steps, Numbers, Checklists, People, Questions, Quote, Picture or video, Call to action.
• Blocks marked From your data come from the salon's own data or are forms: Popular services, The team and Opening hours and address (Home), Price list, Stylist cards, Gallery grid, Booking form, and Contact details and form. They can be moved, hidden and retitled, not removed.

9.3 Saving and versions

Nothing changes on the website until you click Save page. View page opens it in a new tab. The last five saved versions are kept: Versions lists them, and restoring one makes it live right away. Button links must point to a page of the site (such as Book), a web address starting with https:// or http://, an email (mailto:), a phone number (tel:) or a # anchor; otherwise saving stops with Check the link of the button …

10. Media Library

The media library holds the photos and videos used on the website: page pictures, stylist photos and the gallery.

10.1 Uploading

Click Upload photos or videos. Photos: JPG, PNG, WebP or GIF up to 8 MB. Videos: MP4 up to 30 MB (a manager can change this in Settings, up to 100 MB). Up to 20 files at a time. Files are checked by their contents, so a renamed file of another kind is refused.

10.2 Alt text and the gallery

Click Edit on a file to write a short Description for screen readers (alt text), a Note for staff, and to tick Show in the gallery with a Gallery group. Ticked files appear on the Gallery page under that group's filter.

10.3 Deleting

Deleting needs the Extra right Delete files and asks first. A file still used on the website cannot be deleted; the message names where it is used, so replace it there first.

11. Messages

Messages are notes sent from the Contact page. Unread messages are marked and counted in the menu.

11.1 Reading and answering

• Choose All or Unread, or search by name, email or text.
• Click a message to open it. With the Edit right, opening it marks it read; Mark as unread puts the mark back.
• If the sender is already a guest, their name links to the guest record.
• Reply by email opens your own mail program. The website does not send email.
• Delete needs the Extra right Delete messages.

12. Activity Log

Every sign-in, change, payment and refused attempt is written to the log, newest first. The latest 5,000 entries are kept, 25 a page.

12.1 Reading the log

• Filter by person and by result, or search for a guest name, a reference or a word such as checkout.
• Refused rows are attempts without the right, and wrong passwords.
• Staff without the Activity log right see My activity: only their own entries.

13. Settings

Settings hold the salon details, opening hours, booking rules, tip buttons and the video size limit. Only managers can open them. Changes show on the website as soon as you click Save settings; every field is checked first, and wrong fields are highlighted.

13.1 The salon

Salon name (2 to 40 characters), Tagline, Phone, Email, Street address, Town, state and ZIP and a Directions note shown under the map on the Contact page. They appear in the header, the footer, the Contact page and the booking confirmation.

13.2 Opening hours

Tick each day the salon opens and set its hours; at least one day must be open. Online booking never offers times outside these hours, whatever a stylist's own hours say.

13.3 Booking rules, checkout and media

13.4 How free times are worked out

The same check runs again on the server when a guest or staff member saves the booking.

14. Users and Rights

Only managers can open Users and rights. Give each person their own account: the activity log shows who did what by account.

14.1 Adding a user

1. Click Add a user.
2. Enter the Name, a User name (3 to 40 letters, numbers, dots or dashes) and a Job title.
3. For a stylist, choose the Linked stylist and, if they should see only their own work, tick Own records only.
4. Tick Manager only for people who may change Settings and Users; for everyone else, set their rights (see 14.2).
5. Click Add user. The window shows the user name and a temporary password once; give them to the person. They choose their own password the first time they sign in.

14.2 The rights grid

For each area choose None, View, Edit or Extra. Edit includes View; Extra includes Edit.

Typical set-ups: front desk with Bookings, Checkout and Guests on Extra or Edit and Messages on Edit; a stylist linked to their profile with own records only, Bookings and Checkout on Edit, Guests and Tips report on View.

14.3 Changing, resetting and switching off

• Click a person to change their details or rights, then Save.
• Reset password gives a new temporary password. The person is signed out everywhere and must choose a new password with the temporary one. Change your own password in My account.
• Untick Can sign in to switch someone off; they are signed out at once. Accounts are kept so the log keeps their name.
• You cannot switch yourself off or remove your own manager tick.

15. My Account

My account shows your name, user name and rights.

15.1 Changing your password

1. Type your Current password.
2. Type the New password (at least 8 characters, different from the current one) and again in New password again.
3. Click Change password. You stay signed in here; other devices are signed out.

16. The Public Website

This chapter shows what guests see, so you can help them on the phone.

16.1 Home

The home page shows the salon's welcome, popular services with prices and Book this buttons, the team, a video and the opening hours with the address. Its words and pictures are edited in Pages.

16.2 Services & prices and Stylists

Services & prices lists every service on sale by category, with the time, price (from prices marked) and a Book button. Stylists shows each stylist's photo, role, specialties and working days, with Book with … and About ….

16.3 Gallery

The gallery shows the files ticked Show in the gallery in the media library, with a filter chip per gallery group and a large view on click.

16.4 Book online

The five steps of Book online. A summary card on the right keeps the choices and the price.

• The day strip shows the next 14 days with how many times are free; Later date picks a day further out, up to the online booking range.
• Times are grouped into morning, afternoon and evening. Only free starts are shown (see 13.4). With Any stylist, the server gives the visit to a free stylist with the fewest visits that day.
• Guests give their name and a phone number; email and a note (up to 300 characters) are optional.
• If someone else took the time first, the page says That time was just taken. Please choose another time.

The confirmation shows the reference, day and time, service, stylist, price and address, with the salon's phone number for changes. It is shown on screen only; no email is sent, so guests should note the reference.

16.5 Contact

The contact form asks for a name, an email, an optional phone, a topic (A question about a service, Weddings and events, Gift cards, Feedback or Something else) and a message of 10 to 2,000 characters. Messages arrive in Messages.

16.6 On a phone

17. Installation & Setup

This chapter is for the person who installs the site and looks after the server.

17.1 The very first sign-in

The site makes its own first password the first time the sign-in page opens. Each site gets its own.

1. Start the site on the server and open /AdminLogin in a browser on that same computer (address localhost). A box shows the user name admin and the first password. Visitors from other computers never see it.
2. The same details are in appConfig/initial-admin.txt, if you cannot open a browser on the server.
3. Sign in and choose your own password (at least 8 characters, different from the first one).
4. Open Users and rights, give the account your real name, and add an account for each member of staff.

17.2 Production setting

In appConfig/application.cfg, make sure the line app.app.runmode is set to 1 (Production), so staff sign in with their own accounts.

17.3 Locked out of every manager account

If no manager can sign in any more, open data/staff.json on the server, remove the manager accounts (or set their admin to false), save, and open the sign-in page. The site makes an admin account with a new first password, as in 17.1.

17.4 Folders the site writes to

Give the web server's account (on IIS, the application pool) Modify rights on these folders:

17.5 HTTPS and private files

• Run the site on HTTPS only; staff passwords and guest details travel through it.
• After publishing, open /data/staff.json and /appConfig/initial-admin.txt in a browser. Both must answer 404 Not Found. The included web.config blocks them on IIS.

17.6 Time zone

Today, free times, the booking notice and the day view all use the server's clock. Set the server to the salon's time zone.

17.7 Backups and updates

• Back up data/ and images/uploads/ every day. They are the salon's whole record.
• When you publish a new version of the site, do not copy the project's data/ folder over the live one: download the live data/ first, or leave it out of the publish.

18. Reference

18.1 Limits at a glance

18.2 Status colours

18.3 Booking references

Every booking gets a reference such as HS-6AEG4. Search for it in the Bookings list, or in the activity log.

19. Quick Answers

19.1 Common questions