#PRODUCT REQUIREMENTS DOCUMENT (PRD) FOR 5CRSE
Version: 1.3 Date: 2024-07-28 Prepared by: [Your Team Name/AI Assistant] Project Sponsor: 5CRSE Management Team
#PRODUCT VISION
Develop a premium platform – 5CRSE – providing seamless booking of luxury transportation and curated experiences centered around events. The platform combines a sophisticated customer interface with a comprehensive administrative backend, leveraging Payload CMS for operational data and content management, and integrating secure payment processing (Stripe).
#SCOPE AND OBJECTIVES
Scope:
- Create a customer-facing frontend (Next.js) for discovering and booking transportation and experience packages.
- Develop an administrative dashboard (Payload CMS) for managing operations: fleets, drivers, ambassadors, partner venues, packages, bookings, and users.
- Implement user authentication for customers, admins, drivers, and ambassadors.
- Integrate payment processing via Stripe.
- Design and development of a new website using Next.js, Tailwind CSS (Radix Colors, shadcn/ui potentially).
- Integration with Payload CMS for dynamic content and operational data management (foundational setup complete).
- Responsive design for optimal viewing on desktops, tablets, and mobile devices.
- (Future Scope) Incorporate AI-driven enhancements (e.g., Hume AI) for customer service and operational insights.
Objectives:
- Enable customers to easily book premium transportation and curated experiences for events.
- Provide administrators with powerful tools for managing all aspects of the service delivery (fleet, personnel, partners, bookings).
- Integrate secure and reliable payment processing via Stripe.
- Ensure a scalable, secure, and high-performance platform architecture.
- Deliver an exceptional user experience with intuitive interfaces and premium aesthetics.
- Streamline content and operational data management via Payload CMS.
#FEATURES & REQUIREMENTS
The product is divided into multiple feature releases. Each release includes user stories with acceptance criteria (Given-When-Then).
--- Feature Release 1: Core Platform & User Authentication --- (Note: Foundational Payload setup with Pages, Media, Users exists. Requires extending User collection for roles/profiles and implementing auth flows).
US1.1 – User Registration (Customer) [ ] As a new customer, I want to register an account so that I can book transportation and experiences. Acceptance Criteria: Given a new customer navigates to the registration page, When the customer enters valid details (name, email, password) and submits, Then a customer account is created, assigned the 'customer' role, and a confirmation email is sent.
US1.2 – User Login (All Roles) [ ] As a registered user (Customer, Admin, Driver, Ambassador), I want to log in so that I can access role-specific dashboards/features. Acceptance Criteria: Given a registered user on the login page, When the user provides correct credentials, Then the user is authenticated, receives a JWT token, and is redirected to their respective interface.
US1.3 – Password Recovery [ ] As a user who forgot my password, I want to recover my password so that I can regain access. Acceptance Criteria: Given a user on the password recovery page, When the user submits a valid email associated with an account, Then a password recovery link is sent.
US1.4 – Profile Management (Basic) [ ] As a logged-in user, I want to view and update my basic profile information (name, email). Acceptance Criteria: Given a logged-in user accesses their profile page, When they update their name or email and save, Then the information is updated in the User collection.
US1.5 – Admin: Create Personnel User Accounts [ ] As an Admin, I want to create new user accounts and assign specific operational roles (Admin, Driver, Ambassador) so that personnel can be onboarded and access the platform. Acceptance Criteria: Given an Admin navigates to the User Management section, When they initiate creating a new user, provide necessary details (email, initial password/setup link, role), and save, Then a new user record is created with the assigned role, and the user receives instructions to complete setup/login.
--- Feature Release 2: Transportation Management & Booking --- (Note: Requires new Payload collections: Vehicles, Drivers, TransportationBookings, potentially Routes)
US2.1 – Browse Transportation Options [ ] As a customer planning to attend an event, I want to browse available transportation options (vehicle types, pricing) for a specific date/time and location. Acceptance Criteria: Given a customer on the transportation browsing page, When they input event details (date, time, location, passenger count), Then available vehicle types (e.g., Tesla, Escalade, Sprinter) with capacity and estimated pricing are displayed.
US2.2 – Book Transportation [ ] As a customer, I want to book a specific vehicle for my event transportation. Acceptance Criteria: Given a customer selects an available vehicle option, When they provide pickup/dropoff details and confirm the booking, Then a TransportationBooking record is created with 'pending payment' status, linked to their user account and the event context.
US2.3 – Admin: Manage Vehicle Fleet [ ] As an admin, I want to add, update, and view vehicle details (type, capacity, status, availability) in the CMS. Acceptance Criteria: Given an admin in the Payload dashboard navigates to the 'Vehicles' collection, When they create or edit a vehicle record, Then the vehicle information is saved and reflected in availability checks.
US2.4 – Admin: Manage Drivers [ ] As an admin, I want to manage driver profiles (contact info, qualifications, availability, assignments) in the CMS. Acceptance Criteria: Given an admin navigates to the 'Drivers' collection, When they create or edit a driver profile, Then the driver information is stored and can be used for assignments.
US2.5 – Admin: Assign Driver to Booking [ ] As an admin, I want to assign an available and qualified driver to a confirmed transportation booking. Acceptance Criteria: Given an admin views a confirmed transportation booking needing a driver, When they select an appropriate driver from the available pool and assign them, Then the booking record is updated with the assigned driver, and the driver is notified.
--- Feature Release 3: Experience Package Management & Booking --- (Note: Requires new Payload collections: ExperiencePackages, PartnerVenues, ExperienceBookings)
US3.1 – Browse Experience Packages [ ] As a customer, I want to browse curated experience packages associated with events (e.g., pre-event dinner + transport, post-event lounge access + transport). Acceptance Criteria: Given a customer browsing an event or a dedicated experiences section, When experience packages are fetched, Then packages are displayed with details (name, description, included items, price, associated event).
US3.2 – Book Experience Package [ ] As a customer, I want to book an experience package. Acceptance Criteria: Given a customer selects an available experience package, When they confirm booking details (attendee count, date/time if applicable), Then an ExperienceBooking record is created with 'pending payment' status.
US3.3 – Admin: Manage Partner Venues [ ] As an admin, I want to manage partner venue information (name, location, type, offerings, commission rates, contact) in the CMS. Acceptance Criteria: Given an admin navigates to the 'PartnerVenues' collection, When they create or edit a venue record, Then the venue information is saved and can be used in experience packages.
US3.4 – Admin: Create/Manage Experience Packages [ ] As an admin, I want to create and manage experience packages, bundling transportation, venue experiences, and potentially event context. Acceptance Criteria: Given an admin navigates to the 'ExperiencePackages' collection, When they define a package (linking vehicles/types, venues, pricing, description), Then the package is saved and becomes available for customers to browse and book.
--- Feature Release 4: Ambassador Management & Interaction --- (Note: Requires new Payload collection: Ambassadors, extending Bookings for assignment)
US4.1 – Admin: Manage Ambassadors [ ] As an admin, I want to manage ambassador profiles (contact info, skills, availability, ratings) in the CMS. Acceptance Criteria: Given an admin navigates to the 'Ambassadors' collection, When they create or edit an ambassador profile, Then the information is stored and can be used for assignments.
US4.2 – Admin: Assign Ambassador to Booking/Package [ ] As an admin, I want to assign an available ambassador to a confirmed booking (transportation or experience package). Acceptance Criteria: Given an admin views a confirmed booking requiring coordination, When they select an available ambassador and assign them, Then the booking record is updated, and the ambassador is notified.
US4.3 – Customer: View Assigned Ambassador [ ] As a customer with a booked service, I want to see basic details of my assigned ambassador (name, photo, contact method) within my booking details. Acceptance Criteria: Given a customer views their confirmed booking details page, When an ambassador has been assigned, Then the ambassador's public profile information is displayed.
US4.4 – Ambassador: View Assigned Bookings [ ] As an ambassador, I want to view the bookings/events I am assigned to via my dashboard/interface. Acceptance Criteria: Given a logged-in ambassador accesses their assignments view, When they have upcoming assignments, Then a list of relevant bookings/packages with key details (customer name, time, location, itinerary) is displayed.
US4.5 – Ambassador: Submit Post-Event Notes [ ] As an Ambassador, I want to submit brief notes or flag issues related to a specific completed assignment (booking/event) via my interface, so that administrators have feedback for operational improvement and record keeping. Acceptance Criteria: Given a logged-in Ambassador viewing a completed assignment, When they access the option to add notes/flags and submit their input, Then the notes/flags are saved and associated with the relevant booking record, potentially notifying an Admin.
--- Feature Release 5: Payment Processing & Booking Confirmation --- (Note: Requires integration with Stripe SDK or Payload Stripe Plugin)
US5.1 – Stripe Payment for Bookings [ ] As a customer, I want to securely pay for my booked transportation or experience package using Stripe. Acceptance Criteria: Given a customer proceeds to checkout for a booking with 'pending payment' status, When they select Stripe and enter valid payment details, Then the payment is processed via Stripe, the booking status updates to 'confirmed', and a success confirmation is shown.
US5.2 – Payment Error Handling [ ] As a customer, I want clear feedback if my payment fails. Acceptance Criteria: Given a payment attempt fails, When the error is returned from Stripe, Then an appropriate error message is displayed, and the user can retry or choose another method (if available).
US5.3 – Booking Confirmation Notification [ ] As a customer, I want to receive an email confirmation with my itinerary after successfully booking and paying. Acceptance Criteria: Given a booking status changes to 'confirmed' after successful payment, When the confirmation process triggers, Then an email is sent to the customer including booking details, itinerary, and assigned ambassador info (if available).
US5.4 – Customer: Provide Booking Feedback/Rating [ ] As a Customer, I want to provide feedback and/or a rating for my completed booking (covering transportation, experience, and ambassador service) so I can share my experience and help improve the service. Acceptance Criteria: Given a Customer whose booking status is 'completed', When they access the feedback option for that booking (e.g., via email link or profile), provide their feedback/rating, and submit, Then the feedback is stored, associated with the booking, driver, and ambassador, and potentially aggregated for admin review.
US5.5 – Customer: Access Invoice/Receipt [ ] As a Customer, I want to access a detailed invoice or receipt for my paid booking so that I have a record of the transaction and services. Acceptance Criteria: Given a Customer with a confirmed ('paid') booking, When they access their booking details or receive the confirmation email (TBD implementation), Then a clear invoice/receipt detailing the services purchased and amount paid is available/provided.
--- Feature Release 6: AI Agent Integration (Basic Tools) --- (Note: Requires MCP server setup and initial tool implementation)
US6.1 – Customer: Use AI Agent for Booking Inquiry [ ]
As a customer, I want to ask the AI Customer Service agent about available transportation or experiences for a specific event/date.
Acceptance Criteria:
Given a customer interacts with the AI agent interface,
When they ask about availability (e.g., "Do you have an Escalade for the concert on Friday?"),
Then the AI agent uses the check_availability or search_events/search_transport MCP tool and provides an accurate response based on system data.
US6.2 – Admin: Use AI Agent for Operational Query [ ]
As an admin, I want to ask the AI Business Manager agent about operational metrics (e.g., fleet utilization, popular packages).
Acceptance Criteria:
Given an admin interacts with the AI agent interface in the admin dashboard,
When they ask for specific metrics (e.g., "What was our vehicle utilization last month?"),
Then the AI agent uses the get_business_metrics MCP tool and returns the relevant data.
--- Feature Release 7: Driver Interface & Actions --- (Note: Focuses on Driver-specific views/actions after login)
US7.1 – Driver: View Assigned Schedule/Bookings [ ] As a Driver, I want to log in and view my upcoming assigned transportation bookings/schedule so that I know when and where I need to be. Acceptance Criteria: Given a logged-in Driver accesses their schedule/assignments view, When they have upcoming assignments, Then a chronological list or calendar view of bookings is displayed with key details (date, time, pickup location summary).
US7.2 – Driver: View Trip Itinerary Details [ ] As a Driver, I want to view the full details for a specific assigned trip, including exact pickup/dropoff addresses, route suggestions (if available), customer contact information, and any special instructions. Acceptance Criteria: Given a logged-in Driver selects a specific assigned booking from their schedule, When the details view loads, Then all necessary itinerary information is clearly presented.
US7.3 – Driver: Update Trip Status (Basic) [ ] As a Driver, I want to update the status of my active trip (e.g., 'En Route to Pickup', 'Arrived at Pickup', 'Trip Started', 'Trip Completed') via my interface so that admins and potentially customers have visibility. Acceptance Criteria: Given a logged-in Driver is on an active assignment, When they select an action to update the trip status, Then the corresponding booking record's status is updated in the system, and relevant notifications (if any) are triggered.
--- Feature Release 8: Admin Operations & Reporting --- (Note: Extends admin capabilities beyond basic CRUD)
US8.1 – Admin: View Commission Reports [ ] As an Admin, I want to view reports detailing commissions earned from or owed to Partner Venues based on completed experience package bookings. Acceptance Criteria: Given an Admin navigates to the financial reporting section, When they select the commission report, specifying date ranges or specific partners, Then a report is generated showing relevant bookings, calculated commissions, and totals.
US8.2 – Admin: Process Refunds [ ] As an Admin, I need the ability to process partial or full refunds for bookings through the Stripe integration when required (e.g., due to cancellation, service issue). Acceptance Criteria: Given an Admin identifies a booking requiring a refund, When they access the refund action, specify the amount, reason, and confirm, Then the refund is processed via the Stripe API, the booking record is updated, and the customer is notified.
#NON-FUNCTIONAL REQUIREMENTS
- Performance:
- Fast load times (< 3s) for customer-facing pages.
- Responsive API interactions, especially for availability checks and booking confirmations (< 1s typical).
- Efficient database queries for managing operational data.
- Scalability:
- Handle concurrent bookings and operational updates.
- Support growth in fleet size, personnel, partners, and user base without performance degradation.
- Target: Support up to 5,000 concurrent users and 100 simultaneous bookings initially.
- Security:
- End-to-end encryption (SSL/TLS).
- Secure API authentication (JWT).
- Role-based access control rigorously enforced.
- Protection against common web vulnerabilities (OWASP Top 10).
- Secure handling and storage of payment information (compliance with PCI-DSS via Stripe).
- Data privacy compliance (GDPR, CCPA).
- Usability:
- Intuitive UI for customers booking complex packages.
- Efficient workflow for admins managing operations.
- Clear communication and status updates throughout the booking process.
- Accessibility compliance (WCAG 2.1 AA).
- Maintainability:
- Modular code architecture (frontend components, backend services/collections).
- Comprehensive documentation (code comments, API docs, operational guides).
- Automated testing (unit, integration, E2E).
- Reliability:
- High system availability (> 99.9%).
- Robust error handling and recovery mechanisms, especially for third-party dependencies (Stripe, Mapping APIs).
- Data backup and disaster recovery plan.
- Real-time Capabilities:
- Utilize Payload CMS GraphQL subscriptions for basic status updates (e.g., booking confirmation, driver assignment) where feasible and impactful. Advanced real-time chat is future scope.
#DESIGN SYSTEM TOKENS
This section defines the foundational visual language for the 5CRSE platform, ensuring consistency and a premium user experience. Inspired by modern aesthetics and the core palette of Black, Platinum (White), and Gold.
#Color Palette
Colors are defined using CSS custom properties, supporting light and dark themes.
:root {
/* Core Palette */
--color-black: #0D0D0D; /* Deep, rich black */
--color-white: #FFFFFF;
--color-platinum: #F5F5F5; /* Off-white for softer backgrounds/elements */
--color-gold: #CCA43B; /* Classy, slightly desaturated gold */
--color-gold-darker: #B89335; /* For hover/active states */
/* Neutrals (Grays) - Scale from light to dark */
--color-gray-100: #EAEAEA;
--color-gray-200: #CFCFCF;
--color-gray-300: #B1B1B1;
--color-gray-500: #777777;
--color-gray-700: #444444;
--color-gray-800: #2A2A2A;
--color-gray-900: #1A1A1A;
/* Semantic Colors (Light Theme Defaults) */
--color-background: var(--color-platinum);
--color-foreground: var(--color-black);
--color-background-contrast: var(--color-white);
--color-foreground-muted: var(--color-gray-500);
--color-primary: var(--color-gold);
--color-primary-foreground: var(--color-black);
--color-primary-hover: var(--color-gold-darker);
--color-secondary: var(--color-black);
--color-secondary-foreground: var(--color-white);
--color-secondary-hover: var(--color-gray-900);
--color-border: var(--color-gray-200);
--color-border-subtle: var(--color-gray-100);
--color-input-background: var(--color-white);
/* Status Colors */
--color-danger: #DC2626; /* Red */
--color-warning: #F59E0B; /* Amber */
--color-success: #16A34A; /* Green */
--color-info: #2563EB; /* Blue */
}
[data-theme='dark'] {
/* Semantic Colors (Dark Theme Overrides) */
--color-background: var(--color-black);
--color-foreground: var(--color-platinum);
--color-background-contrast: var(--color-gray-900);
--color-foreground-muted: var(--color-gray-300);
--color-primary: var(--color-gold);
--color-primary-foreground: var(--color-black);
--color-primary-hover: var(--color-gold-darker);
--color-secondary: var(--color-platinum);
--color-secondary-foreground: var(--color-black);
--color-secondary-hover: var(--color-gray-100);
--color-border: var(--color-gray-700);
--color-border-subtle: var(--color-gray-800);
--color-input-background: var(--color-gray-900);
}
#Typography
Uses the modern and readable "Inter" font family.
:root {
/* Font Family */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-serif: /* Define if needed, e.g., for specific branding */;
--font-mono: /* Define if needed, e.g., for code */;
/* Font Sizes (Based on 16px root) */
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 1.875rem; /* 30px */
--font-size-4xl: 2.25rem; /* 36px */
--font-size-5xl: 3rem; /* 48px */
/* Font Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Line Heights */
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
/* Letter Spacing */
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0em;
--letter-spacing-wide: 0.025em;
}
#Spacing & Sizing
Uses a consistent scale based on a 4px grid unit.
:root {
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
/* Example Sizes (for components, containers) */
--size-xs: 20rem;
--size-sm: 24rem;
--size-md: 28rem;
--size-lg: 32rem;
--size-xl: 36rem;
--size-full: 100%;
}
#Borders & Radius
Defines border properties and corner rounding.
:root {
/* Border Widths */
--border-width-sm: 1px;
--border-width-md: 2px;
/* Radius */
--radius-sm: 0.25rem; /* 4px */
--radius-md: 0.375rem; /* 6px */
--radius-lg: 0.5rem; /* 8px */
--radius-xl: 0.75rem; /* 12px */
--radius-full: 9999px;
}
#Elevation & Shadows
Subtle shadows for creating depth.
:root {
/* Shadows (adjust values for desired effect) */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
/* Example usage - might need theme-specific shadow colors */
/* --shadow-color-light: rgba(0, 0, 0, 0.1); */
/* --shadow-color-dark: rgba(0, 0, 0, 0.5); */
}
#WIREFRAMES
(Adding new wireframes for key Transportation/Experience/Ambassador views) (Restore Frontend Customer Experience Wireframes)
--- 5.1 User Registration View (US1.1) ---
+-----------------------------------------------------+
| Registration |
+-----------------------------------------------------+
| [Logo] |
|-----------------------------------------------------|
| Name: [_________________________] |
| Email: [_________________________] |
| Password: [_________________________] |
| Confirm Password: [_________________________] |
| |
| [Submit] [Cancel] |
+-----------------------------------------------------+
--- 5.2 User Login View (US1.2 - Customer perspective) ---
+-----------------------------------------------------+
| Login |
+-----------------------------------------------------+
| [Logo] |
|-----------------------------------------------------|
| Email: [_________________________] |
| Password: [_________________________] |
| |
| [Login] [Forgot Password?] |
+-----------------------------------------------------+
--- 5.3 Password Recovery View (US1.3) ---
+-----------------------------------------------------+
| Password Recovery |
+-----------------------------------------------------+
| Enter your registered email: |
| [_________________________] |
| |
| [Send Recovery Link] |
+-----------------------------------------------------+
--- 5.4 Profile Management View (US1.4 - Customer perspective) ---
+-----------------------------------------------------+
| My Profile |
+-----------------------------------------------------+
| [User Avatar/Icon] |
|-----------------------------------------------------|
| Name: [Current Name ] [Edit] |
| Email: [Current Email ] [Edit] |
| Phone (Optional): [Current Phone ] [Edit/Add]|
| |
| Saved Payment Methods: [Link/Section] |
| Booking History: [Link/Section] |
| |
| [Save Changes (if editing)] [Change Password] |
+-----------------------------------------------------+
--- 5.5 Transportation Browsing View (US2.1) ---
+-----------------------------------------------------+
| Find Transportation |
+-----------------------------------------------------+
| Event/Destination: [_________________________] |
| Date: [Date Picker] Time: [Time Picker] |
| Passengers: [Number Input] |
| [Search Availability] |
|-----------------------------------------------------|
| Available Options: |
| [Vehicle Card: Tesla Model S (4 Pax)] Price: $XXX |
| [Image] [Select] |
| [Vehicle Card: Escalade (6 Pax)] Price: $YYY |
| [Image] [Select] |
| [Vehicle Card: Sprinter (12 Pax)] Price: $ZZZ |
| [Image] [Select] |
+-----------------------------------------------------+
--- 5.6 Transportation Booking Details View (US2.2) ---
+-----------------------------------------------------+
| Transportation Booking |
+-----------------------------------------------------+
| Selected: Tesla Model S |
| Event/Date/Time: [Details] |
| Passengers: [Number] |
|-----------------------------------------------------|
| Pickup Address: [_________________________] |
| Dropoff Address: [________________________] |
| Special Requests: [________________________] |
| Estimated Price: $XXX |
| |
| [Proceed to Payment] [Cancel] |
+-----------------------------------------------------+
--- 5.7 Experience Package Browsing View (US3.1) ---
+-----------------------------------------------------+
| Curated Experiences |
+-----------------------------------------------------+
| Filter by Event: [Dropdown] Filter by Type: [Dropdown] |
|-----------------------------------------------------|
| [Package Card: Pre-Concert Dinner + Transport] |
| [Image] Price: $AAA Includes: [Venue], [Vehicle] |
| [View Details] |
| [Package Card: Post-Game Lounge + Transport] |
| [Image] Price: $BBB Includes: [Venue], [Vehicle] |
| [View Details] |
+-----------------------------------------------------+
--- 5.8 Experience Package Details View (US3.2) ---
+-----------------------------------------------------+
| Experience Package Details |
+-----------------------------------------------------+
| [Package Image/Gallery] |
|-----------------------------------------------------|
| Package Name: Pre-Concert Dinner + Transport |
| Price: $AAA |
| Description: [Detailed package description...] |
| Includes: |
| - Transportation: Tesla Model S (Round Trip) |
| - Dining: Reservation at [Partner Venue Name] |
| - Ambassador: [Assigned upon booking] |
| |
| [Book Package] [Back to Listings] |
+-----------------------------------------------------+
--- 5.9 View Assigned Ambassador (within Booking Details) (US4.3) ---
+-----------------------------------------------------+
| My Booking Details |
+-----------------------------------------------------+
| Booking ID: [Booking ID] |
| Service: [Transport/Experience Package Name] |
| ... (Other booking details) ... |
|-----------------------------------------------------|
| **Your Ambassador:** |
| [Ambassador Photo] |
| Name: [Ambassador Name] |
| Contact: [Phone/Message Button if applicable] |
+-----------------------------------------------------+
--- 5.10 Payment Processing View (US5.1) ---
+-----------------------------------------------------+
| Payment Processing |
+-----------------------------------------------------+
| Booking Summary: [Service Name], Price: $XXX |
|-----------------------------------------------------|
| Select Payment Method: |
| ( ) Stripe (Card) ( ) [Other Saved Method?] |
|-----------------------------------------------------|
| Card Number: [_____________________] |
| Expiry Date: [MM/YY] CVC: [____] |
| Name on Card: [_____________________] |
| [ ] Save this card for future use |
| |
| [Submit Payment: $XXX] |
| |
| * Error messages appear here if payment fails * |
+-----------------------------------------------------+
--- 5.11 Booking Confirmation View (US5.3) ---
+-----------------------------------------------------+
| Booking Confirmation |
+-----------------------------------------------------+
| [Success Icon] Thank you for your booking! |
| |
| Booking ID: [Booking ID] |
| Service: [Transport/Experience Package Name] |
| Date/Time: [Date/Time] |
| Amount Paid: [$XXX] |
| |
| A confirmation email with your full itinerary has |
| been sent to [customer.email]. |
| |
| [View Booking in My Profile] [Return Home] |
+-----------------------------------------------------+
--- 5.12 Provide Booking Feedback View (US5.4) ---
+-----------------------------------------------------+
| Feedback for Booking [Booking ID] |
+-----------------------------------------------------+
| Service: [Transport/Experience Package Name] |
| Date: [Date] |
| Ambassador: [Ambassador Name] |
|-----------------------------------------------------|
| Overall Rating: [☆ ☆ ☆ ☆ ☆] |
| Ambassador Rating: [☆ ☆ ☆ ☆ ☆] |
| Comments: |
| [_________________________________________________] |
| [_________________________________________________] |
| |
| [Submit Feedback] |
+-----------------------------------------------------+
--- 5.13 Access Invoice/Receipt View (within Profile/Booking History) (US5.5) ---
+-----------------------------------------------------+
| Booking History |
+-----------------------------------------------------+
| Booking ID | Service | Date | Status | Action |
|------------|----------------|----------|-----------|---------------|
| [ID 1] | [Transport] | [Date 1] | Completed | [View/Receipt]|
| [ID 2] | [Experience Pkg] | [Date 2] | Confirmed | [View/Receipt]|
| ... | ... | ... | ... | ... |
+-----------------------------------------------------+
--- 5.14 AI Chatbot View (US6.1 - If Customer Facing) ---
+-----------------------------------------------------+
| AI Assistant |
+-----------------------------------------------------+
| [Chat History Display Area] |
| Agent: How can I help you today? |
| User: Do you have an Escalade for Friday night? |
| Agent: [Checking...] Yes, we do! For how many...? |
|-----------------------------------------------------|
| [ User Input Text Box___________________________ ] [Send] |
+-----------------------------------------------------+
#6. MILESTONES & ROADMAP
Phase 1: Core Platform & User Auth (Feature Release 1) Phase 2: Transportation Management & Booking Foundation (Feature Release 2) Phase 3: Experience Package Management & Booking (Feature Release 3) Phase 4: Ambassador Management & Interaction (Feature Release 4) Phase 5: Payment Integration & Confirmation Flows (Feature Release 5) Phase 6: Driver Interface & Actions (Feature Release 7) Phase 7: Admin Operations & Reporting (Feature Release 8) Phase 8: AI Agent Integration - Basic Tools (Feature Release 6) Phase 9: (Future) Advanced AI, Mobile Optimizations, Subscriptions, Advanced Reporting
#7. APPENDICES / REFERENCES
- Payload CMS Documentation: https://payloadcms.com/docs
- Stripe Plugin for Payload: https://payloadcms.com/docs/plugins/stripe
- Stripe Documentation: https://stripe.com/docs
- Next.js Documentation: https://nextjs.org/docs
- 5CRSE Business Requirements Document (BRD)
- 5CRSE Business Model Document
#8. PROJECT TIMELINE AND BUDGET
- Timeline: Phased delivery over 6-9 months (estimate, depends on resource allocation per phase).
- Budget: [Specify Budget]
(Tech Stack and Design Requirements section largely unchanged, but ensure DB reflects PostgreSQL and list primary/secondary libs consistently)
#Core Libraries and Tools
- React: Core library for building the UI.
- Next.js: Framework for server-side rendering, static site generation, and API routes.
- Payload CMS: Headless CMS for backend content and operational data management.
- Tailwind CSS: Utility-first CSS framework for styling.
- TypeScript: For static typing.
- PostgreSQL: Primary database (@payloadcms/db-postgres).
#Potential Additional Libraries (To be confirmed during implementation)
- State Management: React Query (server state), Zustand (client state).
- Styling/UI Components: Radix UI (Primitives/Colors), shadcn/ui.
- Forms: React Hook Form.
- Mapping/Routing: e.g., Leaflet, Mapbox GL JS, Google Maps JavaScript API (for frontend display/interaction if needed).
- Testing: Vitest/Jest, React Testing Library, Playwright/Cypress.
#Package.json Setup
(Example updated for PostgreSQL)
{
"name": "5crse",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon",
"build": "yarn payload build && next build", // Ensure payload build runs
"start": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NODE_ENV=production node dist/server.js",
"lint": "next lint",
"payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload",
"generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types"
// Add test scripts
},
"dependencies": {
"@payloadcms/db-postgres": "^1.0.0", // Use Postgres adapter
"@payloadcms/plugin-cloud": "^1.0.0",
"@payloadcms/plugin-stripe": "^1.0.0", // If Stripe plugin is used
"@payloadcms/richtext-slate": "^1.0.0",
"next": "^14.2.0", // Use project's specific version
"payload": "^2.0.0", // Use project's specific version
"react": "^18.2.0",
"react-dom": "^18.2.0",
// Add other confirmed dependencies (e.g., react-query, zustand, tailwindcss)
},
"devDependencies": {
"@types/node": "^18.11.19",
"@types/react": "^18.2.79",
"@types/react-dom": "^18.2.25",
"cross-env": "^7.0.3",
"eslint": "^8.57.0",
"eslint-config-next": "^14.2.3",
"nodemon": "^3.1.0",
"tailwindcss": "^3.4.3",
"typescript": "^5.4.5"
// Add other dev dependencies (testing libs, etc.)
}
}
#Color Palette & CSS Setup
Black Platnum(white) and Goal primary CTA and and Image accent color.