Stylist OS is a JSON-powered mock dashboard for a personal stylist named Jordan Blake
(4.8 stars, 8 years experience). The app is organized into four tabs — Clients, Wardrobe,
Outfits, and Schedule — which are the only interactive elements on the page. Each tab
switches the content panel below to display the corresponding list of items loaded from
JSON data. All displayed items are static and non-interactive.
Clients Tab
Displays a list of clients (e.g., Sarah Mitchell, Marcus Johnson) with their style preference, body type, and preferred color palette tags.
Wardrobe Tab
Lists wardrobe items (e.g., Black Blazer, Cream Linen Shirt) with brand, category, color tag, and price. All entries are read-only.
Outfits Tab
Shows saved outfit combinations (e.g., Office Professional, Weekend Casual) with occasion, season, a star rating, and a wear count.
Schedule Tab
Displays upcoming appointments (e.g., fullStyling, consultation) with date, time, and location. Session types appear in raw camelCase format (e.g., "fullStyling" instead of "Full Styling").
Things That Didn't Work As Expected
No items are clickable or expandable.
Every card under all four tabs — clients, wardrobe pieces, outfits, and appointments —
appears as a static display card with no detail view, edit mode, or drill-down interaction.
For a "dashboard" tool, the expectation is that clicking a client or outfit would reveal
more information or options.
Schedule session types are displayed in raw camelCase.
Appointment types like "fullStyling" and "consultation" appear exactly as written in the
JSON, without any formatting applied. These should be human-readable labels
(e.g., "Full Styling Session", "Consultation").
No cross-tab relationships are surfaced.
There is no visible connection between tabs — for example, a client card doesn't link to
their associated outfits, and a wardrobe item doesn't indicate which outfit it belongs to.
The data feels siloed rather than interconnected.
Stylist profile header is fully static.
The name, star rating, and years of experience shown at the top are fixed display values
with no indication of where they come from or whether they can be updated.
Prompt to Improve the App
You are improving a JSON-powered stylist management dashboard called Stylist OS.
The app has four tabs (Clients, Wardrobe, Outfits, Schedule) that display static
lists of items. Please make the following improvements:
1. CLICKABLE ITEM CARDS: Make each card in all four tabs expandable on click.
Clicking a card should reveal an expanded detail view inline (accordion style)
showing all available JSON fields for that item. Clicking again collapses it.
Add a subtle chevron icon on each card to indicate it is interactive.
2. SCHEDULE — FORMAT SESSION TYPES: Apply a formatting function to all session
type strings so that camelCase values (e.g., "fullStyling") are automatically
converted to human-readable title case (e.g., "Full Styling") before display.
3. CROSS-TAB RELATIONSHIPS: In each Client card's expanded view, show a list of
outfits from the Outfits tab that are associated with that client (matched by
clientId or name). Similarly, in each Outfit card's expanded view, list the
wardrobe items it contains by referencing their IDs.
4. STYLIST PROFILE EDIT: Add a small edit icon next to the stylist name and rating
in the header. Clicking it opens an inline form to update the name, rating, and
years of experience, with a Save button that updates the display immediately.
Keep the existing dark theme, tab navigation structure, and JSON-driven data.
Do not remove any existing features — only extend them.