> ## Documentation Index
> Fetch the complete documentation index at: https://docs.grouple.pro/llms.txt
> Use this file to discover all available pages before exploring further.

# Frontend Overview

> React + TypeScript (Vite) frontend hosted on AWS Amplify

## Tech Stack

* **Framework:** React + TypeScript
* **Build Tool:** Vite
* **Styling:** Tailwind CSS + shadcn/ui components
* **State:** React Context (AuthContext, CurrencyContext, OnboardingContext)
* **Database Client:** Supabase JS client (direct CRUD + JWT auth)
* **Hosting:** AWS Amplify (auto-deploys from GitHub `main` branch)

## Application Structure

The frontend is split into two distinct user-facing applications within the same codebase:

### Customer App (`client/components/endcustomers/`)

For event planners and customers discovering venues and submitting enquiries.

| Section             | Path                             | Description                  |
| ------------------- | -------------------------------- | ---------------------------- |
| Hero                | `HomePage/HeroSection.tsx`       | Main hero banner             |
| Browse All Listings | `HomePage/BrowseAllListings.tsx` | Full venue listing/search    |
| Featured Venues     | `HomePage/FeaturedVenues.tsx`    | Highlighted/featured venues  |
| Venue Categories    | `HomePage/VenueCategories.tsx`   | Browse by venue category     |
| Venue Showcase      | `HomePage/VenueShowcase.tsx`     | Venue spotlight section      |
| Event Types         | `HomePage/EventTypes.tsx`        | Browse by event type         |
| How It Works        | `HomePage/HowItWorks.tsx`        | Platform explainer section   |
| Why Choose          | `HomePage/WhyChoose.tsx`         | Value proposition section    |
| Testimonials        | `HomePage/Testimonials.tsx`      | Customer testimonials        |
| Logo Scroller       | `HomePage/LogoScroller.tsx`      | Partner/venue logos          |
| CTA                 | `HomePage/CTA.tsx`               | Call to action section       |
| FAQ                 | `HomePage/FAQ.tsx`               | Frequently asked questions   |
| Footer              | `HomePage/MainFooter.tsx`        | Site footer                  |
| Legal               | `HomePage/Legal/`                | Terms, privacy policy pages  |
| Enquiry Submission  | `Enquiries/steps/`               | Multi-step enquiry form      |
| My Enquiries        | `Pages/MyEnquiriesPage.tsx`      | Customer enquiries dashboard |
| Venue Detail        | `Pages/VenueDetail.tsx`          | Individual venue page        |
| Venue Enquiry       | `Pages/VenueEnquiryPage.tsx`     | Enquiry from venue page      |
| Compare             | `Pages/Compare.tsx`              | Compare multiple proposals   |
| Proposals           | `Proposals/ProposalTemplate.tsx` | View and confirm proposals   |
| Profile             | `CostomerProfile/`               | Customer profile management  |
| Login               | `Pages/Login.tsx`                | Customer login               |
| Sign Up             | `Pages/SignUp.tsx`               | Customer registration        |

### Merchant App (`client/components/merchant/`)

For venue owners and managers managing leads, proposals, and settings.

| Section       | Path                          | Description                                                                                                                                                                      |
| ------------- | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Dashboard     | `dashboard/`                  | Stats (Active Leads, Total Leads, Avg Lead Value, Avg Group Size), Active Leads table, Top Category, Lead Distribution chart                                                     |
| Leads         | `leads/`                      | All leads with tabs: Pending, Accepted, Declined, Connected, Closed Won, Closed Lost, All. Filter by Event Type + Budget                                                         |
| Add Lead      | `leads/AddLeads/`             | Add leads via: Import CSV (from Tripleseat, EventTemple etc.) or Add Manually. Added leads appear in Accepted tab                                                                |
| RFQ Detail    | `rfq-details/`                | Full enquiry detail: event type, group size, date, time, venue, food preference, requirements, budget range, customer details. Accept / Decline actions                          |
| Send Proposal | `send proposal/`              | AI-assisted proposal editor with package selection from Sales Library                                                                                                            |
| Proposals     | `e-proposals merchant/`       | All proposals with tabs: Sent, Viewed, Confirmed, Rejected, Expired, All. Shows RFQ ID, recipient, quote amount, venue, event date, sent date, expiry date. List + Calendar view |
| Properties    | `pages/VenueListingsPage.tsx` | Manage venues — view, activate/deactivate, add new venue                                                                                                                         |
| Sales Library | `settings/package extract/`   | Upload PDF brochures → AI-powered extraction of packages, inclusions, pricing. Manage global packages used in proposals                                                          |
| Analytics     | `analytics/`                  | Avg Lead Value, Win Rate, Lifetime Value, Avg Group Size. Leads Over Time chart (Month/Quarter/Year). Export Data. Filter by venue                                               |
| Settings      | `settings/`                   | 3 tabs: Account (profile info), Plan & Billing (subscription), Global Settings                                                                                                   |
| Onboarding    | `onboarding/`                 | 3-step merchant onboarding flow                                                                                                                                                  |

## Shared Utilities (`client/shared/`)

| File                | Purpose                                 |
| ------------------- | --------------------------------------- |
| `supabaseClient.ts` | Supabase JS client initialisation       |
| `api.ts`            | API utility functions for backend calls |
| `currencies.ts`     | Currency formatting helpers             |
| `timeOptions.ts`    | Time slot options for enquiry forms     |

## Authentication Flow

```
User visits grouple.pro
        ↓
Supabase Auth (GoTrue) → login/signup
        ↓
JWT token stored in AuthContext
        ↓
Frontend uses JWT for:
  - Direct Supabase CRUD (RLS enforced)
  - API requests to api.grouple.pro (Authorization: Bearer <JWT>)
```

## Deployment

* GitHub `main` branch → auto-deploys to AWS Amplify
* Environment variables managed in AWS Amplify console
* Custom domain `grouple.pro` via Route 53