groombook/app
Archived
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature: customer portal #53

New Issue
Closed
opened 2026-03-18 23:14:41 +00:00 by cpfarhood · 1 comment
cpfarhood commented 2026-03-18 23:14:41 +00:00 (Migrated from github.com)
Copy Link
Copy Source

GroomBook Customer Portal — Build Prompt

Context

GroomBook is a pet grooming business management application. This prompt defines a customer-facing portal — the interface pet parents use to interact with the grooming business. It also includes a staff impersonation mode so employees can see exactly what a specific customer sees, for support and troubleshooting purposes.

The feature set below is informed by competitive analysis of MoeGo, Gingr, DaySmart Pet, Time To Pet, Revelation Pets, PetExec, Groomsoft, ProPet, and Pawfinity — plus SaaS best practices for user impersonation and audit logging from WorkOS, Harness, Authress, and enterprise-ready SaaS patterns.

Application Architecture

Build a React single-page application (.jsx artifact) with the following characteristics:

  • Tailwind CSS for styling (utility classes only — no compiler available)
  • lucide-react for iconography
  • recharts for any data visualization
  • In-memory state via React hooks (no localStorage/sessionStorage)
  • Fully self-contained in a single file with a default export
  • Mobile-first responsive design

Design Direction

Aesthetic: Warm, approachable, and trustworthy — not clinical SaaS. Think "premium veterinary clinic meets boutique hotel." Soft, rounded UI with generous whitespace. Muted earth tones (warm sand, sage green, clay) with a single bold accent color for CTAs. Typography should feel friendly but not childish — a characterful display font paired with a clean humanist sans-serif body font. Subtle texture or grain in backgrounds. Micro-interactions on hover/tap that feel alive, not mechanical.

Anti-patterns to avoid: Purple gradients. Generic dashboards. Pet emoji overload. Clip-art energy. The portal should feel like something a small business owner would be proud to show customers.

Portal Sections & Features

1. Dashboard / Home

The customer's landing page after login. Shows at a glance:

  • Next upcoming appointment with date, time, groomer name, service(s), and pet name. Include a countdown (e.g., "in 3 days"). Quick actions: reschedule, cancel, add notes for groomer.
  • Pet quick-view cards — one per pet, showing name, breed, photo thumbnail, and a badge for vaccination status (valid / expiring soon / expired). Tapping opens the full pet profile.
  • Recent activity feed — last 3-5 events: completed appointments, invoices paid, vaccination reminders sent, report cards received.
  • Outstanding balance or next invoice if applicable, with a pay-now CTA.
  • Loyalty/rewards summary if the business has a loyalty program enabled — points balance, progress toward next reward.

2. Appointment Booking & Management

  • Book new appointment: Step-by-step flow:

    1. Select pet (or add new pet inline)
    2. Select service(s) from the business's menu — services should display name, description, estimated duration, and price range. Support add-on services (e.g., teeth brushing, nail grinding, de-shedding treatment).
    3. Select preferred groomer (optional) or "first available"
    4. Pick date/time from an availability grid — show open slots only, no guessing. Support recurring appointment scheduling (every 4 weeks, every 6 weeks, etc.).
    5. Add special instructions / notes for the groomer (free text)
    6. Review & confirm — show total estimated price, cancellation policy, deposit requirement if any.

  • Upcoming appointments list — all future bookings with status (confirmed, pending approval, waitlisted). Each expandable to show full details.

  • Past appointments — historical log with date, groomer, services rendered, price paid, and link to the grooming report card if one was sent.

  • Cancellation & reschedule — inline actions with policy display (e.g., "Free cancellation up to 24 hours before. Late cancellation fee: $25.").

3. Pet Profiles

