Welcome to the Service Matrix! Think of this as your digital cheat-sheet for everything related to stylists and the services they offer. Here’s a detailed guide on how to use it.
Getting Started: The Basics
Adding a Stylist: In the top-left corner, type a new stylist's name into the "New Stylist Name..." box and click the "Add Stylist" button. They will be added to the bottom of the list.
Adding a Service: Similarly, type a new service into the "New Service Name..." box and click "Add Service". A new column for this service will appear on the right side of the table.
Marking Services: In the main grid, simply check the box where a stylist's row and a service's column meet to indicate they perform that service. On mobile, use the toggle switch.
Editing Information
Edit a Stylist's Name: Single-click on a stylist's name to open their Profile pop-up. Next to their name at the top, click the little pencil icon (✏️) to change it.
Edit a Service's Name: Double-click on a service name in the table header. An input box will appear, allowing you to type a new name. A trash can icon (🗑️) will also appear if you wish to delete the service entirely.
Edit a Price or Level: Simply single-click on any price or a stylist's level (e.g., "Level Five") in the table. An input box will appear for you to enter the new value.
Stylist & Service Profiles
Stylist Profiles: Single-click any stylist's name to open their profile. Here you can upload a photo, change their avatar color, and write a bio or important notes about their specialties.
Service Details: Single-click any service name in the table header. A details panel will open, showing which stylists perform that service. You can also add information like the standard duration, price range, and a detailed description for that service.
Organizing Your View
Search and Filter: Use the central search bar to quickly find a stylist by name. You can also use the dropdown menu next to it to filter the view and show only stylists of a specific level.
Reorder Stylists (Drag & Drop): To change the order of stylists, just click and hold on a stylist's row (or their card on mobile), drag it to a new position, and release.
Sort Columns: To sort the table, click the small arrow icons (▲▼) in any column header. You can sort by stylist name (A-Z) or by price (low to high). Clicking the same arrow again will reverse the sort direction.
Advanced Tools
Autosave & Manual Save: All your changes are automatically saved to your browser a few seconds after you stop working. The "Last Updated" timestamp in the footer will confirm the last save time. You can also click the green "Save" button for an immediate save.
Developer Mode (Ctrl+Alt+D): For power users, pressing `Ctrl+Alt+D` on your keyboard will reveal a hidden set of tools: **Undo**, **Redo**, and a **Reset All Data** button. The Undo/Redo functions can also be accessed with the standard `Ctrl+Z` and `Ctrl+Y` keyboard shortcuts.