Each pet gets a dedicated profile page:

  • Basic info: Name, breed, weight, date of birth, sex, spayed/neutered status, photo (uploadable by customer).
  • Medical & behavioral notes: Allergies, skin conditions, anxiety triggers, aggression notes, mobility issues, medications. These are editable by the customer but flagged for staff review when changed.
  • Grooming preferences: Preferred cut style (with optional reference photo upload), shampoo preferences, sensitive areas, standing instructions that carry forward to every appointment.
  • Vaccination records: Table of required vaccinations (Rabies, DHPP, Bordetella, etc. — configurable by the business). Each row shows: vaccine name, last administered date, expiration date, status badge (valid/expiring/expired), and an upload button for the customer to submit proof documents (images or PDF). Uploaded docs go into a pending-approval queue for staff.
  • Service history timeline: Chronological list of every visit with services, groomer, price, and link to report card.

4. Grooming Report Cards

After each appointment, staff can send a report card. The customer portal displays these as rich, shareable cards:

  • Before & after photos — side-by-side or slider comparison
  • Services performed with notes
  • Behavior & mood assessment — how the pet did during the session (e.g., calm, anxious, wiggly, cooperative). Visual indicator, not just text.
  • Condition observations — anything the groomer noticed: skin irritation, ear buildup, lumps, matting severity, dental concerns. Flagged items should be visually prominent.
  • Groomer's personal note — free text from the groomer
  • Next recommended appointment with a one-tap rebook button
  • Share button — generates a shareable link or allows direct share to social media (the groomer's free marketing)

5. Billing & Payments

  • Invoice history — list of all invoices with date, amount, status (paid, outstanding, overdue), and downloadable PDF/receipt.
  • Outstanding balance with pay-now functionality.
  • Saved payment methods — display masked card info, allow add/remove. (UI only — no actual payment processing in the prototype.)
  • Autopay enrollment — toggle to automatically charge the saved method after each appointment.
  • Tipping — option to add a tip to a completed appointment, with preset percentages (15%, 20%, 25%) and custom amount.
  • Package/prepaid credits — if the business sells grooming packages (e.g., "Buy 5 grooms, get 1 free"), show remaining credits and expiration.

6. Communication

  • Message thread with the business — simple chat-style interface for back-and-forth with the grooming shop. Not real-time websocket — just a message list with a compose box. Messages tagged with timestamp and read receipt.
  • Notification preferences — toggles for: appointment reminders (SMS, email, push), vaccination expiration alerts, promotional messages, report card delivery, invoice/payment receipts. Each channel independently toggleable.

7. Account Settings

  • Personal info: Name, email, phone, address. Editable.
  • Password change (UI only)
  • Notification preferences (link to section above or inline)
  • Manage pets — add/edit/archive pets
  • Signed agreements/waivers — list of any documents the customer has signed (liability waiver, service agreement, photo release), with date signed and ability to view the signed copy.

Staff Impersonation Mode

This is a critical feature for support workflows. When a staff member activates impersonation, they see the portal exactly as the customer sees it — same data, same layout, same permissions — but with clear guardrails.

Activation

  • Staff access impersonation from the admin panel via a "View as Customer" button on any customer record.
  • Before the session starts, the staff member must provide a reason (free text, required field — e.g., "Customer reports they can't see their upcoming appointment" or "Verifying vaccination upload flow").
  • The impersonated customer receives no notification during the session (this is a staff support tool, not a security concern for the customer in this context — but the audit trail is the accountability mechanism).

Visual Indicators (Non-Dismissable)

When impersonation is active, the entire portal must show unmistakable visual cues that this is not a normal session:

  • Top banner — full-width, fixed/sticky, bold contrasting color (e.g., amber/warning orange). Text: 👁 STAFF VIEW — Viewing as [Customer Name] | Reason: [stated reason] | Session started [timestamp] | [End Session button]
  • The banner cannot be dismissed or minimized — it persists for the entire session.
  • Border treatment — a subtle but visible colored border (matching the banner) around the entire viewport, reinforcing that this is not a normal session.
  • Watermark — light diagonal watermark text ("STAFF VIEW") across the main content area, visible but not obstructing readability.

Permissions During Impersonation

  • Read-only by default. The staff member can see everything the customer sees but cannot take actions (book appointments, make payments, edit profile, send messages) unless a specific permission flag is set.
  • If write actions are enabled (configurable per staff role), every mutating action gets an additional confirmation modal: "You are about to [action] on behalf of [Customer Name]. This will be logged. Continue?"
  • Staff cannot change the customer's password, payment methods, or notification preferences during impersonation — ever. These are hard-blocked regardless of role.

Audit Trail

Every impersonation session logs:

  • Who impersonated (staff member name, ID, role)
  • Whom they impersonated (customer name, ID)
  • When the session started and ended (timestamps)
  • Why (the required reason text)
  • What they did — every page viewed and every action taken during the session, logged as discrete events with timestamps
  • Audit entries are append-only and immutable — no editing or deletion

The audit log should be viewable by admin-level staff in the admin panel, filterable by staff member, customer, date range, and action type.

Session Constraints

  • 30-minute timeout — impersonation sessions automatically end after 30 minutes. The banner shows a countdown in the last 5 minutes. Staff can extend once (another 30 minutes) with a re-confirmation of the reason.
  • One session at a time — a staff member cannot impersonate multiple customers simultaneously.
  • No nested impersonation — if a staff member is already impersonating, they cannot switch to another customer without ending the current session first.

Data Model (Mock Data)

Populate the prototype with realistic mock data:

  • Customer: "Sarah Mitchell" — 2 pets, 3 upcoming appointments, 8 historical appointments, outstanding balance of $45, loyalty points balance.
  • Pet 1: "Biscuit" — Golden Retriever, 4 years old, 65 lbs, all vaccinations current. Regular customer, prefers "teddy bear cut," sensitive ears.
  • Pet 2: "Mochi" — Shih Tzu, 2 years old, 12 lbs, Bordetella expiring in 10 days. First-time grooming customer, anxious with nail trimming.
  • Business: "Paws & Reflect Grooming" — 3 groomers (Jamie, Alex, Morgan), services ranging from $45 bath & brush to $120 full groom with add-ons.
  • Staff impersonator: "Chris (Admin)" — viewing as Sarah Mitchell, reason: "Customer reports missing appointment on March 20."

Include 2-3 grooming report cards with mock before/after descriptions, behavior notes, and condition observations.

Implementation Notes

  • Use React useState and useReducer for all state management.
  • Navigation between sections should use a tab/sidebar pattern — not page reloads.
  • The impersonation banner and all its constraints should be fully functional in the prototype (togglable via a dev/demo control).
  • All interactive elements should have hover/focus states.
  • Forms should have basic validation (required fields, email format, etc.).
  • Responsive: must work on mobile viewport (375px) through desktop (1440px+).
  • Accessibility: semantic HTML, ARIA labels on interactive elements, sufficient color contrast, keyboard navigable.

What "Done" Looks Like

A single-file React component that renders the complete customer portal with:

  1. All 7 sections navigable and populated with mock data
  2. Functional appointment booking flow (multi-step, in-memory)
  3. Pet profiles with vaccination tracking UI
  4. At least 2 grooming report cards viewable
  5. Impersonation mode togglable with full banner, watermark, border treatment, reason capture, read-only enforcement, and session timer
  6. Audit log viewer (shown when impersonation is active, accessible from the banner)
  7. Mobile-responsive layout
  8. Polished, production-quality visual design per the aesthetic direction above
# GroomBook Customer Portal — Build Prompt ## Context GroomBook is a pet grooming business management application. This prompt defines a **customer-facing portal** — the interface pet parents use to interact with the grooming business. It also includes a **staff impersonation mode** so employees can see exactly what a specific customer sees, for support and troubleshooting purposes. The feature set below is informed by competitive analysis of MoeGo, Gingr, DaySmart Pet, Time To Pet, Revelation Pets, PetExec, Groomsoft, ProPet, and Pawfinity — plus SaaS best practices for user impersonation and audit logging from WorkOS, Harness, Authress, and enterprise-ready SaaS patterns. --- ## Application Architecture Build a **React single-page application** (`.jsx` artifact) with the following characteristics: - Tailwind CSS for styling (utility classes only — no compiler available) - `lucide-react` for iconography - `recharts` for any data visualization - In-memory state via React hooks (no localStorage/sessionStorage) - Fully self-contained in a single file with a default export - Mobile-first responsive design --- ## Design Direction **Aesthetic:** Warm, approachable, and trustworthy — not clinical SaaS. Think "premium veterinary clinic meets boutique hotel." Soft, rounded UI with generous whitespace. Muted earth tones (warm sand, sage green, clay) with a single bold accent color for CTAs. Typography should feel friendly but not childish — a characterful display font paired with a clean humanist sans-serif body font. Subtle texture or grain in backgrounds. Micro-interactions on hover/tap that feel alive, not mechanical. **Anti-patterns to avoid:** Purple gradients. Generic dashboards. Pet emoji overload. Clip-art energy. The portal should feel like something a small business owner would be *proud* to show customers. --- ## Portal Sections & Features ### 1. Dashboard / Home The customer's landing page after login. Shows at a glance: - **Next upcoming appointment** with date, time, groomer name, service(s), and pet name. Include a countdown (e.g., "in 3 days"). Quick actions: reschedule, cancel, add notes for groomer. - **Pet quick-view cards** — one per pet, showing name, breed, photo thumbnail, and a badge for vaccination status (valid / expiring soon / expired). Tapping opens the full pet profile. - **Recent activity feed** — last 3-5 events: completed appointments, invoices paid, vaccination reminders sent, report cards received. - **Outstanding balance or next invoice** if applicable, with a pay-now CTA. - **Loyalty/rewards summary** if the business has a loyalty program enabled — points balance, progress toward next reward. ### 2. Appointment Booking & Management - **Book new appointment:** Step-by-step flow: 1. Select pet (or add new pet inline) 2. Select service(s) from the business's menu — services should display name, description, estimated duration, and price range. Support add-on services (e.g., teeth brushing, nail grinding, de-shedding treatment). 3. Select preferred groomer (optional) or "first available" 4. Pick date/time from an availability grid — show open slots only, no guessing. Support recurring appointment scheduling (every 4 weeks, every 6 weeks, etc.). 5. Add special instructions / notes for the groomer (free text) 6. Review & confirm — show total estimated price, cancellation policy, deposit requirement if any. - **Upcoming appointments list** — all future bookings with status (confirmed, pending approval, waitlisted). Each expandable to show full details. - **Past appointments** — historical log with date, groomer, services rendered, price paid, and link to the grooming report card if one was sent. - **Cancellation & reschedule** — inline actions with policy display (e.g., "Free cancellation up to 24 hours before. Late cancellation fee: $25."). ### 3. Pet Profiles Each pet gets a dedicated profile page: - **Basic info:** Name, breed, weight, date of birth, sex, spayed/neutered status, photo (uploadable by customer). - **Medical & behavioral notes:** Allergies, skin conditions, anxiety triggers, aggression notes, mobility issues, medications. These are editable by the customer but flagged for staff review when changed. - **Grooming preferences:** Preferred cut style (with optional reference photo upload), shampoo preferences, sensitive areas, standing instructions that carry forward to every appointment. - **Vaccination records:** Table of required vaccinations (Rabies, DHPP, Bordetella, etc. — configurable by the business). Each row shows: vaccine name, last administered date, expiration date, status badge (valid/expiring/expired), and an upload button for the customer to submit proof documents (images or PDF). Uploaded docs go into a pending-approval queue for staff. - **Service history timeline:** Chronological list of every visit with services, groomer, price, and link to report card. ### 4. Grooming Report Cards After each appointment, staff can send a report card. The customer portal displays these as rich, shareable cards: - **Before & after photos** — side-by-side or slider comparison - **Services performed** with notes - **Behavior & mood assessment** — how the pet did during the session (e.g., calm, anxious, wiggly, cooperative). Visual indicator, not just text. - **Condition observations** — anything the groomer noticed: skin irritation, ear buildup, lumps, matting severity, dental concerns. Flagged items should be visually prominent. - **Groomer's personal note** — free text from the groomer - **Next recommended appointment** with a one-tap rebook button - **Share button** — generates a shareable link or allows direct share to social media (the groomer's free marketing) ### 5. Billing & Payments - **Invoice history** — list of all invoices with date, amount, status (paid, outstanding, overdue), and downloadable PDF/receipt. - **Outstanding balance** with pay-now functionality. - **Saved payment methods** — display masked card info, allow add/remove. (UI only — no actual payment processing in the prototype.) - **Autopay enrollment** — toggle to automatically charge the saved method after each appointment. - **Tipping** — option to add a tip to a completed appointment, with preset percentages (15%, 20%, 25%) and custom amount. - **Package/prepaid credits** — if the business sells grooming packages (e.g., "Buy 5 grooms, get 1 free"), show remaining credits and expiration. ### 6. Communication - **Message thread with the business** — simple chat-style interface for back-and-forth with the grooming shop. Not real-time websocket — just a message list with a compose box. Messages tagged with timestamp and read receipt. - **Notification preferences** — toggles for: appointment reminders (SMS, email, push), vaccination expiration alerts, promotional messages, report card delivery, invoice/payment receipts. Each channel independently toggleable. ### 7. Account Settings - **Personal info:** Name, email, phone, address. Editable. - **Password change** (UI only) - **Notification preferences** (link to section above or inline) - **Manage pets** — add/edit/archive pets - **Signed agreements/waivers** — list of any documents the customer has signed (liability waiver, service agreement, photo release), with date signed and ability to view the signed copy. --- ## Staff Impersonation Mode This is a **critical feature** for support workflows. When a staff member activates impersonation, they see the portal *exactly* as the customer sees it — same data, same layout, same permissions — but with clear guardrails. ### Activation - Staff access impersonation from the admin panel via a "View as Customer" button on any customer record. - Before the session starts, the staff member **must provide a reason** (free text, required field — e.g., "Customer reports they can't see their upcoming appointment" or "Verifying vaccination upload flow"). - The impersonated customer receives **no notification** during the session (this is a staff support tool, not a security concern for the customer in this context — but the audit trail is the accountability mechanism). ### Visual Indicators (Non-Dismissable) When impersonation is active, the entire portal must show unmistakable visual cues that this is not a normal session: - **Top banner** — full-width, fixed/sticky, bold contrasting color (e.g., amber/warning orange). Text: `👁 STAFF VIEW — Viewing as [Customer Name] | Reason: [stated reason] | Session started [timestamp] | [End Session button]` - The banner **cannot be dismissed or minimized** — it persists for the entire session. - **Border treatment** — a subtle but visible colored border (matching the banner) around the entire viewport, reinforcing that this is not a normal session. - **Watermark** — light diagonal watermark text ("STAFF VIEW") across the main content area, visible but not obstructing readability. ### Permissions During Impersonation - **Read-only by default.** The staff member can see everything the customer sees but cannot take actions (book appointments, make payments, edit profile, send messages) unless a specific permission flag is set. - If write actions are enabled (configurable per staff role), every mutating action gets an **additional confirmation modal**: "You are about to [action] on behalf of [Customer Name]. This will be logged. Continue?" - Staff **cannot** change the customer's password, payment methods, or notification preferences during impersonation — ever. These are hard-blocked regardless of role. ### Audit Trail Every impersonation session logs: - **Who** impersonated (staff member name, ID, role) - **Whom** they impersonated (customer name, ID) - **When** the session started and ended (timestamps) - **Why** (the required reason text) - **What** they did — every page viewed and every action taken during the session, logged as discrete events with timestamps - Audit entries are **append-only and immutable** — no editing or deletion The audit log should be viewable by admin-level staff in the admin panel, filterable by staff member, customer, date range, and action type. ### Session Constraints - **30-minute timeout** — impersonation sessions automatically end after 30 minutes. The banner shows a countdown in the last 5 minutes. Staff can extend once (another 30 minutes) with a re-confirmation of the reason. - **One session at a time** — a staff member cannot impersonate multiple customers simultaneously. - **No nested impersonation** — if a staff member is already impersonating, they cannot switch to another customer without ending the current session first. --- ## Data Model (Mock Data) Populate the prototype with realistic mock data: - **Customer:** "Sarah Mitchell" — 2 pets, 3 upcoming appointments, 8 historical appointments, outstanding balance of $45, loyalty points balance. - **Pet 1:** "Biscuit" — Golden Retriever, 4 years old, 65 lbs, all vaccinations current. Regular customer, prefers "teddy bear cut," sensitive ears. - **Pet 2:** "Mochi" — Shih Tzu, 2 years old, 12 lbs, Bordetella expiring in 10 days. First-time grooming customer, anxious with nail trimming. - **Business:** "Paws & Reflect Grooming" — 3 groomers (Jamie, Alex, Morgan), services ranging from $45 bath & brush to $120 full groom with add-ons. - **Staff impersonator:** "Chris (Admin)" — viewing as Sarah Mitchell, reason: "Customer reports missing appointment on March 20." Include 2-3 grooming report cards with mock before/after descriptions, behavior notes, and condition observations. --- ## Implementation Notes - Use React `useState` and `useReducer` for all state management. - Navigation between sections should use a tab/sidebar pattern — not page reloads. - The impersonation banner and all its constraints should be fully functional in the prototype (togglable via a dev/demo control). - All interactive elements should have hover/focus states. - Forms should have basic validation (required fields, email format, etc.). - Responsive: must work on mobile viewport (375px) through desktop (1440px+). - Accessibility: semantic HTML, ARIA labels on interactive elements, sufficient color contrast, keyboard navigable. --- ## What "Done" Looks Like A single-file React component that renders the complete customer portal with: 1. All 7 sections navigable and populated with mock data 2. Functional appointment booking flow (multi-step, in-memory) 3. Pet profiles with vaccination tracking UI 4. At least 2 grooming report cards viewable 5. Impersonation mode togglable with full banner, watermark, border treatment, reason capture, read-only enforcement, and session timer 6. Audit log viewer (shown when impersonation is active, accessible from the banner) 7. Mobile-responsive layout 8. Polished, production-quality visual design per the aesthetic direction above
ghost commented 2026-03-18 23:16:40 +00:00 (Migrated from github.com)
Copy Link
Copy Source

Triaged and assigned to CTO for implementation as GRO-45.

This is a substantial feature — the spec covers 7 portal sections plus staff impersonation with full audit trail. CTO will implement as a React SPA per the design direction and architecture outlined here.

Tracking internally as high priority.

Triaged and assigned to CTO for implementation as **GRO-45**. This is a substantial feature — the spec covers 7 portal sections plus staff impersonation with full audit trail. CTO will implement as a React SPA per the design direction and architecture outlined here. Tracking internally as high priority.
This repo is archived. You cannot comment on issues.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
Something isn't working
 documentation
Improvements or additions to documentation
 duplicate
This issue or pull request already exists
 enhancement
New feature or request
 feature
New feature
 good first issue
Good for newcomers
 help wanted
Extra attention is needed
 invalid
This doesn't seem right
 question
Further information is requested
 wontfix
This will not be worked on
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
ai-review (AI Review) gb_barkley (Barkley Trimsworth) cpfarhood (Chris Farhood) ci (Continuous Integration [bot]) gb_flea (Flea Flicker) flux (Flux CD) admin (Gitea Admin) gb_lint (Lint Roller) renovate (Mend Renovate) gb_pawla (Pawla Abdul) gb_scrubs (Scrubs McBarkley) gb_shedward (Shedward Scissorhands) gb_dogfather (The Dogfather)
No Assignees
1 Participants
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: groombook/app#53
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?